An admin inspector on the right of the chat

A third child of .shell, opening and closing like the sidebar opposite it,
showing the system message that would go out, the tools offered, what the
last reply cost, and the whole request body as JSON.

Rebuilt, not recorded. Recording every request would store a copy of the
growing conversation against every message -- quadratic in chat length -- and
the thing an administrator debugging a bad answer actually wants is what the
current configuration produces. The panel says exactly that at the top, so
nobody mistakes it for forensics.

Owner-checked and admin-checked, not admin alone. permissions.resolve giving
an admin everything is about configuration, which they can grant themselves
anyway; reading someone's conversation is a different act, and it is why
sharing.visible_to has no admin branch. An inspector that could dump any
user's transcript would be that branch under another name.

No new JavaScript. app.js already delegates [data-toggle], and
hx-trigger="intersect once" makes the load lazy for free: a hidden element
never intersects, so the request fires the first time it is opened and never
on a page load nobody looked at.

Image data URIs are replaced before dumping -- fidelity is the point, but not
several megabytes of base64 in the DOM. Everything renders through normal
escaping and never |safe: this JSON is full of model output, search results
and uploaded documents.

Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>

src/lembas/web/static/css/app.css

@@ -420,6 +420,96 @@ button, input, textarea, select {
   background: var(--bg);
 }
 
+/* The inspector, mirroring the sidebar on the other side of .shell. Hidden by
+   the `hidden` attribute, which the rule at the top of this file forces to win. */
+.inspector {
+  width: var(--inspector-width);
+  flex: none;
+  display: flex;
+  flex-direction: column;
+  min-height: 0;
+  background: var(--bg-sunken);
+  border-left: 1px solid var(--border);
+}
+
+.inspector__header {
+  display: flex;
+  align-items: center;
+  gap: var(--sp-2);
+  height: var(--header-height);
+  flex: none;
+  padding: 0 var(--sp-3);
+  border-bottom: 1px solid var(--border);
+}
+.inspector__title {
+  display: flex;
+  align-items: center;
+  gap: var(--sp-2);
+  flex: 1;
+  font-size: var(--text-sm);
+  font-weight: 600;
+  color: var(--ink-muted);
+}
+
+.inspector__body {
+  flex: 1;
+  min-height: 0;
+  overflow-y: auto;
+  padding: var(--sp-4);
+  scrollbar-width: thin;
+  scrollbar-color: var(--border-strong) transparent;
+}
+
+.inspector__heading {
+  display: flex;
+  align-items: center;
+  gap: var(--sp-2);
+  font-size: var(--text-sm);
+  margin: var(--sp-5) 0 var(--sp-2);
+}
+.inspector__note {
+  font-size: var(--text-xs);
+  color: var(--ink-muted);
+  line-height: var(--leading-normal);
+  margin: 0 0 var(--sp-3);
+  overflow-wrap: anywhere;
+}
+
+.inspector__facts {
+  display: grid;
+  grid-template-columns: auto 1fr;
+  gap: var(--sp-1) var(--sp-3);
+  font-size: var(--text-xs);
+  margin: 0;
+}
+.inspector__facts dt { color: var(--ink-faint); }
+.inspector__facts dd { margin: 0; overflow-wrap: anywhere; }
+
+.inspector__json {
+  margin: 0 0 var(--sp-3);
+  padding: var(--sp-2);
+  max-height: 22rem;
+  overflow: auto;
+  white-space: pre-wrap;
+  overflow-wrap: anywhere;
+  background: var(--code-bg);
+  border: 1px solid var(--code-border);
+  border-radius: var(--radius);
+  font-family: var(--font-mono);
+  font-size: var(--text-xs);
+  line-height: var(--leading-normal);
+  color: var(--ink-muted);
+}
+
+@media (max-width: 64rem) {
+  .inspector {
+    position: fixed;
+    inset: 0 0 0 auto;
+    z-index: 40;
+    box-shadow: var(--shadow-lg);
+  }
+}
+
 .topbar {
   display: flex;
   align-items: center;

src/lembas/web/static/css/tokens.css

@@ -65,6 +65,7 @@
 
   /* --- Layout ----------------------------------------------------------- */
   --sidebar-width: 17.5rem;
+  --inspector-width: 24rem;
   --thread-max-width: 48rem;
   --header-height: 3.5rem;