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

package/src/chat/view.tsx

@@ -0,0 +1,220 @@
+import { useCallback, useMemo, useState } from 'react';
+import { ChatPanel, type ChatMessage } from '@workbench-kit/react/workbench/chat';
+
+import {
+  createMockAiChatCommandProposals,
+  createMockAiChatResponseContent,
+} from './ai-mock-proposals.js';
+import {
+  readWorkbenchAiChatCommandPolicyInput,
+  mergeWorkbenchAiChatCommandPolicyInput,
+} from './command-policy.js';
+import {
+  useWorkbenchChatCommandSurface,
+  type WorkbenchChatCommandRunResult,
+} from './command-surface.js';
+import { type BuiltinChatViewMode, type BuiltinChatViewRenderData } from './view-data.js';
+import { useWorkbenchChatCommandProposals } from './use-chat-command-proposals.js';
+import { useWorkbenchCommandDescriptors } from '../commands/use-command-descriptors.js';
+
+export type { BuiltinChatViewMode, BuiltinChatViewRenderData };
+export { BUILTIN_CHAT_VIEW_RENDER_KIND, isBuiltinChatViewRenderData } from './view-data.js';
+
+type BuiltinChatRuntimeStatus = 'idle' | 'running' | 'error';
+
+const initialChattingMessages: readonly ChatMessage[] = [
+  {
+    content: 'Share updates here while working in the workspace.',
+    createdAt: '2026-06-18T14:29:00.000Z',
+    id: 'workbench-chatting-intro',
+    label: 'Alex',
+    source: 'assistant',
+  },
+];
+
+const initialAiChatMessages: readonly ChatMessage[] = [
+  {
+    content: 'Ask about the workspace or run a command with `/command.id`.',
+    createdAt: '2026-06-18T14:29:00.000Z',
+    id: 'workbench-ai-chat-intro',
+    label: 'Assistant',
+    source: 'assistant',
+  },
+];
+
+export function BuiltinChatView({ mode }: { mode: BuiltinChatViewMode }) {
+  if (mode === 'aiChat') {
+    return <BuiltinAiChatView />;
+  }
+
+  return <BuiltinChattingView />;
+}
+
+function createChatCommandFeedbackMessage(result: WorkbenchChatCommandRunResult): ChatMessage {
+  const title = result.label ?? result.commandId;
+  const status =
+    result.status === 'success' ? `Ran command \`${title}\`.` : `Command failed: \`${title}\`.`;
+
+  return {
+    content: result.message ? `${status}\n\n${result.message}` : status,
+    createdAt: new Date().toISOString(),
+    id: `chat-command-${Date.now()}-${Math.random().toString(36).slice(2)}`,
+    label: 'Workbench',
+    source: 'assistant',
+  };
+}
+
+function createChatMessageId(prefix: string) {
+  return `${prefix}-${Date.now()}-${Math.random().toString(36).slice(2)}`;
+}
+
+function BuiltinChattingView() {
+  const [draft, setDraft] = useState('');
+  const [messages, setMessages] = useState<ChatMessage[]>(() => [...initialChattingMessages]);
+  const appendCommandResult = useCallback((result: WorkbenchChatCommandRunResult) => {
+    setMessages((currentMessages) => [
+      ...currentMessages,
+      createChatCommandFeedbackMessage(result),
+    ]);
+  }, []);
+  const chatCommands = useWorkbenchChatCommandSurface({
+    onCommandResult: appendCommandResult,
+    onValueChange: setDraft,
+    value: draft,
+  });
+
+  return (
+    <div className="workbench-chat-view">
+      <ChatPanel
+        assistantLabel="Alex"
+        commandLabel="Show commands"
+        commandSuggestPopover={chatCommands.commandSuggestPopover}
+        composerRef={chatCommands.composerRef}
+        emptyLabel="Start a conversation with your team."
+        messageLayout="peer"
+        messages={messages}
+        placeholder="Message your team"
+        title="Chat"
+        userLabel="Jay"
+        value={draft}
+        onCommandClick={chatCommands.onCommandClick}
+        onKeyDown={chatCommands.onKeyDown}
+        onSubmit={(message) => {
+          if (chatCommands.runInputAsCommand(message)) {
+            return;
+          }
+
+          setDraft('');
+          setMessages((currentMessages) => [
+            ...currentMessages,
+            {
+              content: message,
+              createdAt: new Date().toISOString(),
+              id: createChatMessageId('chatting-user'),
+              source: 'user',
+            },
+          ]);
+        }}
+        onValueChange={setDraft}
+      />
+    </div>
+  );
+}
+
+function BuiltinAiChatView() {
+  const [draft, setDraft] = useState('');
+  const [messages, setMessages] = useState<ChatMessage[]>(() => [...initialAiChatMessages]);
+  const [runtimeStatus, setRuntimeStatus] = useState<BuiltinChatRuntimeStatus>('idle');
+  const commands = useWorkbenchCommandDescriptors();
+  const policyInput = useMemo(
+    () =>
+      mergeWorkbenchAiChatCommandPolicyInput(readWorkbenchAiChatCommandPolicyInput(), {
+        policyByCommandId: {
+          'workbench.togglePrimarySidebar': 'approval-required',
+        },
+      }),
+    [],
+  );
+  const appendCommandResult = useCallback((result: WorkbenchChatCommandRunResult) => {
+    setMessages((currentMessages) => [
+      ...currentMessages,
+      createChatCommandFeedbackMessage(result),
+    ]);
+  }, []);
+  const chatCommands = useWorkbenchChatCommandSurface({
+    onCommandResult: appendCommandResult,
+    onValueChange: setDraft,
+    value: draft,
+  });
+  const { createProposalHandlers, enrichMessageProposals, processAutoPolicies } =
+    useWorkbenchChatCommandProposals({
+      commands,
+      onCommandResult: appendCommandResult,
+      policyInput,
+    });
+  const proposalHandlers = useMemo(
+    () => createProposalHandlers(setMessages),
+    [createProposalHandlers],
+  );
+
+  return (
+    <div className="workbench-chat-view">
+      <ChatPanel
+        assistantLabel="Assistant"
+        commandLabel="Show commands"
+        commandSuggestPopover={chatCommands.commandSuggestPopover}
+        composerRef={chatCommands.composerRef}
+        disabled={runtimeStatus === 'error'}
+        emptyLabel="Ask about this workspace."
+        isRunning={runtimeStatus === 'running'}
+        messageLayout="assistant"
+        messages={messages}
+        placeholder="Ask about this workspace"
+        showTools
+        title="AI Chat"
+        value={draft}
+        onCancel={() => setRuntimeStatus('idle')}
+        onCommandClick={chatCommands.onCommandClick}
+        onCommandProposalAllow={proposalHandlers.onProposalAllow}
+        onCommandProposalDeny={proposalHandlers.onProposalDeny}
+        onKeyDown={chatCommands.onKeyDown}
+        onSubmit={(message) => {
+          if (chatCommands.runInputAsCommand(message)) {
+            return;
+          }
+
+          setDraft('');
+          setRuntimeStatus('running');
+
+          const assistantMessageId = createChatMessageId('ai-chat-assistant');
+          const rawProposals = createMockAiChatCommandProposals(message);
+          const commandProposalsForMessage = enrichMessageProposals(rawProposals);
+          const assistantMessage: ChatMessage = {
+            commandProposals: commandProposalsForMessage.length
+              ? commandProposalsForMessage
+              : undefined,
+            content: createMockAiChatResponseContent(message),
+            createdAt: new Date().toISOString(),
+            id: assistantMessageId,
+            label: 'Assistant',
+            source: 'assistant',
+          };
+
+          setMessages((currentMessages) => [
+            ...currentMessages,
+            {
+              content: message,
+              createdAt: new Date().toISOString(),
+              id: createChatMessageId('ai-chat-user'),
+              source: 'user',
+            },
+            assistantMessage,
+          ]);
+          processAutoPolicies(setMessages, assistantMessageId, commandProposalsForMessage);
+          setRuntimeStatus('idle');
+        }}
+        onValueChange={setDraft}
+      />
+    </div>
+  );
+}

