@agentprojectcontext/apx 1.78.0 → 1.80.0

package/src/interfaces/web/src/screens/InboxScreen.tsx

@@ -1,103 +1,133 @@
+import { useEffect, useState } from "react";
 import { useNavigate } from "react-router-dom";
-import { Section } from "../components/Section";
-import { Badge, Button, Empty, Loading } from "../components/ui";
+import { ArrowUpRight, EyeOff, Eye } from "lucide-react";
+import { Button, Loading } from "../components/ui";
+import { Tip } from "../components/ui/tip";
+import { InboxList, rowKey } from "../components/inbox/InboxList";
+import { ChatTab } from "./project/ChatTab";
 import { useInbox } from "../hooks/useInbox";
 import type { InboxRow } from "../lib/api/inbox";
+import type { ChatKey } from "../components/chat/ChatList";
 import { t } from "../i18n";
-import { useState } from "react";
 
 /**
  * The agent inbox — every agent as a conversation, most recent first.
  *
  * A SECOND AXIS over the same data, not a replacement for project navigation:
  * this is the conversational way in, the project rail is the structural one.
- * Clicking a row opens that agent's existing chat rather than re-implementing
- * one here — the thread UI already exists and must not be forked.
+ *
+ * Two panes, like any messaging app: pick on the left, read and reply on the
+ * right. The list used to fill the width and NAVIGATE AWAY on click, so
+ * reading one conversation meant losing the list — which defeats the point of
+ * having an inbox at all. The right pane embeds the real chat surface rather
+ * than a read-only rendering of it: if you can see what an agent said, you can
+ * answer it there and then.
  */
 export function InboxScreen() {
   const navigate = useNavigate();
   const [includeEmpty, setIncludeEmpty] = useState(false);
   const { rows, isLoading } = useInbox(includeEmpty);
+  const [selected, setSelected] = useState<InboxRow | null>(null);
+
+  // Open the most recent conversation on arrival. An inbox that lands on an
+  // empty pane makes you click twice to see the thing you came for.
+  useEffect(() => {
+    if (!selected && rows.length) setSelected(rows[0]);
+  }, [rows, selected]);
+
+  if (isLoading) return <Loading />;
+
+  const pid = selected ? String(selected.project_id ?? 0) : null;
+  const title = selected ? (selected.agent_name || selected.agent_slug) : "";
 
-  const open = (row: InboxRow) => {
+  /**
+   * Which conversation the chat pane should open.
+   *
+   * The super-agent has no per-agent conversation files — it talks on channels,
+   * and its history is the cross-channel ledger — so its row addresses a
+   * THREAD (channel + date). A project agent addresses a conversation. With
+   * neither, fall through to a live session rather than showing nothing.
+   */
+  const selectionFor = (row: InboxRow): ChatKey | undefined => {
     if (row.kind === "super_agent") {
-      navigate("/p/0/chat");
-      return;
+      return row.channel && row.conversation_id
+        ? { kind: "thread", channel: row.channel, threadId: row.conversation_id }
+        : undefined;
     }
-    navigate(`/p/${row.project_id}/agents/${encodeURIComponent(row.agent_slug)}`);
+    return row.conversation_id
+      ? { kind: "conv", agentSlug: row.agent_slug, convId: row.conversation_id }
+      : { kind: "live", agentSlug: row.agent_slug };
   };
 
   return (
-    <Section
-      fullHeight
-      title={t("inbox.title")}
-      description={t("inbox.subtitle")}
-      action={
-        <Button size="sm" variant={includeEmpty ? "primary" : "ghost"} onClick={() => setIncludeEmpty((v) => !v)}>
-          {t("inbox.show_quiet")}
-        </Button>
-      }
-    >
-      {isLoading ? <Loading /> : null}
-      {!isLoading && rows.length === 0 ? <Empty>{t("inbox.empty")}</Empty> : null}
+    <div className="flex h-full min-h-0 flex-col gap-3" data-testid="inbox-screen">
+      <div className="flex shrink-0 items-baseline justify-between gap-3">
+        <div>
+          <h1 className="text-lg font-semibold">{t("inbox.title")}</h1>
+          <p className="text-xs text-muted-fg">{t("inbox.subtitle")}</p>
+        </div>
+        <Tip content={includeEmpty ? t("inbox.hide_quiet") : t("inbox.show_quiet")}>
+          <Button size="sm" variant={includeEmpty ? "primary" : "ghost"} onClick={() => setIncludeEmpty((v) => !v)}>
+            {includeEmpty ? <EyeOff size={14} /> : <Eye size={14} />}
+            <span className="hidden sm:inline">{t("inbox.show_quiet")}</span>
+          </Button>
+        </Tip>
+      </div>
 
-      <ul className="space-y-2" data-testid="inbox-list">
-        {rows.map((row) => (
-          <li key={`${row.project_id ?? "global"}-${row.agent_slug}`}>
-            <button
-              type="button"
-              data-testid={`inbox-row-${row.agent_slug}`}
-              onClick={() => open(row)}
-              className={`flex w-full items-start gap-3 rounded-md border px-3 py-2 text-left transition ${
-                row.pinned
-                  ? "border-primary/60 bg-primary/5 hover:bg-primary/10"
-                  : "border-border bg-muted/30 hover:bg-muted/50"
-              }`}
-            >
-              <span className="mt-0.5 text-lg leading-none">{row.agent_emoji || "🤖"}</span>
+      <div className="flex min-h-0 flex-1 overflow-hidden rounded-xl border border-border bg-card/40">
+        <InboxList
+          rows={rows}
+          selectedKey={selected ? rowKey(selected) : null}
+          onSelect={setSelected}
+        />
 
-              <span className="min-w-0 flex-1">
-                <span className="flex min-w-0 items-baseline gap-2">
-                  <span className="truncate font-medium">{row.agent_name || row.agent_slug}</span>
-                  {row.pinned ? <Badge tone="info">{t("inbox.pinned")}</Badge> : null}
-                  {/* On a phone the timestamp rides with the name; there is no
-                      room for a third column. */}
-                  <span className="ml-auto shrink-0 text-xs opacity-50 sm:hidden">
-                    {shortTime(row.last_activity_at)}
-                  </span>
-                </span>
+        <section className="flex min-w-0 flex-1 flex-col">
+          {!selected ? (
+            <div className="flex h-full items-center justify-center p-8">
+              <p className="text-sm text-muted-fg">{t("inbox.empty")}</p>
+            </div>
+          ) : (
+            <>
+              <header className="flex shrink-0 items-center justify-between gap-3 border-b border-border px-4 py-2.5">
+                <div className="min-w-0">
+                  <h2 className="truncate text-sm font-semibold">{title}</h2>
+                  <p className="truncate text-[11px] text-muted-fg">
+                    {selected.project_name || t("inbox.super_agent_scope")}
+                    {selected.channel ? ` · ${selected.channel}` : ""}
+                  </p>
+                </div>
+                {/* The structural way out. The inbox is a second axis over the
+                    same data, so getting from a conversation to its project
+                    must always be one click. */}
+                <Button
+                  size="sm"
+                  variant="ghost"
+                  onClick={() =>
+                    navigate(
+                      selected.kind === "super_agent"
+                        ? "/p/0/chat"
+                        : `/p/${selected.project_id}/agents/${encodeURIComponent(selected.agent_slug)}`,
+                    )}
+                >
+                  {t("inbox.open_in_project")} <ArrowUpRight size={13} />
+                </Button>
+              </header>
 
-                <span className="mt-0.5 flex flex-wrap items-center gap-x-2 text-xs opacity-55">
-                  {row.project_name ? <span className="truncate">{row.project_name}</span> : null}
-                  {row.channel ? <span className="opacity-70">· {row.channel}</span> : null}
-                </span>
-
-                {/* The agent's own last line. Echoing the user's prompt back
-                    would tell them nothing they do not already know. Two lines
-                    on a phone, one on a wide screen. */}
-                <span className="mt-1 block line-clamp-2 text-sm leading-snug opacity-75 sm:line-clamp-1">
-                  {row.preview || t("inbox.no_reply_yet")}
-                </span>
-              </span>
-
-              <span className="hidden shrink-0 text-xs opacity-50 sm:block">
-                {shortTime(row.last_activity_at)}
-              </span>
-            </button>
-          </li>
-        ))}
-      </ul>
-    </Section>
+              <div className="min-h-0 flex-1">
+                {/* Remounted per selection: the chat surface holds its own
+                    session state, and carrying one agent's stream into another
+                    agent's pane would be worse than a moment's reload. */}
+                <ChatTab
+                  key={rowKey(selected)}
+                  pid={pid as string}
+                  hideSidebar
+                  initialSelection={selectionFor(selected)}
+                />
+              </div>
+            </>
+          )}
+        </section>
+      </div>
+    </div>
   );
 }
-
-/** Today → time of day; older → date. Same idea as a messaging app. */
-function shortTime(iso: string): string {
-  if (!iso) return "";
-  const d = new Date(iso);
-  if (Number.isNaN(d.getTime())) return "";
-  const sameDay = new Date().toDateString() === d.toDateString();
-  return sameDay
-    ? d.toLocaleTimeString([], { hour: "2-digit", minute: "2-digit" })
-    : d.toLocaleDateString();
-}

package/src/interfaces/web/src/screens/ProjectScreen.tsx

@@ -5,7 +5,7 @@ import {
   Bot, Heart, Zap, Puzzle, Settings,
   MessagesSquare, KeyRound,
   LayoutDashboard, Boxes, Cpu, ScrollText, History, Brain, FileCode2, Cable,
-  Building2, FileText, FolderTree, Sparkles,
+  Building2, FileText, FolderTree, Sparkles, Handshake,
 } from "lucide-react";
 import { useNavCollapse, type TabSection } from "../components/common/TabNav";
 import { TabLayout } from "../components/common/TabLayout";
@@ -23,6 +23,7 @@ import { ModelsTab } from "./base/ModelsTab";
 import { AgentDefaultsTab } from "./base/AgentDefaultsTab";
 import { SessionsTab } from "./base/SessionsTab";
 import { GlobalTasksTab } from "./base/GlobalTasksTab";
+import { CommitmentsTab } from "./base/CommitmentsTab";
 import { ConfigTab } from "./project/ConfigTab";
 import { AgentsTab } from "./project/AgentsTab";
 import { RoutinesTab } from "./project/RoutinesTab";
@@ -42,7 +43,7 @@ import { SkillsTab } from "./project/SkillsTab";
 
 type NavKey =
   | "" | "chat" | "config" | "telegram"
-  | "agents" | "routines" | "tasks" | "mcps" | "integrations" | "vars" | "logs" | "memories" | "artifacts"
+  | "agents" | "routines" | "tasks" | "commitments" | "mcps" | "integrations" | "vars" | "logs" | "memories" | "artifacts"
   | "structure" | "docs" | "files" | "skills" | "sessions";
 
 export function ProjectScreen() {
@@ -115,6 +116,7 @@ export function ProjectScreen() {
         items: [
           { key: "routines",     label: t("project.nav.routines"),  icon: Heart },
           { key: "tasks",        label: t("project.nav.tasks"),     icon: Zap },
+          { key: "commitments",  label: t("project.nav.commitments"), icon: Handshake },
           { key: "mcps",         label: t("project.nav.mcps"),      icon: Puzzle },
           { key: "integrations", label: "Integrations",             icon: Cable },
           { key: "vars",         label: t("project.nav.vars"),      icon: KeyRound },
@@ -184,6 +186,7 @@ export function ProjectScreen() {
         <Route path="skills"       element={<SkillsTab pid={pid} />} />
         <Route path="routines"     element={<RoutinesTab pid={pid} />} />
         <Route path="tasks"        element={isBase ? <GlobalTasksTab /> : <TasksTab pid={pid} />} />
+        <Route path="commitments"  element={<CommitmentsTab pid={isBase ? undefined : pid} />} />
         <Route path="mcps"         element={<McpsTab pid={pid} />} />
         <Route path="integrations" element={<IntegrationsTab pid={pid} />} />
         <Route path="artifacts"    element={<ArtifactsTab pid={pid} />} />

package/src/interfaces/web/src/screens/SettingsScreen.tsx

@@ -1,13 +1,14 @@
 import { type ReactElement } from "react";
 import { useLocation, useNavigate } from "react-router-dom";
 import {
-  Bot, Cpu, Database, Globe, IdCard, KeyRound, LayoutGrid, MessageCircle, Mic, Monitor, ScrollText, Send, Smartphone, Sparkles, User,
+  BellRing, Bot, Cpu, Database, Globe, IdCard, KeyRound, LayoutGrid, MessageCircle, Mic, Monitor, ScrollText, Send, Smartphone, Sparkles, User,
 } from "lucide-react";
 import { useNavCollapse, type TabSection } from "../components/common/TabNav";
 import { TabLayout } from "../components/common/TabLayout";
 import { IdentityPanel } from "../components/settings/IdentityPanel";
 import { SuperAgentPanel } from "../components/settings/SuperAgentPanel";
 import { ProfilePanel } from "../components/settings/ProfilePanel";
+import { NudgePanel } from "../components/settings/NudgePanel";
 import { MemoryPanel } from "../components/settings/MemoryPanel";
 import { SkillsSettings } from "../components/settings/SkillsSettings";
 import { ModelsTab } from "./base/ModelsTab";
@@ -22,7 +23,7 @@ import { STORAGE } from "../constants";
 import { t } from "../i18n";
 
 type TabKey =
-  | "identity" | "super_agent" | "profile" | "engines" | "memory" | "skills" | "telegram" | "devices"
+  | "identity" | "super_agent" | "profile" | "nudge" | "engines" | "memory" | "skills" | "telegram" | "devices"
   | "voice" | "deck" | "desktop" | "web" | "advanced";
 
 const SECTIONS: TabSection[] = [
@@ -32,11 +33,22 @@ const SECTIONS: TabSection[] = [
       { key: "identity",    label: t("settings.tabs.identity"),    icon: User },
     ],
   },
+  // The super-agent and the three screens that only describe IT: who it is,
+  // what line of work it has, and how often it may speak. The budget is core
+  // rather than profile-owned — it works with no profile installed — but it
+  // governs this agent's outbound messages, so it belongs next to them.
   {
-    title: t("settings.agents_section"),
+    title: t("settings.super_agent_section"),
     items: [
       { key: "super_agent", label: t("settings.tabs.super_agent"), icon: Bot },
       { key: "profile",     label: t("settings.tabs.profile"),     icon: IdCard },
+      { key: "nudge",       label: t("settings.tabs.nudge"),       icon: BellRing },
+    ],
+  },
+  // Shared substrate: every agent uses these, not just the super-agent.
+  {
+    title: t("settings.knowledge_section"),
+    items: [
       { key: "engines",     label: t("settings.tabs.engines"),     icon: Cpu },
       { key: "memory",      label: "Memory (RAG)",                 icon: Database },
       { key: "skills",      label: t("skills_page.title"),         icon: Sparkles },
@@ -76,6 +88,7 @@ const PANELS: Record<TabKey, () => ReactElement> = {
   identity:    () => <IdentityPanel />,
   super_agent: () => <SuperAgentPanel />,
   profile:     () => <ProfilePanel />,
+  nudge:       () => <NudgePanel />,
   engines:     () => <ModelsTab />,
   memory:      () => <MemoryPanel />,
   skills:      () => <SkillsSettings />,
@@ -117,6 +130,7 @@ function tabFromPath(pathname: string): TabKey {
   switch (raw) {
     case "super-agent": return "super_agent";
     case "profile": return "profile";
+    case "nudge": return "nudge";
     case "engines": return "engines";
     case "memory": return "memory";
     case "skills": return "skills";

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

@@ -0,0 +1,239 @@
+import { useState } from "react";
+import { useNavigate } from "react-router-dom";
+import { Plus } from "lucide-react";
+import { Commitments, type CommitmentState } from "../../lib/api/commitments";
+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 { useToast } from "../../components/Toast";
+import { t } from "../../i18n";
+
+/**
+ * Commitments — what was promised, to whom, by when.
+ *
+ * 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
+ * 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 [state, setState] = useState<CommitmentState | "all">("open");
+  const [overdueOnly, setOverdueOnly] = useState(false);
+
+  // Capturing a promise by hand matters even though the agent captures them
+  // 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 { projects } = useProjects();
+
+  const paged = usePagedQuery({
+    key: `/api/commitments?pid=${pid ?? "all"}&state=${state}&overdue=${overdueOnly}`,
+    fetchPage: (limit, offset) =>
+      pid
+        ? Commitments.listPage(pid, { state, overdue: overdueOnly, limit, offset })
+        : Commitments.globalPage({ state, overdue: overdueOnly, limit, offset }),
+    resetKey: `${pid ?? "all"}|${state}|${overdueOnly}`,
+  });
+
+  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 isOverdue = (c: { state: string; due: string | null }) =>
+    c.state === "open" && !!c.due && c.due < new Date().toISOString();
+
+  const resetForm = () => { setWho(""); setWhat(""); setDue(""); setTarget(pid ?? ""); };
+
+  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);
+    }
+  };
+
+  return (
+    <Section
+      fullHeight
+      title={t("project.commitments.title")}
+      description={t("project.commitments.subtitle")}
+      action={
+        <Button size="sm" variant="primary" onClick={() => setAdding(true)}>
+          <Plus size={14} /> {t("project.commitments.add")}
+        </Button>
+      }
+      filters={
+        <>
+          <FilterChips
+            value={state}
+            onChange={setState}
+            label={t("project.commitments.title")}
+            options={(["open", "kept", "missed", "all"] as const).map((s) => ({
+              value: s, label: t(`project.commitments.state.${s}`),
+            }))}
+          />
+          <Button
+            size="sm"
+            variant={overdueOnly ? "primary" : "ghost"}
+            onClick={() => setOverdueOnly((v) => !v)}
+          >
+            {t("project.commitments.overdue_only")}
+          </Button>
+        </>
+      }
+    >
+      {paged.isLoading && <Loading />}
+      {!paged.isLoading && paged.total === 0 && <Empty>{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 }))}
+              />
+            </Field>
+          ) : null}
+        </div>
+      </Dialog>
+    </Section>
+  );
+}