feat(ui): apply Justine ink & parchment design system
- Map Justine tokens to shadcn CSS variables (--vibn-* aliases) - Switch fonts to Inter + Lora via next/font (IBM Plex Mono for code) - Base typography: body Inter, h1–h3 Lora; marketing hero + wordmark serif - Project shell and global chrome use semantic colors - Replace Outfit/Newsreader references across TSX inline styles Made-with: Cursor
This commit is contained in:
@@ -105,7 +105,7 @@ function TreeRow({ node, depth, selectedPath, onSelect, onToggle }: {
|
||||
const NAV_GROUP_LABEL: React.CSSProperties = {
|
||||
fontSize: "0.6rem", fontWeight: 700, color: "#b5b0a6",
|
||||
letterSpacing: "0.09em", textTransform: "uppercase",
|
||||
padding: "12px 12px 5px", fontFamily: "Outfit, sans-serif",
|
||||
padding: "12px 12px 5px", fontFamily: "var(--font-inter), ui-sans-serif, sans-serif",
|
||||
};
|
||||
|
||||
function NavItem({ label, active, onClick, indent = false }: { label: string; active: boolean; onClick: () => void; indent?: boolean }) {
|
||||
@@ -115,7 +115,7 @@ function NavItem({ label, active, onClick, indent = false }: { label: string; ac
|
||||
background: active ? "#f0ece4" : "transparent", border: "none", cursor: "pointer",
|
||||
padding: `5px 12px 5px ${indent ? 22 : 12}px`, borderRadius: 5,
|
||||
fontSize: "0.78rem", fontWeight: active ? 600 : 440,
|
||||
color: active ? "#1a1a1a" : "#5a5550", fontFamily: "Outfit, sans-serif",
|
||||
color: active ? "#1a1a1a" : "#5a5550", fontFamily: "var(--font-inter), ui-sans-serif, sans-serif",
|
||||
}}
|
||||
onMouseEnter={e => { if (!active) (e.currentTarget as HTMLElement).style.background = "#f6f4f0"; }}
|
||||
onMouseLeave={e => { if (!active) (e.currentTarget as HTMLElement).style.background = "transparent"; }}
|
||||
@@ -156,8 +156,8 @@ function InfraContent({ tab, projectId, workspace }: { tab: string; projectId: s
|
||||
return (
|
||||
<div style={{ flex: 1, display: "flex", flexDirection: "column" }}>
|
||||
<div style={{ padding: "20px 28px 0", display: "flex", alignItems: "center", justifyContent: "space-between" }}>
|
||||
<div style={{ fontSize: "0.68rem", fontWeight: 700, color: "#a09a90", letterSpacing: "0.08em", textTransform: "uppercase", fontFamily: "Outfit, sans-serif" }}>{tab}</div>
|
||||
<Link href={`${base}?tab=${tab}`} style={{ fontSize: "0.72rem", color: "#a09a90", textDecoration: "none", fontFamily: "Outfit, sans-serif" }}>Open full view →</Link>
|
||||
<div style={{ fontSize: "0.68rem", fontWeight: 700, color: "#a09a90", letterSpacing: "0.08em", textTransform: "uppercase", fontFamily: "var(--font-inter), ui-sans-serif, sans-serif" }}>{tab}</div>
|
||||
<Link href={`${base}?tab=${tab}`} style={{ fontSize: "0.72rem", color: "#a09a90", textDecoration: "none", fontFamily: "var(--font-inter), ui-sans-serif, sans-serif" }}>Open full view →</Link>
|
||||
</div>
|
||||
{d && <Placeholder icon={d.icon} title={d.title} desc={d.desc} />}
|
||||
</div>
|
||||
@@ -179,8 +179,8 @@ function LayoutsContent({ surfaces, projectId, workspace, activeSurfaceId, onSel
|
||||
return (
|
||||
<div style={{ flex: 1, display: "flex", flexDirection: "column", padding: "24px 28px", gap: 20 }}>
|
||||
<div style={{ display: "flex", alignItems: "center", justifyContent: "space-between" }}>
|
||||
<div style={{ fontSize: "0.68rem", fontWeight: 700, color: "#a09a90", letterSpacing: "0.08em", textTransform: "uppercase", fontFamily: "Outfit, sans-serif" }}>Layouts</div>
|
||||
<Link href={`/${workspace}/project/${projectId}/design?surface=${active?.id ?? ""}`} style={{ fontSize: "0.72rem", color: "#a09a90", textDecoration: "none", fontFamily: "Outfit, sans-serif" }}>Edit in Design →</Link>
|
||||
<div style={{ fontSize: "0.68rem", fontWeight: 700, color: "#a09a90", letterSpacing: "0.08em", textTransform: "uppercase", fontFamily: "var(--font-inter), ui-sans-serif, sans-serif" }}>Layouts</div>
|
||||
<Link href={`/${workspace}/project/${projectId}/design?surface=${active?.id ?? ""}`} style={{ fontSize: "0.72rem", color: "#a09a90", textDecoration: "none", fontFamily: "var(--font-inter), ui-sans-serif, sans-serif" }}>Edit in Design →</Link>
|
||||
</div>
|
||||
<div style={{ display: "flex", gap: 14, flexWrap: "wrap" }}>
|
||||
{surfaces.map(s => (
|
||||
@@ -191,18 +191,18 @@ function LayoutsContent({ surfaces, projectId, workspace, activeSurfaceId, onSel
|
||||
minWidth: 180, flex: "1 1 180px", maxWidth: 240,
|
||||
transition: "border-color 0.1s",
|
||||
}}>
|
||||
<div style={{ fontSize: "0.85rem", fontWeight: 600, color: "#1a1a1a", fontFamily: "Outfit, sans-serif", marginBottom: 4 }}>
|
||||
<div style={{ fontSize: "0.85rem", fontWeight: 600, color: "#1a1a1a", fontFamily: "var(--font-inter), ui-sans-serif, sans-serif", marginBottom: 4 }}>
|
||||
{SURFACE_LABELS[s.id] ?? s.id}
|
||||
</div>
|
||||
{s.lockedTheme ? (
|
||||
<div style={{ fontSize: "0.72rem", color: "#6b6560", fontFamily: "Outfit, sans-serif" }}>Theme: {s.lockedTheme}</div>
|
||||
<div style={{ fontSize: "0.72rem", color: "#6b6560", fontFamily: "var(--font-inter), ui-sans-serif, sans-serif" }}>Theme: {s.lockedTheme}</div>
|
||||
) : (
|
||||
<div style={{ fontSize: "0.72rem", color: "#b5b0a6", fontFamily: "Outfit, sans-serif", fontStyle: "italic" }}>Not configured</div>
|
||||
<div style={{ fontSize: "0.72rem", color: "#b5b0a6", fontFamily: "var(--font-inter), ui-sans-serif, sans-serif", fontStyle: "italic" }}>Not configured</div>
|
||||
)}
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
<div style={{ fontSize: "0.75rem", color: "#b5b0a6", fontFamily: "Outfit, sans-serif" }}>
|
||||
<div style={{ fontSize: "0.75rem", color: "#b5b0a6", fontFamily: "var(--font-inter), ui-sans-serif, sans-serif" }}>
|
||||
Click a surface to select it, then open the Design editor to configure themes, fonts, and components.
|
||||
</div>
|
||||
</div>
|
||||
@@ -507,8 +507,8 @@ function AgentMode({ projectId, appName, appPath }: { projectId: string; appName
|
||||
if (!appName) {
|
||||
return (
|
||||
<div style={{ flex: 1, display: "flex", alignItems: "center", justifyContent: "center", flexDirection: "column", gap: 10, padding: 40, textAlign: "center" }}>
|
||||
<div style={{ fontSize: "0.88rem", fontWeight: 600, color: "#1a1a1a", fontFamily: "Outfit, sans-serif" }}>Select an app first</div>
|
||||
<div style={{ fontSize: "0.78rem", color: "#a09a90", fontFamily: "Outfit, sans-serif" }}>Choose an app from the left nav to run agent tasks against it.</div>
|
||||
<div style={{ fontSize: "0.88rem", fontWeight: 600, color: "#1a1a1a", fontFamily: "var(--font-inter), ui-sans-serif, sans-serif" }}>Select an app first</div>
|
||||
<div style={{ fontSize: "0.78rem", color: "#a09a90", fontFamily: "var(--font-inter), ui-sans-serif, sans-serif" }}>Choose an app from the left nav to run agent tasks against it.</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -517,11 +517,11 @@ function AgentMode({ projectId, appName, appPath }: { projectId: string; appName
|
||||
<div style={{ flex: 1, display: "flex", flexDirection: "column", overflow: "hidden" }}>
|
||||
{/* Horizontal sessions strip */}
|
||||
<div style={{ flexShrink: 0, height: 38, borderBottom: "1px solid #e8e4dc", background: "#faf8f5", display: "flex", alignItems: "center", gap: 8, padding: "0 16px", overflowX: "auto" }}>
|
||||
<span style={{ fontSize: "0.6rem", fontWeight: 700, color: "#b5b0a6", letterSpacing: "0.09em", textTransform: "uppercase", whiteSpace: "nowrap", fontFamily: "Outfit, sans-serif" }}>Sessions</span>
|
||||
<span style={{ fontSize: "0.6rem", fontWeight: 700, color: "#b5b0a6", letterSpacing: "0.09em", textTransform: "uppercase", whiteSpace: "nowrap", fontFamily: "var(--font-inter), ui-sans-serif, sans-serif" }}>Sessions</span>
|
||||
<span style={{ width: 1, height: 14, background: "#e0dcd5", flexShrink: 0 }} />
|
||||
{loadingSessions && <span style={{ fontSize: "0.72rem", color: "#b5b0a6", fontFamily: "Outfit, sans-serif" }}>Loading…</span>}
|
||||
{loadingSessions && <span style={{ fontSize: "0.72rem", color: "#b5b0a6", fontFamily: "var(--font-inter), ui-sans-serif, sans-serif" }}>Loading…</span>}
|
||||
{!loadingSessions && sessions.length === 0 && (
|
||||
<span style={{ fontSize: "0.72rem", color: "#b5b0a6", fontFamily: "Outfit, sans-serif", whiteSpace: "nowrap" }}>No sessions yet — run your first task below</span>
|
||||
<span style={{ fontSize: "0.72rem", color: "#b5b0a6", fontFamily: "var(--font-inter), ui-sans-serif, sans-serif", whiteSpace: "nowrap" }}>No sessions yet — run your first task below</span>
|
||||
)}
|
||||
{sessions.map(s => (
|
||||
<button key={s.id} onClick={() => { setActiveSessionId(s.id); setActiveSession(s); }} style={{
|
||||
@@ -530,7 +530,7 @@ function AgentMode({ projectId, appName, appPath }: { projectId: string; appName
|
||||
color: activeSessionId === s.id ? "#fff" : "#5a5550",
|
||||
fontSize: "0.68rem", cursor: "pointer", whiteSpace: "nowrap",
|
||||
display: "flex", alignItems: "center", gap: 5,
|
||||
fontFamily: "Outfit, sans-serif", flexShrink: 0,
|
||||
fontFamily: "var(--font-inter), ui-sans-serif, sans-serif", flexShrink: 0,
|
||||
}}>
|
||||
<span style={{ width: 5, height: 5, borderRadius: "50%", background: activeSessionId === s.id ? "#fff" : (STATUS_COLORS[s.status] ?? "#a09a90"), display: "inline-block", flexShrink: 0 }} />
|
||||
{s.task.length > 30 ? s.task.slice(0, 30) + "…" : s.task}
|
||||
@@ -540,7 +540,7 @@ function AgentMode({ projectId, appName, appPath }: { projectId: string; appName
|
||||
<button onClick={() => { setActiveSession(null); setActiveSessionId(null); setTask(""); }} style={{
|
||||
marginLeft: "auto", padding: "3px 10px", border: "1px solid #e0dcd5", borderRadius: 20,
|
||||
background: "transparent", color: "#a09a90", fontSize: "0.68rem", cursor: "pointer",
|
||||
fontFamily: "Outfit, sans-serif", whiteSpace: "nowrap", flexShrink: 0,
|
||||
fontFamily: "var(--font-inter), ui-sans-serif, sans-serif", whiteSpace: "nowrap", flexShrink: 0,
|
||||
}}>+ New</button>
|
||||
)}
|
||||
</div>
|
||||
@@ -553,14 +553,14 @@ function AgentMode({ projectId, appName, appPath }: { projectId: string; appName
|
||||
{/* Session header */}
|
||||
<div style={{ padding: "12px 20px", borderBottom: "1px solid #e8e4dc", background: "#fff", display: "flex", alignItems: "center", gap: 12, flexShrink: 0 }}>
|
||||
<span style={{ width: 8, height: 8, borderRadius: "50%", background: STATUS_COLORS[activeSession.status], flexShrink: 0, display: "inline-block" }} />
|
||||
<span style={{ fontSize: "0.8rem", fontWeight: 600, color: "#1a1a1a", fontFamily: "Outfit, sans-serif", flex: 1, overflow: "hidden", textOverflow: "ellipsis", whiteSpace: "nowrap" }}>{activeSession.task}</span>
|
||||
<span style={{ fontSize: "0.8rem", fontWeight: 600, color: "#1a1a1a", fontFamily: "var(--font-inter), ui-sans-serif, sans-serif", flex: 1, overflow: "hidden", textOverflow: "ellipsis", whiteSpace: "nowrap" }}>{activeSession.task}</span>
|
||||
{activeSession.started_at && (
|
||||
<span style={{ fontSize: "0.7rem", color: "#a09a90", fontFamily: "Outfit, sans-serif", whiteSpace: "nowrap" }}>
|
||||
<span style={{ fontSize: "0.7rem", color: "#a09a90", fontFamily: "var(--font-inter), ui-sans-serif, sans-serif", whiteSpace: "nowrap" }}>
|
||||
{["running", "pending"].includes(activeSession.status) ? `${elapsed(activeSession.started_at)} elapsed` : elapsed(activeSession.started_at)}
|
||||
</span>
|
||||
)}
|
||||
{["running", "pending"].includes(activeSession.status) && (
|
||||
<button onClick={handleStop} style={{ padding: "4px 12px", background: "#fee2e2", color: "#c62828", border: "1px solid #fca5a5", borderRadius: 5, fontSize: "0.72rem", cursor: "pointer", fontFamily: "Outfit, sans-serif", whiteSpace: "nowrap" }}>
|
||||
<button onClick={handleStop} style={{ padding: "4px 12px", background: "#fee2e2", color: "#c62828", border: "1px solid #fca5a5", borderRadius: 5, fontSize: "0.72rem", cursor: "pointer", fontFamily: "var(--font-inter), ui-sans-serif, sans-serif", whiteSpace: "nowrap" }}>
|
||||
Stop
|
||||
</button>
|
||||
)}
|
||||
@@ -596,7 +596,7 @@ function AgentMode({ projectId, appName, appPath }: { projectId: string; appName
|
||||
<div style={{ borderTop: "1px solid #e8e4dc", background: "#fff", padding: "12px 20px", flexShrink: 0 }}>
|
||||
{showFollowUp ? (
|
||||
<div style={{ display: "flex", flexDirection: "column", gap: 8 }}>
|
||||
<div style={{ fontSize: "0.72rem", color: "#6b6560", fontFamily: "Outfit, sans-serif" }}>
|
||||
<div style={{ fontSize: "0.72rem", color: "#6b6560", fontFamily: "var(--font-inter), ui-sans-serif, sans-serif" }}>
|
||||
Add a follow-up instruction (optional) then retry:
|
||||
</div>
|
||||
<div style={{ display: "flex", gap: 8, alignItems: "flex-end" }}>
|
||||
@@ -607,34 +607,34 @@ function AgentMode({ projectId, appName, appPath }: { projectId: string; appName
|
||||
onKeyDown={e => { if (e.key === "Enter" && (e.metaKey || e.ctrlKey)) handleRetry(followUp); if (e.key === "Escape") setShowFollowUp(false); }}
|
||||
placeholder="e.g. Also update the TypeScript types, or just leave blank to retry as-is…"
|
||||
rows={2}
|
||||
style={{ flex: 1, resize: "none", border: "1px solid #e8e4dc", borderRadius: 7, padding: "8px 11px", fontSize: "0.78rem", fontFamily: "Outfit, sans-serif", outline: "none", background: "#faf8f5" }}
|
||||
style={{ flex: 1, resize: "none", border: "1px solid #e8e4dc", borderRadius: 7, padding: "8px 11px", fontSize: "0.78rem", fontFamily: "var(--font-inter), ui-sans-serif, sans-serif", outline: "none", background: "#faf8f5" }}
|
||||
/>
|
||||
<div style={{ display: "flex", flexDirection: "column", gap: 6 }}>
|
||||
<button onClick={() => handleRetry(followUp)} disabled={retrying}
|
||||
style={{ padding: "8px 14px", background: "#1a1a1a", color: "#fff", border: "none", borderRadius: 7, fontSize: "0.75rem", fontWeight: 600, cursor: "pointer", fontFamily: "Outfit, sans-serif", whiteSpace: "nowrap" }}>
|
||||
style={{ padding: "8px 14px", background: "#1a1a1a", color: "#fff", border: "none", borderRadius: 7, fontSize: "0.75rem", fontWeight: 600, cursor: "pointer", fontFamily: "var(--font-inter), ui-sans-serif, sans-serif", whiteSpace: "nowrap" }}>
|
||||
{retrying ? "Retrying…" : "Retry"}
|
||||
</button>
|
||||
<button onClick={() => setShowFollowUp(false)}
|
||||
style={{ padding: "6px 14px", background: "transparent", color: "#a09a90", border: "1px solid #e8e4dc", borderRadius: 7, fontSize: "0.73rem", cursor: "pointer", fontFamily: "Outfit, sans-serif" }}>
|
||||
style={{ padding: "6px 14px", background: "transparent", color: "#a09a90", border: "1px solid #e8e4dc", borderRadius: 7, fontSize: "0.73rem", cursor: "pointer", fontFamily: "var(--font-inter), ui-sans-serif, sans-serif" }}>
|
||||
Cancel
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
<div style={{ fontSize: "0.63rem", color: "#b5b0a6", fontFamily: "Outfit, sans-serif" }}>
|
||||
<div style={{ fontSize: "0.63rem", color: "#b5b0a6", fontFamily: "var(--font-inter), ui-sans-serif, sans-serif" }}>
|
||||
⌘↵ to retry · Esc to cancel · Same session, fresh run
|
||||
</div>
|
||||
</div>
|
||||
) : (
|
||||
<div style={{ display: "flex", gap: 8, alignItems: "center" }}>
|
||||
<div style={{ fontSize: "0.75rem", color: activeSession.status === "failed" ? "#c62828" : "#a09a90", fontFamily: "Outfit, sans-serif", flex: 1 }}>
|
||||
<div style={{ fontSize: "0.75rem", color: activeSession.status === "failed" ? "#c62828" : "#a09a90", fontFamily: "var(--font-inter), ui-sans-serif, sans-serif", flex: 1 }}>
|
||||
{activeSession.status === "failed" ? "Session failed — retry without losing context" : "Session stopped"}
|
||||
</div>
|
||||
<button onClick={() => handleRetry()} disabled={retrying}
|
||||
style={{ padding: "7px 14px", background: "#fef9f0", color: "#92400e", border: "1px solid #fde68a", borderRadius: 7, fontSize: "0.75rem", fontWeight: 600, cursor: "pointer", fontFamily: "Outfit, sans-serif", whiteSpace: "nowrap" }}>
|
||||
style={{ padding: "7px 14px", background: "#fef9f0", color: "#92400e", border: "1px solid #fde68a", borderRadius: 7, fontSize: "0.75rem", fontWeight: 600, cursor: "pointer", fontFamily: "var(--font-inter), ui-sans-serif, sans-serif", whiteSpace: "nowrap" }}>
|
||||
{retrying ? "Retrying…" : "↺ Retry"}
|
||||
</button>
|
||||
<button onClick={() => setShowFollowUp(true)}
|
||||
style={{ padding: "7px 14px", background: "#f0ece4", color: "#1a1a1a", border: "1px solid #e8e4dc", borderRadius: 7, fontSize: "0.75rem", cursor: "pointer", fontFamily: "Outfit, sans-serif", whiteSpace: "nowrap" }}>
|
||||
style={{ padding: "7px 14px", background: "#f0ece4", color: "#1a1a1a", border: "1px solid #e8e4dc", borderRadius: 7, fontSize: "0.75rem", cursor: "pointer", fontFamily: "var(--font-inter), ui-sans-serif, sans-serif", whiteSpace: "nowrap" }}>
|
||||
Follow up…
|
||||
</button>
|
||||
</div>
|
||||
@@ -645,7 +645,7 @@ function AgentMode({ projectId, appName, appPath }: { projectId: string; appName
|
||||
{/* Changed files */}
|
||||
{activeSession.changed_files.length > 0 && (
|
||||
<div style={{ borderTop: "1px solid #e8e4dc", background: "#fff", padding: "12px 20px", flexShrink: 0 }}>
|
||||
<div style={{ fontSize: "0.65rem", fontWeight: 700, color: "#a09a90", letterSpacing: "0.08em", textTransform: "uppercase", fontFamily: "Outfit, sans-serif", marginBottom: 8 }}>Changed Files</div>
|
||||
<div style={{ fontSize: "0.65rem", fontWeight: 700, color: "#a09a90", letterSpacing: "0.08em", textTransform: "uppercase", fontFamily: "var(--font-inter), ui-sans-serif, sans-serif", marginBottom: 8 }}>Changed Files</div>
|
||||
<div style={{ display: "flex", flexWrap: "wrap", gap: 6 }}>
|
||||
{activeSession.changed_files.map((f, i) => (
|
||||
<div key={i} style={{ display: "flex", alignItems: "center", gap: 5, background: "#faf8f5", border: "1px solid #e8e4dc", borderRadius: 5, padding: "3px 8px" }}>
|
||||
@@ -655,7 +655,7 @@ function AgentMode({ projectId, appName, appPath }: { projectId: string; appName
|
||||
))}
|
||||
</div>
|
||||
{activeSession.status === "approved" && (
|
||||
<div style={{ marginTop: 8, fontSize: "0.73rem", color: "#1b5e20", fontFamily: "Outfit, sans-serif" }}>
|
||||
<div style={{ marginTop: 8, fontSize: "0.73rem", color: "#1b5e20", fontFamily: "var(--font-inter), ui-sans-serif, sans-serif" }}>
|
||||
✓ Auto-committed — these changes are live.
|
||||
</div>
|
||||
)}
|
||||
@@ -664,7 +664,7 @@ function AgentMode({ projectId, appName, appPath }: { projectId: string; appName
|
||||
{approveResult && (
|
||||
<div style={{
|
||||
marginBottom: 10, padding: "8px 12px", borderRadius: 6, fontSize: "0.74rem",
|
||||
fontFamily: "Outfit, sans-serif",
|
||||
fontFamily: "var(--font-inter), ui-sans-serif, sans-serif",
|
||||
background: approveResult.startsWith("✓") ? "#f0fdf4" : "#fef2f2",
|
||||
color: approveResult.startsWith("✓") ? "#166534" : "#991b1b",
|
||||
border: `1px solid ${approveResult.startsWith("✓") ? "#bbf7d0" : "#fecaca"}`,
|
||||
@@ -682,7 +682,7 @@ function AgentMode({ projectId, appName, appPath }: { projectId: string; appName
|
||||
placeholder="Commit message…"
|
||||
style={{
|
||||
width: "100%", padding: "8px 11px", border: "1px solid #e8e4dc",
|
||||
borderRadius: 6, fontSize: "0.78rem", fontFamily: "Outfit, sans-serif",
|
||||
borderRadius: 6, fontSize: "0.78rem", fontFamily: "var(--font-inter), ui-sans-serif, sans-serif",
|
||||
outline: "none", background: "#faf8f5", boxSizing: "border-box",
|
||||
}}
|
||||
/>
|
||||
@@ -694,16 +694,16 @@ function AgentMode({ projectId, appName, appPath }: { projectId: string; appName
|
||||
padding: "7px 16px", background: approveMsg.trim() ? "#1a1a1a" : "#e8e4dc",
|
||||
color: approveMsg.trim() ? "#fff" : "#a09a90", border: "none", borderRadius: 7,
|
||||
fontSize: "0.75rem", fontWeight: 600, cursor: approveMsg.trim() ? "pointer" : "default",
|
||||
fontFamily: "Outfit, sans-serif",
|
||||
fontFamily: "var(--font-inter), ui-sans-serif, sans-serif",
|
||||
}}
|
||||
>
|
||||
{approving ? "Committing…" : "Commit & push"}
|
||||
</button>
|
||||
<button onClick={() => setShowApproveInput(false)} style={{ padding: "7px 12px", background: "transparent", color: "#a09a90", border: "1px solid #e8e4dc", borderRadius: 7, fontSize: "0.75rem", cursor: "pointer", fontFamily: "Outfit, sans-serif" }}>
|
||||
<button onClick={() => setShowApproveInput(false)} style={{ padding: "7px 12px", background: "transparent", color: "#a09a90", border: "1px solid #e8e4dc", borderRadius: 7, fontSize: "0.75rem", cursor: "pointer", fontFamily: "var(--font-inter), ui-sans-serif, sans-serif" }}>
|
||||
Cancel
|
||||
</button>
|
||||
</div>
|
||||
<div style={{ fontSize: "0.65rem", color: "#b5b0a6", fontFamily: "Outfit, sans-serif" }}>
|
||||
<div style={{ fontSize: "0.65rem", color: "#b5b0a6", fontFamily: "var(--font-inter), ui-sans-serif, sans-serif" }}>
|
||||
Enter to commit · Esc to cancel · Coolify will auto-deploy after push
|
||||
</div>
|
||||
</div>
|
||||
@@ -711,14 +711,14 @@ function AgentMode({ projectId, appName, appPath }: { projectId: string; appName
|
||||
<div style={{ display: "flex", gap: 8 }}>
|
||||
<button
|
||||
onClick={() => { setShowApproveInput(true); setApproveMsg(`agent: ${activeSession.task.slice(0, 60)}`); }}
|
||||
style={{ padding: "7px 16px", background: "#1a1a1a", color: "#fff", border: "none", borderRadius: 7, fontSize: "0.75rem", fontWeight: 600, cursor: "pointer", fontFamily: "Outfit, sans-serif" }}
|
||||
style={{ padding: "7px 16px", background: "#1a1a1a", color: "#fff", border: "none", borderRadius: 7, fontSize: "0.75rem", fontWeight: 600, cursor: "pointer", fontFamily: "var(--font-inter), ui-sans-serif, sans-serif" }}
|
||||
>
|
||||
Approve & commit
|
||||
</button>
|
||||
<a
|
||||
href="https://theia.vibnai.com"
|
||||
target="_blank" rel="noreferrer"
|
||||
style={{ padding: "7px 16px", background: "#f0ece4", color: "#1a1a1a", border: "1px solid #e8e4dc", borderRadius: 7, fontSize: "0.75rem", cursor: "pointer", fontFamily: "Outfit, sans-serif", textDecoration: "none", display: "inline-flex", alignItems: "center" }}
|
||||
style={{ padding: "7px 16px", background: "#f0ece4", color: "#1a1a1a", border: "1px solid #e8e4dc", borderRadius: 7, fontSize: "0.75rem", cursor: "pointer", fontFamily: "var(--font-inter), ui-sans-serif, sans-serif", textDecoration: "none", display: "inline-flex", alignItems: "center" }}
|
||||
>
|
||||
Open in Theia →
|
||||
</a>
|
||||
@@ -730,7 +730,7 @@ function AgentMode({ projectId, appName, appPath }: { projectId: string; appName
|
||||
)}
|
||||
</>
|
||||
) : (
|
||||
<div style={{ flex: 1, display: "flex", alignItems: "center", justifyContent: "center", color: "#b5b0a6", fontSize: "0.8rem", fontFamily: "Outfit, sans-serif" }}>
|
||||
<div style={{ flex: 1, display: "flex", alignItems: "center", justifyContent: "center", color: "#b5b0a6", fontSize: "0.8rem", fontFamily: "var(--font-inter), ui-sans-serif, sans-serif" }}>
|
||||
Select a session or run a new task
|
||||
</div>
|
||||
)}
|
||||
@@ -745,7 +745,7 @@ function AgentMode({ projectId, appName, appPath }: { projectId: string; appName
|
||||
<div style={{ borderTop: "1px solid #e8e4dc", background: "#fff", padding: "12px 16px", flexShrink: 0 }}>
|
||||
<div style={{ display: "flex", alignItems: "center", gap: 10 }}>
|
||||
<span style={{ width: 7, height: 7, borderRadius: "50%", background: "#3d5afe", flexShrink: 0, display: "inline-block" }} />
|
||||
<span style={{ fontSize: "0.78rem", color: "#6b6560", fontFamily: "Outfit, sans-serif", flex: 1 }}>
|
||||
<span style={{ fontSize: "0.78rem", color: "#6b6560", fontFamily: "var(--font-inter), ui-sans-serif, sans-serif", flex: 1 }}>
|
||||
Agent is working — wait for it to finish, or stop it above.
|
||||
</span>
|
||||
</div>
|
||||
@@ -758,15 +758,15 @@ function AgentMode({ projectId, appName, appPath }: { projectId: string; appName
|
||||
return (
|
||||
<div style={{ borderTop: "1px solid #e8e4dc", background: "#fff", padding: "12px 16px", flexShrink: 0 }}>
|
||||
<div style={{ display: "flex", gap: 8, alignItems: "center" }}>
|
||||
<span style={{ fontSize: "0.75rem", color: "#1b5e20", fontFamily: "Outfit, sans-serif", flex: 1 }}>
|
||||
<span style={{ fontSize: "0.75rem", color: "#1b5e20", fontFamily: "var(--font-inter), ui-sans-serif, sans-serif", flex: 1 }}>
|
||||
✓ Shipped — changes committed and deployment triggered automatically.
|
||||
</span>
|
||||
<button onClick={() => setShowFollowUp(true)}
|
||||
style={{ padding: "7px 14px", background: "#f0ece4", color: "#1a1a1a", border: "1px solid #e8e4dc", borderRadius: 7, fontSize: "0.75rem", fontWeight: 600, cursor: "pointer", fontFamily: "Outfit, sans-serif", whiteSpace: "nowrap" }}>
|
||||
style={{ padding: "7px 14px", background: "#f0ece4", color: "#1a1a1a", border: "1px solid #e8e4dc", borderRadius: 7, fontSize: "0.75rem", fontWeight: 600, cursor: "pointer", fontFamily: "var(--font-inter), ui-sans-serif, sans-serif", whiteSpace: "nowrap" }}>
|
||||
+ Follow up
|
||||
</button>
|
||||
<button onClick={() => { setActiveSession(null); setActiveSessionId(null); setTask(""); }}
|
||||
style={{ padding: "7px 14px", background: "transparent", color: "#a09a90", border: "1px solid #e8e4dc", borderRadius: 7, fontSize: "0.75rem", cursor: "pointer", fontFamily: "Outfit, sans-serif", whiteSpace: "nowrap" }}>
|
||||
style={{ padding: "7px 14px", background: "transparent", color: "#a09a90", border: "1px solid #e8e4dc", borderRadius: 7, fontSize: "0.75rem", cursor: "pointer", fontFamily: "var(--font-inter), ui-sans-serif, sans-serif", whiteSpace: "nowrap" }}>
|
||||
New task
|
||||
</button>
|
||||
</div>
|
||||
@@ -782,10 +782,10 @@ function AgentMode({ projectId, appName, appPath }: { projectId: string; appName
|
||||
}}
|
||||
placeholder="What should the agent build next?"
|
||||
rows={2}
|
||||
style={{ flex: 1, resize: "none", border: "1px solid #e8e4dc", borderRadius: 7, padding: "8px 11px", fontSize: "0.78rem", fontFamily: "Outfit, sans-serif", outline: "none", background: "#faf8f5" }}
|
||||
style={{ flex: 1, resize: "none", border: "1px solid #e8e4dc", borderRadius: 7, padding: "8px 11px", fontSize: "0.78rem", fontFamily: "var(--font-inter), ui-sans-serif, sans-serif", outline: "none", background: "#faf8f5" }}
|
||||
/>
|
||||
<button onClick={() => { handleRun(); setShowFollowUp(false); }} disabled={submitting || !task.trim()}
|
||||
style={{ padding: "9px 14px", background: task.trim() ? "#1a1a1a" : "#e8e4dc", color: task.trim() ? "#fff" : "#a09a90", border: "none", borderRadius: 7, fontSize: "0.75rem", fontWeight: 600, cursor: task.trim() ? "pointer" : "default", fontFamily: "Outfit, sans-serif" }}>
|
||||
style={{ padding: "9px 14px", background: task.trim() ? "#1a1a1a" : "#e8e4dc", color: task.trim() ? "#fff" : "#a09a90", border: "none", borderRadius: 7, fontSize: "0.75rem", fontWeight: 600, cursor: task.trim() ? "pointer" : "default", fontFamily: "var(--font-inter), ui-sans-serif, sans-serif" }}>
|
||||
{submitting ? "Starting…" : "Run"}
|
||||
</button>
|
||||
</div>
|
||||
@@ -800,7 +800,7 @@ function AgentMode({ projectId, appName, appPath }: { projectId: string; appName
|
||||
<div style={{ borderTop: "1px solid #e8e4dc", background: "#fff", padding: "12px 16px", flexShrink: 0 }}>
|
||||
{showFollowUp ? (
|
||||
<div style={{ display: "flex", flexDirection: "column", gap: 8 }}>
|
||||
<div style={{ fontSize: "0.72rem", color: "#6b6560", fontFamily: "Outfit, sans-serif" }}>
|
||||
<div style={{ fontSize: "0.72rem", color: "#6b6560", fontFamily: "var(--font-inter), ui-sans-serif, sans-serif" }}>
|
||||
Describe the next thing to build (continues from this session's context):
|
||||
</div>
|
||||
<div style={{ display: "flex", gap: 8, alignItems: "flex-end" }}>
|
||||
@@ -816,36 +816,36 @@ function AgentMode({ projectId, appName, appPath }: { projectId: string; appName
|
||||
rows={2}
|
||||
style={{
|
||||
flex: 1, resize: "none", border: "1px solid #e8e4dc", borderRadius: 7,
|
||||
padding: "8px 11px", fontSize: "0.78rem", fontFamily: "Outfit, sans-serif",
|
||||
padding: "8px 11px", fontSize: "0.78rem", fontFamily: "var(--font-inter), ui-sans-serif, sans-serif",
|
||||
outline: "none", background: "#faf8f5",
|
||||
}}
|
||||
/>
|
||||
<div style={{ display: "flex", flexDirection: "column", gap: 6 }}>
|
||||
<button onClick={() => { handleRun(); setShowFollowUp(false); }} disabled={submitting || !task.trim()}
|
||||
style={{ padding: "8px 14px", background: task.trim() ? "#1a1a1a" : "#e8e4dc", color: task.trim() ? "#fff" : "#a09a90", border: "none", borderRadius: 7, fontSize: "0.75rem", fontWeight: 600, cursor: task.trim() ? "pointer" : "default", fontFamily: "Outfit, sans-serif", whiteSpace: "nowrap" }}>
|
||||
style={{ padding: "8px 14px", background: task.trim() ? "#1a1a1a" : "#e8e4dc", color: task.trim() ? "#fff" : "#a09a90", border: "none", borderRadius: 7, fontSize: "0.75rem", fontWeight: 600, cursor: task.trim() ? "pointer" : "default", fontFamily: "var(--font-inter), ui-sans-serif, sans-serif", whiteSpace: "nowrap" }}>
|
||||
{submitting ? "Starting…" : "Run"}
|
||||
</button>
|
||||
<button onClick={() => { setShowFollowUp(false); setTask(""); }}
|
||||
style={{ padding: "6px 14px", background: "transparent", color: "#a09a90", border: "1px solid #e8e4dc", borderRadius: 7, fontSize: "0.73rem", cursor: "pointer", fontFamily: "Outfit, sans-serif" }}>
|
||||
style={{ padding: "6px 14px", background: "transparent", color: "#a09a90", border: "1px solid #e8e4dc", borderRadius: 7, fontSize: "0.73rem", cursor: "pointer", fontFamily: "var(--font-inter), ui-sans-serif, sans-serif" }}>
|
||||
Cancel
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
<div style={{ fontSize: "0.63rem", color: "#b5b0a6", fontFamily: "Outfit, sans-serif" }}>
|
||||
<div style={{ fontSize: "0.63rem", color: "#b5b0a6", fontFamily: "var(--font-inter), ui-sans-serif, sans-serif" }}>
|
||||
⌘↵ to run · Esc to cancel · Starts a new session for this task
|
||||
</div>
|
||||
</div>
|
||||
) : (
|
||||
<div style={{ display: "flex", gap: 8, alignItems: "center" }}>
|
||||
<span style={{ fontSize: "0.75rem", color: "#2e7d32", fontFamily: "Outfit, sans-serif", flex: 1 }}>
|
||||
<span style={{ fontSize: "0.75rem", color: "#2e7d32", fontFamily: "var(--font-inter), ui-sans-serif, sans-serif", flex: 1 }}>
|
||||
✓ Done — approve the changes above, or continue building.
|
||||
</span>
|
||||
<button onClick={() => setShowFollowUp(true)}
|
||||
style={{ padding: "7px 14px", background: "#f0ece4", color: "#1a1a1a", border: "1px solid #e8e4dc", borderRadius: 7, fontSize: "0.75rem", fontWeight: 600, cursor: "pointer", fontFamily: "Outfit, sans-serif", whiteSpace: "nowrap" }}>
|
||||
style={{ padding: "7px 14px", background: "#f0ece4", color: "#1a1a1a", border: "1px solid #e8e4dc", borderRadius: 7, fontSize: "0.75rem", fontWeight: 600, cursor: "pointer", fontFamily: "var(--font-inter), ui-sans-serif, sans-serif", whiteSpace: "nowrap" }}>
|
||||
+ Follow up
|
||||
</button>
|
||||
<button onClick={() => { setActiveSession(null); setActiveSessionId(null); setTask(""); }}
|
||||
style={{ padding: "7px 14px", background: "transparent", color: "#a09a90", border: "1px solid #e8e4dc", borderRadius: 7, fontSize: "0.75rem", cursor: "pointer", fontFamily: "Outfit, sans-serif", whiteSpace: "nowrap" }}>
|
||||
style={{ padding: "7px 14px", background: "transparent", color: "#a09a90", border: "1px solid #e8e4dc", borderRadius: 7, fontSize: "0.75rem", cursor: "pointer", fontFamily: "var(--font-inter), ui-sans-serif, sans-serif", whiteSpace: "nowrap" }}>
|
||||
New task
|
||||
</button>
|
||||
</div>
|
||||
@@ -867,7 +867,7 @@ function AgentMode({ projectId, appName, appPath }: { projectId: string; appName
|
||||
rows={2}
|
||||
style={{
|
||||
flex: 1, resize: "none", border: "1px solid #e8e4dc", borderRadius: 8,
|
||||
padding: "9px 12px", fontSize: "0.8rem", fontFamily: "Outfit, sans-serif",
|
||||
padding: "9px 12px", fontSize: "0.8rem", fontFamily: "var(--font-inter), ui-sans-serif, sans-serif",
|
||||
color: "#1a1a1a", outline: "none", background: "#faf8f5",
|
||||
}}
|
||||
/>
|
||||
@@ -878,13 +878,13 @@ function AgentMode({ projectId, appName, appPath }: { projectId: string; appName
|
||||
padding: "10px 18px", background: task.trim() ? "#1a1a1a" : "#e8e4dc",
|
||||
color: task.trim() ? "#fff" : "#a09a90", border: "none", borderRadius: 8,
|
||||
fontSize: "0.78rem", fontWeight: 600, cursor: task.trim() ? "pointer" : "default",
|
||||
fontFamily: "Outfit, sans-serif", whiteSpace: "nowrap",
|
||||
fontFamily: "var(--font-inter), ui-sans-serif, sans-serif", whiteSpace: "nowrap",
|
||||
}}
|
||||
>
|
||||
{submitting ? "Starting…" : "Run"}
|
||||
</button>
|
||||
</div>
|
||||
<div style={{ fontSize: "0.65rem", color: "#b5b0a6", marginTop: 5, fontFamily: "Outfit, sans-serif" }}>
|
||||
<div style={{ fontSize: "0.65rem", color: "#b5b0a6", marginTop: 5, fontFamily: "var(--font-inter), ui-sans-serif, sans-serif" }}>
|
||||
⌘↵ to start · The agent works autonomously until done · You approve before anything is committed
|
||||
</div>
|
||||
</div>
|
||||
@@ -916,15 +916,15 @@ function TerminalPanel({ appName }: { appName: string }) {
|
||||
}}
|
||||
>
|
||||
<span style={{ fontSize: "0.58rem", color: "#555", transform: open ? "rotate(180deg)" : "none", transition: "transform 0.2s", display: "inline-block" }}>▲</span>
|
||||
<span style={{ fontSize: "0.68rem", fontWeight: 600, color: "#6b6560", letterSpacing: "0.07em", textTransform: "uppercase", fontFamily: "Outfit, sans-serif" }}>Terminal</span>
|
||||
<span style={{ fontSize: "0.68rem", fontWeight: 600, color: "#6b6560", letterSpacing: "0.07em", textTransform: "uppercase", fontFamily: "var(--font-inter), ui-sans-serif, sans-serif" }}>Terminal</span>
|
||||
{appName && <span style={{ fontSize: "0.65rem", color: "#3a3a3a", fontFamily: "IBM Plex Mono, monospace" }}>{appName}</span>}
|
||||
<span style={{ marginLeft: "auto", fontSize: "0.6rem", color: "#3a3a3a", fontFamily: "Outfit, sans-serif" }}>Phase 4</span>
|
||||
<span style={{ marginLeft: "auto", fontSize: "0.6rem", color: "#3a3a3a", fontFamily: "var(--font-inter), ui-sans-serif, sans-serif" }}>Phase 4</span>
|
||||
</button>
|
||||
|
||||
{/* Body */}
|
||||
{open && (
|
||||
<div style={{ flex: 1, display: "flex", alignItems: "center", justifyContent: "center", flexDirection: "column", gap: 10, padding: "16px 24px", textAlign: "center" }}>
|
||||
<div style={{ fontSize: "0.78rem", color: "#6b6560", lineHeight: 1.6, fontFamily: "Outfit, sans-serif", maxWidth: 340 }}>
|
||||
<div style={{ fontSize: "0.78rem", color: "#6b6560", lineHeight: 1.6, fontFamily: "var(--font-inter), ui-sans-serif, sans-serif", maxWidth: 340 }}>
|
||||
{appName
|
||||
? `Live shell into the ${appName} container via xterm.js + Theia PTY — coming in Phase 4.`
|
||||
: "Select an app from the left, then open a live shell into its container."}
|
||||
@@ -979,8 +979,8 @@ function FileTree({ projectId, rootPath, selectedPath, onSelectFile }: {
|
||||
|
||||
return (
|
||||
<div style={{ flex: 1, overflow: "auto", padding: "4px" }}>
|
||||
{treeLoading && <div style={{ padding: "12px", fontSize: "0.72rem", color: "#b5b0a6", fontFamily: "Outfit, sans-serif" }}>Loading…</div>}
|
||||
{!treeLoading && tree.length === 0 && <div style={{ padding: "12px", fontSize: "0.72rem", color: "#b5b0a6", fontFamily: "Outfit, sans-serif" }}>Empty.</div>}
|
||||
{treeLoading && <div style={{ padding: "12px", fontSize: "0.72rem", color: "#b5b0a6", fontFamily: "var(--font-inter), ui-sans-serif, sans-serif" }}>Loading…</div>}
|
||||
{!treeLoading && tree.length === 0 && <div style={{ padding: "12px", fontSize: "0.72rem", color: "#b5b0a6", fontFamily: "var(--font-inter), ui-sans-serif, sans-serif" }}>Empty.</div>}
|
||||
{tree.map(n => <TreeRow key={n.path} node={n} depth={0} selectedPath={selectedPath} onSelect={onSelectFile} onToggle={handleToggle} />)}
|
||||
</div>
|
||||
);
|
||||
@@ -1081,7 +1081,7 @@ function PrdContent({ projectId }: { projectId: string }) {
|
||||
}, [projectId]);
|
||||
|
||||
if (loading) return (
|
||||
<div style={{ flex: 1, display: "flex", alignItems: "center", justifyContent: "center", color: "#a09a90", fontSize: "0.82rem", fontFamily: "Outfit, sans-serif" }}>Loading…</div>
|
||||
<div style={{ flex: 1, display: "flex", alignItems: "center", justifyContent: "center", color: "#a09a90", fontSize: "0.82rem", fontFamily: "var(--font-inter), ui-sans-serif, sans-serif" }}>Loading…</div>
|
||||
);
|
||||
|
||||
const phaseMap = new Map(savedPhases.map(p => [p.phase, p]));
|
||||
@@ -1095,11 +1095,11 @@ function PrdContent({ projectId }: { projectId: string }) {
|
||||
const totalPct = Math.round((doneCount / sections.length) * 100);
|
||||
|
||||
return (
|
||||
<div style={{ flex: 1, overflow: "auto", padding: "24px 28px", fontFamily: "Outfit, sans-serif" }}>
|
||||
<div style={{ flex: 1, overflow: "auto", padding: "24px 28px", fontFamily: "var(--font-inter), ui-sans-serif, sans-serif" }}>
|
||||
{prd ? (
|
||||
<div style={{ maxWidth: 720 }}>
|
||||
<div style={{ display: "flex", alignItems: "center", justifyContent: "space-between", marginBottom: 20 }}>
|
||||
<h3 style={{ fontFamily: "Newsreader, serif", fontSize: "1.15rem", fontWeight: 400, color: "#1a1a1a", margin: 0 }}>Product Requirements</h3>
|
||||
<h3 style={{ fontFamily: "var(--font-lora), ui-serif, serif", fontSize: "1.15rem", fontWeight: 400, color: "#1a1a1a", margin: 0 }}>Product Requirements</h3>
|
||||
<span style={{ fontFamily: "IBM Plex Mono, monospace", fontSize: "0.68rem", color: "#2e7d32", background: "#2e7d3210", padding: "3px 9px", borderRadius: 5 }}>PRD complete</span>
|
||||
</div>
|
||||
<div style={{ background: "#fff", borderRadius: 10, border: "1px solid #e8e4dc", padding: "24px 28px", lineHeight: 1.8, fontSize: "0.86rem", color: "#2a2824", whiteSpace: "pre-wrap" }}>
|
||||
@@ -1190,8 +1190,8 @@ function PreviewContent({ projectId, apps, activePreviewApp, onSelectApp }: {
|
||||
<div style={{ flex: 1, display: "flex", flexDirection: "column", alignItems: "center", justifyContent: "center", gap: 16, padding: 60, textAlign: "center", background: "#faf8f5" }}>
|
||||
<div style={{ width: 52, height: 52, borderRadius: 13, background: "#f0ece4", display: "flex", alignItems: "center", justifyContent: "center", fontSize: "1.5rem" }}>🖥</div>
|
||||
<div>
|
||||
<div style={{ fontSize: "0.92rem", fontWeight: 600, color: "#1a1a1a", marginBottom: 6, fontFamily: "Outfit, sans-serif" }}>No deployment URL yet</div>
|
||||
<div style={{ fontSize: "0.8rem", color: "#a09a90", maxWidth: 320, lineHeight: 1.6, fontFamily: "Outfit, sans-serif" }}>
|
||||
<div style={{ fontSize: "0.92rem", fontWeight: 600, color: "#1a1a1a", marginBottom: 6, fontFamily: "var(--font-inter), ui-sans-serif, sans-serif" }}>No deployment URL yet</div>
|
||||
<div style={{ fontSize: "0.8rem", color: "#a09a90", maxWidth: 320, lineHeight: 1.6, fontFamily: "var(--font-inter), ui-sans-serif, sans-serif" }}>
|
||||
Deploy an app via Coolify to see a live preview here. Once deployed, the URL will appear automatically.
|
||||
</div>
|
||||
</div>
|
||||
@@ -1337,7 +1337,7 @@ function BuildHubInner() {
|
||||
};
|
||||
|
||||
return (
|
||||
<div style={{ display: "flex", height: "100%", fontFamily: "Outfit, sans-serif", overflow: "hidden" }}>
|
||||
<div style={{ display: "flex", height: "100%", fontFamily: "var(--font-inter), ui-sans-serif, sans-serif", overflow: "hidden" }}>
|
||||
|
||||
{/* ── Build content ── */}
|
||||
<div style={{ flex: 1, display: "flex", overflow: "hidden", minWidth: 0 }}>
|
||||
@@ -1356,13 +1356,13 @@ function BuildHubInner() {
|
||||
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 style={{ padding: "8px 22px", fontSize: "0.74rem", color: "#b5b0a6", fontFamily: "var(--font-inter), ui-sans-serif, 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.57rem", fontWeight: 700, color: "#b5b0a6", letterSpacing: "0.1em", textTransform: "uppercase", fontFamily: "var(--font-inter), ui-sans-serif, 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} />
|
||||
@@ -1381,7 +1381,7 @@ function BuildHubInner() {
|
||||
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 style={{ padding: "8px 22px", fontSize: "0.74rem", color: "#b5b0a6", fontFamily: "var(--font-inter), ui-sans-serif, sans-serif" }}>Not configured</div>
|
||||
)}
|
||||
</div>
|
||||
)}
|
||||
@@ -1409,7 +1409,7 @@ function BuildHubInner() {
|
||||
return (
|
||||
<button key={item.id} onClick={() => navigate({ section: "tasks", tab: item.id })} style={{
|
||||
flex: 1, padding: "5px 0", border: "none", borderRadius: 6, cursor: "pointer",
|
||||
fontSize: "0.72rem", fontWeight: 600, fontFamily: "Outfit, sans-serif",
|
||||
fontSize: "0.72rem", fontWeight: 600, fontFamily: "var(--font-inter), ui-sans-serif, sans-serif",
|
||||
background: isActive ? "#1a1a1a" : "transparent",
|
||||
color: isActive ? "#fff" : "#a09a90",
|
||||
transition: "all 0.12s",
|
||||
@@ -1429,7 +1429,7 @@ function BuildHubInner() {
|
||||
onClick={() => navigate({ section: "tasks", tab: "tasks", 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 style={{ padding: "8px 22px", fontSize: "0.74rem", color: "#b5b0a6", fontFamily: "var(--font-inter), ui-sans-serif, sans-serif" }}>No apps yet</div>
|
||||
)}
|
||||
</>
|
||||
)}
|
||||
@@ -1446,7 +1446,7 @@ function BuildHubInner() {
|
||||
onClick={() => setActivePreviewApp(app)}
|
||||
/>
|
||||
)) : (
|
||||
<div style={{ padding: "8px 22px", fontSize: "0.74rem", color: "#b5b0a6", fontFamily: "Outfit, sans-serif" }}>No deployments yet</div>
|
||||
<div style={{ padding: "8px 22px", fontSize: "0.74rem", color: "#b5b0a6", fontFamily: "var(--font-inter), ui-sans-serif, sans-serif" }}>No deployments yet</div>
|
||||
)}
|
||||
</div>
|
||||
)}
|
||||
@@ -1492,7 +1492,7 @@ function BuildHubInner() {
|
||||
|
||||
export default function BuildPage() {
|
||||
return (
|
||||
<Suspense fallback={<div style={{ display: "flex", height: "100%", alignItems: "center", justifyContent: "center", color: "#a09a90", fontFamily: "Outfit, sans-serif", fontSize: "0.85rem" }}>Loading…</div>}>
|
||||
<Suspense fallback={<div style={{ display: "flex", height: "100%", alignItems: "center", justifyContent: "center", color: "#a09a90", fontFamily: "var(--font-inter), ui-sans-serif, sans-serif", fontSize: "0.85rem" }}>Loading…</div>}>
|
||||
<BuildHubInner />
|
||||
</Suspense>
|
||||
);
|
||||
|
||||
Reference in New Issue
Block a user