feat: move opkssh and warpgate into plugins (C3)

src/ui/ssh/dialogs/BrowserSignInDialog.tsx

@@ -1,4 +1,4 @@
-import React, { useState } from "react";
+import { useState } from "react";
 import { Button } from "@/components/button.tsx";
 import { Input } from "@/components/input.tsx";
 import { Shield, Copy, ExternalLink, Check } from "lucide-react";
@@ -6,25 +6,33 @@ import { useTranslation } from "react-i18next";
 import { toast } from "sonner";
 import { copyToClipboard } from "@/lib/clipboard";
 
-interface WarpgateDialogProps {
+interface BrowserSignInDialogProps {
   isOpen: boolean;
+  /** Who is asking, e.g. the product name of an SSH gateway. */
+  label: string;
   url: string;
-  securityKey: string;
+  /** A code to compare in the browser; "N/A" or empty hides it. */
+  code: string;
   onContinue: () => void;
   onCancel: () => void;
   onOpenUrl: () => void;
   backgroundColor?: string;
 }
 
-export function WarpgateDialog({
+/**
+ * A keyboard-interactive round finished in a browser: open the URL, compare
+ * the code there, then continue.
+ */
+export function BrowserSignInDialog({
   isOpen,
+  label,
   url,
-  securityKey,
+  code,
   onContinue,
   onCancel,
   onOpenUrl,
   backgroundColor,
-}: WarpgateDialogProps) {
+}: BrowserSignInDialogProps) {
   const { t } = useTranslation();
   const [copied, setCopied] = useState(false);
 
@@ -44,7 +52,7 @@ export function WarpgateDialog({
   return (
     <div className="absolute inset-0 flex items-center justify-center z-500 animate-in fade-in duration-200 overflow-y-auto">
       <div
-        className="absolute inset-0 bg-canvas rounded-md"
+        className="absolute inset-0 bg-canvas"
         style={{ backgroundColor: backgroundColor || undefined }}
       />
       <div className="bg-card border border-border w-full max-w-md mx-4 my-4 relative z-10 animate-in fade-in zoom-in-95 duration-200">
@@ -52,25 +60,27 @@ export function WarpgateDialog({
           <div className="flex items-center gap-2">
             <Shield className="size-4 text-accent-brand" />
             <h3 className="text-xs font-bold uppercase tracking-widest">
-              {t("terminal.warpgateAuthRequired")}
+              {t("terminal.browserSignInRequired", { provider: label })}
             </h3>
           </div>
         </div>
         <div className="p-4 flex flex-col gap-4">
-          <div className="flex flex-col gap-1.5">
-            <p className="text-[10px] font-bold uppercase tracking-widest text-muted-foreground">
-              {t("terminal.warpgateSecurityKey")}
-            </p>
-            <div className="border border-border bg-muted/10 p-4 text-center">
-              <div className="text-2xl font-mono font-bold tracking-wider text-accent-brand">
-                {securityKey}
+          {code && code !== "N/A" && (
+            <div className="flex flex-col gap-1.5">
+              <p className="text-[10px] font-bold uppercase tracking-widest text-muted-foreground">
+                {t("terminal.browserSignInCode")}
+              </p>
+              <div className="border border-border bg-muted/10 p-4 text-center">
+                <div className="text-2xl font-mono font-bold tracking-wider text-accent-brand">
+                  {code}
+                </div>
               </div>
             </div>
-          </div>
+          )}
 
           <div className="flex flex-col gap-1.5">
             <p className="text-[10px] font-bold uppercase tracking-widest text-muted-foreground">
-              {t("terminal.warpgateAuthUrl")}
+              {t("terminal.browserSignInUrl")}
             </p>
             <div className="flex gap-2">
               <Input
@@ -111,7 +121,7 @@ export function WarpgateDialog({
               onClick={onContinue}
               className="rounded-none text-[10px] font-bold uppercase tracking-widest"
             >
-              {t("terminal.warpgateContinue")}
+              {t("terminal.browserSignInContinue")}
             </Button>
             <Button
               type="button"
@@ -120,7 +130,7 @@ export function WarpgateDialog({
               className="border-accent-brand/40 text-accent-brand hover:bg-accent-brand/10 rounded-none text-[10px] font-bold uppercase tracking-widest flex items-center gap-1.5"
             >
               <ExternalLink className="size-3.5" />
-              {t("terminal.warpgateOpenBrowser")}
+              {t("terminal.browserSignInOpen")}
             </Button>
           </div>
         </div>

src/ui/ssh/dialogs/OPKSSHDialog.tsx

@@ -1,157 +0,0 @@
-import React from "react";
-import { Button } from "@/components/button.tsx";
-import { Shield, ExternalLink, Loader2, AlertCircle } from "lucide-react";
-import { useTranslation } from "react-i18next";
-
-interface OPKSSHDialogProps {
-  isOpen: boolean;
-  authUrl: string;
-  requestId: string;
-  stage: "chooser" | "waiting" | "authenticating" | "completed" | "error";
-  error?: string;
-  providers?: Array<{ alias: string; issuer: string }>;
-  /** Issuer name shown in the title; defaults to OPKSSH. */
-  label?: string;
-  onCancel: () => void;
-  onOpenUrl: () => void;
-  onSelectProvider?: (alias: string) => void;
-  backgroundColor?: string;
-}
-
-export function OPKSSHDialog({
-  isOpen,
-  authUrl,
-  stage,
-  error,
-  providers,
-  onCancel,
-  onOpenUrl,
-  onSelectProvider,
-  backgroundColor,
-  label,
-}: OPKSSHDialogProps) {
-  const { t } = useTranslation();
-
-  if (!isOpen) return null;
-
-  return (
-    <div className="absolute inset-0 flex items-center justify-center z-500 animate-in fade-in duration-200">
-      <div
-        className="absolute inset-0 bg-canvas rounded-md"
-        style={{ backgroundColor: backgroundColor || undefined }}
-      />
-      <div className="bg-card border border-border w-full max-w-md mx-4 relative z-10 animate-in fade-in zoom-in-95 duration-200">
-        <div className="p-4 border-b border-border">
-          <div className="flex items-center gap-2">
-            <Shield className="size-4 text-accent-brand" />
-            <h3 className="text-xs font-bold uppercase tracking-widest">
-              {label
-                ? t("terminal.certAuthRequired", { provider: label })
-                : t("terminal.opksshAuthRequired")}
-            </h3>
-          </div>
-          {stage === "chooser" && (
-            <p className="text-[10px] font-bold uppercase tracking-tight text-muted-foreground mt-1">
-              {t("terminal.opksshAuthDescription")}
-            </p>
-          )}
-        </div>
-        <div className="p-4 flex flex-col gap-4">
-          {stage === "chooser" && (
-            <>
-              {providers && providers.length > 0 && onSelectProvider ? (
-                <div className="flex flex-col gap-2">
-                  {providers.map((provider) => (
-                    <Button
-                      key={provider.alias}
-                      type="button"
-                      variant="outline"
-                      onClick={() => onSelectProvider(provider.alias)}
-                      className="border-accent-brand/40 text-accent-brand hover:bg-accent-brand/10 rounded-none text-[10px] font-bold uppercase tracking-widest w-full flex items-center gap-2"
-                    >
-                      <ExternalLink className="size-3.5" />
-                      {t("terminal.opksshSignInWith", {
-                        provider:
-                          provider.alias.charAt(0).toUpperCase() +
-                          provider.alias.slice(1),
-                      })}
-                    </Button>
-                  ))}
-                </div>
-              ) : authUrl ? (
-                <Button
-                  type="button"
-                  variant="outline"
-                  onClick={onOpenUrl}
-                  className="border-accent-brand/40 text-accent-brand hover:bg-accent-brand/10 rounded-none text-[10px] font-bold uppercase tracking-widest w-full flex items-center gap-2"
-                >
-                  <ExternalLink className="size-3.5" />
-                  {t("terminal.opksshOpenBrowser")}
-                </Button>
-              ) : null}
-              <div className="flex justify-end">
-                <Button
-                  type="button"
-                  variant="ghost"
-                  onClick={onCancel}
-                  className="rounded-none text-[10px] font-bold uppercase tracking-widest"
-                >
-                  {t("common.cancel")}
-                </Button>
-              </div>
-            </>
-          )}
-
-          {(stage === "waiting" || stage === "authenticating") && (
-            <>
-              <div className="flex items-center gap-3 py-2">
-                <Loader2 className="size-4 animate-spin text-accent-brand shrink-0" />
-                <p className="text-xs text-muted-foreground">
-                  {stage === "waiting"
-                    ? t("terminal.opksshWaitingForAuth")
-                    : t("terminal.opksshAuthenticating")}
-                </p>
-              </div>
-              <div className="flex justify-end">
-                <Button
-                  type="button"
-                  variant="ghost"
-                  onClick={onCancel}
-                  className="rounded-none text-[10px] font-bold uppercase tracking-widest"
-                >
-                  {t("common.cancel")}
-                </Button>
-              </div>
-            </>
-          )}
-
-          {stage === "error" && error && (
-            <>
-              <div className="flex items-start gap-3 p-3 border border-destructive/20 bg-destructive/10">
-                <AlertCircle className="size-4 text-destructive shrink-0 mt-0.5" />
-                <div className="flex-1 min-w-0">
-                  <p className="text-[10px] font-bold uppercase tracking-widest text-destructive">
-                    {t("common.error")}
-                  </p>
-                  <p className="text-xs text-destructive/90 mt-1 whitespace-pre-wrap break-words">
-                    {error}
-                  </p>
-                </div>
-              </div>
-              <div className="flex justify-end">
-                <Button
-                  type="button"
-                  variant="ghost"
-                  onClick={onCancel}
-                  className="rounded-none text-[10px] font-bold uppercase tracking-widest"
-                >
-                  {t("common.close")}
-                </Button>
-              </div>
-            </>
-          )}
-        </div>
-      </div>
-    </div>
-  );
-}