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

package/src/workbench-command-palette.ts

@@ -0,0 +1,208 @@
+import type { CommandDefinition } from '@workbench-kit/platform';
+import type { WorkbenchCommandDescriptor } from '@workbench-kit/react/workbench';
+import type {
+  WorkbenchShellCommandActivity,
+  WorkbenchShellCommandContext,
+} from '@workbench-kit/react/workbench';
+import type { ExtensionCommandFeatureSpec, ExtensionRegistry } from '@workbench-kit/workbench-core';
+
+export const WORKBENCH_COMMAND_PALETTE_SHORTCUT = 'Ctrl+Shift+P';
+export const WORKBENCH_QUICK_ACCESS_SHORTCUT = 'Ctrl+P';
+
+type ExtensionCommand = ReturnType<ExtensionRegistry['commands']['getCommands']>[number];
+
+function resolveCommandValue<TContext, TValue>(
+  value: CommandDefinition<TContext>[keyof CommandDefinition<TContext>],
+  context: TContext,
+): TValue | undefined {
+  if (value === undefined) {
+    return undefined;
+  }
+
+  if (typeof value === 'function') {
+    return (value as (ctx: TContext) => TValue)(context);
+  }
+
+  return value as TValue;
+}
+
+export function formatWorkbenchCommandIcon(icon: string | undefined): string | undefined {
+  if (!icon) {
+    return undefined;
+  }
+
+  return icon.startsWith('codicon-') ? icon : `codicon-${icon}`;
+}
+
+export function resolveExtensionCommandIcon(icon: ExtensionCommand['icon']): string | undefined {
+  if (typeof icon === 'function') {
+    return formatWorkbenchCommandIcon(icon(undefined as void));
+  }
+
+  return formatWorkbenchCommandIcon(icon);
+}
+
+export function resolveShellCommandActivities(
+  extensionRegistry: ExtensionRegistry,
+): WorkbenchShellCommandActivity[] {
+  const activities = extensionRegistry.activities.getActivities();
+  if (activities.length > 0) {
+    return activities
+      .map((activity) => ({
+        icon: formatWorkbenchCommandIcon(activity.icon),
+        id: activity.viewContainerId,
+        label: `Show ${activity.title}`,
+      }))
+      .sort((left, right) => left.label.localeCompare(right.label));
+  }
+
+  const viewContainerIds = new Set(
+    extensionRegistry.views.getViews().map((view) => view.containerId),
+  );
+
+  return [...viewContainerIds].map((containerId) => {
+    const container = extensionRegistry.views.getViewContainer(containerId);
+    const firstView = extensionRegistry.views.getViews(containerId)[0];
+
+    return {
+      icon: formatWorkbenchCommandIcon(container?.icon ?? 'files'),
+      id: containerId,
+      label: `Show ${container?.title ?? firstView?.name ?? containerId}`,
+    };
+  });
+}
+
+export function shellCommandDefinitionToDescriptor<TContext>(
+  command: CommandDefinition<TContext>,
+  context: TContext,
+): WorkbenchCommandDescriptor {
+  const label =
+    resolveCommandValue<TContext, string>(command.label, context) ?? command.title ?? command.id;
+  const disabled = command.isEnabled ? !command.isEnabled(context) : false;
+
+  return {
+    category: command.category ?? 'View',
+    icon: formatWorkbenchCommandIcon(resolveCommandValue(command.icon, context)),
+    id: command.id,
+    label,
+    shortcut: resolveCommandValue(command.shortcut, context),
+    disabled,
+  };
+}
+
+export function extensionCommandToDescriptor(
+  command: ExtensionCommand,
+  feature?: ExtensionCommandFeatureSpec | undefined,
+): WorkbenchCommandDescriptor {
+  const metadata = {
+    argsSchema: feature?.argsSchema,
+    chat: feature?.chat,
+    requiresApproval: feature?.requiresApproval,
+  };
+
+  return {
+    category: command.category ?? feature?.category,
+    danger: feature?.danger,
+    description: feature?.description,
+    icon: resolveExtensionCommandIcon(command.icon),
+    id: command.id,
+    keywords: feature
+      ? [feature.command, feature.title].filter((value) => value !== command.id)
+      : undefined,
+    label: command.title ?? feature?.title ?? command.id,
+    metadata:
+      metadata.argsSchema || metadata.chat || metadata.requiresApproval !== undefined
+        ? metadata
+        : undefined,
+  };
+}
+
+export function collectExtensionCommandFeaturesById(
+  extensionRegistry: ExtensionRegistry,
+): ReadonlyMap<string, ExtensionCommandFeatureSpec> {
+  return new Map(
+    extensionRegistry
+      .getFeatureSpecs()
+      .flatMap((feature) => feature.commands.map((command) => [command.id, command] as const)),
+  );
+}
+
+export function mergeWorkbenchCommandDescriptors(
+  ...groups: readonly WorkbenchCommandDescriptor[][]
+): WorkbenchCommandDescriptor[] {
+  const seen = new Set<string>();
+
+  return groups.flat().filter((command) => {
+    if (seen.has(command.id)) {
+      return false;
+    }
+
+    seen.add(command.id);
+    return true;
+  });
+}
+
+export function buildWorkbenchPaletteCommands({
+  additionalCommands = [],
+  extensionCommandFeaturesById,
+  extensionCommands,
+  shellCommands,
+  shellContext,
+}: {
+  additionalCommands?: readonly WorkbenchCommandDescriptor[];
+  extensionCommandFeaturesById?: ReadonlyMap<string, ExtensionCommandFeatureSpec> | undefined;
+  extensionCommands: readonly ExtensionCommand[];
+  shellCommands: readonly CommandDefinition<WorkbenchShellCommandContext>[];
+  shellContext: WorkbenchShellCommandContext;
+}): WorkbenchCommandDescriptor[] {
+  const shellDescriptors = shellCommands.map((command) =>
+    shellCommandDefinitionToDescriptor(command, shellContext),
+  );
+  const contributedDescriptors = extensionCommands.map((command) =>
+    extensionCommandToDescriptor(command, extensionCommandFeaturesById?.get(command.id)),
+  );
+
+  return mergeWorkbenchCommandDescriptors(shellDescriptors, contributedDescriptors, [
+    ...additionalCommands,
+  ]);
+}
+
+export function matchesWorkbenchCommandPaletteShortcut(
+  event: Pick<KeyboardEvent, 'altKey' | 'ctrlKey' | 'key' | 'metaKey' | 'shiftKey'>,
+) {
+  const key = event.key.toLowerCase();
+
+  if (key !== 'p') {
+    return false;
+  }
+
+  if (!(event.ctrlKey || event.metaKey) || !event.shiftKey || event.altKey) {
+    return false;
+  }
+
+  return true;
+}
+
+export function matchesWorkbenchQuickAccessShortcut(
+  event: Pick<KeyboardEvent, 'altKey' | 'ctrlKey' | 'key' | 'metaKey' | 'shiftKey'>,
+) {
+  const key = event.key.toLowerCase();
+
+  if (key !== 'p') {
+    return false;
+  }
+
+  if (!(event.ctrlKey || event.metaKey) || event.shiftKey || event.altKey) {
+    return false;
+  }
+
+  return true;
+}
+
+export function getWorkbenchCommandPaletteShortcutLabel() {
+  return WORKBENCH_COMMAND_PALETTE_SHORTCUT;
+}
+
+export function getWorkbenchQuickAccessShortcutLabel() {
+  return WORKBENCH_QUICK_ACCESS_SHORTCUT;
+}

