@shepai/cli 1.106.3 → 1.106.4-pr327.f3fea88

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

@@ -0,0 +1,50 @@
+'use client';
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useCallback, useEffect, useRef, useState } from 'react';
+import { toast } from 'sonner';
+import { useChat } from '../../../hooks/use-chat.js';
+import { ChatView } from './chat-view.js';
+export function ChatPageClient() {
+    const { messages, status, error, sendMessage, retry, clearChat } = useChat();
+    const [input, setInput] = useState('');
+    const inputRef = useRef(null);
+    const prevStatusRef = useRef(status);
+    const isStreaming = status === 'sending' || status === 'streaming';
+    // Auto-focus input on mount
+    useEffect(() => {
+        inputRef.current?.focus();
+    }, []);
+    // Re-focus input after streaming completes or on error
+    useEffect(() => {
+        const prevStatus = prevStatusRef.current;
+        prevStatusRef.current = status;
+        if ((prevStatus === 'streaming' || prevStatus === 'sending') &&
+            (status === 'idle' || status === 'error')) {
+            inputRef.current?.focus();
+        }
+    }, [status]);
+    // Show toast on error
+    useEffect(() => {
+        if (error) {
+            toast.error('Chat error', { description: error });
+        }
+    }, [error]);
+    const handleSubmit = useCallback(() => {
+        const trimmed = input.trim();
+        if (!trimmed || isStreaming)
+            return;
+        void sendMessage(trimmed);
+        setInput('');
+    }, [input, isStreaming, sendMessage]);
+    const handleSuggestionClick = useCallback((suggestion) => {
+        if (isStreaming)
+            return;
+        void sendMessage(suggestion);
+    }, [isStreaming, sendMessage]);
+    const handleClear = useCallback(() => {
+        clearChat();
+        setInput('');
+        inputRef.current?.focus();
+    }, [clearChat]);
+    return (_jsx(ChatView, { messages: messages, input: input, onInputChange: setInput, onSubmit: handleSubmit, onSuggestionClick: handleSuggestionClick, onClear: handleClear, onRetry: retry, isStreaming: isStreaming, error: error, inputRef: inputRef }));
+}

package/dist/src/presentation/web/components/features/chat/chat-page-client.stories.d.ts

@@ -0,0 +1,7 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import { ChatPageClient } from './chat-page-client.js';
+declare const meta: Meta<typeof ChatPageClient>;
+export default meta;
+type Story = StoryObj<typeof meta>;
+export declare const Default: Story;
+//# sourceMappingURL=chat-page-client.stories.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"chat-page-client.stories.d.ts","sourceRoot":"","sources":["../../../../../../../src/presentation/web/components/features/chat/chat-page-client.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,IAAI,EAAE,QAAQ,EAAE,MAAM,kBAAkB,CAAC;AACvD,OAAO,EAAE,cAAc,EAAE,MAAM,oBAAoB,CAAC;AAEpD,QAAA,MAAM,IAAI,EAAE,IAAI,CAAC,OAAO,cAAc,CAcrC,CAAC;AAEF,eAAe,IAAI,CAAC;AACpB,KAAK,KAAK,GAAG,QAAQ,CAAC,OAAO,IAAI,CAAC,CAAC;AAEnC,eAAO,MAAM,OAAO,EAAE,KAAU,CAAC"}

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

@@ -0,0 +1,15 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { ChatPageClient } from './chat-page-client.js';
+const meta = {
+    title: 'Features/Chat/ChatPageClient',
+    component: ChatPageClient,
+    tags: ['autodocs'],
+    parameters: {
+        layout: 'fullscreen',
+    },
+    decorators: [
+        (Story) => (_jsx("div", { style: { height: '600px' }, children: _jsx(Story, {}) })),
+    ],
+};
+export default meta;
+export const Default = {};

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

@@ -0,0 +1,24 @@
+export type ChatMessageStatus = 'sending' | 'streaming' | 'complete' | 'error';
+export interface ChatMessage {
+    id: string;
+    role: 'user' | 'assistant';
+    content: string;
+    timestamp: Date;
+    status?: ChatMessageStatus;
+}
+export interface ChatViewProps {
+    messages: ChatMessage[];
+    input: string;
+    onInputChange: (value: string) => void;
+    onSubmit: () => void;
+    onSuggestionClick?: (suggestion: string) => void;
+    onClear?: () => void;
+    onRetry?: () => void;
+    isStreaming?: boolean;
+    disabled?: boolean;
+    error?: string | null;
+    inputRef?: React.RefObject<HTMLTextAreaElement | null>;
+    className?: string;
+}
+export declare function ChatView({ messages, input, onInputChange, onSubmit, onSuggestionClick, onClear, onRetry, isStreaming, disabled, error, inputRef, className, }: ChatViewProps): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=chat-view.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"chat-view.d.ts","sourceRoot":"","sources":["../../../../../../../src/presentation/web/components/features/chat/chat-view.tsx"],"names":[],"mappings":"AAqBA,MAAM,MAAM,iBAAiB,GAAG,SAAS,GAAG,WAAW,GAAG,UAAU,GAAG,OAAO,CAAC;AAE/E,MAAM,WAAW,WAAW;IAC1B,EAAE,EAAE,MAAM,CAAC;IACX,IAAI,EAAE,MAAM,GAAG,WAAW,CAAC;IAC3B,OAAO,EAAE,MAAM,CAAC;IAChB,SAAS,EAAE,IAAI,CAAC;IAChB,MAAM,CAAC,EAAE,iBAAiB,CAAC;CAC5B;AAED,MAAM,WAAW,aAAa;IAC5B,QAAQ,EAAE,WAAW,EAAE,CAAC;IACxB,KAAK,EAAE,MAAM,CAAC;IACd,aAAa,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IACvC,QAAQ,EAAE,MAAM,IAAI,CAAC;IACrB,iBAAiB,CAAC,EAAE,CAAC,UAAU,EAAE,MAAM,KAAK,IAAI,CAAC;IACjD,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IACrB,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IACrB,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,KAAK,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IACtB,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC,mBAAmB,GAAG,IAAI,CAAC,CAAC;IACvD,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAED,wBAAgB,QAAQ,CAAC,EACvB,QAAQ,EACR,KAAK,EACL,aAAa,EACb,QAAQ,EACR,iBAAiB,EACjB,OAAO,EACP,OAAO,EACP,WAAmB,EACnB,QAAgB,EAChB,KAAK,EACL,QAAQ,EACR,SAAS,GACV,EAAE,aAAa,2CAoHf"}

