@aparte/core 0.9.0 → 0.11.0

package/dist/index.css

@@ -22,7 +22,6 @@
   --aparte-surface-2: #f1ebdf;
   /* Code blocks, headers */
   --aparte-surface-3: #e7dfce;
-  /* Skeletons, disabled */
 
   /* Text */
   --aparte-text: #241f2b;
@@ -31,7 +30,6 @@
 
   /* Borders */
   --aparte-border: #e5ddce;
-  --aparte-border-focus: var(--aparte-primary);
   --aparte-border-width: 1px;
 
   /* Status Colors */
@@ -49,18 +47,6 @@
   --aparte-radius-full: 9999px;
 
   /* Component-specific radius (overridable per app) */
-  --aparte-radius-input: var(--aparte-radius-lg);
-  --aparte-radius-input-footer: var(--aparte-radius-lg);
-  --aparte-radius-send-btn: var(--aparte-radius-md);
-  --aparte-radius-action-btn: var(--aparte-radius-sm);
-  --aparte-radius-select: var(--aparte-radius-md);
-  --aparte-radius-avatar: var(--aparte-radius-md);
-  --aparte-radius-bubble: var(--aparte-radius-lg);
-  --aparte-radius-code: var(--aparte-radius-lg);
-  --aparte-radius-thinking: var(--aparte-radius-lg);
-  --aparte-radius-terminal: var(--aparte-radius-lg);
-  --aparte-radius-error: var(--aparte-radius-md);
-  --aparte-radius-file-tree: var(--aparte-radius-lg);
 
   /* Spacing scale — every gap / padding / margin / offset routes through these,
      so there are no raw px spacings in the rules. Incidental, pixel-tuned values
@@ -100,8 +86,6 @@
 
   /* Text/icon over a --aparte-primary (brass) fill — send button, run button. */
   --aparte-on-primary: #ffffff;
-  /* Focus ring — derived from the accent so it themes automatically. */
-  --aparte-focus-ring: 0 0 0 3px color-mix(in srgb, var(--aparte-primary) 15%, transparent);
   /* Outline width for keyboard focus + drag-over indicators. */
   --aparte-focus-outline-width: 2px;
   /* Scrollbars rendered by the library. */
@@ -118,36 +102,21 @@
      no bubble background; consumers can flip these to get a chat-app look. */
   --aparte-message-content-bg-user: #efe7f6;
   --aparte-message-content-bg-assistant: transparent;
-  --aparte-message-content-text-user: var(--aparte-text);
-  --aparte-message-content-text-assistant: var(--aparte-text);
   --aparte-message-content-padding: 10px 14px;
   --aparte-message-content-radius: 14px;
 
   /* Aliases used by some segment renderers (artifact card, tool pill).
      Mapped to existing tokens so consumers that override --aparte-surface-1/2
      get cohesive results without touching every rule. */
-  --aparte-surface:         var(--aparte-surface-1);
-  --aparte-surface-hover:   var(--aparte-surface-2);
-  --aparte-text-secondary:  var(--aparte-text-muted);
-  --aparte-accent:          var(--aparte-primary);
-  --aparte-success-border:  var(--aparte-success);
-  --aparte-success-surface: color-mix(in oklch, var(--aparte-success) 12%, transparent);
-  --aparte-error-border-soft: var(--aparte-error);
-  --aparte-error-surface:   color-mix(in oklch, var(--aparte-error) 12%, transparent);
 
   /* Code typography — exposed so apps can swap in Geist Mono / Cascadia / … */
   --aparte-code-font-family: ui-monospace, 'Cascadia Code', 'JetBrains Mono', 'Geist Mono', SFMono-Regular, Consolas, 'Liberation Mono', monospace;
 
   /* Attachments */
-  --aparte-attachment-chip-bg: var(--aparte-surface-2);
-  --aparte-attachment-chip-border: var(--aparte-border);
-  --aparte-attachment-chip-radius: var(--aparte-radius-sm);
-  --aparte-attachment-chip-color: var(--aparte-text);
   --aparte-attachment-image-size: 72px;
   --aparte-attachments-max-height: 140px;
 
   /* Attachment thumbnail tile (composer preview + sent-message strip) */
-  --aparte-thumb-radius: var(--aparte-radius-lg);
   --aparte-thumb-name-color: #ffffff;
   --aparte-thumb-name-scrim: linear-gradient(to top, rgba(0, 0, 0, 0.82), rgba(0, 0, 0, 0));
   --aparte-thumb-name-padding: 14px 5px 4px;
@@ -160,46 +129,27 @@
   /* Action Bar */
   --aparte-action-bar-gap: 4px;
   --aparte-action-bar-btn-size: 28px;
-  --aparte-action-bar-btn-color: var(--aparte-text-muted);
-  --aparte-action-bar-btn-hover-bg: var(--aparte-surface-2);
-  --aparte-action-bar-btn-hover-color: var(--aparte-text);
 
   /* Branch Picker */
   --aparte-branch-picker-gap: 4px;
   --aparte-branch-picker-btn-size: 20px;
   --aparte-branch-picker-btn-icon-size: 16px;
-  --aparte-branch-picker-btn-color: var(--aparte-text-muted);
-  --aparte-branch-picker-btn-hover-color: var(--aparte-text);
   --aparte-branch-picker-label-size: 12px;
-  --aparte-branch-picker-label-color: var(--aparte-text-muted);
   --aparte-branch-picker-label-min-width: 32px;
 
   /* Avatars */
   --aparte-avatar-size: 32px;
   --aparte-avatar-font-size: 14px;
-  --aparte-avatar-radius: var(--aparte-radius-avatar);
-  --aparte-avatar-bg-user: var(--aparte-primary);
-  --aparte-avatar-text-user: var(--aparte-text-inverse);
-  --aparte-avatar-bg-assistant: var(--aparte-surface-3);
-  --aparte-avatar-text-assistant: var(--aparte-text-inverse);
   --aparte-avatar-image-user: none;
   --aparte-avatar-image-assistant: none;
   --aparte-avatar-image-size: 90%;
 
   /* Text Sizes */
   --aparte-name-font-size: 14px;
-  --aparte-name-color: var(--aparte-text);
   --aparte-timestamp-font-size: 12px;
-  --aparte-timestamp-color: var(--aparte-text-muted);
   --aparte-content-font-size: 15px;
-  --aparte-content-color: var(--aparte-text);
 
   /* Input */
-  --aparte-input-bg: var(--aparte-surface-1);
-  --aparte-input-border: var(--aparte-border);
-  --aparte-input-text: var(--aparte-text);
-  --aparte-input-placeholder: var(--aparte-text-muted);
-  --aparte-input-focus-border: var(--aparte-primary);
   --aparte-input-gap: 8px;
   --aparte-input-editor-font-size: 15px;
   --aparte-input-editor-max-height: 200px;
@@ -212,7 +162,6 @@
   --aparte-select-min-width: 120px;
 
   /* Status Indicator */
-  --aparte-status-color: var(--aparte-text-muted);
   --aparte-status-bg: transparent;
   --aparte-status-dot-size: 6px;
 
@@ -221,11 +170,6 @@
   --aparte-waiting-dot-gap: 4px;
 
   /* Thinking Segment */
-  --aparte-thinking-border: var(--aparte-border);
-  --aparte-thinking-bg: var(--aparte-surface-2);
-  --aparte-thinking-text: var(--aparte-text-muted);
-  --aparte-thinking-content: var(--aparte-text);
-  --aparte-thinking-content-bg: var(--aparte-surface-1);
   --aparte-thinking-content-max-height: 300px;
   --aparte-thinking-content-line-height: 1.55;
   --aparte-thinking-toggle-size: 9px;
@@ -248,6 +192,11 @@
   --aparte-elic-option-desc-size: 0.78rem;
   --aparte-elic-control-size: 15px;
   --aparte-elic-input-radius: 6px;
+  /* The tool-call row's corner. Declared here rather than left as an inline
+     fallback in the renderer: an undeclared custom property still WORKS, which is
+     what makes it dangerous — it is absent from the generated CSS reference, so a
+     consumer has no way to discover the knob exists. */
+  --aparte-tool-row-radius: 6px;
   --aparte-elic-textarea-min-height: 64px;
   --aparte-elic-skip-size: 0.8rem;
   --aparte-elic-step-size: 0.78rem;
@@ -265,49 +214,16 @@
   --aparte-elic-dismiss-room: 72px;
 
   /* Code Blocks */
-  --aparte-code-bg: var(--aparte-surface-1);
-  --aparte-code-header-bg: var(--aparte-surface-2);
-  --aparte-code-border: var(--aparte-border);
-  --aparte-code-header-text: var(--aparte-text-muted);
   --aparte-code-copy-hover-bg: rgba(0, 0, 0, 0.05);
   --aparte-code-copy-icon-size: 14px;
   --aparte-code-inline-font-size: 0.875em;
 
