akanjs 3.0.0-alpha.2 → 3.0.0-alpha.21

package/types/vendor/use-agentic/httpRunner.d.ts

@@ -0,0 +1,15 @@
+import type { AgentRunner } from "./types.d.ts";
+export interface HttpRunnerOptions {
+    url: string;
+    headers?: () => Record<string, string>;
+    /** Swap the transport — tests, a framework's own HTTP client, a custom fetch with credentials. */
+    fetcher?: typeof fetch;
+}
+/**
+ * The default runner: one stateless POST per assistant turn, negotiated via `accept`. A server that streams
+ * answers `text/event-stream` — one `RunnerEvent` JSON per SSE `data:` line, ending with `done` — and one that
+ * does not answers the single JSON `TurnAnswer`; both ride the same endpoint and the same request JSON.
+ *
+ * The wire is documented in WIRE.md so any backend can serve it.
+ */
+export declare const httpRunner: ({ url, headers, fetcher }: HttpRunnerOptions) => AgentRunner;

package/types/vendor/use-agentic/index.d.ts

@@ -0,0 +1,13 @@
+export * from "./Agentic.d.ts";
+export * from "./AgenticSurface.d.ts";
+export * from "./AgentProvider.d.ts";
+export * from "./AgentScope.d.ts";
+export * from "./AgentSession.d.ts";
+export * from "./httpRunner.d.ts";
+export * from "./surfaceContext.d.ts";
+export * from "./types.d.ts";
+export * from "./useAgent.d.ts";
+export * from "./useAgentGuide.d.ts";
+export * from "./useAgentResource.d.ts";
+export * from "./useAgentState.d.ts";
+export * from "./useAgentTool.d.ts";

package/types/vendor/use-agentic/surfaceContext.d.ts

@@ -0,0 +1,5 @@
+import { AgenticSurface } from "./AgenticSurface.d.ts";
+export declare const SurfaceContext: import("react").Context<AgenticSurface | null>;
+export declare const ScopeContext: import("react").Context<string[]>;
+export declare const useSurface: () => AgenticSurface;
+export declare const useScopePath: () => string[];

package/types/vendor/use-agentic/types.d.ts

