@agentprojectcontext/apx 1.78.0 → 1.79.0

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

@@ -1,10 +1,14 @@
 import { useState } from "react";
+import { Plus } from "lucide-react";
 import { useNavigate } from "react-router-dom";
 import { Tasks } from "../../lib/api";
 import type { TaskStatus } from "../../types/daemon";
 import { Section } from "../../components/Section";
 import { PagedList, usePagedQuery } from "../../components/Pager";
-import { Badge, Button, Empty, Loading } from "../../components/ui";
+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";
 
 // All projects' tasks, aggregated (GET /tasks), server-paginated.
@@ -15,38 +19,79 @@ export function GlobalTasksTab() {
   // right now" is not "what is open". Only meaningful for open tasks.
   const [status, setStatus] = useState<TaskStatus | "">("");
   const effectiveStatus = state === "open" ? status : "";
+  // The per-project Tasks screen has always had an inline add form; this one
+  // did not, so on the base workspace the only way to file a task was to ask
+  // the agent. A picker is the price of the cross-project view.
+  const [adding, setAdding] = useState(false);
+  const [title, setTitle] = useState("");
+  const [target, setTarget] = useState("");
+  const [due, setDue] = useState("");
+  const [busy, setBusy] = useState(false);
+  const { projects } = useProjects();
+  const toast = useToast();
+
   const paged = usePagedQuery({
     key: `/api/tasks?state=${state}&status=${effectiveStatus}`,
     fetchPage: (limit, offset) => Tasks.globalPage({ state, limit, offset, status: effectiveStatus }),
     resetKey: `${state}|${effectiveStatus}`,
   });
 
+  const create = async () => {
+    if (!title.trim() || !target) return;
+    setBusy(true);
+    try {
+      await Tasks.add(String(target), { title: title.trim(), due: due || null });
+      await paged.mutate();
+      setAdding(false);
+      setTitle(""); setDue("");
+    } catch (e) {
+      toast.error((e as Error).message);
+    } finally {
+      setBusy(false);
+    }
+  };
+
   return (
     <Section
       fullHeight
       title={t("project.global_tasks.title")}
       description={t("project.global_tasks.subtitle")}
       action={
-        <div className="flex gap-1">
-          {(["open", "done", "dropped", "all"] as const).map((s) => (
-            <Button key={s} size="sm" variant={state === s ? "primary" : "ghost"} onClick={() => setState(s)}>{s}</Button>
-          ))}
-        </div>
+        <Button
+          size="sm"
+          variant="primary"
+          onClick={() => { setTarget(String(projects[0]?.id ?? "")); setAdding(true); }}
+        >
+          <Plus size={14} /> {t("project.global_tasks.add")}
+        </Button>
+      }
+      filters={
+        <>
+          <FilterChips
+            value={state}
+            onChange={setState}
+            label={t("project.global_tasks.title")}
+            options={(["open", "done", "dropped", "all"] as const).map((s) => ({ value: s, label: s }))}
+          />
+          {state === "open" ? (
+            <>
+              <span className="mx-1 h-4 w-px bg-border" aria-hidden />
+              <FilterChips
+                value={status}
+                onChange={setStatus}
+                label={t("project.global_tasks.any_status")}
+                options={[
+                  { value: "" as const, label: t("project.global_tasks.any_status") },
+                  ...(["pending", "running", "in_review", "blocked"] as const).map((s) => ({
+                    value: s, label: s.replace("_", " "),
+                  })),
+                ]}
+              />
+            </>
+          ) : null}
+        </>
       }
     >
-      {state === "open" ? (
-        <div className="mb-3 flex flex-wrap gap-1">
-          <Button size="sm" variant={status === "" ? "primary" : "ghost"} onClick={() => setStatus("")}>
-            {t("project.global_tasks.any_status")}
-          </Button>
-          {(["pending", "running", "in_review", "blocked"] as const).map((s) => (
-            <Button key={s} size="sm" variant={status === s ? "primary" : "ghost"} onClick={() => setStatus(s)}>
-              {s.replace("_", " ")}
-            </Button>
-          ))}
-        </div>
-      ) : null}
-
       {paged.isLoading && <Loading />}
       {!paged.isLoading && paged.total === 0 && <Empty>{t("project.global_tasks.empty")}</Empty>}
       <PagedList paged={paged} fullHeight>
@@ -73,6 +118,44 @@ export function GlobalTasksTab() {
           ))}
         </ul>
       </PagedList>
