@hugpy/video-intelligence-ui 0.1.0

package/src/demo/index.ts

@@ -0,0 +1,43 @@
+// Public surface of the video-intelligence demo layer (canned-only — no live
+// mode; see mode.ts). entry.tsx calls installVideoDemo() ONCE, before anything
+// that could touch the network.
+import { isCanned } from "./mode";
+import { installDemoTransport } from "./demoFetch";
+import { demoClip, demoAudio } from "./fixtures";
+import { seedDemoWorkbench } from "./seed";
+import { addToLibrary, getLibrary } from "../video/mediaLibrary";
+
+/**
+ * Boot the canned demo: install the fetch shim, then seed the workbench so every
+ * station opens with SHOWROOM FLAVOR instead of empty — the worked example (clip +
+ * audio) PLUS sample generations (a completed image gen, a couple of extracted
+ * frames, and one live-feeling in-flight generation; see seed.ts). No-op outside
+ * ?demo=1. Idempotent across in-tab reloads (the library + tracker are
+ * sessionStorage-backed under their demo-namespaced keys — addToLibrary/trackJob
+ * de-dup, so don't double-seed).
+ */
+export function installVideoDemo(): void {
+  if (!isCanned()) return;
+  installDemoTransport();
+  try {
+    if (getLibrary().length === 0) {
+      addToLibrary(demoClip, "demo", "sample clip");
+      addToLibrary(demoAudio, "demo", "sample audio");
+    }
+  } catch {
+    /* library seeding is best-effort — the shim alone still demos */
+  }
+  // Sample gens + one live-feeling in-flight job (its own idempotent guards).
+  seedDemoWorkbench();
+}
+
+export {
+  getDemoConfig,
+  isDemo,
+  isCanned,
+  isEmbedded,
+  type DemoMode,
+  type DemoConfig,
+} from "./mode";
+export { installDemoTransport, uninstallDemoTransport } from "./demoFetch";
+export { default as DemoBanner } from "./DemoBanner";

package/src/demo/mode.ts

@@ -0,0 +1,81 @@
+// Demo-mode configuration for the video-intelligence arm.
+//
+// Mirrors media_intelligence_ui/src/demo/mode.ts with ONE deliberate cut: there
+// is NO live mode here. The video arm's jobs mutate real worker GPUs (ffmpeg,
+// diffusion), so the only demo flavor is the self-contained showroom:
+//
+//   ?demo=1   → CANNED: a window.fetch shim answers every hugpy call from canned
+//               fixtures, and the media library is seeded with a worked example.
+//               Works anywhere — the public brochure, a static host. No backend
+//               is ever contacted.
+//
+//   &embed=1  → embedded inside the dev UI showroom (an <iframe>). The host
+//               provides the demo banner, so the arm suppresses its own.
+//
+// `?demo=live` is intentionally treated as OFF — a shared demo link must never
+// drive real video jobs.
+//
+// Host default: on the dedicated demo host (demo.hugpy.ai) a BARE hit — no
+// `demo` param — defaults to CANNED, so any build served there is demo-first
+// without needing host-side redirect rules. An explicit `?demo=...` still wins
+// (and the live-is-off rule above still applies).
+//
+// Resolved once at module load; query params persist across in-SPA navigation,
+// so the mode sticks for the session.
+
+export type DemoMode = "off" | "canned";
+
+export interface DemoConfig {
+  mode: DemoMode;
+  embed: boolean;
+}
+
+function truthy(v: string | null): boolean {
+  return v != null && /^(1|true|yes|on)$/i.test(v.trim());
+}
+
+// The dedicated demo host — a bare hit here defaults to CANNED (see below).
+// Narrow on purpose: only the exact `demo.hugpy.ai` label, not any *.hugpy.ai.
+function isDemoHost(): boolean {
+  try {
+    return (
+      typeof window !== "undefined" &&
+      /^demo\.hugpy\.ai$/i.test(window.location.hostname)
+    );
+  } catch {
+    return false;
+  }
+}
+
+function parse(): DemoConfig {
+  let params: URLSearchParams;
+  try {
+    params = new URLSearchParams(
+      typeof window !== "undefined" ? window.location.search : "",
+    );
+  } catch {
+    params = new URLSearchParams();
+  }
+
+  const raw = (params.get("demo") || "").trim().toLowerCase();
+  // NOTE: "live" is NOT accepted — canned or nothing (see module comment).
+  let mode: DemoMode = /^(1|true|yes|on|canned|demo)$/.test(raw)
+    ? "canned"
+    : "off";
+  // Host default: bare hit on demo.hugpy.ai (no explicit `demo` param) → canned.
+  // An explicit param always wins — including "live", which stays off here.
+  if (mode === "off" && !params.has("demo") && isDemoHost()) mode = "canned";
+
+  return { mode, embed: truthy(params.get("embed")) };
+}
+
+let _config: DemoConfig | null = null;
+
+export function getDemoConfig(): DemoConfig {
+  if (!_config) _config = parse();
+  return _config;
+}
+
+export const isDemo = (): boolean => getDemoConfig().mode !== "off";
+export const isCanned = (): boolean => getDemoConfig().mode === "canned";
+export const isEmbedded = (): boolean => getDemoConfig().embed;

