npm - @agentprojectcontext/apx - Versions diffs - 1.46.0 → 1.48.0 - Mend

@agentprojectcontext/apx 1.46.0 → 1.48.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (16) hide show

package/package.json +1 -1
package/src/host/daemon/api/sessions.js +7 -1
package/src/host/daemon/api/tasks.js +17 -7
package/src/host/daemon/stt-venv.js +100 -0
package/src/host/daemon/whisper-server.js +4 -1
package/src/interfaces/web/dist/assets/{index-oOjZZktw.js → index-C9O1GTZ_.js} +45 -45
package/src/interfaces/web/dist/assets/{index-oOjZZktw.js.map → index-C9O1GTZ_.js.map} +1 -1
package/src/interfaces/web/dist/index.html +1 -1
package/src/interfaces/web/src/components/Pager.tsx +102 -12
package/src/interfaces/web/src/components/Section.tsx +15 -4
package/src/interfaces/web/src/lib/api/sessions.ts +8 -0
package/src/interfaces/web/src/lib/api/tasks.ts +10 -0
package/src/interfaces/web/src/lib/http.ts +30 -0
package/src/interfaces/web/src/screens/base/GlobalTasksTab.tsx +33 -29
package/src/interfaces/web/src/screens/base/SessionsTab.tsx +25 -22
package/src/interfaces/web/src/screens/project/TasksTab.tsx +20 -19

package/src/interfaces/web/dist/index.html CHANGED Viewed

@@ -18,7 +18,7 @@
     <link rel="apple-touch-icon" href="/favicon/dark/apple-touch-icon.png" media="(prefers-color-scheme: dark)" />
     <link rel="manifest" href="/favicon/white/site.webmanifest" media="(prefers-color-scheme: light)" />
     <link rel="manifest" href="/favicon/dark/site.webmanifest" media="(prefers-color-scheme: dark)" />
-    <script type="module" crossorigin src="/assets/index-oOjZZktw.js"></script>
+    <script type="module" crossorigin src="/assets/index-C9O1GTZ_.js"></script>
     <link rel="stylesheet" crossorigin href="/assets/index-CilEtMjV.css">
   </head>
   <body class="bg-background text-foreground antialiased">

package/src/interfaces/web/src/components/Pager.tsx CHANGED Viewed

@@ -1,34 +1,77 @@
-import { useEffect, useState } from "react";
+import { useEffect, useState, type ReactNode } from "react";
+import useSWR, { type SWRConfiguration } from "swr";
 import { ChevronLeft, ChevronRight } from "lucide-react";
 import { Button } from "./ui";
 import { UiSelect } from "./UiSelect";
+import { cn } from "../lib/cn";
 import { t } from "../i18n";
 const DEFAULT_PAGE_SIZE = 20;
 export const PAGE_SIZES = [10, 20, 50, 100];
