From 0f1e1f35f1c1b8a051fecf6347cfdef913889c15 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Andr=C3=A9=20Padez?= <andre.padez@gmail.com>
Date: Thu, 12 Mar 2026 07:24:57 +0000
Subject: [PATCH] redesign automation page with simple list + detail panels

Replace 8-category layout with flat task list and detail view using
WorkspaceView. Searchable list with mode badges, run/delete actions,
create dialog. Remove 13 unused component files.

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
---
 .../Dashboard/Automation/AutomationDetail.tsx | 217 +++++++++++++
 .../Automation/AutomationEditChat.tsx         |  79 -----
 .../Dashboard/Automation/AutomationList.tsx   | 202 ++++++++++++
 .../Automation/AutomationRightPanel.tsx       |  56 ----
 .../Automation/AutomationSidebar.tsx          |  51 ---
 .../Screens/Dashboard/Automation/CLAUDE.md    | 281 ++---------------
 .../Automation/CapabilityDetailView.tsx       | 290 ------------------
 .../Dashboard/Automation/CapabilityList.tsx   |  85 -----
 .../Screens/Dashboard/Automation/NewCron.tsx  |  94 ------
 .../Dashboard/Automation/NewPipeline.tsx      |  94 ------
 .../Dashboard/Automation/NewProcess.tsx       |  94 ------
 .../Dashboard/Automation/NewService.tsx       |  94 ------
 .../Screens/Dashboard/Automation/NewSkill.tsx |  94 ------
 .../Screens/Dashboard/Automation/NewTask.tsx  |  94 ------
 .../Screens/Dashboard/Automation/NewTool.tsx  |  94 ------
 .../Dashboard/Automation/NewWorkflow.tsx      |  94 ------
 .../Screens/Dashboard/Automation/index.tsx    |  87 +-----
 17 files changed, 460 insertions(+), 1640 deletions(-)
 create mode 100644 src/apps/officer-web/Screens/Dashboard/Automation/AutomationDetail.tsx
 delete mode 100644 src/apps/officer-web/Screens/Dashboard/Automation/AutomationEditChat.tsx
 create mode 100644 src/apps/officer-web/Screens/Dashboard/Automation/AutomationList.tsx
 delete mode 100644 src/apps/officer-web/Screens/Dashboard/Automation/AutomationRightPanel.tsx
 delete mode 100644 src/apps/officer-web/Screens/Dashboard/Automation/AutomationSidebar.tsx
 delete mode 100644 src/apps/officer-web/Screens/Dashboard/Automation/CapabilityDetailView.tsx
 delete mode 100644 src/apps/officer-web/Screens/Dashboard/Automation/CapabilityList.tsx
 delete mode 100644 src/apps/officer-web/Screens/Dashboard/Automation/NewCron.tsx
 delete mode 100644 src/apps/officer-web/Screens/Dashboard/Automation/NewPipeline.tsx
 delete mode 100644 src/apps/officer-web/Screens/Dashboard/Automation/NewProcess.tsx
 delete mode 100644 src/apps/officer-web/Screens/Dashboard/Automation/NewService.tsx
 delete mode 100644 src/apps/officer-web/Screens/Dashboard/Automation/NewSkill.tsx
 delete mode 100644 src/apps/officer-web/Screens/Dashboard/Automation/NewTask.tsx
 delete mode 100644 src/apps/officer-web/Screens/Dashboard/Automation/NewTool.tsx
 delete mode 100644 src/apps/officer-web/Screens/Dashboard/Automation/NewWorkflow.tsx

