@agentprojectcontext/apx 1.77.3 → 1.79.0

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

@@ -110,7 +110,7 @@ function AgentConvFetcher({
   onLoaded: (slug: string, data: ConversationListEntry[] | undefined) => void;
 }) {
   const { data } = useSWR(
-    `/projects/${pid}/agents/${slug}/conversations`,
+    `/api/projects/${pid}/agents/${slug}/conversations`,
     () => Conversations.list(pid, slug),
     { revalidateOnFocus: false },
   );
@@ -142,7 +142,7 @@ export function ChatList({
   // sidebar shows just that project's own agent conversations.
   const isBase = String(pid) === "0";
   const threadsQ = useSWR(
-    isBase ? `/projects/${pid}/super-agent/threads` : null,
+    isBase ? `/api/projects/${pid}/super-agent/threads` : null,
     () => Conversations.threads(pid),
     { revalidateOnFocus: false },
   );

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

@@ -133,6 +133,19 @@ export function MessageBubble({ msg, isLast, isAskAnswer, onCopy }: Props) {
           {!mine && hasTools && (
             <span>· {t("shared_ui.tools_count", { n: msg.parts.filter((p) => p.kind === "tool").length })}</span>
           )}
+          {/* Replayed turns have no tool parts — the live events are gone — but
+              they do carry the summary recorded at the time. Show that instead,
+              so history does not look like the agent just answered from
+              nothing. Failures are named: "it tried and could not" is the half
+              worth surfacing. */}
+          {!mine && !hasTools && msg.toolSummary?.tools?.length ? (
+            <span title={msg.toolSummary.tools.map((x) => `${x.name}×${x.count}`).join(", ")}>
+              · {t("shared_ui.tools_count", { n: msg.toolSummary.total })}
+              {msg.toolSummary.failed
+                ? ` (${t("shared_ui.tools_failed", { n: msg.toolSummary.failed })})`
+                : ""}
+            </span>
+          ) : null}
           {onCopy && copyText && (
             <Tip content={t("chat_ui.copy")}>
               <button

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

@@ -27,7 +27,7 @@ export function SkillPicker({ value, projectPath, onPick }: SkillPickerProps) {
   const query = open ? extractQuery(value) : "";
 
   const { data } = useSWR(
-    open ? ["/skills", projectPath || ""] : null,
+    open ? ["/api/skills", projectPath || ""] : null,
     () => Skills.list(projectPath),
   );
 

package/src/interfaces/web/src/components/code/CodeFileTree.tsx

@@ -120,7 +120,7 @@ export function CodeFileTree({
     setLoading(true);
     try {
       const r = await http.post<{ ok: boolean; stdout: string; stderr: string }>(
-        "/run",
+        "/api/run",
         {
           cmd: "find . -type f -not -path '*/node_modules/*' -not -path '*/.git/*' -not -path '*/dist/*' -not -path '*/.claude/*' | sed 's|^\\./||' | sort | head -500",
           project: pid,

package/src/interfaces/web/src/components/code/CodeTerminal.tsx

@@ -50,7 +50,7 @@ export function CodeTerminal({
     setBusy(true);
     try {
       const r = await http.post<{ ok: boolean; stdout: string; stderr: string; exit_code: number; cwd: string }>(
-        "/run",
+        "/api/run",
         { cmd: trimmed, project: pid },
       );
       if (r.stdout) setLines((l) => [...l, { type: "out", text: r.stdout }]);

package/src/interfaces/web/src/components/cron/CronPicker.tsx

@@ -0,0 +1,196 @@
+import { useEffect, useMemo, useState } from "react";
+import { Clock, Code2 } from "lucide-react";
+import { cn } from "../../lib/cn";
+import { t } from "../../i18n";
+import {
+  DAY_KEYS, cronToSelection, selectionToCron, describeCron, isPickerFriendly,
+  normalizeCron, type CronSelection,
+} from "../../lib/cron";
+
+/**
+ * Read-only sentence for a cron expression. Falls back to the raw expression
+ * when the schedule is beyond what lib/cron understands — a confident wrong
+ * reading of when something runs is worse than showing the source.
+ */
+export function CronSummary({ expr, className }: { expr: string; className?: string }) {
+  const text = describeCron(expr, t as never);
+  return (
+    <span className={cn("inline-flex items-center gap-1.5", className)} title={expr}>
+      <Clock size={12} className="shrink-0 opacity-60" />
+      {text ? <span>{text}</span> : <code className="font-mono text-[11px]">{expr}</code>}
+    </span>
+  );
+}
+
+/**
+ * Time + day checkboxes, or every-N-hours, with the cron expression as an
+ * escape hatch rather than the only interface.
+ *
+ * The raw field stays reachable on purpose: cron can express things this
+ * picker cannot, and a form that silently narrows what the user is allowed to
+ * schedule is worse than one that asks them to type. When the current value is
+ * beyond the picker, the raw field opens by itself — the alternative is a
+ * picker quietly showing something the expression does not say.
+ */
+export function CronPicker({
+  value,
+  onChange,
+  disabled,
+  allowEveryHours = true,
+}: {
+  value: string;
+  onChange: (expr: string) => void;
+  disabled?: boolean;
+  allowEveryHours?: boolean;
+}) {
+  const friendly = useMemo(() => isPickerFriendly(value), [value]);
+  const [raw, setRaw] = useState(!friendly);
+  const [rawDraft, setRawDraft] = useState(value);
+  const sel = useMemo<CronSelection>(() => cronToSelection(value), [value]);
+
+  // An expression arriving from outside (a profile default, another edit) that
+  // the picker cannot represent flips to raw rather than misrepresenting it.
+  useEffect(() => {
+    setRawDraft(value);
+    if (!isPickerFriendly(value)) setRaw(true);
+  }, [value]);
+
+  const patch = (over: Partial<CronSelection>) =>
+    onChange(selectionToCron({ ...sel, ...over }));
+
+  const toggleDay = (d: number) => {
+    const next = sel.days.includes(d) ? sel.days.filter((x) => x !== d) : [...sel.days, d];
+    patch({ days: next });
+  };
+
+  const preset = (days: number[]) => patch({ days });
+
+  return (
+    <div className="flex flex-col gap-2" data-testid="cron-picker">
+      {raw ? (
+        <input
+          value={rawDraft}
+          disabled={disabled}
+          onChange={(e) => setRawDraft(e.target.value)}
+          onBlur={() => onChange(rawDraft.trim())}
+          onKeyDown={(e) => { if (e.key === "Enter") onChange(rawDraft.trim()); }}
+          placeholder="30 8 * * 1-5"
+          className="w-full rounded-lg border border-border bg-muted/30 px-2.5 py-1.5 font-mono text-sm outline-none focus:border-primary/60"
+          data-testid="cron-raw"
+        />
+      ) : (
+        <>
+          <div className="flex flex-wrap items-center gap-2">
+            <input
+              type="time"
+              value={sel.everyHours > 0 ? "00:00" : sel.time}
+              disabled={disabled || sel.everyHours > 0}
+              onChange={(e) => patch({ time: e.target.value, everyHours: 0 })}
+              className="rounded-lg border border-border bg-muted/30 px-2.5 py-1.5 text-sm outline-none focus:border-primary/60 disabled:opacity-50"
+              data-testid="cron-time"
+            />
+            {allowEveryHours ? (
+              <label className="flex items-center gap-1.5 text-xs text-muted-fg">
+                <input
+                  type="checkbox"
+                  checked={sel.everyHours > 0}
+                  disabled={disabled}
+                  onChange={(e) => patch({ everyHours: e.target.checked ? 2 : 0 })}
+                  className="size-3.5 accent-[var(--primary)]"
+                />
+                {t("cron.every_label")}
+              </label>
+            ) : null}
+            {sel.everyHours > 0 ? (
+              <input
+                type="number"
+                min={1}
+                max={23}
+                value={sel.everyHours}
+                disabled={disabled}
+                onChange={(e) => patch({ everyHours: Number(e.target.value) })}
+                className="w-16 rounded-lg border border-border bg-muted/30 px-2 py-1.5 text-sm outline-none focus:border-primary/60"
+                aria-label={t("cron.every_label")}
+              />
+            ) : null}
+          </div>
+
+          {sel.everyHours === 0 ? (
+            <>
+              <div className="flex flex-wrap gap-1" data-testid="cron-days">
+                {DAY_KEYS.map((key, d) => {
+                  const on = sel.days.length === 0 || sel.days.includes(d);
+                  return (
+                    <button
+                      key={key}
+                      type="button"
+                      disabled={disabled}
+                      aria-pressed={sel.days.includes(d)}
+                      onClick={() => toggleDay(d)}
+                      className={cn(
+                        "min-w-9 rounded-md border px-2 py-1 text-[11px] font-medium transition-colors",
+                        sel.days.includes(d)
+                          ? "border-primary bg-primary/15 text-foreground"
+                          : on
+                            // "every day" means all seven are in effect even
+                            // though none is individually ticked — show that
+                            // rather than seven blank boxes.
+                            ? "border-border bg-muted/40 text-muted-fg"
+                            : "border-border text-muted-fg/60 hover:bg-muted/40",
+                      )}
+                    >
+                      {t(`cron.day_short.${key}`)}
+                    </button>
+                  );
+                })}
+              </div>
+              <div className="flex flex-wrap gap-1 text-[11px]">
+                {([
+                  ["cron.preset_every_day", [] as number[]],
+                  ["cron.preset_weekdays", [1, 2, 3, 4, 5]],
+                  ["cron.preset_weekends", [0, 6]],
+                ] as const).map(([label, days]) => (
+                  <button
+                    key={label}
+                    type="button"
+                    disabled={disabled}
+                    onClick={() => preset([...days])}
+                    className="rounded-md px-1.5 py-0.5 text-muted-fg underline-offset-2 hover:text-foreground hover:underline"
+                  >
+                    {t(label)}
+                  </button>
+                ))}
+              </div>
+            </>
+          ) : null}
+        </>
+      )}
+
+      <div className="flex items-center justify-between gap-2">
+        {/* The sentence, always — including in raw mode, where it is the only
+            confirmation that what was typed means what was intended. */}
+        <CronSummary expr={raw ? rawDraft : value} className="text-[11px] text-muted-fg" />
+        <button
+          type="button"
+          disabled={disabled}
+          onClick={() => {
+            if (raw) {
+              // Leaving raw mode must not silently rewrite a schedule the
+              // picker cannot hold.
+              const next = rawDraft.trim();
+              onChange(next);
+              if (isPickerFriendly(next)) setRaw(false);
+            } else {
+              setRawDraft(normalizeCron(value));
+              setRaw(true);
+            }
+          }}
+          className="inline-flex shrink-0 items-center gap-1 text-[11px] text-muted-fg hover:text-foreground"
+          data-testid="cron-toggle-raw"
+        >
+          <Code2 size={11} /> {raw ? t("cron.use_picker") : t("cron.use_cron")}
+        </button>
+      </div>
+    </div>
+  );
+}

package/src/interfaces/web/src/components/desktop/DesktopStatusCard.tsx

@@ -17,7 +17,7 @@ export function DesktopStatusCard({ showConfigLink = false }: { showConfigLink?:
   const toast = useToast();
 
   const { data: status, isLoading: stLoading, mutate: mutateStatus } = useSWR(
-    "/desktop/status",
+    "/api/desktop/status",
     () => Desktop.status(),
     { refreshInterval: 5000 },
   );

package/src/interfaces/web/src/components/files/FileBrowser.tsx

@@ -29,10 +29,10 @@ export function FileBrowser({
   const [selected, setSelected] = useState<string | null>(null);
   const [newOpen, setNewOpen] = useState(false);
 
-  const treeKey = `/projects/${pid}/fs/tree?scope=${scope}`;
+  const treeKey = `/api/projects/${pid}/fs/tree?scope=${scope}`;
   const tree = useSWR(treeKey, () => ProjectFiles.tree(pid, scope));
 
-  const fileKey = selected ? `/projects/${pid}/fs/file?scope=${scope}&path=${selected}` : null;
+  const fileKey = selected ? `/api/projects/${pid}/fs/file?scope=${scope}&path=${selected}` : null;
   const file = useSWR<FileContent | null>(fileKey, () => (selected ? ProjectFiles.read(pid, selected, scope) : null));
 
   const onSelect = (node: FileNode) => setSelected(node.path);

package/src/interfaces/web/src/components/inbox/InboxList.tsx

@@ -0,0 +1,145 @@
+import { useMemo, useState } from "react";
+import { Search } from "lucide-react";
+import type { InboxRow } from "../../lib/api/inbox";
+import { cn } from "../../lib/cn";
+import { t } from "../../i18n";
+
+/**
+ * The conversation rail: every agent as a chat, most recent first.
+ *
+ * Messaging-app shape rather than a data table, because that is what this is —
+ * a list of people-ish things that said something, ordered by when. The
+ * previous version was a full-width list of cards that navigated AWAY on
+ * click, which meant losing the list to read one row.
+ */
+
+/** Stable colour per agent, so the same agent is the same dot every time. */
+const DOT_COLOURS = [
+  "bg-emerald-500", "bg-orange-500", "bg-violet-500", "bg-sky-500",
+  "bg-rose-500", "bg-amber-500", "bg-teal-500", "bg-fuchsia-500",
+];
+
+function colourFor(seed: string): string {
+  let h = 0;
+  for (let i = 0; i < seed.length; i++) h = (h * 31 + seed.charCodeAt(i)) >>> 0;
+  return DOT_COLOURS[h % DOT_COLOURS.length];
+}
+
+export function rowKey(row: InboxRow): string {
+  return `${row.project_id ?? "global"}::${row.agent_slug}`;
+}
+
+/** Today → time of day; older → date. Same idea as a messaging app. */
+function shortTime(iso: string): string {
+  if (!iso) return "";
+  const d = new Date(iso);
+  if (Number.isNaN(d.getTime())) return "";
+  const sameDay = new Date().toDateString() === d.toDateString();
+  return sameDay
+    ? d.toLocaleTimeString([], { hour: "2-digit", minute: "2-digit" })
+    : d.toLocaleDateString(undefined, { day: "numeric", month: "short" });
+}
+
+export function InboxList({
+  rows,
+  selectedKey,
+  onSelect,
+  action,
+}: {
+  rows: InboxRow[];
+  selectedKey: string | null;
+  onSelect: (row: InboxRow) => void;
+  action?: React.ReactNode;
+}) {
+  const [q, setQ] = useState("");
+
+  const filtered = useMemo(() => {
+    const needle = q.trim().toLowerCase();
+    if (!needle) return rows;
+    return rows.filter((r) =>
+      [r.agent_name, r.agent_slug, r.project_name, r.preview]
+        .filter(Boolean)
+        .some((v) => String(v).toLowerCase().includes(needle)));
+  }, [rows, q]);
+
+  return (
+    <aside className="flex w-full shrink-0 flex-col border-r border-border sm:w-72" data-testid="inbox-list">
+      <div className="flex shrink-0 items-center gap-2 border-b border-border p-2">
+        <div className="relative flex-1">
+          <Search size={13} className="pointer-events-none absolute left-2.5 top-1/2 -translate-y-1/2 text-muted-fg" />
+          <input
+            value={q}
+            onChange={(e) => setQ(e.target.value)}
+            placeholder={t("inbox.search")}
+            aria-label={t("inbox.search")}
+            className="w-full rounded-lg border border-border bg-muted/30 py-1.5 pl-7 pr-2 text-sm outline-none placeholder:text-muted-fg focus:border-primary/60"
+          />
+        </div>
+        {action}
+      </div>
+
+      <div className="min-h-0 flex-1 overflow-y-auto p-1.5">
+        {!filtered.length ? (
+          <p className="px-3 py-6 text-center text-xs text-muted-fg">
+            {q ? t("inbox.no_match") : t("inbox.empty")}
+          </p>
+        ) : null}
+
+        {filtered.map((row) => {
+          const key = rowKey(row);
+          const isActive = key === selectedKey;
+          const label = row.agent_name || row.agent_slug;
+          return (
+            <button
+              key={key}
+              type="button"
+              data-testid={`inbox-row-${row.agent_slug}`}
+              onClick={() => onSelect(row)}
+              className={cn(
+                "flex w-full items-start gap-2.5 rounded-lg px-2.5 py-2 text-left transition-colors",
+                isActive ? "bg-accent text-accent-fg" : "hover:bg-muted/50",
+              )}
+            >
+              {/* A coloured disc, not an emoji on plain background: at this size
+                  the colour is what the eye picks the row out by. */}
+              <span
+                className={cn(
+                  "mt-0.5 flex size-8 shrink-0 items-center justify-center rounded-full text-sm",
+                  colourFor(row.agent_slug),
+                )}
+                aria-hidden
+              >
+                {row.agent_emoji || label.slice(0, 1).toUpperCase()}
+              </span>
+
+              <span className="min-w-0 flex-1">
+                <span className="flex items-baseline gap-2">
+                  <span className="truncate text-sm font-medium">{label}</span>
+                  {row.pinned ? (
+                    <span className="shrink-0 rounded bg-primary/15 px-1 text-[9px] font-semibold uppercase tracking-wide text-primary">
+                      {t("inbox.pinned")}
+                    </span>
+                  ) : null}
+                  <span className="ml-auto shrink-0 text-[10px] text-muted-fg">
+                    {shortTime(row.last_activity_at)}
+                  </span>
+                </span>
+
+                <span className="mt-0.5 flex items-center gap-1.5 text-[10px] text-muted-fg">
+                  {row.project_name ? <span className="truncate">{row.project_name}</span> : null}
+                  {row.channel ? <span className="opacity-70">· {row.channel}</span> : null}
+                </span>
+
+                {/* The agent's own last line. Echoing the user's prompt back
+                    tells them nothing they do not already know. */}
+                <span className="mt-0.5 block truncate text-xs text-muted-fg">
+                  {row.preview || t("inbox.no_reply_yet")}
+                </span>
+              </span>
+            </button>
+          );
+        })}
+      </div>
+    </aside>
+  );
+}

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

@@ -1,34 +1,43 @@
 import { useMemo, useState } from "react";
 import useSWR from "swr";
-import { Brain, Bot, Crown, RefreshCw } from "lucide-react";
+import { Brain, 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";
 import { cn } from "../../lib/cn";
 import { Spinner, Empty } from "../ui";
 import { useToast } from "../Toast";
 import { t } from "../../i18n";
+import { usePersonaName } from "../../hooks/usePersonaName";
 import { FileViewer } from "../files/FileViewer";
 
 // Which memory is open in the right pane.
-type Sel = { kind: "project" } | { kind: "agent"; slug: string };
+type Sel = { kind: "notebook" } | { kind: "project" } | { kind: "agent"; slug: string };
 
 function selId(s: Sel): string {
+  if (s.kind === "notebook") return "notebook";
   return s.kind === "project" ? "project" : `agent:${s.slug}`;
 }
 
 // On-disk-ish path shown in the viewer header (mirrors the real memory.md
 // locations so it reads familiarly, like the docs surface).
 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`;
 }
 
 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);
 }
 
 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(() => {});
@@ -65,11 +74,16 @@ function SidebarItem({
 // right for markdown edit / split-preview / save — the same surface as /docs.
 export function MemoryBrowser({ pid }: { pid: string }) {
   const toast = useToast();
-  const [sel, setSel] = useState<Sel>({ kind: "project" });
+  // 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());
+  // Never hardcode the agent's name (AGENTS.md rule 13) — it is the user's to set.
+  const persona = usePersonaName();
 
-  const agents = useSWR(`/projects/${pid}/agents`, () => Agents.list(pid));
+  const agents = useSWR(`/api/projects/${pid}/agents`, () => Agents.list(pid));
 
-  const bodyKey = `/memory/${pid}/${selId(sel)}`;
+  const bodyKey = `/api/memory/${pid}/${selId(sel)}`;
   const body = useSWR(bodyKey, () => loadBody(pid, sel));
 
   // Adapt the raw memory body into the FileContent shape FileViewer expects.
@@ -115,8 +129,24 @@ export function MemoryBrowser({ pid }: { pid: string }) {
         </div>
 
         <div className="min-h-0 flex-1 overflow-y-auto p-1.5">
-          {/* General / project memory */}
+          {/* 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}
+          />
+
+          {/* General / project memory */}
+          <p className="px-1.5 pb-1 pt-3 text-[10px] font-semibold uppercase tracking-wide text-muted-foreground/60">
             {t("project.memories.general_group")}
           </p>
           <SidebarItem

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

@@ -120,7 +120,7 @@ function RunDetailPanel({ m, onClose }: { m: MessageEntry; onClose: () => void }
  *  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`,
+    `/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.

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

@@ -4,6 +4,7 @@ import { Badge, Button, Switch, Tip } from "../ui";
 import { cn } from "../../lib/cn";
 import { t } from "../../i18n";
 import { kindMeta, scheduleHuman } from "./shared";
+import { relativeWhen } from "../../lib/when";
 import { ReadOnlyBlock } from "./ReadOnlyBlock";
 import { ExecutionsList } from "./ExecutionsList";
 
@@ -30,7 +31,7 @@ export function RoutineDetail({
   // Read-only content blocks, in pipeline order (pre → action → post).
   const blocks: { title: string; body: string; mono?: boolean }[] = [];
   if (pre.length) blocks.push({ title: t("project.routines.block_pre"), body: pre.join("\n"), mono: true });
-  if (routine.kind === "exec_agent" || routine.kind === "super_agent") {
+  if (routine.kind === "exec_agent" || routine.kind === "super_agent" || routine.kind === "watch") {
     blocks.push({ title: t("project.routines.block_prompt"), body: String(spec.prompt || "") });
   } else if (routine.kind === "telegram") {
     blocks.push({ title: t("project.routines.block_text"), body: String(spec.text || "") });
@@ -64,9 +65,20 @@ export function RoutineDetail({
 
         {/* compact meta: schedule / next / last */}
         <div className="flex flex-wrap items-center gap-x-4 gap-y-1 text-xs text-muted-fg">
-          <span>⏱ {scheduleHuman(routine.schedule)}</span>
-          {routine.next_run_at && <span>{t("project.routines.next_run")} {new Date(routine.next_run_at).toLocaleString()}</span>}
-          {routine.last_run_at && <span>{t("project.routines.last_run")} {new Date(routine.last_run_at).toLocaleString()}</span>}
+          <span title={routine.schedule}>⏱ {scheduleHuman(routine.schedule)}</span>
+          {/* "in 8 hours" answers the question; the absolute time is one hover
+              away for when the exact minute matters. Two full timestamps side
+              by side made the row unreadable and still needed mental arithmetic. */}
+          {routine.next_run_at && (
+            <span title={new Date(routine.next_run_at).toLocaleString()}>
+              {t("project.routines.next_run")} {relativeWhen(routine.next_run_at, t as never)}
+            </span>
+          )}
+          {routine.last_run_at && (
+            <span title={new Date(routine.last_run_at).toLocaleString()}>
+              {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")}>
             {t("agents_ui.last_label")} {routine.last_status || "—"}
           </span>

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

@@ -8,6 +8,8 @@ import { useToast } from "../Toast";
 import { cn } from "../../lib/cn";
 import { t } from "../../i18n";
 import { type Kind, kindMeta, kindOptions, schedPresets, scheduleHuman, splitLines, varsFor } from "./shared";
+import { CronPicker } from "../cron/CronPicker";
+import { parseCron } from "../../lib/cron";
 import { VarTextarea } from "./VarTextarea";
 import { AvailableVarsCard } from "./AvailableVarsCard";
 
@@ -15,7 +17,7 @@ export function RoutineEditor({
   draft, onClose, onSaved, pid,
 }: { draft: Partial<RoutineEntry> | null; onClose: () => void; onSaved: () => void; pid: string }) {
   const toast = useToast();
-  const agentsList = useSWR(draft ? `/projects/${pid}/agents` : null, () => Agents.list(pid));
+  const agentsList = useSWR(draft ? `/api/projects/${pid}/agents` : null, () => Agents.list(pid));
   const [busy, setBusy] = useState(false);
 
   const [name, setName] = useState("");
@@ -35,7 +37,7 @@ export function RoutineEditor({
   const [post, setPost] = useState("");
 
   // Telegram channels for the selector (default + any project/global channels).
-  const tgChannels = useSWR(draft && kind === "telegram" ? "/telegram/channels" : null, () => Telegram.channels.list());
+  const tgChannels = useSWR(draft && kind === "telegram" ? "/api/telegram/channels" : null, () => Telegram.channels.list());
 
   // Load draft → fields.
   useEffect(() => {
@@ -59,12 +61,13 @@ export function RoutineEditor({
 
   // Pre/post shell wrap the LLM kinds AND telegram (pre can fetch data, the text
   // can use {{pre_output}}, post can react to the result).
-  const usesPrePost = kind === "exec_agent" || kind === "super_agent" || kind === "telegram";
+  const usesPrePost = kind === "exec_agent" || kind === "super_agent" || kind === "telegram" || kind === "watch";
 
   const buildSpec = (): Record<string, unknown> => {
     switch (kind) {
       case "exec_agent": return { agent, prompt };
       case "super_agent": return { prompt };
+      case "watch": return { prompt };
       case "telegram": return { channel: tgChannel, ...(tgChatId ? { chat_id: tgChatId } : {}), text: tgText };
       case "shell": return { command };
       case "heartbeat": return { channel: hbChannel, message: hbMessage };
@@ -109,6 +112,7 @@ export function RoutineEditor({
     switch (kind) {
       case "exec_agent": return agent ? t("agents_ui.action_agent_answers", { agent }) : t("agents_ui.action_agent_pick_answers");
       case "super_agent": return t("agents_ui.action_super_answers");
+      case "watch": return t("agents_ui.action_watch");
       case "telegram": return t("agents_ui.action_telegram_channel", { channel: tgChannel });
       case "shell": return command ? t("agents_ui.summary_runs_cmd", { cmd: command.slice(0, 48) }) : t("agents_ui.action_runs_shell");
       case "heartbeat": return t("agents_ui.summary_heartbeat");
@@ -176,7 +180,13 @@ export function RoutineEditor({
                     {t("agents_ui.preset_manual")}
                   </button>
                 </div>
-                <Input value={schedule} onChange={(e) => setSchedule(e.target.value)} placeholder="every:10m · cron 0 9 * * 1-5 · once:ISO · manual" />
+                {/* A cron schedule gets the picker; every:/once:/manual stay a
+                    text field, because those forms are already readable. */}
+                {parseCron(schedule.replace(/^cron\s+/i, "")) ? (
+                  <CronPicker value={schedule.replace(/^cron\s+/i, "")} onChange={setSchedule} />
+                ) : (
+                  <Input value={schedule} onChange={(e) => setSchedule(e.target.value)} placeholder="every:10m · 0 9 * * 1-5 · once:ISO · manual" />
+                )}
               </div>
             </Field>
             <AvailableVarsCard />