hermes-web-ui 0.0.1 → 0.1.1

package/bin/hermes-web-ui.mjs

@@ -1,24 +1,125 @@
 #!/usr/bin/env node
-import { spawn } from 'child_process'
-import { resolve, dirname } from 'path'
+import { createServer as createViteServer } from 'http'
+import { resolve, dirname, join } from 'path'
 import { fileURLToPath } from 'url'
+import { readFile, stat, readdir } from 'fs/promises'
 
 const __dirname = dirname(fileURLToPath(import.meta.url))
-const projectRoot = resolve(__dirname, '..')
-
-const args = process.argv.slice(2)
-const command = args[0]
-
-if (!command || command === 'start' || command === 'dev') {
-  const viteBin = resolve(projectRoot, 'node_modules/.bin/vite')
-  spawn(viteBin, ['--host', '--port', '8648'], { stdio: 'inherit', cwd: projectRoot })
-} else if (command === 'build') {
-  const viteBin = resolve(projectRoot, 'node_modules/.bin/vite')
-  spawn(viteBin, ['build'], { stdio: 'inherit', cwd: projectRoot })
-} else {
-  console.log(`Usage: hermes-web-ui [command]`)
-  console.log()
-  console.log('Commands:')
-  console.log('  start    Start dev server (default)')
-  console.log('  build    Build for production')
+const distDir = resolve(__dirname, '..', 'dist')
+const API_TARGET = 'http://127.0.0.1:8642'
+const DEFAULT_PORT = 8648
+
+const MIME_TYPES = {
+  '.html': 'text/html',
+  '.js': 'application/javascript',
+  '.css': 'text/css',
+  '.json': 'application/json',
+  '.png': 'image/png',
+  '.svg': 'image/svg+xml',
+  '.ico': 'image/x-icon',
+  '.woff': 'font/woff',
+  '.woff2': 'font/woff2',
+}
+
+function getMimeType(filePath) {
+  const ext = filePath.substring(filePath.lastIndexOf('.'))
+  return MIME_TYPES[ext] || 'application/octet-stream'
+}
+
+async function serveStatic(reqPath, res) {
+  let filePath = join(distDir, reqPath)
+  try {
+    const s = await stat(filePath)
+    if (s.isDirectory()) filePath = join(filePath, 'index.html')
+    const data = await readFile(filePath)
+    res.writeHead(200, {
+      'Content-Type': getMimeType(filePath),
+      'Cache-Control': 'public, max-age=3600',
+    })
+    res.end(data)
+  } catch {
+    // SPA fallback
+    try {
+      const data = await readFile(join(distDir, 'index.html'))
+      res.writeHead(200, { 'Content-Type': 'text/html' })
+      res.end(data)
+    } catch {
+      res.writeHead(404, { 'Content-Type': 'text/plain' })
+      res.end('Not Found')
+    }
+  }
+}
+
+async function proxyRequest(req, res, reqPath) {
+  const url = `${API_TARGET}${reqPath}`
+  const headers = { ...req.headers, host: '127.0.0.1:8642' }
+  delete headers['origin']
+  delete headers['referer']
+
+  try {
+    const hasBody = req.method !== 'GET' && req.method !== 'HEAD'
+    const bodyChunks = hasBody ? [] : null
+    if (hasBody) {
+      for await (const chunk of req) bodyChunks.push(chunk)
+    }
+
+    const apiRes = await fetch(url, {
+      method: req.method,
+      headers,
+      body: bodyChunks ? Buffer.concat(bodyChunks) : undefined,
+    })
+
+    const resHeaders = {}
+    apiRes.headers.forEach((v, k) => {
+      if (k !== 'transfer-encoding' && k !== 'connection') {
+        resHeaders[k] = v
+      }
+    })
+    resHeaders['x-accel-buffering'] = 'no'
+    resHeaders['cache-control'] = 'no-cache'
+
+    res.writeHead(apiRes.status, resHeaders)
+
+    if (apiRes.body) {
+      const reader = apiRes.body.getReader()
+      const pump = async () => {
+        while (true) {
+          const { done, value } = await reader.read()
+          if (done) break
+          res.write(value)
+        }
+        res.end()
+      }
+      await pump()
+    } else {
+      res.end()
+    }
+  } catch (err) {
+    if (!res.headersSent) {
+      res.writeHead(502, { 'Content-Type': 'application/json' })
+    }
+    res.end(JSON.stringify({ error: { message: `API proxy error: ${err.message}` } }))
+  }
 }
+
+const command = process.argv[2]
+
+if (command === 'build') {
+  console.log('Build is done during npm install. Use "npm run build" in the source repo.')
+  process.exit(1)
+}
+
+// start (default)
+const port = parseInt(process.argv[2] && !isNaN(process.argv[2]) ? process.argv[2] : process.argv.includes('--port') ? process.argv[process.argv.indexOf('--port') + 1] : '') || DEFAULT_PORT
+
+createViteServer(async (req, res) => {
+  const reqPath = req.url.split('?')[0]
+
+  if (reqPath.startsWith('/api/') || reqPath.startsWith('/v1/') || reqPath === '/health' || reqPath.startsWith('/health')) {
+    await proxyRequest(req, res, reqPath)
+  } else {
+    await serveStatic(reqPath, res)
+  }
+}).listen(port, '0.0.0.0', () => {
+  console.log(`  ➜  Hermes Web UI: http://localhost:${port}`)
+})

package/dist/assets/ChatView-DrzZz5ex.css

@@ -0,0 +1 @@
+.markdown-body{font-size:14px;line-height:1.65}.markdown-body p{margin:0 0 8px}.markdown-body p:last-child{margin-bottom:0}.markdown-body ul,.markdown-body ol{margin:4px 0 8px;padding-left:20px}.markdown-body li{margin:2px 0}.markdown-body strong{color:#1a1a1a;font-weight:600}.markdown-body em{color:#666}.markdown-body a{color:#333;text-underline-offset:2px;text-decoration:underline}.markdown-body a:hover{color:#1a1a1a}.markdown-body blockquote{color:#666;border-left:3px solid #e0e0e0;margin:8px 0;padding:4px 12px}.markdown-body code:not(.hljs){color:#333;background:#f4f4f4;border-radius:4px;padding:2px 6px;font-family:JetBrains Mono,Fira Code,Consolas,monospace;font-size:13px}.markdown-body table{border-collapse:collapse;width:100%;margin:8px 0}.markdown-body table th,.markdown-body table td{text-align:left;border:1px solid #e0e0e0;padding:6px 12px;font-size:13px}.markdown-body table th{color:#1a1a1a;background:#33333314;font-weight:600}.markdown-body table td{color:#666}.markdown-body hr{border:none;border-top:1px solid #e0e0e0;margin:12px 0}.hljs-code-block{background:#f4f4f4;border:1px solid #e0e0e0;border-radius:6px;margin:8px 0;overflow:hidden}.hljs-code-block .code-header{background:#00000008;border-bottom:1px solid #e0e0e0;justify-content:space-between;align-items:center;padding:6px 12px;display:flex}.hljs-code-block .code-header .code-lang{color:#999;text-transform:uppercase;font-size:11px}.hljs-code-block .code-header .copy-btn{color:#999;cursor:pointer;background:0 0;border:none;border-radius:3px;padding:2px 6px;font-size:11px;transition:all .15s}.hljs-code-block .code-header .copy-btn:hover{color:#1a1a1a;background:#0000000d}.hljs-code-block code.hljs{padding:12px;font-family:JetBrains Mono,Fira Code,Consolas,monospace;font-size:13px;line-height:1.5;display:block;overflow-x:auto}.hljs{color:#2a2a2a;background:0 0}.hljs-keyword,.hljs-selector-tag{color:#1a1a1a;font-weight:600}.hljs-string,.hljs-attr{color:#555}.hljs-number{color:#333}.hljs-comment{color:#999;font-style:italic}.hljs-built_in{color:#444}.hljs-type{color:#3a3a3a}.hljs-variable,.hljs-title,.hljs-title\.function_{color:#1a1a1a}.hljs-params{color:#2a2a2a}.hljs-meta{color:#999}.message[data-v-865df6f5]{flex-direction:column;display:flex}.message.user[data-v-865df6f5]{align-items:flex-end}.message.user .msg-body[data-v-865df6f5]{max-width:75%}.message.user .msg-content.user[data-v-865df6f5]{align-items:flex-end}.message.user .message-bubble[data-v-865df6f5]{background-color:#e8e8e8;border-radius:10px 10px 4px}.message.assistant[data-v-865df6f5]{flex-direction:row;align-items:flex-start;gap:8px}.message.assistant .msg-body[data-v-865df6f5]{max-width:80%}.message.assistant .msg-avatar[data-v-865df6f5]{border-radius:4px;flex-shrink:0;width:28px;height:28px;margin-top:2px}.message.assistant .message-bubble[data-v-865df6f5]{background-color:#f5f5f5;border-radius:10px 10px 10px 4px}.message.tool[data-v-865df6f5],.message.system[data-v-865df6f5]{align-items:flex-start}.message.system .message-bubble.system[data-v-865df6f5]{background-color:#f57f170f;border-left:3px solid #f57f17;border-radius:6px;max-width:80%}.msg-body[data-v-865df6f5]{align-items:flex-start;gap:8px;max-width:85%;display:flex}.msg-content[data-v-865df6f5]{flex-direction:column;min-width:0;display:flex}.message-bubble[data-v-865df6f5]{word-break:break-word;padding:10px 14px;font-size:14px;line-height:1.65}.message-time[data-v-865df6f5]{color:#999;margin-top:4px;padding:0 4px;font-size:11px}.tool-line[data-v-865df6f5]{color:#999;align-items:center;gap:6px;padding:0 4px;font-size:11px;display:flex}.tool-line .tool-name[data-v-865df6f5]{font-family:JetBrains Mono,Fira Code,Consolas,monospace}.tool-line .tool-preview[data-v-865df6f5]{text-overflow:ellipsis;white-space:nowrap;max-width:400px;overflow:hidden}.streaming-cursor[data-v-865df6f5]{vertical-align:text-bottom;background-color:#999;width:2px;height:1em;margin-left:2px;animation:.8s infinite blink-865df6f5;display:inline-block}.streaming-dots[data-v-865df6f5]{gap:4px;padding:4px 0;display:flex}.streaming-dots span[data-v-865df6f5]{background-color:#999;border-radius:50%;width:6px;height:6px;animation:1.4s ease-in-out infinite pulse-865df6f5}.streaming-dots span[data-v-865df6f5]:nth-child(2){animation-delay:.2s}.streaming-dots span[data-v-865df6f5]:nth-child(3){animation-delay:.4s}@keyframes blink-865df6f5{0%,50%{opacity:1}51%,to{opacity:0}}@keyframes pulse-865df6f5{0%,80%,to{opacity:.3;transform:scale(.8)}40%{opacity:1;transform:scale(1)}}.message-list[data-v-c48f8f02]{flex-direction:column;flex:1;gap:16px;padding:20px;display:flex;overflow-y:auto}.empty-state[data-v-c48f8f02]{color:#999;flex-direction:column;flex:1;justify-content:center;align-items:center;gap:12px;display:flex}.empty-state .empty-logo[data-v-c48f8f02]{opacity:.25;width:48px;height:48px}.empty-state p[data-v-c48f8f02]{font-size:14px}.streaming-indicator[data-v-c48f8f02]{color:#999;align-items:center;gap:4px;padding:4px;display:flex}.streaming-indicator span[data-v-c48f8f02]{background-color:#999;border-radius:50%;width:5px;height:5px;animation:1.4s ease-in-out infinite stream-pulse-c48f8f02}.streaming-indicator span[data-v-c48f8f02]:nth-child(2){animation-delay:.2s}.streaming-indicator span[data-v-c48f8f02]:nth-child(3){animation-delay:.4s}@keyframes stream-pulse-c48f8f02{0%,80%,to{opacity:.2;transform:scale(.8)}40%{opacity:1;transform:scale(1)}}.chat-input-area[data-v-7668b7e3]{border-top:1px solid #e0e0e0;flex-shrink:0;padding:12px 20px 16px}.input-wrapper[data-v-7668b7e3]{background-color:#fff;border:1px solid #e0e0e0;border-radius:10px;align-items:center;gap:10px;padding:10px 12px;transition:border-color .15s;display:flex}.input-wrapper[data-v-7668b7e3]:focus-within{border-color:#333}.input-textarea[data-v-7668b7e3]{color:#1a1a1a;resize:none;background:0 0;border:none;outline:none;flex:1;min-height:20px;max-height:100px;font-family:Inter,system-ui,-apple-system,sans-serif;font-size:14px;line-height:1.5;overflow-y:auto}.input-textarea[data-v-7668b7e3]::placeholder{color:#999}.input-actions[data-v-7668b7e3]{flex-shrink:0;align-items:center;gap:6px;display:flex}.chat-panel[data-v-24185ee8]{height:100%;display:flex}.session-list[data-v-24185ee8]{border-right:1px solid #e0e0e0;flex-direction:column;flex-shrink:0;width:220px;transition:width .25s,opacity .25s;display:flex;overflow:hidden}.session-list.collapsed[data-v-24185ee8]{opacity:0;pointer-events:none;border-right:none;width:0}.session-list-header[data-v-24185ee8]{flex-shrink:0;justify-content:space-between;align-items:center;padding:12px;display:flex}.session-list-title[data-v-24185ee8]{color:#999;text-transform:uppercase;letter-spacing:.5px;font-size:12px;font-weight:600}.session-items[data-v-24185ee8]{flex:1;padding:0 6px 12px;overflow-y:auto}.session-item[data-v-24185ee8]{cursor:pointer;text-align:left;color:#666;background:0 0;border:none;border-radius:6px;justify-content:space-between;align-items:center;width:100%;margin-bottom:2px;padding:8px 10px;transition:all .15s;display:flex}.session-item[data-v-24185ee8]:hover{color:#1a1a1a;background:#3333330f}.session-item:hover .session-item-delete[data-v-24185ee8]{opacity:1}.session-item.active[data-v-24185ee8]{color:#1a1a1a;background:#3333331a;font-weight:500}.session-item-content[data-v-24185ee8]{flex:1;overflow:hidden}.session-item-title[data-v-24185ee8]{white-space:nowrap;text-overflow:ellipsis;font-size:13px;display:block;overflow:hidden}.session-item-time[data-v-24185ee8]{color:#999;margin-top:2px;font-size:11px;display:block}.session-item-delete[data-v-24185ee8]{opacity:0;color:#999;cursor:pointer;background:0 0;border:none;border-radius:3px;flex-shrink:0;padding:2px;transition:all .15s}.session-item-delete[data-v-24185ee8]:hover{color:#c62828;background:#c628281a}.chat-main[data-v-24185ee8]{flex-direction:column;flex:1;min-width:0;display:flex;overflow:hidden}.chat-header[data-v-24185ee8]{border-bottom:1px solid #e0e0e0;flex-shrink:0;justify-content:space-between;align-items:center;padding:12px 16px;display:flex}.header-left[data-v-24185ee8]{align-items:center;gap:8px;display:flex;overflow:hidden}.header-session-title[data-v-24185ee8]{color:#1a1a1a;white-space:nowrap;text-overflow:ellipsis;font-size:14px;font-weight:500;overflow:hidden}.model-badge[data-v-24185ee8]{color:#999;background:#3333331a;border:1px solid #e0e0e0;border-radius:10px;flex-shrink:0;padding:2px 8px;font-size:11px}.header-actions[data-v-24185ee8]{flex-shrink:0;align-items:center;gap:4px;display:flex}.chat-view[data-v-e67fc0ba]{flex-direction:column;height:100vh;display:flex}