diff --git a/src/apps/officer-web/Screens/Dashboard/Automation/AutomationDetail.tsx b/src/apps/officer-web/Screens/Dashboard/Automation/AutomationDetail.tsx
new file mode 100644
index 00000000..f6f34945
--- /dev/null
+++ b/src/apps/officer-web/Screens/Dashboard/Automation/AutomationDetail.tsx
@@ -0,0 +1,217 @@
+import { useState, useEffect } from 'react';
+import { useQuery, useQueryClient } from '@tanstack/react-query';
+import { toast } from 'sonner';
+import ReactMarkdown from 'react-markdown';
+import remarkGfm from 'remark-gfm';
+import rehypeRaw from 'rehype-raw';
+import { Play, Trash2, Terminal, Bot, Workflow } from 'lucide-react';
+import { Button } from '@/components/ui/button';
+import { Dialog, DialogContent, DialogHeader, DialogTitle, DialogDescription } from '@/components/ui/dialog';
+import { useClient } from 'hooks/useClient';
+import { useAuth } from 'hooks/useAuth';
+import { usePanelChannel } from 'hooks/usePanelChannel';
+import { Card } from '@/components/Card';
+import { TaskRunnerModal } from 'officerdev';
+import type { TaskSummary } from 'officerdev';
+
+type TaskDetail = {
+  id: number;
+  dirName: string;
+  name: string;
+  description: string;
+  scope: string;
+  mode: string;
+  language: string | null;
+  body: string | null;
+  inputs: Record<string, unknown> | null;
+  config: { steps?: Array<{ task: string; foreach?: string }> } | null;
+  version: number | null;
+  userId: number | null;
+};
+
+const modeLabels: Record<string, { label: string; icon: typeof Terminal; color: string }> = {
+  script: { label: 'Script', icon: Terminal, color: 'bg-emerald-500/10 text-emerald-600' },
+  agentic: { label: 'Agentic', icon: Bot, color: 'bg-violet-500/10 text-violet-600' },
+  pipeline: { label: 'Pipeline', icon: Workflow, color: 'bg-amber-500/10 text-amber-600' },
+};
+
+export const AutomationDetail = () => {
+  const client = useClient();
+  const qc = useQueryClient();
+  const { user } = useAuth();
+  const [selected, setSelected] = usePanelChannel<TaskSummary | null>('automation:selected-task', null);
+  const [deleteConfirm, setDeleteConfirm] = useState(false);
+  const [runTask, setRunTask] = useState<TaskSummary | null>(null);
+
+  // Reset delete confirm when selection changes
+  useEffect(() => { setDeleteConfirm(false); }, [selected?.dirName]);
+
+  const { data: detail } = useQuery<TaskDetail>({
+    queryKey: ['tasks', selected?.dirName],
+    queryFn: () => client.get<TaskDetail>(`/tasks/${selected!.dirName}`),
+    enabled: !!selected?.dirName,
+  });
+
+  const handleDelete = async () => {
+    if (!selected) return;
+    try {
+      await client.delete(`/tasks/${selected.dirName}`);
+      await qc.invalidateQueries({ queryKey: ['tasks'] });
+      setDeleteConfirm(false);
+      setSelected(null);
+      toast.success('Automation deleted');
+    } catch {
+      toast.error('Failed to delete automation');
+    }
+  };
+
+  if (!selected) {
+    return (
+      <div className="h-full flex items-center justify-center">
+        <p className="text-sm text-duck-dark/40 dark:text-foreground/40">Select an automation to view details</p>
+      </div>
+    );
+  }
+
+  const canModify = selected.scope === 'user' || user?.role === 'Super Admin';
+  const mode = modeLabels[selected.mode] ?? modeLabels.agentic!;
+  const ModeIcon = mode.icon;
+
+  const hasSteps = detail?.config?.steps && detail.config.steps.length > 0;
+  const hasInputs = detail?.inputs && Object.keys(detail.inputs).length > 0;
+
+  return (
+    <>
+      <Card className="h-full overflow-hidden flex flex-col min-h-0">
+        {/* Header */}
+        <div className="shrink-0 px-4 py-2 border-b border-duck-dark/10 dark:border-foreground/10 bg-background/60 flex items-center gap-2">
+          <span className="text-sm font-medium text-duck-dark/70 dark:text-foreground/70 flex-1 truncate">
+            {detail?.name ?? selected.name}
+          </span>
+          <span className={`shrink-0 inline-flex items-center gap-1 px-1.5 py-0.5 rounded text-[10px] font-medium ${mode.color}`}>
+            <ModeIcon className="h-2.5 w-2.5" />
+            {mode.label}
+          </span>
+          <button
+            onClick={() => setRunTask(selected)}
+            className="p-1 rounded hover:bg-duck-dark/10 dark:hover:bg-foreground/10 cursor-pointer transition-colors"
+            title="Run"
+          >
+            <Play className="h-3.5 w-3.5 text-duck-teal" />
+          </button>
+          {canModify && (
+            <button
+              onClick={() => setDeleteConfirm(true)}
+              className="p-1 rounded hover:bg-red-50 dark:hover:bg-red-500/10 cursor-pointer transition-colors"
+              title="Delete"
+            >
+              <Trash2 className="h-3.5 w-3.5 text-duck-dark/50 dark:text-foreground/50 hover:text-red-500" />
+            </button>
+          )}
+        </div>
+
+        {/* Content */}
+        <div className="overflow-y-auto flex-1 p-6">
+          {/* Description */}
+          {detail?.description && (
+            <p className="text-sm text-duck-dark/60 dark:text-foreground/60 mb-4">{detail.description}</p>
+          )}
+
+          {/* Meta badges */}
+          <div className="flex flex-wrap gap-2 mb-4">
+            {detail?.scope && detail.scope !== 'user' && (
+              <span className="text-[10px] px-1.5 py-0.5 rounded bg-duck-dark/8 dark:bg-foreground/8 text-duck-dark/50 dark:text-foreground/50 font-medium">
+                {detail.scope}
+              </span>
+            )}
+            {detail?.language && (
+              <span className="text-[10px] px-1.5 py-0.5 rounded bg-duck-dark/8 dark:bg-foreground/8 text-duck-dark/50 dark:text-foreground/50 font-medium">
+                {detail.language}
+              </span>
+            )}
+            {detail?.version && (
+              <span className="text-[10px] px-1.5 py-0.5 rounded bg-duck-dark/8 dark:bg-foreground/8 text-duck-dark/50 dark:text-foreground/50 font-medium">
+                v{detail.version}
+              </span>
+            )}
+          </div>
+
+          {/* Pipeline steps */}
+          {hasSteps && (
+            <div className="mb-4">
+              <h3 className="text-xs font-medium text-duck-dark/50 dark:text-foreground/50 uppercase tracking-wider mb-2">Pipeline Steps</h3>
+              <div className="flex flex-col gap-1">
+                {detail!.config!.steps!.map((step, i) => (
+                  <div key={i} className="flex items-center gap-2 text-sm text-duck-dark/70 dark:text-foreground/70 px-2 py-1 rounded bg-duck-dark/3 dark:bg-foreground/3">
+                    <span className="w-5 text-center font-mono text-xs text-duck-dark/40 dark:text-foreground/40">{i + 1}</span>
+                    <span className="font-medium">{step.task}</span>
+                    {step.foreach && <span className="text-xs text-duck-dark/40 dark:text-foreground/40">(foreach: {step.foreach})</span>}
+                  </div>
+                ))}
+              </div>
+            </div>
+          )}
+
+          {/* Inputs */}
+          {hasInputs && (
+            <div className="mb-4">
+              <h3 className="text-xs font-medium text-duck-dark/50 dark:text-foreground/50 uppercase tracking-wider mb-2">Inputs</h3>
+              <div className="flex flex-col gap-1">
+                {Object.entries(detail!.inputs!).map(([key, def]) => {
+                  const d = def as { type?: string; description?: string; default?: string };
+                  return (
+                    <div key={key} className="flex items-baseline gap-2 text-sm px-2 py-1 rounded bg-duck-dark/3 dark:bg-foreground/3">
+                      <span className="font-mono text-xs text-duck-teal">{key}</span>
+                      {d.type && <span className="text-[10px] text-duck-dark/40 dark:text-foreground/40">{d.type}</span>}
+                      {d.description && <span className="text-xs text-duck-dark/50 dark:text-foreground/50 flex-1">{d.description}</span>}
+                    </div>
+                  );
+                })}
+              </div>
+            </div>
+          )}
+
+          {/* Body (agent instructions) */}
+          {detail?.body ? (
+            <article className="skill-md">
+              <ReactMarkdown remarkPlugins={[remarkGfm]} rehypePlugins={[rehypeRaw]}>
+                {detail.body}
+              </ReactMarkdown>
+            </article>
+          ) : detail && !hasSteps ? (
+            <p className="text-sm text-duck-dark/40 dark:text-foreground/40 text-center mt-12">No instructions</p>
+          ) : null}
+        </div>
+      </Card>
+
+      {/* Delete confirmation */}
+      <Dialog open={deleteConfirm} onOpenChange={setDeleteConfirm}>
+        <DialogContent className="sm:max-w-md z-[700]">
+          <DialogHeader>
+            <DialogTitle>Delete Automation</DialogTitle>
+            <DialogDescription>
+              Are you sure you want to delete &quot;{selected.name}&quot;? This cannot be undone.
+            </DialogDescription>
+          </DialogHeader>
+          <div className="flex justify-end gap-2 mt-2">
+            <Button variant="outline" onClick={() => setDeleteConfirm(false)} className="cursor-pointer">
+              Cancel
+            </Button>
+            <Button variant="destructive" onClick={handleDelete} className="cursor-pointer">
+              Delete
+            </Button>
+          </div>
+        </DialogContent>
+      </Dialog>
+
+      {/* Run modal */}
+      {runTask && (
+        <TaskRunnerModal
+          open
+          onOpenChange={(open) => { if (!open) setRunTask(null); }}
+          task={runTask}
+        />
+      )}
+    </>
+  );
+};
diff --git a/src/apps/officer-web/Screens/Dashboard/Automation/AutomationEditChat.tsx b/src/apps/officer-web/Screens/Dashboard/Automation/AutomationEditChat.tsx
deleted file mode 100644
index 70f11a15..00000000
--- a/src/apps/officer-web/Screens/Dashboard/Automation/AutomationEditChat.tsx
+++ /dev/null
@@ -1,79 +0,0 @@
-import { useState } from 'react';
-import { useQuery, useQueryClient } from '@tanstack/react-query';
-import { toast } from 'sonner';
-import { Trash2, X } from 'lucide-react';
-import { useClient } from 'hooks/useClient';
-import { usePanelChannel } from 'hooks/usePanelChannel';
-import { CapabilityChat } from '../CapabilityPage';
-import type { CapabilityDetail } from '../CapabilityPage';
-import type { AutomationSelection } from './AutomationRightPanel';
-
-export const AutomationEditChat = () => {
-  const client = useClient();
-  const qc = useQueryClient();
-  const [selection, setSelection] = usePanelChannel<AutomationSelection>('automation:selected-capability', null);
-  const [chatKey, setChatKey] = useState(0);
-
-  const { data: detail } = useQuery<CapabilityDetail>({
-    queryKey: [selection?.queryKey, selection?.dirName],
-    queryFn: () => client.get<CapabilityDetail>(`${selection!.endpoint}/${selection!.dirName}`),
-    enabled: !!selection,
-  });
-
-  const closeChat = () => {
-    if (!selection) return;
-    setSelection({ ...selection, editing: false });
-  };
-
-  const deleteChat = async () => {
-    if (!selection) return;
-    try {
-      await client.delete(`${selection.endpoint}/${selection.dirName}/chat`);
-      await qc.invalidateQueries({ queryKey: [selection.queryKey, selection.dirName] });
-      setChatKey((k) => k + 1);
-    } catch {
-      toast.error('Failed to delete chat');
-    }
-  };
-
-  if (!selection || !detail?.filePath) {
-    return (
-      <div className="h-full flex items-center justify-center">
-        <p className="text-sm text-duck-dark/40 dark:text-foreground/40">Select a resource and click edit to chat</p>
-      </div>
-    );
-  }
-
-  return (
-    <div className="h-full flex flex-col">
-      <div className="shrink-0 px-4 py-1.5 border-b border-duck-dark/10 dark:border-foreground/10 bg-background/60 flex items-center gap-2">
-        <span className="text-xs font-medium text-duck-dark/50 dark:text-foreground/50 flex-1">{detail.name ?? 'Chat'}</span>
-        <button
-          onClick={deleteChat}
-          className="p-1 rounded hover:bg-red-500/10 cursor-pointer transition-colors"
-          title="Delete chat history"
-        >
-          <Trash2 className="h-3.5 w-3.5 text-duck-dark/50 dark:text-foreground/50 hover:text-red-500" />
-        </button>
-        <button onClick={closeChat} className="p-1 rounded hover:bg-duck-dark/10 dark:hover:bg-foreground/10 cursor-pointer transition-colors">
-          <X className="h-3.5 w-3.5 text-duck-dark/50 dark:text-foreground/50" />
-        </button>
-      </div>
-      <CapabilityChat
-        kind={selection.kind.toLowerCase()}
-        key={`${detail.filePath}-${chatKey}`}
-        endpoint={selection.endpoint}
-        dirName={selection.dirName}
-        filePath={detail.filePath}
-        resourceDir={detail.filePath.replace(/\/[^/]+$/, '')}
-        chatSessionId={chatKey > 0 ? null : detail.chatSessionId}
-        isNew={selection.isNew}
-        description={selection.description}
-        onResponseEnd={() => {
-          qc.invalidateQueries({ queryKey: [selection.queryKey, selection.dirName] });
-          qc.invalidateQueries({ queryKey: [selection.queryKey] });
-        }}
-      />
-    </div>
-  );
-};
diff --git a/src/apps/officer-web/Screens/Dashboard/Automation/AutomationList.tsx b/src/apps/officer-web/Screens/Dashboard/Automation/AutomationList.tsx
new file mode 100644
index 00000000..b0a69b8b
--- /dev/null
+++ b/src/apps/officer-web/Screens/Dashboard/Automation/AutomationList.tsx
@@ -0,0 +1,202 @@
+import { useState } from 'react';
+import { useQuery, useQueryClient } from '@tanstack/react-query';
+import { toast } from 'sonner';
+import { Plus, Search, Play, Terminal, Bot, Workflow } from 'lucide-react';
+import { Dialog, DialogContent, DialogHeader, DialogTitle, DialogDescription } from '@/components/ui/dialog';
+import { Button } from '@/components/ui/button';
+import { useClient } from 'hooks/useClient';
+import { usePanelChannel } from 'hooks/usePanelChannel';
+import { TaskRunnerModal } from 'officerdev';
+import type { TaskSummary } from 'officerdev';
+
+const modeIcons = {
+  script: Terminal,
+  agentic: Bot,
+  pipeline: Workflow,
+} as const;
+
+const modeColors = {
+  script: 'bg-emerald-500/10 text-emerald-600',
+  agentic: 'bg-violet-500/10 text-violet-600',
+  pipeline: 'bg-amber-500/10 text-amber-600',
+} as const;
+
+export const AutomationList = () => {
+  const client = useClient();
+  const qc = useQueryClient();
+  const [selected, setSelected] = usePanelChannel<TaskSummary | null>('automation:selected-task', null);
+  const [search, setSearch] = useState('');
+  const [showCreate, setShowCreate] = useState(false);
+  const [createName, setCreateName] = useState('');
+  const [createDesc, setCreateDesc] = useState('');
+  const [creating, setCreating] = useState(false);
+  const [runTask, setRunTask] = useState<TaskSummary | null>(null);
+
+  const { data: tasks = [] } = useQuery<TaskSummary[]>({
+    queryKey: ['tasks'],
+    queryFn: () => client.get('/tasks'),
+    staleTime: 60_000,
+  });
+
+  const q = search.toLowerCase();
+  const filtered = search
+    ? tasks.filter((t) => t.name.toLowerCase().includes(q) || t.description?.toLowerCase().includes(q))
+    : tasks;
+
+  const handleCreate = async () => {
+    const name = createName.trim();
+    if (!name) return;
+    setCreating(true);
+    try {
+      await client.post('/tasks', { name, description: createDesc.trim() || undefined });
+      await qc.invalidateQueries({ queryKey: ['tasks'] });
+      setShowCreate(false);
+      setCreateName('');
+      setCreateDesc('');
+      toast.success('Automation created');
+    } catch {
+      toast.error('Failed to create automation');
+    } finally {
+      setCreating(false);
+    }
+  };
+
+  return (
+    <>
+      <div className="h-full flex flex-col">
+        {/* Header */}
+        <div className="shrink-0 px-4 py-2 border-b border-duck-dark/10 dark:border-foreground/10 bg-background/60 flex items-center gap-2">
+          <span className="text-sm font-medium text-duck-dark/70 dark:text-foreground/70 flex-1">Automations</span>
+          <button
+            onClick={() => setShowCreate(true)}
+            className="p-1 rounded hover:bg-duck-dark/10 dark:hover:bg-foreground/10 cursor-pointer transition-colors"
+          >
+            <Plus className="h-3.5 w-3.5 text-duck-dark/50 dark:text-foreground/50" />
+          </button>
+        </div>
+
+        {/* Search */}
+        <div className="px-3 pt-3">
+          <div className="relative">
+            <Search className="absolute left-2 top-1/2 -translate-y-1/2 h-3.5 w-3.5 text-duck-dark/30 dark:text-foreground/30" />
+            <input
+              value={search}
+              onChange={(ev) => setSearch(ev.target.value)}
+              placeholder="Search..."
+              className="w-full rounded border border-duck-dark/15 dark:border-foreground/15 bg-background/80 pl-7 pr-2 py-1.5 text-sm text-duck-dark dark:text-foreground placeholder:text-duck-dark/30 dark:placeholder:text-foreground/30 focus:outline-none focus:ring-1 focus:ring-duck-teal/30"
+            />
+          </div>
+        </div>
+
+        {/* Task list */}
+        <div className="flex-1 overflow-y-auto px-3 pt-2 pb-3">
+          <div className="flex flex-col gap-0.5">
+            {filtered.map((task) => {
+              const ModeIcon = modeIcons[task.mode] ?? Bot;
+              const modeColor = modeColors[task.mode] ?? modeColors.agentic;
+              const isSelected = selected?.dirName === task.dirName;
+              return (
+                <div
+                  key={task.dirName}
+                  className={`group flex items-center gap-2 w-full text-left px-3 py-2 rounded-lg text-sm transition-colors ${
+                    isSelected
+                      ? 'bg-duck-teal/10 text-duck-dark dark:text-foreground'
+                      : 'text-duck-dark/60 dark:text-foreground/60 hover:bg-duck-dark/5 dark:hover:bg-foreground/5 hover:text-duck-dark dark:hover:text-foreground'
+                  }`}
+                >
+                  <button
+                    onClick={() => setSelected(task)}
+                    className="flex-1 min-w-0 text-left cursor-pointer"
+                  >
+                    <div className="flex items-center gap-1.5">
+                      <span className="font-medium truncate">{task.name}</span>
+                      <span className={`shrink-0 inline-flex items-center gap-0.5 px-1 py-0.5 rounded text-[9px] font-medium ${modeColor}`}>
+                        <ModeIcon className="h-2.5 w-2.5" />
+                      </span>
+                    </div>
+                    {task.description && (
+                      <p className="text-xs text-duck-dark/40 dark:text-foreground/40 mt-0.5 line-clamp-1">{task.description}</p>
+                    )}
+                  </button>
+                  <button
+                    onClick={(ev) => { ev.stopPropagation(); setRunTask(task); }}
+                    className="p-1 rounded hover:bg-duck-teal/10 transition-colors cursor-pointer opacity-0 group-hover:opacity-100 shrink-0"
+                    title="Run"
+                  >
+                    <Play className="h-3 w-3 text-duck-teal" />
+                  </button>
+                </div>
+              );
+            })}
+            {tasks.length === 0 && (
+              <p className="text-xs text-duck-dark/40 dark:text-foreground/40 px-3 py-4 text-center">
+                No automations yet
+              </p>
+            )}
+            {tasks.length > 0 && filtered.length === 0 && (
+              <p className="text-xs text-duck-dark/40 dark:text-foreground/40 px-3 py-4 text-center">
+                No matches
+              </p>
+            )}
+          </div>
+        </div>
+      </div>
+
+      {/* Create dialog */}
+      <Dialog open={showCreate} onOpenChange={setShowCreate}>
+        <DialogContent className="sm:max-w-md z-[700]">
+          <DialogHeader>
+            <DialogTitle>Create Automation</DialogTitle>
+            <DialogDescription>Give your automation a name and optional description.</DialogDescription>
+          </DialogHeader>
+          <form
+            onSubmit={(ev) => { ev.preventDefault(); handleCreate(); }}
+            className="flex flex-col gap-3 mt-1"
+          >
+            <div className="flex flex-col gap-1.5">
+              <label className="text-sm font-medium text-duck-dark/70 dark:text-foreground/70">Name</label>
+              <input
+                value={createName}
+                onChange={(ev) => setCreateName(ev.target.value)}
+                placeholder="e.g. Batch Resize Images"
+                autoFocus
+                className="rounded border border-duck-dark/20 dark:border-foreground/20 bg-background px-3 py-2 text-sm text-duck-dark dark:text-foreground placeholder:text-duck-dark/30 dark:placeholder:text-foreground/30 focus:outline-none focus:ring-1 focus:ring-duck-teal/30"
+              />
+            </div>
+            <div className="flex flex-col gap-1.5">
+              <label className="text-sm font-medium text-duck-dark/70 dark:text-foreground/70">Description</label>
+              <textarea
+                value={createDesc}
+                onChange={(ev) => setCreateDesc(ev.target.value)}
+                placeholder="What does this automation do?"
+                rows={3}
+                className="rounded border border-duck-dark/20 dark:border-foreground/20 bg-background px-3 py-2 text-sm text-duck-dark dark:text-foreground placeholder:text-duck-dark/30 dark:placeholder:text-foreground/30 focus:outline-none focus:ring-1 focus:ring-duck-teal/30 resize-none"
+              />
+            </div>
+            <div className="flex justify-end gap-2 mt-1">
+              <Button type="button" variant="outline" onClick={() => setShowCreate(false)} className="cursor-pointer">
+                Cancel
+              </Button>
+              <Button
+                type="submit"
+                disabled={!createName.trim() || creating}
+                className="bg-duck-teal text-white hover:bg-duck-teal/90 cursor-pointer"
+              >
+                {creating ? 'Creating...' : 'Create'}
+              </Button>
+            </div>
+          </form>
+        </DialogContent>
+      </Dialog>
+
+      {/* Run modal */}
+      {runTask && (
+        <TaskRunnerModal
+          open
+          onOpenChange={(open) => { if (!open) setRunTask(null); }}
+          task={runTask}
+        />
+      )}
+    </>
+  );
+};
diff --git a/src/apps/officer-web/Screens/Dashboard/Automation/AutomationRightPanel.tsx b/src/apps/officer-web/Screens/Dashboard/Automation/AutomationRightPanel.tsx
deleted file mode 100644
index 5412fdc4..00000000
--- a/src/apps/officer-web/Screens/Dashboard/Automation/AutomationRightPanel.tsx
+++ /dev/null
@@ -1,56 +0,0 @@
-import { usePanelChannel } from 'hooks/usePanelChannel';
-import { CapabilityDetailView } from './CapabilityDetailView';
-import { CapabilityList } from './CapabilityList';
-import { NewTask } from './NewTask';
-import { NewSkill } from './NewSkill';
-import { NewProcess } from './NewProcess';
-import { NewPipeline } from './NewPipeline';
-import { NewCron } from './NewCron';
-import { NewService } from './NewService';
-import { NewWorkflow } from './NewWorkflow';
-import { NewTool } from './NewTool';
-
-export type AutomationSelection = {
-  kind: string;
-  endpoint: string;
-  queryKey: string;
-  dirName: string;
-  isNew?: boolean;
-  editing?: boolean;
-  creating?: boolean;
-  description?: string;
-} | null;
-
-const newComponentMap: Record<string, React.ComponentType<{ selection: NonNullable<AutomationSelection> }>> = {
-  Task: NewTask,
-  Skill: NewSkill,
-  Process: NewProcess,
-  Pipeline: NewPipeline,
-  Cron: NewCron,
-  Service: NewService,
-  Workflow: NewWorkflow,
-  Tool: NewTool,
-};
-
-export const AutomationRightPanel = () => {
-  const [selection] = usePanelChannel<AutomationSelection>('automation:selected-capability', null);
-
-  if (!selection) {
-    return (
-      <div className="h-full flex items-center justify-center">
-        <p className="text-sm text-duck-dark/40">Select a category from the sidebar</p>
-      </div>
-    );
-  }
-
-  if (selection.creating) {
-    const NewComponent = newComponentMap[selection.kind];
-    if (NewComponent) return <NewComponent selection={selection} />;
-  }
-
-  if (!selection.dirName) {
-    return <CapabilityList key={selection.queryKey} kind={selection.kind} endpoint={selection.endpoint} queryKey={selection.queryKey} />;
-  }
-
-  return <CapabilityDetailView key={`${selection.queryKey}:${selection.dirName}`} {...selection} />;
-};
diff --git a/src/apps/officer-web/Screens/Dashboard/Automation/AutomationSidebar.tsx b/src/apps/officer-web/Screens/Dashboard/Automation/AutomationSidebar.tsx
deleted file mode 100644
index 2cdfd9c7..00000000
--- a/src/apps/officer-web/Screens/Dashboard/Automation/AutomationSidebar.tsx
+++ /dev/null
@@ -1,51 +0,0 @@
-import { Box, Clock, Cpu, GitBranch, ListTodo, Server, Sparkles, Workflow, Wrench } from 'lucide-react';
-import { usePanelChannel } from 'hooks/usePanelChannel';
-import type { AutomationSelection } from './AutomationRightPanel';
-
-const capabilityItems = [
-  { id: 'skills', label: 'Skills', icon: Sparkles, kind: 'Skill', endpoint: '/skills', queryKey: 'skills' },
-  { id: 'tools', label: 'Tools', icon: Wrench, kind: 'Tool', endpoint: '/tools', queryKey: 'tools' },
-  { id: 'tasks', label: 'Tasks', icon: ListTodo, kind: 'Task', endpoint: '/tasks', queryKey: 'tasks' },
-  { id: 'pipelines', label: 'Pipelines', icon: Workflow, kind: 'Pipeline', endpoint: '/pipelines', queryKey: 'pipelines' },
-  { id: 'processes', label: 'Processes', icon: Cpu, kind: 'Process', endpoint: '/processes', queryKey: 'processes' },
-  { id: 'workflows', label: 'Workflows', icon: GitBranch, kind: 'Workflow', endpoint: '/workflows', queryKey: 'workflows' },
-  { id: 'crons', label: 'Crons', icon: Clock, kind: 'Cron', endpoint: '/crons', queryKey: 'crons' },
-  { id: 'services', label: 'Services', icon: Server, kind: 'Service', endpoint: '/services', queryKey: 'services' },
-] as const;
-
-export const AutomationSidebar = () => {
-  const [selection, setSelection] = usePanelChannel<AutomationSelection>('automation:selected-capability', null);
-
-  return (
-    <div className="flex flex-col h-full overflow-y-auto">
-      <div className="p-3 pb-0">
-        <div className="flex items-center gap-2.5 rounded-lg px-3 py-2 text-sm font-medium bg-duck-teal/15 text-duck-teal">
-          <Box className="h-4 w-4" />
-          Automation
-        </div>
-      </div>
-      <div className="flex flex-col gap-0.5 px-3 pt-3">
-        {capabilityItems.map((item) => {
-          const Icon = item.icon;
-          const active = selection?.queryKey === item.queryKey;
-          return (
-            <button
-              key={item.id}
-              onClick={() =>
-                setSelection({ kind: item.kind, endpoint: item.endpoint, queryKey: item.queryKey, dirName: '' })
-              }
-              className={`flex items-center gap-2.5 py-2 px-3 rounded-lg text-sm font-medium transition-all cursor-pointer ${
-                active
-                  ? 'bg-duck-teal/10 text-duck-dark'
-                  : 'text-duck-dark/60 hover:bg-duck-dark/5 hover:text-duck-dark'
-              }`}
-            >
-              <Icon className="h-4 w-4 shrink-0" />
-              <span className="flex-1 text-left">{item.label}</span>
-            </button>
-          );
-        })}
-      </div>
-    </div>
-  );
-};
diff --git a/src/apps/officer-web/Screens/Dashboard/Automation/CLAUDE.md b/src/apps/officer-web/Screens/Dashboard/Automation/CLAUDE.md
index 83f052df..5b84d787 100644
--- a/src/apps/officer-web/Screens/Dashboard/Automation/CLAUDE.md
+++ b/src/apps/officer-web/Screens/Dashboard/Automation/CLAUDE.md
@@ -2,275 +2,48 @@
 
 ## Overview
 
