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

package/src/use-active-workspace-path.ts

@@ -0,0 +1,15 @@
+import { useMemo } from 'react';
+import { parseWorkspaceResourceUri } from '@workbench-kit/workspace';
+
+export function resolveActiveWorkspacePath(resourceUri: string | undefined): string | undefined {
+  if (!resourceUri) {
+    return undefined;
+  }
+
+  const resource = parseWorkspaceResourceUri(resourceUri);
+  return resource?.kind === 'file' ? resource.path : undefined;
+}
+
+export function useActiveWorkspacePath(resourceUri: string | undefined): string | undefined {
+  return useMemo(() => resolveActiveWorkspacePath(resourceUri), [resourceUri]);
+}

package/src/use-command-management.ts

@@ -0,0 +1,191 @@
+import { useEffect, useMemo, useReducer, useState } from 'react';
+import type { ExtensionCommandFeatureSpec, ExtensionRegistry } from '@workbench-kit/workbench-core';
+import {
+  buildCommandManagementGroups,
+  countCommandManagementEntries,
+  type CommandManagementRunState,
+} from '@workbench-kit/react/workbench/management';
+import { createWorkbenchShellCommands } from '@workbench-kit/react/workbench';
+
+import { useWorkbench } from './provider.js';
+import {
+  collectExtensionCommandFeaturesById,
+  resolveShellCommandActivities,
+} from './workbench-command-palette.js';
+
+export function useCommandManagementModel() {
+  const { executeCommand, extensionRegistry } = useWorkbench();
+  const [lastRun, setLastRun] = useState<CommandManagementRunState | undefined>();
+  const [refreshToken, refreshRegistry] = useReducer((count: number) => count + 1, 0);
+
+  useEffect(() => {
+    const commandDisposable = extensionRegistry.commands.onDidRegisterCommand(() => {
+      refreshRegistry();
+    });
+
+    return () => {
+      commandDisposable.dispose();
+    };
+  }, [extensionRegistry]);
+
+  const groups = useMemo(
+    () => buildCommandManagementModelGroups(extensionRegistry, refreshToken),
+    [extensionRegistry, refreshToken],
+  );
+
+  const totalCount = countCommandManagementEntries(groups);
+
+  const runCommand = async (commandId: string) => {
+    setLastRun({
+      commandId,
+      status: 'running',
+      timestamp: Date.now(),
+    });
+
+    try {
+      await executeCommand(commandId);
+      setLastRun({
+        commandId,
+        status: 'success',
+        timestamp: Date.now(),
+      });
+    } catch (error) {
+      setLastRun({
+        commandId,
+        message: error instanceof Error ? error.message : 'Command failed.',
+        status: 'error',
+        timestamp: Date.now(),
+      });
+    }
+  };
+
+  return {
+    groups,
+    lastRun,
+    refreshRegistry,
+    runCommand,
+    totalCount,
+  };
+}
+
+export function buildCommandManagementModelGroups(
+  extensionRegistry: ExtensionRegistry,
+  _refreshToken = 0,
+) {
+  const shellCommands = createWorkbenchShellCommands({
+    activities: resolveShellCommandActivities(extensionRegistry),
+    includeSettings: true,
+    includeSidebarToggle: true,
+  });
+  const shellCommandIds = new Set(shellCommands.map((command) => command.id));
+  const commandFeaturesById = collectExtensionCommandFeaturesById(extensionRegistry);
+
+  return buildCommandManagementGroups({
+    extensionCommands: collectExtensionCommandEntries(
+      extensionRegistry,
+      shellCommandIds,
+      commandFeaturesById,
+    ),
+    keybindingsByCommandId: collectKeybindingsByCommandId(extensionRegistry),
+    menuSurfacesByCommandId: collectMenuSurfacesByCommandId(extensionRegistry),
+    shellCommands: shellCommands.map((command) => ({
+      category: command.category ?? 'Workbench',
+      handler:
+        extensionRegistry.commands.getCommand(command.id)?.handler ??
+        command.handler ??
+        command.run,
+      id: command.id,
+      label: typeof command.label === 'string' ? command.label : (command.title ?? command.id),
+    })),
+  });
+}
+
+function collectExtensionCommandEntries(
+  extensionRegistry: ExtensionRegistry,
+  skippedCommandIds: ReadonlySet<string>,
+  commandFeaturesById: ReadonlyMap<string, ExtensionCommandFeatureSpec>,
+) {
+  const entries: Array<{
+    category?: string | undefined;
+    description?: string | undefined;
+    extensionId: string;
+    extensionLabel: string;
+    handler?: unknown;
+    id: string;
+    label: string;
+  }> = [];
+  const seen = new Set<string>();
+
+  for (const feature of extensionRegistry.getFeatureSpecs()) {
+    const extensionLabel = feature.displayName;
+
+    for (const contribution of feature.commands) {
+      const command = extensionRegistry.commands.getCommand(contribution.id);
+      if (!command || seen.has(contribution.id) || skippedCommandIds.has(contribution.id)) {
+        continue;
+      }
+
+      seen.add(contribution.id);
+      entries.push({
+        category: command.category ?? contribution.category,
+        description: contribution.description,
+        extensionId: feature.id,
+        extensionLabel,
+        handler: command.handler,
+        id: command.id,
+        label: command.title ?? contribution.title ?? command.id,
+      });
+    }
+  }
+
+  for (const command of extensionRegistry.commands.getCommands()) {
+    if (seen.has(command.id) || skippedCommandIds.has(command.id)) {
+      continue;
+    }
+
+    entries.push({
+      category: command.category,
+      description: commandFeaturesById.get(command.id)?.description,
+      extensionId: 'runtime',
+      extensionLabel: 'Runtime',
+      handler: command.handler,
+      id: command.id,
+      label: command.title ?? command.id,
+    });
+  }
+
+  return entries;
+}
+
+function collectKeybindingsByCommandId(extensionRegistry: ExtensionRegistry) {
+  const keybindingsByCommandId: Record<string, string> = {};
+
+  for (const keybinding of extensionRegistry.keybindings.getKeybindings()) {
+    if (!keybindingsByCommandId[keybinding.command]) {
+      keybindingsByCommandId[keybinding.command] = keybinding.key;
+    }
+  }
+
+  return keybindingsByCommandId;
+}
+
+function collectMenuSurfacesByCommandId(extensionRegistry: ExtensionRegistry) {
+  const menuSurfacesByCommandId = new Map<string, Set<string>>();
+
+  for (const menuItem of extensionRegistry.menus.getMenuItems()) {
+    if (!menuItem.menu || !menuItem.command) {
+      continue;
+    }
+
+    const surfaces = menuSurfacesByCommandId.get(menuItem.command) ?? new Set<string>();
+    surfaces.add(menuItem.menu);
+    menuSurfacesByCommandId.set(menuItem.command, surfaces);
+  }
+
+  return Object.fromEntries(
+    [...menuSurfacesByCommandId.entries()].map(([commandId, surfaces]) => [
+      commandId,
+      [...surfaces].sort(),
+    ]),
+  );
+}

