jobs: master-detail JobsPage (list + detail, resizable) for /jobs and /jobs/:id

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>

docs/jobs-unification.md

@@ -76,9 +76,10 @@ Favor power-user affordances over guardrails. See memory `sole-user-assume-compe
       Router mounted at `/jobs` and `/pipeline-jobs`. *Needs a restart to deploy; then curl/phone-testable.*
       WS consolidation still pending (old `/api/tasks/run/ws` + `/api/tasks/pipeline/ws` still live).
 - [~] 3 frontend
-  - [x] 3a JobDetail script branch — `ScriptJobDetail` (terminal, polls `GET /jobs/:id/log` + status,
-        Stop button) + `JobDetailView` wrapper routing by `mode` (pipeline detail renamed
-        `PipelineJobDetail`). Script jobs are now viewable at `/jobs/:id`.
+  - [x] 3a jobs UI — **master-detail** `JobsPage` (like `/chat`): `WorkspaceLayout` with a list panel
+        (left, polls `GET /jobs`, highlights active) + a detail panel (right) that branches by `mode`
+        — `ScriptJobDetail` terminal (polls log + status, Stop) or `PipelineJobDetail`. One page serves
+        both `/jobs` and `/jobs/:id`; list click navigates. Replaced the old separate list/detail pages.
   - [ ] 3b `/jobs/new` page — extract the input UI (TaskInputForm + per-group config + folder probing)
         from `TaskRunnerModal` into a shared component; Run/Queue → `POST /jobs` → navigate.
   - [x] `inline` flag plumbed (parser + list/detail endpoints); 3 quick tasks flagged.

src/apps/officer-web/App.tsx

@@ -64,8 +64,8 @@ export function App() {
             <Route path="/tasks" element={<Dashboard.Tasks />} />
             <Route path="/processes" element={<Dashboard.Processes />} />
             <Route path="/task-logs" element={<Dashboard.TaskLogs />} />
-            <Route path="/jobs" element={<Dashboard.JobsScreen />} />
-            <Route path="/jobs/:id" element={<Dashboard.JobDetail />} />
+            <Route path="/jobs" element={<Dashboard.JobsPage />} />
+            <Route path="/jobs/:id" element={<Dashboard.JobsPage />} />
             <Route path="/dashboards" element={<Dashboard.DashboardsScreen />} />
             <Route path="/dashboards/:id" element={<Dashboard.DashboardScreen />} />
             <Route path="/projects" element={<Dashboard.ProjectListScreen />} />

src/apps/officer-web/Screens/Dashboard/Jobs/JobDetailView.tsx

@@ -1,34 +0,0 @@
-import { useState, useEffect } from 'react';
-import { useParams } from 'react-router';
-import { Loader2 } from 'lucide-react';
-import { useClient } from 'hooks/useClient';
-import { PipelineJobDetail } from './JobDetail';
-import { ScriptJobDetail } from './ScriptJobDetail';
-
-// Route entry for /jobs/:id — picks the right detail view by job mode (script terminal vs pipeline steps).
-export const JobDetail = () => {
-  const { id } = useParams<{ id: string }>();
-  const client = useClient();
-  const [mode, setMode] = useState<string | null>(null);
-  const [notFound, setNotFound] = useState(false);
-
-  useEffect(() => {
-    if (!id) return;
-    client
-      .get<{ mode?: string }>(`/jobs/${id}`)
-      .then((j) => setMode(j.mode ?? 'pipeline'))
-      .catch(() => setNotFound(true));
-  }, [id]);
-
-  if (notFound) {
-    return <div className="flex-1 flex items-center justify-center text-duck-dark/60 dark:text-foreground/60">Job not found.</div>;
-  }
-  if (mode === null) {
-    return (
-      <div className="flex-1 flex items-center justify-center text-duck-dark/50 dark:text-foreground/50">
-        <Loader2 className="h-5 w-5 animate-spin" />
-      </div>
-    );
-  }
-  return mode === 'script' ? <ScriptJobDetail /> : <PipelineJobDetail />;
-};

src/apps/officer-web/Screens/Dashboard/Jobs/JobsPage.tsx

@@ -0,0 +1,177 @@
+import { useState, useEffect } from 'react';
+import { useParams, useNavigate } from 'react-router';
+import { Search, CheckCircle2, AlertCircle, Clock, Loader2, StopCircle, AlertTriangle, Inbox } from 'lucide-react';
+import { WorkspaceLayout } from 'officerdev';
+import type { LayoutNode, PanelComponents } from 'officerdev';
+import { useClient } from 'hooks/useClient';
+import { Card } from '@/components/Card';
+import { ScriptJobDetail } from './ScriptJobDetail';
+import { PipelineJobDetail } from './JobDetail';
+
+type JobSummary = {
+  id: string;
+  mode: string;
+  taskDirName: string;
+  taskName: string;
+  status: 'pending' | 'running' | 'completed' | 'failed' | 'stopped' | 'interrupted';
+  exitCode: number | null;
+  totalCost: { inputTokens: number; outputTokens: number; totalUSD: number } | null;
+  createdAt: string;
+  error: string | null;
+};
+
+const formatDate = (iso: string) =>
+  new Date(iso).toLocaleDateString(undefined, { month: 'short', day: 'numeric', hour: '2-digit', minute: '2-digit' });
+
+const StatusIcon = ({ status }: { status: JobSummary['status'] }) => {
+  switch (status) {
+    case 'completed': return <CheckCircle2 className="h-4 w-4 text-green-500 shrink-0" />;
+    case 'failed': return <AlertCircle className="h-4 w-4 text-red-500 shrink-0" />;
+    case 'running': return <Loader2 className="h-4 w-4 text-blue-500 shrink-0 animate-spin" />;
+    case 'stopped': return <StopCircle className="h-4 w-4 text-amber-500 shrink-0" />;
+    case 'interrupted': return <AlertTriangle className="h-4 w-4 text-amber-500 shrink-0" />;
+    case 'pending': return <Clock className="h-4 w-4 text-duck-dark/40 shrink-0" />;
+  }
+};
+
+// ── Left panel: the jobs list (polls so running/queued statuses stay fresh) ──
+const JobsListPanel = () => {
+  const client = useClient();
+  const navigate = useNavigate();
+  const { id: activeId } = useParams<{ id: string }>();
+  const [jobs, setJobs] = useState<JobSummary[]>([]);
+  const [search, setSearch] = useState('');
+  const [isLoading, setIsLoading] = useState(true);
+
+  useEffect(() => {
+    let alive = true;
+    const load = () =>
+      client.get<JobSummary[]>('/jobs').then((data) => { if (alive) { setJobs(data); setIsLoading(false); } }).catch(() => alive && setIsLoading(false));
+    load();
+    const timer = setInterval(load, 2500);
+    return () => { alive = false; clearInterval(timer); };
+  }, []);
+
+  const filtered = search
+    ? jobs.filter((j) => {
+        const q = search.toLowerCase();
+        return j.taskName.toLowerCase().includes(q) || j.taskDirName.toLowerCase().includes(q) || j.status.includes(q);
+      })
+    : jobs;
+
+  return (
+    <div className="h-full p-2">
+      <Card className="h-full flex flex-col overflow-hidden">
+        <div className="p-3 border-b border-duck-dark/10 flex items-center gap-3">
+          <h2 className="text-sm font-semibold text-duck-dark shrink-0">Jobs</h2>
+          <div className="relative flex-1">
+            <Search className="absolute left-2.5 top-1/2 -translate-y-1/2 h-3.5 w-3.5 text-duck-dark/40" />
+            <input
+              type="text"
+              placeholder="Search…"
+              value={search}
+              onChange={(ev) => setSearch(ev.target.value)}
+              className="w-full pl-8 pr-3 py-1.5 text-sm rounded-md border border-duck-dark/15 bg-background/60 text-duck-dark placeholder:text-duck-dark/30 focus:outline-none focus:ring-1 focus:ring-duck-teal/40"
+            />
+          </div>
+        </div>
+
+        <div className="flex-1 overflow-y-auto">
+          {isLoading && <div className="flex items-center justify-center h-32 text-duck-dark/30 text-sm">Loading…</div>}
+          {!isLoading && filtered.length === 0 && (
+            <div className="flex items-center justify-center h-32 text-duck-dark/30 text-sm">
+              {search ? 'No jobs match' : 'No jobs yet'}
+            </div>
+          )}
+          {filtered.map((job) => (
+            <button
+              key={job.id}
+              onClick={() => navigate(`/jobs/${job.id}`)}
+              className={`w-full text-left px-4 py-3 border-b border-duck-dark/5 transition-colors cursor-pointer flex items-center gap-3 ${
+                job.id === activeId ? 'bg-duck-teal/10' : 'hover:bg-duck-dark/5'
+              }`}
+            >
+              <StatusIcon status={job.status} />
+              <div className="flex-1 min-w-0">
+                <span className="text-sm font-medium text-duck-dark truncate block">{job.taskName}</span>
+                <div className="flex items-center gap-2 mt-0.5">
+                  <span className="text-xs text-duck-dark/50">{formatDate(job.createdAt)}</span>
+                  {job.error && <span className="text-xs text-red-500 truncate max-w-[180px]">{job.error}</span>}
+                </div>
+              </div>
+            </button>
+          ))}
+        </div>
+      </Card>
+    </div>
+  );
+};
+
+// ── Right panel: the selected job's detail, by mode (script terminal / pipeline steps) ──
+const JobDetailPanel = () => {
+  const { id } = useParams<{ id: string }>();
+  const client = useClient();
+  const [mode, setMode] = useState<string | null>(null);
+
+  useEffect(() => {
+    if (!id) { setMode(null); return; }
+    setMode(null);
+    client.get<{ mode?: string }>(`/jobs/${id}`).then((j) => setMode(j.mode ?? 'pipeline')).catch(() => setMode('notfound'));
+  }, [id]);
+
+  if (!id) {
+    return (
+      <div className="h-full p-2">
+        <Card className="h-full flex flex-col items-center justify-center gap-2 text-duck-dark/30">
+          <Inbox className="h-8 w-8" />
+          <span className="text-sm">Select a job</span>
+        </Card>
+      </div>
+    );
+  }
+  if (mode === null) {
+    return (
+      <div className="h-full p-2">
+        <Card className="h-full flex items-center justify-center text-duck-dark/40"><Loader2 className="h-5 w-5 animate-spin" /></Card>
+      </div>
+    );
+  }
+  if (mode === 'notfound') {
+    return (
+      <div className="h-full p-2">
+        <Card className="h-full flex items-center justify-center text-duck-dark/50 text-sm">Job not found.</Card>
+      </div>
+    );
+  }
+  // Pipeline detail brings its own full chrome; the script terminal gets a card background here.
+  if (mode === 'script') {
+    return (
+      <div className="h-full p-2">
+        <Card className="h-full flex flex-col overflow-hidden"><ScriptJobDetail key={id} /></Card>
+      </div>
+    );
+  }
+  return <PipelineJobDetail key={id} />;
+};
+
+const JOBS_LAYOUT: LayoutNode = {
+  type: 'group',
+  id: 'jobs-root',
+  direction: 'horizontal',
+  children: [
+    { node: { type: 'panel', id: 'jobs-list', appType: null }, size: 32 },
+    { node: { type: 'panel', id: 'job-detail', appType: null }, size: 68 },
+  ],
+};
+
+const PANEL_COMPONENTS: PanelComponents = { 'jobs-list': JobsListPanel, 'job-detail': JobDetailPanel };
+
+// One page for /jobs and /jobs/:id — master (list) + detail, resizable like /chat.
+export const JobsPage = () => {
+  const [layout, setLayout] = useState<LayoutNode>(JOBS_LAYOUT);
+  return (
+    <div className="h-full w-full">
+      <WorkspaceLayout layout={layout} onLayoutChange={setLayout} components={PANEL_COMPONENTS} noHeader />
+    </div>
+  );
+};

src/apps/officer-web/Screens/Dashboard/Jobs/JobsScreen.tsx

@@ -1,138 +0,0 @@
-import { useState, useEffect } from 'react';
-import { useNavigate } from 'react-router';
-import { Search, CheckCircle2, AlertCircle, Clock, Loader2, StopCircle, AlertTriangle } from 'lucide-react';
-import { useClient } from 'hooks/useClient';
-import { Card } from '@/components/Card';
-
-type JobSummary = {
-  id: string;
-  taskDirName: string;
-  taskName: string;
-  status: 'pending' | 'running' | 'completed' | 'failed' | 'stopped' | 'interrupted';
-  totalCost: { inputTokens: number; outputTokens: number; totalUSD: number } | null;
-  createdAt: string;
-  startedAt: string | null;
-  completedAt: string | null;
-  error: string | null;
-};
-
-const formatDate = (iso: string) => {
-  const d = new Date(iso);
-  return d.toLocaleDateString(undefined, { month: 'short', day: 'numeric', hour: '2-digit', minute: '2-digit' });
-};
-
-const formatCost = (cost: number) => `$${cost.toFixed(4)}`;
-
-const StatusIcon = ({ status }: { status: JobSummary['status'] }) => {
-  switch (status) {
-    case 'completed':
-      return <CheckCircle2 className="h-4 w-4 text-green-500 shrink-0" />;
-    case 'failed':
-      return <AlertCircle className="h-4 w-4 text-red-500 shrink-0" />;
-    case 'running':
-      return <Loader2 className="h-4 w-4 text-blue-500 shrink-0 animate-spin" />;
-    case 'stopped':
-      return <StopCircle className="h-4 w-4 text-amber-500 shrink-0" />;
-    case 'interrupted':
-      return <AlertTriangle className="h-4 w-4 text-amber-500 shrink-0" />;
-    case 'pending':
-      return <Clock className="h-4 w-4 text-duck-dark/40 shrink-0" />;
-  }
-};
-
-const StatusBadge = ({ status }: { status: JobSummary['status'] }) => {
-  const colors: Record<string, string> = {
-    completed: 'bg-green-100 dark:bg-green-900/40 text-green-700 dark:text-green-300',
-    failed: 'bg-red-100 dark:bg-red-900/40 text-red-700 dark:text-red-300',
-    running: 'bg-blue-100 dark:bg-blue-900/40 text-blue-700 dark:text-blue-300',
-    stopped: 'bg-amber-100 dark:bg-amber-900/40 text-amber-700 dark:text-amber-300',
-    interrupted: 'bg-amber-100 dark:bg-amber-900/40 text-amber-700 dark:text-amber-300',
-    pending: 'bg-gray-100 dark:bg-gray-800/40 text-gray-600 dark:text-gray-400',
-  };
-
-  return (
-    <span className={`text-[10px] font-medium px-1.5 py-0.5 rounded-full ${colors[status] ?? ''}`}>
-      {status}
-    </span>
-  );
-};
-
-export const JobsScreen = () => {
-  const client = useClient();
-  const navigate = useNavigate();
-  const [jobs, setJobs] = useState<JobSummary[]>([]);
-  const [search, setSearch] = useState('');
-  const [isLoading, setIsLoading] = useState(true);
-
-  useEffect(() => {
-    client
-      .get<JobSummary[]>('/pipeline-jobs')
-      .then((data) => {
-        setJobs(data);
-        setIsLoading(false);
-      })
-      .catch(() => setIsLoading(false));
-  }, []);
-
-  const filtered = search
-    ? jobs.filter((j) => {
-        const q = search.toLowerCase();
-        return j.taskName.toLowerCase().includes(q) || j.taskDirName.toLowerCase().includes(q) || j.status.includes(q);
-      })
-    : jobs;
-
-  return (
-    <div className="flex h-full p-3 md:p-6">
-      <Card className="flex-1 flex flex-col overflow-hidden">
-        <div className="p-3 border-b border-duck-dark/10 flex items-center gap-3">
-          <h2 className="text-sm font-semibold text-duck-dark">Pipeline Jobs</h2>
-          <div className="relative flex-1 max-w-xs">
-            <Search className="absolute left-2.5 top-1/2 -translate-y-1/2 h-3.5 w-3.5 text-duck-dark/40" />
-            <input
-              type="text"
-              placeholder="Search jobs..."
-              value={search}
-              onChange={(ev) => setSearch(ev.target.value)}
-              className="w-full pl-8 pr-3 py-1.5 text-sm rounded-md border border-duck-dark/15 bg-background/60 text-duck-dark placeholder:text-duck-dark/30 focus:outline-none focus:ring-1 focus:ring-duck-teal/40"
-            />
-          </div>
-        </div>
-
-        <div className="flex-1 overflow-y-auto">
-          {isLoading && (
-            <div className="flex items-center justify-center h-32 text-duck-dark/30 text-sm">Loading...</div>
-          )}
-          {!isLoading && filtered.length === 0 && (
-            <div className="flex items-center justify-center h-32 text-duck-dark/30 text-sm">
-              {search ? 'No jobs match your search' : 'No pipeline jobs yet'}
-            </div>
-          )}
-          {filtered.map((job) => (
-            <button
-              key={job.id}
-              onClick={() => navigate(`/jobs/${job.id}`)}
-              className="w-full text-left px-4 py-3 border-b border-duck-dark/5 hover:bg-duck-dark/5 transition-colors cursor-pointer flex items-center gap-3"
-            >
-              <StatusIcon status={job.status} />
-              <div className="flex-1 min-w-0">
-                <div className="flex items-center gap-2">
-                  <span className="text-sm font-medium text-duck-dark truncate">{job.taskName}</span>
-                  <StatusBadge status={job.status} />
-                </div>
-                <div className="flex items-center gap-2 mt-0.5">
-                  <span className="text-xs text-duck-dark/50">{formatDate(job.createdAt)}</span>
-                  {job.totalCost && (
-                    <span className="text-xs text-duck-dark/40 font-mono">{formatCost(job.totalCost.totalUSD)}</span>
-                  )}
-                  {job.error && (
-                    <span className="text-xs text-red-500 truncate max-w-[200px]">{job.error}</span>
-                  )}
-                </div>
-              </div>
-            </button>
-          ))}
-        </div>
-      </Card>
-    </div>
-  );
-};

src/apps/officer-web/Screens/Dashboard/Jobs/index.tsx

@@ -1,2 +1 @@
-export { JobsScreen } from './JobsScreen';
-export { JobDetail } from './JobDetailView';
+export { JobsPage } from './JobsPage';