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

package/src/management/preference-settings-storage.ts

@@ -0,0 +1,50 @@
+import {
+  parseWorkbenchSettingsConfig,
+  type WorkbenchSettingsConfig,
+} from '@workbench-kit/workbench-config';
+import {
+  createBrowserWorkbenchStorage,
+  type WorkbenchStorageReader,
+  type WorkbenchStorageWriter,
+} from '@workbench-kit/workbench-core';
+
+export const DEFAULT_WORKBENCH_LOCAL_PREFERENCE_STORAGE_KEY =
+  'workbench-kit/.workbench/settings.local';
+
+export function isWorkbenchLocalPreferencePersistenceAvailable(): boolean {
+  return createBrowserWorkbenchStorage({ kind: 'local' }) !== undefined;
+}
+
+export function readPersistedLocalPreferences(
+  storageKey = DEFAULT_WORKBENCH_LOCAL_PREFERENCE_STORAGE_KEY,
+  storage?: WorkbenchStorageReader,
+): WorkbenchSettingsConfig {
+  const resolvedStorage = storage ?? createBrowserWorkbenchStorage({ kind: 'local' });
+  if (!resolvedStorage) {
+    return {};
+  }
+
+  try {
+    const raw = resolvedStorage.getItem(storageKey);
+    if (!raw) {
+      return {};
+    }
+
+    return parseWorkbenchSettingsConfig(JSON.parse(raw) as unknown);
+  } catch {
+    return {};
+  }
+}
+
+export function writePersistedLocalPreferences(
+  values: WorkbenchSettingsConfig,
+  storageKey = DEFAULT_WORKBENCH_LOCAL_PREFERENCE_STORAGE_KEY,
+  storage?: WorkbenchStorageWriter,
+): void {
+  const resolvedStorage = storage ?? createBrowserWorkbenchStorage({ kind: 'local' });
+  if (!resolvedStorage) {
+    return;
+  }
+
+  resolvedStorage.setItem(storageKey, JSON.stringify(values, null, 2));
+}

package/src/management/settings-ids.ts

@@ -0,0 +1,12 @@
+export const WORKBENCH_COMMANDS_SETTINGS_CATEGORY_ID =
+  'workbench-kit.shell.command-management' as const;
+export const WORKBENCH_KEYBINDINGS_SETTINGS_CATEGORY_ID =
+  'workbench-kit.shell.keybinding-management' as const;
+export const WORKBENCH_ACCOUNTS_SETTINGS_CATEGORY_ID =
+  'workbench-kit.shell.account-management' as const;
+export const WORKBENCH_EXTENSIONS_SETTINGS_CATEGORY_ID =
+  'workbench-kit.shell.extension-management' as const;
+export const MANAGE_COMMANDS_COMMAND_ID = 'workbench-kit.shell.commands.manage' as const;
+export const MANAGE_KEYBINDINGS_COMMAND_ID = 'workbench-kit.shell.keybindings.manage' as const;
+export const MANAGE_EXTENSIONS_COMMAND_ID = 'workbench-kit.shell.extensions.manage' as const;
+export const MANAGE_ACCOUNTS_COMMAND_ID = 'workbench-kit.builtin.accounts.manage' as const;

package/src/management/settings.tsx

