@genesislcap/ai-assistant 14.482.0 → 14.482.1-GENC-1336.1

package/dist/dts/main/index.d.ts

@@ -1,5 +1,4 @@
 export * from './main.template';
-export * from '../styles';
 export * from './main';
 export * from './main.types';
 //# sourceMappingURL=index.d.ts.map

package/dist/dts/main/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/main/index.ts"],"names":[],"mappings":"AAAA,cAAc,iBAAiB,CAAC;AAChC,cAAc,WAAW,CAAC;AAC1B,cAAc,QAAQ,CAAC;AACvB,cAAc,cAAc,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/main/index.ts"],"names":[],"mappings":"AAAA,cAAc,iBAAiB,CAAC;AAChC,cAAc,QAAQ,CAAC;AACvB,cAAc,cAAc,CAAC"}

package/dist/dts/main/main.styles.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"main.styles.d.ts","sourceRoot":"","sources":["../../../src/main/main.styles.ts"],"names":[],"mappings":"AAgpBA,eAAO,MAAM,MAAM,iDAGlB,CAAC"}
+{"version":3,"file":"main.styles.d.ts","sourceRoot":"","sources":["../../../src/main/main.styles.ts"],"names":[],"mappings":"AA2pBA,eAAO,MAAM,MAAM,iDAGlB,CAAC"}

