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

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

@@ -0,0 +1 @@
+{"version":3,"file":"ChatTab.d.ts","sourceRoot":"","sources":["../../../../../../../src/presentation/web/components/features/chat/ChatTab.tsx"],"names":[],"mappings":"AAaA,MAAM,WAAW,YAAY;IAC3B,SAAS,EAAE,MAAM,CAAC;IAClB,YAAY,CAAC,EAAE,MAAM,CAAC;CACvB;AAED,wBAAgB,OAAO,CAAC,EAAE,SAAS,EAAE,YAAY,EAAE,EAAE,YAAY,2CAgGhE"}

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

@@ -0,0 +1,67 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { useCallback, useState } from 'react';
+import { AssistantRuntimeProvider } from '@assistant-ui/react';
+import { Trash2, Square, Cpu } from 'lucide-react';
+import { cn } from '../../../lib/utils.js';
+import { Thread } from '../../assistant-ui/thread.js';
+import { useAttachments } from '../../../hooks/use-attachments.js';
+import { composeUserInput } from '../../../app/actions/compose-user-input.js';
+import { AgentModelPicker } from '../../features/settings/AgentModelPicker/index.js';
+import { useChatRuntime } from './useChatRuntime.js';
+import { ChatComposer } from './ChatComposer.js';
+export function ChatTab({ featureId, worktreePath }) {
+    const [overrideAgent, setOverrideAgent] = useState(undefined);
+    const [overrideModel, setOverrideModel] = useState(undefined);
+    const att = useAttachments();
+    const contentTransform = useCallback((content) => composeUserInput(content, att.completedAttachments.map((a) => ({ path: a.path, name: a.name, notes: a.notes }))), [att.completedAttachments]);
+    const { runtime, status, clearChat, stopAgent, sessionInfo, isChatLoading } = useChatRuntime(featureId, worktreePath, { contentTransform, onMessageSent: att.clearAttachments });
+    const handlePickFiles = useCallback(async () => {
+        try {
+            const res = await fetch('/api/dialog/pick-files');
+            if (!res.ok)
+                return;
+            const data = (await res.json());
+            if (!data.paths?.length)
+                return;
+            for (const filePath of data.paths) {
+                const uploadRes = await fetch('/api/attachments/upload-from-path', {
+                    method: 'POST',
+                    headers: { 'Content-Type': 'application/json' },
+                    body: JSON.stringify({ path: filePath, sessionId: `chat-${featureId}` }),
+                });
+                if (!uploadRes.ok)
+                    continue;
+                const uploaded = (await uploadRes.json());
+                att.addAttachment(uploaded);
+            }
+        }
+        catch {
+            // Native picker not available — ignore
+        }
+        // eslint-disable-next-line react-hooks/exhaustive-deps -- att.addAttachment is a stable callback from useAttachments
+    }, [featureId, att.addAttachment]);
+    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) => {
+                setOverrideAgent(agent);
+                setOverrideModel(model);
+            }, className: "w-55" }) }));
+    return (_jsxs("div", { className: "flex h-full min-h-0 flex-col", children: [_jsx(ChatHeader, { sessionInfo: sessionInfo, isAgentActive: status.isRunning, onClear: clearChat, onStop: stopAgent }), _jsx("div", { className: "flex min-h-0 flex-1 flex-col", children: isChatLoading ? (_jsx(ChatSkeleton, {})) : (_jsx(AssistantRuntimeProvider, { runtime: runtime, children: _jsx(Thread, { composer: composer }) })) })] }));
+}
+// ── Loading skeleton ────────────────────────────────────────────────────────
+function ChatSkeleton() {
+    return (_jsxs("div", { className: "flex flex-1 flex-col gap-3 p-4 pt-6", children: [_jsxs("div", { className: "flex items-start gap-2.5", children: [_jsx("div", { className: "bg-muted h-6 w-6 animate-pulse rounded-full" }), _jsxs("div", { className: "flex flex-col gap-1.5", children: [_jsx("div", { className: "bg-muted h-4 w-48 animate-pulse rounded-lg" }), _jsx("div", { className: "bg-muted h-4 w-72 animate-pulse rounded-lg" }), _jsx("div", { className: "bg-muted h-4 w-36 animate-pulse rounded-lg" })] })] }), _jsxs("div", { className: "flex items-start gap-2.5", children: [_jsx("div", { className: "bg-muted h-6 w-6 animate-pulse rounded-full" }), _jsx("div", { className: "bg-muted h-4 w-32 animate-pulse rounded-lg" })] }), _jsxs("div", { className: "flex items-start gap-2.5", children: [_jsx("div", { className: "bg-muted h-6 w-6 animate-pulse rounded-full" }), _jsxs("div", { className: "flex flex-col gap-1.5", children: [_jsx("div", { className: "bg-muted h-4 w-56 animate-pulse rounded-lg" }), _jsx("div", { className: "bg-muted h-4 w-64 animate-pulse rounded-lg" })] })] })] }));
+}
+// ── Chat header — compact session info + actions ─────────────────────────────
+function ChatHeader({ sessionInfo, isAgentActive, onClear, onStop, }) {
+    return (_jsxs("div", { className: "flex h-8 shrink-0 items-center border-b px-3", children: [_jsx("div", { className: "flex min-w-0 flex-1 items-center gap-2", children: sessionInfo ? (_jsxs(_Fragment, { children: [isAgentActive ? (_jsx("span", { className: "h-1.5 w-1.5 shrink-0 animate-pulse rounded-full bg-emerald-500" })) : (_jsx(Cpu, { className: "text-muted-foreground/40 h-3 w-3 shrink-0" })), _jsxs("span", { className: "text-muted-foreground font-mono text-[10px]", children: [sessionInfo.model ?? 'agent', sessionInfo.sessionId ? ` · ${sessionInfo.sessionId.slice(0, 8)}` : ''] })] })) : (_jsx("span", { className: "text-muted-foreground/40 text-[11px]", children: "No session" })) }), _jsxs("div", { className: "flex items-center gap-1 pl-2", children: [sessionInfo ? (_jsxs(_Fragment, { children: [_jsxs(ToolbarButton, { onClick: () => {
+                                    void onStop();
+                                }, title: "Force stop agent process", variant: "danger", children: [_jsx(Square, { className: "h-2.5 w-2.5 fill-current" }), _jsx("span", { children: "Stop" })] }), _jsx("span", { className: "text-border mx-0.5", children: "|" })] })) : null, _jsxs(ToolbarButton, { onClick: () => {
+                            void onClear();
+                        }, title: "Clear chat history", children: [_jsx(Trash2, { className: "h-2.5 w-2.5" }), _jsx("span", { children: "Clear" })] })] })] }));
+}
+// ── Toolbar button ──────────────────────────────────────────────────────────
+function ToolbarButton({ children, onClick, title, variant, }) {
+    return (_jsx("button", { type: "button", onClick: onClick, title: title, className: cn('inline-flex items-center gap-1 rounded-md px-2 py-1 text-xs transition-colors', variant === 'danger'
+            ? 'text-destructive hover:bg-destructive/10'
+            : 'text-muted-foreground hover:text-foreground hover:bg-muted'), children: children }));
+}

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

