anentrypoint-design 0.0.210 → 0.0.212

package/chat.css

@@ -177,14 +177,14 @@
 }
 .agentchat-empty-title { margin: 0; font-size: 1.05em; color: var(--fg-2, var(--fg)); }
 .agentchat-empty-sub { margin: 0; font-size: var(--fs-sm); }
-.agentchat-empty-suggestions {
+.agentchat-empty-suggestions, .chat-empty-suggestions {
   display: flex;
   flex-wrap: wrap;
   gap: .5em;
   justify-content: center;
   margin-top: .5em;
 }
-.agentchat-empty-suggestion {
+.agentchat-empty-suggestion, .chat-empty-suggestion {
   cursor: pointer;
   font: inherit;
   font-size: var(--fs-tiny);
@@ -194,8 +194,8 @@
   background: color-mix(in srgb, var(--fg) 5%, transparent);
   color: var(--fg-2, var(--fg));
 }
-.agentchat-empty-suggestion:hover { background: color-mix(in srgb, var(--accent, var(--fg)) 12%, transparent); }
-.agentchat-empty-suggestion:focus-visible { outline: 2px solid var(--accent, var(--fg)); outline-offset: 2px; }
+.agentchat-empty-suggestion:hover, .chat-empty-suggestion:hover { background: color-mix(in srgb, var(--accent, var(--fg)) 12%, transparent); }
+.agentchat-empty-suggestion:focus-visible, .chat-empty-suggestion:focus-visible { outline: 2px solid var(--accent, var(--fg)); outline-offset: 2px; }
 
 /* Guided install path in the empty state: copy line + monospaced command rows
    (each with its own copy button) + a recheck button. No animation. */
@@ -268,6 +268,23 @@
 @media (prefers-reduced-motion: reduce) {
   .agentchat-working .chat-thinking-dots span { animation: none; opacity: .7; }
 }
+/* Standalone thinking part (ThinkingNode renders .chat-bubble.chat-thinking with
+   .chat-thinking-dots + .chat-thinking-text OUTSIDE the .agentchat-working tail).
+   Without these base rules the dots are invisible empty spans and the text has
+   no muted tone. Reuse the agentchat-dot-bounce keyframe. */
+.chat-thinking { display: flex; align-items: center; gap: .5em; color: var(--fg-3); font-size: var(--fs-tiny); background: none; padding: .3em .2em; }
+.chat-thinking-text { color: var(--fg-3); }
+.chat-thinking-dots { display: inline-flex; gap: 3px; }
+.chat-thinking-dots span {
+  width: 5px; height: 5px; border-radius: 50%;
+  background: var(--fg); opacity: .4;
+  animation: agentchat-dot-bounce 1.2s infinite ease-in-out;
+}
+.chat-thinking-dots span:nth-child(2) { animation-delay: .15s; }
+.chat-thinking-dots span:nth-child(3) { animation-delay: .3s; }
+@media (prefers-reduced-motion: reduce) {
+  .chat-thinking-dots span { animation: none; opacity: .7; }
+}
 
 /* Responsive: the control cluster + cwd bar must stay usable on phones/tablets.
    The cwd path can't eat the row beside its label + buttons on a narrow screen. */
@@ -295,16 +312,20 @@
   display: inline-block; width: 8px; height: 8px; border-radius: 50%;
   background: var(--fg-3); flex: 0 0 auto;
 }
+/* Each variant carries a non-colour channel (fill vs halo vs hollow ring) so the
+   states stay distinguishable for colour-blind users and when stale/connecting
+   would otherwise share a hue. Mirrors the rail-tone shape differentiation. */
 .status-dot-disc.status-dot-live { background: var(--accent); animation: status-disc-pulse 1.8s ease-in-out infinite; }
-.status-dot-disc.status-dot-error { background: var(--flame); }
-.status-dot-disc.status-dot-connecting { background: var(--amber, #d9a93a); }
-.status-dot-disc.status-dot-stale { background: var(--amber, #d9a93a); }
+.status-dot-disc.status-dot-error { background: var(--flame); box-shadow: 0 0 0 1.5px color-mix(in oklab, var(--flame) 38%, transparent); }
+.status-dot-disc.status-dot-connecting { background: transparent; box-shadow: inset 0 0 0 2px var(--amber); }
+.status-dot-disc.status-dot-stale { background: color-mix(in oklab, var(--warn) 70%, var(--fg-3)); }
 @keyframes status-disc-pulse {
   0%, 100% { box-shadow: 0 0 0 0 color-mix(in oklab, var(--accent) 55%, transparent); }
   50%      { box-shadow: 0 0 0 4px color-mix(in oklab, var(--accent) 0%, transparent); }
 }
 @media (prefers-reduced-motion: reduce) {
-  .status-dot-disc.status-dot-live { animation: none; }
+  /* Keep the live disc shape-differentiated without motion: a static concentric ring. */
+  .status-dot-disc.status-dot-live { animation: none; box-shadow: 0 0 0 2px color-mix(in oklab, var(--accent) 35%, transparent); }
 }
 
 /* ----------------------------------------------------------------------------
@@ -360,14 +381,16 @@
 /* Rail tones MUST match .row.rail-* in app-shell.css so the same semantic state
    reads as one colour across the conversation list and content rows. */
 .ds-session-row.rail-green::before { background: var(--accent); }
-.ds-session-row.rail-purple::before { background: var(--purple-2, #7F18A4); }
+.ds-session-row.rail-purple::before { background: var(--purple-2); }
 .ds-session-row.rail-flame::before { background: var(--flame); }
 .ds-session-main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
 .ds-session-title { font-size: var(--fs-sm); color: var(--fg); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
 .ds-session-sub { font-size: var(--fs-tiny); color: var(--fg-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
 .ds-session-meta { display: flex; align-items: center; gap: var(--space-2); flex: 0 0 auto; }
 .ds-session-agent { font-family: var(--ff-mono); font-size: var(--fs-tiny); color: var(--fg-3); }
-.ds-session-unread { width: 8px; height: 8px; border-radius: 50%; background: var(--accent); display: inline-block; }
+/* New-activity cue is a hollow accent RING so it stays shape-distinct from the
+   running live disc (a solid pulsing accent dot) for colour-blind / reduced-motion users. */
+.ds-session-unread { width: 8px; height: 8px; border-radius: 50%; background: transparent; box-shadow: inset 0 0 0 2px var(--accent); display: inline-block; }
 .ds-session-state { padding: var(--space-5) var(--space-3); text-align: center; color: var(--fg-3); font-size: var(--fs-sm); }
 .ds-session-state-error { color: var(--flame); }
 
@@ -397,13 +420,15 @@
 .ds-dash-card.is-error { border-color: var(--flame); }
 .ds-dash-card-head { display: flex; align-items: center; gap: var(--space-2); }
 .ds-dash-status { font-size: var(--fs-tiny); font-weight: 600; text-transform: uppercase; letter-spacing: .03em; }
-.ds-dash-status.is-running { color: var(--green); }
+/* running tone unified on --accent (the later is-running rule + the live disc all
+   use --accent); the dead var(--green) duplicate that lived here was removed. */
 .ds-dash-status.is-error { color: var(--flame); }
 .ds-dash-agent { font-size: var(--fs-body); font-weight: 600; color: var(--fg); }
 .ds-dash-model { font-family: var(--ff-mono); font-size: var(--fs-tiny); color: var(--fg-3); margin-left: auto; }
 .ds-dash-meta { display: flex; flex-direction: column; gap: 2px; }
 .ds-dash-cwd { font-family: var(--ff-mono); font-size: var(--fs-tiny); color: var(--fg-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
 .ds-dash-stat { font-family: var(--ff-mono); font-size: var(--fs-tiny); color: var(--fg-2); }
+.ds-dash-stat-cost { color: var(--fg); font-weight: 600; }
 .ds-dash-activity { font-size: var(--fs-tiny); color: var(--fg-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
 .ds-dash-actions { display: flex; flex-wrap: wrap; gap: var(--space-2); margin-top: var(--space-1); }
 .ds-dash-state { padding: var(--space-6) var(--space-4); text-align: center; color: var(--fg-3); font-size: var(--fs-body); }
@@ -450,6 +475,13 @@
 /* --- B1: streaming pre shell — monospaced bubble while a fenced block streams,
    so it does not reflow prose->block on settle. --- */
 .chat-stream-pre pre { margin: 0; white-space: pre-wrap; word-break: break-word; font-family: var(--ff-mono); font-size: var(--fs-sm); }
+/* Persistent minimal chrome so a fenced block does not pop a border + lang tab +
+   copy button only on settle - the streaming slab already reads as a code block. */
+.chat-stream-pre { position: relative; }
+.chat-stream-pre pre {
+  border: var(--bw-hair) solid var(--rule); border-radius: var(--r-1);
+  padding: var(--space-3); background: color-mix(in oklab, var(--fg) 4%, transparent);
+}
 
 /* --- A5: composer context line (agent / model / cwd at point of typing). --- */
 .chat-composer-context {
@@ -462,11 +494,25 @@ button.chat-composer-context { cursor: pointer; }
 button.chat-composer-context:hover { color: var(--fg-2); }
 button.chat-composer-context:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
 
+/* Composer send/cancel button row: a non-wrapping cluster pinned to the
+   bottom-right of the flex-end composer (was unstyled, so the send button
+   could wrap below the textarea instead of anchoring like claude.ai/code). */
+.chat-composer-toolbar { display: flex; align-items: center; gap: var(--space-1); flex: 0 0 auto; margin-left: auto; align-self: flex-end; }
+/* Unify the toolbar cluster on one 32px / --r-1 square metric (the round 40px
+   ghost buttons + 36px square send read as two button systems; the kit moved
+   .btn* off --r-pill). chat.css loads after app-shell.css so this wins by order. */
+.chat-composer-toolbar .composer-btn,
+.chat-composer-toolbar .send { width: 32px; height: 32px; border-radius: var(--r-1); }
+@media (pointer: coarse) {
+  .chat-composer-toolbar .composer-btn,
+  .chat-composer-toolbar .send { width: 44px; height: 44px; }
+}
+
 /* --- B2: follow-up chips below the last settled assistant turn. --- */
 .agentchat-followups { display: flex; flex-wrap: wrap; gap: var(--space-2); padding: var(--space-2) var(--space-3); }
 
 /* --- C1: stale/idle dashboard status (static, NOT pulsing). --- */
-.ds-dash-status.is-stale { color: var(--amber, #d9a93a); }
+.ds-dash-status.is-stale { color: var(--amber); }
 .ds-dash-status.is-running { color: var(--accent); }
 
 /* --- C2: dashboard sort/filter toolbar + stream-state line. --- */
@@ -484,7 +530,7 @@ button.chat-composer-context:focus-visible { outline: 2px solid var(--accent); o
 }
 .ds-dash-stream { font-size: var(--fs-tiny); color: var(--fg-3); }
 .ds-dash-stream.is-lost { color: var(--flame); }
-.ds-dash-stream.is-connecting { color: var(--amber, #d9a93a); }
+.ds-dash-stream.is-connecting { color: var(--amber); }
 .ds-dash-header .spread { flex: 1; }
 .ds-dash-errors-toggle {
   padding: 4px 10px; min-height: 32px; border: var(--bw-hair) solid var(--bg-3);
@@ -510,7 +556,7 @@ button.chat-composer-context:focus-visible { outline: 2px solid var(--accent); o
 /* Stale/idle card: a positive amber inset bar (mirrors is-active) so a stuck
    agent is flagged in a dense grid, not merely faded near-invisibly. The word
    'idle' co-carries state, so this stays colour-blind safe. */
-.ds-dash-card.is-stale { box-shadow: inset 2px 0 0 var(--amber, #d9a93a); }
+.ds-dash-card.is-stale { box-shadow: inset 2px 0 0 var(--amber); }
 
 /* --- H3: dashboard live disc pulses; stale/error do not (handled by H1). --- */
 
@@ -667,7 +713,7 @@ button.chat-composer-context:focus-visible { outline: 2px solid var(--accent); o
 }
 
 /* Stopping state: in-flight cancel reads distinctly from running/error. */
-.ds-dash-status.is-stopping { color: var(--amber, #d9a93a); }
+.ds-dash-status.is-stopping { color: var(--amber); }
 
 /* External (observed, not owned) session card: no stop control exists. */
 .ds-dash-external {
@@ -699,8 +745,29 @@ button.chat-composer-context:focus-visible { outline: 2px solid var(--accent); o
 .chat-msg-flat.you .chat-role { color: var(--accent); }
 .chat-msg-flat .chat-bubble { background: none; border: none; border-radius: 0; padding: 0; max-width: 100%; box-shadow: none; transform: none; }
 .chat-msg-flat.you .chat-bubble { background: none; color: inherit; }
-.chat-msg-flat:hover { background: color-mix(in oklab, var(--fg) 3%, transparent); }
-.chat-msg-flat.you:hover { background: color-mix(in oklab, var(--fg) 2%, transparent); }
+/* Flat turns strip the bubble padding, so the role label sat 4px above the first
+   paragraph and the .them tint hugged text flush. Restore reading rhythm + give
+   the tinted assistant row inner breathing room so it reads as a card. */
+.chat-msg-flat .chat-role { margin-bottom: var(--space-2); }
+.chat-msg-flat .chat-md { line-height: 1.65; }
+.chat-msg-flat .chat-md p { margin: 8px 0; }
+.chat-msg-flat.them { padding-block: calc(var(--space-3) * var(--density, 1) + 2px); }
+/* Inline backtick code (renderInline tags <code class=chat-tick>) - was a dead
+   class relying on the generic .chat-bubble code rule, so notices / non-bubble
+   surfaces got unstyled monospace. Self-style it regardless of container. */
+.chat-tick { font-family: var(--ff-mono); font-size: .92em; background: color-mix(in oklab, var(--fg) 10%, transparent); padding: 1px 6px; border-radius: var(--r-1); }
+/* Structured tool/code output earns more width than running prose (claude.ai/code
+   lets diffs/tables break out wider than the reading measure). A flat turn that
+   contains a tool card or code block widens itself AND its stack past --measure;
+   prose-only turns stay clamped. */
+.chat-msg-flat:has(.chat-tool),
+.chat-msg-flat:has(.chat-bubble.chat-code) { max-width: calc(var(--measure) + 14ch); }
+.chat-msg-flat:has(.chat-tool) .chat-stack,
+.chat-msg-flat:has(.chat-bubble.chat-code) .chat-stack { max-width: calc(var(--measure) + 14ch); }
+/* Hover tint exceeds each role's REST tint so the row gives feedback (and the
+   ladder stays monotonic): assistant 5% > its 3% rest; user 4% > transparent. */
+.chat-msg-flat.them:hover { background: color-mix(in oklab, var(--fg) 5%, transparent); }
+.chat-msg-flat.you:hover { background: color-mix(in oklab, var(--fg) 4%, transparent); }
 .chat-msg-flat:hover .chat-bubble { transform: none; box-shadow: none; background: none; }
 .chat-msg-flat .chat-avatar { display: none; }
 
@@ -734,6 +801,9 @@ button.chat-composer-context:focus-visible { outline: 2px solid var(--accent); o
 }
 .chat-msg .chat-tool.tool-running .chat-tool-status { color: var(--accent); background: color-mix(in oklab, var(--accent) 12%, transparent); }
 .chat-msg .chat-tool.tool-error .chat-tool-status { color: var(--flame); background: color-mix(in oklab, var(--flame) 12%, transparent); }
+/* Completed tool: a positive (success) tone so done reads distinctly from the
+   neutral pill and from the accent-toned running pill (--success = green-2). */
+.chat-msg .chat-tool.tool-done .chat-tool-status { color: var(--success); background: color-mix(in oklab, var(--success) 12%, transparent); }
 .chat-tool-body { border-top: var(--bw-hair) solid var(--rule); padding: var(--space-2) var(--space-3); display: flex; flex-direction: column; gap: var(--space-2); }
 .chat-tool-section { display: flex; flex-direction: column; gap: var(--space-1); }
 .chat-tool-section-label { font-size: var(--fs-tiny); font-weight: 600; text-transform: uppercase; letter-spacing: var(--tr-caps); color: var(--fg-3); }
@@ -768,6 +838,10 @@ button.chat-composer-context:focus-visible { outline: 2px solid var(--accent); o
 }
 @keyframes ds-arm-pulse { 0% { box-shadow: 0 0 0 0 color-mix(in oklab, var(--warn) 55%, transparent); } 100% { box-shadow: 0 0 0 6px color-mix(in oklab, var(--warn) 0%, transparent); } }
 .ds-dash-card.is-new { box-shadow: inset 2px 0 0 var(--accent), 0 0 0 1px color-mix(in oklab, var(--accent) 40%, transparent); }
+/* Error card carries the strongest left-bar tone (flame > stale amber > active
+   accent), placed last so its inset bar wins source order over is-active/is-stale.
+   The full-perimeter border-color (line ~396) stays for extra severity emphasis. */
+.ds-dash-card.is-error { box-shadow: inset 2px 0 0 var(--flame); }
 @media (prefers-reduced-motion: no-preference) {
   .ds-dash-card.is-new { animation: ds-card-in var(--dur-slow) var(--ease); }
 }
@@ -777,9 +851,9 @@ button.chat-composer-context:focus-visible { outline: 2px solid var(--accent); o
 .ds-dash-group { display: flex; flex-direction: column; gap: var(--space-2); }
 .ds-dash-group-label { font-size: var(--fs-tiny); font-weight: 600; text-transform: uppercase; letter-spacing: var(--tr-caps); color: var(--fg-3); padding: 0 var(--space-1); }
 .ds-dash-breakdown { display: flex; align-items: center; gap: var(--space-1); font-size: var(--fs-sm); color: var(--fg-2); }
-.ds-dash-breakdown .seg.is-running { color: var(--green); font-weight: 600; }
+.ds-dash-breakdown .seg.is-running { color: var(--accent); font-weight: 600; }
 .ds-dash-breakdown .seg.is-error { color: var(--flame); font-weight: 600; }
-.ds-dash-breakdown .seg.is-idle { color: var(--amber, #d9a93a); }
+.ds-dash-breakdown .seg.is-idle { color: var(--amber); font-weight: 600; }
 .ds-dash-stream-disc { display: inline-flex; align-items: center; gap: var(--space-1); }
 .ds-dash-selectall { display: inline-flex; align-items: center; gap: var(--space-1); font-size: var(--fs-tiny); color: var(--fg-2); cursor: pointer; background: none; border: none; padding: var(--space-1); }
 .ds-dash-selectall:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
@@ -800,7 +874,7 @@ button.chat-composer-context:focus-visible { outline: 2px solid var(--accent); o
 .ds-preview-code code { color: var(--fg); }
 .ds-preview-code .token.comment, .ds-preview-code .token.prolog, .ds-preview-code .token.doctype, .ds-preview-code .token.cdata { color: var(--fg-3); }
 .ds-preview-code .token.punctuation { color: var(--fg-2); }
-.ds-preview-code .token.property, .ds-preview-code .token.tag, .ds-preview-code .token.boolean, .ds-preview-code .token.number, .ds-preview-code .token.constant, .ds-preview-code .token.symbol { color: var(--purple-2, #7F18A4); }
+.ds-preview-code .token.property, .ds-preview-code .token.tag, .ds-preview-code .token.boolean, .ds-preview-code .token.number, .ds-preview-code .token.constant, .ds-preview-code .token.symbol { color: var(--purple-2); }
 .ds-preview-code .token.selector, .ds-preview-code .token.attr-name, .ds-preview-code .token.string, .ds-preview-code .token.char, .ds-preview-code .token.builtin { color: var(--code-string, var(--green)); }
 .ds-preview-code .token.atrule, .ds-preview-code .token.attr-value, .ds-preview-code .token.keyword { color: var(--code-keyword, var(--sky)); }
 .ds-preview-code .token.function, .ds-preview-code .token.class-name { color: var(--code-fn, var(--flame)); }

package/colors_and_type.css

@@ -197,22 +197,31 @@
   --size-sm:     32px;
   --size-base:   42px;
   --size-lg:     56px;
+
+  /* Unified focus-ring tokens (single source for the design system). Outset
+     rings (the default) tokenize colour+width+offset; bordered text fields use
+     the inset variant. Deliberate negative offsets on edge-flush/clipping
+     containers stay literal. */
+  --focus-color:       var(--accent);
+  --focus-w:           2px;
+  --focus-offset:      2px;
+  --focus-ring-inset:  inset 0 0 0 var(--focus-w) var(--focus-color);
 }
 
 /* ============================================================
    Focus-visible styles for keyboard navigation
    ============================================================ */
 :focus-visible {
-  outline: 2px solid var(--accent);
-  outline-offset: 2px;
+  outline: var(--focus-w) solid var(--focus-color);
+  outline-offset: var(--focus-offset);
 }
 
 /* Button variants with focus-visible */
 .btn:focus-visible,
 .btn-primary:focus-visible,
 .btn-ghost:focus-visible {
-  outline: 2px solid var(--accent);
-  outline-offset: 2px;
+  outline: var(--focus-w) solid var(--focus-color);
+  outline-offset: var(--focus-offset);
 }
 
 /* Link focus-visible */
@@ -260,6 +269,10 @@ select:focus-visible {
   --danger:    oklch(0.68 0.19 25);
   --flame:     #FF5A1F;
   --amber:     #D9A93A;
+  /* warn/sky dark-tuned pairs (mirror flame/amber): the :root paper values
+     (#E0241A / #3A6EFF) are too dark on ink; these clear AA 4.5:1 on --ink. */
+  --warn:      #FF5A52;
+  --sky:       #6E9BFF;
   --code-string:  var(--green-2);
   --code-keyword: var(--sky);
   --code-fn:      var(--flame);
@@ -293,6 +306,8 @@ select:focus-visible {
     --accent-bright: var(--green-2);
     --flame:     #FF5A1F;
     --amber:     #D9A93A;
+    --warn:      #FF5A52;
+    --sky:       #6E9BFF;
     --code-string:  var(--green-2);
     --code-keyword: var(--sky);
     --code-fn:      var(--flame);

package/community.css

@@ -1166,7 +1166,11 @@
   .cm-vs-btn,
   .cm-user-btn,
   .cm-ch-spinner,
-  .cm-ch-voice-badge {
+  .cm-ch-voice-badge,
+  .vx-ptt,
+  .vx-ptt-glow,
+  .vx-vad-meter,
+  .vx-vad-fill {
     transition: none !important;
     animation: none !important;
   }