feat(debug): implement compact event log and debug layout

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
    =========================================== */

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,11 +50,14 @@ export function renderDebug(props: DebugProps) {
         </div>
       </div>
 
+      <!-- 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="form-grid" style="margin-top: 16px;">
+          <div class="rpc-form">
-          <label class="field">
+            <div class="rpc-input-row">
+              <label class="field" style="flex: 1;">
                 <span>Method</span>
                 <input
                   .value=${props.callMethod}
@@ -62,38 +66,36 @@ export function renderDebug(props: DebugProps) {
                   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="6"
+                rows="3"
+                placeholder="{}"
               ></textarea>
             </label>
           </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;">
+            ? html`<div class="callout danger" style="margin-top: 8px;">
                 ${props.callError}
               </div>`
             : nothing}
           ${props.callResult
-          ? html`<pre class="code-block" style="margin-top: 12px;">${props.callResult}</pre>`
+            ? html`<pre class="code-block" style="margin-top: 8px; max-height: 120px;">${props.callResult}</pre>`
             : nothing}
         </div>
-    </section>
 
-    <section class="card" style="margin-top: 18px;">
+        <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" style="margin-top: 12px;">${JSON.stringify(
+          <pre class="code-block">${JSON.stringify(props.models ?? [], null, 2)}</pre>
-        props.models ?? [],
+        </div>
-        null,
+      </div>
-        2,
-      )}</pre>
     </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="event-log-item">
-                    <div class="list-main">
+                    <div class="event-log-header">
-                      <div class="list-title">${evt.event}</div>
+                      <span class="event-log-name">${evt.event}</span>
-                      <div class="list-sub">${new Date(evt.ts).toLocaleTimeString()}</div>
+                      <span class="event-log-time">${new Date(evt.ts).toLocaleTimeString()}</span>
-                    </div>
-                    <div class="list-meta">
-                      <pre class="code-block">${formatEventPayload(evt.payload)}</pre>
                     </div>
+                    <pre class="code-block event-log-payload">${formatEventPayload(evt.payload)}</pre>
                   </div>
                 `,
               )}