-// Client-side pagination over an already-fetched array. The list endpoints
-// return the full set (sessions/tasks are bounded), so we page in the browser
-// rather than round-trip the daemon. Pass `resetKey` (e.g. the active filter)
-// to jump back to page 1 whenever the source set changes; the window is also
-// clamped so a shrinking list never strands the user on an empty page.
-export function usePaged<T>(items: T[], resetKey?: unknown, initialPageSize = DEFAULT_PAGE_SIZE) {
+// The pager-facing slice of usePagedQuery's return value. PagedList/Pager only
+// need these fields, so call sites can pass the whole query result structurally.
+export interface PagerState {
+  page: number;
+  pageCount: number;
+  total: number;
+  start: number;
+  end: number;
+  pageSize: number;
+  setPage: (p: number) => void;
+  setPageSize: (n: number) => void;
+}
+// Server-side pagination. The daemon paginates by ?limit&?offset and returns
+// the full count, so we fetch only the current page (real API pagination, not a
+// client-side slice of everything). `fetchPage` is called with (limit, offset)
+// and must return { items, total }. Pass `resetKey` (e.g. the active filter) to
+// jump back to page 1 when the query changes; the page is also clamped so
+// removing the last row on a page never strands the user on an empty page.
+//
+// Returns the page `items` plus SWR state (isLoading/error/mutate) and the
+// PagerState fields consumed by <PagedList> / <Pager>.
+export function usePagedQuery<T>({
+  key,
+  fetchPage,
+  resetKey,
+  initialPageSize = DEFAULT_PAGE_SIZE,
+  swr,
+}: {
+  key: string | null;
+  fetchPage: (limit: number, offset: number) => Promise<{ items: T[]; total: number }>;
+  resetKey?: unknown;
+  initialPageSize?: number;
+  swr?: SWRConfiguration;
+}) {
   const [page, setPage] = useState(1);
   const [pageSize, setPageSize] = useState(initialPageSize);
   useEffect(() => { setPage(1); }, [resetKey]);
-  const pageCount = Math.max(1, Math.ceil(items.length / pageSize));
+  const offset = (page - 1) * pageSize;
+  const res = useSWR(
+    key == null ? null : [key, pageSize, offset],
+    () => fetchPage(pageSize, offset),
+    { keepPreviousData: true, ...swr },
+  );
+  const total = res.data?.total ?? 0;
+  const pageCount = Math.max(1, Math.ceil(total / pageSize));
+  // Clamp once totals are known (e.g. after the last row on a page is removed).
   const safePage = Math.min(page, pageCount);
   useEffect(() => { if (page !== safePage) setPage(safePage); }, [page, safePage]);
-  const start = (safePage - 1) * pageSize;
-  const end = Math.min(start + pageSize, items.length);
+  const start = total === 0 ? 0 : offset;
+  const end = Math.min(offset + pageSize, total);
   return {
-    slice: items.slice(start, end),
+    items: (res.data?.items ?? []) as T[],
+    isLoading: res.isLoading,
+    error: res.error as Error | undefined,
+    mutate: res.mutate,
     page: safePage,
     pageCount,
-    total: items.length,
+    total,
     start,
     end,
     pageSize,
@@ -86,3 +129,50 @@ export function Pager({
     </div>
   );
 }
+// Reusable list + pager wrapper. `children` is the list markup (built from
+// `paged.slice`); the Pager is wired from `paged` automatically.
+//
+// With `fullHeight`, the list area becomes an internal scroller and the pager
+// is pinned at the bottom, so the whole block fits one viewport with no outer
+// page scroll. This requires the parent to give it a bounded height — render it
+// inside <Section fullHeight> (which lays out as a flex column). Without the
+// flag it falls back to normal document flow (list, then pager, page scrolls).
+export function PagedList({
+  paged,
+  fullHeight,
+  className,
+  children,
+}: {
+  paged: PagerState;
+  fullHeight?: boolean;
+  className?: string;
+  children: ReactNode;
+}) {
+  const pager = (
+    <Pager
+      page={paged.page}
+      pageCount={paged.pageCount}
+      total={paged.total}
+      start={paged.start}
+      end={paged.end}
+      pageSize={paged.pageSize}
+      onPage={paged.setPage}
+      onPageSize={paged.setPageSize}
+    />
+  );
+  if (!fullHeight) {
+    return (
+      <div className={className}>
+        {children}
+        {pager}
+      </div>
+    );
+  }
+  return (
+    <div className="flex min-h-0 flex-1 flex-col">
+      <div className={cn("min-h-0 flex-1 overflow-y-auto", className)}>{children}</div>
+      <div className="shrink-0">{pager}</div>
+    </div>
+  );
+}

package/src/interfaces/web/src/components/Section.tsx CHANGED Viewed

@@ -7,19 +7,30 @@ interface SectionProps {
   action?: ReactNode;
   className?: string;
   children: ReactNode;
+  // Fill the available height and let the body manage its own scroll instead of
+  // growing the page. The card becomes a flex column (header pinned, body
+  // flex-1); pair with a <PagedList fullHeight> child for an internal scroller
+  // with a pinned pager. Needs a bounded-height parent (the tab content area is).
+  fullHeight?: boolean;
 }
-export function Section({ title, description, action, className, children }: SectionProps) {
+export function Section({ title, description, action, className, children, fullHeight }: SectionProps) {
   return (
-    <section className={cn("rounded-xl border border-border bg-card p-5", className)}>
-      <header className="mb-4 flex items-start justify-between gap-4">
+    <section
+      className={cn(
+        "rounded-xl border border-border bg-card p-5",
+        fullHeight && "flex h-full min-h-0 flex-col",
+        className
+      )}
+    >
+      <header className={cn("mb-4 flex items-start justify-between gap-4", fullHeight && "shrink-0")}>
         <div>
           <h2 className="text-lg font-semibold tracking-tight">{title}</h2>
           {description && <p className="mt-0.5 text-sm text-muted-fg">{description}</p>}
         </div>
         {action}
       </header>
-      <div>{children}</div>
+      <div className={cn(fullHeight && "flex min-h-0 flex-1 flex-col")}>{children}</div>
     </section>
   );
 }

package/src/interfaces/web/src/lib/api/sessions.ts CHANGED Viewed

@@ -13,4 +13,12 @@ export const Sessions = {
   // Cross-engine sessions (apx · claude · codex), newest first.
   global: (engine?: string) =>
     http.get<{ sessions: SessionRow[] }>(`/sessions${engine ? `?engine=${encodeURIComponent(engine)}` : ""}`),
+  // Server-paginated page: returns the requested window plus the full total.
+  page: ({ engine, limit, offset }: { engine?: string; limit: number; offset: number }) => {
+    const q = new URLSearchParams({ limit: String(limit), offset: String(offset) });
+    if (engine) q.set("engine", engine);
+    return http
+      .getWithTotal<{ sessions: SessionRow[] }>(`/sessions?${q.toString()}`)
+      .then((r) => ({ items: r.data.sessions, total: r.total }));
+  },
 };

package/src/interfaces/web/src/lib/api/tasks.ts CHANGED Viewed

@@ -11,6 +11,16 @@ export const Tasks = {
     http.get<TaskEntry[]>(`/projects/${pid}/tasks?state=${state}`),
   global: (state: TaskEntry["state"] | "all" = "open") =>
     http.get<GlobalTaskEntry[]>(`/tasks?state=${state}`),
+  // Server-paginated variants: one project (listPage) or all projects
+  // (globalPage). Each returns the requested window plus the full total.
+  listPage: (pid: string, { state, limit, offset }: { state: TaskEntry["state"] | "all"; limit: number; offset: number }) =>
+    http
+      .getWithTotal<TaskEntry[]>(`/projects/${pid}/tasks?state=${state}&limit=${limit}&offset=${offset}`)
+      .then((r) => ({ items: r.data, total: r.total })),
+  globalPage: ({ state, limit, offset }: { state: TaskEntry["state"] | "all"; limit: number; offset: number }) =>
+    http
+      .getWithTotal<GlobalTaskEntry[]>(`/tasks?state=${state}&limit=${limit}&offset=${offset}`)
+      .then((r) => ({ items: r.data, total: r.total })),
   add:    (pid: string, body: Partial<TaskEntry>) =>
     http.post<TaskEntry>(`/projects/${pid}/tasks`, body),
   done:   (pid: string, id: string) => http.post<TaskEntry>(`/projects/${pid}/tasks/${id}/done`),

package/src/interfaces/web/src/lib/http.ts CHANGED Viewed

@@ -52,8 +52,38 @@ async function request<T>(
   return (await res.json()) as T;
 }
+// GET that also surfaces the total-row count for server-side pagination. The
+// daemon returns the full count in the X-Total-Count header (the body keeps its
+// normal shape); we fall back to the payload length when the header is absent
+// (e.g. an older daemon) so pagination degrades gracefully instead of breaking.
+async function getWithTotal<T>(path: string): Promise<{ data: T; total: number }> {
+  const headers: Record<string, string> = token ? { authorization: `Bearer ${token}` } : {};
+  const res = await fetch(path, { method: "GET", headers });
+  if (!res.ok) {
+    let detail = "";
+    let parsed: unknown = null;
+    try {
+      parsed = await res.json();
+      detail = (parsed as { error?: string })?.error || JSON.stringify(parsed);
+    } catch {
+      detail = await res.text();
+    }
+    throw new HttpError(res.status, `GET ${path} → ${res.status}: ${detail}`, parsed);
+  }
+  const data = (await res.json()) as T;
+  const header = res.headers.get("X-Total-Count");
+  const total =
+    header != null && header !== ""
+      ? parseInt(header, 10)
+      : Array.isArray(data)
+        ? data.length
+        : 0;
+  return { data, total };
+}
 export const http = {
   get:   <T>(p: string)              => request<T>("GET", p),
+  getWithTotal,
   post:  <T>(p: string, b?: unknown) => request<T>("POST", p, b),
   put:   <T>(p: string, b?: unknown) => request<T>("PUT", p, b),
   patch: <T>(p: string, b?: unknown) => request<T>("PATCH", p, b),

package/src/interfaces/web/src/screens/base/GlobalTasksTab.tsx CHANGED Viewed

@@ -1,21 +1,24 @@
 import { useState } from "react";
 import { useNavigate } from "react-router-dom";
-import useSWR from "swr";
 import { Tasks } from "../../lib/api";
 import { Section } from "../../components/Section";
-import { Pager, usePaged } from "../../components/Pager";
+import { PagedList, usePagedQuery } from "../../components/Pager";
 import { Badge, Button, Empty, Loading } from "../../components/ui";
 import { t } from "../../i18n";
-// All projects' tasks, aggregated (GET /tasks).
+// All projects' tasks, aggregated (GET /tasks), server-paginated.
 export function GlobalTasksTab() {
   const navigate = useNavigate();
   const [state, setState] = useState<"open" | "done" | "dropped" | "all">("open");
-  const list = useSWR(`/tasks?state=${state}`, () => Tasks.global(state));
-  const paged = usePaged(list.data || [], state);
+  const paged = usePagedQuery({
+    key: `/tasks?state=${state}`,
+    fetchPage: (limit, offset) => Tasks.globalPage({ state, limit, offset }),
+    resetKey: state,
+  });
   return (
     <Section
+      fullHeight
       title={t("project.global_tasks.title")}
       description={t("project.global_tasks.subtitle")}
       action={
@@ -26,31 +29,32 @@ export function GlobalTasksTab() {
         </div>
       }
     >
-      {list.isLoading && <Loading />}
-      {!list.isLoading && (list.data?.length ?? 0) === 0 && <Empty>{t("project.global_tasks.empty")}</Empty>}
-      <ul className="space-y-2 text-sm">
-        {paged.slice.map((task) => (
-          <li key={`${task.project_id}-${task.id}`} className="flex items-start gap-3 rounded-md border border-border bg-muted/30 px-3 py-2">
-            <button
-              type="button"
-              onClick={() => navigate(`/p/${task.project_id}/tasks`)}
-              title={t("project.global_tasks.go_project")}
-            >
-              <Badge tone="info">{(task.project_name || "").split("/").pop() || task.project_id}</Badge>
-            </button>
-            <div className="min-w-0 flex-1">
-              <div className="font-medium">{task.title}</div>
-              <div className="mt-0.5 flex flex-wrap items-center gap-2 text-xs text-muted-fg">
-                <span>{task.state}</span>
-                {task.agent && <Badge tone="muted">@{task.agent}</Badge>}
-                {task.tags?.map((tg) => <span key={tg}>#{tg}</span>)}
-                {task.due && <span>{t("project.global_tasks.due")} {task.due}</span>}
+      {paged.isLoading && <Loading />}
+      {!paged.isLoading && paged.total === 0 && <Empty>{t("project.global_tasks.empty")}</Empty>}
+      <PagedList paged={paged} fullHeight>
+        <ul className="space-y-2 text-sm">
+          {paged.items.map((task) => (
+            <li key={`${task.project_id}-${task.id}`} className="flex items-start gap-3 rounded-md border border-border bg-muted/30 px-3 py-2">
+              <button
+                type="button"
+                onClick={() => navigate(`/p/${task.project_id}/tasks`)}
+                title={t("project.global_tasks.go_project")}
+              >
+                <Badge tone="info">{(task.project_name || "").split("/").pop() || task.project_id}</Badge>
+              </button>
+              <div className="min-w-0 flex-1">
+                <div className="font-medium">{task.title}</div>
+                <div className="mt-0.5 flex flex-wrap items-center gap-2 text-xs text-muted-fg">
+                  <span>{task.state}</span>
+                  {task.agent && <Badge tone="muted">@{task.agent}</Badge>}
+                  {task.tags?.map((tg) => <span key={tg}>#{tg}</span>)}
+                  {task.due && <span>{t("project.global_tasks.due")} {task.due}</span>}
+                </div>
               </div>
-            </div>
-          </li>
-        ))}
-      </ul>
-      <Pager page={paged.page} pageCount={paged.pageCount} total={paged.total} start={paged.start} end={paged.end} pageSize={paged.pageSize} onPage={paged.setPage} onPageSize={paged.setPageSize} />
+            </li>
+          ))}
+        </ul>
+      </PagedList>
     </Section>
   );
 }

package/src/interfaces/web/src/screens/base/SessionsTab.tsx CHANGED Viewed

@@ -1,9 +1,8 @@
 import { useState } from "react";
-import useSWR from "swr";
 import { RefreshCw } from "lucide-react";
 import { Sessions } from "../../lib/api";
 import { Section } from "../../components/Section";
-import { Pager, usePaged } from "../../components/Pager";
+import { PagedList, usePagedQuery } from "../../components/Pager";
 import { Badge, Button, Empty, Loading } from "../../components/ui";
 import { UiSelect } from "../../components/UiSelect";
 import { t } from "../../i18n";
@@ -14,12 +13,15 @@ const ENGINE_TONE: Record<string, "success" | "info" | "warning" | "muted"> = {
 export function SessionsTab() {
   const [engine, setEngine] = useState("");
-  const list = useSWR(`/sessions?engine=${engine}`, () => Sessions.global(engine || undefined));
-  const rows = list.data?.sessions || [];
-  const paged = usePaged(rows, engine);
+  const paged = usePagedQuery({
+    key: `/sessions?engine=${engine}`,
+    fetchPage: (limit, offset) => Sessions.page({ engine: engine || undefined, limit, offset }),
+    resetKey: engine,
+  });
   return (
     <Section
+      fullHeight
       title={t("base.sessions_title")}
       description={t("base.sessions_desc")}
       action={
@@ -36,26 +38,27 @@ export function SessionsTab() {
               ]}
             />
           </div>
-          <Button size="sm" variant="secondary" onClick={() => list.mutate()}><RefreshCw size={13} /></Button>
+          <Button size="sm" variant="secondary" onClick={() => paged.mutate()}><RefreshCw size={13} /></Button>
         </div>
       }
     >
-      {list.isLoading && <Loading />}
-      {list.error && <Empty>{t("base.sessions_error", { msg: (list.error as Error).message })}</Empty>}
-      {!list.isLoading && !list.error && rows.length === 0 && <Empty>{t("base.sessions_empty")}</Empty>}
-      <ul className="space-y-1 text-sm">
-        {paged.slice.map((s, i) => (
-          <li key={`${s.engine}-${s.id}-${i}`} className="flex items-center gap-3 rounded-md border border-border bg-muted/30 px-3 py-2">
-            <Badge tone={ENGINE_TONE[s.engine] || "muted"}>{s.engine}</Badge>
-            <div className="min-w-0 flex-1">
-              <div className="truncate">{s.title || s.id}</div>
-              <div className="truncate font-mono text-[10px] text-muted-fg">{s.cwd}</div>
-            </div>
-            {s.mtime > 0 && <span className="shrink-0 text-[11px] text-muted-fg">{new Date(s.mtime).toLocaleString()}</span>}
-          </li>
-        ))}
-      </ul>
-      <Pager page={paged.page} pageCount={paged.pageCount} total={paged.total} start={paged.start} end={paged.end} pageSize={paged.pageSize} onPage={paged.setPage} onPageSize={paged.setPageSize} />
+      {paged.isLoading && <Loading />}
+      {paged.error && <Empty>{t("base.sessions_error", { msg: (paged.error as Error).message })}</Empty>}
+      {!paged.isLoading && !paged.error && paged.total === 0 && <Empty>{t("base.sessions_empty")}</Empty>}
+      <PagedList paged={paged} fullHeight>
+        <ul className="space-y-1 text-sm">
+          {paged.items.map((s, i) => (
+            <li key={`${s.engine}-${s.id}-${i}`} className="flex items-center gap-3 rounded-md border border-border bg-muted/30 px-3 py-2">
+              <Badge tone={ENGINE_TONE[s.engine] || "muted"}>{s.engine}</Badge>
+              <div className="min-w-0 flex-1">
+                <div className="truncate">{s.title || s.id}</div>
+                <div className="truncate font-mono text-[10px] text-muted-fg">{s.cwd}</div>
+              </div>
+              {s.mtime > 0 && <span className="shrink-0 text-[11px] text-muted-fg">{new Date(s.mtime).toLocaleString()}</span>}
+            </li>
+          ))}
+        </ul>
+      </PagedList>
     </Section>
   );
 }

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

@@ -1,9 +1,8 @@
 import { useState } from "react";
-import useSWR from "swr";
 import { Check, Plus, RotateCcw, Trash2 } from "lucide-react";
 import { Tasks } from "../../lib/api";
 import { Section } from "../../components/Section";
-import { Pager, usePaged } from "../../components/Pager";
+import { PagedList, usePagedQuery } from "../../components/Pager";
 import { Badge, Button, Empty, Field, Input, Loading } from "../../components/ui";
 import { useToast } from "../../components/Toast";
 import { t } from "../../i18n";
@@ -12,13 +11,13 @@ export function TasksTab({ pid }: { pid: string }) {
   const [state, setState] = useState<"open" | "done" | "dropped">("open");
   const toast = useToast();
   // dedupingInterval:0 so switching the state filter always revalidates the
-  // target list instead of showing the stale cached page from a prior switch.
-  const list = useSWR(
-    `/projects/${pid}/tasks?state=${state}`,
-    () => Tasks.list(pid, state),
-    { dedupingInterval: 0, revalidateOnFocus: true },
-  );
-  const paged = usePaged(list.data || [], state);
+  // target page instead of showing the stale cached one from a prior switch.
+  const paged = usePagedQuery({
+    key: `/projects/${pid}/tasks?state=${state}`,
+    fetchPage: (limit, offset) => Tasks.listPage(pid, { state, limit, offset }),
+    resetKey: state,
+    swr: { dedupingInterval: 0, revalidateOnFocus: true },
+  });
   const [draft, setDraft] = useState("");
   const [busy, setBusy] = useState(false);
@@ -29,7 +28,7 @@ export function TasksTab({ pid }: { pid: string }) {
       await Tasks.add(pid, { title: draft.trim() });
       setDraft("");
       toast.success(t("project.tasks.created"));
-      list.mutate();
+      paged.mutate();
     } catch (e: any) {
       toast.error(e?.message || t("project.tasks.create_error"));
     } finally {
@@ -37,12 +36,13 @@ export function TasksTab({ pid }: { pid: string }) {
     }
   };
   const mark = async (fn: () => Promise<unknown>, label: string) => {
-    try { await fn(); toast.success(label); list.mutate(); }
+    try { await fn(); toast.success(label); paged.mutate(); }
     catch (e: any) { toast.error(e?.message || t("common.error_generic")); }
   };
   return (
     <Section
+      fullHeight
       title={t("project.tasks.title")}
       description={t("project.tasks.subtitle")}
       action={
@@ -55,7 +55,7 @@ export function TasksTab({ pid }: { pid: string }) {
         </div>
       }
     >
-      <div className="mb-4 flex items-end gap-2">
+      <div className="mb-4 flex shrink-0 items-end gap-2">
         <Field label={t("project.tasks.add_label")}>
           <Input
             data-testid="task-input"
@@ -70,8 +70,8 @@ export function TasksTab({ pid }: { pid: string }) {
         </Button>
       </div>
-      {list.isLoading && <Loading />}
-      {!list.isLoading && (list.data?.length ?? 0) === 0 && (
+      {paged.isLoading && <Loading />}
+      {!paged.isLoading && paged.total === 0 && (
         <Empty>
           {state === "open"
             ? t("project.tasks.empty_open")
@@ -80,9 +80,10 @@ export function TasksTab({ pid }: { pid: string }) {
         </Empty>
       )}
-      <ul className="space-y-2 text-sm" data-testid="task-list">
-        {paged.slice.map((task) => (
-          <li key={task.id} data-testid={`task-${task.id}`} className="flex items-start gap-3 rounded-md border border-border bg-muted/30 px-3 py-2">
+      <PagedList paged={paged} fullHeight>
+        <ul className="space-y-2 text-sm" data-testid="task-list">
+          {paged.items.map((task) => (
+            <li key={task.id} data-testid={`task-${task.id}`} className="flex items-start gap-3 rounded-md border border-border bg-muted/30 px-3 py-2">
             <span className="mt-0.5 font-mono text-[10px] text-muted-fg">{task.id}</span>
             <div className="flex-1">
               <div className="font-medium">{task.title}</div>
@@ -112,8 +113,8 @@ export function TasksTab({ pid }: { pid: string }) {
             </div>
           </li>
         ))}
-      </ul>
-      <Pager page={paged.page} pageCount={paged.pageCount} total={paged.total} start={paged.start} end={paged.end} pageSize={paged.pageSize} onPage={paged.setPage} onPageSize={paged.setPageSize} />
+        </ul>
+      </PagedList>
     </Section>
   );
 }