npm - @agentprojectcontext/apx - Versions diffs - 1.43.0 → 1.45.0 - Mend

@agentprojectcontext/apx 1.43.0 → 1.45.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 (21) hide show

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

@@ -18,8 +18,8 @@
     <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-B0nTYflm.js"></script>
-    <link rel="stylesheet" crossorigin href="/assets/index-C22PmKCD.css">
+    <script type="module" crossorigin src="/assets/index-D7px5xcy.js"></script>
+    <link rel="stylesheet" crossorigin href="/assets/index-BAKk7d_M.css">
   </head>
   <body class="bg-background text-foreground antialiased">
     <div id="root"></div>

package/src/interfaces/web/src/App.tsx CHANGED Viewed

@@ -5,9 +5,7 @@ import { ProjectSidebar, projectKindLabel } from "./components/layout/ProjectSid
 import { ApxAdminScreen } from "./screens/ApxAdminScreen";
 import { ProjectScreen } from "./screens/ProjectScreen";
 import { SettingsScreen } from "./screens/SettingsScreen";
-import { VoiceScreen } from "./screens/modules/VoiceScreen";
 import { DesktopScreen } from "./screens/modules/DesktopScreen";
-import { DeckScreen } from "./screens/modules/DeckScreen";
 import { CodeScreen } from "./screens/modules/CodeScreen";
 import { AddProjectDialog } from "./components/AddProjectDialog";
 import { PairingScreen } from "./screens/PairingScreen";
@@ -92,9 +90,7 @@ function Shell() {
             <Routes>
               <Route path="/"           element={<ApxAdminScreen />} />
               <Route path="/settings/*" element={<SettingsScreen />} />
-              <Route path="/m/voice/*"   element={<VoiceScreen />} />
               <Route path="/m/desktop/*" element={<DesktopScreen />} />
-              <Route path="/m/deck/*"   element={<DeckScreen />} />
               <Route path="/m/code/*"   element={<CodeScreen />} />
               <Route path="/p/:pid/*"   element={<ProjectScreen />} />
               <Route path="*"           element={<NotFound />} />
@@ -208,9 +204,7 @@ function LanguageMenu() {
 function moduleLabel(key?: string) {
   switch (key) {
-    case "voice":   return t("nav.modules.voice");
     case "desktop": return t("nav.modules.desktop");
-    case "deck":    return t("nav.modules.deck");
     case "code":    return t("nav.modules.code");
     default: return key || "";
   }
@@ -222,6 +216,9 @@ function settingsLabel(key?: string) {
     case "engines": return t("settings.tabs.engines");
     case "telegram": return t("settings.tabs.telegram");
     case "devices": return t("settings.tabs.devices");
+    case "voice": return t("nav.modules.voice");
+    case "deck": return t("nav.modules.deck");
+    case "desktop": return t("nav.modules.desktop");
     case "appearance": return t("settings.appearance");
     case "config":
     case "advanced": return t("settings.tabs.advanced");

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

@@ -0,0 +1,88 @@
+import { useEffect, useState } from "react";
+import { ChevronLeft, ChevronRight } from "lucide-react";
+import { Button } from "./ui";
+import { UiSelect } from "./UiSelect";
+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) {
+  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 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);
+  return {
+    slice: items.slice(start, end),
+    page: safePage,
+    pageCount,
+    total: items.length,
+    start,
+    end,
+    pageSize,
+    setPage,
+    // Changing the page size keeps things predictable by returning to page 1.
+    setPageSize: (n: number) => { setPageSize(n); setPage(1); },
+  };
+}
+export function Pager({
+  page,
+  pageCount,
+  total,
+  start,
+  end,
+  pageSize,
+  onPage,
+  onPageSize,
+}: {
+  page: number;
+  pageCount: number;
+  total: number;
+  start: number;
+  end: number;
+  pageSize: number;
+  onPage: (p: number) => void;
+  onPageSize: (n: number) => void;
+}) {
+  // Nothing to page when the whole set fits in the smallest page size.
+  if (total <= PAGE_SIZES[0]) return null;
+  return (
+    <div className="mt-3 flex flex-wrap items-center justify-between gap-3 text-xs text-muted-fg">
+      <div className="flex items-center gap-3">
+        <span className="tabular-nums">{t("common.pager_range", { from: start + 1, to: end, total })}</span>
+        <span className="flex items-center gap-1.5">
+          <span>{t("common.pager_per_page")}</span>
+          <div className="w-[4.5rem]">
+            <UiSelect
+              value={String(pageSize)}
+              onChange={(v) => onPageSize(Number(v))}
+              options={PAGE_SIZES.map((n) => ({ value: String(n), label: String(n) }))}
+            />
+          </div>
+        </span>
+      </div>
+      <div className="flex items-center gap-1">
+        <Button size="sm" variant="ghost" disabled={page <= 1} onClick={() => onPage(page - 1)} aria-label={t("common.pager_prev")}>
+          <ChevronLeft size={14} />
+        </Button>
+        <span className="px-1 tabular-nums">{t("common.pager_page", { page, total: pageCount })}</span>
+        <Button size="sm" variant="ghost" disabled={page >= pageCount} onClick={() => onPage(page + 1)} aria-label={t("common.pager_next")}>
+          <ChevronRight size={14} />
+        </Button>
+      </div>
+    </div>
+  );
+}

package/src/interfaces/web/src/components/desktop/DesktopStatusCard.tsx ADDED Viewed

@@ -0,0 +1,116 @@
+import { useState } from "react";
+import { Link } from "react-router-dom";
+import useSWR from "swr";
+import { Settings } from "lucide-react";
+import { Section, Kbd, StatusDot } from "../Section";
+import { Button, Loading } from "../ui";
+import { useToast } from "../Toast";
+import { Desktop } from "../../lib/api/desktop";
+import { t } from "../../i18n";
+// Live status of the floating Desktop window + lifecycle controls
+// (start/stop/restart). Shared between the Desktop rail module and the
+// Settings → Desktop panel so both surfaces keep the same action card.
+// Pass `showConfigLink` on the rail module to link into the settings panel;
+// inside Settings it's redundant, so it's omitted there.
+export function DesktopStatusCard({ showConfigLink = false }: { showConfigLink?: boolean }) {
+  const toast = useToast();
+  const { data: status, isLoading: stLoading, mutate: mutateStatus } = useSWR(
+    "/desktop/status",
+    () => Desktop.status(),
+    { refreshInterval: 5000 },
+  );
+  const running = !!status?.running;
+  // 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);
+  // 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"));
+  });
+  return (
+    <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>
+          {showConfigLink && (
+            <Link to="/settings/desktop">
+              <Button size="sm" variant="ghost">
+                <Settings size={14} /> {t("desktop_screen.open_config")}
+              </Button>
+            </Link>
+          )}
+        </div>
+      }
+    >
+      {stLoading ? <Loading /> : (
+        <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="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>
+      )}
+    </Section>
+  );
+}

