@artooi/ag-ui-web-component 0.18.0 → 0.19.0

package/dist/ui/confirmation_card.d.ts

@@ -27,8 +27,14 @@ export interface ConfirmationOptions {
  * Unlike a modal overlay, the card lives in the transcript right where the
  * action is — it reads naturally after the assistant's explanation and never
  * steals focus from the page. Resolves ``true`` on confirm, ``false`` on
- * cancel. The card stays in the transcript as a resolved record (buttons
- * disabled, `data-resolved` set) rather than vanishing.
+ * cancel.
+ *
+ * **Answering it removes it.** A prompt and a record are two different objects:
+ * the prompt owns the user's attention until it is answered, and the record of
+ * what was decided belongs in the transcript, in order, scrolling with
+ * everything else. The tool card this gates is that record — it settles to
+ * `done` or `declined` and carries the decision. Leaving the spent form in
+ * place made an answered question read as outstanding.
  */
 export declare function requestConfirmation(host: Node & ParentNode, request: ConfirmationRequest, options?: ConfirmationOptions): Promise<boolean>;
 //# sourceMappingURL=confirmation_card.d.ts.map

package/dist/ui/confirmation_card.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"confirmation_card.d.ts","sourceRoot":"","sources":["../../src/ui/confirmation_card.ts"],"names":[],"mappings":"AAAA,OAAO,EAAsB,KAAK,SAAS,EAAE,MAAM,iBAAiB,CAAC;AAErE,kDAAkD;AAClD,MAAM,WAAW,mBAAmB;IAClC,QAAQ,EAAE,MAAM,CAAC;IACjB,IAAI,EAAE,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,CAAC;IAC9B;;;OAGG;IACH,OAAO,CAAC,EAAE,MAAM,CAAC;CAClB;AAYD,+CAA+C;AAC/C,MAAM,WAAW,mBAAmB;IAClC;;;;OAIG;IACH,MAAM,CAAC,EAAE,WAAW,CAAC;IACrB,6EAA6E;IAC7E,OAAO,CAAC,EAAE,SAAS,CAAC;CACrB;AAED;;;;;;;;;GASG;AACH,wBAAgB,mBAAmB,CACjC,IAAI,EAAE,IAAI,GAAG,UAAU,EACvB,OAAO,EAAE,mBAAmB,EAC5B,OAAO,GAAE,mBAAwB,GAChC,OAAO,CAAC,OAAO,CAAC,CAqDlB"}
+{"version":3,"file":"confirmation_card.d.ts","sourceRoot":"","sources":["../../src/ui/confirmation_card.ts"],"names":[],"mappings":"AAAA,OAAO,EAAsB,KAAK,SAAS,EAAE,MAAM,iBAAiB,CAAC;AAErE,kDAAkD;AAClD,MAAM,WAAW,mBAAmB;IAClC,QAAQ,EAAE,MAAM,CAAC;IACjB,IAAI,EAAE,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,CAAC;IAC9B;;;OAGG;IACH,OAAO,CAAC,EAAE,MAAM,CAAC;CAClB;AAYD,+CAA+C;AAC/C,MAAM,WAAW,mBAAmB;IAClC;;;;OAIG;IACH,MAAM,CAAC,EAAE,WAAW,CAAC;IACrB,6EAA6E;IAC7E,OAAO,CAAC,EAAE,SAAS,CAAC;CACrB;AAED;;;;;;;;;;;;;;;GAeG;AACH,wBAAgB,mBAAmB,CACjC,IAAI,EAAE,IAAI,GAAG,UAAU,EACvB,OAAO,EAAE,mBAAmB,EAC5B,OAAO,GAAE,mBAAwB,GAChC,OAAO,CAAC,OAAO,CAAC,CAyDlB"}

package/dist/ui/styles.d.ts

