@swarmclawai/swarmclaw 0.2.0

package/src/components/runs/run-list.tsx

@@ -0,0 +1,231 @@
+'use client'
+
+import { useEffect, useState, useRef, useCallback } from 'react'
+import { api } from '@/lib/api-client'
+import { BottomSheet } from '@/components/shared/bottom-sheet'
+import type { SessionRunRecord, SessionRunStatus } from '@/types'
+
+const STATUS_COLORS: Record<SessionRunStatus, { bg: string; text: string }> = {
+  queued: { bg: 'bg-yellow-500/10', text: 'text-yellow-400' },
+  running: { bg: 'bg-blue-500/10', text: 'text-blue-400' },
+  completed: { bg: 'bg-emerald-500/10', text: 'text-emerald-400' },
+  failed: { bg: 'bg-red-500/10', text: 'text-red-400' },
+  cancelled: { bg: 'bg-white/[0.06]', text: 'text-text-3' },
+}
+
+const ALL_STATUSES: SessionRunStatus[] = ['queued', 'running', 'completed', 'failed', 'cancelled']
+
+function relativeTime(ts: number): string {
+  const diff = Date.now() - ts
+  if (diff < 60_000) return `${Math.floor(diff / 1000)}s ago`
+  if (diff < 3_600_000) return `${Math.floor(diff / 60_000)}m ago`
+  if (diff < 86_400_000) return `${Math.floor(diff / 3_600_000)}h ago`
+  return `${Math.floor(diff / 86_400_000)}d ago`
+}
+
+function formatDuration(start?: number, end?: number): string {
+  if (!start) return '-'
+  const elapsed = (end || Date.now()) - start
+  if (elapsed < 1000) return `${elapsed}ms`
+  if (elapsed < 60_000) return `${(elapsed / 1000).toFixed(1)}s`
+  return `${Math.floor(elapsed / 60_000)}m ${Math.floor((elapsed % 60_000) / 1000)}s`
+}
+
+export function RunList() {
+  const [runs, setRuns] = useState<SessionRunRecord[]>([])
+  const [loading, setLoading] = useState(true)
+  const [autoRefresh, setAutoRefresh] = useState(false)
+  const [statusFilter, setStatusFilter] = useState<SessionRunStatus | null>(null)
+  const [selected, setSelected] = useState<SessionRunRecord | null>(null)
+  const timerRef = useRef<ReturnType<typeof setInterval> | null>(null)
+
+  const fetchRuns = useCallback(async () => {
+    try {
+      const res = await api<SessionRunRecord[]>('GET', '/runs?limit=200')
+      setRuns(Array.isArray(res) ? res : [])
+    } catch {
+      // ignore
+    } finally {
+      setLoading(false)
+    }
+  }, [])
+
+  useEffect(() => {
+    fetchRuns()
+  }, [fetchRuns])
+
+  useEffect(() => {
+    if (!autoRefresh) {
+      if (timerRef.current) clearInterval(timerRef.current)
+      return
+    }
+    timerRef.current = setInterval(fetchRuns, 3000)
+    return () => {
+      if (timerRef.current) clearInterval(timerRef.current)
+    }
+  }, [autoRefresh, fetchRuns])
+
+  const filtered = statusFilter ? runs.filter((r) => r.status === statusFilter) : runs
+
+  if (loading) {
+    return (
+      <div className="flex-1 flex items-center justify-center text-text-3 text-[13px]">
+        Loading runs...
+      </div>
+    )
+  }
+
+  return (
+    <div className="flex-1 flex flex-col overflow-hidden">
+      {/* Controls */}
+      <div className="px-4 py-2 space-y-2 shrink-0">
+        {/* Status filter + auto-refresh */}
+        <div className="flex items-center gap-1.5 flex-wrap">
+          <button
+            onClick={() => setStatusFilter(null)}
+            className={`px-2 py-1 rounded-[6px] text-[10px] font-700 uppercase tracking-wider cursor-pointer transition-all border-none ${
+              !statusFilter ? 'bg-accent-soft text-accent-bright' : 'bg-white/[0.02] text-text-3/70'
+            }`}
+          >
+            ALL
+          </button>
+          {ALL_STATUSES.map((s) => (
+            <button
+              key={s}
+              onClick={() => setStatusFilter(statusFilter === s ? null : s)}
+              className={`px-2 py-1 rounded-[6px] text-[10px] font-700 uppercase tracking-wider cursor-pointer transition-all border-none ${
+                statusFilter === s ? `${STATUS_COLORS[s].bg} ${STATUS_COLORS[s].text}` : 'bg-white/[0.02] text-text-3/70'
+              }`}
+            >
+              {s}
+            </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'
+            }`}
+          >
+            {autoRefresh ? 'LIVE' : 'PAUSED'}
+          </button>
+        </div>
+      </div>
+
+      {/* Count */}
+      <div className="px-4 py-1 text-[10px] text-text-3/60">
+        {filtered.length} run{filtered.length !== 1 ? 's' : ''}
+      </div>
+
+      {/* Run list */}
+      <div className="flex-1 overflow-y-auto px-2 pb-20">
+        {filtered.length === 0 ? (
+          <div className="flex items-center justify-center h-32 text-text-3 text-[12px]">
+            No runs found
+          </div>
+        ) : (
+          <div className="space-y-1">
+            {filtered.map((run) => (
+              <button
+                key={run.id}
+                onClick={() => setSelected(run)}
+                className="w-full text-left p-3 rounded-[10px] border border-white/[0.06] bg-surface hover:bg-surface-2 transition-all cursor-pointer block"
+              >
+                <div className="flex items-center gap-2 mb-1">
+                  <span className={`text-[9px] font-700 uppercase tracking-wider px-1.5 py-0.5 rounded-[4px] ${STATUS_COLORS[run.status].bg} ${STATUS_COLORS[run.status].text}`}>
+                    {run.status}
+                  </span>
+                  <span className="text-[11px] text-text-3/60 font-mono">{run.source}</span>
+                  <span className="text-[10px] text-text-3/40 ml-auto">{relativeTime(run.queuedAt)}</span>
+                </div>
+                <div className="text-[12px] text-text-2 truncate">{run.messagePreview || run.id}</div>
+                {run.startedAt && (
+                  <div className="text-[10px] text-text-3/50 mt-1">
+                    Duration: {formatDuration(run.startedAt, run.endedAt)}
+                  </div>
+                )}
+              </button>
+            ))}
+          </div>
+        )}
+      </div>
+
+      {/* Detail Sheet */}
+      <BottomSheet open={!!selected} onClose={() => setSelected(null)}>
+        {selected && (
+          <>
+            <div className="mb-6">
+              <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] ${STATUS_COLORS[selected.status].bg} ${STATUS_COLORS[selected.status].text}`}>
+                  {selected.status}
+                </span>
+                <span className="text-[12px] font-mono text-text-3/60">{selected.source}</span>
+              </div>
+              <h2 className="font-display text-[20px] font-700 tracking-[-0.02em] mb-2 leading-snug">
+                Run Details
+              </h2>
+              <p className="text-[12px] text-text-3/60 font-mono">{selected.id}</p>
+            </div>
+
+            {/* Timing */}
+            <div className="mb-6 space-y-2">
+              <label className="block font-display text-[12px] font-600 text-text-2 uppercase tracking-[0.08em]">Timing</label>
+              <div className="grid grid-cols-2 gap-2">
+                <div className="p-2.5 rounded-[10px] bg-white/[0.02] border border-white/[0.04]">
+                  <div className="text-[10px] text-text-3/60 mb-0.5">Queued</div>
+                  <div className="text-[12px] text-text font-mono">{new Date(selected.queuedAt).toLocaleString()}</div>
+                </div>
+                {selected.startedAt && (
+                  <div className="p-2.5 rounded-[10px] bg-white/[0.02] border border-white/[0.04]">
+                    <div className="text-[10px] text-text-3/60 mb-0.5">Started</div>
+                    <div className="text-[12px] text-text font-mono">{new Date(selected.startedAt).toLocaleString()}</div>
+                  </div>
+                )}
+                {selected.endedAt && (
+                  <div className="p-2.5 rounded-[10px] bg-white/[0.02] border border-white/[0.04]">
+                    <div className="text-[10px] text-text-3/60 mb-0.5">Ended</div>
+                    <div className="text-[12px] text-text font-mono">{new Date(selected.endedAt).toLocaleString()}</div>
+                  </div>
+                )}
+                <div className="p-2.5 rounded-[10px] bg-white/[0.02] border border-white/[0.04]">
+                  <div className="text-[10px] text-text-3/60 mb-0.5">Duration</div>
+                  <div className="text-[12px] text-text font-mono">{formatDuration(selected.startedAt, selected.endedAt)}</div>
+                </div>
+              </div>
+            </div>
+
+            {/* Message */}
+            {selected.messagePreview && (
+              <div className="mb-6">
+                <label className="block font-display text-[12px] font-600 text-text-2 uppercase tracking-[0.08em] mb-2">Message</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-[200px] overflow-auto border border-white/[0.04]">
+                  {selected.messagePreview}
+                </pre>
+              </div>
+            )}
+
+            {/* Error */}
+            {selected.error && (
+              <div className="mb-6">
+                <label className="block font-display text-[12px] font-600 text-red-400 uppercase tracking-[0.08em] mb-2">Error</label>
+                <pre className="text-[11px] text-red-300/80 font-mono whitespace-pre-wrap break-all bg-red-500/[0.05] rounded-[12px] p-4 max-h-[200px] overflow-auto border border-red-500/[0.1]">
+                  {selected.error}
+                </pre>
+              </div>
+            )}
+
+            {/* Result */}
+            {selected.resultPreview && (
+              <div className="mb-6">
+                <label className="block font-display text-[12px] font-600 text-text-2 uppercase tracking-[0.08em] mb-2">Result</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-[200px] overflow-auto border border-white/[0.04]">
+                  {selected.resultPreview}
+                </pre>
+              </div>
+            )}
+          </>
+        )}
+      </BottomSheet>
+    </div>
+  )
+}

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

