@peers-app/peers-ui 0.27.3 → 0.27.5

package/src/host-shell/host-shell-consumer.test.ts

@@ -1,32 +0,0 @@
-const mockTools = { open: jest.fn(), openInEditor: jest.fn() };
-jest.mock("@peers-app/peers-sdk", () => ({
-  getHostShellContractDefinition: () => ({ contractId: "host-shell" }),
-  hostContractConsumer: () => ({ get: async () => ({ tools: mockTools }), dispose: () => {} }),
-}));
-
-import { openInEditorOnHost, openOnHost } from "./host-shell-consumer";
-
-const alert = jest.fn();
-beforeEach(() => {
-  Object.assign(window, { alert });
-  jest.spyOn(console, "error").mockImplementation(() => {});
-  mockTools.open.mockReset();
-  mockTools.openInEditor.mockReset();
-  alert.mockReset();
-});
-
-it("opens links and folders on the host", async () => {
-  await openOnHost("https://peers.app");
-  expect(mockTools.open).toHaveBeenCalledWith({ target: "https://peers.app" });
-  await openInEditorOnHost("~/peers/packages/desk");
-  expect(mockTools.openInEditor).toHaveBeenCalledWith({ path: "~/peers/packages/desk" });
-  expect(alert).not.toHaveBeenCalled();
-});
-
-it("shows why the host could not open something", async () => {
-  mockTools.open.mockRejectedValueOnce(new Error("open refuses git: links"));
-  await openOnHost("git@github.com:me/pkg.git");
-  expect(alert).toHaveBeenCalledWith(
-    "Could not open git@github.com:me/pkg.git: open refuses git: links",
-  );
-});

package/src/host-shell/host-shell-consumer.ts

@@ -1,53 +0,0 @@
-import {
-  getHostShellContractDefinition,
-  hostContractConsumer,
-  type IHostShellConsumer,
-} from "@peers-app/peers-sdk";
-
-/**
- * Shared handle for System Host Shell on the local host. Calls name no data context, so the
- * host runs them in the personal context, where the signed-in user has Self access.
- */
-export const hostShellContract = hostContractConsumer<IHostShellConsumer>(
-  getHostShellContractDefinition(),
-);
-
-/** Return the System Host Shell tools of the local host. */
-export async function hostShellTools(): Promise<IHostShellConsumer["tools"]> {
-  return (await hostShellContract.get()).tools;
-}
-
-/**
- * Open a web link in the browser, or a local file or folder with the OS. Failures (an
- * unsupported host, a refused link scheme, a missing folder) are logged and shown.
- *
- * @param target - Link or local path (`~` allowed).
- */
-export async function openOnHost(target: string): Promise<void> {
-  try {
-    await (await hostShellTools()).open({ target });
-  } catch (error) {
-    reportHostShellError(`Could not open ${target}`, error);
-  }
-}
-
-/**
- * Open a folder in a code editor (VS Code when installed), else with the OS.
- *
- * @param path - Folder or file (`~` allowed).
- */
-export async function openInEditorOnHost(path: string): Promise<void> {
-  try {
-    await (await hostShellTools()).openInEditor({ path });
-  } catch (error) {
-    reportHostShellError(`Could not open ${path}`, error);
-  }
-}
-
-function reportHostShellError(what: string, error: unknown): void {
-  const message = error instanceof Error ? error.message : String(error);
-  console.error(`${what}:`, error);
-  if (typeof window !== "undefined" && typeof window.alert === "function") {
-    window.alert(`${what}: ${message}`);
-  }
-}

package/src/index.tsx

@@ -1,42 +0,0 @@
-export * from "./components/inverse-lazy-list";
-export type { IEditorEffects, IMarkdownEditorProps } from "./components/markdown-editor/editor";
-export { MarkdownEditor } from "./components/markdown-editor/editor";
-export * from "./components/markdown-editor/editor-inline";
-export * from "./components/markdown-with-mentions";
-export * from "./components/responsive-section-nav";
-export * from "./components/sortable-list";
-export * from "./components/tabs";
-export { Typeahead, type TypeaheadItem } from "./components/typeahead";
-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,
-  activeTabs,
-  closeCurrentTab,
-  goToTabPath,
-  TabState,
-  updateActiveTabTitle,
-} from "./tabs-layout/tabs-state";

package/src/mention-configs.ts

