@agentprojectcontext/apx 1.42.2 → 1.44.0

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

@@ -3,6 +3,7 @@ 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 { Badge, Button, Empty, Loading } from "../../components/ui";
 import { t } from "../../i18n";
 
@@ -11,6 +12,7 @@ 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);
 
   return (
     <Section
@@ -27,7 +29,7 @@ export function GlobalTasksTab() {
       {list.isLoading && <Loading />}
       {!list.isLoading && (list.data?.length ?? 0) === 0 && <Empty>{t("project.global_tasks.empty")}</Empty>}
       <ul className="space-y-2 text-sm">
-        {(list.data || []).map((task) => (
+        {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"
@@ -48,6 +50,7 @@ export function GlobalTasksTab() {
           </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} />
     </Section>
   );
 }

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

@@ -3,6 +3,7 @@ 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 { Badge, Button, Empty, Loading } from "../../components/ui";
 import { UiSelect } from "../../components/UiSelect";
 import { t } from "../../i18n";
@@ -15,6 +16,7 @@ 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);
 
   return (
     <Section
@@ -42,7 +44,7 @@ export function SessionsTab() {
       {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">
-        {rows.map((s, i) => (
+        {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">
@@ -53,6 +55,7 @@ export function SessionsTab() {
           </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} />
     </Section>
   );
 }

package/src/interfaces/web/src/screens/modules/DeckScreen.tsx

@@ -1,5 +1,5 @@
 import useSWR from "swr";
-import { RefreshCw } from "lucide-react";
+import { RefreshCw, Construction } from "lucide-react";
 import { Deck } from "../../lib/api/deck";
 import { Section } from "../../components/Section";
 import { Button, Empty, Loading } from "../../components/ui";
@@ -21,7 +21,17 @@ export function DeckScreen() {
     { refreshInterval: 30_000 }
   );
 
+  // ── Deck is NOT released yet ───────────────────────────────────────────
+  // The whole module is shown behind a non-dismissable "coming soon" modal
+  // (see the overlay at the bottom of this component) and the UI underneath is
+  // made inert. As defense-in-depth, the real widget mutation is disabled here
+  // too: if someone forces the modal out of the DOM, toggling a widget does
+  // NOTHING — no request ever hits the daemon, so nothing breaks.
+  // 👉 Re-enable the body below (remove this guard) when Deck ships in a stable
+  //    release. The original implementation is kept intact, just unreachable.
   const handleToggle = async (widgetId: string, enabled: boolean) => {
+    return; // no-op while Deck is pre-release — see note above.
+    // eslint-disable-next-line no-unreachable
     try {
       await Deck.setWidget(widgetId, { enabled });
       // Optimistically update local data so the switch flips immediately.
@@ -58,7 +68,11 @@ export function DeckScreen() {
       // Re-validate after a short delay to get the server's persisted state.
       setTimeout(() => mutate(), 800);
     } catch (e: unknown) {
-      const msg = e instanceof Error ? e.message : t("modules_ui.deck_save_error");
+      // `e` reads as `unknown` here because the early `return` above makes this
+      // catch unreachable while Deck is pre-release — TS skips control-flow
+      // narrowing in dead code. Cast so the kept-for-later body still
+      // typechecks; behaviour is unchanged (this block never runs today).
+      const msg = e instanceof Error ? (e as Error).message : t("modules_ui.deck_save_error");
       toast.error(msg);
     }
   };
@@ -77,7 +91,18 @@ export function DeckScreen() {
   const enabledCount = externalWidgets.filter((w) => w.user_enabled === true).length;
 
   return (
-    <div className="mx-auto max-w-4xl space-y-6 p-6" data-testid="screen-deck">
+    <div className="relative min-h-full" data-testid="screen-deck">
+      {/* ── Underlying Deck UI ──────────────────────────────────────────────
+          Shown for context only while Deck is pre-release. It is made fully
+          inert (no focus, no pointer events) and blurred behind the overlay
+          below. All real actions are also neutralized in code (see
+          handleToggle), so nothing runs even if this layer is re-enabled by
+          hand. Remove the `inert`/blur wrapper when Deck ships. */}
+    <div
+      className="mx-auto max-w-4xl space-y-6 p-6 pointer-events-none select-none blur-[2px] opacity-60"
+      aria-hidden
+      inert
+    >
       {/* Daemon info card */}
       {data && <DaemonCard manifest={data} />}
 
@@ -160,5 +185,32 @@ export function DeckScreen() {
         </Section>
       )}
     </div>
+
+      {/* ── "Coming soon" overlay ───────────────────────────────────────────
+          Non-dismissable: there is no close button and clicking the backdrop
+          does nothing. It floats over the inert Deck UI above. Remove this
+          whole block (and the inert wrapper / handleToggle guard) when Deck is
+          released. */}
+      <div
+        className="absolute inset-0 z-10 flex items-center justify-center p-6 backdrop-blur-[1px]"
+        role="dialog"
+        aria-modal="true"
+        aria-labelledby="deck-coming-soon-title"
+        data-testid="deck-coming-soon"
+      >
+        <div className="w-full max-w-md rounded-2xl border border-border bg-card/95 p-8 text-center shadow-2xl">
+          <div className="mx-auto mb-4 flex size-12 items-center justify-center rounded-full bg-muted">
+            <Construction className="size-6 text-muted-fg" />
+          </div>
+          <span className="inline-block rounded-full bg-muted px-2.5 py-0.5 text-[10px] font-semibold uppercase tracking-wide text-muted-fg">
+            {t("deck_screen.preview_badge")}
+          </span>
+          <h2 id="deck-coming-soon-title" className="mt-3 text-lg font-semibold">
+            {t("deck_screen.preview_title")}
+          </h2>
+          <p className="mt-2 text-sm text-muted-fg">{t("deck_screen.preview_body")}</p>
+        </div>
+      </div>
+    </div>
   );
 }

package/src/interfaces/web/src/screens/modules/DesktopScreen.tsx

@@ -2,8 +2,9 @@ import { useEffect, useMemo, useState } from "react";
 import { Link } from "react-router-dom";
 import useSWR from "swr";
 import { Section, Kbd, StatusDot } from "../../components/Section";
-import { Button, Field, Input, Switch, Loading, Empty } from "../../components/ui";
+import { Button, Field, Switch, Loading, Empty } from "../../components/ui";
 import { UiSelect } from "../../components/UiSelect";
+import { ShortcutInput } from "../../components/ShortcutInput";
 import { useToast } from "../../components/Toast";
 import { useGlobalConfig } from "../../hooks/useGlobalConfig";
 import { Desktop, fetchDesktopMessages, type GlobalMessage } from "../../lib/api/desktop";
@@ -16,8 +17,9 @@ const positionOpts = () => [
   { value: "right",  label: t("modules_ui.desktop_pos_right") },
 ];
 const themeOpts = () => [
-  { value: "light", label: t("modules_ui.desktop_theme_light") },
-  { value: "dark",  label: t("modules_ui.desktop_theme_dark") },
+  { value: "system", label: t("modules_ui.desktop_theme_system") },
+  { value: "light",  label: t("modules_ui.desktop_theme_light") },
+  { value: "dark",   label: t("modules_ui.desktop_theme_dark") },
 ];
 
 // Desktop module — manage the floating voice window (the Electron app launched
@@ -32,14 +34,16 @@ export function DesktopScreen() {
   const cfgView = config as unknown as {
     desktop?: {
       shortcut?: string; enabled?: boolean;
-      theme?: "light" | "dark";
+      theme?: "light" | "dark" | "system";
       position?: "left" | "center" | "right";
     };
     overlay?: { shortcut?: string }; // legacy fallback
   };
   const savedShortcut = cfgView.desktop?.shortcut || cfgView.overlay?.shortcut || DEFAULT_SHORTCUT;
   const enabled  = cfgView.desktop?.enabled !== false;
-  const theme    = cfgView.desktop?.theme    || "light";
+  // Default to "system" so the window follows the OS appearance until the
+  // user explicitly pins light/dark.
+  const theme    = cfgView.desktop?.theme    || "system";
   const position = cfgView.desktop?.position || "right";
 
   const { data: status, isLoading: stLoading, mutate: mutateStatus } = useSWR(
@@ -63,8 +67,35 @@ export function DesktopScreen() {
   const [shortcut, setShortcut] = useState(savedShortcut);
   const [busy, setBusy] = useState(false);
   const [autostartBusy, setAutostartBusy] = useState(false);
+  // Which lifecycle action (start/stop/restart) is in flight — drives the
+  // per-button spinner and disables its siblings while one runs.
+  const [lifeAction, setLifeAction] = useState<"start" | "stop" | "restart" | null>(null);
   useEffect(() => setShortcut(savedShortcut), [savedShortcut]);
 
+  // Start/Stop launch or kill the Electron window (daemon spawns/SIGTERMs it);
+  // Restart tells a live window to reload + re-read config (theme, position,
+  // shortcut) — the "apply now" the static status-poll never did. All three
+  // re-poll status shortly after so the dot + buttons settle.
+  const runLifecycle = async (action: "start" | "stop" | "restart", fn: () => Promise<void>) => {
+    setLifeAction(action);
+    try { await fn(); }
+    catch (e) { toast.error((e as Error).message); }
+    finally { setLifeAction(null); setTimeout(() => mutateStatus(), 1200); }
+  };
+  const startDesktop = () => runLifecycle("start", async () => {
+    const r = await Desktop.start();
+    toast.success(r.already ? t("modules_ui.desktop_start_already") : t("modules_ui.desktop_start_done"));
+  });
+  const stopDesktop = () => runLifecycle("stop", async () => {
+    const r = await Desktop.stop();
+    toast.success(r.stopped ? t("modules_ui.desktop_stop_done") : t("modules_ui.desktop_stop_none"));
+  });
+  const restartDesktop = () => runLifecycle("restart", async () => {
+    const r = await Desktop.restart();
+    if (r.reloaded > 0) toast.success(t("modules_ui.desktop_restart_done"));
+    else toast.info(t("modules_ui.desktop_restart_none"));
+  });
+
   const saveShortcut = async () => {
     const next = shortcut.trim();
     if (!next || next === savedShortcut) return;
@@ -101,23 +132,58 @@ export function DesktopScreen() {
       <div className="grid gap-6 xl:grid-cols-[1fr_1fr]">
         {/* ── LEFT: configuration + status ─────────────────────────────── */}
         <div className="space-y-6">
-          <Section title={t("desktop_screen.status_title")} description={t("modules_ui.desktop_status_desc")}>
+          <Section
+            title={t("desktop_screen.status_title")}
+            description={t("modules_ui.desktop_status_desc")}
+            action={
+              <div className="flex items-center gap-2">
+                <Button
+                  variant="primary"
+                  size="sm"
+                  onClick={startDesktop}
+                  loading={lifeAction === "start"}
+                  disabled={running || (lifeAction !== null && lifeAction !== "start")}
+                >
+                  {t("modules_ui.desktop_start")}
+                </Button>
+                <Button
+                  variant="secondary"
+                  size="sm"
+                  onClick={stopDesktop}
+                  loading={lifeAction === "stop"}
+                  disabled={!running || (lifeAction !== null && lifeAction !== "stop")}
+                >
+                  {t("modules_ui.desktop_stop")}
+                </Button>
+                <Button
+                  variant="secondary"
+                  size="sm"
+                  onClick={restartDesktop}
+                  loading={lifeAction === "restart"}
+                  disabled={!running || (lifeAction !== null && lifeAction !== "restart")}
+                  title={t("modules_ui.desktop_restart_hint")}
+                >
+                  {t("modules_ui.desktop_restart")}
+                </Button>
+              </div>
+            }
+          >
             {stLoading ? <Loading /> : (
-              <div className="flex items-center gap-2 text-sm">
+              <div className="flex flex-wrap items-center gap-x-2 gap-y-1 text-sm">
                 <StatusDot ok={running} />
                 <span className="font-medium">{running ? t("modules_ui.desktop_running") : t("modules_ui.desktop_stopped")}</span>
                 <button
                   type="button"
                   onClick={() => mutateStatus()}
-                  className="ml-2 text-xs text-muted-fg underline-offset-2 hover:underline"
+                  className="text-xs text-muted-fg underline-offset-2 hover:underline"
                 >
                   {t("modules_ui.desktop_refresh")}
                 </button>
+                <span className="text-xs text-muted-fg">
+                  ({t("modules_ui.desktop_from_terminal")} <Kbd>apx desktop start</Kbd> · <Kbd>apx desktop --debug</Kbd>)
+                </span>
               </div>
             )}
-            <p className="mt-3 text-xs text-muted-fg">
-              {t("modules_ui.desktop_from_terminal")} <Kbd>apx desktop start</Kbd> · <Kbd>apx desktop --debug</Kbd>
-            </p>
           </Section>
 
           <Section
@@ -142,31 +208,27 @@ export function DesktopScreen() {
             description={t("modules_ui.desktop_shortcut_desc")}
           >
             {cfgLoading ? <Loading /> : (
-              <div className="flex items-end gap-3">
-                <div className="flex-1">
-                  <Field
-                    label={t("modules_ui.desktop_accelerator")}
-                    hint={t("modules_ui.desktop_accelerator_hint")}
-                  >
-                    <Input
-                      value={shortcut}
-                      onChange={(e) => setShortcut(e.target.value)}
-                      onKeyDown={(e) => { if (e.key === "Enter") saveShortcut(); }}
-                      placeholder={DEFAULT_SHORTCUT}
-                      className="max-w-md font-mono"
-                      disabled={busy}
-                    />
-                  </Field>
-                </div>
-                <Button
-                  variant="primary"
-                  onClick={saveShortcut}
-                  loading={busy}
-                  disabled={!shortcut.trim() || shortcut.trim() === savedShortcut}
-                >
-                  {t("common.save")}
-                </Button>
-              </div>
+              <Field
+                label={t("modules_ui.desktop_accelerator")}
+                hint={t("modules_ui.desktop_accelerator_hint")}
+              >
+                <ShortcutInput
+                  value={shortcut}
+                  onChange={setShortcut}
+                  disabled={busy}
+                  trailing={
+                    <Button
+                      variant="primary"
+                      size="sm"
+                      onClick={saveShortcut}
+                      loading={busy}
+                      disabled={!shortcut.trim() || shortcut.trim() === savedShortcut}
+                    >
+                      {t("common.save")}
+                    </Button>
+                  }
+                />
+              </Field>
             )}
           </Section>
 

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

@@ -3,6 +3,7 @@ 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 { Badge, Button, Empty, Field, Input, Loading } from "../../components/ui";
 import { useToast } from "../../components/Toast";
 import { t } from "../../i18n";
@@ -17,6 +18,7 @@ export function TasksTab({ pid }: { pid: string }) {
     () => Tasks.list(pid, state),
     { dedupingInterval: 0, revalidateOnFocus: true },
   );
+  const paged = usePaged(list.data || [], state);
   const [draft, setDraft] = useState("");
   const [busy, setBusy] = useState(false);
 
@@ -79,7 +81,7 @@ export function TasksTab({ pid }: { pid: string }) {
       )}
 
       <ul className="space-y-2 text-sm" data-testid="task-list">
-        {(list.data || []).map((task) => (
+        {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">
             <span className="mt-0.5 font-mono text-[10px] text-muted-fg">{task.id}</span>
             <div className="flex-1">
@@ -111,6 +113,7 @@ export function TasksTab({ pid }: { pid: string }) {
           </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} />
     </Section>
   );
 }