@agent-native/core 0.115.4 → 0.117.0

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

@@ -0,0 +1,89 @@
+import { IconDots, IconPlus } from "@tabler/icons-react";
+import { useEffect, useMemo, useState } from "react";
+
+import {
+  ChatHistoryList,
+  type ChatHistoryItem,
+  type ChatHistoryListProps,
+} from "./ChatHistoryList.js";
+
+export interface ChatHistoryRailLabels {
+  newChat: string;
+  showMore: string;
+  showLess: string;
+}
+
+export interface ChatHistoryRailProps extends Omit<
+  ChatHistoryListProps,
+  "footer" | "items" | "sections" | "variant"
+> {
+  items: ChatHistoryItem[];
+  onNewChat: () => void;
+  railLabels: ChatHistoryRailLabels;
+  previewCount?: number;
+  expandedCount?: number;
+}
+
+/**
+ * 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],
+  );
+
+  useEffect(() => {
+    if (!canExpand) setExpanded(false);
+  }, [canExpand]);
+
+  const footer = (
+    <div className="an-chat-history-rail__footer">
+      <button
+        type="button"
+        className="an-chat-history-rail__new-chat"
+        onClick={onNewChat}
+      >
+        <IconPlus size={13} strokeWidth={1.8} aria-hidden="true" />
+        <span>{railLabels.newChat}</span>
+      </button>
+      {canExpand && (
+        <button
+          type="button"
+          className="an-chat-history-rail__disclosure"
+          onClick={() => setExpanded((current) => !current)}
+          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>
+      )}
+    </div>
+  );
+
+  return (
+    <ChatHistoryList
+      {...listProps}
+      items={visibleItems}
+      footer={footer}
+      emptyLabel={emptyLabel ?? null}
+      variant="rail"
+      className={["an-chat-history-rail", className].filter(Boolean).join(" ")}
+    />
+  );
+}

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

@@ -5,3 +5,8 @@ export {
   type ChatHistoryListProps,
   type ChatHistorySection,
 } from "./ChatHistoryList.js";
+export {
+  ChatHistoryRail,
+  type ChatHistoryRailLabels,
+  type ChatHistoryRailProps,
+} from "./ChatHistoryRail.js";

package/corpus/toolkit/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,55 @@
   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;
+  min-height: 30px;
+}
+
+.an-chat-history-rail__new-chat {
+  flex: 1 1 auto;
+  gap: 8px;
+  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 +138,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 +156,7 @@
 .an-chat-history-row__button {
   display: block;
   width: 100%;
+  min-width: 0;
   padding: 8px 12px;
   border: 0;
   background: transparent;
@@ -141,6 +199,7 @@
   justify-content: space-between;
   gap: 8px;
   min-width: 0;
+  overflow: hidden;
 }
 
 .an-chat-history-row__title {

package/corpus/toolkit/src/composer/RealtimeVoiceMode.tsx

@@ -1,4 +1,5 @@
 import { Button } from "@agent-native/toolkit/ui/button";
+import { Checkbox } from "@agent-native/toolkit/ui/checkbox";
 import {
   Select,
   SelectContent,
@@ -62,6 +63,7 @@ export interface RealtimeVoiceModeCopy {
   startWithOpenAiKey: string;
   startVoiceMode: string;
   keepDictating: string;
+  rememberPreference: string;
   showChat: string;
   hideChat: string;
   endVoiceMode: string;
@@ -111,6 +113,8 @@ export interface RealtimeVoiceModeEntryProps {
   onOpenChange?: (open: boolean) => void;
   onStartVoiceMode: () => void;
   onKeepDictating: () => void;
+  preferredMode?: RealtimeVoiceInputMode | null;
+  onRememberPreference?: (mode: RealtimeVoiceInputMode) => void;
   setupRequired?: boolean;
   openAiConfigured?: boolean;
   connectingBuilder?: boolean;
@@ -119,6 +123,8 @@ export interface RealtimeVoiceModeEntryProps {
   className?: string;
 }
 
+export type RealtimeVoiceInputMode = "realtime" | "dictation";
+
 /**
  * Composer mic entry point for apps that support a full-duplex voice session.
  * The first click offers voice mode without silently changing the existing
@@ -132,6 +138,8 @@ export function RealtimeVoiceModeEntry({
   onOpenChange,
   onStartVoiceMode,
   onKeepDictating,
+  preferredMode = null,
+  onRememberPreference,
   setupRequired = false,
   openAiConfigured = false,
   connectingBuilder = false,
@@ -143,6 +151,8 @@ export function RealtimeVoiceModeEntry({
   const open = controlledOpen ?? uncontrolledOpen;
   const titleId = useId();
   const descriptionId = useId();
+  const rememberPreferenceId = useId();
+  const [rememberPreference, setRememberPreference] = useState(false);
   const [collisionBoundary, setCollisionBoundary] =
     useState<HTMLElement | null>(null);
 
@@ -159,8 +169,9 @@ export function RealtimeVoiceModeEntry({
     onOpenChange?.(nextOpen);
   };
 
-  const choose = (callback: () => void) => {
+  const choose = (mode: RealtimeVoiceInputMode, callback: () => void) => {
     setOpen(false);
+    if (rememberPreference) onRememberPreference?.(mode);
     callback();
   };
 
@@ -177,6 +188,23 @@ export function RealtimeVoiceModeEntry({
               disabled={disabled}
               aria-label={copy.entryButtonLabel}
               aria-expanded={open}
+              onClick={(event) => {
+                if (!preferredMode) return;
+                if (
+                  preferredMode === "realtime" &&
+                  (providerStatusPending || setupRequired)
+                ) {
+                  return;
+                }
+                event.preventDefault();
+                event.stopPropagation();
+                choose(
+                  preferredMode,
+                  preferredMode === "realtime"
+                    ? onStartVoiceMode
+                    : onKeepDictating,
+                );
+              }}
               className={cn(
                 "size-7 shrink-0 text-muted-foreground hover:text-foreground",
                 className,
@@ -197,43 +225,54 @@ export function RealtimeVoiceModeEntry({
         collisionPadding={16}
         data-collision-boundary={collisionBoundary ? "agent-panel" : "viewport"}
         className={cn(
-          "p-4",
+          setupRequired ? "p-4" : "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,22rem),22rem)]",
+            : "w-[min(calc(100vw-2rem),var(--radix-popover-content-available-width,18rem),18rem)]",
         )}
         aria-labelledby={titleId}
-        aria-describedby={descriptionId}
+        aria-describedby={setupRequired ? descriptionId : undefined}
       >
-        <div className="grid gap-3">
+        <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>
-            <p
-              id={descriptionId}
-              className="text-sm leading-relaxed text-muted-foreground"
-            >
-              {setupRequired ? copy.setupDescription : copy.promptDescription}
-            </p>
+            {setupRequired ? (
+              <p
+                id={descriptionId}
+                className="text-sm leading-relaxed text-muted-foreground"
+              >
+                {copy.setupDescription}
+              </p>
+            ) : null}
           </div>
 
-          <div className="flex flex-col-reverse gap-2 sm:flex-row sm:flex-wrap sm:justify-end">
-            <Button
-              type="button"
-              variant="ghost"
-              size="sm"
-              onClick={() => choose(onKeepDictating)}
-            >
-              {copy.keepDictating}
-            </Button>
+          <div
+            className={cn(
+              "gap-2",
+              setupRequired
+                ? "flex flex-col-reverse sm:flex-row sm:flex-wrap sm:justify-end"
+                : "grid",
+            )}
+          >
             {setupRequired ? (
               <>
+                <Button
+                  type="button"
+                  variant="ghost"
+                  size="sm"
+                  onClick={() => choose("dictation", onKeepDictating)}
+                >
+                  {copy.keepDictating}
+                </Button>
                 <Button
                   type="button"
                   variant="outline"
                   size="sm"
-                  onClick={() => choose(onUseOpenAiKey ?? onStartVoiceMode)}
+                  onClick={() =>
+                    choose("realtime", onUseOpenAiKey ?? onStartVoiceMode)
+                  }
                 >
                   {openAiConfigured
                     ? copy.startWithOpenAiKey
@@ -244,7 +283,9 @@ export function RealtimeVoiceModeEntry({
                   size="sm"
                   className="whitespace-nowrap"
                   disabled={connectingBuilder}
-                  onClick={() => choose(onConnectBuilder ?? onStartVoiceMode)}
+                  onClick={() =>
+                    choose("realtime", onConnectBuilder ?? onStartVoiceMode)
+                  }
                 >
                   {connectingBuilder ? (
                     <IconLoader2 className="animate-spin" />
@@ -253,21 +294,49 @@ export function RealtimeVoiceModeEntry({
                 </Button>
               </>
             ) : (
-              <Button
-                type="button"
-                size="sm"
-                disabled={providerStatusPending}
-                onClick={() => choose(onStartVoiceMode)}
-              >
-                {providerStatusPending ? (
-                  <IconLoader2 className="animate-spin" />
-                ) : (
-                  <IconMicrophone />
-                )}
-                {copy.startVoiceMode}
-              </Button>
+              <>
+                <Button
+                  type="button"
+                  size="sm"
+                  className="w-full"
+                  disabled={providerStatusPending}
+                  onClick={() => choose("realtime", onStartVoiceMode)}
+                >
+                  {providerStatusPending ? (
+                    <IconLoader2 className="animate-spin" />
+                  ) : (
+                    <IconMicrophone />
+                  )}
+                  {copy.startVoiceMode}
+                </Button>
+                <Button
+                  type="button"
+                  variant="outline"
+                  size="sm"
+                  className="w-full"
+                  onClick={() => choose("dictation", onKeepDictating)}
+                >
+                  {copy.keepDictating}
+                </Button>
+              </>
             )}
           </div>
+
+          {!setupRequired ? (
+            <label
+              htmlFor={rememberPreferenceId}
+              className="flex cursor-pointer items-center gap-2 text-xs text-muted-foreground"
+            >
+              <Checkbox
+                id={rememberPreferenceId}
+                checked={rememberPreference}
+                onCheckedChange={(checked) =>
+                  setRememberPreference(checked === true)
+                }
+              />
+              {copy.rememberPreference}
+            </label>
+          ) : null}
         </div>
       </PopoverContent>
     </Popover>
@@ -312,7 +381,7 @@ 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.035;
+const AUDIO_ACTIVITY_THRESHOLD = 0.1;
 
 function usePrefersReducedMotion(): boolean {
   const [reduced, setReduced] = useState(false);
@@ -831,6 +900,7 @@ 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",
               )}
             >
               <span className="relative z-10 flex items-center justify-center">

package/corpus/toolkit/src/composer/VoiceButton.tsx

@@ -14,9 +14,11 @@ import {
   IconLoader2,
   IconX,
 } from "@tabler/icons-react";
+import { useCallback, useEffect, useState } from "react";
 
 import { Tooltip, TooltipContent, TooltipTrigger } from "../ui/tooltip.js";
 import { RealtimeVoiceModeEntry } from "./RealtimeVoiceMode.js";
+import type { RealtimeVoiceInputMode } from "./RealtimeVoiceMode.js";
 import { useComposerRuntimeAdapters } from "./runtime-adapters.js";
 import {
   useRealtimeVoiceModeCopy,
@@ -24,6 +26,16 @@ import {
 } from "./useRealtimeVoiceMode.js";
 import type { VoiceDictationApi } from "./useVoiceDictation.js";
 
+const VOICE_INPUT_PREFERENCE_KEY = "voice-input-preference";
+
+export function normalizeVoiceInputPreference(
+  value: unknown,
+): RealtimeVoiceInputMode | null {
+  if (!value || typeof value !== "object" || Array.isArray(value)) return null;
+  const mode = (value as { mode?: unknown }).mode;
+  return mode === "realtime" || mode === "dictation" ? mode : null;
+}
+
 function openOpenAiKeySettings(): void {
   window.location.hash = "#secrets:OPENAI_API_KEY";
   window.dispatchEvent(new Event("agent-panel:open"));
@@ -63,6 +75,41 @@ export function VoiceButton({ voice, isMac, disabled }: VoiceButtonProps) {
     trackingFlow: "voice_transcription",
     onConnected: () => voiceProviders.refresh(),
   });
+  const [inputPreference, setInputPreference] = useState<{
+    ready: boolean;
+    mode: RealtimeVoiceInputMode | null;
+  }>({ ready: false, mode: null });
+
+  useEffect(() => {
+    let cancelled = false;
+    void Promise.resolve(
+      adapters.voice!.readAppState!(VOICE_INPUT_PREFERENCE_KEY),
+    )
+      .then((value) => {
+        if (!cancelled) {
+          setInputPreference({
+            ready: true,
+            mode: normalizeVoiceInputPreference(value),
+          });
+        }
+      })
+      .catch(() => {
+        if (!cancelled) setInputPreference({ ready: true, mode: null });
+      });
+    return () => {
+      cancelled = true;
+    };
+  }, [adapters]);
+
+  const rememberInputPreference = useCallback(
+    (mode: RealtimeVoiceInputMode) => {
+      setInputPreference({ ready: true, mode });
+      void Promise.resolve(
+        adapters.voice!.setAppState!(VOICE_INPUT_PREFERENCE_KEY, { mode }),
+      ).catch(() => undefined);
+    },
+    [adapters],
+  );
 
   if (!supported) return null;
 
@@ -90,6 +137,8 @@ export function VoiceButton({ voice, isMac, disabled }: VoiceButtonProps) {
         }}
         onStartVoiceMode={() => void realtimeVoice.start()}
         onKeepDictating={() => void start()}
+        preferredMode={inputPreference.ready ? inputPreference.mode : null}
+        onRememberPreference={rememberInputPreference}
       />
     );
   }

package/corpus/toolkit/src/composer/realtime-voice-audio-level.ts

@@ -25,7 +25,8 @@ export function normalizeRealtimeVoiceRms(samples: Uint8Array): number {
     sumSquares += normalized * normalized;
   }
   const rms = Math.sqrt(sumSquares / samples.length);
-  return clampLevel(Math.max(0, rms - 0.012) * 3.2);
+  const activeLevel = clampLevel((rms - 0.012) / 0.18);
+  return Math.sqrt(activeLevel);
 }
 
 export function smoothRealtimeVoiceLevel(

package/corpus/toolkit/src/composer/useRealtimeVoiceMode.tsx

@@ -1018,6 +1018,7 @@ function voiceCopy(t: (key: string) => string): RealtimeVoiceModeCopy {
     startWithOpenAiKey: t("agentPanel.voiceMode.startWithOpenAiKey"),
     startVoiceMode: t("agentPanel.voiceMode.start"),
     keepDictating: t("agentPanel.voiceMode.keepDictating"),
+    rememberPreference: t("agentPanel.voiceMode.rememberPreference"),
     showChat: t("agentPanel.voiceMode.showChat"),
     hideChat: t("agentPanel.voiceMode.hideChat"),
     endVoiceMode: t("agentPanel.voiceMode.end"),
@@ -1353,7 +1354,7 @@ function useRealtimeVoiceModeController(
         analyser.fftSize = 512;
         const source = context.createMediaStreamSource(stream);
         source.connect(analyser);
-        const buffer = new Uint8Array(analyser.frequencyBinCount);
+        const buffer = new Uint8Array(analyser.fftSize);
         if (channel === "input") {
           inputSourceRef.current?.disconnect();
           inputSourceRef.current = source;
@@ -1728,9 +1729,10 @@ function useRealtimeVoiceModeController(
       audio.setAttribute("playsinline", "");
       audioRef.current = audio;
       peer.ontrack = (trackEvent) => {
-        const remoteStream = trackEvent.streams[0] ?? null;
+        const remoteStream =
+          trackEvent.streams[0] ?? new MediaStream([trackEvent.track]);
         audio.srcObject = remoteStream;
-        if (remoteStream) attachAudioMeter(remoteStream, "output");
+        attachAudioMeter(remoteStream, "output");
         void audio.play().catch(() => undefined);
       };
 

package/corpus/toolkit/src/styles.css

@@ -19,3 +19,38 @@
  *     compiled `.js` next to it for consumers that only install `dist/`.
  */
 @source "./**/*.{js,ts,tsx}";
+
+.agent-realtime-voice-working::after {
+  position: absolute;
+  z-index: 0;
+  inset: 0;
+  border-radius: inherit;
+  pointer-events: none;
+  content: "";
+}
+
+@media (prefers-reduced-motion: no-preference) {
+  .agent-realtime-voice-working::after {
+    background: linear-gradient(
+      90deg,
+      transparent 0%,
+      transparent 36%,
+      hsl(var(--foreground) / 0.14) 50%,
+      transparent 64%,
+      transparent 100%
+    );
+    background-repeat: repeat;
+    background-size: 14rem 100%;
+    animation: agent-realtime-voice-shine 2.6s linear infinite;
+  }
+
+  @keyframes agent-realtime-voice-shine {
+    from {
+      background-position: 0 0;
+    }
+
+    to {
+      background-position: 14rem 0;
+    }
+  }
+}