@mndrk/agx 2.2.0 → 2.3.1

package/cloud-runtime/standalone/apps/local/components/projects/RecentlyCompletedCard.tsx

@@ -157,7 +157,6 @@ export function RecentlyCompletedCard({
         <table className="min-w-full text-sm">
           <thead className="bg-[var(--secondary)]">
             <tr className="text-left text-[11px] uppercase tracking-[0.18em] text-[var(--muted-foreground)]">
-              <th className="px-4 py-3 font-medium">Team</th>
               <th className="px-4 py-3 font-medium">Agent</th>
               <th className="px-4 py-3 font-medium">Status</th>
               <th className="px-4 py-3 font-medium">Thread</th>
@@ -177,21 +176,6 @@ export function RecentlyCompletedCard({
                   )
                 }
               >
-                <td className="px-4 py-3">
-                  {agentTeamMap.has(process.agentId) ? (
-                    <button
-                      onClick={(event) => {
-                        event.stopPropagation();
-                        router.push(`/projects/${projectSlug}/teams/${agentTeamMap.get(process.agentId)!.id}`);
-                      }}
-                      className="text-left font-medium text-[var(--foreground)] transition-colors hover:text-[var(--primary)]"
-                    >
-                      {agentTeamMap.get(process.agentId)!.name}
-                    </button>
-                  ) : (
-                    <span className="text-[var(--muted-foreground)]">Unassigned</span>
-                  )}
-                </td>
                 <td className="px-4 py-3 text-[var(--foreground)]">{getAgentName(process.agentId)}</td>
                 <td className="px-4 py-3">
                   <span className="inline-flex items-center gap-1.5 rounded-full border border-[var(--border)] bg-[var(--secondary)] px-2 py-0.5 text-[11px] font-medium text-[var(--muted-foreground)]">

package/cloud-runtime/standalone/apps/local/components/projects/ReplaceAgentsModal.tsx

@@ -263,7 +263,7 @@ export default function ReplaceAgentsModal({
                       <div className="w-5 h-5 rounded-md flex items-center justify-center flex-shrink-0 bg-emerald-500/15">
                         <Check className="w-3 h-3 text-emerald-400" />
                       </div>
-                      <span className="text-sm font-medium truncate">{preset.name}</span>
+                      <span className="text-sm font-medium truncate">{preset.role}</span>
                       <span className="text-[10px] px-1.5 py-0.5 rounded-full flex-shrink-0" style={{ background: "var(--card-bg)", color: "var(--muted-foreground)" }}>
                         {preset.skillProfileId}
                       </span>
@@ -316,7 +316,7 @@ export default function ReplaceAgentsModal({
                     onMouseLeave={(e) => { e.currentTarget.style.borderColor = "var(--border)"; e.currentTarget.style.color = "var(--muted-foreground)"; }}
                   >
                     <Plus className="w-3 h-3" />
-                    {preset.name}
+                    {preset.role}
                   </button>
                 ))}
                 {availablePresets.length === 0 && (

package/cloud-runtime/standalone/apps/local/components/setup/McpSetupStep.tsx

@@ -1,8 +1,9 @@
 // components/setup/McpSetupStep.tsx
 "use client";
 
-import { useState, useEffect, useCallback } from "react";
-import { Check, Loader2, ExternalLink, Plug } from "lucide-react";
+import { useState, useEffect, useCallback, useRef } from "react";
+import { Check, Loader2, ExternalLink, Plug, Terminal } from "lucide-react";
+import TerminalPane, { type TerminalPaneHandle } from "@/components/terminal/TerminalPane";
 import { SetupLayout } from "./SetupLayout";
 
 interface McpServer {
@@ -25,22 +26,27 @@ type McpStatus = Record<string, boolean>;
 type CliStatus = Record<string, boolean>;
 
 interface McpSetupStepProps {
-  onNext: () => void;
+  onFinish: () => void;
   onBack: () => void;
 }
 
-const CLI_PROVIDERS = [
-  { id: "claude", label: "Claude Code" },
-  { id: "codex", label: "Codex" },
-  { id: "gemini", label: "Gemini CLI" },
+const CLI_PROVIDERS: { id: string; label: string; launchCmd: string }[] = [
+  { id: "claude", label: "Claude Code", launchCmd: "claude" },
+  { id: "codex", label: "Codex", launchCmd: "codex" },
+  { id: "gemini", label: "Gemini CLI", launchCmd: "gemini" },
 ];
 
-export function McpSetupStep({ onNext, onBack }: McpSetupStepProps) {
+export function McpSetupStep({ onFinish, onBack }: McpSetupStepProps) {
   const [loading, setLoading] = useState(true);
   const [clis, setClis] = useState<CliStatus>({});
   const [mcpConfigured, setMcpConfigured] = useState<McpStatus>({});
   const [configuringCli, setConfiguringCli] = useState<string | null>(null);
   const [mcpError, setMcpError] = useState<string | null>(null);
+  const termRef = useRef<TerminalPaneHandle>(null);
+
+  const runInTerminal = useCallback((cmd: string) => {
+    termRef.current?.sendCommand(cmd);
+  }, []);
 
   const refresh = useCallback(async () => {
     try {
@@ -91,7 +97,8 @@ export function McpSetupStep({ onNext, onBack }: McpSetupStepProps) {
   return (
     <SetupLayout
       currentStep={2}
-      totalSteps={4}
+      totalSteps={2}
+      wide
       footer={
         <div className="flex items-center justify-between">
           <button
@@ -103,10 +110,10 @@ export function McpSetupStep({ onNext, onBack }: McpSetupStepProps) {
           </button>
           <button
             type="button"
-            onClick={onNext}
+            onClick={onFinish}
             className="inline-flex items-center gap-2 px-6 py-2.5 bg-[var(--foreground)] text-[var(--background)] text-[14px] font-semibold rounded-lg hover:opacity-90 transition-all"
           >
-            {hasAnyConfigured ? "Next" : "Skip"}
+            {hasAnyConfigured ? "Finish" : "Skip"}
           </button>
         </div>
       }
@@ -116,127 +123,155 @@ export function McpSetupStep({ onNext, onBack }: McpSetupStepProps) {
           Configure MCP Servers
         </h1>
         <p className="mt-2 text-[14px] text-[var(--muted-foreground)] leading-relaxed">
-          MCP servers let your agents interact with external tools.<br />
-          Set them up so agents can read and update tickets automatically.
+          MCP servers let your agents interact with external tools. After registering a server below,
+          launch your CLI in the terminal to complete the OAuth login.
         </p>
       </div>
 
-      {loading ? (
-        <div className="text-center py-8">
-          <Loader2 className="w-6 h-6 animate-spin text-[var(--muted-foreground)] mx-auto" />
-          <p className="mt-3 text-[13px] text-[var(--muted-foreground)]">
-            Checking MCP configuration...
-          </p>
-        </div>
-      ) : (
-        <div className="space-y-6">
-          {MCP_SERVERS.map((server) => (
-            <div
-              key={server.id}
-              className="border border-[var(--card-border)] rounded-lg overflow-hidden"
-            >
-              {/* Server header */}
-              <div className="px-4 py-3 flex items-center gap-3">
-                <div className="w-8 h-8 rounded-lg bg-[var(--secondary)] flex items-center justify-center">
-                  <Plug className="w-4 h-4 text-[var(--foreground)]" />
-                </div>
-                <div className="flex-1 min-w-0">
-                  <div className="flex items-center gap-2">
-                    <span className="text-[14px] font-semibold text-[var(--foreground)]">
-                      {server.name}
-                    </span>
-                    {hasAnyConfigured && (
-                      <span className="text-[11px] font-medium text-emerald-600 dark:text-emerald-400 bg-emerald-50 dark:bg-emerald-900/20 px-1.5 py-0.5 rounded">
-                        Configured
-                      </span>
-                    )}
-                  </div>
-                  <p className="text-[12px] text-[var(--muted-foreground)]">
-                    {server.description}
-                  </p>
-                </div>
-              </div>
-
-              {/* Per-CLI configuration */}
-              <div className="border-t border-[var(--card-border)] px-4 py-3 space-y-2">
-                <p className="text-[11px] font-semibold uppercase tracking-wide text-[var(--muted-foreground)] mb-2">
-                  Configure for your CLI
-                </p>
-                {CLI_PROVIDERS.map((provider) => {
-                  const installed = clis[provider.id];
-                  const configured = mcpConfigured[provider.id];
-                  const isConfiguring = configuringCli === provider.id;
-
-                  return (
-                    <div
-                      key={provider.id}
-                      className={`flex items-center justify-between rounded-md border border-[var(--card-border)] px-3 py-2.5 ${
-                        !installed ? "opacity-40" : ""
-                      }`}
-                    >
-                      <span className="text-[13px] text-[var(--foreground)]">
-                        {provider.label}
-                      </span>
-                      {!installed ? (
-                        <span className="text-[11px] text-[var(--muted-foreground)]">
-                          Not installed
-                        </span>
-                      ) : configured ? (
-                        <span className="flex items-center gap-1 text-[11px] text-emerald-600 dark:text-emerald-400">
-                          <Check className="w-3.5 h-3.5" />
-                          Configured
+      <div className="flex gap-6 min-h-0 items-start">
+        {/* Left column — MCP servers list */}
+        <div className="w-[380px] shrink-0 space-y-6">
+          {loading ? (
+            <div className="text-center py-8">
+              <Loader2 className="w-6 h-6 animate-spin text-[var(--muted-foreground)] mx-auto" />
+              <p className="mt-3 text-[13px] text-[var(--muted-foreground)]">
+                Checking MCP configuration...
+              </p>
+            </div>
+          ) : (
+            <>
+              {MCP_SERVERS.map((server) => (
+                <div
+                  key={server.id}
+                  className="border border-[var(--card-border)] rounded-lg overflow-hidden"
+                >
+                  <div className="px-4 py-3 flex items-center gap-3">
+                    <div className="w-8 h-8 rounded-lg bg-[var(--secondary)] flex items-center justify-center">
+                      <Plug className="w-4 h-4 text-[var(--foreground)]" />
+                    </div>
+                    <div className="flex-1 min-w-0">
+                      <div className="flex items-center gap-2">
+                        <span className="text-[14px] font-semibold text-[var(--foreground)]">
+                          {server.name}
                         </span>
-                      ) : (
-                        <button
-                          type="button"
-                          onClick={() => handleConfigureMcp(provider.id)}
-                          disabled={isConfiguring}
-                          className="inline-flex items-center gap-1.5 px-3 py-1 text-[12px] font-medium rounded-md border border-[var(--card-border)] hover:bg-[var(--secondary)] transition-colors disabled:opacity-50"
+                        {hasAnyConfigured && (
+                          <span className="text-[11px] font-medium text-emerald-600 dark:text-emerald-400 bg-emerald-50 dark:bg-emerald-900/20 px-1.5 py-0.5 rounded">
+                            Registered
+                          </span>
+                        )}
+                      </div>
+                      <p className="text-[12px] text-[var(--muted-foreground)]">
+                        {server.description}
+                      </p>
+                    </div>
+                  </div>
+
+                  <div className="border-t border-[var(--card-border)] px-4 py-3 space-y-2">
+                    <p className="text-[11px] font-semibold uppercase tracking-wide text-[var(--muted-foreground)] mb-2">
+                      Register & authenticate per CLI
+                    </p>
+                    {CLI_PROVIDERS.map((provider) => {
+                      const installed = clis[provider.id];
+                      const configured = mcpConfigured[provider.id];
+                      const isConfiguring = configuringCli === provider.id;
+
+                      return (
+                        <div
+                          key={provider.id}
+                          className={`flex items-center justify-between rounded-md border border-[var(--card-border)] px-3 py-2.5 ${
+                            !installed ? "opacity-40" : ""
+                          }`}
                         >
-                          {isConfiguring ? (
-                            <>
-                              <Loader2 className="w-3 h-3 animate-spin" />
-                              Setting up...
-                            </>
+                          <span className="text-[13px] text-[var(--foreground)]">
+                            {provider.label}
+                          </span>
+                          {!installed ? (
+                            <span className="text-[11px] text-[var(--muted-foreground)]">
+                              Not installed
+                            </span>
+                          ) : configured ? (
+                            <div className="flex items-center gap-2">
+                              <span className="flex items-center gap-1 text-[11px] text-emerald-600 dark:text-emerald-400">
+                                <Check className="w-3.5 h-3.5" />
+                                Registered
+                              </span>
+                              <button
+                                type="button"
+                                onClick={() => runInTerminal(provider.launchCmd)}
+                                className="inline-flex items-center gap-1.5 px-2.5 py-1 text-[11px] font-medium rounded-md border border-[var(--card-border)] hover:bg-[var(--secondary)] transition-colors"
+                                title={`Launch ${provider.label} to authenticate`}
+                              >
+                                Launch & authenticate
+                              </button>
+                            </div>
                           ) : (
-                            "Set up"
+                            <button
+                              type="button"
+                              onClick={() => handleConfigureMcp(provider.id)}
+                              disabled={isConfiguring}
+                              className="inline-flex items-center gap-1.5 px-3 py-1 text-[12px] font-medium rounded-md border border-[var(--card-border)] hover:bg-[var(--secondary)] transition-colors disabled:opacity-50"
+                            >
+                              {isConfiguring ? (
+                                <>
+                                  <Loader2 className="w-3 h-3 animate-spin" />
+                                  Registering...
+                                </>
+                              ) : (
+                                "Register"
+                              )}
+                            </button>
                           )}
-                        </button>
-                      )}
-                    </div>
-                  );
-                })}
-                {mcpError && (
-                  <p className="text-[12px] text-red-500 dark:text-red-400 mt-1">
-                    {mcpError}
+                        </div>
+                      );
+                    })}
+                    {mcpError && (
+                      <p className="text-[12px] text-red-500 dark:text-red-400 mt-1">
+                        {mcpError}
+                      </p>
+                    )}
+                  </div>
+
+                  <div className="border-t border-[var(--card-border)] px-4 py-2.5">
+                    <a
+                      href={server.docsUrl}
+                      target="_blank"
+                      rel="noopener noreferrer"
+                      className="inline-flex items-center gap-1 text-[12px] text-[var(--muted-foreground)] hover:text-[var(--foreground)] transition-colors"
+                    >
+                      Learn more about {server.name} MCP
+                      <ExternalLink className="w-3 h-3" />
+                    </a>
+                  </div>
+                </div>
+              ))}
+
+              {installedProviders.length === 0 && (
+                <div className="text-center py-4">
+                  <p className="text-[13px] text-[var(--muted-foreground)]">
+                    No CLI providers detected. Go back and install a provider first, or skip this step.
                   </p>
-                )}
-              </div>
-
-              {/* Docs link */}
-              <div className="border-t border-[var(--card-border)] px-4 py-2.5">
-                <a
-                  href={server.docsUrl}
-                  target="_blank"
-                  rel="noopener noreferrer"
-                  className="inline-flex items-center gap-1 text-[12px] text-[var(--muted-foreground)] hover:text-[var(--foreground)] transition-colors"
-                >
-                  Learn more about {server.name} MCP
-                  <ExternalLink className="w-3 h-3" />
-                </a>
-              </div>
-            </div>
-          ))}
+                </div>
+              )}
 
-          {installedProviders.length === 0 && (
-            <div className="text-center py-4">
-              <p className="text-[13px] text-[var(--muted-foreground)]">
-                No CLI providers detected. Go back and install a provider first, or skip this step.
+              <p className="text-[11px] leading-relaxed text-[var(--muted-foreground)]">
+                Registering writes the MCP server into the CLI config. You still need to launch the CLI
+                (right) and complete the interactive OAuth flow (usually <code className="text-[var(--foreground)]">/mcp</code>).
               </p>
-            </div>
+            </>
           )}
         </div>
-      )}
+
+        {/* Right column — embedded terminal */}
+        <div className="flex-1 min-w-0 h-[500px] flex flex-col rounded-xl border border-[var(--card-border)] overflow-hidden bg-[#1e1e1e]">
+          <div className="flex items-center gap-2 px-3 py-2 border-b border-[var(--card-border)] bg-[var(--secondary)] shrink-0">
+            <Terminal className="w-3.5 h-3.5 text-[var(--muted-foreground)]" />
+            <span className="text-[11px] font-semibold uppercase tracking-wide text-[var(--muted-foreground)]">Terminal</span>
+          </div>
+          <div className="flex-1 min-h-0">
+            <TerminalPane ref={termRef} tabId="setup-mcp" />
+          </div>
+        </div>
+      </div>
     </SetupLayout>
   );
 }

package/cloud-runtime/standalone/apps/local/components/setup/ProviderStep.tsx

@@ -1,14 +1,15 @@
 // components/setup/ProviderStep.tsx
 "use client";
 
-import { useState, useCallback } from "react";
+import { useState, useCallback, useRef } from "react";
 import {
-  Check, Circle, Copy, ChevronDown, ExternalLink, Terminal, Loader2,
+  Check, Circle, Copy, ChevronDown, Terminal, Loader2,
 } from "lucide-react";
 import type { CliStatus } from "@/hooks/useProviderStatus";
 import { deriveStatus } from "@/hooks/useProviderStatus";
 import type { ProviderId } from "@/lib/provider-clis";
 import { SetupLayout } from "./SetupLayout";
+import TerminalPane, { type TerminalPaneHandle } from "@/components/terminal/TerminalPane";
 
 function CopyButton({ text }: { text: string }) {
   const [copied, setCopied] = useState(false);
@@ -26,7 +27,11 @@ function CopyButton({ text }: { text: string }) {
   );
 }
 
-function CliRow({ cli, onVerify }: { cli: CliStatus; onVerify?: (id: ProviderId) => void }) {
+function CliRow({ cli, onVerify, onRunInTerminal }: {
+  cli: CliStatus;
+  onVerify?: (id: ProviderId) => void;
+  onRunInTerminal?: (cmd: string) => void;
+}) {
   const status = deriveStatus(cli);
   const [expanded, setExpanded] = useState(status === "needs-auth");
   const [verifying, setVerifying] = useState(false);
@@ -45,77 +50,68 @@ function CliRow({ cli, onVerify }: { cli: CliStatus; onVerify?: (id: ProviderId)
     finally { setVerifying(false); }
   }, [cli.id, onVerify]);
 
+  const runCmd = status === "not-installed" ? cli.installCmd : cli.authCmd?.cmd;
+
   return (
     <div className="border border-[var(--card-border)] rounded-lg overflow-hidden">
       <button
         type="button"
         onClick={() => isExpandable && setExpanded(!expanded)}
-        className={`w-full flex items-center gap-3 px-4 py-3 transition-colors text-left ${isExpandable ? "hover:bg-[var(--item-hover-bg)] cursor-pointer" : "cursor-default"}`}
+        className={`w-full flex items-center gap-2.5 px-3 py-2 transition-colors text-left ${isExpandable ? "hover:bg-[var(--item-hover-bg)] cursor-pointer" : "cursor-default"}`}
       >
         <div className="shrink-0">
           {status === "checking" ? (
-            <Circle className="w-4 h-4 text-[var(--muted-foreground)] animate-pulse" />
+            <Circle className="w-3.5 h-3.5 text-[var(--muted-foreground)] animate-pulse" />
           ) : status === "ready" ? (
-            <div className="w-5 h-5 rounded-full bg-emerald-100 dark:bg-emerald-900/30 flex items-center justify-center">
-              <Check className="w-3 h-3 text-emerald-600 dark:text-emerald-400" />
+            <div className="w-4 h-4 rounded-full bg-emerald-100 dark:bg-emerald-900/30 flex items-center justify-center">
+              <Check className="w-2.5 h-2.5 text-emerald-600 dark:text-emerald-400" />
             </div>
           ) : status === "needs-auth" ? (
-            <div className="w-5 h-5 rounded-full bg-amber-100 dark:bg-amber-900/30 flex items-center justify-center">
-              <Circle className="w-3 h-3 text-amber-600 dark:text-amber-400" />
+            <div className="w-4 h-4 rounded-full bg-amber-100 dark:bg-amber-900/30 flex items-center justify-center">
+              <Circle className="w-2.5 h-2.5 text-amber-600 dark:text-amber-400" />
             </div>
           ) : (
-            <Circle className="w-4 h-4 text-[var(--muted-foreground)]" />
+            <Circle className="w-3.5 h-3.5 text-[var(--muted-foreground)]" />
           )}
         </div>
-        <div className="flex-1 min-w-0">
-          <div className="flex items-center gap-2">
-            <span className="text-[14px] font-semibold text-[var(--foreground)]">{cli.name}</span>
-            {cli.recommended && status === "not-installed" && (
-              <span className="text-[11px] font-medium text-[var(--foreground)] bg-[var(--secondary)] px-1.5 py-0.5 rounded">Recommended</span>
-            )}
-            {status === "ready" && (
-              <span className="text-[11px] font-medium text-emerald-600 dark:text-emerald-400 bg-emerald-50 dark:bg-emerald-900/20 px-1.5 py-0.5 rounded">Ready</span>
-            )}
-            {status === "needs-auth" && (
-              <span className="text-[11px] font-medium text-amber-600 dark:text-amber-400 bg-amber-50 dark:bg-amber-900/20 px-1.5 py-0.5 rounded">Needs auth</span>
-            )}
-          </div>
-          <p className="text-[12px] text-[var(--muted-foreground)]">{cli.description}</p>
-        </div>
+        <span className="flex-1 min-w-0 text-[13px] font-semibold text-[var(--foreground)] truncate">{cli.name}</span>
+        {status === "ready" && (
+          <span className="text-[10px] font-medium text-emerald-600 dark:text-emerald-400">Ready</span>
+        )}
+        {status === "needs-auth" && (
+          <span className="text-[10px] font-medium text-amber-600 dark:text-amber-400">Needs auth</span>
+        )}
+        {status === "not-installed" && cli.recommended && (
+          <span className="text-[10px] font-medium text-[var(--muted-foreground)]">Recommended</span>
+        )}
         {isExpandable && (
-          <ChevronDown className={`w-4 h-4 text-[var(--muted-foreground)] transition-transform ${expanded ? "rotate-180" : ""}`} />
+          <ChevronDown className={`w-3.5 h-3.5 text-[var(--muted-foreground)] transition-transform ${expanded ? "rotate-180" : ""}`} />
         )}
       </button>
 
-      {expanded && status === "not-installed" && (
-        <div className="px-4 pb-3 border-t border-[var(--card-border)]">
-          <div className="mt-3 flex items-center gap-2 bg-[var(--secondary)] rounded-md px-3 py-2 font-mono text-[13px] text-[var(--foreground)]">
-            <Terminal className="w-3.5 h-3.5 text-[var(--muted-foreground)] shrink-0" />
-            <code className="flex-1 overflow-x-auto whitespace-nowrap">{cli.installCmd}</code>
-            <CopyButton text={cli.installCmd} />
-          </div>
-          <a href={cli.docsUrl} target="_blank" rel="noopener noreferrer" className="inline-flex items-center gap-1 mt-2 text-[12px] text-[var(--primary)] hover:underline">
-            Documentation <ExternalLink className="w-3 h-3" />
-          </a>
-          {cli.installNote && <p className="mt-2 text-[12px] text-[var(--muted-foreground)]">{cli.installNote}</p>}
-        </div>
-      )}
-
-      {expanded && status === "needs-auth" && cli.authCmd && (
-        <div className="px-4 pb-3 border-t border-[var(--card-border)]">
-          <p className="mt-3 text-[12px] text-[var(--muted-foreground)]">{cli.authCmd.description}</p>
-          <div className="mt-2 flex items-center gap-2 bg-[var(--secondary)] rounded-md px-3 py-2 font-mono text-[13px] text-[var(--foreground)]">
-            <Terminal className="w-3.5 h-3.5 text-[var(--muted-foreground)] shrink-0" />
-            <code className="flex-1 overflow-x-auto whitespace-nowrap">{cli.authCmd.cmd}</code>
-            <CopyButton text={cli.authCmd.cmd} />
-          </div>
-          <div className="mt-3 flex items-center gap-2">
-            <button type="button" onClick={handleVerify} disabled={verifying} className="inline-flex items-center gap-1.5 px-3 py-1.5 text-[12px] font-medium rounded-md bg-[var(--foreground)] text-[var(--background)] hover:opacity-90 transition-colors disabled:opacity-60">
+      {expanded && isExpandable && runCmd && (
+        <div className="px-3 pb-2.5 pt-1 border-t border-[var(--card-border)] flex items-center gap-1.5">
+          <button
+            type="button"
+            onClick={() => onRunInTerminal?.(runCmd)}
+            className="inline-flex items-center gap-1.5 px-2.5 py-1 text-[11px] font-medium rounded-md bg-[var(--foreground)] text-[var(--background)] hover:opacity-90 transition-colors"
+          >
+            <Terminal className="w-3 h-3" />
+            Run
+          </button>
+          {status === "needs-auth" && (
+            <button
+              type="button"
+              onClick={handleVerify}
+              disabled={verifying}
+              className="inline-flex items-center gap-1 px-2.5 py-1 text-[11px] font-medium rounded-md border border-[var(--card-border)] text-[var(--foreground)] hover:bg-[var(--secondary)] transition-colors disabled:opacity-60"
+            >
               {verifying && <Loader2 className="w-3 h-3 animate-spin" />}
-              {verifying ? "Checking..." : "Verify"}
+              {verifying ? "Checking" : "Verify"}
             </button>
-            {verifyError && <span className="text-[12px] text-amber-600 dark:text-amber-400">{verifyError}</span>}
-          </div>
+          )}
+          <CopyButton text={runCmd} />
+          {verifyError && <span className="text-[10px] text-amber-600 dark:text-amber-400 ml-auto">{verifyError}</span>}
         </div>
       )}
     </div>
@@ -133,13 +129,16 @@ interface ProviderStepProps {
 
 export function ProviderStep({ clis, readyState, authenticatedCount, totalCount, onVerifySuccess, onNext }: ProviderStepProps) {
   const canProceed = readyState === "ready";
-  const recommendedCli = clis.find((c) => c.recommended) ?? clis[0] ?? null;
-  const alternativeClis = clis.filter((c) => !c.recommended);
+  const termRef = useRef<TerminalPaneHandle>(null);
+  const runInTerminal = useCallback((cmd: string) => {
+    termRef.current?.sendCommand(cmd);
+  }, []);
 
   return (
     <SetupLayout
       currentStep={1}
-      totalSteps={4}
+      totalSteps={2}
+      wide
       footer={
         <div className="flex items-center justify-between">
           <span className="text-[13px] text-[var(--muted-foreground)]">
@@ -158,6 +157,7 @@ export function ProviderStep({ clis, readyState, authenticatedCount, totalCount,
         </div>
       }
     >
+      {/* Title — spans both columns */}
       <div className="text-center mb-8">
         <h1 className="text-[24px] font-bold text-[var(--foreground)] tracking-tight">Connect a Provider</h1>
         <p className="mt-2 text-[14px] text-[var(--muted-foreground)] leading-relaxed">
@@ -166,45 +166,42 @@ export function ProviderStep({ clis, readyState, authenticatedCount, totalCount,
         </p>
       </div>
 
-      {readyState === "checking" && (
-        <div className="text-center py-8">
-          <Loader2 className="w-6 h-6 animate-spin text-[var(--muted-foreground)] mx-auto" />
-          <p className="mt-3 text-[13px] text-[var(--muted-foreground)]">Detecting installed providers...</p>
-        </div>
-      )}
-
-      {readyState === "error" && (
-        <div className="text-center py-8">
-          <p className="text-[14px] text-[var(--muted-foreground)]">Could not detect providers. Please reload.</p>
-        </div>
-      )}
-
-      {(readyState === "needs-setup" || readyState === "ready") && (
-        <div className="space-y-4">
-          {!clis.some((c) => c.installed) && recommendedCli && (
-            <div className="rounded-xl border border-[var(--card-border)] bg-[var(--secondary)] p-4 mb-2">
-              <div className="flex items-center gap-2">
-                <span className="text-[11px] font-semibold uppercase tracking-wide text-[var(--muted-foreground)]">Start Here</span>
-                <span className="rounded bg-[var(--background)] px-2 py-0.5 text-[11px] font-medium text-[var(--foreground)]">{recommendedCli.name}</span>
-              </div>
-              <p className="mt-2 text-[13px] text-[var(--foreground)]">Install Claude Code first if you want the shortest path into AGX.</p>
+      <div className="flex gap-6 min-h-0 items-start">
+        {/* Left column — provider list */}
+        <div className="w-[280px] shrink-0">
+          {readyState === "checking" && (
+            <div className="text-center py-8">
+              <Loader2 className="w-6 h-6 animate-spin text-[var(--muted-foreground)] mx-auto" />
+              <p className="mt-3 text-[13px] text-[var(--muted-foreground)]">Detecting installed providers...</p>
             </div>
           )}
 
-          <div className="space-y-2">
-            {recommendedCli && <CliRow cli={recommendedCli} onVerify={onVerifySuccess} />}
-          </div>
+          {readyState === "error" && (
+            <div className="text-center py-8">
+              <p className="text-[14px] text-[var(--muted-foreground)]">Could not detect providers. Please reload.</p>
+            </div>
+          )}
 
-          {alternativeClis.length > 0 && (
-            <div className="mt-4">
-              <h3 className="mb-2 text-[12px] font-semibold uppercase tracking-wide text-[var(--muted-foreground)]">Other Options</h3>
-              <div className="space-y-2">
-                {alternativeClis.map((cli) => <CliRow key={cli.id} cli={cli} onVerify={onVerifySuccess} />)}
-              </div>
+          {(readyState === "needs-setup" || readyState === "ready") && (
+            <div className="space-y-1.5">
+              {clis.map((cli) => (
+                <CliRow key={cli.id} cli={cli} onVerify={onVerifySuccess} onRunInTerminal={runInTerminal} />
+              ))}
             </div>
           )}
         </div>
-      )}
+
+        {/* Right column — terminal (landscape) */}
+        <div className="flex-1 min-w-0 h-[420px] flex flex-col rounded-xl border border-[var(--card-border)] overflow-hidden bg-[#1e1e1e]">
+          <div className="flex items-center gap-2 px-3 py-2 border-b border-[var(--card-border)] bg-[var(--secondary)] shrink-0">
+            <Terminal className="w-3.5 h-3.5 text-[var(--muted-foreground)]" />
+            <span className="text-[11px] font-semibold uppercase tracking-wide text-[var(--muted-foreground)]">Terminal</span>
+          </div>
+          <div className="flex-1 min-h-0">
+            <TerminalPane ref={termRef} tabId="setup-provider" />
+          </div>
+        </div>
+      </div>
     </SetupLayout>
   );
 }