@agentprojectcontext/apx 1.57.0 → 1.59.0

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

@@ -8,8 +8,11 @@ import { Section } from "../../components/Section";
 import { Badge, Button, Dialog, Empty, Field, Input, Loading, Switch, Textarea } from "../../components/ui";
 import { UiSelect } from "../../components/UiSelect";
 import { useToast } from "../../components/Toast";
+import { EmojiInput, AutonomyPicker, AreaRoleFields } from "../../components/agents/AgentFormFields";
 import { cn } from "../../lib/cn";
 import { t } from "../../i18n";
+import type { AgentAutonomy } from "../../types/daemon";
+import { typeOptions } from "./AgentDetailScreen";
 
 const LANGS = ["", "es", "en", "pt", "fr", "it", "de"];
 const csv = (s: string) => s.split(",").map((x) => x.trim()).filter(Boolean);
@@ -224,7 +227,7 @@ function AgentCard({
     >
       <div className="flex items-center gap-2">
         <div className={cn("flex size-8 shrink-0 items-center justify-center rounded-lg bg-gradient-to-br", gradient)}>
-          <Icon className="size-4 text-white" />
+          {agent.emoji ? <span className="text-base leading-none">{agent.emoji}</span> : <Icon className="size-4 text-white" />}
         </div>
         <span className="truncate text-sm font-semibold">{agent.slug}</span>
       </div>
@@ -250,7 +253,7 @@ function ListView({ agents, onOpen, onChat }: { agents: AgentEntry[]; onOpen: (s
         return (
           <div key={a.slug} data-testid={`agent-card-${a.slug}`} className="flex cursor-pointer items-center gap-4 rounded-xl border border-border bg-muted/30 p-3 hover:border-muted-fg/50" onClick={() => onOpen(a.slug)}>
             <div className={cn("flex size-9 shrink-0 items-center justify-center rounded-xl bg-gradient-to-br", gradient)}>
-              <Icon className="size-4 text-white" />
+              {a.emoji ? <span className="text-lg leading-none">{a.emoji}</span> : <Icon className="size-4 text-white" />}
             </div>
             <div className="min-w-0 flex-1">
               <div className="flex flex-wrap items-center gap-2">
@@ -282,7 +285,11 @@ function CreateAgentDialog({
 }: { open: boolean; onClose: () => void; onCreated: () => void; pid: string; agents: AgentEntry[] }) {
   const toast = useToast();
   const [slug, setSlug] = useState("");
+  const [emoji, setEmoji] = useState("");
+  const [type, setType] = useState("");
   const [role, setRole] = useState("");
+  const [area, setArea] = useState("");
+  const [autonomy, setAutonomy] = useState<AgentAutonomy | "">("");
   const [model, setModel] = useState("");
   const [language, setLanguage] = useState("");
   const [description, setDescription] = useState("");
@@ -293,8 +300,9 @@ function CreateAgentDialog({
   const [busy, setBusy] = useState(false);
 
   const reset = () => {
-    setSlug(""); setRole(""); setModel(""); setLanguage("");
-    setDescription(""); setSkills(""); setTools(""); setIsMaster(false); setParent("");
+    setSlug(""); setEmoji(""); setType(""); setRole(""); setArea(""); setAutonomy("");
+    setModel(""); setLanguage(""); setDescription(""); setSkills(""); setTools("");
+    setIsMaster(false); setParent("");
   };
 
   const submit = async () => {
@@ -303,13 +311,17 @@ function CreateAgentDialog({
     try {
       await Agents.create(pid, {
         slug,
+        emoji: emoji || undefined,
+        type: type || undefined,
         role: role || undefined,
+        area: area || undefined,
+        autonomy: autonomy || undefined,
         model: model || undefined,
         language: language || undefined,
         description: description || undefined,
         skills: csv(skills),
         tools: csv(tools),
-        is_master: isMaster,
+        is_master: isMaster || type === "orchestrator",
         parent: parent || undefined,
       });
       toast.success(t("project.agents.create_success", { slug }));
@@ -334,10 +346,15 @@ function CreateAgentDialog({
       }
     >
       <div className="space-y-3">
-        <div className="grid grid-cols-2 gap-3">
+        <div className="grid grid-cols-[80px_1fr_1fr] gap-3">
+          <Field label={t("agents_form.emoji")}><EmojiInput value={emoji} onChange={setEmoji} /></Field>
           <Field label={t("project.agents.slug_label")}><Input autoFocus data-testid="agent-slug" value={slug} onChange={(e) => setSlug(e.target.value)} placeholder={t("project.agents.slug_ph")} /></Field>
-          <Field label={t("project.agents.role_label")}><Input value={role} onChange={(e) => setRole(e.target.value)} placeholder={t("project.agents.role_ph")} /></Field>
+          <Field label={t("project.agent_detail.type_label")}><UiSelect value={type} onChange={setType} options={typeOptions()} /></Field>
         </div>
+        <AreaRoleFields pid={pid} area={area} role={role} onArea={setArea} onRole={setRole} />
+        <Field label={t("agents_form.autonomy")} hint={t("agents_form.autonomy_hint")}>
+          <AutonomyPicker value={autonomy} onChange={setAutonomy} />
+        </Field>
         <div className="grid grid-cols-2 gap-3">
           <Field label={t("project.agents.model_label")} hint={t("project.agents.model_hint")}><Input value={model} onChange={(e) => setModel(e.target.value)} /></Field>
           <Field label={t("project.agents.lang_label")}><UiSelect value={language} onChange={setLanguage} options={LANGS.map((l) => ({ value: l, label: l || "—" }))} /></Field>

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/SkillsTab.tsx

@@ -0,0 +1,13 @@
+import { useProject } from "../../hooks/useProjects";
+import { Loading } from "../../components/ui";
+import { SkillsManager } from "../../components/settings/SkillsManager";
+
+// Per-project skills view: the Claude-Desktop-style manager locked to THIS
+// project's scope so you can enable/disable and add skills while working in it.
+// The base project (pid "0" = super-agent admin) manages the "default" scope.
+export function SkillsTab({ pid }: { pid: string }) {
+  const { project } = useProject(pid);
+  const scope = pid === "0" ? "default" : project?.path;
+  if (!scope) return <Loading />;
+  return <SkillsManager scope={scope} />;
+}

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>
+  );
+}

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

@@ -1,14 +1,19 @@
 import { useState } from "react";
-import { Check, Plus, RotateCcw, Trash2 } from "lucide-react";
+import { useSearchParams } from "react-router-dom";
+import { Plus, ChevronDown, ChevronUp, Check, Trash2, RotateCcw } from "lucide-react";
 import { Tasks } from "../../lib/api";
 import { Section } from "../../components/Section";
 import { PagedList, usePagedQuery } from "../../components/Pager";
-import { Badge, Button, Empty, Field, Input, Loading } from "../../components/ui";
+import { Badge, Button, Empty, Field, Input, Loading, Textarea } from "../../components/ui";
 import { useToast } from "../../components/Toast";
+import { StatusIcon, StatusBadge, effectiveStatus } from "../../components/tasks/taskStatus";
+import { TaskDetailPanel } from "../../components/tasks/TaskDetailPanel";
 import { t } from "../../i18n";
 
 export function TasksTab({ pid }: { pid: string }) {
   const [state, setState] = useState<"open" | "done" | "dropped">("open");
+  const [params, setParams] = useSearchParams();
+  const selected = params.get("task");
   const toast = useToast();
   // dedupingInterval:0 so switching the state filter always revalidates the
   // target page instead of showing the stale cached one from a prior switch.
@@ -19,14 +24,22 @@ export function TasksTab({ pid }: { pid: string }) {
     swr: { dedupingInterval: 0, revalidateOnFocus: true },
   });
   const [draft, setDraft] = useState("");
+  const [body, setBody] = useState("");
+  const [showBody, setShowBody] = useState(false);
   const [busy, setBusy] = useState(false);
 
+  const select = (id: string | null) => {
+    const next = new URLSearchParams(params);
+    if (id) next.set("task", id); else next.delete("task");
+    setParams(next, { replace: true });
+  };
+
   const add = async () => {
     if (!draft.trim()) return;
     setBusy(true);
     try {
-      await Tasks.add(pid, { title: draft.trim() });
-      setDraft("");
+      await Tasks.add(pid, { title: draft.trim(), body: body.trim() || null, source: "web" });
+      setDraft(""); setBody(""); setShowBody(false);
       toast.success(t("project.tasks.created"));
       paged.mutate();
     } catch (e: any) {
@@ -49,72 +62,98 @@ export function TasksTab({ pid }: { pid: string }) {
         <div className="flex gap-1">
           {(["open", "done", "dropped"] as const).map((s) => (
             <Button key={s} size="sm" data-testid={`task-filter-${s}`} variant={state === s ? "primary" : "ghost"} onClick={() => setState(s)}>
-              {s}
+              {t(`tasks.state_${s}` as never)}
             </Button>
           ))}
         </div>
       }
     >
-      <div className="mb-4 flex shrink-0 items-end gap-2">
-        <Field label={t("project.tasks.add_label")}>
-          <Input
-            data-testid="task-input"
-            placeholder={t("project.tasks.add_placeholder")}
-            value={draft}
-            onChange={(e) => setDraft(e.target.value)}
-            onKeyDown={(e) => { if (e.key === "Enter") add(); }}
-          />
-        </Field>
-        <Button variant="primary" data-testid="task-add" onClick={add} loading={busy}>
-          <Plus size={14} /> {t("project.tasks.add")}
-        </Button>
+      <div className="mb-4 shrink-0 space-y-2">
+        <div className="flex items-end gap-2">
+          <Field label={t("project.tasks.add_label")}>
+            <Input
+              data-testid="task-input"
+              placeholder={t("project.tasks.add_placeholder")}
+              value={draft}
+              onChange={(e) => setDraft(e.target.value)}
+              onKeyDown={(e) => { if (e.key === "Enter" && !showBody) add(); }}
+            />
+          </Field>
+          <Button variant="ghost" size="sm" onClick={() => setShowBody((v) => !v)} aria-label={t("tasks.toggle_prompt")}>
+            {showBody ? <ChevronUp size={14} /> : <ChevronDown size={14} />} {t("tasks.field_prompt")}
+          </Button>
+          <Button variant="primary" data-testid="task-add" onClick={add} loading={busy}>
+            <Plus size={14} /> {t("project.tasks.add")}
+          </Button>
+        </div>
+        {showBody && (
+          <Textarea rows={3} value={body} onChange={(e) => setBody(e.target.value)} placeholder={t("tasks.prompt_ph")} className="text-xs" />
+        )}
       </div>
 
-      {paged.isLoading && <Loading />}
-      {!paged.isLoading && paged.total === 0 && (
-        <Empty>
-          {state === "open"
-            ? t("project.tasks.empty_open")
-            : t("project.tasks.empty", { state })}
-          {" "}<code>apx task add "…"</code>
-        </Empty>
-      )}
+      <div className="flex min-h-0 flex-1 gap-4">
+        <div className="flex min-w-0 flex-1 flex-col">
+          {paged.isLoading && <Loading />}
+          {!paged.isLoading && paged.total === 0 && (
+            <Empty>
+              {state === "open" ? t("project.tasks.empty_open") : t("project.tasks.empty", { state })}
+              {" "}<code>apx task add "…"</code>
+            </Empty>
+          )}
 
-      <PagedList paged={paged} fullHeight>
-        <ul className="space-y-2 text-sm" data-testid="task-list">
-          {paged.items.map((task) => (
-            <li key={task.id} data-testid={`task-${task.id}`} className="flex items-start gap-3 rounded-md border border-border bg-muted/30 px-3 py-2">
-            <span className="mt-0.5 font-mono text-[10px] text-muted-fg">{task.id}</span>
-            <div className="flex-1">
-              <div className="font-medium">{task.title}</div>
-              <div className="mt-0.5 flex flex-wrap items-center gap-2 text-xs text-muted-fg">
-                {task.tags?.map((tag) => <Badge key={tag}>#{tag}</Badge>)}
-                {task.agent && <Badge tone="info">@{task.agent}</Badge>}
-                {task.source && <span>{t("project.tasks.via")} {task.source}</span>}
-                {task.due && <span>{t("project.tasks.due")} {task.due}</span>}
-              </div>
-            </div>
-            <div className="flex gap-1">
-              {state === "open" && (
-                <>
-                  <Button size="sm" variant="secondary" aria-label={t("project.tasks.aria_done")} data-testid={`task-done-${task.id}`} onClick={() => mark(() => Tasks.done(pid, task.id), t("project.tasks.done"))}>
-                    <Check size={13} />
-                  </Button>
-                  <Button size="sm" variant="destructive" aria-label={t("project.tasks.aria_drop")} data-testid={`task-drop-${task.id}`} onClick={() => mark(() => Tasks.drop(pid, task.id), t("project.tasks.drop"))}>
-                    <Trash2 size={13} />
-                  </Button>
-                </>
-              )}
-              {state !== "open" && (
-                <Button size="sm" variant="ghost" aria-label={t("project.tasks.aria_reopen")} data-testid={`task-reopen-${task.id}`} onClick={() => mark(() => Tasks.reopen(pid, task.id), t("project.tasks.reopen"))}>
-                  <RotateCcw size={13} />
-                </Button>
-              )}
-            </div>
-          </li>
-        ))}
-        </ul>
-      </PagedList>
+          <PagedList paged={paged} fullHeight>
+            <ul className="space-y-2 text-sm" data-testid="task-list">
+              {paged.items.map((task) => {
+                const eff = effectiveStatus(task);
+                return (
+                  <li
+                    key={task.id}
+                    data-testid={`task-${task.id}`}
+                    onClick={() => select(task.id)}
+                    className={`flex cursor-pointer items-start gap-3 rounded-md border px-3 py-2 hover:border-muted-fg/50 ${selected === task.id ? "border-primary/50 bg-primary/5" : "border-border bg-muted/30"}`}
+                  >
+                    <StatusIcon status={eff} className="mt-0.5 shrink-0" />
+                    <div className="min-w-0 flex-1">
+                      <div className="truncate font-medium">{task.title}</div>
+                      <div className="mt-0.5 flex flex-wrap items-center gap-2 text-xs text-muted-fg">
+                        {task.state === "open" && <StatusBadge status={eff} />}
+                        {task.tags?.map((tag) => <Badge key={tag}>#{tag}</Badge>)}
+                        {task.agent && <Badge tone="info">@{task.agent}</Badge>}
+                        {task.due && <span>{t("project.tasks.due")} {task.due}</span>}
+                      </div>
+                    </div>
+                    <div className="flex shrink-0 gap-1" onClick={(e) => e.stopPropagation()}>
+                      {task.state === "open" ? (
+                        <>
+                          <Button size="sm" variant="secondary" aria-label={t("project.tasks.aria_done")} data-testid={`task-done-${task.id}`} onClick={() => mark(() => Tasks.done(pid, task.id), t("project.tasks.done"))}>
+                            <Check size={13} />
+                          </Button>
+                          <Button size="sm" variant="destructive" aria-label={t("project.tasks.aria_drop")} data-testid={`task-drop-${task.id}`} onClick={() => mark(() => Tasks.drop(pid, task.id), t("project.tasks.drop"))}>
+                            <Trash2 size={13} />
+                          </Button>
+                        </>
+                      ) : (
+                        <Button size="sm" variant="ghost" aria-label={t("project.tasks.aria_reopen")} data-testid={`task-reopen-${task.id}`} onClick={() => mark(() => Tasks.reopen(pid, task.id), t("project.tasks.reopen"))}>
+                          <RotateCcw size={13} />
+                        </Button>
+                      )}
+                    </div>
+                  </li>
+                );
+              })}
+            </ul>
+          </PagedList>
+        </div>
+
+        {selected && (
+          <TaskDetailPanel
+            pid={pid}
+            taskId={selected}
+            onClose={() => select(null)}
+            onChanged={() => paged.mutate()}
+          />
+        )}
+      </div>
     </Section>
   );
 }