Update Figment Gradio Server UI

README.md

@@ -4,7 +4,7 @@ emoji: 📉
 colorFrom: indigo
 colorTo: red
 sdk: gradio
-sdk_version: 5.50.0
+sdk_version: 6.17.3
 app_file: app.py
 pinned: false
 python_version: 3.11
@@ -18,7 +18,7 @@ Figment uses deterministic rules for danger signs and an AI protocol navigator f
 
 > ⚠️ **Figment is not a medical device.** It does not diagnose, prescribe, or replace a clinician. It is a prototype for protocol navigation, escalation support, and documentation in low-connectivity environments, for use by trained responders. See [Safety & non-goals](#safety--non-goals).
 
-- **Status:** In active development for the [Build Small Hackathon](docs/build-small-hackathon-org-card.md) (build window **June 5–15, 2026**). The Gradio scaffold, deterministic rules, hosted NVIDIA Omni client, local OpenAI-compatible client, canned fallback, traces, and tests run locally; the hosted NVIDIA API smoke test is green. The 50-case hosted Omni eval has run: baseline whole-output model competence was **28/50**, and the load-bearing follow-up reached **31/50** with **480/650** model-retained fields, **170/650** deterministic patches, **8/50** full fallback, and **50/50** final validation. Public Space cold-boot evidence is still missing; the last known public Space API state reported `runtime.stage=NO_APP_FILE`, so local health must not be described as a runnable public Space. Local 4B runtime evidence, Parakeet ASR evidence, demo video, social post, and user-test notes are still proof-needed items tracked in the [adversarial review action items](docs/adversarial-review-action-items.md), [hosted eval results](docs/hosted_omni_eval_results.md), [parameter/evidence ledger](docs/model_parameter_evidence_ledger.md), and [submission checklist](docs/submission_checklist.md).
+- **Status:** In active development for the [Build Small Hackathon](docs/build-small-hackathon-org-card.md) (build window **June 5-15, 2026**). The Gradio scaffold, deterministic rules, hosted NVIDIA Omni client, local OpenAI-compatible client, canned fallback, traces, and tests run locally; the hosted NVIDIA API smoke test is green. The public Hugging Face Space now boots with app files present at commit `5dcfc5c830de7331eca9020b17e1c571a8619654`; a no-secret public workflow smoke loaded a demo case, confirmed typed intake, fired deterministic pediatric-dehydration escalation, retrieved protocol cards, and produced an honestly labeled `canned_backend` trace with `validation_status=passed`, `raw_audio_stored=false`, and zero model-retained fields. The 50-case hosted Omni eval has run: baseline whole-output model competence was **28/50**, and the load-bearing follow-up reached **31/50** with **480/650** model-retained fields, **170/650** deterministic patches, **8/50** full fallback, and **50/50** final validation. Local 4B runtime evidence, Parakeet ASR evidence, demo video, social post, and user-test notes are still proof-needed items tracked in the [adversarial review action items](docs/adversarial-review-action-items.md), [hosted eval results](docs/hosted_omni_eval_results.md), [parameter/evidence ledger](docs/model_parameter_evidence_ledger.md), and [submission checklist](docs/submission_checklist.md).
 - **Track target:** Backyard AI (solve a real problem for a specific, real person you know). Final evidence still needs a real trained responder using synthetic or de-identified scenarios; see [user test notes](docs/user_test_notes.md).
 - **Built for:** a real disaster-response volunteer trained in disaster-response first aid and local protocol use; name withheld for privacy.
 - **Model:** NVIDIA **Nemotron 3 Nano Omni 30B-A3B Reasoning** as the v1 default. The model-card body reports 31B total parameters; the workback plan and [parameter/evidence ledger](docs/model_parameter_evidence_ledger.md) track the HF-sidebar count ambiguity, local 4B + Parakeet story, adapter count status, and organizer-confirmation status.
@@ -37,7 +37,7 @@ The design goal is restraint. Figment is **a field protocol binder that can talk
 
 ## What it does
 
-Figment is a [Gradio](https://www.gradio.app/) app with five frozen tabs:
+Figment is a [Gradio Server](https://www.gradio.app/guides/server-mode) app with five frozen workflow views:
 
 1. **Intake** — structured capture of setting, patient age, pregnancy status, chief concern, symptoms, vitals, allergies, medications, available supplies, and a free-text responder note. Optional audio intake drafts fields only; typed/edited values must be confirmed before rules or navigation run.
 2. **Risk Check** — deterministic red-flag rules fire **before** the LLM and set the minimum urgency floor (e.g. altered mental status, severe respiratory distress, chest pain, stroke signs, pregnancy bleeding, pediatric lethargy, severe dehydration signs, fever escalation criteria, wound infection escalation criteria).
@@ -50,7 +50,7 @@ Figment is a [Gradio](https://www.gradio.app/) app with five frozen tabs:
 ## How it works
 
 ```text
-Gradio Blocks UI
+Gradio Server custom frontend + Gradio API endpoints
   → structured intake schema
   → rules.py        (deterministic red-flag engine)
   → retrieval.py    (SQLite FTS protocol search)
@@ -86,7 +86,7 @@ Omni can satisfy an off-grid claim if it is self-hosted on sufficient local hard
 | `nvidia/NVIDIA-Nemotron-3-Nano-4B-BF16` | local text-navigation and first fine-tuning target |
 | `nvidia/parakeet-rnnt-1.1b` | local/offline ASR target, enabled only after the local ASR gate passes |
 
-Reference dev/demo machine: an M4 Pro MacBook Pro with 48 GB RAM. Hosted Omni is the intended public Space story; local audio is Parakeet-only after verification, and the safe local proof may use typed intake or a canned transcript if ASR is not stable.
+Reference dev/demo machine: an M4 Pro MacBook Pro with 48 GB RAM. Hosted Omni is the intended public Space story; local audio is Parakeet-only after verification, and the safe local proof may use typed intake or a canned transcript if ASR is not stable. The full 4B BF16 artifact and Parakeet `.nemo` artifact are present locally, but the local 50-case text eval and local ASR provider proof still need to be run before any local badge claim is upgraded.
 
 ---
 
@@ -127,25 +127,43 @@ If the hosted model is unavailable or returns invalid JSON, Figment falls back t
 
 ### 2. Run against a local OpenAI-compatible server
 
-To target a local OpenAI-compatible server after the Nemotron 3 Nano 4B path is verified:
+To target a local OpenAI-compatible server after the Nemotron 3 Nano 4B path is verified, use the full BF16 4B model as the canonical local text artifact:
 
 ```bash
 vllm serve nvidia/NVIDIA-Nemotron-3-Nano-4B-BF16 \
   --served-model-name nemotron3-nano-4b-bf16 \
   --trust-remote-code \
   --max-model-len 16384
+```
+
+The full-weight snapshot has been downloaded locally at:
+
+```text
+/Users/drake.thomsen/.cache/huggingface/hub/models--nvidia--NVIDIA-Nemotron-3-Nano-4B-BF16/snapshots/dfaf35de3e30f1867dd8dbc38a7fc9fb52d3914f
+```
+
+For a local run, expose that full-weight runtime through an OpenAI-compatible `/v1/chat/completions` endpoint and point Figment at it. Set `MODEL_BACKEND=llama_cpp`, `MODEL_STACK=local_4b_parakeet`, `LLAMA_BASE_URL=<local-openai-compatible-endpoint>/v1`, and `LOCAL_MODEL_ID=nvidia/NVIDIA-Nemotron-3-Nano-4B-BF16` in `.env`. Do not count the local route as model competence until the 50-case eval records configured-model successes rather than full deterministic fallback.
+
+To capture the local evidence bundle once the endpoint is live:
 
-# Or, on the Mac/off-grid path, use a verified 4B llama.cpp-compatible quantization:
-llama-server \
-  -hf <verified-nemotron-3-nano-4b-gguf> \
-  --ctx-size 16384 \
-  --port 8001 \
-  --host 127.0.0.1 \
-  --temp 0.4 \
-  --top-p 0.9
+```bash
+PYTHON_DOTENV_DISABLED=true \
+python3 scripts/run_local_4b_evidence.py \
+  --base-url http://127.0.0.1:8001/v1
+```
+
+The helper writes `/v1/models` metadata, one-case route smoke, eval JSONL, eval summary, and `eval_evidence_manifest.json` under `traces/local_4b_evidence_*`. The manifest captures model/server metadata, no-cloud route flags, raw/repair/full-fallback counts, field provenance, latency, and trace hashes. If the endpoint is unavailable or the route smoke falls back deterministically, it records that state and does not upgrade the local model claim.
+
+To capture the local Parakeet ASR evidence bundle once a real local ASR adapter or device runtime produces provider output:
+
+```bash
+PYTHON_DOTENV_DISABLED=true \
+python3 scripts/run_local_asr_evidence.py \
+  --provider-payload <local-parakeet-provider-output.json> \
+  --audio <optional-source-audio.wav>
 ```
 
-Set `MODEL_BACKEND=llama_cpp`, `MODEL_STACK=local_4b_parakeet`, `LLAMA_BASE_URL=http://127.0.0.1:8001/v1`, and `LOCAL_MODEL_ID=nvidia/NVIDIA-Nemotron-3-Nano-4B-BF16` in `.env`.
+The ASR helper records Parakeet artifact metadata, optional audio metadata without copying raw audio, provider-output hash, Figment draft checks, and `asr_evidence_manifest.json`. Artifact presence alone does not count as local ASR proof.
 
 ### 3. Canned fallback
 
@@ -161,7 +179,7 @@ The submission Space target is under the **build-small-hackathon** Hugging Face
 
 [build-small-hackathon/figment](https://huggingface.co/spaces/build-small-hackathon/figment)
 
-The submission target is a live Gradio demo powered by a hosted or self-hosted Nemotron Omni endpoint. Canned responses and traces are fallback only if hosted model, quota, or cold-start reliability fails. The public Space is **not yet claimed runnable**: the last known public Space API evidence reported `runtime.stage=NO_APP_FILE` with only metadata files present. Public Space cold-boot evidence, app-file presence, typed intake, and trace labeling remain proof-needed in the [submission checklist](docs/submission_checklist.md).
+The submission target is a live Gradio demo powered by a hosted or self-hosted Nemotron Omni endpoint. Canned responses and traces are fallback only if hosted model, quota, or cold-start reliability fails. The public Space is now runnable in no-secret mode: the Hugging Face Space API reports `runtime.stage=RUNNING`, `app.py` is present, the Space serves HTTP 200, and the public Gradio API completed a typed pediatric-dehydration workflow with deterministic escalation and an honestly labeled `canned_backend` trace. Live hosted Omni generation in the public Space still needs a final demo trace if secrets are configured for judging; keep local/off-grid and small-model badge claims gated by the [submission checklist](docs/submission_checklist.md).
 
 ---
 
@@ -171,7 +189,7 @@ This repo now holds the runnable scaffold plus the planning docs. Current struct
 
 ```text
 figment/
-  app.py                # Gradio Blocks UI
+  app.py                # Gradio Server app and custom frontend
   figment/              # config, schemas, rules, retrieval, model_client,
                         #   prompt_builder, validators, trace, sbar
   data/
@@ -198,7 +216,7 @@ docs/superpowers/specs/  docs/superpowers/plans/  # design spec + implementation
 requirements.txt / requirements-dev.txt / .env.example
 ```
 
-Key docs: [workback plan](docs/figment-workback-plan.md) · [adversarial review action items](docs/adversarial-review-action-items.md) · [hosted eval results](docs/hosted_omni_eval_results.md) · [parameter/evidence ledger](docs/model_parameter_evidence_ledger.md) · [submission checklist](docs/submission_checklist.md) · [safety statement](docs/safety_statement.md) · [user test notes](docs/user_test_notes.md) · [prerequisites](docs/prerequisites.md) · [hackathon rules](docs/build-small-hackathon-org-card.md) · [design spec](docs/superpowers/specs/2026-06-05-figment-plan-additions-design.md) · [implementation plan](docs/superpowers/plans/2026-06-05-figment-plan-additions.md).
+Key docs: [workback plan](docs/figment-workback-plan.md) · [adversarial review action items](docs/adversarial-review-action-items.md) · [hosted eval results](docs/hosted_omni_eval_results.md) · [parameter/evidence ledger](docs/model_parameter_evidence_ledger.md) · [local llama evidence](docs/local_llama_eval_evidence.md) · [local Parakeet ASR evidence](docs/local_parakeet_asr_evidence.md) · [submission checklist](docs/submission_checklist.md) · [safety statement](docs/safety_statement.md) · [user test notes](docs/user_test_notes.md) · [prerequisites](docs/prerequisites.md) · [hackathon rules](docs/build-small-hackathon-org-card.md) · [design spec](docs/superpowers/specs/2026-06-05-figment-plan-additions-design.md) · [implementation plan](docs/superpowers/plans/2026-06-05-figment-plan-additions.md).
 
 ---
 
@@ -236,7 +254,7 @@ Figment is deliberately scoped. **It will not:**
 - **replace a clinician** — the trained responder remains the decision-maker;
 - **serve untrained users** — it is a tool for trained responders;
 - **store PHI or raw audio** — traces scrub raw audio-like payloads and uploaded filenames;
-- **hide hosted-mode data flow** — hosted Space mode may send synthetic or de-identified text/audio to the configured Omni endpoint, while local mode keeps runtime inputs on-device;
+- **hide hosted-mode data flow** — hosted Space mode may send synthetic or de-identified text/audio to the configured Omni endpoint, while local mode keeps runtime inputs on the local machine;
 - **act autonomously** — every output is advisory and requires human judgment.
 
 This posture reflects real risk: the WHO has warned that authoritative-sounding health AI can create automation bias, and the FDA regulates clinical-decision-support software depending on its claims and users. Figment makes no clinical claims. See the fuller [safety statement](docs/safety_statement.md).
@@ -251,7 +269,7 @@ This posture reflects real risk: the WHO has warned that authoritative-sounding
 | Synthetic dataset | CC-BY-4.0 |
 | Code | [Apache-2.0](LICENSE) |
 
-Data handling: local mode keeps runtime inputs on-device; hosted mode is for synthetic or de-identified demo inputs only; traces do not retain raw audio.
+Data handling: local mode keeps runtime inputs on the local machine; hosted mode is for synthetic or de-identified demo inputs only; traces do not retain raw audio.
 
 ---
 
@@ -275,7 +293,7 @@ Submission claims are evidence-gated:
 
 | Claim / badge area | Current status | Proof needed before claiming achieved |
 | ------------------ | -------------- | ------------------------------------- |
-| Hosted Gradio Space | Targeted / proof-needed; not currently claimed runnable | Public Space app files present, cold boot, typed intake run, trace showing actual route and fallback status |
+| Hosted Gradio Space | Runnable in no-secret canned-fallback mode; live hosted-model demo trace still proof-needed | Public Space app files present, cold boot, typed intake run, trace showing `raw_route=canned`, `final_route=canned_backend`, `validation_status=passed`, and `raw_audio_stored=false` |
 | Backyard AI | Targeted / proof-needed | A real trained responder using synthetic or de-identified scenarios, recorded in [user test notes](docs/user_test_notes.md) |
 | Off the Grid | Targeted, not yet proven | Recorded no-cloud run using either self-hosted Omni on adequate local hardware or the smaller verified local stack |
 | Llama Champion | Targeted, not yet proven | Working eligible local model route with trace/eval evidence |

app.py

@@ -3,9 +3,12 @@
 from __future__ import annotations
 
 import html
+import json
 from pathlib import Path
 from typing import Any
 
+from fastapi.responses import HTMLResponse
+
 from figment.audio_intake import confirm_audio_draft as _confirm_audio_draft
 from figment.audio_intake import draft_audio_intake as _draft_audio_intake
 from figment.config import FigmentConfig, load_config
@@ -20,8 +23,10 @@ from figment.validators import urgency_floor_from_rules, validate_audio_ready
 
 try:
     import gradio as gr
+    from gradio.data_classes import FileData
 except (ImportError, OSError):  # pragma: no cover - lets unit tests import without gradio installed
     gr = None
+    FileData = Any  # type: ignore[misc, assignment]
 
 
 TAB_TITLES = [
@@ -39,6 +44,19 @@ DEMO_AUDIO_FILENAMES = (
     "case_3_dictated_intake.wav",
 )
 
+INTAKE_FIELD_KEYS = (
+    "setting",
+    "patient_age",
+    "pregnancy_status",
+    "chief_concern",
+    "symptoms",
+    "vitals",
+    "allergies",
+    "medications",
+    "available_supplies",
+    "responder_note",
+)
+
 
 DEMO_CASES: dict[str, dict[str, str]] = {
     "Disaster clinic: pediatric dehydration": {
@@ -220,215 +238,89 @@ def build_app(config: FigmentConfig | None = None):
     if gr is None:
         return _FallbackDemo()
 
-    with gr.Blocks(title="Figment", css=FIGMENT_CSS, theme=gr.themes.Base(), fill_width=True) as demo:
-        gr.HTML(_app_header_html())
-        gr.HTML(_statusline_html(config))
-        intake_state = gr.State({})
-        audio_state = gr.State(None)
-        trace_state = gr.State({})
-
-        with gr.Tabs(elem_classes=["figment-tabs"]):
-            with gr.Tab(TAB_TITLES[0]):
-                with gr.Column(elem_classes=["figment-tab-body"]):
-                    with gr.Row():
-                        with gr.Column(scale=11, elem_classes=["figment-panel"]):
-                            gr.HTML(_section_header_html("1. Quick start", "Load a frozen synthetic demo case, or type directly into the confirmed intake form."))
-                            with gr.Row():
-                                demo_case = gr.Dropdown(list(DEMO_CASES), label="Demo case", scale=4)
-                                load_demo = gr.Button("Load", scale=1)
-                            gr.HTML(_demo_case_pills_html())
-
-                            gr.HTML(
-                                _section_header_html(
-                                    _audio_section_title(config),
-                                    _audio_section_subtitle(config),
-                                )
-                            )
-                            with gr.Row():
-                                with gr.Column(scale=3):
-                                    audio_clip = gr.Audio(
-                                        label=_audio_clip_label(config),
-                                        sources=["microphone", "upload"],
-                                        type="filepath",
-                                        interactive=config.enable_audio_intake,
-                                    )
-                                with gr.Column(scale=2):
-                                    draft_btn = gr.Button(
-                                        "Draft Audio Fields",
-                                        elem_classes=["primary"],
-                                        interactive=config.enable_audio_intake,
-                                    )
-                                    apply_audio = gr.Button("Apply Audio Draft", interactive=config.enable_audio_intake)
-                                    gr.HTML(_audio_runtime_chips_html(config))
-                            transcript = gr.Textbox(
-                                label=_transcript_label(config),
-                                lines=3,
-                                interactive=config.enable_audio_intake,
-                            )
-                            if examples := _demo_audio_examples():
-                                with gr.Accordion("Backup: upload/test audio clips", open=False):
-                                    gr.HTML(
-                                        '<div class="figment-section-subtitle">'
-                                        "Use these only for testing, browser microphone failures, or repeatable demo fallback."
-                                        "</div>"
-                                    )
-                                    gr.Examples(examples=examples, inputs=[audio_clip, transcript], label="Backup demo clips")
-
-                            gr.HTML(_section_header_html("3. Confirmed intake", "Protocol rules and navigation run only after this intake is confirmed."))
-                            with gr.Row():
-                                setting = gr.Textbox(label="Setting")
-                                patient_age = gr.Textbox(label="Patient age")
-                                pregnancy_status = gr.Textbox(label="Pregnancy status")
-                            chief_concern = gr.Textbox(label="Chief concern")
-                            symptoms = gr.Textbox(label="Symptoms")
-                            vitals = gr.Textbox(label="Vitals")
-                            with gr.Row():
-                                allergies = gr.Textbox(label="Allergies")
-                                medications = gr.Textbox(label="Medications")
-                            supplies = gr.Textbox(label="Available supplies")
-                            note = gr.Textbox(label="Responder note", lines=4)
-
-                        with gr.Column(scale=9, elem_classes=["figment-panel"]):
-                            gr.HTML(_section_header_html("Audio draft field suggestions", "Review timecoded suggestions before applying them to the editable intake."))
-                            audio_json = gr.JSON(label="Audio draft", elem_classes=["figment-json-compact"])
-                            gr.HTML(_section_header_html("Live confirmed intake preview", "This is the only source allowed to feed deterministic rules and navigation."))
-                            intake_json = gr.JSON(label="Confirmed intake", elem_classes=["figment-json-compact"])
-                            confirm_btn = gr.Button("Confirm Intake", elem_classes=["primary"])
-
-            with gr.Tab(TAB_TITLES[1]):
-                with gr.Column(elem_classes=["figment-tab-body"]):
-                    with gr.Row():
-                        with gr.Column(scale=8, elem_classes=["figment-panel"]):
-                            gr.HTML(_section_header_html("Deterministic Red-Flag Checklist", "Reference checklist for the frozen safety floor. These rules are deterministic."))
-                            gr.HTML(_red_flag_checklist_html())
-                        with gr.Column(scale=10, elem_classes=["figment-panel"]):
-                            gr.HTML(_section_header_html("Rule Output", "The model cannot lower the deterministic protocol_urgency floor."))
-                            risk_btn = gr.Button("Run Risk Check", elem_classes=["primary"])
-                            risk_html = gr.HTML(_risk_summary_html(_empty_risk_result()))
-                            with gr.Accordion("Raw deterministic red flags JSON", open=False):
-                                risk_json = gr.JSON(label="Deterministic red flags", elem_classes=["figment-json-compact"])
-
-            with gr.Tab(TAB_TITLES[2]):
-                with gr.Column(elem_classes=["figment-tab-body"]):
-                    with gr.Row():
-                        with gr.Column(scale=8, elem_classes=["figment-panel"]):
-                            gr.HTML(_section_header_html("Protocol Card Browser", "Local protocol cards retrieved from the confirmed intake."))
-                            gr.HTML(_protocol_library_html())
-                            retrieve_btn = gr.Button("Retrieve Protocol Cards", elem_classes=["primary"])
-                        with gr.Column(scale=10, elem_classes=["figment-panel"]):
-                            guidance_html = gr.HTML(_protocol_results_html([]))
-                            guidance_evidence = gr.Textbox(label="Protocol evidence panel", lines=8, interactive=False)
-                            with gr.Accordion("Retrieved protocol cards JSON", open=False):
-                                guidance_json = gr.JSON(label="Retrieved protocol cards", elem_classes=["figment-json-compact"])
-
-            with gr.Tab(TAB_TITLES[3]):
-                with gr.Column(elem_classes=["figment-tab-body"]):
-                    with gr.Row():
-                        with gr.Column(scale=8, elem_classes=["figment-panel"]):
-                            gr.HTML(_section_header_html("Navigator Output JSON", "Machine-readable protocol navigation output."))
-                            nav_btn = gr.Button("Run Navigator", elem_classes=["primary"])
-                            output_json = gr.JSON(label="Navigator output", elem_classes=["figment-json-tall"])
-                        with gr.Column(scale=10, elem_classes=["figment-panel"]):
-                            navigator_html = gr.HTML(_navigator_summary_html({}))
-                            sbar_text = gr.Textbox(label="SBAR handoff", lines=8)
-
-            with gr.Tab(TAB_TITLES[4]):
-                with gr.Column(elem_classes=["figment-tab-body"]):
-                    with gr.Row():
-                        with gr.Column(scale=8, elem_classes=["figment-panel"]):
-                            gr.HTML(_section_header_html("Run Steps (Timeline)", "Audit trail from intake through validation."))
-                            trace_audit_html = gr.HTML(_trace_audit_html({}))
-                            export_trace = gr.Button("Export Trace")
-                            trace_file = gr.File(label="Trace download", interactive=False)
-                        with gr.Column(scale=10, elem_classes=["figment-panel"]):
-                            gr.HTML(_section_header_html("Trace JSON", "Raw audit object for review and export."))
-                            trace_json = gr.JSON(label="Trace", elem_classes=["figment-json-tall"])
-
-        gr.HTML(_footer_rail_html(config))
-
-        fields = [setting, patient_age, pregnancy_status, chief_concern, symptoms, vitals, allergies, medications, supplies, note]
-        source_outputs = [
-            intake_json,
-            risk_json,
-            risk_html,
-            guidance_json,
-            guidance_evidence,
-            guidance_html,
-            output_json,
-            sbar_text,
-            navigator_html,
-            trace_json,
-            trace_file,
-            trace_audit_html,
-            intake_state,
-            trace_state,
-        ]
-        audio_source_outputs = [
-            audio_json,
-            intake_json,
-            risk_json,
-            risk_html,
-            guidance_json,
-            guidance_evidence,
-            guidance_html,
-            output_json,
-            sbar_text,
-            navigator_html,
-            trace_json,
-            trace_file,
-            trace_audit_html,
-            intake_state,
-            audio_state,
-            trace_state,
-        ]
-        load_demo.click(
-            _load_demo_case_and_reset,
-            inputs=[demo_case],
-            outputs=[
-                *fields,
-                audio_clip,
-                transcript,
-                audio_json,
-                intake_json,
-                risk_json,
-                risk_html,
-                guidance_json,
-                guidance_evidence,
-                guidance_html,
-                output_json,
-                sbar_text,
-                navigator_html,
-                trace_json,
-                trace_file,
-                trace_audit_html,
-                intake_state,
-                audio_state,
-                trace_state,
-            ],
-        )
-        draft_btn.click(
-            lambda audio_file, transcript_text: _draft_audio_ui(audio_file, transcript_text, config=config),
-            inputs=[audio_clip, transcript],
-            outputs=[audio_json],
-        ).then(lambda x: x, inputs=[audio_json], outputs=[audio_state]).then(_clear_source_outputs, outputs=source_outputs)
-        apply_audio.click(_apply_audio_draft_ui, inputs=[*fields, audio_state], outputs=[*fields, audio_json, audio_state]).then(
-            _clear_source_outputs,
-            outputs=source_outputs,
-        )
-        for source in fields:
-            source.change(_clear_source_outputs, outputs=source_outputs)
-        audio_clip.change(_clear_audio_outputs, outputs=audio_source_outputs)
-        transcript.change(_clear_audio_outputs, outputs=audio_source_outputs)
-        confirm_btn.click(_confirm_ui_intake, inputs=[*fields, audio_state], outputs=[intake_json, intake_state, audio_state])
-        risk_btn.click(_risk_ui_with_summary, inputs=[intake_state], outputs=[risk_json, risk_html])
-        retrieve_btn.click(_retrieve_with_evidence_and_summary_ui, inputs=[intake_state], outputs=[guidance_json, guidance_evidence, guidance_html])
-        nav_btn.click(
-            lambda intake, audio_draft: _navigate_ui_with_summary(intake, audio_draft, config=config),
-            inputs=[intake_state, audio_state],
-            outputs=[output_json, sbar_text, trace_json, trace_state, navigator_html, trace_audit_html],
-        )
-        export_trace.click(lambda trace: trace_download_path(trace, config=config) if trace else None, inputs=[trace_state], outputs=[trace_file])
-    return demo
+    if not hasattr(gr, "Server"):
+        raise RuntimeError("Figment Server mode requires gradio>=6.0 so gradio.Server is available.")
+
+    server = gr.Server(
+        title="Figment",
+        summary="Protocol navigator for field clinics and disaster response.",
+        version="1.0.0",
+    )
+
+    @server.api(name="runtime", concurrency_limit=None)
+    def runtime_api() -> dict[str, Any]:
+        return _runtime_payload(config)
+
+    @server.api(name="load_demo_case", concurrency_limit=None)
+    def load_demo_case_api(name: str) -> dict[str, Any]:
+        fields = _fields_dict_from_values(_load_demo_case(name))
+        return {
+            "fields": fields,
+            "intake": collect_intake(*_field_values(fields)),
+            "risk": _empty_risk_result(),
+            "risk_html": _risk_summary_html(_empty_risk_result()),
+            "guidance_html": _protocol_results_html([]),
+            "navigator_html": _navigator_summary_html({}),
+            "trace_audit_html": _trace_audit_html({}),
+        }
+
+    @server.api(name="draft_audio", concurrency_limit=1)
+    def draft_audio_api(audio_file: FileData | None = None, transcript: str = "") -> dict[str, Any]:
+        path = _file_data_path(audio_file)
+        return draft_audio_intake(transcript=transcript or "", config=config, audio_file=path)
+
+    @server.api(name="apply_audio_draft", concurrency_limit=None)
+    def apply_audio_draft_api(fields: dict[str, Any], audio_draft: dict[str, Any] | None = None) -> dict[str, Any]:
+        values = _field_values(fields)
+        updated = _apply_audio_draft_ui(*values, audio_draft)
+        updated_fields = _fields_dict_from_values(updated[: len(INTAKE_FIELD_KEYS)])
+        return {
+            "fields": updated_fields,
+            "audio_draft": updated[-1],
+            "intake": collect_intake(*_field_values(updated_fields)),
+            "risk": _empty_risk_result(),
+            "risk_html": _risk_summary_html(_empty_risk_result()),
+            "guidance_html": _protocol_results_html([]),
+            "navigator_html": _navigator_summary_html({}),
+            "trace_audit_html": _trace_audit_html({}),
+        }
+
+    @server.api(name="confirm_intake", concurrency_limit=None)
+    def confirm_intake_api(fields: dict[str, Any], audio_draft: dict[str, Any] | None = None) -> dict[str, Any]:
+        confirmed, intake_state, updated_audio = _confirm_ui_intake(*_field_values(fields), audio_draft)
+        return {"intake": confirmed, "intake_state": intake_state, "audio_draft": updated_audio}
+
+    @server.api(name="risk_check", concurrency_limit=None)
+    def risk_check_api(intake: dict[str, Any]) -> dict[str, Any]:
+        risk, summary = _risk_ui_with_summary(intake)
+        return {"risk": risk, "risk_html": summary}
+
+    @server.api(name="retrieve_protocol_cards", concurrency_limit=None)
+    def retrieve_protocol_cards_api(intake: dict[str, Any]) -> dict[str, Any]:
+        cards, evidence, summary = _retrieve_with_evidence_and_summary_ui(intake)
+        return {"cards": cards, "evidence": evidence, "guidance_html": summary}
+
+    @server.api(name="run_navigator", concurrency_limit=1)
+    def run_navigator_api(intake: dict[str, Any], audio_draft: dict[str, Any] | None = None) -> dict[str, Any]:
+        output, sbar, trace, trace_state, summary, audit = _navigate_ui_with_summary(intake, audio_draft, config=config)
+        return {
+            "navigator_output": output,
+            "sbar": sbar,
+            "trace": trace,
+            "trace_state": trace_state,
+            "navigator_html": summary,
+            "trace_audit_html": audit,
+        }
+
+    @server.get("/", response_class=HTMLResponse)
+    async def homepage() -> str:
+        return _server_homepage_html(config)
+
+    @server.get("/health")
+    async def health() -> dict[str, str]:
+        return {"status": "ok", "mode": "gradio.Server"}
+
+    return server
 
 
 def _h(value: Any) -> str:
@@ -484,6 +376,582 @@ def _footer_rail_html(config: FigmentConfig) -> str:
     """
 
 
+def _runtime_payload(config: FigmentConfig) -> dict[str, Any]:
+    return {
+        "model_mode_label": _model_mode_label(config),
+        "model_stack": config.model_stack,
+        "model_backend": config.model_backend,
+        "audio_backend": config.audio_backend,
+        "enable_audio_intake": config.enable_audio_intake,
+        "audio_section_title": _audio_section_title(config),
+        "audio_section_subtitle": _audio_section_subtitle(config),
+        "audio_clip_label": _audio_clip_label(config),
+        "transcript_label": _transcript_label(config),
+        "audio_chips_html": _audio_runtime_chips_html(config),
+        "demo_audio_examples": _demo_audio_examples(),
+        "status_text": _status_text(config),
+    }
+
+
+def _fields_dict_from_values(values: list[Any] | tuple[Any, ...]) -> dict[str, str]:
+    return {key: str(value or "") for key, value in zip(INTAKE_FIELD_KEYS, values, strict=True)}
+
+
+def _field_values(fields: dict[str, Any] | None) -> list[str]:
+    fields = fields or {}
+    return [str(fields.get(key, "") or "") for key in INTAKE_FIELD_KEYS]
+
+
+def _file_data_path(file_data: Any) -> str | None:
+    if not file_data:
+        return None
+    if isinstance(file_data, dict):
+        path = file_data.get("path")
+        return str(path) if path else None
+    path = getattr(file_data, "path", None)
+    return str(path) if path else None
+
+
+def _json_for_script(value: Any) -> str:
+    return json.dumps(value, ensure_ascii=True).replace("</", "<\\/")
+
+
+def _server_homepage_html(config: FigmentConfig) -> str:
+    initial_data = {
+        "tabTitles": TAB_TITLES,
+        "fieldKeys": INTAKE_FIELD_KEYS,
+        "runtime": _runtime_payload(config),
+        "emptyRisk": _empty_risk_result(),
+        "riskHtml": _risk_summary_html(_empty_risk_result()),
+        "protocolLibraryHtml": _protocol_library_html(),
+        "guidanceHtml": _protocol_results_html([]),
+        "navigatorHtml": _navigator_summary_html({}),
+        "traceAuditHtml": _trace_audit_html({}),
+    }
+    html_doc = """
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1">
+    <title>Figment</title>
+    <style>
+__FIGMENT_CSS__
+    </style>
+  </head>
+  <body>
+    <main class="figment-app-shell">
+      <aside class="figment-mission-rail" aria-label="Mission context">
+      <header class="figment-topbar">
+        <div class="figment-brand">
+          <a class="figment-logo" href="/" aria-label="Homepage">Figment</a>
+          <div class="figment-positioning">Offline protocol support for field clinics and disaster response.</div>
+        </div>
+        <div class="figment-safety">
+          <span class="figment-safety-mark">!</span>
+          <span>For trained responders only. Not a substitute for clinical judgment.</span>
+        </div>
+      </header>
+
+      <section class="figment-statusline" aria-label="Runtime status">
+        <strong>Runtime</strong>
+        <span class="figment-chip blue" id="runtime-mode"></span>
+        <span class="figment-chip" id="runtime-stack"></span>
+        <span class="figment-chip" id="runtime-backend"></span>
+        <span class="figment-chip" id="runtime-audio"></span>
+        <span class="figment-chip green">Privacy: no raw audio retained in traces</span>
+      </section>
+
+      <nav class="figment-tabs" aria-label="Workflow">
+        <button class="figment-tab-button" type="button" data-view="intake">Intake</button>
+        <button class="figment-tab-button" type="button" data-view="risk">Risk Check</button>
+        <button class="figment-tab-button" type="button" data-view="protocol">Protocol Guidance</button>
+        <button class="figment-tab-button" type="button" data-view="navigator">Navigator Output + Handoff</button>
+        <button class="figment-tab-button" type="button" data-view="trace">Trace</button>
+      </nav>
+
+      <p class="figment-live-status" id="live-status" aria-live="polite">Server mode ready. Gradio queue endpoints are connected.</p>
+
+      <footer class="figment-footer-rail">
+        <div class="figment-footer-cluster">
+          <strong>Server mode</strong>
+          <span class="figment-chip blue">gradio.Server</span>
+          <span class="figment-chip">Custom HTML/CSS/JS frontend</span>
+          <span class="figment-chip">Gradio API queue retained</span>
+        </div>
+        <div class="figment-footer-cluster">
+          <strong>Harness</strong>
+          <span class="figment-chip green">v1.0.0 schema</span>
+          <span class="figment-chip green">Deterministic red-flag floor enabled</span>
+        </div>
+      </footer>
+      </aside>
+
+      <section class="figment-operation-board" aria-label="Case workspace">
+
+      <section class="figment-view" id="view-intake" data-view-panel="intake">
+        <div class="figment-workspace figment-workspace-intake">
+          <section class="figment-panel figment-intake-panel">
+            <div class="figment-panel-heading">
+              <div>
+                <span class="figment-kicker">Intake</span>
+                <h2>Case intake</h2>
+                <p>Responder-entered facts for the protocol run.</p>
+              </div>
+            </div>
+            <form id="intake-form" class="figment-field-grid">
+              <label class="figment-control" for="field-setting">
+                <span>Setting</span>
+                <input id="field-setting" name="setting" type="text">
+              </label>
+              <label class="figment-control" for="field-patient_age">
+                <span>Patient age</span>
+                <input id="field-patient_age" name="patient_age" type="text">
+              </label>
+              <label class="figment-control" for="field-pregnancy_status">
+                <span>Pregnancy status</span>
+                <input id="field-pregnancy_status" name="pregnancy_status" type="text">
+              </label>
+              <label class="figment-control figment-control-wide" for="field-chief_concern">
+                <span>Chief concern</span>
+                <input id="field-chief_concern" name="chief_concern" type="text">
+              </label>
+              <label class="figment-control figment-control-wide" for="field-symptoms">
+                <span>Symptoms</span>
+                <input id="field-symptoms" name="symptoms" type="text">
+              </label>
+              <label class="figment-control figment-control-wide" for="field-vitals">
+                <span>Vitals</span>
+                <input id="field-vitals" name="vitals" type="text">
+              </label>
+              <label class="figment-control" for="field-allergies">
+                <span>Allergies</span>
+                <input id="field-allergies" name="allergies" type="text">
+              </label>
+              <label class="figment-control" for="field-medications">
+                <span>Medications</span>
+                <input id="field-medications" name="medications" type="text">
+              </label>
+              <label class="figment-control figment-control-wide" for="field-available_supplies">
+                <span>Available supplies</span>
+                <input id="field-available_supplies" name="available_supplies" type="text">
+              </label>
+              <label class="figment-control figment-control-wide" for="field-responder_note">
+                <span>Responder note</span>
+                <textarea id="field-responder_note" name="responder_note" rows="4"></textarea>
+              </label>
+            </form>
+
+            <div class="figment-section-divider"></div>
+
+            <section class="figment-audio-draft" aria-labelledby="audio-title">
+              <div class="figment-panel-heading figment-panel-heading-action">
+                <div>
+                  <span class="figment-kicker">Audio draft</span>
+                  <h2 id="audio-title"></h2>
+                  <p id="audio-subtitle"></p>
+                </div>
+                <div id="audio-runtime-chips" class="figment-chip-row"></div>
+              </div>
+              <div class="figment-audio-grid">
+                <label class="figment-control" for="audio-file">
+                  <span id="audio-file-label"></span>
+                  <input id="audio-file" name="audio_file" type="file" accept="audio/*">
+                </label>
+                <div class="figment-audio-actions">
+                  <button class="figment-button figment-button-secondary" id="draft-audio" type="button">Draft audio fields</button>
+                  <button class="figment-button figment-button-secondary" id="apply-audio" type="button">Apply audio draft</button>
+                </div>
+              </div>
+              <label class="figment-control" for="transcript">
+                <span id="transcript-label"></span>
+                <textarea id="transcript" name="transcript" rows="3"></textarea>
+              </label>
+            </section>
+          </section>
+
+          <aside class="figment-panel figment-sticky-panel figment-review-panel">
+            <div class="figment-panel-heading figment-panel-heading-action figment-review-heading">
+              <div>
+                <span class="figment-kicker">Review</span>
+                <h2>Confirmed intake</h2>
+                <p>Protocol rules and navigation use this payload.</p>
+              </div>
+              <button class="figment-button figment-button-primary" id="confirm-intake" type="button">Confirm intake</button>
+            </div>
+            <pre class="figment-json" id="intake-json">{}</pre>
+            <div class="figment-section-divider"></div>
+            <div class="figment-panel-heading">
+              <div>
+                <span class="figment-kicker">Draft</span>
+                <h2>Audio suggestions</h2>
+                <p>Timecoded field suggestions before apply.</p>
+              </div>
+            </div>
+            <pre class="figment-json" id="audio-json">{}</pre>
+          </aside>
+        </div>
+      </section>
+
+      <section class="figment-view" id="view-risk" data-view-panel="risk" hidden>
+        <div class="figment-workspace">
+          <section class="figment-panel">
+            <div class="figment-panel-heading">
+              <div>
+                <h2>Deterministic red-flag checklist</h2>
+                <p>Reference checklist for the frozen safety floor. These rules are deterministic.</p>
+              </div>
+            </div>
+            __RED_FLAG_CHECKLIST__
+          </section>
+          <section class="figment-panel">
+            <div class="figment-panel-heading figment-panel-heading-action">
+              <div>
+                <h2>Rule output</h2>
+                <p>The model cannot lower the deterministic protocol_urgency floor.</p>
+              </div>
+              <button class="figment-button figment-button-primary" id="run-risk" type="button">Run risk check</button>
+            </div>
+            <div id="risk-html"></div>
+            <details class="figment-disclosure">
+              <summary>Raw deterministic red flags JSON</summary>
+              <pre class="figment-json" id="risk-json">{}</pre>
+            </details>
+          </section>
+        </div>
+      </section>
+
+      <section class="figment-view" id="view-protocol" data-view-panel="protocol" hidden>
+        <div class="figment-workspace">
+          <section class="figment-panel">
+            <div class="figment-panel-heading figment-panel-heading-action">
+              <div>
+                <h2>Protocol card browser</h2>
+                <p>Local protocol cards retrieved from the confirmed intake.</p>
+              </div>
+              <button class="figment-button figment-button-primary" id="retrieve-cards" type="button">Retrieve protocol cards</button>
+            </div>
+            <div id="protocol-library"></div>
+          </section>
+          <section class="figment-panel">
+            <div id="guidance-html"></div>
+            <div class="figment-section-divider"></div>
+            <label class="figment-control" for="guidance-evidence">
+              <span>Protocol evidence panel</span>
+              <textarea id="guidance-evidence" name="guidance_evidence" rows="8" readonly></textarea>
+            </label>
+            <details class="figment-disclosure">
+              <summary>Retrieved protocol cards JSON</summary>
+              <pre class="figment-json" id="guidance-json">[]</pre>
+            </details>
+          </section>
+        </div>
+      </section>
+
+      <section class="figment-view" id="view-navigator" data-view-panel="navigator" hidden>
+        <div class="figment-workspace">
+          <section class="figment-panel">
+            <div class="figment-panel-heading figment-panel-heading-action">
+              <div>
+                <h2>Navigator output JSON</h2>
+                <p>Machine-readable protocol navigation output.</p>
+              </div>
+              <button class="figment-button figment-button-primary" id="run-navigator" type="button">Run navigator</button>
+            </div>
+            <pre class="figment-json figment-json-tall" id="output-json">{}</pre>
+          </section>
+          <section class="figment-panel">
+            <div id="navigator-html"></div>
+            <label class="figment-control" for="sbar-text">
+              <span>SBAR handoff</span>
+              <textarea id="sbar-text" name="sbar_text" rows="8" readonly></textarea>
+            </label>
+          </section>
+        </div>
+      </section>
+
+      <section class="figment-view" id="view-trace" data-view-panel="trace" hidden>
+        <div class="figment-workspace">
+          <section class="figment-panel">
+            <div class="figment-panel-heading figment-panel-heading-action">
+              <div>
+                <h2>Run steps timeline</h2>
+                <p>Audit trail from intake through validation.</p>
+              </div>
+              <button class="figment-button figment-button-secondary" id="export-trace" type="button">Export trace</button>
+            </div>
+            <div id="trace-audit-html"></div>
+          </section>
+          <section class="figment-panel">
+            <div class="figment-panel-heading">
+              <div>
+                <h2>Trace JSON</h2>
+                <p>Raw audit object for review and export.</p>
+              </div>
+            </div>
+            <pre class="figment-json figment-json-tall" id="trace-json">{}</pre>
+          </section>
+        </div>
+      </section>
+
+      </section>
+    </main>
+
+    <script id="figment-data" type="application/json">__FIGMENT_DATA__</script>
+    <script type="module">
+      import { Client, handle_file } from "https://cdn.jsdelivr.net/npm/@gradio/client/dist/index.min.js";
+
+      const initial = JSON.parse(document.getElementById("figment-data").textContent);
+      const fieldKeys = initial.fieldKeys;
+      const clientPromise = Client.connect(window.location.origin);
+      const state = {
+        fields: emptyFields(),
+        intake: {},
+        audioDraft: null,
+        risk: initial.emptyRisk,
+        cards: [],
+        evidence: "",
+        navigatorOutput: {},
+        sbar: "",
+        trace: {},
+        riskHtml: initial.riskHtml,
+        guidanceHtml: initial.guidanceHtml,
+        navigatorHtml: initial.navigatorHtml,
+        traceAuditHtml: initial.traceAuditHtml,
+      };
+
+      const $ = (selector) => document.querySelector(selector);
+      const $$ = (selector) => Array.from(document.querySelectorAll(selector));
+
+      function emptyFields() {
+        return Object.fromEntries(initial.fieldKeys.map((key) => [key, ""]));
+      }
+
+      async function predict(name, args = []) {
+        const client = await clientPromise;
+        const result = await client.predict(`/${name}`, args);
+        return result.data[0];
+      }
+
+      function setLiveStatus(message) {
+        $("#live-status").textContent = message;
+      }
+
+      function setBusy(button, busy) {
+        if (!button) return;
+        button.disabled = busy;
+        button.classList.toggle("figment-button-loading", busy);
+      }
+
+      async function runAction(button, pendingMessage, doneMessage, action) {
+        try {
+          setBusy(button, true);
+          setLiveStatus(pendingMessage);
+          await action();
+          setLiveStatus(doneMessage);
+        } catch (error) {
+          console.error(error);
+          setLiveStatus(error?.message || "Action failed. Check the browser console.");
+        } finally {
+          setBusy(button, false);
+        }
+      }
+
+      function readFields() {
+        const fields = {};
+        for (const key of fieldKeys) {
+          fields[key] = $(`#field-${key}`).value;
+        }
+        return fields;
+      }
+
+      function writeFields(fields) {
+        for (const key of fieldKeys) {
+          const input = $(`#field-${key}`);
+          if (input) input.value = fields?.[key] || "";
+        }
+        state.fields = { ...emptyFields(), ...(fields || {}) };
+      }
+
+      function resetDownstream() {
+        state.intake = {};
+        state.risk = initial.emptyRisk;
+        state.cards = [];
+        state.evidence = "";
+        state.navigatorOutput = {};
+        state.sbar = "";
+        state.trace = {};
+        state.riskHtml = initial.riskHtml;
+        state.guidanceHtml = initial.guidanceHtml;
+        state.navigatorHtml = initial.navigatorHtml;
+        state.traceAuditHtml = initial.traceAuditHtml;
+      }
+
+      function renderJson(selector, value) {
+        $(selector).textContent = JSON.stringify(value ?? {}, null, 2);
+      }
+
+      function render() {
+        renderJson("#audio-json", state.audioDraft || {});
+        renderJson("#intake-json", state.intake || {});
+        renderJson("#risk-json", state.risk || {});
+        renderJson("#guidance-json", state.cards || []);
+        renderJson("#output-json", state.navigatorOutput || {});
+        renderJson("#trace-json", state.trace || {});
+        $("#risk-html").innerHTML = state.riskHtml || initial.riskHtml;
+        $("#guidance-html").innerHTML = state.guidanceHtml || initial.guidanceHtml;
+        $("#guidance-evidence").value = state.evidence || "";
+        $("#navigator-html").innerHTML = state.navigatorHtml || initial.navigatorHtml;
+        $("#sbar-text").value = state.sbar || "";
+        $("#trace-audit-html").innerHTML = state.traceAuditHtml || initial.traceAuditHtml;
+      }
+
+      function setView(name) {
+        for (const panel of $$("[data-view-panel]")) {
+          panel.hidden = panel.dataset.viewPanel !== name;
+        }
+        for (const button of $$(".figment-tab-button")) {
+          const active = button.dataset.view === name;
+          button.classList.toggle("is-active", active);
+          button.setAttribute("aria-current", active ? "page" : "false");
+        }
+      }
+
+      async function ensureConfirmed() {
+        if (state.intake?.confirmed) return;
+        const payload = await predict("confirm_intake", [readFields(), state.audioDraft]);
+        state.intake = payload.intake || {};
+        state.audioDraft = payload.audio_draft || state.audioDraft;
+        render();
+      }
+
+      async function draftAudio() {
+        const file = $("#audio-file").files[0];
+        const transcript = $("#transcript").value;
+        const args = file ? [handle_file(file), transcript] : [null, transcript];
+        state.audioDraft = await predict("draft_audio", args);
+        resetDownstream();
+        render();
+      }
+
+      async function applyAudioDraft() {
+        const payload = await predict("apply_audio_draft", [readFields(), state.audioDraft]);
+        writeFields(payload.fields || {});
+        state.audioDraft = payload.audio_draft || null;
+        resetDownstream();
+        state.risk = payload.risk || initial.emptyRisk;
+        state.riskHtml = payload.risk_html || initial.riskHtml;
+        state.guidanceHtml = payload.guidance_html || initial.guidanceHtml;
+        state.navigatorHtml = payload.navigator_html || initial.navigatorHtml;
+        state.traceAuditHtml = payload.trace_audit_html || initial.traceAuditHtml;
+        render();
+      }
+
+      async function confirmIntake() {
+        const payload = await predict("confirm_intake", [readFields(), state.audioDraft]);
+        state.intake = payload.intake || {};
+        state.audioDraft = payload.audio_draft || state.audioDraft;
+        render();
+      }
+
+      async function runRisk() {
+        await ensureConfirmed();
+        const payload = await predict("risk_check", [state.intake]);
+        state.risk = payload.risk || initial.emptyRisk;
+        state.riskHtml = payload.risk_html || initial.riskHtml;
+        render();
+      }
+
+      async function retrieveCards() {
+        await ensureConfirmed();
+        const payload = await predict("retrieve_protocol_cards", [state.intake]);
+        state.cards = payload.cards || [];
+        state.evidence = payload.evidence || "";
+        state.guidanceHtml = payload.guidance_html || initial.guidanceHtml;
+        render();
+      }
+
+      async function runNavigator() {
+        await ensureConfirmed();
+        const payload = await predict("run_navigator", [state.intake, state.audioDraft]);
+        state.navigatorOutput = payload.navigator_output || {};
+        state.sbar = payload.sbar || "";
+        state.trace = payload.trace || {};
+        state.navigatorHtml = payload.navigator_html || initial.navigatorHtml;
+        state.traceAuditHtml = payload.trace_audit_html || initial.traceAuditHtml;
+        render();
+      }
+
+      function exportTrace() {
+        if (!state.trace || Object.keys(state.trace).length === 0) {
+          setLiveStatus("Run the navigator before exporting a trace.");
+          return;
+        }
+        const blob = new Blob([JSON.stringify(state.trace, null, 2)], { type: "application/json" });
+        const url = URL.createObjectURL(blob);
+        const link = document.createElement("a");
+        link.href = url;
+        link.download = "figment-trace.json";
+        link.click();
+        URL.revokeObjectURL(url);
+        setLiveStatus("Trace export prepared in the browser.");
+      }
+
+      function initialize() {
+        const runtime = initial.runtime;
+        $("#runtime-mode").textContent = runtime.model_mode_label;
+        $("#runtime-stack").textContent = `MODEL_STACK=${runtime.model_stack}`;
+        $("#runtime-backend").textContent = `MODEL_BACKEND=${runtime.model_backend}`;
+        $("#runtime-audio").textContent = `ENABLE_AUDIO_INTAKE=${runtime.enable_audio_intake ? "ON" : "OFF"}`;
+        $("#runtime-audio").classList.add(runtime.enable_audio_intake ? "green" : "amber");
+        $("#audio-title").textContent = runtime.audio_section_title;
+        $("#audio-subtitle").textContent = runtime.audio_section_subtitle;
+        $("#audio-file-label").textContent = runtime.audio_clip_label;
+        $("#transcript-label").textContent = runtime.transcript_label;
+        $("#audio-runtime-chips").innerHTML = runtime.audio_chips_html;
+        $("#protocol-library").innerHTML = initial.protocolLibraryHtml;
+
+        for (const button of $$(".figment-tab-button")) {
+          button.addEventListener("click", () => setView(button.dataset.view));
+        }
+        for (const input of $$("#intake-form input, #intake-form textarea")) {
+          input.addEventListener("input", () => {
+            state.fields = readFields();
+            resetDownstream();
+            render();
+          });
+        }
+
+        $("#draft-audio").addEventListener("click", () => runAction($("#draft-audio"), "Drafting audio fields through Gradio Server.", "Audio draft updated.", draftAudio));
+        $("#apply-audio").addEventListener("click", () => runAction($("#apply-audio"), "Applying audio draft.", "Audio draft applied to editable intake.", applyAudioDraft));
+        $("#confirm-intake").addEventListener("click", () => runAction($("#confirm-intake"), "Confirming intake.", "Confirmed intake is ready for rules and navigation.", confirmIntake));
+        $("#run-risk").addEventListener("click", () => runAction($("#run-risk"), "Running deterministic red-flag checks.", "Risk check complete.", runRisk));
+        $("#retrieve-cards").addEventListener("click", () => runAction($("#retrieve-cards"), "Retrieving local protocol cards.", "Protocol cards retrieved.", retrieveCards));
+        $("#run-navigator").addEventListener("click", () => runAction($("#run-navigator"), "Running navigator through Gradio Server.", "Navigator output and trace complete.", runNavigator));
+        $("#export-trace").addEventListener("click", exportTrace);
+
+        const audioEnabled = Boolean(runtime.enable_audio_intake);
+        $("#audio-file").disabled = !audioEnabled;
+        $("#transcript").disabled = !audioEnabled;
+        $("#draft-audio").disabled = !audioEnabled;
+        $("#apply-audio").disabled = !audioEnabled;
+
+        setView("intake");
+        render();
+      }
+
+      initialize();
+    </script>
+  </body>
+</html>
+"""
+    return (
+        html_doc.replace("__FIGMENT_CSS__", FIGMENT_CSS)
+        .replace("__FIGMENT_DATA__", _json_for_script(initial_data))
+        .replace("__RED_FLAG_CHECKLIST__", _red_flag_checklist_html())
+    )
+
+
 def _model_mode_label(config: FigmentConfig) -> str:
     if config.model_backend == "hosted_omni":
         return "Configured backend: hosted_omni"
@@ -494,14 +962,14 @@ def _model_mode_label(config: FigmentConfig) -> str:
 
 def _audio_section_title(config: FigmentConfig) -> str:
     if not config.enable_audio_intake or config.audio_backend == "none":
-        return "2. Audio draft intake disabled"
+        return "Audio draft intake disabled"
     if config.audio_backend == "omni_native" and config.model_backend == "hosted_omni":
-        return "2. Hosted Omni audio draft"
+        return "Hosted Omni audio draft"
     if config.audio_backend == "parakeet_nemo":
-        return "2. Local Parakeet ASR draft"
+        return "Local Parakeet ASR draft"
     if config.audio_backend == "canned":
-        return "2. Canned audio demo draft"
-    return "2. Audio draft intake"
+        return "Canned audio demo draft"
+    return "Audio draft intake"
 
 
 def _audio_section_subtitle(config: FigmentConfig) -> str:
@@ -556,11 +1024,6 @@ def _section_header_html(title: str, subtitle: str = "") -> str:
     return f'<div class="figment-section-title">{_h(title)}</div>{subtitle_html}'
 
 
-def _demo_case_pills_html() -> str:
-    pills = "".join(f'<div class="figment-demo-pill">{_h(name)}</div>' for name in DEMO_CASES)
-    return f'<div class="figment-quick-grid">{pills}</div>'
-
-
 def _red_flag_checklist_html() -> str:
     categories = {
         "Airway / Breathing": [
@@ -802,6 +1265,7 @@ def _navigator_summary_html(output: dict[str, Any], trace: dict[str, Any] | None
         urgency = "routine"
     handoff = output.get("handoff_note_sbar") if isinstance(output.get("handoff_note_sbar"), dict) else {}
     runtime_card = _runtime_contribution_card_html(trace)
+    evidence_card = _harness_evidence_card_html(output, trace)
     return f"""
     <div class="figment-urgency-banner">
       <div>
@@ -816,6 +1280,8 @@ def _navigator_summary_html(output: dict[str, Any], trace: dict[str, Any] | None
     <div style="height:12px"></div>
     {runtime_card}
     <div style="height:12px"></div>
+    {evidence_card}
+    <div style="height:12px"></div>
     <div class="figment-card-grid">
       {_navigator_list_card_html("Missing Observations", output.get("missing_info_to_collect"))}
       {_navigator_list_card_html("Responder Checklist", output.get("responder_checklist"), checked=True)}
@@ -865,6 +1331,42 @@ def _runtime_contribution_card_html(trace: dict[str, Any] | None) -> str:
     """
 
 
+def _harness_evidence_card_html(output: dict[str, Any] | None, trace: dict[str, Any] | None = None) -> str:
+    evidence = _harness_evidence_from(output, trace)
+    if not evidence:
+        return ""
+    retrieved_count = len(_as_list(evidence.get("retrieved_card_ids")))
+    rule_count = len(_as_list(evidence.get("deterministic_rule_ids")))
+    source_count = len(_as_list(evidence.get("source_card_ids")))
+    final_route = str(evidence.get("final_route") or "unknown")
+    return f"""
+    <div class="figment-mini-card">
+      <h4>Harness Evidence</h4>
+      <span class="figment-chip green">Intake confirmed: {_h(evidence.get('confirmed_intake'))}</span>
+      <span class="figment-chip green">Validation: {_h(evidence.get('validator_status'))}</span>
+      <span class="figment-chip">Retrieved cards: {_h(retrieved_count)}</span>
+      <span class="figment-chip">Rule results: {_h(rule_count)}</span>
+      <span class="figment-chip">Source cards: {_h(source_count)}</span>
+      <span class="figment-chip">Urgency floor: {_h(evidence.get('urgency_floor'))}</span>
+      <span class="figment-chip {_route_chip_class(final_route)}">Route: {_h(runtime_route_label(final_route))}</span>
+      <span class="figment-chip">Audio correction: {_h(evidence.get('audio_correction_status'))}</span>
+    </div>
+    """
+
+
+def _harness_evidence_from(output: dict[str, Any] | None, trace: dict[str, Any] | None = None) -> dict[str, Any]:
+    if isinstance(output, dict) and isinstance(output.get("harness_evidence"), dict):
+        return output["harness_evidence"]
+    if isinstance(trace, dict):
+        normalized = normalize_trace_payload(trace)
+        if isinstance(normalized.get("harness_evidence"), dict):
+            return normalized["harness_evidence"]
+        navigator_output = normalized.get("navigator_output")
+        if isinstance(navigator_output, dict) and isinstance(navigator_output.get("harness_evidence"), dict):
+            return navigator_output["harness_evidence"]
+    return {}
+
+
 def _navigator_list_card_html(title: str, values: Any, *, checked: bool = False) -> str:
     items = _as_list(values) or ["No items generated yet."]
     cls = "figment-checklist checked" if checked else "figment-checklist"
@@ -933,6 +1435,7 @@ def _trace_audit_html(trace: dict[str, Any]) -> str:
     route = trace.get("model_route") if isinstance(trace.get("model_route"), dict) else {}
     retrieval = trace.get("retrieval") if isinstance(trace.get("retrieval"), dict) else {}
     provenance_summary = trace.get("field_provenance_summary") if isinstance(trace.get("field_provenance_summary"), dict) else {}
+    evidence = _harness_evidence_from(None, trace)
     final_route = str(route.get("final_route") or "unknown")
     return f"""
     <table class="figment-table">
@@ -947,7 +1450,9 @@ def _trace_audit_html(trace: dict[str, Any]) -> str:
         <span class="figment-chip green">Schema valid: {_h(validator.get('passed'))}</span>
         <span class="figment-chip {_route_chip_class(final_route)}">{_h(runtime_route_label(route))}</span>
         <span class="figment-chip">Retrieval: {_h(retrieval.get('primary_source') or 'not traced')}</span>
+        <span class="figment-chip">Harness evidence: {_h('visible' if evidence else 'not traced')}</span>
       </div>
+      {_harness_evidence_card_html(None, trace)}
       <div class="figment-mini-card">
         <h4>Model &amp; Performance</h4>
         <table class="figment-table">
@@ -1274,4 +1779,4 @@ def _navigate_ui(
 
 
 if __name__ == "__main__":
-    build_app().queue().launch()
+    build_app().launch()

figment/ui_theme.py

@@ -1,216 +1,482 @@
-"""Presentation tokens for the Figment Gradio interface."""
+"""Presentation tokens for the Figment Gradio Server interface."""
 
 FIGMENT_CSS = """
+@import url("https://fonts.googleapis.com/css2?family=Inter:opsz,wght@14..32,400..850&display=swap");
+
 :root {
-  --figment-ink: #0f172a;
-  --figment-muted: #526174;
-  --figment-line: #d8e0ea;
+  --figment-ink: #18181b;
+  --figment-muted: #60606a;
+  --figment-subtle: #8a8a95;
+  --figment-line: rgba(24, 24, 27, 0.12);
+  --figment-line-strong: rgba(24, 24, 27, 0.18);
+  --figment-canvas: #f7f7f4;
   --figment-panel: #ffffff;
-  --figment-panel-soft: #f8fafc;
-  --figment-blue: #0b57d0;
-  --figment-blue-soft: #eaf2ff;
-  --figment-green: #17803d;
-  --figment-green-soft: #eaf8ef;
-  --figment-red: #c91515;
-  --figment-red-soft: #fff0f0;
-  --figment-amber: #b15b00;
-  --figment-amber-soft: #fff7e8;
-}
-
-.gradio-container {
-  max-width: none !important;
+  --figment-panel-soft: #f2f6f5;
+  --figment-control: #fbfbfa;
+  --figment-blue: #155eef;
+  --figment-blue-soft: #e8f0ff;
+  --figment-green: #087443;
+  --figment-green-soft: #e5f6ed;
+  --figment-red: #c81e1e;
+  --figment-red-soft: #fff0ee;
+  --figment-amber: #b45f06;
+  --figment-amber-soft: #fff5df;
+  --figment-radius: 8px;
+  --figment-shadow: 0 18px 50px rgba(24, 24, 27, 0.08);
+  color-scheme: light;
+  font-family: "Inter", ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
+  font-feature-settings: "cv02", "cv03", "cv04", "cv11", "ss01", "ss03";
+}
+
+* {
+  box-sizing: border-box;
+}
+
+html {
+  background: var(--figment-canvas);
+}
+
+body {
+  margin: 0;
+  min-width: 320px;
   color: var(--figment-ink);
-  background: #f5f7fb !important;
-  padding: 0 !important;
+  background:
+    linear-gradient(180deg, rgba(242, 246, 245, 0.85), rgba(247, 247, 244, 0.98) 420px),
+    var(--figment-canvas);
+  -webkit-font-smoothing: antialiased;
+  text-rendering: optimizeLegibility;
+}
+
+button,
+input,
+select,
+textarea {
+  font: inherit;
+}
+
+button {
+  cursor: pointer;
+}
+
+button:disabled,
+input:disabled,
+textarea:disabled {
+  cursor: not-allowed;
+  opacity: 0.58;
 }
 
-.figment-shell {
+a {
+  color: inherit;
+}
+
+.figment-app-shell {
+  isolate: isolate;
   min-height: 100vh;
+  padding: 16px;
+  background: var(--figment-canvas);
+}
+
+.figment-mission-rail,
+.figment-operation-board {
+  display: contents;
 }
 
 .figment-topbar {
   display: flex;
   align-items: center;
   justify-content: space-between;
-  gap: 24px;
-  padding: 16px 22px;
-  color: #fff;
-  background: linear-gradient(90deg, #061425 0%, #0b1d32 56%, #07111f 100%);
-  border-radius: 0;
-}
-
-.figment-topbar,
-.figment-topbar * {
-  color: #fff !important;
+  gap: 20px;
+  max-width: 1480px;
+  margin: 0 auto;
+  padding: 18px 20px;
+  border: 1px solid rgba(255, 255, 255, 0.14);
+  border-radius: var(--figment-radius);
+  background:
+    linear-gradient(135deg, rgba(8, 116, 67, 0.24), transparent 38%),
+    linear-gradient(90deg, #18181b, #202022);
+  box-shadow: var(--figment-shadow);
+  color: #ffffff;
 }
 
 .figment-brand {
   display: flex;
   align-items: baseline;
-  gap: 18px;
+  gap: 14px;
   min-width: 0;
 }
 
 .figment-logo {
-  font-size: 30px;
-  line-height: 1;
+  flex: 0 0 auto;
+  color: #ffffff;
+  font-size: 28px;
   font-weight: 760;
+  letter-spacing: 0;
+  line-height: 1;
+  text-decoration: none;
 }
 
 .figment-positioning {
+  min-width: 0;
+  color: rgba(255, 255, 255, 0.82);
   font-size: 15px;
-  opacity: 0.92;
-  white-space: nowrap;
+  line-height: 1.4;
 }
 
 .figment-safety {
   display: flex;
   align-items: center;
   gap: 9px;
+  flex: 0 1 auto;
+  min-width: 260px;
+  justify-content: flex-end;
+  color: rgba(255, 255, 255, 0.9);
   font-size: 14px;
-  opacity: 0.95;
-  white-space: nowrap;
+  line-height: 1.4;
 }
 
 .figment-safety-mark {
   display: grid;
   place-items: center;
+  flex: 0 0 auto;
   width: 22px;
   height: 22px;
   border: 1px solid rgba(255, 255, 255, 0.7);
   border-radius: 999px;
+  font-size: 14px;
   font-weight: 800;
 }
 
+.figment-statusline,
+.figment-tabs,
+.figment-live-status,
+.figment-view,
+.figment-footer-rail {
+  max-width: 1480px;
+  margin-right: auto;
+  margin-left: auto;
+}
+
 .figment-statusline {
   display: flex;
   flex-wrap: wrap;
   align-items: center;
-  gap: 10px 14px;
-  padding: 12px 16px;
-  margin: 14px 18px 0;
+  gap: 9px;
+  margin-top: 12px;
+  padding: 11px 12px;
   border: 1px solid var(--figment-line);
-  border-radius: 8px;
-  background: #fff;
+  border-radius: var(--figment-radius);
+  background: rgba(255, 255, 255, 0.84);
 }
 
-.figment-statusline strong {
-  font-size: 14px;
+.figment-statusline strong,
+.figment-footer-cluster strong {
+  color: var(--figment-muted);
+  font-size: 13px;
+  font-weight: 720;
+}
+
+.figment-chip-row,
+.figment-footer-cluster {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  gap: 8px;
 }
 
 .figment-chip {
   display: inline-flex;
   align-items: center;
+  max-width: 100%;
   min-height: 26px;
-  padding: 4px 10px;
+  padding: 4px 9px;
   border: 1px solid var(--figment-line);
-  border-radius: 6px;
-  background: #fff;
+  border-radius: 999px;
+  background: #ffffff;
   color: var(--figment-ink);
   font-size: 13px;
   font-weight: 650;
+  line-height: 1.25;
+  white-space: nowrap;
 }
 
 .figment-chip.blue {
-  border-color: #93b7ff;
+  border-color: rgba(21, 94, 239, 0.22);
   background: var(--figment-blue-soft);
-  color: #0749b2;
+  color: #1149b8;
 }
 
 .figment-chip.green {
-  border-color: #9ed7ad;
+  border-color: rgba(8, 116, 67, 0.2);
   background: var(--figment-green-soft);
-  color: #106a30;
+  color: var(--figment-green);
 }
 
 .figment-chip.red {
-  border-color: #ffabab;
+  border-color: rgba(200, 30, 30, 0.2);
   background: var(--figment-red-soft);
   color: var(--figment-red);
 }
 
 .figment-chip.amber {
-  border-color: #ffd58d;
+  border-color: rgba(180, 95, 6, 0.24);
   background: var(--figment-amber-soft);
   color: var(--figment-amber);
 }
 
 .figment-tabs {
-  margin: 14px 18px 0;
+  display: flex;
+  gap: 6px;
+  margin-top: 12px;
+  padding: 6px;
+  border: 1px solid var(--figment-line);
+  border-radius: var(--figment-radius);
+  background: rgba(255, 255, 255, 0.82);
+  overflow-x: auto;
 }
 
-.figment-tabs > .tab-nav,
-.figment-tabs [role="tablist"] {
-  background: #fff;
-  border: 1px solid var(--figment-line);
-  border-radius: 8px 8px 0 0;
+.figment-tab-button {
+  flex: 0 0 auto;
+  min-height: 38px;
+  padding: 8px 12px;
+  border: 0;
+  border-radius: 6px;
+  background: transparent;
+  color: var(--figment-muted);
+  font-size: 14px;
+  font-weight: 650;
+  white-space: nowrap;
 }
 
-.figment-tabs button[role="tab"] {
-  min-height: 54px;
-  font-weight: 680;
+.figment-tab-button.is-active {
+  background: #f0f3f1;
+  color: var(--figment-ink);
 }
 
-.figment-tabs button[aria-selected="true"] {
-  color: var(--figment-blue) !important;
-  border-bottom: 3px solid var(--figment-blue) !important;
+.figment-tab-button:focus-visible,
+.figment-button:focus-visible,
+input:focus-visible,
+select:focus-visible,
+textarea:focus-visible,
+summary:focus-visible {
+  outline: 2px solid var(--figment-blue);
+  outline-offset: 2px;
 }
 
-.figment-tab-body {
-  padding: 14px 0 0;
+.figment-live-status {
+  margin-top: 10px;
+  margin-bottom: 0;
+  color: var(--figment-muted);
+  font-size: 14px;
+  line-height: 1.5;
 }
 
-.figment-panel {
-  border: 1px solid var(--figment-line) !important;
-  border-radius: 8px !important;
-  background: var(--figment-panel) !important;
-  box-shadow: 0 1px 0 rgba(15, 23, 42, 0.03);
+.figment-view {
+  margin-top: 12px;
 }
 
-.figment-panel-soft {
+.figment-workspace {
+  display: grid;
+  grid-template-columns: minmax(0, 9fr) minmax(360px, 7fr);
+  gap: 12px;
+  align-items: start;
+}
+
+.figment-workspace-intake {
+  grid-template-columns: minmax(0, 10fr) minmax(340px, 6fr);
+}
+
+.figment-panel {
+  min-width: 0;
+  padding: 16px;
   border: 1px solid var(--figment-line);
-  border-radius: 8px;
-  background: var(--figment-panel-soft);
-  padding: 12px;
+  border-radius: var(--figment-radius);
+  background: var(--figment-panel);
+  box-shadow: 0 1px 0 rgba(24, 24, 27, 0.03);
+  overflow-x: auto;
 }
 
-.figment-section-title {
+.figment-sticky-panel {
+  position: sticky;
+  top: 12px;
+}
+
+.figment-panel-heading {
   display: flex;
-  align-items: center;
+  align-items: flex-start;
   justify-content: space-between;
   gap: 12px;
-  margin: 0 0 10px;
+  margin-bottom: 12px;
+}
+
+.figment-panel-heading h2,
+.figment-section-title {
+  margin: 0;
   color: var(--figment-ink);
   font-size: 16px;
-  font-weight: 760;
+  font-weight: 720;
+  letter-spacing: 0;
+  line-height: 1.35;
 }
 
+.figment-kicker {
+  display: block;
+  margin-bottom: 6px;
+  color: var(--figment-green);
+  font-size: 13px;
+  font-weight: 720;
+  line-height: 1.25;
+}
+
+.figment-panel-heading p,
 .figment-section-subtitle {
-  margin: -4px 0 12px;
+  margin: 4px 0 0;
+  max-width: 72ch;
   color: var(--figment-muted);
-  font-size: 13px;
+  font-size: 14px;
+  line-height: 1.5;
 }
 
-.figment-quick-grid {
+.figment-panel-heading-action {
+  align-items: center;
+}
+
+.figment-section-divider {
+  height: 1px;
+  margin: 16px 0;
+  background: var(--figment-line);
+}
+
+.figment-inline-controls,
+.figment-audio-grid {
   display: grid;
-  grid-template-columns: repeat(4, minmax(0, 1fr));
+  grid-template-columns: minmax(0, 1fr) auto;
+  gap: 10px;
+  align-items: end;
+}
+
+.figment-audio-grid {
+  grid-template-columns: minmax(0, 3fr) minmax(260px, 2fr);
+  align-items: stretch;
+}
+
+.figment-audio-actions {
+  display: flex;
+  flex-direction: column;
+  align-items: stretch;
+  justify-content: end;
   gap: 8px;
+  min-width: 0;
+}
+
+.figment-audio-draft {
+  display: grid;
+  gap: 12px;
+  min-width: 0;
+}
+
+.figment-review-panel {
+  display: grid;
+  align-content: start;
 }
 
-.figment-demo-pill {
+.figment-review-heading {
+  align-items: start;
+}
+
+.figment-field-grid {
+  display: grid;
+  grid-template-columns: repeat(3, minmax(0, 1fr));
+  gap: 10px;
+}
+
+.figment-control {
+  display: grid;
+  gap: 6px;
+  min-width: 0;
+}
+
+.figment-control-wide {
+  grid-column: 1 / -1;
+}
+
+.figment-control span {
+  color: var(--figment-muted);
+  font-size: 13px;
+  font-weight: 680;
+  line-height: 1.35;
+}
+
+.figment-control input,
+.figment-control select,
+.figment-control textarea {
+  width: 100%;
+  min-width: 0;
+  border: 1px solid var(--figment-line-strong);
+  border-radius: 6px;
+  background: var(--figment-control);
+  color: var(--figment-ink);
+  font-size: 15px;
+  line-height: 1.45;
+}
+
+.figment-control input,
+.figment-control select {
+  min-height: 40px;
   padding: 8px 10px;
-  border: 1px solid var(--figment-line);
+}
+
+.figment-control textarea {
+  min-height: 88px;
+  padding: 9px 10px;
+  resize: vertical;
+}
+
+.figment-button {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  min-height: 38px;
+  padding: 8px 12px;
+  border: 1px solid transparent;
   border-radius: 6px;
-  background: #fff;
-  font-size: 12px;
-  font-weight: 650;
-  text-align: center;
+  font-size: 14px;
+  font-weight: 720;
+  line-height: 1.25;
+  white-space: nowrap;
 }
 
-.figment-output-grid {
-  display: grid;
-  grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
-  gap: 14px;
+.figment-button-primary {
+  border-color: var(--figment-blue);
+  background: var(--figment-blue);
+  color: #ffffff;
+}
+
+.figment-button-primary:disabled {
+  border-color: var(--figment-line-strong);
+  background: #eef0f3;
+  color: var(--figment-muted);
+}
+
+.figment-button-secondary {
+  border-color: var(--figment-line-strong);
+  background: #ffffff;
+  color: var(--figment-ink);
+}
+
+.figment-button-loading {
+  color: rgba(255, 255, 255, 0.78);
+}
+
+.figment-full-button {
+  width: 100%;
+  margin-top: 12px;
+}
+
+.figment-panel-soft {
+  border: 1px solid var(--figment-line);
+  border-radius: var(--figment-radius);
+  background: var(--figment-panel-soft);
+  padding: 12px;
 }
 
 .figment-card-grid {
@@ -220,16 +486,28 @@ FIGMENT_CSS = """
 }
 
 .figment-mini-card {
-  min-height: 120px;
+  min-width: 0;
+  min-height: 112px;
   border: 1px solid var(--figment-line);
-  border-radius: 8px;
-  background: #fff;
+  border-radius: var(--figment-radius);
+  background: #ffffff;
   padding: 12px;
+  overflow-x: auto;
 }
 
 .figment-mini-card h4 {
   margin: 0 0 8px;
+  color: var(--figment-ink);
+  font-size: 14px;
+  font-weight: 720;
+  line-height: 1.35;
+}
+
+.figment-mini-card p {
+  margin: 0;
+  color: var(--figment-muted);
   font-size: 14px;
+  line-height: 1.5;
 }
 
 .figment-mini-card ul {
@@ -237,29 +515,65 @@ FIGMENT_CSS = """
   padding-left: 18px;
 }
 
+.figment-checklist {
+  display: grid;
+  grid-template-columns: repeat(2, minmax(0, 1fr));
+  gap: 8px 16px;
+  margin: 0;
+  padding: 0;
+  list-style: none;
+}
+
+.figment-checklist li {
+  position: relative;
+  min-width: 0;
+  padding-left: 22px;
+  color: var(--figment-ink);
+  font-size: 14px;
+  line-height: 1.45;
+}
+
+.figment-checklist li::before {
+  content: "";
+  position: absolute;
+  left: 0;
+  top: 4px;
+  width: 13px;
+  height: 13px;
+  border: 1px solid rgba(24, 24, 27, 0.34);
+  border-radius: 3px;
+  background: #ffffff;
+}
+
+.figment-checklist.checked li::before {
+  border-color: var(--figment-blue);
+  background: var(--figment-blue);
+  box-shadow: inset 0 0 0 3px #ffffff;
+}
+
 .figment-table {
   width: 100%;
+  min-width: 560px;
   border-collapse: collapse;
-  overflow: hidden;
-  border: 1px solid var(--figment-line);
-  border-radius: 8px;
-  background: #fff;
+  background: transparent;
+  color: var(--figment-ink);
   font-size: 13px;
+  line-height: 1.45;
 }
 
 .figment-table th,
 .figment-table td {
-  padding: 10px 12px;
+  padding: 10px 8px;
   border-bottom: 1px solid var(--figment-line);
   text-align: left;
   vertical-align: top;
 }
 
 .figment-table th {
-  background: #f7f9fc;
-  color: #243044;
+  color: var(--figment-muted);
   font-size: 12px;
   font-weight: 760;
+  white-space: nowrap;
 }
 
 .figment-table tr:last-child td {
@@ -268,29 +582,29 @@ FIGMENT_CSS = """
 
 .figment-urgency-banner {
   display: grid;
-  grid-template-columns: 1fr auto;
-  gap: 14px;
+  grid-template-columns: minmax(0, 1fr) minmax(240px, auto);
+  gap: 12px;
   align-items: center;
-  padding: 14px 16px;
+  padding: 14px;
   border: 1px solid var(--figment-line);
-  border-radius: 8px;
-  background: #fff;
+  border-radius: var(--figment-radius);
+  background: var(--figment-panel-soft);
 }
 
 .figment-urgency-word {
   display: inline-flex;
   align-items: center;
-  min-height: 44px;
-  padding: 0 18px;
+  min-height: 42px;
+  padding: 0 16px;
   border-radius: 6px;
-  font-size: 26px;
-  font-weight: 850;
+  font-size: 24px;
+  font-weight: 820;
   letter-spacing: 0;
 }
 
 .figment-urgency-word.routine {
-  background: #eef6ff;
-  color: #0b57d0;
+  background: var(--figment-blue-soft);
+  color: #1149b8;
 }
 
 .figment-urgency-word.monitor {
@@ -304,144 +618,540 @@ FIGMENT_CSS = """
 }
 
 .figment-urgency-word.emergency {
-  background: #d41111;
-  color: #fff;
+  background: var(--figment-red);
+  color: #ffffff;
 }
 
 .figment-lockout {
-  border: 1px solid #ef7b7b;
-  border-radius: 8px;
-  padding: 12px;
+  border: 1px solid rgba(200, 30, 30, 0.22);
+  border-radius: 6px;
+  padding: 11px;
   background: var(--figment-red-soft);
-  color: #7c1010;
+  color: #8f1616;
   font-size: 13px;
+  line-height: 1.45;
 }
 
-.figment-checklist {
+.figment-json {
+  display: block;
+  min-height: 210px;
+  max-height: 420px;
+  margin: 0;
+  padding: 12px;
+  overflow: auto;
+  border: 1px solid var(--figment-line);
+  border-radius: 6px;
+  background: #111114;
+  color: #edfdf5;
+  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace;
+  font-size: 12px;
+  line-height: 1.55;
+  white-space: pre-wrap;
+  overflow-wrap: anywhere;
+}
+
+.figment-json-tall {
+  min-height: 520px;
+  max-height: 720px;
+}
+
+.figment-disclosure {
+  margin-top: 12px;
+  border-top: 1px solid var(--figment-line);
+  padding-top: 10px;
+}
+
+.figment-disclosure summary {
+  color: var(--figment-muted);
+  font-size: 14px;
+  font-weight: 680;
+  cursor: pointer;
+}
+
+.figment-disclosure .figment-json {
+  margin-top: 10px;
+}
+
+.figment-footer-rail {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  flex-wrap: wrap;
+  gap: 12px;
+  margin-top: 12px;
+  padding: 12px;
+  border: 1px solid var(--figment-line);
+  border-radius: var(--figment-radius);
+  background: rgba(255, 255, 255, 0.84);
+}
+
+.figment-muted {
+  color: var(--figment-muted);
+}
+.figment-app-shell {
+  --figment-ink: #13201b;
+  --figment-muted: #5f6d68;
+  --figment-subtle: #87938f;
+  --figment-line: rgba(19, 32, 27, 0.12);
+  --figment-line-strong: rgba(19, 32, 27, 0.2);
+  --figment-canvas: #edf3ee;
+  --figment-panel: #fffefa;
+  --figment-panel-soft: #eef8f3;
+  --figment-control: #ffffff;
+  --figment-blue: #1065d8;
+  --figment-blue-soft: #e7f0ff;
+  --figment-green: #08734f;
+  --figment-green-soft: #dff5eb;
+  --figment-red: #c63a2b;
+  --figment-red-soft: #fff0ec;
+  --figment-amber: #a85f00;
+  --figment-amber-soft: #fff2d2;
+  --figment-radius: 8px;
+  --figment-shadow: none;
   display: grid;
-  grid-template-columns: repeat(2, minmax(0, 1fr));
-  gap: 8px 18px;
+  grid-template-columns: minmax(260px, 300px) minmax(0, 1fr);
+  grid-template-areas:
+    "rail board";
+  align-items: start;
+  gap: 16px;
+  max-width: 1620px;
+  margin: 0 auto;
+  padding: 18px;
+}
+
+.figment-app-shell .figment-mission-rail {
+  grid-area: rail;
+  display: grid;
+  gap: 16px;
+  align-content: start;
+  min-width: 0;
+  max-height: none;
+  overflow: visible;
+  position: static;
+}
+
+.figment-app-shell .figment-operation-board {
+  grid-area: board;
+  display: block;
+  min-width: 0;
+}
+
+.figment-app-shell .figment-topbar {
+  grid-area: auto;
+  display: grid;
+  gap: 18px;
+  align-content: start;
   margin: 0;
-  padding: 0;
-  list-style: none;
+  min-height: 236px;
+  padding: 22px;
+  color: #f8fff9;
+  background:
+    linear-gradient(180deg, rgba(255, 255, 255, 0.08), transparent 42%),
+    #15241e;
+  border: 1px solid rgba(255, 255, 255, 0.14);
+  box-shadow: none;
 }
 
-.figment-checklist li {
+.figment-app-shell .figment-brand {
+  display: grid;
+  gap: 12px;
+}
+
+.figment-app-shell .figment-logo {
+  color: #ffffff;
+  font-size: 34px;
+}
+
+.figment-app-shell .figment-positioning {
+  max-width: 23ch;
+  color: rgba(248, 255, 249, 0.82);
+  font-size: 17px;
+  line-height: 1.45;
+}
+
+.figment-app-shell .figment-safety {
+  align-self: end;
+  min-width: 0;
+  justify-content: flex-start;
+  padding-top: 16px;
+  border-top: 1px solid rgba(255, 255, 255, 0.16);
+  color: rgba(248, 255, 249, 0.9);
+  font-size: 14px;
+}
+
+.figment-app-shell .figment-statusline {
+  grid-area: auto;
+  align-self: stretch;
+  display: grid;
+  margin: 0;
+  padding: 14px;
+  background: #fffefa;
+  border-color: rgba(19, 32, 27, 0.12);
+}
+
+.figment-app-shell .figment-statusline strong {
+  flex-basis: 100%;
+  color: #08734f;
+  font-size: 14px;
+}
+
+.figment-app-shell .figment-tabs {
+  grid-area: auto;
+  counter-reset: figment-step;
+  display: grid;
+  gap: 8px;
+  align-content: start;
+  margin: 0;
+  padding: 12px;
+  background: #fffefa;
+  border-color: rgba(19, 32, 27, 0.12);
+  overflow: visible;
+}
+
+.figment-app-shell .figment-tab-button {
+  counter-increment: figment-step;
+  justify-content: flex-start;
+  gap: 10px;
+  width: 100%;
+  min-height: 48px;
+  padding: 10px 11px;
+  border: 1px solid transparent;
+  background: transparent;
+  color: var(--figment-muted);
+  text-align: left;
+}
+
+.figment-app-shell .figment-tab-button::before {
+  content: "0" counter(figment-step);
+  display: inline-grid;
+  place-items: center;
+  flex: 0 0 auto;
+  width: 30px;
+  height: 30px;
+  border: 1px solid var(--figment-line);
+  border-radius: 999px;
+  color: #08734f;
+  font-size: 12px;
+  font-weight: 760;
+}
+
+.figment-app-shell .figment-tab-button.is-active {
+  border-color: rgba(8, 115, 79, 0.18);
+  background: var(--figment-green-soft);
+  color: var(--figment-ink);
+}
+
+.figment-app-shell .figment-live-status {
+  grid-area: auto;
+  margin: 0;
+  padding: 12px;
+  background: #fffefa;
+  border: 1px solid rgba(19, 32, 27, 0.12);
+  border-radius: var(--figment-radius);
+  color: #50635b;
+  font-size: 15px;
+}
+
+.figment-app-shell .figment-view {
+  margin: 0;
+}
+
+.figment-app-shell .figment-footer-rail {
+  grid-area: auto;
+  display: grid;
+  margin: 0;
+  padding: 12px;
+  background: #fffefa;
+  border-color: rgba(19, 32, 27, 0.12);
+}
+
+.figment-app-shell .figment-footer-cluster {
+  align-items: flex-start;
+}
+
+.figment-app-shell .figment-workspace {
+  grid-template-columns: minmax(0, 1.15fr) minmax(320px, 0.85fr);
+  gap: 18px;
+}
+
+.figment-app-shell .figment-workspace-intake {
+  grid-template-columns: minmax(0, 1.25fr) minmax(340px, 0.75fr);
+}
+
+.figment-app-shell .figment-panel {
   position: relative;
-  padding-left: 22px;
-  color: #172033;
-  font-size: 13px;
+  padding: 22px;
+  background: #fffefa;
+  border-color: rgba(19, 32, 27, 0.12);
+  overflow: hidden;
 }
 
-.figment-checklist li::before {
+.figment-app-shell .figment-panel::before {
   content: "";
   position: absolute;
+  top: 0;
+  right: 0;
   left: 0;
-  top: 2px;
-  width: 13px;
-  height: 13px;
-  border: 1px solid #9aa9bb;
-  border-radius: 3px;
-  background: #fff;
+  height: 5px;
+  background: linear-gradient(90deg, #08734f, #1065d8 54%, #c63a2b);
 }
 
-.figment-checklist.checked li::before {
-  border-color: var(--figment-blue);
-  background: var(--figment-blue);
-  box-shadow: inset 0 0 0 3px #fff;
+.figment-app-shell .figment-panel-heading h2 {
+  font-size: 18px;
 }
 
-.figment-code-panel textarea,
-.figment-code-panel .json-viewer,
-.figment-code-panel pre {
-  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace !important;
+.figment-app-shell .figment-panel-heading p,
+.figment-app-shell .figment-section-subtitle {
+  font-size: 15px;
 }
 
-.figment-action-row {
-  display: grid;
-  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
-  gap: 10px;
+.figment-app-shell .figment-section-divider {
+  margin: 22px 0;
+  background: rgba(19, 32, 27, 0.1);
 }
 
-.figment-footer-rail {
-  display: flex;
-  flex-wrap: wrap;
-  align-items: center;
-  justify-content: space-between;
+.figment-app-shell .figment-intake-panel {
+  padding: 24px;
+}
+
+.figment-app-shell .figment-audio-draft {
+  padding-top: 2px;
+}
+
+.figment-app-shell .figment-audio-draft .figment-panel-heading {
+  margin-bottom: 0;
+}
+
+.figment-app-shell .figment-review-panel {
+  gap: 0;
+}
+
+.figment-app-shell .figment-review-heading {
+  display: grid;
   gap: 12px;
-  margin: 14px 18px 18px;
-  padding: 12px 16px;
-  border: 1px solid var(--figment-line);
-  border-radius: 8px;
-  background: #fff;
 }
 
-.figment-footer-cluster {
-  display: flex;
-  align-items: center;
-  flex-wrap: wrap;
-  gap: 10px;
+.figment-app-shell .figment-review-heading .figment-button {
+  width: 100%;
 }
 
-.figment-json-compact {
-  min-height: 220px;
+.figment-app-shell .figment-field-grid {
+  grid-template-columns: repeat(2, minmax(0, 1fr));
+  gap: 14px;
 }
 
-.figment-json-tall {
-  min-height: 520px;
+.figment-app-shell .figment-inline-controls {
+  grid-template-columns: minmax(0, 1fr) minmax(120px, auto);
 }
 
-.figment-muted {
-  color: var(--figment-muted);
+.figment-app-shell .figment-control input,
+.figment-app-shell .figment-control select,
+.figment-app-shell .figment-control textarea {
+  border-color: rgba(19, 32, 27, 0.16);
+  background: #ffffff;
+  font-size: 16px;
+}
+
+.figment-app-shell .figment-control input,
+.figment-app-shell .figment-control select {
+  min-height: 46px;
+}
+
+.figment-app-shell .figment-button {
+  min-height: 42px;
+}
+
+.figment-app-shell .figment-audio-draft .figment-button {
+  min-height: 38px;
+}
+
+.figment-app-shell .figment-button-primary {
+  border-color: #08734f;
+  background: #08734f;
+}
+
+.figment-app-shell .figment-button-primary:disabled {
+  border-color: rgba(19, 32, 27, 0.14);
+  background: #e9eee9;
+}
+
+.figment-app-shell .figment-sticky-panel {
+  top: 18px;
 }
 
-.figment-hide-label > label {
-  display: none !important;
+.figment-app-shell .figment-json {
+  background: #16342b;
+  border-color: rgba(8, 115, 79, 0.2);
+  color: #f0fff7;
 }
 
-button.primary,
-.primary button {
-  background: var(--figment-blue) !important;
-  border-color: var(--figment-blue) !important;
-  color: #fff !important;
-  min-height: 42px !important;
-  height: 42px !important;
-  flex: 0 0 auto !important;
+.figment-app-shell #intake-json {
+  min-height: 320px;
 }
 
-.figment-panel button {
-  min-height: 38px !important;
-  height: auto !important;
-  flex: 0 0 auto !important;
+.figment-app-shell #audio-json {
+  min-height: 180px;
 }
 
-.figment-panel textarea {
-  min-height: 38px !important;
+.figment-app-shell .figment-mini-card,
+.figment-app-shell .figment-panel-soft {
+  background: #f8fbf7;
+  border-color: rgba(19, 32, 27, 0.1);
 }
 
-.figment-panel .form {
-  gap: 8px !important;
+.figment-app-shell .figment-urgency-banner {
+  background: #f7faf6;
+  border-color: rgba(19, 32, 27, 0.12);
 }
 
-@media (max-width: 1000px) {
+@media (max-width: 1100px) {
+  .figment-workspace,
+  .figment-workspace-intake,
+  .figment-audio-grid {
+    grid-template-columns: 1fr;
+  }
+
+  .figment-sticky-panel {
+    position: static;
+  }
+}
+
+@media (max-width: 760px) {
+  .figment-app-shell {
+    padding: 10px;
+  }
+
   .figment-topbar,
-  .figment-output-grid,
+  .figment-brand,
+  .figment-safety,
+  .figment-panel-heading,
+  .figment-panel-heading-action,
+  .figment-footer-rail {
+    display: grid;
+    justify-content: stretch;
+  }
+
+  .figment-safety {
+    min-width: 0;
+    justify-content: start;
+  }
+
+  .figment-logo {
+    font-size: 26px;
+  }
+
+  .figment-positioning,
+  .figment-safety,
+  .figment-control input,
+  .figment-control select,
+  .figment-control textarea,
+  .figment-button,
+  .figment-live-status {
+    font-size: 16px;
+  }
+
+  .figment-statusline,
+  .figment-tabs,
+  .figment-panel,
+  .figment-footer-rail {
+    padding: 10px;
+  }
+
+  .figment-inline-controls,
+  .figment-field-grid,
   .figment-card-grid,
-  .figment-action-row {
+  .figment-checklist,
+  .figment-urgency-banner {
     grid-template-columns: 1fr;
   }
 
-  .figment-topbar {
+  .figment-button {
+    min-height: 44px;
+    width: 100%;
+  }
+
+  .figment-json {
+    min-height: 180px;
+  }
+}
+
+@media (max-width: 1100px) {
+  .figment-app-shell {
+    display: flex;
+    flex-direction: column;
+    padding: 10px;
+  }
+
+  .figment-app-shell .figment-mission-rail,
+  .figment-app-shell .figment-operation-board {
+    max-height: none;
+    overflow: visible;
+    position: static;
+  }
+
+  .figment-app-shell .figment-mission-rail {
+    display: contents;
+  }
+
+  .figment-app-shell .figment-operation-board {
+    display: block;
+    order: 3;
+  }
+
+  .figment-app-shell .figment-topbar,
+  .figment-app-shell .figment-statusline,
+  .figment-app-shell .figment-tabs,
+  .figment-app-shell .figment-live-status,
+  .figment-app-shell .figment-view,
+  .figment-app-shell .figment-footer-rail {
+    margin-top: 12px;
+    min-width: 0;
+    width: 100%;
+  }
+
+  .figment-app-shell .figment-topbar {
+    order: 1;
+    min-height: 0;
+    padding: 18px;
+  }
+
+  .figment-app-shell .figment-positioning {
+    max-width: 34ch;
+  }
+
+  .figment-app-shell .figment-safety {
+    padding-top: 12px;
+  }
+
+  .figment-app-shell .figment-tabs {
+    order: 2;
     display: grid;
+    grid-template-columns: repeat(2, minmax(0, 1fr));
+    gap: 8px;
+    overflow: visible;
   }
 
-  .figment-positioning,
-  .figment-safety {
+  .figment-app-shell .figment-tab-button {
+    width: 100%;
+    min-height: 52px;
     white-space: normal;
   }
 
-  .figment-quick-grid {
-    grid-template-columns: repeat(2, minmax(0, 1fr));
+  .figment-app-shell .figment-live-status {
+    order: 4;
+  }
+
+  .figment-app-shell .figment-statusline {
+    order: 5;
+  }
+
+  .figment-app-shell .figment-footer-rail {
+    order: 6;
+  }
+
+  .figment-app-shell .figment-workspace,
+  .figment-app-shell .figment-workspace-intake {
+    grid-template-columns: 1fr;
   }
 }
 """

requirements.txt

@@ -1,4 +1,5 @@
-gradio>=5.0,<6
+fastapi>=0.115,<1
+gradio>=6.0,<7
 huggingface_hub>=1.0,<2
 httpx>=0.27,<1
 pydantic>=2.7,<3

tests/test_app_scaffold.py

@@ -553,13 +553,16 @@ def test_run_case_uses_environment_config_when_not_supplied(monkeypatch: pytest.
     assert result["trace"]["model_route"]["model_backend"] == "hosted_omni"
 
 
-def test_app_import_and_blocks_smoke() -> None:
+def test_app_import_and_server_smoke() -> None:
     app = importlib.import_module("app")
     config = FigmentConfig(model_backend="canned", audio_backend="none").validated()
 
     demo = app.build_app(config=config)
 
-    assert hasattr(demo, "queue")
+    assert demo.__class__.__name__ == "Server"
+    assert hasattr(demo, "api")
+    assert hasattr(demo, "launch")
+    assert {route.path for route in demo.routes} >= {"/", "/health"}
     assert app.TAB_TITLES == [
         "Intake",
         "Risk Check",