@aion0/forge 0.1.9 → 0.2.0

package/components/DocTerminal.tsx

@@ -0,0 +1,168 @@
+'use client';
+
+import { useState, useEffect, useRef, useCallback} from 'react';
+import { Terminal } from '@xterm/xterm';
+import { FitAddon } from '@xterm/addon-fit';
+import '@xterm/xterm/css/xterm.css';
+
+const SESSION_NAME = 'mw-docs-claude';
+
+function getWsUrl() {
+  if (typeof window === 'undefined') return 'ws://localhost:3001';
+  const wsProtocol = window.location.protocol === 'https:' ? 'wss:' : 'ws:';
+  const wsHost = window.location.hostname;
+  if (wsHost !== 'localhost' && wsHost !== '127.0.0.1') {
+    return `${wsProtocol}//${window.location.host}/terminal-ws`;
+  }
+  return `${wsProtocol}//${wsHost}:3001`;
+}
+
+export default function DocTerminal({ docRoot }: { docRoot: string }) {
+  const containerRef = useRef<HTMLDivElement>(null);
+  const [connected, setConnected] = useState(false);
+  const wsRef = useRef<WebSocket | null>(null);
+  const docRootRef = useRef(docRoot);
+  docRootRef.current = docRoot;
+
+  useEffect(() => {
+    if (!containerRef.current) return;
+
+    let disposed = false;
+    const term = new Terminal({
+      cursorBlink: true,
+      fontSize: 13,
+      fontFamily: 'Menlo, Monaco, "Courier New", monospace',
+      scrollback: 5000,
+      logger: { trace: () => {}, debug: () => {}, info: () => {}, warn: () => {}, error: () => {} },
+      theme: {
+        background: '#1a1a2e',
+        foreground: '#e0e0e0',
+        cursor: '#7c5bf0',
+        selectionBackground: '#7c5bf066',
+      },
+    });
+    const fit = new FitAddon();
+    term.loadAddon(fit);
+
+    term.open(containerRef.current);
+    try { fit.fit(); } catch {}
+
+    const wsUrl = getWsUrl();
+    let ws: WebSocket | null = null;
+    let reconnectTimer = 0;
+    let isNewSession = false;
+
+    function connect() {
+      if (disposed) return;
+      const socket = new WebSocket(wsUrl);
+      ws = socket;
+      wsRef.current = socket;
+
+      socket.onopen = () => {
+        if (disposed) { socket.close(); return; }
+        const cols = term.cols;
+        const rows = term.rows;
+        socket.send(JSON.stringify({ type: 'attach', sessionName: SESSION_NAME, cols, rows }));
+      };
+
+      socket.onmessage = (event) => {
+        if (disposed) return;
+        try {
+          const msg = JSON.parse(event.data);
+          if (msg.type === 'output') {
+            try { term.write(msg.data); } catch {};
+          } else if (msg.type === 'connected') {
+            setConnected(true);
+            // For newly created session: cd to doc root and run claude --resume to let user pick
+            if (isNewSession && docRootRef.current) {
+              isNewSession = false;
+              setTimeout(() => {
+                if (socket.readyState === WebSocket.OPEN) {
+                  socket.send(JSON.stringify({ type: 'input', data: `cd "${docRootRef.current}" && claude --resume\n` }));
+                }
+              }, 300);
+            }
+          } else if (msg.type === 'error') {
+            // Session doesn't exist — create it
+            isNewSession = true;
+            if (socket.readyState === WebSocket.OPEN) {
+              socket.send(JSON.stringify({ type: 'create', cols: term.cols, rows: term.rows, sessionName: SESSION_NAME }));
+            }
+          }
+        } catch {}
+      };
+
+      socket.onclose = () => {
+        if (disposed) return;
+        setConnected(false);
+        reconnectTimer = window.setTimeout(connect, 3000);
+      };
+
+      socket.onerror = () => {};
+    }
+
+    connect();
+
+    term.onData((data) => {
+      if (ws?.readyState === WebSocket.OPEN) ws.send(JSON.stringify({ type: 'input', data }));
+    });
+
+    // Resize with protection
+    const resizeObserver = new ResizeObserver(() => {
+      const el = containerRef.current;
+      if (!el || el.offsetWidth < 100 || el.offsetHeight < 50) return;
+      try {
+        fit.fit();
+        if (term.cols < 2 || term.rows < 2) return;
+        if (ws?.readyState === WebSocket.OPEN) {
+          ws.send(JSON.stringify({ type: 'resize', cols: term.cols, rows: term.rows }));
+        }
+      } catch {}
+    });
+    resizeObserver.observe(containerRef.current);
+
+    return () => {
+      disposed = true;
+      clearTimeout(reconnectTimer);
+      resizeObserver.disconnect();
+      if (ws) { ws.onclose = null; ws.close(); }
+      term.dispose();
+    };
+  }, []);
+
+  const runCommand = useCallback((cmd: string) => {
+    const ws = wsRef.current;
+    if (ws?.readyState === WebSocket.OPEN) {
+      ws.send(JSON.stringify({ type: 'input', data: cmd + '\n' }));
+    }
+  }, []);
+
+  return (
+    <div className="h-full flex flex-col bg-[#1a1a2e]">
+      {/* Toolbar */}
+      <div className="flex items-center gap-2 px-2 py-1 border-b border-[#2a2a4a] shrink-0">
+        <span className="text-[9px] text-gray-500">Claude Console</span>
+        <span className={`text-[9px] ${connected ? 'text-green-500' : 'text-gray-600'}`}>
+          {connected ? '● connected' : '○'}
+        </span>
+        <div className="ml-auto flex items-center gap-1">
+          <button
+            onClick={() => runCommand(`cd "${docRoot}" && claude`)}
+            className="text-[10px] px-2 py-0.5 text-[var(--accent)] hover:bg-[#2a2a4a] rounded"
+          >
+            New
+          </button>
+          <button
+            onClick={() => runCommand(`cd "${docRoot}" && claude --resume`)}
+            className="text-[10px] px-2 py-0.5 text-gray-400 hover:text-white hover:bg-[#2a2a4a] rounded"
+          >
+            Resume
+          </button>
+        </div>
+      </div>
+
+      {/* Terminal */}
+      <div ref={containerRef} className="flex-1 min-h-0" />
+    </div>
+  );
+}

