Viewer: detail-pane UX parity with deployed ara-hub (#55-#59)

CHANGELOG.md

@@ -4,6 +4,30 @@ All notable changes to this project are documented here. The format follows
 [Keep a Changelog](https://keepachangelog.com/), and the project adheres to
 [Semantic Versioning](https://semver.org/).
 
+## [Unreleased]
+
+### Added
+- Viewer: exhibit captions (`Exhibit.description`) now render above the
+  rendered exhibit body in the RESULT block — previously parsed but dropped
+  from the detail pane (#55).
+- Viewer: the detail header now shows the mono node id and an `isolated` pill
+  for nodes belonging to an isolated subtree (#56).
+- Viewer: DEPENDS ON block in the detail pane — outgoing and incoming
+  `DependsOn` links render as clickable chips that jump-select the target
+  node; unknown targets render non-clickable (#57).
+- Viewer: the evidence / built-on / depends-on / result / sources detail
+  blocks are now collapsible (`<details open>`) with right-aligned item
+  counts, so table-heavy artifacts stay readable (#58).
+
+### Fixed
+- Viewer: the global ←/→ replay keys are now also ignored while a modal panel
+  is open or focus is in a textarea, so arrows can't step the replay behind a
+  dialog (#59).
+- Viewer: DEPENDS ON / DEPENDED ON BY jump chips (#57) now truncate long
+  labels with a proper ellipsis instead of a hard mid-word cut-off — the
+  `.chip` base class sets `display: inline-flex`, on which `text-overflow:
+  ellipsis` has no effect; `chip-jump` now overrides to `inline-block`.
+
 ## [0.1.11] - 2026-07-20
 
 ### Fixed

Cargo.toml

@@ -3,7 +3,7 @@ resolver = "3"
 members = ["crates/*"]
 
 [workspace.package]
-version = "0.1.11"
+version = "0.1.12"
 edition = "2024"
 license = "MPL-2.0"
 repository = "https://github.com/ARA-Labs/ara-cli"

crates/ara-cli/assets/viewer.source-hash

@@ -1 +1 @@
-71a9204bb75ec9a40329aaa9485dbd1d54ce5129e3ff7e32c736973bdcc33c7e
+154193f53a25f8cabb0fe326e0c14e578be5d3f7190bbd724c8399c6819224f5

crates/ara-cli/assets/viewer/ara-viewer-3b9263f1ff965232.js → crates/ara-cli/assets/viewer/ara-viewer-1213ab1da86ce3ef.js

@@ -518,7 +518,7 @@ function __wbg_get_imports() {
                     const a = state0.a;
                     state0.a = 0;
                     try {
-                        return __wasm_bindgen_func_elem_2201(a, state0.b, arg0, arg1);
+                        return __wasm_bindgen_func_elem_2353(a, state0.b, arg0, arg1);
                     } finally {
                         state0.a = a;
                     }
@@ -585,6 +585,10 @@ function __wbg_get_imports() {
             const ret = getObject(arg0).querySelectorAll(getStringFromWasm0(arg1, arg2));
             return addHeapObject(ret);
         }, arguments); },
+        __wbg_querySelector_fd7d157ebe17cd16: function() { return handleError(function (arg0, arg1, arg2) {
+            const ret = getObject(arg0).querySelector(getStringFromWasm0(arg1, arg2));
+            return isLikeNone(ret) ? 0 : addHeapObject(ret);
+        }, arguments); },
         __wbg_queueMicrotask_0ab5b2d2393e99b9: function(arg0) {
             const ret = getObject(arg0).queueMicrotask;
             return addHeapObject(ret);
@@ -669,6 +673,9 @@ function __wbg_get_imports() {
         __wbg_set_once_51a9fb6b8af8a72b: function(arg0, arg1) {
             getObject(arg0).once = arg1 !== 0;
         },
+        __wbg_set_open_ac65a528ddc36ede: function(arg0, arg1) {
+            getObject(arg0).open = arg1 !== 0;
+        },
         __wbg_set_reason_18dc06ea0d60243b: function(arg0, arg1, arg2) {
             getObject(arg0).reason = getStringFromWasm0(arg1, arg2);
         },
@@ -778,38 +785,38 @@ function __wbg_get_imports() {
             return ret;
         },
         __wbindgen_cast_0000000000000001: function(arg0, arg1) {
-            // Cast intrinsic for `Closure(Closure { owned: true, function: Function { arguments: [Externref], shim_idx: 235, ret: Result(Unit), inner_ret: Some(Result(Unit)) }, mutable: true }) -> Externref`.
-            const ret = makeMutClosure(arg0, arg1, __wasm_bindgen_func_elem_2140);
+            // Cast intrinsic for `Closure(Closure { owned: true, function: Function { arguments: [Externref], shim_idx: 284, ret: Result(Unit), inner_ret: Some(Result(Unit)) }, mutable: true }) -> Externref`.
+            const ret = makeMutClosure(arg0, arg1, __wasm_bindgen_func_elem_2281);
             return addHeapObject(ret);
         },
         __wbindgen_cast_0000000000000002: function(arg0, arg1) {
-            // Cast intrinsic for `Closure(Closure { owned: true, function: Function { arguments: [Externref], shim_idx: 58, ret: Unit, inner_ret: Some(Unit) }, mutable: true }) -> Externref`.
-            const ret = makeMutClosure(arg0, arg1, __wasm_bindgen_func_elem_955);
+            // Cast intrinsic for `Closure(Closure { owned: true, function: Function { arguments: [Externref], shim_idx: 68, ret: Unit, inner_ret: Some(Unit) }, mutable: true }) -> Externref`.
+            const ret = makeMutClosure(arg0, arg1, __wasm_bindgen_func_elem_1011);
             return addHeapObject(ret);
         },
         __wbindgen_cast_0000000000000003: function(arg0, arg1) {
-            // Cast intrinsic for `Closure(Closure { owned: true, function: Function { arguments: [NamedExternref("CloseEvent")], shim_idx: 58, ret: Unit, inner_ret: Some(Unit) }, mutable: true }) -> Externref`.
-            const ret = makeMutClosure(arg0, arg1, __wasm_bindgen_func_elem_955_2);
+            // Cast intrinsic for `Closure(Closure { owned: true, function: Function { arguments: [NamedExternref("CloseEvent")], shim_idx: 68, ret: Unit, inner_ret: Some(Unit) }, mutable: true }) -> Externref`.
+            const ret = makeMutClosure(arg0, arg1, __wasm_bindgen_func_elem_1011_2);
             return addHeapObject(ret);
         },
         __wbindgen_cast_0000000000000004: function(arg0, arg1) {
-            // Cast intrinsic for `Closure(Closure { owned: true, function: Function { arguments: [NamedExternref("Event")], shim_idx: 58, ret: Unit, inner_ret: Some(Unit) }, mutable: true }) -> Externref`.
-            const ret = makeMutClosure(arg0, arg1, __wasm_bindgen_func_elem_955_3);
+            // Cast intrinsic for `Closure(Closure { owned: true, function: Function { arguments: [NamedExternref("Event")], shim_idx: 68, ret: Unit, inner_ret: Some(Unit) }, mutable: true }) -> Externref`.
+            const ret = makeMutClosure(arg0, arg1, __wasm_bindgen_func_elem_1011_3);
             return addHeapObject(ret);
         },
         __wbindgen_cast_0000000000000005: function(arg0, arg1) {
-            // Cast intrinsic for `Closure(Closure { owned: true, function: Function { arguments: [NamedExternref("KeyboardEvent")], shim_idx: 58, ret: Unit, inner_ret: Some(Unit) }, mutable: true }) -> Externref`.
-            const ret = makeMutClosure(arg0, arg1, __wasm_bindgen_func_elem_955_4);
+            // Cast intrinsic for `Closure(Closure { owned: true, function: Function { arguments: [NamedExternref("KeyboardEvent")], shim_idx: 68, ret: Unit, inner_ret: Some(Unit) }, mutable: true }) -> Externref`.
+            const ret = makeMutClosure(arg0, arg1, __wasm_bindgen_func_elem_1011_4);
             return addHeapObject(ret);
         },
         __wbindgen_cast_0000000000000006: function(arg0, arg1) {
-            // Cast intrinsic for `Closure(Closure { owned: true, function: Function { arguments: [NamedExternref("MessageEvent")], shim_idx: 58, ret: Unit, inner_ret: Some(Unit) }, mutable: true }) -> Externref`.
-            const ret = makeMutClosure(arg0, arg1, __wasm_bindgen_func_elem_955_5);
+            // Cast intrinsic for `Closure(Closure { owned: true, function: Function { arguments: [NamedExternref("MessageEvent")], shim_idx: 68, ret: Unit, inner_ret: Some(Unit) }, mutable: true }) -> Externref`.
+            const ret = makeMutClosure(arg0, arg1, __wasm_bindgen_func_elem_1011_5);
             return addHeapObject(ret);
         },
         __wbindgen_cast_0000000000000007: function(arg0, arg1) {
-            // Cast intrinsic for `Closure(Closure { owned: true, function: Function { arguments: [], shim_idx: 56, ret: Unit, inner_ret: Some(Unit) }, mutable: true }) -> Externref`.
-            const ret = makeMutClosure(arg0, arg1, __wasm_bindgen_func_elem_2094);
+            // Cast intrinsic for `Closure(Closure { owned: true, function: Function { arguments: [], shim_idx: 66, ret: Unit, inner_ret: Some(Unit) }, mutable: true }) -> Externref`.
+            const ret = makeMutClosure(arg0, arg1, __wasm_bindgen_func_elem_2241);
             return addHeapObject(ret);
         },
         __wbindgen_cast_0000000000000008: function(arg0, arg1) {
@@ -831,34 +838,34 @@ function __wbg_get_imports() {
     };
 }
 
-function __wasm_bindgen_func_elem_2094(arg0, arg1) {
-    wasm.__wasm_bindgen_func_elem_2094(arg0, arg1);
+function __wasm_bindgen_func_elem_2241(arg0, arg1) {
+    wasm.__wasm_bindgen_func_elem_2241(arg0, arg1);
 }
 
-function __wasm_bindgen_func_elem_955(arg0, arg1, arg2) {
-    wasm.__wasm_bindgen_func_elem_955(arg0, arg1, addHeapObject(arg2));
+function __wasm_bindgen_func_elem_1011(arg0, arg1, arg2) {
+    wasm.__wasm_bindgen_func_elem_1011(arg0, arg1, addHeapObject(arg2));
 }
 
-function __wasm_bindgen_func_elem_955_2(arg0, arg1, arg2) {
-    wasm.__wasm_bindgen_func_elem_955_2(arg0, arg1, addHeapObject(arg2));
+function __wasm_bindgen_func_elem_1011_2(arg0, arg1, arg2) {
+    wasm.__wasm_bindgen_func_elem_1011_2(arg0, arg1, addHeapObject(arg2));
 }
 
-function __wasm_bindgen_func_elem_955_3(arg0, arg1, arg2) {
-    wasm.__wasm_bindgen_func_elem_955_3(arg0, arg1, addHeapObject(arg2));
+function __wasm_bindgen_func_elem_1011_3(arg0, arg1, arg2) {
+    wasm.__wasm_bindgen_func_elem_1011_3(arg0, arg1, addHeapObject(arg2));
 }
 
-function __wasm_bindgen_func_elem_955_4(arg0, arg1, arg2) {
-    wasm.__wasm_bindgen_func_elem_955_4(arg0, arg1, addHeapObject(arg2));
+function __wasm_bindgen_func_elem_1011_4(arg0, arg1, arg2) {
+    wasm.__wasm_bindgen_func_elem_1011_4(arg0, arg1, addHeapObject(arg2));
 }
 
-function __wasm_bindgen_func_elem_955_5(arg0, arg1, arg2) {
-    wasm.__wasm_bindgen_func_elem_955_5(arg0, arg1, addHeapObject(arg2));
+function __wasm_bindgen_func_elem_1011_5(arg0, arg1, arg2) {
+    wasm.__wasm_bindgen_func_elem_1011_5(arg0, arg1, addHeapObject(arg2));
 }
 
-function __wasm_bindgen_func_elem_2140(arg0, arg1, arg2) {
+function __wasm_bindgen_func_elem_2281(arg0, arg1, arg2) {
     try {
         const retptr = wasm.__wbindgen_add_to_stack_pointer(-16);
-        wasm.__wasm_bindgen_func_elem_2140(retptr, arg0, arg1, addHeapObject(arg2));
+        wasm.__wasm_bindgen_func_elem_2281(retptr, arg0, arg1, addHeapObject(arg2));
         var r0 = getDataViewMemory0().getInt32(retptr + 4 * 0, true);
         var r1 = getDataViewMemory0().getInt32(retptr + 4 * 1, true);
         if (r1) {
@@ -869,8 +876,8 @@ function __wasm_bindgen_func_elem_2140(arg0, arg1, arg2) {
     }
 }
 
-function __wasm_bindgen_func_elem_2201(arg0, arg1, arg2, arg3) {
-    wasm.__wasm_bindgen_func_elem_2201(arg0, arg1, addHeapObject(arg2), addHeapObject(arg3));
+function __wasm_bindgen_func_elem_2353(arg0, arg1, arg2, arg3) {
+    wasm.__wasm_bindgen_func_elem_2353(arg0, arg1, addHeapObject(arg2), addHeapObject(arg3));
 }
 
 

crates/ara-cli/assets/viewer/index.html

@@ -4,14 +4,14 @@
     <meta charset="UTF-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <title>ARA Viewer</title>
-    <link rel="stylesheet" href="/styles-e6588b2ec91f581b.css" integrity="sha384-U0U6s8yg+5kfyacbG+krJpJzp9hxzSneIEq4ne+fUDY0pARjsCq2apzypPFLuFUD"/>
+    <link rel="stylesheet" href="/styles-8e96cbefbbb65688.css" integrity="sha384-PLvTi5Lx4ul+vvTOCXuUffVA68PMjVWQHC89Ejz6JUiQI0SyTnywcoGAjEMPamoM"/>
     <!-- Copy manifest.json to dist/ so the runtime fetch URL "manifest.json" resolves. -->
     <!-- Trunk does not auto-copy public/ contents; this directive is required.        -->
 
 
 <script type="module">
-import init, * as bindings from '/ara-viewer-3b9263f1ff965232.js';
-const wasm = await init({ module_or_path: '/ara-viewer-3b9263f1ff965232_bg.wasm' });
+import init, * as bindings from '/ara-viewer-1213ab1da86ce3ef.js';
+const wasm = await init({ module_or_path: '/ara-viewer-1213ab1da86ce3ef_bg.wasm' });
 
 
 window.wasmBindings = bindings;
@@ -20,6 +20,6 @@
 dispatchEvent(new CustomEvent("TrunkApplicationStarted", {detail: {wasm}}));
 
 </script>
-  <link rel="modulepreload" href="/ara-viewer-3b9263f1ff965232.js" crossorigin="anonymous" integrity="sha384-St0x3f/u8R7LMQGfE2JStMGhdMiugq7me3tZ+rWXfOskgw/0LDW80HQVns1eraH0"><link rel="preload" href="/ara-viewer-3b9263f1ff965232_bg.wasm" crossorigin="anonymous" integrity="sha384-nJX2DLp/prWSAlRTVagDrMU89/8cO+XtpgiN7C8SpT34XK9HJnZj72Da3A/+09Vp" as="fetch" type="application/wasm"></head>
+  <link rel="modulepreload" href="/ara-viewer-1213ab1da86ce3ef.js" crossorigin="anonymous" integrity="sha384-2WuofkhQAQ8NmTYBxWI406jmQ5VZKPYELR8SvJlfo2Ptncsj5RG5nzBa+lh7WKH9"><link rel="preload" href="/ara-viewer-1213ab1da86ce3ef_bg.wasm" crossorigin="anonymous" integrity="sha384-sner112zdRC9zqV6mq5+O1snCQUUKTaeqfLhIdZu9QOliF9mu42Nf4oKR8p/jIoK" as="fetch" type="application/wasm"></head>
   <body></body>
 </html>

crates/ara-cli/assets/viewer/styles-e6588b2ec91f581b.css → crates/ara-cli/assets/viewer/styles-8e96cbefbbb65688.css

@@ -967,6 +967,58 @@ body.is-resizing.resizing-row { cursor: row-resize; }
   border: 1px solid var(--line);
 }
 
+/* Node id in the detail meta row (#56). */
+.detail-node-id {
+  font-size: 0.75rem;
+  color: var(--muted);
+}
+
+/* Isolated-subtree pill (#56): reuses the tree-mode isobox tokens. */
+.pill.iso {
+  display: inline-flex;
+  align-items: center;
+  padding: 0.1rem 0.45rem;
+  border-radius: 9999px;
+  font-size: 0.7rem;
+  background-color: var(--iso-bg);
+  color: var(--iso-ink);
+  border: 1px solid var(--iso-line);
+}
+
+/* ── Collapsible content blocks (#58) ────────────────────────────────────────
+   EVIDENCE / BUILT ON / DEPENDS ON / RESULT / SOURCES render as
+   `<details open>`; the summary carries the block label plus a right-aligned
+   muted item count, matching the hub's per-block count tags. */
+
+.block-summary {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 0.5rem;
+  cursor: pointer;
+  list-style: none;
+}
+
+.block-summary::-webkit-details-marker {
+  display: none;
+}
+
+.block-summary:hover .block-label {
+  color: var(--accent-text);
+}
+
+.block-count {
+  font-size: 0.7rem;
+  color: var(--muted);
+}
+
+/* A closed block shows only its summary row — no residual flex gap. */
+details.block:not([open]) {
+  gap: 0;
+  padding-top: 0.45rem;
+  padding-bottom: 0.45rem;
+}
+
 /* ── Content blocks ──────────────────────────────────────────────────────────── */
 
 .block {
@@ -1114,6 +1166,34 @@ body.is-resizing.resizing-row { cursor: row-resize; }
   border: 1px solid var(--line);
 }
 
+/* Clickable chip button (DEPENDS ON jump chips, #57). Truncates long labels
+   with an ellipsis; the full text stays available via the hover tooltip.
+   `display: inline-block` overrides the inherited `.chip` `inline-flex` —
+   `text-overflow: ellipsis` has no effect on a flex container. */
+button.chip-jump {
+  display: inline-block;
+  cursor: pointer;
+  max-width: 36ch;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  transition: border-color 0.12s, color 0.12s;
+}
+
+button.chip-jump:hover {
+  border-color: var(--accent);
+  color: var(--accent-text);
+}
+
+/* Exhibit caption (#55): `Exhibit.description` above the rendered body,
+   figcaption-style. */
+.exhibit-caption {
+  font-family: var(--font-mono);
+  font-size: 0.75rem;
+  color: var(--muted);
+  margin: 0.5rem 0 0.2rem;
+}
+
 /* ── Empty-node note ─────────────────────────────────────────────────────────── */
 
 .empty-note {