Refactor Dream Customs mobile MVP UI

README.md

@@ -114,7 +114,7 @@ python -m pytest -q
 
 2026-06-05 local V2 verification passed: tests were green and the workbench flow reached a sealed pact through `Send to customs`, `Ask another question`, `Add material`, `Draft pact`, `Revise pact`, and `Seal today's pact`.
 
-The public Space may still show the older one-shot UI until the latest branch is pushed to the Hugging Face Space `main` branch. A 2026-06-05 push attempt was rejected by HF authorization, while the already deployed old Space still opened and returned a text-only demo pact through the remote queue.
+The public Space now serves the V2 workbench from Space `main` commit `8ad6f00628f800abc2dbefab05163aba94a5723f`. Public browser smoke, mobile readability, diagnostics, raw remote queue prediction, and a hosted text route smoke all reached a sealed pact. Hosted vision route smoke remains optional for the next pass.
 
 Current smoke details are tracked in `docs/smoke/2026-06-05-space-deployment-smoke.md`.
 

app.py

@@ -1,1748 +1,15 @@
 import os
 
-import gradio as gr
-from gradio_client import utils as gradio_client_utils
-
-from dream_customs.app_logic import (
-    add_material_action,
-    answer_question_action,
-    ask_another_question_action,
-    draft_pact_action,
-    initial_workbench_state,
-    revise_pact_action,
-    seal_pact_action,
-    skip_question_action,
-    start_declaration_action,
-    start_new_action,
-)
-
-
-_ORIGINAL_SCHEMA_TO_TYPE = gradio_client_utils._json_schema_to_python_type
-
-
-def _json_schema_to_python_type(schema, defs):
-    # Gradio 4.44 can pass JSON Schema booleans here on newer dependency sets.
-    if isinstance(schema, bool):
-        return "Any" if schema else "None"
-    return _ORIGINAL_SCHEMA_TO_TYPE(schema, defs)
-
-
-gradio_client_utils._json_schema_to_python_type = _json_schema_to_python_type
-
-
-CSS = """
-:root {
-  --dc-bg-night: oklch(0.145 0.030 238);
-  --dc-bg-void: oklch(0.080 0.010 250);
-  --dc-surface-ink: oklch(0.205 0.035 238);
-  --dc-surface-raised: oklch(0.275 0.045 236);
-  --dc-primary: oklch(0.690 0.105 232);
-  --dc-primary-deep: oklch(0.510 0.115 234);
-  --dc-coral: oklch(0.705 0.160 28);
-  --dc-aurora: oklch(0.820 0.110 185);
-  --dc-ink-main: oklch(0.965 0.010 235);
-  --dc-ink-muted: oklch(0.760 0.030 232);
-  --dc-border: oklch(0.430 0.055 235);
-  --dc-warning: oklch(0.760 0.150 75);
-  --dc-radius-sm: 6px;
-  --dc-radius-md: 10px;
-  --dc-radius-lg: 14px;
-}
-
-html,
-body,
-.gradio-container {
-  background:
-    radial-gradient(circle at 8% 0%, oklch(0.690 0.105 232 / 0.20), transparent 30rem),
-    radial-gradient(circle at 80% 12%, oklch(0.820 0.110 185 / 0.13), transparent 26rem),
-    linear-gradient(180deg, var(--dc-bg-void), var(--dc-bg-night) 34%, var(--dc-bg-void));
-  color: var(--dc-ink-main);
-  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
-  font-kerning: normal;
-}
-
-.gradio-container {
-  max-width: none !important;
-}
-
-.gradio-container .main,
-.gradio-container .wrap {
-  max-width: none !important;
-}
-
-.dc-app-shell {
-  gap: 16px !important;
-  margin: 0 auto;
-  max-width: 1440px;
-  min-height: 100vh;
-  padding: 16px;
-}
-
-.dc-session-store {
-  display: none !important;
-}
-
-.dc-statusbar {
-  align-items: center;
-  background:
-    linear-gradient(135deg, oklch(0.205 0.035 238 / 0.96), oklch(0.145 0.030 238 / 0.96)),
-    url("/file=docs/design/assets/dream-customs-probe-night-desk.png");
-  background-position: center;
-  background-size: cover;
-  border: 1px solid var(--dc-border);
-  border-radius: var(--dc-radius-lg);
-  display: grid;
-  gap: 16px;
-  grid-template-columns: minmax(280px, 1fr) auto minmax(260px, 0.8fr);
-  min-height: 108px;
-  overflow: hidden;
-  padding: 16px;
-  position: relative;
-}
-
-.dc-statusbar::before {
-  background: linear-gradient(90deg, oklch(0.080 0.010 250 / 0.88), oklch(0.145 0.030 238 / 0.72));
-  content: "";
-  inset: 0;
-  position: absolute;
-}
-
-.dc-statusbar > * {
-  position: relative;
-  z-index: 1;
-}
-
-.dc-brand-lockup {
-  align-items: center;
-  display: flex;
-  gap: 12px;
-}
-
-.dc-brand-mark {
-  align-items: center;
-  background: var(--dc-primary-deep);
-  border: 1px solid var(--dc-primary);
-  border-radius: var(--dc-radius-md);
-  color: var(--dc-ink-main);
-  display: inline-flex;
-  flex: 0 0 auto;
-  font-size: 0.875rem;
-  font-weight: 760;
-  height: 44px;
-  justify-content: center;
-  letter-spacing: 0;
-  width: 44px;
-}
-
-.dc-brand-lockup h1 {
-  color: var(--dc-ink-main);
-  font-size: 1.35rem;
-  font-weight: 760;
-  letter-spacing: 0;
-  line-height: 1.15;
-  margin: 0;
-  text-wrap: balance;
-}
-
-.dc-brand-lockup p,
-.dc-timeline-head p {
-  color: var(--dc-ink-muted);
-  font-size: 0.92rem;
-  line-height: 1.45;
-  margin: 4px 0 0;
-  max-width: 68ch;
-}
-
-.dc-phase-rail {
-  background: oklch(0.080 0.010 250 / 0.58);
-  border: 1px solid oklch(0.430 0.055 235 / 0.72);
-  border-radius: 999px;
-  display: flex;
-  gap: 4px;
-  padding: 4px;
-}
-
-.dc-phase-rail span,
-.dc-system-status span {
-  border-radius: 999px;
-  color: var(--dc-ink-muted);
-  font-size: 0.78rem;
-  font-weight: 680;
-  letter-spacing: 0;
-  line-height: 1.2;
-  padding: 8px 10px;
-  white-space: nowrap;
-}
-
-.dc-phase-rail .is-active {
-  background: var(--dc-primary-deep);
-  color: var(--dc-ink-main);
-}
-
-.dc-system-status {
-  display: flex;
-  flex-wrap: wrap;
-  gap: 6px;
-  justify-content: flex-end;
-}
-
-.dc-system-status span {
-  background: oklch(0.080 0.010 250 / 0.62);
-  border: 1px solid oklch(0.430 0.055 235 / 0.62);
-}
-
-.dc-main-grid {
-  align-items: stretch !important;
-  display: grid !important;
-  gap: 16px !important;
-  grid-template-columns: minmax(0, 1fr) minmax(320px, 420px);
-}
-
-.dc-timeline-column,
-.dc-inspector-column {
-  min-width: 0 !important;
-}
-
-.dc-timeline-shell,
-.dc-inspector,
-.dc-composer-panel {
-  background: oklch(0.205 0.035 238 / 0.96);
-  border: 1px solid var(--dc-border);
-  border-radius: var(--dc-radius-lg);
-  color: var(--dc-ink-main);
-}
-
-.dc-timeline-shell {
-  min-height: 480px;
-  padding: 18px;
-}
-
-.dc-timeline-head {
-  align-items: start;
-  display: flex;
-  gap: 16px;
-  justify-content: space-between;
-  margin-bottom: 14px;
-}
-
-.dc-timeline-head h2,
-.dc-inspector h2 {
-  color: var(--dc-ink-main);
-  font-size: 1.25rem;
-  font-weight: 740;
-  letter-spacing: 0;
-  line-height: 1.2;
-  margin: 0;
-  text-wrap: balance;
-}
-
-.dc-timeline-head > span,
-.dc-inspector-kicker,
-.dc-permit-row span {
-  color: var(--dc-aurora);
-  font-size: 0.8rem;
-  font-weight: 720;
-  letter-spacing: 0;
-}
-
-.dc-evidence-tray {
-  display: flex;
-  flex-wrap: wrap;
-  gap: 8px;
-  margin: 0 0 16px;
-}
-
-.dc-evidence-chip {
-  align-items: center;
-  background: oklch(0.145 0.030 238);
-  border: 1px solid oklch(0.430 0.055 235 / 0.84);
-  border-radius: 999px;
-  color: var(--dc-ink-main);
-  display: inline-flex;
-  font-size: 0.83rem;
-  font-weight: 650;
-  gap: 8px;
-  line-height: 1.2;
-  padding: 8px 10px;
-}
-
-.dc-chip-dot {
-  background: var(--dc-ink-muted);
-  border-radius: 999px;
-  display: inline-block;
-  height: 7px;
-  width: 7px;
-}
-
-.dc-evidence-chip.is-extracted .dc-chip-dot,
-.dc-evidence-chip.is-selected .dc-chip-dot {
-  background: var(--dc-aurora);
-}
-
-.dc-evidence-chip.is-failed {
-  border-color: oklch(0.705 0.160 28 / 0.72);
-}
-
-.dc-evidence-chip.is-failed .dc-chip-dot {
-  background: var(--dc-coral);
-}
-
-.dc-timeline-list {
-  display: flex;
-  flex-direction: column;
-  gap: 10px;
-}
-
-.dc-timeline-event {
-  background: oklch(0.145 0.030 238 / 0.82);
-  border: 1px solid oklch(0.430 0.055 235 / 0.72);
-  border-radius: var(--dc-radius-md);
-  padding: 14px;
-}
-
-.dc-timeline-event h3 {
-  color: var(--dc-ink-main);
-  font-size: 1rem;
-  font-weight: 720;
-  line-height: 1.25;
-  margin: 6px 0 0;
-}
-
-.dc-timeline-event p,
-.dc-inspector p,
-.dc-inspector li {
-  color: var(--dc-ink-muted);
-  font-size: 0.95rem;
-  line-height: 1.55;
-  margin: 8px 0 0;
-}
-
-.dc-event-meta {
-  display: flex;
-  flex-wrap: wrap;
-  gap: 6px;
-}
-
-.dc-event-meta span {
-  background: oklch(0.275 0.045 236 / 0.88);
-  border: 1px solid oklch(0.430 0.055 235 / 0.64);
-  border-radius: 999px;
-  color: var(--dc-aurora);
-  font-size: 0.75rem;
-  font-weight: 680;
-  padding: 5px 8px;
-}
-
-.dc-timeline-event.is-user {
-  background: oklch(0.275 0.045 236 / 0.92);
-}
-
-.dc-timeline-event.is-pact {
-  border-color: oklch(0.705 0.160 28 / 0.72);
-}
-
-.dc-timeline-event.is-error {
-  background: oklch(0.705 0.160 28 / 0.11);
-  border-color: oklch(0.705 0.160 28 / 0.72);
-}
-
-.dc-inspector {
-  min-height: 480px;
-  padding: 18px;
-}
-
-.dc-inspector.is-sealed {
-  border-color: var(--dc-coral);
-}
-
-.dc-inspector-kicker {
-  margin-bottom: 10px;
-}
-
-.dc-permit-row {
-  align-items: center;
-  display: flex;
-  justify-content: space-between;
-  margin-bottom: 12px;
-}
-
-.dc-inspector dl {
-  display: grid;
-  gap: 8px;
-  grid-template-columns: repeat(3, minmax(0, 1fr));
-  margin: 16px 0;
-}
-
-.dc-inspector dl div {
-  background: oklch(0.145 0.030 238 / 0.82);
-  border: 1px solid oklch(0.430 0.055 235 / 0.66);
-  border-radius: var(--dc-radius-md);
-  padding: 10px;
-}
-
-.dc-inspector dt,
-.dc-inspector h3 {
-  color: var(--dc-aurora);
-  font-size: 0.78rem;
-  font-weight: 720;
-  letter-spacing: 0;
-  margin: 0;
-}
-
-.dc-inspector dd {
-  color: var(--dc-ink-main);
-  font-size: 0.92rem;
-  font-weight: 680;
-  margin: 4px 0 0;
-}
-
-.dc-inspector section {
-  border-top: 1px solid oklch(0.430 0.055 235 / 0.6);
-  padding: 12px 0;
-}
-
-.dc-inspector ul {
-  margin: 8px 0 0;
-  padding-left: 18px;
-}
-
-.dc-support-note,
-.dc-inline-notice {
-  background: oklch(0.705 0.160 28 / 0.13);
-  border: 1px solid oklch(0.705 0.160 28 / 0.72);
-  border-radius: var(--dc-radius-md);
-  color: var(--dc-ink-main);
-  line-height: 1.45;
-  padding: 12px 14px;
-}
-
-.dc-inline-notice {
-  background: oklch(0.275 0.045 236 / 0.94);
-  border-color: oklch(0.430 0.055 235 / 0.76);
-}
-
-.dc-inline-notice.is-error {
-  background: oklch(0.705 0.160 28 / 0.13);
-  border-color: oklch(0.705 0.160 28 / 0.72);
-}
-
-.dc-inline-notice.is-sealed {
-  border-color: var(--dc-coral);
-}
-
-.dc-composer-panel {
-  bottom: 12px;
-  padding: 14px;
-  position: sticky;
-  z-index: 5;
-}
-
-.dc-composer-panel textarea,
-.dc-composer-panel input,
-.dc-composer-panel select,
-.dc-composer-panel label,
-.dc-composer-panel .wrap,
-.dc-composer-panel .block,
-.dc-composer-panel .input-container,
-.dc-composer-panel .container {
-  border-radius: var(--dc-radius-md) !important;
-  font-size: 1rem !important;
-}
-
-.dc-composer-panel .block,
-.dc-composer-panel .container,
-.dc-composer-panel .input-container,
-.dc-composer-panel .wrap.default {
-  background: oklch(0.205 0.035 238) !important;
-  border-color: oklch(0.430 0.055 235 / 0.72) !important;
-  color: var(--dc-ink-main) !important;
-}
-
-.dc-composer-panel .upload-container,
-.dc-composer-panel .image-container,
-.dc-composer-panel .audio-container,
-.dc-composer-panel .upload-container button,
-.dc-composer-panel .audio-container button {
-  background: oklch(0.145 0.030 238) !important;
-  border-color: oklch(0.430 0.055 235 / 0.72) !important;
-  color: var(--dc-ink-muted) !important;
-}
-
-.dc-composer-panel .upload-container button,
-.dc-composer-panel .audio-container button {
-  border: 1px dashed oklch(0.430 0.055 235 / 0.82) !important;
-}
-
-.dc-composer-panel .source-selection button {
-  background: oklch(0.080 0.010 250) !important;
-  border: 1px solid oklch(0.430 0.055 235 / 0.72) !important;
-  color: var(--dc-aurora) !important;
-}
-
-.dc-composer-panel svg {
-  color: var(--dc-aurora) !important;
-  stroke: currentColor !important;
-}
-
-.dc-composer-panel label,
-.dc-composer-panel .label-wrap span {
-  color: var(--dc-ink-main) !important;
-  font-weight: 680 !important;
-}
-
-.dc-composer-panel textarea,
-.dc-composer-panel input,
-.dc-composer-panel select {
-  background: oklch(0.145 0.030 238) !important;
-  color: var(--dc-ink-main) !important;
-}
-
-.dc-composer-panel textarea::placeholder,
-.dc-composer-panel input::placeholder {
-  color: var(--dc-ink-muted) !important;
-  opacity: 1 !important;
-}
-
-.dc-composer-panel button {
-  border-radius: var(--dc-radius-md) !important;
-  font-weight: 720 !important;
-  min-height: 44px;
-}
-
-.dc-action-row button {
-  background: oklch(0.275 0.045 236) !important;
-  border: 1px solid oklch(0.430 0.055 235 / 0.82) !important;
-  color: var(--dc-ink-main) !important;
-}
-
-.dc-action-row button:hover {
-  border-color: var(--dc-primary) !important;
-}
-
-.dc-primary,
-.dc-primary button {
-  background: var(--dc-primary-deep) !important;
-  border: 1px solid var(--dc-primary) !important;
-  color: var(--dc-ink-main) !important;
-}
-
-.dc-seal-button,
-.dc-seal-button button {
-  background: var(--dc-coral) !important;
-  border: 1px solid var(--dc-coral) !important;
-  color: var(--dc-bg-void) !important;
-}
-
-.dc-action-row {
-  align-items: stretch !important;
-  display: flex !important;
-  flex-wrap: wrap !important;
-  gap: 8px !important;
-}
-
-.dc-action-row > * {
-  min-width: 148px !important;
-}
-
-.dc-sealed-output {
-  margin-bottom: 16px;
-}
-
-.dc-diagnostics textarea,
-.dc-diagnostics code {
-  font-family: "SFMono-Regular", Consolas, "Liberation Mono", monospace !important;
-}
-
-*:focus-visible {
-  outline: 2px solid var(--dc-primary) !important;
-  outline-offset: 2px !important;
-}
-
-@media (max-width: 980px) {
-  .dc-statusbar {
-    grid-template-columns: 1fr;
-  }
-
-  .dc-system-status {
-    justify-content: flex-start;
-  }
-
-  .dc-main-grid {
-    grid-template-columns: 1fr;
-  }
-
-  .dc-inspector {
-    min-height: auto;
-  }
-}
-
-@media (max-width: 620px) {
-  .dc-app-shell {
-    padding: 10px;
-  }
-
-  .dc-statusbar,
-  .dc-timeline-shell,
-  .dc-inspector,
-  .dc-composer-panel {
-    border-radius: var(--dc-radius-md);
-  }
-
-  .dc-brand-lockup {
-    align-items: flex-start;
-  }
-
-  .dc-brand-lockup h1 {
-    font-size: 1.1rem;
-  }
-
-  .dc-phase-rail {
-    overflow-x: auto;
-  }
-
-  .dc-timeline-head,
-  .dc-permit-row {
-    align-items: flex-start;
-    flex-direction: column;
-  }
-
-  .dc-inspector dl {
-    grid-template-columns: 1fr;
-  }
-
-  .dc-action-row > * {
-    min-width: 100% !important;
-  }
-}
-
-@media (prefers-reduced-motion: reduce) {
-  *,
-  *::before,
-  *::after {
-    animation-duration: 0.001ms !important;
-    scroll-behavior: auto !important;
-    transition-duration: 0.001ms !important;
-  }
-}
-
-/* V3 rescue: first-screen trust, real phase actions, and no empty panel cliffs. */
-:root {
-  --dc-lamp: oklch(0.825 0.105 78);
-  --dc-plum: oklch(0.265 0.055 312);
-  --dc-warm-line: oklch(0.680 0.070 62);
-}
-
-.gradio-container {
-  min-height: auto !important;
-  padding-left: 0 !important;
-  padding-right: 0 !important;
-}
-
-.dc-app-shell {
-  gap: 12px !important;
-  min-height: auto;
-  padding: 14px clamp(10px, 2vw, 22px) 18px;
-}
-
-.dc-statusbar {
-  background:
-    linear-gradient(110deg, oklch(0.080 0.010 250 / 0.92), oklch(0.265 0.055 312 / 0.70)),
-    url("/file=docs/design/assets/dream-customs-probe-night-desk.png");
-  background-position: center 42%;
-  background-size: cover;
-  border-color: oklch(0.680 0.070 62 / 0.42);
-  grid-template-columns: minmax(260px, 1fr) minmax(260px, auto);
-  min-height: auto;
-  padding: 14px 16px;
-}
-
-.dc-statusbar::before {
-  background:
-    radial-gradient(circle at 18% 18%, oklch(0.825 0.105 78 / 0.16), transparent 18rem),
-    linear-gradient(90deg, oklch(0.080 0.010 250 / 0.90), oklch(0.145 0.030 238 / 0.66));
-}
-
-.dc-brand-mark {
-  background: linear-gradient(135deg, var(--dc-primary-deep), oklch(0.265 0.055 312));
-  border-color: oklch(0.825 0.105 78 / 0.58);
-}
-
-.dc-system-status span {
-  background: oklch(0.080 0.010 250 / 0.72);
-  border-color: oklch(0.680 0.070 62 / 0.34);
-}
-
-.dc-stage-nav {
-  align-items: stretch !important;
-  background: oklch(0.145 0.030 238 / 0.92);
-  border: 1px solid oklch(0.430 0.055 235 / 0.70);
-  border-radius: var(--dc-radius-lg);
-  display: grid !important;
-  gap: 8px !important;
-  grid-template-columns: repeat(4, minmax(0, 1fr));
-  padding: 8px;
-}
-
-.dc-stage-nav button {
-  background: oklch(0.205 0.035 238) !important;
-  border: 1px solid oklch(0.430 0.055 235 / 0.78) !important;
-  border-radius: var(--dc-radius-md) !important;
-  color: var(--dc-ink-main) !important;
-  font-weight: 760 !important;
-  min-height: 42px !important;
-  white-space: normal !important;
-}
-
-.dc-stage-nav button:hover {
-  background: oklch(0.275 0.045 236) !important;
-  border-color: var(--dc-primary) !important;
-}
-
-.dc-stage-nav .dc-stage-seal button {
-  border-color: oklch(0.705 0.160 28 / 0.72) !important;
-}
-
-.dc-focus-grid {
-  align-items: start !important;
-  display: grid !important;
-  gap: 14px !important;
-  grid-template-columns: minmax(0, 1.35fr) minmax(320px, 0.65fr);
-}
-
-.dc-declaration-column,
-.dc-side-rail {
-  min-width: 0 !important;
-}
-
-.dc-side-rail {
-  gap: 12px !important;
-}
-
-.dc-composer-panel {
-  background:
-    radial-gradient(circle at 0% 0%, oklch(0.825 0.105 78 / 0.10), transparent 18rem),
-    linear-gradient(145deg, oklch(0.205 0.035 238 / 0.98), oklch(0.265 0.055 312 / 0.38));
-  border-color: oklch(0.680 0.070 62 / 0.38);
-  bottom: auto;
-  box-shadow: 0 18px 40px rgba(0, 0, 0, 0.24);
-  padding: 16px;
-  position: relative;
-}
-
-.dc-composer-head {
-  align-items: end;
-  display: flex;
-  gap: 12px;
-  justify-content: space-between;
-  margin-bottom: 12px;
-}
-
-.dc-composer-head h2 {
-  color: var(--dc-ink-main);
-  font-size: 1.18rem;
-  line-height: 1.18;
-  margin: 0;
-}
-
-.dc-composer-head p {
-  color: var(--dc-ink-muted);
-  font-size: 0.92rem;
-  line-height: 1.45;
-  margin: 4px 0 0;
-}
-
-.dc-trust-pill {
-  background: oklch(0.825 0.105 78 / 0.12);
-  border: 1px solid oklch(0.825 0.105 78 / 0.40);
-  border-radius: 999px;
-  color: oklch(0.920 0.055 78);
-  flex: 0 0 auto;
-  font-size: 0.78rem;
-  font-weight: 760;
-  padding: 8px 10px;
-}
-
-.dc-declaration-row {
-  align-items: stretch !important;
-  display: grid !important;
-  gap: 10px !important;
-  grid-template-columns: minmax(0, 1fr) minmax(168px, 210px);
-}
-
-.dc-primary-stack {
-  display: grid !important;
-  gap: 8px !important;
-}
-
-.dc-primary-stack button {
-  background: oklch(0.205 0.035 238) !important;
-  border: 1px solid oklch(0.430 0.055 235 / 0.78) !important;
-  color: var(--dc-ink-main) !important;
-  min-height: 52px !important;
-  white-space: normal !important;
-}
-
-.dc-primary-stack .dc-primary,
-.dc-primary-stack .dc-primary button {
-  background: var(--dc-primary-deep) !important;
-  border-color: var(--dc-primary) !important;
-  color: var(--dc-ink-main) !important;
-}
-
-.dc-primary-stack .dc-seal-button,
-.dc-primary-stack .dc-seal-button button {
-  background: var(--dc-coral) !important;
-  border-color: var(--dc-coral) !important;
-  color: var(--dc-bg-void) !important;
-}
-
-.dc-evidence-grid {
-  align-items: stretch !important;
-  display: grid !important;
-  gap: 10px !important;
-  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(170px, 220px);
-}
-
-.dc-route-row,
-.dc-followup-grid {
-  display: grid !important;
-  gap: 10px !important;
-  grid-template-columns: repeat(2, minmax(0, 1fr));
-}
-
-.dc-secondary-actions {
-  align-items: stretch !important;
-  display: flex !important;
-  flex-wrap: wrap !important;
-  gap: 8px !important;
-}
-
-.dc-secondary-actions > * {
-  flex: 1 1 140px !important;
-  min-width: 132px !important;
-}
-
-.dc-secondary-actions button {
-  background: oklch(0.205 0.035 238) !important;
-  border: 1px solid oklch(0.430 0.055 235 / 0.78) !important;
-  color: var(--dc-ink-main) !important;
-  min-height: 42px !important;
-  white-space: normal !important;
-}
-
-.dc-secondary-actions button:hover {
-  background: oklch(0.275 0.045 236) !important;
-  border-color: var(--dc-primary) !important;
-}
-
-.dc-timeline-shell,
-.dc-inspector {
-  min-height: auto;
-}
-
-.dc-timeline-shell {
-  padding: 16px;
-}
-
-.dc-inspector {
-  background:
-    radial-gradient(circle at 100% 0%, oklch(0.825 0.105 78 / 0.07), transparent 14rem),
-    oklch(0.205 0.035 238 / 0.96);
-  padding: 16px;
-}
-
-.dc-inspector dl {
-  margin: 12px 0;
-}
-
-.dc-timeline-list {
-  gap: 8px;
-}
-
-.dc-sealed-output:empty {
-  display: none !important;
-}
-
-.dc-composer-panel .block,
-.dc-composer-panel .container,
-.dc-composer-panel .input-container,
-.dc-composer-panel .wrap,
-.dc-composer-panel .wrap.default,
-.dc-composer-panel .wrap.svelte-1cl284s {
-  background: oklch(0.130 0.024 238) !important;
-  border-color: oklch(0.680 0.070 62 / 0.34) !important;
-}
-
-.dc-composer-panel textarea,
-.dc-composer-panel input,
-.dc-composer-panel select,
-.dc-composer-panel [role="combobox"] {
-  background: oklch(0.105 0.018 245) !important;
-  border-color: oklch(0.430 0.055 235 / 0.82) !important;
-  color: var(--dc-ink-main) !important;
-}
-
-.dc-composer-panel .upload-container,
-.dc-composer-panel .image-container,
-.dc-composer-panel .audio-container,
-.dc-composer-panel .upload-container button,
-.dc-composer-panel .audio-container button {
-  background: oklch(0.105 0.018 245) !important;
-  border-color: oklch(0.680 0.070 62 / 0.28) !important;
-  color: var(--dc-ink-muted) !important;
-}
-
-.dc-composer-panel .image-container,
-.dc-composer-panel .audio-container {
-  min-height: 112px !important;
-}
-
-.dc-composer-panel label,
-.dc-composer-panel .label-wrap span,
-.dc-composer-panel [data-testid="block-label"] {
-  color: oklch(0.900 0.020 235) !important;
-}
-
-.dc-composer-panel .label-wrap {
-  background: oklch(0.130 0.024 238) !important;
-  border: 1px solid oklch(0.680 0.070 62 / 0.30) !important;
-  border-radius: 999px !important;
-}
-
-.dc-composer-panel label.float {
-  background: oklch(0.130 0.024 238) !important;
-  border-color: oklch(0.680 0.070 62 / 0.34) !important;
-  color: oklch(0.900 0.020 235) !important;
-}
-
-.dc-composer-panel .label-wrap svg {
-  color: var(--dc-aurora) !important;
-}
-
-.options,
-.option,
-ul.options,
-.dropdown-options {
-  background: oklch(0.130 0.024 238) !important;
-  color: var(--dc-ink-main) !important;
-}
-
-.options li,
-.option {
-  color: var(--dc-ink-main) !important;
-}
-
-.dc-diagnostics,
-.dc-examples {
-  margin-top: 2px;
-}
-
-@media (max-width: 980px) {
-  .dc-focus-grid {
-    grid-template-columns: 1fr;
-  }
-
-  .dc-stage-nav {
-    grid-template-columns: repeat(4, minmax(0, 1fr));
-  }
-
-  .dc-declaration-row {
-    grid-template-columns: 1fr;
-  }
-
-  .dc-primary-stack {
-    grid-template-columns: repeat(3, minmax(0, 1fr));
-  }
-
-  .dc-evidence-grid {
-    grid-template-columns: 1fr;
-  }
-}
-
-@media (max-width: 620px) {
-  *,
-  *::before,
-  *::after {
-    box-sizing: border-box !important;
-  }
-
-  html,
-  body,
-  .gradio-container,
-  .dc-app-shell {
-    max-width: 100vw !important;
-    overflow-x: hidden !important;
-  }
-
-  .gradio-container,
-  .gradio-container .main,
-  .gradio-container .wrap,
-  .gradio-container .contain {
-    margin-left: 0 !important;
-    margin-right: 0 !important;
-    padding-left: 0 !important;
-    padding-right: 0 !important;
-  }
-
-  .dc-app-shell {
-    margin: 0 !important;
-    padding: 10px !important;
-    width: 100vw !important;
-  }
-
-  .dc-statusbar,
-  .dc-stage-nav,
-  .dc-focus-grid,
-  .dc-composer-panel,
-  .dc-timeline-shell,
-  .dc-inspector {
-    max-width: 100% !important;
-    min-width: 0 !important;
-    width: 100% !important;
-  }
-
-  .dc-statusbar {
-    grid-template-columns: 1fr;
-  }
-
-  .dc-brand-lockup,
-  .dc-brand-lockup > div,
-  .dc-system-status {
-    min-width: 0 !important;
-  }
-
-  .dc-brand-lockup p {
-    max-width: 100% !important;
-    overflow-wrap: anywhere;
-  }
-
-  .dc-brand-lockup h1 {
-    font-size: 1rem;
-    overflow-wrap: anywhere;
-  }
-
-  .dc-system-status {
-    justify-content: flex-start;
-  }
-
-  .dc-system-status span {
-    font-size: 0.74rem;
-    padding: 7px 8px;
-    white-space: normal;
-  }
-
-  .dc-stage-nav button {
-    min-width: 0 !important;
-  }
-
-  .dc-composer-head {
-    align-items: flex-start;
-    flex-direction: column;
-  }
-
-  .dc-stage-nav {
-    gap: 6px !important;
-    grid-template-columns: repeat(4, minmax(0, 1fr));
-    padding: 6px;
-  }
-
-  .dc-stage-nav button {
-    font-size: 0.86rem !important;
-    min-height: 40px !important;
-    padding-left: 6px !important;
-    padding-right: 6px !important;
-  }
-
-  .dc-composer-panel {
-    padding: 14px;
-  }
-
-  .dc-primary-stack button {
-    min-height: 48px !important;
-  }
-
-  .dc-primary-stack .dc-draft-button,
-  .dc-primary-stack .dc-seal-button {
-    display: none !important;
-  }
-
-  .dc-composer-panel textarea {
-    min-height: 116px !important;
-  }
-
-  .dc-primary-stack,
-  .dc-route-row,
-  .dc-followup-grid {
-    grid-template-columns: 1fr;
-  }
-
-  .dc-secondary-actions > * {
-    flex-basis: 100% !important;
-  }
-}
-
-/* V4: warm, simple Codex-like multimodal composer. */
-:root {
-  --dc-bg-night: oklch(0.185 0.018 55);
-  --dc-bg-void: oklch(0.130 0.012 55);
-  --dc-surface-ink: oklch(0.235 0.018 58);
-  --dc-surface-raised: oklch(0.295 0.020 62);
-  --dc-composer: oklch(0.255 0.014 52);
-  --dc-composer-soft: oklch(0.315 0.015 58);
-  --dc-primary: oklch(0.690 0.105 150);
-  --dc-primary-deep: oklch(0.455 0.090 155);
-  --dc-coral: oklch(0.700 0.140 32);
-  --dc-aurora: oklch(0.745 0.080 185);
-  --dc-lamp: oklch(0.830 0.120 76);
-  --dc-plum: oklch(0.270 0.038 328);
-  --dc-ink-main: oklch(0.960 0.010 78);
-  --dc-ink-muted: oklch(0.760 0.018 78);
-  --dc-border: oklch(0.465 0.024 70);
-  --dc-radius-lg: 18px;
-  --dc-radius-xl: 28px;
-}
-
-html,
-body,
-.gradio-container {
-  background:
-    radial-gradient(circle at 18% -8%, oklch(0.830 0.120 76 / 0.16), transparent 24rem),
-    radial-gradient(circle at 88% 10%, oklch(0.745 0.080 185 / 0.12), transparent 25rem),
-    linear-gradient(180deg, oklch(0.150 0.012 48), var(--dc-bg-night) 48%, var(--dc-bg-void));
-}
-
-.dc-app-shell {
-  gap: 14px !important;
-  max-width: 1260px;
-  padding: 18px clamp(12px, 2.4vw, 28px) 24px;
-}
-
-.dc-statusbar {
-  background:
-    linear-gradient(110deg, oklch(0.145 0.012 48 / 0.95), oklch(0.270 0.038 328 / 0.66)),
-    url("/file=docs/design/assets/dream-customs-probe-morning-console.png");
-  background-position: center 46%;
-  background-size: cover;
-  border-color: oklch(0.830 0.120 76 / 0.25);
-  border-radius: 20px;
-  box-shadow: none;
-  grid-template-columns: minmax(0, 1fr) minmax(220px, auto);
-  padding: 18px;
-}
-
-.dc-statusbar::before {
-  background:
-    linear-gradient(90deg, oklch(0.145 0.012 48 / 0.92), oklch(0.235 0.018 58 / 0.76)),
-    radial-gradient(circle at 12% 30%, oklch(0.830 0.120 76 / 0.12), transparent 18rem);
-}
-
-.dc-brand-mark {
-  background: oklch(0.830 0.120 76 / 0.14);
-  border-color: oklch(0.830 0.120 76 / 0.42);
-  border-radius: 14px;
-  color: var(--dc-lamp);
-}
-
-.dc-brand-lockup h1 {
-  font-size: clamp(1.35rem, 2.4vw, 2rem);
-  font-weight: 760;
-}
-
-.dc-brand-lockup p {
-  color: oklch(0.840 0.016 78);
-  max-width: 58ch;
-}
-
-.dc-system-status {
-  align-content: center;
-  max-width: 390px;
-}
-
-.dc-system-status span {
-  background: oklch(0.130 0.012 55 / 0.66);
-  border-color: oklch(0.830 0.120 76 / 0.22);
-  color: oklch(0.880 0.018 78);
-}
-
-.dc-focus-grid {
-  align-items: start !important;
-  display: grid !important;
-  gap: 16px !important;
-  grid-template-columns: minmax(0, 1fr) minmax(330px, 390px);
-}
-
-.dc-composer-panel {
-  background:
-    radial-gradient(circle at 4% 0%, oklch(0.830 0.120 76 / 0.08), transparent 18rem),
-    linear-gradient(180deg, var(--dc-composer-soft), var(--dc-composer));
-  border: 1px solid oklch(0.830 0.120 76 / 0.18);
-  border-radius: var(--dc-radius-xl);
-  box-shadow: 0 18px 50px rgba(0, 0, 0, 0.22);
-  padding: 18px;
-}
-
-.dc-composer-head {
-  align-items: flex-start;
-  margin-bottom: 10px;
-}
-
-.dc-composer-head h2 {
-  color: var(--dc-ink-main);
-  font-size: clamp(1.08rem, 1.8vw, 1.32rem);
-  font-weight: 760;
-}
-
-.dc-composer-head p {
-  color: var(--dc-ink-muted);
-  max-width: 58ch;
-}
-
-.dc-trust-pill {
-  background: oklch(0.830 0.120 76 / 0.10);
-  border-color: oklch(0.830 0.120 76 / 0.28);
-  color: oklch(0.900 0.060 76);
-}
-
-.dc-inline-notice {
-  background: oklch(0.185 0.018 55 / 0.58);
-  border-color: oklch(0.830 0.120 76 / 0.18);
-  color: oklch(0.880 0.014 78);
-  margin-bottom: 8px;
-}
-
-.dc-dream-input,
-.dc-dream-input .block,
-.dc-dream-input .wrap,
-.dc-dream-input .input-container,
-.dc-dream-input .container {
-  background: transparent !important;
-  border: 0 !important;
-  box-shadow: none !important;
-}
-
-.dc-dream-input textarea {
-  background: transparent !important;
-  border: 0 !important;
-  box-shadow: none !important;
-  color: var(--dc-ink-main) !important;
-  font-size: 1.08rem !important;
-  line-height: 1.58 !important;
-  min-height: 138px !important;
-  padding: 8px 2px 12px !important;
-}
-
-.dc-dream-input textarea::placeholder {
-  color: oklch(0.690 0.016 78) !important;
-}
-
-.dc-composer-tools {
-  align-items: end !important;
-  display: grid !important;
-  gap: 8px !important;
-  grid-template-columns: minmax(112px, 0.8fr) minmax(112px, 0.8fr) minmax(130px, 1fr) minmax(128px, 0.9fr) minmax(160px, 1fr);
-}
-
-.dc-composer-tools > * {
-  min-width: 0 !important;
-}
-
-.dc-tool-tile,
-.dc-tool-select,
-.dc-tool-button,
-.dc-upload-button,
-.dc-voice-tool,
-.dc-send-button {
-  min-width: 0 !important;
-}
-
-.dc-tool-tile .block,
-.dc-tool-tile .wrap,
-.dc-tool-tile .container,
-.dc-tool-tile .input-container,
-.dc-tool-select .block,
-.dc-tool-select .wrap,
-.dc-tool-select .container,
-.dc-tool-select .input-container {
-  background: oklch(0.190 0.012 55 / 0.86) !important;
-  border-color: oklch(0.830 0.120 76 / 0.17) !important;
-  border-radius: 16px !important;
-  color: var(--dc-ink-main) !important;
-}
-
-.dc-tool-tile .image-container,
-.dc-tool-tile .audio-container,
-.dc-tool-tile .upload-container,
-.dc-tool-tile .upload-container button,
-.dc-tool-tile .audio-container button {
-  background: oklch(0.190 0.012 55 / 0.86) !important;
-  border-color: oklch(0.830 0.120 76 / 0.18) !important;
-  border-radius: 16px !important;
-  color: var(--dc-ink-muted) !important;
-  min-height: 68px !important;
-}
-
-.dc-tool-tile .image-container,
-.dc-tool-tile .audio-container {
-  min-height: 68px !important;
-}
-
-.dc-tool-select select,
-.dc-tool-select input,
-.dc-tool-select [role="combobox"] {
-  background: oklch(0.190 0.012 55 / 0.86) !important;
-  border-color: transparent !important;
-  color: var(--dc-ink-main) !important;
-  min-height: 42px !important;
-}
-
-.dc-upload-button,
-.dc-upload-button button,
-.dc-voice-tool,
-.dc-voice-tool .block,
-.dc-voice-tool .wrap,
-.dc-voice-tool .container,
-.dc-voice-tool .input-container,
-.dc-voice-tool .audio-container {
-  background: oklch(0.190 0.012 55 / 0.86) !important;
-  border-color: oklch(0.830 0.120 76 / 0.18) !important;
-  border-radius: 999px !important;
-  color: oklch(0.895 0.030 76) !important;
-  min-height: 44px !important;
-}
-
-.dc-upload-button button,
-.dc-voice-tool button {
-  border-radius: 999px !important;
-  min-height: 38px !important;
-}
-
-.dc-voice-tool {
-  max-height: 52px !important;
-  overflow: hidden !important;
-}
-
-.dc-voice-tool .audio-container {
-  height: 44px !important;
-  min-height: 44px !important;
-  overflow: hidden !important;
-}
-
-.dc-composer-panel label,
-.dc-composer-panel .label-wrap span,
-.dc-composer-panel [data-testid="block-label"] {
-  color: oklch(0.865 0.018 78) !important;
-  font-size: 0.76rem !important;
-  font-weight: 690 !important;
-}
-
-.dc-composer-panel .label-wrap,
-.dc-composer-panel label.float {
-  background: oklch(0.190 0.012 55 / 0.86) !important;
-  border-color: oklch(0.830 0.120 76 / 0.16) !important;
-}
-
-.dc-tool-button,
-.dc-tool-button button {
-  background: oklch(0.190 0.012 55) !important;
-  border: 1px solid oklch(0.830 0.120 76 / 0.20) !important;
-  border-radius: 999px !important;
-  color: oklch(0.895 0.030 76) !important;
-  min-height: 44px !important;
-  white-space: normal !important;
-}
-
-.dc-send-button,
-.dc-send-button button {
-  background: var(--dc-primary-deep) !important;
-  border: 1px solid var(--dc-primary) !important;
-  border-radius: 999px !important;
-  color: var(--dc-ink-main) !important;
-  min-height: 48px !important;
-  white-space: normal !important;
-}
-
-.dc-send-button:hover,
-.dc-send-button button:hover,
-.dc-tool-button:hover,
-.dc-tool-button button:hover {
-  transform: translateY(-1px);
-}
-
-.dc-pact-actions {
-  display: grid !important;
-  gap: 8px !important;
-  grid-template-columns: repeat(2, minmax(0, 1fr));
-}
-
-.dc-pact-actions button {
-  min-height: 46px !important;
-  white-space: normal !important;
-}
-
-.dc-draft-button,
-.dc-draft-button button {
-  background: oklch(0.295 0.020 62) !important;
-  border: 1px solid oklch(0.830 0.120 76 / 0.20) !important;
-  border-radius: 999px !important;
-  color: var(--dc-ink-main) !important;
-}
-
-.dc-seal-button,
-.dc-seal-button button {
-  background: var(--dc-coral) !important;
-  border: 1px solid var(--dc-coral) !important;
-  border-radius: 999px !important;
-  color: oklch(0.130 0.012 55) !important;
-}
-
-.dc-followup-panel,
-.dc-workflow-shortcuts,
-.dc-model-routes,
-.dc-diagnostics,
-.dc-examples {
-  background: oklch(0.185 0.018 55 / 0.72) !important;
-  border: 1px solid oklch(0.830 0.120 76 / 0.14) !important;
-  border-radius: 18px !important;
-  color: var(--dc-ink-main) !important;
-  overflow: hidden;
-}
-
-.dc-stage-nav {
-  background: transparent;
-  border: 0;
-  border-radius: 0;
-  padding: 0;
-}
-
-.dc-stage-nav button,
-.dc-secondary-actions button {
-  background: oklch(0.235 0.018 58) !important;
-  border-color: oklch(0.830 0.120 76 / 0.16) !important;
-  border-radius: 999px !important;
-}
-
-.dc-inspector,
-.dc-timeline-shell {
-  background: oklch(0.235 0.018 58 / 0.92);
-  border-color: oklch(0.830 0.120 76 / 0.15);
-  border-radius: 20px;
-}
-
-.dc-inspector {
-  box-shadow: none;
-}
-
-.dc-timeline-shell {
-  margin-top: 2px;
-}
-
-.dc-timeline-event {
-  background: oklch(0.185 0.018 55 / 0.70);
-  border-color: oklch(0.830 0.120 76 / 0.12);
-}
-
-.dc-event-meta span,
-.dc-evidence-chip,
-.dc-inspector dl div {
-  background: oklch(0.185 0.018 55 / 0.68);
-  border-color: oklch(0.830 0.120 76 / 0.13);
-}
-
-.dc-inspector dt,
-.dc-inspector h3,
-.dc-inspector-kicker,
-.dc-permit-row span,
-.dc-timeline-head > span {
-  color: oklch(0.830 0.120 76);
-}
-
-@media (max-width: 980px) {
-  .dc-focus-grid {
-    grid-template-columns: 1fr;
-  }
-
-  .dc-composer-tools {
-    grid-template-columns: repeat(3, minmax(0, 1fr));
-  }
-
-  .dc-send-button {
-    grid-column: span 2;
-  }
-}
-
-@media (max-width: 620px) {
-  .dc-app-shell {
-    padding: 10px !important;
-  }
-
-  .dc-statusbar,
-  .dc-composer-panel,
-  .dc-inspector,
-  .dc-timeline-shell,
-  .dc-followup-panel,
-  .dc-workflow-shortcuts {
-    border-radius: 18px;
-  }
-
-  .dc-statusbar {
-    padding: 14px;
-  }
-
-  .dc-composer-panel {
-    padding: 14px;
-  }
-
-  .dc-dream-input textarea {
-    min-height: 128px !important;
-  }
-
-  .dc-composer-tools {
-    grid-template-columns: repeat(2, minmax(0, 1fr));
-  }
-
-  .dc-tool-button,
-  .dc-send-button {
-    grid-column: span 1;
-  }
-
-  .dc-pact-actions {
-    grid-template-columns: 1fr;
-  }
-}
-"""
-
-
-def _outputs(
-    session_state,
-    status_html,
-    timeline_html,
-    inspector_html,
-    sealed_html,
-    debug_json,
-    notice_html,
-):
-    return [session_state, status_html, timeline_html, inspector_html, sealed_html, debug_json, notice_html]
-
-
-def build_demo() -> gr.Blocks:
-    with gr.Blocks(css=CSS, title="Dream Customs") as demo:
-        session_state = gr.Textbox(label="Session manifest", show_label=False, elem_classes=["dc-session-store"])
-        with gr.Column(elem_classes=["dc-app-shell"]):
-            status_html = gr.HTML()
-
-            with gr.Row(elem_classes=["dc-focus-grid"]):
-                with gr.Column(scale=7, elem_classes=["dc-declaration-column"]):
-                    with gr.Column(elem_classes=["dc-composer-panel"]):
-                        gr.HTML(
-                            """
-<div class="dc-composer-head">
-  <div>
-    <h2>Tell the customs desk what arrived in the night</h2>
-    <p>One calm place for text, sketch, voice, mood, and model route.</p>
-  </div>
-  <span class="dc-trust-pill">Playful, not diagnostic</span>
-</div>
-""".strip()
-                        )
-                        notice_html = gr.HTML()
-                        dream_text = gr.Textbox(
-                            label="Dream material",
-                            show_label=False,
-                            lines=6,
-                            value="我梦见一部迟到的电梯，按钮都融化了，我一直到不了 14 楼。",
-                            placeholder="Describe a dream, drop in a fragment, or ask the clerk what to do with it.",
-                            elem_classes=["dc-dream-input"],
-                        )
-                        with gr.Row(elem_classes=["dc-composer-tools"]):
-                            image_input = gr.UploadButton(
-                                "Image",
-                                file_types=["image"],
-                                file_count="single",
-                                elem_classes=["dc-upload-button", "dc-image-tool"],
-                            )
-                            audio_input = gr.UploadButton(
-                                "Voice",
-                                file_types=["audio"],
-                                file_count="single",
-                                elem_classes=["dc-upload-button", "dc-audio-tool"],
-                            )
-                            mood = gr.Dropdown(
-                                label="Mood",
-                                show_label=False,
-                                choices=["foggy", "anxious", "curious", "tired", "restless", "calm"],
-                                value="foggy",
-                                elem_classes=["dc-tool-select"],
-                            )
-                            add_btn = gr.Button("+ Add", elem_classes=["dc-tool-button"])
-                            send_btn = gr.Button("Send", elem_classes=["dc-primary", "dc-send-button"])
-                    with gr.Accordion("Model routes", open=False, elem_classes=["dc-model-routes"]):
-                        with gr.Row(elem_classes=["dc-route-row"]):
-                            text_backend = gr.Dropdown(
-                                label="Text",
-                                choices=["demo", "model", "ollama"],
-                                value="demo",
-                                elem_classes=["dc-tool-select"],
-                            )
-                            vision_backend = gr.Dropdown(
-                                label="Vision",
-                                choices=["demo", "model", "ollama"],
-                                value="demo",
-                                elem_classes=["dc-tool-select"],
-                            )
-                    with gr.Accordion("Answer or refine the pact", open=False, elem_classes=["dc-followup-panel"]):
-                        with gr.Row(elem_classes=["dc-followup-grid"]):
-                            answer_text = gr.Textbox(
-                                label="Answer to the clerk",
-                                lines=2,
-                                value="我想和它结盟，但今天只想完成一件很小的事。",
-                                placeholder="Answer a customs question, or leave blank and skip.",
-                            )
-                            revision_request = gr.Textbox(
-                                label="Revision request",
-                                lines=2,
-                                value="Make it gentler and more specific for today.",
-                                placeholder="Try: make it stranger, make it gentler, or make the action smaller.",
-                            )
-                        with gr.Row(elem_classes=["dc-secondary-actions"]):
-                            ask_btn = gr.Button("Ask another question")
-                            answer_btn = gr.Button("Answer question")
-                            skip_btn = gr.Button("Skip question")
-                            revise_btn = gr.Button("Revise pact")
-                            new_btn = gr.Button("Start new")
-                    with gr.Accordion("Workflow shortcuts", open=False, elem_classes=["dc-workflow-shortcuts"]):
-                        with gr.Row(elem_classes=["dc-stage-nav"]):
-                            declare_phase_btn = gr.Button("Declare")
-                            inspect_phase_btn = gr.Button("Inspect")
-                            draft_phase_btn = gr.Button("Draft")
-                            seal_phase_btn = gr.Button("Seal", elem_classes=["dc-stage-seal"])
-
-                with gr.Column(scale=4, elem_classes=["dc-side-rail"]):
-                    inspector_html = gr.HTML()
-                    with gr.Row(elem_classes=["dc-pact-actions"]):
-                        draft_btn = gr.Button("Draft pact", elem_classes=["dc-draft-button"])
-                        seal_btn = gr.Button("Seal today's pact", elem_classes=["dc-seal-button"])
-                    sealed_html = gr.HTML(elem_classes=["dc-sealed-output"])
-
-            timeline_html = gr.HTML()
-
-            with gr.Accordion("Diagnostics", open=False, elem_classes=["dc-diagnostics"]):
-                debug_json = gr.Code(label="Session state", language="json")
-
-            with gr.Accordion("Examples", open=False, elem_classes=["dc-examples"]):
-                gr.Examples(
-                    examples=[
-                        [
-                            "梦见一间便利店漂在海上，收银员让我用旧日历付款。",
-                            "curious",
-                            "我想知道它到底在保护什么。",
-                        ],
-                        [
-                            "I found a tiny border checkpoint inside my pillow. The officer stamped my hand with blue ink.",
-                            "restless",
-                            "I want a small action that makes tomorrow less loud.",
-                        ],
-                    ],
-                    inputs=[dream_text, mood, answer_text],
-                )
-
-        outputs = _outputs(session_state, status_html, timeline_html, inspector_html, sealed_html, debug_json, notice_html)
-        demo.load(initial_workbench_state, outputs=outputs, api_name=False)
-
-        declare_phase_btn.click(
-            add_material_action,
-            inputs=[session_state, dream_text, image_input, audio_input, mood, text_backend, vision_backend],
-            outputs=outputs,
-            api_name=False,
-        )
-        inspect_phase_btn.click(
-            ask_another_question_action,
-            inputs=[session_state, text_backend, vision_backend],
-            outputs=outputs,
-            api_name=False,
-        )
-        draft_phase_btn.click(
-            draft_pact_action,
-            inputs=[session_state, text_backend, vision_backend],
-            outputs=outputs,
-            api_name=False,
-        )
-        seal_phase_btn.click(
-            seal_pact_action,
-            inputs=[session_state, text_backend, vision_backend],
-            outputs=outputs,
-            api_name=False,
-        )
-        send_btn.click(
-            start_declaration_action,
-            inputs=[session_state, dream_text, image_input, audio_input, mood, text_backend, vision_backend],
-            outputs=outputs,
-            api_name=False,
-        )
-        add_btn.click(
-            add_material_action,
-            inputs=[session_state, dream_text, image_input, audio_input, mood, text_backend, vision_backend],
-            outputs=outputs,
-            api_name=False,
-        )
-        ask_btn.click(
-            ask_another_question_action,
-            inputs=[session_state, text_backend, vision_backend],
-            outputs=outputs,
-            api_name=False,
-        )
-        answer_btn.click(
-            answer_question_action,
-            inputs=[session_state, answer_text, text_backend, vision_backend],
-            outputs=outputs,
-            api_name=False,
-        )
-        skip_btn.click(
-            skip_question_action,
-            inputs=[session_state, text_backend, vision_backend],
-            outputs=outputs,
-            api_name=False,
-        )
-        draft_btn.click(
-            draft_pact_action,
-            inputs=[session_state, text_backend, vision_backend],
-            outputs=outputs,
-            api_name=False,
-        )
-        revise_btn.click(
-            revise_pact_action,
-            inputs=[session_state, revision_request, text_backend, vision_backend],
-            outputs=outputs,
-            api_name=False,
-        )
-        seal_btn.click(
-            seal_pact_action,
-            inputs=[session_state, text_backend, vision_backend],
-            outputs=outputs,
-            api_name=False,
-        )
-        new_btn.click(
-            start_new_action,
-            inputs=[text_backend, vision_backend],
-            outputs=outputs,
-            api_name=False,
-        )
-
-    return demo
+from dream_customs.ui.app import build_demo
 
 
 demo = build_demo()
 
 
 if __name__ == "__main__":
