@agentprojectcontext/apx 1.77.3 → 1.79.0

package/src/interfaces/web/src/screens/base/GlobalTasksTab.tsx

@@ -1,10 +1,14 @@
 import { useState } from "react";
+import { Plus } from "lucide-react";
 import { useNavigate } from "react-router-dom";
 import { Tasks } from "../../lib/api";
 import type { TaskStatus } from "../../types/daemon";
 import { Section } from "../../components/Section";
 import { PagedList, usePagedQuery } from "../../components/Pager";
-import { Badge, Button, Empty, Loading } from "../../components/ui";
+import { Badge, Button, Dialog, Empty, Field, FilterChips, Input, Loading } from "../../components/ui";
+import { UiSelect } from "../../components/UiSelect";
+import { useProjects } from "../../hooks/useProjects";
+import { useToast } from "../../components/Toast";
 import { t } from "../../i18n";
 
 // All projects' tasks, aggregated (GET /tasks), server-paginated.
@@ -15,38 +19,79 @@ export function GlobalTasksTab() {
   // right now" is not "what is open". Only meaningful for open tasks.
   const [status, setStatus] = useState<TaskStatus | "">("");
   const effectiveStatus = state === "open" ? status : "";
+  // The per-project Tasks screen has always had an inline add form; this one
+  // did not, so on the base workspace the only way to file a task was to ask
+  // the agent. A picker is the price of the cross-project view.
+  const [adding, setAdding] = useState(false);
+  const [title, setTitle] = useState("");
+  const [target, setTarget] = useState("");
+  const [due, setDue] = useState("");
+  const [busy, setBusy] = useState(false);
+  const { projects } = useProjects();
+  const toast = useToast();
+
   const paged = usePagedQuery({
-    key: `/tasks?state=${state}&status=${effectiveStatus}`,
+    key: `/api/tasks?state=${state}&status=${effectiveStatus}`,
     fetchPage: (limit, offset) => Tasks.globalPage({ state, limit, offset, status: effectiveStatus }),
     resetKey: `${state}|${effectiveStatus}`,
   });
 
+  const create = async () => {
+    if (!title.trim() || !target) return;
+    setBusy(true);
+    try {
+      await Tasks.add(String(target), { title: title.trim(), due: due || null });
+      await paged.mutate();
+      setAdding(false);
+      setTitle(""); setDue("");
+    } catch (e) {
+      toast.error((e as Error).message);
+    } finally {
+      setBusy(false);
+    }
+  };
+
   return (
     <Section
       fullHeight
       title={t("project.global_tasks.title")}
       description={t("project.global_tasks.subtitle")}
       action={
-        <div className="flex gap-1">
-          {(["open", "done", "dropped", "all"] as const).map((s) => (
-            <Button key={s} size="sm" variant={state === s ? "primary" : "ghost"} onClick={() => setState(s)}>{s}</Button>
-          ))}
-        </div>
+        <Button
+          size="sm"
+          variant="primary"
+          onClick={() => { setTarget(String(projects[0]?.id ?? "")); setAdding(true); }}
+        >
+          <Plus size={14} /> {t("project.global_tasks.add")}
+        </Button>
+      }
+      filters={
+        <>
+          <FilterChips
+            value={state}
+            onChange={setState}
+            label={t("project.global_tasks.title")}
+            options={(["open", "done", "dropped", "all"] as const).map((s) => ({ value: s, label: s }))}
+          />
+          {state === "open" ? (
+            <>
+              <span className="mx-1 h-4 w-px bg-border" aria-hidden />
+              <FilterChips
+                value={status}
+                onChange={setStatus}
+                label={t("project.global_tasks.any_status")}
+                options={[
+                  { value: "" as const, label: t("project.global_tasks.any_status") },
+                  ...(["pending", "running", "in_review", "blocked"] as const).map((s) => ({
+                    value: s, label: s.replace("_", " "),
+                  })),
+                ]}
+              />
+            </>
+          ) : null}
+        </>
       }
     >
-      {state === "open" ? (
-        <div className="mb-3 flex flex-wrap gap-1">
-          <Button size="sm" variant={status === "" ? "primary" : "ghost"} onClick={() => setStatus("")}>
-            {t("project.global_tasks.any_status")}
-          </Button>
-          {(["pending", "running", "in_review", "blocked"] as const).map((s) => (
-            <Button key={s} size="sm" variant={status === s ? "primary" : "ghost"} onClick={() => setStatus(s)}>
-              {s.replace("_", " ")}
-            </Button>
-          ))}
-        </div>
-      ) : null}
-
       {paged.isLoading && <Loading />}
       {!paged.isLoading && paged.total === 0 && <Empty>{t("project.global_tasks.empty")}</Empty>}
       <PagedList paged={paged} fullHeight>
@@ -73,6 +118,44 @@ export function GlobalTasksTab() {
           ))}
         </ul>
       </PagedList>
