openclacky 1.2.17 → 1.3.0

data/lib/clacky/web/design-sample.css

@@ -0,0 +1,247 @@
+/* ============================================================
+   DESIGN SAMPLE v2 — "The Cockpit" (skin only, original layout)
+   Standalone. Does NOT touch app.css. For approval only.
+   ============================================================ */
+
+:root[data-theme="light"] {
+  --surface-0:  #FBFBFA;
+  --surface-1:  #FFFFFF;
+  --surface-2:  #F4F4F2;
+  --ink-1:      #1A1B1E;
+  --ink-2:      #56585E;
+  --ink-3:      #8A8D94;
+  --line:       #E8E8E4;
+  --line-soft:  #F0F0EC;
+  --accent:     #4F46E5;
+  --accent-ink: #FFFFFF;
+  --accent-soft: color-mix(in srgb, var(--accent) 9%, transparent);
+  --live:       #16A34A;
+  --shadow-card: 0 1px 2px rgba(20,21,30,.04);
+}
+:root[data-theme="dark"] {
+  --surface-0:  #101114;
+  --surface-1:  #16181D;
+  --surface-2:  #1D2026;
+  --ink-1:      #E8EAEE;
+  --ink-2:      #A4A9B4;
+  --ink-3:      #6B707B;
+  --line:       #262A31;
+  --line-soft:  #1E2229;
+  --accent:     #6366F1;
+  --accent-ink: #FFFFFF;
+  --accent-soft: color-mix(in srgb, var(--accent) 16%, transparent);
+  --live:       #34D399;
+  --shadow-card: 0 1px 2px rgba(0,0,0,.3);
+}
+
+* { box-sizing: border-box; margin: 0; padding: 0; }
+
+:root {
+  --font-sans: "Inter", -apple-system, system-ui, "Segoe UI", sans-serif;
+  --font-mono: ui-monospace, "SF Mono", "JetBrains Mono", "Menlo", monospace;
+}
+
+html, body { height: 100%; }
+body {
+  font-family: var(--font-sans);
+  background: var(--surface-0);
+  color: var(--ink-2);
+  -webkit-font-smoothing: antialiased;
+  font-size: 14px; line-height: 1.5;
+}
+
+.eyebrow {
+  font-family: var(--font-mono);
+  font-size: 10.5px; font-weight: 500;
+  letter-spacing: .14em; text-transform: uppercase;
+  color: var(--ink-3);
+}
+
+#app { display: flex; flex-direction: column; height: 100vh; }
+
+/* ---------- TOP HEADER (original 3-zone layout kept) ---------- */
+#top-header {
+  height: 52px; display: flex; align-items: center;
+  padding: 0 14px; gap: 14px;
+  border-bottom: 1px solid var(--line);
+  background: var(--surface-0);
+}
+#header-left { display: flex; align-items: center; gap: 10px; min-width: 0; }
+.sidebar-toggle-btn, .theme-toggle-btn {
+  width: 32px; height: 32px; border-radius: 7px; border: none;
+  background: transparent; color: var(--ink-3); cursor: pointer;
+  display: grid; place-items: center; transition: all .14s;
+}
+.sidebar-toggle-btn:hover, .theme-toggle-btn:hover { background: var(--surface-2); color: var(--ink-1); }
+#header-brand { display: flex; align-items: center; gap: 9px; cursor: pointer; }
+.brand-mark {
+  width: 22px; height: 22px; border-radius: 6px; background: var(--accent);
+  display: grid; place-items: center; color: var(--accent-ink);
+  font-family: var(--font-mono); font-size: 13px; font-weight: 700;
+}
+.header-logo-divider { width: 1px; height: 16px; background: var(--line); }
+#header-logo { font-weight: 650; color: var(--ink-1); font-size: 14.5px; }
+.header-owner-badge {
+  font-family: var(--font-mono); font-size: 9.5px; font-weight: 600;
+  letter-spacing: .1em; padding: 3px 7px; border-radius: 5px;
+  background: var(--accent-soft); color: var(--accent); border: none; cursor: pointer;
+}
+
+/* ---------- COMMAND BAR (new: fills the empty top center) ---------- */
+#header-center { flex: 1; display: flex; justify-content: center; }
+.cmdbar {
+  display: flex; align-items: center; gap: 9px;
+  width: 100%; max-width: 440px; height: 34px;
+  padding: 0 12px;
+  border: 1px solid var(--line); border-radius: 9px;
+  background: var(--surface-1); color: var(--ink-3);
+  cursor: text; transition: border-color .14s;
+}
+.cmdbar:hover { border-color: var(--accent); }
+.cmdbar svg { width: 15px; height: 15px; flex-shrink: 0; }
+.cmdbar .ph { flex: 1; font-size: 13px; }
+.cmdbar .kbd {
+  font-family: var(--font-mono); font-size: 10.5px;
+  padding: 2px 6px; border-radius: 5px;
+  background: var(--surface-2); color: var(--ink-3);
+  border: 1px solid var(--line);
+}
+
+/* ---------- right: icons ---------- */
+#header-right { display: flex; align-items: center; gap: 12px; }
+@keyframes pulse {
+  0%   { box-shadow: 0 0 0 0 color-mix(in srgb, var(--live) 55%, transparent); }
+  60%  { box-shadow: 0 0 0 4px transparent; }
+  100% { box-shadow: 0 0 0 0 transparent; }
+}
+.header-icons { display: flex; gap: 2px; }
+.theme-toggle-btn svg { width: 16px; height: 16px; }
+
+/* ---------- content row + sidebar (original positions) ---------- */
+#content-row { flex: 1; display: flex; min-height: 0; }
+#sidebar {
+  width: 256px; flex-shrink: 0;
+  border-right: 1px solid var(--line);
+  background: var(--surface-0);
+  display: flex; flex-direction: column;
+}
+#sidebar-list { flex: 1; overflow-y: auto; padding: 8px 10px; }
+
+.sidebar-divider {
+  display: flex; align-items: center; gap: 8px;
+  padding: 14px 8px 7px;
+}
+.sidebar-divider > span:first-child {
+  font-family: var(--font-mono); font-size: 10.5px; font-weight: 500;
+  letter-spacing: .14em; text-transform: uppercase; color: var(--ink-3);
+  white-space: nowrap;
+}
+.sidebar-divider::after { content: ""; flex: 1; height: 1px; background: var(--line-soft); }
+.sidebar-divider-actions { display: flex; align-items: center; gap: 4px; }
+
+.btn-icon-sm {
+  width: 24px; height: 24px; border-radius: 6px; border: none;
+  background: transparent; color: var(--ink-3); cursor: pointer;
+  display: grid; place-items: center;
+}
+.btn-icon-sm:hover { background: var(--surface-2); color: var(--ink-1); }
+
+/* split new-session button (kept as original) */
+.btn-split-wrap { display: flex; align-items: stretch; }
+.btn-split-main {
+  height: 26px; padding: 0 10px; border: 1px solid var(--line);
+  border-right: none; border-radius: 7px 0 0 7px;
+  background: var(--surface-1); color: var(--ink-1); cursor: pointer;
+  font-family: var(--font-sans); font-size: 12px; font-weight: 550;
+}
+.btn-split-main:hover { background: var(--surface-2); }
+.btn-split-arrow {
+  width: 24px; border: 1px solid var(--line); border-radius: 0 7px 7px 0;
+  background: var(--surface-1); color: var(--ink-3); cursor: pointer; font-size: 10px;
+}
+.btn-split-arrow:hover { background: var(--surface-2); }
+
+.conv-empty { padding: 14px 10px; text-align: center; color: var(--ink-3); font-size: 12.5px; }
+
+/* nav items (Config / My Data / Creator) */
+.task-item {
+  display: flex; align-items: center;
+  padding: 8px 10px; border-radius: 8px; cursor: pointer;
+  color: var(--ink-2); transition: background .12s, color .12s;
+  position: relative;
+}
+.task-item:hover { background: var(--surface-2); color: var(--ink-1); }
+.task-item.active { background: var(--accent-soft); color: var(--ink-1); }
+.task-item.active::before {
+  content: ""; position: absolute; left: -10px; top: 50%; transform: translateY(-50%);
+  width: 3px; height: 17px; border-radius: 0 3px 3px 0; background: var(--accent);
+}
+.task-row { display: flex; align-items: center; gap: 11px; }
+.task-icon { color: var(--ink-3); flex-shrink: 0; }
+.task-item.active .task-icon { color: var(--accent); }
+.task-name { font-size: 13.5px; }
+.task-item.active .task-name { font-weight: 550; }
+
+/* sidebar footer */
+#sidebar-footer { border-top: 1px solid var(--line-soft); padding: 8px 10px; }
+.sidebar-nav-row { display: flex; align-items: center; justify-content: space-between; }
+.sidebar-nav-btn {
+  display: flex; align-items: center; gap: 11px;
+  padding: 8px 10px; border-radius: 8px; border: none; cursor: pointer;
+  background: transparent; color: var(--ink-2); font-size: 13px; flex: 1;
+}
+.sidebar-nav-btn:hover { background: var(--surface-2); color: var(--ink-1); }
+.sidebar-nav-btn svg { color: var(--ink-3); }
+.version-badge { font-family: var(--font-mono); font-size: 10px; color: var(--ink-3); padding-right: 6px; letter-spacing: .03em; }
+
+/* ---------- main / chat empty ---------- */
+#main { flex: 1; display: flex; flex-direction: column; background: var(--surface-1); min-width: 0; }
+.chat-empty { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 20px; padding: 40px; }
+.ce-mark { width: 52px; height: 52px; border-radius: 14px; background: var(--accent-soft); display: grid; place-items: center; }
+.ce-mark svg { width: 26px; height: 26px; color: var(--accent); }
+.ce-title { font-size: 21px; font-weight: 680; color: var(--ink-1); letter-spacing: -.01em; text-align: center; }
+.ce-sub { color: var(--ink-3); font-size: 13.5px; text-align: center; }
+.chips { display: flex; gap: 10px; flex-wrap: wrap; justify-content: center; max-width: 540px; }
+.chip { display: flex; align-items: center; gap: 9px; padding: 11px 15px; border: 1px solid var(--line); border-radius: 10px; background: var(--surface-0); cursor: pointer; transition: border-color .14s, transform .14s; }
+.chip:hover { border-color: color-mix(in srgb, var(--accent) 45%, var(--line)); transform: translateY(-1px); }
+.chip .ci { width: 30px; height: 30px; border-radius: 8px; background: var(--surface-2); display: grid; place-items: center; flex-shrink: 0; }
+.chip .ci svg { width: 16px; height: 16px; color: var(--ink-2); }
+.chip .ct { font-size: 13px; color: var(--ink-1); font-weight: 550; }
+.chip .cd { font-size: 11.5px; color: var(--ink-3); }
+
+.composer { margin: 0; padding: 10px 12px; border: 1px solid var(--line); border-radius: 13px; background: var(--surface-0); display: flex; align-items: flex-end; gap: 8px; box-shadow: var(--shadow-card); }
+.composer-wrap { margin: 0 28px 24px; }
+.ib-icon {
+  width: 32px; height: 32px; border-radius: 8px; border: none; flex-shrink: 0;
+  background: transparent; color: var(--ink-3); cursor: pointer;
+  display: grid; place-items: center;
+}
+.ib-icon:hover { background: var(--surface-2); color: var(--ink-1); }
+.ib-icon svg { width: 18px; height: 18px; }
+
+/* session info bar — CLI status mirror, kept fully clickable */
+#session-info-bar {
+  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
+  font-family: var(--font-mono); font-size: 11px; color: var(--ink-3);
+  padding: 0 6px 8px;
+}
+#session-info-bar .sib-sep { opacity: .3; }
+#sib-status { display: flex; align-items: center; gap: 6px; color: var(--live); letter-spacing: .06em; }
+.sib-clickable { color: var(--ink-2); cursor: pointer; border-radius: 4px; padding: 1px 3px; transition: background .12s, color .12s; }
+.sib-clickable:hover { background: var(--surface-2); color: var(--ink-1); }
+#sib-cost { color: var(--ink-2); }
+.sig-bars { display: inline-flex; align-items: flex-end; gap: 1.5px; height: 9px; vertical-align: -1px; }
+.sig-bars i { width: 2.5px; background: var(--live); border-radius: 1px; }
+.sig-bars i:nth-child(1){height:3px} .sig-bars i:nth-child(2){height:5px} .sig-bars i:nth-child(3){height:7px} .sig-bars i:nth-child(4){height:9px;background:var(--line);}
+.heartbeat {
+  width: 6px; height: 6px; border-radius: 50%; background: var(--live);
+  animation: pulse 2.4s ease-in-out infinite;
+}
+.composer:focus-within { border-color: color-mix(in srgb, var(--accent) 50%, var(--line)); }
+.composer textarea { flex: 1; border: none; background: transparent; resize: none; font-family: var(--font-sans); font-size: 14px; color: var(--ink-1); outline: none; line-height: 1.55; }
+.composer .meta { font-family: var(--font-mono); font-size: 10.5px; color: var(--ink-3); align-self: center; white-space: nowrap; }
+.send { width: 34px; height: 34px; border-radius: 9px; border: none; background: var(--accent); color: var(--accent-ink); cursor: pointer; display: grid; place-items: center; }
+.send svg { width: 16px; height: 16px; }
+
+.sample-switch { position: fixed; bottom: 14px; right: 14px; z-index: 99; font-family: var(--font-mono); font-size: 11px; background: var(--surface-1); border: 1px solid var(--line); color: var(--ink-2); padding: 7px 13px; border-radius: 8px; cursor: pointer; }
+@media (prefers-reduced-motion: reduce) { .heartbeat { animation: none; } .chip { transition: none; } }

