dev3000 0.0.76 → 0.0.78

package/mcp-server/package.json

@@ -37,11 +37,5 @@
     "tailwindcss": "^4.1.9",
     "tw-animate-css": "^1.3.8",
     "typescript": "^5.0.0"
-  },
-  "pnpm": {
-    "overrides": {
-      "@types/react": "19.1.13",
-      "@types/react-dom": "19.1.9"
-    }
   }
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "dev3000",
-  "version": "0.0.76",
+  "version": "0.0.78",
   "description": "AI-powered development tools with browser monitoring and MCP server integration",
   "type": "module",
   "main": "dist/index.js",
@@ -85,6 +85,12 @@
     "tsx": "^4.20.3",
     "vitest": "^3.2.4"
   },
+  "pnpm": {
+    "overrides": {
+      "@types/react": "19.1.17",
+      "@types/react-dom": "19.1.11"
+    }
+  },
   "engines": {
     "node": ">=18.0.0"
   },

package/src/tui-interface-impl.tsx

@@ -27,22 +27,27 @@ const COMPACT_LOGO = "d3k"
 const FULL_LOGO = ["   ▐▌▄▄▄▄ █  ▄ ", "   ▐▌   █ █▄▀  ", "▗▞▀▜▌▀▀▀█ █ ▀▄ ", "▝▚▄▟▌▄▄▄█ █  █ "]
 
 const TUIApp = ({
-  appPort,
+  appPort: initialAppPort,
   mcpPort,
   logFile,
   commandName,
   serversOnly,
   version,
   projectName,
-  onStatusUpdate
-}: TUIOptions & { onStatusUpdate: (fn: (status: string | null) => void) => void }) => {
+  onStatusUpdate,
+  onAppPortUpdate
+}: TUIOptions & {
+  onStatusUpdate: (fn: (status: string | null) => void) => void
+  onAppPortUpdate: (fn: (port: string) => void) => void
+}) => {
   const [logs, setLogs] = useState<LogEntry[]>([])
   const [scrollOffset, setScrollOffset] = useState(0)
   const [initStatus, setInitStatus] = useState<string | null>("Initializing...")
+  const [appPort, setAppPort] = useState<string>(initialAppPort)
   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,9 +87,30 @@ 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])
 
+  // Provide app port update function to parent
+  useEffect(() => {
+    onAppPortUpdate((port: string) => {
+      setAppPort(port)
+    })
+  }, [onAppPortUpdate])
+
   // Calculate available lines for logs dynamically based on terminal height and mode
   const calculateMaxVisibleLogs = () => {
     if (isVeryCompact) {
@@ -94,13 +120,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 +272,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 +327,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 +444,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>
 
@@ -417,12 +457,15 @@ const TUIApp = ({
   )
 }
 
-export async function runTUI(
-  options: TUIOptions
-): Promise<{ app: { unmount: () => void }; updateStatus: (status: string | null) => void }> {
+export async function runTUI(options: TUIOptions): Promise<{
+  app: { unmount: () => void }
+  updateStatus: (status: string | null) => void
+  updateAppPort: (port: string) => void
+}> {
   return new Promise((resolve, reject) => {
     try {
       let statusUpdater: ((status: string | null) => void) | null = null
+      let appPortUpdater: ((port: string) => void) | null = null
 
       const app = render(
         <TUIApp
@@ -430,11 +473,14 @@ export async function runTUI(
           onStatusUpdate={(fn) => {
             statusUpdater = fn
           }}
+          onAppPortUpdate={(fn) => {
+            appPortUpdater = fn
+          }}
         />,
         { exitOnCtrlC: false }
       )
 
-      // Give React time to set up the status updater
+      // Give React time to set up the updaters
       setTimeout(() => {
         resolve({
           app,
@@ -442,6 +488,11 @@ export async function runTUI(
             if (statusUpdater) {
               statusUpdater(status)
             }
+          },
+          updateAppPort: (port: string) => {
+            if (appPortUpdater) {
+              appPortUpdater(port)
+            }
           }
         })
       }, 100)