@swarmclawai/swarmclaw 0.2.0

package/src/components/skills/clawhub-browser.tsx

@@ -0,0 +1,225 @@
+'use client'
+
+import { useState, useEffect, useCallback } from 'react'
+import { Sheet, SheetContent, SheetHeader, SheetTitle } from '@/components/ui/sheet'
+import { Input } from '@/components/ui/input'
+import { Button } from '@/components/ui/button'
+import { Badge } from '@/components/ui/badge'
+import { api } from '@/lib/api-client'
+import { toast } from 'sonner'
+
+interface ClawHubSkill {
+  id: string
+  name: string
+  description: string
+  author: string
+  tags: string[]
+  downloads: number
+  url: string
+  version: string
+}
+
+interface SearchResponse {
+  skills: ClawHubSkill[]
+  total: number
+  page: number
+}
+
+interface ClawHubBrowserProps {
+  open: boolean
+  onOpenChange: (open: boolean) => void
+  onInstalled?: () => void
+}
+
+export function ClawHubBrowser({ open, onOpenChange, onInstalled }: ClawHubBrowserProps) {
+  const [query, setQuery] = useState('')
+  const [skills, setSkills] = useState<ClawHubSkill[]>([])
+  const [page, setPage] = useState(1)
+  const [total, setTotal] = useState(0)
+  const [loading, setLoading] = useState(false)
+  const [error, setError] = useState<string | null>(null)
+  const [installing, setInstalling] = useState<string | null>(null)
+  const [searched, setSearched] = useState(false)
+
+  const search = useCallback(async (q: string, p: number, append = false) => {
+    setLoading(true)
+    setError(null)
+    try {
+      const res = await api<SearchResponse>('GET', `/clawhub/search?q=${encodeURIComponent(q)}&page=${p}`)
+      if (append) {
+        setSkills(prev => [...prev, ...res.skills])
+      } else {
+        setSkills(res.skills)
+      }
+      setTotal(res.total)
+      setPage(res.page)
+      setSearched(true)
+    } catch (err) {
+      setError(err instanceof Error ? err.message : 'Failed to search ClawHub')
+    } finally {
+      setLoading(false)
+    }
+  }, [])
+
+  useEffect(() => {
+    if (open) {
+      setQuery('')
+      setSkills([])
+      setPage(1)
+      setTotal(0)
+      setError(null)
+      setSearched(false)
+      search('', 1)
+    }
+  }, [open, search])
+
+  const handleSearch = () => {
+    setSkills([])
+    search(query, 1)
+  }
+
+  const handleKeyDown = (e: React.KeyboardEvent) => {
+    if (e.key === 'Enter') handleSearch()
+  }
+
+  const handleLoadMore = () => {
+    search(query, page + 1, true)
+  }
+
+  const handleInstall = async (skill: ClawHubSkill) => {
+    setInstalling(skill.id)
+    try {
+      await api('POST', '/clawhub/install', {
+        name: skill.name,
+        description: skill.description,
+        url: skill.url,
+        tags: skill.tags,
+      })
+      toast.success(`Installed "${skill.name}"`)
+      onInstalled?.()
+    } catch (err) {
+      toast.error(err instanceof Error ? err.message : 'Install failed')
+    } finally {
+      setInstalling(null)
+    }
+  }
+
+  const hasMore = skills.length < total
+
+  return (
+    <Sheet open={open} onOpenChange={onOpenChange}>
+      <SheetContent side="right" className="w-full sm:max-w-lg flex flex-col">
+        <SheetHeader>
+          <SheetTitle className="font-display text-[16px] font-600 text-text">
+            ClawHub
+          </SheetTitle>
+          <p className="text-[12px] text-text-3/60">Browse and install community skills</p>
+        </SheetHeader>
+
+        <div className="flex gap-2 px-4">
+          <Input
+            placeholder="Search skills..."
+            value={query}
+            onChange={(e) => setQuery(e.target.value)}
+            onKeyDown={handleKeyDown}
+            className="flex-1 text-[13px]"
+          />
+          <Button size="sm" onClick={handleSearch} disabled={loading}>
+            Search
+          </Button>
+        </div>
+
+        <div className="flex-1 overflow-y-auto px-4 pb-4">
+          {error && (
+            <div className="text-center py-12">
+              <p className="text-[13px] text-red-400">{error}</p>
+              <Button size="sm" variant="ghost" className="mt-2" onClick={() => search(query, 1)}>
+                Retry
+              </Button>
+            </div>
+          )}
+
+          {!error && !loading && searched && skills.length === 0 && (
+            <div className="text-center py-12">
+              <p className="text-[13px] text-text-3/60">No skills found</p>
+              {query && (
+                <p className="text-[11px] text-text-3/40 mt-1">Try a different search term</p>
+              )}
+            </div>
+          )}
+
+          {skills.length > 0 && (
+            <div className="space-y-2">
+              {skills.map((skill) => (
+                <div
+                  key={skill.id}
+                  className="p-4 rounded-[14px] border border-white/[0.06] bg-surface hover:bg-surface-2 transition-all"
+                >
+                  <div className="flex items-start justify-between gap-2">
+                    <div className="min-w-0 flex-1">
+                      <div className="flex items-center gap-2 mb-0.5">
+                        <span className="font-display text-[14px] font-600 text-text truncate">
+                          {skill.name}
+                        </span>
+                        <span className="text-[10px] font-mono text-text-3/40 shrink-0">
+                          v{skill.version}
+                        </span>
+                      </div>
+                      <p className="text-[12px] text-text-3/60 line-clamp-2 mb-2">
+                        {skill.description}
+                      </p>
+                      <div className="flex items-center gap-2 flex-wrap">
+                        {skill.tags.slice(0, 4).map((tag) => (
+                          <Badge
+                            key={tag}
+                            variant="secondary"
+                            className="text-[10px] px-1.5 py-0"
+                          >
+                            {tag}
+                          </Badge>
+                        ))}
+                      </div>
+                      <div className="flex items-center gap-3 mt-2 text-[11px] text-text-3/50">
+                        <span>{skill.author}</span>
+                        <span>{skill.downloads.toLocaleString()} installs</span>
+                      </div>
+                    </div>
+                    <Button
+                      size="sm"
+                      variant="outline"
+                      className="shrink-0 text-[12px]"
+                      disabled={installing === skill.id}
+                      onClick={() => handleInstall(skill)}
+                    >
+                      {installing === skill.id ? 'Installing...' : 'Install'}
+                    </Button>
+                  </div>
+                </div>
+              ))}
+
+              {hasMore && (
+                <div className="pt-2 pb-4 text-center">
+                  <Button
+                    size="sm"
+                    variant="ghost"
+                    onClick={handleLoadMore}
+                    disabled={loading}
+                    className="text-[12px] text-text-3/60"
+                  >
+                    {loading ? 'Loading...' : 'Load More'}
+                  </Button>
+                </div>
+              )}
+            </div>
+          )}
+
+          {loading && skills.length === 0 && (
+            <div className="flex items-center justify-center py-12">
+              <div className="h-5 w-5 animate-spin rounded-full border-2 border-text-3/20 border-t-text-3/60" />
+            </div>
+          )}
+        </div>
+      </SheetContent>
+    </Sheet>
+  )
+}

