@shepai/cli 1.151.2-pr470.ec33cce → 1.152.0-pr476.5b101f5

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

@@ -0,0 +1,46 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { cn } from '../../../lib/utils.js';
+import { InteractiveSessionStatus } from '../../../../../../packages/core/src/domain/generated/output.js';
+import { Loader2, CheckCircle2, XCircle, AlertCircle } from 'lucide-react';
+const STATUS_CONFIG = {
+    [InteractiveSessionStatus.booting]: {
+        label: 'Booting...',
+        icon: _jsx(Loader2, { className: "size-3 animate-spin" }),
+        className: 'bg-amber-100 text-amber-800 border-amber-200 dark:bg-amber-900/30 dark:text-amber-300 dark:border-amber-700',
+    },
+    spawning: {
+        label: 'Spawning process',
+        icon: _jsx(Loader2, { className: "size-3 animate-spin" }),
+        className: 'bg-blue-100 text-blue-800 border-blue-200 dark:bg-blue-900/30 dark:text-blue-300 dark:border-blue-700',
+    },
+    'loading-context': {
+        label: 'Loading context',
+        icon: _jsx(Loader2, { className: "size-3 animate-spin" }),
+        className: 'bg-indigo-100 text-indigo-800 border-indigo-200 dark:bg-indigo-900/30 dark:text-indigo-300 dark:border-indigo-700',
+    },
+    [InteractiveSessionStatus.ready]: {
+        label: 'Ready',
+        icon: _jsx(CheckCircle2, { className: "size-3" }),
+        className: 'bg-emerald-100 text-emerald-800 border-emerald-200 dark:bg-emerald-900/30 dark:text-emerald-300 dark:border-emerald-700',
+    },
+    [InteractiveSessionStatus.stopped]: {
+        label: 'Stopped',
+        icon: _jsx(XCircle, { className: "size-3" }),
+        className: 'bg-zinc-100 text-zinc-700 border-zinc-200 dark:bg-zinc-800 dark:text-zinc-400 dark:border-zinc-600',
+    },
+    [InteractiveSessionStatus.error]: {
+        label: 'Error',
+        icon: _jsx(AlertCircle, { className: "size-3" }),
+        className: 'bg-red-100 text-red-700 border-red-200 dark:bg-red-900/30 dark:text-red-400 dark:border-red-700',
+    },
+};
+/**
+ * Small inline badge showing the current interactive session status.
+ * Maps each status to a distinct color, icon, and label.
+ * Animated spinner shown for booting/spawning/loading-context states.
+ */
+export function AgentStatusBadge({ status, className }) {
+    const config = STATUS_CONFIG[status] ?? STATUS_CONFIG[InteractiveSessionStatus.booting];
+    return (_jsxs("span", { role: "status", "aria-label": `Agent status: ${config.label}`, className: cn('inline-flex items-center gap-1.5 rounded-full border px-2.5 py-0.5 text-xs font-medium', config.className, className), children: [config.icon, config.label] }));
+}

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

@@ -0,0 +1,20 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import { AgentStatusBadge } from './AgentStatusBadge.js';
+declare const meta: Meta<typeof AgentStatusBadge>;
+export default meta;
+type Story = StoryObj<typeof AgentStatusBadge>;
+/** Generic booting state — shown before a specific stage is known. */
+export declare const Booting: Story;
+/** First boot stage: spawning the agent OS process. */
+export declare const Spawning: Story;
+/** Second boot stage: injecting feature context into the agent. */
+export declare const LoadingContext: Story;
+/** Agent is ready and accepting messages. */
+export declare const Ready: Story;
+/** Session was stopped manually or via auto-timeout. */
+export declare const Stopped: Story;
+/** Session encountered an error (e.g. process crashed). */
+export declare const Error: Story;
+/** All variants stacked for visual comparison. */
+export declare const AllVariants: Story;
+//# sourceMappingURL=AgentStatusBadge.stories.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"AgentStatusBadge.stories.d.ts","sourceRoot":"","sources":["../../../../../../../src/presentation/web/components/features/chat/AgentStatusBadge.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,IAAI,EAAE,QAAQ,EAAE,MAAM,kBAAkB,CAAC;AAEvD,OAAO,EAAE,gBAAgB,EAAE,MAAM,oBAAoB,CAAC;AAEtD,QAAA,MAAM,IAAI,EAAE,IAAI,CAAC,OAAO,gBAAgB,CAOvC,CAAC;AAEF,eAAe,IAAI,CAAC;AACpB,KAAK,KAAK,GAAG,QAAQ,CAAC,OAAO,gBAAgB,CAAC,CAAC;AAE/C,sEAAsE;AACtE,eAAO,MAAM,OAAO,EAAE,KAIrB,CAAC;AAEF,uDAAuD;AACvD,eAAO,MAAM,QAAQ,EAAE,KAItB,CAAC;AAEF,mEAAmE;AACnE,eAAO,MAAM,cAAc,EAAE,KAI5B,CAAC;AAEF,6CAA6C;AAC7C,eAAO,MAAM,KAAK,EAAE,KAInB,CAAC;AAEF,wDAAwD;AACxD,eAAO,MAAM,OAAO,EAAE,KAIrB,CAAC;AAEF,2DAA2D;AAC3D,eAAO,MAAM,KAAK,EAAE,KAInB,CAAC;AAEF,kDAAkD;AAClD,eAAO,MAAM,WAAW,EAAE,KAWzB,CAAC"}