@@ -1,2 +1,2 @@
-export declare const STYLES = "\n:host {\n  /* Colors */\n  --ag-ui-bg: #ffffff;\n  --ag-ui-fg: #1a1a2e;\n  --ag-ui-accent: #4f46e5;\n  --ag-ui-user-bg: #4f46e5;\n  --ag-ui-user-fg: #ffffff;\n  --ag-ui-assistant-bg: #f1f1f6;\n  --ag-ui-hover: #e7e7ee;\n  --ag-ui-input-bg: var(--ag-ui-bg);\n  --ag-ui-tool-bg: var(--ag-ui-assistant-bg);\n  --ag-ui-tool-fg: var(--ag-ui-accent);\n  --ag-ui-header-bg: var(--ag-ui-accent);\n  --ag-ui-header-fg: #ffffff;\n  --ag-ui-border: #e2e2ec;\n  --ag-ui-radius: 12px;\n\n  /* Status accents for tool-call cards. */\n  --ag-ui-success: #15803d;\n  --ag-ui-danger: #b91c1c;\n  --ag-ui-muted: #6b7280;\n\n  /* Tool-call status icon glyphs (override to re-theme) + spinner speed.\n     The pending state is the animated ring; the settled states use these. */\n  --ag-ui-tool-icon-done: \"\u2713\";\n  --ag-ui-tool-icon-error: \"\u2715\";\n  --ag-ui-tool-icon-declined: \"\u2298\";\n  --ag-ui-tool-spin-duration: 0.7s;\n\n  /* Answer well (opt-in via data-answer-well) \u2014 boxes a whole assistant turn. */\n  --ag-ui-well-bg: transparent;\n  --ag-ui-well-border: var(--ag-ui-border);\n\n  /* Surface \u2014 set --ag-ui-shadow: none for a flush, embedded panel. */\n  --ag-ui-shadow: 0 12px 32px rgba(20, 20, 50, 0.18);\n  --ag-ui-font: inherit;\n  --ag-ui-font-size: 14px;\n  --ag-ui-code-font: ui-monospace, \"SF Mono\", Menlo, monospace;\n\n  /* Spacing \u2014 the density preset overrides these. */\n  --ag-ui-space: 10px;\n  --ag-ui-pad: 16px;\n  --ag-ui-msg-pad: 8px 12px;\n  --ag-ui-msg-radius: 14px;\n\n  /* Layout \u2014 override from outside to dock the widget anywhere.\n     Set --ag-ui-position: static (and place this element in your own\n     grid/flex layout) to embed it in the page flow instead of floating. */\n  --ag-ui-position: fixed;\n  --ag-ui-z-index: 2147483000;\n  --ag-ui-width: 380px;\n  --ag-ui-height: 560px;\n  --ag-ui-inset: auto 24px 24px auto;\n  --ag-ui-max-width: calc(100vw - 48px);\n  --ag-ui-max-height: calc(100vh - 48px);\n  /* Reading-column width for placement=\"page\" (full-bleed, centred content). */\n  --ag-ui-content-max-width: 820px;\n\n  position: var(--ag-ui-position);\n  inset: var(--ag-ui-inset);\n  z-index: var(--ag-ui-z-index);\n  width: var(--ag-ui-width);\n  max-width: var(--ag-ui-max-width);\n  height: var(--ag-ui-height);\n  max-height: var(--ag-ui-max-height);\n  display: flex;\n  font-family: var(--ag-ui-font);\n  font-size: var(--ag-ui-font-size);\n  color: var(--ag-ui-fg);\n}\n\n/* \u2500\u2500 Themes \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\n   Themes only re-set the colour variables; layout/spacing are unaffected.\n   theme=\"auto\" follows the OS via prefers-color-scheme. */\n:host([theme=\"dark\"]) {\n  --ag-ui-bg: #15151f;\n  --ag-ui-fg: #e8e8f2;\n  --ag-ui-assistant-bg: #25253a;\n  --ag-ui-hover: #303049;\n  --ag-ui-header-bg: #1f1f30;\n  --ag-ui-header-fg: #e8e8f2;\n  --ag-ui-border: #33334a;\n  --ag-ui-muted: #9aa0b4;\n  --ag-ui-shadow: 0 12px 32px rgba(0, 0, 0, 0.5);\n}\n\n@media (prefers-color-scheme: dark) {\n  :host([theme=\"auto\"]) {\n    --ag-ui-bg: #15151f;\n    --ag-ui-fg: #e8e8f2;\n    --ag-ui-assistant-bg: #25253a;\n    --ag-ui-hover: #303049;\n    --ag-ui-header-bg: #1f1f30;\n    --ag-ui-header-fg: #e8e8f2;\n    --ag-ui-border: #33334a;\n    --ag-ui-muted: #9aa0b4;\n    --ag-ui-shadow: 0 12px 32px rgba(0, 0, 0, 0.5);\n  }\n}\n\n/* A terminal-flavoured \"code\" theme: dark, monospace, green accent. */\n:host([theme=\"code\"]) {\n  --ag-ui-bg: #0d1117;\n  --ag-ui-fg: #c9d1d9;\n  --ag-ui-accent: #3fb950;\n  --ag-ui-user-bg: #238636;\n  --ag-ui-assistant-bg: #161b22;\n  --ag-ui-hover: #21262d;\n  --ag-ui-header-bg: #010409;\n  --ag-ui-header-fg: #c9d1d9;\n  --ag-ui-border: #30363d;\n  --ag-ui-muted: #8b949e;\n  --ag-ui-font: var(--ag-ui-code-font);\n  --ag-ui-shadow: 0 12px 32px rgba(0, 0, 0, 0.6);\n}\n\n/* \u2500\u2500 Density \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */\n:host([density=\"compact\"]) {\n  --ag-ui-font-size: 13px;\n  --ag-ui-space: 6px;\n  --ag-ui-pad: 10px;\n  --ag-ui-msg-pad: 5px 9px;\n  --ag-ui-msg-radius: 10px;\n}\n\n/* \u2500\u2500 Placement presets \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */\n:host([placement=\"bottom-left\"]) {\n  --ag-ui-inset: auto auto 24px 24px;\n}\n\n:host([placement=\"side\"]) {\n  --ag-ui-inset: 0 0 0 auto;\n  --ag-ui-width: 420px;\n  --ag-ui-height: 100vh;\n  --ag-ui-max-height: 100vh;\n  --ag-ui-radius: 0;\n}\n\n:host([placement=\"full\"]) {\n  --ag-ui-inset: 0;\n  --ag-ui-width: 100vw;\n  --ag-ui-height: 100vh;\n  --ag-ui-max-width: 100vw;\n  --ag-ui-max-height: 100vh;\n  --ag-ui-radius: 0;\n}\n\n/* Page: full-bleed background with a centred reading column. Unlike\n   \"full\" (edge-to-edge, left-aligned messages) the content sits in a column\n   capped at --ag-ui-content-max-width. The column is produced by symmetric auto\n   padding on the scroll area + composer (no per-row wrapper), so user pills\n   still right-align and the assistant well spans the column. */\n:host([placement=\"page\"]) {\n  --ag-ui-inset: 0;\n  --ag-ui-width: 100vw;\n  --ag-ui-height: 100vh;\n  --ag-ui-max-width: 100vw;\n  --ag-ui-max-height: 100vh;\n  --ag-ui-radius: 0;\n}\n\n:host([placement=\"page\"]) .messages {\n  padding-inline: max(var(--ag-ui-pad), calc((100% - var(--ag-ui-content-max-width)) / 2));\n}\n\n:host([placement=\"page\"]) .input-row {\n  padding-inline: max(12px, calc((100% - var(--ag-ui-content-max-width)) / 2));\n}\n\n/* The rows between the message list and the composer (skill chips, the\n   /-command palette, the missing-placeholder hint, the upload tray) line up\n   with the column too \u2014 chips are padding-based, the palette/hint/tray are\n   margin-based, so each gets its own inline axis nudged by the same gutter. */\n:host([placement=\"page\"]) .skill-chips,\n:host([placement=\"page\"]) .attachment-tray {\n  padding-inline: max(12px, calc((100% - var(--ag-ui-content-max-width)) / 2));\n}\n\n:host([placement=\"page\"]) .skill-palette,\n:host([placement=\"page\"]) .skill-hint {\n  margin-inline: max(12px, calc((100% - var(--ag-ui-content-max-width)) / 2));\n}\n\n/* In the reading column the assistant well uses the full width; the user\n   message stays a right-aligned pill (its default align-self + max-width). */\n:host([placement=\"page\"]) .message--assistant {\n  max-width: 100%;\n}\n\n/* Sidebar: a full-height docked panel that slides open/closed and\n   collapses to a slim icon rail (not the floating launcher). Docked right by\n   default; data-side=\"left\" docks it left. Overlay by default \u2014 set\n   --ag-ui-position: static (and place this element in your own layout) for a\n   host-managed push instead. */\n:host([placement=\"sidebar\"]) {\n  --ag-ui-inset: 0 0 0 auto;\n  --ag-ui-width: 420px;\n  --ag-ui-height: 100vh;\n  --ag-ui-max-height: 100vh;\n  --ag-ui-radius: 0;\n  --ag-ui-rail-width: 52px;\n  transition: width 0.28s ease;\n}\n\n:host([placement=\"sidebar\"][data-side=\"left\"]) {\n  --ag-ui-inset: 0 auto 0 0;\n}\n\n:host([placement=\"sidebar\"]) .chat {\n  transition: transform 0.28s ease;\n}\n\n/* Collapsed sidebar: shrink the host to the rail width, hide the panel, and\n   reveal the rail. Higher specificity than the generic collapse rules, so it\n   wins regardless of source order. */\n:host([placement=\"sidebar\"][collapsed]) {\n  width: var(--ag-ui-rail-width);\n  height: 100vh;\n  max-height: 100vh;\n  bottom: 0;\n}\n\n:host([placement=\"sidebar\"][collapsed]) .chat {\n  display: none;\n}\n\n/* The rail is a sibling of the panel (so it survives the panel being hidden);\n   shown only for a collapsed sidebar. */\n.rail {\n  display: none;\n  border: none;\n  font: inherit;\n}\n\n:host([placement=\"sidebar\"][collapsed]) .rail {\n  display: flex;\n  position: absolute;\n  inset: 0;\n  align-items: flex-start;\n  justify-content: center;\n  padding-top: 16px;\n  border: 1px solid var(--ag-ui-border);\n  background: var(--ag-ui-header-bg);\n  color: var(--ag-ui-header-fg);\n  cursor: pointer;\n}\n\n@media (prefers-reduced-motion: reduce) {\n  :host([placement=\"sidebar\"]),\n  :host([placement=\"sidebar\"]) .chat {\n    transition: none;\n  }\n}\n\n/* Embedded: drop the floating chrome and the high z-index stacking context so\n   the widget lives in the host's own layout (fixes overlay/z-index clashes). */\n:host([placement=\"embedded\"]) {\n  --ag-ui-position: static;\n  --ag-ui-width: 100%;\n  --ag-ui-height: 100%;\n  --ag-ui-max-width: 100%;\n  --ag-ui-max-height: 100%;\n  --ag-ui-shadow: none;\n  --ag-ui-z-index: auto;\n}\n\n.chat {\n  position: relative;\n  display: flex;\n  flex-direction: column;\n  flex: 1;\n  min-height: 0;\n  background: var(--ag-ui-bg);\n  border: 1px solid var(--ag-ui-border);\n  border-radius: var(--ag-ui-radius);\n  box-shadow: var(--ag-ui-shadow);\n  overflow: hidden;\n}\n\n.header {\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  gap: 8px;\n  padding: 10px 14px;\n  border-bottom: 1px solid var(--ag-ui-border);\n  background: var(--ag-ui-header-bg);\n  color: var(--ag-ui-header-fg);\n}\n\n.header-title {\n  flex: 1;\n  min-width: 0;\n  font-weight: 600;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n}\n\n/* Header / launcher icon holder: a slot, with a data-icon-url <img>\n   fallback, sized via --ag-ui-icon-size. */\n.icon-holder {\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  flex: none;\n  width: var(--ag-ui-icon-size, 22px);\n  height: var(--ag-ui-icon-size, 22px);\n  line-height: 1;\n}\n\n.icon-img {\n  width: 100%;\n  height: 100%;\n  object-fit: contain;\n  border-radius: var(--ag-ui-icon-radius, 4px);\n}\n\n.header-controls {\n  display: flex;\n  gap: 2px;\n  flex: none;\n}\n\n.header-btn {\n  border: none;\n  background: transparent;\n  color: inherit;\n  font: inherit;\n  line-height: 1;\n  padding: 4px 7px;\n  border-radius: 6px;\n  cursor: pointer;\n  opacity: 0.85;\n}\n\n.header-btn:hover {\n  opacity: 1;\n  background: rgba(255, 255, 255, 0.18);\n}\n\n/* Collapsed: keep just the header bar \u2014 hide the whole body, and let the host\n   shrink to the header. (A host can also fully hide the element itself.) */\n:host([collapsed]) {\n  height: auto;\n  max-height: none;\n}\n\n:host([collapsed]) .messages,\n:host([collapsed]) .input-row,\n:host([collapsed]) .skill-chips,\n:host([collapsed]) .skill-palette,\n:host([collapsed]) .skill-hint {\n  display: none;\n}\n\n/* Edge-docked placements pin top *and* bottom, which would otherwise keep the\n   panel full-height when collapsed; unpin the bottom so it shrinks to the\n   header. (Floating/bottom-left pin only the bottom, so they already shrink.) */\n:host([collapsed][placement=\"side\"]),\n:host([collapsed][placement=\"full\"]) {\n  bottom: auto;\n}\n\n.messages {\n  flex: 1;\n  overflow-y: auto;\n  padding: var(--ag-ui-pad);\n  display: flex;\n  flex-direction: column;\n  gap: var(--ag-ui-space);\n}\n\n/* Empty-state region (slot): centred while it's the only thing in the\n   list, hidden as soon as a message, card, or pending indicator renders. */\n.empty {\n  margin: auto;\n  text-align: center;\n  color: var(--ag-ui-muted);\n}\n\n.empty[hidden] {\n  display: none;\n}\n\n/* \u2500\u2500 Answer group / well \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\n   One .answer per assistant turn wraps the streamed text, its tool cards,\n   and the pending indicator so a whole answer reads (and can be boxed) as one\n   unit. A flex column on the message-list gap, stretched to the list width so\n   its children keep their own left/right alignment. data-answer-well opts into\n   the bordered \"well\"; without it the layout is today's flat stack. */\n.answer {\n  display: flex;\n  flex-direction: column;\n  gap: var(--ag-ui-space);\n  align-self: stretch;\n  min-width: 0;\n}\n\n:host([data-answer-well]) .answer {\n  padding: var(--ag-ui-pad);\n  background: var(--ag-ui-well-bg);\n  border: 1px solid var(--ag-ui-well-border);\n  border-radius: var(--ag-ui-radius);\n}\n\n.message {\n  max-width: 80%;\n  padding: var(--ag-ui-msg-pad);\n  border-radius: var(--ag-ui-msg-radius);\n  line-height: 1.4;\n  white-space: pre-wrap;\n  word-break: break-word;\n}\n\n/* \u2500\u2500 Incoming-text animations (data-text-animation) \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */\n/* .message--restored (rehydrated history) is excluded: entrance animations are\n   for freshly-arriving messages, not the whole transcript replaying on reload.\n   Word mode is excluded implicitly \u2014 restored bubbles aren't wrapped. */\n:host([data-text-animation=\"fade\"]) .message--assistant:not(.message--restored) {\n  animation: ag-ui-msg-fade 0.25s ease both;\n}\n\n@keyframes ag-ui-msg-fade {\n  from { opacity: 0; transform: translateY(4px); }\n  to { opacity: 1; transform: none; }\n}\n\n.message--assistant .word {\n  animation: ag-ui-word-in 0.3s ease both;\n  animation-delay: calc(var(--ag-ui-word-index, 0) * 35ms);\n}\n\n@keyframes ag-ui-word-in {\n  from { opacity: 0; }\n  to { opacity: 1; }\n}\n\n@media (prefers-reduced-motion: reduce) {\n  :host([data-text-animation=\"fade\"]) .message--assistant,\n  .message--assistant .word {\n    animation: none;\n  }\n}\n\n.message--user {\n  align-self: flex-end;\n  background: var(--ag-ui-user-bg);\n  color: var(--ag-ui-user-fg);\n  border-bottom-right-radius: 4px;\n}\n\n.message--assistant {\n  align-self: flex-start;\n  background: var(--ag-ui-assistant-bg);\n  border-bottom-left-radius: 4px;\n  /* Assistant bubbles hold rendered markdown/HTML, so collapse the source\n     whitespace the renderer leaves between block tags. */\n  white-space: normal;\n}\n\n/* Rendered-markdown elements inside an assistant bubble. */\n.message--assistant > :first-child {\n  margin-top: 0;\n}\n\n.message--assistant > :last-child {\n  margin-bottom: 0;\n}\n\n.message--assistant p,\n.message--assistant ul,\n.message--assistant ol,\n.message--assistant blockquote,\n.message--assistant pre {\n  margin: 0.5em 0;\n}\n\n.message--assistant ul,\n.message--assistant ol {\n  padding-left: 1.3em;\n}\n\n.message--assistant a {\n  color: var(--ag-ui-accent);\n  text-decoration: underline;\n}\n\n.message--assistant code {\n  font-family: ui-monospace, \"SF Mono\", Menlo, monospace;\n  font-size: 0.92em;\n  background: rgba(127, 127, 127, 0.16);\n  padding: 1px 4px;\n  border-radius: 4px;\n}\n\n.message--assistant pre {\n  padding: 8px 10px;\n  overflow: auto;\n  background: var(--ag-ui-bg);\n  border: 1px solid var(--ag-ui-border);\n  border-radius: 6px;\n}\n\n.message--assistant pre code {\n  background: none;\n  padding: 0;\n}\n\n/* The copy button sits inside the block, so it scrolls with wide code rather\n   than floating over the bubble. Positioning is on the pre; the button only\n   appears once one has been attached. */\n.message--assistant pre.has-copy {\n  position: relative;\n}\n\n.code-copy {\n  position: absolute;\n  top: 4px;\n  right: 4px;\n  padding: 2px 8px;\n  font: inherit;\n  font-size: 0.75em;\n  line-height: 1.6;\n  color: var(--ag-ui-muted);\n  background: var(--ag-ui-surface);\n  border: 1px solid var(--ag-ui-border);\n  border-radius: 4px;\n  cursor: pointer;\n  opacity: 0;\n  transition: opacity 0.12s ease;\n}\n\n/* Revealed on hover or keyboard focus. Focus matters as much as hover here:\n   hidden-until-hover is invisible to a keyboard user otherwise. */\n.message--assistant pre.has-copy:hover .code-copy,\n.code-copy:focus-visible {\n  opacity: 1;\n}\n\n.code-copy:hover {\n  color: var(--ag-ui-text);\n  background: var(--ag-ui-hover);\n}\n\n.code-copy[data-state=\"copied\"] {\n  opacity: 1;\n  color: var(--ag-ui-text);\n}\n\n.code-copy[data-state=\"failed\"] {\n  opacity: 1;\n  color: var(--ag-ui-danger, var(--ag-ui-text));\n}\n\n.message--assistant blockquote {\n  padding-left: 10px;\n  border-left: 3px solid var(--ag-ui-border);\n  color: var(--ag-ui-muted);\n}\n\n/* Markdown tables. table/thead/tbody/tr/th/td are all in\n   the sanitizer's ALLOWED_TAGS, so an agent emitting one renders it \u2014 and until\n   now rendered it entirely unstyled, overflowing the bubble. A wide table\n   scrolls inside its own box rather than stretching the message: the bubble is\n   width-constrained, so without this the columns either crush or push the\n   layout sideways. */\n.message--assistant table {\n  display: block;\n  width: fit-content;\n  max-width: 100%;\n  overflow-x: auto;\n  border-collapse: collapse;\n  font-size: 0.95em;\n}\n\n.message--assistant th,\n.message--assistant td {\n  padding: 6px 10px;\n  border: 1px solid var(--ag-ui-border);\n  text-align: left;\n  vertical-align: top;\n}\n\n.message--assistant th {\n  background: var(--ag-ui-hover);\n  font-weight: 600;\n}\n\n.pending {\n  align-self: flex-start;\n  display: inline-flex;\n  gap: 4px;\n  align-items: center;\n  padding: 12px 14px;\n  background: var(--ag-ui-assistant-bg);\n  border-radius: 14px;\n  border-bottom-left-radius: 4px;\n}\n\n.pending-dot {\n  width: 6px;\n  height: 6px;\n  border-radius: 50%;\n  background: var(--ag-ui-muted);\n  animation: ag-ui-pending 1.2s infinite ease-in-out both;\n}\n\n.pending-dot:nth-child(2) {\n  animation-delay: 0.16s;\n}\n\n.pending-dot:nth-child(3) {\n  animation-delay: 0.32s;\n}\n\n@keyframes ag-ui-pending {\n  0%, 80%, 100% { opacity: 0.3; transform: translateY(0); }\n  40% { opacity: 1; transform: translateY(-3px); }\n}\n\n@media (prefers-reduced-motion: reduce) {\n  .pending-dot {\n    animation: none;\n    opacity: 0.6;\n  }\n}\n\n/* \u2500\u2500 Thoughts region \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\n   A muted, collapsible chain-of-thought at the top of the answer group: open\n   while the model reasons, folded once the answer text starts. */\n.thoughts {\n  align-self: stretch;\n  display: flex;\n  flex-direction: column;\n  gap: 4px;\n  font-size: 12px;\n  color: var(--ag-ui-muted);\n}\n\n.thoughts-toggle {\n  align-self: flex-start;\n  border: none;\n  padding: 0;\n  background: none;\n  font: inherit;\n  font-size: 12px;\n  font-weight: 600;\n  color: var(--ag-ui-muted);\n  cursor: pointer;\n}\n\n.thoughts-toggle::before {\n  content: \"\u25BE \";\n}\n\n.thoughts-toggle[aria-expanded=\"false\"]::before {\n  content: \"\u25B8 \";\n}\n\n/* A gentle pulse on the label while reasoning is still streaming. */\n.thoughts[data-streaming] .thoughts-label {\n  animation: ag-ui-thoughts-pulse 1.4s ease-in-out infinite;\n}\n\n@keyframes ag-ui-thoughts-pulse {\n  0%, 100% { opacity: 0.55; }\n  50% { opacity: 1; }\n}\n\n.thoughts-body {\n  margin: 0;\n  padding: 4px 0 4px 10px;\n  border-left: 2px solid var(--ag-ui-border);\n  max-height: 220px;\n  overflow: auto;\n  white-space: pre-wrap;\n  word-break: break-word;\n  font-family: inherit;\n}\n\n.thoughts-body[hidden] {\n  display: none;\n}\n\n@media (prefers-reduced-motion: reduce) {\n  .thoughts[data-streaming] .thoughts-label {\n    animation: none;\n  }\n}\n\n.tool-call {\n  align-self: flex-start;\n  max-width: 80%;\n  box-sizing: border-box;\n  display: flex;\n  flex-direction: column;\n  gap: 6px;\n  font-size: 12px;\n  font-family: ui-monospace, \"SF Mono\", Menlo, monospace;\n  padding: 8px 10px;\n  border-radius: 8px;\n  background: var(--ag-ui-tool-bg);\n  border: 1px solid var(--ag-ui-border);\n  color: var(--ag-ui-tool-fg);\n}\n\n.tool-call-head {\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  gap: 8px;\n}\n\n.tool-call-name {\n  flex: 1;\n  min-width: 0;\n  font-weight: 600;\n  word-break: break-word;\n}\n\n/* Leading status icon. Empty in the DOM \u2014 the glyph/spinner is drawn\n   here from the card's data-status, so it stays themeable. */\n.tool-call-icon {\n  flex: none;\n  box-sizing: border-box;\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  width: 14px;\n  height: 14px;\n  font-size: 12px;\n  line-height: 1;\n}\n\n/* Pending: a real spinning ring. Speed is tunable; reduced motion stops it. */\n.tool-call[data-status=\"pending\"] .tool-call-icon {\n  border: 2px solid var(--ag-ui-muted);\n  border-top-color: transparent;\n  border-radius: 50%;\n  animation: ag-ui-tool-spin var(--ag-ui-tool-spin-duration) linear infinite;\n}\n\n@keyframes ag-ui-tool-spin {\n  to { transform: rotate(360deg); }\n}\n\n/* Settled: a themeable glyph coloured by outcome. */\n.tool-call[data-status=\"done\"] .tool-call-icon::before {\n  content: var(--ag-ui-tool-icon-done);\n  color: var(--ag-ui-success);\n}\n\n.tool-call[data-status=\"error\"] .tool-call-icon::before {\n  content: var(--ag-ui-tool-icon-error);\n  color: var(--ag-ui-danger);\n}\n\n.tool-call[data-status=\"declined\"] .tool-call-icon::before {\n  content: var(--ag-ui-tool-icon-declined);\n  color: var(--ag-ui-muted);\n}\n\n@media (prefers-reduced-motion: reduce) {\n  .tool-call[data-status=\"pending\"] .tool-call-icon {\n    animation: none;\n  }\n}\n\n/* Inline display mode: the lightest card \u2014 drop the box chrome so the\n   status row reads as one line of the answer; the result toggle still expands\n   below it. */\n.tool-call[data-display=\"inline\"] {\n  max-width: 100%;\n  background: transparent;\n  border: none;\n  padding: 2px 0;\n  gap: 2px;\n}\n\n.tool-call-status {\n  flex: none;\n  padding: 1px 8px;\n  border-radius: 999px;\n  font-size: 11px;\n  font-weight: 600;\n  background: rgba(127, 127, 127, 0.16);\n  color: var(--ag-ui-muted);\n}\n\n.tool-call[data-status=\"done\"] .tool-call-status {\n  color: var(--ag-ui-success);\n}\n\n.tool-call[data-status=\"error\"] .tool-call-status {\n  color: var(--ag-ui-danger);\n}\n\n.tool-call[data-status=\"declined\"] .tool-call-status {\n  color: var(--ag-ui-muted);\n}\n\n.tool-call-args,\n.tool-call-result {\n  margin: 0;\n  padding: 6px 8px;\n  max-height: 160px;\n  overflow: auto;\n  background: var(--ag-ui-bg);\n  border: 1px solid var(--ag-ui-border);\n  border-radius: 6px;\n  white-space: pre-wrap;\n  word-break: break-word;\n  color: var(--ag-ui-fg);\n}\n\n.tool-call-toggle {\n  align-self: flex-start;\n  border: none;\n  padding: 0;\n  background: none;\n  font: inherit;\n  font-weight: 600;\n  color: var(--ag-ui-accent);\n  cursor: pointer;\n}\n\n.tool-call-toggle::before {\n  content: \"\u25B8 \";\n}\n\n.tool-call-toggle[aria-expanded=\"true\"]::before {\n  content: \"\u25BE \";\n}\n\n.input-row {\n  display: flex;\n  gap: 8px;\n  padding: 12px;\n  border-top: 1px solid var(--ag-ui-border);\n}\n\n.input {\n  flex: 1;\n  resize: none;\n  background: var(--ag-ui-input-bg);\n  border: 1px solid var(--ag-ui-border);\n  border-radius: 8px;\n  padding: 8px 10px;\n  font: inherit;\n  color: inherit;\n  outline: none;\n}\n\n.input:focus {\n  border-color: var(--ag-ui-accent);\n}\n\n.send {\n  border: none;\n  border-radius: 8px;\n  padding: 0 16px;\n  background: var(--ag-ui-accent);\n  color: #ffffff;\n  font: inherit;\n  font-weight: 600;\n  cursor: pointer;\n}\n\n.send:disabled {\n  opacity: 0.5;\n  cursor: default;\n}\n\n/* The composer button doubles as the Stop control while a run is in flight. */\n.send[data-state=\"running\"] {\n  background: var(--ag-ui-muted);\n}\n\n/* \u2500\u2500 File attachments \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */\n/* The \uD83D\uDCCE picker button sits left of the input; hidden until data-attachments-url. */\n.attach-btn {\n  border: 1px solid var(--ag-ui-border);\n  border-radius: 8px;\n  padding: 0 10px;\n  background: var(--ag-ui-input-bg);\n  color: inherit;\n  font: inherit;\n  cursor: pointer;\n}\n\n.attach-btn:hover {\n  border-color: var(--ag-ui-accent);\n}\n\n.attach-input {\n  display: none;\n}\n\n/* The \uD83C\uDFA4 mic button; shown only once #wireVoice mounts it. */\n.voice-slot {\n  display: contents;\n}\n\n.voice-btn {\n  border: 1px solid var(--ag-ui-border);\n  border-radius: 8px;\n  padding: 0 10px;\n  background: var(--ag-ui-input-bg);\n  color: inherit;\n  font: inherit;\n  cursor: pointer;\n}\n\n.voice-btn:hover {\n  border-color: var(--ag-ui-accent);\n}\n\n.voice-btn:disabled {\n  cursor: default;\n  opacity: 0.6;\n}\n\n/* Recording: a red tint + a gentle pulse so it's clearly \"live\". */\n.voice-btn[data-state=\"recording\"] {\n  border-color: var(--ag-ui-danger);\n  background: var(--ag-ui-danger);\n  color: #ffffff;\n  animation: ag-ui-voice-pulse 1.2s ease-in-out infinite;\n}\n\n@keyframes ag-ui-voice-pulse {\n  0%, 100% { opacity: 1; }\n  50% { opacity: 0.6; }\n}\n\n@media (prefers-reduced-motion: reduce) {\n  .voice-btn[data-state=\"recording\"] {\n    animation: none;\n  }\n}\n\n/* Pending-attachments tray, above the input row; collapses (hidden) when empty. */\n.attachment-slot {\n  display: contents;\n}\n\n.attachment-tray {\n  display: flex;\n  flex-wrap: wrap;\n  gap: 6px;\n  padding: 8px 12px 0;\n}\n\n.attachment-chips {\n  display: flex;\n  flex-wrap: wrap;\n  gap: 6px;\n  margin-top: 6px;\n}\n\n.run-notice {\n  display: inline-flex;\n  align-items: center;\n  gap: 6px;\n  align-self: flex-start;\n  max-width: 100%;\n  margin: 2px 0;\n  padding: 3px 10px;\n  border: 1px dashed var(--ag-ui-border);\n  border-radius: 999px;\n  background: transparent;\n  color: var(--ag-ui-muted);\n  font-size: 0.8em;\n  line-height: 1.4;\n}\n\n.run-notice-icon {\n  flex: none;\n  opacity: 0.75;\n}\n\n.run-notice-text {\n  min-width: 0;\n  overflow-wrap: anywhere;\n}\n\n.attachment-chip {\n  display: inline-flex;\n  align-items: center;\n  gap: 6px;\n  max-width: 100%;\n  padding: 4px 8px;\n  border: 1px solid var(--ag-ui-border);\n  border-radius: 999px;\n  background: var(--ag-ui-assistant-bg);\n  font-size: 0.85em;\n  position: relative;\n}\n\n.attachment-chip--error {\n  border-color: var(--ag-ui-danger);\n  color: var(--ag-ui-danger);\n}\n\n.attachment-chip-name {\n  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n  max-width: 14ch;\n}\n\n.attachment-chip-size {\n  color: var(--ag-ui-muted);\n  white-space: nowrap;\n}\n\n.attachment-chip--error .attachment-chip-size {\n  color: var(--ag-ui-danger);\n}\n\n/* The progress bar fills as the file uploads. */\n.attachment-chip-bar {\n  flex-basis: 100%;\n  height: 3px;\n  border-radius: 2px;\n  background: var(--ag-ui-border);\n  overflow: hidden;\n}\n\n.attachment-chip-bar-fill {\n  height: 100%;\n  background: var(--ag-ui-accent);\n  transition: width 0.15s ease;\n}\n\n.attachment-chip-remove,\n.attachment-chip-retry {\n  border: none;\n  background: none;\n  color: inherit;\n  cursor: pointer;\n  padding: 0;\n  line-height: 1;\n  opacity: 0.7;\n}\n\n.attachment-chip-remove:hover,\n.attachment-chip-retry:hover {\n  opacity: 1;\n}\n\n/* A subtle outline while a file is dragged over the shell. */\n.chat--dragover {\n  outline: 2px dashed var(--ag-ui-accent);\n  outline-offset: -4px;\n}\n\n/* Muted \"\u23F9 Stopped\" line after a cancelled run \u2014 a note, not an error bubble. */\n.stopped-note {\n  align-self: flex-start;\n  color: var(--ag-ui-muted);\n  font-size: 12px;\n  padding: 2px 4px;\n}\n\n/* Inline confirmation card \u2014 lives in the transcript, no focus-stealing overlay. */\n.confirm {\n  align-self: stretch;\n  box-sizing: border-box;\n  display: flex;\n  flex-direction: column;\n  gap: 8px;\n  padding: 12px;\n  background: var(--ag-ui-bg);\n  border: 1px solid var(--ag-ui-accent);\n  border-radius: 10px;\n}\n\n.confirm[data-resolved] {\n  opacity: 0.7;\n  border-color: var(--ag-ui-border);\n}\n\n.confirm-body {\n  font-weight: 600;\n}\n\n.confirm-args {\n  margin: 0;\n  padding: 8px 10px;\n  max-height: 140px;\n  overflow: auto;\n  font-size: 12px;\n  font-family: ui-monospace, \"SF Mono\", Menlo, monospace;\n  background: var(--ag-ui-assistant-bg);\n  border-radius: 8px;\n  white-space: pre-wrap;\n  word-break: break-word;\n}\n\n.confirm-actions {\n  display: flex;\n  gap: 8px;\n  justify-content: flex-end;\n}\n\n.confirm-btn {\n  border: 1px solid var(--ag-ui-border);\n  border-radius: 8px;\n  padding: 8px 14px;\n  font: inherit;\n  font-weight: 600;\n  cursor: pointer;\n  background: var(--ag-ui-bg);\n  color: var(--ag-ui-fg);\n}\n\n.confirm-btn:disabled {\n  cursor: default;\n  opacity: 0.6;\n}\n\n.confirm-btn--confirm {\n  border-color: var(--ag-ui-accent);\n  background: var(--ag-ui-accent);\n  color: #ffffff;\n}\n\n/* Approval card \u2014 the server-side-tool gate (approve/deny an interrupt). */\n.approval {\n  align-self: stretch;\n  box-sizing: border-box;\n  display: flex;\n  flex-direction: column;\n  gap: 8px;\n  padding: 12px;\n  background: var(--ag-ui-bg);\n  border: 1px solid var(--ag-ui-accent);\n  border-radius: 10px;\n}\n\n.approval[data-resolved] {\n  opacity: 0.7;\n  border-color: var(--ag-ui-border);\n}\n\n.approval-body {\n  font-weight: 600;\n}\n\n.approval-actions {\n  display: flex;\n  gap: 8px;\n  justify-content: flex-end;\n}\n\n.approval-btn {\n  border: 1px solid var(--ag-ui-border);\n  border-radius: 8px;\n  padding: 8px 14px;\n  font: inherit;\n  font-weight: 600;\n  cursor: pointer;\n  background: var(--ag-ui-bg);\n  color: var(--ag-ui-fg);\n}\n\n.approval-btn:disabled {\n  cursor: default;\n  opacity: 0.6;\n}\n\n.approval-btn--approve {\n  border-color: var(--ag-ui-accent);\n  background: var(--ag-ui-accent);\n  color: #ffffff;\n}\n\n/* Question card \u2014 the built-in ask_user prompt (radios and/or free text). */\n.question {\n  align-self: stretch;\n  box-sizing: border-box;\n  display: flex;\n  flex-direction: column;\n  gap: 8px;\n  padding: 12px;\n  background: var(--ag-ui-bg);\n  border: 1px solid var(--ag-ui-accent);\n  border-radius: 10px;\n}\n\n.question[data-resolved] {\n  opacity: 0.7;\n  border-color: var(--ag-ui-border);\n}\n\n.question-body {\n  font-weight: 600;\n}\n\n.question-options {\n  display: flex;\n  flex-direction: column;\n  gap: 6px;\n}\n\n.question-choice {\n  display: flex;\n  align-items: center;\n  gap: 8px;\n  cursor: pointer;\n}\n\n.question-input {\n  box-sizing: border-box;\n  width: 100%;\n  padding: 8px 10px;\n  font: inherit;\n  color: var(--ag-ui-fg);\n  background: var(--ag-ui-bg);\n  border: 1px solid var(--ag-ui-border);\n  border-radius: 8px;\n}\n\n.question-input:disabled {\n  opacity: 0.6;\n}\n\n.question-actions {\n  display: flex;\n  justify-content: flex-end;\n}\n\n.question-btn {\n  border: 1px solid var(--ag-ui-accent);\n  border-radius: 8px;\n  padding: 8px 14px;\n  font: inherit;\n  font-weight: 600;\n  cursor: pointer;\n  background: var(--ag-ui-accent);\n  color: #ffffff;\n}\n\n.question-btn:disabled {\n  cursor: default;\n  opacity: 0.6;\n}\n\n/* Skills \u2014 chips row + the /-command palette, above the input. */\n.skill-chips {\n  display: flex;\n  flex-wrap: wrap;\n  gap: 6px;\n  padding: 10px 12px;\n}\n\n.skill-chip {\n  border: 1px solid var(--ag-ui-border);\n  border-radius: 999px;\n  padding: 4px 12px;\n  font: inherit;\n  font-size: 0.9em;\n  cursor: pointer;\n  background: var(--ag-ui-assistant-bg);\n  color: var(--ag-ui-fg);\n}\n\n.skill-chip:hover {\n  border-color: var(--ag-ui-accent);\n}\n\n.skill-palette {\n  margin: 8px 12px 0;\n  display: flex;\n  flex-direction: column;\n  max-height: 220px;\n  overflow: auto;\n  background: var(--ag-ui-bg);\n  border: 1px solid var(--ag-ui-border);\n  border-radius: 8px;\n  box-shadow: 0 8px 24px rgba(20, 20, 50, 0.16);\n}\n\n.skill-item {\n  display: flex;\n  flex-direction: column;\n  gap: 2px;\n  align-items: flex-start;\n  padding: 8px 12px;\n  border: none;\n  background: none;\n  font: inherit;\n  text-align: left;\n  cursor: pointer;\n  color: var(--ag-ui-fg);\n}\n\n.skill-item[aria-selected=\"true\"] {\n  background: var(--ag-ui-assistant-bg);\n}\n\n.skill-item-title {\n  font-weight: 600;\n}\n\n.skill-item-desc {\n  font-size: 0.85em;\n  color: var(--ag-ui-muted);\n}\n\n.skill-hint {\n  margin: 8px 12px 0;\n  font-size: 0.85em;\n  color: var(--ag-ui-danger);\n}\n\n/* Chat-history drawer \u2014 a slide-over within the chat panel. */\n.drawer {\n  position: absolute;\n  inset: 0;\n  z-index: 5;\n  display: flex;\n}\n\n.drawer[hidden] {\n  display: none;\n}\n\n.checkpoints {\n  position: absolute;\n  inset-block-start: 3rem;\n  inset-inline: 0.75rem;\n  z-index: 6;\n  display: flex;\n  flex-direction: column;\n  gap: 0.25rem;\n  padding: 0.5rem;\n  border: 1px solid var(--ag-ui-border);\n  border-radius: 0.5rem;\n  background: var(--ag-ui-assistant-bg);\n  box-shadow: 0 6px 24px rgb(0 0 0 / 12%);\n  max-height: 60%;\n  overflow-y: auto;\n}\n\n.checkpoints[hidden] {\n  display: none;\n}\n\n.checkpoints-title {\n  font-size: 0.75rem;\n  font-weight: 600;\n  opacity: 0.7;\n}\n\n.checkpoints-empty {\n  padding: 0.5rem 0.25rem;\n  font-size: 0.8125rem;\n  opacity: 0.7;\n}\n\n.checkpoint-row {\n  display: flex;\n  align-items: center;\n  gap: 0.5rem;\n  padding: 0.25rem;\n  border-radius: 0.375rem;\n}\n\n.checkpoint-row:hover {\n  background: var(--ag-ui-hover);\n}\n\n.checkpoint-label {\n  flex: 1;\n  font-size: 0.8125rem;\n  white-space: nowrap;\n  overflow: hidden;\n  text-overflow: ellipsis;\n}\n\n.checkpoint-branch {\n  font-size: 0.6875rem;\n  padding: 0 0.375rem;\n  border-radius: 999px;\n  background: var(--ag-ui-hover);\n  opacity: 0.8;\n}\n\n.checkpoint-action {\n  font: inherit;\n  font-size: 0.75rem;\n  cursor: pointer;\n  padding: 0.125rem 0.5rem;\n  border: 1px solid var(--ag-ui-border);\n  border-radius: 0.375rem;\n  background: transparent;\n  color: inherit;\n}\n\n.checkpoint-action:hover {\n  background: var(--ag-ui-hover);\n}\n\n.drawer-backdrop {\n  position: absolute;\n  inset: 0;\n  background: rgba(20, 20, 50, 0.32);\n}\n\n.drawer-panel {\n  position: relative;\n  display: flex;\n  flex-direction: column;\n  width: min(300px, 85%);\n  height: 100%;\n  background: var(--ag-ui-bg);\n  border-right: 1px solid var(--ag-ui-border);\n  box-shadow: var(--ag-ui-shadow);\n  overflow: hidden;\n}\n\n.drawer-header {\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  gap: var(--ag-ui-space);\n  padding: var(--ag-ui-pad);\n  border-bottom: 1px solid var(--ag-ui-border);\n}\n\n.drawer-title {\n  font-weight: 600;\n}\n\n.drawer-new {\n  border: 1px solid var(--ag-ui-border);\n  border-radius: var(--ag-ui-radius);\n  background: var(--ag-ui-bg);\n  color: var(--ag-ui-accent);\n  padding: 4px 10px;\n  font: inherit;\n  font-size: 0.85em;\n  cursor: pointer;\n}\n\n.drawer-list {\n  flex: 1;\n  min-height: 0;\n  overflow-y: auto;\n}\n\n.drawer-empty {\n  padding: var(--ag-ui-pad);\n  font-size: 0.9em;\n  color: var(--ag-ui-muted);\n}\n\n.drawer-row {\n  display: flex;\n  align-items: stretch;\n  border-bottom: 1px solid var(--ag-ui-border);\n}\n\n.drawer-row--active {\n  background: var(--ag-ui-assistant-bg);\n}\n\n.drawer-row-select {\n  flex: 1;\n  min-width: 0;\n  display: flex;\n  flex-direction: column;\n  gap: 2px;\n  padding: 8px 12px;\n  border: none;\n  background: none;\n  color: inherit;\n  font: inherit;\n  text-align: left;\n  cursor: pointer;\n}\n\n.drawer-row-title {\n  font-weight: 600;\n  overflow: hidden;\n  white-space: nowrap;\n  text-overflow: ellipsis;\n}\n\n.drawer-row-time {\n  font-size: 0.72em;\n  color: var(--ag-ui-muted);\n}\n\n.drawer-row-preview {\n  font-size: 0.8em;\n  color: var(--ag-ui-muted);\n  overflow: hidden;\n  white-space: nowrap;\n  text-overflow: ellipsis;\n}\n\n.drawer-row-actions {\n  display: flex;\n  align-items: center;\n  gap: 2px;\n  padding: 0 6px;\n}\n\n.drawer-row-rename,\n.drawer-row-delete {\n  border: none;\n  background: none;\n  color: var(--ag-ui-muted);\n  font-size: 0.9em;\n  padding: 4px;\n  cursor: pointer;\n}\n\n.drawer-rename-input {\n  flex: 1;\n  min-width: 0;\n  margin: 6px 10px;\n  padding: 4px 8px;\n  border: 1px solid var(--ag-ui-accent);\n  border-radius: 6px;\n  background: var(--ag-ui-input-bg);\n  color: var(--ag-ui-fg);\n  font: inherit;\n}\n\n.drawer-confirm {\n  display: flex;\n  align-items: center;\n  gap: 8px;\n  padding: 8px 12px;\n  font-size: 0.85em;\n}\n\n.drawer-confirm-label {\n  color: var(--ag-ui-danger);\n}\n\n.drawer-confirm-yes {\n  border: none;\n  border-radius: 6px;\n  background: var(--ag-ui-danger);\n  color: #ffffff;\n  padding: 3px 10px;\n  font: inherit;\n  cursor: pointer;\n}\n\n.drawer-confirm-no {\n  border: 1px solid var(--ag-ui-border);\n  border-radius: 6px;\n  background: none;\n  color: inherit;\n  padding: 3px 10px;\n  font: inherit;\n  cursor: pointer;\n}\n\n/* Embedded placement: an inline, flush side panel rather than a dimmed,\n   floating slide-over. */\n:host([placement=\"embedded\"]) .drawer-backdrop {\n  background: none;\n}\n\n:host([placement=\"embedded\"]) .drawer-panel {\n  width: 100%;\n  border-right: none;\n  box-shadow: none;\n}\n";
+export declare const STYLES = "\n:host {\n  /* Colors */\n  --ag-ui-bg: #ffffff;\n  --ag-ui-fg: #1a1a2e;\n  --ag-ui-accent: #4f46e5;\n  --ag-ui-user-bg: #4f46e5;\n  --ag-ui-user-fg: #ffffff;\n  --ag-ui-assistant-bg: #f1f1f6;\n  --ag-ui-hover: #e7e7ee;\n  --ag-ui-input-bg: var(--ag-ui-bg);\n  --ag-ui-tool-bg: var(--ag-ui-assistant-bg);\n  --ag-ui-tool-fg: var(--ag-ui-accent);\n  --ag-ui-header-bg: var(--ag-ui-accent);\n  --ag-ui-header-fg: #ffffff;\n  --ag-ui-border: #e2e2ec;\n  --ag-ui-radius: 12px;\n\n  /* Status accents for tool-call cards. */\n  --ag-ui-success: #15803d;\n  --ag-ui-danger: #b91c1c;\n  --ag-ui-muted: #6b7280;\n\n  /* Tool-call status icon glyphs (override to re-theme) + spinner speed.\n     The pending state is the animated ring; the settled states use these. */\n  --ag-ui-tool-icon-done: \"\u2713\";\n  --ag-ui-tool-icon-error: \"\u2715\";\n  --ag-ui-tool-icon-declined: \"\u2298\";\n  --ag-ui-tool-spin-duration: 0.7s;\n\n  /* Answer well (opt-in via data-answer-well) \u2014 boxes a whole assistant turn. */\n  --ag-ui-well-bg: transparent;\n  --ag-ui-well-border: var(--ag-ui-border);\n\n  /* Surface \u2014 set --ag-ui-shadow: none for a flush, embedded panel. */\n  --ag-ui-shadow: 0 12px 32px rgba(20, 20, 50, 0.18);\n  --ag-ui-font: inherit;\n  --ag-ui-font-size: 14px;\n  --ag-ui-code-font: ui-monospace, \"SF Mono\", Menlo, monospace;\n\n  /* Spacing \u2014 the density preset overrides these. */\n  --ag-ui-space: 10px;\n  --ag-ui-pad: 16px;\n  --ag-ui-msg-pad: 8px 12px;\n  --ag-ui-msg-radius: 14px;\n\n  /* Layout \u2014 override from outside to dock the widget anywhere.\n     Set --ag-ui-position: static (and place this element in your own\n     grid/flex layout) to embed it in the page flow instead of floating. */\n  --ag-ui-position: fixed;\n  --ag-ui-z-index: 2147483000;\n  --ag-ui-width: 380px;\n  --ag-ui-height: 560px;\n  --ag-ui-inset: auto 24px 24px auto;\n  --ag-ui-max-width: calc(100vw - 48px);\n  --ag-ui-max-height: calc(100vh - 48px);\n  /* Reading-column width for placement=\"page\" (full-bleed, centred content). */\n  --ag-ui-content-max-width: 820px;\n\n  position: var(--ag-ui-position);\n  inset: var(--ag-ui-inset);\n  z-index: var(--ag-ui-z-index);\n  width: var(--ag-ui-width);\n  max-width: var(--ag-ui-max-width);\n  height: var(--ag-ui-height);\n  max-height: var(--ag-ui-max-height);\n  display: flex;\n  font-family: var(--ag-ui-font);\n  font-size: var(--ag-ui-font-size);\n  color: var(--ag-ui-fg);\n}\n\n/* \u2500\u2500 Themes \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\n   Themes only re-set the colour variables; layout/spacing are unaffected.\n   theme=\"auto\" follows the OS via prefers-color-scheme. */\n:host([theme=\"dark\"]) {\n  --ag-ui-bg: #15151f;\n  --ag-ui-fg: #e8e8f2;\n  --ag-ui-assistant-bg: #25253a;\n  --ag-ui-hover: #303049;\n  --ag-ui-header-bg: #1f1f30;\n  --ag-ui-header-fg: #e8e8f2;\n  --ag-ui-border: #33334a;\n  --ag-ui-muted: #9aa0b4;\n  --ag-ui-shadow: 0 12px 32px rgba(0, 0, 0, 0.5);\n}\n\n@media (prefers-color-scheme: dark) {\n  :host([theme=\"auto\"]) {\n    --ag-ui-bg: #15151f;\n    --ag-ui-fg: #e8e8f2;\n    --ag-ui-assistant-bg: #25253a;\n    --ag-ui-hover: #303049;\n    --ag-ui-header-bg: #1f1f30;\n    --ag-ui-header-fg: #e8e8f2;\n    --ag-ui-border: #33334a;\n    --ag-ui-muted: #9aa0b4;\n    --ag-ui-shadow: 0 12px 32px rgba(0, 0, 0, 0.5);\n  }\n}\n\n/* A terminal-flavoured \"code\" theme: dark, monospace, green accent. */\n:host([theme=\"code\"]) {\n  --ag-ui-bg: #0d1117;\n  --ag-ui-fg: #c9d1d9;\n  --ag-ui-accent: #3fb950;\n  --ag-ui-user-bg: #238636;\n  --ag-ui-assistant-bg: #161b22;\n  --ag-ui-hover: #21262d;\n  --ag-ui-header-bg: #010409;\n  --ag-ui-header-fg: #c9d1d9;\n  --ag-ui-border: #30363d;\n  --ag-ui-muted: #8b949e;\n  --ag-ui-font: var(--ag-ui-code-font);\n  --ag-ui-shadow: 0 12px 32px rgba(0, 0, 0, 0.6);\n}\n\n/* \u2500\u2500 Density \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */\n:host([density=\"compact\"]) {\n  --ag-ui-font-size: 13px;\n  --ag-ui-space: 6px;\n  --ag-ui-pad: 10px;\n  --ag-ui-msg-pad: 5px 9px;\n  --ag-ui-msg-radius: 10px;\n}\n\n/* \u2500\u2500 Placement presets \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */\n:host([placement=\"bottom-left\"]) {\n  --ag-ui-inset: auto auto 24px 24px;\n}\n\n:host([placement=\"side\"]) {\n  --ag-ui-inset: 0 0 0 auto;\n  --ag-ui-width: 420px;\n  --ag-ui-height: 100vh;\n  --ag-ui-max-height: 100vh;\n  --ag-ui-radius: 0;\n}\n\n:host([placement=\"full\"]) {\n  --ag-ui-inset: 0;\n  --ag-ui-width: 100vw;\n  --ag-ui-height: 100vh;\n  --ag-ui-max-width: 100vw;\n  --ag-ui-max-height: 100vh;\n  --ag-ui-radius: 0;\n}\n\n/* Page: full-bleed background with a centred reading column. Unlike\n   \"full\" (edge-to-edge, left-aligned messages) the content sits in a column\n   capped at --ag-ui-content-max-width. The column is produced by symmetric auto\n   padding on the scroll area + composer (no per-row wrapper), so user pills\n   still right-align and the assistant well spans the column. */\n:host([placement=\"page\"]) {\n  --ag-ui-inset: 0;\n  --ag-ui-width: 100vw;\n  --ag-ui-height: 100vh;\n  --ag-ui-max-width: 100vw;\n  --ag-ui-max-height: 100vh;\n  --ag-ui-radius: 0;\n}\n\n:host([placement=\"page\"]) .messages {\n  padding-inline: max(var(--ag-ui-pad), calc((100% - var(--ag-ui-content-max-width)) / 2));\n}\n\n:host([placement=\"page\"]) .input-row {\n  padding-inline: max(12px, calc((100% - var(--ag-ui-content-max-width)) / 2));\n}\n\n/* The rows between the message list and the composer (skill chips, the\n   /-command palette, the missing-placeholder hint, the upload tray) line up\n   with the column too \u2014 chips are padding-based, the palette/hint/tray are\n   margin-based, so each gets its own inline axis nudged by the same gutter. */\n:host([placement=\"page\"]) .skill-chips,\n:host([placement=\"page\"]) .attachment-tray {\n  padding-inline: max(12px, calc((100% - var(--ag-ui-content-max-width)) / 2));\n}\n\n:host([placement=\"page\"]) .skill-palette,\n:host([placement=\"page\"]) .skill-hint {\n  margin-inline: max(12px, calc((100% - var(--ag-ui-content-max-width)) / 2));\n}\n\n/* In the reading column the assistant well uses the full width; the user\n   message stays a right-aligned pill (its default align-self + max-width). */\n:host([placement=\"page\"]) .message--assistant {\n  max-width: 100%;\n}\n\n/* Sidebar: a full-height docked panel that slides open/closed and\n   collapses to a slim icon rail (not the floating launcher). Docked right by\n   default; data-side=\"left\" docks it left. Overlay by default \u2014 set\n   --ag-ui-position: static (and place this element in your own layout) for a\n   host-managed push instead. */\n:host([placement=\"sidebar\"]) {\n  --ag-ui-inset: 0 0 0 auto;\n  --ag-ui-width: 420px;\n  --ag-ui-height: 100vh;\n  --ag-ui-max-height: 100vh;\n  --ag-ui-radius: 0;\n  --ag-ui-rail-width: 52px;\n  transition: width 0.28s ease;\n}\n\n:host([placement=\"sidebar\"][data-side=\"left\"]) {\n  --ag-ui-inset: 0 auto 0 0;\n}\n\n:host([placement=\"sidebar\"]) .chat {\n  transition: transform 0.28s ease;\n}\n\n/* Collapsed sidebar: shrink the host to the rail width, hide the panel, and\n   reveal the rail. Higher specificity than the generic collapse rules, so it\n   wins regardless of source order. */\n:host([placement=\"sidebar\"][collapsed]) {\n  width: var(--ag-ui-rail-width);\n  height: 100vh;\n  max-height: 100vh;\n  bottom: 0;\n}\n\n:host([placement=\"sidebar\"][collapsed]) .chat {\n  display: none;\n}\n\n/* The rail is a sibling of the panel (so it survives the panel being hidden);\n   shown only for a collapsed sidebar. */\n.rail {\n  display: none;\n  border: none;\n  font: inherit;\n}\n\n:host([placement=\"sidebar\"][collapsed]) .rail {\n  display: flex;\n  position: absolute;\n  inset: 0;\n  align-items: flex-start;\n  justify-content: center;\n  padding-top: 16px;\n  border: 1px solid var(--ag-ui-border);\n  background: var(--ag-ui-header-bg);\n  color: var(--ag-ui-header-fg);\n  cursor: pointer;\n}\n\n@media (prefers-reduced-motion: reduce) {\n  :host([placement=\"sidebar\"]),\n  :host([placement=\"sidebar\"]) .chat {\n    transition: none;\n  }\n}\n\n/* Embedded: drop the floating chrome and the high z-index stacking context so\n   the widget lives in the host's own layout (fixes overlay/z-index clashes). */\n:host([placement=\"embedded\"]) {\n  --ag-ui-position: static;\n  --ag-ui-width: 100%;\n  --ag-ui-height: 100%;\n  --ag-ui-max-width: 100%;\n  --ag-ui-max-height: 100%;\n  --ag-ui-shadow: none;\n  --ag-ui-z-index: auto;\n}\n\n.chat {\n  position: relative;\n  display: flex;\n  flex-direction: column;\n  flex: 1;\n  min-height: 0;\n  background: var(--ag-ui-bg);\n  border: 1px solid var(--ag-ui-border);\n  border-radius: var(--ag-ui-radius);\n  box-shadow: var(--ag-ui-shadow);\n  overflow: hidden;\n}\n\n.header {\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  gap: 8px;\n  padding: 10px 14px;\n  border-bottom: 1px solid var(--ag-ui-border);\n  background: var(--ag-ui-header-bg);\n  color: var(--ag-ui-header-fg);\n}\n\n.header-title {\n  flex: 1;\n  min-width: 0;\n  font-weight: 600;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n}\n\n/* Header / launcher icon holder: a slot, with a data-icon-url <img>\n   fallback, sized via --ag-ui-icon-size. */\n.icon-holder {\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  flex: none;\n  width: var(--ag-ui-icon-size, 22px);\n  height: var(--ag-ui-icon-size, 22px);\n  line-height: 1;\n}\n\n.icon-img {\n  width: 100%;\n  height: 100%;\n  object-fit: contain;\n  border-radius: var(--ag-ui-icon-radius, 4px);\n}\n\n.header-controls {\n  display: flex;\n  gap: 2px;\n  flex: none;\n}\n\n.header-btn {\n  border: none;\n  background: transparent;\n  color: inherit;\n  font: inherit;\n  line-height: 1;\n  padding: 4px 7px;\n  border-radius: 6px;\n  cursor: pointer;\n  opacity: 0.85;\n}\n\n.header-btn:hover {\n  opacity: 1;\n  background: rgba(255, 255, 255, 0.18);\n}\n\n/* Collapsed: keep just the header bar \u2014 hide the whole body, and let the host\n   shrink to the header. (A host can also fully hide the element itself.) */\n:host([collapsed]) {\n  height: auto;\n  max-height: none;\n}\n\n:host([collapsed]) .messages,\n:host([collapsed]) .input-row,\n:host([collapsed]) .skill-chips,\n:host([collapsed]) .skill-palette,\n:host([collapsed]) .skill-hint {\n  display: none;\n}\n\n/* Edge-docked placements pin top *and* bottom, which would otherwise keep the\n   panel full-height when collapsed; unpin the bottom so it shrinks to the\n   header. (Floating/bottom-left pin only the bottom, so they already shrink.) */\n:host([collapsed][placement=\"side\"]),\n:host([collapsed][placement=\"full\"]) {\n  bottom: auto;\n}\n\n.messages {\n  flex: 1;\n  overflow-y: auto;\n  padding: var(--ag-ui-pad);\n  display: flex;\n  flex-direction: column;\n  gap: var(--ag-ui-space);\n}\n\n/* Empty-state region (slot): centred while it's the only thing in the\n   list, hidden as soon as a message, card, or pending indicator renders. */\n.empty {\n  margin: auto;\n  text-align: center;\n  color: var(--ag-ui-muted);\n}\n\n.empty[hidden] {\n  display: none;\n}\n\n/* \u2500\u2500 Answer group / well \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\n   One .answer per assistant turn wraps the streamed text, its tool cards,\n   and the pending indicator so a whole answer reads (and can be boxed) as one\n   unit. A flex column on the message-list gap, stretched to the list width so\n   its children keep their own left/right alignment. data-answer-well opts into\n   the bordered \"well\"; without it the layout is today's flat stack. */\n.answer {\n  display: flex;\n  flex-direction: column;\n  gap: var(--ag-ui-space);\n  align-self: stretch;\n  min-width: 0;\n}\n\n:host([data-answer-well]) .answer {\n  padding: var(--ag-ui-pad);\n  background: var(--ag-ui-well-bg);\n  border: 1px solid var(--ag-ui-well-border);\n  border-radius: var(--ag-ui-radius);\n}\n\n.message {\n  max-width: 80%;\n  padding: var(--ag-ui-msg-pad);\n  border-radius: var(--ag-ui-msg-radius);\n  line-height: 1.4;\n  white-space: pre-wrap;\n  word-break: break-word;\n}\n\n/* \u2500\u2500 Incoming-text animations (data-text-animation) \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */\n/* .message--restored (rehydrated history) is excluded: entrance animations are\n   for freshly-arriving messages, not the whole transcript replaying on reload.\n   Word mode is excluded implicitly \u2014 restored bubbles aren't wrapped. */\n:host([data-text-animation=\"fade\"]) .message--assistant:not(.message--restored) {\n  animation: ag-ui-msg-fade 0.25s ease both;\n}\n\n@keyframes ag-ui-msg-fade {\n  from { opacity: 0; transform: translateY(4px); }\n  to { opacity: 1; transform: none; }\n}\n\n.message--assistant .word {\n  animation: ag-ui-word-in 0.3s ease both;\n  animation-delay: calc(var(--ag-ui-word-index, 0) * 35ms);\n}\n\n@keyframes ag-ui-word-in {\n  from { opacity: 0; }\n  to { opacity: 1; }\n}\n\n@media (prefers-reduced-motion: reduce) {\n  :host([data-text-animation=\"fade\"]) .message--assistant,\n  .message--assistant .word {\n    animation: none;\n  }\n}\n\n.message--user {\n  align-self: flex-end;\n  background: var(--ag-ui-user-bg);\n  color: var(--ag-ui-user-fg);\n  border-bottom-right-radius: 4px;\n}\n\n.message--assistant {\n  align-self: flex-start;\n  background: var(--ag-ui-assistant-bg);\n  border-bottom-left-radius: 4px;\n  /* Assistant bubbles hold rendered markdown/HTML, so collapse the source\n     whitespace the renderer leaves between block tags. */\n  white-space: normal;\n}\n\n/* Rendered-markdown elements inside an assistant bubble. */\n.message--assistant > :first-child {\n  margin-top: 0;\n}\n\n.message--assistant > :last-child {\n  margin-bottom: 0;\n}\n\n.message--assistant p,\n.message--assistant ul,\n.message--assistant ol,\n.message--assistant blockquote,\n.message--assistant pre {\n  margin: 0.5em 0;\n}\n\n.message--assistant ul,\n.message--assistant ol {\n  padding-left: 1.3em;\n}\n\n.message--assistant a {\n  color: var(--ag-ui-accent);\n  text-decoration: underline;\n}\n\n.message--assistant code {\n  font-family: ui-monospace, \"SF Mono\", Menlo, monospace;\n  font-size: 0.92em;\n  background: rgba(127, 127, 127, 0.16);\n  padding: 1px 4px;\n  border-radius: 4px;\n}\n\n.message--assistant pre {\n  padding: 8px 10px;\n  overflow: auto;\n  background: var(--ag-ui-bg);\n  border: 1px solid var(--ag-ui-border);\n  border-radius: 6px;\n}\n\n.message--assistant pre code {\n  background: none;\n  padding: 0;\n}\n\n/* The copy button sits inside the block, so it scrolls with wide code rather\n   than floating over the bubble. Positioning is on the pre; the button only\n   appears once one has been attached. */\n.message--assistant pre.has-copy {\n  position: relative;\n}\n\n.code-copy {\n  position: absolute;\n  top: 4px;\n  right: 4px;\n  padding: 2px 8px;\n  font: inherit;\n  font-size: 0.75em;\n  line-height: 1.6;\n  color: var(--ag-ui-muted);\n  background: var(--ag-ui-surface);\n  border: 1px solid var(--ag-ui-border);\n  border-radius: 4px;\n  cursor: pointer;\n  opacity: 0;\n  transition: opacity 0.12s ease;\n}\n\n/* Revealed on hover or keyboard focus. Focus matters as much as hover here:\n   hidden-until-hover is invisible to a keyboard user otherwise. */\n.message--assistant pre.has-copy:hover .code-copy,\n.code-copy:focus-visible {\n  opacity: 1;\n}\n\n.code-copy:hover {\n  color: var(--ag-ui-text);\n  background: var(--ag-ui-hover);\n}\n\n.code-copy[data-state=\"copied\"] {\n  opacity: 1;\n  color: var(--ag-ui-text);\n}\n\n.code-copy[data-state=\"failed\"] {\n  opacity: 1;\n  color: var(--ag-ui-danger, var(--ag-ui-text));\n}\n\n.message--assistant blockquote {\n  padding-left: 10px;\n  border-left: 3px solid var(--ag-ui-border);\n  color: var(--ag-ui-muted);\n}\n\n/* Markdown tables. table/thead/tbody/tr/th/td are all in\n   the sanitizer's ALLOWED_TAGS, so an agent emitting one renders it \u2014 and until\n   now rendered it entirely unstyled, overflowing the bubble. A wide table\n   scrolls inside its own box rather than stretching the message: the bubble is\n   width-constrained, so without this the columns either crush or push the\n   layout sideways. */\n.message--assistant table {\n  display: block;\n  width: fit-content;\n  max-width: 100%;\n  overflow-x: auto;\n  border-collapse: collapse;\n  font-size: 0.95em;\n}\n\n.message--assistant th,\n.message--assistant td {\n  padding: 6px 10px;\n  border: 1px solid var(--ag-ui-border);\n  text-align: left;\n  vertical-align: top;\n}\n\n.message--assistant th {\n  background: var(--ag-ui-hover);\n  font-weight: 600;\n}\n\n.pending {\n  align-self: flex-start;\n  display: inline-flex;\n  gap: 4px;\n  align-items: center;\n  padding: 12px 14px;\n  background: var(--ag-ui-assistant-bg);\n  border-radius: 14px;\n  border-bottom-left-radius: 4px;\n}\n\n.pending-dot {\n  width: 6px;\n  height: 6px;\n  border-radius: 50%;\n  background: var(--ag-ui-muted);\n  animation: ag-ui-pending 1.2s infinite ease-in-out both;\n}\n\n.pending-dot:nth-child(2) {\n  animation-delay: 0.16s;\n}\n\n.pending-dot:nth-child(3) {\n  animation-delay: 0.32s;\n}\n\n@keyframes ag-ui-pending {\n  0%, 80%, 100% { opacity: 0.3; transform: translateY(0); }\n  40% { opacity: 1; transform: translateY(-3px); }\n}\n\n@media (prefers-reduced-motion: reduce) {\n  .pending-dot {\n    animation: none;\n    opacity: 0.6;\n  }\n}\n\n/* \u2500\u2500 Thoughts region \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\n   A muted, collapsible chain-of-thought at the top of the answer group: open\n   while the model reasons, folded once the answer text starts. */\n.thoughts {\n  align-self: stretch;\n  display: flex;\n  flex-direction: column;\n  gap: 4px;\n  font-size: 12px;\n  color: var(--ag-ui-muted);\n}\n\n.thoughts-toggle {\n  align-self: flex-start;\n  border: none;\n  padding: 0;\n  background: none;\n  font: inherit;\n  font-size: 12px;\n  font-weight: 600;\n  color: var(--ag-ui-muted);\n  cursor: pointer;\n}\n\n.thoughts-toggle::before {\n  content: \"\u25BE \";\n}\n\n.thoughts-toggle[aria-expanded=\"false\"]::before {\n  content: \"\u25B8 \";\n}\n\n/* A gentle pulse on the label while reasoning is still streaming. */\n.thoughts[data-streaming] .thoughts-label {\n  animation: ag-ui-thoughts-pulse 1.4s ease-in-out infinite;\n}\n\n@keyframes ag-ui-thoughts-pulse {\n  0%, 100% { opacity: 0.55; }\n  50% { opacity: 1; }\n}\n\n.thoughts-body {\n  margin: 0;\n  padding: 4px 0 4px 10px;\n  border-left: 2px solid var(--ag-ui-border);\n  max-height: 220px;\n  overflow: auto;\n  white-space: pre-wrap;\n  word-break: break-word;\n  font-family: inherit;\n}\n\n.thoughts-body[hidden] {\n  display: none;\n}\n\n@media (prefers-reduced-motion: reduce) {\n  .thoughts[data-streaming] .thoughts-label {\n    animation: none;\n  }\n}\n\n.tool-call {\n  align-self: flex-start;\n  max-width: 80%;\n  box-sizing: border-box;\n  display: flex;\n  flex-direction: column;\n  gap: 6px;\n  font-size: 12px;\n  font-family: ui-monospace, \"SF Mono\", Menlo, monospace;\n  padding: 8px 10px;\n  border-radius: 8px;\n  background: var(--ag-ui-tool-bg);\n  border: 1px solid var(--ag-ui-border);\n  color: var(--ag-ui-tool-fg);\n}\n\n.tool-call-head {\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  gap: 8px;\n}\n\n.tool-call-name {\n  flex: 1;\n  min-width: 0;\n  font-weight: 600;\n  word-break: break-word;\n}\n\n/* Leading status icon. Empty in the DOM \u2014 the glyph/spinner is drawn\n   here from the card's data-status, so it stays themeable. */\n.tool-call-icon {\n  flex: none;\n  box-sizing: border-box;\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  width: 14px;\n  height: 14px;\n  font-size: 12px;\n  line-height: 1;\n}\n\n/* Pending: a real spinning ring. Speed is tunable; reduced motion stops it. */\n.tool-call[data-status=\"pending\"] .tool-call-icon {\n  border: 2px solid var(--ag-ui-muted);\n  border-top-color: transparent;\n  border-radius: 50%;\n  animation: ag-ui-tool-spin var(--ag-ui-tool-spin-duration) linear infinite;\n}\n\n@keyframes ag-ui-tool-spin {\n  to { transform: rotate(360deg); }\n}\n\n/* Settled: a themeable glyph coloured by outcome. */\n.tool-call[data-status=\"done\"] .tool-call-icon::before {\n  content: var(--ag-ui-tool-icon-done);\n  color: var(--ag-ui-success);\n}\n\n.tool-call[data-status=\"error\"] .tool-call-icon::before {\n  content: var(--ag-ui-tool-icon-error);\n  color: var(--ag-ui-danger);\n}\n\n.tool-call[data-status=\"declined\"] .tool-call-icon::before {\n  content: var(--ag-ui-tool-icon-declined);\n  color: var(--ag-ui-muted);\n}\n\n@media (prefers-reduced-motion: reduce) {\n  .tool-call[data-status=\"pending\"] .tool-call-icon {\n    animation: none;\n  }\n}\n\n/* Inline display mode: the lightest card. Drop the box chrome so the status row\n   reads as one line of the answer; the result toggle still expands below it. */\n:host([data-tool-display=\"inline\"]) .tool-call {\n  max-width: 100%;\n  background: transparent;\n  border: none;\n  padding: 2px 0;\n  gap: 2px;\n}\n\n.tool-call-status {\n  flex: none;\n  padding: 1px 8px;\n  border-radius: 999px;\n  font-size: 11px;\n  font-weight: 600;\n  background: rgba(127, 127, 127, 0.16);\n  color: var(--ag-ui-muted);\n}\n\n.tool-call[data-status=\"done\"] .tool-call-status {\n  color: var(--ag-ui-success);\n}\n\n.tool-call[data-status=\"error\"] .tool-call-status {\n  color: var(--ag-ui-danger);\n}\n\n.tool-call[data-status=\"declined\"] .tool-call-status {\n  color: var(--ag-ui-muted);\n}\n\n.tool-call-body {\n  display: flex;\n  flex-direction: column;\n  gap: 6px;\n}\n\n.tool-call-section {\n  display: flex;\n  flex-direction: column;\n  gap: 3px;\n}\n\n/* The heading that tells the two payloads apart. Without it the arguments and\n   the result were one run of text and a reader had to guess the boundary. */\n.tool-call-section-label {\n  font-size: 10px;\n  font-weight: 700;\n  letter-spacing: 0.06em;\n  text-transform: uppercase;\n  color: var(--ag-ui-muted);\n}\n\n/* The record of a human decision on a gated call. An approved call used to\n   look exactly like one that was never gated. */\n.tool-call-decision {\n  flex: none;\n  font-size: 11px;\n  font-style: italic;\n  color: var(--ag-ui-muted);\n}\n\n.tool-call-args,\n.tool-call-result {\n  margin: 0;\n  padding: 6px 8px;\n  max-height: 160px;\n  overflow: auto;\n  background: var(--ag-ui-bg);\n  border: 1px solid var(--ag-ui-border);\n  border-radius: 6px;\n  white-space: pre-wrap;\n  word-break: break-word;\n  color: var(--ag-ui-fg);\n}\n\n/* Display modes are pure visibility over one DOM shape, selected from the host\n   attribute rather than a value stamped on the card when it was built. That is\n   what lets a host flip data-tool-display and have every card already on screen\n   re-read it, the way data-answer-well behaves. Baking the structure per mode\n   meant the setting only reached cards created afterwards.\n\n   Default (no attribute) is the full mode: arguments always visible, result\n   behind the toggle. */\n.tool-call[data-expanded=\"false\"] .tool-call-section--result {\n  display: none;\n}\n\n/* Compact: one toggle over both regions, so a settled card is a single line\n   until asked. */\n:host([data-tool-display=\"compact\"]) .tool-call[data-expanded=\"false\"] .tool-call-section {\n  display: none;\n}\n\n/* Inline: the result only; the call's arguments are noise at this density. */\n:host([data-tool-display=\"inline\"]) .tool-call .tool-call-section--args {\n  display: none;\n}\n\n/* Minimal: the status row and nothing else, so there is no toggle to press. */\n:host([data-tool-display=\"minimal\"]) .tool-call .tool-call-toggle,\n:host([data-tool-display=\"minimal\"]) .tool-call .tool-call-body {\n  display: none;\n}\n\n/* A pending card has no result yet, and in the modes where the arguments are\n   hidden too there is nothing behind the toggle. Hide the control rather than\n   offer one that expands onto nothing. */\n.tool-call[data-status=\"pending\"] .tool-call-toggle,\n:host([data-tool-display=\"inline\"]) .tool-call[data-status=\"pending\"] .tool-call-toggle {\n  display: none;\n}\n\n.tool-call-toggle {\n  align-self: flex-start;\n  border: none;\n  padding: 0;\n  background: none;\n  font: inherit;\n  font-weight: 600;\n  color: var(--ag-ui-accent);\n  cursor: pointer;\n}\n\n.tool-call-toggle::before {\n  content: \"\u25B8 \";\n}\n\n.tool-call-toggle[aria-expanded=\"true\"]::before {\n  content: \"\u25BE \";\n}\n\n.input-row {\n  display: flex;\n  gap: 8px;\n  padding: 12px;\n  border-top: 1px solid var(--ag-ui-border);\n}\n\n.input {\n  flex: 1;\n  resize: none;\n  background: var(--ag-ui-input-bg);\n  border: 1px solid var(--ag-ui-border);\n  border-radius: 8px;\n  padding: 8px 10px;\n  font: inherit;\n  color: inherit;\n  outline: none;\n}\n\n.input:focus {\n  border-color: var(--ag-ui-accent);\n}\n\n.send {\n  border: none;\n  border-radius: 8px;\n  padding: 0 16px;\n  background: var(--ag-ui-accent);\n  color: #ffffff;\n  font: inherit;\n  font-weight: 600;\n  cursor: pointer;\n}\n\n.send:disabled {\n  opacity: 0.5;\n  cursor: default;\n}\n\n/* The composer button doubles as the Stop control while a run is in flight. */\n.send[data-state=\"running\"] {\n  background: var(--ag-ui-muted);\n}\n\n/* \u2500\u2500 File attachments \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */\n/* The \uD83D\uDCCE picker button sits left of the input; hidden until data-attachments-url. */\n.attach-btn {\n  border: 1px solid var(--ag-ui-border);\n  border-radius: 8px;\n  padding: 0 10px;\n  background: var(--ag-ui-input-bg);\n  color: inherit;\n  font: inherit;\n  cursor: pointer;\n}\n\n.attach-btn:hover {\n  border-color: var(--ag-ui-accent);\n}\n\n.attach-input {\n  display: none;\n}\n\n/* The \uD83C\uDFA4 mic button; shown only once #wireVoice mounts it. */\n.voice-slot {\n  display: contents;\n}\n\n.voice-btn {\n  border: 1px solid var(--ag-ui-border);\n  border-radius: 8px;\n  padding: 0 10px;\n  background: var(--ag-ui-input-bg);\n  color: inherit;\n  font: inherit;\n  cursor: pointer;\n}\n\n.voice-btn:hover {\n  border-color: var(--ag-ui-accent);\n}\n\n.voice-btn:disabled {\n  cursor: default;\n  opacity: 0.6;\n}\n\n/* Recording: a red tint + a gentle pulse so it's clearly \"live\". */\n.voice-btn[data-state=\"recording\"] {\n  border-color: var(--ag-ui-danger);\n  background: var(--ag-ui-danger);\n  color: #ffffff;\n  animation: ag-ui-voice-pulse 1.2s ease-in-out infinite;\n}\n\n@keyframes ag-ui-voice-pulse {\n  0%, 100% { opacity: 1; }\n  50% { opacity: 0.6; }\n}\n\n@media (prefers-reduced-motion: reduce) {\n  .voice-btn[data-state=\"recording\"] {\n    animation: none;\n  }\n}\n\n/* Pending-attachments tray, above the input row; collapses (hidden) when empty. */\n.attachment-slot {\n  display: contents;\n}\n\n.attachment-tray {\n  display: flex;\n  flex-wrap: wrap;\n  gap: 6px;\n  padding: 8px 12px 0;\n}\n\n.attachment-chips {\n  display: flex;\n  flex-wrap: wrap;\n  gap: 6px;\n  margin-top: 6px;\n}\n\n.run-notice {\n  display: inline-flex;\n  align-items: center;\n  gap: 6px;\n  align-self: flex-start;\n  max-width: 100%;\n  margin: 2px 0;\n  padding: 3px 10px;\n  border: 1px dashed var(--ag-ui-border);\n  border-radius: 999px;\n  background: transparent;\n  color: var(--ag-ui-muted);\n  font-size: 0.8em;\n  line-height: 1.4;\n}\n\n.run-notice-icon {\n  flex: none;\n  opacity: 0.75;\n}\n\n.run-notice-text {\n  min-width: 0;\n  overflow-wrap: anywhere;\n}\n\n.attachment-chip {\n  display: inline-flex;\n  align-items: center;\n  gap: 6px;\n  max-width: 100%;\n  padding: 4px 8px;\n  border: 1px solid var(--ag-ui-border);\n  border-radius: 999px;\n  background: var(--ag-ui-assistant-bg);\n  font-size: 0.85em;\n  position: relative;\n}\n\n.attachment-chip--error {\n  border-color: var(--ag-ui-danger);\n  color: var(--ag-ui-danger);\n}\n\n.attachment-chip-name {\n  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n  max-width: 14ch;\n}\n\n.attachment-chip-size {\n  color: var(--ag-ui-muted);\n  white-space: nowrap;\n}\n\n.attachment-chip--error .attachment-chip-size {\n  color: var(--ag-ui-danger);\n}\n\n/* The progress bar fills as the file uploads. */\n.attachment-chip-bar {\n  flex-basis: 100%;\n  height: 3px;\n  border-radius: 2px;\n  background: var(--ag-ui-border);\n  overflow: hidden;\n}\n\n.attachment-chip-bar-fill {\n  height: 100%;\n  background: var(--ag-ui-accent);\n  transition: width 0.15s ease;\n}\n\n.attachment-chip-remove,\n.attachment-chip-retry {\n  border: none;\n  background: none;\n  color: inherit;\n  cursor: pointer;\n  padding: 0;\n  line-height: 1;\n  opacity: 0.7;\n}\n\n.attachment-chip-remove:hover,\n.attachment-chip-retry:hover {\n  opacity: 1;\n}\n\n/* A subtle outline while a file is dragged over the shell. */\n.chat--dragover {\n  outline: 2px dashed var(--ag-ui-accent);\n  outline-offset: -4px;\n}\n\n/* Muted \"\u23F9 Stopped\" line after a cancelled run \u2014 a note, not an error bubble. */\n.stopped-note {\n  align-self: flex-start;\n  color: var(--ag-ui-muted);\n  font-size: 12px;\n  padding: 2px 4px;\n}\n\n/* Inline confirmation card \u2014 lives in the transcript, no focus-stealing overlay. */\n.confirm {\n  align-self: stretch;\n  box-sizing: border-box;\n  display: flex;\n  flex-direction: column;\n  gap: 8px;\n  padding: 12px;\n  background: var(--ag-ui-bg);\n  border: 1px solid var(--ag-ui-accent);\n  border-radius: 10px;\n}\n\n.confirm[data-resolved] {\n  opacity: 0.7;\n  border-color: var(--ag-ui-border);\n}\n\n.confirm-body {\n  font-weight: 600;\n}\n\n.confirm-args {\n  margin: 0;\n  padding: 8px 10px;\n  max-height: 140px;\n  overflow: auto;\n  font-size: 12px;\n  font-family: ui-monospace, \"SF Mono\", Menlo, monospace;\n  background: var(--ag-ui-assistant-bg);\n  border-radius: 8px;\n  white-space: pre-wrap;\n  word-break: break-word;\n}\n\n.confirm-actions {\n  display: flex;\n  gap: 8px;\n  justify-content: flex-end;\n}\n\n.confirm-btn {\n  border: 1px solid var(--ag-ui-border);\n  border-radius: 8px;\n  padding: 8px 14px;\n  font: inherit;\n  font-weight: 600;\n  cursor: pointer;\n  background: var(--ag-ui-bg);\n  color: var(--ag-ui-fg);\n}\n\n.confirm-btn:disabled {\n  cursor: default;\n  opacity: 0.6;\n}\n\n.confirm-btn--confirm {\n  border-color: var(--ag-ui-accent);\n  background: var(--ag-ui-accent);\n  color: #ffffff;\n}\n\n/* Approval card \u2014 the server-side-tool gate (approve/deny an interrupt). */\n.approval {\n  align-self: stretch;\n  box-sizing: border-box;\n  display: flex;\n  flex-direction: column;\n  gap: 8px;\n  padding: 12px;\n  background: var(--ag-ui-bg);\n  border: 1px solid var(--ag-ui-accent);\n  border-radius: 10px;\n}\n\n.approval[data-resolved] {\n  opacity: 0.7;\n  border-color: var(--ag-ui-border);\n}\n\n.approval-body {\n  font-weight: 600;\n}\n\n.approval-actions {\n  display: flex;\n  gap: 8px;\n  justify-content: flex-end;\n}\n\n.approval-btn {\n  border: 1px solid var(--ag-ui-border);\n  border-radius: 8px;\n  padding: 8px 14px;\n  font: inherit;\n  font-weight: 600;\n  cursor: pointer;\n  background: var(--ag-ui-bg);\n  color: var(--ag-ui-fg);\n}\n\n.approval-btn:disabled {\n  cursor: default;\n  opacity: 0.6;\n}\n\n.approval-btn--approve {\n  border-color: var(--ag-ui-accent);\n  background: var(--ag-ui-accent);\n  color: #ffffff;\n}\n\n/* Question card \u2014 the built-in ask_user prompt (radios and/or free text). */\n.question {\n  align-self: stretch;\n  box-sizing: border-box;\n  display: flex;\n  flex-direction: column;\n  gap: 8px;\n  padding: 12px;\n  background: var(--ag-ui-bg);\n  border: 1px solid var(--ag-ui-accent);\n  border-radius: 10px;\n}\n\n.question[data-resolved] {\n  opacity: 0.7;\n  border-color: var(--ag-ui-border);\n}\n\n.question-body {\n  font-weight: 600;\n}\n\n.question-options {\n  display: flex;\n  flex-direction: column;\n  gap: 6px;\n}\n\n.question-choice {\n  display: flex;\n  align-items: center;\n  gap: 8px;\n  cursor: pointer;\n}\n\n.question-input {\n  box-sizing: border-box;\n  width: 100%;\n  padding: 8px 10px;\n  font: inherit;\n  color: var(--ag-ui-fg);\n  background: var(--ag-ui-bg);\n  border: 1px solid var(--ag-ui-border);\n  border-radius: 8px;\n}\n\n.question-input:disabled {\n  opacity: 0.6;\n}\n\n.question-actions {\n  display: flex;\n  justify-content: flex-end;\n}\n\n.question-btn {\n  border: 1px solid var(--ag-ui-accent);\n  border-radius: 8px;\n  padding: 8px 14px;\n  font: inherit;\n  font-weight: 600;\n  cursor: pointer;\n  background: var(--ag-ui-accent);\n  color: #ffffff;\n}\n\n.question-btn:disabled {\n  cursor: default;\n  opacity: 0.6;\n}\n\n/* Skills \u2014 chips row + the /-command palette, above the input. */\n.skill-chips {\n  display: flex;\n  flex-wrap: wrap;\n  gap: 6px;\n  padding: 10px 12px;\n}\n\n.skill-chip {\n  border: 1px solid var(--ag-ui-border);\n  border-radius: 999px;\n  padding: 4px 12px;\n  font: inherit;\n  font-size: 0.9em;\n  cursor: pointer;\n  background: var(--ag-ui-assistant-bg);\n  color: var(--ag-ui-fg);\n}\n\n.skill-chip:hover {\n  border-color: var(--ag-ui-accent);\n}\n\n.skill-palette {\n  margin: 8px 12px 0;\n  display: flex;\n  flex-direction: column;\n  max-height: 220px;\n  overflow: auto;\n  background: var(--ag-ui-bg);\n  border: 1px solid var(--ag-ui-border);\n  border-radius: 8px;\n  box-shadow: 0 8px 24px rgba(20, 20, 50, 0.16);\n}\n\n.skill-item {\n  display: flex;\n  flex-direction: column;\n  gap: 2px;\n  align-items: flex-start;\n  padding: 8px 12px;\n  border: none;\n  background: none;\n  font: inherit;\n  text-align: left;\n  cursor: pointer;\n  color: var(--ag-ui-fg);\n}\n\n.skill-item[aria-selected=\"true\"] {\n  background: var(--ag-ui-assistant-bg);\n}\n\n.skill-item-title {\n  font-weight: 600;\n}\n\n.skill-item-desc {\n  font-size: 0.85em;\n  color: var(--ag-ui-muted);\n}\n\n.skill-hint {\n  margin: 8px 12px 0;\n  font-size: 0.85em;\n  color: var(--ag-ui-danger);\n}\n\n/* Chat-history drawer \u2014 a slide-over within the chat panel. */\n.drawer {\n  position: absolute;\n  inset: 0;\n  z-index: 5;\n  display: flex;\n}\n\n.drawer[hidden] {\n  display: none;\n}\n\n.checkpoints {\n  position: absolute;\n  inset-block-start: 3rem;\n  inset-inline: 0.75rem;\n  z-index: 6;\n  display: flex;\n  flex-direction: column;\n  gap: 0.25rem;\n  padding: 0.5rem;\n  border: 1px solid var(--ag-ui-border);\n  border-radius: 0.5rem;\n  background: var(--ag-ui-assistant-bg);\n  box-shadow: 0 6px 24px rgb(0 0 0 / 12%);\n  max-height: 60%;\n  overflow-y: auto;\n}\n\n.checkpoints[hidden] {\n  display: none;\n}\n\n.checkpoints-title {\n  font-size: 0.75rem;\n  font-weight: 600;\n  opacity: 0.7;\n}\n\n.checkpoints-empty {\n  padding: 0.5rem 0.25rem;\n  font-size: 0.8125rem;\n  opacity: 0.7;\n}\n\n.checkpoint-row {\n  display: flex;\n  align-items: center;\n  gap: 0.5rem;\n  padding: 0.25rem;\n  border-radius: 0.375rem;\n}\n\n.checkpoint-row:hover {\n  background: var(--ag-ui-hover);\n}\n\n.checkpoint-label {\n  flex: 1;\n  font-size: 0.8125rem;\n  white-space: nowrap;\n  overflow: hidden;\n  text-overflow: ellipsis;\n}\n\n.checkpoint-branch {\n  font-size: 0.6875rem;\n  padding: 0 0.375rem;\n  border-radius: 999px;\n  background: var(--ag-ui-hover);\n  opacity: 0.8;\n}\n\n.checkpoint-action {\n  font: inherit;\n  font-size: 0.75rem;\n  cursor: pointer;\n  padding: 0.125rem 0.5rem;\n  border: 1px solid var(--ag-ui-border);\n  border-radius: 0.375rem;\n  background: transparent;\n  color: inherit;\n}\n\n.checkpoint-action:hover {\n  background: var(--ag-ui-hover);\n}\n\n.drawer-backdrop {\n  position: absolute;\n  inset: 0;\n  background: rgba(20, 20, 50, 0.32);\n}\n\n.drawer-panel {\n  position: relative;\n  display: flex;\n  flex-direction: column;\n  width: min(300px, 85%);\n  height: 100%;\n  background: var(--ag-ui-bg);\n  border-right: 1px solid var(--ag-ui-border);\n  box-shadow: var(--ag-ui-shadow);\n  overflow: hidden;\n}\n\n.drawer-header {\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  gap: var(--ag-ui-space);\n  padding: var(--ag-ui-pad);\n  border-bottom: 1px solid var(--ag-ui-border);\n}\n\n.drawer-title {\n  font-weight: 600;\n}\n\n.drawer-new {\n  border: 1px solid var(--ag-ui-border);\n  border-radius: var(--ag-ui-radius);\n  background: var(--ag-ui-bg);\n  color: var(--ag-ui-accent);\n  padding: 4px 10px;\n  font: inherit;\n  font-size: 0.85em;\n  cursor: pointer;\n}\n\n.drawer-list {\n  flex: 1;\n  min-height: 0;\n  overflow-y: auto;\n}\n\n.drawer-empty {\n  padding: var(--ag-ui-pad);\n  font-size: 0.9em;\n  color: var(--ag-ui-muted);\n}\n\n.drawer-row {\n  display: flex;\n  align-items: stretch;\n  border-bottom: 1px solid var(--ag-ui-border);\n}\n\n.drawer-row--active {\n  background: var(--ag-ui-assistant-bg);\n}\n\n.drawer-row-select {\n  flex: 1;\n  min-width: 0;\n  display: flex;\n  flex-direction: column;\n  gap: 2px;\n  padding: 8px 12px;\n  border: none;\n  background: none;\n  color: inherit;\n  font: inherit;\n  text-align: left;\n  cursor: pointer;\n}\n\n.drawer-row-title {\n  font-weight: 600;\n  overflow: hidden;\n  white-space: nowrap;\n  text-overflow: ellipsis;\n}\n\n.drawer-row-time {\n  font-size: 0.72em;\n  color: var(--ag-ui-muted);\n}\n\n.drawer-row-preview {\n  font-size: 0.8em;\n  color: var(--ag-ui-muted);\n  overflow: hidden;\n  white-space: nowrap;\n  text-overflow: ellipsis;\n}\n\n.drawer-row-actions {\n  display: flex;\n  align-items: center;\n  gap: 2px;\n  padding: 0 6px;\n}\n\n.drawer-row-rename,\n.drawer-row-delete {\n  border: none;\n  background: none;\n  color: var(--ag-ui-muted);\n  font-size: 0.9em;\n  padding: 4px;\n  cursor: pointer;\n}\n\n.drawer-rename-input {\n  flex: 1;\n  min-width: 0;\n  margin: 6px 10px;\n  padding: 4px 8px;\n  border: 1px solid var(--ag-ui-accent);\n  border-radius: 6px;\n  background: var(--ag-ui-input-bg);\n  color: var(--ag-ui-fg);\n  font: inherit;\n}\n\n.drawer-confirm {\n  display: flex;\n  align-items: center;\n  gap: 8px;\n  padding: 8px 12px;\n  font-size: 0.85em;\n}\n\n.drawer-confirm-label {\n  color: var(--ag-ui-danger);\n}\n\n.drawer-confirm-yes {\n  border: none;\n  border-radius: 6px;\n  background: var(--ag-ui-danger);\n  color: #ffffff;\n  padding: 3px 10px;\n  font: inherit;\n  cursor: pointer;\n}\n\n.drawer-confirm-no {\n  border: 1px solid var(--ag-ui-border);\n  border-radius: 6px;\n  background: none;\n  color: inherit;\n  padding: 3px 10px;\n  font: inherit;\n  cursor: pointer;\n}\n\n/* Embedded placement: an inline, flush side panel rather than a dimmed,\n   floating slide-over. */\n:host([placement=\"embedded\"]) .drawer-backdrop {\n  background: none;\n}\n\n:host([placement=\"embedded\"]) .drawer-panel {\n  width: 100%;\n  border-right: none;\n  box-shadow: none;\n}\n";
 //# sourceMappingURL=styles.d.ts.map

