dashboard: open long content in a slide-in side panel

file previews, approval diffs, journald logs and applied config no
longer expand inline — they open in a drawer that swipes in from the
right, with a title naming what's open and a close button (esc /
backdrop also close). path references in messages become plain inline
links that open the file in the panel; the sibling-<details> dance in
appendLinkified is gone.

also: the question-answer free-text field is now a textarea — enter
submits, shift+enter inserts a newline.

hive-c0re/assets/dashboard.css

@@ -129,24 +129,9 @@ a:hover {
   opacity: 0.85;
 }
 .container-row.tombstone .name { color: var(--muted); }
-/* Per-container journald viewer: collapsed by default, fetches
-   lazily on expand. The output is in monospace inside a bordered
-   <pre>; controls (unit select + refresh) sit above. */
-.journal {
-  margin-top: 0.5em;
-  font-size: 0.85em;
-}
-.journal > summary {
-  cursor: pointer;
-  color: var(--muted);
-  letter-spacing: 0.05em;
-}
-.journal > summary:hover { color: var(--cyan); }
-.journal .journal-body {
-  margin-top: 0.4em;
-  padding-top: 0.4em;
-  border-top: 1px dashed var(--border);
-}
+/* Per-container journald viewer + applied-config viewer. Both open
+   in the side panel and lazy-fetch on open; output is monospace
+   inside a bordered <pre>, controls (unit select + refresh) above. */
 .journal-controls {
   display: flex;
   gap: 0.5em;
@@ -168,8 +153,7 @@ a:hover {
   color: var(--fg);
   border: 1px solid var(--purple-dim);
   padding: 0.5em 0.7em;
-  max-height: 24em;
-  overflow: auto;
+  overflow-x: auto;
   font-size: 0.85em;
   line-height: 1.4;
   white-space: pre;
@@ -495,34 +479,20 @@ summary:hover { color: var(--purple); }
 }
 
 /* Path linkification — agents drop pointer strings into messages
-   constantly; clicking the anchor expands a sibling <details> that
-   lazy-loads from /api/state-file. */
+   constantly; clicking the anchor opens the file in the side panel,
+   lazy-loaded from /api/state-file. */
 .path-link {
   color: var(--blue, #89b4fa);
   text-decoration: underline dotted;
   cursor: pointer;
 }
 .path-link:hover { color: var(--amber); }
-.path-preview {
-  margin: 0.2em 0 0.4em 1.5em;
-  border-left: 2px solid var(--border);
-  padding-left: 0.6em;
-}
-.path-preview > summary {
-  cursor: pointer;
-  color: var(--muted);
-  font-size: 0.85em;
-  list-style: none;
-  user-select: none;
-}
-.path-preview > summary::marker { content: ''; }
+/* File-preview body — rendered inside the side panel. */
 .path-preview-body {
   background: var(--bg);
   border: 1px solid var(--border);
   padding: 0.5em 0.7em;
-  margin: 0.3em 0 0;
-  max-height: 30em;
-  overflow: auto;
+  margin: 0;
   white-space: pre-wrap;
   word-break: break-word;
   font-size: 0.85em;
@@ -599,7 +569,7 @@ summary:hover { color: var(--purple); }
 .qform .q-option label { cursor: pointer; user-select: none; }
 .qform .q-option input { margin-right: 0.4em; accent-color: var(--amber); }
 .qform .q-free { display: flex; }
-.qform .q-free input {
+.qform .q-free textarea {
   flex: 1;
   font-family: inherit;
   font-size: 1em;
@@ -607,9 +577,11 @@ summary:hover { color: var(--purple); }
   color: var(--fg);
   border: 1px solid var(--border);
   padding: 0.4em 0.6em;
+  resize: vertical;
+  line-height: 1.4;
 }
-.qform .q-free input::placeholder { color: var(--muted); }
-.qform .q-free input:focus { outline: 1px solid var(--amber); }
+.qform .q-free textarea::placeholder { color: var(--muted); }
+.qform .q-free textarea:focus { outline: 1px solid var(--amber); }
 .qform button { align-self: flex-start; }
 .qform-cancel { margin-top: 0.3em; }
 .q-history {
@@ -655,13 +627,10 @@ summary:hover { color: var(--purple); }
    dashboard-specific: each broker event becomes a grid of timestamp +
    arrow + from/sep/to + body inside the `.row` shell. */
 /* Flex (not grid): the row carries the header chips (ts / arrow /
-   from / → / to / body) inline, and may also carry one or more
-   `<details>` path-preview siblings appended by appendLinkified.
-   Grid would treat each preview as an extra grid item in a fixed
-   column template, distorting the header column widths. Flex
-   collapses whitespace-only text nodes between items, gives `body`
-   the remaining width via `flex: 1`, and lets each preview claim a
-   full-width row of its own via `flex-basis: 100%`. */
+   from / → / to / body) inline. Flex collapses whitespace-only text
+   nodes between items and gives `body` the remaining width via
+   `flex: 1`. Path references inside `body` are inline anchors that
+   open the side panel — no full-width sibling rows. */
 .live .msgrow {
   display: flex;
   flex-wrap: wrap;
@@ -680,12 +649,6 @@ summary:hover { color: var(--purple); }
      the whole flex line wider than the container. */
   min-width: 0;
 }
-.live .msgrow > .path-preview {
-  flex: 1 0 100%;
-  /* line up with the message body — no left chrome inherited from
-     the global .path-preview indent. */
-  margin-left: 0;
-}
 .live .msgrow.sent .msg-arrow { color: var(--cyan); }
 .live .msgrow.delivered .msg-arrow { color: var(--green); }
 .msg-ts { color: var(--muted); font-size: 0.85em; }
@@ -757,3 +720,88 @@ footer {
   font-size: 0.9em;
 }
 footer a { color: var(--purple); }
+
+/* ─── side panel ─────────────────────────────────────────────────
+   Long content (file previews, diffs, journald, applied config)
+   opens in a drawer that swipes in from the right instead of
+   expanding inline. `.panel-trigger` is the inline affordance that
+   opens it. */
+.panel-trigger {
+  background: none;
+  border: none;
+  color: var(--muted);
+  font-family: inherit;
+  font-size: 0.85em;
+  letter-spacing: 0.05em;
+  cursor: pointer;
+  padding: 0;
+  margin-top: 0.5em;
+  display: inline-block;
+  text-align: left;
+}
+.panel-trigger:hover { color: var(--cyan); }
+
+.side-panel {
+  position: fixed;
+  inset: 0;
+  z-index: 50;
+  /* Closed: the wrapper ignores pointer events so the dashboard
+     underneath stays interactive; `.open` flips it back on. */
+  pointer-events: none;
+}
+.side-panel-backdrop {
+  position: absolute;
+  inset: 0;
+  background: rgba(0, 0, 0, 0.55);
+  opacity: 0;
+  transition: opacity 0.2s ease;
+}
+.side-panel-drawer {
+  position: absolute;
+  top: 0;
+  right: 0;
+  bottom: 0;
+  width: min(760px, 94vw);
+  display: flex;
+  flex-direction: column;
+  background: var(--bg-elev);
+  border-left: 2px solid var(--purple);
+  box-shadow: -10px 0 30px rgba(0, 0, 0, 0.45);
+  transform: translateX(100%);
+  transition: transform 0.25s ease;
+}
+.side-panel.open { pointer-events: auto; }
+.side-panel.open .side-panel-backdrop { opacity: 1; }
+.side-panel.open .side-panel-drawer { transform: translateX(0); }
+.side-panel-head {
+  flex: 0 0 auto;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 1em;
+  padding: 0.7em 1em;
+  border-bottom: 1px solid var(--border);
+}
+.side-panel-title {
+  color: var(--purple);
+  font-weight: bold;
+  letter-spacing: 0.05em;
+  word-break: break-all;
+}
+.side-panel-close {
+  flex: 0 0 auto;
+  background: var(--bg);
+  color: var(--fg);
+  border: 1px solid var(--border);
+  font-family: inherit;
+  font-size: 1em;
+  line-height: 1;
+  padding: 0.25em 0.55em;
+  cursor: pointer;
+}
+.side-panel-close:hover { border-color: var(--red); color: var(--red); }
+.side-panel-body {
+  flex: 1 1 auto;
+  overflow: auto;
+  padding: 1em;
+}