fix(codebase): add top bar header frame to file viewer loading states

vibn-frontend/components/project/gitea-file-viewer.tsx

@@ -80,7 +80,7 @@ export function GiteaFileViewer({ projectId, path }: GiteaFileViewerProps) {
 
   if (!path) {
     return (
-      <Centered>
+      <Centered path={path}>
         <FileText size={18} style={{ color: THEME.muted }} />
         <span>Pick a file from the codebase to preview it here.</span>
       </Centered>
@@ -89,7 +89,7 @@ export function GiteaFileViewer({ projectId, path }: GiteaFileViewerProps) {
 
   if (loading) {
     return (
-      <Centered>
+      <Centered path={path}>
         <Loader2
           size={14}
           className="animate-spin"
@@ -102,7 +102,7 @@ export function GiteaFileViewer({ projectId, path }: GiteaFileViewerProps) {
 
   if (error) {
     return (
-      <Centered>
+      <Centered path={path}>
         <AlertCircle size={14} style={{ color: THEME.danger }} />
         <span style={{ color: THEME.danger }}>{error}</span>
       </Centered>
@@ -245,8 +245,43 @@ function basename(p: string) {
   return p.split("/").pop() || p;
 }
 
-function Centered({ children }: { children: React.ReactNode }) {
+function Centered({
+  children,
+  path,
+}: {
+  children: React.ReactNode;
+  path: string | null;
+}) {
   return (
+    <div
+      style={{
+        flex: 1,
+        display: "flex",
+        flexDirection: "column",
+        minHeight: 0,
+        background: THEME.cardBg,
+      }}
+    >
+      <div
+        style={{
+          display: "flex",
+          justifyContent: "space-between",
+          alignItems: "center",
+          padding: "10px 16px",
+          background: THEME.subtleBg,
+          borderBottom: `1px solid ${THEME.borderSoft}`,
+        }}
+      >
+        <div
+          style={{
+            fontSize: "0.85rem",
+            color: THEME.mid,
+            fontWeight: 500,
+          }}
+        >
+          {path || "Select a file"}
+        </div>
+      </div>
       <div
         style={{
           flex: 1,
@@ -262,6 +297,7 @@ function Centered({ children }: { children: React.ReactNode }) {
       >
         {children}
       </div>
+    </div>
   );
 }