package/dist/src/presentation/web/components/features/chat/AgentStatusBadge.stories.js

@@ -0,0 +1,52 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { InteractiveSessionStatus } from '../../../../../../packages/core/src/domain/generated/output.js';
+import { AgentStatusBadge } from './AgentStatusBadge.js';
+const meta = {
+    title: 'Features/Chat/AgentStatusBadge',
+    component: AgentStatusBadge,
+    tags: ['autodocs'],
+    parameters: {
+        layout: 'centered',
+    },
+};
+export default meta;
+/** Generic booting state — shown before a specific stage is known. */
+export const Booting = {
+    args: {
+        status: InteractiveSessionStatus.booting,
+    },
+};
+/** First boot stage: spawning the agent OS process. */
+export const Spawning = {
+    args: {
+        status: 'spawning',
+    },
+};
+/** Second boot stage: injecting feature context into the agent. */
+export const LoadingContext = {
+    args: {
+        status: 'loading-context',
+    },
+};
+/** Agent is ready and accepting messages. */
+export const Ready = {
+    args: {
+        status: InteractiveSessionStatus.ready,
+    },
+};
+/** Session was stopped manually or via auto-timeout. */
+export const Stopped = {
+    args: {
+        status: InteractiveSessionStatus.stopped,
+    },
+};
+/** Session encountered an error (e.g. process crashed). */
+export const Error = {
+    args: {
+        status: InteractiveSessionStatus.error,
+    },
+};
+/** All variants stacked for visual comparison. */
+export const AllVariants = {
+    render: () => (_jsxs("div", { className: "flex flex-col gap-3 p-4", children: [_jsx(AgentStatusBadge, { status: InteractiveSessionStatus.booting }), _jsx(AgentStatusBadge, { status: "spawning" }), _jsx(AgentStatusBadge, { status: "loading-context" }), _jsx(AgentStatusBadge, { status: InteractiveSessionStatus.ready }), _jsx(AgentStatusBadge, { status: InteractiveSessionStatus.stopped }), _jsx(AgentStatusBadge, { status: InteractiveSessionStatus.error })] })),
+};

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

@@ -0,0 +1,18 @@
+import type { FormAttachment } from '../../../hooks/use-attachments.js';
+export interface ChatComposerProps {
+    attachments: FormAttachment[];
+    isDragOver: boolean;
+    uploadError: string | null;
+    onDragEnter: (e: React.DragEvent) => void;
+    onDragLeave: (e: React.DragEvent) => void;
+    onDragOver: (e: React.DragEvent) => void;
+    onDrop: (e: React.DragEvent) => void;
+    onPaste: (e: React.ClipboardEvent) => void;
+    onRemoveAttachment: (id: string) => void;
+    onNotesChange: (id: string, notes: string) => void;
+    onPickFiles: () => void;
+    /** Agent/model picker rendered in the controls row. */
+    agentPicker?: React.ReactNode;
+}
+export declare function ChatComposer({ attachments, isDragOver, uploadError, onDragEnter, onDragLeave, onDragOver, onDrop, onPaste, onRemoveAttachment, onNotesChange, onPickFiles, agentPicker, }: ChatComposerProps): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=ChatComposer.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"ChatComposer.d.ts","sourceRoot":"","sources":["../../../../../../../src/presentation/web/components/features/chat/ChatComposer.tsx"],"names":[],"mappings":"AAQA,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,2CAoFnB"}

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

