From 4140a347be475e4c2f791eb0611d3f6b092d4105 Mon Sep 17 00:00:00 2001
From: realZachi <109552121+realZachi@users.noreply.github.com>
Date: Sun, 25 Jan 2026 13:45:21 +0100
Subject: [PATCH] feat(debug): implement compact event log and debug layout

---
 ui/src/styles/components.css | 100 +++++++++++++++++++++++++++++++++
 ui/src/ui/views/debug.ts     | 104 +++++++++++++++++------------------
 2 files changed, 152 insertions(+), 52 deletions(-)

diff --git a/ui/src/styles/components.css b/ui/src/styles/components.css
index 870698d8d..8df714331 100644
--- a/ui/src/styles/components.css
+++ b/ui/src/styles/components.css
@@ -687,6 +687,106 @@
   }
 }
 
+/* ===========================================
+   Event Log - Compact debug view
+   =========================================== */
+
+.event-log {
+  display: grid;
+  gap: 6px;
+}
+
+.event-log-item {
+  border: 1px solid var(--border);
+  border-radius: var(--radius-md);
+  background: var(--card);
+  overflow: hidden;
+}
+
+.event-log-header {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+  padding: 8px 12px;
+  background: var(--secondary);
+  border-bottom: 1px solid var(--border);
+}
+
+.event-log-name {
+  font-family: var(--mono);
+  font-size: 12px;
+  font-weight: 600;
+  color: var(--text-strong);
+}
+
+.event-log-time {
+  font-family: var(--mono);
+  font-size: 11px;
+  color: var(--muted);
+  margin-left: auto;
+}
+
+.event-log-payload {
+  margin: 0;
+  border: none;
+  border-radius: 0;
+  background: transparent;
+  font-size: 11px;
+  line-height: 1.4;
+  padding: 8px 12px;
+  max-height: 200px;
+}
+
+/* ===========================================
+   Debug View Layout
+   =========================================== */
+
+.debug-grid {
+  display: grid;
+  grid-template-columns: 1fr 1fr;
+  grid-template-rows: auto;
+  gap: 14px;
+}
+
+.debug-right-stack {
+  display: flex;
+  flex-direction: column;
+  gap: 14px;
+  height: fit-content;
+  max-height: 100%;
+}
+
+.debug-models-card > .code-block {
+  margin-top: 8px;
+  max-height: 280px;
+}
+
+.rpc-form {
+  display: flex;
+  flex-direction: column;
+  gap: 10px;
+  margin-top: 12px;
+}
+
+.rpc-input-row {
+  display: flex;
+  gap: 10px;
+  align-items: flex-end;
+}
+
+.rpc-params {
+  font-family: var(--mono);
+  font-size: 12px;
+  resize: vertical;
+  min-height: 60px;
+}
+
+@media (max-width: 768px) {
+  .debug-grid {
+    grid-template-columns: 1fr;
+  }
+}
+
 /* ===========================================
    Chips - Compact and punchy
    =========================================== */
