Compact PWA diagnostic control rows

Author: code4bones

pwa/package-lock.json

@@ -1,6 +1,6 @@
 {
   "name": "@code4bones/branch-pwa",
-  "version": "0.1.0-beta.145",
+  "version": "0.1.0-beta.146",
   "private": true,
   "type": "module",
   "scripts": {

pwa/package.json

@@ -1176,8 +1176,8 @@ button.pwa-chat-reply-preview { cursor: pointer; }
 
 .pwa-poc-debug-status div {
   display: grid;
-  grid-template-columns: minmax(0, 1fr);
-  gap: 1px;
+  grid-template-columns: 48px minmax(0, 1fr);
+  gap: 5px;
 }
 
 .pwa-poc-debug-status dt,
@@ -1187,20 +1187,20 @@ button.pwa-chat-reply-preview { cursor: pointer; }
 
 .pwa-poc-debug-actions {
   display: flex;
-  flex-direction: column;
-  align-items: stretch;
+  align-items: center;
   gap: 5px;
   margin-top: 6px;
 }
 
-.pwa-poc-debug-actions .ant-select,
-.pwa-poc-debug-actions .ant-btn { width: 100%; }
-.pwa-poc-debug-progress { color: var(--pwa-muted); text-align: center; }
+.pwa-poc-debug-actions .ant-select { flex: 0 1 100px; min-width: 0; }
+.pwa-poc-debug-actions .ant-btn { flex: 1 1 0; min-width: 0; }
+.pwa-poc-debug-actions [aria-label="Stop PoC burst"] { flex: 0 0 32px; }
+.pwa-poc-debug-progress { flex: 1 1 0; min-width: 0; color: var(--pwa-muted); text-align: center; }
 .pwa-poc-debug-note { margin: 9px 0; color: var(--pwa-muted); font-size: 0.7rem; line-height: 1.35; }
 
 .pwa-poc-debug .ant-checkbox-group {
-  display: grid;
-  grid-template-columns: minmax(0, 1fr);
+  display: flex;
+  flex-wrap: wrap;
   gap: 4px;
 }
 

pwa/public/pwa.css

@@ -86,7 +86,7 @@ export function PocDebugPanel({ contactId, contactName, enabled, attachedRelayEn
         <div><dt>Chat</dt><dd>{contactName}</dd></div>
         <div><dt>Relay</dt><dd><Tag color={attachStatus === "attached" ? "cyan" : "default"}>{attachStatus}</Tag></dd></div>
         <div><dt>Attached</dt><dd title={attachedRelayEndpoint ?? undefined}>{attachedRelayEndpoint ?? "none"}</dd></div>
-        <div><dt>Outbox</dt><dd>{String(queuedCount)} total · {String(awaitingDeliveryCount)} await delivery · {String(deliveredAwaitingReadCount)} await read</dd></div>
+        <div><dt>Outbox</dt><dd>{String(queuedCount)} total · {String(awaitingDeliveryCount)} deliv · {String(deliveredAwaitingReadCount)} read</dd></div>
       </dl>
       <div className="pwa-poc-debug-actions">
         <Select

pwa/src/app/PocDebugPanel.tsx

@@ -874,13 +874,17 @@ void test("desktop PoC diagnostics extend their scrollable trace to the composer
   assert.match(styles, /@media \(max-width: 767px\) \{\s*\.pwa-poc-debug \{ display: none; \}/);
 });
 
-void test("desktop PoC controls stack without constraining the flexible trace", async () => {
+void test("desktop PoC controls keep compact rows without constraining the flexible trace", async () => {
   const styles = await readFile(resolve(process.cwd(), "public/pwa.css"), "utf8");
+  const panel = await readFile(resolve(process.cwd(), "src/app/PocDebugPanel.tsx"), "utf8");
 
-  assert.match(styles, /\.pwa-poc-debug-status div\s*\{[\s\S]*grid-template-columns: minmax\(0, 1fr\);/);
-  assert.match(styles, /\.pwa-poc-debug-actions\s*\{[\s\S]*flex-direction: column;[\s\S]*align-items: stretch;/);
-  assert.match(styles, /\.pwa-poc-debug-actions \.ant-select,[\s\S]*\.pwa-poc-debug-actions \.ant-btn \{ width: 100%; \}/);
-  assert.match(styles, /\.pwa-poc-debug \.ant-checkbox-group\s*\{[\s\S]*grid-template-columns: minmax\(0, 1fr\);/);
+  assert.match(panel, /Outbox<\/dt><dd>\{String\(queuedCount\)\} total · \{String\(awaitingDeliveryCount\)\} deliv · \{String\(deliveredAwaitingReadCount\)\} read/);
+  assert.doesNotMatch(panel, /await delivery|await read/);
+  assert.match(styles, /\.pwa-poc-debug-status div\s*\{[\s\S]*grid-template-columns: 48px minmax\(0, 1fr\);/);
+  assert.match(styles, /\.pwa-poc-debug-actions\s*\{[\s\S]*align-items: center;/);
+  assert.match(styles, /\.pwa-poc-debug-actions \.ant-select \{ flex: 0 1 100px; min-width: 0; \}/);
+  assert.match(styles, /\[aria-label="Stop PoC burst"\] \{ flex: 0 0 32px; \}/);
+  assert.match(styles, /\.pwa-poc-debug \.ant-checkbox-group\s*\{[\s\S]*display: flex;[\s\S]*flex-wrap: wrap;/);
   assert.match(styles, /\.pwa-poc-debug-trace\s*\{[\s\S]*flex: 1 1 auto;[\s\S]*overflow-y: auto;/);
 });