@peers-app/peers-ui 0.19.10 → 0.19.13

package/src/root-layout/layouts/tabs-with-console-layout.tsx

@@ -0,0 +1,260 @@
+/**
+ * Tabs + Console root layout.
+ *
+ * Renders the standard tab UI and the Operator Console as two real, side-by-side panels
+ * in a flex split — not an overlay. Neither panel covers the other; each scrolls
+ * independently and the tab UI is sized to the space the console does not occupy.
+ *
+ * This layout owns everything the old overlay used to self-manage: the split sizing, the
+ * drag-to-resize divider, the collapsed edge strip, and the docked edge. The console's
+ * own chrome is the presentational {@link OperatorConsolePanel}. Panel state (expanded,
+ * dock edge, sizes, maximized) is read reactively from `operatorConsolePanel`, the same
+ * per-device state the `Ctrl+`` `` shortcut and the "Toggle Console" command drive.
+ */
+
+import type React from "react";
+import { useEffect, useRef, useState } from "react";
+import { useObservable } from "../../hooks";
+import { getConsoleTheme, OperatorConsolePanel } from "../../operator-console/operator-console";
+import {
+  type ConsoleDock,
+  openConsole,
+  operatorConsolePanel,
+  setConsoleSize,
+} from "../../operator-console/operator-console-state";
+import { colorMode } from "../../screens/settings/color-mode-dropdown";
+import { TabsLayoutInternal } from "../../tabs-layout/tabs-layout";
+
+const STRIP_THICKNESS = 26;
+const HANDLE_THICKNESS = 6;
+const MIN_SIZE = 120;
+
+function clamp(value: number, min: number, max: number): number {
+  return Math.max(min, Math.min(max, value));
+}
+
+/** Pixels occupied by the fixed titlebar (macOS = 25, hidden elsewhere). */
+function getTopOffset(): number {
+  if (typeof document === "undefined") return 0;
+  return Number.parseInt(getComputedStyle(document.body).paddingTop, 10) || 0;
+}
+
+/**
+ * The `tabs-with-console` layout body. Splits its area between the tab UI and the
+ * Operator Console along the docked edge, with a drag-to-resize divider. Collapses the
+ * console to a thin clickable strip and supports maximizing it to fill the layout body.
+ */
+export function TabsWithConsoleLayout() {
+  const [state] = useObservable(operatorConsolePanel);
+  const [mode] = useObservable(colorMode);
+  const [topOffset] = useState(getTopOffset);
+
+  const [dragSize, setDragSize] = useState<number | null>(null);
+  const [isResizing, setIsResizing] = useState(false);
+  const dragStartRef = useRef<{ startX: number; startY: number; startSize: number } | null>(null);
+  const latestSizeRef = useRef<number | null>(null);
+
+  const { expanded, dock, bottomHeight, sideWidth, maximized } = state;
+
+  useEffect(() => {
+    if (!isResizing) return;
+
+    const onMove = (e: MouseEvent) => {
+      const start = dragStartRef.current;
+      if (!start) return;
+      let next: number;
+      if (dock === "bottom") {
+        next = clamp(
+          start.startSize + (start.startY - e.clientY),
+          MIN_SIZE,
+          window.innerHeight - topOffset - MIN_SIZE,
+        );
+      } else if (dock === "left") {
+        next = clamp(
+          start.startSize + (e.clientX - start.startX),
+          MIN_SIZE,
+          window.innerWidth - MIN_SIZE,
+        );
+      } else {
+        next = clamp(
+          start.startSize + (start.startX - e.clientX),
+          MIN_SIZE,
+          window.innerWidth - MIN_SIZE,
+        );
+      }
+      latestSizeRef.current = next;
+      setDragSize(next);
+    };
+
+    const onUp = () => {
+      setIsResizing(false);
+      const finalSize = latestSizeRef.current;
+      if (finalSize != null) {
+        setConsoleSize(dock === "bottom" ? { bottomHeight: finalSize } : { sideWidth: finalSize });
+      }
+      setDragSize(null);
+      latestSizeRef.current = null;
+      dragStartRef.current = null;
+    };
+
+    document.addEventListener("mousemove", onMove);
+    document.addEventListener("mouseup", onUp);
+    return () => {
+      document.removeEventListener("mousemove", onMove);
+      document.removeEventListener("mouseup", onUp);
+    };
+  }, [isResizing, dock, topOffset]);
+
+  const theme = getConsoleTheme(mode === "dark");
+  const isVertical = dock !== "bottom";
+  const consoleSize = dragSize ?? (dock === "bottom" ? bottomHeight : sideWidth);
+
+  const onResizeStart = (e: React.MouseEvent) => {
+    e.preventDefault();
+    const startSize = dock === "bottom" ? bottomHeight : sideWidth;
+    dragStartRef.current = { startX: e.clientX, startY: e.clientY, startSize };
+    latestSizeRef.current = startSize;
+    setIsResizing(true);
+  };
+
+  // Tabs panel stays mounted across maximize so the tab subtree keeps its state; it is
+  // hidden (not unmounted) when the console is maximized.
+  const tabsHidden = expanded && maximized;
+  const tabsPanel = (
+    <div
+      key="tabs"
+      style={{
+        flex: 1,
+        minWidth: 0,
+        minHeight: 0,
+        overflow: "hidden",
+        display: tabsHidden ? "none" : "block",
+      }}
+    >
+      <TabsLayoutInternal fillContainer />
+    </div>
+  );
+
+  let consoleRegion: React.ReactNode;
+  if (!expanded) {
+    consoleRegion = <CollapsedStrip key="console" dock={dock} theme={theme} />;
+  } else if (maximized) {
+    consoleRegion = (
+      <div key="console" style={{ flex: 1, minWidth: 0, minHeight: 0 }}>
+        <OperatorConsolePanel />
+      </div>
+    );
+  } else {
+    consoleRegion = (
+      <div
+        key="console"
+        style={{
+          flex: "0 0 auto",
+          minWidth: 0,
+          minHeight: 0,
+          ...(dock === "bottom" ? { height: `${consoleSize}px` } : { width: `${consoleSize}px` }),
+        }}
+      >
+        <OperatorConsolePanel />
+      </div>
+    );
+  }
+
+  const divider =
+    expanded && !maximized ? (
+      <ResizeDivider
+        key="divider"
+        isVertical={isVertical}
+        isResizing={isResizing}
+        theme={theme}
+        onMouseDown={onResizeStart}
+      />
+    ) : null;
+
+  const children =
+    dock === "left" ? [consoleRegion, divider, tabsPanel] : [tabsPanel, divider, consoleRegion];
+
+  return (
+    <div
+      style={{
+        height: "calc(100vh - 25px)",
+        display: "flex",
+        flexDirection: isVertical ? "row" : "column",
+        overflow: "hidden",
+        userSelect: isResizing ? "none" : undefined,
+      }}
+    >
+      {children}
+    </div>
+  );
+}
+
+interface CollapsedStripProps {
+  dock: ConsoleDock;
+  theme: ReturnType<typeof getConsoleTheme>;
+}
+
+/** Thin clickable edge strip shown when the console is collapsed; opens it on click. */
+function CollapsedStrip({ dock, theme }: CollapsedStripProps) {
+  const isVertical = dock !== "bottom";
+  return (
+    <button
+      type="button"
+      onClick={openConsole}
+      title="Open Console (Ctrl+`)"
+      style={{
+        flex: `0 0 ${STRIP_THICKNESS}px`,
+        display: "flex",
+        alignItems: "center",
+        justifyContent: "center",
+        gap: "6px",
+        border: "none",
+        padding: 0,
+        backgroundColor: theme.headerBg,
+        color: theme.muted,
+        cursor: "pointer",
+        userSelect: "none",
+        fontSize: "12px",
+        ...(dock === "bottom"
+          ? { width: "100%", borderTop: `1px solid ${theme.border}` }
+          : dock === "left"
+            ? { height: "100%", borderRight: `1px solid ${theme.border}` }
+            : { height: "100%", borderLeft: `1px solid ${theme.border}` }),
+      }}
+    >
+      <i className="bi-terminal" style={{ fontSize: "14px" }} />
+      {!isVertical && <span>Console</span>}
+      <i className={isVertical ? "bi-chevron-left" : "bi-chevron-up"} />
+    </button>
+  );
+}
+
+interface ResizeDividerProps {
+  isVertical: boolean;
+  isResizing: boolean;
+  theme: ReturnType<typeof getConsoleTheme>;
+  onMouseDown: (e: React.MouseEvent) => void;
+}
+
+/** Drag handle between the tabs and console panels; resizes the console along the dock edge. */
+function ResizeDivider({ isVertical, isResizing, theme, onMouseDown }: ResizeDividerProps) {
+  return (
+    // biome-ignore lint/a11y/noStaticElementInteractions: pointer-only resize gutter; size is also adjustable via persisted state
+    <div
+      onMouseDown={onMouseDown}
+      onMouseEnter={(e) => {
+        if (!isResizing) e.currentTarget.style.backgroundColor = theme.accent;
+      }}
+      onMouseLeave={(e) => {
+        if (!isResizing) e.currentTarget.style.backgroundColor = "transparent";
+      }}
+      style={{
+        flex: `0 0 ${HANDLE_THICKNESS}px`,
+        backgroundColor: isResizing ? theme.accent : "transparent",
+        cursor: isVertical ? "ew-resize" : "ns-resize",
+      }}
+    />
+  );
+}
+
+export default TabsWithConsoleLayout;

