dreamboard 0.1.25 → 0.1.26

package/dist/dev-host/dev-api-proxy-plugin.ts

@@ -31,8 +31,13 @@ import type { Plugin } from "vite";
 import {
   DEFAULT_REFRESH_WINDOW_MS,
   ensureFreshAccessToken,
+  getAccessTokenExpiry,
 } from "../auth/refresh-coordinator.js";
 import { PermanentRefreshError } from "../auth/refresh-error.js";
+import {
+  repairLocalDevSession,
+  shouldRepairLocalDevSession,
+} from "../auth/local-dev-session.js";
 import type { ResolvedConfig } from "../types.js";
 
 export type ResolvedBearerOk = {
@@ -259,11 +264,32 @@ export async function resolveDevBearer(
       case "unchanged":
       case "rotated":
         return { kind: "ok", token: result.credentials.accessToken };
-      case "transient_failure":
+      case "transient_failure": {
+        const expiry = getAccessTokenExpiry(config.authToken);
+        const isExpired = expiry !== null && expiry.getTime() <= Date.now();
+        if (isExpired) {
+          if (shouldRepairLocalDevSession(config)) {
+            const repaired = await repairLocalDevSession();
+            if (repaired) {
+              return { kind: "ok", token: repaired.accessToken };
+            }
+          }
+          return {
+            kind: "permanent_invalid",
+            message: `Access token refresh failed: ${result.message}. Run \`dreamboard login\` to authenticate again.`,
+          };
+        }
         return { kind: "ok", token: config.authToken ?? null };
+      }
     }
   } catch (err) {
     if (err instanceof PermanentRefreshError) {
+      if (shouldRepairLocalDevSession(config)) {
+        const repaired = await repairLocalDevSession();
+        if (repaired) {
+          return { kind: "ok", token: repaired.accessToken };
+        }
+      }
       return { kind: "permanent_invalid", message: err.message };
     }
     throw err;

package/dist/dev-host/dev-author-dom-warnings.ts

@@ -0,0 +1,101 @@
+type ZoneItemElement = Pick<Element, "getAttribute" | "querySelector">;
+
+type ZoneItemRoot = Pick<
+  ParentNode,
+  "querySelectorAll"
+>;
+
+export interface PlayableZoneItemWarning {
+  key: string;
+  message: string;
+}
+
+const PLAYABLE_ZONE_ITEM_SELECTOR =
+  '[data-dreamboard-zone-item][data-playable="true"]';
+const INTERACTION_CARD_INPUT_SELECTOR =
+  "[data-dreamboard-interaction-card-input]";
+
+export function collectPlayableZoneItemWarnings(
+  root: ZoneItemRoot,
+): PlayableZoneItemWarning[] {
+  const warnings: PlayableZoneItemWarning[] = [];
+  for (const item of root.querySelectorAll(PLAYABLE_ZONE_ITEM_SELECTOR)) {
+    const element = item as ZoneItemElement;
+    if (element.querySelector(INTERACTION_CARD_INPUT_SELECTOR)) {
+      continue;
+    }
+
+    const zone = element.getAttribute("data-zone") ?? "unknown";
+    const cardId = element.getAttribute("data-card-id") ?? "unknown";
+    const cardType = element.getAttribute("data-card-type") ?? null;
+    const key = `${zone}:${cardId}`;
+    const cardLabel =
+      cardType && cardType !== cardId
+        ? `'${cardId}' (${cardType})`
+        : `'${cardId}'`;
+    warnings.push({
+      key,
+      message: [
+        `[dreamboard] Playable card ${cardLabel} in zone '${zone}' rendered without an interaction card input.`,
+        "This usually means the UI rendered a raw Card/custom tile instead of <handSurface.Card>.",
+        "Render the surface card consistently and let Dreamboard disable unavailable interactions.",
+      ].join(" "),
+    });
+  }
+  return warnings;
+}
+
+export function installPlayableZoneItemWarnings(options: {
+  root?: Document;
+  warn?: (...args: unknown[]) => void;
+  MutationObserverImpl?: typeof MutationObserver;
+  schedule?: (callback: () => void) => void;
+} = {}): () => void {
+  const root = options.root ?? document;
+  const warn = options.warn ?? console.warn.bind(console);
+  const MutationObserverImpl =
+    options.MutationObserverImpl ?? window.MutationObserver;
+  const schedule =
+    options.schedule ??
+    ((callback) => {
+      window.requestAnimationFrame(callback);
+    });
+  const emitted = new Set<string>();
+  let scheduled = false;
+
+  const scan = () => {
+    scheduled = false;
+    for (const warning of collectPlayableZoneItemWarnings(root)) {
+      if (emitted.has(warning.key)) {
+        continue;
+      }
+      emitted.add(warning.key);
+      warn(warning.message);
+    }
+  };
+
+  const requestScan = () => {
+    if (scheduled) {
+      return;
+    }
+    scheduled = true;
+    schedule(scan);
+  };
+
+  const observer = new MutationObserverImpl(requestScan);
+  observer.observe(root.documentElement, {
+    childList: true,
+    subtree: true,
+    attributes: true,
+    attributeFilter: [
+      "data-dreamboard-zone-item",
+      "data-playable",
+      "data-dreamboard-interaction-card-input",
+    ],
+  });
+  requestScan();
+
+  return () => {
+    observer.disconnect();
+  };
+}

package/dist/dev-host/dev-hmr-guard-plugin.ts

@@ -0,0 +1,47 @@
+import path from "node:path";
+import type { Plugin } from "vite";
+
+export function createDevHmrGuardPlugin(options: {
+  projectRoot: string;
+}): Plugin {
+  return {
+    name: "dreamboard-dev-hmr-guard",
+    handleHotUpdate(context) {
+      if (shouldHandleProjectHotUpdate(options.projectRoot, context.file)) {
+        return undefined;
+      }
+
+      context.server.config.logger.info(
+        `[dreamboard] ignored HMR outside project: ${path.relative(
+          options.projectRoot,
+          context.file,
+        )}`,
+      );
+      return [];
+    },
+  };
+}
+
+export function shouldHandleProjectHotUpdate(
+  projectRoot: string,
+  file: string,
+): boolean {
+  const normalizedProjectRoot = path.resolve(projectRoot);
+  const normalizedFile = path.resolve(file);
+  const relativePath = path.relative(normalizedProjectRoot, normalizedFile);
+  const isInsideProject =
+    relativePath === "" ||
+    (relativePath.length > 0 &&
+      !relativePath.startsWith("..") &&
+      !path.isAbsolute(relativePath));
+
+  if (!isInsideProject) {
+    return false;
+  }
+
+  const pathSegments = relativePath.split(path.sep);
+  return (
+    !pathSegments.includes(".dreamboard") &&
+    !pathSegments.includes("node_modules")
+  );
+}

package/dist/dev-host/dev-host-controller.ts

@@ -183,7 +183,7 @@ export class DevHostController {
       if (preferredPlayerId) {
         this.logger.warn(
           "[DevHost] Failed to bootstrap the requested player selection; retrying with the default player:",
-          error instanceof Error ? error.message : String(error),
+          formatErrorForLog(error),
         );
         this.storage.persistPreferredPlayerId(null);
         try {
@@ -198,7 +198,13 @@ export class DevHostController {
       }
       this.logger.error(
         "[DevHost] Failed to bootstrap the backend session:",
-        error instanceof Error ? error.message : String(error),
+        formatErrorForLog(error),
+      );
+      this.setRuntimeError(
+        convertProblemDetailsToRuntimeError(
+          error,
+          "Failed to bootstrap the backend session.",
+        ),
       );
     }
     this.notify();
@@ -262,7 +268,7 @@ export class DevHostController {
       );
       this.logger.error(
         "[DevHost] Failed to start the backend session:",
-        error instanceof Error ? error.message : String(error),
+        formatErrorForLog(error),
       );
     }
   }
@@ -613,7 +619,7 @@ export class DevHostController {
       }
       this.logger.error(
         "[DevHost] Failed to switch player:",
-        error instanceof Error ? error.message : String(error),
+        formatErrorForLog(error),
       );
       this.setRuntimeError(
         convertProblemDetailsToRuntimeError(
@@ -639,7 +645,13 @@ export class DevHostController {
   }
 }
 
+function formatErrorForLog(error: unknown): string {
+  return error instanceof Error ? error.message : formatConsoleArgs([error]);
+}
+
 type ApiErrorPayload = {
+  error?: string;
+  message?: string;
   title?: string;
   detail?: string;
   status?: number;
@@ -672,9 +684,13 @@ function convertProblemDetailsToRuntimeError(
       code: typeof violation.code === "string" ? violation.code : undefined,
     }));
 
-  const title = payload.title?.trim() || "Game failed to start";
+  const title =
+    payload.title?.trim() ||
+    (payload.error === "session_invalid" ? "Session expired" : "") ||
+    "Game failed to start";
   const summary =
     payload.detail?.trim() ||
+    payload.message?.trim() ||
     (error instanceof Error ? error.message : fallbackMessage);
 
   return {

package/dist/dev-host/host-main.css

@@ -89,94 +89,136 @@ h6 {
   box-shadow: 8px 8px 0 0 #2d2d2d;
 }
 
-.dev-drawer-content {
-  background-color: rgba(247, 239, 220, 0.96);
-  color: #1f2937;
-}
-
-.dev-drawer-surface {
-  background-image:
-    linear-gradient(180deg, rgba(255, 255, 255, 0.32), rgba(255, 255, 255, 0.08)),
-    radial-gradient(rgba(80, 58, 34, 0.09) 1px, transparent 1px);
-  background-size: 100% 100%, 18px 18px;
-  color: #1f2937;
-}
-
-.dev-drawer-header {
-  background-color: rgba(255, 252, 244, 0.96);
-  color: #1f2937;
-}
-
-.dev-drawer-label {
-  background-color: #e5e0d8;
-  color: #6b5a45;
-}
-
-.dev-drawer-session-pill {
-  background-color: #fff3b5;
-  color: #1f2937;
-}
-
-.dev-drawer-session-dot {
-  background-color: #d97706;
-}
-
-.dev-drawer-close {
-  background-color: #fff;
-  color: #6b7280;
-}
-
-.dev-drawer-close:hover {
-  background-color: #e5e0d8;
-}
-
-.dev-drawer-note {
-  background-color: rgba(255, 255, 255, 0.72);
-  color: rgba(31, 41, 55, 0.8);
-}
-
-.dev-drawer-card {
-  background-color: #fffdf7;
-  color: #1f2937;
-}
-
-.dev-drawer-card-title {
-  color: #7a6956;
-}
-
-.dev-drawer-controls-card {
-  background-color: #fff3b5;
-  color: #1f2937;
-}
-
-.dev-drawer-feedback-card {
-  background-color: #fffaf0;
-  color: #1f2937;
-}
-
-.dev-drawer-input {
-  background-color: #fff;
-  color: #1f2937;
-}
-
-.dev-drawer-primary-button {
-  background-color: #1f2937;
+/* Calm secondary CTA inside the dev drawer — the player switcher is
+ * already the panel's single wobbly+shadow stamp, so the primary action
+ * here is intentionally quiet. */
+.dev-calm-button {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  height: 2.5rem;
+  padding: 0 1rem;
+  border-radius: 0.5rem;
+  border: 2px solid #2d2d2d;
+  background-color: #2d2d2d;
   color: #fff8e8;
-}
-
-.dev-drawer-primary-button:hover {
-  background-color: #111827;
-}
-
-.dev-drawer-danger-button {
-  background-color: #ff4d4d;
-  color: #fff;
-}
-
-.dev-drawer-danger-button:hover {
-  background-color: #e60000;
-}
-
-.dev-drawer-toolbar-shell {
-  background-color: rgba(255, 255, 255, 0.72);
+  font-family: var(--font-sans);
+  font-size: 0.875rem;
+  font-weight: 700;
+  letter-spacing: 0.02em;
+  transition:
+    background-color 0.15s ease,
+    transform 0.05s ease;
+}
+
+.dev-calm-button:hover:not(:disabled) {
+  background-color: #1f1f1f;
+}
+
+.dev-calm-button:active:not(:disabled) {
+  transform: translateY(1px);
+}
+
+.dev-calm-button:disabled {
+  opacity: 0.5;
+  cursor: not-allowed;
+}
+
+/* Tame HostHistoryNavigator into a text link inside the dev drawer.
+ *
+ * The upstream Button ships with `wobbly-border-md` + `hard-shadow`
+ * baked into its base classes; twMerge cannot strip custom utilities so
+ * we brute-force a flat link-style treatment with !important on multiple
+ * selector forms. */
+.dev-history-shell button,
+.dev-history-shell [data-slot="button"],
+.dev-history-shell .wobbly-border-md,
+.dev-history-shell .hard-shadow {
+  height: auto !important;
+  padding: 0.25rem 0 !important;
+  background: transparent !important;
+  border: none !important;
+  box-shadow: none !important;
+  border-radius: 0 !important;
+  font-size: 0.75rem !important;
+  font-weight: 700 !important;
+  color: oklch(0.5 0 0) !important;
+  gap: 0.4rem !important;
+  text-transform: uppercase;
+  letter-spacing: 0.12em;
+}
+
+.dev-history-shell button:hover,
+.dev-history-shell [data-slot="button"]:hover {
+  background: transparent !important;
+  color: oklch(0.25 0 0) !important;
+  box-shadow: none !important;
+  transform: none !important;
+}
+
+.dev-history-shell [data-slot="badge"] {
+  background-color: rgba(45, 45, 45, 0.08);
+  color: oklch(0.25 0 0);
+  border-color: transparent;
+  padding: 0 0.4rem;
+  font-size: 0.65rem;
+  letter-spacing: 0;
+}
+
+/* Calm copy buttons inside the Debug fold so they're text-tabular, not
+ * three wobbly stamps. */
+.dev-host-debug-shell button,
+.dev-host-debug-shell .wobbly-border-md,
+.dev-host-debug-shell .hard-shadow {
+  border-radius: 0.375rem !important;
+  box-shadow: none !important;
+  border-width: 1px !important;
+  border-color: rgba(45, 45, 45, 0.12) !important;
+  background-color: transparent !important;
+}
+
+.dev-host-debug-shell button:hover {
+  background-color: rgba(45, 45, 45, 0.04) !important;
+  transform: none !important;
+  box-shadow: none !important;
+}
+
+/* Seed input — pull off the upstream wobbly+thick border in favour of a
+ * calm flat rectangle that matches the rest of the panel chrome. */
+.dev-seed-input {
+  border-radius: 0.5rem !important;
+  border-width: 1.5px !important;
+  border-color: rgba(45, 45, 45, 0.18) !important;
+  background-color: #fff !important;
+  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace !important;
+}
+
+.dev-seed-input:focus,
+.dev-seed-input:focus-visible {
+  border-color: rgba(45, 45, 45, 0.4) !important;
+  box-shadow: 0 0 0 3px rgba(45, 93, 161, 0.12) !important;
+}
+
+/* Edge handle — calm strip at rest, soft glow on hover. */
+.dev-edge-handle .dev-edge-strip {
+  transition:
+    background-color 200ms ease,
+    box-shadow 200ms ease,
+    width 200ms ease,
+    height 200ms ease;
+}
+
+.dev-edge-handle:hover .dev-edge-strip,
+.dev-edge-handle:focus-visible .dev-edge-strip {
+  width: 6px;
+  height: 7rem;
+  background-color: #2d5da1;
+  box-shadow:
+    0 0 0 2px rgba(45, 93, 161, 0.18),
+    0 0 14px 4px rgba(45, 93, 161, 0.55),
+    0 0 28px 8px rgba(45, 93, 161, 0.25);
+}
+
+.dev-edge-handle:focus-visible {
+  outline: none;
 }