feat: add Workshop tab with 3D hex-tile visualization

package.json

@@ -88,22 +88,26 @@
     "sonner": "^2.0.7",
     "tailwind-merge": "^2.6.0",
     "tailwindcss-animate": "^1.0.7",
+    "three": "^0.183.2",
     "ws": "^8.19.0",
     "zod": "^3.24.2",
     "zustand": "^5.0.3"
   },
   "devDependencies": {
+    "@codevibesmatter/kata": "^0.3.0",
+    "@tauri-apps/cli": "^2.2.0",
     "@testing-library/jest-dom": "^6.7.0",
     "@testing-library/react": "^16.3.0",
-    "@tauri-apps/cli": "^2.2.0",
     "@types/react": "^18.3.18",
     "@types/react-dom": "^18.3.5",
     "@types/react-syntax-highlighter": "^15.5.13",
+    "@types/three": "^0.183.1",
     "@types/ws": "^8.18.1",
     "@vitejs/plugin-react": "^4.3.4",
     "archiver": "^7.0.1",
     "autoprefixer": "^10.4.20",
     "concurrently": "^9.1.2",
+    "esbuild": "^0.25.12",
     "jsdom": "^26.1.0",
     "license-checker-rseidelsohn": "^4.4.2",
     "postcss": "^8.5.1",

src/App.tsx

@@ -17,9 +17,12 @@ import { useAppInit } from '@/hooks/useAppInit'
 import { useChatStore } from '@/store/chat'
 import { useTitleStore } from '@/store/titles'
 import { useAgentStore } from '@/store/agents'
-import { MessageCircle, Settings, Plug, Clock, Sparkles, Loader2, Wrench } from 'lucide-react'
+import { MessageCircle, Settings, Plug, Clock, Sparkles, Loader2, Wrench, Hammer } from 'lucide-react'
+import { lazy, Suspense } from 'react'
 
-export type View = 'chat' | 'soul' | 'cron' | 'settings' | 'plugins' | 'skills'
+const LazyWorkshopView = lazy(() => import('@/workshop/components/WorkshopView').then(m => ({ default: m.WorkshopView })))
+
+export type View = 'chat' | 'soul' | 'cron' | 'settings' | 'plugins' | 'skills' | 'workshop'
 type OnboardTransitionStage = 'idle' | 'closing' | 'opening'
 
 const RECONFIGURE_SWITCH_DELAY_MS = 180
@@ -47,6 +50,7 @@ function App() {
     { id: 'cron' as View, icon: Clock, label: t('nav.cron') },
     { id: 'plugins' as View, icon: Plug, label: t('nav.plugins') },
     { id: 'skills' as View, icon: Wrench, label: t('nav.skills') },
+    { id: 'workshop' as View, icon: Hammer, label: t('nav.workshop') },
     { id: 'settings' as View, icon: Settings, label: t('nav.settings') },
   ]
 
@@ -107,6 +111,11 @@ function App() {
       case 'cron': return <CronView />
       case 'plugins': return <PluginsView />
       case 'skills': return <SkillsView />
+      case 'workshop': return (
+        <Suspense fallback={<div className="flex h-full items-center justify-center"><Loader2 className="h-6 w-6 animate-spin text-muted-foreground" /></div>}>
+          <LazyWorkshopView />
+        </Suspense>
+      )
       case 'settings': return <SettingsView onReconfigure={handleReconfigure} />
       default: return <ChatView />
     }
@@ -122,16 +131,18 @@ function App() {
     >
       <Sidebar navItems={navItems} currentView={currentView} onViewChange={setCurrentView} />
       <div className="flex-1 flex flex-col overflow-hidden">
-        <div className="subtle-separator-b px-6 py-2.5 flex items-center justify-between bg-background/80 backdrop-blur-md">
-          <h1 className="text-lg font-semibold truncate flex-1 mr-4">
-            {currentView === 'chat' && conversation ? headerTitle : ''}
-          </h1>
-          <div className="flex items-center gap-1">
-            <LanguageToggle />
-            <ThemeToggle />
+        {currentView !== 'workshop' && (
+          <div className="subtle-separator-b px-6 py-2.5 flex items-center justify-between bg-background/80 backdrop-blur-md">
+            <h1 className="text-lg font-semibold truncate flex-1 mr-4">
+              {currentView === 'chat' && conversation ? headerTitle : ''}
+            </h1>
+            <div className="flex items-center gap-1">
+              <LanguageToggle />
+              <ThemeToggle />
+            </div>
           </div>
-        </div>
-        <GatewayRestartBanner />
+        )}
+        {currentView !== 'workshop' && <GatewayRestartBanner />}
         <div className="flex-1 overflow-hidden">
           {renderView()}
         </div>

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,23 +105,29 @@ 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) {
               chatStore.incrementUnread(finalConvId)
             }
           },
           onError: (error) => {
+            workshopCallbacks.onError(error)
             chatStore.updateMessage(finalConvId, assistantId, {
               isLoading: false, error: true,
               blocks: [{ type: 'text', content: `Error: ${error}` }],

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": [

src/locales/zh/translation.json

@@ -5,8 +5,13 @@
     "cron": "任务",
     "plugins": "插件",
     "skills": "技能",
+    "workshop": "工作坊",
     "settings": "设置"
   },
+  "workshop": {
+    "title": "工作坊",
+    "placeholder": "代理活动的3D可视化。开始对话后，工作坊将活跃起来。"
+  },
   "chat": {
     "welcomeMessage": "有什么可以帮忙的？",
     "welcomeMessages": [

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<string, any> }) => {
+    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)
+  },
+}