@@ -0,0 +1,63 @@
+'use client'
+
+import type { Schedule } from '@/types'
+import { useAppStore } from '@/stores/use-app-store'
+
+const STATUS_COLORS: Record<string, string> = {
+  active: 'text-emerald-400 bg-emerald-400/[0.08]',
+  paused: 'text-amber-400 bg-amber-400/[0.08]',
+  completed: 'text-text-3 bg-white/[0.03]',
+  failed: 'text-red-400 bg-red-400/[0.08]',
+}
+
+function formatNext(ts?: number): string {
+  if (!ts) return 'Not scheduled'
+  const d = new Date(ts)
+  const now = Date.now()
+  const diff = ts - now
+  if (diff < 0) return 'Overdue'
+  if (diff < 60000) return 'In < 1m'
+  if (diff < 3600000) return `In ${Math.floor(diff / 60000)}m`
+  if (diff < 86400000) return `In ${Math.floor(diff / 3600000)}h`
+  return d.toLocaleDateString()
+}
+
+interface Props {
+  schedule: Schedule
+}
+
+export function ScheduleCard({ schedule }: Props) {
+  const setEditingScheduleId = useAppStore((s) => s.setEditingScheduleId)
+  const setScheduleSheetOpen = useAppStore((s) => s.setScheduleSheetOpen)
+  const agents = useAppStore((s) => s.agents)
+
+  const handleClick = () => {
+    setEditingScheduleId(schedule.id)
+    setScheduleSheetOpen(true)
+  }
+
+  const agent = agents[schedule.agentId]
+  const statusClass = STATUS_COLORS[schedule.status] || STATUS_COLORS.paused
+
+  return (
+    <div
+      onClick={handleClick}
+      className="relative py-3.5 px-4 cursor-pointer rounded-[14px]
+        transition-all duration-200 active:scale-[0.98]
+        bg-transparent border border-transparent hover:bg-white/[0.02] hover:border-white/[0.03]"
+    >
+      <div className="flex items-center gap-2.5">
+        <span className="font-display text-[14px] font-600 truncate flex-1 tracking-[-0.01em]">{schedule.name}</span>
+        <span className={`shrink-0 text-[10px] font-600 uppercase tracking-wider px-2 py-0.5 rounded-[6px] ${statusClass}`}>
+          {schedule.status}
+        </span>
+      </div>
+      <div className="text-[12px] text-text-3/70 mt-1.5 truncate">
+        {agent?.name || 'Unknown agent'} &middot; {schedule.scheduleType}
+      </div>
+      <div className="text-[11px] text-text-3/60 mt-1">
+        Next: {formatNext(schedule.nextRunAt)}
+      </div>
+    </div>
+  )
+}

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

