mark/vibn-frontend
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat(ui): apply Justine ink & parchment design system

Browse Source 
- 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:
Mark Henderson
2026-04-01 21:03:40 -07:00
parent 06238f958a
commit bada63452f
33 changed files with 300 additions and 286 deletions
Download Patch File Download Diff File Expand all files Collapse all files

6
app/[workspace]/activity/page.tsx
View File

@@ -58,10 +58,10 @@ export default function ActivityPage() {
return (
<div
className="vibn-enter"
style={{ padding: "44px 52px", maxWidth: 720, fontFamily: "Outfit, sans-serif" }}
style={{ padding: "44px 52px", maxWidth: 720, fontFamily: "var(--font-inter), ui-sans-serif, sans-serif" }}
>
<h1 style={{
fontFamily: "Newsreader, serif", fontSize: "1.9rem",
fontFamily: "var(--font-lora), ui-serif, serif", fontSize: "1.9rem",
fontWeight: 400, color: "#1a1a1a", letterSpacing: "-0.03em", marginBottom: 4,
}}>
Activity
@@ -81,7 +81,7 @@ export default function ActivityPage() {
background: filter === f.id ? "#1a1a1a" : "#fff",
color: filter === f.id ? "#fff" : "#6b6560",
fontSize: "0.75rem", fontWeight: 600, transition: "all 0.12s",
cursor: "pointer", fontFamily: "Outfit, sans-serif",
cursor: "pointer", fontFamily: "var(--font-inter), ui-sans-serif, sans-serif",
}}
>
{f.label}

6
app/[workspace]/project/[projectId]/analytics/page.tsx
View File

@@ -43,7 +43,7 @@ type SectionId = typeof SECTIONS[number]["id"];
const NAV_GROUP: React.CSSProperties = {
fontSize: "0.6rem", fontWeight: 700, color: "#b5b0a6",
letterSpacing: "0.09em", textTransform: "uppercase",
padding: "14px 12px 6px", fontFamily: "Outfit, sans-serif",
padding: "14px 12px 6px", fontFamily: "var(--font-inter), ui-sans-serif, sans-serif",
};
function AnalyticsInner() {
@@ -60,7 +60,7 @@ function AnalyticsInner() {
router.push(`/${workspace}/project/${projectId}/analytics?section=${id}`, { scroll: false });
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" }}>
{/* Left nav */}
<div style={{ width: 200, flexShrink: 0, borderRight: "1px solid #e8e4dc", background: "#faf8f5", display: "flex", flexDirection: "column", overflow: "auto" }}>
@@ -126,7 +126,7 @@ function AnalyticsInner() {
export default function AnalyticsPage() {
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>}>
<AnalyticsInner />
</Suspense>
);

6
app/[workspace]/project/[projectId]/assist/page.tsx
View File

@@ -43,7 +43,7 @@ type SectionId = typeof SECTIONS[number]["id"];
const NAV_GROUP: React.CSSProperties = {
fontSize: "0.6rem", fontWeight: 700, color: "#b5b0a6",
letterSpacing: "0.09em", textTransform: "uppercase",
padding: "14px 12px 6px", fontFamily: "Outfit, sans-serif",
padding: "14px 12px 6px", fontFamily: "var(--font-inter), ui-sans-serif, sans-serif",
};
function AssistInner() {
@@ -60,7 +60,7 @@ function AssistInner() {
router.push(`/${workspace}/project/${projectId}/assist?section=${id}`, { scroll: false });
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" }}>
{/* Left nav */}
<div style={{ width: 200, flexShrink: 0, borderRight: "1px solid #e8e4dc", background: "#faf8f5", display: "flex", flexDirection: "column", overflow: "auto" }}>
@@ -126,7 +126,7 @@ function AssistInner() {
export default function AssistPage() {
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>}>
<AssistInner />
</Suspense>
);

146
app/[workspace]/project/[projectId]/build/page.tsx
View File

@@ -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 &amp; 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>
);

14
app/[workspace]/project/[projectId]/deployment/page.tsx
View File

@@ -64,7 +64,7 @@ export default function DeploymentPage() {
if (loading) {
return (
<div style={{ display: "flex", alignItems: "center", justifyContent: "center", height: "100%", fontFamily: "Outfit, sans-serif", color: "#a09a90" }}>
<div style={{ display: "flex", alignItems: "center", justifyContent: "center", height: "100%", fontFamily: "var(--font-inter), ui-sans-serif, sans-serif", color: "#a09a90" }}>
Loading…
</div>
);
@@ -77,11 +77,11 @@ export default function DeploymentPage() {
return (
<div
className="vibn-enter"
style={{ padding: "28px 32px", overflow: "auto", fontFamily: "Outfit, sans-serif" }}
style={{ padding: "28px 32px", overflow: "auto", fontFamily: "var(--font-inter), ui-sans-serif, sans-serif" }}
>
<div style={{ maxWidth: 560 }}>
<h3 style={{
fontFamily: "Newsreader, serif", fontSize: "1.2rem",
fontFamily: "var(--font-lora), ui-serif, serif", fontSize: "1.2rem",
fontWeight: 400, color: "#1a1a1a", marginBottom: 4,
}}>
Deployment
@@ -103,7 +103,7 @@ export default function DeploymentPage() {
<div style={{ fontSize: "0.84rem", fontFamily: "IBM Plex Mono, monospace", color: "#3d5afe", fontWeight: 500 }}>{project.coolifyDeployUrl}</div>
</div>
<a href={project.coolifyDeployUrl} target="_blank" rel="noopener noreferrer"
style={{ padding: "5px 12px", borderRadius: 7, border: "1px solid #e0dcd4", background: "#fff", color: "#1a1a1a", fontSize: "0.7rem", fontWeight: 600, textDecoration: "none", fontFamily: "Outfit, sans-serif" }}>
style={{ padding: "5px 12px", borderRadius: 7, border: "1px solid #e0dcd4", background: "#fff", color: "#1a1a1a", fontSize: "0.7rem", fontWeight: 600, textDecoration: "none", fontFamily: "var(--font-inter), ui-sans-serif, sans-serif" }}>
Open ↗
</a>
</div>
@@ -117,7 +117,7 @@ export default function DeploymentPage() {
</div>
<span style={{ display: "inline-flex", alignItems: "center", padding: "3px 9px", borderRadius: 4, fontSize: "0.68rem", fontWeight: 600, color: "#2e7d32", background: "#2e7d3210" }}>SSL Active</span>
<a href={`https://${project.customDomain}`} target="_blank" rel="noopener noreferrer"
style={{ padding: "5px 12px", borderRadius: 7, border: "1px solid #e0dcd4", background: "#fff", color: "#1a1a1a", fontSize: "0.7rem", fontWeight: 600, textDecoration: "none", fontFamily: "Outfit, sans-serif" }}>
style={{ padding: "5px 12px", borderRadius: 7, border: "1px solid #e0dcd4", background: "#fff", color: "#1a1a1a", fontSize: "0.7rem", fontWeight: 600, textDecoration: "none", fontFamily: "var(--font-inter), ui-sans-serif, sans-serif" }}>
Open ↗
</a>
</div>
@@ -130,7 +130,7 @@ export default function DeploymentPage() {
<div style={{ fontSize: "0.84rem", fontFamily: "IBM Plex Mono, monospace", color: "#6b6560", fontWeight: 500 }}>{project.giteaRepo}</div>
</div>
<a href={project.giteaRepoUrl} target="_blank" rel="noopener noreferrer"
style={{ padding: "5px 12px", borderRadius: 7, border: "1px solid #e0dcd4", background: "#fff", color: "#1a1a1a", fontSize: "0.7rem", fontWeight: 600, textDecoration: "none", fontFamily: "Outfit, sans-serif" }}>
style={{ padding: "5px 12px", borderRadius: 7, border: "1px solid #e0dcd4", background: "#fff", color: "#1a1a1a", fontSize: "0.7rem", fontWeight: 600, textDecoration: "none", fontFamily: "var(--font-inter), ui-sans-serif, sans-serif" }}>
View ↗
</a>
</div>
@@ -166,7 +166,7 @@ export default function DeploymentPage() {
<button
onClick={handleConnectDomain}
disabled={connecting}
style={{ padding: "9px 18px", borderRadius: 7, border: "none", background: "#1a1a1a", color: "#fff", fontSize: "0.78rem", fontWeight: 600, cursor: "pointer", fontFamily: "Outfit, sans-serif", opacity: connecting ? 0.6 : 1 }}
style={{ padding: "9px 18px", borderRadius: 7, border: "none", background: "#1a1a1a", color: "#fff", fontSize: "0.78rem", fontWeight: 600, cursor: "pointer", fontFamily: "var(--font-inter), ui-sans-serif, sans-serif", opacity: connecting ? 0.6 : 1 }}
>
{connecting ? "Connecting…" : "Connect"}
</button>

46
app/[workspace]/project/[projectId]/design/page.tsx
View File

@@ -361,7 +361,7 @@ const LIBRARY_STYLE_OPTIONS: Record<string, LibraryStyleOptions> = {
function ConfigRow({ label, children }: { label: string; children: React.ReactNode }) {
return (
<div style={{ display: "flex", flexDirection: "column", gap: 7, paddingBottom: 12, borderBottom: "1px solid #f0ece4" }}>
<span style={{ fontSize: "0.62rem", fontWeight: 700, color: "#a09a90", textTransform: "uppercase", letterSpacing: "0.1em", fontFamily: "Outfit" }}>{label}</span>
<span style={{ fontSize: "0.62rem", fontWeight: 700, color: "#a09a90", textTransform: "uppercase", letterSpacing: "0.1em", fontFamily: "var(--font-inter), ui-sans-serif, sans-serif" }}>{label}</span>
<div style={{ display: "flex", gap: 6, flexWrap: "wrap" }}>
{children}
</div>
@@ -383,7 +383,7 @@ function OptionChip({
display: "flex", alignItems: "center", gap: 5,
padding: multi ? "4px 9px" : "4px 11px",
borderRadius: 5, border: "1px solid",
fontSize: "0.72rem", fontFamily: "Outfit", cursor: "pointer",
fontSize: "0.72rem", fontFamily: "var(--font-inter), ui-sans-serif, sans-serif", cursor: "pointer",
transition: "all 0.1s",
borderColor: active ? "#1a1a1a" : "#e0dcd4",
background: active ? "#1a1a1a" : "#fff",
@@ -411,7 +411,7 @@ function ModeToggle({ value, onChange }: { value: string; onChange: (v: "dark" |
key={m}
onClick={() => onChange(id)}
style={{
padding: "4px 14px", border: "none", fontSize: "0.72rem", fontFamily: "Outfit",
padding: "4px 14px", border: "none", fontSize: "0.72rem", fontFamily: "var(--font-inter), ui-sans-serif, sans-serif",
cursor: "pointer", fontWeight: active ? 600 : 400,
background: active ? "#1a1a1a" : "transparent",
color: active ? "#fff" : "#8a8478",
@@ -622,7 +622,7 @@ function SurfaceSection({
{ScaffoldComponent
? <ScaffoldComponent themeColor={activeColorTheme ?? undefined} config={designConfig} />
: (
<div style={{ height: "100%", display: "flex", alignItems: "center", justifyContent: "center", color: "#b5b0a6", fontSize: "0.82rem", fontFamily: "Outfit" }}>
<div style={{ height: "100%", display: "flex", alignItems: "center", justifyContent: "center", color: "#b5b0a6", fontSize: "0.82rem", fontFamily: "var(--font-inter), ui-sans-serif, sans-serif" }}>
Select a library below to preview
</div>
)
@@ -647,7 +647,7 @@ function SurfaceSection({
style={{
flex: 1, padding: "7px 14px", borderRadius: 7, border: "1px solid #e0dcd4",
background: "#fff", color: "#1a1a1a", fontSize: "0.76rem", fontWeight: 600,
fontFamily: "Outfit", cursor: "pointer", transition: "opacity 0.15s",
fontFamily: "var(--font-inter), ui-sans-serif, sans-serif", cursor: "pointer", transition: "opacity 0.15s",
}}
onMouseEnter={e => (e.currentTarget.style.opacity = "0.7")}
onMouseLeave={e => (e.currentTarget.style.opacity = "1")}
@@ -660,7 +660,7 @@ function SurfaceSection({
flex: 1, padding: "7px 14px", borderRadius: 7, border: `1px solid ${previewId && !saving ? "#1a1a1a" : "#e0dcd4"}`,
background: previewId && !saving ? "#1a1a1a" : "#e0dcd4",
color: previewId && !saving ? "#fff" : "#b5b0a6",
fontSize: "0.76rem", fontWeight: 600, fontFamily: "Outfit",
fontSize: "0.76rem", fontWeight: 600, fontFamily: "var(--font-inter), ui-sans-serif, sans-serif",
cursor: !previewId || saving ? "not-allowed" : "pointer",
transition: "opacity 0.15s",
}}
@@ -670,7 +670,7 @@ function SurfaceSection({
)}
{activeTheme && (
<a href={activeTheme.url} target="_blank" rel="noopener noreferrer"
style={{ fontSize: "0.72rem", color: "#b5b0a6", textDecoration: "none", fontFamily: "Outfit", flexShrink: 0 }}
style={{ fontSize: "0.72rem", color: "#b5b0a6", textDecoration: "none", fontFamily: "var(--font-inter), ui-sans-serif, sans-serif", flexShrink: 0 }}
onMouseEnter={e => (e.currentTarget.style.color = "#1a1a1a")}
onMouseLeave={e => (e.currentTarget.style.color = "#b5b0a6")}
>Docs ↗</a>
@@ -679,7 +679,7 @@ function SurfaceSection({
{/* 2. Library */}
<div style={{ display: "flex", flexDirection: "column", gap: 7, paddingBottom: 12, borderBottom: "1px solid #f0ece4" }}>
<span style={{ fontSize: "0.62rem", fontWeight: 700, color: "#a09a90", textTransform: "uppercase", letterSpacing: "0.1em", fontFamily: "Outfit" }}>Library</span>
<span style={{ fontSize: "0.62rem", fontWeight: 700, color: "#a09a90", textTransform: "uppercase", letterSpacing: "0.1em", fontFamily: "var(--font-inter), ui-sans-serif, sans-serif" }}>Library</span>
<div style={{ display: "flex", gap: 6, flexWrap: "wrap" }}>
{surface.themes.map(theme => {
const isActive = theme.id === previewId;
@@ -693,7 +693,7 @@ function SurfaceSection({
style={{
display: "flex", alignItems: "center", gap: 4,
padding: "4px 11px", borderRadius: 5, border: "1px solid",
fontSize: "0.72rem", fontFamily: "Outfit", cursor: dimmed ? "not-allowed" : "pointer",
fontSize: "0.72rem", fontFamily: "var(--font-inter), ui-sans-serif, sans-serif", cursor: dimmed ? "not-allowed" : "pointer",
transition: "all 0.1s", opacity: dimmed ? 0.35 : 1,
borderColor: isActive ? "#1a1a1a" : "#e0dcd4",
background: isActive ? "#1a1a1a" : "#fff",
@@ -720,7 +720,7 @@ function SurfaceSection({
{/* 4. Colour */}
{availableColorThemes.length > 0 && (
<div style={{ display: "flex", flexDirection: "column", gap: 7, paddingBottom: 12, borderBottom: "1px solid #f0ece4" }}>
<span style={{ fontSize: "0.62rem", fontWeight: 700, color: "#a09a90", textTransform: "uppercase", letterSpacing: "0.1em", fontFamily: "Outfit" }}>Colour</span>
<span style={{ fontSize: "0.62rem", fontWeight: 700, color: "#a09a90", textTransform: "uppercase", letterSpacing: "0.1em", fontFamily: "var(--font-inter), ui-sans-serif, sans-serif" }}>Colour</span>
<div style={{ display: "flex", gap: 7, flexWrap: "wrap", alignItems: "center" }}>
{availableColorThemes.map(ct => (
<button
@@ -740,7 +740,7 @@ function SurfaceSection({
))}
</div>
{activeColorTheme && (
<span style={{ fontSize: "0.72rem", color: "#a09a90", fontFamily: "Outfit" }}>{activeColorTheme.label}</span>
<span style={{ fontSize: "0.72rem", color: "#a09a90", fontFamily: "var(--font-inter), ui-sans-serif, sans-serif" }}>{activeColorTheme.label}</span>
)}
</div>
)}
@@ -801,7 +801,7 @@ function SurfaceSection({
{/* Colour swatches when locked (read-only) */}
{isLocked && availableColorThemes.length > 0 && (
<div style={{ display: "flex", flexDirection: "column", gap: 7 }}>
<span style={{ fontSize: "0.62rem", fontWeight: 700, color: "#a09a90", textTransform: "uppercase", letterSpacing: "0.1em", fontFamily: "Outfit" }}>Colour</span>
<span style={{ fontSize: "0.62rem", fontWeight: 700, color: "#a09a90", textTransform: "uppercase", letterSpacing: "0.1em", fontFamily: "var(--font-inter), ui-sans-serif, sans-serif" }}>Colour</span>
<div style={{ display: "flex", gap: 7, flexWrap: "wrap" }}>
{availableColorThemes.map(ct => (
<button key={ct.id} title={ct.label} disabled
@@ -863,8 +863,8 @@ function SurfacePicker({
};
return (
<div style={{ padding: "28px 32px", fontFamily: "Outfit, sans-serif" }}>
<h3 style={{ fontFamily: "Newsreader, serif", fontSize: "1.2rem", fontWeight: 400, color: "#1a1a1a", marginBottom: 4 }}>
<div style={{ padding: "28px 32px", fontFamily: "var(--font-inter), ui-sans-serif, sans-serif" }}>
<h3 style={{ fontFamily: "var(--font-lora), ui-serif, serif", fontSize: "1.2rem", fontWeight: 400, color: "#1a1a1a", marginBottom: 4 }}>
Design surfaces
</h3>
<p style={{ fontSize: "0.8rem", color: "#a09a90", marginBottom: aiSuggested.length > 0 ? 10 : 24 }}>
@@ -898,7 +898,7 @@ function SurfacePicker({
border: `1px solid ${isSelected ? "#1a1a1a" : "#e8e4dc"}`,
background: isSelected ? "#1a1a1a08" : "#fff",
boxShadow: isSelected ? "0 0 0 1px #1a1a1a" : "0 1px 2px #1a1a1a05",
cursor: "pointer", transition: "all 0.12s", fontFamily: "Outfit",
cursor: "pointer", transition: "all 0.12s", fontFamily: "var(--font-inter), ui-sans-serif, sans-serif",
position: "relative",
}}
onMouseEnter={e => { if (!isSelected) (e.currentTarget.style.borderColor = "#d0ccc4"); }}
@@ -937,7 +937,7 @@ function SurfacePicker({
padding: "9px 20px", borderRadius: 7, border: "none",
background: selected.size === 0 || saving ? "#e0dcd4" : "#1a1a1a",
color: selected.size === 0 || saving ? "#b5b0a6" : "#fff",
fontSize: "0.82rem", fontWeight: 600, fontFamily: "Outfit",
fontSize: "0.82rem", fontWeight: 600, fontFamily: "var(--font-inter), ui-sans-serif, sans-serif",
cursor: selected.size === 0 || saving ? "not-allowed" : "pointer",
transition: "opacity 0.15s",
}}
@@ -947,7 +947,7 @@ function SurfacePicker({
{saving ? "Saving…" : `Confirm surfaces (${selected.size})`} →
</button>
{selected.size === 0 && (
<p style={{ display: "inline-block", marginLeft: 12, fontSize: "0.74rem", color: "#b5b0a6", fontFamily: "Outfit" }}>
<p style={{ display: "inline-block", marginLeft: 12, fontSize: "0.74rem", color: "#b5b0a6", fontFamily: "var(--font-inter), ui-sans-serif, sans-serif" }}>
Select at least one surface to continue
</p>
)}
@@ -1056,7 +1056,7 @@ function DesignPageInner({ projectId }: { projectId: string }) {
if (loading) {
return (
<div style={{ display: "flex", alignItems: "center", justifyContent: "center", height: "100%", fontFamily: "Outfit" }}>
<div style={{ display: "flex", alignItems: "center", justifyContent: "center", height: "100%", fontFamily: "var(--font-inter), ui-sans-serif, sans-serif" }}>
<div style={{ width: 18, height: 18, borderRadius: "50%", border: "2px solid #e8e4dc", borderTopColor: "#1a1a1a", animation: "spin 0.8s linear infinite" }} />
<style>{`@keyframes spin { to { transform: rotate(360deg); } }`}</style>
</div>
@@ -1072,7 +1072,7 @@ function DesignPageInner({ projectId }: { projectId: string }) {
const lockedCount = Object.keys(surfaceThemes).length;
return (
<div style={{ display: "flex", height: "100%", fontFamily: "Outfit, sans-serif" }}>
<div style={{ display: "flex", height: "100%", fontFamily: "var(--font-inter), ui-sans-serif, sans-serif" }}>
{/* Left nav */}
<div style={{ width: 180, flexShrink: 0, borderRight: "1px solid #e8e4dc", display: "flex", flexDirection: "column", background: "#fff" }}>
@@ -1095,7 +1095,7 @@ function DesignPageInner({ projectId }: { projectId: string }) {
color: isActive ? "#1a1a1a" : "#6b6560",
fontSize: "0.8rem", fontWeight: isActive ? 600 : 450,
cursor: "pointer", transition: "all 0.12s", position: "relative",
fontFamily: "Outfit",
fontFamily: "var(--font-inter), ui-sans-serif, sans-serif",
}}
onMouseEnter={e => { if (!isActive) (e.currentTarget.style.background = "#f6f4f0"); }}
onMouseLeave={e => { if (!isActive) (e.currentTarget.style.background = "transparent"); }}
@@ -1113,11 +1113,11 @@ function DesignPageInner({ projectId }: { projectId: string }) {
<div style={{ padding: "12px 18px", borderTop: "1px solid #f0ece4" }}>
{lockedCount === activeSurfaces.length && lockedCount > 0 && (
<p style={{ fontSize: "0.68rem", color: "#2e7d32", fontFamily: "Outfit", marginBottom: 6 }}>✓ All locked</p>
<p style={{ fontSize: "0.68rem", color: "#2e7d32", fontFamily: "var(--font-inter), ui-sans-serif, sans-serif", marginBottom: 6 }}>✓ All locked</p>
)}
<button
onClick={() => setSurfaces([])}
style={{ fontSize: "0.72rem", color: "#a09a90", background: "none", border: "none", cursor: "pointer", fontFamily: "Outfit", padding: 0 }}
style={{ fontSize: "0.72rem", color: "#a09a90", background: "none", border: "none", cursor: "pointer", fontFamily: "var(--font-inter), ui-sans-serif, sans-serif", padding: 0 }}
onMouseEnter={e => (e.currentTarget.style.color = "#1a1a1a")}
onMouseLeave={e => (e.currentTarget.style.color = "#a09a90")}
>
@@ -1147,7 +1147,7 @@ function DesignPageInner({ projectId }: { projectId: string }) {
export default function DesignPage({ params }: { params: Promise<{ workspace: string; projectId: string }> }) {
const { projectId } = use(params);
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>}>
<DesignPageInner projectId={projectId} />
</Suspense>
);

4
app/[workspace]/project/[projectId]/grow/page.tsx
View File

@@ -11,10 +11,10 @@ export default function GrowPage() {
return (
<div
className="vibn-enter"
style={{ padding: "28px 32px", overflow: "auto", fontFamily: "Outfit, sans-serif" }}
style={{ padding: "28px 32px", overflow: "auto", fontFamily: "var(--font-inter), ui-sans-serif, sans-serif" }}
>
<div style={{ maxWidth: 560 }}>
<h3 style={{ fontFamily: "Newsreader, serif", fontSize: "1.2rem", fontWeight: 400, color: "#1a1a1a", marginBottom: 4 }}>
<h3 style={{ fontFamily: "var(--font-lora), ui-serif, serif", fontSize: "1.2rem", fontWeight: 400, color: "#1a1a1a", marginBottom: 4 }}>
Grow
</h3>
<p style={{ fontSize: "0.8rem", color: "#a09a90", marginBottom: 28 }}>

6
app/[workspace]/project/[projectId]/growth/page.tsx
View File

@@ -43,7 +43,7 @@ type SectionId = typeof SECTIONS[number]["id"];
const NAV_GROUP: React.CSSProperties = {
fontSize: "0.6rem", fontWeight: 700, color: "#b5b0a6",
letterSpacing: "0.09em", textTransform: "uppercase",
padding: "14px 12px 6px", fontFamily: "Outfit, sans-serif",
padding: "14px 12px 6px", fontFamily: "var(--font-inter), ui-sans-serif, sans-serif",
};
function GrowthInner() {
@@ -60,7 +60,7 @@ function GrowthInner() {
router.push(`/${workspace}/project/${projectId}/growth?section=${id}`, { scroll: false });
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" }}>
{/* Left nav */}
<div style={{ width: 200, flexShrink: 0, borderRight: "1px solid #e8e4dc", background: "#faf8f5", display: "flex", flexDirection: "column", overflow: "auto" }}>
@@ -137,7 +137,7 @@ function GrowthInner() {
export default function GrowthPage() {
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>}>
<GrowthInner />
</Suspense>
);

4
app/[workspace]/project/[projectId]/infrastructure/page.tsx
View File

@@ -285,7 +285,7 @@ function InfrastructurePageInner() {
};
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" }}>
{/* ── Left sub-nav ── */}
<div style={{
@@ -346,7 +346,7 @@ function InfrastructurePageInner() {
export default function InfrastructurePage() {
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>}>
<InfrastructurePageInner />
</Suspense>
);

4
app/[workspace]/project/[projectId]/insights/page.tsx
View File

@@ -11,10 +11,10 @@ export default function InsightsPage() {
return (
<div
className="vibn-enter"
style={{ padding: "28px 32px", overflow: "auto", fontFamily: "Outfit, sans-serif" }}
style={{ padding: "28px 32px", overflow: "auto", fontFamily: "var(--font-inter), ui-sans-serif, sans-serif" }}
>
<div style={{ maxWidth: 560 }}>
<h3 style={{ fontFamily: "Newsreader, serif", fontSize: "1.2rem", fontWeight: 400, color: "#1a1a1a", marginBottom: 4 }}>
<h3 style={{ fontFamily: "var(--font-lora), ui-serif, serif", fontSize: "1.2rem", fontWeight: 400, color: "#1a1a1a", marginBottom: 4 }}>
Insights
</h3>
<p style={{ fontSize: "0.8rem", color: "#a09a90", marginBottom: 28 }}>

4
app/[workspace]/project/[projectId]/overview/page.tsx
View File

@@ -48,7 +48,7 @@ export default function ProjectOverviewPage() {
if (loading) {
return (
<div style={{ display: "flex", alignItems: "center", justifyContent: "center", height: "100%", fontFamily: "Outfit, sans-serif" }}>
<div style={{ display: "flex", alignItems: "center", justifyContent: "center", height: "100%", fontFamily: "var(--font-inter), ui-sans-serif, sans-serif" }}>
<Loader2 style={{ width: 24, height: 24, color: "#a09a90" }} className="animate-spin" />
</div>
);
@@ -56,7 +56,7 @@ export default function ProjectOverviewPage() {
if (!project) {
return (
<div style={{ display: "flex", alignItems: "center", justifyContent: "center", height: "100%", fontFamily: "Outfit, sans-serif", color: "#a09a90", fontSize: "0.88rem" }}>
<div style={{ display: "flex", alignItems: "center", justifyContent: "center", height: "100%", fontFamily: "var(--font-inter), ui-sans-serif, sans-serif", color: "#a09a90", fontSize: "0.88rem" }}>
Project not found.
</div>
);

14
app/[workspace]/project/[projectId]/prd/page.tsx
View File

@@ -47,7 +47,7 @@ function PhaseDataCard({ phase }: { phase: SavedPhase }) {
width: "100%", textAlign: "left", padding: "10px 14px",
background: "none", border: "none", cursor: "pointer",
display: "flex", alignItems: "center", justifyContent: "space-between",
fontFamily: "Outfit, sans-serif",
fontFamily: "var(--font-inter), ui-sans-serif, sans-serif",
}}
>
<span style={{ fontSize: "0.78rem", color: "#4a4640", lineHeight: 1.45 }}>
@@ -237,7 +237,7 @@ export default function PRDPage() {
if (loading) {
return (
<div style={{ display: "flex", alignItems: "center", justifyContent: "center", height: "100%", fontFamily: "Outfit, sans-serif", color: "#a09a90" }}>
<div style={{ display: "flex", alignItems: "center", justifyContent: "center", height: "100%", fontFamily: "var(--font-inter), ui-sans-serif, sans-serif", color: "#a09a90" }}>
Loading…
</div>
);
@@ -249,7 +249,7 @@ export default function PRDPage() {
];
return (
<div style={{ padding: "28px 32px", flex: 1, overflow: "auto", fontFamily: "Outfit, sans-serif" }}>
<div style={{ padding: "28px 32px", flex: 1, overflow: "auto", fontFamily: "var(--font-inter), ui-sans-serif, sans-serif" }}>
{/* Tab bar — only when at least one doc exists */}
{(prd || architecture) && (
@@ -266,7 +266,7 @@ export default function PRDPage() {
background: isActive ? "#1a1a1a" : "transparent",
color: isActive ? "#fff" : t.available ? "#6b6560" : "#c5c0b8",
fontSize: "0.8rem", fontWeight: isActive ? 600 : 400,
fontFamily: "Outfit, sans-serif",
fontFamily: "var(--font-inter), ui-sans-serif, sans-serif",
transition: "all 0.1s",
}}
>
@@ -305,7 +305,7 @@ export default function PRDPage() {
background: archGenerating ? "#4a4640" : "#fff",
color: archGenerating ? "#a09a90" : "#1a1a1a",
fontSize: "0.82rem", fontWeight: 700,
fontFamily: "Outfit, sans-serif",
fontFamily: "var(--font-inter), ui-sans-serif, sans-serif",
cursor: archGenerating ? "default" : "pointer",
flexShrink: 0, display: "flex", alignItems: "center", gap: 8,
transition: "opacity 0.15s",
@@ -332,7 +332,7 @@ export default function PRDPage() {
{activeTab === "prd" && prd && (
<div style={{ maxWidth: 760 }}>
<div style={{ display: "flex", alignItems: "center", justifyContent: "space-between", marginBottom: 20 }}>
<h3 style={{ fontFamily: "Newsreader, serif", fontSize: "1.2rem", fontWeight: 400, color: "#1a1a1a", margin: 0 }}>
<h3 style={{ fontFamily: "var(--font-lora), ui-serif, serif", fontSize: "1.2rem", fontWeight: 400, color: "#1a1a1a", margin: 0 }}>
Product Requirements
</h3>
<span style={{ fontFamily: "IBM Plex Mono, monospace", fontSize: "0.72rem", color: "#6b6560", background: "#f0ece4", padding: "4px 10px", borderRadius: 5 }}>
@@ -343,7 +343,7 @@ export default function PRDPage() {
background: "#fff", borderRadius: 10, border: "1px solid #e8e4dc",
padding: "28px 32px", lineHeight: 1.8,
fontSize: "0.88rem", color: "#2a2824",
whiteSpace: "pre-wrap", fontFamily: "Outfit, sans-serif",
whiteSpace: "pre-wrap", fontFamily: "var(--font-inter), ui-sans-serif, sans-serif",
}}>
{prd}
</div>

6
app/[workspace]/project/[projectId]/settings/page.tsx
View File

@@ -122,7 +122,7 @@ export default function ProjectSettingsPage() {
if (loading) {
return (
<div style={{ display: "flex", alignItems: "center", justifyContent: "center", height: "100%", fontFamily: "Outfit, sans-serif" }}>
<div style={{ display: "flex", alignItems: "center", justifyContent: "center", height: "100%", fontFamily: "var(--font-inter), ui-sans-serif, sans-serif" }}>
<Loader2 style={{ width: 24, height: 24, color: "#a09a90" }} className="animate-spin" />
</div>
);
@@ -131,10 +131,10 @@ export default function ProjectSettingsPage() {
return (
<div
className="vibn-enter"
style={{ padding: "28px 32px", overflow: "auto", fontFamily: "Outfit, sans-serif" }}
style={{ padding: "28px 32px", overflow: "auto", fontFamily: "var(--font-inter), ui-sans-serif, sans-serif" }}
>
<div style={{ maxWidth: 480 }}>
<h3 style={{ fontFamily: "Newsreader, serif", fontSize: "1.2rem", fontWeight: 400, color: "#1a1a1a", marginBottom: 4 }}>
<h3 style={{ fontFamily: "var(--font-lora), ui-serif, serif", fontSize: "1.2rem", fontWeight: 400, color: "#1a1a1a", marginBottom: 4 }}>
Project Settings
</h3>
<p style={{ fontSize: "0.8rem", color: "#a09a90", marginBottom: 24 }}>

20
app/[workspace]/projects/page.tsx
View File

@@ -59,7 +59,7 @@ function StatusTag({ status }: { status?: string }) {
display: "inline-flex", alignItems: "center", gap: 5,
padding: "3px 9px", borderRadius: 4,
fontSize: "0.68rem", fontWeight: 600, letterSpacing: "0.02em",
color, background: bg, fontFamily: "Outfit, sans-serif",
color, background: bg, fontFamily: "var(--font-inter), ui-sans-serif, sans-serif",
}}>
<StatusDot status={status} /> {label}
</span>
@@ -135,13 +135,13 @@ export default function ProjectsPage() {
return (
<div
className="vibn-enter"
style={{ padding: "44px 52px", maxWidth: 900, fontFamily: "Outfit, sans-serif" }}
style={{ padding: "44px 52px", maxWidth: 900, fontFamily: "var(--font-inter), ui-sans-serif, sans-serif" }}
>
{/* Header */}
<div style={{ display: "flex", justifyContent: "space-between", alignItems: "flex-end", marginBottom: 36 }}>
<div>
<h1 style={{
fontFamily: "Newsreader, serif", fontSize: "1.9rem",
fontFamily: "var(--font-lora), ui-serif, serif", fontSize: "1.9rem",
fontWeight: 400, color: "#1a1a1a", letterSpacing: "-0.03em",
lineHeight: 1.15, marginBottom: 4,
}}>
@@ -159,7 +159,7 @@ export default function ProjectsPage() {
background: "#1a1a1a", color: "#fff",
border: "1px solid #1a1a1a",
fontSize: "0.78rem", fontWeight: 600,
fontFamily: "Outfit, sans-serif", cursor: "pointer",
fontFamily: "var(--font-inter), ui-sans-serif, sans-serif", cursor: "pointer",
}}
>
<span style={{ fontSize: "1rem", lineHeight: 1, fontWeight: 300 }}>+</span>
@@ -189,7 +189,7 @@ export default function ProjectsPage() {
width: "100%", display: "flex", alignItems: "center",
padding: "18px 22px", borderRadius: 10,
background: "#fff", border: "1px solid #e8e4dc",
cursor: "pointer", fontFamily: "Outfit, sans-serif",
cursor: "pointer", fontFamily: "var(--font-inter), ui-sans-serif, sans-serif",
textDecoration: "none", boxShadow: "0 1px 2px #1a1a1a05",
transition: "all 0.15s",
}}
@@ -212,7 +212,7 @@ export default function ProjectsPage() {
flexShrink: 0,
}}>
<span style={{
fontFamily: "Newsreader, serif",
fontFamily: "var(--font-lora), ui-serif, serif",
fontSize: "1.05rem", fontWeight: 500, color: "#1a1a1a",
}}>
{p.productName[0]?.toUpperCase() ?? "P"}
@@ -259,7 +259,7 @@ export default function ProjectsPage() {
color: "#c0bab2", cursor: "pointer",
opacity: hoveredId === p.id ? 1 : 0,
transition: "opacity 0.15s, color 0.15s",
fontFamily: "Outfit, sans-serif", flexShrink: 0,
fontFamily: "var(--font-inter), ui-sans-serif, sans-serif", flexShrink: 0,
}}
onMouseEnter={(e) => { e.currentTarget.style.color = "#d32f2f"; }}
onMouseLeave={(e) => { e.currentTarget.style.color = "#c0bab2"; }}
@@ -278,7 +278,7 @@ export default function ProjectsPage() {
width: "100%", display: "flex", alignItems: "center", justifyContent: "center",
padding: "22px", borderRadius: 10,
background: "transparent", border: "1px dashed #d0ccc4",
cursor: "pointer", fontFamily: "Outfit, sans-serif",
cursor: "pointer", fontFamily: "var(--font-inter), ui-sans-serif, sans-serif",
color: "#b5b0a6", fontSize: "0.84rem", fontWeight: 500,
transition: "all 0.15s",
animationDelay: `${projects.length * 0.05}s`,
@@ -295,7 +295,7 @@ export default function ProjectsPage() {
{/* Empty state */}
{!loading && projects.length === 0 && (
<div style={{ textAlign: "center", paddingTop: 64 }}>
<h3 style={{ fontFamily: "Newsreader, serif", fontSize: "1.3rem", fontWeight: 400, color: "#1a1a1a", marginBottom: 8 }}>
<h3 style={{ fontFamily: "var(--font-lora), ui-serif, serif", fontSize: "1.3rem", fontWeight: 400, color: "#1a1a1a", marginBottom: 8 }}>
No projects yet
</h3>
<p style={{ fontSize: "0.82rem", color: "#a09a90", lineHeight: 1.6, marginBottom: 24 }}>
@@ -307,7 +307,7 @@ export default function ProjectsPage() {
padding: "10px 22px", borderRadius: 7,
background: "#1a1a1a", color: "#fff",
border: "none", fontSize: "0.84rem", fontWeight: 600,
fontFamily: "Outfit, sans-serif", cursor: "pointer",
fontFamily: "var(--font-inter), ui-sans-serif, sans-serif", cursor: "pointer",
}}
>
Create your first project