@agentprojectcontext/apx 1.57.0 → 1.59.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/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: {
@@ -1301,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",
@@ -1581,6 +1685,73 @@ export const en = {
     cfg_apx_storage_id:         "APX storage id",
   },
 
+  skills_page: {
+    title:               "Skills",
+    desc:                "Turn skills on or off per agent. Pick a scope: the super-agent (global) or a specific project.",
+    list_title:          "Installed skills",
+    list_desc:           "APX's private skills are always active and can't be changed.",
+    scope_label:         "Scope",
+    scope_super_agent:   "Super-agent (global)",
+    scope_hint:          "The super-agent uses the global scope. Each project can override skills independently.",
+    count_label:         "{n} skills · {on} on",
+    empty:               "No skills yet. Create one below or install via the CLI.",
+    source_builtin:      "APX",
+    source_global:       "Global",
+    source_project:      "Project",
+    private_badge:       "Private",
+    private_hint:        "Built-in APX skill — always active, can't be disabled or deleted.",
+    overridden_badge:    "Override",
+    inherited_hint:      "Inherited from global",
+    reset_to_global:     "Reset to global",
+    on:                  "on",
+    off:                 "off",
+    toggle_failed:       "Could not change state: {msg}",
+    add_title:           "Add a skill",
+    add_desc:            "Creates a user skill at ~/.apx/skills/<slug>/SKILL.md. Available across all scopes.",
+    add_slug_label:      "Slug",
+    add_slug_ph:         "my-skill",
+    add_desc_label:      "Description",
+    add_desc_ph:         "One line describing when to use it",
+    add_body_label:      "Body (Markdown)",
+    add_body_ph:         "# My skill\n\nInstructions for the agent…",
+    add_btn:             "Create skill",
+    created_ok:          "Skill \"{slug}\" created.",
+    create_failed:       "Could not create: {msg}",
+    delete_btn:          "Delete",
+    delete_confirm:      "Delete skill \"{slug}\"? This can't be undone.",
+    deleted_ok:          "Skill \"{slug}\" deleted.",
+    delete_failed:       "Could not delete: {msg}",
+    inspector_section_title: "Skill Inspector (per-turn RAG)",
+    inspector_section_desc:  "Advanced: local RAG that injects only the skills a message needs.",
+    scope_ph:            "— choose scope —",
+    select_a_skill:      "Pick a skill from the list to see its content.",
+    added_by:            "Added by",
+    activator:           "Activator",
+    by_apx:              "APX (built-in)",
+    by_you:              "You",
+    activator_value:     "Semantic match (RAG)",
+    tab_preview:         "Preview",
+    tab_source:          "Source",
+    add_menu:            "Add",
+    add_online:          "Create with editor",
+    add_online_hint:     "Write slug + description + content",
+    add_zip:             "Upload .zip",
+    add_zip_hint:        "Import a packaged skill",
+    add_repo:            "From git repo",
+    add_repo_hint:       "Clone from a URL",
+    create_dialog_title: "Create skill",
+    repo_dialog_title:   "Import from git repo",
+    repo_url_label:      "Repo URL",
+    repo_url_ph:         "https://github.com/user/my-skill.git",
+    repo_url_hint:       "The repo (or its subfolder) must contain a SKILL.md.",
+    import_btn:          "Import",
+    imported_ok:         "Skill \"{slug}\" imported.",
+    import_failed:       "Could not import: {msg}",
+    cancel:              "Cancel",
+    manager_tab:         "Skills",
+    rag_tab:             "Config (RAG)",
+  },
+
   shared_ui: {
     skill_inspector_title: "Skill Inspector ({embedder}) chose these skills for this turn",
     tools_count:           "{n} tools",