package/dist/src/presentation/web/components/features/chat/chat-view.js

@@ -0,0 +1,17 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { AlertCircle, RotateCcw, Send } from 'lucide-react';
+import { Button } from '../../ui/button.js';
+import { ChatContainerRoot, ChatContainerContent, ChatContainerScrollAnchor, } from '../../ui/chat-container.js';
+import { Message, MessageAvatar, MessageContent } from '../../ui/message.js';
+import { PromptInput, PromptInputTextarea, PromptInputActions, PromptInputAction, } from '../../ui/prompt-input.js';
+import { Loader } from '../../ui/loader.js';
+import { ChatEmptyState } from './chat-empty-state.js';
+import { ChatHeader } from './chat-header.js';
+import { cn } from '../../../lib/utils.js';
+export function ChatView({ messages, input, onInputChange, onSubmit, onSuggestionClick, onClear, onRetry, isStreaming = false, disabled = false, error, inputRef, className, }) {
+    const isEmpty = messages.length === 0;
+    const lastMessage = messages[messages.length - 1];
+    const showThinking = isStreaming && lastMessage?.role === 'user' && lastMessage?.status !== 'error';
+    return (_jsxs("div", { className: cn('flex h-full flex-col', className), children: [_jsx(ChatHeader, { onClear: onClear, isStreaming: isStreaming }), isEmpty ? (_jsx(ChatEmptyState, { onSuggestionClick: onSuggestionClick })) : (_jsx(ChatContainerRoot, { className: "flex-1", "aria-label": "Chat messages", children: _jsxs(ChatContainerContent, { className: "gap-4 p-4", children: [_jsx("div", { "aria-live": "polite", "aria-atomic": "false", className: "contents", children: messages.map((message) => (_jsxs(Message, { className: message.role === 'user' ? 'flex-row-reverse' : '', role: "article", "aria-label": `${message.role === 'user' ? 'You' : 'Shep'}: ${message.content.slice(0, 80)}`, children: [_jsx(MessageAvatar, { src: message.role === 'assistant' ? '/shep-avatar.svg' : '', alt: message.role === 'assistant' ? 'Shep' : 'You', fallback: message.role === 'assistant' ? 'S' : 'U' }), _jsxs("div", { className: "flex max-w-[80%] flex-col gap-1", children: [_jsx(MessageContent, { markdown: message.role === 'assistant', className: cn(message.role === 'user' && 'bg-primary text-primary-foreground'), children: message.content }), message.status === 'error' && onRetry ? (_jsxs(Button, { variant: "ghost", size: "xs", onClick: onRetry, className: "self-start", "aria-label": "Retry sending message", children: [_jsx(RotateCcw, { className: "mr-1 h-3 w-3" }), "Retry"] })) : null] })] }, message.id))) }), showThinking ? (_jsxs(Message, { role: "article", "aria-label": "Shep is thinking", children: [_jsx(MessageAvatar, { src: "/shep-avatar.svg", alt: "Shep", fallback: "S" }), _jsx("div", { className: "bg-secondary flex items-center rounded-lg p-3", children: _jsx(Loader, { variant: "typing", size: "sm" }) })] })) : null, error && !isStreaming ? (_jsxs("div", { className: "border-destructive bg-destructive/10 mx-auto flex max-w-md items-center gap-2 rounded-md border px-3 py-2 text-sm", role: "alert", children: [_jsx(AlertCircle, { className: "text-destructive h-4 w-4 shrink-0" }), _jsx("span", { className: "text-destructive flex-1", children: error }), onRetry ? (_jsxs(Button, { variant: "ghost", size: "xs", onClick: onRetry, "aria-label": "Retry last message", children: [_jsx(RotateCcw, { className: "mr-1 h-3 w-3" }), "Retry"] })) : null] })) : null, _jsx(ChatContainerScrollAnchor, {})] }) })), _jsx("div", { className: "border-t p-4", children: _jsxs(PromptInput, { value: input, onValueChange: onInputChange, onSubmit: onSubmit, isLoading: isStreaming, disabled: disabled, children: [_jsx(PromptInputTextarea, { placeholder: "Type a message...", "aria-label": "Chat message input", ref: inputRef }), _jsx(PromptInputActions, { className: "justify-end px-2 pb-2", children: _jsx(PromptInputAction, { tooltip: "Send message", children: _jsx(Button, { variant: "default", size: "icon-sm", disabled: !input.trim() || isStreaming || disabled, onClick: onSubmit, "aria-label": "Send message", children: _jsx(Send, { className: "h-4 w-4" }) }) }) })] }) })] }));
+}

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

@@ -0,0 +1,14 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import { ChatView } from './chat-view.js';
+declare const meta: Meta<typeof ChatView>;
+export default meta;
+type Story = StoryObj<typeof meta>;
+export declare const Empty: Story;
+export declare const WithMessages: Story;
+export declare const Streaming: Story;
+export declare const WithError: Story;
+export declare const WithInput: Story;
+export declare const LongConversation: Story;
+export declare const CodeBlockRendering: Story;
+export declare const Mobile: Story;
+//# sourceMappingURL=chat-view.stories.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"chat-view.stories.d.ts","sourceRoot":"","sources":["../../../../../../../src/presentation/web/components/features/chat/chat-view.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,IAAI,EAAE,QAAQ,EAAE,MAAM,kBAAkB,CAAC;AAEvD,OAAO,EAAE,QAAQ,EAAoB,MAAM,aAAa,CAAC;AAEzD,QAAA,MAAM,IAAI,EAAE,IAAI,CAAC,OAAO,QAAQ,CAsB/B,CAAC;AAEF,eAAe,IAAI,CAAC;AACpB,KAAK,KAAK,GAAG,QAAQ,CAAC,OAAO,IAAI,CAAC,CAAC;AAmCnC,eAAO,MAAM,KAAK,EAAE,KAInB,CAAC;AAEF,eAAO,MAAM,YAAY,EAAE,KAI1B,CAAC;AAEF,eAAO,MAAM,SAAS,EAAE,KAcvB,CAAC;AAEF,eAAO,MAAM,SAAS,EAAE,KAoBvB,CAAC;AAEF,eAAO,MAAM,SAAS,EAAE,KAKvB,CAAC;AAEF,eAAO,MAAM,gBAAgB,EAAE,KAa9B,CAAC;AAEF,eAAO,MAAM,kBAAkB,EAAE,KAmBhC,CAAC;AAEF,eAAO,MAAM,MAAM,EAAE,KAcpB,CAAC"}

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