diff --git a/ui/src/ui/views/debug.ts b/ui/src/ui/views/debug.ts
index 35e2e1af2..171ab2917 100644
--- a/ui/src/ui/views/debug.ts
+++ b/ui/src/ui/views/debug.ts
@@ -22,7 +22,8 @@ export type DebugProps = {
 
 export function renderDebug(props: DebugProps) {
   return html`
-    <section class="grid grid-cols-2">
+    <section class="debug-grid">
+      <!-- Left: Snapshots -->
       <div class="card">
         <div class="row" style="justify-content: space-between;">
           <div>
@@ -49,51 +50,52 @@ export function renderDebug(props: DebugProps) {
         </div>
       </div>
 
-      <div class="card">
-        <div class="card-title">Manual RPC</div>
-        <div class="card-sub">Send a raw gateway method with JSON params.</div>
-        <div class="form-grid" style="margin-top: 16px;">
-          <label class="field">
-            <span>Method</span>
-            <input
-              .value=${props.callMethod}
-              @input=${(e: Event) =>
-                props.onCallMethodChange((e.target as HTMLInputElement).value)}
-              placeholder="system-presence"
-            />
-          </label>
-          <label class="field">
-            <span>Params (JSON)</span>
-            <textarea
-              .value=${props.callParams}
-              @input=${(e: Event) =>
-                props.onCallParamsChange((e.target as HTMLTextAreaElement).value)}
-              rows="6"
-            ></textarea>
-          </label>
+      <!-- Right: RPC + Models stacked -->
+      <div class="debug-right-stack">
+        <div class="card">
+          <div class="card-title">Manual RPC</div>
+          <div class="card-sub">Send a raw gateway method with JSON params.</div>
+          <div class="rpc-form">
+            <div class="rpc-input-row">
+              <label class="field" style="flex: 1;">
+                <span>Method</span>
+                <input
+                  .value=${props.callMethod}
+                  @input=${(e: Event) =>
+                    props.onCallMethodChange((e.target as HTMLInputElement).value)}
+                  placeholder="system-presence"
+                />
+              </label>
+              <button class="btn primary" @click=${props.onCall}>Call</button>
+            </div>
+            <label class="field">
+              <span>Params (JSON)</span>
+              <textarea
+                class="rpc-params"
+                .value=${props.callParams}
+                @input=${(e: Event) =>
+                  props.onCallParamsChange((e.target as HTMLTextAreaElement).value)}
+                rows="3"
+                placeholder="{}"
+              ></textarea>
+            </label>
+          </div>
+          ${props.callError
+            ? html`<div class="callout danger" style="margin-top: 8px;">
+                ${props.callError}
+              </div>`
+            : nothing}
+          ${props.callResult
+            ? html`<pre class="code-block" style="margin-top: 8px; max-height: 120px;">${props.callResult}</pre>`
+            : nothing}
         </div>
-        <div class="row" style="margin-top: 12px;">
-          <button class="btn primary" @click=${props.onCall}>Call</button>
-        </div>
-        ${props.callError
-          ? html`<div class="callout danger" style="margin-top: 12px;">
-              ${props.callError}
-            </div>`
-          : nothing}
-        ${props.callResult
-          ? html`<pre class="code-block" style="margin-top: 12px;">${props.callResult}</pre>`
-          : nothing}
-      </div>
-    </section>
 
-    <section class="card" style="margin-top: 18px;">
-      <div class="card-title">Models</div>
-      <div class="card-sub">Catalog from models.list.</div>
-      <pre class="code-block" style="margin-top: 12px;">${JSON.stringify(
-        props.models ?? [],
-        null,
-        2,
-      )}</pre>
+        <div class="card debug-models-card">
+          <div class="card-title">Models</div>
+          <div class="card-sub">Catalog from models.list.</div>
+          <pre class="code-block">${JSON.stringify(props.models ?? [], null, 2)}</pre>
+        </div>
+      </div>
     </section>
 
     <section class="card" style="margin-top: 18px;">
@@ -102,17 +104,15 @@ export function renderDebug(props: DebugProps) {
       ${props.eventLog.length === 0
         ? html`<div class="muted" style="margin-top: 12px;">No events yet.</div>`
         : html`
-            <div class="list" style="margin-top: 12px;">
+            <div class="event-log" style="margin-top: 12px;">
               ${props.eventLog.map(
                 (evt) => html`
-                  <div class="list-item">
-                    <div class="list-main">
-                      <div class="list-title">${evt.event}</div>
-                      <div class="list-sub">${new Date(evt.ts).toLocaleTimeString()}</div>
-                    </div>
-                    <div class="list-meta">
-                      <pre class="code-block">${formatEventPayload(evt.payload)}</pre>
+                  <div class="event-log-item">
+                    <div class="event-log-header">
+                      <span class="event-log-name">${evt.event}</span>
+                      <span class="event-log-time">${new Date(evt.ts).toLocaleTimeString()}</span>
                     </div>
+                    <pre class="code-block event-log-payload">${formatEventPayload(evt.payload)}</pre>
                   </div>
                 `,
               )}