@swarmclawai/swarmclaw 0.3.0 → 0.4.0

package/src/lib/upload.ts

@@ -1,10 +1,16 @@
 import type { UploadResult } from '../types'
+import { getStoredAccessKey } from './api-client'
 
 export async function uploadImage(file: File): Promise<UploadResult> {
+  const key = getStoredAccessKey()
   const res = await fetch('/api/upload', {
     method: 'POST',
-    headers: { 'X-Filename': file.name },
+    headers: {
+      'X-Filename': file.name,
+      ...(key ? { 'X-Access-Key': key } : {}),
+    },
     body: file,
   })
+  if (!res.ok) throw new Error(`Upload failed (${res.status})`)
   return res.json()
 }

package/src/lib/ws-client.ts

@@ -0,0 +1,124 @@
+type WsCallback = () => void
+
+let ws: WebSocket | null = null
+let accessKey = ''
+let reconnectTimer: ReturnType<typeof setTimeout> | null = null
+let reconnectDelay = 1000
+const MAX_RECONNECT_DELAY = 30_000
+const listeners = new Map<string, Set<WsCallback>>()
+let connected = false
+
+function getWsUrl(key: string): string {
+  const host = typeof window !== 'undefined' ? window.location.hostname : 'localhost'
+  const port = process.env.NEXT_PUBLIC_WS_PORT || '3457'
+  const protocol = typeof window !== 'undefined' && window.location.protocol === 'https:' ? 'wss' : 'ws'
+  return `${protocol}://${host}:${port}/ws?key=${encodeURIComponent(key)}`
+}
+
+function handleMessage(event: MessageEvent) {
+  try {
+    const msg = JSON.parse(event.data)
+    const topic = msg.topic as string
+    if (!topic) return
+    const cbs = listeners.get(topic)
+    if (cbs) {
+      for (const cb of cbs) cb()
+    }
+  } catch {
+    // ignore malformed
+  }
+}
+
+function scheduleReconnect() {
+  if (reconnectTimer) return
+  reconnectTimer = setTimeout(() => {
+    reconnectTimer = null
+    if (!accessKey) return
+    connect(accessKey)
+  }, reconnectDelay)
+  reconnectDelay = Math.min(reconnectDelay * 2, MAX_RECONNECT_DELAY)
+}
+
+function connect(key: string) {
+  if (ws && (ws.readyState === WebSocket.OPEN || ws.readyState === WebSocket.CONNECTING)) return
+
+  try {
+    ws = new WebSocket(getWsUrl(key))
+  } catch {
+    scheduleReconnect()
+    return
+  }
+
+  ws.onopen = () => {
+    connected = true
+    reconnectDelay = 1000
+    // Subscribe to all currently registered topics
+    const topics = Array.from(listeners.keys())
+    if (topics.length > 0) {
+      ws?.send(JSON.stringify({ type: 'subscribe', topics }))
+    }
+  }
+
+  ws.onmessage = handleMessage
+
+  ws.onclose = () => {
+    connected = false
+    ws = null
+    if (accessKey) scheduleReconnect()
+  }
+
+  ws.onerror = () => {
+    // onclose will fire after this
+  }
+}
+
+export function connectWs(key: string) {
+  accessKey = key
+  reconnectDelay = 1000
+  connect(key)
+}
+
+export function disconnectWs() {
+  accessKey = ''
+  if (reconnectTimer) {
+    clearTimeout(reconnectTimer)
+    reconnectTimer = null
+  }
+  if (ws) {
+    ws.onclose = null
+    ws.close()
+    ws = null
+  }
+  connected = false
+}
+
+export function subscribeWs(topic: string, callback: WsCallback) {
+  let set = listeners.get(topic)
+  const isNew = !set
+  if (!set) {
+    set = new Set()
+    listeners.set(topic, set)
+  }
+  set.add(callback)
+
+  // Tell server about new topic subscription
+  if (isNew && ws?.readyState === WebSocket.OPEN) {
+    ws.send(JSON.stringify({ type: 'subscribe', topics: [topic] }))
+  }
+}
+
+export function unsubscribeWs(topic: string, callback: WsCallback) {
+  const set = listeners.get(topic)
+  if (!set) return
+  set.delete(callback)
+  if (set.size === 0) {
+    listeners.delete(topic)
+    if (ws?.readyState === WebSocket.OPEN) {
+      ws.send(JSON.stringify({ type: 'unsubscribe', topics: [topic] }))
+    }
+  }
+}
+
+export function isWsConnected(): boolean {
+  return connected
+}

