-
- {currentView === 'chat' && conversation ? headerTitle : ''}
-
-
-
-
+ {currentView !== 'workshop' && (
+
+
+ {currentView === 'chat' && conversation ? headerTitle : ''}
+
+
+
+
+
-
-
+ )}
+ {currentView !== 'workshop' &&
}
{renderView()}
diff --git a/src/hooks/useChat.ts b/src/hooks/useChat.ts
index 2289943..d4a8f69 100644
--- a/src/hooks/useChat.ts
+++ b/src/hooks/useChat.ts
@@ -7,6 +7,7 @@ import { useTitleStore } from '@/store/titles'
import { streamChat, abortChat } from '@/services/ai'
import { toolsApi } from '@/services/api'
import type { Message } from '@/types'
+import { workshopCallbacks } from '@/workshop/bridge/ClawBoxEventTap'
export function useChat() {
const chatStore = useChatStore()
@@ -63,9 +64,16 @@ export function useChat() {
await streamChat(
{ sessionKey: convId, prompt, thinking: thinking || 'off' },
{
- onText: (content) => chatStore.appendTextBlock(finalConvId, assistantId, content),
- onReasoning: (content) => chatStore.appendReasoningBlock(finalConvId, assistantId, content),
+ onText: (content) => {
+ chatStore.appendTextBlock(finalConvId, assistantId, content)
+ workshopCallbacks.onText(content)
+ },
+ onReasoning: (content) => {
+ chatStore.appendReasoningBlock(finalConvId, assistantId, content)
+ workshopCallbacks.onReasoning(content)
+ },
onToolStart: (data) => {
+ workshopCallbacks.onToolStart(data)
chatStore.addToolCallBlock(finalConvId, assistantId, {
toolName: data.name,
toolCallId: data.toolCallId,
@@ -97,16 +105,21 @@ export function useChat() {
})
},
onToolUpdate: (data) => chatStore.updateToolCallBlock(finalConvId, assistantId, data.toolCallId, {
+ // Note: tool_update events don't map to a distinct workshop event
toolName: data.name || 'tool',
result: data.result,
status: 'running',
}),
- onToolEnd: (data) => chatStore.updateToolCallBlock(finalConvId, assistantId, data.toolCallId, {
- toolName: data.name || 'tool',
- result: data.result,
- status: data.error ? 'error' : 'completed',
- }),
+ onToolEnd: (data) => {
+ workshopCallbacks.onToolEnd(data)
+ chatStore.updateToolCallBlock(finalConvId, assistantId, data.toolCallId, {
+ toolName: data.name || 'tool',
+ result: data.result,
+ status: data.error ? 'error' : 'completed',
+ })
+ },
onDone: () => {
+ workshopCallbacks.onDone()
chatStore.updateMessage(finalConvId, assistantId, { isLoading: false })
chatStore.setConversationStreaming(finalConvId, false)
if (chatStore.currentConversationId !== finalConvId) {
@@ -114,6 +127,7 @@ export function useChat() {
}
},
onError: (error) => {
+ workshopCallbacks.onError(error)
chatStore.updateMessage(finalConvId, assistantId, {
isLoading: false, error: true,
blocks: [{ type: 'text', content: `Error: ${error}` }],
diff --git a/src/locales/en/translation.json b/src/locales/en/translation.json
index ea49ca0..0693642 100644
--- a/src/locales/en/translation.json
+++ b/src/locales/en/translation.json
@@ -5,8 +5,13 @@
"cron": "Cron",
"plugins": "Plugins",
"skills": "Skills",
+ "workshop": "Workshop",
"settings": "Settings"
},
+ "workshop": {
+ "title": "Workshop",
+ "placeholder": "3D visualization of agent activity. Start a chat to see the workshop come alive."
+ },
"chat": {
"welcomeMessage": "How can I help you?",
"welcomeMessages": [
diff --git a/src/locales/zh/translation.json b/src/locales/zh/translation.json
index 23daca8..4d06af1 100644
--- a/src/locales/zh/translation.json
+++ b/src/locales/zh/translation.json
@@ -5,8 +5,13 @@
"cron": "任务",
"plugins": "插件",
"skills": "技能",
+ "workshop": "工作坊",
"settings": "设置"
},
+ "workshop": {
+ "title": "工作坊",
+ "placeholder": "代理活动的3D可视化。开始对话后，工作坊将活跃起来。"
+ },
"chat": {
"welcomeMessage": "有什么可以帮忙的？",
"welcomeMessages": [
diff --git a/src/workshop/bridge/ClawBoxEventTap.ts b/src/workshop/bridge/ClawBoxEventTap.ts
new file mode 100644
index 0000000..c50289d
--- /dev/null
+++ b/src/workshop/bridge/ClawBoxEventTap.ts
@@ -0,0 +1,52 @@
+/**
+ * ClawBoxEventTap — Hooks into the existing chat streaming callbacks
+ * to forward events to the Workshop EventBridge.
+ *
+ * This is a singleton that wraps the streamChat callbacks to also
+ * publish events to the workshop scene.
+ */
+
+import type { EventBridge } from './EventBridge'
+
+let activeBridge: EventBridge | null = null
+
+/** Set the active bridge instance (called when Workshop mounts) */
+export function setActiveBridge(bridge: EventBridge | null): void {
+ activeBridge = bridge
+}
+
+/** Get the active bridge (used by the callback wrappers) */
+export function getActiveBridge(): EventBridge | null {
+ return activeBridge
+}
+
+/**
+ * Workshop-aware callback wrappers.
+ * These are called alongside the existing chat store callbacks
+ * in useChat.ts to forward events to the workshop.
+ */
+export const workshopCallbacks = {
+ onText: (content: string) => {
+ activeBridge?.onText(content)
+ },
+
+ onReasoning: (content: string) => {
+ activeBridge?.onReasoning(content)
+ },
+
+ onToolStart: (data: { name: string; toolCallId: string; args: Record
}) => {
+ activeBridge?.onToolStart(data)
+ },
+
+ onToolEnd: (data: { toolCallId: string; name?: string; result: string; error?: boolean }) => {
+ activeBridge?.onToolEnd(data)
+ },
+
+ onDone: () => {
+ activeBridge?.onDone()
+ },
+
+ onError: (error: string) => {
+ activeBridge?.onError(error)
+ },
+}
diff --git a/src/workshop/bridge/EventBridge.ts b/src/workshop/bridge/EventBridge.ts
new file mode 100644
index 0000000..4c3b58c
--- /dev/null
+++ b/src/workshop/bridge/EventBridge.ts
@@ -0,0 +1,217 @@
+/**
+ * EventBridge — Translates ClawBox SSE chat events into Vibecraft2 EventBus events.
+ *
+ * This is the key integration layer: ClawBox's streamChat callbacks produce
+ * normalized workshop events which are translated to Vibecraft2's EventBus format.
+ */
+
+import { nanoid } from 'nanoid'
+import { EventBus, type EventContext } from '../events/EventBus'
+import { getStationForTool, type ToolCategory, type StationType, TOOL_STATION_MAP } from '../types'
+import { getToolIcon, getToolContext } from '../utils/ToolUtils'
+import { useWorkshopStore, type WorkshopFeedItem } from '../store/workshop'
+
+/** Map ClawBox tool names to Vibecraft2 tool categories */
+function toolNameToCategory(name: string): ToolCategory {
+ const map: Record = {
+ Read: 'read',
+ Write: 'write',
+ Edit: 'edit',
+ Bash: 'execute',
+ Grep: 'search',
+ Glob: 'search',
+ WebFetch: 'network',
+ WebSearch: 'network',
+ Task: 'delegate',
+ TodoWrite: 'plan',
+ AskUserQuestion: 'interact',
+ NotebookEdit: 'edit',
+ }
+ return map[name] ?? 'other'
+}
+
+export class EventBridge {
+ private bus: EventBus
+ private context: EventContext
+ private activeToolIds = new Map() // toolCallId → toolUseId
+
+ constructor(bus: EventBus, context: EventContext) {
+ this.bus = bus
+ this.context = context
+ }
+
+ updateContext(context: Partial): void {
+ Object.assign(this.context, context)
+ }
+
+ /** Called when SSE emits tool_start */
+ onToolStart(data: { name: string; toolCallId: string; args: Record }): void {
+ const toolUseId = nanoid()
+ this.activeToolIds.set(data.toolCallId, toolUseId)
+
+ this.bus.emit('tool_start', {
+ id: nanoid(),
+ timestamp: Date.now(),
+ type: 'tool_start',
+ agentId: 'clawbox-main',
+ source: 'clawbox',
+ tool: {
+ name: data.name,
+ category: toolNameToCategory(data.name),
+ id: toolUseId,
+ },
+ input: data.args,
+ context: getToolContext(data.name, data.args) ?? undefined,
+ }, this.context)
+
+ // Also emit legacy pre_tool_use for handlers that listen to that
+ this.bus.emit('pre_tool_use', {
+ id: nanoid(),
+ timestamp: Date.now(),
+ type: 'pre_tool_use',
+ sessionId: 'clawbox-main',
+ cwd: '',
+ tool: data.name,
+ toolInput: data.args,
+ toolUseId,
+ }, this.context)
+
+ this.addFeedItem({
+ id: nanoid(),
+ timestamp: Date.now(),
+ type: 'tool_start',
+ label: `${data.name}`,
+ detail: getToolContext(data.name, data.args) ?? undefined,
+ icon: getToolIcon(data.name),
+ })
+ }
+
+ /** Called when SSE emits tool_end */
+ onToolEnd(data: { toolCallId: string; name?: string; result: string; error?: boolean }): void {
+ const toolUseId = this.activeToolIds.get(data.toolCallId) ?? nanoid()
+ this.activeToolIds.delete(data.toolCallId)
+
+ const toolName = data.name ?? 'tool'
+
+ this.bus.emit('tool_end', {
+ id: nanoid(),
+ timestamp: Date.now(),
+ type: 'tool_end',
+ agentId: 'clawbox-main',
+ source: 'clawbox',
+ tool: {
+ name: toolName,
+ category: toolNameToCategory(toolName),
+ id: toolUseId,
+ },
+ success: !data.error,
+ }, this.context)
+
+ this.bus.emit('post_tool_use', {
+ id: nanoid(),
+ timestamp: Date.now(),
+ type: 'post_tool_use',
+ sessionId: 'clawbox-main',
+ cwd: '',
+ tool: toolName,
+ toolInput: {},
+ toolResponse: {},
+ toolUseId,
+ success: !data.error,
+ }, this.context)
+
+ this.addFeedItem({
+ id: nanoid(),
+ timestamp: Date.now(),
+ type: 'tool_end',
+ label: `${toolName} ${data.error ? 'failed' : 'done'}`,
+ detail: data.result?.slice(0, 100),
+ icon: data.error ? '\u274C' : '\u2705',
+ })
+ }
+
+ /** Called when SSE emits text */
+ onText(content: string): void {
+ // Only add feed items for substantial text (debounced)
+ if (content.length > 20) {
+ this.addFeedItem({
+ id: nanoid(),
+ timestamp: Date.now(),
+ type: 'text',
+ label: 'Response',
+ detail: content.slice(0, 80),
+ icon: '\u{1F4AC}',
+ })
+ }
+ }
+
+ /** Called when SSE emits reasoning */
+ onReasoning(content: string): void {
+ this.bus.emit('agent_thinking', {
+ id: nanoid(),
+ timestamp: Date.now(),
+ type: 'agent_thinking',
+ agentId: 'clawbox-main',
+ source: 'clawbox',
+ }, this.context)
+
+ if (content.length > 20) {
+ this.addFeedItem({
+ id: nanoid(),
+ timestamp: Date.now(),
+ type: 'reasoning',
+ label: 'Thinking',
+ detail: content.slice(0, 80),
+ icon: '\u{1F4AD}',
+ })
+ }
+ }
+
+ /** Called when SSE emits done */
+ onDone(): void {
+ this.bus.emit('agent_idle', {
+ id: nanoid(),
+ timestamp: Date.now(),
+ type: 'agent_idle',
+ agentId: 'clawbox-main',
+ source: 'clawbox',
+ }, this.context)
+
+ this.bus.emit('stop', {
+ id: nanoid(),
+ timestamp: Date.now(),
+ type: 'stop',
+ sessionId: 'clawbox-main',
+ cwd: '',
+ stopHookActive: false,
+ }, this.context)
+
+ this.addFeedItem({
+ id: nanoid(),
+ timestamp: Date.now(),
+ type: 'done',
+ label: 'Complete',
+ icon: '\u2728',
+ })
+ }
+
+ /** Called when SSE emits error */
+ onError(error: string): void {
+ this.addFeedItem({
+ id: nanoid(),
+ timestamp: Date.now(),
+ type: 'error',
+ label: 'Error',
+ detail: error.slice(0, 100),
+ icon: '\u{1F6A8}',
+ })
+ }
+
+ private addFeedItem(item: WorkshopFeedItem): void {
+ useWorkshopStore.getState().addFeedItem(item)
+ }
+
+ dispose(): void {
+ this.activeToolIds.clear()
+ }
+}
diff --git a/src/workshop/components/WorkshopCanvas.tsx b/src/workshop/components/WorkshopCanvas.tsx
new file mode 100644
index 0000000..cf52f84
--- /dev/null
+++ b/src/workshop/components/WorkshopCanvas.tsx
@@ -0,0 +1,110 @@
+/**
+ * WorkshopCanvas — React host for the Three.js workshop scene.
+ * Handles mount, resize, animate, and dispose lifecycle.
+ */
+
+import { useEffect, useRef, useCallback } from 'react'
+import { WorkshopScene } from '../scene/WorkshopScene'
+import { EventBus } from '../events/EventBus'
+import { EventBridge } from '../bridge/EventBridge'
+import { setActiveBridge } from '../bridge/ClawBoxEventTap'
+import { registerAllHandlers } from '../events/handlers'
+import { Claude } from '../entities/ClaudeMon'
+import { useWorkshopStore } from '../store/workshop'
+
+interface WorkshopCanvasProps {
+ className?: string
+}
+
+export function WorkshopCanvas({ className }: WorkshopCanvasProps) {
+ const containerRef = useRef(null)
+ const sceneRef = useRef(null)
+ const busRef = useRef(null)
+ const bridgeRef = useRef(null)
+ const claudeRef = useRef(null)
+
+ const setupScene = useCallback(() => {
+ const container = containerRef.current
+ if (!container) return
+
+ // Create event bus and scene
+ const bus = new EventBus()
+ busRef.current = bus
+
+ const scene = new WorkshopScene(container, bus)
+ sceneRef.current = scene
+
+ // Register event handlers
+ registerAllHandlers(bus)
+
+ // Create a default zone for the main agent
+ scene.createZone('clawbox-main')
+
+ // Create the Claude character
+ const claude = new Claude(scene, { startStation: 'center' })
+ claudeRef.current = claude
+
+ // Create event bridge with context
+ const bridge = new EventBridge(bus, {
+ scene,
+ session: {
+ id: 'clawbox-main',
+ color: 0x4ac8e8,
+ claude,
+ subagents: null,
+ zone: scene.zones.get('clawbox-main') ?? null,
+ stats: {
+ toolsUsed: 0,
+ filesTouched: new Set(),
+ activeSubagents: 0,
+ },
+ },
+ soundEnabled: false,
+ })
+ bridgeRef.current = bridge
+
+ // Register bridge as active tap
+ setActiveBridge(bridge)
+
+ // Mark scene as ready
+ useWorkshopStore.getState().setSceneReady(true)
+ }, [])
+
+ useEffect(() => {
+ setupScene()
+
+ return () => {
+ // Cleanup
+ setActiveBridge(null)
+ useWorkshopStore.getState().setSceneReady(false)
+
+ if (claudeRef.current) {
+ claudeRef.current.dispose()
+ claudeRef.current = null
+ }
+
+ if (bridgeRef.current) {
+ bridgeRef.current.dispose()
+ bridgeRef.current = null
+ }
+
+ if (busRef.current) {
+ busRef.current.clear()
+ busRef.current = null
+ }
+
+ if (sceneRef.current) {
+ sceneRef.current.dispose()
+ sceneRef.current = null
+ }
+ }
+ }, [setupScene])
+
+ return (
+
+ )
+}
diff --git a/src/workshop/components/WorkshopControls.tsx b/src/workshop/components/WorkshopControls.tsx
new file mode 100644
index 0000000..26bf841
--- /dev/null
+++ b/src/workshop/components/WorkshopControls.tsx
@@ -0,0 +1,32 @@
+/**
+ * WorkshopControls — Camera and settings controls for the workshop view.
+ */
+
+import { Eye, EyeOff, RotateCcw } from 'lucide-react'
+import { useWorkshopStore } from '../store/workshop'
+
+export function WorkshopControls() {
+ const showFeed = useWorkshopStore((s) => s.settings.showFeed)
+ const updateSettings = useWorkshopStore((s) => s.updateSettings)
+ const clearFeed = useWorkshopStore((s) => s.clearFeed)
+
+ return (
+
+
+
+
+ )
+}
diff --git a/src/workshop/components/WorkshopFeedOverlay.tsx b/src/workshop/components/WorkshopFeedOverlay.tsx
new file mode 100644
index 0000000..10796f2
--- /dev/null
+++ b/src/workshop/components/WorkshopFeedOverlay.tsx
@@ -0,0 +1,75 @@
+/**
+ * WorkshopFeedOverlay — Activity feed panel overlaid on the 3D scene.
+ * Shows real-time events from the chat bridge.
+ */
+
+import { useEffect, useRef } from 'react'
+import { useWorkshopStore } from '../store/workshop'
+
+export function WorkshopFeedOverlay() {
+ const feed = useWorkshopStore((s) => s.feed)
+ const showFeed = useWorkshopStore((s) => s.settings.showFeed)
+ const scrollRef = useRef(null)
+
+ // Auto-scroll to bottom on new items
+ useEffect(() => {
+ if (scrollRef.current) {
+ scrollRef.current.scrollTop = scrollRef.current.scrollHeight
+ }
+ }, [feed.length])
+
+ if (!showFeed) return null
+
+ return (
+
+
+
+
+ Activity
+
+
+
+ {feed.length === 0 ? (
+
+ Waiting for activity...
+
+ ) : (
+ feed.map((item) => (
+
+
+ {item.icon && {item.icon}}
+ {item.label}
+
+ {formatTime(item.timestamp)}
+
+
+ {item.detail && (
+
+ {item.detail}
+
+ )}
+
+ ))
+ )}
+
+
+
+ {/* 3D Scene */}
+
+
+ {/* Overlays (pointer-events-none container, children opt-in) */}
+
+
+
+
+