package/src/components/skills/skill-list.tsx

@@ -0,0 +1,70 @@
+'use client'
+
+import { useEffect, useState } from 'react'
+import { useAppStore } from '@/stores/use-app-store'
+import { ClawHubBrowser } from './clawhub-browser'
+
+export function SkillList({ inSidebar }: { inSidebar?: boolean }) {
+  const skills = useAppStore((s) => s.skills)
+  const loadSkills = useAppStore((s) => s.loadSkills)
+  const setSkillSheetOpen = useAppStore((s) => s.setSkillSheetOpen)
+  const setEditingSkillId = useAppStore((s) => s.setEditingSkillId)
+  const [clawHubOpen, setClawHubOpen] = useState(false)
+
+  useEffect(() => {
+    loadSkills()
+  }, [])
+
+  const skillList = Object.values(skills)
+
+  const handleEdit = (id: string) => {
+    setEditingSkillId(id)
+    setSkillSheetOpen(true)
+  }
+
+  return (
+    <div className={`flex-1 overflow-y-auto ${inSidebar ? 'px-3 pb-4' : 'px-4'}`}>
+      <button
+        onClick={() => setClawHubOpen(true)}
+        className="w-full mb-3 py-2.5 px-4 rounded-[12px] border border-dashed border-white/[0.1] text-[13px] font-600 text-text-3 hover:text-accent-bright hover:border-accent-bright/30 transition-all cursor-pointer bg-transparent"
+        style={{ fontFamily: 'inherit' }}
+      >
+        Browse ClawHub Skills
+      </button>
+      <ClawHubBrowser open={clawHubOpen} onOpenChange={setClawHubOpen} onInstalled={() => loadSkills()} />
+      {skillList.length === 0 ? (
+        <div className="text-center py-12">
+          <p className="text-[13px] text-text-3/60">No skills yet</p>
+          <button
+            onClick={() => setSkillSheetOpen(true)}
+            className="mt-3 px-4 py-2 rounded-[10px] bg-transparent text-accent-bright text-[13px] font-600 cursor-pointer border border-accent-bright/20 hover:bg-accent-soft transition-all"
+            style={{ fontFamily: 'inherit' }}
+          >
+            + Add Skill
+          </button>
+        </div>
+      ) : (
+        <div className="space-y-2">
+          {skillList.map((skill) => (
+            <button
+              key={skill.id}
+              onClick={() => handleEdit(skill.id)}
+              className="w-full text-left p-4 rounded-[14px] border border-white/[0.06] bg-surface hover:bg-surface-2 transition-all cursor-pointer"
+            >
+              <div className="flex items-center justify-between mb-1">
+                <span className="font-display text-[14px] font-600 text-text truncate">{skill.name}</span>
+                <span className="text-[10px] font-mono text-text-3/50 shrink-0 ml-2">{skill.filename}</span>
+              </div>
+              {skill.description && (
+                <p className="text-[12px] text-text-3/60 line-clamp-2">{skill.description}</p>
+              )}
+              <div className="text-[11px] text-text-3/70 mt-1.5">
+                {skill.content.length} chars
+              </div>
+            </button>
+          ))}
+        </div>
+      )}
+    </div>
+  )
+}