package/components/DocsViewer.tsx

@@ -0,0 +1,254 @@
+'use client';
+
+import { useState, useEffect, useCallback, useRef, lazy, Suspense } from 'react';
+import MarkdownContent from './MarkdownContent';
+
+const DocTerminal = lazy(() => import('./DocTerminal'));
+
+interface FileNode {
+  name: string;
+  path: string;
+  type: 'file' | 'dir';
+  children?: FileNode[];
+}
+
+// ─── File Tree ───────────────────────────────────────────
+
+function TreeNode({ node, depth, selected, onSelect }: {
+  node: FileNode;
+  depth: number;
+  selected: string | null;
+  onSelect: (path: string) => void;
+}) {
+  const [expanded, setExpanded] = useState(depth < 1);
+
+  if (node.type === 'dir') {
+    return (
+      <div>
+        <button
+          onClick={() => setExpanded(v => !v)}
+          className="w-full text-left flex items-center gap-1 px-1 py-0.5 hover:bg-[var(--bg-tertiary)] rounded text-xs"
+          style={{ paddingLeft: depth * 12 + 4 }}
+        >
+          <span className="text-[10px] text-[var(--text-secondary)] w-3">{expanded ? '▾' : '▸'}</span>
+          <span className="text-[var(--text-primary)]">{node.name}</span>
+        </button>
+        {expanded && node.children?.map(child => (
+          <TreeNode key={child.path} node={child} depth={depth + 1} selected={selected} onSelect={onSelect} />
+        ))}
+      </div>
+    );
+  }
+
+  const isSelected = selected === node.path;
+  return (
+    <button
+      onClick={() => onSelect(node.path)}
+      className={`w-full text-left flex items-center gap-1 px-1 py-0.5 rounded text-xs truncate ${
+        isSelected ? 'bg-[var(--accent)]/20 text-[var(--accent)]' : 'hover:bg-[var(--bg-tertiary)] text-[var(--text-secondary)]'
+      }`}
+      style={{ paddingLeft: depth * 12 + 16 }}
+      title={node.path}
+    >
+      {node.name.replace(/\.md$/, '')}
+    </button>
+  );
+}
+
+// ─── Search ──────────────────────────────────────────────
+
+function flattenTree(nodes: FileNode[]): FileNode[] {
+  const result: FileNode[] = [];
+  for (const node of nodes) {
+    if (node.type === 'file') result.push(node);
+    if (node.children) result.push(...flattenTree(node.children));
+  }
+  return result;
+}
+
+// ─── Main Component ──────────────────────────────────────
+
+export default function DocsViewer() {
+  const [roots, setRoots] = useState<string[]>([]);
+  const [rootPaths, setRootPaths] = useState<string[]>([]);
+  const [activeRoot, setActiveRoot] = useState(0);
+  const [tree, setTree] = useState<FileNode[]>([]);
+  const [selectedFile, setSelectedFile] = useState<string | null>(null);
+  const [content, setContent] = useState<string | null>(null);
+  const [loading, setLoading] = useState(false);
+  const [search, setSearch] = useState('');
+  const [terminalHeight, setTerminalHeight] = useState(250);
+  const [sidebarOpen, setSidebarOpen] = useState(true);
+  const dragRef = useRef<{ startY: number; startH: number } | null>(null);
+
+  // Fetch tree
+  const fetchTree = useCallback(async (rootIdx: number) => {
+    const res = await fetch(`/api/docs?root=${rootIdx}`);
+    const data = await res.json();
+    setRoots(data.roots || []);
+    setRootPaths(data.rootPaths || []);
+    setTree(data.tree || []);
+  }, []);
+
+  useEffect(() => { fetchTree(activeRoot); }, [activeRoot, fetchTree]);
+
+  // Fetch file content
+  const openFile = useCallback(async (path: string) => {
+    setSelectedFile(path);
+    setLoading(true);
+    const res = await fetch(`/api/docs?root=${activeRoot}&file=${encodeURIComponent(path)}`);
+    const data = await res.json();
+    setContent(data.content || null);
+    setLoading(false);
+  }, [activeRoot]);
+
+  // Search filter
+  const allFiles = flattenTree(tree);
+  const filtered = search
+    ? allFiles.filter(f => f.name.toLowerCase().includes(search.toLowerCase()) || f.path.toLowerCase().includes(search.toLowerCase()))
+    : null;
+
+  // Drag to resize terminal
+  const onDragStart = (e: React.MouseEvent) => {
+    e.preventDefault();
+    dragRef.current = { startY: e.clientY, startH: terminalHeight };
+    const onMove = (ev: MouseEvent) => {
+      if (!dragRef.current) return;
+      const delta = dragRef.current.startY - ev.clientY;
+      setTerminalHeight(Math.max(100, Math.min(500, dragRef.current.startH + delta)));
+    };
+    const onUp = () => {
+      dragRef.current = null;
+      window.removeEventListener('mousemove', onMove);
+      window.removeEventListener('mouseup', onUp);
+    };
+    window.addEventListener('mousemove', onMove);
+    window.addEventListener('mouseup', onUp);
+  };
+
+  if (roots.length === 0) {
+    return (
+      <div className="flex-1 flex items-center justify-center text-[var(--text-secondary)]">
+        <div className="text-center space-y-2">
+          <p className="text-lg">No document directories configured</p>
+          <p className="text-xs">Add directories in Settings → Document Roots</p>
+        </div>
+      </div>
+    );
+  }
+
+  return (
+    <div className="flex-1 flex flex-col min-h-0">
+      {/* Doc content area */}
+      <div className="flex-1 flex min-h-0">
+        {/* Collapsible sidebar — file tree */}
+        {sidebarOpen && (
+          <aside className="w-56 border-r border-[var(--border)] flex flex-col shrink-0">
+            {/* Root selector */}
+            {roots.length > 1 && (
+              <div className="p-2 border-b border-[var(--border)]">
+                <select
+                  value={activeRoot}
+                  onChange={e => { setActiveRoot(Number(e.target.value)); setSelectedFile(null); setContent(null); }}
+                  className="w-full text-xs bg-[var(--bg-tertiary)] border border-[var(--border)] rounded px-2 py-1 text-[var(--text-primary)]"
+                >
+                  {roots.map((r, i) => <option key={i} value={i}>{r}</option>)}
+                </select>
+              </div>
+            )}
+
+            {/* Search */}
+            <div className="p-2 border-b border-[var(--border)]">
+              <input
+                type="text"
+                placeholder="Search..."
+                value={search}
+                onChange={e => setSearch(e.target.value)}
+                className="w-full text-xs bg-[var(--bg-tertiary)] border border-[var(--border)] rounded px-2 py-1 text-[var(--text-primary)] focus:outline-none focus:border-[var(--accent)]"
+              />
+            </div>
+
+            {/* Tree / search results */}
+            <div className="flex-1 overflow-y-auto p-1">
+              {filtered ? (
+                filtered.length === 0 ? (
+                  <div className="text-xs text-[var(--text-secondary)] p-2">No matches</div>
+                ) : (
+                  filtered.map(f => (
+                    <button
+                      key={f.path}
+                      onClick={() => { openFile(f.path); setSearch(''); }}
+                      className={`w-full text-left px-2 py-1 rounded text-xs truncate ${
+                        selectedFile === f.path ? 'bg-[var(--accent)]/20 text-[var(--accent)]' : 'hover:bg-[var(--bg-tertiary)] text-[var(--text-secondary)]'
+                      }`}
+                      title={f.path}
+                    >
+                      <span className="text-[var(--text-primary)]">{f.name.replace(/\.md$/, '')}</span>
+                      <span className="text-[9px] text-[var(--text-secondary)] ml-1">{f.path.split('/').slice(0, -1).join('/')}</span>
+                    </button>
+                  ))
+                )
+              ) : (
+                tree.map(node => (
+                  <TreeNode key={node.path} node={node} depth={0} selected={selectedFile} onSelect={openFile} />
+                ))
+              )}
+            </div>
+          </aside>
+        )}
+
+        {/* Main content — full width markdown */}
+        <main className="flex-1 flex flex-col min-w-0">
+          {/* Top bar */}
+          <div className="px-3 py-1.5 border-b border-[var(--border)] shrink-0 flex items-center gap-2">
+            <button
+              onClick={() => setSidebarOpen(v => !v)}
+              className="text-[10px] px-1.5 py-0.5 text-gray-400 hover:text-white hover:bg-[var(--bg-tertiary)] rounded"
+              title={sidebarOpen ? 'Hide sidebar' : 'Show sidebar'}
+            >
+              {sidebarOpen ? '◀' : '▶'}
+            </button>
+            {selectedFile ? (
+              <>
+                <span className="text-xs font-semibold text-[var(--text-primary)] truncate">{selectedFile.replace(/\.md$/, '')}</span>
+                <span className="text-[9px] text-[var(--text-secondary)] ml-auto">{selectedFile}</span>
+              </>
+            ) : (
+              <span className="text-xs text-[var(--text-secondary)]">{roots[activeRoot] || 'Docs'}</span>
+            )}
+          </div>
+
+          {/* Content */}
+          {selectedFile && content ? (
+            <div className="flex-1 overflow-y-auto px-8 py-6">
+              {loading ? (
+                <div className="text-xs text-[var(--text-secondary)]">Loading...</div>
+              ) : (
+                <div className="max-w-none">
+                  <MarkdownContent content={content} />
+                </div>
+              )}
+            </div>
+          ) : (
+            <div className="flex-1 flex items-center justify-center text-[var(--text-secondary)]">
+              <p className="text-xs">Select a document to view</p>
+            </div>
+          )}
+        </main>
+      </div>
+
+      {/* Resize handle */}
+      <div
+        onMouseDown={onDragStart}
+        className="h-1 bg-[var(--border)] cursor-row-resize hover:bg-[var(--accent)]/50 shrink-0"
+      />
+
+      {/* Bottom — Claude console */}
+      <div className="shrink-0" style={{ height: terminalHeight }}>
+        <Suspense fallback={<div className="h-full flex items-center justify-center text-[var(--text-secondary)] text-xs">Loading...</div>}>
+          <DocTerminal docRoot={rootPaths[activeRoot] || ''} />
+        </Suspense>
+      </div>
+    </div>
+  );
+}

