@workbench-kit/react 0.0.2-prototype.0.1.2 → 0.0.2-prototype.0.2.2

package/src/workbench/bootstrap/useWorkbenchBootstrap.ts

@@ -0,0 +1,130 @@
+import { useCallback, useRef, useState } from 'react';
+
+export type WorkbenchBootstrapTaskStatus = 'pending' | 'running' | 'completed' | 'failed';
+
+export interface WorkbenchBootstrapTaskDefinition {
+  detail?: string | undefined;
+  id: string;
+  label: string;
+  run: () => Promise<void>;
+}
+
+export interface WorkbenchBootstrapTaskViewModel {
+  detail?: string | undefined;
+  error?: string | undefined;
+  id: string;
+  label: string;
+  status: WorkbenchBootstrapTaskStatus;
+}
+
+export type WorkbenchBootstrapRunStatus = 'idle' | 'running' | 'completed' | 'failed';
+
+export interface WorkbenchBootstrapController {
+  currentTaskId: string | undefined;
+  error: string | undefined;
+  isReady: boolean;
+  retry: () => void;
+  run: (tasks: readonly WorkbenchBootstrapTaskDefinition[]) => Promise<void>;
+  status: WorkbenchBootstrapRunStatus;
+  tasks: readonly WorkbenchBootstrapTaskViewModel[];
+}
+
+function toPendingTasks(
+  definitions: readonly WorkbenchBootstrapTaskDefinition[],
+): WorkbenchBootstrapTaskViewModel[] {
+  return definitions.map((definition) => ({
+    detail: definition.detail,
+    id: definition.id,
+    label: definition.label,
+    status: 'pending',
+  }));
+}
+
+function updateTaskStatus(
+  tasks: readonly WorkbenchBootstrapTaskViewModel[],
+  taskId: string,
+  patch: Partial<WorkbenchBootstrapTaskViewModel>,
+): WorkbenchBootstrapTaskViewModel[] {
+  return tasks.map((task) => (task.id === taskId ? { ...task, ...patch } : task));
+}
+
+export function useWorkbenchBootstrap(): WorkbenchBootstrapController {
+  const [status, setStatus] = useState<WorkbenchBootstrapRunStatus>('idle');
+  const [tasks, setTasks] = useState<readonly WorkbenchBootstrapTaskViewModel[]>([]);
+  const [currentTaskId, setCurrentTaskId] = useState<string | undefined>();
+  const [error, setError] = useState<string | undefined>();
+  const lastDefinitionsRef = useRef<readonly WorkbenchBootstrapTaskDefinition[]>([]);
+  const runGenerationRef = useRef(0);
+
+  const run = useCallback(async (definitions: readonly WorkbenchBootstrapTaskDefinition[]) => {
+    const generation = ++runGenerationRef.current;
+    lastDefinitionsRef.current = definitions;
+    setStatus('running');
+    setError(undefined);
+    setTasks(toPendingTasks(definitions));
+
+    for (const definition of definitions) {
+      if (generation !== runGenerationRef.current) {
+        return;
+      }
+
+      setCurrentTaskId(definition.id);
+      setTasks((currentTasks) =>
+        updateTaskStatus(currentTasks, definition.id, { status: 'running' }),
+      );
+
+      try {
+        await definition.run();
+      } catch (cause) {
+        if (generation !== runGenerationRef.current) {
+          return;
+        }
+
+        const message = cause instanceof Error ? cause.message : 'Startup failed.';
+        setTasks((currentTasks) =>
+          updateTaskStatus(currentTasks, definition.id, {
+            error: message,
+            status: 'failed',
+          }),
+        );
+        setStatus('failed');
+        setError(message);
+        setCurrentTaskId(undefined);
+        return;
+      }
+
+      if (generation !== runGenerationRef.current) {
+        return;
+      }
+
+      setTasks((currentTasks) =>
+        updateTaskStatus(currentTasks, definition.id, { status: 'completed' }),
+      );
+    }
+
+    if (generation !== runGenerationRef.current) {
+      return;
+    }
+
+    setCurrentTaskId(undefined);
+    setStatus('completed');
+  }, []);
+
+  const retry = useCallback(() => {
+    if (lastDefinitionsRef.current.length === 0) {
+      return;
+    }
+
+    void run(lastDefinitionsRef.current);
+  }, [run]);
+
+  return {
+    currentTaskId,
+    error,
+    isReady: status === 'completed',
+    retry,
+    run,
+    status,
+    tasks,
+  };
+}

package/src/workbench/chat/ChatCommandProposalCard.tsx