@@ -0,0 +1,96 @@
+import { useCallback } from 'react';
+import {
+  AccountManagementPanel,
+  CommandManagementPanel,
+  ExtensionManagementPanel,
+  type AccountManagementEntry,
+} from '@workbench-kit/react/workbench/management';
+import {
+  isExtensionInstallTrusted,
+  type ExtensionCatalogTrustPolicy,
+} from '@workbench-kit/workbench-core';
+
+import { useCommandManagementModel } from './use-command-management.js';
+import { useExtensionManagementModel } from '../extensions/use-extension-management.js';
+import { WorkbenchKeybindingManagementSettings } from './keybinding-settings.js';
+
+export { WorkbenchKeybindingManagementSettings };
+
+export interface WorkbenchAccountManagementInput {
+  accounts: readonly AccountManagementEntry[];
+  activeAccountId?: string | undefined;
+  automationHint?: string | undefined;
+  emptyLabel?: string | undefined;
+  onSignOut?: ((accountId: string) => void) | undefined;
+  sessionLabel?: string | undefined;
+}
+
+/** Component-only module so Vite Fast Refresh can accept this boundary. */
+export function WorkbenchCommandManagementSettings() {
+  const { groups, lastRun, runCommand, totalCount } = useCommandManagementModel();
+
+  return (
+    <CommandManagementPanel
+      groups={groups}
+      lastRun={lastRun}
+      summaryLabel={`${totalCount} registered command${totalCount === 1 ? '' : 's'} · auto-updated from extensions`}
+      onRunCommand={runCommand}
+    />
+  );
+}
+
+export function WorkbenchExtensionManagementSettings({
+  catalogTrustPolicy,
+  catalogUrl,
+}: {
+  catalogTrustPolicy?: ExtensionCatalogTrustPolicy | undefined;
+  catalogUrl?: string | undefined;
+}) {
+  const {
+    browseEntries,
+    catalogError,
+    catalogLoading,
+    installCatalogEntry,
+    installedEntries,
+    installTrustRecords,
+    rememberInstallTrust,
+    toggleInstalledEntry,
+  } = useExtensionManagementModel({ catalogTrustPolicy, catalogUrl });
+
+  const isInstallTrusted = useCallback(
+    (entry: (typeof browseEntries)[number]) =>
+      isExtensionInstallTrusted(
+        entry.id,
+        entry.installPlan?.permissions ?? [],
+        installTrustRecords,
+      ),
+    [installTrustRecords],
+  );
+
+  return (
+    <ExtensionManagementPanel
+      browseEntries={browseEntries}
+      catalogError={catalogError}
+      catalogLoading={catalogLoading}
+      installedEntries={installedEntries}
+      isInstallTrusted={isInstallTrusted}
+      onInstall={installCatalogEntry}
+      onRememberInstallTrust={rememberInstallTrust}
+      onToggleEnabled={toggleInstalledEntry}
+    />
+  );
+}
+
+export function WorkbenchAccountManagementSettings({
+  accountManagement,
+}: {
+  accountManagement: WorkbenchAccountManagementInput;
+}) {
+  return (
+    <AccountManagementPanel
+      automationHint="Linked accounts are project integrations exposed by extensions or host providers. Your Workbench service profile is managed from the profile menu."
+      emptyLabel="No linked project accounts are configured."
+      {...accountManagement}
+    />
+  );
+}

package/src/management/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 '../shell/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/management/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 '../shell/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/shell/model.tsx