package/src/use-context-key-revision.ts

@@ -0,0 +1,18 @@
+import { useEffect, useState } from 'react';
+import type { ContextKeyService } from '@workbench-kit/platform';
+
+export function useContextKeyRevision(contextKeyService: ContextKeyService): number {
+  const [revision, setRevision] = useState(0);
+
+  useEffect(() => {
+    const disposable = contextKeyService.onDidChangeContext(() => {
+      setRevision((current) => current + 1);
+    });
+
+    return () => {
+      disposable.dispose();
+    };
+  }, [contextKeyService]);
+
+  return revision;
+}

package/src/use-editor.ts

@@ -0,0 +1,107 @@
+import { useEffect, useMemo, useReducer } from 'react';
+import type { EditorHost, EditorService, EditorTabState } from '@workbench-kit/workbench-core';
+
+import { useWorkbench } from './provider.js';
+import type { EditorDocumentViewProvider } from './editor-view-providers.js';
+
+export function useEditorService(): EditorService {
+  return useWorkbench().editorService;
+}
+
+export function useEditorState(): ReturnType<EditorService['getState']> {
+  const editorService = useEditorService();
+  const forceRender = useForceRender();
+
+  useEffect(() => {
+    const disposable = editorService.onDidChangeEditors(forceRender);
+    return () => {
+      disposable.dispose();
+    };
+  }, [editorService, forceRender]);
+
+  return editorService.getState();
+}
+
+export function useActiveEditorTab(): EditorTabState | undefined {
+  const editorService = useEditorService();
+  const forceRender = useForceRender();
+
+  useEffect(() => {
+    const disposable = editorService.onDidChangeEditors(forceRender);
+    return () => {
+      disposable.dispose();
+    };
+  }, [editorService, forceRender]);
+
+  return editorService.getActiveTab();
+}
+
+export function useEditorHost(tabId?: string): EditorHost | undefined {
+  const editorService = useEditorService();
+  const { waitForExtensionStartup } = useWorkbench();
+  const editorState = useEditorState();
+  const forceRender = useForceRender();
+  const activeGroup = editorState.groups.find((group) => group.id === editorState.activeGroupId);
+  const resolvedTabId = tabId ?? activeGroup?.activeTabId;
+  const resolvedTab = resolvedTabId
+    ? editorState.groups.flatMap((group) => group.tabs).find((tab) => tab.id === resolvedTabId)
+    : undefined;
+
+  useEffect(() => {
+    const disposable = editorService.onDidChangeEditors(forceRender);
+    return () => {
+      disposable.dispose();
+    };
+  }, [editorService, forceRender]);
+
+  useEffect(() => {
+    let cancelled = false;
+
+    void waitForExtensionStartup().then(() => {
+      if (!cancelled) {
+        forceRender();
+      }
+    });
+
+    return () => {
+      cancelled = true;
+    };
+  }, [forceRender, waitForExtensionStartup]);
+
+  return useMemo(() => {
+    if (!resolvedTabId) {
+      return undefined;
+    }
+
+    return editorService.createEditorHost(resolvedTabId);
+  }, [editorService, resolvedTab?.resourceMissing, resolvedTab?.resourceUri, resolvedTabId]);
+}
+
+export function useEditorDocumentViewProviders(
+  localProviders?: readonly EditorDocumentViewProvider[] | undefined,
+): readonly EditorDocumentViewProvider[] {
+  const { editorDocumentViewProviders } = useWorkbench();
+  const forceRender = useForceRender();
+
+  useEffect(() => {
+    const disposable = editorDocumentViewProviders.onDidChangeProviders(forceRender);
+    return () => {
+      disposable.dispose();
+    };
+  }, [editorDocumentViewProviders, forceRender]);
+
+  const registryProviders = editorDocumentViewProviders.getProviders();
+
+  return useMemo(
+    () =>
+      localProviders && localProviders.length > 0
+        ? [...localProviders, ...registryProviders]
+        : registryProviders,
+    [localProviders, registryProviders],
+  );
+}
+
+function useForceRender() {
+  const [, forceRender] = useReducer((count: number) => count + 1, 0);
+  return forceRender;
+}

