plotlink-ows 1.0.33 → 1.2.95

package/app/web/components/Settings.tsx

@@ -1,5 +1,6 @@
 import React, { useState, useEffect, useCallback } from "react";
 import { WalletCard } from "./WalletCard";
+import { isCodexAuthUnclear, CODEX_AUTH_UNCLEAR_MESSAGE, type AgentReadiness } from "@app-lib/agent-readiness";
 
 export function Settings({ token, onLogout }: { token: string; onLogout: () => void }) {
   const [newPassphrase, setNewPassphrase] = useState("");
@@ -23,6 +24,9 @@ export function Settings({ token, onLogout }: { token: string; onLogout: () => v
   const [bindingError, setBindingError] = useState<string | null>(null);
   const [copied, setCopied] = useState<"signature" | "wallet" | null>(null);
 
+  // Agent (CLI) readiness — detection only.
+  const [readiness, setReadiness] = useState<AgentReadiness | null>(null);
+
   const authFetch = useCallback((url: string, opts?: RequestInit) =>
     fetch(url, { ...opts, headers: { ...opts?.headers, Authorization: `Bearer ${token}`, "Content-Type": "application/json" } }),
   [token]);
@@ -36,6 +40,15 @@ export function Settings({ token, onLogout }: { token: string; onLogout: () => v
   // eslint-disable-next-line react-hooks/exhaustive-deps
   }, []);
 
+  // Probe agent readiness on mount (best-effort; failures leave readiness null).
+  useEffect(() => {
+    authFetch("/api/agent/readiness")
+      .then((r) => r.ok ? r.json() : null)
+      .then((data) => { if (data) setReadiness(data); })
+      .catch(() => {});
+  // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, []);
+
   const handleRegisterAgent = async () => {
     if (!agentName.trim()) { setRegisterError("Agent name is required"); return; }
     if (!agentDescription.trim()) { setRegisterError("Description is required"); return; }
@@ -203,6 +216,56 @@ export function Settings({ token, onLogout }: { token: string; onLogout: () => v
         )}
       </div>
 
+      {/* Agent Providers (CLI readiness — detection only) */}
+      <div className="border-border rounded border p-4" data-testid="provider-readiness">
+        <h3 className="text-accent mb-3 text-xs font-bold uppercase tracking-wider">Agent Providers</h3>
+        <div className="space-y-2">
+          <div className="flex items-center justify-between">
+            <span className="text-foreground text-sm">Claude</span>
+            <span className="text-muted text-xs">
+              {readiness?.claude.installed ? "Installed" : "Not detected"}
+            </span>
+          </div>
+          <div className="flex items-center justify-between">
+            <span className="text-foreground text-sm">Codex</span>
+            <span className="text-muted text-xs">
+              {readiness?.codex.installed ? "Installed" : "Not detected"}
+            </span>
+          </div>
+          <div className="flex items-center justify-between">
+            <span className="text-foreground text-sm">Codex version</span>
+            <span className="text-muted text-xs font-mono">
+              {readiness?.codex.version ?? "—"}
+            </span>
+          </div>
+          <div className="flex items-center justify-between">
+            <span className="text-foreground text-sm">Image generation</span>
+            <span className="text-muted text-xs">
+              {readiness?.codex.imageGeneration ?? "unknown"}
+            </span>
+          </div>
+          <div className="flex items-center justify-between">
+            <span className="text-foreground text-sm">Codex auth</span>
+            <span className="text-muted text-xs" data-testid="codex-auth-status">
+              {readiness?.codex.installed ? (readiness.codex.auth === "ok" ? "ok" : "unclear") : "—"}
+            </span>
+          </div>
+          {isCodexAuthUnclear(readiness) && (
+            <p className="text-[11px] text-amber-700" data-testid="codex-auth-unknown-settings">
+              {CODEX_AUTH_UNCLEAR_MESSAGE}
+            </p>
+          )}
+          <div className="flex items-center justify-between">
+            <span className="text-foreground text-sm">Last checked</span>
+            <span className="text-muted text-xs">
+              {readiness?.checkedAt
+                ? new Date(readiness.checkedAt).toLocaleString()
+                : "—"}
+            </span>
+          </div>
+        </div>
+      </div>
+
       {/* Link to PlotLink */}
       <div className="border-border rounded border p-4">
         <h3 className="text-accent mb-3 text-xs font-bold uppercase tracking-wider">Link to PlotLink</h3>