@@ -0,0 +1,16 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { useState, useRef } from 'react';
+import { ComposerPrimitive, ThreadPrimitive } from '@assistant-ui/react';
+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, }) {
+    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: "Write a message...", 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": "Attach files", 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: "Attach files" })] }), _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/ChatDotIndicator.d.ts

@@ -0,0 +1,14 @@
+import type { TurnStatus } from '../../../hooks/use-turn-statuses.js';
+interface ChatDotIndicatorProps {
+    status: TurnStatus;
+    className?: string;
+}
+/**
+ * Dot indicator for chat buttons showing agent activity state:
+ * - idle: no dot (hidden)
+ * - processing: pulsing blue dot
+ * - unread: static green dot
+ */
+export declare function ChatDotIndicator({ status, className }: ChatDotIndicatorProps): import("react/jsx-runtime").JSX.Element | null;
+export {};
+//# sourceMappingURL=ChatDotIndicator.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"ChatDotIndicator.d.ts","sourceRoot":"","sources":["../../../../../../../src/presentation/web/components/features/chat/ChatDotIndicator.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,2BAA2B,CAAC;AAE5D,UAAU,qBAAqB;IAC7B,MAAM,EAAE,UAAU,CAAC;IACnB,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAED;;;;;GAKG;AACH,wBAAgB,gBAAgB,CAAC,EAAE,MAAM,EAAE,SAAc,EAAE,EAAE,qBAAqB,kDAUjF"}

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

@@ -0,0 +1,13 @@
+'use client';
+import { jsx as _jsx } from "react/jsx-runtime";
+/**
+ * Dot indicator for chat buttons showing agent activity state:
+ * - idle: no dot (hidden)
+ * - processing: pulsing blue dot
+ * - unread: static green dot
+ */
+export function ChatDotIndicator({ status, className = '' }) {
+    if (status === 'idle')
+        return null;
+    return (_jsx("span", { className: `absolute -top-0.5 -right-0.5 block rounded-full ${status === 'processing' ? 'h-2.5 w-2.5 animate-pulse bg-blue-500' : 'h-2 w-2 bg-green-500'} ${className}` }));
+}

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

@@ -0,0 +1,9 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import { ChatDotIndicator } from './ChatDotIndicator.js';
+declare const meta: Meta<typeof ChatDotIndicator>;
+export default meta;
+type Story = StoryObj<typeof ChatDotIndicator>;
+export declare const Idle: Story;
+export declare const Processing: Story;
+export declare const Unread: Story;
+//# sourceMappingURL=ChatDotIndicator.stories.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"ChatDotIndicator.stories.d.ts","sourceRoot":"","sources":["../../../../../../../src/presentation/web/components/features/chat/ChatDotIndicator.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,IAAI,EAAE,QAAQ,EAAE,MAAM,kBAAkB,CAAC;AACvD,OAAO,EAAE,gBAAgB,EAAE,MAAM,oBAAoB,CAAC;AAEtD,QAAA,MAAM,IAAI,EAAE,IAAI,CAAC,OAAO,gBAAgB,CAWvC,CAAC;AAEF,eAAe,IAAI,CAAC;AACpB,KAAK,KAAK,GAAG,QAAQ,CAAC,OAAO,gBAAgB,CAAC,CAAC;AAE/C,eAAO,MAAM,IAAI,EAAE,KAElB,CAAC;AAEF,eAAO,MAAM,UAAU,EAAE,KAExB,CAAC;AAEF,eAAO,MAAM,MAAM,EAAE,KAEpB,CAAC"}

package/dist/src/presentation/web/components/features/chat/ChatDotIndicator.stories.js

@@ -0,0 +1,19 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { ChatDotIndicator } from './ChatDotIndicator.js';
+const meta = {
+    title: 'Features/Chat/ChatDotIndicator',
+    component: ChatDotIndicator,
+    decorators: [
+        (Story) => (_jsxs("div", { className: "relative inline-block rounded-md bg-zinc-800 p-4", children: [_jsx("span", { className: "text-white", children: "Chat" }), _jsx(Story, {})] })),
+    ],
+};
+export default meta;
+export const Idle = {
+    args: { status: 'idle' },
+};
+export const Processing = {
+    args: { status: 'processing' },
+};
+export const Unread = {
+    args: { status: 'unread' },
+};

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

@@ -0,0 +1,19 @@
+export interface ChatInputProps {
+    /** Called when the user submits a message (Enter key or send button). */
+    onSubmit: (content: string) => void;
+    /** Disables the input when the session is not in ready state. */
+    disabled?: boolean;
+    /** Placeholder text for the textarea. */
+    placeholder?: string;
+    className?: string;
+}
+/**
+ * Chat input component for the interactive agent chat.
+ *
+ * - Enter key submits the message
+ * - Shift+Enter inserts a newline
+ * - Disabled state prevents all interaction
+ * - Accessible via keyboard: tab to reach, Enter to send
+ */
+export declare function ChatInput({ onSubmit, disabled, placeholder, className, }: ChatInputProps): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=ChatInput.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"ChatInput.d.ts","sourceRoot":"","sources":["../../../../../../../src/presentation/web/components/features/chat/ChatInput.tsx"],"names":[],"mappings":"AAOA,MAAM,WAAW,cAAc;IAC7B,yEAAyE;IACzE,QAAQ,EAAE,CAAC,OAAO,EAAE,MAAM,KAAK,IAAI,CAAC;IACpC,iEAAiE;IACjE,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,yCAAyC;IACzC,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAED;;;;;;;GAOG;AACH,wBAAgB,SAAS,CAAC,EACxB,QAAQ,EACR,QAAgB,EAChB,WAA6E,EAC7E,SAAS,GACV,EAAE,cAAc,2CA+DhB"}

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