package/src/stores/use-chat-store.ts

@@ -7,7 +7,7 @@ import { speak } from '../lib/tts'
 import { getStoredAccessKey } from '../lib/api-client'
 import { useAppStore } from './use-app-store'
 
-interface PendingImage {
+export interface PendingFile {
   file: File
   path: string
   url: string
@@ -44,8 +44,15 @@ interface ChatState {
   ttsEnabled: boolean
   toggleTts: () => void
 
-  pendingImage: PendingImage | null
-  setPendingImage: (img: PendingImage | null) => void
+  // Multi-file attachment support
+  pendingFiles: PendingFile[]
+  addPendingFile: (f: PendingFile) => void
+  removePendingFile: (index: number) => void
+  clearPendingFiles: () => void
+
+  // Legacy single-image compat (reads first pendingFile)
+  pendingImage: PendingFile | null
+  setPendingImage: (img: PendingFile | null) => void
 
   devServer: DevServerStatus | null
   setDevServer: (ds: DevServerStatus | null) => void
@@ -70,21 +77,34 @@ export const useChatStore = create<ChatState>((set, get) => ({
   lastUsage: null,
   ttsEnabled: false,
   toggleTts: () => set((s) => ({ ttsEnabled: !s.ttsEnabled })),
-  pendingImage: null,
-  setPendingImage: (img) => set({ pendingImage: img }),
+
+  pendingFiles: [],
+  addPendingFile: (f) => set((s) => ({ pendingFiles: [...s.pendingFiles, f] })),
+  removePendingFile: (index) => set((s) => ({ pendingFiles: s.pendingFiles.filter((_, i) => i !== index) })),
+  clearPendingFiles: () => set({ pendingFiles: [] }),
+
+  // Legacy compat: pendingImage reads/writes the first pending file
+  get pendingImage() { const files = get().pendingFiles; return files.length ? files[0] : null },
+  setPendingImage: (img) => set({ pendingFiles: img ? [img] : [] }),
+
   devServer: null,
   setDevServer: (ds) => set({ devServer: ds }),
   debugOpen: false,
   setDebugOpen: (open) => set({ debugOpen: open }),
 
   sendMessage: async (text: string) => {
-    if (!text.trim() || get().streaming) return
+    const { pendingFiles } = get()
+    if ((!text.trim() && !pendingFiles.length) || get().streaming) return
     const sessionId = useAppStore.getState().currentSessionId
     if (!sessionId) return
 
-    const { pendingImage } = get()
-    const imagePath = pendingImage?.path
-    const imageUrl = pendingImage?.url
+    // Primary image (backward compat)
+    const imagePath = pendingFiles[0]?.path
+    const imageUrl = pendingFiles[0]?.url
+    // All attached file paths
+    const attachedFiles = pendingFiles.length > 1
+      ? pendingFiles.map((f) => f.path)
+      : undefined
 
     const userMsg: Message = {
       role: 'user',
@@ -92,13 +112,14 @@ export const useChatStore = create<ChatState>((set, get) => ({
       time: Date.now(),
       imagePath,
       imageUrl,
+      attachedFiles,
     }
     set((s) => ({
       streaming: true,
       streamingSessionId: sessionId,
       streamText: '',
       messages: [...s.messages, userMsg],
-      pendingImage: null,
+      pendingFiles: [],
       toolEvents: [],
       lastUsage: null,
     }))
@@ -166,7 +187,7 @@ export const useChatStore = create<ChatState>((set, get) => ({
       } else if (event.t === 'done') {
         // done
       }
-    })
+    }, attachedFiles)
 
     if (fullText.trim()) {
       const currentToolEvents = get().toolEvents
@@ -218,9 +239,8 @@ export const useChatStore = create<ChatState>((set, get) => ({
         set({ messages: msgs })
       }
       // Re-send the last user message through the normal SSE flow
-      // Temporarily set pendingImage if there was one
       if (imagePath) {
-        set({ pendingImage: { file: new File([], ''), path: imagePath, url: '' } })
+        set({ pendingFiles: [{ file: new File([], ''), path: imagePath, url: '' }] })
       }
       await get().sendMessage(message)
     } catch {

package/src/types/index.ts

@@ -11,6 +11,7 @@ export interface Message {
   time: number
   imagePath?: string
   imageUrl?: string
+  attachedFiles?: string[]
   toolEvents?: MessageToolEvent[]
   kind?: 'chat' | 'heartbeat' | 'system'
   suppressed?: boolean
@@ -22,6 +23,7 @@ export interface ProviderInfo {
   id: ProviderType
   name: string
   models: string[]
+  defaultModels?: string[]
   requiresApiKey: boolean
   optionalApiKey?: boolean
   requiresEndpoint: boolean
@@ -321,7 +323,7 @@ export interface MemoryEntry {
 }
 
 export type SessionType = 'human' | 'orchestrated'
-export type AppView = 'sessions' | 'agents' | 'schedules' | 'memory' | 'tasks' | 'secrets' | 'providers' | 'skills' | 'connectors' | 'webhooks' | 'mcp_servers' | 'knowledge' | 'plugins' | 'usage' | 'runs' | 'logs'
+export type AppView = 'agents' | 'schedules' | 'memory' | 'tasks' | 'secrets' | 'providers' | 'skills' | 'connectors' | 'webhooks' | 'mcp_servers' | 'knowledge' | 'plugins' | 'usage' | 'runs' | 'logs'
 
 // --- Session Runs ---
 
@@ -588,6 +590,11 @@ export interface BoardTask {
     reasons: string[]
     checkedAt: number
   } | null
+  pendingApproval?: {
+    toolName: string
+    args: Record<string, unknown>
+    threadId: string
+  } | null
 }
 
 // --- MCP Servers ---

package/src/app/api/agents/generate/route.ts

@@ -1,42 +0,0 @@
-import { NextResponse } from 'next/server'
-import { z } from 'zod'
-import { buildLLM } from '@/lib/server/build-llm'
-
-const agentSchema = z.object({
-  name: z.string().describe('Short name for the agent'),
-  description: z.string().describe('One sentence describing what it does'),
-  systemPrompt: z.string().describe('Full system prompt — thorough and specific, at least 3-4 paragraphs'),
-  isOrchestrator: z.boolean().describe('True only if it needs to coordinate multiple sub-agents'),
-})
-
-const GENERATE_PROMPT = `You are a agent generator. The user will describe an AI agent they want to create. Generate a complete agent definition.
-
-Set isOrchestrator to true ONLY if the user describes something that needs to coordinate multiple sub-agents.
-Make the systemPrompt detailed and actionable — at least 3-4 paragraphs. Include specific instructions about how the agent should behave, what it should focus on, and how it should format its responses.`
-
-export async function POST(req: Request) {
-  const { prompt } = await req.json()
-  if (!prompt?.trim()) {
-    return NextResponse.json({ error: 'prompt is required' }, { status: 400 })
-  }
-
-  try {
-    const { llm, provider } = await buildLLM()
-    const structured = provider === 'anthropic'
-      ? llm.withStructuredOutput(agentSchema)
-      : (llm as any).withStructuredOutput(agentSchema, {
-          name: 'agent_definition',
-          method: 'functionCalling',
-        })
-    const result = await structured.invoke([
-      { role: 'system' as const, content: GENERATE_PROMPT },
-      { role: 'user' as const, content: prompt },
-    ], { signal: AbortSignal.timeout(60_000) })
-
-    return NextResponse.json(result)
-  } catch (err: unknown) {
-    const message = err instanceof Error ? err.message : 'Generation failed'
-    console.error('[agent-generate] Error:', message)
-    return NextResponse.json({ error: message }, { status: 500 })
-  }
-}

package/src/app/api/generate/info/route.ts

@@ -1,12 +0,0 @@
-import { NextResponse } from 'next/server'
-import { buildLLM } from '@/lib/server/build-llm'
-
-/** Returns which provider/model the generate endpoints will use */
-export async function GET() {
-  try {
-    const { provider, model } = await buildLLM()
-    return NextResponse.json({ provider, model })
-  } catch (err: any) {
-    return NextResponse.json({ provider: 'none', model: '', error: err.message })
-  }
-}

package/src/app/api/generate/route.ts

@@ -1,106 +0,0 @@
-import { NextResponse } from 'next/server'
-import { z } from 'zod'
-import { buildLLM } from '@/lib/server/build-llm'
-
-const scheduleSchema = z.object({
-  name: z.string().describe('Short descriptive name for the schedule'),
-  taskPrompt: z.string().describe('The prompt/instructions the agent should execute when the schedule fires'),
-  scheduleType: z.enum(['cron', 'interval', 'once']).describe('Type of schedule'),
-  cron: z.string().optional().describe('Cron expression if scheduleType is cron, e.g. "0 9 * * 1" for every Monday at 9am'),
-  intervalMs: z.number().optional().describe('Interval in milliseconds if scheduleType is interval'),
-})
-
-const taskSchema = z.object({
-  title: z.string().describe('Short descriptive title for the task'),
-  description: z.string().describe('Detailed description of what needs to be done'),
-})
-
-const skillSchema = z.object({
-  name: z.string().describe('Short name for the skill'),
-  description: z.string().describe('One sentence describing what this skill does'),
-  content: z.string().describe('Full markdown content of the skill — detailed instructions, at least 3-4 paragraphs'),
-})
-
-const providerSchema = z.object({
-  name: z.string().describe('Display name for the provider, e.g. "Together AI", "Groq", "z.ai"'),
-  baseUrl: z.string().describe('The OpenAI-compatible API base URL, e.g. "https://api.together.xyz/v1" or "https://api.groq.com/openai/v1"'),
-  models: z.string().describe('Comma-separated list of available model IDs, e.g. "llama-3-70b,mixtral-8x7b"'),
-  requiresApiKey: z.boolean().describe('Whether this provider requires an API key'),
-})
-
-const SCHEMAS: Record<string, { schema: z.ZodObject<any>; prompt: string }> = {
-  schedule: {
-    schema: scheduleSchema,
-    prompt: `You are a schedule generator for SwarmClaw, an AI agent orchestration platform. The user will describe what they want scheduled. Generate a complete schedule definition.
-
-Choose the appropriate scheduleType:
-- "cron" for recurring schedules (provide a cron expression)
-- "interval" for periodic execution (provide intervalMs in milliseconds)
-- "once" for one-time execution
-
-Make the taskPrompt detailed and specific — it should contain everything the agent needs to know to complete the task.`,
-  },
-  task: {
-    schema: taskSchema,
-    prompt: `You are a task generator for SwarmClaw, an AI agent orchestration platform. The user will describe a task they want to create. Generate a clear task definition.
-
-Make the description thorough and actionable — include specific goals, acceptance criteria, and any relevant context. The description should give an AI agent enough information to complete the task autonomously.`,
-  },
-  skill: {
-    schema: skillSchema,
-    prompt: `You are a skill generator for SwarmClaw, an AI agent orchestration platform. Skills are reusable markdown instruction sets that get injected into agent system prompts.
-
-The user will describe what skill they want. Generate a comprehensive skill definition with detailed markdown content. The content should be:
-- Written as instructions/guidelines for an AI agent
-- Thorough and specific (at least 3-4 paragraphs)
-- Structured with markdown headings, lists, and examples
-- Focused on actionable guidance the agent can follow`,
-  },
-  provider: {
-    schema: providerSchema,
-    prompt: `You are a provider configuration generator for SwarmClaw, an AI agent orchestration platform. The user will name an LLM provider they want to add.
-
-Generate the correct OpenAI-compatible API configuration. You should know the base URLs and model names for popular providers:
-- Together AI: https://api.together.xyz/v1
-- Groq: https://api.groq.com/openai/v1
-- Fireworks: https://api.fireworks.ai/inference/v1
-- Perplexity: https://api.perplexity.ai
-- Mistral: https://api.mistral.ai/v1
-- DeepSeek: https://api.deepseek.com/v1
-- OpenRouter: https://openrouter.ai/api/v1
-- xAI/Grok: https://api.x.ai/v1
-- z.ai: https://api.z.ai/v1
-
-List the most popular/recommended models for the provider as comma-separated values. Most providers require an API key.
-If you don't know the exact URL, make your best guess based on common patterns (provider domain + /v1).`,
-  },
-}
-
-export async function POST(req: Request) {
-  const { type, prompt } = await req.json()
-  if (!prompt?.trim()) {
-    return NextResponse.json({ error: 'prompt is required' }, { status: 400 })
-  }
-  const config = SCHEMAS[type]
-  if (!config) {
-    return NextResponse.json({ error: `Invalid type: ${type}. Must be one of: ${Object.keys(SCHEMAS).join(', ')}` }, { status: 400 })
-  }
-
-  try {
-    const { llm, provider } = await buildLLM()
-    const structured = provider === 'anthropic'
-      ? llm.withStructuredOutput(config.schema)
-      : (llm as any).withStructuredOutput(config.schema, {
-          name: `${type}_definition`,
-          method: 'functionCalling',
-        })
-    const result = await structured.invoke([
-      { role: 'system' as const, content: config.prompt },
-      { role: 'user' as const, content: prompt },
-    ], { signal: AbortSignal.timeout(60_000) })
-    return NextResponse.json(result)
-  } catch (err: unknown) {
-    const message = err instanceof Error ? err.message : 'Generation failed'
-    return NextResponse.json({ error: message }, { status: 500 })
-  }
-}

package/src/components/shared/ai-gen-block.tsx

@@ -1,77 +0,0 @@
-'use client'
-
-import { useState, useEffect } from 'react'
-import { api } from '@/lib/api-client'
-
-interface Props {
-  aiPrompt: string
-  setAiPrompt: (v: string) => void
-  generating: boolean
-  generated: boolean
-  genError: string
-  onGenerate: () => void
-  appSettings?: Record<string, any>
-  placeholder: string
-}
-
-export function AiGenBlock({ aiPrompt, setAiPrompt, generating, generated, genError, onGenerate, placeholder }: Props) {
-  const [expanded, setExpanded] = useState(false)
-  const [genInfo, setGenInfo] = useState<{ provider: string; model: string } | null>(null)
-
-  useEffect(() => {
-    if (expanded && !genInfo) {
-      api<{ provider: string; model: string }>('GET', '/generate/info')
-        .then(setGenInfo)
-        .catch((err) => console.error('AI gen info fetch failed:', err))
-    }
-  }, [expanded])
-
-  return (
-    <div className="mb-10">
-      <button
-        onClick={() => setExpanded(!expanded)}
-        className="flex items-center gap-2.5 px-4 py-3 rounded-[14px] border border-[#6366F1]/15 bg-[#6366F1]/[0.03] hover:bg-[#6366F1]/[0.06] transition-all cursor-pointer w-full text-left"
-        style={{ fontFamily: 'inherit' }}
-      >
-        <svg width="14" height="14" viewBox="0 0 24 24" fill="none" className="text-accent-bright shrink-0">
-          <path d="M12 2L14.5 9.5L22 12L14.5 14.5L12 22L9.5 14.5L2 12L9.5 9.5L12 2Z" fill="currentColor" />
-        </svg>
-        <span className="font-display text-[13px] font-600 text-accent-bright flex-1">Generate with AI</span>
-        <svg
-          width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round"
-          className={`text-accent-bright/50 transition-transform duration-200 ${expanded ? 'rotate-180' : ''}`}
-        >
-          <polyline points="6 9 12 15 18 9" />
-        </svg>
-      </button>
-
-      {expanded && (
-        <div className="mt-3 p-5 rounded-[18px] border border-[#6366F1]/15 bg-[#6366F1]/[0.03]"
-          style={{ animation: 'fade-in 0.2s ease' }}>
-          <textarea
-            value={aiPrompt}
-            onChange={(e) => setAiPrompt(e.target.value)}
-            placeholder={placeholder}
-            rows={2}
-            className="w-full px-4 py-3 rounded-[12px] border border-[#6366F1]/10 bg-[#6366F1]/[0.02] text-text text-[14px] outline-none transition-all duration-200 placeholder:text-text-3/70 focus:border-[#6366F1]/30 resize-none"
-            style={{ fontFamily: 'inherit' }}
-            autoFocus
-          />
-          <button
-            onClick={onGenerate}
-            disabled={generating || !aiPrompt.trim()}
-            className="mt-3 px-5 py-2.5 rounded-[12px] border-none bg-[#6366F1] text-white text-[13px] font-600 cursor-pointer disabled:opacity-30 transition-all hover:brightness-110 active:scale-[0.97] shadow-[0_2px_12px_rgba(99,102,241,0.2)]"
-            style={{ fontFamily: 'inherit' }}
-          >
-            {generating ? 'Generating...' : generated ? 'Regenerate' : 'Generate'}
-          </button>
-          {generated && <span className="ml-3 text-[12px] text-emerald-400/70">Fields populated — edit below</span>}
-          {genError && <p className="mt-2 text-[12px] text-red-400/80">{genError}</p>}
-          <p className="mt-3 text-[11px] text-text-3/50">
-            Using {genInfo ? `${genInfo.model} via ${genInfo.provider}` : 'auto-detected provider'}
-          </p>
-        </div>
-      )}
-    </div>
-  )
-}