@agentprojectcontext/apx 1.80.2 → 1.89.1

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

@@ -0,0 +1,167 @@
+import { useEffect, useRef, useState } from "react";
+import useSWR from "swr";
+import { Send } from "lucide-react";
+import { Tasks } from "../../lib/api";
+import { Agents } from "../../lib/api/agents";
+import { Button, Textarea } from "../ui";
+import { AgentAvatar } from "../agents/AgentAvatar";
+import { useToast } from "../Toast";
+import { relativeWhen } from "../../lib/when";
+import { cn } from "../../lib/cn";
+import { t } from "../../i18n";
+import type { AgentFace, TaskComment } from "../../types/daemon";
+
+/**
+ * The task's comment thread, plus the box that writes to it.
+ *
+ * IT DOES NOT GROW THE PANEL. The thread scrolls inside a fixed height and the
+ * composer stays pinned under it, because the point of a comment is to sit
+ * NEXT to a task you can still read — a thread that pushes the description,
+ * the subtasks and the dates off screen has replaced the thing it annotates.
+ *
+ * @-mentioning an agent hands it the task: it runs a real turn with its own
+ * tools and writes back another comment. That happens server-side and takes as
+ * long as the work takes, so the POST returns as soon as YOUR comment is
+ * stored and we poll for the replies (see `waitForReplies`).
+ */
+const THREAD_MAX_H = "max-h-72";
+
+/** How long to keep watching for a summoned agent's reply, and how often. */
+const POLL_MS = 4000;
+const POLL_FOR_MS = 3 * 60 * 1000;
+
+function authorName(by: string | null, faces: Map<string, AgentFace>) {
+  if (!by || by === "owner") return t("tasks.comment_owner");
+  return faces.get(by)?.name || by;
+}
+
+export function TaskComments({
+  pid, taskId, comments, onChanged,
+}: {
+  pid: string;
+  taskId: string;
+  comments: TaskComment[];
+  /** Re-fetch the task — the thread lives on it. */
+  onChanged: () => void;
+}) {
+  const toast = useToast();
+  const [text, setText] = useState("");
+  const [busy, setBusy] = useState(false);
+  const scroller = useRef<HTMLDivElement | null>(null);
+  const polling = useRef<ReturnType<typeof setInterval> | null>(null);
+
+  // One request for the roster, shared with every other screen on this project.
+  // It is what lets a comment wear the agent's real face instead of an initial.
+  const { data: agents } = useSWR(pid ? `/api/projects/${pid}/agents` : null, () => Agents.list(pid));
+  const faces = new Map<string, AgentFace>(
+    (agents ?? []).map((a) => [a.slug, { slug: a.slug, icon: a.icon, emoji: a.emoji, name: a.name || a.slug }]),
+  );
+
+  // Newest comment in view. A thread you have to scroll to see the reply you
+  // just triggered is a thread that looks broken.
+  useEffect(() => {
+    const el = scroller.current;
+    if (el) el.scrollTop = el.scrollHeight;
+  }, [comments.length]);
+
+  // Stop polling when the pane closes or the task changes — an interval that
+  // outlives its component keeps re-fetching a task nobody is looking at.
+  useEffect(() => () => { if (polling.current) clearInterval(polling.current); }, [taskId]);
+
+  /**
+   * Watch for the summoned agents' replies. There is no push channel for a
+   * task, and the alternative (awaiting the run inside the POST) times out on
+   * the phone and gets retried into a second, duplicate run.
+   */
+  const waitForReplies = () => {
+    if (polling.current) clearInterval(polling.current);
+    const started = Date.now();
+    polling.current = setInterval(() => {
+      if (Date.now() - started > POLL_FOR_MS) {
+        if (polling.current) clearInterval(polling.current);
+        polling.current = null;
+        return;
+      }
+      onChanged();
+    }, POLL_MS);
+  };
+
+  const send = async () => {
+    const body = text.trim();
+    if (!body || busy) return;
+    setBusy(true);
+    try {
+      const { summoned } = await Tasks.comment(pid, taskId, body);
+      setText("");
+      onChanged();
+      if (summoned?.length) {
+        toast.info(t("tasks.comment_summoned", { who: summoned.map((s) => `@${s}`).join(", ") }));
+        waitForReplies();
+      }
+    } catch (e) {
+      toast.error(e instanceof Error ? e.message : t("common.error_generic"));
+    } finally {
+      setBusy(false);
+    }
+  };
+
+  return (
+    <div className="space-y-1.5">
+      <div className="text-[11px] font-semibold uppercase tracking-wide text-muted-fg">
+        {t("tasks.comments_title")}{comments.length ? ` (${comments.length})` : ""}
+      </div>
+
+      <div className="overflow-hidden rounded-lg border border-border">
+        {comments.length > 0 && (
+          <div ref={scroller} className={cn("space-y-2 overflow-y-auto p-2.5", THREAD_MAX_H)} data-testid="task-comments">
+            {comments.map((c) => (
+              <div key={c.id} className="flex gap-2">
+                <div className="mt-0.5 shrink-0">
+                  {c.by && c.by !== "owner"
+                    ? <AgentAvatar {...(faces.get(c.by) ?? { name: c.by })} size={20} />
+                    : <span className="flex size-5 items-center justify-center rounded-full bg-primary/20 text-[9px] font-semibold uppercase">
+                        {t("tasks.comment_owner").slice(0, 2)}
+                      </span>}
+                </div>
+                <div className="min-w-0 flex-1">
+                  <div className="flex items-baseline gap-2 text-[10px] text-muted-fg">
+                    <span className="font-medium text-fg">{authorName(c.by, faces)}</span>
+                    <span title={new Date(c.ts).toLocaleString()}>{relativeWhen(c.ts, t as never)}</span>
+                  </div>
+                  <div className="whitespace-pre-wrap break-words text-xs">{c.text}</div>
+                </div>
+              </div>
+            ))}
+          </div>
+        )}
+
+        <div className={cn("flex items-end gap-2 p-2", comments.length > 0 && "border-t border-border")}>
+          <Textarea
+            rows={2}
+            value={text}
+            data-testid="task-comment-input"
+            placeholder={t("tasks.comment_ph")}
+            className="text-xs"
+            onChange={(e) => setText(e.target.value)}
+            // Enter sends, Shift+Enter breaks the line — the same contract as
+            // every other composer in the panel.
+            onKeyDown={(e) => {
+              if (e.key === "Enter" && !e.shiftKey) { e.preventDefault(); void send(); }
+            }}
+          />
+          <Button
+            size="sm"
+            variant="primary"
+            loading={busy}
+            disabled={!text.trim()}
+            data-testid="task-comment-send"
+            onClick={send}
+          >
+            <Send size={13} />
+          </Button>
+        </div>
+      </div>
+      <div className="text-[10px] text-muted-fg">{t("tasks.comment_hint")}</div>
+    </div>
+  );
+}

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

