@shepai/cli 1.182.0 → 1.182.1-pr550.9abbae3

package/dist/src/presentation/web/components/features/applications/applications-page-client.stories.js

@@ -0,0 +1,93 @@
+import { ApplicationsPageClient } from './applications-page-client.js';
+import { ApplicationStatus } from '../../../../../../packages/core/src/domain/generated/output.js';
+const now = new Date().toISOString();
+const mockApps = [
+    {
+        id: '1',
+        name: 'Weather Dashboard',
+        slug: 'weather-dashboard',
+        description: 'Real-time weather forecasts with interactive maps and alerts',
+        repositoryPath: '/home/user/projects/weather-dashboard',
+        additionalPaths: [],
+        status: ApplicationStatus.Idle,
+        setupComplete: true,
+        effectiveStatus: 'ready',
+        createdAt: now,
+        updatedAt: now,
+    },
+    {
+        id: '2',
+        name: 'Task Manager',
+        slug: 'task-manager',
+        description: 'Kanban-style task management with team collaboration features',
+        repositoryPath: '/home/user/projects/task-manager',
+        additionalPaths: ['/home/user/projects/shared-ui'],
+        status: ApplicationStatus.Active,
+        setupComplete: false,
+        effectiveStatus: 'building',
+        createdAt: now,
+        updatedAt: now,
+    },
+    {
+        id: '3',
+        name: 'E-Commerce Store',
+        slug: 'ecommerce-store',
+        description: 'Full-featured online store with payments, inventory, and admin panel',
+        repositoryPath: '/home/user/projects/ecommerce',
+        additionalPaths: [],
+        status: ApplicationStatus.Error,
+        setupComplete: false,
+        effectiveStatus: 'failed',
+        createdAt: now,
+        updatedAt: now,
+    },
+    {
+        id: '4',
+        name: 'Portfolio Site',
+        slug: 'portfolio-site',
+        description: 'Personal portfolio with blog and project showcase',
+        repositoryPath: '/home/user/projects/portfolio',
+        additionalPaths: [],
+        status: ApplicationStatus.Idle,
+        setupComplete: false,
+        effectiveStatus: 'interrupted',
+        createdAt: now,
+        updatedAt: now,
+    },
+    {
+        id: '5',
+        name: 'Chat Application',
+        slug: 'chat-app',
+        description: 'Real-time messaging app with channels and direct messages',
+        repositoryPath: '/home/user/projects/chat-app',
+        additionalPaths: ['/home/user/projects/chat-api', '/home/user/projects/shared-types'],
+        status: ApplicationStatus.Idle,
+        setupComplete: true,
+        effectiveStatus: 'ready',
+        createdAt: now,
+        updatedAt: now,
+    },
+];
+const meta = {
+    title: 'Features/ApplicationsPageClient',
+    component: ApplicationsPageClient,
+    parameters: {
+        layout: 'padded',
+    },
+    tags: ['autodocs'],
+};
+export default meta;
+export const Default = {
+    args: { applications: mockApps },
+};
+export const Empty = {
+    args: { applications: [] },
+};
+export const SingleApp = {
+    args: { applications: [mockApps[0]] },
+};
+export const AllActive = {
+    args: {
+        applications: mockApps.map((app) => ({ ...app, status: ApplicationStatus.Active })),
+    },
+};

package/dist/src/presentation/web/components/features/chat/ChatComposer.d.ts

@@ -13,6 +13,8 @@ export interface ChatComposerProps {
     onPickFiles: () => void;
     /** Agent/model picker rendered in the controls row. */
     agentPicker?: React.ReactNode;
+    /** When true, the composer is visually disabled and input is blocked. */
+    disabled?: boolean;
 }
-export declare function ChatComposer({ attachments, isDragOver, uploadError, onDragEnter, onDragLeave, onDragOver, onDrop, onPaste, onRemoveAttachment, onNotesChange, onPickFiles, agentPicker, }: ChatComposerProps): import("react/jsx-runtime").JSX.Element;
+export declare function ChatComposer({ attachments, isDragOver, uploadError, onDragEnter, onDragLeave, onDragOver, onDrop, onPaste, onRemoveAttachment, onNotesChange, onPickFiles, agentPicker, disabled, }: ChatComposerProps): import("react/jsx-runtime").JSX.Element;
 //# sourceMappingURL=ChatComposer.d.ts.map

package/dist/src/presentation/web/components/features/chat/ChatComposer.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ChatComposer.d.ts","sourceRoot":"","sources":["../../../../../../../src/presentation/web/components/features/chat/ChatComposer.tsx"],"names":[],"mappings":"AASA,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,yBAAyB,CAAC;AAE9D,MAAM,WAAW,iBAAiB;IAChC,WAAW,EAAE,cAAc,EAAE,CAAC;IAC9B,UAAU,EAAE,OAAO,CAAC;IACpB,WAAW,EAAE,MAAM,GAAG,IAAI,CAAC;IAC3B,WAAW,EAAE,CAAC,CAAC,EAAE,KAAK,CAAC,SAAS,KAAK,IAAI,CAAC;IAC1C,WAAW,EAAE,CAAC,CAAC,EAAE,KAAK,CAAC,SAAS,KAAK,IAAI,CAAC;IAC1C,UAAU,EAAE,CAAC,CAAC,EAAE,KAAK,CAAC,SAAS,KAAK,IAAI,CAAC;IACzC,MAAM,EAAE,CAAC,CAAC,EAAE,KAAK,CAAC,SAAS,KAAK,IAAI,CAAC;IACrC,OAAO,EAAE,CAAC,CAAC,EAAE,KAAK,CAAC,cAAc,KAAK,IAAI,CAAC;IAC3C,kBAAkB,EAAE,CAAC,EAAE,EAAE,MAAM,KAAK,IAAI,CAAC;IACzC,aAAa,EAAE,CAAC,EAAE,EAAE,MAAM,EAAE,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IACnD,WAAW,EAAE,MAAM,IAAI,CAAC;IACxB,uDAAuD;IACvD,WAAW,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;CAC/B;AAED,wBAAgB,YAAY,CAAC,EAC3B,WAAW,EACX,UAAU,EACV,WAAW,EACX,WAAW,EACX,WAAW,EACX,UAAU,EACV,MAAM,EACN,OAAO,EACP,kBAAkB,EAClB,aAAa,EACb,WAAW,EACX,WAAW,GACZ,EAAE,iBAAiB,2CAqFnB"}
+{"version":3,"file":"ChatComposer.d.ts","sourceRoot":"","sources":["../../../../../../../src/presentation/web/components/features/chat/ChatComposer.tsx"],"names":[],"mappings":"AASA,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,yBAAyB,CAAC;AAE9D,MAAM,WAAW,iBAAiB;IAChC,WAAW,EAAE,cAAc,EAAE,CAAC;IAC9B,UAAU,EAAE,OAAO,CAAC;IACpB,WAAW,EAAE,MAAM,GAAG,IAAI,CAAC;IAC3B,WAAW,EAAE,CAAC,CAAC,EAAE,KAAK,CAAC,SAAS,KAAK,IAAI,CAAC;IAC1C,WAAW,EAAE,CAAC,CAAC,EAAE,KAAK,CAAC,SAAS,KAAK,IAAI,CAAC;IAC1C,UAAU,EAAE,CAAC,CAAC,EAAE,KAAK,CAAC,SAAS,KAAK,IAAI,CAAC;IACzC,MAAM,EAAE,CAAC,CAAC,EAAE,KAAK,CAAC,SAAS,KAAK,IAAI,CAAC;IACrC,OAAO,EAAE,CAAC,CAAC,EAAE,KAAK,CAAC,cAAc,KAAK,IAAI,CAAC;IAC3C,kBAAkB,EAAE,CAAC,EAAE,EAAE,MAAM,KAAK,IAAI,CAAC;IACzC,aAAa,EAAE,CAAC,EAAE,EAAE,MAAM,EAAE,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IACnD,WAAW,EAAE,MAAM,IAAI,CAAC;IACxB,uDAAuD;IACvD,WAAW,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC9B,yEAAyE;IACzE,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB;AAED,wBAAgB,YAAY,CAAC,EAC3B,WAAW,EACX,UAAU,EACV,WAAW,EACX,WAAW,EACX,WAAW,EACX,UAAU,EACV,MAAM,EACN,OAAO,EACP,kBAAkB,EAClB,aAAa,EACb,WAAW,EACX,WAAW,EACX,QAAQ,GACT,EAAE,iBAAiB,2CAuFnB"}

package/dist/src/presentation/web/components/features/chat/ChatComposer.js

@@ -7,11 +7,11 @@ import { SendHorizontal, CircleStop, Paperclip } from 'lucide-react';
 import { cn } from '../../../lib/utils.js';
 import { Tooltip, TooltipContent, TooltipTrigger } from '../../ui/tooltip.js';
 import { AttachmentChip } from '../../common/attachment-chip/index.js';