package/dist/ui/styles.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"styles.d.ts","sourceRoot":"","sources":["../../src/ui/styles.ts"],"names":[],"mappings":"AAIA,eAAO,MAAM,MAAM,q2qCA0iDlB,CAAC"}
+{"version":3,"file":"styles.d.ts","sourceRoot":"","sources":["../../src/ui/styles.ts"],"names":[],"mappings":"AAIA,eAAO,MAAM,MAAM,iovCA6mDlB,CAAC"}

package/dist/ui/tool_call_card.d.ts

@@ -1,4 +1,4 @@
-import { TOOL_CALL_STATUS, TOOL_DISPLAY } from "../constants.js";
+import { TOOL_CALL_STATUS, type TOOL_DISPLAY } from "../constants.js";
 import { type UiStrings } from "./ui_strings.js";
 /** Any state a tool-call card can be in. */
 export type ToolCallStatus = (typeof TOOL_CALL_STATUS)[keyof typeof TOOL_CALL_STATUS];
@@ -9,16 +9,20 @@ export type SettledStatus = Exclude<ToolCallStatus, typeof TOOL_CALL_STATUS.PEND
 /**
  * A live tool-call card for the chat transcript.
  *
- * Construction renders a status icon, the tool name, and a `running…` status
- * pill; in `full` mode it also shows the pretty-printed arguments inline.
- * {@link settle} later flips the pill to the outcome and — depending on the
- * {@link ToolDisplayMode} — appends a collapsible body:
+ * Construction renders a status icon, the tool name, a `running…` pill, and the
+ * card's body: an **arguments** region and a **result** region, each with its own
+ * heading and its own `part`. {@link settle} fills in the result and flips the
+ * pill. Both payloads are pretty-printed, and the two are never concatenated —
+ * the previous compact layout ran `args: {...}` and the result together in one
+ * `<pre>`, leaving no way to see where the call ended and the answer began.
  *
- * - `inline` — no args; the result behind its own toggle (like `full` but with
- *   the card chrome stripped to a single light row).
- * - `minimal` — pill only; nothing to expand.
- * - `compact` — one "Details" toggle revealing args *and* result together.
- * - `full` — the result (or error / decline message) behind its own toggle.
+ * **The card renders one DOM shape in every display mode, and CSS decides what
+ * shows.** That is what makes `data-tool-display` behave like `data-answer-well`
+ * — flip it on the host and every card already on screen re-reads it. Building a
+ * different structure per mode meant only cards created *after* the change
+ * picked it up, so the setting appeared not to work until the next conversation.
+ * Visibility is selected from the host attribute rather than a value copied onto
+ * the card at construction, for the same reason.
  *
  * The leading icon carries no text of its own: its glyph/spinner is drawn by
  * the shadow CSS keyed off the card's `data-status`, so a host themes it via
@@ -33,13 +37,21 @@ export declare class ToolCallCard {
     #private;
     /** The card's root element; append this into the message list. */
     readonly element: HTMLDivElement;
