@industry-theme/alexandria-panels 0.1.22 → 0.1.24

package/dist/panels.bundle.js

@@ -3,7 +3,7 @@
   try {
     if (typeof document != "undefined") {
       var elementStyle = document.createElement("style");
-      elementStyle.appendChild(document.createTextNode("/* Container query for responsive LocalProjectCard */\n.local-projects-panel {\n  container-type: inline-size;\n  container-name: local-projects;\n  height: 100%;\n}\n\n/* Animated underline that grows from left on hover */\n.local-project-card .project-name-underline {\n  position: relative;\n  text-decoration: none;\n}\n\n.local-project-card .project-name-underline::after {\n  content: '';\n  position: absolute;\n  left: 0;\n  bottom: -3px;\n  width: 0;\n  height: 2px;\n  background-color: var(--underline-color);\n  transition: width 0.2s ease-out;\n}\n\n.local-project-card:hover .project-name-underline::after {\n  width: 100%;\n}\n\n/* Compact mode when container is 400px or less */\n@container local-projects (max-width: 400px) {\n  .local-projects-panel {\n    padding: 8px !important;\n    gap: 8px !important;\n  }\n\n  .local-projects-list {\n    gap: 8px !important;\n  }\n\n  .local-project-card {\n    padding: 8px !important;\n  }\n}"));
+      elementStyle.appendChild(document.createTextNode("/* Container query for responsive LocalProjectCard */\n.local-projects-panel {\n  container-type: inline-size;\n  container-name: local-projects;\n  height: 100%;\n}\n\n/* Animated underline that grows from left on hover */\n.local-project-card .project-name-underline {\n  position: relative;\n  text-decoration: none;\n}\n\n.local-project-card .project-name-underline::after {\n  content: '';\n  position: absolute;\n  left: 0;\n  bottom: -3px;\n  width: 0;\n  height: 2px;\n  background-color: var(--underline-color);\n  transition: width 0.2s ease-out;\n}\n\n.local-project-card:hover .project-name-underline::after {\n  width: 100%;\n}\n\n/* Compact mode when container is 400px or less */\n@container local-projects (max-width: 400px) {\n  .local-projects-panel {\n    padding: 8px !important;\n    gap: 8px !important;\n  }\n\n  .local-projects-list {\n    gap: 8px !important;\n  }\n\n  .local-project-card {\n    padding: 8px !important;\n  }\n}\n/* Shared Panel Styles */\n\n/* Header button hover states */\n.header-button {\n  transition: color 0.2s ease, background-color 0.2s ease, border-color 0.2s ease;\n}\n\n.header-button:not(.active):hover {\n  color: var(--theme-text) !important;\n}\n\n/* Search input focus state */\n.search-input:focus {\n  border-color: var(--theme-primary) !important;\n}\n\n/* Clear filter button hover */\n.clear-filter-button {\n  transition: color 0.2s ease;\n}\n\n.clear-filter-button:hover {\n  color: var(--theme-text) !important;\n}\n\n/* Search overlay animation - grows from right to left */\n.search-overlay {\n  animation: searchExpand 0.2s ease-out forwards;\n}\n\n@keyframes searchExpand {\n  from {\n    clip-path: inset(0 0 0 100%);\n  }\n  to {\n    clip-path: inset(0 0 0 0);\n  }\n}"));
       document.head.appendChild(elementStyle);
     }
   } catch (e) {
@@ -11,7 +11,7 @@
   }
 })();
 import { jsx, jsxs, Fragment } from "react/jsx-runtime";
