@agentprojectcontext/apx 1.80.2 → 1.89.1

package/src/interfaces/web/src/components/memory/MemoryBrowser.tsx

@@ -1,6 +1,6 @@
 import { useMemo, useState } from "react";
 import useSWR from "swr";
-import { Brain, Bot, Crown, NotebookPen, RefreshCw } from "lucide-react";
+import { Brain, BrainCircuit, Bot, Crown, NotebookPen, RefreshCw } from "lucide-react";
 import { Agents, Projects } from "../../lib/api";
 import { Notebook } from "../../lib/api/notebook";
 import type { AgentEntry, FileContent } from "../../types/daemon";
@@ -8,15 +8,22 @@ import { cn } from "../../lib/cn";
 import { Spinner, Empty } from "../ui";
 import { useToast } from "../Toast";
 import { t } from "../../i18n";
+import { toneText } from "../../lib/tone";
 import { usePersonaName } from "../../hooks/usePersonaName";
 import { FileViewer } from "../files/FileViewer";
 
-// Which memory is open in the right pane.
-type Sel = { kind: "notebook" } | { kind: "project" } | { kind: "agent"; slug: string };
+// Which memory is open in the right pane. A project has TWO: "project" is the
+// curated `.apc/memory.md` that git carries, "local" is the never-committed file
+// the agent writes. Keeping them separate rows is the point — the boundary is
+// what stops an automatic note putting a pasted token in someone's repo.
+type Sel =
+  | { kind: "notebook" }
+  | { kind: "project" }
+  | { kind: "local" }
+  | { kind: "agent"; slug: string };
 
 function selId(s: Sel): string {
-  if (s.kind === "notebook") return "notebook";
-  return s.kind === "project" ? "project" : `agent:${s.slug}`;
+  return s.kind === "agent" ? `agent:${s.slug}` : s.kind;
 }
 
 // On-disk-ish path shown in the viewer header (mirrors the real memory.md
