@swarmclawai/swarmclaw 0.7.2 → 0.7.3

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

@@ -1,8 +1,9 @@
 'use client'
 
-import { useCallback, useEffect, useState } from 'react'
+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 +30,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 +74,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 +115,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 +188,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 ?? 120}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 +232,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 +246,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 +260,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 +274,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 +283,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 +293,7 @@ function OverviewTab({ agent, onEditAgent, onClearHistory, onDeleteAgent, onDele
               </>
             )}
           </div>
-        </>
+        </div>
       )}
     </div>
   )
@@ -277,7 +337,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 +356,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 +389,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,8 +414,8 @@ 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
             {agent.heartbeatModel && ` (${agent.heartbeatModel})`}
@@ -363,21 +423,21 @@ function AdvancedTab({ agent }: { agent: Agent }) {
         </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/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 ── */

package/src/components/chat/chat-area.tsx

@@ -22,12 +22,20 @@ import { Dropdown, DropdownItem } from '@/components/shared/dropdown'
 import { ConfirmDialog } from '@/components/shared/confirm-dialog'
 import { speak } from '@/lib/tts'
 import { api } from '@/lib/api-client'
+import { messagesDiffer } from '@/lib/chat-streaming-state'
 
-const PROMPT_SUGGESTIONS = [
+const DIRECT_PROMPT_SUGGESTIONS = [
   { text: 'What can you help me with?', icon: 'book', gradient: 'from-[#6366F1]/10 to-[#818CF8]/5' },
+  { text: 'Help me choose the right agent for this', icon: 'bot', gradient: 'from-[#34D399]/10 to-[#6EE7B7]/5' },
   { text: 'Help me set up a new connector', icon: 'link', gradient: 'from-[#EC4899]/10 to-[#F472B6]/5' },
-  { text: 'Create a new agent for me', icon: 'bot', gradient: 'from-[#34D399]/10 to-[#6EE7B7]/5' },
-  { text: 'Schedule a recurring task', icon: 'check', gradient: 'from-[#F59E0B]/10 to-[#FBBF24]/5' },
+  { text: 'Summarize what needs attention in this workspace', icon: 'check', gradient: 'from-[#F59E0B]/10 to-[#FBBF24]/5' },
+]
+
+const AGENT_PROMPT_SUGGESTIONS = [
+  { text: 'Give me a quick overview of what you can help with', icon: 'book', gradient: 'from-[#6366F1]/10 to-[#818CF8]/5' },
+  { text: 'Review what needs attention right now', icon: 'check', gradient: 'from-[#F59E0B]/10 to-[#FBBF24]/5' },
+  { text: 'Summarize our recent context before we continue', icon: 'link', gradient: 'from-[#EC4899]/10 to-[#F472B6]/5' },
+  { text: 'Help me map the next best step', icon: 'bot', gradient: 'from-[#34D399]/10 to-[#6EE7B7]/5' },
 ]
 
 export function ChatArea() {
@@ -52,6 +60,10 @@ export function ChatArea() {
   const sidebarOpen = useAppStore((s) => s.sidebarOpen)
   const setSidebarOpen = useAppStore((s) => s.setSidebarOpen)
   const currentAgent = session?.agentId ? agents[session.agentId] ?? null : null
+  const promptSuggestions = useMemo(
+    () => (currentAgent ? AGENT_PROMPT_SUGGESTIONS : DIRECT_PROMPT_SUGGESTIONS),
+    [currentAgent],
+  )
 
   const voice = useVoiceConversation()
   const handleVoiceToggle = useCallback(() => {
@@ -140,13 +152,12 @@ export function ChatArea() {
     }
   }, [sessionId])
 
-  // Auto-poll messages for orchestrated or server-active sessions
-  const isOrchestrated = session?.sessionType === 'orchestrated'
+  // Auto-poll messages for sessions that are actively running on the server
   const isServerActive = session?.active === true
   const isOngoingMonitored = appSettings.loopMode === 'ongoing' && !!session?.plugins?.length
-  const shouldPollMessages = !!sessionId && (isOrchestrated || isServerActive || isOngoingMonitored)
-  const messagesLenRef = useRef(messages.length)
-  messagesLenRef.current = messages.length
+  const shouldPollMessages = !!sessionId && (isServerActive || isOngoingMonitored)
+  const messagesRef = useRef(messages)
+  messagesRef.current = messages
   const isServerActiveRef = useRef(isServerActive)
   isServerActiveRef.current = isServerActive
   const ttsEnabledRef = useRef(ttsEnabled)
@@ -156,8 +167,9 @@ export function ChatArea() {
     if (!sessionId) return
     try {
       const msgs = await fetchMessages(sessionId)
-      if (msgs.length !== messagesLenRef.current) {
-        const newMsgs = msgs.length > messagesLenRef.current ? msgs.slice(messagesLenRef.current) : []
+      const previous = messagesRef.current
+      if (messagesDiffer(msgs, previous)) {
+        const newMsgs = msgs.length > previous.length ? msgs.slice(previous.length) : []
         setMessages(msgs)
         if (ttsEnabledRef.current && typeof document !== 'undefined' && document.visibilityState === 'visible') {
           const latestAssistant = [...newMsgs].reverse().find((m) => {
@@ -385,15 +397,19 @@ export function ChatArea() {
             <h1 className="font-display text-[28px] md:text-[36px] font-800 leading-[1.1] tracking-[-0.04em] mb-3">
               Hi{currentUser ? ', ' : ' '}<span className="text-accent-bright">{currentUser || 'there'}</span>
               <br />
-              <span className="text-text-2">How can I help?</span>
+              <span className="text-text-2">
+                {currentAgent ? `Start with ${currentAgent.name}` : 'Start the conversation'}
+              </span>
             </h1>
             <p className="text-[13px] text-text-3 mt-2">
-              Pick a prompt or type your own below
+              {currentAgent
+                ? `Ask ${currentAgent.name} anything, hand over work, or start with one of these openers.`
+                : 'Pick a prompt or type your own below.'}
             </p>
           </div>
 
           <div className="relative grid grid-cols-2 md:grid-cols-4 gap-3 max-w-[640px] w-full mb-6">
-            {PROMPT_SUGGESTIONS.map((prompt, i) => (
+            {promptSuggestions.map((prompt, i) => (
               <button
                 key={prompt.text}
                 onClick={() => handlePrompt(prompt.text)}

package/src/components/chat/chat-card.tsx

@@ -66,6 +66,9 @@ export function ChatCard({ session, active, onClick }: Props) {
     : 'No messages'
   const providerLabel = PROVIDER_LABELS[session.provider] || session.provider
   const agent = session.agentId ? agents[session.agentId] : null
+  const displayName = session.shortcutForAgentId && agent?.id === session.shortcutForAgentId
+    ? agent.name
+    : session.name
   const connector = getSessionConnector(session, connectors)
   const loopIsOngoing = appSettings.loopMode === 'ongoing'
   const explicitOptIn = session.heartbeatEnabled === true || agent?.heartbeatEnabled === true
@@ -109,26 +112,7 @@ export function ChatCard({ session, active, onClick }: Props) {
             title={`${connector.name} (${connector.platform})`}
           />
         )}
-        <span className="font-display text-[14px] font-600 truncate flex-1 tracking-[-0.01em]">{session.name}</span>
-        {session.mainLoopState?.status && session.mainLoopState.status !== 'idle' && (
-          <span className={`shrink-0 flex items-center gap-1 text-[9px] font-600 uppercase tracking-wider px-1.5 py-0.5 rounded-[5px] ${
-            session.mainLoopState.status === 'progress' ? 'text-blue-400/90 bg-blue-400/[0.08]'
-            : session.mainLoopState.status === 'blocked' ? 'text-amber-400/90 bg-amber-400/[0.08]'
-            : 'text-emerald-400/90 bg-emerald-400/[0.08]'
-          }`}>
-            <span className={`w-[5px] h-[5px] rounded-full ${
-              session.mainLoopState.status === 'progress' ? 'bg-blue-400'
-              : session.mainLoopState.status === 'blocked' ? 'bg-amber-400'
-              : 'bg-emerald-400'
-            }`} />
-            {session.mainLoopState.status}
-          </span>
-        )}
-        {session.sessionType === 'orchestrated' && (
-          <span className="shrink-0 text-[10px] font-600 uppercase tracking-wider text-amber-400/80 bg-amber-400/[0.08] px-2 py-0.5 rounded-[6px]">
-            AI
-          </span>
-        )}
+        <span className="font-display text-[14px] font-600 truncate flex-1 tracking-[-0.01em]">{displayName}</span>
         {providerLabel && (
           <span className="shrink-0 text-[10px] font-600 uppercase tracking-wider text-text-3/70 bg-white/[0.03] px-2 py-0.5 rounded-[6px]">
             {providerLabel}