@@ -0,0 +1,149 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { fn } from '@storybook/test';
+import { ChatView } from './chat-view.js';
+const meta = {
+    title: 'Features/Chat/ChatView',
+    component: ChatView,
+    tags: ['autodocs'],
+    parameters: {
+        layout: 'fullscreen',
+    },
+    args: {
+        input: '',
+        onInputChange: fn(),
+        onSubmit: fn(),
+        onSuggestionClick: fn(),
+        onClear: fn(),
+        onRetry: fn(),
+    },
+    decorators: [
+        (Story) => (_jsx("div", { style: { height: '600px' }, children: _jsx(Story, {}) })),
+    ],
+};
+export default meta;
+const sampleMessages = [
+    {
+        id: '1',
+        role: 'user',
+        content: 'What features are currently in progress?',
+        timestamp: new Date('2026-03-12T10:00:00'),
+        status: 'complete',
+    },
+    {
+        id: '2',
+        role: 'assistant',
+        content: 'Here are the features currently in progress:\n\n1. **GPT Chat Interface** — Adding a conversational chat experience\n2. **Task Progress View** — Visualizing task completion status\n\nWould you like more details on any of these?',
+        timestamp: new Date('2026-03-12T10:00:05'),
+        status: 'complete',
+    },
+    {
+        id: '3',
+        role: 'user',
+        content: 'Show me an example code block',
+        timestamp: new Date('2026-03-12T10:01:00'),
+        status: 'complete',
+    },
+    {
+        id: '4',
+        role: 'assistant',
+        content: 'Here is an example TypeScript function:\n\n```typescript\nfunction greet(name: string): string {\n  return `Hello, ${name}!`;\n}\n\nconsole.log(greet("World"));\n```\n\nThis function takes a `name` parameter and returns a greeting string.',
+        timestamp: new Date('2026-03-12T10:01:05'),
+        status: 'complete',
+    },
+];
+export const Empty = {
+    args: {
+        messages: [],
+    },
+};
+export const WithMessages = {
+    args: {
+        messages: sampleMessages,
+    },
+};
+export const Streaming = {
+    args: {
+        messages: [
+            ...sampleMessages,
+            {
+                id: '5',
+                role: 'user',
+                content: 'Tell me more about the architecture',
+                timestamp: new Date('2026-03-12T10:02:00'),
+                status: 'complete',
+            },
+        ],
+        isStreaming: true,
+    },
+};
+export const WithError = {
+    args: {
+        messages: [
+            {
+                id: '1',
+                role: 'user',
+                content: 'What features are in progress?',
+                timestamp: new Date('2026-03-12T10:00:00'),
+                status: 'complete',
+            },
+            {
+                id: '2',
+                role: 'assistant',
+                content: '',
+                timestamp: new Date('2026-03-12T10:00:05'),
+                status: 'error',
+            },
+        ],
+        error: 'Failed to connect to the AI agent. Please check your agent configuration.',
+    },
+};
+export const WithInput = {
+    args: {
+        messages: sampleMessages,
+        input: 'How do I add a new feature?',
+    },
+};
+export const LongConversation = {
+    args: {
+        messages: Array.from({ length: 20 }, (_, i) => ({
+            id: String(i + 1),
+            role: (i % 2 === 0 ? 'user' : 'assistant'),
+            content: i % 2 === 0
+                ? `This is user message number ${Math.floor(i / 2) + 1}`
+                : `Here is a response to your question. This is a somewhat longer response that demonstrates how the chat interface handles multi-line content with **markdown formatting** and various text lengths.`,
+            timestamp: new Date(`2026-03-12T10:${String(i).padStart(2, '0')}:00`),
+            status: 'complete',
+        })),
+    },
+};
+export const CodeBlockRendering = {
+    args: {
+        messages: [
+            {
+                id: '1',
+                role: 'user',
+                content: 'Show me a React component example',
+                timestamp: new Date('2026-03-12T10:00:00'),
+                status: 'complete',
+            },
+            {
+                id: '2',
+                role: 'assistant',
+                content: `Here's a React component with TypeScript:\n\n\`\`\`tsx\nimport { useState } from 'react';\n\ninterface CounterProps {\n  initialCount?: number;\n}\n\nexport function Counter({ initialCount = 0 }: CounterProps) {\n  const [count, setCount] = useState(initialCount);\n\n  return (\n    <div className="flex items-center gap-2">\n      <button onClick={() => setCount(c => c - 1)}>-</button>\n      <span>{count}</span>\n      <button onClick={() => setCount(c => c + 1)}>+</button>\n    </div>\n  );\n}\n\`\`\`\n\nYou can also use inline code like \`useState\` or \`useEffect\`.`,
+                timestamp: new Date('2026-03-12T10:00:05'),
+                status: 'complete',
+            },
+        ],
+    },
+};
+export const Mobile = {
+    args: {
+        messages: sampleMessages.slice(0, 2),
+    },
+    parameters: {
+        viewport: { defaultViewport: 'mobile1' },
+    },
+    decorators: [
+        (Story) => (_jsx("div", { style: { height: '568px', width: '320px' }, children: _jsx(Story, {}) })),
+    ],
+};

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

@@ -0,0 +1,5 @@
+export { ChatPageClient } from './chat-page-client.js';
+export { ChatView, type ChatMessage, type ChatMessageStatus, type ChatViewProps, } from './chat-view.js';
+export { ChatEmptyState, type ChatEmptyStateProps } from './chat-empty-state.js';
+export { ChatHeader, type ChatHeaderProps } from './chat-header.js';
+//# sourceMappingURL=index.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../../../src/presentation/web/components/features/chat/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,cAAc,EAAE,MAAM,oBAAoB,CAAC;AACpD,OAAO,EACL,QAAQ,EACR,KAAK,WAAW,EAChB,KAAK,iBAAiB,EACtB,KAAK,aAAa,GACnB,MAAM,aAAa,CAAC;AACrB,OAAO,EAAE,cAAc,EAAE,KAAK,mBAAmB,EAAE,MAAM,oBAAoB,CAAC;AAC9E,OAAO,EAAE,UAAU,EAAE,KAAK,eAAe,EAAE,MAAM,eAAe,CAAC"}

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

