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>
Scarf Design System — static site
A self-contained, offline-friendly site that browses every artifact in the
Scarf design system. Open index.html directly in any browser — no server,
no build step.
What's here
static-site/
├── index.html ← landing page, links into everything
├── colors_and_type.css ← shared design tokens (referenced everywhere)
│
├── ui-kit/ ← interactive macOS UI kit
│ ├── index.html ← click-thru of every screen in the app
│ └── *.jsx ← React components (Sidebar, Chat, Dashboard…)
│
├── tokens/ ← design-system cards
│ ├── _preview.css ← shared card styling
│ ├── colors-*.html ← brand / neutrals / semantic / tool-kinds
│ ├── type-*.html ← display / body / mono
│ ├── spacing-*.html ← scale / radii / shadows
│ ├── components-*.html ← buttons / forms / sidebar / cards / chat / composer / tool-call
│ ├── iconography.html
│ └── brand-mark.html
│
└── assets/ ← icons, brand artwork
How to use it
- Browse offline: double-click
index.html. Everything renders locally; the only network dependency is Google Fonts (Inter + JetBrains Mono). - Host as a site: drop the whole folder onto any static host (Netlify, GitHub Pages, S3, your own nginx). Nothing needs building.
- Embed in a doc: link individual cards directly, e.g.
static-site/tokens/colors-brand.html. - Show the macOS app:
static-site/ui-kit/index.htmlruns the full React-based interactive kit (single self-contained file — works fromfile://, no server needed). The traffic-light corner makes it look like the real app. Source components live alongside as*.jsxfor editing — re-bundle intoindex.htmlwhen you change them.
Notes
- The kit's
index.htmlis a self-contained bundle — React, Babel, Lucide and every component are inlined, so it works fromfile://with no network. The original split-file source is preserved asui-kit/index.source.htmlnext to the.jsxfiles for editing. - The font import in
colors_and_type.css(fonts.googleapis.com) is the only other network call. Replace with locally-served WOFF2 if you need airgapped use.