@agent-native/toolkit 0.9.0 → 0.10.0

package/src/chat-history/useChatHistoryRailController.ts

@@ -0,0 +1,76 @@
+import { useCallback, useEffect, useMemo, useState } from "react";
+
+export interface ChatHistoryRailControllerLabels {
+  newChat: string;
+  showMore: string;
+  showLess: string;
+}
+
+export interface UseChatHistoryRailControllerOptions<Item> {
+  items: readonly Item[];
+  onNewChat: () => void;
+  labels: ChatHistoryRailControllerLabels;
+  previewCount?: number;
+  expandedCount?: number;
+}
+
+export interface ChatHistoryRailController<Item> {
+  expanded: boolean;
+  collapsedLimit: number;
+  expandedLimit: number;
+  visibleItems: Item[];
+  canExpand: boolean;
+  newChatLabel: string;
+  disclosureLabel: string;
+  onNewChat: () => void;
+  toggleExpanded: () => void;
+  resetExpanded: () => void;
+}
+
+function normalizeLimit(value: number | undefined, fallback: number): number {
+  if (value === undefined || !Number.isFinite(value)) return fallback;
+  return Math.max(1, Math.floor(value));
+}
+
+export function useChatHistoryRailController<Item>({
+  items,
+  onNewChat,
+  labels,
+  previewCount,
+  expandedCount,
+}: UseChatHistoryRailControllerOptions<Item>): ChatHistoryRailController<Item> {
+  const [expandedState, setExpandedState] = useState(false);
+  const collapsedLimit = normalizeLimit(previewCount, 5);
+  const expandedLimit = Math.max(
+    collapsedLimit,
+    normalizeLimit(expandedCount, 15),
+  );
+  const canExpand = items.length > collapsedLimit;
+  const expanded = canExpand && expandedState;
+  const visibleItems = useMemo(
+    () => items.slice(0, expanded ? expandedLimit : collapsedLimit),
+    [collapsedLimit, expanded, expandedLimit, items],
+  );
+
+  useEffect(() => {
+    if (!canExpand) setExpandedState(false);
+  }, [canExpand]);
+
+  const toggleExpanded = useCallback(() => {
+    if (canExpand) setExpandedState((current) => !current);
+  }, [canExpand]);
+  const resetExpanded = useCallback(() => setExpandedState(false), []);
+
+  return {
+    expanded,
+    collapsedLimit,
+    expandedLimit,
+    visibleItems,
+    canExpand,
+    newChatLabel: labels.newChat,
+    disclosureLabel: expanded ? labels.showLess : labels.showMore,
+    onNewChat,
+    toggleExpanded,
+    resetExpanded,
+  };
+}

package/src/chat-history.css

@@ -16,6 +16,7 @@
 .an-chat-history {
   display: flex;
   flex-direction: column;
+  min-width: 0;
   min-height: 0;
 }
 
@@ -49,6 +50,7 @@
 
 .an-chat-history__list {
   overflow-y: auto;
+  min-width: 0;
   padding: 4px 0;
   max-height: 16rem;
 }
@@ -59,6 +61,10 @@
   min-height: 0;
 }
 
+.an-chat-history-rail .an-chat-history__state:empty {
+  display: none;
+}
+
 .an-chat-history__state {
   padding: 16px 12px;
   text-align: center;
@@ -72,6 +78,57 @@
   color: hsl(38 92% 50%);
 }
 