@@ -0,0 +1,133 @@
+export type JsonSchema = Record<string, unknown>;
+export type ToolEffect = "state" | "query" | "mutation";
+/** `true` asks with a default message, a string is the message, a function decides from the arguments. */
+export type ToolConfirm = boolean | string | ((args: Record<string, unknown>) => string | boolean);
+/** Re-checked at the moment of execution; a string is the refusal reason the agent reads. */
+export type ToolGuard = (args: Record<string, unknown>) => true | string;
+export interface ToolEntry {
+    name: string;
+    description?: string;
+    parameters?: JsonSchema;
+    effect?: ToolEffect;
+    confirm?: ToolConfirm;
+    guard?: ToolGuard;
+    run: (args: Record<string, unknown>) => unknown;
+}
+export interface ResourceEntry {
+    name: string;
+    description?: string;
+    /** `false` keeps it out of post-call diff reports — for values that change on their own every second. */
+    report?: boolean;
+    read: () => unknown;
+}
+export interface ScopeEntry {
+    id: string;
+    label?: string;
+    kind?: string;
+}
+/**
+ * A bulk contributor of entries whose names are already full — how a host store joins the surface. `view` is the
+ * scope path a zone session reads through; a source that ignores it contributes the same entries to every view.
+ */
+export interface SurfaceSource {
+    tools?: (view?: string[]) => ToolEntry[];
+    resources?: (view?: string[]) => ResourceEntry[];
+    subscribe?: (listener: () => void) => () => void;
+}
+/**
+ * The reading half of a surface — what a session consumes. `AgenticSurface` is one; `surface.view(path)` answers a
+ * zone-scoped one over the same registry, so zones are views of the screen, never walls between its parts.
+ */
+export interface SurfaceView {
+    snapshot(): SurfaceSnapshot;
+    tool(name: string): ToolEntry | null;
+    call(name: string, args?: Record<string, unknown>): Promise<unknown>;
+    read(name: string): unknown;
+    diffSince(before: SurfaceSnapshot): ResourceDiff[];
+    subscribe(listener: () => void): () => void;
+}
+export interface PublishedTool {
+    name: string;
+    description?: string;
+    parameters?: JsonSchema;
+    effect?: ToolEffect;
+    needsConfirm: boolean;
+}
+export interface PublishedResource {
+    name: string;
+    description?: string;
+    value?: unknown;
+    error?: string;
+}
+export interface PublishedScope {
+    path: string;
+    label?: string;
+    kind?: string;
+}
+export interface SurfaceSnapshot {
+    tools: PublishedTool[];
+    resources: PublishedResource[];
+    scopes: PublishedScope[];
+    /** Standing guidance texts, in registration order. Folded into the turn's instructions, not into context. */
+    guides: string[];
+}
+export interface ResourceDiff {
+    name: string;
+    value?: unknown;
+    error?: string;
+    removed?: boolean;
+}
+export type ChatRole = "user" | "assistant" | "tool";
+export interface ToolCallRequest {
+    id: string;
+    name: string;
+    args: Record<string, unknown>;
+}
+export interface ToolCallResult {
+    id: string;
+    name: string;
+    /** What `run` returned. Must be JSON-serializable — it rides the wire back to the model. */
+    result?: unknown;
+    /** What the call changed on the surface — the whole report for a tool that returns nothing. */
+    changes?: ResourceDiff[];
+    error?: string;
+}
+export interface ChatMessage {
+    role: ChatRole;
+    text?: string;
+    toolCalls?: ToolCallRequest[];
+    toolResults?: ToolCallResult[];
+    /** A failed or capped turn, recorded in the transcript rather than thrown past it. */
+    error?: string;
+}
+/** One block of screen context the host assembles per turn. `kind` is the host's vocabulary; the wire forwards it verbatim. */
+export interface ContextBlock {
+    kind: string;
+    [key: string]: unknown;
+}
+export type RunnerEvent = {
+    type: "text";
+    delta: string;
+} | {
+    type: "toolCall";
+    id: string;
+    name: string;
+    args: Record<string, unknown>;
+} | {
+    type: "done";
+    stop: "end" | "toolUse";
+} | {
+    type: "error";
+    message: string;
+};
+export interface RunnerRequest {
+    messages: ChatMessage[];
+    tools: PublishedTool[];
+    context: ContextBlock[];
+    instructions?: string;
+    signal: AbortSignal;
+}
+/** One model turn: request in, streamed events out. Where the loop runs is the implementation's business. */
+export interface AgentRunner {
+    run: (request: RunnerRequest) => AsyncIterable<RunnerEvent>;
+}

package/types/vendor/use-agentic/useAgent.d.ts

@@ -0,0 +1,4 @@
+import type { AgentSession } from "./AgentSession.d.ts";
+export declare const SessionContext: import("react").Context<AgentSession | null>;
+/** The enclosing session, re-rendering on every session change. `send`/`abort` are safe to destructure. */
+export declare const useAgent: () => AgentSession;

package/types/vendor/use-agentic/useAgentGuide.d.ts

@@ -0,0 +1,6 @@
+/**
+ * Registers standing guidance for the agent while the component is mounted. Guidance is folded into the turn's
+ * instructions — it directs the model, unlike context, which is framed as data. The text is captured at mount
+ * like every declaration on the surface; remount to change it.
+ */
+export declare const useAgentGuide: (text: string) => void;

package/types/vendor/use-agentic/useAgentResource.d.ts

@@ -0,0 +1,7 @@
+export interface AgentResourceMeta {
+    description?: string;
+    serialize?: (value: unknown) => unknown;
+    report?: boolean;
+}
+/** Publishes a read-only view of any value the component already holds — derived totals, statuses, labels. */
+export declare const useAgentResource: (name: string, value: unknown, meta?: AgentResourceMeta) => void;

package/types/vendor/use-agentic/useAgentState.d.ts

@@ -0,0 +1,13 @@
+import { type Dispatch, type SetStateAction } from "react";
+import type { JsonSchema } from "./types.d.ts";
+export interface AgentStateMeta<T> {
+    description?: string;
+    serialize?: (value: T) => unknown;
+    report?: boolean;
+    /** Schema of the setter's `value` argument. Without it the state is published read-only. */
+    set?: JsonSchema;
+    /** Validates or coerces the setter's incoming `value` — throw to refuse the write. Nothing else enforces `set`. */
+    parse?: (value: unknown) => T;
+}
+/** `useState` the agent can read — and write only through a named setter tool, and only when `set` declares one. */
+export declare const useAgentState: <T>(name: string, initial: T | (() => T), meta?: AgentStateMeta<T>) => [T, Dispatch<SetStateAction<T>>];