package/src/use-extension-management.ts

@@ -0,0 +1,193 @@
+import { useCallback, useEffect, useMemo, useState } from 'react';
+import {
+  DEFAULT_INSTALLED_EXTENSIONS_STORAGE_KEY,
+  applyExtensionInstallPlanToRecords,
+  loadInstalledExtensions,
+  parseExtensionCatalog,
+  saveInstalledExtensions,
+  toggleInstalledExtensionEnabled,
+  type ExtensionCatalogEntry,
+  type InstalledExtensionRecord,
+} from '@workbench-kit/workbench-core';
+import type {
+  ExtensionCatalogBrowseEntry,
+  ExtensionManagementEntry,
+  ExtensionManagementPendingAction,
+} from '@workbench-kit/react/workbench/management';
+
+import {
+  createCatalogEntryInstallPlan,
+  createExtensionCatalogBrowseEntries,
+  createExtensionInstallPlanningContext,
+  createExtensionManagementEntries,
+} from './extension-management-model.js';
+import { useWorkbench, type WorkbenchStorageAdapter } from './provider.js';
+
+export interface UseExtensionManagementModelOptions {
+  catalogUrl?: string | undefined;
+  installedExtensionsStorage?: WorkbenchStorageAdapter | undefined;
+  installedExtensionsStorageKey?: string | undefined;
+}
+
+export function useExtensionManagementModel({
+  catalogUrl = '/extension-catalog.json',
+  installedExtensionsStorage,
+  installedExtensionsStorageKey,
+}: UseExtensionManagementModelOptions = {}) {
+  const workbench = useWorkbench();
+  const { extensionRegistry } = workbench;
+  const resolvedInstalledExtensionsStorage =
+    installedExtensionsStorage ?? workbench.installedExtensionsStorage;
+  const resolvedInstalledExtensionsStorageKey =
+    installedExtensionsStorageKey ??
+    workbench.installedExtensionsStorageKey ??
+    DEFAULT_INSTALLED_EXTENSIONS_STORAGE_KEY;
+  const [catalogEntries, setCatalogEntries] = useState<readonly ExtensionCatalogEntry[]>([]);
+  const [catalogLoading, setCatalogLoading] = useState(Boolean(catalogUrl));
+  const [catalogError, setCatalogError] = useState<string | undefined>();
+  const [pendingAction, setPendingAction] = useState<
+    ExtensionManagementPendingAction | undefined
+  >();
+  const [installedRecords, setInstalledRecords] = useState<readonly InstalledExtensionRecord[]>(
+    () =>
+      loadInstalledExtensions(
+        resolvedInstalledExtensionsStorageKey,
+        resolvedInstalledExtensionsStorage,
+      ),
+  );
+
+  useEffect(() => {
+    setInstalledRecords(
+      loadInstalledExtensions(
+        resolvedInstalledExtensionsStorageKey,
+        resolvedInstalledExtensionsStorage,
+      ),
+    );
+  }, [resolvedInstalledExtensionsStorage, resolvedInstalledExtensionsStorageKey]);
+
+  useEffect(() => {
+    if (!catalogUrl) {
+      setCatalogEntries([]);
+      setCatalogLoading(false);
+      setCatalogError(undefined);
+      return;
+    }
+
+    let cancelled = false;
+    setCatalogLoading(true);
+    setCatalogError(undefined);
+
+    void fetch(catalogUrl)
+      .then(async (response) => {
+        if (!response.ok) {
+          throw new Error(`Catalog request failed with status ${response.status}.`);
+        }
+
+        const catalog = parseExtensionCatalog(await response.json());
+        if (!cancelled) {
+          setCatalogEntries(catalog.entries);
+        }
+      })
+      .catch((error: unknown) => {
+        if (!cancelled) {
+          setCatalogEntries([]);
+          setCatalogError(
+            error instanceof Error ? error.message : 'Failed to load extension catalog.',
+          );
+        }
+      })
+      .finally(() => {
+        if (!cancelled) {
+          setCatalogLoading(false);
+        }
+      });
+
+    return () => {
+      cancelled = true;
+    };
+  }, [catalogUrl]);
+
+  const installedEntries = useMemo<readonly ExtensionManagementEntry[]>(() => {
+    return createExtensionManagementEntries({ extensionRegistry, installedRecords });
+  }, [extensionRegistry, installedRecords]);
+
+  const browseEntries = useMemo<readonly ExtensionCatalogBrowseEntry[]>(() => {
+    return createExtensionCatalogBrowseEntries({
+      catalogEntries,
+      extensionRegistry,
+      installedRecords,
+    });
+  }, [catalogEntries, extensionRegistry, installedRecords]);
+
+  const installCatalogEntry = useCallback(
+    (entry: ExtensionCatalogBrowseEntry) => {
+      const installContext = createExtensionInstallPlanningContext({
+        catalogEntries,
+        extensionRegistry,
+        installedRecords,
+      });
+      const plan = createCatalogEntryInstallPlan(entry, installContext);
+      if (!plan || plan.blocked) {
+        return;
+      }
+
+      const next = applyExtensionInstallPlanToRecords({
+        currentRecords: installedRecords,
+        installSources: installContext.installSources,
+        plan,
+      });
+      saveInstalledExtensions(
+        next,
+        resolvedInstalledExtensionsStorageKey,
+        resolvedInstalledExtensionsStorage,
+      );
+      setInstalledRecords(next);
+      setPendingAction({ entryId: entry.id, kind: 'install' });
+      if (typeof window !== 'undefined') {
+        window.requestAnimationFrame(() => {
+          window.location.reload();
+        });
+      }
+    },
+    [
+      catalogEntries,
+      extensionRegistry,
+      installedRecords,
+      resolvedInstalledExtensionsStorage,
+      resolvedInstalledExtensionsStorageKey,
+    ],
+  );
+
+  const toggleInstalledEntry = useCallback(
+    (entry: ExtensionManagementEntry, enabled: boolean) => {
+      if (entry.source === 'bundled' && entry.id.startsWith('workbench-kit.builtin.')) {
+        return;
+      }
+
+      const next = toggleInstalledExtensionEnabled(
+        entry.id,
+        enabled,
+        resolvedInstalledExtensionsStorageKey,
+        resolvedInstalledExtensionsStorage,
+      );
+      setInstalledRecords(next);
+      setPendingAction({ entryId: entry.id, kind: 'toggle' });
+      if (typeof window !== 'undefined') {
+        window.requestAnimationFrame(() => {
+          window.location.reload();
+        });
+      }
+    },
+    [resolvedInstalledExtensionsStorage, resolvedInstalledExtensionsStorageKey],
+  );
+
+  return {
+    browseEntries,
+    catalogError,
+    catalogLoading,
+    installCatalogEntry,
+    installedEntries,
+    pendingAction,
+    toggleInstalledEntry,
+  };
+}

