@creativeintelligence/abbie 0.1.0

package/dist/web/components/pane-view.js

@@ -0,0 +1,168 @@
+'use client';
+import { useState, useCallback, useRef } from 'react';
+import { useAtom, useAtomValue, useSetAtom } from 'jotai';
+import { Menu } from '@base-ui-components/react/menu';
+import { Tooltip } from '@base-ui-components/react/tooltip';
+import { ArrowDown, CaretDown, CaretLeft, Terminal, Robot, Export, Copy, SidebarSimple, } from '@phosphor-icons/react';
+import { cn } from '@/lib/utils';
+import { tmuxWindowsAtom, selectedWindowAtom, sidebarCollapsedAtom } from '@/atoms/state';
+import { TerminalView } from './terminal';
+import { toastSuccess, toastError } from './toast';
+import { api } from '@/lib/api';
+import { formatTmuxWindowName } from '@/lib/paths';
+const ACTIONS = [
+    { id: 'copy', label: 'Copy output', icon: Copy },
+    { id: 'terminal', label: 'Open in Terminal.app', icon: Terminal },
+    { id: 'agent', label: 'Send to agent', icon: Robot },
+    { id: 'export', label: 'Export as file', icon: Export },
+];
+function toSafeDownloadName(label) {
+    return (label
+        .replace(/^\//, '')
+        .replace(/[\\/]/g, '-')
+        .replace(/[^a-z0-9._-]+/gi, '-')
+        .replace(/-+/g, '-')
+        .replace(/^-|-$/g, '') || 'window');
+}
+export function PaneView({ windowKey }) {
+    const windows = useAtomValue(tmuxWindowsAtom);
+    const setSelectedWindow = useSetAtom(selectedWindowAtom);
+    const [sidebarCollapsed, setSidebarCollapsed] = useAtom(sidebarCollapsedAtom);
+    const window = windows.find((w) => w.id === windowKey || String(w.index) === windowKey || w.name === windowKey);
+    const windowLabel = window ? formatTmuxWindowName(window.name) : windowKey;
+    const [isAtBottom, setIsAtBottom] = useState(true);
+    const terminalRef = useRef(null);
+    const handleBack = () => {
+        setSelectedWindow(null);
+    };
+    const handleShare = async () => {
+        // TODO: Generate shareable link
+        toastSuccess('Link copied to clipboard');
+    };
+    const handleScrollChange = useCallback((atBottom) => {
+        setIsAtBottom(atBottom);
+    }, []);
+    const handleScrollToBottom = () => {
+        terminalRef.current?.scrollToBottom?.();
+        setIsAtBottom(true);
+    };
+    const handleAction = async (actionId) => {
+        switch (actionId) {
+            case 'copy':
+                try {
+                    // Fetch current content for copy
+                    const data = await api.captureTmuxPane(windowKey, 0, 500);
+                    await navigator.clipboard.writeText(data.content);
+                    toastSuccess('Copied to clipboard');
+                }
+                catch {
+                    toastError('Failed to copy');
+                }
+                break;
+            case 'terminal':
+                console.log('[action] open in terminal');
+                break;
+            case 'agent':
+                console.log('[action] send to agent');
+                break;
+            case 'export':
+                try {
+                    const data = await api.captureTmuxPane(windowKey, 0, 500);
+                    const blob = new Blob([data.content], { type: 'text/plain' });
+                    const url = URL.createObjectURL(blob);
+                    const a = document.createElement('a');
+                    a.href = url;
+                    a.download = `${toSafeDownloadName(windowLabel)}-${new Date().toISOString().slice(0, 10)}.txt`;
+                    a.click();
+                    URL.revokeObjectURL(url);
+                    toastSuccess('File downloaded');
+                }
+                catch {
+                    toastError('Failed to export');
+                }
+                break;
+            default:
+                console.log(`[action] ${actionId}`);
+        }
+    };
+    return (<div className="flex h-full flex-col">
+      {/* Header bar - CSS grid for true center */}
+      <div className="grid h-12 shrink-0 grid-cols-[1fr_auto_1fr] items-center px-4">
+        {/* Left: Sidebar toggle + Back button */}
+        <Tooltip.Provider delay={300} closeDelay={0}>
+          <div className="flex items-center justify-start gap-1.5">
+            <Tooltip.Root>
+              <Tooltip.Trigger render={<button onClick={() => setSidebarCollapsed(!sidebarCollapsed)} className={cn('flex h-7 w-7 items-center justify-center rounded-full', 'outline-none', 'bg-background-tertiary text-foreground-secondary', 'hover:bg-background-elevated hover:text-foreground')}>
+                    <SidebarSimple className="h-3.5 w-3.5"/>
+                  </button>}/>
+              <Tooltip.Portal>
+                <Tooltip.Positioner side="bottom" sideOffset={6}>
+                  <Tooltip.Popup className={cn('z-50 rounded-md px-2 py-1', 'bg-background-secondary border border-border', 'text-xs text-foreground-secondary', 'shadow-lg', 'origin-[var(--transform-origin)]', 'transition-[transform,opacity] duration-100', '[transition-timing-function:cubic-bezier(0.32,0.72,0,1)]', 'data-[instant]:duration-0', 'data-[starting-style]:scale-[0.96] data-[starting-style]:opacity-0', 'data-[ending-style]:scale-[0.96] data-[ending-style]:opacity-0')}>
+                    {sidebarCollapsed ? 'Show sidebar' : 'Hide sidebar'}
+                  </Tooltip.Popup>
+                </Tooltip.Positioner>
+              </Tooltip.Portal>
+            </Tooltip.Root>
+
+            <Tooltip.Root>
+              <Tooltip.Trigger render={<button onClick={handleBack} className={cn('flex h-7 w-7 items-center justify-center rounded-full', 'outline-none', 'bg-background-tertiary text-foreground-secondary', 'hover:bg-background-elevated hover:text-foreground')}>
+                    <CaretLeft className="h-3.5 w-3.5" weight="bold"/>
+                  </button>}/>
+              <Tooltip.Portal>
+                <Tooltip.Positioner side="bottom" sideOffset={6}>
+                  <Tooltip.Popup className={cn('z-50 rounded-md px-2 py-1', 'bg-background-secondary border border-border', 'text-xs text-foreground-secondary', 'shadow-lg', 'origin-[var(--transform-origin)]', 'transition-[transform,opacity] duration-100', '[transition-timing-function:cubic-bezier(0.32,0.72,0,1)]', 'data-[instant]:duration-0', 'data-[starting-style]:scale-[0.96] data-[starting-style]:opacity-0', 'data-[ending-style]:scale-[0.96] data-[ending-style]:opacity-0')}>
+                    Back
+                  </Tooltip.Popup>
+                </Tooltip.Positioner>
+              </Tooltip.Portal>
+            </Tooltip.Root>
+          </div>
+        </Tooltip.Provider>
+
+        {/* Center: Session title (matches sidebar exactly) */}
+        <span className="text-sm font-medium text-foreground">{windowLabel}</span>
+
+        {/* Right: Share and Actions */}
+        <div className="flex items-center justify-end gap-2">
+          <button onClick={handleShare} className={cn('rounded-full px-3 py-1.5 text-xs font-medium', 'outline-none', 'bg-background-tertiary text-foreground-secondary hover:bg-background-elevated hover:text-foreground')}>
+            Share
+          </button>
+
+          <Menu.Root>
+            <Menu.Trigger className={cn('flex items-center gap-1 rounded-full px-3 py-1.5', 'bg-foreground text-background text-xs font-medium', 'outline-none hover:bg-foreground/90')}>
+              Actions
+              <CaretDown className="h-3 w-3" weight="bold"/>
+            </Menu.Trigger>
+            <Menu.Portal>
+              <Menu.Positioner sideOffset={8} align="end">
+                <Menu.Popup className={cn('z-50 min-w-[200px] rounded-xl p-1.5', 'bg-card border border-border shadow-xl', 'outline-none', 'origin-[var(--transform-origin)]', 'transition-[transform,opacity] duration-150', '[transition-timing-function:cubic-bezier(0.32,0.72,0,1)]', 'data-[starting-style]:scale-[0.96] data-[starting-style]:opacity-0', 'data-[ending-style]:scale-[0.96] data-[ending-style]:opacity-0')}>
+                  {ACTIONS.map((action) => (<Menu.Item key={action.id} onClick={() => handleAction(action.id)} className={cn('flex w-full items-center gap-2.5 rounded-lg px-3 py-2 text-sm', 'outline-none cursor-pointer', 'text-foreground-secondary', 'hover:bg-background-tertiary hover:text-foreground', 'data-[highlighted]:bg-background-tertiary data-[highlighted]:text-foreground')}>
+                      <action.icon className="h-4 w-4"/>
+                      {action.label}
+                    </Menu.Item>))}
+                </Menu.Popup>
+              </Menu.Positioner>
+            </Menu.Portal>
+          </Menu.Root>
+        </div>
+      </div>
+
+      {/* Content area with padding */}
+      <div className="flex-1 overflow-hidden px-4 pb-4">
+        {/* Terminal card */}
+        <div className="relative flex h-full flex-col overflow-hidden rounded-xl border border-border/60 bg-[#0c0c0d]">
+          {/* Terminal content */}
+          <div className="relative flex-1 w-full h-full">
+            <TerminalView ref={terminalRef} windowName={windowKey} onScrollChange={handleScrollChange}/>
+          </div>
+
+          {/* Scroll to bottom FAB */}
+          <button onClick={handleScrollToBottom} className={cn('absolute bottom-4 left-1/2 -translate-x-1/2', 'flex h-7 w-7 items-center justify-center rounded-full', 'bg-foreground/90 text-background shadow-md', 'outline-none transition-all duration-200', '[transition-timing-function:cubic-bezier(0.32,0.72,0,1)]', isAtBottom
+            ? 'pointer-events-none translate-y-1 scale-95 opacity-0'
+            : 'translate-y-0 scale-100 opacity-100')} aria-hidden={isAtBottom}>
+            <ArrowDown className="h-3.5 w-3.5"/>
+          </button>
+        </div>
+      </div>
+    </div>);
+}

package/dist/web/components/project-files-view.d.ts

@@ -0,0 +1,6 @@
+interface ProjectFilesViewProps {
+    windowId: string;
+    label: string;
+}
+export declare function ProjectFilesView({ windowId, label }: ProjectFilesViewProps): any;
+export {};

package/dist/web/components/project-files-view.js

@@ -0,0 +1,205 @@
+'use client';
+import { useEffect, useMemo, useState } from 'react';
+import { useAtom, useSetAtom } from 'jotai';
+import { Tooltip } from '@base-ui-components/react/tooltip';
+import { ChevronLeftIcon, DocumentIcon, FolderIcon, Bars3Icon, } from '@heroicons/react/24/outline';
+import { cn } from '@/lib/utils';
+import { api } from '@/lib/api';
+import { toastError } from '@/components/toast';
+import { formatDisplayPath } from '@/lib/paths';
+import { selectedProjectAtom, sidebarCollapsedAtom, } from '@/atoms/state';
+function joinRelPath(base, segment) {
+    const cleanBase = base === '.' ? '' : base;
+    const next = [cleanBase, segment].filter(Boolean).join('/');
+    return next || '.';
+}
+function dirname(relPath) {
+    if (!relPath || relPath === '.')
+        return null;
+    const parts = relPath.split('/').filter(Boolean);
+    parts.pop();
+    const next = parts.join('/');
+    return next || '.';
+}
+function isTextFile(name) {
+    const lower = name.toLowerCase();
+    return (lower.endsWith('.md') ||
+        lower.endsWith('.txt') ||
+        lower.endsWith('.ts') ||
+        lower.endsWith('.tsx') ||
+        lower.endsWith('.js') ||
+        lower.endsWith('.jsx') ||
+        lower.endsWith('.json') ||
+        lower.endsWith('.yml') ||
+        lower.endsWith('.yaml') ||
+        lower.endsWith('.css') ||
+        lower.endsWith('.scss') ||
+        lower.endsWith('.html') ||
+        lower.endsWith('.env') ||
+        lower.endsWith('.sh') ||
+        lower.endsWith('.py') ||
+        lower.endsWith('.go') ||
+        lower.endsWith('.rs'));
+}
+export function ProjectFilesView({ windowId, label }) {
+    const setSelectedProject = useSetAtom(selectedProjectAtom);
+    const [sidebarCollapsed, setSidebarCollapsed] = useAtom(sidebarCollapsedAtom);
+    const [currentPath, setCurrentPath] = useState('.');
+    const [entries, setEntries] = useState([]);
+    const [root, setRoot] = useState(null);
+    const [loading, setLoading] = useState(false);
+    const [selectedFilePath, setSelectedFilePath] = useState(null);
+    const [fileContent, setFileContent] = useState('');
+    const [fileLoading, setFileLoading] = useState(false);
+    const title = useMemo(() => `Files`, []);
+    useEffect(() => {
+        let cancelled = false;
+        setLoading(true);
+        api
+            .listProjectFiles(windowId, currentPath)
+            .then((data) => {
+            if (cancelled)
+                return;
+            setRoot(data.root);
+            setEntries(data.entries);
+        })
+            .catch(() => toastError('Failed to load files'))
+            .finally(() => {
+            if (cancelled)
+                return;
+            setLoading(false);
+        });
+        return () => {
+            cancelled = true;
+        };
+    }, [windowId, currentPath]);
+    const openFile = async (relPath) => {
+        setSelectedFilePath(relPath);
+        setFileLoading(true);
+        try {
+            const data = await api.getProjectFile(windowId, relPath);
+            setFileContent(data.content);
+        }
+        catch {
+            toastError('Failed to open file');
+        }
+        finally {
+            setFileLoading(false);
+        }
+    };
+    return (<div className="flex h-full flex-col bg-background-secondary">
+      {/* Header */}
+      <div className="grid h-12 shrink-0 grid-cols-[1fr_auto_1fr] items-center px-4">
+        {/* Left: Sidebar toggle + Back */}
+        <Tooltip.Provider delay={300} closeDelay={0}>
+          <div className="flex items-center justify-start gap-1.5">
+            <Tooltip.Root>
+              <Tooltip.Trigger render={<button onClick={() => setSidebarCollapsed(!sidebarCollapsed)} className={cn('flex h-7 w-7 items-center justify-center rounded-full', 'outline-none', 'bg-background-tertiary text-foreground-secondary', 'hover:bg-background-elevated hover:text-foreground')}>
+                    <Bars3Icon className="h-3.5 w-3.5"/>
+                  </button>}/>
+              <Tooltip.Portal>
+                <Tooltip.Positioner side="bottom" sideOffset={6}>
+                  <Tooltip.Popup className={cn('z-50 rounded-md px-2 py-1', 'bg-background-secondary border border-border', 'text-xs text-foreground-secondary', 'shadow-lg', 'origin-[var(--transform-origin)]', 'transition-[transform,opacity] duration-100', '[transition-timing-function:cubic-bezier(0.32,0.72,0,1)]', 'data-[instant]:duration-0', 'data-[starting-style]:scale-[0.96] data-[starting-style]:opacity-0', 'data-[ending-style]:scale-[0.96] data-[ending-style]:opacity-0')}>
+                    {sidebarCollapsed ? 'Show sidebar' : 'Hide sidebar'}
+                  </Tooltip.Popup>
+                </Tooltip.Positioner>
+              </Tooltip.Portal>
+            </Tooltip.Root>
+
+            <Tooltip.Root>
+              <Tooltip.Trigger render={<button onClick={() => setSelectedProject(null)} className={cn('flex h-7 w-7 items-center justify-center rounded-full', 'outline-none', 'bg-background-tertiary text-foreground-secondary', 'hover:bg-background-elevated hover:text-foreground')}>
+                    <ChevronLeftIcon className="h-3.5 w-3.5"/>
+                  </button>}/>
+              <Tooltip.Portal>
+                <Tooltip.Positioner side="bottom" sideOffset={6}>
+                  <Tooltip.Popup className={cn('z-50 rounded-md px-2 py-1', 'bg-background-secondary border border-border', 'text-xs text-foreground-secondary', 'shadow-lg', 'origin-[var(--transform-origin)]', 'transition-[transform,opacity] duration-100', '[transition-timing-function:cubic-bezier(0.32,0.72,0,1)]', 'data-[instant]:duration-0', 'data-[starting-style]:scale-[0.96] data-[starting-style]:opacity-0', 'data-[ending-style]:scale-[0.96] data-[ending-style]:opacity-0')}>
+                    Back
+                  </Tooltip.Popup>
+                </Tooltip.Positioner>
+              </Tooltip.Portal>
+            </Tooltip.Root>
+          </div>
+        </Tooltip.Provider>
+
+        {/* Center */}
+        <span className="text-sm font-medium text-foreground">
+          {label} · {title}
+        </span>
+
+        {/* Right */}
+        <div />
+      </div>
+
+      {/* Content */}
+      <div className="flex-1 overflow-hidden px-4 pb-4">
+        <div className="grid h-full grid-cols-[340px_1fr] gap-4">
+          {/* Tree */}
+          <div className="flex h-full flex-col overflow-hidden rounded-xl border border-border/60 bg-background">
+            <div className="flex h-11 items-center justify-between border-b border-border/60 px-3">
+              <div className="min-w-0">
+                <div className="truncate text-xs font-medium text-foreground-secondary">
+                  {root ? formatDisplayPath(root) : '…'}
+                </div>
+                <div className="mt-0.5 truncate text-[11px] text-foreground-quaternary">
+                  {currentPath === '.' ? '/' : `/${currentPath}`}
+                </div>
+              </div>
+
+              {dirname(currentPath) && (<button onClick={() => {
+                const up = dirname(currentPath);
+                if (up)
+                    setCurrentPath(up);
+            }} className={cn('rounded-full px-2 py-1 text-[11px] font-medium', 'outline-none', 'bg-background-tertiary text-foreground-secondary', 'hover:bg-background-elevated hover:text-foreground')}>
+                  Up
+                </button>)}
+            </div>
+
+            <div className="flex-1 overflow-auto p-1.5">
+              {loading ? (<div className="px-3 py-6 text-center text-xs text-foreground-tertiary">
+                  Loading…
+                </div>) : entries.length === 0 ? (<div className="px-3 py-6 text-center text-xs text-foreground-tertiary">
+                  Empty folder.
+                </div>) : (<div className="space-y-0.5">
+                  {entries.map((entry) => {
+                const rel = joinRelPath(currentPath, entry.name);
+                const isDir = entry.type === 'dir';
+                const selected = selectedFilePath === rel;
+                return (<button key={rel} onClick={() => {
+                        if (isDir) {
+                            setSelectedFilePath(null);
+                            setFileContent('');
+                            setCurrentPath(rel);
+                        }
+                        else if (isTextFile(entry.name)) {
+                            openFile(rel);
+                        }
+                        else {
+                            toastError('Preview not supported for this file type');
+                        }
+                    }} className={cn('flex h-10 w-full items-center gap-2 rounded-[12px] px-3 text-left text-sm', 'outline-none', selected ? 'bg-background-secondary text-foreground' : 'text-foreground-secondary hover:bg-background-secondary hover:text-foreground')}>
+                        {isDir ? (<FolderIcon className="h-4 w-4 stroke-[1.75] text-foreground-tertiary"/>) : (<DocumentIcon className="h-4 w-4 stroke-[1.75] text-foreground-tertiary"/>)}
+                        <span className="min-w-0 flex-1 truncate">{entry.name}</span>
+                      </button>);
+            })}
+                </div>)}
+            </div>
+          </div>
+
+          {/* Preview */}
+          <div className="flex h-full flex-col overflow-hidden rounded-xl border border-border/60 bg-[#0c0c0d]">
+            <div className="flex h-11 items-center justify-between border-b border-border/60 px-3">
+              <span className="truncate text-xs font-medium text-foreground-secondary">
+                {selectedFilePath ? selectedFilePath.split('/').pop() : 'Preview'}
+              </span>
+              <span className="text-[11px] text-foreground-quaternary">
+                {selectedFilePath ? `/${selectedFilePath === '.' ? '' : selectedFilePath}` : ''}
+              </span>
+            </div>
+            <div className="flex-1 overflow-auto p-4 font-mono text-xs leading-relaxed text-foreground">
+              {fileLoading ? (<div className="text-foreground-tertiary">Loading…</div>) : selectedFilePath ? (<pre className="whitespace-pre-wrap break-words">{fileContent}</pre>) : (<div className="text-foreground-tertiary">Select a file to preview.</div>)}
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>);
+}

package/dist/web/components/project-planning-view.d.ts

@@ -0,0 +1,6 @@
+interface ProjectPlanningViewProps {
+    projectName: string;
+    label: string;
+}
+export declare function ProjectPlanningView({ projectName, label }: ProjectPlanningViewProps): any;
+export {};

package/dist/web/components/project-planning-view.js

@@ -0,0 +1,146 @@
+'use client';
+import { useEffect, useMemo, useState } from 'react';
+import { useAtom, useSetAtom } from 'jotai';
+import { Tooltip } from '@base-ui-components/react/tooltip';
+import { ChevronLeftIcon, DocumentIcon, Bars3Icon, } from '@heroicons/react/24/outline';
+import { cn } from '@/lib/utils';
+import { api } from '@/lib/api';
+import { toastError } from '@/components/toast';
+import { selectedProjectAtom, sidebarCollapsedAtom, } from '@/atoms/state';
+function formatTime(iso) {
+    const date = new Date(iso);
+    return date.toLocaleString('en-US', {
+        month: 'short',
+        day: 'numeric',
+        hour: 'numeric',
+        minute: '2-digit',
+    });
+}
+export function ProjectPlanningView({ projectName, label }) {
+    const setSelectedProject = useSetAtom(selectedProjectAtom);
+    const [sidebarCollapsed, setSidebarCollapsed] = useAtom(sidebarCollapsedAtom);
+    const [plans, setPlans] = useState([]);
+    const [loading, setLoading] = useState(false);
+    const [selectedSlug, setSelectedSlug] = useState(null);
+    const [content, setContent] = useState('');
+    const [contentLoading, setContentLoading] = useState(false);
+    const title = useMemo(() => `Planning`, []);
+    useEffect(() => {
+        let cancelled = false;
+        setLoading(true);
+        api
+            .listProjectPlans(projectName)
+            .then((data) => {
+            if (cancelled)
+                return;
+            setPlans(data.plans);
+        })
+            .catch(() => toastError('Failed to load plans'))
+            .finally(() => {
+            if (cancelled)
+                return;
+            setLoading(false);
+        });
+        return () => {
+            cancelled = true;
+        };
+    }, [projectName]);
+    const openPlan = async (slug) => {
+        setSelectedSlug(slug);
+        setContentLoading(true);
+        try {
+            const data = await api.getProjectPlan(projectName, slug);
+            setContent(data.content);
+        }
+        catch {
+            toastError('Failed to open plan');
+        }
+        finally {
+            setContentLoading(false);
+        }
+    };
+    return (<div className="flex h-full flex-col bg-background-secondary">
+      {/* Header */}
+      <div className="grid h-12 shrink-0 grid-cols-[1fr_auto_1fr] items-center px-4">
+        <Tooltip.Provider delay={300} closeDelay={0}>
+          <div className="flex items-center justify-start gap-1.5">
+            <Tooltip.Root>
+              <Tooltip.Trigger render={<button onClick={() => setSidebarCollapsed(!sidebarCollapsed)} className={cn('flex h-7 w-7 items-center justify-center rounded-full', 'outline-none', 'bg-background-tertiary text-foreground-secondary', 'hover:bg-background-elevated hover:text-foreground')}>
+                    <Bars3Icon className="h-3.5 w-3.5"/>
+                  </button>}/>
+              <Tooltip.Portal>
+                <Tooltip.Positioner side="bottom" sideOffset={6}>
+                  <Tooltip.Popup className={cn('z-50 rounded-md px-2 py-1', 'bg-background-secondary border border-border', 'text-xs text-foreground-secondary', 'shadow-lg', 'origin-[var(--transform-origin)]', 'transition-[transform,opacity] duration-100', '[transition-timing-function:cubic-bezier(0.32,0.72,0,1)]', 'data-[instant]:duration-0', 'data-[starting-style]:scale-[0.96] data-[starting-style]:opacity-0', 'data-[ending-style]:scale-[0.96] data-[ending-style]:opacity-0')}>
+                    {sidebarCollapsed ? 'Show sidebar' : 'Hide sidebar'}
+                  </Tooltip.Popup>
+                </Tooltip.Positioner>
+              </Tooltip.Portal>
+            </Tooltip.Root>
+
+            <Tooltip.Root>
+              <Tooltip.Trigger render={<button onClick={() => setSelectedProject(null)} className={cn('flex h-7 w-7 items-center justify-center rounded-full', 'outline-none', 'bg-background-tertiary text-foreground-secondary', 'hover:bg-background-elevated hover:text-foreground')}>
+                    <ChevronLeftIcon className="h-3.5 w-3.5"/>
+                  </button>}/>
+              <Tooltip.Portal>
+                <Tooltip.Positioner side="bottom" sideOffset={6}>
+                  <Tooltip.Popup className={cn('z-50 rounded-md px-2 py-1', 'bg-background-secondary border border-border', 'text-xs text-foreground-secondary', 'shadow-lg', 'origin-[var(--transform-origin)]', 'transition-[transform,opacity] duration-100', '[transition-timing-function:cubic-bezier(0.32,0.72,0,1)]', 'data-[instant]:duration-0', 'data-[starting-style]:scale-[0.96] data-[starting-style]:opacity-0', 'data-[ending-style]:scale-[0.96] data-[ending-style]:opacity-0')}>
+                    Back
+                  </Tooltip.Popup>
+                </Tooltip.Positioner>
+              </Tooltip.Portal>
+            </Tooltip.Root>
+          </div>
+        </Tooltip.Provider>
+
+        <span className="text-sm font-medium text-foreground">
+          {label} · {title}
+        </span>
+        <div />
+      </div>
+
+      {/* Content */}
+      <div className="flex-1 overflow-hidden px-4 pb-4">
+        <div className="grid h-full grid-cols-[340px_1fr] gap-4">
+          {/* Plan list */}
+          <div className="flex h-full flex-col overflow-hidden rounded-xl border border-border/60 bg-background">
+            <div className="flex h-11 items-center justify-between border-b border-border/60 px-3">
+              <span className="text-xs font-medium text-foreground-secondary">Plans</span>
+              <span className="text-[11px] text-foreground-quaternary">{plans.length}</span>
+            </div>
+            <div className="flex-1 overflow-auto p-1.5">
+              {loading ? (<div className="px-3 py-6 text-center text-xs text-foreground-tertiary">
+                  Loading…
+                </div>) : plans.length === 0 ? (<div className="px-3 py-6 text-center text-xs text-foreground-tertiary">
+                  No plans for this project.
+                </div>) : (<div className="space-y-0.5">
+                  {plans.map((plan) => {
+                const selected = selectedSlug === plan.slug;
+                return (<button key={plan.slug} onClick={() => openPlan(plan.slug)} className={cn('flex h-10 w-full items-center gap-2 rounded-[12px] px-3 text-left text-sm', 'outline-none', selected
+                        ? 'bg-background-secondary text-foreground'
+                        : 'text-foreground-secondary hover:bg-background-secondary hover:text-foreground')}>
+                        <DocumentIcon className="h-4 w-4 text-foreground-tertiary"/>
+                        <span className="min-w-0 flex-1 truncate">{plan.title}</span>
+                        {plan.modified && (<span className="shrink-0 text-[11px] text-foreground-quaternary">
+                            {formatTime(plan.modified)}
+                          </span>)}
+                      </button>);
+            })}
+                </div>)}
+            </div>
+          </div>
+
+          {/* Preview */}
+          <div className="flex h-full flex-col overflow-hidden rounded-xl border border-border/60 bg-[#0c0c0d]">
+            <div className="flex h-11 items-center justify-between border-b border-border/60 px-3">
+              <span className="truncate text-xs font-medium text-foreground-secondary">
+                {selectedSlug ? selectedSlug : 'Preview'}
+              </span>
+            </div>
+            <div className="flex-1 overflow-auto p-4 font-mono text-xs leading-relaxed text-foreground">
+              {contentLoading ? (<div className="text-foreground-tertiary">Loading…</div>) : selectedSlug ? (<pre className="whitespace-pre-wrap break-words">{content}</pre>) : (<div className="text-foreground-tertiary">Select a plan to view.</div>)}
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>);
+}

package/dist/web/components/session-view.d.ts

@@ -0,0 +1,6 @@
+import { type Session } from '@/lib/api';
+interface SessionViewProps {
+    session: Session;
+}
+export declare function SessionView({ session }: SessionViewProps): any;
+export {};