pi-connect 0.1.1 → 0.1.3

package/README.md

@@ -1,10 +1,10 @@
 # pi-connect
 
-![pi-connect screenshot](https://raw.githubusercontent.com/hk-vk/pi-connect/main/assets/screenshot.png)
+![pi-connect screenshot](https://raw.githubusercontent.com/hk-vk/pi-connect/main/assets/screenshot.png?v=202603281825)
 
-**Unified OAuth & API key login for pi** — OpenCode-inspired UI to connect 15+ providers from one `/connect` command.
+Unified OAuth and API key login for pi with an OpenCode-inspired UI.
 
-Paste & save API keys, or login with OAuth, for providers supported by pi like Anthropic, OpenAI, OpenCode, OpenRouter, Gemini, Groq, and more.
+Connect 15+ providers with one `/connect` command.
 
 Official pi providers list:
 - https://github.com/badlogic/pi-mono/blob/main/packages/coding-agent/docs/providers.md

package/index.ts

@@ -1,28 +1,61 @@
 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 API_KEY_PROVIDERS: Record<string, { label: string; env?: string; hint?: string }> = {
-  anthropic: { label: "Anthropic", env: "ANTHROPIC_API_KEY" },
-  "azure-openai-responses": { label: "Azure OpenAI Responses", env: "AZURE_OPENAI_API_KEY" },
-  openai: { label: "OpenAI", env: "OPENAI_API_KEY" },
-  google: { label: "Google Gemini", env: "GEMINI_API_KEY" },
-  mistral: { label: "Mistral", env: "MISTRAL_API_KEY" },
-  groq: { label: "Groq", env: "GROQ_API_KEY" },
-  cerebras: { label: "Cerebras", env: "CEREBRAS_API_KEY" },
-  xai: { label: "xAI", env: "XAI_API_KEY" },
-  openrouter: { label: "OpenRouter", env: "OPENROUTER_API_KEY" },
-  "vercel-ai-gateway": { label: "Vercel AI Gateway", env: "AI_GATEWAY_API_KEY" },
-  zai: { label: "ZAI", env: "ZAI_API_KEY" },
-  opencode: { label: "OpenCode Zen", env: "OPENCODE_API_KEY" },
-  "opencode-go": { label: "OpenCode Go", env: "OPENCODE_API_KEY" },
-  huggingface: { label: "Hugging Face", env: "HF_TOKEN" },
-  "kimi-coding": { label: "Kimi For Coding", env: "KIMI_API_KEY" },
-  minimax: { label: "MiniMax", env: "MINIMAX_API_KEY" },
-  "minimax-cn": { label: "MiniMax (China)", env: "MINIMAX_CN_API_KEY" },
+const DISPLAY_NAME_OVERRIDES: Record<string, string> = {
+  anthropic: "Anthropic",
+  openai: "OpenAI",
+  google: "Google Gemini",
+  openrouter: "OpenRouter",
+  opencode: "OpenCode",
+  "opencode-go": "OpenCode Go",
+  groq: "Groq",
+  mistral: "Mistral",
+  cerebras: "Cerebras",
+  xai: "xAI",
+  zai: "ZAI",
+  huggingface: "Hugging Face",
+  "kimi-coding": "Kimi",
+  minimax: "MiniMax",
+  "minimax-cn": "MiniMax China",
+  "azure-openai-responses": "Azure OpenAI",
+  "vercel-ai-gateway": "Vercel AI Gateway",
+  "openai-codex": "ChatGPT",
+  "github-copilot": "Copilot",
+  "google-gemini-cli": "Gemini CLI",
+  "google-antigravity": "Antigravity",
+  "google-vertex": "Google Vertex",
+  "amazon-bedrock": "Amazon Bedrock"
+};
+
+const ENV_VAR_OVERRIDES: Record<string, string> = {
+  anthropic: "ANTHROPIC_API_KEY",
+  openai: "OPENAI_API_KEY",
+  google: "GEMINI_API_KEY",
+  openrouter: "OPENROUTER_API_KEY",
+  opencode: "OPENCODE_API_KEY",
+  "opencode-go": "OPENCODE_API_KEY",
+  groq: "GROQ_API_KEY",
+  mistral: "MISTRAL_API_KEY",
+  cerebras: "CEREBRAS_API_KEY",
+  xai: "XAI_API_KEY",
+  zai: "ZAI_API_KEY",
+  huggingface: "HF_TOKEN",
+  "kimi-coding": "KIMI_API_KEY",
+  minimax: "MINIMAX_API_KEY",
+  "minimax-cn": "MINIMAX_CN_API_KEY",
+  "azure-openai-responses": "AZURE_OPENAI_API_KEY",
+  "vercel-ai-gateway": "AI_GATEWAY_API_KEY"
 };
 
+const OAUTH_ONLY_PROVIDERS = new Set([
+  "openai-codex",
+  "github-copilot",
+  "google-gemini-cli",
+  "google-antigravity"
+]);
+
 const PRIORITY: Record<string, number> = {
   anthropic: 0,
   openai: 1,
@@ -33,19 +66,16 @@ const PRIORITY: Record<string, number> = {
   openrouter: 6,
   opencode: 7,
   "opencode-go": 8,
-};
-
-const LABELS: Record<string, string> = {
-  ...Object.fromEntries(Object.entries(API_KEY_PROVIDERS).map(([id, value]) => [id, value.label])),
-  anthropic: "Anthropic",
-  "openai-codex": "ChatGPT Plus/Pro (Codex)",
-  "github-copilot": "GitHub Copilot",
-  "google-gemini-cli": "Google Gemini CLI",
-  "google-antigravity": "Google Antigravity",
+  groq: 9,
+  mistral: 10
 };
 
 function prettyProviderName(providerId: string): string {
-  return LABELS[providerId] ?? providerId.split("-").map((part) => part.charAt(0).toUpperCase() + part.slice(1)).join(" ");
+  return DISPLAY_NAME_OVERRIDES[providerId]
+    ?? providerId
+      .split("-")
+      .map((part) => part.charAt(0).toUpperCase() + part.slice(1))
+      .join(" ");
 }
 
 function openUrl(url: string): void {
@@ -57,58 +87,116 @@ function openUrl(url: string): void {
   execCb(command, () => {});
 }
 
+function sortProviderIds(providerIds: string[]): string[] {
+  return [...providerIds].sort((a, b) => {
+    return (PRIORITY[a] ?? 99) - (PRIORITY[b] ?? 99)
+      || prettyProviderName(a).localeCompare(prettyProviderName(b));
+  });
+}
+
+function getRuntimeProviderIds(ctx: any): string[] {
+  const fromModels = ctx.modelRegistry.getAll().map((model: any) => model.provider);
+  const fromSavedAuth = ctx.modelRegistry.authStorage.list();
+  const fromOauth = ctx.modelRegistry.authStorage.getOAuthProviders().map((provider: any) => provider.id);
+  return [...new Set([...fromModels, ...fromSavedAuth, ...fromOauth])];
+}
+
+function getApiCapableProviderIds(ctx: any): string[] {
+  return sortProviderIds(
+    getRuntimeProviderIds(ctx).filter((providerId) => !OAUTH_ONLY_PROVIDERS.has(providerId))
+  );
+}
+
 async function pickItem(ctx: any, title: string, subtitle: string | undefined, items: SelectItem[]): Promise<SelectItem | null> {
   return ctx.ui.custom<SelectItem | null>((tui, theme, _kb, done) => {
     const container = new Container();
-
-    // Top border
     container.addChild(new DynamicBorder((s: string) => theme.fg("accent", s)));
-
-    // Title (bold)
     container.addChild(new Text(theme.fg("text", theme.bold(title)), 1, 0));
+    if (subtitle) container.addChild(new Text(theme.fg("dim", subtitle), 1, 0));
 
-    // Subtitle if provided (muted, smaller hint)
-    if (subtitle) {
-      container.addChild(new Text(theme.fg("dim", subtitle), 1, 0));
-    }
-
-    // Spacing before list
+    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));
 
-    // Calculate visible items based on terminal height
-    const maxVisible = Math.max(6, Math.min(items.length, Math.floor((tui.terminal.rows - 12) / 2)));
+    const maxVisible = Math.max(6, Math.min(items.length, Math.floor((tui.terminal.rows - 14) / 2)));
+    const listContainer = new Container();
+    container.addChild(listContainer);
 
-    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);
+    let list: SelectList;
 
-    // Spacing before legend
-    container.addChild(new Text("", 0, 0));
+    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),
+    };
 
-    // Legend for status icons - on ONE clean line
-    container.addChild(new Text(
-      `${theme.fg("success", "●")} connected   ${theme.fg("warning", "◌")} env   ${theme.fg("muted", "○")} new`,
-      1, 0
-    ));
+    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);
+    };
 
-    // Keyboard hints
-    container.addChild(new Text(theme.fg("dim", "↑↓ navigate  •  Enter select  •  Esc cancel"), 1, 0));
+    rebuildList();
 
-    // Bottom border
+    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", "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();
       },
     };
