stagent 0.9.5 → 0.10.0

package/src/components/settings/openai-chatgpt-auth-control.tsx

@@ -0,0 +1,278 @@
+"use client";
+
+import { useEffect, useState } from "react";
+import {
+  CircleSlash,
+  ExternalLink,
+  Loader2,
+  LogOut,
+  RefreshCw,
+  ShieldCheck,
+  XCircle,
+} from "lucide-react";
+import { Button } from "@/components/ui/button";
+import type {
+  OpenAIAccountInfo,
+  OpenAIRateLimitInfo,
+} from "@/lib/settings/openai-auth";
+import type { OpenAILoginState } from "@/lib/settings/openai-login-manager";
+import type { RuntimeConnectionResult } from "@/lib/agents/runtime/types";
+
+interface OpenAIChatGPTAuthControlProps {
+  connected: boolean;
+  account: OpenAIAccountInfo | null;
+  rateLimits: OpenAIRateLimitInfo | null;
+  initialLoginState: OpenAILoginState;
+  onChanged: () => Promise<void>;
+  onLoginStateChange?: (state: OpenAILoginState) => void;
+}
+
+function formatResetAt(value: number | null | undefined) {
+  if (!value) return null;
+  return new Date(value * 1000).toLocaleString(undefined, {
+    dateStyle: "medium",
+    timeStyle: "short",
+  });
+}
+
+function formatPlanType(value: string | null | undefined) {
+  if (!value) return "Unknown";
+
+  switch (value.toLowerCase()) {
+    case "prolite":
+    case "pro":
+      return "Pro";
+    case "plus":
+      return "Plus";
+    case "business":
+      return "Business";
+    case "enterprise":
+      return "Enterprise";
+    case "edu":
+    case "education":
+      return "Education";
+    default:
+      return value;
+  }
+}
+
+export function OpenAIChatGPTAuthControl({
+  connected,
+  account,
+  rateLimits,
+  initialLoginState,
+  onChanged,
+  onLoginStateChange,
+}: OpenAIChatGPTAuthControlProps) {
+  const [loginState, setLoginState] = useState<OpenAILoginState>(initialLoginState);
+  const [testResult, setTestResult] = useState<RuntimeConnectionResult | null>(null);
+  const [testing, setTesting] = useState(false);
+  const [signingOut, setSigningOut] = useState(false);
+
+  function updateLoginState(next: OpenAILoginState) {
+    setLoginState(next);
+    onLoginStateChange?.(next);
+  }
+
+  useEffect(() => {
+    updateLoginState(initialLoginState);
+  }, [initialLoginState]);
+
+  useEffect(() => {
+    if (loginState.phase !== "pending") return;
+
+    const interval = window.setInterval(async () => {
+      const res = await fetch("/api/settings/openai/login");
+      if (!res.ok) return;
+      const next = (await res.json()) as OpenAILoginState;
+      updateLoginState(next);
+      if (next.phase !== "pending") {
+        window.clearInterval(interval);
+        await onChanged();
+      }
+    }, 1500);
+
+    return () => window.clearInterval(interval);
+  }, [loginState.phase, onChanged]);
+
+  async function handleStartLogin() {
+    setTestResult(null);
+    const res = await fetch("/api/settings/openai/login", { method: "POST" });
+    const next = (await res.json()) as OpenAILoginState;
+    updateLoginState(next);
+
+    if (next.authUrl) {
+      window.open(next.authUrl, "_blank", "noopener,noreferrer");
+    }
+  }
+
+  async function handleCancelLogin() {
+    const res = await fetch("/api/settings/openai/login", { method: "DELETE" });
+    const next = (await res.json()) as OpenAILoginState;
+    updateLoginState(next);
+    await onChanged();
+  }
+
+  async function handleLogout() {
+    setSigningOut(true);
+    try {
+      await fetch("/api/settings/openai/logout", { method: "POST" });
+      updateLoginState({
+        phase: "idle",
+        loginId: null,
+        authUrl: null,
+        account: null,
+        rateLimits: null,
+        error: null,
+        startedAt: null,
+        updatedAt: new Date().toISOString(),
+      });
+      setTestResult(null);
+      await onChanged();
+    } finally {
+      setSigningOut(false);
+    }
+  }
+
+  async function handleTestConnection() {
+    setTesting(true);
+    setTestResult(null);
+    try {
+      const res = await fetch("/api/settings/test", {
+        method: "POST",
+        headers: { "Content-Type": "application/json" },
+        body: JSON.stringify({ runtime: "openai-codex-app-server" }),
+      });
+      const result = (await res.json()) as RuntimeConnectionResult;
+      setTestResult(result);
+      if (result.connected) {
+        await onChanged();
+      }
+    } finally {
+      setTesting(false);
+    }
+  }
+
+  const visibleAccount = account ?? loginState.account;
+  const visibleRateLimits = rateLimits ?? loginState.rateLimits;
+
+  return (
+    <div className="space-y-3">
+      <p className="text-sm text-muted-foreground">
+        ChatGPT mode uses Codex App Server&apos;s browser sign-in flow and keeps the session
+        in Stagent&apos;s isolated Codex home so it does not touch your normal `~/.codex` login.
+      </p>
+
+      {visibleAccount?.email && (
+        <div className="rounded-xl border border-border/60 bg-background/40 px-3 py-2">
+          <div className="flex items-center gap-2 text-sm font-medium">
+            <ShieldCheck className="h-4 w-4 text-success" />
+            <span>{visibleAccount.email}</span>
+          </div>
+          <p className="mt-1 text-xs text-muted-foreground">
+            Plan: {formatPlanType(visibleAccount.planType)}
+          </p>
+        </div>
+      )}
+
+      {visibleRateLimits?.primary && (
+        <div className="rounded-xl border border-border/60 bg-background/40 px-3 py-2">
+          <p className="text-sm font-medium">Codex rate limits</p>
+          <p className="mt-1 text-xs text-muted-foreground">
+            {visibleRateLimits.primary.usedPercent ?? 0}% used in the current{" "}
+            {visibleRateLimits.primary.windowDurationMins ?? "?"}-minute window
+            {formatResetAt(visibleRateLimits.primary.resetsAt)
+              ? ` • resets ${formatResetAt(visibleRateLimits.primary.resetsAt)}`
+              : ""}
+          </p>
+        </div>
+      )}
+
+      {loginState.phase === "pending" ? (
+        <div className="rounded-xl border border-primary/20 bg-primary/5 px-3 py-3">
+          <div className="flex items-center gap-2 text-sm font-medium text-foreground">
+            <Loader2 className="h-4 w-4 animate-spin text-primary" />
+            Waiting for ChatGPT sign-in
+          </div>
+          <p className="mt-1 text-xs text-muted-foreground">
+            Complete the browser flow, then return here. This page will update automatically.
+          </p>
+          <div className="mt-3 flex flex-wrap items-center gap-2">
+            {loginState.authUrl && (
+              <Button asChild variant="outline" size="sm">
+                <a href={loginState.authUrl} target="_blank" rel="noreferrer">
+                  Open login page
+                  <ExternalLink className="ml-1 h-3.5 w-3.5" />
+                </a>
+              </Button>
+            )}
+            <Button variant="ghost" size="sm" onClick={handleCancelLogin}>
+              Cancel sign-in
+            </Button>
+          </div>
+        </div>
+      ) : (
+        <div className="flex flex-wrap items-center gap-2">
+          {!connected && (
+            <Button size="sm" onClick={handleStartLogin}>
+              Sign in with ChatGPT
+            </Button>
+          )}
+          <Button
+            variant="outline"
+            size="sm"
+            onClick={handleTestConnection}
+            disabled={testing}
+          >
+            {testing && <Loader2 className="mr-1 h-3 w-3 animate-spin" />}
+            Test connection
+          </Button>
+          {connected && (
+            <Button
+              variant="ghost"
+              size="sm"
+              onClick={handleLogout}
+              disabled={signingOut}
+            >
+              {signingOut ? (
+                <Loader2 className="mr-1 h-3 w-3 animate-spin" />
+              ) : (
+                <LogOut className="mr-1 h-3.5 w-3.5" />
+              )}
+              Sign out
+            </Button>
+          )}
+        </div>
+      )}
+
+      {loginState.phase === "cancelled" && (
+        <p className="flex items-center gap-1.5 text-sm text-muted-foreground">
+          <CircleSlash className="h-4 w-4" />
+          <span>ChatGPT sign-in cancelled.</span>
+        </p>
+      )}
+
+      {loginState.phase === "failed" && loginState.error && (
+        <p className="flex items-center gap-1.5 text-sm text-status-failed">
+          <XCircle className="h-4 w-4" />
+          <span>{loginState.error}</span>
+        </p>
+      )}
+
+      {testResult && (
+        <p
+          className={`flex items-center gap-1.5 text-sm ${
+            testResult.connected ? "text-success" : "text-status-failed"
+          }`}
+        >
+          {testResult.connected ? (
+            <ShieldCheck className="h-4 w-4" />
+          ) : (
+            <RefreshCw className="h-4 w-4" />
+          )}
+          <span>{testResult.connected ? "Connected" : testResult.error ?? "Connection failed"}</span>
+        </p>
+      )}
+    </div>
+  );
+}