@@ -0,0 +1,115 @@
+import { Badge } from '../../primitives/badge';
+import { Button } from '../../primitives/button';
+import { cx } from '../../utils/cx';
+import { getWorkbenchCommandExecutionPolicyLabel } from '../command-execution-policy';
+import type { WorkbenchCommandExecutionPolicy } from '../command-model';
+import type { ChatCommandProposal, ChatCommandProposalStatus } from './types';
+
+export interface ChatCommandProposalCardProps {
+  onAllow?: ((proposal: ChatCommandProposal) => void) | undefined;
+  onDeny?: ((proposal: ChatCommandProposal) => void) | undefined;
+  proposal: ChatCommandProposal;
+}
+
+function getPolicyBadgeVariant(policy: WorkbenchCommandExecutionPolicy) {
+  if (policy === 'auto-deny') {
+    return 'danger' as const;
+  }
+
+  if (policy === 'approval-required') {
+    return 'muted' as const;
+  }
+
+  return 'accent' as const;
+}
+
+function getProposalStatusLabel(status: ChatCommandProposalStatus) {
+  switch (status) {
+    case 'pending':
+      return undefined;
+    case 'running':
+      return 'Running…';
+    case 'allowed':
+      return 'Allowed';
+    case 'denied':
+      return 'Denied';
+    case 'blocked':
+      return 'Blocked by policy';
+    case 'executed':
+      return 'Executed';
+    case 'failed':
+      return 'Execution failed';
+    default:
+      return undefined;
+  }
+}
+
+function formatProposalArgs(args: readonly unknown[] | undefined) {
+  if (!args?.length) {
+    return undefined;
+  }
+
+  try {
+    return JSON.stringify(args);
+  } catch {
+    return String(args);
+  }
+}
+
+export function ChatCommandProposalCard({
+  onAllow,
+  onDeny,
+  proposal,
+}: ChatCommandProposalCardProps) {
+  const statusLabel = getProposalStatusLabel(proposal.status);
+  const argsPreview = formatProposalArgs(proposal.args);
+  const showActions =
+    proposal.policy === 'approval-required' &&
+    proposal.status === 'pending' &&
+    Boolean(onAllow || onDeny);
+
+  return (
+    <article
+      className={cx(
+        'chat-command-proposal',
+        proposal.status === 'blocked' && 'chat-command-proposal--blocked',
+        proposal.status === 'failed' && 'chat-command-proposal--failed',
+      )}
+      data-policy={proposal.policy}
+      data-status={proposal.status}
+    >
+      <div className="chat-command-proposal__header">
+        <div className="chat-command-proposal__title-group">
+          <span className="chat-command-proposal__label">
+            {proposal.label ?? proposal.commandId}
+          </span>
+          <code className="chat-command-proposal__command-id">{proposal.commandId}</code>
+        </div>
+        <Badge variant={getPolicyBadgeVariant(proposal.policy)}>
+          {getWorkbenchCommandExecutionPolicyLabel(proposal.policy)}
+        </Badge>
+      </div>
+      {proposal.description ? (
+        <p className="chat-command-proposal__description">{proposal.description}</p>
+      ) : null}
+      {argsPreview ? (
+        <pre className="chat-command-proposal__args ui-workbench-scrollbar">{argsPreview}</pre>
+      ) : null}
+      {statusLabel ? <p className="chat-command-proposal__status">{statusLabel}</p> : null}
+      {showActions ? (
+        <div className="chat-command-proposal__actions">
+          {onDeny ? (
+            <Button compact type="button" onClick={() => onDeny(proposal)}>
+              Deny
+            </Button>
+          ) : null}
+          {onAllow ? (
+            <Button compact type="button" variant="primary" onClick={() => onAllow(proposal)}>
+              Allow
+            </Button>
+          ) : null}
+        </div>
+      ) : null}
+    </article>
+  );
+}

package/src/workbench/chat/ChatComposer.tsx

@@ -7,6 +7,8 @@ import {
   type ReactNode,
   type TextareaHTMLAttributes,
 } from 'react';
+import { IconButton } from '../../primitives/icon-button';
+import { TextArea } from '../../primitives/text-area';
 import { cx } from '../../utils/cx';
 
 export interface ChatComposerProps extends Omit<
