@opengeni/react 0.2.0 → 0.3.0

package/dist/index.js

@@ -1566,6 +1566,21 @@ function useBillingUsage(options = {}) {
   };
 }
 
+// src/hooks/use-available-models.ts
+import { useCallback as useCallback14 } from "react";
+function useAvailableModels(options = {}) {
+  const client = useOpenGeniClient(options);
+  const load = useCallback14(async () => await client.getClientConfig(), [client]);
+  const state = usePolledValue(load, { pollIntervalMs: options.pollIntervalMs, enabled: options.enabled });
+  return {
+    models: state.data?.models ?? [],
+    defaultModel: state.data?.defaultModel ?? null,
+    loading: state.loading,
+    error: state.error,
+    refresh: state.refresh
+  };
+}
+
 // src/approvals.ts
 function approvalsFromRequiresAction(payload) {
   const approvals = payload && typeof payload === "object" ? payload.approvals : void 0;
@@ -1798,7 +1813,7 @@ function clearErrorMessage(cause) {
 }
 
 // src/hooks/use-slash-commands.ts
-import { useCallback as useCallback14, useMemo as useMemo3, useRef as useRef6, useState as useState7 } from "react";
+import { useCallback as useCallback15, useMemo as useMemo3, useRef as useRef6, useState as useState7 } from "react";
 function useSlashCommands(options) {
   const { commands, context, handlers, value, setValue } = options;
   const [highlight, setHighlight] = useState7(0);
@@ -1838,7 +1853,7 @@ function useSlashCommands(options) {
   const isCommandDraft = parsed !== null && items.length > 0;
   const clampedHighlight = items.length === 0 ? 0 : Math.min(highlight, items.length - 1);
   const activeArgHint = activeCommand ? argHint(activeCommand.args) : "";
-  const buildContext = useCallback14(
+  const buildContext = useCallback15(
     (command) => {
       if (!context) {
         return null;
@@ -1847,7 +1862,7 @@ function useSlashCommands(options) {
     },
     [context, handlers]
   );
-  const execute = useCallback14(
+  const execute = useCallback15(
     async (command, args) => {
       const ctx = buildContext(command);
       if (!ctx) {
@@ -1867,20 +1882,20 @@ function useSlashCommands(options) {
     },
     [buildContext, setValue]
   );
-  const autocomplete = useCallback14(
+  const autocomplete = useCallback15(
     (command) => {
       setValue(`/${command.name} `);
       setHighlight(0);
     },
     [setValue]
   );
-  const autocompleteHighlighted = useCallback14(() => {
+  const autocompleteHighlighted = useCallback15(() => {
     const command = items[clampedHighlight];
     if (command) {
       autocomplete(command);
     }
   }, [items, clampedHighlight, autocomplete]);
-  const runResolved = useCallback14(
+  const runResolved = useCallback15(
     async (command, options2) => {
       if (!parsed) {
         return;
@@ -1903,7 +1918,7 @@ function useSlashCommands(options) {
     },
     [parsed, activeCommand, autocomplete, execute]
   );
-  const runHighlighted = useCallback14(async () => {
+  const runHighlighted = useCallback15(async () => {
     if (!parsed) {
       return;
     }
@@ -1922,7 +1937,7 @@ function useSlashCommands(options) {
     }
     await runResolved(command);
   }, [parsed, activeCommand, items, clampedHighlight, runResolved]);
-  const runAt = useCallback14(
+  const runAt = useCallback15(
     async (index) => {
       const command = items[index];
       if (!command) {
@@ -1933,7 +1948,7 @@ function useSlashCommands(options) {
     [items, runResolved]
   );
   const runningRef = useRef6(false);
-  const onKeyDown = useCallback14(
+  const onKeyDown = useCallback15(
     (event) => {
       if (!open) {
         return false;
@@ -2084,8 +2099,63 @@ function CommandPalette({ open, items, highlight, onHighlight, onRun, argHintTex
 // src/components/chat-composer.tsx
 import { ArrowUpIcon, FileIcon, ImageIcon, LoaderCircleIcon, PaperclipIcon, SquareIcon, XIcon } from "lucide-react";
 import { AnimatePresence as AnimatePresence2, motion as motion2 } from "motion/react";
-import { useCallback as useCallback15, useEffect as useEffect6, useId, useMemo as useMemo4, useRef as useRef7, useState as useState8 } from "react";
-import { Fragment, jsx as jsx3, jsxs as jsxs2 } from "react/jsx-runtime";
+import { useCallback as useCallback16, useEffect as useEffect6, useId as useId2, useMemo as useMemo5, useRef as useRef7, useState as useState8 } from "react";
+
+// src/components/model-picker.tsx
+import { ChevronDownIcon } from "lucide-react";
+import { useId, useMemo as useMemo4 } from "react";
+import { jsx as jsx3, jsxs as jsxs2 } from "react/jsx-runtime";
+function ModelPicker({ models, value, onChange, disabled, className }) {
+  const selectId = useId();
+  const groups = useMemo4(() => {
+    const byProvider = /* @__PURE__ */ new Map();
+    for (const model of models) {
+      let group = byProvider.get(model.provider);
+      if (!group) {
+        group = { label: model.providerLabel, models: [] };
+        byProvider.set(model.provider, group);
+      }
+      group.models.push(model);
+    }
+    return [...byProvider.values()];
+  }, [models]);
+  if (models.length === 0) {
+    return null;
+  }
+  return /* @__PURE__ */ jsxs2("span", { className: cn("relative inline-flex items-center", className), children: [
+    /* @__PURE__ */ jsx3("label", { htmlFor: selectId, className: "sr-only", children: "Model" }),
+    /* @__PURE__ */ jsx3(
+      "select",
+      {
+        id: selectId,
+        value: value ?? "",
+        onChange: (event) => onChange(event.target.value),
+        disabled: disabled === true,
+        "aria-label": "Model",
+        className: cn(
+          // Sized like the other footer controls; the chevron overlay needs the
+          // right padding so the value never collides with it.
+          "h-8 max-w-[180px] cursor-pointer appearance-none truncate rounded-og-md bg-transparent",
+          "py-0 pl-2 pr-6 text-[13px] text-og-fg-muted",
+          "transition-colors duration-150 hover:bg-og-surface-2 hover:text-og-fg",
+          "focus:outline-none focus-visible:outline-none",
+          "disabled:cursor-not-allowed disabled:opacity-50"
+        ),
+        children: groups.map((group) => /* @__PURE__ */ jsx3("optgroup", { label: group.label, children: group.models.map((model) => /* @__PURE__ */ jsx3("option", { value: model.id, children: model.label }, model.id)) }, group.label))
+      }
+    ),
+    /* @__PURE__ */ jsx3(
+      ChevronDownIcon,
+      {
+        "aria-hidden": true,
+        className: "pointer-events-none absolute right-1.5 size-3.5 text-og-fg-subtle"
+      }
+    )
+  ] });
+}
+
+// src/components/chat-composer.tsx
+import { Fragment, jsx as jsx4, jsxs as jsxs3 } from "react/jsx-runtime";
 var ACTIVE_STATUSES = /* @__PURE__ */ new Set(["queued", "running"]);
 function ChatComposer({
   composer,
@@ -2098,6 +2168,9 @@ function ChatComposer({
   header,
   onPaste,
   attachments,
+  models,
+  selectedModel,
+  onSelectModel,
   className,
   commands = defaultCommands,
   commandContext,
@@ -2111,7 +2184,7 @@ function ChatComposer({
   const canSend = (composer.canSend || hasReadyAttachment) && !blockedByUpload && !composer.sending;
   const [dragging, setDragging] = useState8(false);
   const dragCarriesFiles = (event) => event.dataTransfer != null && [...event.dataTransfer.types].includes("Files");
-  const handleDragOver = useCallback15(
+  const handleDragOver = useCallback16(
     (event) => {
       if (!attachments || !dragCarriesFiles(event)) {
         return;
@@ -2121,7 +2194,7 @@ function ChatComposer({
     },
     [attachments]
   );
-  const handleDragLeave = useCallback15(
+  const handleDragLeave = useCallback16(
     (event) => {
       if (!attachments) {
         return;
@@ -2133,7 +2206,7 @@ function ChatComposer({
     },
     [attachments]
   );
-  const handleDrop = useCallback15(
+  const handleDrop = useCallback16(
     (event) => {
       if (!attachments || !dragCarriesFiles(event)) {
         return;
@@ -2149,8 +2222,8 @@ function ChatComposer({
   const [notice, setNotice] = useState8(null);
   const [helpOpen, setHelpOpen] = useState8(false);
   const [confirmState, setConfirmState] = useState8(null);
-  const listboxId = useId();
-  const resize = useCallback15(() => {
+  const listboxId = useId2();
+  const resize = useCallback16(() => {
     const textarea = textareaRef.current;
     if (!textarea) {
       return;
@@ -2161,7 +2234,7 @@ function ChatComposer({
   useEffect6(() => {
     resize();
   }, [composer.value, resize]);
-  const handlers = useMemo4(
+  const handlers = useMemo5(
     () => ({
       notice: (next) => {
         setNotice(next);
@@ -2219,14 +2292,14 @@ function ChatComposer({
       void composer.send();
     }
   };
-  const handlePaste = useCallback15(
+  const handlePaste = useCallback16(
     (event) => {
       onPaste?.(event);
       attachments?.addFromPaste(event);
     },
     [onPaste, attachments]
   );
-  const handleFileChange = useCallback15(
+  const handleFileChange = useCallback16(
     (event) => {
       if (event.target.files) {
         attachments?.addFiles(event.target.files);
@@ -2235,7 +2308,7 @@ function ChatComposer({
     },
     [attachments]
   );
-  const helpCommands = useMemo4(
+  const helpCommands = useMemo5(
     () => commands.filter((command) => {
       if (command.permission && commandContext) {
         const perms = commandContext.permissions;
@@ -2246,9 +2319,9 @@ function ChatComposer({
     [commands, commandContext]
   );
   const activeNotice = notice ?? (composer.error ? { tone: "error", message: composer.error.message || "Sending failed \u2014 your draft is still here. Try again." } : null);
-  return /* @__PURE__ */ jsxs2("div", { className: cn("og-root", className), children: [
-    /* @__PURE__ */ jsxs2("div", { className: "relative", children: [
-      paletteEnabled ? /* @__PURE__ */ jsx3(
+  return /* @__PURE__ */ jsxs3("div", { className: cn("og-root", className), children: [
+    /* @__PURE__ */ jsxs3("div", { className: "relative", children: [
+      paletteEnabled ? /* @__PURE__ */ jsx4(
         CommandPalette,
         {
           open: palette.open && confirmState === null,
@@ -2263,7 +2336,7 @@ function ChatComposer({
           listboxId
         }
       ) : null,
-      /* @__PURE__ */ jsxs2(
+      /* @__PURE__ */ jsxs3(
         "div",
         {
           onDragOver: attachments ? handleDragOver : void 0,
@@ -2278,7 +2351,7 @@ function ChatComposer({
             dragging && "border-dashed border-og-accent"
           ),
           children: [
-            dragging ? /* @__PURE__ */ jsx3(
+            dragging ? /* @__PURE__ */ jsx4(
               "div",
               {
                 "aria-hidden": true,
@@ -2286,15 +2359,15 @@ function ChatComposer({
                   "pointer-events-none absolute inset-0 z-10 flex items-center justify-center",
                   "rounded-og-lg bg-og-surface-1/85 text-sm font-medium text-og-accent backdrop-blur-[1px]"
                 ),
-                children: /* @__PURE__ */ jsxs2("span", { className: "inline-flex items-center gap-2", children: [
-                  /* @__PURE__ */ jsx3(PaperclipIcon, { className: "size-4" }),
+                children: /* @__PURE__ */ jsxs3("span", { className: "inline-flex items-center gap-2", children: [
+                  /* @__PURE__ */ jsx4(PaperclipIcon, { className: "size-4" }),
                   "Drop files to attach"
                 ] })
               }
             ) : null,
-            attachments && attachments.attachments.length > 0 ? /* @__PURE__ */ jsx3(AttachmentChips, { attachments: attachments.attachments, onRemove: attachments.remove }) : null,
+            attachments && attachments.attachments.length > 0 ? /* @__PURE__ */ jsx4(AttachmentChips, { attachments: attachments.attachments, onRemove: attachments.remove }) : null,
             header,
-            /* @__PURE__ */ jsx3(
+            /* @__PURE__ */ jsx4(
               "textarea",
               {
                 ref: textareaRef,
@@ -2326,17 +2399,17 @@ function ChatComposer({
                 )
               }
             ),
-            confirmState && pendingDangerCommand ? /* @__PURE__ */ jsx3(
+            confirmState && pendingDangerCommand ? /* @__PURE__ */ jsx4(
               ConfirmBar,
               {
                 command: pendingDangerCommand,
                 onCancel: () => confirmState.resolve(false),
                 onConfirm: () => confirmState.resolve(true)
               }
-            ) : /* @__PURE__ */ jsxs2("div", { className: "flex items-center justify-between gap-2 px-2.5 pb-2.5 pt-1", children: [
-              attachments || controlsStart ? /* @__PURE__ */ jsxs2("span", { className: "flex min-w-0 items-center gap-1.5", children: [
-                attachments ? /* @__PURE__ */ jsxs2(Fragment, { children: [
-                  /* @__PURE__ */ jsx3(
+            ) : /* @__PURE__ */ jsxs3("div", { className: "flex items-center justify-between gap-2 px-2.5 pb-2.5 pt-1", children: [
+              attachments || models || controlsStart ? /* @__PURE__ */ jsxs3("span", { className: "flex min-w-0 items-center gap-1.5", children: [
+                attachments ? /* @__PURE__ */ jsxs3(Fragment, { children: [
+                  /* @__PURE__ */ jsx4(
                     "input",
                     {
                       ref: fileInputRef,
@@ -2346,7 +2419,7 @@ function ChatComposer({
                       onChange: handleFileChange
                     }
                   ),
-                  /* @__PURE__ */ jsx3(
+                  /* @__PURE__ */ jsx4(
                     "button",
                     {
                       type: "button",
@@ -2359,14 +2432,23 @@ function ChatComposer({
                         "text-og-fg-muted transition-colors duration-150 hover:bg-og-surface-2 hover:text-og-fg",
                         "disabled:cursor-not-allowed disabled:opacity-50"
                       ),
-                      children: /* @__PURE__ */ jsx3(PaperclipIcon, { className: "size-4" })
+                      children: /* @__PURE__ */ jsx4(PaperclipIcon, { className: "size-4" })
                     }
                   )
                 ] }) : null,
+                models ? /* @__PURE__ */ jsx4(
+                  ModelPicker,
+                  {
+                    models,
+                    value: selectedModel,
+                    onChange: (modelId) => onSelectModel?.(modelId),
+                    disabled: disabled === true
+                  }
+                ) : null,
                 controlsStart
-              ] }) : /* @__PURE__ */ jsx3("span", { className: "px-1.5 text-[11px] text-og-fg-subtle max-sm:hidden", children: hint ?? "Enter to send \xB7 Shift+Enter for a new line \xB7 / for commands" }),
-              /* @__PURE__ */ jsxs2("span", { className: "flex items-center gap-1.5", children: [
-                /* @__PURE__ */ jsx3(AnimatePresence2, { initial: false, children: active ? /* @__PURE__ */ jsx3(
+              ] }) : /* @__PURE__ */ jsx4("span", { className: "px-1.5 text-[11px] text-og-fg-subtle max-sm:hidden", children: hint ?? "Enter to send \xB7 Shift+Enter for a new line \xB7 / for commands" }),
+              /* @__PURE__ */ jsxs3("span", { className: "flex items-center gap-1.5", children: [
+                /* @__PURE__ */ jsx4(AnimatePresence2, { initial: false, children: active ? /* @__PURE__ */ jsx4(
                   motion2.button,
                   {
                     type: "button",
@@ -2384,11 +2466,11 @@ function ChatComposer({
                       "hover:border-og-status-failed/50 hover:text-og-status-failed",
                       "disabled:opacity-50"
                     ),
-                    children: composer.interrupting ? /* @__PURE__ */ jsx3(LoaderCircleIcon, { className: "size-3.5 animate-og-spin" }) : /* @__PURE__ */ jsx3(SquareIcon, { className: "size-3 fill-current" })
+                    children: composer.interrupting ? /* @__PURE__ */ jsx4(LoaderCircleIcon, { className: "size-3.5 animate-og-spin" }) : /* @__PURE__ */ jsx4(SquareIcon, { className: "size-3 fill-current" })
                   },
                   "stop"
                 ) : null }),
-                /* @__PURE__ */ jsx3(
+                /* @__PURE__ */ jsx4(
                   "button",
                   {
                     type: "button",
@@ -2407,7 +2489,7 @@ function ChatComposer({
                       "hover:bg-og-accent-strong active:scale-95",
                       "disabled:cursor-not-allowed disabled:bg-og-surface-3 disabled:text-og-fg-subtle disabled:shadow-none"
                     ),
-                    children: composer.sending ? /* @__PURE__ */ jsx3(LoaderCircleIcon, { className: "size-4 animate-og-spin" }) : /* @__PURE__ */ jsx3(ArrowUpIcon, { className: "size-4" })
+                    children: composer.sending ? /* @__PURE__ */ jsx4(LoaderCircleIcon, { className: "size-4 animate-og-spin" }) : /* @__PURE__ */ jsx4(ArrowUpIcon, { className: "size-4" })
                   }
                 )
               ] })
@@ -2416,8 +2498,8 @@ function ChatComposer({
         }
       )
     ] }),
-    /* @__PURE__ */ jsx3(AnimatePresence2, { children: helpOpen ? /* @__PURE__ */ jsx3(HelpPanel, { commands: helpCommands, onClose: () => setHelpOpen(false) }) : null }),
-    /* @__PURE__ */ jsx3(AnimatePresence2, { children: activeNotice ? /* @__PURE__ */ jsx3(
+    /* @__PURE__ */ jsx4(AnimatePresence2, { children: helpOpen ? /* @__PURE__ */ jsx4(HelpPanel, { commands: helpCommands, onClose: () => setHelpOpen(false) }) : null }),
+    /* @__PURE__ */ jsx4(AnimatePresence2, { children: activeNotice ? /* @__PURE__ */ jsx4(
       motion2.p,
       {
         initial: { opacity: 0, height: 0 },
@@ -2439,7 +2521,7 @@ function ChatComposer({
   ] });
 }
 function ConfirmBar({ command, onCancel, onConfirm }) {
-  return /* @__PURE__ */ jsxs2(
+  return /* @__PURE__ */ jsxs3(
     "div",
     {
       role: "alertdialog",
@@ -2447,17 +2529,17 @@ function ConfirmBar({ command, onCancel, onConfirm }) {
       "data-testid": "danger-confirm",
       className: "flex items-center justify-between gap-2 px-2.5 pb-2.5 pt-1",
       children: [
-        /* @__PURE__ */ jsxs2("span", { className: "px-1.5 text-[12px] text-og-status-failed", children: [
+        /* @__PURE__ */ jsxs3("span", { className: "px-1.5 text-[12px] text-og-status-failed", children: [
           "Run ",
-          /* @__PURE__ */ jsxs2("span", { className: "font-mono", children: [
+          /* @__PURE__ */ jsxs3("span", { className: "font-mono", children: [
             "/",
             command.name
           ] }),
           "? ",
           command.description
         ] }),
-        /* @__PURE__ */ jsxs2("span", { className: "flex items-center gap-1.5", children: [
-          /* @__PURE__ */ jsx3(
+        /* @__PURE__ */ jsxs3("span", { className: "flex items-center gap-1.5", children: [
+          /* @__PURE__ */ jsx4(
             "button",
             {
               type: "button",
@@ -2466,7 +2548,7 @@ function ConfirmBar({ command, onCancel, onConfirm }) {
               children: "Cancel"
             }
           ),
-          /* @__PURE__ */ jsx3(
+          /* @__PURE__ */ jsx4(
             "button",
             {
               type: "button",
@@ -2482,7 +2564,7 @@ function ConfirmBar({ command, onCancel, onConfirm }) {
   );
 }
 function AttachmentChips({ attachments, onRemove }) {
-  return /* @__PURE__ */ jsx3("div", { className: "flex flex-wrap gap-2 border-b border-og-border px-3 py-2", children: attachments.map((attachment) => /* @__PURE__ */ jsxs2(
+  return /* @__PURE__ */ jsx4("div", { className: "flex flex-wrap gap-2 border-b border-og-border px-3 py-2", children: attachments.map((attachment) => /* @__PURE__ */ jsxs3(
     "div",
     {
       className: cn(
@@ -2490,10 +2572,10 @@ function AttachmentChips({ attachments, onRemove }) {
         "border-og-border bg-og-surface-2 text-xs"
       ),
       children: [
-        attachment.previewUrl ? /* @__PURE__ */ jsx3("img", { src: attachment.previewUrl, alt: "", className: "size-8 shrink-0 rounded object-cover" }) : attachment.contentType.startsWith("image/") ? /* @__PURE__ */ jsx3(ImageIcon, { className: "size-4 shrink-0 text-og-fg-muted" }) : /* @__PURE__ */ jsx3(FileIcon, { className: "size-4 shrink-0 text-og-fg-muted" }),
-        /* @__PURE__ */ jsxs2("div", { className: "min-w-0 flex-1", children: [
-          /* @__PURE__ */ jsx3("div", { className: "truncate font-medium text-og-fg", children: attachment.name }),
-          /* @__PURE__ */ jsx3(
+        attachment.previewUrl ? /* @__PURE__ */ jsx4("img", { src: attachment.previewUrl, alt: "", className: "size-8 shrink-0 rounded object-cover" }) : attachment.contentType.startsWith("image/") ? /* @__PURE__ */ jsx4(ImageIcon, { className: "size-4 shrink-0 text-og-fg-muted" }) : /* @__PURE__ */ jsx4(FileIcon, { className: "size-4 shrink-0 text-og-fg-muted" }),
+        /* @__PURE__ */ jsxs3("div", { className: "min-w-0 flex-1", children: [
+          /* @__PURE__ */ jsx4("div", { className: "truncate font-medium text-og-fg", children: attachment.name }),
+          /* @__PURE__ */ jsx4(
             "div",
             {
               className: cn(
@@ -2504,15 +2586,15 @@ function AttachmentChips({ attachments, onRemove }) {
             }
           )
         ] }),
-        attachment.status === "uploading" ? /* @__PURE__ */ jsx3(LoaderCircleIcon, { className: "size-3.5 shrink-0 animate-og-spin" }) : null,
-        /* @__PURE__ */ jsx3(
+        attachment.status === "uploading" ? /* @__PURE__ */ jsx4(LoaderCircleIcon, { className: "size-3.5 shrink-0 animate-og-spin" }) : null,
+        /* @__PURE__ */ jsx4(
           "button",
           {
             type: "button",
             onClick: () => onRemove(attachment.id),
             className: "shrink-0 rounded-og-xs p-1 text-og-fg-muted hover:bg-og-surface-1 hover:text-og-fg",
             "aria-label": `Remove ${attachment.name}`,
-            children: /* @__PURE__ */ jsx3(XIcon, { className: "size-3.5" })
+            children: /* @__PURE__ */ jsx4(XIcon, { className: "size-3.5" })
           }
         )
       ]
@@ -2521,7 +2603,7 @@ function AttachmentChips({ attachments, onRemove }) {
   )) });
 }
 function HelpPanel({ commands, onClose }) {
-  return /* @__PURE__ */ jsxs2(
+  return /* @__PURE__ */ jsxs3(
     motion2.div,
     {
       initial: { opacity: 0, height: 0 },
@@ -2529,20 +2611,20 @@ function HelpPanel({ commands, onClose }) {
       exit: { opacity: 0, height: 0 },
       className: "mt-2 overflow-hidden rounded-og-lg border border-og-border bg-og-surface-2",
       children: [
-        /* @__PURE__ */ jsxs2("div", { className: "flex items-center justify-between border-b border-og-border px-3 py-1.5", children: [
-          /* @__PURE__ */ jsx3("span", { className: "text-[12px] font-medium text-og-fg", children: "Commands" }),
-          /* @__PURE__ */ jsx3("button", { type: "button", onClick: onClose, className: "text-[11px] text-og-fg-subtle hover:text-og-fg", children: "Close" })
+        /* @__PURE__ */ jsxs3("div", { className: "flex items-center justify-between border-b border-og-border px-3 py-1.5", children: [
+          /* @__PURE__ */ jsx4("span", { className: "text-[12px] font-medium text-og-fg", children: "Commands" }),
+          /* @__PURE__ */ jsx4("button", { type: "button", onClick: onClose, className: "text-[11px] text-og-fg-subtle hover:text-og-fg", children: "Close" })
         ] }),
-        /* @__PURE__ */ jsx3("ul", { className: "py-1", children: commands.map((command) => {
+        /* @__PURE__ */ jsx4("ul", { className: "py-1", children: commands.map((command) => {
           const hint = argHint(command.args);
-          return /* @__PURE__ */ jsxs2("li", { className: "flex items-baseline gap-2 px-3 py-1", children: [
-            /* @__PURE__ */ jsxs2("span", { className: "font-mono text-[12px] text-og-accent", children: [
+          return /* @__PURE__ */ jsxs3("li", { className: "flex items-baseline gap-2 px-3 py-1", children: [
+            /* @__PURE__ */ jsxs3("span", { className: "font-mono text-[12px] text-og-accent", children: [
               "/",
               command.name,
-              hint ? /* @__PURE__ */ jsx3("span", { className: "ml-1 text-og-fg-subtle", children: hint }) : null
+              hint ? /* @__PURE__ */ jsx4("span", { className: "ml-1 text-og-fg-subtle", children: hint }) : null
             ] }),
-            /* @__PURE__ */ jsx3("span", { className: "text-[12px] text-og-fg-muted", children: command.description }),
-            command.danger ? /* @__PURE__ */ jsx3("span", { className: "ml-auto rounded-og-xs bg-og-status-failed/15 px-1 text-[10px] uppercase tracking-wide text-og-status-failed", children: "danger" }) : null
+            /* @__PURE__ */ jsx4("span", { className: "text-[12px] text-og-fg-muted", children: command.description }),
+            command.danger ? /* @__PURE__ */ jsx4("span", { className: "ml-auto rounded-og-xs bg-og-status-failed/15 px-1 text-[10px] uppercase tracking-wide text-og-status-failed", children: "danger" }) : null
           ] }, command.name);
         }) })
       ]
@@ -2562,11 +2644,94 @@ import {
   WrenchIcon
 } from "lucide-react";
 import { AnimatePresence as AnimatePresence3, motion as motion3 } from "motion/react";
-import { useEffect as useEffect7, useMemo as useMemo5, useRef as useRef8, useState as useState9 } from "react";
+import { useEffect as useEffect7, useMemo as useMemo6, useRef as useRef8, useState as useState9 } from "react";
 import { Collapsible } from "radix-ui";
 
+// src/components/markdown.tsx
+import { memo } from "react";
+import ReactMarkdown from "react-markdown";
+import remarkGfm from "remark-gfm";
+import { jsx as jsx5 } from "react/jsx-runtime";
+var components = {
+  h1: ({ children, ...props }) => /* @__PURE__ */ jsx5("h1", { className: "mt-5 mb-2.5 text-xl font-semibold tracking-tight text-og-fg first:mt-0", ...props, children }),
+  h2: ({ children, ...props }) => /* @__PURE__ */ jsx5("h2", { className: "mt-5 mb-2 text-lg font-semibold tracking-tight text-og-fg first:mt-0", ...props, children }),
+  h3: ({ children, ...props }) => /* @__PURE__ */ jsx5("h3", { className: "mt-4 mb-1.5 text-[15px] font-semibold tracking-tight text-og-fg first:mt-0", ...props, children }),
+  h4: ({ children, ...props }) => /* @__PURE__ */ jsx5("h4", { className: "mt-4 mb-1.5 text-sm font-semibold uppercase tracking-[0.04em] text-og-fg-muted first:mt-0", ...props, children }),
+  p: ({ children, ...props }) => /* @__PURE__ */ jsx5("p", { className: "my-2.5 leading-7 first:mt-0 last:mb-0", ...props, children }),
+  strong: ({ children, ...props }) => /* @__PURE__ */ jsx5("strong", { className: "font-semibold text-og-fg", ...props, children }),
+  em: ({ children, ...props }) => /* @__PURE__ */ jsx5("em", { className: "italic", ...props, children }),
+  a: ({ children, ...props }) => /* @__PURE__ */ jsx5(
+    "a",
+    {
+      className: "break-words font-medium text-og-accent underline-offset-2 hover:underline",
+      target: "_blank",
+      rel: "noreferrer noopener",
+      ...props,
+      children
+    }
+  ),
+  ul: ({ children, ...props }) => /* @__PURE__ */ jsx5("ul", { className: "my-2.5 ml-5 flex list-disc flex-col gap-1 marker:text-og-fg-subtle first:mt-0 last:mb-0", ...props, children }),
+  ol: ({ children, ...props }) => /* @__PURE__ */ jsx5("ol", { className: "my-2.5 ml-5 flex list-decimal flex-col gap-1 marker:text-og-fg-subtle first:mt-0 last:mb-0", ...props, children }),
+  // GFM task-list items carry a leading checkbox <input>; `list-none` + a
+  // negative margin pull the checkbox back to the bullet column so it aligns
+  // with the text.
+  li: ({ children, ...props }) => /* @__PURE__ */ jsx5("li", { className: "leading-7 marker:text-og-fg-subtle [&>ul]:my-1 [&>ol]:my-1 [&:has(>input)]:list-none [&:has(>input)]:-ml-5", ...props, children }),
+  input: ({ type, ...props }) => type === "checkbox" ? /* @__PURE__ */ jsx5(
+    "input",
+    {
+      ...props,
+      type: "checkbox",
+      disabled: true,
+      className: "mr-2 size-3.5 translate-y-[2px] cursor-default appearance-none rounded-[3px] border border-og-border bg-og-surface-1 align-baseline checked:border-og-accent checked:bg-og-accent checked:[background-image:url('data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2012%2012%22%3E%3Cpath%20fill%3D%22none%22%20stroke%3D%22white%22%20stroke-width%3D%221.6%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%20d%3D%22M2.5%206.2l2.2%202.2%204.6-4.8%22%2F%3E%3C%2Fsvg%3E')] checked:bg-[length:11px_11px] checked:bg-center checked:bg-no-repeat"
+    }
+  ) : /* @__PURE__ */ jsx5("input", { type, ...props }),
+  blockquote: ({ children, ...props }) => /* @__PURE__ */ jsx5(
+    "blockquote",
+    {
+      className: "my-3 border-l-2 border-og-border-strong pl-3.5 text-og-fg-muted [&>p]:my-1.5 first:mt-0 last:mb-0",
+      ...props,
+      children
+    }
+  ),
+  hr: (props) => /* @__PURE__ */ jsx5("hr", { className: "my-4 border-0 border-t border-og-border", ...props }),
+  // Inline `code` vs fenced code blocks. react-markdown v10 no longer passes an
+  // `inline` flag; a fenced block is a <code> whose parent is <pre> (styled by
+  // the `pre` renderer), so a `code` reaching here is treated as inline.
+  code: ({ children, className: _className, ...props }) => /* @__PURE__ */ jsx5(
+    "code",
+    {
+      className: "rounded-og-xs border border-og-border bg-og-surface-1 px-1 py-0.5 font-og-mono text-[0.85em] text-og-fg",
+      ...props,
+      children
+    }
+  ),
+  // Fenced code blocks — mirror the timeline's PayloadBlock <pre> styling for
+  // visual consistency (bordered, scrollable, mono, surface background).
+  pre: ({ children, ...props }) => /* @__PURE__ */ jsx5(
+    "pre",
+    {
+      className: "my-3 max-h-96 overflow-auto rounded-og-md border border-og-border bg-og-bg/60 p-3 font-og-mono text-[12.5px] leading-5 text-og-fg-muted [&>code]:border-0 [&>code]:bg-transparent [&>code]:p-0 [&>code]:text-inherit first:mt-0 last:mb-0",
+      ...props,
+      children
+    }
+  ),
+  table: ({ children, ...props }) => /* @__PURE__ */ jsx5("div", { className: "my-3 max-w-full overflow-x-auto rounded-og-md border border-og-border first:mt-0 last:mb-0", children: /* @__PURE__ */ jsx5("table", { className: "w-full border-collapse text-[13px]", ...props, children }) }),
+  thead: ({ children, ...props }) => /* @__PURE__ */ jsx5("thead", { className: "bg-og-surface-1", ...props, children }),
+  th: ({ children, ...props }) => /* @__PURE__ */ jsx5("th", { className: "border-b border-og-border px-3 py-1.5 text-left font-medium text-og-fg", ...props, children }),
+  td: ({ children, ...props }) => /* @__PURE__ */ jsx5("td", { className: "border-b border-og-border px-3 py-1.5 align-top text-og-fg-muted [tr:last-child>&]:border-b-0", ...props, children }),
+  img: ({ alt, ...props }) => /* @__PURE__ */ jsx5("img", { alt: alt ?? "", className: "my-3 max-w-full rounded-og-md border border-og-border", ...props })
+};
+function MarkdownImpl({ children, className }) {
+  return (
+    // `min-w-0` lets the prose shrink inside flex parents (message bubbles) so
+    // long links and code blocks wrap/scroll instead of forcing overflow.
+    /* @__PURE__ */ jsx5("div", { className: cn("min-w-0 break-words", className), children: /* @__PURE__ */ jsx5(ReactMarkdown, { remarkPlugins: [remarkGfm], components, children }) })
+  );
+}
+var Markdown = memo(MarkdownImpl);
+
 // src/components/session-status.tsx
-import { jsx as jsx4, jsxs as jsxs3 } from "react/jsx-runtime";
+import { jsx as jsx6, jsxs as jsxs4 } from "react/jsx-runtime";
 var SESSION_STATUS_META = {
   queued: {
     label: "Queued",
@@ -2607,7 +2772,7 @@ var SESSION_STATUS_META = {
 };
 function SessionStatus({ status, label, size = "md", className }) {
   const meta = SESSION_STATUS_META[status];
-  return /* @__PURE__ */ jsxs3(
+  return /* @__PURE__ */ jsxs4(
     "span",
     {
       "data-status": status,
@@ -2618,7 +2783,7 @@ function SessionStatus({ status, label, size = "md", className }) {
         className
       ),
       children: [
-        /* @__PURE__ */ jsx4(StatusDot, { status, className: size === "sm" ? "size-1" : "size-1.5" }),
+        /* @__PURE__ */ jsx6(StatusDot, { status, className: size === "sm" ? "size-1" : "size-1.5" }),
         label ?? meta.label
       ]
     }
@@ -2626,11 +2791,11 @@ function SessionStatus({ status, label, size = "md", className }) {
 }
 function StatusDot({ status, className }) {
   const meta = SESSION_STATUS_META[status];
-  return /* @__PURE__ */ jsx4("span", { className: cn("relative inline-flex size-1.5 shrink-0 rounded-full", meta.dotClassName, className), children: meta.pulse ? /* @__PURE__ */ jsx4("span", { className: cn("absolute inset-0 animate-og-pulse rounded-full", meta.dotClassName) }) : null });
+  return /* @__PURE__ */ jsx6("span", { className: cn("relative inline-flex size-1.5 shrink-0 rounded-full", meta.dotClassName, className), children: meta.pulse ? /* @__PURE__ */ jsx6("span", { className: cn("absolute inset-0 animate-og-pulse rounded-full", meta.dotClassName) }) : null });
 }
 
 // src/components/message-timeline.tsx
-import { jsx as jsx5, jsxs as jsxs4 } from "react/jsx-runtime";
+import { Fragment as Fragment2, jsx as jsx7, jsxs as jsxs5 } from "react/jsx-runtime";
 function MessageTimeline({
   events,
   items,
@@ -2641,8 +2806,8 @@ function MessageTimeline({
   emptyState,
   className
 }) {
-  const resolvedItems = useMemo5(() => items ?? buildTimeline(events ?? []), [items, events]);
-  const groups = useMemo5(() => groupTimeline(resolvedItems), [resolvedItems]);
+  const resolvedItems = useMemo6(() => items ?? buildTimeline(events ?? []), [items, events]);
+  const groups = useMemo6(() => groupTimeline(resolvedItems), [resolvedItems]);
   const scrollRef = useRef8(null);
   const [pinned, setPinned] = useState9(true);
   const lastItem = resolvedItems[resolvedItems.length - 1];
@@ -2661,15 +2826,15 @@ function MessageTimeline({
     }
     setPinned(node.scrollHeight - node.scrollTop - node.clientHeight < 48);
   };
-  return /* @__PURE__ */ jsxs4("div", { className: cn("og-root relative min-h-0", className), children: [
-    /* @__PURE__ */ jsx5("div", { ref: scrollRef, onScroll, className: "h-full overflow-y-auto overscroll-contain px-4 py-6 sm:px-6", children: /* @__PURE__ */ jsxs4("div", { className: "mx-auto flex w-full max-w-3xl flex-col gap-5", children: [
-      groups.length === 0 && !working ? emptyState ?? /* @__PURE__ */ jsx5("p", { className: "py-10 text-center text-sm text-og-fg-subtle", children: "No activity yet." }) : null,
+  return /* @__PURE__ */ jsxs5("div", { className: cn("og-root relative min-h-0", className), children: [
+    /* @__PURE__ */ jsx7("div", { ref: scrollRef, onScroll, className: "h-full overflow-y-auto overscroll-contain px-4 py-6 sm:px-6", children: /* @__PURE__ */ jsxs5("div", { className: "mx-auto flex w-full max-w-3xl flex-col gap-5", children: [
+      groups.length === 0 && !working ? emptyState ?? /* @__PURE__ */ jsx7("p", { className: "py-10 text-center text-sm text-og-fg-subtle", children: "No activity yet." }) : null,
       groups.map(
-        (group) => group.kind === "activity" ? /* @__PURE__ */ jsx5(ActivityCluster, { items: group.items, onOpenSession }, group.id) : /* @__PURE__ */ jsx5(TimelineRow, { item: group.item, renderMessageText }, group.item.id)
+        (group) => group.kind === "activity" ? /* @__PURE__ */ jsx7(ActivityCluster, { items: group.items, onOpenSession }, group.id) : /* @__PURE__ */ jsx7(TimelineRow, { item: group.item, renderMessageText }, group.item.id)
       ),
-      working ? /* @__PURE__ */ jsx5("div", { className: "animate-og-enter flex items-center gap-2 text-sm", children: /* @__PURE__ */ jsx5("span", { className: "og-shimmer-text font-medium", children: "Working\u2026" }) }) : null
+      working ? /* @__PURE__ */ jsx7("div", { className: "animate-og-enter flex items-center gap-2 text-sm", children: /* @__PURE__ */ jsx7("span", { className: "og-shimmer-text font-medium", children: "Working\u2026" }) }) : null
     ] }) }),
-    /* @__PURE__ */ jsx5(AnimatePresence3, { children: !pinned && autoFollow ? /* @__PURE__ */ jsxs4(
+    /* @__PURE__ */ jsx7(AnimatePresence3, { children: !pinned && autoFollow ? /* @__PURE__ */ jsxs5(
       motion3.button,
       {
         type: "button",
@@ -2691,7 +2856,7 @@ function MessageTimeline({
           "hover:border-og-border-strong"
         ),
         children: [
-          /* @__PURE__ */ jsx5(ArrowDownIcon, { className: "size-3.5" }),
+          /* @__PURE__ */ jsx7(ArrowDownIcon, { className: "size-3.5" }),
           "Jump to latest"
         ]
       }
@@ -2704,15 +2869,15 @@ function TimelineRow({
 }) {
   switch (item.kind) {
     case "user-message":
-      return /* @__PURE__ */ jsx5(UserMessageRow, { item, renderMessageText });
+      return /* @__PURE__ */ jsx7(UserMessageRow, { item, renderMessageText });
     case "agent-message":
-      return /* @__PURE__ */ jsx5(AgentMessageRow, { item, renderMessageText });
+      return /* @__PURE__ */ jsx7(AgentMessageRow, { item, renderMessageText });
     case "session-status":
-      return /* @__PURE__ */ jsx5(SessionStatusRow, { item });
+      return /* @__PURE__ */ jsx7(SessionStatusRow, { item });
     case "goal":
-      return /* @__PURE__ */ jsx5(GoalRow, { item });
+      return /* @__PURE__ */ jsx7(GoalRow, { item });
     case "notice":
-      return /* @__PURE__ */ jsx5(NoticeRow, { item });
+      return /* @__PURE__ */ jsx7(NoticeRow, { item });
     default:
       return null;
   }
@@ -2721,35 +2886,44 @@ function UserMessageRow({
   item,
   renderMessageText
 }) {
-  return /* @__PURE__ */ jsx5("div", { className: "animate-og-enter flex justify-end", children: /* @__PURE__ */ jsx5("div", { className: "max-w-[85%] rounded-og-lg rounded-br-og-xs border border-og-border bg-og-surface-2 px-4 py-2.5 text-[15px] leading-6 text-og-fg", children: renderMessageText ? renderMessageText(item.text, item) : /* @__PURE__ */ jsx5("span", { className: "whitespace-pre-wrap", children: item.text }) }) });
+  return /* @__PURE__ */ jsx7("div", { className: "animate-og-enter flex justify-end", children: /* @__PURE__ */ jsx7("div", { className: "max-w-[85%] min-w-0 rounded-og-lg rounded-br-og-xs border border-og-border bg-og-surface-2 px-4 py-2.5 text-[15px] leading-6 text-og-fg", children: renderMessageText ? renderMessageText(item.text, item) : /* @__PURE__ */ jsx7(Markdown, { children: item.text }) }) });
 }
 function AgentMessageRow({
   item,
   renderMessageText
 }) {
-  return /* @__PURE__ */ jsxs4("div", { className: "animate-og-enter text-[15px] leading-7 text-og-fg", children: [
-    renderMessageText ? renderMessageText(item.text, item) : /* @__PURE__ */ jsx5("span", { className: "whitespace-pre-wrap", children: item.text }),
-    item.streaming ? /* @__PURE__ */ jsx5("span", { className: "ml-0.5 inline-block h-[1.1em] w-[2px] translate-y-[3px] animate-og-blink rounded-full bg-og-accent", "aria-hidden": true }) : null
-  ] });
+  const caret = item.streaming ? /* @__PURE__ */ jsx7("span", { className: "ml-0.5 inline-block h-[1.1em] w-[2px] translate-y-[3px] animate-og-blink rounded-full bg-og-accent", "aria-hidden": true }) : null;
+  return /* @__PURE__ */ jsx7("div", { className: "animate-og-enter min-w-0 text-[15px] leading-7 text-og-fg", children: renderMessageText ? /* @__PURE__ */ jsxs5(Fragment2, { children: [
+    renderMessageText(item.text, item),
+    caret
+  ] }) : (
+    // While streaming, let the caret ride the end of the last rendered line:
+    // the trailing block (usually a <p>) flows inline so the caret sits on
+    // its baseline instead of dropping to a new line.
+    /* @__PURE__ */ jsxs5("div", { className: item.streaming ? "[&_>div>:last-child]:inline" : void 0, children: [
+      /* @__PURE__ */ jsx7(Markdown, { children: item.text }),
+      caret
+    ] })
+  ) });
 }
 function SessionStatusRow({ item }) {
   const meta = SESSION_STATUS_META[item.status];
-  return /* @__PURE__ */ jsxs4("div", { className: "animate-og-enter flex items-center gap-3 text-[11px] text-og-fg-subtle", role: "status", children: [
-    /* @__PURE__ */ jsx5("span", { className: "h-px flex-1 bg-og-border" }),
-    /* @__PURE__ */ jsxs4("span", { className: "inline-flex items-center gap-1.5", children: [
-      /* @__PURE__ */ jsx5(StatusDot, { status: item.status, className: "size-1" }),
+  return /* @__PURE__ */ jsxs5("div", { className: "animate-og-enter flex items-center gap-3 text-[11px] text-og-fg-subtle", role: "status", children: [
+    /* @__PURE__ */ jsx7("span", { className: "h-px flex-1 bg-og-border" }),
+    /* @__PURE__ */ jsxs5("span", { className: "inline-flex items-center gap-1.5", children: [
+      /* @__PURE__ */ jsx7(StatusDot, { status: item.status, className: "size-1" }),
       meta.label.toLowerCase(),
       " \xB7 ",
       formatRelativeTime(item.occurredAt)
     ] }),
-    /* @__PURE__ */ jsx5("span", { className: "h-px flex-1 bg-og-border" })
+    /* @__PURE__ */ jsx7("span", { className: "h-px flex-1 bg-og-border" })
   ] });
 }
 function GoalRow({ item }) {
   const label = item.action === "set" ? "Goal set" : item.action === "updated" ? "Goal updated" : item.action === "completed" ? "Goal completed" : item.action === "paused" ? "Goal paused" : item.action === "resumed" ? "Goal resumed" : "Continuing toward the goal";
-  return /* @__PURE__ */ jsx5("div", { className: "animate-og-enter flex justify-center", children: /* @__PURE__ */ jsxs4("span", { className: "inline-flex max-w-full items-center gap-1.5 rounded-full border border-og-border bg-og-surface-1 px-3 py-1 text-xs text-og-fg-muted", children: [
-    /* @__PURE__ */ jsx5(TargetIcon, { className: "size-3.5 shrink-0 text-og-accent" }),
-    /* @__PURE__ */ jsxs4("span", { className: "truncate", children: [
+  return /* @__PURE__ */ jsx7("div", { className: "animate-og-enter flex justify-center", children: /* @__PURE__ */ jsxs5("span", { className: "inline-flex max-w-full items-center gap-1.5 rounded-full border border-og-border bg-og-surface-1 px-3 py-1 text-xs text-og-fg-muted", children: [
+    /* @__PURE__ */ jsx7(TargetIcon, { className: "size-3.5 shrink-0 text-og-accent" }),
+    /* @__PURE__ */ jsxs5("span", { className: "truncate", children: [
       label,
       item.text ? `: ${truncate(item.text, 90)}` : ""
     ] })
@@ -2757,25 +2931,25 @@ function GoalRow({ item }) {
 }
 function NoticeRow({ item }) {
   const tone = item.tone === "failed" ? "border-og-status-failed/35 bg-og-status-failed/10 text-og-status-failed" : item.tone === "waiting" ? "border-og-status-waiting/35 bg-og-status-waiting/10 text-og-status-waiting" : "border-og-border bg-og-surface-1 text-og-fg-muted";
-  return /* @__PURE__ */ jsxs4("div", { className: cn("animate-og-enter flex items-start gap-2.5 rounded-og-md border px-3.5 py-2.5 text-sm", tone), role: "status", children: [
-    /* @__PURE__ */ jsx5(TriangleAlertIcon, { className: cn("mt-0.5 size-4 shrink-0", item.tone === "cancelled" && "opacity-60") }),
-    /* @__PURE__ */ jsx5("span", { className: "min-w-0 whitespace-pre-wrap break-words", children: item.text })
+  return /* @__PURE__ */ jsxs5("div", { className: cn("animate-og-enter flex items-start gap-2.5 rounded-og-md border px-3.5 py-2.5 text-sm", tone), role: "status", children: [
+    /* @__PURE__ */ jsx7(TriangleAlertIcon, { className: cn("mt-0.5 size-4 shrink-0", item.tone === "cancelled" && "opacity-60") }),
+    /* @__PURE__ */ jsx7("span", { className: "min-w-0 whitespace-pre-wrap break-words", children: item.text })
   ] });
 }
 function ActivityCluster({
   items,
   onOpenSession
 }) {
-  return /* @__PURE__ */ jsx5("div", { className: "animate-og-enter flex flex-col gap-1.5 border-l-2 border-og-border pl-3 sm:pl-4", children: items.map((item) => {
+  return /* @__PURE__ */ jsx7("div", { className: "animate-og-enter flex flex-col gap-1.5 border-l-2 border-og-border pl-3 sm:pl-4", children: items.map((item) => {
     switch (item.kind) {
       case "reasoning":
-        return /* @__PURE__ */ jsx5(ReasoningRow, { item }, item.id);
+        return /* @__PURE__ */ jsx7(ReasoningRow, { item }, item.id);
       case "tool-call":
-        return /* @__PURE__ */ jsx5(ToolCallRow, { item }, item.id);
+        return /* @__PURE__ */ jsx7(ToolCallRow, { item }, item.id);
       case "worker":
-        return /* @__PURE__ */ jsx5(WorkerRow, { item, onOpenSession }, item.id);
+        return /* @__PURE__ */ jsx7(WorkerRow, { item, onOpenSession }, item.id);
       case "sandbox":
-        return /* @__PURE__ */ jsx5(SandboxRow, { item }, item.id);
+        return /* @__PURE__ */ jsx7(SandboxRow, { item }, item.id);
     }
   }) });
 }
@@ -2788,8 +2962,8 @@ function ActivityDisclosure({
   children
 }) {
   const [open, setOpen] = useState9(false);
-  return /* @__PURE__ */ jsxs4(Collapsible.Root, { open, onOpenChange: setOpen, children: [
-    /* @__PURE__ */ jsxs4(
+  return /* @__PURE__ */ jsxs5(Collapsible.Root, { open, onOpenChange: setOpen, children: [
+    /* @__PURE__ */ jsxs5(
       Collapsible.Trigger,
       {
         className: cn(
@@ -2797,15 +2971,15 @@ function ActivityDisclosure({
           "text-og-fg-muted transition-colors duration-150 hover:bg-og-surface-1 hover:text-og-fg"
         ),
         children: [
-          /* @__PURE__ */ jsx5(ChevronRightIcon, { className: "size-3.5 shrink-0 text-og-fg-subtle transition-transform duration-150 group-data-[state=open]:rotate-90" }),
-          /* @__PURE__ */ jsx5("span", { className: cn("shrink-0", failed ? "text-og-status-failed" : running ? "text-og-status-running" : "text-og-fg-subtle"), children: icon }),
-          /* @__PURE__ */ jsx5("span", { className: cn("shrink-0 font-medium", running && "og-shimmer-text", failed && "text-og-status-failed"), children: title }),
-          preview ? /* @__PURE__ */ jsx5("span", { className: "min-w-0 flex-1 truncate font-og-mono text-xs text-og-fg-subtle", children: preview }) : null,
-          running ? /* @__PURE__ */ jsx5("span", { className: "ml-auto size-1.5 shrink-0 animate-og-pulse rounded-full bg-og-status-running" }) : null
+          /* @__PURE__ */ jsx7(ChevronRightIcon, { className: "size-3.5 shrink-0 text-og-fg-subtle transition-transform duration-150 group-data-[state=open]:rotate-90" }),
+          /* @__PURE__ */ jsx7("span", { className: cn("shrink-0", failed ? "text-og-status-failed" : running ? "text-og-status-running" : "text-og-fg-subtle"), children: icon }),
+          /* @__PURE__ */ jsx7("span", { className: cn("shrink-0 font-medium", running && "og-shimmer-text", failed && "text-og-status-failed"), children: title }),
+          preview ? /* @__PURE__ */ jsx7("span", { className: "min-w-0 flex-1 truncate font-og-mono text-xs text-og-fg-subtle", children: preview }) : null,
+          running ? /* @__PURE__ */ jsx7("span", { className: "ml-auto size-1.5 shrink-0 animate-og-pulse rounded-full bg-og-status-running" }) : null
         ]
       }
     ),
-    /* @__PURE__ */ jsx5(Collapsible.Content, { className: "overflow-hidden", children: /* @__PURE__ */ jsx5("div", { className: "mt-1 mb-1.5 ml-7 flex flex-col gap-2", children }) })
+    /* @__PURE__ */ jsx7(Collapsible.Content, { className: "overflow-hidden", children: /* @__PURE__ */ jsx7("div", { className: "mt-1 mb-1.5 ml-7 flex flex-col gap-2", children }) })
   ] });
 }
 function PayloadBlock({ label, value }) {
@@ -2813,50 +2987,50 @@ function PayloadBlock({ label, value }) {
   if (!text) {
     return null;
   }
-  return /* @__PURE__ */ jsxs4("div", { className: "min-w-0", children: [
-    /* @__PURE__ */ jsx5("p", { className: "mb-1 text-[10px] font-medium uppercase tracking-[0.08em] text-og-fg-subtle", children: label }),
-    /* @__PURE__ */ jsx5("pre", { className: "max-h-64 overflow-auto rounded-og-sm border border-og-border bg-og-bg/60 p-2.5 font-og-mono text-xs leading-5 text-og-fg-muted", children: text })
+  return /* @__PURE__ */ jsxs5("div", { className: "min-w-0", children: [
+    /* @__PURE__ */ jsx7("p", { className: "mb-1 text-[10px] font-medium uppercase tracking-[0.08em] text-og-fg-subtle", children: label }),
+    /* @__PURE__ */ jsx7("pre", { className: "max-h-64 overflow-auto rounded-og-sm border border-og-border bg-og-bg/60 p-2.5 font-og-mono text-xs leading-5 text-og-fg-muted", children: text })
   ] });
 }
 function ReasoningRow({ item }) {
-  return /* @__PURE__ */ jsx5(
+  return /* @__PURE__ */ jsx7(
     ActivityDisclosure,
     {
-      icon: /* @__PURE__ */ jsx5(BrainIcon, { className: "size-3.5" }),
+      icon: /* @__PURE__ */ jsx7(BrainIcon, { className: "size-3.5" }),
       title: item.streaming ? "Thinking" : "Thought",
       running: item.streaming,
       preview: truncate(item.text, 110),
-      children: /* @__PURE__ */ jsx5("p", { className: "whitespace-pre-wrap text-[13px] leading-6 text-og-fg-muted", children: item.text })
+      children: /* @__PURE__ */ jsx7("p", { className: "whitespace-pre-wrap text-[13px] leading-6 text-og-fg-muted", children: item.text })
     }
   );
 }
 function ToolCallRow({ item }) {
-  return /* @__PURE__ */ jsxs4(
+  return /* @__PURE__ */ jsxs5(
     ActivityDisclosure,
     {
-      icon: /* @__PURE__ */ jsx5(WrenchIcon, { className: "size-3.5" }),
+      icon: /* @__PURE__ */ jsx7(WrenchIcon, { className: "size-3.5" }),
       title: toolDisplayName(item.name),
       running: item.status === "running",
       preview: compactPayloadPreview(item.arguments),
       children: [
-        /* @__PURE__ */ jsx5(PayloadBlock, { label: "Arguments", value: item.arguments }),
-        item.status === "complete" ? /* @__PURE__ */ jsx5(PayloadBlock, { label: "Output", value: item.output }) : null
+        /* @__PURE__ */ jsx7(PayloadBlock, { label: "Arguments", value: item.arguments }),
+        item.status === "complete" ? /* @__PURE__ */ jsx7(PayloadBlock, { label: "Output", value: item.output }) : null
       ]
     }
   );
 }
 function SandboxRow({ item }) {
-  return /* @__PURE__ */ jsxs4(
+  return /* @__PURE__ */ jsxs5(
     ActivityDisclosure,
     {
-      icon: /* @__PURE__ */ jsx5(SquareTerminalIcon, { className: "size-3.5" }),
+      icon: /* @__PURE__ */ jsx7(SquareTerminalIcon, { className: "size-3.5" }),
       title: toolDisplayName(item.name),
       running: item.status === "running",
       failed: item.status === "failed",
       preview: item.command ?? void 0,
       children: [
-        item.command ? /* @__PURE__ */ jsx5(PayloadBlock, { label: "Command", value: item.command }) : null,
-        item.output ? /* @__PURE__ */ jsx5(PayloadBlock, { label: "Output", value: item.output }) : null
+        item.command ? /* @__PURE__ */ jsx7(PayloadBlock, { label: "Command", value: item.command }) : null,
+        item.output ? /* @__PURE__ */ jsx7(PayloadBlock, { label: "Output", value: item.output }) : null
       ]
     }
   );
@@ -2864,26 +3038,26 @@ function SandboxRow({ item }) {
 function WorkerRow({ item, onOpenSession }) {
   const running = item.status === "running";
   const title = item.action === "spawn" ? running ? "Spawning worker" : "Worker spawned" : running ? "Messaging worker" : "Worker messaged";
-  return /* @__PURE__ */ jsxs4("div", { className: "my-0.5 flex items-start gap-3 rounded-og-md border border-og-border bg-og-surface-1 p-3 shadow-og-sm", children: [
-    /* @__PURE__ */ jsx5(
+  return /* @__PURE__ */ jsxs5("div", { className: "my-0.5 flex items-start gap-3 rounded-og-md border border-og-border bg-og-surface-1 p-3 shadow-og-sm", children: [
+    /* @__PURE__ */ jsx7(
       "span",
       {
         className: cn(
           "mt-0.5 inline-flex size-7 shrink-0 items-center justify-center rounded-og-sm",
           "bg-og-accent-soft text-og-accent"
         ),
-        children: /* @__PURE__ */ jsx5(BotIcon, { className: "size-4" })
+        children: /* @__PURE__ */ jsx7(BotIcon, { className: "size-4" })
       }
     ),
-    /* @__PURE__ */ jsxs4("div", { className: "min-w-0 flex-1", children: [
-      /* @__PURE__ */ jsxs4("div", { className: "flex items-center gap-2", children: [
-        /* @__PURE__ */ jsx5("span", { className: cn("text-[13px] font-medium", running ? "og-shimmer-text" : "text-og-fg"), children: title }),
-        running ? /* @__PURE__ */ jsx5("span", { className: "size-1.5 animate-og-pulse rounded-full bg-og-status-running" }) : null
+    /* @__PURE__ */ jsxs5("div", { className: "min-w-0 flex-1", children: [
+      /* @__PURE__ */ jsxs5("div", { className: "flex items-center gap-2", children: [
+        /* @__PURE__ */ jsx7("span", { className: cn("text-[13px] font-medium", running ? "og-shimmer-text" : "text-og-fg"), children: title }),
+        running ? /* @__PURE__ */ jsx7("span", { className: "size-1.5 animate-og-pulse rounded-full bg-og-status-running" }) : null
       ] }),
-      item.prompt ? /* @__PURE__ */ jsx5("p", { className: "mt-0.5 truncate text-xs text-og-fg-muted", children: truncate(item.prompt, 140) }) : null,
-      item.workerSessionId ? /* @__PURE__ */ jsx5("p", { className: "mt-1 font-og-mono text-[11px] text-og-fg-subtle", children: item.workerSessionId.slice(0, 8) }) : null
+      item.prompt ? /* @__PURE__ */ jsx7("p", { className: "mt-0.5 truncate text-xs text-og-fg-muted", children: truncate(item.prompt, 140) }) : null,
+      item.workerSessionId ? /* @__PURE__ */ jsx7("p", { className: "mt-1 font-og-mono text-[11px] text-og-fg-subtle", children: item.workerSessionId.slice(0, 8) }) : null
     ] }),
-    item.workerSessionId && onOpenSession ? /* @__PURE__ */ jsx5(
+    item.workerSessionId && onOpenSession ? /* @__PURE__ */ jsx7(
       "button",
       {
         type: "button",
@@ -2899,7 +3073,7 @@ function WorkerRow({ item, onOpenSession }) {
 }
 
 // src/components/fleet-tile.tsx
-import { jsx as jsx6, jsxs as jsxs5 } from "react/jsx-runtime";
+import { jsx as jsx8, jsxs as jsxs6 } from "react/jsx-runtime";
 function sessionDisplayTitle(session) {
   for (const key of ["title", "name"]) {
     const value = session.metadata[key];
@@ -2912,7 +3086,7 @@ function sessionDisplayTitle(session) {
 function FleetTile({ session, title, subtitle, onOpen, className }) {
   const running = session.status === "running" || session.status === "queued";
   const needsYou = session.status === "requires_action";
-  return /* @__PURE__ */ jsxs5(
+  return /* @__PURE__ */ jsxs6(
     "button",
     {
       type: "button",
@@ -2928,7 +3102,7 @@ function FleetTile({ session, title, subtitle, onOpen, className }) {
         className
       ),
       children: [
-        /* @__PURE__ */ jsx6(
+        /* @__PURE__ */ jsx8(
           "span",
           {
             "aria-hidden": true,
@@ -2938,16 +3112,16 @@ function FleetTile({ session, title, subtitle, onOpen, className }) {
             )
           }
         ),
-        /* @__PURE__ */ jsxs5("span", { className: "flex w-full items-start justify-between gap-3", children: [
-          /* @__PURE__ */ jsx6("span", { className: "line-clamp-2 min-w-0 text-sm font-medium leading-snug text-og-fg", children: title ?? sessionDisplayTitle(session) }),
-          /* @__PURE__ */ jsx6(SessionStatus, { status: session.status, size: "sm", className: "mt-px" })
+        /* @__PURE__ */ jsxs6("span", { className: "flex w-full items-start justify-between gap-3", children: [
+          /* @__PURE__ */ jsx8("span", { className: "line-clamp-2 min-w-0 text-sm font-medium leading-snug text-og-fg", children: title ?? sessionDisplayTitle(session) }),
+          /* @__PURE__ */ jsx8(SessionStatus, { status: session.status, size: "sm", className: "mt-px" })
         ] }),
-        subtitle ? /* @__PURE__ */ jsx6("span", { className: "line-clamp-1 text-xs text-og-fg-muted", children: subtitle }) : null,
-        /* @__PURE__ */ jsxs5("span", { className: "mt-auto flex w-full items-center gap-2 text-[11px] text-og-fg-subtle", children: [
-          /* @__PURE__ */ jsx6("span", { className: "font-og-mono", children: session.id.slice(0, 8) }),
-          /* @__PURE__ */ jsx6("span", { "aria-hidden": true, children: "\xB7" }),
-          /* @__PURE__ */ jsx6("span", { className: "truncate", children: session.model }),
-          /* @__PURE__ */ jsx6("span", { className: "ml-auto shrink-0", title: session.updatedAt, children: formatRelativeTime(session.updatedAt) })
+        subtitle ? /* @__PURE__ */ jsx8("span", { className: "line-clamp-1 text-xs text-og-fg-muted", children: subtitle }) : null,
+        /* @__PURE__ */ jsxs6("span", { className: "mt-auto flex w-full items-center gap-2 text-[11px] text-og-fg-subtle", children: [
+          /* @__PURE__ */ jsx8("span", { className: "font-og-mono", children: session.id.slice(0, 8) }),
+          /* @__PURE__ */ jsx8("span", { "aria-hidden": true, children: "\xB7" }),
+          /* @__PURE__ */ jsx8("span", { className: "truncate", children: session.model }),
+          /* @__PURE__ */ jsx8("span", { className: "ml-auto shrink-0", title: session.updatedAt, children: formatRelativeTime(session.updatedAt) })
         ] })
       ]
     }
@@ -2957,7 +3131,9 @@ export {
   ChatComposer,
   CommandPalette,
   FleetTile,
+  Markdown,
   MessageTimeline,
+  ModelPicker,
   OpenGeniProvider,
   SESSION_STATUS_META,
   SessionStatus,
@@ -2993,6 +3169,7 @@ export {
   toolDisplayName,
   truncate,
   tryParseJson,
+  useAvailableModels,
   useBillingUsage,
   useComposer,
   useEnvironments,