Deploy Venue Manager Agent Modal spike

.gitattributes

@@ -33,3 +33,6 @@ saved_model/**/* filter=lfs diff=lfs merge=lfs -text
 *.zip filter=lfs diff=lfs merge=lfs -text
 *.zst filter=lfs diff=lfs merge=lfs -text
 *tfevents* filter=lfs diff=lfs merge=lfs -text
+frontend/assets/floodlight-field-backdrop.png filter=lfs diff=lfs merge=lfs -text
+frontend/assets/floodlight-ground-board.png filter=lfs diff=lfs merge=lfs -text
+frontend/assets/floodlight-source-reference.png filter=lfs diff=lfs merge=lfs -text

.hfignore

@@ -0,0 +1,8 @@
+__pycache__/
+**/__pycache__/
+*.pyc
+.DS_Store
+**/.DS_Store
+.env
+**/.env
+node_modules/

README.md

@@ -1,13 +1,29 @@
 ---
 title: Venue Manager Agent
-emoji: 🏃
-colorFrom: purple
-colorTo: blue
+emoji: 🏟️
+colorFrom: green
+colorTo: indigo
 sdk: gradio
 sdk_version: 6.18.0
-python_version: '3.13'
 app_file: app.py
 pinned: false
 ---
 
-Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference
+# Venue Manager Agent
+
+Custom Gradio `Server` app for sports venue booking operations.
+
+Runtime path for this spike:
+
+- App host: Hugging Face Space.
+- Model runtime: Modal.
+- Model: `nvidia/Nemotron-Cascade-2-30B-A3B`.
+- Model role: extract a user's venue booking request into schema-checked JSON.
+- No deterministic model fallback is used for extraction; blockers are surfaced.
+
+Required Space configuration:
+
+- `APP_MODAL_BASE_URL`
+- `APP_MODAL_AUTH_TOKEN`
+- `APP_MODAL_TIMEOUT_SECONDS`
+- `APP_MODAL_MODEL_ID`

app.py

@@ -0,0 +1,131 @@
+from __future__ import annotations
+
+import os
+from pathlib import Path
+from typing import Any
+
+from fastapi import Body
+from fastapi.responses import FileResponse, JSONResponse
+from fastapi.staticfiles import StaticFiles
+from gradio import Server
+
+from floodlight_space.fixtures import build_bootstrap
+from floodlight_space.modal_client import (
+    SAMPLE_USER_MESSAGE,
+    call_booking_extractor,
+    modal_status as get_modal_status,
+)
+
+
+ROOT = Path(__file__).resolve().parent
+FRONTEND_ROOT = ROOT / "frontend"
+ASSETS_ROOT = FRONTEND_ROOT / "assets"
+
+
+def build_server() -> Server:
+    app = Server(
+        title="Floodlight Venue Ops Agent",
+        description="A custom Floodlight venue-ops UI served by a Gradio Server.",
+        docs_url=None,
+        redoc_url=None,
+    )
+
+    app.mount("/frontend", StaticFiles(directory=FRONTEND_ROOT), name="frontend")
+    app.mount("/assets", StaticFiles(directory=ASSETS_ROOT), name="assets")
+
+    @app.get("/")
+    async def homepage() -> FileResponse:
+        return FileResponse(FRONTEND_ROOT / "index.html")
+
+    @app.get("/health")
+    async def health() -> dict[str, str]:
+        return {
+            "status": "ok",
+            "app": "floodlight-venue-ops-agent",
+            "frontend": "fully-custom-ui",
+            "version": "v1-design-prototype",
+            "model_runtime": "modal",
+            "model_id": get_modal_status()["model_id"],
+        }
+
+    @app.get("/api/model-status")
+    async def model_status_endpoint() -> JSONResponse:
+        return JSONResponse(get_modal_status())
+
+    @app.get("/api/bootstrap")
+    async def bootstrap(scenario: str = "normal") -> JSONResponse:
+        return JSONResponse(build_bootstrap(scenario))
+
+    @app.post("/api/decision")
+    async def decision(payload: dict[str, Any] = Body(default_factory=dict)) -> JSONResponse:
+        scenario = str(payload.get("scenario") or "normal")
+        data = build_bootstrap(scenario)
+        action = str(payload.get("action") or "approve")
+        if action == "reject":
+            data["decision"]["state"] = "rejected"
+            data["trace"].append({"id": "rejected", "label": "Owner rejected the reply", "tone": "error", "timestamp_label": "now"})
+        elif action == "clarify":
+            data["decision"]["state"] = "ready"
+            data["trace"].append({"id": "clarify", "label": "Owner asked for clarification", "tone": "warning", "timestamp_label": "now"})
+        else:
+            data["decision"]["state"] = "sent"
+            data["trace"].append({"id": "sent", "label": "Reply marked sent via simulator", "tone": "success", "timestamp_label": "now"})
+        return JSONResponse(data)
+
+    @app.post("/api/extract-booking")
+    async def extract_booking(payload: dict[str, Any] = Body(default_factory=dict)) -> JSONResponse:
+        scenario = str(payload.get("scenario") or "normal")
+        message = str(payload.get("message") or SAMPLE_USER_MESSAGE)
+        trace_id = str(payload.get("trace_id") or "space-venue-sample-001")
+        context = build_bootstrap(scenario)
+        result = call_booking_extractor(
+            message=message,
+            venue_context={
+                "slots": context["slots"],
+                "venues": context["venues"],
+                "decision": context["decision"],
+            },
+            trace_id=trace_id,
+        )
+        return JSONResponse(result, status_code=200 if result.get("ok") else 502)
+
+    @app.api(
+        name="get-floodlight-fixture",
+        description="Return the static Floodlight venue-ops fixture with explicit proof boundaries.",
+        queue=False,
+        api_visibility="public",
+    )
+    def get_floodlight_fixture(scenario: str = "normal") -> dict[str, Any]:
+        return build_bootstrap(scenario)
+
+    @app.api(
+        name="extract-venue-booking-sample",
+        description="Send one booking message to the Modal Nemotron Cascade extractor and return schema-checked JSON.",
+        queue=False,
+        api_visibility="public",
+    )
+    def extract_venue_booking_sample(message: str = SAMPLE_USER_MESSAGE) -> dict[str, Any]:
+        context = build_bootstrap("normal")
+        return call_booking_extractor(
+            message=message,
+            venue_context={
+                "slots": context["slots"],
+                "venues": context["venues"],
+                "decision": context["decision"],
+            },
+            trace_id="gradio-api-venue-sample-001",
+        )
+
+    return app
+
+
+app = build_server()
+
+
+if __name__ == "__main__":
+    app.launch(
+        server_name=os.environ.get("HOST", "0.0.0.0"),
+        server_port=int(os.environ.get("PORT", "7860")),
+        footer_links=[],
+        show_error=True,
+    )

floodlight_space/__init__.py

@@ -0,0 +1,2 @@
+"""Floodlight venue ops demo package."""
+

floodlight_space/fixtures.py

