@workbench-kit/shell-react 0.0.2-prototype.0.2.6

package/src/use-workbench-chat-command-proposals.ts

@@ -0,0 +1,194 @@
+import { useCallback, useRef, type Dispatch, type SetStateAction } from 'react';
+import {
+  isWorkbenchCommandRunnable,
+  resolveWorkbenchCommandExecutionPolicy,
+  type ResolveWorkbenchCommandExecutionPolicyInput,
+  type WorkbenchCommandDescriptor,
+} from '@workbench-kit/react/workbench';
+import type { ChatCommandProposal, ChatMessage } from '@workbench-kit/react/workbench/chat';
+
+import { type WorkbenchChatCommandRunResult } from './chat-command-surface.js';
+import { useWorkbench } from './provider.js';
+
+export interface WorkbenchChatCommandProposalInput {
+  args?: readonly unknown[] | undefined;
+  commandId: string;
+  description?: string | undefined;
+  id?: string | undefined;
+  label?: string | undefined;
+}
+
+export interface UseWorkbenchChatCommandProposalsOptions {
+  commands: readonly WorkbenchCommandDescriptor[];
+  onCommandResult?: ((result: WorkbenchChatCommandRunResult) => void) | undefined;
+  policyInput?: ResolveWorkbenchCommandExecutionPolicyInput | undefined;
+}
+
+function getCommandErrorMessage(error: unknown) {
+  if (error instanceof Error) {
+    return error.message;
+  }
+
+  return String(error);
+}
+
+function createProposalId(commandId: string) {
+  return `proposal-${commandId}-${Date.now()}-${Math.random().toString(36).slice(2)}`;
+}
+
+export function useWorkbenchChatCommandProposals({
+  commands,
+  onCommandResult,
+  policyInput,
+}: UseWorkbenchChatCommandProposalsOptions) {
+  const { executeCommand } = useWorkbench();
+  const runningProposalIds = useRef(new Set<string>());
+
+  const resolveDescriptor = useCallback(
+    (commandId: string, label?: string) =>
+      commands.find((command) => command.id === commandId) ?? {
+        id: commandId,
+        label: label ?? commandId,
+      },
+    [commands],
+  );
+
+  const enrichProposal = useCallback(
+    (proposal: WorkbenchChatCommandProposalInput): ChatCommandProposal => {
+      const descriptor = resolveDescriptor(proposal.commandId, proposal.label);
+      const policy = resolveWorkbenchCommandExecutionPolicy(descriptor, policyInput);
+
+      return {
+        args: proposal.args,
+        commandId: proposal.commandId,
+        description: proposal.description ?? descriptor.description,
+        id: proposal.id ?? createProposalId(proposal.commandId),
+        label: proposal.label ?? descriptor.label,
+        policy,
+        status: policy === 'auto-deny' ? 'blocked' : 'pending',
+      };
+    },
+    [policyInput, resolveDescriptor],
+  );
+
+  const enrichMessageProposals = useCallback(
+    (proposals: readonly WorkbenchChatCommandProposalInput[]) =>
+      proposals.map((proposal) => enrichProposal(proposal)),
+    [enrichProposal],
+  );
+
+  const updateProposalStatus = useCallback(
+    (
+      setMessages: Dispatch<SetStateAction<ChatMessage[]>>,
+      messageId: string,
+      proposalId: string,
+      status: ChatCommandProposal['status'],
+    ) => {
+      setMessages((currentMessages) =>
+        currentMessages.map((message) => {
+          if (message.id !== messageId || !message.commandProposals) {
+            return message;
+          }
+
+          return {
+            ...message,
+            commandProposals: message.commandProposals.map((proposal) =>
+              proposal.id === proposalId ? { ...proposal, status } : proposal,
+            ),
+          };
+        }),
+      );
+    },
+    [],
+  );
+
+  const runProposal = useCallback(
+    async (
+      setMessages: Dispatch<SetStateAction<ChatMessage[]>>,
+      messageId: string,
+      proposal: ChatCommandProposal,
+    ) => {
+      if (runningProposalIds.current.has(proposal.id)) {
+        return;
+      }
+
+      const descriptor = resolveDescriptor(proposal.commandId, proposal.label);
+      if (!isWorkbenchCommandRunnable(descriptor)) {
+        updateProposalStatus(setMessages, messageId, proposal.id, 'failed');
+        onCommandResult?.({
+          commandId: proposal.commandId,
+          label: proposal.label,
+          message: descriptor.disabledReason ?? 'Command is currently unavailable.',
+          status: 'error',
+        });
+        return;
+      }
+
+      runningProposalIds.current.add(proposal.id);
+      updateProposalStatus(setMessages, messageId, proposal.id, 'running');
+
+      try {
+        await executeCommand(proposal.commandId, ...(proposal.args ?? []));
+        updateProposalStatus(setMessages, messageId, proposal.id, 'executed');
+        onCommandResult?.({
+          commandId: proposal.commandId,
+          label: proposal.label,
+          status: 'success',
+        });
+      } catch (error) {
+        updateProposalStatus(setMessages, messageId, proposal.id, 'failed');
+        onCommandResult?.({
+          commandId: proposal.commandId,
+          label: proposal.label,
+          message: getCommandErrorMessage(error),
+          status: 'error',
+        });
+      } finally {
+        runningProposalIds.current.delete(proposal.id);
+      }
+    },
+    [executeCommand, onCommandResult, resolveDescriptor, updateProposalStatus],
+  );
+
+  const processAutoPolicies = useCallback(
+    (
+      setMessages: Dispatch<SetStateAction<ChatMessage[]>>,
+      messageId: string,
+      proposals: readonly ChatCommandProposal[],
+    ) => {
+      proposals.forEach((proposal) => {
+        if (proposal.policy === 'auto-allow' && proposal.status === 'pending') {
+          void runProposal(setMessages, messageId, proposal);
+        }
+      });
+    },
+    [runProposal],
+  );
+
+  const createProposalHandlers = useCallback(
+    (setMessages: Dispatch<SetStateAction<ChatMessage[]>>) => ({
+      onProposalAllow: (messageId: string, proposal: ChatCommandProposal) => {
+        if (proposal.status !== 'pending' || proposal.policy !== 'approval-required') {
+          return;
+        }
+
+        updateProposalStatus(setMessages, messageId, proposal.id, 'allowed');
+        void runProposal(setMessages, messageId, proposal);
+      },
+      onProposalDeny: (messageId: string, proposal: ChatCommandProposal) => {
+        if (proposal.status !== 'pending') {
+          return;
+        }
+
+        updateProposalStatus(setMessages, messageId, proposal.id, 'denied');
+      },
+    }),
+    [runProposal, updateProposalStatus],
+  );
+
+  return {
+    createProposalHandlers,
+    enrichMessageProposals,
+    processAutoPolicies,
+  };
+}

