From ffa0a431b7696bb80d38501de92ad19bb985ebf4 Mon Sep 17 00:00:00 2001 From: Rin Date: Thu, 15 Jan 2026 20:49:35 +0800 Subject: [PATCH] fix(minecraft): debug dashboard layout problem --- services/minecraft/src/debug/web/app.js | 37 +- services/minecraft/src/debug/web/index.html | 375 ++++++++++---------- services/minecraft/src/debug/web/styles.css | 112 +++++- 3 files changed, 325 insertions(+), 199 deletions(-) diff --git a/services/minecraft/src/debug/web/app.js b/services/minecraft/src/debug/web/app.js index 4cfb9b42..33303ee1 100644 --- a/services/minecraft/src/debug/web/app.js +++ b/services/minecraft/src/debug/web/app.js @@ -1176,7 +1176,22 @@ class LayoutManager { this.startPos = config.type === 'v' ? e.clientX : e.clientY const style = getComputedStyle(this.root) - this.startSize = Number.parseInt(style.getPropertyValue(config.var), 10) + const raw = style.getPropertyValue(config.var) + const parsed = Number.parseFloat(raw) + + const fallbackSize = () => { + if (config.var === '--col-left') + return document.getElementById('left-column')?.getBoundingClientRect().width + if (config.var === '--row-1') + return document.getElementById('logs-section')?.getBoundingClientRect().height + if (config.var === '--row-2') + return document.getElementById('timeline-section')?.getBoundingClientRect().height + if (config.var === '--row-3') + return document.getElementById('llm-section')?.getBoundingClientRect().height + return undefined + } + + this.startSize = Number.isFinite(parsed) ? parsed : (fallbackSize() || 200) el.classList.add('dragging') document.body.style.cursor = config.type === 'v' ? 'col-resize' : 'row-resize' @@ -1256,6 +1271,9 @@ class DebugApp { // Initialize layout this.layoutManager.init() + // Tabs + this.setupTabs() + // Initialize all panels Object.values(this.panels).forEach(panel => panel.init()) @@ -1277,6 +1295,23 @@ class DebugApp { // Connect this.client.connect() } + + setupTabs() { + const tabs = Array.from(document.querySelectorAll('.tab-button')) + const views = Array.from(document.querySelectorAll('.view')) + + const activate = (target) => { + tabs.forEach(btn => btn.classList.toggle('active', btn.dataset.target === target)) + views.forEach(view => view.classList.toggle('active', view.id === target)) + } + + tabs.forEach((btn) => { + btn.addEventListener('click', () => activate(btn.dataset.target)) + }) + + // Default + activate('main-view') + } } // ============================================================================= diff --git a/services/minecraft/src/debug/web/index.html b/services/minecraft/src/debug/web/index.html index 60ca7c2d..b7529059 100644 --- a/services/minecraft/src/debug/web/index.html +++ b/services/minecraft/src/debug/web/index.html @@ -2,155 +2,148 @@ - - - Debug Dashboard - - + + + Debug Dashboard + + - - +
+
Social
+
+ Last Speaker: + None +
+ + - -
- -
- -
-
-

Queue & Processing

-
- 0 - -
-
-
-
-
-
-
Processing:
-
Idle
-
-
-
+ +
+
+

Blackboard

+
+ + +
+
+
+ 
{}
+
+
+
- -
-
-

Reflex State

-
- idle - -
-
-
-
- Active Behavior: - None -
-
-
Attention
-
- Last Signal: - None -
-
- Source: - None -
-
-
Social
-
- Last Speaker: - None -
-
-
- - -
-
-

Blackboard

-
- - -
-
-
- 
{}
-
-
- - -
-
-

Tools

-
- - -
-
-
-
-
-
- - - -
+ +
+ +
-
-

Logs

-
- - - - -
-
-
-
+
+

Logs

+
+ + + +
+
+
+
+
@@ -158,31 +151,31 @@
-
-

Event Timeline

-
- - - - -
+
+

Event Timeline

+
+ + + +
-
-
-
-
- +
+
+
+
+ +
@@ -190,16 +183,16 @@
-
-

LLM Traces

-
- 0 - -
-
-
-
+
+

LLM Traces

+
+ 0 +
+
+
+
+
@@ -207,23 +200,43 @@
-
-

Saliency Heatmap

-
- Slot: 0 - -
+
+

Saliency Heatmap

+
+ Slot: 0 +
-
-
- -
-
+
+
+
+ +
+
-
+ + + - + +
+
+
+
+

Tools

+
+ + +
+
+
+
+
+
+
+
+ + \ No newline at end of file diff --git a/services/minecraft/src/debug/web/styles.css b/services/minecraft/src/debug/web/styles.css index 705d7ecc..1afaa9ab 100644 --- a/services/minecraft/src/debug/web/styles.css +++ b/services/minecraft/src/debug/web/styles.css @@ -19,10 +19,10 @@ --font-sans: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; /* Resizable Grid Defaults */ - --col-left: 350px; - --row-1: 300px; - --row-2: 200px; - --row-3: 200px; + --col-left: clamp(260px, 24vw, 420px); + --row-1: clamp(220px, 35vh, 1fr); + --row-2: clamp(180px, 28vh, 1fr); + --row-3: clamp(180px, 26vh, 1fr); } /* Base Styles */ @@ -58,6 +58,42 @@ body { flex-shrink: 0; } +/* Tabs */ +.tab-bar { + display: flex; + gap: 8px; + padding: 8px 8px 0 8px; + background-color: var(--bg-primary); + border-bottom: 1px solid var(--border-color); + height: 40px; + box-sizing: border-box; +} + +.tab-button { + padding: 6px 12px; + font-size: 12px; + background: var(--bg-secondary); + color: var(--text-primary); + border: 1px solid var(--border-color); + border-radius: 4px 4px 0 0; + cursor: pointer; +} + +.tab-button.active { + background: var(--bg-tertiary); + border-bottom-color: var(--bg-tertiary); + font-weight: 600; +} + +.view { + display: none; + height: calc(100vh - 48px - 40px); +} + +.view.active { + display: block; +} + .header-left { display: flex; align-items: center; @@ -145,36 +181,77 @@ button:hover, #main-grid { display: grid; /* Columns: Left Panel | Splitter | Right Content */ - grid-template-columns: var(--col-left) 8px 1fr; + grid-template-columns: 1fr; /* Rows: Logs | Splitter | Timeline | Splitter | LLM | Splitter | Saliency */ - grid-template-rows: var(--row-1) 8px var(--row-2) 8px var(--row-3) 8px 1fr; + grid-template-rows: + minmax(var(--row-1), 1fr) 8px minmax(var(--row-2), 1fr) 8px minmax(var(--row-3), 1fr) 8px 1fr; gap: 0; - padding: 8px; - height: calc(100vh - 48px); + padding: 0; + height: 100%; overflow: hidden; + align-items: stretch; + align-content: stretch; } #left-column { display: flex; flex-direction: column; gap: 8px; - grid-column: 1 / 2; - grid-row: 1 / -1; - /* Span full height */ - overflow: hidden; + overflow: auto; padding-right: 4px; - /* Padding for visual separation */ + min-height: 0; + width: var(--col-left); + flex-shrink: 0; + height: 100%; +} + +/* Keep left-column panels visible; let tools consume remaining space */ +#left-column>.panel { + flex: 0 0 auto; +} + +#tools-section { + flex: 1 1 auto; + min-height: 240px; +} + +/* Tools standalone view */ +#tools-view { + padding: 8px; + box-sizing: border-box; +} + +.tools-view-shell { + height: 100%; +} + +.panel.full-height { + height: 100%; +} + +/* Main layout wrapper: left column + splitter + right grid */ +.main-layout { + display: flex; + height: calc(100vh - 48px - 40px); + padding: 8px; + gap: 8px; + box-sizing: border-box; +} + +#main-grid { + flex: 1 1 auto; + min-height: 0; + padding: 8px; } /* Splitters */ .splitter-v { - grid-row: 1 / -1; - grid-column: 2 / 3; cursor: col-resize; background-color: transparent; width: 8px; z-index: 10; position: relative; + flex: 0 0 8px; } .splitter-v::after { @@ -271,6 +348,7 @@ button:hover, border: 1px solid var(--border-color); border-radius: 4px; overflow: hidden; + min-height: 0; } .panel-header { @@ -664,8 +742,8 @@ button:hover, .timeline-container { flex: 1; - overflow-y: auto; - max-height: 300px; + overflow: auto; + min-height: 0; } .timeline-list {