@swarmclawai/swarmclaw 0.2.0

package/src/components/layout/daemon-indicator.tsx

@@ -0,0 +1,56 @@
+'use client'
+
+import { useEffect, useState } from 'react'
+import { api } from '@/lib/api-client'
+
+interface DaemonStatus {
+  running: boolean
+  schedulerActive: boolean
+  queueLength: number
+  lastProcessed: number | null
+  nextScheduled: number | null
+}
+
+export function DaemonIndicator() {
+  const [status, setStatus] = useState<DaemonStatus | null>(null)
+
+  const fetchStatus = async () => {
+    try {
+      const data = await api<DaemonStatus>('GET', '/daemon')
+      setStatus(data)
+    } catch { /* ignore */ }
+  }
+
+  useEffect(() => {
+    fetchStatus()
+    const interval = setInterval(fetchStatus, 30_000)
+    return () => clearInterval(interval)
+  }, [])
+
+  const toggle = async () => {
+    try {
+      await api('POST', '/daemon', { action: status?.running ? 'stop' : 'start' })
+      fetchStatus()
+    } catch { /* ignore */ }
+  }
+
+  if (!status) return null
+
+  return (
+    <button
+      onClick={toggle}
+      className="flex items-center gap-2 px-3 py-2 rounded-[10px] bg-surface border border-white/[0.06] hover:bg-surface-2 transition-colors cursor-pointer w-full"
+      title={status.running ? 'Daemon running — click to pause' : 'Daemon paused — click to start'}
+    >
+      <span className={`w-2 h-2 rounded-full shrink-0 ${status.running ? 'bg-emerald-400 shadow-[0_0_6px_rgba(52,211,153,0.5)]' : 'bg-text-3/30'}`} />
+      <span className="text-[12px] font-600 text-text-2 flex-1 text-left">
+        Daemon
+      </span>
+      {status.queueLength > 0 && (
+        <span className="text-[10px] font-mono text-amber-400/70">
+          {status.queueLength} queued
+        </span>
+      )}
+    </button>
+  )
+}

package/src/components/layout/mobile-header.tsx

@@ -0,0 +1,31 @@
+'use client'
+
+import { useAppStore } from '@/stores/use-app-store'
+import { IconButton } from '@/components/shared/icon-button'
+
+export function MobileHeader() {
+  const toggleSidebar = useAppStore((s) => s.toggleSidebar)
+  const currentSessionId = useAppStore((s) => s.currentSessionId)
+  const sessions = useAppStore((s) => s.sessions)
+  const session = currentSessionId ? sessions[currentSessionId] : null
+
+  return (
+    <header className="flex items-center gap-3 px-4 py-2.5 border-b border-white/[0.04] bg-bg/80 backdrop-blur-md shrink-0 min-h-[48px]"
+      style={{ paddingTop: 'max(10px, env(safe-area-inset-top))' }}>
+      <IconButton onClick={toggleSidebar} aria-label="Toggle sidebar">
+        <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round">
+          <line x1="3" y1="7" x2="21" y2="7" />
+          <line x1="3" y1="12" x2="15" y2="12" />
+          <line x1="3" y1="17" x2="18" y2="17" />
+        </svg>
+      </IconButton>
+      <h1 className="font-display text-[14px] font-600 tracking-[-0.02em] flex-1 truncate">
+        {session ? (
+          <span className="block truncate">{session.name}</span>
+        ) : (
+          <span className="font-700">SwarmClaw</span>
+        )}
+      </h1>
+    </header>
+  )
+}

package/src/components/layout/network-banner.tsx

@@ -0,0 +1,17 @@
+'use client'
+
+import { useAppStore } from '@/stores/use-app-store'
+
+export function NetworkBanner() {
+  const info = useAppStore((s) => s.networkInfo)
+  if (!info) return null
+
+  return (
+    <div className="px-4 py-1.5 border-b border-white/[0.04] text-[10px] text-text-3 flex items-center gap-2 shrink-0">
+      <span className="w-[5px] h-[5px] rounded-full bg-success shrink-0" />
+      <code className="font-mono text-[10px] text-text-3/70 select-all">
+        {info.ip}:{info.port}
+      </code>
+    </div>
+  )
+}

