@agent-native/core 0.93.0 → 0.94.0

package/corpus/core/src/client/chat/runtime.ts

@@ -1212,13 +1212,25 @@ function nativeHistoryFromMessages(
     : history;
 }
 
+type AgentNativeMessageContentState =
+  | { type: "text"; text: string; id?: string }
+  | {
+      type: "reasoning";
+      text: string;
+      id?: string;
+      signature?: string;
+    };
+
 function mapAgentNativeEvent(
   raw: unknown,
   input: {
     sessionId: AgentChatRuntimeSessionId;
     turnId?: AgentChatRuntimeTurnId;
     messageId: string;
-    text: { value: string; started: boolean };
+    message: {
+      content: AgentNativeMessageContentState[];
+      started: boolean;
+    };
   },
 ): AgentChatRuntimeKnownEvent[] {
   if (!raw || typeof raw !== "object") return [];
@@ -1232,11 +1244,17 @@ function mapAgentNativeEvent(
       seq: ev.seq,
     };
   }
-  if (ev.type === "text") {
+  if (ev.type === "text" || ev.type === "thinking" || ev.type === "reasoning") {
     const text = ev.text ?? "";
+    const type = ev.type === "text" ? "text" : "reasoning";
+    const extended = ev as SSEEvent & {
+      partId?: string;
+      signature?: string;
+    };
+    const partId = extended.partId;
     const events: AgentChatRuntimeKnownEvent[] = [];
-    if (!input.text.started) {
-      input.text.started = true;
+    if (!input.message.started) {
+      input.message.started = true;
       events.push({
         type: "message-start",
         ...base,
@@ -1247,12 +1265,47 @@ function mapAgentNativeEvent(
         },
       });
     }
-    input.text.value += text;
+    const last = input.message.content.at(-1);
+    let part = partId
+      ? input.message.content.find(
+          (candidate) => candidate.type === type && candidate.id === partId,
+        )
+      : last?.type === type && !last.id
+        ? last
+        : undefined;
+    if (!part) {
+      const nextPart: AgentNativeMessageContentState =
+        type === "reasoning"
+          ? {
+              type: "reasoning",
+              text: "",
+              ...(partId ? { id: partId } : {}),
+            }
+          : {
+              type: "text",
+              text: "",
+              ...(partId ? { id: partId } : {}),
+            };
+      input.message.content.push(nextPart);
+      part = nextPart;
+    }
+    part.text += text;
+    if (part.type === "reasoning" && extended.signature) {
+      part.signature = extended.signature;
+    }
     events.push({
       type: "message-delta",
       ...base,
       messageId: input.messageId,
-      delta: { type: "text", text },
+      delta:
+        type === "reasoning"
+          ? {
+              type: "reasoning",
+              text,
+              partId,
+              signature: extended.signature,
+            }
+          : { type: "text", text, partId },
     });
     return events;
   }
@@ -1330,12 +1383,10 @@ function mapAgentNativeEvent(
     const message: AgentChatRuntimeMessage = {
       id: input.messageId,
       role: "assistant",
-      content: input.text.value
-        ? [{ type: "text", text: input.text.value }]
-        : [],
+      content: input.message.content.map((part) => ({ ...part })),
     };
     return [
-      ...(input.text.started
+      ...(input.message.started
         ? [{ type: "message-done" as const, ...base, message }]
         : []),
       { type: "done", ...base, reason: "complete" },
@@ -1397,7 +1448,13 @@ export function createAgentNativeChatRuntime(
     mapEvent: (() => {
       const states = new Map<
         string,
-        { messageId: string; text: { value: string; started: boolean } }
+        {
+          messageId: string;
+          message: {
+            content: AgentNativeMessageContentState[];
+            started: boolean;
+          };
+        }
       >();
       return (
         event: unknown,
@@ -1411,7 +1468,7 @@ export function createAgentNativeChatRuntime(
         if (!state) {
           state = {
             messageId: createRuntimeId("message"),
-            text: { value: "", started: false },
+            message: { content: [], started: false },
           };
           states.set(stateKey, state);
         }
@@ -1419,7 +1476,7 @@ export function createAgentNativeChatRuntime(
           sessionId: context.sessionId,
           turnId: context.turnId,
           messageId: state.messageId,
-          text: state.text,
+          message: state.message,
         });
         const type =
           event && typeof event === "object"
@@ -1461,27 +1518,68 @@ function toolResultText(value: unknown): string {
   }
 }
 
+interface RuntimeContentProjection {
+  content: ContentPart[];
+  partsById: Map<string, Extract<ContentPart, { type: "text" | "reasoning" }>>;
+}
+
+function appendRuntimeContentPart(
+  projection: RuntimeContentProjection,
+  input: {
+    type: "text" | "reasoning";
+    text: string;
+    partId?: string;
+  },
+): void {
+  const key = input.partId ? `${input.type}:${input.partId}` : undefined;
+  const last = projection.content.at(-1);
+  let part = key ? projection.partsById.get(key) : undefined;
+  if (
+    !part &&
+    !key &&
+    last &&
+    (last.type === "text" || last.type === "reasoning") &&
+    last.type === input.type
+  ) {
+    part = last;
+  }
+  if (!part) {
+    const nextPart: Extract<ContentPart, { type: "text" | "reasoning" }> =
+      input.type === "reasoning"
+        ? { type: "reasoning", text: "" }
+        : { type: "text", text: "" };
+    projection.content.push(nextPart);
+    if (key) projection.partsById.set(key, nextPart);
+    part = nextPart;
+  }
+  part.text += input.text;
+}
+
 function applyRuntimeEventToContent(
   event: AgentChatRuntimeEventBase,
-  content: ContentPart[],
+  projection: RuntimeContentProjection,
 ): ChatModelRunResult | null {
+  const { content } = projection;
   const typed = event as AgentChatRuntimeKnownEvent;
   if (typed.type === "message-start") {
     for (const part of typed.message.content) {
-      if (part.type === "text" && part.text) {
-        content.push({ type: "text", text: part.text });
+      if ((part.type === "text" || part.type === "reasoning") && part.text) {
+        appendRuntimeContentPart(projection, {
+          type: part.type,
+          text: part.text,
+          partId: part.id,
+        });
       }
     }
     return { content: [...content] } as ChatModelRunResult;
   }
   if (typed.type === "message-delta") {
-    if (typed.delta.type === "text") {
-      const last = content[content.length - 1];
-      if (last?.type === "text") {
-        last.text += typed.delta.text;
-      } else {
-        content.push({ type: "text", text: typed.delta.text });
-      }
+    if (typed.delta.type === "text" || typed.delta.type === "reasoning") {
+      appendRuntimeContentPart(projection, {
+        type: typed.delta.type,
+        text: typed.delta.text,
+        partId: typed.delta.partId,
+      });
       return { content: [...content] } as ChatModelRunResult;
     }
     return null;
@@ -1674,10 +1772,13 @@ export function createAgentChatRuntimeAdapter(
         abortSignal,
         metadata: options.metadata,
       });
-      const content: ContentPart[] = [];
+      const projection: RuntimeContentProjection = {
+        content: [],
+        partsById: new Map(),
+      };
       try {
         for await (const event of turn.events) {
-          const result = applyRuntimeEventToContent(event, content);
+          const result = applyRuntimeEventToContent(event, projection);
           if (result) {
             const metadata = (result.metadata ?? {}) as Record<string, unknown>;
             const custom =

package/corpus/core/src/client/chat/tool-call-display.tsx

@@ -951,19 +951,52 @@ export function ReconnectStreamMessage({
 
 // ─── Reasoning / Thinking cell ────────────────────────────────────────────────
 
+/**
+ * Completed reasoning and tool calls share one outer "Worked for…"
+ * disclosure. Reasoning cells inside it render their prose directly so
+ * opening that summary never reveals a redundant second disclosure.
+ */
+const WorkSummaryContentContext = React.createContext(false);
+
 export function ReasoningCell({
   text,
   isStreaming = false,
   defaultOpen,
+  durationMs,
 }: {
   text: string;
   isStreaming?: boolean;
   defaultOpen?: boolean;
+  /**
+   * Elapsed thinking time in ms, once known. Only meaningful once streaming
+   * has finished — callers that track live timing (see ReasoningMessagePart)
+   * pass this so the label can read "Thought for Xs" instead of "Thought".
+   * Historical messages with no live timing simply omit it.
+   */
+  durationMs?: number | null;
 }) {
+  const embeddedInWorkSummary = React.useContext(WorkSummaryContentContext);
   const [open, setOpen] = useState(defaultOpen ?? isStreaming);
   const trimmed = text.trim();
   if (!trimmed && !isStreaming) return null;
 
+  if (embeddedInWorkSummary) {
+    return (
+      <div className="pb-1 pl-5 text-[13px] leading-relaxed text-muted-foreground whitespace-pre-wrap">
+        {trimmed || (isStreaming ? "…" : "")}
+      </div>
+    );
+  }
+
+  const label = isStreaming
+    ? "Thinking"
+    : durationMs != null && durationMs >= 1000
+      ? `Thought for ${formatWorkedDuration(durationMs)}`
+      : "Thought";
+  // Only clamp to a scroll-free "tail" view while actively streaming and
+  // expanded — once the run finishes the full text is shown, unclamped.
+  const showTail = isStreaming && open;
+
   return (
     <div className="my-0.5 w-full">
       <button
@@ -978,11 +1011,17 @@ export function ReasoningCell({
             open && "rotate-90",
           )}
         />
-        <span>{isStreaming ? "Thinking" : "Thought"}</span>
+        {isStreaming ? (
+          <span className="agent-thinking-indicator__text">{label}</span>
+        ) : (
+          <span>{label}</span>
+        )}
       </button>
       <AnimatedCollapse open={open}>
-        <div className="pl-5 pb-1 text-[13px] leading-relaxed text-muted-foreground whitespace-pre-wrap">
-          {trimmed || (isStreaming ? "…" : "")}
+        <div className={cn("pl-5 pb-1", showTail && "reasoning-cell-tail")}>
+          <div className="text-[13px] leading-relaxed text-muted-foreground whitespace-pre-wrap">
+            {trimmed || (isStreaming ? "…" : "")}
+          </div>
         </div>
       </AnimatedCollapse>
     </div>
@@ -1052,7 +1091,9 @@ export function WorkedForSummary({
         />
       </button>
       <AnimatedCollapse open={open}>
-        <div className="pt-1">{children}</div>
+        <WorkSummaryContentContext.Provider value>
+          <div className="pt-1">{children}</div>
+        </WorkSummaryContentContext.Provider>
       </AnimatedCollapse>
     </div>
   );

package/corpus/core/src/client/composer/RealtimeVoiceMode.tsx

@@ -0,0 +1,294 @@
+import { Button } from "@agent-native/toolkit/ui/button";
+import {
+  IconAlertTriangle,
+  IconLoader2,
+  IconMicrophone,
+  IconPhoneOff,
+  IconVolume,
+} from "@tabler/icons-react";
+import { useId, useState } from "react";
+
+import {
+  Popover,
+  PopoverContent,
+  PopoverTrigger,
+} from "../components/ui/popover.js";
+import {
+  Tooltip,
+  TooltipContent,
+  TooltipTrigger,
+} from "../components/ui/tooltip.js";
+import { cn } from "../utils.js";
+
+export type RealtimeVoiceModeState =
+  | "connecting"
+  | "listening"
+  | "speaking"
+  | "working"
+  | "error"
+  | "ending";
+
+/**
+ * User-visible copy stays outside the shared component so host catalogs remain
+ * the source of truth. Callers should provide these values through `useT()`.
+ */
+export interface RealtimeVoiceModeCopy {
+  entryButtonLabel: string;
+  promptTitle: string;
+  promptDescription: string;
+  startVoiceMode: string;
+  keepDictating: string;
+  showChat: string;
+  hideChat: string;
+  endVoiceMode: string;
+  status: Record<RealtimeVoiceModeState, string>;
+  errors: {
+    unsupported: string;
+    responseFailed: string;
+    sessionFailed: string;
+    channelDisconnected: string;
+    connectionFailed: string;
+    offerFailed: string;
+  };
+}
+
+export interface RealtimeVoiceModeEntryProps {
+  copy: RealtimeVoiceModeCopy;
+  disabled?: boolean;
+  open?: boolean;
+  onOpenChange?: (open: boolean) => void;
+  onStartVoiceMode: () => void;
+  onKeepDictating: () => void;
+  className?: string;
+}
+
+/**
+ * Composer mic entry point for apps that support a full-duplex voice session.
+ * The first click offers voice mode without silently changing the existing
+ * editable-dictation behavior.
+ */
+export function RealtimeVoiceModeEntry({
+  copy,
+  disabled,
+  open: controlledOpen,
+  onOpenChange,
+  onStartVoiceMode,
+  onKeepDictating,
+  className,
+}: RealtimeVoiceModeEntryProps) {
+  const [uncontrolledOpen, setUncontrolledOpen] = useState(false);
+  const open = controlledOpen ?? uncontrolledOpen;
+  const titleId = useId();
+  const descriptionId = useId();
+
+  const setOpen = (nextOpen: boolean) => {
+    if (controlledOpen === undefined) setUncontrolledOpen(nextOpen);
+    onOpenChange?.(nextOpen);
+  };
+
+  const choose = (callback: () => void) => {
+    setOpen(false);
+    callback();
+  };
+
+  return (
+    <Popover open={open} onOpenChange={setOpen}>
+      <Tooltip>
+        <TooltipTrigger asChild>
+          <PopoverTrigger asChild>
+            <Button
+              type="button"
+              variant="ghost"
+              size="icon"
+              disabled={disabled}
+              aria-label={copy.entryButtonLabel}
+              aria-expanded={open}
+              className={cn(
+                "size-7 shrink-0 text-muted-foreground hover:text-foreground",
+                className,
+              )}
+            >
+              <IconMicrophone />
+            </Button>
+          </PopoverTrigger>
+        </TooltipTrigger>
+        <TooltipContent>{copy.entryButtonLabel}</TooltipContent>
+      </Tooltip>
+
+      <PopoverContent
+        side="top"
+        align="end"
+        sideOffset={10}
+        className="w-[min(22rem,calc(100vw-2rem))] p-4"
+        aria-labelledby={titleId}
+        aria-describedby={descriptionId}
+      >
+        <div className="grid gap-3">
+          <div className="grid gap-1">
+            <h2 id={titleId} className="text-sm font-semibold text-foreground">
+              {copy.promptTitle}
+            </h2>
+            <p
+              id={descriptionId}
+              className="text-sm leading-relaxed text-muted-foreground"
+            >
+              {copy.promptDescription}
+            </p>
+          </div>
+
+          <div className="flex flex-col-reverse gap-2 sm:flex-row sm:justify-end">
+            <Button
+              type="button"
+              variant="ghost"
+              size="sm"
+              onClick={() => choose(onKeepDictating)}
+            >
+              {copy.keepDictating}
+            </Button>
+            <Button
+              type="button"
+              size="sm"
+              onClick={() => choose(onStartVoiceMode)}
+            >
+              <IconMicrophone />
+              {copy.startVoiceMode}
+            </Button>
+          </div>
+        </div>
+      </PopoverContent>
+    </Popover>
+  );
+}
+
+export interface RealtimeVoiceModeDockProps {
+  state: RealtimeVoiceModeState;
+  copy: RealtimeVoiceModeCopy;
+  chatVisible: boolean;
+  onToggleChat: () => void;
+  onEndVoiceMode: () => void;
+  errorMessage?: string | null;
+  className?: string;
+}
+
+const ORB_STATE_CLASSES: Record<RealtimeVoiceModeState, string> = {
+  connecting:
+    "bg-secondary text-secondary-foreground ring-4 ring-secondary/40 hover:bg-secondary/80",
+  listening:
+    "bg-primary text-primary-foreground ring-4 ring-primary/15 hover:bg-primary/90",
+  speaking:
+    "bg-foreground text-background ring-4 ring-foreground/15 hover:bg-foreground/90",
+  working:
+    "bg-secondary text-secondary-foreground ring-4 ring-secondary/40 hover:bg-secondary/80",
+  error:
+    "bg-destructive text-destructive-foreground ring-4 ring-destructive/15 hover:bg-destructive/90",
+  ending: "bg-muted text-muted-foreground ring-4 ring-muted/40 cursor-wait",
+};
+
+function VoiceStateIcon({ state }: { state: RealtimeVoiceModeState }) {
+  switch (state) {
+    case "connecting":
+      return (
+        <IconLoader2 className="animate-spin motion-reduce:animate-none" />
+      );
+    case "listening":
+      return <IconMicrophone />;
+    case "speaking":
+      return <IconVolume />;
+    case "working":
+    case "ending":
+      return (
+        <IconLoader2 className="animate-spin motion-reduce:animate-none" />
+      );
+    case "error":
+      return <IconAlertTriangle />;
+  }
+}
+
+/**
+ * Persistent voice-session control. Toggling the main orb only changes chat
+ * visibility; ending the realtime session is intentionally a separate action.
+ */
+export function RealtimeVoiceModeDock({
+  state,
+  copy,
+  chatVisible,
+  onToggleChat,
+  onEndVoiceMode,
+  errorMessage,
+  className,
+}: RealtimeVoiceModeDockProps) {
+  const statusId = useId();
+  const toggleLabel = chatVisible ? copy.hideChat : copy.showChat;
+  const ending = state === "ending";
+  const errorDetailVisible = state === "error" && Boolean(errorMessage);
+
+  return (
+    <div
+      className={cn(
+        "pointer-events-none fixed bottom-4 end-4 flex max-w-[calc(100vw-2rem)] flex-col items-end gap-2",
+        className,
+      )}
+      data-realtime-voice-state={state}
+    >
+      {errorDetailVisible ? (
+        <div
+          role="alert"
+          className="pointer-events-auto max-w-xs rounded-lg border border-destructive/30 bg-background px-3 py-2 text-sm text-destructive shadow-md"
+        >
+          {errorMessage}
+        </div>
+      ) : null}
+
+      <div
+        id={statusId}
+        role={state === "error" && !errorDetailVisible ? "alert" : "status"}
+        aria-live={
+          state === "error" && !errorDetailVisible ? "assertive" : "polite"
+        }
+        className="rounded-full border border-border bg-background px-3 py-1.5 text-xs font-medium text-foreground shadow-sm"
+      >
+        {copy.status[state]}
+      </div>
+
+      <div className="pointer-events-auto flex items-center gap-2">
+        <Tooltip>
+          <TooltipTrigger asChild>
+            <Button
+              type="button"
+              variant="outline"
+              size="icon"
+              disabled={ending}
+              onClick={onEndVoiceMode}
+              aria-label={copy.endVoiceMode}
+              className="size-10 rounded-full bg-background shadow-md"
+            >
+              <IconPhoneOff />
+            </Button>
+          </TooltipTrigger>
+          <TooltipContent>{copy.endVoiceMode}</TooltipContent>
+        </Tooltip>
+
+        <Tooltip>
+          <TooltipTrigger asChild>
+            <Button
+              type="button"
+              size="icon"
+              disabled={ending}
+              onClick={onToggleChat}
+              aria-label={toggleLabel}
+              aria-pressed={chatVisible}
+              aria-describedby={statusId}
+              className={cn(
+                "size-14 rounded-full shadow-lg",
+                ORB_STATE_CLASSES[state],
+              )}
+            >
+              <VoiceStateIcon state={state} />
+            </Button>
+          </TooltipTrigger>
+          <TooltipContent>{toggleLabel}</TooltipContent>
+        </Tooltip>
+      </div>
+    </div>
+  );
+}