jobs: split left column into Active + History resizable panels (email-style)

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

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

@@ -34,62 +34,34 @@ const StatusIcon = ({ status }: { status: JobSummary['status'] }) => {
   }
 };
 
-const SectionLabel = ({ children }: { children: ReactNode }) => (
+// Jobs data — each list panel polls independently (cheap for a single user).
-  <div className="px-3 py-1.5 text-[10px] font-semibold uppercase tracking-wide text-duck-dark/40 bg-duck-dark/[0.03] border-b border-duck-dark/10 shrink-0">
+const useJobsData = () => {
-    {children}
-  </div>
-);
-
-// ── 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);
-
   const load = useCallback(
-    () => client.get<JobSummary[]>('/jobs').then((data) => { setJobs(data); setIsLoading(false); }).catch(() => setIsLoading(false)),
+    () => client.get<JobSummary[]>('/jobs').then((d) => { setJobs(d); setIsLoading(false); }).catch(() => setIsLoading(false)),
     [client],
   );
-
   useEffect(() => {
     load();
     const timer = setInterval(load, 2500);
     return () => clearInterval(timer);
   }, [load]);
-
+  const cancel = useCallback(
-  // Stop a running job / remove a queued one, then refresh immediately.
+    (ev: MouseEvent, id: string) => { ev.stopPropagation(); client.post(`/jobs/${id}/stop`, {}).then(() => load()).catch(() => {}); },
-  const cancel = (ev: MouseEvent, id: string) => {
+    [client, load],
-    ev.stopPropagation();
+  );
-    client.post(`/jobs/${id}/stop`, {}).then(() => load()).catch(() => {});
+  return { jobs, isLoading, cancel };
 };
 
-  const filtered = search
+type JobRowProps = { job: JobSummary; onCancel: (ev: MouseEvent, id: string) => void };
-    ? jobs.filter((j) => {
+const JobRow = ({ job, onCancel }: JobRowProps) => {
-        const q = search.toLowerCase();
+  const navigate = useNavigate();
-        return j.taskName.toLowerCase().includes(q) || j.taskDirName.toLowerCase().includes(q) || j.status.includes(q);
+  const { id: activeId } = useParams<{ id: string }>();
-      })
-    : jobs;
-
-  // Active = running first, then the FIFO queue (oldest pending on top — next to run). History = the
-  // rest (already newest-first from the API).
-  const active = [
-    ...filtered.filter((j) => j.status === 'running'),
-    ...filtered.filter((j) => j.status === 'pending').sort((a, b) => +new Date(a.createdAt) - +new Date(b.createdAt)),
-  ];
-  const history = filtered.filter((j) => j.status !== 'running' && j.status !== 'pending');
-
-  const renderRow = (job: JobSummary) => {
   const cancellable = job.status === 'running' || job.status === 'pending';
   return (
-      <div
+    <div className={`group w-full border-b border-duck-dark/5 flex items-center transition-colors ${job.id === activeId ? 'bg-duck-teal/10' : 'hover:bg-duck-dark/5'}`}>
-        key={job.id}
-        className={`group w-full border-b border-duck-dark/5 flex items-center transition-colors ${
-          job.id === activeId ? 'bg-duck-teal/10' : 'hover:bg-duck-dark/5'
-        }`}
-      >
       <button onClick={() => navigate(`/jobs/${job.id}`)} className="flex-1 min-w-0 text-left px-4 py-2.5 flex items-center gap-3 cursor-pointer">
         <StatusIcon status={job.status} />
         <div className="flex-1 min-w-0">
@@ -102,7 +74,7 @@ const JobsListPanel = () => {
       </button>
       {cancellable && (
         <button
-            onClick={(ev) => cancel(ev, job.id)}
+          onClick={(ev) => onCancel(ev, job.id)}
           title={job.status === 'pending' ? 'Remove from queue' : 'Stop'}
           className="shrink-0 mr-2 p-1.5 rounded-md text-duck-dark/40 hover:text-red-500 hover:bg-red-500/10 md:opacity-0 group-hover:opacity-100 transition-opacity cursor-pointer"
         >
@@ -113,11 +85,54 @@ const JobsListPanel = () => {
   );
 };
 
+const PanelHeader = ({ children }: { children: ReactNode }) => (
+  <div className="px-3 py-2 border-b border-duck-dark/10 flex items-center gap-2 shrink-0">{children}</div>
+);
+
+// Top-left panel: running first, then the FIFO queue (oldest pending on top — next to run).
+const ActiveJobsPanel = () => {
+  const { jobs, isLoading, cancel } = useJobsData();
+  const active = [
+    ...jobs.filter((j) => j.status === 'running'),
+    ...jobs.filter((j) => j.status === 'pending').sort((a, b) => +new Date(a.createdAt) - +new Date(b.createdAt)),
+  ];
   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 shrink-0">
+        <PanelHeader>
-          <h2 className="text-sm font-semibold text-duck-dark shrink-0">Jobs</h2>
+          <h2 className="text-sm font-semibold text-duck-dark">Running &amp; Queued</h2>
+          {active.length > 0 && <span className="text-xs text-duck-dark/40">{active.length}</span>}
+        </PanelHeader>
+        <div className="flex-1 overflow-y-auto">
+          {isLoading ? (
+            <div className="flex items-center justify-center h-full text-duck-dark/30 text-xs">Loading…</div>
+          ) : active.length === 0 ? (
+            <div className="flex items-center justify-center h-full text-duck-dark/30 text-xs">Nothing running</div>
+          ) : (
+            active.map((job) => <JobRow key={job.id} job={job} onCancel={cancel} />)
+          )}
+        </div>
+      </Card>
+    </div>
+  );
+};
+
+// Bottom-left panel: finished / failed / stopped, newest first, searchable.
+const HistoryJobsPanel = () => {
+  const { jobs, isLoading, cancel } = useJobsData();
+  const [search, setSearch] = useState('');
+  const history = jobs
+    .filter((j) => j.status !== 'running' && j.status !== 'pending')
+    .filter((j) => {
+      if (!search) return true;
+      const q = search.toLowerCase();
+      return j.taskName.toLowerCase().includes(q) || j.taskDirName.toLowerCase().includes(q) || j.status.includes(q);
+    });
+  return (
+    <div className="h-full p-2">
+      <Card className="h-full flex flex-col overflow-hidden">
+        <PanelHeader>
+          <h2 className="text-sm font-semibold text-duck-dark shrink-0">History</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
@@ -125,39 +140,19 @@ const JobsListPanel = () => {
               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"
+              className="w-full pl-8 pr-3 py-1 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>
+        </PanelHeader>
-
+        <div className="flex-1 overflow-y-auto">
           {isLoading ? (
-          <div className="flex-1 flex items-center justify-center text-duck-dark/30 text-sm">Loading…</div>
+            <div className="flex items-center justify-center h-full text-duck-dark/30 text-xs">Loading…</div>
+          ) : history.length === 0 ? (
+            <div className="flex items-center justify-center h-full text-duck-dark/30 text-xs">{search ? 'No matches' : 'No finished jobs'}</div>
           ) : (
-          <div className="flex-1 min-h-0 flex flex-col">
+            history.map((job) => <JobRow key={job.id} job={job} onCancel={cancel} />)
-            {/* Active (running + queued) — top 70% */}
-            <div className="flex-[7] min-h-0 flex flex-col border-b border-duck-dark/10">
-              <SectionLabel>Running &amp; Queued{active.length ? ` · ${active.length}` : ''}</SectionLabel>
-              <div className="flex-1 overflow-y-auto">
-                {active.length === 0 ? (
-                  <div className="flex items-center justify-center h-full min-h-16 text-duck-dark/30 text-xs">Nothing running</div>
-                ) : (
-                  active.map(renderRow)
           )}
         </div>
-            </div>
-            {/* History — bottom 30% */}
-            <div className="flex-[3] min-h-0 flex flex-col">
-              <SectionLabel>History</SectionLabel>
-              <div className="flex-1 overflow-y-auto">
-                {history.length === 0 ? (
-                  <div className="flex items-center justify-center h-full min-h-16 text-duck-dark/30 text-xs">{search ? 'No matches' : 'No finished jobs'}</div>
-                ) : (
-                  history.map(renderRow)
-                )}
-              </div>
-            </div>
-          </div>
-        )}
       </Card>
     </div>
   );
@@ -210,17 +205,34 @@ const JobDetailPanel = () => {
   return <PipelineJobDetail key={id} />;
 };
 
+// Left column = two stacked panels (Active over History) with a resizable divider, like /email's
+// reader/chat split. Right column = the detail.
 const JOBS_LAYOUT: LayoutNode = {
   type: 'group',
   id: 'jobs-root',
   direction: 'horizontal',
   children: [
-    { node: { type: 'panel', id: 'jobs-list', appType: null }, size: 32 },
+    {
+      node: {
+        type: 'group',
+        id: 'jobs-left',
+        direction: 'vertical',
+        children: [
+          { node: { type: 'panel', id: 'jobs-active', appType: null }, size: 68 },
+          { node: { type: 'panel', id: 'jobs-history', appType: null }, size: 32 },
+        ],
+      },
+      size: 32,
+    },
     { node: { type: 'panel', id: 'job-detail', appType: null }, size: 68 },
   ],
 };
 
-const PANEL_COMPONENTS: PanelComponents = { 'jobs-list': JobsListPanel, 'job-detail': JobDetailPanel };
+const PANEL_COMPONENTS: PanelComponents = {
+  'jobs-active': ActiveJobsPanel,
+  'jobs-history': HistoryJobsPanel,
+  'job-detail': JobDetailPanel,
+};
 
 // One page for /jobs and /jobs/:id — master (list) + detail, resizable like /chat.
 export const JobsPage = () => {