package/components/MarkdownContent.tsx

@@ -1,10 +1,12 @@
 'use client';
 
 import Markdown from 'react-markdown';
+import remarkGfm from 'remark-gfm';
 
 export default function MarkdownContent({ content }: { content: string }) {
   return (
     <Markdown
+      remarkPlugins={[remarkGfm]}
       components={{
         h1: ({ children }) => <h1 className="text-base font-bold text-[var(--text-primary)] mt-3 mb-1">{children}</h1>,
         h2: ({ children }) => <h2 className="text-sm font-bold text-[var(--text-primary)] mt-3 mb-1">{children}</h2>,
@@ -17,8 +19,10 @@ export default function MarkdownContent({ content }: { content: string }) {
         em: ({ children }) => <em className="italic text-[var(--text-secondary)]">{children}</em>,
         a: ({ href, children }) => <a href={href} className="text-[var(--accent)] hover:underline" target="_blank" rel="noopener">{children}</a>,
         blockquote: ({ children }) => <blockquote className="border-l-2 border-[var(--accent)]/40 pl-3 my-1.5 text-[var(--text-secondary)] text-xs italic">{children}</blockquote>,
-        code: ({ className, children }) => {
-          const isBlock = className?.includes('language-');
+        code: ({ className, children, node, ...props }) => {
+          // Block code: has language class OR parent is <pre> (checked via node)
+          const isBlock = !!className?.includes('language-');
+
           if (isBlock) {
             const lang = className?.replace('language-', '') || '';
             return (
@@ -29,7 +33,7 @@ export default function MarkdownContent({ content }: { content: string }) {
                   </div>
                 )}
                 <pre className="p-3 bg-[var(--bg-tertiary)] overflow-x-auto max-w-full">
-                  <code className="text-[11px] font-mono text-[var(--text-primary)] break-all">{children}</code>
+                  <code className="text-[12px] font-mono text-[var(--text-primary)] whitespace-pre leading-[1.4]" style={{ fontFamily: 'Menlo, Monaco, "Courier New", monospace' }}>{children}</code>
                 </pre>
               </div>
             );
@@ -40,15 +44,27 @@ export default function MarkdownContent({ content }: { content: string }) {
             </code>
           );
         },
-        pre: ({ children }) => <>{children}</>,
+        pre: ({ children, ...props }) => {
+          // If code child already rendered as block (has language-), just pass through
+          // Otherwise wrap plain code blocks (no language) with proper styling
+          const child = (children as any)?.props;
+          if (child?.className?.includes('language-')) return <>{children}</>;
+          return (
+            <div className="my-2 rounded border border-[var(--border)] overflow-hidden max-w-full">
+              <pre className="p-3 bg-[var(--bg-tertiary)] overflow-x-auto max-w-full">
+                <code className="text-[12px] font-mono text-[var(--text-primary)] whitespace-pre leading-[1.4]" style={{ fontFamily: 'Menlo, Monaco, "Courier New", monospace' }}>{child?.children || children}</code>
+              </pre>
+            </div>
+          );
+        },
         hr: () => <hr className="my-3 border-[var(--border)]" />,
         table: ({ children }) => (
-          <div className="my-2 overflow-x-auto">
-            <table className="text-xs border-collapse w-full">{children}</table>
+          <div className="my-3 overflow-x-auto">
+            <table className="text-xs border-collapse">{children}</table>
           </div>
         ),
-        th: ({ children }) => <th className="border border-[var(--border)] px-2 py-1 bg-[var(--bg-tertiary)] text-left font-semibold text-[11px]">{children}</th>,
-        td: ({ children }) => <td className="border border-[var(--border)] px-2 py-1 text-[11px]">{children}</td>,
+        th: ({ children }) => <th className="border border-[var(--border)] px-3 py-1.5 bg-[var(--bg-tertiary)] text-left font-semibold text-[11px] whitespace-nowrap">{children}</th>,
+        td: ({ children }) => <td className="border border-[var(--border)] px-3 py-1.5 text-[11px]">{children}</td>,
       }}
     >
       {content}

package/components/SettingsModal.tsx

@@ -4,6 +4,7 @@ import { useState, useEffect, useCallback } from 'react';
 
 interface Settings {
   projectRoots: string[];
+  docRoots: string[];
   claudePath: string;
   telegramBotToken: string;
   telegramChatId: string;
@@ -24,6 +25,7 @@ interface TunnelStatus {
 export default function SettingsModal({ onClose }: { onClose: () => void }) {
   const [settings, setSettings] = useState<Settings>({
     projectRoots: [],
+    docRoots: [],
     claudePath: '',
     telegramBotToken: '',
     telegramChatId: '',
@@ -33,6 +35,7 @@ export default function SettingsModal({ onClose }: { onClose: () => void }) {
     telegramTunnelPassword: '',
   });
   const [newRoot, setNewRoot] = useState('');
+  const [newDocRoot, setNewDocRoot] = useState('');
   const [saved, setSaved] = useState(false);
   const [tunnel, setTunnel] = useState<TunnelStatus>({
     status: 'stopped', url: null, error: null, installed: false, log: [],
@@ -128,6 +131,58 @@ export default function SettingsModal({ onClose }: { onClose: () => void }) {
           </div>
         </div>
 
+        {/* Document Roots */}
+        <div className="space-y-2">
+          <label className="text-xs text-[var(--text-secondary)] font-semibold uppercase">
+            Document Directories
+          </label>
+          <p className="text-[10px] text-[var(--text-secondary)]">
+            Markdown document directories (e.g. Obsidian vaults). Shown in the Docs tab.
+          </p>
+
+          {(settings.docRoots || []).map(root => (
+            <div key={root} className="flex items-center gap-2">
+              <span className="flex-1 text-xs px-2 py-1.5 bg-[var(--bg-tertiary)] border border-[var(--border)] rounded font-mono truncate">
+                {root}
+              </span>
+              <button
+                onClick={() => setSettings({ ...settings, docRoots: settings.docRoots.filter(r => r !== root) })}
+                className="text-[10px] px-2 py-1 text-[var(--red)] hover:bg-[var(--red)] hover:text-white rounded transition-colors"
+              >
+                Remove
+              </button>
+            </div>
+          ))}
+
+          <div className="flex gap-2">
+            <input
+              value={newDocRoot}
+              onChange={e => setNewDocRoot(e.target.value)}
+              onKeyDown={e => {
+                if (e.key === 'Enter' && newDocRoot.trim()) {
+                  if (!settings.docRoots.includes(newDocRoot.trim())) {
+                    setSettings({ ...settings, docRoots: [...(settings.docRoots || []), newDocRoot.trim()] });
+                  }
+                  setNewDocRoot('');
+                }
+              }}
+              placeholder="/Users/you/obsidian-vault"
+              className="flex-1 px-2 py-1.5 bg-[var(--bg-tertiary)] border border-[var(--border)] rounded text-xs text-[var(--text-primary)] font-mono focus:outline-none focus:border-[var(--accent)]"
+            />
+            <button
+              onClick={() => {
+                if (newDocRoot.trim() && !settings.docRoots.includes(newDocRoot.trim())) {
+                  setSettings({ ...settings, docRoots: [...(settings.docRoots || []), newDocRoot.trim()] });
+                }
+                setNewDocRoot('');
+              }}
+              className="text-[10px] px-3 py-1.5 bg-[var(--accent)] text-white rounded hover:opacity-90"
+            >
+              Add
+            </button>
+          </div>
+        </div>
+
         {/* Claude Path */}
         <div className="space-y-2">
           <label className="text-xs text-[var(--text-secondary)] font-semibold uppercase">

package/components/WebTerminal.tsx

@@ -11,6 +11,12 @@ export interface WebTerminalHandle {
   openSessionInTerminal: (sessionId: string, projectPath: string) => void;
 }
 
+export interface WebTerminalProps {
+  onActiveSession?: (sessionName: string | null) => void;
+  codeOpen?: boolean;
+  onToggleCode?: () => void;
+}
+
 // ─── Types ───────────────────────────────────────────────────
 
 interface TmuxSession {
@@ -156,7 +162,7 @@ let globalDragging = false;
 
 // ─── Main component ─────────────────────────────────────────
 
-const WebTerminal = forwardRef<WebTerminalHandle>(function WebTerminal(_props, ref) {
+const WebTerminal = forwardRef<WebTerminalHandle, WebTerminalProps>(function WebTerminal({ onActiveSession, codeOpen, onToggleCode }, ref) {
   const [tabs, setTabs] = useState<TabState[]>(() => {
     const tree = makeTerminal();
     return [{ id: nextId++, label: 'Terminal 1', tree, ratios: {}, activeId: firstTerminalId(tree) }];
@@ -208,6 +214,13 @@ const WebTerminal = forwardRef<WebTerminalHandle>(function WebTerminal(_props, r
 
   const activeTab = tabs.find(t => t.id === activeTabId) || tabs[0];
 
+  // Notify parent when active terminal session changes
+  useEffect(() => {
+    if (!onActiveSession || !activeTab) return;
+    const sessions = collectSessionNames(activeTab.tree);
+    onActiveSession(sessions[0] || null);
+  }, [activeTabId, activeTab, onActiveSession]);
+
   // ─── Imperative handle for parent ─────────────────────
 
   useImperativeHandle(ref, () => ({
@@ -478,6 +491,7 @@ const WebTerminal = forwardRef<WebTerminalHandle>(function WebTerminal(_props, r
 
         {/* Toolbar */}
         <div className="flex items-center gap-1 px-2 ml-auto">
+          <span className="text-[9px] text-gray-600 mr-2">Shift+drag to copy</span>
           <button onClick={() => onSplit('vertical')} className="text-[10px] px-2 py-0.5 text-gray-400 hover:text-white hover:bg-[#2a2a4a] rounded">
             Split Right
           </button>
@@ -500,11 +514,20 @@ const WebTerminal = forwardRef<WebTerminalHandle>(function WebTerminal(_props, r
               if (!activeTab) return;
               setRefreshKeys(prev => ({ ...prev, [activeTab.activeId]: (prev[activeTab.activeId] || 0) + 1 }));
             }}
-            className="text-[10px] px-2 py-0.5 text-gray-400 hover:text-white hover:bg-[#2a2a4a] rounded"
+            className="text-[11px] px-3 py-1 text-black bg-yellow-400 hover:bg-yellow-300 rounded font-bold"
             title="Refresh terminal (fix garbled display)"
           >
             Refresh
           </button>
+          {onToggleCode && (
+            <button
+              onClick={onToggleCode}
+              className={`text-[11px] px-3 py-1 rounded font-bold ${codeOpen ? 'text-white bg-red-500 hover:bg-red-400' : 'text-red-400 border border-red-500 hover:bg-red-500 hover:text-white'}`}
+              title={codeOpen ? 'Hide code panel' : 'Show code panel'}
+            >
+              Code
+            </button>
+          )}
           {activeTab && countTerminals(activeTab.tree) > 1 && (
             <button onClick={onClosePane} className="text-[10px] px-2 py-0.5 text-gray-400 hover:text-red-400 hover:bg-[#2a2a4a] rounded">
               Close Pane
@@ -828,7 +851,7 @@ const MemoTerminalPane = memo(function TerminalPane({
         background: '#1a1a2e',
         foreground: '#e0e0e0',
         cursor: '#7c5bf0',
-        selectionBackground: '#7c5bf044',
+        selectionBackground: '#7c5bf066',
         black: '#1a1a2e',
         red: '#ff6b6b',
         green: '#69db7c',
@@ -917,11 +940,11 @@ const MemoTerminalPane = memo(function TerminalPane({
       };
 
       ws.onmessage = (event) => {
-        if (disposed) return;
+        if (disposed || !initDone) return;
         try {
           const msg = JSON.parse(event.data);
           if (msg.type === 'output') {
-            term.write(msg.data);
+            try { term.write(msg.data); } catch {};
           } else if (msg.type === 'connected') {
             connectedSession = msg.sessionName;
             createRetries = 0;
@@ -988,8 +1011,8 @@ const MemoTerminalPane = memo(function TerminalPane({
       if (!el || el.offsetWidth === 0 || el.offsetHeight === 0) return;
       // Skip if container is inside a hidden tab (prevents wrong resize)
       if (el.closest('.hidden')) return;
-      // Skip unreasonably small sizes (layout transient)
-      if (el.offsetWidth < 50 || el.offsetHeight < 30) return;
+      // Skip unreasonably small sizes — xterm crashes if rows/cols go below 2
+      if (el.offsetWidth < 100 || el.offsetHeight < 50) return;
       const w = el.offsetWidth;
       const h = el.offsetHeight;
       if (w === lastW && h === lastH) return;
@@ -997,6 +1020,8 @@ const MemoTerminalPane = memo(function TerminalPane({
       lastH = h;
       try {
         fit.fit();
+        // Skip if xterm computed unreasonable dimensions
+        if (term.cols < 2 || term.rows < 2) return;
         if (ws?.readyState === WebSocket.OPEN) {
           ws.send(JSON.stringify({ type: 'resize', cols: term.cols, rows: term.rows }));
         }