mirror of
https://github.com/awizemann/scarf.git
synced 2026-05-10 10:36:35 +00:00
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>
This commit is contained in:
Alan Wizemann
@@ -0,0 +1,44 @@
|
||||
/* Shared styling for design-system preview cards.
|
||||
Each card is sized for ~700px wide and renders one focused concept. */
|
||||
@import url('../colors_and_type.css');
|
||||
|
||||
* { box-sizing: border-box; }
|
||||
html, body { margin: 0; padding: 0; }
|
||||
body {
|
||||
background: var(--bg);
|
||||
color: var(--fg);
|
||||
font-family: var(--font-sans);
|
||||
font-size: var(--text-body);
|
||||
line-height: var(--leading-normal);
|
||||
-webkit-font-smoothing: antialiased;
|
||||
}
|
||||
|
||||
.card-root {
|
||||
padding: 20px 24px;
|
||||
min-height: 110px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 12px;
|
||||
}
|
||||
.row { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
|
||||
.col { display: flex; flex-direction: column; gap: 8px; }
|
||||
.label { font-size: 11px; color: var(--fg-muted); text-transform: uppercase; letter-spacing: 0.06em; font-weight: 600; }
|
||||
.mono { font-family: var(--font-mono); font-size: 11px; color: var(--fg-muted); }
|
||||
|
||||
/* swatches */
|
||||
.swatch {
|
||||
width: 92px;
|
||||
height: 64px;
|
||||
border-radius: 8px;
|
||||
border: 1px solid var(--border);
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: flex-end;
|
||||
padding: 6px 8px;
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
}
|
||||
.swatch .name { font-size: 10px; font-weight: 600; }
|
||||
.swatch .hex { font-family: var(--font-mono); font-size: 10px; opacity: 0.85; }
|
||||
.swatch.dark-text { color: var(--gray-900); }
|
||||
.swatch.light-text { color: #fff; }
|
||||
@@ -0,0 +1,13 @@
|
||||
<!doctype html><html lang="en"><head><meta charset="utf-8"><title>Brand mark</title>
|
||||
<link rel="stylesheet" href="_preview.css"></head>
|
||||
<body>
|
||||
<div class="card-root" style="flex-direction:row;align-items:center;gap:24px;min-height:160px">
|
||||
<img src="../assets/scarf-app-icon-128.png" alt="Scarf icon" width="96" height="96"
|
||||
style="border-radius:22px;box-shadow:var(--shadow-md);background:var(--gradient-brand)">
|
||||
<div class="col" style="flex:1;gap:6px">
|
||||
<div style="font-family:var(--font-display);font-size:28px;font-weight:600;letter-spacing:-0.015em">Scarf</div>
|
||||
<div style="color:var(--fg-muted);font-size:14px;max-width:380px">A native macOS GUI for the Hermes AI agent. Full visibility into what an autonomous agent is doing, when, and what it creates.</div>
|
||||
<div class="mono" style="margin-top:4px">brand: white silk on lavender → magenta gradient</div>
|
||||
</div>
|
||||
</div>
|
||||
</body></html>
|
||||
@@ -0,0 +1,17 @@
|
||||
<!doctype html><html lang="en"><head><meta charset="utf-8"><title>Primary palette</title>
|
||||
<link rel="stylesheet" href="_preview.css"></head>
|
||||
<body>
|
||||
<div class="card-root">
|
||||
<div class="label">Brand · Scarf Purple</div>
|
||||
<div class="row">
|
||||
<div class="swatch light-text" style="background:#F5F0FA;color:#36204A"><div class="name">50</div><div class="hex">#F5F0FA</div></div>
|
||||
<div class="swatch light-text" style="background:#EADDF3;color:#36204A"><div class="name">100</div><div class="hex">#EADDF3</div></div>
|
||||
<div class="swatch light-text" style="background:#D4B8E8;color:#36204A"><div class="name">200</div><div class="hex">#D4B8E8</div></div>
|
||||
<div class="swatch light-text" style="background:#B288D9"><div class="name">300</div><div class="hex">#B288D9</div></div>
|
||||
<div class="swatch light-text" style="background:#8B5BB8"><div class="name">500 ★</div><div class="hex">#8B5BB8</div></div>
|
||||
<div class="swatch light-text" style="background:#7848A0"><div class="name">600</div><div class="hex">#7848A0</div></div>
|
||||
<div class="swatch light-text" style="background:#4D2C68"><div class="name">800</div><div class="hex">#4D2C68</div></div>
|
||||
</div>
|
||||
<div class="mono">★ var(--accent) · used for primary buttons, focused borders, active sidebar items</div>
|
||||
</div>
|
||||
</body></html>
|
||||
@@ -0,0 +1,21 @@
|
||||
<!doctype html><html lang="en"><head><meta charset="utf-8"><title>Neutral palette</title>
|
||||
<link rel="stylesheet" href="_preview.css"></head>
|
||||
<body>
|
||||
<div class="card-root">
|
||||
<div class="label">Neutrals · warm-cool gray scale</div>
|
||||
<div class="row">
|
||||
<div class="swatch dark-text" style="background:#FFFFFF"><div class="name">0</div><div class="hex">#FFFFFF</div></div>
|
||||
<div class="swatch dark-text" style="background:#FAFAFB"><div class="name">50</div><div class="hex">#FAFAFB</div></div>
|
||||
<div class="swatch dark-text" style="background:#F3F2F5"><div class="name">100</div><div class="hex">#F3F2F5</div></div>
|
||||
<div class="swatch dark-text" style="background:#E8E6EC"><div class="name">200</div><div class="hex">#E8E6EC</div></div>
|
||||
<div class="swatch dark-text" style="background:#D6D3DC"><div class="name">300</div><div class="hex">#D6D3DC</div></div>
|
||||
<div class="swatch dark-text" style="background:#B5B1BD"><div class="name">400</div><div class="hex">#B5B1BD</div></div>
|
||||
<div class="swatch light-text" style="background:#8C8893"><div class="name">500</div><div class="hex">#8C8893</div></div>
|
||||
<div class="swatch light-text" style="background:#6A666F"><div class="name">600</div><div class="hex">#6A666F</div></div>
|
||||
<div class="swatch light-text" style="background:#4A464E"><div class="name">700</div><div class="hex">#4A464E</div></div>
|
||||
<div class="swatch light-text" style="background:#2E2C32"><div class="name">800</div><div class="hex">#2E2C32</div></div>
|
||||
<div class="swatch light-text" style="background:#1A181E"><div class="name">900</div><div class="hex">#1A181E</div></div>
|
||||
</div>
|
||||
<div class="mono">slight violet tint — bg=50, bg-card=0, fg=900, fg-muted=600</div>
|
||||
</div>
|
||||
</body></html>
|
||||
@@ -0,0 +1,19 @@
|
||||
<!doctype html><html lang="en"><head><meta charset="utf-8"><title>Semantic colors</title>
|
||||
<link rel="stylesheet" href="_preview.css"></head>
|
||||
<body>
|
||||
<div class="card-root">
|
||||
<div class="label">Semantic · status & feedback</div>
|
||||
<div class="row">
|
||||
<div class="swatch light-text" style="background:#2AA876"><div class="name">success</div><div class="hex">#2AA876</div></div>
|
||||
<div class="swatch light-text" style="background:#D9534F"><div class="name">danger</div><div class="hex">#D9534F</div></div>
|
||||
<div class="swatch dark-text" style="background:#F0AD4E"><div class="name">warning</div><div class="hex">#F0AD4E</div></div>
|
||||
<div class="swatch light-text" style="background:#3498DB"><div class="name">info</div><div class="hex">#3498DB</div></div>
|
||||
</div>
|
||||
<div class="row" style="gap:8px;margin-top:4px">
|
||||
<span style="font-size:11px;padding:3px 9px;border-radius:999px;background:#D8F0E5;color:#1F7F5A;font-weight:600">● Running</span>
|
||||
<span style="font-size:11px;padding:3px 9px;border-radius:999px;background:#F8DAD8;color:#B83C38;font-weight:600">● Error</span>
|
||||
<span style="font-size:11px;padding:3px 9px;border-radius:999px;background:#FCEAD0;color:#A8741F;font-weight:600">● Reasoning</span>
|
||||
<span style="font-size:11px;padding:3px 9px;border-radius:999px;background:#D8ECF8;color:#1F70A8;font-weight:600">● Model</span>
|
||||
</div>
|
||||
</div>
|
||||
</body></html>
|
||||
@@ -0,0 +1,16 @@
|
||||
<!doctype html><html lang="en"><head><meta charset="utf-8"><title>Tool-kind colors</title>
|
||||
<link rel="stylesheet" href="_preview.css"></head>
|
||||
<body>
|
||||
<div class="card-root">
|
||||
<div class="label">Tool-kind colors · agent activity</div>
|
||||
<div class="row">
|
||||
<div class="swatch light-text" style="background:#2AA876"><div class="name">read</div><div class="hex">green</div></div>
|
||||
<div class="swatch light-text" style="background:#3498DB"><div class="name">edit</div><div class="hex">blue</div></div>
|
||||
<div class="swatch dark-text" style="background:#F0AD4E"><div class="name">execute</div><div class="hex">orange</div></div>
|
||||
<div class="swatch light-text" style="background:#8E5BC9"><div class="name">fetch</div><div class="hex">purple</div></div>
|
||||
<div class="swatch light-text" style="background:#5B6CD9"><div class="name">browser</div><div class="hex">indigo</div></div>
|
||||
<div class="swatch light-text" style="background:#8C8893"><div class="name">other</div><div class="hex">gray</div></div>
|
||||
</div>
|
||||
<div class="mono">preserved verbatim from ToolCallCard.swift — semantic to the product</div>
|
||||
</div>
|
||||
</body></html>
|
||||
@@ -0,0 +1,31 @@
|
||||
<!doctype html><html lang="en"><head><meta charset="utf-8"><title>Buttons</title>
|
||||
<link rel="stylesheet" href="_preview.css">
|
||||
<style>
|
||||
.btn { font-family:var(--font-sans); font-size:14px; font-weight:500; padding:7px 14px; border-radius:8px; border:1px solid transparent; cursor:pointer; transition:all 120ms var(--ease-smooth); }
|
||||
.btn-primary { background:var(--accent); color:#fff; }
|
||||
.btn-primary:hover { background:var(--accent-hover); }
|
||||
.btn-secondary { background:var(--bg-card); color:var(--fg); border-color:var(--border-strong); }
|
||||
.btn-secondary:hover { border-color:var(--accent); color:var(--accent-hover); }
|
||||
.btn-ghost { background:transparent; color:var(--fg); }
|
||||
.btn-ghost:hover { background:var(--bg-quaternary); }
|
||||
.btn-danger { background:#fff; color:var(--red-600); border-color:var(--red-500); }
|
||||
.btn-link { background:transparent; color:var(--accent); padding:6px 0; border:none; }
|
||||
.btn-sm { font-size:12px; padding:4px 10px; }
|
||||
</style></head>
|
||||
<body>
|
||||
<div class="card-root">
|
||||
<div class="label">Buttons</div>
|
||||
<div class="row">
|
||||
<button class="btn btn-primary">Install Template</button>
|
||||
<button class="btn btn-secondary">Run Diagnostics…</button>
|
||||
<button class="btn btn-ghost">Cancel</button>
|
||||
<button class="btn btn-danger">Delete</button>
|
||||
<button class="btn btn-link">View All →</button>
|
||||
</div>
|
||||
<div class="row" style="margin-top:4px">
|
||||
<button class="btn btn-primary btn-sm">Add</button>
|
||||
<button class="btn btn-secondary btn-sm">Export</button>
|
||||
<button class="btn btn-secondary btn-sm" disabled style="opacity:.4">Configure</button>
|
||||
</div>
|
||||
</div>
|
||||
</body></html>
|
||||
@@ -0,0 +1,15 @@
|
||||
<!doctype html><html lang="en"><head><meta charset="utf-8"><title>Chat bubbles</title>
|
||||
<link rel="stylesheet" href="_preview.css"></head>
|
||||
<body>
|
||||
<div class="card-root" style="gap:8px">
|
||||
<div style="display:flex;justify-content:flex-end">
|
||||
<div style="background:var(--accent-tint);padding:8px 12px;border-radius:12px;font-size:14px;max-width:70%">What's the status of the cron job?</div>
|
||||
</div>
|
||||
<div style="text-align:right;font-size:10px;color:var(--fg-faint);margin-bottom:6px">9:42 AM</div>
|
||||
<div style="background:var(--bg-quaternary);padding:8px 12px;border-radius:12px;font-size:14px;max-width:80%">
|
||||
<div style="font-size:11px;color:var(--orange-500);font-weight:600;margin-bottom:4px">▾ Reasoning <span style="color:var(--fg-faint);font-weight:400">(127 tokens)</span></div>
|
||||
The <span class="scarf-code" style="font-family:var(--font-mono);font-size:12px;background:rgba(0,0,0,.05);padding:1px 5px;border-radius:4px">daily-summary</span> job ran 14 minutes ago and completed successfully.
|
||||
</div>
|
||||
<div style="font-size:10px;color:var(--fg-faint);margin-left:4px">284 tokens · stop · 9:42 AM</div>
|
||||
</div>
|
||||
</body></html>
|
||||
@@ -0,0 +1,12 @@
|
||||
<!doctype html><html lang="en"><head><meta charset="utf-8"><title>Composer</title>
|
||||
<link rel="stylesheet" href="_preview.css"></head>
|
||||
<body>
|
||||
<div class="card-root">
|
||||
<div style="border-top:1px solid var(--border);padding:10px 12px;display:flex;gap:8px;align-items:flex-end;background:var(--bg-card);border-radius:8px;box-shadow:var(--shadow-sm)">
|
||||
<div style="opacity:.6;font-size:18px;cursor:pointer">▭</div>
|
||||
<div style="flex:1;background:var(--bg-quaternary);border-radius:12px;padding:8px 12px;font-size:14px;color:var(--fg-faint)">Message Hermes…</div>
|
||||
<div style="font-size:22px;color:var(--accent)">↑</div>
|
||||
</div>
|
||||
<div class="mono">Rich Chat composer · /-menu opens above on slash, Shift+Enter for newline</div>
|
||||
</div>
|
||||
</body></html>
|
||||
@@ -0,0 +1,26 @@
|
||||
<!doctype html><html lang="en"><head><meta charset="utf-8"><title>Form inputs</title>
|
||||
<link rel="stylesheet" href="_preview.css">
|
||||
<style>
|
||||
.field { display:flex; flex-direction:column; gap:4px; flex:1; }
|
||||
.field label { font-size:11px; color:var(--fg-muted); font-weight:600; text-transform:uppercase; letter-spacing:.05em; }
|
||||
.field input, .field select { font-family:var(--font-sans); font-size:14px; padding:6px 10px; border:1px solid var(--border-strong); border-radius:6px; background:var(--bg-card); color:var(--fg); outline:none; transition:all 120ms; }
|
||||
.field input:focus { border-color:var(--accent); box-shadow:var(--shadow-focus); }
|
||||
.toggle { width:36px; height:20px; background:var(--accent); border-radius:999px; position:relative; cursor:pointer; }
|
||||
.toggle::after { content:''; position:absolute; right:2px; top:2px; width:16px; height:16px; background:#fff; border-radius:50%; box-shadow:0 1px 2px rgba(0,0,0,.2); }
|
||||
.toggle.off { background:var(--gray-300); }
|
||||
.toggle.off::after { right:auto; left:2px; }
|
||||
</style></head>
|
||||
<body>
|
||||
<div class="card-root">
|
||||
<div class="row" style="gap:14px;align-items:flex-end">
|
||||
<div class="field"><label>Project Name</label><input value="hermes-blog"/></div>
|
||||
<div class="field"><label>Strategy</label><select><option>round_robin</option></select></div>
|
||||
</div>
|
||||
<div class="row" style="gap:18px">
|
||||
<div class="row" style="gap:8px"><div class="toggle"></div><span style="font-size:13px">Auto-update</span></div>
|
||||
<div class="row" style="gap:8px"><div class="toggle off"></div><span style="font-size:13px">Pause cron</span></div>
|
||||
<div class="row" style="gap:8px;font-size:13px"><input type="checkbox" checked style="accent-color:var(--accent)"/>Verified</div>
|
||||
<div class="row" style="gap:8px;font-size:13px"><input type="radio" checked style="accent-color:var(--accent)"/>Local</div>
|
||||
</div>
|
||||
</div>
|
||||
</body></html>
|
||||
@@ -0,0 +1,25 @@
|
||||
<!doctype html><html lang="en"><head><meta charset="utf-8"><title>Sidebar</title>
|
||||
<link rel="stylesheet" href="_preview.css">
|
||||
<style>
|
||||
.sb { width:220px; background:var(--bg-quaternary); border-radius:10px; padding:10px 8px; font-size:13px; }
|
||||
.sb-title { font-size:10px; color:var(--fg-muted); font-weight:600; text-transform:uppercase; letter-spacing:.06em; padding:6px 8px 4px }
|
||||
.sb-item { display:flex; align-items:center; gap:8px; padding:5px 8px; border-radius:6px; color:var(--fg); cursor:pointer }
|
||||
.sb-item:hover { background:var(--bg-tertiary) }
|
||||
.sb-item.active { background:var(--accent-tint); color:var(--accent-active) }
|
||||
.sb-icon { width:14px; opacity:.7 }
|
||||
.sb-item.active .sb-icon { opacity:1 }
|
||||
</style></head>
|
||||
<body>
|
||||
<div class="card-root" style="padding:14px">
|
||||
<div class="sb">
|
||||
<div class="sb-title">Monitor</div>
|
||||
<div class="sb-item"><span class="sb-icon">▦</span>Dashboard</div>
|
||||
<div class="sb-item active"><span class="sb-icon">📊</span>Insights</div>
|
||||
<div class="sb-item"><span class="sb-icon">💬</span>Sessions</div>
|
||||
<div class="sb-title">Interact</div>
|
||||
<div class="sb-item"><span class="sb-icon">✦</span>Chat</div>
|
||||
<div class="sb-item"><span class="sb-icon">◈</span>Memory</div>
|
||||
<div class="sb-item"><span class="sb-icon">⚒</span>Skills</div>
|
||||
</div>
|
||||
</div>
|
||||
</body></html>
|
||||
@@ -0,0 +1,18 @@
|
||||
<!doctype html><html lang="en"><head><meta charset="utf-8"><title>Stat cards</title>
|
||||
<link rel="stylesheet" href="_preview.css">
|
||||
<style>
|
||||
.stat { background:var(--bg-quaternary); border-radius:8px; padding:14px 12px; flex:1; min-width:110px; text-align:center; }
|
||||
.stat .v { font-family:var(--font-mono); font-size:22px; font-weight:600; }
|
||||
.stat .l { font-size:11px; color:var(--fg-muted); margin-top:2px; }
|
||||
</style></head>
|
||||
<body>
|
||||
<div class="card-root">
|
||||
<div class="row" style="gap:12px">
|
||||
<div class="stat"><div class="v">847</div><div class="l">Sessions</div></div>
|
||||
<div class="stat"><div class="v">12,394</div><div class="l">Messages</div></div>
|
||||
<div class="stat"><div class="v">3,221</div><div class="l">Tool Calls</div></div>
|
||||
<div class="stat"><div class="v">2.4M</div><div class="l">Tokens</div></div>
|
||||
<div class="stat"><div class="v">$42.18</div><div class="l">Cost</div></div>
|
||||
</div>
|
||||
</div>
|
||||
</body></html>
|
||||
@@ -0,0 +1,19 @@
|
||||
<!doctype html><html lang="en"><head><meta charset="utf-8"><title>Status cards</title>
|
||||
<link rel="stylesheet" href="_preview.css">
|
||||
<style>
|
||||
.scard { background:var(--bg-quaternary); border-radius:8px; padding:12px; flex:1; min-width:130px; }
|
||||
.scard .head { display:flex; align-items:center; gap:6px; font-size:11px; color:var(--fg-muted); margin-bottom:4px; }
|
||||
.scard .dot { width:8px; height:8px; border-radius:50%; }
|
||||
.scard .val { font-family:var(--font-mono); font-size:14px; font-weight:500; }
|
||||
</style></head>
|
||||
<body>
|
||||
<div class="card-root">
|
||||
<div class="row" style="gap:12px">
|
||||
<div class="scard"><div class="head"><span class="dot" style="background:var(--green-500)"></span>Hermes</div><div class="val">Running</div></div>
|
||||
<div class="scard"><div class="head" style="color:var(--blue-500)">⌬ Model</div><div class="val">claude-sonnet-4.5</div></div>
|
||||
<div class="scard"><div class="head" style="color:var(--accent)">☁ Provider</div><div class="val">Anthropic</div></div>
|
||||
<div class="scard"><div class="head"><span class="dot" style="background:var(--green-500)"></span>Gateway</div><div class="val">Connected · 3</div></div>
|
||||
</div>
|
||||
<div class="mono">Status cards · 4 across at standard width</div>
|
||||
</div>
|
||||
</body></html>
|
||||
@@ -0,0 +1,31 @@
|
||||
<!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>
|
||||
@@ -0,0 +1,24 @@
|
||||
<!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>
|
||||
@@ -0,0 +1,14 @@
|
||||
<!doctype html><html lang="en"><head><meta charset="utf-8"><title>Radii</title>
|
||||
<link rel="stylesheet" href="_preview.css"></head>
|
||||
<body>
|
||||
<div class="card-root">
|
||||
<div class="label">Radii · 4 / 6 / 8 / 12 / 14</div>
|
||||
<div class="row" style="gap:14px;align-items:flex-end">
|
||||
<div class="col" style="align-items:center;gap:6px"><div style="width:64px;height:64px;background:var(--accent-tint);border:1px solid var(--accent);border-radius:4px"></div><div class="mono">4 · chips, code</div></div>
|
||||
<div class="col" style="align-items:center;gap:6px"><div style="width:64px;height:64px;background:var(--accent-tint);border:1px solid var(--accent);border-radius:6px"></div><div class="mono">6 · tool cards</div></div>
|
||||
<div class="col" style="align-items:center;gap:6px"><div style="width:64px;height:64px;background:var(--accent-tint);border:1px solid var(--accent);border-radius:8px"></div><div class="mono">8 · cards, btns</div></div>
|
||||
<div class="col" style="align-items:center;gap:6px"><div style="width:64px;height:64px;background:var(--accent-tint);border:1px solid var(--accent);border-radius:12px"></div><div class="mono">12 · bubbles</div></div>
|
||||
<div class="col" style="align-items:center;gap:6px"><div style="width:64px;height:64px;background:var(--accent-tint);border:1px solid var(--accent);border-radius:14px"></div><div class="mono">14 · windows</div></div>
|
||||
</div>
|
||||
</div>
|
||||
</body></html>
|
||||
@@ -0,0 +1,16 @@
|
||||
<!doctype html><html lang="en"><head><meta charset="utf-8"><title>Spacing scale</title>
|
||||
<link rel="stylesheet" href="_preview.css"></head>
|
||||
<body>
|
||||
<div class="card-root">
|
||||
<div class="label">Spacing · 4-base scale</div>
|
||||
<div class="col" style="gap:6px">
|
||||
<div class="row" style="gap:10px"><div style="width:4px;height:14px;background:var(--accent)"></div><div class="mono">4 · 1 · inline gaps</div></div>
|
||||
<div class="row" style="gap:10px"><div style="width:8px;height:14px;background:var(--accent)"></div><div class="mono">8 · 2 · button padding y</div></div>
|
||||
<div class="row" style="gap:10px"><div style="width:12px;height:14px;background:var(--accent)"></div><div class="mono">12 · 3 · card padding</div></div>
|
||||
<div class="row" style="gap:10px"><div style="width:16px;height:14px;background:var(--accent)"></div><div class="mono">16 · 4 · view padding</div></div>
|
||||
<div class="row" style="gap:10px"><div style="width:20px;height:14px;background:var(--accent)"></div><div class="mono">20 · 5 · section gap</div></div>
|
||||
<div class="row" style="gap:10px"><div style="width:24px;height:14px;background:var(--accent)"></div><div class="mono">24 · 6 · header gap</div></div>
|
||||
<div class="row" style="gap:10px"><div style="width:32px;height:14px;background:var(--accent)"></div><div class="mono">32 · 8 · page-level</div></div>
|
||||
</div>
|
||||
</div>
|
||||
</body></html>
|
||||
@@ -0,0 +1,13 @@
|
||||
<!doctype html><html lang="en"><head><meta charset="utf-8"><title>Shadows</title>
|
||||
<link rel="stylesheet" href="_preview.css"></head>
|
||||
<body>
|
||||
<div class="card-root" style="background:var(--bg)">
|
||||
<div class="label">Shadows · two-layer Apple style</div>
|
||||
<div class="row" style="gap:24px;padding:12px 4px">
|
||||
<div class="col" style="align-items:center;gap:8px"><div style="width:120px;height:60px;background:var(--bg-card);border-radius:8px;box-shadow:0 1px 2px rgba(28,26,32,.05)"></div><div class="mono">sm · subtle lift</div></div>
|
||||
<div class="col" style="align-items:center;gap:8px"><div style="width:120px;height:60px;background:var(--bg-card);border-radius:8px;box-shadow:0 1px 2px rgba(28,26,32,.04),0 4px 12px rgba(28,26,32,.04)"></div><div class="mono">md · cards</div></div>
|
||||
<div class="col" style="align-items:center;gap:8px"><div style="width:120px;height:60px;background:var(--bg-card);border-radius:8px;box-shadow:0 2px 4px rgba(28,26,32,.06),0 8px 24px rgba(28,26,32,.07)"></div><div class="mono">lg · hover</div></div>
|
||||
<div class="col" style="align-items:center;gap:8px"><div style="width:120px;height:60px;background:var(--bg-card);border-radius:8px;box-shadow:0 4px 8px rgba(28,26,32,.08),0 16px 40px rgba(28,26,32,.10)"></div><div class="mono">xl · sheet</div></div>
|
||||
</div>
|
||||
</div>
|
||||
</body></html>
|
||||
@@ -0,0 +1,11 @@
|
||||
<!doctype html><html lang="en"><head><meta charset="utf-8"><title>Type · body</title>
|
||||
<link rel="stylesheet" href="_preview.css"></head>
|
||||
<body>
|
||||
<div class="card-root" style="gap:10px">
|
||||
<div class="label">Body · sentence case, calm and direct</div>
|
||||
<div style="font-size:17px;font-weight:600">Hermes actually knows what project it's in</div>
|
||||
<div style="font-size:15px;color:var(--fg-muted)">Every project-scoped chat gets a Scarf-managed block auto-injected into the project's <span class="scarf-code" style="font-family:var(--font-mono);font-size:13px">AGENTS.md</span> before the session starts.</div>
|
||||
<div style="font-size:14px">Ask the agent <em>"what project am I in?"</em> and it answers with the project name, directory, template id, and registered cron jobs.</div>
|
||||
<div style="font-size:12px;color:var(--fg-muted)">headline 17 · subhead 15 · body 14 · caption 12 — same rhythm as SwiftUI's text styles</div>
|
||||
</div>
|
||||
</body></html>
|
||||
@@ -0,0 +1,11 @@
|
||||
<!doctype html><html lang="en"><head><meta charset="utf-8"><title>Type · display</title>
|
||||
<link rel="stylesheet" href="_preview.css"></head>
|
||||
<body>
|
||||
<div class="card-root" style="gap:14px">
|
||||
<div class="label">Display · SF Pro Display / Inter</div>
|
||||
<div style="font-family:var(--font-display);font-size:34px;font-weight:600;letter-spacing:-0.02em;line-height:1.15">Make the complex simple</div>
|
||||
<div style="font-family:var(--font-display);font-size:28px;font-weight:600;letter-spacing:-0.015em;line-height:1.2">Recent sessions</div>
|
||||
<div style="font-family:var(--font-display);font-size:22px;font-weight:600;letter-spacing:-0.01em">Activity patterns</div>
|
||||
<div class="mono">largeTitle 34 / title1 28 / title2 22 — used for view titles only</div>
|
||||
</div>
|
||||
</body></html>
|
||||
@@ -0,0 +1,15 @@
|
||||
<!doctype html><html lang="en"><head><meta charset="utf-8"><title>Type · mono</title>
|
||||
<link rel="stylesheet" href="_preview.css"></head>
|
||||
<body>
|
||||
<div class="card-root" style="gap:10px">
|
||||
<div class="label">Mono · SF Mono / JetBrains Mono</div>
|
||||
<div style="font-family:var(--font-mono);font-size:14px;font-weight:500">claude-haiku-4-5</div>
|
||||
<div style="font-family:var(--font-mono);font-size:13px;color:var(--fg-muted)">~/.hermes/state.db · 14.2 MB</div>
|
||||
<div style="font-family:var(--font-mono);font-size:12px">{ "tokens": 2384, "model": "claude-haiku-4-5" }</div>
|
||||
<div class="row" style="gap:6px">
|
||||
<span style="font-family:var(--font-mono);font-size:11px;background:var(--bg-quaternary);padding:2px 8px;border-radius:4px">v2.3.0</span>
|
||||
<span style="font-family:var(--font-mono);font-size:11px;background:var(--bg-quaternary);padding:2px 8px;border-radius:4px">2,847 tokens</span>
|
||||
<span style="font-family:var(--font-mono);font-size:11px;background:var(--bg-quaternary);padding:2px 8px;border-radius:4px">$0.0421</span>
|
||||
</div>
|
||||
</div>
|
||||
</body></html>
|
||||
Reference in New Issue
Block a user