[Init] Initial commit - NetMesh terminal manager

components/settings/tabs/ai/CodexConnectionCard.tsx

@@ -0,0 +1,249 @@
+import React from "react";
+import { ExternalLink, LogIn, LogOut, RefreshCw, RotateCcw, X } from "lucide-react";
+import { useI18n } from "../../../../application/i18n/I18nProvider";
+import { Button } from "../../../ui/button";
+import { Switch } from "../../../ui/switch";
+import { cn } from "../../../../lib/utils";
+import type { AgentPathInfo, CodexAppServerStatus, CodexIntegrationStatus, CodexLoginSession } from "./types";
+
+export const CodexConnectionCard: React.FC<{
+  pathInfo: AgentPathInfo | null;
+  isResolvingPath: boolean;
+  customPath: string;
+  onCustomPathChange: (path: string) => void;
+  onRecheckPath: () => void;
+  onResetPath: () => void;
+  integration: CodexIntegrationStatus | null;
+  loginSession: CodexLoginSession | null;
+  isLoading: boolean;
+  hasPendingCustomPath?: boolean;
+  error: string | null;
+  onRefresh: () => void;
+  onConnect: () => void;
+  onCancel: () => void;
+  onOpenUrl: () => void;
+  onLogout: () => void;
+  appServerRuntime: 'sdk' | 'app-server';
+  appServerStatus: CodexAppServerStatus | null;
+  onAppServerRuntimeChange: (runtime: 'sdk' | 'app-server') => void;
+}> = ({
+  pathInfo,
+  isResolvingPath,
+  customPath,
+  onCustomPathChange,
+  onRecheckPath,
+  onResetPath,
+  integration,
+  loginSession,
+  isLoading,
+  hasPendingCustomPath = false,
+  error,
+  onRefresh,
+  onConnect,
+  onCancel,
+  onOpenUrl,
+  onLogout,
+  appServerRuntime,
+  appServerStatus,
+  onAppServerRuntimeChange,
+}) => {
+  const { t } = useI18n();
+  const found = pathInfo?.available;
+
+  const customConfigIncomplete = Boolean(
+    integration?.state === "connected_custom_config"
+    && integration.customConfig
+    && integration.customConfig.envKey
+    && !integration.customConfig.envKeyPresent
+    && !integration.customConfig.hasHardcodedApiKey,
+  );
+
+  const status = isResolvingPath
+    ? t('ai.codex.detecting')
+    : !found
+      ? t('ai.codex.notFound')
+      : loginSession?.state === "running"
+        ? t('ai.codex.awaitingLogin')
+        : integration?.state === "connected_chatgpt"
+          ? t('ai.codex.connectedChatGPT')
+          : integration?.state === "connected_api_key"
+            ? t('ai.codex.connectedApiKey')
+            : integration?.state === "connected_custom_config"
+              ? customConfigIncomplete
+                ? t('ai.codex.customConfigIncomplete')
+                : t('ai.codex.connectedCustomConfig')
+              : integration?.state === "not_logged_in"
+                ? t('ai.codex.notConnected')
+                : t('ai.codex.statusUnknown');
+
+  const statusClassName = isResolvingPath
+    ? "text-muted-foreground"
+    : !found
+      ? "text-amber-500"
+      : loginSession?.state === "running"
+        ? "text-amber-500"
+        : customConfigIncomplete
+          ? "text-amber-500"
+          : integration?.isConnected
+            ? "text-emerald-500"
+            : "text-muted-foreground";
+
+  const outputText = loginSession?.error
+    ? loginSession.error
+    : loginSession?.output?.trim()
+      ? loginSession.output.trim()
+      : integration?.rawOutput?.trim()
+        ? integration.rawOutput.trim()
+        : "";
+
+  return (
+    <div className="rounded-lg border bg-card p-4 space-y-3">
+      <div className="flex items-start justify-between gap-4">
+        <p className="min-w-0 text-xs text-muted-foreground leading-5">
+          {t('ai.codex.description')}
+        </p>
+        <div className={cn("text-xs font-medium shrink-0", statusClassName)}>
+          {status}
+        </div>
+      </div>
+
+      {found && (
+        <div className="flex items-center gap-2 text-xs">
+          <span className="text-muted-foreground">{t('ai.codex.path')}</span>
+          <span className="font-mono text-foreground truncate">{pathInfo.path}</span>
+          {pathInfo.version && (
+            <>
+              <span className="text-muted-foreground">|</span>
+              <span className="text-muted-foreground">{pathInfo.version}</span>
+            </>
+          )}
+        </div>
+      )}
+
+      {!isResolvingPath && (
+        <div className="space-y-2">
+          {!found && (
+            <p className="text-xs text-amber-500">
+              {t('ai.codex.notFoundHint')}
+            </p>
+          )}
+          <div className="flex items-center gap-2">
+            <input
+              type="text"
+              value={customPath}
+              onChange={(e) => onCustomPathChange(e.target.value)}
+              placeholder={t('ai.codex.customPathPlaceholder')}
+              className="flex-1 h-8 rounded-md border border-input bg-background px-3 text-sm font-mono placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring"
+            />
+            <Button variant="outline" size="sm" onClick={onRecheckPath} disabled={!customPath.trim()}>
+              <RefreshCw size={14} className="mr-1.5" />
+              {t('ai.codex.check')}
+            </Button>
+            <Button variant="ghost" size="sm" onClick={onResetPath} disabled={!customPath.trim()}>
+              <RotateCcw size={14} className="mr-1.5" />
+              {t('ai.codex.resetPath')}
+            </Button>
+          </div>
+        </div>
+      )}
+
+      {found && (
+        <div className="border-t border-border/40 pt-3 flex items-start justify-between gap-4">
+          <div className="min-w-0 space-y-1">
+            <div className="flex items-center gap-2">
+              <span className="text-sm font-medium">{t('ai.codex.appServer.title')}</span>
+              <span className="rounded border border-amber-500/30 bg-amber-500/10 px-1.5 py-0.5 text-[10px] font-medium text-amber-500">
+                {t('ai.codex.appServer.experimental')}
+              </span>
+            </div>
+            <p className="text-xs text-muted-foreground leading-5">
+              {t('ai.codex.appServer.description')}
+            </p>
+            {appServerStatus?.checking ? (
+              <p className="text-xs text-muted-foreground">{t('ai.codex.appServer.checking')}</p>
+            ) : appServerStatus?.available ? (
+              <p className="text-xs text-emerald-500">{t('ai.codex.appServer.available')}</p>
+            ) : appServerStatus?.error ? (
+              <p className="text-xs text-amber-500">{appServerStatus.error}</p>
+            ) : null}
+          </div>
+          <Switch
+            checked={appServerRuntime === 'app-server'}
+            disabled={Boolean(appServerStatus?.checking) || (appServerRuntime === 'sdk' && appServerStatus?.available !== true)}
+            aria-label={t('ai.codex.appServer.title')}
+            onCheckedChange={(checked) => onAppServerRuntimeChange(checked ? 'app-server' : 'sdk')}
+          />
+        </div>
+      )}
+
+      {/* Connection & login UI -- only when codex is detected */}
+      {found && (
+        <>
+          <div className="border-t border-border/40 pt-3 flex items-center gap-2 flex-wrap">
+            {loginSession?.state === "running" ? (
+              <>
+                <Button variant="default" size="sm" onClick={onOpenUrl} disabled={!loginSession.url}>
+                  <ExternalLink size={14} className="mr-1.5" />
+                  {t('ai.codex.openLogin')}
+                </Button>
+                <Button variant="outline" size="sm" onClick={onCancel}>
+                  <X size={14} className="mr-1.5" />
+                  {t('common.cancel')}
+                </Button>
+              </>
+            ) : integration?.state === "connected_custom_config" ? (
+              // Nothing to log out of; config.toml is user-owned state.
+              null
+            ) : integration?.isConnected ? (
+              <Button variant="outline" size="sm" onClick={onLogout} disabled={hasPendingCustomPath}>
+                <LogOut size={14} className="mr-1.5" />
+                {t('ai.codex.logout')}
+              </Button>
+            ) : (
+              <Button variant="default" size="sm" onClick={onConnect} disabled={hasPendingCustomPath}>
+                <LogIn size={14} className="mr-1.5" />
+                {t('ai.codex.connectChatGPT')}
+              </Button>
+            )}
+
+            <Button variant="outline" size="sm" onClick={onRefresh} disabled={isLoading || hasPendingCustomPath}>
+              <RefreshCw size={14} className={cn("mr-1.5", isLoading && "animate-spin")} />
+              {t('ai.codex.refreshStatus')}
+            </Button>
+          </div>
+
+          {integration?.state === "connected_custom_config" && integration.customConfig && (
+            <>
+              <p className="text-xs text-emerald-500">
+                {t('ai.codex.customConfigHint').replace(
+                  '{provider}',
+                  integration.customConfig.displayName || integration.customConfig.providerName,
+                )}
+              </p>
+              {integration.customConfig.envKey && !integration.customConfig.envKeyPresent && !integration.customConfig.hasHardcodedApiKey && (
+                <p className="text-xs text-amber-500">
+                  {t('ai.codex.customConfigMissingEnvKey').replace(
+                    '{envKey}',
+                    integration.customConfig.envKey,
+                  )}
+                </p>
+              )}
+            </>
+          )}
+        </>
+      )}
+
+      {error && (
+        <p className="text-xs text-destructive">
+          {error}
+        </p>
+      )}
+
+      {found && outputText && (
+        <pre className="rounded-md border border-border/60 bg-background px-3 py-2 text-[11px] leading-5 text-muted-foreground whitespace-pre-wrap max-h-40 overflow-auto">
+          {outputText}
+        </pre>
+      )}
+    </div>
+  );
+};