-The `/automation` route is the hub for managing AI agent capabilities: skills, tools, tasks, and processes. Each capability is a markdown file (with YAML frontmatter) stored on the filesystem. There is no relational database for automation data.
+The `/automation` route shows all user automations (tasks) in a standard `WorkspaceView` layout: left panel for the list, right panel for task details.
 
-The page uses a resizable `WorkspaceView` layout with three panels: a sidebar to pick categories, a right panel for browsing/viewing, and an optional bottom-right chat panel for AI-assisted editing.
+## Route
 
-```
-+------------------+------------------------------------------+
-|  Sidebar (20%)   |  Right Panel (80%)                       |
-|                  |  - CapabilityList       (browse)         |
-|  8 categories    |  - CapabilityDetailView (selected item)  |
-|                  |  - New* form            (creating)       |
-|                  +------------------------------------------+
-|                  |  AutomationEditChat (when editing, 50%)  |
-+------------------+------------------------------------------+
-```
-
-## Route & Entry Point
-
-Defined in `App.tsx`:
 ```tsx
 <Route path="/automation" element={<Dashboard.Automation />} />
-<Route path="/new-automation" element={<Dashboard.NewAutomation />} />  // stub, not implemented
 ```
 
-Entry component: `index.tsx` (`Automation`). Manages the `WorkspaceView` layout and dynamically adds/removes the chat panel based on `selection.editing`.
+## Layout
 