package/src/commands/inspector-surface.tsx

@@ -0,0 +1,46 @@
+import { ScrollArea } from '@workbench-kit/react/primitives';
+import {
+  CommandInspectorPanel,
+  findCommandManagementEntry,
+} from '@workbench-kit/react/workbench/management';
+
+import { useCommandManagementModel } from '../management/use-command-management.js';
+
+export interface CommandInspectorSurfaceProps {
+  commandId: string;
+  resourceUri: string;
+  tabId: string;
+}
+
+export function CommandInspectorSurface({
+  commandId,
+  resourceUri,
+  tabId,
+}: CommandInspectorSurfaceProps) {
+  const { groups, lastRun, runCommand } = useCommandManagementModel();
+  const entry = findCommandManagementEntry(groups, commandId);
+
+  if (!entry) {
+    return (
+      <section
+        aria-label="Command inspector"
+        className="workbench-command-inspector-surface"
+        data-editor-host-id={tabId}
+        data-resource-uri={resourceUri}
+      >
+        <div className="workbench-command-inspector-surface__missing" role="alert">
+          <p className="workbench-command-inspector-surface__missing-title">Command not found</p>
+          <p className="workbench-command-inspector-surface__missing-message">
+            No registry entry matches <code>{commandId}</code>.
+          </p>
+        </div>
+      </section>
+    );
+  }
+
+  return (
+    <ScrollArea className="workbench-command-inspector-surface" orientation="vertical">
+      <CommandInspectorPanel entry={entry} lastRun={lastRun} onRunCommand={runCommand} />
+    </ScrollArea>
+  );
+}

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

