create-claude-code-visualizer 0.1.8 → 0.1.9

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "create-claude-code-visualizer",
-  "version": "0.1.8",
+  "version": "0.1.9",
   "description": "Run and manage Claude Code agents through a web UI",
   "license": "MIT",
   "bin": {

package/templates/app/src/app/agents/[slug]/chat/page.tsx

@@ -46,6 +46,9 @@ export default function AgentDetailPage({ params }: { params: Promise<{ slug: st
   // Track if initial session load has been triggered (prevents double-fire)
   const initialLoadRef = useRef(false);
 
+  // Track the previous slug so we can detect agent switches
+  const prevSlugRef = useRef(slug);
+
   // Mark notifications as read for the currently viewed session
   const markSessionNotificationsRead = useCallback((sid: string) => {
     fetch("/api/notifications", {
@@ -55,6 +58,26 @@ export default function AgentDetailPage({ params }: { params: Promise<{ slug: st
     }).catch(() => {});
   }, []);
 
+  // --- Clean up when switching between agents (slug change) ---
+  // Without this, the SSE connection from the previous agent stays alive
+  // and streams tool output into the wrong conversation.
+
+  useEffect(() => {
+    if (prevSlugRef.current !== slug) {
+      prevSlugRef.current = slug;
+      disconnect();
+      reset();
+      setIsRunning(false);
+      setCurrentPrompt(null);
+      setConversationRuns([]);
+      setCompletedRunEvents({});
+      setSessionId(null);
+      currentRunIdRef.current = null;
+      activeSessionRef.current = null;
+      initialLoadRef.current = false;
+    }
+  }, [slug, disconnect, reset]);
+
   // --- Data loading ---
 
   useEffect(() => {

package/templates/app/src/lib/capabilities.ts

@@ -47,7 +47,10 @@ function categorizeSkill(slug: string): string {
   if (slug.startsWith("gws-")) return "Google Workspace";
   if (slug.startsWith("recipe-")) return "Recipes";
   if (slug.startsWith("persona-")) return "Personas";
-  if (slug.includes("frontend") || slug.includes("design")) return "Development";
+  if (["create-blog-post", "create-linkedin-post", "create-post-designs", "publish-wordpress", "content-humanizer"].includes(slug)) return "Content";
+  if (slug === "linkedin-analytics") return "Analytics";
+  if (slug === "store-supabase") return "Data";
+  if (slug === "frontend-design") return "Development";
   return "Other";
 }