@swarmclawai/swarmclaw 1.3.6 → 1.4.2

package/src/app/api/tts/route.test.ts

@@ -0,0 +1,82 @@
+import assert from 'node:assert/strict'
+import test from 'node:test'
+
+import { runWithTempDataDir } from '@/lib/server/test-utils/run-with-temp-data-dir'
+
+test('tts routes reject malformed JSON with a 400', () => {
+  const output = runWithTempDataDir<{
+    ttsStatus: number
+    ttsPayload: { error?: string }
+    streamStatus: number
+    streamPayload: { error?: string }
+  }>(`
+    const ttsRouteMod = await import('./src/app/api/tts/route')
+    const ttsStreamRouteMod = await import('./src/app/api/tts/stream/route')
+    const ttsRoute = ttsRouteMod.default || ttsRouteMod
+    const ttsStreamRoute = ttsStreamRouteMod.default || ttsStreamRouteMod
+
+    const ttsResponse = await ttsRoute.POST(new Request('http://local/api/tts', {
+      method: 'POST',
+      headers: { 'content-type': 'application/json' },
+      body: '{bad-json',
+    }))
+
+    const ttsStreamResponse = await ttsStreamRoute.POST(new Request('http://local/api/tts/stream', {
+      method: 'POST',
+      headers: { 'content-type': 'application/json' },
+      body: '{bad-json',
+    }))
+
+    console.log(JSON.stringify({
+      ttsStatus: ttsResponse.status,
+      ttsPayload: await ttsResponse.json(),
+      streamStatus: ttsStreamResponse.status,
+      streamPayload: await ttsStreamResponse.json(),
+    }))
+  `, { prefix: 'swarmclaw-tts-route-' })
+
+  assert.equal(output.ttsStatus, 400)
+  assert.equal(output.ttsPayload.error, 'Invalid or missing request body')
+  assert.equal(output.streamStatus, 400)
+  assert.equal(output.streamPayload.error, 'Invalid or missing request body')
+})
+
+test('tts routes reject empty text with a validation error', () => {
+  const output = runWithTempDataDir<{
+    ttsStatus: number
+    ttsPayload: { error?: string; issues?: Array<{ path: string; message: string }> }
+    streamStatus: number
+    streamPayload: { error?: string; issues?: Array<{ path: string; message: string }> }
+  }>(`
+    const ttsRouteMod = await import('./src/app/api/tts/route')
+    const ttsStreamRouteMod = await import('./src/app/api/tts/stream/route')
+    const ttsRoute = ttsRouteMod.default || ttsRouteMod
+    const ttsStreamRoute = ttsStreamRouteMod.default || ttsStreamRouteMod
+
+    const ttsResponse = await ttsRoute.POST(new Request('http://local/api/tts', {
+      method: 'POST',
+      headers: { 'content-type': 'application/json' },
+      body: JSON.stringify({ text: '   ' }),
+    }))
+
+    const ttsStreamResponse = await ttsStreamRoute.POST(new Request('http://local/api/tts/stream', {
+      method: 'POST',
+      headers: { 'content-type': 'application/json' },
+      body: JSON.stringify({ text: '   ' }),
+    }))
+
+    console.log(JSON.stringify({
+      ttsStatus: ttsResponse.status,
+      ttsPayload: await ttsResponse.json(),
+      streamStatus: ttsStreamResponse.status,
+      streamPayload: await ttsStreamResponse.json(),
+    }))
+  `, { prefix: 'swarmclaw-tts-route-' })
+
+  assert.equal(output.ttsStatus, 400)
+  assert.equal(output.ttsPayload.error, 'Validation failed')
+  assert.deepEqual(output.ttsPayload.issues, [{ path: 'text', message: 'No text provided' }])
+  assert.equal(output.streamStatus, 400)
+  assert.equal(output.streamPayload.error, 'Validation failed')
+  assert.deepEqual(output.streamPayload.issues, [{ path: 'text', message: 'No text provided' }])
+})

package/src/app/api/tts/route.ts

@@ -1,14 +1,21 @@
 import { NextResponse } from 'next/server'
+import { z } from 'zod'
+
 import { explainElevenLabsError, resolveElevenLabsConfig, synthesizeElevenLabsMp3 } from '@/lib/server/elevenlabs'
