feat: update warm multimodal composer ui

DESIGN.md

@@ -2,17 +2,18 @@
 name: Dream Customs
 description: A nocturnal dream customs workbench for turning dream evidence into a next-day pact.
 colors:
-  bg-night: "oklch(0.145 0.030 238)"
-  bg-void: "oklch(0.080 0.010 250)"
-  surface-ink: "oklch(0.205 0.035 238)"
-  surface-raised: "oklch(0.275 0.045 236)"
-  primary-cobalt: "oklch(0.690 0.105 232)"
-  primary-cobalt-deep: "oklch(0.510 0.115 234)"
-  accent-coral-stamp: "oklch(0.705 0.160 28)"
-  accent-aurora: "oklch(0.820 0.110 185)"
-  ink-main: "oklch(0.965 0.010 235)"
-  ink-muted: "oklch(0.760 0.030 232)"
-  border-dream: "oklch(0.430 0.055 235)"
+  bg-night: "oklch(0.185 0.018 55)"
+  bg-void: "oklch(0.130 0.012 55)"
+  surface-ink: "oklch(0.235 0.018 58)"
+  surface-raised: "oklch(0.295 0.020 62)"
+  primary-sage: "oklch(0.690 0.105 150)"
+  primary-sage-deep: "oklch(0.455 0.090 155)"
+  accent-coral-stamp: "oklch(0.700 0.140 32)"
+  accent-amber-lamp: "oklch(0.830 0.120 76)"
+  accent-aurora: "oklch(0.745 0.080 185)"
+  ink-main: "oklch(0.960 0.010 78)"
+  ink-muted: "oklch(0.760 0.018 78)"
+  border-dream: "oklch(0.465 0.024 70)"
   warning: "oklch(0.760 0.150 75)"
 typography:
   display:
@@ -20,7 +21,7 @@ typography:
     fontSize: "2.25rem"
     fontWeight: 760
     lineHeight: 1.05
-    letterSpacing: "-0.02em"
+    letterSpacing: "0"
   headline:
     fontFamily: "Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, Segoe UI, sans-serif"
     fontSize: "1.5rem"
@@ -54,7 +55,7 @@ spacing:
   xl: "32px"
 components:
   button-primary:
-    backgroundColor: "{colors.primary-cobalt-deep}"
+    backgroundColor: "{colors.primary-sage-deep}"
     textColor: "{colors.ink-main}"
     rounded: "{rounded.md}"
     padding: "12px 16px"
@@ -74,15 +75,17 @@ components:
 
 ## 1. Overview
 
-**Creative North Star: "The Night Desk"**
+**Creative North Star: "The Morning Customs Desk"**
 
-Dream Customs should feel like a working customs desk that appears inside a dream at 4:17 a.m. The surface is dark because the user often arrives from bed or after waking, but it is not a generic terminal. Cobalt, aurora cyan, and coral stamp ink carry the strange color. Familiar controls carry trust.
+Dream Customs should feel like a small warm customs desk that appears after waking: quiet, slightly strange, and easy enough to use before the day fully starts. The surface can stay dark like Codex, but it should read as warm charcoal and lamplight rather than a cold technical dashboard. Sage action color, amber light, muted coral seal ink, and a little aurora evidence color carry the identity.
 
-This is product UI first. The user needs to type, upload, record, answer, and decide what happens next. The dream atmosphere belongs in the background wash, pact inspector, stamps, and evidence chips, while controls stay clear and predictable.
+This is product UI first. The user needs to type, attach, optionally add voice, answer, and decide what happens next. The dream atmosphere belongs in the background wash, pact inspector, stamps, and evidence chips, while controls stay clear and predictable.
+
+**V4 Unified Composer Rule.** The dream input should behave like a Codex-style multimodal composer, not like a Gradio form. Text, image upload, voice upload, mood, add-material, and send belong visually inside one rounded input surface. Technical model routes and advanced workflow shortcuts should be collapsed by default.
 
 **Key Characteristics:**
 
-- Bottom composer as the primary input, modeled after Codex app behavior.
+- Unified composer as the primary input, modeled after Codex app behavior.
 - Conversation timeline for declarations, questions, and pact drafts.
 - Evidence tray for text, image, audio, mood, and model status.
 - Pact inspector that can be drafted, revised, or sealed.
@@ -94,22 +97,23 @@ The palette is nocturnal and atmospheric: neutral dark surfaces, cobalt primary
 
 ### Primary
 