@@ -0,0 +1,198 @@
+from __future__ import annotations
+
+from copy import deepcopy
+from typing import Any
+
+
+def build_bootstrap(scenario: str = "normal") -> dict[str, Any]:
+    payload = _base_payload()
+    return _apply_scenario(payload, scenario)
+
+
+def _base_payload() -> dict[str, Any]:
+    return {
+        "runtime": {
+            "app": "floodlight-venue-ops-agent",
+            "version": "v1-design-prototype",
+            "channel_label": "WhatsApp simulator",
+            "channel_status": "simulator-connected",
+            "channel_copy": "Demo channel connected. No live WhatsApp send proof claimed.",
+            "pending_count": 7,
+            "confirmed_today": 12,
+            "occupancy_today": 68,
+            "proof_boundary": "Static fixture prototype; live WhatsApp, external scoring/admin, video, model, and HF deployment proof are not claimed."
+        },
+        "slots": [
+            {"id": "morning", "label": "8 AM - 12 PM", "period": "Morning"},
+            {"id": "afternoon", "label": "2 PM - 6 PM", "period": "Afternoon"}
+        ],
+        "venues": [
+            {
+                "id": "north-field",
+                "name": "North Field",
+                "surface": "Grass",
+                "grass_type": "Natural",
+                "slots": {
+                    "morning": {"status": "available", "rate": 6000, "request_count": 0},
+                    "afternoon": {"status": "partial", "rate": 6500, "request_count": 2}
+                }
+            },
+            {
+                "id": "south-field",
+                "name": "South Field",
+                "surface": "Grass",
+                "grass_type": "Astro turf",
+                "slots": {
+                    "morning": {"status": "available", "rate": 5500, "request_count": 0},
+                    "afternoon": {"status": "partial", "rate": 6000, "request_count": 1}
+                }
+            }
+        ],
+        "requests": [
+            {
+                "id": "aman-sharma",
+                "customer_name": "Aman Sharma",
+                "phone": "+91 98765 43210",
+                "received_label": "1 min ago",
+                "activity": "Cricket",
+                "date_label": "Tomorrow, 25 May 2025",
+                "requested_slot_id": "north-field:morning",
+                "players": 12,
+                "group_type": "Corporate",
+                "status": "new",
+                "tone": "ready",
+                "missing_fields": [],
+                "summary": "12 players · Corporate",
+                "reply_draft": "Hi Aman, North Field is available tomorrow from 8 AM - 12 PM. The slot is ₹6,000 for natural grass. Reply YES and we will hold it after owner approval."
+            },
+            {
+                "id": "rohit-verma",
+                "customer_name": "Rohit Verma",
+                "phone": "+91 90123 45678",
+                "received_label": "3 min ago",
+                "activity": "Cricket",
+                "date_label": "Tomorrow, 25 May 2025",
+                "requested_slot_id": "north-field:afternoon",
+                "players": 10,
+                "group_type": "Friends",
+                "status": "new",
+                "tone": "partial",
+                "missing_fields": [],
+                "summary": "10 players · Friends",
+                "reply_draft": "Hi Rohit, North Field has partial demand tomorrow from 2 PM - 6 PM at ₹6,500. We can confirm after owner approval, or offer South Field at ₹6,000."
+            },
+            {
+                "id": "karan-mehta",
+                "customer_name": "Karan Mehta",
+                "phone": "+91 99887 76655",
+                "received_label": "5 min ago",
+                "activity": "Cricket",
+                "date_label": "Tomorrow, 25 May 2025",
+                "requested_slot_id": "south-field:morning",
+                "players": 14,
+                "group_type": "League",
+                "status": "new",
+                "tone": "ready",
+                "missing_fields": [],
+                "summary": "14 players · League",
+                "reply_draft": "Hi Karan, South Field is available tomorrow from 8 AM - 12 PM. Astro turf surface, ₹5,500. I can hold it after owner approval."
+            },
+            {
+                "id": "vikas-singh",
+                "customer_name": "Vikas Singh",
+                "phone": "+91 91234 87650",
+                "received_label": "7 min ago",
+                "activity": "Cricket",
+                "date_label": "Today",
+                "requested_slot_id": "south-field:afternoon",
+                "players": 12,
+                "group_type": "Corporate",
+                "status": "conflict",
+                "tone": "conflict",
+                "missing_fields": [],
+                "summary": "12 players · Corporate",
+                "reply_draft": "Hi Vikas, the requested afternoon slot has other demand. North Field morning is open, or South Field morning is open. Which one should I hold for you?"
+            },
+            {
+                "id": "neha-iyer",
+                "customer_name": "Neha Iyer",
+                "phone": "+91 95555 45670",
+                "received_label": "9 min ago",
+                "activity": "Cricket",
+                "date_label": "Tomorrow, 25 May 2025",
+                "requested_slot_id": "south-field:afternoon",
+                "players": 8,
+                "group_type": "Friends",
+                "status": "clarification",
+                "tone": "clarification",
+                "missing_fields": ["format/overs"],
+                "summary": "8 players · Friends",
+                "reply_draft": "Hi Neha, South Field afternoon is available with one existing request. Could you confirm format or overs before I ask the owner to hold it?"
+            }
+        ],
+        "decision": {
+            "selected_request_id": "aman-sharma",
+            "selected_slot_id": "north-field:morning",
+            "selected_price": 6000,
+            "notes": "",
+            "state": "ready"
+        },
+        "integrations": [
+            {
+                "id": "video",
+                "label": "Video Telecast",
+                "state": "disabled",
+                "copy": "Disabled"
+            },
+            {
+                "id": "external-scoring",
+                "label": "External scoring/admin app",
+                "state": "not-connected",
+                "copy": "Not connected · Disabled"
+            }
+        ],
+        "trace": [
+            {"id": "intake", "label": "Intake received from simulator", "tone": "neutral", "timestamp_label": "now"},
+            {"id": "policy", "label": "Approval required before outbound reply", "tone": "warning", "timestamp_label": "now"},
+            {"id": "draft", "label": "Reply drafted and pending owner review", "tone": "neutral", "timestamp_label": "now"}
+        ],
+        "scenarios": [
+            {"id": "normal", "label": "Live queue"},
+            {"id": "clarification", "label": "Clarification"},
+            {"id": "conflict", "label": "Slot conflict"},
+            {"id": "provider-error", "label": "Provider error"},
+            {"id": "empty", "label": "Empty queue"}
+        ],
+        "active_scenario": "normal"
+    }
+
+
+def _apply_scenario(payload: dict[str, Any], scenario: str) -> dict[str, Any]:
+    data = deepcopy(payload)
+    data["active_scenario"] = scenario
+
+    if scenario == "clarification":
+        data["decision"]["selected_request_id"] = "neha-iyer"
+        data["decision"]["selected_slot_id"] = "south-field:afternoon"
+        data["decision"]["selected_price"] = 6000
+        data["trace"].append({"id": "missing-fields", "label": "Missing field: format/overs", "tone": "warning", "timestamp_label": "now"})
+    elif scenario == "conflict":
+        data["decision"]["selected_request_id"] = "vikas-singh"
+        data["decision"]["selected_slot_id"] = "south-field:afternoon"
+        data["decision"]["selected_price"] = 6000
+        data["venues"][1]["slots"]["afternoon"]["status"] = "conflict"
+        data["trace"].append({"id": "conflict", "label": "Requested slot has competing demand; alternatives visible", "tone": "warning", "timestamp_label": "now"})
+    elif scenario == "provider-error":
+        data["runtime"]["channel_status"] = "provider-error"
+        data["runtime"]["channel_copy"] = "Simulator provider error. No outbound reply can be marked sent."
+        data["decision"]["state"] = "error"
+        data["trace"].append({"id": "provider-error", "label": "Provider error state active; retry required", "tone": "error", "timestamp_label": "now"})
+    elif scenario == "empty":
+        data["runtime"]["pending_count"] = 0
+        data["requests"] = []
+        data["decision"]["selected_request_id"] = ""
+        data["decision"]["selected_slot_id"] = "north-field:morning"
+        data["decision"]["state"] = "idle"
+        data["trace"] = [{"id": "empty", "label": "Queue empty; board remains reviewable", "tone": "neutral", "timestamp_label": "now"}]
+
+    return data

floodlight_space/modal_client.py

@@ -0,0 +1,95 @@
+from __future__ import annotations
+
+import json
+import os
+import time
+import urllib.error
+import urllib.request
+from typing import Any
+
+
+SAMPLE_USER_MESSAGE = (
+    "Hi, this is Aman Sharma. Need a cricket ground tomorrow morning "
+    "8 AM to 12 PM for 12 players. Natural grass preferred, North Field if "
+    "available. Budget is around Rs 6000. My number is +91 98765 43210."
+)
+
+
+def modal_status() -> dict[str, Any]:
+    return {
+        "configured": bool(os.environ.get("APP_MODAL_BASE_URL") and os.environ.get("APP_MODAL_AUTH_TOKEN")),
+        "base_url_configured": bool(os.environ.get("APP_MODAL_BASE_URL")),
+        "auth_configured": bool(os.environ.get("APP_MODAL_AUTH_TOKEN")),
+        "model_id": os.environ.get("APP_MODAL_MODEL_ID", "nvidia/Nemotron-Cascade-2-30B-A3B"),
+        "timeout_seconds": float(os.environ.get("APP_MODAL_TIMEOUT_SECONDS", "90")),
+    }
+
+
+def call_booking_extractor(
+    *,
+    message: str = SAMPLE_USER_MESSAGE,
+    venue_context: dict[str, Any] | None = None,
+    trace_id: str = "space-venue-sample-001",
+) -> dict[str, Any]:
+    status = modal_status()
+    if not status["configured"]:
+        return {
+            "ok": False,
+            "trace_id": trace_id,
+            "model_id": status["model_id"],
+            "backend": "modal_http",
+            "fallback_used": False,
+            "booking": None,
+            "blocker": "APP_MODAL_BASE_URL and APP_MODAL_AUTH_TOKEN must be configured on the Space.",
+            "validation": {"valid": False, "errors": ["modal_config_missing"]},
+        }
+
+    payload = json.dumps(
+        {
+            "trace_id": trace_id,
+            "message": message,
+            "venue_context": venue_context or {},
+        }
+    ).encode("utf-8")
+    headers = {
+        "Content-Type": "application/json",
+        "Authorization": f"Bearer {os.environ['APP_MODAL_AUTH_TOKEN']}",
+    }
+    started = time.time()
+    request = urllib.request.Request(
+        os.environ["APP_MODAL_BASE_URL"],
+        data=payload,
+        headers=headers,
+        method="POST",
+    )
+    try:
+        with urllib.request.urlopen(request, timeout=status["timeout_seconds"]) as response:
+            result = json.loads(response.read().decode("utf-8"))
+    except urllib.error.HTTPError as exc:
+        detail = exc.read().decode("utf-8", errors="replace")[:800]
+        return _blocked(trace_id, status["model_id"], f"Modal HTTP {exc.code}: {detail}")
+    except urllib.error.URLError as exc:
+        return _blocked(trace_id, status["model_id"], f"Modal request failed: {exc}")
+    except TimeoutError as exc:
+        return _blocked(trace_id, status["model_id"], f"Modal request timed out: {exc}")
+    except json.JSONDecodeError as exc:
+        return _blocked(trace_id, status["model_id"], f"Modal returned non-JSON response: {exc}")
+
+    result.setdefault("client_latency_ms", round((time.time() - started) * 1000))
+    result.setdefault("fallback_used", False)
+    result.setdefault("backend", "modal_http")
+    result.setdefault("model_id", status["model_id"])
+    return result
+
+
+def _blocked(trace_id: str, model_id: str, blocker: str) -> dict[str, Any]:
+    return {
+        "ok": False,
+        "trace_id": trace_id,
+        "model_id": model_id,
+        "backend": "modal_http",
+        "fallback_used": False,
+        "booking": None,
+        "blocker": blocker,
+        "validation": {"valid": False, "errors": ["modal_request_blocked"]},
+    }