package/src/workbench-keybinding-bridge.ts

@@ -0,0 +1,54 @@
+import type { ContextKeyValue, KeybindingRegistry } from '@workbench-kit/platform';
+import { resolveKeybindingWithOverrides, type KeybindingDefinition } from '@workbench-kit/platform';
+
+function normalizeKeyToken(token: string): string {
+  const key = token.trim().toLowerCase();
+  if (key === 'del') return 'delete';
+  if (key === 'esc') return 'escape';
+  if (key === 'return') return 'enter';
+  if (key === 'spacebar' || key === 'space') return 'space';
+  return key.length === 1 ? key : key;
+}
+
+export function normalizeKeybindingKeyFromEvent(
+  event: Pick<KeyboardEvent, 'altKey' | 'ctrlKey' | 'key' | 'metaKey' | 'shiftKey'>,
+): string {
+  const parts: string[] = [];
+
+  if (event.ctrlKey || event.metaKey) {
+    parts.push('ctrl');
+  }
+  if (event.altKey) {
+    parts.push('alt');
+  }
+  if (event.shiftKey) {
+    parts.push('shift');
+  }
+
+  parts.push(normalizeKeyToken(event.key));
+  return parts.join('+');
+}
+
+export function resolveExtensionKeybindingCommand(
+  registry: KeybindingRegistry,
+  event: Pick<KeyboardEvent, 'altKey' | 'ctrlKey' | 'key' | 'metaKey' | 'shiftKey'>,
+  contextKeys: Readonly<Record<string, ContextKeyValue>> = {},
+  overrides: readonly KeybindingDefinition[] = [],
+) {
+  const key = normalizeKeybindingKeyFromEvent(event);
+
+  if (overrides.length > 0) {
+    const match = resolveKeybindingWithOverrides(
+      registry.getKeybindings(),
+      overrides,
+      key,
+      contextKeys,
+    );
+    if (match) {
+      return match;
+    }
+  }
+
+  const matches = registry.resolveKeybindings(key, contextKeys);
+  return matches[0];
+}