@@ -0,0 +1,4 @@
+export { ChatPageClient } from './chat-page-client.js';
+export { ChatView, } from './chat-view.js';
+export { ChatEmptyState } from './chat-empty-state.js';
+export { ChatHeader } from './chat-header.js';

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

@@ -1 +1 @@
-{"version":3,"file":"feature-flags-settings-section.d.ts","sourceRoot":"","sources":["../../../../../../../src/presentation/web/components/features/settings/feature-flags-settings-section.tsx"],"names":[],"mappings":"AASA,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,sCAAsC,CAAC;AAgBzE,MAAM,WAAW,gCAAgC;IAC/C,YAAY,EAAE,YAAY,CAAC;CAC5B;AAED,wBAAgB,2BAA2B,CAAC,EAAE,YAAY,EAAE,EAAE,gCAAgC,2CAgE7F"}
+{"version":3,"file":"feature-flags-settings-section.d.ts","sourceRoot":"","sources":["../../../../../../../src/presentation/web/components/features/settings/feature-flags-settings-section.tsx"],"names":[],"mappings":"AASA,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,sCAAsC,CAAC;AAkBzE,MAAM,WAAW,gCAAgC;IAC/C,YAAY,EAAE,YAAY,CAAC;CAC5B;AAED,wBAAgB,2BAA2B,CAAC,EAAE,YAAY,EAAE,EAAE,gCAAgC,2CAgE7F"}

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

@@ -11,13 +11,15 @@ const FLAG_DESCRIPTIONS = {
     skills: 'Enable Skills navigation and functionality in the web UI',
     envDeploy: 'Enable environment deployment features in the web UI',
     debug: 'Enable debug UI elements and verbose client-side logging',
+    chat: 'Enable GPT-style chat interface in the web UI',
 };
 const FLAG_LABELS = {
     skills: 'Skills',
     envDeploy: 'Deployments',
     debug: 'Debug',
+    chat: 'Chat',
 };
-const FLAG_KEYS = ['skills', 'envDeploy', 'debug'];
+const FLAG_KEYS = ['skills', 'envDeploy', 'debug', 'chat'];
 export function FeatureFlagsSettingsSection({ featureFlags }) {
     const [flags, setFlags] = useState({ ...featureFlags });
     const [isPending, startTransition] = useTransition();

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

@@ -1 +1 @@
-{"version":3,"file":"feature-flags-settings-section.stories.d.ts","sourceRoot":"","sources":["../../../../../../../src/presentation/web/components/features/settings/feature-flags-settings-section.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAQ,QAAQ,EAAE,MAAM,kBAAkB,CAAC;AACvD,OAAO,EAAE,2BAA2B,EAAE,MAAM,kCAAkC,CAAC;AAE/E,QAAA,MAAM,IAAI;;;;;;;CAO0C,CAAC;AAErD,eAAe,IAAI,CAAC;AACpB,KAAK,KAAK,GAAG,QAAQ,CAAC,OAAO,IAAI,CAAC,CAAC;AAEnC,eAAO,MAAM,OAAO,EAAE,KAQrB,CAAC;AAEF,eAAO,MAAM,UAAU,EAAE,KAQxB,CAAC;AAEF,eAAO,MAAM,WAAW,EAAE,KAQzB,CAAC"}
+{"version":3,"file":"feature-flags-settings-section.stories.d.ts","sourceRoot":"","sources":["../../../../../../../src/presentation/web/components/features/settings/feature-flags-settings-section.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAQ,QAAQ,EAAE,MAAM,kBAAkB,CAAC;AACvD,OAAO,EAAE,2BAA2B,EAAE,MAAM,kCAAkC,CAAC;AAE/E,QAAA,MAAM,IAAI;;;;;;;CAO0C,CAAC;AAErD,eAAe,IAAI,CAAC;AACpB,KAAK,KAAK,GAAG,QAAQ,CAAC,OAAO,IAAI,CAAC,CAAC;AAEnC,eAAO,MAAM,OAAO,EAAE,KASrB,CAAC;AAEF,eAAO,MAAM,UAAU,EAAE,KASxB,CAAC;AAEF,eAAO,MAAM,WAAW,EAAE,KASzB,CAAC"}

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

@@ -14,6 +14,7 @@ export const Default = {
             skills: false,
             envDeploy: false,
             debug: false,
+            chat: true,
         },
     },
 };
@@ -23,6 +24,7 @@ export const AllEnabled = {
             skills: true,
             envDeploy: true,
             debug: true,
+            chat: true,
         },
     },
 };
@@ -32,6 +34,7 @@ export const AllDisabled = {
             skills: false,
             envDeploy: false,
             debug: false,
+            chat: false,
         },
     },
 };

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

@@ -1 +1 @@
-{"version":3,"file":"settings-page-client.d.ts","sourceRoot":"","sources":["../../../../../../../src/presentation/web/components/features/settings/settings-page-client.tsx"],"names":[],"mappings":"AAqCA,OAAO,KAAK,EACV,QAAQ,EAGT,MAAM,sCAAsC,CAAC;AAyB9C,MAAM,WAAW,uBAAuB;IACtC,QAAQ,EAAE,QAAQ,CAAC;IACnB,QAAQ,EAAE,MAAM,CAAC;IACjB,UAAU,EAAE,MAAM,CAAC;CACpB;AA6QD,wBAAgB,kBAAkB,CAAC,EAAE,QAAQ,EAAE,QAAQ,EAAE,UAAU,EAAE,EAAE,uBAAuB,2CAi1B7F"}
+{"version":3,"file":"settings-page-client.d.ts","sourceRoot":"","sources":["../../../../../../../src/presentation/web/components/features/settings/settings-page-client.tsx"],"names":[],"mappings":"AAqCA,OAAO,KAAK,EACV,QAAQ,EAGT,MAAM,sCAAsC,CAAC;AAyB9C,MAAM,WAAW,uBAAuB;IACtC,QAAQ,EAAE,QAAQ,CAAC;IACnB,QAAQ,EAAE,MAAM,CAAC;IACjB,UAAU,EAAE,MAAM,CAAC;CACpB;AA6QD,wBAAgB,kBAAkB,CAAC,EAAE,QAAQ,EAAE,QAAQ,EAAE,UAAU,EAAE,EAAE,uBAAuB,2CAs1B7F"}

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

