@artooi/ag-ui-web-component 0.7.0 → 0.8.0

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-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  /* 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\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-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-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-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/* Sidebar (CUST-3): 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 (CUST-2): 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 (CUST-1 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.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.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.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.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  font-weight: 600;\n  word-break: break-word;\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/* 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.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/* 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.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-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-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-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-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 (PAGE-1): 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/* 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 (CUST-3): 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 (CUST-2): 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 (CUST-1 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 (WELL-1) \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\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.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.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.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 (CARD-1). 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 (CARD-1): 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/* 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.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/* 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.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,q6vBA0gClB,CAAC"}
+{"version":3,"file":"styles.d.ts","sourceRoot":"","sources":["../../src/ui/styles.ts"],"names":[],"mappings":"AAIA,eAAO,MAAM,MAAM,st4BAqoClB,CAAC"}

package/dist/ui/tool_call_card.d.ts

@@ -9,15 +9,22 @@ export type SettledStatus = Exclude<ToolCallStatus, typeof TOOL_CALL_STATUS.PEND
 /**
  * A live tool-call card for the chat transcript.
  *
- * Construction renders 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, 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:
  *
+ * - `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 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
+ * the `--ag-ui-tool-icon-*` custom properties (or the `tool-card-icon` part)
+ * without the card reaching into the host stylesheet.
+ *
  * Pure DOM (no framework); the host appends {@link element} into its shadow
  * root and themes it via the `--ag-ui-*` custom properties or the exposed
  * `tool-card*` `part`s. All visible text is sourced from {@link UiStrings}.
@@ -31,8 +38,8 @@ export declare class ToolCallCard {
     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`),
-     * or the args + result together (`compact`).
+     * collapsed body behind a click-to-expand toggle: the result alone (`full` /
+     * `inline`), or the args + result together (`compact`).
      */
     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;;;;;;;;;;;;;;;GAeG;AACH,qBAAa,YAAY;;IACvB,kEAAkE;IAClE,QAAQ,CAAC,OAAO,EAAE,cAAc,CAAC;gBAS/B,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;IAwCzC,gFAAgF;IAChF,IAAI,OAAO,IAAI,OAAO,CAErB;IAED;;;;OAIG;IACH,MAAM,CAAC,MAAM,EAAE,aAAa,EAAE,IAAI,EAAE,MAAM,GAAG,IAAI;CAoClD"}