-- **Cobalt Gate** (`oklch(0.690 0.105 232)`): primary selection, active step, focus accents, and subtle interactive outlines.
-- **Deep Cobalt Gate** (`oklch(0.510 0.115 234)`): filled primary buttons and selected composer controls with near-white text.
+- **Sage Gate** (`oklch(0.690 0.105 150)`): primary selection, active step, focus accents, and subtle interactive outlines.
+- **Deep Sage Gate** (`oklch(0.455 0.090 155)`): filled primary buttons and selected composer controls with near-white text.
 
 ### Secondary
 
-- **Coral Stamp Ink** (`oklch(0.705 0.160 28)`): final seal action, permit stamp, alert edge for safety notes, and one memorable highlight per screen.
-- **Aurora Evidence Light** (`oklch(0.820 0.110 185)`): image/audio evidence status, successful extraction, and soft dream-glow details.
+- **Coral Stamp Ink** (`oklch(0.700 0.140 32)`): final seal action, permit stamp, alert edge for safety notes, and one memorable highlight per screen.
+- **Amber Lamp** (`oklch(0.830 0.120 76)`): warmth, trust cue, and section highlights.
+- **Aurora Evidence Light** (`oklch(0.745 0.080 185)`): image/audio evidence status, successful extraction, and soft dream-glow details.
 
 ### Neutral
 
-- **Night Background** (`oklch(0.145 0.030 238)`): app body and mobile shell.
-- **Void Rail** (`oklch(0.080 0.010 250)`): app outer edge, header underlay, and screenshot-safe negative space.
-- **Ink Surface** (`oklch(0.205 0.035 238)`): composer, timeline items, and tool panels.
-- **Raised Surface** (`oklch(0.275 0.045 236)`): active inspector panels and output cards.
-- **Main Ink** (`oklch(0.965 0.010 235)`): body text on dark surfaces.
-- **Muted Ink** (`oklch(0.760 0.030 232)`): secondary labels that still remain readable.
+- **Warm Night Background** (`oklch(0.185 0.018 55)`): app body and mobile shell.
+- **Soft Void Rail** (`oklch(0.130 0.012 55)`): app outer edge, header underlay, and screenshot-safe negative space.
+- **Charcoal Ink Surface** (`oklch(0.235 0.018 58)`): composer, timeline items, and tool panels.
+- **Raised Warm Surface** (`oklch(0.295 0.020 62)`): active inspector panels and output cards.
+- **Main Ink** (`oklch(0.960 0.010 78)`): body text on dark surfaces.
+- **Muted Ink** (`oklch(0.760 0.018 78)`): secondary labels that still remain readable.
 
 ### Named Rules
 
@@ -194,7 +198,8 @@ The pact inspector is a live customs file, not just a final HTML card. It shows
 
 ### Do:
 
-- **Do** make the bottom composer the most obvious control on mobile and desktop.
+- **Do** make the unified composer the most obvious control on mobile and desktop.
+- **Do** keep the first declaration controls above the timeline so a tired user can start immediately.
 - **Do** keep every phase actionable with one clear next step.
 - **Do** use generated raster imagery for the dream atmosphere, header state, or empty state.
 - **Do** verify dark-mode contrast for body text, labels, placeholders, chips, and disabled controls.
@@ -205,6 +210,8 @@ The pact inspector is a live customs file, not just a final HTML card. It shows
 - **Don't** ship a plain Gradio two-column form as the primary experience.
 - **Don't** use beige parchment, tarot, faux therapy, or generic purple AI visuals.
 - **Don't** use one-shot generation as the whole flow.
-- **Don't** hide `Add material`, `Continue negotiation`, or `Seal pact` below the fold.
+- **Don't** expose technical model routes as first-level controls unless the user opens model settings.
+- **Don't** render navigation-looking text that cannot be clicked.
+- **Don't** reserve tall empty panels for future content on the first screen.
 - **Don't** pair a 1px border with a large soft shadow on every card.
 - **Don't** use side-stripe borders, gradient text, or decorative glass panels.

app.py

@@ -624,6 +624,891 @@ body,
     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;