@@ -0,0 +1,25 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import type { ThreadMessageLike } from '@assistant-ui/react';
+/**
+ * Wrapper component for stories — accepts props that configure the mock.
+ */
+declare function ChatStory({ initialMessages, simulateStreaming, }: {
+    initialMessages?: ThreadMessageLike[];
+    simulateStreaming?: boolean;
+}): import("react/jsx-runtime").JSX.Element;
+declare const meta: Meta<typeof ChatStory>;
+export default meta;
+type Story = StoryObj<typeof ChatStory>;
+/** Empty state — no messages, prompt always visible. Type a message to chat. */
+export declare const Empty: Story;
+/** Pre-populated conversation with code blocks, markdown, and multiple turns. */
+export declare const WithHistory: Story;
+/** Agent auto-boot message — shown when agent starts on first message. */
+export declare const AutoBoot: Story;
+/** Rich markdown — headers, bold, lists, blockquotes, links, inline code. */
+export declare const RichMarkdown: Story;
+/** Long conversation — many messages to test scrolling behavior. */
+export declare const LongConversation: Story;
+/** Non-streaming mode — response appears all at once after delay. */
+export declare const NonStreaming: Story;
+//# sourceMappingURL=ChatTab.stories.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"ChatTab.stories.d.ts","sourceRoot":"","sources":["../../../../../../../src/presentation/web/components/features/chat/ChatTab.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,IAAI,EAAE,QAAQ,EAAE,MAAM,kBAAkB,CAAC;AAEvD,OAAO,KAAK,EAAE,iBAAiB,EAAiB,MAAM,qBAAqB,CAAC;AA2G5E;;GAEG;AACH,iBAAS,SAAS,CAAC,EACjB,eAAoB,EACpB,iBAAwB,GACzB,EAAE;IACD,eAAe,CAAC,EAAE,iBAAiB,EAAE,CAAC;IACtC,iBAAiB,CAAC,EAAE,OAAO,CAAC;CAC7B,2CAMA;AAED,QAAA,MAAM,IAAI,EAAE,IAAI,CAAC,OAAO,SAAS,CAqBhC,CAAC;AAEF,eAAe,IAAI,CAAC;AACpB,KAAK,KAAK,GAAG,QAAQ,CAAC,OAAO,SAAS,CAAC,CAAC;AAExC,gFAAgF;AAChF,eAAO,MAAM,KAAK,EAAE,KAKnB,CAAC;AAEF,iFAAiF;AACjF,eAAO,MAAM,WAAW,EAAE,KA0CzB,CAAC;AAEF,0EAA0E;AAC1E,eAAO,MAAM,QAAQ,EAAE,KAYtB,CAAC;AAEF,6EAA6E;AAC7E,eAAO,MAAM,YAAY,EAAE,KA6C1B,CAAC;AAEF,oEAAoE;AACpE,eAAO,MAAM,gBAAgB,EAAE,KAkB9B,CAAC;AAEF,qEAAqE;AACrE,eAAO,MAAM,YAAY,EAAE,KAK1B,CAAC"}

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

