stagent 0.9.5 → 0.10.0

package/src/components/instance/__tests__/instance-section.test.tsx

@@ -0,0 +1,125 @@
+import { fireEvent, render, screen, waitFor } from "@testing-library/react";
+import { afterEach, beforeEach, describe, expect, it, vi } from "vitest";
+
+import { InstanceSection } from "@/components/instance/instance-section";
+
+const { push } = vi.hoisted(() => ({
+  push: vi.fn(),
+}));
+
+vi.mock("next/navigation", () => ({
+  useRouter: () => ({ push }),
+}));
+
+describe("instance section", () => {
+  beforeEach(() => {
+    vi.clearAllMocks();
+  });
+
+  afterEach(() => {
+    vi.unstubAllGlobals();
+  });
+
+  it("renders a single combined instance card for initialized instances", async () => {
+    vi.stubGlobal(
+      "fetch",
+      vi.fn(async (input: RequestInfo | URL, init?: RequestInit) => {
+        const url = String(input);
+        const method = init?.method ?? "GET";
+
+        if (url === "/api/instance/config" && method === "GET") {
+          return {
+            ok: true,
+            json: async () => ({
+              devMode: false,
+              config: {
+                instanceId: "instance_123456789",
+                branchName: "instance/demo",
+                isPrivateInstance: true,
+                createdAt: 1712700000,
+              },
+              guardrails: {
+                prePushHookInstalled: true,
+                prePushHookVersion: "1",
+                pushRemoteBlocked: ["main"],
+                consentStatus: "enabled",
+                firstBootCompletedAt: 1712700000,
+              },
+              upgrade: {
+                lastPolledAt: 1712700000,
+                upgradeAvailable: true,
+                commitsBehind: 3,
+                lastSuccessfulUpgradeAt: 1712600000,
+                pollFailureCount: 0,
+                lastPollError: null,
+              },
+            }),
+          };
+        }
+
+        if (url === "/api/instance/upgrade/check" && method === "POST") {
+          return {
+            ok: true,
+            json: async () => ({ ok: true }),
+          };
+        }
+
+        throw new Error(`Unexpected fetch: ${method} ${url}`);
+      })
+    );
+
+    render(<InstanceSection />);
+
+    expect(await screen.findByRole("button", { name: "Check" })).toBeInTheDocument();
+    expect(screen.getByRole("button", { name: "Upgrade (3)" })).toBeInTheDocument();
+    expect(screen.getByRole("button", { name: "Repair setup" })).toBeInTheDocument();
+    expect(screen.queryByText("Upgrade instance")).not.toBeInTheDocument();
+    expect(screen.queryByText("Advanced: re-run instance setup")).not.toBeInTheDocument();
+    expect(screen.queryByText("Blocked branches")).not.toBeInTheDocument();
+    expect(screen.queryByText("Pre-push hook")).not.toBeInTheDocument();
+  });
+
+  it("uses the shorter setup CTA when the instance is not initialized", async () => {
+    vi.stubGlobal(
+      "fetch",
+      vi.fn(async (input: RequestInfo | URL, init?: RequestInit) => {
+        const url = String(input);
+        const method = init?.method ?? "GET";
+
+        if (url === "/api/instance/config" && method === "GET") {
+          return {
+            ok: true,
+            json: async () => ({
+              devMode: false,
+              config: null,
+              guardrails: null,
+              upgrade: null,
+            }),
+          };
+        }
+
+        if (url === "/api/instance/init" && method === "POST") {
+          return {
+            ok: true,
+            json: async () => ({ ok: true }),
+          };
+        }
+
+        throw new Error(`Unexpected fetch: ${method} ${url}`);
+      })
+    );
+
+    render(<InstanceSection />);
+
+    expect(await screen.findByRole("button", { name: "Run setup" })).toBeInTheDocument();
+    expect(
+      screen.getByText("Instance setup incomplete. Run setup to initialize this workspace.")
+    ).toBeInTheDocument();
+
+    fireEvent.click(screen.getByRole("button", { name: "Run setup" }));
+
+    await waitFor(() => {
+      expect(fetch).toHaveBeenCalledWith("/api/instance/init", { method: "POST" });
+    });
+  });
+});

package/src/components/instance/instance-section.tsx