package/src/demo/promptAssist.ts

@@ -0,0 +1,181 @@
+// Canned PROMPT-ASSIST generator for the showroom (?demo=1). The demoFetch shim
+// answers POST /video/prompt/assist entirely CLIENT-SIDE from these fragment banks
+// — ZERO backend contact — so the Enhance / Generate buttons are genuinely live in
+// the brochure without an LLM.
+//
+// Two behaviours, mirroring the real route's { mode } contract:
+//   • "generate" — composes a WHOLE cinematic prompt from the fragment banks below.
+//     Combinations are numerous (subject × setting × light × camera × style × grade),
+//     so successive clicks (almost) never repeat; nextGeneratedPrompt() additionally
+//     GUARANTEES the next prompt differs from the last one it handed out.
+//   • "detail" (Enhance) — takes the submitted draft and APPENDS a few randomized
+//     cinematic descriptors, so the box visibly grows with richer detail while keeping
+//     whatever the visitor already wrote.
+//
+// Flavor is deliberately kept in the same cinematic world as the seeded amber-dune
+// sample (src/demo/seed.ts DEMO_GENERATE_PROMPT): warm golden-hour / dusk light,
+// volumetric atmosphere, film-grain grades — so a Generate result reads as a sibling
+// of the prefilled prompt, not a jarring genre jump. Math.random is fine here (demo).
+
+// ── fragment banks ──────────────────────────────────────────────────────────
+// Each bank is a coherent slot in "SUBJECT, SETTING, LIGHT, CAMERA, STYLE, GRADE".
+// Every combination reads as a plausible cinematic still/shot.
+const SUBJECTS = [
+  "a lone figure in a flowing cloak",
+  "a weathered lighthouse keeper",
+  "a wanderer with a lantern",
+  "a solitary rider on horseback",
+  "an astronaut adrift from the hatch",
+  "a child chasing paper kites",
+  "a violinist mid-performance",
+  "a fox threading through tall grass",
+  "twin travelers on a ridge line",
+  "a diver breaking the surface",
+  "a monk crossing a stone bridge",
+  "a dancer caught mid-turn",
+];
+
+const SETTINGS = [
+  "on a windswept dune",
+  "at the edge of a mirror-still lake",
+  "among towering redwoods wreathed in mist",
+  "on a rain-slick city street",
+  "beneath a cathedral of ice",
+  "across a field of swaying wildflowers",
+  "on a cliff above a churning sea",
+  "inside an abandoned glasshouse",
+  "along a deserted railway platform",
+  "under a canopy of drifting cherry blossom",
+  "in a canyon of red sandstone",
+  "on a fog-bound harbor pier",
+];
+
+const LIGHTS = [
+  "golden hour, amber sun low on the horizon",
+  "soft dusk light deepening from orange to indigo",
+  "cold blue pre-dawn glow",
+  "warm lantern light against deep shadow",
+  "shafts of volumetric sunlight through haze",
+  "overcast silver light, gentle and diffuse",
+  "neon reflections shimmering on wet ground",
+  "moonlight silvering every edge",
+  "backlit rim light haloing the subject",
+  "candle-warm firelight flickering nearby",
+];
+
+const CAMERAS = [
+  "cinematic wide shot",
+  "intimate close-up, shallow depth of field",
+  "slow dolly push-in",
+  "sweeping aerial vantage",
+  "low-angle hero framing",
+  "over-the-shoulder tracking shot",
+  "static locked-off medium shot",
+  "drifting handheld follow",
+  "dramatic Dutch-tilt angle",
+];
+
+const STYLES = [
+  "35mm film grain",
+  "anamorphic lens flare",
+  "hyper-detailed photoreal render",
+  "painterly matte-painting finish",
+  "muted teal-and-orange color grade",
+  "high dynamic range, crisp micro-contrast",
+  "dreamy soft-focus bloom",
+  "rich chiaroscuro lighting",
+];
+
+const GRADES = [
+  "long violet shadows",
+  "warm highlights, cool shadows",
+  "deep cinematic contrast",
+  "atmospheric depth haze",
+  "delicate lens bokeh in the background",
+  "subtle vignette drawing the eye inward",
+];
+
+// Extra descriptor fragments Enhance appends to an existing draft (kept distinct from
+// the whole-prompt banks so the enrichment reads as ADDED cinematic polish).
+const ENHANCERS = [
+  "volumetric light",
+  "ultra-detailed textures",
+  "dramatic rim lighting",
+  "shallow depth of field",
+  "atmospheric haze",
+  "rich color grading",
+  "cinematic composition",
+  "soft golden-hour glow",
+  "fine film grain",
+  "gentle lens bloom",
+  "sweeping sense of scale",
+  "crisp foreground detail",
+];
+
+// ── random helpers ────────────────────────────────────────────────────────────
+function pick<T>(bank: readonly T[]): T {
+  return bank[Math.floor(Math.random() * bank.length)];
+}
+
+// Pick `n` DISTINCT items from a bank (n clamped to the bank size), order preserved
+// by draw. Used by Enhance to append a small handful of non-repeating descriptors.
+function pickSome<T>(bank: readonly T[], n: number): T[] {
+  const pool = bank.slice();
+  const out: T[] = [];
+  const count = Math.min(n, pool.length);
+  for (let i = 0; i < count; i++) {
+    const idx = Math.floor(Math.random() * pool.length);
+    out.push(pool.splice(idx, 1)[0]);
+  }
+  return out;
+}
+
+// ── generate: a whole cinematic prompt from the banks ──────────────────────────
+function composePrompt(): string {
+  const subject = pick(SUBJECTS);
+  const setting = pick(SETTINGS);
+  const light = pick(LIGHTS);
+  const camera = pick(CAMERAS);
+  const style = pick(STYLES);
+  const grade = pick(GRADES);
+  // Sentence-cased subject, comma-joined clauses — reads like the seeded sample.
+  const head = subject.charAt(0).toUpperCase() + subject.slice(1);
+  return `${head} ${setting}, ${light}, ${camera}, ${grade}, ${style}`;
+}
+
+// The last prompt handed out by nextGeneratedPrompt — so we never return the SAME
+// prompt twice in a row (the operator's "genuinely new each click" requirement).
+let _lastGenerated: string | null = null;
+
+/**
+ * A freshly composed cinematic prompt, GUARANTEED to differ from the previous one.
+ * With thousands of combinations a repeat is already unlikely; this makes "never the
+ * same one twice in a row" a hard guarantee (bounded retry, then a forced tail
+ * descriptor so it always terminates even in the degenerate single-bank case).
+ */
+export function nextGeneratedPrompt(): string {
+  let candidate = composePrompt();
+  for (let tries = 0; tries < 8 && candidate === _lastGenerated; tries++) {
+    candidate = composePrompt();
+  }
+  if (candidate === _lastGenerated) {
+    // Extremely unlikely; force a difference so we never violate the guarantee.
+    candidate = `${candidate}, ${pick(ENHANCERS)}`;
+  }
+  _lastGenerated = candidate;
+  return candidate;
+}
+
+/**
+ * Enhance ("detail"): take the submitted draft and return it enriched with a few
+ * appended cinematic descriptors (randomized, distinct from each other). A blank
+ * draft falls back to a freshly generated prompt (mirrors the real route, which
+ * treats Enhance-with-no-draft leniently rather than erroring). The visible effect
+ * is the box GROWING with detail while keeping whatever the visitor already wrote.
+ */
+export function enhancePrompt(draft: string): string {
+  const base = draft.trim();
+  if (base === "") return nextGeneratedPrompt();
+  const added = pickSome(ENHANCERS, 2 + Math.floor(Math.random() * 2)); // 2–3 descriptors
+  return `${base}, ${added.join(", ")}`;
+}