@@ -0,0 +1,237 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useState, useCallback } from 'react';
+import { AssistantRuntimeProvider, useExternalStoreRuntime } from '@assistant-ui/react';
+import { Thread } from '../../assistant-ui/thread.js';
+// ── Mock runtime wrapper for Storybook ──────────────────────────────────────
+function MockChatProvider({ initialMessages = [], simulateDelay = 1500, simulateStreaming = true, children, }) {
+    const [messages, setMessages] = useState(initialMessages);
+    const [isRunning, setIsRunning] = useState(false);
+    const onNew = useCallback(async (message) => {
+        const textPart = message.content.find((c) => c.type === 'text');
+        if (textPart?.type !== 'text')
+            return;
+        // Add user message
+        const userMsg = {
+            id: `user-${Date.now()}`,
+            role: 'user',
+            content: [{ type: 'text', text: textPart.text }],
+            createdAt: new Date(),
+        };
+        setMessages((prev) => [...prev, userMsg]);
+        setIsRunning(true);
+        if (simulateStreaming) {
+            // Simulate streaming response
+            const fullResponse = generateMockResponse(textPart.text);
+            const assistantId = `assistant-${Date.now()}`;
+            const assistantMsg = {
+                id: assistantId,
+                role: 'assistant',
+                content: [{ type: 'text', text: '' }],
+                createdAt: new Date(),
+            };
+            setMessages((prev) => [...prev, assistantMsg]);
+            // Stream tokens
+            const words = fullResponse.split(' ');
+            let accumulated = '';
+            for (let i = 0; i < words.length; i++) {
+                await new Promise((r) => setTimeout(r, 30 + Math.random() * 50));
+                accumulated += (i > 0 ? ' ' : '') + words[i];
+                const text = accumulated;
+                setMessages((prev) => prev.map((m) => m.id === assistantId ? { ...m, content: [{ type: 'text', text }] } : m));
+            }
+        }
+        else {
+            await new Promise((r) => setTimeout(r, simulateDelay));
+            const assistantMsg = {
+                id: `assistant-${Date.now()}`,
+                role: 'assistant',
+                content: [{ type: 'text', text: generateMockResponse(textPart.text) }],
+                createdAt: new Date(),
+            };
+            setMessages((prev) => [...prev, assistantMsg]);
+        }
+        setIsRunning(false);
+    }, [simulateDelay, simulateStreaming]);
+    const runtime = useExternalStoreRuntime({
+        messages,
+        convertMessage: useCallback((msg) => msg, []),
+        isRunning,
+        onNew,
+    });
+    return _jsx(AssistantRuntimeProvider, { runtime: runtime, children: children });
+}
+function generateMockResponse(userMessage) {
+    const lower = userMessage.toLowerCase();
+    if (lower.includes('test')) {
+        return `## Test Results\n\nI ran the test suite and here are the results:\n\n- **42 tests passed**\n- **0 tests failed**\n- **Coverage: 87%**\n\nThe main gaps are in:\n1. OAuth callback handler (3 uncovered branches)\n2. Token refresh logic (missing edge case)\n\n\`\`\`typescript\ndescribe("auth", () => {\n  it("should refresh token", async () => {\n    const token = await refreshToken("expired");\n    expect(token).toBeDefined();\n  });\n});\n\`\`\`\n\nWant me to write the missing tests?`;
+    }
+    if (lower.includes('fix') || lower.includes('bug')) {
+        return `I found the issue. The problem is in the \`handleRequest\` function where the error boundary doesn't catch async rejections.\n\n**Root cause:** The \`try/catch\` block wraps synchronous code, but the database query is awaited outside of it.\n\n**Fix:**\n\`\`\`typescript\nasync function handleRequest(req: Request) {\n  try {\n    const result = await db.query(req.params.id);\n    return Response.json(result);\n  } catch (error) {\n    logger.error("Request failed", { error });\n    return Response.json({ error: "Internal error" }, { status: 500 });\n  }\n}\n\`\`\`\n\nI've applied this fix. Let me know if you want me to add error handling elsewhere.`;
+    }
+    if (lower.includes('help') || lower.includes('what')) {
+        return `I can help you with this feature! Here's what I can do:\n\n1. **Run tests** and analyze coverage\n2. **Fix bugs** by tracing through the code\n3. **Implement features** following the project's patterns\n4. **Review code** for quality and security issues\n\n> Just describe what you need and I'll get started.\n\nFor example, try saying:\n- "Run the auth module tests"\n- "Fix the database connection timeout"\n- "Add input validation to the API endpoint"`;
+    }
+    return `I understand your request. Let me analyze the codebase and work on this.\n\nLooking at the relevant files:\n- \`src/handlers/main.ts\` — entry point\n- \`src/services/core.ts\` — business logic\n- \`src/utils/helpers.ts\` — shared utilities\n\nI'll make the necessary changes and let you know when it's ready. This should take just a moment.`;
+}
+// ── Storybook meta ──────────────────────────────────────────────────────────
+/**
+ * Wrapper component for stories — accepts props that configure the mock.
+ */
+function ChatStory({ initialMessages = [], simulateStreaming = true, }) {
+    return (_jsx(MockChatProvider, { initialMessages: initialMessages, simulateStreaming: simulateStreaming, children: _jsx(Thread, {}) }));
+}
+const meta = {
+    title: 'Features/Chat/ChatTab',
+    component: ChatStory,
+    tags: ['autodocs'],
+    parameters: {
+        layout: 'fullscreen',
+    },
+    decorators: [
+        (Story) => (_jsx("div", { style: {
+                height: '600px',
+                maxWidth: '640px',
+                margin: '0 auto',
+                border: '1px solid #e5e7eb',
+            }, children: _jsx(Story, {}) })),
+    ],
+};
+export default meta;
+/** Empty state — no messages, prompt always visible. Type a message to chat. */
+export const Empty = {
+    args: {
+        initialMessages: [],
+        simulateStreaming: true,
+    },
+};
+/** Pre-populated conversation with code blocks, markdown, and multiple turns. */
+export const WithHistory = {
+    args: {
+        initialMessages: [
+            {
+                id: 'msg-1',
+                role: 'user',
+                content: [
+                    { type: 'text', text: 'Can you check the test coverage for the auth module?' },
+                ],
+                createdAt: new Date(Date.now() - 300000),
+            },
+            {
+                id: 'msg-2',
+                role: 'assistant',
+                content: [
+                    {
+                        type: 'text',
+                        text: '## Test Results\n\nI ran the test suite and here are the results:\n\n- **42 tests passed**\n- **0 tests failed**\n- **Coverage: 87%**\n\nThe main gaps are in:\n1. OAuth callback handler (3 uncovered branches)\n2. Token refresh logic (missing edge case)\n\n```typescript\ndescribe("auth", () => {\n  it("should refresh token", async () => {\n    const token = await refreshToken("expired");\n    expect(token).toBeDefined();\n  });\n});\n```\n\nWant me to write the missing tests?',
+                    },
+                ],
+                createdAt: new Date(Date.now() - 240000),
+            },
+            {
+                id: 'msg-3',
+                role: 'user',
+                content: [{ type: 'text', text: 'Yes, please write the missing tests' }],
+                createdAt: new Date(Date.now() - 180000),
+            },
+            {
+                id: 'msg-4',
+                role: 'assistant',
+                content: [
+                    {
+                        type: 'text',
+                        text: 'I\'ve added the missing tests:\n\n```typescript\ndescribe("OAuth callback", () => {\n  it("should handle expired state parameter", async () => {\n    const result = await handleCallback({ state: "expired" });\n    expect(result.error).toBe("invalid_state");\n  });\n\n  it("should handle missing code parameter", async () => {\n    const result = await handleCallback({ state: "valid" });\n    expect(result.error).toBe("missing_code");\n  });\n\n  it("should handle provider timeout", async () => {\n    jest.spyOn(provider, "exchange").mockRejectedValue(new Error("timeout"));\n    const result = await handleCallback({ state: "valid", code: "abc" });\n    expect(result.error).toBe("provider_error");\n  });\n});\n```\n\nCoverage is now at **94%**. The remaining 6% is defensive error handling that\'s hard to trigger in tests.',
+                    },
+                ],
+                createdAt: new Date(Date.now() - 120000),
+            },
+        ],
+        simulateStreaming: true,
+    },
+};
+/** Agent auto-boot message — shown when agent starts on first message. */
+export const AutoBoot = {
+    args: {
+        initialMessages: [
+            {
+                id: 'status-boot',
+                role: 'assistant',
+                content: [{ type: 'text', text: 'Agent is waking up...' }],
+                createdAt: new Date(),
+            },
+        ],
+        simulateStreaming: true,
+    },
+};
+/** Rich markdown — headers, bold, lists, blockquotes, links, inline code. */
+export const RichMarkdown = {
+    args: {
+        initialMessages: [
+            {
+                id: 'msg-1',
+                role: 'user',
+                content: [{ type: 'text', text: 'What can you help me with?' }],
+                createdAt: new Date(Date.now() - 60000),
+            },
+            {
+                id: 'msg-2',
+                role: 'assistant',
+                content: [
+                    {
+                        type: 'text',
+                        text: 'I can help you with this feature! Here\'s what I can do:\n\n1. **Run tests** and analyze coverage\n2. **Fix bugs** by tracing through the code\n3. **Implement features** following the project\'s patterns\n4. **Review code** for quality and security issues\n\n> Just describe what you need and I\'ll get started.\n\nFor example, try saying:\n- "Run the auth module tests"\n- "Fix the database connection timeout"\n- "Add input validation to the API endpoint"',
+                    },
+                ],
+                createdAt: new Date(Date.now() - 55000),
+            },
+            {
+                id: 'msg-3',
+                role: 'user',
+                content: [
+                    {
+                        type: 'text',
+                        text: 'Fix the database connection timeout bug. The CI logs show it fails after 30 seconds but only on the CI runner, not locally.',
+                    },
+                ],
+                createdAt: new Date(Date.now() - 50000),
+            },
+            {
+                id: 'msg-4',
+                role: 'assistant',
+                content: [
+                    {
+                        type: 'text',
+                        text: 'I found the issue. The problem is in the `handleRequest` function where the error boundary doesn\'t catch async rejections.\n\n**Root cause:** The `try/catch` block wraps synchronous code, but the database query is awaited outside of it.\n\n**Fix:**\n```typescript\nasync function handleRequest(req: Request) {\n  try {\n    const result = await db.query(req.params.id);\n    return Response.json(result);\n  } catch (error) {\n    logger.error("Request failed", { error });\n    return Response.json({ error: "Internal error" }, { status: 500 });\n  }\n}\n```\n\nI\'ve applied this fix. Let me know if you want me to add error handling elsewhere.',
+                    },
+                ],
+                createdAt: new Date(Date.now() - 40000),
+            },
+        ],
+        simulateStreaming: true,
+    },
+};
+/** Long conversation — many messages to test scrolling behavior. */
+export const LongConversation = {
+    args: {
+        initialMessages: Array.from({ length: 12 }, (_, i) => ({
+            id: `msg-${i}`,
+            role: (i % 2 === 0 ? 'user' : 'assistant'),
+            content: [
+                {
+                    type: 'text',
+                    text: i % 2 === 0
+                        ? `This is user message #${Math.floor(i / 2) + 1}. I'm asking about various aspects of the codebase.`
+                        : `Here's my response to your question #${Math.floor(i / 2) + 1}. I've analyzed the code and found some interesting patterns.\n\nThe key insight is that the **architecture follows clean separation** of concerns, which makes it easy to test and maintain.\n\n\`\`\`typescript\nconst result = await service.process(input);\nconsole.log(result.status);\n\`\`\``,
+                },
+            ],
+            createdAt: new Date(Date.now() - (12 - i) * 30000),
+        })),
+        simulateStreaming: true,
+    },
+};
+/** Non-streaming mode — response appears all at once after delay. */
+export const NonStreaming = {
+    args: {
+        initialMessages: [],
+        simulateStreaming: false,
+    },
+};

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