package/src/root-layout/root-layout-host.tsx

@@ -0,0 +1,113 @@
+/**
+ * Root layout host — the single thing a Peers client mounts.
+ *
+ * `RootLayoutHost` owns everything that must exist regardless of which layout is active:
+ * the user gate / setup flow, user-context init, global + route loading, the
+ * always-available command palette, and the first-run welcome modal. It then delegates
+ * the visible shell to the selected {@link RootLayout}, swapping it live when the
+ * per-device selection changes.
+ *
+ * This is the bootstrap logic that previously lived (tangled with the tab UI) in
+ * `TabsLayoutApp` / `TabsLayout`; the tab UI itself is now just the `tabs` layout body
+ * (`TabsLayoutInternal`).
+ */
+
+import {
+  hasShownWelcomeModal,
+  rpcServerCalls,
+  setDefaultClientUserContext,
+} from "@peers-app/peers-sdk";
+import { useEffect, useState } from "react";
+import { CommandPaletteOverlay } from "../command-palette/command-palette-ui";
+import { loadGlobals } from "../globals";
+import { useObservable, usePromise } from "../hooks";
+import { colorMode } from "../screens/settings/color-mode-dropdown";
+import { SetupUser } from "../screens/setup-user";
+import { WelcomeModal } from "../screens/welcome-modal";
+import { activeTabId, activeTabs, recentlyUsedApps } from "../tabs-layout/tabs-state";
+import { loadAllRoutes } from "../ui-router/routes-loader";
+import { globalOverlays } from "./global-overlays";
+import { DEFAULT_ROOT_LAYOUT_ID, getRootLayout } from "./root-layout-registry";
+import { selectedRootLayoutId } from "./root-layout-state";
+
+/**
+ * Top-level host mounted by the client. Resolves the user, then hands off to the
+ * bootstrap component once a user exists. Kept as a thin outer component so the hook
+ * order downstream is stable across the user/no-user branches.
+ */
+export function RootLayoutHost() {
+  const userId = usePromise(async () => {
+    const _userId = await rpcServerCalls.getUserId();
+    return _userId || (null as string | null);
+  });
+
+  if (userId === undefined) {
+    return;
+  }
+
+  if (!userId) {
+    document.getElementById("appLoadingDiv")?.remove();
+    return <SetupUser />;
+  }
+
+  return <RootLayoutBootstrap userId={userId} />;
+}
+
+let userContextInitialized = false;
+
+/**
+ * Inner bootstrap: initializes the user context, awaits global/route/tab loading, then
+ * renders the selected layout body alongside the always-available command palette and
+ * the first-run welcome modal.
+ */
+function RootLayoutBootstrap(props: { userId: string }) {
+  if (!userContextInitialized) {
+    setDefaultClientUserContext(props.userId);
+    userContextInitialized = true;
+  }
+
+  const loaded = usePromise(async () => {
+    await loadGlobals();
+    await loadAllRoutes();
+    await Promise.all([
+      activeTabs.loadingPromise,
+      activeTabId.loadingPromise,
+      recentlyUsedApps.loadingPromise,
+      hasShownWelcomeModal.loadingPromise,
+    ]);
+    return true;
+  });
+
+  const [showWelcomeModal, setShowWelcomeModal] = useState(false);
+  const [_colorMode] = useObservable(colorMode);
+  const [layoutId] = useObservable(selectedRootLayoutId);
+  const [overlays] = useObservable(globalOverlays);
+
+  // Check if we should show the welcome modal after loading
+  useEffect(() => {
+    if (loaded && !hasShownWelcomeModal()) {
+      setShowWelcomeModal(true);
+    }
+  }, [loaded]);
+
+  if (!loaded) return false;
+
+  document.getElementById("appLoadingDiv")?.remove();
+
+  const layout =
+    getRootLayout(layoutId ?? DEFAULT_ROOT_LAYOUT_ID) ?? getRootLayout(DEFAULT_ROOT_LAYOUT_ID);
+  const Body = layout?.Component;
+
+  return (
+    <>
+      {Body && <Body />}
+      <CommandPaletteOverlay />
+      {overlays.map(({ id, Component }) => (
+        <Component key={id} />
+      ))}
+      {showWelcomeModal && (
+        <WelcomeModal colorMode={_colorMode} onClose={() => setShowWelcomeModal(false)} />
+      )}
+    </>
+  );
+}