+  }
+}
 """
 
 
@@ -645,87 +1530,148 @@ def build_demo() -> gr.Blocks:
         with gr.Column(elem_classes=["dc-app-shell"]):
             status_html = gr.HTML()
 
-            with gr.Row(elem_classes=["dc-main-grid"]):
-                with gr.Column(scale=7, elem_classes=["dc-timeline-column"]):
-                    timeline_html = gr.HTML()
-                with gr.Column(scale=4, elem_classes=["dc-inspector-column"]):
+            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"])
 
-            with gr.Column(elem_classes=["dc-composer-panel"]):
-                notice_html = gr.HTML()
-                dream_text = gr.Textbox(
-                    label="Dream material",
-                    lines=4,
-                    value="我梦见一部迟到的电梯，按钮都融化了，我一直到不了 14 楼。",
-                    placeholder="Type the dream, a fragment, or a new piece of material.",
-                )
-                with gr.Row():
-                    image_input = gr.Image(label="Attach image", type="filepath", height=150)
-                    audio_input = gr.Audio(label="Record voice", type="filepath")
-                    mood = gr.Dropdown(
-                        label="Mood chip",
-                        choices=["foggy", "anxious", "curious", "tired", "restless", "calm"],
-                        value="foggy",
-                    )
-                with gr.Row():
-                    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():
-                    text_backend = gr.Dropdown(
-                        label="Text route",
-                        choices=["demo", "model", "ollama"],
-                        value="demo",
-                    )
-                    vision_backend = gr.Dropdown(
-                        label="Vision route",
-                        choices=["demo", "model", "ollama"],
-                        value="demo",
-                    )
-                with gr.Row(elem_classes=["dc-action-row"]):
-                    send_btn = gr.Button("Send to customs", elem_classes=["dc-primary"])
-                    add_btn = gr.Button("Add material")
-                    ask_btn = gr.Button("Ask another question")
-                    answer_btn = gr.Button("Answer question")
-                    skip_btn = gr.Button("Skip question")
-                    draft_btn = gr.Button("Draft pact")
-                    revise_btn = gr.Button("Revise pact")
-                    seal_btn = gr.Button("Seal today's pact", elem_classes=["dc-seal-button"])
-                    new_btn = gr.Button("Start a new declaration")
-
-            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")
 
-            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.",
+            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],
-            )
+                    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],

design-qa.md

@@ -0,0 +1,24 @@
+# Dream Customs V4 Design QA
+
+Date: 2026-06-05
+
+Reference: user-provided Codex-style multimodal composer screenshot.
+
+## Checks
+
+- First screen uses one rounded multimodal composer instead of separate form blocks.
+- Visible composer tools are limited to Image, Voice, Mood, Add, and Send.
+- Technical Text/Vision routes are collapsed under Model routes.
+- Pact inspector remains visible beside the composer on desktop.
+- Timeline, diagnostics, examples, workflow shortcuts, and refinement controls are secondary.
+- Text-only Chrome flow completed: Send -> Draft pact -> Seal today's pact.
+- Sealed output renders a screenshot-friendly Today's Pact card.
+- No desktop horizontal overflow in Chrome at the inspected viewport.
+
+## Notes
+
+- Image and voice use compact upload buttons to avoid large Gradio media drop zones in the first screen.
+- Voice upload remains available as an input to the existing ASR adapter path.
+- The UI keeps safety copy non-diagnostic.
+
+final result: passed

docs/handoff.md

@@ -4,7 +4,17 @@ Last updated: 2026-06-05
 
 ## Current State
 
-The project is in concept/spec stage. A visual HTML concept note already exists at:
+The project has shipped a working Gradio MVP and a V4 local UI pass. The current interface centers a warm Codex-like multimodal composer: text, image upload, voice upload, mood, add-material, and send live inside one rounded input surface. Model routes, workflow shortcuts, diagnostics, and examples are collapsed by default.
+
+Current V4 UX decisions:
+
+- The first screen prioritizes the dream declaration composer and pact inspector.
+- Image and voice use compact upload buttons to avoid large Gradio media drop zones in the main composer.
+- `Draft pact` and `Seal today's pact` sit beside the live pact inspector.
+- The timeline is a supporting "Story so far" section below the first-screen workflow.
+- Technical model route controls are available but not first-level visual chrome.
+
+The original visual HTML concept note remains useful background:
 
 - `docs/dream-customs-concept/index.html`
 
@@ -14,12 +24,14 @@ Supporting images:
 - `docs/dream-customs-concept/assets/multimodal-intake.svg`
 - `docs/dream-customs-concept/assets/alliance-card.svg`
 
-This handoff adds project context documents for implementation:
+Project context documents:
 
 - `docs/spec.md`
 - `docs/prd.md`
 - `docs/handoff.md`
 - `docs/superpowers/plans/2026-06-05-dream-customs-mvp.md`
+- `docs/superpowers/plans/2026-06-05-dream-customs-uiux-v2.md`
+- `docs/superpowers/plans/2026-06-05-dream-customs-uiux-v3.md`
 - `AGENTS.md`
 
 ## Product Decision
@@ -79,7 +91,7 @@ The product must never present itself as therapy, medical advice, or diagnosis.
 
 ## Recommended First Implementation
 
-Create a minimal Python package:
+The minimal Python package already exists:
 
 ```text
 app.py
@@ -100,26 +112,26 @@ tests/
   test_pipeline.py
 ```
 
-Start with mocked model clients and deterministic examples. Add real model loading only after schema, safety, rendering, and pipeline tests pass.
+The current implementation keeps deterministic demo clients as the default and exposes optional model routes. For V3, do not rebuild the pipeline from scratch. Fix the app shell, control hierarchy, phase actions, and visual polish while preserving the existing `CustomsSession` state flow.
 
 ## Implementation Priorities
 
-1. Text-only flow.
-2. Card rendering.
-3. Safety layer.
-4. Image clue extraction.
-5. Voice transcription adapter.
-6. Demo examples.
-7. Space packaging.
+1. First-screen trust and immediate declaration controls.
+2. Clickable phase actions.
+3. Mobile-readable composer and inspector.
+4. Removal of long blank page regions.
+5. Tests and local browser verification.
+6. Branch commit/push and Space update when credentials allow.
 
-## Known Repository Issue
+## Repository Status
 
-The current directory is under git root `/Users/junhaocheng`, whose remote is `adjcjh777/vlarepo.git`. This is likely not the intended Build Small repository. Also, `.git/info/exclude` currently ignores paths beneath this workspace root.
+This directory is now a dedicated Dream Customs repository:
 
-Do not push these files to the VLA remote by accident. Before implementation, either:
+- Local path: `/Users/junhaocheng/working-dir/ai-competitions/build-small-hackthon`
+- GitHub remote: `https://github.com/adjcjh777/dream-customs-build-small.git`
+- Hugging Face Space remote: `https://huggingface.co/spaces/build-small-hackathon/dream-customs`
 
-1. initialize a dedicated repo in `/Users/junhaocheng/working-dir/ai-competitions/build-small-hackthon`, or
-2. move this context into the intended Build Small repository/Space repo.
+Continue to confirm `git remote -v` before pushing, but the earlier VLA remote warning is no longer the active state.
 
 ## Open Questions For User
 

dream_customs/app_logic.py

@@ -39,6 +39,10 @@ def _file_path(value: Any) -> str:
         return value
     if isinstance(value, dict):
         return str(value.get("path") or value.get("name") or "")
+    if hasattr(value, "path"):
+        return str(getattr(value, "path") or "")
+    if hasattr(value, "name"):
+        return str(getattr(value, "name") or "")
     if isinstance(value, (list, tuple)) and value:
         return _file_path(value[0])
     return ""

dream_customs/render.py

@@ -27,26 +27,20 @@ def _evidence_chip(item: EvidenceItem) -> str:
 
 
 def render_status_bar(session: CustomsSession, text_backend: str = "demo", vision_backend: str = "demo") -> str:
-    safety = "Support note ready" if session.safety_flags else "Playful reflection, not medical advice"
+    safety = "Support note ready" if session.safety_flags else "Playful reflection, not diagnosis"
     return f"""
 <header class="dc-statusbar">
   <div class="dc-brand-lockup">
     <span class="dc-brand-mark">DC</span>
     <div>
       <h1>Dream Customs / 梦境海关</h1>
