@agentprojectcontext/apx 1.56.2 → 1.58.0

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

@@ -1,14 +1,14 @@
 import { useEffect, useMemo, useState } from "react";
 import { useSearchParams } from "react-router-dom";
-import useSWR from "swr";
-import { Plus, Trash2 } from "lucide-react";
-import { Agents } from "../../lib/api";
+import useSWR, { mutate } from "swr";
+import { Plus, RotateCcw, Trash2 } from "lucide-react";
+import { Agents, Conversations } from "../../lib/api";
 import { Badge, Button, Dialog, Empty, Field, Input, Loading, Switch } from "../../components/ui";
 import { Composer } from "../../components/chat/Composer";
 import { MessageList } from "../../components/chat/MessageList";
 import { ContextBar } from "../../components/chat/ContextBar";
 import { InlineAskPanel, pendingAskQuestions } from "../../components/chat/InlineAskPanel";
-import { ChatList, type ChatKey } from "../../components/chat/ChatList";
+import { ChatList, type ChatKey, type ChatSelectionMeta } from "../../components/chat/ChatList";
 import { useChat } from "../../hooks/useChat";
 import { useToast } from "../../components/Toast";
 import { t } from "../../i18n";
@@ -22,24 +22,52 @@ const ROBY_SLUG = "__super_agent__";
 
 export function ChatTab({ pid }: { pid: string }) {
   const toast = useToast();
-  const [params] = useSearchParams();
+  const [params, setSearchParams] = useSearchParams();
   const agents = useSWR(`/projects/${pid}/agents`, () => Agents.list(pid));
   const [creating, setCreating] = useState(false);
   const [model, setModel] = useState("");
   const [dismissedAskKey, setDismissedAskKey] = useState<string | null>(null);
-  const { msgs, send: sendChat, stop, clear, load, loadThread, streaming, conversationId } =
+  const { msgs, send: sendChat, stop, clear, load, loadThread, streaming } =
     useChat(pid, (m) => toast.error(m));
   const persona = usePersonaName();
 
   // Selection state — drives both the sidebar highlight and the right-pane
-  // header. Defaults 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 initialFromUrl = params.get("agent");
-  const [selected, setSelected] = useState<ChatKey>(
-    initialFromUrl
-      ? { kind: "live", agentSlug: initialFromUrl }
-      : { kind: "live", agentSlug: ROBY_SLUG },
-  );
+  // header. Restored from the URL query on mount (so a chat is deep-linkable),
+  // 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>(() => {
+    const agent = params.get("agent");
+    const conv = params.get("conv");
+    const channel = params.get("channel");
+    const thread = params.get("thread");
+    if (channel && thread) return { kind: "thread", channel, threadId: thread };
+    if (agent && conv) return { kind: "conv", agentSlug: agent, convId: conv };
+    if (agent) return { kind: "live", agentSlug: agent };
+    return { kind: "live", agentSlug: ROBY_SLUG };
+  });
+  // Display metadata for the current selection (channel/created date/title),
+  // carried from the sidebar so the header can show it without a second fetch.
+  const [selectedMeta, setSelectedMeta] = useState<ChatSelectionMeta | undefined>(undefined);
+  const [confirmDelete, setConfirmDelete] = useState(false);
+  const [deleting, setDeleting] = useState(false);
+
+  // Select a chat and mirror its id into the URL query so the current chat is
+  // shareable/deep-linkable. `replace` keeps navigation history clean.
+  const selectChat = (key: ChatKey, meta?: ChatSelectionMeta) => {
+    setSelected(key);
+    setSelectedMeta(meta);
+    const next = new URLSearchParams();
+    if (key.kind === "conv") {
+      next.set("agent", key.agentSlug);
+      next.set("conv", key.convId);
+    } else if (key.kind === "thread") {
+      next.set("channel", key.channel);
+      next.set("thread", key.threadId);
+    } else {
+      next.set("agent", key.agentSlug);
+    }
+    setSearchParams(next, { replace: true });
+  };
 
   const agentList = agents.data || [];
   const isRoby = (slug: string | null | undefined) => slug === ROBY_SLUG;