package/src/components/skills/skill-sheet.tsx

@@ -0,0 +1,254 @@
+'use client'
+
+import { useEffect, useState, useRef } from 'react'
+import { useAppStore } from '@/stores/use-app-store'
+import { BottomSheet } from '@/components/shared/bottom-sheet'
+import { AiGenBlock } from '@/components/shared/ai-gen-block'
+import { api } from '@/lib/api-client'
+
+export function SkillSheet() {
+  const open = useAppStore((s) => s.skillSheetOpen)
+  const setOpen = useAppStore((s) => s.setSkillSheetOpen)
+  const editingId = useAppStore((s) => s.editingSkillId)
+  const setEditingId = useAppStore((s) => s.setEditingSkillId)
+  const skills = useAppStore((s) => s.skills)
+  const loadSkills = useAppStore((s) => s.loadSkills)
+  const fileRef = useRef<HTMLInputElement>(null)
+
+  const [name, setName] = useState('')
+  const [filename, setFilename] = useState('')
+  const [description, setDescription] = useState('')
+  const [content, setContent] = useState('')
+  const [importUrl, setImportUrl] = useState('')
+  const [importingUrl, setImportingUrl] = useState(false)
+  const [importError, setImportError] = useState('')
+  const [importNotice, setImportNotice] = useState('')
+
+  // AI generation state
+  const [aiPrompt, setAiPrompt] = useState('')
+  const [generating, setGenerating] = useState(false)
+  const [generated, setGenerated] = useState(false)
+  const [genError, setGenError] = useState('')
+  const appSettings = useAppStore((s) => s.appSettings)
+  const loadSettings = useAppStore((s) => s.loadSettings)
+
+  const editing = editingId ? skills[editingId] : null
+
+  const handleGenerate = async () => {
+    if (!aiPrompt.trim()) return
+    setGenerating(true)
+    setGenError('')
+    try {
+      const result = await api<{ name?: string; description?: string; content?: string; error?: string }>('POST', '/generate', { type: 'skill', prompt: aiPrompt })
+      if (result.error) {
+        setGenError(result.error)
+      } else if (result.name || result.content) {
+        if (result.name) { setName(result.name); setFilename(`${result.name.toLowerCase().replace(/\s+/g, '-')}.md`) }
+        if (result.description) setDescription(result.description)
+        if (result.content) setContent(result.content)
+        setGenerated(true)
+      } else {
+        setGenError('AI returned empty response — try again')
+      }
+    } catch (err: unknown) {
+      setGenError(err instanceof Error ? err.message : 'Generation failed')
+    }
+    setGenerating(false)
+  }
+
+  const handleImportFromUrl = async () => {
+    if (!importUrl.trim()) return
+    setImportingUrl(true)
+    setImportError('')
+    setImportNotice('')
+    try {
+      const result = await api<{ name: string; filename: string; description?: string; content: string; sourceFormat?: 'openclaw' | 'plain' }>('POST', '/skills/import', { url: importUrl.trim() })
+      setName(result.name || '')
+      setFilename(result.filename || '')
+      setDescription(result.description || '')
+      setContent(result.content || '')
+      if (result.sourceFormat === 'openclaw') {
+        setImportNotice('Imported OpenClaw SKILL.md format and stripped frontmatter automatically.')
+      } else {
+        setImportNotice('Skill imported from URL.')
+      }
+      setGenerated(false)
+    } catch (err: unknown) {
+      setImportError(err instanceof Error ? err.message : 'Failed to import skill URL')
+    } finally {
+      setImportingUrl(false)
+    }
+  }
+
+  useEffect(() => {
+    if (open) {
+      loadSettings()
+      setAiPrompt('')
+      setGenerating(false)
+      setGenerated(false)
+      setGenError('')
+      setImportUrl('')
+      setImportingUrl(false)
+      setImportError('')
+      setImportNotice('')
+      if (editing) {
+        setName(editing.name)
+        setFilename(editing.filename)
+        setDescription(editing.description || '')
+        setContent(editing.content)
+      } else {
+        setName('')
+        setFilename('')
+        setDescription('')
+        setContent('')
+      }
+    }
+  }, [open, editingId])
+
+  const onClose = () => {
+    setOpen(false)
+    setEditingId(null)
+  }
+
+  const handleFileUpload = (e: React.ChangeEvent<HTMLInputElement>) => {
+    const file = e.target.files?.[0]
+    if (!file) return
+    const reader = new FileReader()
+    reader.onload = (ev) => {
+      const text = ev.target?.result as string
+      setContent(text)
+      if (!name) setName(file.name.replace(/\.\w+$/, '').replace(/[-_]/g, ' '))
+      if (!filename) setFilename(file.name)
+    }
+    reader.readAsText(file)
+    e.target.value = ''
+  }
+
+  const handleSave = async () => {
+    const data = {
+      name: name.trim() || 'Unnamed Skill',
+      filename: filename.trim() || `${name.trim().toLowerCase().replace(/\s+/g, '-')}.md`,
+      description,
+      content,
+    }
+    if (editing) {
+      await api('PUT', `/skills/${editing.id}`, data)
+    } else {
+      await api('POST', '/skills', data)
+    }
+    await loadSkills()
+    onClose()
+  }
+
+  const handleDelete = async () => {
+    if (editing) {
+      await api('DELETE', `/skills/${editing.id}`)
+      await loadSkills()
+      onClose()
+    }
+  }
+
+  const inputClass = "w-full px-4 py-3.5 rounded-[14px] border border-white/[0.08] bg-surface text-text text-[15px] outline-none transition-all duration-200 placeholder:text-text-3/50 focus-glow"
+
+  return (
+    <BottomSheet open={open} onClose={onClose} wide>
+      <div className="mb-10">
+        <h2 className="font-display text-[28px] font-700 tracking-[-0.03em] mb-2">
+          {editing ? 'Edit Skill' : 'New Skill'}
+        </h2>
+        <p className="text-[14px] text-text-3">Upload or write a reusable instruction set for agents</p>
+      </div>
+
+      {/* AI Generation */}
+      {!editing && <AiGenBlock
+        aiPrompt={aiPrompt} setAiPrompt={setAiPrompt}
+        generating={generating} generated={generated} genError={genError}
+        onGenerate={handleGenerate} appSettings={appSettings}
+        placeholder='Describe the skill, e.g. "A frontend design skill for building polished React components with Tailwind"'
+      />}
+
+      {/* File upload */}
+      {!editing && (
+        <div className="mb-8">
+          <label
+            onClick={() => fileRef.current?.click()}
+            className="flex items-center justify-center gap-2.5 w-full py-4 rounded-[14px] border border-dashed border-white/[0.1] bg-transparent text-text-3 text-[14px] font-600 cursor-pointer hover:border-accent-bright/30 hover:text-accent-bright hover:bg-accent-soft transition-all duration-200"
+          >
+            <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round">
+              <path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4" />
+              <polyline points="17 8 12 3 7 8" />
+              <line x1="12" y1="3" x2="12" y2="15" />
+            </svg>
+            Upload .md file
+          </label>
+          <input ref={fileRef} type="file" accept=".md,.txt,.markdown" onChange={handleFileUpload} className="hidden" />
+        </div>
+      )}
+
+      {!editing && (
+        <div className="mb-8 p-4 rounded-[14px] border border-white/[0.08] bg-surface">
+          <label className="block font-display text-[11px] font-600 text-text-3 uppercase tracking-[0.08em] mb-3">Import from URL</label>
+          <div className="flex gap-2">
+            <input
+              type="url"
+              value={importUrl}
+              onChange={(e) => setImportUrl(e.target.value)}
+              placeholder="https://.../SKILL.md"
+              className={`${inputClass} flex-1`}
+              style={{ fontFamily: 'inherit' }}
+            />
+            <button
+              onClick={handleImportFromUrl}
+              disabled={importingUrl || !importUrl.trim()}
+              className="px-4 py-3 rounded-[12px] border-none bg-[#6366F1] text-white text-[13px] font-600 cursor-pointer disabled:opacity-30 transition-all hover:brightness-110"
+              style={{ fontFamily: 'inherit' }}
+            >
+              {importingUrl ? 'Importing...' : 'Import'}
+            </button>
+          </div>
+          {importError && <p className="mt-2 text-[12px] text-red-400/80">{importError}</p>}
+          {importNotice && <p className="mt-2 text-[12px] text-emerald-400/80">{importNotice}</p>}
+        </div>
+      )}
+
+      <div className="mb-8">
+        <label className="block font-display text-[12px] font-600 text-text-2 uppercase tracking-[0.08em] mb-3">Name</label>
+        <input type="text" value={name} onChange={(e) => setName(e.target.value)} placeholder="e.g. Frontend Design" className={inputClass} style={{ fontFamily: 'inherit' }} />
+      </div>
+
+      <div className="mb-8">
+        <label className="block font-display text-[12px] font-600 text-text-2 uppercase tracking-[0.08em] mb-3">
+          Description <span className="normal-case tracking-normal font-normal text-text-3">(optional)</span>
+        </label>
+        <input type="text" value={description} onChange={(e) => setDescription(e.target.value)} placeholder="Short summary of what this skill does" className={inputClass} style={{ fontFamily: 'inherit' }} />
+      </div>
+
+      <div className="mb-8">
+        <label className="block font-display text-[12px] font-600 text-text-2 uppercase tracking-[0.08em] mb-3">Content</label>
+        <textarea
+          value={content}
+          onChange={(e) => setContent(e.target.value)}
+          placeholder="# Skill Instructions&#10;&#10;Write your skill content in markdown..."
+          rows={10}
+          className={`${inputClass} resize-y min-h-[200px] font-mono text-[13px]`}
+          style={{ fontFamily: 'inherit' }}
+        />
+        <p className="text-[11px] text-text-3/70 mt-2">{content.length} characters</p>
+      </div>
+
+      <div className="flex gap-3 pt-2 border-t border-white/[0.04]">
+        {editing && (
+          <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>
+        )}
+        <button onClick={onClose} className="flex-1 py-3.5 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>
+        <button onClick={handleSave} disabled={!name.trim() || !content.trim()} className="flex-1 py-3.5 rounded-[14px] border-none bg-[#6366F1] 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' }}>
+          {editing ? 'Save' : 'Create'}
+        </button>
+      </div>
+    </BottomSheet>
+  )
+}

