@agentprojectcontext/apx 1.80.2 → 1.89.1

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

@@ -0,0 +1,126 @@
+import { useState } from "react";
+import useSWR from "swr";
+import { Plus } from "lucide-react";
+import { Tasks } from "../../lib/api";
+import { Button, Input } from "../ui";
+import { useToast } from "../Toast";
+import { StatusIcon, effectiveStatus, statusTint } from "./taskStatus";
+import { cn } from "../../lib/cn";
+import { t } from "../../i18n";
+import type { TaskEntry } from "../../types/daemon";
+
+/**
+ * The children of a task — an epic's real units of work.
+ *
+ * A SUBTASK IS A TASK. Same store, same verbs, same row: it can be assigned to
+ * an agent, moved through the board, commented on and closed on its own. That
+ * is the whole reason it is a `parent` field and not a second kind of thing —
+ * "one task that is really five" was unworkable precisely because those five
+ * could not be handed out, moved to QA or ticked off separately.
+ *
+ * Opening one navigates to it, where it is an ordinary task with its own
+ * detail, thread and children.
+ */
+export function TaskSubtasks({
+  pid, taskId, onOpen, onChanged,
+}: {
+  pid: string;
+  taskId: string;
+  /** Select this child in the list next door. */
+  onOpen: (id: string) => void;
+  /** The parent's counters moved — re-fetch it. */
+  onChanged: () => void;
+}) {
+  const toast = useToast();
+  const [title, setTitle] = useState("");
+  const [busy, setBusy] = useState(false);
+  const key = `/api/projects/${pid}/tasks?parent=${taskId}`;
+  const { data: kids, mutate } = useSWR(key, () => Tasks.subtasks(pid, taskId));
+
+  const rows = kids ?? [];
+  const done = rows.filter((k) => k.state === "done").length;
+
+  const refresh = () => { void mutate(); onChanged(); };
+
+  const add = async () => {
+    const name = title.trim();
+    if (!name || busy) return;
+    setBusy(true);
+    try {
+      await Tasks.add(pid, { title: name, parent: taskId, source: "web" } as Partial<TaskEntry>);
+      setTitle("");
+      refresh();
+    } catch (e) {
+      toast.error(e instanceof Error ? e.message : t("common.error_generic"));
+    } finally {
+      setBusy(false);
+    }
+  };
+
+  const tick = async (task: TaskEntry) => {
+    try {
+      await (task.state === "open" ? Tasks.done(pid, task.id) : Tasks.reopen(pid, task.id));
+      refresh();
+    } catch (e) {
+      toast.error(e instanceof Error ? e.message : t("common.error_generic"));
+    }
+  };
+
+  return (
+    <div className="space-y-1.5">
+      <div className="text-[11px] font-semibold uppercase tracking-wide text-muted-fg">
+        {t("tasks.subtasks_title")}
+        {rows.length ? ` (${done}/${rows.length})` : ""}
+      </div>
+
+      <div className="overflow-hidden rounded-lg border border-border">
+        {rows.length > 0 && (
+          <ul className="divide-y divide-border" data-testid="task-subtasks">
+            {rows.map((k) => {
+              const eff = effectiveStatus(k);
+              return (
+                <li key={k.id} className="flex items-center gap-2 px-2 py-1.5">
+                  <button
+                    type="button"
+                    onClick={() => tick(k)}
+                    data-testid={`subtask-tick-${k.id}`}
+                    aria-label={t(k.state === "open" ? "tasks.tick_done" : "tasks.tick_reopen", { title: k.title })}
+                    className={cn("flex size-5 shrink-0 items-center justify-center rounded", statusTint(eff))}
+                  >
+                    <StatusIcon status={eff} className="size-3" />
+                  </button>
+                  <button
+                    type="button"
+                    onClick={() => onOpen(k.id)}
+                    data-testid={`subtask-open-${k.id}`}
+                    className={cn(
+                      "min-w-0 flex-1 truncate text-left text-xs hover:underline",
+                      k.state !== "open" && "text-muted-fg line-through decoration-muted-fg/40",
+                    )}
+                  >
+                    {k.title}
+                  </button>
+                  {k.agent && <span className="shrink-0 text-[10px] text-muted-fg">@{k.agent}</span>}
+                </li>
+              );
+            })}
+          </ul>
+        )}
+
+        <div className={cn("flex items-center gap-2 p-2", rows.length > 0 && "border-t border-border")}>
+          <Input
+            value={title}
+            data-testid="subtask-input"
+            placeholder={t("tasks.subtask_ph")}
+            className="text-xs"
+            onChange={(e) => setTitle(e.target.value)}
+            onKeyDown={(e) => { if (e.key === "Enter") { e.preventDefault(); void add(); } }}
+          />
+          <Button size="sm" loading={busy} disabled={!title.trim()} data-testid="subtask-add" onClick={add}>
+            <Plus size={13} />
+          </Button>
+        </div>
+      </div>
+    </div>
+  );
+}

