@agentprojectcontext/apx 1.80.2 → 1.89.1

package/src/interfaces/web/src/components/settings/providers/typeStyles.ts

@@ -1,9 +1,11 @@
 // Visual styles per provider engine (adapter). Maps the engine id to a
 // gradient (card icon) and a badge class. Ported/adapted from pandaproject.
 
+import { toneChip } from "../../../lib/tone";
+
 export type EngineType =
   | "anthropic" | "openai" | "gemini" | "groq"
-  | "openrouter" | "ollama" | "azure" | "mock" | "custom";
+  | "openrouter" | "ollama" | "azure" | "zen" | "mock" | "custom";
 
 export const ENGINE_GRADIENTS: Record<EngineType, string> = {
   anthropic:  "from-orange-600 to-amber-600",
@@ -13,20 +15,22 @@ export const ENGINE_GRADIENTS: Record<EngineType, string> = {
   openrouter: "from-violet-600 to-indigo-600",
   ollama:     "from-amber-600 to-orange-600",
   azure:      "from-blue-600 to-cyan-600",
+  zen:        "from-fuchsia-600 to-purple-600",
   mock:       "from-slate-600 to-gray-600",
   custom:     "from-slate-600 to-gray-600",
 };
 
 export const ENGINE_BADGES: Record<EngineType, string> = {
-  anthropic:  "bg-orange-500/20 text-orange-300 border border-orange-500/40",
-  openai:     "bg-emerald-500/20 text-emerald-300 border border-emerald-500/40",
-  gemini:     "bg-blue-500/20 text-blue-300 border border-blue-500/40",
-  groq:       "bg-cyan-500/20 text-cyan-300 border border-cyan-500/40",
-  openrouter: "bg-violet-500/20 text-violet-300 border border-violet-500/40",
-  ollama:     "bg-amber-500/20 text-amber-300 border border-amber-500/40",
-  azure:      "bg-blue-500/20 text-blue-300 border border-blue-500/40",
-  mock:       "bg-slate-500/20 text-slate-300 border border-slate-500/40",
-  custom:     "bg-slate-500/20 text-slate-300 border border-slate-500/40",
+  anthropic:  toneChip.orange,
+  openai:     toneChip.emerald,
+  gemini:     toneChip.blue,
+  groq:       toneChip.cyan,
+  openrouter: toneChip.violet,
+  ollama:     toneChip.amber,
+  azure:      toneChip.blue,
+  zen:        toneChip.violet,
+  mock:       toneChip.slate,
+  custom:     toneChip.slate,
 };
 
 export const ENGINE_OPTIONS: { value: EngineType; label: string }[] = [
@@ -37,6 +41,7 @@ export const ENGINE_OPTIONS: { value: EngineType; label: string }[] = [
   { value: "openrouter", label: "OpenRouter" },
   { value: "ollama",     label: "Ollama" },
   { value: "azure",      label: "Azure OpenAI" },
+  { value: "zen",        label: "OpenCode Zen" },
   { value: "mock",       label: "Mock (test)" },
   { value: "custom",     label: "Custom" },
 ];
@@ -47,7 +52,7 @@ export function engineStyle<T>(map: Record<EngineType, T>, value: string | null
 }
 
 // Icon per engine (lucide name). Used in provider cards + selects.
-import { Sparkles, Bot, Gem, Zap, GitBranch, Server, Cloud, FlaskConical, Wrench } from "lucide-react";
+import { Sparkles, Bot, Gem, Zap, GitBranch, Server, Cloud, Leaf, FlaskConical, Wrench } from "lucide-react";
 import type { LucideIcon } from "lucide-react";
 
 export const ENGINE_ICONS: Record<EngineType, LucideIcon> = {
@@ -58,6 +63,7 @@ export const ENGINE_ICONS: Record<EngineType, LucideIcon> = {
   openrouter: GitBranch,
   ollama:     Server,
   azure:      Cloud,
+  zen:        Leaf,
   mock:       FlaskConical,
   custom:     Wrench,
 };
@@ -85,28 +91,33 @@ export const ENGINE_PRESETS: Record<EngineType, EnginePreset> = {
     default_model: "claude-sonnet-5",
     api_key_env: "ANTHROPIC_API_KEY",
     known_models: [
-      "claude-opus-4-8",
+      "claude-fable-5",
+      "claude-opus-5",
       "claude-sonnet-5",
       "claude-haiku-4-5",
-      "claude-fable-5",
+      "claude-opus-4-8",
+      "claude-sonnet-4-6",
     ],
   },
   openai: {
     base_url: "https://api.openai.com/v1",
-    default_model: "gpt-5.4-mini",
+    default_model: "gpt-5.6-luna",
     api_key_env: "OPENAI_API_KEY",
-    known_models: ["gpt-5.5", "gpt-5.4-mini", "gpt-5.4-nano", "gpt-5.1", "gpt-4.1-mini"],
+    known_models: ["gpt-5.6-sol", "gpt-5.6-terra", "gpt-5.6-luna", "gpt-5.5", "gpt-5.4-mini", "gpt-5.4-nano"],
   },
   gemini: {
     base_url: "https://generativelanguage.googleapis.com/v1beta/openai",
-    default_model: "gemini-2.5-flash",
+    default_model: "gemini-3.7-flash",
     api_key_env: "GEMINI_API_KEY",
     known_models: [
+      "gemini-3.7-flash",
+      "gemini-3.6-flash",
       "gemini-3.5-flash",
+      "gemini-3.5-flash-lite",
       "gemini-3.1-pro-preview",
+      "gemini-3.1-flash-lite",
       "gemini-2.5-pro",
       "gemini-2.5-flash",
-      "gemini-2.5-flash-lite",
     ],
   },
   groq: {
@@ -130,9 +141,12 @@ export const ENGINE_PRESETS: Record<EngineType, EnginePreset> = {
     known_models: [
       "openrouter/auto",
       "openrouter/free",
+      "anthropic/claude-opus-5",
       "anthropic/claude-sonnet-5",
-      "openai/gpt-5.4-mini",
-      "google/gemini-2.5-flash",
+      "openai/gpt-5.6-sol",
+      "openai/gpt-5.6-terra",
+      "google/gemini-3.7-flash",
+      "qwen/qwen3.8-27b",
     ],
   },
   ollama: {
@@ -147,6 +161,22 @@ export const ENGINE_PRESETS: Record<EngineType, EnginePreset> = {
     api_key_env: "AZURE_OPENAI_API_KEY",
     known_models: [],
   },
+  zen: {
+    base_url: "https://opencode.ai/zen/v1",
+    default_model: "big-pickle",
+    // Free tier: literal "public" + User-Agent opencode/* (engine injects UA).
+    // Paid models need a real OpenCode Zen key.
+    api_key_env: "OPENCODE_ZEN_API_KEY",
+    known_models: [
+      "big-pickle",
+      "nemotron-3-ultra-free",
+      "nemotron-3.5-lightning-free",
+      "deepseek-v4-flash-free",
+      "laguna-s-2.1-free",
+      "mimo-v2.5-free",
+      "hy3-free",
+    ],
+  },
   mock: { base_url: "", default_model: "mock", api_key_env: "", known_models: ["mock"] },
   custom: { base_url: "", default_model: "", api_key_env: "", known_models: [] },
 };
@@ -154,8 +184,16 @@ export const ENGINE_PRESETS: Record<EngineType, EnginePreset> = {
 // Hydrate ENGINE_PRESETS from the daemon's shared catalog (GET /engines/presets,
 // backed by src/core/engines/presets.js). Mutates the object in place so every
 // consumer that reads ENGINE_PRESETS[engine] lazily (form handlers, model
-// dropdowns) picks up the fresh lists. Best-effort: on failure we keep the
-// baked-in fallback above. Call once at app boot.
+// dropdowns) picks up the fresh lists.
+//
+// The endpoint needs the bearer token, so this runs AFTER the token bootstrap
+// (see useTokenBootstrap) — calling it at module load only ever got a 401 and
+// silently left the bundled list in place.
+//
+// Model lists MERGE rather than replace: a daemon that has not been restarted
+// since the last upgrade must not drop models this build knows about, and a
+// daemon ahead of this build can still add ones it does not. Scalars only
+// overwrite when the daemon actually has a value.
 let presetsLoaded = false;
 export async function loadEnginePresets(): Promise<void> {
   if (presetsLoaded) return;
@@ -163,12 +201,16 @@ export async function loadEnginePresets(): Promise<void> {
     const { Engines } = await import("../../../lib/api/engines");
     const { presets } = await Engines.presets();
     for (const [engine, preset] of Object.entries(presets || {})) {
-      if (engine in ENGINE_PRESETS && preset) {
-        Object.assign(ENGINE_PRESETS[engine as EngineType], preset);
-      }
+      const local = ENGINE_PRESETS[engine as EngineType];
+      if (!local || !preset) continue;
+      local.known_models = Array.from(new Set([...local.known_models, ...(preset.known_models || [])]));
+      if (preset.base_url) local.base_url = preset.base_url;
+      if (preset.default_model) local.default_model = preset.default_model;
+      if (preset.api_key_env) local.api_key_env = preset.api_key_env;
     }
     presetsLoaded = true;
   } catch {
-    // Daemon unreachable or old build without the endpoint — keep the fallback.
+    // Daemon unreachable, unauthenticated, or an old build without the
+    // endpoint — keep the bundled catalog and let a later call retry.
   }
 }

package/src/interfaces/web/src/components/settings/providers/types.ts

@@ -20,6 +20,9 @@ export interface Provider {
   default_temperature?: number;
   default_max_tokens?: number;
   is_active?: boolean;
+  /** false = ask this provider not to reason before answering. Undefined leaves
+   *  the provider's own default alone. */
+  thinking?: boolean;
   context_limit_tokens?: number;
   model_context_limits?: Record<string, number>;
   pricing?: ProviderPricing;

package/src/interfaces/web/src/components/tasks/TaskBoard.tsx

@@ -0,0 +1,201 @@
+import { useState } from "react";
+import useSWR from "swr";
+import { ListTree, MessageSquare } from "lucide-react";
+import { Tasks } from "../../lib/api";
+import type { GlobalTaskEntry } from "../../lib/api/tasks";
+import { Loading } from "../ui";
+import { useToast } from "../Toast";
+import { CategoryIcon, StatusFooter, StatusIcon, effectiveStatus, statusTint } from "./taskStatus";
+import { DONE_COLUMN, columnFor, columnLabel, type BoardColumn } from "./columns";
+import { cn } from "../../lib/cn";
+import { t } from "../../i18n";
+import { toneText } from "../../lib/tone";
+import type { TaskEntry } from "../../types/daemon";
+
+/**
+ * The board. Columns come from config (core/tasks/columns.js): one global
+ * catalog, each project showing the subset it picked, `done` always last.
+ *
+ * Drag-and-drop is the platform's own — no library. A board of this size does
+ * not need a collision engine, and adding one to the panel's dependency list
+ * for four columns of cards would cost more than it returns.
+ *
+ * DROPPING IS THE SAME VERB THE LIST USES. A card into `done` calls the same
+ * endpoint the checkbox does; a card out of `done` reopens and then sets the
+ * column. Nothing here is a board-only code path, which is why the list keeps
+ * working exactly as it did.
+ */
+
+/** A board wants the whole set, not one page — a column that stops at 20 lies. */
+const BOARD_LIMIT = 300;
+
+export function TaskBoard({
+  pid, columns, state, selectedId, onSelect, onChanged, refreshKey,
+}: {
+  /** Undefined on the aggregated view: every project at once. */
+  pid?: string;
+  columns: BoardColumn[];
+  /**
+   * The screen's Open/Done/Dropped/All filter. It used to be ignored here —
+   * the chips were on screen and did nothing, which is worse than not having
+   * them — so the board fetched everything and quietly dropped the archive.
+   */
+  state: "open" | "done" | "dropped" | "all";
+  selectedId: string | null;
+  onSelect: (id: string) => void;
+  onChanged: () => void;
+  /** Bumped by the parent to force a refetch after an outside change. */
+  refreshKey?: number;
+}) {
+  const toast = useToast();
+  const [dragging, setDragging] = useState<string | null>(null);
+  const [over, setOver] = useState<string | null>(null);
+
+  const key = `board:${pid ?? "all"}:${state}:${refreshKey ?? 0}`;
+  const { data, isLoading, mutate } = useSWR(key, () =>
+    pid
+      ? Tasks.listPage(pid, { state, limit: BOARD_LIMIT, offset: 0 }).then((r) => r.items)
+      : Tasks.globalPage({ state, limit: BOARD_LIMIT, offset: 0 }).then((r) => r.items),
+  );
+
+  const live = (data ?? []) as TaskEntry[];
+  const rowPid = (task: TaskEntry) => pid ?? String((task as GlobalTaskEntry).project_id ?? "");
+
+  const refresh = () => { void mutate(); onChanged(); };
+
+  const move = async (task: TaskEntry, to: string) => {
+    const from = columnFor(task, columns);
+    if (from === to) return;
+    const p = rowPid(task);
+    try {
+      if (to === DONE_COLUMN) {
+        await Tasks.done(p, task.id);
+      } else {
+        // Coming back from done: reopen first, or the status change lands on a
+        // task the board would still draw in the last column.
+        if (task.state !== "open") await Tasks.reopen(p, task.id);
+        await Tasks.status(p, task.id, to as TaskEntry["status"] & string);
+      }
+      refresh();
+    } catch (e) {
+      toast.error(e instanceof Error ? e.message : t("common.error_generic"));
+    }
+  };
+
+  if (isLoading) return <Loading />;
+
+  return (
+    <div className="flex min-h-0 flex-1 gap-3 overflow-x-auto p-3" data-testid="task-board">
+      {columns.map((col) => {
+        const cards = live.filter((x) => columnFor(x, columns) === col.id);
+        const isOver = over === col.id;
+        return (
+          <section
+            key={col.id}
+            data-testid={`board-col-${col.id}`}
+            onDragOver={(e) => { e.preventDefault(); setOver(col.id); }}
+            onDragLeave={() => setOver((c) => (c === col.id ? null : c))}
+            onDrop={(e) => {
+              e.preventDefault();
+              setOver(null);
+              const id = e.dataTransfer.getData("text/plain");
+              const task = live.find((x) => x.id === id);
+              if (task) void move(task, col.id);
+            }}
+            className={cn(
+              "flex w-64 shrink-0 flex-col rounded-lg border transition-colors",
+              isOver ? "border-primary bg-primary/5" : "border-border bg-muted/20",
+            )}
+          >
+            <header className="flex shrink-0 items-center justify-between gap-2 border-b border-border px-2.5 py-2">
+              <span className="truncate text-[11px] font-semibold uppercase tracking-wide">
+                {columnLabel(col)}
+              </span>
+              <span className="shrink-0 text-[10px] text-muted-fg">{cards.length}</span>
+            </header>
+
+            <div className="min-h-0 flex-1 space-y-1.5 overflow-y-auto p-2">
+              {cards.map((task) => {
+                const due = task.due ? String(task.due).slice(0, 10) : null;
+                const overdue = task.state === "open" && !!due && due < new Date().toISOString().slice(0, 10);
+                const project = (task as GlobalTaskEntry).project_name;
+                const eff = effectiveStatus(task);
+                return (
+                  <article
+                    key={`${rowPid(task)}-${task.id}`}
+                    draggable
+                    data-testid={`board-card-${task.id}`}
+                    onDragStart={(e) => {
+                      e.dataTransfer.setData("text/plain", task.id);
+                      e.dataTransfer.effectAllowed = "move";
+                      setDragging(task.id);
+                    }}
+                    onDragEnd={() => setDragging(null)}
+                    onClick={() => onSelect(task.id)}
+                    className={cn(
+                      "cursor-grab rounded-md border bg-card p-2 text-left active:cursor-grabbing",
+                      dragging === task.id && "opacity-40",
+                      task.id === selectedId ? "border-primary/60 ring-1 ring-primary/30" : "border-border",
+                    )}
+                  >
+                    <div className="flex items-start gap-1.5">
+                      {/* The card's OWN state, not the column's. Hardcoding it
+                          to the column made every card in every working column
+                          identical — you could not tell a dropped card from a
+                          live one without opening it. */}
+                      <span className={cn("mt-0.5 flex size-4 shrink-0 items-center justify-center rounded", statusTint(eff))}>
+                        <StatusIcon status={eff} className="size-2.5" />
+                      </span>
+                      <CategoryIcon category={task.category} />
+                      <span className={cn(
+                        "min-w-0 flex-1 break-words text-xs leading-snug",
+                        task.state !== "open" && "text-muted-fg line-through decoration-muted-fg/40",
+                      )}>
+                        {task.title}
+                      </span>
+                    </div>
+                    <div className="mt-1.5 flex flex-wrap items-center gap-x-2 gap-y-0.5 text-[10px] text-muted-fg">
+                      {/* Which project a card belongs to is the first thing you
+                          need on the aggregated board — every card looks alike
+                          until you know it. */}
+                      {project && <span className="truncate font-medium">{project.split("/").pop()}</span>}
+                      {task.priority && task.priority !== "normal" && (
+                        <span className={cn(
+                          "rounded px-1 py-0.2 font-medium",
+                          task.priority === "urgent" ? "bg-red-500/15 text-red-500" :
+                          task.priority === "high" ? "bg-amber-500/15 text-amber-500" :
+                          "bg-muted text-muted-fg"
+                        )}>
+                          {task.priority === "urgent" ? "🔴 Urgente" : task.priority === "high" ? "🟠 Alta" : "⚪ Baja"}
+                        </span>
+                      )}
+                      {task.agent && <span>{task.agent === "human" || task.agent === "owner" ? "👤 @human" : `@${task.agent}`}</span>}
+                      {!!task.subtask_count && (
+                        <span className="inline-flex items-center gap-0.5">
+                          <ListTree size={9} />{task.subtask_done ?? 0}/{task.subtask_count}
+                        </span>
+                      )}
+                      {!!task.comment_count && (
+                        <span className="inline-flex items-center gap-0.5">
+                          <MessageSquare size={9} />{task.comment_count}
+                        </span>
+                      )}
+                      {due && <span className={cn(overdue && cn("font-medium", toneText.red))}>⏱ {due}</span>}
+                    </div>
+                    {/* The status on the bottom edge, even though the column
+                        already implies it: it is the one element that reads the
+                        same here and in the list, where nothing said it at all. */}
+                    <StatusFooter status={eff} className="mt-1.5 border-t border-border/60 pt-1.5" />
+                  </article>
+                );
+              })}
+              {cards.length === 0 && (
+                <p className="px-1 py-4 text-center text-[10px] text-muted-fg">{t("tasks.board_empty_col")}</p>
+              )}
+            </div>
+          </section>
+        );
+      })}
+    </div>
+  );
+}

package/src/interfaces/web/src/components/tasks/TaskColumnsDialog.tsx

@@ -0,0 +1,243 @@
+import { useEffect, useState } from "react";
+import { mutate } from "swr";
+import { Plus, X, Zap } from "lucide-react";
+import { Tasks } from "../../lib/api";
+import { Button, Dialog, Field, Input } from "../ui";
+import { SelectCheckbox } from "../common/SelectCheckbox";
+import { useToast } from "../Toast";
+import { columnLabel, type BoardColumn } from "./columns";
+import { cn } from "../../lib/cn";
+import { t } from "../../i18n";
+
+/**
+ * Edit the board's columns.
+ *
+ * TWO SCOPES, ONE DIALOG, because they are two halves of one decision:
+ *
+ *   - the CATALOG is global. Add, rename or remove a column here and it changes
+ *     for every project. That is deliberate: a column name is a word people and
+ *     agents both use ("move it to QA"), and a per-project vocabulary makes that
+ *     sentence ambiguous.
+ *   - which of them a project SHOWS is per project. Dev work wants four columns;
+ *     a personal list wants one and `done`. Same words, different boards.
+ *
+ * `done` is in neither list — every board ends with it and nothing can remove it.
+ */
+export function TaskColumnsDialog({
+  open, onClose, pid, onSaved,
+}: {
+  open: boolean;
+  onClose: () => void;
+  /** Omitted on the aggregated view: only the catalog is editable there. */
+  pid?: string;
+  onSaved: () => void;
+}) {
+  const toast = useToast();
+  const [catalog, setCatalog] = useState<BoardColumn[]>([]);
+  const [picked, setPicked] = useState<string[]>([]);
+  const [draft, setDraft] = useState("");
+  const [busy, setBusy] = useState(false);
+  // Which rows have their automation open. Collapsed by default: most columns
+  // have none, and four always-visible agent fields turn the dialog into a form.
+  const [openHooks, setOpenHooks] = useState<Set<string>>(new Set());
+
+  useEffect(() => {
+    if (!open) return;
+    let alive = true;
+    (async () => {
+      try {
+        if (pid) {
+          const { columns, catalog: cat } = await Tasks.columns.forProject(pid);
+          if (!alive) return;
+          setCatalog(cat);
+          setPicked(columns.filter((c) => c.id !== "done").map((c) => c.id));
+        } else {
+          const { columns } = await Tasks.columns.catalog();
+          if (!alive) return;
+          setCatalog(columns);
+          setPicked(columns.map((c) => c.id));
+        }
+        setDraft("");
+      } catch (e) {
+        toast.error(e instanceof Error ? e.message : t("common.error_generic"));
+      }
+    })();
+    return () => { alive = false; };
+  }, [open, pid]); // eslint-disable-line react-hooks/exhaustive-deps
+
+  const slugify = (s: string) =>
+    s.trim().toLowerCase()
+      .normalize("NFD").replace(/[\u0300-\u036f]/g, "")
+      .replace(/[^a-z0-9]+/g, "-").replace(/^-+|-+$/g, "").slice(0, 32);
+
+  const addColumn = () => {
+    const label = draft.trim();
+    const id = slugify(label);
+    if (!id || id === "done" || catalog.some((c) => c.id === id)) return;
+    setCatalog((prev) => [...prev, { id, label }]);
+    setPicked((prev) => [...prev, id]);
+    setDraft("");
+  };
+
+  const removeColumn = (id: string) => {
+    setCatalog((prev) => prev.filter((c) => c.id !== id));
+    setPicked((prev) => prev.filter((x) => x !== id));
+  };
+
+  const rename = (id: string, label: string) =>
+    setCatalog((prev) => prev.map((c) => (c.id === id ? { ...c, label: label.trim() || null } : c)));
+
+  const setHook = (id: string, patch: { agent?: string; instruction?: string }) =>
+    setCatalog((prev) => prev.map((c) => {
+      if (c.id !== id) return c;
+      const agent = (patch.agent ?? c.on_enter?.agent ?? "").trim().toLowerCase();
+      const instruction = (patch.instruction ?? c.on_enter?.instruction ?? "").trim();
+      // No agent, no hook: an instruction with nobody to carry it out would be
+      // saved and silently never run.
+      return { ...c, on_enter: agent ? { agent, instruction: instruction || null } : null };
+    }));
+
+  const toggleHook = (id: string) =>
+    setOpenHooks((prev) => {
+      const next = new Set(prev);
+      if (next.has(id)) next.delete(id); else next.add(id);
+      return next;
+    });
+
+  const togglePick = (id: string) =>
+    setPicked((prev) => (prev.includes(id) ? prev.filter((x) => x !== id) : [...prev, id]));
+
+  const save = async () => {
+    if (catalog.length === 0) {
+      toast.error(t("tasks.columns_need_one"));
+      return;
+    }
+    setBusy(true);
+    try {
+      await Tasks.columns.saveCatalog(catalog);
+      // The project's pick is saved AFTER the catalog, so a column added in the
+      // same edit is already known when the subset referencing it is stored.
+      if (pid) await Tasks.columns.saveForProject(pid, picked);
+
+      // Every control that offers a status reads the same cached key
+      // (useTaskColumns). Without this the board redrew with the new column
+      // while the detail's dropdown still listed the old four — you could drag
+      // a card somewhere the rest of the UI could not name.
+      await mutate((key) => typeof key === "string" && key.includes("/tasks/columns"), undefined, {
+        revalidate: true,
+      });
+
+      toast.success(t("common.saved"));
+      onSaved();
+      onClose();
+    } catch (e) {
+      toast.error(e instanceof Error ? e.message : t("common.error_generic"));
+    } finally {
+      setBusy(false);
+    }
+  };
+
+  return (
+    <Dialog
+      open={open}
+      onClose={onClose}
+      title={t("tasks.columns_title")}
+      footer={
+        <>
+          <Button onClick={onClose}>{t("common.cancel")}</Button>
+          <Button variant="primary" loading={busy} data-testid="columns-save" onClick={save}>
+            {t("common.save")}
+          </Button>
+        </>
+      }
+    >
+      <div className="flex flex-col gap-3">
+        <p className="text-xs text-muted-fg">{t("tasks.columns_hint")}</p>
+
+        <Field label={t("tasks.columns_catalog")} hint={pid ? t("tasks.columns_pick_hint") : undefined}>
+          <ul className="space-y-1.5" data-testid="columns-list">
+            {catalog.map((col) => (
+              <li key={col.id} className="flex flex-wrap items-center gap-2">
+                {pid && (
+                  <SelectCheckbox
+                    checked={picked.includes(col.id)}
+                    onToggle={() => togglePick(col.id)}
+                    label={t("tasks.columns_show", { name: columnLabel(col) })}
+                    testId={`column-pick-${col.id}`}
+                  />
+                )}
+                <Input
+                  value={col.label ?? columnLabel(col)}
+                  data-testid={`column-label-${col.id}`}
+                  className={cn("text-xs", pid && !picked.includes(col.id) && "opacity-50")}
+                  onChange={(e) => rename(col.id, e.target.value)}
+                />
+                <span className="w-20 shrink-0 truncate font-mono text-[10px] text-muted-fg" title={col.id}>
+                  {col.id}
+                </span>
+                <button
+                  type="button"
+                  aria-label={t("tasks.columns_automation", { name: columnLabel(col) })}
+                  data-testid={`column-hook-${col.id}`}
+                  className={cn(
+                    "shrink-0",
+                    col.on_enter?.agent ? "text-primary" : "text-muted-fg hover:text-fg",
+                  )}
+                  onClick={() => toggleHook(col.id)}
+                >
+                  <Zap size={14} />
+                </button>
+                <button
+                  type="button"
+                  aria-label={t("tasks.columns_remove", { name: columnLabel(col) })}
+                  data-testid={`column-remove-${col.id}`}
+                  className="shrink-0 text-muted-fg hover:text-destructive"
+                  onClick={() => removeColumn(col.id)}
+                >
+                  <X size={14} />
+                </button>
+                {(openHooks.has(col.id) || col.on_enter?.agent) && (
+                  <div className="mt-1 w-full space-y-1.5 rounded-lg border border-border bg-muted/20 p-2">
+                    <div className="text-[10px] text-muted-fg">{t("tasks.columns_automation_hint")}</div>
+                    <Input
+                      value={col.on_enter?.agent ?? ""}
+                      data-testid={`column-hook-agent-${col.id}`}
+                      placeholder={t("tasks.columns_hook_agent_ph")}
+                      className="text-xs"
+                      onChange={(e) => setHook(col.id, { agent: e.target.value })}
+                    />
+                    <Input
+                      value={col.on_enter?.instruction ?? ""}
+                      data-testid={`column-hook-instruction-${col.id}`}
+                      placeholder={t("tasks.columns_hook_instruction_ph")}
+                      className="text-xs"
+                      disabled={!col.on_enter?.agent}
+                      onChange={(e) => setHook(col.id, { instruction: e.target.value })}
+                    />
+                  </div>
+                )}
+              </li>
+            ))}
+          </ul>
+        </Field>
+
+        <Field label={t("tasks.columns_add")}>
+          <div className="flex items-center gap-2">
+            <Input
+              value={draft}
+              data-testid="column-new"
+              placeholder={t("tasks.columns_add_ph")}
+              onChange={(e) => setDraft(e.target.value)}
+              onKeyDown={(e) => { if (e.key === "Enter") { e.preventDefault(); addColumn(); } }}
+            />
+            <Button size="sm" disabled={!draft.trim()} data-testid="column-add" onClick={addColumn}>
+              <Plus size={13} />
+            </Button>
+          </div>
+        </Field>
+
+        <p className="text-[10px] text-muted-fg">{t("tasks.columns_done_note")}</p>
+      </div>
+    </Dialog>
+  );
+}