@@ -95,27 +123,61 @@ export function ChatTab({ pid }: { pid: string }) {
     catch { /* ignore */ }
   };
 
-  const onNewChat = () => {
-    setSelected({ kind: "live", agentSlug: ROBY_SLUG });
+  // "+ New" from the sidebar: start a fresh in-memory session with the picked
+  // agent (super-agent or a project agent). It materialises in the Web group
+  // once the first message is sent.
+  const onNewChat = (agentSlug: string) => {
+    selectChat({ kind: "live", agentSlug });
+    clear();
+  };
+
+  // "New session" header button: reset the pane but stay with the current
+  // agent (Roby for channel threads / the super-agent, else the project agent).
+  const newSession = () => {
+    const agentSlug = activeIsRoby ? ROBY_SLUG : activeAgent?.slug ?? selected.agentSlug;
+    selectChat({ kind: "live", agentSlug });
     clear();
   };
 
+  // "Delete" header button: permanently remove the persisted conversation
+  // (agent `.md` file) or channel thread (ledger day-file), then reset the pane
+  // and revalidate the sidebar list so the entry disappears.
+  const doDelete = async () => {
+    setDeleting(true);
+    try {
+      if (selected.kind === "conv") {
+        await Conversations.remove(pid, selected.agentSlug, selected.convId);
+        void mutate(`/projects/${pid}/agents/${selected.agentSlug}/conversations`);
+      } else if (selected.kind === "thread") {
+        await Conversations.removeThread(pid, selected.channel, selected.threadId);
+        void mutate(`/projects/${pid}/super-agent/threads`);
+      }
+      toast.success(t("project.chat.deleted"));
+      setConfirmDelete(false);
+      newSession();
+    } catch (e) {
+      toast.error((e as Error)?.message || t("shared_ui.err_chat_failed"));
+    } finally {
+      setDeleting(false);
+    }
+  };
+
+  // Header shows "Created {date} · {channel} · {agent}" (or "New chat · …" for a
+  // fresh session with no persisted date yet), per the sidebar redesign.
+  const agentLabel = activeIsRoby ? persona : activeAgent?.slug ?? selected.agentSlug;
+  const channelLabel =
+    selected.kind === "thread" ? selected.channel : selectedMeta?.channel || "web";
+  const createdIso =
+    selected.kind === "thread" ? selected.threadId : selectedMeta?.createdAt;
+
   const headerTitle =
-    selected.kind === "thread"
-      ? `${selected.channel} · ${selected.threadId}`
-      : activeIsRoby
-        ? t("project.chat.superagent_title", { persona })
-        : selected.kind === "conv"
-          ? selected.convId
-          : t("project.chat.title");
-  const headerSubtitle =
-    selected.kind === "thread"
-      ? t("project.chat.thread_subtitle", { channel: selected.channel, persona })
-      : activeIsRoby
-        ? t("project.chat.superagent_subtitle", { persona })
-        : selected.kind === "conv"
-          ? t("project.chat.loaded_subtitle", { slug: selected.agentSlug })
-          : t("project.chat.subtitle");
+    selected.kind === "live"
+      ? t("project.chat.live_title", { agent: agentLabel })
+      : selectedMeta?.title ||
+        (selected.kind === "thread" ? selected.threadId : selected.convId);
+  const headerSubtitle = createdIso
+    ? t("project.chat.meta_created", { date: formatDate(createdIso), channel: channelLabel })
+    : t("project.chat.meta_new", { channel: channelLabel });
 
   if (agents.isLoading) return <Loading />;
 
@@ -127,7 +189,7 @@ export function ChatTab({ pid }: { pid: string }) {
         superAgentSlug={ROBY_SLUG}
         superAgentLabel={t("agents_ui.super_agent_label", { persona })}
         selected={selected}
-        onSelect={setSelected}
+        onSelect={selectChat}
         onNewChat={onNewChat}
       />
 
@@ -141,9 +203,8 @@ export function ChatTab({ pid }: { pid: string }) {
             {activeIsRoby ? (
               <Badge tone="success">{t("agents_ui.super_agent_badge")}</Badge>
             ) : (
-              activeAgent?.model && <Badge tone="info">{activeAgent.model}</Badge>
+              <Badge tone="info">{agentLabel}</Badge>
             )}
-            {selected.kind === "conv" && <Badge tone="info">{conversationId || "…"}</Badge>}
             {!agentList.length && !activeIsRoby && (
               <Button variant="primary" size="sm" onClick={() => setCreating(true)}>
                 <Plus size={14} /> {t("project.chat.create_agent")}
@@ -153,10 +214,20 @@ export function ChatTab({ pid }: { pid: string }) {
               variant="ghost"
               size="sm"
               disabled={streaming || msgs.length === 0}
-              onClick={onNewChat}
+              onClick={newSession}
             >
-              <Trash2 size={13} /> {t("project.chat.clear")}
+              <RotateCcw size={13} /> {t("project.chat.new_session")}
             </Button>
+            {(selected.kind === "conv" || selected.kind === "thread") && (
+              <Button
+                variant="destructive"
+                size="sm"
+                disabled={streaming}
+                onClick={() => setConfirmDelete(true)}
+              >
+                <Trash2 size={13} /> {t("project.chat.delete")}
+              </Button>
+            )}
           </div>
         </header>
 
@@ -198,10 +269,39 @@ export function ChatTab({ pid }: { pid: string }) {
         onClose={() => setCreating(false)}
         onCreated={() => { setCreating(false); agents.mutate(); }}
       />
+
+      <Dialog
+        open={confirmDelete}
+        onClose={() => setConfirmDelete(false)}
+        title={t("project.chat.delete_confirm_title")}
+        description={t("project.chat.delete_confirm_desc")}
+        size="sm"
+        footer={
+          <>
+            <Button variant="ghost" onClick={() => setConfirmDelete(false)} disabled={deleting}>
+              {t("common.cancel")}
+            </Button>
+            <Button variant="destructive" onClick={doDelete} loading={deleting}>
+              <Trash2 size={14} /> {t("project.chat.delete")}
+            </Button>
+          </>
+        }
+      >
+        <p className="text-sm text-muted-fg">{headerTitle}</p>
+      </Dialog>
     </div>
   );
 }
 
+// Localised short date for the header "Created {date}" line. Falls back to the
+// raw string for anything Date can't parse.
+function formatDate(iso?: string): string {
+  if (!iso) return "";
+  const d = new Date(iso);
+  if (Number.isNaN(d.getTime())) return iso;
+  return d.toLocaleDateString();
+}
+
 function CreateAgentDialog({
   open,
   onClose,

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

@@ -0,0 +1,13 @@
+import { FileBrowser } from "../../components/files/FileBrowser";
+import { t } from "../../i18n";
+
+// Project documentation / specs. Rooted at the configured docs folder
+// (config docs.root, default "docs") — folders per case, like Appsi's work/.
+// Editable: create, edit (markdown split-preview) and delete docs.
+export function DocsTab({ pid }: { pid: string }) {
+  return (
+    <div className="h-full">
+      <FileBrowser pid={pid} scope="docs" editable emptyHint={t("files.docs_empty")} />
+    </div>
+  );
+}

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

@@ -0,0 +1,12 @@
+import { FileBrowser } from "../../components/files/FileBrowser";
+
+// Read-only browser over the whole project tree (the same viewer the docs
+// surface uses, scoped to the repo root). Type-aware: markdown renders,
+// code shows with line numbers, images preview inline.
+export function FilesTab({ pid }: { pid: string }) {
+  return (
+    <div className="h-full">
+      <FileBrowser pid={pid} scope="project" />
+    </div>
+  );
+}

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

@@ -1,23 +1,135 @@
 import useSWR from "swr";
-import { NavLink } from "react-router-dom";
-import { Bot, FileCode2, Heart, MessagesSquare, Puzzle, Zap } from "lucide-react";
+import { NavLink, useNavigate } from "react-router-dom";
+import { Bot, FileCode2, Heart, MessagesSquare, Puzzle, Zap, Crown, Activity } from "lucide-react";
 import { Agents, Artifacts, Mcps, Routines, Tasks } from "../../lib/api";
+import { Section } from "../../components/Section";
+import { StatusIcon, StatusBadge, effectiveStatus, statusLabel, TASK_STATUS_ORDER } from "../../components/tasks/taskStatus";
+import { cn } from "../../lib/cn";
 import { t } from "../../i18n";
+import type { AgentEntry } from "../../types/daemon";
 
+// Floor / mission control: a live per-project summary — what's here (agents,
+// automation), what's in flight (task workflow), and what just happened.
 export function Overview({ pid }: { pid: string }) {
-  const tasks    = useSWR(`/projects/${pid}/tasks?state=open`, () => Tasks.list(pid));
+  const navigate = useNavigate();
+  const tasks    = useSWR(`/projects/${pid}/tasks?state=open`, () => Tasks.list(pid), { refreshInterval: 20_000 });
+  const summary  = useSWR(`/projects/${pid}/tasks-summary`,    () => Tasks.summary(pid), { refreshInterval: 20_000 });
   const routines = useSWR(`/projects/${pid}/routines`,         () => Routines.list(pid));
   const agents   = useSWR(`/projects/${pid}/agents`,           () => Agents.list(pid));
   const mcps     = useSWR(`/projects/${pid}/mcps`,             () => Mcps.list(pid));
   const artifacts = useSWR(`/projects/${pid}/artifacts`,       () => Artifacts.list(pid));
+
+  const agentList = agents.data ?? [];
+  const orchestrators = agentList.filter((a) => a.is_master || a.type === "orchestrator");
+  const specialists = agentList.filter((a) => !(a.is_master || a.type === "orchestrator"));
+  const activeRoutines = (routines.data ?? []).filter((r) => r.enabled).length;
+  const openTasks = [...(tasks.data ?? [])].sort((a, b) => (b.created_at || "").localeCompare(a.created_at || "")).slice(0, 6);
+
   return (
-    <div className="grid grid-cols-2 gap-4 md:grid-cols-3">
-      <Card title={t("project.overview.tasks_open")} value={tasks.data?.length ?? "…"}    href={`/p/${pid}/tasks`}    icon={Zap} />
-      <Card title={t("project.overview.routines")}   value={routines.data?.length ?? "…"} href={`/p/${pid}/routines`} icon={Heart} />
-      <Card title={t("project.overview.agents")}     value={agents.data?.length ?? "…"}   href={`/p/${pid}/agents`}   icon={Bot} />
-      <Card title={t("project.overview.mcps")}       value={mcps.data?.length ?? "…"}     href={`/p/${pid}/mcps`}     icon={Puzzle} />
-      <Card title={t("project.overview.artifacts")}  value={artifacts.data?.length ?? "…"} href={`/p/${pid}/artifacts`} icon={FileCode2} />
-      <Card title={t("project.overview.chat")}       value={t("project.overview.chat_value")} href={`/p/${pid}/chat`}  icon={MessagesSquare} />
+    <div className="space-y-6">
+      {/* Stat cards */}
+      <div className="grid grid-cols-2 gap-4 md:grid-cols-4">
+        <Card title={t("project.overview.agents")}     value={agentList.length}          href={`/p/${pid}/agents`}   icon={Bot} />
+        <Card title={t("project.overview.tasks_open")}  value={summary.data?.open ?? tasks.data?.length ?? "…"} href={`/p/${pid}/tasks`} icon={Zap} />
+        <Card title={t("project.overview.routines_active")} value={activeRoutines} href={`/p/${pid}/routines`} icon={Heart} />
+        <Card title={t("project.overview.artifacts")}   value={artifacts.data?.length ?? "…"} href={`/p/${pid}/artifacts`} icon={FileCode2} />
+      </div>
+
+      {/* Task workflow strip */}
+      {summary.data && summary.data.open > 0 && (
+        <div className="flex flex-wrap gap-2">
+          {TASK_STATUS_ORDER.map((s) => (
+            <NavLink
+              key={s}
+              to={`/p/${pid}/tasks`}
+              className="flex items-center gap-1.5 rounded-lg border border-border bg-card px-3 py-1.5 text-xs hover:bg-accent/40"
+            >
+              <StatusIcon status={s} className="size-3.5" />
+              <span className="capitalize text-muted-foreground">{statusLabel(s)}</span>
+              <span className="font-semibold">{summary.data!.status?.[s] ?? 0}</span>
+            </NavLink>
+          ))}
+        </div>
+      )}
+
+      <div className="grid gap-4 lg:grid-cols-2">
+        {/* Agent roster */}
+        <Section title={t("project.overview.roster")} className="!p-4">
+          {agentList.length === 0 ? (
+            <p className="text-sm text-muted-fg">{t("project.overview.no_agents")}</p>
+          ) : (
+            <div className="space-y-3">
+              {orchestrators.length > 0 && (
+                <RosterRow label={t("project.overview.orchestrators")} icon={Crown} agents={orchestrators} pid={pid} navigate={navigate} />
+              )}
+              {specialists.length > 0 && (
+                <RosterRow label={t("project.overview.specialists")} icon={Bot} agents={specialists} pid={pid} navigate={navigate} />
+              )}
+            </div>
+          )}
+        </Section>
+
+        {/* Recent / in-flight tasks */}
+        <Section title={t("project.overview.recent_tasks")} className="!p-4"
+          action={<NavLink to={`/p/${pid}/tasks`} className="text-xs text-sky-500 hover:text-sky-400">{t("common.view_all")}</NavLink>}
+        >
+          {openTasks.length === 0 ? (
+            <p className="flex items-center gap-2 text-sm text-muted-fg"><Activity className="size-4" />{t("project.overview.no_activity")}</p>
+          ) : (
+            <ul className="space-y-1.5">
+              {openTasks.map((task) => (
+                <li key={task.id}>
+                  <button
+                    type="button"
+                    onClick={() => navigate(`/p/${pid}/tasks?task=${task.id}`)}
+                    className="flex w-full items-center gap-2 rounded-lg px-2 py-1.5 text-left hover:bg-accent/40"
+                  >
+                    <StatusIcon status={effectiveStatus(task)} className="size-3.5 shrink-0" />
+                    <span className="min-w-0 flex-1 truncate text-sm">{task.title}</span>
+                    <StatusBadge status={effectiveStatus(task)} />
+                  </button>
+                </li>
+              ))}
+            </ul>
+          )}
+        </Section>
+      </div>
+
+      {/* Quick links */}
+      <div className="grid grid-cols-2 gap-4 md:grid-cols-3">
+        <Card title={t("project.overview.chat")} value={t("project.overview.chat_value")} href={`/p/${pid}/chat`} icon={MessagesSquare} />
+        <Card title={t("project.overview.mcps")} value={mcps.data?.length ?? "…"} href={`/p/${pid}/mcps`} icon={Puzzle} />
+        <Card title={t("project.overview.routines")} value={routines.data?.length ?? "…"} href={`/p/${pid}/routines`} icon={Heart} />
+      </div>
+    </div>
+  );
+}
+
+function RosterRow({
+  label, icon: Icon, agents, pid, navigate,
+}: {
+  label: string; icon: typeof Bot; agents: AgentEntry[]; pid: string; navigate: (to: string) => void;
+}) {
+  return (
+    <div>
+      <div className="mb-1.5 flex items-center gap-1.5 text-[10px] font-semibold uppercase tracking-wide text-muted-foreground">
+        <Icon className="size-3.5" />{label} ({agents.length})
+      </div>
+      <div className="flex flex-wrap gap-1.5">
+        {agents.map((a) => (
+          <button
+            key={a.slug}
+            type="button"
+            onClick={() => navigate(`/p/${pid}/agents/${a.slug}`)}
+            className={cn(
+              "inline-flex items-center gap-1.5 rounded-lg border border-border bg-card px-2 py-1 text-xs hover:border-muted-fg/50",
+            )}
+          >
+            <span className="text-sm leading-none">{a.emoji || "🤖"}</span>
+            <span className="truncate">{a.slug}</span>
+          </button>
+        ))}
+      </div>
     </div>
   );
 }

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

@@ -0,0 +1,147 @@
+import { useState } from "react";
+import useSWR from "swr";
+import { FolderKanban, Briefcase, Plus, Pencil, Trash2, Info } from "lucide-react";
+import { Section } from "../../components/Section";
+import { Button, Empty, Loading } from "../../components/ui";
+import { ConfirmDialog } from "../../components/common/ConfirmDialog";
+import { AreaDialog, RoleDialog } from "../../components/structure/StructureDialogs";
+import { Org } from "../../lib/api/organization";
+import { useToast } from "../../components/Toast";
+import { t } from "../../i18n";
+import type { OrgArea, OrgRole } from "../../types/daemon";
+
+export function StructureTab({ pid }: { pid: string }) {
+  const toast = useToast();
+  const org = useSWR(`/projects/${pid}/organization`, () => Org.get(pid));
+
+  const [areaDialog, setAreaDialog] = useState<{ editing?: OrgArea | null } | null>(null);
+  const [roleDialog, setRoleDialog] = useState<{ editing?: OrgRole | null; presetArea?: string | null } | null>(null);
+  const [confirm, setConfirm] = useState<{ kind: "area" | "role"; slug: string; name: string } | null>(null);
+
+  const refresh = () => void org.mutate();
+
+  const areas = org.data?.areas ?? [];
+  const roles = org.data?.roles ?? [];
+  const rolesByArea = (slug: string | null) => roles.filter((r) => r.area === slug);
+
+  const doDelete = async () => {
+    if (!confirm) return;
+    if (confirm.kind === "area") await Org.removeArea(pid, confirm.slug);
+    else await Org.removeRole(pid, confirm.slug);
+    toast.success(t("common.deleted"));
+    refresh();
+  };
+
+  return (
+    <div className="space-y-6">
+      <Section
+        title={t("structure.title")}
+        description={t("structure.subtitle")}
+        action={
+          <div className="flex gap-2">
+            <Button size="sm" variant="secondary" data-testid="structure-new-area" onClick={() => setAreaDialog({})}>
+              <Plus className="size-3.5" />{t("structure.new_area")}
+            </Button>
+            <Button size="sm" variant="primary" onClick={() => setRoleDialog({})}>
+              <Plus className="size-3.5" />{t("structure.new_role")}
+            </Button>
+          </div>
+        }
+      >
+        <div className="mb-4 flex items-start gap-2 rounded-lg border border-sky-500/20 bg-sky-500/5 px-3 py-2 text-[13px] text-muted-foreground">
+          <Info className="mt-0.5 size-4 shrink-0 text-sky-500" />
+          <span>{t("structure.info")}</span>
+        </div>
+
+        {org.isLoading ? (
+          <Loading />
+        ) : areas.length === 0 && roles.length === 0 ? (
+          <Empty>{t("structure.empty")}</Empty>
+        ) : (
+          <div className="grid gap-3 md:grid-cols-2 xl:grid-cols-3">
+            {areas.map((area) => (
+              <div key={area.slug} className="group rounded-lg border border-border bg-card/50 p-3">
+                <div className="flex items-start gap-2">
+                  <FolderKanban className="mt-0.5 size-4 shrink-0 text-emerald-500" />
+                  <div className="min-w-0 flex-1">
+                    <div className="flex items-center gap-2">
+                      <span className="truncate text-sm font-semibold">{area.name}</span>
+                      <span className="font-mono text-[10px] text-muted-foreground">{area.slug}</span>
+                    </div>
+                    {area.goal && <p className="mt-0.5 text-xs text-muted-foreground">{area.goal}</p>}
+                  </div>
+                  <div className="flex shrink-0 gap-1 opacity-0 transition-opacity group-hover:opacity-100">
+                    <button type="button" onClick={() => setAreaDialog({ editing: area })} className="text-muted-foreground hover:text-foreground" aria-label={t("common.edit")}>
+                      <Pencil className="size-3.5" />
+                    </button>
+                    <button type="button" onClick={() => setConfirm({ kind: "area", slug: area.slug, name: area.name })} className="text-muted-foreground hover:text-red-500" aria-label={t("common.delete")}>
+                      <Trash2 className="size-3.5" />
+                    </button>
+                  </div>
+                </div>
+
+                {/* Roles nested inside the area (Panda pattern). */}
+                <div className="mt-3 border-t border-border/60 pt-2">
+                  <div className="mb-1.5 flex items-center justify-between">
+                    <span className="text-[10px] font-semibold uppercase tracking-wide text-muted-foreground">
+                      {t("structure.roles")} ({rolesByArea(area.slug).length})
+                    </span>
+                    <button type="button" onClick={() => setRoleDialog({ presetArea: area.slug })} className="text-[11px] text-sky-500 hover:text-sky-400">
+                      + {t("structure.add_role")}
+                    </button>
+                  </div>
+                  <div className="flex flex-wrap gap-1.5">
+                    {rolesByArea(area.slug).map((role) => (
+                      <RoleChip key={role.slug} role={role} onEdit={() => setRoleDialog({ editing: role })} onDelete={() => setConfirm({ kind: "role", slug: role.slug, name: role.name })} />
+                    ))}
+                    {rolesByArea(area.slug).length === 0 && <span className="text-[11px] text-muted-foreground/60">{t("structure.no_roles")}</span>}
+                  </div>
+                </div>
+              </div>
+            ))}
+
+            {/* Unassigned roles (no area). */}
+            {rolesByArea(null).length > 0 && (
+              <div className="rounded-lg border border-dashed border-border bg-card/30 p-3">
+                <div className="mb-2 flex items-center gap-2 text-[10px] font-semibold uppercase tracking-wide text-muted-foreground">
+                  <Briefcase className="size-3.5" />{t("structure.general_roles")}
+                </div>
+                <div className="flex flex-wrap gap-1.5">
+                  {rolesByArea(null).map((role) => (
+                    <RoleChip key={role.slug} role={role} onEdit={() => setRoleDialog({ editing: role })} onDelete={() => setConfirm({ kind: "role", slug: role.slug, name: role.name })} />
+                  ))}
+                </div>
+              </div>
+            )}
+          </div>
+        )}
+      </Section>
+
+      <AreaDialog open={!!areaDialog} onClose={() => setAreaDialog(null)} pid={pid} editing={areaDialog?.editing} onSaved={refresh} />
+      <RoleDialog open={!!roleDialog} onClose={() => setRoleDialog(null)} pid={pid} areas={areas} editing={roleDialog?.editing} presetArea={roleDialog?.presetArea} onSaved={refresh} />
+      <ConfirmDialog
+        open={!!confirm}
+        onClose={() => setConfirm(null)}
+        onConfirm={doDelete}
+        title={confirm?.kind === "area" ? t("structure.delete_area") : t("structure.delete_role")}
+        description={confirm?.kind === "area" ? t("structure.delete_area_desc", { name: confirm?.name ?? "" }) : t("structure.delete_role_desc", { name: confirm?.name ?? "" })}
+        confirmLabel={t("common.delete")}
+      />
+    </div>
+  );
+}
+
+function RoleChip({ role, onEdit, onDelete }: { role: OrgRole; onEdit: () => void; onDelete: () => void }) {
+  return (
+    <span className="group/chip inline-flex items-center gap-1 rounded-md border border-border bg-background px-1.5 py-0.5 text-[11px]">
+      <Briefcase className="size-3 text-muted-foreground" />
+      <span>{role.name}</span>
+      <button type="button" onClick={onEdit} className="opacity-0 transition-opacity group-hover/chip:opacity-100 text-muted-foreground hover:text-foreground" aria-label={t("common.edit")}>
+        <Pencil className="size-2.5" />
+      </button>
+      <button type="button" onClick={onDelete} className="opacity-0 transition-opacity group-hover/chip:opacity-100 text-muted-foreground hover:text-red-500" aria-label={t("common.delete")}>
+        <Trash2 className="size-2.5" />
+      </button>
+    </span>
+  );
+}