frontend/index.html

@@ -0,0 +1,177 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1" />
+    <title>Floodlight Venue Ops Agent</title>
+    <link rel="stylesheet" href="/frontend/styles/tokens.css" />
+    <link rel="stylesheet" href="/frontend/styles/app.css" />
+  </head>
+  <body>
+    <div class="app-shell" data-design-id="floodlight-app">
+      <header class="topbar" data-design-id="brand-header">
+        <div class="brand-lockup">
+          <img class="brand-logo" src="/assets/floodlight-logo-lockup.png" alt="Floodlight Venue Ops Agent" />
+        </div>
+        <span class="agent-pill"><span></span>Agent Online</span>
+        <span class="top-separator"></span>
+        <span class="top-meta">Today: <strong id="todayLabel">25 May 2025, Sun</strong></span>
+        <span class="top-meta">11:42 AM</span>
+        <span class="top-spacer"></span>
+        <span class="top-meta channel" id="channelStatus">WhatsApp simulator</span>
+        <span class="owner-menu">Owner: Ankit Sharma</span>
+        <img class="ball-accent" src="/assets/floodlight-cricket-ball.png" alt="" aria-hidden="true" />
+      </header>
+
+      <nav class="scenario-bar" data-design-id="scenario-switcher" aria-label="Review scenarios">
+        <span class="scenario-label">Review state</span>
+        <div id="scenarioButtons" class="scenario-buttons"></div>
+      </nav>
+
+      <nav class="mobile-tabs" data-design-id="mobile-panel-tabs" aria-label="Mobile panels">
+        <button type="button" class="mobile-tab is-active" data-mobile-panel-target="phone">Chat</button>
+        <button type="button" class="mobile-tab" data-mobile-panel-target="agent">Agent</button>
+        <button type="button" class="mobile-tab" data-mobile-panel-target="owner">Owner</button>
+        <button type="button" class="mobile-tab" data-mobile-panel-target="decision">Decision</button>
+      </nav>
+
+      <main class="console-grid">
+        <section class="phone-panel" data-design-id="phone-chat-simulator" data-panel="phone">
+          <div class="phone-shell">
+            <div class="phone-status">
+              <span>11:42</span>
+              <span class="phone-signal">LTE</span>
+            </div>
+            <div class="chat-head">
+              <button type="button" class="icon-button" aria-label="Back to conversations">‹</button>
+              <span class="avatar-dot"></span>
+              <div>
+                <strong id="chatPhone">+91 98765 43210</strong>
+                <span>online</span>
+              </div>
+              <span class="chat-actions">Call · More</span>
+            </div>
+            <div id="chatThread" class="chat-thread"></div>
+            <div class="chat-composer">
+              <span>Type a message</span>
+              <button type="button" aria-label="Attach file">Attach</button>
+              <button type="button" aria-label="Voice note">Mic</button>
+            </div>
+          </div>
+        </section>
+
+        <section class="agent-panel panel-card" data-design-id="agent-understanding-panel" data-panel="agent">
+          <div class="panel-title-row">
+            <div>
+              <h1>Agent Panel</h1>
+              <span id="channelCopy" class="panel-subcopy">Demo channel connected</span>
+            </div>
+            <span class="live-badge"><span></span>Live</span>
+          </div>
+
+          <div class="intent-card">
+            <div>
+              <span class="section-title">Detected intent</span>
+              <strong id="detectedIntent" class="intent-chip">BOOK_SLOT</strong>
+            </div>
+            <div class="confidence-box">
+              <span class="section-title">Confidence</span>
+              <strong id="confidenceValue">0.92</strong>
+              <span class="confidence-meter"><span></span></span>
+              <em>High</em>
+            </div>
+          </div>
+
+          <div class="agent-columns">
+            <div class="extracted-card">
+              <span class="section-title">Extracted slots</span>
+              <dl id="extractedSlots" class="slot-list"></dl>
+            </div>
+            <div class="unclear-card">
+              <span class="section-title">Missing / unclear</span>
+              <ul id="missingList" class="missing-list"></ul>
+            </div>
+          </div>
+
+          <div class="timeline-card" data-design-id="trace-ledger">
+            <span class="section-title">Trace timeline</span>
+            <ol id="traceList" class="trace-list"></ol>
+            <span id="timelineState" class="ready-pill">Ready for Reply</span>
+          </div>
+        </section>
+
+        <aside class="owner-panel panel-card" data-design-id="owner-booking-panel" data-panel="owner">
+          <div class="panel-title-row">
+            <div>
+              <h2>Owner Booking Panel</h2>
+              <span id="bookingId" class="panel-subcopy">Booking ID: BK-51872</span>
+            </div>
+            <button type="button" class="ghost-button" id="resetDemoButton">Reset</button>
+          </div>
+
+          <section class="owner-section availability-section" data-design-id="availability-board">
+            <div class="owner-section-head">
+              <h3>Availability</h3>
+              <span id="pendingCount" class="count-chip">7 pending</span>
+            </div>
+            <div class="date-slot-row">
+              <select aria-label="Booking date">
+                <option>25 May 2025, Sun</option>
+              </select>
+              <button type="button" class="slot-filter is-active" data-slot-filter="morning">8 AM - 12 PM</button>
+              <button type="button" class="slot-filter" data-slot-filter="afternoon">2 PM - 6 PM</button>
+            </div>
+            <div id="availabilityBoard" class="venue-list"></div>
+          </section>
+
+          <section class="owner-section package-section">
+            <h3>Activity Packet <span>(Selected)</span></h3>
+            <div id="packetList" class="packet-list"></div>
+            <p id="suggestedPrice" class="packet-total">Total add-ons: ₹1,450</p>
+          </section>
+
+          <section class="owner-section group-section">
+            <div class="group-card">
+              <h3>Group A <span>(Existing)</span></h3>
+              <dl id="groupA"></dl>
+            </div>
+            <div class="group-card">
+              <h3>Group B <span>(New)</span></h3>
+              <dl id="groupB"></dl>
+            </div>
+          </section>
+
+          <section class="owner-section integrations" data-design-id="disabled-integrations">
+            <h3>Disabled elements</h3>
+            <div id="integrationsList"></div>
+          </section>
+        </aside>
+
+        <section class="decision-bar panel-card" data-design-id="approval-actions" data-panel="decision">
+          <div class="reply-editor" data-design-id="reply-draft">
+            <label for="replyDraft">AI Generated Reply <span>(Editable)</span></label>
+            <textarea id="replyDraft" rows="3"></textarea>
+            <div class="reply-meta">
+              <span id="charCount">Characters: 0</span>
+              <button type="button" class="ghost-button" id="suggestButton">Suggest variations</button>
+            </div>
+          </div>
+
+          <div class="decision-actions">
+            <span class="section-title">Owner Decision</span>
+            <p id="decisionState" class="decision-state">Pending owner approval</p>
+            <div class="action-grid">
+              <button type="button" class="approve-button" id="approveButton">Approve &amp; Send<span>Send reply to user</span></button>
+              <button type="button" class="edit-button" id="clarifyButton">Edit &amp; Send<span>Modify and send</span></button>
+              <button type="button" class="reject-button" id="rejectButton">Reject<span>Do not send</span></button>
+            </div>
+          </div>
+        </section>
+
+        <select id="requestQueue" class="request-select" aria-label="Select booking request"></select>
+      </main>
+    </div>
+
+    <script type="module" src="/frontend/scripts/app.js"></script>
+  </body>
+</html>

frontend/scripts/app.js