@@ -0,0 +1,382 @@
+"use client";
+
+import { useEffect, useState, type ReactNode } from "react";
+import { useRouter } from "next/navigation";
+import { Button } from "@/components/ui/button";
+import { Badge } from "@/components/ui/badge";
+
+interface InstanceConfig {
+  instanceId: string;
+  branchName: string;
+  isPrivateInstance: boolean;
+  createdAt: number;
+}
+
+interface Guardrails {
+  prePushHookInstalled: boolean;
+  prePushHookVersion: string;
+  pushRemoteBlocked: string[];
+  consentStatus: "not_yet" | "enabled" | "declined_permanently";
+  firstBootCompletedAt: number | null;
+}
+
+interface UpgradeState {
+  lastPolledAt: number | null;
+  upgradeAvailable: boolean;
+  commitsBehind: number;
+  lastSuccessfulUpgradeAt: number | null;
+  pollFailureCount: number;
+  lastPollError: string | null;
+}
+
+interface ConfigResponse {
+  devMode: boolean;
+  config: InstanceConfig | null;
+  guardrails: Guardrails | null;
+  upgrade: UpgradeState | null;
+}
+
+/**
+ * Settings → Instance section. Compact horizontal strip with title + actions
+ * in a top bar and metadata in a 4-column grid below. On the canonical dev
+ * repo (devMode=true) collapses to a single-row notice to avoid pretending
+ * the main branch is an instance.
+ */
+const STALE_THRESHOLD_MS = 5 * 60 * 1000;
+
+export function InstanceSection() {
+  const router = useRouter();
+  const [state, setState] = useState<ConfigResponse | null>(null);
+  const [loading, setLoading] = useState(true);
+  const [busy, setBusy] = useState<"check" | "init" | "upgrade" | null>(null);
+  const [message, setMessage] = useState<string | null>(null);
+
+  async function loadConfig() {
+    setLoading(true);
+    try {
+      const res = await fetch("/api/instance/config", { cache: "no-store" });
+      if (!res.ok) throw new Error(`HTTP ${res.status}`);
+      const data = (await res.json()) as ConfigResponse;
+      setState(data);
+      return data;
+    } catch (err) {
+      setMessage(err instanceof Error ? err.message : String(err));
+      return null;
+    } finally {
+      setLoading(false);
+    }
+  }
+
+  // Silent background refresh — used after auto-check on mount so we don't
+  // flicker the whole card back to its loading state.
+  async function refreshConfigSilent() {
+    try {
+      const res = await fetch("/api/instance/config", { cache: "no-store" });
+      if (!res.ok) return;
+      const data = (await res.json()) as ConfigResponse;
+      setState(data);
+    } catch {
+      // Swallow — this is a best-effort refresh after auto-check.
+    }
+  }
+
+  useEffect(() => {
+    let cancelled = false;
+    (async () => {
+      const data = await loadConfig();
+      if (cancelled || !data || data.devMode || !data.config) return;
+      // If the cached upgrade state is older than 5 minutes, silently force
+      // a fresh check. This self-heals after manual `git pull` + merge in
+      // the terminal, so users don't see a stale "N updates pending" count.
+      const lastPolled = data.upgrade?.lastPolledAt ?? 0;
+      const ageMs = Date.now() - lastPolled * 1000;
+      if (ageMs > STALE_THRESHOLD_MS) {
+        try {
+          const res = await fetch("/api/instance/upgrade/check", {
+            method: "POST",
+          });
+          if (res.ok && !cancelled) {
+            await refreshConfigSilent();
+          }
+        } catch {
+          // Silent — manual "Check for upgrades" button remains as fallback.
+        }
+      }
+    })();
+    return () => {
+      cancelled = true;
+    };
+  }, []);
+
+  async function checkNow() {
+    setBusy("check");
+    setMessage(null);
+    try {
+      const res = await fetch("/api/instance/upgrade/check", { method: "POST" });
+      if (res.status === 202) {
+        const body = await res.json();
+        setMessage(`Check skipped: ${body.skipped ?? body.error ?? "unknown"}`);
+      } else if (res.ok) {
+        setMessage("Check complete");
+        await loadConfig();
+      } else {
+        throw new Error(`HTTP ${res.status}`);
+      }
+    } catch (err) {
+      setMessage(err instanceof Error ? err.message : String(err));
+    } finally {
+      setBusy(null);
+    }
+  }
+
+  async function startUpgrade() {
+    setBusy("upgrade");
+    setMessage(null);
+    try {
+      const res = await fetch("/api/instance/upgrade", { method: "POST" });
+      if (!res.ok) {
+        const body = await res.json().catch(() => ({}));
+        throw new Error(body.error ?? `HTTP ${res.status}`);
+      }
+      const data = (await res.json()) as { taskId: string };
+      router.push(`/tasks/${data.taskId}`);
+    } catch (err) {
+      setMessage(err instanceof Error ? err.message : String(err));
+      setBusy(null);
+    }
+  }
+
+  async function reinit() {
+    setBusy("init");
+    setMessage(null);
+    try {
+      const res = await fetch("/api/instance/init", { method: "POST" });
+      if (!res.ok) throw new Error(`HTTP ${res.status}`);
+      await loadConfig();
+      setMessage("Instance setup re-run complete");
+    } catch (err) {
+      setMessage(err instanceof Error ? err.message : String(err));
+    } finally {
+      setBusy(null);
+    }
+  }
+
+  if (loading) {
+    return (
+      <section className="rounded-xl border bg-card px-5 py-4">
+        <h2 className="text-base font-semibold">Instance</h2>
+        <p className="mt-1 text-sm text-muted-foreground">Loading…</p>
+      </section>
+    );
+  }
+
+  // Dev mode: main dev repo. Instance bootstrap is gated off. Show a slim
+  // single-row notice so the Settings page layout stays stable without
+  // misrepresenting the dev repo as an instance.
+  if (state?.devMode) {
+    return (
+      <section className="rounded-xl border bg-card px-5 py-3 flex items-center justify-between gap-4 flex-wrap">
+        <div className="flex items-center gap-3">
+          <h2 className="text-base font-semibold">Instance</h2>
+          <Badge variant="outline" className="text-xs font-normal">
+            Dev mode
+          </Badge>
+        </div>
+        <p className="text-xs text-muted-foreground">
+          Running on the main dev repo. Instance upgrade features are disabled.
+          Set{" "}
+          <code className="font-mono text-[11px] px-1 py-0.5 rounded bg-muted">
+            STAGENT_INSTANCE_MODE=true
+          </code>{" "}
+          to test.
+        </p>
+      </section>
+    );
+  }
+
+  const config = state?.config ?? null;
+  const guardrails = state?.guardrails ?? null;
+  const upgrade = state?.upgrade ?? null;
+  const hasConfig = config !== null;
+
+  // Not-initialized state
+  if (!hasConfig) {
+    return (
+      <section className="rounded-xl border bg-card px-5 py-4 space-y-3">
+        <div className="flex items-center justify-between gap-4 flex-wrap">
+          <h2 className="text-base font-semibold">Instance</h2>
+          <Button
+            variant="default"
+            size="sm"
+            onClick={reinit}
+            disabled={busy !== null}
+          >
+            {busy === "init" ? "Running…" : "Run setup"}
+          </Button>
+        </div>
+        <div className="rounded-md border border-amber-500/30 bg-amber-500/10 px-3 py-2 text-xs">
+          Instance setup incomplete. Run setup to initialize this workspace.
+        </div>
+        {message && (
+          <div className="text-xs text-muted-foreground">{message}</div>
+        )}
+      </section>
+    );
+  }
+
+  const shortId = config!.instanceId.slice(0, 8) + "…";
+  const consentLabel = guardrails?.consentStatus ?? "unknown";
+  const hookLabel = guardrails?.prePushHookInstalled
+    ? `v${guardrails.prePushHookVersion}`
+    : "not installed";
+  const blockedLabel = guardrails?.pushRemoteBlocked.length
+    ? guardrails.pushRemoteBlocked.join(", ")
+    : "none";
+  const lastCheck = upgrade?.lastPolledAt
+    ? new Date(upgrade.lastPolledAt * 1000).toLocaleString()
+    : "never";
+  const lastUpgrade = upgrade?.lastSuccessfulUpgradeAt
+    ? new Date(upgrade.lastSuccessfulUpgradeAt * 1000).toLocaleString()
+    : "never";
+  const pollFailing = (upgrade?.pollFailureCount ?? 0) > 0;
+
+  const upgradeAvailable = upgrade?.upgradeAvailable ?? false;
+  const upgradeCount = upgrade?.commitsBehind ?? 0;
+  const startUpgradeDisabled = busy !== null || !upgradeAvailable;
+  const startUpgradeTitle = upgradeAvailable
+    ? `Merge ${upgradeCount} upstream commit${upgradeCount === 1 ? "" : "s"} into ${config!.branchName}`
+    : "No upgrades available — click 'Check for upgrades' to refresh";
+  const statusMessage = pollFailing && upgrade?.lastPollError
+    ? upgrade.lastPollError
+    : message;
+  const statusToneClass = pollFailing
+    ? "text-amber-700 dark:text-amber-400"
+    : "text-muted-foreground";
+
+  return (
+    <section className="rounded-xl border bg-card">
+      <header className="flex items-start justify-between gap-4 px-5 py-3 border-b flex-wrap">
+        <div className="min-w-0 space-y-2">
+          <div className="flex items-center gap-3 min-w-0 flex-wrap">
+            <h2 className="text-base font-semibold">Instance</h2>
+            {upgradeAvailable && (
+              <Badge
+                variant="outline"
+                className="text-xs font-normal border-blue-500/40 bg-blue-500/10 text-blue-700 dark:text-blue-400"
+              >
+                {upgradeCount} update{upgradeCount === 1 ? "" : "s"} available
+              </Badge>
+            )}
+            {pollFailing && (
+              <Badge variant="destructive" className="text-xs font-normal">
+                Poll failing ({upgrade?.pollFailureCount})
+              </Badge>
+            )}
+          </div>
+          <p className="text-xs text-muted-foreground leading-relaxed max-w-prose">
+            Pull latest changes from{" "}
+            <code className="font-mono text-[11px] px-1 py-0.5 rounded bg-muted">
+              main
+            </code>{" "}
+            into{" "}
+            <code className="font-mono text-[11px] px-1 py-0.5 rounded bg-muted">
+              {config!.branchName}
+            </code>
+            . Nothing is pushed automatically.
+          </p>
+        </div>
+        <div className="flex items-center gap-2 shrink-0 flex-wrap">
+          <Button
+            variant="outline"
+            size="sm"
+            onClick={checkNow}
+            disabled={busy !== null}
+          >
+            {busy === "check" ? "Checking…" : "Check"}
+          </Button>
+          <Button
+            variant="default"
+            size="sm"
+            onClick={startUpgrade}
+            disabled={startUpgradeDisabled}
+            title={startUpgradeTitle}
+          >
+            {busy === "upgrade"
+              ? "Starting…"
+              : upgradeAvailable
+                ? `Upgrade (${upgradeCount})`
+                : "Upgrade"}
+          </Button>
+          <Button
+            variant="ghost"
+            size="sm"
+            onClick={reinit}
+            disabled={busy !== null}
+          >
+            {busy === "init" ? "Running…" : "Repair setup"}
+          </Button>
+        </div>
+      </header>
+
+      <dl className="grid grid-cols-2 md:grid-cols-4 gap-x-6 gap-y-2 px-5 py-3 text-sm">
+        <Field label="Branch" mono>
+          {config!.branchName}
+        </Field>
+        <Field
+          label="Instance ID"
+          mono
+          title={config!.instanceId}
+        >
+          {shortId}
+        </Field>
+        <Field label="Last check">{lastCheck}</Field>
+        <Field label="Last upgrade">{lastUpgrade}</Field>
+      </dl>
+
+      <div className="flex items-start justify-between gap-3 border-t px-5 py-2.5 text-[11px]">
+        <p className={`leading-relaxed ${statusToneClass}`}>
+          {statusMessage ?? (
+            upgradeAvailable
+              ? `Ready to merge ${upgradeCount} upstream update${upgradeCount === 1 ? "" : "s"}.`
+              : `Up to date. Last checked: ${lastCheck}.`
+          )}
+        </p>
+        <p className="shrink-0 text-muted-foreground">
+          Repairs local setup without changing data or commits.
+        </p>
+      </div>
+    </section>
+  );
+}
+
+function Field({
+  label,
+  children,
+  mono,
+  truncate,
+  title,
+}: {
+  label: string;
+  children: ReactNode;
+  mono?: boolean;
+  truncate?: boolean;
+  title?: string;
+}) {
+  return (
+    <div className="min-w-0">
+      <dt className="text-[11px] uppercase tracking-wide text-muted-foreground">
+        {label}
+      </dt>
+      <dd
+        title={title}
+        className={
+          "mt-0.5 " +
+          (mono ? "font-mono text-xs " : "") +
+          (truncate ? "truncate" : "")
+        }
+      >
+        {children}
+      </dd>
+    </div>
+  );
+}