package/src/use-workbench-command-descriptors.ts

@@ -0,0 +1,41 @@
+import { useEffect, useMemo, useReducer } from 'react';
+import type { WorkbenchCommandDescriptor } from '@workbench-kit/react/workbench';
+
+import { useWorkbench } from './provider.js';
+import {
+  collectExtensionCommandFeaturesById,
+  extensionCommandToDescriptor,
+  mergeWorkbenchCommandDescriptors,
+} from './workbench-command-palette.js';
+
+const EMPTY_COMMAND_DESCRIPTORS: readonly WorkbenchCommandDescriptor[] = [];
+
+export function useWorkbenchCommandDescriptors(
+  additionalCommands: readonly WorkbenchCommandDescriptor[] = EMPTY_COMMAND_DESCRIPTORS,
+) {
+  const { extensionRegistry } = useWorkbench();
+  const [refreshToken, refreshCommands] = useReducer((count: number) => count + 1, 0);
+
+  useEffect(() => {
+    const disposable = extensionRegistry.commands.onDidRegisterCommand(() => {
+      refreshCommands();
+    });
+
+    return () => {
+      disposable.dispose();
+    };
+  }, [extensionRegistry.commands]);
+
+  return useMemo(() => {
+    const commandFeaturesById = collectExtensionCommandFeaturesById(extensionRegistry);
+
+    return mergeWorkbenchCommandDescriptors(
+      extensionRegistry.commands
+        .getCommands()
+        .map((command) =>
+          extensionCommandToDescriptor(command, commandFeaturesById.get(command.id)),
+        ),
+      [...additionalCommands],
+    );
+  }, [additionalCommands, extensionRegistry, refreshToken]);
+}