@@ -0,0 +1,34 @@
+interface SessionInfo {
+    pid: number | null;
+    sessionId: string | null;
+    model: string | null;
+    startedAt: string;
+    idleTimeoutMinutes: number;
+    lastActivityAt: string;
+}
+export interface ChatStatus {
+    /** Whether the agent is actively working (booting, thinking, streaming). */
+    isRunning: boolean;
+    /** Human-readable status text (e.g. "Agent is waking up...", "Using tool: Read"). */
+    statusText: string | null;
+}
+export interface ChatRuntimeOptions {
+    /** Transform message content before sending (e.g. append attachment refs). */
+    contentTransform?: (content: string) => string;
+    /** Called after a message is successfully sent (e.g. clear attachments). */
+    onMessageSent?: () => void;
+}
+/**
+ * `featureId` is a polymorphic scope key: a feature UUID, "repo-<id>", or "global".
+ * All API calls and SSE subscriptions are scoped to this key.
+ */
+export declare function useChatRuntime(featureId: string, worktreePath?: string, options?: ChatRuntimeOptions): {
+    runtime: import("@assistant-ui/react").AssistantRuntime;
+    status: ChatStatus;
+    clearChat: () => Promise<void>;
+    stopAgent: () => Promise<void>;
+    sessionInfo: SessionInfo | null;
+    isChatLoading: boolean;
+};
+export {};
+//# sourceMappingURL=useChatRuntime.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"useChatRuntime.d.ts","sourceRoot":"","sources":["../../../../../../../src/presentation/web/components/features/chat/useChatRuntime.ts"],"names":[],"mappings":"AAiBA,UAAU,WAAW;IACnB,GAAG,EAAE,MAAM,GAAG,IAAI,CAAC;IACnB,SAAS,EAAE,MAAM,GAAG,IAAI,CAAC;IACzB,KAAK,EAAE,MAAM,GAAG,IAAI,CAAC;IACrB,SAAS,EAAE,MAAM,CAAC;IAClB,kBAAkB,EAAE,MAAM,CAAC;IAC3B,cAAc,EAAE,MAAM,CAAC;CACxB;AAgDD,MAAM,WAAW,UAAU;IACzB,4EAA4E;IAC5E,SAAS,EAAE,OAAO,CAAC;IACnB,qFAAqF;IACrF,UAAU,EAAE,MAAM,GAAG,IAAI,CAAC;CAC3B;AAID,MAAM,WAAW,kBAAkB;IACjC,8EAA8E;IAC9E,gBAAgB,CAAC,EAAE,CAAC,OAAO,EAAE,MAAM,KAAK,MAAM,CAAC;IAC/C,4EAA4E;IAC5E,aAAa,CAAC,EAAE,MAAM,IAAI,CAAC;CAC5B;AAED;;;GAGG;AACH,wBAAgB,cAAc,CAC5B,SAAS,EAAE,MAAM,EACjB,YAAY,CAAC,EAAE,MAAM,EACrB,OAAO,CAAC,EAAE,kBAAkB;;;;;;;EA0P7B"}

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

