@genesislcap/ai-assistant 14.421.1 → 14.422.0

package/src/main/main.template.ts

@@ -1,3 +1,20 @@
+/**
+ * Whitespace in FAST templates
+ * ────────────────────────────
+ * The formatter adds newlines/indentation to static template string parts,
+ * which FAST renders as real text nodes. With `white-space: pre-wrap` these
+ * are visible as blank lines. To avoid this:
+ *
+ * - Apply `white-space: pre-wrap` only on leaf elements whose *content* needs
+ *   it, never on containers.
+ * - Inside pre-wrap elements keep content on the same line as the opening tag:
+ *   GOOD `<div>${expr}</div>` / BAD `<div>\n  ${expr}\n</div>`
+ * - Extract shared or deeply-nested templates as named module-level consts to
+ *   keep indentation shallow.
+ * - Chain adjacent `when()` calls as `${when(a,tA)}${when(b,tB)}` — separate
+ *   lines let the formatter inject whitespace between them.
+ */
+
 import { isChatToolCallUnknown } from '@genesislcap/foundation-ai';
 import type { ChatAttachment, ChatMessage, ChatToolCall } from '@genesislcap/foundation-ai';
 import { html, ref, repeat, when, ViewTemplate } from '@genesislcap/web-core';
@@ -72,6 +89,64 @@ const senderLabel: Record<string, string> = {
   ai: 'Assistant',
 };
 
