dreamboard 0.1.21 → 0.1.22

package/dist/runtime-packages/ui-host-runtime/src/components/host-feedback.tsx

@@ -0,0 +1,214 @@
+/**
+ * Host-owned inline feedback stack.
+ *
+ * Visual styling is driven entirely by the active `@dreamboard/ui-sdk`
+ * `Theme` so the stack re-skins with the rest of the host shell. The
+ * earlier implementation relied on raw Tailwind colour classes
+ * (`bg-emerald-500/10`, `text-amber-700`, …) which were untouchable
+ * by the theme tokens.
+ */
+
+import { AlertTriangle, Bell, Clock3, X } from "lucide-react";
+import {
+  intentForVariant,
+  surfaceStyle,
+  useTheme,
+  type ButtonVariant,
+  type Theme,
+} from "@dreamboard/ui-sdk";
+import type { HostFeedback } from "../unified-session-store.js";
+
+export interface HostFeedbackStackProps {
+  feedback: HostFeedback[];
+  onDismiss?: (feedbackId: string) => void;
+  className?: string;
+}
+
+interface StackPresentation {
+  title: string;
+  description: string;
+  variant: Extract<ButtonVariant, "danger" | "warning" | "success" | "info">;
+  icon: typeof AlertTriangle;
+}
+
+function describeFeedback(item: HostFeedback): StackPresentation {
+  switch (item.type) {
+    case "YOUR_TURN": {
+      const description =
+        item.payload.type === "YOUR_TURN" &&
+        item.payload.activePlayers.length > 1
+          ? "You can act with one of your controlled players."
+          : "You can act now.";
+      return {
+        title: "Your turn",
+        description,
+        variant: "success",
+        icon: Bell,
+      };
+    }
+    case "PROMPT_OPENED": {
+      const payload = item.payload;
+      const description =
+        payload.type === "PROMPT_OPENED"
+          ? payload.targetPlayer
+            ? `${payload.title ?? "A prompt is waiting."} (${payload.targetPlayer})`
+            : (payload.title ?? "A prompt is waiting.")
+          : "A prompt is waiting.";
+      return {
+        title: "Response needed",
+        description,
+        variant: "warning",
+        icon: Clock3,
+      };
+    }
+    case "ACTION_REJECTED": {
+      const payload = item.payload;
+      const description =
+        payload.type === "ACTION_REJECTED"
+          ? payload.targetPlayer
+            ? `${payload.reason} (${payload.targetPlayer})`
+            : payload.reason
+          : "Action rejected.";
+      return {
+        title: "Action rejected",
+        description,
+        variant: "danger",
+        icon: AlertTriangle,
+      };
+    }
+  }
+}
+
+interface FeedbackEntryProps {
+  item: HostFeedback;
+  presentation: StackPresentation;
+  theme: Theme;
+  onDismiss?: (feedbackId: string) => void;
+}
+
+function FeedbackEntry({
+  item,
+  presentation,
+  theme,
+  onDismiss,
+}: FeedbackEntryProps) {
+  const intent = intentForVariant(theme, presentation.variant);
+  const Icon = presentation.icon;
+  return (
+    <div
+      role="status"
+      aria-live="polite"
+      style={{
+        ...surfaceStyle(theme, { tone: "card", radius: "lg" }),
+        background: intent.soft,
+        color: intent.onSoft,
+        border: `1px solid ${intent.border}`,
+        boxShadow: theme.elevation.rest,
+        display: "flex",
+        alignItems: "flex-start",
+        gap: theme.space[3],
+        padding: theme.space[3],
+        fontFamily: theme.typography.fontFamily.body,
+      }}
+    >
+      <Icon
+        size={20}
+        strokeWidth={2.5}
+        aria-hidden="true"
+        style={{
+          flexShrink: 0,
+          marginTop: 2,
+          color: intent.solid,
+        }}
+      />
+      <div style={{ flex: 1, minWidth: 0 }}>
+        <div
+          style={{
+            fontFamily: theme.typography.fontFamily.display,
+            fontSize: theme.typography.fontSize.md,
+            fontWeight: theme.typography.fontWeight.bold,
+            lineHeight: theme.typography.lineHeight.tight,
+            color: intent.onSoft,
+          }}
+        >
+          {presentation.title}
+        </div>
+        <div
+          style={{
+            marginTop: theme.space[1],
+            fontSize: theme.typography.fontSize.sm,
+            fontWeight: theme.typography.fontWeight.medium,
+            lineHeight: theme.typography.lineHeight.normal,
+            color: intent.onSoft,
+            opacity: 0.92,
+            wordBreak: "break-word",
+          }}
+        >
+          {presentation.description}
+        </div>
+      </div>
+      {onDismiss ? (
+        <button
+          type="button"
+          aria-label="Dismiss feedback"
+          onClick={() => onDismiss(item.id)}
+          style={{
+            flexShrink: 0,
+            width: 28,
+            height: 28,
+            display: "inline-flex",
+            alignItems: "center",
+            justifyContent: "center",
+            background: "transparent",
+            border: "none",
+            borderRadius: theme.radius.pill,
+            color: intent.onSoft,
+            cursor: "pointer",
+            opacity: 0.7,
+            transition: `opacity ${theme.motion.duration.fast} ${theme.motion.easing.out}`,
+          }}
+          onMouseEnter={(event) => {
+            event.currentTarget.style.opacity = "1";
+          }}
+          onMouseLeave={(event) => {
+            event.currentTarget.style.opacity = "0.7";
+          }}
+        >
+          <X size={16} aria-hidden="true" />
+        </button>
+      ) : null}
+    </div>
+  );
+}
+
+export function HostFeedbackStack({
+  feedback,
+  onDismiss,
+  className,
+}: HostFeedbackStackProps) {
+  const theme = useTheme();
+  if (feedback.length === 0) {
+    return null;
+  }
+
+  return (
+    <div
+      className={className}
+      style={{
+        display: "flex",
+        flexDirection: "column",
+        gap: theme.space[2],
+      }}
+    >
+      {[...feedback].reverse().map((item) => (
+        <FeedbackEntry
+          key={item.id}
+          item={item}
+          presentation={describeFeedback(item)}
+          theme={theme}
+          onDismiss={onDismiss}
+        />
+      ))}
+    </div>
+  );
+}