@@ -0,0 +1,266 @@
+'use client';
+import { useState, useEffect, useRef, useCallback, useMemo } from 'react';
+import { useExternalStoreRuntime } from '@assistant-ui/react';
+import { useQuery, useMutation, useQueryClient } from '@tanstack/react-query';
+import { InteractiveMessageRole } from '../../../../../../packages/core/src/domain/generated/output.js';
+// ── API helpers ─────────────────────────────────────────────────────────────
+async function fetchChatState(featureId) {
+    const res = await fetch(`/api/interactive/chat/${featureId}/messages`);
+    if (!res.ok) {
+        // eslint-disable-next-line no-console
+        console.error(`[ChatState] fetch failed: ${res.status}`, await res.text().catch(() => ''));
+        throw new Error(`Failed to fetch chat state: ${res.status}`);
+    }
+    return res.json();
+}
+async function postMessage(featureId, content, worktreePath) {
+    const res = await fetch(`/api/interactive/chat/${featureId}/messages`, {
+        method: 'POST',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify({ content, worktreePath }),
+    });
+    if (!res.ok)
+        throw new Error(`Failed to send message: ${res.status}`);
+    const data = (await res.json());
+    return data.message;
+}
+// ── Convert domain message to assistant-ui format ───────────────────────────
+function toThreadMessage(msg) {
+    return {
+        id: msg.id,
+        role: msg.role === InteractiveMessageRole.user ? 'user' : 'assistant',
+        content: [{ type: 'text', text: msg.content }],
+        createdAt: msg.createdAt ? new Date(msg.createdAt) : undefined,
+    };
+}
+// ── Query key ───────────────────────────────────────────────────────────────
+function chatQueryKey(featureId) {
+    return ['chat-messages', featureId];
+}
+/**
+ * `featureId` is a polymorphic scope key: a feature UUID, "repo-<id>", or "global".
+ * All API calls and SSE subscriptions are scoped to this key.
+ */
+export function useChatRuntime(featureId, worktreePath, options) {
+    const queryClient = useQueryClient();
+    // ── TanStack Query: fetch messages from backend ─────────────────────────
+    const { data: chatState, isLoading: isChatLoading } = useQuery({
+        queryKey: chatQueryKey(featureId),
+        queryFn: () => fetchChatState(featureId),
+        refetchInterval: 3000, // Fallback polling every 3s
+    });
+    const messages = useMemo(() => chatState?.messages ?? [], [chatState?.messages]);
+    const sessionStatus = chatState?.sessionStatus ?? null;
+    const backendStreamingText = chatState?.streamingText ?? null;
+    // Cache last known sessionInfo so PID stays visible after process exits
+    const lastSessionInfoRef = useRef(null);
+    if (chatState?.sessionInfo) {
+        lastSessionInfoRef.current = chatState.sessionInfo;
+    }
+    const sessionInfo = chatState?.sessionInfo ?? lastSessionInfoRef.current;
+    // ── SSE: real-time streaming deltas ─────────────────────────────────────
+    const [streamingText, setStreamingText] = useState('');
+    const [statusLog, setStatusLog] = useState(null);
+    const [awaitingResponse, setAwaitingResponse] = useState(false);
+    const awaitingTimerRef = useRef(null);
+    const eventSourceRef = useRef(null);
+    // Delayed awaiting — only show Thinking bubble after 600ms to avoid flash
+    const startAwaiting = useCallback(() => {
+        if (awaitingTimerRef.current)
+            clearTimeout(awaitingTimerRef.current);
+        awaitingTimerRef.current = setTimeout(() => setAwaitingResponse(true), 600);
+    }, []);
+    const cancelAwaiting = useCallback(() => {
+        if (awaitingTimerRef.current) {
+            clearTimeout(awaitingTimerRef.current);
+            awaitingTimerRef.current = null;
+        }
+        setAwaitingResponse(false);
+    }, []);
+    // Clear awaitingResponse when backend delivers a new assistant message
+    const lastMsgRole = messages.length > 0 ? messages[messages.length - 1].role : null;
+    useEffect(() => {
+        if (lastMsgRole === InteractiveMessageRole.assistant) {
+            cancelAwaiting();
+        }
+    }, [lastMsgRole, messages.length, cancelAwaiting]);
+    useEffect(() => {
+        const es = new EventSource(`/api/interactive/chat/${featureId}/stream`);
+        eventSourceRef.current = es;
+        es.addEventListener('delta', (event) => {
+            try {
+                const data = JSON.parse(event.data);
+                if (data.delta) {
+                    cancelAwaiting();
+                    setStreamingText((prev) => prev + data.delta);
+                    setStatusLog(null);
+                }
+            }
+            catch {
+                // Ignore
+            }
+        });
+        es.addEventListener('activity', () => {
+            cancelAwaiting();
+            // Tool events are already persisted to DB — just refetch to show them
+            void queryClient.invalidateQueries({ queryKey: chatQueryKey(featureId) });
+        });
+        es.addEventListener('log', (event) => {
+            try {
+                const data = JSON.parse(event.data);
+                if (data.log) {
+                    cancelAwaiting();
+                    setStatusLog(data.log);
+                }
+            }
+            catch {
+                // Ignore
+            }
+        });
+        es.addEventListener('done', () => {
+            setStatusLog(null);
+            cancelAwaiting();
+            // Refetch first, THEN clear local streaming state so there's no gap
+            void queryClient.invalidateQueries({ queryKey: chatQueryKey(featureId) }).then(() => {
+                setStreamingText('');
+            });
+        });
+        es.onerror = () => {
+            // SSE dropped — the 3s polling handles reliability
+        };
+        return () => {
+            es.close();
+            eventSourceRef.current = null;
+        };
+    }, [featureId, queryClient, cancelAwaiting]);
+    // ── Mutation: send user message ─────────────────────────────────────────
+    const sendMutation = useMutation({
+        mutationFn: (content) => postMessage(featureId, content, worktreePath ?? ''),
+        onMutate: async (content) => {
+            startAwaiting();
+            // Cancel in-flight refetches so our optimistic update isn't overwritten
+            await queryClient.cancelQueries({ queryKey: chatQueryKey(featureId) });
+            const previous = queryClient.getQueryData(chatQueryKey(featureId));
+            // Optimistically add user message
+            queryClient.setQueryData(chatQueryKey(featureId), (old) => ({
+                messages: [
+                    ...(old?.messages ?? []),
+                    {
+                        id: `optimistic-${Date.now()}`,
+                        featureId,
+                        role: InteractiveMessageRole.user,
+                        content,
+                        createdAt: new Date(),
+                        updatedAt: new Date(),
+                    },
+                ],
+                sessionStatus: old?.sessionStatus ?? 'booting',
+                streamingText: null,
+                sessionInfo: old?.sessionInfo ?? null,
+            }));
+            return { previous };
+        },
+        onError: (_err, _content, context) => {
+            // Rollback on error
+            if (context?.previous) {
+                queryClient.setQueryData(chatQueryKey(featureId), context.previous);
+            }
+        },
+        onSettled: () => {
+            // Refetch to reconcile optimistic data with server
+            void queryClient.invalidateQueries({ queryKey: chatQueryKey(featureId) });
+        },
+    });
+    // ── Derive running state ────────────────────────────────────────────────
+    // Note: sendMutation.isPending is excluded — the 600ms awaitingResponse
+    // timer provides a smooth transition without flicker.
+    const isRunning = awaitingResponse || !!streamingText || !!statusLog || sessionStatus === 'booting';
+    // ── Build thread messages for assistant-ui ─────────────────────────────
+    const activeStreamText = streamingText ?? backendStreamingText ?? '';
+    const threadMessages = useMemo(() => {
+        const result = messages.map(toThreadMessage);
+        // Streaming text as the last message — may include a live activity suffix
+        if (activeStreamText.trim()) {
+            const parts = [{ type: 'text', text: activeStreamText }];
+            // Append live activity indicator when agent is doing tool work
+            if (statusLog) {
+                parts.push({ type: 'text', text: `*⏳ ${statusLog}*` });
+            }
+            result.push({ id: 'streaming', role: 'assistant', content: parts });
+        }
+        else if (statusLog) {
+            // No streaming text yet but agent is actively working (tool calls, etc.)
+            result.push({
+                id: 'streaming',
+                role: 'assistant',
+                content: [{ type: 'text', text: `*⏳ ${statusLog}*` }],
+            });
+        }
+        else if (awaitingResponse || sessionStatus === 'booting') {
+            // Note: sendMutation.isPending is NOT included here — the 600ms
+            // delay via startAwaiting() prevents flash on fast responses.
+            result.push({
+                id: 'streaming',
+                role: 'assistant',
+                content: [
+                    {
+                        type: 'text',
+                        text: sessionStatus === 'booting' ? '*Agent is waking up...*' : '*Thinking...*',
+                    },
+                ],
+            });
+        }
+        return result;
+    }, [messages, activeStreamText, awaitingResponse, sessionStatus, statusLog]);
+    // ── Status info for typing indicator ──────────────────────────────────
+    const status = useMemo(() => {
+        if (!isRunning)
+            return { isRunning: false, statusText: null };
+        return { isRunning: true, statusText: statusLog };
+    }, [isRunning, statusLog]);
+    // ── onNew: called by assistant-ui when user submits ─────────────────────
+    const onNew = useCallback(async (message) => {
+        const textPart = message.content.find((c) => c.type === 'text');
+        if (textPart?.type !== 'text' || !textPart.text.trim())
+            return;
+        const content = options?.contentTransform
+            ? options.contentTransform(textPart.text)
+            : textPart.text;
+        sendMutation.mutate(content, {
+            onSuccess: () => options?.onMessageSent?.(),
+        });
+    }, [sendMutation, options]);
+    // ── Clear chat ─────────────────────────────────────────────────────────
+    const clearChat = useCallback(async () => {
+        const res = await fetch(`/api/interactive/chat/${featureId}/messages`, { method: 'DELETE' });
+        if (!res.ok)
+            throw new Error(`Failed to clear chat: ${res.status}`);
+        setStreamingText('');
+        setStatusLog(null);
+        cancelAwaiting();
+        void queryClient.invalidateQueries({ queryKey: chatQueryKey(featureId) });
+    }, [featureId, queryClient, cancelAwaiting]);
+    // ── Stop agent ────────────────────────────────────────────────────────
+    const stopAgent = useCallback(async () => {
+        const res = await fetch(`/api/interactive/chat/${featureId}/stop`, { method: 'POST' });
+        if (!res.ok)
+            throw new Error(`Failed to stop agent: ${res.status}`);
+        setStreamingText('');
+        setStatusLog(null);
+        cancelAwaiting();
+        void queryClient.invalidateQueries({ queryKey: chatQueryKey(featureId) });
+    }, [featureId, queryClient, cancelAwaiting]);
+    // ── Build assistant-ui runtime ──────────────────────────────────────────
+    const runtime = useExternalStoreRuntime({
+        messages: threadMessages,
+        convertMessage: useCallback((msg) => msg, []),
+        isRunning,
+        onNew,
+        onCancel: useCallback(async () => {
+            setStreamingText('');
+            setStatusLog(null);
+            cancelAwaiting();
+        }, [cancelAwaiting]),
+    });
+    return { runtime, status, clearChat, stopAgent, sessionInfo, isChatLoading };
+}

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":"AAIA,OAAO,KAAK,EAAE,IAAI,EAAY,MAAM,eAAe,CAAC;AAKpD,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,uCAAuC,CAAC;AAwB5E,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,2CA0ZzF"}
+{"version":3,"file":"control-center-inner.d.ts","sourceRoot":"","sources":["../../../../../../../src/presentation/web/components/features/control-center/control-center-inner.tsx"],"names":[],"mappings":"AAIA,OAAO,KAAK,EAAE,IAAI,EAAY,MAAM,eAAe,CAAC;AAIpD,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,uCAAuC,CAAC;AAwB5E,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,2CAmZzF"}