@swarmclawai/swarmclaw 0.7.5 → 0.7.7

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

@@ -2,6 +2,7 @@
 
 import { useMemo, useState } from 'react'
 import { api } from '@/lib/api-client'
+import { OpenClawDeployPanel } from '@/components/openclaw/openclaw-deploy-panel'
 import { useAppStore } from '@/stores/use-app-store'
 import type { ProviderType, Credential, GatewayProfile } from '@/types'
 import {
@@ -53,6 +54,9 @@ interface ConfiguredProvider {
   endpoint: string | null
   defaultModel: string
   gatewayProfileId: string | null
+  notes?: string | null
+  tags?: string[]
+  deployment?: GatewayProfile['deployment'] | null
 }
 
 interface StarterDraftAgent {
@@ -87,6 +91,20 @@ const CONNECTOR_ICONS = [
   { name: 'Telegram', icon: 'T' },
   { name: 'WhatsApp', icon: 'W' },
 ]
+const OPENCLAW_USE_CASE_LABELS: Record<NonNullable<NonNullable<GatewayProfile['deployment']>['useCase']>, string> = {
+  'local-dev': 'Local Dev',
+  'single-vps': 'Single VPS',
+  'private-tailnet': 'Private Tailnet',
+  'browser-heavy': 'Browser Heavy',
+  'team-control': 'Team Control',
+}
+const OPENCLAW_EXPOSURE_LABELS: Record<NonNullable<NonNullable<GatewayProfile['deployment']>['exposure']>, string> = {
+  'private-lan': 'Private LAN',
+  tailscale: 'Tailscale',
+  caddy: 'Caddy',
+  nginx: 'Nginx',
+  'ssh-tunnel': 'SSH Tunnel',
+}
 
 function stepIndex(step: SetupStep): number {
   if (step === 'connect') return STEP_ORDER.indexOf('providers')
@@ -142,12 +160,6 @@ function isLocalOpenClawEndpoint(value: string | null | undefined): boolean {
   return host === 'localhost' || host === '127.0.0.1' || host === '::1' || host === '0.0.0.0'
 }
 
-function resolveOpenClawPort(value: string | null | undefined): number {
-  const parsed = parseProviderUrl(value)
-  const port = parsed ? Number(parsed.port) : NaN
-  return Number.isFinite(port) && port > 0 ? port : 18789
-}
-
 function resolveOpenClawDashboardUrl(value: string | null | undefined): string {
   const parsed = parseProviderUrl(value)
   if (!parsed) return 'http://localhost:18789'
@@ -229,6 +241,12 @@ function ConfiguredProviderChips({ providers }: { providers: ConfiguredProvider[
             {cp.provider === 'openclaw' && formatEndpointHost(cp.endpoint)
               ? `· ${formatEndpointHost(cp.endpoint)}`
               : ''}
+            {cp.provider === 'openclaw' && cp.deployment?.useCase
+              ? ` · ${OPENCLAW_USE_CASE_LABELS[cp.deployment.useCase]}`
+              : ''}
+            {cp.provider === 'openclaw' && cp.deployment?.exposure
+              ? ` · ${OPENCLAW_EXPOSURE_LABELS[cp.deployment.exposure]}`
+              : ''}
             {cp.defaultModel ? ` · ${cp.defaultModel}` : ''}
           </span>
         </span>
@@ -337,12 +355,14 @@ export function SetupWizard({ onComplete }: SetupWizardProps) {
   const [endpoint, setEndpoint] = useState('')
   const [apiKey, setApiKey] = useState('')
   const [credentialId, setCredentialId] = useState<string | null>(null)
+  const [providerNotes, setProviderNotes] = useState('')
+  const [providerTags, setProviderTags] = useState<string[]>([])
+  const [providerDeployment, setProviderDeployment] = useState<GatewayProfile['deployment'] | null>(null)
   const [checkState, setCheckState] = useState<CheckState>('idle')
   const [checkMessage, setCheckMessage] = useState('')
   const [checkErrorCode, setCheckErrorCode] = useState<string | null>(null)
   const [openclawDeviceId, setOpenclawDeviceId] = useState<string | null>(null)
   const [providerSuggestedModel, setProviderSuggestedModel] = useState('')
-  const [commandCopyState, setCommandCopyState] = useState<'idle' | 'copied' | 'failed'>('idle')
 
   const [doctorState, setDoctorState] = useState<'idle' | 'checking' | 'done' | 'error'>('idle')
   const [doctorError, setDoctorError] = useState('')
@@ -381,9 +401,6 @@ export function SetupWizard({ onComplete }: SetupWizardProps) {
     ? resolveOpenClawDashboardUrl(openClawEndpointValue)
     : null
   const openClawLocal = provider === 'openclaw' ? isLocalOpenClawEndpoint(openClawEndpointValue) : false
-  const openClawPort = provider === 'openclaw' ? resolveOpenClawPort(openClawEndpointValue) : 18789
-  const openClawLocalCommand = `npx openclaw gateway run --bind loopback --port ${openClawPort} --verbose`
-  const openClawLocalCommandPnpm = `pnpm openclaw gateway run --bind loopback --port ${openClawPort} --verbose`
 
   const resetProviderForm = () => {
     setProvider(null)
@@ -391,12 +408,14 @@ export function SetupWizard({ onComplete }: SetupWizardProps) {
     setEndpoint('')
     setApiKey('')
     setCredentialId(null)
+    setProviderNotes('')
+    setProviderTags([])
+    setProviderDeployment(null)
     setCheckState('idle')
     setCheckMessage('')
     setCheckErrorCode(null)
     setOpenclawDeviceId(null)
     setProviderSuggestedModel('')
-    setCommandCopyState('idle')
     setError('')
   }
 
@@ -442,16 +461,57 @@ export function SetupWizard({ onComplete }: SetupWizardProps) {
     setEndpoint(meta?.defaultEndpoint || '')
     setApiKey('')
     setCredentialId(null)
+    setProviderNotes('')
+    setProviderTags([])
+    setProviderDeployment(null)
     setCheckState('idle')
     setCheckMessage('')
     setCheckErrorCode(null)
     setOpenclawDeviceId(null)
     setProviderSuggestedModel(getDefaultModelForProvider(nextProvider))
-    setCommandCopyState('idle')
     setError('')
     setStep('connect')
   }
 
+  const applyOpenClawDeployPatch = (patch: {
+    endpoint?: string
+    token?: string
+    name?: string
+    notes?: string
+    deployment?: GatewayProfile['deployment'] | Record<string, unknown> | null
+  }) => {
+    if (patch.endpoint) {
+      setEndpoint(patch.endpoint)
+    }
+    if (patch.token) {
+      setApiKey(patch.token)
+      setCredentialId(null)
+    }
+    if (patch.name && (!providerLabel.trim() || providerLabel.trim() === (selectedProvider?.name || ''))) {
+      setProviderLabel(patch.name)
+    }
+    if (patch.notes) {
+      setProviderNotes(patch.notes)
+    }
+    if (patch.deployment) {
+      const nextDeployment = patch.deployment as GatewayProfile['deployment']
+      setProviderDeployment((current) => ({
+        ...(current || {}),
+        ...(nextDeployment || {}),
+      }))
+      setProviderTags((current) => Array.from(new Set([
+        ...current,
+        'onboarding',
+        ...(nextDeployment?.useCase ? [nextDeployment.useCase] : []),
+        ...(nextDeployment?.exposure ? [nextDeployment.exposure] : []),
+      ])))
+    }
+    setCheckState('idle')
+    setCheckMessage('')
+    setCheckErrorCode(null)
+    setError('')
+  }
+
   const runConnectionCheck = async (): Promise<boolean> => {
     if (!provider || !selectedProvider) return false
     if (requiresKey && !apiKey.trim()) {
@@ -542,6 +602,9 @@ export function SetupWizard({ onComplete }: SetupWizardProps) {
         endpoint: supportsEndpoint ? (endpoint.trim() || selectedProvider.defaultEndpoint || null) : null,
         defaultModel: providerSuggestedModel || getDefaultModelForProvider(provider),
         gatewayProfileId: null,
+        notes: providerNotes.trim() || null,
+        tags: providerTags,
+        deployment: providerDeployment,
       }
 
       const nextConfigured = [...configuredProviders, configuredProvider]
@@ -603,17 +666,6 @@ export function SetupWizard({ onComplete }: SetupWizardProps) {
     }))
   }
 
-  const copyOpenClawLocalCommand = async () => {
-    try {
-      await navigator.clipboard.writeText(openClawLocalCommand)
-      setCommandCopyState('copied')
-      window.setTimeout(() => setCommandCopyState('idle'), 1200)
-    } catch {
-      setCommandCopyState('failed')
-      window.setTimeout(() => setCommandCopyState('idle'), 1800)
-    }
-  }
-
   const createAgentsAndFinish = async () => {
     const enabledDrafts = draftAgents.filter((draft) => draft.enabled)
     if (enabledDrafts.some((draft) => !draft.provider)) {
@@ -646,8 +698,13 @@ export function SetupWizard({ onComplete }: SetupWizardProps) {
             name: configuredProvider.name,
             endpoint: normalizedEndpoint,
             credentialId: configuredProvider.credentialId || null,
-            tags: ['onboarding'],
-            notes: `Created during setup for ${configuredProvider.name}.`,
+            tags: Array.from(new Set([
+              'onboarding',
+              ...(configuredProvider.tags || []),
+            ])),
+            notes: configuredProvider.notes || `Created during setup for ${configuredProvider.name}.`,
+            deployment: configuredProvider.deployment || null,
+            status: configuredProvider.deployment?.lastVerifiedOk ? 'healthy' : 'pending',
             isDefault: shouldCreateDefault,
           })
           gatewayProfileIdsByProviderConfig.set(configuredProvider.id, createdGateway.id)
@@ -1063,6 +1120,16 @@ export function SetupWizard({ onComplete }: SetupWizardProps) {
 
               {provider === 'openclaw' && (
                 <div className="rounded-[14px] border border-white/[0.08] bg-surface p-4 space-y-4">
+                  <OpenClawDeployPanel
+                    compact
+                    endpoint={openClawEndpointValue}
+                    token={apiKey}
+                    suggestedName={providerLabel || selectedProvider.name}
+                    title="Smart Deploy OpenClaw"
+                    description="Launch the bundled official OpenClaw gateway locally, or generate an official-image VPS bundle for major providers without relying on third-party deployment services."
+                    onApply={applyOpenClawDeployPatch}
+                  />
+
                   <div className="grid gap-3 md:grid-cols-2">
                     <div className="rounded-[12px] border border-white/[0.06] bg-bg px-4 py-3">
                       <div className="text-[12px] uppercase tracking-[0.08em] text-text-3 mb-2">Remote gateway</div>
@@ -1075,39 +1142,20 @@ export function SetupWizard({ onComplete }: SetupWizardProps) {
                       <p className="mt-2 text-[12px] text-text-3 leading-relaxed">
                         If you only have a WebSocket gateway URL, you can still paste it here. SwarmClaw will normalize it for agent chat.
                       </p>
+                      <p className="mt-2 text-[12px] text-text-3 leading-relaxed">
+                        Safer remote defaults: use <code className="text-text-2">private-tailnet</code> with <code className="text-text-2">tailscale</code> or <code className="text-text-2">ssh-tunnel</code> unless you intentionally want public HTTPS ingress.
+                      </p>
                     </div>
                     <div className="rounded-[12px] border border-white/[0.06] bg-bg px-4 py-3">
-                      <div className="text-[12px] uppercase tracking-[0.08em] text-text-3 mb-2">Run locally</div>
+                      <div className="text-[12px] uppercase tracking-[0.08em] text-text-3 mb-2">Safe defaults</div>
                       <p className="text-[13px] text-text-2 leading-relaxed">
-                        Use this when SwarmClaw and OpenClaw are on the same host. <code className="text-text-2">localhost</code> always refers to the SwarmClaw host.
+                        Smart Deploy generates a gateway token for you, defaults to the standard OpenClaw ports, and prefills this setup form automatically.
                       </p>
-                      <div className="mt-3 rounded-[10px] border border-white/[0.06] bg-surface px-3 py-2">
-                        <code className="block overflow-x-auto whitespace-nowrap text-[12px] text-text-2">
-                          {openClawLocalCommand}
-                        </code>
-                      </div>
-                      <div className="mt-2 flex items-center gap-2">
-                        <button
-                          type="button"
-                          onClick={copyOpenClawLocalCommand}
-                          className="px-3 py-2 rounded-[10px] border border-white/[0.08] bg-white/[0.03] text-[12px] text-text cursor-pointer hover:bg-white/[0.06] transition-all duration-200"
-                        >
-                          {commandCopyState === 'copied'
-                            ? 'Copied'
-                            : commandCopyState === 'failed'
-                              ? 'Copy failed'
-                              : 'Copy command'}
-                        </button>
-                        <button
-                          type="button"
-                          onClick={() => { setEndpoint(selectedProvider.defaultEndpoint || 'http://localhost:18789/v1'); setCheckState('idle'); setCheckMessage(''); setCheckErrorCode(null) }}
-                          className="px-3 py-2 rounded-[10px] border border-white/[0.08] bg-white/[0.03] text-[12px] text-text cursor-pointer hover:bg-white/[0.06] transition-all duration-200"
-                        >
-                          Use local default
-                        </button>
-                      </div>
-                      <p className="mt-2 text-[11px] text-text-3">
-                        In a source checkout, use <code className="text-text-2">{openClawLocalCommandPnpm}</code>.
+                      <p className="mt-2 text-[12px] text-text-3 leading-relaxed">
+                        Local quickstart uses the bundled official OpenClaw CLI. Remote quickstart uses the official OpenClaw Docker image or the official repo for managed hosts.
+                      </p>
+                      <p className="mt-2 text-[12px] text-text-3 leading-relaxed">
+                        Choose <code className="text-text-2">local-dev</code> for one-machine setup, <code className="text-text-2">single-vps</code> for most hosted installs, or <code className="text-text-2">private-tailnet</code> when the gateway should stay private.
                       </p>
                     </div>
                   </div>
@@ -1120,6 +1168,9 @@ export function SetupWizard({ onComplete }: SetupWizardProps) {
                     <p className="mt-2 text-[12px] text-text-3 leading-relaxed">
                       Current target: <span className="text-text-2">{openClawEndpointHost || 'localhost:18789'}</span>{openClawLocal ? ' · local route' : ' · remote route'}
                     </p>
+                    <p className="mt-2 text-[12px] text-text-3 leading-relaxed">
+                      Use <code className="text-text-2">caddy</code> or <code className="text-text-2">nginx</code> only when you intentionally want HTTPS/public ingress managed on the gateway side.
+                    </p>
                   </div>
                 </div>
               )}
@@ -1330,6 +1381,12 @@ export function SetupWizard({ onComplete }: SetupWizardProps) {
                               {configuredProvider.provider === 'openclaw' && formatEndpointHost(configuredProvider.endpoint)
                                 ? ` · ${formatEndpointHost(configuredProvider.endpoint)}`
                                 : ''}
+                              {configuredProvider.provider === 'openclaw' && configuredProvider.deployment?.useCase
+                                ? ` · ${OPENCLAW_USE_CASE_LABELS[configuredProvider.deployment.useCase]}`
+                                : ''}
+                              {configuredProvider.provider === 'openclaw' && configuredProvider.deployment?.exposure
+                                ? ` · ${OPENCLAW_EXPOSURE_LABELS[configuredProvider.deployment.exposure]}`
+                                : ''}
                               {configuredProvider.defaultModel ? ` · ${configuredProvider.defaultModel}` : ''}
                             </option>
                           ))}

package/src/components/gateways/gateway-sheet.tsx

@@ -1,11 +1,19 @@
 'use client'
 
-import { useEffect, useState } from 'react'
+import { useEffect, useRef, useState } from 'react'
 import { BottomSheet } from '@/components/shared/bottom-sheet'
+import { OpenClawDeployPanel } from '@/components/openclaw/openclaw-deploy-panel'
 import { useAppStore } from '@/stores/use-app-store'
 import { api } from '@/lib/api-client'
 import { toast } from 'sonner'
-import type { OpenClawDevicePairRequest, OpenClawNode, OpenClawNodePairRequest, OpenClawPairedDevice } from '@/types'
+import type {
+  Credential,
+  OpenClawDevicePairRequest,
+  OpenClawNode,
+  OpenClawNodePairRequest,
+  OpenClawPairedDevice,
+  GatewayProfile,
+} from '@/types'
 
 interface DiscoveryResult {
   host: string
@@ -30,6 +38,17 @@ interface PairingListResult<T> {
   paired?: OpenClawPairedDevice[]
 }
 
+interface GatewayImportShape {
+  name?: string
+  endpoint?: string
+  credentialId?: string | null
+  token?: string | null
+  notes?: string | null
+  tags?: string[]
+  isDefault?: boolean
+  deployment?: GatewayProfile['deployment']
+}
+
 export function GatewaySheet() {
   const open = useAppStore((s) => s.gatewaySheetOpen)
   const setOpen = useAppStore((s) => s.setGatewaySheetOpen)
@@ -46,6 +65,7 @@ export function GatewaySheet() {
   const [name, setName] = useState('')
   const [endpoint, setEndpoint] = useState('http://localhost:18789')
   const [credentialId, setCredentialId] = useState<string | null>(null)
+  const [tokenDraft, setTokenDraft] = useState('')
   const [notes, setNotes] = useState('')
   const [tags, setTags] = useState('')
   const [isDefault, setIsDefault] = useState(false)
@@ -65,6 +85,8 @@ export function GatewaySheet() {
   const [invokeParamsText, setInvokeParamsText] = useState('{}')
   const [invokeResult, setInvokeResult] = useState('')
   const [invoking, setInvoking] = useState(false)
+  const [deployment, setDeployment] = useState<GatewayProfile['deployment'] | null>(null)
+  const importFileRef = useRef<HTMLInputElement>(null)
 
   useEffect(() => {
     if (!open) return
@@ -81,17 +103,21 @@ export function GatewaySheet() {
       setName(editing.name)
       setEndpoint(editing.endpoint)
       setCredentialId(editing.credentialId || null)
+      setTokenDraft('')
       setNotes(editing.notes || '')
       setTags((editing.tags || []).join(', '))
       setIsDefault(editing.isDefault === true)
+      setDeployment(editing.deployment || null)
       return
     }
     setName('')
     setEndpoint('http://localhost:18789')
     setCredentialId(null)
+    setTokenDraft('')
     setNotes('')
     setTags('')
     setIsDefault(gatewayProfiles.length === 0)
+    setDeployment(null)
     setNodes([])
     setNodePairings([])
     setDevicePairings([])
@@ -133,10 +159,18 @@ export function GatewaySheet() {
       setNodePairings(nextNodePairings)
       setDevicePairings(nextDevicePairings)
       setPairedDevices(nextPairedDevices)
+      const nextStats: NonNullable<GatewayProfile['stats']> = {
+        nodeCount: nextNodes.length,
+        connectedNodeCount: nextNodes.filter((node) => node.connected).length,
+        pendingNodePairings: nextNodePairings.length,
+        pairedDeviceCount: nextPairedDevices.length,
+        pendingDevicePairings: nextDevicePairings.length,
+      }
       if (nextNodes[0]) {
         setInvokeNodeId((current) => current || nextNodes[0].nodeId)
         setInvokeCommand((current) => current || nextNodes[0].commands?.[0] || '')
       }
+      void api('PUT', `/gateways/${profileId}`, { stats: nextStats }).catch(() => {})
     } catch (err: unknown) {
       setNodesError(err instanceof Error ? err.message : 'Failed to load nodes for this gateway.')
     } finally {
@@ -157,12 +191,22 @@ export function GatewaySheet() {
   const handleSave = async () => {
     setSaving(true)
     try {
+      let nextCredentialId = credentialId
+      if (tokenDraft.trim()) {
+        const created = await api<Credential>('POST', '/credentials', {
+          provider: 'openclaw',
+          name: `${name.trim() || 'OpenClaw Gateway'} token`,
+          apiKey: tokenDraft.trim(),
+        })
+        nextCredentialId = created.id
+      }
       const payload = {
         name: name.trim() || 'OpenClaw Gateway',
         endpoint: endpoint.trim() || 'http://localhost:18789',
-        credentialId: credentialId || null,
+        credentialId: nextCredentialId || null,
         notes: notes.trim() || null,
         tags: tags.split(',').map((item) => item.trim()).filter(Boolean),
+        deployment,
         isDefault,
       }
       if (editing) {
@@ -172,7 +216,7 @@ export function GatewaySheet() {
         await api('POST', '/gateways', payload)
         toast.success('Gateway added')
       }
-      await loadGatewayProfiles()
+      await Promise.all([loadGatewayProfiles(), loadCredentials()])
       onClose()
     } catch (err: unknown) {
       toast.error(err instanceof Error ? err.message : 'Failed to save gateway')
@@ -188,6 +232,7 @@ export function GatewaySheet() {
       const params = new URLSearchParams()
       params.set('endpoint', endpoint.trim() || 'http://localhost:18789')
       if (credentialId) params.set('credentialId', credentialId)
+      if (tokenDraft.trim()) params.set('token', tokenDraft.trim())
       const result = await api<{ ok: boolean; models: string[]; error?: string; hint?: string }>('GET', `/providers/openclaw/health?${params.toString()}`)
       if (result.ok) {
         setCheckMessage(`Connected. ${result.models?.length ? `${result.models.length} model${result.models.length === 1 ? '' : 's'} visible.` : 'Gateway responded normally.'}`)
@@ -278,15 +323,112 @@ export function GatewaySheet() {
 
   const inputClass = 'w-full px-4 py-3.5 rounded-[14px] border border-white/[0.08] bg-surface text-text text-[15px] outline-none transition-all duration-200 placeholder:text-text-3/50 focus-glow'
 
+  const applyDeployPatch = (patch: { endpoint?: string; token?: string; name?: string; notes?: string; deployment?: GatewayProfile['deployment'] | Record<string, unknown> | null }) => {
+    if (patch.endpoint) {
+      setEndpoint(patch.endpoint)
+      setCheckMessage('')
+    }
+    if (patch.token) {
+      setTokenDraft(patch.token)
+      setCredentialId(null)
+    }
+    if (patch.name && !name.trim()) {
+      setName(patch.name)
+    }
+    if (patch.notes && !notes.trim()) {
+      setNotes(patch.notes)
+    }
+    if (patch.deployment) {
+      setDeployment((current) => ({
+        ...(current || {}),
+        ...(patch.deployment as GatewayProfile['deployment']),
+      }))
+    }
+  }
+
+  const handleExportGateway = () => {
+    const payload: GatewayImportShape = {
+      name: name.trim() || 'OpenClaw Gateway',
+      endpoint: endpoint.trim() || 'http://localhost:18789',
+      credentialId: credentialId || null,
+      token: tokenDraft.trim() || null,
+      notes: notes.trim() || null,
+      tags: tags.split(',').map((item) => item.trim()).filter(Boolean),
+      isDefault,
+      deployment,
+    }
+    const blob = new Blob([JSON.stringify(payload, null, 2)], { type: 'application/json' })
+    const url = URL.createObjectURL(blob)
+    const link = document.createElement('a')
+    link.href = url
+    link.download = `${(payload.name || 'openclaw-gateway').replace(/[^a-zA-Z0-9_-]/g, '_')}.gateway.json`
+    link.click()
+    URL.revokeObjectURL(url)
+    toast.success('Gateway config exported')
+  }
+
+  const handleImportGateway = (event: React.ChangeEvent<HTMLInputElement>) => {
+    const file = event.target.files?.[0]
+    if (!file) return
+    const reader = new FileReader()
+    reader.onload = (loadEvent) => {
+      try {
+        const parsed = JSON.parse(String(loadEvent.target?.result || '{}')) as GatewayImportShape
+        setName(typeof parsed.name === 'string' ? parsed.name : '')
+        setEndpoint(typeof parsed.endpoint === 'string' ? parsed.endpoint : 'http://localhost:18789')
+        setCredentialId(typeof parsed.credentialId === 'string' ? parsed.credentialId : null)
+        setTokenDraft(typeof parsed.token === 'string' ? parsed.token : '')
+        setNotes(typeof parsed.notes === 'string' ? parsed.notes : '')
+        setTags(Array.isArray(parsed.tags) ? parsed.tags.join(', ') : '')
+        setIsDefault(parsed.isDefault === true)
+        setDeployment(parsed.deployment || null)
+        setCheckMessage('')
+        toast.success('Gateway config imported into this form')
+      } catch {
+        toast.error('Invalid gateway JSON')
+      } finally {
+        event.target.value = ''
+      }
+    }
+    reader.readAsText(file)
+  }
+
   return (
     <BottomSheet open={open} onClose={onClose} wide>
+      <input
+        ref={importFileRef}
+        type="file"
+        accept="application/json,.json"
+        onChange={handleImportGateway}
+        className="hidden"
+      />
       <div className="mb-10">
-        <h2 className="font-display text-[28px] font-700 tracking-[-0.03em] mb-2">
-          {editing ? 'Edit Gateway' : 'New Gateway'}
-        </h2>
-        <p className="text-[14px] text-text-3">
-          First-class OpenClaw gateway profiles for local or remote control planes.
-        </p>
+        <div className="flex flex-wrap items-start justify-between gap-3">
+          <div>
+            <h2 className="font-display text-[28px] font-700 tracking-[-0.03em] mb-2">
+              {editing ? 'Edit Gateway' : 'New Gateway'}
+            </h2>
+            <p className="text-[14px] text-text-3">
+              First-class OpenClaw gateway profiles for local or remote control planes.
+            </p>
+          </div>
+          <div className="flex flex-wrap gap-2">
+            <button
+              type="button"
+              onClick={() => importFileRef.current?.click()}
+              className="px-3 py-2 rounded-[10px] border border-white/[0.08] bg-transparent text-text-2 text-[12px] font-600 hover:bg-white/[0.04] transition-all cursor-pointer"
+            >
+              Import JSON
+            </button>
+            <button
+              type="button"
+              onClick={handleExportGateway}
+              className="px-3 py-2 rounded-[10px] border border-white/[0.08] bg-transparent text-text-2 text-[12px] font-600 hover:bg-white/[0.04] transition-all cursor-pointer"
+            >
+              Export JSON
+            </button>
+          </div>
+        </div>
       </div>
 
       <div className="mb-6">
@@ -309,6 +451,44 @@ export function GatewaySheet() {
         <p className="text-[11px] text-text-3/60 mt-2">Remote HTTPS URLs and local loopback endpoints are both supported.</p>
       </div>
 
+      <div className="mb-6">
+        <OpenClawDeployPanel
+          endpoint={endpoint}
+          token={tokenDraft}
+          deployment={deployment}
+          suggestedName={name || null}
+          title="Deploy OpenClaw From SwarmClaw"
+          description="Use official OpenClaw sources only. Start it on this host, or generate a pre-configured remote bundle for VPS and hosted deployments."
+          onApply={applyDeployPatch}
+        />
+      </div>
+
+      {deployment && (
+        <div className="mb-6 rounded-[16px] border border-white/[0.06] bg-white/[0.02] p-4">
+          <div className="text-[12px] font-700 uppercase tracking-[0.08em] text-text-3/70 mb-2">Deploy metadata</div>
+          <div className="grid grid-cols-1 md:grid-cols-3 gap-3 text-[12px] text-text-3/75">
+            <div className="rounded-[12px] border border-white/[0.06] bg-surface px-3 py-3">
+              <div className="uppercase tracking-[0.08em] text-text-3/55">Method</div>
+              <div className="mt-1 text-text-2">{deployment.method || 'manual'}</div>
+            </div>
+            <div className="rounded-[12px] border border-white/[0.06] bg-surface px-3 py-3">
+              <div className="uppercase tracking-[0.08em] text-text-3/55">Use case</div>
+              <div className="mt-1 text-text-2">{deployment.useCase || 'general'}</div>
+            </div>
+            <div className="rounded-[12px] border border-white/[0.06] bg-surface px-3 py-3">
+              <div className="uppercase tracking-[0.08em] text-text-3/55">Exposure</div>
+              <div className="mt-1 text-text-2">{deployment.exposure || 'manual'}</div>
+            </div>
+          </div>
+          {deployment.lastDeploySummary && (
+            <p className="mt-3 text-[12px] text-text-3 leading-relaxed">{deployment.lastDeploySummary}</p>
+          )}
+          {deployment.lastVerifiedMessage && (
+            <p className="mt-2 text-[12px] text-text-3 leading-relaxed">{deployment.lastVerifiedMessage}</p>
+          )}
+        </div>
+      )}
+
       {discoveries.length > 0 && (
         <div className="mb-6">
           <div className="text-[12px] text-text-3/70 mb-2">Detected healthy gateways</div>
@@ -342,6 +522,18 @@ export function GatewaySheet() {
             <option key={item.id} value={item.id}>{item.name}</option>
           ))}
         </select>
+        <input
+          value={tokenDraft}
+          onChange={(e) => {
+            setTokenDraft(e.target.value)
+            if (e.target.value) setCredentialId(null)
+          }}
+          placeholder="Or paste/generate a new gateway token"
+          className={`${inputClass} mt-3 font-mono text-[13px]`}
+        />
+        <p className="mt-2 text-[11px] text-text-3/60">
+          A pasted token is stored as a new encrypted OpenClaw credential when you save this gateway.
+        </p>
       </div>
 
       <div className="grid grid-cols-1 md:grid-cols-2 gap-4 mb-6">