@agentprojectcontext/apx 1.80.2 → 1.89.1

package/src/interfaces/web/src/components/code/CodeTerminal.tsx

@@ -1,6 +1,7 @@
 import { useState, useRef, useEffect } from "react";
 import { Terminal as TerminalIcon, Eraser, X } from "lucide-react";
 import { cn } from "../../lib/cn";
+import { toneText } from "../../lib/tone";
 import { Tip } from "../ui/tip";
 import { http } from "../../lib/http";
 import { t } from "../../i18n";
@@ -83,7 +84,7 @@ export function CodeTerminal({
     <div className={cn("flex h-full min-h-0 flex-col bg-card/60", className)} data-testid="code-terminal">
       <div className="flex shrink-0 items-center gap-2 border-b border-border px-3 py-1">
         <TerminalIcon className="size-3 text-muted-foreground" />
-        <span className="flex-1 text-[11px] text-muted-foreground">Terminal</span>
+        <span className="flex-1 text-[11px] text-muted-foreground">{t("code_module.terminal_title")}</span>
         <Tip content={t("code_module.terminal_clear")}>
           <button
             type="button"
@@ -112,8 +113,8 @@ export function CodeTerminal({
             key={i}
             className={cn(
               "whitespace-pre-wrap break-all",
-              l.type === "cmd" && "text-emerald-400",
-              l.type === "err" && "text-rose-400",
+              l.type === "cmd" && toneText.emerald,
+              l.type === "err" && toneText.rose,
               l.type === "out" && "text-foreground/90",
             )}
           >
@@ -123,7 +124,7 @@ export function CodeTerminal({
         <div ref={bottomRef} />
       </div>
       <div className="flex shrink-0 items-center border-t border-border px-3 py-1">
-        <span className="mr-2 text-[11px] text-emerald-400 font-mono">$</span>
+        <span className={cn("mr-2 font-mono text-[11px]", toneText.emerald)}>$</span>
         <input
           ref={inputRef}
           value={input}

package/src/interfaces/web/src/components/code/NewCodeSessionDialog.tsx

@@ -0,0 +1,164 @@
+import { useEffect, useState } from "react";
+import useSWR from "swr";
+import { Bot } from "lucide-react";
+import { Agents } from "../../lib/api";
+import { Button, Dialog, Field, Input } from "../ui";
+import { UiSelect } from "../UiSelect";
+import { CodeProjectPicker } from "./CodeProjectPicker";
+import { t } from "../../i18n";
+import type { CodeMode } from "../../lib/api/code";
+import type { ProjectEntry } from "../../types/daemon";
+
+export const SUPER_AGENT_VALUE = "super-agent";
+
+export interface NewSessionValues {
+  pid: string;
+  title: string;
+  agentSlug: string | null;
+  mode: CodeMode;
+}
+
+interface Props {
+  open: boolean;
+  projects: ProjectEntry[];
+  /** Project the picker opens on — the one in view, or the first registered. */
+  defaultPid: string;
+  busy?: boolean;
+  onClose: () => void;
+  onCreate: (values: NewSessionValues) => void;
+}
+
+// Where a code session is configured: which project it works in, and who
+// answers in it.
+//
+// The agent used to be a bare dropdown pinned under the session list, which
+// silently re-pointed whichever session happened to be open — so it read as a
+// global "who am I talking to" setting while behaving as a per-session one, and
+// gave no clue that it was the thing to set BEFORE starting. It belongs here,
+// at the one moment the choice is a decision: creating the session.
+export function NewCodeSessionDialog({
+  open,
+  projects,
+  defaultPid,
+  busy,
+  onClose,
+  onCreate,
+}: Props) {
+  const [pid, setPid] = useState(defaultPid);
+  const [title, setTitle] = useState("");
+  const [agentSlug, setAgentSlug] = useState(SUPER_AGENT_VALUE);
+  const [mode, setMode] = useState<CodeMode>("build");
+
+  // Reopening starts from the project in view, never from a stale pick.
+  useEffect(() => {
+    if (!open) return;
+    setPid(defaultPid);
+    setTitle("");
+    setAgentSlug(SUPER_AGENT_VALUE);
+    setMode("build");
+  }, [open, defaultPid]);
+
+  // Agents are per project, so the roster follows the picker above it.
+  const agents = useSWR(open && pid ? ["agents", pid] : null, () => Agents.list(pid));
+
+  // A slug picked for another project would be silently dropped by the daemon.
+  useEffect(() => {
+    if (!agents.data) return;
+    if (agentSlug === SUPER_AGENT_VALUE) return;
+    if (!agents.data.some((a) => a.slug === agentSlug)) setAgentSlug(SUPER_AGENT_VALUE);
+  }, [agents.data, agentSlug]);
+
+  const agentOptions = [
+    {
+      value: SUPER_AGENT_VALUE,
+      label: t("modules_ui.code_super_agent"),
+      icon: Bot,
+      description: t("modules_ui.code_super_agent_desc"),
+    },
+    ...(agents.data || []).map((a) => ({
+      value: a.slug,
+      label: a.name || a.slug,
+      icon: Bot,
+      description: a.description || a.role || a.slug,
+    })),
+  ];
+
+  const modeOptions = [
+    { value: "build", label: t("code_module.mode_build"), description: t("code_module.mode_build_hint") },
+    { value: "plan", label: t("code_module.mode_plan"), description: t("code_module.mode_plan_hint") },
+  ];
+
+  const submit = () => {
+    if (!pid) return;
+    onCreate({
+      pid,
+      title: title.trim() || t("code_module.untitled"),
+      agentSlug: agentSlug === SUPER_AGENT_VALUE ? null : agentSlug,
+      mode,
+    });
+  };
+
+  return (
+    <Dialog
+      open={open}
+      onClose={onClose}
+      title={t("code_module.new_session")}
+      description={t("code_module.new_session_desc")}
+      footer={
+        <>
+          <Button variant="ghost" onClick={onClose} disabled={busy}>
+            {t("common.cancel")}
+          </Button>
+          <Button
+            variant="primary"
+            onClick={submit}
+            loading={busy}
+            disabled={!pid}
+            data-testid="code-new-session-submit"
+          >
+            {t("code_module.create_session")}
+          </Button>
+        </>
+      }
+    >
+      <div className="space-y-3" data-testid="code-new-session-dialog">
+        <Field label={t("code_module.field_project")} hint={t("code_module.field_project_hint")}>
+          {/* allowAll=false: a session has to live somewhere. */}
+          <CodeProjectPicker
+            projects={projects}
+            value={pid}
+            onChange={setPid}
+            disabled={busy}
+            allowAll={false}
+          />
+        </Field>
+
+        <Field label={t("code_module.field_agent")} hint={t("code_module.field_agent_hint")}>
+          <UiSelect
+            value={agentSlug}
+            onChange={setAgentSlug}
+            options={agentOptions}
+            disabled={busy}
+            showIcon
+          />
+        </Field>
+
+        <Field label={t("code_module.field_mode")}>
+          <UiSelect value={mode} onChange={(m) => setMode(m as CodeMode)} options={modeOptions} disabled={busy} />
+        </Field>
+
+        <Field label={t("code_module.field_title")} hint={t("code_module.field_title_hint")}>
+          <Input
+            autoFocus
+            value={title}
+            placeholder={t("code_module.untitled")}
+            onChange={(e) => setTitle(e.target.value)}
+            onKeyDown={(e) => {
+              if (e.key === "Enter") submit();
+            }}
+          />
+        </Field>
+      </div>
+    </Dialog>
+  );
+}

package/src/interfaces/web/src/components/commitments/CommitmentDetail.tsx

@@ -0,0 +1,162 @@
+import { useState } from "react";
+import { Check, Pencil, Trash2, X } from "lucide-react";
+import { Commitments, type CommitmentEntry } from "../../lib/api/commitments";
+import { Badge, Button, Tip } from "../ui";
+import { ReadOnlyBlock } from "../ReadOnlyBlock";
+import { ConfirmDialog } from "../common/ConfirmDialog";
+import { useToast } from "../Toast";
+import { CommitmentIcon, CommitmentBadge, commitmentFace, commitmentTint, isOverdue } from "./commitmentState";
+import { relativeWhen } from "../../lib/when";
+import { cn } from "../../lib/cn";
+import { t } from "../../i18n";
+import { toneText } from "../../lib/tone";
+
+/**
+ * Right column: the selected promise, open by default.
+ *
+ * The date history is the point of this screen and gets its own section, the
+ * way a routine's executions do: "moved twice, then missed" is a fact about a
+ * relationship, and it only exists because the log kept every date.
+ */
+export function CommitmentDetail({
+  commitment: c, pid, projectName, onEdit, onChanged,
+}: {
+  commitment: CommitmentEntry;
+  pid: string;
+  projectName?: string;
+  onEdit: () => void;
+  onChanged: () => void;
+}) {
+  const toast = useToast();
+  const [busy, setBusy] = useState(false);
+  // Consequential verbs confirm through a dialog — same rule as tasks.
+  const [confirm, setConfirm] = useState<"kept" | "missed" | "dropped" | null>(null);
+  const face = commitmentFace(c);
+  const due = c.due ? String(c.due).slice(0, 10) : null;
+
+  const act = async (fn: () => Promise<unknown>, label: string) => {
+    setBusy(true);
+    try { await fn(); toast.success(label); onChanged(); }
+    catch (e) { toast.error(e instanceof Error ? e.message : String(e)); }
+    finally { setBusy(false); }
+  };
+
+  return (
+    <div className="flex h-full min-h-0 flex-col" data-testid="commitment-detail">
+      <div className="min-h-0 flex-1 space-y-4 overflow-y-auto p-4">
+        <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", commitmentTint(face))}>
+              <CommitmentIcon face={face} className="size-4" />
+            </span>
+            {/* Same as tasks: the name outranks the chips for width. */}
+            <h3 className="truncate text-base font-semibold" title={c.counterparty}>{c.counterparty}</h3>
+          </div>
+          <div className="flex shrink-0 items-center gap-2">
+            <Button size="sm" variant="secondary" data-testid="commitment-detail-edit" onClick={onEdit}>
+              <Pencil size={13} /> {t("common.edit")}
+            </Button>
+            {c.state === "open" && (
+              <>
+                <Button size="sm" variant="primary" loading={busy} onClick={() => setConfirm("kept")}>
+                  <Check size={13} /> {t("project.commitments.mark_kept")}
+                </Button>
+                <Tip content={t("project.commitments.mark_missed")}>
+                  <Button size="sm" variant="secondary" loading={busy} aria-label={t("project.commitments.mark_missed")} data-testid="commitment-detail-missed" onClick={() => setConfirm("missed")}>
+                    <X size={13} />
+                  </Button>
+                </Tip>
+              </>
+            )}
+            <Tip content={t("project.commitments.mark_dropped")}>
+              <Button size="sm" variant="destructive" loading={busy} aria-label={t("project.commitments.mark_dropped")} data-testid="commitment-detail-drop" onClick={() => setConfirm("dropped")}>
+                <Trash2 size={13} />
+              </Button>
+            </Tip>
+          </div>
+        </div>
+
+        <div className="flex flex-wrap items-center gap-x-4 gap-y-1 text-xs text-muted-fg">
+          <CommitmentBadge face={face} />
+          {projectName && <Badge tone="info">{projectName.split("/").pop() || projectName}</Badge>}
+          <span className="font-mono text-[10px]">{c.id}</span>
+          {due ? (
+            <span className={cn(isOverdue(c) && cn("font-medium", toneText.red))}>
+              {t("project.global_tasks.field_due")} {due}
+            </span>
+          ) : (
+            <span className="opacity-60">{t("project.commitments.no_date")}</span>
+          )}
+          {c.origin_channel && <span>{t("project.tasks.via")} {c.origin_channel}</span>}
+          {c.renegotiated_count ? (
+            <Badge tone="warning">{t("project.commitments.moved")} ×{c.renegotiated_count}</Badge>
+          ) : null}
+          <span title={new Date(c.created_at).toLocaleString()}>
+            {t("project.commitments.promised")} {relativeWhen(c.promised_at || c.created_at, t as never)}
+          </span>
+          <span title={new Date(c.updated_at).toLocaleString()}>
+            {t("tasks.field_updated")} {relativeWhen(c.updated_at, t as never)}
+          </span>
+        </div>
+
+        <ReadOnlyBlock title={t("project.commitments.field_what")} body={c.body} />
+        {c.note ? <ReadOnlyBlock title={t("project.commitments.field_note")} body={c.note} /> : null}
+
+        {/* Every date this promise has ever had. Moving a date twice is a fact
+            about the relationship, and it is only visible because it is kept. */}
+        <div className="space-y-1">
+          <div className="text-[11px] font-semibold uppercase tracking-wide text-muted-fg">
+            {t("project.commitments.history_title")}
+          </div>
+          {c.history?.length ? (
+            <ul className="space-y-1 text-xs">
+              {c.history.map((h, i) => (
+                <li key={`${h.moved_at}-${i}`} className="flex flex-wrap items-baseline gap-x-2 rounded-md border border-border bg-muted/20 px-3 py-1.5">
+                  <span className="font-medium">{h.due ? String(h.due).slice(0, 10) : t("project.commitments.no_date")}</span>
+                  <span className="text-muted-fg" title={new Date(h.moved_at).toLocaleString()}>
+                    → {relativeWhen(h.moved_at, t as never)}
+                  </span>
+                  {h.note && <span className="text-muted-fg">— {h.note}</span>}
+                </li>
+              ))}
+            </ul>
+          ) : (
+            <p className="rounded-md border border-dashed border-border px-3 py-1.5 text-xs text-muted-fg">
+              {t("project.commitments.history_empty")}
+            </p>
+          )}
+        </div>
+      </div>
+
+      <ConfirmDialog
+        open={confirm === "kept"}
+        onClose={() => setConfirm(null)}
+        onConfirm={() => act(() => Commitments.kept(pid, c.id), t("project.commitments.mark_kept"))}
+        destructive={false}
+        title={t("project.commitments.confirm_kept_title")}
+        description={t("project.commitments.confirm_kept_desc", { who: c.counterparty })}
+        confirmLabel={t("project.commitments.mark_kept")}
+        testId="commitment-detail-kept-confirm"
+      />
+      <ConfirmDialog
+        open={confirm === "missed"}
+        onClose={() => setConfirm(null)}
+        onConfirm={() => act(() => Commitments.missed(pid, c.id), t("project.commitments.mark_missed"))}
+        destructive={false}
+        title={t("project.commitments.confirm_missed_title")}
+        description={t("project.commitments.confirm_missed_desc", { who: c.counterparty })}
+        confirmLabel={t("project.commitments.mark_missed")}
+        testId="commitment-detail-missed-confirm"
+      />
+      <ConfirmDialog
+        open={confirm === "dropped"}
+        onClose={() => setConfirm(null)}
+        onConfirm={() => act(() => Commitments.drop(pid, c.id), t("project.commitments.dropped_toast"))}
+        title={t("project.commitments.confirm_dropped_title")}
+        description={t("project.commitments.confirm_dropped_desc", { who: c.counterparty })}
+        confirmLabel={t("project.commitments.mark_dropped")}
+        testId="commitment-detail-drop-confirm"
+      />
+    </div>
+  );
+}

package/src/interfaces/web/src/components/commitments/CommitmentFormDialog.tsx

@@ -0,0 +1,158 @@
+import { useEffect, useState } from "react";
+import { Commitments, type CommitmentEntry } from "../../lib/api/commitments";
+import { Button, Dialog, Field, Input } from "../ui";
+import { UiSelect } from "../UiSelect";
+import { useToast } from "../Toast";
+import { t } from "../../i18n";
+
+/**
+ * The one form for a promise — recording and correcting.
+ *
+ * Editing matters more here than on tasks: a promise is written down from
+ * something you half-heard in a conversation, so the name and the date are
+ * exactly the fields that come out wrong.
+ *
+ * Moving the date of an OPEN promise goes through `renegotiate`, never a
+ * silent patch: the previous date is the record of what you told the person,
+ * and quietly overwriting it is how "I moved it three times" disappears.
+ */
+export function CommitmentFormDialog({
+  open,
+  onClose,
+  fixedPid,
+  projects,
+  editing,
+  onSaved,
+}: {
+  open: boolean;
+  onClose: () => void;
+  /** Project the screen is pinned to. Omitted on the cross-project screen. */
+  fixedPid?: string;
+  projects?: { id: string | number; name?: string | null; path?: string }[];
+  editing?: { pid: string; commitment: CommitmentEntry } | null;
+  onSaved: () => void;
+}) {
+  const toast = useToast();
+  const [who, setWho] = useState("");
+  const [what, setWhat] = useState("");
+  const [due, setDue] = useState("");
+  const [target, setTarget] = useState("");
+  const [busy, setBusy] = useState(false);
+
+  const pid = editing?.pid ?? fixedPid ?? target;
+  const current = editing?.commitment;
+
+  useEffect(() => {
+    if (!open) return;
+    setWho(current?.counterparty ?? "");
+    setWhat(current?.body ?? "");
+    setDue(current?.due ? String(current.due).slice(0, 10) : "");
+    setTarget(fixedPid ?? String(projects?.[0]?.id ?? ""));
+  }, [open, current, fixedPid, projects]);
+
+  const save = async () => {
+    if (!who.trim() || !what.trim() || !pid) return;
+    setBusy(true);
+    try {
+      if (current) {
+        const patch: Partial<CommitmentEntry> = {};
+        if (who.trim() !== current.counterparty) patch.counterparty = who.trim();
+        if (what.trim() !== current.body) patch.body = what.trim();
+        const wasDue = current.due ? String(current.due).slice(0, 10) : "";
+        // MOVING a date on a live promise is a renegotiation, and it keeps the
+        // old one in `history`. Setting the first date, clearing it, or
+        // touching an already-closed promise is a plain correction — recording
+        // "moved ×1" for a promise that never had a date is a lie about the
+        // relationship.
+        if (due && wasDue && due !== wasDue && current.state === "open") {
+          await Commitments.renegotiate(pid, current.id, new Date(due).toISOString());
+        } else if (due !== wasDue) {
+          patch.due = due ? new Date(due).toISOString() : null;
+        }
+        if (Object.keys(patch).length) await Commitments.patch(pid, current.id, patch);
+        toast.success(t("common.saved"));
+      } else {
+        await Commitments.add(String(pid), {
+          counterparty: who.trim(),
+          body: what.trim(),
+          // Optional even though it is the useful part — refusing "I promised
+          // Ana the quote, no date yet" means the promise goes unrecorded,
+          // which is strictly worse.
+          due: due ? new Date(due).toISOString() : null,
+        });
+        toast.success(t("project.commitments.created"));
+      }
+      onSaved();
+      onClose();
+    } catch (e) {
+      toast.error(e instanceof Error ? e.message : String(e));
+    } finally {
+      setBusy(false);
+    }
+  };
+
+  return (
+    <Dialog
+      open={open}
+      onClose={onClose}
+      title={current ? t("project.commitments.edit_title") : t("project.commitments.add_title")}
+      description={current ? undefined : t("project.commitments.add_hint")}
+      footer={
+        <>
+          <Button onClick={onClose}>{t("common.cancel")}</Button>
+          <Button
+            variant="primary"
+            data-testid="commitment-submit"
+            loading={busy}
+            disabled={!who.trim() || !what.trim() || !pid}
+            onClick={save}
+          >
+            {current ? t("common.save") : t("project.commitments.add")}
+          </Button>
+        </>
+      }
+    >
+      <div className="flex flex-col gap-3">
+        {/* 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
+            data-testid="commitment-who"
+            value={who}
+            onChange={(e) => setWho(e.target.value)}
+            placeholder="Ana"
+            autoFocus
+          />
+        </Field>
+        <Field label={t("project.commitments.field_what")}>
+          <Input
+            data-testid="commitment-what"
+            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()) save(); }}
+          />
+        </Field>
+        <Field
+          label={t("project.commitments.field_due")}
+          hint={
+            current?.state === "open" && current?.due
+              ? t("project.commitments.field_due_move_hint")
+              : t("project.commitments.field_due_hint")
+          }
+        >
+          <Input type="date" value={due} onChange={(e) => setDue(e.target.value)} />
+        </Field>
+        {!fixedPid && !current ? (
+          <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 || String(p.id) }))}
+            />
+          </Field>
+        ) : null}
+      </div>
+    </Dialog>
+  );
+}