package/dist/runtime-packages/ui-host-runtime/src/components/host-session-metadata.tsx

@@ -0,0 +1,135 @@
+import { useEffect, useState } from "react";
+import { Check, Copy } from "lucide-react";
+
+type HostMetaField = "gameId" | "sessionId" | "shortCode";
+
+export interface HostSessionMetadataProps {
+  gameId: string;
+  sessionId: string;
+  shortCode: string;
+  className?: string;
+}
+
+export function HostSessionMetadata({
+  gameId,
+  sessionId,
+  shortCode,
+  className,
+}: HostSessionMetadataProps) {
+  const [copiedField, setCopiedField] = useState<HostMetaField | null>(null);
+
+  useEffect(() => {
+    if (!copiedField) {
+      return;
+    }
+
+    const timeoutId = window.setTimeout(() => {
+      setCopiedField(null);
+    }, 1600);
+
+    return () => {
+      window.clearTimeout(timeoutId);
+    };
+  }, [copiedField]);
+
+  const handleCopyMeta = async (field: HostMetaField, value: string) => {
+    if (!value || !navigator.clipboard?.writeText) {
+      return;
+    }
+
+    try {
+      await navigator.clipboard.writeText(value);
+      setCopiedField(field);
+    } catch {
+      // Ignore clipboard failures; the button remains readable.
+    }
+  };
+
+  return (
+    <dl className={className ?? "space-y-3 text-sm"}>
+      <HostSessionMetaRow
+        label="Game ID"
+        value={gameId}
+        copied={copiedField === "gameId"}
+        onCopy={() => void handleCopyMeta("gameId", gameId)}
+        truncate
+      />
+      <HostSessionMetaRow
+        label="Session ID"
+        value={sessionId}
+        copied={copiedField === "sessionId"}
+        onCopy={() => void handleCopyMeta("sessionId", sessionId)}
+        truncate
+      />
+      <HostSessionMetaRow
+        label="Short code"
+        value={shortCode}
+        copied={copiedField === "shortCode"}
+        onCopy={() => void handleCopyMeta("shortCode", shortCode)}
+      />
+    </dl>
+  );
+}
+
+interface HostSessionMetaRowProps {
+  label: string;
+  value: string;
+  copied: boolean;
+  onCopy: () => void;
+  truncate?: boolean;
+}
+
+function HostSessionMetaRow({
+  label,
+  value,
+  copied,
+  onCopy,
+  truncate = false,
+}: HostSessionMetaRowProps) {
+  const displayValue = truncate ? truncateMiddle(value) : value;
+
+  return (
+    <div className="grid grid-cols-[88px_minmax(0,1fr)] items-start gap-3">
+      <dt className="pt-0.5 text-[11px] font-bold uppercase tracking-[0.14em] text-muted-foreground">
+        {label}
+      </dt>
+      <dd className="min-w-0">
+        <button
+          type="button"
+          onClick={onCopy}
+          className={`flex w-full items-center justify-end gap-2 border-[2px] px-2.5 py-2 text-right transition-all ${
+            copied
+              ? "border-[#2d5da1] bg-[#2d5da1] text-white shadow-[2px_2px_0px_0px_#1d3f72]"
+              : "border-border bg-white/85 text-foreground shadow-[2px_2px_0px_0px_#2d2d2d] hover:-translate-y-[1px] hover:bg-[#fff9c4]"
+          } wobbly-border-md`}
+          title={`Copy ${label}`}
+        >
+          <span className="min-w-0 flex-1 truncate font-mono text-[12px] font-bold sm:text-[13px]">
+            {displayValue}
+          </span>
+          <span className="inline-flex shrink-0 items-center gap-1 text-[10px] font-bold uppercase tracking-[0.14em]">
+            {copied ? (
+              <>
+                <Check className="h-3.5 w-3.5" />
+                Copied
+              </>
+            ) : (
+              <>
+                <Copy className="h-3.5 w-3.5" />
+                Copy
+              </>
+            )}
+          </span>
+        </button>
+      </dd>
+    </div>
+  );
+}
+
+function truncateMiddle(value: string, leading = 12, trailing = 8): string {
+  if (value.length <= leading + trailing + 3) {
+    return value;
+  }
+
+  return `${value.slice(0, leading)}...${value.slice(-trailing)}`;
+}

