@genesislcap/ai-assistant 15.86.0 → 15.86.1

package/dist/esm/genesis/write-review/write-review.template.js

@@ -79,34 +79,46 @@ const valueOrBlank = (pick) => html `
       </span>
     `)}
 `;
-/** A cell shows what the field becomes, and — when it is changing — what it is now. */
+/**
+ * A cell shows what the field becomes, and — when it is changing — what it is now.
+ *
+ * @remarks
+ * The cell carries its column's label, and its content sits in one wrapper, for the stacked
+ * layout: there the headings are gone and each cell is a label beside its value (see
+ * `GenesisWriteReview.stacked`), and the wrapper keeps the − and + lines together in the value's
+ * column rather than letting each take a grid cell of its own.
+ */
 const cell = html `
   <td
+    role="cell"
+    data-label="${(x) => x.label}"
     class="${(x) => [x.changed ? 'changed' : '', x.identifying ? 'identifying' : '', x.long ? 'long' : '']
     .join(' ')
     .trim()}"
     title="${(x) => { var _a; return x.identifying ? `This field identifies ${(_a = x.identifies) !== null && _a !== void 0 ? _a : 'the row being removed'}` : ''; }}"
   >
-    ${when((x) => x.identifying, html `
-        <span class="sr-only">identifies this row:</span>
-      `)}
-    ${when((x) => x.changed && x.previousDisplay !== undefined, html `
-        <span class="sr-only">was</span>
-        <span class="was">${mark('−')}${valueOrBlank((x) => x.previousDisplay)}</span>
-        <span class="sr-only">now</span>
-        <span class="now">${mark('+')}${valueOrBlank((x) => x.display)}</span>
-      `)}
-    ${when((x) => !!x.input, html `
-        <span class="input-mark">input:</span>
-      `)}
-    ${when((x) => !(x.changed && x.previousDisplay !== undefined), html `
-        ${(x) => x.display}
-      `)}
+    <div class="value">
+      ${when((x) => x.identifying, html `
+          <span class="sr-only">identifies this row:</span>
+        `)}
+      ${when((x) => x.changed && x.previousDisplay !== undefined, html `
+          <span class="sr-only">was</span>
+          <span class="was">${mark('−')}${valueOrBlank((x) => x.previousDisplay)}</span>
+          <span class="sr-only">now</span>
+          <span class="now">${mark('+')}${valueOrBlank((x) => x.display)}</span>
+        `)}
+      ${when((x) => !!x.input, html `
+          <span class="input-mark">input:</span>
+        `)}
+      ${when((x) => !(x.changed && x.previousDisplay !== undefined), html `
+          ${(x) => x.display}
+        `)}
+    </div>
   </td>
 `;
 const row = html `
-  <tr class="${(x, c) => rowClass(x, c.parent)}">
-    <td class="select">
+  <tr role="row" class="${(x, c) => rowClass(x, c.parent)}">
+    <td role="cell" class="select">
       <rapid-checkbox
         aria-label="Select ${(x) => x.label}"
         aria-describedby="${(x) => { var _a; return (((_a = x.problems) === null || _a === void 0 ? void 0 : _a.length) ? `problems-${x.index}` : ''); }}"
@@ -130,9 +142,9 @@ const row = html `
     ${repeat((x) => x.cells, cell)}
   </tr>
   ${when((x) => { var _a; return !!((_a = x.problems) === null || _a === void 0 ? void 0 : _a.length); }, html `
-      <tr class="refused">
-        <td></td>
-        <td class="problems" colspan="99" id="problems-${(x) => String(x.index)}">
+      <tr role="row" class="refused">
+        <td role="cell"></td>
+        <td role="cell" class="problems" colspan="99" id="problems-${(x) => String(x.index)}">
           ${(x) => { var _a; return (_a = x.problems) === null || _a === void 0 ? void 0 : _a.join('; '); }}
         </td>
       </tr>
@@ -157,8 +169,13 @@ export const WriteReviewTemplate = html `
       ${when((x) => !!x.customCodeLine, html `
           <p class="custom-code" id="${CUSTOM_CODE_LINE_ID}">${(x) => x.customCodeLine}</p>
         `)}
-      <div class="scroller">
+      ${
+/* The table's roles are stated, not left to the tags: the stacked layout sets display: block
+   on its parts, and a browser then drops their table semantics, so a screen reader would
+   hear a run of values with no row or column to put them in. */ ''}
+      <div class="scroller ${(x) => (x.stacked ? 'stacked' : '')}">
         <table
+          role="table"
           aria-label="${(x) => x.tableLabel}"
           aria-describedby="${(x) => x.customCodeLine
     ? CUSTOM_CODE_LINE_ID
@@ -166,9 +183,9 @@ export const WriteReviewTemplate = html `
         ? ROW_ACTION_LINES_ID
         : undefined}"
         >
