@agentprojectcontext/apx 1.39.1 → 1.40.1

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>
+  );
+}

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

@@ -0,0 +1,86 @@
+import { Pencil, Play, Trash2, Zap } from "lucide-react";
+import type { RoutineEntry } from "../../lib/api";
+import { Badge, Button, Switch, Tip } from "../ui";
+import { cn } from "../../lib/cn";
+import { t } from "../../i18n";
+import { kindMeta, scheduleHuman } from "./shared";
+import { ReadOnlyBlock } from "./ReadOnlyBlock";
+import { ExecutionsList } from "./ExecutionsList";
+
+// Right column: read-only detail of the selected routine. Two stacked areas —
+// the data (header + meta + content blocks) takes the space it needs, and the
+// executions list below fills the rest and scrolls. Editing is behind a button.
+export function RoutineDetail({
+  pid, routine, onEdit, onRun, onToggle, onDelete, running,
+}: {
+  pid: string;
+  routine: RoutineEntry;
+  onEdit: () => void;
+  onRun: () => void;
+  onToggle: () => void;
+  onDelete: () => void;
+  running?: boolean;
+}) {
+  const meta = kindMeta()[routine.kind];
+  const Icon = meta?.icon || Zap;
+  const spec = (routine.spec || {}) as Record<string, any>;
+  const pre = routine.pre_commands || [];
+  const post = routine.post_commands || [];
+
+  // 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") {
+    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 || "") });
+  } else if (routine.kind === "shell") {
+    blocks.push({ title: t("project.routines.block_command"), body: String(spec.command || ""), mono: true });
+  } else if (routine.kind === "heartbeat") {
+    blocks.push({ title: t("project.routines.block_text"), body: String(spec.message || "") });
+  }
+  if (post.length) blocks.push({ title: t("project.routines.block_post"), body: post.join("\n"), mono: true });
+
+  return (
+    <div className="flex h-full min-h-0 flex-col">
+      {/* DATA — takes the space it needs; scrolls only if it overflows */}
+      <div className="min-h-0 shrink space-y-4 overflow-y-auto p-4">
+        {/* header: name + actions (edit behind a button) */}
+        <div className="flex items-start justify-between gap-3">
+          <div className="flex min-w-0 items-center gap-2">
+            <span className={cn("flex size-7 shrink-0 items-center justify-center rounded-lg", routine.enabled ? "bg-emerald-500/15 text-emerald-400" : "bg-muted text-muted-fg")}>
+              <Icon size={14} />
+            </span>
+            <h3 className="truncate text-base font-semibold">{routine.name}</h3>
+            <Badge tone={routine.kind === "shell" ? "warning" : "info"}>{meta?.label || routine.kind}</Badge>
+          </div>
+          <div className="flex shrink-0 items-center gap-2">
+            <Switch checked={routine.enabled} onChange={onToggle} />
+            <Tip content={t("common.run")}><Button size="sm" variant="secondary" onClick={onRun} loading={running}><Play size={13} /></Button></Tip>
+            <Tip content={t("project.routines.edit_hint")}><Button size="sm" variant="secondary" onClick={onEdit}><Pencil size={13} /> {t("project.routines.edit_btn")}</Button></Tip>
+            <Tip content={t("common.delete")}><Button size="sm" variant="destructive" onClick={onDelete}><Trash2 size={13} /></Button></Tip>
+          </div>
+        </div>
+
+        {/* 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 className={cn(routine.last_status === "ok" && "text-emerald-500", routine.last_status === "error" && "text-destructive")}>
+            {t("agents_ui.last_label")} {routine.last_status || "—"}
+          </span>
+        </div>
+        {routine.last_error && <div className="rounded-md bg-destructive/10 px-2 py-1 text-xs text-destructive">{routine.last_error}</div>}
+
+        {/* read-only content blocks */}
+        <div className="space-y-3">
+          {blocks.map((b) => <ReadOnlyBlock key={b.title} title={b.title} body={b.body} mono={b.mono} />)}
+        </div>
+      </div>
+
+      {/* EXECUTIONS — fills the remaining height and scrolls */}
+      <ExecutionsList pid={pid} name={routine.name} running={running} />
+    </div>
+  );
+}

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