@@ -115,7 +115,12 @@ function SectionHint({ children, links, }) {
 /* ── Main component ── */
 export function SettingsPageClient({ settings, shepHome, dbFileSize }) {
     const { showSaving, showSaved, save } = useSaveIndicator();
-    const featureFlags = settings.featureFlags ?? { skills: false, envDeploy: false, debug: false };
+    const featureFlags = settings.featureFlags ?? {
+        skills: false,
+        envDeploy: false,
+        debug: false,
+        chat: true,
+    };
     // Agent state
     const [agentType, setAgentType] = useState(settings.agent.type);
     const authMethod = settings.agent.authMethod;

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

@@ -1 +1 @@
-{"version":3,"file":"settings-page-client.stories.d.ts","sourceRoot":"","sources":["../../../../../../../src/presentation/web/components/features/settings/settings-page-client.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAQ,QAAQ,EAAE,MAAM,kBAAkB,CAAC;AACvD,OAAO,EAAE,kBAAkB,EAAE,MAAM,wBAAwB,CAAC;AAM5D,QAAA,MAAM,IAAI;;;;;;;CAOiC,CAAC;AAE5C,eAAe,IAAI,CAAC;AACpB,KAAK,KAAK,GAAG,QAAQ,CAAC,OAAO,IAAI,CAAC,CAAC;AAEnC,eAAO,MAAM,OAAO,EAAE,KAMrB,CAAC;AAEF,eAAO,MAAM,WAAW,EAAE,KAkBzB,CAAC;AAEF,eAAO,MAAM,eAAe,EAAE,KAa7B,CAAC"}
+{"version":3,"file":"settings-page-client.stories.d.ts","sourceRoot":"","sources":["../../../../../../../src/presentation/web/components/features/settings/settings-page-client.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAQ,QAAQ,EAAE,MAAM,kBAAkB,CAAC;AACvD,OAAO,EAAE,kBAAkB,EAAE,MAAM,wBAAwB,CAAC;AAM5D,QAAA,MAAM,IAAI;;;;;;;CAOiC,CAAC;AAE5C,eAAe,IAAI,CAAC;AACpB,KAAK,KAAK,GAAG,QAAQ,CAAC,OAAO,IAAI,CAAC,CAAC;AAEnC,eAAO,MAAM,OAAO,EAAE,KAMrB,CAAC;AAEF,eAAO,MAAM,WAAW,EAAE,KAmBzB,CAAC;AAEF,eAAO,MAAM,eAAe,EAAE,KAa7B,CAAC"}

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

@@ -31,6 +31,7 @@ export const AllSections = {
                 skills: true,
                 envDeploy: true,
                 debug: false,
+                chat: true,
             },
         },
         shepHome: '/opt/shep',

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

@@ -1 +1 @@
-{"version":3,"file":"app-sidebar.d.ts","sourceRoot":"","sources":["../../../../../../../src/presentation/web/components/layouts/app-sidebar/app-sidebar.tsx"],"names":[],"mappings":"AAwBA,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,2CAA2C,CAAC;AAG/E,OAAO,KAAK,EAAE,iBAAiB,EAAE,MAAM,qBAAqB,CAAC;AAE7D,MAAM,WAAW,WAAW;IAC1B,SAAS,EAAE,MAAM,CAAC;IAClB,IAAI,EAAE,MAAM,CAAC;IACb,MAAM,EAAE,aAAa,CAAC;IACtB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,OAAO,CAAC,EAAE,MAAM,CAAC;CAClB;AAED,MAAM,WAAW,eAAe;IAC9B,QAAQ,EAAE,WAAW,EAAE,CAAC;IACxB,YAAY,EAAE,iBAAiB,CAAC;IAChC,2FAA2F;IAC3F,cAAc,CAAC,EAAE,OAAO,CAAC;IACzB,YAAY,CAAC,EAAE,MAAM,IAAI,CAAC;IAC1B,cAAc,CAAC,EAAE,CAAC,SAAS,EAAE,MAAM,KAAK,IAAI,CAAC;CAC9C;AAED,wBAAgB,UAAU,CAAC,EACzB,QAAQ,EACR,YAAY,EACZ,cAAsB,EACtB,YAAY,EACZ,cAAc,GACf,EAAE,eAAe,2CA6HjB"}
+{"version":3,"file":"app-sidebar.d.ts","sourceRoot":"","sources":["../../../../../../../src/presentation/web/components/layouts/app-sidebar/app-sidebar.tsx"],"names":[],"mappings":"AAwBA,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,2CAA2C,CAAC;AAG/E,OAAO,KAAK,EAAE,iBAAiB,EAAE,MAAM,qBAAqB,CAAC;AAE7D,MAAM,WAAW,WAAW;IAC1B,SAAS,EAAE,MAAM,CAAC;IAClB,IAAI,EAAE,MAAM,CAAC;IACb,MAAM,EAAE,aAAa,CAAC;IACtB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,OAAO,CAAC,EAAE,MAAM,CAAC;CAClB;AAED,MAAM,WAAW,eAAe;IAC9B,QAAQ,EAAE,WAAW,EAAE,CAAC;IACxB,YAAY,EAAE,iBAAiB,CAAC;IAChC,2FAA2F;IAC3F,cAAc,CAAC,EAAE,OAAO,CAAC;IACzB,YAAY,CAAC,EAAE,MAAM,IAAI,CAAC;IAC1B,cAAc,CAAC,EAAE,CAAC,SAAS,EAAE,MAAM,KAAK,IAAI,CAAC;CAC9C;AAED,wBAAgB,UAAU,CAAC,EACzB,QAAQ,EACR,YAAY,EACZ,cAAsB,EACtB,YAAY,EACZ,cAAc,GACf,EAAE,eAAe,2CAqIjB"}

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

@@ -1,7 +1,7 @@
 'use client';
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { usePathname } from 'next/navigation';
-import { Home, Wrench, Puzzle, Plus, Settings } from 'lucide-react';
+import { Home, MessageSquare, Wrench, Puzzle, Plus, Settings } from 'lucide-react';
 import { Sidebar, SidebarHeader, SidebarContent, SidebarFooter, SidebarMenu, SidebarMenuItem, SidebarMenuButton, SidebarRail, useSidebar, } from '../../ui/sidebar.js';
 import { ScrollArea } from '../../ui/scroll-area.js';
 import { SidebarNavItem } from '../../common/sidebar-nav-item/index.js';
@@ -29,7 +29,7 @@ export function AppSidebar({ features, featureFlags, showNewFeature = false, onN
                                             'flex min-w-0 flex-1 items-center gap-2 overflow-hidden px-2',
                                             'transition-opacity duration-200 ease-out',
                                             expandedVisible ? 'opacity-100' : 'opacity-0',
-                                        ].join(' '), "aria-hidden": !expandedVisible, children: [_jsx(ShepLogo, { className: "shrink-0", size: 20, variant: versionData.isDev ? 'dev' : 'default' }), _jsx("span", { className: "truncate text-sm font-semibold tracking-tight", children: "Shep" }), _jsx(VersionBadge, { version: versionData.version, branch: versionData.branch || undefined, commitHash: versionData.commitHash || undefined, isDev: versionData.isDev, packageName: versionData.packageName, description: versionData.description, instancePath: versionData.instancePath || undefined })] })) : null, _jsx(SidebarCollapseToggle, { className: "shrink-0 transition-all duration-200" })] }) }), _jsx(SidebarNavItem, { icon: Home, label: "Control Center", href: "/", active: pathname === '/' }), _jsx(SidebarNavItem, { icon: Wrench, label: "Tools", href: "/tools", active: pathname === '/tools' }), featureFlags.skills ? (_jsx(SidebarNavItem, { icon: Puzzle, label: "Skills", href: "/skills", active: pathname === '/skills' })) : null, _jsx(SidebarNavItem, { icon: Settings, label: "Settings", href: "/settings", active: pathname === '/settings' })] }) }), _jsx(SidebarContent, { children: showExpanded ? (_jsxs("div", { className: [
+                                        ].join(' '), "aria-hidden": !expandedVisible, children: [_jsx(ShepLogo, { className: "shrink-0", size: 20, variant: versionData.isDev ? 'dev' : 'default' }), _jsx("span", { className: "truncate text-sm font-semibold tracking-tight", children: "Shep" }), _jsx(VersionBadge, { version: versionData.version, branch: versionData.branch || undefined, commitHash: versionData.commitHash || undefined, isDev: versionData.isDev, packageName: versionData.packageName, description: versionData.description, instancePath: versionData.instancePath || undefined })] })) : null, _jsx(SidebarCollapseToggle, { className: "shrink-0 transition-all duration-200" })] }) }), _jsx(SidebarNavItem, { icon: Home, label: "Control Center", href: "/", active: pathname === '/' }), featureFlags.chat ? (_jsx(SidebarNavItem, { icon: MessageSquare, label: "Chat", href: "/chat", active: pathname === '/chat' })) : null, _jsx(SidebarNavItem, { icon: Wrench, label: "Tools", href: "/tools", active: pathname === '/tools' }), featureFlags.skills ? (_jsx(SidebarNavItem, { icon: Puzzle, label: "Skills", href: "/skills", active: pathname === '/skills' })) : null, _jsx(SidebarNavItem, { icon: Settings, label: "Settings", href: "/settings", active: pathname === '/settings' })] }) }), _jsx(SidebarContent, { children: showExpanded ? (_jsxs("div", { className: [
                         'min-w-0 overflow-hidden transition-opacity duration-200 ease-out',
                         '[&_[data-sidebar=group-label]]:!mt-0 [&_[data-sidebar=group-label]]:!opacity-100 [&_[data-sidebar=group-label]]:!transition-none',
                         expandedVisible ? 'opacity-100' : 'opacity-0',

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

@@ -1,7 +1,7 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { SidebarProvider, SidebarInset } from '../../ui/sidebar.js';
 import { AppSidebar } from './app-sidebar.js';
-const defaultFeatureFlags = { skills: true, envDeploy: true, debug: false };
+const defaultFeatureFlags = { skills: true, envDeploy: true, debug: false, chat: true };
 const meta = {
     title: 'Layout/AppSidebar',
     component: AppSidebar,

package/dist/src/presentation/web/components/ui/avatar.d.ts

@@ -0,0 +1,12 @@
+import * as React from 'react';
+import { Avatar as AvatarPrimitive } from 'radix-ui';
+declare function Avatar({ className, size, ...props }: React.ComponentProps<typeof AvatarPrimitive.Root> & {
+    size?: 'default' | 'sm' | 'lg';
+}): import("react/jsx-runtime").JSX.Element;
+declare function AvatarImage({ className, ...props }: React.ComponentProps<typeof AvatarPrimitive.Image>): import("react/jsx-runtime").JSX.Element;
+declare function AvatarFallback({ className, ...props }: React.ComponentProps<typeof AvatarPrimitive.Fallback>): import("react/jsx-runtime").JSX.Element;
+declare function AvatarBadge({ className, ...props }: React.ComponentProps<'span'>): import("react/jsx-runtime").JSX.Element;
+declare function AvatarGroup({ className, ...props }: React.ComponentProps<'div'>): import("react/jsx-runtime").JSX.Element;
+declare function AvatarGroupCount({ className, ...props }: React.ComponentProps<'div'>): import("react/jsx-runtime").JSX.Element;
+export { Avatar, AvatarImage, AvatarFallback, AvatarBadge, AvatarGroup, AvatarGroupCount };
+//# sourceMappingURL=avatar.d.ts.map

package/dist/src/presentation/web/components/ui/avatar.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"avatar.d.ts","sourceRoot":"","sources":["../../../../../../src/presentation/web/components/ui/avatar.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,EAAE,MAAM,IAAI,eAAe,EAAE,MAAM,UAAU,CAAC;AAIrD,iBAAS,MAAM,CAAC,EACd,SAAS,EACT,IAAgB,EAChB,GAAG,KAAK,EACT,EAAE,KAAK,CAAC,cAAc,CAAC,OAAO,eAAe,CAAC,IAAI,CAAC,GAAG;IACrD,IAAI,CAAC,EAAE,SAAS,GAAG,IAAI,GAAG,IAAI,CAAC;CAChC,2CAYA;AAED,iBAAS,WAAW,CAAC,EAAE,SAAS,EAAE,GAAG,KAAK,EAAE,EAAE,KAAK,CAAC,cAAc,CAAC,OAAO,eAAe,CAAC,KAAK,CAAC,2CAQ/F;AAED,iBAAS,cAAc,CAAC,EACtB,SAAS,EACT,GAAG,KAAK,EACT,EAAE,KAAK,CAAC,cAAc,CAAC,OAAO,eAAe,CAAC,QAAQ,CAAC,2CAWvD;AAED,iBAAS,WAAW,CAAC,EAAE,SAAS,EAAE,GAAG,KAAK,EAAE,EAAE,KAAK,CAAC,cAAc,CAAC,MAAM,CAAC,2CAczE;AAED,iBAAS,WAAW,CAAC,EAAE,SAAS,EAAE,GAAG,KAAK,EAAE,EAAE,KAAK,CAAC,cAAc,CAAC,KAAK,CAAC,2CAWxE;AAED,iBAAS,gBAAgB,CAAC,EAAE,SAAS,EAAE,GAAG,KAAK,EAAE,EAAE,KAAK,CAAC,cAAc,CAAC,KAAK,CAAC,2CAW7E;AAED,OAAO,EAAE,MAAM,EAAE,WAAW,EAAE,cAAc,EAAE,WAAW,EAAE,WAAW,EAAE,gBAAgB,EAAE,CAAC"}

package/dist/src/presentation/web/components/ui/avatar.js

@@ -0,0 +1,23 @@
+'use client';
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Avatar as AvatarPrimitive } from 'radix-ui';
+import { cn } from '../../lib/utils.js';
+function Avatar({ className, size = 'default', ...props }) {
+    return (_jsx(AvatarPrimitive.Root, { "data-slot": "avatar", "data-size": size, className: cn('group/avatar relative flex size-8 shrink-0 overflow-hidden rounded-full select-none data-[size=lg]:size-10 data-[size=sm]:size-6', className), ...props }));
+}
+function AvatarImage({ className, ...props }) {
+    return (_jsx(AvatarPrimitive.Image, { "data-slot": "avatar-image", className: cn('aspect-square size-full', className), ...props }));
+}
+function AvatarFallback({ className, ...props }) {
+    return (_jsx(AvatarPrimitive.Fallback, { "data-slot": "avatar-fallback", className: cn('bg-muted text-muted-foreground flex size-full items-center justify-center rounded-full text-sm group-data-[size=sm]/avatar:text-xs', className), ...props }));
+}
+function AvatarBadge({ className, ...props }) {
+    return (_jsx("span", { "data-slot": "avatar-badge", className: cn('bg-primary text-primary-foreground ring-background absolute right-0 bottom-0 z-10 inline-flex items-center justify-center rounded-full ring-2 select-none', 'group-data-[size=sm]/avatar:size-2 group-data-[size=sm]/avatar:[&>svg]:hidden', 'group-data-[size=default]/avatar:size-2.5 group-data-[size=default]/avatar:[&>svg]:size-2', 'group-data-[size=lg]/avatar:size-3 group-data-[size=lg]/avatar:[&>svg]:size-2', className), ...props }));
+}
+function AvatarGroup({ className, ...props }) {
+    return (_jsx("div", { "data-slot": "avatar-group", className: cn('group/avatar-group *:data-[slot=avatar]:ring-background flex -space-x-2 *:data-[slot=avatar]:ring-2', className), ...props }));
+}
+function AvatarGroupCount({ className, ...props }) {
+    return (_jsx("div", { "data-slot": "avatar-group-count", className: cn('bg-muted text-muted-foreground ring-background relative flex size-8 shrink-0 items-center justify-center rounded-full text-sm ring-2 group-has-data-[size=lg]/avatar-group:size-10 group-has-data-[size=sm]/avatar-group:size-6 [&>svg]:size-4 group-has-data-[size=lg]/avatar-group:[&>svg]:size-5 group-has-data-[size=sm]/avatar-group:[&>svg]:size-3', className), ...props }));
+}
+export { Avatar, AvatarImage, AvatarFallback, AvatarBadge, AvatarGroup, AvatarGroupCount };

package/dist/src/presentation/web/components/ui/chat-container.d.ts

@@ -0,0 +1,17 @@
+export type ChatContainerRootProps = {
+    children: React.ReactNode;
+    className?: string;
+} & React.HTMLAttributes<HTMLDivElement>;
+export type ChatContainerContentProps = {
+    children: React.ReactNode;
+    className?: string;
+} & React.HTMLAttributes<HTMLDivElement>;
+export type ChatContainerScrollAnchorProps = {
+    className?: string;
+    ref?: React.RefObject<HTMLDivElement>;
+} & React.HTMLAttributes<HTMLDivElement>;
+declare function ChatContainerRoot({ children, className, ...props }: ChatContainerRootProps): import("react/jsx-runtime").JSX.Element;
+declare function ChatContainerContent({ children, className, ...props }: ChatContainerContentProps): import("react/jsx-runtime").JSX.Element;
+declare function ChatContainerScrollAnchor({ className, ...props }: ChatContainerScrollAnchorProps): import("react/jsx-runtime").JSX.Element;
+export { ChatContainerRoot, ChatContainerContent, ChatContainerScrollAnchor };
+//# sourceMappingURL=chat-container.d.ts.map

package/dist/src/presentation/web/components/ui/chat-container.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"chat-container.d.ts","sourceRoot":"","sources":["../../../../../../src/presentation/web/components/ui/chat-container.tsx"],"names":[],"mappings":"AAKA,MAAM,MAAM,sBAAsB,GAAG;IACnC,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB,GAAG,KAAK,CAAC,cAAc,CAAC,cAAc,CAAC,CAAC;AAEzC,MAAM,MAAM,yBAAyB,GAAG;IACtC,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB,GAAG,KAAK,CAAC,cAAc,CAAC,cAAc,CAAC,CAAC;AAEzC,MAAM,MAAM,8BAA8B,GAAG;IAC3C,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,GAAG,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC,cAAc,CAAC,CAAC;CACvC,GAAG,KAAK,CAAC,cAAc,CAAC,cAAc,CAAC,CAAC;AAEzC,iBAAS,iBAAiB,CAAC,EAAE,QAAQ,EAAE,SAAS,EAAE,GAAG,KAAK,EAAE,EAAE,sBAAsB,2CAYnF;AAED,iBAAS,oBAAoB,CAAC,EAAE,QAAQ,EAAE,SAAS,EAAE,GAAG,KAAK,EAAE,EAAE,yBAAyB,2CAMzF;AAED,iBAAS,yBAAyB,CAAC,EAAE,SAAS,EAAE,GAAG,KAAK,EAAE,EAAE,8BAA8B,2CAQzF;AAED,OAAO,EAAE,iBAAiB,EAAE,oBAAoB,EAAE,yBAAyB,EAAE,CAAC"}

package/dist/src/presentation/web/components/ui/chat-container.js

@@ -0,0 +1,14 @@
+'use client';
+import { jsx as _jsx } from "react/jsx-runtime";
+import { cn } from '../../lib/utils.js';
+import { StickToBottom } from 'use-stick-to-bottom';
+function ChatContainerRoot({ children, className, ...props }) {
+    return (_jsx(StickToBottom, { className: cn('flex overflow-y-auto', className), resize: "smooth", initial: "instant", role: "log", ...props, children: children }));
+}
+function ChatContainerContent({ children, className, ...props }) {
+    return (_jsx(StickToBottom.Content, { className: cn('flex w-full flex-col', className), ...props, children: children }));
+}
+function ChatContainerScrollAnchor({ className, ...props }) {
+    return (_jsx("div", { className: cn('h-px w-full shrink-0 scroll-mt-4', className), "aria-hidden": "true", ...props }));
+}
+export { ChatContainerRoot, ChatContainerContent, ChatContainerScrollAnchor };

package/dist/src/presentation/web/components/ui/code-block.d.ts

@@ -0,0 +1,17 @@
+import React from 'react';
+export type CodeBlockProps = {
+    children?: React.ReactNode;
+    className?: string;
+} & React.HTMLProps<HTMLDivElement>;
+declare function CodeBlock({ children, className, ...props }: CodeBlockProps): import("react/jsx-runtime").JSX.Element;
+export type CodeBlockCodeProps = {
+    code: string;
+    language?: string;
+    theme?: string;
+    className?: string;
+} & React.HTMLProps<HTMLDivElement>;
+declare function CodeBlockCode({ code, language, theme, className, ...props }: CodeBlockCodeProps): import("react/jsx-runtime").JSX.Element;
+export type CodeBlockGroupProps = React.HTMLAttributes<HTMLDivElement>;
+declare function CodeBlockGroup({ children, className, ...props }: CodeBlockGroupProps): import("react/jsx-runtime").JSX.Element;
+export { CodeBlockGroup, CodeBlockCode, CodeBlock };
+//# sourceMappingURL=code-block.d.ts.map

package/dist/src/presentation/web/components/ui/code-block.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"code-block.d.ts","sourceRoot":"","sources":["../../../../../../src/presentation/web/components/ui/code-block.tsx"],"names":[],"mappings":"AAGA,OAAO,KAA8B,MAAM,OAAO,CAAC;AAGnD,MAAM,MAAM,cAAc,GAAG;IAC3B,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC3B,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB,GAAG,KAAK,CAAC,SAAS,CAAC,cAAc,CAAC,CAAC;AAEpC,iBAAS,SAAS,CAAC,EAAE,QAAQ,EAAE,SAAS,EAAE,GAAG,KAAK,EAAE,EAAE,cAAc,2CAanE;AAED,MAAM,MAAM,kBAAkB,GAAG;IAC/B,IAAI,EAAE,MAAM,CAAC;IACb,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB,GAAG,KAAK,CAAC,SAAS,CAAC,cAAc,CAAC,CAAC;AAEpC,iBAAS,aAAa,CAAC,EACrB,IAAI,EACJ,QAAgB,EAChB,KAAsB,EACtB,SAAS,EACT,GAAG,KAAK,EACT,EAAE,kBAAkB,2CA4BpB;AAED,MAAM,MAAM,mBAAmB,GAAG,KAAK,CAAC,cAAc,CAAC,cAAc,CAAC,CAAC;AAEvE,iBAAS,cAAc,CAAC,EAAE,QAAQ,EAAE,SAAS,EAAE,GAAG,KAAK,EAAE,EAAE,mBAAmB,2CAM7E;AAED,OAAO,EAAE,cAAc,EAAE,aAAa,EAAE,SAAS,EAAE,CAAC"}

package/dist/src/presentation/web/components/ui/code-block.js

@@ -0,0 +1,29 @@
+'use client';
+import { jsx as _jsx } from "react/jsx-runtime";
+import { cn } from '../../lib/utils.js';
+import { useEffect, useState } from 'react';
+import { codeToHtml } from 'shiki';
+function CodeBlock({ children, className, ...props }) {
+    return (_jsx("div", { className: cn('not-prose flex w-full flex-col overflow-clip border', 'border-border bg-card text-card-foreground rounded-xl', className), ...props, children: children }));
+}
+function CodeBlockCode({ code, language = 'tsx', theme = 'github-light', className, ...props }) {
+    const [highlightedHtml, setHighlightedHtml] = useState(null);
+    useEffect(() => {
+        async function highlight() {
+            if (!code) {
+                setHighlightedHtml('<pre><code></code></pre>');
+                return;
+            }
+            const html = await codeToHtml(code, { lang: language, theme });
+            setHighlightedHtml(html);
+        }
+        highlight();
+    }, [code, language, theme]);
+    const classNames = cn('w-full overflow-x-auto text-[13px] [&>pre]:px-4 [&>pre]:py-4', className);
+    // SSR fallback: render plain code if not hydrated yet
+    return highlightedHtml ? (_jsx("div", { className: classNames, dangerouslySetInnerHTML: { __html: highlightedHtml }, ...props })) : (_jsx("div", { className: classNames, ...props, children: _jsx("pre", { children: _jsx("code", { children: code }) }) }));
+}
+function CodeBlockGroup({ children, className, ...props }) {
+    return (_jsx("div", { className: cn('flex items-center justify-between', className), ...props, children: children }));
+}
+export { CodeBlockGroup, CodeBlockCode, CodeBlock };