-          <thead>
-            <tr>
-              <th>
+          <thead role="rowgroup">
+            <tr role="row">
+              <th role="columnheader" class="select">
                 <rapid-checkbox
                   aria-label="Select all rows"
                   :checked="${(x) => x.allSelected}"
@@ -177,11 +194,11 @@ export const WriteReviewTemplate = html `
                 ></rapid-checkbox>
               </th>
               ${repeat((x) => { var _a, _b; return (_b = (_a = x.model) === null || _a === void 0 ? void 0 : _a.columns) !== null && _b !== void 0 ? _b : []; }, html `
-                  <th>${(c) => c.label}</th>
+                  <th role="columnheader">${(c) => c.label}</th>
                 `)}
             </tr>
           </thead>
-          <tbody>${repeat((x) => { var _a, _b; return (_b = (_a = x.model) === null || _a === void 0 ? void 0 : _a.rows) !== null && _b !== void 0 ? _b : []; }, row)}</tbody>
+          <tbody role="rowgroup">${repeat((x) => { var _a, _b; return (_b = (_a = x.model) === null || _a === void 0 ? void 0 : _a.rows) !== null && _b !== void 0 ? _b : []; }, row)}</tbody>
         </table>
       </div>
       <div class="actions">

package/dist/esm/main/main.js

@@ -203,6 +203,7 @@ avoidTreeShaking(AiChatMarkdown, AiChatInteractionWrapper, AiHaloOverlay, AiWave
  * {@link FoundationAiAssistant.finalizeCostSession} to flush early; it is idempotent.
  *
  * @fires chat-header-mousedown - Fired when the user presses the chat header in `popout-mode="expand"` (for drag-to-popout hosts). Bubbles and composed. detail: `ChatHeaderMouseDownDetail`
+ * @fires close-requested - Fired when the user presses the header's Close button, which shows while `closable` is set (the chat bubble sets it while the assistant is in its dialog). Bubbles and composed.
  * @fires session-cleared - Fired after the session is wiped (the lifecycle menu's Clear). The payload is captured before teardown so the host can clean up any external state the active agent was working on. Bubbles and composed. detail: `SessionClearedDetail`
  * @fires handoff-started - Fired when an agent's `handOff` takes effect and its target becomes active. Bubbles and composed. detail: `HandOffFrame`
  * @fires handoff-returned - Fired when a hand-off ends and its caller is active again; `detail.outcome` says how it ended. Bubbles and composed. detail: `HandOffFrame`
@@ -324,6 +325,11 @@ let FoundationAiAssistant = FoundationAiAssistant_1 = class FoundationAiAssistan
         /** Sanitized `userIcon`, or the default person mark; bound into the template. @internal */
         this.userIconSafe = userIconSvg;
         this.placeholder = 'Message assistant...';
+        /**
+         * Shows a Close button in the header, which fires `close-requested` and leaves the closing to
+         * whatever holds the assistant. The chat bubble sets it while the assistant is in its dialog.
+         */
+        this.closable = false;
         this.chatConfig = {};
         /**
          * Optional session persistence (GENC-1351). Off by default — set `enabled`
@@ -4918,6 +4924,10 @@ let FoundationAiAssistant = FoundationAiAssistant_1 = class FoundationAiAssistan
             return;
         agenticActivityBus.publish('agent-attention', { sessionKey, kind: 'turn-ended' });
     }
+    /** Called when the user clicks the header's Close button. */
+    handleClose() {
+        this.dispatchEvent(new CustomEvent(AiAssistantEvent.CloseRequested, { bubbles: true, composed: true }));
+    }
     onChatHeaderMouseDown(e) {
         if (this.popoutMode === 'collapse')
             return;
@@ -5060,6 +5070,9 @@ __decorate([
 __decorate([
     attr({ attribute: 'popout-mode' })
 ], FoundationAiAssistant.prototype, "popoutMode", void 0);
+__decorate([
+    attr({ mode: 'boolean' })
+], FoundationAiAssistant.prototype, "closable", void 0);
 __decorate([
     observable
 ], FoundationAiAssistant.prototype, "agents", void 0);

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

@@ -70,9 +70,45 @@ const baseStyles = css `
     margin-left: auto;
   }
 
