@agentprojectcontext/apx 1.56.2 → 1.58.0

package/src/interfaces/web/src/components/structure/StructureDialogs.tsx

@@ -0,0 +1,172 @@
+import { useEffect, useState } from "react";
+import { Dialog, Button, Field, Input, Textarea } from "../ui";
+import { UiSelect } from "../UiSelect";
+import { useToast } from "../Toast";
+import { Org } from "../../lib/api/organization";
+import { slugify } from "../../lib/slug";
+import { t } from "../../i18n";
+import type { OrgArea, OrgRole } from "../../types/daemon";
+
+// Create or edit an area. `editing` present → edit mode (slug is immutable).
+export function AreaDialog({
+  open, onClose, pid, editing, onSaved,
+}: {
+  open: boolean;
+  onClose: () => void;
+  pid: string;
+  editing?: OrgArea | null;
+  onSaved: () => void;
+}) {
+  const toast = useToast();
+  const [name, setName] = useState("");
+  const [slug, setSlug] = useState("");
+  const [goal, setGoal] = useState("");
+  const [busy, setBusy] = useState(false);
+
+  useEffect(() => {
+    if (!open) return;
+    setName(editing?.name ?? "");
+    setSlug(editing?.slug ?? "");
+    setGoal(editing?.goal ?? "");
+  }, [open, editing]);
+
+  const save = async () => {
+    if (!name.trim()) return;
+    setBusy(true);
+    try {
+      if (editing) await Org.updateArea(pid, editing.slug, { name, goal });
+      else await Org.createArea(pid, { name, slug: slug || slugify(name), goal });
+      toast.success(t("common.saved"));
+      onSaved();
+      onClose();
+    } catch (e) {
+      toast.error(e instanceof Error ? e.message : String(e));
+    } finally {
+      setBusy(false);
+    }
+  };
+
+  return (
+    <Dialog
+      open={open}
+      onClose={onClose}
+      title={editing ? t("structure.edit_area") : t("structure.new_area")}
+      footer={
+        <>
+          <Button variant="ghost" onClick={onClose}>{t("common.cancel")}</Button>
+          <Button variant="primary" data-testid="area-create" onClick={() => void save()} loading={busy} disabled={!name.trim()}>
+            {editing ? t("common.save") : t("structure.create_area")}
+          </Button>
+        </>
+      }
+    >
+      <div className="space-y-3">
+        <Field label={t("structure.name")}>
+          <Input
+            autoFocus
+            data-testid="area-name"
+            value={name}
+            onChange={(e) => { setName(e.target.value); if (!editing) setSlug(slugify(e.target.value)); }}
+            placeholder="Engineering"
+          />
+        </Field>
+        {!editing && (
+          <Field label={t("structure.slug")}>
+            <Input value={slug} onChange={(e) => setSlug(slugify(e.target.value))} className="font-mono" placeholder="engineering" />
+          </Field>
+        )}
+        <Field label={t("structure.goal")} hint={t("structure.goal_hint")}>
+          <Textarea value={goal} onChange={(e) => setGoal(e.target.value)} rows={2} />
+        </Field>
+      </div>
+    </Dialog>
+  );
+}
+
+// Create or edit a role. `presetArea` pre-selects an area (quick-create from an
+// area card).
+export function RoleDialog({
+  open, onClose, pid, areas, editing, presetArea, onSaved,
+}: {
+  open: boolean;
+  onClose: () => void;
+  pid: string;
+  areas: OrgArea[];
+  editing?: OrgRole | null;
+  presetArea?: string | null;
+  onSaved: () => void;
+}) {
+  const toast = useToast();
+  const [name, setName] = useState("");
+  const [slug, setSlug] = useState("");
+  const [area, setArea] = useState("");
+  const [description, setDescription] = useState("");
+  const [busy, setBusy] = useState(false);
+
+  useEffect(() => {
+    if (!open) return;
+    setName(editing?.name ?? "");
+    setSlug(editing?.slug ?? "");
+    setArea(editing?.area ?? presetArea ?? "");
+    setDescription(editing?.description ?? "");
+  }, [open, editing, presetArea]);
+
+  const save = async () => {
+    if (!name.trim()) return;
+    setBusy(true);
+    try {
+      if (editing) await Org.updateRole(pid, editing.slug, { name, area: area || null, description });
+      else await Org.createRole(pid, { name, slug: slug || slugify(name), area: area || null, description });
+      toast.success(t("common.saved"));
+      onSaved();
+      onClose();
+    } catch (e) {
+      toast.error(e instanceof Error ? e.message : String(e));
+    } finally {
+      setBusy(false);
+    }
+  };
+
+  const areaOptions = [
+    { value: "", label: t("structure.no_area") },
+    ...areas.map((a) => ({ value: a.slug, label: a.name })),
+  ];
+
+  return (
+    <Dialog
+      open={open}
+      onClose={onClose}
+      title={editing ? t("structure.edit_role") : t("structure.new_role")}
+      footer={
+        <>
+          <Button variant="ghost" onClick={onClose}>{t("common.cancel")}</Button>
+          <Button variant="primary" onClick={() => void save()} loading={busy} disabled={!name.trim()}>
+            {editing ? t("common.save") : t("structure.create_role")}
+          </Button>
+        </>
+      }
+    >
+      <div className="space-y-3">
+        <Field label={t("structure.name")}>
+          <Input
+            autoFocus
+            value={name}
+            onChange={(e) => { setName(e.target.value); if (!editing) setSlug(slugify(e.target.value)); }}
+            placeholder="Tech Lead"
+          />
+        </Field>
+        {!editing && (
+          <Field label={t("structure.slug")}>
+            <Input value={slug} onChange={(e) => setSlug(slugify(e.target.value))} className="font-mono" placeholder="tech-lead" />
+          </Field>
+        )}
+        <Field label={t("structure.area")}>
+          <UiSelect value={area} onChange={setArea} options={areaOptions} placeholder={t("structure.no_area")} />
+        </Field>
+        <Field label={t("structure.description")}>
+          <Textarea value={description} onChange={(e) => setDescription(e.target.value)} rows={2} />
+        </Field>
+      </div>
+    </Dialog>
+  );
+}

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

