@mlpal/yodex-ui 0.2.0 → 0.2.1

package/dist/index.js

@@ -9,6 +9,7 @@ class YodexClient {
   seq = 0;
   state = "closed";
   constructor(options) {
+    const given = Object.fromEntries(Object.entries(options).filter(([, v]) => v !== undefined));
     this.opts = {
       backoffMs: { min: 500, max: 1e4 },
       requestTimeoutMs: 15000,
@@ -16,7 +17,7 @@ class YodexClient {
       setTimer: (fn, ms) => setTimeout(fn, ms),
       clearTimer: (h) => clearTimeout(h),
       random: Math.random,
-      ...options
+      ...given
     };
   }
   get url() {
@@ -295,8 +296,19 @@ function applyEvent(state, ev, live) {
 }
 function reduce(state, action) {
   switch (action.type) {
-    case "connection":
-      return { ...state, connection: action.state };
+    case "connection": {
+      if (action.state === "connected" || !state.running)
+        return { ...state, connection: action.state };
+      return {
+        ...state,
+        connection: action.state,
+        running: false,
+        activity: undefined,
+        pendingPermissions: [],
+        pendingQuestion: undefined,
+        items: [...dropDraft(state.items), { kind: "error", id: nextId("e"), message: "Connection lost while the agent was working; what streamed so far was kept.", ts: new Date().toISOString() }]
+      };
+    }
     case "clear":
       return { ...initialState(), connection: state.connection, protocol: state.protocol, capabilities: state.capabilities, hop: state.hop, rootCwd: state.rootCwd, sessions: state.sessions, models: state.models, skills: state.skills };
     case "error":
@@ -324,10 +336,16 @@ function reduce(state, action) {
         case "ready":
           return { ...state, connection: "connected", protocol: m.protocol, capabilities: m.capabilities ?? [], hop: m.hop, rootCwd: m.cwd };
         case "event":
+          if (state.sessionId && m.sessionId !== state.sessionId)
+            return state;
           return applyEvent(state.sessionId ? state : { ...state, sessionId: m.sessionId }, m.event, true);
         case "permission_request":
-          return { ...state, pendingPermissions: [...state.pendingPermissions, { id: m.id, sessionId: m.sessionId, toolName: m.toolName, input: m.input }] };
+          if (state.sessionId && m.sessionId !== state.sessionId)
+            return state;
+          return { ...state, pendingPermissions: [...state.pendingPermissions, { id: m.id, sessionId: m.sessionId, toolName: m.toolName, input: m.input, ...m.reason ? { reason: m.reason } : {}, ...m.safetyReason ? { safetyReason: m.safetyReason } : {} }] };
         case "question_request":
+          if (state.sessionId && m.sessionId !== state.sessionId)
+            return state;
           return { ...state, pendingQuestion: { id: m.id, sessionId: m.sessionId, questions: m.questions } };
         case "sessions":
           return { ...state, sessions: m.sessions };
@@ -345,6 +363,8 @@ function reduce(state, action) {
           };
         }
         case "done":
+          if (state.sessionId && m.sessionId !== state.sessionId)
+            return state;
           return {
             ...state,
             running: false,
@@ -391,12 +411,18 @@ import { useCallback, useEffect, useMemo, useReducer, useRef } from "react";
 function useYodexSession(options) {
   const [state, dispatch] = useReducer(reduce, undefined, initialState);
   const sessionIdRef = useRef(options.sessionId);
+  const allowed = useRef(new Set);
+  const ruleFor = (p) => `${p.toolName}\x00${typeof p.input.command === "string" ? p.input.command : ""}`;
   const client = useMemo(() => new YodexClient({
     url: options.url,
     token: options.token,
     socketFactory: options.socketFactory,
     onState: (s) => dispatch({ type: "connection", state: s }),
     onMessage: (m) => {
+      if (m.type === "permission_request" && allowed.current.has(ruleFor(m))) {
+        client.respondPermission(m.id, "allow");
+        return;
+      }
       dispatch({ type: "server", message: m });
       if (m.type === "ready" && sessionIdRef.current) {
         client.loadSession(sessionIdRef.current).catch((e) => dispatch({ type: "error", message: e.message }));
@@ -412,6 +438,16 @@ function useYodexSession(options) {
   useEffect(() => {
     sessionIdRef.current = state.sessionId ?? options.sessionId;
   }, [state.sessionId, options.sessionId]);
+  const lastRequested = useRef(options.sessionId);
+  useEffect(() => {
+    if (options.sessionId === lastRequested.current)
+      return;
+    lastRequested.current = options.sessionId;
+    sessionIdRef.current = options.sessionId;
+    dispatch({ type: "clear" });
+    if (options.sessionId && client.connected)
+      client.loadSession(options.sessionId).catch((e) => dispatch({ type: "error", message: e.message }));
+  }, [options.sessionId, client]);
   const guard = useCallback((fn) => {
     try {
       fn();
@@ -452,6 +488,23 @@ function useYodexSession(options) {
     dispatch({ type: "run_started", sessionId, at: Date.now() });
     client.respondApproval(sessionId, decision, reason);
   }), [client, guard]);
+  const allowForSession = useCallback((id) => {
+    const p = state.pendingPermissions.find((x) => x.id === id);
+    if (p)
+      allowed.current.add(ruleFor(p));
+    guard(() => {
+      client.respondPermission(id, "allow");
+      dispatch({ type: "permission_answered", id });
+    });
+  }, [client, guard, state.pendingPermissions]);
+  const steer = useCallback((text) => guard(() => {
+    const sessionId = sessionIdRef.current;
+    if (!sessionId)
+      throw new Error("no session to steer");
+    client.sendPeer(sessionId, text);
+    dispatch({ type: "local_user", text, ts: new Date().toISOString() });
+  }), [client, guard]);
+  const waitingOn = state.pendingQuestion ? "question" : state.pendingPermissions.length ? "permission" : undefined;
   const loadSession = useCallback(async (sessionId) => {
     sessionIdRef.current = sessionId;
     dispatch({ type: "clear" });
@@ -479,7 +532,7 @@ function useYodexSession(options) {
     sessionIdRef.current = undefined;
     dispatch({ type: "clear" });
   }, []);
-  return { state, client, run, stop, allow, deny, answer, approve, loadSession, refreshSessions, refreshModels, newSession };
+  return { state, client, run, stop, allow, deny, answer, approve, allowForSession, steer, waitingOn, loadSession, refreshSessions, refreshModels, newSession };
 }
 // src/components/Transcript.tsx
 import { useEffect as useEffect2, useRef as useRef2 } from "react";
@@ -496,73 +549,88 @@ function cn(...inputs) {
 }
 
 // src/components/AssistantMessage.tsx
-import { jsx } from "react/jsx-runtime";
+import { jsx, jsxs } from "react/jsx-runtime";
 var plugins = [remarkGfm];
 function AssistantMessage({ text, live, className }) {
-  return /* @__PURE__ */ jsx("div", {
-    className: cn("yx-assistant prose prose-sm max-w-none break-words text-foreground", live && "yx-live", className),
+  return /* @__PURE__ */ jsxs("div", {
+    className: cn("yx-assistant max-w-none break-words text-[15px] leading-6 text-foreground", className),
     "data-live": live ? "true" : undefined,
-    children: /* @__PURE__ */ jsx(Markdown, {
-      remarkPlugins: plugins,
-      skipHtml: true,
-      components: {
-        a: ({ node: _n, ...props }) => /* @__PURE__ */ jsx("a", {
-          ...props,
-          target: "_blank",
-          rel: "noopener noreferrer",
-          className: "text-info underline underline-offset-2"
-        }),
-        pre: ({ node: _n, ...props }) => /* @__PURE__ */ jsx("pre", {
-          ...props,
-          className: "overflow-x-auto rounded-md border border-border bg-card p-3 font-mono text-[12.5px] leading-5"
-        }),
-        code: ({ node: _n, className: cls, ...props }) => cls ? /* @__PURE__ */ jsx("code", {
-          ...props,
-          className: cls
-        }) : /* @__PURE__ */ jsx("code", {
-          ...props,
-          className: "rounded bg-muted px-1 py-0.5 font-mono text-[0.9em]"
-        }),
-        table: ({ node: _n, ...props }) => /* @__PURE__ */ jsx("div", {
-          className: "overflow-x-auto",
-          children: /* @__PURE__ */ jsx("table", {
+    children: [
+      /* @__PURE__ */ jsx(Markdown, {
+        remarkPlugins: plugins,
+        skipHtml: true,
+        components: {
+          a: ({ node: _n, ...props }) => /* @__PURE__ */ jsx("a", {
             ...props,
-            className: "my-2 w-full border-collapse text-sm"
+            target: "_blank",
+            rel: "noopener noreferrer",
+            className: "text-info underline underline-offset-2"
+          }),
+          pre: ({ node: _n, ...props }) => /* @__PURE__ */ jsx("pre", {
+            ...props,
+            className: "overflow-x-auto rounded-md border border-border bg-card p-3 font-mono text-[12.5px] leading-5"
+          }),
+          code: ({ node: _n, className: cls, ...props }) => cls ? /* @__PURE__ */ jsx("code", {
+            ...props,
+            className: cls
+          }) : /* @__PURE__ */ jsx("code", {
+            ...props,
+            className: "rounded bg-muted px-1 py-0.5 font-mono text-[0.9em]"
+          }),
+          table: ({ node: _n, ...props }) => /* @__PURE__ */ jsx("div", {
+            className: "overflow-x-auto",
+            children: /* @__PURE__ */ jsx("table", {
+              ...props,
+              className: "my-2 w-full border-collapse text-sm"
+            })
+          }),
+          th: ({ node: _n, ...props }) => /* @__PURE__ */ jsx("th", {
+            ...props,
+            className: "border border-border bg-muted px-2 py-1 text-left font-medium text-foreground"
+          }),
+          strong: ({ node: _n, ...props }) => /* @__PURE__ */ jsx("strong", {
+            ...props,
+            className: "font-semibold text-foreground"
+          }),
+          blockquote: ({ node: _n, ...props }) => /* @__PURE__ */ jsx("blockquote", {
+            ...props,
+            className: "border-l-2 border-border pl-3 text-muted-foreground"
+          }),
+          td: ({ node: _n, ...props }) => /* @__PURE__ */ jsx("td", {
+            ...props,
+            className: "border border-border px-2 py-1 align-top"
           })
-        }),
-        th: ({ node: _n, ...props }) => /* @__PURE__ */ jsx("th", {
-          ...props,
-          className: "border border-border bg-muted px-2 py-1 text-left font-medium"
-        }),
-        td: ({ node: _n, ...props }) => /* @__PURE__ */ jsx("td", {
-          ...props,
-          className: "border border-border px-2 py-1 align-top"
-        })
-      },
-      children: text
-    })
+        },
+        children: text
+      }),
+      live && /* @__PURE__ */ jsx("span", {
+        className: "yx-caret",
+        "aria-hidden": true,
+        children: "▍"
+      })
+    ]
   });
 }
 
 // src/components/PlanChecklist.tsx
 import { Check, Circle, Loader2 } from "lucide-react";
-import { jsx as jsx2, jsxs } from "react/jsx-runtime";
+import { jsx as jsx2, jsxs as jsxs2 } from "react/jsx-runtime";
 function PlanChecklist({ items, className }) {
   if (!items.length)
     return null;
   const done = items.filter((t) => t.status === "completed").length;
-  return /* @__PURE__ */ jsxs("div", {
+  return /* @__PURE__ */ jsxs2("div", {
     className: cn("yx-plan rounded-md border border-border bg-card p-3 text-sm", className),
     "aria-label": "plan",
     children: [
-      /* @__PURE__ */ jsxs("div", {
+      /* @__PURE__ */ jsxs2("div", {
         className: "mb-2 flex items-center justify-between",
         children: [
           /* @__PURE__ */ jsx2("span", {
             className: "font-medium",
             children: "Plan"
           }),
-          /* @__PURE__ */ jsxs("span", {
+          /* @__PURE__ */ jsxs2("span", {
             className: "font-mono text-[12px] tabular-nums text-muted-foreground",
             children: [
               done,
@@ -574,7 +642,7 @@ function PlanChecklist({ items, className }) {
       }),
       /* @__PURE__ */ jsx2("ol", {
         className: "space-y-1",
-        children: items.map((t) => /* @__PURE__ */ jsxs("li", {
+        children: items.map((t) => /* @__PURE__ */ jsxs2("li", {
           className: cn("flex items-start gap-2", t.status === "completed" && "text-muted-foreground line-through"),
           "data-status": t.status,
           children: [
@@ -635,7 +703,7 @@ function DiffView({ diff, className }) {
 }
 
 // src/components/ToolCall.tsx
-import { jsx as jsx4, jsxs as jsxs2, Fragment } from "react/jsx-runtime";
+import { jsx as jsx4, jsxs as jsxs3, Fragment } from "react/jsx-runtime";
 function toolSummary(name, input) {
   const pick = (...keys) => {
     for (const k of keys) {
@@ -681,12 +749,12 @@ function ToolCall({ item, defaultOpen = false, onOpenFile }) {
   const counts = r?.diff ? diffCounts(r.diff) : null;
   const path = typeof item.input.file_path === "string" ? item.input.file_path : typeof item.input.path === "string" ? item.input.path : undefined;
   const Icon = r?.diff ? FileDiff : item.name === "Bash" ? Terminal : Wrench;
-  return /* @__PURE__ */ jsxs2("div", {
+  return /* @__PURE__ */ jsxs3("div", {
     className: cn("yx-tool rounded-md border border-border bg-card text-sm", status === "error" && "border-destructive/40"),
     "data-tool": item.name,
     "data-status": status,
     children: [
-      /* @__PURE__ */ jsxs2("button", {
+      /* @__PURE__ */ jsxs3("button", {
         type: "button",
         onClick: () => setOpen((o) => !o),
         "aria-expanded": open,
@@ -708,10 +776,10 @@ function ToolCall({ item, defaultOpen = false, onOpenFile }) {
             className: "min-w-0 flex-1 truncate font-mono text-[12.5px] text-muted-foreground",
             children: clip(summary)
           }),
-          counts && /* @__PURE__ */ jsxs2("span", {
+          counts && /* @__PURE__ */ jsxs3("span", {
             className: "shrink-0 font-mono text-[12px] tabular-nums",
             children: [
-              /* @__PURE__ */ jsxs2("span", {
+              /* @__PURE__ */ jsxs3("span", {
                 className: "text-success",
                 children: [
                   "+",
@@ -719,7 +787,7 @@ function ToolCall({ item, defaultOpen = false, onOpenFile }) {
                 ]
               }),
               " ",
-              /* @__PURE__ */ jsxs2("span", {
+              /* @__PURE__ */ jsxs3("span", {
                 className: "text-destructive",
                 children: [
                   "−",
@@ -742,7 +810,7 @@ function ToolCall({ item, defaultOpen = false, onOpenFile }) {
           })
         ]
       }),
-      open && /* @__PURE__ */ jsxs2("div", {
+      open && /* @__PURE__ */ jsxs3("div", {
         className: "border-t border-border px-3 py-2",
         children: [
           /* @__PURE__ */ jsx4("div", {
@@ -753,9 +821,9 @@ function ToolCall({ item, defaultOpen = false, onOpenFile }) {
             className: "overflow-x-auto whitespace-pre-wrap break-words font-mono text-[12px] leading-5",
             children: summary && Object.keys(item.input).length === 1 ? summary : JSON.stringify(item.input, null, 2)
           }),
-          r && /* @__PURE__ */ jsxs2(Fragment, {
+          r && /* @__PURE__ */ jsxs3(Fragment, {
             children: [
-              /* @__PURE__ */ jsxs2("div", {
+              /* @__PURE__ */ jsxs3("div", {
                 className: "mb-1 mt-2 flex items-center gap-2 text-[11px] uppercase tracking-wide text-muted-foreground",
                 children: [
                   /* @__PURE__ */ jsx4("span", {
@@ -785,7 +853,85 @@ function ToolCall({ item, defaultOpen = false, onOpenFile }) {
 }
 
 // src/components/Transcript.tsx
-import { jsx as jsx5, jsxs as jsxs3 } from "react/jsx-runtime";
+import { jsx as jsx5, jsxs as jsxs4 } from "react/jsx-runtime";
+function TranscriptRow({ item, onOpenFile }) {
+  const it = item;
+  switch (it.kind) {
+    case "user":
+      return /* @__PURE__ */ jsx5("div", {
+        className: cn("flex", it.author.type === "human" ? "justify-end" : "justify-start"),
+        "data-author": it.author.type,
+        children: /* @__PURE__ */ jsxs4("div", {
+          className: cn("max-w-[85%] whitespace-pre-wrap break-words rounded-2xl px-4 py-2 text-[15px] leading-6", it.author.type === "human" ? "rounded-br-md bg-primary text-primary-foreground" : "rounded-bl-md border border-border bg-card"),
+          children: [
+            it.author.type !== "human" && /* @__PURE__ */ jsx5("div", {
+              className: "mb-1 text-[11px] text-muted-foreground",
+              children: it.author.displayName ?? it.author.type
+            }),
+            it.blocks?.some((b) => b.type === "image") && /* @__PURE__ */ jsx5("div", {
+              className: "mb-1 text-[11px] opacity-80",
+              children: "[image]"
+            }),
+            it.text
+          ]
+        })
+      });
+    case "assistant":
+      return /* @__PURE__ */ jsx5(AssistantMessage, {
+        text: it.text,
+        live: it.live
+      });
+    case "tool":
+      return /* @__PURE__ */ jsx5(ToolCall, {
+        item: it,
+        onOpenFile
+      });
+    case "plan":
+      return /* @__PURE__ */ jsx5(PlanChecklist, {
+        items: it.items
+      });
+    case "result": {
+      const { label, tone } = resultLabel(it.result);
+      return /* @__PURE__ */ jsxs4("div", {
+        className: cn("flex items-center gap-2 text-[12px] text-muted-foreground", tone === "bad" && "text-destructive"),
+        "data-subtype": it.result.subtype,
+        children: [
+          /* @__PURE__ */ jsx5("span", {
+            children: label
+          }),
+          /* @__PURE__ */ jsx5("span", {
+            children: "·"
+          }),
+          /* @__PURE__ */ jsxs4("span", {
+            className: "font-mono tabular-nums",
+            children: [
+              it.result.numTurns,
+              " step",
+              it.result.numTurns === 1 ? "" : "s",
+              " · ",
+              formatTokens(it.result.usage)
+            ]
+          })
+        ]
+      });
+    }
+    case "error":
+      return /* @__PURE__ */ jsx5("div", {
+        role: "alert",
+        className: "rounded-md border border-destructive/40 bg-destructive/5 px-3 py-2 text-[13px] text-destructive",
+        children: it.message
+      });
+    case "compact":
+      return /* @__PURE__ */ jsxs4("div", {
+        className: "text-center text-[11px] text-muted-foreground",
+        children: [
+          "— context compacted (",
+          it.replacedMessages,
+          " earlier messages summarised) —"
+        ]
+      });
+  }
+}
 function Transcript({ items, autoScroll = true, onOpenFile, footer, emptyState, className }) {
   const ref = useRef2(null);
   const pinned = useRef2(true);
@@ -808,97 +954,23 @@ function Transcript({ items, autoScroll = true, onOpenFile, footer, emptyState,
     ref,
     className: cn("yx-transcript flex-1 overflow-y-auto px-4 py-3", className),
     role: "log",
-    "aria-live": "polite",
-    children: /* @__PURE__ */ jsxs3("div", {
+    children: /* @__PURE__ */ jsxs4("div", {
       className: "mx-auto flex w-full max-w-3xl flex-col gap-3",
       children: [
         items.length === 0 && emptyState,
-        items.map((it) => {
-          switch (it.kind) {
-            case "user":
-              return /* @__PURE__ */ jsx5("div", {
-                className: cn("flex", it.author.type === "human" ? "justify-end" : "justify-start"),
-                "data-author": it.author.type,
-                children: /* @__PURE__ */ jsxs3("div", {
-                  className: cn("max-w-[85%] whitespace-pre-wrap break-words rounded-2xl px-4 py-2 text-[15px] leading-6", it.author.type === "human" ? "rounded-br-md bg-primary text-primary-foreground" : "rounded-bl-md border border-border bg-card"),
-                  children: [
-                    it.author.type !== "human" && /* @__PURE__ */ jsx5("div", {
-                      className: "mb-1 text-[11px] text-muted-foreground",
-                      children: it.author.displayName ?? it.author.type
-                    }),
-                    it.blocks?.some((b) => b.type === "image") && /* @__PURE__ */ jsx5("div", {
-                      className: "mb-1 text-[11px] opacity-80",
-                      children: "[image]"
-                    }),
-                    it.text
-                  ]
-                })
-              }, it.id);
-            case "assistant":
-              return /* @__PURE__ */ jsx5(AssistantMessage, {
-                text: it.text,
-                live: it.live
-              }, it.id);
-            case "tool":
-              return /* @__PURE__ */ jsx5(ToolCall, {
-                item: it,
-                onOpenFile
-              }, it.id);
-            case "plan":
-              return /* @__PURE__ */ jsx5(PlanChecklist, {
-                items: it.items
-              }, "plan");
-            case "result": {
-              const { label, tone } = resultLabel(it.result);
-              return /* @__PURE__ */ jsxs3("div", {
-                className: cn("flex items-center gap-2 text-[12px] text-muted-foreground", tone === "bad" && "text-destructive"),
-                "data-subtype": it.result.subtype,
-                children: [
-                  /* @__PURE__ */ jsx5("span", {
-                    children: label
-                  }),
-                  /* @__PURE__ */ jsx5("span", {
-                    children: "·"
-                  }),
-                  /* @__PURE__ */ jsxs3("span", {
-                    className: "font-mono tabular-nums",
-                    children: [
-                      it.result.numTurns,
-                      " step",
-                      it.result.numTurns === 1 ? "" : "s",
-                      " · ",
-                      formatTokens(it.result.usage)
-                    ]
-                  })
-                ]
-              }, it.id);
-            }
-            case "error":
-              return /* @__PURE__ */ jsx5("div", {
-                role: "alert",
-                className: "rounded-md border border-destructive/40 bg-destructive/5 px-3 py-2 text-[13px] text-destructive",
-                children: it.message
-              }, it.id);
-            case "compact":
-              return /* @__PURE__ */ jsxs3("div", {
-                className: "text-center text-[11px] text-muted-foreground",
-                children: [
-                  "— context compacted (",
-                  it.replacedMessages,
-                  " earlier messages summarised) —"
-                ]
-              }, it.id);
-          }
-        }),
+        items.map((it) => /* @__PURE__ */ jsx5(TranscriptRow, {
+          item: it,
+          onOpenFile
+        }, it.id)),
         footer
       ]
     })
   });
 }
 // src/components/PermissionPrompt.tsx
-import { useEffect as useEffect3 } from "react";
+import { useEffect as useEffect3, useState as useState2 } from "react";
 import { ShieldAlert } from "lucide-react";
-import { jsx as jsx6, jsxs as jsxs4 } from "react/jsx-runtime";
+import { jsx as jsx6, jsxs as jsxs5 } from "react/jsx-runtime";
 function permissionSummary(p) {
   const v = p.input.command ?? p.input.file_path ?? p.input.path ?? p.input.url;
   if (typeof v === "string")
@@ -906,8 +978,12 @@ function permissionSummary(p) {
   const s = JSON.stringify(p.input);
   return s.length > 240 ? `${s.slice(0, 239)}…` : s;
 }
-function PermissionPrompt({ request, onAllow, onDeny, className }) {
+function PermissionPrompt({ request, onAllow, onDeny, onAllowSession, hotkeys = false, className }) {
+  const [reasonOpen, setReasonOpen] = useState2(false);
+  const [reason, setReason] = useState2("");
   useEffect3(() => {
+    if (!hotkeys)
+      return;
     const key = (e) => {
       const t = e.target;
       if (t && (t.tagName === "TEXTAREA" || t.tagName === "INPUT" || t.isContentEditable))
@@ -919,15 +995,19 @@ function PermissionPrompt({ request, onAllow, onDeny, className }) {
     };
     document.addEventListener("keydown", key);
     return () => document.removeEventListener("keydown", key);
-  }, [request.id, onAllow, onDeny]);
-  return /* @__PURE__ */ jsxs4("div", {
+  }, [hotkeys, request.id, onAllow, onDeny]);
+  const kbd = (k) => hotkeys ? /* @__PURE__ */ jsx6("kbd", {
+    className: "ml-1 rounded bg-black/10 px-1 text-[11px]",
+    children: k
+  }) : null;
+  return /* @__PURE__ */ jsxs5("div", {
     role: "alertdialog",
     "aria-labelledby": `perm-${request.id}`,
     className: cn("yx-permission rounded-md border border-warning/50 bg-card p-3 text-sm", className),
     children: [
-      /* @__PURE__ */ jsxs4("div", {
+      /* @__PURE__ */ jsxs5("div", {
         id: `perm-${request.id}`,
-        className: "mb-2 flex items-center gap-2 font-medium",
+        className: "mb-1 flex items-center gap-2 font-medium",
         children: [
           /* @__PURE__ */ jsx6(ShieldAlert, {
             className: "h-4 w-4 text-warning",
@@ -941,46 +1021,116 @@ function PermissionPrompt({ request, onAllow, onDeny, className }) {
           "?"
         ]
       }),
+      (request.safetyReason || request.reason) && /* @__PURE__ */ jsx6("div", {
+        className: "mb-2 text-[12px] text-muted-foreground",
+        children: request.safetyReason ?? request.reason
+      }),
       /* @__PURE__ */ jsx6("pre", {
         className: "mb-3 overflow-x-auto whitespace-pre-wrap break-words rounded bg-muted p-2 font-mono text-[12.5px] leading-5",
         children: permissionSummary(request)
       }),
-      /* @__PURE__ */ jsxs4("div", {
-        className: "flex gap-2",
+      /* @__PURE__ */ jsxs5("div", {
+        className: "flex flex-wrap gap-2",
         children: [
-          /* @__PURE__ */ jsxs4("button", {
+          /* @__PURE__ */ jsxs5("button", {
             type: "button",
             onClick: () => onAllow(request.id),
             className: "min-h-11 flex-1 rounded-md bg-primary px-4 font-medium text-primary-foreground hover:opacity-90 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring",
             children: [
               "Allow ",
-              /* @__PURE__ */ jsx6("kbd", {
-                className: "ml-1 rounded bg-primary-foreground/20 px-1 text-[11px]",
-                children: "a"
-              })
+              kbd("a")
             ]
           }),
-          /* @__PURE__ */ jsxs4("button", {
+          onAllowSession && /* @__PURE__ */ jsx6("button", {
+            type: "button",
+            onClick: () => onAllowSession(request.id),
+            className: "min-h-11 flex-1 rounded-md border border-border bg-background px-4 font-medium hover:bg-muted",
+            children: "Allow for this session"
+          }),
+          /* @__PURE__ */ jsxs5("button", {
             type: "button",
-            onClick: () => onDeny(request.id),
+            onClick: () => reasonOpen ? onDeny(request.id, reason.trim() || undefined) : onDeny(request.id),
             className: "min-h-11 flex-1 rounded-md border border-border bg-background px-4 font-medium hover:bg-muted focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring",
             children: [
               "Deny ",
-              /* @__PURE__ */ jsx6("kbd", {
-                className: "ml-1 rounded bg-muted px-1 text-[11px]",
-                children: "d"
-              })
+              kbd("d")
             ]
           })
         ]
+      }),
+      reasonOpen ? /* @__PURE__ */ jsxs5("label", {
+        className: "mt-2 block",
+        children: [
+          /* @__PURE__ */ jsx6("span", {
+            className: "mb-1 block text-[12px] text-muted-foreground",
+            children: "Tell the agent why (sent with the denial)"
+          }),
+          /* @__PURE__ */ jsx6("input", {
+            value: reason,
+            onChange: (e) => setReason(e.target.value),
+            className: "min-h-11 w-full rounded-md border border-border bg-input-background px-3 text-[16px]"
+          })
+        ]
+      }) : /* @__PURE__ */ jsx6("button", {
+        type: "button",
+        onClick: () => setReasonOpen(true),
+        className: "mt-2 min-h-9 text-[12px] text-info underline-offset-2 hover:underline",
+        children: "Deny with a reason…"
+      })
+    ]
+  });
+}
+// src/components/ApprovalPrompt.tsx
+import { ShieldAlert as ShieldAlert2 } from "lucide-react";
+import { jsx as jsx7, jsxs as jsxs6 } from "react/jsx-runtime";
+function ApprovalPrompt({ approval, onDecide, className }) {
+  return /* @__PURE__ */ jsxs6("div", {
+    role: "alertdialog",
+    "aria-label": "Approval needed",
+    className: cn("yx-approval rounded-md border border-warning/50 bg-card p-3 text-sm", className),
+    children: [
+      /* @__PURE__ */ jsxs6("div", {
+        className: "mb-1 flex items-center gap-2 font-medium",
+        children: [
+          /* @__PURE__ */ jsx7(ShieldAlert2, {
+            className: "h-4 w-4 text-warning",
+            "aria-hidden": true
+          }),
+          "The agent stopped before this and needs your approval"
+        ]
+      }),
+      /* @__PURE__ */ jsx7("div", {
+        className: "mb-2 text-[12px] text-muted-foreground",
+        children: approval.reason
+      }),
+      /* @__PURE__ */ jsx7("pre", {
+        className: "mb-3 overflow-x-auto whitespace-pre-wrap break-words rounded bg-muted p-2 font-mono text-[12.5px] leading-5",
+        children: approval.command
+      }),
+      /* @__PURE__ */ jsxs6("div", {
+        className: "flex gap-2",
+        children: [
+          /* @__PURE__ */ jsx7("button", {
+            type: "button",
+            onClick: () => onDecide("allow"),
+            className: "min-h-11 flex-1 rounded-md bg-primary px-4 font-medium text-primary-foreground hover:opacity-90",
+            children: "Approve and continue"
+          }),
+          /* @__PURE__ */ jsx7("button", {
+            type: "button",
+            onClick: () => onDecide("deny"),
+            className: "min-h-11 flex-1 rounded-md border border-border px-4 font-medium hover:bg-muted",
+            children: "Don't run it"
+          })
+        ]
       })
     ]
   });
 }
 // src/components/QuestionForm.tsx
-import { useState as useState2 } from "react";
+import { useState as useState3 } from "react";
 import { HelpCircle, X } from "lucide-react";
-import { jsx as jsx7, jsxs as jsxs5 } from "react/jsx-runtime";
+import { jsx as jsx8, jsxs as jsxs7 } from "react/jsx-runtime";
 function emptyDraft(questions) {
   return { selected: questions.map(() => []), notes: questions.map(() => "") };
 }
@@ -1003,8 +1153,8 @@ function chip(q, i) {
 }
 function QuestionForm({ request, onSubmit, onDecline, className }) {
   const qs = request.questions;
-  const [tab, setTab] = useState2(0);
-  const [draft, setDraft] = useState2(() => emptyDraft(qs));
+  const [tab, setTab] = useState3(0);
+  const [draft, setDraft] = useState3(() => emptyDraft(qs));
   const q = qs[tab];
   if (!q)
     return null;
@@ -1024,38 +1174,38 @@ function QuestionForm({ request, onSubmit, onDecline, className }) {
   });
   const answered = qs.map((_, i) => (draft.selected[i]?.length ?? 0) > 0 || (draft.notes[i] ?? "").trim().length > 0);
   const previewOf = (q.options ?? []).find((o) => picked[0] === o.label)?.preview;
-  return /* @__PURE__ */ jsxs5("div", {
+  return /* @__PURE__ */ jsxs7("div", {
     role: "dialog",
     "aria-label": "The agent has a question",
     className: cn("yx-question rounded-md border border-info/50 bg-card text-sm", className),
     children: [
-      /* @__PURE__ */ jsxs5("div", {
+      /* @__PURE__ */ jsxs7("div", {
         className: "flex items-center gap-2 border-b border-border px-3 py-2",
         children: [
-          /* @__PURE__ */ jsx7(HelpCircle, {
+          /* @__PURE__ */ jsx8(HelpCircle, {
             className: "h-4 w-4 text-info",
             "aria-hidden": true
           }),
-          /* @__PURE__ */ jsx7("span", {
+          /* @__PURE__ */ jsx8("span", {
             className: "font-medium",
             children: "The agent needs your input"
           }),
-          /* @__PURE__ */ jsx7("button", {
+          /* @__PURE__ */ jsx8("button", {
             type: "button",
             onClick: () => onDecline(request.id),
             "aria-label": "Close and keep talking",
             className: "ml-auto flex h-11 w-11 items-center justify-center rounded-md text-muted-foreground hover:bg-muted",
-            children: /* @__PURE__ */ jsx7(X, {
+            children: /* @__PURE__ */ jsx8(X, {
               className: "h-4 w-4",
               "aria-hidden": true
             })
           })
         ]
       }),
-      qs.length > 1 && /* @__PURE__ */ jsx7("div", {
+      qs.length > 1 && /* @__PURE__ */ jsx8("div", {
         role: "tablist",
         className: "flex gap-1 overflow-x-auto border-b border-border px-2 py-1",
-        children: qs.map((qq, i) => /* @__PURE__ */ jsx7("button", {
+        children: qs.map((qq, i) => /* @__PURE__ */ jsx8("button", {
           role: "tab",
           type: "button",
           "aria-selected": i === tab,
@@ -1064,37 +1214,37 @@ function QuestionForm({ request, onSubmit, onDecline, className }) {
           children: chip(qq, i)
         }, i))
       }),
-      /* @__PURE__ */ jsxs5("div", {
+      /* @__PURE__ */ jsxs7("div", {
         className: "space-y-3 p-3",
         children: [
-          /* @__PURE__ */ jsx7("p", {
+          /* @__PURE__ */ jsx8("p", {
             className: "font-medium",
             children: q.question
           }),
-          (q.options ?? []).length > 0 && /* @__PURE__ */ jsx7("div", {
+          (q.options ?? []).length > 0 && /* @__PURE__ */ jsx8("div", {
             role: q.multiSelect ? "group" : "radiogroup",
             className: "space-y-2",
             children: (q.options ?? []).map((o) => {
               const on = picked.includes(o.label);
-              return /* @__PURE__ */ jsxs5("button", {
+              return /* @__PURE__ */ jsxs7("button", {
                 type: "button",
                 role: q.multiSelect ? "checkbox" : "radio",
                 "aria-checked": on,
                 onClick: () => toggle(o.label),
                 className: cn("flex min-h-11 w-full items-start gap-3 rounded-md border px-3 py-2 text-left hover:bg-muted/60", on ? "border-primary bg-muted" : "border-border"),
                 children: [
-                  /* @__PURE__ */ jsx7("span", {
+                  /* @__PURE__ */ jsx8("span", {
                     className: cn("mt-1 h-4 w-4 shrink-0 border", q.multiSelect ? "rounded" : "rounded-full", on ? "border-primary bg-primary" : "border-muted-foreground"),
                     "aria-hidden": true
                   }),
-                  /* @__PURE__ */ jsxs5("span", {
+                  /* @__PURE__ */ jsxs7("span", {
                     className: "min-w-0",
                     children: [
-                      /* @__PURE__ */ jsx7("span", {
+                      /* @__PURE__ */ jsx8("span", {
                         className: "block font-medium",
                         children: o.label
                       }),
-                      o.description && /* @__PURE__ */ jsx7("span", {
+                      o.description && /* @__PURE__ */ jsx8("span", {
                         className: "block text-muted-foreground",
                         children: o.description
                       })
@@ -1104,18 +1254,18 @@ function QuestionForm({ request, onSubmit, onDecline, className }) {
               }, o.label);
             })
           }),
-          previewOf && /* @__PURE__ */ jsx7("pre", {
+          previewOf && /* @__PURE__ */ jsx8("pre", {
             className: "overflow-x-auto rounded-md border border-border bg-muted p-2 font-mono text-[12px] leading-5",
             children: previewOf
           }),
-          /* @__PURE__ */ jsxs5("label", {
+          /* @__PURE__ */ jsxs7("label", {
             className: "block",
             children: [
-              /* @__PURE__ */ jsx7("span", {
+              /* @__PURE__ */ jsx8("span", {
                 className: "mb-1 block text-[12px] text-muted-foreground",
                 children: (q.options ?? []).length ? "Add a note (optional)" : "Your answer"
               }),
-              /* @__PURE__ */ jsx7("textarea", {
+              /* @__PURE__ */ jsx8("textarea", {
                 value: draft.notes[tab] ?? "",
                 onChange: (e) => setNote(e.target.value),
                 rows: 2,
@@ -1123,16 +1273,16 @@ function QuestionForm({ request, onSubmit, onDecline, className }) {
               })
             ]
           }),
-          /* @__PURE__ */ jsxs5("div", {
+          /* @__PURE__ */ jsxs7("div", {
             className: "flex gap-2",
             children: [
-              tab < qs.length - 1 ? /* @__PURE__ */ jsx7("button", {
+              tab < qs.length - 1 ? /* @__PURE__ */ jsx8("button", {
                 type: "button",
                 onClick: () => setTab(tab + 1),
                 className: "min-h-11 flex-1 rounded-md border border-border px-4 font-medium hover:bg-muted",
                 children: "Next"
               }) : null,
-              /* @__PURE__ */ jsx7("button", {
+              /* @__PURE__ */ jsx8("button", {
                 type: "button",
                 onClick: () => onSubmit(request.id, buildOutcome(qs, draft)),
                 disabled: !answered.some(Boolean),
@@ -1147,11 +1297,11 @@ function QuestionForm({ request, onSubmit, onDecline, className }) {
   });
 }
 // src/components/RunStatus.tsx
-import { useEffect as useEffect4, useState as useState3 } from "react";
+import { useEffect as useEffect4, useState as useState4 } from "react";
 import { AlertTriangle, Check as Check3, Loader2 as Loader23, Square } from "lucide-react";
-import { jsx as jsx8, jsxs as jsxs6 } from "react/jsx-runtime";
-function RunStatus({ running, startedAt, activity, lastResult, usageTotal, connection, onStop, onApprove, className, now = Date.now }) {
-  const [, tick] = useState3(0);
+import { jsx as jsx9, jsxs as jsxs8 } from "react/jsx-runtime";
+function RunStatus({ running, startedAt, activity, waitingOn, lastResult, usageTotal, connection, onStop, onApprove, className, now = Date.now }) {
+  const [, tick] = useState4(0);
   useEffect4(() => {
     if (!running)
       return;
@@ -1159,11 +1309,11 @@ function RunStatus({ running, startedAt, activity, lastResult, usageTotal, conne
     return () => clearInterval(h);
   }, [running]);
   if (connection && connection !== "connected") {
-    return /* @__PURE__ */ jsxs6("div", {
+    return /* @__PURE__ */ jsxs8("div", {
       className: cn("yx-status flex min-h-9 items-center gap-2 text-[12.5px] text-muted-foreground", className),
       role: "status",
       children: [
-        /* @__PURE__ */ jsx8(Loader23, {
+        /* @__PURE__ */ jsx9(Loader23, {
           className: "h-3.5 w-3.5 animate-spin",
           "aria-hidden": true
         }),
@@ -1172,32 +1322,34 @@ function RunStatus({ running, startedAt, activity, lastResult, usageTotal, conne
     });
   }
   if (running) {
-    return /* @__PURE__ */ jsxs6("div", {
-      className: cn("yx-status flex min-h-9 items-center gap-2 text-[12.5px] text-muted-foreground", className),
-      role: "status",
-      "aria-live": "polite",
+    const label2 = waitingOn === "permission" ? "Waiting for your approval" : waitingOn === "question" ? "Waiting for your answer" : activity ?? "Working";
+    return /* @__PURE__ */ jsxs8("div", {
+      className: cn("yx-status flex min-h-11 items-center gap-2 text-[12.5px] text-muted-foreground", className),
       children: [
-        /* @__PURE__ */ jsx8(Loader23, {
-          className: "h-3.5 w-3.5 animate-spin text-accent",
+        /* @__PURE__ */ jsx9(Loader23, {
+          className: cn("h-3.5 w-3.5 animate-spin", waitingOn ? "text-warning" : "text-accent"),
           "aria-hidden": true
         }),
-        /* @__PURE__ */ jsx8("span", {
-          children: activity ?? "Working"
+        /* @__PURE__ */ jsx9("span", {
+          role: "status",
+          "aria-live": "polite",
+          children: label2
         }),
-        startedAt !== undefined && /* @__PURE__ */ jsxs6("span", {
+        startedAt !== undefined && /* @__PURE__ */ jsxs8("span", {
           className: "font-mono tabular-nums",
+          "aria-hidden": true,
           children: [
             "· ",
             elapsedLabel(now() - startedAt)
           ]
         }),
-        onStop && /* @__PURE__ */ jsxs6("button", {
+        onStop && /* @__PURE__ */ jsxs8("button", {
           type: "button",
           onClick: onStop,
-          className: "ml-auto flex min-h-9 items-center gap-1 rounded-md px-2 hover:bg-muted",
+          className: "ml-auto flex min-h-11 items-center gap-1 rounded-md px-3 hover:bg-muted",
           "aria-label": "Stop",
           children: [
-            /* @__PURE__ */ jsx8(Square, {
+            /* @__PURE__ */ jsx9(Square, {
               className: "h-3.5 w-3.5",
               "aria-hidden": true
             }),
@@ -1211,30 +1363,30 @@ function RunStatus({ running, startedAt, activity, lastResult, usageTotal, conne
     return null;
   const { label, tone } = resultLabel(lastResult);
   const needsApproval = lastResult.subtype === "needs_approval";
-  return /* @__PURE__ */ jsxs6("div", {
+  return /* @__PURE__ */ jsxs8("div", {
     className: cn("yx-status flex min-h-9 flex-wrap items-center gap-2 text-[12.5px]", className),
     role: "status",
     "data-subtype": lastResult.subtype,
     children: [
-      tone === "ok" ? /* @__PURE__ */ jsx8(Check3, {
+      tone === "ok" ? /* @__PURE__ */ jsx9(Check3, {
         className: "h-3.5 w-3.5 text-success",
         "aria-hidden": true
-      }) : tone === "bad" ? /* @__PURE__ */ jsx8(AlertTriangle, {
+      }) : tone === "bad" ? /* @__PURE__ */ jsx9(AlertTriangle, {
         className: "h-3.5 w-3.5 text-destructive",
         "aria-hidden": true
-      }) : /* @__PURE__ */ jsx8(AlertTriangle, {
+      }) : /* @__PURE__ */ jsx9(AlertTriangle, {
         className: cn("h-3.5 w-3.5", tone === "warn" ? "text-warning" : "text-muted-foreground"),
         "aria-hidden": true
       }),
-      /* @__PURE__ */ jsx8("span", {
+      /* @__PURE__ */ jsx9("span", {
         className: cn(tone === "ok" && "text-success", tone === "bad" && "text-destructive", tone === "warn" && "text-warning", tone === "muted" && "text-muted-foreground"),
         children: label
       }),
-      /* @__PURE__ */ jsx8("span", {
+      /* @__PURE__ */ jsx9("span", {
         className: "text-muted-foreground",
         children: "·"
       }),
-      /* @__PURE__ */ jsxs6("span", {
+      /* @__PURE__ */ jsxs8("span", {
         className: "font-mono tabular-nums text-muted-foreground",
         children: [
           lastResult.numTurns,
@@ -1244,42 +1396,19 @@ function RunStatus({ running, startedAt, activity, lastResult, usageTotal, conne
           formatTokens(usageTotal ?? lastResult.usage)
         ]
       }),
-      needsApproval && lastResult.pendingApproval && /* @__PURE__ */ jsxs6("div", {
-        className: "basis-full rounded-md border border-warning/50 bg-card p-2",
-        children: [
-          /* @__PURE__ */ jsx8("div", {
-            className: "mb-1 text-[12px] text-muted-foreground",
-            children: lastResult.pendingApproval.reason
-          }),
-          /* @__PURE__ */ jsx8("pre", {
-            className: "mb-2 overflow-x-auto whitespace-pre-wrap break-words font-mono text-[12px]",
-            children: lastResult.pendingApproval.command
-          }),
-          onApprove && /* @__PURE__ */ jsxs6("div", {
-            className: "flex gap-2",
-            children: [
-              /* @__PURE__ */ jsx8("button", {
-                type: "button",
-                onClick: () => onApprove("allow"),
-                className: "min-h-11 flex-1 rounded-md bg-primary px-3 font-medium text-primary-foreground",
-                children: "Approve and continue"
-              }),
-              /* @__PURE__ */ jsx8("button", {
-                type: "button",
-                onClick: () => onApprove("deny"),
-                className: "min-h-11 flex-1 rounded-md border border-border px-3 font-medium hover:bg-muted",
-                children: "Don't run it"
-              })
-            ]
-          })
-        ]
+      needsApproval && lastResult.pendingApproval && onApprove && /* @__PURE__ */ jsx9("div", {
+        className: "basis-full",
+        children: /* @__PURE__ */ jsx9(ApprovalPrompt, {
+          approval: lastResult.pendingApproval,
+          onDecide: onApprove
+        })
       })
     ]
   });
 }
 // src/components/SessionList.tsx
 import { Plus } from "lucide-react";
-import { jsx as jsx9, jsxs as jsxs7 } from "react/jsx-runtime";
+import { jsx as jsx10, jsxs as jsxs9 } from "react/jsx-runtime";
 function groupSessions(rows) {
   const groups = new Map;
   for (const r of rows) {
@@ -1299,75 +1428,75 @@ function when(iso) {
 }
 function SessionList({ sessions, selectedId, onSelect, onNew, className }) {
   const groups = groupSessions(sessions);
-  return /* @__PURE__ */ jsxs7("nav", {
+  return /* @__PURE__ */ jsxs9("nav", {
     className: cn("yx-sessions text-sm", className),
     "aria-label": "Sessions",
     children: [
-      onNew && /* @__PURE__ */ jsxs7("button", {
+      onNew && /* @__PURE__ */ jsxs9("button", {
         type: "button",
         onClick: onNew,
         className: "mb-2 flex min-h-11 w-full items-center gap-2 rounded-md border border-dashed border-border px-3 text-left hover:bg-muted",
         children: [
-          /* @__PURE__ */ jsx9(Plus, {
+          /* @__PURE__ */ jsx10(Plus, {
             className: "h-4 w-4",
             "aria-hidden": true
           }),
           " New session"
         ]
       }),
-      sessions.length === 0 && /* @__PURE__ */ jsx9("p", {
+      sessions.length === 0 && /* @__PURE__ */ jsx10("p", {
         className: "px-3 py-2 text-muted-foreground",
         children: "No sessions yet."
       }),
-      groups.map((g) => /* @__PURE__ */ jsxs7("div", {
+      groups.map((g) => /* @__PURE__ */ jsxs9("div", {
         className: "mb-2",
         children: [
-          g.project && /* @__PURE__ */ jsx9("div", {
+          g.project && /* @__PURE__ */ jsx10("div", {
             className: "px-3 py-1 text-[11px] uppercase tracking-wide text-muted-foreground",
             children: g.project
           }),
-          /* @__PURE__ */ jsx9("ul", {
+          /* @__PURE__ */ jsx10("ul", {
             children: g.rows.map((s) => {
               const on = s.sessionId === selectedId;
               const title = s.name || s.title || s.lastMessagePreview || s.sessionId.slice(0, 8);
-              return /* @__PURE__ */ jsx9("li", {
-                children: /* @__PURE__ */ jsxs7("button", {
+              return /* @__PURE__ */ jsx10("li", {
+                children: /* @__PURE__ */ jsxs9("button", {
                   type: "button",
                   onClick: () => onSelect(s.sessionId),
                   "aria-current": on ? "true" : undefined,
                   className: cn("flex min-h-11 w-full flex-col gap-0.5 rounded-md px-3 py-2 text-left hover:bg-muted", on && "bg-muted"),
                   "data-status": s.status,
                   children: [
-                    /* @__PURE__ */ jsxs7("span", {
+                    /* @__PURE__ */ jsxs9("span", {
                       className: "flex items-center gap-2",
                       children: [
-                        /* @__PURE__ */ jsx9("span", {
+                        /* @__PURE__ */ jsx10("span", {
                           className: cn("h-2 w-2 shrink-0 rounded-full", s.live ? "animate-pulse bg-accent" : s.status === "active" ? "bg-success" : s.status === "listening" ? "bg-info" : s.status === "error" ? "bg-destructive" : "bg-muted-foreground/40"),
                           "aria-label": s.live ? "working" : s.status,
                           "data-live": s.live ? "true" : undefined
                         }),
-                        /* @__PURE__ */ jsx9("span", {
+                        /* @__PURE__ */ jsx10("span", {
                           className: "min-w-0 flex-1 truncate font-medium",
                           children: title
                         }),
-                        s.pendingQuestion && /* @__PURE__ */ jsx9("span", {
+                        s.pendingQuestion && /* @__PURE__ */ jsx10("span", {
                           className: "shrink-0 rounded-full bg-warning px-1.5 text-[10px] font-medium text-warning-foreground",
                           children: "question"
                         })
                       ]
                     }),
-                    /* @__PURE__ */ jsxs7("span", {
+                    /* @__PURE__ */ jsxs9("span", {
                       className: "flex gap-2 truncate text-[11.5px] text-muted-foreground",
                       children: [
-                        s.hop && /* @__PURE__ */ jsx9("span", {
+                        s.hop && /* @__PURE__ */ jsx10("span", {
                           className: "truncate",
                           children: s.hop
                         }),
-                        s.relCwd && /* @__PURE__ */ jsx9("span", {
+                        s.relCwd && /* @__PURE__ */ jsx10("span", {
                           className: "truncate",
                           children: s.relCwd
                         }),
-                        /* @__PURE__ */ jsx9("span", {
+                        /* @__PURE__ */ jsx10("span", {
                           className: "ml-auto shrink-0 tabular-nums",
                           children: when(s.updatedAt)
                         })
@@ -1384,9 +1513,9 @@ function SessionList({ sessions, selectedId, onSelect, onNew, className }) {
   });
 }
 // src/components/Composer.tsx
-import { useCallback as useCallback2, useEffect as useEffect5, useRef as useRef3, useState as useState4 } from "react";
+import { useCallback as useCallback2, useEffect as useEffect5, useRef as useRef3, useState as useState5 } from "react";
 import { ArrowUp, ImagePlus, Square as Square2, X as X2 } from "lucide-react";
-import { jsx as jsx10, jsxs as jsxs8 } from "react/jsx-runtime";
+import { jsx as jsx11, jsxs as jsxs10 } from "react/jsx-runtime";
 var ACCEPT = ["image/png", "image/jpeg", "image/gif", "image/webp"];
 async function fileToAttachment(f) {
   const buf = new Uint8Array(await f.arrayBuffer());
@@ -1395,17 +1524,34 @@ async function fileToAttachment(f) {
     bin += String.fromCharCode(...buf.subarray(i, i + 32768));
   return { name: f.name || "image", mediaType: f.type, data: btoa(bin), previewUrl: URL.createObjectURL(f) };
 }
-function Composer({ onSubmit, running, onStop, disabled, disabledReason, placeholder = "Ask yodex to do something…", hopOptions, hop, onHopChange, leading, maxAttachmentBytes = 8 * 1024 * 1024, className, autoFocus }) {
-  const [text, setText] = useState4("");
-  const [attachments, setAttachments] = useState4([]);
-  const [note, setNote] = useState4(null);
+function coarsePointer() {
+  return typeof window !== "undefined" && typeof window.matchMedia === "function" && window.matchMedia("(pointer: coarse)").matches;
+}
+function Composer({ onSubmit, running, onStop, onSteer, value, onChange, initialValue, submitOnEnter, hideAttach, disabled, disabledReason, placeholder = "Ask yodex to do something…", hopOptions, hop, onHopChange, leading, maxAttachmentBytes = 8 * 1024 * 1024, className, autoFocus }) {
+  const [own, setOwn] = useState5(initialValue ?? "");
+  const text = value ?? own;
+  const setText = (t) => {
+    if (value === undefined)
+      setOwn(t);
+    onChange?.(t);
+  };
+  const [attachments, setAttachments] = useState5([]);
+  const [note, setNote] = useState5(null);
   const ref = useRef3(null);
   useEffect5(() => {
     const el = ref.current;
     if (!el)
       return;
-    el.style.height = "0px";
-    el.style.height = `${Math.min(el.scrollHeight, 240)}px`;
+    const fit = () => {
+      el.style.height = "0px";
+      el.style.height = `${Math.min(el.scrollHeight, 240)}px`;
+    };
+    fit();
+    if (typeof ResizeObserver === "undefined")
+      return;
+    const ro = new ResizeObserver(fit);
+    ro.observe(el);
+    return () => ro.disconnect();
   }, [text]);
   const addFiles = useCallback2(async (files) => {
     const list = [...files].filter((f) => ACCEPT.includes(f.type));
@@ -1426,10 +1572,16 @@ function Composer({ onSubmit, running, onStop, disabled, disabledReason, placeho
       URL.revokeObjectURL(gone.previewUrl);
     return a.filter((_, j) => j !== i);
   });
-  const canSend = !disabled && !running && (text.trim().length > 0 || attachments.length > 0);
+  const steering = Boolean(running && onSteer);
+  const canSend = !disabled && (steering ? text.trim().length > 0 : !running && (text.trim().length > 0 || attachments.length > 0));
   const submit = () => {
     if (!canSend)
       return;
+    if (steering) {
+      onSteer(text.trim());
+      setText("");
+      return;
+    }
     onSubmit(text.trim(), attachments);
     setText("");
     for (const a of attachments)
@@ -1438,10 +1590,13 @@ function Composer({ onSubmit, running, onStop, disabled, disabledReason, placeho
     setAttachments([]);
   };
   const onKey = (e) => {
-    if (e.key === "Enter" && !e.shiftKey && !e.nativeEvent.isComposing) {
-      e.preventDefault();
-      submit();
-    }
+    if (e.key !== "Enter" || e.shiftKey || e.nativeEvent.isComposing)
+      return;
+    const enterSends = submitOnEnter ?? !coarsePointer();
+    if (!enterSends)
+      return;
+    e.preventDefault();
+    submit();
   };
   const onPaste = (e) => {
     const files = [...e.clipboardData.files];
@@ -1456,39 +1611,42 @@ function Composer({ onSubmit, running, onStop, disabled, disabledReason, placeho
       addFiles(e.dataTransfer.files);
     }
   };
-  return /* @__PURE__ */ jsxs8("div", {
+  return /* @__PURE__ */ jsxs10("div", {
     className: cn("yx-composer rounded-lg border border-border bg-card shadow-sm", disabled && "opacity-70", className),
     onDrop,
     onDragOver: (e) => e.preventDefault(),
     "data-disabled": disabled ? "true" : undefined,
     children: [
-      attachments.length > 0 && /* @__PURE__ */ jsx10("ul", {
+      attachments.length > 0 && /* @__PURE__ */ jsx11("ul", {
         className: "flex flex-wrap gap-2 px-3 pt-3",
         "aria-label": "attachments",
-        children: attachments.map((a, i) => /* @__PURE__ */ jsxs8("li", {
+        children: attachments.map((a, i) => /* @__PURE__ */ jsxs10("li", {
           className: "relative",
           children: [
-            a.previewUrl ? /* @__PURE__ */ jsx10("img", {
+            a.previewUrl ? /* @__PURE__ */ jsx11("img", {
               src: a.previewUrl,
               alt: a.name,
               className: "h-14 w-14 rounded-md border border-border object-cover"
-            }) : /* @__PURE__ */ jsx10("span", {
+            }) : /* @__PURE__ */ jsx11("span", {
               className: "block h-14 w-14 rounded-md border border-border bg-muted"
             }),
-            /* @__PURE__ */ jsx10("button", {
+            /* @__PURE__ */ jsx11("button", {
               type: "button",
               onClick: () => remove(i),
               "aria-label": `Remove ${a.name}`,
-              className: "absolute -right-2 -top-2 flex h-6 w-6 items-center justify-center rounded-full border border-border bg-background",
-              children: /* @__PURE__ */ jsx10(X2, {
-                className: "h-3 w-3",
-                "aria-hidden": true
+              className: "absolute -right-4 -top-4 flex h-11 w-11 items-center justify-center rounded-full",
+              children: /* @__PURE__ */ jsx11("span", {
+                className: "flex h-6 w-6 items-center justify-center rounded-full border border-border bg-background",
+                children: /* @__PURE__ */ jsx11(X2, {
+                  className: "h-3 w-3",
+                  "aria-hidden": true
+                })
               })
             })
           ]
         }, `${a.name}-${i}`))
       }),
-      /* @__PURE__ */ jsx10("textarea", {
+      /* @__PURE__ */ jsx11("textarea", {
         ref,
         value: text,
         onChange: (e) => setText(e.target.value),
@@ -1497,35 +1655,35 @@ function Composer({ onSubmit, running, onStop, disabled, disabledReason, placeho
         disabled,
         autoFocus,
         rows: 1,
-        placeholder: disabled && disabledReason ? disabledReason : placeholder,
-        "aria-label": "Message",
-        className: "block w-full resize-none bg-transparent px-3 py-3 text-[15px] leading-6 placeholder:text-muted-foreground focus-visible:outline-none"
+        placeholder: disabled && disabledReason ? disabledReason : steering ? "Steer the agent (it reads this at its next step)…" : placeholder,
+        "aria-label": steering ? "Steer" : "Message",
+        className: "block w-full resize-none bg-transparent px-3 py-3 text-[16px] leading-6 placeholder:text-muted-foreground focus-visible:outline-none"
       }),
-      /* @__PURE__ */ jsxs8("div", {
+      /* @__PURE__ */ jsxs10("div", {
         className: "flex items-center gap-1 px-2 pb-2",
         children: [
           leading,
-          hopOptions && hopOptions.length > 0 && /* @__PURE__ */ jsx10("select", {
+          hopOptions && hopOptions.length > 0 && /* @__PURE__ */ jsx11("select", {
             value: hop ?? "",
             onChange: (e) => onHopChange?.(e.target.value),
             disabled,
             "aria-label": "HOP",
             className: "min-h-9 max-w-[45%] rounded-md border border-border bg-background px-2 text-[12.5px]",
-            children: hopOptions.map((o) => /* @__PURE__ */ jsx10("option", {
+            children: hopOptions.map((o) => /* @__PURE__ */ jsx11("option", {
               value: o.value,
               title: o.description,
               children: o.label
             }, o.value))
           }),
-          /* @__PURE__ */ jsxs8("label", {
+          !hideAttach && /* @__PURE__ */ jsxs10("label", {
             className: cn("flex h-11 w-11 cursor-pointer items-center justify-center rounded-md text-muted-foreground hover:bg-muted", disabled && "pointer-events-none"),
             "aria-label": "Attach image",
             children: [
-              /* @__PURE__ */ jsx10(ImagePlus, {
+              /* @__PURE__ */ jsx11(ImagePlus, {
                 className: "h-4 w-4",
                 "aria-hidden": true
               }),
-              /* @__PURE__ */ jsx10("input", {
+              /* @__PURE__ */ jsx11("input", {
                 type: "file",
                 accept: ACCEPT.join(","),
                 multiple: true,
@@ -1535,29 +1693,29 @@ function Composer({ onSubmit, running, onStop, disabled, disabledReason, placeho
               })
             ]
           }),
-          note && /* @__PURE__ */ jsx10("span", {
+          note && /* @__PURE__ */ jsx11("span", {
             className: "truncate text-[12px] text-destructive",
             children: note
           }),
-          /* @__PURE__ */ jsx10("span", {
+          /* @__PURE__ */ jsx11("span", {
             className: "flex-1"
           }),
-          running ? /* @__PURE__ */ jsx10("button", {
+          running && onStop && !(steering && text.trim()) ? /* @__PURE__ */ jsx11("button", {
             type: "button",
             onClick: onStop,
             "aria-label": "Stop",
             className: "flex h-11 w-11 items-center justify-center rounded-md bg-destructive text-destructive-foreground",
-            children: /* @__PURE__ */ jsx10(Square2, {
+            children: /* @__PURE__ */ jsx11(Square2, {
               className: "h-4 w-4",
               "aria-hidden": true
             })
-          }) : /* @__PURE__ */ jsx10("button", {
+          }) : /* @__PURE__ */ jsx11("button", {
             type: "button",
             onClick: submit,
             disabled: !canSend,
             "aria-label": "Send",
             className: "flex h-11 w-11 items-center justify-center rounded-md bg-primary text-primary-foreground disabled:opacity-40",
-            children: /* @__PURE__ */ jsx10(ArrowUp, {
+            children: /* @__PURE__ */ jsx11(ArrowUp, {
               className: "h-4 w-4",
               "aria-hidden": true
             })
@@ -1582,6 +1740,7 @@ export {
   buildOutcome,
   applyEvent,
   YodexClient,
+  TranscriptRow,
   Transcript,
   ToolCall,
   SessionList,
@@ -1591,8 +1750,9 @@ export {
   PermissionPrompt,
   DiffView,
   Composer,
-  AssistantMessage
+  AssistantMessage,
+  ApprovalPrompt
 };
 
-//# debugId=20955FCF1BAF8E9564756E2164756E21
+//# debugId=C0D62ACAF9016C3D64756E2164756E21
 //# sourceMappingURL=index.js.map