package/src/components/tasks/task-board.tsx

@@ -0,0 +1,96 @@
+'use client'
+
+import { useEffect, useCallback, useState } from 'react'
+import { useAppStore } from '@/stores/use-app-store'
+import { updateTask } from '@/lib/tasks'
+import { TaskColumn } from './task-column'
+import type { BoardTaskStatus } from '@/types'
+
+const ACTIVE_COLUMNS: BoardTaskStatus[] = ['backlog', 'queued', 'running', 'completed', 'failed']
+
+export function TaskBoard() {
+  const tasks = useAppStore((s) => s.tasks)
+  const loadTasks = useAppStore((s) => s.loadTasks)
+  const loadAgents = useAppStore((s) => s.loadAgents)
+  const setTaskSheetOpen = useAppStore((s) => s.setTaskSheetOpen)
+  const setEditingTaskId = useAppStore((s) => s.setEditingTaskId)
+  const agents = useAppStore((s) => s.agents)
+  const showArchived = useAppStore((s) => s.showArchivedTasks)
+  const setShowArchived = useAppStore((s) => s.setShowArchivedTasks)
+  const [filterAgentId, setFilterAgentId] = useState<string>('')
+
+  useEffect(() => {
+    loadTasks()
+    loadAgents()
+    const interval = setInterval(loadTasks, 5000)
+    return () => clearInterval(interval)
+  }, [])
+
+  const columns: BoardTaskStatus[] = showArchived ? [...ACTIVE_COLUMNS, 'archived'] : ACTIVE_COLUMNS
+
+  const tasksByStatus = (status: BoardTaskStatus) =>
+    Object.values(tasks)
+      .filter((t) => t.status === status && (!filterAgentId || t.agentId === filterAgentId))
+      .sort((a, b) => b.updatedAt - a.updatedAt)
+
+  const handleDrop = useCallback(async (taskId: string, newStatus: BoardTaskStatus) => {
+    const task = tasks[taskId]
+    if (!task || task.status === newStatus) return
+    await updateTask(taskId, { status: newStatus })
+    await loadTasks()
+  }, [tasks, loadTasks])
+
+  const archivedCount = Object.values(tasks).filter((t) => t.status === 'archived').length
+
+  return (
+    <div className="flex-1 flex flex-col h-full overflow-hidden">
+      <div className="flex items-center justify-between px-8 pt-6 pb-4 shrink-0">
+        <div>
+          <h1 className="font-display text-[28px] font-800 tracking-[-0.03em]">Task Board</h1>
+          <p className="text-[13px] text-text-3 mt-1">Create tasks and assign orchestrators to run them sequentially</p>
+        </div>
+        <div className="flex items-center gap-3">
+          <select
+            value={filterAgentId}
+            onChange={(e) => setFilterAgentId(e.target.value)}
+            className="px-3 py-2 rounded-[10px] text-[13px] font-600 cursor-pointer transition-all border
+              bg-transparent border-white/[0.06] text-text-3 hover:bg-white/[0.03] appearance-none"
+            style={{ fontFamily: 'inherit', minWidth: 130 }}
+          >
+            <option value="">All Agents</option>
+            {Object.values(agents).map((a) => (
+              <option key={a.id} value={a.id}>{a.name}</option>
+            ))}
+          </select>
+          <button
+            onClick={() => setShowArchived(!showArchived)}
+            className={`px-4 py-2 rounded-[10px] text-[13px] font-600 cursor-pointer transition-all border
+              ${showArchived
+                ? 'bg-white/[0.06] border-white/[0.1] text-text-2'
+                : 'bg-transparent border-white/[0.06] text-text-3 hover:bg-white/[0.03]'}`}
+            style={{ fontFamily: 'inherit' }}
+          >
+            {showArchived ? 'Hide' : 'Show'} Archived{!showArchived && archivedCount > 0 ? '' : ''}
+          </button>
+          <button
+            onClick={() => {
+              setEditingTaskId(null)
+              setTaskSheetOpen(true)
+            }}
+            className="px-5 py-2.5 rounded-[12px] border-none bg-[#6366F1] text-white text-[14px] font-600 cursor-pointer
+              hover:brightness-110 active:scale-[0.97] transition-all shadow-[0_2px_12px_rgba(99,102,241,0.2)]"
+            style={{ fontFamily: 'inherit' }}
+          >
+            + New Task
+          </button>
+        </div>
+      </div>
+
+      <div className="flex-1 flex gap-5 px-8 pb-6 overflow-x-auto overflow-y-hidden">
+        {columns.map((status) => (
+          <TaskColumn key={status} status={status} tasks={tasksByStatus(status)} onDrop={handleDrop} />
+        ))}
+      </div>
+    </div>
+  )
+}