@@ -0,0 +1,142 @@
+import { useState, useEffect } from "react";
+import useSWR from "swr";
+import { X, Check, Trash2, RotateCcw, ExternalLink, Save } from "lucide-react";
+import { useNavigate } from "react-router-dom";
+import { Tasks } from "../../lib/api";
+import { Button, Spinner, Textarea } from "../ui";
+import { UiSelect } from "../UiSelect";
+import { useToast } from "../Toast";
+import { StatusBadge, effectiveStatus, TASK_STATUS_ORDER, statusLabel } from "./taskStatus";
+import { t } from "../../i18n";
+import type { TaskStatus } from "../../types/daemon";
+
+function Row({ label, children }: { label: string; children: React.ReactNode }) {
+  return (
+    <div className="flex items-baseline justify-between gap-3 text-xs">
+      <span className="text-muted-foreground">{label}</span>
+      <span className="text-right font-mono text-foreground/90">{children}</span>
+    </div>
+  );
+}
+
+// Right-hand task inspector: prompt/body, workflow status, who created it, the
+// linked thread, timestamps, and lifecycle actions. Mirrors Panda's detail
+// panel but wired to APX's task store.
+export function TaskDetailPanel({
+  pid, taskId, onClose, onChanged,
+}: {
+  pid: string;
+  taskId: string;
+  onClose: () => void;
+  onChanged: () => void;
+}) {
+  const toast = useToast();
+  const navigate = useNavigate();
+  const { data: task, isLoading, mutate } = useSWR(`/projects/${pid}/tasks/${taskId}`, () => Tasks.get(pid, taskId));
+  const [body, setBody] = useState("");
+  const [busy, setBusy] = useState(false);
+
+  useEffect(() => { setBody(task?.body ?? ""); }, [task?.id, task?.body]);
+
+  const refresh = () => { void mutate(); onChanged(); };
+  const act = async (fn: () => Promise<unknown>) => {
+    setBusy(true);
+    try { await fn(); refresh(); }
+    catch (e) { toast.error(e instanceof Error ? e.message : String(e)); }
+    finally { setBusy(false); }
+  };
+
+  if (isLoading) return <div className="flex w-80 items-center justify-center border-l border-border"><Spinner /></div>;
+  if (!task) return null;
+
+  const eff = effectiveStatus(task);
+  const isOpen = task.state === "open";
+  const bodyDirty = body !== (task.body ?? "");
+
+  return (
+    <div className="flex w-80 shrink-0 flex-col border-l border-border bg-card/40" data-testid="task-detail">
+      <div className="flex shrink-0 items-center justify-between border-b border-border px-4 py-2.5">
+        <span className="text-[10px] font-semibold uppercase tracking-wide text-muted-foreground">{t("tasks.detail_title")}</span>
+        <button type="button" onClick={onClose} aria-label={t("common.close")} className="text-muted-foreground hover:text-foreground">
+          <X className="size-4" />
+        </button>
+      </div>
+
+      <div className="min-h-0 flex-1 space-y-4 overflow-y-auto px-4 py-4">
+        <div>
+          <div className="mb-1 text-[10px] uppercase tracking-wide text-muted-foreground">{t("tasks.field_title")}</div>
+          <div className="text-sm font-semibold">{task.title}</div>
+        </div>
+
+        <div className="flex items-center gap-2">
+          <StatusBadge status={eff} />
+          <span className="font-mono text-[10px] text-muted-foreground">{task.id}</span>
+        </div>
+
+        {/* Prompt / body — editable */}
+        <div>
+          <div className="mb-1 flex items-center justify-between">
+            <span className="text-[10px] uppercase tracking-wide text-muted-foreground">{t("tasks.field_prompt")}</span>
+            {bodyDirty && (
+              <button type="button" onClick={() => act(async () => { await Tasks.patch(pid, task.id, { body }); toast.success(t("common.saved")); })} className="flex items-center gap-1 text-[10px] text-emerald-500 hover:text-emerald-400">
+                <Save className="size-3" />{t("files.save")}
+              </button>
+            )}
+          </div>
+          <Textarea rows={4} value={body} onChange={(e) => setBody(e.target.value)} placeholder={t("tasks.prompt_ph")} className="text-xs" />
+        </div>
+
+        {/* Workflow status control (open tasks) */}
+        {isOpen && (
+          <div>
+            <div className="mb-1 text-[10px] uppercase tracking-wide text-muted-foreground">{t("tasks.field_status")}</div>
+            <UiSelect
+              value={task.status ?? "pending"}
+              onChange={(v) => act(() => Tasks.status(pid, task.id, v as TaskStatus))}
+              options={TASK_STATUS_ORDER.map((s) => ({ value: s, label: statusLabel(s) }))}
+            />
+          </div>
+        )}
+
+        <div className="space-y-1.5 rounded-lg border border-border bg-background/40 p-2.5">
+          {task.agent && <Row label={t("tasks.field_agent")}>@{task.agent}</Row>}
+          {task.created_by && <Row label={t("tasks.field_creator")}>{task.created_by}</Row>}
+          {task.source && <Row label={t("tasks.field_source")}>{task.source}</Row>}
+          {task.due && <Row label={t("project.tasks.due")}>{task.due}</Row>}
+          <Row label={t("tasks.field_created")}>{new Date(task.created_at).toLocaleString()}</Row>
+          <Row label={t("tasks.field_updated")}>{new Date(task.updated_at).toLocaleString()}</Row>
+          {task.done_at && <Row label={t("tasks.field_done")}>{new Date(task.done_at).toLocaleString()}</Row>}
+        </div>
+
+        {/* Thread link */}
+        {task.thread && (
+          <button
+            type="button"
+            onClick={() => navigate(`/p/${pid}/chat?thread=${task.thread}`)}
+            className="flex w-full items-center justify-center gap-1.5 rounded-lg border border-sky-500/30 bg-sky-500/5 px-3 py-2 text-xs text-sky-500 hover:bg-sky-500/10"
+          >
+            <ExternalLink className="size-3.5" />{t("tasks.view_thread")}
+          </button>
+        )}
+      </div>
+
+      {/* Actions */}
+      <div className="flex shrink-0 gap-2 border-t border-border px-4 py-3">
+        {isOpen ? (
+          <>
+            <Button size="sm" variant="primary" className="flex-1" loading={busy} onClick={() => act(() => Tasks.done(pid, task.id))}>
+              <Check size={13} />{t("tasks.mark_done")}
+            </Button>
+            <Button size="sm" variant="destructive" loading={busy} onClick={() => act(() => Tasks.drop(pid, task.id))} aria-label={t("project.tasks.aria_drop")}>
+              <Trash2 size={13} />
+            </Button>
+          </>
+        ) : (
+          <Button size="sm" variant="secondary" className="flex-1" loading={busy} onClick={() => act(() => Tasks.reopen(pid, task.id))}>
+            <RotateCcw size={13} />{t("project.tasks.reopen")}
+          </Button>
+        )}
+      </div>
+    </div>
+  );
+}

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