@@ -0,0 +1,42 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useRef, useCallback } from 'react';
+import { Send } from 'lucide-react';
+import { Button } from '../../ui/button.js';
+import { cn } from '../../../lib/utils.js';
+/**
+ * Chat input component for the interactive agent chat.
+ *
+ * - Enter key submits the message
+ * - Shift+Enter inserts a newline
+ * - Disabled state prevents all interaction
+ * - Accessible via keyboard: tab to reach, Enter to send
+ */
+export function ChatInput({ onSubmit, disabled = false, placeholder = 'Message the agent... (Enter to send, Shift+Enter for newline)', className, }) {
+    const textareaRef = useRef(null);
+    const handleSubmit = useCallback(() => {
+        const textarea = textareaRef.current;
+        if (!textarea)
+            return;
+        const content = textarea.value.trim();
+        if (!content)
+            return;
+        onSubmit(content);
+        textarea.value = '';
+        // Reset height after clearing
+        textarea.style.height = 'auto';
+    }, [onSubmit]);
+    const handleKeyDown = useCallback((e) => {
+        if (e.key === 'Enter' && !e.shiftKey) {
+            e.preventDefault();
+            handleSubmit();
+        }
+    }, [handleSubmit]);
+    const handleInput = useCallback((e) => {
+        const el = e.target;
+        // Auto-resize textarea up to a max height
+        el.style.height = 'auto';
+        el.style.height = `${Math.min(el.scrollHeight, 160)}px`;
+    }, []);
+    return (_jsxs("div", { className: cn('bg-background flex items-end gap-2 border-t p-3', className), children: [_jsx("textarea", { ref: textareaRef, rows: 1, disabled: disabled, placeholder: placeholder, "aria-label": "Message input", onKeyDown: handleKeyDown, onChange: handleInput, className: cn('bg-background min-h-[36px] flex-1 resize-none rounded-md border px-3 py-2 text-sm', 'focus:ring-ring focus:ring-2 focus:ring-offset-0 focus:outline-none', 'placeholder:text-muted-foreground', 'disabled:cursor-not-allowed disabled:opacity-50', 'max-h-40 overflow-y-auto') }), _jsx(Button, { type: "button", size: "icon-sm", disabled: disabled, onClick: handleSubmit, "aria-label": "Send message", className: "shrink-0", children: _jsx(Send, { className: "size-4" }) })] }));
+}

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

@@ -0,0 +1,14 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import { ChatInput } from './ChatInput.js';
+declare const meta: Meta<typeof ChatInput>;
+export default meta;
+type Story = StoryObj<typeof ChatInput>;
+/** Default empty state — ready for input. */
+export declare const Empty: Story;
+/** With pre-filled text to show how content looks. */
+export declare const WithText: Story;
+/** Disabled state — shown when the session is not in ready state. */
+export declare const Disabled: Story;
+/** Custom placeholder text for when the agent is booting. */
+export declare const BootingPlaceholder: Story;
+//# sourceMappingURL=ChatInput.stories.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"ChatInput.stories.d.ts","sourceRoot":"","sources":["../../../../../../../src/presentation/web/components/features/chat/ChatInput.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,IAAI,EAAE,QAAQ,EAAE,MAAM,kBAAkB,CAAC;AACvD,OAAO,EAAE,SAAS,EAAE,MAAM,aAAa,CAAC;AAExC,QAAA,MAAM,IAAI,EAAE,IAAI,CAAC,OAAO,SAAS,CA2BhC,CAAC;AAEF,eAAe,IAAI,CAAC;AACpB,KAAK,KAAK,GAAG,QAAQ,CAAC,OAAO,SAAS,CAAC,CAAC;AAExC,6CAA6C;AAC7C,eAAO,MAAM,KAAK,EAAE,KAKnB,CAAC;AAEF,sDAAsD;AACtD,eAAO,MAAM,QAAQ,EAAE,KAetB,CAAC;AAEF,qEAAqE;AACrE,eAAO,MAAM,QAAQ,EAAE,KAKtB,CAAC;AAEF,6DAA6D;AAC7D,eAAO,MAAM,kBAAkB,EAAE,KAKhC,CAAC"}

