@swarmclawai/swarmclaw 0.3.1 → 0.4.5

package/src/components/mcp-servers/mcp-server-list.tsx

@@ -59,8 +59,19 @@ export function McpServerList({ inSidebar }: { inSidebar?: boolean }) {
     await loadMcpServers()
   }
 
+  const handleRetest = async (e: React.MouseEvent, id: string) => {
+    e.stopPropagation()
+    setStatuses((prev) => ({ ...prev, [id]: { ok: false, loading: true } }))
+    try {
+      const res = await api<{ ok: boolean; tools?: string[]; error?: string }>('POST', `/mcp-servers/${id}/test`)
+      setStatuses((prev) => ({ ...prev, [id]: { ok: res.ok, tools: res.tools, error: res.error, loading: false } }))
+    } catch {
+      setStatuses((prev) => ({ ...prev, [id]: { ok: false, error: 'Test failed', loading: false } }))
+    }
+  }
+
   return (
-    <div className={`flex-1 overflow-y-auto ${inSidebar ? 'px-3 pb-4' : 'px-4'}`}>
+    <div className={`flex-1 overflow-y-auto ${inSidebar ? 'px-3 pb-4' : 'px-5 pb-6'}`}>
       {serverList.length === 0 ? (
         <div className="text-center py-12">
           <p className="text-[13px] text-text-3/60">No MCP servers configured</p>
@@ -73,7 +84,7 @@ export function McpServerList({ inSidebar }: { inSidebar?: boolean }) {
           </button>
         </div>
       ) : (
-        <div className="space-y-2">
+        <div className={inSidebar ? 'space-y-2' : 'grid grid-cols-1 md:grid-cols-2 xl:grid-cols-3 gap-3'}>
           {serverList.map((server) => (
             <button
               key={server.id}
@@ -96,6 +107,17 @@ export function McpServerList({ inSidebar }: { inSidebar?: boolean }) {
                   <span className="font-display text-[14px] font-600 text-text truncate">{server.name}</span>
                 </div>
                 <div className="flex items-center gap-2 shrink-0 ml-2">
+                  {!inSidebar && (
+                    <button
+                      onClick={(e) => handleRetest(e, server.id)}
+                      className="text-text-3/40 hover:text-text-2 transition-colors p-0.5"
+                      title="Re-test connection"
+                    >
+                      <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
+                        <path d="M21 2v6h-6M3 12a9 9 0 0 1 15-6.7L21 8M3 22v-6h6M21 12a9 9 0 0 1-15 6.7L3 16" />
+                      </svg>
+                    </button>
+                  )}
                   <span className={`text-[10px] font-mono px-2 py-0.5 rounded-full ${transportColors[server.transport] || 'bg-white/10 text-text-3'}`}>
                     {server.transport}
                   </span>

package/src/components/memory/memory-detail.tsx

@@ -76,7 +76,7 @@ export function MemoryDetail() {
 
   const handleNavigateToSession = useCallback(() => {
     if (!entry?.sessionId) return
-    setActiveView('sessions')
+    setActiveView('agents')
     setCurrentSession(entry.sessionId)
   }, [entry])
 

package/src/components/plugins/plugin-list.tsx

@@ -1,7 +1,9 @@
 'use client'
 
-import { useEffect } from 'react'
+import { useEffect, useState, useCallback } from 'react'
 import { useAppStore } from '@/stores/use-app-store'
+import { api } from '@/lib/api-client'
+import type { MarketplacePlugin } from '@/types'
 
 export function PluginList({ inSidebar }: { inSidebar?: boolean }) {
   const plugins = useAppStore((s) => s.plugins)
@@ -9,10 +11,31 @@ export function PluginList({ inSidebar }: { inSidebar?: boolean }) {
   const setPluginSheetOpen = useAppStore((s) => s.setPluginSheetOpen)
   const setEditingPluginFilename = useAppStore((s) => s.setEditingPluginFilename)
 
+  const [tab, setTab] = useState<'installed' | 'marketplace'>('installed')
+  const [marketplace, setMarketplace] = useState<MarketplacePlugin[]>([])
+  const [mpLoading, setMpLoading] = useState(false)
+  const [installing, setInstalling] = useState<string | null>(null)
+  const [search, setSearch] = useState('')
+  const [activeTag, setActiveTag] = useState<string | null>(null)
+  const [sort, setSort] = useState<'name' | 'downloads'>('downloads')
+
   useEffect(() => {
     loadPlugins()
   }, [])
 
+  const loadMarketplace = useCallback(async () => {
+    setMpLoading(true)
+    try {
+      const data = await api<MarketplacePlugin[]>('GET', '/plugins/marketplace')
+      if (Array.isArray(data)) setMarketplace(data)
+    } catch { /* ignore */ }
+    setMpLoading(false)
+  }, [])
+
+  useEffect(() => {
+    if (!inSidebar && tab === 'marketplace') loadMarketplace()
+  }, [tab, inSidebar, loadMarketplace])
+
   const pluginList = Object.values(plugins)
 
   const handleEdit = (filename: string) => {
@@ -20,41 +43,218 @@ export function PluginList({ inSidebar }: { inSidebar?: boolean }) {
     setPluginSheetOpen(true)
   }
 
-  return (
-    <div className={`flex-1 overflow-y-auto ${inSidebar ? 'px-3 pb-4' : 'px-4'}`}>
-      {pluginList.length === 0 ? (
-        <div className="text-center py-12">
-          <p className="text-[13px] text-text-3/60">No plugins installed</p>
+  const handleToggle = async (e: React.MouseEvent, filename: string, enabled: boolean) => {
+    e.stopPropagation()
+    await api('POST', '/plugins', { filename, enabled: !enabled })
+    loadPlugins()
+  }
+
+  const handleDelete = async (e: React.MouseEvent, filename: string) => {
+    e.stopPropagation()
+    await api('DELETE', `/plugins/${encodeURIComponent(filename)}`)
+    loadPlugins()
+  }
+
+  const installFromMarketplace = async (p: MarketplacePlugin) => {
+    setInstalling(p.id)
+    try {
+      await api('POST', '/plugins/install', { url: p.url, filename: `${p.id}.js` })
+      await loadPlugins()
+    } catch { /* ignore */ }
+    setInstalling(null)
+  }
+
+  const installedFilenames = new Set(Object.keys(plugins))
+
+  const tabClass = (t: string) =>
+    `py-1.5 px-3.5 rounded-[8px] text-[12px] font-600 cursor-pointer transition-all border
+    ${tab === t
+      ? 'bg-accent-soft border-accent-bright/25 text-accent-bright'
+      : 'bg-transparent border-transparent text-text-3 hover:text-text-2'}`
+
+  // Marketplace tab content (full-width only)
+  const renderMarketplace = () => {
+    if (mpLoading) return <p className="text-[12px] text-text-3/70 py-8 text-center">Loading marketplace...</p>
+    if (marketplace.length === 0) return <p className="text-[12px] text-text-3/70 py-8 text-center">No plugins available</p>
+
+    const allTags = Array.from(new Set(marketplace.flatMap((p) => p.tags))).sort()
+    const q = search.toLowerCase()
+    const filtered = marketplace
+      .filter((p) => {
+        if (q && !p.name.toLowerCase().includes(q) && !p.description.toLowerCase().includes(q) && !p.tags.some((t) => t.toLowerCase().includes(q))) return false
+        if (activeTag && !p.tags.includes(activeTag)) return false
+        return true
+      })
+      .sort((a, b) => sort === 'downloads' ? b.downloads - a.downloads : a.name.localeCompare(b.name))
+
+    return (
+      <div className="space-y-3">
+        <input
+          value={search}
+          onChange={(e) => setSearch(e.target.value)}
+          placeholder="Search plugins..."
+          className="w-full px-3 py-2.5 rounded-[10px] bg-surface border border-white/[0.06] text-[12px] text-text placeholder:text-text-3/50 outline-none focus:border-accent-bright/30"
+          style={{ fontFamily: 'inherit' }}
+        />
+        <div className="flex items-center gap-1.5 flex-wrap">
           <button
-            onClick={() => { setEditingPluginFilename(null); setPluginSheetOpen(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' }}
+            onClick={() => setActiveTag(null)}
+            className={`px-2 py-1 rounded-[6px] text-[10px] font-600 cursor-pointer transition-all border-none ${
+              !activeTag ? 'bg-accent-soft text-accent-bright' : 'bg-white/[0.03] text-text-3/60 hover:text-text-3'
+            }`}
           >
-            + Add Plugin
+            All
           </button>
-        </div>
-      ) : (
-        <div className="space-y-2">
-          {pluginList.map((plugin) => (
+          {allTags.map((t) => (
             <button
-              key={plugin.filename}
-              onClick={() => handleEdit(plugin.filename)}
-              className="w-full text-left p-4 rounded-[14px] border border-white/[0.06] bg-surface hover:bg-surface-2 transition-all cursor-pointer"
+              key={t}
+              onClick={() => setActiveTag(activeTag === t ? null : t)}
+              className={`px-2 py-1 rounded-[6px] text-[10px] font-600 cursor-pointer transition-all border-none ${
+                activeTag === t ? 'bg-accent-soft text-accent-bright' : 'bg-white/[0.03] text-text-3/60 hover:text-text-3'
+              }`}
             >
-              <div className="flex items-center justify-between mb-1">
-                <span className="font-display text-[14px] font-600 text-text truncate">{plugin.name}</span>
-                <span className={`text-[10px] font-600 px-1.5 py-0.5 rounded-full shrink-0 ml-2 ${plugin.enabled ? 'text-emerald-400 bg-emerald-400/10' : 'text-text-3/50 bg-white/[0.04]'}`}>
-                  {plugin.enabled ? 'Enabled' : 'Disabled'}
-                </span>
-              </div>
-              <div className="text-[11px] font-mono text-text-3/50 mb-1">{plugin.filename}</div>
-              {plugin.description && (
-                <p className="text-[12px] text-text-3/60 line-clamp-2">{plugin.description}</p>
-              )}
+              {t}
             </button>
           ))}
+          <div className="flex-1" />
+          <select
+            value={sort}
+            onChange={(e) => setSort(e.target.value as 'name' | 'downloads')}
+            className="px-2 py-1 rounded-[6px] bg-surface border border-white/[0.06] text-[10px] text-text-3 outline-none cursor-pointer appearance-none"
+            style={{ fontFamily: 'inherit' }}
+          >
+            <option value="downloads">Popular</option>
+            <option value="name">A-Z</option>
+          </select>
+        </div>
+        {filtered.length === 0 ? (
+          <p className="text-[12px] text-text-3/50 text-center py-4">No plugins match your search</p>
+        ) : (
+          <div className="grid grid-cols-1 md:grid-cols-2 xl:grid-cols-3 gap-3">
+            {filtered.map((p) => {
+              const isInstalled = installedFilenames.has(`${p.id}.js`)
+              return (
+                <div key={p.id} className="py-3.5 px-4 rounded-[14px] bg-surface border border-white/[0.06]">
+                  <div className="flex items-start gap-3">
+                    <div className="flex-1 min-w-0">
+                      <div className="flex items-center gap-2">
+                        <span className="text-[14px] font-600 text-text">{p.name}</span>
+                        <span className="text-[10px] font-mono text-text-3/70">v{p.version}</span>
+                        {p.openclaw && <span className="text-[9px] font-600 text-emerald-400 bg-emerald-400/10 px-1.5 py-0.5 rounded-full">OpenClaw</span>}
+                      </div>
+                      <div className="text-[11px] text-text-3/60 mt-1 line-clamp-2">{p.description}</div>
+                      <div className="flex items-center gap-2 mt-2">
+                        <span className="text-[10px] text-text-3/70">by {p.author}</span>
+                        <span className="text-[10px] text-text-3/50">&middot;</span>
+                        {p.tags.slice(0, 3).map((t) => (
+                          <button
+                            key={t}
+                            onClick={() => setActiveTag(activeTag === t ? null : t)}
+                            className={`text-[9px] font-600 px-1.5 py-0.5 rounded-full cursor-pointer transition-all border-none ${
+                              activeTag === t ? 'text-accent-bright bg-accent-soft' : 'text-text-3/50 bg-white/[0.04] hover:text-text-3'
+                            }`}
+                          >
+                            {t}
+                          </button>
+                        ))}
+                      </div>
+                    </div>
+                    <button
+                      onClick={() => !isInstalled && installFromMarketplace(p)}
+                      disabled={isInstalled || installing === p.id}
+                      className={`shrink-0 py-2 px-4 rounded-[10px] text-[12px] font-600 transition-all cursor-pointer
+                        ${isInstalled
+                          ? 'bg-white/[0.04] text-text-3/70 cursor-default'
+                          : installing === p.id
+                            ? 'bg-accent-soft text-accent-bright animate-pulse'
+                            : 'bg-accent-soft text-accent-bright hover:bg-accent-soft/80 border border-accent-bright/20'}`}
+                      style={{ fontFamily: 'inherit' }}
+                    >
+                      {isInstalled ? 'Installed' : installing === p.id ? 'Installing...' : 'Install'}
+                    </button>
+                  </div>
+                </div>
+              )
+            })}
+          </div>
+        )}
+      </div>
+    )
+  }
+
+  return (
+    <div className={`flex-1 overflow-y-auto ${inSidebar ? 'px-3 pb-4' : 'px-5 pb-6'}`}>
+      {/* Tabs — full-width only */}
+      {!inSidebar && (
+        <div className="flex gap-1 mb-4">
+          <button onClick={() => setTab('installed')} className={tabClass('installed')} style={{ fontFamily: 'inherit' }}>
+            Installed
+          </button>
+          <button onClick={() => setTab('marketplace')} className={tabClass('marketplace')} style={{ fontFamily: 'inherit' }}>
+            Marketplace
+          </button>
         </div>
       )}
+
+      {(!inSidebar && tab === 'marketplace') ? renderMarketplace() : (
+        pluginList.length === 0 ? (
+          <div className="text-center py-12">
+            <p className="text-[13px] text-text-3/60">No plugins installed</p>
+            <button
+              onClick={() => { setEditingPluginFilename(null); setPluginSheetOpen(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 Plugin
+            </button>
+          </div>
+        ) : (
+          <div className={inSidebar ? 'space-y-2' : 'grid grid-cols-1 md:grid-cols-2 xl:grid-cols-3 gap-3'}>
+            {pluginList.map((plugin) => (
+              <button
+                key={plugin.filename}
+                onClick={() => handleEdit(plugin.filename)}
+                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">{plugin.name}</span>
+                  <div className="flex items-center gap-2 shrink-0 ml-2">
+                    {!inSidebar ? (
+                      <>
+                        <div
+                          onClick={(e) => handleToggle(e, plugin.filename, plugin.enabled)}
+                          className={`w-9 h-5 rounded-full transition-all relative cursor-pointer shrink-0
+                            ${plugin.enabled ? 'bg-[#6366F1]' : 'bg-white/[0.08]'}`}
+                        >
+                          <div className={`absolute top-0.5 w-4 h-4 rounded-full bg-white transition-all
+                            ${plugin.enabled ? 'left-[18px]' : 'left-0.5'}`} />
+                        </div>
+                        <button
+                          onClick={(e) => handleDelete(e, plugin.filename)}
+                          className="text-text-3/40 hover:text-red-400 transition-colors p-0.5"
+                          title="Delete"
+                        >
+                          <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round">
+                            <path d="M3 6h18M19 6v14a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V6m3 0V4a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2" />
+                          </svg>
+                        </button>
+                      </>
+                    ) : (
+                      <span className={`text-[10px] font-600 px-1.5 py-0.5 rounded-full ${plugin.enabled ? 'text-emerald-400 bg-emerald-400/10' : 'text-text-3/50 bg-white/[0.04]'}`}>
+                        {plugin.enabled ? 'Enabled' : 'Disabled'}
+                      </span>
+                    )}
+                  </div>
+                </div>
+                <div className="text-[11px] font-mono text-text-3/50 mb-1">{plugin.filename}</div>
+                {plugin.description && (
+                  <p className="text-[12px] text-text-3/60 line-clamp-2">{plugin.description}</p>
+                )}
+              </button>
+            ))}
+          </div>
+        )
+      )}
     </div>
   )
 }

package/src/components/projects/project-list.tsx

@@ -0,0 +1,122 @@
+'use client'
+
+import { useEffect, useMemo, useState } from 'react'
+import { useAppStore } from '@/stores/use-app-store'
+
+export function ProjectList() {
+  const projects = useAppStore((s) => s.projects)
+  const loadProjects = useAppStore((s) => s.loadProjects)
+  const agents = useAppStore((s) => s.agents)
+  const tasks = useAppStore((s) => s.tasks)
+  const setProjectSheetOpen = useAppStore((s) => s.setProjectSheetOpen)
+  const setEditingProjectId = useAppStore((s) => s.setEditingProjectId)
+  const activeProjectFilter = useAppStore((s) => s.activeProjectFilter)
+  const setActiveProjectFilter = useAppStore((s) => s.setActiveProjectFilter)
+  const [search, setSearch] = useState('')
+
+  useEffect(() => { loadProjects() }, [])
+
+  const filtered = useMemo(() => {
+    return Object.values(projects)
+      .filter((p) => {
+        if (search && !p.name.toLowerCase().includes(search.toLowerCase())) return false
+        return true
+      })
+      .sort((a, b) => b.updatedAt - a.updatedAt)
+  }, [projects, search])
+
+  const entityCounts = useMemo(() => {
+    const counts: Record<string, { agents: number; tasks: number }> = {}
+    for (const p of Object.values(projects)) {
+      counts[p.id] = { agents: 0, tasks: 0 }
+    }
+    for (const a of Object.values(agents)) {
+      if (a.projectId && counts[a.projectId]) counts[a.projectId].agents++
+    }
+    for (const t of Object.values(tasks)) {
+      if (t.projectId && counts[t.projectId]) counts[t.projectId].tasks++
+    }
+    return counts
+  }, [projects, agents, tasks])
+
+  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">
+            <path d="M2 20a2 2 0 0 0 2 2h16a2 2 0 0 0 2-2V8l-7-7H4a2 2 0 0 0-2 2v17Z" />
+            <path d="M14 2v7h7" />
+          </svg>
+        </div>
+        <p className="font-display text-[15px] font-600 text-text-2">No projects yet</p>
+        <p className="text-[13px] text-text-3/50">Group agents, tasks, and schedules into projects</p>
+        <button
+          onClick={() => { setEditingProjectId(null); setProjectSheetOpen(true) }}
+          className="inline-flex items-center gap-1.5 px-4 py-2 text-[13px] font-500 text-white bg-accent rounded-lg hover:bg-accent-bright transition-colors"
+        >
+          <span className="text-lg leading-none">+</span> New Project
+        </button>
+      </div>
+    )
+  }
+
+  return (
+    <div className="flex-1 flex flex-col h-full overflow-y-auto">
+      <div className="p-4 pb-0">
+        <div className="flex items-center gap-2 mb-4">
+          <input
+            type="text"
+            value={search}
+            onChange={(e) => setSearch(e.target.value)}
+            placeholder="Search projects..."
+            className="flex-1 px-3 py-2 rounded-lg bg-white/[0.06] border border-white/[0.06] text-[13px] text-text-1 placeholder:text-text-3/40 focus:outline-none focus:border-accent/40"
+            style={{ fontFamily: 'inherit' }}
+          />
+        </div>
+      </div>
+      <div className="flex-1 overflow-y-auto px-4 pb-4 space-y-2">
+        {filtered.map((project) => {
+          const counts = entityCounts[project.id] || { agents: 0, tasks: 0 }
+          const isActive = activeProjectFilter === project.id
+          return (
+            <div
+              key={project.id}
+              className={`group relative p-4 rounded-xl border transition-colors cursor-pointer ${
+                isActive
+                  ? 'bg-accent/10 border-accent/30'
+                  : 'bg-white/[0.03] border-white/[0.06] hover:bg-white/[0.06]'
+              }`}
+              onClick={() => setActiveProjectFilter(isActive ? null : project.id)}
+            >
+              <div className="flex items-start justify-between gap-3">
+                <div className="flex items-center gap-2.5 min-w-0">
+                  {project.color && (
+                    <div className="w-3 h-3 rounded-full shrink-0" style={{ backgroundColor: project.color }} />
+                  )}
+                  <div className="min-w-0">
+                    <div className="font-display text-[14px] font-600 text-text-1 truncate">{project.name}</div>
+                    {project.description && (
+                      <p className="text-[12px] text-text-3/60 mt-0.5 line-clamp-2">{project.description}</p>
+                    )}
+                  </div>
+                </div>
+                <button
+                  onClick={(e) => { e.stopPropagation(); setEditingProjectId(project.id); setProjectSheetOpen(true) }}
+                  className="opacity-0 group-hover:opacity-100 p-1.5 rounded-md hover:bg-white/[0.08] transition-all text-text-3/50 hover:text-text-2"
+                >
+                  <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round">
+                    <path d="M17 3a2.83 2.83 0 1 1 4 4L7.5 20.5 2 22l1.5-5.5Z" />
+                  </svg>
+                </button>
+              </div>
+              <div className="flex items-center gap-3 mt-2.5 text-[11px] text-text-3/50">
+                <span>{counts.agents} agent{counts.agents !== 1 ? 's' : ''}</span>
+                <span>{counts.tasks} task{counts.tasks !== 1 ? 's' : ''}</span>
+              </div>
+            </div>
+          )
+        })}
+      </div>
+    </div>
+  )
+}

package/src/components/projects/project-sheet.tsx

@@ -0,0 +1,135 @@
+'use client'
+
+import { useEffect, useState } from 'react'
+import { useAppStore } from '@/stores/use-app-store'
+import { createProject, updateProject, deleteProject } from '@/lib/projects'
+import { BottomSheet } from '@/components/shared/bottom-sheet'
+import { toast } from 'sonner'
+
+const PROJECT_COLORS = [
+  '#EF4444', '#F97316', '#EAB308', '#22C55E', '#06B6D4',
+  '#3B82F6', '#8B5CF6', '#EC4899', '#6B7280',
+]
+
+const inputClass = 'w-full px-3 py-2.5 rounded-lg bg-white/[0.06] border border-white/[0.06] text-[13px] text-text-1 placeholder:text-text-3/40 focus:outline-none focus:border-accent/40 transition-colors'
+
+export function ProjectSheet() {
+  const open = useAppStore((s) => s.projectSheetOpen)
+  const setOpen = useAppStore((s) => s.setProjectSheetOpen)
+  const editingId = useAppStore((s) => s.editingProjectId)
+  const setEditingId = useAppStore((s) => s.setEditingProjectId)
+  const projects = useAppStore((s) => s.projects)
+  const loadProjects = useAppStore((s) => s.loadProjects)
+
+  const [name, setName] = useState('')
+  const [description, setDescription] = useState('')
+  const [color, setColor] = useState<string | undefined>(undefined)
+
+  const editing = editingId ? projects[editingId] : null
+
+  useEffect(() => {
+    if (open) {
+      if (editing) {
+        setName(editing.name)
+        setDescription(editing.description)
+        setColor(editing.color)
+      } else {
+        setName('')
+        setDescription('')
+        setColor(PROJECT_COLORS[0])
+      }
+    }
+  // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [open, editingId])
+
+  const onClose = () => {
+    setOpen(false)
+    setEditingId(null)
+  }
+
+  const handleSave = async () => {
+    const data = {
+      name: name.trim() || 'Unnamed Project',
+      description,
+      color,
+    }
+    if (editing) {
+      await updateProject(editing.id, data)
+    } else {
+      await createProject(data)
+    }
+    await loadProjects()
+    onClose()
+  }
+
+  const handleDelete = async () => {
+    if (editing) {
+      await deleteProject(editing.id)
+      await loadProjects()
+      onClose()
+      toast.success('Project deleted')
+    }
+  }
+
+  return (
+    <BottomSheet open={open} onClose={onClose}>
+      <h2 className="font-display text-[18px] font-700 text-text mb-6">{editing ? 'Edit Project' : 'New Project'}</h2>
+      <div className="mb-6">
+        <label className="block font-display text-[12px] font-600 text-text-2 uppercase tracking-[0.08em] mb-2">Name</label>
+        <input
+          type="text"
+          value={name}
+          onChange={(e) => setName(e.target.value)}
+          placeholder="e.g. Marketing Site"
+          className={inputClass}
+          style={{ fontFamily: 'inherit' }}
+          autoFocus
+        />
+      </div>
+
+      <div className="mb-6">
+        <label className="block font-display text-[12px] font-600 text-text-2 uppercase tracking-[0.08em] mb-2">Description</label>
+        <textarea
+          value={description}
+          onChange={(e) => setDescription(e.target.value)}
+          placeholder="What is this project about?"
+          className={inputClass + ' min-h-[80px] resize-y'}
+          style={{ fontFamily: 'inherit' }}
+          rows={3}
+        />
+      </div>
+
+      <div className="mb-8">
+        <label className="block font-display text-[12px] font-600 text-text-2 uppercase tracking-[0.08em] mb-2">Color</label>
+        <div className="flex items-center gap-2">
+          {PROJECT_COLORS.map((c) => (
+            <button
+              key={c}
+              type="button"
+              onClick={() => setColor(c)}
+              className={`w-7 h-7 rounded-full transition-all ${color === c ? 'ring-2 ring-offset-2 ring-offset-surface ring-accent scale-110' : 'hover:scale-105'}`}
+              style={{ backgroundColor: c }}
+            />
+          ))}
+        </div>
+      </div>
+
+      <div className="flex items-center gap-3">
+        <button
+          onClick={handleSave}
+          className="flex-1 py-2.5 rounded-lg bg-accent text-white text-[13px] font-600 hover:bg-accent-bright transition-colors"
+        >
+          {editing ? 'Update' : 'Create'} Project
+        </button>
+        {editing && (
+          <button
+            onClick={handleDelete}
+            className="px-4 py-2.5 rounded-lg bg-red-500/10 text-red-400 text-[13px] font-600 hover:bg-red-500/20 transition-colors"
+          >
+            Delete
+          </button>
+        )}
+      </div>
+    </BottomSheet>
+  )
+}