@swarmclawai/swarmclaw 1.4.9 → 1.5.0

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

package/src/components/home/home-launchpad.tsx

@@ -0,0 +1,135 @@
+'use client'
+
+import { AgentAvatar } from '@/components/agents/agent-avatar'
+import { LaunchActionCard } from '@/components/shared/launch-action-card'
+import type { Agent } from '@/types'
+
+function SnapshotItem({ label, value, hint }: { label: string; value: string; hint: string }) {
+  return (
+    <div className="rounded-[14px] border border-white/[0.06] bg-white/[0.03] px-4 py-3">
+      <div className="text-[11px] font-700 uppercase tracking-[0.12em] text-text-3/55">{label}</div>
+      <div className="mt-2 text-[24px] font-display font-700 tracking-[-0.03em] text-text">{value}</div>
+      <div className="mt-1 text-[12px] leading-relaxed text-text-3/68">{hint}</div>
+    </div>
+  )
+}
+
+type Props = {
+  firstAgent: Agent | null
+  agentCount: number
+  sessionCount: number
+  taskCount: number
+  scheduleCount: number
+  connectorCount: number
+  todayCost: number
+  onOpenFirstAgent: () => void
+  onOpenProtocols: () => void
+  onOpenBuilder: () => void
+  onOpenConnectors: () => void
+  onOpenUsage: () => void
+}
+
+export function HomeLaunchpad({
+  firstAgent,
+  agentCount,
+  sessionCount,
+  taskCount,
+  scheduleCount,
+  connectorCount,
+  todayCost,
+  onOpenFirstAgent,
+  onOpenProtocols,
+  onOpenBuilder,
+  onOpenConnectors,
+  onOpenUsage,
+}: Props) {
+  return (
+    <div className="max-w-[980px] mx-auto px-6 py-10">
+      <div className="rounded-[24px] border border-white/[0.06] bg-gradient-to-br from-white/[0.05] via-white/[0.02] to-transparent p-6">
+        <div className="inline-flex rounded-full border border-white/[0.08] bg-white/[0.03] px-3 py-1 text-[11px] font-700 uppercase tracking-[0.16em] text-text-3/70">
+          Launchpad
+        </div>
+        <div className="mt-4 flex flex-col gap-4 lg:flex-row lg:items-start lg:justify-between">
+          <div className="max-w-[620px]">
+            <h1 className="font-display text-[34px] font-700 tracking-[-0.03em] text-text">
+              Start with the result you want, not the control plane.
+            </h1>
+            <p className="mt-3 text-[15px] leading-relaxed text-text-3/72">
+              SwarmClaw already has the building blocks. Use this workspace to start a live agent chat, launch a bounded session, wire a connector, or move straight into reusable workflows.
+            </p>
+          </div>
+          <div className="rounded-[18px] border border-white/[0.06] bg-white/[0.03] p-4 min-w-[240px]">
+            <div className="text-[11px] font-700 uppercase tracking-[0.12em] text-text-3/55">Workspace Anchor</div>
+            <div className="mt-3 flex items-center gap-3">
+              {firstAgent ? (
+                <>
+                  <AgentAvatar
+                    seed={firstAgent.avatarSeed}
+                    avatarUrl={firstAgent.avatarUrl}
+                    name={firstAgent.name}
+                    size={44}
+                  />
+                  <div>
+                    <div className="text-[14px] font-display font-700 text-text">{firstAgent.name}</div>
+                    <div className="text-[12px] text-text-3/70">
+                      {firstAgent.model ? firstAgent.model.split('/').pop()?.split(':')[0] : firstAgent.provider}
+                    </div>
+                  </div>
+                </>
+              ) : (
+                <div className="text-[13px] leading-relaxed text-text-3/72">
+                  No agents yet. Start by creating one or use the workflow tools first.
+                </div>
+              )}
+            </div>
+          </div>
+        </div>
+      </div>
+
+      <div className="mt-6 grid gap-3 md:grid-cols-2 xl:grid-cols-3">
+        <LaunchActionCard
+          title={firstAgent ? 'Open First Agent Chat' : 'Open Agents'}
+          description={firstAgent
+            ? `Jump into ${firstAgent.name} and start using the workspace immediately.`
+            : 'Open the agents workspace to create or tune the first specialist agent.'}
+          actionLabel={firstAgent ? 'Open Chat' : 'Open Agents'}
+          onClick={onOpenFirstAgent}
+          tone="primary"
+        />
+        <LaunchActionCard
+          title="Start Structured Session"
+          description="Open bounded collaboration runs for planning, review, decision-making, or focused multi-agent work."
+          actionLabel="Open Protocols"
+          onClick={onOpenProtocols}
+        />
+        <LaunchActionCard
+          title="Open Workflow Builder"
+          description="Move straight into reusable orchestration graphs if you want a durable workflow instead of a one-off run."
+          actionLabel="Open Builder"
+          onClick={onOpenBuilder}
+        />
+        <LaunchActionCard
+          title="Connect a Platform"
+          description="Bridge agents into chat surfaces like Discord, Slack, Telegram, and WhatsApp."
+          actionLabel="Open Connectors"
+          onClick={onOpenConnectors}
+        />
+        <LaunchActionCard
+          title="Review Usage"
+          description="Check cost, provider health, and activity so the workspace stays observable from the start."
+          actionLabel="Open Usage"
+          onClick={onOpenUsage}
+        />
+      </div>
+
+      <div className="mt-8 grid gap-3 md:grid-cols-2 xl:grid-cols-3">
+        <SnapshotItem label="Agents" value={String(agentCount)} hint="Configured specialists available in this workspace." />
+        <SnapshotItem label="Chats" value={String(sessionCount)} hint="Durable conversations already created." />
+        <SnapshotItem label="Tasks" value={String(taskCount)} hint="Queued or archived work items in the board." />
+        <SnapshotItem label="Schedules" value={String(scheduleCount)} hint="Recurring or delayed automations ready to run." />
+        <SnapshotItem label="Connectors" value={String(connectorCount)} hint="Platform bridges currently configured." />
+        <SnapshotItem label="Today's Cost" value={`$${todayCost.toFixed(2)}`} hint="Estimated usage cost for today across providers." />
+      </div>
+    </div>
+  )
+}

