@swarmclawai/swarmclaw 0.7.2 → 0.7.4

package/src/components/agents/inspector-panel.tsx

@@ -1,8 +1,10 @@
 'use client'
 
-import { useCallback, useEffect, useState } from 'react'
+import { DEFAULT_HEARTBEAT_INTERVAL_SEC } from '@/lib/heartbeat-defaults'
+import { useCallback, useEffect, useState, type ReactNode } from 'react'
 import type { Agent } from '@/types'
 import { useAppStore } from '@/stores/use-app-store'
+import { AgentAvatar } from './agent-avatar'
 import { AgentFilesEditor } from './agent-files-editor'
 import { OpenClawSkillsPanel } from './openclaw-skills-panel'
 import { PermissionPresetSelector } from './permission-preset-selector'
@@ -29,6 +31,24 @@ const TABS: { id: InspectorTab; label: string; openclawOnly?: boolean }[] = [
   { id: 'advanced', label: 'Advanced' },
 ]
 
+const PROVIDER_LABELS: Record<string, string> = {
+  'claude-cli': 'Claude CLI',
+  'codex-cli': 'Codex CLI',
+  'opencode-cli': 'OpenCode CLI',
+  openai: 'OpenAI',
+  anthropic: 'Anthropic',
+  openclaw: 'OpenClaw',
+  ollama: 'Ollama',
+}
+
+function panelCardClass(className = '') {
+  return `rounded-[16px] border border-white/[0.06] bg-white/[0.03] shadow-[inset_0_1px_0_rgba(255,255,255,0.04)] ${className}`.trim()
+}
+
+function SectionLabel({ children }: { children: ReactNode }) {
+  return <label className="block text-[11px] font-700 uppercase tracking-[0.16em] text-text-3/45 mb-2">{children}</label>
+}
+
 export function InspectorPanel({ agent, onEditAgent, onClearHistory, onDeleteAgent, onDeleteChat, isMainChat }: Props) {
   const inspectorTab = useAppStore((s) => s.inspectorTab)
   const setInspectorTab = useAppStore((s) => s.setInspectorTab)
@@ -55,15 +75,40 @@ export function InspectorPanel({ agent, onEditAgent, onClearHistory, onDeleteAge
   }, [setInspectorOpen])
 
   const agentSchedules = Object.values(schedules).filter((s) => s.agentId === agent.id)
+  const providerLabel = PROVIDER_LABELS[agent.provider] || agent.provider.replace(/-/g, ' ')
 
   return (
-    <div className="w-[400px] shrink-0 border-l border-white/[0.06] bg-bg flex flex-col h-full overflow-hidden fade-up-delay">
+    <div className="w-[420px] shrink-0 border-l border-white/[0.06] bg-bg flex flex-col h-full overflow-hidden fade-up-delay"
+      style={{ background: 'radial-gradient(circle at top right, rgba(66, 211, 255, 0.06), transparent 30%), linear-gradient(180deg, rgba(255,255,255,0.02), rgba(255,255,255,0))' }}>
       {/* Header */}
-      <div className="flex items-center justify-between px-4 py-3 border-b border-white/[0.06] shrink-0">
-        <h3 className="font-display text-[14px] font-600 text-text truncate">{agent.name}</h3>
+      <div className="px-4 pt-4 pb-3 border-b border-white/[0.06] shrink-0 bg-black/[0.12]">
+        <div className="flex items-start gap-3">
+          <AgentAvatar seed={agent.avatarSeed || null} avatarUrl={agent.avatarUrl} name={agent.name} size={40} />
+          <div className="min-w-0 flex-1">
+            <div className="flex items-center gap-2 min-w-0">
+              <h3 className="font-display text-[16px] font-700 text-text truncate tracking-[-0.02em]">{agent.name}</h3>
+              {agent.heartbeatEnabled && (
+                <span className="inline-flex items-center gap-1 rounded-[7px] border border-emerald-400/15 bg-emerald-400/10 px-2 py-0.5 text-[10px] font-700 uppercase tracking-[0.12em] text-emerald-300">
+                  <span className="w-1.5 h-1.5 rounded-full bg-emerald-400" />
+                  Heartbeat
+                </span>
+              )}
+            </div>
+            <div className="mt-1 flex flex-wrap items-center gap-1.5">
+              <span className="inline-flex items-center rounded-[8px] border border-white/[0.06] bg-white/[0.03] px-2 py-1 text-[10px] font-600 text-text-3/70">
+                {providerLabel}
+              </span>
+              <span className="inline-flex max-w-[180px] items-center rounded-[8px] border border-white/[0.06] bg-white/[0.03] px-2 py-1 text-[10px] font-mono text-text-3/70 truncate">
+                {agent.model || 'Default model'}
+              </span>
+              <span className="inline-flex items-center rounded-[8px] border border-white/[0.06] bg-white/[0.03] px-2 py-1 text-[10px] font-600 text-text-3/70">
+                {(agent.plugins?.length ?? 0)} plugins
+              </span>
+            </div>
+          </div>
         <button
           onClick={() => setInspectorOpen(false)}
-          className="p-1 rounded-[6px] text-text-3/50 hover:text-text-3 bg-transparent border-none cursor-pointer transition-all hover:bg-white/[0.04]"
+          className="p-1.5 rounded-[8px] text-text-3/50 hover:text-text-3 bg-transparent border-none cursor-pointer transition-all hover:bg-white/[0.04]"
           aria-label="Close inspector"
         >
           <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round">
@@ -71,26 +116,29 @@ export function InspectorPanel({ agent, onEditAgent, onClearHistory, onDeleteAge
             <line x1="6" y1="6" x2="18" y2="18" />
           </svg>
         </button>
+        </div>
       </div>
 
       {/* Tab bar */}
-      <div className="flex gap-0.5 px-3 pt-2 pb-1 overflow-x-auto shrink-0" role="tablist">
+      <div className="px-4 py-3 shrink-0">
+      <div className="flex gap-1 rounded-[12px] border border-white/[0.06] bg-black/[0.12] p-1 overflow-x-auto" role="tablist">
         {visibleTabs.map((tab) => (
           <button
             key={tab.id}
             role="tab"
             onClick={() => setInspectorTab(tab.id)}
             aria-selected={inspectorTab === tab.id}
-            className={`px-2.5 py-1.5 rounded-[8px] text-[11px] font-600 cursor-pointer transition-all whitespace-nowrap focus-visible:ring-1 focus-visible:ring-accent-bright/50
+            className={`px-3 py-1.5 rounded-[9px] text-[11px] font-700 cursor-pointer transition-all whitespace-nowrap focus-visible:ring-1 focus-visible:ring-accent-bright/50
               ${inspectorTab === tab.id
-                ? 'bg-accent-soft text-accent-bright'
-                : 'bg-transparent text-text-3 hover:text-text-2'}`}
+                ? 'bg-white/[0.08] text-text'
+                : 'bg-transparent text-text-3/65 hover:text-text-2'}`}
             style={{ fontFamily: 'inherit' }}
           >
             {tab.label}
           </button>
         ))}
       </div>
+      </div>
 
       {/* Tab content */}
       <div className="flex-1 min-h-0 overflow-y-auto">
@@ -141,30 +189,43 @@ interface OverviewTabProps {
 }
 
 function OverviewTab({ agent, onEditAgent, onClearHistory, onDeleteAgent, onDeleteChat, isMainChat }: OverviewTabProps) {
+  const summaryStats = [
+    { label: 'Provider', value: PROVIDER_LABELS[agent.provider] || agent.provider.replace(/-/g, ' ') },
+    { label: 'Model', value: agent.model || 'Default' },
+    { label: 'Plugins', value: String(agent.plugins?.length ?? 0) },
+    { label: 'Heartbeat', value: agent.heartbeatEnabled ? `Every ${agent.heartbeatIntervalSec ?? DEFAULT_HEARTBEAT_INTERVAL_SEC}s` : 'Off' },
+  ]
+
   return (
     <div className="p-4 flex flex-col gap-4">
-      <div>
-        <label className="block text-[11px] font-600 uppercase tracking-wider text-text-3/50 mb-1">Description</label>
-        <p className="text-[13px] text-text-2">{agent.description || 'No description'}</p>
-      </div>
-      <div>
-        <label className="block text-[11px] font-600 uppercase tracking-wider text-text-3/50 mb-1">Provider / Model</label>
-        <p className="text-[13px] text-text-2 font-mono">{agent.provider} / {agent.model || 'default'}</p>
+      <div className={panelCardClass('p-4 bg-[linear-gradient(180deg,rgba(255,255,255,0.04),rgba(255,255,255,0.02))]')}>
+        <SectionLabel>Overview</SectionLabel>
+        <p className="text-[14px] text-text-2 leading-relaxed">
+          {agent.description || 'No description yet. Use the agent editor to define what this agent is for.'}
+        </p>
+        <div className="mt-4 grid grid-cols-2 gap-2">
+          {summaryStats.map((item) => (
+            <div key={item.label} className="rounded-[12px] border border-white/[0.06] bg-black/[0.14] px-3 py-2.5">
+              <div className="text-[10px] font-700 uppercase tracking-[0.14em] text-text-3/45">{item.label}</div>
+              <div className="mt-1 text-[12px] text-text-2 font-medium break-words">{item.value}</div>
+            </div>
+          ))}
+        </div>
       </div>
       {agent.systemPrompt && (
-        <div>
-          <label className="block text-[11px] font-600 uppercase tracking-wider text-text-3/50 mb-1">System Prompt</label>
-          <p className="text-[12px] text-text-3 bg-white/[0.02] rounded-[8px] p-2.5 border border-white/[0.04] max-h-[200px] overflow-y-auto whitespace-pre-wrap font-mono">
+        <div className={panelCardClass('p-4')}>
+          <SectionLabel>System Prompt</SectionLabel>
+          <p className="text-[12px] text-text-3 bg-black/[0.14] rounded-[12px] p-3 border border-white/[0.04] max-h-[220px] overflow-y-auto whitespace-pre-wrap font-mono leading-relaxed">
             {agent.systemPrompt}
           </p>
         </div>
       )}
       {agent.capabilities && agent.capabilities.length > 0 && (
-        <div>
-          <label className="block text-[11px] font-600 uppercase tracking-wider text-text-3/50 mb-1">Capabilities</label>
-          <div className="flex flex-wrap gap-1">
+        <div className={panelCardClass('p-4')}>
+          <SectionLabel>Capabilities</SectionLabel>
+          <div className="flex flex-wrap gap-1.5">
             {agent.capabilities.map((cap) => (
-              <span key={cap} className="px-2 py-0.5 rounded-[6px] text-[11px] font-600 bg-accent-soft text-accent-bright">
+              <span key={cap} className="px-2.5 py-1 rounded-[8px] text-[11px] font-700 bg-accent-soft/70 text-accent-bright border border-accent-bright/10">
                 {cap}
               </span>
             ))}
@@ -172,11 +233,11 @@ function OverviewTab({ agent, onEditAgent, onClearHistory, onDeleteAgent, onDele
         </div>
       )}
       {agent.plugins && agent.plugins.length > 0 && (
-        <div>
-          <label className="block text-[11px] font-600 uppercase tracking-wider text-text-3/50 mb-1">Plugins</label>
-          <div className="flex flex-wrap gap-1">
+        <div className={panelCardClass('p-4')}>
+          <SectionLabel>Plugins</SectionLabel>
+          <div className="flex flex-wrap gap-1.5">
             {agent.plugins.map((tool) => (
-              <span key={tool} className="px-2 py-0.5 rounded-[6px] text-[11px] font-600 bg-sky-400/[0.08] text-sky-400/70">
+              <span key={tool} className="px-2.5 py-1 rounded-[8px] text-[11px] font-700 bg-sky-400/[0.08] text-sky-300 border border-sky-400/[0.08]">
                 {tool}
               </span>
             ))}
@@ -186,13 +247,13 @@ function OverviewTab({ agent, onEditAgent, onClearHistory, onDeleteAgent, onDele
 
       {/* Actions */}
       {(onEditAgent || onClearHistory || onDeleteAgent || onDeleteChat) && (
-        <>
-          <div className="border-t border-white/[0.06] mt-2" />
+        <div className={panelCardClass('p-4')}>
+          <SectionLabel>Actions</SectionLabel>
           <div className="flex flex-col gap-2">
             {onEditAgent && (
               <button
                 onClick={onEditAgent}
-                className="w-full px-3 py-2 rounded-[8px] text-[12px] font-600 text-accent-bright bg-accent-soft/50 border border-accent-bright/10 cursor-pointer transition-all hover:bg-accent-soft"
+                className="w-full px-3 py-2.5 rounded-[10px] text-[12px] font-700 text-accent-bright bg-accent-soft/50 border border-accent-bright/10 cursor-pointer transition-all hover:bg-accent-soft text-left"
                 style={{ fontFamily: 'inherit' }}
               >
                 Edit Agent
@@ -200,12 +261,12 @@ function OverviewTab({ agent, onEditAgent, onClearHistory, onDeleteAgent, onDele
             )}
             {(onClearHistory || onDeleteAgent || onDeleteChat) && (
               <>
-                <label className="block text-[11px] font-600 uppercase tracking-wider text-red-400/50 mt-2">Danger Zone</label>
+                <SectionLabel>Danger Zone</SectionLabel>
                 <div className="flex flex-col gap-1.5">
                   {onClearHistory && (
                     <button
                       onClick={onClearHistory}
-                      className="w-full px-3 py-2 rounded-[8px] text-[12px] font-600 text-red-400/80 bg-red-400/[0.04] border border-red-400/[0.08] cursor-pointer transition-all hover:bg-red-400/[0.08] hover:text-red-400 text-left"
+                      className="w-full px-3 py-2.5 rounded-[10px] text-[12px] font-700 text-red-400/80 bg-red-400/[0.04] border border-red-400/[0.08] cursor-pointer transition-all hover:bg-red-400/[0.08] hover:text-red-400 text-left"
                       style={{ fontFamily: 'inherit' }}
                     >
                       Clear History
@@ -214,7 +275,7 @@ function OverviewTab({ agent, onEditAgent, onClearHistory, onDeleteAgent, onDele
                   {onDeleteAgent && !isMainChat && (
                     <button
                       onClick={onDeleteAgent}
-                      className="w-full px-3 py-2 rounded-[8px] text-[12px] font-600 text-red-400/80 bg-red-400/[0.04] border border-red-400/[0.08] cursor-pointer transition-all hover:bg-red-400/[0.08] hover:text-red-400 text-left"
+                      className="w-full px-3 py-2.5 rounded-[10px] text-[12px] font-700 text-red-400/80 bg-red-400/[0.04] border border-red-400/[0.08] cursor-pointer transition-all hover:bg-red-400/[0.08] hover:text-red-400 text-left"
                       style={{ fontFamily: 'inherit' }}
                     >
                       Delete Agent
@@ -223,7 +284,7 @@ function OverviewTab({ agent, onEditAgent, onClearHistory, onDeleteAgent, onDele
                   {onDeleteChat && !isMainChat && (
                     <button
                       onClick={onDeleteChat}
-                      className="w-full px-3 py-2 rounded-[8px] text-[12px] font-600 text-red-400/80 bg-red-400/[0.04] border border-red-400/[0.08] cursor-pointer transition-all hover:bg-red-400/[0.08] hover:text-red-400 text-left"
+                      className="w-full px-3 py-2.5 rounded-[10px] text-[12px] font-700 text-red-400/80 bg-red-400/[0.04] border border-red-400/[0.08] cursor-pointer transition-all hover:bg-red-400/[0.08] hover:text-red-400 text-left"
                       style={{ fontFamily: 'inherit' }}
                     >
                       Delete Chat
@@ -233,7 +294,7 @@ function OverviewTab({ agent, onEditAgent, onClearHistory, onDeleteAgent, onDele
               </>
             )}
           </div>
-        </>
+        </div>
       )}
     </div>
   )
@@ -277,7 +338,7 @@ function AutomationsTab({ schedules, agent }: { schedules: Array<{ id: string; n
     <div className="p-4 flex flex-col gap-3">
       {/* Local schedules */}
       {schedules.map((s) => (
-        <div key={s.id} className="py-2 px-3 rounded-[10px] bg-white/[0.02] border border-white/[0.04]">
+        <div key={s.id} className={panelCardClass('py-2.5 px-3.5')}>
           <div className="flex items-center gap-2">
             <span className="text-[13px] font-600 text-text truncate flex-1">{s.name}</span>
             <span className={`text-[10px] font-600 uppercase tracking-wider px-1.5 py-0.5 rounded-[4px]
@@ -296,7 +357,7 @@ function AutomationsTab({ schedules, agent }: { schedules: Array<{ id: string; n
         <>
           {cronLoading && <div className="text-[12px] text-text-3/50">Loading gateway crons...</div>}
           {gatewayCrons.map((c) => (
-            <div key={c.id} className="py-2 px-3 rounded-[10px] bg-white/[0.02] border border-white/[0.04]">
+            <div key={c.id} className={panelCardClass('py-2.5 px-3.5')}>
               <div className="flex items-center gap-2">
                 <span className="text-[13px] font-600 text-text truncate flex-1">{c.name}</span>
                 <span className={`text-[10px] font-600 uppercase tracking-wider px-1.5 py-0.5 rounded-[4px]
@@ -329,7 +390,7 @@ function AutomationsTab({ schedules, agent }: { schedules: Array<{ id: string; n
       )}
 
       {!schedules.length && !gatewayCrons.length && !cronLoading && !showCronForm && (
-        <div className="text-[13px] text-text-3/50">No automations linked to this agent.</div>
+        <div className={panelCardClass('p-4 text-[13px] text-text-3/50')}>No automations linked to this agent.</div>
       )}
     </div>
   )
@@ -354,30 +415,30 @@ function AdvancedTab({ agent }: { agent: Agent }) {
       )}
 
       {agent.heartbeatEnabled && (
-        <div>
-          <label className="block text-[11px] font-600 uppercase tracking-wider text-text-3/50 mb-1">Heartbeat</label>
+        <div className={panelCardClass('p-4')}>
+          <SectionLabel>Heartbeat</SectionLabel>
           <p className="text-[13px] text-text-2">
-            Every {agent.heartbeatIntervalSec ?? 120}s
+            Every {agent.heartbeatIntervalSec ?? DEFAULT_HEARTBEAT_INTERVAL_SEC}s
             {agent.heartbeatModel && ` (${agent.heartbeatModel})`}
           </p>
         </div>
       )}
       {agent.thinkingLevel && (
-        <div>
-          <label className="block text-[11px] font-600 uppercase tracking-wider text-text-3/50 mb-1">Thinking Level</label>
+        <div className={panelCardClass('p-4')}>
+          <SectionLabel>Thinking Level</SectionLabel>
           <p className="text-[13px] text-text-2 capitalize">{agent.thinkingLevel}</p>
         </div>
       )}
-      <div>
-        <label className="block text-[11px] font-600 uppercase tracking-wider text-text-3/50 mb-1">Agent ID</label>
+      <div className={panelCardClass('p-4')}>
+        <SectionLabel>Agent ID</SectionLabel>
         <p className="text-[12px] text-text-3 font-mono select-all">{agent.id}</p>
       </div>
-      <div>
-        <label className="block text-[11px] font-600 uppercase tracking-wider text-text-3/50 mb-1">Created</label>
+      <div className={panelCardClass('p-4')}>
+        <SectionLabel>Created</SectionLabel>
         <p className="text-[12px] text-text-3">{new Date(agent.createdAt).toLocaleString()}</p>
       </div>
-      <div>
-        <label className="block text-[11px] font-600 uppercase tracking-wider text-text-3/50 mb-1">Updated</label>
+      <div className={panelCardClass('p-4')}>
+        <SectionLabel>Updated</SectionLabel>
         <p className="text-[12px] text-text-3">{new Date(agent.updatedAt).toLocaleString()}</p>
       </div>
     </div>

package/src/components/agents/sandbox-env-panel.tsx

@@ -51,7 +51,10 @@ export function SandboxEnvPanel() {
 
   return (
     <div className="flex flex-col gap-2">
-      <label className="block text-[11px] font-600 uppercase tracking-wider text-text-3/50">Sandbox Env Allowlist</label>
+      <label className="block text-[11px] font-600 uppercase tracking-wider text-text-3/50">OpenClaw Sandbox Env Allowlist</label>
+      <p className="text-[12px] text-text-3/50">
+        Applies to OpenClaw gateway Docker sandboxes only. It does not affect SwarmClaw&apos;s local <code className="font-mono">sandbox_exec</code> tool.
+      </p>
       <div className="flex flex-col gap-1">
         {available.map((key) => (
           <label key={key} className="flex items-center gap-2 py-1 px-2 rounded-[8px] hover:bg-white/[0.02] cursor-pointer transition-colors">

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

@@ -3,7 +3,6 @@
 import { useState, useEffect } from 'react'
 import { setStoredAccessKey } from '@/lib/api-client'
 import { fetchWithTimeout } from '@/lib/fetch-timeout'
-import { copyTextToClipboard } from '@/lib/clipboard'
 
 interface AccessKeyGateProps {
   onAuthenticated: () => void
@@ -19,8 +18,6 @@ export function AccessKeyGate({ onAuthenticated }: AccessKeyGateProps) {
 
   // First-time setup state
   const [firstTime, setFirstTime] = useState(false)
-  const [generatedKey, setGeneratedKey] = useState('')
-  const [copied, setCopied] = useState(false)
 
   useEffect(() => {
     let cancelled = false
@@ -28,9 +25,8 @@ export function AccessKeyGate({ onAuthenticated }: AccessKeyGateProps) {
       try {
         const res = await fetchWithTimeout('/api/auth', {}, AUTH_CHECK_TIMEOUT_MS)
         const data = await res.json().catch(() => ({}))
-        if (!cancelled && data.firstTime && data.key) {
+        if (!cancelled && data.firstTime) {
           setFirstTime(true)
-          setGeneratedKey(data.key)
         }
       } catch (err) {
         console.error('Auth check failed:', err)
@@ -41,38 +37,6 @@ export function AccessKeyGate({ onAuthenticated }: AccessKeyGateProps) {
     return () => { cancelled = true }
   }, [])
 
-  const handleCopyKey = async () => {
-    try {
-      const copiedKey = await copyTextToClipboard(generatedKey)
-      if (!copiedKey) return
-      setCopied(true)
-      setTimeout(() => setCopied(false), 2000)
-    } catch {
-      // Fallback: select the text
-    }
-  }
-
-  const handleClaimKey = async () => {
-    setLoading(true)
-    try {
-      const res = await fetchWithTimeout('/api/auth', {
-        method: 'POST',
-        headers: { 'Content-Type': 'application/json' },
-        body: JSON.stringify({ key: generatedKey }),
-      }, AUTH_CHECK_TIMEOUT_MS)
-      if (res.ok) {
-        setStoredAccessKey(generatedKey)
-        onAuthenticated()
-      } else {
-        setError('Invalid access key')
-      }
-    } catch {
-      setError('Connection failed')
-    } finally {
-      setLoading(false)
-    }
-  }
-
   const handleSubmit = async (e: React.FormEvent) => {
     e.preventDefault()
     const trimmed = key.trim()
@@ -148,77 +112,52 @@ export function AccessKeyGate({ onAuthenticated }: AccessKeyGateProps) {
         </div>
 
         {firstTime ? (
-          /* ── First-time setup: show the generated key ── */
+          /* ── First-time setup: prompt for the key without disclosing it over HTTP ── */
           <>
             <div style={{ animation: 'fade-up 0.6s var(--ease-spring) 0.1s both' }}>
               <h1 className="font-display text-[36px] font-800 leading-[1.05] tracking-[-0.04em] mb-3">
-                Your Access Key
+                First-Time Setup
               </h1>
               <p className="text-[14px] text-text-2 mb-8">
-                This key was generated for your server. Copy it somewhere safe — you&apos;ll need it to connect from other devices.
+                Enter the access key generated for this server. It is shown in the terminal on first launch and stored in <code className="text-text-2">.env.local</code>.
               </p>
             </div>
-
-            {/* Key display */}
-            <div className="mb-3" style={{ animation: 'fade-up 0.6s var(--ease-spring) 0.2s both' }}>
-              <div
-                className="inline-flex items-center gap-3 px-5 py-3.5 rounded-[14px] border border-white/[0.08] bg-surface
-                  cursor-pointer hover:border-accent-bright/20 transition-all duration-200"
-                onClick={handleCopyKey}
-              >
-                <code className="text-[15px] font-mono text-accent-bright tracking-wide select-all">
-                  {generatedKey}
-                </code>
-                <svg
-                  width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor"
-                  strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"
-                  className="text-text-3 shrink-0"
-                >
-                  {copied ? (
-                    <path d="M20 6L9 17l-5-5" />
-                  ) : (
-                    <>
-                      <rect x="9" y="9" width="13" height="13" rx="2" ry="2" />
-                      <path d="M5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1" />
-                    </>
-                  )}
-                </svg>
+            <form onSubmit={handleSubmit} className="flex flex-col items-center gap-4">
+              <div style={{ animation: 'fade-up 0.6s var(--ease-spring) 0.2s both', width: '100%', display: 'flex', justifyContent: 'center' }}>
+                <input
+                  type="password"
+                  value={key}
+                  onChange={(e) => { setKey(e.target.value); setError('') }}
+                  placeholder="Paste access key"
+                  autoFocus
+                  autoComplete="off"
+                  className="w-full max-w-[320px] px-6 py-4 rounded-[16px] border border-white/[0.08] bg-surface
+                    text-text text-[16px] text-center font-mono outline-none
+                    transition-all duration-200 placeholder:text-text-3/70
+                    focus:border-accent-bright/30 focus:shadow-[0_0_30px_rgba(99,102,241,0.1)]"
+                />
               </div>
-            </div>
 
-            <div className="relative h-5 mb-8" style={{ animation: 'fade-up 0.6s var(--ease-spring) 0.3s both' }}>
-              <p
-                className="absolute inset-x-0 text-[12px] transition-all duration-300"
-                style={{
-                  opacity: copied ? 0 : 1,
-                  transform: copied ? 'translateY(-4px)' : 'translateY(0)',
-                }}
-              >
-                <span className="text-text-3">Click to copy &middot; Also saved in </span>
-                <code className="text-text-2">.env.local</code>
-              </p>
-              <p
-                className="absolute inset-x-0 text-[12px] text-emerald-400 font-medium transition-all duration-300"
-                style={{
-                  opacity: copied ? 1 : 0,
-                  transform: copied ? 'translateY(0)' : 'translateY(4px)',
-                }}
-              >
-                Key copied to clipboard
+              {error && (
+                <p className="text-[13px] text-red-400" style={{ animation: 'ai-shake 0.5s' }}>{error}</p>
+              )}
+
+              <p className="text-[12px] text-text-3 max-w-[340px]" style={{ animation: 'fade-up 0.6s var(--ease-spring) 0.3s both' }}>
+                The key is never sent back by the server over unauthenticated HTTP anymore. Read it from the launch terminal, or open <code className="text-text-2">.env.local</code> locally.
               </p>
-            </div>
 
-            <div style={{ animation: 'fade-up 0.6s var(--ease-spring) 0.4s both' }}>
-              <button
-                onClick={handleClaimKey}
-                disabled={loading}
-                className="px-12 py-4 rounded-[16px] border-none bg-accent-bright text-white text-[16px] font-display font-600
-                  cursor-pointer hover:brightness-110 active:scale-[0.97] transition-all duration-200
-                  shadow-[0_6px_28px_rgba(99,102,241,0.3)] disabled:opacity-30"
-              >
-                {loading ? 'Connecting...' : 'Continue'}
-              </button>
-            </div>
+              <div style={{ animation: 'fade-up 0.6s var(--ease-spring) 0.4s both' }}>
+                <button
+                  type="submit"
+                  disabled={loading || !key.trim()}
+                  className="px-12 py-4 rounded-[16px] border-none bg-accent-bright text-white text-[16px] font-display font-600
+                    cursor-pointer hover:brightness-110 active:scale-[0.97] transition-all duration-200
+                    shadow-[0_6px_28px_rgba(99,102,241,0.3)] disabled:opacity-30"
+                >
+                  {loading ? 'Connecting...' : 'Connect'}
+                </button>
+              </div>
+            </form>
           </>
         ) : (
           /* ── Returning user: enter key ── */