package/dist/runtime-packages/ui-host-runtime/src/components/index.ts

@@ -0,0 +1,5 @@
+export * from "./host-controls.js";
+export * from "./host-feedback.js";
+export * from "./host-feedback-toaster.js";
+export * from "./host-session-metadata.js";
+export * from "./perf-overlay.js";

package/dist/runtime-packages/ui-host-runtime/src/components/perf-overlay.tsx

@@ -0,0 +1,194 @@
+import { useEffect, useState } from "react";
+import {
+  PERF_MARK_NAMES,
+  clearPerfEntries,
+  getPerfEntries,
+  isPerfEnabled,
+  type PerfEntry,
+} from "../perf.js";
+
+/**
+ * Tier-0 input-latency HUD.
+ *
+ * Enabled when {@link isPerfEnabled} returns true (dev build or
+ * `localStorage.dreamboard.perf = 1`) AND the URL contains `?perf=1`.
+ * The explicit query flag keeps the overlay off in the normal dev
+ * experience; flip it on for a targeted benchmarking session.
+ *
+ * Shared by `apps/web` (real game sessions) and `apps/dreamboard-cli`
+ * (`dreamboard dev` local host) so both surfaces expose the same HUD
+ * against the same `clientActionId`-keyed ring buffer.
+ */
+const REFRESH_INTERVAL_MS = 500;
+const MAX_ROWS = 10;
+
+interface RowStats {
+  clientActionId: string;
+  totalMs: number | null;
+  serverMs: number | null;
+  postAckTailMs: number | null;
+  sseMs: number | null;
+  renderMs: number | null;
+  version: number | undefined;
+  syncId: number | undefined;
+}
+
+function firstMarkMs(entry: PerfEntry, name: string): number | null {
+  const mark = entry.marks.find((m) => m.name === name);
+  return mark ? mark.timestampMs : null;
+}
+
+function deltaMs(a: number | null, b: number | null): number | null {
+  if (a === null || b === null) return null;
+  return Math.round((b - a) * 10) / 10;
+}
+
+function toRowStats(entry: PerfEntry): RowStats {
+  const t0 = firstMarkMs(entry, PERF_MARK_NAMES.T0_CLICK);
+  const t2 = firstMarkMs(entry, PERF_MARK_NAMES.T2_HTTP_SENT);
+  const t3 = firstMarkMs(entry, PERF_MARK_NAMES.T3_HTTP_RESPONSE);
+  const t4 = firstMarkMs(entry, PERF_MARK_NAMES.T4_SSE_RECEIVED);
+  const t7 = firstMarkMs(entry, PERF_MARK_NAMES.T7_STATE_SYNC_RECEIVED);
+  const t8 = firstMarkMs(entry, PERF_MARK_NAMES.T8_RENDER_COMMIT);
+  return {
+    clientActionId: entry.clientActionId,
+    totalMs: deltaMs(t0, t8),
+    serverMs: deltaMs(t2, t3),
+    postAckTailMs: deltaMs(t3, t8),
+    sseMs: deltaMs(t3, t4),
+    renderMs: deltaMs(t7, t8),
+    version: entry.version,
+    syncId: entry.syncId,
+  };
+}
+
+function formatMs(value: number | null): string {
+  if (value === null) return "—";
+  return `${value.toFixed(1)}ms`;
+}
+
+function formatActionId(actionId: string): string {
+  return actionId.length > 8 ? `${actionId.slice(0, 8)}…` : actionId;
+}
+
+function usePerfOverlayEnabled(): boolean {
+  const [enabled, setEnabled] = useState(false);
+  useEffect(() => {
+    if (typeof window === "undefined") return;
+    if (!isPerfEnabled()) {
+      setEnabled(false);
+      return;
+    }
+    const check = () => {
+      const params = new URLSearchParams(window.location.search);
+      setEnabled(params.get("perf") === "1");
+    };
+    check();
+    window.addEventListener("popstate", check);
+    return () => window.removeEventListener("popstate", check);
+  }, []);
+  return enabled;
+}
+
+export const PerfOverlay: React.FC = () => {
+  const enabled = usePerfOverlayEnabled();
+  const [rows, setRows] = useState<RowStats[]>([]);
+
+  useEffect(() => {
+    if (!enabled) return;
+    const refresh = () => {
+      const entries = getPerfEntries();
+      const sliced = entries.slice(-MAX_ROWS).reverse();
+      setRows(sliced.map(toRowStats));
+    };
+    refresh();
+    const handle = window.setInterval(refresh, REFRESH_INTERVAL_MS);
+    return () => window.clearInterval(handle);
+  }, [enabled]);
+
+  if (!enabled) return null;
+
+  return (
+    <div
+      className="fixed bottom-4 right-4 z-[9999] max-w-[640px] rounded-md border border-slate-700 bg-slate-900/90 p-3 font-mono text-[11px] text-slate-100 shadow-lg backdrop-blur"
+      data-testid="perf-overlay"
+    >
+      <div className="mb-2 flex items-center justify-between gap-3">
+        <span className="font-bold uppercase tracking-wider text-emerald-300">
+          Tier-0 Input Perf
+        </span>
+        <div className="flex items-center gap-2">
+          <button
+            type="button"
+            className="rounded border border-slate-600 px-2 py-0.5 text-[10px] uppercase hover:bg-slate-700"
+            onClick={() => {
+              clearPerfEntries();
+              setRows([]);
+            }}
+          >
+            Clear
+          </button>
+          <button
+            type="button"
+            className="rounded border border-slate-600 px-2 py-0.5 text-[10px] uppercase hover:bg-slate-700"
+            onClick={() => {
+              // eslint-disable-next-line no-console
+              console.table(getPerfEntries());
+            }}
+          >
+            Dump
+          </button>
+        </div>
+      </div>
+      {rows.length === 0 ? (
+        <div className="py-2 text-slate-400">
+          No samples yet. Submit an action to populate the HUD.
+        </div>
+      ) : (
+        <table className="w-full border-collapse">
+          <thead className="text-slate-400">
+            <tr>
+              <th className="pr-2 text-left font-semibold">action</th>
+              <th className="pr-2 text-right font-semibold">v</th>
+              <th className="pr-2 text-right font-semibold">total</th>
+              <th className="pr-2 text-right font-semibold">server</th>
+              <th className="pr-2 text-right font-semibold">post-ack</th>
+              <th className="pr-2 text-right font-semibold">sse</th>
+              <th className="text-right font-semibold">render</th>
+            </tr>
+          </thead>
+          <tbody>
+            {rows.map((row) => (
+              <tr
+                key={row.clientActionId}
+                className="border-t border-slate-800 align-top"
+              >
+                <td className="pr-2 text-slate-300">
+                  {formatActionId(row.clientActionId)}
+                </td>
+                <td className="pr-2 text-right text-slate-400">
+                  {row.version ?? "—"}
+                </td>
+                <td className="pr-2 text-right text-emerald-200">
+                  {formatMs(row.totalMs)}
+                </td>
+                <td className="pr-2 text-right text-slate-200">
+                  {formatMs(row.serverMs)}
+                </td>
+                <td className="pr-2 text-right text-amber-200">
+                  {formatMs(row.postAckTailMs)}
+                </td>
+                <td className="pr-2 text-right text-slate-200">
+                  {formatMs(row.sseMs)}
+                </td>
+                <td className="text-right text-slate-200">
+                  {formatMs(row.renderMs)}
+                </td>
+              </tr>
+            ))}
+          </tbody>
+        </table>
+      )}
+    </div>
+  );
+};

package/dist/runtime-packages/ui-host-runtime/src/host-controls.tsx

@@ -0,0 +1 @@
+export * from "./components/host-controls.js";

package/dist/runtime-packages/ui-host-runtime/src/host-feedback.tsx

@@ -0,0 +1 @@
+export * from "./components/host-feedback.js";