package/src/components/settings/openai-runtime-section.tsx

@@ -13,12 +13,15 @@ import { ApiKeyForm } from "./api-key-form";
 import { AuthStatusBadge } from "./auth-status-badge";
 
 interface OpenAISettings {
+  method: "api_key" | "oauth";
   hasKey: boolean;
   apiKeySource: "db" | "env" | "unknown";
+  oauthConnected?: boolean;
 }
 
 export function OpenAIRuntimeSection() {
   const [settings, setSettings] = useState<OpenAISettings>({
+    method: "api_key",
     hasKey: false,
     apiKeySource: "unknown",
   });
@@ -41,7 +44,7 @@ export function OpenAIRuntimeSection() {
     const res = await fetch("/api/settings/openai", {
       method: "POST",
       headers: { "Content-Type": "application/json" },
-      body: JSON.stringify({ apiKey }),
+      body: JSON.stringify({ method: "api_key", apiKey }),
     });
     if (res.ok) {
       const data = (await res.json()) as OpenAISettings;
@@ -80,6 +83,9 @@ export function OpenAIRuntimeSection() {
           <AuthStatusBadge
             connected={connected}
             apiKeySource={settings.apiKeySource}
+            authMethod={settings.method}
+            oauthConnected={settings.oauthConnected}
+            oauthLabel="ChatGPT"
           />
         </div>
       </CardHeader>

package/src/components/settings/providers-runtimes-section.tsx

@@ -17,8 +17,11 @@ import { AuthMethodSelector } from "./auth-method-selector";
 import { ApiKeyForm } from "./api-key-form";
 import { AuthStatusBadge } from "./auth-status-badge";
 import { ConnectionTestControl } from "./connection-test-control";
+import { OpenAIChatGPTAuthControl } from "./openai-chatgpt-auth-control";
 import type { AuthMethod, ApiKeySource, RoutingPreference } from "@/lib/constants/settings";
 import type { RuntimeSetupState } from "@/lib/settings/runtime-setup";
+import type { OpenAIAccountInfo, OpenAIRateLimitInfo } from "@/lib/settings/openai-auth";
+import type { OpenAILoginState } from "@/lib/settings/openai-login-manager";
 
 // ── Types ────────────────────────────────────────────────────────────
 
@@ -27,6 +30,10 @@ interface ProviderState {
   authMethod?: AuthMethod;
   hasKey: boolean;
   apiKeySource: ApiKeySource;
+  oauthConnected?: boolean;
+  account?: OpenAIAccountInfo | null;
+  rateLimits?: OpenAIRateLimitInfo | null;
+  login?: OpenAILoginState;
   dualBilling: boolean;
   runtimes: RuntimeSetupState[];
 }
@@ -99,6 +106,7 @@ const BILLING_LABELS: Record<string, string> = {
 
 function ProviderRow({
   name,
+  oauthLabel,
   provider,
   defaultOpen,
   open: controlledOpen,
@@ -106,6 +114,7 @@ function ProviderRow({
   children,
 }: {
   name: string;
+  oauthLabel?: string;
   provider: ProviderState;
   defaultOpen: boolean;
   open?: boolean;
@@ -125,10 +134,19 @@ function ProviderRow({
   const activeRuntimes = provider.runtimes.filter((r) => r.configured);
   const activeCount = activeRuntimes.length;
   const activeLabels = activeRuntimes.map((r) => r.label).join(", ");
+  const openAIOAuthPending = provider.authMethod === "oauth" && provider.oauthConnected === false;
+  const openAILoginPending = provider.login?.phase === "pending";
 
   let statusLine: string;
   if (!provider.configured) {
-    statusLine = "Add an API key to enable runtimes";
+    statusLine =
+      provider.authMethod === "oauth"
+        ? "Sign in with ChatGPT to enable Codex App Server"
+        : "Add an API key to enable runtimes";
+  } else if (openAIOAuthPending && activeCount > 0) {
+    statusLine = openAILoginPending
+      ? `Waiting for ${oauthLabel ?? "OAuth"} sign-in. ${activeLabels} remains active.`
+      : `Codex App Server needs ${oauthLabel ?? "OAuth"} sign-in. ${activeLabels} remains active.`;
   } else if (activeCount === 2) {
     statusLine = `2 runtimes active: ${activeLabels}`;
   } else if (activeCount === 1) {
@@ -157,6 +175,9 @@ function ProviderRow({
             <AuthStatusBadge
               connected={provider.configured}
               apiKeySource={provider.apiKeySource}
+              authMethod={provider.authMethod}
+              oauthLabel={oauthLabel}
+              oauthConnected={provider.oauthConnected}
             />
           </div>
           <p className="text-xs text-muted-foreground mt-0.5">{statusLine}</p>
@@ -178,8 +199,10 @@ function ProviderRow({
             <div className="rounded-xl border border-primary/20 bg-primary/5 px-3 py-2">
               <p className="text-xs text-muted-foreground">
                 <span className="font-medium text-foreground">Two billing modes active.</span>{" "}
-                Claude Code uses your Max/Pro subscription. Anthropic Direct API uses
-                pay-as-you-go API billing. Budget guardrails track each separately.
+                {name === "Anthropic"
+                  ? "Claude Code uses your Max/Pro subscription. Anthropic Direct API uses pay-as-you-go API billing."
+                  : "Codex App Server uses your ChatGPT plan. OpenAI Direct uses pay-as-you-go API billing."}{" "}
+                Budget guardrails track each separately.
               </p>
             </div>
           )}
@@ -192,6 +215,14 @@ function ProviderRow({
             <div className="grid gap-2 sm:grid-cols-2">
               {provider.runtimes.map((runtime) => {
                 const isActive = runtime.configured;
+                const inactiveDescription = runtime.runtimeId.includes("direct")
+                  ? "Requires API key"
+                  : runtime.runtimeId === "openai-codex-app-server" &&
+                      provider.authMethod === "oauth"
+                    ? provider.login?.phase === "pending"
+                      ? "Waiting for ChatGPT sign-in"
+                      : "Sign in with ChatGPT"
+                    : "Requires CLI or API key";
                 return (
                   <div
                     key={runtime.runtimeId}
@@ -212,9 +243,7 @@ function ProviderRow({
                     <p className="text-xs text-muted-foreground mt-0.5">
                       {isActive
                         ? (RUNTIME_DESCRIPTIONS[runtime.runtimeId] ?? "Active")
-                        : runtime.runtimeId.includes("direct")
-                          ? "Requires API key"
-                          : "Requires CLI or API key"}
+                        : inactiveDescription}
                     </p>
                   </div>
                 );
@@ -233,6 +262,7 @@ export function ProvidersAndRuntimesSection() {
   const [data, setData] = useState<ProvidersPayload | null>(null);
   const [loading, setLoading] = useState(true);
   const [anthropicOpen, setAnthropicOpen] = useState(false);
+  const [openAILoginState, setOpenAILoginState] = useState<OpenAILoginState | null>(null);
 
   const fetchData = useCallback(async () => {
     try {
@@ -256,6 +286,7 @@ export function ProvidersAndRuntimesSection() {
       if (none || !data.providers.anthropic.configured) {
         setAnthropicOpen(true);
       }
+      setOpenAILoginState(data.providers.openai.login ?? null);
     }
   }, [data?.configuredProviderCount, data?.providers.anthropic.configured]);
 
@@ -292,7 +323,16 @@ export function ProvidersAndRuntimesSection() {
     const res = await fetch("/api/settings/openai", {
       method: "POST",
       headers: { "Content-Type": "application/json" },
-      body: JSON.stringify({ apiKey }),
+      body: JSON.stringify({ method: "api_key", apiKey }),
+    });
+    if (res.ok) fetchData();
+  }
+
+  async function handleOpenAIMethodChange(method: AuthMethod) {
+    const res = await fetch("/api/settings/openai", {
+      method: "POST",
+      headers: { "Content-Type": "application/json" },
+      body: JSON.stringify({ method }),
     });
     if (res.ok) fetchData();
   }
@@ -308,6 +348,17 @@ export function ProvidersAndRuntimesSection() {
     return result;
   }
 
+  async function handleOpenAIDirectTest() {
+    const res = await fetch("/api/settings/test", {
+      method: "POST",
+      headers: { "Content-Type": "application/json" },
+      body: JSON.stringify({ runtime: "openai-direct" }),
+    });
+    const result = await res.json();
+    fetchData();
+    return result;
+  }
+
   // ── Routing preference handler ───────────────────────────────────
 
   async function handleRoutingChange(value: RoutingPreference) {
@@ -349,6 +400,10 @@ export function ProvidersAndRuntimesSection() {
   }
 
   const { providers, routingPreference, configuredProviderCount } = data;
+  const openAIProvider: ProviderState = {
+    ...providers.openai,
+    login: openAILoginState ?? providers.openai.login,
+  };
   const noneConfigured = configuredProviderCount === 0;
   const recommendedAuth = recommendedAuthForRouting(routingPreference);
 
@@ -430,7 +485,7 @@ export function ProvidersAndRuntimesSection() {
             <p className="text-xs text-primary/70">
               {recommendedAuth === "api_key"
                 ? "This preference works best with an API key configured below."
-                : "This preference works well with OAuth (Claude Max/Pro) configured below."}
+                : "This preference works well with subscription-backed auth configured below."}
             </p>
           )}
         </div>
@@ -440,6 +495,7 @@ export function ProvidersAndRuntimesSection() {
         {/* Anthropic provider — controlled open state */}
         <ProviderRow
           name="Anthropic"
+          oauthLabel="Claude Max/Pro"
           provider={providers.anthropic}
           defaultOpen={false}
           open={anthropicOpen}
@@ -479,19 +535,82 @@ export function ProvidersAndRuntimesSection() {
         {/* OpenAI provider — uncontrolled */}
         <ProviderRow
           name="OpenAI"
-          provider={providers.openai}
-          defaultOpen={noneConfigured || !providers.openai.configured}
+          oauthLabel="ChatGPT"
+          provider={openAIProvider}
+          defaultOpen={
+            noneConfigured ||
+            !openAIProvider.configured ||
+            ((openAIProvider.authMethod ?? "api_key") === "oauth" &&
+              !(openAIProvider.oauthConnected ?? false))
+          }
         >
-          <ApiKeyForm
-            hasKey={providers.openai.hasKey}
-            onSave={handleOpenAISaveKey}
-            onTest={handleOpenAITest}
-            keyPrefix="sk-"
-            placeholder="sk-..."
-            maskedPrefix="sk-••••••"
-            envVarName="OPENAI_API_KEY"
-            testButtonLabel="Test OpenAI Connection"
+          <AuthMethodSelector
+            value={openAIProvider.authMethod ?? "api_key"}
+            onChange={handleOpenAIMethodChange}
+            recommendedMethod={recommendedAuth}
+            label="Codex App Server Authentication"
+            options={[
+              {
+                id: "api_key",
+                icon: Zap,
+                title: "API Key",
+                description: "Use an OpenAI API key for Codex App Server",
+              },
+              {
+                id: "oauth",
+                icon: Crown,
+                title: "ChatGPT",
+                description: "Use your ChatGPT plan with browser sign-in",
+              },
+            ]}
           />
+
+          {(openAIProvider.authMethod ?? "api_key") === "oauth" ? (
+            <OpenAIChatGPTAuthControl
+              connected={openAIProvider.oauthConnected ?? false}
+              account={openAIProvider.account ?? null}
+              rateLimits={openAIProvider.rateLimits ?? null}
+              initialLoginState={
+                openAIProvider.login ?? {
+                  phase: "idle",
+                  loginId: null,
+                  authUrl: null,
+                  account: null,
+                  rateLimits: null,
+                  error: null,
+                  startedAt: null,
+                  updatedAt: new Date().toISOString(),
+                }
+              }
+              onChanged={fetchData}
+              onLoginStateChange={setOpenAILoginState}
+            />
+          ) : (
+            <p className="text-sm text-muted-foreground">
+              API key mode authenticates Codex App Server directly and also powers OpenAI Direct.
+            </p>
+          )}
+
+          <Separator />
+
+          <div className="space-y-4">
+            <div>
+              <p className="text-sm font-medium">OpenAI Direct API Key</p>
+              <p className="mt-1 text-xs text-muted-foreground">
+                Used by the OpenAI Direct runtime. If Codex App Server is in API key mode, it shares this key.
+              </p>
+            </div>
+            <ApiKeyForm
+              hasKey={providers.openai.hasKey}
+              onSave={handleOpenAISaveKey}
+              onTest={handleOpenAIDirectTest}
+              keyPrefix="sk-"
+              placeholder="sk-..."
+              maskedPrefix="sk-••••••"
+              envVarName="OPENAI_API_KEY"
+              testButtonLabel="Test OpenAI Direct"
+            />
+          </div>
         </ProviderRow>
       </CardContent>
     </Card>

package/src/components/shared/app-sidebar.tsx

@@ -21,7 +21,6 @@ import {
   MessageCircle,
   Table2,
   BarChart3,
-  Store,
   ChevronDown,
 } from "lucide-react";
 import { cn } from "@/lib/utils";
@@ -43,6 +42,7 @@ import {
 import { ThemeToggle } from "@/components/shared/theme-toggle";
 import { TrustTierBadge } from "@/components/shared/trust-tier-badge";
 import { UnreadBadge } from "@/components/notifications/unread-badge";
+import { UpgradeBadge } from "@/components/instance/upgrade-badge";
 import { AuthStatusDot } from "@/components/settings/auth-status-dot";
 import { StagentLogo } from "@/components/shared/stagent-logo";
 import { WorkspaceIndicator } from "@/components/shared/workspace-indicator";
@@ -65,7 +65,6 @@ const workItems: NavItem[] = [
   { title: "Workflows", href: "/workflows", icon: Workflow },
   { title: "Documents", href: "/documents", icon: FileText },
   { title: "Tables", href: "/tables", icon: Table2, alsoMatches: ["/tables/"] },
-  { title: "Marketplace", href: "/marketplace", icon: Store },
 ];
 
 const manageItems: NavItem[] = [
@@ -199,7 +198,6 @@ function NavGroup({
 
 export function AppSidebar() {
   const pathname = usePathname();
-
   // Determine which group owns the current route
   const activeGroup = useMemo(() => {
     for (const group of groupMap) {
@@ -248,6 +246,9 @@ export function AppSidebar() {
         ))}
       </SidebarContent>
       <SidebarFooter className="px-4 py-3">
+        <div className="group-data-[collapsible=icon]:hidden mb-2 empty:hidden">
+          <UpgradeBadge />
+        </div>
         <div className="group-data-[collapsible=icon]:hidden mb-2">
           <WorkspaceIndicator variant="sidebar" />
         </div>

package/src/components/shared/command-palette.tsx

@@ -23,6 +23,7 @@ import {
   BookOpen,
 } from "lucide-react";
 import { navigationItems, createItems } from "@/lib/chat/command-data";
+import { toggleTheme } from "@/lib/theme";
 
 interface RecentProject {
   id: string;
@@ -115,11 +116,9 @@ export function CommandPalette() {
     [router]
   );
 
-  function toggleTheme() {
+  function handleToggleTheme() {
     setOpen(false);
-    const isDark = document.documentElement.classList.contains("dark");
-    document.documentElement.classList.toggle("dark");
-    localStorage.setItem("stagent-theme", isDark ? "light" : "dark");
+    toggleTheme();
   }
 
   async function markAllRead() {
@@ -239,7 +238,7 @@ export function CommandPalette() {
 
         {/* Utility */}
         <CommandGroup heading="Utility">
-          <CommandItem onSelect={toggleTheme} value="Toggle Theme" keywords={["dark", "light", "mode"]}>
+          <CommandItem onSelect={handleToggleTheme} value="Toggle Theme" keywords={["dark", "light", "mode"]}>
             <Sun className="h-4 w-4 dark:hidden" />
             <Moon className="h-4 w-4 hidden dark:block" />
             Toggle Theme