+{"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;gBAS/B,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;IAgDzC,gFAAgF;IAChF,IAAI,OAAO,IAAI,OAAO,CAErB;IAED;;;;OAIG;IACH,MAAM,CAAC,MAAM,EAAE,aAAa,EAAE,IAAI,EAAE,MAAM,GAAG,IAAI;CAoClD"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@artooi/ag-ui-web-component",
-  "version": "0.7.0",
+  "version": "0.8.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/constants.ts

@@ -92,12 +92,17 @@ export const DEFAULT_ATTACHMENT_MAX_BYTES = 10 * 1024 * 1024;
  * How much detail a tool-call card shows. Set via the `data-tool-display`
  * attribute on `<ag-ui-chat>`; defaults to `full` (back-compatible).
  *
+ * - `inline` — the lightest mode: a single status row (icon + summary) with no
+ *   surrounding card chrome, the result tucked behind its own toggle. Reads as
+ *   one line of the answer rather than a boxed card — pairs with the answer
+ *   well (page mode).
  * - `minimal` — just the tool name + status pill. No args, no result body.
  * - `compact` — name + status, with args *and* result tucked behind a single
  *   collapsed "Details" toggle. The light default for dense UIs.
  * - `full` — args shown inline, result behind its own toggle (the original).
  */
 export const TOOL_DISPLAY = {
+  INLINE: "inline",
   MINIMAL: "minimal",
   COMPACT: "compact",
   FULL: "full",

package/src/core/ag_ui_chat.ts

@@ -266,6 +266,13 @@ export class AgUiChat extends HTMLElement {
   // it; ≤1 ⇒ it arrived at once and the word reveal is appropriate.
   #streamDeltas = 0;
   #pending: HTMLDivElement | null = null;
+  // The current assistant turn's grouping container (WELL-1). One `.answer`
+  // wraps everything a single answer produces — streamed text, tool cards, the
+  // pending indicator — so it can be boxed as one "well" by CSS. Opened on the
+  // turn's first run start, closed at settle, so it spans the whole multi-round
+  // frontend-tool loop (which is several AG-UI runs), not one run. `null`
+  // between turns; user bubbles never enter it.
+  #currentGroup: HTMLDivElement | null = null;
   #threadId = "";
   #initialMessages: readonly Message[] = [];
   // Skill catalog by source; merged backend → embed → client (later wins).
@@ -420,7 +427,11 @@ export class AgUiChat extends HTMLElement {
    */
   get toolDisplay(): ToolDisplayMode {
     const attr = this.getAttribute("data-tool-display");
-    if (attr === TOOL_DISPLAY.MINIMAL || attr === TOOL_DISPLAY.COMPACT) {
+    if (
+      attr === TOOL_DISPLAY.INLINE ||
+      attr === TOOL_DISPLAY.MINIMAL ||
+      attr === TOOL_DISPLAY.COMPACT
+    ) {
       return attr;
     }
     return TOOL_DISPLAY.FULL;
@@ -719,6 +730,7 @@ export class AgUiChat extends HTMLElement {
   #resetState(): void {
     this.#client = null;
     this.#streamingBubble = null;
+    this.#currentGroup = null;
     this.#hidePending();
     this.#toolCards.clear();
     this.#serverSettled.clear();
@@ -866,6 +878,10 @@ export class AgUiChat extends HTMLElement {
    * Assistant content is rendered as sanitised markdown/HTML; user content
    * stays literal text (no need to parse what the user typed, and it avoids
    * rendering user-authored markup).
+   *
+   * Assistant bubbles land in the current answer group (WELL-1), opening one if
+   * needed; a user bubble closes the prior group and sits directly in the list
+   * (the well wraps the *assistant* turn, the user message precedes it).
    */
   appendMessage(role: MessageRole, content: string): HTMLDivElement {
     const bubble = document.createElement("div");
@@ -873,15 +889,36 @@ export class AgUiChat extends HTMLElement {
     bubble.setAttribute("part", `message message-${role}`);
     if (role === MESSAGE_ROLE.ASSISTANT) {
       bubble.innerHTML = renderMarkdown(content, { allowImages: this.allowImages });
+      this.#ensureGroup().appendChild(bubble);
     } else {
+      this.#currentGroup = null;
       bubble.textContent = content;
+      this.#messages.appendChild(bubble);
     }
-    this.#messages.appendChild(bubble);
     this.#updateEmptyState();
     this.#messages.scrollTop = this.#messages.scrollHeight;
     return bubble;
   }
 
+  /**
+   * The open answer group, creating and appending it on first use. Everything a
+   * single assistant turn renders (text, tool cards, the pending indicator)
+   * goes inside it, so the opt-in `data-answer-well` styling can box the whole
+   * turn. Idempotent across the turn's runs — it persists until {@link #handlers}'
+   * `onSettled` nulls it.
+   */
+  #ensureGroup(): HTMLDivElement {
+    if (this.#currentGroup === null) {
+      const group = document.createElement("div");
+      group.className = "answer";
+      group.setAttribute("part", "answer");
+      this.#currentGroup = group;
+      this.#messages.appendChild(group);
+      this.#updateEmptyState();
+    }
+    return this.#currentGroup;
+  }
+
   #render(): void {
     const style = document.createElement("style");
     style.textContent = STYLES;
@@ -1267,6 +1304,10 @@ export class AgUiChat extends HTMLElement {
     return {
       onRunStart: () => {
         this.#setRunning(true);
+        // Open the answer group on the turn's first run so the pending
+        // indicator (and everything after) lands inside the well. Idempotent:
+        // later rounds of the same turn reuse it.
+        this.#ensureGroup();
         this.#showPending();
       },
       onTextDelta: (buffer) => {
@@ -1331,6 +1372,14 @@ export class AgUiChat extends HTMLElement {
             card.settle(TOOL_CALL_STATUS.DONE, this.#strings.noResult);
           }
         }
+        // Close the turn's answer group. Drop it if the turn rendered nothing
+        // (e.g. a server-only round that streamed no text/card) so an opted-in
+        // well leaves no empty box behind.
+        if (this.#currentGroup !== null && this.#currentGroup.childElementCount === 0) {
+          this.#currentGroup.remove();
+          this.#updateEmptyState();
+        }
+        this.#currentGroup = null;
       },
     };
   }
@@ -1342,7 +1391,7 @@ export class AgUiChat extends HTMLElement {
     note.setAttribute("part", "stopped");
     note.setAttribute("role", "status");
     note.textContent = this.#strings.stopped;
-    this.#messages.appendChild(note);
+    this.#ensureGroup().appendChild(note);
     this.#updateEmptyState();
     this.#messages.scrollTop = this.#messages.scrollHeight;
   }
@@ -1367,7 +1416,7 @@ export class AgUiChat extends HTMLElement {
       pending.appendChild(dot);
     }
     this.#pending = pending;
-    this.#messages.appendChild(pending);
+    this.#ensureGroup().appendChild(pending);
     this.#updateEmptyState();
     this.#messages.scrollTop = this.#messages.scrollHeight;
   }
@@ -1411,7 +1460,7 @@ export class AgUiChat extends HTMLElement {
           prettifyToolName(call.name));
     const card = new ToolCallCard(call.name, call.args, this.toolDisplay, summary, this.#strings);
     this.#toolCards.set(call.id, card);
-    this.#messages.appendChild(card.element);
+    this.#ensureGroup().appendChild(card.element);
     this.#updateEmptyState();
     this.#messages.scrollTop = this.#messages.scrollHeight;
     return card;

package/src/ui/styles.ts

@@ -24,6 +24,17 @@ export const STYLES = `
   --ag-ui-danger: #b91c1c;
   --ag-ui-muted: #6b7280;
 
+  /* Tool-call status icon glyphs (override to re-theme) + spinner speed.
+     The pending state is the animated ring; the settled states use these. */
+  --ag-ui-tool-icon-done: "✓";
+  --ag-ui-tool-icon-error: "✕";
+  --ag-ui-tool-icon-declined: "⊘";
+  --ag-ui-tool-spin-duration: 0.7s;
+
+  /* Answer well (opt-in via data-answer-well) — boxes a whole assistant turn. */
+  --ag-ui-well-bg: transparent;
+  --ag-ui-well-border: var(--ag-ui-border);
+
   /* Surface — set --ag-ui-shadow: none for a flush, embedded panel. */
   --ag-ui-shadow: 0 12px 32px rgba(20, 20, 50, 0.18);
   --ag-ui-font: inherit;
@@ -46,6 +57,8 @@ export const STYLES = `
   --ag-ui-inset: auto 24px 24px auto;
   --ag-ui-max-width: calc(100vw - 48px);
   --ag-ui-max-height: calc(100vh - 48px);
+  /* Reading-column width for placement="page" (full-bleed, centred content). */
+  --ag-ui-content-max-width: 820px;
 
   position: var(--ag-ui-position);
   inset: var(--ag-ui-inset);
@@ -133,6 +146,34 @@ export const STYLES = `
   --ag-ui-radius: 0;
 }
 
+/* Page (PAGE-1): full-bleed background with a centred reading column. Unlike
+   "full" (edge-to-edge, left-aligned messages) the content sits in a column
+   capped at --ag-ui-content-max-width. The column is produced by symmetric auto
+   padding on the scroll area + composer (no per-row wrapper), so user pills
+   still right-align and the assistant well spans the column. */
+:host([placement="page"]) {
+  --ag-ui-inset: 0;
+  --ag-ui-width: 100vw;
+  --ag-ui-height: 100vh;
+  --ag-ui-max-width: 100vw;
+  --ag-ui-max-height: 100vh;
+  --ag-ui-radius: 0;
+}
+
+:host([placement="page"]) .messages {
+  padding-inline: max(var(--ag-ui-pad), calc((100% - var(--ag-ui-content-max-width)) / 2));
+}
+
+:host([placement="page"]) .input-row {
+  padding-inline: max(12px, calc((100% - var(--ag-ui-content-max-width)) / 2));
+}
+
+/* In the reading column the assistant well uses the full width; the user
+   message stays a right-aligned pill (its default align-self + max-width). */
+:host([placement="page"]) .message--assistant {
+  max-width: 100%;
+}
+
 /* Sidebar (CUST-3): a full-height docked panel that slides open/closed and
    collapses to a slim icon rail (not the floating launcher). Docked right by
    default; data-side="left" docks it left. Overlay by default — set
@@ -329,6 +370,27 @@ export const STYLES = `
   display: none;
 }
 
+/* ── Answer group / well (WELL-1) ─────────────────────────────────────────
+   One .answer per assistant turn wraps the streamed text, its tool cards,
+   and the pending indicator so a whole answer reads (and can be boxed) as one
+   unit. A flex column on the message-list gap, stretched to the list width so
+   its children keep their own left/right alignment. data-answer-well opts into
+   the bordered "well"; without it the layout is today's flat stack. */
+.answer {
+  display: flex;
+  flex-direction: column;
+  gap: var(--ag-ui-space);
+  align-self: stretch;
+  min-width: 0;
+}
+
+:host([data-answer-well]) .answer {
+  padding: var(--ag-ui-pad);
+  background: var(--ag-ui-well-bg);
+  border: 1px solid var(--ag-ui-well-border);
+  border-radius: var(--ag-ui-radius);
+}
+
 .message {
   max-width: 80%;
   padding: var(--ag-ui-msg-pad);
@@ -501,10 +563,71 @@ export const STYLES = `
 }
 
 .tool-call-name {
+  flex: 1;
+  min-width: 0;
   font-weight: 600;
   word-break: break-word;
 }
 
+/* Leading status icon (CARD-1). Empty in the DOM — the glyph/spinner is drawn
+   here from the card's data-status, so it stays themeable. */
+.tool-call-icon {
+  flex: none;
+  box-sizing: border-box;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 14px;
+  height: 14px;
+  font-size: 12px;
+  line-height: 1;
+}
+
+/* Pending: a real spinning ring. Speed is tunable; reduced motion stops it. */
+.tool-call[data-status="pending"] .tool-call-icon {
+  border: 2px solid var(--ag-ui-muted);
+  border-top-color: transparent;
+  border-radius: 50%;
+  animation: ag-ui-tool-spin var(--ag-ui-tool-spin-duration) linear infinite;
+}
+
+@keyframes ag-ui-tool-spin {
+  to { transform: rotate(360deg); }
+}
+
+/* Settled: a themeable glyph coloured by outcome. */
+.tool-call[data-status="done"] .tool-call-icon::before {
+  content: var(--ag-ui-tool-icon-done);
+  color: var(--ag-ui-success);
+}
+
+.tool-call[data-status="error"] .tool-call-icon::before {
+  content: var(--ag-ui-tool-icon-error);
+  color: var(--ag-ui-danger);
+}
+
+.tool-call[data-status="declined"] .tool-call-icon::before {
+  content: var(--ag-ui-tool-icon-declined);
+  color: var(--ag-ui-muted);
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .tool-call[data-status="pending"] .tool-call-icon {
+    animation: none;
+  }
+}
+
+/* Inline display mode (CARD-1): 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"] {
+  max-width: 100%;
+  background: transparent;
+  border: none;
+  padding: 2px 0;
+  gap: 2px;
+}
+
 .tool-call-status {
   flex: none;
   padding: 1px 8px;

package/src/ui/tool_call_card.ts

@@ -32,15 +32,22 @@ function resultLabels(strings: UiStrings): Record<SettledStatus, string> {
 /**
  * A live tool-call card for the chat transcript.
  *
- * Construction renders 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, 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:
  *
+ * - `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 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
+ * the `--ag-ui-tool-icon-*` custom properties (or the `tool-card-icon` part)
+ * without the card reaching into the host stylesheet.
+ *
  * Pure DOM (no framework); the host appends {@link element} into its shadow
  * root and themes it via the `--ag-ui-*` custom properties or the exposed
  * `tool-card*` `part`s. All visible text is sourced from {@link UiStrings}.
@@ -77,18 +84,26 @@ export class ToolCallCard {
     head.className = "tool-call-head";
     head.setAttribute("part", "tool-card-head");
 
+    // The leading status icon — a spinner while pending, a check/cross/slash on
+    // settle. Empty in the DOM: the shadow CSS draws it from `data-status`, so
+    // the glyphs stay themeable (`--ag-ui-tool-icon-*`) and the spin is real.
+    const icon = document.createElement("span");
+    icon.className = "tool-call-icon";
+    icon.setAttribute("part", "tool-card-icon");
+    icon.setAttribute("aria-hidden", "true");
+
     const label = document.createElement("span");
     label.className = "tool-call-name";
     label.setAttribute("part", "tool-card-name");
     // A server-provided `x-summary` label reads better than the raw tool name.
-    label.textContent = `🔧 ${summary ?? name}`;
+    label.textContent = summary ?? name;
 
     this.#status = document.createElement("span");
     this.#status.className = "tool-call-status";
     this.#status.setAttribute("part", "tool-card-status");
     this.#status.textContent = statusLabels(strings)[TOOL_CALL_STATUS.PENDING];
 
-    head.append(label, this.#status);
+    head.append(icon, label, this.#status);
     this.element.append(head);
 
     if (mode === TOOL_DISPLAY.FULL) {
@@ -107,8 +122,8 @@ export class ToolCallCard {
 
   /**
    * 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`),
-   * or the args + result together (`compact`).
+   * collapsed body behind a click-to-expand toggle: the result alone (`full` /
+   * `inline`), or the args + result together (`compact`).
    */
   settle(status: SettledStatus, text: string): void {
     this.#settled = true;

package/src/version.ts

@@ -1 +1 @@
-export const VERSION: string = "0.7.0";
+export const VERSION: string = "0.8.0";