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

@agentprojectcontext/apx 1.44.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 (14) hide show

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-Cjj_d3SA.js"></script>
+    <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">

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/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

@@ -180,6 +180,7 @@ export const en = {
     account_section:     "Account",
     agents_section:      "Agents & models",
     channels_section:    "Channels & devices",
+    modules_section:     "Modules",
     advanced_section:    "Advanced",
     tabs: {
@@ -930,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

@@ -181,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: {
@@ -928,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";