+import { safeParseBody } from '@/lib/server/safe-parse-body'
+
+const TtsRequestSchema = z.object({
+  text: z.string().trim().min(1, 'No text provided'),
+  voiceId: z.string().nullable().optional(),
+})
 
 export async function POST(req: Request) {
+  const { data: body, error } = await safeParseBody(req, TtsRequestSchema)
+  if (error) return error
+
   try {
-    const { text, voiceId } = await req.json()
-    if (!String(text || '').trim()) {
-      return new NextResponse('No text provided', { status: 400 })
-    }
-    resolveElevenLabsConfig(voiceId)
-    const audioBuffer = await synthesizeElevenLabsMp3({ text: String(text || ''), voiceId })
+    resolveElevenLabsConfig(body.voiceId)
+    const audioBuffer = await synthesizeElevenLabsMp3({ text: body.text, voiceId: body.voiceId })
     return new NextResponse(new Uint8Array(audioBuffer), {
       headers: {
         'Content-Type': 'audio/mpeg',

package/src/app/api/tts/stream/route.ts

@@ -1,12 +1,19 @@
+import { z } from 'zod'
+
 import { explainElevenLabsError, requestElevenLabsMp3Stream } from '@/lib/server/elevenlabs'
+import { safeParseBody } from '@/lib/server/safe-parse-body'
+
+const TtsStreamRequestSchema = z.object({
+  text: z.string().trim().min(1, 'No text provided'),
+  voiceId: z.string().nullable().optional(),
+})
 
 export async function POST(req: Request) {
+  const { data: body, error } = await safeParseBody(req, TtsStreamRequestSchema)
+  if (error) return error
+
   try {
-    const { text, voiceId } = await req.json()
-    if (!String(text || '').trim()) {
-      return new Response('No text provided', { status: 400 })
-    }
-    const apiRes = await requestElevenLabsMp3Stream({ text: String(text || ''), voiceId })
+    const apiRes = await requestElevenLabsMp3Stream({ text: body.text, voiceId: body.voiceId })
     return new Response(apiRes.body, {
       headers: {
         'Content-Type': 'audio/mpeg',

package/src/app/error.tsx

@@ -0,0 +1,32 @@
+'use client'
+
+import { useEffect } from 'react'
+
+import { ErrorFallback } from '@/components/layout/error-fallback'
+import { reportClientError } from '@/lib/app/report-client-error'
+
+export default function AppError({
+  error,
+  reset,
+}: {
+  error: Error & { digest?: string }
+  reset: () => void
+}) {
+  useEffect(() => {
+    reportClientError({
+      source: 'app-error',
+      error,
+      digest: error.digest,
+    })
+  }, [error])
+
+  return (
+    <ErrorFallback
+      message="A route-level error interrupted the current view. Try the request again or reload the app."
+      primaryLabel="Try Again"
+      onPrimaryAction={() => reset()}
+      secondaryLabel="Reload"
+      onSecondaryAction={() => window.location.reload()}
+    />
+  )
+}

package/src/app/global-error.tsx

@@ -0,0 +1,33 @@
+'use client'
+
+import { useEffect } from 'react'
+
+import './globals.css'
+
+import { ErrorFallback } from '@/components/layout/error-fallback'
+import { reportClientError } from '@/lib/app/report-client-error'
+
+export default function GlobalError({
+  error,
+}: {
+  error: Error & { digest?: string }
+}) {
+  useEffect(() => {
+    reportClientError({
+      source: 'global-error',
+      error,
+      digest: error.digest,
+    })
+  }, [error])
+
+  return (
+    <html lang="en" className="dark">
+      <body className="antialiased">
+        <ErrorFallback
+          message="A fatal application error occurred before the normal shell could recover. Reload the app to continue."
+          onPrimaryAction={() => window.location.reload()}
+        />
+      </body>
+    </html>
+  )
+}

package/src/app/protocols/builder/[templateId]/page.tsx

@@ -0,0 +1,93 @@
+'use client'
+
+import { useEffect } from 'react'
+import { useParams, useRouter } from 'next/navigation'
+import { useProtocolTemplatesQuery } from '@/features/protocols/queries'
+import { useProtocolBuilderStore } from '@/features/protocols/builder/protocol-builder-store'
+import { templateToNodes } from '@/features/protocols/builder/utils/template-to-nodes'
+import { getNodeLayout } from '@/features/protocols/builder/utils/node-position-layout'
+import { ProtocolBuilderCanvas } from '@/components/protocols/builder/protocol-builder-canvas'
+import { useTemplateSync } from '@/features/protocols/builder/hooks/use-template-sync'
+import { useCanvasValidation } from '@/features/protocols/builder/hooks/use-canvas-validation'
+
+export default function ProtocolBuilderPage() {
+  const params = useParams()
+  const router = useRouter()
+  const templateId = params.templateId as string
+
+  const { data: templates, isLoading } = useProtocolTemplatesQuery()
+  const loadTemplate = useProtocolBuilderStore((s) => s.loadTemplate)
+  const reset = useProtocolBuilderStore((s) => s.reset)
+
+  // Auto-sync to server
+  useTemplateSync(2000)
+
+  // Validate on changes
+  useCanvasValidation()
+
+  // Load template on mount
+  useEffect(() => {
+    if (!templates) return
+    const template = templates.find((t) => t.id === templateId)
+    if (!template) return
+
+    const { nodes, edges } = templateToNodes(template)
+    const positioned = getNodeLayout(nodes, edges)
+    loadTemplate(template, positioned, edges)
+  }, [templateId, templates, loadTemplate])
+
+  // Cleanup on unmount
+  useEffect(() => {
+    return () => reset()
+  }, [reset])
+
+  if (isLoading) {
+    return (
+      <div className="flex h-screen items-center justify-center">
+        <div className="text-sm text-muted-foreground">Loading builder...</div>
+      </div>
+    )
+  }
+
+  const template = templates?.find((t) => t.id === templateId)
+  if (!template) {
+    return (
+      <div className="flex h-screen flex-col items-center justify-center gap-3">
+        <div className="text-sm text-muted-foreground">Template not found</div>
+        <button
+          onClick={() => router.push('/protocols')}
+          className="text-sm text-blue-500 hover:underline"
+        >
+          Back to protocols
+        </button>
+      </div>
+    )
+  }
+
+  return (
+    <div className="flex h-full flex-col">
+      {/* Header */}
+      <div className="flex items-center justify-between border-b px-4 py-2">
+        <div className="flex items-center gap-3">
+          <button
+            onClick={() => router.push('/protocols')}
+            className="text-sm text-muted-foreground hover:text-foreground"
+          >
+            &larr; Protocols
+          </button>
+          <span className="text-sm font-semibold">{template.name}</span>
+          {template.builtIn && (
+            <span className="rounded bg-muted px-1.5 py-0.5 text-[10px] font-medium text-muted-foreground">
+              Built-in
+            </span>
+          )}
+        </div>
+      </div>
+
+      {/* Canvas */}
+      <div className="flex-1 p-3">
+        <ProtocolBuilderCanvas />
+      </div>
+    </div>
+  )
+}

package/src/app/protocols/page.tsx

@@ -657,13 +657,22 @@ export default function ProtocolsPage() {
                           : editingTemplateId ? 'Save template' : 'Create template'}
                       </button>
                       {editingTemplateId && (
-                        <button
-                          type="button"
-                          onClick={() => void handleDeleteTemplate(editingTemplateId)}
-                          className="rounded-[10px] border border-red-500/20 bg-red-500/10 px-3 py-2 text-[12px] font-700 text-red-200 transition-all hover:bg-red-500/14 cursor-pointer"
-                        >
-                          {templatePending === `delete:${editingTemplateId}` ? 'Deleting…' : 'Delete template'}
-                        </button>
+                        <>
+                          <button
+                            type="button"
+                            onClick={() => router.push(`/protocols/builder/${editingTemplateId}`)}
+                            className="rounded-[10px] border border-blue-500/20 bg-blue-500/10 px-3 py-2 text-[12px] font-700 text-blue-200 transition-all hover:bg-blue-500/14 cursor-pointer"
+                          >
+                            Visual Builder
+                          </button>
+                          <button
+                            type="button"
+                            onClick={() => void handleDeleteTemplate(editingTemplateId)}
+                            className="rounded-[10px] border border-red-500/20 bg-red-500/10 px-3 py-2 text-[12px] font-700 text-red-200 transition-all hover:bg-red-500/14 cursor-pointer"
+                          >
+                            {templatePending === `delete:${editingTemplateId}` ? 'Deleting…' : 'Delete template'}
+                          </button>
+                        </>
                       )}
                     </div>
                   </div>

package/src/app/swarmfeed/page.tsx

@@ -0,0 +1,7 @@
+'use client'
+
+import { FeedPage } from '@/features/swarmfeed/feed-page'
+
+export default function SwarmFeedPage() {
+  return <FeedPage />
+}

package/src/cli/index.js

@@ -220,6 +220,15 @@ const COMMAND_GROUPS = [
       cmd('suite', 'POST', '/eval/suite', 'Run a full eval suite against an agent', { expectsJsonBody: true }),
     ],
   },
+  {
+    name: 'a2a',
+    description: 'A2A Protocol gateway',
+    commands: [
+      cmd('send', 'POST', '/a2a', 'Send a JSON-RPC request to the A2A endpoint', { expectsJsonBody: true }),
+      cmd('agent-card', 'GET', '/.well-known/agent-card', 'Get agent card for a SwarmClaw agent'),
+      cmd('task-status', 'GET', '/a2a/tasks/:taskId/status', 'Check A2A task status'),
+    ],
+  },
   {
     name: 'external-agents',
     description: 'Manage external agent runtimes',
@@ -289,6 +298,9 @@ const COMMAND_GROUPS = [
     commands: [
       cmd('list', 'GET', '/logs', 'List logs (use --query lines=200, --query level=INFO,ERROR)'),
       cmd('clear', 'DELETE', '/logs', 'Clear logs file'),
+      cmd('report', 'POST', '/logs', 'Write a client/browser error entry to the application log', {
+        expectsJsonBody: true,
+      }),
     ],
   },
   {
@@ -784,6 +796,16 @@ const COMMAND_GROUPS = [
       cmd('delete', 'DELETE', '/goals/:id', 'Delete a goal'),
     ],
   },
+  {
+    name: 'swarmfeed',
+    description: 'SwarmFeed social network',
+    commands: [
+      cmd('feed', 'GET', '/swarmfeed', 'Get SwarmFeed timeline'),
+      cmd('channels', 'GET', '/swarmfeed/channels', 'List SwarmFeed channels'),
+      cmd('posts', 'GET', '/swarmfeed/posts', 'Get recent posts'),
+      cmd('post', 'POST', '/swarmfeed/posts', 'Create a post', { expectsJsonBody: true }),
+    ],
+  },
 ]
 
 const GROUP_MAP = new Map(COMMAND_GROUPS.map((group) => [group.name, group]))

package/src/cli/spec.js

@@ -176,6 +176,14 @@ const COMMAND_GROUPS = {
       heartbeat: { description: 'Record an external agent heartbeat', method: 'POST', path: '/external-agents/:id/heartbeat', params: ['id'] },
     },
   },
+  a2a: {
+    description: 'A2A Protocol gateway',
+    commands: {
+      send: { description: 'Send a JSON-RPC request to the A2A endpoint', method: 'POST', path: '/a2a' },
+      'agent-card': { description: 'Get agent card for a SwarmClaw agent', method: 'GET', path: '/.well-known/agent-card' },
+      'task-status': { description: 'Check A2A task status', method: 'GET', path: '/a2a/tasks/:taskId/status', params: ['taskId'] },
+    },
+  },
   uploads: {
     description: 'Manage uploaded artifacts',
     commands: {
@@ -207,6 +215,7 @@ const COMMAND_GROUPS = {
     commands: {
       list: { description: 'Fetch logs (supports --query lines=200,level=INFO)', method: 'GET', path: '/logs' },
       clear: { description: 'Clear log file', method: 'DELETE', path: '/logs' },
+      report: { description: 'Write a client/browser error entry to the application log', method: 'POST', path: '/logs' },
     },
   },
 

package/src/components/agents/agent-avatar.tsx

@@ -2,13 +2,10 @@
 
 import { useMemo } from 'react'
 import multiavatar from '@multiavatar/multiavatar'
+import DOMPurify from 'isomorphic-dompurify'
 
-/** Strip scripts/event handlers from SVG to prevent XSS */
 function sanitizeSvg(svg: string): string {
-  return svg
-    .replace(/<script[\s\S]*?<\/script>/gi, '')
-    .replace(/\bon\w+\s*=\s*"[^"]*"/gi, '')
-    .replace(/\bon\w+\s*=\s*'[^']*'/gi, '')
+  return DOMPurify.sanitize(svg, { USE_PROFILES: { svg: true, svgFilters: true } })
 }
 
 interface Props {

package/src/components/agents/agent-sheet.tsx

@@ -28,6 +28,7 @@ import { errorMessage } from '@/lib/shared-utils'
 import { getDefaultAgentToolIds } from '@/lib/agent-default-tools'
 import { getEnabledExtensionIds, getEnabledToolIds } from '@/lib/capability-selection'
 import { buildAgentSelectableProviders, resolveAgentSelectableProviderCredentials } from '@/lib/agent-provider-options'
+import { AgentSocialSettings } from '@/features/swarmfeed/agent-social-settings'
 
 const HB_PRESETS = [1800, 3600, 7200, 21600, 43200] as const
 const FALLBACK_ELEVENLABS_VOICE_ID = 'JBFqnCBsd6RMkjVDRZzb'
@@ -1973,6 +1974,15 @@ export function AgentSheet() {
       </SectionCard>
       )}
 
+      {editing && (
+        <SectionCard
+          title="Social Network"
+          description="SwarmFeed integration — let this agent post and engage on the social feed."
+        >
+          <AgentSocialSettings agent={editing} />
+        </SectionCard>
+      )}
+
       {!WORKER_ONLY_PROVIDER_IDS.has(provider) && (
       <AdvancedSettingsSection
         open={showAdvancedSettings}

package/src/components/auth/access-key-gate.tsx

@@ -9,6 +9,11 @@ interface AccessKeyGateProps {
 }
 
 const AUTH_CHECK_TIMEOUT_MS = 8_000
+const NETWORK_LINKS = [
+  { href: 'https://www.swarmdock.ai', label: 'SwarmDock' },
+  { href: 'https://swarmrecall.ai', label: 'SwarmRecall' },
+  { href: 'https://swarmrelay.ai', label: 'SwarmRelay' },
+]
 
 function isExpectedAuthCheckError(err: unknown): boolean {
   return isAbortError(err) || isTimeoutError(err)
@@ -421,6 +426,26 @@ export function AccessKeyGate({ onAuthenticated }: AccessKeyGateProps) {
             </form>
           </>
         )}
+
+        <div className="mt-10 border-t border-white/[0.06] pt-5" style={{ animation: 'fade-up 0.6s var(--ease-spring) 0.35s both' }}>
+          <p className="text-[10px] font-700 uppercase tracking-[0.18em] text-text-3/55">
+            Network
+          </p>
+          <div className="mt-3 flex flex-wrap items-center justify-center gap-2.5">
+            {NETWORK_LINKS.map((link) => (
+              <a
+                key={link.href}
+                href={link.href}
+                target="_blank"
+                rel="noopener noreferrer"
+                className="rounded-full border border-white/[0.08] bg-white/[0.03] px-3 py-1.5 text-[12px] text-text-3
+                  no-underline transition-all duration-200 hover:border-white/[0.14] hover:bg-white/[0.06] hover:text-text"
+              >
+                {link.label}
+              </a>
+            ))}
+          </div>
+        </div>
       </div>
     </div>
   )

package/src/components/layout/error-boundary.tsx

@@ -3,6 +3,9 @@
 import { Component } from 'react'
 import type { ReactNode, ErrorInfo } from 'react'
 
+import { reportClientError } from '@/lib/app/report-client-error'
+import { ErrorFallback } from '@/components/layout/error-fallback'
+
 export class ErrorBoundary extends Component<{ children: ReactNode }, { hasError: boolean }> {
   constructor(props: { children: ReactNode }) {
     super(props)
@@ -15,41 +18,20 @@ export class ErrorBoundary extends Component<{ children: ReactNode }, { hasError
   }
 
   componentDidCatch(error: Error, info: ErrorInfo) {
-    console.error('ErrorBoundary caught:', error, info)
+    reportClientError({
+      source: 'error-boundary',
+      error,
+      componentStack: info.componentStack,
+    })
   }
 
   render() {
     if (this.state.hasError) {
       return (
-        <div className="flex-1 flex flex-col items-center justify-center px-8 bg-bg">
-          <div className="text-center max-w-[400px]">
-            <div className="w-14 h-14 rounded-[16px] bg-red-500/10 border border-red-500/20 flex items-center justify-center mx-auto mb-5">
-              <svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" className="text-red-400">
-                <circle cx="12" cy="12" r="10" />
-                <line x1="12" y1="8" x2="12" y2="12" />
-                <line x1="12" y1="16" x2="12.01" y2="16" />
-              </svg>
-            </div>
-            <h2 className="font-display text-[22px] font-700 text-text mb-2 tracking-[-0.02em]">
-              Something went wrong
-            </h2>
-            <p className="text-[14px] text-text-3 mb-6">
-              An unexpected error occurred. Try reloading the page.
-            </p>
-            <button
-              onClick={() => window.location.reload()}
-              className="inline-flex items-center gap-2 px-6 py-3 rounded-[12px] border-none bg-accent-bright text-white text-[14px] font-600 cursor-pointer
-                hover:brightness-110 active:scale-[0.97] transition-all shadow-[0_4px_16px_rgba(99,102,241,0.2)]"
-              style={{ fontFamily: 'inherit' }}
-            >
-              <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.5" strokeLinecap="round">
-                <polyline points="23 4 23 10 17 10" />
-                <path d="M20.49 15a9 9 0 1 1-2.12-9.36L23 10" />
-              </svg>
-              Reload
-            </button>
-          </div>
-        </div>
+        <ErrorFallback
+          message="An unexpected dashboard error occurred. Reload the page to recover."
+          onPrimaryAction={() => window.location.reload()}
+        />
       )
     }
 

package/src/components/layout/error-fallback.tsx

@@ -0,0 +1,61 @@
+'use client'
+
+type ErrorFallbackProps = {
+  title?: string
+  message?: string
+  primaryLabel?: string
+  onPrimaryAction?: () => void
+  secondaryLabel?: string
+  onSecondaryAction?: () => void
+}
+
+export function ErrorFallback({
+  title = 'Something went wrong',
+  message = 'An unexpected error occurred. Try again or reload the page.',
+  primaryLabel = 'Reload',
+  onPrimaryAction,
+  secondaryLabel,
+  onSecondaryAction,
+}: ErrorFallbackProps) {
+  return (
+    <div className="flex min-h-[50vh] flex-1 flex-col items-center justify-center bg-bg px-8">
+      <div className="max-w-[420px] text-center">
+        <div className="mx-auto mb-5 flex h-14 w-14 items-center justify-center rounded-[16px] border border-red-500/20 bg-red-500/10">
+          <svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" className="text-red-400">
+            <circle cx="12" cy="12" r="10" />
+            <line x1="12" y1="8" x2="12" y2="12" />
+            <line x1="12" y1="16" x2="12.01" y2="16" />
+          </svg>
+        </div>
+        <h2 className="mb-2 font-display text-[22px] font-700 tracking-[-0.02em] text-text">
+          {title}
+        </h2>
+        <p className="mb-6 text-[14px] text-text-3">
+          {message}
+        </p>
+        <div className="flex flex-wrap items-center justify-center gap-3">
+          <button
+            onClick={onPrimaryAction}
+            className="inline-flex cursor-pointer items-center gap-2 rounded-[12px] border-none bg-accent-bright px-6 py-3 text-[14px] font-600 text-white shadow-[0_4px_16px_rgba(99,102,241,0.2)] transition-all hover:brightness-110 active:scale-[0.97]"
+            style={{ fontFamily: 'inherit' }}
+          >
+            <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.5" strokeLinecap="round">
+              <polyline points="23 4 23 10 17 10" />
+              <path d="M20.49 15a9 9 0 1 1-2.12-9.36L23 10" />
+            </svg>
+            {primaryLabel}
+          </button>
+          {secondaryLabel && onSecondaryAction ? (
+            <button
+              onClick={onSecondaryAction}
+              className="inline-flex cursor-pointer items-center rounded-[12px] border border-border bg-transparent px-5 py-3 text-[14px] font-600 text-text transition-colors hover:bg-panel/60"
+              style={{ fontFamily: 'inherit' }}
+            >
+              {secondaryLabel}
+            </button>
+          ) : null}
+        </div>
+      </div>
+    </div>
+  )
+}