package/src/demo/seed.ts

@@ -0,0 +1,97 @@
+// Showroom SEED values for the canned demo (?demo=1) — the "sample gens +
+// prefilled prompts" flavor the brochure opens with. Everything here is
+// demo-only: it is imported ONLY behind an isCanned() gate (installVideoDemo for
+// the workbench seeding, and the station composers for the prefilled prompt), so
+// none of it can leak into a live session's normal path.
+//
+// Coherence: the prompts describe scenes that plausibly match the bundled
+// gen-1/gen-2 stills (see fixtures.demoGenerated) — gen-1 is a warm amber/indigo
+// sunset gradient, gen-2 a green/teal one — so the prefilled prompt, the completed
+// sample generation, and the still the visitor sees all tell ONE story.
+import {
+  demoGenerated,
+  demoFrames,
+  enqueueJob,
+  type JobKind,
+} from "./fixtures";
+import { addToLibrary } from "../video/mediaLibrary";
+import { trackJob } from "../video/jobTracker";
+
+/**
+ * The prompt the Generate (Image/Scene) composer opens PRE-FILLED with in canned
+ * mode — a cinematic scene that matches gen-1 (the primary sample still). The
+ * station reads this only when isCanned(); its live path stays an empty prompt.
+ */
+export const DEMO_GENERATE_PROMPT =
+  "A lone figure on a windswept dune at golden hour, amber sun low on the horizon, " +
+  "long violet shadows, cinematic wide shot, volumetric light, 35mm film grain";
+
+/**
+ * The prompt the Studio composer opens PRE-FILLED with in canned mode — a motion-
+ * flavored variant of the same world (a clip prompt reads better with camera/motion
+ * phrasing). Matches the sunset palette so the whole demo stays coherent.
+ */
+export const DEMO_STUDIO_PROMPT =
+  "Slow dolly across golden dunes at sunset, drifting sand catching amber light, " +
+  "the sky deepening from orange to indigo, cinematic, smooth camera move";
+
+/** The model the sample generation is attributed to (matches the fixtures registry). */
+const DEMO_MODEL = "sd-turbo";
+
+// A stable groupId for the seeded completed generation so its Session Library work
+// section is a real gen run (prompt + model header, Continue/Replicate affordances)
+// rather than a loose "demo asset" tile. Namespaced so it can never collide with a
+// live job id.
+const SEED_IMAGE_GROUP = "demo-seed-generate-image";
+
+/**
+ * Seed the workbench so the showroom opens with SAMPLE WORK already present:
+ *
+ *   • one COMPLETED "generate image" run — gen-1 pushed into the Session Library
+ *     with full generation provenance (prompt + model + group), so it renders as a
+ *     proper gen work section, not a bare demo tile; and
+ *   • one COMPLETED frame-extract of the sample clip — a couple of stills tied to
+ *     the bundled clip, so the library reads as a session that has done real work;
+ *   • one slowly-progressing in-flight "generate image" job, enqueued through the
+ *     SAME canned staged-poll machinery (enqueueJob → the shim's staged jobStatus →
+ *     the real jobTracker polls it to done), so the visitor sees live-feeling
+ *     progress in Active Processes that is entirely fake and never touches a backend.
+ *
+ * Best-effort + idempotent: addToLibrary de-dups by uri and trackJob de-dups by
+ * jobId, so a double-call (in-tab reload) can't double-seed. No-op on any throw.
+ */
+export function seedDemoWorkbench(): void {
+  try {
+    // ── the completed sample generation (Session Library) ────────────────────
+    addToLibrary(demoGenerated[0], "generate", "generated", {
+      prompt: DEMO_GENERATE_PROMPT,
+      model: DEMO_MODEL,
+      groupId: SEED_IMAGE_GROUP,
+      genKind: "generate_image",
+    });
+
+    // ── a completed frame-extract of the sample clip (a couple of stills) ─────
+    addToLibrary(demoFrames[0], "frames", "frame 1");
+    addToLibrary(demoFrames[1], "frames", "frame 2");
+
+    // ── one live-feeling in-flight generation (Active Processes) ─────────────
+    // Enqueue a canned generate_image job and register it with the real tracker.
+    // The tracker's module poll loop then drives it through the shim's staged
+    // jobStatus (unclaimed → running-with-progress → done), and on `done` its
+    // output lands in the Session Library via the tracker's normal pushOutputs —
+    // exactly the path a real generation takes, with zero backend contact.
+    const kind: JobKind = "generate_image";
+    const jobId = enqueueJob(kind, null);
+    trackJob({
+      jobId,
+      kind: "generate_image",
+      station: "generate",
+      label: DEMO_GENERATE_PROMPT,
+      enqueuedAt: Date.now(),
+      prompt: DEMO_GENERATE_PROMPT,
+      model: DEMO_MODEL,
+    });
+  } catch {
+    /* seeding is best-effort — the shim + prefilled prompts still demo without it */
+  }
+}

