@aion0/forge 0.1.0

package/components/ClaudeTerminal.tsx

@@ -0,0 +1,267 @@
+'use client';
+
+import { useState, useEffect, useRef } from 'react';
+
+interface ClaudeMessage {
+  type: 'system' | 'assistant' | 'result';
+  subtype?: string;
+  content: string;
+  tool?: string;
+  costUSD?: number;
+  sessionId?: string;
+  timestamp: string;
+}
+
+interface ClaudeProcess {
+  id: string;
+  projectName: string;
+  projectPath: string;
+  status: string;
+  conversationId?: string;
+}
+
+export default function ClaudeTerminal({
+  process: proc,
+  onKill,
+}: {
+  process: ClaudeProcess;
+  onKill: (id: string) => void;
+}) {
+  const [messages, setMessages] = useState<ClaudeMessage[]>([]);
+  const [input, setInput] = useState('');
+  const [isRunning, setIsRunning] = useState(false);
+  const [conversationId, setConversationId] = useState<string | undefined>(proc.conversationId);
+  const messagesEndRef = useRef<HTMLDivElement>(null);
+  const eventSourceRef = useRef<EventSource | null>(null);
+
+  // Connect SSE stream with auto-reconnect
+  useEffect(() => {
+    let cancelled = false;
+    let es: EventSource | null = null;
+    let reconnectTimer: ReturnType<typeof setTimeout> | null = null;
+
+    function connect() {
+      if (cancelled) return;
+      es = new EventSource(`/api/claude/${proc.id}/stream`);
+      eventSourceRef.current = es;
+
+      es.onmessage = (event) => {
+        try {
+          const msg: ClaudeMessage = JSON.parse(event.data);
+          setMessages(prev => {
+            // Deduplicate by timestamp+content on reconnect
+            if (prev.some(m => m.timestamp === msg.timestamp && m.content === msg.content)) {
+              return prev;
+            }
+            return [...prev, msg];
+          });
+
+          if (msg.sessionId) {
+            setConversationId(msg.sessionId);
+          }
+
+          if (msg.subtype === 'complete') {
+            setIsRunning(false);
+          }
+        } catch {}
+      };
+
+      es.onerror = () => {
+        es?.close();
+        eventSourceRef.current = null;
+        // Auto-reconnect after 2s
+        if (!cancelled) {
+          reconnectTimer = setTimeout(connect, 2000);
+        }
+      };
+    }
+
+    connect();
+
+    return () => {
+      cancelled = true;
+      if (reconnectTimer) clearTimeout(reconnectTimer);
+      es?.close();
+      eventSourceRef.current = null;
+    };
+  }, [proc.id]);
+
+  // Auto-scroll
+  useEffect(() => {
+    messagesEndRef.current?.scrollIntoView({ behavior: 'smooth' });
+  }, [messages]);
+
+  const sendMessage = async () => {
+    const text = input.trim();
+    if (!text || isRunning) return;
+
+    setInput('');
+    setIsRunning(true);
+
+    await fetch(`/api/claude/${proc.id}`, {
+      method: 'POST',
+      headers: { 'Content-Type': 'application/json' },
+      body: JSON.stringify({ type: 'message', content: text, conversationId }),
+    });
+  };
+
+  const handleKeyDown = (e: React.KeyboardEvent) => {
+    if (e.key === 'Enter' && !e.shiftKey) {
+      e.preventDefault();
+      sendMessage();
+    }
+  };
+
+  return (
+    <div className="flex flex-col h-full">
+      {/* Header */}
+      <div className="h-8 border-b border-[var(--border)] flex items-center justify-between px-3 shrink-0">
+        <div className="flex items-center gap-2">
+          <span className={`text-[10px] ${proc.status === 'running' || isRunning ? 'text-[var(--green)]' : 'text-[var(--text-secondary)]'}`}>●</span>
+          <span className="text-xs font-semibold">Claude Code</span>
+          <span className="text-[10px] text-[var(--text-secondary)]">{proc.projectName}</span>
+          {isRunning && <span className="text-[10px] text-[var(--accent)] animate-pulse">thinking...</span>}
+        </div>
+        <button
+          onClick={() => onKill(proc.id)}
+          className="text-[10px] px-2 py-0.5 text-[var(--red)] hover:bg-[var(--red)] hover:text-white rounded transition-colors"
+        >
+          Kill
+        </button>
+      </div>
+
+      {/* Messages */}
+      <div className="flex-1 overflow-y-auto p-3 space-y-2 font-mono text-xs">
+        {messages.length === 0 && (
+          <div className="text-center text-[var(--text-secondary)] py-8">
+            <p>Send a message to start working with Claude Code</p>
+            <p className="text-[10px] mt-1">Working in: {proc.projectPath}</p>
+          </div>
+        )}
+
+        {messages.map((msg, i) => (
+          <MessageBubble key={i} msg={msg} />
+        ))}
+        <div ref={messagesEndRef} />
+      </div>
+
+      {/* Input */}
+      <div className="border-t border-[var(--border)] p-3">
+        <div className="flex gap-2">
+          <textarea
+            value={input}
+            onChange={e => setInput(e.target.value)}
+            onKeyDown={handleKeyDown}
+            placeholder={isRunning ? 'Waiting for response...' : 'Send a message to Claude Code...'}
+            disabled={isRunning}
+            rows={2}
+            className="flex-1 px-3 py-2 bg-[var(--bg-tertiary)] border border-[var(--border)] rounded text-xs text-[var(--text-primary)] resize-none focus:outline-none focus:border-[var(--accent)] disabled:opacity-50"
+          />
+          <button
+            onClick={sendMessage}
+            disabled={isRunning || !input.trim()}
+            className="px-4 py-2 bg-[var(--accent)] text-white rounded text-xs hover:opacity-90 disabled:opacity-50 self-end"
+          >
+            Send
+          </button>
+        </div>
+      </div>
+    </div>
+  );
+}
+
+function MessageBubble({ msg }: { msg: ClaudeMessage }) {
+  // User input
+  if (msg.type === 'system' && msg.subtype === 'user_input') {
+    return (
+      <div className="flex justify-end">
+        <div className="max-w-[80%] px-3 py-2 bg-[var(--accent)] text-white rounded-lg rounded-br-sm">
+          <pre className="whitespace-pre-wrap break-words">{msg.content}</pre>
+        </div>
+      </div>
+    );
+  }
+
+  // System init — show model info subtly
+  if (msg.type === 'system' && msg.subtype === 'init') {
+    return (
+      <div className="text-center text-[10px] text-[var(--text-secondary)] py-1">
+        {msg.content}
+      </div>
+    );
+  }
+
+  // Error
+  if (msg.subtype === 'error') {
+    return (
+      <div className="px-3 py-2 bg-red-900/20 border border-red-800/30 rounded text-[var(--red)]">
+        <pre className="whitespace-pre-wrap break-words">{msg.content}</pre>
+      </div>
+    );
+  }
+
+  // Completion notice
+  if (msg.subtype === 'complete') {
+    return (
+      <div className="text-center text-[10px] text-[var(--text-secondary)] py-1">
+        {msg.content}
+        {msg.costUSD != null && ` · $${msg.costUSD.toFixed(4)}`}
+      </div>
+    );
+  }
+
+  // Tool use
+  if (msg.subtype === 'tool_use') {
+    return (
+      <div className="px-3 py-2 bg-[var(--bg-tertiary)] border border-[var(--border)] rounded">
+        <div className="flex items-center gap-2 mb-1">
+          <span className="text-[10px] px-1.5 py-0.5 bg-[var(--accent)]/20 text-[var(--accent)] rounded">
+            {msg.tool || 'tool'}
+          </span>
+        </div>
+        <pre className="whitespace-pre-wrap break-words text-[var(--text-secondary)] max-h-40 overflow-y-auto">
+          {formatToolContent(msg.content)}
+        </pre>
+      </div>
+    );
+  }
+
+  // Tool result
+  if (msg.subtype === 'tool_result') {
+    return (
+      <div className="px-3 py-2 bg-[var(--bg-tertiary)] border-l-2 border-[var(--accent)] rounded-r">
+        <pre className="whitespace-pre-wrap break-words text-[var(--text-secondary)] max-h-60 overflow-y-auto">
+          {formatToolContent(msg.content)}
+        </pre>
+      </div>
+    );
+  }
+
+  // Final result
+  if (msg.type === 'result') {
+    return (
+      <div className="px-3 py-2 bg-green-900/10 border border-green-800/20 rounded">
+        <pre className="whitespace-pre-wrap break-words">{msg.content}</pre>
+        {msg.costUSD != null && (
+          <div className="text-[10px] text-[var(--text-secondary)] mt-1">Cost: ${msg.costUSD.toFixed(4)}</div>
+        )}
+      </div>
+    );
+  }
+
+  // Regular assistant text
+  return (
+    <div className="px-3 py-2">
+      <pre className="whitespace-pre-wrap break-words text-[var(--text-primary)]">{msg.content}</pre>
+    </div>
+  );
+}
+
+function formatToolContent(content: string): string {
+  try {
+    const parsed = JSON.parse(content);
+    return JSON.stringify(parsed, null, 2);
+  } catch {
+    return content;
+  }
+}