@@ -0,0 +1,41 @@
+import { useEffect, useMemo, useReducer } from 'react';
+import type { WorkbenchCommandDescriptor } from '@workbench-kit/react/workbench';
+
+import { useWorkbench } from '../shell/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/commands/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/commands/view-data.ts

@@ -0,0 +1,17 @@
+export const BUILTIN_COMMANDS_VIEW_RENDER_KIND = 'workbench-kit.builtin.commands.view' as const;
+export const BUILTIN_COMMANDS_VIEW_CONTAINER_ID = 'commands' as const;
+
+export interface BuiltinCommandsViewRenderData {
+  readonly kind: typeof BUILTIN_COMMANDS_VIEW_RENDER_KIND;
+}
+
+export function isBuiltinCommandsViewRenderData(
+  value: unknown,
+): value is BuiltinCommandsViewRenderData {
+  return (
+    typeof value === 'object' &&
+    value !== null &&
+    'kind' in value &&
+    (value as BuiltinCommandsViewRenderData).kind === BUILTIN_COMMANDS_VIEW_RENDER_KIND
+  );
+}

package/src/commands/view.tsx

@@ -0,0 +1,43 @@
+import {
+  CommandManagementSidebar,
+  buildCommandInspectorUri,
+  findCommandManagementEntry,
+} from '@workbench-kit/react/workbench/management';
+
+import {
+  BUILTIN_COMMANDS_VIEW_RENDER_KIND,
+  isBuiltinCommandsViewRenderData,
+  type BuiltinCommandsViewRenderData,
+} from './view-data.js';
+import { useCommandManagementModel } from '../management/use-command-management.js';
+import { useEditorService } from '../editor/use-editor.js';
+
+export type { BuiltinCommandsViewRenderData };
+export { BUILTIN_COMMANDS_VIEW_RENDER_KIND, isBuiltinCommandsViewRenderData };
+
+export function BuiltinCommandsView() {
+  const editorService = useEditorService();
+  const { groups, lastRun, refreshRegistry, runCommand } = useCommandManagementModel();
+
+  const inspectCommand = (commandId: string) => {
+    const entry = findCommandManagementEntry(groups, commandId);
+    editorService.openEditor({
+      icon: 'codicon-terminal',
+      pinned: true,
+      preview: false,
+      resourceUri: buildCommandInspectorUri(commandId),
+      title: entry?.label ?? commandId,
+    });
+  };
+
+  return (
+    <CommandManagementSidebar
+      className="workbench-commands-view"
+      groups={groups}
+      lastRun={lastRun}
+      onInspectCommand={inspectCommand}
+      onRefresh={refreshRegistry}
+      onRunCommand={runCommand}
+    />
+  );
+}

package/src/devtools/WorkbenchDevtoolsPanel.tsx