package/src/interfaces/web/src/components/tasks/columns.ts

@@ -0,0 +1,51 @@
+import { t } from "../../i18n";
+import type { TaskEntry } from "../../types/daemon";
+
+/**
+ * The panel's half of the board-column model. The server side is
+ * `src/core/tasks/columns.js` — the two agree on the shape, and this file
+ * mirrors only what a browser needs: how to label a column and which one a
+ * card belongs in.
+ *
+ * They are not shared code because they cannot be: the panel is a separate
+ * build with no path into `src/core`. `columnFor` below is the one piece of
+ * duplicated logic, and it is four lines with a matching comment on both ends.
+ */
+export interface BoardColumn {
+  id: string;
+  /** Null means "this is a built-in — use the translation for its id". */
+  label: string | null;
+  /**
+   * Automation: when a task lands in this column, hand it to this agent. The
+   * slug resolves against the TASK's project, so one global "QA" column puts
+   * each project's own qa agent to work.
+   */
+  on_enter?: { agent: string; instruction: string | null } | null;
+}
+
+/** The terminal column every board ends with. Not part of the catalog. */
+export const DONE_COLUMN = "done";
+
+/** Built-in ids get a translated name; a custom column keeps what its author typed. */
+export function columnLabel(col: BoardColumn): string {
+  if (col.label) return col.label;
+  if (col.id === DONE_COLUMN) return t("tasks.done_label");
+  const key = `tasks.status_${col.id}`;
+  const label = t(key as never);
+  // t() echoes the key back when it does not know it — better to show the raw
+  // id than "tasks.status_qa".
+  return label === key ? col.id : label;
+}
+
+/**
+ * Which column a task sits in. Mirrors `columnFor` in core/tasks/columns.js:
+ * `done` finishes in the done column, `dropped` stays where it was abandoned
+ * (it was not completed, and filing it under "done" would claim it was), and an
+ * open task whose status is not a column HERE falls into the first one, so a
+ * card is never invisible.
+ */
+export function columnFor(task: TaskEntry, columns: BoardColumn[]): string {
+  if (task.state === "done") return DONE_COLUMN;
+  const status = task.status || "pending";
+  return columns.some((c) => c.id === status) ? status : (columns[0]?.id || "pending");
+}

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

@@ -1,57 +1,182 @@
-import { Loader2, CheckCircle2, XCircle, Clock, CircleDot, HelpCircle } from "lucide-react";
+import { Circle, CheckCircle2, XCircle, Car } from "lucide-react";
 import { cn } from "../../lib/cn";
 import { t } from "../../i18n";
-import type { TaskEntry, TaskStatus } from "../../types/daemon";
+import { toneDot, toneText, toneTint } from "../../lib/tone";
+import type { TaskCategory, TaskEntry, TaskStatus } from "../../types/daemon";
 
-type Meta = { labelKey: string; color: string; dot: string; Icon: typeof Clock; spin?: boolean };
+/**
+ * How a task looks. Three rules, and they exist because the old version broke
+ * all three:
+ *
+ * 1. A TASK IS A TASK. One glyph per STATE — open, done, dropped — never one
+ *    per status. It used to draw a different icon for every status, so the same
+ *    row changed shape as it moved and nothing on screen said "this is a task".
+ *
+ * 2. NOTHING SPINS. `running` had an animated spinner, which meant a card
+ *    parked in that column looked like it was loading forever. A column is
+ *    where a task IS, not something happening right now.
+ *
+ * 3. ANY STATUS RENDERS. Columns are configurable now, so `status` can be any
+ *    slug. Every helper here used to index a four-entry table directly, so the
+ *    first custom column crashed the list, the board and the phone. Unknown
+ *    ids get a stable colour derived from the id and a label made from it.
+ *
+ * Status is carried by COLOUR and a LABEL, never by the glyph.
+ */
 