-export function ChatComposer({ attachments, isDragOver, uploadError, onDragEnter, onDragLeave, onDragOver, onDrop, onPaste, onRemoveAttachment, onNotesChange, onPickFiles, agentPicker, }) {
+export function ChatComposer({ attachments, isDragOver, uploadError, onDragEnter, onDragLeave, onDragOver, onDrop, onPaste, onRemoveAttachment, onNotesChange, onPickFiles, agentPicker, disabled, }) {
     const { t } = useTranslation('web');
     const [isFocused, setIsFocused] = useState(false);
     const containerRef = useRef(null);
-    return (_jsx(ComposerPrimitive.Root, { className: "shrink-0 border-t p-3", children: _jsx("div", { onDragEnter: onDragEnter, onDragLeave: onDragLeave, onDragOver: onDragOver, onDrop: onDrop, className: cn('flex flex-col gap-1.5 rounded-md border-2 border-transparent p-1 transition-colors', isDragOver && 'border-primary/50 bg-primary/5'), children: _jsxs("div", { ref: containerRef, onFocus: () => setIsFocused(true), onBlur: () => setIsFocused(false), className: cn('border-input flex flex-col overflow-hidden rounded-md border shadow-xs transition-[color,box-shadow]', isFocused && 'ring-ring/50 border-ring ring-[3px]'), children: [_jsx(ComposerPrimitive.Input, { rows: 1, autoFocus: true, placeholder: t('chat.writeMessage'), onPaste: onPaste, className: "max-h-[4.5rem] min-h-0 resize-none rounded-none border-0 px-3 py-2.5 text-sm shadow-none focus:outline-none focus-visible:ring-0" }), attachments.length > 0 ? (_jsx("div", { className: "flex flex-wrap items-center gap-1.5 px-3 py-2", children: attachments.map((file) => (_jsx(AttachmentChip, { name: file.name, size: file.size, mimeType: file.mimeType, path: file.path, onRemove: () => onRemoveAttachment(file.id), loading: file.loading, notes: file.notes, onNotesChange: (notes) => onNotesChange(file.id, notes) }, file.id))) })) : null, uploadError ? _jsx("p", { className: "text-destructive px-3 pb-2 text-xs", children: uploadError }) : null, _jsxs("div", { className: "border-input flex items-center gap-3 border-t px-3 py-1.5", children: [agentPicker, _jsx("div", { className: "flex-1" }), _jsxs(Tooltip, { children: [_jsx(TooltipTrigger, { asChild: true, children: _jsx("button", { type: "button", onClick: onPickFiles, "aria-label": t('chat.attachFiles'), className: "text-muted-foreground hover:text-foreground cursor-pointer rounded p-1 transition-colors", children: _jsx(Paperclip, { className: "h-4 w-4" }) }) }), _jsx(TooltipContent, { side: "top", children: t('chat.attachFiles') })] }), _jsx(ChatComposerAction, {})] })] }) }) }));
+    return (_jsx(ComposerPrimitive.Root, { className: cn('shrink-0 border-t p-3', disabled && 'pointer-events-none opacity-50'), children: _jsx("div", { onDragEnter: onDragEnter, onDragLeave: onDragLeave, onDragOver: onDragOver, onDrop: onDrop, className: cn('flex flex-col gap-1.5 rounded-md border-2 border-transparent p-1 transition-colors', isDragOver && 'border-primary/50 bg-primary/5'), children: _jsxs("div", { ref: containerRef, onFocus: () => setIsFocused(true), onBlur: () => setIsFocused(false), className: cn('border-input flex flex-col overflow-hidden rounded-md border shadow-xs transition-[color,box-shadow]', isFocused && 'ring-ring/50 border-ring ring-[3px]'), children: [_jsx(ComposerPrimitive.Input, { rows: 1, autoFocus: true, placeholder: t('chat.writeMessage'), onPaste: onPaste, className: "max-h-[4.5rem] min-h-0 resize-none rounded-none border-0 px-3 py-2.5 text-sm shadow-none focus:outline-none focus-visible:ring-0" }), attachments.length > 0 ? (_jsx("div", { className: "flex flex-wrap items-center gap-1.5 px-3 py-2", children: attachments.map((file) => (_jsx(AttachmentChip, { name: file.name, size: file.size, mimeType: file.mimeType, path: file.path, onRemove: () => onRemoveAttachment(file.id), loading: file.loading, notes: file.notes, onNotesChange: (notes) => onNotesChange(file.id, notes) }, file.id))) })) : null, uploadError ? _jsx("p", { className: "text-destructive px-3 pb-2 text-xs", children: uploadError }) : null, _jsxs("div", { className: "border-input flex items-center gap-3 border-t px-3 py-1.5", children: [agentPicker, _jsx("div", { className: "flex-1" }), _jsxs(Tooltip, { children: [_jsx(TooltipTrigger, { asChild: true, children: _jsx("button", { type: "button", onClick: onPickFiles, "aria-label": t('chat.attachFiles'), className: "text-muted-foreground hover:text-foreground cursor-pointer rounded p-1 transition-colors", children: _jsx(Paperclip, { className: "h-4 w-4" }) }) }), _jsx(TooltipContent, { side: "top", children: t('chat.attachFiles') })] }), _jsx(ChatComposerAction, {})] })] }) }) }));
 }
 function ChatComposerAction() {
     return (_jsxs(_Fragment, { children: [_jsx(ThreadPrimitive.If, { running: false, children: _jsx(ComposerPrimitive.Send, { className: cn('bg-primary text-primary-foreground inline-flex h-8 w-8 shrink-0 items-center justify-center rounded-md', 'hover:bg-primary/90 disabled:pointer-events-none disabled:opacity-30', 'transition-colors'), children: _jsx(SendHorizontal, { className: "size-3.5" }) }) }), _jsx(ThreadPrimitive.If, { running: true, children: _jsx(ComposerPrimitive.Cancel, { className: cn('bg-destructive/10 text-destructive inline-flex h-8 w-8 shrink-0 items-center justify-center rounded-md', 'hover:bg-destructive/20', 'transition-colors'), children: _jsx(CircleStop, { className: "size-3.5" }) }) })] }));

package/dist/src/presentation/web/components/features/chat/ChatTab.d.ts

@@ -38,6 +38,8 @@ export interface ChatTabProps {
      * later.
      */
     workflowPlaceholder?: PlaceholderStep[];
+    /** Called when the user clicks Continue on an interrupted workflow step. */
+    onResumeWorkflow?: () => void;
 }
-export declare function ChatTab({ featureId, worktreePath, initialAgent, initialModel, initialChatState, hideHeader, onAllStepsComplete, workflowPlaceholder, }: ChatTabProps): import("react/jsx-runtime").JSX.Element;
+export declare function ChatTab({ featureId, worktreePath, initialAgent, initialModel, initialChatState, hideHeader, onAllStepsComplete, workflowPlaceholder, onResumeWorkflow, }: ChatTabProps): import("react/jsx-runtime").JSX.Element;
 //# sourceMappingURL=ChatTab.d.ts.map

package/dist/src/presentation/web/components/features/chat/ChatTab.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ChatTab.d.ts","sourceRoot":"","sources":["../../../../../../../src/presentation/web/components/features/chat/ChatTab.tsx"],"names":[],"mappings":"AAMA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,sFAAsF,CAAC;AAUtH,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,wBAAwB,CAAC;AAG9D,MAAM,WAAW,YAAY;IAC3B,SAAS,EAAE,MAAM,CAAC;IAClB,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,qEAAqE;IACrE,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,yEAAyE;IACzE,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB;;;OAGG;IACH,gBAAgB,CAAC,EAAE,SAAS,CAAC;IAC7B;;;;;OAKG;IACH,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB;;;;;OAKG;IACH,kBAAkB,CAAC,EAAE,MAAM,IAAI,CAAC;IAChC;;;;;;;;;;OAUG;IACH,mBAAmB,CAAC,EAAE,eAAe,EAAE,CAAC;CACzC;AAID,wBAAgB,OAAO,CAAC,EACtB,SAAS,EACT,YAAY,EACZ,YAAY,EACZ,YAAY,EACZ,gBAAgB,EAChB,UAAU,EACV,kBAAkB,EAClB,mBAAmB,GACpB,EAAE,YAAY,2CAiLd"}
+{"version":3,"file":"ChatTab.d.ts","sourceRoot":"","sources":["../../../../../../../src/presentation/web/components/features/chat/ChatTab.tsx"],"names":[],"mappings":"AAMA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,sFAAsF,CAAC;AAUtH,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,wBAAwB,CAAC;AAG9D,MAAM,WAAW,YAAY;IAC3B,SAAS,EAAE,MAAM,CAAC;IAClB,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,qEAAqE;IACrE,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,yEAAyE;IACzE,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB;;;OAGG;IACH,gBAAgB,CAAC,EAAE,SAAS,CAAC;IAC7B;;;;;OAKG;IACH,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB;;;;;OAKG;IACH,kBAAkB,CAAC,EAAE,MAAM,IAAI,CAAC;IAChC;;;;;;;;;;OAUG;IACH,mBAAmB,CAAC,EAAE,eAAe,EAAE,CAAC;IACxC,4EAA4E;IAC5E,gBAAgB,CAAC,EAAE,MAAM,IAAI,CAAC;CAC/B;AAID,wBAAgB,OAAO,CAAC,EACtB,SAAS,EACT,YAAY,EACZ,YAAY,EACZ,YAAY,EACZ,gBAAgB,EAChB,UAAU,EACV,kBAAkB,EAClB,mBAAmB,EACnB,gBAAgB,GACjB,EAAE,YAAY,2CAoLd"}

package/dist/src/presentation/web/components/features/chat/ChatTab.js

@@ -14,7 +14,7 @@ import { ChatComposer } from './ChatComposer.js';
 import { InteractionBubble } from './InteractionBubble.js';
 import { StepTracker } from './StepTracker.js';
 const IS_DEV = process.env.NODE_ENV === 'development';
-export function ChatTab({ featureId, worktreePath, initialAgent, initialModel, initialChatState, hideHeader, onAllStepsComplete, workflowPlaceholder, }) {
+export function ChatTab({ featureId, worktreePath, initialAgent, initialModel, initialChatState, hideHeader, onAllStepsComplete, workflowPlaceholder, onResumeWorkflow, }) {
     const [overrideAgent, setOverrideAgent] = useState(initialAgent);
     const [overrideModel, setOverrideModel] = useState(initialModel);
     const [debugMode, setDebugMode] = useState(false);
@@ -85,11 +85,12 @@ export function ChatTab({ featureId, worktreePath, initialAgent, initialModel, i
             toolMessages: [],
         }));
     const showTracker = trackerSteps.length > 0;
-    const composer = (_jsx(ChatComposer, { attachments: att.attachments, isDragOver: att.isDragOver, uploadError: att.uploadError, onDragEnter: att.handleDragEnter, onDragLeave: att.handleDragLeave, onDragOver: att.handleDragOver, onDrop: att.handleDrop, onPaste: att.handlePaste, onRemoveAttachment: att.removeAttachment, onNotesChange: att.updateNotes, onPickFiles: handlePickFiles, agentPicker: _jsx(AgentModelPicker, { initialAgentType: overrideAgent ?? 'claude-code', initialModel: overrideModel ?? 'claude-sonnet-4-6', mode: "override", onAgentModelChange: (agent, model) => {
+    const workflowInFlight = stepProgress.hasPlan === true && stepProgress.allDone !== true;
+    const composer = (_jsx(ChatComposer, { disabled: workflowInFlight, attachments: att.attachments, isDragOver: att.isDragOver, uploadError: att.uploadError, onDragEnter: att.handleDragEnter, onDragLeave: att.handleDragLeave, onDragOver: att.handleDragOver, onDrop: att.handleDrop, onPaste: att.handlePaste, onRemoveAttachment: att.removeAttachment, onNotesChange: att.updateNotes, onPickFiles: handlePickFiles, agentPicker: _jsx(AgentModelPicker, { initialAgentType: overrideAgent ?? 'claude-code', initialModel: overrideModel ?? 'claude-sonnet-4-6', mode: "override", onAgentModelChange: (agent, model) => {
                 setOverrideAgent(agent);
                 setOverrideModel(model);
             }, className: "w-55" }) }));
-    return (_jsxs("div", { className: "flex h-full min-h-0 flex-col", children: [hideHeader ? null : (_jsx(ChatHeader, { sessionInfo: sessionInfo, isAgentActive: status.isRunning, onClear: clearChat, debugMode: debugMode, onDebugToggle: IS_DEV ? setDebugMode : undefined })), _jsx("div", { className: "flex min-h-0 flex-1 flex-col", children: isChatLoading ? (_jsx(ChatSkeleton, {})) : (_jsx(AssistantRuntimeProvider, { runtime: runtime, children: _jsx(Thread, { composer: composer, hideEmpty: showTracker, beforeMessages: showTracker ? (_jsxs(_Fragment, { children: [initialRequestMessage ? (_jsx(InitialRequestBubble, { text: initialRequestMessage.content })) : null, _jsx(StepTracker, { steps: trackerSteps, collapsedSummary: stepProgress.hasPlan === true && stepProgress.allDone === true, activeStepId: stepProgress.activeStepId, liveStatus: stepProgress.liveStatus })] })) : undefined, afterMessages: pendingInteraction ? (_jsx(InteractionBubble, { interaction: pendingInteraction, onSubmit: respondToInteraction })) : undefined }) })) })] }));
+    return (_jsxs("div", { className: "flex h-full min-h-0 flex-col", children: [hideHeader ? null : (_jsx(ChatHeader, { sessionInfo: sessionInfo, isAgentActive: status.isRunning, onClear: clearChat, debugMode: debugMode, onDebugToggle: IS_DEV ? setDebugMode : undefined })), _jsx("div", { className: "flex min-h-0 flex-1 flex-col dark:bg-neutral-900/40", children: isChatLoading ? (_jsx(ChatSkeleton, {})) : (_jsx(AssistantRuntimeProvider, { runtime: runtime, children: _jsx(Thread, { composer: composer, hideEmpty: showTracker, beforeMessages: showTracker ? (_jsxs(_Fragment, { children: [initialRequestMessage ? (_jsx(InitialRequestBubble, { text: initialRequestMessage.content })) : null, _jsx(StepTracker, { steps: trackerSteps, collapsedSummary: stepProgress.hasPlan === true && stepProgress.allDone === true, activeStepId: stepProgress.activeStepId, liveStatus: stepProgress.liveStatus, onRetry: onResumeWorkflow })] })) : undefined, afterMessages: pendingInteraction ? (_jsx(InteractionBubble, { interaction: pendingInteraction, onSubmit: respondToInteraction })) : undefined }) })) })] }));
 }
 // ── Initial request bubble ──────────────────────────────────────────────────
 //

package/dist/src/presentation/web/components/features/chat/StepTracker.d.ts

@@ -23,6 +23,11 @@ export interface StepTrackerProps {
      * the running step card.
      */
     liveStatus?: string | null;
+    /**
+     * Called when the user clicks "Continue" on an interrupted step.
+     * Sends a message to the agent to resume from where it left off.
+     */
+    onRetry?: () => void;
 }
 /**
  * Vertical list of workflow step cards with a status indicator,
@@ -32,5 +37,5 @@ export interface StepTrackerProps {
  * while this step was active — the same bubble component the
  * regular thread would have used, just grouped by step.
  */
-export declare function StepTracker({ steps, className, collapsedSummary, activeStepId, liveStatus, }: StepTrackerProps): import("react/jsx-runtime").JSX.Element | null;
+export declare function StepTracker({ steps, className, collapsedSummary, activeStepId, liveStatus, onRetry, }: StepTrackerProps): import("react/jsx-runtime").JSX.Element | null;
 //# sourceMappingURL=StepTracker.d.ts.map

package/dist/src/presentation/web/components/features/chat/StepTracker.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"StepTracker.d.ts","sourceRoot":"","sources":["../../../../../../../src/presentation/web/components/features/chat/StepTracker.tsx"],"names":[],"mappings":"AAUA,OAAO,KAAK,EAAE,iBAAiB,EAAE,MAAM,kBAAkB,CAAC;AAiC1D,MAAM,WAAW,gBAAgB;IAC/B,KAAK,EAAE,iBAAiB,EAAE,CAAC;IAC3B,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB;;;;;;OAMG;IACH,gBAAgB,CAAC,EAAE,OAAO,CAAC;IAC3B;;;;;OAKG;IACH,YAAY,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IAC7B;;;;OAIG;IACH,UAAU,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;CAC5B;AAED;;;;;;;GAOG;AACH,wBAAgB,WAAW,CAAC,EAC1B,KAAK,EACL,SAAS,EACT,gBAAgB,EAChB,YAAY,EACZ,UAAU,GACX,EAAE,gBAAgB,kDAwDlB"}
+{"version":3,"file":"StepTracker.d.ts","sourceRoot":"","sources":["../../../../../../../src/presentation/web/components/features/chat/StepTracker.tsx"],"names":[],"mappings":"AAUA,OAAO,KAAK,EAAE,iBAAiB,EAAE,MAAM,kBAAkB,CAAC;AAiC1D,MAAM,WAAW,gBAAgB;IAC/B,KAAK,EAAE,iBAAiB,EAAE,CAAC;IAC3B,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB;;;;;;OAMG;IACH,gBAAgB,CAAC,EAAE,OAAO,CAAC;IAC3B;;;;;OAKG;IACH,YAAY,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IAC7B;;;;OAIG;IACH,UAAU,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IAC3B;;;OAGG;IACH,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;CACtB;AAED;;;;;;;GAOG;AACH,wBAAgB,WAAW,CAAC,EAC1B,KAAK,EACL,SAAS,EACT,gBAAgB,EAChB,YAAY,EACZ,UAAU,EACV,OAAO,GACR,EAAE,gBAAgB,kDAyDlB"}

package/dist/src/presentation/web/components/features/chat/StepTracker.js

@@ -1,6 +1,6 @@
 'use client';
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { useState } from 'react';
+import { useEffect, useState } from 'react';
 import { Collapsible } from 'radix-ui';
 import { Check, ChevronDown, ChevronRight, Circle, AlertTriangle } from 'lucide-react';
 import Markdown from 'react-markdown';
@@ -29,20 +29,20 @@ const markdownComponents = {
  * while this step was active — the same bubble component the
  * regular thread would have used, just grouped by step.
  */
-export function StepTracker({ steps, className, collapsedSummary, activeStepId, liveStatus, }) {
+export function StepTracker({ steps, className, collapsedSummary, activeStepId, liveStatus, onRetry, }) {
     const [expandedOverride, setExpandedOverride] = useState(false);
     if (steps.length === 0)
         return null;
     if (collapsedSummary && !expandedOverride) {
         const doneCount = steps.filter((s) => s.status === 'done').length;
-        return (_jsx("div", { className: cn('p-4', className), children: _jsxs("button", { type: "button", onClick: () => setExpandedOverride(true), className: "hover:bg-muted/40 border-border bg-background flex w-full items-center gap-3 rounded-lg border px-3 py-2.5 text-left transition-colors", children: [_jsx("div", { className: "flex h-6 w-6 shrink-0 items-center justify-center rounded-full bg-emerald-500 text-white", children: _jsx(Check, { className: "h-4 w-4", strokeWidth: 3 }) }), _jsxs("div", { className: "min-w-0 flex-1", children: [_jsx("div", { className: "text-sm font-medium", children: "Initial setup complete" }), _jsxs("div", { className: "text-muted-foreground text-xs", children: [doneCount, " of ", steps.length, " steps finished \u2014 click to review"] })] }), _jsx(ChevronRight, { className: "text-muted-foreground h-4 w-4 shrink-0" })] }) }));
+        return (_jsx("div", { className: cn('p-4', className), children: _jsxs("button", { type: "button", onClick: () => setExpandedOverride(true), className: "hover:bg-muted/40 border-border bg-background flex w-full items-center gap-3 rounded-lg border px-3 py-2.5 text-left transition-colors dark:bg-neutral-800/50", children: [_jsx("div", { className: "flex h-6 w-6 shrink-0 items-center justify-center rounded-full bg-emerald-500 text-white", children: _jsx(Check, { className: "h-4 w-4", strokeWidth: 3 }) }), _jsxs("div", { className: "min-w-0 flex-1", children: [_jsx("div", { className: "text-sm font-medium", children: "Initial setup complete" }), _jsxs("div", { className: "text-muted-foreground text-xs", children: [doneCount, " of ", steps.length, " steps finished \u2014 click to review"] })] }), _jsx(ChevronRight, { className: "text-muted-foreground h-4 w-4 shrink-0" })] }) }));
     }
     return (_jsxs("ol", { className: cn('flex flex-col gap-2 p-4', className), children: [collapsedSummary ? (_jsx("li", { children: _jsxs("button", { type: "button", onClick: () => setExpandedOverride(false), className: "text-muted-foreground hover:text-foreground mb-1 inline-flex items-center gap-1 text-[10px] tracking-wide uppercase", children: [_jsx(ChevronDown, { className: "h-3 w-3" }), "Collapse setup"] }) })) : null, steps.map((step, idx) => (
             // Each card fades + slides in on mount, briefly staggered so
             // the tracker assembles itself instead of popping in all at
             // once. Capped at 6 indexes so very long step lists don't
             // turn into a long cascade.
-            _jsx(StepCard, { step: step, liveStatus: step.definition.id === activeStepId ? (liveStatus ?? null) : null, mountIndex: idx }, step.definition.id)))] }));
+            _jsx(StepCard, { step: step, liveStatus: step.definition.id === activeStepId ? (liveStatus ?? null) : null, mountIndex: idx, onRetry: step.status === 'interrupted' ? onRetry : undefined }, step.definition.id)))] }));
 }
 function classifyMessages(messages) {
     const items = [];
@@ -59,9 +59,16 @@ function classifyMessages(messages) {
     }
     return items;
 }
-function StepCard({ step, liveStatus, mountIndex }) {
-    const [expanded, setExpanded] = useState(false);
-    const { status, definition, metadata, toolMessages } = step;
+function StepCard({ step, liveStatus, mountIndex, onRetry }) {
+    const [optimisticRunning, setOptimisticRunning] = useState(false);
+    // Clear optimistic override once the real status catches up
+    useEffect(() => {
+        if (step.status !== 'interrupted')
+            setOptimisticRunning(false);
+    }, [step.status]);
+    const status = optimisticRunning ? 'running' : step.status;
+    const [expanded, setExpanded] = useState(step.status === 'interrupted' || step.status === 'failed');
+    const { definition, metadata, toolMessages } = step;
     const details = readStringArray(metadata, 'details');
     const error = readString(metadata, 'error');
     const items = classifyMessages(toolMessages);
@@ -70,7 +77,7 @@ function StepCard({ step, liveStatus, mountIndex }) {
     // it is always a duplicate of the card header and is intentionally
     // NOT rendered — otherwise the expanded body would open with a copy
     // of the title right above the real content.
-    const hasBody = items.length > 0 || details.length > 0 || !!error;
+    const hasBody = items.length > 0 || details.length > 0 || !!error || status === 'interrupted';
     return (_jsx(Collapsible.Root, { asChild: true, open: expanded, onOpenChange: setExpanded, children: _jsxs("li", { className: cn(
             // `transition-colors` glides the border + background tint
             // when the status changes (pending → running → done) so the
@@ -84,23 +91,19 @@ function StepCard({ step, liveStatus, mountIndex }) {
             // finished cleanly" signal). The running card uses Shep's
             // indigo/violet brand accent so the in-progress step is
             // visually distinct from anything that has already completed.
-            status === 'running' && 'border-violet-500/40 bg-violet-500/5', status === 'done' && 'border-border bg-background', status === 'pending' && 'border-border/40 bg-muted/20', status === 'failed' && 'border-red-500/40 bg-red-500/5', status === 'interrupted' && 'border-amber-500/40 bg-amber-500/5'), style: { animationDelay: `${Math.min(mountIndex, 6) * 40}ms`, animationDuration: '300ms' }, children: [_jsx(Collapsible.Trigger, { asChild: true, children: _jsxs("button", { type: "button", disabled: !hasBody, className: cn('flex w-full items-center gap-3 px-3 py-1.5 text-left transition-colors duration-200', hasBody && 'hover:bg-muted/40 cursor-pointer', !hasBody && 'cursor-default'), children: [_jsx(StatusIcon, { status: status }), _jsxs("div", { className: "flex min-w-0 flex-1 items-baseline gap-2", children: [_jsx("span", { className: cn('shrink-0 truncate text-sm font-medium transition-colors duration-300', status === 'pending' && 'text-muted-foreground/60'), children: definition.title }), liveStatus && status === 'running' ? (
-                                    // While the step is running, the live status preempts
-                                    // the static description — same slot, more useful
-                                    // information. The only place agent in-flight activity
-                                    // surfaces while the workflow is active. Color matches
-                                    // the card accent (violet) so green stays exclusive to
-                                    // "done". `key={liveStatus}` retriggers the fade-in
-                                    // every time the status text rotates, so consecutive
-                                    // tool calls feel like they tick instead of swap.
-                                    _jsxs("span", { className: "flex min-w-0 items-baseline gap-1.5 text-xs text-violet-700 dark:text-violet-300", children: [_jsx("span", { className: "inline-flex h-1 w-1 shrink-0 translate-y-[-1px] animate-pulse rounded-full bg-violet-500" }), _jsx("span", { className: "animate-in fade-in-0 slide-in-from-left-1 truncate duration-300", children: liveStatus }, liveStatus)] })) : definition.description ? (_jsx("span", { className: cn('min-w-0 truncate text-xs font-normal', status === 'pending' ? 'text-muted-foreground/40' : 'text-muted-foreground/70'), children: definition.description })) : null] }), items.length > 0 ? (_jsx("span", { className: "text-muted-foreground/60 animate-in fade-in-0 zoom-in-95 mr-1 shrink-0 text-[10px] tabular-nums duration-200", children: items.length }, items.length)) : null, hasBody ? (_jsx(ChevronRight, { className: cn('text-muted-foreground h-4 w-4 shrink-0 transition-transform duration-200 ease-out', expanded && 'rotate-90') })) : null] }) }), _jsx(Collapsible.Content, { className: cn('overflow-hidden', 
+            status === 'running' && 'border-violet-500/40 bg-violet-500/5 dark:bg-violet-500/10', status === 'done' && 'border-border bg-background dark:bg-neutral-800/50', status === 'pending' && 'border-border/40 bg-muted/20 dark:bg-neutral-800/30', status === 'failed' && 'border-red-500/40 bg-red-500/5 dark:bg-red-500/10', status === 'interrupted' && 'border-amber-500/40 bg-amber-500/5 dark:bg-amber-500/10'), style: { animationDelay: `${Math.min(mountIndex, 6) * 40}ms`, animationDuration: '300ms' }, children: [_jsx(Collapsible.Trigger, { asChild: true, children: _jsxs("button", { type: "button", disabled: !hasBody, className: cn('flex w-full items-center gap-3 px-3 py-1.5 text-left transition-colors duration-200', hasBody && 'hover:bg-muted/40 cursor-pointer', !hasBody && 'cursor-default'), children: [_jsx(StatusIcon, { status: status }), _jsxs("div", { className: "flex min-w-0 flex-1 items-baseline gap-2", children: [_jsx("span", { className: cn('shrink-0 truncate text-sm font-medium transition-colors duration-300', status === 'pending' && 'text-muted-foreground/60'), children: definition.title }), status === 'interrupted' ? (_jsx("span", { className: "min-w-0 truncate text-xs font-medium text-amber-600 dark:text-amber-400", children: "Interrupted" })) : liveStatus && status === 'running' ? (_jsxs("span", { className: "flex min-w-0 items-baseline gap-1.5 text-xs text-violet-700 dark:text-violet-300", children: [_jsx("span", { className: "inline-flex h-1 w-1 shrink-0 translate-y-[-1px] animate-pulse rounded-full bg-violet-500" }), _jsx("span", { className: "animate-in fade-in-0 slide-in-from-left-1 truncate duration-300", children: liveStatus }, liveStatus)] })) : definition.description ? (_jsx("span", { className: cn('min-w-0 truncate text-xs font-normal', status === 'pending' ? 'text-muted-foreground/40' : 'text-muted-foreground/70'), children: definition.description })) : null] }), items.length > 0 ? (_jsx("span", { className: "text-muted-foreground/60 animate-in fade-in-0 zoom-in-95 mr-1 shrink-0 text-[10px] tabular-nums duration-200", children: items.length }, items.length)) : null, hasBody ? (_jsx(ChevronRight, { className: cn('text-muted-foreground h-4 w-4 shrink-0 transition-transform duration-200 ease-out', expanded && 'rotate-90') })) : null] }) }), _jsx(Collapsible.Content, { className: cn('overflow-hidden', 
                     // The keyframes (defined in globals.css) animate from
                     // height: 0 ↔ var(--radix-collapsible-content-height) so
                     // the body smoothly slides open and back. Both directions
                     // get matching cubic-bezier curves — one ease-out for
                     // open, one ease-in for close — so the motion never feels
                     // lopsided.
-                    'data-[state=open]:animate-collapsible-down data-[state=closed]:animate-collapsible-up'), children: _jsxs("div", { className: "border-border/40 space-y-2 border-t px-3 py-2.5 text-xs", children: [error ? (_jsx("p", { className: "rounded bg-red-500/10 p-2 text-red-600 dark:text-red-400", children: error })) : null, details.length > 0 ? (_jsx("ul", { className: "text-muted-foreground list-disc space-y-0.5 ps-4", children: details.map((d) => (_jsx("li", { children: d }, d))) })) : null, items.length > 0 ? (_jsx("div", { className: "-mx-1 flex flex-col gap-1", children: items.map((item, idx) => item.kind === 'tool' ? (_jsx("div", { className: "animate-in fade-in-0 slide-in-from-top-1 duration-200", style: { animationDelay: `${Math.min(idx, 6) * 30}ms` }, children: _jsx(ToolBubble, { text: item.message.content }) }, item.message.id)) : (_jsx("div", { className: "text-foreground animate-in fade-in-0 slide-in-from-top-1 px-1 text-xs leading-relaxed duration-200", style: { animationDelay: `${Math.min(idx, 6) * 30}ms` }, children: _jsx(Markdown, { components: markdownComponents, children: item.message.content }) }, item.message.id))) })) : null] }) })] }) }));
+                    'data-[state=open]:animate-collapsible-down data-[state=closed]:animate-collapsible-up'), children: _jsxs("div", { className: "border-border/40 space-y-2 border-t px-3 py-2.5 text-xs", children: [status === 'interrupted' && !error ? (_jsxs("div", { className: "flex items-center justify-between rounded bg-amber-500/10 p-2", children: [_jsx("span", { className: "text-amber-700 dark:text-amber-400", children: "This step was interrupted before it could finish." }), onRetry ? (_jsx("button", { type: "button", onClick: (e) => {
+                                            e.stopPropagation();
+                                            setOptimisticRunning(true);
+                                            setExpanded(false);
+                                            onRetry();
+                                        }, className: "ms-3 shrink-0 cursor-pointer rounded-md border border-amber-500/40 bg-amber-500/10 px-3 py-1 text-[11px] font-medium text-amber-700 transition-colors hover:bg-amber-500/20 dark:text-amber-400", children: "Continue" })) : null] })) : null, error ? (_jsx("p", { className: "rounded bg-red-500/10 p-2 text-red-600 dark:text-red-400", children: error })) : null, details.length > 0 ? (_jsx("ul", { className: "text-muted-foreground list-disc space-y-0.5 ps-4", children: details.map((d) => (_jsx("li", { children: d }, d))) })) : null, items.length > 0 ? (_jsx("div", { className: "-mx-1 flex flex-col gap-1", children: items.map((item, idx) => item.kind === 'tool' ? (_jsx("div", { className: "animate-in fade-in-0 slide-in-from-top-1 duration-200", style: { animationDelay: `${Math.min(idx, 6) * 30}ms` }, children: _jsx(ToolBubble, { text: item.message.content }) }, item.message.id)) : (_jsx("div", { className: "text-foreground animate-in fade-in-0 slide-in-from-top-1 px-1 text-xs leading-relaxed duration-200", style: { animationDelay: `${Math.min(idx, 6) * 30}ms` }, children: _jsx(Markdown, { components: markdownComponents, children: item.message.content }) }, item.message.id))) })) : null] }) })] }) }));
 }
 function StatusIcon({ status }) {
     if (status === 'running') {
@@ -113,7 +116,7 @@ function StatusIcon({ status }) {
         return (_jsx("div", { className: "flex h-4 w-4 shrink-0 items-center justify-center rounded-full bg-red-500 text-white", children: _jsx(AlertTriangle, { className: "h-2.5 w-2.5", strokeWidth: 3 }) }));
     }
     if (status === 'interrupted') {
-        return _jsx(AlertTriangle, { className: "h-4 w-4 shrink-0 text-amber-500" });
+        return (_jsx("div", { className: "flex h-4 w-4 shrink-0 items-center justify-center rounded-full bg-amber-500 text-white", children: _jsx(AlertTriangle, { className: "h-2.5 w-2.5", strokeWidth: 3 }) }));
     }
     return _jsx(Circle, { className: "text-muted-foreground/30 h-4 w-4 shrink-0" });
 }

package/dist/src/presentation/web/components/features/control-center/control-center-inner.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"control-center-inner.d.ts","sourceRoot":"","sources":["../../../../../../../src/presentation/web/components/features/control-center/control-center-inner.tsx"],"names":[],"mappings":"AAKA,OAAO,KAAK,EAAE,IAAI,EAAY,MAAM,eAAe,CAAC;AAoBpD,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,uCAAuC,CAAC;AAoC5E,UAAU,uBAAuB;IAC/B,YAAY,EAAE,cAAc,EAAE,CAAC;IAC/B,YAAY,EAAE,IAAI,EAAE,CAAC;CACtB;AAED,wBAAgB,kBAAkB,CAAC,EAAE,YAAY,EAAE,YAAY,EAAE,EAAE,uBAAuB,2CAulBzF"}
+{"version":3,"file":"control-center-inner.d.ts","sourceRoot":"","sources":["../../../../../../../src/presentation/web/components/features/control-center/control-center-inner.tsx"],"names":[],"mappings":"AAKA,OAAO,KAAK,EAAE,IAAI,EAAY,MAAM,eAAe,CAAC;AAoBpD,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,uCAAuC,CAAC;AAoC5E,UAAU,uBAAuB;IAC/B,YAAY,EAAE,cAAc,EAAE,CAAC;IAC/B,YAAY,EAAE,IAAI,EAAE,CAAC;CACtB;AAED,wBAAgB,kBAAkB,CAAC,EAAE,YAAY,EAAE,YAAY,EAAE,EAAE,uBAAuB,2CAylBzF"}