@@ -0,0 +1,124 @@
+import { useMemo, useState } from 'react';
+
+import { Button, ScrollArea } from '@workbench-kit/react/primitives';
+
+import { useWorkbenchDevtoolsSnapshot } from './use-workbench-devtools-snapshot.js';
+
+type DevtoolsSectionId =
+  | 'commands'
+  | 'menus'
+  | 'keybindings'
+  | 'contextKeys'
+  | 'capabilities'
+  | 'layout'
+  | 'editor'
+  | 'views'
+  | 'transactions'
+  | 'diagnostics';
+
+const DEVTOOLS_SECTIONS: readonly {
+  readonly id: DevtoolsSectionId;
+  readonly label: string;
+}[] = [
+  { id: 'commands', label: 'Commands' },
+  { id: 'menus', label: 'Menus' },
+  { id: 'keybindings', label: 'Keybindings' },
+  { id: 'contextKeys', label: 'Context keys' },
+  { id: 'capabilities', label: 'Capabilities' },
+  { id: 'layout', label: 'Layout' },
+  { id: 'editor', label: 'Editor' },
+  { id: 'views', label: 'Views' },
+  { id: 'transactions', label: 'Transactions' },
+  { id: 'diagnostics', label: 'Diagnostics' },
+];
+
+function formatSectionValue(
+  sectionId: DevtoolsSectionId,
+  snapshot: ReturnType<typeof useWorkbenchDevtoolsSnapshot>,
+): string {
+  switch (sectionId) {
+    case 'commands':
+      return JSON.stringify(snapshot.commands, null, 2);
+    case 'menus':
+      return JSON.stringify(snapshot.menus, null, 2);
+    case 'keybindings':
+      return JSON.stringify(snapshot.keybindings, null, 2);
+    case 'contextKeys':
+      return JSON.stringify(snapshot.contextKeys, null, 2);
+    case 'capabilities':
+      return JSON.stringify(
+        {
+          activeExtensions: snapshot.activeExtensions,
+          capabilities: snapshot.capabilities,
+        },
+        null,
+        2,
+      );
+    case 'layout':
+      return JSON.stringify(snapshot.layout, null, 2);
+    case 'editor':
+      return JSON.stringify(snapshot.editor, null, 2);
+    case 'views':
+      return JSON.stringify(
+        {
+          activities: snapshot.activities,
+          viewContainers: snapshot.viewContainers,
+          views: snapshot.views,
+        },
+        null,
+        2,
+      );
+    case 'transactions':
+      return JSON.stringify(snapshot.transactions, null, 2);
+    case 'diagnostics':
+      return JSON.stringify(snapshot.dependencyDiagnostics, null, 2);
+    default:
+      return '';
+  }
+}
+
+export function WorkbenchDevtoolsPanel() {
+  const snapshot = useWorkbenchDevtoolsSnapshot();
+  const [activeSection, setActiveSection] = useState<DevtoolsSectionId>('commands');
+  const sectionValue = useMemo(
+    () => formatSectionValue(activeSection, snapshot),
+    [activeSection, snapshot],
+  );
+
+  return (
+    <aside
+      aria-label="Workbench devtools"
+      className="workbench-devtools-panel"
+      data-testid="workbench-devtools-panel"
+    >
+      <header className="workbench-devtools-panel__header">
+        <strong>Workbench Devtools</strong>
+        <span className="workbench-devtools-panel__meta">Read-only</span>
+      </header>
+      <p className="workbench-devtools-panel__timestamp">Updated {snapshot.capturedAt}</p>
+      <nav aria-label="Devtools sections" className="workbench-devtools-panel__tabs">
+        {DEVTOOLS_SECTIONS.map((section) => (
+          <Button
+            key={section.id}
+            aria-pressed={activeSection === section.id}
+            compact
+            className="workbench-devtools-panel__tab"
+            onClick={() => {
+              setActiveSection(section.id);
+            }}
+          >
+            {section.label}
+          </Button>
+        ))}
+      </nav>
+      <ScrollArea
+        as="pre"
+        className="workbench-devtools-panel__output"
+        gutter="stable"
+        orientation="vertical"
+      >
+        {sectionValue}
+      </ScrollArea>
+    </aside>
+  );
+}

package/src/devtools/WorkbenchDevtoolsShell.tsx

