ui: switch to wrapper-console palette + flat layout

Co-Authored-By: Claude Opus 4.7 <noreply@anthropic.com>
2026-06-10 18:43:04 +02:00
parent 0dc29537ce
commit 7fbe2555fb
1 changed files with 60 additions and 104 deletions
@@ -4,115 +4,75 @@
 <meta charset="utf-8">
 <title>svc-proxy</title>
 <style>
-    :root {
-      --bg: #0f1115;
-      --panel: #161922;
-      --panel-2: #1c2030;
-      --border: #2a2f42;
-      --text: #d6d9e0;
-      --muted: #7a8194;
-      --accent: #6aa9ff;
-      --up: #4ade80;
-      --down: #f59e0b;
-      --err: #f87171;
-      --warn: #fbbf24;
-      --info: #93c5fd;
-      --dbg: #6b7280;
-    }
-    * { box-sizing: border-box; }
-    body {
-      margin: 0; padding: 0;
-      font: 13px/1.4 ui-monospace, "JetBrains Mono", Menlo, Consolas, monospace;
-      background: var(--bg); color: var(--text);
-      display: grid; grid-template-rows: auto 1fr 1fr; height: 100vh;
-    }
-    header {
-      padding: 10px 16px;
-      border-bottom: 1px solid var(--border);
-      background: var(--panel);
-      display: flex; justify-content: space-between; align-items: center;
-    }
-    h1 { margin: 0; font-size: 14px; font-weight: 600; letter-spacing: 0.5px; }
-    h1 .meta { color: var(--muted); margin-left: 12px; font-weight: normal; }
-    .status { color: var(--muted); font-size: 12px; }
-    .status.ok { color: var(--up); }
-    .status.err { color: var(--err); }
+  html, body { margin: 0; padding: 0; height: 100%; background: #0e0e0e; color: #eee;
+               font-family: ui-monospace, "SF Mono", Menlo, monospace; font-size: 13px; line-height: 1.4; }
+  body { display: flex; flex-direction: column; }
+  header { padding: 8px 12px; background: #1a1a1a; border-bottom: 1px solid #333;
+           display: flex; justify-content: space-between; align-items: center; flex: 0 0 auto; }
+  header h1 { margin: 0; font-size: 14px; font-weight: 600; }
+  header h1 .meta { color: #888; font-weight: normal; margin-left: 10px; }
+  #status { font-size: 12px; color: #6f6; }
+  #status.disconnected { color: #f66; }
+  #status.connecting { color: #fc6; }

-    section { padding: 12px 16px; overflow: auto; border-bottom: 1px solid var(--border); }
-    section h2 {
-      margin: 0 0 10px; font-size: 12px; text-transform: uppercase;
-      letter-spacing: 0.7px; color: var(--muted); font-weight: 600;
-    }
-    section.logs { font-size: 12.5px; }
-    section.logs h2 { display: flex; justify-content: space-between; align-items: center; }
-    section.logs h2 .clear {
-      background: transparent; color: var(--muted); border: 1px solid var(--border);
-      padding: 2px 8px; cursor: pointer; font: inherit; border-radius: 3px;
-    }
-    section.logs h2 .clear:hover { color: var(--text); border-color: var(--accent); }
+  main { flex: 1; display: grid; grid-template-rows: 1fr 1fr; min-height: 0; }
+  section { padding: 12px 16px; overflow: auto; min-height: 0; }
+  section + section { border-top: 1px solid #333; }

-    table { width: 100%; border-collapse: collapse; }
-    th, td {
-      text-align: left; padding: 6px 10px;
-      border-bottom: 1px solid var(--border);
-      font-variant-numeric: tabular-nums;
-    }
-    th { color: var(--muted); font-weight: 500; font-size: 11px; text-transform: uppercase; letter-spacing: 0.5px; }
-    tbody tr:hover { background: var(--panel-2); }
+  h2 { margin: 0 0 8px; font-size: 12px; font-weight: 600; color: #888;
+       text-transform: uppercase; letter-spacing: 0.6px;
+       display: flex; justify-content: space-between; align-items: center; }
+  h2 .count { color: #888; font-weight: normal; margin-left: 6px; }
+  h2 button { background: transparent; color: #888; border: 1px solid #333;
+              padding: 2px 8px; cursor: pointer; font: inherit; font-size: 11px; border-radius: 3px; }
+  h2 button:hover { color: #eee; border-color: #6cf; }
+
+  table { width: 100%; border-collapse: collapse; font-variant-numeric: tabular-nums; }
+  th, td { text-align: left; padding: 4px 10px; border-bottom: 1px solid #1f1f1f; }
+  th { color: #888; font-weight: 500; font-size: 11px; text-transform: uppercase; letter-spacing: 0.5px; }
  td.num { text-align: right; }
-    td.up { color: var(--up); }
-    td.down { color: var(--down); }
-    td.idle.stale { color: var(--warn); }
-    td.idle.dead { color: var(--err); }
-    .empty { color: var(--muted); padding: 20px; text-align: center; }
+  td.up { color: #6f6; }
+  td.down { color: #fc6; }
+  td.idle.stale { color: #fc6; }
+  td.idle.dead { color: #f66; }
+  .empty { color: #888; padding: 16px 0; }

-    pre.logbox {
-      margin: 0; white-space: pre-wrap; word-break: break-word;
-      max-height: 100%;
-    }
-    .log-line { padding: 1px 0; }
-    .log-line .ts { color: var(--muted); margin-right: 8px; }
+  pre.logbox { margin: 0; white-space: pre-wrap; word-break: break-word; }
+  .log-line { padding: 0; }
+  .log-line .ts { color: #888; margin-right: 8px; }
  .log-line .lvl { margin-right: 6px; font-weight: 600; }
-    .log-line.lvl-DEBUG .lvl { color: var(--dbg); }
-    .log-line.lvl-INFO  .lvl { color: var(--info); }
-    .log-line.lvl-WARN  .lvl { color: var(--warn); }
-    .log-line.lvl-ERROR .lvl { color: var(--err); }
-    .log-line .attrs { color: var(--muted); margin-left: 8px; }
+  .log-line.lvl-DEBUG .lvl { color: #888; }
+  .log-line.lvl-INFO  .lvl { color: #6cf; }
+  .log-line.lvl-WARN  .lvl { color: #fc6; }
+  .log-line.lvl-ERROR .lvl { color: #f66; }
+  .log-line .attrs { color: #888; margin-left: 8px; }
 </style>
 </head>
 <body>
 <header>
  <h1>svc-proxy <span class="meta" id="meta">— connecting…</span></h1>
-    <span class="status" id="status">log stream: connecting</span>
+  <span id="status" class="connecting">log stream: connecting…</span>
 </header>
-
-  <section class="conns">
-    <h2>Active connections <span id="conn-count" style="color:var(--muted);"></span></h2>
+<main>
+  <section>
+    <h2><span>Active connections <span class="count" id="conn-count"></span></span></h2>
    <table>
      <thead>
        <tr>
-          <th>Server</th>
-          <th>Port</th>
-          <th>Client</th>
-          <th>Backend</th>
-          <th class="num">Up</th>
-          <th class="num">Down</th>
-          <th class="num">Idle</th>
-          <th class="num">Age</th>
+          <th>Server</th><th>Port</th><th>Client</th><th>Backend</th>
+          <th class="num">Up</th><th class="num">Down</th>
+          <th class="num">Idle</th><th class="num">Age</th>
        </tr>
      </thead>
      <tbody id="conn-rows"></tbody>
    </table>
-    <div id="conn-empty" class="empty">no active bridges</div>
+    <div class="empty" id="conn-empty">no active bridges</div>
  </section>
-
-  <section class="logs">
-    <h2>
-      <span>Logs</span>
-      <button class="clear" onclick="document.getElementById('logbox').innerHTML=''">clear</button>
-    </h2>
+  <section>
+    <h2><span>Logs</span><button onclick="document.getElementById('logbox').innerHTML=''">clear</button></h2>
    <pre class="logbox" id="logbox"></pre>
  </section>
+</main>

 <script>
 const fmtBytes = n => {
@@ -124,11 +84,8 @@ const fmtBytes = n => {
 const fmtAgo = secs => {
  if (secs < 60) return secs.toFixed(0) + 's';
  if (secs < 3600) return Math.floor(secs/60) + 'm' + Math.floor(secs%60) + 's';
-  const h = Math.floor(secs/3600);
-  const m = Math.floor((secs % 3600) / 60);
-  return h + 'h' + m + 'm';
+  return Math.floor(secs/3600) + 'h' + Math.floor((secs % 3600) / 60) + 'm';
 };
-
 async function refreshConnections() {
  try {
    const r = await fetch('./api/connections');
@@ -173,8 +130,8 @@ function startLogStream() {
  const status = document.getElementById('status');
  const box = document.getElementById('logbox');
  const es = new EventSource('./api/logs');
-  es.onopen = () => { status.textContent = 'log stream: live'; status.className = 'status ok'; };
-  es.onerror = () => { status.textContent = 'log stream: reconnecting'; status.className = 'status err'; };
+  es.onopen = () => { status.textContent = 'log stream: live'; status.className = ''; };
+  es.onerror = () => { status.textContent = 'log stream: reconnecting…'; status.className = 'disconnected'; };
  es.onmessage = ev => {
    let e;
    try { e = JSON.parse(ev.data); } catch { return; }
@@ -187,7 +144,6 @@ function startLogStream() {
      (e.msg || '') +
      (e.attrs ? '<span class="attrs">' + e.attrs + '</span>' : '');
    box.appendChild(div);
-    // Auto-scroll if near the bottom
    const parent = box.parentElement;
    if (parent.scrollHeight - parent.scrollTop - parent.clientHeight < 60) {
      parent.scrollTop = parent.scrollHeight;