package/src/use-keybinding-management.ts

@@ -0,0 +1,130 @@
+import { useMemo } from 'react';
+import {
+  buildKeybindingManagementEntries,
+  type KeybindingDefinition,
+} from '@workbench-kit/platform';
+import { createWorkbenchShellCommands } from '@workbench-kit/react/workbench';
+import type { ExtensionRegistry } from '@workbench-kit/workbench-core';
+
+import { useWorkbench } from './provider.js';
+import { resolveShellCommandActivities } from './workbench-command-palette.js';
+
+export function useKeybindingManagementModel() {
+  const {
+    extensionRegistry,
+    keybindingOverrides,
+    resetCommandKeybindingOverride,
+    setCommandKeybindingOverride,
+  } = useWorkbench();
+
+  const defaults = useMemo(
+    () => extensionRegistry.keybindings.getKeybindings(),
+    [extensionRegistry, keybindingOverrides.length],
+  );
+
+  const entries = useMemo(
+    () =>
+      buildKeybindingManagementEntries({
+        commands: collectKeybindingManagementCommands(extensionRegistry),
+        defaults,
+        overrides: keybindingOverrides,
+      }),
+    [defaults, extensionRegistry, keybindingOverrides],
+  );
+
+  const overrideCount = keybindingOverrides.length;
+
+  const setKeybinding = (commandId: string, key: string | undefined) => {
+    const defaultKey = defaults.find((binding) => binding.command === commandId)?.key;
+    if (!key || key === defaultKey) {
+      resetCommandKeybindingOverride(commandId);
+      return;
+    }
+
+    setCommandKeybindingOverride(commandId, key);
+  };
+
+  return {
+    entries,
+    overrideCount,
+    resetKeybinding: resetCommandKeybindingOverride,
+    setKeybinding,
+  };
+}
+
+function collectKeybindingManagementCommands(extensionRegistry: ExtensionRegistry) {
+  const commands: Array<{
+    category?: string | undefined;
+    id: string;
+    label: string;
+    sourceLabel?: string | undefined;
+  }> = [];
+  const seen = new Set<string>();
+  const shellCommands = createWorkbenchShellCommands({
+    activities: resolveShellCommandActivities(extensionRegistry),
+    includeSettings: true,
+    includeSidebarToggle: true,
+  });
+  const shellCommandIds = new Set(shellCommands.map((command) => command.id));
+
+  for (const extension of extensionRegistry.getExtensions()) {
+    const extensionLabel = extension.manifest.displayName ?? extension.manifest.id;
+
+    for (const contribution of extension.manifest.contributes?.commands ?? []) {
+      const command = extensionRegistry.commands.getCommand(contribution.command);
+      if (!command || seen.has(contribution.command) || shellCommandIds.has(contribution.command)) {
+        continue;
+      }
+
+      seen.add(contribution.command);
+      commands.push({
+        category: command.category ?? contribution.category,
+        id: command.id,
+        label: command.title ?? contribution.title ?? command.id,
+        sourceLabel: extensionLabel,
+      });
+    }
+  }
+
+  for (const command of extensionRegistry.commands.getCommands()) {
+    if (seen.has(command.id) || shellCommandIds.has(command.id)) {
+      continue;
+    }
+
+    commands.push({
+      category: command.category,
+      id: command.id,
+      label: command.title ?? command.id,
+      sourceLabel: 'Runtime',
+    });
+  }
+
+  for (const command of shellCommands) {
+    if (seen.has(command.id)) {
+      continue;
+    }
+
+    const label =
+      typeof command.label === 'function'
+        ? command.id
+        : typeof command.label === 'string'
+          ? command.label
+          : command.id;
+
+    seen.add(command.id);
+    commands.push({
+      category: 'Workbench',
+      id: command.id,
+      label,
+      sourceLabel: 'Workbench Shell',
+    });
+  }
+
+  return commands;
+}
+
+export function toKeybindingOverrideDefinitions(
+  overrides: readonly KeybindingDefinition[],
+): KeybindingDefinition[] {
+  return overrides.map((binding) => ({ ...binding }));
+}

