@genesislcap/ai-assistant 15.6.2 → 15.7.1

package/src/main/main.template.ts

@@ -274,6 +274,118 @@ const restoringTemplate = html<FoundationAiAssistant>`
   </div>
 `;
 
+/**
+ * Class list for the banner below, joined rather than interpolated so an
+ * inapplicable modifier contributes nothing. Two interpolations directly in the
+ * attribute emitted `class="blocked-banner  "` in the common (unblocked) case —
+ * harmless to the browser, but it shows up in every DOM snapshot and every
+ * innerHTML assertion a host writes against this element.
+ *
+ * The two modifiers name what they actually gate, which is why neither is
+ * `is-blocked`: `is-visible` means the banner has something to say, and that
+ * includes PARTIAL exhaustion — one vendor walled, composer still live, `blocked`
+ * false. `is-partial` then softens the treatment for exactly that case. Naming
+ * the first after `blocked` read as a contradiction beside the second, and made
+ * the styles say `.blocked-banner.is-blocked` to mean "visible".
+ *
+ * Exported for the unit test that pins the attribute; not part of the element
+ * API.
+ *
+ * @internal
+ */
+export const blockedBannerClasses = (x: FoundationAiAssistant): string =>
+  [
+    'blocked-banner',
+    x.bannerVisible ? 'is-visible' : '',
+    x.bannerVisible && !x.blocked ? 'is-partial' : '',
+  ]
+    .filter(Boolean)
+    .join(' ');
+
+/**
+ * Id of the blocked banner, referenced by the composer controls'
+ * `aria-describedby`. Shadow-DOM-scoped, so a fixed string cannot collide with
+ * the host page — and IDREF resolution is same-root, which is exactly where both
+ * ends of this reference live.
+ *
+ * @internal
+ */
+export const BLOCKED_BANNER_ID = 'blocked-banner';
+
+/**
+ * `aria-describedby` for the composer's textarea, send button and attach button:
+ * the banner's id whenever the banner has something to say, otherwise `null` (so
+ * the attribute is omitted rather than emitted empty).
+ *
+ * Keyed on `bannerVisible`, NOT on `blocked`, and that is the point. The
+ * PARTIAL state — some vendor walled, composer still live — is the state this
+ * feature exists to create, and it was the one state with no accessible
+ * explanation at all: `aria-disabled` and `aria-label` bind only on `blocked`, and
+ * a live composer keeps the host's own placeholder, so a screen-reader user
+ * arriving at the textarea heard "Type a message" with no hint that the next turn
+ * might be refused. The banner's `role="status"` announces the text when it
+ * CHANGES; this is what makes the same explanation reachable afterwards, on
+ * demand, from the control it is about.
+ *
+ * Applied in the fully blocked state too, where it is additive: the `aria-label`
+ * there states the reason as the control's name, and this restates it as its
+ * description for the send/attach buttons, which carry neither.
+ *
+ * Exported for the unit test that pins it; not part of the element API.
+ *
+ * @internal
+ */
+export const composerDescribedBy = (x: FoundationAiAssistant): string | null =>
+  x.bannerVisible ? BLOCKED_BANNER_ID : null;
+
+/**
+ * Persistent banner shown above the composer while a backend condition blocks
+ * the assistant — today an exhausted AI budget (GENC-1464).
+ *
+ * Deliberately NOT a transcript replacement like `compactingTemplate` /
+ * `restoringTemplate`: those cover a transient rewrite where the history is
+ * mid-flight and unsafe to show, whereas a block is indefinite. Hiding the
+ * conversation behind it would strand the user's work behind a wall they
+ * cannot clear, so the banner sits alongside a fully readable transcript.
+ *
+ * `role="status"` (not `alert`) — it is a standing condition the user can also
+ * see in the disabled composer, not an interruption.
+ *
+ * **Rendered unconditionally, empty when unblocked.** This is an accessibility
+ * requirement, not a stylistic choice: `role="status"` announces MUTATIONS to a
+ * region the assistive technology was already observing. A region INSERTED into
+ * the DOM already carrying its text is widely missed across NVDA, JAWS and
+ * VoiceOver — and it is the only announcement a screen-reader user gets, since
+ * the textarea simultaneously flips to `disabled`, which drops it out of the tab
+ * order and means the swapped "AI usage limit reached" placeholder is never
+ * voiced (`maybeAutoFocusChatInput` also no-ops against a disabled control). So
+ * the region stays mounted and only its TEXT changes.
+ *
+ * It is deliberately **not** collapsed with `display: none` when unblocked —
+ * that would drop it out of the accessibility tree and make the flip an
+ * insertion again, defeating the point. Instead the visual treatment (padding,
+ * border, background) hangs off the `is-visible` class, so the empty container
+ * occupies no space while remaining a live, registered region.
+ *
+ * It carries {@link BLOCKED_BANNER_ID} so the composer controls can point
+ * `aria-describedby` at it — see {@link composerDescribedBy}.
+ */
+const blockedBannerTemplate = html<FoundationAiAssistant>`
+  <div
+    id="${BLOCKED_BANNER_ID}"
+    class="${blockedBannerClasses}"
+    part="blocked-banner"
+    role="status"
+  >
+    ${when(
+      (x) => x.bannerVisible,
+      html<FoundationAiAssistant>`
+        <span class="blocked-banner-text">${(x) => x.effectiveBlockedReason}</span>
+      `,
+    )}
+  </div>
+`;
+
 // ─── Public factory ───────────────────────────────────────────────────────────
 
 /** @internal */