package/src/root-layout/root-layout-registry.ts

@@ -0,0 +1,51 @@
+/**
+ * Root layout registry — the static list of built-in layouts owned by peers-ui.
+ *
+ * For now this is a hardcoded list. The accessor functions ({@link getRootLayouts} /
+ * {@link getRootLayout}) intentionally hide the underlying array so that dynamic,
+ * package-contributed layouts (a future `registerRootLayout`) can be added later
+ * without changing any consumer.
+ */
+
+import { TabsLayoutInternal } from "../tabs-layout/tabs-layout";
+import { FullScreenLayout } from "./layouts/full-screen-layout";
+import { TabsWithConsoleLayout } from "./layouts/tabs-with-console-layout";
+import type { RootLayout } from "./root-layout";
+
+/** Id of the layout used when no selection has been made (or the selection is unknown). */
+export const DEFAULT_ROOT_LAYOUT_ID = "tabs";
+
+/** Built-in layouts, in picker display order. */
+const builtInLayouts: RootLayout[] = [
+  {
+    id: "tabs",
+    name: "Tabs",
+    description: "The classic Peers shell: a tab strip with one app per tab.",
+    iconClassName: "bi-window-stack",
+    Component: TabsLayoutInternal,
+  },
+  {
+    id: "tabs-with-console",
+    name: "Tabs + Console",
+    description: "The tab strip with the Operator Console docked alongside as a resizable panel.",
+    iconClassName: "bi-layout-split",
+    Component: TabsWithConsoleLayout,
+  },
+  {
+    id: "fullscreen",
+    name: "Full-screen",
+    description: "One screen at a time, no tabs — navigate with the Cmd/Ctrl+K command palette.",
+    iconClassName: "bi-fullscreen",
+    Component: FullScreenLayout,
+  },
+];
+
+/** Returns all registered root layouts, in display order. */
+export function getRootLayouts(): RootLayout[] {
+  return builtInLayouts;
+}
+
+/** Returns the layout with the given id, or `undefined` if none is registered. */
+export function getRootLayout(id: string): RootLayout | undefined {
+  return builtInLayouts.find((layout) => layout.id === id);
+}

