@peers-app/peers-ui 0.19.12 → 0.19.13

package/dist/tabs-layout/tabs-layout.js

@@ -33,24 +33,27 @@ var __importStar = (this && this.__importStar) || (function () {
     };
 })();
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.TabsLayoutApp = TabsLayoutApp;
-exports.TabsLayout = TabsLayout;
+exports.TabErrorBoundary = void 0;
+exports.TabsLayoutInternal = TabsLayoutInternal;
+exports.TabContent = TabContent;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const peers_sdk_1 = require("@peers-app/peers-sdk");
 const react_1 = __importStar(require("react"));
 const command_palette_1 = require("../command-palette/command-palette");
-const command_palette_ui_1 = require("../command-palette/command-palette-ui");
 const group_switcher_1 = require("../components/group-switcher");
 const router_1 = require("../components/router");
 const globals_1 = require("../globals");
 const hooks_1 = require("../hooks");
 const color_mode_dropdown_1 = require("../screens/settings/color-mode-dropdown");
-const setup_user_1 = require("../screens/setup-user");
-const welcome_modal_1 = require("../screens/welcome-modal");
 const system_apps_1 = require("../system-apps");
 const routes_loader_1 = require("../ui-router/routes-loader");
 const ui_loader_1 = require("../ui-router/ui-loader");
 const tabs_state_1 = require("./tabs-state");
