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

package/package.json

@@ -0,0 +1,49 @@
+{
+  "name": "@workbench-kit/shell-react",
+  "version": "0.0.2-prototype.0.2.6",
+  "private": false,
+  "type": "module",
+  "exports": {
+    ".": "./src/index.ts"
+  },
+  "files": [
+    "src",
+    "!src/**/*.test.ts",
+    "!src/**/*.test.tsx",
+    "!src/**/*.stories.ts",
+    "!src/**/*.stories.tsx"
+  ],
+  "dependencies": {
+    "@radix-ui/react-select": "^2.3.4",
+    "@radix-ui/react-slot": "^1.3.0",
+    "@xyflow/react": "^12.11.2",
+    "jsonata": "^1.8.7",
+    "react-table-mapping": "^1.0.3",
+    "@workbench-kit/react": "0.0.2-prototype.0.2.6",
+    "@workbench-kit/workbench-config": "0.0.2-prototype.0.2.6",
+    "@workbench-kit/tokens": "0.0.2-prototype.0.2.6",
+    "@workbench-kit/field-remap": "0.0.2-prototype.0.2.6",
+    "@workbench-kit/workspace": "0.0.2-prototype.0.2.6",
+    "@workbench-kit/platform": "0.0.2-prototype.0.2.6",
+    "@workbench-kit/workbench-core": "0.0.2-prototype.0.2.6"
+  },
+  "peerDependencies": {
+    "react": "^19.0.0",
+    "react-dom": "^19.0.0"
+  },
+  "description": "React shell and host assembly for Workbench Kit.",
+  "publishConfig": {
+    "access": "public",
+    "tag": "prototype",
+    "provenance": true
+  },
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/NewChoBo/workbench-kit.git",
+    "directory": "packages/shell-react"
+  },
+  "scripts": {
+    "test": "vitest run --config vitest.config.ts src",
+    "typecheck": "tsc -p tsconfig.json --noEmit"
+  }
+}

package/src/chat-ai-mock-proposals.ts

@@ -0,0 +1,39 @@
+import type { WorkbenchChatCommandProposalInput } from './use-workbench-chat-command-proposals.js';
+
+const MOCK_AI_COMMAND_PROPOSALS: readonly WorkbenchChatCommandProposalInput[] = [
+  {
+    commandId: 'workbench.showActivity.explorer',
+    description: 'Focus the Explorer activity in the primary sidebar.',
+    id: 'mock-proposal-show-explorer',
+    label: 'Show Explorer',
+  },
+  {
+    commandId: 'workbench.togglePrimarySidebar',
+    description: 'Toggle the primary sidebar visibility.',
+    id: 'mock-proposal-toggle-sidebar',
+    label: 'Toggle Primary Sidebar',
+  },
+];
+
+export function createMockAiChatCommandProposals(
+  userMessage: string,
+): readonly WorkbenchChatCommandProposalInput[] {
+  const normalized = userMessage.trim().toLocaleLowerCase();
+  if (!normalized || normalized === 'help') {
+    return [];
+  }
+
+  return MOCK_AI_COMMAND_PROPOSALS;
+}
+
+export function createMockAiChatResponseContent(userMessage: string) {
+  const proposals = createMockAiChatCommandProposals(userMessage);
+  if (!proposals.length) {
+    return `Received: ${userMessage}`;
+  }
+
+  return [
+    `I can help with "${userMessage.trim()}".`,
+    'Review the suggested commands below. Safe commands run automatically; workspace changes require approval.',
+  ].join('\n\n');
+}

package/src/chat-command-input.ts

@@ -0,0 +1,52 @@
+export type WorkbenchChatCommandInputParseResult =
+  | { type: 'none' }
+  | { type: 'unknown'; token: string }
+  | { commandId: string; message: string; type: 'invalid-arguments' }
+  | { args: readonly unknown[]; commandId: string; type: 'run' };
+
+export function parseWorkbenchChatCommandInput(
+  input: string,
+  isValidCommandId: (id: string) => boolean,
+): WorkbenchChatCommandInputParseResult {
+  const trimmed = input.trim();
+  if (!trimmed.startsWith('/')) {
+    return { type: 'none' };
+  }
+
+  const [rawToken] = trimmed.slice(1).split(/\s+/, 1);
+  if (!rawToken) {
+    return { token: '', type: 'unknown' };
+  }
+
+  if (!isValidCommandId(rawToken)) {
+    return { token: rawToken, type: 'unknown' };
+  }
+
+  const argumentText = getSlashCommandArgumentText(trimmed, rawToken);
+  if (!argumentText) {
+    return {
+      args: [],
+      commandId: rawToken,
+      type: 'run',
+    };
+  }
+
+  try {
+    return {
+      args: [JSON.parse(argumentText) as unknown],
+      commandId: rawToken,
+      type: 'run',
+    };
+  } catch {
+    return {
+      commandId: rawToken,
+      message:
+        'Command arguments must be valid JSON. Use /command.id {"key":"value"} or /command.id "value".',
+      type: 'invalid-arguments',
+    };
+  }
+}
+
+function getSlashCommandArgumentText(trimmedInput: string, commandId: string) {
+  return trimmedInput.slice(1 + commandId.length).trim();
+}