-  /* Terminal */
-  --aparte-terminal-bg: #1e293b;
-  --aparte-terminal-text: #e2e8f0;
-  --aparte-terminal-icon: #64748b;
-  --aparte-terminal-hover: #334155;
-  --aparte-terminal-running: #22c55e;
-  --aparte-terminal-output-bg: #0f172a;
-  --aparte-terminal-output-text: #94a3b8;
-  --aparte-terminal-copy-btn-size: 26px;
-  --aparte-terminal-font-size: 13px;
-  --aparte-terminal-output-max-height: 200px;
-
-  /* Progress */
-  --aparte-progress-bar-bg: var(--aparte-surface-3);
-  --aparte-progress-bar-fill: var(--aparte-primary);
-  --aparte-progress-label: var(--aparte-text);
+
 
   /* Scroll-to-bottom button */
   --aparte-scroll-btn-size: 36px;
-  --aparte-scroll-btn-bg: var(--aparte-surface-1);
-  --aparte-scroll-btn-color: var(--aparte-text);
-  --aparte-scroll-btn-border: var(--aparte-border);
   --aparte-scroll-btn-shadow: 0 2px 8px rgba(0, 0, 0, 0.12);
-  --aparte-scroll-btn-hover-bg: var(--aparte-surface-2);
 
-  /* File Tree */
-  --aparte-file-tree-bg: var(--aparte-surface-1);
-  --aparte-file-tree-border: var(--aparte-border);
-  --aparte-file-tree-header-bg: var(--aparte-surface-2);
-  --aparte-file-tree-hover: var(--aparte-surface-2);
-  --aparte-file-tree-title: var(--aparte-text-muted);
-  /* Git-status file colours reuse the semantic status tokens by default. */
-  --aparte-file-status-added: var(--aparte-success);
-  --aparte-file-status-modified: var(--aparte-info);
-  --aparte-file-status-deleted: var(--aparte-error);
 
   /* Error segment */
   --aparte-error-bg: #fef2f2;
@@ -318,7 +234,7 @@
   --aparte-error-icon-size: 20px;
   --aparte-error-rail-width: 4px;
 
-  /* Prose (segment-content) */
+  /* Prose (aparte-segment-content) */
   --aparte-prose-p-margin: 0.4em 0;
   --aparte-prose-h1-size: 1.4em;
   --aparte-prose-h2-size: 1.25em;
@@ -326,9 +242,7 @@
   --aparte-prose-list-indent: 1.5em;
   --aparte-prose-list-margin: 0.4em 0;
   --aparte-prose-li-margin: 0.15em 0;
-  --aparte-prose-blockquote-border: var(--aparte-border);
   --aparte-prose-blockquote-border-width: 3px;
-  --aparte-prose-code-bg: var(--aparte-surface-2);
 
   /* Viewport */
   --aparte-viewport-padding: 16px;
@@ -337,35 +251,20 @@
      bubble and the composer — this restores the symmetry rather than inventing a
      value. Set it to 0 for a flush composer (a full-bleed mobile shell with a docked
      keyboard is the legitimate case). */
-  --aparte-chat-bottom-gap: var(--aparte-space-8, 16px);
 
-  /* Content */
-  --aparte-content-line-height: var(--aparte-line-height-loose, 1.7);
-  --aparte-cursor-color: var(--aparte-primary);
 
   /* Status */
   --aparte-status-font-size: 13px;
 
   /* Input (composer) */
   --aparte-input-font-size: 14px;
-  --aparte-input-line-height: var(--aparte-line-height-normal, 1.5);
   --aparte-input-padding-x: 12px;
   --aparte-input-padding-y: 10px;
 
   /* Conversation List */
   --aparte-conv-list-gap: 2px;
   --aparte-conv-item-padding: 7px 10px;
-  --aparte-conv-item-radius: var(--aparte-radius-md);
-  --aparte-conv-item-color: var(--aparte-text-muted);
-  --aparte-conv-item-color-active: var(--aparte-text);
-  --aparte-conv-item-bg-hover: var(--aparte-surface-3);
-  --aparte-conv-item-bg-active: var(--aparte-surface-3);
   --aparte-conv-item-font-size: 0.8125rem;
-  --aparte-conv-item-font-weight-active: var(--aparte-font-weight-medium, 500);
-  --aparte-conv-delete-color: var(--aparte-text-muted);
-  --aparte-conv-delete-bg-hover: var(--aparte-error);
-  --aparte-conv-delete-color-hover: var(--aparte-text-inverse);
-  --aparte-conv-delete-radius: var(--aparte-radius-sm);
   --aparte-conv-item-gap: 6px;
   --aparte-conv-action-btn-size: 20px;
 }
@@ -389,9 +288,6 @@
   --aparte-text: #f2eee7;
   --aparte-text-muted: #a89bb6;
   --aparte-text-inverse: #17141c;
-  --aparte-name-color: #f2eee7;
-  --aparte-content-color: #ece8e2;
-  --aparte-timestamp-color: #7a7088;
 
   /* Borders */
   --aparte-border: #342a40;
@@ -400,39 +296,8 @@
   --aparte-primary: #d9a24b;
   --aparte-primary-hover: #e7c588;
 
-  /* Input */
-  --aparte-input-bg: #211b28;
-  --aparte-input-border: #342a40;
-  --aparte-input-text: #f2eee7;
-  --aparte-input-placeholder: #7a7088;
-
-  /* Status */
-  --aparte-status-color: #94a3b8;
-
-  /* Thinking */
-  --aparte-thinking-border: #334155;
-  --aparte-thinking-bg: #1e293b;
-  --aparte-thinking-text: #94a3b8;
-  --aparte-thinking-content: #e5e7eb;
-  --aparte-thinking-content-bg: #0f172a;
-
-  /* Code */
-  --aparte-code-bg: #1e293b;
-  --aparte-code-header-bg: #334155;
-  --aparte-code-border: #475569;
-  --aparte-code-header-text: #94a3b8;
-
-  /* Progress */
-  --aparte-progress-bar-bg: #334155;
+  /* Scroll-to-bottom button */
   --aparte-scroll-btn-shadow: 0 2px 12px rgba(0, 0, 0, 0.35);
-  --aparte-progress-label: #e5e7eb;
-
-  /* File Tree */
-  --aparte-file-tree-bg: #1e293b;
-  --aparte-file-tree-border: #334155;
-  --aparte-file-tree-header-bg: #0f172a;
-  --aparte-file-tree-hover: #334155;
-  --aparte-file-tree-title: #94a3b8;
 
   /* Error segment */
   --aparte-error-bg: #2d1b1b;
@@ -440,15 +305,150 @@
   --aparte-error-solid: #f87171;
   --aparte-error-text: #fca5a5;
   --aparte-error-title: #fecaca;
+}
 