-    allowed_paths = [os.path.abspath("docs/design/assets")]
-    if os.getenv("SPACE_ID"):
-        demo.launch(show_api=False, show_error=True, allowed_paths=allowed_paths)
-    else:
-        server_port = int(os.getenv("GRADIO_SERVER_PORT", "7860"))
-        demo.launch(
-            server_name="127.0.0.1",
-            server_port=server_port,
-            show_api=False,
-            show_error=True,
-            allowed_paths=allowed_paths,
-        )
+    demo.launch(
+        server_name=os.getenv("GRADIO_SERVER_NAME", "0.0.0.0"),
+        server_port=int(os.getenv("GRADIO_SERVER_PORT", "7860")),
+        show_api=False,
+        show_error=True,
+    )

docs/smoke/2026-06-05-space-deployment-smoke.md

@@ -55,8 +55,22 @@ Goal for this pass: verify the current UI/UX V2 workbench locally, sync it to th
 - A `huggingface_hub.upload_folder(...)` deploy attempt used the cached token, preserved the current Space parent commit, and avoided printing any token value.
 - The API deploy attempt failed with 403 on the Space LFS batch endpoint:
   - `Make sure your token has the correct permissions.`
+- A follow-up `huggingface_hub.upload_folder(..., create_pr=True)` succeeded and created an HF Space pull request:
+  - PR: `https://huggingface.co/spaces/build-small-hackathon/dream-customs/discussions/5`
+  - Commit: `695a346 Deploy Dream Customs workbench UI`
+  - Ref: `refs/pr/5`
+- `refs/pr/5` was fetched locally and compared against Space `main`; it contains the V2 workbench update. HF stores the large design probe PNGs through LFS, so those files appear as LFS pointer changes in the git ref.
+- Attempting `huggingface_hub.merge_pull_request(..., discussion_num=5)` failed with 403:
+  - `Cannot access content at: https://huggingface.co/api/spaces/build-small-hackathon/dream-customs/discussions/5/merge.`
 