@@ -0,0 +1,507 @@
+const state = {
+  data: null,
+  selectedRequestId: "",
+  selectedSlotId: "",
+  selectedPrice: 0,
+  activeScenario: "normal",
+  activeSlotFilter: "morning",
+  mobilePanel: "phone",
+  variationIndex: 0,
+};
+
+const els = {
+  shell: document.querySelector(".app-shell"),
+  todayLabel: document.querySelector("#todayLabel"),
+  channelStatus: document.querySelector("#channelStatus"),
+  channelCopy: document.querySelector("#channelCopy"),
+  pendingCount: document.querySelector("#pendingCount"),
+  scenarioButtons: document.querySelector("#scenarioButtons"),
+  requestQueue: document.querySelector("#requestQueue"),
+  chatPhone: document.querySelector("#chatPhone"),
+  chatThread: document.querySelector("#chatThread"),
+  detectedIntent: document.querySelector("#detectedIntent"),
+  confidenceValue: document.querySelector("#confidenceValue"),
+  extractedSlots: document.querySelector("#extractedSlots"),
+  missingList: document.querySelector("#missingList"),
+  traceList: document.querySelector("#traceList"),
+  timelineState: document.querySelector("#timelineState"),
+  bookingId: document.querySelector("#bookingId"),
+  availabilityBoard: document.querySelector("#availabilityBoard"),
+  packetList: document.querySelector("#packetList"),
+  groupA: document.querySelector("#groupA"),
+  groupB: document.querySelector("#groupB"),
+  suggestedPrice: document.querySelector("#suggestedPrice"),
+  integrationsList: document.querySelector("#integrationsList"),
+  replyDraft: document.querySelector("#replyDraft"),
+  charCount: document.querySelector("#charCount"),
+  decisionState: document.querySelector("#decisionState"),
+  approveButton: document.querySelector("#approveButton"),
+  clarifyButton: document.querySelector("#clarifyButton"),
+  rejectButton: document.querySelector("#rejectButton"),
+  resetDemoButton: document.querySelector("#resetDemoButton"),
+  suggestButton: document.querySelector("#suggestButton"),
+};
+
+function formatPrice(value) {
+  return new Intl.NumberFormat("en-IN", {
+    style: "currency",
+    currency: "INR",
+    maximumFractionDigits: 0,
+  }).format(value);
+}
+
+function slotKey(venueId, slotId) {
+  return `${venueId}:${slotId}`;
+}
+
+function getSelectedRequest() {
+  return state.data?.requests.find((request) => request.id === state.selectedRequestId) || null;
+}
+
+function getSelectedSlot() {
+  if (!state.data || !state.selectedSlotId) return null;
+  const [venueId, slotId] = state.selectedSlotId.split(":");
+  const venue = state.data.venues.find((item) => item.id === venueId);
+  const slot = state.data.slots.find((item) => item.id === slotId);
+  const inventory = venue?.slots?.[slotId];
+  if (!venue || !slot || !inventory) return null;
+  return { venue, slot, inventory };
+}
+
+async function loadScenario(scenario = "normal") {
+  const response = await fetch(`/api/bootstrap?scenario=${encodeURIComponent(scenario)}`);
+  state.data = await response.json();
+  state.activeScenario = state.data.active_scenario;
+  state.selectedRequestId = state.data.decision.selected_request_id;
+  state.selectedSlotId = state.data.decision.selected_slot_id;
+  state.selectedPrice = state.data.decision.selected_price;
+  state.activeSlotFilter = state.selectedSlotId.split(":")[1] || "morning";
+  state.variationIndex = 0;
+  render();
+}
+
+function render() {
+  renderRuntime();
+  renderScenarios();
+  renderRequestSelect();
+  renderPhone();
+  renderAgentPanel();
+  renderOwnerPanel();
+  renderDecisionBar();
+  renderMobilePanel();
+}
+
+function renderRuntime() {
+  const runtime = state.data.runtime;
+  els.todayLabel.textContent = getSelectedRequest()?.date_label || "25 May 2025, Sun";
+  els.channelStatus.textContent = runtime.channel_label;
+  els.channelCopy.textContent = runtime.channel_copy;
+  els.pendingCount.textContent = `${runtime.pending_count} pending`;
+  els.shell.classList.toggle("is-provider-error", runtime.channel_status === "provider-error");
+}
+
+function renderScenarios() {
+  els.scenarioButtons.replaceChildren(
+    ...state.data.scenarios.map((scenario) => {
+      const button = document.createElement("button");
+      button.type = "button";
+      button.textContent = scenario.label;
+      button.className = scenario.id === state.activeScenario ? "is-active" : "";
+      button.addEventListener("click", () => loadScenario(scenario.id));
+      return button;
+    })
+  );
+}
+
+function renderRequestSelect() {
+  if (!state.data.requests.length) {
+    const option = new Option("No booking requests", "");
+    els.requestQueue.replaceChildren(option);
+    els.requestQueue.disabled = true;
+    return;
+  }
+
+  els.requestQueue.disabled = false;
+  els.requestQueue.replaceChildren(
+    ...state.data.requests.map((request) => {
+      const label = `${request.customer_name} · ${request.activity} · ${stateLabel(request.status)}`;
+      const option = new Option(label, request.id, false, request.id === state.selectedRequestId);
+      return option;
+    })
+  );
+}
+
+function renderPhone() {
+  const request = getSelectedRequest();
+  els.chatPhone.textContent = request?.phone || "No active conversation";
+  if (!request) {
+    els.chatThread.replaceChildren(emptyPanel("No active booking chat. Pick a scenario or wait for a new request."));
+    return;
+  }
+
+  const selected = getSelectedSlot();
+  const locationText = selected?.venue.name || "North Field or South Field";
+  const transcript = [
+    { who: "customer", text: `Hi, need a ground for ${request.activity.toLowerCase()} ${request.date_label.toLowerCase()}.`, time: "11:34 AM" },
+    { who: "agent", text: "Hi! Sure, what time are you looking for?", time: "11:35 AM" },
+    { who: "customer", text: `${selected?.slot.label || "8 AM - 12 PM"}. For ${request.players} players.`, time: "11:35 AM" },
+    { who: "agent", text: "Which location?", time: "11:36 AM" },
+    { who: "customer", text: `${locationText} works.`, time: "11:36 AM" },
+    { who: "agent", text: "Any surface preference?", time: "11:37 AM" },
+    { who: "customer", text: `${selected?.venue.surface || "Grass"} is fine. Budget around ${formatPrice(state.selectedPrice || selected?.inventory.rate || 6000)}.`, time: "11:38 AM" },
+    { who: "agent", text: "Got it. Let me check availability and send options.", time: "11:38 AM" },
+  ];
+
+  const day = document.createElement("div");
+  day.className = "chat-day";
+  day.textContent = "Today";
+  els.chatThread.replaceChildren(day, ...transcript.map(chatBubble));
+}
+
+function chatBubble(message) {
+  const div = document.createElement("div");
+  div.className = `bubble ${message.who === "agent" ? "agent" : ""}`;
+  div.innerHTML = `${message.text}<time>${message.time}</time>`;
+  return div;
+}
+
+function renderAgentPanel() {
+  const request = getSelectedRequest();
+  const selected = getSelectedSlot();
+  const confidence = confidenceFor(request);
+  els.detectedIntent.textContent = request ? "BOOK_SLOT" : "IDLE";
+  els.confidenceValue.textContent = confidence.toFixed(2);
+  document.querySelector(".confidence-meter span").style.width = `${Math.round(confidence * 100)}%`;
+
+  if (!request) {
+    els.extractedSlots.replaceChildren();
+    els.missingList.replaceChildren(emptyListItem("Waiting for the next booking request."));
+    els.traceList.replaceChildren(...state.data.trace.map(traceItem));
+    els.timelineState.textContent = "Idle";
+    return;
+  }
+
+  const extracted = [
+    ["date", request.date_label],
+    ["time", selected?.slot.label || "Not selected"],
+    ["players", String(request.players)],
+    ["activity", request.activity],
+    ["location", selected?.venue.name || "Any venue"],
+    ["surface", selected ? `${selected.venue.surface} · ${selected.venue.grass_type}` : "Grass"],
+    ["budget", `${formatPrice(state.selectedPrice || selected?.inventory.rate || 0)} approx`],
+  ];
+
+  els.extractedSlots.replaceChildren(...extracted.flatMap(([label, value]) => slotRow(label, value)));
+  const missing = request.missing_fields.length
+    ? request.missing_fields
+    : ["Backup slot preference", "Add-ons final confirmation"];
+  els.missingList.replaceChildren(...missing.map((item) => listItem(item)));
+  els.traceList.replaceChildren(...buildTimeline(request).map(traceItem));
+  els.timelineState.textContent = state.data.decision.state === "sent" ? "Sent" : timelineCopy(request);
+}
+
+function renderOwnerPanel() {
+  const request = getSelectedRequest();
+  els.bookingId.textContent = request ? `Booking ID: BK-${request.id.slice(0, 2).toUpperCase()}51872` : "Booking ID: none";
+  renderAvailabilityBoard();
+  renderPacket();
+  renderGroups(request);
+  renderIntegrations();
+}
+
+function renderAvailabilityBoard() {
+  const slot = state.data.slots.find((item) => item.id === state.activeSlotFilter) || state.data.slots[0];
+  document.querySelectorAll("[data-slot-filter]").forEach((button) => {
+    button.classList.toggle("is-active", button.dataset.slotFilter === slot.id);
+  });
+
+  const rows = state.data.venues.map((venue) => {
+    const inventory = venue.slots[slot.id];
+    const key = slotKey(venue.id, slot.id);
+    const button = document.createElement("button");
+    button.type = "button";
+    button.className = `venue-row ${key === state.selectedSlotId ? "is-selected" : ""}`;
+    button.innerHTML = `
+      <span>
+        <strong>${venue.name}</strong>
+        <small>${venue.surface} · ${venue.grass_type}</small>
+      </span>
+      <span class="venue-rate">${formatPrice(inventory.rate)}</span>
+      <span class="surface-badge">${venue.grass_type}</span>
+      <span class="slot-count ${inventory.status}">${inventoryLabel(inventory)}</span>
+    `;
+    button.addEventListener("click", () => {
+      state.selectedSlotId = key;
+      state.selectedPrice = inventory.rate;
+      render();
+    });
+    return button;
+  });
+  els.availabilityBoard.replaceChildren(...rows);
+}
+
+function renderPacket() {
+  const selected = getSelectedSlot();
+  const packet = [
+    ["Umpire", "₹700"],
+    ["Scorekeeper", "₹300"],
+    ["Match ball", "₹250"],
+    ["Water", "₹200"],
+  ];
+  els.packetList.replaceChildren(
+    ...packet.map(([label, price]) => {
+      const item = document.createElement("div");
+      item.className = "packet-item";
+      item.innerHTML = `<strong>${label}</strong><span>${price}</span>`;
+      return item;
+    })
+  );
+  const base = selected?.inventory.rate || 0;
+  els.suggestedPrice.textContent = `Slot ${formatPrice(base)} · Total add-ons: ${formatPrice(1450)}`;
+}
+
+function renderGroups(request) {
+  const groupA = request
+    ? [
+        ["Group name", request.group_type],
+        ["Primary contact", request.phone],
+        ["Activity", request.activity],
+        ["Players", String(request.players)],
+      ]
+    : [["State", "No request selected"]];
+  const groupB = request
+    ? [
+        ["Group name", "To be confirmed"],
+        ["Status", request.missing_fields.length ? "Needs clarification" : "Ready"],
+        ["Venue", getSelectedSlot()?.venue.name || "Not selected"],
+        ["Slot", getSelectedSlot()?.slot.label || "Not selected"],
+      ]
+    : [["State", "No request selected"]];
+  els.groupA.replaceChildren(...definitionRows(groupA));
+  els.groupB.replaceChildren(...definitionRows(groupB));
+}
+
+function renderIntegrations() {
+  els.integrationsList.replaceChildren(
+    ...state.data.integrations.map((integration) => {
+      const row = document.createElement("div");
+      row.className = "integration-row";
+      row.innerHTML = `<span>${integration.label}</span><span>${integration.copy}</span>`;
+      return row;
+    })
+  );
+}
+
+function renderDecisionBar() {
+  const request = getSelectedRequest();
+  const providerError = state.data.runtime.channel_status === "provider-error";
+  if (document.activeElement !== els.replyDraft) {
+    els.replyDraft.value = request?.reply_draft || "Pick a request to review the reply draft.";
+  }
+  updateCharCount();
+  els.decisionState.textContent = decisionCopy(state.data.decision.state, request);
+
+  const disabled = !request || providerError;
+  els.approveButton.disabled = disabled;
+  els.clarifyButton.disabled = !request;
+  els.rejectButton.disabled = !request;
+}
+
+function slotRow(label, value) {
+  const dt = document.createElement("dt");
+  const dd = document.createElement("dd");
+  const ok = document.createElement("span");
+  dt.textContent = label;
+  dd.textContent = value;
+  ok.className = "ok-mark";
+  ok.textContent = "✓";
+  return [dt, dd, ok];
+}
+
+function definitionRows(rows) {
+  return rows.flatMap(([label, value]) => {
+    const dt = document.createElement("dt");
+    const dd = document.createElement("dd");
+    dt.textContent = label;
+    dd.textContent = value;
+    return [dt, dd];
+  });
+}
+
+function listItem(text) {
+  const li = document.createElement("li");
+  li.textContent = text;
+  return li;
+}
+
+function emptyListItem(text) {
+  return listItem(text);
+}
+
+function emptyPanel(text) {
+  const div = document.createElement("div");
+  div.className = "empty-state";
+  div.textContent = text;
+  return div;
+}
+
+function traceItem(event) {
+  const li = document.createElement("li");
+  li.className = event.tone;
+  li.innerHTML = `<time>${event.timestamp_label || "now"}</time><span>${event.label}</span>`;
+  return li;
+}
+
+function buildTimeline(request) {
+  const selected = getSelectedSlot();
+  return [
+    { id: "hello", label: `Message received from ${request.customer_name}`, tone: "neutral", timestamp_label: "11:34:12" },
+    { id: "time", label: `Extracted ${selected?.slot.label || "requested slot"}`, tone: "success", timestamp_label: "11:35:04" },
+    { id: "players", label: `User: ${request.players} players`, tone: "success", timestamp_label: "11:35:16" },
+    { id: "venue", label: `Venue candidate: ${selected?.venue.name || "Any venue"}`, tone: "success", timestamp_label: "11:36:02" },
+    ...state.data.trace,
+  ];
+}
+
+function confidenceFor(request) {
+  if (!request) return 0;
+  if (state.data.runtime.channel_status === "provider-error") return 0.64;
+  if (request.status === "clarification") return 0.78;
+  if (request.status === "conflict") return 0.86;
+  return 0.92;
+}
+
+function timelineCopy(request) {
+  if (!request) return "Idle";
+  if (request.status === "conflict") return "Alternatives Needed";
+  if (request.missing_fields.length) return "Clarify First";
+  return "Ready for Reply";
+}
+
+function stateLabel(status) {
+  const labels = {
+    new: "New",
+    clarification: "Clarify",
+    conflict: "Conflict",
+    sent: "Sent",
+    rejected: "Rejected",
+  };
+  return labels[status] || status;
+}
+
+function inventoryLabel(inventory) {
+  if (inventory.status === "partial") return `${inventory.request_count} holds`;
+  if (inventory.status === "conflict") return "Conflict";
+  if (inventory.status === "booked") return "Booked";
+  return "Available";
+}
+
+function decisionCopy(decisionState, request) {
+  if (!request) return "Idle. No outbound reply can be sent.";
+  if (decisionState === "sent") return "Sent via simulator. No live WhatsApp proof claimed.";
+  if (decisionState === "rejected") return "Rejected by owner.";
+  if (decisionState === "error") return "Provider error. Retry before sending.";
+  if (request.missing_fields.length) return "Clarification needed before confirmation.";
+  if (request.status === "conflict") return "Conflict detected. Offer alternatives.";
+  return "Pending owner approval.";
+}
+
+function renderMobilePanel() {
+  document.querySelectorAll("[data-panel]").forEach((panel) => {
+    panel.classList.toggle("is-mobile-active", panel.dataset.panel === state.mobilePanel);
+  });
+  document.querySelectorAll("[data-mobile-panel-target]").forEach((tab) => {
+    tab.classList.toggle("is-active", tab.dataset.mobilePanelTarget === state.mobilePanel);
+  });
+}
+
+function updateCharCount() {
+  els.charCount.textContent = `Characters: ${els.replyDraft.value.length}`;
+}
+
+function attachEvents() {
+  document.querySelectorAll("[data-mobile-panel-target]").forEach((tab) => {
+    tab.addEventListener("click", () => {
+      state.mobilePanel = tab.dataset.mobilePanelTarget;
+      renderMobilePanel();
+    });
+  });
+
+  document.querySelectorAll("[data-slot-filter]").forEach((button) => {
+    button.addEventListener("click", () => {
+      state.activeSlotFilter = button.dataset.slotFilter;
+      renderAvailabilityBoard();
+    });
+  });
+
+  els.requestQueue.addEventListener("change", () => {
+    state.selectedRequestId = els.requestQueue.value;
+    const request = getSelectedRequest();
+    if (request) {
+      state.selectedSlotId = request.requested_slot_id;
+      state.activeSlotFilter = state.selectedSlotId.split(":")[1] || "morning";
+      const selected = getSelectedSlot();
+      state.selectedPrice = selected?.inventory.rate || 0;
+    }
+    render();
+  });
+
+  els.replyDraft.addEventListener("input", updateCharCount);
+
+  els.suggestButton.addEventListener("click", () => {
+    const request = getSelectedRequest();
+    const selected = getSelectedSlot();
+    if (!request || !selected) return;
+    const variants = [
+      `Great, ${selected.venue.name} is available for ${request.activity.toLowerCase()} on ${request.date_label} from ${selected.slot.label}. The slot is ${formatPrice(state.selectedPrice)}. Should I hold it after owner approval?`,
+      `I can offer ${selected.venue.name}, ${selected.slot.label}, ${selected.venue.grass_type} surface at ${formatPrice(state.selectedPrice)}. Please confirm and we will proceed after owner approval.`,
+      `Available option: ${selected.venue.name} on ${request.date_label}, ${selected.slot.label}, for ${request.players} players. Estimated slot cost is ${formatPrice(state.selectedPrice)} plus selected add-ons.`,
+    ];
+    state.variationIndex = (state.variationIndex + 1) % variants.length;
+    els.replyDraft.value = variants[state.variationIndex];
+    updateCharCount();
+  });
+
+  els.approveButton.addEventListener("click", () => {
+    if (!state.data || state.data.runtime.channel_status === "provider-error") return;
+    const request = getSelectedRequest();
+    if (!request) return;
+    state.data.decision.state = "sending";
+    state.data.trace.push({ id: "sending", label: "Owner approved; simulator send in progress", tone: "neutral", timestamp_label: "now" });
+    renderDecisionBar();
+    renderAgentPanel();
+    setTimeout(() => {
+      state.data.decision.state = "sent";
+      request.status = "sent";
+      request.tone = "ready";
+      request.reply_draft = els.replyDraft.value;
+      state.data.trace.push({ id: "sent", label: "Reply marked sent via simulator", tone: "success", timestamp_label: "now" });
+      render();
+    }, 650);
+  });
+
+  els.clarifyButton.addEventListener("click", () => {
+    const request = getSelectedRequest();
+    if (!request) return;
+    request.status = "clarification";
+    request.tone = "clarification";
+    request.reply_draft = els.replyDraft.value || `Hi ${request.customer_name.split(" ")[0]}, could you confirm the missing details before I ask the owner to hold this slot?`;
+    state.data.trace.push({ id: "edited-send", label: "Edited reply prepared for simulator send", tone: "warning", timestamp_label: "now" });
+    render();
+  });
+
+  els.rejectButton.addEventListener("click", () => {
+    const request = getSelectedRequest();
+    if (!request) return;
+    request.status = "rejected";
+    request.tone = "rejected";
+    state.data.decision.state = "rejected";
+    state.data.trace.push({ id: "rejected", label: "Owner rejected the outbound reply", tone: "error", timestamp_label: "now" });
+    render();
+  });
+
+  els.resetDemoButton.addEventListener("click", () => loadScenario("normal"));
+}
+
+attachEvents();
+loadScenario("normal");

