@swarmclawai/swarmclaw 0.3.0 → 0.4.0

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

@@ -1,8 +1,28 @@
 'use client'
 
-import { useEffect, useState } from 'react'
+import { useEffect, useState, useCallback } from 'react'
 import { useAppStore } from '@/stores/use-app-store'
+import { api } from '@/lib/api-client'
+import { Badge } from '@/components/ui/badge'
 import { ClawHubBrowser } from './clawhub-browser'
+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
+}
 
 export function SkillList({ inSidebar }: { inSidebar?: boolean }) {
   const skills = useAppStore((s) => s.skills)
@@ -11,6 +31,17 @@ export function SkillList({ inSidebar }: { inSidebar?: boolean }) {
   const setEditingSkillId = useAppStore((s) => s.setEditingSkillId)
   const [clawHubOpen, setClawHubOpen] = useState(false)
 
+  // Embedded ClawHub state (full-width only)
+  const [tab, setTab] = useState<'skills' | 'clawhub'>('skills')
+  const [hubQuery, setHubQuery] = useState('')
+  const [hubSkills, setHubSkills] = useState<ClawHubSkill[]>([])
+  const [hubPage, setHubPage] = useState(1)
+  const [hubTotal, setHubTotal] = useState(0)
+  const [hubLoading, setHubLoading] = useState(false)
+  const [hubSearched, setHubSearched] = useState(false)
+  const [hubError, setHubError] = useState<string | null>(null)
+  const [installing, setInstalling] = useState<string | null>(null)
+
   useEffect(() => {
     loadSkills()
   }, [])
@@ -22,49 +53,244 @@ export function SkillList({ inSidebar }: { inSidebar?: boolean }) {
     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>
+  const handleDelete = async (e: React.MouseEvent, id: string) => {
+    e.stopPropagation()
+    await api('DELETE', `/skills/${id}`)
+    loadSkills()
+  }
+
+  // Embedded ClawHub search
+  const searchHub = useCallback(async (q: string, p: number, append = false) => {
+    setHubLoading(true)
+    setHubError(null)
+    try {
+      const res = await api<SearchResponse>('GET', `/clawhub/search?q=${encodeURIComponent(q)}&page=${p}`)
+      if (append) {
+        setHubSkills(prev => [...prev, ...res.skills])
+      } else {
+        setHubSkills(res.skills)
+      }
+      setHubTotal(res.total)
+      setHubPage(res.page)
+      setHubSearched(true)
+    } catch (err) {
+      setHubError(err instanceof Error ? err.message : 'Failed to search ClawHub')
+    } finally {
+      setHubLoading(false)
+    }
+  }, [])
+
+  useEffect(() => {
+    if (!inSidebar && tab === 'clawhub' && !hubSearched) {
+      searchHub('', 1)
+    }
+  }, [tab, inSidebar, hubSearched, searchHub])
+
+  const handleHubSearch = () => {
+    setHubSkills([])
+    searchHub(hubQuery, 1)
+  }
+
+  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}"`)
+      loadSkills()
+    } catch (err) {
+      toast.error(err instanceof Error ? err.message : 'Install failed')
+    } finally {
+      setInstalling(null)
+    }
+  }
+
+  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'}`
+
+  const renderClawHub = () => {
+    const hasMore = hubSkills.length < hubTotal
+
+    return (
+      <div className="space-y-3">
+        <div className="flex gap-2">
+          <input
+            placeholder="Search skills..."
+            value={hubQuery}
+            onChange={(e) => setHubQuery(e.target.value)}
+            onKeyDown={(e) => e.key === 'Enter' && handleHubSearch()}
+            className="flex-1 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' }}
+          />
           <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"
+            onClick={handleHubSearch}
+            disabled={hubLoading}
+            className="px-3.5 py-2 rounded-[10px] text-[12px] font-600 bg-accent-soft text-accent-bright border border-accent-bright/20 hover:bg-accent-soft/80 transition-all cursor-pointer disabled:opacity-50"
             style={{ fontFamily: 'inherit' }}
           >
-            + Add Skill
+            Search
           </button>
         </div>
-      ) : (
-        <div className="space-y-2">
-          {skillList.map((skill) => (
+
+        {hubError && (
+          <div className="text-center py-8">
+            <p className="text-[13px] text-red-400">{hubError}</p>
+            <button onClick={() => searchHub(hubQuery, 1)} className="mt-2 text-[12px] text-text-3/60 hover:text-text-3 cursor-pointer bg-transparent border-none" style={{ fontFamily: 'inherit' }}>
+              Retry
+            </button>
+          </div>
+        )}
+
+        {!hubError && !hubLoading && hubSearched && hubSkills.length === 0 && (
+          <div className="text-center py-8">
+            <p className="text-[13px] text-text-3/60">No skills found</p>
+            {hubQuery && <p className="text-[11px] text-text-3/40 mt-1">Try a different search term</p>}
+          </div>
+        )}
+
+        {hubSkills.length > 0 && (
+          <div className="grid grid-cols-1 md:grid-cols-2 xl:grid-cols-3 gap-3">
+            {hubSkills.map((skill) => (
+              <div
+                key={skill.id}
+                className="p-4 rounded-[14px] border border-white/[0.06] bg-surface"
+              >
+                <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-1.5 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
+                    onClick={() => handleInstall(skill)}
+                    disabled={installing === skill.id}
+                    className="shrink-0 py-2 px-3.5 rounded-[10px] text-[12px] font-600 bg-accent-soft text-accent-bright border border-accent-bright/20 hover:bg-accent-soft/80 transition-all cursor-pointer disabled:opacity-50"
+                    style={{ fontFamily: 'inherit' }}
+                  >
+                    {installing === skill.id ? 'Installing...' : 'Install'}
+                  </button>
+                </div>
+              </div>
+            ))}
+          </div>
+        )}
+
+        {hasMore && (
+          <div className="pt-2 pb-4 text-center">
             <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"
+              onClick={() => searchHub(hubQuery, hubPage + 1, true)}
+              disabled={hubLoading}
+              className="text-[12px] text-text-3/60 hover:text-text-3 cursor-pointer bg-transparent border-none"
+              style={{ fontFamily: 'inherit' }}
             >
-              <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>
+              {hubLoading ? 'Loading...' : 'Load More'}
             </button>
-          ))}
+          </div>
+        )}
+
+        {hubLoading && hubSkills.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>
+    )
+  }
+
+  return (
+    <div className={`flex-1 overflow-y-auto ${inSidebar ? 'px-3 pb-4' : 'px-5 pb-6'}`}>
+      {/* Sidebar: ClawHub button + Sheet */}
+      {inSidebar && (
+        <>
+          <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()} />
+        </>
+      )}
+
+      {/* Full-width: tabs */}
+      {!inSidebar && (
+        <div className="flex gap-1 mb-4">
+          <button onClick={() => setTab('skills')} className={tabClass('skills')} style={{ fontFamily: 'inherit' }}>
+            My Skills
+          </button>
+          <button onClick={() => setTab('clawhub')} className={tabClass('clawhub')} style={{ fontFamily: 'inherit' }}>
+            ClawHub
+          </button>
         </div>
       )}
+
+      {(!inSidebar && tab === 'clawhub') ? renderClawHub() : (
+        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={inSidebar ? 'space-y-2' : 'grid grid-cols-1 md:grid-cols-2 xl:grid-cols-3 gap-3'}>
+            {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>
+                  <div className="flex items-center gap-2 shrink-0 ml-2">
+                    <span className="text-[10px] font-mono text-text-3/50">{skill.filename}</span>
+                    {!inSidebar && (
+                      <button
+                        onClick={(e) => handleDelete(e, skill.id)}
+                        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>
+                    )}
+                  </div>
+                </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

@@ -3,7 +3,6 @@
 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() {
@@ -24,38 +23,8 @@ export function SkillSheet() {
   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)
@@ -72,7 +41,6 @@ export function SkillSheet() {
       } else {
         setImportNotice('Skill imported from URL.')
       }
-      setGenerated(false)
     } catch (err: unknown) {
       setImportError(err instanceof Error ? err.message : 'Failed to import skill URL')
     } finally {
@@ -82,11 +50,6 @@ export function SkillSheet() {
 
   useEffect(() => {
     if (open) {
-      loadSettings()
-      setAiPrompt('')
-      setGenerating(false)
-      setGenerated(false)
-      setGenError('')
       setImportUrl('')
       setImportingUrl(false)
       setImportError('')
@@ -159,14 +122,6 @@ export function SkillSheet() {
         <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">

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

@@ -2,6 +2,7 @@
 
 import { useEffect, useCallback, useState } from 'react'
 import { useAppStore } from '@/stores/use-app-store'
+import { useWs } from '@/hooks/use-ws'
 import { updateTask } from '@/lib/tasks'
 import { TaskColumn } from './task-column'
 import type { BoardTaskStatus } from '@/types'
@@ -19,12 +20,8 @@ export function TaskBoard() {
   const setShowArchived = useAppStore((s) => s.setShowArchivedTasks)
   const [filterAgentId, setFilterAgentId] = useState<string>('')
 
-  useEffect(() => {
-    loadTasks()
-    loadAgents()
-    const interval = setInterval(loadTasks, 5000)
-    return () => clearInterval(interval)
-  }, [])
+  useEffect(() => { loadTasks(); loadAgents() }, [])
+  useWs('tasks', loadTasks, 5000)
 
   const columns: BoardTaskStatus[] = showArchived ? [...ACTIVE_COLUMNS, 'archived'] : ACTIVE_COLUMNS
 

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

@@ -2,6 +2,7 @@
 
 import { useState, useCallback } from 'react'
 import { useAppStore } from '@/stores/use-app-store'
+import { api } from '@/lib/api-client'
 import { updateTask, archiveTask } from '@/lib/tasks'
 import type { BoardTask, BoardTaskStatus } from '@/types'
 
@@ -40,7 +41,7 @@ export function TaskCard({ task }: { task: BoardTask }) {
     e.stopPropagation()
     if (task.sessionId) {
       setCurrentSession(task.sessionId)
-      setActiveView('sessions')
+      setActiveView('agents')
     }
   }
 
@@ -161,6 +162,47 @@ export function TaskCard({ task }: { task: BoardTask }) {
         <p className="mt-2 text-[11px] text-red-400/80 line-clamp-2">{task.error}</p>
       )}
 
+      {/* Pending tool approval */}
+      {task.pendingApproval && (
+        <div className="mt-3 p-3 rounded-[10px] bg-amber-500/[0.08] border border-amber-500/20">
+          <div className="flex items-center gap-2 mb-2">
+            <svg className="w-3.5 h-3.5 text-amber-400" viewBox="0 0 16 16" fill="none">
+              <path d="M8 1l7 14H1L8 1z" stroke="currentColor" strokeWidth="1.5" strokeLinejoin="round" />
+              <path d="M8 6v3M8 11.5v.5" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" />
+            </svg>
+            <span className="text-[11px] font-600 text-amber-400">Approval Required</span>
+          </div>
+          <p className="text-[12px] text-text-2 mb-1 font-600">{task.pendingApproval.toolName}</p>
+          <pre className="text-[10px] text-text-3 bg-black/20 rounded-[6px] px-2 py-1.5 mb-2 overflow-x-auto max-h-[80px] overflow-y-auto whitespace-pre-wrap break-all">
+            {JSON.stringify(task.pendingApproval.args, null, 2).slice(0, 500)}
+          </pre>
+          <div className="flex gap-2">
+            <button
+              onClick={async (e) => {
+                e.stopPropagation()
+                await api('POST', `/tasks/${task.id}/approve`, { approved: true })
+                await loadTasks()
+              }}
+              className="flex-1 px-3 py-1.5 rounded-[8px] text-[11px] font-600 bg-green-500/20 text-green-400 border-none cursor-pointer hover:bg-green-500/30 transition-colors"
+              style={{ fontFamily: 'inherit' }}
+            >
+              Approve
+            </button>
+            <button
+              onClick={async (e) => {
+                e.stopPropagation()
+                await api('POST', `/tasks/${task.id}/approve`, { approved: false })
+                await loadTasks()
+              }}
+              className="flex-1 px-3 py-1.5 rounded-[8px] text-[11px] font-600 bg-red-500/20 text-red-400 border-none cursor-pointer hover:bg-red-500/30 transition-colors"
+              style={{ fontFamily: 'inherit' }}
+            >
+              Reject
+            </button>
+          </div>
+        </div>
+      )}
+
       {/* Inline comments — show latest 2 */}
       {task.comments && task.comments.length > 0 && (
         <div className="mt-3 pt-3 border-t border-white/[0.04] space-y-2">

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

@@ -2,6 +2,7 @@
 
 import { useEffect, useMemo, useState } from 'react'
 import { useAppStore } from '@/stores/use-app-store'
+import { useWs } from '@/hooks/use-ws'
 import { api } from '@/lib/api-client'
 import type { BoardTaskStatus } from '@/types'
 
@@ -23,11 +24,8 @@ export function TaskList({ inSidebar }: { inSidebar?: boolean }) {
   const [search, setSearch] = useState('')
   const [clearing, setClearing] = useState(false)
 
-  useEffect(() => {
-    loadTasks()
-    const interval = setInterval(loadTasks, 5000)
-    return () => clearInterval(interval)
-  }, [])
+  useEffect(() => { loadTasks() }, [])
+  useWs('tasks', loadTasks, 5000)
 
   const sorted = useMemo(() =>
     Object.values(tasks).sort((a, b) => b.updatedAt - a.updatedAt),

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

@@ -3,9 +3,7 @@
 import { useEffect, useState } from 'react'
 import { useAppStore } from '@/stores/use-app-store'
 import { createTask, updateTask, archiveTask, unarchiveTask } from '@/lib/tasks'
-import { api } from '@/lib/api-client'
 import { BottomSheet } from '@/components/shared/bottom-sheet'
-import { AiGenBlock } from '@/components/shared/ai-gen-block'
 import { DirBrowser } from '@/components/shared/dir-browser'
 import type { BoardTask, TaskComment } from '@/types'
 
@@ -36,46 +34,12 @@ export function TaskSheet() {
   const [cwd, setCwd] = useState('')
   const [file, setFile] = useState<string | null>(null)
 
-  // 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 ? tasks[editingId] : null
   const orchestrators = Object.values(agents).filter((p) => p.isOrchestrator)
 
-  const handleGenerate = async () => {
-    if (!aiPrompt.trim()) return
-    setGenerating(true)
-    setGenError('')
-    try {
-      const result = await api<{ title?: string; description?: string; error?: string }>('POST', '/generate', { type: 'task', prompt: aiPrompt })
-      if (result.error) {
-        setGenError(result.error)
-      } else if (result.title || result.description) {
-        if (result.title) setTitle(result.title)
-        if (result.description) setDescription(result.description)
-        setGenerated(true)
-      } else {
-        setGenError('AI returned empty response — try again')
-      }
-    } catch (err: unknown) {
-      setGenError(err instanceof Error ? err.message : 'Generation failed')
-    }
-    setGenerating(false)
-  }
-
   useEffect(() => {
     if (open) {
       loadAgents()
-      loadSettings()
-      setAiPrompt('')
-      setGenerating(false)
-      setGenerated(false)
-      setGenError('')
       if (editing) {
         setTitle(editing.title)
         setDescription(editing.description)
@@ -185,14 +149,6 @@ export function TaskSheet() {
         </p>
       </div>
 
-      {/* AI Generation */}
-      {!editing && <AiGenBlock
-        aiPrompt={aiPrompt} setAiPrompt={setAiPrompt}
-        generating={generating} generated={generated} genError={genError}
-        onGenerate={handleGenerate} appSettings={appSettings}
-        placeholder='Describe the task, e.g. "Audit all pages on example.com for SEO issues and broken links"'
-      />}
-
       <div className="mb-8">
         <label className="block font-display text-[12px] font-600 text-text-2 uppercase tracking-[0.08em] mb-3">Title</label>
         <input

package/src/components/usage/usage-list.tsx

@@ -52,9 +52,9 @@ export function UsageList() {
   }
 
   return (
-    <div className="flex-1 overflow-y-auto px-3 pb-20">
+    <div className="flex-1 overflow-y-auto px-5 pb-8">
       {/* Summary */}
-      <div className="grid grid-cols-2 gap-2 mb-4 mt-1">
+      <div className="grid grid-cols-2 md:grid-cols-4 gap-3 mb-4 mt-1">
         <div className="p-3 rounded-[12px] bg-white/[0.03] border border-white/[0.06]">
           <div className="text-[10px] font-600 text-text-3 uppercase tracking-wider mb-1">Total Cost</div>
           <div className="text-[18px] font-700 text-text tracking-tight">{formatCost(data.totalCost)}</div>
@@ -63,15 +63,23 @@ export function UsageList() {
           <div className="text-[10px] font-600 text-text-3 uppercase tracking-wider mb-1">Total Tokens</div>
           <div className="text-[18px] font-700 text-text tracking-tight">{formatTokens(data.totalTokens)}</div>
         </div>
+        <div className="p-3 rounded-[12px] bg-white/[0.03] border border-white/[0.06]">
+          <div className="text-[10px] font-600 text-text-3 uppercase tracking-wider mb-1">Total Requests</div>
+          <div className="text-[18px] font-700 text-text tracking-tight">{providers.reduce((sum, [, s]) => sum + s.requests, 0)}</div>
+        </div>
+        <div className="p-3 rounded-[12px] bg-white/[0.03] border border-white/[0.06]">
+          <div className="text-[10px] font-600 text-text-3 uppercase tracking-wider mb-1">Providers</div>
+          <div className="text-[18px] font-700 text-text tracking-tight">{providers.length}</div>
+        </div>
       </div>
 
       {/* Provider breakdown */}
       <div className="mb-2">
-        <h3 className="text-[11px] font-600 text-text-3 uppercase tracking-wider px-1 mb-2">By Provider</h3>
+        <h3 className="text-[11px] font-600 text-text-3 uppercase tracking-wider mb-2">By Provider</h3>
         {providers.length === 0 ? (
           <div className="text-center py-6 text-[12px] text-text-3/60">No usage data yet</div>
         ) : (
-          <div className="space-y-1.5">
+          <div className="grid grid-cols-1 md:grid-cols-2 gap-3">
             {providers.map(([provider, stats]) => {
               const pct = data.totalCost > 0 ? (stats.cost / data.totalCost) * 100 : 0
               return (