-Result: V2 workbench is not deployed to the public Space in this pass.
+The API merge attempt for PR #5 also returned 403, but the PR was then merged through the user's Chrome login state:
+
+- Discussion: `https://huggingface.co/spaces/build-small-hackathon/dream-customs/discussions/5`
+- Discussion status: `merged`
+- Space `main`: `8ad6f00628f800abc2dbefab05163aba94a5723f`
+- Commit: `8ad6f00 Deploy Dream Customs workbench UI (#5)`
+
+Result: V2 workbench is deployed on public Space `main`.
 
 ## Public Space Smoke
 
@@ -64,36 +78,71 @@ Checked URLs:
 
 - `https://huggingface.co/spaces/build-small-hackathon/dream-customs`
 - `https://build-small-hackathon-dream-customs.hf.space/`
+- `https://build-small-hackathon-dream-customs.hf.space/?v=8ad6f006`
 
 Observed result:
 
-- Public Space opened successfully.
-- Direct hf.space app rendered the older one-shot UI, not the current V2 workbench.
-- Existing old UI button `Stamp clearance` completed successfully in the browser.
-- Old UI output included `Today's Pact`, permit `DC-DEMO-014`, suggestion, weird task, bedtime release, contraband, and `SEALED`.
-- Mobile viewport `390x844` was readable for the currently deployed old app.
-- Browser console showed one HF subdomain status request returning 400 and one Gradio warning about too many endpoint arguments; no blocker was observed for the old text-only demo output.
+- Public Space opened successfully after PR #5 was merged.
+- Direct hf.space app rendered the V2 workbench with `Dream Customs / 梦境海关`, phase rail, status strip, diagnostics, and the expected action buttons.
+- Browser smoke completed the V2 text-only demo flow:
+  - `Send to customs`
+  - `Ask another question`
+  - `Add material`
+  - `Draft pact`
+  - `Revise pact`
+  - `Seal today's pact`
+- Final public V2 state showed:
+  - phase `Sealed`
+  - permit `DC-DEMO-014`
+  - 3 filed evidence items
+  - 4 asked questions
+  - visitor `迟到的电梯`
+  - suggestion `今天先选一个不需要立刻完成的小开头，做 5 分钟就停。`
+  - weird task `给电梯写一句道歉信：抱歉总让你背迟到的锅。`
+  - bedtime release `今日电梯已停靠，未完成事项明日再报关。`
+  - `SEALED` pact card
+- Mobile viewport `390x844` remained readable for the workbench and sealed pact output.
+- Diagnostics opened and showed sealed demo state with `text_backend: demo`, `vision_backend: demo`, empty `safety_flags`, and empty ordinary-case `safety_note`.
+- Browser console showed one HF subdomain status request returning 400 and Gradio endpoint-argument warnings; no blocker was observed for rendering, clicking, diagnostics, queue prediction, or sealed pact output.
 
 Remote queue check:
 