-## Capability Categories
-
-| Category | Kind | Backend Route | Status |
-|----------|------|---------------|--------|
-| Skills | `Skill` | `GET/POST/DELETE /api/skills` | Working |
-| Tools | `Tool` | `GET/POST/DELETE /api/tools` | Working |
-| Tasks | `Task` | `GET/POST/DELETE /api/tasks` | Working |
-| Processes | `Process` | `GET/POST/DELETE /api/processes` | Working |
-| Pipelines | `Pipeline` | None | Placeholder (404) |
-| Workflows | `Workflow` | None | Placeholder (404) |
-| Crons | `Cron` | None | Placeholder (404) |
-| Services | `Service` | None | Placeholder (404) |
-
-Defined as `capabilityItems` in `AutomationSidebar.tsx`.
-
-## State Management
-
-All cross-panel communication uses a single shared channel:
-
-```ts
-usePanelChannel<AutomationSelection>('automation:selected-capability', null)
+```
++------------------+------------------------------------------+
+|  List (30%)      |  Detail (70%)                            |
+|                  |                                          |
+|  Search          |  Task name, mode, description            |
+|  Task items      |  Pipeline steps / Inputs / Body          |
+|  + Create        |  Run / Delete actions                    |
++------------------+------------------------------------------+
 ```
 
-`AutomationSelection` (defined in `AutomationRightPanel.tsx`):
-```ts
-type AutomationSelection = {
-  kind: string;        // 'Skill' | 'Task' | 'Tool' | 'Process' | etc.
-  endpoint: string;    // '/skills' | '/tasks' | etc.
-  queryKey: string;    // React Query cache key
-  dirName: string;     // '' = list view, non-empty = detail view
-  isNew?: boolean;     // just created, AI chat opens in creation mode
-  editing?: boolean;   // chat panel is open
-  creating?: boolean;  // New* form is shown
-  description?: string; // passed to AI as initial context
-} | null;
-```
-
-Layout state persisted via `useDashboardState('screens/automation')`.
+Uses `useDashboardState('screens/automation')` for persistent layout and `usePanelChannel<TaskSummary>('automation:selected-task')` for cross-panel selection.
 
 ## Components
 
-### `AutomationSidebar.tsx`
-Left nav with the 8 category buttons. Clicking sets selection to `{ kind, endpoint, queryKey, dirName: '' }` (list view).
+### `index.tsx`
+Entry point. Sets up `WorkspaceView` with two panels, manages mobile panel switching.
 
-### `AutomationRightPanel.tsx`
-Routes to one of three views based on selection state:
-- `creating === true` -> `New*` form (mapped via `newComponentMap[kind]`)
-- `dirName === ''` -> `CapabilityList` (browse items)
-- `dirName !== ''` -> `CapabilityDetailView` (detail for specific item)
+### `AutomationList.tsx`
+Left panel. Fetches tasks from `GET /tasks`, shows searchable list with mode badges (Script/Agentic/Pipeline). Has create dialog and run button per task.
 
-### `CapabilityList.tsx`
-Fetches items from `GET {endpoint}`, renders filterable list. Has `+` button to set `creating: true`.
+### `AutomationDetail.tsx`
+Right panel. Fetches task detail from `GET /tasks/:name`. Shows description, pipeline steps, input definitions, and markdown body. Run and delete actions.
 
-### `CapabilityDetailView.tsx`
-Shows a selected capability's detail (frontmatter + markdown body). Header actions:
-- **Back arrow** - returns to list view
-- **Run** (tasks only) - parses `inputs:` from frontmatter YAML, opens `TaskRunnerModal`
-- **Edit** - toggles `selection.editing` to open/close chat panel
-- **Delete** - confirmation dialog, then `DELETE {endpoint}/{dirName}`
+## Task Data
 
-Task input parsing (`parseInputs`) supports: `string`, `number`, `boolean`, `select` types.
+Tasks come from `officerdb` database. Modes:
+- **script** (green) — deterministic bash/python/ts
+- **agentic** (purple) — AI-powered with MCP tools
+- **pipeline** (amber) — multi-step orchestration
 
-### `AutomationEditChat.tsx`
-Bottom chat panel for AI-assisted editing. Uses `CapabilityChat` from `CapabilityPage.tsx`. Features:
-- Delete chat history button (`DELETE {endpoint}/{dirName}/chat`)
-- Close button (sets `editing: false`)
-- On AI response end, invalidates both individual and list query caches
+## Related
 
-### `New*.tsx` (8 components)
-`NewTask`, `NewSkill`, `NewTool`, `NewProcess`, `NewPipeline`, `NewCron`, `NewService`, `NewWorkflow`. All structurally identical:
-1. Name + description form
-2. `POST {endpoint}` with `{ name }`
-3. On success: transitions to detail view with `isNew: true, editing: true` (opens AI chat in creation mode)
-
-## Shared Components (`CapabilityPage.tsx`)
-
-Located at `../CapabilityPage.tsx`. Exports used by automation:
-
-- **`CapabilityChat`** - AI chat wired to Pi agent via `usePiChat()` + `EmbeddableChat`. Injects `promptFrontmatter` prefix before every message. For `isNew === true`, uses rich creation guides (`buildTaskCreationPrefix`, `buildSkillCreationPrefix`, `buildToolCreationPrefix`).
-- **`FrontmatterBlock`** - Collapsible YAML frontmatter display.
-- **`CapabilityDetail`** type - `{ dirName, name, description, scope, body, rawFrontmatter, filePath, chatSessionId }`.
-- **`CapabilityPage`** - Legacy standalone two-panel page (used by `/skills`, `/tasks`, `/processes` routes, not by `/automation`).
-
-## Backend
-
-All four working routers (`skills`, `tools`, `tasks`, `processes`) follow the exact same pattern. Registered on the protected router in `hono.ts`.
-
-### API Endpoints (per capability type)
-
-| Method | Path | Description |
-|--------|------|-------------|
-| `GET` | `/{type}` | List all items (native + global + user merged) |
-| `GET` | `/{type}/:name` | Get detail: frontmatter, body, rawYaml, filePath, chatSessionId |
-| `POST` | `/{type}` | Create new item (dir + stub `.md`) |
-| `DELETE` | `/{type}/:name` | Delete item directory |
-| `GET` | `/{type}/:name/chat` | Get saved chat messages |
-| `PUT` | `/{type}/:name/chat` | Save chat messages + session meta |
-| `DELETE` | `/{type}/:name/chat` | Delete chat directory |
-
-Route files:
-- `src/servers/api/skills/skills.ts`
-- `src/servers/api/tools/tools.ts`
-- `src/servers/api/tasks/tasks.ts` (also parses `trigger:` block from frontmatter)
-- `src/servers/api/processes/processes.ts`
-
-### Task Logs
-
-| Method | Path | Description |
-|--------|------|-------------|
-| `GET` | `/task-logs` | List all log metadata (newest first) |
-| `GET` | `/task-logs/:filename` | Get full log with messages |
-
-Route file: `src/servers/api/task-logs/task-logs.ts`
-
-## Storage Model
-
-Everything is stored on the filesystem. No database tables.
-
-```
-DATA_PATH/
-  skills/                         <- global scope
-    {skill-name}/
-      SKILL.md                    <- frontmatter + markdown body
-      chat/
-        meta.json                 <- { id: sessionId }
-        messages.json             <- ChatMessage[]
-  tasks/                          <- global scope
-    {task-name}/TASK.md
-  tools/                          <- global scope
-    {tool-name}/TOOL.md
-  processes/                      <- global scope
-    {process-name}/PROCESS.md
-  {user-email}/                   <- user scope
-    skills/
-    tasks/
-    tools/
-    processes/
-    logs/tasks/                   <- task execution logs
-      {timestamp}-{dirName}.json
-
-SEED_PATH/                        <- native scope (read-only, shipped with app)
-  skills/   (sharp, whisper-cpp, google-mail-api, ffmpeg, mutagen, fizzy-cli, mlxaudio)
-  tasks/    (convert-to-mp3, sync-gmail-inbox, tiktok-trends, transcribe-audio-file, ...)
-  tools/    (apify, browser, email-db, ffmpeg, gmail, ocr, web-fetch, web-search, ...)
-```
-
-Path helpers: `src/servers/data-path.ts` (`getNativeSkillsDir`, `getGlobalSkillsDir`, `getUserSkillsDir`, etc.)
-
-### Scope & Permissions
-
-Three tiers with override resolution: **user > global > native**.
-
-- `native`: seed directory, read-only, shipped with the app
-- `global`: shared data directory, writable by Super Admin
-- `user`: per-user directory, writable by the owning user
-
-Regular users (`Member`) can only create/delete `user`-scoped items. `Super Admin` can also create/delete `global` items.
-
-## Markdown File Formats
-
-### TASK.md
-```yaml
----
-name: Task Name
-description: What the task does.
-version: 1
-author: pastilhas
-tags: [tag1, tag2]
-skills: [skill-name]       # optional, skills the agent can consult
-tools: [tool_name]         # optional, tools the agent can call
-trigger:                   # optional, when omitted: only runnable from Automation page
-  - type: file
-    extensions: [mp3, flac]
-  - type: directory
-inputs:                    # optional, parameters the user fills in before running
-  - name: param_name
-    type: string           # string | number | boolean | select
-    required: true
-    default: some value
----
-
-(Agent instructions in markdown)
-```
-
-### SKILL.md
-```yaml
----
-name: skill-name
-description: When to use this skill.
----
-
-(Knowledge base / reference documentation in markdown)
-```
-
-### TOOL.md
-```yaml
----
-name: tool_name
-label: Tool Display Name
-description: What the tool does.
-language: typescript        # typescript | bash | python
-inputs:
-  param_name:
-    type: string            # string | number | boolean | enum | object
-    description: What this parameter is for.
-    optional: true
-    sensitive: true
----
-
-(Usage notes, output format, examples in markdown)
-```
-
-### PROCESS.md
-Same structure as SKILL.md (name + description frontmatter, markdown body).
-
-## Task Execution Flow
-
-1. User clicks "Run" on a task in `CapabilityDetailView`
-2. `parseInputs()` extracts `inputs:` from YAML frontmatter
-3. If inputs exist: shows input form dialog; if none: runs immediately
-4. Opens `TaskRunnerModal` with prompt: `"Read the task instructions at {filePath} and execute them"` (+ input values if any)
-5. Modal connects to Pi agent WebSocket via `usePiChat()`
-6. Agent reads the `TASK.md`, resolves skill/tool references, executes in the user's sandboxed container
-7. `task-logger.ts` (`createTaskLog` -> `appendToLog` -> `finalizeLog`) writes execution log to `DATA_PATH/{email}/logs/tasks/`
-
-## Task Trigger Integration
-
-Tasks with `trigger:` in their frontmatter appear in the file browser context menu:
-- `type: file` + `extensions: [mp3]` -> right-click on `.mp3` files shows this task
-- `type: directory` -> right-click on directories shows this task
-
-Implemented via `useTasks` hook in the `officerdev` workspace, which provides `getMatchingTasks(fileName, entryType)`.
-
-## Seed Sync (Startup)
-
-On server startup (`bootstrap.ts`):
-- `syncSeedSkills()` and `syncSeedTools()` copy/update native seeds to global based on `version:` in frontmatter
-- `syncSeedTasks()` exists in code but is **not called** in bootstrap
-
-## Legacy Routes
-
-Standalone pages still exist using the older `CapabilityPage` component:
-- `/skills` -> `CapabilityPage` (two-panel, list + detail/chat)
-- `/tasks` -> `CapabilityPage`
-- `/processes` -> `CapabilityPage`
-
-These share the same API endpoints but use the single-component layout instead of the workspace view.
+- `TaskRunnerModal` in `officerdev` workspace handles execution for all modes
+- `CapabilityPage.tsx` — legacy standalone pages for `/skills`, `/tasks`, `/processes`
+- File browser context menu triggers via `useTasks` hook
diff --git a/src/apps/officer-web/Screens/Dashboard/Automation/CapabilityDetailView.tsx b/src/apps/officer-web/Screens/Dashboard/Automation/CapabilityDetailView.tsx
deleted file mode 100644
index 5b24d5df..00000000
--- a/src/apps/officer-web/Screens/Dashboard/Automation/CapabilityDetailView.tsx
+++ /dev/null
@@ -1,290 +0,0 @@
-import { useState, useMemo } from 'react';
-import { useQuery, useQueryClient } from '@tanstack/react-query';
-import ReactMarkdown from 'react-markdown';
-import remarkGfm from 'remark-gfm';
-import rehypeRaw from 'rehype-raw';
-import { toast } from 'sonner';
-import { ArrowLeft, Pencil, Play, Trash2 } from 'lucide-react';
-import { Button } from '@/components/ui/button';
-import { Dialog, DialogContent, DialogHeader, DialogTitle, DialogDescription } from '@/components/ui/dialog';
-import { useClient } from 'hooks/useClient';
-import { useAuth } from 'hooks/useAuth';
-import { usePanelChannel } from 'hooks/usePanelChannel';
-import { Card } from '@/components/Card';
-import { FrontmatterBlock } from '../CapabilityPage';
-import type { CapabilityDetail } from '../CapabilityPage';
-import type { AutomationSelection } from './AutomationRightPanel';
-import { TaskRunnerModal } from 'officerdev';
-
-type SelectOption = { value: string; label: string };
-
-type TaskInput = {
-  name: string;
-  description: string;
-  type: 'string' | 'number' | 'boolean' | 'select';
-  required: boolean;
-  default: string;
-  options: SelectOption[];
-};
-
-function parseInputs(rawYaml: string): TaskInput[] {
-  // Match the inputs block: everything indented after "inputs:" until next top-level key or end
-  const inputsMatch = rawYaml.match(/^inputs:\s*\n((?:[ \t]+.*\n?)*)/m);
-  if (!inputsMatch) return [];
-  const block = inputsMatch[1]!;
-  // Split on list items that have a "name:" field (e.g. "  - name: country")
-  const items = block.split(/(?=[ \t]+-\s*name\s*:)/);
-  return items
-    .filter((item) => /name\s*:/.test(item))
-    .map((item) => {
-      const name = item.match(/name\s*:\s*(.+)/)?.[1]?.trim() ?? '';
-      const description = item.match(/description\s*:\s*(.+)/)?.[1]?.trim() ?? '';
-      const rawType = item.match(/type\s*:\s*(.+)/)?.[1]?.trim() ?? 'string';
-      const type = (['string', 'number', 'boolean', 'select'] as const).includes(rawType as 'string')
-        ? (rawType as TaskInput['type'])
-        : 'string';
-      const required = item.match(/required\s*:\s*(.+)/)?.[1]?.trim() === 'true';
-      const defaultFromField = item.match(/default\s*:\s*(.+)/)?.[1]?.trim();
-      const defaultFromDesc = description.match(/[Dd]efaults?\s+to\s+(\S+?)\.?\s*$/)?.[1];
-
-      const options: SelectOption[] = [];
-      const optionsMatch = item.match(/options\s*:\s*\n((?:[ \t]+.*\n?)*)/);
-      if (optionsMatch) {
-        const optionEntries = optionsMatch[1]!.split(/(?=[ \t]*- \s*value\s*:)/);
-        for (const entry of optionEntries) {
-          const value = entry.match(/value\s*:\s*(.+)/)?.[1]?.trim() ?? '';
-          const label = entry.match(/label\s*:\s*(.+)/)?.[1]?.trim() ?? value;
-          if (value) options.push({ value, label });
-        }
-      }
-
-      return { name, description, type, required, default: defaultFromField ?? defaultFromDesc ?? '', options };
-    });
-}
-
-type CapabilityDetailViewProps = {
-  kind: string;
-  endpoint: string;
-  queryKey: string;
-  dirName: string;
-  isNew?: boolean;
-  editing?: boolean;
-};
-
-export const CapabilityDetailView = ({ kind, endpoint, queryKey, dirName, editing }: CapabilityDetailViewProps) => {
-  const client = useClient();
-  const qc = useQueryClient();
-  const { user } = useAuth();
-  const [selection, setSelection] = usePanelChannel<AutomationSelection>('automation:selected-capability', null);
-  const [deleteConfirm, setDeleteConfirm] = useState(false);
-  const [showInputForm, setShowInputForm] = useState(false);
-  const [runPrompt, setRunPrompt] = useState<string | null>(null);
-  const [inputValues, setInputValues] = useState<Record<string, string>>({});
-
-  const { data: detail } = useQuery<CapabilityDetail>({
-    queryKey: [queryKey, dirName],
-    queryFn: () => client.get<CapabilityDetail>(`${endpoint}/${dirName}`),
-  });
-
-  const taskInputs = useMemo(() => (detail?.rawFrontmatter ? parseInputs(detail.rawFrontmatter) : []), [detail?.rawFrontmatter]);
-
-  const handleRunClick = () => {
-    if (taskInputs.length > 0) {
-      const defaults: Record<string, string> = {};
-      for (const input of taskInputs) {
-        if (input.type === 'boolean') {
-          defaults[input.name] = input.default === 'true' ? 'true' : 'false';
-        } else if (input.type === 'select') {
-          defaults[input.name] = input.default || (input.options[0]?.value ?? '');
-        } else {
-          defaults[input.name] = input.default;
-        }
-      }
-      setInputValues(defaults);
-      setShowInputForm(true);
-    } else {
-      setRunPrompt(`Read the task instructions at ${detail!.filePath} and execute them`);
-    }
-  };
-
-  const handleInputSubmit = () => {
-    const parts = Object.entries(inputValues)
-      .filter(([, v]) => v !== '')
-      .map(([k, v]) => `- ${k}: ${v}`);
-    const suffix = parts.length > 0 ? `\n\nInputs:\n${parts.join('\n')}` : '';
-    setRunPrompt(`Read the task instructions at ${detail!.filePath} and execute them${suffix}`);
-    setShowInputForm(false);
-  };
-
-  const toggleEditing = () => {
-    if (!selection) return;
-    setSelection({ ...selection, editing: !editing });
-  };
-
-  const handleDelete = async () => {
-    try {
-      await client.delete(`${endpoint}/${dirName}`);
-      setDeleteConfirm(false);
-      await qc.invalidateQueries({ queryKey: [queryKey] });
-      setSelection(null);
-    } catch {
-      toast.error(`Failed to delete ${kind}`);
-    }
-  };
-
-  return (
-    <>
-      <Card className="h-full overflow-hidden flex flex-col min-h-0">
-        <div className="shrink-0 px-4 py-2 border-b border-duck-dark/10 dark:border-foreground/10 bg-background/60 flex items-center gap-2">
-          <button onClick={() => setSelection({ kind, endpoint, queryKey, dirName: '' })} className="p-1 -ml-1 rounded hover:bg-duck-dark/10 dark:hover:bg-foreground/10 cursor-pointer">
-            <ArrowLeft className="h-4 w-4 text-duck-dark/60 dark:text-foreground/60" />
-          </button>
-          <span className="text-sm font-medium text-duck-dark/70 dark:text-foreground/70 flex-1">{detail?.name ?? `Loading...`}</span>
-          {detail && (
-            <>
-              {kind === 'Task' && (
-                <button
-                  onClick={handleRunClick}
-                  className="p-1 rounded hover:bg-duck-dark/10 dark:hover:bg-foreground/10 cursor-pointer transition-colors"
-                  title="Run task"
-                >
-                  <Play className="h-3.5 w-3.5 text-duck-teal" />
-                </button>
-              )}
-              {(detail.scope === 'user' || user?.role === 'Super Admin') && (
-                <>
-                  <button
-                    onClick={toggleEditing}
-                    className={`p-1 rounded hover:bg-duck-dark/10 dark:hover:bg-foreground/10 cursor-pointer transition-colors ${editing ? 'bg-duck-teal/10' : ''}`}
-                  >
-                    <Pencil className={`h-3.5 w-3.5 ${editing ? 'text-duck-teal' : 'text-duck-dark/50 dark:text-foreground/50'}`} />
-                  </button>
-                  <button
-                    onClick={() => setDeleteConfirm(true)}
-                    className="p-1 rounded hover:bg-red-50 cursor-pointer transition-colors"
-                  >
-                    <Trash2 className="h-3.5 w-3.5 text-duck-dark/50 dark:text-foreground/50 hover:text-red-500" />
-                  </button>
-                </>
-              )}
-            </>
-          )}
-        </div>
-        <div className="overflow-y-auto flex-1 p-6">
-          {detail?.rawFrontmatter && <FrontmatterBlock yaml={detail.rawFrontmatter} />}
-          {detail?.body ? (
-            <article className="skill-md">
-              <ReactMarkdown remarkPlugins={[remarkGfm]} rehypePlugins={[rehypeRaw]}>
-                {detail.body}
-              </ReactMarkdown>
-            </article>
-          ) : detail ? (
-            <p className="text-sm text-duck-dark/40 dark:text-foreground/40 text-center mt-12">Empty file</p>
-          ) : null}
-        </div>
-      </Card>
-
-      <Dialog open={deleteConfirm} onOpenChange={setDeleteConfirm}>
-        <DialogContent className="sm:max-w-md z-[700]">
-          <DialogHeader>
-            <DialogTitle>Delete {kind}</DialogTitle>
-            <DialogDescription>
-              Are you sure you want to delete &quot;{detail?.name}&quot;? This action cannot be undone.
-            </DialogDescription>
-          </DialogHeader>
-          <div className="flex justify-end gap-2 mt-2">
-            <Button variant="outline" onClick={() => setDeleteConfirm(false)} className="cursor-pointer">
-              Cancel
-            </Button>
-            <Button variant="destructive" onClick={handleDelete} className="cursor-pointer">
-              Delete
-            </Button>
-          </div>
-        </DialogContent>
-      </Dialog>
-
-      <Dialog open={showInputForm} onOpenChange={setShowInputForm}>
-        <DialogContent className="sm:max-w-lg z-[700]">
-          <DialogHeader>
-            <DialogTitle>Run {detail?.name}</DialogTitle>
-            <DialogDescription>Configure inputs before running.</DialogDescription>
-          </DialogHeader>
-          <form
-            onSubmit={(ev) => {
-              ev.preventDefault();
-              handleInputSubmit();
-            }}
-            className="flex flex-col gap-3 mt-1"
-          >
-            {taskInputs.map((input) => (
-              <div key={input.name} className="flex flex-col gap-1">
-                {input.type === 'boolean' ? (
-                  <label className="flex items-center gap-2 text-sm font-medium text-foreground/70 cursor-pointer">
-                    <input
-                      type="checkbox"
-                      checked={inputValues[input.name] === 'true'}
-                      onChange={(ev) => setInputValues((prev) => ({ ...prev, [input.name]: ev.target.checked ? 'true' : 'false' }))}
-                      className="h-4 w-4 rounded border-foreground/20 accent-duck-teal"
-                    />
-                    {input.name}
-                    {input.required && <span className="text-destructive ml-0.5">*</span>}
-                  </label>
-                ) : (
-                  <>
-                    <label className="text-sm font-medium text-foreground/70">
-                      {input.name}
-                      {input.required && <span className="text-destructive ml-0.5">*</span>}
-                    </label>
-                    {input.type === 'select' ? (
-                      <select
-                        value={inputValues[input.name] ?? ''}
-                        onChange={(ev) => setInputValues((prev) => ({ ...prev, [input.name]: ev.target.value }))}
-                        required={input.required}
-                        className="rounded border border-foreground/20 bg-background px-3 py-2 text-sm text-foreground focus:outline-none focus:ring-1 focus:ring-duck-teal/30"
-                      >
-                        {input.options.map((opt) => (
-                          <option key={opt.value} value={opt.value}>{opt.label}</option>
-                        ))}
-                      </select>
-                    ) : (
-                      <input
-                        type={input.type === 'number' ? 'number' : 'text'}
-                        value={inputValues[input.name] ?? ''}
-                        onChange={(ev) => setInputValues((prev) => ({ ...prev, [input.name]: ev.target.value }))}
-                        placeholder={input.default || undefined}
-                        required={input.required}
-                        className="rounded border border-foreground/20 bg-background px-3 py-2 text-sm text-foreground placeholder:text-foreground/30 focus:outline-none focus:ring-1 focus:ring-duck-teal/30"
-                      />
-                    )}
-                  </>
-                )}
-                {input.description && (
-                  <span className="text-xs text-foreground/40">{input.description}</span>
-                )}
-              </div>
-            ))}
-            <div className="flex justify-end gap-2 mt-2">
-              <Button type="button" variant="outline" onClick={() => setShowInputForm(false)} className="cursor-pointer">
-                Cancel
-              </Button>
-              <Button type="submit" className="bg-duck-teal text-duck-yellow hover:bg-duck-teal/90 cursor-pointer">
-                Run
-              </Button>
-            </div>
-          </form>
-        </DialogContent>
-      </Dialog>
-
-      {runPrompt !== null && detail && (
-        <TaskRunnerModal
-          open
-          onOpenChange={(open) => {
-            if (!open) setRunPrompt(null);
-          }}
-          task={{ dirName, name: detail.name, description: detail.description ?? '', scope: detail.scope === 'user' ? 'user' : 'global', triggers: [], filePath: detail.filePath }}
-          promptOverride={runPrompt}
-        />
-      )}
-    </>
-  );
-};
diff --git a/src/apps/officer-web/Screens/Dashboard/Automation/CapabilityList.tsx b/src/apps/officer-web/Screens/Dashboard/Automation/CapabilityList.tsx
deleted file mode 100644
index 5d94b92e..00000000
--- a/src/apps/officer-web/Screens/Dashboard/Automation/CapabilityList.tsx
+++ /dev/null
@@ -1,85 +0,0 @@
-import { useState } from 'react';
-import { useQuery } from '@tanstack/react-query';
-import { Plus, Search } from 'lucide-react';
-import { useClient } from 'hooks/useClient';
-import { usePanelChannel } from 'hooks/usePanelChannel';
-import type { AutomationSelection } from './AutomationRightPanel';
-
-type CapabilitySummary = {
-  dirName: string;
-  name: string;
-  description: string;
-  scope: string;
-};
-
-type CapabilityListProps = {
-  kind: string;
-  endpoint: string;
-  queryKey: string;
-};
-
-export const CapabilityList = ({ kind, endpoint, queryKey }: CapabilityListProps) => {
-  const client = useClient();
-  const [selection, setSelection] = usePanelChannel<AutomationSelection>('automation:selected-capability', null);
-  const [search, setSearch] = useState('');
-
-  const { data: items = [] } = useQuery<CapabilitySummary[]>({
-    queryKey: [queryKey],
-    queryFn: () => client.get<CapabilitySummary[]>(endpoint),
-  });
-
-  const q = search.toLowerCase();
-  const filtered = search
-    ? items.filter((c) => c.name.toLowerCase().includes(q) || c.description?.toLowerCase().includes(q))
-    : items;
-
-  return (
-    <div className="h-full flex flex-col">
-      <div className="shrink-0 px-4 py-2 border-b border-duck-dark/10 dark:border-foreground/10 bg-background/60 flex items-center gap-2">
-        <span className="text-sm font-medium text-duck-dark/70 dark:text-foreground/70 flex-1">{kind}s</span>
-        <button
-          onClick={() => setSelection({ kind, endpoint, queryKey, dirName: '', creating: true })}
-          className="p-1 rounded hover:bg-duck-dark/10 dark:hover:bg-foreground/10 cursor-pointer transition-colors"
-        >
-          <Plus className="h-3.5 w-3.5 text-duck-dark/50 dark:text-foreground/50" />
-        </button>
-      </div>
-      <div className="px-4 pt-3">
-        <div className="relative">
-          <Search className="absolute left-2 top-1/2 -translate-y-1/2 h-3.5 w-3.5 text-duck-dark/30 dark:text-foreground/30" />
-          <input
-            value={search}
-            onChange={(ev) => setSearch(ev.target.value)}
-            placeholder="Search..."
-            className="w-full rounded border border-duck-dark/15 dark:border-foreground/15 bg-background/80 pl-7 pr-2 py-1.5 text-sm text-duck-dark dark:text-foreground placeholder:text-duck-dark/30 dark:placeholder:text-foreground/30 focus:outline-none focus:ring-1 focus:ring-duck-teal/30"
-          />
-        </div>
-      </div>
-      <div className="flex-1 overflow-y-auto px-3 pt-2 pb-3">
-        <div className="flex flex-col gap-0.5">
-          {filtered.map((c) => (
-            <button
-              key={c.dirName}
-              onClick={() => setSelection({ kind, endpoint, queryKey, dirName: c.dirName })}
-              className={`w-full text-left px-3 py-2 rounded-lg text-sm cursor-pointer transition-colors ${
-                selection?.queryKey === queryKey && selection.dirName === c.dirName
-                  ? 'bg-duck-teal/10 text-duck-dark dark:text-foreground'
-                  : 'text-duck-dark/60 dark:text-foreground/60 hover:bg-duck-dark/5 dark:hover:bg-foreground/5 hover:text-duck-dark dark:hover:text-foreground'
-              }`}
-            >
-              <span className="font-medium">{c.name}</span>
-              {c.description && (
-                <p className="text-xs text-duck-dark/40 dark:text-foreground/40 mt-0.5 line-clamp-1">{c.description}</p>
-              )}
-            </button>
-          ))}
-          {filtered.length === 0 && (
-            <p className="text-xs text-duck-dark/40 dark:text-foreground/40 px-3 py-4 text-center">
-              {items.length === 0 ? `No ${kind.toLowerCase()}s yet` : 'No matches'}
-            </p>
-          )}
-        </div>
-      </div>
-    </div>
-  );
-};
diff --git a/src/apps/officer-web/Screens/Dashboard/Automation/NewCron.tsx b/src/apps/officer-web/Screens/Dashboard/Automation/NewCron.tsx
deleted file mode 100644
index f9708990..00000000
--- a/src/apps/officer-web/Screens/Dashboard/Automation/NewCron.tsx
+++ /dev/null
@@ -1,94 +0,0 @@
-import { useState } from 'react';
-import { useQueryClient } from '@tanstack/react-query';
-import { X } from 'lucide-react';
-import { toast } from 'sonner';
-import { Button } from '@/components/ui/button';
-import { useClient } from 'hooks/useClient';
-import { usePanelChannel } from 'hooks/usePanelChannel';
-import type { AutomationSelection } from './AutomationRightPanel';
-
-type NewCronProps = {
-  selection: NonNullable<AutomationSelection>;
-};
-
-export const NewCron = ({ selection }: NewCronProps) => {
-  const client = useClient();
-  const qc = useQueryClient();
-  const [, setSelection] = usePanelChannel<AutomationSelection>('automation:selected-capability', null);
-  const [name, setName] = useState('');
-  const [description, setDescription] = useState('');
-  const [submitting, setSubmitting] = useState(false);
-
-  const handleCreate = async () => {
-    const trimmed = name.trim();
-    if (!trimmed) return;
-    setSubmitting(true);
-    try {
-      const res = await client.post<{ name: string; dirName: string }>(selection.endpoint, { name: trimmed });
-      await qc.invalidateQueries({ queryKey: [selection.queryKey] });
-      setSelection({
-        kind: selection.kind,
-        endpoint: selection.endpoint,
-        queryKey: selection.queryKey,
-        dirName: res.dirName,
-        isNew: true,
-        editing: true,
-        description: description.trim() || undefined,
-      });
-    } catch {
-      toast.error('Failed to create cron');
-      setSubmitting(false);
-    }
-  };
-
-  return (
-    <div className="h-full flex flex-col">
-      <div className="shrink-0 px-4 py-2 border-b border-duck-dark/10 dark:border-foreground/10 bg-background/60 flex items-center gap-2">
-        <span className="text-sm font-medium text-duck-dark/70 dark:text-foreground/70 flex-1">New Cron</span>
-        <button
-          onClick={() => setSelection(null)}
-          className="p-1 rounded hover:bg-duck-dark/10 dark:hover:bg-foreground/10 cursor-pointer transition-colors"
-        >
-          <X className="h-3.5 w-3.5 text-duck-dark/50 dark:text-foreground/50" />
-        </button>
-      </div>
-      <div className="flex-1 overflow-y-auto p-6 flex flex-col gap-4">
-        <div className="flex flex-col gap-1.5">
-          <label className="text-sm font-medium text-duck-dark/70 dark:text-foreground/70">Name</label>
-          <input
-            value={name}
-            onChange={(ev) => setName(ev.target.value)}
-            onKeyDown={(ev) => {
-              if (ev.key === 'Enter') {
-                ev.preventDefault();
-                handleCreate();
-              }
-            }}
-            placeholder="Cron name..."
-            autoFocus
-            className="rounded border border-duck-dark/20 dark:border-foreground/20 bg-background px-3 py-2 text-sm text-duck-dark dark:text-foreground placeholder:text-duck-dark/30 dark:placeholder:text-foreground/30 focus:outline-none focus:ring-1 focus:ring-duck-teal/30"
-          />
-        </div>
-        <div className="flex flex-col gap-1.5">
-          <label className="text-sm font-medium text-duck-dark/70 dark:text-foreground/70">Description</label>
-          <textarea
-            value={description}
-            onChange={(ev) => setDescription(ev.target.value)}
-            placeholder="Describe what this cron job schedules..."
-            rows={4}
-            className="rounded border border-duck-dark/20 dark:border-foreground/20 bg-background px-3 py-2 text-sm text-duck-dark dark:text-foreground placeholder:text-duck-dark/30 dark:placeholder:text-foreground/30 focus:outline-none focus:ring-1 focus:ring-duck-teal/30 resize-none"
-          />
-        </div>
-        <div className="flex justify-end">
-          <Button
-            onClick={handleCreate}
-            disabled={!name.trim() || submitting}
-            className="bg-duck-teal text-duck-yellow hover:bg-duck-teal/90 cursor-pointer"
-          >
-            {submitting ? 'Creating...' : 'Create'}
-          </Button>
-        </div>
-      </div>
-    </div>
-  );
-};
diff --git a/src/apps/officer-web/Screens/Dashboard/Automation/NewPipeline.tsx b/src/apps/officer-web/Screens/Dashboard/Automation/NewPipeline.tsx
deleted file mode 100644
index 2f683984..00000000
--- a/src/apps/officer-web/Screens/Dashboard/Automation/NewPipeline.tsx
+++ /dev/null
@@ -1,94 +0,0 @@
-import { useState } from 'react';
-import { useQueryClient } from '@tanstack/react-query';
-import { X } from 'lucide-react';
-import { toast } from 'sonner';
-import { Button } from '@/components/ui/button';
-import { useClient } from 'hooks/useClient';
-import { usePanelChannel } from 'hooks/usePanelChannel';
-import type { AutomationSelection } from './AutomationRightPanel';
-
-type NewPipelineProps = {
-  selection: NonNullable<AutomationSelection>;
-};
-
-export const NewPipeline = ({ selection }: NewPipelineProps) => {
-  const client = useClient();
-  const qc = useQueryClient();
-  const [, setSelection] = usePanelChannel<AutomationSelection>('automation:selected-capability', null);
-  const [name, setName] = useState('');
-  const [description, setDescription] = useState('');
-  const [submitting, setSubmitting] = useState(false);
-
-  const handleCreate = async () => {
-    const trimmed = name.trim();
-    if (!trimmed) return;
-    setSubmitting(true);
-    try {
-      const res = await client.post<{ name: string; dirName: string }>(selection.endpoint, { name: trimmed });
-      await qc.invalidateQueries({ queryKey: [selection.queryKey] });
-      setSelection({
-        kind: selection.kind,
-        endpoint: selection.endpoint,
-        queryKey: selection.queryKey,
-        dirName: res.dirName,
-        isNew: true,
-        editing: true,
-        description: description.trim() || undefined,
-      });
-    } catch {
-      toast.error('Failed to create pipeline');
-      setSubmitting(false);
-    }
-  };
-
-  return (
-    <div className="h-full flex flex-col">
-      <div className="shrink-0 px-4 py-2 border-b border-duck-dark/10 dark:border-foreground/10 bg-background/60 flex items-center gap-2">
-        <span className="text-sm font-medium text-duck-dark/70 dark:text-foreground/70 flex-1">New Pipeline</span>
-        <button
-          onClick={() => setSelection(null)}
-          className="p-1 rounded hover:bg-duck-dark/10 dark:hover:bg-foreground/10 cursor-pointer transition-colors"
-        >
-          <X className="h-3.5 w-3.5 text-duck-dark/50 dark:text-foreground/50" />
-        </button>
-      </div>
-      <div className="flex-1 overflow-y-auto p-6 flex flex-col gap-4">
-        <div className="flex flex-col gap-1.5">
-          <label className="text-sm font-medium text-duck-dark/70 dark:text-foreground/70">Name</label>
-          <input
-            value={name}
-            onChange={(ev) => setName(ev.target.value)}
-            onKeyDown={(ev) => {
-              if (ev.key === 'Enter') {
-                ev.preventDefault();
-                handleCreate();
-              }
-            }}
-            placeholder="Pipeline name..."
-            autoFocus
-            className="rounded border border-duck-dark/20 dark:border-foreground/20 bg-background px-3 py-2 text-sm text-duck-dark dark:text-foreground placeholder:text-duck-dark/30 dark:placeholder:text-foreground/30 focus:outline-none focus:ring-1 focus:ring-duck-teal/30"
-          />
-        </div>
-        <div className="flex flex-col gap-1.5">
-          <label className="text-sm font-medium text-duck-dark/70 dark:text-foreground/70">Description</label>
-          <textarea
-            value={description}
-            onChange={(ev) => setDescription(ev.target.value)}
-            placeholder="Describe what this pipeline orchestrates..."
-            rows={4}
-            className="rounded border border-duck-dark/20 dark:border-foreground/20 bg-background px-3 py-2 text-sm text-duck-dark dark:text-foreground placeholder:text-duck-dark/30 dark:placeholder:text-foreground/30 focus:outline-none focus:ring-1 focus:ring-duck-teal/30 resize-none"
-          />
-        </div>
-        <div className="flex justify-end">
-          <Button
-            onClick={handleCreate}
-            disabled={!name.trim() || submitting}
-            className="bg-duck-teal text-duck-yellow hover:bg-duck-teal/90 cursor-pointer"
-          >
-            {submitting ? 'Creating...' : 'Create'}
-          </Button>
-        </div>
-      </div>
-    </div>
-  );
-};
diff --git a/src/apps/officer-web/Screens/Dashboard/Automation/NewProcess.tsx b/src/apps/officer-web/Screens/Dashboard/Automation/NewProcess.tsx
deleted file mode 100644
index 6680bfd9..00000000
--- a/src/apps/officer-web/Screens/Dashboard/Automation/NewProcess.tsx
+++ /dev/null
@@ -1,94 +0,0 @@
-import { useState } from 'react';
-import { useQueryClient } from '@tanstack/react-query';
-import { X } from 'lucide-react';
-import { toast } from 'sonner';
-import { Button } from '@/components/ui/button';
-import { useClient } from 'hooks/useClient';
-import { usePanelChannel } from 'hooks/usePanelChannel';
-import type { AutomationSelection } from './AutomationRightPanel';
-
-type NewProcessProps = {
-  selection: NonNullable<AutomationSelection>;
-};
-
-export const NewProcess = ({ selection }: NewProcessProps) => {
-  const client = useClient();
-  const qc = useQueryClient();
-  const [, setSelection] = usePanelChannel<AutomationSelection>('automation:selected-capability', null);
-  const [name, setName] = useState('');
-  const [description, setDescription] = useState('');
-  const [submitting, setSubmitting] = useState(false);
-
-  const handleCreate = async () => {
-    const trimmed = name.trim();
-    if (!trimmed) return;
-    setSubmitting(true);
-    try {
-      const res = await client.post<{ name: string; dirName: string }>(selection.endpoint, { name: trimmed });
-      await qc.invalidateQueries({ queryKey: [selection.queryKey] });
-      setSelection({
-        kind: selection.kind,
-        endpoint: selection.endpoint,
-        queryKey: selection.queryKey,
-        dirName: res.dirName,
-        isNew: true,
-        editing: true,
-        description: description.trim() || undefined,
-      });
-    } catch {
-      toast.error('Failed to create process');
-      setSubmitting(false);
-    }
-  };
-
-  return (
-    <div className="h-full flex flex-col">
-      <div className="shrink-0 px-4 py-2 border-b border-duck-dark/10 dark:border-foreground/10 bg-background/60 flex items-center gap-2">
-        <span className="text-sm font-medium text-duck-dark/70 dark:text-foreground/70 flex-1">New Process</span>
-        <button
-          onClick={() => setSelection(null)}
-          className="p-1 rounded hover:bg-duck-dark/10 dark:hover:bg-foreground/10 cursor-pointer transition-colors"
-        >
-          <X className="h-3.5 w-3.5 text-duck-dark/50 dark:text-foreground/50" />
-        </button>
-      </div>
-      <div className="flex-1 overflow-y-auto p-6 flex flex-col gap-4">
-        <div className="flex flex-col gap-1.5">
-          <label className="text-sm font-medium text-duck-dark/70 dark:text-foreground/70">Name</label>
-          <input
-            value={name}
-            onChange={(ev) => setName(ev.target.value)}
-            onKeyDown={(ev) => {
-              if (ev.key === 'Enter') {
-                ev.preventDefault();
-                handleCreate();
-              }
-            }}
-            placeholder="Process name..."
-            autoFocus
-            className="rounded border border-duck-dark/20 dark:border-foreground/20 bg-background px-3 py-2 text-sm text-duck-dark dark:text-foreground placeholder:text-duck-dark/30 dark:placeholder:text-foreground/30 focus:outline-none focus:ring-1 focus:ring-duck-teal/30"
-          />
-        </div>
-        <div className="flex flex-col gap-1.5">
-          <label className="text-sm font-medium text-duck-dark/70 dark:text-foreground/70">Description</label>
-          <textarea
-            value={description}
-            onChange={(ev) => setDescription(ev.target.value)}
-            placeholder="Describe what this process manages..."
-            rows={4}
-            className="rounded border border-duck-dark/20 dark:border-foreground/20 bg-background px-3 py-2 text-sm text-duck-dark dark:text-foreground placeholder:text-duck-dark/30 dark:placeholder:text-foreground/30 focus:outline-none focus:ring-1 focus:ring-duck-teal/30 resize-none"
-          />
-        </div>
-        <div className="flex justify-end">
-          <Button
-            onClick={handleCreate}
-            disabled={!name.trim() || submitting}
-            className="bg-duck-teal text-duck-yellow hover:bg-duck-teal/90 cursor-pointer"
-          >
-            {submitting ? 'Creating...' : 'Create'}
-          </Button>
-        </div>
-      </div>
-    </div>
-  );
-};
diff --git a/src/apps/officer-web/Screens/Dashboard/Automation/NewService.tsx b/src/apps/officer-web/Screens/Dashboard/Automation/NewService.tsx
deleted file mode 100644
index cf4be53a..00000000
--- a/src/apps/officer-web/Screens/Dashboard/Automation/NewService.tsx
+++ /dev/null
@@ -1,94 +0,0 @@
-import { useState } from 'react';
-import { useQueryClient } from '@tanstack/react-query';
-import { X } from 'lucide-react';
-import { toast } from 'sonner';
-import { Button } from '@/components/ui/button';
-import { useClient } from 'hooks/useClient';
-import { usePanelChannel } from 'hooks/usePanelChannel';
-import type { AutomationSelection } from './AutomationRightPanel';
-
-type NewServiceProps = {
-  selection: NonNullable<AutomationSelection>;
-};
-
-export const NewService = ({ selection }: NewServiceProps) => {
-  const client = useClient();
-  const qc = useQueryClient();
-  const [, setSelection] = usePanelChannel<AutomationSelection>('automation:selected-capability', null);
-  const [name, setName] = useState('');
-  const [description, setDescription] = useState('');
-  const [submitting, setSubmitting] = useState(false);
-
-  const handleCreate = async () => {
-    const trimmed = name.trim();
-    if (!trimmed) return;
-    setSubmitting(true);
-    try {
-      const res = await client.post<{ name: string; dirName: string }>(selection.endpoint, { name: trimmed });
-      await qc.invalidateQueries({ queryKey: [selection.queryKey] });
-      setSelection({
-        kind: selection.kind,
-        endpoint: selection.endpoint,
-        queryKey: selection.queryKey,
-        dirName: res.dirName,
-        isNew: true,
-        editing: true,
-        description: description.trim() || undefined,
-      });
-    } catch {
-      toast.error('Failed to create service');
-      setSubmitting(false);
-    }
-  };
-
-  return (
-    <div className="h-full flex flex-col">
-      <div className="shrink-0 px-4 py-2 border-b border-duck-dark/10 dark:border-foreground/10 bg-background/60 flex items-center gap-2">
-        <span className="text-sm font-medium text-duck-dark/70 dark:text-foreground/70 flex-1">New Service</span>
-        <button
-          onClick={() => setSelection(null)}
-          className="p-1 rounded hover:bg-duck-dark/10 dark:hover:bg-foreground/10 cursor-pointer transition-colors"
-        >
-          <X className="h-3.5 w-3.5 text-duck-dark/50 dark:text-foreground/50" />
-        </button>
-      </div>
-      <div className="flex-1 overflow-y-auto p-6 flex flex-col gap-4">
-        <div className="flex flex-col gap-1.5">
-          <label className="text-sm font-medium text-duck-dark/70 dark:text-foreground/70">Name</label>
-          <input
-            value={name}
-            onChange={(ev) => setName(ev.target.value)}
-            onKeyDown={(ev) => {
-              if (ev.key === 'Enter') {
-                ev.preventDefault();
-                handleCreate();
-              }
-            }}
-            placeholder="Service name..."
-            autoFocus
-            className="rounded border border-duck-dark/20 dark:border-foreground/20 bg-background px-3 py-2 text-sm text-duck-dark dark:text-foreground placeholder:text-duck-dark/30 dark:placeholder:text-foreground/30 focus:outline-none focus:ring-1 focus:ring-duck-teal/30"
-          />
-        </div>
-        <div className="flex flex-col gap-1.5">
-          <label className="text-sm font-medium text-duck-dark/70 dark:text-foreground/70">Description</label>
-          <textarea
-            value={description}
-            onChange={(ev) => setDescription(ev.target.value)}
-            placeholder="Describe what this service provides..."
-            rows={4}
-            className="rounded border border-duck-dark/20 dark:border-foreground/20 bg-background px-3 py-2 text-sm text-duck-dark dark:text-foreground placeholder:text-duck-dark/30 dark:placeholder:text-foreground/30 focus:outline-none focus:ring-1 focus:ring-duck-teal/30 resize-none"
-          />
-        </div>
-        <div className="flex justify-end">
-          <Button
-            onClick={handleCreate}
-            disabled={!name.trim() || submitting}
-            className="bg-duck-teal text-duck-yellow hover:bg-duck-teal/90 cursor-pointer"
-          >
-            {submitting ? 'Creating...' : 'Create'}
-          </Button>
-        </div>
-      </div>
-    </div>
-  );
-};
diff --git a/src/apps/officer-web/Screens/Dashboard/Automation/NewSkill.tsx b/src/apps/officer-web/Screens/Dashboard/Automation/NewSkill.tsx
deleted file mode 100644
index ded39ee1..00000000
--- a/src/apps/officer-web/Screens/Dashboard/Automation/NewSkill.tsx
+++ /dev/null
@@ -1,94 +0,0 @@
-import { useState } from 'react';
-import { useQueryClient } from '@tanstack/react-query';
-import { X } from 'lucide-react';
-import { toast } from 'sonner';
-import { Button } from '@/components/ui/button';
-import { useClient } from 'hooks/useClient';
-import { usePanelChannel } from 'hooks/usePanelChannel';
-import type { AutomationSelection } from './AutomationRightPanel';
-
-type NewSkillProps = {
-  selection: NonNullable<AutomationSelection>;
-};
-
-export const NewSkill = ({ selection }: NewSkillProps) => {
-  const client = useClient();
-  const qc = useQueryClient();
-  const [, setSelection] = usePanelChannel<AutomationSelection>('automation:selected-capability', null);
-  const [name, setName] = useState('');
-  const [description, setDescription] = useState('');
-  const [submitting, setSubmitting] = useState(false);
-
-  const handleCreate = async () => {
-    const trimmed = name.trim();
-    if (!trimmed) return;
-    setSubmitting(true);
-    try {
-      const res = await client.post<{ name: string; dirName: string }>(selection.endpoint, { name: trimmed });
-      await qc.invalidateQueries({ queryKey: [selection.queryKey] });
-      setSelection({
-        kind: selection.kind,
-        endpoint: selection.endpoint,
-        queryKey: selection.queryKey,
-        dirName: res.dirName,
-        isNew: true,
-        editing: true,
-        description: description.trim() || undefined,
-      });
-    } catch {
-      toast.error('Failed to create skill');
-      setSubmitting(false);
-    }
-  };
-
-  return (
-    <div className="h-full flex flex-col">
-      <div className="shrink-0 px-4 py-2 border-b border-duck-dark/10 dark:border-foreground/10 bg-background/60 flex items-center gap-2">
-        <span className="text-sm font-medium text-duck-dark/70 dark:text-foreground/70 flex-1">New Skill</span>
-        <button
-          onClick={() => setSelection(null)}
-          className="p-1 rounded hover:bg-duck-dark/10 dark:hover:bg-foreground/10 cursor-pointer transition-colors"
-        >
-          <X className="h-3.5 w-3.5 text-duck-dark/50 dark:text-foreground/50" />
-        </button>
-      </div>
-      <div className="flex-1 overflow-y-auto p-6 flex flex-col gap-4">
-        <div className="flex flex-col gap-1.5">
-          <label className="text-sm font-medium text-duck-dark/70 dark:text-foreground/70">Name</label>
-          <input
-            value={name}
-            onChange={(ev) => setName(ev.target.value)}
-            onKeyDown={(ev) => {
-              if (ev.key === 'Enter') {
-                ev.preventDefault();
-                handleCreate();
-              }
-            }}
-            placeholder="Skill name..."
-            autoFocus
-            className="rounded border border-duck-dark/20 dark:border-foreground/20 bg-background px-3 py-2 text-sm text-duck-dark dark:text-foreground placeholder:text-duck-dark/30 dark:placeholder:text-foreground/30 focus:outline-none focus:ring-1 focus:ring-duck-teal/30"
-          />
-        </div>
-        <div className="flex flex-col gap-1.5">
-          <label className="text-sm font-medium text-duck-dark/70 dark:text-foreground/70">Description</label>
-          <textarea
-            value={description}
-            onChange={(ev) => setDescription(ev.target.value)}
-            placeholder="Describe what this skill does..."
-            rows={4}
-            className="rounded border border-duck-dark/20 dark:border-foreground/20 bg-background px-3 py-2 text-sm text-duck-dark dark:text-foreground placeholder:text-duck-dark/30 dark:placeholder:text-foreground/30 focus:outline-none focus:ring-1 focus:ring-duck-teal/30 resize-none"
-          />
-        </div>
-        <div className="flex justify-end">
-          <Button
-            onClick={handleCreate}
-            disabled={!name.trim() || submitting}
-            className="bg-duck-teal text-duck-yellow hover:bg-duck-teal/90 cursor-pointer"
-          >
-            {submitting ? 'Creating...' : 'Create'}
-          </Button>
-        </div>
-      </div>
-    </div>
-  );
-};
diff --git a/src/apps/officer-web/Screens/Dashboard/Automation/NewTask.tsx b/src/apps/officer-web/Screens/Dashboard/Automation/NewTask.tsx
deleted file mode 100644
index 41570922..00000000
--- a/src/apps/officer-web/Screens/Dashboard/Automation/NewTask.tsx
+++ /dev/null
@@ -1,94 +0,0 @@
-import { useState } from 'react';
-import { useQueryClient } from '@tanstack/react-query';
-import { X } from 'lucide-react';
-import { toast } from 'sonner';
-import { Button } from '@/components/ui/button';
-import { useClient } from 'hooks/useClient';
-import { usePanelChannel } from 'hooks/usePanelChannel';
-import type { AutomationSelection } from './AutomationRightPanel';
-
-type NewTaskProps = {
-  selection: NonNullable<AutomationSelection>;
-};
-
-export const NewTask = ({ selection }: NewTaskProps) => {
-  const client = useClient();
-  const qc = useQueryClient();
-  const [, setSelection] = usePanelChannel<AutomationSelection>('automation:selected-capability', null);
-  const [name, setName] = useState('');
-  const [description, setDescription] = useState('');
-  const [submitting, setSubmitting] = useState(false);
-
-  const handleCreate = async () => {
-    const trimmed = name.trim();
-    if (!trimmed) return;
-    setSubmitting(true);
-    try {
-      const res = await client.post<{ name: string; dirName: string }>(selection.endpoint, { name: trimmed });
-      await qc.invalidateQueries({ queryKey: [selection.queryKey] });
-      setSelection({
-        kind: selection.kind,
-        endpoint: selection.endpoint,
-        queryKey: selection.queryKey,
-        dirName: res.dirName,
-        isNew: true,
-        editing: true,
-        description: description.trim() || undefined,
-      });
-    } catch {
-      toast.error('Failed to create task');
-      setSubmitting(false);
-    }
-  };
-
-  return (
-    <div className="h-full flex flex-col">
-      <div className="shrink-0 px-4 py-2 border-b border-duck-dark/10 dark:border-foreground/10 bg-background/60 flex items-center gap-2">
-        <span className="text-sm font-medium text-duck-dark/70 dark:text-foreground/70 flex-1">New Task</span>
-        <button
-          onClick={() => setSelection(null)}
-          className="p-1 rounded hover:bg-duck-dark/10 dark:hover:bg-foreground/10 cursor-pointer transition-colors"
-        >
-          <X className="h-3.5 w-3.5 text-duck-dark/50 dark:text-foreground/50" />
-        </button>
-      </div>
-      <div className="flex-1 overflow-y-auto p-6 flex flex-col gap-4">
-        <div className="flex flex-col gap-1.5">
-          <label className="text-sm font-medium text-duck-dark/70 dark:text-foreground/70">Name</label>
-          <input
-            value={name}
-            onChange={(ev) => setName(ev.target.value)}
-            onKeyDown={(ev) => {
-              if (ev.key === 'Enter') {
-                ev.preventDefault();
-                handleCreate();
-              }
-            }}
-            placeholder="Task name..."
-            autoFocus
-            className="rounded border border-duck-dark/20 dark:border-foreground/20 bg-background px-3 py-2 text-sm text-duck-dark dark:text-foreground placeholder:text-duck-dark/30 dark:placeholder:text-foreground/30 focus:outline-none focus:ring-1 focus:ring-duck-teal/30"
-          />
-        </div>
-        <div className="flex flex-col gap-1.5">
-          <label className="text-sm font-medium text-duck-dark/70 dark:text-foreground/70">Description</label>
-          <textarea
-            value={description}
-            onChange={(ev) => setDescription(ev.target.value)}
-            placeholder="Describe what this task automates..."
-            rows={4}
-            className="rounded border border-duck-dark/20 dark:border-foreground/20 bg-background px-3 py-2 text-sm text-duck-dark dark:text-foreground placeholder:text-duck-dark/30 dark:placeholder:text-foreground/30 focus:outline-none focus:ring-1 focus:ring-duck-teal/30 resize-none"
-          />
-        </div>
-        <div className="flex justify-end">
-          <Button
-            onClick={handleCreate}
-            disabled={!name.trim() || submitting}
-            className="bg-duck-teal text-duck-yellow hover:bg-duck-teal/90 cursor-pointer"
-          >
-            {submitting ? 'Creating...' : 'Create'}
-          </Button>
-        </div>
-      </div>
-    </div>
-  );
-};
diff --git a/src/apps/officer-web/Screens/Dashboard/Automation/NewTool.tsx b/src/apps/officer-web/Screens/Dashboard/Automation/NewTool.tsx
deleted file mode 100644
index f9287506..00000000
--- a/src/apps/officer-web/Screens/Dashboard/Automation/NewTool.tsx
+++ /dev/null
@@ -1,94 +0,0 @@
-import { useState } from 'react';
-import { useQueryClient } from '@tanstack/react-query';
-import { X } from 'lucide-react';
-import { toast } from 'sonner';
-import { Button } from '@/components/ui/button';
-import { useClient } from 'hooks/useClient';
-import { usePanelChannel } from 'hooks/usePanelChannel';
-import type { AutomationSelection } from './AutomationRightPanel';
-
-type NewToolProps = {
-  selection: NonNullable<AutomationSelection>;
-};
-
-export const NewTool = ({ selection }: NewToolProps) => {
-  const client = useClient();
-  const qc = useQueryClient();
-  const [, setSelection] = usePanelChannel<AutomationSelection>('automation:selected-capability', null);
-  const [name, setName] = useState('');
-  const [description, setDescription] = useState('');
-  const [submitting, setSubmitting] = useState(false);
-
-  const handleCreate = async () => {
-    const trimmed = name.trim();
-    if (!trimmed) return;
-    setSubmitting(true);
-    try {
-      const res = await client.post<{ name: string; dirName: string }>(selection.endpoint, { name: trimmed });
-      await qc.invalidateQueries({ queryKey: [selection.queryKey] });
-      setSelection({
-        kind: selection.kind,
-        endpoint: selection.endpoint,
-        queryKey: selection.queryKey,
-        dirName: res.dirName,
-        isNew: true,
-        editing: true,
-        description: description.trim() || undefined,
-      });
-    } catch {
-      toast.error('Failed to create tool');
-      setSubmitting(false);
-    }
-  };
-
-  return (
-    <div className="h-full flex flex-col">
-      <div className="shrink-0 px-4 py-2 border-b border-duck-dark/10 dark:border-foreground/10 bg-background/60 flex items-center gap-2">
-        <span className="text-sm font-medium text-duck-dark/70 dark:text-foreground/70 flex-1">New Tool</span>
-        <button
-          onClick={() => setSelection(null)}
-          className="p-1 rounded hover:bg-duck-dark/10 dark:hover:bg-foreground/10 cursor-pointer transition-colors"
-        >
-          <X className="h-3.5 w-3.5 text-duck-dark/50 dark:text-foreground/50" />
-        </button>
-      </div>
-      <div className="flex-1 overflow-y-auto p-6 flex flex-col gap-4">
-        <div className="flex flex-col gap-1.5">
-          <label className="text-sm font-medium text-duck-dark/70 dark:text-foreground/70">Name</label>
-          <input
-            value={name}
-            onChange={(ev) => setName(ev.target.value)}
-            onKeyDown={(ev) => {
-              if (ev.key === 'Enter') {
-                ev.preventDefault();
-                handleCreate();
-              }
-            }}
-            placeholder="Tool name..."
-            autoFocus
-            className="rounded border border-duck-dark/20 dark:border-foreground/20 bg-background px-3 py-2 text-sm text-duck-dark dark:text-foreground placeholder:text-duck-dark/30 dark:placeholder:text-foreground/30 focus:outline-none focus:ring-1 focus:ring-duck-teal/30"
-          />
-        </div>
-        <div className="flex flex-col gap-1.5">
-          <label className="text-sm font-medium text-duck-dark/70 dark:text-foreground/70">Description</label>
-          <textarea
-            value={description}
-            onChange={(ev) => setDescription(ev.target.value)}
-            placeholder="Describe what this tool does..."
-            rows={4}
-            className="rounded border border-duck-dark/20 dark:border-foreground/20 bg-background px-3 py-2 text-sm text-duck-dark dark:text-foreground placeholder:text-duck-dark/30 dark:placeholder:text-foreground/30 focus:outline-none focus:ring-1 focus:ring-duck-teal/30 resize-none"
-          />
-        </div>
-        <div className="flex justify-end">
-          <Button
-            onClick={handleCreate}
-            disabled={!name.trim() || submitting}
-            className="bg-duck-teal text-duck-yellow hover:bg-duck-teal/90 cursor-pointer"
-          >
-            {submitting ? 'Creating...' : 'Create'}
-          </Button>
-        </div>
-      </div>
-    </div>
-  );
-};
diff --git a/src/apps/officer-web/Screens/Dashboard/Automation/NewWorkflow.tsx b/src/apps/officer-web/Screens/Dashboard/Automation/NewWorkflow.tsx
deleted file mode 100644
index e9bca88c..00000000
--- a/src/apps/officer-web/Screens/Dashboard/Automation/NewWorkflow.tsx
+++ /dev/null
@@ -1,94 +0,0 @@
-import { useState } from 'react';
-import { useQueryClient } from '@tanstack/react-query';
-import { X } from 'lucide-react';
-import { toast } from 'sonner';
-import { Button } from '@/components/ui/button';
-import { useClient } from 'hooks/useClient';
-import { usePanelChannel } from 'hooks/usePanelChannel';
-import type { AutomationSelection } from './AutomationRightPanel';
-
-type NewWorkflowProps = {
-  selection: NonNullable<AutomationSelection>;
-};
-
-export const NewWorkflow = ({ selection }: NewWorkflowProps) => {
-  const client = useClient();
-  const qc = useQueryClient();
-  const [, setSelection] = usePanelChannel<AutomationSelection>('automation:selected-capability', null);
-  const [name, setName] = useState('');
-  const [description, setDescription] = useState('');
-  const [submitting, setSubmitting] = useState(false);
-
-  const handleCreate = async () => {
-    const trimmed = name.trim();
-    if (!trimmed) return;
-    setSubmitting(true);
-    try {
-      const res = await client.post<{ name: string; dirName: string }>(selection.endpoint, { name: trimmed });
-      await qc.invalidateQueries({ queryKey: [selection.queryKey] });
-      setSelection({
-        kind: selection.kind,
-        endpoint: selection.endpoint,
-        queryKey: selection.queryKey,
-        dirName: res.dirName,
-        isNew: true,
-        editing: true,
-        description: description.trim() || undefined,
-      });
-    } catch {
-      toast.error('Failed to create workflow');
-      setSubmitting(false);
-    }
-  };
-
-  return (
-    <div className="h-full flex flex-col">
-      <div className="shrink-0 px-4 py-2 border-b border-duck-dark/10 dark:border-foreground/10 bg-background/60 flex items-center gap-2">
-        <span className="text-sm font-medium text-duck-dark/70 dark:text-foreground/70 flex-1">New Workflow</span>
-        <button
-          onClick={() => setSelection(null)}
-          className="p-1 rounded hover:bg-duck-dark/10 dark:hover:bg-foreground/10 cursor-pointer transition-colors"
-        >
-          <X className="h-3.5 w-3.5 text-duck-dark/50 dark:text-foreground/50" />
-        </button>
-      </div>
-      <div className="flex-1 overflow-y-auto p-6 flex flex-col gap-4">
-        <div className="flex flex-col gap-1.5">
-          <label className="text-sm font-medium text-duck-dark/70 dark:text-foreground/70">Name</label>
-          <input
-            value={name}
-            onChange={(ev) => setName(ev.target.value)}
-            onKeyDown={(ev) => {
-              if (ev.key === 'Enter') {
-                ev.preventDefault();
-                handleCreate();
-              }
-            }}
-            placeholder="Workflow name..."
-            autoFocus
-            className="rounded border border-duck-dark/20 dark:border-foreground/20 bg-background px-3 py-2 text-sm text-duck-dark dark:text-foreground placeholder:text-duck-dark/30 dark:placeholder:text-foreground/30 focus:outline-none focus:ring-1 focus:ring-duck-teal/30"
-          />
-        </div>
-        <div className="flex flex-col gap-1.5">
-          <label className="text-sm font-medium text-duck-dark/70 dark:text-foreground/70">Description</label>
-          <textarea
-            value={description}
-            onChange={(ev) => setDescription(ev.target.value)}
-            placeholder="Describe what this workflow automates..."
-            rows={4}
-            className="rounded border border-duck-dark/20 dark:border-foreground/20 bg-background px-3 py-2 text-sm text-duck-dark dark:text-foreground placeholder:text-duck-dark/30 dark:placeholder:text-foreground/30 focus:outline-none focus:ring-1 focus:ring-duck-teal/30 resize-none"
-          />
-        </div>
-        <div className="flex justify-end">
-          <Button
-            onClick={handleCreate}
-            disabled={!name.trim() || submitting}
-            className="bg-duck-teal text-duck-yellow hover:bg-duck-teal/90 cursor-pointer"
-          >
-            {submitting ? 'Creating...' : 'Create'}
-          </Button>
-        </div>
-      </div>
-    </div>
-  );
-};
diff --git a/src/apps/officer-web/Screens/Dashboard/Automation/index.tsx b/src/apps/officer-web/Screens/Dashboard/Automation/index.tsx
index de18584d..22b1a9a7 100644
--- a/src/apps/officer-web/Screens/Dashboard/Automation/index.tsx
+++ b/src/apps/officer-web/Screens/Dashboard/Automation/index.tsx
@@ -1,100 +1,41 @@
-import { useCallback, useEffect, useMemo, useRef } from 'react';
-import { useIsMobile } from 'hooks/useIsMobile';
-import { usePanelChannel } from 'hooks/usePanelChannel';
+import { useCallback, useMemo } from 'react';
 import type { LayoutNode, PanelComponents } from 'officerdev';
 import { WorkspaceView } from 'officerdev';
+import { useIsMobile } from 'hooks/useIsMobile';
+import { usePanelChannel } from 'hooks/usePanelChannel';
 import { useDashboardState } from 'state/useDashboardState';
+import type { TaskSummary } from 'officerdev';
 
-import { AutomationRightPanel } from './AutomationRightPanel';
-import type { AutomationSelection } from './AutomationRightPanel';
-import { AutomationEditChat } from './AutomationEditChat';
-import { AutomationSidebar } from './AutomationSidebar';
+import { AutomationList } from './AutomationList';
+import { AutomationDetail } from './AutomationDetail';
 
-const CHAT_PANEL_ID = 'automation-chat';
+export type { TaskSummary as SelectedTask };
 
 const defaultLayout: LayoutNode = {
   type: 'group',
   id: 'automation-root',
   direction: 'horizontal',
   children: [
-    { node: { type: 'panel', id: 'automation-left', appType: null }, size: 20 },
-    { node: { type: 'panel', id: 'automation-right', appType: null }, size: 80 },
+    { node: { type: 'panel', id: 'automation-list', appType: null }, size: 30 },
+    { node: { type: 'panel', id: 'automation-detail', appType: null }, size: 70 },
   ],
 };
 
-const hasChatPanel = (layout: LayoutNode): boolean => {
-  if (layout.type === 'panel') return layout.id === CHAT_PANEL_ID;
-  return layout.children.some((c) => hasChatPanel(c.node));
-};
-
-const addChatPanel = (layout: LayoutNode): LayoutNode => {
-  if (layout.type !== 'group') return layout;
-  const clone = structuredClone(layout);
-  const rightChild = clone.children[1];
-  if (!rightChild) return clone;
-
-  // Wrap the right panel in a vertical group with the chat panel
-  const rightSize = rightChild.size;
-  rightChild.size = rightSize;
-  clone.children[1] = {
-    node: {
-      type: 'group',
-      id: 'automation-right-group',
-      direction: 'vertical',
-      children: [
-        { node: rightChild.node, size: 50 },
-        { node: { type: 'panel', id: CHAT_PANEL_ID, appType: null }, size: 50 },
-      ],
-    },
-    size: rightSize,
-  };
-  return clone;
-};
-
-const removeChatPanel = (layout: LayoutNode): LayoutNode => {
-  if (layout.type !== 'group') return layout;
-  const clone = structuredClone(layout);
-  const rightChild = clone.children[1];
-  if (!rightChild || rightChild.node.type !== 'group') return clone;
-
-  // Unwrap: pull the right panel out of the vertical group
-  const rightGroup = rightChild.node;
-  const mainPanel = rightGroup.children.find((c) => c.node.type === 'panel' && (c.node as { id: string }).id !== CHAT_PANEL_ID);
-  if (mainPanel) {
-    clone.children[1] = { node: mainPanel.node, size: rightChild.size };
-  }
-  return clone;
-};
-
 export const Automation = () => {
   const workspace = useDashboardState<LayoutNode>('screens/automation', defaultLayout);
-  const [selection, setSelection] = usePanelChannel<AutomationSelection>('automation:selected-capability', null);
+  const [selected] = usePanelChannel<TaskSummary | null>('automation:selected-task', null);
   const isMobile = useIsMobile();
-  const editing = selection?.editing ?? false;
-  const prevEditing = useRef(editing);
-
-  useEffect(() => {
-    if (editing === prevEditing.current) return;
-    prevEditing.current = editing;
-
-    if (editing && !hasChatPanel(workspace.value)) {
-      workspace.setValue(addChatPanel(workspace.value));
-    } else if (!editing && hasChatPanel(workspace.value)) {
-      workspace.setValue(removeChatPanel(workspace.value));
-    }
-  }, [editing]);
 
   const panelComponents: PanelComponents = useMemo(
     () => ({
-      'automation-left': AutomationSidebar,
-      'automation-right': AutomationRightPanel,
-      [CHAT_PANEL_ID]: AutomationEditChat,
+      'automation-list': AutomationList,
+      'automation-detail': AutomationDetail,
     }),
     [],
   );
 
-  const mobilePanelId = isMobile && selection ? 'automation-right' : undefined;
-  const onMobileBack = useCallback(() => setSelection(null), [setSelection]);
+  const mobilePanelId = isMobile && selected ? 'automation-detail' : undefined;
+  const onMobileBack = useCallback(() => {}, []);
 
   if (!workspace.isLoaded) return null;