package/src/root-layout/root-layout-state.ts

@@ -0,0 +1,55 @@
+/**
+ * Root layout selection — persistent, per-device state plus palette integration.
+ *
+ * The selected layout id is stored in a `deviceVar` (per-device, not synced) to match
+ * the precedent of other root-UI preferences (`colorMode`, the operator console panel):
+ * layout choice is tightly coupled to the device/form factor. `RootLayoutHost` reads
+ * this reactively and swaps the layout live when it changes.
+ */
+
+import { deviceVar } from "@peers-app/peers-sdk";
+import { closeCommandPalette, registerCommand } from "../command-palette/command-palette";
+import { DEFAULT_ROOT_LAYOUT_ID, getRootLayouts } from "./root-layout-registry";
+
+/**
+ * Per-device id of the currently selected root layout. Defaults to
+ * {@link DEFAULT_ROOT_LAYOUT_ID}. Observable — subscribers (the host, the picker)
+ * re-render when it changes.
+ */
+export const selectedRootLayoutId = deviceVar<string>("rootLayout:selectedId", {
+  defaultValue: DEFAULT_ROOT_LAYOUT_ID,
+});
+
+/** Select the root layout with the given id (persists per-device). */
+export function setRootLayout(id: string): void {
+  selectedRootLayoutId(id);
+}
+
+let initialized = false;
+
+/**
+ * Register a `"Use <name> Layout"` command per layout so the selector is keyboard-driven
+ * and discoverable from the command palette (mirrors the operator console's "Toggle
+ * Console" command). Idempotent. The registry is static today, so this runs once at
+ * module load.
+ */
+export function registerLayoutCommands(): void {
+  if (initialized) return;
+  initialized = true;
+
+  for (const layout of getRootLayouts()) {
+    registerCommand({
+      id: `use-root-layout:${layout.id}`,
+      label: `Use ${layout.name} Layout`,
+      description: layout.description,
+      iconClassName: layout.iconClassName,
+      category: "View",
+      action: () => {
+        closeCommandPalette();
+        setRootLayout(layout.id);
+      },
+    });
+  }
+}
+
+registerLayoutCommands();

package/src/root-layout/root-layout.ts