@@ -0,0 +1,17 @@
+import type { ReactNode } from 'react';
+
+import { WorkbenchDevtoolsPanel } from './WorkbenchDevtoolsPanel.js';
+import './workbench-devtools.css';
+
+export interface WorkbenchDevtoolsShellProps {
+  readonly children: ReactNode;
+}
+
+export function WorkbenchDevtoolsShell({ children }: WorkbenchDevtoolsShellProps) {
+  return (
+    <div className="workbench-devtools-shell" data-testid="workbench-devtools-shell">
+      <div className="workbench-devtools-shell__main">{children}</div>
+      <WorkbenchDevtoolsPanel />
+    </div>
+  );
+}

package/src/devtools/index.ts

@@ -0,0 +1,11 @@
+export { WorkbenchDevtoolsPanel } from './WorkbenchDevtoolsPanel.js';
+export {
+  WorkbenchDevtoolsShell,
+  type WorkbenchDevtoolsShellProps,
+} from './WorkbenchDevtoolsShell.js';
+export {
+  collectWorkbenchDevtoolsSnapshot,
+  type CollectWorkbenchDevtoolsSnapshotInput,
+  type WorkbenchDevtoolsSnapshot,
+} from './workbench-devtools-snapshot.js';
+export { useWorkbenchDevtoolsSnapshot } from './use-workbench-devtools-snapshot.js';

package/src/devtools/use-workbench-devtools-snapshot.ts

@@ -0,0 +1,84 @@
+import { useMemo, useSyncExternalStore } from 'react';
+
+import {
+  collectWorkbenchDevtoolsSnapshot,
+  type WorkbenchDevtoolsSnapshot,
+} from './workbench-devtools-snapshot.js';
+import { useWorkbench } from '../shell/provider.js';
+import type { WorkbenchWorkspaceHostPort as WorkspaceHostPort } from '@workbench-kit/workspace';
+
+export function useWorkbenchDevtoolsSnapshot(): WorkbenchDevtoolsSnapshot {
+  const { editorService, extensionRegistry, layoutService, workspaceHostPort } = useWorkbench();
+
+  const store = useMemo(() => {
+    const collectSnapshot = () =>
+      collectWorkbenchDevtoolsSnapshot({
+        editorService,
+        extensionRegistry,
+        layoutService,
+        workspaceHostPort,
+      });
+    let snapshot = collectSnapshot();
+
+    const notifyChange = (onStoreChange: () => void) => {
+      snapshot = collectSnapshot();
+      onStoreChange();
+    };
+
+    return {
+      getSnapshot: () => snapshot,
+      subscribe: (onStoreChange: () => void) => {
+        const disposables = [
+          layoutService.onDidChangeLayout(() => {
+            notifyChange(onStoreChange);
+          }),
+          editorService.onDidChangeEditors(() => {
+            notifyChange(onStoreChange);
+          }),
+          extensionRegistry.commands.onDidRegisterCommand(() => {
+            notifyChange(onStoreChange);
+          }),
+          extensionRegistry.menus.onDidRegisterMenuItem(() => {
+            notifyChange(onStoreChange);
+          }),
+          extensionRegistry.keybindings.onDidRegisterKeybinding(() => {
+            notifyChange(onStoreChange);
+          }),
+          extensionRegistry.views.onDidRegisterView(() => {
+            notifyChange(onStoreChange);
+          }),
+          extensionRegistry.views.onDidRegisterViewContainer(() => {
+            notifyChange(onStoreChange);
+          }),
+          extensionRegistry.views.onDidRegisterViewProvider(() => {
+            notifyChange(onStoreChange);
+          }),
+          extensionRegistry.activities.onDidRegisterActivity(() => {
+            notifyChange(onStoreChange);
+          }),
+          extensionRegistry.onDidActivateExtension(() => {
+            notifyChange(onStoreChange);
+          }),
+          extensionRegistry.onDidDeactivateExtension(() => {
+            notifyChange(onStoreChange);
+          }),
+        ];
+
+        const workspacePort = workspaceHostPort as WorkspaceHostPort | undefined;
+        const unsubscribeWorkspace = workspacePort?.service.onDidChangeWorkspace(() => {
+          notifyChange(onStoreChange);
+        });
+
+        return () => {
+          for (const disposable of disposables) {
+            disposable.dispose();
+          }
+
+          unsubscribeWorkspace?.();
+        };
+      },
+    };
+  }, [editorService, extensionRegistry, layoutService, workspaceHostPort]);
+
+  return useSyncExternalStore(store.subscribe, store.getSnapshot, store.getSnapshot);
+}