frontend/styles/app.css

@@ -0,0 +1,1077 @@
+* {
+  box-sizing: border-box;
+}
+
+html {
+  min-height: 100%;
+  background: #071012;
+}
+
+body {
+  margin: 0;
+  min-height: 100%;
+  color: #10171a;
+  font-family: var(--fl-font-body);
+  background:
+    linear-gradient(180deg, rgba(7, 16, 18, 0.92), rgba(7, 16, 18, 0.48) 58%, rgba(7, 16, 18, 0.92)),
+    url("/assets/floodlight-field-backdrop.png") center / cover fixed no-repeat,
+    #071012;
+}
+
+button,
+select,
+textarea {
+  font: inherit;
+}
+
+button {
+  cursor: pointer;
+}
+
+button:disabled {
+  cursor: not-allowed;
+  filter: grayscale(0.35);
+  opacity: 0.62;
+}
+
+button:focus-visible,
+select:focus-visible,
+textarea:focus-visible {
+  outline: 2px solid var(--fl-lime);
+  outline-offset: 2px;
+}
+
+.app-shell {
+  min-height: 100vh;
+}
+
+.topbar {
+  min-height: 60px;
+  display: flex;
+  align-items: center;
+  gap: 20px;
+  padding: 10px 18px;
+  color: #f7faf8;
+  background: linear-gradient(180deg, #11191d, #090e11);
+  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
+  box-shadow: 0 10px 24px rgba(0, 0, 0, 0.24);
+}
+
+.brand-lockup {
+  width: 154px;
+  display: flex;
+  align-items: center;
+}
+
+.brand-logo {
+  width: 146px;
+  height: auto;
+  display: block;
+}
+
+.agent-pill {
+  min-height: 30px;
+  display: inline-flex;
+  align-items: center;
+  gap: 9px;
+  padding: 0 14px;
+  border: 1px solid rgba(255, 255, 255, 0.18);
+  border-radius: 6px;
+  font-weight: 800;
+  white-space: nowrap;
+}
+
+.agent-pill span,
+.live-badge span {
+  width: 10px;
+  height: 10px;
+  border-radius: 999px;
+  background: #25d366;
+  box-shadow: 0 0 18px rgba(37, 211, 102, 0.5);
+}
+
+.top-separator {
+  width: 1px;
+  height: 18px;
+  background: rgba(255, 255, 255, 0.28);
+}
+
+.top-meta,
+.owner-menu {
+  color: rgba(255, 255, 255, 0.9);
+  font-size: 14px;
+  white-space: nowrap;
+}
+
+.top-meta strong {
+  color: #fff;
+}
+
+.top-meta.channel {
+  color: var(--fl-lime);
+  font-weight: 800;
+}
+
+.top-spacer {
+  flex: 1;
+}
+
+.ball-accent {
+  width: 46px;
+  height: auto;
+  filter: drop-shadow(0 8px 16px rgba(0, 0, 0, 0.4));
+}
+
+.scenario-bar {
+  display: flex;
+  align-items: center;
+  gap: 14px;
+  padding: 10px 18px;
+  color: #eaf0ec;
+  background: rgba(12, 20, 23, 0.9);
+  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
+}
+
+.scenario-label,
+.section-title {
+  font-size: 12px;
+  font-weight: 800;
+  color: #68747a;
+  letter-spacing: 0.04em;
+  text-transform: uppercase;
+}
+
+.scenario-label {
+  color: #d8e3df;
+}
+
+.scenario-buttons {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 8px;
+}
+
+.scenario-buttons button,
+.ghost-button {
+  min-height: 34px;
+  border: 1px solid rgba(255, 255, 255, 0.16);
+  border-radius: 6px;
+  color: #edf5f0;
+  background: rgba(255, 255, 255, 0.05);
+  padding: 0 12px;
+}
+
+.scenario-buttons button.is-active,
+.slot-filter.is-active {
+  color: #081012;
+  background: var(--fl-lime);
+  border-color: var(--fl-lime);
+  font-weight: 900;
+}
+
+.mobile-tabs {
+  display: none;
+}
+
+.console-grid {
+  display: grid;
+  grid-template-columns: minmax(280px, 0.8fr) minmax(430px, 1.12fr) minmax(390px, 1fr);
+  grid-template-rows: minmax(650px, calc(100vh - 244px)) minmax(150px, auto);
+  gap: 12px;
+  padding: 12px 18px 18px;
+}
+
+.panel-card {
+  background: rgba(255, 255, 255, 0.95);
+  border: 1px solid rgba(210, 218, 222, 0.88);
+  border-radius: 12px;
+  box-shadow: 0 18px 44px rgba(8, 16, 18, 0.2);
+  overflow: hidden;
+}
+
+.phone-panel {
+  min-width: 0;
+}
+
+.phone-shell {
+  height: 100%;
+  min-height: 640px;
+  display: flex;
+  flex-direction: column;
+  overflow: hidden;
+  color: #11191d;
+  background: #f4f0e9;
+  border: 9px solid #10161a;
+  border-radius: 22px;
+  box-shadow: 0 24px 56px rgba(0, 0, 0, 0.3);
+}
+
+.phone-status,
+.chat-head {
+  color: #fff;
+  background: linear-gradient(180deg, #151d21, #0b1114);
+}
+
+.phone-status {
+  min-height: 44px;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 0 18px;
+  font-weight: 800;
+}
+
+.phone-signal {
+  font-size: 12px;
+  letter-spacing: 0.08em;
+}
+
+.chat-head {
+  min-height: 64px;
+  display: grid;
+  grid-template-columns: 34px 42px 1fr auto;
+  align-items: center;
+  gap: 10px;
+  padding: 0 12px;
+}
+
+.icon-button {
+  width: 32px;
+  height: 32px;
+  border: 0;
+  color: #fff;
+  background: transparent;
+  font-size: 30px;
+  line-height: 1;
+}
+
+.avatar-dot {
+  width: 40px;
+  height: 40px;
+  border-radius: 999px;
+  background:
+    linear-gradient(135deg, rgba(198, 226, 73, 0.72), rgba(85, 97, 34, 0.65)),
+    url("/assets/floodlight-ground-board.png") center / cover no-repeat;
+  border: 1px solid rgba(255, 255, 255, 0.22);
+}
+
+.chat-head strong,
+.chat-head span {
+  display: block;
+}
+
+.chat-head strong {
+  font-size: 16px;
+}
+
+.chat-head div span {
+  color: #bbd0c5;
+  font-size: 12px;
+}
+
+.chat-actions {
+  color: #dce5e0;
+  font-size: 12px;
+  white-space: nowrap;
+}
+
+.chat-thread {
+  flex: 1;
+  overflow-y: auto;
+  padding: 12px;
+  background:
+    linear-gradient(rgba(244, 240, 233, 0.92), rgba(244, 240, 233, 0.92)),
+    url("/assets/floodlight-field-backdrop.png") center / cover no-repeat;
+}
+
+.chat-day {
+  width: max-content;
+  margin: 0 auto 10px;
+  padding: 4px 10px;
+  border-radius: 999px;
+  color: #667179;
+  background: #fff;
+  font-size: 12px;
+}
+
+.bubble {
+  width: fit-content;
+  max-width: 78%;
+  margin-bottom: 8px;
+  padding: 9px 10px 7px;
+  border-radius: 8px;
+  background: #fff;
+  box-shadow: 0 1px 2px rgba(10, 20, 24, 0.13);
+  line-height: 1.3;
+  font-size: 14px;
+}
+
+.bubble.agent {
+  margin-left: auto;
+  background: #d8f9cc;
+}
+
+.bubble time {
+  display: block;
+  margin-top: 4px;
+  color: #728078;
+  text-align: right;
+  font-size: 10px;
+}
+
+.chat-composer {
+  min-height: 58px;
+  display: grid;
+  grid-template-columns: 1fr auto auto;
+  align-items: center;
+  gap: 8px;
+  padding: 8px;
+  background: #f4f0e9;
+}
+
+.chat-composer span {
+  min-height: 42px;
+  display: flex;
+  align-items: center;
+  padding: 0 14px;
+  border-radius: 999px;
+  color: #8a9297;
+  background: #fff;
+}
+
+.chat-composer button {
+  min-width: 44px;
+  height: 42px;
+  border: 0;
+  border-radius: 999px;
+  color: #fff;
+  background: #0e9d62;
+  font-size: 12px;
+}
+
+.empty-state {
+  margin: 14px;
+  padding: 16px;
+  border: 1px dashed #cfd9dd;
+  border-radius: 7px;
+  color: #637077;
+  background: rgba(255, 255, 255, 0.78);
+  line-height: 1.45;
+}
+
+.panel-title-row {
+  min-height: 70px;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  gap: 16px;
+  padding: 14px 16px;
+  border-bottom: 1px solid #dde5e8;
+}
+
+h1,
+h2,
+h3,
+p {
+  margin: 0;
+}
+
+h1,
+h2,
+h3 {
+  letter-spacing: 0;
+}
+
+h1 {
+  font-size: 22px;
+}
+
+h2 {
+  font-size: 20px;
+}
+
+h3 {
+  font-size: 16px;
+}
+
+.panel-subcopy {
+  display: block;
+  margin-top: 5px;
+  color: #68747a;
+  font-size: 12px;
+}
+
+.live-badge,
+.ready-pill,
+.count-chip {
+  display: inline-flex;
+  align-items: center;
+  gap: 8px;
+  padding: 5px 10px;
+  border-radius: 6px;
+  color: #077932;
+  background: #dff7e7;
+  font-size: 12px;
+  font-weight: 900;
+}
+
+.intent-card,
+.agent-columns,
+.timeline-card {
+  margin: 14px 16px;
+  border: 1px solid #dbe3e7;
+  border-radius: 7px;
+  background: #fff;
+}
+
+.intent-card {
+  min-height: 100px;
+  display: grid;
+  grid-template-columns: 1fr 1fr;
+}
+
+.intent-card > div {
+  padding: 18px;
+}
+
+.intent-card > div + div {
+  border-left: 1px solid #dbe3e7;
+}
+
+.intent-chip {
+  width: max-content;
+  display: block;
+  margin-top: 12px;
+  padding: 8px 12px;
+  border-radius: 6px;
+  color: #047b2d;
+  background: #cff5dc;
+  font-size: 20px;
+}
+
+.confidence-box strong {
+  display: inline-block;
+  margin: 12px 14px 0 0;
+  font-size: 20px;
+}
+
+.confidence-box em {
+  color: #06983e;
+  font-style: normal;
+  font-weight: 900;
+}
+
+.confidence-meter {
+  width: 34%;
+  height: 7px;
+  display: inline-block;
+  overflow: hidden;
+  border-radius: 999px;
+  background: #e3ece8;
+  vertical-align: 2px;
+}
+
+.confidence-meter span {
+  width: 92%;
+  height: 100%;
+  display: block;
+  background: linear-gradient(90deg, #16ad4f, var(--fl-lime));
+}
+
+.agent-columns {
+  min-height: 240px;
+  display: grid;
+  grid-template-columns: 1.45fr 1fr;
+  margin-top: 0;
+}
+
+.extracted-card,
+.unclear-card {
+  padding: 18px;
+}
+
+.unclear-card {
+  border-left: 1px solid #dbe3e7;
+}
+
+.slot-list {
+  display: grid;
+  grid-template-columns: minmax(82px, auto) 1fr 20px;
+  gap: 12px 14px;
+  margin: 18px 0 0;
+}
+
+.slot-list dt,
+.slot-list dd {
+  margin: 0;
+  font-size: 14px;
+}
+
+.slot-list dt {
+  color: #3e4b50;
+}
+
+.slot-list dd {
+  color: #10171a;
+}
+
+.ok-mark {
+  width: 17px;
+  height: 17px;
+  display: grid;
+  place-items: center;
+  border-radius: 999px;
+  color: #fff;
+  background: #16a34a;
+  font-size: 11px;
+  font-weight: 900;
+}
+
+.missing-list {
+  margin: 18px 0 0;
+  padding: 0;
+  list-style: none;
+}
+
+.missing-list li {
+  display: grid;
+  grid-template-columns: 10px 1fr;
+  gap: 10px;
+  margin-bottom: 14px;
+  color: #3f4c52;
+  font-size: 14px;
+}
+
+.missing-list li::before {
+  content: "";
+  width: 8px;
+  height: 8px;
+  margin-top: 5px;
+  border-radius: 999px;
+  background: #9aa5aa;
+}
+
+.timeline-card {
+  position: relative;
+  min-height: 230px;
+  padding: 18px;
+}
+
+.trace-list {
+  list-style: none;
+  margin: 18px 0 0;
+  padding: 0 0 0 12px;
+}
+
+.trace-list li {
+  position: relative;
+  display: grid;
+  grid-template-columns: 74px 1fr;
+  gap: 16px;
+  padding: 0 0 18px 18px;
+  font-size: 14px;
+}
+
+.trace-list li::before {
+  content: "";
+  position: absolute;
+  left: -1px;
+  top: 2px;
+  width: 12px;
+  height: 12px;
+  border: 2px solid #18a84f;
+  border-radius: 999px;
+  background: #fff;
+}
+
+.trace-list li::after {
+  content: "";
+  position: absolute;
+  left: 5px;
+  top: 18px;
+  bottom: 0;
+  width: 1px;
+  background: #18a84f;
+}
+
+.trace-list li:last-child::after {
+  display: none;
+}
+
+.trace-list time {
+  color: #28353a;
+}
+
+.trace-list span {
+  color: #172126;
+}
+
+.ready-pill {
+  position: absolute;
+  right: 18px;
+  bottom: 14px;
+  color: #057a31;
+  background: #ecfff0;
+  border: 1px solid #22aa54;
+}
+
+.owner-panel {
+  overflow-y: auto;
+}
+
+.owner-section {
+  margin: 10px 14px;
+  padding: 12px;
+  border: 1px solid #dbe3e7;
+  border-radius: 7px;
+  background: #fff;
+}
+
+.owner-section-head {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 10px;
+  margin-bottom: 12px;
+}
+
+.date-slot-row {
+  display: grid;
+  grid-template-columns: minmax(140px, 1fr) auto auto;
+  gap: 8px;
+  margin-bottom: 12px;
+}
+
+.date-slot-row select,
+.slot-filter {
+  min-height: 36px;
+  border: 1px solid #d7e0e4;
+  border-radius: 6px;
+  color: #1a252a;
+  background: #fff;
+  padding: 0 10px;
+}
+
+.venue-list {
+  display: grid;
+  gap: 8px;
+}
+
+.venue-row {
+  width: 100%;
+  min-height: 58px;
+  display: grid;
+  grid-template-columns: 1fr auto auto auto;
+  align-items: center;
+  gap: 12px;
+  border: 1px solid #dfe7ea;
+  border-radius: 6px;
+  color: #172126;
+  background: #fff;
+  padding: 10px 12px;
+  text-align: left;
+}
+
+.venue-row.is-selected {
+  border-color: #25b656;
+  box-shadow: 0 0 0 2px rgba(37, 182, 86, 0.12);
+}
+
+.venue-row strong,
+.venue-row span {
+  display: block;
+}
+
+.venue-row small {
+  color: #59686e;
+}
+
+.venue-rate {
+  font-weight: 900;
+}
+
+.surface-badge,
+.slot-count,
+.integration-row span:last-child {
+  border-radius: 5px;
+  padding: 5px 9px;
+  white-space: nowrap;
+  font-size: 12px;
+  font-weight: 800;
+}
+
+.surface-badge {
+  color: #2b3a40;
+  background: #edf4f1;
+}
+
+.slot-count.available {
+  color: #087a34;
+  background: #def8e7;
+}
+
+.slot-count.partial {
+  color: #6f4b00;
+  background: #fff1ce;
+}
+
+.slot-count.conflict,
+.slot-count.booked {
+  color: #a72a1f;
+  background: #ffe0db;
+}
+
+.package-section h3,
+.integrations h3 {
+  margin-bottom: 10px;
+}
+
+.package-section h3 span,
+.group-card h3 span,
+.reply-editor label span {
+  color: #59686e;
+  font-weight: 500;
+}
+
+.packet-list {
+  display: grid;
+  grid-template-columns: repeat(4, minmax(0, 1fr));
+  gap: 8px;
+}
+
+.packet-item {
+  min-height: 56px;
+  border: 1px solid #dfe7ea;
+  border-radius: 6px;
+  padding: 8px;
+  font-size: 12px;
+}
+
+.packet-item strong,
+.packet-item span {
+  display: block;
+}
+
+.packet-item span {
+  margin-top: 4px;
+  color: #59686e;
+}
+
+.packet-total {
+  margin-top: 8px;
+  color: #3e4b50;
+  text-align: right;
+  font-size: 13px;
+}
+
+.group-section {
+  display: grid;
+  grid-template-columns: 1fr 1fr;
+  padding: 0;
+  overflow: hidden;
+}
+
+.group-card {
+  padding: 12px;
+}
+
+.group-card + .group-card {
+  border-left: 1px solid #dbe3e7;
+}
+
+.group-card h3 {
+  padding-bottom: 8px;
+  border-bottom: 2px solid #22aa54;
+  font-size: 14px;
+}
+
+.group-card dl {
+  display: grid;
+  grid-template-columns: 1fr;
+  gap: 2px;
+  margin: 10px 0 0;
+  font-size: 12px;
+}
+
+.group-card dt {
+  color: #59686e;
+}
+
+.group-card dd {
+  margin: 0 0 7px;
+  color: #182328;
+}
+
+.integrations {
+  margin-bottom: 14px;
+}
+
+.integration-row {
+  min-height: 38px;
+  display: grid;
+  grid-template-columns: 1fr auto;
+  align-items: center;
+  gap: 12px;
+  padding: 8px 0;
+  border-top: 1px solid #edf2f4;
+  color: #172126;
+}
+
+.integration-row span:last-child {
+  color: #8a3500;
+  background: #fff1ce;
+}
+
+.decision-bar {
+  grid-column: 1 / -1;
+  display: grid;
+  grid-template-columns: minmax(0, 1.35fr) minmax(420px, 1fr);
+}
+
+.reply-editor {
+  padding: 14px 16px;
+}
+
+.reply-editor label {
+  display: block;
+  margin-bottom: 8px;
+  font-weight: 900;
+}
+
+textarea {
+  width: 100%;
+  resize: vertical;
+  border: 1px solid #cdd8dd;
+  border-radius: 6px;
+  color: #172126;
+  background: #fff;
+  padding: 12px;
+  line-height: 1.35;
+}
+
+.reply-meta {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  gap: 12px;
+  margin-top: 8px;
+  color: #7a878c;
+  font-size: 12px;
+}
+
+.reply-meta .ghost-button {
+  color: #415057;
+  border-color: #cfd9dd;
+  background: #fff;
+}
+
+.decision-actions {
+  padding: 14px 16px;
+  border-left: 1px solid #dbe3e7;
+}
+
+.decision-state {
+  min-height: 18px;
+  margin: 4px 0 12px;
+  color: #68747a;
+  font-size: 13px;
+}
+
+.action-grid {
+  display: grid;
+  grid-template-columns: repeat(3, 1fr);
+  gap: 14px;
+}
+
+.approve-button,
+.edit-button,
+.reject-button {
+  min-height: 82px;
+  border: 0;
+  border-radius: 6px;
+  color: #fff;
+  font-size: 17px;
+  font-weight: 900;
+}
+
+.approve-button {
+  background: linear-gradient(180deg, #28b43d, #14902e);
+}
+
+.edit-button {
+  background: linear-gradient(180deg, #ff563e, #ea321f);
+}
+
+.reject-button {
+  background: linear-gradient(180deg, #ff3e4d, #e62231);
+}
+
+.approve-button span,
+.edit-button span,
+.reject-button span {
+  display: block;
+  margin-top: 6px;
+  font-size: 12px;
+  font-weight: 500;
+}
+
+.request-select {
+  position: fixed;
+  right: 18px;
+  bottom: 18px;
+  z-index: 4;
+  min-height: 36px;
+  max-width: 260px;
+  border: 1px solid rgba(255, 255, 255, 0.2);
+  border-radius: 6px;
+  color: #edf5f0;
+  background: #11191d;
+  padding: 0 10px;
+}
+
+.is-provider-error .top-meta.channel,
+.is-provider-error .decision-state {
+  color: var(--fl-red-strong);
+}
+
+@media (prefers-reduced-motion: no-preference) {
+  button,
+  .venue-row {
+    transition:
+      border-color var(--fl-duration-fast) var(--fl-ease-out),
+      background var(--fl-duration-fast) var(--fl-ease-out),
+      transform var(--fl-duration-fast) var(--fl-ease-out);
+  }
+
+  button:hover {
+    transform: translateY(-1px);
+  }
+}
+
+@media (max-width: 1180px) {
+  .topbar {
+    flex-wrap: wrap;
+  }
+
+  .console-grid {
+    grid-template-columns: 1fr;
+    grid-template-rows: auto;
+  }
+
+  .mobile-tabs {
+    display: grid;
+    grid-template-columns: repeat(4, 1fr);
+    background: rgba(12, 20, 23, 0.92);
+    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
+  }
+
+  .mobile-tab {
+    min-height: 44px;
+    border: 0;
+    border-right: 1px solid rgba(255, 255, 255, 0.09);
+    color: #eef5f0;
+    background: transparent;
+  }
+
+  .mobile-tab.is-active {
+    color: #081012;
+    background: var(--fl-lime);
+    font-weight: 900;
+  }
+
+  [data-panel] {
+    display: none;
+  }
+
+  [data-panel].is-mobile-active {
+    display: block;
+    grid-column: 1;
+    grid-row: 1;
+  }
+
+  .decision-bar.is-mobile-active {
+    display: grid;
+    grid-column: 1;
+    grid-row: 1;
+  }
+
+  .phone-shell {
+    min-height: 680px;
+  }
+
+  .decision-bar {
+    grid-column: auto;
+    grid-template-columns: 1fr;
+  }
+
+  .decision-actions {
+    border-left: 0;
+    border-top: 1px solid #dbe3e7;
+  }
+
+  .request-select {
+    position: static;
+    margin: 0 18px 18px;
+    color: #10171a;
+    background: #fff;
+  }
+}
+
+@media (max-width: 680px) {
+  .topbar {
+    gap: 10px;
+    padding: 10px 12px;
+  }
+
+  .brand-lockup {
+    width: 128px;
+  }
+
+  .brand-logo {
+    width: 122px;
+  }
+
+  .owner-menu,
+  .top-separator {
+    display: none;
+  }
+
+  .scenario-bar {
+    align-items: flex-start;
+    flex-direction: column;
+    padding: 10px 12px;
+  }
+
+  .console-grid {
+    padding: 12px;
+  }
+
+  .phone-shell {
+    min-height: 620px;
+  }
+
+  .intent-card,
+  .agent-columns,
+  .date-slot-row,
+  .group-section,
+  .decision-bar,
+  .action-grid {
+    grid-template-columns: 1fr;
+  }
+
+  .intent-card > div + div,
+  .unclear-card,
+  .group-card + .group-card {
+    border-left: 0;
+    border-top: 1px solid #dbe3e7;
+  }
+
+  .packet-list {
+    grid-template-columns: repeat(2, minmax(0, 1fr));
+  }
+
+  .venue-row {
+    grid-template-columns: 1fr;
+    align-items: start;
+  }
+}

frontend/styles/tokens.css

@@ -0,0 +1,54 @@
+:root {
+  color-scheme: dark;
+
+  --fl-font-display: "Barlow Condensed", "Roboto Condensed", "Arial Narrow", system-ui, sans-serif;
+  --fl-font-body: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
+  --fl-font-mono: "Roboto Mono", "SFMono-Regular", Consolas, monospace;
+
+  --fl-bg: #081012;
+  --fl-bg-elevated: #10181b;
+  --fl-panel: #121d22;
+  --fl-panel-strong: #162126;
+  --fl-panel-soft: #1c2a30;
+  --fl-line: #344148;
+  --fl-line-strong: #52585c;
+
+  --fl-text: #f2f5f6;
+  --fl-text-soft: #c8d0d3;
+  --fl-text-muted: #8c999f;
+  --fl-text-dim: #647178;
+
+  --fl-lime: #c6e249;
+  --fl-lime-strong: #d7ff39;
+  --fl-lime-soft: rgba(198, 226, 73, 0.16);
+  --fl-field: #556122;
+  --fl-field-bright: #778727;
+  --fl-amber: #ffbd4a;
+  --fl-red: #b94335;
+  --fl-red-strong: #ff5848;
+  --fl-blue-gray: #627586;
+
+  --fl-shadow-deep: 0 24px 80px rgba(0, 0, 0, 0.44);
+  --fl-shadow-panel: 0 16px 44px rgba(0, 0, 0, 0.28);
+  --fl-glow-lime: 0 0 0 1px rgba(198, 226, 73, 0.65), 0 0 28px rgba(198, 226, 73, 0.18);
+  --fl-glow-white: 0 0 32px rgba(242, 245, 246, 0.22);
+
+  --fl-radius-xs: 4px;
+  --fl-radius-sm: 6px;
+  --fl-radius-md: 8px;
+  --fl-radius-lg: 12px;
+  --fl-radius-pill: 999px;
+
+  --fl-space-1: 4px;
+  --fl-space-2: 8px;
+  --fl-space-3: 12px;
+  --fl-space-4: 16px;
+  --fl-space-5: 20px;
+  --fl-space-6: 24px;
+  --fl-space-7: 32px;
+  --fl-space-8: 40px;
+
+  --fl-duration-fast: 140ms;
+  --fl-duration-med: 240ms;
+  --fl-ease-out: cubic-bezier(0.2, 0.8, 0.2, 1);
+}

requirements.txt

@@ -0,0 +1 @@
+gradio>=6.18.0