@mlpal/yodex-ui 0.0.0-stage → 0.2.0

package/dist/index.js

@@ -0,0 +1,1598 @@
+// src/client/client.ts
+class YodexClient {
+  socket = null;
+  closedByUser = false;
+  attempt = 0;
+  reconnectHandle = null;
+  pending = new Map;
+  opts;
+  seq = 0;
+  state = "closed";
+  constructor(options) {
+    this.opts = {
+      backoffMs: { min: 500, max: 1e4 },
+      requestTimeoutMs: 15000,
+      socketFactory: (url) => new WebSocket(url),
+      setTimer: (fn, ms) => setTimeout(fn, ms),
+      clearTimer: (h) => clearTimeout(h),
+      random: Math.random,
+      ...options
+    };
+  }
+  get url() {
+    const u = this.opts.url;
+    if (!this.opts.token)
+      return u;
+    return `${u}${u.includes("?") ? "&" : "?"}token=${encodeURIComponent(this.opts.token)}`;
+  }
+  connect() {
+    this.closedByUser = false;
+    this.open();
+  }
+  close() {
+    this.closedByUser = true;
+    if (this.reconnectHandle)
+      this.opts.clearTimer(this.reconnectHandle);
+    this.reconnectHandle = null;
+    this.socket?.close();
+    this.socket = null;
+    this.failPending(new Error("client closed"));
+    this.setState("closed");
+  }
+  setState(s) {
+    if (this.state === s)
+      return;
+    this.state = s;
+    this.opts.onState?.(s);
+  }
+  open() {
+    this.setState(this.attempt === 0 ? "connecting" : "reconnecting");
+    const ws = this.opts.socketFactory(this.url);
+    this.socket = ws;
+    ws.onopen = () => {
+      this.attempt = 0;
+    };
+    ws.onmessage = (ev) => {
+      let m;
+      try {
+        m = JSON.parse(String(ev.data));
+      } catch {
+        return;
+      }
+      if (m.type === "ready")
+        this.setState("connected");
+      const rid = m.requestId;
+      if (rid && this.pending.has(rid) && m.type !== "done") {
+        const p = this.pending.get(rid);
+        this.pending.delete(rid);
+        this.opts.clearTimer(p.timer);
+        p.resolve(m);
+      }
+      this.opts.onMessage(m);
+    };
+    ws.onerror = () => {};
+    ws.onclose = () => {
+      if (this.socket !== ws)
+        return;
+      this.socket = null;
+      this.failPending(new Error("connection lost"));
+      if (this.closedByUser)
+        return;
+      this.scheduleReconnect();
+    };
+  }
+  scheduleReconnect() {
+    const { min, max } = this.opts.backoffMs;
+    const base = Math.min(max, min * 2 ** this.attempt);
+    const delay = Math.round(base * (0.5 + this.opts.random() * 0.5));
+    this.attempt += 1;
+    this.setState("reconnecting");
+    this.reconnectHandle = this.opts.setTimer(() => {
+      this.reconnectHandle = null;
+      if (!this.closedByUser)
+        this.open();
+    }, delay);
+  }
+  failPending(e) {
+    for (const p of this.pending.values()) {
+      this.opts.clearTimer(p.timer);
+      p.reject(e);
+    }
+    this.pending.clear();
+  }
+  get connected() {
+    return this.state === "connected" && this.socket !== null;
+  }
+  send(m) {
+    if (!this.socket || this.state !== "connected")
+      throw new Error("not connected");
+    this.socket.send(JSON.stringify(m));
+  }
+  requestId() {
+    return `${Date.now().toString(36)}-${(++this.seq).toString(36)}`;
+  }
+  request(m, _expect) {
+    return new Promise((resolve, reject) => {
+      const timer = this.opts.setTimer(() => {
+        this.pending.delete(m.requestId);
+        reject(new Error(`${m.type}: no reply within ${this.opts.requestTimeoutMs} ms`));
+      }, this.opts.requestTimeoutMs);
+      this.pending.set(m.requestId, { resolve: (r) => resolve(r), reject, timer });
+      try {
+        this.send(m);
+      } catch (e) {
+        this.pending.delete(m.requestId);
+        this.opts.clearTimer(timer);
+        reject(e);
+      }
+    });
+  }
+  run(prompt, options = {}) {
+    const requestId = this.requestId();
+    this.send({ type: "run", requestId, prompt, ...options });
+    return requestId;
+  }
+  interrupt() {
+    this.send({ type: "interrupt" });
+  }
+  sendPeer(sessionId, text) {
+    this.send({ type: "send", sessionId, text });
+  }
+  respondPermission(id, decision, reason) {
+    this.send({ type: "permission_response", id, decision, ...reason ? { reason } : {} });
+  }
+  respondQuestion(id, outcome) {
+    this.send({ type: "question_response", id, outcome });
+  }
+  respondApproval(sessionId, decision, reason) {
+    this.send({ type: "approval_response", sessionId, decision, ...reason ? { reason } : {} });
+  }
+  listSessions() {
+    return this.request({ type: "list_sessions", requestId: this.requestId() }, "sessions");
+  }
+  listModels() {
+    return this.request({ type: "list_models", requestId: this.requestId() }, "models");
+  }
+  listSkills() {
+    return this.request({ type: "list_skills", requestId: this.requestId() }, "skills");
+  }
+  loadSession(sessionId) {
+    return this.request({ type: "load_session", requestId: this.requestId(), sessionId }, "session_history");
+  }
+}
+// src/client/reducer.ts
+import { addUsage, emptyUsage, HUMAN } from "@mlpal/harness-protocol";
+function initialState() {
+  return {
+    connection: "connecting",
+    capabilities: [],
+    items: [],
+    running: false,
+    usageTotal: emptyUsage(),
+    pendingPermissions: [],
+    sessions: [],
+    models: [],
+    skills: []
+  };
+}
+var TASK_TOOLS = new Set(["TaskCreate", "TaskUpdate", "TaskList"]);
+var seq = 0;
+var nextId = (prefix) => `${prefix}-${++seq}`;
+function textOf(content) {
+  if (typeof content === "string")
+    return content;
+  if (!Array.isArray(content))
+    return "";
+  return content.map((b) => b && typeof b === "object" && b.type === "text" ? String(b.text ?? "") : "").filter(Boolean).join(`
+`);
+}
+function replaceOrAppendPlan(items, plan) {
+  const idx = items.findIndex((i) => i.kind === "plan");
+  const row = { kind: "plan", id: "plan", items: plan };
+  if (idx === -1)
+    return [...items, row];
+  const out = items.slice();
+  out[idx] = row;
+  return out;
+}
+function currentPlan(items) {
+  const row = items.find((i) => i.kind === "plan");
+  return row && row.kind === "plan" ? row.items : [];
+}
+function dropDraft(items) {
+  const last = items[items.length - 1];
+  return last && last.kind === "assistant" && last.live ? items.slice(0, -1) : items;
+}
+function applyEvent(state, ev, live) {
+  switch (ev.type) {
+    case "system":
+      return { ...state, sessionId: ev.sessionId, model: state.model ?? ev.model, cwd: ev.cwd };
+    case "user": {
+      if (live && ev.author.type === "human")
+        return state;
+      const text = textOf(ev.message.content);
+      const blocks = Array.isArray(ev.message.content) ? ev.message.content.filter((b) => b.type !== "text") : undefined;
+      return {
+        ...state,
+        items: [...dropDraft(state.items), { kind: "user", id: nextId("u"), text, author: ev.author, ts: ev.ts, ...blocks?.length ? { blocks } : {} }]
+      };
+    }
+    case "text_delta": {
+      const items = state.items.slice();
+      const last = items[items.length - 1];
+      if (last && last.kind === "assistant" && last.live)
+        items[items.length - 1] = { ...last, text: last.text + ev.text };
+      else
+        items.push({ kind: "assistant", id: nextId("a"), text: ev.text, ts: new Date().toISOString(), live: true });
+      return { ...state, items, activity: "Responding" };
+    }
+    case "thinking_delta":
+      return state.activity === "Thinking" ? state : { ...state, activity: "Thinking" };
+    case "tool_use_start":
+      return { ...state, activity: ev.name };
+    case "reset":
+      return { ...state, items: dropDraft(state.items) };
+    case "assistant": {
+      let items = dropDraft(state.items);
+      const text = textOf(ev.message.content);
+      if (text.trim())
+        items = [...items, { kind: "assistant", id: nextId("a"), text, ts: ev.ts, live: false }];
+      let plan = currentPlan(items);
+      let planChanged = false;
+      if (Array.isArray(ev.message.content)) {
+        for (const b of ev.message.content) {
+          if (b.type !== "tool_use")
+            continue;
+          const input = b.input ?? {};
+          if (TASK_TOOLS.has(b.name)) {
+            if (b.name === "TaskCreate") {
+              plan = [...plan, { id: b.id, subject: String(input.subject ?? ""), ...input.description ? { description: String(input.description) } : {}, status: input.status ?? "pending" }];
+              planChanged = true;
+            } else if (b.name === "TaskUpdate") {
+              const id = String(input.id ?? "");
+              plan = plan.map((p) => p.id === id ? { ...p, ...input.status ? { status: input.status } : {}, ...input.subject ? { subject: String(input.subject) } : {}, ...input.description ? { description: String(input.description) } : {} } : p);
+              planChanged = true;
+            }
+            continue;
+          }
+          items = [...items, { kind: "tool", id: b.id, name: b.name, input, ts: ev.ts }];
+        }
+      }
+      if (planChanged)
+        items = replaceOrAppendPlan(items, plan);
+      return { ...state, items, usageTotal: addUsage(state.usageTotal, ev.usage), activity: undefined };
+    }
+    case "tool_result": {
+      const idx = state.items.findIndex((i) => i.kind === "tool" && i.id === ev.toolUseId);
+      if (idx !== -1) {
+        const items = state.items.slice();
+        const t = items[idx];
+        items[idx] = { ...t, result: { content: ev.content, isError: ev.isError, ...ev.diff ? { diff: ev.diff } : {}, ...ev.blocks ? { blocks: ev.blocks } : {} } };
+        return { ...state, items };
+      }
+      const m = /^#(\d+) created:/.exec(ev.content);
+      if (m && ev.toolName === "TaskCreate") {
+        const plan = currentPlan(state.items).map((p) => p.id === ev.toolUseId ? { ...p, id: m[1] } : p);
+        return { ...state, items: replaceOrAppendPlan(state.items, plan) };
+      }
+      return state;
+    }
+    case "result":
+      return {
+        ...state,
+        running: false,
+        activity: undefined,
+        lastResult: ev,
+        items: [...dropDraft(state.items), { kind: "result", id: nextId("r"), result: ev }]
+      };
+    case "error":
+      return { ...state, items: [...dropDraft(state.items), { kind: "error", id: nextId("e"), message: ev.message, ts: ev.ts }] };
+    case "compact":
+      return { ...state, items: [...state.items, { kind: "compact", id: nextId("c"), replacedMessages: ev.replacedMessages, ts: ev.ts }] };
+    case "rewind":
+      return state;
+  }
+}
+function reduce(state, action) {
+  switch (action.type) {
+    case "connection":
+      return { ...state, connection: action.state };
+    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":
+      return { ...state, error: action.message };
+    case "local_user":
+      return {
+        ...state,
+        items: [...state.items, { kind: "user", id: nextId("u"), text: action.text, author: HUMAN, ts: action.ts, ...action.blocks?.length ? { blocks: action.blocks } : {} }]
+      };
+    case "run_started":
+      return { ...state, running: true, runStartedAt: action.at, activity: "Thinking", error: undefined, lastResult: undefined, pendingApproval: undefined, ...action.sessionId ? { sessionId: action.sessionId } : {} };
+    case "permission_answered":
+      return { ...state, pendingPermissions: state.pendingPermissions.filter((p) => p.id !== action.id) };
+    case "question_answered":
+      return state.pendingQuestion?.id === action.id ? { ...state, pendingQuestion: undefined } : state;
+    case "history": {
+      let s = { ...state, items: [], sessionId: action.sessionId, usageTotal: emptyUsage(), lastResult: undefined };
+      for (const m of action.messages)
+        s = applyEvent(s, m, false);
+      return { ...s, running: state.running };
+    }
+    case "server": {
+      const m = action.message;
+      switch (m.type) {
+        case "ready":
+          return { ...state, connection: "connected", protocol: m.protocol, capabilities: m.capabilities ?? [], hop: m.hop, rootCwd: m.cwd };
+        case "event":
+          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 }] };
+        case "question_request":
+          return { ...state, pendingQuestion: { id: m.id, sessionId: m.sessionId, questions: m.questions } };
+        case "sessions":
+          return { ...state, sessions: m.sessions };
+        case "models":
+          return { ...state, models: m.models };
+        case "skills":
+          return { ...state, skills: m.skills };
+        case "session_history": {
+          const s = reduce(state, { type: "history", sessionId: m.sessionId, messages: m.messages });
+          return {
+            ...s,
+            pendingQuestion: m.pendingQuestion ? { id: m.pendingQuestion.id, sessionId: m.sessionId, questions: m.pendingQuestion.questions } : undefined,
+            pendingApproval: m.pendingApproval,
+            liveElsewhere: m.live ?? false
+          };
+        }
+        case "done":
+          return {
+            ...state,
+            running: false,
+            activity: undefined,
+            pendingPermissions: [],
+            sessionId: m.sessionId,
+            ...m.pendingApproval ? { pendingApproval: m.pendingApproval } : {},
+            ...m.usage && !state.lastResult ? { usageTotal: addUsage(state.usageTotal, m.usage) } : {}
+          };
+        case "error":
+          return { ...state, error: m.message, items: [...dropDraft(state.items), { kind: "error", id: nextId("e"), message: m.message, ts: new Date().toISOString() }] };
+        default:
+          return state;
+      }
+    }
+  }
+}
+function elapsedLabel(ms) {
+  const s = Math.max(0, Math.floor(ms / 1000));
+  return s < 60 ? `${s}s` : `${Math.floor(s / 60)}m ${s % 60}s`;
+}
+function resultLabel(r) {
+  switch (r.subtype) {
+    case "success":
+      return { label: "Done", tone: "ok" };
+    case "cancelled":
+      return { label: "Interrupted", tone: "muted" };
+    case "needs_approval":
+      return { label: "Needs your approval", tone: "warn" };
+    case "max_turns":
+      return { label: "Stopped at the turn limit", tone: "warn" };
+    case "error":
+      return { label: r.reason ? `Failed: ${r.reason}` : "Failed", tone: "bad" };
+    default:
+      return { label: String(r.subtype).replace(/_/g, " "), tone: "warn" };
+  }
+}
+function formatTokens(u) {
+  const k = (n) => n >= 1e4 ? `${(n / 1000).toFixed(1)}k` : String(n);
+  return `${k(u.input_tokens)}↑ ${k(u.output_tokens)}↓`;
+}
+// src/client/useYodexSession.ts
+import { useCallback, useEffect, useMemo, useReducer, useRef } from "react";
+function useYodexSession(options) {
+  const [state, dispatch] = useReducer(reduce, undefined, initialState);
+  const sessionIdRef = useRef(options.sessionId);
+  const client = useMemo(() => new YodexClient({
+    url: options.url,
+    token: options.token,
+    socketFactory: options.socketFactory,
+    onState: (s) => dispatch({ type: "connection", state: s }),
+    onMessage: (m) => {
+      dispatch({ type: "server", message: m });
+      if (m.type === "ready" && sessionIdRef.current) {
+        client.loadSession(sessionIdRef.current).catch((e) => dispatch({ type: "error", message: e.message }));
+      }
+    }
+  }), [options.url, options.token, options.socketFactory]);
+  useEffect(() => {
+    if (options.autoConnect === false)
+      return;
+    client.connect();
+    return () => client.close();
+  }, [client, options.autoConnect]);
+  useEffect(() => {
+    sessionIdRef.current = state.sessionId ?? options.sessionId;
+  }, [state.sessionId, options.sessionId]);
+  const guard = useCallback((fn) => {
+    try {
+      fn();
+    } catch (e) {
+      dispatch({ type: "error", message: e.message });
+    }
+  }, []);
+  const run = useCallback((text, attachments = [], runOptions = {}) => {
+    const blocks = attachments.map((a) => ({ type: "image", source: { type: "base64", media_type: a.mediaType, data: a.data } }));
+    if (blocks.length && !state.capabilities.includes("attachments")) {
+      dispatch({ type: "error", message: "This server does not accept image attachments; the message was not sent." });
+      return;
+    }
+    guard(() => {
+      const sessionId = sessionIdRef.current;
+      dispatch({ type: "local_user", text, ts: new Date().toISOString(), blocks });
+      dispatch({ type: "run_started", sessionId, at: Date.now() });
+      client.run(text, { ...sessionId ? { sessionId } : {}, ...options.run, ...runOptions, ...blocks.length ? { blocks } : {} });
+    });
+  }, [client, guard, options.run, state.capabilities]);
+  const stop = useCallback(() => guard(() => client.interrupt()), [client, guard]);
+  const allow = useCallback((id) => guard(() => {
+    client.respondPermission(id, "allow");
+    dispatch({ type: "permission_answered", id });
+  }), [client, guard]);
+  const deny = useCallback((id, reason) => guard(() => {
+    client.respondPermission(id, "deny", reason);
+    dispatch({ type: "permission_answered", id });
+  }), [client, guard]);
+  const answer = useCallback((id, outcome) => guard(() => {
+    client.respondQuestion(id, outcome);
+    dispatch({ type: "question_answered", id });
+  }), [client, guard]);
+  const approve = useCallback((decision, reason) => guard(() => {
+    const sessionId = sessionIdRef.current;
+    if (!sessionId)
+      throw new Error("no session to approve");
+    dispatch({ type: "run_started", sessionId, at: Date.now() });
+    client.respondApproval(sessionId, decision, reason);
+  }), [client, guard]);
+  const loadSession = useCallback(async (sessionId) => {
+    sessionIdRef.current = sessionId;
+    dispatch({ type: "clear" });
+    try {
+      await client.loadSession(sessionId);
+    } catch (e) {
+      dispatch({ type: "error", message: e.message });
+    }
+  }, [client]);
+  const refreshSessions = useCallback(async () => {
+    try {
+      await client.listSessions();
+    } catch (e) {
+      dispatch({ type: "error", message: e.message });
+    }
+  }, [client]);
+  const refreshModels = useCallback(async () => {
+    try {
+      await client.listModels();
+    } catch (e) {
+      dispatch({ type: "error", message: e.message });
+    }
+  }, [client]);
+  const newSession = useCallback(() => {
+    sessionIdRef.current = undefined;
+    dispatch({ type: "clear" });
+  }, []);
+  return { state, client, run, stop, allow, deny, answer, approve, loadSession, refreshSessions, refreshModels, newSession };
+}
+// src/components/Transcript.tsx
+import { useEffect as useEffect2, useRef as useRef2 } from "react";
+
+// src/components/AssistantMessage.tsx
+import Markdown from "react-markdown";
+import remarkGfm from "remark-gfm";
+
+// src/components/cn.ts
+import { clsx } from "clsx";
+import { twMerge } from "tailwind-merge";
+function cn(...inputs) {
+  return twMerge(clsx(inputs));
+}
+
+// src/components/AssistantMessage.tsx
+import { jsx } 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),
+    "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", {
+            ...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"
+        }),
+        td: ({ node: _n, ...props }) => /* @__PURE__ */ jsx("td", {
+          ...props,
+          className: "border border-border px-2 py-1 align-top"
+        })
+      },
+      children: text
+    })
+  });
+}
+
+// src/components/PlanChecklist.tsx
+import { Check, Circle, Loader2 } from "lucide-react";
+import { jsx as jsx2, jsxs } 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", {
+    className: cn("yx-plan rounded-md border border-border bg-card p-3 text-sm", className),
+    "aria-label": "plan",
+    children: [
+      /* @__PURE__ */ jsxs("div", {
+        className: "mb-2 flex items-center justify-between",
+        children: [
+          /* @__PURE__ */ jsx2("span", {
+            className: "font-medium",
+            children: "Plan"
+          }),
+          /* @__PURE__ */ jsxs("span", {
+            className: "font-mono text-[12px] tabular-nums text-muted-foreground",
+            children: [
+              done,
+              " / ",
+              items.length
+            ]
+          })
+        ]
+      }),
+      /* @__PURE__ */ jsx2("ol", {
+        className: "space-y-1",
+        children: items.map((t) => /* @__PURE__ */ jsxs("li", {
+          className: cn("flex items-start gap-2", t.status === "completed" && "text-muted-foreground line-through"),
+          "data-status": t.status,
+          children: [
+            t.status === "completed" ? /* @__PURE__ */ jsx2(Check, {
+              className: "mt-0.5 h-4 w-4 shrink-0 text-success",
+              "aria-label": "completed"
+            }) : t.status === "in_progress" ? /* @__PURE__ */ jsx2(Loader2, {
+              className: "mt-0.5 h-4 w-4 shrink-0 animate-spin text-info",
+              "aria-label": "in progress"
+            }) : /* @__PURE__ */ jsx2(Circle, {
+              className: "mt-0.5 h-4 w-4 shrink-0 text-muted-foreground",
+              "aria-label": "pending"
+            }),
+            /* @__PURE__ */ jsx2("span", {
+              children: t.subject
+            })
+          ]
+        }, t.id))
+      })
+    ]
+  });
+}
+
+// src/components/ToolCall.tsx
+import { useState } from "react";
+import { AlertCircle, Check as Check2, ChevronRight, FileDiff, Loader2 as Loader22, Terminal, Wrench } from "lucide-react";
+
+// src/components/DiffView.tsx
+import { jsx as jsx3 } from "react/jsx-runtime";
+function diffCounts(diff) {
+  let added = 0;
+  let removed = 0;
+  for (const line of diff.split(`
+`)) {
+    if (line.startsWith("+++") || line.startsWith("---"))
+      continue;
+    if (line.startsWith("+"))
+      added += 1;
+    else if (line.startsWith("-"))
+      removed += 1;
+  }
+  return { added, removed };
+}
+function DiffView({ diff, className }) {
+  const lines = diff.split(`
+`);
+  return /* @__PURE__ */ jsx3("pre", {
+    className: cn("yx-diff overflow-x-auto rounded-md border border-border bg-card font-mono text-[12px] leading-5", className),
+    "aria-label": "diff",
+    children: lines.map((line, i) => {
+      const kind = line.startsWith("+++") || line.startsWith("---") ? "file" : line.startsWith("@@") ? "hunk" : line.startsWith("+") ? "add" : line.startsWith("-") ? "del" : "ctx";
+      return /* @__PURE__ */ jsx3("div", {
+        className: cn("whitespace-pre px-3", kind === "add" && "bg-success/10 text-success", kind === "del" && "bg-destructive/10 text-destructive", kind === "hunk" && "text-info", kind === "file" && "text-muted-foreground"),
+        children: line || " "
+      }, i);
+    })
+  });
+}
+
+// src/components/ToolCall.tsx
+import { jsx as jsx4, jsxs as jsxs2, Fragment } from "react/jsx-runtime";
+function toolSummary(name, input) {
+  const pick = (...keys) => {
+    for (const k of keys) {
+      const v = input[k];
+      if (typeof v === "string" && v.trim())
+        return v.trim();
+    }
+    return "";
+  };
+  switch (name) {
+    case "Bash":
+      return pick("command");
+    case "Read":
+    case "Write":
+    case "Edit":
+    case "List":
+      return pick("file_path", "path");
+    case "Grep":
+    case "Glob":
+      return pick("pattern");
+    case "Task":
+    case "Agent":
+      return pick("description", "prompt");
+    case "WebFetch":
+      return pick("url");
+    case "WebSearch":
+      return pick("query");
+    case "Skill":
+      return pick("name", "skill");
+    default:
+      return pick("command", "path", "file_path", "pattern", "query", "description", "name") || "";
+  }
+}
+function clip(s, n = 160) {
+  return s.length > n ? `${s.slice(0, n - 1)}…` : s;
+}
+var MAX_OUTPUT = 4000;
+function ToolCall({ item, defaultOpen = false, onOpenFile }) {
+  const [open, setOpen] = useState(defaultOpen);
+  const summary = toolSummary(item.name, item.input);
+  const r = item.result;
+  const status = !r ? "running" : r.isError ? "error" : "ok";
+  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", {
+    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", {
+        type: "button",
+        onClick: () => setOpen((o) => !o),
+        "aria-expanded": open,
+        className: "flex min-h-11 w-full items-center gap-2 px-3 py-2 text-left hover:bg-muted/60 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring",
+        children: [
+          /* @__PURE__ */ jsx4(ChevronRight, {
+            className: cn("h-4 w-4 shrink-0 text-muted-foreground transition-transform", open && "rotate-90"),
+            "aria-hidden": true
+          }),
+          /* @__PURE__ */ jsx4(Icon, {
+            className: "h-4 w-4 shrink-0 text-muted-foreground",
+            "aria-hidden": true
+          }),
+          /* @__PURE__ */ jsx4("span", {
+            className: "font-medium",
+            children: item.name
+          }),
+          summary && /* @__PURE__ */ jsx4("span", {
+            className: "min-w-0 flex-1 truncate font-mono text-[12.5px] text-muted-foreground",
+            children: clip(summary)
+          }),
+          counts && /* @__PURE__ */ jsxs2("span", {
+            className: "shrink-0 font-mono text-[12px] tabular-nums",
+            children: [
+              /* @__PURE__ */ jsxs2("span", {
+                className: "text-success",
+                children: [
+                  "+",
+                  counts.added
+                ]
+              }),
+              " ",
+              /* @__PURE__ */ jsxs2("span", {
+                className: "text-destructive",
+                children: [
+                  "−",
+                  counts.removed
+                ]
+              })
+            ]
+          }),
+          status === "running" && /* @__PURE__ */ jsx4(Loader22, {
+            className: "h-4 w-4 shrink-0 animate-spin text-muted-foreground",
+            "aria-label": "running"
+          }),
+          status === "ok" && /* @__PURE__ */ jsx4(Check2, {
+            className: "h-4 w-4 shrink-0 text-success",
+            "aria-label": "ok"
+          }),
+          status === "error" && /* @__PURE__ */ jsx4(AlertCircle, {
+            className: "h-4 w-4 shrink-0 text-destructive",
+            "aria-label": "error"
+          })
+        ]
+      }),
+      open && /* @__PURE__ */ jsxs2("div", {
+        className: "border-t border-border px-3 py-2",
+        children: [
+          /* @__PURE__ */ jsx4("div", {
+            className: "mb-1 text-[11px] uppercase tracking-wide text-muted-foreground",
+            children: "input"
+          }),
+          /* @__PURE__ */ jsx4("pre", {
+            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, {
+            children: [
+              /* @__PURE__ */ jsxs2("div", {
+                className: "mb-1 mt-2 flex items-center gap-2 text-[11px] uppercase tracking-wide text-muted-foreground",
+                children: [
+                  /* @__PURE__ */ jsx4("span", {
+                    children: r.isError ? "error" : "result"
+                  }),
+                  path && onOpenFile && /* @__PURE__ */ jsx4("button", {
+                    type: "button",
+                    onClick: () => onOpenFile(path),
+                    className: "ml-auto min-h-8 rounded px-2 text-info hover:bg-muted",
+                    children: "open file"
+                  })
+                ]
+              }),
+              r.diff ? /* @__PURE__ */ jsx4(DiffView, {
+                diff: r.diff
+              }) : /* @__PURE__ */ jsx4("pre", {
+                className: cn("max-h-80 overflow-auto whitespace-pre-wrap break-words font-mono text-[12px] leading-5", r.isError && "text-destructive"),
+                children: r.content.length > MAX_OUTPUT ? `${r.content.slice(0, MAX_OUTPUT)}
+… (${r.content.length - MAX_OUTPUT} more characters)` : r.content || "(no output)"
+              })
+            ]
+          })
+        ]
+      })
+    ]
+  });
+}
+
+// src/components/Transcript.tsx
+import { jsx as jsx5, jsxs as jsxs3 } from "react/jsx-runtime";
+function Transcript({ items, autoScroll = true, onOpenFile, footer, emptyState, className }) {
+  const ref = useRef2(null);
+  const pinned = useRef2(true);
+  useEffect2(() => {
+    const el = ref.current;
+    if (!el)
+      return;
+    const onScroll = () => {
+      pinned.current = el.scrollHeight - el.scrollTop - el.clientHeight < 48;
+    };
+    el.addEventListener("scroll", onScroll, { passive: true });
+    return () => el.removeEventListener("scroll", onScroll);
+  }, []);
+  useEffect2(() => {
+    const el = ref.current;
+    if (el && autoScroll && pinned.current)
+      el.scrollTop = el.scrollHeight;
+  });
+  return /* @__PURE__ */ jsx5("div", {
+    ref,
+    className: cn("yx-transcript flex-1 overflow-y-auto px-4 py-3", className),
+    role: "log",
+    "aria-live": "polite",
+    children: /* @__PURE__ */ jsxs3("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);
+          }
+        }),
+        footer
+      ]
+    })
+  });
+}
+// src/components/PermissionPrompt.tsx
+import { useEffect as useEffect3 } from "react";
+import { ShieldAlert } from "lucide-react";
+import { jsx as jsx6, jsxs as jsxs4 } 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")
+    return v;
+  const s = JSON.stringify(p.input);
+  return s.length > 240 ? `${s.slice(0, 239)}…` : s;
+}
+function PermissionPrompt({ request, onAllow, onDeny, className }) {
+  useEffect3(() => {
+    const key = (e) => {
+      const t = e.target;
+      if (t && (t.tagName === "TEXTAREA" || t.tagName === "INPUT" || t.isContentEditable))
+        return;
+      if (e.key === "a")
+        onAllow(request.id);
+      else if (e.key === "d")
+        onDeny(request.id);
+    };
+    document.addEventListener("keydown", key);
+    return () => document.removeEventListener("keydown", key);
+  }, [request.id, onAllow, onDeny]);
+  return /* @__PURE__ */ jsxs4("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", {
+        id: `perm-${request.id}`,
+        className: "mb-2 flex items-center gap-2 font-medium",
+        children: [
+          /* @__PURE__ */ jsx6(ShieldAlert, {
+            className: "h-4 w-4 text-warning",
+            "aria-hidden": true
+          }),
+          "Run ",
+          /* @__PURE__ */ jsx6("span", {
+            className: "font-mono",
+            children: request.toolName
+          }),
+          "?"
+        ]
+      }),
+      /* @__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",
+        children: [
+          /* @__PURE__ */ jsxs4("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"
+              })
+            ]
+          }),
+          /* @__PURE__ */ jsxs4("button", {
+            type: "button",
+            onClick: () => 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"
+              })
+            ]
+          })
+        ]
+      })
+    ]
+  });
+}
+// src/components/QuestionForm.tsx
+import { useState as useState2 } from "react";
+import { HelpCircle, X } from "lucide-react";
+import { jsx as jsx7, jsxs as jsxs5 } from "react/jsx-runtime";
+function emptyDraft(questions) {
+  return { selected: questions.map(() => []), notes: questions.map(() => "") };
+}
+function buildOutcome(questions, draft, declined = false) {
+  if (declined)
+    return { declined: true, answers: [] };
+  return {
+    declined: false,
+    answers: questions.map((q, i) => {
+      const picked = draft.selected[i] ?? [];
+      const note = (draft.notes[i] ?? "").trim();
+      const answers = picked.length ? picked : note ? [note] : [];
+      return { question: q.question, answers, ...picked.length && note ? { note } : {} };
+    })
+  };
+}
+function chip(q, i) {
+  const h = (q.header ?? "").trim();
+  return h || `Q${i + 1}`;
+}
+function QuestionForm({ request, onSubmit, onDecline, className }) {
+  const qs = request.questions;
+  const [tab, setTab] = useState2(0);
+  const [draft, setDraft] = useState2(() => emptyDraft(qs));
+  const q = qs[tab];
+  if (!q)
+    return null;
+  const picked = draft.selected[tab] ?? [];
+  const toggle = (label) => {
+    setDraft((d) => {
+      const selected = d.selected.slice();
+      const cur = selected[tab] ?? [];
+      selected[tab] = q.multiSelect ? cur.includes(label) ? cur.filter((l) => l !== label) : [...cur, label] : cur[0] === label ? [] : [label];
+      return { ...d, selected };
+    });
+  };
+  const setNote = (v) => setDraft((d) => {
+    const notes = d.notes.slice();
+    notes[tab] = v;
+    return { ...d, notes };
+  });
+  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", {
+    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", {
+        className: "flex items-center gap-2 border-b border-border px-3 py-2",
+        children: [
+          /* @__PURE__ */ jsx7(HelpCircle, {
+            className: "h-4 w-4 text-info",
+            "aria-hidden": true
+          }),
+          /* @__PURE__ */ jsx7("span", {
+            className: "font-medium",
+            children: "The agent needs your input"
+          }),
+          /* @__PURE__ */ jsx7("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, {
+              className: "h-4 w-4",
+              "aria-hidden": true
+            })
+          })
+        ]
+      }),
+      qs.length > 1 && /* @__PURE__ */ jsx7("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", {
+          role: "tab",
+          type: "button",
+          "aria-selected": i === tab,
+          onClick: () => setTab(i),
+          className: cn("min-h-9 shrink-0 rounded-md px-3 text-[12px]", i === tab ? "bg-primary text-primary-foreground" : "bg-muted text-muted-foreground hover:bg-muted/70", answered[i] && i !== tab && "ring-1 ring-success"),
+          children: chip(qq, i)
+        }, i))
+      }),
+      /* @__PURE__ */ jsxs5("div", {
+        className: "space-y-3 p-3",
+        children: [
+          /* @__PURE__ */ jsx7("p", {
+            className: "font-medium",
+            children: q.question
+          }),
+          (q.options ?? []).length > 0 && /* @__PURE__ */ jsx7("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", {
+                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", {
+                    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", {
+                    className: "min-w-0",
+                    children: [
+                      /* @__PURE__ */ jsx7("span", {
+                        className: "block font-medium",
+                        children: o.label
+                      }),
+                      o.description && /* @__PURE__ */ jsx7("span", {
+                        className: "block text-muted-foreground",
+                        children: o.description
+                      })
+                    ]
+                  })
+                ]
+              }, o.label);
+            })
+          }),
+          previewOf && /* @__PURE__ */ jsx7("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", {
+            className: "block",
+            children: [
+              /* @__PURE__ */ jsx7("span", {
+                className: "mb-1 block text-[12px] text-muted-foreground",
+                children: (q.options ?? []).length ? "Add a note (optional)" : "Your answer"
+              }),
+              /* @__PURE__ */ jsx7("textarea", {
+                value: draft.notes[tab] ?? "",
+                onChange: (e) => setNote(e.target.value),
+                rows: 2,
+                className: "w-full rounded-md border border-border bg-input-background px-3 py-2 text-sm focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring"
+              })
+            ]
+          }),
+          /* @__PURE__ */ jsxs5("div", {
+            className: "flex gap-2",
+            children: [
+              tab < qs.length - 1 ? /* @__PURE__ */ jsx7("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", {
+                type: "button",
+                onClick: () => onSubmit(request.id, buildOutcome(qs, draft)),
+                disabled: !answered.some(Boolean),
+                className: "min-h-11 flex-1 rounded-md bg-primary px-4 font-medium text-primary-foreground hover:opacity-90 disabled:opacity-50",
+                children: "Submit"
+              })
+            ]
+          })
+        ]
+      })
+    ]
+  });
+}
+// src/components/RunStatus.tsx
+import { useEffect as useEffect4, useState as useState3 } 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);
+  useEffect4(() => {
+    if (!running)
+      return;
+    const h = setInterval(() => tick((n) => n + 1), 1000);
+    return () => clearInterval(h);
+  }, [running]);
+  if (connection && connection !== "connected") {
+    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",
+      children: [
+        /* @__PURE__ */ jsx8(Loader23, {
+          className: "h-3.5 w-3.5 animate-spin",
+          "aria-hidden": true
+        }),
+        connection === "closed" ? "Disconnected" : connection === "reconnecting" ? "Reconnecting…" : "Connecting…"
+      ]
+    });
+  }
+  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",
+      children: [
+        /* @__PURE__ */ jsx8(Loader23, {
+          className: "h-3.5 w-3.5 animate-spin text-accent",
+          "aria-hidden": true
+        }),
+        /* @__PURE__ */ jsx8("span", {
+          children: activity ?? "Working"
+        }),
+        startedAt !== undefined && /* @__PURE__ */ jsxs6("span", {
+          className: "font-mono tabular-nums",
+          children: [
+            "· ",
+            elapsedLabel(now() - startedAt)
+          ]
+        }),
+        onStop && /* @__PURE__ */ jsxs6("button", {
+          type: "button",
+          onClick: onStop,
+          className: "ml-auto flex min-h-9 items-center gap-1 rounded-md px-2 hover:bg-muted",
+          "aria-label": "Stop",
+          children: [
+            /* @__PURE__ */ jsx8(Square, {
+              className: "h-3.5 w-3.5",
+              "aria-hidden": true
+            }),
+            " Stop"
+          ]
+        })
+      ]
+    });
+  }
+  if (!lastResult)
+    return null;
+  const { label, tone } = resultLabel(lastResult);
+  const needsApproval = lastResult.subtype === "needs_approval";
+  return /* @__PURE__ */ jsxs6("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, {
+        className: "h-3.5 w-3.5 text-success",
+        "aria-hidden": true
+      }) : tone === "bad" ? /* @__PURE__ */ jsx8(AlertTriangle, {
+        className: "h-3.5 w-3.5 text-destructive",
+        "aria-hidden": true
+      }) : /* @__PURE__ */ jsx8(AlertTriangle, {
+        className: cn("h-3.5 w-3.5", tone === "warn" ? "text-warning" : "text-muted-foreground"),
+        "aria-hidden": true
+      }),
+      /* @__PURE__ */ jsx8("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", {
+        className: "text-muted-foreground",
+        children: "·"
+      }),
+      /* @__PURE__ */ jsxs6("span", {
+        className: "font-mono tabular-nums text-muted-foreground",
+        children: [
+          lastResult.numTurns,
+          " step",
+          lastResult.numTurns === 1 ? "" : "s",
+          " · ",
+          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"
+              })
+            ]
+          })
+        ]
+      })
+    ]
+  });
+}
+// src/components/SessionList.tsx
+import { Plus } from "lucide-react";
+import { jsx as jsx9, jsxs as jsxs7 } from "react/jsx-runtime";
+function groupSessions(rows) {
+  const groups = new Map;
+  for (const r of rows) {
+    const key = r.projectName ?? "";
+    if (!groups.has(key))
+      groups.set(key, []);
+    groups.get(key).push(r);
+  }
+  return [...groups.entries()].map(([project, rows2]) => ({ project, rows: rows2 }));
+}
+function when(iso) {
+  const t = Date.parse(iso);
+  if (Number.isNaN(t))
+    return "";
+  const d = new Date(t);
+  return `${d.toLocaleDateString(undefined, { month: "short", day: "numeric" })} ${d.toLocaleTimeString(undefined, { hour: "2-digit", minute: "2-digit" })}`;
+}
+function SessionList({ sessions, selectedId, onSelect, onNew, className }) {
+  const groups = groupSessions(sessions);
+  return /* @__PURE__ */ jsxs7("nav", {
+    className: cn("yx-sessions text-sm", className),
+    "aria-label": "Sessions",
+    children: [
+      onNew && /* @__PURE__ */ jsxs7("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, {
+            className: "h-4 w-4",
+            "aria-hidden": true
+          }),
+          " New session"
+        ]
+      }),
+      sessions.length === 0 && /* @__PURE__ */ jsx9("p", {
+        className: "px-3 py-2 text-muted-foreground",
+        children: "No sessions yet."
+      }),
+      groups.map((g) => /* @__PURE__ */ jsxs7("div", {
+        className: "mb-2",
+        children: [
+          g.project && /* @__PURE__ */ jsx9("div", {
+            className: "px-3 py-1 text-[11px] uppercase tracking-wide text-muted-foreground",
+            children: g.project
+          }),
+          /* @__PURE__ */ jsx9("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", {
+                  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", {
+                      className: "flex items-center gap-2",
+                      children: [
+                        /* @__PURE__ */ jsx9("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", {
+                          className: "min-w-0 flex-1 truncate font-medium",
+                          children: title
+                        }),
+                        s.pendingQuestion && /* @__PURE__ */ jsx9("span", {
+                          className: "shrink-0 rounded-full bg-warning px-1.5 text-[10px] font-medium text-warning-foreground",
+                          children: "question"
+                        })
+                      ]
+                    }),
+                    /* @__PURE__ */ jsxs7("span", {
+                      className: "flex gap-2 truncate text-[11.5px] text-muted-foreground",
+                      children: [
+                        s.hop && /* @__PURE__ */ jsx9("span", {
+                          className: "truncate",
+                          children: s.hop
+                        }),
+                        s.relCwd && /* @__PURE__ */ jsx9("span", {
+                          className: "truncate",
+                          children: s.relCwd
+                        }),
+                        /* @__PURE__ */ jsx9("span", {
+                          className: "ml-auto shrink-0 tabular-nums",
+                          children: when(s.updatedAt)
+                        })
+                      ]
+                    })
+                  ]
+                })
+              }, s.sessionId);
+            })
+          })
+        ]
+      }, g.project))
+    ]
+  });
+}
+// src/components/Composer.tsx
+import { useCallback as useCallback2, useEffect as useEffect5, useRef as useRef3, useState as useState4 } 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";
+var ACCEPT = ["image/png", "image/jpeg", "image/gif", "image/webp"];
+async function fileToAttachment(f) {
+  const buf = new Uint8Array(await f.arrayBuffer());
+  let bin = "";
+  for (let i = 0;i < buf.length; i += 32768)
+    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);
+  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`;
+  }, [text]);
+  const addFiles = useCallback2(async (files) => {
+    const list = [...files].filter((f) => ACCEPT.includes(f.type));
+    if (!list.length)
+      return;
+    const big = list.find((f) => f.size > maxAttachmentBytes);
+    if (big) {
+      setNote(`${big.name} is larger than ${Math.round(maxAttachmentBytes / 1024 / 1024)} MB`);
+      return;
+    }
+    const next = await Promise.all(list.map(fileToAttachment));
+    setAttachments((a) => [...a, ...next]);
+    setNote(null);
+  }, [maxAttachmentBytes]);
+  const remove = (i) => setAttachments((a) => {
+    const gone = a[i];
+    if (gone?.previewUrl)
+      URL.revokeObjectURL(gone.previewUrl);
+    return a.filter((_, j) => j !== i);
+  });
+  const canSend = !disabled && !running && (text.trim().length > 0 || attachments.length > 0);
+  const submit = () => {
+    if (!canSend)
+      return;
+    onSubmit(text.trim(), attachments);
+    setText("");
+    for (const a of attachments)
+      if (a.previewUrl)
+        URL.revokeObjectURL(a.previewUrl);
+    setAttachments([]);
+  };
+  const onKey = (e) => {
+    if (e.key === "Enter" && !e.shiftKey && !e.nativeEvent.isComposing) {
+      e.preventDefault();
+      submit();
+    }
+  };
+  const onPaste = (e) => {
+    const files = [...e.clipboardData.files];
+    if (files.length) {
+      e.preventDefault();
+      addFiles(files);
+    }
+  };
+  const onDrop = (e) => {
+    if (e.dataTransfer.files.length) {
+      e.preventDefault();
+      addFiles(e.dataTransfer.files);
+    }
+  };
+  return /* @__PURE__ */ jsxs8("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", {
+        className: "flex flex-wrap gap-2 px-3 pt-3",
+        "aria-label": "attachments",
+        children: attachments.map((a, i) => /* @__PURE__ */ jsxs8("li", {
+          className: "relative",
+          children: [
+            a.previewUrl ? /* @__PURE__ */ jsx10("img", {
+              src: a.previewUrl,
+              alt: a.name,
+              className: "h-14 w-14 rounded-md border border-border object-cover"
+            }) : /* @__PURE__ */ jsx10("span", {
+              className: "block h-14 w-14 rounded-md border border-border bg-muted"
+            }),
+            /* @__PURE__ */ jsx10("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
+              })
+            })
+          ]
+        }, `${a.name}-${i}`))
+      }),
+      /* @__PURE__ */ jsx10("textarea", {
+        ref,
+        value: text,
+        onChange: (e) => setText(e.target.value),
+        onKeyDown: onKey,
+        onPaste,
+        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"
+      }),
+      /* @__PURE__ */ jsxs8("div", {
+        className: "flex items-center gap-1 px-2 pb-2",
+        children: [
+          leading,
+          hopOptions && hopOptions.length > 0 && /* @__PURE__ */ jsx10("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", {
+              value: o.value,
+              title: o.description,
+              children: o.label
+            }, o.value))
+          }),
+          /* @__PURE__ */ jsxs8("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, {
+                className: "h-4 w-4",
+                "aria-hidden": true
+              }),
+              /* @__PURE__ */ jsx10("input", {
+                type: "file",
+                accept: ACCEPT.join(","),
+                multiple: true,
+                className: "sr-only",
+                disabled,
+                onChange: (e) => e.target.files && void addFiles(e.target.files)
+              })
+            ]
+          }),
+          note && /* @__PURE__ */ jsx10("span", {
+            className: "truncate text-[12px] text-destructive",
+            children: note
+          }),
+          /* @__PURE__ */ jsx10("span", {
+            className: "flex-1"
+          }),
+          running ? /* @__PURE__ */ jsx10("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, {
+              className: "h-4 w-4",
+              "aria-hidden": true
+            })
+          }) : /* @__PURE__ */ jsx10("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, {
+              className: "h-4 w-4",
+              "aria-hidden": true
+            })
+          })
+        ]
+      })
+    ]
+  });
+}
+export {
+  useYodexSession,
+  toolSummary,
+  resultLabel,
+  reduce,
+  permissionSummary,
+  initialState,
+  groupSessions,
+  formatTokens,
+  elapsedLabel,
+  diffCounts,
+  cn,
+  buildOutcome,
+  applyEvent,
+  YodexClient,
+  Transcript,
+  ToolCall,
+  SessionList,
+  RunStatus,
+  QuestionForm,
+  PlanChecklist,
+  PermissionPrompt,
+  DiffView,
+  Composer,
+  AssistantMessage
+};
+
+//# debugId=20955FCF1BAF8E9564756E2164756E21
+//# sourceMappingURL=index.js.map