create-rezi 0.1.0-alpha.45 → 0.1.0-alpha.48

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "create-rezi",
-  "version": "0.1.0-alpha.45",
+  "version": "0.1.0-alpha.48",
   "description": "Scaffold a Rezi terminal UI app.",
   "license": "Apache-2.0",
   "homepage": "https://rezitui.dev",
@@ -28,6 +28,6 @@
     "bun": ">=1.3.0"
   },
   "devDependencies": {
-    "@rezi-ui/testkit": "0.1.0-alpha.45"
+    "@rezi-ui/testkit": "0.1.0-alpha.48"
   }
 }

package/templates/starship/src/main.ts

@@ -1,4 +1,9 @@
-import { exit } from "node:process";
+import {
+  type DebugController,
+  type DebugRecord,
+  categoriesToMask,
+  createDebugController,
+} from "@rezi-ui/core";
 import { createNodeApp } from "@rezi-ui/node";
 import { debugSnapshot } from "./helpers/debug.js";
 import { resolveStarshipCommand } from "./helpers/keybindings.js";
@@ -14,10 +19,21 @@ import type { RouteDeps, RouteId, StarshipAction, StarshipState } from "./types.
 const UI_FPS_CAP = 30;
 const TICK_MS = 800;
 const TOAST_PRUNE_MS = 3000;
+const DEBUG_TRACE_ENABLED = process.env.REZI_STARSHIP_DEBUG_TRACE === "1";
+const EXECUTION_MODE: "inline" | "worker" =
+  process.env.REZI_STARSHIP_EXECUTION_MODE === "worker" ? "worker" : "inline";
+
+function clampViewportAxis(value: number | undefined, fallback: number): number {
+  const safeFallback = Math.max(1, Math.trunc(fallback));
+  if (!Number.isFinite(value)) return safeFallback;
+  const raw = Math.trunc(value ?? safeFallback);
+  if (raw <= 0) return safeFallback;
+  return raw;
+}
 
 const initialState = createInitialStateWithViewport(Date.now(), {
-  cols: process.stdout.columns ?? 120,
-  rows: process.stdout.rows ?? 40,
+  cols: clampViewportAxis(process.stdout.columns, 120),
+  rows: clampViewportAxis(process.stdout.rows, 40),
 });
 const enableHsr = process.argv.includes("--hsr") || process.env.REZI_HSR === "1";
 const hasInteractiveTty = Boolean(process.stdin.isTTY && process.stdout.isTTY);
@@ -41,6 +57,15 @@ let app!: ReturnType<typeof createNodeApp<StarshipState>>;
 let stopping = false;
 let tickTimer: ReturnType<typeof setInterval> | null = null;
 let toastTimer: ReturnType<typeof setInterval> | null = null;
