Files
scarf/design/static-site/tokens/iconography.html
T
Alan Wizemann 8a2d89654b feat(design): adopt ScarfDesign system across Mac UI
Add a typed design-system package (Packages/ScarfDesign) with rust-tone
color tokens, type scale, spacing/radius tokens, ScarfPageHeader and
component primitives (ScarfCard, ScarfBadge, ScarfTextField,
ScarfSectionHeader, ScarfDivider, four button styles). Both Mac and iOS
targets `import ScarfDesign`.

Sidebar redesigned per design/static-site/ui-kit/Sidebar.jsx — glassy
translucent background, 224 px width, app-icon header with server pill,
custom tokenized rows with rust accent-tint when active, footer with
live Hermes-running indicator (wired to ServerLiveStatusRegistry).

14 mockup-backed feature screens redesigned: Settings, Dashboard,
Sessions, Memory, Chat (visual sweep), Activity, Cron, Insights,
MCPServers, Health, Logs, Tools (full); Projects light-touch.
Non-mockup features inherit rust through AccentColor.colorset repoint.

Mac AppIcon.appiconset replaced with the rust set. AccentColor.colorset
repointed to BrandRust hex (light + dark variants).

Visual sweep: every multi-button page-header / action-bar cluster now
wraps in .fixedSize(horizontal: true, vertical: false) so labels can't
wrap letter-by-letter at narrow widths (regression seen on the MCP
detail pane with 4 buttons).

Follow-ups landed:
- Sidebar Hermes-running probe wired to per-window
  ServerLiveStatusRegistry (no more placeholder green).
- Sessions: today filter predicate (isDateInToday(startedAt)); pill
  count reflects real count. Starred stays a no-op pending an upstream
  pinned/starred field on HermesSession.
- Dashboard: Recent activity column rendered alongside Recent sessions
  in a ViewThatFits 2-col grid. Populated from
  HermesDataService.fetchRecentToolCalls(limit:) flattened to
  ActivityEntry. ActivityEntry gains a public memberwise init.

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
2026-04-25 13:27:54 +02:00

25 lines
1.2 KiB
HTML

<!doctype html><html lang="en"><head><meta charset="utf-8"><title>Iconography</title>
<link rel="stylesheet" href="_preview.css">
<script src="https://unpkg.com/lucide@0.469.0/dist/umd/lucide.min.js"></script>
<style>
.ico { display:flex; flex-direction:column; align-items:center; gap:6px; font-size:10px; color:var(--fg-muted); width:64px }
.ico svg { width:22px; height:22px; stroke-width:1.5; color:var(--fg) }
</style></head>
<body>
<div class="card-root">
<div class="label">Iconography · Lucide (web sub for SF Symbols)</div>
<div class="row" style="gap:14px">
<div class="ico"><i data-lucide="layout-grid"></i>Dashboard</div>
<div class="ico"><i data-lucide="bar-chart-3"></i>Insights</div>
<div class="ico"><i data-lucide="messages-square"></i>Sessions</div>
<div class="ico"><i data-lucide="cpu"></i>Model</div>
<div class="ico"><i data-lucide="cloud"></i>Provider</div>
<div class="ico"><i data-lucide="package"></i>Templates</div>
<div class="ico"><i data-lucide="folder"></i>Projects</div>
<div class="ico"><i data-lucide="wrench"></i>Tools</div>
<div class="ico"><i data-lucide="stethoscope"></i>Diagnostics</div>
</div>
<script>lucide.createIcons();</script>
</div>
</body></html>