@swarmclawai/swarmclaw 0.7.6 → 0.7.8

package/src/components/openclaw/openclaw-deploy-panel.tsx

@@ -6,6 +6,8 @@ import { copyTextToClipboard } from '@/lib/clipboard'
 
 type RemoteTemplate = 'docker' | 'render' | 'fly' | 'railway'
 type RemoteProvider = 'hetzner' | 'digitalocean' | 'vultr' | 'linode' | 'lightsail' | 'gcp' | 'azure' | 'oci' | 'generic'
+type UseCaseTemplate = 'local-dev' | 'single-vps' | 'private-tailnet' | 'browser-heavy' | 'team-control'
+type ExposurePreset = 'private-lan' | 'tailscale' | 'caddy' | 'nginx' | 'ssh-tunnel'
 
 interface LocalDeployStatus {
   running: boolean
@@ -22,6 +24,22 @@ interface LocalDeployStatus {
   installCommand: string
 }
 
+interface RemoteDeployStatus {
+  active: boolean
+  processId: string | null
+  pid: number | null
+  action: string | null
+  target: string | null
+  startedAt: number | null
+  status: 'idle' | 'running' | 'exited' | 'killed' | 'failed' | 'timeout'
+  exitCode: number | null
+  tail: string
+  lastError: string | null
+  lastSummary: string | null
+  lastCommandPreview: string | null
+  lastBackupPath: string | null
+}
+
 interface DeployFile {
   name: string
   language: 'bash' | 'yaml' | 'env' | 'toml' | 'text'
@@ -32,6 +50,8 @@ interface DeployBundle {
   template: RemoteTemplate
   provider: RemoteProvider
   providerLabel: string
+  useCase: UseCaseTemplate
+  exposure: ExposurePreset
   title: string
   summary: string
   endpoint: string
@@ -43,6 +63,7 @@ interface DeployBundle {
 
 interface DeployStatusResponse {
   local: LocalDeployStatus
+  remote?: RemoteDeployStatus
 }
 
 interface DeployActionResponse {
@@ -50,6 +71,19 @@ interface DeployActionResponse {
   local?: LocalDeployStatus
   token?: string
   bundle?: DeployBundle
+  processId?: string | null
+  remote?: RemoteDeployStatus
+  summary?: string
+  commandPreview?: string
+  verify?: {
+    ok: boolean
+    endpoint: string
+    wsUrl: string
+    authProvided: boolean
+    models: string[]
+    error?: string
+    hint?: string
+  }
   error?: string
 }
 
@@ -58,11 +92,32 @@ interface ApplyPatch {
   token?: string
   name?: string
   notes?: string
+  deployment?: {
+    method?: 'local' | 'bundle' | 'ssh' | 'imported' | null
+    provider?: string | null
+    remoteTarget?: RemoteTemplate | null
+    useCase?: UseCaseTemplate | null
+    exposure?: ExposurePreset | null
+    sshHost?: string | null
+    sshUser?: string | null
+    sshPort?: number | null
+    sshKeyPath?: string | null
+    sshTargetDir?: string | null
+    lastDeployAt?: number | null
+    lastDeployAction?: string | null
+    lastDeploySummary?: string | null
+    lastDeployProcessId?: string | null
+    lastVerifiedAt?: number | null
+    lastVerifiedOk?: boolean | null
+    lastVerifiedMessage?: string | null
+    lastBackupPath?: string | null
+  }
 }
 
 interface OpenClawDeployPanelProps {
   endpoint?: string | null
   token?: string | null
+  deployment?: ApplyPatch['deployment'] | null
   suggestedName?: string | null
   title?: string
   description?: string
@@ -113,6 +168,30 @@ const PROVIDER_OPTIONS: Array<{
   { id: 'generic', label: 'Generic', detail: 'Any Ubuntu 24.04 host' },
 ]
 
+const USE_CASE_OPTIONS: Array<{
+  id: UseCaseTemplate
+  label: string
+  detail: string
+}> = [
+  { id: 'local-dev', label: 'Local Dev', detail: 'Loopback-friendly defaults for one machine and quick setup.' },
+  { id: 'single-vps', label: 'Single VPS', detail: 'Balanced default for most public or private VPS installs.' },
+  { id: 'private-tailnet', label: 'Private Tailnet', detail: 'Keep the gateway private and expose it over a tailnet.' },
+  { id: 'browser-heavy', label: 'Browser Heavy', detail: 'Roomier defaults for browser-backed nodes and automation.' },
+  { id: 'team-control', label: 'Team Control', detail: 'Shared operator-friendly control plane defaults and backups.' },
+]
+
+const EXPOSURE_OPTIONS: Array<{
+  id: ExposurePreset
+  label: string
+  detail: string
+}> = [
+  { id: 'private-lan', label: 'Private LAN', detail: 'Expose on LAN only and rely on your own firewall rules.' },
+  { id: 'tailscale', label: 'Tailscale', detail: 'Loopback only plus a tailnet-facing Tailscale serve script.' },
+  { id: 'caddy', label: 'Caddy', detail: 'Bundled reverse proxy with simple HTTPS termination.' },
+  { id: 'nginx', label: 'Nginx', detail: 'Bundled reverse proxy config for teams with existing TLS handling.' },
+  { id: 'ssh-tunnel', label: 'SSH Tunnel', detail: 'Keep it private and access the gateway through SSH port-forwarding.' },
+]
+
 function buildLocalRunCommand(port: number, token?: string | null): string {
   const parts = ['npx', 'openclaw', 'gateway', 'run', '--allow-unconfigured', '--force', '--bind', 'loopback', '--port', String(port)]
   if (token) parts.push('--auth', 'token', '--token', token)
@@ -170,6 +249,7 @@ export function OpenClawDeployPanel(props: OpenClawDeployPanelProps) {
   const {
     endpoint,
     token,
+    deployment,
     suggestedName,
     title = 'Smart Deploy OpenClaw',
     description = 'Launch a local gateway on this host or generate a remote bundle with opinionated defaults.',
@@ -179,6 +259,7 @@ export function OpenClawDeployPanel(props: OpenClawDeployPanelProps) {
 
   const [activeTab, setActiveTab] = useState<'local' | 'remote'>('local')
   const [localStatus, setLocalStatus] = useState<LocalDeployStatus | null>(null)
+  const [remoteStatus, setRemoteStatus] = useState<RemoteDeployStatus | null>(null)
   const [localPort, setLocalPort] = useState(() => inferPort(endpoint))
   const [deployToken, setDeployToken] = useState(token || '')
   const [remoteTarget, setRemoteTarget] = useState(() => inferRemoteTarget(endpoint))
@@ -187,12 +268,22 @@ export function OpenClawDeployPanel(props: OpenClawDeployPanelProps) {
   ))
   const [remoteTemplate, setRemoteTemplate] = useState<RemoteTemplate>('docker')
   const [remoteProvider, setRemoteProvider] = useState<RemoteProvider>('hetzner')
+  const [useCase, setUseCase] = useState<UseCaseTemplate>(() => deployment?.useCase || 'single-vps')
+  const [exposure, setExposure] = useState<ExposurePreset>(() => deployment?.exposure || 'caddy')
+  const [sshHost, setSshHost] = useState(() => deployment?.sshHost || inferRemoteTarget(endpoint))
+  const [sshUser, setSshUser] = useState(() => deployment?.sshUser || 'root')
+  const [sshPort, setSshPort] = useState(() => deployment?.sshPort || 22)
+  const [sshKeyPath, setSshKeyPath] = useState(() => deployment?.sshKeyPath || '')
+  const [sshTargetDir, setSshTargetDir] = useState(() => deployment?.sshTargetDir || '/opt/openclaw')
+  const [restoreBackupPath, setRestoreBackupPath] = useState(() => deployment?.lastBackupPath || '')
   const [bundle, setBundle] = useState<DeployBundle | null>(null)
   const [bundleFile, setBundleFile] = useState('')
-  const [loading, setLoading] = useState<'idle' | 'starting-local' | 'stopping-local' | 'generating-bundle'>('idle')
+  const [loading, setLoading] = useState<'idle' | 'starting-local' | 'stopping-local' | 'restarting-local' | 'generating-bundle' | 'ssh-deploy' | 'verifying' | 'remote-action'>('idle')
   const [message, setMessage] = useState('')
   const [error, setError] = useState('')
   const [copiedKey, setCopiedKey] = useState('')
+  const [commandPreview, setCommandPreview] = useState('')
+  const [verifySummary, setVerifySummary] = useState('')
 
   useEffect(() => {
     if (token && !deployToken) setDeployToken(token)
@@ -204,16 +295,30 @@ export function OpenClawDeployPanel(props: OpenClawDeployPanelProps) {
       setActiveTab('local')
     } else if (endpoint && inferRemoteTarget(endpoint)) {
       setRemoteTarget(inferRemoteTarget(endpoint))
+      setSshHost((current) => current || inferRemoteTarget(endpoint))
       setActiveTab('remote')
     }
   }, [endpoint])
 
+  useEffect(() => {
+    if (!deployment) return
+    if (deployment.useCase) setUseCase(deployment.useCase)
+    if (deployment.exposure) setExposure(deployment.exposure)
+    if (deployment.sshHost) setSshHost(deployment.sshHost)
+    if (deployment.sshUser) setSshUser(deployment.sshUser)
+    if (deployment.sshPort) setSshPort(deployment.sshPort)
+    if (deployment.sshKeyPath) setSshKeyPath(deployment.sshKeyPath)
+    if (deployment.sshTargetDir) setSshTargetDir(deployment.sshTargetDir)
+    if (deployment.lastBackupPath) setRestoreBackupPath(deployment.lastBackupPath)
+  }, [deployment])
+
   useEffect(() => {
     let cancelled = false
     api<DeployStatusResponse>('GET', '/openclaw/deploy')
       .then((result) => {
         if (!cancelled) {
           setLocalStatus(result.local)
+          setRemoteStatus(result.remote || null)
           if (result.local.token) {
             setDeployToken((current) => current || result.local.token || '')
           }
@@ -225,6 +330,19 @@ export function OpenClawDeployPanel(props: OpenClawDeployPanelProps) {
     }
   }, [])
 
+  useEffect(() => {
+    if (!remoteStatus?.active) return
+    const timer = window.setInterval(() => {
+      api<DeployStatusResponse>('GET', '/openclaw/deploy')
+        .then((result) => {
+          setLocalStatus(result.local)
+          setRemoteStatus(result.remote || null)
+        })
+        .catch(() => {})
+    }, 2500)
+    return () => window.clearInterval(timer)
+  }, [remoteStatus?.active])
+
   const selectedFile = useMemo(() => {
     if (!bundle) return null
     return bundle.files.find((file) => file.name === bundleFile) || bundle.files[0] || null
@@ -259,9 +377,35 @@ export function OpenClawDeployPanel(props: OpenClawDeployPanelProps) {
     }, 1200)
   }
 
+  const applyDeploymentPatch = async (patch: ApplyPatch) => {
+    await Promise.resolve(onApply?.(patch))
+  }
+
+  const buildRemoteDeploymentPatch = (overrides?: Partial<NonNullable<ApplyPatch['deployment']>>): NonNullable<ApplyPatch['deployment']> => ({
+    method: overrides?.method || (remoteTemplate === 'docker' ? 'bundle' : 'bundle'),
+    provider: overrides?.provider || (remoteTemplate === 'docker' ? remoteProvider : remoteTemplate),
+    remoteTarget: overrides?.remoteTarget || remoteTemplate,
+    useCase,
+    exposure,
+    sshHost: sshHost.trim() || null,
+    sshUser: sshUser.trim() || null,
+    sshPort,
+    sshKeyPath: sshKeyPath.trim() || null,
+    sshTargetDir: sshTargetDir.trim() || null,
+    lastDeployAt: overrides?.lastDeployAt ?? null,
+    lastDeployAction: overrides?.lastDeployAction ?? null,
+    lastDeploySummary: overrides?.lastDeploySummary ?? null,
+    lastDeployProcessId: overrides?.lastDeployProcessId ?? null,
+    lastVerifiedAt: overrides?.lastVerifiedAt ?? null,
+    lastVerifiedOk: overrides?.lastVerifiedOk ?? null,
+    lastVerifiedMessage: overrides?.lastVerifiedMessage ?? null,
+    lastBackupPath: overrides?.lastBackupPath ?? deployment?.lastBackupPath ?? null,
+  })
+
   const handleStartLocal = async () => {
     setLoading('starting-local')
     setError('')
+    setVerifySummary('')
     try {
       const result = await api<DeployActionResponse>('POST', '/openclaw/deploy', {
         action: 'start-local',
@@ -271,12 +415,36 @@ export function OpenClawDeployPanel(props: OpenClawDeployPanelProps) {
       if (!result.ok || !result.local) throw new Error(result.error || 'Local OpenClaw deploy failed.')
       setLocalStatus(result.local)
       if (result.token) setDeployToken(result.token)
-      await Promise.resolve(onApply?.({
+      const verify = await api<DeployActionResponse>('POST', '/openclaw/deploy', {
+        action: 'verify',
+        endpoint: result.local.endpoint,
+        token: result.token || deployToken || undefined,
+      }).catch(() => ({ ok: false } as DeployActionResponse))
+      if (verify.verify) {
+        setVerifySummary(verify.verify.ok
+          ? `Verified ${verify.verify.endpoint} with ${verify.verify.models.length} model${verify.verify.models.length === 1 ? '' : 's'}.`
+          : (verify.verify.error || verify.verify.hint || 'Verification failed.'))
+      }
+      await applyDeploymentPatch({
         endpoint: result.local.endpoint,
         token: result.token || deployToken,
         name: suggestedName || `Local OpenClaw ${result.local.port}`,
         notes: 'Managed by SwarmClaw local deploy.',
-      }))
+        deployment: {
+          method: 'local',
+          provider: 'local',
+          useCase: 'local-dev',
+          exposure: 'private-lan',
+          lastDeployAt: Date.now(),
+          lastDeployAction: 'start-local',
+          lastDeploySummary: 'Managed local OpenClaw runtime started from SwarmClaw.',
+          lastVerifiedAt: verify.verify ? Date.now() : null,
+          lastVerifiedOk: verify.verify?.ok ?? null,
+          lastVerifiedMessage: verify.verify
+            ? (verify.verify.error || verify.verify.hint || 'Verified successfully.')
+            : null,
+        },
+      })
       showMessage('Local OpenClaw started and applied to this connection.')
     } catch (err: unknown) {
       setError(err instanceof Error ? err.message : 'Local OpenClaw deploy failed.')
@@ -300,6 +468,41 @@ export function OpenClawDeployPanel(props: OpenClawDeployPanelProps) {
     }
   }
 
+  const handleRestartLocal = async () => {
+    setLoading('restarting-local')
+    setError('')
+    try {
+      const result = await api<DeployActionResponse>('POST', '/openclaw/deploy', {
+        action: 'restart-local',
+        port: localPort,
+        token: deployToken.trim() || undefined,
+      })
+      if (!result.ok || !result.local) throw new Error(result.error || 'Failed to restart local OpenClaw.')
+      setLocalStatus(result.local)
+      if (result.token) setDeployToken(result.token)
+      await applyDeploymentPatch({
+        endpoint: result.local.endpoint,
+        token: result.token || deployToken,
+        name: suggestedName || `Local OpenClaw ${result.local.port}`,
+        notes: 'Managed by SwarmClaw local deploy.',
+        deployment: {
+          method: 'local',
+          provider: 'local',
+          useCase: 'local-dev',
+          exposure: 'private-lan',
+          lastDeployAt: Date.now(),
+          lastDeployAction: 'restart-local',
+          lastDeploySummary: 'Managed local OpenClaw runtime restarted from SwarmClaw.',
+        },
+      })
+      showMessage('Restarted managed local OpenClaw runtime.')
+    } catch (err: unknown) {
+      setError(err instanceof Error ? err.message : 'Failed to restart local OpenClaw.')
+    } finally {
+      setLoading('idle')
+    }
+  }
+
   const handleGenerateBundle = async () => {
     setLoading('generating-bundle')
     setError('')
@@ -311,17 +514,26 @@ export function OpenClawDeployPanel(props: OpenClawDeployPanelProps) {
         scheme: remoteScheme,
         token: deployToken.trim() || undefined,
         provider: remoteProvider,
+        useCase,
+        exposure,
       })
       if (!result.ok || !result.bundle) throw new Error(result.error || 'Failed to generate OpenClaw deploy bundle.')
       setBundle(result.bundle)
       setBundleFile(result.bundle.files[0]?.name || '')
       setDeployToken(result.bundle.token)
-      await Promise.resolve(onApply?.({
+      await applyDeploymentPatch({
         endpoint: result.bundle.endpoint,
         token: result.bundle.token,
         name: suggestedName || result.bundle.title,
         notes: `OpenClaw remote deploy template: ${result.bundle.title}`,
-      }))
+        deployment: buildRemoteDeploymentPatch({
+          method: 'bundle',
+          provider: remoteTemplate === 'docker' ? remoteProvider : remoteTemplate,
+          remoteTarget: remoteTemplate,
+          lastDeployAction: 'bundle',
+          lastDeploySummary: `Generated ${result.bundle.title} from SwarmClaw.`,
+        }),
+      })
       showMessage('Remote bundle generated and applied to this connection.')
     } catch (err: unknown) {
       setError(err instanceof Error ? err.message : 'Failed to generate OpenClaw deploy bundle.')
@@ -330,6 +542,140 @@ export function OpenClawDeployPanel(props: OpenClawDeployPanelProps) {
     }
   }
 
+  const handleVerify = async (overrideEndpoint?: string | null, overrideToken?: string | null) => {
+    setLoading('verifying')
+    setError('')
+    try {
+      const endpointToVerify = (overrideEndpoint || bundle?.endpoint || endpoint || '').trim()
+      const tokenToVerify = (overrideToken || deployToken || '').trim()
+      if (!endpointToVerify) throw new Error('Set an OpenClaw endpoint before verifying.')
+      const result = await api<DeployActionResponse>('POST', '/openclaw/deploy', {
+        action: 'verify',
+        endpoint: endpointToVerify,
+        token: tokenToVerify || undefined,
+      })
+      if (!result.verify) throw new Error(result.error || 'Verification failed.')
+      const summary = result.verify.ok
+        ? `Verified ${result.verify.endpoint} with ${result.verify.models.length} model${result.verify.models.length === 1 ? '' : 's'}.`
+        : (result.verify.error || result.verify.hint || 'Verification failed.')
+      setVerifySummary(summary)
+      await applyDeploymentPatch({
+        endpoint: result.verify.endpoint,
+        token: tokenToVerify || undefined,
+        deployment: buildRemoteDeploymentPatch({
+          method: deployment?.method || (isLocalEndpoint(result.verify.endpoint) ? 'local' : 'bundle'),
+          lastVerifiedAt: Date.now(),
+          lastVerifiedOk: result.verify.ok,
+          lastVerifiedMessage: summary,
+        }),
+      })
+      showMessage(result.verify.ok ? 'OpenClaw verification passed.' : summary)
+    } catch (err: unknown) {
+      setError(err instanceof Error ? err.message : 'Verification failed.')
+    } finally {
+      setLoading('idle')
+    }
+  }
+
+  const handleSshDeploy = async () => {
+    setLoading('ssh-deploy')
+    setError('')
+    setVerifySummary('')
+    try {
+      const result = await api<DeployActionResponse>('POST', '/openclaw/deploy', {
+        action: 'ssh-deploy',
+        template: remoteTemplate,
+        target: remoteTarget.trim(),
+        scheme: remoteScheme,
+        token: deployToken.trim() || undefined,
+        provider: remoteProvider,
+        useCase,
+        exposure,
+        ssh: {
+          host: sshHost.trim(),
+          user: sshUser.trim() || undefined,
+          port: sshPort,
+          keyPath: sshKeyPath.trim() || undefined,
+          targetDir: sshTargetDir.trim() || undefined,
+        },
+      })
+      if (!result.ok) throw new Error(result.error || 'Failed to start SSH deploy.')
+      if (result.bundle) {
+        setBundle(result.bundle)
+        setBundleFile(result.bundle.files[0]?.name || '')
+      }
+      if (result.token) setDeployToken(result.token)
+      setRemoteStatus(result.remote || null)
+      setCommandPreview(result.commandPreview || '')
+      await applyDeploymentPatch({
+        endpoint: result.bundle?.endpoint || endpoint || undefined,
+        token: result.token || deployToken,
+        name: suggestedName || result.bundle?.title || `SSH OpenClaw ${sshHost.trim()}`,
+        notes: `Official OpenClaw deployed over SSH to ${sshHost.trim()}.`,
+        deployment: buildRemoteDeploymentPatch({
+          method: 'ssh',
+          provider: remoteProvider,
+          lastDeployAt: Date.now(),
+          lastDeployAction: 'ssh-deploy',
+          lastDeploySummary: result.summary || `Started SSH deploy to ${sshHost.trim()}.`,
+          lastDeployProcessId: result.processId || null,
+        }),
+      })
+      showMessage(result.summary || 'Started SSH deploy.')
+    } catch (err: unknown) {
+      setError(err instanceof Error ? err.message : 'Failed to start SSH deploy.')
+    } finally {
+      setLoading('idle')
+    }
+  }
+
+  const handleRemoteLifecycle = async (
+    action: 'remote-start' | 'remote-stop' | 'remote-restart' | 'remote-upgrade' | 'remote-backup' | 'remote-restore' | 'remote-rotate-token',
+  ) => {
+    setLoading('remote-action')
+    setError('')
+    try {
+      const result = await api<DeployActionResponse>('POST', '/openclaw/deploy', {
+        action,
+        token: action === 'remote-rotate-token' ? (deployToken.trim() || undefined) : undefined,
+        backupPath: action === 'remote-restore' ? (restoreBackupPath.trim() || undefined) : undefined,
+        ssh: {
+          host: sshHost.trim(),
+          user: sshUser.trim() || undefined,
+          port: sshPort,
+          keyPath: sshKeyPath.trim() || undefined,
+          targetDir: sshTargetDir.trim() || undefined,
+        },
+      })
+      if (!result.ok) throw new Error(result.error || 'Remote lifecycle action failed.')
+      if (result.token) setDeployToken(result.token)
+      setRemoteStatus(result.remote || null)
+      setCommandPreview(result.commandPreview || '')
+      if (result.remote?.lastBackupPath) {
+        setRestoreBackupPath(result.remote.lastBackupPath)
+      }
+      await applyDeploymentPatch({
+        token: result.token || undefined,
+        deployment: buildRemoteDeploymentPatch({
+          method: 'ssh',
+          provider: remoteProvider,
+          lastDeployAt: Date.now(),
+          lastDeployAction: action,
+          lastDeploySummary: result.summary || action,
+          lastDeployProcessId: result.processId || null,
+          lastBackupPath: action === 'remote-backup' || action === 'remote-restore'
+            ? (result.remote?.lastBackupPath || restoreBackupPath.trim() || null)
+            : undefined,
+        }),
+      })
+      showMessage(result.summary || 'Remote lifecycle action started.')
+    } catch (err: unknown) {
+      setError(err instanceof Error ? err.message : 'Remote lifecycle action failed.')
+    } finally {
+      setLoading('idle')
+    }
+  }
+
   return (
     <div className={`rounded-[16px] border border-white/[0.08] bg-surface ${compact ? 'p-4' : 'p-5'} text-left`}>
       <div className="flex flex-wrap items-start justify-between gap-3">
@@ -405,6 +751,26 @@ export function OpenClawDeployPanel(props: OpenClawDeployPanelProps) {
               >
                 {loading === 'starting-local' ? 'Starting…' : 'Deploy on This Host'}
               </button>
+              {localStatus?.running && (
+                <button
+                  type="button"
+                  onClick={handleRestartLocal}
+                  disabled={loading !== 'idle'}
+                  className="rounded-[10px] border border-white/[0.08] bg-transparent px-3.5 py-2 text-[12px] font-700 text-text-2 cursor-pointer hover:bg-white/[0.04] transition-all disabled:opacity-40"
+                >
+                  {loading === 'restarting-local' ? 'Restarting…' : 'Restart'}
+                </button>
+              )}
+              {localStatus?.running && (
+                <button
+                  type="button"
+                  onClick={() => void handleVerify(localStatus.endpoint, deployToken || localStatus.token)}
+                  disabled={loading !== 'idle'}
+                  className="rounded-[10px] border border-white/[0.08] bg-transparent px-3.5 py-2 text-[12px] font-700 text-text-2 cursor-pointer hover:bg-white/[0.04] transition-all disabled:opacity-40"
+                >
+                  {loading === 'verifying' ? 'Verifying…' : 'Verify'}
+                </button>
+              )}
               {localStatus?.running && (
                 <button
                   type="button"
@@ -453,6 +819,12 @@ export function OpenClawDeployPanel(props: OpenClawDeployPanelProps) {
                     For a durable OS service, use the generated install command after the quick deploy works.
                   </div>
                 </div>
+                {verifySummary && (
+                  <div className="rounded-[10px] border border-white/[0.05] bg-white/[0.02] px-3 py-2 md:col-span-2">
+                    <div className="text-[10px] uppercase tracking-[0.08em] text-text-3/60">Verification</div>
+                    <div className="mt-1 text-[12px] text-text-2 leading-relaxed">{verifySummary}</div>
+                  </div>
+                )}
               </div>
             )}
 
@@ -509,7 +881,7 @@ export function OpenClawDeployPanel(props: OpenClawDeployPanelProps) {
           </div>
 
           {remoteTemplate === 'docker' && (
-            <div>
+            <div className="space-y-4">
               <div className="text-[11px] font-700 uppercase tracking-[0.08em] text-text-3/70 mb-2">VPS provider</div>
               <div className="grid gap-2 md:grid-cols-3 xl:grid-cols-5">
                 {PROVIDER_OPTIONS.map((option) => (
@@ -527,6 +899,87 @@ export function OpenClawDeployPanel(props: OpenClawDeployPanelProps) {
               <p className="mt-2 text-[12px] text-text-3 leading-relaxed">
                 SwarmClaw generates a provider-specific runbook plus a cloud-init quickstart, but the runtime itself still comes from the official OpenClaw Docker image.
               </p>
+
+              <div>
+                <div className="text-[11px] font-700 uppercase tracking-[0.08em] text-text-3/70 mb-2">Use case preset</div>
+                <div className="grid gap-2 md:grid-cols-2 xl:grid-cols-5">
+                  {USE_CASE_OPTIONS.map((option) => (
+                    <button
+                      key={option.id}
+                      type="button"
+                      onClick={() => setUseCase(option.id)}
+                      className={`rounded-[12px] border px-3 py-3 text-left transition-all cursor-pointer ${badgeTone(useCase === option.id)}`}
+                    >
+                      <div className="text-[13px] font-700">{option.label}</div>
+                      <div className="mt-1 text-[11px] leading-relaxed text-text-3">{option.detail}</div>
+                    </button>
+                  ))}
+                </div>
+              </div>
+
+              <div>
+                <div className="text-[11px] font-700 uppercase tracking-[0.08em] text-text-3/70 mb-2">Safe exposure preset</div>
+                <div className="grid gap-2 md:grid-cols-2 xl:grid-cols-5">
+                  {EXPOSURE_OPTIONS.map((option) => (
+                    <button
+                      key={option.id}
+                      type="button"
+                      onClick={() => setExposure(option.id)}
+                      className={`rounded-[12px] border px-3 py-3 text-left transition-all cursor-pointer ${badgeTone(exposure === option.id)}`}
+                    >
+                      <div className="text-[13px] font-700">{option.label}</div>
+                      <div className="mt-1 text-[11px] leading-relaxed text-text-3">{option.detail}</div>
+                    </button>
+                  ))}
+                </div>
+                <p className="mt-2 text-[12px] text-text-3 leading-relaxed">
+                  Smart Deploy keeps the OpenClaw runtime official-only and generates the surrounding exposure config in-house so operators do not need third-party deploy services.
+                </p>
+              </div>
+
+              <div className="rounded-[12px] border border-white/[0.06] bg-white/[0.02] p-4">
+                <div className="text-[11px] font-700 uppercase tracking-[0.08em] text-text-3/70 mb-3">In-House SSH Deploy</div>
+                <div className="grid gap-3 md:grid-cols-2">
+                  <input
+                    type="text"
+                    value={sshHost}
+                    onChange={(e) => setSshHost(e.target.value)}
+                    placeholder="gateway.your-vps.com"
+                    className="w-full rounded-[12px] border border-white/[0.08] bg-bg px-3 py-3 text-[13px] text-text font-mono outline-none focus:border-accent-bright/30"
+                  />
+                  <input
+                    type="text"
+                    value={sshUser}
+                    onChange={(e) => setSshUser(e.target.value)}
+                    placeholder="root"
+                    className="w-full rounded-[12px] border border-white/[0.08] bg-bg px-3 py-3 text-[13px] text-text font-mono outline-none focus:border-accent-bright/30"
+                  />
+                  <input
+                    type="number"
+                    value={sshPort}
+                    onChange={(e) => setSshPort(Number.parseInt(e.target.value, 10) || 22)}
+                    placeholder="22"
+                    className="w-full rounded-[12px] border border-white/[0.08] bg-bg px-3 py-3 text-[13px] text-text font-mono outline-none focus:border-accent-bright/30"
+                  />
+                  <input
+                    type="text"
+                    value={sshKeyPath}
+                    onChange={(e) => setSshKeyPath(e.target.value)}
+                    placeholder="~/.ssh/id_ed25519"
+                    className="w-full rounded-[12px] border border-white/[0.08] bg-bg px-3 py-3 text-[13px] text-text font-mono outline-none focus:border-accent-bright/30"
+                  />
+                </div>
+                <input
+                  type="text"
+                  value={sshTargetDir}
+                  onChange={(e) => setSshTargetDir(e.target.value)}
+                  placeholder="/opt/openclaw"
+                  className="mt-3 w-full rounded-[12px] border border-white/[0.08] bg-bg px-3 py-3 text-[13px] text-text font-mono outline-none focus:border-accent-bright/30"
+                />
+                <p className="mt-2 text-[12px] text-text-3 leading-relaxed">
+                  SwarmClaw will push the generated official-image bundle to this host over SSH and run the bootstrap there. This stays inside your own infra and does not rely on outside OpenClaw deployers.
+                </p>
+              </div>
             </div>
           )}
 
@@ -539,6 +992,24 @@ export function OpenClawDeployPanel(props: OpenClawDeployPanelProps) {
             >
               {loading === 'generating-bundle' ? 'Generating…' : 'Generate Bundle'}
             </button>
+            {remoteTemplate === 'docker' && (
+              <button
+                type="button"
+                onClick={handleSshDeploy}
+                disabled={loading !== 'idle' || !sshHost.trim()}
+                className="rounded-[10px] border border-white/[0.08] bg-transparent px-3.5 py-2 text-[12px] font-700 text-text-2 cursor-pointer hover:bg-white/[0.04] transition-all disabled:opacity-40"
+              >
+                {loading === 'ssh-deploy' ? 'Deploying…' : 'Deploy Over SSH'}
+              </button>
+            )}
+            <button
+              type="button"
+              onClick={() => void handleVerify(bundle?.endpoint || endpoint || remoteTarget, deployToken)}
+              disabled={loading !== 'idle' || (!bundle?.endpoint && !endpoint && !remoteTarget.trim())}
+              className="rounded-[10px] border border-white/[0.08] bg-transparent px-3.5 py-2 text-[12px] font-700 text-text-2 cursor-pointer hover:bg-white/[0.04] transition-all disabled:opacity-40"
+            >
+              {loading === 'verifying' ? 'Verifying…' : 'Verify Endpoint'}
+            </button>
             {bundle && (
               <button
                 type="button"
@@ -550,6 +1021,117 @@ export function OpenClawDeployPanel(props: OpenClawDeployPanelProps) {
             )}
           </div>
 
+          {remoteTemplate === 'docker' && sshHost.trim() && (
+            <div className="space-y-3">
+              <div className="flex flex-wrap gap-2">
+                <button
+                  type="button"
+                  onClick={() => void handleRemoteLifecycle('remote-start')}
+                  disabled={loading !== 'idle'}
+                  className="rounded-[10px] border border-white/[0.08] bg-transparent px-3 py-1.5 text-[11px] font-700 text-text-2 cursor-pointer hover:bg-white/[0.04] transition-all disabled:opacity-40"
+                >
+                  Start
+                </button>
+                <button
+                  type="button"
+                  onClick={() => void handleRemoteLifecycle('remote-restart')}
+                  disabled={loading !== 'idle'}
+                  className="rounded-[10px] border border-white/[0.08] bg-transparent px-3 py-1.5 text-[11px] font-700 text-text-2 cursor-pointer hover:bg-white/[0.04] transition-all disabled:opacity-40"
+                >
+                  Restart
+                </button>
+                <button
+                  type="button"
+                  onClick={() => void handleRemoteLifecycle('remote-upgrade')}
+                  disabled={loading !== 'idle'}
+                  className="rounded-[10px] border border-white/[0.08] bg-transparent px-3 py-1.5 text-[11px] font-700 text-text-2 cursor-pointer hover:bg-white/[0.04] transition-all disabled:opacity-40"
+                >
+                  Upgrade
+                </button>
+                <button
+                  type="button"
+                  onClick={() => void handleRemoteLifecycle('remote-backup')}
+                  disabled={loading !== 'idle'}
+                  className="rounded-[10px] border border-white/[0.08] bg-transparent px-3 py-1.5 text-[11px] font-700 text-text-2 cursor-pointer hover:bg-white/[0.04] transition-all disabled:opacity-40"
+                >
+                  Backup
+                </button>
+                <button
+                  type="button"
+                  onClick={() => void handleRemoteLifecycle('remote-rotate-token')}
+                  disabled={loading !== 'idle'}
+                  className="rounded-[10px] border border-white/[0.08] bg-transparent px-3 py-1.5 text-[11px] font-700 text-text-2 cursor-pointer hover:bg-white/[0.04] transition-all disabled:opacity-40"
+                >
+                  Rotate token
+                </button>
+                <button
+                  type="button"
+                  onClick={() => void handleRemoteLifecycle('remote-stop')}
+                  disabled={loading !== 'idle'}
+                  className="rounded-[10px] border border-red-400/20 bg-red-400/[0.06] px-3 py-1.5 text-[11px] font-700 text-red-300 cursor-pointer hover:bg-red-400/[0.1] transition-all disabled:opacity-40"
+                >
+                  Stop
+                </button>
+              </div>
+              <div className="grid gap-2 md:grid-cols-[1fr_auto]">
+                <input
+                  type="text"
+                  value={restoreBackupPath}
+                  onChange={(e) => setRestoreBackupPath(e.target.value)}
+                  placeholder="/opt/openclaw/backups/openclaw-backup-123456789.tgz"
+                  className="w-full rounded-[12px] border border-white/[0.08] bg-bg px-3 py-3 text-[13px] text-text font-mono outline-none focus:border-accent-bright/30"
+                />
+                <button
+                  type="button"
+                  onClick={() => void handleRemoteLifecycle('remote-restore')}
+                  disabled={loading !== 'idle' || !restoreBackupPath.trim()}
+                  className="rounded-[10px] border border-white/[0.08] bg-transparent px-3 py-1.5 text-[11px] font-700 text-text-2 cursor-pointer hover:bg-white/[0.04] transition-all disabled:opacity-40"
+                >
+                  Restore backup
+                </button>
+              </div>
+            </div>
+          )}
+
+          {(verifySummary || commandPreview || remoteStatus) && (
+            <div className="rounded-[12px] border border-white/[0.06] bg-bg px-4 py-4">
+              {verifySummary && (
+                <div className="text-[12px] text-text-2 leading-relaxed">{verifySummary}</div>
+              )}
+              {remoteStatus && (
+                <div className="mt-3 grid gap-3 md:grid-cols-3">
+                  <div className="rounded-[10px] border border-white/[0.06] bg-white/[0.02] px-3 py-2">
+                    <div className="text-[10px] uppercase tracking-[0.08em] text-text-3/60">Remote action</div>
+                    <div className="mt-1 text-[12px] text-text-2">{remoteStatus.action || remoteStatus.lastSummary || 'Idle'}</div>
+                  </div>
+                  <div className="rounded-[10px] border border-white/[0.06] bg-white/[0.02] px-3 py-2">
+                    <div className="text-[10px] uppercase tracking-[0.08em] text-text-3/60">Target</div>
+                    <div className="mt-1 text-[12px] text-text-2 font-mono break-all">{remoteStatus.target || sshHost || 'n/a'}</div>
+                  </div>
+                  <div className="rounded-[10px] border border-white/[0.06] bg-white/[0.02] px-3 py-2">
+                    <div className="text-[10px] uppercase tracking-[0.08em] text-text-3/60">Status</div>
+                    <div className="mt-1 text-[12px] text-text-2">{remoteStatus.status}</div>
+                  </div>
+                </div>
+              )}
+              {(commandPreview || remoteStatus?.lastCommandPreview) && (
+                <pre className="mt-3 overflow-x-auto rounded-[10px] border border-white/[0.05] bg-black/20 px-3 py-3 text-[11px] text-text-2/80 whitespace-pre-wrap">
+                  {commandPreview || remoteStatus?.lastCommandPreview}
+                </pre>
+              )}
+              {!!remoteStatus?.tail && (
+                <pre className="mt-3 overflow-x-auto rounded-[10px] border border-white/[0.05] bg-black/20 px-3 py-3 text-[11px] text-text-2/80 whitespace-pre-wrap">
+                  {remoteStatus.tail}
+                </pre>
+              )}
+              {remoteStatus?.lastBackupPath && (
+                <div className="mt-3 text-[12px] text-text-3">
+                  Last backup path: <code className="text-text-2">{remoteStatus.lastBackupPath}</code>
+                </div>
+              )}
+            </div>
+          )}
+
           {bundle && (
             <div className="rounded-[12px] border border-white/[0.06] bg-bg px-4 py-4">
               <div className="flex flex-wrap items-start justify-between gap-3">
@@ -612,13 +1194,13 @@ export function OpenClawDeployPanel(props: OpenClawDeployPanelProps) {
         </div>
       )}
 
-      {(message || error || localStatus?.lastError) && (
+      {(message || error || localStatus?.lastError || remoteStatus?.lastError) && (
         <div className={`mt-4 rounded-[12px] border px-3 py-2 text-[12px] ${
-          error || localStatus?.lastError
+          error || localStatus?.lastError || remoteStatus?.lastError
             ? 'border-red-400/20 bg-red-400/[0.06] text-red-200'
             : 'border-emerald-500/20 bg-emerald-500/[0.06] text-emerald-200'
         }`}>
-          {error || localStatus?.lastError || message}
+          {error || localStatus?.lastError || remoteStatus?.lastError || message}
         </div>
       )}
     </div>