+  /* Square, as wide as the control is tall, with the glyph on both centre lines. The
+     design-system control pads its sides and aligns its content to the baseline, and the icon
+     sits inline on a text line, so each button came out as wide as its glyph plus that padding
+     (the X narrower than the cog) and a little above centre, more so with a tall-ascender font.
+     An app's ::part() rules still win. */
+  .close-button,
   .settings-button,
   .popout-button {
     font-size: 1.2em;
+    min-width: 0;
+  }
+
+  .close-button::part(control),
+  .settings-button::part(control),
+  .popout-button::part(control) {
+    flex-grow: 0;
+    width: auto;
+    aspect-ratio: 1;
+    min-width: 0;
+    padding: 0;
+    align-items: center;
+    justify-content: center;
+  }
+
+  .close-button::part(content),
+  .settings-button::part(content),
+  .popout-button::part(content) {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    line-height: 1;
+  }
+
+  /* The glyph's own wrapper, so the icon font's baseline nudge (vertical-align: -0.125em) has no
+     line to act on. */
+  .close-button > ::part(i-icon),
+  .settings-button > ::part(i-icon),
+  .popout-button > ::part(i-icon) {
+    display: flex;
   }
 
   ::slotted([slot='header-actions-extra']) {
@@ -327,6 +363,12 @@ const baseStyles = css `
     box-shadow: 0 2px 8px color-mix(in srgb, var(--accent-fill-rest) 35%, transparent);
   }
 
+  /* On the accent fill an accent-coloured link disappears; it takes the bubble's own colour and
+     keeps its underline. */
+  .message.user ai-chat-markdown::part(md-link) {
+    color: inherit;
+  }
+
   .message.ai {
     background: linear-gradient(135deg, var(--neutral-layer-3) 0%, var(--neutral-layer-4) 100%);
     color: var(--neutral-foreground-rest);

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

@@ -1038,7 +1038,7 @@ ${(tc) => { var _a; return (((_a = tc.foldPath) === null || _a === void 0 ? void
                 <span class="chat-title" part="chat-title">${(x) => x.headerTitle}</span>
               `)}
             ${
-    /* The two buttons below re-publish the design-system button's inner parts (control,
+    /* The buttons below re-publish the design-system button's inner parts (control,
        content) into THIS component's part namespace via exportparts.
 
        Without it they are unreachable by an embedding app: ::part() crosses exactly one
@@ -1056,6 +1056,16 @@ ${(tc) => { var _a; return (((_a = tc.foldPath) === null || _a === void 0 ? void
        parts are exported, and so control does not collide across buttons. */ ''}
             <div class="header-actions" part="header-actions">
               <slot name="header-actions-extra"></slot>