+.an-chat-history-rail__footer {
+  display: flex;
+  align-items: center;
+  gap: 2px;
+  min-width: 0;
+  padding: 1px 4px 0;
+}
+
+.an-chat-history-rail__disclosure,
+.an-chat-history-rail__new-chat {
+  display: flex;
+  align-items: center;
+  border: 0;
+  border-radius: calc(var(--radius) - 2px);
+  background: transparent;
+  color: hsl(var(--muted-foreground) / 0.72);
+  cursor: pointer;
+}
+
+.an-chat-history-rail__disclosure:hover,
+.an-chat-history-rail__new-chat:hover {
+  background: hsl(var(--accent) / 0.5);
+  color: hsl(var(--accent-foreground));
+}
+
+.an-chat-history-rail__disclosure:focus-visible,
+.an-chat-history-rail__new-chat:focus-visible {
+  outline: 2px solid hsl(var(--ring));
+  outline-offset: -2px;
+}
+
+.an-chat-history-rail__disclosure {
+  justify-content: center;
+  flex: 0 0 auto;
+  width: 30px;
+  height: auto;
+  min-height: 30px;
+}
+
+.an-chat-history-rail__new-chat {
+  flex: 1 1 auto;
+  gap: 8px;
+  height: auto;
+  min-width: 0;
+  min-height: 30px;
+  padding: 6px 10px;
+  font-size: 12px;
+  font-weight: 500;
+  text-align: start;
+}
+
 .an-chat-history__section-label {
   padding: 6px 12px 4px;
   font-size: 10px;
@@ -83,12 +140,14 @@
 .an-chat-history--rail .an-chat-history__section {
   display: grid;
   gap: 1px;
+  min-width: 0;
 }
 
 /* ── Row ──────────────────────────────────────────────────────────────── */
 
 .an-chat-history-row {
   position: relative;
+  min-width: 0;
 }
 
 .an-chat-history--rail .an-chat-history-row {
@@ -99,6 +158,7 @@
 .an-chat-history-row__button {
   display: block;
   width: 100%;
+  min-width: 0;
   padding: 8px 12px;
   border: 0;
   background: transparent;
@@ -141,6 +201,7 @@
   justify-content: space-between;
   gap: 8px;
   min-width: 0;
+  overflow: hidden;
 }
 
 .an-chat-history-row__title {

package/src/composer/ComposerPlusMenu.tsx

@@ -490,14 +490,17 @@ function ComposerPlusMenuFull({
       <Popover open={open} onOpenChange={setOpen}>
         <Tooltip>
           <TooltipTrigger asChild>
-            <PopoverTrigger asChild>
-              <button
-                type="button"
-                className="shrink-0 flex h-7 w-7 items-center justify-center rounded-md text-muted-foreground hover:text-foreground hover:bg-accent/50 disabled:opacity-30 disabled:cursor-not-allowed"
-              >
-                <IconPlus className="h-4 w-4" />
-              </button>
-            </PopoverTrigger>
+            <span className="inline-flex shrink-0">
+              <PopoverTrigger asChild>
+                <button
+                  type="button"
+                  aria-label="Add..."
+                  className="shrink-0 flex h-7 w-7 items-center justify-center rounded-md text-muted-foreground hover:text-foreground hover:bg-accent/50 disabled:opacity-30 disabled:cursor-not-allowed"
+                >
+                  <IconPlus className="h-4 w-4" />
+                </button>
+              </PopoverTrigger>
+            </span>
           </TooltipTrigger>
           <TooltipContent>Add...</TooltipContent>
         </Tooltip>

package/src/composer/PromptComposer.tsx

@@ -519,6 +519,7 @@ function PromptComposerInner({
     resolvedModelStatusChecksEnabled,
   );
   const missingApiKey = agentEngineConfigured.missing;
+  const agentEngineUnavailable = agentEngineConfigured.state === "unavailable";
   const [missingKeyBouncePulse, setMissingKeyBouncePulse] = useState(0);
   const bounceMissingKeySetup = useCallback(() => {
     setMissingKeyBouncePulse((pulse) => pulse + 1);
@@ -542,8 +543,13 @@ function PromptComposerInner({
               timeoutMs: SUBMIT_ENGINE_STATUS_TIMEOUT_MS,
             },
           );
-    if (state !== "missing") return true;
-    bounceMissingKeySetup();
+    if (state === "missing") {
+      bounceMissingKeySetup();
+      return false;
+    }
+    if (typeof window !== "undefined") {
+      window.dispatchEvent(new Event("agent-engine:configured-changed"));
+    }
     return false;
   }, [
     agentEngineConfigured.state,
@@ -551,6 +557,11 @@ function PromptComposerInner({
     modelsAdapter,
     resolvedModelStatusChecksEnabled,
   ]);
+  const retryAgentEngineStatus = useCallback(() => {
+    if (typeof window !== "undefined") {
+      window.dispatchEvent(new Event("agent-engine:configured-changed"));
+    }
+  }, []);
 
   useEffect(() => {
     if (!autoFocus) return;
@@ -613,21 +624,31 @@ function PromptComposerInner({
       <AgentComposerFrame
         className={cn(
           "text-start",
-          missingApiKey && "cursor-pointer",
+          (missingApiKey || agentEngineUnavailable) && "cursor-pointer",
           className,
         )}
         rootClassName={rootClassName}
         style={style}
         rootStyle={rootStyle}
         layoutVariant={layoutVariant}
-        onClick={missingApiKey ? bounceMissingKeySetup : undefined}
+        onClick={
+          missingApiKey
+            ? bounceMissingKeySetup
+            : agentEngineUnavailable
+              ? retryAgentEngineStatus
+              : undefined
+        }
       >
         <PromptAttachmentStrip />
         <TiptapComposer
           focusRef={handleRef}
-          disabled={disabled || missingApiKey}
+          disabled={disabled || missingApiKey || agentEngineUnavailable}
           placeholder={
-            missingApiKey ? "Connect AI above to continue..." : placeholder
+            missingApiKey
+              ? "Connect AI above to continue..."
+              : agentEngineUnavailable
+                ? "Unable to check AI connection. Click to retry."
+                : placeholder
           }
           initialText={initialText}
           initialTextKey={initialTextKey}

package/src/composer/RealtimeVoiceMode.spec.tsx

@@ -14,7 +14,7 @@ import {
 
 const copy: RealtimeVoiceModeCopy = {
   entryButtonLabel: "Use microphone",
-  promptTitle: "Talk to your app",
+  promptTitle: "Use your voice",
   promptDescription:
     "Voice mode keeps listening while the agent navigates and takes actions.",
   setupTitle: "Set up voice mode",
@@ -23,8 +23,9 @@ const copy: RealtimeVoiceModeCopy = {
   connectBuilder: "Connect Builder.io",
   useOpenAiKey: "Add your own keys",
   startWithOpenAiKey: "Start with OpenAI key",
-  startVoiceMode: "Start voice mode",
-  keepDictating: "Keep dictating",
+  startVoiceMode: "Real-time voice",
+  keepDictating: "Dictate",
+  rememberPreference: "Remember my preference",
   showChat: "Show chat",
   hideChat: "Hide chat",
   endVoiceMode: "End voice mode",
@@ -127,23 +128,27 @@ describe("RealtimeVoiceMode", () => {
 
     act(() => microphone?.click());
 
-    expect(document.body.textContent).toContain("Talk to your app");
+    expect(document.body.textContent).toContain("Use your voice");
     const prompt = document.querySelector<HTMLElement>('[role="dialog"]');
     expect(prompt?.className).toContain(
-      "w-[min(calc(100vw-2rem),var(--radix-popover-content-available-width,22rem),22rem)]",
+      "w-[min(calc(100vw-2rem),var(--radix-popover-content-available-width,18rem),18rem)]",
     );
-    expect(document.body.textContent).toContain("Keep dictating");
+    expect(document.body.textContent).not.toContain(
+      "Voice mode keeps listening while the agent navigates and takes actions.",
+    );
+    expect(document.body.textContent).toContain("Dictate");
+    expect(document.body.textContent).toContain("Remember my preference");
     expect(onStartVoiceMode).not.toHaveBeenCalled();
     expect(onKeepDictating).not.toHaveBeenCalled();
 
     const startVoiceMode = Array.from(
       document.querySelectorAll<HTMLButtonElement>("button"),
-    ).find((button) => button.textContent?.includes("Start voice mode"));
+    ).find((button) => button.textContent?.includes("Real-time voice"));
     act(() => startVoiceMode?.click());
 
     expect(onStartVoiceMode).toHaveBeenCalledOnce();
     expect(onKeepDictating).not.toHaveBeenCalled();
-    expect(document.body.textContent).not.toContain("Talk to your app");
+    expect(document.body.textContent).not.toContain("Use your voice");
   });
 
   it("does not start realtime voice while provider readiness is unresolved", () => {
@@ -162,14 +167,14 @@ describe("RealtimeVoiceMode", () => {
 
     const startVoiceMode = Array.from(
       document.querySelectorAll<HTMLButtonElement>("button"),
-    ).find((button) => button.textContent?.includes("Start voice mode"));
+    ).find((button) => button.textContent?.includes("Real-time voice"));
     expect(startVoiceMode?.disabled).toBe(true);
     act(() => startVoiceMode?.click());
     expect(onStartVoiceMode).not.toHaveBeenCalled();
 
     const keepDictating = Array.from(
       document.querySelectorAll<HTMLButtonElement>("button"),
-    ).find((button) => button.textContent === "Keep dictating");
+    ).find((button) => button.textContent === "Dictate");
     expect(keepDictating?.disabled).toBe(false);
   });
 
@@ -188,13 +193,83 @@ describe("RealtimeVoiceMode", () => {
 
     const keepDictating = Array.from(
       document.querySelectorAll<HTMLButtonElement>("button"),
-    ).find((button) => button.textContent === "Keep dictating");
+    ).find((button) => button.textContent === "Dictate");
     act(() => keepDictating?.click());
 
     expect(onKeepDictating).toHaveBeenCalledOnce();
     expect(onStartVoiceMode).not.toHaveBeenCalled();
   });
 
+  it("remembers the selected input mode only when requested", () => {
+    const onStartVoiceMode = vi.fn();
+    const onRememberPreference = vi.fn();
+
+    render(
+      <RealtimeVoiceModeEntry
+        copy={copy}
+        open
+        onStartVoiceMode={onStartVoiceMode}
+        onKeepDictating={vi.fn()}
+        onRememberPreference={onRememberPreference}
+      />,
+    );
+
+    const remember = document.querySelector<HTMLElement>('[role="checkbox"]');
+    act(() => remember?.click());
+    const realtime = Array.from(
+      document.querySelectorAll<HTMLButtonElement>("button"),
+    ).find((button) => button.textContent?.includes("Real-time voice"));
+    act(() => realtime?.click());
+
+    expect(onRememberPreference).toHaveBeenCalledWith("realtime");
+    expect(onStartVoiceMode).toHaveBeenCalledOnce();
+  });
+
+  it("bypasses the chooser for a remembered input mode", () => {
+    const onStartVoiceMode = vi.fn();
+    const onKeepDictating = vi.fn();
+
+    render(
+      <RealtimeVoiceModeEntry
+        copy={copy}
+        preferredMode="dictation"
+        onStartVoiceMode={onStartVoiceMode}
+        onKeepDictating={onKeepDictating}
+      />,
+    );
+
+    const microphone = document.querySelector<HTMLButtonElement>(
+      'button[aria-label="Use microphone"]',
+    );
+    act(() => microphone?.click());
+
+    expect(onKeepDictating).toHaveBeenCalledOnce();
+    expect(onStartVoiceMode).not.toHaveBeenCalled();
+    expect(document.body.textContent).not.toContain("Use your voice");
+  });
+
+  it("shows setup instead of starting a remembered realtime mode without a provider", () => {
+    const onStartVoiceMode = vi.fn();
+
+    render(
+      <RealtimeVoiceModeEntry
+        copy={copy}
+        setupRequired
+        preferredMode="realtime"
+        onStartVoiceMode={onStartVoiceMode}
+        onKeepDictating={vi.fn()}
+      />,
+    );
+
+    const microphone = document.querySelector<HTMLButtonElement>(
+      'button[aria-label="Use microphone"]',
+    );
+    act(() => microphone?.click());
+
+    expect(onStartVoiceMode).not.toHaveBeenCalled();
+    expect(document.body.textContent).toContain("Set up voice mode");
+  });
+
   it("makes Builder the primary setup action and own keys the secondary", () => {
     const onConnectBuilder = vi.fn();
     const onUseOpenAiKey = vi.fn();
@@ -653,6 +728,10 @@ describe("RealtimeVoiceMode", () => {
     expect(
       document.querySelector('[data-realtime-voice-waveform="true"]'),
     ).not.toBeNull();
+    const centerBar = document.querySelectorAll<HTMLElement>(
+      '[data-realtime-voice-waveform="true"] > span',
+    )[2];
+    expect(centerBar?.style.transform).toBe("scaleY(0.76)");
 
     act(() => audioLevels.set({ input: 0, output: 0.8 }));
     expect(
@@ -687,6 +766,32 @@ describe("RealtimeVoiceMode", () => {
     },
   );
 
+  it("shines only while the agent is working", () => {
+    render(
+      <RealtimeVoiceModeDock
+        state="working"
+        copy={copy}
+        chatVisible={false}
+        onToggleChat={vi.fn()}
+        onEndVoiceMode={vi.fn()}
+      />,
+    );
+    expect(
+      document.querySelector(".agent-realtime-voice-working"),
+    ).not.toBeNull();
+
+    render(
+      <RealtimeVoiceModeDock
+        state="listening"
+        copy={copy}
+        chatVisible={false}
+        onToggleChat={vi.fn()}
+        onEndVoiceMode={vi.fn()}
+      />,
+    );
+    expect(document.querySelector(".agent-realtime-voice-working")).toBeNull();
+  });
+
   it("shows an unmistakable loader and ignores early audio until connected", () => {
     const audioLevels = createRealtimeVoiceAudioLevelStore();
     audioLevels.set({ input: 0.8, output: 0 });