@nastechai/agent 0.16.0 → 0.17.0

package/src/components/ToolsetConfigDrawer.tsx

@@ -0,0 +1,448 @@
+import { useCallback, useEffect, useState } from "react";
+import { createPortal } from "react-dom";
+import { Check, ExternalLink, Loader2, Terminal, X } from "lucide-react";
+import { api } from "@/lib/api";
+import type {
+  ToolsetConfig,
+  ToolsetInfo,
+  ToolsetProvider,
+} from "@/lib/api";
+import { useToast } from "@nastechai/ui/hooks/use-toast";
+import { Button } from "@nastechai/ui/ui/components/button";
+import { Input } from "@nastechai/ui/ui/components/input";
+import { Label } from "@nastechai/ui/ui/components/label";
+import { Badge } from "@nastechai/ui/ui/components/badge";
+import { Switch } from "@nastechai/ui/ui/components/switch";
+import { Spinner } from "@nastechai/ui/ui/components/spinner";
+import { Toast } from "@nastechai/ui/ui/components/toast";
+import { cn, themedBody } from "@/lib/utils";
+
+interface Props {
+  /** The toolset whose backends are being configured. */
+  toolset: ToolsetInfo;
+  onClose: () => void;
+  /** Called after a toggle/provider/key change so the parent grid refreshes. */
+  onChanged: () => void;
+}
+
+/**
+ * Full configuration surface for a single toolset's backends — the dashboard
+ * equivalent of selecting a toolset in the `nastech tools` curses UI: toggle
+ * the toolset on/off, pick a provider, enter API keys, and run a provider's
+ * post-setup install hook (npm/pip/binary) with a live log tail.
+ */
+export function ToolsetConfigDrawer({ toolset, onClose, onChanged }: Props) {
+  const { toast, showToast } = useToast();
+  const [config, setConfig] = useState<ToolsetConfig | null>(null);
+  const [loading, setLoading] = useState(true);
+  const [enabled, setEnabled] = useState(toolset.enabled);
+  const [toggling, setToggling] = useState(false);
+  const [selecting, setSelecting] = useState<string | null>(null);
+  const [activeProvider, setActiveProvider] = useState<string | null>(null);
+  // Per-env-var draft input values, keyed by env var name.
+  const [drafts, setDrafts] = useState<Record<string, string>>({});
+  const [savingProvider, setSavingProvider] = useState<string | null>(null);
+  const [isSet, setIsSet] = useState<Record<string, boolean>>({});
+
+  // Post-setup install log tail state.
+  const [postSetupRunning, setPostSetupRunning] = useState(false);
+  const [postSetupLog, setPostSetupLog] = useState<string[]>([]);
+  const [postSetupKey, setPostSetupKey] = useState<string | null>(null);
+  // Bumped each time a post-setup is kicked off, to (re)trigger the poll
+  // effect below. Mirrors the SkillsPage HubBrowser action-poll pattern so
+  // the recursive timer lives inside the effect (lint-clean — no ref
+  // mutation, no self-referencing memo).
+  const [postSetupTrigger, setPostSetupTrigger] = useState(0);
+
+  const loadConfig = useCallback(() => {
+    // Promise-chain shape (not async/await with a leading synchronous
+    // setLoading) so callers in a useEffect don't trip
+    // react-hooks/set-state-in-effect — setState only fires inside the
+    // async .then/.catch/.finally callbacks.
+    return api
+      .getToolsetConfig(toolset.name)
+      .then((cfg) => {
+        setConfig(cfg);
+        setActiveProvider(cfg.active_provider);
+        const seed: Record<string, boolean> = {};
+        for (const p of cfg.providers) {
+          for (const e of p.env_vars) seed[e.key] = e.is_set;
+        }
+        setIsSet(seed);
+      })
+      .catch(() => showToast("Failed to load toolset config", "error"))
+      .finally(() => setLoading(false));
+  }, [toolset.name, showToast]);
+
+  useEffect(() => {
+    void loadConfig();
+  }, [loadConfig]);
+
+  // Poll the post-setup action's log until it exits. Driven by
+  // postSetupTrigger; the recursive timer + cleanup live entirely inside the
+  // effect (matches the SkillsPage HubBrowser pattern — lint-clean).
+  useEffect(() => {
+    if (postSetupTrigger === 0) return;
+    let cancelled = false;
+    let timer: ReturnType<typeof setTimeout> | null = null;
+    const poll = async () => {
+      try {
+        const st = await api.getActionStatus("tools-post-setup", 300);
+        if (cancelled) return;
+        setPostSetupLog(st.lines);
+        if (st.running) {
+          timer = setTimeout(() => void poll(), 1200);
+        } else {
+          setPostSetupRunning(false);
+          const ok = st.exit_code === 0;
+          showToast(
+            ok ? "Post-setup complete" : "Post-setup finished with errors",
+            ok ? "success" : "error",
+          );
+          // Refresh — a backend may now report itself configured/available.
+          void loadConfig();
+          onChanged();
+        }
+      } catch {
+        if (!cancelled) {
+          setPostSetupRunning(false);
+          showToast("Lost track of the post-setup process", "error");
+        }
+      }
+    };
+    // Small delay so the spawned action has a log file to read.
+    timer = setTimeout(() => void poll(), 800);
+    return () => {
+      cancelled = true;
+      if (timer) clearTimeout(timer);
+    };
+  }, [postSetupTrigger, showToast, loadConfig, onChanged]);
+
+  const handleToggle = async (next: boolean) => {
+    setToggling(true);
+    try {
+      await api.toggleToolset(toolset.name, next);
+      setEnabled(next);
+      showToast(
+        `${toolset.label || toolset.name} ${next ? "enabled" : "disabled"}`,
+        "success",
+      );
+      onChanged();
+    } catch {
+      showToast("Failed to toggle toolset", "error");
+    } finally {
+      setToggling(false);
+    }
+  };
+
+  const handleSelectProvider = async (provider: ToolsetProvider) => {
+    setSelecting(provider.name);
+    try {
+      await api.selectToolsetProvider(toolset.name, provider.name);
+      setActiveProvider(provider.name);
+      showToast(`Provider set to ${provider.name}`, "success");
+      onChanged();
+    } catch (e) {
+      showToast(
+        e instanceof Error ? e.message : "Failed to select provider",
+        "error",
+      );
+    } finally {
+      setSelecting(null);
+    }
+  };
+
+  const handleSaveKeys = async (provider: ToolsetProvider) => {
+    const env: Record<string, string> = {};
+    for (const e of provider.env_vars) {
+      const v = drafts[e.key];
+      if (v && v.trim()) env[e.key] = v.trim();
+    }
+    if (Object.keys(env).length === 0) {
+      showToast("Enter at least one value to save", "error");
+      return;
+    }
+    setSavingProvider(provider.name);
+    try {
+      const res = await api.saveToolsetEnv(toolset.name, env);
+      setIsSet((prev) => ({ ...prev, ...res.is_set }));
+      // Clear saved drafts so the inputs reset to the "saved" placeholder.
+      setDrafts((prev) => {
+        const next = { ...prev };
+        for (const k of res.saved) delete next[k];
+        return next;
+      });
+      showToast(
+        res.saved.length
+          ? `Saved ${res.saved.length} key${res.saved.length > 1 ? "s" : ""}`
+          : "Nothing to save",
+        "success",
+      );
+      onChanged();
+    } catch (e) {
+      showToast(
+        e instanceof Error ? e.message : "Failed to save keys",
+        "error",
+      );
+    } finally {
+      setSavingProvider(null);
+    }
+  };
+
+  const handleRunPostSetup = async (provider: ToolsetProvider) => {
+    if (!provider.post_setup) return;
+    setPostSetupRunning(true);
+    setPostSetupLog([]);
+    setPostSetupKey(provider.post_setup);
+    try {
+      await api.runToolsetPostSetup(toolset.name, provider.post_setup);
+      // Bump the trigger so the poll effect (re)starts tailing the log.
+      setPostSetupTrigger((n) => n + 1);
+    } catch (e) {
+      setPostSetupRunning(false);
+      showToast(
+        e instanceof Error ? e.message : "Failed to start post-setup",
+        "error",
+      );
+    }
+  };
+
+  const labelText = toolset.label?.trim() || toolset.name;
+
+  return createPortal(
+    <div
+      className="fixed inset-0 z-[100] flex items-center justify-center bg-background/85 backdrop-blur-sm p-4"
+      onMouseDown={(e) => {
+        if (e.target === e.currentTarget) onClose();
+      }}
+    >
+      <div
+        className={cn(
+          themedBody,
+          "relative w-full max-w-2xl max-h-[85vh] border border-border bg-card shadow-2xl flex flex-col",
+        )}
+      >
+        <Button
+          ghost
+          size="xs"
+          className="absolute right-2 top-2 text-muted-foreground hover:text-foreground"
+          onClick={onClose}
+          aria-label="Close"
+        >
+          <X />
+        </Button>
+
+        {/* Header — toolset identity + enable toggle */}
+        <header className="p-5 pb-3 border-b border-border">
+          <div className="flex items-center gap-3 pr-8">
+            <span className="font-mondwest text-display text-base tracking-wider">
+              {labelText}
+            </span>
+            <Badge tone={enabled ? "success" : "outline"} className="text-xs">
+              {enabled ? "Active" : "Inactive"}
+            </Badge>
+          </div>
+          <p className="text-xs text-muted-foreground mt-1">
+            {toolset.description}
+          </p>
+          <div className="mt-3 flex items-center gap-2">
+            <Switch
+              checked={enabled}
+              onCheckedChange={(v) => void handleToggle(v)}
+              disabled={toggling}
+              aria-label="Enable toolset"
+            />
+            <span className="text-xs text-muted-foreground">
+              {enabled ? "Enabled for the agent" : "Disabled"}
+            </span>
+          </div>
+        </header>
+
+        {/* Body — provider matrix */}
+        <div className="flex-1 min-h-0 overflow-y-auto p-5 pt-4 space-y-4">
+          {loading ? (
+            <div className="flex items-center justify-center py-10">
+              <Spinner />
+            </div>
+          ) : !config?.has_category ? (
+            <p className="text-sm text-muted-foreground py-6 text-center">
+              This toolset has no configurable backends — toggle it on or off
+              above. It works with no provider selection or API keys.
+            </p>
+          ) : config.providers.length === 0 ? (
+            <p className="text-sm text-muted-foreground py-6 text-center">
+              No providers are available for this toolset in this install.
+            </p>
+          ) : (
+            config.providers.map((provider) => {
+              const isActive = provider.name === activeProvider;
+              return (
+                <div
+                  key={provider.name}
+                  className={cn(
+                    "border border-border p-3",
+                    isActive && "border-emerald-500/60 bg-emerald-500/5",
+                  )}
+                >
+                  <div className="flex items-center justify-between gap-2">
+                    <div className="flex items-center gap-2 min-w-0">
+                      <span className="font-medium text-sm">
+                        {provider.name}
+                      </span>
+                      {provider.badge && (
+                        <Badge tone="secondary" className="text-xs">
+                          {provider.badge}
+                        </Badge>
+                      )}
+                      {provider.requires_nastech_auth && (
+                        <Badge tone="outline" className="text-xs">
+                          NasTech Portal
+                        </Badge>
+                      )}
+                    </div>
+                    {isActive ? (
+                      <Badge tone="success" className="text-xs shrink-0">
+                        <Check className="h-3 w-3 mr-0.5" /> Selected
+                      </Badge>
+                    ) : (
+                      <Button
+                        size="xs"
+                        outlined
+                        onClick={() => void handleSelectProvider(provider)}
+                        disabled={selecting !== null}
+                      >
+                        {selecting === provider.name ? (
+                          <Loader2 className="h-3 w-3 animate-spin" />
+                        ) : (
+                          "Select"
+                        )}
+                      </Button>
+                    )}
+                  </div>
+                  {provider.tag && (
+                    <p className="text-xs text-muted-foreground mt-1">
+                      {provider.tag}
+                    </p>
+                  )}
+
+                  {/* API key inputs */}
+                  {provider.env_vars.length > 0 && (
+                    <div className="mt-3 space-y-2.5">
+                      {provider.env_vars.map((ev) => (
+                        <div key={ev.key} className="space-y-1">
+                          <div className="flex items-center justify-between gap-2">
+                            <Label
+                              htmlFor={`env-${ev.key}`}
+                              className="text-xs font-mono"
+                            >
+                              {ev.key}
+                            </Label>
+                            {isSet[ev.key] && (
+                              <Badge tone="success" className="text-xs">
+                                Saved
+                              </Badge>
+                            )}
+                          </div>
+                          <Input
+                            id={`env-${ev.key}`}
+                            type="password"
+                            className="h-8 rounded-none text-xs font-mono"
+                            placeholder={
+                              isSet[ev.key]
+                                ? "•••••••• (saved — leave blank to keep)"
+                                : ev.prompt || ev.key
+                            }
+                            value={drafts[ev.key] ?? ""}
+                            onChange={(e) =>
+                              setDrafts((prev) => ({
+                                ...prev,
+                                [ev.key]: e.target.value,
+                              }))
+                            }
+                          />
+                          {ev.url && (
+                            <a
+                              href={ev.url}
+                              target="_blank"
+                              rel="noreferrer"
+                              className="inline-flex items-center gap-1 text-xs text-muted-foreground hover:text-foreground"
+                            >
+                              <ExternalLink className="h-3 w-3" /> Get a key
+                            </a>
+                          )}
+                        </div>
+                      ))}
+                      <Button
+                        size="xs"
+                        onClick={() => void handleSaveKeys(provider)}
+                        disabled={savingProvider !== null}
+                      >
+                        {savingProvider === provider.name ? (
+                          <Loader2 className="h-3 w-3 animate-spin" />
+                        ) : (
+                          "Save keys"
+                        )}
+                      </Button>
+                    </div>
+                  )}
+
+                  {/* Post-setup install hook */}
+                  {provider.post_setup && (
+                    <div className="mt-3 border-t border-border pt-3">
+                      <p className="text-xs text-muted-foreground mb-1.5">
+                        This backend needs a one-time install
+                        {" "}
+                        <span className="font-mono">
+                          ({provider.post_setup})
+                        </span>
+                        . Runs on this host — may take a few minutes.
+                      </p>
+                      <Button
+                        size="xs"
+                        outlined
+                        onClick={() => void handleRunPostSetup(provider)}
+                        disabled={postSetupRunning}
+                      >
+                        {postSetupRunning &&
+                        postSetupKey === provider.post_setup ? (
+                          <>
+                            <Loader2 className="h-3 w-3 animate-spin mr-1" />
+                            Installing…
+                          </>
+                        ) : (
+                          <>
+                            <Terminal className="h-3 w-3 mr-1" /> Run setup
+                          </>
+                        )}
+                      </Button>
+                    </div>
+                  )}
+                </div>
+              );
+            })
+          )}
+
+          {/* Post-setup live log */}
+          {(postSetupRunning || postSetupLog.length > 0) && (
+            <div className="border border-border">
+              <div className="flex items-center gap-2 px-3 py-1.5 border-b border-border bg-muted/30">
+                <Terminal className="h-3.5 w-3.5 text-muted-foreground" />
+                <span className="text-xs font-mono text-muted-foreground">
+                  post-setup: {postSetupKey}
+                </span>
+                {postSetupRunning && (
+                  <Loader2 className="h-3 w-3 animate-spin ml-auto text-muted-foreground" />
+                )}
+              </div>
+              <pre className="max-h-48 overflow-y-auto p-3 text-xs font-mono whitespace-pre-wrap text-text-secondary">
+                {postSetupLog.length ? postSetupLog.join("\n") : "Starting…"}
+              </pre>
+            </div>
+          )}
+        </div>
+      </div>
+      <Toast toast={toast} />
+    </div>,
+    document.body,
+  );
+}