package/src/workbench-appearance-storage.ts

@@ -0,0 +1,115 @@
+import {
+  DEFAULT_DARK_THEME_PRESET,
+  DEFAULT_LIGHT_THEME_PRESET,
+  DEFAULT_SHELL_PRESET,
+  isShellPresetId,
+  type WorkbenchAppearanceSettings,
+  type WorkbenchColorSchemePreference,
+} from '@workbench-kit/react/workbench';
+import type { WorkbenchStorageReader, WorkbenchStorageWriter } from '@workbench-kit/workbench-core';
+
+export type { WorkbenchAppearanceSettings } from '@workbench-kit/react/workbench/themePresets';
+
+export const DEFAULT_WORKBENCH_APPEARANCE_STORAGE_KEY = 'workbench-kit/.workbench/appearance';
+
+export const DEFAULT_WORKBENCH_APPEARANCE: WorkbenchAppearanceSettings = {
+  darkPreset: DEFAULT_DARK_THEME_PRESET,
+  lightPreset: DEFAULT_LIGHT_THEME_PRESET,
+  shellPreset: DEFAULT_SHELL_PRESET,
+  themePreference: 'system',
+};
+
+export function isWorkbenchAppearancePersistenceAvailable(): boolean {
+  try {
+    return typeof globalThis.localStorage !== 'undefined';
+  } catch {
+    return false;
+  }
+}
+
+export function readPersistedWorkbenchAppearance(
+  storageKey = DEFAULT_WORKBENCH_APPEARANCE_STORAGE_KEY,
+  storage?: WorkbenchStorageReader,
+): WorkbenchAppearanceSettings {
+  const resolvedStorage = storage ?? getBrowserLocalStorage();
+  if (!resolvedStorage) {
+    return DEFAULT_WORKBENCH_APPEARANCE;
+  }
+
+  try {
+    const raw = resolvedStorage.getItem(storageKey);
+    if (!raw) {
+      return DEFAULT_WORKBENCH_APPEARANCE;
+    }
+
+    return normalizeWorkbenchAppearance(JSON.parse(raw) as unknown);
+  } catch {
+    return DEFAULT_WORKBENCH_APPEARANCE;
+  }
+}
+
+export function writePersistedWorkbenchAppearance(
+  settings: WorkbenchAppearanceSettings,
+  storageKey = DEFAULT_WORKBENCH_APPEARANCE_STORAGE_KEY,
+  storage?: WorkbenchStorageWriter,
+): void {
+  const resolvedStorage = storage ?? getBrowserLocalStorage();
+  if (!resolvedStorage) {
+    return;
+  }
+
+  try {
+    resolvedStorage.setItem(storageKey, JSON.stringify(settings, null, 2));
+  } catch {
+    // Ignore quota and security errors so the shell keeps working offline.
+  }
+}
+
+function normalizeWorkbenchAppearance(value: unknown): WorkbenchAppearanceSettings {
+  if (typeof value !== 'object' || value === null) {
+    return DEFAULT_WORKBENCH_APPEARANCE;
+  }
+
+  const record = value as Record<string, unknown>;
+  const themePreference = normalizeThemePreference(record.themePreference);
+  // Preset ids may belong to a contributed theme, which isn't known until extensions
+  // register, so we can only validate shape here; the appearance UI falls back to a
+  // default option if the persisted id no longer resolves to anything.
+  const lightPreset = normalizePresetId(
+    record.lightPreset,
+    DEFAULT_WORKBENCH_APPEARANCE.lightPreset,
+  );
+  const darkPreset = normalizePresetId(record.darkPreset, DEFAULT_WORKBENCH_APPEARANCE.darkPreset);
+  const shellPreset = normalizeShellPresetId(record.shellPreset);
+
+  return {
+    darkPreset,
+    lightPreset,
+    shellPreset,
+    themePreference,
+  };
+}
+
+function normalizeShellPresetId(value: unknown): string {
+  return typeof value === 'string' && isShellPresetId(value) ? value : DEFAULT_SHELL_PRESET;
+}
+
+function normalizePresetId(value: unknown, fallback: string): string {
+  return typeof value === 'string' && value.length > 0 ? value : fallback;
+}
+
+function normalizeThemePreference(value: unknown): WorkbenchColorSchemePreference {
+  if (value === 'system' || value === 'light' || value === 'dark') {
+    return value;
+  }
+
+  return DEFAULT_WORKBENCH_APPEARANCE.themePreference;
+}
+
+function getBrowserLocalStorage(): (WorkbenchStorageReader & WorkbenchStorageWriter) | undefined {
+  if (!isWorkbenchAppearancePersistenceAvailable()) {
+    return undefined;
+  }
+
+  return globalThis.localStorage;
+}