package/components/Dashboard.tsx

@@ -0,0 +1,270 @@
+'use client';
+
+import { useState, useEffect, useCallback, useRef, lazy, Suspense } from 'react';
+import TaskBoard from './TaskBoard';
+import TaskDetail from './TaskDetail';
+import SessionView from './SessionView';
+import NewTaskModal from './NewTaskModal';
+import SettingsModal from './SettingsModal';
+import TunnelToggle from './TunnelToggle';
+import type { Task } from '@/src/types';
+import type { WebTerminalHandle } from './WebTerminal';
+
+const WebTerminal = lazy(() => import('./WebTerminal'));
+
+interface UsageSummary {
+  provider: string;
+  totalInput: number;
+  totalOutput: number;
+  totalCost: number;
+}
+
+interface ProviderInfo {
+  name: string;
+  displayName: string;
+  hasKey: boolean;
+  enabled: boolean;
+}
+
+interface ProjectInfo {
+  name: string;
+  path: string;
+  language: string | null;
+}
+
+export default function Dashboard({ user }: { user: any }) {
+  const [viewMode, setViewMode] = useState<'tasks' | 'sessions' | 'terminal'>('tasks');
+  const [tasks, setTasks] = useState<Task[]>([]);
+  const [activeTaskId, setActiveTaskId] = useState<string | null>(null);
+  const [showNewTask, setShowNewTask] = useState(false);
+  const [showSettings, setShowSettings] = useState(false);
+  const [usage, setUsage] = useState<UsageSummary[]>([]);
+  const [providers, setProviders] = useState<ProviderInfo[]>([]);
+  const [projects, setProjects] = useState<ProjectInfo[]>([]);
+  const terminalRef = useRef<WebTerminalHandle>(null);
+
+  const fetchData = useCallback(async () => {
+    const [tasksRes, statusRes, projectsRes] = await Promise.all([
+      fetch('/api/tasks'),
+      fetch('/api/status'),
+      fetch('/api/projects'),
+    ]);
+    const tasksData = await tasksRes.json();
+    const statusData = await statusRes.json();
+    const projectsData = await projectsRes.json();
+    setTasks(tasksData);
+    setProviders(statusData.providers);
+    setUsage(statusData.usage);
+    setProjects(projectsData);
+  }, []);
+
+  useEffect(() => {
+    fetchData();
+    const interval = setInterval(fetchData, 5000);
+    return () => clearInterval(interval);
+  }, [fetchData]);
+
+  const activeTask = tasks.find(t => t.id === activeTaskId);
+  const running = tasks.filter(t => t.status === 'running');
+  const queued = tasks.filter(t => t.status === 'queued');
+
+  return (
+    <div className="h-screen flex flex-col">
+      {/* Top bar */}
+      <header className="h-10 border-b border-[var(--border)] flex items-center justify-between px-4 shrink-0">
+        <div className="flex items-center gap-4">
+          <span className="text-sm font-bold text-[var(--accent)]">Forge</span>
+
+          {/* View mode toggle */}
+          <div className="flex bg-[var(--bg-tertiary)] rounded p-0.5">
+            <button
+              onClick={() => setViewMode('tasks')}
+              className={`text-[11px] px-2.5 py-0.5 rounded transition-colors ${
+                viewMode === 'tasks'
+                  ? 'bg-[var(--bg-secondary)] text-[var(--text-primary)] shadow-sm'
+                  : 'text-[var(--text-secondary)] hover:text-[var(--text-primary)]'
+              }`}
+            >
+              Tasks
+            </button>
+            <button
+              onClick={() => setViewMode('sessions')}
+              className={`text-[11px] px-2.5 py-0.5 rounded transition-colors ${
+                viewMode === 'sessions'
+                  ? 'bg-[var(--bg-secondary)] text-[var(--text-primary)] shadow-sm'
+                  : 'text-[var(--text-secondary)] hover:text-[var(--text-primary)]'
+              }`}
+            >
+              Sessions
+            </button>
+            <button
+              onClick={() => setViewMode('terminal')}
+              className={`text-[11px] px-2.5 py-0.5 rounded transition-colors ${
+                viewMode === 'terminal'
+                  ? 'bg-[var(--bg-secondary)] text-[var(--text-primary)] shadow-sm'
+                  : 'text-[var(--text-secondary)] hover:text-[var(--text-primary)]'
+              }`}
+            >
+              Terminal
+            </button>
+          </div>
+
+          {viewMode === 'tasks' && (
+            <span className="text-[10px] text-[var(--text-secondary)]">
+              {running.length} running · {queued.length} queued · {tasks.filter(t => t.status === 'done').length} done
+            </span>
+          )}
+        </div>
+        <div className="flex items-center gap-3">
+          {viewMode === 'tasks' && (
+            <button
+              onClick={() => setShowNewTask(true)}
+              className="text-xs px-3 py-1 bg-[var(--accent)] text-white rounded hover:opacity-90"
+            >
+              + New Task
+            </button>
+          )}
+          <TunnelToggle />
+          <button
+            onClick={() => setShowSettings(true)}
+            className="text-xs text-[var(--text-secondary)] hover:text-[var(--text-primary)]"
+          >
+            Settings
+          </button>
+          <span className="text-xs text-[var(--text-secondary)]">{user?.name || 'local'}</span>
+        </div>
+      </header>
+
+      {/* Main content */}
+      <div className="flex-1 flex min-h-0">
+        {viewMode === 'tasks' ? (
+          <>
+            {/* Left — Task list */}
+            <aside className="w-72 border-r border-[var(--border)] flex flex-col shrink-0">
+              <TaskBoard tasks={tasks} activeId={activeTaskId} onSelect={setActiveTaskId} onRefresh={fetchData} />
+            </aside>
+
+            {/* Center — Task detail / empty state */}
+            <main className="flex-1 flex flex-col min-w-0">
+              {activeTask ? (
+                <TaskDetail
+                  task={activeTask}
+                  onRefresh={fetchData}
+                  onFollowUp={async (data) => {
+                    const res = await fetch('/api/tasks', {
+                      method: 'POST',
+                      headers: { 'Content-Type': 'application/json' },
+                      body: JSON.stringify(data),
+                    });
+                    const newTask = await res.json();
+                    setActiveTaskId(newTask.id);
+                    fetchData();
+                  }}
+                />
+              ) : (
+                <div className="flex-1 flex items-center justify-center text-[var(--text-secondary)]">
+                  <div className="text-center space-y-2">
+                    <p className="text-lg">Select a task or create a new one</p>
+                    <p className="text-xs">Submit tasks for Claude Code to work on autonomously</p>
+                  </div>
+                </div>
+              )}
+            </main>
+
+            {/* Right — Status panel */}
+            <aside className="w-56 border-l border-[var(--border)] flex flex-col shrink-0 p-3 space-y-4">
+              {/* Providers */}
+              <div>
+                <h3 className="text-[10px] font-semibold text-[var(--text-secondary)] uppercase mb-2">Providers</h3>
+                <div className="space-y-1">
+                  {providers.map(p => (
+                    <div key={p.name} className="flex items-center justify-between text-xs">
+                      <span className={p.hasKey && p.enabled ? 'text-[var(--text-primary)]' : 'text-[var(--text-secondary)]'}>
+                        {p.displayName}
+                      </span>
+                      <span className={`text-[10px] ${p.hasKey && p.enabled ? 'text-[var(--green)]' : 'text-[var(--red)]'}`}>
+                        {p.hasKey && p.enabled ? '● active' : '○ off'}
+                      </span>
+                    </div>
+                  ))}
+                </div>
+              </div>
+
+              {/* Usage */}
+              {usage.length > 0 && (
+                <div>
+                  <h3 className="text-[10px] font-semibold text-[var(--text-secondary)] uppercase mb-2">Usage (30d)</h3>
+                  <div className="space-y-1">
+                    {usage.map((u, i) => (
+                      <div key={i} className="text-xs">
+                        <div className="flex justify-between">
+                          <span className="text-[var(--text-secondary)]">{u.provider}</span>
+                          <span className="text-[var(--text-primary)]">{((u.totalInput + u.totalOutput) / 1000).toFixed(0)}k tokens</span>
+                        </div>
+                      </div>
+                    ))}
+                  </div>
+                </div>
+              )}
+
+              {/* Running tasks */}
+              {running.length > 0 && (
+                <div>
+                  <h3 className="text-[10px] font-semibold text-[var(--text-secondary)] uppercase mb-2">Running</h3>
+                  <div className="space-y-1">
+                    {running.map(t => (
+                      <button
+                        key={t.id}
+                        onClick={() => { setViewMode('tasks'); setActiveTaskId(t.id); }}
+                        className="w-full text-left px-2 py-1 rounded text-xs hover:bg-[var(--bg-tertiary)]"
+                      >
+                        <span className="text-[var(--green)] text-[10px]">● </span>
+                        <span className="truncate">{t.projectName}</span>
+                      </button>
+                    ))}
+                  </div>
+                </div>
+              )}
+            </aside>
+          </>
+        ) : viewMode === 'sessions' ? (
+          <SessionView
+            projects={projects}
+            onOpenInTerminal={(sessionId, projectPath) => {
+              setViewMode('terminal');
+              setTimeout(() => {
+                terminalRef.current?.openSessionInTerminal(sessionId, projectPath);
+              }, 100);
+            }}
+          />
+        ) : null}
+
+        {/* Terminal — always mounted, hidden when not active to keep sessions alive */}
+        <div className={`flex-1 min-h-0 ${viewMode === 'terminal' ? '' : 'hidden'}`}>
+          <Suspense fallback={<div className="flex-1 flex items-center justify-center text-[var(--text-secondary)]">Loading terminal...</div>}>
+            <WebTerminal ref={terminalRef} />
+          </Suspense>
+        </div>
+      </div>
+
+      {showNewTask && (
+        <NewTaskModal
+          onClose={() => setShowNewTask(false)}
+          onCreate={async (data) => {
+            await fetch('/api/tasks', {
+              method: 'POST',
+              headers: { 'Content-Type': 'application/json' },
+              body: JSON.stringify(data),
+            });
+            setShowNewTask(false);
+            fetchData();
+          }}
+        />
+      )}
+
+      {showSettings && (
+        <SettingsModal onClose={() => { setShowSettings(false); fetchData(); }} />
+      )}
+    </div>
+  );
+}