package/src/workbench-layout-storage.ts

@@ -0,0 +1,145 @@
+import {
+  parseWorkbenchLayoutConfig,
+  type WorkbenchLayoutConfig,
+} from '@workbench-kit/workbench-config';
+import {
+  createWorkbenchLayoutState,
+  type WorkbenchStorageReader,
+  type WorkbenchStorageWriter,
+  type WorkbenchLayoutState,
+  type WorkbenchLayoutStateInput,
+} from '@workbench-kit/workbench-core';
+
+export const DEFAULT_WORKBENCH_LAYOUT_STORAGE_KEY = 'workbench-kit/.workbench/layout';
+
+export function isWorkbenchLayoutPersistenceAvailable(): boolean {
+  try {
+    return typeof globalThis.localStorage !== 'undefined';
+  } catch {
+    return false;
+  }
+}
+
+export function workbenchLayoutConfigToInput(
+  config: WorkbenchLayoutConfig,
+): WorkbenchLayoutStateInput {
+  return {
+    activityBar: {
+      hiddenItemIds: config.activityBar.hiddenItemIds,
+      itemOrder: config.activityBar.itemOrder,
+      visible: config.activityBar.visible,
+    },
+    auxiliaryBar: {
+      visible: config.auxiliaryBar.visible,
+    },
+    panel: {
+      visible: config.panel.visible,
+    },
+    sideBar: {
+      activeViewContainer: config.sideBar.activeViewContainer,
+      sizePercent: config.sideBar.sizePercent,
+      visible: config.sideBar.visible,
+    },
+  };
+}
+
+export function workbenchLayoutStateToStorageValue(
+  state: WorkbenchLayoutState,
+): WorkbenchLayoutConfig {
+  return {
+    activityBar: {
+      visible: state.activityBar.visible,
+      ...(state.activityBar.hiddenItemIds?.length
+        ? { hiddenItemIds: [...state.activityBar.hiddenItemIds] }
+        : {}),
+      ...(state.activityBar.itemOrder?.length
+        ? { itemOrder: [...state.activityBar.itemOrder] }
+        : {}),
+    },
+    auxiliaryBar: {
+      visible: state.auxiliaryBar.visible,
+    },
+    panel: {
+      visible: state.panel.visible,
+    },
+    sideBar: {
+      visible: state.sideBar.visible,
+      ...(state.sideBar.activeViewContainer
+        ? { activeViewContainer: state.sideBar.activeViewContainer }
+        : {}),
+      ...(state.sideBar.sizePercent !== undefined
+        ? { sizePercent: state.sideBar.sizePercent }
+        : {}),
+    },
+  };
+}
+
+export function readPersistedWorkbenchLayout(
+  storageKey = DEFAULT_WORKBENCH_LAYOUT_STORAGE_KEY,
+  storage?: WorkbenchStorageReader,
+): WorkbenchLayoutStateInput | undefined {
+  const resolvedStorage = storage ?? getBrowserLocalStorage();
+  if (!resolvedStorage) return undefined;
+
+  try {
+    const raw = resolvedStorage.getItem(storageKey);
+    if (!raw) return undefined;
+
+    return workbenchLayoutConfigToInput(parseWorkbenchLayoutConfig(JSON.parse(raw) as unknown));
+  } catch {
+    return undefined;
+  }
+}
+
+export function writePersistedWorkbenchLayout(
+  state: WorkbenchLayoutState,
+  storageKey = DEFAULT_WORKBENCH_LAYOUT_STORAGE_KEY,
+  storage?: WorkbenchStorageWriter,
+): void {
+  const resolvedStorage = storage ?? getBrowserLocalStorage();
+  if (!resolvedStorage) return;
+
+  try {
+    resolvedStorage.setItem(
+      storageKey,
+      JSON.stringify(workbenchLayoutStateToStorageValue(state), null, 2),
+    );
+  } catch {
+    // Ignore quota and security errors so the shell keeps working offline.
+  }
+}
+
+export function resolvePersistedWorkbenchLayout(
+  initialLayout: WorkbenchLayoutStateInput | undefined,
+  options: {
+    persistLayout?: boolean | undefined;
+    storage?: WorkbenchStorageReader | undefined;
+    storageKey?: string | undefined;
+  } = {},
+): WorkbenchLayoutStateInput | undefined {
+  const {
+    initialLayout: baseLayout,
+    persistLayout = options.storage !== undefined || isWorkbenchLayoutPersistenceAvailable(),
+    storage,
+    storageKey = DEFAULT_WORKBENCH_LAYOUT_STORAGE_KEY,
+  } = { initialLayout, ...options };
+
+  if (!persistLayout) {
+    return baseLayout;
+  }
+
+  const persisted = readPersistedWorkbenchLayout(storageKey, storage);
+  if (!persisted) {
+    return baseLayout;
+  }
+
+  return createWorkbenchLayoutState(persisted, createWorkbenchLayoutState(baseLayout ?? {}));
+}
+
+function getBrowserLocalStorage(): (WorkbenchStorageReader & WorkbenchStorageWriter) | undefined {
+  if (!isWorkbenchLayoutPersistenceAvailable()) {
+    return undefined;
+  }
+
+  return globalThis.localStorage;
+}