-- `/config` returned Gradio `4.44.1`.
-- Queued endpoint found: `run_customs_once`, `fn_index=0`.
-- Raw `/queue/join` plus `/queue/data` text-only call completed with `process_completed`.
-- Queue output returned 4 fields and a pact snippet containing `Dream visitor`, `Permit: DC-DEMO-014`, `Today's suggestion`, `Weird task`, and `Bedtime release`.
+- `/config` returned Gradio `4.44.1` and the V2 queued endpoints for load, send, add material, ask, answer, skip, draft, revise, seal, and new session.
+- Raw `/queue/join` plus `/queue/data` text-only flow completed the V2 sequence:
+  - load: `phase=empty`, `events=1`, `questions=0`, `evidence=0`, `sealed=False`
+  - send: `phase=negotiating`, `events=3`, `questions=3`, `evidence=2`, `sealed=False`
+  - ask another question: `phase=negotiating`, `events=4`, `questions=4`, `evidence=2`, `sealed=False`
+  - add material: `phase=declaring`, `events=5`, `questions=4`, `evidence=3`, `sealed=False`
+  - draft: `phase=drafting`, `events=6`, `questions=4`, `evidence=3`, `sealed=False`
+  - revise: `phase=drafting`, `events=7`, `questions=4`, `evidence=3`, `sealed=False`
+  - seal: `phase=sealed`, `events=8`, `questions=4`, `evidence=3`, `sealed=True`
+- Queue output returned permit `DC-DEMO-014`, visitor `迟到的��梯`, suggestion, bedtime release, and empty `safety_flags`.
 - `gradio_client.Client(...)` could not be used because the installed client failed while parsing the remote schema with `TypeError: argument of type 'bool' is not iterable`; raw queue protocol worked.
 