@@ -0,0 +1,263 @@
+import { useEffect, useState } from "react";
+import useSWR from "swr";
+import { ArrowRight, Terminal } from "lucide-react";
+import { Routines, Agents, Telegram, type RoutineEntry } from "../../lib/api";
+import { Button, Dialog, Field, Input, Switch } from "../ui";
+import { UiSelect } from "../UiSelect";
+import { useToast } from "../Toast";
+import { cn } from "../../lib/cn";
+import { t } from "../../i18n";
+import { type Kind, kindMeta, kindOptions, schedPresets, scheduleHuman, splitLines, varsFor } from "./shared";
+import { VarTextarea } from "./VarTextarea";
+import { AvailableVarsCard } from "./AvailableVarsCard";
+
+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 [busy, setBusy] = useState(false);
+
+  const [name, setName] = useState("");
+  const [kind, setKind] = useState<Kind>("super_agent");
+  const [schedule, setSchedule] = useState("every:10m");
+  const [enabled, setEnabled] = useState(true);
+  // Per-kind fields
+  const [agent, setAgent] = useState("");
+  const [prompt, setPrompt] = useState("");
+  const [tgChannel, setTgChannel] = useState("default");
+  const [tgChatId, setTgChatId] = useState("");
+  const [tgText, setTgText] = useState("");
+  const [command, setCommand] = useState("");
+  const [hbChannel, setHbChannel] = useState("heartbeat");
+  const [hbMessage, setHbMessage] = useState("");
+  const [pre, setPre] = useState("");
+  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());
+
+  // Load draft → fields.
+  useEffect(() => {
+    if (!draft) return;
+    const spec = (draft.spec && typeof draft.spec === "object" ? draft.spec : {}) as Record<string, any>;
+    setName(draft.name || "");
+    setKind((draft.kind as Kind) || "super_agent");
+    setSchedule(draft.schedule || "every:10m");
+    setEnabled(draft.enabled ?? true);
+    setAgent(spec.agent || "");
+    setPrompt(spec.prompt || "");
+    setTgChannel(spec.channel || "default");
+    setTgChatId(spec.chat_id ? String(spec.chat_id) : "");
+    setTgText(spec.text || "");
+    setCommand(spec.command || "");
+    setHbChannel(spec.channel || "heartbeat");
+    setHbMessage(spec.message || "");
+    setPre((draft.pre_commands || []).join("\n"));
+    setPost((draft.post_commands || []).join("\n"));
+  }, [draft]);
+
+  // 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 buildSpec = (): Record<string, unknown> => {
+    switch (kind) {
+      case "exec_agent": return { agent, prompt };
+      case "super_agent": return { prompt };
+      case "telegram": return { channel: tgChannel, ...(tgChatId ? { chat_id: tgChatId } : {}), text: tgText };
+      case "shell": return { command };
+      case "heartbeat": return { channel: hbChannel, message: hbMessage };
+    }
+  };
+
+  const submit = async () => {
+    if (!name) { toast.error(t("project.routines.name_required")); return; }
+    setBusy(true);
+    try {
+      await Routines.upsert(pid, {
+        name, kind, schedule, enabled,
+        spec: buildSpec(),
+        pre_commands: usesPrePost ? splitLines(pre) : [],
+        post_commands: usesPrePost ? splitLines(post) : [],
+      });
+      toast.success(t("project.routines.saved"));
+      onSaved();
+    } catch (e: any) { toast.error(e?.message || t("project.routines.save_error")); }
+    finally { setBusy(false); }
+  };
+
+  // Channel options: "default" + configured channels + the current value.
+  const channelOptions = (() => {
+    const list = tgChannels.data?.channels || [];
+    const names = ["default", ...list.map((c) => c.name)];
+    if (tgChannel && !names.includes(tgChannel)) names.push(tgChannel);
+    const seen = new Set<string>();
+    return names
+      .filter((n) => (seen.has(n) ? false : (seen.add(n), true)))
+      .map((n) => {
+        const ch = list.find((c) => c.name === n);
+        const description = ch?.project ? `proyecto ${ch.project}` : ch?.chat_id ? `chat ${ch.chat_id}` : undefined;
+        return { value: n, label: n, description };
+      });
+  })();
+
+  // Timeline steps (pre → action → post).
+  const preSteps = usesPrePost ? splitLines(pre) : [];
+  const postSteps = usesPrePost ? splitLines(post) : [];
+  const actionLabel = (() => {
+    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 "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");
+    }
+  })();
+  const actionDetail =
+    kind === "telegram" ? tgText :
+    kind === "shell" ? command :
+    kind === "heartbeat" ? hbMessage :
+    prompt;
+
+  const ActionIcon = kindMeta()[kind].icon;
+  const steps = [
+    ...preSteps.map((c, i) => ({ id: `pre-${i}`, icon: Terminal, label: t("agents_ui.step_pre"), detail: c, action: false })),
+    { id: "action", icon: ActionIcon, label: actionLabel, detail: actionDetail ? actionDetail.slice(0, 90) : t("project.routines.block_empty"), action: true },
+    ...postSteps.map((c, i) => ({ id: `post-${i}`, icon: Terminal, label: t("agents_ui.step_post"), detail: c, action: false })),
+  ];
+
+  return (
+    <Dialog
+      open={!!draft}
+      onClose={onClose}
+      title={draft?.name ? t("project.routines.edit_title", { name: draft.name }) : t("project.routines.new_title")}
+      description={t("project.routines.dialog_desc")}
+      size="xl"
+      footer={
+        <>
+          <Button variant="ghost" onClick={onClose} disabled={busy}>{t("common.cancel")}</Button>
+          <Button variant="primary" onClick={submit} loading={busy}>{t("common.save")}</Button>
+        </>
+      }
+    >
+      <div className="space-y-4">
+        <div className="grid gap-6 md:grid-cols-2">
+          {/* LEFT — opciones + enabled + variables disponibles */}
+          <div className="space-y-3">
+            <div className="flex items-center justify-between rounded-lg border border-border bg-muted/20 px-3 py-2">
+              <Switch checked={enabled} onChange={setEnabled} label={t("project.routines.enabled_label")} />
+              <span className="text-[11px] text-muted-fg">{enabled ? t("project.routines.enabled_hint") : t("project.routines.disabled_hint")}</span>
+            </div>
+            <Field label={t("project.routines.name_field")} hint={draft?.name ? t("project.routines.name_no_edit") : undefined}>
+              <Input value={name} disabled={!!draft?.name} onChange={(e) => setName(e.target.value)} placeholder="resumen-diario" />
+            </Field>
+            <Field label={t("project.routines.kind_field")}>
+              <UiSelect value={kind} onChange={(v) => setKind(v as Kind)} options={kindOptions(kind)} />
+            </Field>
+            <p className="-mt-1 text-[11px] text-muted-fg">{kindMeta()[kind].desc}</p>
+            {kind === "exec_agent" && (
+              <Field label={t("project.routines.agent_field")} hint={t("project.routines.agent_hint")}>
+                <UiSelect value={agent} onChange={setAgent} placeholder={agentsList.isLoading ? t("project.routines.agent_loading") : t("project.routines.agent_pick")}
+                  options={(agentsList.data || []).map((a) => ({ value: a.slug, label: a.slug, description: [a.role, a.model].filter(Boolean).join(" · ") || undefined }))} />
+              </Field>
+            )}
+            <Field label={t("project.routines.schedule_field")} hint={t("project.routines.schedule_hint")}>
+              <div className="space-y-2">
+                <div className="flex flex-wrap gap-1">
+                  {schedPresets().map((s) => (
+                    <button key={s.value} type="button" onClick={() => setSchedule(s.value)}
+                      className={cn("rounded-md border px-2 py-0.5 text-[11px]", schedule === s.value ? "border-emerald-500/50 text-emerald-400" : "border-border text-muted-fg hover:text-foreground")}>
+                      {s.label}
+                    </button>
+                  ))}
+                  <button type="button" onClick={() => setSchedule("manual")}
+                    className={cn("rounded-md border px-2 py-0.5 text-[11px]", schedule === "manual" ? "border-emerald-500/50 text-emerald-400" : "border-border text-muted-fg hover:text-foreground")}>
+                    {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" />
+              </div>
+            </Field>
+            <AvailableVarsCard />
+          </div>
+
+          {/* RIGHT — lo que ejecuta, según el tipo. Cada textarea trae sus
+              variables como chips clickeables debajo. */}
+          <div className="space-y-3">
+            {/* pre → action → post (las variables aparecen donde se usan) */}
+            {usesPrePost && (
+              <VarTextarea
+                label={t("project.routines.pre_field")} hint={t("project.routines.pre_hint")}
+                rows={2} mono value={pre} onChange={setPre} vars={varsFor("pre")}
+                placeholder="curl -s https://wttr.in/Bariloche"
+              />
+            )}
+            {kind === "exec_agent" && (
+              <VarTextarea label={t("project.routines.prompt_exec")} rows={4} value={prompt} onChange={setPrompt}
+                vars={varsFor("prompt")} placeholder={t("project.routines.prompt_exec_ph")} />
+            )}
+            {kind === "super_agent" && (
+              <VarTextarea label={t("project.routines.prompt_super")} rows={4} value={prompt} onChange={setPrompt}
+                vars={varsFor("prompt")} placeholder={t("project.routines.prompt_super_ph")} />
+            )}
+
+            {/* Telegram: channel selector + chat id + texto (con {{pre_output}}) */}
+            {kind === "telegram" && (
+              <>
+                <div className="grid grid-cols-2 gap-3">
+                  <Field label={t("project.routines.tg_channel")}>
+                    <UiSelect value={tgChannel} onChange={setTgChannel} options={channelOptions} />
+                  </Field>
+                  <Field label={t("project.routines.tg_chat_id")}><Input value={tgChatId} onChange={(e) => setTgChatId(e.target.value)} placeholder={t("agents_ui.tg_chat_id_ph")} /></Field>
+                </div>
+                <VarTextarea label={t("project.routines.tg_text")} hint={t("project.routines.tg_text_hint")}
+                  rows={6} value={tgText} onChange={setTgText} vars={varsFor("prompt")} placeholder={t("agents_ui.tg_text_ph")} />
+              </>
+            )}
+
+            {/* Shell: un comando, sin variables */}
+            {kind === "shell" && (
+              <VarTextarea label={t("project.routines.shell_field")} hint={t("project.routines.shell_hint")}
+                rows={11} mono value={command} onChange={setCommand} vars={[]} placeholder="cd /repo && git pull && npm test" />
+            )}
+
+            {/* Heartbeat: solo loguea (no se ofrece para rutinas nuevas) */}
+            {kind === "heartbeat" && (
+              <div className="grid grid-cols-2 gap-3">
+                <Field label={t("project.routines.hb_channel")}><Input value={hbChannel} onChange={(e) => setHbChannel(e.target.value)} placeholder="heartbeat" /></Field>
+                <Field label={t("project.routines.hb_message")}><Input value={hbMessage} onChange={(e) => setHbMessage(e.target.value)} placeholder={t("agents_ui.hb_message_ph")} /></Field>
+              </div>
+            )}
+
+            {usesPrePost && (
+              <VarTextarea
+                label={t("project.routines.post_field")} hint={t("project.routines.post_hint")}
+                rows={2} mono value={post} onChange={setPost} vars={varsFor("post")}
+                placeholder={'apx telegram send "$APX_LLM_OUTPUT"'}
+              />
+            )}
+          </div>
+        </div>
+
+        {/* Qué va a pasar — full width */}
+        <div className="rounded-lg border border-border bg-muted/20 p-3">
+          <div className="mb-2 text-xs font-semibold text-muted-fg">{t("project.routines.what_happens")} <span className="font-normal text-muted-fg">· ⏱ {scheduleHuman(schedule)}</span></div>
+          <div className="flex flex-wrap items-stretch gap-2">
+            {steps.map((s, i) => (
+              <div key={s.id} className="flex items-stretch gap-2">
+                <div className={cn("flex max-w-[240px] flex-col gap-1 rounded-lg border px-2.5 py-2", s.action ? "border-emerald-500/40 bg-emerald-500/5" : "border-border bg-card")}>
+                  <div className={cn("flex items-center gap-1.5 text-[11px] font-medium", s.action ? "text-emerald-400" : "text-muted-fg")}>
+                    <s.icon size={12} /> {s.label}
+                  </div>
+                  {s.detail && <div className="line-clamp-2 font-mono text-[10px] text-muted-fg">{s.detail}</div>}
+                </div>
+                {i < steps.length - 1 && <ArrowRight size={14} className="shrink-0 self-center text-muted-fg" />}
+              </div>
+            ))}
+          </div>
+        </div>
+      </div>
+    </Dialog>
+  );
+}

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