+
+      <Dialog
+        open={adding}
+        onClose={() => setAdding(false)}
+        title={t("project.global_tasks.add_title")}
+        footer={
+          <>
+            <Button onClick={() => setAdding(false)}>{t("common.cancel")}</Button>
+            <Button variant="primary" loading={busy} disabled={!title.trim() || !target} onClick={create}>
+              {t("project.global_tasks.add")}
+            </Button>
+          </>
+        }
+      >
+        <div className="flex flex-col gap-3 p-5">
+          <Field label={t("project.global_tasks.field_title")}>
+            <Input
+              value={title}
+              onChange={(e) => setTitle(e.target.value)}
+              autoFocus
+              onKeyDown={(e) => { if (e.key === "Enter" && title.trim() && target) create(); }}
+            />
+          </Field>
+          {/* Required, unlike the per-project screen: a cross-project view has
+              no "here" to default to, and guessing one would file the task
+              somewhere the user did not look. */}
+          <Field label={t("project.global_tasks.field_project")}>
+            <UiSelect
+              value={String(target)}
+              onChange={setTarget}
+              options={projects.map((p) => ({ value: String(p.id), label: p.name || p.path }))}
+            />
+          </Field>
+          <Field label={t("project.global_tasks.field_due")}>
+            <Input type="date" value={due} onChange={(e) => setDue(e.target.value)} />
+          </Field>
+        </div>
+      </Dialog>
     </Section>
   );
 }

package/src/interfaces/web/src/screens/base/LogsTab.tsx

@@ -23,6 +23,16 @@ function actorLabel(m: MessageEntry): string {
   return m.agent_slug || m.actor_id || m.author || m.actor_kind || "—";
 }
 
