@ltm-blueverse/alpha-semantic-hub 0.9.0 → 0.9.1

package/explorer/src/workspaces/IngestWorkspace/IngestWorkspace.tsx

@@ -1,7 +1,7 @@
 import { useEffect, useRef, useState } from "react";
 import {
   Database, Plug, CheckCircle2, AlertCircle, Loader2, FileText, Globe,
-  Boxes, Cloud, Server, Play, ChevronDown, KeyRound, Save, Trash2, Lock,
+  Boxes, Cloud, Server, Play, KeyRound, Save, Trash2, Lock,
 } from "lucide-react";
 
 type ConnField = {
@@ -47,7 +47,8 @@ function nestedSet(obj: Record<string, unknown>, path: string, value: unknown) {
 export function IngestWorkspace() {
   const [categories, setCategories] = useState<Category[]>([]);
   const [active, setActive] = useState<Connector | null>(null);
-  const [pickerOpen, setPickerOpen] = useState(false);
+  const [activeCategory, setActiveCategory] = useState<string>("");
+  const [search, setSearch] = useState("");
   const [credentials, setCredentials] = useState<Credential[]>([]);
   const [credentialId, setCredentialId] = useState("");
   const [values, setValues] = useState<FieldValues>({});
@@ -80,7 +81,9 @@ export function IngestWorkspace() {
     fetch("/api/ingest/sources").then((r) => r.json()).then((d) => {
       const cats: Category[] = d.categories ?? [];
       setCategories(cats);
-      const first = cats[0]?.connectors[0];
+      const firstCat = cats[0];
+      if (firstCat) setActiveCategory((c) => c || firstCat.category);
+      const first = firstCat?.connectors[0];
       if (first) setActive(first);
     }).catch(() => {});
     loadCredentials();
@@ -89,7 +92,6 @@ export function IngestWorkspace() {
 
   function selectConnector(c: Connector) {
     setActive(c);
-    setPickerOpen(false);
     setValues({});
     setSourceRef("");
     setValidation(null);
@@ -207,7 +209,6 @@ export function IngestWorkspace() {
     }
   }
 
-  const ActiveIcon = active ? (KIND_ICONS[active.kind] ?? Database) : Database;
   const vaultForKind = credentials.filter((c) => c.id.startsWith(active?.kind ?? "___"));
 
   return (
@@ -227,48 +228,72 @@ export function IngestWorkspace() {
           </div>
         </div>
 
-        {/* Connector picker */}
-        <div className="ws-card" style={{ padding: 18, position: "relative" }}>
-          <div className="ws-label">Connector</div>
-          <button className="ws-btn" onClick={() => setPickerOpen((v) => !v)}
-            style={{ width: "100%", justifyContent: "space-between", fontSize: 13 }}>
-            <span style={{ display: "flex", alignItems: "center", gap: 8 }}>
-              <ActiveIcon size={15} /> {active?.label ?? "Select a connector…"}
+        {/* Connector browser: category sidebar + searchable connector grid.
+            Deliberately NOT an absolutely-positioned dropdown — .ws-card sets
+            overflow:hidden, which clipped the overlay to one visible row. */}
+        <div className="ws-card" style={{ padding: 18, display: "flex", flexDirection: "column", gap: 14 }}>
+          <div style={{ display: "flex", alignItems: "center", gap: 12, flexWrap: "wrap" }}>
+            <div className="ws-label" style={{ margin: 0 }}>Connector</div>
+            <input className="ws-input" style={{ flex: 1, minWidth: 200 }}
+              placeholder="Search connectors…" value={search}
+              onChange={(e) => setSearch(e.target.value)} />
+            <span style={{ fontSize: 12, color: "var(--ws-text-muted)" }}>
+              {search
+                ? `${categories.flatMap((c) => c.connectors).filter((c) => c.label.toLowerCase().includes(search.toLowerCase())).length} match`
+                : `${categories.reduce((n, c) => n + c.connectors.length, 0)} total`}
             </span>
-            <ChevronDown size={15} />
-          </button>
-
-          {pickerOpen ? (
-            <div style={{
-              position: "absolute", top: "100%", left: 18, right: 18, zIndex: 50, marginTop: 6,
-              background: "#fff", border: "1px solid var(--ws-border)", borderRadius: "var(--ws-radius)",
-              boxShadow: "0 12px 32px rgba(0,0,0,0.18)", maxHeight: 420, overflowY: "auto", padding: 10,
-            }}>
-              {categories.map((cat) => (
-                <div key={cat.category} style={{ marginBottom: 8 }}>
-                  <div className="ws-label" style={{ padding: "6px 8px", margin: 0, opacity: 0.75 }}>{cat.category}</div>
-                  {cat.connectors.map((c) => {
-                    const Icon = KIND_ICONS[c.kind] ?? Database;
-                    return (
-                      <button key={c.kind} className="ws-btn" data-active={active?.kind === c.kind}
-                        onClick={() => selectConnector(c)}
-                        style={{ width: "100%", justifyContent: "flex-start", fontSize: 12.5, marginBottom: 2 }}>
-                        <Icon size={14} />
-                        <span style={{ flex: 1, textAlign: "left" }}>{c.label}</span>
-                        {c.extra_dependency ? (
-                          <span title={`Extra dependency: ${c.extra_dependency}`}
-                            style={{ fontSize: 10, opacity: 0.6, color: "#c9a227" }}>dep</span>
-                        ) : null}
-                      </button>
-                    );
-                  })}
-                </div>
-              ))}
+          </div>
+
+          <div style={{ display: "grid", gridTemplateColumns: "230px 1fr", gap: 14, alignItems: "start" }}>
+            {/* Category sidebar — always visible, never clipped */}
+            <div style={{ display: "flex", flexDirection: "column", gap: 4 }}>
+              {categories.map((cat) => {
+                const isActiveCat = !search && activeCategory === cat.category;
+                const matches = search
+                  ? cat.connectors.filter((c) => c.label.toLowerCase().includes(search.toLowerCase())).length
+                  : cat.connectors.length;
+                if (search && matches === 0) return null;
+                return (
+                  <button key={cat.category} className="ws-btn" data-active={isActiveCat}
+                    onClick={() => { setActiveCategory(cat.category); setSearch(""); }}
+                    style={{ justifyContent: "space-between", fontSize: 12.5 }}>
+                    <span>{cat.category}</span>
+                    <span style={{ opacity: 0.6, fontSize: 11 }}>{matches}</span>
+                  </button>
+                );
+              })}
             </div>
-          ) : null}
+
+            {/* Connector grid — shows the active category, or search results */}
+            <div style={{ display: "grid", gridTemplateColumns: "repeat(auto-fill, minmax(215px, 1fr))", gap: 8 }}>
+              {(search
+                ? categories.flatMap((c) => c.connectors)
+                    .filter((c) => c.label.toLowerCase().includes(search.toLowerCase()))
+                : categories.find((c) => c.category === activeCategory)?.connectors ?? []
+              ).map((c) => {
+                const Icon = KIND_ICONS[c.kind] ?? Database;
+                const isSel = active?.kind === c.kind;
+                return (
+                  <button key={c.kind} className="ws-btn" data-active={isSel}
+                    onClick={() => selectConnector(c)}
+                    style={{ justifyContent: "flex-start", fontSize: 12.5, textAlign: "left" }}>
+                    <Icon size={14} />
+                    <span style={{ flex: 1 }}>{c.label}</span>
+                    {c.extra_dependency ? (
+                      <span title={`Needs: ${c.extra_dependency}`}
+                        style={{ fontSize: 10, color: "#c9a227" }}>dep</span>
+                    ) : null}
+                  </button>
+                );
+              })}
+            </div>
+          </div>
 
           {active ? (
-            <div style={{ marginTop: 12, display: "flex", flexDirection: "column", gap: 4 }}>
+            <div style={{ display: "flex", flexDirection: "column", gap: 4, paddingTop: 10, borderTop: "1px solid var(--ws-border)" }}>
+              <div style={{ fontSize: 12.5, fontWeight: 700, color: "var(--ws-text)" }}>
+                Selected: {active.label}
+              </div>
               {active.credential_hint ? (
                 <div className="ws-body" style={{ fontSize: 12 }}>
                   <KeyRound size={12} style={{ verticalAlign: -2, marginRight: 6 }} />

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ltm-blueverse/alpha-semantic-hub",
-  "version": "0.9.0",
+  "version": "0.9.1",
   "description": "Alpha Semantic Hub \u2014 Graph-Native Infrastructure for Context and Accountable AI Systems",
   "keywords": [
     "alpha-semantic-hub",