package/types/vendor/use-agentic/useAgentTool.d.ts

@@ -0,0 +1,16 @@
+import type { JsonSchema, ToolConfirm, ToolEffect, ToolGuard } from "./types.d.ts";
+export interface AgentToolMeta {
+    description?: string;
+    parameters?: JsonSchema;
+    effect?: ToolEffect;
+    confirm?: ToolConfirm;
+    guard?: ToolGuard;
+}
+/**
+ * Publishes one tool for as long as the component is mounted.
+ *
+ * Identity is the scoped name, not the callback — `run`, `guard`, and `confirm` read the latest render through a
+ * ref, so there is no dependency array and no stale closure for the agent to hit. `description` and `parameters`
+ * are declaration data, read once at mount.
+ */
+export declare const useAgentTool: <Args extends Record<string, unknown> = Record<string, unknown>, Result = unknown>(name: string, meta: AgentToolMeta, run: (args: Args) => Result | Promise<Result>) => ((args?: Args) => Promise<Result>);

package/types/vendor/use-agentic.d.ts

@@ -0,0 +1 @@
+export * from "./use-agentic/index.d.ts";

package/types/webkit/index.d.ts

@@ -8,9 +8,12 @@ export { useCodepush } from "./useCodepush.d.ts";
 export { useContact } from "./useContact.d.ts";
 export { useCsrValues } from "./useCsrValues.d.ts";
 export { useDebounce } from "./useDebounce.d.ts";
+export { useEscapeKey } from "./useEscapeKey.d.ts";
 export { useFetch, useFetchFn } from "./useFetch.d.ts";
 export { useGeoLocation } from "./useGeoLocation.d.ts";
 export { useHistory } from "./useHistory.d.ts";
 export { useInterval } from "./useInterval.d.ts";
 export { useLocation } from "./useLocation.d.ts";
+export type { ScreenScopeItem } from "./useScreenScope.d.ts";
+export { useScreenScope } from "./useScreenScope.d.ts";
 export { useThrottle } from "./useThrottle.d.ts";

package/types/webkit/lazy.d.ts

@@ -1,6 +1,18 @@
 import type { ReactNode } from "react";
