Update SimDeck docs and workflow guidance

Author: DjDeveloperr

client/src/app/AppShell.tsx

@@ -782,10 +782,14 @@ export function AppShell({
       }
     }
 
-    document.addEventListener("pointerdown", handleDocumentPointerDown);
+    document.addEventListener("pointerdown", handleDocumentPointerDown, true);
     window.addEventListener("keydown", handleWindowKeyDown);
     return () => {
-      document.removeEventListener("pointerdown", handleDocumentPointerDown);
+      document.removeEventListener(
+        "pointerdown",
+        handleDocumentPointerDown,
+        true,
+      );
       window.removeEventListener("keydown", handleWindowKeyDown);
     };
   }, [menuOpen]);
@@ -1477,6 +1481,7 @@ export function AppShell({
             <DebugPanel
               fps={fps}
               inline
+              onClose={() => setDebugVisible(false)}
               runtimeInfo={runtimeInfo}
               stats={stats}
               status={streamStatus}

client/src/features/toolbar/DebugPanel.tsx

@@ -7,6 +7,7 @@ import type {
 interface DebugPanelProps {
   fps: number;
   inline?: boolean;
+  onClose?: () => void;
   runtimeInfo: StreamRuntimeInfo;
   stats: StreamStats;
   status: StreamStatus;
@@ -26,90 +27,61 @@ function formatMs(value: number): string {
   return `${value.toFixed(1)} ms`;
 }
 
-function formatGpuStatus(runtimeInfo: StreamRuntimeInfo): string {
-  if (!runtimeInfo.webGL2) {
-    return "No";
-  }
-  if (runtimeInfo.gpuLikelyHardware == null) {
-    return "Unknown";
-  }
-  return runtimeInfo.gpuLikelyHardware ? "Yes" : "No";
-}
-
 function formatResolution(stats: StreamStats): string {
   if (!stats.width || !stats.height) {
     return "—";
   }
   return `${stats.width}×${stats.height}`;
 }
 
-function formatValue(value: string | number | undefined): string {
-  if (value == null || value === "") {
-    return "—";
-  }
-  return String(value);
-}
-
 export function DebugPanel({
   fps,
   inline = false,
+  onClose,
   runtimeInfo,
   stats,
   status,
 }: DebugPanelProps) {
   const rows: Array<{ label: string; value: string }> = [
     { label: "State", value: status.state },
     { label: "FPS", value: formatFps(fps) },
-    { label: "Codec", value: formatValue(stats.codec) },
     { label: "Resolution", value: formatResolution(stats) },
     { label: "Packets", value: String(stats.receivedPackets) },
     { label: "Dropped", value: String(stats.droppedFrames) },
     { label: "Reconnects", value: String(stats.reconnects) },
-    { label: "Frame Seq", value: String(stats.frameSequence) },
     { label: "Decoded", value: String(stats.decodedFrames) },
     { label: "Rendered", value: String(stats.renderedFrames) },
-    { label: "Decode Q", value: String(stats.decodeQueueSize) },
     { label: "Render", value: formatMs(stats.latestRenderMs) },
     { label: "Frame Gap", value: formatMs(stats.latestFrameGapMs) },
     { label: "Path", value: runtimeInfo.streamBackend },
-    { label: "Renderer", value: runtimeInfo.renderBackend },
-    { label: "GPU", value: formatGpuStatus(runtimeInfo) },
   ];
 
-  const gpuRenderer = runtimeInfo.gpuRenderer.trim();
-  const gpuVendor = runtimeInfo.gpuVendor.trim();
-
   return (
     <section
       aria-label="Stream debug info"
       className={`debug-panel ${inline ? "debug-panel-inline" : "debug-panel-popover"}`}
     >
-      <div className="debug-panel-header">Debug Info</div>
+      <div className="debug-panel-header">
+        <span>Debug Info</span>
+        {onClose ? (
+          <button
+            aria-label="Close debug info"
+            className="debug-close"
+            onClick={onClose}
+            title="Close"
+            type="button"
+          >
+            x
+          </button>
+        ) : null}
+      </div>
       <dl className="debug-grid">
         {rows.map((row) => (
           <div className="debug-row" key={row.label}>
             <dt className="debug-label">{row.label}</dt>
             <dd className="debug-value">{row.value}</dd>
           </div>
         ))}
-        {gpuVendor ? (
-          <div className="debug-row debug-row-wide">
-            <dt className="debug-label">GPU Vendor</dt>
-            <dd className="debug-value debug-value-wrap">{gpuVendor}</dd>
-          </div>
-        ) : null}
-        {gpuRenderer ? (
-          <div className="debug-row debug-row-wide">
-            <dt className="debug-label">GPU Renderer</dt>
-            <dd className="debug-value debug-value-wrap">{gpuRenderer}</dd>
-          </div>
-        ) : null}
-        {status.detail ? (
-          <div className="debug-row debug-row-wide">
-            <dt className="debug-label">Detail</dt>
-            <dd className="debug-value debug-value-wrap">{status.detail}</dd>
-          </div>
-        ) : null}
       </dl>
     </section>
   );

client/src/styles/components.css

@@ -170,6 +170,10 @@
 }
 
 .debug-panel-header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 8px;
   margin-bottom: 10px;
   color: var(--text-secondary);
   font-size: 11px;
@@ -178,6 +182,27 @@
   text-transform: uppercase;
 }
 
+.debug-close {
+  display: inline-grid;
+  place-items: center;
+  width: 24px;
+  height: 24px;
+  margin: -6px -4px -4px 0;
+  padding: 0;
+  color: var(--text-secondary);
+  background: transparent;
+  border: 0;
+  border-radius: 6px;
+  cursor: pointer;
+  font-size: 18px;
+  line-height: 1;
+}
+
+.debug-close:hover {
+  color: var(--text);
+  background: var(--surface-raised);
+}
+
 .debug-grid {
   display: grid;
   grid-template-columns: repeat(2, minmax(0, 1fr));
@@ -423,6 +448,7 @@
 
 .hierarchy-panel {
   position: relative;
+  box-sizing: border-box;
   flex: 0 0 auto;
   min-width: 240px;
   max-width: 55vw;
@@ -476,6 +502,7 @@
 
 .hierarchy-tree {
   flex: 1;
+  min-height: 0;
   overflow: auto;
   padding: 4px;
   scrollbar-width: thin;

client/src/styles/layout.css

@@ -83,6 +83,7 @@
 }
 
 .main {
+  position: relative;
   display: flex;
   overflow: hidden;
   min-height: 0;
@@ -145,10 +146,6 @@
     display: block;
   }
 
-  .main {
-    flex-direction: column;
-  }
-
   .debug-grid {
     grid-template-columns: 1fr;
   }
@@ -168,12 +165,19 @@
   }
 
   .hierarchy-panel {
-    width: 100%;
+    position: absolute;
+    top: 8px;
+    left: 8px;
+    bottom: 8px;
+    z-index: 18;
+    width: min(360px, calc(100vw - 16px));
     min-width: 0;
-    max-width: none;
-    max-height: min(42dvh, 360px);
-    border-right: 0;
-    border-bottom: 1px solid var(--border);
+    max-width: calc(100vw - 16px);
+    max-height: none;
+    height: calc(100% - 16px);
+    border: 1px solid var(--border);
+    border-radius: 8px;
+    box-shadow: 0 16px 40px rgba(0, 0, 0, 0.28);
   }
 
   .toolbar-sim-detail {