@@ -0,0 +1,149 @@
+import type { ReactNode } from 'react';
+import type { ActivityBarItem, StatusBarSectionModel } from '@workbench-kit/react/workbench/shell';
+import type {
+  ExtensionDependencyDiagnosticSeverity,
+  WorkbenchActivityContribution,
+  WorkbenchViewContainerContribution,
+  WorkbenchViewContribution,
+} from '@workbench-kit/workbench-core';
+
+export interface WorkbenchShellActivityItemsInput {
+  readonly activeViewContainerId?: string | undefined;
+  readonly activities: readonly WorkbenchActivityContribution[];
+  readonly viewContainers: readonly WorkbenchViewContainerContribution[];
+  readonly views: readonly WorkbenchViewContribution[];
+}
+
+export interface WorkbenchShellStatusSectionsInput {
+  readonly dependencyDiagnostics: readonly {
+    readonly severity: ExtensionDependencyDiagnosticSeverity;
+  }[];
+  readonly extensionCount: number;
+  readonly missingExtensionIds: readonly string[];
+  readonly profile?: { readonly displayName: string } | undefined;
+}
+
+export function createWorkbenchShellActivityItems({
+  activeViewContainerId,
+  activities,
+  viewContainers,
+  views,
+}: WorkbenchShellActivityItemsInput): ActivityBarItem[] {
+  if (activities.length > 0) {
+    return activities
+      .map<ActivityBarItem & { order?: number }>((activity) => ({
+        active: activity.viewContainerId === activeViewContainerId,
+        icon: resolveWorkbenchShellIcon(activity.icon),
+        id: activity.viewContainerId,
+        label: activity.title,
+        order: activity.order,
+      }))
+      .sort(
+        (left, right) =>
+          (left.order ?? Number.MAX_SAFE_INTEGER) - (right.order ?? Number.MAX_SAFE_INTEGER),
+      )
+      .map(({ order: _order, ...item }) => item);
+  }
+
+  const containersById = new Map(viewContainers.map((container) => [container.id, container]));
+  const firstViewsByContainerId = new Map<string, WorkbenchViewContribution>();
+  views.forEach((view) => {
+    if (!firstViewsByContainerId.has(view.containerId)) {
+      firstViewsByContainerId.set(view.containerId, view);
+    }
+  });
+
+  return [...firstViewsByContainerId.entries()].map<ActivityBarItem>(([containerId, firstView]) => {
+    const container = containersById.get(containerId);
+
+    return {
+      active: containerId === activeViewContainerId,
+      icon: resolveWorkbenchShellIcon(container?.icon ?? firstView.name ?? containerId),
+      id: containerId,
+      label: container?.title ?? firstView.name ?? containerId,
+    };
+  });
+}
+
+export function createDefaultWorkbenchStatusSections({
+  dependencyDiagnostics,
+  extensionCount,
+  missingExtensionIds,
+  profile,
+}: WorkbenchShellStatusSectionsInput): StatusBarSectionModel[] {
+  const errorDependencyDiagnostics = dependencyDiagnostics.filter(
+    (diagnostic) => diagnostic.severity === 'error',
+  );
+
+  return [
+    {
+      id: 'workbench',
+      items: [
+        {
+          id: 'extensions',
+          label: `extensions: ${extensionCount}`,
+        },
+        {
+          hidden: missingExtensionIds.length === 0,
+          id: 'missing-extensions',
+          label: `missing: ${missingExtensionIds.length}`,
+          status: 'waiting',
+        },
+        {
+          hidden: dependencyDiagnostics.length === 0,
+          id: 'extension-dependencies',
+          label: `deps: ${dependencyDiagnostics.length}`,
+          status: errorDependencyDiagnostics.length > 0 ? 'failed' : 'waiting',
+          title:
+            errorDependencyDiagnostics.length > 0
+              ? `${errorDependencyDiagnostics.length} extension dependency error${
+                  errorDependencyDiagnostics.length === 1 ? '' : 's'
+                }`
+              : `${dependencyDiagnostics.length} extension dependency warning${
+                  dependencyDiagnostics.length === 1 ? '' : 's'
+                }`,
+        },
+      ],
+    },
+    {
+      align: 'end',
+      id: 'workbench-meta',
+      items: [
+        ...(profile
+          ? [
+              {
+                icon: 'account' as const,
+                id: 'workbench.account',
+                label: profile.displayName,
+                title: 'Open profile',
+              },
+            ]
+          : []),
+      ],
+    },
+  ];
+}
+
+export function resolveWorkbenchShellIcon(icon: ReactNode | string | undefined): ReactNode {
+  if (icon === undefined) {
+    return <span aria-hidden="true">W</span>;
+  }
+
+  if (typeof icon !== 'string') {
+    return icon;
+  }
+
+  const className = getWorkbenchShellCodiconClassName(icon);
+  if (className) {
+    return <i aria-hidden="true" className={`codicon ${className}`} />;
+  }
+
+  return <span aria-hidden="true">W</span>;
+}
+
+export function getWorkbenchShellCodiconClassName(icon: string): string | undefined {
+  const token = icon.trim();
+  if (!token) return undefined;
+
+  return token.startsWith('codicon-') ? token : `codicon-${token}`;
+}