@@ -69,10 +71,9 @@ export const ChatComposer = forwardRef<HTMLTextAreaElement, ChatComposerProps>(
     }, [value]);
 
     const handleSubmit = () => {
-      const trimmed = value.trim();
-      if (!trimmed || disabled || isRunning) return;
+      if (!value || disabled || isRunning) return;
 
-      onSubmit(trimmed);
+      onSubmit(value);
       window.requestAnimationFrame(() => {
         if (!textareaRef.current) return;
 
@@ -81,6 +82,13 @@ export const ChatComposer = forwardRef<HTMLTextAreaElement, ChatComposerProps>(
       });
     };
 
+    const handleCommandClick = () => {
+      onCommandClick?.();
+      window.requestAnimationFrame(() => {
+        textareaRef.current?.focus();
+      });
+    };
+
     const handleKeyDown = (event: KeyboardEvent<HTMLTextAreaElement>) => {
       props.onKeyDown?.(event);
       if (event.defaultPrevented) return;
@@ -95,12 +103,14 @@ export const ChatComposer = forwardRef<HTMLTextAreaElement, ChatComposerProps>(
       <div className="composer">
         {commandSuggestPopover}
         <div className="composer__box">
-          <textarea
+          <TextArea
             ref={textareaRef}
             {...props}
             className={cx('composer__textarea', 'ui-workbench-scrollbar', className)}
+            controlWidth="full"
             disabled={disabled}
             placeholder={placeholder}
+            resize="none"
             rows={1}
             value={value}
             onChange={(event) => onValueChange(event.currentTarget.value)}
@@ -112,49 +122,37 @@ export const ChatComposer = forwardRef<HTMLTextAreaElement, ChatComposerProps>(
               {toolbarStart}
               {showTools ? (
                 <>
-                  <button
-                    aria-label={contextLabel}
+                  <IconButton
                     className="composer__tool-btn"
-                    title={contextLabel}
-                    type="button"
+                    icon="add"
+                    label={contextLabel}
                     onClick={onContextClick}
-                  >
-                    <i className="codicon codicon-add" />
-                  </button>
-                  <button
-                    aria-label={commandLabel}
+                  />
+                  <IconButton
                     className="composer__tool-btn"
-                    title={commandLabel}
-                    type="button"
-                    onClick={onCommandClick}
-                  >
-                    <i className="codicon codicon-terminal" />
-                  </button>
+                    icon="terminal"
+                    label={commandLabel}
+                    onClick={handleCommandClick}
+                  />
                 </>
               ) : null}
             </div>
             <div className="composer__toolbar-right">
               {isRunning ? (
-                <button
-                  aria-label={cancelLabel}
+                <IconButton
                   className="composer__send-btn composer__send-btn--cancel"
-                  title={cancelLabel}
-                  type="button"
+                  icon="stop-circle"
+                  label={cancelLabel}
                   onClick={onCancel}
-                >
-                  <i className="codicon codicon-stop-circle" />
-                </button>
+                />
               ) : (
-                <button
-                  aria-label={submitLabel}
+                <IconButton
                   className="composer__send-btn"
-                  disabled={disabled || !value.trim()}
-                  title={submitLabel}
-                  type="button"
+                  disabled={disabled || !value}
+                  icon="send"
+                  label={submitLabel}
                   onClick={handleSubmit}
-                >
-                  <i className="codicon codicon-send" />
-                </button>
+                />
               )}
             </div>
           </div>

package/src/workbench/chat/ChatConversationBar.tsx

@@ -0,0 +1,134 @@
+import { useCallback, useId, useRef, useState, type ReactNode } from 'react';
+import { ContextMenu, type ContextMenuItem } from '../../overlay/ContextMenu';
+import { Button } from '../../primitives/button';
+import { IconButton } from '../../primitives/icon-button';
+import { ChatHistoryMenu } from './ChatHistoryMenu';
+import type {
+  WorkbenchChatConversation,
+  WorkbenchChatConversationLabels,
+} from './chatConversation';
+import { defaultWorkbenchChatConversationLabels } from './chatConversation';
+
+export interface ChatConversationBarProps {
+  activeConversationId: string;
+  conversations: readonly WorkbenchChatConversation[];
+  labels?: Partial<WorkbenchChatConversationLabels> | undefined;
+  moreMenuItems?: readonly ContextMenuItem[] | undefined;
+  onActivate: (conversationId: string) => void;
+  onCreate: () => void;
+  onDelete: (conversationId: string) => void;
+  onRename: (conversationId: string, title: string) => void;
+  /** Optional slot for a second pill next to the active conversation control. */
+  secondaryPill?: ReactNode | undefined;
+}
+
+export function ChatConversationBar({
+  activeConversationId,
+  conversations,
+  labels: labelOverrides,
+  moreMenuItems,
+  onActivate,
+  onCreate,
+  onDelete,
+  onRename,
+  secondaryPill,
+}: ChatConversationBarProps) {
+  const labels = { ...defaultWorkbenchChatConversationLabels, ...labelOverrides };
+  const pillRef = useRef<HTMLButtonElement>(null);
+  const metaTooltipId = useId();
+  const [menu, setMenu] = useState<{ kind: 'history' | 'more'; x: number; y: number } | null>(null);
+
+  const activeConversation = conversations.find(
+    (conversation) => conversation.id === activeConversationId,
+  );
+  const activeTitle = activeConversation?.title ?? labels.newChat;
+
+  const openMenu = useCallback((kind: 'history' | 'more', anchor: HTMLElement) => {
+    const rect = anchor.getBoundingClientRect();
+    setMenu({
+      kind,
+      x: rect.left,
+      y: rect.bottom + 4,
+    });
+  }, []);
+
+  const closeMenu = useCallback(() => {
+    setMenu(null);
+  }, []);
+
+  return (
+    <>
+      <div className="chat-conversation-bar">
+        <div className="chat-conversation-bar__pill-wrap">
+          <Button
+            ref={pillRef}
+            aria-describedby={activeConversation?.metaTooltip ? metaTooltipId : undefined}
+            aria-expanded={menu?.kind === 'history'}
+            aria-haspopup="menu"
+            aria-label={labels.historyTitle(activeTitle)}
+            className="chat-conversation-bar__pill"
+            title={activeTitle}
+            onClick={() => {
+              if (pillRef.current) openMenu('history', pillRef.current);
+            }}
+          >
+            <span className="chat-conversation-bar__pill-label">{activeTitle}</span>
+            <i aria-hidden="true" className="codicon codicon-chevron-down" />
+          </Button>
+
+          {activeConversation?.metaTooltip ? (
+            <div className="chat-conversation-bar__meta-wrap" id={metaTooltipId} role="tooltip">
+              <div className="chat-conversation-bar__meta">{activeConversation.metaTooltip}</div>
+            </div>
+          ) : null}
+        </div>
+
+        {secondaryPill}
+
+        <IconButton
+          className="chat-conversation-bar__icon-btn"
+          compact
+          icon="codicon-add"
+          label={labels.newChatAction}
+          onClick={() => onCreate()}
+        />
+
+        {moreMenuItems?.length ? (
+          <IconButton
+            className="chat-conversation-bar__icon-btn"
+            compact
+            icon="codicon-ellipsis"
+            label={labels.moreActions}
+            onClick={(event) => openMenu('more', event.currentTarget)}
+          />
+        ) : null}
+      </div>
+
+      {menu?.kind === 'history' ? (
+        <ChatHistoryMenu
+          activeConversationId={activeConversationId}
+          conversations={conversations}
+          labels={labels}
+          x={menu.x}
+          y={menu.y}
+          onActivate={onActivate}
+          onClose={closeMenu}
+          onCreate={onCreate}
+          onDelete={onDelete}
+          onRename={onRename}
+        />
+      ) : null}
+
+      {menu?.kind === 'more' && moreMenuItems?.length ? (
+        <ContextMenu
+          ariaLabel={labels.moreActions}
+          className="chat-conversation-bar__menu"
+          items={[...moreMenuItems]}
+          x={menu.x}
+          y={menu.y}
+          onClose={closeMenu}
+        />
+      ) : null}
+    </>
+  );
+}

package/src/workbench/chat/ChatHistoryMenu.tsx

@@ -0,0 +1,171 @@
+import { useCallback, useEffect, useRef, useState } from 'react';
+import { ContextMenu } from '../../overlay/ContextMenu';
+import { useClampedFixedOverlayPosition } from '../../overlay/useClampedFixedOverlayPosition';
+import { useFixedOverlayDismiss } from '../../overlay/useFixedOverlayDismiss';
+import { Button } from '../../primitives/button';
+import { ChatHistoryMenuRow } from './ChatHistoryMenuRow';
+import { ChatRenameDialog } from './ChatRenameDialog';
+import type {
+  WorkbenchChatConversation,
+  WorkbenchChatConversationLabels,
+} from './chatConversation';
+import { defaultWorkbenchChatConversationLabels } from './chatConversation';
+import { buildChatHistoryRowMenuItems } from './chatHistoryRowMenuItems';
+
+export interface ChatHistoryMenuProps {
+  activeConversationId: string;
+  conversations: readonly WorkbenchChatConversation[];
+  labels?: Partial<WorkbenchChatConversationLabels> | undefined;
+  x: number;
+  y: number;
+  onActivate: (conversationId: string) => void;
+  onClose: () => void;
+  onCreate: () => void;
+  onDelete: (conversationId: string) => void;
+  onRename: (conversationId: string, title: string) => void;
+}
+
+export function ChatHistoryMenu({
+  activeConversationId,
+  conversations,
+  labels: labelOverrides,
+  x,
+  y,
+  onActivate,
+  onClose,
+  onCreate,
+  onDelete,
+  onRename,
+}: ChatHistoryMenuProps) {
+  const labels = { ...defaultWorkbenchChatConversationLabels, ...labelOverrides };
+  const ref = useRef<HTMLDivElement>(null);
+  const position = useClampedFixedOverlayPosition(ref, { x, y }, conversations.length);
+  const [rowMenu, setRowMenu] = useState<{
+    conversation: WorkbenchChatConversation;
+    x: number;
+    y: number;
+  } | null>(null);
+  const [renameTarget, setRenameTarget] = useState<WorkbenchChatConversation | null>(null);
+  const canDeleteAny = conversations.length > 1;
+
+  const handleDeleteConversation = useCallback(
+    (conversationId: string) => {
+      if (!canDeleteAny) return;
+      onDelete(conversationId);
+      setRowMenu(null);
+      onClose();
+    },
+    [canDeleteAny, onClose, onDelete],
+  );
+
+  const handleEscape = useCallback(() => {
+    if (renameTarget) {
+      setRenameTarget(null);
+      return true;
+    }
+
+    if (rowMenu) {
+      setRowMenu(null);
+      return true;
+    }
+
+    return false;
+  }, [renameTarget, rowMenu]);
+
+  useFixedOverlayDismiss({
+    containerRef: ref,
+    ignoreOutsidePointer: Boolean(rowMenu || renameTarget),
+    onClose,
+    onEscape: handleEscape,
+  });
+
+  useEffect(() => {
+    ref.current?.querySelector<HTMLButtonElement>('.chat-history-menu__select')?.focus();
+  }, []);
+
+  return (
+    <>
+      <div
+        ref={ref}
+        aria-label={labels.ariaHistoryMenu}
+        className="ui-context-menu chat-history-menu"
+        data-has-icons="true"
+        data-has-shortcuts="false"
+        role="menu"
+        style={{ left: position.x, top: position.y, position: 'fixed' }}
+      >
+        <Button
+          className="ui-context-menu__item"
+          role="menuitem"
+          onClick={() => {
+            onCreate();
+            onClose();
+          }}
+        >
+          <span className="ui-context-menu__icon">
+            <i aria-hidden="true" className="codicon codicon-add" />
+          </span>
+          <span className="ui-context-menu__label">{labels.newChat}</span>
+        </Button>
+
+        <div className="ui-context-menu__separator" role="separator" />
+
+        {conversations.map((conversation) => (
+          <ChatHistoryMenuRow
+            key={conversation.id}
+            canDeleteAny={canDeleteAny}
+            conversation={conversation}
+            isActive={conversation.id === activeConversationId}
+            labels={labels}
+            onActivate={() => {
+              onActivate(conversation.id);
+              onClose();
+            }}
+            onDelete={() => handleDeleteConversation(conversation.id)}
+            onOpenRowMenu={(anchor) =>
+              setRowMenu({
+                conversation,
+                x: anchor.x,
+                y: anchor.y,
+              })
+            }
+          />
+        ))}
+      </div>
+
+      {rowMenu ? (
+        <ContextMenu
+          ariaLabel={`${labels.rename}: ${rowMenu.conversation.title}`}
+          className="chat-history-menu__row-menu"
+          items={buildChatHistoryRowMenuItems(
+            rowMenu.conversation,
+            labels,
+            canDeleteAny,
+            () => {
+              setRowMenu(null);
+              setRenameTarget(rowMenu.conversation);
+            },
+            () => handleDeleteConversation(rowMenu.conversation.id),
+          )}
+          x={rowMenu.x}
+          y={rowMenu.y}
+          onClose={() => setRowMenu(null)}
+        />
+      ) : null}
+
+      {renameTarget ? (
+        <ChatRenameDialog
+          key={renameTarget.id}
+          conversation={renameTarget}
+          labels={labels}
+          onCancel={() => setRenameTarget(null)}
+          onRename={(title) => {
+            onRename(renameTarget.id, title);
+            setRenameTarget(null);
+            onClose();
+          }}
+        />
+      ) : null}
+    </>
+  );
+}