pi-connect 0.1.2 → 0.1.3

package/index.ts

@@ -1,6 +1,6 @@
 import { DynamicBorder, type ExtensionAPI } from "@mariozechner/pi-coding-agent";
 import { getEnvApiKey } from "@mariozechner/pi-ai";
-import { Container, SelectList, Text, type SelectItem } from "@mariozechner/pi-tui";
+import { Container, fuzzyFilter, Input, Key, matchesKey, SelectList, Text, type SelectItem } from "@mariozechner/pi-tui";
 import { exec as execCb } from "node:child_process";
 
 const DISPLAY_NAME_OVERRIDES: Record<string, string> = {
@@ -113,30 +113,90 @@ async function pickItem(ctx: any, title: string, subtitle: string | undefined, i
     container.addChild(new DynamicBorder((s: string) => theme.fg("accent", s)));
     container.addChild(new Text(theme.fg("text", theme.bold(title)), 1, 0));
     if (subtitle) container.addChild(new Text(theme.fg("dim", subtitle), 1, 0));
+
+    container.addChild(new Text(theme.fg("muted", "Search"), 1, 0));
+    const searchInput = new Input();
+    searchInput.focused = true;
+    container.addChild(searchInput);
     container.addChild(new Text("", 0, 0));
 
-    const maxVisible = Math.max(6, Math.min(items.length, Math.floor((tui.terminal.rows - 12) / 2)));
-    const list = new SelectList(items, maxVisible, {
-      selectedPrefix: (t) => theme.fg("accent", t),
-      selectedText: (t) => theme.fg("accent", theme.bold(t)),
-      description: (t) => theme.fg("muted", t),
-      scrollInfo: (t) => theme.fg("dim", t),
-      noMatch: (t) => theme.fg("warning", t),
-    });
-    list.onSelect = (item) => done(item);
-    list.onCancel = () => done(null);
-    container.addChild(list);
+    const maxVisible = Math.max(6, Math.min(items.length, Math.floor((tui.terminal.rows - 14) / 2)));
+    const listContainer = new Container();
+    container.addChild(listContainer);
+
+    let list: SelectList;
+
+    const sectionOauth = items.find((item) => item.value === "__section_oauth");
+    const sectionApi = items.find((item) => item.value === "__section_api");
+    const itemTheme = {
+      selectedPrefix: (t: string) => theme.fg("accent", t),
+      selectedText: (t: string) => theme.fg("accent", theme.bold(t)),
+      description: (t: string) => theme.fg("muted", t),
+      scrollInfo: (t: string) => theme.fg("dim", t),
+      noMatch: (t: string) => theme.fg("warning", t),
+    };
+
+    const rebuildList = () => {
+      const query = searchInput.getValue().trim();
+      const normalItems = items.filter((item) => !item.value.startsWith("__section_"));
+      const filtered = query
+        ? fuzzyFilter(normalItems, query, (item) => `${item.label} ${item.description ?? ""}`)
+        : normalItems;
+
+      const oauthItems = filtered.filter((item) => item.value.startsWith("oauth:"));
+      const apiItems = filtered.filter((item) => item.value.startsWith("api:"));
+
+      const displayItems: SelectItem[] = [];
+      if (oauthItems.length > 0 && sectionOauth) displayItems.push(sectionOauth);
+      displayItems.push(...oauthItems);
+      if (apiItems.length > 0 && sectionApi) displayItems.push(sectionApi);
+      displayItems.push(...apiItems);
+
+      const finalItems = displayItems.length > 0
+        ? displayItems
+        : [{ value: "__empty", label: "No matching providers", description: "Try a different search" }];
+
+      list = new SelectList(finalItems, maxVisible, itemTheme);
+      list.onSelect = (item) => {
+        if (item.value.startsWith("__section_") || item.value === "__empty") return;
+        done(item);
+      };
+      list.onCancel = () => done(null);
+
+      listContainer.clear();
+      listContainer.addChild(list);
+    };
+
+    rebuildList();
 
     container.addChild(new Text("", 0, 0));
     container.addChild(new Text(`${theme.fg("success", "●")} connected   ${theme.fg("warning", "◌")} env   ${theme.fg("muted", "○")} new`, 1, 0));
-    container.addChild(new Text(theme.fg("dim", "↑↓ navigate  •  Enter select  •  Esc cancel"), 1, 0));
+    container.addChild(new Text(theme.fg("dim", "type to search  •  ↑↓ navigate  •  Enter select  •  Esc cancel/clear"), 1, 0));
     container.addChild(new DynamicBorder((s: string) => theme.fg("accent", s)));
 
     return {
       render: (w) => container.render(w),
       invalidate: () => container.invalidate(),
       handleInput: (data) => {
-        list.handleInput(data);
+        if (matchesKey(data, Key.escape)) {
+          if (searchInput.getValue()) {
+            searchInput.setValue("");
+            rebuildList();
+            tui.requestRender();
+            return;
+          }
+          done(null);
+          return;
+        }
+
+        if (matchesKey(data, Key.up) || matchesKey(data, Key.down) || matchesKey(data, Key.enter) || matchesKey(data, Key.return) || matchesKey(data, Key.pageUp) || matchesKey(data, Key.pageDown)) {
+          list.handleInput(data);
+          tui.requestRender();
+          return;
+        }
+
+        searchInput.handleInput(data);
+        rebuildList();
         tui.requestRender();
       },
     };
@@ -150,9 +210,9 @@ export default function piConnectExtension(pi: ExtensionAPI) {
     const apiProviderIds = getApiCapableProviderIds(ctx);
 
     const statusIcon = (providerId: string) => {
-      if (authStorage.has(providerId)) return ctx.ui.theme.fg("success", "●");
-      if (getEnvApiKey(providerId)) return ctx.ui.theme.fg("warning", "◌");
-      return ctx.ui.theme.fg("muted", "○");
+      if (authStorage.has(providerId)) return "●";
+      if (getEnvApiKey(providerId)) return "◌";
+      return "○";
     };
 
     const items: SelectItem[] = [];
@@ -160,7 +220,7 @@ export default function piConnectExtension(pi: ExtensionAPI) {
     if (oauthProviders.length > 0) {
       items.push({
         value: "__section_oauth",
-        label: ctx.ui.theme.bold("OAuth providers"),
+        label: "OAuth providers",
         description: "login via browser"
       });
       for (const provider of oauthProviders) {
@@ -175,7 +235,7 @@ export default function piConnectExtension(pi: ExtensionAPI) {
     if (apiProviderIds.length > 0) {
       items.push({
         value: "__section_api",
-        label: ctx.ui.theme.bold("API key providers"),
+        label: "API key providers",
         description: "paste and save key"
       });
       for (const providerId of apiProviderIds) {
@@ -243,8 +303,8 @@ export default function piConnectExtension(pi: ExtensionAPI) {
 
       if (oauthIds.has(providerId) && apiIds.has(providerId)) {
         const method = await pickItem(ctx, prettyProviderName(providerId), "Choose how to connect", [
-          { value: "oauth", label: ctx.ui.theme.bold("OAuth"), description: "browser login" },
-          { value: "api", label: ctx.ui.theme.bold("API key"), description: "paste and save key" },
+          { value: "oauth", label: "OAuth", description: "browser login" },
+          { value: "api", label: "API key", description: "paste and save key" },
         ]);
         if (!method) return;
         if (method.value === "oauth") {
@@ -275,7 +335,7 @@ export default function piConnectExtension(pi: ExtensionAPI) {
       }
       const items: SelectItem[] = providers.map((providerId) => ({
         value: providerId,
-        label: `${ctx.ui.theme.fg("success", "●")} ${ctx.ui.theme.bold(prettyProviderName(providerId))}`,
+        label: `● ${prettyProviderName(providerId)}`,
         description: "Connected"
       }));
       const selected = await pickItem(ctx, "Disconnect provider", "Remove a saved credential", items);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "pi-connect",
-  "version": "0.1.2",
+  "version": "0.1.3",
   "description": "Unified OAuth and API key login for pi with an OpenCode-inspired UI. Connect 15+ providers with one /connect command.",
   "type": "module",
   "license": "MIT",