feat: add File Explorer header with search, add, refresh, collapse icons

Author: Factory Bot

cortex-gui/src/components/FileExplorer.tsx

@@ -3164,6 +3164,110 @@ export function FileExplorer(props: FileExplorerProps) {
         e.dataTransfer!.dropEffect = "copy";
       }}
     >
+      {/* Header with title and action buttons - Figma design */}
+      <div
+        class="file-explorer-header"
+        style={{
+          display: "flex",
+          "align-items": "center",
+          "justify-content": "space-between",
+          padding: "8px 16px",
+          height: "32px",
+          "flex-shrink": "0",
+        }}
+      >
+        <div style={{ display: "flex", "align-items": "center", gap: "4px" }}>
+          <span
+            style={{
+              "font-family": "var(--figma-font-sans, Inter, sans-serif)",
+              "font-size": "12px",
+              "font-weight": "600",
+              color: "var(--figma-text-secondary, #A0A0A0)",
+              "text-transform": "uppercase",
+              "letter-spacing": "0.5px",
+            }}
+          >
+            {explorerTitle()}
+          </span>
+          <Icon name="chevron-down" size={16} color="var(--figma-text-muted, #808080)" />
+        </div>
+
+        <div style={{ display: "flex", "align-items": "center", gap: "8px" }}>
+          <button
+            onClick={() => setShowSearch(!showSearch())}
+            title="Search (Ctrl+Shift+F)"
+            style={{
+              width: "16px",
+              height: "16px",
+              display: "flex",
+              "align-items": "center",
+              "justify-content": "center",
+              background: "transparent",
+              border: "none",
+              cursor: "pointer",
+              padding: "0",
+              color: "var(--figma-text-muted, #808080)",
+            }}
+          >
+            <Icon name="magnifying-glass" size={16} />
+          </button>
+          <button
+            onClick={handleAddFolder}
+            title="New File"
+            style={{
+              width: "16px",
+              height: "16px",
+              display: "flex",
+              "align-items": "center",
+              "justify-content": "center",
+              background: "transparent",
+              border: "none",
+              cursor: "pointer",
+              padding: "0",
+              color: "var(--figma-text-muted, #808080)",
+            }}
+          >
+            <Icon name="plus" size={16} />
+          </button>
+          <button
+            onClick={() => window.dispatchEvent(new CustomEvent("explorer:refresh"))}
+            title="Refresh"
+            style={{
+              width: "16px",
+              height: "16px",
+              display: "flex",
+              "align-items": "center",
+              "justify-content": "center",
+              background: "transparent",
+              border: "none",
+              cursor: "pointer",
+              padding: "0",
+              color: "var(--figma-text-muted, #808080)",
+            }}
+          >
+            <Icon name="arrows-rotate" size={16} />
+          </button>
+          <button
+            onClick={() => window.dispatchEvent(new CustomEvent("explorer:collapse-all"))}
+            title="Collapse All"
+            style={{
+              width: "16px",
+              height: "16px",
+              display: "flex",
+              "align-items": "center",
+              "justify-content": "center",
+              background: "transparent",
+              border: "none",
+              cursor: "pointer",
+              padding: "0",
+              color: "var(--figma-text-muted, #808080)",
+            }}
+          >
+            <Icon name="chevrons-up" size={16} />
+          </button>
+        </div>
+      </div>
+
       {/* Search bar */}
       <Show when={showSearch()}>
         <div