create-rezi 0.1.0-alpha.38 → 0.1.0-alpha.39

package/README.md

@@ -37,8 +37,8 @@ npm create rezi my-app -- --template dashboard
 npm create rezi my-app -- --template stress-test
 npm create rezi my-app -- --template cli-tool
 npm create rezi my-app -- --template animation-lab
-npm create rezi my-app -- --template minimal
 npm create rezi my-app -- --template starship
+npm create rezi my-app -- --template minimal
 ```
 
 List templates and highlights from the CLI:

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "create-rezi",
-  "version": "0.1.0-alpha.38",
+  "version": "0.1.0-alpha.39",
   "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.38"
+    "@rezi-ui/testkit": "0.1.0-alpha.39"
   }
 }

package/templates/starship/src/__tests__/render.test.ts

@@ -66,7 +66,8 @@ test("bridge screen renders core markers", () => {
 
   assert.match(output, /USS Rezi/);
   assert.match(output, /Bridge Overview/);
-  assert.match(output, /Command Deck/);
+  assert.match(output, /Navigation/);
+  assert.match(output, /Route Health/);
 });
 
 test("engineering screen renders core markers", () => {
@@ -77,7 +78,20 @@ test("engineering screen renders core markers", () => {
     .toText();
 
   assert.match(output, /Engineering Deck/);
-  assert.match(output, /Power and Thermal Control/);
+  assert.match(output, /Fleet Active/);
+  assert.match(output, /Route Health/);
+});
+
+test("engineering screen hides secondary panels at medium height", () => {
+  const state = createInitialState(0);
+  const renderer = createTestRenderer({ viewport: { cols: 160, rows: 46 } });
+  const output = renderer
+    .render(renderEngineeringScreen(createContext(state, "engineering"), createDeps()))
+    .toText();
+
+  assert.match(output, /Engineering Deck/);
+  assert.doesNotMatch(output, /Subsystem Tree/);
+  assert.doesNotMatch(output, /Subsystem Diagnostics/);
 });
 
 test("crew screen renders loading/ops markers", () => {
@@ -88,7 +102,8 @@ test("crew screen renders loading/ops markers", () => {
     .toText();
 
   assert.match(output, /Crew Manifest/);
-  assert.match(output, /Crew Command/);
+  assert.match(output, /Fleet Active/);
+  assert.match(output, /Navigation/);
 });
 
 test("comms screen renders control markers", () => {
@@ -99,8 +114,8 @@ test("comms screen renders control markers", () => {
     .toText();
 
   assert.match(output, /Communications/);
-  assert.match(output, /Channel Controls/);
-  assert.match(output, /Open Hail/);
+  assert.match(output, /Fleet Active/);
+  assert.match(output, /Palette/);
 });
 
 test("settings screen renders form fields", () => {
@@ -111,8 +126,8 @@ test("settings screen renders form fields", () => {
     .toText();
 
   assert.match(output, /Ship Settings/);
-  assert.match(output, /Ship Name/);
-  assert.match(output, /Alert Threshold/);
+  assert.match(output, /Theme Night Shift/);
+  assert.match(output, /Navigation/);
 });
 
 test("cargo screen renders manifest widgets", () => {
@@ -123,5 +138,6 @@ test("cargo screen renders manifest widgets", () => {
     .toText();
 
   assert.match(output, /Cargo Hold/);
-  assert.match(output, /Manifest/);
+  assert.match(output, /Fleet Active/);
+  assert.match(output, /Route Health/);
 });

package/templates/starship/src/helpers/debug.ts

@@ -0,0 +1,22 @@
+import { appendFileSync } from "node:fs";
+
+const DEBUG_ENABLED = process.env.REZI_STARSHIP_DEBUG === "1";
+const DEBUG_LOG_PATH = process.env.REZI_STARSHIP_DEBUG_LOG ?? "/tmp/rezi-starship-layout.log";
+const lastSnapshotByScope = new Map<string, string>();
+
+export function debugSnapshot(scope: string, payload: Readonly<Record<string, unknown>>): void {
+  if (!DEBUG_ENABLED) return;
+
+  const serialized = JSON.stringify(payload);
+  if (lastSnapshotByScope.get(scope) === serialized) return;
+  lastSnapshotByScope.set(scope, serialized);
+
+  appendFileSync(
+    DEBUG_LOG_PATH,
+    `${JSON.stringify({
+      ts: new Date().toISOString(),
+      scope,
+      ...payload,
+    })}\n`,
+  );
+}

package/templates/starship/src/helpers/layout.ts

@@ -0,0 +1,66 @@
+import type { RouteId } from "../types.js";
+
+export type ResponsiveLayout = Readonly<{
+  width: number;
+  height: number;
+  wide: boolean;
+  stackRightRail: boolean;
+  compactSidebar: boolean;
+  hideNonCritical: boolean;
+  sidebarWidth: number;
+  crewMasterWidth: number;
+  chartWidth: number;
+  canvasWidth: number;
+}>;
+
+export type ViewportSnapshot = Readonly<{
+  width: number;
+  height: number;
+}>;
+
+function clamp(value: number, min: number, max: number): number {
+  if (value < min) return min;
+  if (value > max) return max;
+  return value;
+}
+
+export function resolveLayout(viewport: ViewportSnapshot): ResponsiveLayout {
+  const width = Math.max(40, Math.floor(viewport.width));
+  const height = Math.max(18, Math.floor(viewport.height));
+  const wide = width >= 120;
+  const stackRightRail = width < 120;
+  const compactSidebar = width < 90;
+  const hideNonCritical = width < 80 || height < 26;
+  const sidebarWidth = compactSidebar ? 18 : 34;
+
+  return Object.freeze({
+    width,
+    height,
+    wide,
+    stackRightRail,
+    compactSidebar,
+    hideNonCritical,
+    sidebarWidth,
+    crewMasterWidth: wide ? 60 : 100,
+    chartWidth: clamp(Math.floor(width * (wide ? 0.5 : 0.9)), 28, 132),
+    canvasWidth: clamp(Math.floor(width * (wide ? 0.48 : 0.9)), 26, 116),
+  });
+}
+
+const COMPACT_ROUTE_LABEL: Readonly<Record<RouteId, string>> = Object.freeze({
+  bridge: "Br",
+  engineering: "Eng",
+  crew: "Crew",
+  comms: "Com",
+  cargo: "Cargo",
+  settings: "Set",
+});
+
+export function routeLabel(routeId: RouteId, title: string, compact: boolean): string {
+  if (!compact) return title;
+  return COMPACT_ROUTE_LABEL[routeId] ?? title;
+}
+
+export function padLabel(label: string, width: number): string {
+  return label.length >= width ? label.slice(0, width) : label.padEnd(width, " ");
+}

package/templates/starship/src/helpers/state.ts

@@ -179,6 +179,23 @@ function defaultTelemetry(): TelemetrySnapshot {
 }
 
 export function createInitialState(nowMs = Date.now()): StarshipState {
+  const viewportCols = 120;
+  const viewportRows = 40;
+  return createInitialStateWithViewport(nowMs, {
+    cols: viewportCols,
+    rows: viewportRows,
+  });
+}
+
+type InitialViewport = Readonly<{
+  cols: number;
+  rows: number;
+}>;
+
+export function createInitialStateWithViewport(
+  nowMs: number,
+  viewport: InitialViewport,
+): StarshipState {
   const telemetry = defaultTelemetry();
   const telemetryHistory = Object.freeze(
     Array.from({ length: TELEMETRY_HISTORY_LIMIT }, (_, index) =>
@@ -199,13 +216,15 @@ export function createInitialState(nowMs = Date.now()): StarshipState {
     tick: 0,
     nowMs,
     alertLevel: "green",
-    themeName: "day",
+    themeName: "night",
     showHelp: false,
     showCommandPalette: false,
     commandQuery: "",
     commandIndex: 0,
     autopilot: true,
     paused: false,
+    viewportCols: clampInt(viewport.cols, 40, 300),
+    viewportRows: clampInt(viewport.rows, 18, 200),
 
     telemetry,
     telemetryHistory,
@@ -328,6 +347,14 @@ function applyCommand(state: StarshipState, commandId: string): StarshipState {
 }
 
 export function reduceStarshipState(state: StarshipState, action: StarshipAction): StarshipState {
+  if (action.type === "set-viewport") {
+    return freezeState({
+      ...state,
+      viewportCols: clampInt(action.cols, 40, 300),
+      viewportRows: clampInt(action.rows, 18, 200),
+    });
+  }
+
   if (action.type === "tick") {
     const tick = state.tick + 1;
     const telemetry = state.paused ? state.telemetry : evolveTelemetry(state, tick);

package/templates/starship/src/main.ts

@@ -1,7 +1,12 @@
 import { exit } from "node:process";
 import { createNodeApp } from "@rezi-ui/node";
+import { debugSnapshot } from "./helpers/debug.js";
 import { resolveStarshipCommand } from "./helpers/keybindings.js";
-import { createInitialState, filteredMessages, reduceStarshipState } from "./helpers/state.js";
+import {
+  createInitialStateWithViewport,
+  filteredMessages,
+  reduceStarshipState,
+} from "./helpers/state.js";
 import { STARSHIP_ROUTES, createStarshipRoutes } from "./screens/index.js";
 import { themeSpec } from "./theme.js";
 import type { RouteDeps, RouteId, StarshipAction, StarshipState } from "./types.js";
@@ -10,18 +15,36 @@ const UI_FPS_CAP = 30;
 const TICK_MS = 800;
 const TOAST_PRUNE_MS = 3000;
 
-const initialState = createInitialState();
+const initialState = createInitialStateWithViewport(Date.now(), {
+  cols: process.stdout.columns ?? 120,
+  rows: process.stdout.rows ?? 40,
+});
 const enableHsr = process.argv.includes("--hsr") || process.env.REZI_HSR === "1";
 const hasInteractiveTty = Boolean(process.stdin.isTTY && process.stdout.isTTY);
 if (!hasInteractiveTty && process.env.ZIREAEL_POSIX_PIPE_MODE === undefined) {
   process.env.ZIREAEL_POSIX_PIPE_MODE = "1";
 }
+debugSnapshot("runtime.bootstrap", {
+  argv: process.argv.slice(2),
+  cwd: process.cwd(),
+  pid: process.pid,
+  node: process.version,
+  stdinIsTty: Boolean(process.stdin.isTTY),
+  stdoutIsTty: Boolean(process.stdout.isTTY),
+  cols: process.stdout.columns ?? null,
+  rows: process.stdout.rows ?? null,
+  enableHsr,
+});
 
 // biome-ignore lint/style/useConst: circular bootstrap wiring requires post-declaration assignment
 let app!: ReturnType<typeof createNodeApp<StarshipState>>;
 let stopping = false;
 let tickTimer: ReturnType<typeof setInterval> | null = null;
 let toastTimer: ReturnType<typeof setInterval> | null = null;
+let lastViewport = {
+  cols: initialState.viewportCols,
+  rows: initialState.viewportRows,
+};
 
 type CreateRoutesFn = typeof createStarshipRoutes;
 type RoutesModule = Readonly<{ createStarshipRoutes?: CreateRoutesFn }>;
@@ -44,6 +67,24 @@ function dispatch(action: StarshipAction): void {
   }
 }
 
+function syncViewport(cols: number, rows: number): void {
+  if (cols === lastViewport.cols && rows === lastViewport.rows) return;
+  lastViewport = { cols, rows };
+  debugSnapshot("runtime.viewport", {
+    cols,
+    rows,
+    route: currentRouteId(),
+  });
+  dispatch({ type: "set-viewport", cols, rows });
+}
+
+function syncViewportFromStdout(): void {
+  if (!process.stdout.isTTY) return;
+  const cols = process.stdout.columns ?? lastViewport.cols;
+  const rows = process.stdout.rows ?? lastViewport.rows;
+  syncViewport(cols, rows);
+}
+
 function currentRouteId(): RouteId {
   const routeId = app.router?.currentRoute().id;
   if (routeId === "bridge") return "bridge";
@@ -59,7 +100,8 @@ function navigate(routeId: RouteId): void {
   const router = app.router;
   if (!router) return;
   if (router.currentRoute().id === routeId) return;
-  router.navigate(routeId);
+  // Top-level deck switches are peer navigation; replace avoids unbounded breadcrumb growth.
+  router.replace(routeId);
 }
 
 function navigateDeckOffset(offset: 1 | -1): void {
@@ -111,6 +153,12 @@ async function stopApp(code = 0): Promise<void> {
 
 function applyCommand(command: ReturnType<typeof resolveStarshipCommand>): void {
   if (!command) return;
+  debugSnapshot("runtime.command", {
+    command,
+    route: currentRouteId(),
+    viewportCols: lastViewport.cols,
+    viewportRows: lastViewport.rows,
+  });
 
   if (command === "quit") {
     void stopApp(0);
@@ -371,21 +419,45 @@ function bindKeys(): void {
   ) as Record<string, () => void>;
 
   bindingMap.escape = () => {
-    const state = app.getState();
-    if (state.showHelp) {
-      dispatch({ type: "toggle-help" });
-      return;
-    }
-    if (state.showCommandPalette) {
-      dispatch({ type: "toggle-command-palette" });
-      return;
-    }
-    if (state.showHailDialog) {
-      dispatch({ type: "toggle-hail-dialog" });
-      return;
-    }
-    if (state.showResetDialog) {
-      dispatch({ type: "toggle-reset-dialog" });
+    let nextTheme = initialState.themeName;
+    let themeChanged = false;
+    app.update((state) => {
+      if (state.showHelp) {
+        const next = reduceStarshipState(state, { type: "toggle-help" });
+        if (next.themeName !== state.themeName) {
+          nextTheme = next.themeName;
+          themeChanged = true;
+        }
+        return next;
+      }
+      if (state.showCommandPalette) {
+        const next = reduceStarshipState(state, { type: "toggle-command-palette" });
+        if (next.themeName !== state.themeName) {
+          nextTheme = next.themeName;
+          themeChanged = true;
+        }
+        return next;
+      }
+      if (state.showHailDialog) {
+        const next = reduceStarshipState(state, { type: "toggle-hail-dialog" });
+        if (next.themeName !== state.themeName) {
+          nextTheme = next.themeName;
+          themeChanged = true;
+        }
+        return next;
+      }
+      if (state.showResetDialog) {
+        const next = reduceStarshipState(state, { type: "toggle-reset-dialog" });
+        if (next.themeName !== state.themeName) {
+          nextTheme = next.themeName;
+          themeChanged = true;
+        }
+        return next;
+      }
+      return state;
+    });
+    if (themeChanged) {
+      app.setTheme(themeSpec(nextTheme).theme);
     }
   };
 
@@ -394,6 +466,13 @@ function bindKeys(): void {
 
 const routes = buildRoutes(createStarshipRoutes);
 
+debugSnapshot("runtime.app.create", {
+  routeCount: routes.length,
+  initialRoute: "bridge",
+  fpsCap: UI_FPS_CAP,
+  executionMode: "inline",
+});
+
 app = createNodeApp({
   initialState,
   routes,
@@ -421,24 +500,26 @@ app = createNodeApp({
 });
 
 bindKeys();
+syncViewportFromStdout();
 
 app.onEvent((event) => {
   if (event.kind === "fatal") {
+    debugSnapshot("runtime.fatal", {
+      route: currentRouteId(),
+      viewportCols: lastViewport.cols,
+      viewportRows: lastViewport.rows,
+    });
     void stopApp(1);
     return;
   }
 
   if (event.kind === "engine" && event.event.kind === "resize") {
-    dispatch({
-      type: "add-toast",
-      toast: {
-        id: `resize-${event.event.cols}x${event.event.rows}-${Date.now()}`,
-        message: `Viewport ${event.event.cols}x${event.event.rows}`,
-        level: "info",
-        timestamp: Date.now(),
-        durationMs: 1800,
-      },
+    debugSnapshot("runtime.resize.event", {
+      cols: event.event.cols,
+      rows: event.event.rows,
+      route: currentRouteId(),
     });
+    syncViewport(event.event.cols, event.event.rows);
   }
 });
 
@@ -450,6 +531,7 @@ process.once("SIGINT", onSignal);
 process.once("SIGTERM", onSignal);
 
 tickTimer = setInterval(() => {
+  syncViewportFromStdout();
   dispatch({ type: "tick", nowMs: Date.now() });
 }, TICK_MS);
 
@@ -457,5 +539,11 @@ toastTimer = setInterval(() => {
   dispatch({ type: "prune-toasts", nowMs: Date.now() });
 }, TOAST_PRUNE_MS);
 
+debugSnapshot("runtime.app.start", {
+  route: currentRouteId(),
+  viewportCols: lastViewport.cols,
+  viewportRows: lastViewport.rows,
+});
+
 await app.start();
 await new Promise<void>(() => {});