package/src/workbench-profile-modal.tsx

@@ -0,0 +1,118 @@
+import { Modal } from '@workbench-kit/react/modal';
+import { Badge, Button } from '@workbench-kit/react/primitives';
+import type { ReactNode } from 'react';
+
+export interface WorkbenchProfileDetail {
+  readonly label: string;
+  readonly value: ReactNode;
+}
+
+export interface WorkbenchProfileInput {
+  readonly accountId?: string | undefined;
+  readonly displayName: string;
+  readonly email?: string | undefined;
+  readonly providerLabel?: string | undefined;
+  readonly roleLabel?: string | undefined;
+  readonly sessionLabel?: string | undefined;
+  readonly statusLabel?: string | undefined;
+  readonly workspaceLabel?: string | undefined;
+  readonly details?: readonly WorkbenchProfileDetail[] | undefined;
+  readonly onSignOut?: (() => void) | undefined;
+}
+
+export interface WorkbenchProfileModalProps {
+  extraContent?: ReactNode | undefined;
+  profile: WorkbenchProfileInput;
+  onClose: () => void;
+}
+
+export function WorkbenchProfileModal({
+  extraContent,
+  profile,
+  onClose,
+}: WorkbenchProfileModalProps) {
+  const initials = getProfileInitials(profile.displayName);
+  const details = createProfileDetails(profile);
+
+  return (
+    <Modal
+      bodyLayout="stack"
+      bodyPadding="lg"
+      bodyScroll="auto"
+      className="workbench-profile-modal"
+      closeLabel="Close profile"
+      footer={
+        <>
+          {profile.onSignOut ? (
+            <Button type="button" variant="danger" onClick={profile.onSignOut}>
+              Sign out
+            </Button>
+          ) : null}
+          <span className="workbench-profile-modal__footer-spacer" />
+          <Button type="button" onClick={onClose}>
+            Close
+          </Button>
+        </>
+      }
+      title="Profile"
+      titleSuffix={
+        profile.statusLabel ? <Badge variant="accent">{profile.statusLabel}</Badge> : null
+      }
+      onClose={onClose}
+    >
+      <section className="workbench-profile-card" aria-label="Workbench profile">
+        <div className="workbench-profile-card__avatar" aria-hidden="true">
+          {initials}
+        </div>
+        <div className="workbench-profile-card__identity">
+          <h2>{profile.displayName}</h2>
+          {profile.email ? <p>{profile.email}</p> : null}
+        </div>
+      </section>
+
+      {profile.sessionLabel ? (
+        <p className="workbench-profile-session" role="status">
+          {profile.sessionLabel}
+        </p>
+      ) : null}
+
+      <section className="workbench-profile-section" aria-label="Account details">
+        <h3>Account</h3>
+        <dl className="workbench-profile-detail-grid">
+          {details.map((detail) => (
+            <div key={detail.label}>
+              <dt>{detail.label}</dt>
+              <dd>{detail.value}</dd>
+            </div>
+          ))}
+        </dl>
+      </section>
+
+      {extraContent}
+    </Modal>
+  );
+}
+
+function createProfileDetails(profile: WorkbenchProfileInput): WorkbenchProfileDetail[] {
+  return [
+    ...(profile.providerLabel ? [{ label: 'Provider', value: profile.providerLabel }] : []),
+    ...(profile.roleLabel ? [{ label: 'Role', value: profile.roleLabel }] : []),
+    ...(profile.workspaceLabel ? [{ label: 'Workspace', value: profile.workspaceLabel }] : []),
+    ...(profile.accountId
+      ? [{ label: 'Account ID', value: <code>{profile.accountId}</code> }]
+      : []),
+    ...(profile.details ?? []),
+  ];
+}
+
+function getProfileInitials(displayName: string): string {
+  const initials = displayName
+    .split(/\s+/)
+    .map((part) => part[0])
+    .filter(Boolean)
+    .slice(0, 2)
+    .join('')
+    .toUpperCase();
+
+  return initials || 'U';
+}

