@agent-native/core 0.117.2 → 0.118.1

package/corpus/toolkit/src/chat-history/ChatHistoryRail.tsx

@@ -1,11 +1,17 @@
 import { IconDots, IconPlus } from "@tabler/icons-react";
-import { useEffect, useMemo, useState } from "react";
+import type { ReactNode } from "react";
 
+import { ActionButton, IconButton } from "../design-system/components.js";
+import { DesignSystemErrorBoundary } from "../design-system/error-boundary.js";
 import {
   ChatHistoryList,
   type ChatHistoryItem,
   type ChatHistoryListProps,
 } from "./ChatHistoryList.js";
+import {
+  type ChatHistoryRailController,
+  useChatHistoryRailController,
+} from "./useChatHistoryRailController.js";
 
 export interface ChatHistoryRailLabels {
   newChat: string;
@@ -22,63 +28,71 @@ export interface ChatHistoryRailProps extends Omit<
   railLabels: ChatHistoryRailLabels;
   previewCount?: number;
   expandedCount?: number;
+  /**
+   * Product-level presentation slot for design systems that want to replace
+   * the rail wholesale. State and actions still come from the same controller
+   * as the default view.
+   */
+  renderRail?: (context: ChatHistoryRailRenderContext) => ReactNode;
 }
 