package/src/workbench-command-host.tsx

@@ -0,0 +1,243 @@
+import {
+  createCommandRegistryFromContributions,
+  type CommandRegistry,
+} from '@workbench-kit/platform';
+import {
+  WorkbenchCommandPalette,
+  WorkbenchShortcutCommandBridge,
+  createWorkbenchShellCommands,
+  type WorkbenchCommandDescriptor,
+  type WorkbenchCommandRunContext,
+  type WorkbenchShellCommandContext,
+} from '@workbench-kit/react/workbench';
+import { useCallback, useEffect, useMemo, useRef, useState } from 'react';
+
+import { useWorkbench } from './provider.js';
+import { registerWorkbenchShellCommandHandlers } from './workbench-shell-command-registration.js';
+import {
+  buildWorkbenchPaletteCommands,
+  collectExtensionCommandFeaturesById,
+  matchesWorkbenchCommandPaletteShortcut,
+  matchesWorkbenchQuickAccessShortcut,
+  resolveShellCommandActivities,
+} from './workbench-command-palette.js';
+import { resolveExtensionKeybindingCommand } from './workbench-keybinding-bridge.js';
+
+export interface WorkbenchCommandHostProps {
+  additionalCommands?: readonly WorkbenchCommandDescriptor[];
+  enableCommandPalette?: boolean;
+  enableExtensionKeybindings?: boolean;
+  enableShortcutBridge?: boolean;
+  onOpenSettings: () => void;
+  onRunCommand?: (
+    command: WorkbenchCommandDescriptor,
+    context: WorkbenchCommandRunContext,
+  ) => boolean | void;
+}
+
+export function WorkbenchCommandHost({
+  additionalCommands = [],
+  enableCommandPalette = true,
+  enableExtensionKeybindings = true,
+  enableShortcutBridge = true,
+  onOpenSettings,
+  onRunCommand,
+}: WorkbenchCommandHostProps) {
+  const { executeCommand, extensionRegistry, keybindingOverrides, layoutService } = useWorkbench();
+  const [paletteOpen, setPaletteOpen] = useState(false);
+  const [paletteQuery, setPaletteQuery] = useState('');
+  const [layout, setLayout] = useState(() => layoutService.getState());
+  const shellContextRef = useRef<WorkbenchShellCommandContext | undefined>(undefined);
+
+  useEffect(() => {
+    const disposable = layoutService.onDidChangeLayout(({ state }) => {
+      setLayout(state);
+    });
+
+    return () => {
+      disposable.dispose();
+    };
+  }, [layoutService]);
+
+  const shellActivities = useMemo(
+    () => resolveShellCommandActivities(extensionRegistry),
+    [extensionRegistry],
+  );
+
+  const shellCommandDefinitions = useMemo(
+    () =>
+      createWorkbenchShellCommands({
+        activities: shellActivities,
+        includeSettings: true,
+        includeSidebarToggle: true,
+      }),
+    [shellActivities],
+  );
+
+  const shellCommandRegistry = useMemo(
+    () =>
+      createCommandRegistryFromContributions<WorkbenchShellCommandContext>([
+        { commands: shellCommandDefinitions },
+      ]),
+    [shellCommandDefinitions],
+  );
+
+  const shellContext = useMemo<WorkbenchShellCommandContext>(
+    () => ({
+      isPrimarySidebarVisible: layout.sideBar.visible,
+      openSettings: onOpenSettings,
+      showActivity: (activityId) => {
+        layoutService.setActiveViewContainer(activityId);
+        layoutService.setSideBarVisible(true);
+      },
+      togglePrimarySidebar: () => {
+        layoutService.setSideBarVisible(!layout.sideBar.visible);
+      },
+    }),
+    [layout.sideBar.visible, layoutService, onOpenSettings],
+  );
+
+  shellContextRef.current = shellContext;
+
+  useEffect(() => {
+    const registration = registerWorkbenchShellCommandHandlers(
+      extensionRegistry.commands,
+      shellCommandDefinitions,
+      () => {
+        const context = shellContextRef.current;
+        if (!context) {
+          throw new Error('Workbench shell command context is not available.');
+        }
+
+        return context;
+      },
+    );
+
+    return () => {
+      registration.dispose();
+    };
+  }, [extensionRegistry.commands, shellCommandDefinitions]);
+
+  const paletteCommands = useMemo(
+    () =>
+      buildWorkbenchPaletteCommands({
+        additionalCommands,
+        extensionCommandFeaturesById: collectExtensionCommandFeaturesById(extensionRegistry),
+        extensionCommands: extensionRegistry.commands.getCommands(),
+        shellCommands: shellCommandDefinitions,
+        shellContext,
+      }),
+    [additionalCommands, extensionRegistry, shellContext],
+  );
+
+  const closePalette = useCallback(() => {
+    setPaletteOpen(false);
+  }, []);
+
+  const openPalette = useCallback((query = '') => {
+    setPaletteQuery(query);
+    setPaletteOpen(true);
+  }, []);
+
+  const runPaletteCommand = useCallback(
+    (command: WorkbenchCommandDescriptor, context: WorkbenchCommandRunContext) => {
+      const finish = () => {
+        closePalette();
+      };
+
+      if (onRunCommand?.(command, context)) {
+        finish();
+        return;
+      }
+
+      void executeCommand(command.id).finally(finish);
+    },
+    [closePalette, executeCommand, onRunCommand],
+  );
+
+  useEffect(() => {
+    if (!enableCommandPalette) {
+      return undefined;
+    }
+
+    const onKeyDown = (event: KeyboardEvent) => {
+      if (matchesWorkbenchCommandPaletteShortcut(event)) {
+        event.preventDefault();
+        openPalette('>');
+        return;
+      }
+
+      if (matchesWorkbenchQuickAccessShortcut(event)) {
+        event.preventDefault();
+        openPalette();
+      }
+    };
+
+    window.addEventListener('keydown', onKeyDown);
+    return () => {
+      window.removeEventListener('keydown', onKeyDown);
+    };
+  }, [enableCommandPalette, openPalette]);
+
+  useEffect(() => {
+    if (!enableExtensionKeybindings) {
+      return undefined;
+    }
+
+    const onKeyDown = (event: KeyboardEvent) => {
+      if (
+        matchesWorkbenchCommandPaletteShortcut(event) ||
+        matchesWorkbenchQuickAccessShortcut(event)
+      ) {
+        return;
+      }
+
+      const match = resolveExtensionKeybindingCommand(
+        extensionRegistry.keybindings,
+        event,
+        {},
+        keybindingOverrides,
+      );
+      if (!match) {
+        return;
+      }
+
+      event.preventDefault();
+      void executeCommand(match.command, ...(match.args ?? []));
+    };
+
+    window.addEventListener('keydown', onKeyDown);
+    return () => {
+      window.removeEventListener('keydown', onKeyDown);
+    };
+  }, [
+    enableExtensionKeybindings,
+    executeCommand,
+    extensionRegistry.keybindings,
+    keybindingOverrides,
+  ]);
+
+  return (
+    <>
+      {enableShortcutBridge ? (
+        <WorkbenchShortcutCommandBridge
+          context={shellContext}
+          preventDefault
+          registry={shellCommandRegistry as CommandRegistry<WorkbenchShellCommandContext>}
+        />
+      ) : null}
+      {enableCommandPalette ? (
+        <WorkbenchCommandPalette
+          commands={paletteCommands}
+          open={paletteOpen}
+          placeholder="Search commands"
+          query={paletteQuery}
+          title="Command Palette"
+          onClose={closePalette}
+          onQueryChange={setPaletteQuery}
+          onRunCommand={runPaletteCommand}
+        />
+      ) : null}
+    </>
+  );
+}