package/src/chat-command-policy.ts

@@ -0,0 +1,54 @@
+import type {
+  ResolveWorkbenchCommandExecutionPolicyInput,
+  WorkbenchCommandExecutionPolicy,
+} from '@workbench-kit/react/workbench';
+import type { WorkbenchStorageReader } from '@workbench-kit/workbench-core';
+
+import { readPersistedLocalPreferences } from './preference-settings-storage.js';
+
+export const WORKBENCH_AI_CHAT_COMMAND_DEFAULT_POLICY_KEY = 'workbench.chat.aiCommandDefaultPolicy';
+
+function isWorkbenchCommandExecutionPolicy(
+  value: unknown,
+): value is WorkbenchCommandExecutionPolicy {
+  return value === 'auto-allow' || value === 'approval-required' || value === 'auto-deny';
+}
+
+export function readWorkbenchAiChatCommandPolicyInput(
+  storageKey?: string,
+  storage?: WorkbenchStorageReader,
+): ResolveWorkbenchCommandExecutionPolicyInput {
+  const preferences = readPersistedLocalPreferences(storageKey, storage);
+  const configuredDefault = preferences[WORKBENCH_AI_CHAT_COMMAND_DEFAULT_POLICY_KEY];
+
+  return {
+    defaultPolicy: isWorkbenchCommandExecutionPolicy(configuredDefault)
+      ? configuredDefault
+      : undefined,
+    mutatingDefaultPolicy: 'approval-required',
+  };
+}
+
+export function createWorkbenchAiChatCommandPolicyById(
+  entries: Readonly<Record<string, WorkbenchCommandExecutionPolicy>>,
+): ResolveWorkbenchCommandExecutionPolicyInput {
+  return {
+    policyByCommandId: entries,
+  };
+}
+
+export function mergeWorkbenchAiChatCommandPolicyInput(
+  ...inputs: readonly ResolveWorkbenchCommandExecutionPolicyInput[]
+): ResolveWorkbenchCommandExecutionPolicyInput {
+  return inputs.reduce<ResolveWorkbenchCommandExecutionPolicyInput>(
+    (merged, input) => ({
+      defaultPolicy: input.defaultPolicy ?? merged.defaultPolicy,
+      mutatingDefaultPolicy: input.mutatingDefaultPolicy ?? merged.mutatingDefaultPolicy,
+      policyByCommandId: {
+        ...merged.policyByCommandId,
+        ...input.policyByCommandId,
+      },
+    }),
+    {},
+  );
+}

package/src/chat-command-surface.tsx