-Result: current old public Space queue works, but the required V2 workbench public Space smoke remains blocked until a token with write permission for `build-small-hackathon/dream-customs` is available.
+Result: current public Space V2 browser smoke and remote raw queue prediction passed.
 
 ## Hosted MiniCPM Route
 
 Runtime environment check:
 
-- `DREAM_CUSTOMS_TEXT_ENDPOINT`: missing
-- `DREAM_CUSTOMS_VISION_ENDPOINT`: missing
-- `DREAM_CUSTOMS_HOSTED_TOKEN`: missing
+- Local shell did not print or persist `DREAM_CUSTOMS_TEXT_ENDPOINT`, `DREAM_CUSTOMS_VISION_ENDPOINT`, or `DREAM_CUSTOMS_HOSTED_TOKEN`.
+- Space runtime was tested only through the public app queue with the UI/backend route set to `model` for text and `demo` for vision.
+
+Hosted text route smoke:
+
+- `send` with text route `model` reached `phase=negotiating`.
+- Diagnostics reported `text_backend: model`.
+- `draft` returned a pact draft with visitor `Late Elevator`.
+- Full seal route completed with:
+  - `phase=sealed`
+  - `permit=DC-DEMO-014`
+  - `visitor=Late Elevator`
+  - suggestion `Open one small task ten minutes early. You only need to start it.`
+  - bedtime release `Today the elevator has docked; unfinished floors report tomorrow.`
+  - empty `safety_flags`
 