package/src/interfaces/web/src/components/layout/ProjectSidebar.tsx CHANGED Viewed

@@ -1,7 +1,7 @@
-// Discord-style left rail. Logo on top (APX admin), then Base, then the
-// rail-level MODULES (Voice/Deck/Code) that sit alongside Base, then the
-// projects column, finally add + settings. The default workspace (id=0) is
-// pinned first.
+// Discord-style left rail. Logo on top (APX admin), then Base together with the
+// rail-level MODULES (Desktop/Code) as one group, then the projects column,
+// finally add + settings. The default workspace (id=0) is pinned first.
+// Voice and Deck used to live here too — they now live inside Settings.
 //
 // The projects column is the only flexible zone: top (logo/base/modules) and
 // bottom (add/settings/docs/roby) stay pinned. Projects are listed newest-first
@@ -10,7 +10,7 @@
 // also be collapsed into a single folder button (state persisted per browser).
 import { useLayoutEffect, useRef, useState } from "react";
 import { useLocation } from "react-router-dom";
-import { Plus, Settings, Mic, Monitor, LayoutGrid, Terminal, Bot, BookOpen, ChevronDown, Folders, type LucideIcon } from "lucide-react";
+import { Plus, Settings, Monitor, Terminal, Bot, BookOpen, ChevronDown, Folders, type LucideIcon } from "lucide-react";
 import { Logo } from "./Logo";
 import { ProjectAvatar, projectTone } from "./ProjectAvatar";
 import { Tip } from "../ui/tip";