package/src/components/layout/update-banner.tsx

@@ -0,0 +1,130 @@
+'use client'
+
+import { useEffect, useState, useCallback } from 'react'
+
+const CHECK_INTERVAL = 5 * 60_000 // 5 minutes
+
+type VersionInfo = {
+  localSha: string
+  remoteSha: string
+  updateAvailable: boolean
+  behindBy: number
+}
+
+type UpdateState = 'idle' | 'updating' | 'done' | 'error'
+
+export function UpdateBanner() {
+  const [version, setVersion] = useState<VersionInfo | null>(null)
+  const [updateState, setUpdateState] = useState<UpdateState>('idle')
+  const [dismissed, setDismissed] = useState<string | null>(null)
+  const [errorMsg, setErrorMsg] = useState('')
+
+  const checkVersion = useCallback(async () => {
+    try {
+      const res = await fetch('/api/version')
+      if (!res.ok) return
+      const data: VersionInfo = await res.json()
+      setVersion(data)
+    } catch {
+      // silently fail — no network or server issue
+    }
+  }, [])
+
+  useEffect(() => {
+    checkVersion()
+    const id = setInterval(checkVersion, CHECK_INTERVAL)
+    return () => clearInterval(id)
+  }, [checkVersion])
+
+  const handleUpdate = async () => {
+    setUpdateState('updating')
+    setErrorMsg('')
+    try {
+      const res = await fetch('/api/version/update', { method: 'POST' })
+      const data = await res.json()
+      if (data.success) {
+        setUpdateState('done')
+      } else {
+        setUpdateState('error')
+        setErrorMsg(data.error || 'Update failed')
+      }
+    } catch {
+      setUpdateState('error')
+      setErrorMsg('Network error')
+    }
+  }
+
+  const handleDismiss = () => {
+    if (version) setDismissed(version.remoteSha)
+  }
+
+  // Don't show if no update, or user dismissed this specific remote SHA
+  if (!version?.updateAvailable) return null
+  if (dismissed === version.remoteSha && updateState === 'idle') return null
+
+  return (
+    <div className="px-4 py-1.5 border-b border-white/[0.04] text-[10px] flex items-center gap-2 shrink-0 bg-[#6366F1]/[0.04]">
+      {updateState === 'idle' && (
+        <>
+          <svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" className="text-accent-bright shrink-0">
+            <path d="M12 19V5M5 12l7-7 7 7" />
+          </svg>
+          <span className="text-text-3 flex-1 min-w-0 truncate">
+            <span className="text-accent-bright font-600">{version.behindBy}</span> update{version.behindBy !== 1 ? 's' : ''} available
+          </span>
+          <button
+            onClick={handleUpdate}
+            className="text-[10px] font-600 text-accent-bright hover:text-white bg-[#6366F1]/20 hover:bg-[#6366F1]/30 px-2 py-0.5 rounded-[6px] border-none cursor-pointer transition-all shrink-0"
+            style={{ fontFamily: 'inherit' }}
+          >
+            Update
+          </button>
+          <button
+            onClick={handleDismiss}
+            className="text-text-3/50 hover:text-text-3 bg-transparent border-none cursor-pointer p-0 shrink-0 transition-colors"
+          >
+            <svg width="10" height="10" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.5" strokeLinecap="round">
+              <line x1="18" y1="6" x2="6" y2="18" />
+              <line x1="6" y1="6" x2="18" y2="18" />
+            </svg>
+          </button>
+        </>
+      )}
+
+      {updateState === 'updating' && (
+        <>
+          <span className="w-3 h-3 border-[1.5px] border-accent-bright/30 border-t-accent-bright rounded-full shrink-0"
+            style={{ animation: 'spin 0.8s linear infinite' }} />
+          <span className="text-text-3">Updating...</span>
+        </>
+      )}
+
+      {updateState === 'done' && (
+        <>
+          <svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.5" strokeLinecap="round" className="text-success shrink-0">
+            <polyline points="20 6 9 17 4 12" />
+          </svg>
+          <span className="text-text-3 flex-1">Updated! Restart to apply.</span>
+        </>
+      )}
+
+      {updateState === 'error' && (
+        <>
+          <svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" className="text-red-400 shrink-0">
+            <circle cx="12" cy="12" r="10" />
+            <line x1="15" y1="9" x2="9" y2="15" />
+            <line x1="9" y1="9" x2="15" y2="15" />
+          </svg>
+          <span className="text-red-400/80 flex-1 truncate">{errorMsg}</span>
+          <button
+            onClick={() => setUpdateState('idle')}
+            className="text-[10px] font-600 text-text-3 hover:text-text bg-white/[0.04] px-2 py-0.5 rounded-[6px] border-none cursor-pointer transition-all shrink-0"
+            style={{ fontFamily: 'inherit' }}
+          >
+            Retry
+          </button>
+        </>
+      )}
+    </div>
+  )
+}