-Result: hosted MiniCPM text and vision route smoke was not run. No token or endpoint value was printed, stored, or committed.
+Result: hosted MiniCPM text route smoke passed in Space runtime. Vision hosted route was not required for this pass because the acceptance gate asks for at least text or vision when runtime secrets are available. No token or endpoint value was printed, stored, or committed.
 
 ## Next Step
 
-Create or provide an HF token with write access to the `build-small-hackathon/dream-customs` Space, or grant the cached token/org role that permission. Then push the current workbench files to Space `main` and rerun the V2 public Space browser and queue smoke.
+Prepare the demo video capture. Optionally run a hosted vision route smoke later if the Space runtime vision endpoint is enabled and stable.

docs/superpowers/plans/2026-06-05-dream-customs-uiux-v2.md

@@ -120,7 +120,7 @@ Checks:
 - [x] User can revise pact before sealing.
 - [x] Image and audio failure keep text path alive.
 - [x] Mobile width is readable.
-- [ ] V2 Space deployment builds and remote queue prediction works.
+- [x] V2 Space deployment builds and remote queue prediction works.
 
 2026-06-05 verification notes:
 
@@ -129,10 +129,17 @@ Checks:
 - [x] Local V2 browser flow reached sealed pact: `Send to customs -> Ask another question -> Add material -> Draft pact -> Revise pact -> Seal today's pact`.
 - [x] Local mobile viewport `390x844` remained readable; pact inspector showed `DC-DEMO-014`, `Sealed`, 3 evidence items, 4 questions, suggestion, weird task, contraband, and bedtime release.
 - [x] Local diagnostics panel opened and showed `status: sealed`, `text_backend: demo`, `vision_backend: demo`, empty `safety_flags`, and empty ordinary-case `safety_note`; the header safety copy stayed visible as playful reflection, not medical advice.
-- [x] Existing public Space opened and the currently deployed old one-shot app completed a text-only demo queue prediction through `run_customs_once`.
-- [ ] Current V2 workbench was not deployed to public Space because `git push` to `https://huggingface.co/spaces/build-small-hackathon/dream-customs` was rejected by HF authorization (`You are not authorized to push to this repo`).
-- [ ] Follow-up HF API deploy attempt also failed: the cached token belongs to `ADJCJH` and sees the `build-small-hackathon` org, but the token is fine-grained and scoped only to the user entity; `huggingface_hub.upload_folder(...)` failed with 403 on the Space LFS batch endpoint.
-- [ ] Hosted MiniCPM route smoke was not run because `DREAM_CUSTOMS_TEXT_ENDPOINT`, `DREAM_CUSTOMS_VISION_ENDPOINT`, and `DREAM_CUSTOMS_HOSTED_TOKEN` were missing from the runtime environment.
+- [x] Existing public Space opened and the previously deployed old one-shot app completed a text-only demo queue prediction through `run_customs_once`.
+- [x] Direct `git push` to `https://huggingface.co/spaces/build-small-hackathon/dream-customs` was rejected by HF authorization (`You are not authorized to push to this repo`), so the update proceeded through an HF Space PR instead of force-pushing.
+- [x] Follow-up HF API direct deploy attempt also failed: the cached token belongs to `ADJCJH` and sees the `build-small-hackathon` org, but the token is fine-grained and scoped only to the user entity; `huggingface_hub.upload_folder(...)` failed with 403 on the Space LFS batch endpoint.
+- [x] HF Space PR created for the V2 workbench update: `https://huggingface.co/spaces/build-small-hackathon/dream-customs/discussions/5`, commit `695a346`.
+- [x] HF Space PR #5 API merge with the cached token failed with 403, then the PR was merged through the user's Chrome login state. Space `main` is now `8ad6f00628f800abc2dbefab05163aba94a5723f` (`Deploy Dream Customs workbench UI (#5)`).
+- [x] Public V2 Space opened at `https://build-small-hackathon-dream-customs.hf.space/?v=8ad6f006`; browser smoke reached sealed pact through `Send to customs -> Ask another question -> Add material -> Draft pact -> Revise pact -> Seal today's pact`.
+- [x] Public V2 mobile viewport `390x844` remained readable for the workbench and sealed pact output.
+- [x] Public V2 diagnostics panel opened and showed `status: sealed`, `text_backend: demo`, `vision_backend: demo`, empty `safety_flags`, and sealed pact state.
+- [x] Public V2 raw remote queue prediction completed the full text-only demo flow: load, send, ask, add material, draft, revise, seal. Final state was `sealed=True`, permit `DC-DEMO-014`, visitor `迟到的电梯`, 3 evidence items, 4 questions, and empty `safety_flags`.
+- [x] Hosted MiniCPM text route smoke passed in Space runtime using only runtime configuration. With text route set to `model` and vision route set to `demo`, the remote queue reached sealed pact and diagnostics reported `text_backend: model`; no token or endpoint value was printed, stored, or committed.
+- [x] Public browser console still showed one HF subdomain status 400 request and Gradio endpoint-argument warnings; neither blocked V2 rendering, clicking, diagnostics, queue prediction, or sealed pact output.
 
 Detailed record: `docs/smoke/2026-06-05-space-deployment-smoke.md`.
 
@@ -140,7 +147,8 @@ Detailed record: `docs/smoke/2026-06-05-space-deployment-smoke.md`.
 
 - [x] Commit implementation to `feature/dream-customs-mvp` or a new `feature/uiux-v2` branch.
 - [x] Push GitHub branch.
-- [ ] Upload/merge Space update. Blocked on HF push permission as of 2026-06-05.
-- [ ] Re-run public Space V2 smoke test after the Space update is accepted.
+- [x] Upload Space update as HF PR #5.
+- [x] Merge Space update to `main` through the user's Chrome login state after API merge returned 403.
+- [x] Re-run public Space V2 smoke test after the Space update was accepted.
 - [x] Re-run existing public Space smoke test for the currently deployed old one-shot app.
 - [x] Update README screenshots or demo instructions.

docs/superpowers/plans/2026-06-05-dream-customs-uiux-v3.md

@@ -0,0 +1,59 @@
+# Dream Customs UI/UX V3 Rescue Plan
+
+> **For agentic workers:** Use `superpowers:executing-plans` to execute this checklist. This plan fixes the public V2 workbench issues found from screenshots and live Space inspection.
+
+**Goal:** Make the Gradio app feel clear, warm, and trustworthy enough that a tired user will actually type a dream. The primary declaration controls must be visible immediately, the phase rail must be actionable, and the page must not contain long empty scroll areas.
+
+**Design north star:** Trust-first night desk. Keep the dream customs atmosphere, but make the input area calm, obvious, and inviting. The product should feel like a safe morning ritual, not a dark admin dashboard.
+
+## Problems To Fix
+
+- [x] The dream input and upload controls sit below the timeline and pact inspector, so the user must scroll before taking the core action.
+- [x] The primary submit button is buried below image/audio/dropdown controls and a row of many equally weighted buttons.
+- [x] The `Declare / Inspect / Draft / Seal` rail is rendered as static text, so it looks clickable but does nothing.
+- [x] Large fixed panel heights create long empty space when the session has little content.
+- [x] Gradio default controls leak white dropdown/input styling inside the dark app shell.
+- [x] The interface feels cold and technical; it needs warmer trust cues without turning into therapy or parchment.
+
+## Task 1: Update Product Design Contract
+
+- [x] Update `DESIGN.md` with a first-screen trust rule.
+- [x] Update `docs/handoff.md` so it reflects current deployed V2 state and this V3 rescue target.
+
+## Task 2: Rebuild First Screen Layout
+
+- [x] Move the composer above timeline on desktop and mobile.
+- [x] Put `Send to customs`, `Draft pact`, and `Seal today's pact` beside or directly below the dream text field.
+- [x] Keep image, voice, mood, text route, and vision route visible in the first composer panel.
+- [x] Put timeline below the declaration/inspector focus area.
+- [x] Keep diagnostics and examples collapsed below the main workflow.
+
+## Task 3: Make Phase Rail Real
+
+- [x] Add real Gradio buttons for `Declare`, `Inspect`, `Draft`, and `Seal`.
+- [x] Wire them to material filing, question asking, draft generation, and pact sealing.
+- [x] Keep the rendered status bar as status, not fake navigation.
+
+## Task 4: Repair Visual System
+
+- [x] Reduce cold one-note dark blue dominance with warm lamp and plum tones.
+- [x] Strengthen focus, hover, dropdown, upload, and placeholder styling.
+- [x] Remove unnecessary fixed min-heights and sticky composer behavior.
+- [x] Improve mobile stacking and prevent button text overflow.
+
+## Task 5: Verify
+
+- [x] Run `.venv/bin/python -m pytest -q`.
+- [x] Run the Gradio app locally.
+- [x] Inspect desktop and mobile first screen.
+- [x] Complete a text-only flow through send, question, draft, revise, and seal.
+- [x] Confirm there is no long empty page below normal content.
+- [x] Commit and push the branch after verification.
+
+## Verification Notes
+
+- Desktop Chrome extension verification reached sealed state through `Send to customs -> Inspect -> Draft pact -> Revise pact -> Seal today's pact`.
+- Desktop state after seal showed `Current: Sealed`, `DC-DEMO-014`, and `Today's Pact`.
+- Mobile Chrome CDP verification used a `390x844` viewport and returned `scrollWidth=390`, so there is no horizontal overflow.
+- Mobile first screen shows the phase buttons, dream text field, `Send to customs`, and the image evidence entry beginning inside the first viewport.
+- Final automated checks before commit: `.venv/bin/python -m pytest -q` and `git diff --check`.

dream_customs/ui/__init__.py

@@ -0,0 +1,2 @@
+"""Mobile-first Gradio UI helpers for Dream Customs."""
+

dream_customs/ui/actions.py