package/dist/dts/main/main.template.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"main.template.d.ts","sourceRoot":"","sources":["../../../src/main/main.template.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;GAeG;AASH,OAAO,EAAuC,YAAY,EAAE,MAAM,uBAAuB,CAAC;AAE1F,OAAO,KAAK,EAAE,qBAAqB,EAAE,MAAM,QAAQ,CAAC;AAuNpD,gBAAgB;AAChB,eAAO,MAAM,6BAA6B,GACxC,oBAAoB,MAAM,KACzB,YAAY,CAAC,qBAAqB,CA+ZpC,CAAC"}
+{"version":3,"file":"main.template.d.ts","sourceRoot":"","sources":["../../../src/main/main.template.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;GAeG;AASH,OAAO,EAAuC,YAAY,EAAE,MAAM,uBAAuB,CAAC;AAE1F,OAAO,KAAK,EAAE,qBAAqB,EAAE,MAAM,QAAQ,CAAC;AAsOpD,gBAAgB;AAChB,eAAO,MAAM,6BAA6B,GACxC,oBAAoB,MAAM,KACzB,YAAY,CAAC,qBAAqB,CAwapC,CAAC"}

package/dist/esm/main/index.js

@@ -1,4 +1,3 @@
 export * from './main.template';
-export * from '../styles';
 export * from './main';
 export * from './main.types';

package/dist/esm/main/main.styles.js

@@ -81,9 +81,20 @@ const baseStyles = css `
     min-height: 0;
     overflow-y: auto;
     padding: 10px;
+  }
+
+  /* Caps and centres the conversation column inside the (full-width) scroll
+     container, so the scrollbar stays at the panel edge while the messages sit
+     in a readable-width column. Exposed as part="messages-content" so a host
+     can widen it (::part(messages-content) { max-width: none }) or neutralise
+     the wrapper entirely (::part(messages-content) { display: contents }). */
+  .messages-content {
     display: flex;
     flex-direction: column;
     gap: 10px;
+    width: 100%;
+    max-width: 1000px;
+    margin-inline: auto;
   }
 
   @keyframes slide-in-right {
@@ -230,7 +241,7 @@ const baseStyles = css `
   }
 
   .message {
-    padding: calc(var(--design-unit) * 2px) calc(var(--design-unit) * 3px);
+    padding: calc(var(--design-unit) * 2.5px) calc(var(--design-unit) * 3.5px);
     max-width: 80%;
     min-width: 70px;
     font-family: var(--body-font);

package/dist/esm/main/main.template.js

@@ -111,6 +111,20 @@ const senderLabelFor = (m) => m.category === 'narration' ? 'Working' : senderLab
  * `m.interaction` first; non-interaction messages never consult this.
  */
 const interactionPresentation = (m) => { var _a, _b; return (_b = (_a = m.interaction) === null || _a === void 0 ? void 0 : _a.presentation) !== null && _b !== void 0 ? _b : 'label'; };
+/**
+ * Space-separated `part` names for a message bubble, so a host can style bubbles
+ * from its own stylesheet via `::part()`. Every bubble gets `message` plus its
+ * type (`message-user`, `message-ai`, `message-ai-thinking`, `message-ai-function`,
+ * `message-interaction`). Interaction bubbles additionally carry a
+ * presentation-specific part (`message-interaction-label` / `-bare` / `-bubble`)
+ * so a host can target, say, only the bubble-framed widgets.
+ */
+const messageParts = (m) => {
+    const type = messageType(m);
+    return type === 'interaction'
+        ? `message message-interaction message-interaction-${interactionPresentation(m)}`
+        : `message message-${type}`;
+};
 // ─── Sub-agent trace fragments ────────────────────────────────────────────────
 const subAgentAssistantTemplate = html `
   <div class="sub-agent-message sub-agent-assistant">${(m) => m.content}</div>
@@ -238,6 +252,7 @@ ${(tc) => { var _a; return (((_a = tc.foldPath) === null || _a === void 0 ? void
           </div>
           <div
             class="message ${(m) => messageType(m)} ${(m) => classNames(['narration', m.category === 'narration'])}"
+            part="${(m) => messageParts(m)}"
           >
             ${when(
     // A 'bare' interaction owns its full presentation — suppress the
@@ -385,28 +400,33 @@ ${(tc) => { var _a; return (((_a = tc.foldPath) === null || _a === void 0 ? void
       </div>
 
       <div class="messages" part="messages" ${ref('messagesEl')}>
-        ${repeat((x) => x.visibleMessages, messageRowTemplate)}
-        ${repeat((x) => x.activeInteractionRow, messageRowTemplate)}
-        ${when((x) => x.liveSubAgentTrace.length > 0 && x.showToolCalls, liveSubAgentTraceTemplate)}
-        ${when((x) => {
+        <div class="messages-content" part="messages-content">
+          ${repeat((x) => x.visibleMessages, messageRowTemplate)}
+          ${repeat((x) => x.activeInteractionRow, messageRowTemplate)}
+          ${when((x) => x.liveSubAgentTrace.length > 0 && x.showToolCalls, liveSubAgentTraceTemplate)}
+          ${when((x) => {
         var _a;
         return x.showLoadingIndicator &&
             (((_a = x.chatConfig.ui) === null || _a === void 0 ? void 0 : _a.animations) == null ||
                 LOADING_STYLE_ANIMATIONS.some((s) => x.enabledAnimations.includes(s)));
     }, html `
-            <div class="message-row ai" part="thinking">
-              <div class="avatar">
-                ${(x) => x.imageSrc
+              <div class="message-row ai" part="thinking">
+                <div class="avatar">
+                  ${(x) => x.imageSrc
         ? html `
-                        <img src="${() => x.imageSrc}" alt="Assistant" class="avatar-img" />
-                      `
+                          <img src="${() => x.imageSrc}" alt="Assistant" class="avatar-img" />
+                        `
         : html `
-                        <span class="avatar-icon" :innerHTML="${() => x.assistantIconSafe}"></span>
-                      `}
+                          <span
+                            class="avatar-icon"
+                            :innerHTML="${() => x.assistantIconSafe}"
+                          ></span>
+                        `}
+                </div>
+                ${(x) => selectThinkingTemplate(x)}
               </div>
-              ${(x) => selectThinkingTemplate(x)}
-            </div>
-          `)}
+            `)}
+        </div>
       </div>
 
       ${when((x) => !x.composerHiddenByConfig && (x.attachments.length > 0 || x.attachmentErrors.length > 0), html `

package/dist/tsconfig.tsbuildinfo

@@ -1 +1 @@
-{"root":["../src/index.ts","../src/channel/ai-activity-bus.ts","../src/channel/ai-activity-channel.ts","../src/components/flowing-waves-indicator.ts","../src/components/halo-overlay.ts","../src/components/plasma-orb-indicator.ts","../src/components/waves-indicator.ts","../src/components/activity-halo/activity-halo.ts","../src/components/agent-picker/agent-picker.constants.ts","../src/components/agent-picker/agent-picker.styles.ts","../src/components/agent-picker/agent-picker.template.ts","../src/components/agent-picker/agent-picker.ts","../src/components/agent-picker/index.ts","../src/components/ai-driver/ai-driver.ts","../src/components/ai-driver/index.ts","../src/components/chat-bubble/chat-bubble.styles.ts","../src/components/chat-bubble/chat-bubble.template.ts","../src/components/chat-bubble/chat-bubble.ts","../src/components/chat-bubble/index.ts","../src/components/chat-driver/align-event-globals.ts","../src/components/chat-driver/chat-driver.test.ts","../src/components/chat-driver/chat-driver.ts","../src/components/chat-driver/index.ts","../src/components/chat-interaction-wrapper/chat-interaction-wrapper.styles.ts","../src/components/chat-interaction-wrapper/chat-interaction-wrapper.template.ts","../src/components/chat-interaction-wrapper/chat-interaction-wrapper.test.ts","../src/components/chat-interaction-wrapper/chat-interaction-wrapper.ts","../src/components/chat-interaction-wrapper/index.ts","../src/components/chat-markdown/chat-markdown.ts","../src/components/chat-markdown/index.ts","../src/components/orchestrating-driver/index.ts","../src/components/orchestrating-driver/orchestrating-driver.ts","../src/components/popout-manager/index.ts","../src/components/popout-manager/popout-manager.ts","../src/components/settings-modal/index.ts","../src/components/settings-modal/settings-modal.styles.ts","../src/components/settings-modal/settings-modal.template.ts","../src/config/config.ts","../src/config/define-stateful-agent.test.ts","../src/config/define-stateful-agent.ts","../src/config/fallback-agents.ts","../src/config/index.ts","../src/config/validate-providers.test.ts","../src/config/validate-providers.ts","../src/main/index.ts","../src/main/main.styles.ts","../src/main/main.template.ts","../src/main/main.ts","../src/main/main.types.ts","../src/provider/ai-provider-switcher.ts","../src/provider/assistant-app-settings.ts","../src/state/ai-assistant-slice.ts","../src/state/debug-event-log.test.ts","../src/state/debug-event-log.ts","../src/state/driver-registry.test.ts","../src/state/driver-registry.ts","../src/state/session-store.ts","../src/styles/ai-colours.ts","../src/styles/index.ts","../src/styles/styles.ts","../src/suggestions/chat-suggestions.ts","../src/tags/index.ts","../src/types/ai-chat-widget.ts","../src/utils/animated-panel-toggle.ts","../src/utils/animation-exclusivity.test.ts","../src/utils/animation-exclusivity.ts","../src/utils/collect-session-models.test.ts","../src/utils/collect-session-models.ts","../src/utils/condense-history.test.ts","../src/utils/condense-history.ts","../src/utils/cost-session-history.test.ts","../src/utils/cost-session-history.ts","../src/utils/derive-cost-session-title.test.ts","../src/utils/derive-cost-session-title.ts","../src/utils/flatten-sub-agent-messages.test.ts","../src/utils/flatten-sub-agent-messages.ts","../src/utils/history-transform.ts","../src/utils/index.ts","../src/utils/logger.ts","../src/utils/message-partition.test.ts","../src/utils/message-partition.ts","../src/utils/resolve-cost-history-config.test.ts","../src/utils/resolve-cost-history-config.ts","../src/utils/strip-agent-handlers.test.ts","../src/utils/strip-agent-handlers.ts","../src/utils/sum-costs.test.ts","../src/utils/sum-costs.ts","../src/utils/sum-tokens.test.ts","../src/utils/sum-tokens.ts","../src/utils/tool-fold.ts"],"version":"5.9.2"}
+{"root":["../src/index.ts","../src/channel/ai-activity-bus.ts","../src/channel/ai-activity-channel.ts","../src/components/flowing-waves-indicator.ts","../src/components/halo-overlay.ts","../src/components/plasma-orb-indicator.ts","../src/components/waves-indicator.ts","../src/components/activity-halo/activity-halo.ts","../src/components/agent-picker/agent-picker.constants.ts","../src/components/agent-picker/agent-picker.styles.ts","../src/components/agent-picker/agent-picker.template.ts","../src/components/agent-picker/agent-picker.ts","../src/components/agent-picker/index.ts","../src/components/ai-driver/ai-driver.ts","../src/components/ai-driver/index.ts","../src/components/chat-bubble/chat-bubble.styles.ts","../src/components/chat-bubble/chat-bubble.template.ts","../src/components/chat-bubble/chat-bubble.ts","../src/components/chat-bubble/index.ts","../src/components/chat-driver/align-event-globals.ts","../src/components/chat-driver/chat-driver.test.ts","../src/components/chat-driver/chat-driver.ts","../src/components/chat-driver/index.ts","../src/components/chat-interaction-wrapper/chat-interaction-wrapper.styles.ts","../src/components/chat-interaction-wrapper/chat-interaction-wrapper.template.ts","../src/components/chat-interaction-wrapper/chat-interaction-wrapper.test.ts","../src/components/chat-interaction-wrapper/chat-interaction-wrapper.ts","../src/components/chat-interaction-wrapper/index.ts","../src/components/chat-markdown/chat-markdown.ts","../src/components/chat-markdown/index.ts","../src/components/orchestrating-driver/index.ts","../src/components/orchestrating-driver/orchestrating-driver.ts","../src/components/popout-manager/index.ts","../src/components/popout-manager/popout-manager.ts","../src/components/settings-modal/index.ts","../src/components/settings-modal/settings-modal.styles.ts","../src/components/settings-modal/settings-modal.template.ts","../src/config/config.ts","../src/config/define-stateful-agent.test.ts","../src/config/define-stateful-agent.ts","../src/config/fallback-agents.ts","../src/config/index.ts","../src/config/validate-providers.test.ts","../src/config/validate-providers.ts","../src/main/index.ts","../src/main/main.styles.ts","../src/main/main.template.ts","../src/main/main.ts","../src/main/main.types.ts","../src/provider/ai-provider-switcher.ts","../src/provider/assistant-app-settings.ts","../src/state/ai-assistant-slice.ts","../src/state/debug-event-log.test.ts","../src/state/debug-event-log.ts","../src/state/driver-registry.test.ts","../src/state/driver-registry.ts","../src/state/session-store.ts","../src/styles/ai-colours.ts","../src/suggestions/chat-suggestions.ts","../src/tags/index.ts","../src/types/ai-chat-widget.ts","../src/utils/animated-panel-toggle.ts","../src/utils/animation-exclusivity.test.ts","../src/utils/animation-exclusivity.ts","../src/utils/collect-session-models.test.ts","../src/utils/collect-session-models.ts","../src/utils/condense-history.test.ts","../src/utils/condense-history.ts","../src/utils/cost-session-history.test.ts","../src/utils/cost-session-history.ts","../src/utils/derive-cost-session-title.test.ts","../src/utils/derive-cost-session-title.ts","../src/utils/flatten-sub-agent-messages.test.ts","../src/utils/flatten-sub-agent-messages.ts","../src/utils/history-transform.ts","../src/utils/index.ts","../src/utils/logger.ts","../src/utils/message-partition.test.ts","../src/utils/message-partition.ts","../src/utils/resolve-cost-history-config.test.ts","../src/utils/resolve-cost-history-config.ts","../src/utils/strip-agent-handlers.test.ts","../src/utils/strip-agent-handlers.ts","../src/utils/sum-costs.test.ts","../src/utils/sum-costs.ts","../src/utils/sum-tokens.test.ts","../src/utils/sum-tokens.ts","../src/utils/tool-fold.ts"],"version":"5.9.2"}

package/docs/styling.md

@@ -0,0 +1,131 @@
+# Styling & Theming
+
+## Overview
+
+The assistant renders in a shadow root, so its internal classes are not reachable
+from an app stylesheet. Customization is exposed through three deliberate,
+stable surfaces:
+
+1. **Design-system tokens** — the widget reads standard tokens (`--neutral-layer-*`,
+   `--accent-fill-rest`, `--design-unit`, `--control-corner-radius`, `--body-font`,
+   the `--type-ramp-*` ramp, …). These inherit through the shadow boundary, so
+   theming the host design system themes the assistant with no widget-specific work.
+2. **`--ai-*` custom properties** — a small set of assistant-specific variables,
+   each with a built-in fallback, for the parts of the UI that have no natural
+   design-system token.
+3. **CSS Shadow Parts (`::part()`)** — named hooks on internal elements for
+   arbitrary restyling from an app stylesheet.
+
+Prefer tokens where one exists (they inherit and can be set inline); reach for
+`::part()` when you need to change something a token doesn't cover.
+
+---
+
+## `--ai-*` custom properties
+
+| Property | Default | Applies to |
+| --- | --- | --- |
+| `--ai-message-shadow` | `0 2px 8px rgb(0 0 0 / 15%)` | Assistant message bubble shadow |
+| `--ai-thinking-color` | `#7c3aed` | Thinking/reasoning bubble and its avatar ring |
+| `--ai-function-color` | `#86efac` | Tool-call bubble text and border |
+
+Set them on the host element (or any ancestor — they inherit):
+
+```css
+foundation-ai-assistant {
+  --ai-thinking-color: #2563eb;
+  --ai-message-shadow: none;
+}
+```
+
+---
+
+## Shadow parts
+
+Parts on the conversation area (the outer frame exposes many more — e.g.
+`chat-header`, `input-row`, `input`, `send-button`):
+
+| Part | Element |
+| --- | --- |
+| `chat-wrapper` | Outer frame (header + messages + composer) |
+| `messages` | Scroll container (full width; owns the scrollbar) |
+| `messages-content` | Width-capped, centred column that holds every message |
+| `message` | Every message bubble |
+| `message-<type>` | A bubble of one kind: `message-user`, `message-ai`, `message-ai-thinking`, `message-ai-function`, `message-interaction` |
+| `message-interaction-<presentation>` | An interaction bubble in one presentation: `message-interaction-label`, `message-interaction-bare`, `message-interaction-bubble` |
+| `thinking` | The loading-indicator row |
+
+Target them from an app stylesheet with `::part()`:
+
+```css
+/* Constrain every bubble to a width range */
+foundation-ai-assistant::part(message) {
+  min-width: 200px;
+  max-width: 640px;
+}
+
+/* Restyle just one kind of bubble */
+foundation-ai-assistant::part(message-user) {
+  border-radius: 18px;
+}
+
+/* Only interaction widgets, and only when framed as a bubble */
+foundation-ai-assistant::part(message-interaction-bubble) {
+  min-width: 320px;
+}
+
+/* Change the padding inside bubbles */
+foundation-ai-assistant::part(message) {
+  padding: 12px 16px;
+}
+```
+
+### The conversation column (`messages-content`)
+
+Messages sit in a column capped at `1000px` and centred inside the full-width
+scroll container, so the scrollbar stays at the panel edge while the text keeps
+a readable width. Adjust or remove the cap via the part:
+
+```css
+/* Widen (or narrow) the column */
+foundation-ai-assistant::part(messages-content) { max-width: 1400px; }
+
+/* Remove the cap — messages fill the full width */
+foundation-ai-assistant::part(messages-content) { max-width: none; }
+
+/* Neutralise the wrapper entirely (as if the div weren't there) */
+foundation-ai-assistant::part(messages-content) { display: contents; }
+```
+
+---
+
+## Responsive sizing
+
+A `min-width` only ever affects *short* messages — long ones are already wider —
+so it can push a bubble past a narrow container. The assistant can be rendered at
+any width (docked panel, popout, inline), so size overrides against the *element's*
+width, not the viewport.
+
+`@media` queries the viewport, which does not track the assistant's width, so it is
+the wrong tool. Use a **container query** instead. `::part()` rules can be wrapped
+in `@container` from the host stylesheet; the reliable pattern is to make your own
+wrapper a container:
+
+```css
+.ai-slot {
+  container-type: inline-size;
+}
+
+/* A comfortable minimum on wide layouts… */
+foundation-ai-assistant::part(message) {
+  min-width: 220px;
+}
+
+/* …dropped when the assistant itself is narrow, so bubbles never overflow. */
+@container (max-width: 420px) {
+  foundation-ai-assistant::part(message) {
+    min-width: 0;
+  }
+}
+```
+

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@genesislcap/ai-assistant",
   "description": "Genesis AI Assistant micro-frontend",
-  "version": "14.482.0",
+  "version": "14.482.1-GENC-1336.1",
   "license": "SEE LICENSE IN license.txt",
   "main": "dist/esm/index.js",
   "types": "dist/ai-assistant.d.ts",
@@ -64,25 +64,25 @@
     }
   },
   "devDependencies": {
-    "@genesislcap/foundation-testing": "14.482.0",
-    "@genesislcap/genx": "14.482.0",
-    "@genesislcap/rollup-builder": "14.482.0",
-    "@genesislcap/ts-builder": "14.482.0",
-    "@genesislcap/uvu-playwright-builder": "14.482.0",
-    "@genesislcap/vite-builder": "14.482.0",
-    "@genesislcap/webpack-builder": "14.482.0",
+    "@genesislcap/foundation-testing": "14.482.1-GENC-1336.1",
+    "@genesislcap/genx": "14.482.1-GENC-1336.1",
+    "@genesislcap/rollup-builder": "14.482.1-GENC-1336.1",
+    "@genesislcap/ts-builder": "14.482.1-GENC-1336.1",
+    "@genesislcap/uvu-playwright-builder": "14.482.1-GENC-1336.1",
+    "@genesislcap/vite-builder": "14.482.1-GENC-1336.1",
+    "@genesislcap/webpack-builder": "14.482.1-GENC-1336.1",
     "@types/dompurify": "^3.0.5",
     "@types/marked": "^5.0.2"
   },
   "dependencies": {
-    "@genesislcap/foundation-ai": "14.482.0",
-    "@genesislcap/foundation-logger": "14.482.0",
-    "@genesislcap/foundation-notifications": "14.482.0",
-    "@genesislcap/foundation-redux": "14.482.0",
-    "@genesislcap/foundation-ui": "14.482.0",
-    "@genesislcap/foundation-utils": "14.482.0",
-    "@genesislcap/rapid-design-system": "14.482.0",
-    "@genesislcap/web-core": "14.482.0",
+    "@genesislcap/foundation-ai": "14.482.1-GENC-1336.1",
+    "@genesislcap/foundation-logger": "14.482.1-GENC-1336.1",
+    "@genesislcap/foundation-notifications": "14.482.1-GENC-1336.1",
+    "@genesislcap/foundation-redux": "14.482.1-GENC-1336.1",
+    "@genesislcap/foundation-ui": "14.482.1-GENC-1336.1",
+    "@genesislcap/foundation-utils": "14.482.1-GENC-1336.1",
+    "@genesislcap/rapid-design-system": "14.482.1-GENC-1336.1",
+    "@genesislcap/web-core": "14.482.1-GENC-1336.1",
     "dompurify": "^3.3.1",
     "marked": "^17.0.3"
   },
