dev3000 0.0.66 → 0.0.67

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "dev3000",
-  "version": "0.0.66",
+  "version": "0.0.67",
   "description": "AI-powered development tools with browser monitoring and MCP server integration",
   "type": "module",
   "main": "dist/index.js",
@@ -13,8 +13,8 @@
     "src/tui-interface-impl.tsx",
     "mcp-server/app/",
     "mcp-server/.next/",
+    "mcp-server/public/",
     "mcp-server/package.json",
-    "mcp-server/pnpm-lock.yaml",
     "mcp-server/tsconfig.json",
     "mcp-server/next.config.ts",
     "mcp-server/next-env.d.ts",
@@ -23,7 +23,6 @@
   ],
   "scripts": {
     "build": "tsc && mkdir -p dist/src && cp src/loading.html dist/src/ && cp src/tui-interface-impl.tsx dist/src/",
-    "dev": "tsc --watch",
     "typegen": "./scripts/typegen.sh",
     "typecheck": "./scripts/typegen.sh && tsc --noEmit",
     "format": "biome format --write .",
@@ -56,7 +55,6 @@
     "mcp-handler": "^1.0.2",
     "ora": "^8.2.0",
     "package-manager-detector": "^1.3.0",
-    "react": "^19.1.1",
     "ws": "^8.18.0",
     "zod": "^3.22.4"
   },
@@ -67,6 +65,7 @@
     "@types/ws": "^8.5.12",
     "husky": "^9.0.0",
     "js-yaml": "^4.1.0",
+    "react": "^19.1.1",
     "tsx": "^4.20.3",
     "typescript": "^5.0.0",
     "vitest": "^1.0.0"

package/src/tui-interface-impl.tsx

@@ -20,6 +20,12 @@ interface LogEntry {
   content: string
 }
 
