fix: json tree toggle, timeline detail cleanup, and lab stop status

JsonTree: clicking any key in an expanded object now collapses it back.
Collapsed summaries use correct singular/plural ("1 item" vs "3 items").

Timeline detail panel: remove the raw JSON dump below the KvPairs
fields. KvPairs gains a `vertical` prop for multi-line rendering in the
detail pane while staying inline elsewhere.

Core: emit LabStopping in LabInner::drop so state.json ends with
status "stopped" instead of staying stuck on "running". Add assertion
in the devtools e2e Rust test and playwright test.

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>

Author: Frando

patchbay/src/core.rs

@@ -567,6 +567,7 @@ pub(crate) struct LabInner {
 
 impl Drop for LabInner {
     fn drop(&mut self) {
+        self.emit(crate::event::LabEventKind::LabStopping);
         self.cancel.cancel();
     }
 }

patchbay/src/event.rs

@@ -300,7 +300,7 @@ pub struct LabState {
     pub lab_prefix: String,
     /// Human-readable label.
     pub label: Option<String>,
-    /// Lab status (`"running"`, `"stopping"`).
+    /// Lab status (`"running"` or `"stopped"`).
     pub status: String,
     /// Lab creation timestamp.
     pub created_at: Option<DateTime<Utc>>,
@@ -497,7 +497,7 @@ impl LabState {
                 }
             }
             LabEventKind::LabStopping => {
-                self.status = "stopping".into();
+                self.status = "stopped".into();
             }
             LabEventKind::IxCreated {
                 bridge,

patchbay/src/tests/devtools.rs

@@ -115,6 +115,10 @@ async fn simple_lab_for_e2e() -> Result<()> {
             state_content.contains("\"client\""),
             "state.json missing client device"
         );
+        assert!(
+            state_content.contains("\"stopped\""),
+            "state.json status should be 'stopped' after lab drop"
+        );
 
         // Verify per-namespace tracing files (flat: {kind}.{name}.{ext}).
         // Files are created lazily on first write — only namespaces that actually log

ui/e2e/devtools.spec.ts

@@ -44,6 +44,9 @@ test('devtools ui shows all views', async ({ page }) => {
     await expect(selector).toBeVisible()
     await expect(selector.locator('option', { hasText: 'e2e-test' })).toBeAttached()
 
+    // Verify the run status shows "stopped" (not stuck on "running").
+    await expect(page.getByText('stopped')).toBeVisible({ timeout: 5_000 })
+
     // Step 4: Verify topology tab shows router and device nodes (default tab).
     await expect(page.getByText('dc')).toBeVisible({ timeout: 10_000 })
     await expect(page.getByText('home')).toBeVisible()

ui/src/components/JsonTree.tsx

@@ -22,18 +22,19 @@ function JsonValue({ value, depth, defaultDepth }: { value: unknown; depth: numb
 function JsonArray({ items, depth, defaultDepth }: { items: unknown[]; depth: number; defaultDepth: number }) {
   const [open, setOpen] = useState(depth < defaultDepth)
   if (items.length === 0) return <span className="jt-brace">[]</span>
+  const toggle = () => setOpen((v) => !v)
   if (!open) {
     return (
-      <span className="jt-toggle" onClick={() => setOpen(true)}>
+      <span className="jt-toggle" onClick={toggle}>
         <span className="jt-brace">[</span>
-        <span className="jt-ellipsis">{items.length} items</span>
+        <span className="jt-ellipsis">{items.length} {items.length === 1 ? 'item' : 'items'}</span>
         <span className="jt-brace">]</span>
       </span>
     )
   }
   return (
     <span>
-      <span className="jt-toggle jt-brace" onClick={() => setOpen(false)}>[</span>
+      <span className="jt-toggle jt-brace" onClick={toggle}>[</span>
       <div className="jt-indent">
         {items.map((item, i) => (
           <div key={i} className="jt-row">
@@ -51,22 +52,23 @@ function JsonObject({ obj, depth, defaultDepth }: { obj: Record<string, unknown>
   const [open, setOpen] = useState(depth < defaultDepth)
   const entries = Object.entries(obj)
   if (entries.length === 0) return <span className="jt-brace">{'{}'}</span>
+  const toggle = () => setOpen((v) => !v)
   if (!open) {
     return (
-      <span className="jt-toggle" onClick={() => setOpen(true)}>
+      <span className="jt-toggle" onClick={toggle}>
         <span className="jt-brace">{'{'}</span>
-        <span className="jt-ellipsis">{entries.length} fields</span>
+        <span className="jt-ellipsis">{entries.length} {entries.length === 1 ? 'field' : 'fields'}</span>
         <span className="jt-brace">{'}'}</span>
       </span>
     )
   }
   return (
     <span>
-      <span className="jt-toggle jt-brace" onClick={() => setOpen(false)}>{'{'}</span>
+      <span className="jt-toggle jt-brace" onClick={toggle}>{'{'}</span>
       <div className="jt-indent">
         {entries.map(([key, val], i) => (
           <div key={key} className="jt-row">
-            <span className="jt-key">"{key}"</span>
+            <span className="jt-key jt-toggle" onClick={toggle}>"{key}"</span>
             <span className="jt-colon">: </span>
             <JsonValue value={val} depth={depth + 1} defaultDepth={defaultDepth} />
             {i < entries.length - 1 && <span className="jt-comma">,</span>}

ui/src/components/KvPairs.tsx

@@ -1,6 +1,19 @@
 /** Renders key=value pairs with colored keys for easy scanning. */
-export default function KvPairs({ pairs }: { pairs: Array<{ key: string; value: string }> }) {
+export default function KvPairs({ pairs, vertical }: { pairs: Array<{ key: string; value: string }>; vertical?: boolean }) {
   if (pairs.length === 0) return <span className="kv-empty">(no fields)</span>
+  if (vertical) {
+    return (
+      <div className="kv-pairs-vertical">
+        {pairs.map((p, i) => (
+          <div key={i} className="kv-pair">
+            <span className="kv-key">{p.key}</span>
+            <span className="kv-eq">=</span>
+            <span className="kv-value">{p.value}</span>
+          </div>
+        ))}
+      </div>
+    )
+  }
   return (
     <span className="kv-pairs">
       {pairs.map((p, i) => (

ui/src/components/TimelineTab.tsx

@@ -258,8 +258,7 @@ export default function TimelineTab({ base, logs, labEvents, onJumpToLog }: Prop
               )}
             </div>
             <div className="timeline-detail-body">
-              <div className="timeline-detail-fields"><KvPairs pairs={selected.fieldPairs} /></div>
-              <div className="timeline-detail-raw">{selected.details}</div>
+              <div className="timeline-detail-fields"><KvPairs pairs={selected.fieldPairs} vertical /></div>
             </div>
           </>
         ) : (

ui/src/index.css

@@ -518,14 +518,8 @@ tbody td {
 .timeline-detail-fields {
     color: #e6edf3;
     font-size: 13px;
-    margin-bottom: 8px;
     line-height: 1.5;
 }
-.timeline-detail-raw {
-    color: var(--text-muted);
-    font-size: 11px;
-    line-height: 1.4;
-}
 
 /* ── Qlog tab ── */
 .qlog-layout {
@@ -640,6 +634,10 @@ tbody td {
     color: var(--text-muted);
     font-style: italic;
 }
+.kv-pairs-vertical .kv-pair {
+    display: block;
+    line-height: 1.6;
+}
 
 /* ── Events / JSONL table ── */
 .events-time-cell {