package/src/components/logs/log-list.tsx

@@ -0,0 +1,358 @@
+'use client'
+
+import { useEffect, useState, useRef, useCallback } from 'react'
+import { api } from '@/lib/api-client'
+import { useAppStore } from '@/stores/use-app-store'
+import { BottomSheet } from '@/components/shared/bottom-sheet'
+
+interface LogEntry {
+  time: string
+  level: string
+  tag: string
+  message: string
+  data?: string
+}
+
+const LEVEL_COLORS: Record<string, string> = {
+  ERROR: 'text-red-400',
+  WARN: 'text-amber-400',
+  INFO: 'text-blue-400',
+  DEBUG: 'text-text-3',
+}
+
+const LEVEL_BG: Record<string, string> = {
+  ERROR: 'bg-red-500/10',
+  WARN: 'bg-amber-500/10',
+  INFO: 'bg-blue-500/10',
+  DEBUG: 'bg-white/[0.02]',
+}
+
+export function LogList() {
+  const [entries, setEntries] = useState<LogEntry[]>([])
+  const [total, setTotal] = useState(0)
+  const [loading, setLoading] = useState(true)
+  const [search, setSearch] = useState('')
+  const [levelFilter, setLevelFilter] = useState<string[]>([])
+  const [autoRefresh, setAutoRefresh] = useState(true)
+  const [selected, setSelected] = useState<LogEntry | null>(null)
+  const [creatingTask, setCreatingTask] = useState(false)
+  const [taskAgentId, setTaskAgentId] = useState('')
+  const [savedFilters, setSavedFilters] = useState<Array<{ name: string; levels: string[]; search: string }>>(() => {
+    if (typeof window === 'undefined') return []
+    try { return JSON.parse(localStorage.getItem('sc_log_filters') || '[]') } catch { return [] }
+  })
+  const scrollRef = useRef<HTMLDivElement>(null)
+
+  const agents = useAppStore((s) => s.agents)
+  const loadAgents = useAppStore((s) => s.loadAgents)
+  const loadTasks = useAppStore((s) => s.loadTasks)
+
+  const fetchLogs = useCallback(async () => {
+    try {
+      const params = new URLSearchParams({ lines: '300' })
+      if (levelFilter.length) params.set('level', levelFilter.join(','))
+      if (search) params.set('search', search)
+      const res = await api('GET', `/logs?${params}`) as { entries: LogEntry[]; total: number }
+      setEntries(res.entries || [])
+      setTotal(res.total || 0)
+    } catch (err) {
+      console.error('Failed to fetch logs:', err)
+    } finally {
+      setLoading(false)
+    }
+  }, [levelFilter, search])
+
+  useEffect(() => {
+    fetchLogs()
+    loadAgents()
+  }, [fetchLogs])
+
+  // Auto-refresh every 3s
+  useEffect(() => {
+    if (!autoRefresh) return
+    const id = setInterval(fetchLogs, 3000)
+    return () => clearInterval(id)
+  }, [autoRefresh, fetchLogs])
+
+  const clearLogs = async () => {
+    try {
+      await api('DELETE', '/logs')
+      setEntries([])
+      setTotal(0)
+    } catch (err) {
+      console.error('Failed to clear logs:', err)
+    }
+  }
+
+  const toggleLevel = (level: string) => {
+    setLevelFilter((prev) =>
+      prev.includes(level) ? prev.filter((l) => l !== level) : [...prev, level]
+    )
+  }
+
+  const formatTime = (iso: string) => {
+    if (!iso) return ''
+    try {
+      const d = new Date(iso)
+      return d.toLocaleTimeString('en-GB', { hour: '2-digit', minute: '2-digit', second: '2-digit' })
+    } catch {
+      return iso.slice(11, 19)
+    }
+  }
+
+  const formatFullTime = (iso: string) => {
+    if (!iso) return ''
+    try {
+      const d = new Date(iso)
+      return d.toLocaleString('en-GB', { dateStyle: 'medium', timeStyle: 'medium' })
+    } catch {
+      return iso
+    }
+  }
+
+  const handleCreateTask = async () => {
+    if (!selected) return
+    setCreatingTask(true)
+    try {
+      const title = `[${selected.level}] ${selected.tag}: ${selected.message}`.slice(0, 120)
+      const description = [
+        `**Log Level:** ${selected.level}`,
+        `**Source:** ${selected.tag}`,
+        `**Time:** ${selected.time}`,
+        `**Message:** ${selected.message}`,
+        selected.data ? `\n**Data:**\n\`\`\`\n${selected.data}\n\`\`\`` : '',
+      ].filter(Boolean).join('\n')
+
+      await api('POST', '/tasks', {
+        title,
+        description,
+        status: 'backlog',
+        agentId: taskAgentId || undefined,
+      })
+      await loadTasks()
+      setSelected(null)
+    } catch (err) {
+      console.error('Failed to create task:', err)
+    } finally {
+      setCreatingTask(false)
+    }
+  }
+
+  if (loading) {
+    return (
+      <div className="flex-1 flex items-center justify-center text-text-3 text-[13px]">
+        Loading logs...
+      </div>
+    )
+  }
+
+  const agentList = Object.values(agents)
+
+  return (
+    <div className="flex-1 flex flex-col overflow-hidden">
+      {/* Controls */}
+      <div className="px-4 py-2 space-y-2 shrink-0">
+        {/* Search */}
+        <input
+          value={search}
+          onChange={(e) => setSearch(e.target.value)}
+          placeholder="Search logs..."
+          className="w-full px-3 py-2 rounded-[8px] bg-white/[0.04] border border-white/[0.06] text-[12px] text-text placeholder:text-text-3/50 outline-none focus:border-accent/30"
+        />
+        {/* Saved filters */}
+        {savedFilters.length > 0 && (
+          <div className="flex items-center gap-1.5 flex-wrap">
+            {savedFilters.map((f, i) => (
+              <button
+                key={i}
+                onClick={() => { setLevelFilter(f.levels); setSearch(f.search) }}
+                className="group flex items-center gap-1 px-2 py-1 rounded-[6px] text-[10px] font-600 cursor-pointer transition-all border-none bg-accent-soft text-accent-bright hover:bg-[#6366F1]/15"
+              >
+                {f.name}
+                <span
+                  onClick={(e) => {
+                    e.stopPropagation()
+                    const next = savedFilters.filter((_, j) => j !== i)
+                    localStorage.setItem('sc_log_filters', JSON.stringify(next))
+                    setSavedFilters(next)
+                  }}
+                  className="text-accent-bright/50 hover:text-red-400 ml-0.5"
+                >
+                  x
+                </span>
+              </button>
+            ))}
+          </div>
+        )}
+        {/* Level filters + controls */}
+        <div className="flex items-center gap-1.5 flex-wrap">
+          {['ERROR', 'WARN', 'INFO', 'DEBUG'].map((level) => (
+            <button
+              key={level}
+              onClick={() => toggleLevel(level)}
+              className={`px-2 py-1 rounded-[6px] text-[10px] font-700 uppercase tracking-wider cursor-pointer transition-all border-none ${
+                levelFilter.length === 0 || levelFilter.includes(level)
+                  ? `${LEVEL_BG[level]} ${LEVEL_COLORS[level]}`
+                  : 'bg-white/[0.02] text-text-3/70'
+              }`}
+            >
+              {level}
+            </button>
+          ))}
+          <div className="flex-1" />
+          <button
+            onClick={() => setAutoRefresh(!autoRefresh)}
+            className={`px-2 py-1 rounded-[6px] text-[10px] font-600 cursor-pointer transition-all border-none ${
+              autoRefresh ? 'bg-green-500/10 text-green-400' : 'bg-white/[0.04] text-text-3'
+            }`}
+            title={autoRefresh ? 'Auto-refresh ON' : 'Auto-refresh OFF'}
+          >
+            {autoRefresh ? 'LIVE' : 'PAUSED'}
+          </button>
+          <button
+            onClick={clearLogs}
+            className="px-2 py-1 rounded-[6px] text-[10px] font-600 cursor-pointer transition-all border-none bg-white/[0.04] text-text-3 hover:text-red-400 hover:bg-red-500/10"
+            title="Clear all logs"
+          >
+            CLEAR
+          </button>
+          <button
+            onClick={() => {
+              const blob = new Blob([JSON.stringify(entries, null, 2)], { type: 'application/json' })
+              const url = URL.createObjectURL(blob)
+              const a = document.createElement('a')
+              a.href = url
+              a.download = `swarmclaw-logs-${new Date().toISOString().slice(0, 10)}.json`
+              a.click()
+              URL.revokeObjectURL(url)
+            }}
+            className="px-2 py-1 rounded-[6px] text-[10px] font-600 cursor-pointer transition-all border-none bg-white/[0.04] text-text-3 hover:text-accent-bright hover:bg-accent-soft"
+            title="Export logs as JSON"
+          >
+            EXPORT
+          </button>
+          <button
+            onClick={() => {
+              const name = prompt('Filter name:')
+              if (!name?.trim()) return
+              const filter = { name: name.trim(), levels: levelFilter, search }
+              const existing = JSON.parse(localStorage.getItem('sc_log_filters') || '[]')
+              existing.push(filter)
+              localStorage.setItem('sc_log_filters', JSON.stringify(existing))
+              setSavedFilters(existing)
+            }}
+            className="px-2 py-1 rounded-[6px] text-[10px] font-600 cursor-pointer transition-all border-none bg-white/[0.04] text-text-3 hover:text-accent-bright hover:bg-accent-soft"
+            title="Save current filter"
+          >
+            SAVE
+          </button>
+        </div>
+      </div>
+
+      {/* Total count */}
+      <div className="px-4 py-1 text-[10px] text-text-3/60">
+        {entries.length} of {total} entries
+      </div>
+
+      {/* Log entries */}
+      <div ref={scrollRef} className="flex-1 overflow-y-auto px-2 pb-20">
+        {entries.length === 0 ? (
+          <div className="flex items-center justify-center h-32 text-text-3 text-[12px]">
+            No log entries
+          </div>
+        ) : (
+          entries.map((entry, i) => (
+            <button
+              key={i}
+              onClick={() => { setSelected(entry); setTaskAgentId('') }}
+              className={`w-full text-left px-2 py-1.5 rounded-[6px] hover:bg-white/[0.03] transition-colors cursor-pointer bg-transparent border-none block
+                ${entry.level === 'ERROR' ? 'hover:bg-red-500/[0.04]' : ''}`}
+            >
+              <div className="flex items-start gap-2">
+                <span className="text-[10px] text-text-3/50 font-mono shrink-0 mt-[1px] w-[58px]">
+                  {formatTime(entry.time)}
+                </span>
+                <span className={`text-[9px] font-700 uppercase tracking-wider shrink-0 mt-[2px] w-[36px] ${LEVEL_COLORS[entry.level] || 'text-text-3'}`}>
+                  {entry.level}
+                </span>
+                <span className="text-[10px] font-600 text-accent/60 shrink-0 mt-[1px]">
+                  {entry.tag}
+                </span>
+                <span className="text-[11px] text-text-2 truncate flex-1">
+                  {entry.message}
+                </span>
+                {/* Arrow indicator */}
+                <svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" className="text-text-3/50 shrink-0 mt-[2px]">
+                  <polyline points="9 18 15 12 9 6" />
+                </svg>
+              </div>
+            </button>
+          ))
+        )}
+      </div>
+
+      {/* Log Detail Sheet */}
+      <BottomSheet open={!!selected} onClose={() => setSelected(null)}>
+        {selected && (
+          <>
+            <div className="mb-8">
+              <div className="flex items-center gap-3 mb-3">
+                <span className={`text-[11px] font-700 uppercase tracking-wider px-2.5 py-1 rounded-[6px] ${LEVEL_BG[selected.level]} ${LEVEL_COLORS[selected.level]}`}>
+                  {selected.level}
+                </span>
+                <span className="text-[12px] font-600 text-accent/80 font-mono">{selected.tag}</span>
+              </div>
+              <h2 className="font-display text-[22px] font-700 tracking-[-0.02em] mb-2 leading-snug">
+                {selected.message}
+              </h2>
+              <p className="text-[12px] text-text-3/60 font-mono">{formatFullTime(selected.time)}</p>
+            </div>
+
+            {/* Data payload */}
+            {selected.data && (
+              <div className="mb-8">
+                <label className="block font-display text-[12px] font-600 text-text-2 uppercase tracking-[0.08em] mb-3">Details</label>
+                <pre className="text-[11px] text-text-3/80 font-mono whitespace-pre-wrap break-all bg-white/[0.02] rounded-[12px] p-4 max-h-[300px] overflow-auto border border-white/[0.04]">
+                  {selected.data}
+                </pre>
+              </div>
+            )}
+
+            {/* Create as Task */}
+            <div className="pt-4 border-t border-white/[0.04]">
+              <label className="block font-display text-[12px] font-600 text-text-2 uppercase tracking-[0.08em] mb-3">
+                Create as Task
+              </label>
+              <p className="text-[12px] text-text-3/60 mb-3">
+                Turn this log entry into a task and optionally assign it to an agent to investigate.
+              </p>
+              <div className="flex gap-2">
+                <select
+                  value={taskAgentId}
+                  onChange={(e) => setTaskAgentId(e.target.value)}
+                  className="flex-1 px-4 py-3 rounded-[14px] border border-white/[0.08] bg-surface text-text text-[14px] outline-none appearance-none cursor-pointer"
+                  style={{ fontFamily: 'inherit' }}
+                >
+                  <option value="">Unassigned</option>
+                  {agentList.map((a) => (
+                    <option key={a.id} value={a.id}>{a.name}</option>
+                  ))}
+                </select>
+                <button
+                  onClick={handleCreateTask}
+                  disabled={creatingTask}
+                  className="px-5 py-3 rounded-[14px] border-none bg-[#6366F1] text-white text-[14px] font-600
+                    cursor-pointer active:scale-[0.97] disabled:opacity-40 transition-all
+                    shadow-[0_4px_20px_rgba(99,102,241,0.25)] hover:brightness-110 shrink-0"
+                  style={{ fontFamily: 'inherit' }}
+                >
+                  {creatingTask ? 'Creating...' : 'Create Task'}
+                </button>
+              </div>
+            </div>
+          </>
+        )}
+      </BottomSheet>
+    </div>
+  )
+}