@@ -1,185 +0,0 @@
-import {
-  Assistants,
-  type IMentionData,
-  PeerTypes,
-  Tools,
-  Users,
-  Workflows,
-} from "@peers-app/peers-sdk";
-import { mainContentPath } from "./globals";
-
-import { listWorkflowMentionTools } from "./screens/tools/tool-catalog-ipc";
-
-const MENTIONS_MAX_RESULTS = 10;
-
-/** Editor and renderer behavior for one persisted mention kind. */
-export interface IMentionConfig {
-  iconClass: string;
-  styleClass?: string;
-  kind: string;
-  query: (text: string) => Promise<IMentionData[]>;
-  getById: (id: string) => Promise<IMentionData | undefined>;
-  picture?: (data: IMentionData) => JSX.Element;
-  onClick?: (data: IMentionData) => void;
-}
-
-/** Discover workflow-invocable tools while keeping historical mention IDs readable. */
-export const toolMentionConfig: IMentionConfig = {
-  kind: "tool",
-  iconClass: "bi bi-tools",
-  styleClass: "mention-tool",
-  query: async (search: string) => {
-    const results = await listWorkflowMentionTools(search, MENTIONS_MAX_RESULTS);
-    return results.map((p) => ({
-      kind: "tool",
-      id: p.toolId,
-      name: p.name,
-    }));
-  },
-  getById: (id) =>
-    Tools()
-      .get(id)
-      .then(
-        (item) =>
-          item && {
-            kind: "tool",
-            id: item.toolId,
-            name: item.name,
-          },
-      ),
-};
-
-/** Discover users and resolve persisted user mentions. */
-export const userMentionConfig: IMentionConfig = {
-  kind: "user",
-  iconClass: "bi-person-fill",
-  styleClass: "mention-user",
-  query: async (search: string) => {
-    return Users()
-      .list({ name: { $matchWords: search } }, { pageSize: MENTIONS_MAX_RESULTS })
-      .then((users) =>
-        users.map((user) => ({
-          kind: "user",
-          id: user.userId,
-          name: user.name,
-        })),
-      );
-  },
-  getById: (id) =>
-    Users()
-      .get(id)
-      .then(
-        (item) =>
-          item && {
-            kind: "user",
-            id: item.userId,
-            name: item.name,
-          },
-      ),
-};
-
-/** Discover assistants and resolve persisted assistant mentions. */
-export const assistantMentionConfig: IMentionConfig = {
-  kind: "assistant",
-  iconClass: "bi bi-person-fill-gear",
-  styleClass: "mention-assistant",
-  query: async (search: string) => {
-    return Assistants()
-      .list({ name: { $matchWords: search } }, { pageSize: MENTIONS_MAX_RESULTS })
-      .then((assistants) =>
-        assistants.map((assistant) => ({
-          kind: "assistant" as const,
-          id: assistant.assistantId,
-          name: assistant.name,
-        })),
-      );
-  },
-  getById: (id) =>
-    Assistants()
-      .get(id)
-      .then(
-        (item) =>
-          item && {
-            kind: "assistant",
-            id: item.assistantId,
-            name: item.name,
-          },
-      ),
-};
-
-/** Discover workflows and resolve persisted workflow mentions. */
-export const workflowMentionConfig: IMentionConfig = {
-  kind: "workflow",
-  iconClass: "bi bi-database-fill-gear",
-  styleClass: "mention-workflow",
-  query: async (search: string) => {
-    return Workflows()
-      .list({ name: { $matchWords: search } }, { pageSize: MENTIONS_MAX_RESULTS })
-      .then((workflows) =>
-        workflows.map((workflow) => ({
-          kind: "workflow" as const,
-          id: workflow.workflowId,
-          name: workflow.name,
-        })),
-      );
-  },
-  getById: (id) =>
-    Workflows()
-      .get(id)
-      .then(
-        (item) =>
-          item && {
-            kind: "workflow",
-            id: item.workflowId,
-            name: item.name,
-          },
-      ),
-};
-
-/** Discover data types and navigate to their definitions. */
-export const valueTypeMentionConfig: IMentionConfig = {
-  kind: "type",
-  iconClass: "bi bi-code-square",
-  query: async (search: string) => {
-    const results = await PeerTypes().list(
-      { name: { $matchWords: search } },
-      { pageSize: MENTIONS_MAX_RESULTS },
-    );
-    return results.map((item) => ({
-      kind: "type",
-      id: item.peerTypeId,
-      name: item.name,
-    }));
-  },
-  getById: (id) =>
-    PeerTypes()
-      .get(id)
-      .then(
-        (item) =>
-          item && {
-            kind: "type",
-            id: item.peerTypeId,
-            name: item.name,
-          },
-      ),
-  onClick(data) {
-    mainContentPath(`peer-types/${data.id}`);
-  },
-};
-
-// Tasks().list({ title: { $matchWords: mentionString }, completeDT: { $exists: searchCompletedTasks } }, { pageSize: MAX_RESULTS })
-//   .then((tasks) => tasks.map((task) => ({
-//     kind: 'task' as const,
-//     id: task.taskId,
-//     name: task.title,
-//   }))),
-// picture = <i className="bi bi-list-task pe-1" />;
-
-/** Shared mention definitions used by editors and rendered messages. */
-export const mentionConfigs = [
-  toolMentionConfig,
-  userMentionConfig,
-  assistantMentionConfig,
-  workflowMentionConfig,
-  valueTypeMentionConfig,
-];

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

