@shepai/cli 1.151.2-pr438.6135e39 → 1.151.2-pr460.095bbae

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"}

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

@@ -0,0 +1,36 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { useRef, useEffect, useState } from 'react';
+import { MessageSquare, ChevronDown, ChevronRight, Activity } from 'lucide-react';
+import { InteractiveMessageRole } from '../../../../../../packages/core/src/domain/generated/output.js';
+import { ChatMessageBubble } from './ChatMessageBubble.js';
+/**
+ * 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 function ChatMessageList({ messages, streamingContent, isAgentThinking = false, activityLog = [], isLoading = false, emptyStateMessage = 'No messages yet.', }) {
+    const bottomRef = useRef(null);
+    // Auto-scroll to bottom when messages or streaming content changes
+    useEffect(() => {
+        bottomRef.current?.scrollIntoView({ behavior: 'smooth', block: 'end' });
+    }, [messages.length, streamingContent, isAgentThinking, activityLog.length]);
+    if (isLoading) {
+        return (_jsx("div", { className: "flex flex-1 flex-col gap-3 overflow-y-auto p-4", children: [1, 2, 3].map((i) => (_jsx("div", { className: `flex ${i % 2 === 0 ? 'justify-end' : 'justify-start'}`, children: _jsx("div", { className: "bg-muted h-10 animate-pulse rounded-2xl", style: { width: `${40 + i * 15}%` } }) }, i))) }));
+    }
+    if (messages.length === 0 && streamingContent === null && !isAgentThinking) {
+        return (_jsxs("div", { className: "flex flex-1 flex-col items-center justify-center gap-2 p-8 text-center", children: [_jsx(MessageSquare, { className: "text-muted-foreground h-8 w-8" }), _jsx("p", { className: "text-muted-foreground text-sm", children: emptyStateMessage })] }));
+    }
+    return (_jsx("div", { className: "flex flex-1 flex-col overflow-y-auto p-4", role: "log", "aria-label": "Chat messages", "aria-live": "polite", children: _jsxs("div", { className: "flex flex-col gap-3", children: [messages.map((message) => (_jsx(ChatMessageBubble, { role: message.role, content: message.content, timestamp: message.createdAt, streaming: false }, message.id))), isAgentThinking && streamingContent === null ? (_jsx(ThinkingIndicator, { activityLog: activityLog })) : null, streamingContent !== null && (_jsxs(_Fragment, { children: [activityLog.length > 0 && _jsx(ActivityLogCollapsible, { entries: activityLog }), _jsx(ChatMessageBubble, { role: InteractiveMessageRole.assistant, content: streamingContent, streaming: true })] })), _jsx("div", { ref: bottomRef })] }) }));
+}
+/** Animated thinking indicator with expandable activity log. */
+function ThinkingIndicator({ activityLog }) {
+    const [expanded, setExpanded] = useState(false);
+    const latestEntry = activityLog.length > 0 ? activityLog[activityLog.length - 1] : null;
+    return (_jsx("div", { className: "flex w-full flex-col items-start", "aria-label": "Agent is thinking", children: _jsxs("div", { className: "bg-muted text-foreground rounded-2xl rounded-bl-sm px-4 py-2.5 text-sm", children: [_jsxs("div", { className: "flex items-center gap-2", children: [_jsxs("div", { className: "flex items-center gap-1.5", children: [_jsx("span", { className: "inline-block size-1.5 animate-bounce rounded-full bg-current opacity-60 [animation-delay:0ms]" }), _jsx("span", { className: "inline-block size-1.5 animate-bounce rounded-full bg-current opacity-60 [animation-delay:150ms]" }), _jsx("span", { className: "inline-block size-1.5 animate-bounce rounded-full bg-current opacity-60 [animation-delay:300ms]" })] }), latestEntry ? (_jsx("span", { className: "text-muted-foreground text-xs", children: latestEntry })) : (_jsx("span", { className: "text-muted-foreground text-xs", children: "Thinking..." }))] }), activityLog.length > 1 && (_jsxs("button", { onClick: () => setExpanded(!expanded), className: "text-muted-foreground hover:text-foreground mt-1.5 flex items-center gap-1 text-[11px] transition-colors", children: [expanded ? _jsx(ChevronDown, { className: "size-3" }) : _jsx(ChevronRight, { className: "size-3" }), activityLog.length, " steps"] })), expanded && activityLog.length > 1 ? (_jsx("div", { className: "border-muted-foreground/20 mt-2 border-t pt-2", children: activityLog.map((entry, i) => (_jsxs("div", { className: "text-muted-foreground flex items-center gap-1.5 py-0.5 text-[11px]", children: [_jsx(Activity, { className: "size-2.5 shrink-0 opacity-50" }), _jsx("span", { children: entry })] }, `${entry.slice(0, 20)}-${i}`))) })) : null] }) }));
+}
+/** Collapsible activity log shown above streaming content. */
+function ActivityLogCollapsible({ entries }) {
+    const [expanded, setExpanded] = useState(false);
+    return (_jsxs("div", { className: "flex w-full justify-start", children: [_jsxs("button", { onClick: () => setExpanded(!expanded), className: "text-muted-foreground hover:text-foreground flex items-center gap-1.5 rounded-md px-2 py-1 text-[11px] transition-colors", children: [_jsx(Activity, { className: "size-3 opacity-50" }), expanded ? _jsx(ChevronDown, { className: "size-3" }) : _jsx(ChevronRight, { className: "size-3" }), entries.length, " agent actions"] }), expanded ? (_jsx("div", { className: "bg-muted/50 ml-2 rounded-md px-3 py-2", children: entries.map((entry, i) => (_jsxs("div", { className: "text-muted-foreground flex items-center gap-1.5 py-0.5 text-[11px]", children: [_jsx(Activity, { className: "size-2.5 shrink-0 opacity-50" }), _jsx("span", { children: entry })] }, `${entry.slice(0, 20)}-${i}`))) })) : null] }));
+}

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

