@mndrk/agx 2.0.56 → 2.2.0

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

@@ -0,0 +1,213 @@
+"use client";
+
+import { useEffect, useState, useCallback } from "react";
+import { useRouter } from "next/navigation";
+import { CheckCircle2 } from "lucide-react";
+
+interface EnrichedProcessEntry {
+  workspaceId: string;
+  threadId: string;
+  agentId: string;
+  state: "spawning" | "running" | "done" | "error" | "killed";
+  lastActivity: number;
+  projectSlug: string;
+  threadTitle: string | null;
+  linearIssueId: string | null;
+  linearRunId: string | null;
+}
+
+interface Participant {
+  id: string;
+  name: string;
+}
+
+interface TeamEntry {
+  id: string;
+  name: string;
+  agents: Array<{ agent_id: string }>;
+}
+
+interface RecentlyCompletedCardProps {
+  projectId: string;
+  projectSlug: string;
+  projectThreadIds?: string[];
+}
+
+function formatActivityThread(process: EnrichedProcessEntry): string {
+  if (process.threadTitle?.trim()) return process.threadTitle.trim();
+  if (process.threadId?.trim()) return `Thread ${process.threadId.slice(0, 12)}...`;
+  return "Main thread";
+}
+
+function formatLastActive(lastActivity: number): string {
+  const elapsedMs = Date.now() - lastActivity;
+  const elapsedSeconds = Math.max(0, Math.floor(elapsedMs / 1000));
+  if (elapsedSeconds < 5) return "Just now";
+  if (elapsedSeconds < 60) return `${elapsedSeconds}s ago`;
+  const elapsedMinutes = Math.floor(elapsedSeconds / 60);
+  if (elapsedMinutes < 60) return `${elapsedMinutes}m ago`;
+  const elapsedHours = Math.floor(elapsedMinutes / 60);
+  if (elapsedHours < 24) return `${elapsedHours}h ago`;
+  const elapsedDays = Math.floor(elapsedHours / 24);
+  return `${elapsedDays}d ago`;
+}
+
+export function RecentlyCompletedCard({
+  projectId,
+  projectSlug,
+  projectThreadIds = [],
+}: RecentlyCompletedCardProps) {
+  const router = useRouter();
+  const [completedProcesses, setCompletedProcesses] = useState<EnrichedProcessEntry[]>([]);
+  const [participants, setParticipants] = useState<Participant[]>([]);
+  const [teams, setTeams] = useState<TeamEntry[]>([]);
+
+  const fetchParticipants = useCallback(async () => {
+    try {
+      const res = await fetch("/api/participants");
+      if (!res.ok) return;
+      const data = await res.json();
+      setParticipants(Array.isArray(data) ? data : data.participants ?? []);
+    } catch {
+      // silent
+    }
+  }, []);
+
+  const fetchTeams = useCallback(async () => {
+    try {
+      const res = await fetch(`/api/projects/${projectId}/teams`);
+      if (!res.ok) return;
+      const data = await res.json();
+      setTeams(Array.isArray(data) ? data : []);
+    } catch {
+      // silent
+    }
+  }, [projectId]);
+
+  useEffect(() => {
+    fetchParticipants();
+    fetchTeams();
+  }, [fetchParticipants, fetchTeams]);
+
+  useEffect(() => {
+    let cancelled = false;
+    const normalizedSlug = projectSlug.trim().toLowerCase();
+    const threadIdSet = new Set(
+      projectThreadIds.map((id) => id.trim()).filter(Boolean)
+    );
+
+    const poll = async () => {
+      try {
+        const res = await fetch("/api/processes?enrich=1");
+        if (!res.ok || cancelled) return;
+        const data: EnrichedProcessEntry[] = await res.json();
+        if (cancelled) return;
+        const relevant = data
+          .filter((p) => p.state === "done")
+          .filter((p) => {
+            const slug = p.projectSlug.trim().toLowerCase();
+            if (slug && slug === normalizedSlug) return true;
+            return threadIdSet.has(p.workspaceId) || threadIdSet.has(p.threadId);
+          })
+          .sort((a, b) => b.lastActivity - a.lastActivity)
+          .slice(0, 10);
+        setCompletedProcesses(relevant);
+      } catch {
+        // keep last known state
+      }
+    };
+
+    void poll();
+    const interval = setInterval(poll, 10000);
+    return () => {
+      cancelled = true;
+      clearInterval(interval);
+    };
+  }, [projectSlug, projectThreadIds]);
+
+  const participantMap = new Map(participants.map((p) => [p.id, p.name]));
+  const getAgentName = (agentId: string) =>
+    participantMap.get(agentId) || agentId.slice(0, 8);
+
+  // Build agent → team lookup
+  const agentTeamMap = new Map<string, { id: string; name: string }>();
+  for (const team of teams) {
+    for (const agent of team.agents) {
+      agentTeamMap.set(agent.agent_id, { id: team.id, name: team.name });
+    }
+  }
+
+  if (completedProcesses.length === 0) return null;
+
+  return (
+    <section className="col-span-full overflow-hidden rounded-2xl border border-[var(--card-border)] bg-[var(--card-bg)]">
+      <div className="flex items-center justify-between gap-3 border-b border-[var(--border)] px-4 py-3">
+        <div>
+          <div className="flex items-center gap-2 text-xs uppercase tracking-[0.18em] text-[var(--muted-foreground)]">
+            <CheckCircle2 className="h-3.5 w-3.5" />
+            Recently Completed
+          </div>
+          <p className="mt-1 text-xs text-[var(--muted-foreground)]">
+            Last {completedProcesses.length} completed{" "}
+            {completedProcesses.length === 1 ? "task" : "tasks"}.
+          </p>
+        </div>
+      </div>
+      <div className="overflow-x-auto">
+        <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>
+              <th className="px-4 py-3 font-medium">Last active</th>
+            </tr>
+          </thead>
+          <tbody>
+            {completedProcesses.map((process) => (
+              <tr
+                key={`${process.workspaceId}-${process.threadId}-${process.agentId}`}
+                className="cursor-pointer border-t border-[var(--border)] text-[var(--foreground)] transition-colors hover:bg-[var(--secondary)]"
+                onClick={() =>
+                  router.push(
+                    process.linearIssueId && process.linearRunId
+                      ? `/projects/${projectSlug}/linear?issue=${encodeURIComponent(process.linearIssueId)}&run=${encodeURIComponent(process.linearRunId)}`
+                      : `/projects/${projectSlug}/thread/${encodeURIComponent(process.workspaceId)}${process.threadId ? `?open=${encodeURIComponent(process.threadId)}` : ""}`
+                  )
+                }
+              >
+                <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)]">
+                    <CheckCircle2 className="h-3 w-3" />
+                    Done
+                  </span>
+                </td>
+                <td className="max-w-[24rem] px-4 py-3 text-[var(--muted-foreground)]">
+                  <span className="block truncate">{formatActivityThread(process)}</span>
+                </td>
+                <td className="px-4 py-3 text-[var(--muted-foreground)]">{formatLastActive(process.lastActivity)}</td>
+              </tr>
+            ))}
+          </tbody>
+        </table>
+      </div>
+    </section>
+  );
+}

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