-import React2, { createContext, useContext, forwardRef, createElement, useState, useMemo, useCallback, useEffect } from "react";
+import React2, { createContext, useContext, forwardRef, createElement, useState, useCallback, useMemo, useEffect } from "react";
 var ThemeContext;
 var getThemeContext = () => {
   if (typeof window !== "undefined") {
@@ -140,7 +140,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$v = [
+const __iconNode$w = [
   ["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" }],
@@ -153,132 +153,132 @@ const __iconNode$v = [
   ],
   ["path", { d: "M6 21V5a2 2 0 0 1 2-2h8a2 2 0 0 1 2 2v16", key: "16ra0t" }]
 ];
-const Building2 = createLucideIcon("building-2", __iconNode$v);
+const Building2 = createLucideIcon("building-2", __iconNode$w);
 /**
  * @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$u = [
+const __iconNode$v = [
   ["path", { d: "M8 2v4", key: "1cmpym" }],
   ["path", { d: "M16 2v4", key: "4m81vk" }],
   ["rect", { width: "18", height: "18", x: "3", y: "4", rx: "2", key: "1hopcy" }],
   ["path", { d: "M3 10h18", key: "8toen8" }]
 ];
-const Calendar = createLucideIcon("calendar", __iconNode$u);
+const Calendar = createLucideIcon("calendar", __iconNode$v);
 /**
  * @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$t = [["path", { d: "M20 6 9 17l-5-5", key: "1gmf2c" }]];
-const Check = createLucideIcon("check", __iconNode$t);
+const __iconNode$u = [["path", { d: "M20 6 9 17l-5-5", key: "1gmf2c" }]];
+const Check = createLucideIcon("check", __iconNode$u);
 /**
  * @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$s = [["path", { d: "m6 9 6 6 6-6", key: "qrunsl" }]];
-const ChevronDown = createLucideIcon("chevron-down", __iconNode$s);
+const __iconNode$t = [["path", { d: "m6 9 6 6 6-6", key: "qrunsl" }]];
+const ChevronDown = createLucideIcon("chevron-down", __iconNode$t);
 /**
  * @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$r = [["path", { d: "m9 18 6-6-6-6", key: "mthhwq" }]];
-const ChevronRight = createLucideIcon("chevron-right", __iconNode$r);
+const __iconNode$s = [["path", { d: "m9 18 6-6-6-6", key: "mthhwq" }]];
+const ChevronRight = createLucideIcon("chevron-right", __iconNode$s);
 /**
  * @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$q = [
+const __iconNode$r = [
   ["circle", { cx: "12", cy: "12", r: "10", key: "1mglay" }],
   ["line", { x1: "12", x2: "12", y1: "8", y2: "12", key: "1pkeuh" }],
   ["line", { x1: "12", x2: "12.01", y1: "16", y2: "16", key: "4dfq90" }]
 ];
-const CircleAlert = createLucideIcon("circle-alert", __iconNode$q);
+const CircleAlert = createLucideIcon("circle-alert", __iconNode$r);
 /**
  * @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$p = [["circle", { cx: "12", cy: "12", r: "10", key: "1mglay" }]];
-const Circle = createLucideIcon("circle", __iconNode$p);
+const __iconNode$q = [["circle", { cx: "12", cy: "12", r: "10", key: "1mglay" }]];
+const Circle = createLucideIcon("circle", __iconNode$q);
 /**
  * @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$o = [
+const __iconNode$p = [
   ["rect", { width: "14", height: "14", x: "8", y: "8", rx: "2", ry: "2", key: "17jyea" }],
   ["path", { d: "M4 16c-1.1 0-2-.9-2-2V4c0-1.1.9-2 2-2h10c1.1 0 2 .9 2 2", key: "zix9uf" }]
 ];
-const Copy = createLucideIcon("copy", __iconNode$o);
+const Copy = createLucideIcon("copy", __iconNode$p);
 /**
  * @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$n = [
+const __iconNode$o = [
   ["path", { d: "M10 12h.01", key: "1kxr2c" }],
   ["path", { d: "M18 20V6a2 2 0 0 0-2-2H8a2 2 0 0 0-2 2v14", key: "36qu9e" }],
   ["path", { d: "M2 20h20", key: "owomy5" }]
 ];
-const DoorClosed = createLucideIcon("door-closed", __iconNode$n);
+const DoorClosed = createLucideIcon("door-closed", __iconNode$o);
 /**
  * @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$m = [
+const __iconNode$n = [
   ["path", { d: "M12 15V3", key: "m9g1x1" }],
   ["path", { d: "M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4", key: "ih7n3h" }],
   ["path", { d: "m7 10 5 5 5-5", key: "brsn70" }]
 ];
-const Download = createLucideIcon("download", __iconNode$m);
+const Download = createLucideIcon("download", __iconNode$n);
 /**
  * @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$l = [
+const __iconNode$m = [
   ["path", { d: "M15 3h6v6", key: "1q9fwt" }],
   ["path", { d: "M10 14 21 3", key: "gplh6r" }],
   ["path", { d: "M18 13v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h6", key: "a6xqqp" }]
 ];
-const ExternalLink = createLucideIcon("external-link", __iconNode$l);
+const ExternalLink = createLucideIcon("external-link", __iconNode$m);
 /**
  * @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$k = [
+const __iconNode$l = [
   ["circle", { cx: "12", cy: "12", r: "3", key: "1v7zrd" }],
   ["path", { d: "M3 7V5a2 2 0 0 1 2-2h2", key: "aa7l1z" }],
   ["path", { d: "M17 3h2a2 2 0 0 1 2 2v2", key: "4qcy5o" }],
   ["path", { d: "M21 17v2a2 2 0 0 1-2 2h-2", key: "6vwrx8" }],
   ["path", { d: "M7 21H5a2 2 0 0 1-2-2v-2", key: "ioqczr" }]
 ];
-const Focus = createLucideIcon("focus", __iconNode$k);
+const Focus = createLucideIcon("focus", __iconNode$l);
 /**
  * @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$j = [
+const __iconNode$k = [
   [
     "path",
     {
@@ -290,14 +290,14 @@ const __iconNode$j = [
   ["path", { d: "M18 19c-2.8 0-5-2.2-5-5v8", key: "pkpw2h" }],
   ["circle", { cx: "20", cy: "19", r: "2", key: "1obnsp" }]
 ];
-const FolderGit2 = createLucideIcon("folder-git-2", __iconNode$j);
+const FolderGit2 = createLucideIcon("folder-git-2", __iconNode$k);
 /**
  * @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$i = [
+const __iconNode$j = [
   [
     "path",
     {
@@ -306,7 +306,25 @@ const __iconNode$i = [
     }
   ]
 ];
-const FolderOpen = createLucideIcon("folder-open", __iconNode$i);
+const FolderOpen = createLucideIcon("folder-open", __iconNode$j);
+/**
+ * @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$i = [
+  ["path", { d: "M12 10v6", key: "1bos4e" }],
+  ["path", { d: "M9 13h6", key: "1uhe8q" }],
+  [
+    "path",
+    {
+      d: "M20 20a2 2 0 0 0 2-2V8a2 2 0 0 0-2-2h-7.9a2 2 0 0 1-1.69-.9L9.6 3.9A2 2 0 0 0 7.93 3H4a2 2 0 0 0-2 2v13a2 2 0 0 0 2 2Z",
+      key: "1kt360"
+    }
+  ]
+];
+const FolderPlus = createLucideIcon("folder-plus", __iconNode$i);
 /**
  * @license lucide-react v0.552.0 - ISC
  *
@@ -1042,10 +1060,22 @@ const LocalProjectsPanelContent = ({
   var _a;
   const { theme } = useTheme();
   const [filter, setFilter] = useState("");
+  const [showSearch, setShowSearch] = useState(false);
   const [isAdding, setIsAdding] = useState(false);
   const [selectedEntry, setSelectedEntry] = useState(null);
   const [windowStates, setWindowStates] = useState(/* @__PURE__ */ new Map());
   const [sortByOrg, setSortByOrg] = useState(false);
+  const handleToggleSearch = useCallback(() => {
+    setShowSearch((prev) => {
+      if (prev) {
+        setFilter("");
+      }
+      return !prev;
+    });
+  }, []);
+  const handleClearFilter = useCallback(() => {
+    setFilter("");
+  }, []);
   const panelActions = actions;
   const repoSlice = context.getSlice("alexandriaRepositories");
   const repositories = useMemo(
@@ -1226,128 +1256,226 @@ const LocalProjectsPanelContent = ({
       "div",
       {
         style: {
+          position: "relative",
           height: "40px",
           minHeight: "40px",
           padding: "0 16px",
           borderBottom: `1px solid ${theme.colors.border}`,
           display: "flex",
           alignItems: "center",
-          gap: "8px"
+          boxSizing: "border-box"
         },
         children: [
-          /* @__PURE__ */ jsx(FolderGit2, { size: 18, style: { color: theme.colors.success || "#10b981" } }),
-          /* @__PURE__ */ jsx(
-            "span",
+          /* @__PURE__ */ jsxs(
+            "div",
             {
               style: {
-                fontSize: `${theme.fontSizes[2]}px`,
-                fontWeight: theme.fontWeights.medium,
-                color: theme.colors.text,
-                fontFamily: theme.fonts.body
+                display: "flex",
+                alignItems: "center",
+                justifyContent: "space-between",
+                width: "100%",
+                visibility: showSearch ? "hidden" : "visible"
               },
-              children: "Local Projects"
+              children: [
+                /* @__PURE__ */ jsxs("div", { style: { display: "flex", alignItems: "center", gap: "8px" }, children: [
+                  /* @__PURE__ */ jsx(FolderGit2, { size: 18, style: { color: theme.colors.success || "#10b981" } }),
+                  /* @__PURE__ */ jsx(
+                    "span",
+                    {
+                      style: {
+                        fontSize: `${theme.fontSizes[2]}px`,
+                        fontWeight: theme.fontWeights.medium,
+                        color: theme.colors.text,
+                        fontFamily: theme.fonts.body
+                      },
+                      children: "Local Projects"
+                    }
+                  ),
+                  repositories.length > 0 && /* @__PURE__ */ jsx(
+                    "span",
+                    {
+                      style: {
+                        fontSize: `${theme.fontSizes[1]}px`,
+                        color: theme.colors.textSecondary,
+                        padding: "2px 8px",
+                        borderRadius: "12px",
+                        backgroundColor: theme.colors.background
+                      },
+                      children: repositories.length
+                    }
+                  )
+                ] }),
+                /* @__PURE__ */ jsxs("div", { style: { display: "flex", alignItems: "center", gap: "8px" }, children: [
+                  /* @__PURE__ */ jsx(
+                    "button",
+                    {
+                      className: `header-button ${showSearch ? "active" : ""}`,
+                      onClick: handleToggleSearch,
+                      style: {
+                        background: showSearch ? theme.colors.backgroundSecondary : "none",
+                        border: `1px solid ${showSearch ? theme.colors.border : "transparent"}`,
+                        borderRadius: "4px",
+                        cursor: "pointer",
+                        padding: "4px",
+                        display: "flex",
+                        alignItems: "center",
+                        justifyContent: "center",
+                        color: showSearch ? theme.colors.primary : theme.colors.textSecondary,
+                        ["--theme-text"]: theme.colors.text
+                      },
+                      title: showSearch ? "Close search" : "Search projects",
+                      children: /* @__PURE__ */ jsx(Search, { size: 16 })
+                    }
+                  ),
+                  /* @__PURE__ */ jsx(
+                    "button",
+                    {
+                      onClick: () => setSortByOrg(!sortByOrg),
+                      title: sortByOrg ? "Sorting by organization" : "Sorting by repo name",
+                      style: {
+                        padding: "4px",
+                        borderRadius: "4px",
+                        border: `1px solid ${sortByOrg ? theme.colors.border : "transparent"}`,
+                        backgroundColor: sortByOrg ? theme.colors.backgroundSecondary : "none",
+                        color: sortByOrg ? theme.colors.primary : theme.colors.textSecondary,
+                        cursor: "pointer",
+                        display: "flex",
+                        alignItems: "center",
+                        justifyContent: "center",
+                        transition: "all 0.15s",
+                        flexShrink: 0
+                      },
+                      children: sortByOrg ? /* @__PURE__ */ jsx(Building2, { size: 16 }) : /* @__PURE__ */ jsx(FolderGit2, { size: 16 })
+                    }
+                  ),
+                  panelActions.selectDirectory && /* @__PURE__ */ jsx(
+                    "button",
+                    {
+                      onClick: handleAddProject,
+                      disabled: isAdding,
+                      title: "Add existing project",
+                      style: {
+                        padding: "4px",
+                        borderRadius: "4px",
+                        border: "none",
+                        backgroundColor: theme.colors.primary,
+                        color: theme.colors.background,
+                        cursor: isAdding ? "default" : "pointer",
+                        display: "flex",
+                        alignItems: "center",
+                        justifyContent: "center",
+                        opacity: isAdding ? 0.6 : 1,
+                        transition: "opacity 0.2s",
+                        flexShrink: 0
+                      },
+                      children: /* @__PURE__ */ jsx(Plus, { size: 16 })
+                    }
+                  )
+                ] })
+              ]
             }
           ),
-          repositories.length > 0 && /* @__PURE__ */ jsx(
-            "span",
+          showSearch && /* @__PURE__ */ jsxs(
+            "div",
             {
+              className: "search-overlay",
               style: {
-                fontSize: `${theme.fontSizes[1]}px`,
-                color: theme.colors.textSecondary,
-                padding: "2px 8px",
-                borderRadius: "12px",
-                backgroundColor: theme.colors.background
+                position: "absolute",
+                top: 0,
+                left: 0,
+                right: 0,
+                bottom: 0,
+                display: "flex",
+                alignItems: "center",
+                padding: "0 16px",
+                backgroundColor: theme.colors.backgroundSecondary,
+                zIndex: 10
               },
-              children: repositories.length
+              children: [
+                /* @__PURE__ */ jsxs("div", { style: { position: "relative", flex: 1, display: "flex", alignItems: "center" }, children: [
+                  /* @__PURE__ */ jsx(
+                    Search,
+                    {
+                      size: 16,
+                      color: theme.colors.textSecondary,
+                      style: {
+                        position: "absolute",
+                        left: "10px",
+                        pointerEvents: "none"
+                      }
+                    }
+                  ),
+                  /* @__PURE__ */ jsx(
+                    "input",
+                    {
+                      type: "text",
+                      className: "search-input",
+                      placeholder: "Filter local projects...",
+                      value: filter,
+                      onChange: (e) => setFilter(e.target.value),
+                      autoFocus: true,
+                      style: {
+                        width: "100%",
+                        padding: "6px 32px 6px 32px",
+                        fontSize: `${theme.fontSizes[1]}px`,
+                        color: theme.colors.text,
+                        backgroundColor: theme.colors.background,
+                        border: `1px solid ${theme.colors.border}`,
+                        borderRadius: "4px",
+                        outline: "none",
+                        fontFamily: theme.fonts.body,
+                        transition: "border-color 0.2s ease",
+                        ["--theme-primary"]: theme.colors.primary
+                      }
+                    }
+                  ),
+                  filter && /* @__PURE__ */ jsx(
+                    "button",
+                    {
+                      className: "clear-filter-button",
+                      onClick: handleClearFilter,
+                      style: {
+                        position: "absolute",
+                        right: "8px",
+                        background: "none",
+                        border: "none",
+                        cursor: "pointer",
+                        padding: "4px",
+                        display: "flex",
+                        alignItems: "center",
+                        justifyContent: "center",
+                        color: theme.colors.textSecondary,
+                        ["--theme-text"]: theme.colors.text
+                      },
+                      children: /* @__PURE__ */ jsx(X, { size: 16 })
+                    }
+                  )
+                ] }),
+                /* @__PURE__ */ jsx(
+                  "button",
+                  {
+                    onClick: handleToggleSearch,
+                    style: {
+                      background: "none",
+                      border: "none",
+                      cursor: "pointer",
+                      padding: "4px",
+                      marginLeft: "8px",
+                      display: "flex",
+                      alignItems: "center",
+                      justifyContent: "center",
+                      color: theme.colors.textSecondary
+                    },
+                    title: "Close search",
+                    children: /* @__PURE__ */ jsx(X, { size: 16 })
+                  }
+                )
+              ]
             }
-          ),
-          /* @__PURE__ */ jsxs("div", { style: { marginLeft: "auto", display: "flex", gap: "8px" }, children: [
-            /* @__PURE__ */ jsx(
-              "button",
-              {
-                onClick: () => setSortByOrg(!sortByOrg),
-                title: sortByOrg ? "Sorting by organization" : "Sorting by repo name",
-                style: {
-                  padding: "6px",
-                  borderRadius: "6px",
-                  border: `1px solid ${theme.colors.border}`,
-                  backgroundColor: sortByOrg ? `${theme.colors.primary}20` : theme.colors.background,
-                  color: sortByOrg ? theme.colors.primary : theme.colors.textSecondary,
-                  cursor: "pointer",
-                  display: "flex",
-                  alignItems: "center",
-                  justifyContent: "center",
-                  transition: "all 0.15s",
-                  flexShrink: 0
-                },
-                children: sortByOrg ? /* @__PURE__ */ jsx(Building2, { size: 16 }) : /* @__PURE__ */ jsx(FolderGit2, { size: 16 })
-              }
-            ),
-            panelActions.selectDirectory && /* @__PURE__ */ jsx(
-              "button",
-              {
-                onClick: handleAddProject,
-                disabled: isAdding,
-                title: "Add existing project",
-                style: {
-                  padding: "6px",
-                  borderRadius: "6px",
-                  border: `1px solid ${theme.colors.border}`,
-                  backgroundColor: theme.colors.primary,
-                  color: theme.colors.background,
-                  cursor: isAdding ? "default" : "pointer",
-                  display: "flex",
-                  alignItems: "center",
-                  justifyContent: "center",
-                  opacity: isAdding ? 0.6 : 1,
-                  transition: "opacity 0.2s",
-                  flexShrink: 0
-                },
-                children: /* @__PURE__ */ jsx(Plus, { size: 16 })
-              }
-            )
-          ] })
+          )
         ]
       }
     ),
-    /* @__PURE__ */ jsx("div", { style: { padding: "8px 16px" }, children: /* @__PURE__ */ jsxs("div", { style: { position: "relative" }, children: [
-      /* @__PURE__ */ jsx(
-        Search,
-        {
-          size: 16,
-          style: {
-            position: "absolute",
-            top: "50%",
-            left: "12px",
-            transform: "translateY(-50%)",
-            color: theme.colors.textSecondary,
-            pointerEvents: "none",
-            zIndex: 1
-          }
-        }
-      ),
-      /* @__PURE__ */ jsx(
-        "input",
-        {
-          type: "text",
-          value: filter,
-          placeholder: "Filter local projects...",
-          onChange: (event) => setFilter(event.target.value),
-          style: {
-            width: "100%",
-            boxSizing: "border-box",
-            padding: "8px 12px 8px 36px",
-            borderRadius: "6px",
-            border: `1px solid ${theme.colors.border}`,
-            backgroundColor: theme.colors.background,
-            color: theme.colors.text,
-            fontSize: `${theme.fontSizes[1]}px`,
-            fontFamily: theme.fonts.body,
-            outline: "none"
-          }
-        }
-      )
-    ] }) }),
     /* @__PURE__ */ jsxs(
       "div",
       {
@@ -3015,6 +3143,19 @@ const WorkspaceCollectionPanelContent = ({
   const { theme } = useTheme();
   const [selectedRepo, setSelectedRepo] = useState(null);
   const [sortField, setSortField] = useState("name");
+  const [filter, setFilter] = useState("");
+  const [showSearch, setShowSearch] = useState(false);
+  const handleToggleSearch = useCallback(() => {
+    setShowSearch((prev) => {
+      if (prev) {
+        setFilter("");
+      }
+      return !prev;
+    });
+  }, []);
+  const handleClearFilter = useCallback(() => {
+    setFilter("");
+  }, []);
   const panelActions = actions;
   const workspaceSlice = context.getSlice("workspace");
   const repositoriesSlice = context.getSlice("workspaceRepositories");
@@ -3049,8 +3190,23 @@ const WorkspaceCollectionPanelContent = ({
   const toggleSort = () => {
     setSortField(sortField === "name" ? "updated" : "name");
   };
-  const sortedRepositories = useMemo(() => {
-    return [...repositories].sort((a, b) => {
+  const normalizedFilter = filter.trim().toLowerCase();
+  const filteredAndSortedRepositories = useMemo(() => {
+    let filtered = repositories;
+    if (normalizedFilter) {
+      filtered = repositories.filter((repo) => {
+        var _a2;
+        const haystack = [
+          repo.name,
+          repo.full_name,
+          ((_a2 = repo.owner) == null ? void 0 : _a2.login) ?? "",
+          repo.description ?? "",
+          repo.language ?? ""
+        ].join(" ").toLowerCase();
+        return haystack.includes(normalizedFilter);
+      });
+    }
+    return [...filtered].sort((a, b) => {
       if (sortField === "name") {
         return a.name.localeCompare(b.name);
       } else {
@@ -3059,7 +3215,7 @@ const WorkspaceCollectionPanelContent = ({
         return bTime - aTime;
       }
     });
-  }, [repositories, sortField]);
+  }, [repositories, sortField, normalizedFilter]);
   const handleSelectRepository = useCallback(
     (repository) => {
       setSelectedRepo(repository);
@@ -3280,64 +3436,199 @@ const WorkspaceCollectionPanelContent = ({
       "div",
       {
         style: {
+          position: "relative",
           height: "40px",
           minHeight: "40px",
           padding: "0 16px",
           borderBottom: `1px solid ${theme.colors.border}`,
           display: "flex",
           alignItems: "center",
-          gap: "8px"
+          boxSizing: "border-box"
         },
         children: [
-          /* @__PURE__ */ jsx(Folder, { size: 18, color: theme.colors.primary }),
-          /* @__PURE__ */ jsx(
-            "span",
+          /* @__PURE__ */ jsxs(
+            "div",
             {
               style: {
-                fontSize: `${theme.fontSizes[2]}px`,
-                fontWeight: theme.fontWeights.medium,
-                color: theme.colors.text,
-                fontFamily: theme.fonts.body
+                display: "flex",
+                alignItems: "center",
+                justifyContent: "space-between",
+                width: "100%",
+                visibility: showSearch ? "hidden" : "visible"
               },
-              children: "Repositories"
+              children: [
+                /* @__PURE__ */ jsxs("div", { style: { display: "flex", alignItems: "center", gap: "8px" }, children: [
+                  /* @__PURE__ */ jsx(Folder, { size: 18, color: theme.colors.primary }),
+                  /* @__PURE__ */ jsx(
+                    "span",
+                    {
+                      style: {
+                        fontSize: `${theme.fontSizes[2]}px`,
+                        fontWeight: theme.fontWeights.medium,
+                        color: theme.colors.text,
+                        fontFamily: theme.fonts.body
+                      },
+                      children: "Repositories"
+                    }
+                  ),
+                  repositories.length > 0 && /* @__PURE__ */ jsx(
+                    "span",
+                    {
+                      style: {
+                        fontSize: `${theme.fontSizes[1]}px`,
+                        color: theme.colors.textSecondary,
+                        padding: "2px 8px",
+                        borderRadius: "12px",
+                        backgroundColor: theme.colors.background
+                      },
+                      children: repositories.length
+                    }
+                  )
+                ] }),
+                repositories.length > 0 && /* @__PURE__ */ jsxs("div", { style: { display: "flex", alignItems: "center", gap: "8px" }, children: [
+                  /* @__PURE__ */ jsx(
+                    "button",
+                    {
+                      className: `header-button ${showSearch ? "active" : ""}`,
+                      onClick: handleToggleSearch,
+                      style: {
+                        background: showSearch ? theme.colors.backgroundSecondary : "none",
+                        border: `1px solid ${showSearch ? theme.colors.border : "transparent"}`,
+                        borderRadius: "4px",
+                        cursor: "pointer",
+                        padding: "4px",
+                        display: "flex",
+                        alignItems: "center",
+                        justifyContent: "center",
+                        color: showSearch ? theme.colors.primary : theme.colors.textSecondary,
+                        ["--theme-text"]: theme.colors.text
+                      },
+                      title: showSearch ? "Close search" : "Search repositories",
+                      children: /* @__PURE__ */ jsx(Search, { size: 16 })
+                    }
+                  ),
+                  /* @__PURE__ */ jsx(
+                    "button",
+                    {
+                      onClick: toggleSort,
+                      style: {
+                        padding: "4px 10px",
+                        borderRadius: "4px",
+                        border: `1px solid ${theme.colors.border}`,
+                        background: theme.colors.background,
+                        color: theme.colors.text,
+                        fontSize: `${theme.fontSizes[1]}px`,
+                        fontFamily: theme.fonts.body,
+                        cursor: "pointer",
+                        display: "flex",
+                        alignItems: "center",
+                        gap: "4px"
+                      },
+                      children: sortField === "name" ? "A-Z" : "Recent"
+                    }
+                  )
+                ] })
+              ]
             }
           ),
-          repositories.length > 0 && /* @__PURE__ */ jsxs(Fragment, { children: [
-            /* @__PURE__ */ jsx(
-              "span",
-              {
-                style: {
-                  fontSize: `${theme.fontSizes[1]}px`,
-                  color: theme.colors.textSecondary,
-                  padding: "2px 8px",
-                  borderRadius: "12px",
-                  backgroundColor: theme.colors.background
-                },
-                children: repositories.length
-              }
-            ),
-            /* @__PURE__ */ jsx(
-              "button",
-              {
-                onClick: toggleSort,
-                style: {
-                  marginLeft: "auto",
-                  padding: "4px 10px",
-                  borderRadius: "4px",
-                  border: `1px solid ${theme.colors.border}`,
-                  background: theme.colors.background,
-                  color: theme.colors.text,
-                  fontSize: `${theme.fontSizes[1]}px`,
-                  fontFamily: theme.fonts.body,
-                  cursor: "pointer",
-                  display: "flex",
-                  alignItems: "center",
-                  gap: "4px"
-                },
-                children: sortField === "name" ? "A-Z" : "Recent"
-              }
-            )
-          ] })
+          showSearch && /* @__PURE__ */ jsxs(
+            "div",
+            {
+              className: "search-overlay",
+              style: {
+                position: "absolute",
+                top: 0,
+                left: 0,
+                right: 0,
+                bottom: 0,
+                display: "flex",
+                alignItems: "center",
+                padding: "0 16px",
+                backgroundColor: theme.colors.backgroundSecondary,
+                zIndex: 10
+              },
+              children: [
+                /* @__PURE__ */ jsxs("div", { style: { position: "relative", flex: 1, display: "flex", alignItems: "center" }, children: [
+                  /* @__PURE__ */ jsx(
+                    Search,
+                    {
+                      size: 16,
+                      color: theme.colors.textSecondary,
+                      style: {
+                        position: "absolute",
+                        left: "10px",
+                        pointerEvents: "none"
+                      }
+                    }
+                  ),
+                  /* @__PURE__ */ jsx(
+                    "input",
+                    {
+                      type: "text",
+                      className: "search-input",
+                      placeholder: "Filter repositories...",
+                      value: filter,
+                      onChange: (e) => setFilter(e.target.value),
+                      autoFocus: true,
+                      style: {
+                        width: "100%",
+                        padding: "6px 32px 6px 32px",
+                        fontSize: `${theme.fontSizes[1]}px`,
+                        color: theme.colors.text,
+                        backgroundColor: theme.colors.background,
+                        border: `1px solid ${theme.colors.border}`,
+                        borderRadius: "4px",
+                        outline: "none",
+                        fontFamily: theme.fonts.body,
+                        transition: "border-color 0.2s ease",
+                        ["--theme-primary"]: theme.colors.primary
+                      }
+                    }
+                  ),
+                  filter && /* @__PURE__ */ jsx(
+                    "button",
+                    {
+                      className: "clear-filter-button",
+                      onClick: handleClearFilter,
+                      style: {
+                        position: "absolute",
+                        right: "8px",
+                        background: "none",
+                        border: "none",
+                        cursor: "pointer",
+                        padding: "4px",
+                        display: "flex",
+                        alignItems: "center",
+                        justifyContent: "center",
+                        color: theme.colors.textSecondary,
+                        ["--theme-text"]: theme.colors.text
+                      },
+                      children: /* @__PURE__ */ jsx(X, { size: 16 })
+                    }
+                  )
+                ] }),
+                /* @__PURE__ */ jsx(
+                  "button",
+                  {
+                    onClick: handleToggleSearch,
+                    style: {
+                      background: "none",
+                      border: "none",
+                      cursor: "pointer",
+                      padding: "4px",
+                      marginLeft: "8px",
+                      display: "flex",
+                      alignItems: "center",
+                      justifyContent: "center",
+                      color: theme.colors.textSecondary
+                    },
+                    title: "Close search",
+                    children: /* @__PURE__ */ jsx(X, { size: 16 })
+                  }
+                )
+              ]
+            }
+          )
         ]
       }
     ),
@@ -3399,7 +3690,18 @@ const WorkspaceCollectionPanelContent = ({
               ]
             }
           ),
-          sortedRepositories.map((repository) => /* @__PURE__ */ jsx(
+          filteredAndSortedRepositories.length === 0 && repositories.length > 0 && /* @__PURE__ */ jsx(
+            "div",
+            {
+              style: {
+                padding: "32px",
+                textAlign: "center",
+                color: theme.colors.textSecondary
+              },
+              children: /* @__PURE__ */ jsx("p", { style: { margin: 0 }, children: "No repositories match your filter." })
+            }
+          ),
+          filteredAndSortedRepositories.map((repository) => /* @__PURE__ */ jsx(
             WorkspaceCollectionRepositoryCard,
             {
               repository,
@@ -3471,7 +3773,10 @@ const GitHubRepositoryCard = ({
   onOpen,
   isLoading = false,
   isSelected = false,
-  onSelect
+  onSelect,
+  onAddToCollection,
+  isInCollection = false,
+  collectionName
 }) => {
   const { theme } = useTheme();
   const [isHovered, setIsHovered] = useState(false);
@@ -3506,6 +3811,15 @@ const GitHubRepositoryCard = ({
     },
     [repository.html_url]
   );
+  const handleAddToCollection = useCallback(
+    (e) => {
+      e.stopPropagation();
+      if (onAddToCollection && !isLoading && !isInCollection) {
+        onAddToCollection(repository);
+      }
+    },
+    [onAddToCollection, repository, isLoading, isInCollection]
+  );
   const getRelativeTime = (dateString) => {
     const date = new Date(dateString);
     const now = /* @__PURE__ */ new Date();
@@ -3700,12 +4014,41 @@ const GitHubRepositoryCard = ({
                   children: /* @__PURE__ */ jsx(ExternalLink, { size: 16 })
                 }
               ),
-              isCloned ? /* @__PURE__ */ jsxs(
+              onAddToCollection && /* @__PURE__ */ jsxs(
+                "button",
+                {
+                  type: "button",
+                  onClick: handleAddToCollection,
+                  disabled: isLoading || isInCollection,
+                  style: {
+                    display: "flex",
+                    alignItems: "center",
+                    gap: "6px",
+                    padding: "6px 12px",
+                    borderRadius: "6px",
+                    border: "none",
+                    backgroundColor: isInCollection ? "#10b981" : theme.colors.secondary,
+                    color: isInCollection ? "#ffffff" : theme.colors.text,
+                    fontSize: `${theme.fontSizes[1]}px`,
+                    fontWeight: theme.fontWeights.medium,
+                    fontFamily: theme.fonts.body,
+                    cursor: isLoading || isInCollection ? "not-allowed" : "pointer",
+                    opacity: isLoading ? 0.6 : 1,
+                    transition: "opacity 0.15s, background-color 0.15s"
+                  },
+                  title: isInCollection ? `Already in ${collectionName || "collection"}` : `Add to ${collectionName || "collection"}`,
+                  children: [
+                    isInCollection ? /* @__PURE__ */ jsx(Check, { size: 14 }) : /* @__PURE__ */ jsx(FolderPlus, { size: 14 }),
+                    isInCollection ? "Added" : "Add"
+                  ]
+                }
+              ),
+              isCloned && onOpen && /* @__PURE__ */ jsxs(
                 "button",
                 {
                   type: "button",
                   onClick: handleOpen,
-                  disabled: isLoading || !onOpen,
+                  disabled: isLoading,
                   style: {
                     display: "flex",
                     alignItems: "center",
@@ -3718,8 +4061,8 @@ const GitHubRepositoryCard = ({
                     fontSize: `${theme.fontSizes[1]}px`,
                     fontWeight: theme.fontWeights.medium,
                     fontFamily: theme.fonts.body,
-                    cursor: isLoading || !onOpen ? "not-allowed" : "pointer",
-                    opacity: isLoading || !onOpen ? 0.6 : 1,
+                    cursor: isLoading ? "not-allowed" : "pointer",
+                    opacity: isLoading ? 0.6 : 1,
                     transition: "opacity 0.15s"
                   },
                   title: "Open in workspace",
@@ -3728,12 +4071,13 @@ const GitHubRepositoryCard = ({
                     "Open"
                   ]
                 }
-              ) : /* @__PURE__ */ jsxs(
+              ),
+              !isCloned && onClone && /* @__PURE__ */ jsxs(
                 "button",
                 {
                   type: "button",
                   onClick: handleClone,
-                  disabled: isLoading || !onClone,
+                  disabled: isLoading,
                   style: {
                     display: "flex",
                     alignItems: "center",
@@ -3746,8 +4090,8 @@ const GitHubRepositoryCard = ({
                     fontSize: `${theme.fontSizes[1]}px`,
                     fontWeight: theme.fontWeights.medium,
                     fontFamily: theme.fonts.body,
-                    cursor: isLoading || !onClone ? "not-allowed" : "pointer",
-                    opacity: isLoading || !onClone ? 0.6 : 1,
+                    cursor: isLoading ? "not-allowed" : "pointer",
+                    opacity: isLoading ? 0.6 : 1,
                     transition: "opacity 0.15s"
                   },
                   title: "Clone repository",
@@ -3809,14 +4153,29 @@ const GitHubStarredPanel = (props) => {
 const GitHubStarredPanelContent = ({
   context,
   actions,
-  events
+  events,
+  defaultShowSearch = false
 }) => {
-  var _a, _b, _c;
+  var _a, _b, _c, _d, _e;
   const { theme } = useTheme();
   const [filter, setFilter] = useState("");
+  const [showSearch, setShowSearch] = useState(defaultShowSearch);
   const [selectedRepo, setSelectedRepo] = useState(null);
+  const handleToggleSearch = useCallback(() => {
+    setShowSearch((prev) => {
+      if (prev) {
+        setFilter("");
+      }
+      return !prev;
+    });
+  }, []);
+  const handleClearFilter = useCallback(() => {
+    setFilter("");
+  }, []);
   const starredSlice = context.getSlice("githubStarred");
   const localReposSlice = context.getSlice("alexandriaRepositories");
+  const workspaceSlice = context.getSlice("workspace");
+  const workspaceReposSlice = context.getSlice("workspaceRepositories");
   const repositories = useMemo(
     () => {
       var _a2;
@@ -3833,6 +4192,18 @@ const GitHubStarredPanelContent = ({
     },
     [(_c = localReposSlice == null ? void 0 : localReposSlice.data) == null ? void 0 : _c.repositories]
   );
+  const currentWorkspace = (_d = workspaceSlice == null ? void 0 : workspaceSlice.data) == null ? void 0 : _d.workspace;
+  const collectionName = currentWorkspace == null ? void 0 : currentWorkspace.name;
+  const collectionRepos = useMemo(
+    () => {
+      var _a2;
+      return ((_a2 = workspaceReposSlice == null ? void 0 : workspaceReposSlice.data) == null ? void 0 : _a2.repositories) || [];
+    },
+    [(_e = workspaceReposSlice == null ? void 0 : workspaceReposSlice.data) == null ? void 0 : _e.repositories]
+  );
+  const collectionRepoSet = useMemo(() => {
+    return new Set(collectionRepos.map((r) => r.full_name));
+  }, [collectionRepos]);
   const panelActions = actions;
   const localRepoMap = useMemo(() => {
     const map = /* @__PURE__ */ new Map();
@@ -3918,6 +4289,19 @@ const GitHubStarredPanelContent = ({
       await panelActions.refreshStarred();
     }
   }, [panelActions]);
+  const handleAddToCollection = useCallback(
+    async (repo) => {
+      if (panelActions.addToCollection) {
+        await panelActions.addToCollection(repo);
+        events.emit(
+          createPanelEvent$2(`${PANEL_ID$9}:repository-added-to-collection`, {
+            repository: repo
+          })
+        );
+      }
+    },
+    [panelActions, events]
+  );
   useEffect(() => {
     const unsubscribers = [
       events.on(`${PANEL_ID$9}:filter`, (event) => {
@@ -4102,81 +4486,180 @@ const GitHubStarredPanelContent = ({
       "div",
       {
         style: {
+          position: "relative",
           height: "40px",
           minHeight: "40px",
           padding: "0 16px",
           borderBottom: `1px solid ${theme.colors.border}`,
           display: "flex",
           alignItems: "center",
-          gap: "8px"
+          boxSizing: "border-box"
         },
         children: [
-          /* @__PURE__ */ jsx(Star, { size: 18, style: { color: "#f59e0b" } }),
-          /* @__PURE__ */ jsx(
-            "span",
+          /* @__PURE__ */ jsxs(
+            "div",
             {
               style: {
-                fontSize: `${theme.fontSizes[2]}px`,
-                fontWeight: theme.fontWeights.medium,
-                color: theme.colors.text,
-                fontFamily: theme.fonts.body
+                display: "flex",
+                alignItems: "center",
+                justifyContent: "space-between",
+                width: "100%",
+                visibility: showSearch ? "hidden" : "visible"
               },
-              children: "Starred"
+              children: [
+                /* @__PURE__ */ jsxs("div", { style: { display: "flex", alignItems: "center", gap: "8px" }, children: [
+                  /* @__PURE__ */ jsx(Star, { size: 18, style: { color: "#f59e0b" } }),
+                  /* @__PURE__ */ jsx(
+                    "span",
+                    {
+                      style: {
+                        fontSize: `${theme.fontSizes[2]}px`,
+                        fontWeight: theme.fontWeights.medium,
+                        color: theme.colors.text,
+                        fontFamily: theme.fonts.body
+                      },
+                      children: "Starred"
+                    }
+                  ),
+                  repositories.length > 0 && /* @__PURE__ */ jsx(
+                    "span",
+                    {
+                      style: {
+                        fontSize: `${theme.fontSizes[1]}px`,
+                        color: theme.colors.textSecondary,
+                        padding: "2px 8px",
+                        borderRadius: "12px",
+                        backgroundColor: theme.colors.background
+                      },
+                      children: repositories.length
+                    }
+                  )
+                ] }),
+                /* @__PURE__ */ jsx(
+                  "button",
+                  {
+                    className: `header-button ${showSearch ? "active" : ""}`,
+                    onClick: handleToggleSearch,
+                    style: {
+                      background: showSearch ? theme.colors.backgroundSecondary : "none",
+                      border: `1px solid ${showSearch ? theme.colors.border : "transparent"}`,
+                      borderRadius: "4px",
+                      cursor: "pointer",
+                      padding: "4px",
+                      display: "flex",
+                      alignItems: "center",
+                      justifyContent: "center",
+                      color: showSearch ? theme.colors.primary : theme.colors.textSecondary,
+                      ["--theme-text"]: theme.colors.text
+                    },
+                    title: showSearch ? "Close search" : "Search repositories",
+                    children: /* @__PURE__ */ jsx(Search, { size: 16 })
+                  }
+                )
+              ]
             }
           ),
-          repositories.length > 0 && /* @__PURE__ */ jsx(
-            "span",
+          showSearch && /* @__PURE__ */ jsxs(
+            "div",
             {
+              className: "search-overlay",
               style: {
-                fontSize: `${theme.fontSizes[1]}px`,
-                color: theme.colors.textSecondary,
-                padding: "2px 8px",
-                borderRadius: "12px",
-                backgroundColor: theme.colors.background
+                position: "absolute",
+                top: 0,
+                left: 0,
+                right: 0,
+                bottom: 0,
+                display: "flex",
+                alignItems: "center",
+                padding: "0 16px",
+                backgroundColor: theme.colors.backgroundSecondary,
+                zIndex: 10
               },
-              children: repositories.length
+              children: [
+                /* @__PURE__ */ jsxs("div", { style: { position: "relative", flex: 1, display: "flex", alignItems: "center" }, children: [
+                  /* @__PURE__ */ jsx(
+                    Search,
+                    {
+                      size: 16,
+                      color: theme.colors.textSecondary,
+                      style: {
+                        position: "absolute",
+                        left: "10px",
+                        pointerEvents: "none"
+                      }
+                    }
+                  ),
+                  /* @__PURE__ */ jsx(
+                    "input",
+                    {
+                      type: "text",
+                      className: "search-input",
+                      placeholder: "Filter starred repositories...",
+                      value: filter,
+                      onChange: (e) => setFilter(e.target.value),
+                      autoFocus: true,
+                      style: {
+                        width: "100%",
+                        padding: "6px 32px 6px 32px",
+                        fontSize: `${theme.fontSizes[1]}px`,
+                        color: theme.colors.text,
+                        backgroundColor: theme.colors.background,
+                        border: `1px solid ${theme.colors.border}`,
+                        borderRadius: "4px",
+                        outline: "none",
+                        fontFamily: theme.fonts.body,
+                        transition: "border-color 0.2s ease",
+                        ["--theme-primary"]: theme.colors.primary
+                      }
+                    }
+                  ),
+                  filter && /* @__PURE__ */ jsx(
+                    "button",
+                    {
+                      className: "clear-filter-button",
+                      onClick: handleClearFilter,
+                      style: {
+                        position: "absolute",
+                        right: "8px",
+                        background: "none",
+                        border: "none",
+                        cursor: "pointer",
+                        padding: "4px",
+                        display: "flex",
+                        alignItems: "center",
+                        justifyContent: "center",
+                        color: theme.colors.textSecondary,
+                        ["--theme-text"]: theme.colors.text
+                      },
+                      children: /* @__PURE__ */ jsx(X, { size: 16 })
+                    }
+                  )
+                ] }),
+                /* @__PURE__ */ jsx(
+                  "button",
+                  {
+                    onClick: handleToggleSearch,
+                    style: {
+                      background: "none",
+                      border: "none",
+                      cursor: "pointer",
+                      padding: "4px",
+                      marginLeft: "8px",
+                      display: "flex",
+                      alignItems: "center",
+                      justifyContent: "center",
+                      color: theme.colors.textSecondary
+                    },
+                    title: "Close search",
+                    children: /* @__PURE__ */ jsx(X, { size: 16 })
+                  }
+                )
+              ]
             }
           )
         ]
       }
     ),
-    /* @__PURE__ */ jsxs("div", { style: { position: "relative", padding: "8px 16px" }, children: [
-      /* @__PURE__ */ jsx(
-        Search,
-        {
-          size: 16,
-          style: {
-            position: "absolute",
-            top: "50%",
-            left: "28px",
-            transform: "translateY(-50%)",
-            color: theme.colors.textSecondary,
-            pointerEvents: "none"
-          }
-        }
-      ),
-      /* @__PURE__ */ jsx(
-        "input",
-        {
-          type: "text",
-          value: filter,
-          placeholder: "Filter starred repositories...",
-          onChange: (event) => setFilter(event.target.value),
-          style: {
-            width: "100%",
-            padding: "8px 12px 8px 36px",
-            borderRadius: "6px",
-            border: `1px solid ${theme.colors.border}`,
-            backgroundColor: theme.colors.background,
-            color: theme.colors.text,
-            fontSize: `${theme.fontSizes[1]}px`,
-            fontFamily: theme.fonts.body,
-            outline: "none",
-            boxSizing: "border-box"
-          }
-        }
-      )
-    ] }),
     error && repositories.length > 0 && /* @__PURE__ */ jsxs(
       "div",
       {
@@ -4218,7 +4701,10 @@ const GitHubStarredPanelContent = ({
               onClone: handleClone,
               onOpen: handleOpen,
               onSelect: handleSelect,
-              isSelected: (selectedRepo == null ? void 0 : selectedRepo.id) === repo.id
+              isSelected: (selectedRepo == null ? void 0 : selectedRepo.id) === repo.id,
+              onAddToCollection: currentWorkspace ? handleAddToCollection : void 0,
+              isInCollection: collectionRepoSet.has(repo.full_name),
+              collectionName
             },
             repo.id
           )),
@@ -4317,15 +4803,30 @@ const GitHubProjectsPanel = (props) => {
 const GitHubProjectsPanelContent = ({
   context,
   actions,
-  events
+  events,
+  defaultShowSearch = false
 }) => {
-  var _a, _b, _c, _d, _e, _f;
+  var _a, _b, _c, _d, _e, _f, _g, _h;
   const { theme } = useTheme();
   const [filter, setFilter] = useState("");
+  const [showSearch, setShowSearch] = useState(defaultShowSearch);
   const [collapsedSections, setCollapsedSections] = useState(/* @__PURE__ */ new Set());
   const [selectedRepo, setSelectedRepo] = useState(null);
+  const handleToggleSearch = useCallback(() => {
+    setShowSearch((prev) => {
+      if (prev) {
+        setFilter("");
+      }
+      return !prev;
+    });
+  }, []);
+  const handleClearFilter = useCallback(() => {
+    setFilter("");
+  }, []);
   const projectsSlice = context.getSlice("githubProjects");
   const localReposSlice = context.getSlice("alexandriaRepositories");
+  const workspaceSlice = context.getSlice("workspace");
+  const workspaceReposSlice = context.getSlice("workspaceRepositories");
   const userRepositories = useMemo(
     () => {
       var _a2;
@@ -4357,6 +4858,18 @@ const GitHubProjectsPanelContent = ({
     },
     [(_f = localReposSlice == null ? void 0 : localReposSlice.data) == null ? void 0 : _f.repositories]
   );
+  const currentWorkspace = (_g = workspaceSlice == null ? void 0 : workspaceSlice.data) == null ? void 0 : _g.workspace;
+  const collectionName = currentWorkspace == null ? void 0 : currentWorkspace.name;
+  const collectionRepos = useMemo(
+    () => {
+      var _a2;
+      return ((_a2 = workspaceReposSlice == null ? void 0 : workspaceReposSlice.data) == null ? void 0 : _a2.repositories) || [];
+    },
+    [(_h = workspaceReposSlice == null ? void 0 : workspaceReposSlice.data) == null ? void 0 : _h.repositories]
+  );
+  const collectionRepoSet = useMemo(() => {
+    return new Set(collectionRepos.map((r) => r.full_name));
+  }, [collectionRepos]);
   const panelActions = actions;
   const localRepoMap = useMemo(() => {
     const map = /* @__PURE__ */ new Map();
@@ -4463,6 +4976,19 @@ const GitHubProjectsPanelContent = ({
       await panelActions.refreshProjects();
     }
   }, [panelActions]);
+  const handleAddToCollection = useCallback(
+    async (repo) => {
+      if (panelActions.addToCollection) {
+        await panelActions.addToCollection(repo);
+        events.emit(
+          createPanelEvent$1(`${PANEL_ID$8}:repository-added-to-collection`, {
+            repository: repo
+          })
+        );
+      }
+    },
+    [panelActions, events]
+  );
   const toggleSection = useCallback((owner) => {
     setCollapsedSections((prev) => {
       const next = new Set(prev);
@@ -4741,68 +5267,167 @@ const GitHubProjectsPanelContent = ({
       "div",
       {
         style: {
+          position: "relative",
           height: "40px",
           minHeight: "40px",
           padding: "0 16px",
           borderBottom: `1px solid ${theme.colors.border}`,
           display: "flex",
           alignItems: "center",
-          gap: "8px"
+          boxSizing: "border-box"
         },
         children: [
-          /* @__PURE__ */ jsx(FolderGit2, { size: 18, color: theme.colors.primary }),
-          /* @__PURE__ */ jsx(
-            "span",
+          /* @__PURE__ */ jsxs(
+            "div",
             {
               style: {
-                fontSize: `${theme.fontSizes[2]}px`,
-                fontWeight: theme.fontWeights.medium,
-                color: theme.colors.text,
-                fontFamily: theme.fonts.body
+                display: "flex",
+                alignItems: "center",
+                justifyContent: "space-between",
+                width: "100%",
+                visibility: showSearch ? "hidden" : "visible"
               },
-              children: "GitHub Projects"
+              children: [
+                /* @__PURE__ */ jsxs("div", { style: { display: "flex", alignItems: "center", gap: "8px" }, children: [
+                  /* @__PURE__ */ jsx(FolderGit2, { size: 18, color: theme.colors.primary }),
+                  /* @__PURE__ */ jsx(
+                    "span",
+                    {
+                      style: {
+                        fontSize: `${theme.fontSizes[2]}px`,
+                        fontWeight: theme.fontWeights.medium,
+                        color: theme.colors.text,
+                        fontFamily: theme.fonts.body
+                      },
+                      children: "GitHub Projects"
+                    }
+                  )
+                ] }),
+                /* @__PURE__ */ jsx(
+                  "button",
+                  {
+                    className: `header-button ${showSearch ? "active" : ""}`,
+                    onClick: handleToggleSearch,
+                    style: {
+                      background: showSearch ? theme.colors.backgroundSecondary : "none",
+                      border: `1px solid ${showSearch ? theme.colors.border : "transparent"}`,
+                      borderRadius: "4px",
+                      cursor: "pointer",
+                      padding: "4px",
+                      display: "flex",
+                      alignItems: "center",
+                      justifyContent: "center",
+                      color: showSearch ? theme.colors.primary : theme.colors.textSecondary,
+                      ["--theme-text"]: theme.colors.text
+                    },
+                    title: showSearch ? "Close search" : "Search repositories",
+                    children: /* @__PURE__ */ jsx(Search, { size: 16 })
+                  }
+                )
+              ]
+            }
+          ),
+          showSearch && /* @__PURE__ */ jsxs(
+            "div",
+            {
+              className: "search-overlay",
+              style: {
+                position: "absolute",
+                top: 0,
+                left: 0,
+                right: 0,
+                bottom: 0,
+                display: "flex",
+                alignItems: "center",
+                padding: "0 16px",
+                backgroundColor: theme.colors.backgroundSecondary,
+                zIndex: 10
+              },
+              children: [
+                /* @__PURE__ */ jsxs("div", { style: { position: "relative", flex: 1, display: "flex", alignItems: "center" }, children: [
+                  /* @__PURE__ */ jsx(
+                    Search,
+                    {
+                      size: 16,
+                      color: theme.colors.textSecondary,
+                      style: {
+                        position: "absolute",
+                        left: "10px",
+                        pointerEvents: "none"
+                      }
+                    }
+                  ),
+                  /* @__PURE__ */ jsx(
+                    "input",
+                    {
+                      type: "text",
+                      className: "search-input",
+                      placeholder: "Filter repositories...",
+                      value: filter,
+                      onChange: (e) => setFilter(e.target.value),
+                      autoFocus: true,
+                      style: {
+                        width: "100%",
+                        padding: "6px 32px 6px 32px",
+                        fontSize: `${theme.fontSizes[1]}px`,
+                        color: theme.colors.text,
+                        backgroundColor: theme.colors.background,
+                        border: `1px solid ${theme.colors.border}`,
+                        borderRadius: "4px",
+                        outline: "none",
+                        fontFamily: theme.fonts.body,
+                        transition: "border-color 0.2s ease",
+                        ["--theme-primary"]: theme.colors.primary
+                      }
+                    }
+                  ),
+                  filter && /* @__PURE__ */ jsx(
+                    "button",
+                    {
+                      className: "clear-filter-button",
+                      onClick: handleClearFilter,
+                      style: {
+                        position: "absolute",
+                        right: "8px",
+                        background: "none",
+                        border: "none",
+                        cursor: "pointer",
+                        padding: "4px",
+                        display: "flex",
+                        alignItems: "center",
+                        justifyContent: "center",
+                        color: theme.colors.textSecondary,
+                        ["--theme-text"]: theme.colors.text
+                      },
+                      children: /* @__PURE__ */ jsx(X, { size: 16 })
+                    }
+                  )
+                ] }),
+                /* @__PURE__ */ jsx(
+                  "button",
+                  {
+                    onClick: handleToggleSearch,
+                    style: {
+                      background: "none",
+                      border: "none",
+                      cursor: "pointer",
+                      padding: "4px",
+                      marginLeft: "8px",
+                      display: "flex",
+                      alignItems: "center",
+                      justifyContent: "center",
+                      color: theme.colors.textSecondary
+                    },
+                    title: "Close search",
+                    children: /* @__PURE__ */ jsx(X, { size: 16 })
+                  }
+                )
+              ]
             }
           )
         ]
       }
     ),
-    /* @__PURE__ */ jsxs("div", { style: { position: "relative", padding: "8px 16px" }, children: [
-      /* @__PURE__ */ jsx(
-        Search,
-        {
-          size: 16,
-          style: {
-            position: "absolute",
-            top: "50%",
-            left: "28px",
-            transform: "translateY(-50%)",
-            color: theme.colors.textSecondary,
-            pointerEvents: "none"
-          }
-        }
-      ),
-      /* @__PURE__ */ jsx(
-        "input",
-        {
-          type: "text",
-          value: filter,
-          placeholder: "Filter repositories...",
-          onChange: (event) => setFilter(event.target.value),
-          style: {
-            width: "100%",
-            padding: "8px 12px 8px 36px",
-            borderRadius: "6px",
-            border: `1px solid ${theme.colors.border}`,
-            backgroundColor: theme.colors.background,
-            color: theme.colors.text,
-            fontSize: `${theme.fontSizes[1]}px`,
-            fontFamily: theme.fonts.body,
-            outline: "none",
-            boxSizing: "border-box"
-          }
-        }
-      )
-    ] }),
     error && hasData && /* @__PURE__ */ jsxs(
       "div",
       {
@@ -4852,7 +5477,10 @@ const GitHubProjectsPanelContent = ({
                 onClone: handleClone,
                 onOpen: handleOpen,
                 onSelect: handleSelect,
-                isSelected: (selectedRepo == null ? void 0 : selectedRepo.id) === repo.id
+                isSelected: (selectedRepo == null ? void 0 : selectedRepo.id) === repo.id,
+                onAddToCollection: currentWorkspace ? handleAddToCollection : void 0,
+                isInCollection: collectionRepoSet.has(repo.full_name),
+                collectionName
               },
               repo.id
             )) })
@@ -4877,7 +5505,10 @@ const GitHubProjectsPanelContent = ({
                   onClone: handleClone,
                   onOpen: handleOpen,
                   onSelect: handleSelect,
-                  isSelected: (selectedRepo == null ? void 0 : selectedRepo.id) === repo.id
+                  isSelected: (selectedRepo == null ? void 0 : selectedRepo.id) === repo.id,
+                  onAddToCollection: currentWorkspace ? handleAddToCollection : void 0,
+                  isInCollection: collectionRepoSet.has(repo.full_name),
+                  collectionName
                 },
                 repo.id
               )) })