package/src/workbench-shell-command-registration.ts

@@ -0,0 +1,58 @@
+import type { CommandDefinition, CommandRegistry } from '@workbench-kit/platform';
+import type { WorkbenchShellCommandContext } from '@workbench-kit/react/workbench';
+
+export interface WorkbenchShellCommandRegistration {
+  dispose(): void;
+}
+
+export function registerWorkbenchShellCommandHandlers(
+  registry: CommandRegistry,
+  commands: readonly CommandDefinition<WorkbenchShellCommandContext>[],
+  getContext: () => WorkbenchShellCommandContext,
+): WorkbenchShellCommandRegistration {
+  const disposables = commands.map((command) => {
+    const handler = () => {
+      command.run?.(getContext());
+    };
+    const existing = registry.getCommand(command.id);
+
+    if (existing) {
+      const previousHandler = existing.handler;
+      existing.handler = handler;
+
+      return {
+        dispose() {
+          if (existing.handler === handler) {
+            existing.handler = previousHandler;
+          }
+        },
+      };
+    }
+
+    return registry.registerCommand({
+      category: command.category ?? 'Workbench',
+      handler,
+      icon: resolveStaticCommandIcon(command),
+      id: command.id,
+      title: resolveStaticCommandTitle(command),
+    });
+  });
+
+  return {
+    dispose() {
+      [...disposables].reverse().forEach((disposable) => disposable.dispose());
+    },
+  };
+}
+
+function resolveStaticCommandTitle(command: CommandDefinition<WorkbenchShellCommandContext>) {
+  if (command.title) {
+    return command.title;
+  }
+
+  return typeof command.label === 'string' ? command.label : command.id;
+}
+
+function resolveStaticCommandIcon(command: CommandDefinition<WorkbenchShellCommandContext>) {
+  return typeof command.icon === 'string' ? command.icon : undefined;
+}