@@ -0,0 +1,2 @@
+export declare function GlobalChatPopup(): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=ChatSheet.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"ChatSheet.d.ts","sourceRoot":"","sources":["../../../../../../../src/presentation/web/components/features/chat/ChatSheet.tsx"],"names":[],"mappings":"AAiDA,wBAAgB,eAAe,4CAuX9B"}

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

@@ -0,0 +1,243 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { useState, useCallback, useRef, useEffect } from 'react';
+import { MessageSquare, X, Bot, GripVertical, Maximize2, Minimize2 } from 'lucide-react';
+import { cn } from '../../../lib/utils.js';
+import { Button } from '../../ui/button.js';
+import { ChatTab } from './ChatTab.js';
+// ── Persistent global chat popup (draggable + resizable) ──────────────────
+const DEFAULT_W = 520;
+const DEFAULT_H_VH = 70; // percentage of viewport height
+const MIN_W = 360;
+const MIN_H = 300;
+const STORAGE_KEY = 'shep-global-chat';
+function loadPersistedState() {
+    try {
+        const raw = localStorage.getItem(STORAGE_KEY);
+        if (!raw)
+            return { pos: null, size: null };
+        const parsed = JSON.parse(raw);
+        return {
+            pos: parsed.pos ?? null,
+            size: parsed.size ?? null,
+        };
+    }
+    catch {
+        return { pos: null, size: null };
+    }
+}
+function persistState(pos, size) {
+    try {
+        localStorage.setItem(STORAGE_KEY, JSON.stringify({ pos, size }));
+    }
+    catch {
+        // Storage full or unavailable — ignore
+    }
+}
+export function GlobalChatPopup() {
+    const [isOpen, setIsOpen] = useState(false);
+    const [hasOpened, setHasOpened] = useState(false);
+    const [isMaximized, setIsMaximized] = useState(false);
+    // Position/size — initialized from localStorage
+    // eslint-disable-next-line react/hook-use-state -- wrapped setters below
+    const [pos, setPosRaw] = useState(() => loadPersistedState().pos);
+    // eslint-disable-next-line react/hook-use-state -- wrapped setters below
+    const [size, setSizeRaw] = useState(() => loadPersistedState().size);
+    // Wrapped setters that also persist
+    const setPos = useCallback((v) => {
+        setPosRaw((prev) => {
+            const next = typeof v === 'function' ? v(prev) : v;
+            // Defer persist to avoid doing it on every mousemove frame
+            return next;
+        });
+    }, []);
+    const setSize = useCallback((v) => {
+        setSizeRaw((prev) => {
+            const next = typeof v === 'function' ? v(prev) : v;
+            return next;
+        });
+    }, []);
+    const panelRef = useRef(null);
+    const dragRef = useRef(null);
+    const resizeRef = useRef(null);
+    const toggle = useCallback(() => {
+        setIsOpen((prev) => {
+            if (!prev)
+                setHasOpened(true);
+            return !prev;
+        });
+    }, []);
+    // Store pre-maximize pos/size so we can restore
+    const preMaxRef = useRef({ pos: null, size: null });
+    const toggleMaximize = useCallback(() => {
+        if (!isOpen) {
+            setIsOpen(true);
+            setHasOpened(true);
+        }
+        setIsMaximized((prev) => {
+            if (!prev) {
+                // Entering maximize — save current state
+                preMaxRef.current = { pos, size };
+            }
+            else {
+                // Leaving maximize — restore previous state
+                setPos(preMaxRef.current.pos);
+                setSize(preMaxRef.current.size);
+            }
+            return !prev;
+        });
+    }, [isOpen, pos, size, setPos, setSize]);
+    // Keyboard shortcuts: Cmd/Ctrl+Shift+K = toggle, Cmd/Ctrl+Shift+M = maximize
+    useEffect(() => {
+        const handler = (e) => {
+            if ((e.metaKey || e.ctrlKey) && e.shiftKey && (e.key === 'k' || e.key === 'K')) {
+                e.preventDefault();
+                if (isMaximized)
+                    setIsMaximized(false);
+                toggle();
+                // Focus the composer input after panel opens
+                requestAnimationFrame(() => {
+                    setTimeout(() => {
+                        const input = panelRef.current?.querySelector('textarea');
+                        input?.focus();
+                    }, 100);
+                });
+            }
+            if ((e.metaKey || e.ctrlKey) && e.shiftKey && (e.key === 'm' || e.key === 'M')) {
+                e.preventDefault();
+                toggleMaximize();
+            }
+        };
+        document.addEventListener('keydown', handler);
+        return () => document.removeEventListener('keydown', handler);
+    }, [toggle, toggleMaximize, isMaximized]);
+    // Persist position/size to localStorage (debounced)
+    useEffect(() => {
+        const timer = setTimeout(() => persistState(pos, size), 300);
+        return () => clearTimeout(timer);
+    }, [pos, size]);
+    // ── Drag handling ──────────────────────────────────────────────────────
+    const onDragStart = useCallback((e) => {
+        e.preventDefault();
+        const panel = panelRef.current;
+        if (!panel)
+            return;
+        // If no custom position yet, compute from current DOM position
+        const rect = panel.getBoundingClientRect();
+        const currentX = pos?.x ?? rect.left;
+        const currentY = pos?.y ?? rect.top;
+        dragRef.current = {
+            startX: e.clientX,
+            startY: e.clientY,
+            startPosX: currentX,
+            startPosY: currentY,
+        };
+        const onMove = (ev) => {
+            if (!dragRef.current)
+                return;
+            const dx = ev.clientX - dragRef.current.startX;
+            const dy = ev.clientY - dragRef.current.startY;
+            setPos({
+                x: dragRef.current.startPosX + dx,
+                y: dragRef.current.startPosY + dy,
+            });
+        };
+        const onUp = () => {
+            dragRef.current = null;
+            document.removeEventListener('mousemove', onMove);
+            document.removeEventListener('mouseup', onUp);
+        };
+        document.addEventListener('mousemove', onMove);
+        document.addEventListener('mouseup', onUp);
+    }, [pos, setPos]);
+    // ── Resize handling (from top-right corner) ────────────────────────────
+    const onResizeStart = useCallback((e) => {
+        e.preventDefault();
+        e.stopPropagation();
+        const panel = panelRef.current;
+        if (!panel)
+            return;
+        const rect = panel.getBoundingClientRect();
+        resizeRef.current = {
+            startX: e.clientX,
+            startY: e.clientY,
+            startW: size?.w ?? rect.width,
+            startH: size?.h ?? rect.height,
+        };
+        // Also capture position if not set yet
+        if (!pos) {
+            setPos({ x: rect.left, y: rect.top });
+        }
+        const onMove = (ev) => {
+            if (!resizeRef.current)
+                return;
+            const dx = ev.clientX - resizeRef.current.startX;
+            const dy = ev.clientY - resizeRef.current.startY;
+            setSize({
+                w: Math.max(MIN_W, resizeRef.current.startW + dx),
+                h: Math.max(MIN_H, resizeRef.current.startH - dy),
+            });
+            // Move top edge up as height increases
+            if (pos) {
+                setPos((prev) => (prev ? { ...prev, y: (prev.y ?? 0) + dy } : prev));
+            }
+        };
+        const onUp = () => {
+            resizeRef.current = null;
+            document.removeEventListener('mousemove', onMove);
+            document.removeEventListener('mouseup', onUp);
+        };
+        document.addEventListener('mousemove', onMove);
+        document.addEventListener('mouseup', onUp);
+    }, [size, pos, setPos, setSize]);
+    // Reset position/size on close for clean reopen
+    const handleClose = useCallback(() => {
+        setIsOpen(false);
+        setIsMaximized(false);
+    }, []);
+    // Compute panel style — maximized overrides everything
+    const panelStyle = isMaximized
+        ? {}
+        : pos
+            ? {
+                position: 'fixed',
+                left: pos.x,
+                top: pos.y,
+                width: size?.w ?? DEFAULT_W,
+                height: size?.h ?? `${DEFAULT_H_VH}vh`,
+            }
+            : {
+                width: size?.w ?? DEFAULT_W,
+                height: size?.h ?? `${DEFAULT_H_VH}vh`,
+            };
+    return (_jsxs(_Fragment, { children: [hasOpened ? (_jsxs("div", { ref: panelRef, className: cn(isMaximized
+                    ? 'bg-background absolute inset-0 z-30 flex flex-col overflow-hidden dark:bg-neutral-900'
+                    : cn(!pos && 'absolute bottom-24 left-4', 'z-30 flex flex-col overflow-hidden rounded-lg', 'border-border/60 border dark:border-white/10', 'bg-background dark:bg-neutral-900', 'shadow-[0_8px_40px_-8px_rgba(0,0,0,0.2)] dark:shadow-[0_8px_40px_-8px_rgba(0,0,0,0.6)]'), 'transition-opacity duration-300 ease-out', isOpen ? 'pointer-events-auto opacity-100' : 'pointer-events-none opacity-0'), style: panelStyle, children: [!isMaximized ? (_jsx("div", { className: "h-[2px] shrink-0 bg-gradient-to-r from-transparent via-violet-500/50 to-transparent" })) : null, !isMaximized ? (_jsx("div", { onMouseDown: onResizeStart, className: "absolute top-0 right-0 z-10 h-4 w-4 cursor-ne-resize" })) : null, _jsxs("div", { onMouseDown: isMaximized ? undefined : onDragStart, className: cn('relative flex h-11 shrink-0 items-center gap-2.5 border-b border-black/[0.06] px-3.5 dark:border-white/[0.06]', !isMaximized && 'cursor-grab active:cursor-grabbing'), children: [_jsx("div", { className: "from-foreground/[0.02] to-foreground/[0.02] pointer-events-none absolute inset-0 bg-gradient-to-r via-transparent" }), !isMaximized ? (_jsx(GripVertical, { className: "text-foreground/15 relative h-3.5 w-3.5 shrink-0" })) : null, _jsx("div", { className: "relative flex h-5 w-5 items-center justify-center", children: _jsx(Bot, { className: "text-foreground/50 h-4 w-4" }) }), _jsxs("div", { className: "relative flex items-baseline gap-2", children: [_jsx("span", { className: "text-foreground/90 text-base font-bold tracking-tight", children: "Shep" }), _jsx("span", { className: "text-foreground/30 text-xs font-medium tracking-widest uppercase", children: "global" })] }), _jsxs("div", { className: "relative ml-auto flex items-center gap-0.5", children: [_jsx("button", { type: "button", onClick: toggleMaximize, className: "text-foreground/30 hover:text-foreground/60 rounded-md p-1 transition-colors", title: isMaximized ? 'Restore (⌘⇧M)' : 'Maximize (⌘⇧M)', children: isMaximized ? (_jsx(Minimize2, { className: "h-3.5 w-3.5" })) : (_jsx(Maximize2, { className: "h-3.5 w-3.5" })) }), _jsx("button", { type: "button", onClick: handleClose, className: "text-foreground/30 hover:text-foreground/60 rounded-md p-1 transition-colors", title: "Close (\u2318\u21E7K)", children: _jsx(X, { className: "h-3.5 w-3.5" }) })] })] }), _jsx("div", { className: "flex min-h-0 flex-1 flex-col overflow-hidden", children: _jsx(ChatTab, { featureId: "global" }) }), !isMaximized ? (_jsx("div", { onMouseDown: (e) => {
+                            e.preventDefault();
+                            e.stopPropagation();
+                            const panel = panelRef.current;
+                            if (!panel)
+                                return;
+                            const rect = panel.getBoundingClientRect();
+                            const startX = e.clientX;
+                            const startY = e.clientY;
+                            const startW = size?.w ?? rect.width;
+                            const startH = size?.h ?? rect.height;
+                            if (!pos)
+                                setPos({ x: rect.left, y: rect.top });
+                            const onMove = (ev) => {
+                                setSize({
+                                    w: Math.max(MIN_W, startW + (ev.clientX - startX)),
+                                    h: Math.max(MIN_H, startH + (ev.clientY - startY)),
+                                });
+                            };
+                            const onUp = () => {
+                                document.removeEventListener('mousemove', onMove);
+                                document.removeEventListener('mouseup', onUp);
+                            };
+                            document.addEventListener('mousemove', onMove);
+                            document.addEventListener('mouseup', onUp);
+                        }, className: "absolute right-0 bottom-0 z-10 h-4 w-4 cursor-se-resize" })) : null] })) : null, _jsxs("div", { className: cn('group/fab absolute bottom-4 left-4 z-30 flex items-center', isMaximized && 'hidden'), children: [_jsxs(Button, { size: "icon", onClick: toggle, className: cn('relative h-14 w-14 rounded-full shadow-lg', 'transition-all duration-200 hover:scale-105 hover:shadow-xl active:scale-95', isOpen
+                            ? 'bg-violet-600 text-white hover:bg-violet-500'
+                            : 'bg-violet-500 text-white hover:bg-violet-400 dark:bg-violet-500 dark:hover:bg-violet-400'), children: [_jsx(MessageSquare, { className: cn('absolute h-7 w-7 stroke-[2.5] transition-all duration-200', isOpen ? 'scale-0 rotate-90 opacity-0' : 'scale-100 rotate-0 opacity-100') }), _jsx(X, { className: cn('absolute h-6 w-6 stroke-[2.5] transition-all duration-200', isOpen ? 'scale-100 rotate-0 opacity-100' : 'scale-0 -rotate-90 opacity-0') })] }), _jsx("div", { className: "pointer-events-none ml-3 flex translate-x-[-4px] items-center gap-2 opacity-0 transition-all duration-200 group-hover/fab:translate-x-0 group-hover/fab:opacity-100", children: _jsxs("div", { className: "bg-foreground rounded-lg px-3 py-1.5 shadow-lg", children: [_jsx("p", { className: "text-background text-xs font-medium", children: "Shep Chat" }), _jsxs("p", { className: "text-background/50 mt-0.5 flex items-center gap-1 text-[10px]", children: [_jsx("kbd", { className: "bg-background/15 rounded px-1 py-px font-mono", children: "\u2318" }), _jsx("kbd", { className: "bg-background/15 rounded px-1 py-px font-mono", children: "\u21E7" }), _jsx("kbd", { className: "bg-background/15 rounded px-1 py-px font-mono", children: "K" })] })] }) })] })] }));
+}

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

@@ -0,0 +1,6 @@
+export interface ChatTabProps {
+    featureId: string;
+    worktreePath?: string;
+}
+export declare function ChatTab({ featureId, worktreePath }: ChatTabProps): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=ChatTab.d.ts.map