package/dist/src/presentation/web/components/features/chat/ChatInput.stories.js

@@ -0,0 +1,56 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { ChatInput } from './ChatInput.js';
+const meta = {
+    title: 'Features/Chat/ChatInput',
+    component: ChatInput,
+    tags: ['autodocs'],
+    parameters: {
+        layout: 'padded',
+    },
+    decorators: [
+        (Story) => (_jsx("div", { style: {
+                maxWidth: '480px',
+                border: '1px solid var(--color-border)',
+                borderRadius: '8px',
+                overflow: 'hidden',
+            }, children: _jsx(Story, {}) })),
+    ],
+    args: {
+        onSubmit: (content) => {
+            // eslint-disable-next-line no-console
+            console.log('Message submitted:', content);
+        },
+    },
+};
+export default meta;
+/** Default empty state — ready for input. */
+export const Empty = {
+    args: {
+        disabled: false,
+        placeholder: 'Message the agent... (Enter to send, Shift+Enter for newline)',
+    },
+};
+/** With pre-filled text to show how content looks. */
+export const WithText = {
+    render: (args) => {
+        return (_jsxs("div", { style: { maxWidth: '480px' }, children: [_jsx(ChatInput, { ...args }), _jsx("p", { style: { padding: '8px', fontSize: '12px', color: 'gray' }, children: "Note: The textarea starts empty; text is shown here for demonstration." })] }));
+    },
+    args: {
+        disabled: false,
+        placeholder: 'Can you run the tests for the auth module?',
+    },
+};
+/** Disabled state — shown when the session is not in ready state. */
+export const Disabled = {
+    args: {
+        disabled: true,
+        placeholder: 'Start the agent to begin chatting...',
+    },
+};
+/** Custom placeholder text for when the agent is booting. */
+export const BootingPlaceholder = {
+    args: {
+        disabled: true,
+        placeholder: 'Waiting for agent to be ready...',
+    },
+};

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

@@ -0,0 +1,21 @@
+import { InteractiveMessageRole } from '../../../../../../packages/core/src/domain/generated/output.js';
+export interface ChatMessageBubbleProps {
+    /** Role of the message author */
+    role: InteractiveMessageRole;
+    /** Full message content */
+    content: string;
+    /** When the message was created */
+    timestamp?: Date | string;
+    /** Whether this message is currently streaming (assistant only) */
+    streaming?: boolean;
+    className?: string;
+}
+/**
+ * Renders a single chat message bubble with full markdown support.
+ *
+ * - User messages: right-aligned, primary background
+ * - Assistant messages: left-aligned, muted background, markdown rendered
+ * - When streaming=true and role=assistant: trailing blinking cursor is shown
+ */
+export declare function ChatMessageBubble({ role, content, timestamp, streaming, className, }: ChatMessageBubbleProps): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=ChatMessageBubble.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"ChatMessageBubble.d.ts","sourceRoot":"","sources":["../../../../../../../src/presentation/web/components/features/chat/ChatMessageBubble.tsx"],"names":[],"mappings":"AAKA,OAAO,EAAE,sBAAsB,EAAE,MAAM,sCAAsC,CAAC;AAqC9E,MAAM,WAAW,sBAAsB;IACrC,iCAAiC;IACjC,IAAI,EAAE,sBAAsB,CAAC;IAC7B,2BAA2B;IAC3B,OAAO,EAAE,MAAM,CAAC;IAChB,mCAAmC;IACnC,SAAS,CAAC,EAAE,IAAI,GAAG,MAAM,CAAC;IAC1B,mEAAmE;IACnE,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAWD;;;;;;GAMG;AACH,wBAAgB,iBAAiB,CAAC,EAChC,IAAI,EACJ,OAAO,EACP,SAAS,EACT,SAAiB,EACjB,SAAS,GACV,EAAE,sBAAsB,2CAkCxB"}

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