@@ -0,0 +1,76 @@
+'use client'
+
+import { useEffect, useMemo, useState } from 'react'
+import { useAppStore } from '@/stores/use-app-store'
+import { ScheduleCard } from './schedule-card'
+
+interface Props {
+  inSidebar?: boolean
+}
+
+export function ScheduleList({ inSidebar }: Props) {
+  const schedules = useAppStore((s) => s.schedules)
+  const loadSchedules = useAppStore((s) => s.loadSchedules)
+  const setScheduleSheetOpen = useAppStore((s) => s.setScheduleSheetOpen)
+  const [search, setSearch] = useState('')
+
+  useEffect(() => { loadSchedules() }, [])
+
+  const filtered = useMemo(() => {
+    return Object.values(schedules)
+      .filter((s) => {
+        if (search && !s.name.toLowerCase().includes(search.toLowerCase())) return false
+        return true
+      })
+      .sort((a, b) => b.createdAt - a.createdAt)
+  }, [schedules, search])
+
+  if (!filtered.length && !search) {
+    return (
+      <div className="flex-1 flex flex-col items-center justify-center gap-4 text-text-3 p-8 text-center">
+        <div className="w-12 h-12 rounded-[14px] bg-accent-soft flex items-center justify-center mb-1">
+          <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" className="text-accent-bright">
+            <circle cx="12" cy="12" r="10" />
+            <polyline points="12 6 12 12 16 14" />
+          </svg>
+        </div>
+        <p className="font-display text-[15px] font-600 text-text-2">No schedules yet</p>
+        <p className="text-[13px] text-text-3/50">Automate tasks with cron or intervals</p>
+        {!inSidebar && (
+          <button
+            onClick={() => setScheduleSheetOpen(true)}
+            className="mt-3 px-8 py-3 rounded-[14px] border-none bg-[#6366F1] text-white
+              text-[14px] font-600 cursor-pointer active:scale-95 transition-all duration-200
+              shadow-[0_4px_16px_rgba(99,102,241,0.2)]"
+            style={{ fontFamily: 'inherit' }}
+          >
+            + New Schedule
+          </button>
+        )}
+      </div>
+    )
+  }
+
+  return (
+    <div className="flex-1 overflow-y-auto">
+      {(filtered.length > 3 || search) && (
+        <div className="px-4 py-2.5">
+          <input
+            type="text"
+            value={search}
+            onChange={(e) => setSearch(e.target.value)}
+            placeholder="Search schedules..."
+            className="w-full px-4 py-2.5 rounded-[12px] border border-white/[0.04] bg-surface text-text
+              text-[13px] outline-none transition-all duration-200 placeholder:text-text-3/70 focus-glow"
+            style={{ fontFamily: 'inherit' }}
+          />
+        </div>
+      )}
+      <div className="flex flex-col gap-1 px-2 pb-4">
+        {filtered.map((s) => (
+          <ScheduleCard key={s.id} schedule={s} />
+        ))}
+      </div>
+    </div>
+  )
+}