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

package/src/workbench/chat/chat-ui.css

@@ -379,6 +379,14 @@
   margin-top: 2px;
 }
 
+.message__attachments {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 6px;
+  margin-top: 6px;
+  max-width: 100%;
+}
+
 .message__after {
   display: flex;
   flex-wrap: wrap;

package/src/workbench/chat/chatConversation.ts

@@ -4,9 +4,9 @@ export interface WorkbenchChatConversation {
   id: string;
   title: string;
   /** Short secondary line shown in history menu rows. */
-  metaSummary?: string | undefined;
+  metaSummary?: string;
   /** Tooltip content for the active conversation pill. */
-  metaTooltip?: ReactNode | undefined;
+  metaTooltip?: ReactNode;
 }
 
 export interface WorkbenchChatConversationLabels {

package/src/workbench/chat/chatMessageMeta.tsx

@@ -118,8 +118,8 @@ export function toChatMessageTimeDateTime(value: ChatMessageTimestampInput): str
 export function getPeerChatSenderKey(
   message: ChatMessage,
   options: {
-    assistantLabel?: string | undefined;
-    userLabel?: string | undefined;
+    assistantLabel?: string;
+    userLabel?: string;
   } = {},
 ): string {
   if (message.source === 'user') {
@@ -133,8 +133,8 @@ export function shouldShowPeerChatSenderLabel(
   messages: readonly ChatMessage[],
   index: number,
   options: {
-    assistantLabel?: string | undefined;
-    userLabel?: string | undefined;
+    assistantLabel?: string;
+    userLabel?: string;
   } = {},
 ): boolean {
   const message = messages[index];

package/src/workbench/chat/index.ts

@@ -5,6 +5,7 @@ export type { ChatCommandProposalCardProps } from './ChatCommandProposalCard';
 export { ChatPhasedRunProgress } from './ChatPhasedRunProgress';
 export type {
   ChatPhasedRunProgressAction,
+  ChatPhasedRunProgressLabels,
   ChatPhasedRunProgressProps,
   ChatRunPhase,
   ChatRunPhaseStatus,

package/src/workbench/chat/types.ts

@@ -1,6 +1,6 @@
 import type { ReactNode } from 'react';
 
-import type { WorkbenchCommandExecutionPolicy } from '../command-model';
+import type { WorkbenchCommandExecutionPolicy } from '../commands/command-model';
 
 export type ChatMessageSource = 'assistant' | 'user';
 
@@ -15,11 +15,11 @@ export type ChatCommandProposalStatus =
   'pending' | 'running' | 'allowed' | 'denied' | 'blocked' | 'executed' | 'failed';
 
 export interface ChatCommandProposal {
-  args?: readonly unknown[] | undefined;
+  args?: readonly unknown[];
   commandId: string;
-  description?: string | undefined;
+  description?: string;
   id: string;
-  label?: string | undefined;
+  label?: string;
   policy: WorkbenchCommandExecutionPolicy;
   status: ChatCommandProposalStatus;
 }
@@ -27,13 +27,13 @@ export interface ChatCommandProposal {
 export type ChatMessageTimestamp = number | Date | string;
 
 export interface ChatMessage {
-  commandProposals?: readonly ChatCommandProposal[] | undefined;
+  commandProposals?: readonly ChatCommandProposal[];
   content: string;
   /**
    * How `content` is rendered. Defaults to markdown for assistant-layout
    * assistant messages; otherwise plain text.
    */
-  contentMode?: ChatMessageContentMode | undefined;
+  contentMode?: ChatMessageContentMode;
   createdAt?: string;
   id: string;
   label?: ReactNode;
@@ -41,5 +41,5 @@ export interface ChatMessage {
   /** Preferred timestamp for display; falls back to `createdAt` when omitted. */
   timestamp?: ChatMessageTimestamp;
   /** Optional visual tone for host-driven status / error messages. */
-  tone?: ChatMessageTone | undefined;
+  tone?: ChatMessageTone;
 }

package/src/workbench/chat/useCancelRuntimeOnUnmount.ts

@@ -5,10 +5,10 @@ export const DEFAULT_RUNTIME_UNMOUNT_CANCELLABLE_STATUSES = ['running'] as const
 
 export interface UseCancelRuntimeOnUnmountOptions<TStatus extends string = RuntimeStatus> {
   cancel: () => void;
-  cancellableStatuses?: readonly TStatus[] | undefined;
-  enabled?: boolean | undefined;
-  getStatus?: (() => TStatus) | undefined;
-  status?: TStatus | undefined;
+  cancellableStatuses?: readonly TStatus[];
+  enabled?: boolean;
+  getStatus?: () => TStatus;
+  status?: TStatus;
 }
 
 export function shouldCancelRuntimeOnUnmount(

package/src/workbench/chat/useChatPrependPagination.ts

@@ -8,23 +8,23 @@ import {
 } from './chatScroll';
 
 export interface UseChatPrependPaginationOptions {
-  autoScrollBottomThreshold?: number | undefined;
-  getScrollContainer?: ((listElement: HTMLDivElement | null) => HTMLElement | null) | undefined;
-  initialVisibleItemCount?: number | undefined;
-  isStreaming?: boolean | undefined;
+  autoScrollBottomThreshold?: number;
+  getScrollContainer?: (listElement: HTMLDivElement | null) => HTMLElement | null;
+  initialVisibleItemCount?: number;
+  isStreaming?: boolean;
   itemCount: number;
-  lastItemId?: string | undefined;
+  lastItemId?: string;
   /** Content revision for the trailing item (e.g. streaming chunk updates). */
-  lastItemRevision?: string | undefined;
-  paginationKey?: string | undefined;
-  rootMargin?: string | undefined;
+  lastItemRevision?: string;
+  paginationKey?: string;
+  rootMargin?: string;
   /**
    * - `true` (default): always scroll to the latest message
    * - `'auto'`: scroll only when the container is already near the bottom
    * - `false`: never auto-scroll
    */
-  stickToBottom?: boolean | 'auto' | undefined;
-  visibleItemPageSize?: number | undefined;
+  stickToBottom?: boolean | 'auto';
+  visibleItemPageSize?: number;
 }
 
 export interface UseChatPrependPaginationResult {

package/src/workbench/chat/useSlashCommandSuggest.ts

@@ -5,7 +5,7 @@ import {
   getNextWorkbenchCommandIndex,
   isWorkbenchCommandRunnable,
   type WorkbenchCommandDescriptor,
-} from '../CommandPalette';
+} from '../commands/CommandPalette';
 import { getSlashCommandQuery, isSlashCommandInput } from './slashCommand';
 
 type SlashCommandSuggestKeyboardEvent = Pick<

package/src/workbench/{WorkbenchModalPortal.tsx → chrome/WorkbenchModalPortal.tsx}

@@ -1,7 +1,7 @@
 import { useLayoutEffect, useRef, useState, type ReactNode } from 'react';
 import { createPortal } from 'react-dom';
 
-import { WORKBENCH_OVERLAYS_CLASS } from '../modal/modalContainer';
+import { WORKBENCH_OVERLAYS_CLASS } from '../../modal/modalContainer';
 import { useWorkbenchOverlaysContainer } from './workbenchOverlaysContext';
 
 export interface WorkbenchModalPortalProps {

package/src/workbench/chrome/workbench-chrome.css

@@ -0,0 +1,4 @@
+/* Workbench shell and platform chrome */
+@import '../shell/index.css';
+@import './index.css';
+@import '../command-palette/command-palette.css';

package/src/workbench/{CommandGroupShell.tsx → commands/CommandGroupShell.tsx}

@@ -1,6 +1,6 @@
 import { useId, useMemo, type ComponentPropsWithRef, type ReactNode } from 'react';
-import { EmptyState } from '../primitives/empty-state';
-import { cx } from '../utils/cx';
+import { EmptyState } from '../../primitives/empty-state';
+import { cx } from '../../utils/cx';
 import { WorkbenchCommandList } from './CommandList';
 import {
   filterWorkbenchCommands,

package/src/workbench/{CommandList.tsx → commands/CommandList.tsx}

@@ -1,8 +1,8 @@
 import { useEffect, useId, useRef, type ComponentPropsWithRef, type ReactNode } from 'react';
-import { Button } from '../primitives/button';
-import { EmptyState } from '../primitives/empty-state';
-import { cxCodicon } from '../utils/codicon';
-import { cx } from '../utils/cx';
+import { Button } from '../../primitives/button';
+import { EmptyState } from '../../primitives/empty-state';
+import { cxCodicon } from '../../utils/codicon';
+import { cx } from '../../utils/cx';
 import {
   getWorkbenchCommandExecutionLabel,
   getWorkbenchCommandStatusLabel,
@@ -11,7 +11,7 @@ import {
   type WorkbenchCommandRunContext,
   type WorkbenchCommandRunSource,
 } from './command-model';
-import { isWorkbenchStatusBusy } from './status';
+import { isWorkbenchStatusBusy } from '../shell/status';
 
 function commandIcon(command: WorkbenchCommandDescriptor) {
   if (!command.icon) return null;

package/src/workbench/{CommandPalette.tsx → commands/CommandPalette.tsx}

@@ -9,9 +9,10 @@ import {
   type KeyboardEvent,
   type ReactNode,
 } from 'react';
-import { IconButton } from '../primitives/icon-button';
-import { TextInput } from '../primitives/text-input';
-import { cx } from '../utils/cx';
+import { useModalFocusTrap } from '../../modal/useModalFocusTrap';
+import { IconButton } from '../../primitives/icon-button';
+import { TextInput } from '../../primitives/text-input';
+import { cx } from '../../utils/cx';
 import {
   filterWorkbenchCommands,
   getNextWorkbenchCommandIndex,
@@ -130,8 +131,8 @@ export function WorkbenchCommandPalette({
 }: WorkbenchCommandPaletteProps) {
   const titleId = useId();
   const listId = useId();
+  const dialogRef = useRef<HTMLDivElement>(null);
   const inputRef = useRef<HTMLInputElement>(null);
-  const previousFocusRef = useRef<HTMLElement | null>(null);
   const [uncontrolledActiveCommandId, setUncontrolledActiveCommandId] = useState<string>();
   const [resolvedQuery, setResolvedQuery] = useControllableCommandQuery({
     defaultQuery,
@@ -164,15 +165,13 @@ export function WorkbenchCommandPalette({
     [activeCommandId, onActiveCommandChange],
   );
 
-  const restoreFocus = useCallback(() => {
-    if (!restoreFocusOnClose) return;
-    previousFocusRef.current?.focus();
-  }, [restoreFocusOnClose]);
-
-  const closePalette = useCallback(() => {
-    restoreFocus();
-    onClose();
-  }, [onClose, restoreFocus]);
+  useModalFocusTrap({
+    enabled: open,
+    containerRef: dialogRef,
+    initialFocusRef: inputRef,
+    onClose,
+    restoreFocusOnClose,
+  });
 
   const runCommand = useCallback(
     (command: WorkbenchCommandDescriptor, context: WorkbenchCommandRunContext) => {
@@ -182,18 +181,6 @@ export function WorkbenchCommandPalette({
     [onRunCommand],
   );
 
-  useEffect(() => {
-    if (!open) return;
-
-    previousFocusRef.current = document.activeElement as HTMLElement | null;
-    const frame = window.requestAnimationFrame(() => inputRef.current?.focus());
-
-    return () => {
-      window.cancelAnimationFrame(frame);
-      restoreFocus();
-    };
-  }, [open, restoreFocus]);
-
   useEffect(() => {
     if (!open) return;
     if (activeCommandId !== undefined) return;
@@ -207,12 +194,6 @@ export function WorkbenchCommandPalette({
 
   const handlePaletteKeyDown = useCallback(
     (event: WorkbenchCommandPaletteKeyEvent) => {
-      if (event.key === 'Escape') {
-        event.preventDefault();
-        closePalette();
-        return;
-      }
-
       if (
         event.key !== 'ArrowDown' &&
         event.key !== 'ArrowUp' &&
@@ -275,15 +256,7 @@ export function WorkbenchCommandPalette({
         updateActiveCommand(filteredCommands[nextIndex]?.id);
       }
     },
-    [
-      activeCommand,
-      activeIndex,
-      closePalette,
-      commandQuery,
-      filteredCommands,
-      runCommand,
-      updateActiveCommand,
-    ],
+    [activeCommand, activeIndex, commandQuery, filteredCommands, runCommand, updateActiveCommand],
   );
 
   useEffect(() => {
@@ -308,13 +281,14 @@ export function WorkbenchCommandPalette({
   if (!open) return null;
 
   return (
-    <div className="ui-workbench-command-palette-overlay" onClick={closePalette}>
+    <div className="ui-workbench-command-palette-overlay" onClick={onClose}>
       <div
         aria-labelledby={titleId}
         aria-modal="true"
         className={cx('ui-workbench-command-palette', className)}
         role="dialog"
         {...props}
+        ref={dialogRef}
         onClick={(event) => event.stopPropagation()}
       >
         <div className="ui-workbench-command-palette__header">
@@ -325,7 +299,7 @@ export function WorkbenchCommandPalette({
             className="ui-workbench-command-palette__close"
             icon="codicon-close"
             label={closeLabel}
-            onClick={closePalette}
+            onClick={onClose}
           />
         </div>
         <div className="ui-workbench-command-palette__search">

package/src/workbench/{ConfirmationFlow.tsx → commands/ConfirmationFlow.tsx}

@@ -1,14 +1,14 @@
 import { useState, type FormEvent, type ReactNode } from 'react';
-import './shell/confirmation-flow.css';
-import { Modal } from '../modal/Modal';
-import { Button } from '../primitives/button';
-import { cx } from '../utils/cx';
+import '../shell/confirmation-flow.css';
+import { Modal } from '../../modal/Modal';
+import { Button } from '../../primitives/button';
+import { cx } from '../../utils/cx';
 import {
   getWorkbenchStatusLabel,
   isWorkbenchStatusBusy,
   isWorkbenchStatusDisabled,
   type WorkbenchStatus,
-} from './status';
+} from '../shell/status';
 
 export type WorkbenchConfirmationVariant = 'default' | 'danger';
 

package/src/workbench/{ShortcutCommandBridge.tsx → commands/ShortcutCommandBridge.tsx}

@@ -5,6 +5,7 @@ import {
   type CommandRegistry,
   type CommandValue,
 } from '@workbench-kit/platform';
+import { normalizeKeyToken } from '../../utils/normalizeKeyToken';
 
 export type WorkbenchShortcutPlatform = 'linux' | 'mac' | 'unknown' | 'windows';
 
@@ -105,19 +106,6 @@ function getDefaultShortcutPlatform(): WorkbenchShortcutPlatform {
   return 'unknown';
 }
 
-function normalizeKeyToken(token: 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';
-  if (key === 'arrowup' || key === 'up') return 'arrowup';
-  if (key === 'arrowdown' || key === 'down') return 'arrowdown';
-  if (key === 'arrowleft' || key === 'left') return 'arrowleft';
-  if (key === 'arrowright' || key === 'right') return 'arrowright';
-  return key;
-}
-
 function normalizeEventKey(key: string) {
   if (key === ' ') return 'space';
   return normalizeKeyToken(key);