-/**
- * Compact recent-chat rail for app sidebars. Hosts own thread persistence,
- * sorting, routing, and mutations; the rail only owns progressive disclosure.
- */
-export function ChatHistoryRail({
-  items,
-  onNewChat,
-  railLabels,
-  previewCount = 5,
-  expandedCount = 15,
-  className,
-  emptyLabel,
-  ...listProps
-}: ChatHistoryRailProps) {
-  const [expanded, setExpanded] = useState(false);
-  const collapsedLimit = Math.max(1, previewCount);
-  const expandedLimit = Math.max(collapsedLimit, expandedCount);
-  const canExpand = items.length > collapsedLimit;
-  const visibleItems = useMemo(
-    () => items.slice(0, expanded ? expandedLimit : collapsedLimit),
-    [collapsedLimit, expanded, expandedLimit, items],
-  );
+export interface ChatHistoryRailRenderContext {
+  controller: ChatHistoryRailController<ChatHistoryItem>;
+  listProps: Omit<
+    ChatHistoryListProps,
+    "footer" | "items" | "sections" | "variant"
+  >;
+}
 
-  useEffect(() => {
-    if (!canExpand) setExpanded(false);
-  }, [canExpand]);
+export type DefaultChatHistoryRailViewProps = ChatHistoryRailRenderContext;
+
+export function DefaultChatHistoryRailView({
+  controller,
+  listProps,
+}: ChatHistoryRailRenderContext) {
+  const {
+    canExpand,
+    disclosureLabel,
+    expanded,
+    newChatLabel,
+    onNewChat,
+    toggleExpanded,
+    visibleItems,
+  } = controller;
+  const { className, emptyLabel, ...rest } = listProps;
 
   const footer = (
     <div className="an-chat-history-rail__footer">
-      <button
+      <ActionButton
         type="button"
         className="an-chat-history-rail__new-chat"
-        onClick={onNewChat}
+        emphasis="ghost"
+        size="compact"
+        leadingIcon={
+          <IconPlus size={13} strokeWidth={1.8} aria-hidden="true" />
+        }
+        onPress={onNewChat}
       >
-        <IconPlus size={13} strokeWidth={1.8} aria-hidden="true" />
-        <span>{railLabels.newChat}</span>
-      </button>
+        <span>{newChatLabel}</span>
+      </ActionButton>
       {canExpand && (
-        <button
+        <IconButton
           type="button"
           className="an-chat-history-rail__disclosure"
-          onClick={() => setExpanded((current) => !current)}
+          size="compact"
+          icon={<IconDots size={14} strokeWidth={1.8} aria-hidden="true" />}
+          onPress={toggleExpanded}
           aria-expanded={expanded}
-          aria-label={expanded ? railLabels.showLess : railLabels.showMore}
-          title={expanded ? railLabels.showLess : railLabels.showMore}
-        >
-          <IconDots size={14} strokeWidth={1.8} aria-hidden="true" />
-        </button>
+          label={disclosureLabel}
+          title={disclosureLabel}
+        />
       )}
     </div>
   );
 
   return (
     <ChatHistoryList
-      {...listProps}
+      {...rest}
       items={visibleItems}
       footer={footer}
       emptyLabel={emptyLabel ?? null}
@@ -87,3 +101,50 @@ export function ChatHistoryRail({
     />
   );
 }
+
+/**
+ * Compact recent-chat rail for app sidebars. Hosts own thread persistence,
+ * sorting, routing, and mutations; the rail only owns progressive disclosure.
+ */
+export function ChatHistoryRail({
+  items,
+  onNewChat,
+  railLabels,
+  previewCount = 5,
+  expandedCount = 15,
+  renderRail,
+  className,
+  emptyLabel,
+  ...listProps
+}: ChatHistoryRailProps) {
+  const controller = useChatHistoryRailController({
+    items,
+    onNewChat,
+    labels: railLabels,
+    previewCount,
+    expandedCount,
+  });
+  const context: ChatHistoryRailRenderContext = {
+    controller,
+    listProps: { ...listProps, className, emptyLabel },
+  };
+  const fallback = <DefaultChatHistoryRailView {...context} />;
+
+  return renderRail ? (
+    <DesignSystemErrorBoundary component="ChatHistoryRail" fallback={fallback}>
+      <ChatHistoryRailCustomView renderRail={renderRail} context={context} />
+    </DesignSystemErrorBoundary>
+  ) : (
+    fallback
+  );
+}
+
+function ChatHistoryRailCustomView({
+  renderRail,
+  context,
+}: {
+  renderRail: NonNullable<ChatHistoryRailProps["renderRail"]>;
+  context: ChatHistoryRailRenderContext;
+}) {
+  return renderRail(context);
+}

package/corpus/toolkit/src/chat-history/index.ts

@@ -7,6 +7,15 @@ export {
 } from "./ChatHistoryList.js";
 export {
   ChatHistoryRail,
+  DefaultChatHistoryRailView,
+  type DefaultChatHistoryRailViewProps,
   type ChatHistoryRailLabels,
   type ChatHistoryRailProps,
+  type ChatHistoryRailRenderContext,
 } from "./ChatHistoryRail.js";
+export {
+  type ChatHistoryRailController,
+  type ChatHistoryRailControllerLabels,
+  type UseChatHistoryRailControllerOptions,
+  useChatHistoryRailController,
+} from "./useChatHistoryRailController.js";

package/corpus/toolkit/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/corpus/toolkit/src/chat-history.css

@@ -113,12 +113,14 @@
   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;

package/corpus/toolkit/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/corpus/toolkit/src/composer/PromptComposer.tsx

@@ -61,6 +61,10 @@ import type {
 const MAX_INLINE_TEXT_FILE_CHARS = 60_000;
 const SUBMIT_ENGINE_STATUS_TIMEOUT_MS = 1000;
 
+export function canSubmitWithAgentEngineState(state: string): boolean {
+  return state === "configured";
+}
+
 /**
  * Files the user attached via the "+" button in PromptComposer. The host owns
  * what to do with them — typically POST to a per-app upload endpoint and pass
@@ -519,6 +523,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,15 +547,25 @@ function PromptComposerInner({
               timeoutMs: SUBMIT_ENGINE_STATUS_TIMEOUT_MS,
             },
           );
-    if (state !== "missing") return true;
-    bounceMissingKeySetup();
-    return false;
+    if (state === "missing") {
+      bounceMissingKeySetup();
+      return false;
+    }
+    if (typeof window !== "undefined") {
+      window.dispatchEvent(new Event("agent-engine:configured-changed"));
+    }
+    return canSubmitWithAgentEngineState(state);
   }, [
     agentEngineConfigured.state,
     bounceMissingKeySetup,
     modelsAdapter,
     resolvedModelStatusChecksEnabled,
   ]);
+  const retryAgentEngineStatus = useCallback(() => {
+    if (typeof window !== "undefined") {
+      window.dispatchEvent(new Event("agent-engine:configured-changed"));
+    }
+  }, []);
 
   useEffect(() => {
     if (!autoFocus) return;
@@ -613,21 +628,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/corpus/toolkit/src/composer/RealtimeVoiceMode.tsx

@@ -10,10 +10,12 @@ import {
 import {
   IconAlertTriangle,
   IconBrain,
+  IconKey,
   IconLanguage,
   IconLoader2,
   IconMicrophone,
   IconPhoneOff,
+  IconPlugConnected,
   IconSettings,
   IconVolume,
 } from "@tabler/icons-react";
@@ -225,72 +227,90 @@ export function RealtimeVoiceModeEntry({
         collisionPadding={16}
         data-collision-boundary={collisionBoundary ? "agent-panel" : "viewport"}
         className={cn(
-          setupRequired ? "p-4" : "p-3",
+          setupRequired ? "p-3.5" : "p-3",
           setupRequired
-            ? "w-[min(calc(100vw-2rem),var(--radix-popover-content-available-width,30rem),30rem)]"
+            ? "w-[min(calc(100vw-2rem),var(--radix-popover-content-available-width,24rem),24rem)]"
             : "w-[min(calc(100vw-2rem),var(--radix-popover-content-available-width,18rem),18rem)]",
         )}
         aria-labelledby={titleId}
         aria-describedby={setupRequired ? descriptionId : undefined}
       >
-        <div className={cn("grid", setupRequired ? "gap-3" : "gap-2.5")}>
-          <div className="grid gap-1">
-            <h2 id={titleId} className="text-sm font-semibold text-foreground">
-              {setupRequired ? copy.setupTitle : copy.promptTitle}
-            </h2>
+        <div className={cn("grid", setupRequired ? "gap-3.5" : "gap-2.5")}>
+          <div
+            className={cn(
+              setupRequired ? "flex items-start gap-3" : "grid gap-1",
+            )}
+          >
             {setupRequired ? (
-              <p
-                id={descriptionId}
-                className="text-sm leading-relaxed text-muted-foreground"
-              >
-                {copy.setupDescription}
-              </p>
+              <div className="flex size-9 shrink-0 items-center justify-center rounded-lg bg-primary/10 text-primary">
+                <IconMicrophone aria-hidden="true" />
+              </div>
             ) : null}
+            <div className="grid gap-1">
+              <h2
+                id={titleId}
+                className="text-sm font-semibold leading-5 text-foreground"
+              >
+                {setupRequired ? copy.setupTitle : copy.promptTitle}
+              </h2>
+              {setupRequired ? (
+                <p
+                  id={descriptionId}
+                  className="text-xs leading-5 text-muted-foreground"
+                >
+                  {copy.setupDescription}
+                </p>
+              ) : null}
+            </div>
           </div>
 
           <div
             className={cn(
-              "gap-2",
-              setupRequired
-                ? "flex flex-col-reverse sm:flex-row sm:flex-wrap sm:justify-end"
-                : "grid",
+              "grid gap-2",
+              setupRequired ? "rounded-lg bg-muted/30 p-1" : null,
             )}
           >
             {setupRequired ? (
               <>
                 <Button
                   type="button"
-                  variant="ghost"
                   size="sm"
-                  onClick={() => choose("dictation", onKeepDictating)}
+                  className="w-full justify-start px-3"
+                  disabled={connectingBuilder}
+                  onClick={() =>
+                    choose("realtime", onConnectBuilder ?? onStartVoiceMode)
+                  }
                 >
-                  {copy.keepDictating}
+                  {connectingBuilder ? (
+                    <IconLoader2 className="animate-spin" />
+                  ) : (
+                    <IconPlugConnected aria-hidden="true" />
+                  )}
+                  {copy.connectBuilder}
                 </Button>
                 <Button
                   type="button"
                   variant="outline"
                   size="sm"
+                  className="w-full justify-start bg-background px-3"
                   onClick={() =>
                     choose("realtime", onUseOpenAiKey ?? onStartVoiceMode)
                   }
                 >
+                  <IconKey aria-hidden="true" />
                   {openAiConfigured
                     ? copy.startWithOpenAiKey
                     : copy.useOpenAiKey}
                 </Button>
                 <Button
                   type="button"
+                  variant="ghost"
                   size="sm"
-                  className="whitespace-nowrap"
-                  disabled={connectingBuilder}
-                  onClick={() =>
-                    choose("realtime", onConnectBuilder ?? onStartVoiceMode)
-                  }
+                  className="w-full justify-start px-3 text-muted-foreground"
+                  onClick={() => choose("dictation", onKeepDictating)}
                 >
-                  {connectingBuilder ? (
-                    <IconLoader2 className="animate-spin" />
-                  ) : null}
-                  {copy.connectBuilder}
+                  <IconMicrophone aria-hidden="true" />
+                  {copy.keepDictating}
                 </Button>
               </>
             ) : (
@@ -382,9 +402,14 @@ export interface RealtimeVoiceModeInlineSettings {
 const SILENT_AUDIO_LEVELS = createRealtimeVoiceAudioLevelStore();
 const WAVEFORM_WEIGHTS = [0.55, 0.82, 1, 0.82, 0.55];
 const AUDIO_ACTIVITY_THRESHOLD = 0.1;
+const WORKING_GLOW_HOLD_MS = 800;
 
 function usePrefersReducedMotion(): boolean {
-  const [reduced, setReduced] = useState(false);
+  const [reduced, setReduced] = useState(
+    () =>
+      typeof window !== "undefined" &&
+      Boolean(window.matchMedia?.("(prefers-reduced-motion: reduce)").matches),
+  );
   useEffect(() => {
     if (typeof window === "undefined" || !window.matchMedia) return;
     const query = window.matchMedia("(prefers-reduced-motion: reduce)");
@@ -697,6 +722,9 @@ export function RealtimeVoiceModeDock({
   const controlsId = useId();
   const [controlsOpen, setControlsOpen] = useState(false);
   const [settingsOpen, setSettingsOpen] = useState(false);
+  const [workingGlowHeld, setWorkingGlowHeld] = useState(state === "working");
+  const glowRef = useRef<HTMLSpanElement>(null);
+  const glowAnimationRef = useRef<Animation | null>(null);
   const selectInteractionRef = useRef(false);
   const selectInteractionFrameRef = useRef<number | null>(null);
   const levels = useSyncExternalStore(
@@ -724,6 +752,56 @@ export function RealtimeVoiceModeDock({
   const errorDetailVisible = state === "error" && Boolean(errorMessage);
   const controlsVisible = controlsOpen || settingsOpen;
   const chatPanelTranslation = useChatPanelTranslation(chatVisible);
+  const workingGlowActive = state === "working" || workingGlowHeld;
+
+  useEffect(() => {
+    if (state === "working") {
+      setWorkingGlowHeld(true);
+      return;
+    }
+    if (!workingGlowHeld) return;
+    const timer = window.setTimeout(
+      () => setWorkingGlowHeld(false),
+      WORKING_GLOW_HOLD_MS,
+    );
+    return () => window.clearTimeout(timer);
+  }, [state, workingGlowHeld]);
+
+  useEffect(() => {
+    if (!connected || reducedMotion || !glowRef.current) {
+      glowAnimationRef.current?.cancel();
+      glowAnimationRef.current = null;
+      return;
+    }
+
+    const animation = glowRef.current.animate(
+      [{ transform: "rotate(0turn)" }, { transform: "rotate(1turn)" }],
+      {
+        duration: 12_000,
+        easing: "linear",
+        iterations: Number.POSITIVE_INFINITY,
+      },
+    );
+    glowAnimationRef.current = animation;
+
+    return () => {
+      animation.cancel();
+      if (glowAnimationRef.current === animation) {
+        glowAnimationRef.current = null;
+      }
+    };
+  }, [connected, reducedMotion]);
+
+  useEffect(() => {
+    const animation = glowAnimationRef.current;
+    if (!animation) return;
+    const playbackRate = workingGlowActive ? 2.4 : 1;
+    if (typeof animation.updatePlaybackRate === "function") {
+      animation.updatePlaybackRate(playbackRate);
+    } else {
+      animation.playbackRate = playbackRate;
+    }
+  }, [workingGlowActive]);
 
   const handleSelectOpenChange = useCallback((open: boolean) => {
     if (selectInteractionFrameRef.current !== null) {
@@ -900,9 +978,19 @@ export function RealtimeVoiceModeDock({
               className={cn(
                 "relative isolate size-16 overflow-visible rounded-full ring-1 backdrop-blur-xl transition-transform duration-150 ease-out focus-visible:ring-offset-2 active:scale-[0.97] motion-reduce:transition-none",
                 ORB_STATE_CLASSES[state],
-                state === "working" && "agent-realtime-voice-working",
               )}
             >
+              {connected ? (
+                <span
+                  ref={glowRef}
+                  aria-hidden="true"
+                  data-realtime-voice-glow="true"
+                  className={cn(
+                    "agent-realtime-voice-glow",
+                    workingGlowActive && "agent-realtime-voice-working",
+                  )}
+                />
+              ) : null}
               <span className="relative z-10 flex items-center justify-center">
                 {state === "connecting" ? (
                   <VoiceConnectingIndicator />