data/lib/clacky/web/design-sample.html

@@ -0,0 +1,127 @@
+<!DOCTYPE html>
+<html lang="zh-CN" data-theme="light">
+<head>
+<meta charset="UTF-8">
+<meta name="viewport" content="width=device-width, initial-scale=1.0">
+<title>OpenClacky · Design Sample v2</title>
+<link rel="stylesheet" href="/design-sample.css">
+</head>
+<body>
+<div id="app">
+  <!-- TOP HEADER: original 3-zone, command bar fills the empty center -->
+  <header id="top-header">
+    <div id="header-left">
+      <button class="sidebar-toggle-btn" title="Toggle sidebar"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><rect width="18" height="18" x="3" y="3" rx="2"/><path d="M9 3v18"/></svg></button>
+      <div id="header-brand">
+        <div class="brand-mark">C</div>
+        <span class="header-logo-divider"></span>
+        <span id="header-logo">OpenClacky</span>
+        <button class="header-owner-badge">OWNER</button>
+      </div>
+    </div>
+    <div id="header-center">
+      <div class="cmdbar">
+        <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><circle cx="11" cy="11" r="7"/><path d="M21 21l-4.3-4.3"/></svg>
+        <span class="ph">Search or run a command…</span>
+        <span class="kbd">⌘K</span>
+      </div>
+    </div>
+    <div id="header-right">
+      <div class="header-icons">
+        <button class="theme-toggle-btn" title="Share"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><circle cx="18" cy="5" r="3"/><circle cx="6" cy="12" r="3"/><circle cx="18" cy="19" r="3"/><line x1="8.59" y1="13.51" x2="15.42" y2="17.49"/><line x1="15.41" y1="6.51" x2="8.59" y2="10.49"/></svg></button>
+        <button class="theme-toggle-btn" title="Notifications"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M18 8a6 6 0 0 0-12 0c0 7-3 9-3 9h18s-3-2-3-9M13.7 21a2 2 0 0 1-3.4 0"/></svg></button>
+        <button class="theme-toggle-btn" title="Theme"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M12 3a6 6 0 0 0 9 9 9 9 0 1 1-9-9Z"/></svg></button>
+      </div>
+    </div>
+  </header>
+
+  <div id="content-row">
+    <!-- SIDEBAR: original groups & order, only skin changed -->
+    <aside id="sidebar">
+      <div id="sidebar-list">
+        <!-- Sessions -->
+        <div class="sidebar-divider">
+          <span>Sessions</span>
+          <div class="sidebar-divider-actions">
+            <button class="btn-icon-sm" title="Search sessions"><svg width="13" height="13" viewBox="0 0 16 16" fill="none"><circle cx="6.5" cy="6.5" r="4.5" stroke="currentColor" stroke-width="1.6"/><line x1="10.3" y1="10.3" x2="14" y2="14" stroke="currentColor" stroke-width="1.6" stroke-linecap="round"/></svg></button>
+            <div class="btn-split-wrap">
+              <button class="btn-split-main">+ New Session</button>
+              <button class="btn-split-arrow">▾</button>
+            </div>
+          </div>
+        </div>
+        <div class="conv-empty">No conversations yet</div>
+
+        <!-- Config -->
+        <div class="sidebar-divider"><span>Config</span></div>
+        <div class="task-item"><div class="task-row"><svg class="task-icon" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><circle cx="12" cy="12" r="10"/><polyline points="12 6 12 12 16 14"/></svg><div class="task-info"><span class="task-name">Task Management</span></div></div></div>
+        <div class="task-item active"><div class="task-row"><svg class="task-icon" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M19.4 7.85c0 .3.1.6.3.9l1.6 1.6c.5.5.7 1.1.7 1.7s-.2 1.2-.7 1.7l-1.6 1.6c-.2.2-.5.3-.8.3-.5-.1-.8-.5-1-.9a2.5 2.5 0 1 0-3.2 3.2c.4.2.9.5 1 1a1 1 0 0 1-.3.8l-1.6 1.6c-.5.5-1.1.7-1.7.7s-1.2-.2-1.7-.7l-1.6-1.6a1 1 0 0 0-.9-.3c-.5.1-.8.5-1 1a2.5 2.5 0 1 1-3.2-3.2c.5-.2.9-.5 1-1a1 1 0 0 0-.3-.9l-1.6-1.6A2.4 2.4 0 0 1 2 12c0-.6.2-1.2.7-1.7L4.2 8.8c.2-.2.6-.4.9-.3.5.1.9.5 1.1 1a2.5 2.5 0 1 0 3.3-3.3c-.5-.2-.9-.6-1-1.1 0-.3.1-.7.3-.9l1.5-1.5A2.4 2.4 0 0 1 12 2c.6 0 1.2.2 1.7.7l1.6 1.6c.2.2.6.3.9.3.5-.1.8-.5 1-1a2.5 2.5 0 1 1 3.2 3.2c-.5.2-.9.5-1 1Z"/></svg><div class="task-info"><span class="task-name">Skill Management</span></div></div></div>
+        <div class="task-item"><div class="task-row"><svg class="task-icon" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><rect x="5" y="2" width="14" height="20" rx="2"/><path d="M12 18h.01"/></svg><div class="task-info"><span class="task-name">Channel Management</span></div></div></div>
+        <div class="task-item"><div class="task-row"><svg class="task-icon" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><rect x="3" y="4" width="18" height="6" rx="1"/><rect x="3" y="14" width="18" height="6" rx="1"/><path d="M8 7h.01M8 17h.01"/></svg><div class="task-info"><span class="task-name">MCP Servers</span></div></div></div>
+
+        <!-- My Data -->
+        <div class="sidebar-divider"><span>My Data</span></div>
+        <div class="task-item"><div class="task-row"><svg class="task-icon" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2"/><circle cx="12" cy="7" r="4"/></svg><div class="task-info"><span class="task-name">Profile &amp; Soul</span></div></div></div>
+        <div class="task-item"><div class="task-row"><svg class="task-icon" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><polyline points="3 6 5 6 21 6"/><path d="M19 6l-1 14a2 2 0 0 1-2 2H8a2 2 0 0 1-2-2L5 6"/><path d="M10 11v6M14 11v6"/></svg><div class="task-info"><span class="task-name">File Recall</span></div></div></div>
+        <div class="task-item"><div class="task-row"><svg class="task-icon" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><line x1="12" y1="1" x2="12" y2="23"/><path d="M17 5H9.5a3.5 3.5 0 0 0 0 7h5a3.5 3.5 0 0 1 0 7H6"/></svg><div class="task-info"><span class="task-name">Billing</span></div></div></div>
+
+        <!-- Creator (conditional) -->
+        <div class="sidebar-divider"><span>Creator</span></div>
+        <div class="task-item"><div class="task-row"><svg class="task-icon" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M12 2L2 7l10 5 10-5-10-5z"/><path d="M2 17l10 5 10-5"/><path d="M2 12l10 5 10-5"/></svg><div class="task-info"><span class="task-name">Creator Hub</span></div></div></div>
+      </div>
+
+      <div id="sidebar-footer">
+        <div class="sidebar-nav-row">
+          <button class="sidebar-nav-btn"><svg width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><circle cx="12" cy="12" r="3"/><path d="M19.4 15a1.6 1.6 0 0 0 .3 1.8l.1.1a2 2 0 1 1-2.8 2.8l-.1-.1a1.6 1.6 0 0 0-2.7 1.1V21a2 2 0 0 1-4 0v-.1A1.6 1.6 0 0 0 7 19.4a1.6 1.6 0 0 0-1.8.3l-.1.1a2 2 0 1 1-2.8-2.8l.1-.1a1.6 1.6 0 0 0-1.1-2.7H1a2 2 0 0 1 0-4h.1A1.6 1.6 0 0 0 2.6 9a1.6 1.6 0 0 0-.3-1.8l-.1-.1a2 2 0 1 1 2.8-2.8l.1.1A1.6 1.6 0 0 0 7 4.6a1.6 1.6 0 0 0 1-1.5V3a2 2 0 0 1 4 0v.1a1.6 1.6 0 0 0 1 1.5 1.6 1.6 0 0 0 1.8-.3l.1-.1a2 2 0 1 1 2.8 2.8l-.1.1a1.6 1.6 0 0 0-.3 1.8V9a1.6 1.6 0 0 0 1.5 1H21a2 2 0 0 1 0 4h-.1a1.6 1.6 0 0 0-1.5 1z"/></svg><span>Settings</span></button>
+          <span class="version-badge">v1.2.6</span>
+        </div>
+      </div>
+    </aside>
+
+    <!-- MAIN / chat empty state -->
+    <main id="main">
+      <div class="chat-empty">
+        <div class="ce-mark"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.9"><path d="M12 2l2.4 6.6L21 11l-6.6 2.4L12 20l-2.4-6.6L3 11l6.6-2.4z"/></svg></div>
+        <div style="display:flex;flex-direction:column;gap:6px;align-items:center;">
+          <div class="ce-title">What should we build?</div>
+          <div class="ce-sub">Your agent is standing by. Pick a starting point or just type.</div>
+        </div>
+        <div class="chips">
+          <button class="chip"><span class="ci"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8"><path d="M16 18l6-6-6-6M8 6l-6 6 6 6"/></svg></span><span><span class="ct">Write code</span><br><span class="cd">build, refactor, debug</span></span></button>
+          <button class="chip"><span class="ci"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8"><circle cx="12" cy="12" r="9"/><path d="M12 7v5l3 2"/></svg></span><span><span class="ct">Automate a task</span><br><span class="cd">schedule, run, repeat</span></span></button>
+          <button class="chip"><span class="ci"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8"><path d="M4 19.5V6a2 2 0 0 1 2-2h12v16H6a2 2 0 0 1-2-2z"/><path d="M8 7h7"/></svg></span><span><span class="ct">Research</span><br><span class="cd">search, read, summarize</span></span></button>
+        </div>
+      </div>
+      <div class="composer-wrap">
+        <div id="session-info-bar">
+          <span id="sib-status"><span class="heartbeat"></span>RUNNING</span>
+          <span class="sib-sep">│</span>
+          <span id="sib-id" class="sib-clickable" title="Session actions">#a3f9 ▾</span>
+          <span class="sib-sep">│</span>
+          <span id="sib-dir" class="sib-clickable" title="Change directory">~/proj</span>
+          <span class="sib-sep">│</span>
+          <span id="sib-model" class="sib-clickable" title="Switch model">gemini-3-flash ▾</span>
+          <span class="sib-sep">│</span>
+          <span id="sib-reasoning" class="sib-clickable" title="Reasoning effort">medium</span>
+          <span class="sib-sep">│</span>
+          <span id="sib-signal" class="sib-clickable" title="Latency"><span class="sig-bars"><i></i><i></i><i></i><i></i></span> 0.4s</span>
+          <span class="sib-sep">│</span>
+          <span id="sib-mode">auto</span>
+          <span class="sib-sep">│</span>
+          <span id="sib-tasks">0 tasks</span>
+          <span class="sib-sep">│</span>
+          <span id="sib-cost">$0.03</span>
+        </div>
+        <div class="composer">
+          <button class="ib-icon" title="Attach file"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M21.44 11.05l-9.19 9.19a6 6 0 0 1-8.49-8.49l9.19-9.19a4 4 0 0 1 5.66 5.66L9.41 17.41a2 2 0 0 1-2.83-2.83l8.49-8.48"/></svg></button>
+          <button class="ib-icon" title="Insert command (/)"><span style="font-family:var(--font-mono);font-weight:600;">/</span></button>
+          <textarea rows="1" placeholder="Message… (Enter to send, Shift+Enter for newline)"></textarea>
+          <button class="send"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M5 12h14M13 6l6 6-6 6"/></svg></button>
+        </div>
+      </div>
+    </main>
+  </div>
+</div>
+<button class="sample-switch" onclick="document.documentElement.dataset.theme = document.documentElement.dataset.theme==='light'?'dark':'light'">TOGGLE THEME</button>
+</body>
+</html>