-// Single source of truth for how each workflow status looks. Reused by the
-// task list, detail panel and the floor/overview.
-const STATUS_META: Record<TaskStatus, Meta> = {
-  pending:   { labelKey: "tasks.status_pending",   color: "text-amber-500",  dot: "bg-amber-400",  Icon: CircleDot },
-  running:   { labelKey: "tasks.status_running",   color: "text-sky-500",    dot: "bg-sky-400",    Icon: Loader2, spin: true },
-  in_review: { labelKey: "tasks.status_in_review", color: "text-violet-500", dot: "bg-violet-400", Icon: Clock },
-  blocked:   { labelKey: "tasks.status_blocked",   color: "text-slate-400",  dot: "bg-slate-400",  Icon: HelpCircle },
+type Tone = "amber" | "sky" | "violet" | "slate" | "teal" | "rose" | "indigo" | "orange" | "cyan" | "lime";
+
+/** The shipped columns keep the tones they were designed with. */
+const BUILTIN_TONES: Record<string, Tone> = {
+  pending: "amber",
+  running: "sky",
+  in_review: "violet",
+  blocked: "slate",
 };
 
+/** Anything configured later picks from these, stably by id. */
+const CUSTOM_TONES: Tone[] = ["teal", "rose", "indigo", "orange", "cyan", "lime"];
+
 export const TASK_STATUS_ORDER: TaskStatus[] = ["pending", "running", "in_review", "blocked"];
 
-// Effective status for display: closed tasks render as done/dropped regardless
-// of their last open sub-status.
+/** Same id, same colour, every time and on every surface. */
+function toneFor(status: string): Tone {
+  const builtin = BUILTIN_TONES[status];
+  if (builtin) return builtin;
+  let hash = 0;
+  for (let i = 0; i < status.length; i++) hash = (hash * 31 + status.charCodeAt(i)) >>> 0;
+  return CUSTOM_TONES[hash % CUSTOM_TONES.length];
+}
+
+/**
+ * Effective status for display: closed tasks render as done/dropped regardless
+ * of the open sub-status they were last in.
+ */
 export function effectiveStatus(task: TaskEntry): TaskStatus | "done" | "dropped" {
   if (task.state === "done") return "done";
   if (task.state === "dropped") return "dropped";
-  return task.status ?? "pending";
+  return (task.status ?? "pending") as TaskStatus;
 }
 
-export function statusLabel(status: TaskStatus): string {
-  return t(STATUS_META[status].labelKey as never);
+/**
+ * A readable name for any status. Built-ins are translated; a configured column
+ * falls back to its own id made presentable ("waiting-on-client" → "Waiting on
+ * client") rather than printing the raw i18n key.
+ */
+export function statusLabel(status: string): string {
+  if (status === "done") return t("tasks.done_label");
+  if (status === "dropped") return t("tasks.dropped_label");
+  const key = `tasks.status_${status}`;
+  const label = t(key as never);
+  if (label !== key) return label;
+  const words = status.replace(/[-_]+/g, " ").trim();
+  return words.charAt(0).toUpperCase() + words.slice(1);
 }
 
-export function StatusIcon({ status, className }: { status: TaskStatus | "done" | "dropped"; className?: string }) {
-  if (status === "done") return <CheckCircle2 className={cn("size-4 text-emerald-500", className)} />;
+/** Background+foreground for the little square that carries the glyph in lists. */
+export function statusTint(status: string): string {
+  if (status === "done") return toneTint.emerald;
+  if (status === "dropped") return "bg-muted text-muted-foreground";
+  return toneTint[toneFor(status)];
+}
+
+/** Text colour for a status, wherever it is written rather than filled. */
+export function statusText(status: string): string {
+  if (status === "done") return toneText.emerald;
+  if (status === "dropped") return "text-muted-foreground";
+  return toneText[toneFor(status)];
+}
+
+/**
+ * The glyph. THREE of them, by state — not one per status.
+ *
+ * `Circle` for anything open reads as an empty checkbox, which is exactly what
+ * it is wherever it is clickable.
+ */
+export function StatusIcon({ status, className }: { status: string; className?: string }) {
+  if (status === "done") return <CheckCircle2 className={cn("size-4", toneText.emerald, className)} />;
   if (status === "dropped") return <XCircle className={cn("size-4 text-muted-foreground", className)} />;
-  const m = STATUS_META[status];
-  return <m.Icon className={cn("size-4", m.color, m.spin && "animate-spin", className)} />;
-}
-
-export function StatusBadge({ status }: { status: TaskStatus | "done" | "dropped" }) {
-  const label =
-    status === "done" ? t("tasks.done_label")
-    : status === "dropped" ? t("tasks.dropped_label")
-    : statusLabel(status);
-  const color =
-    status === "done" ? "text-emerald-500 border-emerald-500/30"
-    : status === "dropped" ? "text-muted-foreground border-border"
-    : `${STATUS_META[status].color} border-current/30`;
+  return <Circle className={cn("size-4", statusText(status), className)} />;
+}
+
+export function StatusBadge({ status }: { status: string }) {
   return (
-    <span className={cn("inline-flex items-center gap-1 rounded-md border px-1.5 py-0.5 text-[10px] font-medium capitalize", color)}>
+    <span
+      data-testid={`status-badge-${status}`}
+      className={cn(
+        "inline-flex items-center gap-1 rounded-md border px-1.5 py-0.5 text-[10px] font-medium",
+        statusText(status),
+        status === "dropped" ? "border-border" : "border-current/30",
+      )}
+    >
       <StatusIcon status={status} className="size-3" />
-      {label}
+      {statusLabel(status)}
     </span>
   );
 }
 
-export function StatusDot({ status }: { status: TaskStatus }) {
-  return <span className={cn("size-2 rounded-full", STATUS_META[status].dot)} />;
+export function StatusDot({ status }: { status: string }) {
+  if (status === "done") return <span className={cn("size-2 rounded-full", toneDot.emerald)} />;
+  if (status === "dropped") return <span className="size-2 rounded-full bg-muted-foreground" />;
+  return <span className={cn("size-2 rounded-full", toneDot[toneFor(status)])} />;
+}
+
+/**
+ * The status, written along the bottom edge of a card or row.
+ *
+ * On a board the column already says where a card is — until you look at the
+ * same task in the list, where nothing did. This is the one element that reads
+ * the same in both views, which is the point: the colour bar identifies the
+ * status at a glance and the word removes any doubt.
+ */
+export function StatusFooter({ status, className }: { status: string; className?: string }) {
+  return (
+    <div
+      data-testid={`status-footer-${status}`}
+      className={cn("flex items-center gap-1.5 text-[10px] font-medium", statusText(status), className)}
+    >
+      <StatusDot status={status} />
+      {statusLabel(status)}
+    </div>
+  );
+}
+
+// ── Category ────────────────────────────────────────────────────────────────
+// What KIND of task, next to the state glyph that says how it is going. The
+// two answer different questions and both belong on the row: a trip errand is
+// a trip errand whether it is pending or blocked.
+interface CategoryMeta {
+  labelKey: string;
+  /** Null draws nothing — an icon on every row carries no information. */
+  Icon: typeof Car | null;
+  /** Can it carry a place? That is what makes the mobility geofence consider it. */
+  locatable: boolean;
+}
+
+// Mirrors core/constants/task-categories.js. Adding one there means adding it
+// here too — the registry is small and closed on purpose, and the panel has no
+// path into src/core.
+const CATEGORY_META: Record<TaskCategory, CategoryMeta> = {
+  general: { labelKey: "tasks.category_general", Icon: null, locatable: false },
+  trip: { labelKey: "tasks.category_trip", Icon: Car, locatable: true },
+};
+
+/** The order the picker offers them in — the plain one first. */
+export const TASK_CATEGORY_ORDER: TaskCategory[] = ["general", "trip"];
+
+/** Does this kind of task get the place fields? */
+export function categoryIsLocatable(category?: TaskCategory | null): boolean {
+  return CATEGORY_META[(category || "general") as TaskCategory]?.locatable === true;
+}
+
+export function categoryLabel(category: TaskCategory): string {
+  const meta = CATEGORY_META[category];
+  return t((meta?.labelKey ?? "tasks.category_general") as never);
+}
+
+/** The little mark that says this is an errand. Null for a plain task. */
+export function CategoryIcon({ category, className }: { category?: TaskCategory; className?: string }) {
+  const Icon = category ? CATEGORY_META[category]?.Icon : null;
+  if (!Icon) return null;
+  return <Icon className={cn("size-3.5 shrink-0", toneText.emerald, className)} aria-label={categoryLabel(category!)} />;
 }

package/src/interfaces/web/src/components/tasks/taskViewPrefs.ts

@@ -0,0 +1,73 @@
+/**
+ * How you left the Tasks screen, remembered per device.
+ *
+ * Leaving for the chat and coming back used to drop you on the list, showing
+ * open tasks, filter cleared — every time. The board was a place you had to
+ * re-find, which is most of the reason a board stops being where you work.
+ *
+ * localStorage, not the daemon, on purpose: this is a per-DEVICE preference in
+ * the same family as the channel view/notify filters. The board you keep open
+ * on the laptop is not the one you want on the phone, and syncing it would make
+ * one of the two wrong.
+ *
+ * The URL still wins when it says something (`?view=board`), so a link someone
+ * sends still opens what it promises instead of whatever that device last did.
+ */
+export type TaskView = "list" | "board";
+export type TaskState = "open" | "done" | "dropped" | "all";
+
+export interface TaskViewPrefs {
+  view: TaskView;
+  state: TaskState;
+  /** A column id. Only meaningful for open tasks, and only in a project that has it. */
+  status: string;
+}
+
+const KEY = "apx.tasks.view";
+
+export const DEFAULT_TASK_VIEW_PREFS: TaskViewPrefs = { view: "list", state: "open", status: "" };
+
+const VIEWS: TaskView[] = ["list", "board"];
+const STATES: TaskState[] = ["open", "done", "dropped", "all"];
+
+/**
+ * Read the stored preference. Never throws and never returns a shape the screen
+ * has to check: a private window, cleared site data, or a value written by an
+ * older build all come back as the defaults.
+ */
+export function readTaskViewPrefs(): TaskViewPrefs {
+  try {
+    const raw = localStorage.getItem(KEY);
+    if (!raw) return { ...DEFAULT_TASK_VIEW_PREFS };
+    const saved = JSON.parse(raw) as Partial<TaskViewPrefs>;
+    return {
+      view: VIEWS.includes(saved?.view as TaskView) ? (saved!.view as TaskView) : "list",
+      state: STATES.includes(saved?.state as TaskState) ? (saved!.state as TaskState) : "open",
+      status: typeof saved?.status === "string" ? saved.status : "",
+    };
+  } catch {
+    return { ...DEFAULT_TASK_VIEW_PREFS };
+  }
+}
+
+/** Store it. A device that refuses storage just does not remember — never an error. */
+export function writeTaskViewPrefs(prefs: TaskViewPrefs): void {
+  try {
+    localStorage.setItem(KEY, JSON.stringify(prefs));
+  } catch {
+    /* private window, blocked site data — the screen works, it just forgets */
+  }
+}
+
+/**
+ * A remembered status filter is only valid where that column exists.
+ *
+ * Columns are per project (core/tasks/columns.js), so "qa" saved on one board
+ * is a filter that matches nothing on the next — and a screen that silently
+ * shows zero tasks reads as broken, not as filtered. Restoring it needs the
+ * project's own vocabulary, so this is checked once the columns have loaded.
+ */
+export function statusStillValid(status: string, available: { id: string }[]): boolean {
+  if (!status) return true;
+  return available.some((c) => c.id === status);
+}

package/src/interfaces/web/src/components/tasks/useTaskColumns.ts

@@ -0,0 +1,31 @@
+import useSWR from "swr";
+import { Tasks } from "../../lib/api";
+import { DONE_COLUMN, type BoardColumn } from "./columns";
+
+/**
+ * The columns a project actually has — for every control that offers a status,
+ * not just the board.
+ *
+ * Without this the four built-ins were hardcoded in three places (the detail's
+ * status select, the task form, the screen's filter chips), so adding a "QA"
+ * column gave you a board you could drag a card into and then a detail panel
+ * whose dropdown had never heard of it. A card could be moved somewhere the
+ * rest of the UI could not name.
+ *
+ * `done` is stripped: it is a state, reached by completing a task, never by
+ * picking it from a dropdown.
+ */
+export function useTaskColumns(pid?: string) {
+  const { data } = useSWR(
+    pid ? `/api/projects/${pid}/tasks/columns` : "/api/tasks/columns",
+    () => (pid ? Tasks.columns.forProject(pid) : Tasks.columns.catalog().then((r) => ({ columns: r.columns }))),
+    // The catalog changes when someone edits it, not while you work — one fetch
+    // per screen is plenty, and every control on it shares this key.
+    { revalidateOnFocus: false },
+  );
+
+  const columns: BoardColumn[] = data?.columns ?? [];
+  /** Pickable statuses, in the project's own order. */
+  const statuses = columns.filter((c) => c.id !== DONE_COLUMN);
+  return { columns, statuses };
+}