+
-
-
-
-
- Built-in URL
-
-
-
- Edit URL
-
-
-
-
-
- steadfast-camp-core-flow
-
- .vibn.app
-
-
-
-
-
-
-
- Custom domains
-
-
-
- Want to use your domain?
-
-
- Custom domains are available on our Builder plan and above. Upgrade to
- continue working to this app.
-
-
- View Plans
-
-
-
-
-
-
+ {loading && !anatomy ? (
+
-
- Email domain
-
-
- Builder+
-
-
-
- no-reply@notifications.vibn.app
-
-
- Sender Name: App
+
+
+ ) : live.length === 0 ? (
+
}
+ title="No deployed apps yet"
+ hint="Once you deploy an app, its URL and any custom domains will appear here."
+ />
+ ) : (
+
+ {live.map((app) => (
+
-
- Use your custom domain
-
-
+ )}
);
}
+
+function DomainCard({ app }: { app: LiveApp }) {
+ const urls = urlsFor(app);
+ return (
+
+
+
+ {app.name}
+
+
+ {app.sourceLabel}
+
+
+
+ {urls.length === 0 ? (
+
+ No domain assigned yet — still deploying.
+
+ ) : (
+ urls.map((url, i) => (
+
+ );
+}
+
+function DomainRow({ url, last }: { url: string; last: boolean }) {
+ const [copied, setCopied] = useState(false);
+ const copy = () => {
+ navigator.clipboard?.writeText(url).then(() => {
+ setCopied(true);
+ setTimeout(() => setCopied(false), 1500);
+ });
+ };
+ return (
+
+ );
+}
diff --git a/vibn-frontend/app/[workspace]/project/[projectId]/(home)/hosting/page.tsx b/vibn-frontend/app/[workspace]/project/[projectId]/(home)/hosting/page.tsx
index 919d6313..a4e2c4d7 100644
--- a/vibn-frontend/app/[workspace]/project/[projectId]/(home)/hosting/page.tsx
+++ b/vibn-frontend/app/[workspace]/project/[projectId]/(home)/hosting/page.tsx
@@ -427,15 +427,6 @@ function formatRelative(iso: string | undefined) {
// Sub-components
// ──────────────────────────────────────────────────
-function SectionHeader({ title, count }: { title: string; count: number }) {
- return (
-
- {title}
- {count}
-
- );
-}
-
function EmptySection({
icon,
title,
@@ -492,13 +483,13 @@ function EmptySection({
// ──────────────────────────────────────────────────
const INK = {
- ink: "#1a1a1a",
- mid: "#5f5e5a",
- muted: "#a09a90",
- border: "#e8e4dc",
- borderSoft: "#efebe1",
+ ink: "#111827",
+ mid: "#4b5563",
+ muted: "#9ca3af",
+ border: "#e5e7eb",
+ borderSoft: "#f3f4f6",
cardBg: "#fff",
- fontSans: '"Outfit", "Inter", ui-sans-serif, sans-serif',
+ fontSans: '"Inter", ui-sans-serif, system-ui, -apple-system, sans-serif',
} as const;
const GREEN = "#10b981";
const AMBER = "#f59e0b";
diff --git a/vibn-frontend/app/[workspace]/project/[projectId]/(home)/infrastructure/page.tsx b/vibn-frontend/app/[workspace]/project/[projectId]/(home)/infrastructure/page.tsx
index 3479c770..5773eebc 100644
--- a/vibn-frontend/app/[workspace]/project/[projectId]/(home)/infrastructure/page.tsx
+++ b/vibn-frontend/app/[workspace]/project/[projectId]/(home)/infrastructure/page.tsx
@@ -3,14 +3,26 @@
import { useEffect, useState } from "react";
import { useParams } from "next/navigation";
import {
- Loader2, AlertCircle, Database, KeyRound, CircleDot,
- ShieldCheck, Mail, CreditCard, Sparkles, HardDrive,
- ExternalLink, Pencil, RotateCw,
- ChevronDown, ChevronRight,
+ Loader2,
+ AlertCircle,
+ Database,
+ KeyRound,
+ CircleDot,
+ ShieldCheck,
+ Mail,
+ CreditCard,
+ Sparkles,
+ HardDrive,
+ ExternalLink,
+ Pencil,
+ RotateCw,
+ ChevronDown,
+ ChevronRight,
} from "lucide-react";
import { useAnatomy, type Anatomy } from "@/components/project/use-anatomy";
import { DatabaseTableTree } from "@/components/project/database-table-tree";
import { TableViewer } from "@/components/project/table-viewer";
+import { KvRow } from "@/components/project/dashboard-ui";
/**
* Infrastructure tab — supporting plumbing the product runs on.
@@ -30,21 +42,25 @@ import { TableViewer } from "@/components/project/table-viewer";
* one auto-provisioned, so the tile is always there with status.
*/
-type ProviderCategory = Anatomy["infrastructure"]["providers"][number]["category"];
+type ProviderCategory =
+ Anatomy["infrastructure"]["providers"][number]["category"];
type CategoryKey =
| "databases"
- | "auth" | "email" | "payments" | "llm"
+ | "auth"
+ | "email"
+ | "payments"
+ | "llm"
| "storage"
| "secrets";
type Selection =
| { kind: "category"; category: CategoryKey }
| { kind: "database"; uuid: string }
- | { kind: "table"; dbUuid: string; schema: string; name: string }
+ | { kind: "table"; dbUuid: string; schema: string; name: string }
| { kind: "provider"; id: string }
| { kind: "storage" }
- | { kind: "secrets"; resourceUuid: string }
+ | { kind: "secrets"; resourceUuid: string }
| null;
interface CategoryDef {
@@ -59,57 +75,114 @@ interface CategoryDef {
const INFRA_NUDGE = {
databases: 'No database yet. Try: "Add a Postgres database to my project"',
- auth: 'No auth provider connected. Try: "Add Google OAuth to my app"',
- email: 'No email provider. Try: "Set up email sending with Resend"',
- payments: 'No payment provider. Try: "Connect Stripe to my project"',
- llm: 'No LLM connected. Try: "Add an OpenAI key to this project"',
- secrets: 'No secrets stored yet. Try: "Add my Stripe secret key"',
+ auth: 'No auth provider connected. Try: "Add Google OAuth to my app"',
+ email: 'No email provider. Try: "Set up email sending with Resend"',
+ payments: 'No payment provider. Try: "Connect Stripe to my project"',
+ llm: 'No LLM connected. Try: "Add an OpenAI key to this project"',
+ secrets: 'No secrets stored yet. Try: "Add my Stripe secret key"',
} as const;
const CATEGORIES: CategoryDef[] = [
{
- key: "databases", label: "Databases", icon: Database,
- blurb: "Postgres, Redis, Mongo, ClickHouse — anything your app reads or writes from.",
+ key: "databases",
+ label: "Databases",
+ icon: Database,
+ blurb:
+ "Postgres, Redis, Mongo, ClickHouse — anything your app reads or writes from.",
examples: ["PostgreSQL", "Redis", "MongoDB", "ClickHouse", "MySQL"],
},
{
- key: "auth", label: "Auth", icon: ShieldCheck,
- blurb: "Identity, sessions, SSO. Detected from env-var keys (CLERK_*, AUTH0_*, NEXTAUTH_*…).",
- examples: ["Clerk", "Auth0", "Supabase Auth", "NextAuth", "WorkOS", "SuperTokens"],
- dashboards: { Clerk: "https://dashboard.clerk.com", Auth0: "https://manage.auth0.com", "Supabase Auth": "https://supabase.com/dashboard", WorkOS: "https://dashboard.workos.com" },
+ key: "auth",
+ label: "Auth",
+ icon: ShieldCheck,
+ blurb:
+ "Identity, sessions, SSO. Detected from env-var keys (CLERK_*, AUTH0_*, NEXTAUTH_*…).",
+ examples: [
+ "Clerk",
+ "Auth0",
+ "Supabase Auth",
+ "NextAuth",
+ "WorkOS",
+ "SuperTokens",
+ ],
+ dashboards: {
+ Clerk: "https://dashboard.clerk.com",
+ Auth0: "https://manage.auth0.com",
+ "Supabase Auth": "https://supabase.com/dashboard",
+ WorkOS: "https://dashboard.workos.com",
+ },
},
{
- key: "email", label: "Email", icon: Mail,
+ key: "email",
+ label: "Email",
+ icon: Mail,
blurb: "Transactional + outbound email. SMS is intentionally not here yet.",
examples: ["Resend", "Postmark", "SendGrid", "Mailgun", "AWS SES", "Loops"],
- dashboards: { Resend: "https://resend.com/emails", Postmark: "https://account.postmarkapp.com", SendGrid: "https://app.sendgrid.com", Mailgun: "https://app.mailgun.com", "AWS SES": "https://console.aws.amazon.com/ses" },
+ dashboards: {
+ Resend: "https://resend.com/emails",
+ Postmark: "https://account.postmarkapp.com",
+ SendGrid: "https://app.sendgrid.com",
+ Mailgun: "https://app.mailgun.com",
+ "AWS SES": "https://console.aws.amazon.com/ses",
+ },
},
{
- key: "payments", label: "Payments", icon: CreditCard,
- blurb: "Stripe / Paddle / LemonSqueezy. Connect Stripe to enable webhook + checkout setup (coming soon).",
+ key: "payments",
+ label: "Payments",
+ icon: CreditCard,
+ blurb:
+ "Stripe / Paddle / LemonSqueezy. Connect Stripe to enable webhook + checkout setup (coming soon).",
examples: ["Stripe", "LemonSqueezy", "Paddle"],
- dashboards: { Stripe: "https://dashboard.stripe.com", LemonSqueezy: "https://app.lemonsqueezy.com", Paddle: "https://vendors.paddle.com" },
+ dashboards: {
+ Stripe: "https://dashboard.stripe.com",
+ LemonSqueezy: "https://app.lemonsqueezy.com",
+ Paddle: "https://vendors.paddle.com",
+ },
},
{
- key: "llm", label: "Models", icon: Sparkles,
- blurb: "AI models the project calls. BYOK (Bring Your Own Key) lets you use your own provider keys instead of platform defaults.",
- examples: ["OpenAI", "Anthropic", "Google AI", "Mistral", "Cohere", "Groq", "OpenRouter"],
- dashboards: { OpenAI: "https://platform.openai.com", Anthropic: "https://console.anthropic.com", "Google AI": "https://aistudio.google.com", Mistral: "https://console.mistral.ai", Groq: "https://console.groq.com", OpenRouter: "https://openrouter.ai" },
+ key: "llm",
+ label: "Models",
+ icon: Sparkles,
+ blurb:
+ "AI models the project calls. BYOK (Bring Your Own Key) lets you use your own provider keys instead of platform defaults.",
+ examples: [
+ "OpenAI",
+ "Anthropic",
+ "Google AI",
+ "Mistral",
+ "Cohere",
+ "Groq",
+ "OpenRouter",
+ ],
+ dashboards: {
+ OpenAI: "https://platform.openai.com",
+ Anthropic: "https://console.anthropic.com",
+ "Google AI": "https://aistudio.google.com",
+ Mistral: "https://console.mistral.ai",
+ Groq: "https://console.groq.com",
+ OpenRouter: "https://openrouter.ai",
+ },
},
{
- key: "storage", label: "Storage", icon: HardDrive,
- blurb: "Vibn provisions an S3-compatible bucket per workspace. Every project in the workspace shares it.",
+ key: "storage",
+ label: "Storage",
+ icon: HardDrive,
+ blurb:
+ "Vibn provisions an S3-compatible bucket per workspace. Every project in the workspace shares it.",
examples: ["GCS bucket (S3-compatible)"],
},
{
- key: "secrets", label: "Secrets", icon: KeyRound,
- blurb: "Every env var across every app + service. Values are never read here; rotate via the AI chat.",
+ key: "secrets",
+ label: "Secrets",
+ icon: KeyRound,
+ blurb:
+ "Every env var across every app + service. Values are never read here; rotate via the AI chat.",
examples: [],
},
];
function categoryDef(key: CategoryKey): CategoryDef {
- return CATEGORIES.find(c => c.key === key)!;
+ return CATEGORIES.find((c) => c.key === key)!;
}
export default function InfrastructureTab() {
@@ -122,9 +195,10 @@ export default function InfrastructureTab() {
const [expandedDbs, setExpandedDbs] = useState
>(new Set());
const toggleDb = (uuid: string) => {
- setExpandedDbs(prev => {
+ setExpandedDbs((prev) => {
const next = new Set(prev);
- if (next.has(uuid)) next.delete(uuid); else next.add(uuid);
+ if (next.has(uuid)) next.delete(uuid);
+ else next.add(uuid);
return next;
});
};
@@ -132,7 +206,11 @@ export default function InfrastructureTab() {
// Auto-expand the first database tile once anatomy lands so the user
// sees tables immediately on a project that has one DB.
useEffect(() => {
- if (anatomy && anatomy.infrastructure.databases[0] && expandedDbs.size === 0) {
+ if (
+ anatomy &&
+ anatomy.infrastructure.databases[0] &&
+ expandedDbs.size === 0
+ ) {
setExpandedDbs(new Set([anatomy.infrastructure.databases[0].uuid]));
}
}, [anatomy, expandedDbs.size]);
@@ -145,24 +223,29 @@ export default function InfrastructureTab() {
{/* ── Left rail ── */}
{showLoading && (
-
+
)}
{error && !showLoading && (
-
+
)}
- {anatomy && CATEGORIES.map(def => (
-
{/* ── Right pane ── */}
@@ -170,9 +253,15 @@ export default function InfrastructureTab() {
{paneHeading(selection, anatomy)}
{!anatomy && Loading… }
- {anatomy && !selection &&
@@ -206,8 +298,13 @@ export default function InfrastructureTab() {
// ──────────────────────────────────────────────────
function CategoryRail({
- def, anatomy, selection, onSelect,
- projectId, expandedDbs, onToggleDb,
+ def,
+ anatomy,
+ selection,
+ onSelect,
+ projectId,
+ expandedDbs,
+ onToggleDb,
}: {
def: CategoryDef;
anatomy: Anatomy;
@@ -218,7 +315,8 @@ function CategoryRail({
onToggleDb: (uuid: string) => void;
}) {
const Icon = def.icon;
- const headerActive = selection?.kind === "category" && selection.category === def.key;
+ const headerActive =
+ selection?.kind === "category" && selection.category === def.key;
// Storage is a single-tile category backed by workspace state
if (def.key === "storage") {
@@ -227,7 +325,12 @@ function CategoryRail({
const active = selection?.kind === "storage";
return (
-
onSelect({ kind: "category", category: def.key })} />
+ onSelect({ kind: "category", category: def.key })}
+ />
{present && (
{s.bucketName ?? "provisioning…"}
)}
@@ -255,10 +361,15 @@ function CategoryRail({
const dbs = anatomy.infrastructure.databases;
return (