+// ─── Sub-agent trace fragments ────────────────────────────────────────────────
+
+const subAgentAssistantTemplate = html<ChatMessage>`
+  <div class="sub-agent-message sub-agent-assistant">${(m) => m.content}</div>
+`;
+
+const subAgentToolCallTemplate = html<ChatMessage>`
+  <div class="sub-agent-message sub-agent-tool-call">
+    ${repeat(
+      (m) => m.toolCalls!,
+      html<ChatToolCall>`
+        <span class="sub-agent-tool-name">${(tc) => tc.name}</span>
+      `,
+    )}
+  </div>
+`;
+
+const subAgentToolResultTemplate = html<ChatMessage>`
+  <div class="sub-agent-message sub-agent-tool-result">${(m) => m.toolResult!.content}</div>
+`;
+
+/** Renders one row of a sub-agent trace (assistant text, tool call, or tool result). */
+const subAgentMessageRowTemplate = html<ChatMessage>`
+  ${when(
+    (m) => m.role === 'assistant' && !m.toolCalls?.length && !!m.content,
+    subAgentAssistantTemplate,
+  )}${when((m) => !!m.toolCalls?.length, subAgentToolCallTemplate)}${when(
+    (m) => m.role === 'tool' && !!m.toolResult?.content,
+    subAgentToolResultTemplate,
+  )}
+`;
+
+/** Collapsed <details> trace shown inside a tool-call card once the sub-agent finishes. */
+const subAgentTraceTemplate = html<ChatToolCall>`
+  <details class="sub-agent-trace">
+    <summary class="sub-agent-trace-summary">
+      ${(tc) => tc.subAgentTrace![0]?.agentName ?? 'Sub-agent'} trace
+    </summary>
+    ${repeat(
+      (tc) => tc.subAgentTrace!.filter((m) => m.role !== 'user'),
+      subAgentMessageRowTemplate,
+    )}
+  </details>
+`;
+
+/** Live streaming trace panel shown while a sub-agent is actively running. */
+const liveSubAgentTraceTemplate = html<FoundationAiAssistant>`
+  <div class="live-sub-agent-trace" part="live-sub-agent-trace">
+    <span class="live-sub-agent-name">${(x) => x.liveSubAgentName ?? 'Sub-agent'}</span>
+    ${repeat(
+      (x) => x.liveSubAgentTrace.filter((m) => m.role !== 'user'),
+      subAgentMessageRowTemplate,
+    )}
+  </div>
+`;
+
+// ─── Public factory ───────────────────────────────────────────────────────────
+
 /** @internal */
 export const FoundationAiAssistantTemplate = (
   designSystemPrefix: string,
@@ -83,6 +158,118 @@ export const FoundationAiAssistantTemplate = (
   const iconTag = `${designSystemPrefix}-icon`;
   const progressTag = `${designSystemPrefix}-progress`;
 
+  // ── Tool call item ──────────────────────────────────────────────────────────
+
+  const toolCallItemTemplate = html<ChatToolCall>`
+    ${when(
+      (tc) => tc.foldEvent === 'open',
+      html<ChatToolCall>`
+        <pre class="payload fold-event fold-open">&#9658; ${(tc) => tc.name}</pre>
+      `,
+    )}
+    ${when(
+      (tc) => tc.foldEvent === 'close',
+      html<ChatToolCall>`
+        <pre class="payload fold-event fold-close">&#9668; ${(tc) => tc.name}</pre>
+      `,
+    )}
+    ${when(
+      (tc) => !tc.foldEvent && !isChatToolCallUnknown(tc),
+      html<ChatToolCall>`
+        <pre class="payload">
+${(tc) => (tc.foldPath?.length ? `${tc.foldPath.join(' › ')} › ` : '')}<strong>${(tc) =>
+            tc.name}</strong>(${(tc) => JSON.stringify(tc.args, null, 2)})</pre
+        >
+      `,
+    )}
+    ${when(
+      isChatToolCallUnknown,
+      html<ChatToolCall>`
+        <pre class="payload unknown-tool">${(tc) => unknownToolPayload(tc)}</pre>
+      `,
+    )}
+    ${when((tc) => !!tc.subAgentTrace?.length, subAgentTraceTemplate)}
+  `;
+
+  // ── Message row ─────────────────────────────────────────────────────────────
+
+  const messageRowTemplate = html<ChatMessage, FoundationAiAssistant>`
+    ${when(
+      (m) => m.role === 'system-event',
+      html<ChatMessage>`
+        <div class="agent-switch-indicator" part="agent-switch-indicator">
+          <span class="agent-switch-label">${(m) => m.content}</span>
+        </div>
+      `,
+    )}
+    ${when(
+      (m) => m.role !== 'system-event',
+      html<ChatMessage, FoundationAiAssistant>`
+        <div class="message-row ${(m) => messageType(m)}">
+          ${when(
+            (m) => m.role !== 'user',
+            html<ChatMessage, FoundationAiAssistant>`
+              <div class="avatar ${(m) => messageType(m)}">
+                ${when(
+                  (m, c) => !!(c.parent as FoundationAiAssistant).imageSrc,
+                  html<ChatMessage, FoundationAiAssistant>`
+                    <img
+                      src="${(m, c) => (c.parent as FoundationAiAssistant).imageSrc}"
+                      alt="Assistant"
+                      class="avatar-img"
+                    />
+                  `,
+                )}
+                ${when(
+                  (m, c) => !(c.parent as FoundationAiAssistant).imageSrc,
+                  genesisIconTemplate,
+                )}
+              </div>
+            `,
+          )}
+          <div class="message ${(m) => messageType(m)}">
+            <div class="sender">
+              ${(m, c) =>
+                messageType(m) === 'ai-function' &&
+                m.agentName &&
+                (c.parent as FoundationAiAssistant).showAgentSwitchIndicator
+                  ? `Tool Call · ${m.agentName}`
+                  : senderLabel[messageType(m)]}
+            </div>
+            <div class="content">
+              ${when(
+                (m) => m.content,
+                html<ChatMessage>`
+                  <ai-chat-markdown :content="${(m) => m.content}"></ai-chat-markdown>
+                `,
+              )}
+              ${when(
+                (m) => m.toolCalls,
+                html<ChatMessage>`
+                  ${repeat((m) => m.toolCalls ?? [], toolCallItemTemplate)}
+                `,
+              )}
+              ${when(
+                (m) => m.interaction,
+                html<ChatMessage, FoundationAiAssistant>`
+                  <ai-chat-interaction-wrapper
+                    :componentName=${(m) => m.interaction!.componentName}
+                    :data=${(m) => m.interaction!.data}
+                    :interactionId=${(m) => m.interaction!.interactionId}
+                    :resolved=${(m) => m.interaction!.resolved}
+                    @interaction-completed=${(m, c) => c.parent.handleInteractionCompleted(c.event)}
+                  ></ai-chat-interaction-wrapper>
+                `,
+              )}
+            </div>
+          </div>
+        </div>
+      `,
+    )}
+  `;
+
+  // ── Root template ───────────────────────────────────────────────────────────
+
   return html<FoundationAiAssistant>`
     <div class="chat-wrapper" part="chat-wrapper">
       ${when(
@@ -247,123 +434,8 @@ export const FoundationAiAssistantTemplate = (
       </div>
 
       <div class="messages" part="messages" ${ref('messagesEl')}>
-
-        ${repeat(
-          (x) => x.visibleMessages,
-          html<ChatMessage, FoundationAiAssistant>`
-            ${when(
-              (m) => m.role === 'system-event',
-              html<ChatMessage, FoundationAiAssistant>`
-                <div class="agent-switch-indicator" part="agent-switch-indicator">
-                  <span class="agent-switch-label">${(m) => m.content}</span>
-                </div>
-              `,
-            )}
-            ${when(
-              (m) => m.role !== 'system-event',
-              html<ChatMessage, FoundationAiAssistant>`
-                <div class="message-row ${(m) => messageType(m)}">
-                  ${when(
-                    (m) => m.role !== 'user',
-                    html<ChatMessage, FoundationAiAssistant>`
-                      <div class="avatar ${(m) => messageType(m)}">
-                        ${when(
-                          (m, c) => !!(c.parent as FoundationAiAssistant).imageSrc,
-                          html<ChatMessage, FoundationAiAssistant>`
-                            <img
-                              src="${(m, c) => (c.parent as FoundationAiAssistant).imageSrc}"
-                              alt="Assistant"
-                              class="avatar-img"
-                            />
-                          `,
-                        )}
-                        ${when(
-                          (m, c) => !(c.parent as FoundationAiAssistant).imageSrc,
-                          genesisIconTemplate,
-                        )}
-                      </div>
-                    `,
-                  )}
-                  <div class="message ${(m) => messageType(m)}">
-                    <div class="sender">
-                      ${(m, c) =>
-                        messageType(m) === 'ai-function' &&
-                        m.agentName &&
-                        (c.parent as FoundationAiAssistant).showAgentSwitchIndicator
-                          ? `Tool Call · ${m.agentName}`
-                          : senderLabel[messageType(m)]}
-                    </div>
-                    <div class="content">
-                      ${when(
-                        (m) => m.content,
-                        html<ChatMessage, FoundationAiAssistant>`
-                          <ai-chat-markdown :content="${(m) => m.content}"></ai-chat-markdown>
-                        `,
-                      )}
-                      ${when(
-                        (m) => m.toolCalls,
-                        html<ChatMessage, FoundationAiAssistant>`
-                          ${repeat(
-                            (m) => m.toolCalls ?? [],
-                            html<ChatToolCall>`
-                              ${when(
-                                (tc) => tc.foldEvent === 'open',
-                                html<ChatToolCall>`
-                                  <pre class="payload fold-event fold-open">
-&#9658; ${(tc) => tc.name}</pre
-                                  >
-                                `,
-                              )}
-                              ${when(
-                                (tc) => tc.foldEvent === 'close',
-                                html<ChatToolCall>`
-                                  <pre class="payload fold-event fold-close">
-&#9668; ${(tc) => tc.name}</pre
-                                  >
-                                `,
-                              )}
-                              ${when(
-                                (tc) => !tc.foldEvent && !isChatToolCallUnknown(tc),
-                                html<ChatToolCall>`
-                                  <pre class="payload">
-${(tc) => (tc.foldPath?.length ? `${tc.foldPath.join(' › ')} › ` : '')}<strong>${(tc) =>
-                                      tc.name}</strong>(${(tc) =>
-                                      JSON.stringify(tc.args, null, 2)})</pre
-                                  >
-                                `,
-                              )}
-                              ${when(
-                                isChatToolCallUnknown,
-                                html<ChatToolCall>`
-                                  <pre class="payload unknown-tool">
-${(tc) => unknownToolPayload(tc)}</pre
-                                  >
-                                `,
-                              )}
-                            `,
-                          )}
-                        `,
-                      )}
-                      ${when(
-                        (m) => m.interaction,
-                        html<ChatMessage, FoundationAiAssistant>`
-                          <ai-chat-interaction-wrapper
-                            :componentName=${(m) => m.interaction!.componentName}
-                            :data=${(m) => m.interaction!.data}
-                            :interactionId=${(m) => m.interaction!.interactionId}
-                            :resolved=${(m) => m.interaction!.resolved}
-                            @interaction-completed=${(m, c) =>
-                              c.parent.handleInteractionCompleted(c.event)}
-                          ></ai-chat-interaction-wrapper>
-                        `,
-                      )}
-                    </div>
-                  </div>
-                </div>
-              `,
-            )}
-          `,
-        )}
+        ${repeat((x) => x.visibleMessages, messageRowTemplate)}
+        ${when((x) => x.liveSubAgentTrace.length > 0 && x.showToolCalls, liveSubAgentTraceTemplate)}
         ${when(
           (x) =>
             x.showLoadingIndicator &&

package/src/main/main.ts

@@ -76,6 +76,14 @@ avoidTreeShaking(
   ChatSuggestions,
 );
 
+/** Recursively strips `toolHandlers` from an agent and all its sub-agents. */
+function stripHandlers(agent: AgentConfig): Omit<AgentConfig, 'toolHandlers'> {
+  const { toolHandlers: _, subAgents, ...rest } = agent;
+  return subAgents?.length
+    ? { ...rest, subAgents: subAgents.map(stripHandlers) as AgentConfig[] }
+    : rest;
+}
+
 /**
  * Foundation AI Assistant component.
  *
@@ -145,15 +153,11 @@ export class FoundationAiAssistant extends GenesisElement {
     return this._sessionRef?.store.aiAssistant.activeAgent;
   }
   set activeAgent(value: AgentConfig | undefined) {
-    // Strip toolHandlers before storing — functions are non-serializable and Redux
-    // serializable-state middleware will warn. toolHandlers are never read back from
-    // the store; they are always sourced from this.agents when the driver is built.
-    if (value) {
-      const { toolHandlers: _, ...serializable } = value;
-      this._sessionRef?.actions.aiAssistant.setActiveAgent(serializable);
-    } else {
-      this._sessionRef?.actions.aiAssistant.setActiveAgent(undefined);
-    }
+    // Strip toolHandlers recursively before storing — functions are non-serializable
+    // and Redux serializable-state middleware will warn. toolHandlers are never read
+    // back from the store; they are always sourced from this.agents when the driver
+    // is built.
+    this._sessionRef?.actions.aiAssistant.setActiveAgent(value ? stripHandlers(value) : undefined);
   }
 
   get suggestionsState(): SuggestionsState {
@@ -195,6 +199,20 @@ export class FoundationAiAssistant extends GenesisElement {
     this._sessionRef?.actions.aiAssistant.setEnabledAnimations(value);
   }
 
+  get liveSubAgentTrace(): ChatMessage[] {
+    return this._sessionRef?.store.aiAssistant.liveSubAgentTrace ?? [];
+  }
+  set liveSubAgentTrace(value: ChatMessage[]) {
+    this._sessionRef?.actions.aiAssistant.setLiveSubAgentTrace(value);
+  }
+
+  get liveSubAgentName(): string | null {
+    return this._sessionRef?.store.aiAssistant.liveSubAgentName ?? null;
+  }
+  set liveSubAgentName(value: string | null) {
+    this._sessionRef?.actions.aiAssistant.setLiveSubAgentName(value);
+  }
+
   /** Most recent prompt token count from the AI provider, if available. */
   get contextTokens(): number | undefined {
     return this._sessionRef?.store.aiAssistant.contextTokens;
@@ -421,8 +439,24 @@ export class FoundationAiAssistant extends GenesisElement {
     };
     driver.addEventListener('history-updated', onHistoryUpdated);
 
+    const onSubAgentHistoryUpdated = (e: Event) => {
+      const { agentName, history } = (e as CustomEvent).detail;
+      this.liveSubAgentName = agentName;
+      // structuredClone so Immer freezes an independent copy, not the child
+      // driver's own history array (which is still being mutated by the tool loop).
+      this.liveSubAgentTrace = structuredClone(history);
+    };
+    const onSubAgentStop = () => {
+      this.liveSubAgentTrace = [];
+      this.liveSubAgentName = null;
+    };
+    driver.addEventListener('sub-agent-history-updated', onSubAgentHistoryUpdated);
+    driver.addEventListener('sub-agent-stop', onSubAgentStop);
+
     const cleanups: (() => void)[] = [
       () => driver.removeEventListener('history-updated', onHistoryUpdated),
+      () => driver.removeEventListener('sub-agent-history-updated', onSubAgentHistoryUpdated),
+      () => driver.removeEventListener('sub-agent-stop', onSubAgentStop),
     ];
 
     if (driver instanceof OrchestratingDriver) {

package/src/state/ai-assistant-slice.ts

@@ -22,6 +22,10 @@ export interface AiAssistantSessionState {
   activeAgent: Omit<AgentConfig, 'toolHandlers'> | undefined;
   /** Draft text in the input box — preserved across pop-in/pop-out cycles. */
   inputValue: string;
+  /** Live trace from a currently-executing sub-agent. Cleared on sub-agent-stop. */
+  liveSubAgentTrace: ChatMessage[];
+  /** Name of the currently-executing sub-agent, or null when idle. */
+  liveSubAgentName: string | null;
 }
 
 export const defaultSessionState: AiAssistantSessionState = {
@@ -36,6 +40,8 @@ export const defaultSessionState: AiAssistantSessionState = {
   contextLimit: undefined,
   activeAgent: undefined,
   inputValue: '',
+  liveSubAgentTrace: [],
+  liveSubAgentName: null,
 };
 
 export const aiAssistantSlice = createSlice({
@@ -75,6 +81,12 @@ export const aiAssistantSlice = createSlice({
     setInputValue(state, action: PayloadAction<string>) {
       state.inputValue = action.payload;
     },
+    setLiveSubAgentTrace(state, action: PayloadAction<ChatMessage[]>) {
+      state.liveSubAgentTrace = action.payload;
+    },
+    setLiveSubAgentName(state, action: PayloadAction<string | null>) {
+      state.liveSubAgentName = action.payload;
+    },
   },
   selectors: {},
 });

package/src/utils/history-transform.ts

@@ -0,0 +1,40 @@
+import type { ChatMessage } from '@genesislcap/foundation-ai';
+
+/**
+ * Masks the tool-specific payload of a single message — clears tool call args
+ * and replaces tool result content with a placeholder. Used when passing history
+ * to an agent that should not see another agent's implementation detail.
+ */
+function maskToolPayload(msg: ChatMessage): ChatMessage {
+  if (msg.toolCalls?.length) {
+    return { ...msg, toolCalls: msg.toolCalls.map((tc) => ({ ...tc, args: {} })) };
+  }
+  if (msg.toolResult) {
+    return {
+      ...msg,
+      toolResult: { ...msg.toolResult, content: "[other agent's tool result omitted]" },
+    };
+  }
+  return msg;
+}
+
+/**
+ * Prepares history for the LLM only: masks tool call args and results from other
+ * agents so the active specialist is not confused by tools it does not have.
+ * Canonical history in `ChatDriver` stays unmasked for UI and logging.
+ */
+export function transformHistoryForAgent(history: ChatMessage[], agentName: string): ChatMessage[] {
+  return history.map((msg) => {
+    if (!msg.agentName || msg.agentName === agentName) return msg;
+    return maskToolPayload(msg);
+  });
+}
+
+/**
+ * Applies a history cap for sub-agent context: the last `cap` messages are passed
+ * verbatim; older messages have their tool payloads masked.
+ */
+export function applyHistoryCap(history: readonly ChatMessage[], cap: number): ChatMessage[] {
+  const cutoff = history.length - cap;
+  return history.map((msg, i) => (i < cutoff ? maskToolPayload(msg) : msg));
+}