+/**
+ * Wraps a single tab's content so a crash in one tab doesn't take down the whole app.
+ * Exported so other root layouts (e.g. the full-screen layout) can render a tab body with
+ * the same crash isolation. Reset it across screens by giving it a `key`.
+ */
 class TabErrorBoundary extends react_1.Component {
     constructor(props) {
         super(props);
@@ -74,53 +77,19 @@ class TabErrorBoundary extends react_1.Component {
         return this.props.children;
     }
 }
-function TabsLayoutApp() {
-    const userId = (0, hooks_1.usePromise)(async () => {
-        const _userId = await peers_sdk_1.rpcServerCalls.getUserId();
-        return _userId || null;
-    });
-    if (userId === undefined) {
-        return;
-    }
-    if (!userId) {
-        document.getElementById("appLoadingDiv")?.remove();
-        return (0, jsx_runtime_1.jsx)(setup_user_1.SetupUser, {});
-    }
-    else {
-        return (0, jsx_runtime_1.jsx)(TabsLayout, { userId: userId });
-    }
-}
-let userContextInitialized = false;
-function TabsLayout(props) {
-    if (!userContextInitialized) {
-        (0, peers_sdk_1.setDefaultClientUserContext)(props.userId);
-        userContextInitialized = true;
-    }
-    const loaded = (0, hooks_1.usePromise)(async () => {
-        await (0, globals_1.loadGlobals)();
-        await (0, routes_loader_1.loadAllRoutes)();
-        await Promise.all([
-            tabs_state_1.activeTabs.loadingPromise,
-            tabs_state_1.activeTabId.loadingPromise,
-            tabs_state_1.recentlyUsedApps.loadingPromise,
-            peers_sdk_1.hasShownWelcomeModal.loadingPromise,
-        ]);
-        return true;
-    });
-    const [showWelcomeModal, setShowWelcomeModal] = (0, react_1.useState)(false);
-    const [_colorMode] = (0, hooks_1.useObservable)(color_mode_dropdown_1.colorMode);
-    // Check if we should show the welcome modal after loading
-    (0, react_1.useEffect)(() => {
-        if (loaded && !(0, peers_sdk_1.hasShownWelcomeModal)()) {
-            setShowWelcomeModal(true);
-        }
-    }, [loaded]);
-    if (!loaded)
-        return false;
-    document.getElementById("appLoadingDiv")?.remove();
-    return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(TabsLayoutInternal, {}), (0, jsx_runtime_1.jsx)(command_palette_ui_1.CommandPaletteOverlay, {}), showWelcomeModal && ((0, jsx_runtime_1.jsx)(welcome_modal_1.WelcomeModal, { colorMode: _colorMode, onClose: () => setShowWelcomeModal(false) }))] }));
-}
-function TabsLayoutInternal() {
+exports.TabErrorBoundary = TabErrorBoundary;
+/**
+ * The tab UI body: the tab strip plus the active tab's content. Rendered as the body of
+ * the default `tabs` root layout inside `RootLayoutHost` (which owns bootstrapping, the
+ * command palette, and the welcome modal). Branches on `isDesktop` for mobile vs. desktop
+ * chrome.
+ *
+ * @param fillContainer When `true`, the body fills its parent (`height: 100%`) instead of
+ *   sizing itself to the viewport. Set this when embedding the tabs UI inside another
+ *   layout that owns the vertical space (e.g. the `tabs-with-console` split layout);
+ *   leave it `false`/unset for the standalone `tabs` layout, which sizes to the viewport.
+ */
+function TabsLayoutInternal({ fillContainer = false } = {}) {
     const [_colorMode] = (0, hooks_1.useObservable)(color_mode_dropdown_1.colorMode);
     const [tabs] = (0, hooks_1.useObservable)(tabs_state_1.activeTabs);
     const [activeTab] = (0, hooks_1.useObservable)(tabs_state_1.activeTabId);
@@ -170,7 +139,7 @@ function TabsLayoutInternal() {
     const switchTab = (tabId) => {
         (0, tabs_state_1.activeTabId)(tabId);
     };
-    return ((0, jsx_runtime_1.jsxs)("div", { className: "d-flex flex-column", style: { height: "calc(100vh - 25px)", overflow: "hidden" }, children: [switchingGroup && ((0, jsx_runtime_1.jsx)("div", { style: {
+    return ((0, jsx_runtime_1.jsxs)("div", { className: "d-flex flex-column", style: { height: fillContainer ? "100%" : "calc(100vh - 25px)", overflow: "hidden" }, children: [switchingGroup && ((0, jsx_runtime_1.jsx)("div", { style: {
                     position: "fixed",
                     inset: 0,
                     zIndex: 9999,
@@ -284,6 +253,11 @@ function TabHeader({ tab, isActive, onSwitch, onClose, colorMode }) {
                     onClose(tab.tabId);
                 }, children: (0, jsx_runtime_1.jsx)("i", { className: "bi-x" }) }))] }));
 }
+/**
+ * Renders a single tab's body, lazily initializing it on first activation and keeping it
+ * mounted thereafter (`initializedTabs`). Exported so other root layouts (e.g. full-screen)
+ * can render the active screen through the same routing/launcher path.
+ */
 function TabContent({ tab, isMobile, isActive }) {
     // Only render content if this tab is active OR has been previously initialized
     const shouldRender = isActive || tabs_state_1.initializedTabs.has(tab.tabId);

package/dist/tabs-layout/tabs-state.d.ts

@@ -26,6 +26,16 @@ type AppInfo = {
 };
 export declare function determineAppFromPath(path: string): AppInfo | undefined;
 export declare const updateActiveTabTitle: (newTitle: string) => void;
+/**
+ * Enable or disable single-tab mode.
+ *
+ * When enabled, {@link openNewTab} replaces the active (non-launcher) screen in place
+ * rather than appending a new tab, so single-screen layouts (e.g. full-screen) never
+ * accumulate tabs. This is non-destructive: any pre-existing tabs are left untouched and
+ * reappear when a multi-tab layout becomes active again. Layouts should enable it on mount
+ * and disable it on unmount.
+ */
+export declare const setSingleTabMode: (enabled: boolean) => void;
 export declare const openNewTab: (tab: Omit<TabState, "tabId">, forceNew?: boolean) => void;
 export declare const closeCurrentTab: () => void;
 export declare const switchToNextTab: () => void;

package/dist/tabs-layout/tabs-state.js

@@ -1,6 +1,6 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.switchToPreviousTab = exports.switchToNextTab = exports.closeCurrentTab = exports.openNewTab = exports.updateActiveTabTitle = exports.handleMainPathChanged = exports.initializedTabs = exports.recentlyUsedApps = exports.activeTabId = exports.activeTabs = exports.launcherApp = void 0;
+exports.switchToPreviousTab = exports.switchToNextTab = exports.closeCurrentTab = exports.openNewTab = exports.setSingleTabMode = exports.updateActiveTabTitle = exports.handleMainPathChanged = exports.initializedTabs = exports.recentlyUsedApps = exports.activeTabId = exports.activeTabs = exports.launcherApp = void 0;
 exports.goToTabPath = goToTabPath;
 exports.determineAppFromPath = determineAppFromPath;
 const peers_sdk_1 = require("@peers-app/peers-sdk");
@@ -206,6 +206,22 @@ const updateActiveTabTitle = (newTitle) => {
     }, 100);
 };
 exports.updateActiveTabTitle = updateActiveTabTitle;
+// Single-tab mode: when enabled, opening an app replaces the current screen instead of
+// appending a tab. Used by the full-screen root layout so it shows one screen at a time.
+let singleTabModeEnabled = false;
+/**
+ * Enable or disable single-tab mode.
+ *
+ * When enabled, {@link openNewTab} replaces the active (non-launcher) screen in place
+ * rather than appending a new tab, so single-screen layouts (e.g. full-screen) never
+ * accumulate tabs. This is non-destructive: any pre-existing tabs are left untouched and
+ * reappear when a multi-tab layout becomes active again. Layouts should enable it on mount
+ * and disable it on unmount.
+ */
+const setSingleTabMode = (enabled) => {
+    singleTabModeEnabled = enabled;
+};
+exports.setSingleTabMode = setSingleTabMode;
 // Global function to open content in new tab
 const openNewTab = (tab, forceNew = false) => {
     const newTab = {
@@ -218,6 +234,22 @@ const openNewTab = (tab, forceNew = false) => {
         // Switch to existing tab
         (0, exports.activeTabId)(currentTabs[existingTabIndex].tabId);
     }
+    else if (singleTabModeEnabled) {
+        // Single-tab mode: replace the active non-launcher screen in place. From the launcher
+        // (home), append once so the launcher stays put and the new app becomes the single
+        // app slot.
+        const activeIndex = currentTabs.findIndex((t) => t.tabId === (0, exports.activeTabId)());
+        const canReplace = activeIndex >= 0 && currentTabs[activeIndex].tabId !== "launcher";
+        if (canReplace) {
+            const newTabs = [...currentTabs];
+            newTabs[activeIndex] = newTab;
+            (0, exports.activeTabs)(newTabs);
+        }
+        else {
+            (0, exports.activeTabs)([...currentTabs, newTab]);
+        }
+        (0, exports.activeTabId)(newTab.tabId);
+    }
     else {
         // Always add new tab (for app launcher or when forceNew is true)
         (0, exports.activeTabs)([...currentTabs, newTab]);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@peers-app/peers-ui",
-  "version": "0.19.12",
+  "version": "0.19.13",
   "repository": {
     "type": "git",
     "url": "git+https://github.com/peers-app/peers-ui.git"
@@ -28,7 +28,7 @@
     "lint:fix": "biome check --write ."
   },
   "peerDependencies": {
-    "@peers-app/peers-sdk": "^0.19.12",
+    "@peers-app/peers-sdk": "^0.19.13",
     "bootstrap": "^5.3.3",
     "react": "^18.0.0",
     "react-dom": "^18.0.0"
@@ -39,7 +39,7 @@
     "@babel/preset-env": "^7.24.5",
     "@babel/preset-react": "^7.24.1",
     "@babel/preset-typescript": "^7.27.1",
-    "@peers-app/peers-sdk": "0.19.12",
+    "@peers-app/peers-sdk": "0.19.13",
     "@testing-library/dom": "^10.4.0",
     "@testing-library/jest-dom": "^6.6.3",
     "@testing-library/react": "^16.3.0",

package/src/components/voice-playback.tsx

@@ -0,0 +1,97 @@
+/**
+ * Voice Playback Component
+ *
+ * Headless (renders nothing) component that hosts the browser-side voice TTS
+ * playback handlers. The voice server (peers-electron `tts-service`) emits
+ * `voice:speakText` / `voice:playAudio` / `voice:stopSpeaking` events and relies
+ * on a mounted renderer to actually produce sound and report completion via
+ * `voiceNotifyPlaybackComplete`. Mount this once near the app root so voice
+ * output works regardless of which (if any) voice UI is visible.
+ */
+
+import { rpcServerCalls, subscribe } from "@peers-app/peers-sdk";
+import { useEffect, useRef } from "react";
+import type {
+  VoicePlayAudioPayload,
+  VoiceSpeakPayload,
+  VoiceSubscribeEvent,
+} from "./voice-subscribe-events";
+
+/**
+ * Subscribes to voice TTS events and plays them in the browser. Renders nothing.
+ */
+export const VoicePlayback: React.FC = () => {
+  // Track the current cloud-TTS audio element so it can be stopped on demand.
+  const currentAudioRef = useRef<HTMLAudioElement | null>(null);
+
+  useEffect(() => {
+    const speakHandler = subscribe(
+      "voice:speakText",
+      (event: VoiceSubscribeEvent<VoiceSpeakPayload>) => {
+        const { text, voice, rate } = event.data;
+        if ("speechSynthesis" in window) {
+          const utterance = new SpeechSynthesisUtterance(text);
+          if (voice) {
+            const voices = speechSynthesis.getVoices();
+            const selectedVoice = voices.find((v) => v.name === voice);
+            if (selectedVoice) utterance.voice = selectedVoice;
+          }
+          if (rate) utterance.rate = rate;
+          utterance.onend = () => {
+            rpcServerCalls.voiceNotifyPlaybackComplete?.().catch(() => {});
+          };
+          utterance.onerror = () => {
+            rpcServerCalls.voiceNotifyPlaybackComplete?.().catch(() => {});
+          };
+          speechSynthesis.speak(utterance);
+        } else {
+          rpcServerCalls.voiceNotifyPlaybackComplete?.().catch(() => {});
+        }
+      },
+    );
+
+    const stopHandler = subscribe("voice:stopSpeaking", () => {
+      if ("speechSynthesis" in window) {
+        speechSynthesis.cancel();
+      }
+      if (currentAudioRef.current) {
+        currentAudioRef.current.pause();
+        currentAudioRef.current = null;
+      }
+    });
+
+    const playHandler = subscribe(
+      "voice:playAudio",
+      async (event: VoiceSubscribeEvent<VoicePlayAudioPayload>) => {
+        const { audioBase64, mimeType } = event.data;
+        try {
+          const audioData = Uint8Array.from(atob(audioBase64), (c) => c.charCodeAt(0));
+          const blob = new Blob([audioData], { type: mimeType });
+          const url = URL.createObjectURL(blob);
+          const audio = new Audio(url);
+          currentAudioRef.current = audio;
+          audio.onended = () => {
+            URL.revokeObjectURL(url);
+            currentAudioRef.current = null;
+            rpcServerCalls.voiceNotifyPlaybackComplete?.().catch(() => {});
+          };
+          await audio.play();
+        } catch (e) {
+          console.error("Failed to play audio:", e);
+          currentAudioRef.current = null;
+          rpcServerCalls.voiceNotifyPlaybackComplete?.().catch(() => {});
+        }
+      },
+    );
+
+    return () => {
+      speakHandler.unsubscribe();
+      stopHandler.unsubscribe();
+      playHandler.unsubscribe();
+    };
+  }, []);
+
+  return null;
+};
+
+export default VoicePlayback;

package/src/components/voice-subscribe-events.ts

@@ -1,10 +1,6 @@
-import type { IMessage } from "@peers-app/peers-sdk";
-
 /** Shape passed to `subscribe` handlers for voice / chat IPC events */
 export type VoiceSubscribeEvent<T> = { data: T };
 
-export type ChatOpenWithMessagePayload = { message?: IMessage };
-
 export type VoiceStatePayload = { state: string };
 
 export type VoiceTranscriptionPayload = { text: string };

package/src/index.tsx

@@ -1,4 +1,3 @@
-export * from "./components/chat-overlay";
 export * from "./components/inverse-lazy-list";
 export type { IEditorEffects, IMarkdownEditorProps } from "./components/markdown-editor/editor";
 export { MarkdownEditor } from "./components/markdown-editor/editor";
@@ -8,8 +7,31 @@ export * from "./components/sortable-list";
 export * from "./components/tabs";
 export { Typeahead, type TypeaheadItem } from "./components/typeahead";
 export * from "./components/voice-indicator";
-export { mainContentPath } from "./globals";
+export * from "./components/voice-playback";
+export { isDesktop, mainContentPath } from "./globals";
 export * from "./hooks";
+export * from "./operator-console/operator-console";
+export * from "./operator-console/operator-console-state";
+export {
+  type GlobalOverlay,
+  globalOverlays,
+  registerGlobalOverlay,
+  unregisterGlobalOverlay,
+} from "./root-layout/global-overlays";
+export { LayoutPicker } from "./root-layout/layout-picker";
+export type { RootLayout } from "./root-layout/root-layout";
+export {
+  RootLayoutHost,
+  // Compat alias: the desktop/PWA/RN clients historically mounted `TabsLayoutApp`.
+  // The host now owns bootstrapping; the tabs UI is just the default layout body.
+  RootLayoutHost as TabsLayoutApp,
+} from "./root-layout/root-layout-host";
+export {
+  DEFAULT_ROOT_LAYOUT_ID,
+  getRootLayout,
+  getRootLayouts,
+} from "./root-layout/root-layout-registry";
+export { selectedRootLayoutId, setRootLayout } from "./root-layout/root-layout-state";
 export * from "./tabs-layout/tabs-layout";
 export {
   activeTabId,

package/src/operator-console/operator-console-state.ts

@@ -0,0 +1,119 @@
+/**
+ * Operator Console — panel state
+ *
+ * Persistent, per-device state for the Operator Console shell plus the control
+ * helpers and the global keyboard shortcut that toggles it. The panel itself
+ * ({@link OperatorConsolePanel}) reads this state reactively via `useObservable`.
+ */
+
+import { deviceVar } from "@peers-app/peers-sdk";
+import { closeCommandPalette, registerCommand } from "../command-palette/command-palette";
+
+/** Edge the console panel is docked to. */
+export type ConsoleDock = "bottom" | "left" | "right";
+
+/** Persisted layout/visibility state for the Operator Console panel. */
+export interface ConsolePanelState {
+  /** Whether the panel is expanded (open) or collapsed to its edge strip. */
+  expanded: boolean;
+  /** Which screen edge the panel is docked to. */
+  dock: ConsoleDock;
+  /** Panel height in pixels when docked to the bottom. */
+  bottomHeight: number;
+  /** Panel width in pixels when docked to the left or right. */
+  sideWidth: number;
+  /** Whether the panel is maximized to fill the layout body (hiding the tabs panel). */
+  maximized: boolean;
+}
+
+/** Default panel state: collapsed, docked to the bottom. */
+export const DEFAULT_CONSOLE_PANEL_STATE: ConsolePanelState = {
+  expanded: false,
+  dock: "bottom",
+  bottomHeight: 300,
+  sideWidth: 420,
+  maximized: false,
+};
+
+/**
+ * Per-device persisted state for the Operator Console panel. Layout/visibility
+ * is a per-device preference, so this uses `deviceVar` (not synced across devices).
+ */
+export const operatorConsolePanel = deviceVar<ConsolePanelState>("operatorConsole:panel", {
+  defaultValue: DEFAULT_CONSOLE_PANEL_STATE,
+});
+
+function update(patch: Partial<ConsolePanelState>): void {
+  const current = operatorConsolePanel() ?? DEFAULT_CONSOLE_PANEL_STATE;
+  operatorConsolePanel({ ...current, ...patch });
+}
+
+/** Toggle the console between expanded and collapsed. */
+export function toggleConsole(): void {
+  const current = operatorConsolePanel() ?? DEFAULT_CONSOLE_PANEL_STATE;
+  update({ expanded: !current.expanded });
+}
+
+/** Expand (open) the console. */
+export function openConsole(): void {
+  update({ expanded: true });
+}
+
+/** Collapse (close) the console. */
+export function closeConsole(): void {
+  update({ expanded: false });
+}
+
+/** Dock the console to the given edge. */
+export function setConsoleDock(dock: ConsoleDock): void {
+  update({ dock });
+}
+
+/** Set whether the console is maximized (fills the layout body, hiding the tabs panel). */
+export function setConsoleMaximized(maximized: boolean): void {
+  update({ maximized });
+}
+
+/**
+ * Persist a new panel size. Use `bottomHeight` when docked to the bottom and
+ * `sideWidth` when docked to a side.
+ */
+export function setConsoleSize(size: { bottomHeight?: number; sideWidth?: number }): void {
+  update(size);
+}
+
+/**
+ * Global keyboard handler for the console toggle shortcut. Ctrl+` on all
+ * platforms (matching VS Code / Cursor). Intentionally not Cmd on macOS.
+ */
+function handleKeyDown(event: KeyboardEvent): void {
+  if (event.ctrlKey && !event.metaKey && !event.altKey && event.code === "Backquote") {
+    event.preventDefault();
+    toggleConsole();
+  }
+}
+
+let initialized = false;
+
+/** Install the global Ctrl+` listener and register the palette command (idempotent). */
+export function initializeOperatorConsole(): void {
+  if (initialized || typeof window === "undefined") return;
+  initialized = true;
+
+  document.addEventListener("keydown", handleKeyDown);
+
+  registerCommand({
+    id: "toggle-operator-console",
+    label: "Toggle Console",
+    description: "Show or hide the Operator Console panel",
+    shortcut: "Ctrl+`",
+    iconClassName: "bi-terminal",
+    category: "View",
+    action: () => {
+      closeCommandPalette();
+      toggleConsole();
+    },
+  });
+}
+
+initializeOperatorConsole();