+              ${when((x) => x.closable, html `
+                  <${buttonTag}
+                    class="close-button"
+                    part="close-button"
+                    exportparts="control: close-button-control, content: close-button-content"
+                    appearance="stealth"
+                    title="Close"
+                    @click=${(x) => x.handleClose()}
+                  ><${iconTag} name="times"></${iconTag}></${buttonTag}>
+                `)}
               ${when((x) => !!x.popoutMode, html `
                   <${buttonTag}
                     class="popout-button"

package/dist/esm/main/main.types.js

@@ -30,6 +30,8 @@ export const AiAssistantEvent = {
     HandOffReturned: 'handoff-returned',
     /** A hand-off ended with no hand-back. `detail`: `HandOffFrame`, with `outcome`. */
     HandOffUnwound: 'handoff-unwound',
+    /** The header's Close button pressed, shown while `closable` is set. No `detail`. */
+    CloseRequested: 'close-requested',
 };
 /**
  * Registry of all available animations with their display metadata.

package/dist/react.cjs

@@ -53,12 +53,14 @@ const AiWavesIndicator = React.forwardRef(function AiWavesIndicator(props, ref)
 });
 
 const FoundationAiAssistant = React.forwardRef(function FoundationAiAssistant(props, ref) {
-  const { onBudgetRefreshRequested, onChatHeaderMousedown, onSessionCleared, onHandoffStarted, onHandoffReturned, onHandoffUnwound, children, ...rest } = props;
+  const { onBudgetRefreshRequested, onChatHeaderMousedown, onCloseRequested, onSessionCleared, onHandoffStarted, onHandoffReturned, onHandoffUnwound, children, ...rest } = props;
   const _innerRef = React.useRef(null);
   const _onBudgetRefreshRequestedRef = React.useRef(onBudgetRefreshRequested);
   _onBudgetRefreshRequestedRef.current = onBudgetRefreshRequested;
   const _onChatHeaderMousedownRef = React.useRef(onChatHeaderMousedown);
   _onChatHeaderMousedownRef.current = onChatHeaderMousedown;
+  const _onCloseRequestedRef = React.useRef(onCloseRequested);
+  _onCloseRequestedRef.current = onCloseRequested;
   const _onSessionClearedRef = React.useRef(onSessionCleared);
   _onSessionClearedRef.current = onSessionCleared;
   const _onHandoffStartedRef = React.useRef(onHandoffStarted);
@@ -74,6 +76,8 @@ const FoundationAiAssistant = React.forwardRef(function FoundationAiAssistant(pr
     el.addEventListener('budget-refresh-requested', _onBudgetRefreshRequestedFn);
     const _onChatHeaderMousedownFn = (e) => _onChatHeaderMousedownRef.current?.(e);
     el.addEventListener('chat-header-mousedown', _onChatHeaderMousedownFn);
+    const _onCloseRequestedFn = (e) => _onCloseRequestedRef.current?.(e);
+    el.addEventListener('close-requested', _onCloseRequestedFn);
     const _onSessionClearedFn = (e) => _onSessionClearedRef.current?.(e);
     el.addEventListener('session-cleared', _onSessionClearedFn);
     const _onHandoffStartedFn = (e) => _onHandoffStartedRef.current?.(e);
@@ -85,6 +89,7 @@ const FoundationAiAssistant = React.forwardRef(function FoundationAiAssistant(pr
     return () => {
       el.removeEventListener('budget-refresh-requested', _onBudgetRefreshRequestedFn);
       el.removeEventListener('chat-header-mousedown', _onChatHeaderMousedownFn);
+      el.removeEventListener('close-requested', _onCloseRequestedFn);
       el.removeEventListener('session-cleared', _onSessionClearedFn);
       el.removeEventListener('handoff-started', _onHandoffStartedFn);
       el.removeEventListener('handoff-returned', _onHandoffReturnedFn);

package/dist/react.mjs

@@ -51,12 +51,14 @@ export const AiWavesIndicator = React.forwardRef(function AiWavesIndicator(props
 });
 
 export const FoundationAiAssistant = React.forwardRef(function FoundationAiAssistant(props, ref) {
-  const { onBudgetRefreshRequested, onChatHeaderMousedown, onSessionCleared, onHandoffStarted, onHandoffReturned, onHandoffUnwound, children, ...rest } = props;
+  const { onBudgetRefreshRequested, onChatHeaderMousedown, onCloseRequested, onSessionCleared, onHandoffStarted, onHandoffReturned, onHandoffUnwound, children, ...rest } = props;
   const _innerRef = React.useRef(null);
   const _onBudgetRefreshRequestedRef = React.useRef(onBudgetRefreshRequested);
   _onBudgetRefreshRequestedRef.current = onBudgetRefreshRequested;
   const _onChatHeaderMousedownRef = React.useRef(onChatHeaderMousedown);
   _onChatHeaderMousedownRef.current = onChatHeaderMousedown;
+  const _onCloseRequestedRef = React.useRef(onCloseRequested);
+  _onCloseRequestedRef.current = onCloseRequested;
   const _onSessionClearedRef = React.useRef(onSessionCleared);
   _onSessionClearedRef.current = onSessionCleared;
   const _onHandoffStartedRef = React.useRef(onHandoffStarted);
@@ -72,6 +74,8 @@ export const FoundationAiAssistant = React.forwardRef(function FoundationAiAssis
     el.addEventListener('budget-refresh-requested', _onBudgetRefreshRequestedFn);
     const _onChatHeaderMousedownFn = (e) => _onChatHeaderMousedownRef.current?.(e);
     el.addEventListener('chat-header-mousedown', _onChatHeaderMousedownFn);
+    const _onCloseRequestedFn = (e) => _onCloseRequestedRef.current?.(e);
+    el.addEventListener('close-requested', _onCloseRequestedFn);
     const _onSessionClearedFn = (e) => _onSessionClearedRef.current?.(e);
     el.addEventListener('session-cleared', _onSessionClearedFn);
     const _onHandoffStartedFn = (e) => _onHandoffStartedRef.current?.(e);
@@ -83,6 +87,7 @@ export const FoundationAiAssistant = React.forwardRef(function FoundationAiAssis
     return () => {
       el.removeEventListener('budget-refresh-requested', _onBudgetRefreshRequestedFn);
       el.removeEventListener('chat-header-mousedown', _onChatHeaderMousedownFn);
+      el.removeEventListener('close-requested', _onCloseRequestedFn);
       el.removeEventListener('session-cleared', _onSessionClearedFn);
       el.removeEventListener('handoff-started', _onHandoffStartedFn);
       el.removeEventListener('handoff-returned', _onHandoffReturnedFn);

package/docs/styling.md

@@ -391,15 +391,21 @@ foundation-ai-assistant::part(messages-content) { display: contents; }
 
 ### The header buttons
 
-The header's popout and settings buttons are design-system buttons, so their
+The header's close, popout and settings buttons are design-system buttons, so their
 padded inner `control` sits two shadow boundaries from the app. `::part()` crosses
 exactly one, so the assistant re-publishes them under its own namespace:
 
 | Part | Element |
 | --- | --- |
-| `popout-button` / `settings-button` | The button hosts |
-| `popout-button-control` / `settings-button-control` | The button's inner control — where padding and sizing actually live |
-| `popout-button-content` / `settings-button-content` | The content slot wrapper inside the control |
+| `close-button` / `popout-button` / `settings-button` | The button hosts |
+| `close-button-control` / `popout-button-control` / `settings-button-control` | The button's inner control — where padding and sizing actually live |
+| `close-button-content` / `popout-button-content` / `settings-button-content` | The content slot wrapper inside the control |
+
+By default each is a square as wide as the control is tall, with its icon centred. The close
+button shows while the `closable` attribute is set — the chat bubble sets it while the assistant
+is in its dialog — and fires `close-requested`; it replaces the button the bubble used to inject
+into the `header-actions-extra` slot, so a host rule aimed at that slotted button no longer
+matches anything.
 
 Size the control, not the host: shrinking the host and clipping the overflow
 flattens the glyph, which is the workaround these parts exist to remove.

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@genesislcap/ai-assistant",
   "description": "Genesis AI Assistant micro-frontend",
-  "version": "15.86.0",
+  "version": "15.86.1",
   "license": "SEE LICENSE IN license.txt",
   "main": "dist/esm/index.js",
   "types": "dist/dts/index.d.ts",
@@ -92,31 +92,31 @@
     }
   },
   "devDependencies": {
-    "@genesislcap/foundation-comms": "15.86.0",
-    "@genesislcap/foundation-testing": "15.86.0",
-    "@genesislcap/genx": "15.86.0",
-    "@genesislcap/ts-builder": "15.86.0",
-    "@genesislcap/uvu-playwright-builder": "15.86.0",
-    "@genesislcap/vite-builder": "15.86.0",
-    "@genesislcap/webpack-builder": "15.86.0",
+    "@genesislcap/foundation-comms": "15.86.1",
+    "@genesislcap/foundation-testing": "15.86.1",
+    "@genesislcap/genx": "15.86.1",
+    "@genesislcap/ts-builder": "15.86.1",
+    "@genesislcap/uvu-playwright-builder": "15.86.1",
+    "@genesislcap/vite-builder": "15.86.1",
+    "@genesislcap/webpack-builder": "15.86.1",
     "@types/dompurify": "^3.0.5",
     "@types/marked": "^5.0.2",
     "esbuild": "0.25.12"
   },
   "dependencies": {
-    "@genesislcap/foundation-ai": "15.86.0",
-    "@genesislcap/foundation-logger": "15.86.0",
-    "@genesislcap/foundation-notifications": "15.86.0",
-    "@genesislcap/foundation-redux": "15.86.0",
-    "@genesislcap/foundation-ui": "15.86.0",
-    "@genesislcap/foundation-utils": "15.86.0",
-    "@genesislcap/rapid-design-system": "15.86.0",
-    "@genesislcap/web-core": "15.86.0",
+    "@genesislcap/foundation-ai": "15.86.1",
+    "@genesislcap/foundation-logger": "15.86.1",
+    "@genesislcap/foundation-notifications": "15.86.1",
+    "@genesislcap/foundation-redux": "15.86.1",
+    "@genesislcap/foundation-ui": "15.86.1",
+    "@genesislcap/foundation-utils": "15.86.1",
+    "@genesislcap/rapid-design-system": "15.86.1",
+    "@genesislcap/web-core": "15.86.1",
     "dompurify": "^3.3.1",
     "marked": "^17.0.3"
   },
   "peerDependencies": {
-    "@genesislcap/foundation-comms": "^15.86.0"
+    "@genesislcap/foundation-comms": "^15.86.1"
   },
   "peerDependenciesMeta": {
     "@genesislcap/foundation-comms": {