@@ -24,23 +31,32 @@ function selId(s: Sel): string {
 function selPath(s: Sel): string {
   // The notebook is NOT under the project — it is global to the super-agent.
   // Showing its real absolute-ish path is the whole point: the confusion this
-  // entry fixes was not knowing where it lived.
-  if (s.kind === "notebook") return "~/.apx/memory.md";
-  return s.kind === "project" ? ".apc/memory.md" : `agents/${s.slug}/memory.md`;
+  // entry fixes was not knowing where it lived. Same reasoning for the local
+  // file: "not in the repo" is a property you have to be able to SEE.
+  switch (s.kind) {
+    case "notebook": return "~/.apx/memory.md";
+    case "project":  return ".apc/memory.md";
+    case "local":    return "~/.apx/projects/<id>/memory.md";
+    default:         return `~/.apx/projects/<id>/agents/${s.slug}/memory.md`;
+  }
 }
 
 function loadBody(pid: string, s: Sel): Promise<string> {
-  if (s.kind === "notebook") return Notebook.get().then((r) => r.body);
-  return s.kind === "project"
-    ? Projects.memory.get(pid).then((r) => r.body)
-    : Agents.memory.get(pid, s.slug).then((r) => r.body);
+  switch (s.kind) {
+    case "notebook": return Notebook.get().then((r) => r.body);
+    case "project":  return Projects.memory.get(pid).then((r) => r.body);
+    case "local":    return Projects.memory.local.get(pid).then((r) => r.body);
+    default:         return Agents.memory.get(pid, s.slug).then((r) => r.body);
+  }
 }
 
 function saveBody(pid: string, s: Sel, body: string): Promise<void> {
-  if (s.kind === "notebook") return Notebook.put(body).then(() => {});
-  return s.kind === "project"
-    ? Projects.memory.put(pid, body).then(() => {})
-    : Agents.memory.put(pid, s.slug, body).then(() => {});
+  switch (s.kind) {
+    case "notebook": return Notebook.put(body).then(() => {});
+    case "project":  return Projects.memory.put(pid, body).then(() => {});
+    case "local":    return Projects.memory.local.put(pid, body).then(() => {});
+    default:         return Agents.memory.put(pid, s.slug, body).then(() => {});
+  }
 }
 
 function SidebarItem({
@@ -74,24 +90,38 @@ function SidebarItem({
 // right for markdown edit / split-preview / save — the same surface as /docs.
 export function MemoryBrowser({ pid }: { pid: string }) {
   const toast = useToast();
-  // Opens on the notebook. It is the memory that ships in every prompt on
-  // every channel, so it is the one most worth seeing first.
-  const [sel, setSel] = useState<Sel>({ kind: "notebook" });
-  const notebook = useSWR("/api/notebook", () => Notebook.get());
+  // The notebook belongs to Base (id 0) and to nowhere else. It is ONE global
+  // file (~/.apx/memory.md) that used to head the sidebar of every project, so
+  // twelve projects each looked like they owned a copy of the super-agent's
+  // memory — and editing it "in Postbeam" silently edited the global one.
+  const isBase = String(pid) === "0";
+  // What opens first is what is most likely to have something in it. On Base
+  // that is the notebook (the memory that ships in every prompt on every
+  // channel); on a project it is the internal memory, because that is where
+  // everything the agent has learned lands — opening on the curated file meant
+  // opening on an empty pane and having to go looking, which is the exact
+  // feeling this screen exists to remove.
+  const fallback: Sel = isBase ? { kind: "notebook" } : { kind: "local" };
+  const [sel, setSel] = useState<Sel | null>(null);
+  // Switching projects from the rail re-renders this component without
+  // remounting it, so a notebook selection can outlive Base. Derive rather than
+  // reset: off Base there is simply no such row to be on.
+  const open: Sel = !sel || (!isBase && sel.kind === "notebook") ? fallback : sel;
+  const notebook = useSWR(isBase ? "/api/notebook" : null, () => Notebook.get());
   // Never hardcode the agent's name (AGENTS.md rule 13) — it is the user's to set.
   const persona = usePersonaName();
 
   const agents = useSWR(`/api/projects/${pid}/agents`, () => Agents.list(pid));
 
-  const bodyKey = `/api/memory/${pid}/${selId(sel)}`;
-  const body = useSWR(bodyKey, () => loadBody(pid, sel));
+  const bodyKey = `/api/memory/${pid}/${selId(open)}`;
+  const body = useSWR(bodyKey, () => loadBody(pid, open));
 
   // Adapt the raw memory body into the FileContent shape FileViewer expects.
   const file = useMemo<FileContent | null>(() => {
     if (body.data === undefined) return null;
     const content = body.data ?? "";
     return {
-      path: selPath(sel),
+      path: selPath(open),
       name: "memory.md",
       kind: "markdown",
       size: content.length,
@@ -99,10 +129,10 @@ export function MemoryBrowser({ pid }: { pid: string }) {
       encoding: "utf8",
       content,
     };
-  }, [body.data, sel]);
+  }, [body.data, open]);
 
   const onSave = async (content: string) => {
-    await saveBody(pid, sel, content);
+    await saveBody(pid, open, content);
     toast.success(t("project.memories.saved"));
     void body.mutate(content, { revalidate: false });
   };
@@ -129,52 +159,69 @@ export function MemoryBrowser({ pid }: { pid: string }) {
         </div>
 
         <div className="min-h-0 flex-1 overflow-y-auto p-1.5">
-          {/* The super-agent's own notebook. First, and in its own group,
-              because it is global — not a property of this project — and its
-              absence from this list is what made "where is Roby's memory?" an
-              unanswerable question. */}
-          <p className="px-1.5 pb-1 pt-1 text-[10px] font-semibold uppercase tracking-wide text-muted-foreground/60">
-            {t("project.memories.super_agent_group")}
-          </p>
-          <SidebarItem
-            active={sel.kind === "notebook"}
-            onClick={() => setSel({ kind: "notebook" })}
-            icon={NotebookPen}
-            iconClass="text-emerald-400"
-            label={t("project.memories.notebook_item", { persona })}
-            sub={notebook.data ? t("project.memories.tokens", { n: notebook.data.approx_tokens }) : undefined}
-          />
+          {/* The super-agent's own notebook — Base only. First, and in its own
+              group, because it is global rather than a property of a project,
+              and its absence from every list is what made "where is the
+              super-agent's memory?" an unanswerable question. */}
+          {isBase && (
+            <>
+              <p className="px-1.5 pb-1 pt-1 text-[10px] font-semibold uppercase tracking-wide text-muted-foreground">
+                {t("project.memories.super_agent_group")}
+              </p>
+              <SidebarItem
+                active={open.kind === "notebook"}
+                onClick={() => setSel({ kind: "notebook" })}
+                icon={NotebookPen}
+                iconClass={toneText.emerald}
+                label={t("project.memories.notebook_item", { persona })}
+                sub={notebook.data ? t("project.memories.tokens", { n: notebook.data.approx_tokens }) : undefined}
+              />
+            </>
+          )}
 
           {/* General / project memory */}
-          <p className="px-1.5 pb-1 pt-3 text-[10px] font-semibold uppercase tracking-wide text-muted-foreground/60">
+          <p className={`px-1.5 pb-1 ${isBase ? "pt-3" : "pt-1"} text-[10px] font-semibold uppercase tracking-wide text-muted-foreground`}>
             {t("project.memories.general_group")}
           </p>
+          {/* The agent's half, first because it is the one that fills up: what
+              `remember` writes lands here, so a fact picked up mid-chat cannot
+              put a pasted credential into the repo's history. Promotion to
+              .apc/memory.md is a person copying a line they have read. */}
+          <SidebarItem
+            active={open.kind === "local"}
+            onClick={() => setSel({ kind: "local" })}
+            icon={BrainCircuit}
+            iconClass={toneText.amber}
+            label={t("project.memories.local_item")}
+            sub={t("project.memories.not_committed")}
+          />
           <SidebarItem
-            active={sel.kind === "project"}
+            active={open.kind === "project"}
             onClick={() => setSel({ kind: "project" })}
             icon={Brain}
-            iconClass="text-sky-500"
+            iconClass={toneText.sky}
             label={t("project.memories.general_item")}
+            sub={t("project.memories.committed")}
           />
 
           {/* Agent memories */}
-          <p className="px-1.5 pb-1 pt-3 text-[10px] font-semibold uppercase tracking-wide text-muted-foreground/60">
+          <p className="px-1.5 pb-1 pt-3 text-[10px] font-semibold uppercase tracking-wide text-muted-foreground">
             {t("project.memories.agents_title")}
           </p>
           {agents.isLoading ? (
             <div className="flex justify-center py-4"><Spinner size={14} /></div>
           ) : list.length === 0 ? (
             <div className="px-1.5 py-2">
-              <Empty>{t("project.memories.no_agents")}</Empty>
+              <Empty icon={Brain}>{t("project.memories.no_agents")}</Empty>
             </div>
           ) : (
             list.map((a) => (
               <SidebarItem
                 key={a.slug}
-                active={sel.kind === "agent" && sel.slug === a.slug}
+                active={open.kind === "agent" && open.slug === a.slug}
                 onClick={() => setSel({ kind: "agent", slug: a.slug })}
                 icon={a.is_master ? Crown : Bot}
-                iconClass={a.is_master ? "text-violet-400" : "text-muted-foreground"}
+                iconClass={a.is_master ? toneText.violet : "text-muted-foreground"}
                 label={a.slug}
                 sub={a.role || undefined}
               />

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

@@ -1,25 +1,42 @@
-import { useState, type ReactNode } from "react";
-import useSWR from "swr";
-import { Ban, Check, X } from "lucide-react";
-import { Messages } from "../../lib/api";
-import type { MessageEntry } from "../../types/daemon";
-import { Loading, Spinner } from "../ui";
+import { useEffect, useState, type ReactNode } from "react";
+import { Link } from "react-router-dom";
+import useSWR, { mutate as globalMutate } from "swr";
+import { Ban, Check, MessageSquare, X } from "lucide-react";
+import { Routines } from "../../lib/api";
+import type { LiveRoutineRun, RoutineRun } from "../../types/daemon";
+import { subscribeRoutineRuns } from "../../lib/live";
+import { Loading, Spinner, Tip } from "../ui";
 import { cn } from "../../lib/cn";
+import { toneText } from "../../lib/tone";
 import { t } from "../../i18n";
+import { MessageList } from "../chat/MessageList";
+import { liveRunToChatMsgs, routineRunToChatMsgs } from "./runChat";
 
-// Execution history is derived from the ROUTINE-channel messages the runner
-// logs at the end of each run (src/core/routines/runner.js) — there is no
-// dedicated runs table. One system message per run carries meta.routine +
-// meta.status + meta.skipped + meta.result.
+// A routine's runs: the one happening now, and the ones already made.
+//
+// Both used to be guesswork here. The history was the ROUTINE-channel ledger
+// filtered client-side on `meta.routine` + a system actor — which is also what
+// a "routine updated" row looks like, so editing a routine added a run to its
+// own history, drawn green because an edit carries no status. That reading now
+// lives in core/routines/run-log.js and arrives shaped.
+//
+// The run in flight came from nowhere at all: it was a boolean in the tab that
+// pressed Play, so a refresh erased a routine that was still working. It now
+// comes from the daemon (GET .../run) and follows the live feed, which means it
+// also shows up when the SCHEDULER started it, on every open panel.
 
-type RunSt = "ok" | "error" | "skipped";
+const RUN_PHASE_LABELS: Record<string, () => string> = {
+  pre: () => t("project.routines.phase_pre"),
+  agent: () => t("project.routines.phase_agent"),
+  delivery: () => t("project.routines.phase_delivery"),
+  post: () => t("project.routines.phase_post"),
+};
 
-function runStatus(m: MessageEntry): RunSt {
-  const meta = (m.meta || {}) as Record<string, unknown>;
-  if (meta.skipped) return "skipped";
-  if (meta.status === "error") return "error";
-  return "ok";
-}
+const TRIGGER_LABELS: Record<string, () => string> = {
+  manual: () => t("project.routines.trigger_manual"),
+  schedule: () => t("project.routines.trigger_schedule"),
+  agent: () => t("project.routines.trigger_agent"),
+};
 
 function fmtTs(ts: string): string {
   const d = new Date(ts);
@@ -29,14 +46,42 @@ function fmtTs(ts: string): string {
   });
 }
 
-function StatusIcon({ st }: { st: RunSt }) {
-  if (st === "ok") return <Check size={13} className="shrink-0 text-emerald-500" />;
+function StatusIcon({ st }: { st: RoutineRun["status"] }) {
+  if (st === "ok") return <Check size={13} className={cn("shrink-0", toneText.emerald)} />;
   if (st === "error") return <X size={13} className="shrink-0 text-destructive" />;
-  return <Ban size={13} className="shrink-0 text-amber-500" />;
+  return <Ban size={13} className={cn("shrink-0", toneText.amber)} />;
+}
+
+function statusLabel(st: RoutineRun["status"]): string {
+  return st === "ok" ? t("project.routines.status_ok")
+    : st === "error" ? t("project.routines.status_error")
+    : t("project.routines.status_skipped");
+}
+
+/** Where a run's own chat lives. Every run that went through an agent filed one
+ *  — this is the link that was buried one click deep inside the detail panel. */
+function chatHrefOf(pid: string, run: { conversation_id: string | null; agent_slug: string | null }): string | null {
+  if (!run.conversation_id || !run.agent_slug) return null;
+  return `/p/${pid}/chat?agent=${encodeURIComponent(run.agent_slug)}&conv=${encodeURIComponent(run.conversation_id)}`;
 }
 
-function statusLabel(st: RunSt): string {
-  return st === "ok" ? t("project.routines.status_ok") : st === "error" ? t("project.routines.status_error") : t("project.routines.status_skipped");
+/** The chat link as it appears on a row: an anchor, so it opens in a new tab
+ *  with the usual gestures, and stops the click from also selecting the row. */
+function ChatLink({ href, compact = false }: { href: string; compact?: boolean }) {
+  return (
+    <Tip content={t("project.routines.open_chat")}>
+      <Link
+        to={href}
+        onClick={(e) => e.stopPropagation()}
+        aria-label={t("project.routines.open_chat")}
+        data-testid="routine-open-chat"
+        className="inline-flex shrink-0 items-center gap-1 rounded-md px-1.5 py-1 text-[11px] text-muted-fg hover:bg-muted hover:text-foreground"
+      >
+        <MessageSquare size={13} />
+        {!compact && t("project.routines.open_chat")}
+      </Link>
+    </Tip>
+  );
 }
 
 function FlowBlock({ title, children }: { title: string; children: ReactNode }) {
@@ -48,61 +93,59 @@ function FlowBlock({ title, children }: { title: string; children: ReactNode })
   );
 }
 
-type RunFlow = {
-  pre?: { output?: string; exit?: number } | null;
-  post?: Array<{ cmd: string; exit: number; stdout: string; stderr: string }> | null;
-};
-
 const PRE_CLS = "whitespace-pre-wrap break-words rounded-lg border border-border bg-muted/20 px-3 py-2 font-mono text-[11px]";
 
 /** Side panel: the full flow of the clicked run — pre → action → post. Phases
  *  that did not run are hidden; older runs (no saved flow) show just the output. */
-function RunDetailPanel({ m, onClose }: { m: MessageEntry; onClose: () => void }) {
-  const st = runStatus(m);
-  const meta = (m.meta || {}) as Record<string, any>;
-  const result = (meta.result || {}) as Record<string, any>;
-  const flow = (meta.flow || null) as RunFlow | null;
+function RunDetailPanel({ pid, run, onClose }: { pid: string; run: RoutineRun; onClose: () => void }) {
+  const result = run.result || {};
   const output = String(result.reply ?? result.text ?? result.stdout ?? "");
   const err = String(result.error ?? result.stderr ?? "");
   const note = String(result.note ?? "");
   const empty = <span className="text-muted-fg">{t("project.routines.block_empty")}</span>;
+  const chatMsgs = routineRunToChatMsgs(result, run.ts);
+  const href = chatHrefOf(pid, run);
 
   return (
     <div className="flex min-h-0 flex-col border-l border-border">
       <div className="flex shrink-0 items-center justify-between gap-2 px-4 py-2">
         <div className="flex items-center gap-2 text-xs">
-          <StatusIcon st={st} />
-          <span className={cn("font-medium", st === "ok" && "text-emerald-500", st === "error" && "text-destructive", st === "skipped" && "text-amber-500")}>{statusLabel(st)}</span>
-          <span className="font-mono text-muted-fg">{fmtTs(m.ts)}</span>
+          <StatusIcon st={run.status} />
+          <span className={cn("font-medium", run.status === "ok" && toneText.emerald, run.status === "error" && "text-destructive", run.status === "skipped" && toneText.amber)}>{statusLabel(run.status)}</span>
+          <span className="font-mono text-muted-fg">{fmtTs(run.ts)}</span>
+        </div>
+        <div className="flex items-center gap-1">
+          {href && <ChatLink href={href} />}
+          <button type="button" onClick={onClose} aria-label={t("project.routines.runs_close")}
+            className="rounded-md p-1 text-muted-fg hover:bg-muted hover:text-foreground">
+            <X size={14} />
+          </button>
         </div>
-        <button type="button" onClick={onClose} aria-label={t("project.routines.runs_close")}
-          className="rounded-md p-1 text-muted-fg hover:bg-muted hover:text-foreground">
-          <X size={14} />
-        </button>
       </div>
       <div className="min-h-0 flex-1 space-y-3 overflow-y-auto px-4 pb-4 text-xs">
-        {m.body && <div className="text-muted-fg">{m.body}</div>}
+        {run.body && <div className="text-muted-fg">{run.body}</div>}
 
-        {/* Pre-commands */}
-        {flow?.pre && (
+        {run.flow?.pre && (
           <FlowBlock title={t("project.routines.block_pre")}>
-            {flow.pre.output?.trim() ? <pre className={PRE_CLS}>{flow.pre.output}</pre> : empty}
+            {run.flow.pre.output?.trim() ? <pre className={PRE_CLS}>{run.flow.pre.output}</pre> : empty}
           </FlowBlock>
         )}
 
-        {/* Action output (agent reply / telegram message / shell stdout) */}
-        <FlowBlock title={t("project.routines.runs_output")}>
-          {output ? <pre className={PRE_CLS}>{output}</pre>
+        <FlowBlock title={chatMsgs.length ? t("project.routines.runs_chat") : t("project.routines.runs_output")}>
+          {chatMsgs.length ? (
+            <div data-testid="routine-run-chat" className="-mx-1">
+              <MessageList msgs={chatMsgs} onCopy={() => {}} autoscroll={false} />
+            </div>
+          ) : output ? <pre className={PRE_CLS}>{output}</pre>
             : err ? <pre className="whitespace-pre-wrap break-words rounded-lg bg-destructive/10 px-3 py-2 font-mono text-[11px] text-destructive">{err}</pre>
             : note ? <div className="text-muted-fg">{note}</div>
             : empty}
         </FlowBlock>
 
-        {/* Post-commands */}
-        {flow?.post && flow.post.length > 0 && (
+        {run.flow?.post && run.flow.post.length > 0 && (
           <FlowBlock title={t("project.routines.block_post")}>
             <div className="space-y-1.5">
-              {flow.post.map((p, i) => (
+              {run.flow.post.map((p, i) => (
                 <div key={i} className="space-y-1">
                   <div className="font-mono text-[10px] text-muted-fg">$ {p.cmd} <span className="opacity-70">· exit {p.exit}</span></div>
                   {(p.stdout || p.stderr) && <pre className={PRE_CLS}>{p.stdout || p.stderr}</pre>}
@@ -116,65 +159,133 @@ function RunDetailPanel({ m, onClose }: { m: MessageEntry; onClose: () => void }
   );
 }
 
-/** Bottom pane of the detail view: scrollable list of past runs; clicking one
- *  opens a side grid column with that run's details. */
-export function ExecutionsList({ pid, name, running }: { pid: string; name: string; running?: boolean }) {
-  const runs = useSWR(
-    `/api/projects/${pid}/routines/${name}/runs`,
-    async () => {
-      const msgs = await Messages.project(pid, { channel: "routine", limit: 200 });
-      // Keep one row per run: the runner's end-of-run system summary.
-      return msgs.filter((m) =>
-        (m.meta as Record<string, unknown>)?.routine === name &&
-        (m.actor_id === "apx:routine" || m.type === "system"),
-      );
-    },
+/** Same panel, for the run happening right now: the steps as they arrive. This
+ *  is the answer to "it says running — running WHAT?", which before this had no
+ *  answer anywhere, not even in the tab that started it. */
+function LiveRunPanel({ pid, run, onClose }: { pid: string; run: LiveRoutineRun; onClose: () => void }) {
+  const msgs = liveRunToChatMsgs(run);
+  const href = chatHrefOf(pid, { conversation_id: run.conversation_id ?? null, agent_slug: run.agent_slug });
+  return (
+    <div className="flex min-h-0 flex-col border-l border-border" data-testid="routine-live-panel">
+      <div className="flex shrink-0 items-center justify-between gap-2 px-4 py-2">
+        <div className="flex items-center gap-2 text-xs">
+          <Spinner size={12} />
+          <span className="font-medium text-primary">{RUN_PHASE_LABELS[run.phase]?.() || run.phase}</span>
+          <span className="font-mono text-muted-fg">{fmtTs(run.started_at)}</span>
+        </div>
+        <div className="flex items-center gap-1">
+          {href && <ChatLink href={href} />}
+          <button type="button" onClick={onClose} aria-label={t("project.routines.runs_close")}
+            className="rounded-md p-1 text-muted-fg hover:bg-muted hover:text-foreground">
+            <X size={14} />
+          </button>
+        </div>
+      </div>
+      <div className="min-h-0 flex-1 space-y-3 overflow-y-auto px-4 pb-4 text-xs">
+        <FlowBlock title={t("project.routines.runs_chat")}>
+          {msgs.length ? (
+            <div data-testid="routine-run-chat" className="-mx-1">
+              <MessageList msgs={msgs} onCopy={() => {}} autoscroll={false} />
+            </div>
+          ) : (
+            <div className="text-muted-fg">{t("project.routines.live_waiting")}</div>
+          )}
+        </FlowBlock>
+      </div>
+    </div>
   );
-  const rows = (runs.data || []).slice(0, 50);
+}
+
+/** Bottom pane of the detail view: the run in flight (if any) above the runs
+ *  already made. Clicking one opens it in a side grid column. */
+export function ExecutionsList({ pid, name }: { pid: string; name: string }) {
+  const runsKey = `/api/projects/${pid}/routines/${name}/runs`;
+  const liveKey = `/api/projects/${pid}/routines/${name}/run`;
+  const runs = useSWR(runsKey, () => Routines.runs(pid, name));
+  // Seeded from the daemon rather than from a click, which is what makes a run
+  // survive a refresh and show up on a panel that never started it.
+  const seed = useSWR(liveKey, () => Routines.activeRun(pid, name).then((r) => r.run));
+  const [live, setLive] = useState<LiveRoutineRun | null>(null);
   const [selTs, setSelTs] = useState<string | null>(null);
-  const selected = selTs ? rows.find((m) => m.ts === selTs) || null : null;
+
+  useEffect(() => { setLive(seed.data ?? null); }, [seed.data]);
+
+  useEffect(() => subscribeRoutineRuns((frame) => {
+    if (frame.routine !== name || String(frame.project_id) !== String(pid)) return;
+    if (frame.phase === "end") {
+      setLive(null);
+      // The run only exists in the ledger now that it is over — and the routine
+      // header's "last run / last status" moved with it.
+      globalMutate(runsKey);
+      globalMutate(`/api/projects/${pid}/routines`);
+    } else {
+      setLive(frame.run);
+    }
+  }), [pid, name, runsKey]);
+
+  const rows = runs.data || [];
+  const selected = selTs && selTs !== "live" ? rows.find((r) => r.ts === selTs) || null : null;
+  const liveSelected = selTs === "live" && live ? live : null;
 
   return (
     <div className="flex min-h-0 flex-1 flex-col border-t border-border">
       <div className="shrink-0 px-4 pb-1.5 pt-3 text-[11px] font-semibold uppercase tracking-wide text-muted-fg">
         {t("project.routines.runs_title")}
       </div>
-      <div className={cn("grid min-h-0 flex-1 overflow-hidden", selected ? "grid-cols-[minmax(0,1fr)_minmax(0,1.1fr)]" : "grid-cols-1")}>
+      <div className={cn("grid min-h-0 flex-1 overflow-hidden", selected || liveSelected ? "grid-cols-[minmax(0,1fr)_minmax(0,1.1fr)]" : "grid-cols-1")}>
         {/* list */}
         <div className="min-h-0 overflow-y-auto px-4 pb-4">
           {runs.isLoading && <Loading />}
-          {!runs.isLoading && rows.length === 0 && (
+          {!runs.isLoading && rows.length === 0 && !live && (
             <div className="text-xs text-muted-fg">{t("project.routines.runs_empty")}</div>
           )}
           <ul className="space-y-1">
-            {running && (
+            {live && (
               <li>
-                <div className="flex w-full items-center gap-2 rounded-md border border-primary/40 bg-primary/5 px-3 py-1.5 text-xs">
+                <button
+                  type="button"
+                  onClick={() => setSelTs(selTs === "live" ? null : "live")}
+                  aria-current={selTs === "live"}
+                  data-testid="routine-live-row"
+                  className={cn(
+                    "flex w-full items-center gap-2 rounded-md border px-3 py-1.5 text-left text-xs transition-colors",
+                    selTs === "live" ? "border-primary/60 bg-primary/10" : "border-primary/40 bg-primary/5 hover:border-primary/60",
+                  )}
+                >
                   <Spinner size={12} />
-                  <span className="text-muted-fg">{t("project.routines.running")}</span>
-                </div>
+                  <span className="font-medium text-primary">{RUN_PHASE_LABELS[live.phase]?.() || t("project.routines.running")}</span>
+                  <span className="truncate text-muted-fg">
+                    {TRIGGER_LABELS[live.trigger]?.() || live.trigger}
+                  </span>
+                  <span className="ml-auto shrink-0 font-mono text-muted-fg">{fmtTs(live.started_at)}</span>
+                </button>
               </li>
             )}
-            {rows.map((m, i) => {
-              const st = runStatus(m);
-              const active = selTs === m.ts;
+            {rows.map((run, i) => {
+              const active = selTs === run.ts;
+              const href = chatHrefOf(pid, run);
               return (
-                <li key={`${m.ts}-${i}`}>
-                  <button
-                    type="button"
-                    onClick={() => setSelTs(active ? null : m.ts)}
-                    aria-current={active}
-                    className={cn(
-                      "flex w-full items-center gap-2 rounded-md border px-3 py-1.5 text-left text-xs transition-colors",
-                      active ? "border-primary/50 bg-primary/10" : "border-border bg-muted/30 hover:border-muted-fg/40",
-                    )}
-                  >
-                    <StatusIcon st={st} />
-                    <span className="font-mono text-muted-fg">{fmtTs(m.ts)}</span>
-                    <span className={cn("font-medium", st === "ok" && "text-emerald-500", st === "error" && "text-destructive", st === "skipped" && "text-amber-500")}>
-                      {statusLabel(st)}
-                    </span>
-                  </button>
+                <li key={`${run.ts}-${i}`}>
+                  {/* The link is a sibling of the row button, not inside it: a
+                      button in a button is invalid and swallows the click. */}
+                  <div className={cn(
+                    "flex items-center gap-1 rounded-md border pr-1 transition-colors",
+                    active ? "border-primary/50 bg-primary/10" : "border-border bg-muted/30 hover:border-muted-fg/40",
+                  )}>
+                    <button
+                      type="button"
+                      onClick={() => setSelTs(active ? null : run.ts)}
+                      aria-current={active}
+                      className="flex min-w-0 flex-1 items-center gap-2 px-3 py-1.5 text-left text-xs"
+                    >
+                      <StatusIcon st={run.status} />
+                      <span className="font-mono text-muted-fg">{fmtTs(run.ts)}</span>
+                      <span className={cn("font-medium", run.status === "ok" && toneText.emerald, run.status === "error" && "text-destructive", run.status === "skipped" && toneText.amber)}>
+                        {statusLabel(run.status)}
+                      </span>
+                    </button>
+                    {href && <ChatLink href={href} compact />}
+                  </div>
                 </li>
               );
             })}
@@ -182,7 +293,8 @@ export function ExecutionsList({ pid, name, running }: { pid: string; name: stri
         </div>
 
         {/* run detail (opens as a side grid column) */}
-        {selected && <RunDetailPanel m={selected} onClose={() => setSelTs(null)} />}
+        {liveSelected && <LiveRunPanel pid={pid} run={liveSelected} onClose={() => setSelTs(null)} />}
+        {!liveSelected && selected && <RunDetailPanel pid={pid} run={selected} onClose={() => setSelTs(null)} />}
       </div>
     </div>
   );