@industry-theme/file-city-panel 0.2.19 → 0.2.21

package/dist/panels.bundle.js

@@ -106,7 +106,7 @@ const createLucideIcon = (iconName, iconNode) => {
  * This source code is licensed under the ISC license.
  * See the LICENSE file in the root directory of this source tree.
  */
-const __iconNode$5 = [
+const __iconNode$b = [
   [
     "path",
     {
@@ -115,14 +115,14 @@ const __iconNode$5 = [
     }
   ]
 ];
-const Activity = createLucideIcon("activity", __iconNode$5);
+const Activity = createLucideIcon("activity", __iconNode$b);
 /**
  * @license lucide-react v0.552.0 - ISC
  *
  * This source code is licensed under the ISC license.
  * See the LICENSE file in the root directory of this source tree.
  */
-const __iconNode$4 = [
+const __iconNode$a = [
   ["path", { d: "M10 12h4", key: "a56b0p" }],
   ["path", { d: "M10 8h4", key: "1sr2af" }],
   ["path", { d: "M14 21v-3a2 2 0 0 0-4 0v3", key: "1rgiei" }],
@@ -135,27 +135,105 @@ const __iconNode$4 = [
   ],
   ["path", { d: "M6 21V5a2 2 0 0 1 2-2h8a2 2 0 0 1 2 2v16", key: "16ra0t" }]
 ];
-const Building2 = createLucideIcon("building-2", __iconNode$4);
+const Building2 = createLucideIcon("building-2", __iconNode$a);
 /**
  * @license lucide-react v0.552.0 - ISC
  *
  * This source code is licensed under the ISC license.
  * See the LICENSE file in the root directory of this source tree.
  */
-const __iconNode$3 = [
+const __iconNode$9 = [
   ["path", { d: "M3 3v16a2 2 0 0 0 2 2h16", key: "c24i48" }],
   ["path", { d: "M18 17V9", key: "2bz60n" }],
   ["path", { d: "M13 17V5", key: "1frdt8" }],
   ["path", { d: "M8 17v-3", key: "17ska0" }]
 ];
-const ChartColumn = createLucideIcon("chart-column", __iconNode$3);
+const ChartColumn = createLucideIcon("chart-column", __iconNode$9);
 /**
  * @license lucide-react v0.552.0 - ISC
  *
  * This source code is licensed under the ISC license.
  * See the LICENSE file in the root directory of this source tree.
  */
-const __iconNode$2 = [
+const __iconNode$8 = [["path", { d: "m6 9 6 6 6-6", key: "qrunsl" }]];
+const ChevronDown = createLucideIcon("chevron-down", __iconNode$8);
+/**
+ * @license lucide-react v0.552.0 - ISC
+ *
+ * This source code is licensed under the ISC license.
+ * See the LICENSE file in the root directory of this source tree.
+ */
+const __iconNode$7 = [["path", { d: "m9 18 6-6-6-6", key: "mthhwq" }]];
+const ChevronRight = createLucideIcon("chevron-right", __iconNode$7);
+/**
+ * @license lucide-react v0.552.0 - ISC
+ *
+ * This source code is licensed under the ISC license.
+ * See the LICENSE file in the root directory of this source tree.
+ */
+const __iconNode$6 = [
+  [
+    "path",
+    {
+      d: "M10.733 5.076a10.744 10.744 0 0 1 11.205 6.575 1 1 0 0 1 0 .696 10.747 10.747 0 0 1-1.444 2.49",
+      key: "ct8e1f"
+    }
+  ],
+  ["path", { d: "M14.084 14.158a3 3 0 0 1-4.242-4.242", key: "151rxh" }],
+  [
+    "path",
+    {
+      d: "M17.479 17.499a10.75 10.75 0 0 1-15.417-5.151 1 1 0 0 1 0-.696 10.75 10.75 0 0 1 4.446-5.143",
+      key: "13bj9a"
+    }
+  ],
+  ["path", { d: "m2 2 20 20", key: "1ooewy" }]
+];
+const EyeOff = createLucideIcon("eye-off", __iconNode$6);
+/**
+ * @license lucide-react v0.552.0 - ISC
+ *
+ * This source code is licensed under the ISC license.
+ * See the LICENSE file in the root directory of this source tree.
+ */
+const __iconNode$5 = [
+  [
+    "path",
+    {
+      d: "M2.062 12.348a1 1 0 0 1 0-.696 10.75 10.75 0 0 1 19.876 0 1 1 0 0 1 0 .696 10.75 10.75 0 0 1-19.876 0",
+      key: "1nclc0"
+    }
+  ],
+  ["circle", { cx: "12", cy: "12", r: "3", key: "1v7zrd" }]
+];
+const Eye = createLucideIcon("eye", __iconNode$5);
+/**
+ * @license lucide-react v0.552.0 - ISC
+ *
+ * This source code is licensed under the ISC license.
+ * See the LICENSE file in the root directory of this source tree.
+ */
+const __iconNode$4 = [
+  [
+    "path",
+    {
+      d: "M6 22a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h8a2.4 2.4 0 0 1 1.704.706l3.588 3.588A2.4 2.4 0 0 1 20 8v12a2 2 0 0 1-2 2z",
+      key: "1oefj6"
+    }
+  ],
+  ["path", { d: "M14 2v5a1 1 0 0 0 1 1h5", key: "wfsgrz" }],
+  ["path", { d: "M10 9H8", key: "b1mrlr" }],
+  ["path", { d: "M16 13H8", key: "t4e002" }],
+  ["path", { d: "M16 17H8", key: "z1uh3a" }]
+];
+const FileText = createLucideIcon("file-text", __iconNode$4);
+/**
+ * @license lucide-react v0.552.0 - ISC
+ *
+ * This source code is licensed under the ISC license.
+ * See the LICENSE file in the root directory of this source tree.
+ */
+const __iconNode$3 = [
   [
     "path",
     {
@@ -165,14 +243,14 @@ const __iconNode$2 = [
   ],
   ["path", { d: "M14 2v5a1 1 0 0 0 1 1h5", key: "wfsgrz" }]
 ];
-const File = createLucideIcon("file", __iconNode$2);
+const File = createLucideIcon("file", __iconNode$3);
 /**
  * @license lucide-react v0.552.0 - ISC
  *
  * This source code is licensed under the ISC license.
  * See the LICENSE file in the root directory of this source tree.
  */
-const __iconNode$1 = [
+const __iconNode$2 = [
   [
     "path",
     {
@@ -181,7 +259,20 @@ const __iconNode$1 = [
     }
   ]
 ];
-const Folder = createLucideIcon("folder", __iconNode$1);
+const Folder = createLucideIcon("folder", __iconNode$2);
+/**
+ * @license lucide-react v0.552.0 - ISC
+ *
+ * This source code is licensed under the ISC license.
+ * See the LICENSE file in the root directory of this source tree.
+ */
+const __iconNode$1 = [
+  ["line", { x1: "6", x2: "6", y1: "3", y2: "15", key: "17qcm7" }],
+  ["circle", { cx: "18", cy: "6", r: "3", key: "1h7g24" }],
+  ["circle", { cx: "6", cy: "18", r: "3", key: "fqmcym" }],
+  ["path", { d: "M18 9a9 9 0 0 1-9 9", key: "n2h4wq" }]
+];
+const GitBranch = createLucideIcon("git-branch", __iconNode$1);
 /**
  * @license lucide-react v0.552.0 - ISC
  *
@@ -2148,8 +2239,7 @@ const Legend = ({
   onAgentLayerClick,
   onQualityMetricClick,
   onClearAgentLayers,
-  position = "bottom",
-  maxSize
+  position = "bottom"
 }) => {
   const { theme: theme2 } = useTheme();
   const hasGitStatus = gitStatus && gitStatus.length > 0;
@@ -2179,15 +2269,9 @@ const Legend = ({
         overflowY: "auto",
         overflowX: "hidden",
         boxSizing: "border-box",
-        ...isRight ? {
-          width: maxSize,
-          maxWidth: maxSize,
-          height: "100%"
-        } : {
-          maxHeight: maxSize && maxSize > 0 ? maxSize : void 0,
-          width: "100%"
-        },
-        flexShrink: 0
+        flex: 1,
+        minWidth: 0,
+        minHeight: 0
       },
       children: [
         isEmpty && /* @__PURE__ */ jsxs(
@@ -2635,6 +2719,609 @@ const Legend = ({
     }
   );
 };
+const AgentActivityView = ({
+  layers,
+  onLayerClick,
+  onClearAll,
+  showHeader = true
+}) => {
+  const { theme: theme2 } = useTheme();
+  const [expandedLayers, setExpandedLayers] = React.useState(/* @__PURE__ */ new Set());
+  const toggleExpanded = (id2) => {
+    setExpandedLayers((prev) => {
+      const next = new Set(prev);
+      if (next.has(id2)) {
+        next.delete(id2);
+      } else {
+        next.add(id2);
+      }
+      return next;
+    });
+  };
+  const formatTimestamp = (timestamp) => {
+    const date = new Date(timestamp);
+    return date.toLocaleTimeString(void 0, {
+      hour: "2-digit",
+      minute: "2-digit",
+      second: "2-digit"
+    });
+  };
+  const getFileName = (path) => {
+    const parts = path.split("/");
+    return parts[parts.length - 1];
+  };
+  const getDirectory = (path) => {
+    const parts = path.split("/");
+    if (parts.length <= 1) return "";
+    return parts.slice(0, -1).join("/");
+  };
+  if (layers.length === 0) {
+    return /* @__PURE__ */ jsxs(
+      "div",
+      {
+        style: {
+          display: "flex",
+          flexDirection: "column",
+          flex: 1,
+          backgroundColor: theme2.colors.background,
+          ...showHeader && {
+            border: `1px solid ${theme2.colors.border}`,
+            borderRadius: "6px"
+          },
+          overflow: "hidden"
+        },
+        children: [
+          showHeader && /* @__PURE__ */ jsx(
+            "div",
+            {
+              style: {
+                display: "flex",
+                alignItems: "center",
+                justifyContent: "space-between",
+                padding: "12px 16px",
+                backgroundColor: theme2.colors.backgroundLight,
+                borderBottom: `1px solid ${theme2.colors.border}`
+              },
+              children: /* @__PURE__ */ jsxs(
+                "div",
+                {
+                  style: {
+                    display: "flex",
+                    alignItems: "center",
+                    gap: "8px",
+                    color: theme2.colors.primary,
+                    fontFamily: theme2.fonts.body,
+                    fontWeight: 600,
+                    fontSize: theme2.fontSizes[1]
+                  },
+                  children: [
+                    /* @__PURE__ */ jsx(Activity, { size: 16 }),
+                    "Agent Activity"
+                  ]
+                }
+              )
+            }
+          ),
+          /* @__PURE__ */ jsxs(
+            "div",
+            {
+              style: {
+                display: "flex",
+                flexDirection: "column",
+                alignItems: "center",
+                justifyContent: "center",
+                flex: 1,
+                padding: "32px 16px",
+                color: theme2.colors.textSecondary,
+                fontFamily: theme2.fonts.body,
+                fontSize: theme2.fontSizes[0]
+              },
+              children: [
+                /* @__PURE__ */ jsx(Activity, { size: 32, style: { opacity: 0.3, marginBottom: "8px" } }),
+                /* @__PURE__ */ jsx("span", { children: "No agent activity yet" })
+              ]
+            }
+          )
+        ]
+      }
+    );
+  }
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      style: {
+        display: "flex",
+        flexDirection: "column",
+        flex: 1,
+        backgroundColor: theme2.colors.background,
+        ...showHeader && {
+          border: `1px solid ${theme2.colors.border}`,
+          borderRadius: "6px"
+        },
+        overflow: "hidden"
+      },
+      children: [
+        showHeader && /* @__PURE__ */ jsxs(
+          "div",
+          {
+            style: {
+              display: "flex",
+              alignItems: "center",
+              justifyContent: "space-between",
+              padding: "12px 16px",
+              backgroundColor: theme2.colors.backgroundLight,
+              borderBottom: `1px solid ${theme2.colors.border}`,
+              flexShrink: 0
+            },
+            children: [
+              /* @__PURE__ */ jsxs(
+                "div",
+                {
+                  style: {
+                    display: "flex",
+                    alignItems: "center",
+                    gap: "8px",
+                    color: theme2.colors.primary,
+                    fontFamily: theme2.fonts.body,
+                    fontWeight: 600,
+                    fontSize: theme2.fontSizes[1]
+                  },
+                  children: [
+                    /* @__PURE__ */ jsx(Activity, { size: 16 }),
+                    "Agent Activity",
+                    /* @__PURE__ */ jsx(
+                      "span",
+                      {
+                        style: {
+                          backgroundColor: theme2.colors.primary,
+                          color: theme2.colors.background,
+                          padding: "2px 8px",
+                          borderRadius: "10px",
+                          fontSize: theme2.fontSizes[0],
+                          fontWeight: 500
+                        },
+                        children: layers.length
+                      }
+                    )
+                  ]
+                }
+              ),
+              onClearAll && /* @__PURE__ */ jsxs(
+                "button",
+                {
+                  onClick: onClearAll,
+                  style: {
+                    display: "flex",
+                    alignItems: "center",
+                    gap: "4px",
+                    padding: "4px 10px",
+                    fontSize: theme2.fontSizes[0],
+                    fontFamily: theme2.fonts.body,
+                    color: theme2.colors.textSecondary,
+                    backgroundColor: "transparent",
+                    border: `1px solid ${theme2.colors.border}`,
+                    borderRadius: "4px",
+                    cursor: "pointer",
+                    transition: "all 0.15s ease"
+                  },
+                  title: "Clear all agent activity",
+                  children: [
+                    /* @__PURE__ */ jsx(X, { size: 12 }),
+                    "Clear All"
+                  ]
+                }
+              )
+            ]
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          "div",
+          {
+            style: {
+              display: "flex",
+              flexDirection: "column",
+              flex: 1,
+              overflowY: "auto"
+            },
+            children: [...layers].sort((a, b) => (b.timestamp ?? 0) - (a.timestamp ?? 0)).map((layer, index) => {
+              const isExpanded = expandedLayers.has(layer.id);
+              const fileCount = layer.items.length;
+              return /* @__PURE__ */ jsxs(
+                "div",
+                {
+                  style: {
+                    borderBottom: index < layers.length - 1 ? `1px solid ${theme2.colors.border}` : "none"
+                  },
+                  children: [
+                    /* @__PURE__ */ jsxs(
+                      "div",
+                      {
+                        onClick: () => toggleExpanded(layer.id),
+                        style: {
+                          display: "flex",
+                          alignItems: "center",
+                          gap: "12px",
+                          padding: "12px 16px",
+                          backgroundColor: layer.enabled ? "transparent" : `${theme2.colors.backgroundLight}`,
+                          opacity: layer.enabled ? 1 : 0.6,
+                          cursor: "pointer",
+                          transition: "all 0.15s ease"
+                        },
+                        children: [
+                          /* @__PURE__ */ jsx(
+                            "div",
+                            {
+                              style: {
+                                display: "flex",
+                                alignItems: "center",
+                                justifyContent: "center",
+                                width: "20px",
+                                height: "20px",
+                                color: theme2.colors.textSecondary,
+                                flexShrink: 0
+                              },
+                              children: isExpanded ? /* @__PURE__ */ jsx(ChevronDown, { size: 16 }) : /* @__PURE__ */ jsx(ChevronRight, { size: 16 })
+                            }
+                          ),
+                          /* @__PURE__ */ jsx(
+                            "div",
+                            {
+                              style: {
+                                width: "16px",
+                                height: "16px",
+                                backgroundColor: layer.color,
+                                borderRadius: "4px",
+                                flexShrink: 0,
+                                boxShadow: `0 0 8px ${layer.color}60`
+                              }
+                            }
+                          ),
+                          /* @__PURE__ */ jsxs(
+                            "div",
+                            {
+                              style: {
+                                display: "flex",
+                                flexDirection: "column",
+                                gap: "2px",
+                                flex: 1,
+                                minWidth: 0
+                              },
+                              children: [
+                                /* @__PURE__ */ jsx(
+                                  "div",
+                                  {
+                                    style: {
+                                      display: "flex",
+                                      alignItems: "center",
+                                      gap: "8px"
+                                    },
+                                    children: /* @__PURE__ */ jsx(
+                                      "span",
+                                      {
+                                        style: {
+                                          fontFamily: theme2.fonts.body,
+                                          fontSize: theme2.fontSizes[1],
+                                          fontWeight: 500,
+                                          color: theme2.colors.text,
+                                          overflow: "hidden",
+                                          textOverflow: "ellipsis",
+                                          whiteSpace: "nowrap"
+                                        },
+                                        children: layer.name
+                                      }
+                                    )
+                                  }
+                                ),
+                                /* @__PURE__ */ jsxs(
+                                  "div",
+                                  {
+                                    style: {
+                                      display: "flex",
+                                      alignItems: "center",
+                                      gap: "12px",
+                                      fontFamily: theme2.fonts.body,
+                                      fontSize: theme2.fontSizes[0],
+                                      color: theme2.colors.textSecondary
+                                    },
+                                    children: [
+                                      /* @__PURE__ */ jsxs("span", { children: [
+                                        fileCount,
+                                        " ",
+                                        fileCount === 1 ? "file" : "files"
+                                      ] }),
+                                      layer.timestamp && /* @__PURE__ */ jsx("span", { children: formatTimestamp(layer.timestamp) })
+                                    ]
+                                  }
+                                )
+                              ]
+                            }
+                          ),
+                          /* @__PURE__ */ jsx(
+                            "button",
+                            {
+                              onClick: (e) => {
+                                e.stopPropagation();
+                                onLayerClick == null ? void 0 : onLayerClick(layer.id);
+                              },
+                              style: {
+                                display: "flex",
+                                alignItems: "center",
+                                justifyContent: "center",
+                                width: "32px",
+                                height: "32px",
+                                padding: 0,
+                                backgroundColor: "transparent",
+                                border: `1px solid ${theme2.colors.border}`,
+                                borderRadius: "4px",
+                                cursor: onLayerClick ? "pointer" : "default",
+                                color: layer.enabled ? theme2.colors.primary : theme2.colors.textSecondary,
+                                flexShrink: 0,
+                                transition: "all 0.15s ease"
+                              },
+                              title: layer.enabled ? "Hide layer" : "Show layer",
+                              children: layer.enabled ? /* @__PURE__ */ jsx(Eye, { size: 16 }) : /* @__PURE__ */ jsx(EyeOff, { size: 16 })
+                            }
+                          )
+                        ]
+                      }
+                    ),
+                    isExpanded && /* @__PURE__ */ jsx(
+                      "div",
+                      {
+                        style: {
+                          backgroundColor: theme2.colors.backgroundLight,
+                          borderTop: `1px solid ${theme2.colors.border}`
+                        },
+                        children: layer.items.map((item, itemIndex) => /* @__PURE__ */ jsxs(
+                          "div",
+                          {
+                            style: {
+                              display: "flex",
+                              alignItems: "center",
+                              gap: "8px",
+                              padding: "8px 16px 8px 48px",
+                              borderBottom: itemIndex < layer.items.length - 1 ? `1px solid ${theme2.colors.border}40` : "none"
+                            },
+                            children: [
+                              /* @__PURE__ */ jsx(
+                                FileText,
+                                {
+                                  size: 14,
+                                  style: {
+                                    color: layer.color,
+                                    flexShrink: 0
+                                  }
+                                }
+                              ),
+                              /* @__PURE__ */ jsxs(
+                                "div",
+                                {
+                                  style: {
+                                    display: "flex",
+                                    flexDirection: "column",
+                                    gap: "1px",
+                                    minWidth: 0,
+                                    flex: 1
+                                  },
+                                  children: [
+                                    /* @__PURE__ */ jsx(
+                                      "span",
+                                      {
+                                        style: {
+                                          fontFamily: theme2.fonts.body,
+                                          fontSize: theme2.fontSizes[0],
+                                          color: theme2.colors.text,
+                                          overflow: "hidden",
+                                          textOverflow: "ellipsis",
+                                          whiteSpace: "nowrap"
+                                        },
+                                        children: getFileName(item.path)
+                                      }
+                                    ),
+                                    getDirectory(item.path) && /* @__PURE__ */ jsx(
+                                      "span",
+                                      {
+                                        style: {
+                                          fontFamily: theme2.fonts.body,
+                                          fontSize: "10px",
+                                          color: theme2.colors.textSecondary,
+                                          overflow: "hidden",
+                                          textOverflow: "ellipsis",
+                                          whiteSpace: "nowrap"
+                                        },
+                                        children: getDirectory(item.path)
+                                      }
+                                    )
+                                  ]
+                                }
+                              ),
+                              /* @__PURE__ */ jsx(
+                                "span",
+                                {
+                                  style: {
+                                    fontFamily: theme2.fonts.body,
+                                    fontSize: "10px",
+                                    color: theme2.colors.textSecondary,
+                                    backgroundColor: `${layer.color}20`,
+                                    padding: "2px 6px",
+                                    borderRadius: "3px",
+                                    textTransform: "uppercase",
+                                    flexShrink: 0
+                                  },
+                                  children: item.renderStrategy
+                                }
+                              )
+                            ]
+                          },
+                          item.path
+                        ))
+                      }
+                    )
+                  ]
+                },
+                layer.id
+              );
+            })
+          }
+        )
+      ]
+    }
+  );
+};
+const LegendTabs = ({
+  tabs,
+  defaultTab,
+  onTabChange
+}) => {
+  var _a;
+  const { theme: theme2 } = useTheme();
+  const [activeTab, setActiveTab] = React.useState(
+    defaultTab || ((_a = tabs[0]) == null ? void 0 : _a.id) || "agent"
+  );
+  React.useEffect(() => {
+    if (tabs.length > 0 && !tabs.find((t) => t.id === activeTab)) {
+      setActiveTab(tabs[0].id);
+    }
+  }, [tabs, activeTab]);
+  const handleTabClick = (tabId) => {
+    setActiveTab(tabId);
+    onTabChange == null ? void 0 : onTabChange(tabId);
+  };
+  if (tabs.length === 0) {
+    return /* @__PURE__ */ jsx(
+      "div",
+      {
+        style: {
+          display: "flex",
+          alignItems: "center",
+          justifyContent: "center",
+          flex: 1,
+          padding: "24px 16px",
+          color: theme2.colors.textSecondary,
+          fontFamily: theme2.fonts.body,
+          fontSize: theme2.fontSizes[0],
+          fontStyle: "italic"
+        },
+        children: "No data available"
+      }
+    );
+  }
+  if (tabs.length === 1) {
+    return /* @__PURE__ */ jsx("div", { style: { display: "flex", flexDirection: "column", flex: 1, minHeight: 0 }, children: tabs[0].content });
+  }
+  const activeTabData = tabs.find((t) => t.id === activeTab);
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      style: {
+        display: "flex",
+        flexDirection: "column",
+        flex: 1,
+        minHeight: 0,
+        overflow: "hidden"
+      },
+      children: [
+        /* @__PURE__ */ jsx(
+          "div",
+          {
+            style: {
+              display: "flex",
+              flexShrink: 0
+            },
+            children: tabs.map((tab, index) => {
+              const isActive = tab.id === activeTab;
+              return /* @__PURE__ */ jsxs(
+                "button",
+                {
+                  onClick: () => handleTabClick(tab.id),
+                  style: {
+                    display: "flex",
+                    alignItems: "center",
+                    justifyContent: "center",
+                    gap: "6px",
+                    flex: 1,
+                    padding: "10px 12px",
+                    backgroundColor: theme2.colors.background,
+                    border: `1px solid ${theme2.colors.border}`,
+                    borderBottom: isActive ? `1px solid ${theme2.colors.background}` : `1px solid ${theme2.colors.border}`,
+                    borderLeft: index === 0 ? `1px solid ${theme2.colors.border}` : "none",
+                    marginBottom: "-1px",
+                    cursor: "pointer",
+                    fontFamily: theme2.fonts.body,
+                    fontSize: theme2.fontSizes[0],
+                    fontWeight: isActive ? 600 : 400,
+                    color: isActive ? theme2.colors.text : theme2.colors.textSecondary,
+                    opacity: isActive ? 1 : 0.9,
+                    transition: "all 0.15s ease"
+                  },
+                  children: [
+                    /* @__PURE__ */ jsx(
+                      "span",
+                      {
+                        style: {
+                          display: "flex",
+                          alignItems: "center",
+                          color: isActive ? theme2.colors.primary : theme2.colors.textSecondary
+                        },
+                        children: tab.icon
+                      }
+                    ),
+                    /* @__PURE__ */ jsx("span", { children: tab.label }),
+                    tab.count !== void 0 && tab.count > 0 && /* @__PURE__ */ jsx(
+                      "span",
+                      {
+                        style: {
+                          backgroundColor: isActive ? theme2.colors.primary : theme2.colors.border,
+                          color: isActive ? theme2.colors.background : theme2.colors.textSecondary,
+                          padding: "1px 6px",
+                          borderRadius: "8px",
+                          fontSize: "10px",
+                          fontWeight: 500,
+                          minWidth: "18px",
+                          textAlign: "center"
+                        },
+                        children: tab.count
+                      }
+                    )
+                  ]
+                },
+                tab.id
+              );
+            })
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          "div",
+          {
+            style: {
+              display: "flex",
+              flexDirection: "column",
+              flex: 1,
+              minHeight: 0,
+              overflow: "auto",
+              borderTop: `1px solid ${theme2.colors.border}`
+            },
+            children: activeTabData == null ? void 0 : activeTabData.content
+          }
+        )
+      ]
+    }
+  );
+};
+const createAgentTab = (content, count2) => ({
+  id: "agent",
+  label: "Agent",
+  icon: /* @__PURE__ */ jsx(Activity, { size: 14 }),
+  count: count2,
+  content
+});
+const createGitTab = (content, count2) => ({
+  id: "git",
+  label: "Git",
+  icon: /* @__PURE__ */ jsx(GitBranch, { size: 14 }),
+  count: count2,
+  content
+});
 function getDefaultExportFromCjs(x) {
   return x && x.__esModule && Object.prototype.hasOwnProperty.call(x, "default") ? x["default"] : x;
 }
@@ -14925,7 +15612,6 @@ const CodeCityPanelContent = ({
   const { theme: theme2 } = useTheme();
   const [cityData, setCityData] = useState(null);
   const [hoverInfo, setHoverInfo] = useState(null);
-  const [showLegend, setShowLegend] = useState(true);
   const [highlightLayers, setHighlightLayers] = useState([]);
   const [baseLayers, setBaseLayers] = useState([]);
   const [loading, setLoading] = useState(false);
@@ -14949,24 +15635,22 @@ const CodeCityPanelContent = ({
   }, []);
   const headerCompact = containerSize ? containerSize.width < 400 : false;
   const LEGEND_MIN_SIZE = 200;
+  const HOVER_BAR_HEIGHT = 48;
   const layout = useMemo(() => {
     if (!containerSize) {
-      return { minMapSize: 0, legendPosition: "bottom", legendMaxSize: 0 };
+      return { mapSize: 0, legendPosition: "bottom" };
     }
     const { width, height } = containerSize;
     const isLandscape = width > height;
     if (isLandscape) {
       const idealMapSize = height;
       const availableForLegend = width - idealMapSize;
-      const legendMaxSize = Math.max(availableForLegend, LEGEND_MIN_SIZE);
-      const minMapSize = width - legendMaxSize;
-      return { minMapSize, legendPosition: "right", legendMaxSize };
+      const legendNeedsMoreSpace = availableForLegend < LEGEND_MIN_SIZE;
+      const mapSize = legendNeedsMoreSpace ? width - LEGEND_MIN_SIZE : idealMapSize;
+      return { mapSize, legendPosition: "right" };
     } else {
-      const idealMapSize = width;
-      const availableForLegend = height - idealMapSize;
-      const legendMaxSize = Math.max(availableForLegend, LEGEND_MIN_SIZE);
-      const minMapSize = height - legendMaxSize;
-      return { minMapSize, legendPosition: "bottom", legendMaxSize };
+      const mapSize = width + HOVER_BAR_HEIGHT;
+      return { mapSize, legendPosition: "bottom" };
     }
   }, [containerSize]);
   const fileTreeSlice = context.getSlice("fileTree");
@@ -15264,6 +15948,24 @@ const CodeCityPanelContent = ({
       enabled: layer.enabled
     }));
   }, [highlightLayers]);
+  const agentActivityLayers = useMemo(() => {
+    const agentLayers = highlightLayers.filter(
+      (layer) => layer.id.startsWith("event-highlight")
+    );
+    return agentLayers.map((layer) => ({
+      id: layer.id,
+      name: layer.name,
+      color: layer.color,
+      enabled: layer.enabled,
+      items: layer.items.map((item) => ({
+        path: item.path,
+        type: item.type,
+        renderStrategy: item.renderStrategy || "fill"
+      })),
+      timestamp: layer.timestamp
+    }));
+  }, [highlightLayers]);
+  const hasAgentActivity = agentActivityLayers.length > 0;
   const legendQualityMetrics = useMemo(() => {
     const qualityModeIds = ["coverage", "eslint", "typescript", "prettier", "knip", "alexandria"];
     if (!qualityModeIds.includes(colorMode)) {
@@ -15566,30 +16268,6 @@ const CodeCityPanelContent = ({
                   },
                   children: currentColorModeConfig.name
                 }
-              ),
-              (legendFileTypes.length > 0 || legendGitStatus.length > 0 || legendQualityMetrics.length > 0) && /* @__PURE__ */ jsx(
-                "button",
-                {
-                  onClick: () => setShowLegend(!showLegend),
-                  style: {
-                    fontSize: theme2.fontSizes[0],
-                    fontFamily: theme2.fonts.body,
-                    color: showLegend ? theme2.colors.primary : theme2.colors.textSecondary,
-                    backgroundColor: showLegend ? theme2.colors.primary + "22" : theme2.colors.background,
-                    padding: "0 16px",
-                    marginRight: "-16px",
-                    borderRadius: 0,
-                    display: "flex",
-                    alignItems: "center",
-                    alignSelf: "stretch",
-                    gap: "4px",
-                    border: "none",
-                    cursor: "pointer",
-                    transition: "all 0.2s ease"
-                  },
-                  title: showLegend ? "Hide legend" : "Show legend",
-                  children: "Legend"
-                }
               )
             ]
           }
@@ -15600,6 +16278,7 @@ const CodeCityPanelContent = ({
             ref: contentContainerRef,
             style: {
               flex: 1,
+              width: "100%",
               position: "relative",
               overflow: "hidden",
               display: "flex",
@@ -15610,9 +16289,11 @@ const CodeCityPanelContent = ({
                 "div",
                 {
                   style: {
-                    minWidth: layout.legendPosition === "right" ? layout.minMapSize : void 0,
-                    minHeight: layout.legendPosition === "bottom" ? layout.minMapSize : void 0,
-                    flex: 1,
+                    // In landscape: fixed width for square map, flex height
+                    // In portrait: fixed height for square map + hover bar, full width
+                    width: layout.legendPosition === "right" ? layout.mapSize : "100%",
+                    height: layout.legendPosition === "bottom" ? layout.mapSize : "100%",
+                    flexShrink: 0,
                     position: "relative",
                     display: "flex",
                     flexDirection: "column"
@@ -15818,7 +16499,40 @@ const CodeCityPanelContent = ({
                   ]
                 }
               ),
-              showLegend && /* @__PURE__ */ jsx(
+              hasAgentActivity ? /* @__PURE__ */ jsx(
+                LegendTabs,
+                {
+                  tabs: [
+                    createAgentTab(
+                      /* @__PURE__ */ jsx(
+                        AgentActivityView,
+                        {
+                          layers: agentActivityLayers,
+                          onLayerClick: toggleAgentLayer,
+                          onClearAll: clearAgentLayers,
+                          showHeader: false
+                        }
+                      ),
+                      agentActivityLayers.length
+                    ),
+                    ...legendGitStatus.length > 0 ? [
+                      createGitTab(
+                        /* @__PURE__ */ jsx(
+                          Legend,
+                          {
+                            fileTypes: [],
+                            gitStatus: legendGitStatus,
+                            onGitStatusClick: toggleGitStatus,
+                            position: layout.legendPosition
+                          }
+                        ),
+                        legendGitStatus.reduce((sum, s) => sum + s.count, 0)
+                      )
+                    ] : []
+                  ],
+                  defaultTab: "agent"
+                }
+              ) : /* @__PURE__ */ jsx(
                 Legend,
                 {
                   fileTypes: legendFileTypes,
@@ -15831,8 +16545,7 @@ const CodeCityPanelContent = ({
                   onAgentLayerClick: toggleAgentLayer,
                   onQualityMetricClick: toggleQualityMetric,
                   onClearAgentLayers: clearAgentLayers,
-                  position: layout.legendPosition,
-                  maxSize: layout.legendMaxSize
+                  position: layout.legendPosition
                 }
               )
             ]