@@ -0,0 +1,32 @@
+/**
+ * Root layout system — the layout interface.
+ *
+ * A {@link RootLayout} is a top-level, swappable app shell. The user (and, in the
+ * future, a package) can choose which root layout owns the visible chrome. Layouts
+ * are rendered *inside* `RootLayoutHost`, which has already done all bootstrapping
+ * (user context, route loading) and mounted the always-available command palette.
+ * A layout therefore owns 100% of the visible chrome (tab strip, content panels,
+ * console panel, etc.) while the host owns the invisible foundation.
+ */
+
+import type React from "react";
+
+/**
+ * A selectable top-level app layout. The `Component` is the layout body rendered by
+ * `RootLayoutHost`; everything visible on screen is the layout's responsibility.
+ */
+export interface RootLayout {
+  /** Stable id persisted in the layout-selection pvar (e.g. `"tabs"`). */
+  id: string;
+  /** User-facing name shown in the layout picker. */
+  name: string;
+  /** One-line description shown in the picker. */
+  description: string;
+  /** bootstrap-icon class used in the picker. */
+  iconClassName: string;
+  /**
+   * The layout body. Rendered inside `RootLayoutHost` after bootstrapping is
+   * complete and the command palette is mounted. The body owns all visible chrome.
+   */
+  Component: React.ComponentType;
+}

package/src/screens/network-viewer/connection-troubleshooter.tsx

@@ -1,4 +1,3 @@
-import { emit } from "@peers-app/peers-sdk";
 import type React from "react";
 import { useCallback, useEffect, useRef, useState } from "react";
 import { getNetworkViewerApi } from "./network-viewer-ipc";
@@ -183,19 +182,16 @@ export function ConnectionTroubleshooter({ onBack }: Props) {
   const handleAskAssistant = () => {
     const report = formatReportForAI(checks.filter((c) => c.status !== "running"));
     const message = `I ran the Peers connection troubleshooter and got the following results. Please help me understand what's wrong and how to fix it:\n\n${report}`;
-    emit({ name: "chat:openWithMessage", data: { message } }).catch(() => {
-      // Fallback: copy to clipboard
-      navigator.clipboard
-        .writeText(message)
-        .then(() => {
-          alert("Diagnostic report copied to clipboard. Paste it into the AI assistant chat.");
-        })
-        .catch(() => {
-          alert(
-            "Could not open AI assistant. Please open the chat manually and paste the diagnostic report.",
-          );
-        });
-    });
+    navigator.clipboard
+      .writeText(message)
+      .then(() => {
+        alert("Diagnostic report copied to clipboard. Paste it into the AI assistant chat.");
+      })
+      .catch(() => {
+        alert(
+          "Could not copy the diagnostic report. Please open the chat manually and describe the results.",
+        );
+      });
   };
 
   const groups = groupByLayer(checks.filter((c) => !c.id.startsWith("placeholder-")));

package/src/screens/settings/settings-page.tsx

@@ -17,6 +17,7 @@ import { Tabs } from "../../components/tabs";
 import { Tooltip } from "../../components/tooltip";
 import * as globals from "../../globals";
 import { useObservable, useObservableState, usePromise } from "../../hooks";
+import { LayoutPicker } from "../../root-layout/layout-picker";
 import { ColorModeDropdown } from "./color-mode-dropdown";
 import { VoiceSettings } from "./voice-settings";
 
@@ -77,7 +78,12 @@ const AppearanceSettingsTab: React.FC = () => {
   return (
     <>
       <h5 className="mb-3">Appearance</h5>
-      <ColorModeDropdown />
+      <div className="mb-3">
+        <ColorModeDropdown />
+      </div>
+      <div className="mb-3">
+        <LayoutPicker />
+      </div>
     </>
   );
 };

package/src/screens/setup-user.tsx

@@ -4,7 +4,6 @@ import {
   newid,
   newKeys,
   openMessageWithPublicKey,
-  peersCorePackageId,
   rpcServerCalls,
   signMessageWithSecretKey,
 } from "@peers-app/peers-sdk";
@@ -36,16 +35,10 @@ export const SetupUser = () => {
       const keys = newKeys();
       const _userId = newid();
 
-      // Call setUserIdAndSecretKey
+      // Call setUserIdAndSecretKey. This triggers device init, which installs
+      // peers-core into the personal context (S3-first, bundle fallback).
       await rpcServerCalls.setUserIdAndSecretKey(_userId, keys.secretKey);
 
-      // Auto-install peers-core for the new user
-      await rpcServerCalls
-        .addOrUpdatePackage(peersCorePackageId, { dataContextId: _userId })
-        .catch((err: unknown) => {
-          console.error("Error auto-installing peers-core:", err);
-        });
-
       // Success - reload the app (peers-services registration runs after Welcome modal)
       window.location.reload();
     } catch (err) {