@@ -0,0 +1,43 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import Markdown from 'react-markdown';
+import { cn } from '../../../lib/utils.js';
+import { InteractiveMessageRole } from '../../../../../../packages/core/src/domain/generated/output.js';
+const markdownComponents = {
+    p: ({ children }) => _jsx("p", { className: "mb-2 leading-relaxed last:mb-0", children: children }),
+    strong: ({ children }) => _jsx("strong", { className: "font-semibold", children: children }),
+    em: ({ children }) => _jsx("em", { className: "italic", children: children }),
+    code: ({ children, className }) => className ? (_jsx("code", { className: `${className} text-[11px]`, children: children })) : (_jsx("code", { className: "bg-background/50 rounded-md px-1.5 py-0.5 font-mono text-xs", children: children })),
+    pre: ({ children }) => (_jsx("pre", { className: "bg-background/50 my-2 overflow-x-auto rounded-md p-3 font-mono text-xs leading-relaxed", children: children })),
+    ul: ({ children }) => _jsx("ul", { className: "mb-2 list-disc pl-4 last:mb-0", children: children }),
+    ol: ({ children }) => _jsx("ol", { className: "mb-2 list-decimal pl-4 last:mb-0", children: children }),
+    li: ({ children }) => _jsx("li", { className: "mb-0.5", children: children }),
+    h1: ({ children }) => _jsx("h1", { className: "mb-1 text-base font-bold", children: children }),
+    h2: ({ children }) => _jsx("h2", { className: "mb-1 text-sm font-bold", children: children }),
+    h3: ({ children }) => _jsx("h3", { className: "mb-1 text-sm font-semibold", children: children }),
+    a: ({ children, href }) => (_jsx("a", { href: href, className: "text-blue-500 underline", target: "_blank", rel: "noopener noreferrer", children: children })),
+    blockquote: ({ children }) => (_jsx("blockquote", { className: "border-muted-foreground/30 my-1 border-l-2 pl-3 italic opacity-80", children: children })),
+};
+function formatTime(ts) {
+    try {
+        const d = typeof ts === 'string' ? new Date(ts) : ts;
+        return d.toLocaleTimeString([], { hour: '2-digit', minute: '2-digit' });
+    }
+    catch {
+        return '';
+    }
+}
+/**
+ * Renders a single chat message bubble with full markdown support.
+ *
+ * - User messages: right-aligned, primary background
+ * - Assistant messages: left-aligned, muted background, markdown rendered
+ * - When streaming=true and role=assistant: trailing blinking cursor is shown
+ */
+export function ChatMessageBubble({ role, content, timestamp, streaming = false, className, }) {
+    const isUser = role === InteractiveMessageRole.user;
+    const timeStr = timestamp ? formatTime(timestamp) : null;
+    return (_jsxs("div", { className: cn('flex w-full flex-col', isUser ? 'items-end' : 'items-start', className), "aria-label": isUser ? 'Your message' : 'Agent message', children: [_jsxs("div", { className: cn('max-w-[85%] rounded-2xl px-4 py-2.5 text-sm leading-relaxed', isUser
+                    ? 'bg-primary text-primary-foreground rounded-br-sm'
+                    : 'bg-muted text-foreground rounded-bl-sm'), children: [isUser ? (_jsx("span", { className: "whitespace-pre-wrap", children: content })) : (_jsx(Markdown, { components: markdownComponents, children: content })), streaming && !isUser ? (_jsx("span", { "aria-label": "Agent is typing", className: "ml-0.5 inline-block h-3.5 w-0.5 animate-pulse bg-current align-middle opacity-75" })) : null] }), timeStr && !streaming ? (_jsx("span", { className: "text-muted-foreground mt-0.5 px-1 text-[10px]", children: timeStr })) : null] }));
+}

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