-    constructor(name: string, args: Record<string, unknown>, mode?: ToolDisplayMode, summary?: string, strings?: UiStrings);
+    constructor(name: string, args: Record<string, unknown>, summary?: string, strings?: UiStrings);
+    /**
+     * Record that a human approved or declined this call, as a line in the card.
+     *
+     * Approval used to leave no trace at all: a declined call became a tool
+     * result saying so, while an approved one simply ran, making the transcript
+     * of a gated call byte-identical to one that was never gated. The prompt is
+     * gone once answered, so this is where the decision lives.
+     */
+    recordDecision(kind: "approved" | "declined"): void;
     /** Whether {@link settle} has already run (so a terminal sweep can skip it). */
     get settled(): boolean;
     /**
-     * Flip the status pill to ``status`` and, unless in `minimal` mode, append a
-     * collapsed body behind a click-to-expand toggle: the result alone (`full` /
-     * `inline`), or the args + result together (`compact`).
+     * Flip the status pill to `status` and fill in the result region, whose
+     * heading names the outcome (result / error / declined).
      */
     settle(status: SettledStatus, text: string): void;
 }

package/dist/ui/tool_call_card.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"tool_call_card.d.ts","sourceRoot":"","sources":["../../src/ui/tool_call_card.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,gBAAgB,EAAE,YAAY,EAAE,MAAM,iBAAiB,CAAC;AACjE,OAAO,EAAsB,KAAK,SAAS,EAAE,MAAM,iBAAiB,CAAC;AAErE,4CAA4C;AAC5C,MAAM,MAAM,cAAc,GAAG,CAAC,OAAO,gBAAgB,CAAC,CAAC,MAAM,OAAO,gBAAgB,CAAC,CAAC;AAEtF,sCAAsC;AACtC,MAAM,MAAM,eAAe,GAAG,CAAC,OAAO,YAAY,CAAC,CAAC,MAAM,OAAO,YAAY,CAAC,CAAC;AAE/E,0EAA0E;AAC1E,MAAM,MAAM,aAAa,GAAG,OAAO,CAAC,cAAc,EAAE,OAAO,gBAAgB,CAAC,OAAO,CAAC,CAAC;AAqBrF;;;;;;;;;;;;;;;;;;;;;;GAsBG;AACH,qBAAa,YAAY;;IACvB,kEAAkE;IAClE,QAAQ,CAAC,OAAO,EAAE,cAAc,CAAC;IAQjC,YACE,IAAI,EAAE,MAAM,EACZ,IAAI,EAAE,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,EAC7B,IAAI,GAAE,eAAmC,EACzC,OAAO,CAAC,EAAE,MAAM,EAChB,OAAO,GAAE,SAA8B,EA8CxC;IAED,gFAAgF;IAChF,IAAI,OAAO,IAAI,OAAO,CAErB;IAED;;;;OAIG;IACH,MAAM,CAAC,MAAM,EAAE,aAAa,EAAE,IAAI,EAAE,MAAM,GAAG,IAAI,CAyChD;CACF"}
+{"version":3,"file":"tool_call_card.d.ts","sourceRoot":"","sources":["../../src/ui/tool_call_card.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,gBAAgB,EAAE,KAAK,YAAY,EAAE,MAAM,iBAAiB,CAAC;AACtE,OAAO,EAAsB,KAAK,SAAS,EAAE,MAAM,iBAAiB,CAAC;AAErE,4CAA4C;AAC5C,MAAM,MAAM,cAAc,GAAG,CAAC,OAAO,gBAAgB,CAAC,CAAC,MAAM,OAAO,gBAAgB,CAAC,CAAC;AAEtF,sCAAsC;AACtC,MAAM,MAAM,eAAe,GAAG,CAAC,OAAO,YAAY,CAAC,CAAC,MAAM,OAAO,YAAY,CAAC,CAAC;AAE/E,0EAA0E;AAC1E,MAAM,MAAM,aAAa,GAAG,OAAO,CAAC,cAAc,EAAE,OAAO,gBAAgB,CAAC,OAAO,CAAC,CAAC;AA8BrF;;;;;;;;;;;;;;;;;;;;;;;;;;GA0BG;AACH,qBAAa,YAAY;;IACvB,kEAAkE;IAClE,QAAQ,CAAC,OAAO,EAAE,cAAc,CAAC;IAWjC,YACE,IAAI,EAAE,MAAM,EACZ,IAAI,EAAE,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,EAC7B,OAAO,CAAC,EAAE,MAAM,EAChB,OAAO,GAAE,SAA8B,EAqExC;IAED;;;;;;;OAOG;IACH,cAAc,CAAC,IAAI,EAAE,UAAU,GAAG,UAAU,GAAG,IAAI,CAKlD;IAED,gFAAgF;IAChF,IAAI,OAAO,IAAI,OAAO,CAErB;IAED;;;OAGG;IACH,MAAM,CAAC,MAAM,EAAE,aAAa,EAAE,IAAI,EAAE,MAAM,GAAG,IAAI,CAYhD;CAoCF"}

package/dist/ui/ui_strings.d.ts

@@ -82,13 +82,19 @@ export interface UiStrings {
     toolError: string;
     /** Status pill on a declined call. */
     toolDeclined: string;
-    /** Toggle label revealing a successful result (full mode). */
+    /** Note on a tool card whose call a human approved. */
+    decisionApproved: string;
+    /** Note on a tool card whose call a human declined. */
+    decisionDeclined: string;
+    /** Heading over a tool card's arguments region. */
+    argumentsLabel: string;
+    /** Heading over a tool card's result region when the call succeeded. */
     resultLabel: string;
-    /** Toggle label revealing an error (full mode). */
+    /** Heading over a tool card's result region when the call failed. */
     errorLabel: string;
-    /** Toggle label revealing a declined call (full mode). */
+    /** Heading over a tool card's result region when the call was declined. */
     declinedLabel: string;
-    /** Toggle label revealing args + result together (compact mode). */
+    /** Label on the toggle that expands a tool card's body. */
     details: string;
     /** `aria-label` of the inline confirmation card. */
     confirmAction: string;

package/dist/ui/ui_strings.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ui_strings.d.ts","sourceRoot":"","sources":["../../src/ui/ui_strings.ts"],"names":[],"mappings":"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"}
+{"version":3,"file":"ui_strings.d.ts","sourceRoot":"","sources":["../../src/ui/ui_strings.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;GAeG;AACH,MAAM,WAAW,SAAS;IAExB,+EAA+E;IAC/E,KAAK,EAAE,MAAM,CAAC;IACd,4CAA4C;IAC5C,WAAW,EAAE,MAAM,CAAC;IACpB,yCAAyC;IACzC,OAAO,EAAE,MAAM,CAAC;IAChB,uBAAuB;IACvB,QAAQ,EAAE,MAAM,CAAC;IACjB,mDAAmD;IACnD,MAAM,EAAE,MAAM,CAAC;IACf,mDAAmD;IACnD,WAAW,EAAE,MAAM,CAAC;IAGpB,iDAAiD;IACjD,YAAY,EAAE,MAAM,CAAC;IACrB;oDACgD;IAChD,QAAQ,EAAE,MAAM,CAAC;IACjB,kFAAkF;IAClF,QAAQ,EAAE,MAAM,CAAC;IACjB,4CAA4C;IAC5C,OAAO,EAAE,MAAM,CAAC;IAChB,wEAAwE;IACxE,cAAc,EAAE,MAAM,CAAC;IACvB,oDAAoD;IACpD,QAAQ,EAAE,MAAM,CAAC;IACjB,qEAAqE;IACrE,cAAc,EAAE,MAAM,CAAC;IACvB,4DAA4D;IAC5D,UAAU,EAAE,MAAM,CAAC;IACnB,qEAAqE;IACrE,UAAU,EAAE,MAAM,CAAC;IACnB,6EAA6E;IAC7E,gBAAgB,EAAE,MAAM,CAAC;IACzB,yEAAyE;IACzE,UAAU,EAAE,MAAM,CAAC;IACnB,6EAA6E;IAC7E,cAAc,EAAE,MAAM,CAAC;IACvB,uEAAuE;IACvE,SAAS,EAAE,MAAM,CAAC;IAClB,2EAA2E;IAC3E,yBAAyB,EAAE,MAAM,CAAC;IAGlC,4CAA4C;IAC5C,OAAO,EAAE,MAAM,CAAC;IAChB,2CAA2C;IAC3C,gBAAgB,EAAE,MAAM,CAAC;IACzB,mCAAmC;IACnC,IAAI,EAAE,MAAM,CAAC;IACb,uDAAuD;IACvD,IAAI,EAAE,MAAM,CAAC;IACb,2BAA2B;IAC3B,WAAW,EAAE,MAAM,CAAC;IACpB,+CAA+C;IAC/C,WAAW,EAAE,MAAM,CAAC;IACpB,sDAAsD;IACtD,aAAa,EAAE,MAAM,CAAC;IACtB,sDAAsD;IACtD,YAAY,EAAE,MAAM,CAAC;IACrB,4DAA4D;IAC5D,mBAAmB,EAAE,MAAM,CAAC;IAG5B,uCAAuC;IACvC,WAAW,EAAE,MAAM,CAAC;IACpB,8BAA8B;IAC9B,QAAQ,EAAE,MAAM,CAAC;IACjB,4BAA4B;IAC5B,SAAS,EAAE,MAAM,CAAC;IAClB,sCAAsC;IACtC,YAAY,EAAE,MAAM,CAAC;IACrB,uDAAuD;IACvD,gBAAgB,EAAE,MAAM,CAAC;IACzB,uDAAuD;IACvD,gBAAgB,EAAE,MAAM,CAAC;IACzB,mDAAmD;IACnD,cAAc,EAAE,MAAM,CAAC;IACvB,wEAAwE;IACxE,WAAW,EAAE,MAAM,CAAC;IACpB,qEAAqE;IACrE,UAAU,EAAE,MAAM,CAAC;IACnB,2EAA2E;IAC3E,aAAa,EAAE,MAAM,CAAC;IACtB,2DAA2D;IAC3D,OAAO,EAAE,MAAM,CAAC;IAGhB,oDAAoD;IACpD,aAAa,EAAE,MAAM,CAAC;IACtB,mFAAmF;IACnF,UAAU,EAAE,MAAM,CAAC;IACnB,sBAAsB;IACtB,OAAO,EAAE,MAAM,CAAC;IAChB,qDAAqD;IACrD,MAAM,EAAE,MAAM,CAAC;IAGf,iEAAiE;IACjE,aAAa,EAAE,MAAM,CAAC;IACtB,sEAAsE;IACtE,cAAc,EAAE,MAAM,CAAC;IACvB,wDAAwD;IACxD,OAAO,EAAE,MAAM,CAAC;IAChB,yDAAyD;IACzD,IAAI,EAAE,MAAM,CAAC;IAGb,gDAAgD;IAChD,aAAa,EAAE,MAAM,CAAC;IACtB,sFAAsF;IACtF,WAAW,EAAE,MAAM,CAAC;IACpB,kDAAkD;IAClD,iBAAiB,EAAE,MAAM,CAAC;IAC1B,2CAA2C;IAC3C,MAAM,EAAE,MAAM,CAAC;IAGf,sBAAsB;IACtB,KAAK,EAAE,MAAM,CAAC;IACd,kDAAkD;IAClD,eAAe,EAAE,MAAM,CAAC;IACxB,mCAAmC;IACnC,MAAM,EAAE,MAAM,CAAC;IACf,sCAAsC;IACtC,kBAAkB,EAAE,MAAM,CAAC;IAC3B,+DAA+D;IAC/D,MAAM,EAAE,MAAM,CAAC;IACf,sCAAsC;IACtC,kBAAkB,EAAE,MAAM,CAAC;IAC3B,oCAAoC;IACpC,YAAY,EAAE,MAAM,CAAC;IAGrB,2CAA2C;IAC3C,QAAQ,EAAE,MAAM,CAAC;IACjB,iCAAiC;IACjC,kBAAkB,EAAE,MAAM,CAAC;IAC3B,kEAAkE;IAClE,YAAY,EAAE,MAAM,CAAC;IACrB,qCAAqC;IACrC,KAAK,EAAE,MAAM,CAAC;IACd,wCAAwC;IACxC,WAAW,EAAE,MAAM,CAAC;IACpB,0CAA0C;IAC1C,MAAM,EAAE,MAAM,CAAC;IACf,6CAA6C;IAC7C,gBAAgB,EAAE,MAAM,CAAC;IAGzB,0BAA0B;IAC1B,OAAO,EAAE,MAAM,CAAC;IAChB,iCAAiC;IACjC,UAAU,EAAE,MAAM,CAAC;IACnB,+BAA+B;IAC/B,QAAQ,EAAE,MAAM,CAAC;IACjB,qCAAqC;IACrC,2CAA2C;IAC3C,QAAQ,EAAE,MAAM,CAAC;IACjB,qEAAqE;IACrE,MAAM,EAAE,MAAM,CAAC;IACf,qEAAqE;IACrE,UAAU,EAAE,MAAM,CAAC;IACnB,WAAW,EAAE,MAAM,CAAC;IACpB,gDAAgD;IAChD,aAAa,EAAE,MAAM,CAAC;IACtB,uDAAuD;IACvD,SAAS,EAAE,MAAM,CAAC;IAClB,0DAA0D;IAC1D,OAAO,EAAE,MAAM,CAAC;IAChB,iDAAiD;IACjD,SAAS,EAAE,MAAM,CAAC;IAClB,8BAA8B;IAC9B,OAAO,EAAE,MAAM,CAAC;IAChB,+BAA+B;IAC/B,QAAQ,EAAE,MAAM,CAAC;CAClB;AAED,8EAA8E;AAC9E,eAAO,MAAM,kBAAkB,EAAE,SA2FhC,CAAC;AAEF;;;;;GAKG;AACH,wBAAgB,cAAc,CAAC,SAAS,EAAE,OAAO,CAAC,SAAS,CAAC,GAAG,SAAS,CASvE"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@artooi/ag-ui-web-component",
-  "version": "0.18.0",
+  "version": "0.19.0",
   "description": "Framework-free <ag-ui-chat> Web Component over the AG-UI protocol. Drop-in chat sidebar with a pluggable client-side tool registry, DOM driver primitives, animations, and destructive-action confirmation modal.",
   "type": "module",
   "main": "./dist/index.js",

package/src/core/ag_ui_chat.ts

@@ -760,7 +760,11 @@ export class AgUiChat extends HTMLElement {
 
   /**
    * How much detail tool-call cards show, from the `data-tool-display`
-   * attribute (`minimal` / `compact` / `full`). Defaults to `full`.
+   * attribute (`minimal` / `inline` / `compact` / `full`). Defaults to `full`.
+   *
+   * Applied by the shadow CSS from the attribute itself, so changing it
+   * restyles every card already in the transcript rather than only the ones
+   * built afterwards.
    */
   get toolDisplay(): ToolDisplayMode {
     const attr = this.getAttribute("data-tool-display");
@@ -1651,7 +1655,17 @@ export class AgUiChat extends HTMLElement {
     this.#root.append(style, this.#chat, this.#rail);
   }
 
-  /** Build a header control button (icon glyph + localized title/aria). */
+  /**
+   * Build a header control button: a named slot a host can project markup into,
+   * with the built-in glyph as the slot's fallback.
+   *
+   * The glyph used to be the button's own `textContent`, which left a host able
+   * to restyle the control through its `part` but unable to replace it — a CSS
+   * `content` override could swap one character for another, and nothing could
+   * supply a brand `<img>` or `<svg>`. This is the same slot-with-fallback
+   * idiom the header icon already uses, so existing embeds render exactly as
+   * before.
+   */
   #headerButton(modifier: string, label: string, glyph: string): HTMLButtonElement {
     const button = document.createElement("button");
     button.type = "button";
@@ -1659,7 +1673,10 @@ export class AgUiChat extends HTMLElement {
     button.setAttribute("part", `header-button ${modifier}-button`);
     button.title = label;
     button.setAttribute("aria-label", label);
-    button.textContent = glyph;
+    const slot = document.createElement("slot");
+    slot.name = `icon-${modifier}`;
+    slot.append(document.createTextNode(glyph));
+    button.append(slot);
     return button;
   }
 
@@ -1962,7 +1979,11 @@ export class AgUiChat extends HTMLElement {
       // The run loop is suspended on this card; a Stop while it's open aborts
       // the controller, resolving the decision as declined.
       this.#confirmAbort = new AbortController();
-      const decision = requestConfirmation(this.#messages, request, {
+      // Into the turn's answer group, like every other inline card. Appending
+      // to the message list made it a sibling *after* the group, so anything
+      // that streamed afterwards rendered above it and the prompt drifted to
+      // the foot of the turn no matter when it was asked.
+      const decision = requestConfirmation(this.#ensureGroup(), request, {
         signal: this.#confirmAbort.signal,
         strings: this.#strings,
       });
@@ -1970,6 +1991,7 @@ export class AgUiChat extends HTMLElement {
       this.#messages.scrollTop = this.#messages.scrollHeight;
       const accepted = await decision;
       this.#confirmAbort = null;
+      card.recordDecision(accepted ? "approved" : "declined");
       if (!accepted) {
         const message = this.#strings.declinedAction;
         card.settle(TOOL_CALL_STATUS.DECLINED, message);
@@ -2300,7 +2322,7 @@ export class AgUiChat extends HTMLElement {
         : (this.toolSummaries[call.name] ??
           this.#toolCatalog[call.name] ??
           prettifyToolName(call.name));
-    const card = new ToolCallCard(call.name, call.args, this.toolDisplay, summary, this.#strings);
+    const card = new ToolCallCard(call.name, call.args, summary, this.#strings);
     this.#toolCards.set(call.id, card);
     this.#ensureGroup().appendChild(card.element);
     this.#updateEmptyState();

package/src/ui/confirmation_card.ts

@@ -40,8 +40,14 @@ export interface ConfirmationOptions {
  * Unlike a modal overlay, the card lives in the transcript right where the
  * action is — it reads naturally after the assistant's explanation and never
  * steals focus from the page. Resolves ``true`` on confirm, ``false`` on
- * cancel. The card stays in the transcript as a resolved record (buttons
- * disabled, `data-resolved` set) rather than vanishing.
+ * cancel.
+ *
+ * **Answering it removes it.** A prompt and a record are two different objects:
+ * the prompt owns the user's attention until it is answered, and the record of
+ * what was decided belongs in the transcript, in order, scrolling with
+ * everything else. The tool card this gates is that record — it settles to
+ * `done` or `declined` and carries the decision. Leaving the spent form in
+ * place made an answered question read as outstanding.
  */
 export function requestConfirmation(
   host: Node & ParentNode,
@@ -66,6 +72,8 @@ export function requestConfirmation(
     args.className = "confirm-args";
     args.setAttribute("part", "confirm-args");
     args.textContent = JSON.stringify(request.args, null, 2);
+    // A call with no arguments rendered the string "{}" in a box of its own.
+    args.hidden = Object.keys(request.args).length === 0;
 
     const actions = document.createElement("div");
     actions.className = "confirm-actions";
@@ -80,9 +88,11 @@ export function requestConfirmation(
         return;
       }
       settled = true;
-      cancel.disabled = true;
-      confirm.disabled = true;
-      card.setAttribute("data-resolved", accepted ? "confirmed" : "declined");
+      // The prompt leaves once it has been answered. What stays is the tool
+      // card next to it, which settles to the outcome and scrolls with the rest
+      // of the transcript -- a record of the action rather than a spent form
+      // sitting there as a standing reminder of one.
+      card.remove();
       resolve(accepted);
     };
 

package/src/ui/styles.ts

@@ -772,10 +772,9 @@ export const STYLES = `
   }
 }
 
-/* Inline display mode: the lightest card — drop the box chrome so the
-   status row reads as one line of the answer; the result toggle still expands
-   below it. */
-.tool-call[data-display="inline"] {
+/* Inline display mode: the lightest card. Drop the box chrome so the status row
+   reads as one line of the answer; the result toggle still expands below it. */
+:host([data-tool-display="inline"]) .tool-call {
   max-width: 100%;
   background: transparent;
   border: none;
@@ -805,6 +804,37 @@ export const STYLES = `
   color: var(--ag-ui-muted);
 }
 
+.tool-call-body {
+  display: flex;
+  flex-direction: column;
+  gap: 6px;
+}
+
+.tool-call-section {
+  display: flex;
+  flex-direction: column;
+  gap: 3px;
+}
+
+/* The heading that tells the two payloads apart. Without it the arguments and
+   the result were one run of text and a reader had to guess the boundary. */
+.tool-call-section-label {
+  font-size: 10px;
+  font-weight: 700;
+  letter-spacing: 0.06em;
+  text-transform: uppercase;
+  color: var(--ag-ui-muted);
+}
+
+/* The record of a human decision on a gated call. An approved call used to
+   look exactly like one that was never gated. */
+.tool-call-decision {
+  flex: none;
+  font-size: 11px;
+  font-style: italic;
+  color: var(--ag-ui-muted);
+}
+
 .tool-call-args,
 .tool-call-result {
   margin: 0;
@@ -819,6 +849,43 @@ export const STYLES = `
   color: var(--ag-ui-fg);
 }
 
+/* Display modes are pure visibility over one DOM shape, selected from the host
+   attribute rather than a value stamped on the card when it was built. That is
+   what lets a host flip data-tool-display and have every card already on screen
+   re-read it, the way data-answer-well behaves. Baking the structure per mode
+   meant the setting only reached cards created afterwards.
+
+   Default (no attribute) is the full mode: arguments always visible, result
+   behind the toggle. */
+.tool-call[data-expanded="false"] .tool-call-section--result {
+  display: none;
+}
+
+/* Compact: one toggle over both regions, so a settled card is a single line
+   until asked. */
+:host([data-tool-display="compact"]) .tool-call[data-expanded="false"] .tool-call-section {
+  display: none;
+}
+
+/* Inline: the result only; the call's arguments are noise at this density. */
+:host([data-tool-display="inline"]) .tool-call .tool-call-section--args {
+  display: none;
+}
+
+/* Minimal: the status row and nothing else, so there is no toggle to press. */
+:host([data-tool-display="minimal"]) .tool-call .tool-call-toggle,
+:host([data-tool-display="minimal"]) .tool-call .tool-call-body {
+  display: none;
+}
+
+/* A pending card has no result yet, and in the modes where the arguments are
+   hidden too there is nothing behind the toggle. Hide the control rather than
+   offer one that expands onto nothing. */
+.tool-call[data-status="pending"] .tool-call-toggle,
+:host([data-tool-display="inline"]) .tool-call[data-status="pending"] .tool-call-toggle {
+  display: none;
+}
+
 .tool-call-toggle {
   align-self: flex-start;
   border: none;