@@ -437,13 +549,18 @@ ${(tc) => (tc.foldPath?.length ? `${tc.foldPath.join(' › ')} › ` : '')}<stro
     </${buttonTag}>
   `;
 
+  // The attach button shares the textarea's disable gate. Attaching a file that
+  // can never be sent is a dead end — and `blocked`, `compacting` and `restoring`
+  // were all missing from it, so files could be attached during a compaction or
+  // against an exhausted budget and then never sent.
   const attachButtonTemplate = html<FoundationAiAssistant>`
     <${buttonTag}
       class="attach-button"
       part="attach-button"
       appearance="stealth"
       title=${(x) => `Attach file (${x.chatConfig.ui?.acceptedFiles})`}
-      ?disabled=${(x) => x.busy}
+      ?disabled=${(x) => x.busy || x.compacting || x.restoring || x.blocked}
+      aria-describedby=${composerDescribedBy}
       @click=${(x) => x.triggerFileInput()}
     ><${iconTag} name="paperclip"></${iconTag}></${buttonTag}>
   `;
@@ -697,7 +814,7 @@ ${(tc) => (tc.foldPath?.length ? `${tc.foldPath.join(' › ')} › ` : '')}<stro
         `,
       )}
       ${when(
-        (x) => x.chatConfig.suggestions?.behavior !== 'never',
+        (x) => x.chatConfig.suggestions?.behavior !== 'never' && !x.suggestionsBlocked,
         html<FoundationAiAssistant>`
           <chat-suggestions
             :state="${(x) => x.suggestionsState}"
@@ -710,6 +827,12 @@ ${(tc) => (tc.foldPath?.length ? `${tc.foldPath.join(' › ')} › ` : '')}<stro
         (x) => x.sessionMenuOpen && !x.busy,
         sessionMenuPanelTemplate,
       )}
+      ${
+        /* Rendered above the composer and independently of it — a host that hides the
+           built-in composer (`composerHiddenByConfig`) still needs to be told why its own
+           input is being refused. */ ''
+      }
+      ${blockedBannerTemplate}
       ${when(
         (x) =>
           !x.composerHiddenByConfig &&
@@ -743,7 +866,10 @@ ${(tc) => (tc.foldPath?.length ? `${tc.foldPath.join(' › ')} › ` : '')}<stro
               style=${(x) => x.composerHeightStyle}
               placeholder=${(x) => x.effectivePlaceholder}
               :value=${(x) => x.inputValue}
-              ?disabled=${(x) => x.busy || x.compacting || x.restoring}
+              ?disabled=${(x) => x.busy || x.compacting || x.restoring || x.blocked}
+              aria-disabled=${(x) => (x.blocked ? 'true' : null)}
+              aria-label=${(x) => (x.blocked ? x.effectiveBlockedReason : null)}
+              aria-describedby=${composerDescribedBy}
               @input=${(x, c) => (x.inputValue = (c.event.target as any).value)}
               @keydown=${(x, c) => {
                 if (
@@ -782,7 +908,8 @@ ${(tc) => (tc.foldPath?.length ? `${tc.foldPath.join(' › ')} › ` : '')}<stro
               <${buttonTag}
                 class="send-button"
                 part="send-button"
-                ?disabled=${(x) => x.busy || x.compacting || x.restoring || (!x.inputValue.trim() && !x.attachments.length)}
+                ?disabled=${(x) => x.busy || x.compacting || x.restoring || x.blocked || (!x.inputValue.trim() && !x.attachments.length)}
+                aria-describedby=${composerDescribedBy}
                 @click=${(x) => x.handleSendClick()}
               >Send</${buttonTag}>
             </div>