fix(layout): draw diagnostic tile markers inset + frame the sidebar viewport, not its scrolled content

Two renderer bugs made the diagnostic layout plugin's borders useless:

1. Borders went past the panels and were invisible at screen edges: CSS
   outlines draw OUTSIDE the border box by default, and tiles span their
   containers edge-to-edge, so the 4px ring overflowed the visible area
   and was clipped. The outline is now inset (outline-offset: -4px) so
   it draws inside the tile's box.

2. The green side border scrolled with the sidebar: the marker was drawn
   on the TilePanels root, which is the SCROLLED CONTENT of the split's
   collapsible child. The marker now lives on the split's scroll-viewport
   div — the sidebar's fixed, opaquely-painted frame: its box never moves
   (only its contents scroll), and its own outline is never clipped by its
   overflow. (The aside behind it can't carry the marker — the scroll
   viewport's bg-base-100 paints over an outline drawn on the aside.)

markerStyle() centralizes the full declaration (outline + inset offset)
and returns undefined for unmarked/unknown markers, so unmarked trees
still render with zero outline CSS (pinned by the existing tests).

Paint layering verified with a headless-Chromium screenshot of a probe
page reproducing the exact DOM + computed styles.

1 files changed, 14 insertions, 2 deletions

diff --git a/src/features/layout/ui/TilePanels.svelte b/src/features/layout/ui/TilePanels.svelte
index 877ce2e..78dd7d1 100644
--- a/src/features/layout/ui/TilePanels.svelte
+++ b/src/features/layout/ui/TilePanels.svelte
@@ -9,7 +9,7 @@
   import type { LayoutOp, PanelsNode, Path } from "@dispatch/layout-contract";
   import { viewRegistry } from "../logic/registry";
   import { addPanelOp, firstPanelView, removePanelOp, swapPanelOp } from "../logic/panels-edit";
-  import { markerOutline } from "../logic/marker";
+  import { markerStyle } from "../logic/marker";
   import TileLeaf from "./TileLeaf.svelte";
 
   let {
@@ -17,11 +17,20 @@
     path,
     ports,
     onEdit,
+    renderMarker = false,
   }: {
     node: PanelsNode;
     path: Path;
     ports?: unknown;
     onEdit: (ops: readonly LayoutOp[]) => void;
+    /**
+     * Whether to draw the node's diagnostic marker on this root. Default NO:
+     * a panels node is the scrolled CONTENT of a split's collapsible child,
+     * so an outline here wraps the full scrollable region and scrolls with
+     * it — the split draws the marker on the aside (the fixed viewport)
+     * instead. Pass `true` only for a panels node used outside a split.
+     */
+    renderMarker?: boolean;
   } = $props();
 
   // Panel-eligible views only (decision 5): chat/composer/message-queue never
@@ -30,7 +39,10 @@
   const addView = $derived(firstPanelView(panelViews));
 </script>
 
-<div class="flex min-h-0 flex-col gap-2" style:outline={markerOutline(node.marker)}>
+<div
+  class="flex min-h-0 flex-col gap-2"
+  style={renderMarker ? markerStyle(node.marker) : undefined}
+>
   {#each node.panels as panel, idx (idx)}
     <div class="flex flex-col rounded-lg bg-base-200 p-3">
       <div class="flex items-center gap-1">