+/** Structured lifecycle events APX records as they happen (a routine created,
+ *  a routine updated). Returns the label to badge, or null for ordinary rows. */
+function lifecycleEvent(m: MessageEntry): string | null {
+  const e = m.meta?.event;
+  if (typeof e !== "string") return null;
+  if (e === "routine_created") return t("logs.event_routine_created");
+  if (e === "routine_updated") return t("logs.event_routine_updated");
+  return null;
+}
+
 /** Model that produced this record — persisted in meta by every channel that
  *  runs an agent turn. Absent on user/system rows and on pre-1.74 history. */
 function modelOf(m: MessageEntry): string | null {
@@ -56,6 +66,11 @@ function LogRow({ m }: { m: MessageEntry }) {
           <span className="font-mono">{fmtTs(m.ts)}</span>
           <Badge tone="info">{m.channel}</Badge>
           {m.type && <Badge>{m.type}</Badge>}
+          {/* Lifecycle events get their own chip rather than blending into the
+              body text. "A routine now exists" is the kind of thing people
+              scroll back looking for, and a green badge is findable in a way a
+              sentence in a log line is not. */}
+          {lifecycleEvent(m) && <Badge tone="success">{lifecycleEvent(m)}</Badge>}
           <span className="font-medium text-foreground">{actorLabel(m)}</span>
           {model && <span className="font-mono text-[11px] text-sky-400/90">{model}</span>}
           {tokens !== null && <span className="font-mono text-[11px]">{tokens} tok</span>}
@@ -79,7 +94,7 @@ function LogRow({ m }: { m: MessageEntry }) {
 
 function DaemonErrors() {
   const [open, setOpen] = useState(false);
-  const logs = useSWR(open ? "/admin/logs?errors" : null, () => Admin.logs("errors", 200));
+  const logs = useSWR(open ? "/api/admin/logs?errors" : null, () => Admin.logs("errors", 200));
   const entries = logs.data?.entries || [];
   return (
     <details className="mb-3 rounded-lg border border-border bg-muted/20" onToggle={(e) => setOpen((e.target as HTMLDetailsElement).open)}>
@@ -116,8 +131,8 @@ export function LogsTab({ pid }: { pid?: string }) {
   const ch = channel.trim() || undefined;
 
   const key = isGlobal
-    ? `/messages/global?channel=${ch ?? ""}`
-    : `/projects/${pid}/messages?channel=${ch ?? ""}`;
+    ? `/api/messages/global?channel=${ch ?? ""}`
+    : `/api/projects/${pid}/messages?channel=${ch ?? ""}`;
   const list = useSWR<MessageEntry[]>(key, () =>
     isGlobal
       ? Messages.global({ channel: ch, limit: 300 })

package/src/interfaces/web/src/screens/base/SessionsTab.tsx

@@ -34,7 +34,7 @@ export function SessionsTab({ pid }: { pid?: string } = {}) {
   }, [input]);
 
   const paged = usePagedQuery<SessionRow>({
-    key: `/sessions?engine=${engine}&q=${query}&deep=${deep ? 1 : 0}&cwd=${cwd || ""}`,
+    key: `/api/sessions?engine=${engine}&q=${query}&deep=${deep ? 1 : 0}&cwd=${cwd || ""}`,
     fetchPage: (limit, offset) =>
       Sessions.page({ engine: engine || undefined, q: query || undefined, deep, cwd, limit, offset }),
     resetKey: `${engine}|${query}|${deep ? 1 : 0}|${cwd || ""}`,

package/src/interfaces/web/src/screens/modules/CodeScreen.tsx

@@ -50,7 +50,7 @@ function ResizeHandleH() {
 // what the session changed vs its git baseline.
 export function CodeScreen() {
   const toast = useToast();
-  const projects = useSWR("/projects", () => Projects.list());
+  const projects = useSWR("/api/projects", () => Projects.list());
   const projectList = useMemo(() => projects.data || [], [projects.data]);
 
   const [pid, setPid] = useState<string>("");

package/src/interfaces/web/src/screens/modules/DeckScreen.tsx

@@ -16,7 +16,7 @@ import { t } from "../../i18n";
 export function DeckScreen() {
   const toast = useToast();
   const { data, error, isLoading, mutate } = useSWR(
-    "/deck/manifest",
+    "/api/deck/manifest",
     () => Deck.manifest(),
     { refreshInterval: 30_000 }
   );

package/src/interfaces/web/src/screens/modules/DesktopScreen.tsx

@@ -12,7 +12,7 @@ import { t } from "../../i18n";
 // shortcut, appearance, activation) live in Settings → Desktop.
 export function DesktopScreen() {
   const { data: msgs, isLoading: msgsLoading, mutate: mutateMsgs } = useSWR(
-    "/messages/global?channel=desktop",
+    "/api/messages/global?channel=desktop",
     () => fetchDesktopMessages(40),
     { refreshInterval: 8000 },
   );

package/src/interfaces/web/src/screens/modules/VoiceScreen.tsx

@@ -23,7 +23,7 @@ export function VoiceScreen() {
     isLoading: provLoading,
     error: provError,
     mutate: mutateProviders,
-  } = useSWR("/tts/providers", () => Voice.providers());
+  } = useSWR("/api/tts/providers", () => Voice.providers());
 
   // editing holds the engine id being configured. "__new__" opens the modal in
   // "create custom provider" mode.

package/src/interfaces/web/src/screens/project/AgentDetailScreen.tsx

@@ -61,12 +61,12 @@ export function AgentDetailScreen({ pid }: { pid: string }) {
   const [tab, setTab] = useState<TabKey>("overview");
   const TABS = buildTabs();
 
-  const detail = useSWR(`/projects/${pid}/agents/${slug}`, () => Agents.get(pid, slug));
-  const agents = useSWR(`/projects/${pid}/agents`, () => Agents.list(pid));
-  const routines = useSWR(`/projects/${pid}/routines`, () => Routines.list(pid));
-  const records = useSWR(`/projects/${pid}/messages?agent=${slug}`, () => Messages.project(pid, { agent: slug, limit: 200 }));
-  const threads = useSWR(`/projects/${pid}/agents/${slug}/conversations`, () => Conversations.list(pid, slug));
-  const tasks = useSWR(`/projects/${pid}/tasks?all`, () => Tasks.list(pid, "all"));
+  const detail = useSWR(`/api/projects/${pid}/agents/${slug}`, () => Agents.get(pid, slug));
+  const agents = useSWR(`/api/projects/${pid}/agents`, () => Agents.list(pid));
+  const routines = useSWR(`/api/projects/${pid}/routines`, () => Routines.list(pid));
+  const records = useSWR(`/api/projects/${pid}/messages?agent=${slug}`, () => Messages.project(pid, { agent: slug, limit: 200 }));
+  const threads = useSWR(`/api/projects/${pid}/agents/${slug}/conversations`, () => Conversations.list(pid, slug));
+  const tasks = useSWR(`/api/projects/${pid}/tasks?all`, () => Tasks.list(pid, "all"));
 
   const a = detail.data;
   const myRoutines = routinesForAgent(routines.data || [], slug);
@@ -318,7 +318,7 @@ function Stat({ label, value, icon: I }: { label: string; value: number; icon: t
 // bare textarea.
 function MemoryEditor({ pid, slug, onSaved }: { pid: string; slug: string; onSaved: () => void }) {
   const toast = useToast();
-  const body = useSWR(`/memory/${pid}/agent:${slug}`, () => Agents.memory.get(pid, slug).then((r) => r.body));
+  const body = useSWR(`/api/memory/${pid}/agent:${slug}`, () => Agents.memory.get(pid, slug).then((r) => r.body));
 
   const file = useMemo<FileContent | null>(() => {
     if (body.data === undefined) return null;
@@ -425,7 +425,7 @@ function Field2({ label, value }: { label: string; value: string }) {
 }
 
 function ToolsPicker({ value, onChange }: { value: string; onChange: (v: string) => void }) {
-  const cat = useSWR("/tools", () => Tools.list());
+  const cat = useSWR("/api/tools", () => Tools.list());
   const selected = csv(value);
   const catalog = cat.data || [];
   const toggle = (name: string) => {

package/src/interfaces/web/src/screens/project/AgentsTab.tsx

@@ -89,7 +89,7 @@ function buildTree(agents: AgentEntry[]) {
 export function AgentsTab({ pid }: { pid: string }) {
   const navigate = useNavigate();
   const toast = useToast();
-  const list = useSWR(`/projects/${pid}/agents?stats=1`, () => Agents.list(pid, { stats: true }));
+  const list = useSWR(`/api/projects/${pid}/agents?stats=1`, () => Agents.list(pid, { stats: true }));
   const [view, setView] = useState<"hierarchy" | "list">("hierarchy");
   const [creating, setCreating] = useState(false);
 
@@ -154,7 +154,7 @@ function ImportVaultDialog({
   open, onClose, onImported, pid, existing,
 }: { open: boolean; onClose: () => void; onImported: () => void; pid: string; existing: string[] }) {
   const toast = useToast();
-  const vault = useSWR(open ? "/agents/vault" : null, () => Agents.vault());
+  const vault = useSWR(open ? "/api/agents/vault" : null, () => Agents.vault());
   const [busy, setBusy] = useState("");
   const items = vault.data || [];
 

package/src/interfaces/web/src/screens/project/ChatTab.tsx

@@ -20,10 +20,24 @@ import type { AgentEntry } from "../../types/daemon";
 // with a real APC agent slug (which must match /^[a-z][a-z0-9_-]*$/).
 const ROBY_SLUG = "__super_agent__";
 
-export function ChatTab({ pid }: { pid: string }) {
+/**
+ * `hideSidebar` lets another screen (the agent inbox) supply its own
+ * conversation list and embed just the thread. The chat surface is not forked
+ * — one implementation, two frames around it.
+ */
+export function ChatTab({
+  pid,
+  hideSidebar = false,
+  initialSelection,
+}: {
+  pid: string;
+  hideSidebar?: boolean;
+  /** Open a specific conversation on mount instead of a fresh live session. */
+  initialSelection?: ChatKey;
+}) {
   const toast = useToast();
   const [params, setSearchParams] = useSearchParams();
-  const agents = useSWR(`/projects/${pid}/agents`, () => Agents.list(pid));
+  const agents = useSWR(`/api/projects/${pid}/agents`, () => Agents.list(pid));
   const [creating, setCreating] = useState(false);
   const [model, setModel] = useState("");
   const [dismissedAskKey, setDismissedAskKey] = useState<string | null>(null);
@@ -36,6 +50,10 @@ export function ChatTab({ pid }: { pid: string }) {
   // defaulting to a live session with the super-agent so the chat works even on
   // a brand-new project with zero agents and zero conversations.
   const [selected, setSelected] = useState<ChatKey>(() => {
+    // An embedding screen that already knows which conversation the user
+    // picked wins over the URL — otherwise clicking a row in the inbox opens
+    // an empty new session and the message you clicked on is nowhere.
+    if (initialSelection) return initialSelection;
     const agent = params.get("agent");
     const conv = params.get("conv");
     const channel = params.get("channel");
@@ -147,10 +165,10 @@ export function ChatTab({ pid }: { pid: string }) {
     try {
       if (selected.kind === "conv") {
         await Conversations.remove(pid, selected.agentSlug, selected.convId);
-        void mutate(`/projects/${pid}/agents/${selected.agentSlug}/conversations`);
+        void mutate(`/api/projects/${pid}/agents/${selected.agentSlug}/conversations`);
       } else if (selected.kind === "thread") {
         await Conversations.removeThread(pid, selected.channel, selected.threadId);
-        void mutate(`/projects/${pid}/super-agent/threads`);
+        void mutate(`/api/projects/${pid}/super-agent/threads`);
       }
       toast.success(t("project.chat.deleted"));
       setConfirmDelete(false);
@@ -183,7 +201,7 @@ export function ChatTab({ pid }: { pid: string }) {
 
   return (
     <div className="flex h-full overflow-hidden rounded-xl border border-border bg-card/40">
-      <ChatList
+      {hideSidebar ? null : <ChatList
         pid={pid}
         agents={agentList}
         superAgentSlug={ROBY_SLUG}
@@ -191,7 +209,7 @@ export function ChatTab({ pid }: { pid: string }) {
         selected={selected}
         onSelect={selectChat}
         onNewChat={onNewChat}
-      />
+      />}
 
       <section className="flex min-w-0 flex-1 flex-col">
         <header className="flex shrink-0 items-center justify-between gap-3 border-b border-border px-4 py-3">

package/src/interfaces/web/src/screens/project/ConfigTab.tsx

@@ -19,7 +19,7 @@ export function ConfigTab({ pid }: { pid: string }) {
   const toast = useToast();
   const navigate = useNavigate();
   const { project, mutate: mutateProject } = useProject(pid);
-  const cfg = useSWR(`/projects/${pid}/config`, () => Projects.config.show(pid));
+  const cfg = useSWR(`/api/projects/${pid}/config`, () => Projects.config.show(pid));
   const isBase = String(pid) === "0";
 
   if (cfg.isLoading) return <Loading />;

package/src/interfaces/web/src/screens/project/McpsTab.tsx

@@ -73,9 +73,9 @@ function sourceLabel(source: string): string {
 
 export function McpsTab({ pid }: { pid: string }) {
   const toast = useToast();
-  const list = useSWR(`/projects/${pid}/mcps`, () => Mcps.list(pid));
-  const conflicts = useSWR(`/projects/${pid}/mcps/check`, () => Mcps.check(pid));
-  const vars = useSWR<VarsList>(`/projects/${pid}/vars`, () => Vars.list(pid));
+  const list = useSWR(`/api/projects/${pid}/mcps`, () => Mcps.list(pid));
+  const conflicts = useSWR(`/api/projects/${pid}/mcps/check`, () => Mcps.check(pid));
+  const vars = useSWR<VarsList>(`/api/projects/${pid}/vars`, () => Vars.list(pid));
   const [dialog, setDialog] = useState<DialogMode>(null);
   const [activeMcp, setActiveMcp] = useState<string | null>(null);
   const [results, setResults] = useState<Record<string, McpResult>>({});

package/src/interfaces/web/src/screens/project/Overview.tsx

@@ -14,12 +14,12 @@ import type { AgentEntry, RoutineEntry, TaskEntry } from "../../types/daemon";
 // automation), what's in flight (task workflow), and what just happened.
 export function Overview({ pid }: { pid: string }) {
   const navigate = useNavigate();
-  const tasks    = useSWR(`/projects/${pid}/tasks?state=open`, () => Tasks.list(pid), { refreshInterval: 20_000 });
-  const summary  = useSWR(`/projects/${pid}/tasks-summary`,    () => Tasks.summary(pid), { refreshInterval: 20_000 });
-  const routines = useSWR(`/projects/${pid}/routines`,         () => Routines.list(pid));
-  const agents   = useSWR(`/projects/${pid}/agents`,           () => Agents.list(pid));
-  const mcps     = useSWR(`/projects/${pid}/mcps`,             () => Mcps.list(pid));
-  const artifacts = useSWR(`/projects/${pid}/artifacts`,       () => Artifacts.list(pid));
+  const tasks    = useSWR(`/api/projects/${pid}/tasks?state=open`, () => Tasks.list(pid), { refreshInterval: 20_000 });
+  const summary  = useSWR(`/api/projects/${pid}/tasks-summary`,    () => Tasks.summary(pid), { refreshInterval: 20_000 });
+  const routines = useSWR(`/api/projects/${pid}/routines`,         () => Routines.list(pid));
+  const agents   = useSWR(`/api/projects/${pid}/agents`,           () => Agents.list(pid));
+  const mcps     = useSWR(`/api/projects/${pid}/mcps`,             () => Mcps.list(pid));
+  const artifacts = useSWR(`/api/projects/${pid}/artifacts`,       () => Artifacts.list(pid));
 
   const agentList = agents.data ?? [];
   const orchestrators = agentList.filter((a) => a.is_master || a.type === "orchestrator");

package/src/interfaces/web/src/screens/project/RoutinesTab.tsx

@@ -5,6 +5,7 @@ import { Plus } from "lucide-react";
 import { Routines, type RoutineEntry } from "../../lib/api";
 import { Button, Dialog, Empty, Loading } from "../../components/ui";
 import { useToast } from "../../components/Toast";
+import { Section } from "../../components/Section";
 import { t } from "../../i18n";
 import { RoutineList } from "../../components/routines/RoutineList";
 import { RoutineDetail } from "../../components/routines/RoutineDetail";
@@ -15,7 +16,7 @@ import { RoutineEditor } from "../../components/routines/RoutineEditor";
 // editing is behind a button, delete uses the shared <Dialog>.
 export function RoutinesTab({ pid }: { pid: string }) {
   const toast = useToast();
-  const list = useSWR(`/projects/${pid}/routines`, () => Routines.list(pid));
+  const list = useSWR(`/api/projects/${pid}/routines`, () => Routines.list(pid));
   const [params, setParams] = useSearchParams();
   const [editing, setEditing] = useState<Partial<RoutineEntry> | null>(null);
   const [confirmDelete, setConfirmDelete] = useState<RoutineEntry | null>(null);
@@ -56,7 +57,7 @@ export function RoutinesTab({ pid }: { pid: string }) {
       // Refresh the routine list (last status) and its executions list.
       await Promise.all([
         list.mutate(),
-        globalMutate(`/projects/${pid}/routines/${r.name}/runs`),
+        globalMutate(`/api/projects/${pid}/routines/${r.name}/runs`),
       ]);
     } catch (e: any) { toast.error(e?.message || t("project.routines.run_error")); }
     finally { setRunning(null); }
@@ -75,23 +76,24 @@ export function RoutinesTab({ pid }: { pid: string }) {
   };
 
   return (
-    <div className="flex h-full min-h-0 flex-col gap-3">
-      {/* header (title + new) */}
-      <div className="flex shrink-0 items-start justify-between gap-4">
-        <div>
-          <h2 className="text-lg font-semibold tracking-tight">{t("project.routines.title")}</h2>
-          <p className="mt-0.5 text-sm text-muted-fg">{t("project.routines.subtitle")}</p>
-        </div>
+    // Same frame as every other list page. This one used to draw its own
+    // header outside a card while Tasks and Commitments sat inside one, so
+    // moving between them the whole page shifted.
+    <Section
+      fullHeight
+      title={t("project.routines.title")}
+      description={t("project.routines.subtitle")}
+      action={
         <Button size="sm" variant="primary" onClick={() => setEditing({ kind: "super_agent", schedule: "every:10m", enabled: true })}>
           <Plus size={14} /> {t("project.routines.new_btn")}
         </Button>
-      </div>
-
+      }
+    >
       {list.isLoading && <Loading />}
       {!list.isLoading && rows.length === 0 && <Empty>{t("project.routines.empty")}</Empty>}
 
       {rows.length > 0 && (
-        <div className="grid min-h-0 flex-1 grid-rows-[minmax(0,1fr)] grid-cols-[minmax(200px,260px)_1fr] overflow-hidden rounded-xl border border-border bg-card/40">
+        <div className="grid min-h-0 flex-1 grid-rows-[minmax(0,1fr)] grid-cols-[minmax(200px,260px)_1fr] overflow-hidden rounded-lg border border-border">
           <RoutineList routines={rows} selectedName={selected?.name ?? null} onSelect={selectRoutine} />
           <div className="min-h-0 min-w-0 overflow-hidden">
             {selected
@@ -148,6 +150,6 @@ export function RoutinesTab({ pid }: { pid: string }) {
       >
         <p className="text-sm text-muted-fg">{t("project.routines.run_confirm_body")}</p>
       </Dialog>
-    </div>
+    </Section>
   );
 }

package/src/interfaces/web/src/screens/project/StructureTab.tsx

@@ -12,7 +12,7 @@ import type { OrgArea, OrgRole } from "../../types/daemon";
 
 export function StructureTab({ pid }: { pid: string }) {
   const toast = useToast();
-  const org = useSWR(`/projects/${pid}/organization`, () => Org.get(pid));
+  const org = useSWR(`/api/projects/${pid}/organization`, () => Org.get(pid));
 
   const [areaDialog, setAreaDialog] = useState<{ editing?: OrgArea | null } | null>(null);
   const [roleDialog, setRoleDialog] = useState<{ editing?: OrgRole | null; presetArea?: string | null } | null>(null);

package/src/interfaces/web/src/screens/project/TasksTab.tsx

@@ -18,7 +18,7 @@ export function TasksTab({ pid }: { pid: string }) {
   // dedupingInterval:0 so switching the state filter always revalidates the
   // target page instead of showing the stale cached one from a prior switch.
   const paged = usePagedQuery({
-    key: `/projects/${pid}/tasks?state=${state}`,
+    key: `/api/projects/${pid}/tasks?state=${state}`,
     fetchPage: (limit, offset) => Tasks.listPage(pid, { state, limit, offset }),
     resetKey: state,
     swr: { dedupingInterval: 0, revalidateOnFocus: true },

package/src/interfaces/web/src/screens/project/VarsTab.tsx

@@ -23,7 +23,7 @@ export function VarsTab({ pid }: { pid: string }) {
   );
   const [revealAll, setRevealAll] = useState(false);
   const list = useSWR<VarsList>(
-    `/projects/${pid}/vars?reveal=${revealAll ? 1 : 0}`,
+    `/api/projects/${pid}/vars?reveal=${revealAll ? 1 : 0}`,
     () => Vars.list(pid, { reveal: revealAll }),
   );
   const [openCreate, setOpenCreate] = useState<{ name?: string; value?: string; scope?: VarScope } | null>(null);

package/src/interfaces/web/src/types/daemon.ts

@@ -55,7 +55,7 @@ export interface AgentDetail extends AgentEntry {
 
 export interface RoutineEntry {
   name: string;
-  kind: "heartbeat" | "exec_agent" | "super_agent" | "telegram" | "shell";
+  kind: "heartbeat" | "exec_agent" | "super_agent" | "telegram" | "shell" | "watch";
   schedule: string;
   spec: Record<string, unknown>;
   enabled: boolean;
@@ -228,6 +228,15 @@ export interface ConversationMessage {
   actor_kind?: string;
   model?: string;
   usage?: ChatUsage;
+  /** Compact record of what the turn did, written at the time (the live tool
+   *  events are long gone by the time a thread is read back). */
+  tool_summary?: ToolSummary;
+}
+
+export interface ToolSummary {
+  total: number;
+  failed: number;
+  tools: { name: string; count: number; failed: number }[];
 }
 
 export interface ConversationDetail {

package/src/interfaces/web/vite.config.ts

@@ -6,28 +6,23 @@ import path from "node:path";
 // Vite config for the APX admin panel.
 //
 // - Single SPA, no SSR (this is a local admin tool).
-// - During `vite dev`, every daemon API prefix is proxied to the running
-//   daemon so we develop the UI with hot reload against REAL data. Frontend
-//   routes (/, /settings, /p/:id) are NOT listed, so vite serves index.html
-//   for them (SPA routing).
+// - During `vite dev`, /api is proxied to the running daemon so we develop the
+//   UI with hot reload against REAL data. Frontend routes (/, /settings,
+//   /p/:id) live outside /api, so vite serves index.html for them (SPA
+//   routing). `ws: true` also carries the /api/desktop/ws upgrade through.
 // - `vite build` emits to ./dist; the daemon serves that folder when present.
+//
+// This used to be a hand-maintained list of every daemon prefix, kept in sync
+// by hand with two other copies (the SPA fallback and the auth allowlist) —
+// and it drifted. Now the daemon mounts everything under /api
+// (src/host/daemon/api/prefix.js), so one entry covers the whole surface and
+// a new route can never be missed here.
 
 const DAEMON_TARGET = process.env.APX_DAEMON_URL || "http://127.0.0.1:7430";
 
-// Keep in sync with API_PREFIXES in src/host/daemon/api/shared.js — that's the
-// source of truth for what is a daemon route. A missing prefix means `vite dev`
-// silently serves the SPA shell for that call instead of the real response
-// (e.g. an empty /pair/list).
-const API_PREFIXES = [
-  "/health", "/admin", "/projects", "/telegram", "/engines", "/runtimes",
-  "/messages", "/sessions", "/tools", "/mcp", "/voice", "/tts", "/desktop", "/overlay",
-  "/transcribe", "/run", "/files", "/memory", "/env", "/pair", "/deck",
-  "/super-agent", "/identity", "/agents", "/tasks", "/code",
-];
-
-const proxy = Object.fromEntries(
-  API_PREFIXES.map((p) => [p, { target: DAEMON_TARGET, changeOrigin: false, ws: true }])
-);
+const proxy = {
+  "/api": { target: DAEMON_TARGET, changeOrigin: false, ws: true },
+};
 
 export default defineConfig({
   plugins: [react(), tailwindcss()],