@swarmclawai/swarmclaw 0.6.0 → 0.6.2

package/src/components/schedules/schedule-sheet.tsx

@@ -5,7 +5,6 @@ import { useAppStore } from '@/stores/use-app-store'
 import { createSchedule, updateSchedule, deleteSchedule } from '@/lib/schedules'
 import { BottomSheet } from '@/components/shared/bottom-sheet'
 import { AgentPickerList } from '@/components/shared/agent-picker-list'
-import { SheetFooter } from '@/components/shared/sheet-footer'
 import { inputClass } from '@/components/shared/form-styles'
 import type { ScheduleType, ScheduleStatus } from '@/types'
 import cronstrue from 'cronstrue'
@@ -18,11 +17,10 @@ const CRON_PRESETS = [
   { label: 'Weekly Mon 9am', cron: '0 9 * * 1' },
 ]
 
-function getNextRuns(cron: string, count: number = 3): Date[] {
+async function getNextRunsAsync(cron: string, count: number = 3): Promise<Date[]> {
   try {
-    // Simple cron parser for next N runs
-    const { parseExpression } = require('cron-parser')
-    const interval = parseExpression(cron)
+    const { CronExpressionParser } = await import('cron-parser')
+    const interval = CronExpressionParser.parse(cron)
     const runs: Date[] = []
     for (let i = 0; i < count; i++) {
       runs.push(interval.next().toDate())
@@ -46,6 +44,9 @@ function formatDate(d: Date): string {
     ' ' + d.toLocaleTimeString([], { hour: '2-digit', minute: '2-digit' })
 }
 
+const STEPS = ['What', 'When', 'Review'] as const
+type Step = 0 | 1 | 2
+
 export function ScheduleSheet() {
   const open = useAppStore((s) => s.scheduleSheetOpen)
   const setOpen = useAppStore((s) => s.setScheduleSheetOpen)
@@ -56,6 +57,7 @@ export function ScheduleSheet() {
   const agents = useAppStore((s) => s.agents)
   const loadAgents = useAppStore((s) => s.loadAgents)
 
+  const [step, setStep] = useState<Step>(0)
   const [name, setName] = useState('')
   const [agentId, setAgentId] = useState('')
   const [taskPrompt, setTaskPrompt] = useState('')
@@ -71,6 +73,7 @@ export function ScheduleSheet() {
   useEffect(() => {
     if (open) {
       loadAgents()
+      setStep(0)
       if (editing) {
         setName(editing.name || '')
         setAgentId(editing.agentId)
@@ -91,10 +94,14 @@ export function ScheduleSheet() {
         setCustomCron(false)
       }
     }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [open, editingId])
 
   const cronHuman = useMemo(() => formatCronHuman(cron), [cron])
-  const nextRuns = useMemo(() => getNextRuns(cron), [cron])
+  const [nextRuns, setNextRuns] = useState<Date[]>([])
+  useEffect(() => {
+    getNextRunsAsync(cron).then(setNextRuns)
+  }, [cron])
 
   const onClose = () => {
     setOpen(false)
@@ -129,161 +136,287 @@ export function ScheduleSheet() {
     }
   }
 
+  // Step validation
+  const step0Valid = name.trim().length > 0 && agentId.length > 0 && taskPrompt.trim().length > 0
+  const step1Valid = scheduleType === 'cron' ? cron.trim().length > 0 : intervalMs > 0
+
+  const selectedAgent = agentId ? agents[agentId] : null
+
   return (
     <BottomSheet open={open} onClose={onClose} wide>
-      <div className="mb-10">
+      <div className="mb-8">
         <h2 className="font-display text-[28px] font-700 tracking-[-0.03em] mb-2">
           {editing ? 'Edit Schedule' : 'New Schedule'}
         </h2>
         <p className="text-[14px] text-text-3">Automate agent tasks on a schedule</p>
       </div>
 
-      <div className="mb-8">
-        <SectionLabel>Name</SectionLabel>
-        <input type="text" value={name} onChange={(e) => setName(e.target.value)} placeholder="e.g. Daily keyword research" className={inputClass} style={{ fontFamily: 'inherit' }} />
-      </div>
-
-      <div className="mb-8">
-        <SectionLabel>Agent</SectionLabel>
-        <AgentPickerList
-          agents={agentList}
-          selected={agentId}
-          onSelect={(id) => setAgentId(id)}
-          showOrchBadge={true}
-        />
-      </div>
-
-      <div className="mb-8">
-        <SectionLabel>Task Prompt</SectionLabel>
-        <textarea
-          value={taskPrompt}
-          onChange={(e) => setTaskPrompt(e.target.value)}
-          placeholder="What should the agent do when triggered?"
-          rows={4}
-          className={`${inputClass} resize-y min-h-[100px]`}
-          style={{ fontFamily: 'inherit' }}
-        />
-      </div>
-
-      <div className="mb-8">
-        <SectionLabel>Schedule Type</SectionLabel>
-        <div className="grid grid-cols-3 gap-3">
-          {(['cron', 'interval', 'once'] as ScheduleType[]).map((t) => (
+      {/* Step indicator */}
+      <div className="flex items-center gap-2 mb-10">
+        {STEPS.map((label, i) => (
+          <div key={label} className="flex items-center gap-2">
+            {i > 0 && <div className={`w-8 h-px ${i <= step ? 'bg-accent-bright/40' : 'bg-white/[0.06]'}`} />}
             <button
-              key={t}
-              onClick={() => setScheduleType(t)}
-              className={`py-3.5 px-4 rounded-[14px] text-center cursor-pointer transition-all duration-200
-                active:scale-[0.97] text-[14px] font-600 capitalize border
-                ${scheduleType === t
-                  ? 'bg-accent-soft border-accent-bright/25 text-accent-bright'
-                  : 'bg-surface border-white/[0.06] text-text-2 hover:bg-surface-2'}`}
+              onClick={() => {
+                // Allow going back, but only forward if valid
+                if (i < step) setStep(i as Step)
+                else if (i === 1 && step === 0 && step0Valid) setStep(1)
+                else if (i === 2 && step === 1 && step1Valid) setStep(2)
+              }}
+              className={`inline-flex items-center gap-2 px-3 py-1.5 rounded-[8px] text-[12px] font-600 cursor-pointer transition-all border-none
+                ${i === step
+                  ? 'bg-accent-soft text-accent-bright'
+                  : i < step
+                    ? 'bg-white/[0.04] text-text-2'
+                    : 'bg-transparent text-text-3/50'}`}
               style={{ fontFamily: 'inherit' }}
             >
-              {t}
+              <span className={`w-5 h-5 rounded-full text-[10px] font-700 flex items-center justify-center
+                ${i === step
+                  ? 'bg-accent-bright text-white'
+                  : i < step
+                    ? 'bg-emerald-400/20 text-emerald-400'
+                    : 'bg-white/[0.06] text-text-3/50'}`}>
+                {i < step ? (
+                  <svg width="10" height="10" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="3" strokeLinecap="round"><polyline points="20 6 9 17 4 12" /></svg>
+                ) : (
+                  i + 1
+                )}
+              </span>
+              {label}
             </button>
-          ))}
-        </div>
+          </div>
+        ))}
       </div>
 
-      {scheduleType === 'cron' && (
-        <div className="mb-8">
-          <SectionLabel>Schedule</SectionLabel>
+      {/* Step 0: What */}
+      {step === 0 && (
+        <div>
+          <div className="mb-8">
+            <SectionLabel>Name</SectionLabel>
+            <input type="text" value={name} onChange={(e) => setName(e.target.value)} placeholder="e.g. Daily keyword research" className={inputClass} style={{ fontFamily: 'inherit' }} />
+          </div>
 
-          {/* Preset buttons */}
-          <div className="flex flex-wrap gap-2 mb-4">
-            {CRON_PRESETS.map((p) => (
-              <button
-                key={p.cron}
-                onClick={() => { setCron(p.cron); setCustomCron(false) }}
-                className={`px-3.5 py-2 rounded-[10px] text-[13px] font-600 cursor-pointer transition-all border
-                  ${cron === p.cron && !customCron
-                    ? 'bg-accent-soft border-accent-bright/25 text-accent-bright'
-                    : 'bg-surface border-white/[0.06] text-text-3 hover:text-text-2'}`}
-                style={{ fontFamily: 'inherit' }}
-              >
-                {p.label}
-              </button>
-            ))}
-            <button
-              onClick={() => setCustomCron(true)}
-              className={`px-3.5 py-2 rounded-[10px] text-[13px] font-600 cursor-pointer transition-all border
-                ${customCron
-                  ? 'bg-accent-soft border-accent-bright/25 text-accent-bright'
-                  : 'bg-surface border-white/[0.06] text-text-3 hover:text-text-2'}`}
+          <div className="mb-8">
+            <SectionLabel>Agent</SectionLabel>
+            <AgentPickerList
+              agents={agentList}
+              selected={agentId}
+              onSelect={(id) => setAgentId(id)}
+              showOrchBadge={true}
+            />
+          </div>
+
+          <div className="mb-8">
+            <SectionLabel>Task Prompt</SectionLabel>
+            <textarea
+              value={taskPrompt}
+              onChange={(e) => setTaskPrompt(e.target.value)}
+              placeholder="What should the agent do when triggered?"
+              rows={4}
+              className={`${inputClass} resize-y min-h-[100px]`}
               style={{ fontFamily: 'inherit' }}
-            >
-              Custom
-            </button>
+            />
           </div>
+        </div>
+      )}
 
-          {/* Custom cron input */}
-          {customCron && (
-            <input type="text" value={cron} onChange={(e) => setCron(e.target.value)} placeholder="0 * * * *" className={`${inputClass} font-mono text-[14px] mb-3`} />
-          )}
+      {/* Step 1: When */}
+      {step === 1 && (
+        <div>
+          <div className="mb-8">
+            <SectionLabel>Schedule Type</SectionLabel>
+            <div className="grid grid-cols-3 gap-3">
+              {(['cron', 'interval', 'once'] as ScheduleType[]).map((t) => (
+                <button
+                  key={t}
+                  onClick={() => setScheduleType(t)}
+                  className={`py-3.5 px-4 rounded-[14px] text-center cursor-pointer transition-all duration-200
+                    active:scale-[0.97] text-[14px] font-600 capitalize border
+                    ${scheduleType === t
+                      ? 'bg-accent-soft border-accent-bright/25 text-accent-bright'
+                      : 'bg-surface border-white/[0.06] text-text-2 hover:bg-surface-2'}`}
+                  style={{ fontFamily: 'inherit' }}
+                >
+                  {t}
+                </button>
+              ))}
+            </div>
+          </div>
 
-          {/* Human-readable preview */}
-          <div className="p-4 rounded-[14px] bg-surface border border-white/[0.06]">
-            <div className="text-[14px] text-text-2 font-600 mb-2">{cronHuman}</div>
-            {cron && (
-              <div className="font-mono text-[12px] text-text-3/50 mb-3">{cron}</div>
-            )}
-            {nextRuns.length > 0 && (
-              <div className="space-y-1.5">
-                <div className="text-[11px] text-text-3/60 uppercase tracking-wider font-600">Next runs</div>
-                {nextRuns.map((d, i) => (
-                  <div key={i} className="text-[12px] text-text-3 font-mono">{formatDate(d)}</div>
+          {scheduleType === 'cron' && (
+            <div className="mb-8">
+              <SectionLabel>Schedule</SectionLabel>
+
+              {/* Preset buttons */}
+              <div className="flex flex-wrap gap-2 mb-4">
+                {CRON_PRESETS.map((p) => (
+                  <button
+                    key={p.cron}
+                    onClick={() => { setCron(p.cron); setCustomCron(false) }}
+                    className={`px-3.5 py-2 rounded-[10px] text-[13px] font-600 cursor-pointer transition-all border
+                      ${cron === p.cron && !customCron
+                        ? 'bg-accent-soft border-accent-bright/25 text-accent-bright'
+                        : 'bg-surface border-white/[0.06] text-text-3 hover:text-text-2'}`}
+                    style={{ fontFamily: 'inherit' }}
+                  >
+                    {p.label}
+                  </button>
                 ))}
+                <button
+                  onClick={() => setCustomCron(true)}
+                  className={`px-3.5 py-2 rounded-[10px] text-[13px] font-600 cursor-pointer transition-all border
+                    ${customCron
+                      ? 'bg-accent-soft border-accent-bright/25 text-accent-bright'
+                      : 'bg-surface border-white/[0.06] text-text-3 hover:text-text-2'}`}
+                  style={{ fontFamily: 'inherit' }}
+                >
+                  Custom
+                </button>
               </div>
-            )}
-          </div>
-        </div>
-      )}
 
-      {scheduleType === 'interval' && (
-        <div className="mb-8">
-          <SectionLabel>Interval (minutes)</SectionLabel>
-          <input
-            type="number"
-            value={Math.round(intervalMs / 60000)}
-            onChange={(e) => setIntervalMs(Math.max(1, parseInt(e.target.value) || 1) * 60000)}
-            className={inputClass}
-            style={{ fontFamily: 'inherit' }}
-          />
+              {/* Custom cron input */}
+              {customCron && (
+                <input type="text" value={cron} onChange={(e) => setCron(e.target.value)} placeholder="0 * * * *" className={`${inputClass} font-mono text-[14px] mb-3`} />
+              )}
+
+              {/* Human-readable preview */}
+              <div className="p-4 rounded-[14px] bg-surface border border-white/[0.06]">
+                <div className="text-[14px] text-text-2 font-600 mb-2">{cronHuman}</div>
+                {cron && (
+                  <div className="font-mono text-[12px] text-text-3/50 mb-3">{cron}</div>
+                )}
+                {nextRuns.length > 0 && (
+                  <div className="space-y-1.5">
+                    <div className="text-[11px] text-text-3/60 uppercase tracking-wider font-600">Next runs</div>
+                    {nextRuns.map((d, i) => (
+                      <div key={i} className="text-[12px] text-text-3 font-mono">{formatDate(d)}</div>
+                    ))}
+                  </div>
+                )}
+              </div>
+            </div>
+          )}
+
+          {scheduleType === 'interval' && (
+            <div className="mb-8">
+              <SectionLabel>Interval (minutes)</SectionLabel>
+              <input
+                type="number"
+                value={Math.round(intervalMs / 60000)}
+                onChange={(e) => setIntervalMs(Math.max(1, parseInt(e.target.value) || 1) * 60000)}
+                className={inputClass}
+                style={{ fontFamily: 'inherit' }}
+              />
+            </div>
+          )}
+
+          {editing && (
+            <div className="mb-8">
+              <SectionLabel>Status</SectionLabel>
+              <div className="flex gap-2">
+                {(['active', 'paused'] as ScheduleStatus[]).map((s) => (
+                  <button
+                    key={s}
+                    onClick={() => setStatus(s)}
+                    className={`px-4 py-2 rounded-[10px] text-[13px] font-600 capitalize cursor-pointer transition-all border
+                      ${status === s
+                        ? 'bg-accent-soft border-accent-bright/25 text-accent-bright'
+                        : 'bg-surface border-white/[0.06] text-text-3'}`}
+                    style={{ fontFamily: 'inherit' }}
+                  >
+                    {s}
+                  </button>
+                ))}
+              </div>
+            </div>
+          )}
         </div>
       )}
 
-      {editing && (
+      {/* Step 2: Review */}
+      {step === 2 && (
         <div className="mb-8">
-          <SectionLabel>Status</SectionLabel>
-          <div className="flex gap-2">
-            {(['active', 'paused'] as ScheduleStatus[]).map((s) => (
-              <button
-                key={s}
-                onClick={() => setStatus(s)}
-                className={`px-4 py-2 rounded-[10px] text-[13px] font-600 capitalize cursor-pointer transition-all border
-                  ${status === s
-                    ? 'bg-accent-soft border-accent-bright/25 text-accent-bright'
-                    : 'bg-surface border-white/[0.06] text-text-3'}`}
-                style={{ fontFamily: 'inherit' }}
-              >
-                {s}
-              </button>
-            ))}
+          <div className="p-5 rounded-[16px] bg-surface border border-white/[0.06] space-y-4">
+            <div>
+              <span className="text-[11px] text-text-3/50 uppercase tracking-wider font-600">Name</span>
+              <div className="text-[14px] text-text font-600 mt-0.5">{name}</div>
+            </div>
+            <div>
+              <span className="text-[11px] text-text-3/50 uppercase tracking-wider font-600">Agent</span>
+              <div className="text-[14px] text-text font-600 mt-0.5">{selectedAgent?.name || agentId}</div>
+            </div>
+            <div>
+              <span className="text-[11px] text-text-3/50 uppercase tracking-wider font-600">Task</span>
+              <div className="text-[13px] text-text-2 mt-0.5 whitespace-pre-wrap">{taskPrompt}</div>
+            </div>
+            <div className="h-px bg-white/[0.06]" />
+            <div>
+              <span className="text-[11px] text-text-3/50 uppercase tracking-wider font-600">Schedule</span>
+              <div className="text-[14px] text-text font-600 mt-0.5 capitalize">{scheduleType}</div>
+              {scheduleType === 'cron' && (
+                <div className="text-[12px] text-text-3 font-mono mt-0.5">{cronHuman} ({cron})</div>
+              )}
+              {scheduleType === 'interval' && (
+                <div className="text-[12px] text-text-3 font-mono mt-0.5">Every {Math.round(intervalMs / 60000)} minutes</div>
+              )}
+              {scheduleType === 'once' && (
+                <div className="text-[12px] text-text-3 font-mono mt-0.5">Run once</div>
+              )}
+            </div>
+            {editing && (
+              <div>
+                <span className="text-[11px] text-text-3/50 uppercase tracking-wider font-600">Status</span>
+                <div className="text-[14px] text-text font-600 mt-0.5 capitalize">{status}</div>
+              </div>
+            )}
           </div>
         </div>
       )}
 
-      <SheetFooter
-        onCancel={onClose}
-        onSave={handleSave}
-        saveLabel={editing ? 'Save' : 'Create'}
-        saveDisabled={!name.trim() || !agentId}
-        left={editing && (
+      {/* Footer */}
+      <div className="flex gap-3 pt-2 border-t border-white/[0.04]">
+        {editing && step === 0 && (
           <button onClick={handleDelete} className="py-3.5 px-6 rounded-[14px] border border-red-500/20 bg-transparent text-red-400 text-[15px] font-600 cursor-pointer hover:bg-red-500/10 transition-all" style={{ fontFamily: 'inherit' }}>
             Delete
           </button>
         )}
-      />
+        {step > 0 && (
+          <button
+            onClick={() => setStep((step - 1) as Step)}
+            className="py-3.5 px-6 rounded-[14px] border border-white/[0.08] bg-transparent text-text-2 text-[15px] font-600 cursor-pointer hover:bg-surface-2 transition-all"
+            style={{ fontFamily: 'inherit' }}
+          >
+            Back
+          </button>
+        )}
+        <div className="flex-1" />
+        <button
+          onClick={onClose}
+          className="py-3.5 px-6 rounded-[14px] border border-white/[0.08] bg-transparent text-text-2 text-[15px] font-600 cursor-pointer hover:bg-surface-2 transition-all"
+          style={{ fontFamily: 'inherit' }}
+        >
+          Cancel
+        </button>
+        {step < 2 ? (
+          <button
+            onClick={() => setStep((step + 1) as Step)}
+            disabled={step === 0 ? !step0Valid : !step1Valid}
+            className="py-3.5 px-8 rounded-[14px] border-none bg-accent-bright text-white text-[15px] font-600 cursor-pointer active:scale-[0.97] disabled:opacity-30 transition-all shadow-[0_4px_20px_rgba(99,102,241,0.25)] hover:brightness-110"
+            style={{ fontFamily: 'inherit' }}
+          >
+            Next
+          </button>
+        ) : (
+          <button
+            onClick={handleSave}
+            className="py-3.5 px-8 rounded-[14px] border-none bg-accent-bright text-white text-[15px] font-600 cursor-pointer active:scale-[0.97] transition-all shadow-[0_4px_20px_rgba(99,102,241,0.25)] hover:brightness-110"
+            style={{ fontFamily: 'inherit' }}
+          >
+            {editing ? 'Save' : 'Create'}
+          </button>
+        )}
+      </div>
     </BottomSheet>
   )
 }

package/src/components/settings/gateway-disconnect-overlay.tsx

@@ -0,0 +1,80 @@
+'use client'
+
+import { useEffect, useRef, useSyncExternalStore } from 'react'
+import { api } from '@/lib/api-client'
+import { useAppStore } from '@/stores/use-app-store'
+
+// Module-level gateway status store with subscribe/getSnapshot for useSyncExternalStore
+let _status: 'connected' | 'disconnected' | null = null
+let _lastCheck = 0
+const _listeners = new Set<() => void>()
+const POLL_INTERVAL = 30_000
+
+function getSnapshot() {
+  return _status
+}
+
+function subscribe(cb: () => void) {
+  _listeners.add(cb)
+  return () => { _listeners.delete(cb) }
+}
+
+async function checkGateway() {
+  try {
+    const res = await api<{ connected: boolean }>('GET', '/openclaw/gateway')
+    _status = res.connected ? 'connected' : 'disconnected'
+  } catch {
+    _status = 'disconnected'
+  }
+  _lastCheck = Date.now()
+  for (const cb of _listeners) cb()
+}
+
+export function useGatewayStatus() {
+  const status = useSyncExternalStore(subscribe, getSnapshot, getSnapshot)
+  const startedRef = useRef(false)
+
+  useEffect(() => {
+    if (startedRef.current) return
+    startedRef.current = true
+    // Initial check if stale
+    if (!_status || Date.now() - _lastCheck >= POLL_INTERVAL) {
+      checkGateway()
+    }
+    const interval = setInterval(checkGateway, POLL_INTERVAL)
+    return () => clearInterval(interval)
+  }, [])
+
+  return status
+}
+
+export function GatewayDisconnectOverlay() {
+  const setActiveView = useAppStore((s) => s.setActiveView)
+  const setSidebarOpen = useAppStore((s) => s.setSidebarOpen)
+
+  return (
+    <div className="absolute inset-0 z-10 flex items-center justify-center bg-bg/60 backdrop-blur-sm">
+      <div className="flex flex-col items-center gap-4 p-8 rounded-[20px] border border-white/[0.06] bg-surface/90 max-w-[320px] text-center">
+        <span className="inline-flex items-center justify-center w-10 h-10 rounded-full bg-red-500/10">
+          <span className="w-3 h-3 rounded-full bg-red-400" />
+        </span>
+        <div>
+          <h3 className="font-display text-[16px] font-600 text-text mb-1">Gateway Disconnected</h3>
+          <p className="text-[13px] text-text-3/60">
+            The OpenClaw gateway is offline. Connect to resume chatting with this agent.
+          </p>
+        </div>
+        <button
+          onClick={() => {
+            setActiveView('settings')
+            setSidebarOpen(true)
+          }}
+          className="px-5 py-2 rounded-[10px] border-none bg-accent-bright text-white text-[13px] font-600 cursor-pointer transition-all hover:brightness-110"
+          style={{ fontFamily: 'inherit' }}
+        >
+          Connect Gateway
+        </button>
+      </div>
+    </div>
+  )
+}

package/src/components/shared/agent-switch-dialog.tsx

@@ -76,7 +76,7 @@ export function AgentSwitchDialog() {
     <Dialog open={open} onOpenChange={setOpen}>
       <DialogContent
         showCloseButton={false}
-        className="sm:max-w-[440px] p-0 bg-[#1a1a2e]/95 backdrop-blur-xl border-white/[0.08] shadow-[0_24px_80px_rgba(0,0,0,0.6)] rounded-[16px] overflow-hidden gap-0"
+        className="sm:max-w-[440px] p-0 bg-surface/95 backdrop-blur-xl border-white/[0.08] shadow-[0_24px_80px_rgba(0,0,0,0.6)] rounded-[16px] overflow-hidden gap-0"
         onKeyDown={handleKeyDown}
       >
         <DialogTitle className="sr-only">Switch Agent</DialogTitle>

package/src/components/shared/chatroom-picker-list.tsx

@@ -0,0 +1,61 @@
+'use client'
+
+import { CheckIcon } from '@/components/shared/check-icon'
+import type { Chatroom } from '@/types'
+
+interface Props {
+  chatrooms: Chatroom[]
+  selected: string
+  onSelect: (chatroomId: string) => void
+  maxHeight?: number
+}
+
+export function ChatroomPickerList({
+  chatrooms,
+  selected,
+  onSelect,
+  maxHeight = 220,
+}: Props) {
+  if (chatrooms.length === 0) {
+    return <p className="text-[13px] text-text-3">No chat rooms created yet.</p>
+  }
+
+  return (
+    <div
+      className="flex flex-col gap-1 rounded-[14px] border border-white/[0.06] bg-surface p-1.5 overflow-y-auto"
+      style={{ maxHeight }}
+    >
+      {chatrooms.map((cr) => {
+        const active = selected === cr.id
+        return (
+          <button
+            key={cr.id}
+            onClick={() => onSelect(cr.id)}
+            className={`relative flex items-center gap-3 px-3 py-2.5 rounded-[10px] cursor-pointer transition-all w-full text-left border-none
+              ${active ? 'bg-accent-soft' : 'bg-transparent hover:bg-white/[0.03]'}`}
+            style={{ fontFamily: 'inherit' }}
+          >
+            {active && (
+              <div className="absolute left-0 top-2 bottom-2 w-[2.5px] rounded-full bg-accent-bright" />
+            )}
+            <div className="w-[28px] h-[28px] rounded-full bg-white/[0.06] flex items-center justify-center shrink-0">
+              <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" className={active ? 'text-accent-bright' : 'text-text-3'}>
+                <path d="M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z" />
+              </svg>
+            </div>
+            <div className="flex-1 min-w-0">
+              <span className={`text-[13px] font-600 block truncate ${active ? 'text-accent-bright' : 'text-text-2'}`}>
+                {cr.name}
+              </span>
+              <span className="text-[11px] text-text-3/60 block truncate">
+                {cr.agentIds.length} agent{cr.agentIds.length !== 1 ? 's' : ''}
+                {cr.chatMode === 'parallel' ? ' · parallel' : ' · sequential'}
+              </span>
+            </div>
+            {active && <CheckIcon className="text-accent-bright shrink-0" />}
+          </button>
+        )
+      })}
+    </div>
+  )
+}