groove-dev 0.27.139 → 0.27.141

package/node_modules/@groove-dev/gui/src/views/agents.jsx

@@ -10,7 +10,7 @@ import { RootNode } from '../components/agents/root-node';
 import { cn } from '../lib/cn';
 import { Button } from '../components/ui/button';
 import { Badge } from '../components/ui/badge';
-import { Plus, Users, UserPlus, Zap, X, Check, Rocket, Server, Monitor, Code2, TestTube, Shield, Pencil, Copy, Trash2, ChevronDown, ChevronLeft, ChevronRight, FolderOpen, Eye, Settings2, Search, GripVertical, Cloud, FileText, Database, Megaphone, Calculator, UserCheck, Headphones, BarChart3, Pen, Presentation, Globe, MessageCircle, Save, Layers, Box, HardDrive, LayoutGrid } from 'lucide-react';
+import { Plus, Users, UserPlus, Zap, X, Check, Rocket, Server, Monitor, Code2, TestTube, Shield, Pencil, Copy, Trash2, ChevronDown, ChevronLeft, ChevronRight, FolderOpen, Eye, Settings2, Search, GripVertical, Cloud, FileText, Database, Megaphone, Calculator, UserCheck, Headphones, BarChart3, Pen, Presentation, Globe, MessageCircle, Save, Layers, LayoutGrid, Activity, Gauge, Cpu } from 'lucide-react';
 import { PreviewWorkspace } from '../components/preview/preview-workspace';
 import { WorkspaceMode } from '../components/agents/workspace-mode';
 import { ContextMenu, ContextMenuTrigger, ContextMenuContent, ContextMenuItem, ContextMenuSeparator } from '../components/ui/context-menu';
