-
Product Brief
+
Project Objective
The high-level business case and elevator pitch.
diff --git a/vibn-frontend/app/[workspace]/project/[projectId]/(home)/security/page.tsx b/vibn-frontend/app/[workspace]/project/[projectId]/(home)/security/page.tsx
deleted file mode 100644
index a76f5e7..0000000
--- a/vibn-frontend/app/[workspace]/project/[projectId]/(home)/security/page.tsx
+++ /dev/null
@@ -1,119 +0,0 @@
-"use client";
-
-import { Shield, Settings } from "lucide-react";
-
-export default function SecurityPage() {
- return (
-
-
-
-
- Security
-
-
- Manage your permissions and security rules.{" "}
-
- Learn more
-
-
-
-
-
-
-
-
-
-
-
- Check the security of your app
-
-
- Review your configuration, identify potential risks, and learn how to
- strengthen your app's protection
-
-
-
-
- );
-}
diff --git a/vibn-frontend/app/[workspace]/project/[projectId]/(home)/services/page.tsx b/vibn-frontend/app/[workspace]/project/[projectId]/(home)/services/page.tsx
deleted file mode 100644
index ab25c71..0000000
--- a/vibn-frontend/app/[workspace]/project/[projectId]/(home)/services/page.tsx
+++ /dev/null
@@ -1,696 +0,0 @@
-"use client";
-
-import { useState } from "react";
-import { useParams } from "next/navigation";
-import {
- Loader2,
- AlertCircle,
- ExternalLink,
- Globe,
- RefreshCw,
- CircleDot,
- ChevronDown,
- ChevronRight,
- Copy,
- Check,
- Terminal,
- Server,
-} from "lucide-react";
-import { useAnatomy, type Anatomy } from "@/components/project/use-anatomy";
-
-/**
- * Hosting tab — user-facing: "Is my thing live? How do I reach it?"
- *
- * One endpoint = one card. Each card shows:
- * - Live URL (open in new tab)
- * - Status dot + plain-language status
- * - Redeploy button
- * - Domain(s) list
- * - Last build (time + status)
- * - Expandable recent logs
- *
- * No master-detail split — with 1-3 services the overhead isn't worth it.
- * Previews (dev server URLs) shown below in a secondary section.
- */
-
-// ──────────────────────────────────────────────────
-// Types
-// ──────────────────────────────────────────────────
-
-type LiveItem = Anatomy["hosting"]["live"][number];
-type Preview = Anatomy["hosting"]["previews"][number];
-
-// ──────────────────────────────────────────────────
-// Main component
-// ──────────────────────────────────────────────────
-
-export default function ServicesPage() {
- const params = useParams();
- const projectId = params.projectId as string;
- const { anatomy, loading, error } = useAnatomy(projectId, { pollMs: 8000 });
- const showLoading = loading && !anatomy;
-
- return (
-
- {showLoading && (
-
-
-
- Loading…
-
-
- )}
- {error && !showLoading && (
-
- )}
-
- {anatomy && (
- <>
- {/* ── Live endpoints ── */}
-
-
- {anatomy.hosting.live.length === 0 ? (
- }
- title="Nothing deployed yet"
- hint="Ask the AI to deploy your app and it will appear here."
- promptSuggestion="Deploy my app to production"
- />
- ) : (
-
- {anatomy.hosting.live.map((item) => (
-
- ))}
-
- )}
-
-
- {/* ── Previews ── */}
- {anatomy.hosting.previews.length > 0 && (
-
-
-
- {anatomy.hosting.previews.map((p) => (
-
- ))}
-
- )}
-
- )}
-
- );
-}
-
-// ──────────────────────────────────────────────────
-// Live card
-// ──────────────────────────────────────────────────
-
-function LiveCard({ item, projectId }: { item: LiveItem; projectId: string }) {
- const [deploying, setDeploying] = useState(false);
- const [logsOpen, setLogsOpen] = useState(false);
- const [logs, setLogs] = useState
(null);
- const [logsLoading, setLogsLoading] = useState(false);
- const [copied, setCopied] = useState(false);
-
- const primaryUrl = item.fqdn ? `https://${item.fqdn}` : null;
- const phase = classifyPhase(item.status);
- const { color: statusColor, label: statusLabel } = phaseDisplay(phase, item);
-
- const redeploy = async () => {
- if (deploying) return;
- setDeploying(true);
- try {
- await fetch(`/api/mcp`, {
- method: "POST",
- headers: { "Content-Type": "application/json" },
- body: JSON.stringify({
- action: "apps.deploy",
- params: { uuid: item.uuid, projectId },
- }),
- });
- } finally {
- setTimeout(() => setDeploying(false), 3000);
- }
- };
-
- const openLogs = async () => {
- if (!logsOpen) {
- setLogsOpen(true);
- setLogsLoading(true);
- try {
- const r = await fetch(`/api/mcp`, {
- method: "POST",
- headers: { "Content-Type": "application/json" },
- body: JSON.stringify({
- action: "apps.logs",
- params: { uuid: item.uuid, lines: 60 },
- }),
- });
- const d = await r.json();
- setLogs(
- typeof d.result === "string"
- ? d.result
- : JSON.stringify(d.result ?? d.error, null, 2),
- );
- } catch {
- setLogs("Failed to load logs.");
- } finally {
- setLogsLoading(false);
- }
- } else {
- setLogsOpen(false);
- }
- };
-
- const copyUrl = () => {
- if (!primaryUrl) return;
- navigator.clipboard.writeText(primaryUrl);
- setCopied(true);
- setTimeout(() => setCopied(false), 2000);
- };
-
- return (
-
- {/* ── Card header ── */}
-
-
-
- {item.name}
-
- {item.source === "repo" ? "built" : "image"}
-
-
-
-
-
-
-
- {/* ── Status line ── */}
-
-
- {statusLabel}
-
- {item.lastBuild && (
-
- · Last build {item.lastBuild.status}{" "}
- {formatRelative(item.lastBuild.finishedAt)}
-
- )}
-
-
- {/* ── Live URL ── */}
- {primaryUrl ? (
-
- ) : (
-
-
-
- No domain attached — ask the AI to add one.
-
-
- )}
-
- {/* ── Extra domains ── */}
- {item.domains.length > 1 && (
-
- )}
-
- {/* ── Logs toggle ── */}
-
-
-
- {logsOpen && (
-
- {logsLoading ? (
-
- Loading…
-
- ) : (
-
{logs || "(no logs)"}
- )}
-
- )}
-
-
-
-
-
- {preview.name}
-
-
- port {preview.port}
-
-
- {preview.state}
-
- {preview.url && running && (
-
- )}
-
-
- {title}
- {count}
-
- );
-}
-
-function EmptySection({
- icon,
- title,
- hint,
- promptSuggestion,
-}: {
- icon: React.ReactNode;
- title: string;
- hint: string;
- promptSuggestion?: string;
-}) {
- return (
-
-
{icon}
-
- {title}
-
-
- {hint}
-
- {promptSuggestion && (
-
-
- Try asking:
-
-
- "{promptSuggestion}"
-
-
- )}
-
-
-
- App Settings
-
-
- General configuration for your application.
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- Delete Application
-
-
- Permanently delete this app and all of its data.
-
-
-
-
-
-
-
-
- Authentication
-
-
- Configure how users sign in to your app.
-
-
-
-
-
-
-
- Email & Password
-
-
- Allow users to sign up with an email and password.
-
-
-
-
-
-
-
-
-
-
- Google OAuth
-
-
- Allow users to sign in with their Google account.
-
-
-
-
-
-
+ {/* Back link */}
+
+
Back to project
+
+
+
+ Project settings
+
+
+
+
+ {/* ── Danger zone ── */}
+
+
+
+ Danger zone
+
+
+
+
+
+
Delete this project
+
+ Removes all project data from Vibn. Coolify services and databases
+ are not automatically stopped — use the chat to clean those
+ up first, or remove them from Coolify directly.
+
+
+
+ {deletePhase === "idle" && (
+
+ )}
+
+ {deletePhase === "confirm" && (
+
+
+ Type delete to confirm
+
+
+ setConfirmInput(e.target.value)}
+ onKeyDown={e => e.key === "Enter" && confirmInput.toLowerCase() === "delete" && handleDelete()}
+ placeholder="delete"
+ style={confirmInput_}
+ />
+
+
+
+ {deleteError && (
+
{deleteError}
+ )}
+
+ )}
+
+ {deletePhase === "deleting" && (
+
+ )}
+
+ {deletePhase === "done" && (
+
+ Project deleted. Redirecting…
+
+ )}
+
+
+
-
-
- Storage
-
-
- Manage your cloud storage buckets and assets.
-
-
-
-
-
-
-
-
- No buckets found
-
-
- Create an S3-compatible storage bucket to start uploading user files,
- avatars, and application assets.
-
-
-
-
-
-
-
- Users
-
-
- Manage the app's users and their roles
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- Users
-
-
-
-
-
-
-
-
-
-
-
-
- |
- Name
- |
-
- Role
- |
-
- Email
- |
-
-
-
-
- |
-
- Mark Henderson
-
-
- Owner
-
- |
-
- admin
- |
-
- markhenderson1977@gmail.com
- |
-
-
-
-
-
-
-
+
+
Dashboard
-
- {/* Search Bar */}
-
-
- setSearchQuery(e.target.value)}
- style={{
- border: "none",
- background: "transparent",
- outline: "none",
- width: "100%",
- fontSize: "0.8rem",
- color: "#18181b",
- }}
- />
-
-
-
- {filteredItems.map((item) => {
- const isMainActive =
- pathname === `${projectBase}/${item.segment}` ||
- pathname.startsWith(`${projectBase}/${item.segment}/`);
- const isExpanded = expandedSections[item.segment];
-
- return (
-
-
{
- if (item.hasChildren) {
- setExpandedSections((prev) => ({
- ...prev,
- [item.segment]: !prev[item.segment],
- }));
- }
- }}
- >
- {item.hasChildren ? (
-
-
-
- {item.label}
-
-
- ) : (
-
-
-
- {item.label}
-
-
- )}
-
-
- {item.badge && (
-
- {item.badge}
-
- )}
- {item.hasChildren &&
- (isExpanded ? (
-
- ) : (
-
- ))}
-
-
-
- {/* Render Children if expanded */}
- {item.hasChildren && isExpanded && item.children && (
-
- {item.children.map((child) => {
- const href = child.segment.includes("?")
- ? `${projectBase}/${child.segment.split("?")[0]}?${child.segment.split("?")[1]}`
- : `${projectBase}/${child.segment}`;
- let isChildActive = false;
- if (child.segment.includes("?")) {
- const [basePath, searchStr] = child.segment.split("?");
- isChildActive =
- pathname === `${projectBase}/${basePath}` &&
- (typeof window !== "undefined"
- ? window.location.search.includes(searchStr)
- : false);
- } else {
- isChildActive =
- pathname === `${projectBase}/${child.segment}`;
- }
-
- return (
-
- {child.label}
-
- );
- })}
-
- )}
-
- );
- })}
-
+ {items.map(item => {
+ const active = pathname === `${projectBase}/${item.segment}` || (item.aliases && item.aliases.some(a => pathname === `${projectBase}/${a}`));
+ return (
+
+
+ {item.label}
+
+ );
+ })}
-
diff --git a/vibn-frontend/components/project/project-icon-rail.tsx b/vibn-frontend/components/project/project-icon-rail.tsx
index 37364c4..86db64f 100644
--- a/vibn-frontend/components/project/project-icon-rail.tsx
+++ b/vibn-frontend/components/project/project-icon-rail.tsx
@@ -37,9 +37,6 @@ export function ProjectIconRail({ workspace, projectId, actions }: Props) {
fontSize: "0.75rem",
fontWeight: 500,
borderRadius: 6,
- display: "flex",
- alignItems: "center",
- height: 24, // Explicitly match device toggles height
textDecoration: "none",
background: isPreviewActive ? "#ffffff" : "transparent",
color: isPreviewActive ? "#18181b" : "#71717a",
@@ -56,9 +53,6 @@ export function ProjectIconRail({ workspace, projectId, actions }: Props) {
fontSize: "0.75rem",
fontWeight: 500,
borderRadius: 6,
- display: "flex",
- alignItems: "center",
- height: 24, // Explicitly match device toggles height
textDecoration: "none",
background: !isPreviewActive ? "#ffffff" : "transparent",
color: !isPreviewActive ? "#18181b" : "#71717a",
@@ -243,16 +237,6 @@ function PreviewDeviceToggles() {
}}
/>
-
- /
-
-
- setCurrentPath("/" + e.target.value.replace(/^\//, ""))
- }
- placeholder="path (e.g. dashboard)"
+
(null);
- const [isChatMinimized, setIsChatMinimized] = useState(false);
-
- // Auto-minimize when navigating to dashboard, auto-open when navigating to preview
- useEffect(() => {
- setIsChatMinimized(!pathname.includes("/preview"));
- }, [pathname]);
-
const messagesEndRef = useRef(null);
const inputRef = useRef(null);
// AbortController for the in-flight /api/chat fetch. Lives in a ref
@@ -2096,9 +2088,12 @@ export function ChatPanel({
}}
onInput={(e) => {
const el = e.currentTarget;
- // Only resize if height actually changed
- el.style.height = "auto";
- el.style.height = Math.min(el.scrollHeight, 240) + "px";
+ const newlines = (el.value.match(/\n/g) || []).length;
+ if ((el as any).lastNewlines !== newlines) {
+ (el as any).lastNewlines = newlines;
+ el.style.height = "auto";
+ el.style.height = Math.min(el.scrollHeight, 240) + "px";
+ }
}}
/>
-
-
-
+ {workspace ? (
+
+
+
+ ) : null}