+
+      <Dialog
+        open={adding}
+        onClose={() => setAdding(false)}
+        title={t("project.global_tasks.add_title")}
+        footer={
+          <>
+            <Button onClick={() => setAdding(false)}>{t("common.cancel")}</Button>
+            <Button variant="primary" loading={busy} disabled={!title.trim() || !target} onClick={create}>
+              {t("project.global_tasks.add")}
+            </Button>
+          </>
+        }
+      >
+        <div className="flex flex-col gap-3 p-5">
+          <Field label={t("project.global_tasks.field_title")}>
+            <Input
+              value={title}
+              onChange={(e) => setTitle(e.target.value)}
+              autoFocus
+              onKeyDown={(e) => { if (e.key === "Enter" && title.trim() && target) create(); }}
+            />
+          </Field>
+          {/* Required, unlike the per-project screen: a cross-project view has
+              no "here" to default to, and guessing one would file the task
+              somewhere the user did not look. */}
+          <Field label={t("project.global_tasks.field_project")}>
+            <UiSelect
+              value={String(target)}
+              onChange={setTarget}
+              options={projects.map((p) => ({ value: String(p.id), label: p.name || p.path }))}
+            />
+          </Field>
+          <Field label={t("project.global_tasks.field_due")}>
+            <Input type="date" value={due} onChange={(e) => setDue(e.target.value)} />
+          </Field>
+        </div>
+      </Dialog>
     </Section>
   );
 }

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

@@ -23,6 +23,16 @@ function actorLabel(m: MessageEntry): string {
   return m.agent_slug || m.actor_id || m.author || m.actor_kind || "—";
 }
 