data/lib/clacky/web/favicon.svg

@@ -0,0 +1,16 @@
+<svg width="28" height="28" viewBox="0 0 28 28" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M17.115 7.71172L13.9417 9.62505L12.355 8.68006L15.54 6.76672L13.9183 5.81006L9.15833 8.69172L13.9533 11.55L18.725 8.66839L17.115 7.71172Z" fill="#27272A"/>
+<path fillRule="evenodd" clipRule="evenodd" d="M12.8333 13.0083L12.8217 12.9966L3.5 7.29163L0 18.0716L12.8217 26.075L12.8333 26.0866V13.0083Z" fill="url(#paint0_linear_6554_2241)"/>
+<path fillRule="evenodd" clipRule="evenodd" d="M24.5 7.29167L14 0.875L3.5 7.29167L5.72833 8.65667L14 3.605L22.26 8.65667L15.1783 12.9967L15.1667 13.0083V26.0867L15.1783 26.075L28 18.0717L24.5 7.29167Z" fill="url(#paint1_linear_6554_2241)"/>
+<defs>
+<linearGradient id="paint0_linear_6554_2241" x1="1.02691e-07" y1="26.592" x2="18.3032" y2="16.6849" gradientUnits="userSpaceOnUse">
+<stop stop-color="#5236FF"/>
+<stop offset="0.0001" stop-color="#5236FF"/>
+<stop offset="1" stop-color="#D9EDFF"/>
+</linearGradient>
+<linearGradient id="paint1_linear_6554_2241" x1="15.75" y1="0.875" x2="15.75" y2="26.0867" gradientUnits="userSpaceOnUse">
+<stop stop-color="#8587FF"/>
+<stop offset="1" stop-color="#383BC3"/>
+</linearGradient>
+</defs>
+</svg>