+// Compact ASCII logo for very small terminals
+const COMPACT_LOGO = "d3k"
+
+// Full ASCII logo lines as array for easier rendering
+const FULL_LOGO = ["   ▐▌▄▄▄▄ █  ▄ ", "   ▐▌   █ █▄▀  ", "▗▞▀▜▌▀▀▀█ █ ▀▄ ", "▝▚▄▟▌▄▄▄█ █  █ "]
+
 const TUIApp = ({
   appPort,
   mcpPort,
@@ -38,23 +44,67 @@ const TUIApp = ({
   const { exit } = useApp()
   const { stdout } = useStdout()
 
+  const [terminalSize, setTerminalSize] = useState(() => ({
+    width: stdout?.columns || 80,
+    height: stdout?.rows || 24
+  }))
+
+  useEffect(() => {
+    if (!stdout) {
+      return
+    }
+
+    const handleResize = () => {
+      setTerminalSize({
+        width: stdout.columns || 80,
+        height: stdout.rows || 24
+      })
+    }
+
+    stdout.on("resize", handleResize)
+
+    return () => {
+      if (typeof stdout.off === "function") {
+        stdout.off("resize", handleResize)
+      } else {
+        stdout.removeListener("resize", handleResize)
+      }
+    }
+  }, [stdout])
+
+  // Get terminal dimensions with fallbacks
+  const termWidth = terminalSize.width
+  const termHeight = terminalSize.height
+
+  // Determine if we should use compact mode
+  const isCompact = termWidth < 80 || termHeight < 20
+  const isVeryCompact = termWidth < 60 || termHeight < 15
+
   // Provide status update function to parent
   useEffect(() => {
     onStatusUpdate(setInitStatus)
   }, [onStatusUpdate])
 
-  // Calculate available lines for logs dynamically based on terminal height
-  // Header box content: 4 (logo height) + 1 (margin) + 1 (controls) = 6 lines
-  // Plus: 2 (top/bottom borders) + 2 (padding) + 1 (margin bottom) = 5 lines
-  // Total header: 11 lines
-  // Log box header: 1 (border) + 1 (title) + 1 (empty) = 3 lines
-  // Log box footer: 1 (border) + 2 (scroll indicator if present) = 1-3 lines
-  const headerLines = 12
-  const logBoxHeaderLines = 3
-  const logBoxFooterLines = scrollOffset > 0 ? 3 : 1
-  const safetyBuffer = 1 // Extra line to ensure we don't overflow
-  const totalReservedLines = headerLines + logBoxHeaderLines + logBoxFooterLines + safetyBuffer
-  const maxVisibleLogs = Math.max(3, (stdout?.rows || 24) - totalReservedLines)
+  // Calculate available lines for logs dynamically based on terminal height and mode
+  const calculateMaxVisibleLogs = () => {
+    if (isVeryCompact) {
+      // In very compact mode, use most of the screen for logs
+      return Math.max(3, termHeight - 8)
+    } else if (isCompact) {
+      // In compact mode, reduce header size
+      return Math.max(3, termHeight - 10)
+    } else {
+      // Normal mode calculation
+      const headerLines = 12
+      const logBoxHeaderLines = 3
+      const logBoxFooterLines = scrollOffset > 0 ? 3 : 1
+      const safetyBuffer = 1
+      const totalReservedLines = headerLines + logBoxHeaderLines + logBoxFooterLines + safetyBuffer
+      return Math.max(3, termHeight - totalReservedLines)
+    }
+  }
+
+  const maxVisibleLogs = calculateMaxVisibleLogs()
 
   useEffect(() => {
     let logStream: Readable | undefined
@@ -162,48 +212,79 @@ const TUIApp = ({
   // Calculate visible logs
   const visibleLogs = logs.slice(Math.max(0, logs.length - maxVisibleLogs - scrollOffset), logs.length - scrollOffset)
 
-  return (
-    <Box flexDirection="column" height="100%">
-      {/* Header Box */}
-      <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">
-            <Text color="#A18CE5" bold>   ▐▌▄▄▄▄ █  ▄ </Text>
-            <Text color="#A18CE5" bold>   ▐▌   █ █▄▀  </Text>
-            <Text color="#A18CE5" bold>▗▞▀▜▌▀▀▀█ █ ▀▄ </Text>
-            <Text color="#A18CE5" bold>▝▚▄▟▌▄▄▄█ █  █ </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)}` : ""}
+  // Render compact header for small terminals
+  const renderCompactHeader = () => (
+    <Box borderStyle="single" borderColor="#A18CE5" paddingX={1} marginBottom={1}>
+      <Box flexDirection="column" width="100%">
+        <Box>
+          <Text color="#A18CE5" bold>
+            {COMPACT_LOGO}
+          </Text>
+          <Text> v{version} </Text>
+          {initStatus && <Text dimColor>- {initStatus}</Text>}
+        </Box>
+        {!isVeryCompact && (
+          <>
+            <Text dimColor>
+              App: localhost:{appPort} | MCP: localhost:{mcpPort}
             </Text>
-            {serversOnly && <Text color="cyan">🖥️ Servers-only mode - use Chrome extension for browser monitoring</Text>}
-          </Box>
+            <Text dimColor>↑/↓ scroll | Ctrl-C quit</Text>
+          </>
+        )}
+      </Box>
+    </Box>
+  )
+
+  // 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>
 
-        {/* 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>
+        {/* 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>}
         </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%">
+      {/* Header Box - responsive to terminal size */}
+      {isCompact ? renderCompactHeader() : renderNormalHeader()}
+
       {/* Logs Box - flexGrow makes it expand to fill available height */}
       <Box flexDirection="column" borderStyle="single" borderColor="gray" paddingX={1} flexGrow={1} minHeight={0}>
-        <Text color="gray" dimColor>
-          Logs ({logs.length} total{scrollOffset > 0 && `, scrolled up ${scrollOffset} lines`})
-        </Text>
-        <Text> </Text>
+        {!isVeryCompact && (
+          <>
+            <Text color="gray" dimColor>
+              Logs ({logs.length} total{scrollOffset > 0 && `, scrolled up ${scrollOffset} lines`})
+            </Text>
+            <Text> </Text>
+          </>
+        )}
 
         {/* Logs content area - also uses flexGrow to expand */}
         <Box flexDirection="column" flexGrow={1}>
@@ -222,6 +303,19 @@ const TUIApp = ({
                   message = message.replace("ERROR: ⚠ Port", "ERROR: [!] Port")
                 }
 
+                // In very compact mode, simplify the output
+                if (isVeryCompact) {
+                  const shortSource = source === "BROWSER" ? "B" : "S"
+                  const shortType = type ? type.split(".")[0].charAt(0) : ""
+                  return (
+                    <Text key={log.id} wrap="truncate-end">
+                      <Text dimColor>[{shortSource}]</Text>
+                      {shortType && <Text dimColor>[{shortType}]</Text>}
+                      <Text> {message}</Text>
+                    </Text>
+                  )
+                }
+
                 // Use shared color constants
                 const sourceColor = source === "BROWSER" ? LOG_COLORS.BROWSER : LOG_COLORS.SERVER
                 const typeColors: Record<string, string> = {
@@ -246,6 +340,27 @@ const TUIApp = ({
                   "CRITICAL ERROR": LOG_COLORS.CRITICAL_ERROR
                 }
 
+                // In compact mode, skip padding
+                if (isCompact) {
+                  return (
+                    <Text key={log.id} wrap="truncate-end">
+                      <Text dimColor>[{timestamp}]</Text>
+                      <Text> </Text>
+                      <Text color={sourceColor} bold>
+                        [{source.charAt(0)}]
+                      </Text>
+                      {type && (
+                        <>
+                          <Text> </Text>
+                          <Text color={typeColors[type] || "#A0A0A0"}>[{type}]</Text>
+                        </>
+                      )}
+                      <Text> {message}</Text>
+                    </Text>
+                  )
+                }
+
+                // Normal mode with padding
                 // Calculate padding for source (BROWSER is 7, SERVER is 6)
                 const sourceSpacing = " ".repeat(Math.max(0, 7 - source.length))
 
@@ -281,8 +396,8 @@ const TUIApp = ({
           )}
         </Box>
 
-        {/* Scroll indicator - only show when scrolled up */}
-        {logs.length > maxVisibleLogs && scrollOffset > 0 && (
+        {/* 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>