-  /* Prose */
-  --aparte-prose-blockquote-border: #475569;
-  --aparte-prose-code-bg: #334155;
+/* =========================================
+   Derived layer — re-anchored, on purpose
+
+   Every value below READS another variable. A custom property is substituted
+   where it is DECLARED, so a derived value declared only on `:root` is computed
+   once against the root palette and merely inherits after that: overriding
+   `--aparte-primary` on a subtree moved the send button and nothing else, and
+   `[data-aparte-theme="dark"]` — which overrides eight masters — left every
+   derived value on its light substitution.
+
+   So the layer is declared again at each anchor where a palette can change:
+   the document root, a shadow host, any themed subtree, any aparté host, and
+   the `aparte-chat` element itself (per-instance theming). Substitution then
+   re-runs there against that element's own masters.
+
+   Only DERIVED values may live here. The literal palette stays in the block
+   above with `:root, :host` alone — widening THAT list would re-declare the
+   light literals on an `<aparte-chat>` nested in a dark wrapper, where a local
+   declaration beats the inherited dark value, and the chat would go light.
+   `scripts/check-derived-vars.mjs` holds both halves of that rule.
+   ========================================= */
+:root,
+:host,
+[data-aparte-theme],
+[data-aparte-host],
+aparte-chat {
+  /* Borders */
+  --aparte-border-focus: var(--aparte-primary);
 
-  /* Conversation List (dark overrides) */
-  --aparte-conv-item-bg-hover: #334155;
-  --aparte-conv-item-bg-active: #334155;
-  --aparte-conv-delete-color: #64748b;
+  /* Component-specific radius (overridable per app) */
+  --aparte-radius-input: var(--aparte-radius-lg);
+  --aparte-radius-input-footer: var(--aparte-radius-lg);
+  --aparte-radius-send-btn: var(--aparte-radius-md);
+  --aparte-radius-action-btn: var(--aparte-radius-sm);
+  --aparte-radius-select: var(--aparte-radius-md);
+  --aparte-radius-avatar: var(--aparte-radius-md);
+  --aparte-radius-bubble: var(--aparte-radius-lg);
+  --aparte-radius-code: var(--aparte-radius-lg);
+  --aparte-radius-thinking: var(--aparte-radius-lg);
+  --aparte-radius-error: var(--aparte-radius-md);
+
+  /* Focus ring — derived from the accent so it themes automatically. */
+  --aparte-focus-ring: 0 0 0 3px color-mix(in srgb, var(--aparte-primary) 15%, transparent);
+
+  /* Messages */
+  --aparte-message-content-text-user: var(--aparte-text);
+  --aparte-message-content-text-assistant: var(--aparte-text);
+  --aparte-surface:         var(--aparte-surface-1);
+  --aparte-surface-hover:   var(--aparte-surface-2);
+  --aparte-text-secondary:  var(--aparte-text-muted);
+  --aparte-accent:          var(--aparte-primary);
+  --aparte-success-border:  var(--aparte-success);
+  --aparte-success-surface: color-mix(in oklch, var(--aparte-success) 12%, transparent);
+  --aparte-error-border-soft: var(--aparte-error);
+  --aparte-error-surface:   color-mix(in oklch, var(--aparte-error) 12%, transparent);
+
+  /* Attachments */
+  --aparte-attachment-chip-bg: var(--aparte-surface-2);
+  --aparte-attachment-chip-border: var(--aparte-border);
+  --aparte-attachment-chip-radius: var(--aparte-radius-sm);
+  --aparte-attachment-chip-color: var(--aparte-text);
+
+  /* Attachment thumbnail tile (composer preview + sent-message strip) */
+  --aparte-thumb-radius: var(--aparte-radius-lg);
+
+  /* Action Bar */
+  --aparte-action-bar-btn-color: var(--aparte-text-muted);
+  --aparte-action-bar-btn-hover-bg: var(--aparte-surface-2);
+  --aparte-action-bar-btn-hover-color: var(--aparte-text);
+
+  /* Branch Picker */
+  --aparte-branch-picker-btn-color: var(--aparte-text-muted);
+  --aparte-branch-picker-btn-hover-color: var(--aparte-text);
+  --aparte-branch-picker-label-color: var(--aparte-text-muted);
+
+  /* Avatars */
+  --aparte-avatar-radius: var(--aparte-radius-avatar);
+  --aparte-avatar-bg-user: var(--aparte-primary);
+  --aparte-avatar-text-user: var(--aparte-text-inverse);
+  --aparte-avatar-bg-assistant: var(--aparte-surface-3);
+  --aparte-avatar-text-assistant: var(--aparte-text-inverse);
+
+  /* Text Sizes */
+  --aparte-name-color: var(--aparte-text);
+  --aparte-timestamp-color: var(--aparte-text-muted);
+  --aparte-content-color: var(--aparte-text);
+
+  /* Input */
+  --aparte-input-bg: var(--aparte-surface-1);
+  --aparte-input-border: var(--aparte-border);
+  --aparte-input-text: var(--aparte-text);
+  --aparte-input-placeholder: var(--aparte-text-muted);
+  --aparte-input-focus-border: var(--aparte-primary);
+
+  /* Status Indicator */
+  --aparte-status-color: var(--aparte-text-muted);
+
+  /* Thinking Segment */
+  --aparte-thinking-border: var(--aparte-border);
+  --aparte-thinking-bg: var(--aparte-surface-2);
+  --aparte-thinking-text: var(--aparte-text-muted);
+  --aparte-thinking-content: var(--aparte-text);
+  --aparte-thinking-content-bg: var(--aparte-surface-1);
+
+  /* Code Blocks */
+  --aparte-code-bg: var(--aparte-surface-1);
+  --aparte-code-header-bg: var(--aparte-surface-2);
+  --aparte-code-border: var(--aparte-border);
+  --aparte-code-header-text: var(--aparte-text-muted);
+
+
+  /* Scroll-to-bottom button */
+  --aparte-scroll-btn-bg: var(--aparte-surface-1);
+  --aparte-scroll-btn-color: var(--aparte-text);
+  --aparte-scroll-btn-border: var(--aparte-border);
+  --aparte-scroll-btn-hover-bg: var(--aparte-surface-2);
+
+  /* Prose (aparte-segment-content) */
+  --aparte-prose-blockquote-border: var(--aparte-border);
+  --aparte-prose-code-bg: var(--aparte-surface-2);
+
+  /* Viewport */
+  --aparte-chat-bottom-gap: var(--aparte-space-8, 16px);
+
+  /* Content */
+  --aparte-content-line-height: var(--aparte-line-height-loose, 1.7);
+  --aparte-cursor-color: var(--aparte-primary);
+
+  /* Input (composer) */
+  --aparte-input-line-height: var(--aparte-line-height-normal, 1.5);
+
+  /* Conversation List */
+  --aparte-conv-item-radius: var(--aparte-radius-md);
+  --aparte-conv-item-color: var(--aparte-text-muted);
+  --aparte-conv-item-color-active: var(--aparte-text);
+  --aparte-conv-item-bg-hover: var(--aparte-surface-3);
+  --aparte-conv-item-bg-active: var(--aparte-surface-3);
+  --aparte-conv-item-font-weight-active: var(--aparte-font-weight-medium, 500);
+  --aparte-conv-delete-color: var(--aparte-text-muted);
+  --aparte-conv-delete-bg-hover: var(--aparte-error);
+  --aparte-conv-delete-color-hover: var(--aparte-text-inverse);
+  --aparte-conv-delete-radius: var(--aparte-radius-sm);
 }
 
 /* =========================================
@@ -671,6 +671,91 @@ textarea.aparte-elic-text {
   z-index: 1;
 }
 
+/* ── An approval: a decision, not a value ───────────────────────────────────
+   The options are buttons, not radios, because a decision has two primary actions
+   of opposite polarity and the composer's one button cannot carry both. So they
+   settle on the first click, and approving costs one gesture rather than two.
+
+   The colours are the ones the inline Approve / Reject pair used, moved here from
+   the runtime-injected `getStyles()` string in the tool_call renderer. That move is
+   the point: injected CSS is invisible to a consumer's own rules, absent from the
+   generated CSS reference, and unreachable by `check:derived-vars`. The elicitation
+   panel made the same move for the same reason. */
+/* A COLUMN, not a row of pills.
+   The panel lives in a composer, which is narrow — two or three labels side by side
+   either wrap into an unreadable jumble or get squeezed. And the labels are not short:
+   a scope option reads "Approve, and always for this tool". A stacked list is also what
+   every reference implementation of this shows, for the same reason: one target per
+   line, full width, so the choice is read rather than aimed at. */
+.aparte-approval-options {
+  display: flex;
+  flex-direction: column;
+  gap: var(--aparte-approval-gap, 4px);
+  margin: 0 6px;
+}
+
+.aparte-approval-option {
+  font: inherit;
+  font-size: var(--aparte-approval-option-size, 0.85rem);
+  font-weight: var(--aparte-font-weight-medium, 500);
+  line-height: 1.35;
+  /* Left-aligned and full width: the eye reads down a list, and a centred label in a
+     wide target is harder to scan than a flush one. */
+  text-align: start;
+  width: 100%;
+  padding: var(--aparte-approval-option-padding, 8px 10px);
+  border-radius: var(--aparte-approval-option-radius, 8px);
+  cursor: pointer;
+  border: 1px solid var(--aparte-border, rgba(128, 128, 128, 0.3));
+  background: transparent;
+  color: var(--aparte-text);
+}
+
+.aparte-approval-option:hover {
+  background: var(--aparte-surface-2, rgba(128, 128, 128, 0.08));
+}
+
+/* Tone is carried by a leading rule, not by colouring the label or ringing the whole
+   button. Both of those were tried: a green word on a dark panel reads as a link, and a
+   coloured border on every option turns the list into a traffic light. A 2px edge says
+   which way an option goes while leaving the text plain. */
+/* The SOLID colours, not the `-border` pair. Those carry ~40% alpha because they were
+   made for a 1px box outline over a surface; on a 2px rule against a light background
+   the deny edge came out a pale pink that read as decoration. A rule wants a colour. */
+.aparte-approval-option--affirm {
+  border-inline-start: 2px solid var(--aparte-success, rgb(21, 128, 61));
+}
+
+.aparte-approval-option--deny {
+  border-inline-start: 2px solid var(--aparte-error, rgb(185, 28, 28));
+}
+
+/* The refusal's reason, in the user's words. Quiet by default and one line tall: it is
+   the exception, not the expected act, and a box sized for a paragraph invites one. */
+.aparte-approval-instruction {
+  font: inherit;
+  font-size: var(--aparte-elic-input-size, 0.85rem);
+  color: var(--aparte-text);
+  background: transparent;
+  border: none;
+  border-top: 1px solid var(--aparte-border, rgba(128, 128, 128, 0.3));
+  border-radius: 0;
+  padding: 8px 10px 2px;
+  margin: 4px 6px 0;
+  resize: none;
+  overflow: hidden;
+  min-height: 1.6em;
+}
+
+.aparte-approval-instruction:focus {
+  outline: none;
+  border-top-color: var(--aparte-accent, rgba(128, 128, 128, 0.6));
+}
+
+.aparte-approval-instruction::placeholder {
+  color: var(--aparte-text-muted, rgba(128, 128, 128, 0.75));
+}
+
 .aparte-elic-skip {
   border: none;
   background: transparent;
@@ -1475,7 +1560,7 @@ aparte-chat-bubble:last-of-type .aparte-message[data-role="assistant"]:not(.apar
   font-size: var(--aparte-font-size-md, 13px);
 }
 
-.aparte-input-upper.has-content {
+.aparte-input-upper.aparte-has-content {
   display: flex;
 }
 
@@ -1702,7 +1787,7 @@ aparte-chat-status:not([visible]) {
    ========================================= */
 
 /* Text */
-.segment-text {
+.aparte-segment-text {
   word-wrap: break-word;
 }
 
@@ -1713,60 +1798,60 @@ aparte-chat-status:not([visible]) {
    ========================================= */
 
 .aparte-content,
-.segment-content {
+.aparte-segment-content {
   white-space: normal;
 }
 
 .aparte-content p,
-.segment-content p,
-.thinking-content p {
+.aparte-segment-content p,
+.aparte-thinking-content p {
   margin: var(--aparte-prose-p-margin, 0.4em 0);
 }
 
 .aparte-content p:first-child,
-.segment-content p:first-child,
-.thinking-content p:first-child {
+.aparte-segment-content p:first-child,
+.aparte-thinking-content p:first-child {
   margin-top: 0;
 }
 
 .aparte-content p:last-child,
-.segment-content p:last-child,
-.thinking-content p:last-child {
+.aparte-segment-content p:last-child,
+.aparte-thinking-content p:last-child {
   margin-bottom: 0;
 }
 
-.aparte-content h1, .segment-content h1, .thinking-content h1 { font-size: var(--aparte-prose-h1-size, 1.4em); font-weight: var(--aparte-font-weight-semibold, 600); margin: 0.6em 0 0.2em; }
-.aparte-content h2, .segment-content h2, .thinking-content h2 { font-size: var(--aparte-prose-h2-size, 1.25em); font-weight: var(--aparte-font-weight-semibold, 600); margin: 0.5em 0 0.2em; }
-.aparte-content h3, .segment-content h3, .thinking-content h3 { font-size: var(--aparte-prose-h3-size, 1.1em); font-weight: var(--aparte-font-weight-semibold, 600); margin: 0.4em 0 0.15em; }
-.aparte-content h4, .segment-content h4, .thinking-content h4,
-.aparte-content h5, .segment-content h5, .thinking-content h5,
-.aparte-content h6, .segment-content h6, .thinking-content h6 { font-size: 1em; font-weight: var(--aparte-font-weight-semibold, 600); margin: 0.3em 0 0.1em; }
+.aparte-content h1, .aparte-segment-content h1, .aparte-thinking-content h1 { font-size: var(--aparte-prose-h1-size, 1.4em); font-weight: var(--aparte-font-weight-semibold, 600); margin: 0.6em 0 0.2em; }
+.aparte-content h2, .aparte-segment-content h2, .aparte-thinking-content h2 { font-size: var(--aparte-prose-h2-size, 1.25em); font-weight: var(--aparte-font-weight-semibold, 600); margin: 0.5em 0 0.2em; }
+.aparte-content h3, .aparte-segment-content h3, .aparte-thinking-content h3 { font-size: var(--aparte-prose-h3-size, 1.1em); font-weight: var(--aparte-font-weight-semibold, 600); margin: 0.4em 0 0.15em; }
+.aparte-content h4, .aparte-segment-content h4, .aparte-thinking-content h4,
+.aparte-content h5, .aparte-segment-content h5, .aparte-thinking-content h5,
+.aparte-content h6, .aparte-segment-content h6, .aparte-thinking-content h6 { font-size: 1em; font-weight: var(--aparte-font-weight-semibold, 600); margin: 0.3em 0 0.1em; }
 
 .aparte-content ul,
-.segment-content ul,
-.thinking-content ul {
+.aparte-segment-content ul,
+.aparte-thinking-content ul {
   list-style: disc;
   padding-left: var(--aparte-prose-list-indent, 1.5em);
   margin: var(--aparte-prose-list-margin, 0.4em 0);
 }
 
 .aparte-content ol,
-.segment-content ol,
-.thinking-content ol {
+.aparte-segment-content ol,
+.aparte-thinking-content ol {
   list-style: decimal;
   padding-left: var(--aparte-prose-list-indent, 1.5em);
   margin: var(--aparte-prose-list-margin, 0.4em 0);
 }
 
 .aparte-content li,
-.segment-content li,
-.thinking-content li {
+.aparte-segment-content li,
+.aparte-thinking-content li {
   margin: var(--aparte-prose-li-margin, 0.15em 0);
 }
 
 .aparte-content blockquote,
-.segment-content blockquote,
-.thinking-content blockquote {
+.aparte-segment-content blockquote,
+.aparte-thinking-content blockquote {
   border-left: var(--aparte-prose-blockquote-border-width, 3px) solid var(--aparte-prose-blockquote-border, var(--aparte-border, #e5e7eb));
   padding-left: 1em;
   margin: 0.4em 0;
@@ -1775,20 +1860,20 @@ aparte-chat-status:not([visible]) {
 }
 
 .aparte-content strong,
-.segment-content strong,
-.thinking-content strong {
+.aparte-segment-content strong,
+.aparte-thinking-content strong {
   font-weight: var(--aparte-font-weight-semibold, 600);
 }
 
 .aparte-content em,
-.segment-content em,
-.thinking-content em {
+.aparte-segment-content em,
+.aparte-thinking-content em {
   font-style: italic;
 }
 
 .aparte-content code,
-.segment-content code,
-.thinking-content code {
+.aparte-segment-content code,
+.aparte-thinking-content code {
   font-family: var(--aparte-code-font-family, ui-monospace, 'Cascadia Code', 'Source Code Pro', Menlo, Consolas, monospace);
   font-size: var(--aparte-code-inline-font-size, 0.875em);
   background: var(--aparte-prose-code-bg, var(--aparte-code-bg, #f3f4f6));
@@ -1797,29 +1882,29 @@ aparte-chat-status:not([visible]) {
 }
 
 .aparte-content a,
-.segment-content a,
-.thinking-content a {
+.aparte-segment-content a,
+.aparte-thinking-content a {
   color: var(--aparte-primary, #6366f1);
   text-decoration: underline;
 }
 
 .aparte-content hr,
-.segment-content hr,
-.thinking-content hr {
+.aparte-segment-content hr,
+.aparte-thinking-content hr {
   border: none;
   border-top: var(--aparte-border-width, 1px) solid var(--aparte-border, #e5e7eb);
   margin: 0.75em 0;
 }
 
 /* Thinking */
-.segment-thinking {
+.aparte-segment-thinking {
   /* Understated disclosure: a muted left rail, not a filled card. */
   border-left: var(--aparte-thinking-rail-width, 2px) solid var(--aparte-thinking-border, #e5e7eb);
   margin: var(--aparte-space-5, 10px) 0;
   background: transparent;
 }
 
-.thinking-header {
+.aparte-thinking-header {
   display: flex;
   align-items: center;
   gap: var(--aparte-space-3, 6px);
@@ -1831,27 +1916,27 @@ aparte-chat-status:not([visible]) {
   list-style: none;
 }
 
-.thinking-header::-webkit-details-marker {
+.aparte-thinking-header::-webkit-details-marker {
   display: none;
 }
 
-.thinking-toggle {
+.aparte-thinking-toggle {
   margin-inline-start: auto;
   /* Logical property */
   transition: transform 0.2s;
   opacity: 0.55;
 }
 
-details[open] .thinking-toggle {
+details[open] .aparte-thinking-toggle {
   transform: rotate(180deg);
 }
 
-.thinking-toggle::after {
+.aparte-thinking-toggle::after {
   content: '▼';
   font-size: var(--aparte-thinking-toggle-size, 9px);
 }
 
-.thinking-content {
+.aparte-thinking-content {
   padding: var(--aparte-space-2, 4px) 0 var(--aparte-space-1, 2px) var(--aparte-space-5, 10px);
   font-size: var(--aparte-font-size-md, 13px);
   line-height: var(--aparte-thinking-content-line-height, 1.55);
@@ -1862,14 +1947,14 @@ details[open] .thinking-toggle {
 }
 
 /* Code */
-.segment-code {
+.aparte-segment-code {
   margin: var(--aparte-space-6, 12px) 0;
   border-radius: var(--aparte-radius-code);
   overflow: hidden;
   border: var(--aparte-border-width, 1px) solid var(--aparte-code-border, #e5e7eb);
 }
 
-.code-header {
+.aparte-code-header {
   display: flex;
   align-items: center;
   padding: var(--aparte-space-4, 8px) var(--aparte-space-6, 12px);
@@ -1879,25 +1964,25 @@ details[open] .thinking-toggle {
   color: var(--aparte-code-header-text, #4b5563);
 }
 
-.code-filename {
+.aparte-code-filename {
   font-weight: var(--aparte-font-weight-semibold, 600);
   margin-inline-end: auto;
   /* Logical property: pushes language + copy to the right when filename is present */
 }
 
-.code-header-filler {
+.aparte-code-header-filler {
   flex: 1;
   /* No-filename placeholder — keeps language + copy right-aligned */
 }
 
-.code-language {
+.aparte-code-language {
   margin-inline-end: var(--aparte-space-4, 8px);
   /* Logical property */
   text-transform: uppercase;
   opacity: 0.7;
 }
 
-.code-copy {
+.aparte-code-copy {
   background: transparent;
   border: none;
   cursor: pointer;
@@ -1909,147 +1994,29 @@ details[open] .thinking-toggle {
   justify-content: center;
 }
 
-.code-copy:hover {
+.aparte-code-copy:hover {
   background: var(--aparte-code-copy-hover-bg, rgba(0, 0, 0, 0.05));
 }
 
-.code-copy svg {
+.aparte-code-copy svg {
   width: var(--aparte-code-copy-icon-size, 14px);
   height: var(--aparte-code-copy-icon-size, 14px);
 }
 
-.code-content-wrapper pre {
+.aparte-code-content-wrapper pre {
   margin: 0;
   padding: var(--aparte-space-6, 12px);
   /* Wrap long lines instead of a horizontal scrollbar. `pre-wrap` honours
      newlines + indentation but soft-wraps overflowing lines; `overflow-wrap:
      anywhere` breaks unbreakable tokens (long URLs, hashes). Applies to both
      the plain <pre><code> initial render and the shiki <pre class="shiki">
-     replacement, since both sit inside .code-content-wrapper. */
+     replacement, since both sit inside .aparte-code-content-wrapper. */
   white-space: pre-wrap;
   overflow-wrap: anywhere;
   overflow-x: hidden;
   background: var(--aparte-code-bg, #ffffff);
 }
 
-/* Terminal */
-.segment-terminal {
-  margin: var(--aparte-space-6, 12px) 0;
-  font-family: var(--aparte-code-font-family, 'Fira Code', 'Monaco', 'Consolas', monospace);
-  font-size: var(--aparte-terminal-font-size, 13px);
-}
-
-.terminal-command-block {
-  display: flex;
-  align-items: center;
-  gap: var(--aparte-space-5, 10px);
-  padding: var(--aparte-space-5, 10px) var(--aparte-space-7, 14px);
-  background: var(--aparte-terminal-bg, #1e293b);
-  border-radius: var(--aparte-radius-terminal);
-  color: var(--aparte-terminal-text, #e2e8f0);
-}
-
-.terminal-icon {
-  flex-shrink: 0;
-  color: var(--aparte-terminal-icon, #64748b);
-  display: flex;
-  align-items: center;
-}
-
-.terminal-command {
-  flex: 1;
-  word-break: break-all;
-  background: transparent;
-  color: inherit;
-  font-family: inherit;
-}
-
-.terminal-actions {
-  display: flex;
-  align-items: center;
-  gap: var(--aparte-space-3, 6px);
-  flex-shrink: 0;
-}
-
-.terminal-run-btn {
-  padding: var(--aparte-space-2, 4px) var(--aparte-space-6, 12px);
-  background: var(--aparte-primary, #6366f1);
-  color: var(--aparte-on-primary, white);
-  border: none;
-  border-radius: var(--aparte-radius-sm);
-  font-size: var(--aparte-font-size-sm, 12px);
-  font-weight: var(--aparte-font-weight-medium, 500);
-  cursor: pointer;
-  transition: background 0.15s;
-}
-
-.terminal-run-btn:hover {
-  background: var(--aparte-primary-hover, #4f46e5);
-}
-
-.terminal-copy-btn {
-  width: var(--aparte-terminal-copy-btn-size, 26px);
-  height: var(--aparte-terminal-copy-btn-size, 26px);
-  padding: 0;
-  background: transparent;
-  border: none;
-  color: var(--aparte-terminal-icon, #64748b);
-  cursor: pointer;
-  border-radius: var(--aparte-radius-sm);
-  display: flex;
-  align-items: center;
-  justify-content: center;
-}
-
-.terminal-copy-btn:hover {
-  background: var(--aparte-terminal-hover, #334155);
-  color: var(--aparte-terminal-text, #e2e8f0);
-}
-
-.terminal-running {
-  display: flex;
-  align-items: center;
-  gap: var(--aparte-space-3, 6px);
-  color: var(--aparte-terminal-running, #22c55e);
-  font-size: var(--aparte-font-size-sm, 12px);
-}
-
-.terminal-running .spinner {
-  width: var(--aparte-space-6, 12px);
-  height: var(--aparte-space-6, 12px);
-  border: 2px solid currentColor;
-  border-top-color: transparent;
-  border-radius: 50%;
-  animation: aparte-spin 0.8s linear infinite;
-}
-
-@keyframes aparte-spin {
-  to {
-    transform: rotate(360deg);
-  }
-}
-
-.terminal-output {
-  margin-top: var(--aparte-space-4, 8px);
-  padding: var(--aparte-space-5, 10px) var(--aparte-space-7, 14px);
-  background: var(--aparte-terminal-output-bg, #0f172a);
-  border-radius: var(--aparte-radius-md);
-  color: var(--aparte-terminal-output-text, #94a3b8);
-  white-space: pre-wrap;
-  line-height: var(--aparte-line-height-normal, 1.5);
-  max-height: var(--aparte-terminal-output-max-height, 200px);
-  overflow-y: auto;
-}
-
-.terminal-error {
-  margin-top: var(--aparte-space-3, 6px);
-  padding: var(--aparte-space-3, 6px) var(--aparte-space-5, 10px);
-  background: var(--aparte-error-bg, #fef2f2);
-  border-radius: var(--aparte-radius-sm);
-  color: var(--aparte-error-text, #dc2626);
-  font-size: var(--aparte-font-size-sm, 12px);
-}
-
 /* Errored bubble state — the whole message carries `data-error` while it holds
    an error segment (set by the bubble in _reflectError). Kept subtle by default
    since the error segment itself is already styled; this is a theming hook —
@@ -2059,7 +2026,7 @@ details[open] .thinking-toggle {
 }
 
 /* Error */
-.segment-error {
+.aparte-segment-error {
   display: flex;
   gap: var(--aparte-space-6, 12px);
   padding: var(--aparte-space-6, 12px) var(--aparte-space-8, 16px);
@@ -2072,7 +2039,7 @@ details[open] .thinking-toggle {
   font-family: var(--aparte-font-family, system-ui, sans-serif);
 }
 
-.error-icon-wrapper {
+.aparte-error-icon-wrapper {
   flex-shrink: 0;
   color: var(--aparte-error-solid, #dc2626);
   display: flex;
@@ -2080,29 +2047,29 @@ details[open] .thinking-toggle {
   padding-top: var(--aparte-space-1, 2px);
 }
 
-.error-icon-wrapper svg {
+.aparte-error-icon-wrapper svg {
   width: var(--aparte-error-icon-size, 20px);
   height: var(--aparte-error-icon-size, 20px);
 }
 
-.error-content {
+.aparte-error-content {
   flex: 1;
   min-width: 0;
 }
 
-.error-title {
+.aparte-error-title {
   font-weight: var(--aparte-font-weight-semibold, 600);
   font-size: var(--aparte-font-size-lg, 14px);
   margin-bottom: var(--aparte-space-2, 4px);
   color: var(--aparte-error-title, #7f1d1d);
 }
 
-.error-message {
+.aparte-error-message {
   font-size: var(--aparte-font-size-lg, 14px);
   line-height: var(--aparte-line-height-normal, 1.5);
 }
 
-.error-details {
+.aparte-error-details {
   margin-top: var(--aparte-space-4, 8px);
   padding-top: var(--aparte-space-4, 8px);
   border-top: var(--aparte-border-width, 1px) solid var(--aparte-error-border, #fecaca);
@@ -2112,78 +2079,454 @@ details[open] .thinking-toggle {
   white-space: pre-wrap;
 }
 
-/* Progress */
-.segment-progress {
-  margin: var(--aparte-space-6, 12px) 0;
-}
 
-.progress-header {
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-  margin-bottom: var(--aparte-space-2, 4px);
-  color: var(--aparte-progress-label, #374151);
-  font-size: var(--aparte-font-size-lg, 14px);
-}
+/* ─────────────────────────────────────────────────────────────────────────────
+   Segment renderers — tool call · artifact card · pipeline waiting
+
+   These three shipped their CSS from `getStyles()` until now: a template literal
+   in the renderer's own .ts file, injected into <head> at runtime. That seam is
+   for a CONSUMER's renderer — something registered through registerSegmentRenderer
+   or registerToolRenderer cannot edit this file, so `getStyles()` is its only way
+   onto the page. A BUILT-IN has this file, and two reasons to use it:
+
+     - check:derived-vars reads this path and nothing else. A declaration whose
+       value reads another variable has to sit on the 5-anchor layer or it cannot
+       follow a palette a subtree overrides, and one hidden in a renderer was
+       never checked at all.
+     - it is read as CSS, by tools and by people. A backtick closes a template
+       literal, and one did — the artifact card's own comment recorded it
+       happening — then it happened three more times in one sitting, the worst of
+       them rendering a `safe-text` source marker into an assistant's bubble as
+       prose, because inside a template literal a `//` comment is just text.
+
+   NOT a reason, though it was the first one I wrote here: reaching the public CSS
+   reference. `gen-css-vars.mjs` walks all of core's source for `var(--aparte-*)`
+   reads, so a knob a renderer read was already listed with its fallback as the
+   default — the move changed that file by zero lines. Worth recording, because the
+   plausible version of this argument is the one that gets repeated.
+
+   Moving them changes no contract either: core's entry imports this file and
+   package.json marks every .css a side effect, so importing @aparte/core has
+   always brought this sheet along.
+   ───────────────────────────────────────────────────────────────────────────── */
 
-.progress-bar {
-  height: var(--aparte-space-2, 4px);
-  background: var(--aparte-progress-bar-bg, #e5e7eb);
-  border-radius: var(--aparte-radius-xs);
-  margin-top: var(--aparte-space-4, 8px);
-  overflow: hidden;
+/* Tool call */
+.aparte-segment-tool-call { display: block; padding: 2px 0; }
+/* The row is the summary. list-style:none plus the ::-webkit- pseudo is the
+   pair that actually removes the native marker across engines. */
+/* A ROW, not a badge.
+   It was a rounded chip, which is what a tag looks like — and a tool call is not
+   a tag, it is a step of the turn. Every current implementation draws it as a
+   line: the disclosure control, the call's identity, and its state at the far
+   end. The chip also had to carry a border and a fill, so it competed with the
+   reply text beside it for attention it did not deserve. */
+.aparte-tool-summary {
+    display: flex; align-items: center; gap: 7px;
+    padding: 3px 6px; margin-inline-start: -6px;
+    border-radius: var(--aparte-tool-row-radius, 6px);
+    cursor: pointer; list-style: none;
+}
+.aparte-tool-summary:hover { background: var(--aparte-surface-2, rgba(128,128,128,0.07)); }
+.aparte-tool-summary::-webkit-details-marker { display: none; }
+.aparte-tool-toggle {
+    width: 0; height: 0; flex: none; margin-inline-start: -1px;
+    border-inline-start: 5px solid currentColor;
+    border-block: 4px solid transparent;
+    opacity: 0.5; transition: transform 0.15s;
+}
+.aparte-tool-summary:hover .aparte-tool-toggle { opacity: 0.9; }
+details[open] > .aparte-tool-summary .aparte-tool-toggle { transform: rotate(90deg); }
+/* A rule down the leading edge, so the disclosure reads as belonging to the
+   pill above it rather than continuing the message text below. Without it
+   "Output" and the assistant's next sentence sat in one undifferentiated
+   column. */
+.aparte-tool-detail {
+    display: flex; flex-direction: column; gap: 8px;
+    /* Aligned under the row's icon, so the rule reads as descending from the
+       call rather than floating beside it. */
+    margin: 4px 0 6px 3px; padding: 2px 0 2px 12px;
+    border-inline-start: 1px solid var(--aparte-border, rgba(128,128,128,0.25));
+}
+.aparte-tool-part-label {
+    display: block; font-size: 0.68rem; text-transform: uppercase;
+    letter-spacing: 0.04em; opacity: 0.55; margin-bottom: 2px;
+}
+.aparte-tool-part-body pre { margin: 0; }
+/* Always in the DOM so update can leave the node alone and toggle hidden
+   instead — an attribute a test can read, where a CSS-only rule is invisible
+   to jsdom. */
+.aparte-tool-spinner[hidden] { display: none; }
+/* The call's identity: its icon and its name, and no decoration of its own.
+   No border, no fill, no tint at any status — the row is the container now, and
+   the colour lives on the state badge alone. A resolved call used to be filled
+   green, which made a finished step shout louder than the reply it belongs to. */
+.aparte-tool-label {
+    display: inline-flex;
+    align-items: center;
+    gap: 6px;
+    min-width: 0;
+    font-size: 0.8rem;
+    font-weight: 500;
+    color: var(--aparte-text, inherit);
+    user-select: none;
+}
+/* A fixed square, and the glyph centred in it. The icon was baseline-aligned
+   inside an inline box, so it sat low against the name and moved with whatever
+   glyph the icon provider returned. */
+.aparte-tool-icon {
+    display: grid;
+    place-items: center;
+    width: 1em; height: 1em;
+    flex: none;
+    opacity: 0.7;
+}
+.aparte-tool-icon svg { width: 1em; height: 1em; display: block; }
+.aparte-tool-name { font-family: var(--aparte-code-font-family, ui-monospace, monospace); }
+/* The state, as a word with its glyph. Colour lives HERE and nowhere else.
+   Pushed to the far end by DOM order plus an auto inline-start margin, which is
+   the placement rule this repo already settled on: no left/right in a name, so
+   a right-to-left locale mirrors it for free. */
+.aparte-tool-state {
+    display: inline-flex; align-items: center; gap: 4px;
+    margin-inline-start: auto;
+    font-size: 0.72rem; font-weight: 500;
+    color: var(--aparte-text-muted, rgba(128,128,128,0.75));
+    user-select: none;
+}
+.aparte-tool-state svg { width: 0.9em; height: 0.9em; display: block; }
+[data-status="resolved"] .aparte-tool-state { color: var(--aparte-success, rgb(21,128,61)); }
+[data-status="rejected"] .aparte-tool-state,
+[data-status="aborted"] .aparte-tool-state { color: var(--aparte-error, rgb(185,28,28)); }
+/* The Approve / Reject button rules were here. They moved with the buttons, to
+   .aparte-approval-option in this same file - and what stayed behind was a
+   leftover: a rule tinting .aparte-tool-label's border while a decision was pending,
+   which stopped painting anything the moment the row redesign took that border
+   off .aparte-tool-label. It reached for a variable that was never declared, and it
+   survived because a template literal is not a stylesheet anyone greps. The
+   state is named in words by .aparte-tool-state now, and the decision is at the
+   composer. */
+.aparte-tool-spinner {
+    width: 10px; height: 10px;
+    border: 1.5px solid currentColor;
+    border-top-color: transparent;
+    border-radius: 50%;
+    display: inline-block;
+    animation: tool-spin 0.7s linear infinite;
+}
+.aparte-tool-state { font-size: 0.75rem; }
+@keyframes tool-spin { to { transform: rotate(360deg); } }
+
+/* Artifact card */
+.aparte-segment-artifact-card {
+    display: flex; flex-direction: column;
+    margin: 8px 0;
+    border: 1px solid var(--aparte-border, rgba(0,0,0,0.12));
+    border-radius: 12px;
+    background: var(--aparte-surface, #fff);
+    overflow: hidden;
+    font: inherit;
+    color: var(--aparte-text, inherit);
+}
+.aparte-art-card__header {
+    display: flex; align-items: center; justify-content: space-between;
+    padding: 8px 10px;
+    border-bottom: 1px solid var(--aparte-border, rgba(0,0,0,0.08));
+    background: var(--aparte-surface-2, rgba(0,0,0,0.02));
+    min-height: 36px;
+}
+.aparte-art-card__title-block { display: flex; align-items: center; gap: 8px; min-width: 0; }
+.aparte-art-card__kind {
+    font-size: 0.7rem; font-weight: 600;
+    text-transform: uppercase; letter-spacing: 0.04em;
+    padding: 2px 6px; border-radius: 4px;
+    background: var(--aparte-surface, #fff);
+    border: 1px solid var(--aparte-border, rgba(0,0,0,0.1));
+    color: var(--aparte-text-muted, rgba(0,0,0,0.6));
+}
+.aparte-art-card__title {
+    font-size: 0.85rem; font-weight: 500;
+    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
+}
+.aparte-art-card__pulse {
+    width: 8px; height: 8px; border-radius: 50%;
+    background: var(--aparte-accent, #3b82f6);
+    animation: aparte-art-card-pulse 1.2s ease-in-out infinite;
+}
+@keyframes aparte-art-card-pulse {
+    0%, 100% { opacity: 0.35; transform: scale(0.85); }
+    50%      { opacity: 1;    transform: scale(1.1);  }
+}
+.aparte-art-card__actions { display: flex; gap: 4px; }
+.aparte-art-card__btn {
+    display: inline-flex; align-items: center; justify-content: center;
+    width: 28px; height: 28px;
+    background: transparent;
+    border: 1px solid transparent;
+    border-radius: 6px;
+    color: var(--aparte-text-muted, rgba(0,0,0,0.55));
+    cursor: pointer;
+    transition: background 0.12s, border-color 0.12s, color 0.12s;
+}
+.aparte-art-card__btn:hover:not(:disabled) {
+    background: var(--aparte-surface-hover, rgba(0,0,0,0.04));
+    border-color: var(--aparte-border, rgba(0,0,0,0.1));
+    color: var(--aparte-text, inherit);
+}
+.aparte-art-card__btn:disabled { opacity: 0.4; cursor: not-allowed; }
+.aparte-art-card__tabs {
+    /* justify-content and the padding are DECLARED, not left to a default.
+       Core is light DOM on purpose - no shadow root, no ::part(), any selector
+       reaches in - and the corollary is that a component must state what its
+       layout depends on, because an undeclared property has nothing to override
+       a host rule with. A consuming page with a bare nav selector setting
+       justify-content: space-between and padding-top (this library's own docs
+       site had exactly that) otherwise pushes these two tabs to opposite ends of
+       the card and pads the row out.
+
+       flex-end, and Code first in the DOM. The card OPENS on Code - mounting the
+       preview would execute model-authored code with no gesture (ratified
+       decision #8) - and a selected tab sitting second reads backwards. Right,
+       because the header above puts the artifact's identity on the left and its
+       copy/download buttons on the right, so this keeps every control in one
+       column. DOM order is also keyboard order, so the tab a reader lands on
+       first is the one already showing. */
+    display: flex; justify-content: flex-end; align-items: stretch; gap: 2px;
+    padding: 4px 8px 0;
+    border-bottom: 1px solid var(--aparte-border, rgba(0,0,0,0.08));
+    background: var(--aparte-surface-2, rgba(0,0,0,0.02));
+}
+.aparte-art-card__tabs button {
+    padding: 6px 12px;
+    font-size: 0.78rem;
+    background: transparent;
+    border: 1px solid transparent;
+    border-bottom: none;
+    border-radius: 6px 6px 0 0;
+    color: var(--aparte-text-muted, rgba(0,0,0,0.6));
+    cursor: pointer;
+    transition: background 0.12s, color 0.12s;
+}
+.aparte-art-card__tabs button[aria-selected="true"] {
+    background: var(--aparte-surface, #fff);
+    border-color: var(--aparte-border, rgba(0,0,0,0.08));
+    color: var(--aparte-text, inherit);
+    font-weight: 500;
+}
+.aparte-art-card__tabs button:disabled { opacity: 0.4; cursor: not-allowed; }
+/* The card's heights, as variables with ONE owner each.
+   They were four hardcoded numbers in the only part of this card that did not
+   use a variable - everything else here already reads var(--aparte-code-bg) and
+   friends - and two of them had to agree while a third contradicted a fourth:
+   the code pane repeated the body's 600px, and the "press Preview" placeholder
+   was 120px tall inside a body whose min-height said 80, so that minimum applied
+   to nothing.
+   The frame stays a FIXED height rather than an aspect ratio, which is what
+   embeds of arbitrary HTML actually do - CodeSandbox documents 500px, StackBlitz
+   takes a height parameter - because a frame with an opaque origin cannot be
+   measured and a 16/10 ratio on a wide card is enormous. The vh cap is the part
+   that was missing: a fixed 480px should not own a phone screen.
+   Each default lives in its read, as var(--x, literal), the way every other
+   value in this file already does - not in a declaration block on top of the
+   fallbacks, which would be two owners of one number again. It also means the
+   docs' CSS-variable generator finds them: its sweep looks for reads that
+   carry a fallback, so a read without one is a public knob nobody documents. */
+.aparte-art-card__body {
+    position: relative;
+    /* The placeholder is the tallest thing this box can hold while empty, so it
+       IS the minimum - one number instead of two that disagreed. */
+    min-height: var(--aparte-artifact-pending-height, 120px);
+    max-height: var(--aparte-artifact-body-max, 600px);
+    overflow: hidden;
 }
-
-.progress-fill {
-  height: 100%;
-  background: var(--aparte-progress-bar-fill, #6366f1);
-  border-radius: var(--aparte-radius-xs);
-  transition: width 0.3s ease;
+.aparte-art-card__pane { display: none; height: 100%; }
+.aparte-segment-artifact-card[data-tab="code"]    .aparte-art-card__pane[data-pane="code"]    { display: block; }
+.aparte-segment-artifact-card[data-tab="preview"] .aparte-art-card__pane[data-pane="preview"] { display: block; }
+.aparte-art-card__pane[data-pane="code"] {
+    /* The body already caps this; repeating the number was the second owner. */
+    max-height: var(--aparte-artifact-body-max, 600px); overflow: auto;
 }
-
-/* File Tree */
-.segment-file-tree {
-  background: var(--aparte-file-tree-bg, #f8fafc);
-  border: var(--aparte-border-width, 1px) solid var(--aparte-file-tree-border, #e2e8f0);
-  border-radius: var(--aparte-radius-file-tree);
-  margin: var(--aparte-space-6, 12px) 0;
-  overflow: hidden;
-  font-family: var(--aparte-font-family, system-ui, -apple-system, sans-serif);
-  font-size: var(--aparte-font-size-md, 13px);
+.aparte-art-card__pane[data-pane="code"] pre {
+    margin: 0; padding: 12px;
+    font-size: 0.82rem;
+    background: var(--aparte-code-bg, #fafafa);
 }
-
-.file-tree-title {
-  padding: var(--aparte-space-5, 10px) var(--aparte-space-7, 14px);
-  background: var(--aparte-file-tree-header-bg, #f1f5f9);
-  border-bottom: var(--aparte-border-width, 1px) solid var(--aparte-file-tree-border, #e2e8f0);
-  font-weight: var(--aparte-font-weight-medium, 500);
-  color: var(--aparte-file-tree-title, #475569);
+.aparte-art-card__frame {
+    display: block;
+    width: 100%;
+    height: min(var(--aparte-artifact-frame-height, 480px), var(--aparte-artifact-frame-max, 70vh));
+    border: 0;
+    background: #fff;
+}
+.aparte-art-card__pending {
+    display: flex; align-items: center; justify-content: center;
+    height: var(--aparte-artifact-pending-height, 120px);
+    color: var(--aparte-text-muted, rgba(0,0,0,0.5));
+    font-size: 0.85rem;
+    font-style: italic;
 }
-
-.file-tree-content {
-  padding: var(--aparte-space-4, 8px) 0;
+/* ── Binary file artifact (xlsx/pdf/docx) ──────────────────── */
+.aparte-segment-artifact-file {
+    display: flex; flex-direction: column;
+    margin: 8px 0;
+    border: 1px solid var(--aparte-border, rgba(0,0,0,0.12));
+    border-radius: 12px;
+    background: var(--aparte-surface, #fff);
+    overflow: hidden;
+    color: var(--aparte-text, inherit);
+    font: inherit;
 }
-
-.file-node {
-  display: flex;
-  align-items: center;
-  gap: var(--aparte-space-4, 8px);
-  padding: var(--aparte-space-2, 4px) var(--aparte-space-7, 14px);
-  cursor: default;
+.aparte-art-file__card {
+    display: flex; align-items: center; gap: 12px;
+    padding: 12px 14px;
+    background: var(--aparte-surface-2, rgba(0,0,0,0.02));
+    border-bottom: 1px solid var(--aparte-border, rgba(0,0,0,0.08));
 }
-
-.file-node:hover {
-  background: var(--aparte-file-tree-hover, #f1f5f9);
+.aparte-art-file__body {
+    position: relative;
+}
+.aparte-art-file__code-pane {
+    max-height: var(--aparte-artifact-file-code-max, 360px); overflow: auto;
+    background: var(--aparte-code-bg, #fafafa);
+}
+.aparte-art-file__code-pane pre {
+    margin: 0; padding: 12px;
+    font-size: 0.82rem;
+    font-family: 'JetBrains Mono', 'Fira Code', Consolas, monospace;
+}
+.aparte-art-file__preview-pane {
+    max-height: var(--aparte-artifact-file-preview-max, 460px);
+    overflow: auto;
+    background: #fff;
+    /* Preview is a document view — force light scheme regardless of
+       the app theme, with a dark text colour so cells stay readable. */
+    color: #1f2937;
+}
+.aparte-art-file__icon {
+    width: 40px; height: 40px;
+    border-radius: 8px;
+    display: flex; align-items: center; justify-content: center;
+    background: linear-gradient(135deg, #1d6f42, #0f5132);
+    color: #fff;
+    font-weight: 700;
+    font-size: 0.78rem;
+    letter-spacing: 0.04em;
+    flex-shrink: 0;
+}
+.aparte-art-file__icon[data-kind="pdf"]  { background: linear-gradient(135deg, #c0392b, #7d1f17); }
+.aparte-art-file__icon[data-kind="docx"] { background: linear-gradient(135deg, #1e5288, #0f3060); }
+.aparte-art-file__meta { flex: 1 1 auto; min-width: 0; }
+.aparte-art-file__meta-name {
+    font-weight: 600; font-size: 0.92rem;
+    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
+}
+.aparte-art-file__meta-sub {
+    font-size: 0.78rem;
+    color: var(--aparte-text-muted, rgba(0,0,0,0.55));
+}
+.aparte-art-file__actions { display: flex; gap: 6px; flex-shrink: 0; }
+.aparte-art-file__btn {
+    border: 1px solid var(--aparte-border, rgba(0,0,0,0.12));
+    background: var(--aparte-surface, #fff);
+    color: var(--aparte-text, inherit);
+    padding: 6px 10px;
+    border-radius: 6px;
+    font-size: 0.8rem;
+    cursor: pointer;
+    transition: background 0.12s ease;
+}
+.aparte-art-file__btn:hover { background: var(--aparte-surface-2, rgba(0,0,0,0.05)); }
+.aparte-art-file__btn--primary {
+    background: var(--aparte-primary, #6366f1);
+    color: #fff;
+    border-color: var(--aparte-primary, #6366f1);
+}
+.aparte-art-file__btn--primary:hover { filter: brightness(1.07); }
+/* Hide the download button until the sandbox has produced the buffer.
+   Avoids confusing the user with a disabled-but-styled-primary button
+   during streaming / compiling. */
+.aparte-segment-artifact-file:not([data-state="ready"]) .aparte-art-file__btn[data-action="download"] {
+    display: none;
+}
+.aparte-art-file__preview-pane table {
+    border-collapse: collapse;
+    width: 100%;
+    font-size: 0.82rem;
+    font-family: inherit;
+}
+.aparte-art-file__preview-pane th,
+.aparte-art-file__preview-pane td {
+    border: 1px solid rgba(0,0,0,0.10);
+    padding: 6px 10px;
+    text-align: left;
+    white-space: nowrap;
+    color: #1f2937;
+    background: #fff;
+}
+.aparte-art-file__preview-pane tr:nth-child(odd) td { background: #f9fafb; }
+.aparte-art-file__preview-pane tr:first-child td {
+    background: #f3f4f6;
+    font-weight: 600;
+    position: sticky; top: 0;
+    color: #111827;
+}
+.aparte-art-file__preview-empty {
+    padding: 20px; text-align: center;
+    color: var(--aparte-text-muted, rgba(0,0,0,0.5));
+    font-size: 0.85rem; font-style: italic;
+}
+.aparte-segment-artifact-file[data-state="error"] .aparte-art-file__icon {
+    background: linear-gradient(135deg, #c0392b, #7d1f17);
+}
+.aparte-art-file__error {
+    padding: 16px 18px;
+    background: rgba(239, 68, 68, 0.05);
+    border-top: 1px solid rgba(239, 68, 68, 0.2);
+    color: var(--aparte-text, inherit);
+}
+.aparte-art-file__error-title {
+    font-weight: 600;
+    font-size: 0.9rem;
+    margin-bottom: 6px;
+    color: #b91c1c;
+}
+.aparte-art-file__error-msg {
+    font-family: 'JetBrains Mono', 'Fira Code', Consolas, monospace;
+    font-size: 0.78rem;
+    padding: 6px 10px;
+    background: rgba(0,0,0,0.04);
+    border-radius: 4px;
+    margin-bottom: 8px;
+    color: #7f1d1d;
+    word-break: break-word;
+}
+.aparte-art-file__error-hint {
+    font-size: 0.78rem;
+    color: var(--aparte-text-muted, rgba(0,0,0,0.55));
+    font-style: italic;
 }
 
-.file-node.file-status-added .file-name { color: var(--aparte-file-status-added, #16a34a); }
-.file-node.file-status-modified .file-name { color: var(--aparte-file-status-modified, #0284c7); }
-.file-node.file-status-deleted .file-name { color: var(--aparte-file-status-deleted, #dc2626); text-decoration: line-through; opacity: 0.7; }
-
-.file-icon {
-  font-size: var(--aparte-font-size-lg, 14px);
-  flex-shrink: 0;
-  opacity: 0.7;
+/* Pipeline waiting */
+.aparte-segment-pipeline-waiting {
+    display: flex;
+    align-items: center;
+    gap: 5px;
+    padding: 6px 2px;
+    min-height: 28px;
+}
+.aparte-pw-dot {
+    display: inline-block;
+    width: 8px;
+    height: 8px;
+    border-radius: 50%;
+    background: var(--aparte-text-muted, #6b7280);
+    opacity: 0.3;
+    animation: pw-pulse 1.2s ease-in-out infinite;
+}
+.aparte-pw-dot:nth-child(2) { animation-delay: 0.2s; }
+.aparte-pw-dot:nth-child(3) { animation-delay: 0.4s; }
+@keyframes pw-pulse {
+    0%, 80%, 100% { opacity: 0.3; transform: scale(0.85); }
+    40%            { opacity: 1;   transform: scale(1.1);  }
 }
 
 /* ─────────────────────────────────────────────────────────────────────────────
@@ -2281,13 +2624,13 @@ aparte-composer-action {
 }
 
 /* ── Drag-over state on root ── */
-aparte-composer.is-dragover .aparte-composer-shell {
+aparte-composer.aparte-is-dragover .aparte-composer-shell {
   outline: var(--aparte-focus-outline-width, 2px) dashed var(--aparte-primary);
   outline-offset: -2px;
   border-radius: var(--aparte-radius-input, 12px);
 }
 /* fallback: no shell */
-aparte-composer.is-dragover:not(:has(.aparte-composer-shell)) {
+aparte-composer.aparte-is-dragover:not(:has(.aparte-composer-shell)) {
   outline: var(--aparte-focus-outline-width, 2px) dashed var(--aparte-primary);
   outline-offset: -2px;
   border-radius: var(--aparte-radius-input, 12px);
@@ -2349,6 +2692,23 @@ aparte-composer.is-dragover:not(:has(.aparte-composer-shell)) {
   justify-content: center;
 }
 
+/* A panel is mounted INSIDE that row, so its own buttons inherited the 44x44 sizing
+   above and rendered as circles with their labels spilling out. The rule above means
+   "the composer's own controls"; anything inside a panel is CONTENT, and a panel is
+   free to contain a button — the approval options are the first that do, and they will
+   not be the last. */
+[data-aparte-panel] button {
+  width: auto;
+  height: auto;
+  flex-shrink: 1;
+  /* The row also makes its controls centred flex boxes, which beats `text-align` — so a
+     left-aligned label in a panel came out centred until this line existed. Undo the
+     whole treatment, not the half of it that was visible. */
+  display: block;
+  justify-content: initial;
+  align-items: initial;
+}
+
 /* The composer's bottom row (mode picker, model selector, token counter…).
    `aparte-composer-toolbar` is the element consumers write — one name for vanilla and
    every wrapper. `.aparte-composer-footer` is the class the same row used to be built
@@ -2585,15 +2945,15 @@ aparte-conversation-list {
    Provider-HTML overflow guards
    ========================================= */
 
-/* Markdown providers inject arbitrary HTML into .segment-text, and the bubble
+/* Markdown providers inject arbitrary HTML into .aparte-segment-text, and the bubble
    clips overflow (`aparte-chat-bubble { overflow: hidden }`) — without these
    guards a wide image or table is silently cut at the bubble edge. */
-.segment-text img {
+.aparte-segment-text img {
   max-width: 100%;
   height: auto;
 }
 
-.segment-text table {
+.aparte-segment-text table {
   display: block;
   max-width: 100%;
   overflow-x: auto;