@@ -0,0 +1,57 @@
+import { Loader2, CheckCircle2, XCircle, Clock, CircleDot, HelpCircle } from "lucide-react";
+import { cn } from "../../lib/cn";
+import { t } from "../../i18n";
+import type { TaskEntry, TaskStatus } from "../../types/daemon";
+
+type Meta = { labelKey: string; color: string; dot: string; Icon: typeof Clock; spin?: boolean };
+
+// Single source of truth for how each workflow status looks. Reused by the
+// task list, detail panel and the floor/overview.
+const STATUS_META: Record<TaskStatus, Meta> = {
+  pending:   { labelKey: "tasks.status_pending",   color: "text-amber-500",  dot: "bg-amber-400",  Icon: CircleDot },
+  running:   { labelKey: "tasks.status_running",   color: "text-sky-500",    dot: "bg-sky-400",    Icon: Loader2, spin: true },
+  in_review: { labelKey: "tasks.status_in_review", color: "text-violet-500", dot: "bg-violet-400", Icon: Clock },
+  blocked:   { labelKey: "tasks.status_blocked",   color: "text-slate-400",  dot: "bg-slate-400",  Icon: HelpCircle },
+};
+
+export const TASK_STATUS_ORDER: TaskStatus[] = ["pending", "running", "in_review", "blocked"];
+
+// Effective status for display: closed tasks render as done/dropped regardless
+// of their last open sub-status.
+export function effectiveStatus(task: TaskEntry): TaskStatus | "done" | "dropped" {
+  if (task.state === "done") return "done";
+  if (task.state === "dropped") return "dropped";
+  return task.status ?? "pending";
+}
+
+export function statusLabel(status: TaskStatus): string {
+  return t(STATUS_META[status].labelKey as never);
+}
+
+export function StatusIcon({ status, className }: { status: TaskStatus | "done" | "dropped"; className?: string }) {
+  if (status === "done") return <CheckCircle2 className={cn("size-4 text-emerald-500", className)} />;
+  if (status === "dropped") return <XCircle className={cn("size-4 text-muted-foreground", className)} />;
+  const m = STATUS_META[status];
+  return <m.Icon className={cn("size-4", m.color, m.spin && "animate-spin", className)} />;
+}
+
+export function StatusBadge({ status }: { status: TaskStatus | "done" | "dropped" }) {
+  const label =
+    status === "done" ? t("tasks.done_label")
+    : status === "dropped" ? t("tasks.dropped_label")
+    : statusLabel(status);
+  const color =
+    status === "done" ? "text-emerald-500 border-emerald-500/30"
+    : status === "dropped" ? "text-muted-foreground border-border"
+    : `${STATUS_META[status].color} border-current/30`;
+  return (
+    <span className={cn("inline-flex items-center gap-1 rounded-md border px-1.5 py-0.5 text-[10px] font-medium capitalize", color)}>
+      <StatusIcon status={status} className="size-3" />
+      {label}
+    </span>
+  );
+}
+
+export function StatusDot({ status }: { status: TaskStatus }) {
+  return <span className={cn("size-2 rounded-full", STATUS_META[status].dot)} />;
+}

