@swarmclawai/swarmclaw 1.4.8 → 1.5.0

package/src/components/auth/setup-wizard/step-next.tsx

@@ -1,68 +1,80 @@
 'use client'
 
+import { LaunchActionCard } from '@/components/shared/launch-action-card'
 import type { StepNextProps } from './types'
 import { StepShell } from './shared'
 
 export function StepNext({
-  onAddProvider,
-  onAddAgent,
+  createdAgents,
   onContinueToDashboard,
+  onOpenFirstAgent,
+  onOpenProtocols,
+  onOpenBuilder,
+  onOpenConnectors,
+  onOpenUsage,
 }: StepNextProps) {
+  const firstAgent = createdAgents[0] || null
+
   return (
-    <StepShell>
+    <StepShell wide>
       <h1 className="font-display text-[36px] font-800 leading-[1.05] tracking-[-0.04em] mb-3">
-        What&apos;s Next?
+        Launch Your Workspace
       </h1>
-      <p className="text-[15px] text-text-2 mb-8">
-        Your agents are saved. You can keep building or head to the dashboard.
+      <p className="text-[15px] text-text-2 mb-2">
+        Setup is complete. Start from the path that gets you to an actual result fastest.
+      </p>
+      <p className="text-[13px] text-text-3 mb-7">
+        {firstAgent
+          ? `${firstAgent.name} is ready to use.`
+          : 'You finished setup without starter agents, so the launch options below focus on wiring up the rest of the workspace.'}
       </p>
 
-      <div className="flex flex-col gap-3 max-w-[480px] mx-auto mb-8">
-        <button
-          onClick={onAddProvider}
-          className="w-full px-5 py-4 rounded-[14px] border border-white/[0.08] bg-surface text-left
-            transition-all duration-200 flex items-start gap-4 cursor-pointer
-            hover:border-accent-bright/30 hover:bg-surface-hover"
-        >
-          <div className="w-10 h-10 rounded-[10px] border border-white/[0.06] bg-white/[0.04] flex items-center justify-center shrink-0 mt-0.5">
-            <svg width="18" height="18" viewBox="0 0 18 18" fill="none" className="text-accent-bright">
-              <path d="M9 3V15M3 9H15" stroke="currentColor" strokeWidth="1.8" strokeLinecap="round" />
-            </svg>
-          </div>
-          <div>
-            <div className="text-[15px] font-display font-600 text-text mb-1">Add Another Provider</div>
-            <div className="text-[13px] text-text-3 leading-relaxed">
-              Connect a different LLM provider for more model options.
-            </div>
-          </div>
-        </button>
-
-        <button
-          onClick={onAddAgent}
-          className="w-full px-5 py-4 rounded-[14px] border border-white/[0.08] bg-surface text-left
-            transition-all duration-200 flex items-start gap-4 cursor-pointer
-            hover:border-accent-bright/30 hover:bg-surface-hover"
-        >
-          <div className="w-10 h-10 rounded-[10px] border border-white/[0.06] bg-white/[0.04] flex items-center justify-center shrink-0 mt-0.5">
-            <svg width="18" height="18" viewBox="0 0 18 18" fill="none" className="text-accent-bright">
-              <circle cx="9" cy="6" r="3" stroke="currentColor" strokeWidth="1.5" />
-              <path d="M3 15C3 12.2386 5.68629 10 9 10C12.3137 10 15 12.2386 15 15" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" />
-            </svg>
-          </div>
-          <div>
-            <div className="text-[15px] font-display font-600 text-text mb-1">Add Another Agent</div>
-            <div className="text-[13px] text-text-3 leading-relaxed">
-              Create another agent using your connected providers.
-            </div>
-          </div>
-        </button>
+      <div className="grid gap-3 md:grid-cols-2 xl:grid-cols-3 mb-8">
+        <LaunchActionCard
+          title={firstAgent ? 'Open First Agent Chat' : 'Open Agents'}
+          description={firstAgent
+            ? `Jump straight into ${firstAgent.name} and start working from the workspace you just created.`
+            : 'Open the agents workspace so you can create or tune the first agent manually.'}
+          actionLabel={firstAgent ? 'Open Chat' : 'Open Agents'}
+          onClick={onOpenFirstAgent}
+          tone="primary"
+        />
+        <LaunchActionCard
+          title="Start Structured Session"
+          description="Open bounded collaboration runs for reviews, planning rounds, decision-making, or focused multi-agent work."
+          actionLabel="Open Protocols"
+          onClick={onOpenProtocols}
+        />
+        <LaunchActionCard
+          title="Open Workflow Builder"
+          description="Jump into the visual protocol builder if you want a reusable orchestration graph instead of a one-off run."
+          actionLabel="Open Builder"
+          onClick={onOpenBuilder}
+        />
+        <LaunchActionCard
+          title="Connect a Platform"
+          description="Bridge agents into Discord, Slack, Telegram, WhatsApp, or other runtime connectors."
+          actionLabel="Open Connectors"
+          onClick={onOpenConnectors}
+        />
+        <LaunchActionCard
+          title="Review Usage"
+          description="Inspect cost, provider health, and agent activity so the workspace stays observable from day one."
+          actionLabel="Open Usage"
+          onClick={onOpenUsage}
+        />
+        <LaunchActionCard
+          title="Go to Dashboard"
+          description="Land on the main home view. Fresh workspaces open in guided launch mode before switching to the normal ops dashboard."
+          actionLabel="Open Home"
+          onClick={onContinueToDashboard}
+        />
       </div>
 
       <button
+        type="button"
         onClick={onContinueToDashboard}
-        className="px-10 py-3.5 rounded-[14px] border-none bg-accent-bright text-white text-[15px] font-display font-600
-          cursor-pointer hover:brightness-110 active:scale-[0.97] transition-all duration-200
-          shadow-[0_6px_28px_rgba(99,102,241,0.3)]"
+        className="px-10 py-3.5 rounded-[14px] border-none bg-accent-bright text-white text-[15px] font-display font-600 cursor-pointer hover:brightness-110 active:scale-[0.97] transition-all duration-200 shadow-[0_6px_28px_rgba(99,102,241,0.3)]"
       >
         Continue to Dashboard
       </button>

package/src/components/auth/setup-wizard/step-path.tsx

@@ -0,0 +1,159 @@
+'use client'
+
+import { ONBOARDING_PATHS } from '@/lib/setup-defaults'
+import type { StepPathProps } from './types'
+import { StepShell, SkipLink } from './shared'
+import { formatAgentCount, getStarterKitsForPath } from './utils'
+
+export function StepPath({
+  onboardingPath,
+  starterKitId,
+  intentText,
+  onPathChange,
+  onStarterKitChange,
+  onIntentTextChange,
+  onContinue,
+  onBack,
+  onSkip,
+}: StepPathProps) {
+  const visibleStarterKits = getStarterKitsForPath(onboardingPath)
+
+  return (
+    <StepShell wide>
+      <h1 className="font-display text-[36px] font-800 leading-[1.05] tracking-[-0.04em] mb-3">
+        Choose Your Start
+      </h1>
+      <p className="text-[15px] text-text-2 mb-2">
+        Pick the setup path that matches how much guidance you want.
+      </p>
+      <p className="text-[13px] text-text-3 mb-7">
+        You can still edit providers, prompts, tools, and agent details before finishing setup.
+      </p>
+
+      <div className="grid gap-3 md:grid-cols-3 text-left mb-6">
+        {ONBOARDING_PATHS.map((path) => {
+          const active = path.id === onboardingPath
+          return (
+            <button
+              key={path.id}
+              type="button"
+              onClick={() => onPathChange(path.id)}
+              className={`rounded-[18px] border px-5 py-4 text-left transition-all duration-200 cursor-pointer ${
+                active
+                  ? 'border-accent-bright/35 bg-accent-soft shadow-[0_0_24px_rgba(99,102,241,0.12)]'
+                  : 'border-white/[0.08] bg-surface hover:border-accent-bright/20 hover:bg-white/[0.04]'
+              }`}
+            >
+              <div className="flex items-start justify-between gap-3">
+                <div className="text-[15px] font-display font-700 text-text">{path.title}</div>
+                {path.badge ? (
+                  <span className={`rounded-full px-2 py-1 text-[10px] font-700 uppercase tracking-[0.12em] ${
+                    active ? 'bg-accent-bright text-black' : 'bg-white/[0.05] text-text-3/80'
+                  }`}>
+                    {path.badge}
+                  </span>
+                ) : null}
+              </div>
+              <p className="mt-2 text-[13px] leading-relaxed text-text-2">{path.description}</p>
+              <p className="mt-3 text-[12px] leading-relaxed text-text-3/72">{path.detail}</p>
+            </button>
+          )
+        })}
+      </div>
+
+      {onboardingPath === 'intent' && (
+        <div className="mb-6 rounded-[18px] border border-white/[0.08] bg-surface px-5 py-4 text-left">
+          <label className="block text-[12px] font-700 uppercase tracking-[0.12em] text-text-3/60 mb-2">
+            What Are You Setting Up SwarmClaw To Do?
+          </label>
+          <textarea
+            value={intentText}
+            onChange={(event) => onIntentTextChange(event.target.value)}
+            rows={3}
+            placeholder="e.g. Help me run product research every week, summarize findings, and turn them into follow-up tasks."
+            className="w-full rounded-[14px] border border-white/[0.08] bg-bg px-4 py-3 text-[14px] text-text outline-none transition-all duration-200 resize-none placeholder:text-text-3/45 focus:border-accent-bright/30 focus:shadow-[0_0_30px_rgba(99,102,241,0.1)]"
+          />
+          <p className="mt-2 text-[12px] leading-relaxed text-text-3/72">
+            This is used only to seed the starter prompts. It does not auto-classify your workflow.
+          </p>
+        </div>
+      )}
+
+      <div className="rounded-[20px] border border-white/[0.08] bg-surface p-5 text-left">
+        <div className="flex flex-wrap items-start justify-between gap-3">
+          <div>
+            <div className="text-[11px] font-700 uppercase tracking-[0.12em] text-text-3/55">Starting Shape</div>
+            <div className="mt-1 text-[13px] text-text-3/72">
+              Start from a broad team shape instead of a niche preset. You can still edit every agent before setup finishes.
+            </div>
+          </div>
+          <div className="rounded-full border border-white/[0.08] bg-white/[0.03] px-3 py-1 text-[11px] font-700 uppercase tracking-[0.12em] text-text-3/70">
+            {visibleStarterKits.length} options
+          </div>
+        </div>
+
+        <div className="mt-4 grid gap-3 md:grid-cols-2 xl:grid-cols-3">
+          {visibleStarterKits.map((kit) => {
+            const active = starterKitId === kit.id
+            return (
+              <button
+                key={kit.id}
+                type="button"
+                onClick={() => onStarterKitChange(kit.id)}
+                className={`rounded-[18px] border px-4 py-4 text-left transition-all duration-200 cursor-pointer ${
+                  active
+                    ? 'border-accent-bright/35 bg-accent-soft shadow-[0_0_24px_rgba(99,102,241,0.12)]'
+                    : 'border-white/[0.08] bg-white/[0.02] hover:border-accent-bright/20 hover:bg-white/[0.04]'
+                }`}
+              >
+                <div className="flex items-start justify-between gap-3">
+                  <div className="text-[15px] font-display font-700 text-text">{kit.name}</div>
+                  <span className={`rounded-full px-2 py-1 text-[10px] font-700 uppercase tracking-[0.12em] ${
+                    active ? 'bg-accent-bright text-black' : 'bg-white/[0.05] text-text-3/80'
+                  }`}>
+                    {kit.badge || formatAgentCount(kit.agents.length)}
+                  </span>
+                </div>
+                <p className="mt-2 text-[13px] leading-relaxed text-text-2">{kit.description}</p>
+                <p className="mt-3 text-[12px] leading-relaxed text-text-3/72">{kit.detail}</p>
+                {kit.agents.length > 0 ? (
+                  <div className="mt-4 flex flex-wrap gap-2">
+                    {kit.agents.map((agent) => (
+                      <span
+                        key={agent.id}
+                        className="rounded-full border border-white/[0.08] bg-white/[0.03] px-2.5 py-1 text-[11px] text-text-2"
+                      >
+                        {agent.name}
+                      </span>
+                    ))}
+                  </div>
+                ) : (
+                  <div className="mt-4 rounded-[12px] border border-dashed border-white/[0.06] bg-white/[0.02] px-3 py-2 text-[11px] text-text-3/70">
+                    Finish setup without starter agents.
+                  </div>
+                )}
+              </button>
+            )
+          })}
+        </div>
+      </div>
+
+      <div className="mt-6 flex items-center justify-center gap-3">
+        <button
+          onClick={onBack}
+          className="px-6 py-3.5 rounded-[14px] border border-white/[0.08] bg-transparent text-text-2 text-[14px] font-display font-500 cursor-pointer hover:bg-white/[0.03] transition-all duration-200"
+        >
+          Back
+        </button>
+        <button
+          onClick={onContinue}
+          className="px-8 py-3.5 rounded-[14px] border-none bg-accent-bright text-white text-[15px] font-display font-600 cursor-pointer hover:brightness-110 active:scale-[0.97] transition-all duration-200 shadow-[0_6px_28px_rgba(99,102,241,0.3)]"
+        >
+          Continue to Providers
+        </button>
+      </div>
+
+      <SkipLink onClick={onSkip} />
+    </StepShell>
+  )
+}

package/src/components/auth/setup-wizard/step-progress.tsx

@@ -2,6 +2,7 @@ import { STEP_ORDER } from './types'
 
 const STEP_LABELS: Record<string, string> = {
   profile: 'You',
+  path: 'Start',
   providers: 'Providers',
   agents: 'Agents',
 }

package/src/components/auth/setup-wizard/step-providers.tsx

@@ -12,6 +12,7 @@ export function StepProviders({
   configuredProviderIds,
   error,
   canContinue,
+  onBack,
   onSelectProvider,
   onRemoveProvider,
   onContinue,
@@ -132,6 +133,14 @@ export function StepProviders({
       {error && <p className="mt-4 text-[13px] text-red-400">{error}</p>}
 
       <div className="mt-6 flex items-center justify-center gap-3">
+        <button
+          type="button"
+          onClick={onBack}
+          className="px-6 py-3.5 rounded-[14px] border border-white/[0.08] bg-transparent text-text-2 text-[14px]
+            font-display font-500 cursor-pointer hover:bg-white/[0.03] transition-all duration-200"
+        >
+          Back
+        </button>
         <button
           onClick={onSkip}
           className="px-6 py-3.5 rounded-[14px] border border-white/[0.08] bg-transparent text-text-2 text-[14px]

package/src/components/auth/setup-wizard/types.test.ts

@@ -2,10 +2,10 @@ import assert from 'node:assert/strict'
 import { test } from 'node:test'
 import { STEP_ORDER } from './types'
 
-test('STEP_ORDER is [profile, providers, agents]', () => {
-  assert.deepEqual(STEP_ORDER, ['profile', 'providers', 'agents'])
+test('STEP_ORDER includes the new onboarding path step', () => {
+  assert.deepEqual(STEP_ORDER, ['profile', 'path', 'providers', 'agents'])
 })
 
-test('STEP_ORDER has exactly 3 steps', () => {
-  assert.equal(STEP_ORDER.length, 3)
+test('STEP_ORDER has exactly 4 steps', () => {
+  assert.equal(STEP_ORDER.length, 4)
 })

package/src/components/auth/setup-wizard/types.ts

@@ -1,7 +1,7 @@
 import type { GatewayProfile, ProviderId } from '@/types'
 import type { SetupProvider } from '@/lib/setup-defaults'
 
-export type SetupStep = 'profile' | 'providers' | 'connect' | 'agents' | 'next' | 'done'
+export type SetupStep = 'profile' | 'path' | 'providers' | 'connect' | 'agents' | 'next' | 'done'
 export type CheckState = 'idle' | 'checking' | 'ok' | 'error'
 
 export interface ProviderCheckResponse {
@@ -29,7 +29,7 @@ export interface SetupDoctorResponse {
 }
 
 export interface SetupWizardProps {
-  onComplete: () => void
+  onComplete: (destination?: string) => void
 }
 
 export interface ConfiguredProvider {
@@ -83,7 +83,7 @@ export interface CreatedAgentSummary {
   providerName: string
 }
 
-export const STEP_ORDER: SetupStep[] = ['profile', 'providers', 'agents']
+export const STEP_ORDER: SetupStep[] = ['profile', 'path', 'providers', 'agents']
 
 export const CONNECTOR_ICONS = [
   { name: 'Discord', icon: 'D' },
@@ -114,12 +114,25 @@ export interface StepProvidersProps {
   configuredProviderIds: Set<SetupProvider>
   error: string
   canContinue: boolean
+  onBack: () => void
   onSelectProvider: (provider: SetupProvider) => void
   onRemoveProvider: (id: string) => void
   onContinue: () => void
   onSkip: () => void
 }
 
+export interface StepPathProps {
+  onboardingPath: import('@/lib/setup-defaults').OnboardingPath
+  starterKitId: string | null
+  intentText: string
+  onPathChange: (path: import('@/lib/setup-defaults').OnboardingPath) => void
+  onStarterKitChange: (starterKitId: string) => void
+  onIntentTextChange: (value: string) => void
+  onContinue: () => void
+  onBack: () => void
+  onSkip: () => void
+}
+
 export interface StepConnectProps {
   provider: SetupProvider
   selectedProvider: import('@/lib/setup-defaults').SetupProviderOption
@@ -147,9 +160,13 @@ export interface StepAgentsProps {
 }
 
 export interface StepNextProps {
-  onAddProvider: () => void
-  onAddAgent: () => void
+  createdAgents: CreatedAgentSummary[]
   onContinueToDashboard: () => void
+  onOpenFirstAgent: () => void
+  onOpenProtocols: () => void
+  onOpenBuilder: () => void
+  onOpenConnectors: () => void
+  onOpenUsage: () => void
 }
 
 export interface StepDoneProps {

package/src/components/auth/setup-wizard/utils.test.ts

@@ -2,7 +2,9 @@ import assert from 'node:assert/strict'
 import { test } from 'node:test'
 import {
   stepIndex,
+  defaultKitForPath,
   formatEndpointHost,
+  getStarterKitsForPath,
   isLocalOpenClawEndpoint,
   resolveOpenClawDashboardUrl,
   getOpenClawErrorHint,
@@ -21,16 +23,50 @@ test('stepIndex: profile → 0', () => {
   assert.equal(stepIndex('profile'), 0)
 })
 
-test('stepIndex: providers → 1', () => {
-  assert.equal(stepIndex('providers'), 1)
+test('stepIndex: path → 1', () => {
+  assert.equal(stepIndex('path'), 1)
 })
 
-test('stepIndex: connect maps to providers index (1)', () => {
-  assert.equal(stepIndex('connect'), 1)
+test('stepIndex: providers → 2', () => {
+  assert.equal(stepIndex('providers'), 2)
 })
 
-test('stepIndex: agents → 2', () => {
-  assert.equal(stepIndex('agents'), 2)
+test('stepIndex: connect maps to providers index (2)', () => {
+  assert.equal(stepIndex('connect'), 2)
+})
+
+test('stepIndex: agents → 3', () => {
+  assert.equal(stepIndex('agents'), 3)
+})
+
+// ---------------------------------------------------------------------------
+// onboarding path defaults
+// ---------------------------------------------------------------------------
+
+test('defaultKitForPath returns personal assistant for quick and intent', () => {
+  assert.equal(defaultKitForPath('quick'), 'personal_assistant')
+  assert.equal(defaultKitForPath('intent'), 'personal_assistant')
+})
+
+test('defaultKitForPath returns blank workspace for manual', () => {
+  assert.equal(defaultKitForPath('manual'), 'blank_workspace')
+})
+
+test('getStarterKitsForPath: quick exposes a reduced starter set', () => {
+  const ids = getStarterKitsForPath('quick').map((kit) => kit.id)
+  assert.deepEqual(ids, ['personal_assistant', 'research_copilot', 'builder_studio'])
+})
+
+test('getStarterKitsForPath: intent stays focused on broad starter shapes', () => {
+  const ids = getStarterKitsForPath('intent').map((kit) => kit.id)
+  assert.deepEqual(ids, ['personal_assistant', 'research_copilot', 'builder_studio', 'operator_swarm'])
+})
+
+test('getStarterKitsForPath: manual keeps the full catalog', () => {
+  const ids = new Set(getStarterKitsForPath('manual').map((kit) => kit.id))
+  assert.equal(ids.has('blank_workspace'), true)
+  assert.equal(ids.has('content_studio'), true)
+  assert.equal(ids.has('openclaw_fleet'), true)
 })
 
 // ---------------------------------------------------------------------------
@@ -261,6 +297,37 @@ test('buildStarterDrafts carries custom runtime provider ids alongside custom se
   }
 })
 
+test('buildStarterDrafts injects current intent into starter prompts', () => {
+  const cp = makeConfiguredProvider({
+    setupProvider: 'openai',
+    provider: 'openai',
+    defaultModel: 'gpt-4o',
+  })
+  const drafts = buildStarterDrafts({
+    starterKitId: 'personal_assistant',
+    intentText: 'Help me run weekly product research and turn it into follow-up tasks.',
+    configuredProviders: [cp],
+  })
+
+  assert.match(drafts[0]?.systemPrompt || '', /Current user intent:/)
+  assert.match(drafts[0]?.systemPrompt || '', /weekly product research/i)
+})
+
+test('buildStarterDrafts creates the delegate team starter pair', () => {
+  const cp = makeConfiguredProvider({
+    setupProvider: 'openai',
+    provider: 'openai',
+    defaultModel: 'gpt-4o',
+  })
+  const drafts = buildStarterDrafts({
+    starterKitId: 'operator_swarm',
+    intentText: '',
+    configuredProviders: [cp],
+  })
+
+  assert.deepEqual(drafts.map((draft) => draft.name), ['Operator', 'Maker'])
+})
+
 test('requiresSetupProviderVerification skips custom providers', () => {
   assert.equal(requiresSetupProviderVerification('custom'), false)
   assert.equal(requiresSetupProviderVerification('openclaw'), false)

package/src/components/auth/setup-wizard/utils.ts

@@ -2,6 +2,7 @@ import {
   STARTER_KITS,
   getDefaultModelForProvider,
   type OnboardingPath,
+  type StarterKit,
   type SetupProvider,
   type StarterKitAgentTemplate,
 } from '@/lib/setup-defaults'
@@ -18,6 +19,18 @@ export function defaultKitForPath(path: OnboardingPath): string {
   return 'personal_assistant'
 }
 
+export function getStarterKitsForPath(path: OnboardingPath): StarterKit[] {
+  if (path === 'quick') {
+    const quickIds = new Set(['personal_assistant', 'builder_studio', 'research_copilot'])
+    return STARTER_KITS.filter((kit) => quickIds.has(kit.id))
+  }
+  if (path === 'intent') {
+    const intentIds = new Set(['personal_assistant', 'builder_studio', 'research_copilot', 'operator_swarm'])
+    return STARTER_KITS.filter((kit) => intentIds.has(kit.id))
+  }
+  return STARTER_KITS
+}
+
 export function applyIntentContext(prompt: string, intentText: string): string {
   const trimmed = intentText.trim()
   if (!trimmed) return prompt