package/components/MarkdownContent.tsx

@@ -0,0 +1,57 @@
+'use client';
+
+import Markdown from 'react-markdown';
+
+export default function MarkdownContent({ content }: { content: string }) {
+  return (
+    <Markdown
+      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>,
+        h3: ({ children }) => <h3 className="text-xs font-bold text-[var(--text-primary)] mt-2 mb-1">{children}</h3>,
+        p: ({ children }) => <p className="text-xs text-[var(--text-primary)] mb-1.5 leading-relaxed">{children}</p>,
+        ul: ({ children }) => <ul className="text-xs text-[var(--text-primary)] mb-1.5 ml-4 list-disc space-y-0.5">{children}</ul>,
+        ol: ({ children }) => <ol className="text-xs text-[var(--text-primary)] mb-1.5 ml-4 list-decimal space-y-0.5">{children}</ol>,
+        li: ({ children }) => <li className="leading-relaxed">{children}</li>,
+        strong: ({ children }) => <strong className="font-semibold text-[var(--text-primary)]">{children}</strong>,
+        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-');
+          if (isBlock) {
+            const lang = className?.replace('language-', '') || '';
+            return (
+              <div className="my-2 rounded border border-[var(--border)] overflow-hidden max-w-full">
+                {lang && (
+                  <div className="px-3 py-1 bg-[var(--bg-tertiary)] border-b border-[var(--border)] text-[9px] text-[var(--text-secondary)] font-mono">
+                    {lang}
+                  </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>
+                </pre>
+              </div>
+            );
+          }
+          return (
+            <code className="text-[11px] font-mono bg-[var(--bg-tertiary)] text-[var(--accent)] px-1 py-0.5 rounded">
+              {children}
+            </code>
+          );
+        },
+        pre: ({ children }) => <>{children}</>,
+        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>
+        ),
+        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>,
+      }}
+    >
+      {content}
+    </Markdown>
+  );
+}