@@ -94,5 +94,5 @@
   "publishConfig": {
     "access": "public"
   },
-  "gitHead": "176fdab04821da415454fcdbc124f7fabac07aa7"
+  "gitHead": "226fa34f7ccc429157141416f11971ee7b64c63e"
 }

package/src/main/index.ts

@@ -1,4 +1,3 @@
 export * from './main.template';
-export * from '../styles';
 export * from './main';
 export * from './main.types';

package/src/main/main.styles.ts

@@ -87,9 +87,20 @@ const baseStyles = css`
     min-height: 0;
     overflow-y: auto;
     padding: 10px;
+  }
+
+  /* Caps and centres the conversation column inside the (full-width) scroll
+     container, so the scrollbar stays at the panel edge while the messages sit
+     in a readable-width column. Exposed as part="messages-content" so a host
+     can widen it (::part(messages-content) { max-width: none }) or neutralise
+     the wrapper entirely (::part(messages-content) { display: contents }). */
+  .messages-content {
     display: flex;
     flex-direction: column;
     gap: 10px;
+    width: 100%;
+    max-width: 1000px;
+    margin-inline: auto;
   }
 
   @keyframes slide-in-right {
@@ -236,7 +247,7 @@ const baseStyles = css`
   }
 
   .message {
-    padding: calc(var(--design-unit) * 2px) calc(var(--design-unit) * 3px);
+    padding: calc(var(--design-unit) * 2.5px) calc(var(--design-unit) * 3.5px);
     max-width: 80%;
     min-width: 70px;
     font-family: var(--body-font);

package/src/main/main.template.ts

@@ -130,6 +130,21 @@ const senderLabelFor = (m: ChatMessage): string =>
 const interactionPresentation = (m: ChatMessage): InteractionPresentation =>
   m.interaction?.presentation ?? 'label';
 
+/**
+ * Space-separated `part` names for a message bubble, so a host can style bubbles
+ * from its own stylesheet via `::part()`. Every bubble gets `message` plus its
+ * type (`message-user`, `message-ai`, `message-ai-thinking`, `message-ai-function`,
+ * `message-interaction`). Interaction bubbles additionally carry a
+ * presentation-specific part (`message-interaction-label` / `-bare` / `-bubble`)
+ * so a host can target, say, only the bubble-framed widgets.
+ */
+const messageParts = (m: ChatMessage): string => {
+  const type = messageType(m);
+  return type === 'interaction'
+    ? `message message-interaction message-interaction-${interactionPresentation(m)}`
+    : `message message-${type}`;
+};
+
 // ─── Sub-agent trace fragments ────────────────────────────────────────────────
 
 const subAgentAssistantTemplate = html<ChatMessage>`
@@ -310,6 +325,7 @@ ${(tc) => (tc.foldPath?.length ? `${tc.foldPath.join(' › ')} › ` : '')}<stro
           <div
             class="message ${(m) => messageType(m)} ${(m) =>
               classNames(['narration', m.category === 'narration'])}"
+            part="${(m) => messageParts(m)}"
           >
             ${when(
               // A 'bare' interaction owns its full presentation — suppress the
@@ -496,30 +512,38 @@ ${(tc) => (tc.foldPath?.length ? `${tc.foldPath.join(' › ')} › ` : '')}<stro
       </div>
 
       <div class="messages" part="messages" ${ref('messagesEl')}>
-        ${repeat((x) => x.visibleMessages, messageRowTemplate)}
-        ${repeat((x) => x.activeInteractionRow, messageRowTemplate)}
-        ${when((x) => x.liveSubAgentTrace.length > 0 && x.showToolCalls, liveSubAgentTraceTemplate)}
-        ${when(
-          (x) =>
-            x.showLoadingIndicator &&
-            (x.chatConfig.ui?.animations == null ||
-              LOADING_STYLE_ANIMATIONS.some((s) => x.enabledAnimations.includes(s))),
-          html<FoundationAiAssistant>`
-            <div class="message-row ai" part="thinking">
-              <div class="avatar">
-                ${(x) =>
-                  x.imageSrc
-                    ? html<FoundationAiAssistant>`
-                        <img src="${() => x.imageSrc}" alt="Assistant" class="avatar-img" />
-                      `
-                    : html<FoundationAiAssistant>`
-                        <span class="avatar-icon" :innerHTML="${() => x.assistantIconSafe}"></span>
-                      `}
+        <div class="messages-content" part="messages-content">
+          ${repeat((x) => x.visibleMessages, messageRowTemplate)}
+          ${repeat((x) => x.activeInteractionRow, messageRowTemplate)}
+          ${when(
+            (x) => x.liveSubAgentTrace.length > 0 && x.showToolCalls,
+            liveSubAgentTraceTemplate,
+          )}
+          ${when(
+            (x) =>
+              x.showLoadingIndicator &&
+              (x.chatConfig.ui?.animations == null ||
+                LOADING_STYLE_ANIMATIONS.some((s) => x.enabledAnimations.includes(s))),
+            html<FoundationAiAssistant>`
+              <div class="message-row ai" part="thinking">
+                <div class="avatar">
+                  ${(x) =>
+                    x.imageSrc
+                      ? html<FoundationAiAssistant>`
+                          <img src="${() => x.imageSrc}" alt="Assistant" class="avatar-img" />
+                        `
+                      : html<FoundationAiAssistant>`
+                          <span
+                            class="avatar-icon"
+                            :innerHTML="${() => x.assistantIconSafe}"
+                          ></span>
+                        `}
+                </div>
+                ${(x) => selectThinkingTemplate(x)}
               </div>
-              ${(x) => selectThinkingTemplate(x)}
-            </div>
-          `,
-        )}
+            `,
+          )}
+        </div>
       </div>
 
       ${when(

package/dist/dts/styles/index.d.ts

@@ -1,2 +0,0 @@
-export * from './styles';
-//# sourceMappingURL=index.d.ts.map

package/dist/dts/styles/index.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/styles/index.ts"],"names":[],"mappings":"AAAA,cAAc,UAAU,CAAC"}

package/dist/dts/styles/styles.d.ts

@@ -1,5 +0,0 @@
-/**
- * @beta
- */
-export declare const FoundationAiAssistantStyles: import("@microsoft/fast-element").ElementStyles;
-//# sourceMappingURL=styles.d.ts.map

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

@@ -1 +0,0 @@
-{"version":3,"file":"styles.d.ts","sourceRoot":"","sources":["../../../src/styles/styles.ts"],"names":[],"mappings":"AAEA;;GAEG;AACH,eAAO,MAAM,2BAA2B,iDAwOvC,CAAC"}

package/dist/esm/styles/index.js

@@ -1 +0,0 @@
-export * from './styles';

package/dist/esm/styles/styles.js

@@ -1,237 +0,0 @@
-import { css } from '@genesislcap/web-core';
-/**
- * @beta
- */
-export const FoundationAiAssistantStyles = css `
-  :host {
-    display: flex;
-    flex-direction: column;
-    height: 100%;
-    box-sizing: border-box;
-  }
-
-  .chat-wrapper {
-    display: flex;
-    flex-direction: column;
-    height: 100%;
-    overflow: hidden;
-    background: var(--neutral-fill-layer-rest, var(--neutral-layer-1));
-    border-radius: calc(var(--design-unit, 4) * 1px);
-    border: 1px solid var(--neutral-stroke-rest);
-  }
-
-  .chat-header {
-    display: flex;
-    align-items: center;
-    gap: calc(var(--design-unit, 4) * 3px);
-    padding: calc(var(--design-unit, 4) * 1.5px) calc(var(--design-unit, 4) * 3px);
-    border-bottom: 1px solid var(--neutral-stroke-rest);
-    background: var(--neutral-fill-stealth-rest);
-    font-size: var(--type-ramp-minus-1-font-size);
-    color: var(--neutral-foreground-rest);
-  }
-
-  .chat-title {
-    flex: 1;
-    font-weight: 600;
-    font-size: var(--type-ramp-base-font-size);
-    overflow: hidden;
-    text-overflow: ellipsis;
-    white-space: nowrap;
-  }
-
-  .toggle-label {
-    display: flex;
-    align-items: center;
-    gap: calc(var(--design-unit, 4) * 1px);
-    cursor: pointer;
-    user-select: none;
-  }
-
-  .toggle-label input[type='checkbox'] {
-    cursor: pointer;
-    accent-color: var(--accent-fill-rest);
-  }
-
-  .download-button {
-    margin-left: auto;
-  }
-
-  .messages {
-    flex: 1;
-    overflow-y: auto;
-    padding: calc(var(--design-unit, 4) * 3px);
-    display: flex;
-    flex-direction: column;
-    gap: calc(var(--design-unit, 4) * 2px);
-  }
-
-  .message {
-    padding: calc(var(--design-unit, 4) * 2px) calc(var(--design-unit, 4) * 3px);
-    border-radius: calc(var(--design-unit, 4) * 2px);
-    max-width: 80%;
-    word-break: break-word;
-    font-size: var(--type-ramp-base-font-size);
-    line-height: var(--type-ramp-base-line-height);
-  }
-
-  .message--user {
-    align-self: flex-end;
-    background: var(--accent-fill-rest);
-    color: var(--foreground-on-accent-rest);
-    border-bottom-right-radius: calc(var(--design-unit, 4) * 0.5px);
-  }
-
-  .message--assistant {
-    align-self: flex-start;
-    background: var(--neutral-fill-rest);
-    color: var(--neutral-foreground-rest);
-    border-bottom-left-radius: calc(var(--design-unit, 4) * 0.5px);
-  }
-
-  .thinking-block {
-    margin-bottom: calc(var(--design-unit, 4) * 1px);
-    border: 1px solid var(--neutral-stroke-rest);
-    border-radius: calc(var(--design-unit, 4) * 1px);
-    overflow: hidden;
-  }
-
-  .thinking-summary {
-    cursor: pointer;
-    padding: calc(var(--design-unit, 4) * 1px) calc(var(--design-unit, 4) * 2px);
-    font-size: var(--type-ramp-minus-1-font-size);
-    color: var(--neutral-foreground-hint);
-    user-select: none;
-    list-style: none;
-  }
-
-  .thinking-summary::marker,
-  .thinking-summary::-webkit-details-marker {
-    display: none;
-  }
-
-  .thinking-summary::before {
-    content: '▶ ';
-    font-size: 0.6em;
-    vertical-align: middle;
-  }
-
-  details[open] .thinking-summary::before {
-    content: '▼ ';
-  }
-
-  .thinking-content {
-    padding: calc(var(--design-unit, 4) * 2px);
-    font-size: var(--type-ramp-minus-1-font-size);
-    color: var(--neutral-foreground-hint);
-    border-top: 1px solid var(--neutral-stroke-rest);
-  }
-
-  .tool-calls {
-    font-size: var(--type-ramp-minus-1-font-size);
-    color: var(--neutral-foreground-hint);
-    font-family: monospace;
-  }
-
-  .message--tool {
-    align-self: flex-start;
-    background: var(--neutral-fill-stealth-rest);
-    color: var(--neutral-foreground-hint);
-    font-size: var(--type-ramp-minus-1-font-size);
-    font-family: monospace;
-    max-width: 100%;
-    border-radius: calc(var(--design-unit, 4) * 1px);
-  }
-
-  .empty-state {
-    flex: 1;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    color: var(--neutral-foreground-hint);
-    font-size: var(--type-ramp-base-font-size);
-  }
-
-  .thinking {
-    align-self: flex-start;
-    padding: calc(var(--design-unit, 4) * 1px);
-  }
-
-  .file-input {
-    display: none;
-  }
-
-  .attachment-chips {
-    display: flex;
-    flex-wrap: wrap;
-    gap: calc(var(--design-unit, 4) * 1px);
-    padding: calc(var(--design-unit, 4) * 1px) calc(var(--design-unit, 4) * 2px);
-    border-top: 1px solid var(--neutral-stroke-rest);
-  }
-
-  .attachment-chip {
-    display: inline-flex;
-    align-items: center;
-    gap: calc(var(--design-unit, 4) * 1px);
-    padding: calc(var(--design-unit, 4) * 0.5px) calc(var(--design-unit, 4) * 1.5px);
-    background: var(--neutral-fill-rest);
-    border: 1px solid var(--neutral-stroke-rest);
-    border-radius: calc(var(--design-unit, 4) * 4px);
-    font-size: var(--type-ramp-minus-1-font-size);
-    color: var(--neutral-foreground-rest);
-    max-width: 200px;
-    overflow: hidden;
-    text-overflow: ellipsis;
-    white-space: nowrap;
-  }
-
-  .attachment-chip-error {
-    background: var(--error-fill-rest, #fde8e8);
-    border-color: var(--error-stroke-rest, #f87171);
-    color: var(--error-foreground-rest, #b91c1c);
-  }
-
-  .chip-remove {
-    flex-shrink: 0;
-    background: none;
-    border: none;
-    cursor: pointer;
-    padding: 0;
-    line-height: 1;
-    color: inherit;
-    opacity: 0.6;
-    font-size: 0.9em;
-  }
-
-  .chip-remove:hover {
-    opacity: 1;
-  }
-
-  .input-row {
-    display: flex;
-    gap: calc(var(--design-unit, 4) * 2px);
-    padding: calc(var(--design-unit, 4) * 2px);
-    border-top: 1px solid var(--neutral-stroke-rest);
-    align-items: flex-end;
-  }
-
-  .attach-button {
-    flex-shrink: 0;
-    align-self: flex-end;
-  }
-
-  .chat-input {
-    flex: 1;
-  }
-
-  .chat-input::part(control) {
-    resize: none;
-    min-height: calc(var(--base-height-multiplier, 10) * 1px + var(--design-unit, 4) * 4px);
-    max-height: calc(var(--base-height-multiplier, 10) * 5px);
-  }
-
-  .send-button {
-    flex-shrink: 0;
-    align-self: flex-end;
-  }
-`;

package/src/styles/index.ts

@@ -1 +0,0 @@
-export * from './styles';

package/src/styles/styles.ts

@@ -1,238 +0,0 @@
-import { css } from '@genesislcap/web-core';
-
-/**
- * @beta
- */
-export const FoundationAiAssistantStyles = css`
-  :host {
-    display: flex;
-    flex-direction: column;
-    height: 100%;
-    box-sizing: border-box;
-  }
-
-  .chat-wrapper {
-    display: flex;
-    flex-direction: column;
-    height: 100%;
-    overflow: hidden;
-    background: var(--neutral-fill-layer-rest, var(--neutral-layer-1));
-    border-radius: calc(var(--design-unit, 4) * 1px);
-    border: 1px solid var(--neutral-stroke-rest);
-  }
-
-  .chat-header {
-    display: flex;
-    align-items: center;
-    gap: calc(var(--design-unit, 4) * 3px);
-    padding: calc(var(--design-unit, 4) * 1.5px) calc(var(--design-unit, 4) * 3px);
-    border-bottom: 1px solid var(--neutral-stroke-rest);
-    background: var(--neutral-fill-stealth-rest);
-    font-size: var(--type-ramp-minus-1-font-size);
-    color: var(--neutral-foreground-rest);
-  }
-
-  .chat-title {
-    flex: 1;
-    font-weight: 600;
-    font-size: var(--type-ramp-base-font-size);
-    overflow: hidden;
-    text-overflow: ellipsis;
-    white-space: nowrap;
-  }
-
-  .toggle-label {
-    display: flex;
-    align-items: center;
-    gap: calc(var(--design-unit, 4) * 1px);
-    cursor: pointer;
-    user-select: none;
-  }
-
-  .toggle-label input[type='checkbox'] {
-    cursor: pointer;
-    accent-color: var(--accent-fill-rest);
-  }
-
-  .download-button {
-    margin-left: auto;
-  }
-
-  .messages {
-    flex: 1;
-    overflow-y: auto;
-    padding: calc(var(--design-unit, 4) * 3px);
-    display: flex;
-    flex-direction: column;
-    gap: calc(var(--design-unit, 4) * 2px);
-  }
-
-  .message {
-    padding: calc(var(--design-unit, 4) * 2px) calc(var(--design-unit, 4) * 3px);
-    border-radius: calc(var(--design-unit, 4) * 2px);
-    max-width: 80%;
-    word-break: break-word;
-    font-size: var(--type-ramp-base-font-size);
-    line-height: var(--type-ramp-base-line-height);
-  }
-
-  .message--user {
-    align-self: flex-end;
-    background: var(--accent-fill-rest);
-    color: var(--foreground-on-accent-rest);
-    border-bottom-right-radius: calc(var(--design-unit, 4) * 0.5px);
-  }
-
-  .message--assistant {
-    align-self: flex-start;
-    background: var(--neutral-fill-rest);
-    color: var(--neutral-foreground-rest);
-    border-bottom-left-radius: calc(var(--design-unit, 4) * 0.5px);
-  }
-
-  .thinking-block {
-    margin-bottom: calc(var(--design-unit, 4) * 1px);
-    border: 1px solid var(--neutral-stroke-rest);
-    border-radius: calc(var(--design-unit, 4) * 1px);
-    overflow: hidden;
-  }
-
-  .thinking-summary {
-    cursor: pointer;
-    padding: calc(var(--design-unit, 4) * 1px) calc(var(--design-unit, 4) * 2px);
-    font-size: var(--type-ramp-minus-1-font-size);
-    color: var(--neutral-foreground-hint);
-    user-select: none;
-    list-style: none;
-  }
-
-  .thinking-summary::marker,
-  .thinking-summary::-webkit-details-marker {
-    display: none;
-  }
-
-  .thinking-summary::before {
-    content: '▶ ';
-    font-size: 0.6em;
-    vertical-align: middle;
-  }
-
-  details[open] .thinking-summary::before {
-    content: '▼ ';
-  }
-
-  .thinking-content {
-    padding: calc(var(--design-unit, 4) * 2px);
-    font-size: var(--type-ramp-minus-1-font-size);
-    color: var(--neutral-foreground-hint);
-    border-top: 1px solid var(--neutral-stroke-rest);
-  }
-
-  .tool-calls {
-    font-size: var(--type-ramp-minus-1-font-size);
-    color: var(--neutral-foreground-hint);
-    font-family: monospace;
-  }
-
-  .message--tool {
-    align-self: flex-start;
-    background: var(--neutral-fill-stealth-rest);
-    color: var(--neutral-foreground-hint);
-    font-size: var(--type-ramp-minus-1-font-size);
-    font-family: monospace;
-    max-width: 100%;
-    border-radius: calc(var(--design-unit, 4) * 1px);
-  }
-
-  .empty-state {
-    flex: 1;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    color: var(--neutral-foreground-hint);
-    font-size: var(--type-ramp-base-font-size);
-  }
-
-  .thinking {
-    align-self: flex-start;
-    padding: calc(var(--design-unit, 4) * 1px);
-  }
-
-  .file-input {
-    display: none;
-  }
-
-  .attachment-chips {
-    display: flex;
-    flex-wrap: wrap;
-    gap: calc(var(--design-unit, 4) * 1px);
-    padding: calc(var(--design-unit, 4) * 1px) calc(var(--design-unit, 4) * 2px);
-    border-top: 1px solid var(--neutral-stroke-rest);
-  }
-
-  .attachment-chip {
-    display: inline-flex;
-    align-items: center;
-    gap: calc(var(--design-unit, 4) * 1px);
-    padding: calc(var(--design-unit, 4) * 0.5px) calc(var(--design-unit, 4) * 1.5px);
-    background: var(--neutral-fill-rest);
-    border: 1px solid var(--neutral-stroke-rest);
-    border-radius: calc(var(--design-unit, 4) * 4px);
-    font-size: var(--type-ramp-minus-1-font-size);
-    color: var(--neutral-foreground-rest);
-    max-width: 200px;
-    overflow: hidden;
-    text-overflow: ellipsis;
-    white-space: nowrap;
-  }
-
-  .attachment-chip-error {
-    background: var(--error-fill-rest, #fde8e8);
-    border-color: var(--error-stroke-rest, #f87171);
-    color: var(--error-foreground-rest, #b91c1c);
-  }
-
-  .chip-remove {
-    flex-shrink: 0;
-    background: none;
-    border: none;
-    cursor: pointer;
-    padding: 0;
-    line-height: 1;
-    color: inherit;
-    opacity: 0.6;
-    font-size: 0.9em;
-  }
-
-  .chip-remove:hover {
-    opacity: 1;
-  }
-
-  .input-row {
-    display: flex;
-    gap: calc(var(--design-unit, 4) * 2px);
-    padding: calc(var(--design-unit, 4) * 2px);
-    border-top: 1px solid var(--neutral-stroke-rest);
-    align-items: flex-end;
-  }
-
-  .attach-button {
-    flex-shrink: 0;
-    align-self: flex-end;
-  }
-
-  .chat-input {
-    flex: 1;
-  }
-
-  .chat-input::part(control) {
-    resize: none;
-    min-height: calc(var(--base-height-multiplier, 10) * 1px + var(--design-unit, 4) * 4px);
-    max-height: calc(var(--base-height-multiplier, 10) * 5px);
-  }
-
-  .send-button {
-    flex-shrink: 0;
-    align-self: flex-end;
-  }
-`;