feat: add persistent COO/Assist chat as left-side primary AI interface
- New CooChat component: streaming Gemini-backed advisor chat, message
bubbles, typing cursor animation, Shift+Enter for newlines
- New /api/projects/[projectId]/advisor streaming endpoint: builds a
COO system prompt from project context (name, description, vision,
repo), proxies Gemini SSE stream back to the client
- Restructured BuildHubInner layout:
Left (340px): CooChat — persistent across all Build sections
Inner nav (200px): Build pills + contextual items (apps, tree, surfaces)
Main area: File viewer for Code, Layouts content, Infra content
- AgentMode removed from main view — execution surfaces via COO delegation
Made-with: Cursor
This commit is contained in:
@@ -1,6 +1,6 @@
|
||||
"use client";
|
||||
|
||||
import { Suspense, useState, useEffect, useCallback } from "react";
|
||||
import { Suspense, useState, useEffect, useCallback, useRef } from "react";
|
||||
import { useParams, useSearchParams, useRouter } from "next/navigation";
|
||||
import { useSession } from "next-auth/react";
|
||||
import Link from "next/link";
|
||||
@@ -812,6 +812,181 @@ function TerminalPanel({ appName }: { appName: string }) {
|
||||
);
|
||||
}
|
||||
|
||||
// ── COO / Assist chat — persistent left-side advisor ─────────────────────────
|
||||
|
||||
interface CooMessage {
|
||||
id: string;
|
||||
role: "user" | "assistant";
|
||||
content: string;
|
||||
streaming?: boolean;
|
||||
}
|
||||
|
||||
const WELCOME: CooMessage = {
|
||||
id: "welcome",
|
||||
role: "assistant",
|
||||
content: "Hi. I'm your product COO — I know your codebase, your goals, and what's been built. What do you need?",
|
||||
};
|
||||
|
||||
function CooChat({ projectId, projectName }: { projectId: string; projectName: string }) {
|
||||
const [messages, setMessages] = useState<CooMessage[]>([WELCOME]);
|
||||
const [input, setInput] = useState("");
|
||||
const [loading, setLoading] = useState(false);
|
||||
const bottomRef = useRef<HTMLDivElement>(null);
|
||||
const textareaRef = useRef<HTMLTextAreaElement>(null);
|
||||
|
||||
useEffect(() => {
|
||||
bottomRef.current?.scrollIntoView({ behavior: "smooth" });
|
||||
}, [messages]);
|
||||
|
||||
const send = async () => {
|
||||
const text = input.trim();
|
||||
if (!text || loading) return;
|
||||
setInput("");
|
||||
|
||||
const userMsg: CooMessage = { id: Date.now().toString(), role: "user", content: text };
|
||||
const assistantId = (Date.now() + 1).toString();
|
||||
const assistantMsg: CooMessage = { id: assistantId, role: "assistant", content: "", streaming: true };
|
||||
|
||||
setMessages(prev => [...prev, userMsg, assistantMsg]);
|
||||
setLoading(true);
|
||||
|
||||
// Build history for the API (exclude welcome message, exclude the new blank assistant placeholder)
|
||||
const history = messages
|
||||
.filter(m => m.id !== "welcome" && m.content)
|
||||
.map(m => ({ role: m.role === "assistant" ? "model" as const : "user" as const, content: m.content }));
|
||||
|
||||
try {
|
||||
const res = await fetch(`/api/projects/${projectId}/advisor`, {
|
||||
method: "POST",
|
||||
headers: { "Content-Type": "application/json" },
|
||||
body: JSON.stringify({ message: text, history }),
|
||||
});
|
||||
|
||||
if (!res.ok || !res.body) {
|
||||
setMessages(prev => prev.map(m => m.id === assistantId
|
||||
? { ...m, content: "Something went wrong. Please try again.", streaming: false }
|
||||
: m));
|
||||
return;
|
||||
}
|
||||
|
||||
const reader = res.body.getReader();
|
||||
const decoder = new TextDecoder();
|
||||
|
||||
while (true) {
|
||||
const { done, value } = await reader.read();
|
||||
if (done) break;
|
||||
const chunk = decoder.decode(value, { stream: true });
|
||||
setMessages(prev => prev.map(m => m.id === assistantId
|
||||
? { ...m, content: m.content + chunk }
|
||||
: m));
|
||||
}
|
||||
|
||||
setMessages(prev => prev.map(m => m.id === assistantId ? { ...m, streaming: false } : m));
|
||||
} catch {
|
||||
setMessages(prev => prev.map(m => m.id === assistantId
|
||||
? { ...m, content: "Connection error. Please try again.", streaming: false }
|
||||
: m));
|
||||
} finally {
|
||||
setLoading(false);
|
||||
textareaRef.current?.focus();
|
||||
}
|
||||
};
|
||||
|
||||
return (
|
||||
<div style={{ flex: 1, display: "flex", flexDirection: "column", overflow: "hidden" }}>
|
||||
{/* Messages */}
|
||||
<div style={{ flex: 1, overflow: "auto", padding: "16px 16px 8px", display: "flex", flexDirection: "column", gap: 14 }}>
|
||||
{messages.map(msg => (
|
||||
<div key={msg.id} style={{
|
||||
display: "flex",
|
||||
flexDirection: msg.role === "user" ? "row-reverse" : "row",
|
||||
alignItems: "flex-end", gap: 8,
|
||||
}}>
|
||||
{msg.role === "assistant" && (
|
||||
<span style={{ width: 22, height: 22, borderRadius: 6, background: "#1a1a1a", display: "flex", alignItems: "center", justifyContent: "center", fontSize: "0.58rem", color: "#fff", flexShrink: 0 }}>◈</span>
|
||||
)}
|
||||
<div style={{
|
||||
maxWidth: "82%",
|
||||
padding: msg.role === "user" ? "8px 12px" : "0",
|
||||
background: msg.role === "user" ? "#f0ece4" : "transparent",
|
||||
borderRadius: msg.role === "user" ? 12 : 0,
|
||||
fontSize: "0.8rem",
|
||||
color: "#1a1a1a",
|
||||
fontFamily: "Outfit, sans-serif",
|
||||
lineHeight: 1.6,
|
||||
whiteSpace: "pre-wrap",
|
||||
wordBreak: "break-word",
|
||||
}}>
|
||||
{msg.content || (msg.streaming ? "" : "")}
|
||||
{msg.streaming && msg.content === "" && (
|
||||
<span style={{ display: "inline-flex", gap: 3, alignItems: "center" }}>
|
||||
{[0, 1, 2].map(i => (
|
||||
<span key={i} style={{
|
||||
width: 4, height: 4, borderRadius: "50%", background: "#b5b0a6", display: "inline-block",
|
||||
animation: `bounce 1.2s ${i * 0.2}s ease-in-out infinite`,
|
||||
}} />
|
||||
))}
|
||||
</span>
|
||||
)}
|
||||
{msg.streaming && msg.content !== "" && (
|
||||
<span style={{ display: "inline-block", width: 2, height: "0.9em", background: "#1a1a1a", marginLeft: 1, verticalAlign: "text-bottom", animation: "blink 1s step-end infinite" }} />
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
<div ref={bottomRef} />
|
||||
</div>
|
||||
|
||||
{/* Input */}
|
||||
<div style={{ flexShrink: 0, borderTop: "1px solid #e8e4dc", padding: "10px 12px", background: "#fff" }}>
|
||||
<div style={{ display: "flex", gap: 8, alignItems: "flex-end" }}>
|
||||
<textarea
|
||||
ref={textareaRef}
|
||||
value={input}
|
||||
onChange={e => setInput(e.target.value)}
|
||||
onKeyDown={e => { if (e.key === "Enter" && !e.shiftKey) { e.preventDefault(); send(); } }}
|
||||
placeholder={loading ? "Thinking…" : "Ask anything…"}
|
||||
disabled={loading}
|
||||
rows={2}
|
||||
style={{
|
||||
flex: 1, resize: "none", border: "1px solid #e8e4dc", borderRadius: 10,
|
||||
padding: "8px 11px", fontSize: "0.8rem", fontFamily: "Outfit, sans-serif",
|
||||
color: "#1a1a1a", outline: "none", background: loading ? "#faf8f5" : "#faf8f5",
|
||||
lineHeight: 1.5,
|
||||
}}
|
||||
/>
|
||||
<button
|
||||
onClick={send}
|
||||
disabled={!input.trim() || loading}
|
||||
style={{
|
||||
width: 34, height: 34, flexShrink: 0, border: "none", borderRadius: 9,
|
||||
background: input.trim() && !loading ? "#1a1a1a" : "#e8e4dc",
|
||||
color: input.trim() && !loading ? "#fff" : "#b5b0a6",
|
||||
cursor: input.trim() && !loading ? "pointer" : "default",
|
||||
display: "flex", alignItems: "center", justifyContent: "center",
|
||||
fontSize: "0.85rem", transition: "background 0.15s",
|
||||
}}
|
||||
>↑</button>
|
||||
</div>
|
||||
<div style={{ fontSize: "0.62rem", color: "#b5b0a6", marginTop: 5, fontFamily: "Outfit, sans-serif" }}>
|
||||
↵ to send · Shift+↵ new line
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<style>{`
|
||||
@keyframes bounce {
|
||||
0%, 60%, 100% { transform: translateY(0); }
|
||||
30% { transform: translateY(-4px); }
|
||||
}
|
||||
@keyframes blink {
|
||||
0%, 100% { opacity: 1; }
|
||||
50% { opacity: 0; }
|
||||
}
|
||||
`}</style>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
// ── File tree (lives in sidebar B) ───────────────────────────────────────────
|
||||
|
||||
function FileTree({ projectId, rootPath, selectedPath, onSelectFile }: {
|
||||
@@ -937,26 +1112,27 @@ function BuildHubInner() {
|
||||
const [activeSurfaceId, setActiveSurfaceId] = useState<string>(activeSurfaceParam);
|
||||
const [projectName, setProjectName] = useState<string>("");
|
||||
|
||||
// File viewer state — lifted so FileTree (B) and FileViewer (right) share it
|
||||
// File viewer state — shared between inner nav (tree) and viewer panel
|
||||
const [selectedFilePath, setSelectedFilePath] = useState<string | null>(null);
|
||||
const [fileContent, setFileContent] = useState<string | null>(null);
|
||||
const [fileLoading, setFileLoading] = useState(false);
|
||||
const [fileName, setFileName] = useState<string | null>(null);
|
||||
|
||||
useEffect(() => {
|
||||
fetch(`/api/projects/${projectId}/apps`).then(r => r.json()).then(d => setApps(d.apps ?? [])).catch(() => {});
|
||||
fetch(`/api/projects/${projectId}/apps`)
|
||||
.then(r => r.json())
|
||||
.then(d => {
|
||||
setApps(d.apps ?? []);
|
||||
if (d.projectName) setProjectName(d.projectName);
|
||||
}).catch(() => {});
|
||||
fetch(`/api/projects/${projectId}/design-surfaces`).then(r => r.json()).then(d => {
|
||||
const ids: string[] = d.surfaces ?? [];
|
||||
const themes: Record<string, string> = d.surfaceThemes ?? {};
|
||||
setSurfaces(ids.map(id => ({ id, label: SURFACE_LABELS[id] ?? id, lockedTheme: themes[id] })));
|
||||
if (!activeSurfaceId && ids.length > 0) setActiveSurfaceId(ids[0]);
|
||||
}).catch(() => {});
|
||||
// Best-effort project name fetch
|
||||
fetch(`/api/projects/${projectId}/apps`).then(r => r.json())
|
||||
.then(d => { if (d.projectName) setProjectName(d.projectName); }).catch(() => {});
|
||||
}, [projectId]); // eslint-disable-line react-hooks/exhaustive-deps
|
||||
|
||||
// Clear file selection when app changes
|
||||
useEffect(() => {
|
||||
setSelectedFilePath(null);
|
||||
setFileContent(null);
|
||||
@@ -986,129 +1162,119 @@ function BuildHubInner() {
|
||||
return (
|
||||
<div style={{ display: "flex", height: "100%", fontFamily: "Outfit, sans-serif", overflow: "hidden" }}>
|
||||
|
||||
{/* ── B: Sidebar — project header + build pills + nav + file tree ── */}
|
||||
<div style={{ width: 260, flexShrink: 0, borderRight: "1px solid #e8e4dc", background: "#faf8f5", display: "flex", flexDirection: "column", overflow: "hidden" }}>
|
||||
{/* ── Left: COO / Assist persistent chat ── */}
|
||||
<div style={{ width: 340, flexShrink: 0, borderRight: "1px solid #e8e4dc", background: "#fff", display: "flex", flexDirection: "column", overflow: "hidden" }}>
|
||||
|
||||
{/* Project header */}
|
||||
<div style={{ height: 48, flexShrink: 0, display: "flex", alignItems: "center", padding: "0 14px", borderBottom: "1px solid #e8e4dc", gap: 9 }}>
|
||||
<span style={{ width: 26, height: 26, borderRadius: 7, background: "#1a1a1a", display: "flex", alignItems: "center", justifyContent: "center", fontSize: "0.68rem", color: "#fff", flexShrink: 0, fontFamily: "Outfit, sans-serif" }}>◈</span>
|
||||
<span style={{ fontSize: "0.82rem", fontWeight: 600, color: "#1a1a1a", fontFamily: "Outfit, sans-serif", overflow: "hidden", textOverflow: "ellipsis", whiteSpace: "nowrap", flex: 1 }}>
|
||||
{projectName || workspace}
|
||||
</span>
|
||||
</div>
|
||||
|
||||
{/* Build section pills: Code | Layouts | Infra */}
|
||||
<div style={{ padding: "10px 12px 9px", flexShrink: 0, borderBottom: "1px solid #f0ece4" }}>
|
||||
<div style={{ fontSize: "0.57rem", fontWeight: 700, color: "#b5b0a6", letterSpacing: "0.1em", textTransform: "uppercase", marginBottom: 7, fontFamily: "Outfit, sans-serif" }}>Build</div>
|
||||
<div style={{ display: "flex", gap: 5 }}>
|
||||
{(["code", "layouts", "infrastructure"] as const).map(s => (
|
||||
<button key={s} onClick={() => setSection(s)} style={{
|
||||
padding: "4px 10px", border: "1px solid",
|
||||
borderRadius: 20, fontSize: "0.68rem", fontWeight: section === s ? 600 : 440,
|
||||
cursor: "pointer", fontFamily: "Outfit, sans-serif",
|
||||
background: section === s ? "#1a1a1a" : "transparent",
|
||||
color: section === s ? "#fff" : "#5a5550",
|
||||
borderColor: section === s ? "#1a1a1a" : "#e0dcd5",
|
||||
}}>
|
||||
{s === "code" ? "Code" : s === "layouts" ? "Layouts" : "Infra"}
|
||||
</button>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Code: app list + file tree */}
|
||||
{section === "code" && (
|
||||
<div style={{ flex: 1, display: "flex", flexDirection: "column", overflow: "hidden" }}>
|
||||
{/* App list */}
|
||||
<div style={{ flexShrink: 0 }}>
|
||||
<div style={NAV_GROUP_LABEL}>Apps</div>
|
||||
{apps.length > 0 ? apps.map(app => (
|
||||
<NavItem key={app.name} label={app.name} indent
|
||||
active={activeApp === app.name}
|
||||
onClick={() => navigate({ section: "code", app: app.name, root: app.path })}
|
||||
/>
|
||||
)) : (
|
||||
<div style={{ padding: "8px 22px", fontSize: "0.74rem", color: "#b5b0a6", fontFamily: "Outfit, sans-serif" }}>No apps yet</div>
|
||||
)}
|
||||
{/* Advisor header */}
|
||||
<div style={{ height: 48, flexShrink: 0, display: "flex", alignItems: "center", padding: "0 14px", borderBottom: "1px solid #e8e4dc", gap: 9, background: "#faf8f5" }}>
|
||||
<span style={{ width: 26, height: 26, borderRadius: 7, background: "#1a1a1a", display: "flex", alignItems: "center", justifyContent: "center", fontSize: "0.68rem", color: "#fff", flexShrink: 0 }}>◈</span>
|
||||
<div style={{ flex: 1, minWidth: 0 }}>
|
||||
<div style={{ fontSize: "0.78rem", fontWeight: 600, color: "#1a1a1a", fontFamily: "Outfit, sans-serif", overflow: "hidden", textOverflow: "ellipsis", whiteSpace: "nowrap" }}>
|
||||
{projectName || workspace}
|
||||
</div>
|
||||
|
||||
{/* File tree — appears below app list when an app is selected */}
|
||||
{activeApp && activeRoot && (
|
||||
<div style={{ flex: 1, display: "flex", flexDirection: "column", overflow: "hidden", borderTop: "1px solid #e8e4dc", marginTop: 6 }}>
|
||||
<div style={{ padding: "7px 12px 4px", flexShrink: 0, display: "flex", alignItems: "center", gap: 6 }}>
|
||||
<span style={{ fontSize: "0.57rem", fontWeight: 700, color: "#b5b0a6", letterSpacing: "0.1em", textTransform: "uppercase", fontFamily: "Outfit, sans-serif" }}>Files</span>
|
||||
<span style={{ fontSize: "0.65rem", color: "#a09a90", fontFamily: "IBM Plex Mono, monospace", overflow: "hidden", textOverflow: "ellipsis", whiteSpace: "nowrap" }}>{activeApp}</span>
|
||||
</div>
|
||||
<FileTree
|
||||
projectId={projectId}
|
||||
rootPath={activeRoot}
|
||||
selectedPath={selectedFilePath}
|
||||
onSelectFile={handleSelectFile}
|
||||
/>
|
||||
</div>
|
||||
)}
|
||||
<div style={{ fontSize: "0.6rem", color: "#a09a90", fontFamily: "Outfit, sans-serif", letterSpacing: "0.04em" }}>Assist · Your product COO</div>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{/* Layouts: surface list */}
|
||||
{section === "layouts" && (
|
||||
<div style={{ overflow: "auto", flex: 1 }}>
|
||||
<div style={NAV_GROUP_LABEL}>Surfaces</div>
|
||||
{surfaces.length > 0 ? surfaces.map(s => (
|
||||
<NavItem key={s.id} label={SURFACE_LABELS[s.id] ?? s.id} indent
|
||||
active={activeSurfaceId === s.id}
|
||||
onClick={() => { setActiveSurfaceId(s.id); navigate({ section: "layouts", surface: s.id }); }}
|
||||
/>
|
||||
)) : (
|
||||
<div style={{ padding: "8px 22px", fontSize: "0.74rem", color: "#b5b0a6", fontFamily: "Outfit, sans-serif" }}>Not configured</div>
|
||||
)}
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Infrastructure: item list */}
|
||||
{section === "infrastructure" && (
|
||||
<div style={{ overflow: "auto", flex: 1 }}>
|
||||
<div style={NAV_GROUP_LABEL}>Infrastructure</div>
|
||||
{INFRA_ITEMS.map(item => (
|
||||
<NavItem key={item.id} label={item.label} indent
|
||||
active={activeInfra === item.id}
|
||||
onClick={() => navigate({ section: "infrastructure", tab: item.id })}
|
||||
/>
|
||||
))}
|
||||
</div>
|
||||
)}
|
||||
<CooChat projectId={projectId} projectName={projectName || workspace} />
|
||||
</div>
|
||||
|
||||
{/* ── Content ── */}
|
||||
{/* ── Right: Build content ── */}
|
||||
<div style={{ flex: 1, display: "flex", overflow: "hidden", minWidth: 0 }}>
|
||||
|
||||
{/* Code: D (agent chat) + Right (file viewer) + F (terminal) */}
|
||||
{/* Inner nav — Build section switcher + contextual items */}
|
||||
<div style={{ width: 200, flexShrink: 0, borderRight: "1px solid #e8e4dc", background: "#faf8f5", display: "flex", flexDirection: "column", overflow: "hidden" }}>
|
||||
|
||||
{/* Build pills */}
|
||||
<div style={{ padding: "10px 12px 9px", flexShrink: 0, borderBottom: "1px solid #f0ece4" }}>
|
||||
<div style={{ fontSize: "0.57rem", fontWeight: 700, color: "#b5b0a6", letterSpacing: "0.1em", textTransform: "uppercase", marginBottom: 7, fontFamily: "Outfit, sans-serif" }}>Build</div>
|
||||
<div style={{ display: "flex", flexDirection: "column", gap: 3 }}>
|
||||
{(["code", "layouts", "infrastructure"] as const).map(s => (
|
||||
<button key={s} onClick={() => setSection(s)} style={{
|
||||
display: "flex", alignItems: "center", gap: 8,
|
||||
padding: "6px 10px", border: "none", borderRadius: 7,
|
||||
fontSize: "0.76rem", fontWeight: section === s ? 600 : 440,
|
||||
cursor: "pointer", fontFamily: "Outfit, sans-serif", textAlign: "left",
|
||||
background: section === s ? "#f0ece4" : "transparent",
|
||||
color: section === s ? "#1a1a1a" : "#5a5550",
|
||||
}}>
|
||||
<span style={{ fontSize: "0.65rem", opacity: 0.6 }}>
|
||||
{s === "code" ? "<>" : s === "layouts" ? "▢" : "⬡"}
|
||||
</span>
|
||||
{s === "code" ? "Code" : s === "layouts" ? "Layouts" : "Infrastructure"}
|
||||
</button>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Code: app list + file tree */}
|
||||
{section === "code" && (
|
||||
<div style={{ flex: 1, display: "flex", flexDirection: "column", overflow: "hidden" }}>
|
||||
<div style={{ flexShrink: 0 }}>
|
||||
<div style={NAV_GROUP_LABEL}>Apps</div>
|
||||
{apps.length > 0 ? apps.map(app => (
|
||||
<NavItem key={app.name} label={app.name} indent
|
||||
active={activeApp === app.name}
|
||||
onClick={() => navigate({ section: "code", app: app.name, root: app.path })}
|
||||
/>
|
||||
)) : (
|
||||
<div style={{ padding: "8px 22px", fontSize: "0.74rem", color: "#b5b0a6", fontFamily: "Outfit, sans-serif" }}>No apps yet</div>
|
||||
)}
|
||||
</div>
|
||||
{activeApp && activeRoot && (
|
||||
<div style={{ flex: 1, display: "flex", flexDirection: "column", overflow: "hidden", borderTop: "1px solid #e8e4dc", marginTop: 6 }}>
|
||||
<div style={{ padding: "7px 12px 4px", flexShrink: 0, display: "flex", alignItems: "center", gap: 6 }}>
|
||||
<span style={{ fontSize: "0.57rem", fontWeight: 700, color: "#b5b0a6", letterSpacing: "0.1em", textTransform: "uppercase", fontFamily: "Outfit, sans-serif" }}>Files</span>
|
||||
<span style={{ fontSize: "0.62rem", color: "#a09a90", fontFamily: "IBM Plex Mono, monospace", overflow: "hidden", textOverflow: "ellipsis", whiteSpace: "nowrap" }}>{activeApp}</span>
|
||||
</div>
|
||||
<FileTree projectId={projectId} rootPath={activeRoot} selectedPath={selectedFilePath} onSelectFile={handleSelectFile} />
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Layouts: surface list */}
|
||||
{section === "layouts" && (
|
||||
<div style={{ overflow: "auto", flex: 1 }}>
|
||||
<div style={NAV_GROUP_LABEL}>Surfaces</div>
|
||||
{surfaces.length > 0 ? surfaces.map(s => (
|
||||
<NavItem key={s.id} label={SURFACE_LABELS[s.id] ?? s.id} indent
|
||||
active={activeSurfaceId === s.id}
|
||||
onClick={() => { setActiveSurfaceId(s.id); navigate({ section: "layouts", surface: s.id }); }}
|
||||
/>
|
||||
)) : (
|
||||
<div style={{ padding: "8px 22px", fontSize: "0.74rem", color: "#b5b0a6", fontFamily: "Outfit, sans-serif" }}>Not configured</div>
|
||||
)}
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Infrastructure: item list */}
|
||||
{section === "infrastructure" && (
|
||||
<div style={{ overflow: "auto", flex: 1 }}>
|
||||
<div style={NAV_GROUP_LABEL}>Infrastructure</div>
|
||||
{INFRA_ITEMS.map(item => (
|
||||
<NavItem key={item.id} label={item.label} indent
|
||||
active={activeInfra === item.id}
|
||||
onClick={() => navigate({ section: "infrastructure", tab: item.id })}
|
||||
/>
|
||||
))}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{/* Main content panel */}
|
||||
{section === "code" && (
|
||||
<div style={{ flex: 1, display: "flex", flexDirection: "column", overflow: "hidden" }}>
|
||||
<div style={{ flex: 1, display: "flex", overflow: "hidden" }}>
|
||||
|
||||
{/* D: Agent chat — main content */}
|
||||
<div style={{ flex: 1, display: "flex", flexDirection: "column", overflow: "hidden", borderRight: "1px solid #e8e4dc", minWidth: 0 }}>
|
||||
<AgentMode projectId={projectId} appName={activeApp} appPath={activeRoot} />
|
||||
</div>
|
||||
|
||||
{/* Right: File viewer — code changes stream here */}
|
||||
<div style={{ width: 460, flexShrink: 0, display: "flex", flexDirection: "column", overflow: "hidden" }}>
|
||||
<FileViewer
|
||||
selectedPath={selectedFilePath}
|
||||
fileContent={fileContent}
|
||||
fileLoading={fileLoading}
|
||||
fileName={fileName}
|
||||
rootPath={activeRoot}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* F: Terminal strip */}
|
||||
<FileViewer
|
||||
selectedPath={selectedFilePath}
|
||||
fileContent={fileContent}
|
||||
fileLoading={fileLoading}
|
||||
fileName={fileName}
|
||||
rootPath={activeRoot}
|
||||
/>
|
||||
<TerminalPanel appName={activeApp} />
|
||||
</div>
|
||||
)}
|
||||
|
||||
{section === "layouts" && (
|
||||
<LayoutsContent surfaces={surfaces} projectId={projectId} workspace={workspace} activeSurfaceId={activeSurfaceId} onSelectSurface={id => { setActiveSurfaceId(id); navigate({ section: "layouts", surface: id }); }} />
|
||||
)}
|
||||
|
||||
Reference in New Issue
Block a user