@agentprojectcontext/apx 1.39.0 → 1.40.0

package/src/interfaces/web/src/components/AddProjectDialog.tsx

@@ -1,6 +1,7 @@
 import { useEffect, useState } from "react";
+import { useNavigate } from "react-router-dom";
 import { useSWRConfig } from "swr";
-import { FolderOpen, Home, Search } from "lucide-react";
+import { FolderOpen, Home, Search, X } from "lucide-react";
 import { Filesystem, Projects } from "../lib/api";
 import { Button, Dialog, Empty, Field, Input, Loading } from "./ui";
 import { useToast } from "./Toast";
@@ -8,8 +9,10 @@ import { t } from "../i18n";
 
 export function AddProjectDialog({ open, onClose }: { open: boolean; onClose: () => void }) {
   const { mutate } = useSWRConfig();
+  const navigate = useNavigate();
   const toast = useToast();
   const [path, setPath] = useState("");
+  const [browseOpen, setBrowseOpen] = useState(false);
   const [browsePath, setBrowsePath] = useState("");
   const [entries, setEntries] = useState<string[]>([]);
   const [parent, setParent] = useState<string | null>(null);
@@ -35,10 +38,34 @@ export function AddProjectDialog({ open, onClose }: { open: boolean; onClose: ()
     }
   };
 
+  // Reset everything when the dialog closes so reopening starts fresh.
   useEffect(() => {
-    if (open && !browsePath) loadDirs(path || "~", true);
+    if (open) return;
+    setPath("");
+    setBrowseOpen(false);
+    setBrowsePath("");
+    setEntries([]);
+    setParent(null);
+    setBrowseError("");
   }, [open]);
 
+  const openBrowser = async () => {
+    // Try the OS-native folder picker first (osascript / zenity / PowerShell).
+    // If the daemon can't open one, fall back to the inline directory list.
+    setLoadingDirs(true);
+    try {
+      const out = await Filesystem.pickDir(t("add_project.picker_prompt"));
+      if ("cancelled" in out) return;
+      setPath(out.path);
+      return;
+    } catch {
+      setBrowseOpen(true);
+      await loadDirs(path || "~");
+    } finally {
+      setLoadingDirs(false);
+    }
+  };
+
   const submit = async () => {
     const trimmed = path.trim();
     if (!trimmed) { toast.error(t("add_project.path_required")); return; }
@@ -47,8 +74,8 @@ export function AddProjectDialog({ open, onClose }: { open: boolean; onClose: ()
       const out = await Projects.register(trimmed);
       toast.success(t("add_project.registered", { id: out.id }));
       await mutate("/projects");
-      setPath("");
       onClose();
+      navigate(`/p/${out.id}`);
     } catch (e) {
       toast.error((e as Error).message);
     } finally { setBusy(false); }
@@ -77,44 +104,49 @@ export function AddProjectDialog({ open, onClose }: { open: boolean; onClose: ()
               onChange={(e) => setPath(e.target.value)}
               onKeyDown={(e) => { if (e.key === "Enter") submit(); }}
             />
-            <Button onClick={() => loadDirs(path || "~")} disabled={loadingDirs}>
+            <Button onClick={openBrowser} disabled={loadingDirs}>
               <Search size={14} /> {t("add_project.search_btn")}
             </Button>
           </div>
         </Field>
 
-        <div className="rounded-md border border-border bg-muted/20">
-          <div className="flex items-center justify-between border-b border-border px-3 py-2">
-            <span className="truncate font-mono text-xs text-muted-fg">{browsePath || path || "~"}</span>
-            <div className="flex gap-1">
-              <Button size="sm" variant="ghost" onClick={() => loadDirs("~")} disabled={loadingDirs}>
-                <Home size={13} />
-              </Button>
-              <Button size="sm" variant="ghost" onClick={() => parent && loadDirs(parent)} disabled={!parent || loadingDirs}>
-                ..
-              </Button>
+        {browseOpen && (
+          <div className="rounded-md border border-border bg-muted/20">
+            <div className="flex items-center justify-between border-b border-border px-3 py-2">
+              <span className="truncate font-mono text-xs text-muted-fg">{browsePath || path || "~"}</span>
+              <div className="flex gap-1">
+                <Button size="sm" variant="ghost" onClick={() => loadDirs("~")} disabled={loadingDirs}>
+                  <Home size={13} />
+                </Button>
+                <Button size="sm" variant="ghost" onClick={() => parent && loadDirs(parent)} disabled={!parent || loadingDirs}>
+                  ..
+                </Button>
+                <Button size="sm" variant="ghost" onClick={() => setBrowseOpen(false)} disabled={loadingDirs}>
+                  <X size={13} />
+                </Button>
+              </div>
+            </div>
+            <div className="max-h-64 overflow-y-auto p-2">
+              {loadingDirs && <Loading />}
+              {!loadingDirs && browseError && (
+                <Empty>{t("add_project.browser_unavailable")}</Empty>
+              )}
+              {!loadingDirs && !browseError && entries.length === 0 && <Empty>{t("add_project.no_folders")}</Empty>}
+              {!loadingDirs && !browseError && entries.map((entry) => (
+                <button
+                  key={entry}
+                  type="button"
+                  onClick={() => loadDirs(entry)}
+                  className="flex w-full items-center gap-2 rounded-md px-2 py-1.5 text-left text-sm hover:bg-accent"
+                >
+                  <FolderOpen size={14} className="text-muted-fg" />
+                  <span className="truncate">{entry.split("/").pop()}</span>
+                  <span className="ml-auto truncate font-mono text-[10px] text-muted-fg">{entry}</span>
+                </button>
+              ))}
             </div>
           </div>
-          <div className="max-h-64 overflow-y-auto p-2">
-            {loadingDirs && <Loading />}
-            {!loadingDirs && browseError && (
-              <Empty>{t("add_project.browser_unavailable")}</Empty>
-            )}
-            {!loadingDirs && !browseError && entries.length === 0 && <Empty>{t("add_project.no_folders")}</Empty>}
-            {!loadingDirs && !browseError && entries.map((entry) => (
-              <button
-                key={entry}
-                type="button"
-                onClick={() => loadDirs(entry)}
-                className="flex w-full items-center gap-2 rounded-md px-2 py-1.5 text-left text-sm hover:bg-accent"
-              >
-                <FolderOpen size={14} className="text-muted-fg" />
-                <span className="truncate">{entry.split("/").pop()}</span>
-                <span className="ml-auto truncate font-mono text-[10px] text-muted-fg">{entry}</span>
-              </button>
-            ))}
-          </div>
-        </div>
+        )}
       </div>
     </Dialog>
   );

package/src/interfaces/web/src/components/ModelCombobox.tsx

@@ -2,6 +2,7 @@ import { useEffect, useLayoutEffect, useRef, useState } from "react";
 import { createPortal } from "react-dom";
 import { AlertTriangle, ChevronDown } from "lucide-react";
 import { cn } from "../lib/cn";
+import { Tip } from "./ui/tip";
 import { t } from "../i18n";
 
 // Editable combobox: type freely, matching options appear below; click one to
@@ -83,9 +84,11 @@ export function ModelCombobox({
         )}
       >
         {invalid && (
-          <span title={invalidHint || t("models_ui.invalid_hint")}>
-            <AlertTriangle className="size-3.5 shrink-0 text-amber-400" />
-          </span>
+          <Tip content={invalidHint || t("models_ui.invalid_hint")}>
+            <span>
+              <AlertTriangle className="size-3.5 shrink-0 text-amber-400" />
+            </span>
+          </Tip>
         )}
         <input
           value={query}

package/src/interfaces/web/src/components/chat/MessageBubble.tsx

@@ -4,6 +4,7 @@ import { ToolCall } from "./ToolCall";
 import { AskQuestionsCard } from "./AskQuestionsCard";
 import { AskAnswersCard, parseAskAnswerText } from "./AskAnswersCard";
 import { textOf, type ChatMsg } from "../../hooks/useChat";
+import { Tip } from "../ui/tip";
 import { t } from "../../i18n";
 
 interface Props {
@@ -51,22 +52,23 @@ export function MessageBubble({ msg, isLast, isAskAnswer, onCopy }: Props) {
 
         {/* Skill Inspector: which skills the per-turn RAG injected for this turn. */}
         {!mine && msg.inspector && (msg.inspector.loaded?.length || msg.inspector.hinted?.length) ? (
-          <div
-            className="flex flex-wrap items-center gap-1 text-[10px] text-sky-400/90"
-            title={t("shared_ui.skill_inspector_title", { embedder: msg.inspector.embedder || "RAG" })}
-          >
-            <Sparkles size={10} />
-            {msg.inspector.loaded?.map((s) => (
-              <span key={`l-${s}`} className="rounded bg-sky-500/15 px-1 py-0.5 font-mono">
-                {s}
-              </span>
-            ))}
-            {msg.inspector.hinted?.map((s) => (
-              <span key={`h-${s}`} className="rounded border border-sky-500/30 px-1 py-0.5 font-mono opacity-70">
-                {s}?
-              </span>
-            ))}
-          </div>
+          <Tip content={t("shared_ui.skill_inspector_title", { embedder: msg.inspector.embedder || "RAG" })}>
+            <div
+              className="flex flex-wrap items-center gap-1 text-[10px] text-sky-400/90"
+            >
+              <Sparkles size={10} />
+              {msg.inspector.loaded?.map((s) => (
+                <span key={`l-${s}`} className="rounded bg-sky-500/15 px-1 py-0.5 font-mono">
+                  {s}
+                </span>
+              ))}
+              {msg.inspector.hinted?.map((s) => (
+                <span key={`h-${s}`} className="rounded border border-sky-500/30 px-1 py-0.5 font-mono opacity-70">
+                  {s}?
+                </span>
+              ))}
+            </div>
+          </Tip>
         ) : null}
 
         {/* Ordered parts: interleaved assistant text + tool calls. */}
@@ -110,15 +112,16 @@ export function MessageBubble({ msg, isLast, isAskAnswer, onCopy }: Props) {
             <span>· {t("shared_ui.tools_count", { n: msg.parts.filter((p) => p.kind === "tool").length })}</span>
           )}
           {onCopy && copyText && (
-            <button
-              type="button"
-              onClick={() => onCopy(copyText)}
-              className="inline-flex items-center gap-1 hover:text-foreground"
-              title={t("chat_ui.copy")}
-              aria-label={t("chat_ui.copy")}
-            >
-              <Copy size={10} /> {t("chat_ui.copy")}
-            </button>
+            <Tip content={t("chat_ui.copy")}>
+              <button
+                type="button"
+                onClick={() => onCopy(copyText)}
+                className="inline-flex items-center gap-1 hover:text-foreground"
+                aria-label={t("chat_ui.copy")}
+              >
+                <Copy size={10} /> {t("chat_ui.copy")}
+              </button>
+            </Tip>
           )}
         </div>
       </div>

package/src/interfaces/web/src/components/chat/ModelPicker.tsx

@@ -2,6 +2,7 @@ import { useEffect, useRef, useState } from "react";
 import { Server, ChevronDown, X, Check } from "lucide-react";
 import { cn } from "../../lib/cn";
 import { Engines } from "../../lib/api";
+import { Tip } from "../ui/tip";
 import { t } from "../../i18n";
 
 // Compact model picker for the chat composer (the panda.project pattern): a
@@ -70,23 +71,24 @@ export function ModelPicker({
 
   return (
     <div ref={wrapRef} className="relative">
-      <button
-        type="button"
-        disabled={disabled}
-        onClick={() => setOpen((v) => !v)}
-        data-testid="chat-model-picker"
-        className={cn(
-          "flex max-w-[200px] items-center gap-1 rounded-md border border-transparent px-1.5 py-0.5 text-[11px] text-muted-foreground transition-colors",
-          "hover:bg-accent/60 hover:text-foreground",
-          value && "text-foreground",
-        )}
-        title={t("chat_ui.pick_model")}
-        aria-label={t("chat_ui.pick_model")}
-      >
-        <Server className="size-3 shrink-0" />
-        <span className="truncate font-mono">{label}</span>
-        <ChevronDown className="size-3 shrink-0 opacity-60" />
-      </button>
+      <Tip content={t("chat_ui.pick_model")}>
+        <button
+          type="button"
+          disabled={disabled}
+          onClick={() => setOpen((v) => !v)}
+          data-testid="chat-model-picker"
+          className={cn(
+            "flex max-w-[200px] items-center gap-1 rounded-md border border-transparent px-1.5 py-0.5 text-[11px] text-muted-foreground transition-colors",
+            "hover:bg-accent/60 hover:text-foreground",
+            value && "text-foreground",
+          )}
+          aria-label={t("chat_ui.pick_model")}
+        >
+          <Server className="size-3 shrink-0" />
+          <span className="truncate font-mono">{label}</span>
+          <ChevronDown className="size-3 shrink-0 opacity-60" />
+        </button>
+      </Tip>
 
       {open && (
         <div className="absolute bottom-full left-0 z-50 mb-1.5 w-64 rounded-lg border border-border bg-popover p-1.5 shadow-md ring-1 ring-foreground/10">

package/src/interfaces/web/src/components/deck/WidgetRow.tsx

@@ -1,5 +1,6 @@
 import { useState } from "react";
 import { Badge, Switch } from "../ui";
+import { Tip } from "../ui/tip";
 import { cn } from "../../lib/cn";
 import type { DeckWidget } from "../../lib/api/deck";
 import { t } from "../../i18n";
@@ -63,13 +64,14 @@ export function WidgetRow({ widget, onToggle }: WidgetRowProps) {
       )}
     >
       {/* Source dot */}
-      <span
-        title={widget.source === "apx" ? t("deck_screen.widget_native") : t("deck_screen.widget_external")}
-        className={cn(
-          "size-2 shrink-0 rounded-full",
-          widget.source === "apx" ? "bg-emerald-500" : "bg-sky-400"
-        )}
-      />
+      <Tip content={widget.source === "apx" ? t("deck_screen.widget_native") : t("deck_screen.widget_external")}>
+        <span
+          className={cn(
+            "size-2 shrink-0 rounded-full",
+            widget.source === "apx" ? "bg-emerald-500" : "bg-sky-400"
+          )}
+        />
+      </Tip>
 
       {/* Title + desktop */}
       <div className="min-w-0 flex-1">

package/src/interfaces/web/src/components/inputs/VarTokenInput.tsx

@@ -8,6 +8,7 @@ import {
 } from "react";
 import { Plus } from "lucide-react";
 import { cn } from "../../lib/cn";
+import { Tip } from "../ui/tip";
 import { t } from "../../i18n";
 
 // VarTokenInput
@@ -285,25 +286,26 @@ export const VarTokenInput = forwardRef<VarTokenInputHandle, VarTokenInputProps>
           )}
         </div>
         <div className="relative flex">
-          <button
-            type="button"
-            // onMouseDown prevents the editor from blurring before we capture
-            // the saved range — that's what kept the caret jumping to start.
-            onMouseDown={(e) => {
-              e.preventDefault();
-              saveSelection();
-            }}
-            onClick={() => setPickerOpen((v) => !v)}
-            aria-label={t("chat_ui.insert_variable")}
-            title={t("chat_ui.insert_variable")}
-            className={cn(
-              "flex items-center justify-center px-2 min-w-8 border-l border-input text-muted-foreground rounded-r-lg",
-              "hover:bg-muted/60 hover:text-foreground transition-colors",
-              pickerOpen && "bg-muted/60 text-foreground",
-            )}
-          >
-            <Plus size={14} />
-          </button>
+          <Tip content={t("chat_ui.insert_variable")}>
+            <button
+              type="button"
+              // onMouseDown prevents the editor from blurring before we capture
+              // the saved range — that's what kept the caret jumping to start.
+              onMouseDown={(e) => {
+                e.preventDefault();
+                saveSelection();
+              }}
+              onClick={() => setPickerOpen((v) => !v)}
+              aria-label={t("chat_ui.insert_variable")}
+              className={cn(
+                "flex items-center justify-center px-2 min-w-8 border-l border-input text-muted-foreground rounded-r-lg",
+                "hover:bg-muted/60 hover:text-foreground transition-colors",
+                pickerOpen && "bg-muted/60 text-foreground",
+              )}
+            >
+              <Plus size={14} />
+            </button>
+          </Tip>
           {pickerOpen && (
             <VarPickerPopover
               query={pickerQuery}

package/src/interfaces/web/src/components/layout/ProjectSidebar.tsx

@@ -31,6 +31,7 @@ import type { ProjectEntry } from "../../types/daemon";
 interface Props {
   onSelect: (href: string) => void;
   onOpenRoby: () => void;
+  onOpenAddProject?: () => void;
 }
 
 interface ModuleItem {
@@ -158,7 +159,7 @@ function RailProjectMenu({
   );
 }
 
-export function ProjectSidebar({ onSelect, onOpenRoby }: Props) {
+export function ProjectSidebar({ onSelect, onOpenRoby, onOpenAddProject }: Props) {
   const { projects, isLoading } = useProjects();
   const location = useLocation();
   const MODULES = buildModules();
@@ -303,7 +304,7 @@ export function ProjectSidebar({ onSelect, onOpenRoby }: Props) {
             testId="nav-add-project"
             icon={<Plus size={18} />}
             active={false}
-            onClick={() => onSelect("/?action=add-project")}
+            onClick={() => (onOpenAddProject ? onOpenAddProject() : onSelect("/?action=add-project"))}
             title={t("nav.add_project")}
           />
         </div>

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

@@ -0,0 +1,23 @@
+import { Tip } from "../ui";
+import { t } from "../../i18n";
+import { routineVars } from "./shared";
+
+// Reference card (lives under the options column): every variable with its
+// context tag + a hover tooltip explaining it. The click-to-insert chips under
+// each textarea are tooltip-free — the explanation lives here.
+export function AvailableVarsCard() {
+  return (
+    <div className="rounded-lg border border-border bg-muted/10 p-3">
+      <div className="mb-1.5 text-[11px] font-semibold uppercase tracking-wide text-muted-fg">{t("project.routines.vars_title")}</div>
+      <div className="flex flex-wrap gap-1.5">
+        {routineVars().map((v) => (
+          <Tip key={v.v} content={<span className="block max-w-[240px] whitespace-normal leading-snug">{v.desc}</span>}>
+            <span className="inline-flex cursor-help items-center gap-1 rounded-md border border-border bg-card px-1.5 py-0.5 font-mono text-[10px]">
+              {v.v}<span className="not-italic text-muted-fg">· {v.where}</span>
+            </span>
+          </Tip>
+        ))}
+      </div>
+    </div>
+  );
+}

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

@@ -0,0 +1,189 @@
+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 { cn } from "../../lib/cn";
+import { t } from "../../i18n";
+
+// 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.
+
+type RunSt = "ok" | "error" | "skipped";
+
+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";
+}
+
+function fmtTs(ts: string): string {
+  const d = new Date(ts);
+  if (Number.isNaN(d.getTime())) return ts;
+  return d.toLocaleString(undefined, {
+    month: "short", day: "2-digit", hour: "2-digit", minute: "2-digit",
+  });
+}
+
+function StatusIcon({ st }: { st: RunSt }) {
+  if (st === "ok") return <Check size={13} className="shrink-0 text-emerald-500" />;
+  if (st === "error") return <X size={13} className="shrink-0 text-destructive" />;
+  return <Ban size={13} className="shrink-0 text-amber-500" />;
+}
+
+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");
+}
+
+function FlowBlock({ title, children }: { title: string; children: ReactNode }) {
+  return (
+    <div className="space-y-1">
+      <div className="text-[10px] font-semibold uppercase tracking-wide text-muted-fg">{title}</div>
+      {children}
+    </div>
+  );
+}
+
+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;
+  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>;
+
+  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>
+        </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>}
+
+        {/* Pre-commands */}
+        {flow?.pre && (
+          <FlowBlock title={t("project.routines.block_pre")}>
+            {flow.pre.output?.trim() ? <pre className={PRE_CLS}>{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>
+            : 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 && (
+          <FlowBlock title={t("project.routines.block_post")}>
+            <div className="space-y-1.5">
+              {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>}
+                </div>
+              ))}
+            </div>
+          </FlowBlock>
+        )}
+      </div>
+    </div>
+  );
+}
+
+/** 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(
+    `/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"),
+      );
+    },
+  );
+  const rows = (runs.data || []).slice(0, 50);
+  const [selTs, setSelTs] = useState<string | null>(null);
+  const selected = selTs ? rows.find((m) => m.ts === selTs) || null : 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")}>
+        {/* list */}
+        <div className="min-h-0 overflow-y-auto px-4 pb-4">
+          {runs.isLoading && <Loading />}
+          {!runs.isLoading && rows.length === 0 && (
+            <div className="text-xs text-muted-fg">{t("project.routines.runs_empty")}</div>
+          )}
+          <ul className="space-y-1">
+            {running && (
+              <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">
+                  <Spinner size={12} />
+                  <span className="text-muted-fg">{t("project.routines.running")}</span>
+                </div>
+              </li>
+            )}
+            {rows.map((m, i) => {
+              const st = runStatus(m);
+              const active = selTs === m.ts;
+              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>
+              );
+            })}
+          </ul>
+        </div>
+
+        {/* run detail (opens as a side grid column) */}
+        {selected && <RunDetailPanel m={selected} onClose={() => setSelTs(null)} />}
+      </div>
+    </div>
+  );
+}

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

@@ -0,0 +1,14 @@
+import { cn } from "../../lib/cn";
+import { t } from "../../i18n";
+
+/** A titled, read-only, scrollable block — the detail-view stand-in for an editor textarea. */
+export function ReadOnlyBlock({ title, body, mono }: { title: string; body: string; mono?: boolean }) {
+  return (
+    <div className="space-y-1">
+      <div className="text-[11px] font-semibold uppercase tracking-wide text-muted-fg">{title}</div>
+      <div className={cn("max-h-44 overflow-auto whitespace-pre-wrap break-words rounded-lg border border-border bg-muted/20 px-3 py-2 text-xs", mono && "font-mono")}>
+        {body.trim() ? body : <span className="text-muted-fg">{t("project.routines.block_empty")}</span>}
+      </div>
+    </div>
+  );
+}