@@ -5,6 +5,7 @@ import { useRouter } from "next/navigation";
 import {
   Activity,
   AlertTriangle,
+  CheckCircle2,
   ChevronRight,
   Loader2,
   Plus,
@@ -79,6 +80,7 @@ export function TeamsView({
   const [teams, setTeams] = useState<Team[]>([]);
   const [participants, setParticipants] = useState<Participant[]>([]);
   const [activeProcesses, setActiveProcesses] = useState<EnrichedProcessEntry[]>([]);
+  const [completedProcesses, setCompletedProcesses] = useState<EnrichedProcessEntry[]>([]);
   const [loading, setLoading] = useState(true);
   const [error, setError] = useState<string | null>(null);
   const fetchTeams = useCallback(async () => {
@@ -123,15 +125,20 @@ export function TeamsView({
         if (!res.ok) return;
         const data: EnrichedProcessEntry[] = await res.json();
         if (cancelled) return;
-        const relevant = data
+        const projectProcesses = data.filter((process) => {
+          const processProjectSlug = process.projectSlug.trim().toLowerCase();
+          if (processProjectSlug && processProjectSlug === normalizedProjectSlug) return true;
+          return projectThreadIdSet.has(process.workspaceId) || projectThreadIdSet.has(process.threadId);
+        });
+        const relevant = projectProcesses
           .filter((process) => process.state === "spawning" || process.state === "running")
-          .filter((process) => {
-            const processProjectSlug = process.projectSlug.trim().toLowerCase();
-            if (processProjectSlug && processProjectSlug === normalizedProjectSlug) return true;
-            return projectThreadIdSet.has(process.workspaceId) || projectThreadIdSet.has(process.threadId);
-          })
           .sort((a, b) => b.lastActivity - a.lastActivity);
         setActiveProcesses(relevant);
+        const done = projectProcesses
+          .filter((process) => process.state === "done")
+          .sort((a, b) => b.lastActivity - a.lastActivity)
+          .slice(0, 10);
+        setCompletedProcesses(done);
       } catch {
         // keep the last known activity state
       }
@@ -184,6 +191,42 @@ export function TeamsView({
       }));
   });
 
+  const completedActivityRows = teams.flatMap((team) => {
+    const teamAgentIds = new Set(team.agents.map((agent) => agent.agent_id));
+    return completedProcesses
+      .filter((process) => teamAgentIds.has(process.agentId))
+      .map((process) => ({
+        key: `done-${team.id}-${process.workspaceId}-${process.threadId}-${process.agentId}`,
+        teamId: team.id,
+        teamName: team.name,
+        workspaceId: process.workspaceId,
+        threadId: process.threadId,
+        agentName: agentName(process.agentId),
+        threadLabel: formatActivityThread(process),
+        lastActiveLabel: formatLastActive(process.lastActivity),
+        linearIssueId: process.linearIssueId,
+        linearRunId: process.linearRunId,
+      }));
+  });
+
+  // Also include completed processes from unassigned agents
+  const unassignedCompletedRows = completedProcesses
+    .filter((process) => unassignedAgentIdSet.has(process.agentId))
+    .map((process) => ({
+      key: `done-unassigned-${process.workspaceId}-${process.threadId}-${process.agentId}`,
+      teamId: null as string | null,
+      teamName: "Unassigned",
+      workspaceId: process.workspaceId,
+      threadId: process.threadId,
+      agentName: agentName(process.agentId),
+      threadLabel: formatActivityThread(process),
+      lastActiveLabel: formatLastActive(process.lastActivity),
+      linearIssueId: process.linearIssueId,
+      linearRunId: process.linearRunId,
+    }));
+
+  const allCompletedRows = [...completedActivityRows, ...unassignedCompletedRows];
+
   // --- Loading ---
   if (loading) {
     return (
@@ -392,6 +435,78 @@ export function TeamsView({
         </section>
       )}
 
+      {allCompletedRows.length > 0 && (
+        <section className="overflow-hidden rounded-2xl border border-[var(--card-border)] bg-[var(--card-bg)]">
+          <div className="flex items-center justify-between gap-3 border-b border-[var(--border)] px-4 py-3">
+            <div>
+              <div className="flex items-center gap-2 text-xs uppercase tracking-[0.18em] text-[var(--muted-foreground)]">
+                <CheckCircle2 className="h-3.5 w-3.5" />
+                Recently Completed
+              </div>
+              <p className="mt-1 text-xs text-[var(--muted-foreground)]">
+                Last {allCompletedRows.length} completed{" "}
+                {allCompletedRows.length === 1 ? "task" : "tasks"} across teams.
+              </p>
+            </div>
+          </div>
+          <div className="overflow-x-auto">
+            <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>
+                  <th className="px-4 py-3 font-medium">Last active</th>
+                </tr>
+              </thead>
+              <tbody>
+                {allCompletedRows.map((row) => (
+                  <tr
+                    key={row.key}
+                    className="cursor-pointer border-t border-[var(--border)] text-[var(--foreground)] transition-colors hover:bg-[var(--secondary)]"
+                    onClick={() =>
+                      router.push(
+                        row.linearIssueId && row.linearRunId
+                          ? `/projects/${projectSlug}/linear?issue=${encodeURIComponent(row.linearIssueId)}&run=${encodeURIComponent(row.linearRunId)}`
+                          : `/projects/${projectSlug}/thread/${encodeURIComponent(row.workspaceId)}${row.threadId ? `?open=${encodeURIComponent(row.threadId)}` : ""}`
+                      )
+                    }
+                  >
+                    <td className="px-4 py-3">
+                      {row.teamId ? (
+                        <button
+                          onClick={(event) => {
+                            event.stopPropagation();
+                            router.push(`/projects/${projectSlug}/teams/${row.teamId}`);
+                          }}
+                          className="text-left font-medium text-[var(--foreground)] transition-colors hover:text-[var(--primary)]"
+                        >
+                          {row.teamName}
+                        </button>
+                      ) : (
+                        <span className="text-[var(--muted-foreground)]">{row.teamName}</span>
+                      )}
+                    </td>
+                    <td className="px-4 py-3 text-[var(--foreground)]">{row.agentName}</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)]">
+                        <CheckCircle2 className="h-3 w-3" />
+                        Done
+                      </span>
+                    </td>
+                    <td className="max-w-[24rem] px-4 py-3 text-[var(--muted-foreground)]">
+                      <span className="block truncate">{row.threadLabel}</span>
+                    </td>
+                    <td className="px-4 py-3 text-[var(--muted-foreground)]">{row.lastActiveLabel}</td>
+                  </tr>
+                ))}
+              </tbody>
+            </table>
+          </div>
+        </section>
+      )}
+
       {/* Unassigned agents */}
       {unassignedAgents.length > 0 && (
         <div className="flex flex-col gap-3 rounded-2xl border border-[var(--status-blocked-border)] bg-[var(--status-blocked-bg)] p-4">

package/cloud-runtime/standalone/apps/local/components/scheduling/ScheduleConditionPicker.tsx

@@ -204,7 +204,7 @@ export function parseScheduleValue(value: string): ScheduleDraft {
   };
 }
 
-function SimpleDropdown<T extends string | number>({
+export function SimpleDropdown<T extends string | number>({
   value,
   options,
   onChange,

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

@@ -0,0 +1,242 @@
+// components/setup/McpSetupStep.tsx
+"use client";
+
+import { useState, useEffect, useCallback } from "react";
+import { Check, Loader2, ExternalLink, Plug } from "lucide-react";
+import { SetupLayout } from "./SetupLayout";
+
+interface McpServer {
+  id: string;
+  name: string;
+  description: string;
+  docsUrl: string;
+}
+
+const MCP_SERVERS: McpServer[] = [
+  {
+    id: "linear",
+    name: "Linear",
+    description: "Read and update tickets so agents can track work in Linear during execution.",
+    docsUrl: "https://linear.app/docs/mcp",
+  },
+];
+
+type McpStatus = Record<string, boolean>;
+type CliStatus = Record<string, boolean>;
+
+interface McpSetupStepProps {
+  onNext: () => void;
+  onBack: () => void;
+}
+
+const CLI_PROVIDERS = [
+  { id: "claude", label: "Claude Code" },
+  { id: "codex", label: "Codex" },
+  { id: "gemini", label: "Gemini CLI" },
+];
+
+export function McpSetupStep({ onNext, 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 refresh = useCallback(async () => {
+    try {
+      const [statusRes, mcpRes] = await Promise.all([
+        fetch("/api/linear/status"),
+        fetch("/api/linear/mcp-setup"),
+      ]);
+      const statusData = await statusRes.json();
+      const mcpData = await mcpRes.json();
+      setClis(statusData.clis ?? {});
+      setMcpConfigured(mcpData.configured ?? {});
+    } catch {
+      // ignore
+    } finally {
+      setLoading(false);
+    }
+  }, []);
+
+  useEffect(() => {
+    refresh();
+  }, [refresh]);
+
+  const handleConfigureMcp = useCallback(async (cli: string) => {
+    setConfiguringCli(cli);
+    setMcpError(null);
+    try {
+      const res = await fetch("/api/linear/mcp-setup", {
+        method: "POST",
+        headers: { "Content-Type": "application/json" },
+        body: JSON.stringify({ cli }),
+      });
+      if (!res.ok) {
+        const data = await res.json().catch(() => ({}));
+        setMcpError(data.error || "Failed to configure MCP");
+      } else {
+        await refresh();
+      }
+    } catch {
+      setMcpError("Failed to configure MCP");
+    } finally {
+      setConfiguringCli(null);
+    }
+  }, [refresh]);
+
+  const installedProviders = CLI_PROVIDERS.filter((p) => clis[p.id]);
+  const hasAnyConfigured = installedProviders.some((p) => mcpConfigured[p.id]);
+
+  return (
+    <SetupLayout
+      currentStep={2}
+      totalSteps={4}
+      footer={
+        <div className="flex items-center justify-between">
+          <button
+            type="button"
+            onClick={onBack}
+            className="text-[14px] text-[var(--muted-foreground)] hover:text-[var(--foreground)] transition-colors"
+          >
+            Back
+          </button>
+          <button
+            type="button"
+            onClick={onNext}
+            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"}
+          </button>
+        </div>
+      }
+    >
+      <div className="text-center mb-8">
+        <h1 className="text-[24px] font-bold text-[var(--foreground)] tracking-tight">
+          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.
+        </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
+                        </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"
+                        >
+                          {isConfiguring ? (
+                            <>
+                              <Loader2 className="w-3 h-3 animate-spin" />
+                              Setting up...
+                            </>
+                          ) : (
+                            "Set up"
+                          )}
+                        </button>
+                      )}
+                    </div>
+                  );
+                })}
+                {mcpError && (
+                  <p className="text-[12px] text-red-500 dark:text-red-400 mt-1">
+                    {mcpError}
+                  </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>
+          ))}
+
+          {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>
+          )}
+        </div>
+      )}
+    </SetupLayout>
+  );
+}

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

@@ -87,8 +87,8 @@ export function ProjectStep({ data, onChange, onNext, onBack }: ProjectStepProps
 
   return (
     <SetupLayout
-      currentStep={2}
-      totalSteps={3}
+      currentStep={3}
+      totalSteps={4}
       footer={
         <div className="flex items-center justify-between">
           <button type="button" onClick={onBack} className="text-[14px] text-[var(--muted-foreground)] hover:text-[var(--foreground)] transition-colors">

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

@@ -139,7 +139,7 @@ export function ProviderStep({ clis, readyState, authenticatedCount, totalCount,
   return (
     <SetupLayout
       currentStep={1}
-      totalSteps={3}
+      totalSteps={4}
       footer={
         <div className="flex items-center justify-between">
           <span className="text-[13px] text-[var(--muted-foreground)]">