refactor(ui): redesign web interface with flat modern style

Made-with: Cursor

web/app.js

@@ -1,4 +1,4 @@
-const state = {
+const state = {
   sources: [],
   selectedSourceId: null,
   tree: [],
@@ -155,6 +155,7 @@ async function selectSource(sourceId) {
   state.selectedSourceId = sourceId;
   state.selectedNodeIds.clear();
   state.pointsPage = 1;
+  renderSources();
   renderSelectedNodes();
   await loadPoints();
   await loadTree();
@@ -266,8 +267,8 @@ async function loadPoints() {
   state.pointEls.clear();
   pointList.innerHTML = '';
   if (!items.length) {
-    pointList.textContent = '暂无 Points';
+    pointList.innerHTML = '<tr><td colspan="5" class="empty-state">暂无 Points</td></tr>';
-    pointsPageInfo.textContent = `第 ${state.pointsPage} 页 / 共 1 页`;
+    pointsPageInfo.textContent = `${state.pointsPage} / 1`;
     prevPointsBtn.disabled = true;
     nextPointsBtn.disabled = true;
     setStatus('Ready');
@@ -278,49 +279,46 @@ async function loadPoints() {
     const monitor = item.point_monitor || null;
     state.points.set(point.id, { point, monitor });
 
-    const box = document.createElement('div');
+    const tr = document.createElement('tr');
-    box.className = 'list-item';
 
-    const row = document.createElement('div');
+    const tdName = document.createElement('td');
-    row.className = 'row';
+    tdName.innerHTML = `<div class="point-name">${point.name}</div><div class="point-id">${point.node_id}</div>`;
-    row.innerHTML = `<strong>${point.name}</strong>`;
+
+    const tdValue = document.createElement('td');
+    const value = document.createElement('span');
+    value.className = 'point-value';
+    value.textContent = formatValue(monitor);
+    tdValue.appendChild(value);
 
     const quality = monitor ? (monitor.quality || 'unknown').toLowerCase() : 'unknown';
+    const tdQuality = document.createElement('td');
     const qualityBadge = document.createElement('span');
     qualityBadge.className = `badge quality-${quality}`;
     qualityBadge.textContent = quality.toUpperCase();
-    row.appendChild(qualityBadge);
+    tdQuality.appendChild(qualityBadge);
 
+    const tdTime = document.createElement('td');
+    const ts = document.createElement('span');
+    ts.className = 'muted';
+    ts.textContent = monitor && monitor.timestamp ? monitor.timestamp : '--';
+    tdTime.appendChild(ts);
+
+    const tdAction = document.createElement('td');
     const deleteBtn = document.createElement('button');
     deleteBtn.className = 'danger';
-    deleteBtn.textContent = '删除';
+    deleteBtn.textContent = '×';
-    deleteBtn.onclick = () => deletePoint(point.id);
+    deleteBtn.title = '删除';
-    row.appendChild(deleteBtn);
+    deleteBtn.style.cssText = 'width:22px;height:22px;padding:0;font-size:14px;';
+    deleteBtn.onclick = (e) => { e.stopPropagation(); deletePoint(point.id); };
+    tdAction.appendChild(deleteBtn);
 
-    const valueRow = document.createElement('div');
+    tr.append(tdName, tdValue, tdQuality, tdTime, tdAction);
-    valueRow.className = 'row';
+    pointList.appendChild(tr);
-    const value = document.createElement('div');
-    value.className = 'value';
-    value.textContent = formatValue(monitor);
-    const ts = document.createElement('div');
-    ts.className = 'muted';
-    ts.textContent = monitor && monitor.timestamp ? monitor.timestamp : '';
-    valueRow.appendChild(value);
-    valueRow.appendChild(ts);
 
-    const meta = document.createElement('div');
+    state.pointEls.set(point.id, { box: tr, value, qualityBadge, ts });
-    meta.className = 'muted';
-    meta.textContent = `${point.id} / node: ${point.node_id}`;
-
-    box.appendChild(row);
-    box.appendChild(valueRow);
-    box.appendChild(meta);
-    pointList.appendChild(box);
-
-    state.pointEls.set(point.id, { box, value, qualityBadge, ts });
   });
   const totalPages = Math.max(1, Math.ceil(state.pointsTotal / state.pointsPageSize));
-  pointsPageInfo.textContent = `第 ${state.pointsPage} 页 / 共 ${totalPages} 页`;
+  pointsPageInfo.textContent = `${state.pointsPage} / ${totalPages}`;
   prevPointsBtn.disabled = state.pointsPage <= 1;
   nextPointsBtn.disabled = state.pointsPage >= totalPages;
   setStatus('Ready');

web/index.html

@@ -1,9 +1,9 @@
-<!doctype html>
+<!doctype html>
 <html lang="zh-CN">
 <head>
   <meta charset="utf-8" />
   <meta name="viewport" content="width=device-width, initial-scale=1" />
-  <title>PLC Control UI</title>
+  <title>PLC Control</title>
   <link rel="stylesheet" href="/ui/styles.css" />
 </head>
 <body>
@@ -14,41 +14,58 @@
 
   <main class="grid">
     <section class="panel top-left">
-      <div class="row">
+      <div class="panel-head">
         <h2>Sources</h2>
-        <button id="openSourceForm">新增 Source</button>
+        <button id="openSourceForm">+ 新增</button>
       </div>
       <div class="list" id="sourceList"></div>
     </section>
 
     <section class="panel top-right">
+      <div class="panel-head">
         <h2>Points</h2>
-      <div class="list" id="pointList"></div>
         <div class="pager">
-        <button class="secondary" id="prevPoints">上一页</button>
+          <button class="secondary" id="prevPoints" title="上一页">&lsaquo;</button>
-        <div class="muted" id="pointsPageInfo">第 1 页</div>
+          <span id="pointsPageInfo">1 / 1</span>
-        <button class="secondary" id="nextPoints">下一页</button>
+          <button class="secondary" id="nextPoints" title="下一页">&rsaquo;</button>
+        </div>
+      </div>
+      <div class="table-wrap">
+        <table class="data-table">
+          <thead>
+            <tr>
+              <th style="width:30%">名称</th>
+              <th style="width:25%">值</th>
+              <th style="width:10%">质量</th>
+              <th style="width:30%">更新时间</th>
+              <th style="width:5%"></th>
+            </tr>
+          </thead>
+          <tbody id="pointList"></tbody>
+        </table>
       </div>
     </section>
 
     <section class="panel bottom">
+      <div class="panel-head">
         <h2>实时日志</h2>
+      </div>
       <div class="log" id="logView"></div>
     </section>
   </main>
 
   <div class="modal hidden" id="pointModal">
     <div class="modal-content">
-      <div class="row">
+      <div class="modal-head">
         <h3>选择节点创建 Points</h3>
-        <button class="secondary" id="closeModal">关闭</button>
+        <button class="secondary" id="closeModal">✕</button>
       </div>
       <div class="toolbar">
         <button id="browseNodes">浏览并同步节点</button>
-        <button id="refreshTree">刷新树</button>
+        <button class="secondary" id="refreshTree">刷新树</button>
       </div>
       <div class="tree" id="nodeTree"></div>
-      <div class="actions">
+      <div class="modal-foot">
         <div class="muted" id="selectedCount">已选 0 个节点</div>
         <button id="createPoints">创建 Points</button>
       </div>
@@ -56,10 +73,10 @@
   </div>
 
   <div class="modal hidden" id="sourceModal">
-    <div class="modal-content">
+    <div class="modal-content modal-sm">
-      <div class="row">
+      <div class="modal-head">
         <h3>Source 配置</h3>
-        <button class="secondary" id="closeSourceModal">关闭</button>
+        <button class="secondary" id="closeSourceModal">✕</button>
       </div>
       <form id="sourceForm" class="form">
         <input type="hidden" id="sourceId" />
@@ -71,13 +88,13 @@
           Endpoint
           <input id="sourceEndpoint" placeholder="opc.tcp://host:port" required />
         </label>
-        <label class="row">
+        <label class="check-row">
           <input type="checkbox" id="sourceEnabled" checked />
           <span>启用</span>
         </label>
-        <div class="actions">
+        <div class="form-actions">
+          <button type="button" class="secondary" id="sourceReset">清空</button>
           <button type="submit" id="sourceSubmit">保存</button>
-          <button type="button" id="sourceReset">清空</button>
         </div>
       </form>
     </div>

web/styles.css

@@ -1,99 +1,338 @@
-:root {
+:root {
-  --bg: #f5f7fb;
+  --bg: #f1f5f9;
-  --panel: #ffffff;
+  --surface: #ffffff;
-  --panel-2: #f0f3f8;
+  --surface-2: #f8fafc;
-  --text: #1f2a37;
+  --text: #0f172a;
-  --muted: #6b7a90;
+  --text-2: #475569;
-  --accent: #1f6feb;
+  --text-3: #94a3b8;
-  --accent-2: #22c55e;
+  --accent: #2563eb;
+  --accent-hover: #1d4ed8;
+  --accent-bg: rgba(37, 99, 235, 0.06);
+  --success: #059669;
   --danger: #ef4444;
-  --border: #d5dbe6;
+  --danger-hover: #dc2626;
-  --shadow: rgba(12, 22, 34, 0.08);
+  --warning: #d97706;
+  --border: #e2e8f0;
+  --border-light: #f1f5f9;
+  --radius: 6px;
+  --topbar-h: 42px;
 }
 
-* {
+* { box-sizing: border-box; margin: 0; }
-  box-sizing: border-box;
-}
 
 body {
-  margin: 0;
+  font-family: -apple-system, "Segoe UI", "Microsoft YaHei", sans-serif;
-  font-family: "Segoe UI", "Microsoft YaHei", sans-serif;
   color: var(--text);
-  background: radial-gradient(circle at top, #ffffff 0%, #eef2f8 55%);
+  background: var(--border);
-  font-size: 12px;
+  font-size: 14px;
-  min-height: 100vh;
+  line-height: 1.5;
+  height: 100vh;
+  overflow: hidden;
 }
 
+/* ── Topbar ─────────────────────────────────────── */
+
 .topbar {
   display: flex;
   justify-content: space-between;
   align-items: center;
-  padding: 16px 24px;
+  height: var(--topbar-h);
+  padding: 0 16px;
+  background: var(--surface);
   border-bottom: 1px solid var(--border);
-  background: linear-gradient(90deg, #ffffff, #f2f5fa);
-  position: sticky;
-  top: 0;
-  z-index: 10;
 }
 
 .title {
-  font-size: 16px;
+  font-size: 15px;
-  font-weight: 600;
+  font-weight: 700;
-  letter-spacing: 0.5px;
+  color: var(--accent);
 }
 
 .status {
-  font-size: 11px;
+  font-size: 12px;
-  color: var(--muted);
+  color: var(--text-3);
 }
 
+/* ── Grid Layout ────────────────────────────────── */
+
 .grid {
   display: grid;
-  grid-template-columns: 2fr 3fr;
+  grid-template-columns: 340px 1fr;
-  grid-template-rows: auto auto;
+  grid-template-rows: 1fr 1fr;
-  gap: 16px;
+  gap: 1px;
-  padding: 16px;
+  height: calc(100vh - var(--topbar-h));
 }
 
-.panel.top-left {
+.panel.top-left  { grid-column: 1; grid-row: 1; }
-  grid-column: 1 / 2;
+.panel.top-right { grid-column: 2; grid-row: 1; }
-  grid-row: 1 / 2;
-}
-
-.panel.top-right {
-  grid-column: 2 / 3;
-  grid-row: 1 / 2;
-}
 
 .panel.bottom {
   grid-column: 1 / -1;
-  grid-row: 2 / 3;
+  grid-row: 2;
+  min-height: 0;
 }
 
 .panel {
-  background: var(--panel);
+  background: var(--surface);
-  border: 1px solid var(--border);
-  border-radius: 12px;
-  padding: 16px;
-  box-shadow: 0 10px 30px var(--shadow);
   display: flex;
   flex-direction: column;
-  gap: 12px;
+  min-height: 0;
-  height: 40vh;
   overflow: hidden;
 }
 
+/* ── Panel Header ───────────────────────────────── */
+
+.panel-head {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding: 7px 12px;
+  border-bottom: 1px solid var(--border-light);
+  flex-shrink: 0;
+}
+
 h2, h3 {
-  margin: 0;
+  font-size: 12px;
   font-weight: 600;
+  color: var(--text-2);
+  text-transform: uppercase;
+  letter-spacing: 0.5px;
+}
+
+/* ── Buttons ────────────────────────────────────── */
+
+button {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  gap: 4px;
+  padding: 4px 10px;
+  border: none;
+  border-radius: var(--radius);
+  font-size: 12px;
+  font-weight: 500;
+  cursor: pointer;
+  transition: all 0.15s;
+  background: var(--accent);
+  color: #fff;
+  white-space: nowrap;
+}
+
+button:hover { background: var(--accent-hover); }
+
+button:disabled {
+  opacity: 0.4;
+  cursor: not-allowed;
+}
+
+button.secondary {
+  background: transparent;
+  color: var(--text-2);
+  border: 1px solid var(--border);
+}
+
+button.secondary:hover {
+  background: var(--bg);
+  border-color: var(--text-3);
+}
+
+button.danger {
+  background: var(--danger);
+  color: #fff;
+}
+
+button.danger:hover { background: var(--danger-hover); }
+
+/* ── Source List ─────────────────────────────────── */
+
+.list {
+  display: flex;
+  flex-direction: column;
+  overflow-y: auto;
+  flex: 1 1 auto;
+  min-height: 0;
+  padding: 6px;
+  gap: 4px;
+}
+
+.list-item {
+  padding: 7px 10px;
+  border: 1px solid var(--border);
+  border-radius: var(--radius);
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
+  cursor: pointer;
+  transition: all 0.15s;
+}
+
+.list-item:hover {
+  background: var(--accent-bg);
+  border-color: rgba(37, 99, 235, 0.2);
+}
+
+.list-item.selected {
+  background: var(--accent-bg);
+  border-color: var(--accent);
+}
+
+.list-item .row {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  gap: 6px;
+}
+
+.list-item button {
+  padding: 2px 8px;
+  font-size: 11px;
+}
+
+.muted {
+  color: var(--text-3);
+  font-size: 12px;
+}
+
+/* ── Badges ──────────────────────────────────────── */
+
+.badge {
+  display: inline-block;
+  font-size: 10px;
+  font-weight: 600;
+  padding: 1px 6px;
+  border-radius: 3px;
+  text-transform: uppercase;
+  letter-spacing: 0.3px;
+  background: rgba(37, 99, 235, 0.1);
+  color: var(--accent);
+}
+
+.badge.offline { background: rgba(239, 68, 68, 0.1); color: var(--danger); }
+
+.badge.quality-good      { background: rgba(5, 150, 105, 0.1);  color: var(--success); }
+.badge.quality-bad       { background: rgba(239, 68, 68, 0.1);  color: #dc2626; }
+.badge.quality-uncertain { background: rgba(217, 119, 6, 0.1);  color: var(--warning); }
+.badge.quality-unknown   { background: rgba(148, 163, 184, 0.12); color: #64748b; }
+
+/* ── Data Table (Points) ─────────────────────────── */
+
+.table-wrap {
+  flex: 1 1 auto;
+  overflow: auto;
+  min-height: 0;
+}
+
+.data-table {
+  width: 100%;
+  border-collapse: collapse;
+  font-size: 13px;
+  table-layout: fixed;
+}
+
+.data-table thead {
+  position: sticky;
+  top: 0;
+  z-index: 1;
+}
+
+.data-table th {
+  background: var(--surface-2);
+  text-align: left;
+  padding: 5px 12px;
+  font-size: 11px;
+  font-weight: 600;
+  color: var(--text-3);
+  text-transform: uppercase;
+  letter-spacing: 0.3px;
+  border-bottom: 1px solid var(--border);
+  white-space: nowrap;
+}
+
+.data-table td {
+  padding: 4px 12px;
+  border-bottom: 1px solid var(--border-light);
+  vertical-align: middle;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.data-table tbody tr {
+  transition: background 0.1s;
+}
+
+.data-table tbody tr:hover {
+  background: var(--accent-bg);
+}
+
+.point-name {
+  font-weight: 500;
+  color: var(--text);
+  font-size: 13px;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+.point-id {
+  font-size: 11px;
+  color: var(--text-3);
+  font-family: "JetBrains Mono", "Consolas", monospace;
+}
+
+.point-value {
+  font-family: "JetBrains Mono", "Consolas", monospace;
+  font-weight: 600;
+  font-size: 13px;
+  color: var(--text);
+}
+
+.empty-state {
+  text-align: center;
+  color: var(--text-3);
+  padding: 32px 12px !important;
+  font-size: 13px;
+}
+
+/* ── Pager ────────────────────────────────────────── */
+
+.pager {
+  display: flex;
+  align-items: center;
+  gap: 2px;
+  font-size: 12px;
+  color: var(--text-3);
+}
+
+.pager button {
+  width: 22px;
+  height: 22px;
+  padding: 0;
+  font-size: 16px;
+  line-height: 1;
+}
+
+/* ── Toolbar ──────────────────────────────────────── */
+
+.toolbar {
+  display: flex;
+  gap: 6px;
+  flex-shrink: 0;
+}
+
+/* ── Form ─────────────────────────────────────────── */
+
+.form {
+  display: flex;
+  flex-direction: column;
+  gap: 12px;
 }
 
 .form label {
   display: flex;
   flex-direction: column;
-  gap: 6px;
+  gap: 4px;
-  font-size: 11px;
+  font-size: 12px;
-  color: var(--muted);
+  color: var(--text-2);
 }
 
 .form input[type="text"],
@@ -101,254 +340,188 @@ h2, h3 {
 .form input[type="password"],
 .form input[type="number"],
 .form input:not([type]) {
-  padding: 8px 10px;
+  padding: 7px 10px;
-  border-radius: 8px;
+  border-radius: var(--radius);
   border: 1px solid var(--border);
-  background: var(--panel-2);
+  background: var(--surface);
   color: var(--text);
+  font-size: 14px;
+  transition: border-color 0.15s;
 }
 
-.form .row {
+.form input:focus {
-  flex-direction: row;
+  outline: none;
-  align-items: center;
-  gap: 8px;
-}
-
-.actions {
-  display: flex;
-  gap: 8px;
-  align-items: center;
-  justify-content: space-between;
-}
-
-button {
-  background: var(--accent);
-  border: none;
-  color: #ffffff;
-  padding: 6px 10px;
-  border-radius: 8px;
-  cursor: pointer;
-  font-weight: 600;
-}
-
-button.secondary {
-  background: transparent;
-  color: var(--muted);
-  border: 1px solid var(--border);
-}
-
-button.danger {
-  background: var(--danger);
-  color: #ffffff;
-}
-
-.list {
-  display: flex;
-  flex-direction: column;
-  gap: 8px;
-  overflow-y: auto;
-  max-height: none;
-  flex: 1 1 auto;
-}
-
-.list-item {
-  padding: 8px;
-  border: 1px solid var(--border);
-  border-radius: 10px;
-  background: var(--panel-2);
-  display: flex;
-  flex-direction: column;
-  gap: 6px;
-  cursor: pointer;
-}
-
-.list-item.selected {
   border-color: var(--accent);
-  box-shadow: 0 0 0 1px rgba(31, 111, 235, 0.2);
+  box-shadow: 0 0 0 2px rgba(37, 99, 235, 0.12);
 }
 
-.list-item .row {
+.check-row {
-  display: flex;
+  flex-direction: row !important;
-  justify-content: space-between;
   align-items: center;
-  gap: 8px;
+  gap: 6px;
 }
 
-.muted {
+.form-actions {
-  color: var(--muted);
-  font-size: 11px;
-}
-
-.badge {
-  font-size: 11px;
-  padding: 2px 8px;
-  border-radius: 999px;
-  background: rgba(31, 111, 235, 0.14);
-  color: var(--accent);
-}
-
-.badge.offline {
-  background: rgba(239, 68, 68, 0.14);
-  color: var(--danger);
-}
-
-.badge.quality-good { background: rgba(34, 197, 94, 0.16); color: #16a34a; }
-.badge.quality-bad { background: rgba(239, 68, 68, 0.16); color: #dc2626; }
-.badge.quality-uncertain { background: rgba(245, 158, 11, 0.16); color: #d97706; }
-.badge.quality-unknown { background: rgba(148, 163, 184, 0.2); color: #64748b; }
-
-.value {
-  font-weight: 600;
-  font-size: 11px;
-}
-
-.toolbar {
   display: flex;
   gap: 8px;
+  justify-content: flex-end;
+  padding-top: 4px;
 }
 
-.pager {
+/* ── Tree ─────────────────────────────────────────── */
-  display: flex;
-  align-items: center;
-  gap: 8px;
-  justify-content: center;
-  font-size: 11px;
-}
 
 .tree {
   overflow-y: auto;
-  padding-right: 8px;
+  padding: 4px 8px;
+  flex: 1 1 auto;
+  min-height: 0;
 }
 
-.tree details {
+.tree details { margin-left: 12px; }
-  margin-left: 10px;
-}
 
 .tree summary {
   list-style: none;
   cursor: pointer;
   display: flex;
   align-items: center;
-  gap: 6px;
+  gap: 4px;
+  padding: 2px 0;
+  font-size: 13px;
 }
 
 .tree summary.has-children::before {
   content: "▸";
-  color: var(--muted);
+  color: var(--text-3);
-  margin-right: 4px;
+  font-size: 10px;
 }
 
 .tree details[open] > summary.has-children::before {
   content: "▾";
 }
 
-.tree summary::-webkit-details-marker {
+.tree summary::-webkit-details-marker { display: none; }
-  display: none;
-}
 
-.tree .node-label {
+.tree .node-label { color: var(--text); }
-  color: var(--text);
-}
 
-.subpanel {
+/* ── Log ──────────────────────────────────────────── */
-  background: var(--panel-2);
-  border: 1px solid var(--border);
-  border-radius: 10px;
-  padding: 12px;
-  display: flex;
-  flex-direction: column;
-  gap: 8px;
-}
 
 .log {
-  background: #0b1117;
+  background: #0f172a;
-  border-radius: 8px;
+  padding: 6px 10px;
-  border: 1px solid var(--border);
-  padding: 8px;
   font-family: "JetBrains Mono", "Consolas", monospace;
-  font-size: 11px;
+  font-size: 12px;
-  color: #c9d7e8;
+  line-height: 1.55;
-  max-height: none;
+  color: #cbd5e1;
   overflow-y: auto;
   flex: 1 1 auto;
   display: flex;
   flex-direction: column;
-  gap: 4px;
+  gap: 0;
+  min-height: 0;
 }
 
 .log-line {
   white-space: pre-wrap;
   word-break: break-word;
+  padding: 0 4px;
+  border-radius: 2px;
 }
 
+.log-line:hover { background: rgba(255, 255, 255, 0.04); }
+
 .log-line .level {
   font-weight: 700;
   margin-right: 6px;
+  font-size: 11px;
 }
 
-.log-line .message {
+.log-line .message { margin-left: 6px; }
-  margin-left: 8px;
+.log-line .muted   { margin-left: 4px; color: #64748b; }
-}
 
-.log-line .muted {
+.log-line.level-trace .level { color: #64748b; }
-  margin-left: 6px;
-}
-
-.log-line.level-trace .level { color: #94a3b8; }
 .log-line.level-debug .level { color: #38bdf8; }
-.log-line.level-info  .level { color: #22c55e; }
+.log-line.level-info  .level { color: #34d399; }
-.log-line.level-warn  .level { color: #f59e0b; }
+.log-line.level-warn  .level { color: #fbbf24; }
-.log-line.level-error .level { color: #ef4444; }
+.log-line.level-error .level { color: #f87171; }
+
+/* ── Modal ────────────────────────────────────────── */
 
 .modal {
   position: fixed;
   inset: 0;
-  background: rgba(5, 11, 20, 0.4);
+  background: rgba(15, 23, 42, 0.45);
   display: flex;
   align-items: center;
   justify-content: center;
-  padding: 16px;
   z-index: 50;
+  backdrop-filter: blur(2px);
 }
 
-.modal.hidden {
+.modal.hidden { display: none; }
-  display: none;
-}
 
 .modal-content {
-  width: min(920px, 96vw);
+  width: min(860px, 94vw);
-  max-height: 90vh;
+  max-height: 85vh;
   overflow: hidden;
-  background: var(--panel);
+  background: var(--surface);
-  border-radius: 16px;
+  border-radius: 10px;
   border: 1px solid var(--border);
-  padding: 16px;
+  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.15);
-  box-shadow: 0 20px 60px var(--shadow);
   display: flex;
   flex-direction: column;
   gap: 12px;
+  padding: 16px;
+}
+
+.modal-content.modal-sm {
+  width: min(420px, 94vw);
+}
+
+.modal-head {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+}
+
+.modal-head h3 {
+  font-size: 15px;
+  text-transform: none;
+  letter-spacing: 0;
+  color: var(--text);
+}
+
+.modal-foot {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
 }
 
 .modal-content .tree {
   flex: 1;
   border: 1px solid var(--border);
-  border-radius: 10px;
+  border-radius: var(--radius);
   padding: 8px;
-  background: var(--panel-2);
+  background: var(--surface-2);
-  max-height: 55vh;
+  max-height: 50vh;
 }
 
-@media (max-width: 1200px) {
+/* ── Scrollbar ────────────────────────────────────── */
+
+::-webkit-scrollbar { width: 5px; height: 5px; }
+::-webkit-scrollbar-track { background: transparent; }
+::-webkit-scrollbar-thumb { background: var(--border); border-radius: 3px; }
+::-webkit-scrollbar-thumb:hover { background: var(--text-3); }
+
+/* ── Responsive ───────────────────────────────────── */
+
+@media (max-width: 900px) {
   .grid {
     grid-template-columns: 1fr;
-  }
+    grid-template-rows: auto 1fr auto;
-  .panel {
     height: auto;
   }
-  .list {
+  body { height: auto; overflow: auto; }
-    max-height: none;
+  .panel.top-left  { min-height: 200px; }
-  }
+  .panel.top-right { min-height: 300px; }
-  .log {
+  .panel.bottom    { max-height: none; min-height: 200px; }
-    max-height: none;
-  }
 }