package/src/use-persisted-workbench-appearance.ts

@@ -0,0 +1,33 @@
+import { useEffect, useState } from 'react';
+import type { WorkbenchStorageAdapter } from '@workbench-kit/workbench-core';
+
+import {
+  readPersistedWorkbenchAppearance,
+  writePersistedWorkbenchAppearance,
+  type WorkbenchAppearanceSettings,
+} from './workbench-appearance-storage.js';
+
+export interface UsePersistedWorkbenchAppearanceOptions {
+  persist?: boolean | undefined;
+  storage?: WorkbenchStorageAdapter | undefined;
+  storageKey?: string | undefined;
+}
+
+export function usePersistedWorkbenchAppearance(
+  options: UsePersistedWorkbenchAppearanceOptions = {},
+): [WorkbenchAppearanceSettings, (settings: WorkbenchAppearanceSettings) => void] {
+  const { persist = true, storage, storageKey } = options;
+  const [appearance, setAppearance] = useState(() =>
+    readPersistedWorkbenchAppearance(storageKey, storage),
+  );
+
+  useEffect(() => {
+    if (!persist) {
+      return;
+    }
+
+    writePersistedWorkbenchAppearance(appearance, storageKey, storage);
+  }, [appearance, persist, storage, storageKey]);
+
+  return [appearance, setAppearance];
+}