package/src/components/protocols/builder/template-gallery.tsx

@@ -1,31 +1,38 @@
 import { useProtocolTemplatesQuery } from '@/features/protocols/queries'
 import { useRouter } from 'next/navigation'
-import { cn } from '@/lib/utils'
 import type { ProtocolTemplate } from '@/types'
 
-export function TemplateGallery() {
-  const { data: templates } = useProtocolTemplatesQuery()
+type Props = {
+  templates?: ProtocolTemplate[]
+}
+
+export function TemplateGallery({ templates: providedTemplates }: Props) {
+  const { data: queriedTemplates } = useProtocolTemplatesQuery({ enabled: !providedTemplates })
   const router = useRouter()
+  const templates = providedTemplates ?? queriedTemplates ?? []
 
-  const builtInTemplates = templates?.filter((t) => t.builtIn) || []
-  const customTemplates = templates?.filter((t) => !t.builtIn) || []
+  const builtInTemplates = templates.filter((t) => t.builtIn)
+  const customTemplates = templates.filter((t) => !t.builtIn)
 
   const renderCard = (template: ProtocolTemplate) => (
     <button
       key={template.id}
       onClick={() => router.push(`/protocols/builder/${template.id}`)}
-      className={cn(
-        'rounded-lg border bg-card p-4 text-left transition-shadow hover:shadow-md',
-      )}
+      className="rounded-[16px] border border-white/[0.06] bg-white/[0.03] p-4 text-left transition-all hover:border-accent-bright/20 hover:bg-white/[0.05] cursor-pointer"
     >
-      <div className="text-sm font-semibold">{template.name}</div>
-      <div className="mt-1 text-xs text-muted-foreground line-clamp-2">
+      <div className="flex items-start justify-between gap-3">
+        <div className="text-[14px] font-display font-700 text-text">{template.name}</div>
+        <span className="rounded-full border border-white/[0.08] bg-white/[0.04] px-2 py-1 text-[10px] font-700 uppercase tracking-[0.12em] text-text-3/70">
+          {template.builtIn ? 'Built-in' : 'Custom'}
+        </span>
+      </div>
+      <div className="mt-2 text-[12px] leading-relaxed text-text-3/72 line-clamp-3">
         {template.description}
       </div>
       {template.tags && template.tags.length > 0 && (
-        <div className="mt-2 flex gap-1">
+        <div className="mt-3 flex flex-wrap gap-1.5">
           {template.tags.slice(0, 2).map((tag) => (
-            <span key={tag} className="rounded bg-muted px-1.5 py-0.5 text-[10px]">
+            <span key={tag} className="rounded-full border border-white/[0.08] bg-white/[0.03] px-2 py-1 text-[10px] text-text-2">
               {tag}
             </span>
           ))}
@@ -38,14 +45,14 @@ export function TemplateGallery() {
     <div className="space-y-4">
       {builtInTemplates.length > 0 && (
         <div>
-          <h4 className="mb-2 text-xs font-semibold uppercase text-muted-foreground">Built-in</h4>
-          <div className="grid grid-cols-2 gap-3">{builtInTemplates.map(renderCard)}</div>
+          <h4 className="mb-2 text-[11px] font-700 uppercase tracking-[0.12em] text-text-3/55">Built-in</h4>
+          <div className="grid gap-3 md:grid-cols-2">{builtInTemplates.map(renderCard)}</div>
         </div>
       )}
       {customTemplates.length > 0 && (
         <div>
-          <h4 className="mb-2 text-xs font-semibold uppercase text-muted-foreground">Custom</h4>
-          <div className="grid grid-cols-2 gap-3">{customTemplates.map(renderCard)}</div>
+          <h4 className="mb-2 text-[11px] font-700 uppercase tracking-[0.12em] text-text-3/55">Custom</h4>
+          <div className="grid gap-3 md:grid-cols-2">{customTemplates.map(renderCard)}</div>
         </div>
       )}
     </div>

package/src/components/shared/launch-action-card.tsx

@@ -0,0 +1,27 @@
+type LaunchActionCardProps = {
+  title: string
+  description: string
+  actionLabel: string
+  onClick: () => void
+  tone?: 'primary' | 'default'
+}
+
+export function LaunchActionCard({ title, description, actionLabel, onClick, tone = 'default' }: LaunchActionCardProps) {
+  return (
+    <div className="rounded-[18px] border border-white/[0.06] bg-white/[0.03] p-4">
+      <div className="text-[15px] font-display font-700 text-text">{title}</div>
+      <p className="mt-2 text-[13px] leading-relaxed text-text-3/72">{description}</p>
+      <button
+        type="button"
+        onClick={onClick}
+        className={`mt-4 rounded-[12px] px-4 py-2.5 text-[13px] font-display font-700 transition-all cursor-pointer ${
+          tone === 'primary'
+            ? 'bg-accent-bright text-black hover:opacity-90'
+            : 'border border-white/[0.08] bg-white/[0.04] text-text-2 hover:bg-white/[0.08]'
+        }`}
+      >
+        {actionLabel}
+      </button>
+    </div>
+  )
+}