@@ -1258,7 +1258,7 @@ function RecommendedTeamCard() {
   const [tsModel, setTsModel] = useState(teamLaunchConfig?.model || '');
   const [tsReasoning, setTsReasoning] = useState(teamLaunchConfig?.reasoningEffort ?? 50);
   const [tsTemp, setTsTemp] = useState(teamLaunchConfig?.temperature ?? 0.5);
-  const [tsMode, setTsMode] = useState(teamLaunchConfig?.mode || 'sandbox');
+  const [expandedAgent, setExpandedAgent] = useState(null);
 
   useEffect(() => {
     fetchProviders().then((list) => {
@@ -1283,6 +1283,15 @@ function RecommendedTeamCard() {
     setEditedAgents(next);
   }
 
+  function handleAgentField(i, updates) {
+    if (typeof updates === 'string') {
+      const [field, value] = [updates, arguments[2]];
+      setEditedAgents((prev) => (prev ?? agentEdits).map((a, idx) => idx === i ? { ...a, [field]: value } : a));
+    } else {
+      setEditedAgents((prev) => (prev ?? agentEdits).map((a, idx) => idx === i ? { ...a, ...updates } : a));
+    }
+  }
+
   function handleTsProviderChange(id) {
     setTsProvider(id);
     const p = providers.find((x) => x.id === id);
@@ -1298,7 +1307,6 @@ function RecommendedTeamCard() {
         ...(tsProvider && { provider: tsProvider, model: tsModel }),
         reasoningEffort: tsReasoning,
         ...(showTemp && { temperature: tsTemp }),
-        mode: tsMode,
       },
     });
     try {
@@ -1376,41 +1384,6 @@ function RecommendedTeamCard() {
                   formatValue={(v) => v.toFixed(2)}
                 />
               )}
-              {/* Build Mode */}
-              <div className="space-y-1">
-                <label className="text-2xs text-text-3 font-sans">Build Mode</label>
-                <div className="flex rounded-md bg-surface-4 border border-border-subtle p-0.5">
-                  <button
-                    onClick={() => setTsMode('sandbox')}
-                    className={cn(
-                      'flex-1 flex items-center justify-center gap-1.5 rounded px-2 py-1.5 text-xs font-sans transition-all cursor-pointer',
-                      tsMode === 'sandbox'
-                        ? 'bg-surface-2 text-text-0 font-semibold shadow-sm'
-                        : 'text-text-3 hover:text-text-1',
-                    )}
-                  >
-                    <Box size={11} />
-                    Sandbox
-                  </button>
-                  <button
-                    onClick={() => setTsMode('production')}
-                    className={cn(
-                      'flex-1 flex items-center justify-center gap-1.5 rounded px-2 py-1.5 text-xs font-sans transition-all cursor-pointer',
-                      tsMode === 'production'
-                        ? 'bg-surface-2 text-text-0 font-semibold shadow-sm'
-                        : 'text-text-3 hover:text-text-1',
-                    )}
-                  >
-                    <HardDrive size={11} />
-                    Production
-                  </button>
-                </div>
-                <p className="text-2xs text-text-4 font-sans">
-                  {tsMode === 'sandbox'
-                    ? 'Files live in a team directory, removable with the team'
-                    : 'Files live in the project directory, persist forever'}
-                </p>
-              </div>
             </div>
           )}
         </div>
@@ -1419,31 +1392,116 @@ function RecommendedTeamCard() {
           {agentEdits.map((a, i) => {
             const Icon = ROLE_ICONS[a.role] || Code2;
             const nameValid = !a.name || NAME_RE.test(a.name);
+            const isExpanded = expandedAgent === i;
+            const agentProvider = providers.find((p) => p.id === (a.provider || tsProvider));
+            const agentModels = (agentProvider?.models || []).filter((m) => m.type !== 'image' && !m.disabled);
             return (
-              <div key={i} className="flex items-center gap-2 px-2.5 py-1.5 rounded-md bg-surface-4 border border-border-subtle">
-                <Icon size={12} className="text-text-2 shrink-0" />
-                <input
-                  type="text"
-                  value={a.name}
-                  onChange={(e) => handleNameChange(i, e.target.value)}
-                  placeholder={a.role}
-                  className={cn(
-                    'flex-1 min-w-0 bg-transparent text-xs font-mono text-text-0 outline-none placeholder:text-text-4',
-                    !nameValid && 'text-red-400',
+              <div key={i} className="rounded-md bg-surface-4 border border-border-subtle overflow-hidden">
+                <div
+                  className="flex items-center gap-2 px-2.5 py-1.5 cursor-pointer hover:bg-surface-5/50 transition-colors"
+                  onClick={() => setExpandedAgent(isExpanded ? null : i)}
+                >
+                  <Icon size={12} className="text-text-2 shrink-0" />
+                  <input
+                    type="text"
+                    value={a.name}
+                    onChange={(e) => handleNameChange(i, e.target.value)}
+                    onClick={(e) => e.stopPropagation()}
+                    placeholder={a.role}
+                    className={cn(
+                      'flex-1 min-w-0 bg-transparent text-xs font-mono text-text-0 outline-none placeholder:text-text-4',
+                      !nameValid && 'text-red-400',
+                    )}
+                    maxLength={64}
+                    spellCheck={false}
+                  />
+                  {a.provider && a.provider !== tsProvider && (
+                    <span className="text-2xs text-accent font-mono shrink-0">{a.provider}</span>
                   )}
-                  maxLength={64}
-                  spellCheck={false}
-                />
-                {a.scope?.length > 0 && (
-                  <span className="text-2xs text-text-4 font-mono shrink-0 truncate max-w-[120px]">
-                    {a.scope[0]}{a.scope.length > 1 ? ` +${a.scope.length - 1}` : ''}
-                  </span>
+                  {a.scope?.length > 0 && (
+                    <span className="text-2xs text-text-4 font-mono shrink-0 truncate max-w-[120px]">
+                      {a.scope[0]}{a.scope.length > 1 ? ` +${a.scope.length - 1}` : ''}
+                    </span>
+                  )}
+                  <ChevronDown size={10} className={cn('text-text-4 shrink-0 transition-transform duration-200', !isExpanded && '-rotate-90')} />
+                </div>
+                {isExpanded && (
+                  <div className="px-2.5 pb-2.5 pt-1 space-y-2.5 border-t border-border-subtle">
+                    <div className="flex gap-2">
+                      <div className="flex-1 space-y-1">
+                        <label className="flex items-center gap-1 text-2xs text-text-3 font-sans"><Cpu size={10} />Provider</label>
+                        <Select value={a.provider || ''} onValueChange={(id) => {
+                          const p = providers.find((x) => x.id === id);
+                          const pModels = (p?.models || []).filter((m) => m.type !== 'image' && !m.disabled);
+                          handleAgentField(i, { provider: id, model: pModels[0]?.id || '' });
+                        }}>
+                          <SelectTrigger placeholder="Team default" className="bg-surface-3 h-7 text-xs" />
+                          <SelectContent>
+                            <SelectItem value="">Team default</SelectItem>
+                            {providers.map((p) => (
+                              <SelectItem key={p.id} value={p.id}>{p.displayName || p.name || p.id}</SelectItem>
+                            ))}
+                          </SelectContent>
+                        </Select>
+                      </div>
+                      <div className="flex-1 space-y-1">
+                        <label className="text-2xs text-text-3 font-sans">Model</label>
+                        <Select value={a.model || ''} onValueChange={(v) => handleAgentField(i, 'model', v)}>
+                          <SelectTrigger placeholder="Auto" className="bg-surface-3 h-7 text-xs" />
+                          <SelectContent>
+                            <SelectItem value="">Auto</SelectItem>
+                            {agentModels.map((m) => (
+                              <SelectItem key={m.id} value={m.id}>{m.name || m.id}</SelectItem>
+                            ))}
+                          </SelectContent>
+                        </Select>
+                      </div>
+                    </div>
+                    <div className="space-y-1">
+                      <label className="flex items-center gap-1 text-2xs text-text-3 font-sans"><Activity size={10} />Model Routing</label>
+                      <div className="flex bg-surface-3 rounded-md p-0.5 border border-border-subtle">
+                        {[{ value: 'fixed', label: 'Fixed' }, { value: 'auto', label: 'Auto' }, { value: 'auto-floor', label: 'Auto + Floor' }].map((opt) => (
+                          <button
+                            key={opt.value}
+                            onClick={() => handleAgentField(i, 'routingMode', opt.value)}
+                            className={cn(
+                              'flex-1 px-2 py-1 text-2xs font-semibold font-sans rounded transition-all cursor-pointer',
+                              (a.routingMode || 'auto') === opt.value
+                                ? 'bg-accent/15 text-accent shadow-sm'
+                                : 'text-text-3 hover:text-text-1',
+                            )}
+                          >
+                            {opt.label}
+                          </button>
+                        ))}
+                      </div>
+                    </div>
+                    <div className="space-y-1">
+                      <label className="flex items-center gap-1 text-2xs text-text-3 font-sans"><Gauge size={10} />Effort Level</label>
+                      <div className="flex bg-surface-3 rounded-md p-0.5 border border-border-subtle">
+                        {[{ value: 'min', label: 'Min' }, { value: 'low', label: 'Low' }, { value: 'default', label: 'Default' }, { value: 'high', label: 'High' }, { value: 'max', label: 'Max' }].map((opt) => (
+                          <button
+                            key={opt.value}
+                            onClick={() => handleAgentField(i, 'effort', opt.value)}
+                            className={cn(
+                              'flex-1 px-1.5 py-1 text-2xs font-semibold font-sans rounded transition-all cursor-pointer',
+                              (a.effort || 'default') === opt.value
+                                ? 'bg-accent/15 text-accent shadow-sm'
+                                : 'text-text-3 hover:text-text-1',
+                            )}
+                          >
+                            {opt.label}
+                          </button>
+                        ))}
+                      </div>
+                    </div>
+                  </div>
                 )}
               </div>
             );
           })}
 
-          {recommendedTeam.projectDir && tsMode === 'sandbox' && (
+          {recommendedTeam.projectDir && (
             <div className="flex items-center gap-1.5 text-2xs text-text-2 font-mono pt-0.5">
               <span className="text-text-4">Project:</span>
               <span className="text-accent">{recommendedTeam.projectDir}/</span>
@@ -1569,7 +1627,7 @@ export default function AgentsView() {
           <Tooltip content="Spawn agent" side="top">
             <button
               onClick={() => openDetail({ type: 'spawn' })}
-              className="flex items-center justify-center w-7 h-7 rounded border border-text-3/25 bg-surface-0/80 text-text-3 hover:text-accent hover:border-accent/40 hover:bg-accent/10 transition-colors cursor-pointer"
+              className="flex items-center justify-center w-8 h-8 rounded border border-text-3/20 bg-surface-2/50 text-text-3 hover:text-accent hover:border-accent/40 hover:bg-accent/10 transition-colors cursor-pointer"
             >
               <Plus size={15} />
             </button>
@@ -1594,7 +1652,7 @@ export default function AgentsView() {
                 saveRoleLayout(layout);
                 addToast('success', 'Layout saved', 'Future spawns will use these positions');
               }}
-              className="flex items-center justify-center w-7 h-7 rounded border border-text-3/25 bg-surface-0/80 text-text-3 hover:text-accent hover:border-accent/40 hover:bg-accent/10 transition-colors cursor-pointer"
+              className="flex items-center justify-center w-8 h-8 rounded border border-text-3/20 bg-surface-2/50 text-text-3 hover:text-accent hover:border-accent/40 hover:bg-accent/10 transition-colors cursor-pointer"
             >
               <LayoutGrid size={15} />
             </button>
@@ -1602,7 +1660,7 @@ export default function AgentsView() {
           <Tooltip content="Workspace" side="top">
             <button
               onClick={() => setWorkspaceMode(true)}
-              className="flex items-center justify-center w-7 h-7 rounded border border-text-3/25 bg-surface-0/80 text-text-3 hover:text-accent hover:border-accent/40 hover:bg-accent/10 transition-colors cursor-pointer"
+              className="flex items-center justify-center w-8 h-8 rounded border border-text-3/20 bg-surface-2/50 text-text-3 hover:text-accent hover:border-accent/40 hover:bg-accent/10 transition-colors cursor-pointer"
             >
               <Code2 size={15} />
             </button>
@@ -1628,7 +1686,7 @@ export default function AgentsView() {
                     }
                   }}
                   className={cn(
-                    'flex items-center justify-center w-7 h-7 rounded border bg-surface-0/80 transition-colors cursor-pointer',
+                    'flex items-center justify-center w-8 h-8 rounded border bg-surface-2/50 transition-colors cursor-pointer',
                     isActive
                       ? 'border-text-3/25 text-text-3 hover:text-info hover:border-info/40 hover:bg-info/10'
                       : 'border-text-4/25 text-text-4 hover:text-warning hover:border-warning/40 hover:bg-warning/10',

package/node_modules/@groove-dev/gui/src/views/editor.jsx

@@ -7,13 +7,7 @@ import { CodeEditor } from '../components/editor/code-editor';
 import { MediaViewer, isMediaFile } from '../components/editor/media-viewer';
 import { EditorStatusBar } from '../components/editor/editor-status-bar';
 import { GotoLine } from '../components/editor/goto-line';
-import { EditorToolbar } from '../components/editor/editor-toolbar';
-import { AiPanel } from '../components/editor/ai-panel';
-import { QuickSearch } from '../components/editor/quick-search';
-import { SelectionMenu } from '../components/editor/selection-menu';
-import { InlinePrompt } from '../components/editor/inline-prompt';
-import { DiffViewer } from '../components/agents/diff-viewer';
-import { CodeReview } from '../components/agents/code-review';
+import { Breadcrumbs } from '../components/editor/breadcrumbs';
 import { Code2, Eye, FileCode, PanelLeftOpen } from 'lucide-react';
 import { api } from '../lib/api';
 import { cn } from '../lib/cn';
@@ -34,11 +28,6 @@ export default function EditorView() {
   const saveFile = useGrooveStore((s) => s.saveFile);
   const sidebarWidth = useGrooveStore((s) => s.editorSidebarWidth);
   const setSidebarWidth = useGrooveStore((s) => s.setEditorSidebarWidth);
-  const viewMode = useGrooveStore((s) => s.editorViewMode);
-  const aiPanelOpen = useGrooveStore((s) => s.editorAiPanelOpen);
-  const aiPanelWidth = useGrooveStore((s) => s.editorAiPanelWidth);
-  const setAiPanelWidth = useGrooveStore((s) => s.setEditorAiPanelWidth);
-  const setQuickSearchOpen = useGrooveStore((s) => s.setEditorQuickSearchOpen);
 
   const projectDir = useGrooveStore((s) => s.projectDir);
   const [rootDir, setRootDir] = useState('');
@@ -47,17 +36,11 @@ export default function EditorView() {
   const [cursorPos, setCursorPos] = useState({ line: 1, col: 1 });
   const [showGotoLine, setShowGotoLine] = useState(false);
   const [sidebarCollapsed, setSidebarCollapsed] = useState(false);
-  const [selection, setSelection] = useState(null);
-  const [inlinePrompt, setInlinePrompt] = useState(null);
 
   const editorViewRef = useRef(null);
-  const editorContainerRef = useRef(null);
   const dragging = useRef(false);
   const startX = useRef(0);
   const startW = useRef(0);
-  const aiDragging = useRef(false);
-  const aiStartX = useRef(0);
-  const aiStartW = useRef(0);
 
   // Fetch root dir on mount and when project directory changes
   useEffect(() => {
@@ -79,72 +62,6 @@ export default function EditorView() {
     return () => document.removeEventListener('keydown', handleKeyDown);
   }, []);
 
-  // AI panel resize handler
-  const onAiPanelMouseDown = useCallback((e) => {
-    e.preventDefault();
-    aiDragging.current = true;
-    aiStartX.current = e.clientX;
-    aiStartW.current = aiPanelWidth;
-
-    function onMouseMove(e) {
-      if (!aiDragging.current) return;
-      const delta = aiStartX.current - e.clientX;
-      const newW = Math.min(Math.max(aiStartW.current + delta, 280), 600);
-      setAiPanelWidth(newW);
-    }
-
-    function onMouseUp() {
-      aiDragging.current = false;
-      document.removeEventListener('mousemove', onMouseMove);
-      document.removeEventListener('mouseup', onMouseUp);
-    }
-
-    document.addEventListener('mousemove', onMouseMove);
-    document.addEventListener('mouseup', onMouseUp);
-  }, [aiPanelWidth, setAiPanelWidth]);
-
-  // Track text selection in the code editor
-  const handleEditorMouseUp = useCallback(() => {
-    const view = editorViewRef.current;
-    if (!view) return;
-    const sel = view.state.selection.main;
-    if (sel.empty) { setSelection(null); return; }
-    const text = view.state.sliceDoc(sel.from, sel.to);
-    if (!text.trim()) { setSelection(null); return; }
-    const fromLine = view.state.doc.lineAt(sel.from);
-    const toLine = view.state.doc.lineAt(sel.to);
-    const coords = view.coordsAtPos(sel.to);
-    if (coords) {
-      setSelection({
-        x: Math.min(coords.left + 10, window.innerWidth - 220),
-        y: coords.bottom + 4,
-        lineStart: fromLine.number,
-        lineEnd: toLine.number,
-        selectedCode: text,
-      });
-    }
-  }, []);
-
-  // Right-click on a selection opens the AI selection menu
-  const handleEditorContextMenu = useCallback((e) => {
-    const view = editorViewRef.current;
-    if (!view) return;
-    const sel = view.state.selection.main;
-    if (sel.empty) return;
-    const text = view.state.sliceDoc(sel.from, sel.to);
-    if (!text.trim()) return;
-    e.preventDefault();
-    const fromLine = view.state.doc.lineAt(sel.from);
-    const toLine = view.state.doc.lineAt(sel.to);
-    setSelection({
-      x: Math.min(e.clientX, window.innerWidth - 220),
-      y: e.clientY + 4,
-      lineStart: fromLine.number,
-      lineEnd: toLine.number,
-      selectedCode: text,
-    });
-  }, []);
-
   // Sidebar resize handlers
   const onSidebarMouseDown = useCallback((e) => {
     e.preventDefault();
@@ -184,92 +101,6 @@ export default function EditorView() {
   const isMedia = activeFile && isMediaFile(activeFile);
   const isHtml = activeFile && isHtmlFile(activeFile);
 
-  const renderCodeContent = () => {
-    if (!activeFile) {
-      return (
-        <div className="w-full h-full flex items-center justify-center text-text-4 font-sans">
-          <div className="text-center space-y-2">
-            <Code2 size={32} className="mx-auto" />
-            <p className="text-sm">Open a file from the tree</p>
-          </div>
-        </div>
-      );
-    }
-
-    if (isMedia) return <MediaViewer path={activeFile} />;
-
-    if (isHtml) {
-      return (
-        <>
-          <div className="absolute top-0 right-4 z-10 flex items-center gap-0.5 mt-2 bg-surface-2 border border-border-subtle rounded-md p-0.5">
-            <button
-              onClick={() => setPreviewMode(false)}
-              className={cn(
-                'flex items-center gap-1.5 px-2.5 py-1 text-xs font-sans rounded cursor-pointer transition-colors',
-                !previewMode ? 'bg-surface-4 text-text-0 font-medium' : 'text-text-3 hover:text-text-1',
-              )}
-            >
-              <FileCode size={12} /> Code
-            </button>
-            <button
-              onClick={() => { setPreviewMode(true); setPreviewKey((k) => k + 1); }}
-              className={cn(
-                'flex items-center gap-1.5 px-2.5 py-1 text-xs font-sans rounded cursor-pointer transition-colors',
-                previewMode ? 'bg-surface-4 text-text-0 font-medium' : 'text-text-3 hover:text-text-1',
-              )}
-            >
-              <Eye size={12} /> Preview
-            </button>
-          </div>
-
-          {previewMode ? (
-            <iframe
-              key={previewKey}
-              src={`/api/files/raw?path=${encodeURIComponent(activeFile)}`}
-              className="w-full h-full border-0"
-              sandbox="allow-scripts allow-same-origin"
-              title="HTML Preview"
-            />
-          ) : (
-            file && (
-              <div className="w-full h-full" onMouseUp={handleEditorMouseUp} onContextMenu={handleEditorContextMenu}>
-                <CodeEditor
-                  content={file.content}
-                  language={file.language}
-                  filePath={activeFile}
-                  onChange={(content) => updateFileContent(activeFile, content)}
-                  onSave={() => saveFile(activeFile)}
-                  onCursorChange={setCursorPos}
-                  onCmdK={({ line, coords }) => setInlinePrompt({ line, coords })}
-                  viewRef={editorViewRef}
-                />
-              </div>
-            )
-          )}
-        </>
-      );
-    }
-
-    if (file) {
-      return (
-        <div className="w-full h-full" onMouseUp={handleEditorMouseUp} onContextMenu={handleEditorContextMenu}>
-          <CodeEditor
-            content={file.content}
-            language={file.language}
-            filePath={activeFile}
-            onChange={(content) => updateFileContent(activeFile, content)}
-            onSave={() => saveFile(activeFile)}
-            onCursorChange={setCursorPos}
-            onCmdK={({ line, coords }) => setInlinePrompt({ line, coords })}
-            viewRef={editorViewRef}
-          />
-        </div>
-      );
-    }
-
-    return null;
-  };
-
   return (
     <div className="flex h-full">
       {/* File tree sidebar */}
@@ -303,14 +134,11 @@ export default function EditorView() {
         {/* Tab bar */}
         <EditorTabs />
 
-        {/* Toolbar (replaces breadcrumbs) */}
-        <EditorToolbar
-          onCmdP={() => setQuickSearchOpen(true)}
-          onCmdK={() => setInlinePrompt({ line: cursorPos.line, coords: null })}
-        />
+        {/* Breadcrumbs */}
+        {activeFile && !isMedia && <Breadcrumbs path={activeFile} />}
 
         {/* Content */}
-        <div className="flex-1 relative min-h-0" ref={editorContainerRef}>
+        <div className="flex-1 relative min-h-0">
           {/* Go to line dialog */}
           {showGotoLine && (
             <GotoLine
@@ -320,62 +148,82 @@ export default function EditorView() {
             />
           )}
 
-          {/* View mode content */}
-          {viewMode === 'code' && renderCodeContent()}
-          {viewMode === 'diff' && activeFile && (
-            <DiffViewer filePath={activeFile} />
-          )}
-          {viewMode === 'diff' && !activeFile && (
-            <div className="w-full h-full flex items-center justify-center text-text-4 font-sans text-sm">
-              Open a file to see diff
+          {/* Editor / Media / Empty */}
+          {!activeFile && (
+            <div className="w-full h-full flex items-center justify-center text-text-4 font-sans">
+              <div className="text-center space-y-2">
+                <Code2 size={32} className="mx-auto" />
+                <p className="text-sm">Open a file from the tree</p>
+              </div>
             </div>
           )}
-          {viewMode === 'review' && <CodeReview />}
 
-          {/* Selection menu */}
-          {selection && viewMode === 'code' && (
-            <SelectionMenu
-              x={selection.x}
-              y={selection.y}
-              filePath={activeFile}
-              lineStart={selection.lineStart}
-              lineEnd={selection.lineEnd}
-              selectedCode={selection.selectedCode}
-              onClose={() => setSelection(null)}
-            />
+          {activeFile && isMedia && <MediaViewer path={activeFile} />}
+
+          {activeFile && !isMedia && isHtml && (
+            <>
+              {/* Code / Preview toggle for HTML files */}
+              <div className="absolute top-0 right-4 z-10 flex items-center gap-0.5 mt-2 bg-surface-2 border border-border-subtle rounded-md p-0.5">
+                <button
+                  onClick={() => setPreviewMode(false)}
+                  className={cn(
+                    'flex items-center gap-1.5 px-2.5 py-1 text-xs font-sans rounded cursor-pointer transition-colors',
+                    !previewMode ? 'bg-surface-4 text-text-0 font-medium' : 'text-text-3 hover:text-text-1',
+                  )}
+                >
+                  <FileCode size={12} /> Code
+                </button>
+                <button
+                  onClick={() => { setPreviewMode(true); setPreviewKey((k) => k + 1); }}
+                  className={cn(
+                    'flex items-center gap-1.5 px-2.5 py-1 text-xs font-sans rounded cursor-pointer transition-colors',
+                    previewMode ? 'bg-surface-4 text-text-0 font-medium' : 'text-text-3 hover:text-text-1',
+                  )}
+                >
+                  <Eye size={12} /> Preview
+                </button>
+              </div>
+
+              {previewMode ? (
+                <iframe
+                  key={previewKey}
+                  src={`/api/files/raw?path=${encodeURIComponent(activeFile)}`}
+                  className="w-full h-full border-0"
+                  sandbox="allow-scripts allow-same-origin"
+                  title="HTML Preview"
+                />
+              ) : (
+                file && (
+                  <CodeEditor
+                    content={file.content}
+                    language={file.language}
+                    onChange={(content) => updateFileContent(activeFile, content)}
+                    onSave={() => saveFile(activeFile)}
+                    onCursorChange={setCursorPos}
+                    viewRef={editorViewRef}
+                  />
+                )
+              )}
+            </>
           )}
 
-          {/* Inline prompt (Cmd+K) */}
-          {inlinePrompt && viewMode === 'code' && (
-            <InlinePrompt
-              line={inlinePrompt.line}
-              coords={inlinePrompt.coords}
-              filePath={activeFile}
-              onClose={() => setInlinePrompt(null)}
+          {activeFile && !isMedia && !isHtml && file && (
+            <CodeEditor
+              content={file.content}
+              language={file.language}
+              onChange={(content) => updateFileContent(activeFile, content)}
+              onSave={() => saveFile(activeFile)}
+              onCursorChange={setCursorPos}
+              viewRef={editorViewRef}
             />
           )}
         </div>
 
         {/* Status bar */}
-        {activeFile && !isMedia && viewMode === 'code' && (
+        {activeFile && !isMedia && (
           <EditorStatusBar cursorPos={cursorPos} language={file?.language} />
         )}
       </div>
-
-      {/* AI Panel */}
-      {aiPanelOpen && (
-        <div className="relative flex-shrink-0" style={{ width: aiPanelWidth }}>
-          {/* Resize handle */}
-          <div
-            className="absolute top-0 left-0 bottom-0 w-1 cursor-col-resize hover:bg-accent/30 transition-colors z-10"
-            onMouseDown={onAiPanelMouseDown}
-          />
-          <AiPanel />
-        </div>
-      )}
-
-      {/* Quick Search modal */}
-      <QuickSearch />
     </div>
   );
 }