mirror of
https://github.com/awizemann/scarf.git
synced 2026-05-08 02:14:37 +00:00
Alan Wizemann
8a2d89654b
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>
32 lines
2.2 KiB
HTML
32 lines
2.2 KiB
HTML
<!doctype html><html lang="en"><head><meta charset="utf-8"><title>Tool call card</title>
|
|
<link rel="stylesheet" href="_preview.css"></head>
|
|
<body>
|
|
<div class="card-root">
|
|
<div style="background:var(--bg-quaternary);border-radius:6px;padding:6px 8px;display:flex;align-items:center;gap:6px;font-size:12px">
|
|
<div style="width:3px;height:16px;background:var(--green-500);border-radius:1px"></div>
|
|
<span style="color:var(--green-500)">📖</span>
|
|
<span style="font-family:var(--font-mono);font-weight:600">read_file</span>
|
|
<span style="font-family:var(--font-mono);color:var(--fg-faint);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;flex:1;min-width:0">~/.hermes/config.yaml</span>
|
|
<span style="color:var(--green-500)">✓</span>
|
|
<span style="color:var(--fg-faint)">▸</span>
|
|
</div>
|
|
<div style="background:var(--bg-quaternary);border-radius:6px;padding:6px 8px;display:flex;align-items:center;gap:6px;font-size:12px">
|
|
<div style="width:3px;height:16px;background:var(--orange-500);border-radius:1px"></div>
|
|
<span style="color:var(--orange-500)">⌘</span>
|
|
<span style="font-family:var(--font-mono);font-weight:600">execute</span>
|
|
<span style="font-family:var(--font-mono);color:var(--fg-faint);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;flex:1;min-width:0">{ "cmd": "hermes status" }</span>
|
|
<span style="color:var(--green-500)">✓</span>
|
|
<span style="color:var(--fg-faint)">▾</span>
|
|
</div>
|
|
<div style="background:var(--bg-quaternary);border-radius:6px;padding:6px 8px;display:flex;align-items:center;gap:6px;font-size:12px">
|
|
<div style="width:3px;height:16px;background:var(--blue-500);border-radius:1px"></div>
|
|
<span style="color:var(--blue-500)">✎</span>
|
|
<span style="font-family:var(--font-mono);font-weight:600">write_file</span>
|
|
<span style="font-family:var(--font-mono);color:var(--fg-faint);flex:1">cron/jobs.json</span>
|
|
<div style="width:10px;height:10px;border:1.5px solid var(--fg-faint);border-top-color:transparent;border-radius:50%;animation:spin 1s linear infinite"></div>
|
|
<span style="color:var(--fg-faint)">▸</span>
|
|
</div>
|
|
<style>@keyframes spin{to{transform:rotate(360deg)}}</style>
|
|
</div>
|
|
</body></html>
|