feat: scope Build file browser to selected app, rename Apps → Build

- Sidebar "Apps" section renamed to "Build"
- Each app now links to /build?app=<name>&root=<path> so the browser
  opens scoped to that app's subdirectory only
- Build page shows an empty-state prompt when no app is selected
- File tree header shows the selected app name, breadcrumb shows
  relative path within the app (strips the root prefix)
- Wraps useSearchParams in Suspense for Next.js static rendering

Made-with: Cursor

app/[workspace]/project/[projectId]/build/page.tsx

@@ -1,7 +1,7 @@
 "use client";
 
-import { useEffect, useState, useCallback } from "react";
+import { useEffect, useState, useCallback, Suspense } from "react";
-import { useParams } from "next/navigation";
+import { useParams, useSearchParams } from "next/navigation";
 import { useSession } from "next-auth/react";
 
 // ── Types ─────────────────────────────────────────────────────────────────────
@@ -22,7 +22,7 @@ interface TreeNode {
   loaded?: boolean;
 }
 
-// ── Language detection for syntax colouring hint ─────────────────────────────
+// ── Language detection ────────────────────────────────────────────────────────
 
 function langFromName(name: string): string {
   const ext = name.split(".").pop()?.toLowerCase() ?? "";
@@ -37,162 +37,157 @@ function langFromName(name: string): string {
   return map[ext] ?? "text";
 }
 
-// ── Icons ─────────────────────────────────────────────────────────────────────
+// ── Simple token highlighter ──────────────────────────────────────────────────
-
-function FileIcon({ name, type }: { name: string; type: "file" | "dir" }) {
-  if (type === "dir") return <span style={{ color: "#d4a04a", fontSize: "0.78rem" }}>▶</span>;
-  const ext = name.split(".").pop()?.toLowerCase() ?? "";
-  const color =
-    ext === "tsx" || ext === "ts" ? "#3178c6"
-    : ext === "jsx" || ext === "js" ? "#f0db4f"
-    : ext === "json" ? "#a09a90"
-    : ext === "css" || ext === "scss" ? "#e879f9"
-    : ext === "md" || ext === "mdx" ? "#6b6560"
-    : ext === "prisma" ? "#5a67d8"
-    : "#b5b0a6";
-  return <span style={{ color, fontSize: "0.7rem" }}>◌</span>;
-}
-
-// ── Simple token-based highlighter ────────────────────────────────────────────
 
 function highlightCode(code: string, lang: string): React.ReactNode[] {
-  if (lang === "text" || lang === "dotenv" || lang === "dockerfile") {
-    return code.split("\n").map((line, i) => (
-      <div key={i}>{line || " "}</div>
-    ));
-  }
-
-  // Split into lines and apply simple token colouring per line
   return code.split("\n").map((line, i) => {
-    const tokens: React.ReactNode[] = [];
+    if (lang === "text" || lang === "dotenv" || lang === "dockerfile") {
-    let remaining = line;
+      return <div key={i}>{line || "\u00a0"}</div>;
-    let ki = 0;
+    }
-
-    // Comment
     const commentPrefixes = ["//", "#", "--"];
-    for (const p of commentPrefixes) {
+    if (commentPrefixes.some(p => line.trimStart().startsWith(p))) {
-      if (remaining.trimStart().startsWith(p)) {
+      return <div key={i}><span style={{ color: "#6a9955" }}>{line}</span></div>;
-        tokens.push(<span key={ki++} style={{ color: "#6a9955" }}>{remaining}</span>);
-        remaining = "";
-        break;
     }
-    }
-
-    if (remaining) {
-      // Keywords
     const kwRe = /\b(import|export|from|const|let|var|function|return|if|else|async|await|type|interface|class|extends|implements|new|default|null|undefined|true|false|void|string|number|boolean|object|Promise|React)\b/g;
-      const parts = remaining.split(kwRe);
+    const parts = line.split(kwRe);
-      for (let j = 0; j < parts.length; j++) {
+    const tokens = parts.map((part, j) => {
-        const part = parts[j];
+      if (!part) return null;
-        if (!part) continue;
+      if (/^(import|export|from|const|let|var|function|return|if|else|async|await|type|interface|class|extends|implements|new|default|null|undefined|true|false|void|string|number|boolean|object|Promise|React)$/.test(part)) {
-        if (kwRe.test(part) || /^(import|export|from|const|let|var|function|return|if|else|async|await|type|interface|class|extends|implements|new|default|null|undefined|true|false|void|string|number|boolean|object|Promise|React)$/.test(part)) {
+        return <span key={j} style={{ color: "#569cd6" }}>{part}</span>;
-          tokens.push(<span key={ki++} style={{ color: "#569cd6" }}>{part}</span>);
-        } else if (/^(['"`]).*\1$/.test(part.trim())) {
-          tokens.push(<span key={ki++} style={{ color: "#ce9178" }}>{part}</span>);
-        } else {
-          tokens.push(<span key={ki++}>{part}</span>);
       }
+      if (/^(['"`]).*\1$/.test(part.trim())) {
+        return <span key={j} style={{ color: "#ce9178" }}>{part}</span>;
       }
-    }
+      return <span key={j}>{part}</span>;
-
+    });
-    return (
+    return <div key={i} style={{ minHeight: "1.4em" }}>{tokens.length ? tokens : "\u00a0"}</div>;
-      <div key={i} style={{ minHeight: "1.4em" }}>
-        {tokens.length > 0 ? tokens : " "}
-      </div>
-    );
   });
 }
 
-// ── File tree node ────────────────────────────────────────────────────────────
+// ── Tree row ──────────────────────────────────────────────────────────────────
 
-function TreeNodeRow({
+function TreeRow({
-  node,
+  node, depth, selectedPath, onSelect, onToggle,
-  depth,
-  selectedPath,
-  onSelect,
-  onToggle,
-  projectId,
 }: {
   node: TreeNode;
   depth: number;
   selectedPath: string | null;
-  onSelect: (path: string, type: "file" | "dir") => void;
+  onSelect: (path: string) => void;
   onToggle: (path: string) => void;
-  projectId: string;
 }) {
   const isSelected = selectedPath === node.path;
   const isDir = node.type === "dir";
+  const ext = node.name.split(".").pop()?.toLowerCase() ?? "";
+  const fileColor =
+    ext === "tsx" || ext === "ts" ? "#3178c6"
+    : ext === "jsx" || ext === "js" ? "#f0db4f"
+    : ext === "css" || ext === "scss" ? "#e879f9"
+    : ext === "json" ? "#a09a90"
+    : ext === "md" || ext === "mdx" ? "#6b6560"
+    : "#b5b0a6";
 
   return (
     <>
       <button
-        onClick={() => isDir ? onToggle(node.path) : onSelect(node.path, "file")}
+        onClick={() => isDir ? onToggle(node.path) : onSelect(node.path)}
         style={{
-          display: "flex", alignItems: "center",
+          display: "flex", alignItems: "center", gap: 6,
-          gap: 6, width: "100%", textAlign: "left",
+          width: "100%", textAlign: "left",
           background: isSelected ? "#f0ece4" : "transparent",
           border: "none", cursor: "pointer",
           padding: `5px 10px 5px ${14 + depth * 14}px`,
-          borderRadius: 4,
+          borderRadius: 4, transition: "background 0.1s",
-          transition: "background 0.1s",
+          fontFamily: "IBM Plex Mono, monospace", fontSize: "0.75rem",
-          fontFamily: "IBM Plex Mono, monospace",
-          fontSize: "0.75rem",
           color: isSelected ? "#1a1a1a" : "#4a4640",
         }}
         onMouseEnter={e => { if (!isSelected) (e.currentTarget as HTMLElement).style.background = "#f6f4f0"; }}
         onMouseLeave={e => { if (!isSelected) (e.currentTarget as HTMLElement).style.background = "transparent"; }}
       >
         {isDir ? (
-          <span style={{ fontSize: "0.55rem", color: "#a09a90", transform: node.expanded ? "rotate(90deg)" : "none", display: "inline-block", transition: "transform 0.12s", flexShrink: 0 }}>▶</span>
+          <span style={{
+            fontSize: "0.52rem", color: "#a09a90", flexShrink: 0,
+            display: "inline-block", transition: "transform 0.12s",
+            transform: node.expanded ? "rotate(90deg)" : "none",
+          }}>▶</span>
         ) : (
-          <FileIcon name={node.name} type="file" />
+          <span style={{ color: fileColor, fontSize: "0.7rem", flexShrink: 0 }}>◌</span>
         )}
         <span style={{ overflow: "hidden", textOverflow: "ellipsis", whiteSpace: "nowrap" }}>
           {node.name}
         </span>
       </button>
-      {isDir && node.expanded && node.children && (
+      {isDir && node.expanded && node.children?.map(child => (
-        node.children.map(child => (
+        <TreeRow
-          <TreeNodeRow
           key={child.path}
           node={child}
           depth={depth + 1}
           selectedPath={selectedPath}
           onSelect={onSelect}
           onToggle={onToggle}
-            projectId={projectId}
         />
-        ))
+      ))}
-      )}
     </>
   );
 }
 
-// ── Main page ─────────────────────────────────────────────────────────────────
+// ── Empty state ───────────────────────────────────────────────────────────────
 
-export default function BuildPage() {
+function EmptyState() {
+  return (
+    <div style={{
+      display: "flex", flexDirection: "column", alignItems: "center", justifyContent: "center",
+      height: "100%", gap: 12, padding: 40,
+    }}>
+      <div style={{
+        width: 48, height: 48, borderRadius: 12, background: "#f0ece4",
+        display: "flex", alignItems: "center", justifyContent: "center",
+        fontSize: "1.4rem", color: "#b5b0a6",
+      }}>▢</div>
+      <div style={{ textAlign: "center" }}>
+        <div style={{ fontSize: "0.88rem", fontWeight: 600, color: "#1a1a1a", marginBottom: 6 }}>
+          Select an app to browse
+        </div>
+        <div style={{ fontSize: "0.78rem", color: "#a09a90", maxWidth: 260, lineHeight: 1.5 }}>
+          Choose one of your apps from the Build section in the left sidebar to explore its files.
+        </div>
+      </div>
+    </div>
+  );
+}
+
+// ── Inner page (needs useSearchParams) ───────────────────────────────────────
+
+function BuildPageInner() {
   const params = useParams();
+  const searchParams = useSearchParams();
   const projectId = params.projectId as string;
   const { status: authStatus } = useSession();
 
-  // File tree state
+  // Which app the user clicked (from sidebar link)
-  const [tree, setTree] = useState<TreeNode[]>([]);
+  const appName = searchParams.get("app") ?? "";
-  const [treeLoading, setTreeLoading] = useState(true);
+  const rootPath = searchParams.get("root") ?? "";
-  const [treeError, setTreeError] = useState<string | null>(null);
 
-  // File content state
+  const [tree, setTree] = useState<TreeNode[]>([]);
+  const [treeLoading, setTreeLoading] = useState(false);
+  const [treeError, setTreeError] = useState<string | null>(null);
   const [selectedPath, setSelectedPath] = useState<string | null>(null);
   const [fileContent, setFileContent] = useState<string | null>(null);
   const [fileLoading, setFileLoading] = useState(false);
   const [fileName, setFileName] = useState<string | null>(null);
 
-  // Fetch a directory listing and return items
   const fetchDir = useCallback(async (path: string): Promise<TreeNode[]> => {
     const res = await fetch(`/api/projects/${projectId}/file?path=${encodeURIComponent(path)}`);
     const data = await res.json();
     if (!res.ok) throw new Error(data.error ?? "Failed to load");
     const items: FileItem[] = data.items ?? [];
-    return items.map(item => ({
+    return items
+      .filter(item => item.type !== "symlink")
+      .sort((a, b) => {
+        if (a.type === "dir" && b.type !== "dir") return -1;
+        if (a.type !== "dir" && b.type === "dir") return 1;
+        return a.name.localeCompare(b.name);
+      })
+      .map(item => ({
         name: item.name,
         path: item.path,
         type: item.type === "dir" ? "dir" : "file",
@@ -202,34 +197,35 @@ export default function BuildPage() {
       }));
   }, [projectId]);
 
-  // Load root tree on mount
+  // Load the app's root dir whenever app changes
   useEffect(() => {
-    if (authStatus !== "authenticated") return;
+    if (!rootPath || authStatus !== "authenticated") return;
+    setTree([]);
+    setSelectedPath(null);
+    setFileContent(null);
+    setTreeError(null);
     setTreeLoading(true);
-    fetchDir("")
+    fetchDir(rootPath)
       .then(nodes => { setTree(nodes); setTreeLoading(false); })
       .catch(e => { setTreeError(e.message); setTreeLoading(false); });
-  }, [authStatus, fetchDir]);
+  }, [rootPath, authStatus, fetchDir]);
 
-  // Toggle dir expand/collapse
+  // Toggle dir expand/collapse with lazy-load
   const handleToggle = useCallback(async (path: string) => {
     setTree(prev => {
       const toggle = (nodes: TreeNode[]): TreeNode[] =>
         nodes.map(n => {
-          if (n.path === path) {
+          if (n.path === path) return { ...n, expanded: !n.expanded };
-            return { ...n, expanded: !n.expanded };
-          }
           if (n.children) return { ...n, children: toggle(n.children) };
           return n;
         });
       return toggle(prev);
     });
 
-    // Lazy-load children if not yet fetched
     const findNode = (nodes: TreeNode[], p: string): TreeNode | null => {
       for (const n of nodes) {
         if (n.path === p) return n;
-        if (n.children) { const found = findNode(n.children, p); if (found) return found; }
+        if (n.children) { const f = findNode(n.children, p); if (f) return f; }
       }
       return null;
     };
@@ -251,7 +247,7 @@ export default function BuildPage() {
     }
   }, [tree, fetchDir]);
 
-  // Select file and load content
+  // Select a file and load its content
   const handleSelectFile = useCallback(async (path: string) => {
     setSelectedPath(path);
     setFileContent(null);
@@ -271,88 +267,89 @@ export default function BuildPage() {
   const lang = fileName ? langFromName(fileName) : "text";
   const lines = (fileContent ?? "").split("\n");
 
-  return (
+  if (!appName || !rootPath) {
-    <div style={{ display: "flex", height: "100%", fontFamily: "Outfit, sans-serif", overflow: "hidden" }}>
+    return <EmptyState />;
+  }
 
-      {/* ── File tree panel ── */}
+  return (
+    <div style={{ display: "flex", height: "100%", overflow: "hidden" }}>
+
+      {/* ── File tree ── */}
       <div style={{
-        width: 240, flexShrink: 0,
+        width: 230, flexShrink: 0,
         borderRight: "1px solid #e8e4dc",
         background: "#faf8f5",
         display: "flex", flexDirection: "column",
         overflow: "hidden",
       }}>
-        {/* Tree header */}
+        {/* App name header */}
         <div style={{
-          padding: "12px 14px 10px",
+          padding: "11px 14px 10px",
           borderBottom: "1px solid #e8e4dc",
-          fontSize: "0.65rem", fontWeight: 700,
+          display: "flex", alignItems: "center", gap: 8, flexShrink: 0,
-          color: "#a09a90", letterSpacing: "0.08em",
-          textTransform: "uppercase", flexShrink: 0,
         }}>
-          Files
+          <span style={{ fontSize: "0.72rem", color: "#a09a90" }}>▢</span>
+          <span style={{ fontSize: "0.78rem", fontWeight: 600, color: "#1a1a1a", fontFamily: "Outfit, sans-serif" }}>
+            {appName}
+          </span>
         </div>
 
-        {/* Tree content */}
+        {/* Tree */}
         <div style={{ flex: 1, overflow: "auto", padding: "6px 4px" }}>
           {treeLoading && (
-            <div style={{ padding: "16px 14px", fontSize: "0.75rem", color: "#b5b0a6" }}>
+            <div style={{ padding: "16px 14px", fontSize: "0.75rem", color: "#b5b0a6", fontFamily: "Outfit, sans-serif" }}>Loading…</div>
-              Loading…
-            </div>
           )}
           {treeError && (
-            <div style={{ padding: "16px 14px", fontSize: "0.75rem", color: "#e53e3e" }}>
+            <div style={{ padding: "16px 14px", fontSize: "0.75rem", color: "#e53e3e", fontFamily: "Outfit, sans-serif" }}>{treeError}</div>
-              {treeError === "No Gitea repo connected"
-                ? "No repository connected yet. Create a project to get started."
-                : treeError}
-            </div>
           )}
           {!treeLoading && !treeError && tree.length === 0 && (
-            <div style={{ padding: "16px 14px", fontSize: "0.75rem", color: "#b5b0a6" }}>
+            <div style={{ padding: "16px 14px", fontSize: "0.75rem", color: "#b5b0a6", fontFamily: "Outfit, sans-serif" }}>Empty folder.</div>
-              Repository is empty.
-            </div>
           )}
           {tree.map(node => (
-            <TreeNodeRow
+            <TreeRow
               key={node.path}
               node={node}
               depth={0}
               selectedPath={selectedPath}
               onSelect={handleSelectFile}
               onToggle={handleToggle}
-              projectId={projectId}
             />
           ))}
         </div>
       </div>
 
-      {/* ── Code preview panel ── */}
+      {/* ── Code preview ── */}
       <div style={{ flex: 1, display: "flex", flexDirection: "column", minWidth: 0, background: "#1e1e1e", overflow: "hidden" }}>
 
-        {/* File path breadcrumb */}
+        {/* Breadcrumb bar */}
         <div style={{
           padding: "10px 20px",
-          borderBottom: "1px solid #333",
+          borderBottom: "1px solid #2d2d2d",
           background: "#252526",
-          display: "flex", alignItems: "center", gap: 8,
+          display: "flex", alignItems: "center", gap: 8, flexShrink: 0,
-          flexShrink: 0,
         }}>
           {selectedPath ? (
             <span style={{ fontFamily: "IBM Plex Mono, monospace", fontSize: "0.73rem", color: "#a09a90" }}>
-              {selectedPath.split("/").map((seg, i, arr) => (
+              {/* Show path relative to rootPath */}
+              {(() => {
+                const rel = selectedPath.startsWith(rootPath + "/")
+                  ? selectedPath.slice(rootPath.length + 1)
+                  : selectedPath;
+                return rel.split("/").map((seg, i, arr) => (
                   <span key={i}>
                     {i > 0 && <span style={{ color: "#555", margin: "0 4px" }}>/</span>}
-                  <span style={{ color: i === arr.length - 1 ? "#d4d4d4" : "#a09a90" }}>{seg}</span>
+                    <span style={{ color: i === arr.length - 1 ? "#d4d4d4" : "#888" }}>{seg}</span>
                   </span>
-              ))}
+                ));
+              })()}
             </span>
           ) : (
             <span style={{ fontFamily: "IBM Plex Mono, monospace", fontSize: "0.73rem", color: "#555" }}>
               Select a file to view
             </span>
           )}
-          {selectedPath && (
+          {fileName && (
-            <span style={{ marginLeft: "auto", fontFamily: "IBM Plex Mono, monospace", fontSize: "0.65rem", color: "#555", textTransform: "uppercase" }}>
+            <span style={{ marginLeft: "auto", fontFamily: "IBM Plex Mono, monospace", fontSize: "0.63rem", color: "#555", textTransform: "uppercase" }}>
               {lang}
             </span>
           )}
@@ -361,12 +358,12 @@ export default function BuildPage() {
         {/* Code area */}
         <div style={{ flex: 1, overflow: "auto", display: "flex" }}>
           {!selectedPath && !fileLoading && (
-            <div style={{ display: "flex", alignItems: "center", justifyContent: "center", width: "100%", color: "#555", fontSize: "0.82rem", fontFamily: "IBM Plex Mono, monospace" }}>
+            <div style={{ display: "flex", alignItems: "center", justifyContent: "center", width: "100%", color: "#555", fontSize: "0.8rem", fontFamily: "IBM Plex Mono, monospace" }}>
               Select a file from the tree
             </div>
           )}
           {fileLoading && (
-            <div style={{ display: "flex", alignItems: "center", justifyContent: "center", width: "100%", color: "#555", fontSize: "0.82rem", fontFamily: "IBM Plex Mono, monospace" }}>
+            <div style={{ display: "flex", alignItems: "center", justifyContent: "center", width: "100%", color: "#555", fontSize: "0.8rem", fontFamily: "IBM Plex Mono, monospace" }}>
               Loading…
             </div>
           )}
@@ -374,36 +371,25 @@ export default function BuildPage() {
             <div style={{ display: "flex", width: "100%", overflow: "auto" }}>
               {/* Line numbers */}
               <div style={{
-                padding: "16px 0",
+                padding: "16px 0", background: "#1e1e1e",
-                background: "#1e1e1e",
                 borderRight: "1px solid #2d2d2d",
-                textAlign: "right",
+                textAlign: "right", userSelect: "none", flexShrink: 0, minWidth: 44,
-                userSelect: "none",
-                flexShrink: 0,
-                minWidth: 44,
               }}>
                 {lines.map((_, i) => (
                   <div key={i} style={{
-                    fontFamily: "IBM Plex Mono, monospace",
+                    fontFamily: "IBM Plex Mono, monospace", fontSize: "0.73rem",
-                    fontSize: "0.73rem",
+                    lineHeight: "1.4em", color: "#555", padding: "0 12px 0 8px",
-                    lineHeight: "1.4em",
-                    color: "#555",
-                    padding: "0 12px 0 8px",
                   }}>
                     {i + 1}
                   </div>
                 ))}
               </div>
-              {/* Code content */}
+              {/* Code */}
               <div style={{
                 padding: "16px 24px",
-                fontFamily: "IBM Plex Mono, monospace",
+                fontFamily: "IBM Plex Mono, monospace", fontSize: "0.73rem",
-                fontSize: "0.73rem",
+                lineHeight: "1.4em", color: "#d4d4d4",
-                lineHeight: "1.4em",
+                flex: 1, whiteSpace: "pre", overflow: "auto",
-                color: "#d4d4d4",
-                flex: 1,
-                whiteSpace: "pre",
-                overflow: "auto",
               }}>
                 {highlightCode(fileContent, lang)}
               </div>
@@ -414,3 +400,13 @@ export default function BuildPage() {
     </div>
   );
 }
+
+// ── Page export (Suspense wraps useSearchParams) ──────────────────────────────
+
+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>}>
+      <BuildPageInner />
+    </Suspense>
+  );
+}

components/layout/vibn-sidebar.tsx

@@ -312,15 +312,15 @@ export function VIBNSidebar({ workspace }: VIBNSidebarProps) {
               </div>
             )}
 
-            {/* ── Apps ── */}
+            {/* ── Build ── */}
-            <SectionHeading label="Apps" collapsed={collapsed} />
+            <SectionHeading label="Build" collapsed={collapsed} />
             {apps.length > 0 ? (
               apps.map(app => (
                 <SectionRow
                   key={app.name}
                   icon="▢"
                   label={app.name}
-                  href={`${base}/build`}
+                  href={`${base}/build?app=${encodeURIComponent(app.name)}&root=${encodeURIComponent(app.path)}`}
                   collapsed={collapsed}
                 />
               ))