@agentprojectcontext/apx 1.80.2 → 1.89.1

package/src/interfaces/web/src/components/routines/RoutineDetail.tsx

@@ -1,11 +1,15 @@
 import { Pencil, Play, Trash2, Zap } from "lucide-react";
+import useSWR from "swr";
+import { Agents } from "../../lib/api";
 import type { RoutineEntry } from "../../lib/api";
+import { AgentAvatar } from "../agents/AgentAvatar";
 import { Badge, Button, Switch, Tip } from "../ui";
 import { cn } from "../../lib/cn";
 import { t } from "../../i18n";
+import { toneText, toneTint } from "../../lib/tone";
 import { kindMeta, scheduleHuman } from "./shared";
 import { relativeWhen } from "../../lib/when";
-import { ReadOnlyBlock } from "./ReadOnlyBlock";
+import { ReadOnlyBlock } from "../ReadOnlyBlock";
 import { ExecutionsList } from "./ExecutionsList";
 
 // Right column: read-only detail of the selected routine. Two stacked areas —
@@ -25,6 +29,12 @@ export function RoutineDetail({
   const meta = kindMeta()[routine.kind];
   const Icon = meta?.icon || Zap;
   const spec = (routine.spec || {}) as Record<string, any>;
+  // Which agent actually runs this. The header used to say "Project agent" and
+  // stop there, so a project with four routines showed the same label four
+  // times and you had to open the editor to find out who each one belonged to.
+  const agentSlug = routine.kind === "exec_agent" ? String(spec.agent || "") : "";
+  const roster = useSWR(agentSlug ? `/api/projects/${pid}/agents` : null, () => Agents.list(pid));
+  const runner = agentSlug ? (roster.data || []).find((a) => a.slug === agentSlug) : undefined;
   const pre = routine.pre_commands || [];
   const post = routine.post_commands || [];
 
@@ -49,11 +59,20 @@ export function RoutineDetail({
         {/* header: name + actions (edit behind a button) */}
         <div className="flex items-start justify-between gap-3">
           <div className="flex min-w-0 items-center gap-2">
-            <span className={cn("flex size-7 shrink-0 items-center justify-center rounded-lg", routine.enabled ? "bg-emerald-500/15 text-emerald-400" : "bg-muted text-muted-fg")}>
+            <span className={cn("flex size-7 shrink-0 items-center justify-center rounded-lg", routine.enabled ? toneTint.emerald : "bg-muted text-muted-fg")}>
               <Icon size={14} />
             </span>
             <h3 className="truncate text-base font-semibold">{routine.name}</h3>
-            <Badge tone={routine.kind === "shell" ? "warning" : "info"}>{meta?.label || routine.kind}</Badge>
+            {agentSlug ? (
+              <Badge tone="info">
+                <span className="flex items-center gap-1.5">
+                  <AgentAvatar icon={runner?.icon} emoji={runner?.emoji} name={runner?.name || agentSlug} size={16} />
+                  <span className="truncate">{runner?.name || agentSlug}</span>
+                </span>
+              </Badge>
+            ) : (
+              <Badge tone={routine.kind === "shell" ? "warning" : "info"}>{meta?.label || routine.kind}</Badge>
+            )}
           </div>
           <div className="flex shrink-0 items-center gap-2">
             <Switch checked={routine.enabled} onChange={onToggle} />
@@ -79,7 +98,7 @@ export function RoutineDetail({
               {t("project.routines.last_run")} {relativeWhen(routine.last_run_at, t as never)}
             </span>
           )}
-          <span className={cn(routine.last_status === "ok" && "text-emerald-500", routine.last_status === "error" && "text-destructive")}>
+          <span className={cn(routine.last_status === "ok" && toneText.emerald, routine.last_status === "error" && "text-destructive")}>
             {t("agents_ui.last_label")} {routine.last_status || "—"}
           </span>
         </div>
@@ -91,8 +110,11 @@ export function RoutineDetail({
         </div>
       </div>
 
-      {/* EXECUTIONS — fills the remaining height and scrolls */}
-      <ExecutionsList pid={pid} name={routine.name} running={running} />
+      {/* EXECUTIONS — fills the remaining height and scrolls. It reads the run
+          in flight from the daemon rather than from this component's `running`
+          prop, so it also shows a run the SCHEDULER started, and survives a
+          refresh. `running` here only drives the Play button's own spinner. */}
+      <ExecutionsList pid={pid} name={routine.name} />
     </div>
   );
 }

package/src/interfaces/web/src/components/routines/RoutineEditor.tsx

@@ -4,9 +4,11 @@ import { ArrowRight, Terminal } from "lucide-react";
 import { Routines, Agents, Telegram, type RoutineEntry } from "../../lib/api";
 import { Button, Dialog, Field, Input, Switch } from "../ui";
 import { UiSelect } from "../UiSelect";
+import { AgentAvatar } from "../agents/AgentAvatar";
 import { useToast } from "../Toast";
 import { cn } from "../../lib/cn";
 import { t } from "../../i18n";
+import { toneOutline, toneText } from "../../lib/tone";
 import { type Kind, kindMeta, kindOptions, schedPresets, scheduleHuman, splitLines, varsFor } from "./shared";
 import { CronPicker } from "../cron/CronPicker";
 import { parseCron } from "../../lib/cron";
@@ -163,7 +165,16 @@ export function RoutineEditor({
             {kind === "exec_agent" && (
               <Field label={t("project.routines.agent_field")} hint={t("project.routines.agent_hint")}>
                 <UiSelect value={agent} onChange={setAgent} placeholder={agentsList.isLoading ? t("project.routines.agent_loading") : t("project.routines.agent_pick")}
-                  options={(agentsList.data || []).map((a) => ({ value: a.slug, label: a.slug, description: [a.role, a.model].filter(Boolean).join(" · ") || undefined }))} />
+                  options={(agentsList.data || []).map((a) => ({
+                    value: a.slug,
+                    label: a.name || a.slug,
+                    // Same face the agent has everywhere else — the roster, the
+                    // inbox, its bubbles. Picking "who runs this" off a list of
+                    // bare slugs was the one place that made you read instead of
+                    // recognise.
+                    adornment: <AgentAvatar icon={a.icon} emoji={a.emoji} name={a.name || a.slug} size={20} />,
+                    description: [a.role, a.model].filter(Boolean).join(" · ") || undefined,
+                  }))} />
               </Field>
             )}
             <Field label={t("project.routines.schedule_field")} hint={t("project.routines.schedule_hint")}>
@@ -171,12 +182,12 @@ export function RoutineEditor({
                 <div className="flex flex-wrap gap-1">
                   {schedPresets().map((s) => (
                     <button key={s.value} type="button" onClick={() => setSchedule(s.value)}
-                      className={cn("rounded-md border px-2 py-0.5 text-[11px]", schedule === s.value ? "border-emerald-500/50 text-emerald-400" : "border-border text-muted-fg hover:text-foreground")}>
+                      className={cn("rounded-md border px-2 py-0.5 text-[11px]", schedule === s.value ? toneOutline.emerald : "border-border text-muted-fg hover:text-foreground")}>
                       {s.label}
                     </button>
                   ))}
                   <button type="button" onClick={() => setSchedule("manual")}
-                    className={cn("rounded-md border px-2 py-0.5 text-[11px]", schedule === "manual" ? "border-emerald-500/50 text-emerald-400" : "border-border text-muted-fg hover:text-foreground")}>
+                    className={cn("rounded-md border px-2 py-0.5 text-[11px]", schedule === "manual" ? toneOutline.emerald : "border-border text-muted-fg hover:text-foreground")}>
                     {t("agents_ui.preset_manual")}
                   </button>
                 </div>
@@ -256,8 +267,8 @@ export function RoutineEditor({
           <div className="flex flex-wrap items-stretch gap-2">
             {steps.map((s, i) => (
               <div key={s.id} className="flex items-stretch gap-2">
-                <div className={cn("flex max-w-[240px] flex-col gap-1 rounded-lg border px-2.5 py-2", s.action ? "border-emerald-500/40 bg-emerald-500/5" : "border-border bg-card")}>
-                  <div className={cn("flex items-center gap-1.5 text-[11px] font-medium", s.action ? "text-emerald-400" : "text-muted-fg")}>
+                <div className={cn("flex max-w-[240px] flex-col gap-1 rounded-lg border px-2.5 py-2", s.action ? "border-emerald-600/40 bg-emerald-500/5 dark:border-emerald-500/40" : "border-border bg-card")}>
+                  <div className={cn("flex items-center gap-1.5 text-[11px] font-medium", s.action ? toneText.emerald : "text-muted-fg")}>
                     <s.icon size={12} /> {s.label}
                   </div>
                   {s.detail && <div className="line-clamp-2 font-mono text-[10px] text-muted-fg">{s.detail}</div>}

package/src/interfaces/web/src/components/routines/RoutineList.tsx

@@ -1,19 +1,35 @@
 import { Zap } from "lucide-react";
 import type { RoutineEntry } from "../../lib/api";
 import { StatusDot } from "../Section";
+import { Spinner, Tip } from "../ui";
+import { SelectCheckbox } from "../common/SelectCheckbox";
 import { cn } from "../../lib/cn";
 import { t } from "../../i18n";
+import { toneTint } from "../../lib/tone";
 import { kindMeta, scheduleHuman } from "./shared";
 
+/** The agent an exec_agent routine runs, when it names one. */
+function agentSlug(r: RoutineEntry): string {
+  if (r.kind !== "exec_agent") return "";
+  return String((r.spec as Record<string, unknown> | undefined)?.agent || "");
+}
+
 // Left column: scrollable list of routines. Click selects (the divider is the
 // single border-r line); the detail lives in the sibling column.
 export function RoutineList({
-  routines, selectedName, onSelect,
+  routines, selectedName, onSelect, checkedNames, onToggleCheck, runningName,
 }: {
   routines: RoutineEntry[];
   selectedName: string | null;
   onSelect: (name: string) => void;
+  /** Multi-select: routine names ticked for a bulk run (the screen owns it). */
+  checkedNames?: Set<string>;
+  onToggleCheck?: (r: RoutineEntry) => void;
+  /** Just-clicked, before the daemon's first frame lands. `r.running` is the
+   *  real answer and covers every other case (a refresh, another device, cron). */
+  runningName?: string | null;
 }) {
+  const selecting = !!onToggleCheck && (checkedNames?.size ?? 0) > 0;
   return (
     <aside className="flex h-full min-h-0 flex-col border-r border-border">
       <div className="shrink-0 px-3 py-2.5 text-[11px] font-semibold uppercase tracking-wide text-muted-fg">
@@ -24,29 +40,53 @@ export function RoutineList({
           const meta = kindMeta()[r.kind];
           const Icon = meta?.icon || Zap;
           const active = r.name === selectedName;
+          const checked = checkedNames?.has(r.name) ?? false;
           return (
-            <li key={r.name}>
+            <li key={r.name} className={cn(
+              "group flex items-stretch gap-1 rounded-lg border transition-colors",
+              active
+                ? "border-primary/50 bg-primary/10"
+                : "border-transparent hover:border-border hover:bg-accent/40",
+            )}>
+              {onToggleCheck && (
+                <div className={cn(
+                  "flex shrink-0 items-start pl-2 pt-2.5 transition-opacity",
+                  selecting || checked ? "opacity-100" : "opacity-0 focus-within:opacity-100 group-hover:opacity-100",
+                )}>
+                  <SelectCheckbox
+                    checked={checked}
+                    onToggle={() => onToggleCheck(r)}
+                    label={t("project.routines.select_row", { name: r.name })}
+                    testId={`routine-check-${r.name}`}
+                  />
+                </div>
+              )}
               <button
                 type="button"
                 onClick={() => onSelect(r.name)}
                 aria-current={active}
                 className={cn(
-                  "w-full rounded-lg border px-2.5 py-2 text-left transition-colors",
-                  active
-                    ? "border-primary/50 bg-primary/10"
-                    : "border-transparent hover:border-border hover:bg-accent/40",
+                  "min-w-0 flex-1 rounded-lg py-2 pr-2.5 text-left",
+                  onToggleCheck ? "pl-1.5" : "pl-2.5",
                 )}
               >
                 <div className="flex items-center gap-2">
-                  <span className={cn("flex size-6 shrink-0 items-center justify-center rounded-md", r.enabled ? "bg-emerald-500/15 text-emerald-400" : "bg-muted text-muted-fg")}>
+                  <span className={cn("flex size-6 shrink-0 items-center justify-center rounded-md", r.enabled ? toneTint.emerald : "bg-muted text-muted-fg")}>
                     <Icon size={13} />
                   </span>
                   <span className="min-w-0 flex-1 truncate text-sm font-medium">{r.name}</span>
                   {!r.enabled && <span className="shrink-0 text-[10px] text-muted-fg">{t("project.routines.paused")}</span>}
-                  <StatusDot ok={r.last_status === "ok" ? true : r.last_status === "error" ? false : null} />
+                  {/* Running now beats how the last one went: the dot is
+                      history, and history is not what you are watching for. */}
+                  {r.running || runningName === r.name
+                    ? <Tip content={t("project.routines.running")}><span className="flex shrink-0 items-center" data-testid={`routine-running-${r.name}`}><Spinner size={11} /></span></Tip>
+                    : <StatusDot ok={r.last_status === "ok" ? true : r.last_status === "error" ? false : null} />}
                 </div>
                 <div className="mt-1 flex items-center justify-between gap-2 pl-8 text-[10px] text-muted-fg">
-                  <span className="truncate">{meta?.label || r.kind}</span>
+                  {/* Who runs it beats what kind it is: four exec_agent routines
+                      all read "Project agent", and the name is the thing you
+                      are scanning the list for. */}
+                  <span className="truncate">{agentSlug(r) || meta?.label || r.kind}</span>
                   <span className="shrink-0">⏱ {scheduleHuman(r.schedule)}</span>
                 </div>
               </button>

package/src/interfaces/web/src/components/routines/VarTextarea.tsx

@@ -41,7 +41,7 @@ export function VarTextarea({
   return (
     <div className="space-y-1">
       <div className="text-xs font-medium text-muted-foreground">{label}</div>
-      {hint && <div className="text-[11px] text-muted-foreground/70">{hint}</div>}
+      {hint && <div className="text-[11px] text-muted-foreground">{hint}</div>}
       <div ref={wrapRef} className="space-y-1.5">
         <Textarea
           rows={rows}

package/src/interfaces/web/src/components/routines/runChat.ts

@@ -0,0 +1,121 @@
+import type { ChatMsg, ChatPart, ToolPart } from "../../hooks/useChat";
+import type { LiveRoutineRun } from "../../types/daemon";
+
+type TraceItem = {
+  tool?: string;
+  args?: Record<string, unknown>;
+  result?: unknown;
+};
+
+/** Rebuild a chat turn from a routine run's stored result (trace + reply).
+ *  Older runs that leaked DeepSeek DSML as the "answer" are parsed into
+ *  tool parts so the preview looks like a chat instead of XML. */
+export function routineRunToChatMsgs(
+  result: Record<string, unknown> | null | undefined,
+  ts: string,
+): ChatMsg[] {
+  if (!result) return [];
+  const reply = String(result.reply ?? result.text ?? result.stdout ?? "");
+  const trace = Array.isArray(result.trace) ? (result.trace as TraceItem[]) : [];
+  const parts: ChatPart[] = [];
+
+  if (trace.length) {
+    for (let i = 0; i < trace.length; i++) {
+      const item = trace[i];
+      if (!item?.tool) continue;
+      parts.push(toolPart(`run-${i}`, item.tool, item.args, item.result));
+    }
+    if (reply.trim()) parts.push({ kind: "text", text: reply.trim() });
+  } else {
+    const dsml = parseDsmlForDisplay(reply);
+    parts.push(...dsml.tools);
+    if (dsml.text.trim()) parts.push({ kind: "text", text: dsml.text.trim() });
+  }
+
+  if (!parts.length) return [];
+  const agent = typeof result.agent_slug === "string" ? result.agent_slug : undefined;
+  return [{
+    role: "assistant",
+    parts,
+    ts,
+    agent,
+    agentId: agent,
+  }];
+}
+
+/** The same preview, for a run that is still going: the steps the daemon has
+ *  announced so far. A tool still out is left `running`, so the panel shows a
+ *  spinner on the step instead of pretending it came back. */
+export function liveRunToChatMsgs(run: LiveRoutineRun): ChatMsg[] {
+  const parts: ChatPart[] = [];
+  for (const step of run.steps) {
+    if (step.kind === "tool" && step.tool) {
+      parts.push({
+        kind: "tool",
+        id: `live-${step.id}`,
+        tool: step.tool,
+        args: step.args ?? undefined,
+        status: step.status === "error" ? "error" : step.status === "done" ? "done" : "running",
+      });
+    } else if (step.kind === "text" && step.text?.trim()) {
+      parts.push({ kind: "text", text: step.text.trim() });
+    }
+  }
+  if (!parts.length) return [];
+  return [{
+    role: "assistant",
+    parts,
+    ts: run.started_at,
+    pending: true,
+    agent: run.agent_slug || undefined,
+    agentId: run.agent_slug || undefined,
+  }];
+}
+
+export function parseDsmlForDisplay(text: string): { tools: ToolPart[]; text: string } {
+  if (!text || !/DSML/i.test(text)) return { tools: [], text };
+  const tools: ToolPart[] = [];
+  const openRe = /<\|{1,2}DSML\|{1,2}invoke\s+name="([^"]+)"\s*>/gi;
+  let m: RegExpExecArray | null;
+  let cleaned = text;
+  let seq = 0;
+  while ((m = openRe.exec(text)) !== null) {
+    const name = m[1];
+    const start = m.index;
+    const afterOpen = start + m[0].length;
+    const closeRe = /<\/\|{1,2}DSML\|{1,2}invoke>/i;
+    const closeMatch = closeRe.exec(text.slice(afterOpen));
+    const innerEnd = closeMatch ? afterOpen + closeMatch.index : text.length;
+    const end = closeMatch ? innerEnd + closeMatch[0].length : innerEnd;
+    const inner = text.slice(afterOpen, innerEnd);
+    const args: Record<string, unknown> = {};
+    const paramRe =
+      /<\|{1,2}DSML\|{1,2}parameter\s+name="([^"]+)"[^>]*>([\s\S]*?)<\/\|{1,2}DSML\|{1,2}parameter>/gi;
+    let p: RegExpExecArray | null;
+    while ((p = paramRe.exec(inner)) !== null) args[p[1]] = p[2].trim();
+    tools.push(toolPart(`dsml-${seq++}`, name, args, undefined));
+    cleaned = cleaned.replace(text.slice(start, end), "");
+  }
+  cleaned = cleaned.replace(/<\/?\|{1,2}DSML\|{1,2}[^>]*>/gi, "");
+  cleaned = cleaned.replace(/\n{3,}/g, "\n\n").trim();
+  return { tools, text: cleaned };
+}
+
+function toolPart(
+  id: string,
+  tool: string,
+  args: Record<string, unknown> | undefined,
+  result: unknown,
+): ToolPart {
+  const err = result && typeof result === "object" && "error" in (result as object)
+    ? Boolean((result as { error?: unknown }).error)
+    : false;
+  return {
+    kind: "tool",
+    id,
+    tool,
+    args,
+    result,
+    status: err ? "error" : "done",
+  };
+}

package/src/interfaces/web/src/components/sessions/SessionDetail.tsx

@@ -0,0 +1,148 @@
+import { useEffect, useState } from "react";
+import useSWR from "swr";
+import { Bot, Copy, FolderOpen, Terminal as TerminalIcon, TriangleAlert, X } from "lucide-react";
+import { Sessions, Deck, type SessionRow } from "../../lib/api";
+import { Badge, Button, Empty, Loading, Tip } from "../ui";
+import { useToast } from "../Toast";
+import { usePersonaName } from "../../hooks/usePersonaName";
+import { SessionTerminal } from "./SessionTerminal";
+import { t } from "../../i18n";
+
+const ENGINE_TONE: Record<string, "success" | "info" | "warning" | "muted"> = {
+  apx: "success", claude: "info", codex: "warning", opencode: "info",
+};
+
+/**
+ * The right-hand pane: what this session was, and the two ways to continue it.
+ *
+ * The command is shown, not just executed. Opening the terminal here is the
+ * quick path, but the same session often wants a real terminal — a second
+ * window, a different machine, a tmux pane — so the line stays visible and
+ * copyable rather than hidden behind the button that runs it.
+ */
+export function SessionDetail({
+  row,
+  onAskPersona,
+}: {
+  row: SessionRow;
+  onAskPersona: (s: SessionRow) => void;
+}) {
+  const toast = useToast();
+  const persona = usePersonaName();
+  const [termOpen, setTermOpen] = useState(false);
+
+  const detail = useSWR(
+    `/api/sessions/${row.id}?engine=${row.engine}`,
+    () => Sessions.detail(row.id, row.engine),
+  );
+
+  // Switching sessions closes the terminal: leaving it open would keep showing
+  // the previous session's CLI under the new session's heading.
+  useEffect(() => { setTermOpen(false); }, [row.id, row.engine]);
+
+  const d = detail.data;
+  const cwd = d?.cwd || row.cwd || null;
+  const command = d?.resume_command || null;
+
+  const copy = async (text: string, ok: string) => {
+    try { await navigator.clipboard.writeText(text); toast.success(ok); }
+    catch { toast.error(t("base.sessions_copy_failed")); }
+  };
+
+  const openFolder = async () => {
+    if (!cwd) { toast.error(t("base.sessions_no_folder")); return; }
+    try { await Deck.exec({ kind: "open_path", target: cwd }); }
+    catch (e) { toast.error(t("base.sessions_folder_failed", { msg: (e as Error).message })); }
+  };
+
+  return (
+    <div className="flex h-full min-h-0 flex-col">
+      <div className="flex items-start gap-3 border-b border-border px-4 py-3">
+        <Badge tone={ENGINE_TONE[row.engine] || "muted"}>{row.engine}</Badge>
+        <div className="min-w-0 flex-1">
+          <div className="truncate text-sm font-medium">{d?.title || row.title || row.id}</div>
+          <div className="truncate font-mono text-[10px] text-muted-fg">{row.id}</div>
+        </div>
+        {termOpen && (
+          <Tip content={t("base.sessions_term_close")}>
+            <Button size="sm" variant="ghost" aria-label={t("base.sessions_term_close")} onClick={() => setTermOpen(false)}>
+              <X size={14} />
+            </Button>
+          </Tip>
+        )}
+      </div>
+
+      {/* Actions. "Continue" leads: it is why this pane is open. */}
+      <div className="flex flex-wrap items-center gap-2 border-b border-border px-4 py-2">
+        <Button size="sm" variant="primary" disabled={!command} onClick={() => setTermOpen(true)}>
+          <TerminalIcon size={13} /> {t("base.sessions_act_open_terminal")}
+        </Button>
+        <Button size="sm" variant="secondary" disabled={!command} onClick={() => copy(command!, t("base.sessions_cmd_copied"))}>
+          <Copy size={13} /> {t("base.sessions_act_cmd")}
+        </Button>
+        <Button size="sm" variant="ghost" disabled={!cwd} onClick={openFolder}>
+          <FolderOpen size={13} /> {t("base.sessions_act_folder")}
+        </Button>
+        <Button size="sm" variant="ghost" onClick={() => onAskPersona(row)}>
+          <Bot size={13} /> {t("base.sessions_act_ask", { name: persona })}
+        </Button>
+      </div>
+
+      {termOpen && command ? (
+        <div className="relative min-h-0 flex-1 p-2">
+          <SessionTerminal engine={row.engine} id={row.id} className="relative h-full w-full" />
+        </div>
+      ) : (
+        <div className="min-h-0 flex-1 space-y-4 overflow-y-auto px-4 py-3 text-sm">
+          {detail.isLoading && <Loading />}
+          {detail.error && <Empty icon={TriangleAlert}>{t("base.sessions_error", { msg: (detail.error as Error).message })}</Empty>}
+
+          {command && (
+            <div>
+              <div className="mb-1 text-[11px] uppercase tracking-wide text-muted-fg">
+                {t("base.sessions_detail_command")}
+              </div>
+              <button
+                type="button"
+                onClick={() => copy(command, t("base.sessions_cmd_copied"))}
+                title={t("base.sessions_act_cmd")}
+                className="w-full truncate rounded-md border border-border bg-muted/40 px-2 py-1.5 text-left font-mono text-[11px] hover:bg-muted"
+              >
+                {command}
+              </button>
+            </div>
+          )}
+
+          {cwd && (
+            <div>
+              <div className="mb-1 text-[11px] uppercase tracking-wide text-muted-fg">
+                {t("base.sessions_detail_folder")}
+              </div>
+              <div className="break-all font-mono text-[11px] text-muted-fg">{cwd}</div>
+            </div>
+          )}
+
+          {d?.mtime ? (
+            <div>
+              <div className="mb-1 text-[11px] uppercase tracking-wide text-muted-fg">
+                {t("base.sessions_detail_updated")}
+              </div>
+              <div className="text-[12px] text-muted-fg">{new Date(d.mtime).toLocaleString()}</div>
+            </div>
+          ) : null}
+
+          {d?.last_prompt && (
+            <div>
+              <div className="mb-1 text-[11px] uppercase tracking-wide text-muted-fg">
+                {t("base.sessions_detail_last_prompt")}
+              </div>
+              <div className="max-h-64 overflow-y-auto whitespace-pre-wrap rounded-md border border-border bg-muted/30 px-2 py-1.5 text-[12px]">
+                {d.last_prompt}
+              </div>
+            </div>
+          )}
+        </div>
+      )}
+    </div>
+  );
+}

package/src/interfaces/web/src/components/sessions/SessionTerminal.tsx

@@ -0,0 +1,98 @@
+import { useEffect, useRef, useState } from "react";
+import { Terminal } from "@xterm/xterm";
+import { FitAddon } from "@xterm/addon-fit";
+import "@xterm/xterm/css/xterm.css";
+import { getToken } from "../../lib/http";
+import { t } from "../../i18n";
+
+// A real terminal, running the session's own CLI on the daemon's machine.
+//
+// Everything here is bytes in both directions: keystrokes go up the socket,
+// output comes back and is written straight to xterm. No parsing, no framing —
+// claude and opencode draw themselves, and anything we interpreted along the
+// way would only be a chance to corrupt their output.
+//
+// The size is fixed for the life of the connection: the daemon sizes the pty
+// once, at spawn. Resizing the pane afterwards is not wired through, so we
+// remount on size changes instead — the session is re-opened rather than
+// reflowed, which the CLIs handle (they redraw from their own state).
+export function SessionTerminal({
+  engine,
+  id,
+  className,
+  onExit,
+}: {
+  engine: string;
+  id: string;
+  className?: string;
+  onExit?: () => void;
+}) {
+  const hostRef = useRef<HTMLDivElement>(null);
+  const [status, setStatus] = useState<"connecting" | "open" | "closed">("connecting");
+
+  useEffect(() => {
+    const host = hostRef.current;
+    if (!host) return;
+
+    const term = new Terminal({
+      convertEol: false,
+      cursorBlink: true,
+      fontSize: 12,
+      fontFamily: "ui-monospace, SFMono-Regular, Menlo, monospace",
+      // Transparent so the panel's own theme shows through; the CLIs paint
+      // their own colours over it.
+      theme: { background: "#0a0a0a" },
+      scrollback: 5000,
+    });
+    const fit = new FitAddon();
+    term.loadAddon(fit);
+    term.open(host);
+    fit.fit();
+
+    const proto = window.location.protocol === "https:" ? "wss:" : "ws:";
+    const params = new URLSearchParams({
+      engine,
+      id,
+      rows: String(term.rows),
+      cols: String(term.cols),
+    });
+    const token = getToken();
+    if (token) params.set("token", token);
+    const ws = new WebSocket(`${proto}//${window.location.host}/api/terminal/ws?${params.toString()}`);
+    ws.binaryType = "arraybuffer";
+
+    ws.onopen = () => { setStatus("open"); term.focus(); };
+    ws.onmessage = (ev) => {
+      term.write(typeof ev.data === "string" ? ev.data : new Uint8Array(ev.data));
+    };
+    ws.onclose = () => { setStatus("closed"); onExit?.(); };
+    ws.onerror = () => setStatus("closed");
+
+    const typed = term.onData((data) => {
+      if (ws.readyState === WebSocket.OPEN) ws.send(new TextEncoder().encode(data));
+    });
+
+    // The pty size is fixed server-side, so only fit locally — a mismatch shows
+    // as wrapping, not as a broken session.
+    const onResize = () => { try { fit.fit(); } catch { /* detached */ } };
+    window.addEventListener("resize", onResize);
+
+    return () => {
+      window.removeEventListener("resize", onResize);
+      typed.dispose();
+      try { ws.close(); } catch { /* already gone */ }
+      term.dispose();
+    };
+  }, [engine, id]); // eslint-disable-line react-hooks/exhaustive-deps
+
+  return (
+    <div className={className}>
+      <div ref={hostRef} className="h-full w-full overflow-hidden rounded-md bg-[#0a0a0a] p-1" />
+      {status !== "open" && (
+        <div className="pointer-events-none absolute bottom-2 right-3 text-[10px] text-muted-fg">
+          {status === "connecting" ? t("base.sessions_term_connecting") : t("base.sessions_term_closed")}
+        </div>
+      )}
+    </div>
+  );
+}