anentrypoint-design 0.0.206 → 0.0.207

package/chat.css

@@ -464,7 +464,10 @@ button.chat-composer-context:focus-visible { outline: 2px solid var(--accent); o
 /* --- C5: active dashboard card (current conversation). --- */
 .ds-dash-card.is-active { box-shadow: inset 2px 0 0 var(--accent); }
 .ds-dash-card.is-selected { background: var(--accent-tint); }
-.ds-dash-card.is-stale { opacity: .92; }
+/* 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); }
 
 /* --- H3: dashboard live disc pulses; stale/error do not (handled by H1). --- */
 
@@ -550,7 +553,7 @@ button.chat-composer-context:focus-visible { outline: 2px solid var(--accent); o
 /* Enter-to-send hint: visible while the composer is focused or carries a
    draft; hidden under 420px to save rows. */
 .chat-composer-hint {
-  display: none; padding: 2px var(--space-3) 0;
+  display: none; width: 100%; order: 5; padding: 2px var(--space-1) 0;
   font-size: var(--fs-micro); color: var(--fg-3);
 }
 .chat-composer:focus-within .chat-composer-hint,
@@ -632,3 +635,137 @@ button.chat-composer-context:focus-visible { outline: 2px solid var(--accent); o
 
 /* One connection vocabulary: offline (is-lost kept as legacy alias). */
 .ds-dash-stream.is-offline { color: var(--flame); }
+
+/* ============================================================
+   10th run - Claude-Code-web design-language parity
+   ============================================================ */
+
+/* Flat full-width chat turns (claude.ai/code), replacing the messenger
+   avatar-disc + colored-bubble layout. AgentChat passes flat:true; the demo
+   Chat keeps the bubble layout. Turns are full-width to --measure; the user vs
+   assistant distinction is a role label + a faint assistant background. */
+.chat-msg-flat { display: block; padding: var(--space-3) var(--space-4); margin: 0; background: none; border-radius: var(--r-2); }
+.chat-msg-flat.them { background: color-mix(in oklab, var(--fg) 3%, transparent); }
+.chat-msg-flat.you { background: none; }
+.chat-msg-flat .chat-stack { max-width: var(--measure); width: 100%; margin: 0; align-items: stretch; }
+.chat-msg-flat.you .chat-stack { align-items: stretch; }
+.chat-role { font-size: var(--fs-tiny); font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: var(--fg-3); margin-bottom: var(--space-1); }
+.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); }
+.chat-msg-flat:hover .chat-bubble { transform: none; box-shadow: none; background: none; }
+.chat-msg-flat .chat-avatar { display: none; }
+
+/* Tool-call card: a bordered, status-toned, scannable card (claude.ai/code),
+   not the raw mascot-tinted details dump. The node keeps the .chat-bubble
+   class, so these rules de-frame it and restyle. Placed after the flat-bubble
+   reset so they win on equal specificity. */
+.chat-msg .chat-tool {
+  display: block; max-width: 100%; padding: 0; margin: var(--space-1) 0;
+  background: var(--bg); color: var(--fg);
+  border: var(--bw-hair) solid var(--rule); border-radius: var(--r-2);
+  box-shadow: none; overflow: hidden;
+}
+.chat-msg .chat-tool[open] { background: var(--bg); }
+.chat-msg .chat-tool .chat-tool-head {
+  display: flex; align-items: center; gap: var(--space-2);
+  padding: var(--space-2) var(--space-3); cursor: pointer;
+  font-size: var(--fs-sm); list-style: none;
+}
+.chat-msg .chat-tool .chat-tool-head::-webkit-details-marker { display: none; }
+.chat-msg .chat-tool .chat-tool-head:hover { background: var(--bg-2); }
+.chat-tool-icon { display: inline-flex; color: var(--fg-3); }
+.chat-tool-name { font-family: var(--ff-mono); font-weight: 600; color: var(--fg); }
+.chat-tool-label { color: var(--fg-3); font-size: var(--fs-tiny); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
+.chat-tool-status {
+  margin-left: auto; flex: 0 0 auto;
+  font-size: var(--fs-micro); font-weight: 700; text-transform: uppercase; letter-spacing: .04em;
+  color: var(--fg-3);
+  padding: 2px var(--space-2); border-radius: var(--r-pill);
+  background: color-mix(in oklab, var(--fg) 6%, transparent);
+}
+.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); }
+.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-micro); font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: var(--fg-3); }
+.chat-tool-pre { margin: 0; padding: var(--space-2); background: var(--bg-2); border-radius: var(--r-1); font-family: var(--ff-mono); font-size: var(--fs-tiny); line-height: 1.45; overflow-x: auto; max-height: 320px; overflow-y: auto; }
+.chat-tool-pre.is-error { color: var(--flame); }
+.chat-tool-pre.chat-tool-empty { color: var(--fg-3); }
+
+/* Fenced-code language tab on every rendered-markdown block (not just the
+   structured CodeNode). injectCodeCopy reads the language- class. */
+.chat-code-block { position: relative; }
+.chat-code-lang {
+  position: absolute; top: 0; left: 0; z-index: 2;
+  padding: 2px var(--space-2); border-bottom-right-radius: var(--r-1);
+  font-family: var(--ff-mono); font-size: var(--fs-micro); text-transform: uppercase; letter-spacing: .04em;
+  color: var(--fg-3); background: color-mix(in oklab, var(--fg) 6%, transparent);
+  pointer-events: none;
+}
+.chat-code-block pre { padding-top: calc(var(--space-3) + 4px); }
+
+/* Motion + microinteraction polish (all reduced-motion guarded). */
+.ds-session-row { transition: background var(--dur-snap) var(--ease), box-shadow var(--dur-snap) var(--ease); }
+@media (prefers-reduced-motion: no-preference) {
+  .agentchat-thread { scroll-behavior: smooth; }
+  .ds-alert { animation: ds-alert-in var(--dur-base) var(--ease); }
+}
+@keyframes ds-alert-in { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: none; } }
+.chat-code-copy { transition: opacity var(--dur-snap, .12s) var(--ease, ease), color var(--dur-snap) var(--ease), border-color var(--dur-snap) var(--ease), background var(--dur-snap) var(--ease); }
+.chat-msg-action { transition: background var(--dur-snap) var(--ease), color var(--dur-snap) var(--ease); }
+.agentchat-install-copy { transition: background var(--dur-snap) var(--ease), color var(--dur-snap) var(--ease); }
+@media (prefers-reduced-motion: no-preference) {
+  .btn.is-armed, .btn-primary.is-armed { animation: ds-arm-pulse var(--dur-slow) var(--ease); }
+}
+@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); }
+@media (prefers-reduced-motion: no-preference) {
+  .ds-dash-card.is-new { animation: ds-card-in var(--dur-slow) var(--ease); }
+}
+@keyframes ds-card-in { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
+
+/* Live command-center: status-bucket groups + header breakdown + heartbeat. */
+.ds-dash-group { display: flex; flex-direction: column; gap: var(--space-2); }
+.ds-dash-group-label { font-size: var(--fs-micro); font-weight: 700; text-transform: uppercase; letter-spacing: .05em; 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-error { color: var(--flame); font-weight: 600; }
+.ds-dash-breakdown .seg.is-idle { color: var(--amber, #d9a93a); }
+.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; }
+.ds-dash-clear { background: none; border: none; color: var(--fg-3); cursor: pointer; font-size: var(--fs-tiny); text-decoration: underline dotted; padding: var(--space-1); }
+
+/* Conversation-rail loading skeleton (cold ccsniff walk). */
+.ds-session-row-skeleton { display: flex; flex-direction: column; gap: 6px; padding: var(--space-2) var(--space-3); }
+.ds-session-row-skeleton .ds-skel { background: var(--bg-3); border-radius: var(--r-1); }
+.ds-session-row-skeleton .ds-skel-title { height: 12px; width: 70%; }
+.ds-session-row-skeleton .ds-skel-meta { height: 9px; width: 45%; }
+@media (prefers-reduced-motion: no-preference) {
+  .ds-session-row-skeleton .ds-skel { animation: ds-skel-shimmer 1.3s ease-in-out infinite; background: linear-gradient(90deg, var(--bg-3) 0%, var(--bg-2) 50%, var(--bg-3) 100%); background-size: 200% 100%; }
+}
+@keyframes ds-skel-shimmer { 0% { background-position: 200% 0; } 100% { background-position: -200% 0; } }
+
+/* File code preview: paint Prism tokens (the bundle scoped them to the chat
+   block only) + an optional non-selectable line-number gutter. */
+.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.selector, .ds-preview-code .token.attr-name, .ds-preview-code .token.string, .ds-preview-code .token.char, .ds-preview-code .token.builtin { color: var(--green-2, #3A9A34); }
+.ds-preview-code .token.atrule, .ds-preview-code .token.attr-value, .ds-preview-code .token.keyword { color: var(--sky, #3A6EFF); }
+.ds-preview-code .token.function, .ds-preview-code .token.class-name { color: var(--flame); }
+.ds-preview-code.has-gutter { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 0 var(--space-2); }
+.ds-preview-code.has-gutter code { display: block; min-width: 0; overflow-x: auto; }
+.ds-preview-gutter { user-select: none; text-align: right; padding: 0 var(--space-2) 0 0; color: var(--fg-3); border-right: var(--bw-hair) solid var(--rule); font-family: var(--ff-mono); white-space: pre; line-height: inherit; }
+
+/* Image preview: fit/actual control + alpha checkerboard. */
+.ds-preview-media-controls { display: flex; gap: var(--space-2); padding: var(--space-2); justify-content: center; }
+.ds-preview-media-alpha {
+  background-image: linear-gradient(45deg, var(--bg-3) 25%, transparent 25%), linear-gradient(-45deg, var(--bg-3) 25%, transparent 25%), linear-gradient(45deg, transparent 75%, var(--bg-3) 75%), linear-gradient(-45deg, transparent 75%, var(--bg-3) 75%);
+  background-size: 16px 16px; background-position: 0 0, 0 8px, 8px -8px, -8px 0;
+}
+.ds-preview-media.is-actual { max-width: none; max-height: none; }

package/dist/247420.css

@@ -5422,7 +5422,10 @@
 /* --- C5: active dashboard card (current conversation). --- */
 .ds-247420 .ds-dash-card.is-active { box-shadow: inset 2px 0 0 var(--accent); }
 .ds-247420 .ds-dash-card.is-selected { background: var(--accent-tint); }
-.ds-247420 .ds-dash-card.is-stale { opacity: .92; }
+/* 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-247420 .ds-dash-card.is-stale { box-shadow: inset 2px 0 0 var(--amber, #d9a93a); }
 
 /* --- H3: dashboard live disc pulses; stale/error do not (handled by H1). --- */
 
@@ -5508,7 +5511,7 @@
 /* Enter-to-send hint: visible while the composer is focused or carries a
    draft; hidden under 420px to save rows. */
 .ds-247420 .chat-composer-hint {
-  display: none; padding: 2px var(--space-3) 0;
+  display: none; width: 100%; order: 5; padding: 2px var(--space-1) 0;
   font-size: var(--fs-micro); color: var(--fg-3);
 }
 .ds-247420 .chat-composer:focus-within .chat-composer-hint,
@@ -5591,6 +5594,140 @@
 /* One connection vocabulary: offline (is-lost kept as legacy alias). */
 .ds-247420 .ds-dash-stream.is-offline { color: var(--flame); }
 
+/* ============================================================
+   10th run - Claude-Code-web design-language parity
+   ============================================================ */
+
+/* Flat full-width chat turns (claude.ai/code), replacing the messenger
+   avatar-disc + colored-bubble layout. AgentChat passes flat:true; the demo
+   Chat keeps the bubble layout. Turns are full-width to --measure; the user vs
+   assistant distinction is a role label + a faint assistant background. */
+.ds-247420 .chat-msg-flat { display: block; padding: var(--space-3) var(--space-4); margin: 0; background: none; border-radius: var(--r-2); }
+.ds-247420 .chat-msg-flat.them { background: color-mix(in oklab, var(--fg) 3%, transparent); }
+.ds-247420 .chat-msg-flat.you { background: none; }
+.ds-247420 .chat-msg-flat .chat-stack { max-width: var(--measure); width: 100%; margin: 0; align-items: stretch; }
+.ds-247420 .chat-msg-flat.you .chat-stack { align-items: stretch; }
+.ds-247420 .chat-role { font-size: var(--fs-tiny); font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: var(--fg-3); margin-bottom: var(--space-1); }
+.ds-247420 .chat-msg-flat.you .chat-role { color: var(--accent); }
+.ds-247420 .chat-msg-flat .chat-bubble { background: none; border: none; border-radius: 0; padding: 0; max-width: 100%; box-shadow: none; transform: none; }
+.ds-247420 .chat-msg-flat.you .chat-bubble { background: none; color: inherit; }
+.ds-247420 .chat-msg-flat:hover { background: color-mix(in oklab, var(--fg) 3%, transparent); }
+.ds-247420 .chat-msg-flat.you:hover { background: color-mix(in oklab, var(--fg) 2%, transparent); }
+.ds-247420 .chat-msg-flat:hover .chat-bubble { transform: none; box-shadow: none; background: none; }
+.ds-247420 .chat-msg-flat .chat-avatar { display: none; }
+
+/* Tool-call card: a bordered, status-toned, scannable card (claude.ai/code),
+   not the raw mascot-tinted details dump. The node keeps the .chat-bubble
+   class, so these rules de-frame it and restyle. Placed after the flat-bubble
+   reset so they win on equal specificity. */
+.ds-247420 .chat-msg .chat-tool {
+  display: block; max-width: 100%; padding: 0; margin: var(--space-1) 0;
+  background: var(--bg); color: var(--fg);
+  border: var(--bw-hair) solid var(--rule); border-radius: var(--r-2);
+  box-shadow: none; overflow: hidden;
+}
+.ds-247420 .chat-msg .chat-tool[open] { background: var(--bg); }
+.ds-247420 .chat-msg .chat-tool .chat-tool-head {
+  display: flex; align-items: center; gap: var(--space-2);
+  padding: var(--space-2) var(--space-3); cursor: pointer;
+  font-size: var(--fs-sm); list-style: none;
+}
+.ds-247420 .chat-msg .chat-tool .chat-tool-head::-webkit-details-marker { display: none; }
+.ds-247420 .chat-msg .chat-tool .chat-tool-head:hover { background: var(--bg-2); }
+.ds-247420 .chat-tool-icon { display: inline-flex; color: var(--fg-3); }
+.ds-247420 .chat-tool-name { font-family: var(--ff-mono); font-weight: 600; color: var(--fg); }
+.ds-247420 .chat-tool-label { color: var(--fg-3); font-size: var(--fs-tiny); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
+.ds-247420 .chat-tool-status {
+  margin-left: auto; flex: 0 0 auto;
+  font-size: var(--fs-micro); font-weight: 700; text-transform: uppercase; letter-spacing: .04em;
+  color: var(--fg-3);
+  padding: 2px var(--space-2); border-radius: var(--r-pill);
+  background: color-mix(in oklab, var(--fg) 6%, transparent);
+}
+.ds-247420 .chat-msg .chat-tool.tool-running .chat-tool-status { color: var(--accent); background: color-mix(in oklab, var(--accent) 12%, transparent); }
+.ds-247420 .chat-msg .chat-tool.tool-error .chat-tool-status { color: var(--flame); background: color-mix(in oklab, var(--flame) 12%, transparent); }
+.ds-247420 .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); }
+.ds-247420 .chat-tool-section { display: flex; flex-direction: column; gap: var(--space-1); }
+.ds-247420 .chat-tool-section-label { font-size: var(--fs-micro); font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: var(--fg-3); }
+.ds-247420 .chat-tool-pre { margin: 0; padding: var(--space-2); background: var(--bg-2); border-radius: var(--r-1); font-family: var(--ff-mono); font-size: var(--fs-tiny); line-height: 1.45; overflow-x: auto; max-height: 320px; overflow-y: auto; }
+.ds-247420 .chat-tool-pre.is-error { color: var(--flame); }
+.ds-247420 .chat-tool-pre.chat-tool-empty { color: var(--fg-3); }
+
+/* Fenced-code language tab on every rendered-markdown block (not just the
+   structured CodeNode). injectCodeCopy reads the language- class. */
+.ds-247420 .chat-code-block { position: relative; }
+.ds-247420 .chat-code-lang {
+  position: absolute; top: 0; left: 0; z-index: 2;
+  padding: 2px var(--space-2); border-bottom-right-radius: var(--r-1);
+  font-family: var(--ff-mono); font-size: var(--fs-micro); text-transform: uppercase; letter-spacing: .04em;
+  color: var(--fg-3); background: color-mix(in oklab, var(--fg) 6%, transparent);
+  pointer-events: none;
+}
+.ds-247420 .chat-code-block pre { padding-top: calc(var(--space-3) + 4px); }
+
+/* Motion + microinteraction polish (all reduced-motion guarded). */
+.ds-247420 .ds-session-row { transition: background var(--dur-snap) var(--ease), box-shadow var(--dur-snap) var(--ease); }
+@media (prefers-reduced-motion: no-preference) {
+  .ds-247420 .agentchat-thread { scroll-behavior: smooth; }
+  .ds-247420 .ds-alert { animation: ds-alert-in var(--dur-base) var(--ease); }
+}
+@keyframes ds-alert-in { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: none; } }
+.ds-247420 .chat-code-copy { transition: opacity var(--dur-snap, .12s) var(--ease, ease), color var(--dur-snap) var(--ease), border-color var(--dur-snap) var(--ease), background var(--dur-snap) var(--ease); }
+.ds-247420 .chat-msg-action { transition: background var(--dur-snap) var(--ease), color var(--dur-snap) var(--ease); }
+.ds-247420 .agentchat-install-copy { transition: background var(--dur-snap) var(--ease), color var(--dur-snap) var(--ease); }
+@media (prefers-reduced-motion: no-preference) {
+  .ds-247420 .btn.is-armed, .ds-247420 .btn-primary.is-armed { animation: ds-arm-pulse var(--dur-slow) var(--ease); }
+}
+@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-247420 .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); }
+@media (prefers-reduced-motion: no-preference) {
+  .ds-247420 .ds-dash-card.is-new { animation: ds-card-in var(--dur-slow) var(--ease); }
+}
+@keyframes ds-card-in { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
+
+/* Live command-center: status-bucket groups + header breakdown + heartbeat. */
+.ds-247420 .ds-dash-group { display: flex; flex-direction: column; gap: var(--space-2); }
+.ds-247420 .ds-dash-group-label { font-size: var(--fs-micro); font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: var(--fg-3); padding: 0 var(--space-1); }
+.ds-247420 .ds-dash-breakdown { display: flex; align-items: center; gap: var(--space-1); font-size: var(--fs-sm); color: var(--fg-2); }
+.ds-247420 .ds-dash-breakdown .seg.is-running { color: var(--green); font-weight: 600; }
+.ds-247420 .ds-dash-breakdown .seg.is-error { color: var(--flame); font-weight: 600; }
+.ds-247420 .ds-dash-breakdown .seg.is-idle { color: var(--amber, #d9a93a); }
+.ds-247420 .ds-dash-stream-disc { display: inline-flex; align-items: center; gap: var(--space-1); }
+.ds-247420 .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-247420 .ds-dash-selectall:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
+.ds-247420 .ds-dash-clear { background: none; border: none; color: var(--fg-3); cursor: pointer; font-size: var(--fs-tiny); text-decoration: underline dotted; padding: var(--space-1); }
+
+/* Conversation-rail loading skeleton (cold ccsniff walk). */
+.ds-247420 .ds-session-row-skeleton { display: flex; flex-direction: column; gap: 6px; padding: var(--space-2) var(--space-3); }
+.ds-247420 .ds-session-row-skeleton .ds-skel { background: var(--bg-3); border-radius: var(--r-1); }
+.ds-247420 .ds-session-row-skeleton .ds-skel-title { height: 12px; width: 70%; }
+.ds-247420 .ds-session-row-skeleton .ds-skel-meta { height: 9px; width: 45%; }
+@media (prefers-reduced-motion: no-preference) {
+  .ds-247420 .ds-session-row-skeleton .ds-skel { animation: ds-skel-shimmer 1.3s ease-in-out infinite; background: linear-gradient(90deg, var(--bg-3) 0%, var(--bg-2) 50%, var(--bg-3) 100%); background-size: 200% 100%; }
+}
+@keyframes ds-skel-shimmer { 0% { background-position: 200% 0; } 100% { background-position: -200% 0; } }
+
+/* File code preview: paint Prism tokens (the bundle scoped them to the chat
+   block only) + an optional non-selectable line-number gutter. */
+.ds-247420 .ds-preview-code code { color: var(--fg); }
+.ds-247420 .ds-preview-code .token.comment, .ds-247420 .ds-preview-code .token.prolog, .ds-247420 .ds-preview-code .token.doctype, .ds-247420 .ds-preview-code .token.cdata { color: var(--fg-3); }
+.ds-247420 .ds-preview-code .token.punctuation { color: var(--fg-2); }
+.ds-247420 .ds-preview-code .token.property, .ds-247420 .ds-preview-code .token.tag, .ds-247420 .ds-preview-code .token.boolean, .ds-247420 .ds-preview-code .token.number, .ds-247420 .ds-preview-code .token.constant, .ds-247420 .ds-preview-code .token.symbol { color: var(--purple-2, #7F18A4); }
+.ds-247420 .ds-preview-code .token.selector, .ds-247420 .ds-preview-code .token.attr-name, .ds-247420 .ds-preview-code .token.string, .ds-247420 .ds-preview-code .token.char, .ds-247420 .ds-preview-code .token.builtin { color: var(--green-2, #3A9A34); }
+.ds-247420 .ds-preview-code .token.atrule, .ds-247420 .ds-preview-code .token.attr-value, .ds-247420 .ds-preview-code .token.keyword { color: var(--sky, #3A6EFF); }
+.ds-247420 .ds-preview-code .token.function, .ds-247420 .ds-preview-code .token.class-name { color: var(--flame); }
+.ds-247420 .ds-preview-code.has-gutter { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 0 var(--space-2); }
+.ds-247420 .ds-preview-code.has-gutter code { display: block; min-width: 0; overflow-x: auto; }
+.ds-247420 .ds-preview-gutter { user-select: none; text-align: right; padding: 0 var(--space-2) 0 0; color: var(--fg-3); border-right: var(--bw-hair) solid var(--rule); font-family: var(--ff-mono); white-space: pre; line-height: inherit; }
+
+/* Image preview: fit/actual control + alpha checkerboard. */
+.ds-247420 .ds-preview-media-controls { display: flex; gap: var(--space-2); padding: var(--space-2); justify-content: center; }
+.ds-247420 .ds-preview-media-alpha {
+  background-image: linear-gradient(45deg, var(--bg-3) 25%, transparent 25%), linear-gradient(-45deg, var(--bg-3) 25%, transparent 25%), linear-gradient(45deg, transparent 75%, var(--bg-3) 75%), linear-gradient(-45deg, transparent 75%, var(--bg-3) 75%);
+  background-size: 16px 16px; background-position: 0 0, 0 8px, 8px -8px, -8px 0;
+}
+.ds-247420 .ds-preview-media.is-actual { max-width: none; max-height: none; }
+
 /* editor-primitives.css */
 /* editor-primitives.css — chrome for in-engine editors, inspectors, IDEs,
    debug HUDs. All rules under .ds-247420 scope (build prefixes). Tokens