@chrysb/alphaclaw 0.5.1 → 0.5.2

package/lib/public/js/components/models-tab/index.js

@@ -1,5 +1,5 @@
 import { h } from "https://esm.sh/preact";
-import { useState, useMemo } from "https://esm.sh/preact/hooks";
+import { useState, useMemo, useRef, useEffect } from "https://esm.sh/preact/hooks";
 import htm from "https://esm.sh/htm";
 import { PageHeader } from "../page-header.js";
 import { LoadingSpinner } from "../loading-spinner.js";
@@ -7,14 +7,26 @@ import { ActionButton } from "../action-button.js";
 import { Badge } from "../badge.js";
 import { useModels } from "./use-models.js";
 import { ProviderAuthCard } from "./provider-auth-card.js";
-import { getModelProvider, getFeaturedModels } from "../../lib/model-config.js";
+import {
+  getModelProvider,
+  getAuthProviderFromModelProvider,
+  getFeaturedModels,
+  kProviderLabels,
+  kProviderOrder,
+} from "../../lib/model-config.js";
 
 const html = htm.bind(h);
 
+const getModelsTabAuthProvider = (modelKey) => {
+  const provider = getModelProvider(modelKey);
+  if (provider === "openai-codex") return "openai-codex";
+  return getAuthProviderFromModelProvider(provider);
+};
+
 const deriveRequiredProviders = (configuredModels) => {
   const providers = new Set();
   for (const modelKey of Object.keys(configuredModels)) {
-    const provider = getModelProvider(modelKey);
+    const provider = getModelsTabAuthProvider(modelKey);
     if (provider) providers.add(provider);
   }
   return [...providers];
@@ -24,9 +36,172 @@ const kProviderDisplayOrder = [
   "anthropic",
   "openai",
   "openai-codex",
-  "google",
+  ...kProviderOrder.filter((provider) => !["anthropic", "openai"].includes(provider)),
 ];
 
+const getModelCatalogProvider = (model) =>
+  String(model?.provider || getModelProvider(model?.key)).trim();
+
+const getProviderSortIndex = (provider) => {
+  const index = kProviderDisplayOrder.indexOf(provider);
+  return index >= 0 ? index : Number.MAX_SAFE_INTEGER;
+};
+
+const formatProviderSectionLabel = (provider) =>
+  String(kProviderLabels[provider] || provider).toUpperCase();
+
+const normalizeSearch = (value) => String(value || "").trim().toLowerCase();
+const buildModelSearchText = (model) =>
+  [
+    model?.label || "",
+    model?.key || "",
+    model?.provider || getModelProvider(model?.key),
+  ]
+    .join(" ")
+    .toLowerCase();
+
+const SearchableModelPicker = ({
+  options = [],
+  popularModels = [],
+  placeholder = "Add model...",
+  onSelect = () => {},
+}) => {
+  const [query, setQuery] = useState("");
+  const [open, setOpen] = useState(false);
+  const rootRef = useRef(null);
+  const normalizedQuery = normalizeSearch(query);
+  const filteredOptions = useMemo(
+    () =>
+      normalizedQuery
+        ? options.filter((option) =>
+            buildModelSearchText(option).includes(normalizedQuery),
+          )
+        : options,
+    [options, normalizedQuery],
+  );
+  const groupedOptions = useMemo(() => {
+    const groups = [];
+    const showPopularGroup = !normalizedQuery;
+    const visibleOptionKeys = new Set(filteredOptions.map((option) => option.key));
+    const visiblePopularModels = popularModels.filter((model) =>
+      visibleOptionKeys.has(model.key),
+    );
+    if (showPopularGroup && visiblePopularModels.length > 0) {
+      groups.push({
+        provider: "popular",
+        label: "POPULAR",
+        options: visiblePopularModels,
+      });
+    }
+    for (const option of filteredOptions) {
+      const provider = getModelCatalogProvider(option);
+      const label = formatProviderSectionLabel(provider);
+      const currentGroup = groups[groups.length - 1];
+      if (!currentGroup || currentGroup.provider !== provider) {
+        groups.push({ provider, label, options: [option] });
+        continue;
+      }
+      currentGroup.options.push(option);
+    }
+    return groups;
+  }, [filteredOptions, popularModels, normalizedQuery]);
+
+  useEffect(() => {
+    const handleOutsidePointer = (event) => {
+      if (!rootRef.current?.contains(event.target)) {
+        setOpen(false);
+      }
+    };
+    document.addEventListener("mousedown", handleOutsidePointer);
+    return () => document.removeEventListener("mousedown", handleOutsidePointer);
+  }, []);
+
+  const handleSelect = (modelKey) => {
+    if (!modelKey) return;
+    onSelect(modelKey);
+    setQuery("");
+    setOpen(false);
+  };
+
+  const handleKeyDown = (event) => {
+    const firstVisibleOption = groupedOptions[0]?.options?.[0];
+    if (event.key === "Escape") {
+      setOpen(false);
+      return;
+    }
+    if (event.key === "Enter" && firstVisibleOption?.key) {
+      event.preventDefault();
+      handleSelect(firstVisibleOption.key);
+    }
+  };
+
+  return html`
+    <div class="relative" ref=${rootRef}>
+      <input
+        type="text"
+        value=${query}
+        placeholder=${placeholder}
+        onFocus=${() => setOpen(true)}
+        onInput=${(event) => {
+          setQuery(event.target.value);
+          setOpen(true);
+        }}
+        onKeyDown=${handleKeyDown}
+        class="w-full bg-black/30 border border-border rounded-lg px-3 py-2 text-sm text-gray-200 outline-none focus:border-gray-500"
+      />
+      ${open
+        ? html`
+            <div
+              class="absolute left-0 right-0 top-full mt-2 z-20 bg-modal border border-border rounded-xl shadow-2xl overflow-hidden"
+            >
+              <div class="max-h-80 overflow-y-auto">
+                ${filteredOptions.length > 0
+                  ? groupedOptions.map(
+                      (group, index) => html`
+                        <div key=${group.provider}>
+                          <div
+                            class=${`sticky top-0 z-10 h-[22px] px-3 text-[12px] font-semibold tracking-wide text-gray-400 bg-[#151922] border-b border-border flex items-center ${
+                              index > 0 ? "border-t border-border" : ""
+                            }`}
+                          >
+                            ${group.label}
+                          </div>
+                          ${group.options.map(
+                            (model) => html`
+                              <button
+                                key=${model.key}
+                                type="button"
+                                onMouseDown=${(event) => event.preventDefault()}
+                                onClick=${() => handleSelect(model.key)}
+                                class="w-full text-left px-3 py-2 hover:bg-white/5 border-b border-border last:border-b-0"
+                              >
+                                <div class="flex flex-col gap-1">
+                                  <div class="text-sm text-gray-200">
+                                    ${model.label || model.key}
+                                  </div>
+                                  <div class="text-xs text-gray-500 font-mono">
+                                    ${model.key}
+                                  </div>
+                                </div>
+                              </button>
+                            `,
+                          )}
+                        </div>
+                      `,
+                    )
+                  : html`
+                      <div class="px-3 py-3 text-xs text-gray-500">
+                        No models match that search.
+                      </div>
+                    `}
+              </div>
+            </div>
+          `
+        : null}
+    </div>
+  `;
+};
+
 export const Models = ({ onRestartRequired = () => {} }) => {
   const {
     catalog,
@@ -52,26 +227,28 @@ export const Models = ({ onRestartRequired = () => {} }) => {
     refreshCodexStatus,
   } = useModels();
 
-  const [showAllModels, setShowAllModels] = useState(false);
-
   const configuredKeys = useMemo(
     () => new Set(Object.keys(configuredModels)),
     [configuredModels],
   );
 
   const featuredModels = useMemo(() => getFeaturedModels(catalog), [catalog]);
+  const popularPickerModels = useMemo(
+    () => featuredModels.filter((model) => !configuredKeys.has(model.key)),
+    [featuredModels, configuredKeys],
+  );
 
   const pickerModels = useMemo(() => {
-    const base = showAllModels
-      ? catalog
-      : featuredModels.length > 0
-        ? featuredModels
-        : catalog;
-    return base.filter((m) => !configuredKeys.has(m.key));
-  }, [catalog, featuredModels, showAllModels, configuredKeys]);
-
-  const canToggleFullCatalog =
-    featuredModels.length > 0 && catalog.length > featuredModels.length;
+    return [...catalog]
+      .filter((model) => !configuredKeys.has(model.key))
+      .sort((a, b) => {
+        const providerCompare =
+          getProviderSortIndex(getModelCatalogProvider(a)) -
+          getProviderSortIndex(getModelCatalogProvider(b));
+        if (providerCompare !== 0) return providerCompare;
+        return String(a.label || a.key).localeCompare(String(b.label || b.key));
+      });
+  }, [catalog, configuredKeys]);
 
   const requiredProviders = useMemo(
     () => deriveRequiredProviders(configuredModels),
@@ -106,7 +283,7 @@ export const Models = ({ onRestartRequired = () => {} }) => {
     () =>
       Object.keys(configuredModels).map((key) => {
         const catalogEntry = catalog.find((m) => m.key === key);
-        const provider = getModelProvider(key);
+        const provider = getModelsTabAuthProvider(key);
         const hasAuth = !!providerHasAuth[provider];
         return {
           key,
@@ -213,38 +390,16 @@ export const Models = ({ onRestartRequired = () => {} }) => {
               </div>
             `}
 
-        <div class="pt-2 border-t border-border space-y-2">
-          <label class="text-xs font-medium text-gray-400">Add model</label>
-          <select
-            onInput=${(e) => {
-              const val = e.target.value;
-              if (val) {
-                addModel(val);
-                if (!primary) setPrimaryModel(val);
-              }
-              e.target.value = "";
+        <div class="space-y-2">
+          <${SearchableModelPicker}
+            options=${pickerModels}
+            popularModels=${popularPickerModels}
+            placeholder="Add model..."
+            onSelect=${(modelKey) => {
+              addModel(modelKey);
+              if (!primary) setPrimaryModel(modelKey);
             }}
-            class="w-full bg-black/30 border border-border rounded-lg pl-3 pr-8 py-2 text-sm text-gray-200 outline-none focus:border-gray-500"
-          >
-            <option value="">Select a model to add...</option>
-            ${pickerModels.map(
-              (m) =>
-                html`<option value=${m.key}>${m.label || m.key}</option>`,
-            )}
-          </select>
-          ${canToggleFullCatalog
-            ? html`
-                <button
-                  type="button"
-                  onclick=${() => setShowAllModels((prev) => !prev)}
-                  class="text-xs text-gray-500 hover:text-gray-300"
-                >
-                  ${showAllModels
-                    ? "Show recommended models"
-                    : "Show full model catalog"}
-                </button>
-              `
-            : null}
+          />
         </div>
 
         ${loading

package/lib/public/js/components/models-tab/provider-auth-card.js

@@ -6,6 +6,10 @@ import { SecretInput } from "../secret-input.js";
 import { ActionButton } from "../action-button.js";
 import { exchangeCodexOAuth, disconnectCodex } from "../../lib/api.js";
 import { showToast } from "../toast.js";
+import {
+  kProviderAuthFields,
+  kProviderLabels,
+} from "../../lib/model-config.js";
 
 const html = htm.bind(h);
 
@@ -71,10 +75,24 @@ const kDefaultMode = {
   field: "key",
 };
 
+const buildDefaultProviderModes = (provider) => {
+  const fields = kProviderAuthFields[provider] || [];
+  if (fields.length === 0) return [kDefaultMode];
+  return fields.map((fieldDef) => ({
+    id: "api_key",
+    label: fieldDef.label || "API Key",
+    profileSuffix: "default",
+    placeholder: fieldDef.placeholder || "...",
+    hint: fieldDef.hint,
+    url: fieldDef.url,
+    field: "key",
+  }));
+};
+
 const getProviderMeta = (provider) =>
   kProviderMeta[provider] || {
-    label: provider,
-    modes: [kDefaultMode],
+    label: kProviderLabels[provider] || provider,
+    modes: buildDefaultProviderModes(provider),
   };
 
 const resolveProfileId = (mode, provider) => {

package/lib/public/js/components/models.js

@@ -137,7 +137,10 @@ export const Models = () => {
 
   const setEnvValue = (key, value) => {
     setEnvVars((prev) => {
-      const next = prev.map((v) => (v.key === key ? { ...v, value } : v));
+      const existing = prev.some((entry) => entry.key === key);
+      const next = existing
+        ? prev.map((v) => (v.key === key ? { ...v, value } : v))
+        : [...prev, { key, value, editable: true }];
       kModelsTabCache = { ...(kModelsTabCache || {}), envVars: next };
       return next;
     });
@@ -263,15 +266,11 @@ export const Models = () => {
     (key) => getKeyVal(envVars, key) !== (savedAiValues[key] || ""),
   );
   const hasSelectedProviderAuth =
-    selectedModelProvider === "anthropic"
-      ? !!(getKeyVal(envVars, "ANTHROPIC_API_KEY") || getKeyVal(envVars, "ANTHROPIC_TOKEN"))
-      : selectedModelProvider === "openai"
-      ? !!getKeyVal(envVars, "OPENAI_API_KEY")
-      : selectedModelProvider === "openai-codex"
+    selectedModelProvider === "openai-codex"
       ? !!codexStatus.connected
-      : selectedModelProvider === "google"
-      ? !!getKeyVal(envVars, "GEMINI_API_KEY")
-      : false;
+      : (kProviderAuthFields[selectedAuthProvider] || []).some((field) =>
+          Boolean(getKeyVal(envVars, field.key)),
+        );
   const canSaveChanges = !savingChanges && (aiCredentialsDirty || (modelDirty && hasSelectedProviderAuth));
 
   const renderCredentialField = (field) => html`

package/lib/public/js/components/onboarding/welcome-import-step.js

@@ -3,6 +3,7 @@ import { useState } from "https://esm.sh/preact/hooks";
 import htm from "https://esm.sh/htm";
 import { ActionButton } from "../action-button.js";
 import { LoadingSpinner } from "../loading-spinner.js";
+import { buildApprovedImportSecrets } from "./welcome-secret-review-utils.js";
 
 const html = htm.bind(h);
 
@@ -237,9 +238,10 @@ export const WelcomeImportStep = ({
             <div
               class="bg-yellow-900/20 border border-yellow-800/50 rounded-lg p-3 text-xs text-yellow-300"
             >
-              AlphaClaw controls deployment env vars
+              AlphaClaw controls deployment tokens and env vars
               (${(scanResult.managedEnvConflicts.vars || []).join(", ")}).
-              Imported values for these will be normalized during import.
+              Imported values for these will be overwritten with AlphaClaw-managed
+              env var references during import.
             </div>
           `
         : null}
@@ -266,8 +268,7 @@ export const WelcomeImportStep = ({
         >
           <div>
             <span class="text-xs text-cyan-300 font-medium">
-              ${secretCount} possible secret${secretCount === 1 ? "" : "s"}
-              detected
+              ${`${secretCount} possible secret${secretCount === 1 ? "" : "s"} detected`}
             </span>
             <p class="text-xs text-gray-500 mt-0.5">
               Review and extract to environment variables
@@ -292,7 +293,7 @@ export const WelcomeImportStep = ({
           className="w-full"
         />
         <${ActionButton}
-          onClick=${() => onApprove([])}
+          onClick=${() => onApprove(buildApprovedImportSecrets(scanResult.secrets))}
           loading=${scanning}
           tone="primary"
           size="md"

package/lib/public/js/components/onboarding/welcome-secret-review-step.js

@@ -3,6 +3,7 @@ import { useState, useCallback } from "https://esm.sh/preact/hooks";
 import htm from "https://esm.sh/htm";
 import { ActionButton } from "../action-button.js";
 import { LoadingSpinner } from "../loading-spinner.js";
+import { buildApprovedImportSecrets } from "./welcome-secret-review-utils.js";
 
 const html = htm.bind(h);
 
@@ -116,13 +117,16 @@ export const WelcomeSecretReviewStep = ({
   ).length;
 
   const handleExtract = () => {
-    const approved = secrets
-      .filter((s) => selections[s.configPath]?.selected)
-      .map((s) => ({
-        ...s,
+    const approved = buildApprovedImportSecrets(
+      secrets.map((secret) => ({
+        ...secret,
+        confidence: selections[secret.configPath]?.selected
+          ? "high"
+          : "medium",
         suggestedEnvVar:
-          selections[s.configPath]?.envVarName || s.suggestedEnvVar,
-      }));
+          selections[secret.configPath]?.envVarName || secret.suggestedEnvVar,
+      })),
+    );
     onApprove(approved);
   };
 
@@ -174,12 +178,14 @@ export const WelcomeSecretReviewStep = ({
         <${ActionButton}
           onClick=${onBack}
           tone="secondary"
+          size="md"
           idleLabel="Back"
           className="w-full"
         />
         <${ActionButton}
           onClick=${handleExtract}
           tone="primary"
+          size="md"
           idleLabel=${selectedCount > 0
             ? `Extract ${selectedCount} Secret${selectedCount === 1 ? "" : "s"}`
             : "Skip All"}

package/lib/public/js/components/onboarding/welcome-secret-review-utils.js

@@ -0,0 +1,19 @@
+export const buildApprovedImportSecrets = (secrets = []) =>
+  (Array.isArray(secrets) ? secrets : [])
+    .filter((secret) => secret?.confidence === "high")
+    .map((secret) => ({
+      ...secret,
+      suggestedEnvVar: secret?.suggestedEnvVar || "",
+    }));
+
+export const buildApprovedImportVals = (approvedSecrets = []) =>
+  (Array.isArray(approvedSecrets) ? approvedSecrets : []).reduce(
+    (nextVals, secret) => {
+      const envVar = String(secret?.suggestedEnvVar || "").trim();
+      const value = String(secret?.value || "");
+      if (!envVar || !value) return nextVals;
+      nextVals[envVar] = value;
+      return nextVals;
+    },
+    {},
+  );

package/lib/public/js/components/providers.js

@@ -189,7 +189,10 @@ export const Providers = ({ onRestartRequired = () => {} }) => {
 
   const setEnvValue = (key, value) => {
     setEnvVars((prev) => {
-      const next = prev.map((v) => (v.key === key ? { ...v, value } : v));
+      const existing = prev.some((entry) => entry.key === key);
+      const next = existing
+        ? prev.map((v) => (v.key === key ? { ...v, value } : v))
+        : [...prev, { key, value, editable: true }];
       kProvidersTabCache = { ...(kProvidersTabCache || {}), envVars: next };
       return next;
     });
@@ -224,18 +227,11 @@ export const Providers = ({ onRestartRequired = () => {} }) => {
     (key) => getKeyVal(envVars, key) !== (savedAiValues[key] || ""),
   );
   const hasSelectedProviderAuth =
-    selectedModelProvider === "anthropic"
-      ? !!(
-          getKeyVal(envVars, "ANTHROPIC_API_KEY") ||
-          getKeyVal(envVars, "ANTHROPIC_TOKEN")
-        )
-      : selectedModelProvider === "openai"
-        ? !!getKeyVal(envVars, "OPENAI_API_KEY")
-        : selectedModelProvider === "openai-codex"
-          ? !!codexStatus.connected
-          : selectedModelProvider === "google"
-            ? !!getKeyVal(envVars, "GEMINI_API_KEY")
-            : false;
+    selectedModelProvider === "openai-codex"
+      ? !!codexStatus.connected
+      : (kProviderAuthFields[selectedAuthProvider] || []).some((field) =>
+          Boolean(getKeyVal(envVars, field.key)),
+        );
   const canSaveChanges =
     !savingChanges &&
     (aiCredentialsDirty || (modelDirty && hasSelectedProviderAuth));

package/lib/public/js/components/usage-tab/overview-section.js

@@ -31,8 +31,9 @@ const getCacheHitRateValueClass = (ratio) => {
 const getOverviewMetrics = (summary) => {
   const totals = summary?.totals || {};
   const cacheReadTokens = Number(totals.cacheReadTokens || 0);
+  const cacheWriteTokens = Number(totals.cacheWriteTokens || 0);
   const inputTokens = Number(totals.inputTokens || 0);
-  const promptTokens = inputTokens + cacheReadTokens;
+  const promptTokens = inputTokens + cacheReadTokens + cacheWriteTokens;
   const turnCount = Number(totals.turnCount || 0);
   const totalTokens = Number(totals.totalTokens || 0);
   const totalCost = Number(totals.totalCost || 0);

package/lib/public/js/components/welcome/use-welcome.js

@@ -29,6 +29,7 @@ import {
 } from "../onboarding/use-welcome-storage.js";
 import { useWelcomeCodex } from "../onboarding/use-welcome-codex.js";
 import { useWelcomePairing } from "../onboarding/use-welcome-pairing.js";
+import { buildApprovedImportVals } from "../onboarding/welcome-secret-review-utils.js";
 
 const kMaxOnboardingVars = 64;
 const kMaxEnvKeyLength = 128;
@@ -413,6 +414,7 @@ export const useWelcome = ({ onComplete }) => {
     setImportError(null);
     try {
       const skipSecretExtraction = approvedSecrets.length === 0;
+      const approvedImportVals = buildApprovedImportVals(approvedSecrets);
       const result = await applyImport({
         tempDir: importTempDir,
         approvedSecrets,
@@ -430,6 +432,7 @@ export const useWelcome = ({ onComplete }) => {
       );
       setVals((prev) => ({
         ...prev,
+        ...approvedImportVals,
         ...(result.preFill || {}),
         [kImportPlaceholderReviewKey]: nextPlaceholderReview,
         [kImportPlaceholderSkipConfirmedKey]: false,