Improve TUI layout and fix dynamic MCP capability discovery

elsigh · claude · elsigh · commit 782dfe23a12f · 2025-09-30T08:23:56.000-07:00
TUI improvements: - Embed version in top border line (like Claude Code: ╭── dev3000 v0.0.77 ──) - Move Ctrl+C warning to bottom status line with ⚠️ emoji after first press - Remove spacing between header and log boxes for more compact layout - Remove blank lines in log box (after header, before scroll indicator) - Improve height calculation with safety buffer to prevent header from being pushed up - Gain ~2 lines of vertical space for logs MCP tools fixes: - Fix missing CHROME_DEVTOOLS_CAPABILITY_MAP by using dynamic capability discovery - Fix missing NEXTJS_DEV_CAPABILITY_MAP by using dynamic capability discovery - Add optional chaining for cap.description to handle undefined values - Fix TypeScript type error with mcpType by constraining to valid types 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude <noreply@anthropic.com>
diff --git a/mcp-server/app/mcp/tools.ts b/mcp-server/app/mcp/tools.ts
@@ -1041,8 +1041,12 @@ async function introspectMcpTools(mcpName: string): Promise<McpCapability[]> {
  */
 function extractFunctionsFromLog(logContent: string, mcpName: string): McpCapability[] {
   const capabilities: McpCapability[] = []
-  const mcpType = mcpName.includes("chrome") ? "chrome" : mcpName.includes("nextjs") ? "nextjs" : "unknown"
-  const advancedKeywords = ADVANCED_CAPABILITY_KEYWORDS[mcpType] || []
+  const mcpType: "chrome" | "nextjs" = mcpName.includes("chrome")
+    ? "chrome"
+    : mcpName.includes("nextjs")
+      ? "nextjs"
+      : "chrome" // default to chrome if unknown
+  const advancedKeywords = ADVANCED_CAPABILITY_KEYWORDS[mcpType]
 
   // Look for function definitions in various formats
   const patterns = [
@@ -1265,14 +1269,20 @@ async function delegateToChromeDevtools(
   action: string,
   params: Record<string, unknown>
 ): Promise<{ content: Array<{ type: "text"; text: string }> }> {
-  const mapping = CHROME_DEVTOOLS_CAPABILITY_MAP[action]
-  if (!mapping) {
+  // Get dynamic capabilities from chrome-devtools MCP
+  const capabilities = await discoverMcpCapabilities("dev3000-chrome-devtools")
+
+  // Find a relevant capability for this action
+  const relevantCap = capabilities.find(
+    (cap) =>
+      cap.function.toLowerCase().includes(action.toLowerCase()) ||
+      cap.description?.toLowerCase().includes(action.toLowerCase())
+  )
+
+  if (!relevantCap) {
     throw new Error(`Action ${action} cannot be delegated to chrome-devtools`)
   }
 
-  // Transform parameters if needed
-  const chromeParams = mapping.paramMap ? mapping.paramMap(params) : params
-
   return {
     content: [
       {
@@ -1282,13 +1292,13 @@ async function delegateToChromeDevtools(
 For advanced debugging capabilities, use the \`dev3000-chrome-devtools\` MCP:
 
 \`\`\`
-dev3000-chrome-devtools:${mapping.function}(${JSON.stringify(chromeParams, null, 2)})
+dev3000-chrome-devtools:${relevantCap.function}(${JSON.stringify(params, null, 2)})
 \`\`\`
 
-🎯 **Why use chrome-devtools for this:** ${mapping.reason}
+🎯 **Why use chrome-devtools for this:** ${relevantCap.reason}
 
 💡 **When to use each tool:**
-• **dev3000**: Basic browser automation (screenshots, navigation, clicks, simple scripts)  
+• **dev3000**: Basic browser automation (screenshots, navigation, clicks, simple scripts)
 • **dev3000-chrome-devtools**: Advanced debugging (DOM inspection, breakpoints, performance profiling, network interception)
 
 ⚡ **Both tools share the same Chrome instance** - no conflicts or duplicate browsers`
@@ -1301,8 +1311,11 @@ dev3000-chrome-devtools:${mapping.function}(${JSON.stringify(chromeParams, null,
  * Delegate to nextjs-dev MCP with suggested functions
  */
 async function _delegateToNextjs(): Promise<{ content: Array<{ type: "text"; text: string }> }> {
-  const availableFunctions = Object.entries(NEXTJS_DEV_CAPABILITY_MAP)
-    .map(([_key, { function: func, reason }]) => `• \`dev3000-nextjs-dev:${func}()\` - ${reason}`)
+  // Get dynamic capabilities from nextjs-dev MCP
+  const capabilities = await discoverMcpCapabilities("dev3000-nextjs-dev")
+
+  const availableFunctions = capabilities
+    .map((cap) => `• \`dev3000-nextjs-dev:${cap.function}()\` - ${cap.reason}`)
     .join("\n")
 
   return {
diff --git a/src/tui-interface-impl.tsx b/src/tui-interface-impl.tsx
@@ -42,7 +42,7 @@ const TUIApp = ({
   const logIdCounter = useRef(0)
   const { stdout } = useStdout()
   const ctrlCMessageDefault = "^C quit"
-  const [ctrlCMessage] = useState(ctrlCMessageDefault)
+  const [ctrlCMessage, setCtrlCMessage] = useState(ctrlCMessageDefault)
 
   const [terminalSize, setTerminalSize] = useState(() => ({
     width: stdout?.columns || 80,
@@ -82,7 +82,21 @@ const TUIApp = ({
 
   // Provide status update function to parent
   useEffect(() => {
-    onStatusUpdate(setInitStatus)
+    onStatusUpdate((status: string | null) => {
+      // Check if this is the "Press Ctrl+C again" warning
+      if (status?.includes("Press Ctrl+C again")) {
+        // Update the bottom Ctrl+C message with warning emoji
+        setCtrlCMessage("⚠️ ^C again to quit")
+        // Clear the init status since we don't want it in the header anymore
+        setInitStatus(null)
+        // Reset after 3 seconds
+        setTimeout(() => {
+          setCtrlCMessage(ctrlCMessageDefault)
+        }, 3000)
+      } else {
+        setInitStatus(status)
+      }
+    })
   }, [onStatusUpdate])
 
   // Calculate available lines for logs dynamically based on terminal height and mode
@@ -94,13 +108,22 @@ const TUIApp = ({
       // In compact mode, reduce header size, account for bottom status line
       return Math.max(3, termHeight - 10)
     } else {
-      // Normal mode calculation - reduced header lines since we removed Controls section
-      const headerLines = 10 // Reduced from 12 since Controls section is commented out
-      const logBoxHeaderLines = 3
-      const logBoxFooterLines = scrollOffset > 0 ? 3 : 1
-      const bottomStatusLine = 1 // Just one line for the log path
-      const safetyBuffer = 0 // Removed safety buffer to use more space
-      const totalReservedLines = headerLines + logBoxHeaderLines + logBoxFooterLines + bottomStatusLine + safetyBuffer
+      // Normal mode calculation - account for all UI elements
+      const headerBorderLines = 2 // Top border (with title) + bottom border
+      const headerContentLines = 5 // Logo is 4 lines tall, +1 for padding
+      const logBoxBorderLines = 2 // Top and bottom border of log box
+      const logBoxHeaderLines = 2 // "Logs (X total)" text (no blank line after)
+      const logBoxFooterLines = scrollOffset > 0 ? 2 : 0 // "(X lines below)" when scrolled
+      const bottomStatusLine = 1 // Log path and quit message
+      const safetyBuffer = 1 // Small buffer to prevent header from being pushed up
+      const totalReservedLines =
+        headerBorderLines +
+        headerContentLines +
+        logBoxBorderLines +
+        logBoxHeaderLines +
+        logBoxFooterLines +
+        bottomStatusLine +
+        safetyBuffer
       return Math.max(3, termHeight - totalReservedLines)
     }
   }
@@ -237,41 +260,52 @@ const TUIApp = ({
   )
 
   // Render normal header
-  const renderNormalHeader = () => (
-    <Box borderStyle="round" borderColor="#A18CE5" paddingX={2} paddingY={1} marginBottom={1} flexDirection="column">
-      <Box flexDirection="row" gap={3}>
-        {/* ASCII Logo on the left */}
-        {/* biome-ignore format: preserve ASCII art alignment */}
-        <Box flexDirection="column" alignItems="flex-start">
-          {FULL_LOGO.map((line) => (
-            <Text key={line} color="#A18CE5" bold>{line}</Text>
-          ))}
-        </Box>
-
-        {/* Info on the right */}
-        <Box flexDirection="column" flexGrow={1}>
-          <Text color="#A18CE5" bold>
-            {commandName} v{version} {initStatus ? `- ${initStatus}` : "is running!"}
-          </Text>
-          <Text> </Text>
-          <Text color="cyan">🌐 Your App: http://localhost:{appPort}</Text>
-          <Text color="cyan">🤖 MCP Server: http://localhost:{mcpPort}/mcp</Text>
-          <Text color="cyan">
-            📸 Visual Timeline: http://localhost:{mcpPort}/logs
-            {projectName ? `?project=${encodeURIComponent(projectName)}` : ""}
-          </Text>
-          {serversOnly && <Text color="cyan">🖥️ Servers-only mode - use Chrome extension for browser monitoring</Text>}
+  const renderNormalHeader = () => {
+    // Create custom top border with title embedded (like Claude Code)
+    const title = ` ${commandName} v${version} ${initStatus ? `- ${initStatus} ` : ""}`
+    const borderChar = "─"
+    const leftPadding = 2
+    // Account for border characters and padding
+    const availableWidth = termWidth - 2 // -2 for corner characters
+    const titleLength = title.length
+    const rightBorderLength = Math.max(0, availableWidth - titleLength - leftPadding)
+    const topBorderLine = `╭${borderChar.repeat(leftPadding)}${title}${borderChar.repeat(rightBorderLength)}╮`
+
+    return (
+      <Box flexDirection="column">
+        {/* Custom top border with embedded title */}
+        <Text color="#A18CE5">{topBorderLine}</Text>
+
+        {/* Content with side borders only */}
+        <Box borderStyle="round" borderColor="#A18CE5" borderTop={false} paddingX={2} paddingY={1}>
+          <Box flexDirection="row" gap={3}>
+            {/* ASCII Logo on the left */}
+            {/* biome-ignore format: preserve ASCII art alignment */}
+            <Box flexDirection="column" alignItems="flex-start">
+              {FULL_LOGO.map((line) => (
+                <Text key={line} color="#A18CE5" bold>
+                  {line}
+                </Text>
+              ))}
+            </Box>
+
+            {/* Info on the right */}
+            <Box flexDirection="column" flexGrow={1}>
+              <Text color="cyan">🌐 Your App: http://localhost:{appPort}</Text>
+              <Text color="cyan">🤖 MCP Server: http://localhost:{mcpPort}/mcp</Text>
+              <Text color="cyan">
+                📸 Visual Timeline: http://localhost:{mcpPort}/logs
+                {projectName ? `?project=${encodeURIComponent(projectName)}` : ""}
+              </Text>
+              {serversOnly && (
+                <Text color="cyan">🖥️ Servers-only mode - use Chrome extension for browser monitoring</Text>
+              )}
+            </Box>
+          </Box>
         </Box>
       </Box>
-
-      {/* Controls at the bottom of header box */}
-      {/* 
-      <Box marginTop={1}>
-        <Text dimColor>💡 Controls: ↑/↓ scroll | PgUp/PgDn page | g/G start/end | Ctrl-C quit</Text>
-      </Box>
-      */}
-    </Box>
-  )
+    )
+  }
 
   return (
     <Box flexDirection="column" height="100%">
@@ -281,12 +315,9 @@ const TUIApp = ({
       {/* Logs Box - flexGrow makes it expand to fill available height */}
       <Box flexDirection="column" borderStyle="single" borderColor="gray" paddingX={1} flexGrow={1} minHeight={0}>
         {!isVeryCompact && (
-          <>
-            <Text color="gray" dimColor>
-              Logs ({logs.length} total{scrollOffset > 0 && `, scrolled up ${scrollOffset} lines`})
-            </Text>
-            <Text> </Text>
-          </>
+          <Text color="gray" dimColor>
+            Logs ({logs.length} total{scrollOffset > 0 && `, scrolled up ${scrollOffset} lines`})
+          </Text>
         )}
 
         {/* Logs content area - also uses flexGrow to expand */}
@@ -401,10 +432,7 @@ const TUIApp = ({
 
         {/* Scroll indicator - only show when scrolled up and not in very compact mode */}
         {!isVeryCompact && logs.length > maxVisibleLogs && scrollOffset > 0 && (
-          <>
-            <Text> </Text>
-            <Text dimColor>({scrollOffset} lines below)</Text>
-          </>
+          <Text dimColor>({scrollOffset} lines below)</Text>
         )}
       </Box>
 