@@ -119,54 +207,47 @@ export default function piConnectExtension(pi: ExtensionAPI) {
   async function chooseProvider(ctx: any) {
     const authStorage = ctx.modelRegistry.authStorage;
     const oauthProviders = authStorage.getOAuthProviders();
-    const modelProviderIds = new Set(ctx.modelRegistry.getAll().map((model) => model.provider));
-
-    const apiProviders = Object.keys(API_KEY_PROVIDERS)
-      .filter((providerId) => modelProviderIds.has(providerId) || authStorage.has(providerId) || !!getEnvApiKey(providerId))
-      .sort((a, b) => (PRIORITY[a] ?? 99) - (PRIORITY[b] ?? 99) || prettyProviderName(a).localeCompare(prettyProviderName(b)));
+    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[] = [];
 
-    // OAuth section
     if (oauthProviders.length > 0) {
       items.push({
         value: "__section_oauth",
-        label: ctx.ui.theme.bold("OAuth providers"),
-        description: "login via browser subscription",
+        label: "OAuth providers",
+        description: "login via browser"
       });
       for (const provider of oauthProviders) {
         items.push({
           value: `oauth:${provider.id}`,
           label: `${statusIcon(provider.id)} ${provider.name}`,
-          description: "subscription",
+          description: "OAuth"
         });
       }
     }
 
-    // API key section
-    if (apiProviders.length > 0) {
+    if (apiProviderIds.length > 0) {
       items.push({
         value: "__section_api",
-        label: ctx.ui.theme.bold("API key providers"),
-        description: "paste your key directly",
+        label: "API key providers",
+        description: "paste and save key"
       });
-      for (const providerId of apiProviders) {
-        const envName = API_KEY_PROVIDERS[providerId]?.env;
+      for (const providerId of apiProviderIds) {
         items.push({
           value: `api:${providerId}`,
           label: `${statusIcon(providerId)} ${prettyProviderName(providerId)}`,
-          description: envName || "key",
+          description: ENV_VAR_OVERRIDES[providerId] ?? "API key"
         });
       }
     }
 
-    const selected = await pickItem(ctx, "Connect provider", "OAuth first, API key providers below", items);
+    const selected = await pickItem(ctx, "Connect provider", "Unified OAuth and API key login", items);
     if (!selected || selected.value.startsWith("__section_")) return;
 
     const [kind, providerId] = selected.value.split(":", 2);
@@ -182,11 +263,9 @@ export default function piConnectExtension(pi: ExtensionAPI) {
 
   async function promptApiKey(providerId: string, ctx: any) {
     const authStorage = ctx.modelRegistry.authStorage;
-    const provider = API_KEY_PROVIDERS[providerId];
-    const label = prettyProviderName(providerId);
-    const prompt = provider?.env
-      ? `${label} API key (${provider.env})`
-      : `${label} API key`;
+    const prompt = ENV_VAR_OVERRIDES[providerId]
+      ? `${prettyProviderName(providerId)} API key (${ENV_VAR_OVERRIDES[providerId]})`
+      : `${prettyProviderName(providerId)} API key`;
     const value = await ctx.ui.input(prompt, "Paste API key");
     if (!value) {
       ctx.ui.notify("Cancelled", "info");
@@ -203,70 +282,67 @@ export default function piConnectExtension(pi: ExtensionAPI) {
         openUrl(url);
         ctx.ui.notify(instructions ? `${instructions}\n${url}` : url, "info");
       },
-      onPrompt: async ({ message, placeholder }) => {
-        return (await ctx.ui.input(message, placeholder)) ?? "";
-      },
-      onManualCodeInput: async () => {
-        return (await ctx.ui.input("Paste the callback URL or code", "code or redirect URL")) ?? "";
-      },
-      onProgress: (message) => {
-        ctx.ui.notify(message, "info");
-      },
+      onPrompt: async ({ message, placeholder }) => (await ctx.ui.input(message, placeholder)) ?? "",
+      onManualCodeInput: async () => (await ctx.ui.input("Paste the callback URL or code", "code or redirect URL")) ?? "",
+      onProgress: (message) => ctx.ui.notify(message, "info"),
     });
     ctx.ui.notify(`Connected ${prettyProviderName(providerId)}`, "info");
   }
 
   pi.registerCommand("connect", {
-    description: "Connect a provider with OAuth or an API key",
+    description: "Connect any OAuth or API key provider from one unified UI",
     handler: async (args, ctx) => {
-      const providerId = args.trim();
+      const providerId = args.trim().toLowerCase();
       if (!providerId) {
         await chooseProvider(ctx);
         return;
       }
 
-      const normalized = providerId.toLowerCase();
-      const oauthIds = new Set(ctx.modelRegistry.authStorage.getOAuthProviders().map((provider) => provider.id));
-      if (oauthIds.has(normalized)) {
-        if (API_KEY_PROVIDERS[normalized]) {
-          const method = await pickItem(ctx, prettyProviderName(normalized), "Choose how to connect", [
-            { value: "oauth", label: `${ctx.ui.theme.bold("OAuth")}`, description: "Subscription login" },
-            { value: "api", label: `${ctx.ui.theme.bold("API key")}`, description: "Paste a provider key" },
-          ]);
-          if (!method) return;
-          if (method.value === "oauth") {
-            await loginWithOAuth(normalized, ctx);
-            return;
-          }
-        } else {
-          await loginWithOAuth(normalized, ctx);
+      const oauthIds = new Set(ctx.modelRegistry.authStorage.getOAuthProviders().map((provider: any) => provider.id));
+      const apiIds = new Set(getApiCapableProviderIds(ctx));
+
+      if (oauthIds.has(providerId) && apiIds.has(providerId)) {
+        const method = await pickItem(ctx, prettyProviderName(providerId), "Choose how to connect", [
+          { value: "oauth", label: "OAuth", description: "browser login" },
+          { value: "api", label: "API key", description: "paste and save key" },
+        ]);
+        if (!method) return;
+        if (method.value === "oauth") {
+          await loginWithOAuth(providerId, ctx);
           return;
         }
+        await promptApiKey(providerId, ctx);
+        return;
+      }
+
+      if (oauthIds.has(providerId)) {
+        await loginWithOAuth(providerId, ctx);
+        return;
       }
 
-      await promptApiKey(normalized, ctx);
+      await promptApiKey(providerId, ctx);
     },
   });
 
   pi.registerCommand("disconnect", {
-    description: "Remove saved provider credentials",
+    description: "Remove a saved provider credential",
     handler: async (_args, ctx) => {
       const authStorage = ctx.modelRegistry.authStorage;
-      const providers = authStorage.list().sort((a, b) => prettyProviderName(a).localeCompare(prettyProviderName(b)));
+      const providers = sortProviderIds(authStorage.list());
       if (providers.length === 0) {
         ctx.ui.notify("No saved credentials", "info");
         return;
       }
       const items: SelectItem[] = providers.map((providerId) => ({
         value: providerId,
-        label: `${ctx.ui.theme.fg("success", "●")} ${ctx.ui.theme.bold(prettyProviderName(providerId))}`,
-        description: "Connected",
+        label: `● ${prettyProviderName(providerId)}`,
+        description: "Connected"
       }));
       const selected = await pickItem(ctx, "Disconnect provider", "Remove a saved credential", items);
-      const providerId = selected?.value;
-      if (!providerId) return;
-      authStorage.remove(providerId);
-      ctx.ui.notify(`Removed ${prettyProviderName(providerId)}`, "info");
+      const selectedProviderId = selected?.value;
+      if (!selectedProviderId) return;
+      authStorage.remove(selectedProviderId);
+      ctx.ui.notify(`Removed ${prettyProviderName(selectedProviderId)}`, "info");
     },
   });
 }

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "pi-connect",
-  "version": "0.1.1",
-  "description": "Unified OAuth & API key login for pi — OpenCode-inspired UI to connect 15+ providers from one /connect command.",
+  "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",
   "keywords": [