@@ -0,0 +1,155 @@
+import { useCallback, useMemo, useRef, type KeyboardEvent } from 'react';
+import {
+  WorkbenchCommandSuggest,
+  isWorkbenchCommandRunnable,
+  useSlashCommandSuggest,
+  type WorkbenchCommandDescriptor,
+} from '@workbench-kit/react/workbench';
+
+import { parseWorkbenchChatCommandInput } from './chat-command-input.js';
+import { useWorkbench } from './provider.js';
+import { useWorkbenchCommandDescriptors } from './use-workbench-command-descriptors.js';
+
+export interface WorkbenchChatCommandRunResult {
+  commandId: string;
+  label?: string | undefined;
+  message?: string | undefined;
+  status: 'error' | 'success';
+}
+
+export interface WorkbenchChatCommandSurfaceOptions {
+  additionalCommands?: readonly WorkbenchCommandDescriptor[] | undefined;
+  onCommandResult?: ((result: WorkbenchChatCommandRunResult) => void) | undefined;
+  onValueChange: (value: string) => void;
+  value: string;
+}
+
+export function useWorkbenchChatCommandSurface({
+  additionalCommands,
+  onCommandResult,
+  onValueChange,
+  value,
+}: WorkbenchChatCommandSurfaceOptions) {
+  const { executeCommand } = useWorkbench();
+  const composerRef = useRef<HTMLTextAreaElement>(null);
+  const commands = useWorkbenchCommandDescriptors(additionalCommands);
+  const commandIds = useMemo(() => new Set(commands.map((command) => command.id)), [commands]);
+  const suggest = useSlashCommandSuggest({ commands, value });
+
+  const runCommand = useCallback(
+    async (commandId: string, args: readonly unknown[] = []) => {
+      const command = commands.find((candidate) => candidate.id === commandId);
+      if (command && !isWorkbenchCommandRunnable(command)) {
+        onCommandResult?.({
+          commandId,
+          label: command.label,
+          message: command.disabledReason ?? 'Command is currently unavailable.',
+          status: 'error',
+        });
+        return;
+      }
+
+      onValueChange('');
+
+      try {
+        await executeCommand(commandId, ...args);
+        onCommandResult?.({
+          commandId,
+          label: command?.label,
+          status: 'success',
+        });
+      } catch (error) {
+        onCommandResult?.({
+          commandId,
+          label: command?.label,
+          message: getCommandErrorMessage(error),
+          status: 'error',
+        });
+      }
+    },
+    [commands, executeCommand, onCommandResult, onValueChange],
+  );
+
+  const runInputAsCommand = useCallback(
+    (message: string) => {
+      const parsed = parseWorkbenchChatCommandInput(message, (commandId) =>
+        commandIds.has(commandId),
+      );
+      if (parsed.type === 'none') {
+        return false;
+      }
+
+      if (parsed.type === 'unknown') {
+        onValueChange('');
+        onCommandResult?.({
+          commandId: parsed.token || '/',
+          message: parsed.token ? `Unknown command: ${parsed.token}` : 'Type a command after /.',
+          status: 'error',
+        });
+        return true;
+      }
+
+      if (parsed.type === 'invalid-arguments') {
+        onValueChange('');
+        onCommandResult?.({
+          commandId: parsed.commandId,
+          message: parsed.message,
+          status: 'error',
+        });
+        return true;
+      }
+
+      void runCommand(parsed.commandId, parsed.args);
+      return true;
+    },
+    [commandIds, onCommandResult, onValueChange, runCommand],
+  );
+
+  const handleKeyDown = useCallback(
+    (event: KeyboardEvent<HTMLTextAreaElement>) => {
+      suggest.handleKeyDown(event, (commandId) => {
+        void runCommand(commandId);
+      });
+    },
+    [runCommand, suggest],
+  );
+
+  const openCommandSuggest = useCallback(() => {
+    if (!value.trimStart().startsWith('/')) {
+      onValueChange('/');
+    }
+
+    window.requestAnimationFrame(() => {
+      composerRef.current?.focus();
+    });
+  }, [onValueChange, value]);
+
+  const commandSuggestPopover = (
+    <WorkbenchCommandSuggest
+      activeCommandId={suggest.activeCommandId}
+      commands={suggest.suggestedCommands}
+      query={suggest.commandQuery}
+      visible={suggest.isOpen}
+      onActiveCommandChange={suggest.setActiveCommandByKey}
+      onRunCommand={(command) => {
+        void runCommand(command.id);
+      }}
+    />
+  );
+
+  return {
+    commandSuggestPopover,
+    composerRef,
+    onCommandClick: openCommandSuggest,
+    onKeyDown: handleKeyDown,
+    runInputAsCommand,
+  };
+}
+
+function getCommandErrorMessage(error: unknown) {
+  if (error instanceof Error) {
+    return error.message;
+  }
+
+  return String(error);
+}

package/src/chat-view-data.ts

@@ -0,0 +1,20 @@
+export const BUILTIN_CHAT_VIEW_RENDER_KIND = 'workbench-kit.builtin.chat.view' as const;
+
+export type BuiltinChatViewMode = 'aiChat' | 'chatting';
+
+export interface BuiltinChatViewRenderData {
+  readonly kind: typeof BUILTIN_CHAT_VIEW_RENDER_KIND;
+  readonly mode: BuiltinChatViewMode;
+}
+
+export function isBuiltinChatViewRenderData(value: unknown): value is BuiltinChatViewRenderData {
+  if (typeof value !== 'object' || value === null) {
+    return false;
+  }
+
+  const candidate = value as Partial<BuiltinChatViewRenderData>;
+  return (
+    candidate.kind === BUILTIN_CHAT_VIEW_RENDER_KIND &&
+    (candidate.mode === 'chatting' || candidate.mode === 'aiChat')
+  );
+}

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 './chat-ai-mock-proposals.js';
+import {
+  readWorkbenchAiChatCommandPolicyInput,
+  mergeWorkbenchAiChatCommandPolicyInput,
+} from './chat-command-policy.js';
+import {
+  useWorkbenchChatCommandSurface,
+  type WorkbenchChatCommandRunResult,
+} from './chat-command-surface.js';
+import { type BuiltinChatViewMode, type BuiltinChatViewRenderData } from './chat-view-data.js';
+import { useWorkbenchChatCommandProposals } from './use-workbench-chat-command-proposals.js';
+import { useWorkbenchCommandDescriptors } from './use-workbench-command-descriptors.js';
+
+export type { BuiltinChatViewMode, BuiltinChatViewRenderData };
+export { BUILTIN_CHAT_VIEW_RENDER_KIND, isBuiltinChatViewRenderData } from './chat-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/command-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 './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-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
+  );
+}