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

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
2026-07-23 16:25:45 +00:00
parent c5d79085cb
commit 5da29e4004
1 changed files with 110 additions and 98 deletions
@@ -34,90 +34,105 @@ const StatusIcon = ({ status }: { status: JobSummary['status'] }) => {
  }
 };

-const SectionLabel = ({ children }: { children: ReactNode }) => (
-  <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">
-    {children}
-  </div>
-);
-
-// ── Left panel: the jobs list (polls so running/queued statuses stay fresh) ──
-const JobsListPanel = () => {
+// Jobs data — each list panel polls independently (cheap for a single user).
+const useJobsData = () => {
  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(
+    (ev: MouseEvent, id: string) => { ev.stopPropagation(); client.post(`/jobs/${id}/stop`, {}).then(() => load()).catch(() => {}); },
+    [client, load],
+  );
+  return { jobs, isLoading, cancel };
+};

-  // Stop a running job / remove a queued one, then refresh immediately.
-  const cancel = (ev: MouseEvent, id: string) => {
-    ev.stopPropagation();
-    client.post(`/jobs/${id}/stop`, {}).then(() => load()).catch(() => {});
-  };
-
-  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;
-
-  // 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
-        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">
-            <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>
+type JobRowProps = { job: JobSummary; onCancel: (ev: MouseEvent, id: string) => void };
+const JobRow = ({ job, onCancel }: JobRowProps) => {
+  const navigate = useNavigate();
+  const { id: activeId } = useParams<{ id: string }>();
+  const cancellable = job.status === 'running' || job.status === 'pending';
+  return (
+    <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'}`}>
+      <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">
+          <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>
+      {cancellable && (
+        <button
+          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"
+        >
+          <X className="h-4 w-4" />
        </button>
-        {cancellable && (
-          <button
-            onClick={(ev) => cancel(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"
-          >
-            <X className="h-4 w-4" />
-          </button>
-        )}
-      </div>
-    );
-  };
+      )}
+    </div>
+  );
+};

+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">
-          <h2 className="text-sm font-semibold text-duck-dark shrink-0">Jobs</h2>
+        <PanelHeader>
+          <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>
+        </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>
+          ) : 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>
+          ) : (
+            history.map((job) => <JobRow key={job.id} job={job} onCancel={cancel} />)
+          )}
        </div>
-
-        {isLoading ? (
-          <div className="flex-1 flex items-center justify-center text-duck-dark/30 text-sm">Loading…</div>
-        ) : (
-          <div className="flex-1 min-h-0 flex flex-col">
-            {/* 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 = () => {