@@ -0,0 +1,217 @@
+import json
+from html import escape
+from typing import Any, Dict, List, Tuple
+
+from dream_customs.app_logic import _clients, _debug_json, _file_path, _session_from_state
+from dream_customs.pipeline import (
+    add_evidence,
+    answer_question,
+    ask_questions,
+    create_session,
+    draft_pact,
+    revise_pact,
+    seal_pact,
+    skip_question,
+)
+from dream_customs.schema import CustomsSession, PactCard
+
+
+def _state_json(session: CustomsSession) -> str:
+    return json.dumps(session.model_dump(mode="json"), ensure_ascii=False)
+
+
+def _latest_error(session: CustomsSession) -> str:
+    event = next((item for item in reversed(session.events) if item.role == "error"), None)
+    return event.body if event else ""
+
+
+def _trim_to_one_visible_question(session: CustomsSession, previous_count: int) -> CustomsSession:
+    if len(session.question_history) <= previous_count + 1:
+        return session
+
+    next_session = session.model_copy(deep=True)
+    visible_question = next_session.question_history[previous_count]
+    next_session.question_history = next_session.question_history[:previous_count] + [visible_question]
+    for event in reversed(next_session.events):
+        if event.role == "customs" and event.status == "question":
+            event.title = "Customs question filed"
+            event.body = visible_question
+            break
+    return next_session
+
+
+def _card_plain_text(card: PactCard) -> str:
+    contraband = "、".join(card.contraband)
+    parts = [
+        "今日通行证",
+        f"来访者：{card.visitor_name}",
+        f"入境编号：{card.permit_id}",
+        f"携带情绪违禁品：{contraband}",
+        f"风险等级：{card.risk_level}",
+        f"结盟解读：{card.alliance_reading}",
+        f"今日认真建议：{card.practical_suggestion}",
+        f"5 分钟怪趣任务：{card.weird_task}",
+        f"睡前放行仪式：{card.bedtime_release}",
+    ]
+    if card.safety_note:
+        parts.append(f"安全提示：{card.safety_note}")
+    return "\n".join(parts)
+
+
+def _render_today_pass(card: PactCard) -> str:
+    contraband = "".join(f"<li>{escape(item)}</li>" for item in card.contraband)
+    safety = (
+        "<section class='dc-pass-safety'>"
+        "<strong>必要时的安全提示</strong>"
+        f"<p>{escape(card.safety_note)}</p>"
+        "</section>"
+        if card.safety_note
+        else ""
+    )
+    return f"""
+<article class="dc-pass-card">
+  <div class="dc-pass-topline">
+    <span>今日通行证</span>
+    <span>{escape(card.permit_id)}</span>
+  </div>
+  <h2>{escape(card.visitor_name)}</h2>
+  <p class="dc-pass-risk">{escape(card.risk_level)}</p>
+  <section>
+    <h3>它可能在保护</h3>
+    <p>{escape(card.alliance_reading)}</p>
+  </section>
+  <section>
+    <h3>今天的小建议</h3>
+    <p>{escape(card.practical_suggestion)}</p>
+  </section>
+  <section>
+    <h3>5 分钟怪任务</h3>
+    <p>{escape(card.weird_task)}</p>
+  </section>
+  <section>
+    <h3>携带情绪违禁品</h3>
+    <ul>{contraband}</ul>
+  </section>
+  <section>
+    <h3>睡前放行词</h3>
+    <p>{escape(card.bedtime_release)}</p>
+  </section>
+  {safety}
+  <div class="dc-pass-seal">SEALED / 已放行</div>
+</article>
+""".strip()
+
+
+def _questions(session: CustomsSession) -> List[str]:
+    return session.question_history[-1:] if session.question_history else []
+
+
+def _view_payload(session: CustomsSession, text_backend: str, vision_backend: str) -> Dict[str, Any]:
+    card = session.sealed_pact or session.draft_pact
+    error = _latest_error(session)
+    status = "error" if error else "card" if session.sealed_pact else "question" if session.question_history else "declaration"
+    return {
+        "status": status,
+        "phase": session.phase,
+        "question": _questions(session)[0] if _questions(session) else "",
+        "questions": _questions(session),
+        "card_title": "今日通行证" if card else "",
+        "card_text": _card_plain_text(card) if card else "",
+        "card_html": _render_today_pass(card) if card else "",
+        "error": error,
+        "notice": _notice_for_status(status, error),
+        "debug": json.loads(_debug_json(session, text_backend, vision_backend)),
+    }
+
+
+def _view(session: CustomsSession, text_backend: str, vision_backend: str) -> Tuple[str, str]:
+    return _state_json(session), json.dumps(_view_payload(session, text_backend, vision_backend), ensure_ascii=False, indent=2)
+
+
+def _notice_for_status(status: str, error: str = "") -> str:
+    if status == "error":
+        return error or "海关还没收到梦的碎片。"
+    if status == "question":
+        return "海关只想确认一件小事；你也可以跳过，直接拿通行证。"
+    if status == "card":
+        return "今日通行证已盖章。它是一个温柔的行动提示，不是诊断。"
+    return "写一句、几句，或贴一段梦；文字路径永远可用。"
+
+
+def initial_mobile_state(text_backend: str = "demo", vision_backend: str = "demo") -> Tuple[str, str]:
+    return _view(create_session(), text_backend, vision_backend)
+
+
+def submit_dream_action(
+    dream_text: str,
+    image_value: Any = None,
+    audio_value: Any = None,
+    mood: str = "",
+    text_backend: str = "demo",
+    vision_backend: str = "demo",
+) -> Tuple[str, str]:
+    text_client, vision_client, asr_client = _clients(text_backend, vision_backend)
+    session = add_evidence(
+        create_session(),
+        dream_text=dream_text or "",
+        image_path=_file_path(image_value) or None,
+        audio_path=_file_path(audio_value) or None,
+        mood=mood or "",
+        vision_client=vision_client,
+        asr_client=asr_client,
+    )
+    if session.phase != "error":
+        previous_count = len(session.question_history)
+        session = ask_questions(session, text_client)
+        session = _trim_to_one_visible_question(session, previous_count)
+    return _view(session, text_backend, vision_backend)
+
+
+def skip_to_card_action(
+    state: Any,
+    text_backend: str = "demo",
+    vision_backend: str = "demo",
+) -> Tuple[str, str]:
+    session = skip_question(_session_from_state(state))
+    return _seal_view(session, text_backend, vision_backend)
+
+
+def answer_to_card_action(
+    state: Any,
+    answer: str,
+    text_backend: str = "demo",
+    vision_backend: str = "demo",
+) -> Tuple[str, str]:
+    session = answer_question(_session_from_state(state), answer or "")
+    if session.phase == "error":
+        return _view(session, text_backend, vision_backend)
+    return _seal_view(session, text_backend, vision_backend)
+
+
+def revise_card_action(
+    state: Any,
+    revision_request: str,
+    text_backend: str = "demo",
+    vision_backend: str = "demo",
+) -> Tuple[str, str]:
+    session = _session_from_state(state)
+    if session.sealed_pact and not session.draft_pact:
+        session.draft_pact = session.sealed_pact
+    text_client, _vision_client, _asr_client = _clients(text_backend, vision_backend)
+    session = revise_pact(session, revision_request or "", text_client)
+    if session.phase == "error":
+        return _view(session, text_backend, vision_backend)
+    session = seal_pact(session)
+    return _view(session, text_backend, vision_backend)
+
+
+def reset_mobile_action(text_backend: str = "demo", vision_backend: str = "demo") -> Tuple[str, str]:
+    return initial_mobile_state(text_backend, vision_backend)
+
+
+def _seal_view(session: CustomsSession, text_backend: str, vision_backend: str) -> Tuple[str, str]:
+    text_client, _vision_client, _asr_client = _clients(text_backend, vision_backend)
+    session = draft_pact(session, text_client)
+    if session.phase != "error":
+        session = seal_pact(session)
+    return _view(session, text_backend, vision_backend)

dream_customs/ui/app.py

@@ -0,0 +1,245 @@
+import json
+from html import escape
+
+import gradio as gr
+from gradio_client import utils as gradio_client_utils
+
+from dream_customs.ui.actions import (
+    answer_to_card_action,
+    initial_mobile_state,
+    reset_mobile_action,
+    revise_card_action,
+    skip_to_card_action,
+    submit_dream_action,
+)
+from dream_customs.ui.copy import (
+    ANSWER_PLACEHOLDER,
+    APP_SUBTITLE,
+    APP_TITLE,
+    DREAM_PLACEHOLDER,
+    EXAMPLE_DREAM,
+    EXAMPLE_MOOD,
+    MOOD_OPTIONS,
+)
+from dream_customs.ui.styles import CSS
+
+
+_ORIGINAL_SCHEMA_TO_TYPE = gradio_client_utils._json_schema_to_python_type
+
+
+def _json_schema_to_python_type(schema, defs):
+    if isinstance(schema, bool):
+        return "Any" if schema else "None"
+    return _ORIGINAL_SCHEMA_TO_TYPE(schema, defs)
+
+
+gradio_client_utils._json_schema_to_python_type = _json_schema_to_python_type
+
+
+def _load_view(view_json: str) -> dict:
+    try:
+        return json.loads(view_json or "{}")
+    except json.JSONDecodeError:
+        return {"status": "error", "error": "界面状态解析失败，请重新申报。"}
+
+
+def _notice_html(view: dict) -> str:
+    message = escape(view.get("notice") or view.get("error") or "")
+    css = "dc-notice is-error" if view.get("status") == "error" else "dc-notice"
+    return f"<div class='{css}'>{message}</div>" if message else ""
+
+
+def _question_markdown(view: dict) -> str:
+    question = view.get("question") or ""
+    return f"## 海关想确认一件小事\n\n{question}" if question else "## 海关还在等梦的碎片"
+
+
+def _updates(state: str, view_json: str):
+    view = _load_view(view_json)
+    status = view.get("status", "declaration")
+    return (
+        state,
+        view_json,
+        _notice_html(view),
+        _question_markdown(view),
+        view.get("card_html", ""),
+        view.get("card_text", ""),
+        gr.update(visible=status in {"declaration", "error"}),
+        gr.update(visible=status == "question"),
+        gr.update(visible=status == "card"),
+        json.dumps(view.get("debug", {}), ensure_ascii=False, indent=2),
+    )
+
+
+def _submit(dream_text, image_value, audio_value, mood, text_backend, vision_backend):
+    state, view_json = submit_dream_action(
+        dream_text=dream_text,
+        image_value=image_value,
+        audio_value=audio_value,
+        mood=mood,
+        text_backend=text_backend,
+        vision_backend=vision_backend,
+    )
+    return _updates(state, view_json)
+
+
+def _answer(state, answer, text_backend, vision_backend):
+    state, view_json = answer_to_card_action(
+        state,
+        answer=answer,
+        text_backend=text_backend,
+        vision_backend=vision_backend,
+    )
+    return _updates(state, view_json)
+
+
+def _skip(state, text_backend, vision_backend):
+    state, view_json = skip_to_card_action(
+        state,
+        text_backend=text_backend,
+        vision_backend=vision_backend,
+    )
+    return _updates(state, view_json)
+
+
+def _revise(state, revision_request, text_backend, vision_backend):
+    state, view_json = revise_card_action(
+        state,
+        revision_request=revision_request,
+        text_backend=text_backend,
+        vision_backend=vision_backend,
+    )
+    return _updates(state, view_json)
+
+
+def _reset(text_backend, vision_backend):
+    state, view_json = reset_mobile_action(text_backend=text_backend, vision_backend=vision_backend)
+    return (*_updates(state, view_json), "", "", None, None, "")
+
+
+def build_demo() -> gr.Blocks:
+    initial_state, initial_view = initial_mobile_state()
+    initial = _load_view(initial_view)
+
+    with gr.Blocks(css=CSS, title="梦境海关") as demo:
+        session_state = gr.State(initial_state)
+        view_state = gr.State(initial_view)
+
+        with gr.Column(elem_classes=["dc-shell"]):
+            gr.HTML(
+                f"""
+<header class="dc-hero">
+  <h1>{APP_TITLE}</h1>
+  <p>{APP_SUBTITLE}</p>
+</header>
+""".strip()
+            )
+            notice = gr.HTML(_notice_html(initial))
+
+            with gr.Group(visible=True, elem_classes=["dc-stage"]) as declaration_group:
+                dream_text = gr.Textbox(
+                    label="写下梦的碎片",
+                    placeholder=DREAM_PLACEHOLDER,
+                    lines=7,
+                    value="",
+                )
+                with gr.Row(elem_classes=["dc-row"]):
+                    image_input = gr.Image(label="图片线索", type="filepath")
+                    audio_input = gr.Audio(label="语音线索", sources=["microphone", "upload"], type="filepath")
+                    mood = gr.Dropdown(label="醒来后的感觉", choices=MOOD_OPTIONS, value=None)
+                with gr.Row():
+                    example_button = gr.Button("试一个例子", variant="secondary")
+                    submit_button = gr.Button("生成今日通行证", variant="primary")
+
+            with gr.Group(visible=False, elem_classes=["dc-stage", "dc-question"]) as question_group:
+                question_markdown = gr.Markdown("## 海关还在等梦的碎片")
+                answer_text = gr.Textbox(
+                    label="你的回答",
+                    placeholder=ANSWER_PLACEHOLDER,
+                    lines=3,
+                    value="",
+                )
+                with gr.Row():
+                    answer_button = gr.Button("回答并生成卡片", variant="primary")
+                    skip_button = gr.Button("跳过，直接生成", variant="secondary")
+
+            with gr.Group(visible=False, elem_classes=["dc-stage", "dc-card"]) as card_group:
+                card_html = gr.HTML("")
+                with gr.Row(elem_classes=["dc-actions"]):
+                    gentle_button = gr.Button("再温柔一点", variant="secondary")
+                    weird_button = gr.Button("更怪一点", variant="secondary")
+                    copy_button = gr.Button("复制文本", variant="secondary")
+                    reset_button = gr.Button("重新申报", variant="secondary")
+                card_text = gr.Textbox(
+                    label="可复制文本",
+                    value="",
+                    lines=8,
+                    show_copy_button=True,
+                    elem_classes=["dc-hidden-text"],
+                )
+
+            with gr.Accordion("开发者设置", open=False, elem_classes=["dc-dev"]):
+                with gr.Row():
+                    text_backend = gr.Radio(
+                        label="文本后端",
+                        choices=["demo", "model", "ollama"],
+                        value="demo",
+                    )
+                    vision_backend = gr.Radio(
+                        label="视觉后端",
+                        choices=["demo", "model", "ollama"],
+                        value="demo",
+                    )
+                debug_json = gr.Code(
+                    label="调试状态",
+                    value=json.dumps(initial.get("debug", {}), ensure_ascii=False, indent=2),
+                    language="json",
+                )
+
+        outputs = [
+            session_state,
+            view_state,
+            notice,
+            question_markdown,
+            card_html,
+            card_text,
+            declaration_group,
+            question_group,
+            card_group,
+            debug_json,
+        ]
+
+        submit_button.click(
+            _submit,
+            inputs=[dream_text, image_input, audio_input, mood, text_backend, vision_backend],
+            outputs=outputs,
+        )
+        answer_button.click(
+            _answer,
+            inputs=[session_state, answer_text, text_backend, vision_backend],
+            outputs=outputs,
+        )
+        skip_button.click(
+            _skip,
+            inputs=[session_state, text_backend, vision_backend],
+            outputs=outputs,
+        )
+        gentle_button.click(
+            _revise,
+            inputs=[session_state, gr.State("再温柔一点"), text_backend, vision_backend],
+            outputs=outputs,
+        )
+        weird_button.click(
+            _revise,
+            inputs=[session_state, gr.State("更怪一点"), text_backend, vision_backend],
+            outputs=outputs,
+        )
+        copy_button.click(lambda text: text, inputs=card_text, outputs=card_text)
+        reset_button.click(
+            _reset,
+            inputs=[text_backend, vision_backend],
+            outputs=outputs + [dream_text, answer_text, image_input, audio_input, mood],
+        )
+        example_button.click(lambda: (EXAMPLE_DREAM, EXAMPLE_MOOD), outputs=[dream_text, mood])
+
+    return demo

