@genesislcap/ai-assistant 14.452.1 → 14.453.0

package/src/components/orchestrating-driver/orchestrating-driver.ts

@@ -93,6 +93,12 @@ export class OrchestratingDriver extends EventTarget implements AiDriver {
    * so long-running `onActivate` work can bail if the session disconnects.
    */
   private readonly lifecycleAbortController = new AbortController();
+  /**
+   * Set by `cancel()` for the duration of a `sendMessage` run. Breaks the
+   * handoff loop so we don't classify or start another agent turn after the
+   * user stops. Reset at the start of each `sendMessage`.
+   */
+  private cancelled = false;
   /**
    * Sticky user pick from the picker (or the host's `setAgent` API). Only
    * changes on explicit user action. Survives flow completion: when a stateful
@@ -263,6 +269,7 @@ export class OrchestratingDriver extends EventTarget implements AiDriver {
   }
 
   async sendMessage(input: string, attachments?: ChatAttachment[]): Promise<ChatDriverResult> {
+    this.cancelled = false;
     const history = this.chatDriver.getHistory() as ChatMessage[];
 
     // Emit the user message immediately so the UI reflects it during the classify
@@ -282,6 +289,11 @@ export class OrchestratingDriver extends EventTarget implements AiDriver {
     let remainingTask = '';
 
     while (true) {
+      // Cancelled before a (next) agent turn started — e.g. during classify.
+      // The chat driver appends its own "Stopped." marker when a turn it was
+      // running is cancelled, so we just stop here without a duplicate.
+      if (this.cancelled) break;
+
       // oxlint-disable-next-line no-await-in-loop
       await this.applyAgent(currentAgent);
 
@@ -471,6 +483,16 @@ export class OrchestratingDriver extends EventTarget implements AiDriver {
     this.dispatchEvent(new CustomEvent('agent-changed', { detail: undefined }));
   }
 
+  /**
+   * Stop the current turn (user "stop" button). Cancels the inner chat driver's
+   * in-flight request and breaks the handoff loop so no further agent turn or
+   * classify runs. The driver stays usable for the next message.
+   */
+  cancel(): void {
+    this.cancelled = true;
+    this.chatDriver.cancel();
+  }
+
   /**
    * Fire `onDeactivate` on the current active agent and abort any pending
    * lifecycle work. Called by the host on session teardown so machines can
@@ -490,6 +512,8 @@ export class OrchestratingDriver extends EventTarget implements AiDriver {
       }
     }
     this.lifecycleAbortController.abort();
+    // Tear down the inner driver too, so any in-flight provider request aborts.
+    this.chatDriver.dispose();
     this.activeAgent = undefined;
   }
 

package/src/main/main.styles.ts

@@ -599,6 +599,32 @@ export const styles = css`
     background-color: var(--neutral-layer-2);
   }
 
+  /* Right-hand control column, mirroring .input-left-controls — holds the
+     Stop button (shown while a turn runs) stacked above the Send button. The
+     Stop button is an icon (stop → spinner), so the column width is driven by
+     Send and stays stable whether a turn is running or idle. */
+  .input-right-controls {
+    display: flex;
+    flex-direction: column;
+    align-items: stretch;
+    gap: calc(var(--design-unit) * 1px);
+  }
+
+  /* The "stopping" state shows a spinner — rotate it (the icon set's glyph is
+     static). Transform-only, so it never affects layout/width. */
+  @keyframes ai-stop-spin {
+    to {
+      transform: rotate(360deg);
+    }
+  }
+
+  .stop-icon-spinning {
+    /* inline-block so the icon host is transformable — an inline element
+       ignores the transform, which is why the spinner appeared frozen. */
+    display: inline-block;
+    animation: ai-stop-spin 0.8s linear infinite;
+  }
+
   .input-left-controls {
     display: flex;
     flex-direction: column;

package/src/main/main.template.ts

@@ -22,7 +22,7 @@ import type {
   ChatToolCall,
 } from '@genesislcap/foundation-ai';
 import { isChatToolCallUnknown } from '@genesislcap/foundation-ai';
-import { html, ref, repeat, when, ViewTemplate } from '@genesislcap/web-core';
+import { classNames, html, ref, repeat, when, ViewTemplate } from '@genesislcap/web-core';
 import type { FoundationAiAssistant } from './main';
 import { ANIMATION_DEFS } from './main.types';
 
@@ -288,7 +288,7 @@ ${(tc) => (tc.foldPath?.length ? `${tc.foldPath.join(' › ')} › ` : '')}<stro
       part="agent-toggle-button"
       appearance="stealth"
       title=${(x) => x.agentToggleTitle}
-      ?disabled=${(x) => x.state === 'loading' || x.pinLocked}
+      ?disabled=${(x) => x.busy || x.pinLocked}
       @click=${(x) => x.toggleAgentPicker()}
     >
       ${when(
@@ -319,7 +319,7 @@ ${(tc) => (tc.foldPath?.length ? `${tc.foldPath.join(' › ')} › ` : '')}<stro
       part="attach-button"
       appearance="stealth"
       title=${(x) => `Attach file (${x.chatConfig.ui?.acceptedFiles})`}
-      ?disabled=${(x) => x.state === 'loading'}
+      ?disabled=${(x) => x.busy}
       @click=${(x) => x.triggerFileInput()}
     ><${iconTag} name="paperclip"></${iconTag}></${buttonTag}>
   `;
@@ -658,7 +658,7 @@ ${(tc) => (tc.foldPath?.length ? `${tc.foldPath.join(' › ')} › ` : '')}<stro
       ${when(
         (x) =>
           !x.composerHiddenByConfig &&
-          !(x.state === 'loading' && x.effectiveChatInputDuringExecution === 'hidden'),
+          !(x.busy && x.effectiveChatInputDuringExecution === 'hidden'),
         html<FoundationAiAssistant>`
           <div class="input-row" part="input-row">
             ${when(
@@ -671,7 +671,7 @@ ${(tc) => (tc.foldPath?.length ? `${tc.foldPath.join(' › ')} › ` : '')}<stro
               part="input"
               placeholder=${(x) => x.effectivePlaceholder}
               :value=${(x) => x.inputValue}
-              ?disabled=${(x) => x.state === 'loading'}
+              ?disabled=${(x) => x.busy}
               @input=${(x, c) => (x.inputValue = (c.event.target as any).value)}
               @keydown=${(x, c) => {
                 if (
@@ -685,12 +685,31 @@ ${(tc) => (tc.foldPath?.length ? `${tc.foldPath.join(' › ')} › ` : '')}<stro
                 return true;
               }}
             ></${textareaTag}>
-            <${buttonTag}
-              class="send-button"
-              part="send-button"
-              ?disabled=${(x) => x.state === 'loading' || (!x.inputValue.trim() && !x.attachments.length)}
-              @click=${(x) => x.handleSendClick()}
-            >Send</${buttonTag}>
+            <div class="input-right-controls">
+              ${when(
+                (x) => x.busy && !x.chatConfig.ui?.hideStopButton,
+                html<FoundationAiAssistant>`
+                  <${buttonTag}
+                    class="stop-button"
+                    part="stop-button"
+                    appearance="stealth"
+                    title="${(x) => (x.state === 'cancelling' ? 'Stopping…' : 'Stop')}"
+                    aria-label="${(x) => (x.state === 'cancelling' ? 'Stopping' : 'Stop')}"
+                    ?disabled=${(x) => x.state === 'cancelling'}
+                    @click=${(x) => x.handleStopClick()}
+                  ><${iconTag}
+                      class="${(x) => classNames('stop-icon', ['stop-icon-spinning', x.state === 'cancelling'])}"
+                      name="${(x) => (x.state === 'cancelling' ? 'spinner' : 'stop')}"
+                    ></${iconTag}></${buttonTag}>
+                `,
+              )}
+              <${buttonTag}
+                class="send-button"
+                part="send-button"
+                ?disabled=${(x) => x.busy || (!x.inputValue.trim() && !x.attachments.length)}
+                @click=${(x) => x.handleSendClick()}
+              >Send</${buttonTag}>
+            </div>
           </div>
         `,
       )}

package/src/main/main.ts

@@ -241,10 +241,11 @@ export class FoundationAiAssistant extends GenesisElement {
       this.logMeta('state.changed', { from: prev, to: value });
     }
     this.syncShowHalo();
-    // When the agent finishes (loading → !loading) the input row reappears (or
-    // becomes enabled) — refocus it so the user can type immediately, but only
-    // if they haven't moved on to something else on the page.
-    if (prev === 'loading' && value !== 'loading') {
+    // When the turn finishes (a busy state → a settled one) the input row
+    // reappears (or becomes enabled) — refocus it so the user can type
+    // immediately, but only if they haven't moved on to something else.
+    // `cancelling` is busy too, so loading → cancelling must NOT settle yet.
+    if (this.isBusyState(prev) && !this.isBusyState(value)) {
       this.maybeAutoFocusChatInput();
       // Apply any agents swap deferred by the busy guard in `agentsChanged`.
       // Host-side `agents` getters typically cache a stable reference between
@@ -254,6 +255,23 @@ export class FoundationAiAssistant extends GenesisElement {
     }
   }
 
+  /** Whether a state value counts as "busy" — a turn is active. */
+  private isBusyState(s?: AiAssistantState): boolean {
+    return s === 'loading' || s === 'cancelling';
+  }
+
+  /**
+   * True while a turn is active — `loading` or `cancelling` (a stop was
+   * requested but the turn is still winding down). The single "is a turn
+   * running" predicate; UI gates use this so `cancelling` behaves like
+   * `loading` everywhere. `@volatile` so the template re-evaluates it when the
+   * store-backed `state` changes.
+   */
+  @volatile
+  get busy(): boolean {
+    return this.isBusyState(this.state);
+  }
+
   /**
    * Re-runs `agentsChanged` if the live `agents` array no longer matches the
    * fingerprint of the currently installed driver. Used to apply swaps that
@@ -549,7 +567,7 @@ export class FoundationAiAssistant extends GenesisElement {
   @observable showHalo: 'no' | 'orchestrating' | 'agent' = 'no';
 
   private syncShowHalo() {
-    if (this.state !== 'loading') {
+    if (!this.busy) {
       this.showHalo = 'no';
       return;
     }
@@ -563,7 +581,7 @@ export class FoundationAiAssistant extends GenesisElement {
 
   /** True when there is a pending (unresolved) interaction — disables the popout button. */
   get hasActivePendingInteraction(): boolean {
-    if (this.state !== 'loading') return false;
+    if (!this.busy) return false;
     const last = this.messages[this.messages.length - 1];
     return !!last?.interaction && !last.interaction.resolved;
   }
@@ -1020,7 +1038,7 @@ export class FoundationAiAssistant extends GenesisElement {
     document.addEventListener('focusin', this._handleGlobalInteraction, true);
     // Initial focus on mount when idle (skips during a mid-lifecycle reattach
     // where state is loading and the input may be hidden or disabled).
-    if (this.state !== 'loading') this.maybeAutoFocusChatInput();
+    if (!this.busy) this.maybeAutoFocusChatInput();
     logger.debug('FoundationAiAssistant connected');
     this.logMeta('assistant.connected', {
       store: isNewStore ? 'created' : 'restored',
@@ -1112,7 +1130,7 @@ export class FoundationAiAssistant extends GenesisElement {
     // individual step gets a fresh window before the spinner appears.
     // If the last message is a blocking interaction, stop the timer — the AI is
     // waiting for the user, not computing.
-    if (this.state === 'loading') {
+    if (this.busy) {
       const last = this.messages[this.messages.length - 1];
       if (last?.interaction) {
         this.stopLoadingTimer();
@@ -1641,6 +1659,18 @@ export class FoundationAiAssistant extends GenesisElement {
     this.send();
   }
 
+  /**
+   * User clicked Stop. Cancels the current turn via the driver and flips the
+   * button to "Stopping…" until the turn winds down (a tool mid-execution
+   * finishes first). Guarded so a second click is a no-op.
+   */
+  handleStopClick() {
+    // Only valid mid-turn; once `cancelling`, a second click is a no-op.
+    if (this.state !== 'loading') return;
+    this.state = 'cancelling';
+    this.driver?.cancel?.();
+  }
+
   handleSuggestionClick(suggestion: string) {
     this.inputValue = suggestion;
     this.send();
@@ -1668,7 +1698,7 @@ export class FoundationAiAssistant extends GenesisElement {
    * @beta
    */
   async submitMessage(input: { text?: string; files?: File[] }): Promise<SubmitMessageResult> {
-    if (this.state === 'loading') {
+    if (this.busy) {
       return { ok: false, errors: ['Assistant is busy'] };
     }
 
@@ -1682,7 +1712,7 @@ export class FoundationAiAssistant extends GenesisElement {
       // own first await — so no further race window exists.
       // (Cast widens through TS's narrowing of `this.state` from the earlier
       // early-return; the getter can return a different value across an await.)
-      if ((this.state as string) === 'loading') {
+      if (this.busy) {
         return { ok: false, errors: ['Assistant is busy'] };
       }
       if (errors.length) {
@@ -1772,7 +1802,7 @@ export class FoundationAiAssistant extends GenesisElement {
 
   private async send() {
     const input = this.inputValue.trim();
-    if ((!input && !this.attachments.length) || this.state === 'loading') return;
+    if ((!input && !this.attachments.length) || this.busy) return;
     // Capture the session ref before any await. If a lifecycle event occurs during
     // execution, disconnectedCallback clears this._sessionRef — but the captured
     // reference lets the finally block still write 'idle' back to the shared store,
@@ -1800,7 +1830,14 @@ export class FoundationAiAssistant extends GenesisElement {
       // Write directly via captured ref — this._sessionRef may be null if the element
       // disconnected mid-execution. The state setter also calls syncShowHalo(); replicate
       // that here for the case where this element is still connected.
+      const prevState = capturedSessionRef?.store.aiAssistant.state;
       capturedSessionRef?.actions.aiAssistant.setState('idle');
+      // The setter's `state.changed` log is bypassed on this direct write, so
+      // emit it here — otherwise the debug timeline shows the turn entering
+      // loading/cancelling but never returning to idle.
+      if (prevState && prevState !== 'idle') {
+        this.logMeta('state.changed', { from: prevState, to: 'idle' });
+      }
       this.syncShowHalo();
       this.fetchSuggestions();
       // setState was dispatched directly via the captured ref (not via the

package/src/main/main.types.ts

@@ -1,9 +1,13 @@
 /**
  * State of the AI assistant component.
  *
+ * `cancelling` is a refinement of `loading`: a stop was requested but the turn
+ * is still winding down (e.g. a tool mid-execution finishing). It is "busy"
+ * like `loading` — use the host's `busy` getter for "is a turn active" gates.
+ *
  * @beta
  */
-export type AiAssistantState = 'idle' | 'loading' | 'error';
+export type AiAssistantState = 'idle' | 'loading' | 'cancelling' | 'error';
 
 /**
  * Controls the pop-out button shown in the assistant header.