+/** Structured lifecycle events APX records as they happen (a routine created,
+ *  a routine updated). Returns the label to badge, or null for ordinary rows. */
+function lifecycleEvent(m: MessageEntry): string | null {
+  const e = m.meta?.event;
+  if (typeof e !== "string") return null;
+  if (e === "routine_created") return t("logs.event_routine_created");
+  if (e === "routine_updated") return t("logs.event_routine_updated");
+  return null;
+}
+
 /** Model that produced this record — persisted in meta by every channel that
  *  runs an agent turn. Absent on user/system rows and on pre-1.74 history. */
 function modelOf(m: MessageEntry): string | null {
@@ -56,6 +66,11 @@ function LogRow({ m }: { m: MessageEntry }) {
           <span className="font-mono">{fmtTs(m.ts)}</span>
           <Badge tone="info">{m.channel}</Badge>
           {m.type && <Badge>{m.type}</Badge>}
+          {/* Lifecycle events get their own chip rather than blending into the
+              body text. "A routine now exists" is the kind of thing people
+              scroll back looking for, and a green badge is findable in a way a
+              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>}
           {tokens !== null && <span className="font-mono text-[11px]">{tokens} tok</span>}

package/src/interfaces/web/src/screens/project/ChatTab.tsx

@@ -20,7 +20,21 @@ import type { AgentEntry } from "../../types/daemon";
 // with a real APC agent slug (which must match /^[a-z][a-z0-9_-]*$/).
 const ROBY_SLUG = "__super_agent__";
 
-export function ChatTab({ pid }: { pid: string }) {
+/**
+ * `hideSidebar` lets another screen (the agent inbox) supply its own
+ * conversation list and embed just the thread. The chat surface is not forked
+ * — one implementation, two frames around it.
+ */
+export function ChatTab({
+  pid,
+  hideSidebar = false,
+  initialSelection,
+}: {
+  pid: string;
+  hideSidebar?: boolean;
+  /** Open a specific conversation on mount instead of a fresh live session. */
+  initialSelection?: ChatKey;
+}) {
   const toast = useToast();
   const [params, setSearchParams] = useSearchParams();
   const agents = useSWR(`/api/projects/${pid}/agents`, () => Agents.list(pid));
@@ -36,6 +50,10 @@ export function ChatTab({ pid }: { pid: string }) {
   // defaulting to a live session with the super-agent so the chat works even on
   // a brand-new project with zero agents and zero conversations.
   const [selected, setSelected] = useState<ChatKey>(() => {
+    // An embedding screen that already knows which conversation the user
+    // picked wins over the URL — otherwise clicking a row in the inbox opens
+    // an empty new session and the message you clicked on is nowhere.
+    if (initialSelection) return initialSelection;
     const agent = params.get("agent");
     const conv = params.get("conv");
     const channel = params.get("channel");
@@ -183,7 +201,7 @@ export function ChatTab({ pid }: { pid: string }) {
 
   return (
     <div className="flex h-full overflow-hidden rounded-xl border border-border bg-card/40">
-      <ChatList
+      {hideSidebar ? null : <ChatList
         pid={pid}
         agents={agentList}
         superAgentSlug={ROBY_SLUG}
@@ -191,7 +209,7 @@ export function ChatTab({ pid }: { pid: string }) {
         selected={selected}
         onSelect={selectChat}
         onNewChat={onNewChat}
-      />
+      />}
 
       <section className="flex min-w-0 flex-1 flex-col">
         <header className="flex shrink-0 items-center justify-between gap-3 border-b border-border px-4 py-3">

package/src/interfaces/web/src/screens/project/RoutinesTab.tsx

@@ -5,6 +5,7 @@ import { Plus } from "lucide-react";
 import { Routines, type RoutineEntry } from "../../lib/api";
 import { Button, Dialog, Empty, Loading } from "../../components/ui";
 import { useToast } from "../../components/Toast";
+import { Section } from "../../components/Section";
 import { t } from "../../i18n";
 import { RoutineList } from "../../components/routines/RoutineList";
 import { RoutineDetail } from "../../components/routines/RoutineDetail";
@@ -75,23 +76,24 @@ export function RoutinesTab({ pid }: { pid: string }) {
   };
 
   return (
-    <div className="flex h-full min-h-0 flex-col gap-3">
-      {/* header (title + new) */}
-      <div className="flex shrink-0 items-start justify-between gap-4">
-        <div>
-          <h2 className="text-lg font-semibold tracking-tight">{t("project.routines.title")}</h2>
-          <p className="mt-0.5 text-sm text-muted-fg">{t("project.routines.subtitle")}</p>
-        </div>
+    // Same frame as every other list page. This one used to draw its own
+    // header outside a card while Tasks and Commitments sat inside one, so
+    // moving between them the whole page shifted.
+    <Section
+      fullHeight
+      title={t("project.routines.title")}
+      description={t("project.routines.subtitle")}
+      action={
         <Button size="sm" variant="primary" onClick={() => setEditing({ kind: "super_agent", schedule: "every:10m", enabled: true })}>
           <Plus size={14} /> {t("project.routines.new_btn")}
         </Button>
-      </div>
-
+      }
+    >
       {list.isLoading && <Loading />}
       {!list.isLoading && rows.length === 0 && <Empty>{t("project.routines.empty")}</Empty>}
 
       {rows.length > 0 && (
-        <div className="grid min-h-0 flex-1 grid-rows-[minmax(0,1fr)] grid-cols-[minmax(200px,260px)_1fr] overflow-hidden rounded-xl border border-border bg-card/40">
+        <div className="grid min-h-0 flex-1 grid-rows-[minmax(0,1fr)] grid-cols-[minmax(200px,260px)_1fr] overflow-hidden rounded-lg border border-border">
           <RoutineList routines={rows} selectedName={selected?.name ?? null} onSelect={selectRoutine} />
           <div className="min-h-0 min-w-0 overflow-hidden">
             {selected
@@ -148,6 +150,6 @@ export function RoutinesTab({ pid }: { pid: string }) {
       >
         <p className="text-sm text-muted-fg">{t("project.routines.run_confirm_body")}</p>
       </Dialog>
-    </div>
+    </Section>
   );
 }

package/src/interfaces/web/src/types/daemon.ts

@@ -55,7 +55,7 @@ export interface AgentDetail extends AgentEntry {
 
 export interface RoutineEntry {
   name: string;
-  kind: "heartbeat" | "exec_agent" | "super_agent" | "telegram" | "shell";
+  kind: "heartbeat" | "exec_agent" | "super_agent" | "telegram" | "shell" | "watch";
   schedule: string;
   spec: Record<string, unknown>;
   enabled: boolean;
@@ -228,6 +228,15 @@ export interface ConversationMessage {
   actor_kind?: string;
   model?: string;
   usage?: ChatUsage;
+  /** Compact record of what the turn did, written at the time (the live tool
+   *  events are long gone by the time a thread is read back). */
+  tool_summary?: ToolSummary;
+}
+
+export interface ToolSummary {
+  total: number;
+  failed: number;
+  tools: { name: string; count: number; failed: number }[];
 }
 
 export interface ConversationDetail {