From 8f3b5879cf1eb4a8a754eaa29d8532b6b2cb88db Mon Sep 17 00:00:00 2001 From: mawkone Date: Tue, 9 Jun 2026 13:06:31 -0700 Subject: [PATCH] design(chat): replace raw mcp tool logs with active-progressive visual badges --- components/vibn-chat/chat-panel.tsx | 122 ++++++++++++++++++++++++---- 1 file changed, 105 insertions(+), 17 deletions(-) diff --git a/components/vibn-chat/chat-panel.tsx b/components/vibn-chat/chat-panel.tsx index 02cd2041..dbe0ae6b 100644 --- a/components/vibn-chat/chat-panel.tsx +++ b/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"; - if (name.includes("ship")) return "Shipping code to production"; + return "Performing live design QA & console audits"; + 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 - .replace(/_/g, ".") - .replace("projects.list", "listing projects") - .replace("apps.list", "listing apps") - .replace("apps.create", "deploying app") - .replace("apps.templates.list", "listing templates") - .replace("apps.templates.search", "searching templates") - .replace("domains.register", "registering domain") - .replace("domains.list", "listing domains") - .replace("apps.logs", "fetching logs"); + const dotted = name.replace(/_/g, "."); + + const map: Record = { + // Filesystem Tools + "fs.read": "🔍 Scanning file content", + "fs.write": "📄 Writing new file", + "fs.edit": "📝 Surgically adjusting code file", + "fs.list": "📁 Listing folder contents", + "fs.tree": "🌳 Mapping repository layout", + "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 ────────────────────────────────────────────────────