@@ -45,10 +45,8 @@ interface ModuleItem {
 // top-level entry next to Base rather than living inside Settings.
 function buildModules(): ModuleItem[] {
   return [
-    { id: "voice",   label: t("nav.modules.voice"),   href: "/m/voice",   icon: Mic },
     { id: "desktop", label: t("nav.modules.desktop"), href: "/m/desktop", icon: Monitor },
-    { id: "deck",  label: t("nav.modules.deck"),  href: "/m/deck",  icon: LayoutGrid },
-    { id: "code",  label: t("nav.modules.code"),  href: "/m/code",  icon: Terminal },
+    { id: "code",    label: t("nav.modules.code"),    href: "/m/code",    icon: Terminal },
   ];
 }
@@ -207,8 +205,7 @@ export function ProjectSidebar({ onSelect, onOpenRoby, onOpenAddProject }: Props
         />
       )}
-      {/* Modules — rail-level surfaces alongside Base. */}
-      <div className="my-0.5 h-px w-8 rounded-full bg-border" />
+      {/* Modules — rail-level surfaces grouped with Base (no divider). */}
       {MODULES.map((m) => (
         <ProjectAvatar
           key={m.id}

package/src/interfaces/web/src/components/settings/DesktopSettingsPanel.tsx ADDED Viewed

@@ -0,0 +1,185 @@
+import { useEffect, useState } from "react";
+import { Link } from "react-router-dom";
+import useSWR from "swr";
+import { Section } from "../Section";
+import { Button, Field, Switch, Loading } from "../ui";
+import { UiSelect } from "../UiSelect";
+import { ShortcutInput } from "../ShortcutInput";
+import { DesktopStatusCard } from "../desktop/DesktopStatusCard";
+import { useToast } from "../Toast";
+import { useGlobalConfig } from "../../hooks/useGlobalConfig";
+import { Desktop } from "../../lib/api/desktop";
+import { t } from "../../i18n";
+const DEFAULT_SHORTCUT = "CommandOrControl+G";
+const positionOpts = () => [
+  { value: "left",   label: t("modules_ui.desktop_pos_left") },
+  { value: "center", label: t("modules_ui.desktop_pos_center") },
+  { value: "right",  label: t("modules_ui.desktop_pos_right") },
+];
+const themeOpts = () => [
+  { 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 configuration — the persisted settings for the floating voice window
+// (autostart, global shortcut, appearance, activation). Lives in Settings; the
+// Desktop rail module only shows live status + the last conversation. The window
+// itself is an Electron process spawned by `apx desktop start`, so this just
+// edits config the daemon persists and toggles per-user autostart.
+export function DesktopSettingsPanel() {
+  const toast = useToast();
+  const { config, isLoading: cfgLoading, patch } = useGlobalConfig();
+  // config.desktop isn't on the typed GlobalConfig — read it off a local view.
+  const cfgView = config as unknown as {
+    desktop?: {
+      shortcut?: string; enabled?: boolean;
+      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;
+  // 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: autostart, mutate: mutateAutostart } = useSWR(
+    "/desktop/autostart",
+    () => Desktop.autostartGet(),
+  );
+  const [shortcut, setShortcut] = useState(savedShortcut);
+  const [busy, setBusy] = useState(false);
+  const [autostartBusy, setAutostartBusy] = useState(false);
+  useEffect(() => setShortcut(savedShortcut), [savedShortcut]);
+  const saveShortcut = async () => {
+    const next = shortcut.trim();
+    if (!next || next === savedShortcut) return;
+    setBusy(true);
+    try {
+      await patch({ "desktop.shortcut": next });
+      toast.success(t("modules_ui.desktop_shortcut_saved"));
+    } catch (e) { toast.error((e as Error).message); }
+    finally { setBusy(false); }
+  };
+  const patchKey = async (key: string, value: unknown, ok: string) => {
+    setBusy(true);
+    try {
+      await patch({ [key]: value });
+      toast.success(ok);
+    } catch (e) { toast.error((e as Error).message); }
+    finally { setBusy(false); }
+  };
+  const toggleAutostart = async (v: boolean) => {
+    setAutostartBusy(true);
+    try {
+      await Desktop.autostartSet(v);
+      await mutateAutostart();
+      toast.success(v ? t("modules_ui.desktop_autostart_on") : t("modules_ui.desktop_autostart_off"));
+    } catch (e) { toast.error((e as Error).message); }
+    finally { setAutostartBusy(false); }
+  };
+  return (
+    <div className="space-y-6" data-testid="settings-desktop">
+      <DesktopStatusCard />
+      <Section
+        title={t("desktop_screen.autostart_title")}
+        description={t("modules_ui.desktop_autostart_desc")}
+      >
+        {!autostart ? <Loading /> : (
+          <div className="flex items-center justify-between gap-3">
+            <Switch
+              checked={autostart.enabled}
+              onChange={toggleAutostart}
+              disabled={autostartBusy}
+              label={autostart.enabled ? t("common.enabled") : t("common.disabled")}
+            />
+            <span className="text-xs text-muted-fg">{t("modules_ui.desktop_platform", { platform: autostart.platform })}</span>
+          </div>
+        )}
+      </Section>
+      <Section
+        title={t("desktop_screen.shortcut_title")}
+        description={t("modules_ui.desktop_shortcut_desc")}
+      >
+        {cfgLoading ? <Loading /> : (
+          <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>
+      <Section title={t("desktop_screen.appearance_title")} description={t("modules_ui.desktop_appearance_desc")}>
+        {cfgLoading ? <Loading /> : (
+          <div className="grid grid-cols-1 gap-3 sm:grid-cols-2">
+            <Field label={t("modules_ui.desktop_theme")} hint={t("modules_ui.desktop_restart_apply")}>
+              <UiSelect
+                value={theme}
+                onChange={(v) => patchKey("desktop.theme", v, t("modules_ui.desktop_theme_set", { value: v }))}
+                options={themeOpts()}
+                disabled={busy}
+              />
+            </Field>
+            <Field label={t("modules_ui.desktop_position")} hint={t("modules_ui.desktop_position_hint")}>
+              <UiSelect
+                value={position}
+                onChange={(v) => patchKey("desktop.position", v, t("modules_ui.desktop_position_set", { value: v }))}
+                options={positionOpts()}
+                disabled={busy}
+              />
+            </Field>
+          </div>
+        )}
+      </Section>
+      <Section
+        title={t("desktop_screen.activation_title")}
+        description={t("modules_ui.desktop_activation_desc")}
+      >
+        {cfgLoading ? <Loading /> : (
+          <div className="space-y-3">
+            <Switch
+              checked={enabled}
+              onChange={(v) => patchKey("desktop.enabled", v, v ? t("modules_ui.desktop_enabled_toast") : t("modules_ui.desktop_disabled_toast"))}
+              disabled={busy}
+              label={enabled ? t("modules_ui.desktop_plugin_on") : t("modules_ui.desktop_plugin_off")}
+            />
+            <p className="text-xs text-muted-fg">
+              {t("modules_ui.desktop_stt_engine")} <Link to="/settings/voice" className="font-medium text-fg underline underline-offset-2">{t("nav.modules.voice")}</Link>{" "}
+              {t("modules_ui.desktop_stt_engine_suffix")}
+            </p>
+          </div>
+        )}
+      </Section>
+    </div>
+  );
+}

package/src/interfaces/web/src/i18n/en.ts CHANGED Viewed

@@ -32,6 +32,11 @@ export const en = {
     hide:         "Hide",
     copy:         "Copy",
     run:          "Run",
+    pager_prev:   "Previous",
+    pager_next:   "Next",
+    pager_page:   "Page {page} of {total}",
+    pager_range:  "{from}–{to} of {total}",
+    pager_per_page:"Per page",
   },
   daemon: {
     connecting:    "Connecting to the daemon…",
@@ -175,6 +180,7 @@ export const en = {
     account_section:     "Account",
     agents_section:      "Agents & models",
     channels_section:    "Channels & devices",
+    modules_section:     "Modules",
     advanced_section:    "Advanced",
     tabs: {
@@ -925,6 +931,7 @@ export const en = {
     appearance_title:    "Appearance",
     activation_title:    "Activation + transcription",
     last_conv_title:     "Last conversation",
+    open_config:         "Configuration",
   },
   voice_screen: {

package/src/interfaces/web/src/i18n/es.ts CHANGED Viewed

@@ -33,6 +33,11 @@ export const es = {
     hide:         "Ocultar",
     copy:         "Copiar",
     run:          "Ejecutar",
+    pager_prev:   "Anterior",
+    pager_next:   "Siguiente",
+    pager_page:   "Página {page} de {total}",
+    pager_range:  "{from}–{to} de {total}",
+    pager_per_page:"Por página",
   },
   daemon: {
     connecting:    "Conectando con el daemon…",
@@ -176,6 +181,7 @@ export const es = {
     account_section:     "Cuenta",
     agents_section:      "Agentes & modelos",
     channels_section:    "Canales & dispositivos",
+    modules_section:     "Módulos",
     advanced_section:    "Avanzado",
     tabs: {
@@ -923,6 +929,7 @@ export const es = {
     appearance_title:    "Apariencia",
     activation_title:    "Activación + transcripción",
     last_conv_title:     "Última conversación",
+    open_config:         "Configuración",
   },
   voice_screen: {

package/src/interfaces/web/src/screens/SettingsScreen.tsx CHANGED Viewed

@@ -1,7 +1,7 @@
 import { type ReactElement } from "react";
 import { useLocation, useNavigate } from "react-router-dom";
 import {
-  Bot, Cpu, Database, KeyRound, MessageCircle, Palette, ScrollText, Send, Smartphone, Sparkles, User,
+  Bot, Cpu, Database, KeyRound, LayoutGrid, MessageCircle, Mic, Monitor, Palette, ScrollText, Send, Smartphone, Sparkles, User,
 } from "lucide-react";
 import { useNavCollapse, type TabSection } from "../components/common/TabNav";
 import { TabLayout } from "../components/common/TabLayout";
@@ -14,11 +14,15 @@ import { TelegramSettingsTabs } from "../components/settings/TelegramSettingsTab
 import { DevicesPanel } from "../components/settings/DevicesPanel";
 import { AdvancedPanel } from "../components/settings/AdvancedPanel";
 import { AppearancePanel } from "../components/settings/AppearancePanel";
+import { DesktopSettingsPanel } from "../components/settings/DesktopSettingsPanel";
+import { VoiceScreen } from "./modules/VoiceScreen";
+import { DeckScreen } from "./modules/DeckScreen";
 import { STORAGE } from "../constants";
 import { t } from "../i18n";
 type TabKey =
-  | "identity" | "super_agent" | "engines" | "memory" | "skills" | "telegram" | "devices" | "appearance" | "advanced";
+  | "identity" | "super_agent" | "engines" | "memory" | "skills" | "telegram" | "devices"
+  | "voice" | "deck" | "desktop" | "appearance" | "advanced";
 const SECTIONS: TabSection[] = [
   {
@@ -44,6 +48,14 @@ const SECTIONS: TabSection[] = [
       { key: "devices",     label: t("settings.tabs.devices"),     icon: Smartphone },
     ],
   },
+  {
+    title: t("settings.modules_section"),
+    items: [
+      { key: "voice",       label: t("nav.modules.voice"),         icon: Mic },
+      { key: "deck",        label: t("nav.modules.deck"),          icon: LayoutGrid },
+      { key: "desktop",     label: t("nav.modules.desktop"),       icon: Monitor },
+    ],
+  },
   {
     title: t("settings.advanced_section"),
     items: [
@@ -56,7 +68,7 @@ const SECTIONS: TabSection[] = [
 // on xl (and so wants full available width). Single-section panels (identity,
 // super agent, devices, advanced) keep a cosier reading width so wide displays
 // don't blow form fields up to absurd widths.
-const WIDE_TABS = new Set<TabKey>(["engines", "telegram", "memory", "skills", "appearance"]);
+const WIDE_TABS = new Set<TabKey>(["engines", "telegram", "memory", "skills", "appearance", "voice"]);
 const PANELS: Record<TabKey, () => ReactElement> = {
   identity:    () => <IdentityPanel />,
@@ -66,6 +78,9 @@ const PANELS: Record<TabKey, () => ReactElement> = {
   skills:      () => <SkillsInspectorPanel />,
   telegram:    () => <TelegramSettingsTabs />,
   devices:     () => <DevicesPanel />,
+  voice:       () => <VoiceScreen />,
+  deck:        () => <DeckScreen />,
+  desktop:     () => <DesktopSettingsPanel />,
   appearance:  () => <AppearancePanel />,
   advanced:    () => <AdvancedPanel />,
 };
@@ -103,6 +118,9 @@ function tabFromPath(pathname: string): TabKey {
     case "skills": return "skills";
     case "telegram": return "telegram";
     case "devices": return "devices";
+    case "voice": return "voice";
+    case "deck": return "deck";
+    case "desktop": return "desktop";
     case "appearance": return "appearance";
     case "config":
     case "advanced": return "advanced";

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

@@ -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>
   );
 }