@agentprojectcontext/apx 1.81.0 → 1.89.1

package/src/interfaces/web/src/screens/base/AgentDefaultsTab.tsx

@@ -4,6 +4,7 @@ import { Bot, Crown, Plus, Sparkles, Trash2, Wrench, Pencil, RotateCcw } from "l
 import { Agents } from "../../lib/api";
 import { Section } from "../../components/Section";
 import { Badge, Button, Dialog, Empty, Field, Input, Loading, Switch, Textarea } from "../../components/ui";
+import { ConfirmDialog } from "../../components/common/ConfirmDialog";
 import { Tooltip, TooltipContent, TooltipTrigger } from "../../components/ui/tooltip";
 import { useToast } from "../../components/Toast";
 import { t } from "../../i18n";
@@ -26,13 +27,12 @@ export function AgentDefaultsTab() {
   const items = (vault.data || []) as VaultAgent[];
 
   const [editing, setEditing] = useState<VaultAgent | "new" | null>(null);
+  const [confirm, setConfirm] = useState<VaultAgent | null>(null);
 
-  const remove = async (a: VaultAgent) => {
+  const doRemove = async () => {
+    if (!confirm) return;
+    const a = confirm;
     const tombstoning = a.source !== "user";
-    const msg = tombstoning
-      ? t("base.defaults_tombstone_msg", { slug: a.slug })
-      : t("base.defaults_delete_msg", { slug: a.slug });
-    if (!confirm(msg)) return;
     try {
       await Agents.vaultRemove(a.slug);
       toast.success(tombstoning ? t("base.defaults_hidden") : t("base.defaults_deleted"));
@@ -60,7 +60,7 @@ export function AgentDefaultsTab() {
     >
       {vault.isLoading && <Loading />}
       {!vault.isLoading && items.length === 0 && (
-        <Empty>{t("base.defaults_empty")}</Empty>
+        <Empty icon={Bot}>{t("base.defaults_empty")}</Empty>
       )}
       <div className="grid gap-3 sm:grid-cols-2 lg:grid-cols-3">
         {items.map((a) => {
@@ -86,7 +86,7 @@ export function AgentDefaultsTab() {
                       <IconBtn label={t("base.defaults_edit")} onClick={() => setEditing(a)} variant="ghost"><Pencil size={13} /></IconBtn>
                       <IconBtn
                         label={a.source === "user" ? t("base.defaults_delete") : t("base.defaults_hide")}
-                        onClick={() => remove(a)}
+                        onClick={() => setConfirm(a)}
                         variant="ghost-destructive"
                       >
                         <Trash2 size={13} />
@@ -99,8 +99,14 @@ export function AgentDefaultsTab() {
                 ? <Badge tone="info">{a.model}</Badge>
                 : <span className="text-[10px] text-muted-fg">{t("agents_ui.model_router_default")}</span>}
               {a.description && <p className="line-clamp-3 text-xs text-muted-fg">{a.description}</p>}
-              <div className="flex flex-wrap gap-1">
-                {a.role && <Badge>{a.role}</Badge>}
+              <div className="flex min-w-0 flex-wrap gap-1">
+                {/* Clipped for the same reason as the agent cards: a Role field
+                    holding a whole sentence used to run past the card edge. */}
+                {a.role && (
+                  <Badge className="min-w-0 max-w-full shrink">
+                    <span className="min-w-0 truncate" title={a.role}>{a.role}</span>
+                  </Badge>
+                )}
                 {a.skills?.map((s) => <span key={s} className="inline-flex items-center gap-0.5 rounded bg-muted px-1 py-0.5 text-[9px] text-muted-fg"><Sparkles size={9} /> {s}</span>)}
                 {a.tools?.map((t) => <span key={t} className="inline-flex items-center gap-0.5 rounded bg-muted px-1 py-0.5 text-[9px] text-muted-fg"><Wrench size={9} /> {t}</span>)}
               </div>
@@ -116,6 +122,21 @@ export function AgentDefaultsTab() {
           onSaved={() => { setEditing(null); vault.mutate(); }}
         />
       )}
+
+      <ConfirmDialog
+        open={!!confirm}
+        onClose={() => setConfirm(null)}
+        onConfirm={doRemove}
+        title={
+          confirm
+            ? confirm.source !== "user"
+              ? t("base.defaults_tombstone_msg", { slug: confirm.slug })
+              : t("base.defaults_delete_msg", { slug: confirm.slug })
+            : ""
+        }
+        confirmLabel={t("common.delete")}
+        testId="agent-defaults-delete-confirm"
+      />
     </Section>
   );
 }

package/src/interfaces/web/src/screens/base/CommitmentsTab.tsx

@@ -1,29 +1,33 @@
-import { useState } from "react";
-import { useNavigate } from "react-router-dom";
-import { Plus } from "lucide-react";
-import { Commitments, type CommitmentState } from "../../lib/api/commitments";
+import { useEffect, useState } from "react";
+import { Check, Handshake, MousePointerClick, Plus, Trash2 } from "lucide-react";
+import { Commitments, type CommitmentEntry, type CommitmentState } from "../../lib/api/commitments";
+import { useSearchParams } from "react-router-dom";
 import { Section } from "../../components/Section";
-import { PagedList, usePagedQuery } from "../../components/Pager";
-import { Badge, Button, Dialog, Empty, Field, FilterChips, Input, Loading } from "../../components/ui";
-import { UiSelect } from "../../components/UiSelect";
-import { useProjects } from "../../hooks/useProjects";
+import { Pager, usePagedQuery } from "../../components/Pager";
+import { Button, Empty, FilterChips, Loading } from "../../components/ui";
+import { CommitmentList } from "../../components/commitments/CommitmentList";
+import { CommitmentDetail } from "../../components/commitments/CommitmentDetail";
+import { CommitmentFormDialog } from "../../components/commitments/CommitmentFormDialog";
+import { BulkActionBar } from "../../components/common/BulkActionBar";
+import { ConfirmDialog } from "../../components/common/ConfirmDialog";
 import { useToast } from "../../components/Toast";
+import { useProjects } from "../../hooks/useProjects";
 import { t } from "../../i18n";
 
 /**
- * Commitments — what was promised, to whom, by when.
+ * Commitments — what was promised, to whom, by when. Master-detail, same frame
+ * as Tasks and Routines.
  *
  * Sits next to Tasks rather than inside it. The two answer different
- * questions: a task is work, a commitment is someone waiting. Overdue is the
- * default filter for exactly that reason — the expensive failure here is
+ * questions: a task is work, a commitment is someone waiting. Overdue is a
+ * one-click filter for exactly that reason — the expensive failure here is
  * social, and it is silent unless something surfaces it.
  *
  * `pid` omitted = every project, which is the view that matches how promises
  * are actually made.
  */
 export function CommitmentsTab({ pid }: { pid?: string }) {
-  const navigate = useNavigate();
-  const toast = useToast();
+  const [params, setParams] = useSearchParams();
   const [state, setState] = useState<CommitmentState | "all">("open");
   const [overdueOnly, setOverdueOnly] = useState(false);
 
@@ -31,12 +35,14 @@ export function CommitmentsTab({ pid }: { pid?: string }) {
   // from conversation: the moment you remember one is rarely the moment you
   // are talking to it.
   const [adding, setAdding] = useState(false);
-  const [who, setWho] = useState("");
-  const [what, setWhat] = useState("");
-  const [due, setDue] = useState("");
-  const [target, setTarget] = useState(pid ?? "");
-  const [busy, setBusy] = useState(false);
+  const [editing, setEditing] = useState<{ pid: string; commitment: CommitmentEntry } | null>(null);
   const { projects } = useProjects();
+  const toast = useToast();
+
+  // Multi-select — keyed by id, carries the resolved pid + item so a bulk verb
+  // survives the paginator and works across projects in the global view.
+  const [checked, setChecked] = useState<Map<string, { pid: string; c: CommitmentEntry }>>(new Map());
+  const [bulk, setBulk] = useState<"kept" | "dropped" | null>(null);
 
   const paged = usePagedQuery({
     key: `/api/commitments?pid=${pid ?? "all"}&state=${state}&overdue=${overdueOnly}`,
@@ -45,56 +51,62 @@ export function CommitmentsTab({ pid }: { pid?: string }) {
         ? Commitments.listPage(pid, { state, overdue: overdueOnly, limit, offset })
         : Commitments.globalPage({ state, overdue: overdueOnly, limit, offset }),
     resetKey: `${pid ?? "all"}|${state}|${overdueOnly}`,
+    swr: { dedupingInterval: 0, revalidateOnFocus: true },
   });
 
-  const close = async (
-    projectId: string,
-    id: string,
-    how: "kept" | "missed",
-  ) => {
-    try {
-      await Commitments[how](projectId, id);
-      await paged.mutate();
-    } catch (e) {
-      toast.error((e as Error).message);
-    }
-  };
+  const rowPid = (c: CommitmentEntry) =>
+    pid ?? String((c as { project_id?: string | number }).project_id ?? "");
+  const selectedId = params.get("c_id");
+  const selected = paged.items.find((x) => x.id === selectedId) || null;
 
-  const isOverdue = (c: { state: string; due: string | null }) =>
-    c.state === "open" && !!c.due && c.due < new Date().toISOString();
+  const select = (id: string | null) =>
+    setParams((prev) => {
+      const next = new URLSearchParams(prev);
+      if (id) next.set("c_id", id); else next.delete("c_id");
+      return next;
+    }, { replace: true });
 
-  const resetForm = () => { setWho(""); setWhat(""); setDue(""); setTarget(pid ?? ""); };
+  const toggleCheck = (c: CommitmentEntry) =>
+    setChecked((prev) => {
+      const next = new Map(prev);
+      if (next.has(c.id)) next.delete(c.id);
+      else next.set(c.id, { pid: rowPid(c), c });
+      return next;
+    });
+  const clearChecked = () => setChecked(new Map());
+  const checkedIds = new Set(checked.keys());
 
-  const create = async () => {
-    const projectId = pid ?? target;
-    if (!who.trim() || !what.trim() || !projectId) return;
-    setBusy(true);
-    try {
-      await Commitments.add(String(projectId), {
-        counterparty: who.trim(),
-        body: what.trim(),
-        // A date is optional here even though it is the useful part — refusing
-        // to record "I promised Ana the quote, no date yet" would mean the
-        // promise goes unrecorded, which is strictly worse.
-        due: due ? new Date(due).toISOString() : null,
-      });
-      await paged.mutate();
-      setAdding(false);
-      resetForm();
-    } catch (e) {
-      toast.error((e as Error).message);
-    } finally {
-      setBusy(false);
-    }
+  // A filter switch changes what the ids mean — drop the selection.
+  useEffect(() => { setChecked(new Map()); }, [pid, state, overdueOnly]);
+
+  const runBulk = async (kind: "kept" | "dropped") => {
+    const entries = [...checked.values()];
+    if (entries.length === 0) return;
+    const results = await Promise.allSettled(
+      entries.map(({ pid: p, c }) => (kind === "kept" ? Commitments.kept(p, c.id) : Commitments.drop(p, c.id))),
+    );
+    const failed = results.filter((r) => r.status === "rejected").length;
+    const ok = entries.length - failed;
+    if (ok > 0) toast.success(t(kind === "kept" ? "project.commitments.bulk_kept_toast" : "project.commitments.bulk_dropped_toast", { count: ok }));
+    if (failed > 0) toast.error(t("common.error_generic"));
+    clearChecked();
+    paged.mutate();
   };
 
+  // One promise is always open, and a stale ?c_id heals itself.
+  useEffect(() => {
+    if (paged.items.length === 0) return;
+    if (selectedId && paged.items.some((x) => x.id === selectedId)) return;
+    select(paged.items[0].id);
+  }, [paged.items, selectedId]); // eslint-disable-line react-hooks/exhaustive-deps
+
   return (
     <Section
       fullHeight
       title={t("project.commitments.title")}
       description={t("project.commitments.subtitle")}
       action={
-        <Button size="sm" variant="primary" onClick={() => setAdding(true)}>
+        <Button size="sm" variant="primary" data-testid="commitment-new" onClick={() => setAdding(true)}>
           <Plus size={14} /> {t("project.commitments.add")}
         </Button>
       }
@@ -103,13 +115,15 @@ export function CommitmentsTab({ pid }: { pid?: string }) {
           <FilterChips
             value={state}
             onChange={setState}
+            testIdPrefix="commitment-filter"
             label={t("project.commitments.title")}
-            options={(["open", "kept", "missed", "all"] as const).map((s) => ({
+            options={(["open", "kept", "missed", "dropped", "all"] as const).map((s) => ({
               value: s, label: t(`project.commitments.state.${s}`),
             }))}
           />
           <Button
             size="sm"
+            className="ml-2"
             variant={overdueOnly ? "primary" : "ghost"}
             onClick={() => setOverdueOnly((v) => !v)}
           >
@@ -119,121 +133,89 @@ export function CommitmentsTab({ pid }: { pid?: string }) {
       }
     >
       {paged.isLoading && <Loading />}
-      {!paged.isLoading && paged.total === 0 && <Empty>{t("project.commitments.empty")}</Empty>}
+      {!paged.isLoading && paged.total === 0 && <Empty icon={Handshake}>{t("project.commitments.empty")}</Empty>}
 
-      <PagedList paged={paged} fullHeight>
-        <ul className="space-y-2 text-sm" data-testid="commitments-list">
-          {paged.items.map((c) => {
-            const projectId = String(
-              (c as { project_id?: string | number }).project_id ?? pid ?? "",
-            );
-            const projectName = (c as { project_name?: string }).project_name;
-            return (
-              <li
-                key={`${projectId}-${c.id}`}
-                className={`flex items-start gap-3 rounded-md border px-3 py-2 ${
-                  isOverdue(c) ? "border-red-500/40 bg-red-500/5" : "border-border bg-muted/30"
-                }`}
-              >
-                {projectName ? (
-                  <button
-                    type="button"
-                    onClick={() => navigate(`/p/${projectId}/commitments`)}
-                    title={t("project.global_tasks.go_project")}
-                  >
-                    <Badge tone="info">{projectName.split("/").pop() || projectId}</Badge>
-                  </button>
-                ) : null}
-
-                <div className="min-w-0 flex-1">
-                  <div className="flex flex-wrap items-baseline gap-2">
-                    {/* The counterparty leads. "Who is waiting" is the whole
-                        reason this is not a task. */}
-                    <span className="font-medium">{c.counterparty}</span>
-                    <span className="opacity-80">— {c.body}</span>
-                  </div>
-                  <div className="mt-0.5 flex flex-wrap items-center gap-2 text-xs text-muted-fg">
-                    {c.due ? (
-                      <span className={isOverdue(c) ? "font-medium text-red-500" : ""}>
-                        {isOverdue(c) ? t("project.commitments.overdue") : t("project.global_tasks.due")}{" "}
-                        {c.due.slice(0, 10)}
-                      </span>
-                    ) : (
-                      <span className="opacity-60">{t("project.commitments.no_date")}</span>
-                    )}
-                    {c.origin_channel ? <span>· {c.origin_channel}</span> : null}
-                    {c.renegotiated_count ? (
-                      <Badge tone="warning">
-                        {t("project.commitments.moved")} ×{c.renegotiated_count}
-                      </Badge>
-                    ) : null}
-                    {c.state !== "open" ? <Badge>{t(`project.commitments.state.${c.state}`)}</Badge> : null}
-                  </div>
-                </div>
-
-                {c.state === "open" && projectId ? (
-                  <div className="flex shrink-0 gap-1">
-                    <Button size="sm" variant="ghost" onClick={() => close(projectId, c.id, "kept")}>
-                      {t("project.commitments.mark_kept")}
-                    </Button>
-                    <Button size="sm" variant="ghost" onClick={() => close(projectId, c.id, "missed")}>
-                      {t("project.commitments.mark_missed")}
-                    </Button>
-                  </div>
-                ) : null}
-              </li>
-            );
-          })}
-        </ul>
-      </PagedList>
-
-      <Dialog
-        open={adding}
-        onClose={() => { setAdding(false); resetForm(); }}
-        title={t("project.commitments.add_title")}
-        description={t("project.commitments.add_hint")}
-        footer={
-          <>
-            <Button onClick={() => { setAdding(false); resetForm(); }}>{t("common.cancel")}</Button>
-            <Button
-              variant="primary"
-              loading={busy}
-              disabled={!who.trim() || !what.trim() || !(pid ?? target)}
-              onClick={create}
-            >
-              {t("project.commitments.add")}
-            </Button>
-          </>
-        }
-      >
-        <div className="flex flex-col gap-3 p-5">
-          {/* Counterparty first — it is what makes this a commitment and not a
-              task, so the form asks for it before anything else. */}
-          <Field label={t("project.commitments.field_who")} hint={t("project.commitments.field_who_hint")}>
-            <Input value={who} onChange={(e) => setWho(e.target.value)} placeholder="Ana" autoFocus />
-          </Field>
-          <Field label={t("project.commitments.field_what")}>
-            <Input
-              value={what}
-              onChange={(e) => setWhat(e.target.value)}
-              placeholder={t("project.commitments.field_what_ph")}
-              onKeyDown={(e) => { if (e.key === "Enter" && who.trim() && what.trim()) create(); }}
-            />
-          </Field>
-          <Field label={t("project.commitments.field_due")} hint={t("project.commitments.field_due_hint")}>
-            <Input type="date" value={due} onChange={(e) => setDue(e.target.value)} />
-          </Field>
-          {!pid ? (
-            <Field label={t("project.commitments.field_project")}>
-              <UiSelect
-                value={String(target)}
-                onChange={setTarget}
-                options={projects.map((p) => ({ value: String(p.id), label: p.name || p.path }))}
+      {paged.items.length > 0 && (
+        <div className={"flex min-h-0 flex-1 flex-col overflow-hidden rounded-lg border border-border lg:flex-row"}>
+          <CommitmentList
+            className={"max-h-64 shrink-0 border-b border-border lg:h-full lg:max-h-none lg:w-[280px] lg:border-b-0 lg:border-r"}
+            commitments={paged.items}
+            pid={rowPid}
+            selectedId={selected?.id ?? null}
+            onSelect={select}
+            onEdit={(c) => setEditing({ pid: rowPid(c), commitment: c })}
+            onChanged={() => paged.mutate()}
+            checkedIds={checkedIds}
+            onToggleCheck={toggleCheck}
+            footer={
+              <Pager
+                page={paged.page}
+                pageCount={paged.pageCount}
+                total={paged.total}
+                start={paged.start}
+                end={paged.end}
+                pageSize={paged.pageSize}
+                onPage={paged.setPage}
+                onPageSize={paged.setPageSize}
               />
-            </Field>
-          ) : null}
+            }
+          />
+          <div className="min-h-0 min-w-0 flex-1 overflow-hidden">
+            {selected ? (
+              <CommitmentDetail
+                key={`${rowPid(selected)}-${selected.id}`}
+                commitment={selected}
+                pid={rowPid(selected)}
+                projectName={pid ? undefined : (selected as { project_name?: string }).project_name}
+                onEdit={() => setEditing({ pid: rowPid(selected), commitment: selected })}
+                onChanged={() => paged.mutate()}
+              />
+            ) : (
+              <Empty fill icon={MousePointerClick}>{t("project.commitments.detail_empty")}</Empty>
+            )}
+          </div>
         </div>
-      </Dialog>
+      )}
+
+      <CommitmentFormDialog
+        open={adding || !!editing}
+        onClose={() => { setAdding(false); setEditing(null); }}
+        fixedPid={pid}
+        projects={projects}
+        editing={editing}
+        onSaved={() => paged.mutate()}
+      />
+
+      <BulkActionBar
+        count={checked.size}
+        countLabel={t("project.commitments.bulk_selected", { count: checked.size })}
+        actions={[
+          { key: "kept", label: t("project.commitments.mark_kept"), icon: <Check size={14} />, variant: "secondary", onClick: () => setBulk("kept"), testId: "commitment-bulk-kept" },
+          { key: "dropped", label: t("project.commitments.mark_dropped"), icon: <Trash2 size={14} />, variant: "destructive", onClick: () => setBulk("dropped"), testId: "commitment-bulk-drop" },
+        ]}
+        onClear={clearChecked}
+        clearLabel={t("project.commitments.bulk_clear")}
+        testId="commitment-bulk-bar"
+      />
+      <ConfirmDialog
+        open={bulk === "kept"}
+        onClose={() => setBulk(null)}
+        onConfirm={() => runBulk("kept")}
+        destructive={false}
+        title={t("project.commitments.confirm_bulk_kept_title", { count: checked.size })}
+        description={t("project.commitments.confirm_bulk_kept_desc", { count: checked.size })}
+        confirmLabel={t("project.commitments.mark_kept")}
+        testId="commitment-bulk-kept-confirm"
+      />
+      <ConfirmDialog
+        open={bulk === "dropped"}
+        onClose={() => setBulk(null)}
+        onConfirm={() => runBulk("dropped")}
+        title={t("project.commitments.confirm_bulk_dropped_title", { count: checked.size })}
+        description={t("project.commitments.confirm_bulk_dropped_desc", { count: checked.size })}
+        confirmLabel={t("project.commitments.mark_dropped")}
+        testId="commitment-bulk-drop-confirm"
+      />
     </Section>
   );
 }

package/src/interfaces/web/src/screens/base/LogsTab.tsx

@@ -1,12 +1,13 @@
 import { useMemo, useState } from "react";
 import useSWR from "swr";
-import { ArrowDownLeft, ArrowUpRight, RefreshCw } from "lucide-react";
+import { ArrowDownLeft, ArrowUpRight, RefreshCw, ScrollText, TriangleAlert } from "lucide-react";
 import { Admin, Messages } from "../../lib/api";
 import type { MessageEntry } from "../../types/daemon";
 import { Section } from "../../components/Section";
 import { Badge, Button, Empty, Input, Loading } from "../../components/ui";
 import { UiSelect } from "../../components/UiSelect";
 import { t } from "../../i18n";
+import { toneText } from "../../lib/tone";
 
 const CLAMP = 320;
 
@@ -58,8 +59,8 @@ function LogRow({ m }: { m: MessageEntry }) {
     <li className="flex items-start gap-3 rounded-md border border-border bg-muted/30 px-3 py-2">
       <span className="mt-0.5 shrink-0">
         {m.direction === "in"
-          ? <ArrowDownLeft size={14} className="text-blue-400" />
-          : <ArrowUpRight size={14} className="text-emerald-400" />}
+          ? <ArrowDownLeft size={14} className={toneText.blue} />
+          : <ArrowUpRight size={14} className={toneText.emerald} />}
       </span>
       <div className="min-w-0 flex-1">
         <div className="flex flex-wrap items-center gap-2 text-xs text-muted-fg">
@@ -72,7 +73,7 @@ function LogRow({ m }: { m: MessageEntry }) {
               sentence in a log line is not. */}
           {lifecycleEvent(m) && <Badge tone="success">{lifecycleEvent(m)}</Badge>}
           <span className="font-medium text-foreground">{actorLabel(m)}</span>
-          {model && <span className="font-mono text-[11px] text-sky-400/90">{model}</span>}
+          {model && <span className={`font-mono text-[11px] ${toneText.sky}`}>{model}</span>}
           {tokens !== null && <span className="font-mono text-[11px]">{tokens} tok</span>}
         </div>
         {m.body && (
@@ -82,7 +83,7 @@ function LogRow({ m }: { m: MessageEntry }) {
           <button
             type="button"
             onClick={() => setExpanded((v) => !v)}
-            className="mt-1 text-[11px] font-medium text-sky-400 hover:underline"
+            className={`mt-1 text-[11px] font-medium hover:underline ${toneText.sky}`}
           >
             {expanded ? t("logs.show_less") : t("logs.show_more")}
           </button>
@@ -209,9 +210,9 @@ export function LogsTab({ pid }: { pid?: string }) {
       </div>
 
       {list.isLoading && <Loading />}
-      {list.error && <Empty>{t("logs.error", { msg: (list.error as Error).message })}</Empty>}
+      {list.error && <Empty icon={TriangleAlert}>{t("logs.error", { msg: (list.error as Error).message })}</Empty>}
       {!list.isLoading && !list.error && rows.length === 0 && (
-        <Empty>{ch ? t("logs.no_activity_ch", { ch }) : t("logs.no_activity")}</Empty>
+        <Empty icon={ScrollText}>{ch ? t("logs.no_activity_ch", { ch }) : t("logs.no_activity")}</Empty>
       )}
 
       <ul className="space-y-1 text-sm">