@industry-theme/file-city-panel 0.4.3 → 0.4.4

package/dist/panels.bundle.js

@@ -51047,11 +51047,17 @@ const createGitTab = (content2, count2) => ({
 });
 const createFilesTab = (content2, count2) => ({
   id: "files",
-  label: "Project",
+  label: "Legend",
   icon: /* @__PURE__ */ jsx(FileCode, { size: 14 }),
   count: count2,
   content: content2
 });
+const createProjectTab = (content2) => ({
+  id: "project",
+  label: "Details",
+  icon: /* @__PURE__ */ jsx(Github, { size: 14 }),
+  content: content2
+});
 const createQualityTab = (content2, count2) => ({
   id: "quality",
   label: "Quality",
@@ -51059,6 +51065,208 @@ const createQualityTab = (content2, count2) => ({
   count: count2,
   content: content2
 });
+function formatCount$1(count2) {
+  if (count2 >= 1e6) {
+    return `${(count2 / 1e6).toFixed(1)}m`;
+  }
+  if (count2 >= 1e3) {
+    return `${(count2 / 1e3).toFixed(1)}k`;
+  }
+  return count2.toString();
+}
+function formatDate(dateString) {
+  const date = new Date(dateString);
+  const now2 = /* @__PURE__ */ new Date();
+  const diffMs = now2.getTime() - date.getTime();
+  const diffDays = Math.floor(diffMs / (1e3 * 60 * 60 * 24));
+  if (diffDays === 0) return "Today";
+  if (diffDays === 1) return "Yesterday";
+  if (diffDays < 7) return `${diffDays} days ago`;
+  if (diffDays < 30) return `${Math.floor(diffDays / 7)} weeks ago`;
+  if (diffDays < 365) return `${Math.floor(diffDays / 30)} months ago`;
+  return `${Math.floor(diffDays / 365)} years ago`;
+}
+const ProjectInfoView = ({
+  github,
+  horizontalPadding = "16px",
+  showHeader = true
+}) => {
+  const { theme: theme2 } = useTheme();
+  return /* @__PURE__ */ jsxs("div", { style: { display: "flex", flexDirection: "column", gap: "12px" }, children: [
+    showHeader && /* @__PURE__ */ jsxs(
+      "div",
+      {
+        style: {
+          display: "flex",
+          alignItems: "center",
+          gap: "6px",
+          padding: `0 ${horizontalPadding}`,
+          fontSize: theme2.fontSizes[0],
+          fontFamily: theme2.fonts.body,
+          fontWeight: 600,
+          color: theme2.colors.textSecondary,
+          textTransform: "uppercase",
+          letterSpacing: "0.5px"
+        },
+        children: [
+          /* @__PURE__ */ jsx(CodeXml, { size: 12 }),
+          "Project Info"
+        ]
+      }
+    ),
+    github.description && /* @__PURE__ */ jsx("div", { style: { padding: `0 ${horizontalPadding}` }, children: /* @__PURE__ */ jsx(
+      "p",
+      {
+        style: {
+          margin: 0,
+          fontSize: theme2.fontSizes[1],
+          fontFamily: theme2.fonts.body,
+          color: theme2.colors.text,
+          lineHeight: 1.5
+        },
+        children: github.description
+      }
+    ) }),
+    /* @__PURE__ */ jsxs(
+      "div",
+      {
+        style: {
+          display: "flex",
+          flexWrap: "wrap",
+          gap: "16px",
+          padding: `0 ${horizontalPadding}`
+        },
+        children: [
+          /* @__PURE__ */ jsxs(
+            "div",
+            {
+              style: {
+                display: "flex",
+                alignItems: "center",
+                gap: "6px",
+                fontSize: theme2.fontSizes[1],
+                fontFamily: theme2.fonts.body,
+                color: theme2.colors.text
+              },
+              title: `${github.stars.toLocaleString()} stars`,
+              children: [
+                /* @__PURE__ */ jsx(Star, { size: 14, color: theme2.colors.textSecondary }),
+                /* @__PURE__ */ jsx("span", { style: { fontWeight: 600 }, children: formatCount$1(github.stars) }),
+                /* @__PURE__ */ jsx("span", { style: { color: theme2.colors.textSecondary }, children: "stars" })
+              ]
+            }
+          ),
+          github.primaryLanguage && /* @__PURE__ */ jsxs(
+            "div",
+            {
+              style: {
+                display: "flex",
+                alignItems: "center",
+                gap: "6px",
+                fontSize: theme2.fontSizes[1],
+                fontFamily: theme2.fonts.body,
+                color: theme2.colors.text
+              },
+              children: [
+                /* @__PURE__ */ jsx(
+                  "div",
+                  {
+                    style: {
+                      width: 10,
+                      height: 10,
+                      borderRadius: "50%",
+                      backgroundColor: theme2.colors.primary
+                    }
+                  }
+                ),
+                /* @__PURE__ */ jsx("span", { children: github.primaryLanguage })
+              ]
+            }
+          )
+        ]
+      }
+    ),
+    github.topics && github.topics.length > 0 && /* @__PURE__ */ jsx(
+      "div",
+      {
+        style: {
+          display: "flex",
+          flexWrap: "wrap",
+          gap: "6px",
+          padding: `0 ${horizontalPadding}`
+        },
+        children: github.topics.slice(0, 8).map((topic) => /* @__PURE__ */ jsx(
+          "span",
+          {
+            style: {
+              padding: "2px 8px",
+              fontSize: theme2.fontSizes[0],
+              fontFamily: theme2.fonts.body,
+              color: theme2.colors.primary,
+              backgroundColor: `${theme2.colors.primary}15`,
+              borderRadius: "12px"
+            },
+            children: topic
+          },
+          topic
+        ))
+      }
+    ),
+    /* @__PURE__ */ jsxs(
+      "div",
+      {
+        style: {
+          display: "flex",
+          flexDirection: "column",
+          gap: "8px",
+          padding: `0 ${horizontalPadding}`
+        },
+        children: [
+          github.lastUpdated && /* @__PURE__ */ jsxs(
+            "div",
+            {
+              style: {
+                display: "flex",
+                alignItems: "center",
+                gap: "6px",
+                fontSize: theme2.fontSizes[0],
+                fontFamily: theme2.fonts.body,
+                color: theme2.colors.textSecondary
+              },
+              children: [
+                /* @__PURE__ */ jsx(Calendar, { size: 12 }),
+                /* @__PURE__ */ jsxs("span", { children: [
+                  "Updated ",
+                  formatDate(github.lastUpdated)
+                ] })
+              ]
+            }
+          ),
+          github.defaultBranch && /* @__PURE__ */ jsxs(
+            "div",
+            {
+              style: {
+                display: "flex",
+                alignItems: "center",
+                gap: "6px",
+                fontSize: theme2.fontSizes[0],
+                fontFamily: theme2.fonts.body,
+                color: theme2.colors.textSecondary
+              },
+              children: [
+                /* @__PURE__ */ jsx(Tag, { size: 12 }),
+                /* @__PURE__ */ jsxs("span", { children: [
+                  "Default branch: ",
+                  github.defaultBranch
+                ] })
+              ]
+            }
+          )
+        ]
+      }
+    )
+  ] });
+};
 const COMMON_ICONS = [
   "Package",
   "Folder",
@@ -52134,6 +52342,211 @@ const HoverInfoBar = ({
     }
   );
 };
+const shimmerKeyframes$1 = `
+@keyframes project-header-shimmer {
+  0% { background-position: -200% 0; }
+  100% { background-position: 200% 0; }
+}
+`;
+let shimmerStyleInjected$1 = false;
+function injectShimmerStyles$1() {
+  if (shimmerStyleInjected$1 || typeof document === "undefined") return;
+  const style2 = document.createElement("style");
+  style2.textContent = shimmerKeyframes$1;
+  document.head.appendChild(style2);
+  shimmerStyleInjected$1 = true;
+}
+const ShimmerBox$1 = ({ width, height, borderRadius = 4, backgroundColor }) => /* @__PURE__ */ jsx(
+  "div",
+  {
+    style: {
+      width,
+      height,
+      borderRadius,
+      background: `linear-gradient(90deg, ${backgroundColor} 25%, ${adjustBrightness$1(backgroundColor, 15)} 50%, ${backgroundColor} 75%)`,
+      backgroundSize: "200% 100%",
+      animation: "project-header-shimmer 1.5s ease-in-out infinite"
+    }
+  }
+);
+function adjustBrightness$1(color2, percent) {
+  if (color2.startsWith("#")) {
+    const num = parseInt(color2.slice(1), 16);
+    const r2 = Math.min(255, (num >> 16 & 255) + percent);
+    const g = Math.min(255, (num >> 8 & 255) + percent);
+    const b = Math.min(255, (num & 255) + percent);
+    return `#${(r2 << 16 | g << 8 | b).toString(16).padStart(6, "0")}`;
+  }
+  return color2;
+}
+const ProjectHeaderSkeleton = () => {
+  const { theme: theme2 } = useTheme();
+  React__default.useEffect(() => {
+    injectShimmerStyles$1();
+  }, []);
+  const shimmerBg = theme2.colors.backgroundLight || "#2a2a2a";
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      style: {
+        height: "40px",
+        padding: "0 16px",
+        backgroundColor: theme2.colors.backgroundSecondary,
+        borderBottom: `1px solid ${theme2.colors.border}`,
+        display: "flex",
+        alignItems: "center",
+        gap: "8px"
+      },
+      children: [
+        /* @__PURE__ */ jsx(ShimmerBox$1, { width: 20, height: 20, borderRadius: "50%", backgroundColor: shimmerBg }),
+        /* @__PURE__ */ jsx(ShimmerBox$1, { width: 120, height: 14, backgroundColor: shimmerBg }),
+        /* @__PURE__ */ jsx("div", { style: { flex: 1 } }),
+        /* @__PURE__ */ jsx(ShimmerBox$1, { width: 40, height: 14, backgroundColor: shimmerBg })
+      ]
+    }
+  );
+};
+const ProjectHeader = ({
+  github,
+  hasTour = false,
+  onTourClick,
+  onLearnMore
+}) => {
+  const { theme: theme2 } = useTheme();
+  const htmlUrl = `https://github.com/${github.id}`;
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      style: {
+        height: "40px",
+        padding: "0 16px",
+        backgroundColor: theme2.colors.backgroundSecondary,
+        borderBottom: `1px solid ${theme2.colors.border}`,
+        display: "flex",
+        alignItems: "center",
+        gap: "8px",
+        flexShrink: 0
+      },
+      children: [
+        /* @__PURE__ */ jsx(
+          "img",
+          {
+            src: `https://github.com/${github.owner}.png?size=32`,
+            alt: github.owner,
+            style: {
+              width: 20,
+              height: 20,
+              borderRadius: "50%",
+              flexShrink: 0
+            },
+            title: github.owner
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          "a",
+          {
+            href: htmlUrl,
+            target: "_blank",
+            rel: "noopener noreferrer",
+            style: {
+              fontSize: theme2.fontSizes[1],
+              fontFamily: theme2.fonts.body,
+              fontWeight: 600,
+              color: theme2.colors.text,
+              textDecoration: "none",
+              overflow: "hidden",
+              textOverflow: "ellipsis",
+              whiteSpace: "nowrap"
+            },
+            title: github.description || `${github.owner}/${github.name}`,
+            children: github.name
+          }
+        ),
+        /* @__PURE__ */ jsx("div", { style: { flex: 1 } }),
+        github.license && /* @__PURE__ */ jsxs(
+          "div",
+          {
+            style: {
+              display: "flex",
+              alignItems: "center",
+              gap: "4px",
+              fontSize: theme2.fontSizes[0],
+              fontFamily: theme2.fonts.body,
+              color: theme2.colors.textSecondary
+            },
+            title: `License: ${github.license}`,
+            children: [
+              /* @__PURE__ */ jsx(Scale, { size: 12 }),
+              /* @__PURE__ */ jsx("span", { children: github.license })
+            ]
+          }
+        ),
+        hasTour && onTourClick && /* @__PURE__ */ jsxs(
+          "button",
+          {
+            onClick: onTourClick,
+            style: {
+              display: "flex",
+              alignItems: "center",
+              gap: "4px",
+              padding: "4px 8px",
+              backgroundColor: "transparent",
+              color: theme2.colors.textSecondary,
+              border: "none",
+              borderRadius: "4px",
+              fontSize: theme2.fontSizes[0],
+              fontFamily: theme2.fonts.body,
+              cursor: "pointer",
+              transition: "color 0.2s"
+            },
+            onMouseEnter: (e) => {
+              e.currentTarget.style.color = theme2.colors.primary;
+            },
+            onMouseLeave: (e) => {
+              e.currentTarget.style.color = theme2.colors.textSecondary;
+            },
+            title: "Take a guided tour",
+            children: [
+              /* @__PURE__ */ jsx(BookOpen, { size: 12 }),
+              /* @__PURE__ */ jsx("span", { children: "Tour" })
+            ]
+          }
+        ),
+        onLearnMore && /* @__PURE__ */ jsxs(
+          "button",
+          {
+            onClick: onLearnMore,
+            style: {
+              display: "flex",
+              alignItems: "center",
+              gap: "4px",
+              padding: "4px 8px",
+              backgroundColor: "transparent",
+              color: theme2.colors.textSecondary,
+              border: "none",
+              borderRadius: "4px",
+              fontSize: theme2.fontSizes[0],
+              fontFamily: theme2.fonts.body,
+              cursor: "pointer",
+              transition: "color 0.2s"
+            },
+            onMouseEnter: (e) => {
+              e.currentTarget.style.color = theme2.colors.primary;
+            },
+            onMouseLeave: (e) => {
+              e.currentTarget.style.color = theme2.colors.textSecondary;
+            },
+            title: "Learn more",
+            children: [
+              /* @__PURE__ */ jsx("span", { children: "Learn More" }),
+              /* @__PURE__ */ jsx(ExternalLink, { size: 12 })
+            ]
+          }
+        )
+      ]
+    }
+  );
+};
 function resolveImageUrl(relativePath, context) {
   if (relativePath.startsWith("http://") || relativePath.startsWith("https://")) {
     return relativePath;
@@ -98695,7 +99108,7 @@ const CodeCityPanelContent = ({
   actions,
   events
 }) => {
-  var _a, _b, _c, _d, _e2, _f, _g, _h, _i, _j, _k, _l, _m, _n, _o, _p, _q, _r, _s, _t, _u, _v, _w, _x;
+  var _a, _b, _c, _d, _e2, _f, _g, _h, _i, _j, _k, _l, _m, _n, _o, _p, _q, _r, _s, _t;
   const autoShowTour = ("autoShowTour" in context ? context.autoShowTour : false) ?? false;
   const { theme: theme2 } = useTheme();
   const [cityData, setCityData] = useState(null);
@@ -98722,7 +99135,6 @@ const CodeCityPanelContent = ({
   const [isEditingCover, setIsEditingCover] = useState(false);
   const [coverConfigs, setCoverConfigs] = useState({});
   const [previewCoverOptions, setPreviewCoverOptions] = useState(null);
-  const [showPackageInfo, setShowPackageInfo] = useState(false);
   useEffect(() => {
     const container = contentContainerRef.current;
     if (!container) return;
@@ -98764,17 +99176,15 @@ const CodeCityPanelContent = ({
   const colorModesSlice = context.fileCityColorModes;
   const repositoryEntrySlice = context.repositoryEntry;
   const qualityData = (_c = colorModesSlice == null ? void 0 : colorModesSlice.data) == null ? void 0 : _c.qualityData;
-  const isGitHubPublic = (_e2 = (_d = repositoryEntrySlice == null ? void 0 : repositoryEntrySlice.data) == null ? void 0 : _d.github) == null ? void 0 : _e2.isPublic;
-  const githubRepoString = (_f = context.currentScope.repository) == null ? void 0 : _f.githubRepo;
+  const githubRepoString = (_d = context.currentScope.repository) == null ? void 0 : _d.githubRepo;
   const [repoOwner, repoName] = (githubRepoString == null ? void 0 : githubRepoString.includes("/")) ? githubRepoString.split("/") : [void 0, void 0];
-  const packagesSlice = context.packages;
   const fileColorLayersRegistered = useRef(false);
   const gitLayersRegistered = useRef(false);
   const prFilesLayersRegistered = useRef(false);
   const commitFilesLayersRegistered = useRef(false);
   const agentLayersRegistered = useRef(false);
   const lastHasGitOrAgentLayers = useRef(null);
-  const currentRepoPath = (_g = context.currentScope.repository) == null ? void 0 : _g.path;
+  const currentRepoPath = (_e2 = context.currentScope.repository) == null ? void 0 : _e2.path;
   const lastRepoPath = useRef(currentRepoPath);
   useEffect(() => {
     if (lastRepoPath.current !== currentRepoPath) {
@@ -98830,7 +99240,7 @@ const CodeCityPanelContent = ({
       }
     };
     loadTour();
-  }, [fileTreeSlice == null ? void 0 : fileTreeSlice.data, (_h = context.currentScope.repository) == null ? void 0 : _h.path, context.adapters]);
+  }, [fileTreeSlice == null ? void 0 : fileTreeSlice.data, (_f = context.currentScope.repository) == null ? void 0 : _f.path, context.adapters]);
   useEffect(() => {
     if (autoShowTour && tourData && !hasAutoShownTourRef.current) {
       setShowTourPlayer(true);
@@ -99102,7 +99512,7 @@ const CodeCityPanelContent = ({
       }
     }
     return layers;
-  }, [cityData, (_i = prFilesSlice == null ? void 0 : prFilesSlice.data) == null ? void 0 : _i.filesByStatus, prFilesVersion]);
+  }, [cityData, (_g = prFilesSlice == null ? void 0 : prFilesSlice.data) == null ? void 0 : _g.filesByStatus, prFilesVersion]);
   const commitFilesLayers = useMemo(() => {
     var _a2;
     if (!cityData || !cityData.buildings || !((_a2 = commitFilesSlice == null ? void 0 : commitFilesSlice.data) == null ? void 0 : _a2.filesByStatus)) {
@@ -99180,7 +99590,7 @@ const CodeCityPanelContent = ({
       }
     }
     return layers;
-  }, [cityData, (_j = commitFilesSlice == null ? void 0 : commitFilesSlice.data) == null ? void 0 : _j.filesByStatus, commitFilesVersion]);
+  }, [cityData, (_h = commitFilesSlice == null ? void 0 : commitFilesSlice.data) == null ? void 0 : _h.filesByStatus, commitFilesVersion]);
   const storyboardLayers = useMemo(() => {
     if (!cityData || !cityData.buildings || !(storyboardContextSlice == null ? void 0 : storyboardContextSlice.data)) {
       return [];
@@ -99281,7 +99691,7 @@ const CodeCityPanelContent = ({
     if (!((_a2 = prFilesSlice == null ? void 0 : prFilesSlice.data) == null ? void 0 : _a2.filesByStatus)) return 0;
     const { added, modified, removed, renamed } = prFilesSlice.data.filesByStatus;
     return added.length + modified.length + removed.length + renamed.length;
-  }, [(_k = prFilesSlice == null ? void 0 : prFilesSlice.data) == null ? void 0 : _k.filesByStatus]);
+  }, [(_i = prFilesSlice == null ? void 0 : prFilesSlice.data) == null ? void 0 : _i.filesByStatus]);
   const legendAgentLayers = useMemo(() => {
     const agentLayers = highlightLayers.filter(
       (layer) => layer.id.startsWith("event-highlight")
@@ -99345,30 +99755,6 @@ const CodeCityPanelContent = ({
       };
     });
   }, [baseLayers, highlightLayers, colorMode]);
-  const legendPackageData = useMemo(() => {
-    var _a2;
-    if (!((_a2 = packagesSlice == null ? void 0 : packagesSlice.data) == null ? void 0 : _a2.packages) || packagesSlice.data.packages.length === 0) {
-      return { packageData: null, workspacePackageCount: 0 };
-    }
-    const rootPackage = packagesSlice.data.packages.find((pkg) => pkg.packageData.path === "") || packagesSlice.data.packages[0];
-    const workspaceCount = packagesSlice.data.summary.isMonorepo ? packagesSlice.data.summary.workspacePackages.length : 0;
-    return {
-      packageData: {
-        name: rootPackage.packageData.name,
-        path: rootPackage.packageData.path,
-        version: rootPackage.packageData.version,
-        description: rootPackage.packageData.description,
-        license: rootPackage.packageData.license,
-        packageManager: rootPackage.packageData.packageManager,
-        dependencies: rootPackage.packageData.dependencies || {},
-        devDependencies: rootPackage.packageData.devDependencies || {},
-        peerDependencies: rootPackage.packageData.peerDependencies || {},
-        availableCommands: rootPackage.packageData.availableCommands,
-        isMonorepoRoot: rootPackage.packageData.isMonorepoRoot
-      },
-      workspacePackageCount: workspaceCount
-    };
-  }, [packagesSlice == null ? void 0 : packagesSlice.data]);
   const toggleAgentLayer = useCallback((id2) => {
     setHighlightLayers((prev) => {
       const agentLayers = prev.filter((l) => l.id.startsWith("event-highlight"));
@@ -99574,7 +99960,7 @@ const CodeCityPanelContent = ({
     } finally {
       setLoading(false);
     }
-  }, [fileTreeSlice == null ? void 0 : fileTreeSlice.data, fileTreeSlice == null ? void 0 : fileTreeSlice.loading, (_l = context.currentScope.repository) == null ? void 0 : _l.path]);
+  }, [fileTreeSlice == null ? void 0 : fileTreeSlice.data, fileTreeSlice == null ? void 0 : fileTreeSlice.loading, (_j = context.currentScope.repository) == null ? void 0 : _j.path]);
   const handleFileClick = useCallback(
     (filePath, type) => {
       if (type === "file") {
@@ -99800,7 +100186,7 @@ const CodeCityPanelContent = ({
       path: tourFilePath,
       commitSha
     };
-  }, [tourFilePath, context.currentScope.repository, (_n = (_m = fileTreeSlice == null ? void 0 : fileTreeSlice.data) == null ? void 0 : _m.metadata) == null ? void 0 : _n.sourceSha]);
+  }, [tourFilePath, context.currentScope.repository, (_l = (_k = fileTreeSlice == null ? void 0 : fileTreeSlice.data) == null ? void 0 : _k.metadata) == null ? void 0 : _l.sourceSha]);
   return /* @__PURE__ */ jsxs(
     "div",
     {
@@ -99812,104 +100198,109 @@ const CodeCityPanelContent = ({
         backgroundColor: theme2.colors.background
       },
       children: [
-        /* @__PURE__ */ jsxs(
-          "div",
+        (repositoryEntrySlice == null ? void 0 : repositoryEntrySlice.loading) ? /* @__PURE__ */ jsx(ProjectHeaderSkeleton, {}) : ((_m = repositoryEntrySlice == null ? void 0 : repositoryEntrySlice.data) == null ? void 0 : _m.github) ? /* @__PURE__ */ jsx(
+          ProjectHeader,
           {
-            style: {
-              height: "40px",
-              padding: "0 16px",
-              backgroundColor: theme2.colors.backgroundSecondary,
-              borderBottom: `1px solid ${theme2.colors.border}`,
-              display: "flex",
-              alignItems: "center",
-              gap: "8px",
-              flexShrink: 0
-            },
-            children: [
-              isGitHubPublic === false ? /* @__PURE__ */ jsx(Lock, { size: 16, color: theme2.colors.textSecondary }) : isGitHubPublic === true ? /* @__PURE__ */ jsx(Globe, { size: 16, color: theme2.colors.textSecondary }) : /* @__PURE__ */ jsx(Building2, { size: 16, color: theme2.colors.primary }),
-              /* @__PURE__ */ jsx(
-                "span",
-                {
-                  style: {
-                    fontSize: theme2.fontSizes[1],
-                    fontFamily: theme2.fonts.body,
-                    color: theme2.colors.textSecondary,
-                    flex: 1
-                  },
-                  title: isGitHubPublic === false ? "This repository is private on GitHub" : isGitHubPublic === true ? "This repository is public on GitHub" : void 0,
-                  children: repoName && repoOwner ? /* @__PURE__ */ jsxs(Fragment, { children: [
-                    /* @__PURE__ */ jsx("span", { style: { color: theme2.colors.text }, children: repoName }),
-                    " by ",
-                    /* @__PURE__ */ jsx("span", { style: { color: theme2.colors.text }, children: repoOwner })
-                  ] }) : "File City"
-                }
-              ),
-              !showTourPlayer && tourData && /* @__PURE__ */ jsxs(
-                "button",
-                {
-                  onClick: () => {
-                    setShowTourPlayer(true);
-                  },
-                  style: {
-                    display: "flex",
-                    alignItems: "center",
-                    gap: "4px",
-                    padding: "4px 8px",
-                    backgroundColor: "transparent",
-                    color: theme2.colors.textSecondary,
-                    border: "none",
-                    borderRadius: "4px",
-                    fontSize: theme2.fontSizes[0],
-                    fontFamily: theme2.fonts.body,
-                    cursor: "pointer",
-                    transition: "color 0.2s"
-                  },
-                  onMouseEnter: (e) => {
-                    e.currentTarget.style.color = theme2.colors.primary;
-                  },
-                  onMouseLeave: (e) => {
-                    e.currentTarget.style.color = theme2.colors.textSecondary;
-                  },
-                  title: "Take a guided tour",
-                  children: [
-                    /* @__PURE__ */ jsx(BookOpen, { size: 12 }),
-                    /* @__PURE__ */ jsx("span", { children: "Tour" })
-                  ]
-                }
-              ),
-              actions.learnMore && /* @__PURE__ */ jsxs(
-                "button",
-                {
-                  onClick: actions.learnMore,
-                  style: {
-                    display: "flex",
-                    alignItems: "center",
-                    gap: "4px",
-                    padding: "4px 8px",
-                    backgroundColor: "transparent",
-                    color: theme2.colors.textSecondary,
-                    border: "none",
-                    borderRadius: "4px",
-                    fontSize: theme2.fontSizes[0],
-                    fontFamily: theme2.fonts.body,
-                    cursor: "pointer",
-                    transition: "color 0.2s"
-                  },
-                  onMouseEnter: (e) => {
-                    e.currentTarget.style.color = theme2.colors.primary;
-                  },
-                  onMouseLeave: (e) => {
-                    e.currentTarget.style.color = theme2.colors.textSecondary;
-                  },
-                  title: "Learn more",
-                  children: [
-                    /* @__PURE__ */ jsx("span", { children: "Learn More" }),
-                    /* @__PURE__ */ jsx(ExternalLink, { size: 12 })
-                  ]
-                }
-              )
-            ]
+            github: repositoryEntrySlice.data.github,
+            hasTour: !showTourPlayer && !!tourData,
+            onTourClick: () => setShowTourPlayer(true),
+            onLearnMore: actions.learnMore
           }
+        ) : (
+          /* Fallback minimal header when no GitHub data */
+          /* @__PURE__ */ jsxs(
+            "div",
+            {
+              style: {
+                height: "40px",
+                padding: "0 16px",
+                backgroundColor: theme2.colors.backgroundSecondary,
+                borderBottom: `1px solid ${theme2.colors.border}`,
+                display: "flex",
+                alignItems: "center",
+                gap: "8px",
+                flexShrink: 0
+              },
+              children: [
+                /* @__PURE__ */ jsx(Building2, { size: 16, color: theme2.colors.primary }),
+                /* @__PURE__ */ jsx(
+                  "span",
+                  {
+                    style: {
+                      fontSize: theme2.fontSizes[1],
+                      fontFamily: theme2.fonts.body,
+                      fontWeight: 600,
+                      color: theme2.colors.text,
+                      flex: 1
+                    },
+                    children: repoName || "File City"
+                  }
+                ),
+                !showTourPlayer && tourData && /* @__PURE__ */ jsxs(
+                  "button",
+                  {
+                    onClick: () => setShowTourPlayer(true),
+                    style: {
+                      display: "flex",
+                      alignItems: "center",
+                      gap: "4px",
+                      padding: "4px 8px",
+                      backgroundColor: "transparent",
+                      color: theme2.colors.textSecondary,
+                      border: "none",
+                      borderRadius: "4px",
+                      fontSize: theme2.fontSizes[0],
+                      fontFamily: theme2.fonts.body,
+                      cursor: "pointer",
+                      transition: "color 0.2s"
+                    },
+                    onMouseEnter: (e) => {
+                      e.currentTarget.style.color = theme2.colors.primary;
+                    },
+                    onMouseLeave: (e) => {
+                      e.currentTarget.style.color = theme2.colors.textSecondary;
+                    },
+                    title: "Take a guided tour",
+                    children: [
+                      /* @__PURE__ */ jsx(BookOpen, { size: 12 }),
+                      /* @__PURE__ */ jsx("span", { children: "Tour" })
+                    ]
+                  }
+                ),
+                actions.learnMore && /* @__PURE__ */ jsxs(
+                  "button",
+                  {
+                    onClick: actions.learnMore,
+                    style: {
+                      display: "flex",
+                      alignItems: "center",
+                      gap: "4px",
+                      padding: "4px 8px",
+                      backgroundColor: "transparent",
+                      color: theme2.colors.textSecondary,
+                      border: "none",
+                      borderRadius: "4px",
+                      fontSize: theme2.fontSizes[0],
+                      fontFamily: theme2.fonts.body,
+                      cursor: "pointer",
+                      transition: "color 0.2s"
+                    },
+                    onMouseEnter: (e) => {
+                      e.currentTarget.style.color = theme2.colors.primary;
+                    },
+                    onMouseLeave: (e) => {
+                      e.currentTarget.style.color = theme2.colors.textSecondary;
+                    },
+                    title: "Learn more",
+                    children: [
+                      /* @__PURE__ */ jsx("span", { children: "Learn More" }),
+                      /* @__PURE__ */ jsx(ExternalLink, { size: 12 })
+                    ]
+                  }
+                )
+              ]
+            }
+          )
         ),
         /* @__PURE__ */ jsxs(
           "div",
@@ -99975,20 +100366,7 @@ const CodeCityPanelContent = ({
                   ]
                 }
               ),
-              showPackageInfo && legendPackageData.packageData ? (
-                // Package Info - shows package details when toggled from footer
-                /* @__PURE__ */ jsx(ContextContainer, { position: layout.legendPosition === "top" ? "bottom" : layout.legendPosition, children: /* @__PURE__ */ jsx(
-                  FileTypesView,
-                  {
-                    fileTypes: legendFileTypes,
-                    packageData: legendPackageData.packageData,
-                    workspacePackageCount: legendPackageData.workspacePackageCount,
-                    onItemClick: toggleFileType,
-                    horizontalPadding: "16px",
-                    showHeader: true
-                  }
-                ) })
-              ) : showTourPlayer && tourData ? (
+              showTourPlayer && tourData ? (
                 // Tour Player - provides guided tour context
                 /* @__PURE__ */ jsx(
                   TourPlayer,
@@ -100154,14 +100532,14 @@ const CodeCityPanelContent = ({
                               fileTypes: [],
                               gitStatus: gitSlice == null ? void 0 : gitSlice.data,
                               panelActions: actions,
-                              prFiles: (_o = prFilesSlice == null ? void 0 : prFilesSlice.data) == null ? void 0 : _o.filesByStatus,
-                              prFileStats: (_p = prFilesSlice == null ? void 0 : prFilesSlice.data) == null ? void 0 : _p.files,
-                              prNumber: (_q = prFilesSlice == null ? void 0 : prFilesSlice.data) == null ? void 0 : _q.pullNumber,
-                              commitFiles: (_r = commitFilesSlice == null ? void 0 : commitFilesSlice.data) == null ? void 0 : _r.filesByStatus,
-                              commitHash: (_s = commitFilesSlice == null ? void 0 : commitFilesSlice.data) == null ? void 0 : _s.commitHash,
-                              commitStats: (_t = commitFilesSlice == null ? void 0 : commitFilesSlice.data) == null ? void 0 : _t.stats,
+                              prFiles: (_n = prFilesSlice == null ? void 0 : prFilesSlice.data) == null ? void 0 : _n.filesByStatus,
+                              prFileStats: (_o = prFilesSlice == null ? void 0 : prFilesSlice.data) == null ? void 0 : _o.files,
+                              prNumber: (_p = prFilesSlice == null ? void 0 : prFilesSlice.data) == null ? void 0 : _p.pullNumber,
+                              commitFiles: (_q = commitFilesSlice == null ? void 0 : commitFilesSlice.data) == null ? void 0 : _q.filesByStatus,
+                              commitHash: (_r = commitFilesSlice == null ? void 0 : commitFilesSlice.data) == null ? void 0 : _r.commitHash,
+                              commitStats: (_s = commitFilesSlice == null ? void 0 : commitFilesSlice.data) == null ? void 0 : _s.stats,
                               fileTree: fileTreeSlice == null ? void 0 : fileTreeSlice.data,
-                              rootPath: (_u = context.currentScope.repository) == null ? void 0 : _u.path,
+                              rootPath: (_t = context.currentScope.repository) == null ? void 0 : _t.path,
                               onGitFileClick: handleLegendFileClick,
                               onGitNodeHover: handleGitNodeHover,
                               onPrFileClick: handleLegendFileClick,
@@ -100178,15 +100556,19 @@ const CodeCityPanelContent = ({
                   }
                 )
               ) : (() => {
-                var _a2, _b2, _c2, _d2, _e3, _f2, _g2;
+                var _a2, _b2, _c2, _d2, _e3, _f2, _g2, _h2;
                 const tabs = [];
-                const hasFileTypesOrPackage = legendFileTypes.length > 0 || legendPackageData.packageData != null;
-                if (hasFileTypesOrPackage) {
+                const githubInfo = (_a2 = repositoryEntrySlice == null ? void 0 : repositoryEntrySlice.data) == null ? void 0 : _a2.github;
+                if (githubInfo) {
+                  tabs.push({
+                    id: "project",
+                    github: githubInfo
+                  });
+                }
+                if (legendFileTypes.length > 0) {
                   tabs.push({
                     id: "files",
-                    fileTypes: legendFileTypes,
-                    packageData: legendPackageData.packageData,
-                    workspacePackageCount: legendPackageData.workspacePackageCount
+                    fileTypes: legendFileTypes
                   });
                 }
                 if (gitChangesCount > 0 && (gitSlice == null ? void 0 : gitSlice.data)) {
@@ -100206,14 +100588,23 @@ const CodeCityPanelContent = ({
                 const validPosition = layout.legendPosition === "top" ? "bottom" : layout.legendPosition;
                 if (tabs.length > 1) {
                   const legendTabs = tabs.map((tab2) => {
-                    if (tab2.id === "files") {
+                    if (tab2.id === "project") {
+                      return createProjectTab(
+                        /* @__PURE__ */ jsx(
+                          ProjectInfoView,
+                          {
+                            github: tab2.github,
+                            horizontalPadding: "16px",
+                            showHeader: false
+                          }
+                        )
+                      );
+                    } else if (tab2.id === "files") {
                       return createFilesTab(
                         /* @__PURE__ */ jsx(
                           FileTypesView,
                           {
                             fileTypes: tab2.fileTypes,
-                            packageData: tab2.packageData,
-                            workspacePackageCount: tab2.workspacePackageCount,
                             onItemClick: toggleFileType,
                             horizontalPadding: "16px",
                             showHeader: false
@@ -100257,19 +100648,25 @@ const CodeCityPanelContent = ({
                     LegendTabs,
                     {
                       tabs: legendTabs,
-                      defaultTab: "files",
+                      defaultTab: githubInfo ? "project" : "files",
                       position: validPosition
                     }
                   );
                 } else if (tabs.length === 1) {
                   const tab2 = tabs[0];
                   return /* @__PURE__ */ jsxs(ContextContainer, { position: validPosition, children: [
+                    tab2.id === "project" && /* @__PURE__ */ jsx(
+                      ProjectInfoView,
+                      {
+                        github: tab2.github,
+                        horizontalPadding: "16px",
+                        showHeader: true
+                      }
+                    ),
                     tab2.id === "files" && /* @__PURE__ */ jsx(
                       FileTypesView,
                       {
                         fileTypes: tab2.fileTypes,
-                        packageData: tab2.packageData,
-                        workspacePackageCount: tab2.workspacePackageCount,
                         onItemClick: toggleFileType,
                         horizontalPadding: "16px",
                         showHeader: true
@@ -100302,18 +100699,16 @@ const CodeCityPanelContent = ({
                     Legend,
                     {
                       fileTypes: legendFileTypes,
-                      packageData: legendPackageData.packageData,
-                      workspacePackageCount: legendPackageData.workspacePackageCount,
                       gitStatus: gitSlice == null ? void 0 : gitSlice.data,
                       panelActions: actions,
-                      prFiles: (_a2 = prFilesSlice == null ? void 0 : prFilesSlice.data) == null ? void 0 : _a2.filesByStatus,
-                      prFileStats: (_b2 = prFilesSlice == null ? void 0 : prFilesSlice.data) == null ? void 0 : _b2.files,
-                      prNumber: (_c2 = prFilesSlice == null ? void 0 : prFilesSlice.data) == null ? void 0 : _c2.pullNumber,
-                      commitFiles: (_d2 = commitFilesSlice == null ? void 0 : commitFilesSlice.data) == null ? void 0 : _d2.filesByStatus,
-                      commitHash: (_e3 = commitFilesSlice == null ? void 0 : commitFilesSlice.data) == null ? void 0 : _e3.commitHash,
-                      commitStats: (_f2 = commitFilesSlice == null ? void 0 : commitFilesSlice.data) == null ? void 0 : _f2.stats,
+                      prFiles: (_b2 = prFilesSlice == null ? void 0 : prFilesSlice.data) == null ? void 0 : _b2.filesByStatus,
+                      prFileStats: (_c2 = prFilesSlice == null ? void 0 : prFilesSlice.data) == null ? void 0 : _c2.files,
+                      prNumber: (_d2 = prFilesSlice == null ? void 0 : prFilesSlice.data) == null ? void 0 : _d2.pullNumber,
+                      commitFiles: (_e3 = commitFilesSlice == null ? void 0 : commitFilesSlice.data) == null ? void 0 : _e3.filesByStatus,
+                      commitHash: (_f2 = commitFilesSlice == null ? void 0 : commitFilesSlice.data) == null ? void 0 : _f2.commitHash,
+                      commitStats: (_g2 = commitFilesSlice == null ? void 0 : commitFilesSlice.data) == null ? void 0 : _g2.stats,
                       fileTree: fileTreeSlice == null ? void 0 : fileTreeSlice.data,
-                      rootPath: (_g2 = context.currentScope.repository) == null ? void 0 : _g2.path,
+                      rootPath: (_h2 = context.currentScope.repository) == null ? void 0 : _h2.path,
                       agentLayers: legendAgentLayers,
                       qualityMetrics: legendQualityMetrics,
                       colorMode,
@@ -100357,64 +100752,36 @@ const CodeCityPanelContent = ({
             children: loading || !cityData ? /* @__PURE__ */ jsxs("div", { style: { display: "flex", alignItems: "center", gap: "6px" }, children: [
               /* @__PURE__ */ jsx(Building2, { size: 14, style: { color: theme2.colors.textSecondary, flexShrink: 0 } }),
               /* @__PURE__ */ jsx("span", { style: { fontSize: theme2.fontSizes[1], fontFamily: theme2.fonts.body, color: theme2.colors.textSecondary }, children: "Building File City..." })
-            ] }) : /* @__PURE__ */ jsxs(Fragment, { children: [
-              /* @__PURE__ */ jsx("div", { style: { display: "flex", alignItems: "center", gap: "12px", minWidth: 0, flexShrink: 1 }, children: computedTreeStats && /* @__PURE__ */ jsxs(Fragment, { children: [
-                /* @__PURE__ */ jsxs(
-                  "div",
-                  {
-                    style: { display: "flex", alignItems: "center", gap: "4px", whiteSpace: "nowrap" },
-                    title: `${computedTreeStats.fileCount.toLocaleString()} files`,
-                    children: [
-                      /* @__PURE__ */ jsx(File, { size: 14, style: { color: theme2.colors.textSecondary, flexShrink: 0 } }),
-                      /* @__PURE__ */ jsxs("span", { style: { fontSize: theme2.fontSizes[1], fontFamily: theme2.fonts.body, color: theme2.colors.text }, children: [
-                        computedTreeStats.fileCount.toLocaleString(),
-                        !headerCompact && " files"
-                      ] })
-                    ]
-                  }
-                ),
-                /* @__PURE__ */ jsxs(
-                  "div",
-                  {
-                    style: { display: "flex", alignItems: "center", gap: "4px", whiteSpace: "nowrap" },
-                    title: `${computedTreeStats.directoryCount.toLocaleString()} folders`,
-                    children: [
-                      /* @__PURE__ */ jsx(Folder, { size: 14, style: { color: theme2.colors.textSecondary, flexShrink: 0 } }),
-                      /* @__PURE__ */ jsxs("span", { style: { fontSize: theme2.fontSizes[1], fontFamily: theme2.fonts.body, color: theme2.colors.text }, children: [
-                        computedTreeStats.directoryCount.toLocaleString(),
-                        !headerCompact && " folders"
-                      ] })
-                    ]
-                  }
-                )
-              ] }) }),
-              legendPackageData.packageData && (hasAgentActivity || gitChangesCount > 0 || legendQualityMetrics.length > 0 && colorMode || showTourPlayer || ((_v = prFilesSlice == null ? void 0 : prFilesSlice.data) == null ? void 0 : _v.filesByStatus) || ((_w = commitFilesSlice == null ? void 0 : commitFilesSlice.data) == null ? void 0 : _w.filesByStatus) || ((_x = storyboardContextSlice == null ? void 0 : storyboardContextSlice.data) == null ? void 0 : _x.storyboard)) && /* @__PURE__ */ jsxs(
-                "button",
+            ] }) : /* @__PURE__ */ jsx(Fragment, { children: /* @__PURE__ */ jsx("div", { style: { display: "flex", alignItems: "center", gap: "12px", minWidth: 0, flexShrink: 1 }, children: computedTreeStats && /* @__PURE__ */ jsxs(Fragment, { children: [
+              /* @__PURE__ */ jsxs(
+                "div",
                 {
-                  onClick: () => setShowPackageInfo(!showPackageInfo),
-                  style: {
-                    display: "flex",
-                    alignItems: "center",
-                    gap: "4px",
-                    padding: "4px 8px",
-                    fontSize: theme2.fontSizes[0],
-                    fontFamily: theme2.fonts.body,
-                    color: showPackageInfo ? theme2.colors.primary : theme2.colors.textSecondary,
-                    backgroundColor: showPackageInfo ? `${theme2.colors.primary}15` : "transparent",
-                    border: `1px solid ${showPackageInfo ? theme2.colors.primary : theme2.colors.border}`,
-                    borderRadius: "4px",
-                    cursor: "pointer",
-                    transition: "all 0.15s ease",
-                    whiteSpace: "nowrap"
-                  },
-                  title: showPackageInfo ? "Hide package info" : "Show package info",
+                  style: { display: "flex", alignItems: "center", gap: "4px", whiteSpace: "nowrap" },
+                  title: `${computedTreeStats.fileCount.toLocaleString()} files`,
+                  children: [
+                    /* @__PURE__ */ jsx(File, { size: 14, style: { color: theme2.colors.textSecondary, flexShrink: 0 } }),
+                    /* @__PURE__ */ jsxs("span", { style: { fontSize: theme2.fontSizes[1], fontFamily: theme2.fonts.body, color: theme2.colors.text }, children: [
+                      computedTreeStats.fileCount.toLocaleString(),
+                      !headerCompact && " files"
+                    ] })
+                  ]
+                }
+              ),
+              /* @__PURE__ */ jsxs(
+                "div",
+                {
+                  style: { display: "flex", alignItems: "center", gap: "4px", whiteSpace: "nowrap" },
+                  title: `${computedTreeStats.directoryCount.toLocaleString()} folders`,
                   children: [
-                    /* @__PURE__ */ jsx(Package2, { size: 14 }),
-                    /* @__PURE__ */ jsx("span", { children: legendPackageData.packageData.name })
+                    /* @__PURE__ */ jsx(Folder, { size: 14, style: { color: theme2.colors.textSecondary, flexShrink: 0 } }),
+                    /* @__PURE__ */ jsxs("span", { style: { fontSize: theme2.fontSizes[1], fontFamily: theme2.fonts.body, color: theme2.colors.text }, children: [
+                      computedTreeStats.directoryCount.toLocaleString(),
+                      !headerCompact && " folders"
+                    ] })
                   ]
                 }
               )
-            ] })
+            ] }) }) })
           }
         ),
         isEditingCover && selectedPackagePath && /* @__PURE__ */ jsx(