@@ -0,0 +1,24 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import { ChatMessageBubble } from './ChatMessageBubble.js';
+declare const meta: Meta<typeof ChatMessageBubble>;
+export default meta;
+type Story = StoryObj<typeof ChatMessageBubble>;
+/** User message — right-aligned with primary color. */
+export declare const UserMessage: Story;
+/** Assistant message — left-aligned with muted background. */
+export declare const AssistantMessage: Story;
+/** Assistant message that is still streaming — shows blinking cursor. */
+export declare const StreamingAssistant: Story;
+/** Assistant message with a code block. */
+export declare const AssistantWithCode: Story;
+/** Long user message — should wrap cleanly within the bubble. */
+export declare const LongUserMessage: Story;
+/** Multi-line assistant response. */
+export declare const MultilineAssistant: Story;
+/** Assistant message with rich markdown — headers, lists, bold, links. */
+export declare const AssistantWithMarkdown: Story;
+/** Message with timestamp. */
+export declare const WithTimestamp: Story;
+/** Conversation thread — both roles rendered together. */
+export declare const ConversationThread: Story;
+//# sourceMappingURL=ChatMessageBubble.stories.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"ChatMessageBubble.stories.d.ts","sourceRoot":"","sources":["../../../../../../../src/presentation/web/components/features/chat/ChatMessageBubble.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,IAAI,EAAE,QAAQ,EAAE,MAAM,kBAAkB,CAAC;AAEvD,OAAO,EAAE,iBAAiB,EAAE,MAAM,qBAAqB,CAAC;AAExD,QAAA,MAAM,IAAI,EAAE,IAAI,CAAC,OAAO,iBAAiB,CAcxC,CAAC;AAEF,eAAe,IAAI,CAAC;AACpB,KAAK,KAAK,GAAG,QAAQ,CAAC,OAAO,iBAAiB,CAAC,CAAC;AAEhD,uDAAuD;AACvD,eAAO,MAAM,WAAW,EAAE,KAMzB,CAAC;AAEF,8DAA8D;AAC9D,eAAO,MAAM,gBAAgB,EAAE,KAO9B,CAAC;AAEF,yEAAyE;AACzE,eAAO,MAAM,kBAAkB,EAAE,KAMhC,CAAC;AAEF,2CAA2C;AAC3C,eAAO,MAAM,iBAAiB,EAAE,KAO/B,CAAC;AAEF,iEAAiE;AACjE,eAAO,MAAM,eAAe,EAAE,KAO7B,CAAC;AAEF,qCAAqC;AACrC,eAAO,MAAM,kBAAkB,EAAE,KAOhC,CAAC;AAEF,0EAA0E;AAC1E,eAAO,MAAM,qBAAqB,EAAE,KAOnC,CAAC;AAEF,8BAA8B;AAC9B,eAAO,MAAM,aAAa,EAAE,KAO3B,CAAC;AAEF,0DAA0D;AAC1D,eAAO,MAAM,kBAAkB,EAAE,KAoBhC,CAAC"}

package/dist/src/presentation/web/components/features/chat/ChatMessageBubble.stories.js

@@ -0,0 +1,84 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { InteractiveMessageRole } from '../../../../../../packages/core/src/domain/generated/output.js';
+import { ChatMessageBubble } from './ChatMessageBubble.js';
+const meta = {
+    title: 'Features/Chat/ChatMessageBubble',
+    component: ChatMessageBubble,
+    tags: ['autodocs'],
+    parameters: {
+        layout: 'padded',
+    },
+    decorators: [
+        (Story) => (_jsx("div", { style: { maxWidth: '480px', padding: '16px' }, children: _jsx(Story, {}) })),
+    ],
+};
+export default meta;
+/** User message — right-aligned with primary color. */
+export const UserMessage = {
+    args: {
+        role: InteractiveMessageRole.user,
+        content: 'Can you show me the current test coverage for the auth module?',
+        streaming: false,
+    },
+};
+/** Assistant message — left-aligned with muted background. */
+export const AssistantMessage = {
+    args: {
+        role: InteractiveMessageRole.assistant,
+        content: 'Sure! Let me check the test coverage for you.\n\nThe auth module currently has 87% line coverage. The main gaps are in the OAuth callback handler and the token refresh logic.',
+        streaming: false,
+    },
+};
+/** Assistant message that is still streaming — shows blinking cursor. */
+export const StreamingAssistant = {
+    args: {
+        role: InteractiveMessageRole.assistant,
+        content: 'I can see the coverage report. Let me analyze the gaps',
+        streaming: true,
+    },
+};
+/** Assistant message with a code block. */
+export const AssistantWithCode = {
+    args: {
+        role: InteractiveMessageRole.assistant,
+        content: 'Here is the failing test:\n\n```typescript\ndescribe("auth", () => {\n  it("should refresh token", async () => {\n    const token = await refreshToken("expired-token");\n    expect(token).toBeDefined();\n  });\n});\n```\n\nThe test fails because `refreshToken` throws when the token is expired.',
+        streaming: false,
+    },
+};
+/** Long user message — should wrap cleanly within the bubble. */
+export const LongUserMessage = {
+    args: {
+        role: InteractiveMessageRole.user,
+        content: 'I need you to help me understand why the CI pipeline is failing on the integration tests. The logs show a database connection timeout after about 30 seconds but only on the CI runner, not locally. Can you look at the test setup and suggest what might be different?',
+        streaming: false,
+    },
+};
+/** Multi-line assistant response. */
+export const MultilineAssistant = {
+    args: {
+        role: InteractiveMessageRole.assistant,
+        content: 'I can investigate that for you.\n\nLooking at the CI configuration:\n1. The test database uses a different hostname in CI (`db` vs `localhost`)\n2. The connection pool timeout is set to 10s locally but uses default (30s) in CI\n3. The `DB_POOL_MAX` env var is not set in CI\n\nLet me check the actual test setup file to confirm.',
+        streaming: false,
+    },
+};
+/** Assistant message with rich markdown — headers, lists, bold, links. */
+export const AssistantWithMarkdown = {
+    args: {
+        role: InteractiveMessageRole.assistant,
+        content: '## Analysis Results\n\nI found **3 issues** in the auth module:\n\n1. Missing `try/catch` in token refresh\n2. Expired session cleanup is *not* running\n3. Rate limiter threshold too low\n\n> Note: The rate limiter was changed in [PR #142](https://example.com)\n\nLet me fix these for you.',
+        streaming: false,
+    },
+};
+/** Message with timestamp. */
+export const WithTimestamp = {
+    args: {
+        role: InteractiveMessageRole.assistant,
+        content: 'Here is the test result. All 42 tests passed.',
+        timestamp: new Date().toISOString(),
+        streaming: false,
+    },
+};
+/** Conversation thread — both roles rendered together. */
+export const ConversationThread = {
+    render: () => (_jsxs("div", { className: "flex flex-col gap-3 p-4", children: [_jsx(ChatMessageBubble, { role: InteractiveMessageRole.assistant, content: "Hey, how can I help you with this feature?", timestamp: new Date(Date.now() - 120000).toISOString() }), _jsx(ChatMessageBubble, { role: InteractiveMessageRole.user, content: "Can you run the tests and show me the results?", timestamp: new Date(Date.now() - 60000).toISOString() }), _jsx(ChatMessageBubble, { role: InteractiveMessageRole.assistant, content: "Running tests now...", streaming: true })] })),
+};

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