@@ -0,0 +1,335 @@
+import { useState } from "react";
+import useSWR from "swr";
+import { Check, CornerLeftUp, ExternalLink, Pencil, RotateCcw, Trash2 } from "lucide-react";
+import { useNavigate } from "react-router-dom";
+import { Tasks } from "../../lib/api";
+import { Agents } from "../../lib/api/agents";
+import { Badge, Button, Spinner, Tip } from "../ui";
+import { UiSelect } from "../UiSelect";
+import { ReadOnlyBlock } from "../ReadOnlyBlock";
+import { TaskComments } from "./TaskComments";
+import { TaskSubtasks } from "./TaskSubtasks";
+import { ConfirmDialog } from "../common/ConfirmDialog";
+import { useToast } from "../Toast";
+import { CategoryIcon, StatusIcon, StatusBadge, categoryLabel, effectiveStatus, statusTint } from "./taskStatus";
+import { useTaskColumns } from "./useTaskColumns";
+import { columnLabel } from "./columns";
+import { relativeWhen } from "../../lib/when";
+import { cn } from "../../lib/cn";
+import { t } from "../../i18n";
+import { toneOutline, toneText } from "../../lib/tone";
+import type { TaskEntry, TaskStatus } from "../../types/daemon";
+
+/**
+ * Right column: the selected task, open by default.
+ *
+ * Reads like the routine detail on purpose — name and the verbs on the top
+ * line, a compact meta strip under it, then the content. Every FIELD is edited
+ * in the one task form (the "Edit" button here and the row's ⋯ open the same
+ * dialog); only the workflow status is changed in place, because that is a
+ * move, not an edit.
+ */
+export function TaskDetail({
+  pid, taskId, projectName, onEdit, onChanged, onOpenTask,
+}: {
+  pid: string;
+  taskId: string;
+  /** Only on the cross-project list — says which project this one lives in. */
+  projectName?: string;
+  onEdit: (task: TaskEntry) => void;
+  onChanged: () => void;
+  /** Select another task in the list next door (a subtask, or this one's parent). */
+  onOpenTask?: (id: string) => void;
+}) {
+  const toast = useToast();
+  const navigate = useNavigate();
+  const { statuses } = useTaskColumns(pid);
+  // The roster this task can be handed to. Same key the form and the comment
+  // thread use, so it is one request per project across the screen.
+  const { data: agents } = useSWR(pid ? `/api/projects/${pid}/agents` : null, () => Agents.list(pid));
+  const { data: task, isLoading, mutate } = useSWR(
+    `/api/projects/${pid}/tasks/${taskId}`,
+    () => Tasks.get(pid, taskId),
+  );
+  const [busy, setBusy] = useState(false);
+  // `rules/web-ui.md` asks for a dialog before an EXECUTION or a DESTRUCTIVE
+  // change. Dropping is one; finishing a task is neither — it flips a bit that
+  // "reopen" flips back, and the dialog that used to guard it was pure friction
+  // on the single most frequent verb in the screen. Undo rides the toast.
+  const [confirm, setConfirm] = useState<"drop" | null>(null);
+
+  const act = async (fn: () => Promise<unknown>, done?: { label: string; undo: () => Promise<unknown> }) => {
+    setBusy(true);
+    try {
+      await fn();
+      void mutate();
+      onChanged();
+      if (done) {
+        toast.success(done.label, {
+          label: t("tasks.undo"),
+          onClick: () => {
+            done.undo().then(() => { void mutate(); onChanged(); })
+              .catch(() => toast.error(t("common.error_generic")));
+          },
+        });
+      }
+    }
+    catch (e) { toast.error(e instanceof Error ? e.message : String(e)); }
+    finally { setBusy(false); }
+  };
+
+  if (isLoading) return <div className="flex h-full items-center justify-center"><Spinner /></div>;
+  if (!task) return null;
+
+  const eff = effectiveStatus(task);
+  const isOpen = task.state === "open";
+  const due = task.due ? String(task.due).slice(0, 10) : null;
+  const overdue = isOpen && !!due && due < new Date().toISOString().slice(0, 10);
+
+  return (
+    <div className="flex h-full min-h-0 flex-col" data-testid="task-detail">
+      <div className="min-h-0 flex-1 space-y-4 overflow-y-auto p-4">
+        {/* header: title + the verbs */}
+        <div className="flex flex-wrap items-start justify-between gap-3">
+          <div className="flex min-w-[12rem] flex-1 items-center gap-2">
+            <span className={cn("flex size-7 shrink-0 items-center justify-center rounded-lg", statusTint(eff))}>
+              <StatusIcon status={eff} className="size-4" />
+            </span>
+            {/* The title outranks the chips for width: the chips repeat what
+                the icon and the meta strip already say. */}
+            <h3 className="truncate text-base font-semibold" title={task.title}>{task.title}</h3>
+          </div>
+          <div className="flex shrink-0 items-center gap-2">
+            <Button size="sm" variant="secondary" data-testid="task-detail-edit" onClick={() => onEdit(task)}>
+              <Pencil size={13} /> {t("common.edit")}
+            </Button>
+            {isOpen ? (
+              <>
+                <Button
+                  size="sm"
+                  variant="primary"
+                  loading={busy}
+                  data-testid="task-detail-done"
+                  onClick={() => act(
+                    () => Tasks.done(pid, task.id),
+                    { label: t("project.tasks.done"), undo: () => Tasks.reopen(pid, task.id) },
+                  )}
+                >
+                  <Check size={13} /> {t("tasks.mark_done")}
+                </Button>
+                <Tip content={t("tasks.mark_dropped")}>
+                  <Button size="sm" variant="destructive" loading={busy} aria-label={t("tasks.mark_dropped")} data-testid="task-detail-drop" onClick={() => setConfirm("drop")}>
+                    <Trash2 size={13} />
+                  </Button>
+                </Tip>
+              </>
+            ) : (
+              <Button size="sm" variant="secondary" loading={busy} onClick={() => act(() => Tasks.reopen(pid, task.id))}>
+                <RotateCcw size={13} /> {t("tasks.mark_reopen")}
+              </Button>
+            )}
+          </div>
+        </div>
+
+        {/* compact meta strip — the same row the routine detail uses */}
+        <div className="flex flex-wrap items-center gap-x-4 gap-y-1 text-xs text-muted-fg">
+          <StatusBadge status={eff} />
+          {/* Which project this belongs to, before anything else about it: on
+              the aggregated list every row looks alike until you know that. */}
+          {projectName && <Badge tone="info">{projectName.split("/").pop() || projectName}</Badge>}
+          {task.category && task.category !== "general" && (
+            <span className="inline-flex items-center gap-1">
+              <CategoryIcon category={task.category} />
+              {categoryLabel(task.category)}
+            </span>
+          )}
+          <span className="font-mono text-[10px]">{task.id}</span>
+          {task.priority && task.priority !== "normal" && (
+            <Badge tone={task.priority === "urgent" ? "danger" : task.priority === "high" ? "warning" : "muted"}>
+              {task.priority === "urgent" ? "🔴 Urgente" : task.priority === "high" ? "🟠 Alta" : "⚪ Baja"}
+            </Badge>
+          )}
+          {task.agent && <span>{task.agent === "human" || task.agent === "owner" ? "👤 @human" : `@${task.agent}`}</span>}
+          {due && (
+            <span className={cn(overdue && cn("font-medium", toneText.red))}>
+              {t("project.global_tasks.field_due")} {due}
+            </span>
+          )}
+          {/* Chips, not bare "#word" runs: at four tags the old version read as
+              one long string and you could not tell where a tag ended. */}
+          {task.tags?.map((tag) => (
+            <span
+              key={tag}
+              data-testid={`task-tag-${tag}`}
+              className="inline-flex items-center rounded-md border border-border bg-muted/40 px-1.5 py-0.5 text-[10px] font-medium text-fg"
+            >
+              {tag}
+            </span>
+          ))}
+          {task.location && (
+            // Pinned places link out to Maps; a place with only a name still
+            // says where, which is the point of writing it down.
+            //
+            // NAME **AND** ADDRESS, not one or the other. This used to fall
+            // back from place to address, so an errand that had both showed
+            // only the shop name — and "Farmacia del Puente" does not tell you
+            // which corner it is on. The address is the half you need at the
+            // wheel, and it is the half the mobility alert reads out.
+            <span data-testid="task-location">
+              {t("tasks.location_label")}:{" "}
+              {task.location.latitude != null && task.location.longitude != null ? (
+                <a
+                  className="underline underline-offset-2"
+                  href={`https://www.google.com/maps/search/?api=1&query=${task.location.latitude},${task.location.longitude}`}
+                  target="_blank"
+                  rel="noreferrer"
+                >
+                  {task.location.place || task.location.address || `${task.location.latitude}, ${task.location.longitude}`}
+                </a>
+              ) : (
+                task.location.place || task.location.address
+              )}
+              {task.location.address && task.location.address !== task.location.place
+                ? ` — ${task.location.address}`
+                : ""}
+            </span>
+          )}
+          {task.source && <span>{t("tasks.field_source")}: {task.source}</span>}
+          {task.created_by && <span>{t("tasks.field_creator")}: {task.created_by}</span>}
+          <span title={new Date(task.created_at).toLocaleString()}>
+            {t("tasks.field_created")} {relativeWhen(task.created_at, t as never)}
+          </span>
+          <span title={new Date(task.updated_at).toLocaleString()}>
+            {t("tasks.field_updated")} {relativeWhen(task.updated_at, t as never)}
+          </span>
+          {task.done_at && (
+            <span title={new Date(task.done_at).toLocaleString()}>
+              {t("tasks.field_done")} {relativeWhen(task.done_at, t as never)}
+            </span>
+          )}
+        </div>
+
+        {/* The two decisions you change most often, in place: where it is and
+            who has it. Everything else goes through the edit dialog.
+
+            WHO HAS IT used to be a bare "@slug" buried in the meta strip above,
+            and invisible whenever it was empty — so a task nobody had looked
+            exactly like a task nobody could assign. An empty picker is the
+            thing that asks the question. */}
+        {isOpen && (
+          <div className="grid max-w-md gap-3 sm:grid-cols-2">
+            <div className="space-y-1">
+              <div className="text-[11px] font-semibold uppercase tracking-wide text-muted-fg">{t("tasks.field_status")}</div>
+              <UiSelect
+                data-testid="task-status-select"
+                value={task.status ?? "pending"}
+                onChange={(v) => act(() => Tasks.status(pid, task.id, v as TaskStatus))}
+                options={statuses.map((c) => ({ value: c.id, label: columnLabel(c) }))}
+              />
+            </div>
+            <div className="space-y-1">
+              <div className="text-[11px] font-semibold uppercase tracking-wide text-muted-fg">{t("tasks.field_agent")}</div>
+              <UiSelect
+                data-testid="task-agent-select"
+                value={task.agent ?? ""}
+                onChange={(v) => act(() => Tasks.patch(pid, task.id, { agent: v || null }))}
+                options={[
+                  { value: "", label: t("tasks.agent_none") },
+                  { value: "human", label: "👤 Humano (Owner)" },
+                  ...(agents ?? []).map((a) => ({ value: a.slug, label: a.name || a.slug })),
+                ]}
+              />
+              <p className="text-[10px] text-muted-fg">{t("tasks.agent_hint")}</p>
+            </div>
+            <div className="space-y-1">
+              <div className="text-[11px] font-semibold uppercase tracking-wide text-muted-fg">Prioridad</div>
+              <UiSelect
+                value={task.priority ?? "normal"}
+                onChange={(v) => act(() => Tasks.patch(pid, task.id, { priority: v as TaskEntry["priority"] }))}
+                options={[
+                  { value: "low", label: "⚪ Baja" },
+                  { value: "normal", label: "🟢 Normal" },
+                  { value: "high", label: "🟠 Alta" },
+                  { value: "urgent", label: "🔴 Urgente" },
+                ]}
+              />
+            </div>
+            <div className="space-y-1">
+              <div className="text-[11px] font-semibold uppercase tracking-wide text-muted-fg">Recordatorio</div>
+              <UiSelect
+                value={task.reminder_frequency ?? "none"}
+                onChange={(v) => act(() => Tasks.patch(pid, task.id, { reminder_frequency: v as TaskEntry["reminder_frequency"] }))}
+                options={[
+                  { value: "none", label: "Sin recordatorio" },
+                  { value: "once", label: "Una vez" },
+                  { value: "daily", label: "Diario" },
+                  { value: "weekly", label: "Semanal" },
+                ]}
+              />
+            </div>
+          </div>
+        )}
+
+        {/* The owner's words first, the agent's prompt second — and the prompt
+            only when it exists. A task with an empty "Prompt" box on top read
+            like a job waiting to be dispatched; most tasks are not that, and
+            an empty field on every one of them is an invitation to fill it. */}
+        <ReadOnlyBlock
+          title={t("tasks.field_description")}
+          body={task.description ?? ""}
+          empty={t("tasks.description_empty")}
+        />
+
+        {task.body?.trim() ? (
+          <ReadOnlyBlock title={t("tasks.field_prompt")} body={task.body} mono />
+        ) : null}
+
+        {/* A subtask says what it is part of, and gets you back there. */}
+        {task.parent && onOpenTask && (
+          <button
+            type="button"
+            data-testid="task-parent-link"
+            onClick={() => onOpenTask(task.parent!)}
+            className={cn("flex items-center gap-1.5 rounded-lg px-3 py-2 text-xs hover:bg-primary/10", toneOutline.emerald)}
+          >
+            <CornerLeftUp className="size-3.5" />{t("tasks.part_of")}
+          </button>
+        )}
+
+        <TaskSubtasks
+          pid={pid}
+          taskId={task.id}
+          onOpen={(id) => onOpenTask?.(id)}
+          onChanged={() => { void mutate(); onChanged(); }}
+        />
+
+        <TaskComments
+          pid={pid}
+          taskId={task.id}
+          comments={task.comments ?? []}
+          onChanged={() => { void mutate(); onChanged(); }}
+        />
+
+        {task.thread && (
+          <button
+            type="button"
+            onClick={() => navigate(`/p/${pid}/chat?thread=${task.thread}`)}
+            className={cn("flex items-center gap-1.5 rounded-lg px-3 py-2 text-xs hover:bg-sky-500/10", toneOutline.sky)}
+          >
+            <ExternalLink className="size-3.5" />{t("tasks.view_thread")}
+          </button>
+        )}
+      </div>
+
+      <ConfirmDialog
+        open={confirm === "drop"}
+        onClose={() => setConfirm(null)}
+        onConfirm={() => act(() => Tasks.drop(pid, task.id))}
+        title={t("tasks.confirm_drop_title")}
+        description={t("tasks.confirm_drop_desc", { title: task.title })}
+        confirmLabel={t("tasks.mark_dropped")}
+        testId="task-detail-drop-confirm"
+      />
+    </div>
+  );
+}