package/src/nav/BrandMark.css

@@ -0,0 +1,66 @@
+/* BrandMark — replicated 1:1 from the sitewide BrandMark.css so the brand mark
+   reads identically in the video arm's nav: hexagon symbol + the two-row
+   "H U G P Y" / rule / "inference you own" lockup. Colors resolve against the
+   dark token context carried on `.hugpy-navbar` (an ancestor), with literal
+   fallbacks here so the mark is legible even standalone. */
+.brandmark {
+  color: var(--text-primary, #f4f4f5);
+  font-family: "Fira Code", "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
+  font-weight: 700;
+  font-size: 14px;
+  white-space: nowrap;
+  display: inline-flex;
+  align-items: center;
+  gap: 9px;
+  text-decoration: none;
+  cursor: pointer;
+}
+.brandmark:hover { color: var(--link, #a7c7ff); }
+.brandmark-img {
+  /* scaled up to stand in proportion to the taller two-row text lockup */
+  height: 34px;
+  width: auto;
+  align-self: center;
+  /* the mark sits on solid black in the source PNG; blend onto our bg + brighten
+     so the thin hexagon carries weight rather than reading as a faint outline. */
+  mix-blend-mode: screen;
+  filter: brightness(1.6) saturate(1.2);
+}
+
+/* wordmark + tagline stack vertically, split by a hairline rule, all sharing one
+   width (the wordmark is tracked out below to match the tagline). */
+.brandmark-text {
+  display: inline-flex;
+  flex-direction: column;
+  align-items: center;
+  text-align: center;
+  gap: 4px;
+}
+.brandmark-word {
+  font-size: 16px;
+  line-height: 1;
+  letter-spacing: 0.92em;
+  margin-right: -0.92em;
+}
+.brandmark-rule {
+  height: 1px;
+  width: 100%;
+  background: currentColor;
+  opacity: 0.35;
+}
+.brandmark-sub {
+  color: var(--text-tertiary, #8e8e93);
+  font-weight: 500;
+  font-size: 11px;
+  letter-spacing: 0.08em;
+  line-height: 1;
+}
+
+/* On phones drop the tagline + rule, collapsing to the compact single-line mark
+   (symbol + wordmark) at the original symbol size — matches the sitewide mark. */
+@media (max-width: 640px) {
+  .brandmark-rule,
+  .brandmark-sub { display: none; }
+  .brandmark-img { height: 22px; }
+  .brandmark-word { letter-spacing: 0.12em; margin-right: 0; }
+}

package/src/nav/BrandMark.tsx

@@ -0,0 +1,40 @@
+/*
+ * BrandMark — the canonical hugpy brand mark for the video-intelligence arm.
+ *
+ * Replicates the sitewide BrandMark 1:1 — the hexagon symbol + the two-row
+ * "H U G P Y" / hairline rule / "inference you own" lockup (same class names +
+ * a copied BrandMark.css) — so the brand reads identically across every page.
+ * The arm is a separate SPA served under /video/, so this is a plain <a> (NOT a
+ * react-router Link): clicking it leaves the arm and returns to the site root.
+ *
+ * Destination follows the SAME runtime logic as the Navbar's site links: on a
+ * hugpy origin the home page is at the CURRENT origin's root; on any other
+ * origin it falls back to the public platform (hugpyConfig.siteUrl).
+ *
+ * Ported from media_intelligence_ui/src/chat/src/ui/BrandMark.tsx, dropping the
+ * demo/mode (`isEmbedded`) import — this arm has no iframe showroom.
+ */
+import markUrl from "../assets/hugpy-mark.png";
+import { hugpyConfig } from "../config";
+import "./BrandMark.css";
+
+// Runtime hostname, not build-time base: on a hugpy origin return to that
+// origin's root; otherwise the public platform (see Navbar.tsx for the full
+// rationale).
+const onHugpyOrigin =
+  typeof window !== "undefined" &&
+  /(^|\.)hugpy\.ai$/i.test(window.location.hostname);
+const welcomeHref = onHugpyOrigin ? "/" : hugpyConfig.siteUrl;
+
+export default function BrandMark() {
+  return (
+    <a href={welcomeHref} title="Back to the welcome page" className="brandmark">
+      <img className="brandmark-img" src={markUrl} alt="" />
+      <span className="brandmark-text">
+        <span className="brandmark-word">HUGPY</span>
+        <span className="brandmark-rule" aria-hidden="true" />
+        <span className="brandmark-sub">inference you own</span>
+      </span>
+    </a>
+  );
+}

package/src/nav/Navbar.css

@@ -0,0 +1,13 @@
+/* Video-intelligence arm — nav LOOK now comes from the sitewide shared stylesheet
+   (ui_shared/navbar/navbar.css, imported by Navbar.tsx). Only this arm-specific
+   header-stack wrapper stays local.
+
+   Nav + demo banner ride together in this header stack. .vi-shell is a 100dvh
+   flex column that itself never scrolls (content scrolls inside the workbench
+   body), so the stack just needs to be the non-growing first flex item — the
+   whole header stays pinned at the top and the banner sits directly under the
+   nav (operator directive 2026-07-21). */
+.vi-header-stack {
+  flex-shrink: 0;
+  z-index: 30;
+}

package/src/nav/Navbar.tsx

@@ -0,0 +1,68 @@
+/*
+ * Navbar — the shared hugpy top nav, ported into the video-intelligence arm.
+ *
+ * A faithful copy of the media arm's shared Navbar (COPIED, never imported
+ * cross-arm): a three-zone bar — brand pinned left, the primary links
+ * (Docs / Console / Media / Video) optically centered, and a page-specific
+ * controls slot pinned right — so this arm reads as part of the same product.
+ * Sticky, blurred, and bottom-bordered, matching the sitewide nav.
+ *
+ * Cross-SPA links: this arm is a SEPARATE SPA mounted under /video (its
+ * react-router basename is "/video"). The other destinations (/docs, /console,
+ * /media, the site root) are routes of OTHER hugpy SPAs, NOT of this one — so
+ * they are plain full-navigation <a> links, never react-router <Link>s (a Link
+ * here would resolve under /video and dead-end). On a hugpy origin the site
+ * links are origin-relative (dev.hugpy.ai/video → dev.hugpy.ai/docs); on any
+ * OTHER origin they point at hugpyConfig.siteUrl (hugpy.ai) instead.
+ *
+ * Ported from media_intelligence_ui/src/chat/src/ui/Navbar.tsx, dropping the
+ * demo/mode (`isEmbedded`) import — this arm has no iframe showroom, so the
+ * `target="_top"` escape hatch is unnecessary and every link is a normal nav.
+ */
+import type { ReactNode } from "react";
+import BrandMark from "./BrandMark";
+import { hugpyConfig } from "../config";
+// The link SET + order come from the ONE shared manifest so this arm can never
+// drift from the rest of the site. Rendering stays local (runtime siteBase,
+// current-marking). Plain .js, imported via allowJs with no .d.ts.
+import { buildNavItems } from "../../../ui_shared/navbar/links";
+import "../../../ui_shared/navbar/navbar.css";
+import "./Navbar.css";
+
+// Origin-relative on a hugpy origin; the public hugpy site (siteUrl) otherwise.
+// Strip a trailing slash so `${base}/x` never doubles up. Decided at RUNTIME
+// from the live hostname (the same build can be served at more than one origin).
+// Exported so any other in-arm component that needs a same-origin link to a
+// sibling hugpy SPA (e.g. ConsolePanel's iframe target) can reuse the exact
+// same rule instead of re-deriving it — this is the one place it's computed.
+export const onHugpyOrigin =
+  typeof window !== "undefined" &&
+  /(^|\.)hugpy\.ai$/i.test(window.location.hostname);
+export const siteBase = onHugpyOrigin ? "" : hugpyConfig.siteUrl.replace(/\/$/, "");
+
+export default function Navbar({ children }: { children?: ReactNode }) {
+  return (
+    <nav className="hugpy-navbar">
+      <span className="hugpy-navbar-brand">
+        <BrandMark />
+      </span>
+      <span className="hugpy-navbar-links">
+        {/* Link SET + order come from the ONE shared manifest so they stay
+            identical sitewide. Rendering is local: every destination is a plain
+            full-navigation <a> to a sibling hugpy SPA, prefixed with the runtime
+            siteBase. Video is the current surface. */}
+        {buildNavItems({ currentKey: "video", siteBase }).map((item) => (
+          <a
+            key={item.key}
+            href={item.href}
+            aria-current={item.current ? "page" : undefined}
+            className={item.current ? "is-current" : undefined}
+          >
+            {item.label}
+          </a>
+        ))}
+      </span>
+      <span className="hugpy-navbar-side">{children}</span>
+    </nav>
+  );
+}