package/dist/src/presentation/web/components/features/control-center/control-center-inner.js

@@ -381,7 +381,7 @@ export function ControlCenterInner({ initialNodes, initialEdges }) {
                 setPendingDeleteWorkspaceId(id);
                 setDeleteWorkspaceOpen(true);
             }, onManage: () => setManageWorkspaceOpen(true) }) }));
-    return (_jsxs(_Fragment, { children: [_jsx(FeaturesCanvas, { nodes: showCanvas ? displayNodes : [], edges: showCanvas ? workspaceFilteredEdges : [], selectedFeatureId: selectedFeatureId, selectedRepository: selectedRepository, defaultViewport: defaultViewport, onNodesChange: onNodesChange, onConnect: handleConnect, onAddFeature: handleAddFeature, onNodeClick: handleNodeClick, onPaneClick: handleClearDrawers, onMoveEnd: handleMoveEnd, toolbar: canvasToolbar, emptyState: emptyStateNode }), showCanvas ? _jsx(CreateFab, { actions: fabActions }) : null, _jsx(NewProjectDialog, { open: workspaceNewProjectOpen, onOpenChange: setWorkspaceNewProjectOpen, onCreated: (path) => addRepoAndFocus(path) }), _jsx(ManageWorkspaceDialog, { open: manageWorkspaceOpen, onOpenChange: setManageWorkspaceOpen, workspace: activeWorkspace, allNodes: nodes, onSave: (members) => setWorkspaceMembers(activeWorkspace.id, members) }), _jsx(WorkspaceNameDialog, { open: createWorkspaceOpen, onOpenChange: setCreateWorkspaceOpen, title: "New workspace", description: "Create a workspace to filter the canvas to a specific set of repositories and features.", confirmLabel: "Create", onConfirm: (name) => {
+    return (_jsxs(_Fragment, { children: [_jsx(FeaturesCanvas, { nodes: showCanvas ? displayNodes : [], edges: showCanvas ? workspaceFilteredEdges : [], selectedFeatureId: selectedFeatureId, selectedRepository: selectedRepository, defaultViewport: defaultViewport, onNodesChange: onNodesChange, onConnect: handleConnect, onAddFeature: handleAddFeature, onNodeClick: handleNodeClick, onPaneClick: handleClearDrawers, onMoveEnd: handleMoveEnd, toolbar: canvasToolbar, showToolbarOnEmpty: workspaceFilteredEmpty, emptyState: emptyStateNode }), showCanvas ? _jsx(CreateFab, { actions: fabActions }) : null, _jsx(NewProjectDialog, { open: workspaceNewProjectOpen, onOpenChange: setWorkspaceNewProjectOpen, onCreated: (path) => addRepoAndFocus(path) }), _jsx(ManageWorkspaceDialog, { open: manageWorkspaceOpen, onOpenChange: setManageWorkspaceOpen, workspace: activeWorkspace, allNodes: nodes, onSave: (members) => setWorkspaceMembers(activeWorkspace.id, members) }), _jsx(WorkspaceNameDialog, { open: createWorkspaceOpen, onOpenChange: setCreateWorkspaceOpen, title: "New workspace", description: "Create a workspace to filter the canvas to a specific set of repositories and features.", confirmLabel: "Create", onConfirm: (name) => {
                     createWorkspace(name);
                     setManageWorkspaceOpen(true);
                 } }), _jsx(WorkspaceNameDialog, { open: renameWorkspaceOpen, onOpenChange: setRenameWorkspaceOpen, title: "Rename workspace", initialValue: activeWorkspace.name, confirmLabel: "Rename", onConfirm: (name) => renameWorkspace(activeWorkspace.id, name) }), _jsx(AlertDialog, { open: deleteWorkspaceOpen, onOpenChange: (open) => {
@@ -398,7 +398,8 @@ export function ControlCenterInner({ initialNodes, initialEdges }) {
                         setShowCreatePrompt(false);
                         addRepoAndFocus(path);
                     }, onApplicationCreated: (appId) => {
-                        setShowCreatePrompt(false);
+                        // Navigate first — keep overlay mounted to avoid canvas flash.
+                        // The overlay unmounts when the route changes.
                         router.push(`/application/${appId}`);
                     }, onClose: () => setShowCreatePrompt(false), className: "bg-background" }) })) : null] }));
 }

package/dist/src/presentation/web/components/features/features-canvas/features-canvas.d.ts

@@ -20,7 +20,9 @@ export interface FeaturesCanvasProps {
     onCanvasDrag?: () => void;
     onMoveEnd?: OnMoveEnd;
     toolbar?: React.ReactNode;
+    /** Show the toolbar even when the canvas is empty (e.g. empty workspace). Defaults to true. */
+    showToolbarOnEmpty?: boolean;
     emptyState?: React.ReactNode;
 }
-export declare function FeaturesCanvas({ nodes, edges, selectedFeatureId, selectedRepository, defaultViewport, onNodesChange, onAddFeature, onConnect, onNodeClick, onPaneClick, onCanvasDrag, onMoveEnd, toolbar, emptyState, }: FeaturesCanvasProps): import("react/jsx-runtime").JSX.Element;
+export declare function FeaturesCanvas({ nodes, edges, selectedFeatureId, selectedRepository, defaultViewport, onNodesChange, onAddFeature, onConnect, onNodeClick, onPaneClick, onCanvasDrag, onMoveEnd, toolbar, showToolbarOnEmpty, emptyState, }: FeaturesCanvasProps): import("react/jsx-runtime").JSX.Element;
 //# sourceMappingURL=features-canvas.d.ts.map

package/dist/src/presentation/web/components/features/features-canvas/features-canvas.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"features-canvas.d.ts","sourceRoot":"","sources":["../../../../../../../src/presentation/web/components/features/features-canvas/features-canvas.tsx"],"names":[],"mappings":"AAIA,OAAO,KAAK,EAAE,UAAU,EAAE,IAAI,EAAE,UAAU,EAAE,SAAS,EAAE,QAAQ,EAAE,MAAM,eAAe,CAAC;AAOvF,OAAO,KAAK,EAAE,eAAe,EAAmB,MAAM,kCAAkC,CAAC;AAEzF,OAAO,KAAK,EAAE,kBAAkB,EAAsB,MAAM,qCAAqC,CAAC;AAElG,OAAO,KAAK,EAAE,mBAAmB,EAAE,MAAM,8DAA8D,CAAC;AAGxG,MAAM,MAAM,cAAc,GAAG,eAAe,GAAG,kBAAkB,GAAG,mBAAmB,CAAC;AAExF,MAAM,WAAW,mBAAmB;IAClC,KAAK,EAAE,cAAc,EAAE,CAAC;IACxB,KAAK,EAAE,IAAI,EAAE,CAAC;IACd,iBAAiB,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IAClC,kBAAkB,CAAC,EAAE;QAAE,EAAE,EAAE,MAAM,GAAG,IAAI,CAAC;QAAC,IAAI,EAAE,MAAM,GAAG,IAAI,CAAA;KAAE,CAAC;IAChE,eAAe,CAAC,EAAE,QAAQ,CAAC;IAC3B,aAAa,CAAC,EAAE,CAAC,OAAO,EAAE,UAAU,CAAC,cAAc,CAAC,EAAE,KAAK,IAAI,CAAC;IAChE,YAAY,CAAC,EAAE,MAAM,IAAI,CAAC;IAC1B,WAAW,CAAC,EAAE,CAAC,KAAK,EAAE,KAAK,CAAC,UAAU,EAAE,IAAI,EAAE,cAAc,KAAK,IAAI,CAAC;IACtE,WAAW,CAAC,EAAE,CAAC,KAAK,EAAE,KAAK,CAAC,UAAU,KAAK,IAAI,CAAC;IAChD,SAAS,CAAC,EAAE,CAAC,UAAU,EAAE,UAAU,KAAK,IAAI,CAAC;IAC7C,YAAY,CAAC,EAAE,MAAM,IAAI,CAAC;IAC1B,SAAS,CAAC,EAAE,SAAS,CAAC;IACtB,OAAO,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B,UAAU,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;CAC9B;AAID,wBAAgB,cAAc,CAAC,EAC7B,KAAK,EACL,KAAK,EACL,iBAAiB,EACjB,kBAAkB,EAClB,eAAe,EACf,aAAa,EACb,YAAY,EACZ,SAAS,EACT,WAAW,EACX,WAAW,EACX,YAAY,EACZ,SAAS,EACT,OAAO,EACP,UAAU,GACX,EAAE,mBAAmB,2CAgJrB"}
+{"version":3,"file":"features-canvas.d.ts","sourceRoot":"","sources":["../../../../../../../src/presentation/web/components/features/features-canvas/features-canvas.tsx"],"names":[],"mappings":"AAIA,OAAO,KAAK,EAAE,UAAU,EAAE,IAAI,EAAE,UAAU,EAAE,SAAS,EAAE,QAAQ,EAAE,MAAM,eAAe,CAAC;AAOvF,OAAO,KAAK,EAAE,eAAe,EAAmB,MAAM,kCAAkC,CAAC;AAEzF,OAAO,KAAK,EAAE,kBAAkB,EAAsB,MAAM,qCAAqC,CAAC;AAElG,OAAO,KAAK,EAAE,mBAAmB,EAAE,MAAM,8DAA8D,CAAC;AAGxG,MAAM,MAAM,cAAc,GAAG,eAAe,GAAG,kBAAkB,GAAG,mBAAmB,CAAC;AAExF,MAAM,WAAW,mBAAmB;IAClC,KAAK,EAAE,cAAc,EAAE,CAAC;IACxB,KAAK,EAAE,IAAI,EAAE,CAAC;IACd,iBAAiB,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IAClC,kBAAkB,CAAC,EAAE;QAAE,EAAE,EAAE,MAAM,GAAG,IAAI,CAAC;QAAC,IAAI,EAAE,MAAM,GAAG,IAAI,CAAA;KAAE,CAAC;IAChE,eAAe,CAAC,EAAE,QAAQ,CAAC;IAC3B,aAAa,CAAC,EAAE,CAAC,OAAO,EAAE,UAAU,CAAC,cAAc,CAAC,EAAE,KAAK,IAAI,CAAC;IAChE,YAAY,CAAC,EAAE,MAAM,IAAI,CAAC;IAC1B,WAAW,CAAC,EAAE,CAAC,KAAK,EAAE,KAAK,CAAC,UAAU,EAAE,IAAI,EAAE,cAAc,KAAK,IAAI,CAAC;IACtE,WAAW,CAAC,EAAE,CAAC,KAAK,EAAE,KAAK,CAAC,UAAU,KAAK,IAAI,CAAC;IAChD,SAAS,CAAC,EAAE,CAAC,UAAU,EAAE,UAAU,KAAK,IAAI,CAAC;IAC7C,YAAY,CAAC,EAAE,MAAM,IAAI,CAAC;IAC1B,SAAS,CAAC,EAAE,SAAS,CAAC;IACtB,OAAO,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B,+FAA+F;IAC/F,kBAAkB,CAAC,EAAE,OAAO,CAAC;IAC7B,UAAU,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;CAC9B;AAID,wBAAgB,cAAc,CAAC,EAC7B,KAAK,EACL,KAAK,EACL,iBAAiB,EACjB,kBAAkB,EAClB,eAAe,EACf,aAAa,EACb,YAAY,EACZ,SAAS,EACT,WAAW,EACX,WAAW,EACX,YAAY,EACZ,SAAS,EACT,OAAO,EACP,kBAAyB,EACzB,UAAU,GACX,EAAE,mBAAmB,2CAiJrB"}

package/dist/src/presentation/web/components/features/features-canvas/features-canvas.js

@@ -12,7 +12,7 @@ import { RepositoryNode } from '../../common/repository-node/index.js';
 import { ApplicationNode } from '../../common/application-node/application-node.js';
 import { DependencyEdge } from './dependency-edge.js';
 const FALLBACK_VIEWPORT = { x: 30, y: 30, zoom: 0.85 };
-export function FeaturesCanvas({ nodes, edges, selectedFeatureId, selectedRepository, defaultViewport, onNodesChange, onAddFeature, onConnect, onNodeClick, onPaneClick, onCanvasDrag, onMoveEnd, toolbar, emptyState, }) {
+export function FeaturesCanvas({ nodes, edges, selectedFeatureId, selectedRepository, defaultViewport, onNodesChange, onAddFeature, onConnect, onNodeClick, onPaneClick, onCanvasDrag, onMoveEnd, toolbar, showToolbarOnEmpty = true, emptyState, }) {
     const { t } = useTranslation('web');
     const nodeTypes = useMemo(() => ({
         featureNode: FeatureNode,
@@ -73,5 +73,5 @@ export function FeaturesCanvas({ nodes, edges, selectedFeatureId, selectedReposi
     }, [isEmpty]);
     const fallbackEmptyState = isEmpty && !emptyState ? (_jsx(EmptyState, { title: t('canvas.noFeatures'), description: t('canvas.noFeaturesDescription'), action: _jsxs(Button, { onClick: onAddFeature, children: [_jsx(Plus, { className: "me-2 h-4 w-4" }), t('canvas.newFeature')] }) })) : null;
     const overlayContent = emptyState ?? fallbackEmptyState;
-    return (_jsxs("div", { "data-testid": isEmpty ? 'features-canvas-empty' : 'features-canvas', "data-no-drawer-close": true, className: "dark:bg-background pointer-events-auto relative h-full w-full bg-[#f6f7f8]", children: [_jsxs(ReactFlow, { nodes: enrichedNodes, edges: edges, nodeTypes: nodeTypes, edgeTypes: edgeTypes, onConnect: onConnect, onNodesChange: onNodesChange, onNodeClick: onNodeClick, onPaneClick: onPaneClick, onMoveStart: onCanvasDrag, onMoveEnd: onMoveEnd, defaultViewport: defaultViewport ?? FALLBACK_VIEWPORT, nodesDraggable: false, nodesConnectable: false, elementsSelectable: false, proOptions: { hideAttribution: true }, className: "[&_.react-flow__pane]:!cursor-default", children: [_jsx(Background, { variant: BackgroundVariant.Dots, gap: 24, size: 1, color: "#b8bcc4", className: "dark:[&_circle]:!fill-white/[0.1]" }), toolbar && !isEmpty ? (_jsx(Panel, { position: "top-right", className: "!me-3 !mt-3", children: toolbar })) : null] }), showOverlay && overlayContent ? (_jsx("div", { className: cn('pointer-events-none absolute inset-0 z-10 flex items-center justify-center transition-opacity duration-300', overlayExiting ? 'opacity-0' : 'animate-in fade-in opacity-100 duration-200'), children: _jsx("div", { className: "pointer-events-auto h-full w-full", children: overlayContent }) })) : null, toolbar && isEmpty ? (_jsx("div", { className: "pointer-events-auto absolute end-3 top-3 z-20", children: toolbar })) : null] }));
+    return (_jsxs("div", { "data-testid": isEmpty ? 'features-canvas-empty' : 'features-canvas', "data-no-drawer-close": true, className: "dark:bg-background pointer-events-auto relative h-full w-full bg-[#f6f7f8]", children: [_jsxs(ReactFlow, { nodes: enrichedNodes, edges: edges, nodeTypes: nodeTypes, edgeTypes: edgeTypes, onConnect: onConnect, onNodesChange: onNodesChange, onNodeClick: onNodeClick, onPaneClick: onPaneClick, onMoveStart: onCanvasDrag, onMoveEnd: onMoveEnd, defaultViewport: defaultViewport ?? FALLBACK_VIEWPORT, nodesDraggable: false, nodesConnectable: false, elementsSelectable: false, proOptions: { hideAttribution: true }, className: "[&_.react-flow__pane]:!cursor-default", children: [_jsx(Background, { variant: BackgroundVariant.Dots, gap: 24, size: 1, color: "#b8bcc4", className: "dark:[&_circle]:!fill-white/[0.1]" }), toolbar && !isEmpty ? (_jsx(Panel, { position: "top-right", className: "!me-3 !mt-3", children: toolbar })) : null] }), showOverlay && overlayContent ? (_jsx("div", { className: cn('pointer-events-none absolute inset-0 z-10 flex items-center justify-center transition-opacity duration-300', overlayExiting ? 'opacity-0' : 'animate-in fade-in opacity-100 duration-200'), children: _jsx("div", { className: "pointer-events-auto h-full w-full", children: overlayContent }) })) : null, toolbar && isEmpty && showToolbarOnEmpty ? (_jsx("div", { className: "pointer-events-auto absolute end-3 top-3 z-20", children: toolbar })) : null] }));
 }

package/dist/src/presentation/web/components/features/settings/language-settings-section.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"language-settings-section.d.ts","sourceRoot":"","sources":["../../../../../../../src/presentation/web/components/features/settings/language-settings-section.tsx"],"names":[],"mappings":"AA6BA,MAAM,WAAW,4BAA4B;IAC3C,QAAQ,EAAE,MAAM,CAAC;CAClB;AAED,wBAAgB,uBAAuB,CAAC,EACtC,QAAQ,EAAE,eAAe,GAC1B,EAAE,4BAA4B,2CA4E9B"}
+{"version":3,"file":"language-settings-section.d.ts","sourceRoot":"","sources":["../../../../../../../src/presentation/web/components/features/settings/language-settings-section.tsx"],"names":[],"mappings":"AA8BA,MAAM,WAAW,4BAA4B;IAC3C,QAAQ,EAAE,MAAM,CAAC;CAClB;AAED,wBAAgB,uBAAuB,CAAC,EACtC,QAAQ,EAAE,eAAe,GAC1B,EAAE,4BAA4B,2CA4E9B"}

package/dist/src/presentation/web/components/features/settings/language-settings-section.js

@@ -11,6 +11,7 @@ import { updateSettingsAction } from '../../../app/actions/update-settings.js';
 import { Language } from '../../../../../../packages/core/src/domain/generated/output.js';
 const LANGUAGE_OPTIONS = [
     { value: Language.English, label: 'English', nativeName: 'English' },
+    { value: Language.Ukrainian, label: 'Українська', nativeName: 'Українська' },
     { value: Language.Russian, label: 'Русский', nativeName: 'Русский' },
     { value: Language.Portuguese, label: 'Português', nativeName: 'Português' },
     { value: Language.Spanish, label: 'Español', nativeName: 'Español' },

package/dist/src/presentation/web/components/features/settings/language-settings-section.stories.d.ts

@@ -11,6 +11,7 @@ declare const meta: {
 export default meta;
 type Story = StoryObj<typeof meta>;
 export declare const Default: Story;
+export declare const Ukrainian: Story;
 export declare const Russian: Story;
 export declare const Arabic: Story;
 export declare const Hebrew: Story;

package/dist/src/presentation/web/components/features/settings/language-settings-section.stories.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"language-settings-section.stories.d.ts","sourceRoot":"","sources":["../../../../../../../src/presentation/web/components/features/settings/language-settings-section.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAQ,QAAQ,EAAE,MAAM,kBAAkB,CAAC;AACvD,OAAO,EAAE,uBAAuB,EAAE,MAAM,6BAA6B,CAAC;AAGtE,QAAA,MAAM,IAAI;;;;;;;CAOsC,CAAC;AAEjD,eAAe,IAAI,CAAC;AACpB,KAAK,KAAK,GAAG,QAAQ,CAAC,OAAO,IAAI,CAAC,CAAC;AAEnC,eAAO,MAAM,OAAO,EAAE,KAIrB,CAAC;AAEF,eAAO,MAAM,OAAO,EAAE,KAIrB,CAAC;AAEF,eAAO,MAAM,MAAM,EAAE,KAIpB,CAAC;AAEF,eAAO,MAAM,MAAM,EAAE,KAIpB,CAAC;AAEF,eAAO,MAAM,MAAM,EAAE,KAIpB,CAAC"}
+{"version":3,"file":"language-settings-section.stories.d.ts","sourceRoot":"","sources":["../../../../../../../src/presentation/web/components/features/settings/language-settings-section.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAQ,QAAQ,EAAE,MAAM,kBAAkB,CAAC;AACvD,OAAO,EAAE,uBAAuB,EAAE,MAAM,6BAA6B,CAAC;AAGtE,QAAA,MAAM,IAAI;;;;;;;CAOsC,CAAC;AAEjD,eAAe,IAAI,CAAC;AACpB,KAAK,KAAK,GAAG,QAAQ,CAAC,OAAO,IAAI,CAAC,CAAC;AAEnC,eAAO,MAAM,OAAO,EAAE,KAIrB,CAAC;AAEF,eAAO,MAAM,SAAS,EAAE,KAIvB,CAAC;AAEF,eAAO,MAAM,OAAO,EAAE,KAIrB,CAAC;AAEF,eAAO,MAAM,MAAM,EAAE,KAIpB,CAAC;AAEF,eAAO,MAAM,MAAM,EAAE,KAIpB,CAAC;AAEF,eAAO,MAAM,MAAM,EAAE,KAIpB,CAAC"}

package/dist/src/presentation/web/components/features/settings/language-settings-section.stories.js

@@ -14,6 +14,11 @@ export const Default = {
         language: Language.English,
     },
 };
+export const Ukrainian = {
+    args: {
+        language: Language.Ukrainian,
+    },
+};
 export const Russian = {
     args: {
         language: Language.Russian,

package/dist/src/presentation/web/components/features/settings/settings-page-client.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"settings-page-client.d.ts","sourceRoot":"","sources":["../../../../../../../src/presentation/web/components/features/settings/settings-page-client.tsx"],"names":[],"mappings":"AA4CA,OAAO,KAAK,EACV,QAAQ,EAKT,MAAM,sCAAsC,CAAC;AAC9C,OAAO,KAAK,EAAE,iBAAiB,EAAE,MAAM,uCAAuC,CAAC;AA8B/E,MAAM,WAAW,uBAAuB;IACtC,QAAQ,EAAE,QAAQ,CAAC;IACnB,QAAQ,EAAE,MAAM,CAAC;IACjB,UAAU,EAAE,MAAM,CAAC;IACnB,kBAAkB,CAAC,EAAE,iBAAiB,EAAE,CAAC;CAC1C;AA+QD,wBAAgB,kBAAkB,CAAC,EACjC,QAAQ,EACR,QAAQ,EACR,UAAU,EACV,kBAAkB,GACnB,EAAE,uBAAuB,2CAw5CzB"}
+{"version":3,"file":"settings-page-client.d.ts","sourceRoot":"","sources":["../../../../../../../src/presentation/web/components/features/settings/settings-page-client.tsx"],"names":[],"mappings":"AAsDA,OAAO,KAAK,EACV,QAAQ,EAKT,MAAM,sCAAsC,CAAC;AAC9C,OAAO,KAAK,EAAE,iBAAiB,EAAE,MAAM,uCAAuC,CAAC;AA8B/E,MAAM,WAAW,uBAAuB;IACtC,QAAQ,EAAE,QAAQ,CAAC;IACnB,QAAQ,EAAE,MAAM,CAAC;IACjB,UAAU,EAAE,MAAM,CAAC;IACnB,kBAAkB,CAAC,EAAE,iBAAiB,EAAE,CAAC;CAC1C;AA+QD,wBAAgB,kBAAkB,CAAC,EACjC,QAAQ,EACR,QAAQ,EACR,UAAU,EACV,kBAAkB,GACnB,EAAE,uBAAuB,2CAs7CzB"}

package/dist/src/presentation/web/components/features/settings/settings-page-client.js

@@ -12,7 +12,17 @@ import { updateSettingsAction } from '../../../app/actions/update-settings.js';
 import { EditorType, Language, TerminalType, } from '../../../../../../packages/core/src/domain/generated/output.js';
 import { getEditorTypeIcon } from '../../common/editor-type-icons.js';
 import { AgentModelPicker } from '../../features/settings/AgentModelPicker/index.js';
-import { LanguageSettingsSection } from '../../features/settings/language-settings-section.js';
+const LANGUAGE_OPTIONS = [
+    { value: Language.English, nativeName: 'English' },
+    { value: Language.Ukrainian, nativeName: 'Українська' },
+    { value: Language.Russian, nativeName: 'Русский' },
+    { value: Language.Portuguese, nativeName: 'Português' },
+    { value: Language.Spanish, nativeName: 'Español' },
+    { value: Language.Arabic, nativeName: 'العربية' },
+    { value: Language.Hebrew, nativeName: 'עברית' },
+    { value: Language.French, nativeName: 'Français' },
+    { value: Language.German, nativeName: 'Deutsch' },
+];
 import { TimeoutSlider } from '../../features/settings/timeout-slider.js';
 const EDITOR_OPTIONS = [
     { value: EditorType.VsCode, label: 'VS Code' },
@@ -121,7 +131,7 @@ function SectionHint({ children, links, }) {
 }
 /* ── Main component ── */
 export function SettingsPageClient({ settings, shepHome, dbFileSize, availableTerminals, }) {
-    const { t } = useTranslation('web');
+    const { t, i18n: i18nInstance } = useTranslation('web');
     const { showSaving, showSaved, save } = useSaveIndicator();
     const featureFlags = settings.featureFlags ?? {
         skills: false,
@@ -133,6 +143,16 @@ export function SettingsPageClient({ settings, shepHome, dbFileSize, availableTe
         reactFileManager: false,
         inventory: false,
     };
+    // Language state
+    const [language, setLanguage] = useState(settings.user?.preferredLanguage ?? Language.English);
+    function handleLanguageChange(value) {
+        setLanguage(value);
+        i18nInstance.changeLanguage(value);
+        const dir = value === 'ar' || value === 'he' ? 'rtl' : 'ltr';
+        document.documentElement.lang = value;
+        document.documentElement.dir = dir;
+        save({ user: { preferredLanguage: value } });
+    }
     // Agent state
     const [agentType, setAgentType] = useState(settings.agent.type);
     // Environment state
@@ -332,7 +352,7 @@ export function SettingsPageClient({ settings, shepHome, dbFileSize, availableTe
                                 return (_jsxs("button", { type: "button", onClick: () => scrollToSection(s.id), className: cn('flex cursor-pointer items-center gap-1 rounded-md px-1.5 py-1 text-[11px] transition-all', isActive
                                         ? 'bg-accent text-foreground font-medium'
                                         : 'text-muted-foreground/60 hover:text-foreground hover:bg-accent/50'), children: [_jsx(SectionIcon, { className: "h-3 w-3" }), _jsx("span", { className: "hidden sm:inline", children: t(s.labelKey) })] }, s.id));
-                            }) })] }) }), _jsxs("div", { className: "flex flex-col gap-3", children: [_jsx("div", { id: "section-language", className: "grid scroll-mt-18 grid-cols-1 gap-x-5 rounded-lg lg:grid-cols-[1fr_280px]", children: _jsx(LanguageSettingsSection, { language: settings.user?.preferredLanguage ?? Language.English }) }), _jsxs("div", { id: "section-agent", className: "grid scroll-mt-18 grid-cols-1 gap-x-5 rounded-lg lg:grid-cols-[1fr_280px]", children: [_jsx(SettingsSection, { icon: Bot, title: t('settings.agent.sectionTitle'), description: t('settings.agent.sectionDescription'), testId: "agent-settings-section", children: _jsx(SettingsRow, { label: t('settings.agent.agentAndModel'), description: t('settings.agent.agentAndModelDescription'), htmlFor: "agent-model-picker", children: _jsx(AgentModelPicker, { initialAgentType: agentType, initialModel: settings.models.default, mode: "settings", onAgentModelChange: (newAgent) => setAgentType(newAgent), className: "w-55" }) }) }), _jsx(SectionHint, { links: [
+                            }) })] }) }), _jsxs("div", { className: "flex flex-col gap-3", children: [_jsx("div", { id: "section-language", className: "grid scroll-mt-18 grid-cols-1 gap-x-5 rounded-lg lg:grid-cols-[1fr_280px]", children: _jsx(SettingsSection, { icon: Globe, title: t('settings.language.title'), description: t('settings.language.description'), testId: "language-settings-section", children: _jsx(SettingsRow, { label: t('settings.language.label'), htmlFor: "display-language", children: _jsxs(Select, { value: language, onValueChange: handleLanguageChange, children: [_jsx(SelectTrigger, { id: "display-language", "data-testid": "language-select", className: "w-44", children: _jsx(SelectValue, { placeholder: t('settings.language.placeholder') }) }), _jsx(SelectContent, { children: LANGUAGE_OPTIONS.map((opt) => (_jsx(SelectItem, { value: opt.value, children: opt.nativeName }, opt.value))) })] }) }) }) }), _jsxs("div", { id: "section-agent", className: "grid scroll-mt-18 grid-cols-1 gap-x-5 rounded-lg lg:grid-cols-[1fr_280px]", children: [_jsx(SettingsSection, { icon: Bot, title: t('settings.agent.sectionTitle'), description: t('settings.agent.sectionDescription'), testId: "agent-settings-section", children: _jsx(SettingsRow, { label: t('settings.agent.agentAndModel'), description: t('settings.agent.agentAndModelDescription'), htmlFor: "agent-model-picker", children: _jsx(AgentModelPicker, { initialAgentType: agentType, initialModel: settings.models.default, mode: "settings", onAgentModelChange: (newAgent) => setAgentType(newAgent), className: "w-55" }) }) }), _jsx(SectionHint, { links: [
                                     {
                                         label: t('settings.agent.links.agentSystem'),
                                         href: 'https://github.com/shep-ai/shep/blob/main/docs/architecture/agent-system.md',

package/dist/src/presentation/web/components/layouts/app-sidebar/app-sidebar.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"app-sidebar.d.ts","sourceRoot":"","sources":["../../../../../../../src/presentation/web/components/layouts/app-sidebar/app-sidebar.tsx"],"names":[],"mappings":"AA4CA,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,2CAA2C,CAAC;AAI/E,OAAO,KAAK,EAAE,iBAAiB,EAAE,MAAM,qBAAqB,CAAC;AAE7D,MAAM,WAAW,WAAW;IAC1B,SAAS,EAAE,MAAM,CAAC;IAClB,IAAI,EAAE,MAAM,CAAC;IACb,MAAM,EAAE,aAAa,CAAC;IACtB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,cAAc,EAAE,MAAM,CAAC;IACvB,cAAc,EAAE,MAAM,CAAC;CACxB;AAED,MAAM,WAAW,eAAe;IAC9B,QAAQ,EAAE,WAAW,EAAE,CAAC;IACxB,YAAY,EAAE,iBAAiB,CAAC;IAEhC,cAAc,CAAC,EAAE,CAAC,SAAS,EAAE,MAAM,KAAK,IAAI,CAAC;IAC7C,mFAAmF;IACnF,YAAY,CAAC,EAAE,CAAC,cAAc,EAAE,MAAM,KAAK,IAAI,CAAC;CACjD;AAED,wBAAgB,UAAU,CAAC,EACzB,QAAQ,EACR,YAAY,EAEZ,cAAc,EACd,YAAY,GACb,EAAE,eAAe,2CAkRjB"}
+{"version":3,"file":"app-sidebar.d.ts","sourceRoot":"","sources":["../../../../../../../src/presentation/web/components/layouts/app-sidebar/app-sidebar.tsx"],"names":[],"mappings":"AA6CA,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,2CAA2C,CAAC;AAI/E,OAAO,KAAK,EAAE,iBAAiB,EAAE,MAAM,qBAAqB,CAAC;AAE7D,MAAM,WAAW,WAAW;IAC1B,SAAS,EAAE,MAAM,CAAC;IAClB,IAAI,EAAE,MAAM,CAAC;IACb,MAAM,EAAE,aAAa,CAAC;IACtB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,cAAc,EAAE,MAAM,CAAC;IACvB,cAAc,EAAE,MAAM,CAAC;CACxB;AAED,MAAM,WAAW,eAAe;IAC9B,QAAQ,EAAE,WAAW,EAAE,CAAC;IACxB,YAAY,EAAE,iBAAiB,CAAC;IAEhC,cAAc,CAAC,EAAE,CAAC,SAAS,EAAE,MAAM,KAAK,IAAI,CAAC;IAC7C,mFAAmF;IACnF,YAAY,CAAC,EAAE,CAAC,cAAc,EAAE,MAAM,KAAK,IAAI,CAAC;CACjD;AAED,wBAAgB,UAAU,CAAC,EACzB,QAAQ,EACR,YAAY,EAEZ,cAAc,EACd,YAAY,GACb,EAAE,eAAe,2CAwRjB"}

package/dist/src/presentation/web/components/layouts/app-sidebar/app-sidebar.js

@@ -2,7 +2,7 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useMemo } from 'react';
 import { usePathname } from 'next/navigation';
-import { Home, Moon, Sun, Volume2, VolumeOff, Zap, ZapOff, Wrench, Puzzle, Settings, TableProperties, } from 'lucide-react';
+import { Home, LayoutGrid, Moon, Sun, Volume2, VolumeOff, Zap, ZapOff, Wrench, Puzzle, Settings, TableProperties, } from 'lucide-react';
 import { useTranslation } from 'react-i18next';
 import { Sidebar, SidebarHeader, SidebarContent, SidebarFooter, SidebarMenu, SidebarMenuItem, SidebarMenuButton, SidebarRail, useSidebar, } from '../../ui/sidebar.js';
 import { ScrollArea } from '../../ui/scroll-area.js';
@@ -64,7 +64,7 @@ export function AppSidebar({ features, featureFlags, onFeatureClick, onAddFeatur
                                             'flex min-w-0 flex-1 items-center gap-2 overflow-hidden px-2',
                                             'transition-opacity duration-200 ease-out',
                                             expandedVisible ? 'opacity-100' : 'opacity-0',
-                                        ].join(' '), "aria-hidden": !expandedVisible, children: [_jsx(ShepLogo, { className: "shrink-0", size: 20, variant: versionData.isDev ? 'dev' : 'default' }), _jsx("span", { className: "truncate text-sm font-semibold tracking-tight", children: "Shep" }), _jsx(VersionBadge, { version: versionData.version, branch: versionData.branch || undefined, commitHash: versionData.commitHash || undefined, isDev: versionData.isDev, packageName: versionData.packageName, description: versionData.description, instancePath: versionData.instancePath || undefined })] })) : null, _jsx(SidebarCollapseToggle, { className: "shrink-0 transition-all duration-200" })] }) }), _jsx(SidebarNavItem, { icon: Home, label: t('navigation.controlCenter'), href: "/", active: pathname === '/' }), featureFlags.inventory ? (_jsx(SidebarNavItem, { icon: TableProperties, label: t('navigation.inventory'), href: "/features", active: pathname === '/features' })) : null, _jsx(SidebarNavItem, { icon: Wrench, label: t('navigation.tools'), href: "/tools", active: pathname === '/tools' }), featureFlags.skills ? (_jsx(SidebarNavItem, { icon: Puzzle, label: t('navigation.skills'), href: "/skills", active: pathname === '/skills' })) : null, _jsx(SidebarNavItem, { icon: Settings, label: t('navigation.settings'), href: "/settings", active: pathname === '/settings' })] }) }), _jsx(SidebarContent, { children: showExpanded ? (_jsxs("div", { className: [
+                                        ].join(' '), "aria-hidden": !expandedVisible, children: [_jsx(ShepLogo, { className: "shrink-0", size: 20, variant: versionData.isDev ? 'dev' : 'default' }), _jsx("span", { className: "truncate text-sm font-semibold tracking-tight", children: "Shep" }), _jsx(VersionBadge, { version: versionData.version, branch: versionData.branch || undefined, commitHash: versionData.commitHash || undefined, isDev: versionData.isDev, packageName: versionData.packageName, description: versionData.description, instancePath: versionData.instancePath || undefined })] })) : null, _jsx(SidebarCollapseToggle, { className: "shrink-0 transition-all duration-200" })] }) }), _jsx(SidebarNavItem, { icon: Home, label: t('navigation.controlCenter'), href: "/", active: pathname === '/' }), featureFlags.inventory ? (_jsx(SidebarNavItem, { icon: TableProperties, label: t('navigation.inventory'), href: "/features", active: pathname === '/features' })) : null, _jsx(SidebarNavItem, { icon: LayoutGrid, label: t('navigation.applications'), href: "/applications", active: pathname === '/applications' }), _jsx(SidebarNavItem, { icon: Wrench, label: t('navigation.tools'), href: "/tools", active: pathname === '/tools' }), featureFlags.skills ? (_jsx(SidebarNavItem, { icon: Puzzle, label: t('navigation.skills'), href: "/skills", active: pathname === '/skills' })) : null, _jsx(SidebarNavItem, { icon: Settings, label: t('navigation.settings'), href: "/settings", active: pathname === '/settings' })] }) }), _jsx(SidebarContent, { children: showExpanded ? (_jsxs("div", { className: [
                         'flex min-h-0 flex-1 flex-col overflow-hidden transition-opacity duration-200 ease-out',
                         '[&_[data-sidebar=group-label]]:!mt-0 [&_[data-sidebar=group-label]]:!opacity-100 [&_[data-sidebar=group-label]]:!transition-none',
                         expandedVisible ? 'opacity-100' : 'opacity-0',

package/dist/src/presentation/web/lib/derive-app-status.d.ts

@@ -0,0 +1,23 @@
+/**
+ * Shared status derivation for application cards, canvas nodes, and
+ * the application page status pill.
+ *
+ * Priority (highest wins):
+ *
+ *   - `processing`      → "In Progress"     (agent actively running a turn)
+ *   - `awaiting_input`  → "Action Required"  (agent blocked on user input)
+ *   - effectiveStatus   → from use case (interrupted/failed/running)
+ *   - deployment live   → "Live"             (dev server running)
+ *   - persisted Error   → "Error"
+ *   - otherwise         → "Ready"            (idle, no issues)
+ */
+export interface AppLiveStatus {
+    label: string;
+    dotClass: string;
+    borderClass: string;
+    pulse: boolean;
+    /** Whether the preview/deploy action should be disabled in this state. */
+    previewDisabled: boolean;
+}
+export declare function deriveAppLiveStatus(persistedStatus: string, turnStatus: string, hasDeployment: boolean, effectiveStatus?: string): AppLiveStatus;
+//# sourceMappingURL=derive-app-status.d.ts.map

package/dist/src/presentation/web/lib/derive-app-status.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"derive-app-status.d.ts","sourceRoot":"","sources":["../../../../../src/presentation/web/lib/derive-app-status.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;GAYG;AAEH,MAAM,WAAW,aAAa;IAC5B,KAAK,EAAE,MAAM,CAAC;IACd,QAAQ,EAAE,MAAM,CAAC;IACjB,WAAW,EAAE,MAAM,CAAC;IACpB,KAAK,EAAE,OAAO,CAAC;IACf,0EAA0E;IAC1E,eAAe,EAAE,OAAO,CAAC;CAC1B;AAED,wBAAgB,mBAAmB,CACjC,eAAe,EAAE,MAAM,EACvB,UAAU,EAAE,MAAM,EAClB,aAAa,EAAE,OAAO,EACtB,eAAe,CAAC,EAAE,MAAM,GACvB,aAAa,CA+Ef"}