package/src/contexts/PageHeaderProvider.tsx

@@ -0,0 +1,139 @@
+import { useLayoutEffect, useMemo, useState, type ReactNode } from "react";
+import { useLocation } from "react-router-dom";
+import { PageHeaderContext } from "./page-header-context";
+import { resolvePageTitle } from "@/lib/resolve-page-title";
+import { cn } from "@/lib/utils";
+import { useI18n } from "@/i18n";
+
+export function PageHeaderProvider({
+  children,
+  pluginTabs,
+}: {
+  children: ReactNode;
+  pluginTabs: { path: string; label: string }[];
+}) {
+  const { pathname } = useLocation();
+  const { t } = useI18n();
+  const [titleOverride, setTitleOverride] = useState<string | null>(null);
+  const [afterTitle, setAfterTitle] = useState<ReactNode>(null);
+  const [end, setEnd] = useState<ReactNode>(null);
+
+  // Clear any per-page title / toolbar slots when the path changes. Child routes
+  // re-fill these on mount via usePageHeader.
+  /* eslint-disable react-hooks/set-state-in-effect */
+  useLayoutEffect(() => {
+    setTitleOverride(null);
+    setAfterTitle(null);
+    setEnd(null);
+  }, [pathname]);
+  /* eslint-enable react-hooks/set-state-in-effect */
+
+  const defaultTitle = useMemo(
+    () => resolvePageTitle(pathname, t, pluginTabs),
+    [pathname, t, pluginTabs],
+  );
+  const displayTitle = titleOverride ?? defaultTitle;
+
+  const isChatRoute = pathname === "/chat" || pathname === "/chat/";
+  /** Env jump-nav is wide — stack below title on small screens so KEYS stays readable. */
+  const isEnvRoute =
+    pathname === "/env" || pathname.startsWith("/env/");
+
+  const value = useMemo(
+    () => ({
+      setAfterTitle,
+      setEnd,
+      setTitle: setTitleOverride,
+    }),
+    [],
+  );
+
+  return (
+    <PageHeaderContext.Provider value={value}>
+      <div className="flex min-h-0 w-full min-w-0 flex-1 flex-col overflow-hidden">
+        <header
+          className={cn(
+            "z-1 w-full shrink-0",
+            "box-border border-b border-current/20",
+            "bg-background-base/40 backdrop-blur-sm",
+            // Mobile stacks title + toolbar — fixed h-14 clips content; desktop stays one row.
+            "min-h-0 overflow-x-hidden overflow-y-visible py-3 sm:h-14 sm:min-h-[3.5rem] sm:overflow-hidden sm:py-0",
+          )}
+          role="banner"
+        >
+          <div
+            className={cn(
+              "flex w-full min-w-0 flex-1 gap-3 px-3 sm:h-full sm:gap-3 sm:px-6",
+              isChatRoute
+                ? "flex-row items-center"
+                : "flex-col justify-center sm:flex-row sm:items-center",
+            )}
+          >
+            <div
+              className={cn(
+                "flex min-w-0 flex-1 gap-2 sm:gap-3",
+                afterTitle && isEnvRoute
+                  ? "flex-col items-start sm:flex-row sm:items-center"
+                  : afterTitle
+                    ? "flex-row flex-wrap items-center"
+                    : "flex-row items-center",
+              )}
+            >
+              <h1
+                className={cn(
+                  "font-expanded min-w-0 text-sm font-bold tracking-[0.08em] text-midground",
+                  afterTitle && isEnvRoute
+                    ? "max-w-full sm:min-w-0 sm:shrink sm:truncate"
+                    : afterTitle
+                      ? "shrink truncate"
+                      : "truncate",
+                )}
+                style={{ mixBlendMode: "plus-lighter" }}
+              >
+                {displayTitle}
+              </h1>
+              {afterTitle ? (
+                <div
+                  className={cn(
+                    "min-w-0 scrollbar-none",
+                    isEnvRoute
+                      ? "w-full overflow-x-auto sm:flex-1 sm:overflow-x-auto"
+                      : "shrink-0 overflow-visible",
+                  )}
+                >
+                  {afterTitle}
+                </div>
+              ) : null}
+            </div>
+
+            {end ? (
+              <div
+                className={cn(
+                  "flex min-w-0 sm:max-w-md sm:flex-1",
+                  isChatRoute
+                    ? "w-auto shrink-0 justify-end"
+                    : "w-full justify-start sm:justify-end",
+                )}
+              >
+                {end}
+              </div>
+            ) : null}
+          </div>
+        </header>
+
+        <main
+          className={cn(
+            "min-h-0 w-full min-w-0 flex-1 flex flex-col",
+            // Bottom inset for scrolled pages lives on the route outlet wrapper in
+            // `App.tsx` (`w-full min-w-0`) so it pads scrollable content, not flex chrome.
+            isChatRoute
+              ? "overflow-hidden"
+              : "overflow-y-auto overflow-x-hidden [scrollbar-gutter:stable]",
+          )}
+        >
+          {children}
+        </main>
+      </div>
+    </PageHeaderContext.Provider>
+  );
+}