@@ -0,0 +1,25 @@
+import type { InteractiveMessage } from '../../../../../../packages/core/src/domain/generated/output.js';
+export interface ChatMessageListProps {
+    /** Persisted message history for this feature */
+    messages: InteractiveMessage[];
+    /**
+     * Current streaming text buffer.
+     * When non-null, an in-progress assistant bubble is shown at the bottom.
+     */
+    streamingContent: string | null;
+    /** Whether the agent is thinking (waiting for first token) */
+    isAgentThinking?: boolean;
+    /** Activity log entries from tool use / thinking events */
+    activityLog?: string[];
+    /** Show a loading skeleton while the initial message history is fetching */
+    isLoading?: boolean;
+    /** Empty-state message shown when there are no messages and no session */
+    emptyStateMessage?: string;
+}
+/**
+ * Scrollable message list rendering all persisted messages plus an optional
+ * in-progress streaming bubble at the bottom. Auto-scrolls to the newest
+ * message whenever messages or streamingContent changes.
+ */
+export declare function ChatMessageList({ messages, streamingContent, isAgentThinking, activityLog, isLoading, emptyStateMessage, }: ChatMessageListProps): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=ChatMessageList.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"ChatMessageList.d.ts","sourceRoot":"","sources":["../../../../../../../src/presentation/web/components/features/chat/ChatMessageList.tsx"],"names":[],"mappings":"AAIA,OAAO,KAAK,EAAE,kBAAkB,EAAE,MAAM,sCAAsC,CAAC;AAI/E,MAAM,WAAW,oBAAoB;IACnC,iDAAiD;IACjD,QAAQ,EAAE,kBAAkB,EAAE,CAAC;IAC/B;;;OAGG;IACH,gBAAgB,EAAE,MAAM,GAAG,IAAI,CAAC;IAChC,8DAA8D;IAC9D,eAAe,CAAC,EAAE,OAAO,CAAC;IAC1B,2DAA2D;IAC3D,WAAW,CAAC,EAAE,MAAM,EAAE,CAAC;IACvB,4EAA4E;IAC5E,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,0EAA0E;IAC1E,iBAAiB,CAAC,EAAE,MAAM,CAAC;CAC5B;AAED;;;;GAIG;AACH,wBAAgB,eAAe,CAAC,EAC9B,QAAQ,EACR,gBAAgB,EAChB,eAAuB,EACvB,WAAgB,EAChB,SAAiB,EACjB,iBAAsC,GACvC,EAAE,oBAAoB,2CAwEtB"}