package/components/NewSessionModal.tsx

@@ -0,0 +1,93 @@
+'use client';
+
+import { useState, useEffect } from 'react';
+import type { SessionTemplate } from '@/src/types';
+
+export default function NewSessionModal({
+  onClose,
+  onCreate,
+}: {
+  onClose: () => void;
+  onCreate: (data: { name: string; templateId: string }) => void;
+}) {
+  const [templates, setTemplates] = useState<SessionTemplate[]>([]);
+  const [selectedTemplate, setSelectedTemplate] = useState('');
+  const [name, setName] = useState('');
+
+  useEffect(() => {
+    fetch('/api/templates')
+      .then(r => r.json())
+      .then((t: SessionTemplate[]) => {
+        setTemplates(t);
+        if (t.length > 0) setSelectedTemplate(t[0].id);
+      });
+  }, []);
+
+  const handleCreate = () => {
+    if (!selectedTemplate) return;
+    const finalName = name || `${selectedTemplate}-${Date.now().toString(36)}`;
+    onCreate({ name: finalName, templateId: selectedTemplate });
+  };
+
+  return (
+    <div className="fixed inset-0 bg-black/50 flex items-center justify-center z-50" onClick={onClose}>
+      <div
+        className="bg-[var(--bg-secondary)] border border-[var(--border)] rounded-lg w-96 p-5 space-y-4"
+        onClick={e => e.stopPropagation()}
+      >
+        <h2 className="text-sm font-bold">New Session</h2>
+
+        {/* Template selection */}
+        <div className="space-y-2">
+          <label className="text-xs text-[var(--text-secondary)]">Template</label>
+          <div className="grid grid-cols-2 gap-2">
+            {templates.map(t => (
+              <button
+                key={t.id}
+                onClick={() => setSelectedTemplate(t.id)}
+                className={`p-2 rounded border text-left text-xs transition-colors ${
+                  selectedTemplate === t.id
+                    ? 'border-[var(--accent)] bg-[var(--bg-tertiary)]'
+                    : 'border-[var(--border)] hover:border-[var(--text-secondary)]'
+                }`}
+              >
+                <div className="font-medium">{t.ui?.icon} {t.name}</div>
+                <div className="text-[10px] text-[var(--text-secondary)] mt-0.5">
+                  {t.provider} · {t.memory.strategy}
+                </div>
+              </button>
+            ))}
+          </div>
+        </div>
+
+        {/* Name */}
+        <div className="space-y-1">
+          <label className="text-xs text-[var(--text-secondary)]">Session Name (optional)</label>
+          <input
+            value={name}
+            onChange={e => setName(e.target.value)}
+            placeholder={selectedTemplate || 'auto-generated'}
+            className="w-full px-3 py-2 bg-[var(--bg-tertiary)] border border-[var(--border)] rounded text-sm text-[var(--text-primary)] focus:outline-none focus:border-[var(--accent)]"
+          />
+        </div>
+
+        {/* Actions */}
+        <div className="flex justify-end gap-2">
+          <button
+            onClick={onClose}
+            className="px-3 py-1.5 text-xs text-[var(--text-secondary)] hover:text-[var(--text-primary)]"
+          >
+            Cancel
+          </button>
+          <button
+            onClick={handleCreate}
+            disabled={!selectedTemplate}
+            className="px-3 py-1.5 text-xs bg-[var(--accent)] text-white rounded hover:opacity-90 disabled:opacity-50"
+          >
+            Create
+          </button>
+        </div>
+      </div>
+    </div>
+  );
+}