+/**
+ * `suspense` puts a Suspense boundary around the lazy component, so a chunk that resolves *after* the
+ * page is painted — a modal body, a dropdown menu — suspends only itself. Without one the suspension
+ * travels up to the nearest boundary, which is the route (`server/routeElementComposer.tsx`), and the
+ * whole page repaints as its loading fallback on the first open.
+ *
+ * It is opt-in rather than the default because a boundary also changes server rendering: under the
+ * default `renderMode: "stream"` the boundary's subtree leaves the shell as `loading` and arrives later
+ * in the stream. That is fine for an interaction shell and wrong for a page body, which SEO snapshots,
+ * prerendering and pre-hydration E2E read out of the shell.
+ */
 type LazyOption = {
     ssr?: boolean;
+    suspense?: boolean;
     loading?: () => ReactNode;
 };
 type LoadedOf<Loaded> = Loaded extends {

package/types/webkit/useCsrValues.d.ts

@@ -1,8 +1,8 @@
-import { type NavigationIntent, type PathRoute, type RouteGuide, type RouterInstance, type TransitionType } from "akanjs/client";
+import { type NavigationIntent, type PageTransition, type PathRoute, type RouteGuide, type RouterInstance, type TransitionType } from "akanjs/client";
 export declare const useCsrValues: (rootRouteGuide: RouteGuide, pathRoutes: PathRoute[]) => {
+    page: PageTransition | null;
     topSafeArea: import("akanjs/client").SafeAreaTransition | null;
-    page: import("akanjs/client").PageTransition | null;
-    prevPage: import("akanjs/client").PageTransition | null;
+    prevPage: PageTransition | null;
     topInset: import("akanjs/client").ContainerTransition | null;
     bottomInset: import("akanjs/client").ContainerTransition | null;
     topLeftAction: import("akanjs/client").ContainerTransition | null;

package/types/webkit/useEscapeKey.d.ts

@@ -0,0 +1,5 @@
+/**
+ * Close `onEscape` on Escape while `active`, but only while this surface is the topmost active one.
+ * The callback is read through a ref, so a fresh closure per render does not reshuffle the stack.
+ */
+export declare const useEscapeKey: (active: boolean, onEscape: () => void) => void;

package/types/webkit/useFrameRuntime.d.ts

@@ -4,7 +4,10 @@ export type FrameSlotBucket = "active" | "pending";
 export type FrameSlotMapByBucket = Record<FrameSlotBucket, FrameSlotMap>;
 export declare const PENDING_FRAME_READY_TIMEOUT_MS = 80;
 export declare const PENDING_FRAME_READY_MAX_TIMEOUT_MS = 120;
-export declare const KEYBOARD_FALLBACK_ANIMATION_DURATION_MS = 285;
+export declare const KEYBOARD_SHOW_ANIMATION_DURATION_MS = 420;
+export declare const KEYBOARD_HIDE_ANIMATION_DURATION_MS = 90;
+export declare const KEYBOARD_SHOW_ANIMATION_EASING = "cubic-bezier(0.16, 1, 0.3, 1)";
+export declare const KEYBOARD_HIDE_ANIMATION_EASING = "cubic-bezier(0.7, 0, 0.84, 0)";
 export declare const FRAME_Z_INDEX: {
     readonly page: 10;
     readonly previousPage: 0;
@@ -39,6 +42,7 @@ export declare function useFrameViewport(): {
 export declare function getKeyboardAccessorySlots(path: string, frameSlots: FrameSlotMap): FrameSlotRegistration[];
 export declare function resolveKeyboardAccessoryHeight(path: string, frameSlots: FrameSlotMap): number;
 export declare function hasKeyboardStickySlot(path: string, frameSlots: FrameSlotMap): boolean;
+export declare function hasBottomAnchoredKeyboardSlot(path: string, frameSlots: FrameSlotMap): boolean;
 export declare function resolveKeyboardFrame({ keyboardHeight, bottomSafeArea, visualViewportKeyboardHeight, platformProfile, sticky, freeze, }: {
     keyboardHeight: number;
     bottomSafeArea: number;
@@ -57,6 +61,7 @@ export declare function useKeyboardFrame({ bottomSafeArea, sticky, viewport, pla
     bottomSafeArea: number;
     sticky: boolean;
     viewport: {
+        height: number;
         visualHeight: number;
         visualOffsetTop: number;
     };

package/types/webkit/useScreenScope.d.ts

@@ -0,0 +1,18 @@
+export interface ScreenScopeItem {
+    id: string;
+    label?: string;
+}
+interface ScreenScopeOptions {
+    id: string;
+    kind: string;
+    label?: string;
+    items?: () => ScreenScopeItem[];
+}
+/**
+ * Announces what a component has on screen: one scope for its mounted lifetime, plus an `<id>.items` resource
+ * naming what it currently renders. `Load.Units`/`Load.View` call this, so every list and detail view is visible
+ * to the in-page agent with no app code. Items are capped and the cap is declared — a truncated list must never
+ * read as the whole one.
+ */
+export declare const useScreenScope: ({ id, kind, label, items }: ScreenScopeOptions) => void;
+export {};

package/ui/Agent/Approval.tsx

@@ -0,0 +1,29 @@
+"use client";
+import { cn, usePage } from "akanjs/client";
+import type { PendingApproval } from "../../vendor/use-agentic";
+import { Button } from "../Button";
+
+interface ApprovalProps {
+  className?: string;
+  approval: PendingApproval;
+}
+
+export default function Approval({ className, approval }: ApprovalProps) {
+  const { l } = usePage();
+  return (
+    <div className={cn("flex flex-col gap-2 border-warning/30 border-t bg-warning/10 px-4 py-3", className)}>
+      <p className="text-sm">{approval.message}</p>
+      <pre className="max-h-24 overflow-auto rounded-field bg-base-100/60 p-2 font-mono text-[10px]">
+        {JSON.stringify(approval.args, null, 2)}
+      </pre>
+      <div className="flex justify-end gap-2">
+        <Button onClick={() => approval.reject()} size="xs" variant="ghost">
+          {l("base.decline")}
+        </Button>
+        <Button onClick={approval.approve} size="xs">
+          {l("base.approve")}
+        </Button>
+      </div>
+    </div>
+  );
+}

package/ui/Agent/Bubble.tsx

@@ -0,0 +1,74 @@
+"use client";
+import { cn } from "akanjs/client";
+import type { ChatMessage, ToolCallResult } from "../../vendor/use-agentic";
+
+interface BubbleProps {
+  className?: string;
+  message: ChatMessage;
+  /**
+   * Results by call id, gathered across the transcript. A call and its result are two wire messages — the model
+   * needs both — but they are one thing that happened, so the call's own row resolves in place instead of the
+   * name appearing again as a second row.
+   */
+  results?: ReadonlyMap<string, ToolCallResult>;
+}
+
+interface RowProps {
+  name: string;
+  args?: Record<string, unknown>;
+  result?: ToolCallResult;
+}
+
+/** The arguments ride along because two calls of one tool are the same row otherwise — two searches, one name. */
+const Row = ({ name, args, result }: RowProps) => (
+  <div className="flex items-baseline gap-2 rounded-field bg-muted px-2 py-1">
+    {result ? (
+      <span className={cn("shrink-0 text-[10px]", result.error ? "text-error" : "text-success")}>
+        {result.error ? "✕" : "✓"}
+      </span>
+    ) : (
+      <span className="size-1.5 shrink-0 animate-pulse rounded-full bg-warning" />
+    )}
+    <span className="shrink-0 font-mono text-xs">{name}</span>
+    {args && Object.keys(args).length ? (
+      <span className="truncate font-mono text-[10px] text-foreground/50">{JSON.stringify(args)}</span>
+    ) : null}
+    {result?.error ? <span className="truncate text-[10px] text-error">{result.error}</span> : null}
+    {result?.changes?.length ? (
+      <span className="ml-auto shrink-0 text-[10px] text-foreground/40">Δ {result.changes.length}</span>
+    ) : null}
+  </div>
+);
+
+export default function Bubble({ className, message, results }: BubbleProps) {
+  if (message.role === "tool")
+    return (
+      <div className={cn("flex flex-col gap-1", className)}>
+        {(message.toolResults ?? []).map((result) => (
+          <Row key={result.id} name={result.name} result={result} />
+        ))}
+      </div>
+    );
+  if (message.role === "user")
+    return (
+      <div
+        className={cn(
+          "max-w-[85%] self-end whitespace-pre-wrap rounded-box bg-primary/10 px-3 py-2 text-sm",
+          className,
+        )}
+      >
+        {message.text}
+      </div>
+    );
+  const isDrafting = !message.text && !message.toolCalls?.length && !message.error;
+  return (
+    <div className={cn("flex max-w-[85%] flex-col gap-1 self-start", className)}>
+      {message.text ? <p className="whitespace-pre-wrap text-sm">{message.text}</p> : null}
+      {(message.toolCalls ?? []).map((call) => (
+        <Row key={call.id} args={call.args} name={call.name} result={results?.get(call.id)} />
+      ))}
+      {message.error ? <p className="text-error text-xs">{message.error}</p> : null}
+      {isDrafting ? <span className="size-2 animate-pulse rounded-full bg-foreground/30" /> : null}
+    </div>
+  );
+}

package/ui/Agent/Chat.tsx

@@ -0,0 +1,225 @@
+"use client";
+import { cn, fetch, usePage } from "akanjs/client";
+import type { PromptResult } from "akanjs/signal";
+import { AgentContext, type AgentPrompt, AgentPrompts, ensureStoreSurface } from "akanjs/store";
+import { useContext, useEffect, useRef, useState, useSyncExternalStore } from "react";
+import { AiOutlineClear, AiOutlineClose, AiOutlineRobot } from "react-icons/ai";
+import { type AgentRunner, AgentSession, SessionContext } from "../../vendor/use-agentic";
+import { Button } from "../Button";
+import { inputRecipe } from "../recipe";
+import { createOverridable } from "../UiOverride";
+import Approval from "./Approval";
+import Bubble from "./Bubble";
+import { fetchRunner } from "./fetchRunner";
+import { type PersistOption, sessionHistoryOf } from "./sessionHistory";
+
+export interface ChatProps {
+  className?: string;
+  title?: string;
+  /** App-global framing. Route-scoped guidance layers on it through mounted `Agent.Guide`s. */
+  instructions?: string;
+  /** Swap the transport; the default drives the app's `runAgentTurn` endpoint. */
+  runner?: AgentRunner;
+  maxTurns?: number;
+  defaultOpen?: boolean;
+  /** Keeps the transcript across reloads — sessionStorage by default, `{ storage: "local" }` to outlive the tab. */
+  persist?: PersistOption;
+}
+
+/**
+ * The user-facing half of the in-page agent: one floating chat wired to the same surface the dock inspects.
+ * The conversation loop runs in this browser session — every tool call executes here, gated by the approval
+ * card — and the session lives in a ref, so it survives reopening the panel and dies with the page (v1 keeps
+ * no history). An enclosing AgentProvider's session wins, which is how an app isolates a surface or swaps the
+ * loop while keeping this UI.
+ */
+export const DefaultChat = ({
+  className,
+  title,
+  instructions,
+  runner,
+  maxTurns,
+  defaultOpen = false,
+  persist,
+}: ChatProps) => {
+  const { l } = usePage();
+  const provided = useContext(SessionContext);
+  const held = useRef<AgentSession | null>(null);
+  held.current ??=
+    provided ??
+    new AgentSession(ensureStoreSurface().surface, runner ?? fetchRunner(), {
+      buildContext: (surface) => AgentContext.of().blocks(surface),
+      ...(instructions ? { instructions } : {}),
+      ...(maxTurns ? { maxTurns } : {}),
+      ...(persist ? { history: sessionHistoryOf(persist) } : {}),
+    });
+  const session = held.current;
+  const prompts = useRef<AgentPrompts | null>(null);
+  prompts.current ??= AgentPrompts.of();
+  const version = useSyncExternalStore(
+    session.subscribe,
+    () => session.version,
+    () => session.version,
+  );
+  const [open, setOpen] = useState(defaultOpen);
+  const [draft, setDraft] = useState("");
+  const listRef = useRef<HTMLDivElement>(null);
+  useEffect(() => {
+    listRef.current?.scrollTo({ top: listRef.current.scrollHeight });
+  }, [version, open]);
+  const runPrompt = async (prompt: AgentPrompt, args: string[]) => {
+    const usage = `/${prompt.name} ${prompt.args.map((arg) => `<${arg.name}>`).join(" ")}`.trim();
+    if (args.length < prompt.args.filter((arg) => arg.required).length) {
+      session.report(`Usage: ${usage}`);
+      return;
+    }
+    const handler = (fetch as unknown as Record<string, (...callArgs: unknown[]) => Promise<PromptResult>>)[
+      prompt.name
+    ];
+    if (typeof handler !== "function") {
+      session.report(`/${prompt.name} is not mounted on this app.`);
+      return;
+    }
+    try {
+      const result = await handler(...args);
+      await session.send(AgentPrompts.messagesOf(result));
+    } catch (error) {
+      session.report(`/${prompt.name} failed: ${error instanceof Error ? error.message : String(error)}`);
+    }
+  };
+  const pick = (prompt: AgentPrompt) => {
+    if (prompt.args.some((arg) => arg.required)) {
+      setDraft(`/${prompt.name} `);
+      return;
+    }
+    setDraft("");
+    void runPrompt(prompt, []);
+  };
+  const send = () => {
+    const text = draft.trim();
+    if (!text || session.isRunning) return;
+    const command = AgentPrompts.parseCommand(text);
+    const prompt = command ? prompts.current?.find(command.name) : null;
+    setDraft("");
+    if (command && prompt) {
+      void runPrompt(prompt, command.args);
+      return;
+    }
+    void session.send(text);
+  };
+  const menu = /^\/[A-Za-z0-9_-]*$/.test(draft)
+    ? (prompts.current?.list() ?? []).filter((prompt) => `/${prompt.name}`.startsWith(draft))
+    : [];
+
+  const resultOf = new Map(session.messages.flatMap((message) => message.toolResults ?? []).map((r) => [r.id, r]));
+  const claimed = new Set(session.messages.flatMap((message) => message.toolCalls?.map((call) => call.id) ?? []));
+  const bubbles = session.messages.flatMap((message, idx) => {
+    if (message.role !== "tool") return [<Bubble key={idx} message={message} results={resultOf} />];
+    const orphans = (message.toolResults ?? []).filter((result) => !claimed.has(result.id));
+    return orphans.length ? [<Bubble key={idx} message={{ ...message, toolResults: orphans }} />] : [];
+  });
+  if (!open)
+    return (
+      <button
+        aria-label={l("base.agent")}
+        data-agent-ui=""
+        className={cn(
+          "fixed right-4 bottom-4 z-50 flex size-12 items-center justify-center rounded-full bg-primary text-primary-foreground shadow-lg transition-transform hover:scale-105",
+          className,
+        )}
+        onClick={() => setOpen(true)}
+        type="button"
+      >
+        <AiOutlineRobot className="text-2xl" />
+      </button>
+    );
+  return (
+    
+    <aside
+      data-agent-ui=""
+      className={cn(
+        "fixed right-4 bottom-4 z-50 flex h-[min(600px,calc(100dvh-2rem))] w-[min(24rem,calc(100vw-2rem))] flex-col overflow-hidden rounded-box border border-border bg-background shadow-xl",
+        className,
+      )}
+    >
+      <header className="flex items-center gap-2 border-base-content/5 border-b px-4 py-3">
+        <span className="font-semibold text-sm">{title ?? l("base.agent")}</span>
+        {session.isRunning ? <span className="size-2 animate-pulse rounded-full bg-primary" /> : null}
+        <span className="ml-auto flex items-center gap-2">
+          {session.messages.length && !session.isRunning ? (
+            <button
+              aria-label={l("base.agentClear")}
+              className="text-foreground/50 hover:text-foreground"
+              onClick={() => session.reset()}
+              type="button"
+            >
+              <AiOutlineClear />
+            </button>
+          ) : null}
+          <button
+            aria-label={l("base.cancel")}
+            className="text-foreground/50 hover:text-foreground"
+            onClick={() => setOpen(false)}
+            type="button"
+          >
+            <AiOutlineClose />
+          </button>
+        </span>
+      </header>
+      <div className="flex flex-1 flex-col gap-2 overflow-y-auto px-4 py-3" ref={listRef}>
+        {bubbles.length ? (
+          bubbles
+        ) : (
+          <p className="py-6 text-center text-foreground/40 text-sm">{l("base.agentIntro")}</p>
+        )}
+      </div>
+      {session.pendingApproval ? <Approval approval={session.pendingApproval} /> : null}
+      {menu.length ? (
+        <div className="flex max-h-40 flex-col overflow-y-auto border-base-content/5 border-t py-1">
+          {menu.map((prompt) => (
+            <button
+              className="flex items-baseline gap-2 px-4 py-1.5 text-left hover:bg-muted"
+              key={prompt.name}
+              onClick={() => pick(prompt)}
+              type="button"
+            >
+              <span className="shrink-0 font-mono text-xs">/{prompt.name}</span>
+              {prompt.args.length ? (
+                <span className="shrink-0 font-mono text-[10px] text-foreground/40">
+                  {prompt.args.map((arg) => `<${arg.name}>`).join(" ")}
+                </span>
+              ) : null}
+              {prompt.description ? (
+                <span className="ml-auto truncate text-[10px] text-foreground/50">{prompt.description}</span>
+              ) : null}
+            </button>
+          ))}
+        </div>
+      ) : null}
+      <div className="flex items-center gap-2 border-base-content/5 border-t p-3">
+        <input
+          className={inputRecipe({ size: "sm" }, "flex-1")}
+          onChange={(event) => setDraft(event.target.value)}
+          onKeyDown={(event) => {
+            if (event.key !== "Enter" || event.nativeEvent.isComposing) return;
+            event.preventDefault();
+            send();
+          }}
+          placeholder={l("base.agentPlaceholder")}
+          value={draft}
+        />
+        {session.isRunning ? (
+          <Button onClick={session.abort} size="sm" variant="outline">
+            {l("base.stop")}
+          </Button>
+        ) : (
+          <Button disabled={!draft.trim()} onClick={send} size="sm">
+            {l("base.send")}
+          </Button>
+        )}
+      </div>
+    </aside>
+  );
+};
+
+export default createOverridable("AgentChat", DefaultChat);