dream_customs/ui/copy.py

@@ -0,0 +1,10 @@
+APP_TITLE = "梦境海关"
+APP_SUBTITLE = "把昨晚的梦丢进来，我帮你换成今天的一张小通行证。"
+
+DREAM_PLACEHOLDER = "例如：我梦见电梯一直不到，按钮像蜡一样融化。"
+ANSWER_PLACEHOLDER = "可以只回一句，也可以留空后直接跳过。"
+
+EXAMPLE_DREAM = "我梦见自己一直赶不上电梯，按钮像蜡一样融化，楼层数字停在 14。"
+EXAMPLE_MOOD = "焦虑"
+
+MOOD_OPTIONS = ["迷雾", "焦虑", "好奇", "累", "平静"]

dream_customs/ui/styles.py

@@ -0,0 +1,272 @@
+CSS = """
+:root {
+  --dc-bg: #f6f8f6;
+  --dc-ink: #17211f;
+  --dc-muted: #5f6f68;
+  --dc-line: #cbd7d1;
+  --dc-panel: #ffffff;
+  --dc-panel-soft: #edf4f0;
+  --dc-teal: #0f766e;
+  --dc-teal-dark: #115e59;
+  --dc-coral: #c85235;
+  --dc-gold: #b7791f;
+  --dc-shadow: 0 18px 42px rgba(23, 33, 31, 0.12);
+  --dc-radius-sm: 6px;
+  --dc-radius-md: 8px;
+}
+
+html,
+body,
+.gradio-container {
+  background:
+    linear-gradient(180deg, rgba(15, 118, 110, 0.08), rgba(200, 82, 53, 0.04) 42%, rgba(246, 248, 246, 1)),
+    var(--dc-bg) !important;
+  color: var(--dc-ink) !important;
+  font-family: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif !important;
+}
+
+.gradio-container {
+  max-width: none !important;
+  padding-left: 0 !important;
+  padding-right: 0 !important;
+}
+
+.dc-shell {
+  margin: 0 auto;
+  max-width: 920px;
+  padding: 22px clamp(14px, 3vw, 34px) 30px;
+}
+
+.dc-hero {
+  border-bottom: 1px solid var(--dc-line);
+  margin-bottom: 16px;
+  padding: 4px 0 18px;
+}
+
+.dc-hero h1 {
+  color: var(--dc-ink) !important;
+  font-size: clamp(2rem, 7vw, 4.4rem);
+  letter-spacing: 0;
+  line-height: 0.98;
+  margin: 0;
+}
+
+.dc-hero p {
+  color: var(--dc-muted);
+  font-size: 1.02rem;
+  line-height: 1.65;
+  margin: 12px 0 0;
+  max-width: 40rem;
+}
+
+.dc-stage,
+.dc-dev {
+  background: var(--dc-panel) !important;
+  border: 1px solid var(--dc-line) !important;
+  border-radius: var(--dc-radius-md) !important;
+  box-shadow: var(--dc-shadow);
+  padding: clamp(14px, 2.2vw, 22px);
+}
+
+.dc-stage textarea,
+.dc-stage input,
+.dc-stage select,
+.dc-stage .wrap,
+.dc-stage .container,
+.dc-stage .input-container,
+.dc-stage .upload-container,
+.dc-stage .image-container,
+.dc-stage .audio-container {
+  background: #fbfdfc !important;
+  border-color: var(--dc-line) !important;
+  border-radius: var(--dc-radius-sm) !important;
+  color: var(--dc-ink) !important;
+}
+
+.dc-stage label,
+.dc-stage [data-testid="block-label"],
+.dc-dev label,
+.dc-dev [data-testid="block-label"] {
+  color: var(--dc-ink) !important;
+  font-weight: 700 !important;
+}
+
+.dc-stage textarea::placeholder,
+.dc-stage input::placeholder {
+  color: #87958f !important;
+  opacity: 1 !important;
+}
+
+.dc-stage button {
+  border-radius: var(--dc-radius-sm) !important;
+  font-weight: 750 !important;
+  min-height: 44px !important;
+}
+
+.dc-stage .primary button,
+.dc-stage button.primary,
+button.primary {
+  background: var(--dc-teal) !important;
+  border-color: var(--dc-teal-dark) !important;
+  color: white !important;
+}
+
+.dc-stage button.secondary {
+  background: var(--dc-panel-soft) !important;
+  border-color: var(--dc-line) !important;
+  color: var(--dc-ink) !important;
+}
+
+.dc-row {
+  align-items: stretch !important;
+  display: grid !important;
+  gap: 10px !important;
+  grid-template-columns: repeat(3, minmax(0, 1fr));
+}
+
+.dc-question h2,
+.dc-card h2 {
+  color: var(--dc-ink) !important;
+  font-size: 1.55rem;
+  letter-spacing: 0;
+  line-height: 1.2;
+  margin: 0 0 10px;
+}
+
+.dc-notice {
+  background: #e6f4ef;
+  border: 1px solid #b9ddd3;
+  border-radius: var(--dc-radius-sm);
+  color: var(--dc-teal-dark);
+  line-height: 1.5;
+  margin: 0 0 12px;
+  padding: 10px 12px;
+}
+
+.dc-notice.is-error {
+  background: #fff0eb;
+  border-color: #efb19d;
+  color: #9f321c;
+}
+
+.dc-pass-card {
+  background:
+    linear-gradient(180deg, rgba(255, 255, 255, 0.94), rgba(237, 244, 240, 0.98));
+  border: 1px solid var(--dc-line);
+  border-left: 6px solid var(--dc-teal);
+  border-radius: var(--dc-radius-md);
+  color: var(--dc-ink);
+  line-height: 1.65;
+  padding: clamp(16px, 3vw, 26px);
+}
+
+.dc-pass-topline {
+  align-items: center;
+  color: var(--dc-teal-dark);
+  display: flex;
+  font-size: 0.86rem;
+  font-weight: 800;
+  justify-content: space-between;
+  margin-bottom: 12px;
+}
+
+.dc-pass-card h2 {
+  color: var(--dc-ink) !important;
+  font-size: clamp(1.8rem, 7vw, 3.2rem);
+  letter-spacing: 0;
+  line-height: 1;
+  margin: 0 0 6px;
+}
+
+.dc-pass-risk {
+  color: var(--dc-coral);
+  font-weight: 750;
+  margin: 0 0 16px;
+}
+
+.dc-pass-card section {
+  border-top: 1px solid var(--dc-line);
+  padding: 12px 0;
+}
+
+.dc-pass-card h3 {
+  color: var(--dc-teal-dark) !important;
+  font-size: 0.9rem;
+  letter-spacing: 0;
+  margin: 0 0 4px;
+}
+
+.dc-pass-card p,
+.dc-pass-card li {
+  color: var(--dc-ink) !important;
+  margin: 0;
+}
+
+.dc-pass-card ul {
+  margin: 0;
+  padding-left: 20px;
+}
+
+.dc-pass-seal {
+  border: 2px solid var(--dc-coral);
+  border-radius: 999px;
+  color: var(--dc-coral);
+  display: inline-block;
+  font-weight: 850;
+  margin-top: 10px;
+  padding: 7px 12px;
+  transform: rotate(-3deg);
+}
+
+.dc-pass-safety {
+  background: #fff0eb;
+  border: 1px solid #efb19d !important;
+  border-radius: var(--dc-radius-sm);
+  margin: 10px 0;
+  padding: 12px !important;
+}
+
+.dc-actions {
+  display: grid !important;
+  gap: 8px !important;
+  grid-template-columns: repeat(4, minmax(0, 1fr));
+}
+
+.dc-hidden-text textarea {
+  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace !important;
+  min-height: 130px !important;
+}
+
+.dc-dev {
+  box-shadow: none;
+  margin-top: 12px;
+}
+
+.dc-dev textarea {
+  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace !important;
+  font-size: 0.84rem !important;
+}
+
+@media (max-width: 720px) {
+  .dc-shell {
+    padding: 14px 10px 22px;
+  }
+
+  .dc-hero {
+    margin-bottom: 10px;
+    padding-bottom: 12px;
+  }
+
+  .dc-row,
+  .dc-actions {
+    grid-template-columns: 1fr;
+  }
+
+  .dc-stage,
+  .dc-dev {
+    border-radius: 8px !important;
+    box-shadow: none;
+    padding: 12px;
+  }
+}
+"""

tests/test_render.py

@@ -1,5 +1,5 @@
 from dream_customs.pipeline import add_evidence, create_session
-from dream_customs.render import render_pact_card, render_pact_inspector, render_timeline
+from dream_customs.render import render_pact_card, render_pact_inspector, render_status_bar, render_timeline
 from dream_customs.schema import PactCard
 
 
@@ -65,3 +65,10 @@ def test_render_timeline_and_inspector_show_session_state():
     assert "Dream note" in timeline
     assert "No pact drafted yet" in inspector
     assert "2 filed" in inspector
+
+
+def test_status_bar_is_status_not_fake_navigation():
+    html = render_status_bar(create_session())
+    assert "Current: Empty desk" in html
+    assert "dc-phase-rail" not in html
+    assert "<nav" not in html

tests/test_ui_actions.py

@@ -0,0 +1,39 @@
+import json
+
+from dream_customs.ui.actions import answer_to_card_action, skip_to_card_action, submit_dream_action
+
+
+def test_mobile_mvp_submit_then_skip_auto_seals_pact():
+    state, view_json = submit_dream_action(
+        dream_text="我梦见迟到的电梯。",
+        mood="焦虑",
+    )
+    view = json.loads(view_json)
+
+    assert view["status"] == "question"
+    assert view["question"]
+    assert len(view["questions"]) == 1
+    assert "DC-DEMO-014" not in view["card_text"]
+
+    state, view_json = skip_to_card_action(state)
+    view = json.loads(view_json)
+
+    assert view["status"] == "card"
+    assert view["phase"] == "sealed"
+    assert "今日通行证" in view["card_title"]
+    assert "DC-DEMO-014" in view["card_text"]
+    assert "迟到的电梯" in view["card_html"]
+
+
+def test_mobile_mvp_answer_to_card_auto_seals_pact():
+    state, _view_json = submit_dream_action(
+        dream_text="我梦见按钮融化，电梯一直不到。",
+        mood="迷雾",
+    )
+
+    state, view_json = answer_to_card_action(state, "它可能是在让我慢一点。")
+    view = json.loads(view_json)
+
+    assert view["status"] == "card"
+    assert view["phase"] == "sealed"
+    assert "它可能是在让我慢一点。" in view["debug"]["session"]["answer_history"]