design(chat): replace raw mcp tool logs with active-progressive visual badges

vibn-frontend/components/vibn-chat/chat-panel.tsx

@@ -81,13 +81,26 @@ type TimelineEntry =
 // ── Helpers ───────────────────────────────────────────────────────────────────
 
 function getFriendlyCategory(name: string): string {
+  const dotted = name.replace(/_/g, ".");
+  if (dotted.startsWith("databases.")) return "Provisioning database service";
+  if (dotted.startsWith("domains."))
+    return "Registering & attaching custom domains";
+  if (dotted.startsWith("apps.envs."))
+    return "Updating configuration environment";
+  if (dotted.startsWith("apps.")) return "Deploying web application container";
+  if (dotted.startsWith("gitea.")) return "Configuring Git repositories";
+  if (dotted.startsWith("devcontainer."))
+    return "Spinning up secure Alpine environment";
+  if (dotted.startsWith("plan."))
+    return "Structuring development roadmap & specs";
+
   if (
     name.includes("fs.edit") ||
     name.includes("fs.write") ||
     name.includes("fs_edit") ||
     name.includes("fs_write")
   )
-    return "Writing code";
+    return "Surgically writing & editing code";
   if (
     name.includes("fs.read") ||
     name.includes("fs.list") ||
@@ -98,21 +111,23 @@ function getFriendlyCategory(name: string): string {
     name.includes("fs_grep") ||
     name.includes("fs_tree")
   )
-    return "Reading codebase";
+    return "Scanning & reading project files";
   if (name.includes("shell.exec") || name.includes("shell_exec"))
-    return "Running terminal commands";
+    return "Executing sandbox terminal scripts";
   if (name.includes("dev_server.start") || name.includes("dev_server_start"))
-    return "Starting dev server";
+    return "Initializing local dev-server";
   if (name.includes("dev_server.logs") || name.includes("dev_server_logs"))
-    return "Checking server logs";
+    return "Analyzing compilation build logs";
   if (
     name.includes("browser.navigate") ||
     name.includes("browser.console") ||
     name.includes("browser_navigate") ||
     name.includes("browser_console")
   )
-    return "Checking browser preview";
+    return "Performing live design QA & console audits";
-  if (name.includes("ship")) return "Shipping code to production";
+  if (name.includes("request_visual_qa") || name.includes("request.visual.qa"))
+    return "Running world-class visual design QA";
+  if (name.includes("ship")) return "Bundling & shipping live release";
 
   return name;
 }
@@ -127,16 +142,89 @@ function timeAgo(dateStr?: string): string {
 }
 
 function friendlyToolName(name: string): string {
-  return name
+  const dotted = name.replace(/_/g, ".");
-    .replace(/_/g, ".")
+
-    .replace("projects.list", "listing projects")
+  const map: Record<string, string> = {
-    .replace("apps.list", "listing apps")
+    // Filesystem Tools
-    .replace("apps.create", "deploying app")
+    "fs.read": "🔍 Scanning file content",
-    .replace("apps.templates.list", "listing templates")
+    "fs.write": "📄 Writing new file",
-    .replace("apps.templates.search", "searching templates")
+    "fs.edit": "📝 Surgically adjusting code file",
-    .replace("domains.register", "registering domain")
+    "fs.list": "📁 Listing folder contents",
-    .replace("domains.list", "listing domains")
+    "fs.tree": "🌳 Mapping repository layout",
-    .replace("apps.logs", "fetching logs");
+    "fs.delete": "🗑️ Deleting obsolete files",
+    "fs.glob": "🔎 Scanning folder file-paths",
+    "fs.grep": "👀 ripgrep-searching codebase contents",
+
+    // Server & Browser Tools
+    "dev.server.start": "⚡ Starting local dev-server on Port 3000",
+    "dev.server.stop": "🛑 Stopping local dev-server",
+    "dev.server.list": "🔌 Checking active dev-servers",
+    "dev.server.logs": "📃 Analyzing dev-server build logs",
+    "browser.console": "👁️ Auditing browser runtime console logs",
+    "browser.navigate": "🌐 Verifying live page rendering",
+    "request.visual.qa": "🎨 Running world-class visual design QA",
+
+    // Core Platform Tools
+    "projects.list": "📂 Listing workspace projects",
+    "projects.get": "🗒️ Retrieving project spec sheets",
+    "workspace.describe": "💼 Fetching workspace details",
+    "gitea.credentials": "🔑 Resolving repository Git credentials",
+    "shell.exec": "🐚 Executing sandbox terminal command",
+    ship: "🚀 Shipping live release to Gitea",
+    "generate.media": "📸 Generating visual media assets",
+    "get.design.template": "📐 Retrieving design templates",
+    "apps.templates.scaffold": "🧱 Scaffolding bento-grid layouts",
+
+    // App & Database Deployment Tools
+    "apps.list": "🖥️ Listing deployed web services",
+    "apps.get": "🔍 Checking application build status",
+    "apps.create": "🐋 Provisioning web application container",
+    "apps.update": "⚙️ Updating application settings",
+    "apps.delete": "❌ Removing deployed application",
+    "apps.deploy": "🏗️ Rebuilding application in production",
+    "apps.deployments": "📜 Fetching recent deployment history",
+    "apps.envs.list": "🔒 Loading environment variables",
+    "apps.envs.upsert": "🔑 Injecting environment variables",
+    "apps.envs.delete": "🗑️ Removing environment variables",
+    "apps.domains.list": "🌐 Checking application domain routing",
+    "apps.domains.set": "🔗 Binding custom domains",
+    "apps.logs": "📋 Fetching application logs",
+    "apps.exec": "🐚 Running command inside container",
+    "databases.list": "🛢️ Listing database clusters",
+    "databases.create": "🛢️ Provisioning database service",
+    "databases.get": "🔌 Retrieving database connection credentials",
+    "databases.update": "⚙️ Updating database configuration",
+    "databases.delete": "🗑️ Removing database service",
+
+    // Domain & Git Tools
+    "domains.search": "🔎 Searching open domain names",
+    "domains.list": "🌐 Listing registered domains",
+    "domains.get": "📄 Retrieving domain details",
+    "domains.register": "💳 Registering domain name",
+    "domains.attach": "🔌 Attaching domain reverse-proxy rules",
+    "gitea.repos.list": "📦 Listing Gitea repositories",
+    "gitea.repo.get": "🔍 Loading Gitea repository info",
+    "gitea.repo.create": "🏗️ Initializing Gitea repository",
+    "gitea.file.read": "📖 Reading file from Gitea",
+    "gitea.file.write": "💾 Saving file to Gitea",
+    "gitea.file.delete": "🗑️ Deleting file from Gitea",
+    "gitea.branches.list": "🌿 Checking repository branches",
+    "gitea.branch.create": "🌱 Creating Git branch",
+    "devcontainer.ensure": "🐋 Spinning up secure Alpine dev container",
+    "devcontainer.status": "💓 Probing dev container liveness",
+    "devcontainer.suspend": "💤 Suspending dev container",
+
+    // Planning / Specs Tools
+    "plan.get": "📋 Loading specifications checklist",
+    "plan.vision.set": "🎯 Saving feature product specification",
+    "plan.idea.add": "💡 Adding planning ideation",
+    "plan.task.add": "➕ Adding task to development roadmap",
+    "plan.task.edit": "✏️ Updating development roadmap task",
+    "plan.task.complete": "✅ Toggling checklist milestone as completed",
+    "plan.document.update": "📝 Updating specs documentation",
+  };
+
+  return map[dotted] || dotted;
 }
 
 // ── Markdown-lite renderer ────────────────────────────────────────────────────