@@ -1,119 +0,0 @@
-/**
- * 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();

package/src/operator-console/operator-console.tsx

@@ -1,233 +0,0 @@
-/**
- * Operator Console — presentational panel
- *
- * The console's visual chrome only: a header toolbar (dock buttons, maximize/restore,
- * collapse) plus the body region. It fills its container (`height/width: 100%`) and has
- * no positioning of its own — the host layout (e.g. the `tabs-with-console` root layout)
- * owns the split sizing, the resize handle, the collapsed edge strip, and where the panel
- * is placed. Command input, output blocks, and the engine arrive later.
- */
-
-import type React from "react";
-import { useObservable } from "../hooks";
-import { colorMode } from "../screens/settings/color-mode-dropdown";
-import {
-  type ConsoleDock,
-  operatorConsolePanel,
-  setConsoleDock,
-  setConsoleMaximized,
-  toggleConsole,
-} from "./operator-console-state";
-
-/** Resolved color palette for the console chrome. */
-export interface ConsoleTheme {
-  bg: string;
-  headerBg: string;
-  border: string;
-  text: string;
-  muted: string;
-  hover: string;
-  accent: string;
-}
-
-/**
- * Resolve the console color palette for the active color mode. Shared by the panel and by
- * the host layout (so its collapsed strip and resize divider match the panel chrome).
- */
-export function getConsoleTheme(isDark: boolean): ConsoleTheme {
-  return {
-    bg: isDark ? "#1e1e1e" : "#ffffff",
-    headerBg: isDark ? "#252526" : "#f3f3f3",
-    border: isDark ? "#3c3c3c" : "#dee2e6",
-    text: isDark ? "#cccccc" : "#1e1e1e",
-    muted: isDark ? "#8c8c8c" : "#6c757d",
-    hover: isDark ? "#2a2d2e" : "#e8e8e8",
-    accent: "#0d6efd",
-  };
-}
-
-/**
- * The Operator Console panel chrome. Renders as an in-flow flex column that fills its
- * container; the parent layout decides the panel's size and placement. Reads dock and
- * maximized state from `operatorConsolePanel` to drive the header toolbar.
- */
-export const OperatorConsolePanel: React.FC = () => {
-  const [state] = useObservable(operatorConsolePanel);
-  const [mode] = useObservable(colorMode);
-
-  const { dock, maximized } = state;
-  const theme = getConsoleTheme(mode === "dark");
-
-  return (
-    <div
-      style={{
-        width: "100%",
-        height: "100%",
-        backgroundColor: theme.bg,
-        color: theme.text,
-        display: "flex",
-        flexDirection: "column",
-        overflow: "hidden",
-      }}
-    >
-      {/* Header toolbar */}
-      <div
-        style={{
-          display: "flex",
-          alignItems: "center",
-          justifyContent: "space-between",
-          height: "34px",
-          flex: "0 0 auto",
-          padding: "0 8px",
-          backgroundColor: theme.headerBg,
-          borderBottom: `1px solid ${theme.border}`,
-        }}
-      >
-        <div style={{ display: "flex", alignItems: "center", gap: "6px", fontSize: "12px" }}>
-          <i className="bi-terminal" />
-          <span style={{ fontWeight: 500 }}>Console</span>
-        </div>
-
-        <div style={{ display: "flex", alignItems: "center", gap: "2px" }}>
-          <DockButton
-            dock="left"
-            active={dock === "left"}
-            disabled={maximized}
-            theme={theme}
-            icon="bi-arrow-bar-left"
-            label="Dock left"
-          />
-          <DockButton
-            dock="bottom"
-            active={dock === "bottom"}
-            disabled={maximized}
-            theme={theme}
-            icon="bi-arrow-bar-down"
-            label="Dock bottom"
-          />
-          <DockButton
-            dock="right"
-            active={dock === "right"}
-            disabled={maximized}
-            theme={theme}
-            icon="bi-arrow-bar-right"
-            label="Dock right"
-          />
-
-          <span
-            style={{ width: "1px", height: "18px", backgroundColor: theme.border, margin: "0 4px" }}
-          />
-
-          <ToolbarButton
-            theme={theme}
-            icon={maximized ? "bi-fullscreen-exit" : "bi-arrows-fullscreen"}
-            label={maximized ? "Restore" : "Maximize"}
-            onClick={() => setConsoleMaximized(!maximized)}
-          />
-          <ToolbarButton
-            theme={theme}
-            icon="bi-chevron-down"
-            label="Collapse (Ctrl+`)"
-            onClick={toggleConsole}
-          />
-        </div>
-      </div>
-
-      {/* Body placeholder (content arrives in a later step) */}
-      <div
-        style={{
-          flex: "1 1 auto",
-          overflow: "auto",
-          display: "flex",
-          alignItems: "center",
-          justifyContent: "center",
-          color: theme.muted,
-          fontSize: "13px",
-        }}
-      >
-        <div style={{ textAlign: "center" }}>
-          <i
-            className="bi-terminal"
-            style={{ fontSize: "24px", display: "block", marginBottom: "6px" }}
-          />
-          Operator Console
-        </div>
-      </div>
-    </div>
-  );
-};
-
-interface ButtonTheme {
-  text: string;
-  muted: string;
-  hover: string;
-}
-
-interface ToolbarButtonProps {
-  theme: ButtonTheme;
-  icon: string;
-  label: string;
-  onClick: () => void;
-  active?: boolean;
-  disabled?: boolean;
-}
-
-/** A small, icon-only button used in the console header toolbar. */
-function ToolbarButton({ theme, icon, label, onClick, active, disabled }: ToolbarButtonProps) {
-  return (
-    <button
-      type="button"
-      title={label}
-      aria-label={label}
-      disabled={disabled}
-      onClick={onClick}
-      style={{
-        display: "flex",
-        alignItems: "center",
-        justifyContent: "center",
-        width: "28px",
-        height: "26px",
-        border: "none",
-        borderRadius: "4px",
-        background: active ? theme.hover : "transparent",
-        color: active ? theme.text : theme.muted,
-        cursor: disabled ? "not-allowed" : "pointer",
-        opacity: disabled ? 0.4 : 1,
-        fontSize: "14px",
-      }}
-      onMouseEnter={(e) => {
-        if (!disabled) e.currentTarget.style.backgroundColor = theme.hover;
-      }}
-      onMouseLeave={(e) => {
-        e.currentTarget.style.backgroundColor = active ? theme.hover : "transparent";
-      }}
-    >
-      <i className={icon} />
-    </button>
-  );
-}
-
-interface DockButtonProps {
-  dock: ConsoleDock;
-  active: boolean;
-  disabled: boolean;
-  theme: ButtonTheme;
-  icon: string;
-  label: string;
-}
-
-/** Header button that docks the console to a given edge. */
-function DockButton({ dock, active, disabled, theme, icon, label }: DockButtonProps) {
-  return (
-    <ToolbarButton
-      theme={theme}
-      icon={icon}
-      label={label}
-      active={active}
-      disabled={disabled}
-      onClick={() => setConsoleDock(dock)}
-    />
-  );
-}
-
-export default OperatorConsolePanel;

package/src/peers-services-registration.ts

@@ -1,6 +0,0 @@
-// The pvar definitions live in peers-sdk so headless hosts and UIs share one set of names.
-export {
-  persistPeersServicesRegistration,
-  registrationStatusPvar,
-  servicesTokenPvar,
-} from "@peers-app/peers-sdk";