claude-dev-server 1.0.2

package/dist/chunk-DOLSA776.js

@@ -0,0 +1,1166 @@
+import { spawn } from 'child_process';
+import { existsSync, readFileSync } from 'fs';
+import { dirname, join, resolve } from 'path';
+import http from 'http';
+import { fileURLToPath } from 'url';
+import { WebSocketServer } from 'ws';
+import { SourceMapConsumer } from 'source-map';
+import { readFile } from 'fs/promises';
+
+// src/universal/index.ts
+function spawnClaudeCode(options) {
+  const port = 5e4 + Math.floor(Math.random() * 1e4);
+  const ttydProc = spawn("ttyd", [
+    "--port",
+    String(port),
+    "--interface",
+    "127.0.0.1",
+    "--writable",
+    options.claudePath,
+    ...options.args
+  ], {
+    cwd: options.cwd,
+    env: {
+      ...process.env,
+      ...options.env,
+      TERM: "xterm-256color",
+      FORCE_COLOR: "1"
+    }
+  });
+  ttydProc.on("exit", (code) => {
+    console.log(`[claude-dev-server] ttyd exited - code: ${code}`);
+  });
+  ttydProc.on("error", (err) => {
+    console.error(`[claude-dev-server] ttyd error: ${err.message}`);
+  });
+  return new Promise((resolve2, reject) => {
+    ttydProc.stdout?.on("data", (data) => {
+      const msg = data.toString();
+      console.log(`[ttyd] ${msg}`);
+    });
+    ttydProc.stderr?.on("data", (data) => {
+      const msg = data.toString();
+      console.error(`[ttyd stderr] ${msg}`);
+    });
+    setTimeout(() => {
+      resolve2({
+        wsUrl: `ws://127.0.0.1:${port}`,
+        process: ttydProc,
+        port
+      });
+    }, 500);
+    ttydProc.on("error", reject);
+  });
+}
+var sourceMapCache = /* @__PURE__ */ new Map();
+async function parseSourceMap(sourceMapUrl, content) {
+  try {
+    const consumer = await new SourceMapConsumer(content);
+    sourceMapCache.set(sourceMapUrl, consumer);
+  } catch (err) {
+    console.error("Failed to parse source map:", err);
+  }
+}
+async function findOriginalPosition(generatedFile, line, column) {
+  const consumer = sourceMapCache.get(generatedFile);
+  if (!consumer) {
+    return null;
+  }
+  try {
+    const position = consumer.originalPositionFor({ line, column });
+    if (position.source) {
+      return {
+        source: position.source,
+        line: position.line || 1,
+        column: position.column || 0,
+        name: position.name
+      };
+    }
+  } catch (err) {
+    console.error("Failed to find original position:", err);
+  }
+  return null;
+}
+function formatCodeContext(location) {
+  return `
+\u{1F4CD} Code Location:
+   File: ${location.file}
+   Line: ${location.line}
+   Column: ${location.column}
+`;
+}
+function createWebSocketServer(options) {
+  let wss = null;
+  let port = 0;
+  let ttydInfo = null;
+  const start = async () => {
+    console.log("[claude-dev-server] Starting ttyd...");
+    ttydInfo = await spawnClaudeCode({
+      cwd: options.projectRoot,
+      claudePath: options.claudePath,
+      args: options.claudeArgs
+    });
+    console.log(`[claude-dev-server] ttyd running at ${ttydInfo.wsUrl}`);
+    return new Promise((resolve2, reject) => {
+      wss = new WebSocketServer({ port, host: "127.0.0.1" });
+      wss.on("listening", () => {
+        const address = wss.address();
+        if (address && typeof address === "object") {
+          port = address.port;
+          resolve2({ wsPort: port, ttydPort: ttydInfo.port });
+        }
+      });
+      wss.on("error", (err) => {
+        reject(err);
+      });
+      wss.on("connection", (ws) => {
+        ws.on("message", async (message) => {
+          try {
+            const msg = JSON.parse(message.toString());
+            if (msg.type === "inspect") {
+              await handleInspect(msg, ws, options.projectRoot);
+            } else if (msg.type === "loadSourceMap") {
+              await handleLoadSourceMap(msg, ws, options.projectRoot);
+            }
+          } catch (err) {
+          }
+        });
+        ws.send(JSON.stringify({
+          type: "ready",
+          ttydUrl: ttydInfo.wsUrl
+        }));
+      });
+    });
+  };
+  const stop = () => {
+    ttydInfo?.process.kill();
+    wss?.close();
+  };
+  return { start, stop };
+}
+async function handleLoadSourceMap(msg, ws, projectRoot) {
+  const { sourceMapUrl } = msg;
+  try {
+    const mapPath = resolve(projectRoot, sourceMapUrl.replace(/^\//, ""));
+    const content = await readFile(mapPath, "utf-8");
+    await parseSourceMap(sourceMapUrl, content);
+    ws.send(JSON.stringify({
+      type: "sourceMapLoaded",
+      sourceMapUrl,
+      success: true
+    }));
+  } catch (err) {
+    ws.send(JSON.stringify({
+      type: "sourceMapLoaded",
+      sourceMapUrl,
+      success: false,
+      error: err.message
+    }));
+  }
+}
+async function handleInspect(msg, ws, projectRoot) {
+  const { url, line, column, sourceMapUrl } = msg;
+  let location = null;
+  if (sourceMapUrl) {
+    const original = await findOriginalPosition(sourceMapUrl, line, column);
+    if (original) {
+      location = {
+        file: resolve(projectRoot, original.source),
+        line: original.line,
+        column: original.column
+      };
+    }
+  }
+  if (!location) {
+    const match = url.match(/\/@fs\/(.+?)(?:\?|$)|\/@vite\/(.+?)(?:\?|$)/);
+    if (match) {
+      location = {
+        file: decodeURIComponent(match[1] || match[2]),
+        line,
+        column
+      };
+    }
+  }
+  ws.send(JSON.stringify({
+    type: "inspectResult",
+    location: location ? {
+      file: location.file,
+      line: location.line,
+      column: location.column,
+      context: formatCodeContext(location)
+    } : null
+  }));
+}
+
+// src/client/injection.js
+var CLIENT_STYLES = `
+<style id="claude-dev-server-styles">
+.claude-dev-server-toggle {
+  position: fixed;
+  top: 20px;
+  right: 20px;
+  width: 44px;
+  height: 44px;
+  background: #1e1e1e;
+  border: none;
+  border-radius: 50%;
+  box-shadow: 0 2px 12px rgba(0,0,0,0.3);
+  cursor: pointer;
+  z-index: 999999;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font-size: 20px;
+  transition: transform 0.2s, background 0.2s;
+}
+.claude-dev-server-toggle:hover {
+  transform: scale(1.1);
+  background: #2d2d2d;
+}
+.claude-dev-server-toggle.hidden {
+  display: none;
+}
+.claude-dev-server-inspect-btn {
+  position: fixed;
+  top: 74px;
+  right: 20px;
+  width: 44px;
+  height: 44px;
+  background: #1e1e1e;
+  border: none;
+  border-radius: 50%;
+  box-shadow: 0 2px 12px rgba(0,0,0,0.3);
+  cursor: pointer;
+  z-index: 999999;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font-size: 16px;
+  transition: transform 0.2s, background 0.2s;
+}
+.claude-dev-server-inspect-btn:hover {
+  transform: scale(1.1);
+  background: #2d2d2d;
+}
+.claude-dev-server-inspect-btn.active {
+  background: #007acc;
+}
+.claude-dev-server-inspect-btn.hidden {
+  display: none;
+}
+.claude-dev-server-toggle svg,
+.claude-dev-server-inspect-btn svg {
+  width: 20px;
+  height: 20px;
+  flex-shrink: 0;
+}
+.claude-dev-server-panel {
+  position: fixed;
+  top: 0;
+  right: 0;
+  width: 650px;
+  height: 100vh;
+  background: #1e1e1e;
+  color: #d4d4d4;
+  font-family: 'SF Mono', 'Monaco', 'Cascadia Code', 'Consolas', monospace;
+  font-size: 13px;
+  box-shadow: -4px 0 20px rgba(0,0,0,0.3);
+  transform: translateX(100%);
+  transition: transform 0.2s ease;
+  z-index: 999999;
+  display: flex;
+  flex-direction: column;
+}
+.claude-dev-server-panel.open {
+  transform: translateX(0);
+}
+.claude-dev-server-header {
+  padding: 8px 12px;
+  background: #2d2d2d;
+  border-bottom: 1px solid #3e3e3e;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  user-select: none;
+}
+.claude-dev-server-title {
+  font-weight: 600;
+  color: #fff;
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  font-size: 13px;
+}
+.claude-dev-server-title::before {
+  content: '\u{1F916}';
+  font-size: 14px;
+}
+.claude-dev-server-actions {
+  display: flex;
+  gap: 6px;
+}
+.claude-dev-server-btn {
+  background: #3e3e3e;
+  border: none;
+  color: #d4d4d4;
+  cursor: pointer;
+  font-family: inherit;
+  font-size: 11px;
+  padding: 4px 10px;
+  border-radius: 3px;
+  transition: background 0.15s;
+  display: flex;
+  align-items: center;
+  gap: 4px;
+}
+.claude-dev-server-btn:hover {
+  background: #4e4e4e;
+}
+.claude-dev-server-btn.active {
+  background: #007acc;
+  color: #fff;
+}
+.claude-dev-server-close {
+  background: none;
+  border: none;
+  color: #858585;
+  cursor: pointer;
+  font-size: 18px;
+  padding: 0;
+  width: 20px;
+  height: 20px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  border-radius: 3px;
+  transition: background 0.15s, color 0.15s;
+}
+.claude-dev-server-close:hover {
+  background: #3e3e3e;
+  color: #fff;
+}
+.claude-dev-server-terminal {
+  flex: 1;
+  overflow: hidden;
+  position: relative;
+  background: #000;
+}
+.claude-dev-server-terminal iframe {
+  width: 100%;
+  height: 100%;
+  border: none;
+}
+.claude-dev-server-inspect-overlay {
+  position: fixed;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  pointer-events: none;
+  z-index: 999998;
+  display: none;
+}
+.claude-dev-server-inspect-overlay.active {
+  display: block;
+}
+.claude-dev-server-highlight {
+  position: absolute;
+  border: 2px solid #007acc;
+  background: rgba(0, 122, 204, 0.1);
+  pointer-events: none;
+  transition: all 0.1s ease;
+}
+.claude-dev-server-highlight::after {
+  content: attr(data-element);
+  position: absolute;
+  top: -20px;
+  left: 0;
+  background: #007acc;
+  color: #fff;
+  font-size: 10px;
+  padding: 2px 4px;
+  border-radius: 2px 2px 0 0;
+  font-family: monospace;
+  white-space: nowrap;
+}
+/* Responsive layout for portrait mode */
+@media (orientation: portrait) {
+  .claude-dev-server-toggle {
+    top: auto;
+    bottom: 20px;
+    right: 10px;
+    width: 36px;
+    height: 36px;
+  }
+  .claude-dev-server-inspect-btn {
+    top: auto;
+    bottom: 66px;
+    right: 10px;
+    width: 36px;
+    height: 36px;
+  }
+  .claude-dev-server-panel {
+    top: auto;
+    bottom: 0;
+    right: 0;
+    left: 0;
+    width: 100%;
+    height: 80vh;
+    transform: translateY(100%);
+    box-shadow: 0 -4px 20px rgba(0,0,0,0.3);
+  }
+  .claude-dev-server-panel.open {
+    transform: translateY(0);
+  }
+  .claude-dev-server-toggle svg,
+  .claude-dev-server-inspect-btn svg {
+    width: 16px;
+    height: 16px;
+  }
+}
+</style>
+`;
+var CLIENT_SCRIPT = `
+(() => {
+  let ws = null
+  let panel = null
+  let toggleBtn = null
+  let inspectBtn = null  // \u60AC\u6D6E inspect \u6309\u94AE
+  let terminalContainer = null
+  let terminalIframe = null
+  let overlay = null
+  let isOpen = false
+  let isInspectMode = false
+  let ttydWsUrl = null
+
+  // Fetch the WebSocket port from the server
+  async function getWsPort() {
+    const res = await fetch('/@claude-port')
+    const data = await res.json()
+    return data.port
+  }
+
+  async function initWhenReady() {
+    try {
+      const port = await getWsPort()
+      connect(port)
+    } catch (err) {
+      console.error('[Claude Dev Server] Failed to get port:', err)
+      // Retry after 1 second
+      setTimeout(initWhenReady, 1000)
+      return
+    }
+    createToggleBtn()
+    createInspectBtn()
+    createOverlay()
+    createPanel()
+  }
+
+  function createToggleBtn() {
+    if (toggleBtn) return
+    toggleBtn = document.createElement('button')
+    toggleBtn.className = 'claude-dev-server-toggle'
+    toggleBtn.innerHTML = '<svg width="24" height="24" viewBox="0 0 24 24" fill="none"><path d="M11.376 24L10.776 23.544L10.44 22.8L10.776 21.312L11.16 19.392L11.472 17.856L11.76 15.96L11.928 15.336L11.904 15.288L11.784 15.312L10.344 17.28L8.16 20.232L6.432 22.056L6.024 22.224L5.304 21.864L5.376 21.192L5.784 20.616L8.16 17.568L9.6 15.672L10.536 14.592L10.512 14.448H10.464L4.128 18.576L3 18.72L2.496 18.264L2.568 17.52L2.808 17.28L4.704 15.96L9.432 13.32L9.504 13.08L9.432 12.96H9.192L8.4 12.912L5.712 12.84L3.384 12.744L1.104 12.624L0.528 12.504L0 11.784L0.048 11.424L0.528 11.112L1.224 11.16L2.736 11.28L5.016 11.424L6.672 11.52L9.12 11.784H9.504L9.552 11.616L9.432 11.52L9.336 11.424L6.96 9.84L4.416 8.16L3.072 7.176L2.352 6.672L1.992 6.216L1.848 5.208L2.496 4.488L3.384 4.56L3.6 4.608L4.488 5.304L6.384 6.768L8.88 8.616L9.24 8.904L9.408 8.808V8.736L9.24 8.472L7.896 6.024L6.456 3.528L5.808 2.496L5.64 1.872C5.576 1.656 5.544 1.416 5.544 1.152L6.288 0.144001L6.696 0L7.704 0.144001L8.112 0.504001L8.736 1.92L9.72 4.152L11.28 7.176L11.736 8.088L11.976 8.904L12.072 9.168H12.24V9.024L12.36 7.296L12.6 5.208L12.84 2.52L12.912 1.752L13.296 0.840001L14.04 0.360001L14.616 0.624001L15.096 1.32L15.024 1.752L14.76 3.6L14.184 6.504L13.824 8.472H14.04L14.28 8.208L15.264 6.912L16.92 4.848L17.64 4.032L18.504 3.12L19.056 2.688H20.088L20.832 3.816L20.496 4.992L19.44 6.336L18.552 7.464L17.28 9.168L16.512 10.536L16.584 10.632H16.752L19.608 10.008L21.168 9.744L22.992 9.432L23.832 9.816L23.928 10.2L23.592 11.016L21.624 11.496L19.32 11.952L15.888 12.768L15.84 12.792L15.888 12.864L17.424 13.008L18.096 13.056H19.728L22.752 13.272L23.544 13.8L24 14.424L23.928 14.928L22.704 15.528L21.072 15.144L17.232 14.232L15.936 13.92H15.744V14.016L16.848 15.096L18.84 16.896L21.36 19.224L21.48 19.8L21.168 20.28L20.832 20.232L18.624 18.552L17.76 17.808L15.84 16.2H15.72V16.368L16.152 17.016L18.504 20.544L18.624 21.624L18.456 21.96L17.832 22.176L17.184 22.056L15.792 20.136L14.376 17.952L13.224 16.008L13.104 16.104L12.408 23.352L12.096 23.712L11.376 24Z" fill="#d97757"/></svg>'
+    toggleBtn.title = 'Open Claude Code (Cmd/Ctrl + \`)'
+    toggleBtn.setAttribute('data-dev-tool', 'true')
+    toggleBtn.addEventListener('click', () => togglePanel(true))
+    document.body.appendChild(toggleBtn)
+  }
+
+  function createInspectBtn() {
+    if (inspectBtn) return
+    inspectBtn = document.createElement('button')
+    inspectBtn.className = 'claude-dev-server-inspect-btn'
+    inspectBtn.innerHTML = '<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="#fff" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M19 11V4a2 2 0 00-2-2H4a2 2 0 00-2 2v13a2 2 0 002 2h7"/><path d="M12 12l4.166 10 1.48-4.355L22 16.166 12 12z"/><path d="M18 18l3 3"/></svg>'
+    inspectBtn.title = 'Inspect Element (Cmd/Ctrl + Shift + I)'
+    inspectBtn.setAttribute('data-dev-tool', 'true')
+    inspectBtn.addEventListener('click', () => {
+      if (isInspectMode) {
+        disableInspectMode()
+      } else {
+        // \u70B9\u51FB Inspect \u65F6\u5148\u6536\u8D77\u9762\u677F
+        if (isOpen) {
+          togglePanel(false)
+        }
+        enableInspectMode()
+      }
+    })
+    document.body.appendChild(inspectBtn)
+  }
+
+  function createOverlay() {
+    if (overlay) return
+    overlay = document.createElement('div')
+    overlay.className = 'claude-dev-server-inspect-overlay'
+    document.body.appendChild(overlay)
+  }
+
+  function highlightElement(el) {
+    if (!overlay) return
+    overlay.innerHTML = ''
+    const rect = el.getBoundingClientRect()
+    const highlight = document.createElement('div')
+    highlight.className = 'claude-dev-server-highlight'
+    highlight.style.top = rect.top + 'px'
+    highlight.style.left = rect.left + 'px'
+    highlight.style.width = rect.width + 'px'
+    highlight.style.height = rect.height + 'px'
+    const className = el.className ? String(el.className) : ''
+    highlight.dataset.element = el.tagName.toLowerCase() +
+      (el.id ? '#' + el.id : '') +
+      (className ? '.' + className.split(' ').join('.') : '')
+    overlay.appendChild(highlight)
+  }
+
+  async function getSourceLocation(el) {
+    let sourceFile = null
+    let sourceLine = 1
+    let sourceColumn = 1
+
+    // Try to get original line number using source map
+    async function getOriginalLine(generatedFile, generatedLine, generatedColumn) {
+      try {
+        // Find the script tag that corresponds to this file
+        const scripts = Array.from(document.querySelectorAll('script[src]'))
+        for (const script of scripts) {
+          const src = script.getAttribute('src')
+          if (src && (src.includes('/src/') || src.includes('/app.') || src.includes('/main.'))) {
+            // Try to fetch and parse the source map
+            const response = await fetch(src + '.map')
+            if (response.ok) {
+              const map = await response.json()
+              // Use the source map to find the original position
+              const consumer = await new (window.SourceMap || window.sourceMap).SourceMapConsumer(map)
+              const original = consumer.originalPositionFor({
+                line: generatedLine,
+                column: generatedColumn
+              })
+              consumer.destroy()
+              if (original.source && original.line !== null) {
+                return { line: original.line, column: original.column || 1 }
+              }
+            }
+          }
+        }
+      } catch (e) {
+        console.log('[Claude Dev Server] Source map lookup failed:', e.message)
+      }
+      return null
+    }
+
+    // Try React DevTools - handle React 18's randomized suffix
+    const elKeys = Object.keys(el)
+    let fiberKey = elKeys.find(k => k === '__reactFiber__' || k === '__reactInternalInstance' || k.indexOf('__reactFiber') === 0)
+    let propsKey = elKeys.find(k => k === '__reactProps__' || k.indexOf('__reactProps') === 0)
+
+    if (fiberKey) {
+      const fiber = el[fiberKey]
+      console.log('[Claude Dev Server] Found fiber at key:', fiberKey)
+
+      // Try to get _debugSource from different locations
+      const debugSource = fiber._debugSource || fiber.elementType?._debugSource || fiber.type?._debugSource || fiber.alternate?._debugSource
+      if (debugSource && debugSource.fileName) {
+        sourceFile = debugSource.fileName
+        sourceLine = debugSource.lineNumber || 1
+        sourceColumn = debugSource.columnNumber || 1
+
+        // Try to use source map to get the original line number
+        const original = await getOriginalLine(sourceFile, sourceLine, sourceColumn)
+        if (original) {
+          sourceLine = original.line
+          sourceColumn = original.column
+          console.log('[Claude Dev Server] Original line from source map:', sourceLine)
+        }
+
+        // Convert absolute path to relative path using project root
+        if (sourceFile.startsWith('/')) {
+          const projectRoot = window.__CLAUDE_PROJECT_ROOT__
+          if (projectRoot && sourceFile.startsWith(projectRoot)) {
+            sourceFile = sourceFile.substring(projectRoot.length + 1)
+            if (sourceFile.startsWith('/')) {
+              sourceFile = sourceFile.substring(1)
+            }
+          }
+        }
+        console.log('[Claude Dev Server] Found React source:', sourceFile, sourceLine)
+      } else {
+        // Try going up the fiber tree
+        let currentFiber = fiber
+        let depth = 0
+        while (currentFiber && depth < 20) {
+          const ds = currentFiber._debugSource || currentFiber.elementType?._debugSource || currentFiber.type?._debugSource
+          if (ds && ds.fileName) {
+            sourceFile = ds.fileName
+            sourceLine = ds.lineNumber || 1
+            sourceColumn = ds.columnNumber || 1
+            // Convert absolute path to relative path using project root
+            if (sourceFile.startsWith('/')) {
+              const projectRoot = window.__CLAUDE_PROJECT_ROOT__
+              if (projectRoot && sourceFile.startsWith(projectRoot)) {
+                sourceFile = sourceFile.substring(projectRoot.length + 1)
+                if (sourceFile.startsWith('/')) {
+                  sourceFile = sourceFile.substring(1)
+                }
+              }
+            }
+            console.log('[Claude Dev Server] Found React source at depth', depth, ':', sourceFile, sourceLine)
+            break
+          }
+          currentFiber = currentFiber.return || currentFiber.alternate
+          depth++
+        }
+      }
+    }
+
+    // Try Vue component
+    if (!sourceFile) {
+      const vueComponent = el.__vueParentComponent || el.__vnode
+      if (vueComponent) {
+        const type = vueComponent.type || vueComponent.component
+        if (type && type.__file) {
+          sourceFile = type.__file
+          console.log('[Claude Dev Server] Found Vue source:', sourceFile)
+        }
+      }
+    }
+
+    // Try Vite's HMR source map
+    if (!sourceFile) {
+      // Look for data-vite-dev-id or similar attributes
+      const viteId = el.getAttribute('data-vite-dev-id')
+      if (viteId) {
+        // Extract file path from viteId (remove query params if any)
+        const queryIndex = viteId.indexOf('?')
+        sourceFile = '/' + (queryIndex >= 0 ? viteId.substring(0, queryIndex) : viteId)
+        console.log('[Claude Dev Server] Found Vite ID:', viteId)
+      }
+    }
+
+    // Check for inline script
+    if (!sourceFile) {
+      const inlineScripts = document.querySelectorAll('script:not([src])')
+      if (inlineScripts.length > 0) {
+        const pathParts = window.location.pathname.split('/')
+        const fileName = pathParts[pathParts.length - 1] || 'index.html'
+        sourceFile = '/' + fileName
+
+        const html = document.documentElement.outerHTML
+        const elId = el.id ? el.id : ''
+        const elClass = el.className ? el.className : ''
+        let elPattern
+        if (elId) {
+          elPattern = 'id="' + elId + '"'
+        } else if (elClass) {
+          elPattern = 'class="' + elClass.split(' ')[0] + '"'
+        } else {
+          elPattern = el.tagName.toLowerCase()
+        }
+
+        const matchIndex = html.indexOf(elPattern)
+        if (matchIndex !== -1) {
+          const beforeElement = html.substring(0, matchIndex)
+          sourceLine = beforeElement.split('\\n').length
+        }
+      }
+    }
+
+    // Find main script
+    if (!sourceFile) {
+      const scripts = document.querySelectorAll('script[src]')
+      for (const script of scripts) {
+        const src = script.getAttribute('src')
+        if (src && !src.includes('cdn') && !src.includes('node_modules') &&
+            (src.includes('/src/') || src.includes('/app.') || src.includes('/main.'))) {
+          sourceFile = src
+          break
+        }
+      }
+    }
+
+    // Fallback
+    if (!sourceFile) {
+      const pathParts = window.location.pathname.split('/')
+      const fileName = pathParts[pathParts.length - 1] || 'index.html'
+      sourceFile = '/' + fileName
+    }
+
+    const elClassName = el.className ? String(el.className) : ''
+    const selector = el.tagName.toLowerCase() +
+      (el.id ? '#' + el.id : '') +
+      (elClassName ? '.' + elClassName.split(' ').filter(c => c).join('.') : '')
+
+    return {
+      url: sourceFile,
+      line: sourceLine,
+      column: sourceColumn,
+      selector: selector,
+      hint: sourceFile ? 'File: ' + sourceFile : 'Element: ' + selector
+    }
+  }
+
+  function enableInspectMode() {
+    isInspectMode = true
+    overlay && overlay.classList.add('active')
+    document.body.style.cursor = 'crosshair'
+
+    // \u66F4\u65B0\u60AC\u6D6E inspect \u6309\u94AE\u72B6\u6001
+    if (inspectBtn) inspectBtn.classList.add('active')
+
+    // \u68C0\u67E5\u5143\u7D20\u662F\u5426\u5C5E\u4E8E dev tools
+    function isDevToolElement(el) {
+      if (!el) return false
+      // \u68C0\u67E5\u5143\u7D20\u672C\u8EAB
+      if (el.dataset && el.dataset.devTool === 'true') return true
+      // \u68C0\u67E5\u7236\u5143\u7D20
+      let parent = el.parentElement
+      while (parent) {
+        if (parent.dataset && parent.dataset.devTool === 'true') return true
+        parent = parent.parentElement
+      }
+      return false
+    }
+
+    const onMouseMove = async (e) => {
+      if (!isInspectMode) return
+      const el = document.elementFromPoint(e.clientX, e.clientY)
+      // \u5FFD\u7565 dev tools \u5143\u7D20\u548C overlay
+      if (el && el !== overlay && !isDevToolElement(el) && (!overlay || !overlay.contains(el))) {
+        highlightElement(el)
+      }
+    }
+
+    const onClick = async (e) => {
+      if (!isInspectMode) return
+      e.preventDefault()
+      e.stopPropagation()
+
+      const el = document.elementFromPoint(e.clientX, e.clientY)
+      // \u5FFD\u7565 dev tools \u5143\u7D20\u548C overlay
+      if (el && el !== overlay && !isDevToolElement(el) && (!overlay || !overlay.contains(el))) {
+        const location = await getSourceLocation(el)
+        if (location) {
+          await inspectElement(location, el)
+        }
+        disableInspectMode()
+      }
+    }
+
+    document.addEventListener('mousemove', onMouseMove, true)
+    document.addEventListener('click', onClick, true)
+
+    if (overlay) overlay._inspectHandlers = { onMouseMove, onClick }
+  }
+
+  function disableInspectMode() {
+    isInspectMode = false
+    if (overlay) overlay.classList.remove('active')
+    document.body.style.cursor = ''
+    if (overlay) overlay.innerHTML = ''
+
+    // \u66F4\u65B0\u60AC\u6D6E inspect \u6309\u94AE\u72B6\u6001
+    if (inspectBtn) inspectBtn.classList.remove('active')
+
+    const btn = panel && panel.querySelector('.claude-dev-server-btn-inspect')
+    if (btn) btn.classList.remove('active')
+
+    const handlers = overlay && overlay._inspectHandlers
+    if (handlers) {
+      document.removeEventListener('mousemove', handlers.onMouseMove, true)
+      document.removeEventListener('click', handlers.onClick, true)
+    }
+  }
+
+  async function inspectElement(location, el) {
+    // \u6784\u5EFA\u683C\u5F0F\u5316\u7684 prompt
+    const filePath = location.url || location.file || 'unknown'
+    const tagName = el.tagName ? el.tagName.toLowerCase() : ''
+    const id = el.id ? '#' + el.id : ''
+    const className = el.className ? '.' + String(el.className).split(' ').filter(c => c).join('.') : ''
+    const selector = tagName + id + className
+
+    // \u83B7\u53D6\u5143\u7D20\u7684\u6587\u672C\u5185\u5BB9\uFF08\u5982\u679C\u662F\u6587\u672C\u8282\u70B9\u6216\u77ED\u6587\u672C\u5143\u7D20\uFF09
+    let textContent = ''
+    if (el.nodeType === Node.TEXT_NODE) {
+      textContent = el.textContent ? el.textContent.trim().substring(0, 50) : ''
+    } else if (el.childNodes.length === 1 && el.childNodes[0].nodeType === Node.TEXT_NODE) {
+      textContent = el.childNodes[0].textContent ? el.childNodes[0].textContent.trim().substring(0, 50) : ''
+    }
+
+    // \u683C\u5F0F: @filename:line <selector> "text content"
+    let prompt = \`@\${filePath}:\${location.line} <\${selector}>\`
+    if (textContent) {
+      prompt += \` "\${textContent}"\`
+    }
+
+    // \u53D1\u9001\u6210\u529F\u540E\u5C55\u5F00\u9762\u677F
+    const sendToTerminal = () => {
+      if (!terminalIframe || !terminalIframe.contentWindow) {
+        return false
+      }
+
+      const win = terminalIframe.contentWindow
+
+      // Check if sendToTerminal function is available
+      if (win.sendToTerminal) {
+        win.sendToTerminal(prompt)
+        console.log('[Claude Dev Server] Sent via sendToTerminal:', prompt)
+        // \u53D1\u9001\u6210\u529F\u540E\u5C55\u5F00\u9762\u677F
+        setTimeout(() => togglePanel(true), 100)
+        return true
+      }
+
+      return false
+    }
+
+    // Try immediately
+    if (sendToTerminal()) {
+      return
+    }
+
+    // If not ready, wait and retry
+    let attempts = 0
+    const maxAttempts = 50
+    const retryInterval = setInterval(() => {
+      attempts++
+      if (sendToTerminal() || attempts >= maxAttempts) {
+        clearInterval(retryInterval)
+        if (attempts >= maxAttempts) {
+          console.warn('[Claude Dev Server] Could not send to terminal after retries')
+        }
+      }
+    }, 100)
+  }
+
+  function loadTerminalIframe(ttydUrl) {
+    if (!terminalContainer || terminalIframe) return
+    ttydWsUrl = ttydUrl
+
+    // Create iframe pointing to ttyd/index.html with ttyd WebSocket URL
+    terminalIframe = document.createElement('iframe')
+    // Pass the ttyd WebSocket URL as query param
+    terminalIframe.src = '/ttyd/index.html?ws=' + encodeURIComponent(ttydUrl)
+    terminalIframe.allow = 'clipboard-read; clipboard-write'
+
+    // Load event - iframe is ready
+    terminalIframe.onload = () => {
+      console.log('[Claude Dev Server] Terminal iframe loaded')
+    }
+
+    terminalContainer.appendChild(terminalIframe)
+  }
+
+  function createPanel() {
+    if (panel) return
+
+    panel = document.createElement('div')
+    panel.className = 'claude-dev-server-panel'
+    panel.innerHTML = \`
+      <div class="claude-dev-server-header">
+        <span class="claude-dev-server-title">Claude Code</span>
+        <div class="claude-dev-server-actions">
+          <button class="claude-dev-server-btn claude-dev-server-btn-inspect" title="Inspect Element">
+            <svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+              <path d="M2 12h20M12 2v20M4.93 4.93l14.14 14.14M19.07 4.93L4.93 19.07"/>
+            </svg>
+            Inspect
+          </button>
+        </div>
+        <button class="claude-dev-server-close" aria-label="Close" title="Minimize to icon">&times;</button>
+      </div>
+      <div class="claude-dev-server-terminal"></div>
+    \`
+
+    document.body.appendChild(panel)
+
+    terminalContainer = panel.querySelector('.claude-dev-server-terminal')
+    const closeBtn = panel.querySelector('.claude-dev-server-close')
+    const inspectBtn = panel.querySelector('.claude-dev-server-btn-inspect')
+
+    closeBtn && closeBtn.addEventListener('click', () => togglePanel(false))
+
+    inspectBtn && inspectBtn.addEventListener('click', () => {
+      if (isInspectMode) {
+        disableInspectMode()
+      } else {
+        // \u70B9\u51FB Inspect \u65F6\u5148\u6536\u8D77\u9762\u677F
+        if (isOpen) {
+          togglePanel(false)
+        }
+        enableInspectMode()
+      }
+    })
+  }
+
+  function togglePanel(force) {
+    createPanel()
+    if (typeof force === 'boolean') {
+      isOpen = force
+    } else {
+      isOpen = !isOpen
+    }
+
+    if (panel) panel.classList.toggle('open', isOpen)
+    if (toggleBtn) toggleBtn.classList.toggle('hidden', isOpen)
+
+    if (isOpen) {
+      // Focus iframe when panel opens
+      if (terminalIframe && terminalIframe.contentWindow) {
+        setTimeout(() => {
+          if (terminalIframe.contentWindow.terminalInstance) {
+            terminalIframe.contentWindow.terminalInstance.focus()
+          }
+        }, 100)
+      }
+    }
+  }
+
+  function connect(port) {
+    const WS_URL = 'ws://localhost:' + port
+    ws = new WebSocket(WS_URL)
+
+    ws.onopen = () => {
+      console.log('[Claude Dev Server] Connected to control server')
+    }
+
+    ws.onmessage = (e) => {
+      try {
+        const msg = JSON.parse(e.data)
+        console.log('[Claude Dev Server] Received message:', msg.type, msg)
+        if (msg.type === 'ready' && msg.ttydUrl) {
+          loadTerminalIframe(msg.ttydUrl)
+        } else if (msg.type === 'inspectResult') {
+          if (msg.location) {
+            showContextPanel(msg.location, null, false)
+          }
+        }
+      } catch (err) {
+        console.error('[Claude Dev Server] Message parse error:', err)
+      }
+    }
+
+    ws.onclose = () => {
+      console.log('[Claude Dev Server] Control WebSocket disconnected, reconnecting...')
+      setTimeout(() => connect(port), 2000)
+    }
+
+    ws.onerror = (err) => {
+      console.error('[Claude Dev Server] Control WebSocket error:', err)
+    }
+  }
+
+  initWhenReady()
+
+  document.addEventListener('keydown', (e) => {
+    if ((e.metaKey || e.ctrlKey) && e.code === 'Backquote') {
+      e.preventDefault()
+      togglePanel()
+    }
+    if (e.key === 'Escape' && isOpen) {
+      togglePanel(false)
+    }
+    if (e.key === 'Escape' && isInspectMode) {
+      disableInspectMode()
+    }
+  })
+})()
+`;
+
+// src/universal/index.ts
+var __filename$1 = fileURLToPath(import.meta.url);
+dirname(__filename$1);
+async function startUniversalServer(options = {}) {
+  const cwd = options.cwd || process.cwd();
+  const port = options.port || 3e3;
+  const projectType = options.server?.type || detectProjectType(cwd);
+  const targetCommand = options.server?.command || getDefaultCommand(projectType);
+  console.log(`[Claude Dev Server] Detected project type: ${projectType}`);
+  console.log(`[Claude Dev Server] Starting target server...`);
+  const targetServer = spawnTargetServer(targetCommand, cwd);
+  console.log(`[Claude Dev Server] Waiting for target server to start (PID: ${targetServer.pid})...`);
+  const targetPort = await detectServerPort(targetServer, 3e4);
+  if (!targetPort) {
+    throw new Error("Failed to detect target server port. Please check if the dev server started successfully.");
+  }
+  console.log(`[Claude Dev Server] Target server is running on port ${targetPort}`);
+  const wsServer = createWebSocketServer({
+    port: 0,
+    // 自动分配端口
+    projectRoot: cwd,
+    claudePath: options.claudePath || "claude",
+    claudeArgs: options.claudeArgs || []
+  });
+  const { wsPort, ttydPort } = await wsServer.start();
+  console.log(`[Claude Dev Server] Control server running on ws://localhost:${wsPort}`);
+  console.log(`[Claude Dev Server] ttyd running on ws://localhost:${ttydPort}`);
+  const proxyServer = createProxyServer(targetPort, wsPort, cwd);
+  proxyServer.listen(port);
+  console.log(`[Claude Dev Server] Proxy server running on http://localhost:${port}`);
+  console.log(`
+\u{1F680} Ready! Open http://localhost:${port} in your browser`);
+  const cleanup = () => {
+    console.log("[Claude Dev Server] Shutting down...");
+    targetServer.kill();
+    wsServer.stop();
+    proxyServer.close();
+    process.exit(0);
+  };
+  process.on("SIGINT", cleanup);
+  process.on("SIGTERM", cleanup);
+  return { proxyServer, targetServer, wsServer };
+}
+function detectProjectType(cwd) {
+  if (existsSync(join(cwd, "vite.config.ts")) || existsSync(join(cwd, "vite.config.js"))) {
+    return "vite";
+  }
+  if (existsSync(join(cwd, "next.config.js")) || existsSync(join(cwd, "next.config.mjs"))) {
+    return "next";
+  }
+  if (existsSync(join(cwd, "webpack.config.js")) || existsSync(join(cwd, "webpack.config.ts"))) {
+    return "webpack";
+  }
+  return "custom";
+}
+function getDefaultCommand(projectType) {
+  switch (projectType) {
+    case "vite":
+      return "npm run dev";
+    case "next":
+      return "npm run dev";
+    case "webpack":
+      return "npm run dev";
+    default:
+      return "npm run dev";
+  }
+}
+function spawnTargetServer(command, cwd) {
+  const [cmd, ...args] = command.split(" ");
+  const child = spawn(cmd, args, {
+    cwd,
+    stdio: "pipe",
+    env: process.env
+  });
+  child.stdout?.pipe(process.stdout);
+  child.stderr?.pipe(process.stderr);
+  return child;
+}
+async function detectServerPort(childProcess, timeout) {
+  return new Promise((resolve2) => {
+    const timeoutId = setTimeout(() => {
+      cleanup();
+      resolve2(null);
+    }, timeout);
+    let stdout = "";
+    const onData = (chunk) => {
+      stdout += chunk.toString();
+      const patterns = [
+        /localhost:(\d{4,5})/,
+        /127\.0\.0\.1:(\d{4,5})/,
+        /0\.0\.0\.0:(\d{4,5})/
+      ];
+      for (const pattern of patterns) {
+        const match = stdout.match(pattern);
+        if (match) {
+          const port = parseInt(match[1], 10);
+          console.log(`[Claude Dev Server] Detected port from stdout: ${port}`);
+          cleanup();
+          resolve2(port);
+          return;
+        }
+      }
+    };
+    const cleanup = () => {
+      clearTimeout(timeoutId);
+      childProcess.stdout?.off("data", onData);
+    };
+    childProcess.stdout?.on("data", onData);
+  });
+}
+function createProxyServer(targetPort, wsPort, projectRoot) {
+  const moduleDir = dirname(fileURLToPath(import.meta.url));
+  const assetsPath = join(moduleDir, "assets");
+  let ttydHtml;
+  let ttydBridgeJs;
+  try {
+    ttydHtml = readFileSync(join(assetsPath, "ttyd-terminal.html"), "utf-8");
+    ttydBridgeJs = readFileSync(join(assetsPath, "ttyd-bridge.js"), "utf-8");
+  } catch (e) {
+    console.error("[Claude Dev Server] Failed to read ttyd assets from", assetsPath);
+    console.error("[Claude Dev Server] moduleDir:", moduleDir);
+    console.error("[Claude Dev Server] Error:", e.message);
+    throw new Error("ttyd assets not found. Please run `npm run build` first.");
+  }
+  return http.createServer((req, res) => {
+    if (req.url === "/@claude-port") {
+      res.setHeader("Content-Type", "application/json");
+      res.end(JSON.stringify({ port: wsPort }));
+      return;
+    }
+    if (req.url?.startsWith("/ttyd/")) {
+      const urlPath = req.url.split("?")[0];
+      if (urlPath === "/ttyd/index.html" || urlPath === "/ttyd/") {
+        res.setHeader("Content-Type", "text/html");
+        res.end(ttydHtml);
+        return;
+      }
+      if (urlPath === "/ttyd/ttyd-bridge.js") {
+        res.setHeader("Content-Type", "application/javascript");
+        res.end(ttydBridgeJs);
+        return;
+      }
+      res.statusCode = 404;
+      res.end("Not found");
+      return;
+    }
+    const options = {
+      hostname: "localhost",
+      port: targetPort,
+      path: req.url,
+      method: req.method,
+      headers: req.headers
+    };
+    const proxyReq = http.request(options, (proxyRes) => {
+      if (proxyRes.headers["content-type"]?.includes("text/html")) {
+        const body = [];
+        proxyRes.on("data", (chunk) => body.push(chunk));
+        proxyRes.on("end", () => {
+          const html = Buffer.concat(body).toString("utf8");
+          const injected = injectScripts(html, wsPort, projectRoot);
+          const statusCode = proxyRes.statusCode || 200;
+          res.writeHead(statusCode, {
+            ...proxyRes.headers,
+            "content-length": Buffer.byteLength(injected)
+          });
+          res.end(injected);
+        });
+      } else {
+        const statusCode = proxyRes.statusCode || 200;
+        res.writeHead(statusCode, proxyRes.headers);
+        proxyRes.pipe(res);
+      }
+    });
+    proxyReq.on("error", (err) => {
+      console.error("[Claude Dev Server] Proxy error:", err);
+      res.statusCode = 502;
+      res.end("Bad Gateway");
+    });
+    req.pipe(proxyReq);
+  });
+}
+function injectScripts(html, wsPort, projectRoot) {
+  const projectRootScript = `<script>window.__CLAUDE_PROJECT_ROOT__ = ${JSON.stringify(projectRoot)}</script>`;
+  return html.replace(
+    "</head>",
+    `<!-- Claude Dev Server -->
+${CLIENT_STYLES}
+${projectRootScript}
+<script type="module">${CLIENT_SCRIPT}</script>
+</head>`
+  ).replace(
+    /wsPort:\s*\d+/,
+    `wsPort: ${wsPort}`
+  );
+}
+
+export { startUniversalServer };
+//# sourceMappingURL=chunk-DOLSA776.js.map
+//# sourceMappingURL=chunk-DOLSA776.js.map