-      <p>Night desk for filing dream fragments into today's pact.</p>
+      <p>Turn last night's strange visitor into one gentle pact for the day: a practical suggestion, a small weird task, and a bedtime release.</p>
     </div>
   </div>
-  <nav class="dc-phase-rail" aria-label="Dream Customs phase">
-    <span class="{'is-active' if session.phase in ['empty', 'declaring'] else ''}">Declare</span>
-    <span class="{'is-active' if session.phase == 'negotiating' else ''}">Inspect</span>
-    <span class="{'is-active' if session.phase == 'drafting' else ''}">Draft</span>
-    <span class="{'is-active' if session.phase == 'sealed' else ''}">Seal</span>
-  </nav>
   <div class="dc-system-status">
-    <span>{escape(_phase_label(session.phase))}</span>
-    <span>Text: {escape(text_backend or "demo")}</span>
-    <span>Vision: {escape(vision_backend or "demo")}</span>
+    <span>Current: {escape(_phase_label(session.phase))}</span>
+    <span>Text {escape(text_backend or "demo")}</span>
+    <span>Vision {escape(vision_backend or "demo")}</span>
     <span>{escape(safety)}</span>
   </div>
 </header>
@@ -96,8 +90,9 @@ def render_timeline(session: CustomsSession) -> str:
 <section class="dc-timeline-shell" aria-label="Dream Customs timeline">
   <div class="dc-timeline-head">
     <div>