package/src/interfaces/web/src/hooks/useChat.ts

@@ -130,6 +130,44 @@ function isErrorResult(result: unknown): boolean {
   return "error" in r && !!r.error;
 }
 
+/** Reconstruct chat turns from a persisted channel thread (global ledger).
+ *  User rows start a new turn; consecutive assistant/tool rows collapse into a
+ *  single assistant bubble with interleaved text + tool parts — mirroring how a
+ *  live streamed turn is shaped, so tool executions render the same on reload as
+ *  they did in real time. Persisted rows carry no live status, so it's derived
+ *  from the stored result (error → "error", else "done"). */
+function threadToChatMsgs(messages: ConversationMessage[]): ChatMsg[] {
+  const out: ChatMsg[] = [];
+  let turn: ChatMsg | null = null;
+  let toolSeq = 0;
+  for (const m of messages) {
+    const ts = m.ts || new Date().toISOString();
+    if (m.role === "user") {
+      turn = null;
+      out.push({ role: "user", parts: userPart(m.content), ts });
+    } else if (m.role === "assistant" || m.role === "tool") {
+      if (!turn) {
+        turn = { role: "assistant", parts: [], ts };
+        out.push(turn);
+      }
+      if (m.role === "tool") {
+        turn.parts.push({
+          kind: "tool",
+          id: `hist-${toolSeq++}`,
+          tool: m.tool || "tool",
+          args: m.args,
+          result: m.result,
+          status: isErrorResult(m.result) ? "error" : "done",
+        });
+      } else if (m.content) {
+        turn.parts.push({ kind: "text", text: m.content });
+      }
+    }
+    // system/compact rows are context-only; not rendered in the thread viewer.
+  }
+  return out;
+}
+
 /**
  * Pure reducer: apply one NDJSON stream event to an assistant turn and return
  * the next turn. Every surface that consumes the super-agent stream (ChatTab,
@@ -398,13 +436,7 @@ export function useChat(pid: string, onError?: (msg: string) => void): UseChatRe
       try {
         const detail = await Conversations.thread(pid, channel, threadId);
         if (seq !== loadSeqRef.current) return; // superseded by a newer pick
-        const loaded: ChatMsg[] = (detail.messages ?? [])
-          .filter((m) => m.role === "user" || m.role === "assistant")
-          .map((m) => ({
-            role: m.role as "user" | "assistant",
-            parts: [{ kind: "text", text: m.content }],
-            ts: m.ts || new Date().toISOString(),
-          }));
+        const loaded = threadToChatMsgs(detail.messages ?? []);
         // Ledger threads have no conversation file — sends continue as fresh
         // web turns with this history as previousMessages.
         convoRef.current = undefined;

package/src/interfaces/web/src/i18n/en.ts

@@ -32,6 +32,10 @@ export const en = {
     hide:         "Hide",
     copy:         "Copy",
     run:          "Run",
+    refresh:      "Refresh",
+    view_all:     "View all",
+    saved:        "Saved.",
+    deleted:      "Deleted.",
     pager_prev:   "Previous",
     pager_next:   "Next",
     pager_page:   "Page {page} of {total}",
@@ -292,10 +296,14 @@ export const en = {
       vars:     "Variables",
       logs:     "Logs",
       memories: "Memories",
+      structure: "Structure",
+      docs:     "Docs",
+      files:    "Files",
     },
 
     sections: {
       workspace: "Workspace",
+      content: "Content",
       automation: "Automation",
       knowledge: "Conversations",
       config: "Config",
@@ -304,11 +312,18 @@ export const en = {
     overview: {
       tasks_open: "Open tasks",
       routines:   "Routines",
+      routines_active: "Active routines",
       agents:     "Agents",
       mcps:       "MCPs",
       artifacts:  "Artifacts",
       chat:       "Chat (super-agent)",
       chat_value: "open",
+      roster:     "Team",
+      no_agents:  "No agents yet.",
+      orchestrators: "Orchestrators",
+      specialists: "Specialists",
+      recent_tasks: "Recent tasks",
+      no_activity: "No open tasks.",
     },
 
     artifacts: {
@@ -319,6 +334,7 @@ export const en = {
     chat: {
       title:       "Chat with agent",
       subtitle:    "Direct conversations with project agents. The super-agent does not intervene.",
+      live_title:  "Chat with {agent}",
       superagent_title:  "Chat with {persona}",
       superagent_subtitle: "Chat with {persona} — the APX super-agent. Can use tools (projects, tasks, mcps, agents).",
       loaded_subtitle: "Loaded conversation with {slug}. Sending will append to this thread.",
@@ -327,7 +343,13 @@ export const en = {
       placeholder: "Type something and press enter to send (shift+enter = new line)",
       send:        "Send",
       stop:        "Stop",
-      clear:       "Clear",
+      new_session: "New session",
+      delete:      "Delete",
+      delete_confirm_title: "Delete chat",
+      delete_confirm_desc:  "This can't be undone. This chat's history will be permanently deleted.",
+      deleted:     "Chat deleted.",
+      meta_created: "Created {date} · {channel}",
+      meta_new:     "New chat · {channel}",
       copy:        "copy",
       copied:      "Copied.",
       stopped_marker: " [stopped]",
@@ -345,8 +367,7 @@ export const en = {
         all_agents:    "All agents",
         empty:         "No conversations yet. Start one from the right.",
         count:         "{n} total",
-        live_with:     "Live · {slug}",
-        live_subtitle: "In-memory session",
+        pick_agent:    "Pick an agent",
       },
     },
 
@@ -1295,6 +1316,95 @@ export const en = {
     role_assigned:         "{name} → {role}",
   },
 
+  agents_form: {
+    emoji:           "Emoji",
+    area:            "Area",
+    role:            "Role",
+    no_role:         "— no role —",
+    autonomy:        "Autonomy",
+    autonomy_hint:   "How much the agent can do without asking for confirmation.",
+    auto_total:      "Total",
+    auto_automatico: "Auto",
+    auto_permiso:    "Permission",
+  },
+
+  structure: {
+    title:            "Structure",
+    subtitle:         "Company areas and roles. Areas group agents; roles define their function.",
+    info:             "Areas are optional groupings. Roles define an agent's function and may belong to an area.",
+    empty:            "No areas or roles yet. Create the first one above.",
+    new_area:         "New area",
+    new_role:         "New role",
+    edit_area:        "Edit area",
+    edit_role:        "Edit role",
+    create_area:      "Create area",
+    create_role:      "Create role",
+    name:             "Name",
+    slug:             "Slug",
+    goal:             "Goal",
+    goal_hint:        "What this area exists for (optional).",
+    area:             "Area",
+    description:      "Description",
+    no_area:          "— no area —",
+    roles:            "Roles",
+    add_role:         "role",
+    no_roles:         "no roles",
+    general_roles:    "General roles",
+    delete_area:      "Delete area",
+    delete_role:      "Delete role",
+    delete_area_desc: "Delete area \"{name}\"? Its roles are detached, not deleted.",
+    delete_role_desc: "Delete role \"{name}\"?",
+  },
+
+  files: {
+    docs_label:    "Docs",
+    files_label:   "Files",
+    new_doc:       "New document",
+    new_doc_hint:  "Folders allowed: cases/onboarding/spec.md",
+    empty:         "No files.",
+    docs_empty:    "No documentation yet. Create the first document.",
+    truncated:     "Listing truncated (too many files).",
+    select_prompt: "Pick a file to view it.",
+    save:          "Save",
+    saved:         "Saved.",
+    deleted:       "Deleted.",
+    created:       "Document created.",
+    edit:          "Edit",
+    preview:       "Preview",
+    discard:       "Discard",
+    no_preview:    "No preview for this file.",
+    too_large:     "File too large to display.",
+    path_label:    "File path",
+    path_example:  "e.g. cases/onboarding/spec.md",
+    create:        "Create",
+  },
+
+  tasks: {
+    state_open:      "open",
+    state_done:      "done",
+    state_dropped:   "dropped",
+    status_pending:   "pending",
+    status_running:   "running",
+    status_in_review: "in review",
+    status_blocked:   "blocked",
+    done_label:      "done",
+    dropped_label:   "dropped",
+    detail_title:    "Task detail",
+    field_title:     "Title",
+    field_prompt:    "Prompt",
+    field_status:    "Status",
+    field_agent:     "Agent",
+    field_creator:   "Created by",
+    field_source:    "Source",
+    field_created:   "Created",
+    field_updated:   "Updated",
+    field_done:      "Completed",
+    prompt_ph:       "Task description / prompt…",
+    toggle_prompt:   "Prompt",
+    view_thread:     "View thread",
+    mark_done:       "Complete",
+  },
+
   agents_ui: {
     model_router_default:    "model: router default",
     slug_kebab_hint:         "kebab-case, e.g. reviewer, my-agent, content-writer",