+let debugTraceTimer: ReturnType<typeof setInterval> | null = null;
+let debugTraceInFlight = false;
+let debugController: DebugController | null = null;
+let debugLastRecordId = 0n;
+let stopCode = 0;
+let stopResolve: (() => void) | null = null;
+const stopPromise = new Promise<void>((resolve) => {
+  stopResolve = resolve;
+});
 let lastViewport = {
   cols: initialState.viewportCols,
   rows: initialState.viewportRows,
@@ -68,20 +93,22 @@ function dispatch(action: StarshipAction): void {
 }
 
 function syncViewport(cols: number, rows: number): void {
-  if (cols === lastViewport.cols && rows === lastViewport.rows) return;
-  lastViewport = { cols, rows };
+  const safeCols = clampViewportAxis(cols, lastViewport.cols);
+  const safeRows = clampViewportAxis(rows, lastViewport.rows);
+  if (safeCols === lastViewport.cols && safeRows === lastViewport.rows) return;
+  lastViewport = { cols: safeCols, rows: safeRows };
   debugSnapshot("runtime.viewport", {
-    cols,
-    rows,
+    cols: safeCols,
+    rows: safeRows,
     route: currentRouteId(),
   });
-  dispatch({ type: "set-viewport", cols, rows });
+  dispatch({ type: "set-viewport", cols: safeCols, rows: safeRows });
 }
 
 function syncViewportFromStdout(): void {
   if (!process.stdout.isTTY) return;
-  const cols = process.stdout.columns ?? lastViewport.cols;
-  const rows = process.stdout.rows ?? lastViewport.rows;
+  const cols = clampViewportAxis(process.stdout.columns, lastViewport.cols);
+  const rows = clampViewportAxis(process.stdout.rows, lastViewport.rows);
   syncViewport(cols, rows);
 }
 
@@ -96,6 +123,17 @@ function currentRouteId(): RouteId {
   return "bridge";
 }
 
+const frameAuditGlobal = globalThis as {
+  __reziFrameAuditContext?: () => Readonly<Record<string, unknown>>;
+};
+frameAuditGlobal.__reziFrameAuditContext = () =>
+  Object.freeze({
+    route: currentRouteId(),
+    viewportCols: lastViewport.cols,
+    viewportRows: lastViewport.rows,
+    executionMode: EXECUTION_MODE,
+  });
+
 function navigate(routeId: RouteId): void {
   const router = app.router;
   if (!router) return;
@@ -126,6 +164,7 @@ function buildRoutes(factory: CreateRoutesFn) {
 async function stopApp(code = 0): Promise<void> {
   if (stopping) return;
   stopping = true;
+  stopCode = code;
 
   if (tickTimer) {
     clearInterval(tickTimer);
@@ -137,18 +176,28 @@ async function stopApp(code = 0): Promise<void> {
     toastTimer = null;
   }
 
-  try {
-    await app.stop();
-  } catch {
-    // Ignore stop races.
+  if (debugTraceTimer) {
+    clearInterval(debugTraceTimer);
+    debugTraceTimer = null;
+  }
+
+  if (debugController) {
+    try {
+      await debugController.disable();
+    } catch {
+      // Ignore debug shutdown races.
+    }
+    debugController = null;
   }
 
   try {
-    app.dispose();
+    await app.stop();
   } catch {
-    // Ignore disposal races during shutdown.
+    // Ignore stop races.
   }
-  exit(code);
+  frameAuditGlobal.__reziFrameAuditContext = undefined;
+  stopResolve?.();
+  stopResolve = null;
 }
 
 function applyCommand(command: ReturnType<typeof resolveStarshipCommand>): void {
@@ -464,13 +513,172 @@ function bindKeys(): void {
   app.keys(bindingMap);
 }
 
+function snapshotDebugRecord(record: DebugRecord): void {
+  const { header } = record;
+  if (header.category === "frame") {
+    if (
+      record.payload &&
+      typeof record.payload === "object" &&
+      "drawlistBytes" in record.payload &&
+      "drawlistCmds" in record.payload
+    ) {
+      debugSnapshot("runtime.debug.frame", {
+        recordId: header.recordId.toString(),
+        frameId: header.frameId.toString(),
+        route: currentRouteId(),
+        drawlistBytes: record.payload.drawlistBytes,
+        drawlistCmds: record.payload.drawlistCmds,
+        diffBytesEmitted:
+          "diffBytesEmitted" in record.payload ? record.payload.diffBytesEmitted : null,
+        dirtyLines: "dirtyLines" in record.payload ? record.payload.dirtyLines : null,
+        dirtyCells: "dirtyCells" in record.payload ? record.payload.dirtyCells : null,
+        damageRects: "damageRects" in record.payload ? record.payload.damageRects : null,
+        usDrawlist: "usDrawlist" in record.payload ? record.payload.usDrawlist : null,
+        usDiff: "usDiff" in record.payload ? record.payload.usDiff : null,
+        usWrite: "usWrite" in record.payload ? record.payload.usWrite : null,
+      });
+      return;
+    }
+
+    debugSnapshot("runtime.debug.frame.raw", {
+      recordId: header.recordId.toString(),
+      frameId: header.frameId.toString(),
+      code: header.code,
+      severity: header.severity,
+      payloadSize: header.payloadSize,
+      route: currentRouteId(),
+    });
+  }
+
+  if (header.category === "drawlist") {
+    if (
+      record.payload &&
+      typeof record.payload === "object" &&
+      "totalBytes" in record.payload &&
+      "cmdCount" in record.payload
+    ) {
+      debugSnapshot("runtime.debug.drawlist", {
+        recordId: header.recordId.toString(),
+        frameId: header.frameId.toString(),
+        code: header.code,
+        severity: header.severity,
+        route: currentRouteId(),
+        totalBytes: record.payload.totalBytes,
+        cmdCount: record.payload.cmdCount,
+        validationResult:
+          "validationResult" in record.payload ? record.payload.validationResult : null,
+        executionResult:
+          "executionResult" in record.payload ? record.payload.executionResult : null,
+        clipStackMaxDepth:
+          "clipStackMaxDepth" in record.payload ? record.payload.clipStackMaxDepth : null,
+        textRuns: "textRuns" in record.payload ? record.payload.textRuns : null,
+        fillRects: "fillRects" in record.payload ? record.payload.fillRects : null,
+      });
+      return;
+    }
+
+    if (
+      record.payload &&
+      typeof record.payload === "object" &&
+      "kind" in record.payload &&
+      record.payload.kind === "drawlistBytes" &&
+      "bytes" in record.payload
+    ) {
+      debugSnapshot("runtime.debug.drawlistBytes", {
+        recordId: header.recordId.toString(),
+        frameId: header.frameId.toString(),
+        code: header.code,
+        severity: header.severity,
+        route: currentRouteId(),
+        bytes: record.payload.bytes.byteLength,
+      });
+      return;
+    }
+
+    debugSnapshot("runtime.debug.drawlist.raw", {
+      recordId: header.recordId.toString(),
+      frameId: header.frameId.toString(),
+      code: header.code,
+      severity: header.severity,
+      payloadSize: header.payloadSize,
+      route: currentRouteId(),
+    });
+  }
+}
+
+async function setupDebugTrace(): Promise<void> {
+  if (!DEBUG_TRACE_ENABLED) return;
+  try {
+    debugController = createDebugController({
+      backend: app.backend.debug,
+      terminalCapsProvider: () => app.backend.getCaps(),
+      maxFrames: 512,
+    });
+
+    await debugController.enable({
+      minSeverity: "trace",
+      categoryMask: categoriesToMask(["frame", "drawlist", "error"]),
+      captureRawEvents: false,
+      captureDrawlistBytes: false,
+    });
+    await debugController.reset();
+  } catch (error) {
+    debugSnapshot("runtime.debug.enable.error", {
+      message: error instanceof Error ? error.message : String(error),
+      route: currentRouteId(),
+    });
+    if (debugController) {
+      try {
+        await debugController.disable();
+      } catch {
+        // Ignore debug shutdown races.
+      }
+      debugController = null;
+    }
+    return;
+  }
+
+  debugLastRecordId = 0n;
+
+  debugSnapshot("runtime.debug.enable", {
+    route: currentRouteId(),
+    viewportCols: lastViewport.cols,
+    viewportRows: lastViewport.rows,
+  });
+
+  const pump = async () => {
+    if (!debugController || debugTraceInFlight) return;
+    debugTraceInFlight = true;
+    try {
+      const records = await debugController.query({ maxRecords: 256 });
+      if (records.length === 0) return;
+      for (const record of records) {
+        if (record.header.recordId <= debugLastRecordId) continue;
+        debugLastRecordId = record.header.recordId;
+        snapshotDebugRecord(record);
+      }
+    } catch (error) {
+      debugSnapshot("runtime.debug.query.error", {
+        message: error instanceof Error ? error.message : String(error),
+        route: currentRouteId(),
+      });
+    } finally {
+      debugTraceInFlight = false;
+    }
+  };
+
+  debugTraceTimer = setInterval(() => {
+    void pump();
+  }, 250);
+}
+
 const routes = buildRoutes(createStarshipRoutes);
 
 debugSnapshot("runtime.app.create", {
   routeCount: routes.length,
   initialRoute: "bridge",
   fpsCap: UI_FPS_CAP,
-  executionMode: "inline",
+  executionMode: EXECUTION_MODE,
 });
 
 app = createNodeApp({
@@ -479,7 +687,7 @@ app = createNodeApp({
   initialRoute: "bridge",
   config: {
     fpsCap: UI_FPS_CAP,
-    executionMode: "inline",
+    executionMode: EXECUTION_MODE,
   },
   theme: themeSpec(initialState.themeName).theme,
   ...(enableHsr
@@ -545,5 +753,9 @@ debugSnapshot("runtime.app.start", {
   viewportRows: lastViewport.rows,
 });
 
+await setupDebugTrace();
 await app.start();
-await new Promise<void>(() => {});
+await stopPromise;
+if (stopCode !== 0) {
+  process.exitCode = stopCode;
+}

package/templates/starship/src/screens/bridge.ts

@@ -554,7 +554,7 @@ export function renderBridgeScreen(
     title: "Bridge Overview",
     context,
     deps,
-    body: ui.column({ gap: SPACE.sm, width: "100%" }, [
+    body: ui.column({ gap: SPACE.sm, width: "100%", height: "100%" }, [
       BridgeCommandDeck({ key: "bridge-command-deck", state, dispatch: deps.dispatch }),
     ]),
   });

package/templates/starship/src/screens/cargo.ts

@@ -30,8 +30,12 @@ export function renderCargoScreen(
     title: "Cargo Hold",
     context,
     deps,
-    body: ui.column({ gap: SPACE.sm, width: "100%" }, [
-      CargoDeck({ state: context.state, dispatch: deps.dispatch }),
+    body: ui.column({ gap: SPACE.sm, width: "100%", height: "100%" }, [
+      CargoDeck({
+        key: "cargo-deck",
+        state: context.state,
+        dispatch: deps.dispatch,
+      }),
     ]),
   });
 }

package/templates/starship/src/screens/comms.ts

@@ -462,8 +462,12 @@ export function renderCommsScreen(
     title: "Communications",
     context,
     deps,
-    body: ui.column({ gap: SPACE.sm, width: "100%" }, [
-      CommsDeck({ state: context.state, dispatch: deps.dispatch }),
+    body: ui.column({ gap: SPACE.sm, width: "100%", height: "100%" }, [
+      CommsDeck({
+        key: "comms-deck",
+        state: context.state,
+        dispatch: deps.dispatch,
+      }),
     ]),
   });
 }

package/templates/starship/src/screens/crew.ts

@@ -7,6 +7,7 @@ import {
   type RouteRenderContext,
   type VNode,
 } from "@rezi-ui/core";
+import { debugSnapshot } from "../helpers/debug.js";
 import { resolveLayout } from "../helpers/layout.js";
 import { crewCounts, departmentLabel, rankBadge, statusBadge } from "../helpers/formatters.js";
 import { selectedCrew, visibleCrew } from "../helpers/state.js";
@@ -193,7 +194,7 @@ const CrewDeck = defineWidget<CrewDeckProps>((props, ctx): VNode => {
     ...tableSkin(tokens),
   });
 
-  const detailPanel = ui.column({ gap: SPACE.sm }, [
+  const detailPanel = ui.column({ gap: SPACE.sm, width: "100%", height: "100%" }, [
     maybe(selected, (member) =>
       surfacePanel(
         tokens,
@@ -300,8 +301,18 @@ const CrewDeck = defineWidget<CrewDeckProps>((props, ctx): VNode => {
     ),
   ]);
 
-  const manifestBlock = ui.column({ gap: SPACE.sm }, [
-    surfacePanel(tokens, "Crew Manifest", [table]),
+  const manifestBlock = ui.column({ gap: SPACE.sm, width: "100%", height: "100%" }, [
+    ui.box(
+      {
+        border: "none",
+        p: 0,
+        width: "100%",
+        flex: 1,
+        minHeight: 10,
+        overflow: "hidden",
+      },
+      [surfacePanel(tokens, "Crew Manifest", [table])],
+    ),
     ui.pagination({
       id: ctx.id("crew-pagination"),
       page,
@@ -313,126 +324,185 @@ const CrewDeck = defineWidget<CrewDeckProps>((props, ctx): VNode => {
 
   const deckLayout = layout.wide
     ? showDetailPane
-      ? ui.masterDetail({
-          id: ctx.id("crew-master-detail"),
-          masterWidth: layout.crewMasterWidth,
-          master: manifestBlock,
-          detail: detailPanel,
-        })
-      : manifestBlock
-    : showDetailPane
-      ? ui.column({ gap: SPACE.sm }, [manifestBlock, detailPanel])
-      : manifestBlock;
-
-  const operationsPanel = surfacePanel(
-    tokens,
-    "Crew Operations",
-    [
-      sectionHeader(tokens, "Manifest Controls", "Consistent staffing and assignment flow"),
-      ui.row({ gap: SPACE.md, wrap: !layout.wide, items: "start" }, [
-        ui.box(
+      ? ui.row(
           {
-            border: "none",
-            p: 0,
+            id: ctx.id("crew-master-detail"),
             gap: SPACE.sm,
-            ...(layout.wide ? { flex: 2 } : {}),
+            width: "100%",
+            height: "100%",
+            items: "stretch",
+            wrap: false,
           },
           [
-            ui.row({ gap: SPACE.sm, wrap: true }, [
-              ui.badge(`Total ${counts.total}`, { variant: "info" }),
-              ui.badge(`Active ${counts.active}`, { variant: "success" }),
-              ui.badge(`Away ${counts.away}`, { variant: "warning" }),
-              ui.badge(`Injured ${counts.injured}`, { variant: "error" }),
-            ]),
-            ui.form([
-              ui.field({
-                label: "Search Crew",
-                hint: "Filter by name, rank, or department",
-                children: ui.input({
-                  id: ctx.id("crew-search"),
-                  value: props.state.crewSearchQuery,
-                  placeholder: "Type to filter",
-                  onInput: (value) => props.dispatch({ type: "set-crew-search", query: value }),
-                }),
-              }),
-            ]),
-            ui.actions([
-              ui.button({
-                id: ctx.id("crew-new-assignment"),
-                label: "New Assignment",
-                intent: "primary",
-                onPress: () => props.dispatch({ type: "toggle-crew-editor" }),
-              }),
-              ui.button({
-                id: ctx.id("crew-edit-selected"),
-                label: "Edit Selected",
-                intent: "secondary",
-                onPress: () => props.dispatch({ type: "toggle-crew-editor" }),
-              }),
-            ]),
+            ui.box(
+              {
+                border: "none",
+                p: 0,
+                width: layout.crewMasterWidth,
+                height: "100%",
+                overflow: "hidden",
+              },
+              [manifestBlock],
+            ),
+            ui.box(
+              {
+                border: "none",
+                p: 0,
+                flex: 1,
+                height: "100%",
+                overflow: "hidden",
+              },
+              [detailPanel],
+            ),
           ],
-        ),
-        ...(layout.wide
-          ? [
-              ui.box(
-                {
-                  border: "none",
-                  p: 0,
-                  flex: 1,
-                },
-                [
-                  surfacePanel(
-                    tokens,
-                    "Crew Snapshot",
+        )
+      : manifestBlock
+    : showDetailPane
+      ? ui.column({ gap: SPACE.sm, width: "100%", height: "100%" }, [
+          ui.box(
+            { border: "none", p: 0, width: "100%", flex: 1, minHeight: 10, overflow: "hidden" },
+            [manifestBlock],
+          ),
+          ui.box(
+            { border: "none", p: 0, width: "100%", flex: 1, minHeight: 10, overflow: "hidden" },
+            [detailPanel],
+          ),
+        ])
+      : manifestBlock;
+
+  const operationsPanelMaxHeight = Math.max(12, Math.min(22, Math.floor(layout.height * 0.34)));
+  debugSnapshot("crew.render", {
+    viewportCols: props.state.viewportCols,
+    viewportRows: props.state.viewportRows,
+    visibleCount: visible.length,
+    sortedCount: sorted.length,
+    page,
+    totalPages,
+    pageDataCount: pageData.length,
+    showDetailPane,
+    operationsPanelMaxHeight,
+    editingCrew: props.state.editingCrew,
+  });
+  const operationsPanel = ui.box(
+    {
+      border: "none",
+      p: 0,
+      width: "100%",
+      height: operationsPanelMaxHeight,
+      overflow: "scroll",
+    },
+    [
+      surfacePanel(
+        tokens,
+        "Crew Operations",
+        [
+          sectionHeader(tokens, "Manifest Controls", "Consistent staffing and assignment flow"),
+          ui.row({ gap: SPACE.md, wrap: !layout.wide, items: "start" }, [
+            ui.box(
+              {
+                border: "none",
+                p: 0,
+                gap: SPACE.sm,
+                ...(layout.wide ? { flex: 2 } : {}),
+              },
+              [
+                ui.row({ gap: SPACE.sm, wrap: true }, [
+                  ui.badge(`Total ${counts.total}`, { variant: "info" }),
+                  ui.badge(`Active ${counts.active}`, { variant: "success" }),
+                  ui.badge(`Away ${counts.away}`, { variant: "warning" }),
+                  ui.badge(`Injured ${counts.injured}`, { variant: "error" }),
+                ]),
+                ui.form([
+                  ui.field({
+                    label: "Search Crew",
+                    hint: "Filter by name, rank, or department",
+                    children: ui.input({
+                      id: ctx.id("crew-search"),
+                      value: props.state.crewSearchQuery,
+                      placeholder: "Type to filter",
+                      onInput: (value) => props.dispatch({ type: "set-crew-search", query: value }),
+                    }),
+                  }),
+                ]),
+                ui.actions([
+                  ui.button({
+                    id: ctx.id("crew-new-assignment"),
+                    label: "New Assignment",
+                    intent: "primary",
+                    onPress: () => props.dispatch({ type: "toggle-crew-editor" }),
+                  }),
+                  ui.button({
+                    id: ctx.id("crew-edit-selected"),
+                    label: "Edit Selected",
+                    intent: "secondary",
+                    onPress: () => props.dispatch({ type: "toggle-crew-editor" }),
+                  }),
+                ]),
+              ],
+            ),
+            ...(layout.wide
+              ? [
+                  ui.box(
+                    {
+                      border: "none",
+                      p: 0,
+                      flex: 1,
+                    },
                     [
-                      selected
-                        ? ui.column({ gap: SPACE.xs }, [
-                            ui.text(selected.name, { variant: "label" }),
-                            ui.row({ gap: SPACE.xs, wrap: true }, [
-                              ui.badge(rankBadge(selected.rank).text, {
-                                variant: rankBadge(selected.rank).variant,
+                      surfacePanel(
+                        tokens,
+                        "Crew Snapshot",
+                        [
+                          selected
+                            ? ui.column({ gap: SPACE.xs }, [
+                                ui.text(selected.name, { variant: "label" }),
+                                ui.row({ gap: SPACE.xs, wrap: true }, [
+                                  ui.badge(rankBadge(selected.rank).text, {
+                                    variant: rankBadge(selected.rank).variant,
+                                  }),
+                                  ui.badge(statusBadge(selected.status).text, {
+                                    variant: statusBadge(selected.status).variant,
+                                  }),
+                                  ui.tag(departmentLabel(selected.department), { variant: "info" }),
+                                ]),
+                              ])
+                            : ui.text("No crew selected", {
+                                variant: "caption",
+                                style: { fg: tokens.text.muted, dim: true },
                               }),
-                              ui.badge(statusBadge(selected.status).text, {
-                                variant: statusBadge(selected.status).variant,
+                          ui.divider(),
+                          ui.row({ gap: SPACE.xs, wrap: true }, [
+                            ui.badge(`Visible ${sorted.length}`, { variant: "info" }),
+                            ui.badge(`Page ${page}/${totalPages}`, { variant: "default" }),
+                          ]),
+                          staffingError
+                            ? ui.callout("Critical staffing below minimum.", {
+                                title: "Guardrail",
+                                variant: "warning",
+                              })
+                            : ui.callout("Critical staffing thresholds healthy.", {
+                                title: "Guardrail",
+                                variant: "success",
                               }),
-                              ui.tag(departmentLabel(selected.department), { variant: "info" }),
-                            ]),
-                          ])
-                        : ui.text("No crew selected", {
-                            variant: "caption",
-                            style: { fg: tokens.text.muted, dim: true },
-                          }),
-                      ui.divider(),
-                      ui.row({ gap: SPACE.xs, wrap: true }, [
-                        ui.badge(`Visible ${sorted.length}`, { variant: "info" }),
-                        ui.badge(`Page ${page}/${totalPages}`, { variant: "default" }),
-                      ]),
-                      staffingError
-                        ? ui.callout("Critical staffing below minimum.", {
-                            title: "Guardrail",
-                            variant: "warning",
-                          })
-                        : ui.callout("Critical staffing thresholds healthy.", {
-                            title: "Guardrail",
-                            variant: "success",
-                          }),
+                        ],
+                        {
+                          tone: "inset",
+                          p: SPACE.sm,
+                          gap: SPACE.sm,
+                        },
+                      ),
                     ],
-                    {
-                      tone: "inset",
-                      p: SPACE.sm,
-                      gap: SPACE.sm,
-                    },
                   ),
-                ],
-              ),
-            ]
-          : []),
-      ]),
+                ]
+              : []),
+          ]),
+        ],
+        { tone: "base" },
+      ),
     ],
-    { tone: "base" },
   );
 
-  return ui.column({ gap: SPACE.md, width: "100%" }, [
+  return ui.column({ gap: SPACE.md, width: "100%", height: "100%" }, [
     operationsPanel,
     show(
       asyncCrew.loading,
@@ -443,7 +513,20 @@ const CrewDeck = defineWidget<CrewDeckProps>((props, ctx): VNode => {
         ui.skeleton(44, { variant: "text" }),
       ], { tone: "inset" }),
     ),
-    show(!asyncCrew.loading, deckLayout),
+    show(
+      !asyncCrew.loading,
+      ui.box(
+        {
+          border: "none",
+          p: 0,
+          width: "100%",
+          flex: 1,
+          minHeight: 12,
+          overflow: "hidden",
+        },
+        [deckLayout],
+      ),
+    ),
   ]);
 });
 
@@ -452,8 +535,12 @@ export function renderCrewScreen(context: RouteRenderContext<StarshipState>, dep
     title: "Crew Manifest",
     context,
     deps,
-    body: ui.column({ gap: SPACE.sm, width: "100%" }, [
-      CrewDeck({ state: context.state, dispatch: deps.dispatch }),
+    body: ui.column({ gap: SPACE.sm, width: "100%", height: "100%" }, [
+      CrewDeck({
+        key: "crew-deck",
+        state: context.state,
+        dispatch: deps.dispatch,
+      }),
     ]),
   });
 }

package/templates/starship/src/screens/engineering.ts

@@ -371,16 +371,27 @@ const EngineeringDeck = defineWidget<EngineeringDeckProps>((props, ctx): VNode =
     }),
   ]);
 
-  const leftPane = ui.column({ gap: SPACE.sm, width: "100%" }, [
-    reactorPanel,
-    ...(showSecondaryPanels ? [treePanel] : []),
-  ]);
-  const rightPane = ui.column({ gap: SPACE.sm, width: "100%" }, [
-    powerPanel,
-    ...(showSecondaryPanels ? [thermalPanel, diagnosticsPanel] : []),
-  ]);
+  const leftPane = showSecondaryPanels
+    ? ui.column({ gap: SPACE.sm, width: "100%", height: "100%" }, [
+        ui.box({ border: "none", p: 0, width: "100%", flex: 3, minHeight: 12 }, [reactorPanel]),
+        ui.box({ border: "none", p: 0, width: "100%", flex: 2, minHeight: 10, overflow: "hidden" }, [
+          treePanel,
+        ]),
+      ])
+    : ui.column({ gap: SPACE.sm, width: "100%" }, [reactorPanel]);
+  const rightPane = showSecondaryPanels
+    ? ui.column({ gap: SPACE.sm, width: "100%", height: "100%" }, [
+        ui.box({ border: "none", p: 0, width: "100%", flex: 3, minHeight: 12, overflow: "hidden" }, [
+          powerPanel,
+        ]),
+        ui.box({ border: "none", p: 0, width: "100%", flex: 2, minHeight: 10 }, [thermalPanel]),
+        ui.box({ border: "none", p: 0, width: "100%", flex: 2, minHeight: 10, overflow: "hidden" }, [
+          diagnosticsPanel,
+        ]),
+      ])
+    : ui.column({ gap: SPACE.sm, width: "100%" }, [powerPanel]);
 
-  const responsiveDeckHeight = Math.max(
+  const responsiveDeckMinHeight = Math.max(
     16,
     contentRows - (showControlsSummary ? 12 : 10) - (showSecondaryPanels ? 0 : 2),
   );
@@ -395,7 +406,8 @@ const EngineeringDeck = defineWidget<EngineeringDeckProps>((props, ctx): VNode =
       border: "none",
       p: 0,
       width: "100%",
-      height: responsiveDeckHeight,
+      flex: 1,
+      minHeight: responsiveDeckMinHeight,
       overflow: "scroll",
     },
     [responsiveDeckBody],
@@ -491,7 +503,7 @@ const EngineeringDeck = defineWidget<EngineeringDeckProps>((props, ctx): VNode =
     includeResponsiveDeck: renderMode === "full",
     responsiveDeckMode: useWideRow ? "row" : "column",
     forceStackViaEnv,
-    responsiveDeckHeight,
+    responsiveDeckMinHeight,
   });
 
   if (veryCompactHeight) {
@@ -502,7 +514,7 @@ const EngineeringDeck = defineWidget<EngineeringDeckProps>((props, ctx): VNode =
     return ui.column({ gap: SPACE.sm, width: "100%" }, [controlsPanel, reactorPanel]);
   }
 
-  return ui.column({ gap: SPACE.sm, width: "100%" }, [
+  return ui.column({ gap: SPACE.sm, width: "100%", height: "100%" }, [
     controlsRegion,
     responsiveDeck,
   ]);
@@ -516,8 +528,12 @@ export function renderEngineeringScreen(
     title: "Engineering Deck",
     context,
     deps,
-    body: ui.column({ gap: SPACE.sm, width: "100%" }, [
-      EngineeringDeck({ state: context.state, dispatch: deps.dispatch }),
+    body: ui.column({ gap: SPACE.sm, width: "100%", height: "100%" }, [
+      EngineeringDeck({
+        key: "engineering-deck",
+        state: context.state,
+        dispatch: deps.dispatch,
+      }),
     ]),
   });
 }

package/templates/starship/src/screens/settings.ts

@@ -209,7 +209,7 @@ function settingsRightRail(state: StarshipState, deps: RouteDeps): VNode {
       subtitle: activeTheme.label,
       actions: [ui.badge("Preview", { variant: "info" })],
     }),
-    body: ui.column({ gap: SPACE.xs }, [
+    body: ui.column({ gap: SPACE.xs, width: "100%", height: "100%" }, [
       ui.breadcrumb({
         items: [{ label: "Bridge" }, { label: "Settings" }, { label: "Theme Preview" }],
       }),
@@ -277,8 +277,9 @@ export function renderSettingsScreen(
     title: "Ship Settings",
     context,
     deps,
-    body: ui.column({ gap: SPACE.sm, width: "100%" }, [
+    body: ui.column({ gap: SPACE.sm, width: "100%", height: "100%" }, [
       SettingsDeck({
+        key: "settings-deck",
         state: context.state,
         dispatch: deps.dispatch,
       }),

package/templates/starship/src/theme.ts

@@ -1,12 +1,12 @@
 import {
   type BadgeVariant,
-  type Rgb,
+  type Rgb24,
   type TextStyle,
   type ThemeDefinition,
-  darkTheme,
   draculaTheme,
   extendTheme,
   nordTheme,
+  rgb,
 } from "@rezi-ui/core";
 import type { AlertLevel, ThemeName } from "./types.js";
 
@@ -42,52 +42,52 @@ const DAY_SHIFT_THEME = extendTheme(nordTheme, {
   focusIndicator: {
     bold: true,
     underline: false,
-    focusRingColor: { r: 118, g: 208, b: 255 },
+    focusRingColor: rgb(118, 208, 255),
   },
   colors: {
     bg: {
-      base: { r: 29, g: 42, b: 58 },
-      elevated: { r: 40, g: 57, b: 76 },
-      overlay: { r: 52, g: 72, b: 94 },
-      subtle: { r: 34, g: 49, b: 67 },
+      base: rgb(29, 42, 58),
+      elevated: rgb(40, 57, 76),
+      overlay: rgb(52, 72, 94),
+      subtle: rgb(34, 49, 67),
     },
     fg: {
-      primary: { r: 236, g: 243, b: 255 },
-      secondary: { r: 190, g: 217, b: 242 },
-      muted: { r: 108, g: 138, b: 168 },
-      inverse: { r: 20, g: 30, b: 42 },
+      primary: rgb(236, 243, 255),
+      secondary: rgb(190, 217, 242),
+      muted: rgb(108, 138, 168),
+      inverse: rgb(20, 30, 42),
     },
     border: {
-      subtle: { r: 74, g: 98, b: 126 },
-      default: { r: 104, g: 136, b: 168 },
-      strong: { r: 137, g: 171, b: 206 },
+      subtle: rgb(74, 98, 126),
+      default: rgb(104, 136, 168),
+      strong: rgb(137, 171, 206),
     },
     accent: {
-      primary: { r: 106, g: 195, b: 255 },
-      secondary: { r: 129, g: 217, b: 255 },
-      tertiary: { r: 180, g: 231, b: 164 },
+      primary: rgb(106, 195, 255),
+      secondary: rgb(129, 217, 255),
+      tertiary: rgb(180, 231, 164),
     },
-    info: { r: 118, g: 208, b: 255 },
-    success: { r: 166, g: 228, b: 149 },
-    warning: { r: 255, g: 211, b: 131 },
-    error: { r: 239, g: 118, b: 132 },
+    info: rgb(118, 208, 255),
+    success: rgb(166, 228, 149),
+    warning: rgb(255, 211, 131),
+    error: rgb(239, 118, 132),
     selected: {
-      bg: { r: 68, g: 105, b: 139 },
-      fg: { r: 236, g: 243, b: 255 },
+      bg: rgb(68, 105, 139),
+      fg: rgb(236, 243, 255),
     },
     disabled: {
-      fg: { r: 95, g: 121, b: 149 },
-      bg: { r: 39, g: 55, b: 72 },
+      fg: rgb(95, 121, 149),
+      bg: rgb(39, 55, 72),
     },
     diagnostic: {
-      error: { r: 239, g: 118, b: 132 },
-      warning: { r: 255, g: 211, b: 131 },
-      info: { r: 118, g: 208, b: 255 },
-      hint: { r: 149, g: 187, b: 228 },
+      error: rgb(239, 118, 132),
+      warning: rgb(255, 211, 131),
+      info: rgb(118, 208, 255),
+      hint: rgb(149, 187, 228),
     },
     focus: {
-      ring: { r: 118, g: 208, b: 255 },
-      bg: { r: 63, g: 96, b: 126 },
+      ring: rgb(118, 208, 255),
+      bg: rgb(63, 96, 126),
     },
   },
 });
@@ -105,52 +105,52 @@ const NIGHT_SHIFT_THEME = extendTheme(draculaTheme, {
   focusIndicator: {
     bold: true,
     underline: false,
-    focusRingColor: { r: 176, g: 133, b: 255 },
+    focusRingColor: rgb(176, 133, 255),
   },
   colors: {
     bg: {
-      base: { r: 19, g: 22, b: 33 },
-      elevated: { r: 28, g: 31, b: 46 },
-      overlay: { r: 37, g: 41, b: 60 },
-      subtle: { r: 24, g: 27, b: 40 },
+      base: rgb(19, 22, 33),
+      elevated: rgb(28, 31, 46),
+      overlay: rgb(37, 41, 60),
+      subtle: rgb(24, 27, 40),
     },
     fg: {
-      primary: { r: 244, g: 246, b: 252 },
-      secondary: { r: 202, g: 185, b: 252 },
-      muted: { r: 131, g: 146, b: 186 },
-      inverse: { r: 19, g: 22, b: 33 },
+      primary: rgb(244, 246, 252),
+      secondary: rgb(202, 185, 252),
+      muted: rgb(131, 146, 186),
+      inverse: rgb(19, 22, 33),
     },
     accent: {
-      primary: { r: 176, g: 133, b: 255 },
-      secondary: { r: 129, g: 235, b: 255 },
-      tertiary: { r: 119, g: 255, b: 196 },
+      primary: rgb(176, 133, 255),
+      secondary: rgb(129, 235, 255),
+      tertiary: rgb(119, 255, 196),
     },
-    info: { r: 129, g: 235, b: 255 },
-    success: { r: 110, g: 249, b: 174 },
-    warning: { r: 255, g: 207, b: 124 },
-    error: { r: 255, g: 118, b: 132 },
+    info: rgb(129, 235, 255),
+    success: rgb(110, 249, 174),
+    warning: rgb(255, 207, 124),
+    error: rgb(255, 118, 132),
     selected: {
-      bg: { r: 68, g: 76, b: 112 },
-      fg: { r: 244, g: 246, b: 252 },
+      bg: rgb(68, 76, 112),
+      fg: rgb(244, 246, 252),
     },
     disabled: {
-      fg: { r: 99, g: 111, b: 146 },
-      bg: { r: 28, g: 31, b: 46 },
+      fg: rgb(99, 111, 146),
+      bg: rgb(28, 31, 46),
     },
     diagnostic: {
-      error: { r: 255, g: 118, b: 132 },
-      warning: { r: 255, g: 207, b: 124 },
-      info: { r: 129, g: 235, b: 255 },
-      hint: { r: 206, g: 158, b: 255 },
+      error: rgb(255, 118, 132),
+      warning: rgb(255, 207, 124),
+      info: rgb(129, 235, 255),
+      hint: rgb(206, 158, 255),
     },
     focus: {
-      ring: { r: 176, g: 133, b: 255 },
-      bg: { r: 64, g: 57, b: 96 },
+      ring: rgb(176, 133, 255),
+      bg: rgb(64, 57, 96),
     },
     border: {
-      subtle: { r: 43, g: 49, b: 71 },
-      default: { r: 72, g: 81, b: 116 },
-      strong: { r: 104, g: 115, b: 156 },
+      subtle: rgb(43, 49, 71),
+      default: rgb(72, 81, 116),
+      strong: rgb(104, 115, 156),
     },
   },
 });
@@ -168,52 +168,52 @@ const RED_ALERT_THEME = extendTheme(draculaTheme, {
   focusIndicator: {
     bold: true,
     underline: false,
-    focusRingColor: { r: 255, g: 112, b: 112 },
+    focusRingColor: rgb(255, 112, 112),
   },
   colors: {
     bg: {
-      base: { r: 24, g: 12, b: 19 },
-      elevated: { r: 34, g: 15, b: 24 },
-      overlay: { r: 46, g: 21, b: 32 },
-      subtle: { r: 29, g: 13, b: 22 },
+      base: rgb(24, 12, 19),
+      elevated: rgb(34, 15, 24),
+      overlay: rgb(46, 21, 32),
+      subtle: rgb(29, 13, 22),
     },
     fg: {
-      primary: { r: 255, g: 238, b: 242 },
-      secondary: { r: 244, g: 190, b: 205 },
-      muted: { r: 170, g: 122, b: 139 },
-      inverse: { r: 24, g: 12, b: 19 },
+      primary: rgb(255, 238, 242),
+      secondary: rgb(244, 190, 205),
+      muted: rgb(170, 122, 139),
+      inverse: rgb(24, 12, 19),
     },
     accent: {
-      primary: { r: 255, g: 114, b: 144 },
-      secondary: { r: 255, g: 182, b: 120 },
-      tertiary: { r: 255, g: 220, b: 146 },
+      primary: rgb(255, 114, 144),
+      secondary: rgb(255, 182, 120),
+      tertiary: rgb(255, 220, 146),
     },
-    success: { r: 134, g: 247, b: 176 },
-    warning: { r: 255, g: 181, b: 112 },
-    error: { r: 255, g: 93, b: 117 },
-    info: { r: 255, g: 141, b: 153 },
+    success: rgb(134, 247, 176),
+    warning: rgb(255, 181, 112),
+    error: rgb(255, 93, 117),
+    info: rgb(255, 141, 153),
     selected: {
-      bg: { r: 82, g: 34, b: 52 },
-      fg: { r: 255, g: 238, b: 242 },
+      bg: rgb(82, 34, 52),
+      fg: rgb(255, 238, 242),
     },
     disabled: {
-      fg: { r: 142, g: 96, b: 112 },
-      bg: { r: 34, g: 15, b: 24 },
+      fg: rgb(142, 96, 112),
+      bg: rgb(34, 15, 24),
     },
     diagnostic: {
-      error: { r: 255, g: 93, b: 117 },
-      warning: { r: 255, g: 181, b: 112 },
-      info: { r: 255, g: 141, b: 153 },
-      hint: { r: 255, g: 203, b: 133 },
+      error: rgb(255, 93, 117),
+      warning: rgb(255, 181, 112),
+      info: rgb(255, 141, 153),
+      hint: rgb(255, 203, 133),
     },
     focus: {
-      ring: { r: 255, g: 112, b: 112 },
-      bg: { r: 76, g: 35, b: 50 },
+      ring: rgb(255, 112, 112),
+      bg: rgb(76, 35, 50),
     },
     border: {
-      subtle: { r: 86, g: 45, b: 61 },
-      default: { r: 124, g: 65, b: 86 },
-      strong: { r: 172, g: 86, b: 112 },
+      subtle: rgb(86, 45, 61),
+      default: rgb(124, 65, 86),
+      strong: rgb(172, 86, 112),
     },
   },
 });
@@ -244,18 +244,38 @@ function clampChannel(value: number): number {
   return Math.max(0, Math.min(255, Math.round(value)));
 }
 
-function blend(a: Rgb, b: Rgb, weight: number): Rgb {
+type ColorInput = Rgb24;
+
+function packRgb(value: Rgb24): Rgb24 {
+  return (Math.round(value) >>> 0) & 0x00ff_ffff;
+}
+
+function rgbChannel(value: Rgb24, shift: 0 | 8 | 16): number {
+  return (value >>> shift) & 0xff;
+}
+
+function unpackRgb(value: ColorInput): Readonly<{ r: number; g: number; b: number }> {
+  return Object.freeze({
+    r: rgbChannel(value, 16),
+    g: rgbChannel(value, 8),
+    b: rgbChannel(value, 0),
+  });
+}
+
+function blend(a: ColorInput, b: ColorInput, weight: number): Rgb24 {
   const safe = Math.max(0, Math.min(1, weight));
-  return {
-    r: clampChannel(a.r + (b.r - a.r) * safe),
-    g: clampChannel(a.g + (b.g - a.g) * safe),
-    b: clampChannel(a.b + (b.b - a.b) * safe),
-  };
+  const left = unpackRgb(a);
+  const right = unpackRgb(b);
+  return (
+    ((clampChannel(left.r + (right.r - left.r) * safe) & 0xff) << 16) |
+    ((clampChannel(left.g + (right.g - left.g) * safe) & 0xff) << 8) |
+    (clampChannel(left.b + (right.b - left.b) * safe) & 0xff)
+  );
 }
 
-export function toHex(color: Rgb): string {
+export function toHex(color: Rgb24): string {
   const channel = (value: number) => clampChannel(value).toString(16).padStart(2, "0");
-  return `#${channel(color.r)}${channel(color.g)}${channel(color.b)}`;
+  return `#${channel(rgbChannel(color, 16))}${channel(rgbChannel(color, 8))}${channel(rgbChannel(color, 0))}`;
 }
 
 export function cycleThemeName(current: ThemeName): ThemeName {
@@ -285,52 +305,52 @@ export type StarshipStyles = Readonly<{
 
 export type StarshipThemeTokens = Readonly<{
   bg: Readonly<{
-    app: Rgb;
+    app: Rgb24;
     panel: Readonly<{
-      base: Rgb;
-      inset: Rgb;
-      elevated: Rgb;
+      base: Rgb24;
+      inset: Rgb24;
+      elevated: Rgb24;
     }>;
-    modal: Rgb;
+    modal: Rgb24;
   }>;
   border: Readonly<{
-    default: Rgb;
-    muted: Rgb;
-    focus: Rgb;
-    danger: Rgb;
+    default: Rgb24;
+    muted: Rgb24;
+    focus: Rgb24;
+    danger: Rgb24;
   }>;
   text: Readonly<{
-    primary: Rgb;
-    muted: Rgb;
-    dim: Rgb;
+    primary: Rgb24;
+    muted: Rgb24;
+    dim: Rgb24;
   }>;
   accent: Readonly<{
-    info: Rgb;
-    success: Rgb;
-    warn: Rgb;
-    danger: Rgb;
-    brand: Rgb;
+    info: Rgb24;
+    success: Rgb24;
+    warn: Rgb24;
+    danger: Rgb24;
+    brand: Rgb24;
   }>;
   state: Readonly<{
-    selectedBg: Rgb;
-    selectedText: Rgb;
-    hoverBg: Rgb;
-    focusRing: Rgb;
+    selectedBg: Rgb24;
+    selectedText: Rgb24;
+    hoverBg: Rgb24;
+    focusRing: Rgb24;
   }>;
   progress: Readonly<{
-    track: Rgb;
-    fill: Rgb;
+    track: Rgb24;
+    fill: Rgb24;
   }>;
   table: Readonly<{
-    headerBg: Rgb;
-    rowAltBg: Rgb;
-    rowHoverBg: Rgb;
-    rowSelectedBg: Rgb;
+    headerBg: Rgb24;
+    rowAltBg: Rgb24;
+    rowHoverBg: Rgb24;
+    rowSelectedBg: Rgb24;
   }>;
   log: Readonly<{
-    info: Rgb;
-    warn: Rgb;
-    error: Rgb;
+    info: Rgb24;
+    warn: Rgb24;
+    error: Rgb24;
   }>;
 }>;
 
@@ -384,37 +404,37 @@ export function themeTokens(themeName: ThemeName): StarshipThemeTokens {
       : blend(colors.accent.primary, colors.accent.secondary, mode === "day" ? 0.18 : 0.1);
   return Object.freeze({
     bg: Object.freeze({
-      app: colors.bg.base,
+      app: packRgb(colors.bg.base),
       panel: Object.freeze({
         base: panelBase,
         inset: panelInset,
         elevated: panelElevated,
       }),
-      modal: colors.bg.overlay,
+      modal: packRgb(colors.bg.overlay),
     }),
     border: Object.freeze({
-      default: colors.border.default,
-      muted: colors.border.subtle,
-      focus: mode === "alert" ? colors.error : colors.focus.ring,
-      danger: colors.error,
+      default: packRgb(colors.border.default),
+      muted: packRgb(colors.border.subtle),
+      focus: mode === "alert" ? packRgb(colors.error) : packRgb(colors.focus.ring),
+      danger: packRgb(colors.error),
     }),
     text: Object.freeze({
-      primary: colors.fg.primary,
-      muted: colors.fg.secondary,
-      dim: colors.fg.muted,
+      primary: packRgb(colors.fg.primary),
+      muted: packRgb(colors.fg.secondary),
+      dim: packRgb(colors.fg.muted),
     }),
     accent: Object.freeze({
-      info: colors.info,
-      success: colors.success,
-      warn: colors.warning,
-      danger: colors.error,
-      brand: colors.accent.primary,
+      info: packRgb(colors.info),
+      success: packRgb(colors.success),
+      warn: packRgb(colors.warning),
+      danger: packRgb(colors.error),
+      brand: packRgb(colors.accent.primary),
     }),
     state: Object.freeze({
       selectedBg,
-      selectedText: colors.selected.fg,
+      selectedText: packRgb(colors.selected.fg),
       hoverBg,
-      focusRing: mode === "alert" ? colors.error : colors.focus.ring,
+      focusRing: mode === "alert" ? packRgb(colors.error) : packRgb(colors.focus.ring),
     }),
     progress: Object.freeze({
       track: blend(