-      <h2>Customs timeline</h2>
-      <p>Evidence, questions, answers, and pact drafts stay in one file.</p>
+      <span class="dc-section-kicker">Customs timeline</span>
+      <h2>Story so far</h2>
+      <p>Dream fragments, clerk questions, and pact drafts stay together so the ritual feels easy to follow.</p>
     </div>
     <span>{session.evidence_count()} filed</span>
   </div>
@@ -117,7 +112,7 @@ def render_pact_inspector(session: CustomsSession) -> str:
 <aside class="dc-inspector is-waiting" aria-label="Pact inspector">
   <div class="dc-inspector-kicker">Pact inspector</div>
   <h2>No pact drafted yet</h2>
-  <p>Add material, ask a customs question, then draft a pact when the file feels useful enough.</p>
+  <p>Your alliance card will appear here after the clerk has enough dream material. Text-only is enough to begin.</p>
   <dl>
     <div><dt>Evidence</dt><dd>{session.evidence_count()} filed</dd></div>
     <div><dt>Phase</dt><dd>{escape(_phase_label(session.phase))}</dd></div>
@@ -176,14 +171,14 @@ def render_pact_card(card: PactCard) -> str:
     return f"""
 <style>
   .pact-card {{
-    color: oklch(0.965 0.010 235);
+    color: oklch(0.170 0.016 55);
     background:
-      radial-gradient(circle at 78% 0%, oklch(0.705 0.160 28 / 0.18), transparent 28%),
-      linear-gradient(135deg, oklch(0.205 0.035 238), oklch(0.145 0.030 238));
-    border: 2px solid oklch(0.705 0.160 28);
-    border-radius: 14px;
-    box-shadow: 0 8px 0 oklch(0.080 0.010 250 / 0.55);
-    font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
+      radial-gradient(circle at 88% 0%, oklch(0.830 0.120 76 / 0.20), transparent 26%),
+      linear-gradient(135deg, oklch(0.965 0.014 82), oklch(0.900 0.028 72));
+    border: 1px solid oklch(0.700 0.140 32 / 0.42);
+    border-radius: 18px;
+    box-shadow: 0 18px 38px oklch(0.130 0.012 55 / 0.34);
+    font-family: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
     line-height: 1.55;
     margin: 8px 0;
     max-width: 860px;
@@ -191,7 +186,7 @@ def render_pact_card(card: PactCard) -> str:
   }}
   .pact-header {{
     align-items: center;
-    border-bottom: 1px solid oklch(0.430 0.055 235);
+    border-bottom: 1px solid oklch(0.700 0.140 32 / 0.22);
     display: flex;
     font-weight: 720;
     justify-content: space-between;
@@ -199,14 +194,14 @@ def render_pact_card(card: PactCard) -> str:
     padding-bottom: 10px;
   }}
   .pact-card h2 {{
-    color: oklch(0.965 0.010 235) !important;
+    color: oklch(0.170 0.016 55) !important;
     font-size: 2rem;
     line-height: 1.1;
     margin: 0 0 4px;
     text-wrap: balance;
   }}
   .pact-card h3 {{
-    color: oklch(0.820 0.110 185) !important;
+    color: oklch(0.455 0.090 155) !important;
     font-size: 1.35rem;
     margin: 0 0 18px;
   }}
@@ -215,18 +210,19 @@ def render_pact_card(card: PactCard) -> str:
   .pact-card div,
   .pact-card span {{
     color: oklch(0.900 0.018 235) !important;
+    color: oklch(0.230 0.018 55) !important;
   }}
   .pact-header span {{
-    color: oklch(0.965 0.010 235) !important;
+    color: oklch(0.280 0.020 55) !important;
   }}
   .dc-label {{
-    color: oklch(0.820 0.110 185) !important;
+    color: oklch(0.455 0.090 155) !important;
     font-weight: 720;
   }}
   .dc-seal {{
-    border: 2px solid oklch(0.705 0.160 28);
+    border: 2px solid oklch(0.700 0.140 32);
     border-radius: 999px;
-    color: oklch(0.705 0.160 28) !important;
+    color: oklch(0.700 0.140 32) !important;
     display: inline-block;
     font-weight: 820;
     margin-top: 12px;
@@ -234,8 +230,8 @@ def render_pact_card(card: PactCard) -> str:
     transform: rotate(-4deg);
   }}
   .dc-sealed-safety {{
-    background: oklch(0.705 0.160 28 / 0.13);
-    border: 1px solid oklch(0.705 0.160 28 / 0.72);
+    background: oklch(0.700 0.140 32 / 0.10);
+    border: 1px solid oklch(0.700 0.140 32 / 0.34);
     border-radius: 10px;
     padding: 12px 14px;
   }}