@@ -0,0 +1,59 @@
+import { Zap } from "lucide-react";
+import type { RoutineEntry } from "../../lib/api";
+import { StatusDot } from "../Section";
+import { cn } from "../../lib/cn";
+import { t } from "../../i18n";
+import { kindMeta, scheduleHuman } from "./shared";
+
+// Left column: scrollable list of routines. Click selects (the divider is the
+// single border-r line); the detail lives in the sibling column.
+export function RoutineList({
+  routines, selectedName, onSelect,
+}: {
+  routines: RoutineEntry[];
+  selectedName: string | null;
+  onSelect: (name: string) => void;
+}) {
+  return (
+    <aside className="flex h-full min-h-0 flex-col border-r border-border">
+      <div className="shrink-0 px-3 py-2.5 text-[11px] font-semibold uppercase tracking-wide text-muted-fg">
+        {t("project.routines.list_title")}
+      </div>
+      <ul className="min-h-0 flex-1 space-y-1 overflow-y-auto p-2 pt-0">
+        {routines.map((r) => {
+          const meta = kindMeta()[r.kind];
+          const Icon = meta?.icon || Zap;
+          const active = r.name === selectedName;
+          return (
+            <li key={r.name}>
+              <button
+                type="button"
+                onClick={() => onSelect(r.name)}
+                aria-current={active}
+                className={cn(
+                  "w-full rounded-lg border px-2.5 py-2 text-left transition-colors",
+                  active
+                    ? "border-primary/50 bg-primary/10"
+                    : "border-transparent hover:border-border hover:bg-accent/40",
+                )}
+              >
+                <div className="flex items-center gap-2">
+                  <span className={cn("flex size-6 shrink-0 items-center justify-center rounded-md", r.enabled ? "bg-emerald-500/15 text-emerald-400" : "bg-muted text-muted-fg")}>
+                    <Icon size={13} />
+                  </span>
+                  <span className="min-w-0 flex-1 truncate text-sm font-medium">{r.name}</span>
+                  {!r.enabled && <span className="shrink-0 text-[10px] text-muted-fg">{t("project.routines.paused")}</span>}
+                  <StatusDot ok={r.last_status === "ok" ? true : r.last_status === "error" ? false : null} />
+                </div>
+                <div className="mt-1 flex items-center justify-between gap-2 pl-8 text-[10px] text-muted-fg">
+                  <span className="truncate">{meta?.label || r.kind}</span>
+                  <span className="shrink-0">⏱ {scheduleHuman(r.schedule)}</span>
+                </div>
+              </button>
+            </li>
+          );
+        })}
+      </ul>
+    </aside>
+  );
+}