final commit

ticketiq/rxconfig.py

@@ -2,11 +2,7 @@ import reflex as rx
 
 config = rx.Config(
     app_name="ticketiq",
-    plugins=[
-        rx.plugins.TailwindV4Plugin(),
-    ],
-    frontend_path = "",
-    backend_port = 7860,
-    api_url="http://localhost:7860",
-    disable_plugins = ["SitemapPlugin"]
+    frontend_port=3000,
+    backend_port=8001,
+    api_url="http://localhost:8001",
 )

ticketiq/ticketiq/card.py

@@ -75,38 +75,41 @@ def ticket_card(ticket: dict, show_similar: bool = True) -> rx.Component:
             margin_bottom="14px",
         ),
 
-        # ── solution toggle ───────────────────────────────────────────────
-        rx.box(
-            rx.button(
-                rx.icon(rx.cond(is_open, "chevron-up", "chevron-down"), size=12),
-                rx.icon("zap", size=12),
-                rx.text("Solution", font_size="12px", font_family=SANS),
-                on_click=TicketState.toggle_expanded(tid),
-                display="flex", align_items="center", gap="5px",
-                background=rx.cond(is_open, ACCENT_BG, "transparent"),
-                color=rx.cond(is_open, ACCENT, MUTED),
-                border=rx.cond(is_open, f"1px solid {ACCENT}", f"1px solid {BORDER}"),
-                border_radius="4px", padding="5px 10px",
-                cursor="pointer", font_family=SANS,
-                transition="all 0.15s",
-            ),
-            rx.cond(
-                is_open,
-                rx.box(
-                    rx.text(
-                        ticket["solution"],
-                        font_size="13px", line_height="1.75",
-                        color=TEXT, white_space="pre-wrap",
+        # ── solution toggle (only when solution is present) ──────────────
+        rx.cond(
+            ticket["solution"] != "",
+            rx.box(
+                rx.button(
+                    rx.icon(rx.cond(is_open, "chevron-up", "chevron-down"), size=12),
+                    rx.icon("zap", size=12),
+                    rx.text("Solution", font_size="12px", font_family=SANS),
+                    on_click=TicketState.toggle_expanded(tid),
+                    display="flex", align_items="center", gap="5px",
+                    background=rx.cond(is_open, ACCENT_BG, "transparent"),
+                    color=rx.cond(is_open, ACCENT, MUTED),
+                    border=rx.cond(is_open, f"1px solid {ACCENT}", f"1px solid {BORDER}"),
+                    border_radius="4px", padding="5px 10px",
+                    cursor="pointer", font_family=SANS,
+                    transition="all 0.15s",
+                ),
+                rx.cond(
+                    is_open,
+                    rx.box(
+                        rx.text(
+                            ticket["solution"],
+                            font_size="13px", line_height="1.75",
+                            color=TEXT, white_space="pre-wrap",
+                        ),
+                        margin_top="10px", padding="14px 16px",
+                        background="rgba(245,166,35,0.04)",
+                        border=f"1px solid {BORDER}",
+                        border_left=f"3px solid {ACCENT}",
+                        border_radius="4px",
                     ),
-                    margin_top="10px", padding="14px 16px",
-                    background="rgba(245,166,35,0.04)",
-                    border=f"1px solid {BORDER}",
-                    border_left=f"3px solid {ACCENT}",
-                    border_radius="4px",
                 ),
-            ),
-            margin_bottom=rx.cond(
-                show_similar & TicketState.has_similar_tickets, "14px", "0"
+                margin_bottom=rx.cond(
+                    show_similar & TicketState.has_similar_tickets, "14px", "0"
+                ),
             ),
         ),
 
@@ -124,11 +127,16 @@ def ticket_card(ticket: dict, show_similar: bool = True) -> rx.Component:
         ),
 
         # ── card shell ────────────────────────────────────────────────────
+                # ── card shell ────────────────────────────────────────────────────
         background=SURFACE,
-        border=f"1px solid {BORDER}",
+        border=f"2px solid {rx.cond(rx.color_mode == 'dark', '#4a4a5e', '#c0c0cc')}",
         border_radius=RADIUS,
         padding="20px",
         width="100%",
-        _hover={"border_color": BORDER_HI},
-        transition="border-color 0.2s",
+        box_shadow="0 2px 8px rgba(0,0,0,0.15)",
+        _hover={
+            "border_color": ACCENT,
+            "box_shadow": f"0 4px 16px {ACCENT_BG}",
+        },
+        transition="all 0.2s ease",
     )

ticketiq/ticketiq/modal.py

@@ -40,12 +40,12 @@ def ticket_modal() -> rx.Component:
     return rx.cond(
         TicketState.modal_open,
         rx.box(
-            # ── backdrop ────────────────────────────────────────────────
+            # ── backdrop (darker overlay) ────────────────────────────────
             rx.box(
                 on_click=TicketState.close_modal,
                 position="fixed", top="0", left="0",
                 width="100vw", height="100vh",
-                background=OVERLAY,
+                background="rgba(0,0,0,0.7)",
                 z_index="40",
             ),
 
@@ -60,25 +60,25 @@ def ticket_modal() -> rx.Component:
                         ),
                         rx.text(
                             "Ticket Detail",
-                            font_size="15px", font_weight="600", color=TEXT,
+                            font_size="16px", font_weight="600", color=TEXT,
                         ),
                         gap="2px", align="start",
                     ),
                     rx.spacer(),
                     rx.icon_button(
-                        rx.icon("x", size=16),
+                        rx.icon("x", size=18),
                         on_click=TicketState.close_modal,
                         background="transparent",
-                        border=f"1px solid {BORDER}",
-                        border_radius="6px",
+                        border=f"1px solid {BORDER_HI}",
+                        border_radius="8px",
                         color=MUTED,
                         cursor="pointer",
                         size="2",
                         variant="ghost",
                     ),
                     align="center",
-                    padding="20px 24px",
-                    border_bottom=f"1px solid {BORDER}",
+                    padding="24px",
+                    border_bottom=f"1px solid {BORDER_HI}",
                 ),
 
                 # scrollable body
@@ -88,10 +88,10 @@ def ticket_modal() -> rx.Component:
                         section_label("DESCRIPTION"),
                         rx.text(
                             t["description"],
-                            font_size="13px", line_height="1.7",
+                            font_size="14px", line_height="1.7",
                             color=TEXT, white_space="pre-wrap",
                         ),
-                        margin_bottom="20px",
+                        margin_bottom="24px",
                     ),
 
                     # label + department
@@ -99,17 +99,17 @@ def ticket_modal() -> rx.Component:
                         section_label("CATEGORY"),
                         mono(
                             t["label"],
-                            font_size="12px", color=ACCENT,
+                            font_size="13px", color=ACCENT,
                             letter_spacing="0.02em",
                         ),
                         rx.cond(
                             t["department"] != "Uncategorised",
                             rx.text(
                                 t["department"],
-                                font_size="12px", color=MUTED, margin_top="2px",
+                                font_size="13px", color=MUTED, margin_top="4px",
                             ),
                         ),
-                        margin_bottom="20px",
+                        margin_bottom="24px",
                     ),
 
                     # badges + confidence
@@ -117,12 +117,12 @@ def ticket_modal() -> rx.Component:
                         priority_badge(t["priority"]),
                         source_badge(t["source"]),
                         gap="8px",
-                        margin_bottom="12px",
+                        margin_bottom="16px",
                     ),
                     rx.box(
                         rx.text("Confidence", font_size="11px", color=MUTED, margin_bottom="4px"),
                         confidence_bar(t["confidence"]),
-                        margin_bottom="20px",
+                        margin_bottom="24px",
                     ),
 
                     # solution
@@ -161,7 +161,7 @@ def ticket_modal() -> rx.Component:
                             border_left=f"3px solid {ACCENT}",
                             border_radius="4px",
                         ),
-                        margin_bottom="20px",
+                        margin_bottom="24px",
                     ),
 
                     # similar tickets
@@ -173,23 +173,27 @@ def ticket_modal() -> rx.Component:
                         ),
                     ),
 
-                    padding="20px 24px",
+                    padding="24px",
                     overflow_y="auto",
                     flex="1",
                 ),
 
-                # panel shell
+                # panel shell – now with high‑contrast background and bold left edge
                 position="fixed",
                 top="0", right="0",
-                width=PANEL_W,
+                width="540px",
                 max_width="95vw",
                 height="100vh",
-                background=SURFACE,
-                border_left=f"1px solid {BORDER_HI}",
+                background=rx.cond(rx.color_mode == "dark", "#262630", "#f5f6fa"),
+                border_left=f"3px solid {rx.cond(rx.color_mode == 'dark', '#5a5a70', '#a0a0b0')}",
                 z_index="50",
                 display="flex",
                 flex_direction="column",
-                box_shadow="-8px 0 32px rgba(0,0,0,0.4)",
+                box_shadow=rx.cond(
+                    rx.color_mode == "dark",
+                    "-12px 0 40px rgba(255,255,255,0.05), 0 0 0 1px rgba(255,255,255,0.05)",
+                    "-12px 0 40px rgba(0,0,0,0.25), 0 0 0 1px rgba(0,0,0,0.1)",
+                ),
             ),
         ),
     )

ticketiq/ticketiq/pages/playground.py

@@ -4,6 +4,37 @@ from ..ui import (
     mono, ACCENT, BORDER, MUTED, TEXT, SURFACE, SANS, RADIUS, section_label
 )
 
+def network_graph_card() -> rx.Component:
+    return rx.box(
+        # Header + button (outside the iframe)
+        rx.vstack(
+            section_label("SIMILAR TICKETS NETWORK (DRAGGABLE)"),
+            rx.button("Show Network", on_click=PlaygroundState.show_network),
+            spacing="3",
+            margin_bottom="8px",
+        ),
+        # Iframe in a dedicated container that forces 100% width
+        rx.cond(
+            PlaygroundState.network_url != "",
+            rx.box(
+                rx.html(
+                    f'<iframe src="{PlaygroundState.network_url}" '
+                    'style="width:100%; height:520px; border:none; display:block;"></iframe>'
+                ),
+                width="100%",
+                # This ensures the box doesn't shrink
+                flex="1",
+            ),
+        ),
+        # Card shell
+        width="100%",
+        background=SURFACE,
+        border=f"1px solid {BORDER}",
+        border_radius=RADIUS,
+        padding="12px",
+        margin_top="16px",
+    )
+
 def embedding_explorer() -> rx.Component:
     return rx.card(
         rx.vstack(
@@ -18,6 +49,7 @@ def embedding_explorer() -> rx.Component:
             rx.button("Probe", on_click=PlaygroundState.probe),
             rx.cond(
                 PlaygroundState.probe_results.length() > 0,
+                network_graph_card(),
                 rx.table.root(
                     rx.table.header(
                         rx.table.row(

ticketiq/ticketiq/pages/stream_page.py

@@ -0,0 +1,50 @@
+import reflex as rx
+from ..state import StreamState
+from ..ui import (
+    ACCENT, BORDER, MUTED, TEXT, SURFACE, SANS, RADIUS, LOW_C,
+)
+
+def stream_page() -> rx.Component:
+    return rx.box(
+        # Live indicator
+        rx.hstack(
+            rx.box(
+                width="8px", height="8px", border_radius="50%", background=LOW_C,
+                style={"animation": "pulse 1.5s infinite"},
+            ),
+            rx.text("LIVE", font_size="24px", font_weight="bold", color=ACCENT),
+            rx.text("●", font_size="14px", color=LOW_C),
+            rx.text(
+                StreamState.live_tickets.length().to_string() + " tickets",
+                font_size="14px", color=MUTED,
+            ),
+            gap="8px", align="center", margin_bottom="24px",
+        ),
+
+        # Feed – rendered as HTML (no foreach)
+        rx.vstack(
+            rx.cond(
+                StreamState.live_tickets.length() == 0,
+                rx.text("Waiting for tickets…", font_size="14px", color=MUTED, padding="40px"),
+                rx.html(StreamState.feed_html),
+            ),
+            width="100%",
+        ),
+
+        # Animations
+        rx.el.style("""
+            @keyframes slideIn {
+                from { opacity: 0; transform: translateY(-20px); }
+                to   { opacity: 1; transform: translateY(0); }
+            }
+            @keyframes pulse {
+                0%, 100% { opacity: 1; }
+                50%      { opacity: 0.4; }
+            }
+        """),
+
+        max_width="900px", margin="0 auto",
+        padding="30px 24px", width="100%",
+        on_mount=StreamState.start_stream,
+        on_unmount=StreamState.stop_stream,
+    )

ticketiq/ticketiq/state.py

@@ -1,8 +1,17 @@
-import httpx
+import httpx, asyncio
 import reflex as rx
+import time, json
 
-API_BASE = "https://paudelapil-tech-triage.hf.space/api/v1/tickets"
-API_BASE_V1 = "https://paudelapil-tech-triage.hf.space/api/v1"
+
+
+from .ui import (
+    mono, ACCENT, CHART_BLUE,
+    ACCENT, BORDER, MUTED, TEXT, SURFACE, SANS, MONO, RADIUS,
+    HIGH, MED, LOW_C, HIGH_BG, MED_BG, LOW_BG,
+)
+
+API_BASE = "http://localhost:8000/api/v1/tickets"
+API_BASE_V1 = "http://localhost:8000/api/v1"
 TIMEOUT = 60.0
 PAGE_SIZE = 12
 
@@ -434,6 +443,7 @@ class PlaygroundState(rx.State):
     batch_text: str = ""
     batch_results: list[dict] = []
 
+
     def set_probe_text(self, value: str):
         self.probe_text = value
 
@@ -483,4 +493,90 @@ class PlaygroundState(rx.State):
                 json={"texts": lines}
             )
             data = resp.json()
-            self.batch_results = data["results"]
+            self.batch_results = data["results"]
+
+    network_url: str = ""  
+
+    async def show_network(self):
+        if not self.probe_text.strip():
+            return
+        async with httpx.AsyncClient(timeout=120) as client:
+            resp = await client.post(
+                f"{API_BASE_V1}/dev/probe-tickets-graph",
+                json={"text": self.probe_text.strip()}
+            )
+            data = resp.json()
+            self.network_url = data["url"]
+        
+
+class ThemeState(rx.State):
+    theme: str = "dark"  
+
+    def toggle(self):
+        self.theme = "light" if self.theme == "dark" else "dark"
+
+    @rx.var
+    def opposite(self) -> str:
+        return "light" if self.theme == "dark" else "dark"
+    
+
+class StreamState(rx.State):
+    live_tickets: list[dict] = []
+    last_id: int = 0
+    streaming: bool = False
+
+    async def start_stream(self):
+        self.streaming = True
+        self.last_id = 0
+        self.live_tickets = []
+        return StreamState.poll
+
+    async def poll(self):
+        if not self.streaming:
+            return
+        try:
+            async with httpx.AsyncClient(timeout=10) as client:
+                r = await client.get(
+                    f"{API_BASE_V1}/stream/latest",
+                    params={"since_id": self.last_id, "limit": 20},
+                )
+                data = r.json()
+                new_tickets = data.get("tickets", [])
+            if new_tickets:
+                self.live_tickets = new_tickets + self.live_tickets
+                self.last_id = new_tickets[0]["id"]
+                self.live_tickets = self.live_tickets[:50]
+        except Exception:
+            pass
+        await asyncio.sleep(3)
+        return StreamState.poll
+
+    async def stop_stream(self):
+        self.streaming = False
+        self.live_tickets = []
+        self.last_id = 0
+
+    @rx.var
+    def feed_html(self) -> str:
+        """Render the live ticket feed as an HTML string."""
+        if not self.live_tickets:
+            return ""
+        rows = []
+        for t in self.live_tickets:
+            p = t.get("priority", "low").lower()
+            color = {"high": "#ef4444", "medium": "#f59e0b", "low": "#22c55e"}.get(p, "#888")
+            bg = {"high": "rgba(239,68,68,0.10)", "medium": "rgba(245,158,11,0.10)", "low": "rgba(34,197,94,0.10)"}.get(p, "transparent")
+            rows.append(f"""<div style="background:{bg}; border-left:3px solid {color};
+                padding:10px 14px; margin-bottom:6px; border-radius:4px;
+                display:flex; align-items:flex-start; gap:10px; animation:slideIn 0.4s ease-out;">
+                <div style="width:10px;height:10px;border-radius:50%;background:{color};flex-shrink:0;margin-top:4px;"></div>
+                <div style="font-family:monospace;font-size:11px;font-weight:bold;color:{color};min-width:50px;">
+                    {t.get('priority','?').upper()}</div>
+                <div style="display:flex;flex-direction:column;gap:2px;">
+                    <div style="font-size:13px;color:#d0d0d8;line-height:1.4;">{t.get('description','')}</div>
+                    <div style="font-size:11px;color:#9090a8;">
+                        {t.get('label','')}  ·  {t.get('department','')}  ·  conf: {t.get('confidence',0):.2f}  ·  {t.get('source','')}
+                    </div>
+                </div>
+            </div>""")
+        return "".join(rows)

ticketiq/ticketiq/stats.py

@@ -7,11 +7,10 @@ from .ui import (
     HIGH, HIGH_BG, LOW_C, LOW_BG, MED, MED_BG, SANS, MONO, RADIUS,
 )
 
-# Recharts palette
+# PIE_COLORS – using CSS variables works fine here because they're passed directly as fill values
 PIE_COLORS = [ACCENT, "#60a5fa", LOW_C, "#a78bfa", HIGH, "#f472b6", "#34d399"]
 
-
-# ── Stat card ─────────────────────────────────────────────────────────────────
+# ── Stat card (unchanged) ────────────────────────────────────────────────────
 
 def stat_card(label: str, value: rx.Var, sub: str = "") -> rx.Component:
     return rx.box(
@@ -29,7 +28,7 @@ def stat_card(label: str, value: rx.Var, sub: str = "") -> rx.Component:
     )
 
 
-# ── Priority donut ────────────────────────────────────────────────────────────
+# ── Priority donut (unchanged) ──────────────────────────────────────────────
 
 def priority_donut() -> rx.Component:
     stats = TicketState.stats
@@ -86,7 +85,7 @@ def priority_donut() -> rx.Component:
     )
 
 
-# ── Source donut ──────────────────────────────────────────────────────────────
+# ── Source donut (unchanged) ────────────────────────────────────────────────
 
 def source_donut() -> rx.Component:
     stats = TicketState.stats
@@ -136,7 +135,7 @@ def source_donut() -> rx.Component:
     )
 
 
-# ── Top labels bar chart ──────────────────────────────────────────────────────
+# ── Top labels bar chart – FIXED TICK COLORS ────────────────────────────────
 
 def top_labels_chart() -> rx.Component:
     return rx.box(
@@ -144,18 +143,18 @@ def top_labels_chart() -> rx.Component:
         rx.recharts.bar_chart(
             rx.recharts.bar(
                 data_key="count",
-                fill="#f59e0b",
+                fill=rx.cond(rx.color_mode == "dark", "#f59e0b", "#d97706"),
                 radius=[0, 4, 4, 0],
             ),
             rx.recharts.x_axis(
                 type_="number",
-                tick={"fontSize": 10, "fill": MUTED, "fontFamily": MONO},
+                tick={"fontSize": 10, "fill": rx.cond(rx.color_mode == "dark", "#ccc", "#555"), "fontFamily": MONO},
             ),
             rx.recharts.y_axis(
                 data_key="label",
                 type_="category",
-                tick={"fontSize": 10, "fill": MUTED, "fontFamily": MONO},
-                width=200,                          # wider for longer labels
+                tick={"fontSize": 10, "fill": rx.cond(rx.color_mode == "dark", "#ccc", "#555"), "fontFamily": MONO},
+                width=200,
             ),
             rx.recharts.cartesian_grid(
                 stroke_dasharray="3 3",
@@ -170,7 +169,7 @@ def top_labels_chart() -> rx.Component:
                     "fontSize": "12px",
                     "color": TEXT,
                 },
-                cursor={"fill": "rgba(245,158,11,0.06)"},
+                cursor={"fill": rx.cond(rx.color_mode == "dark", "rgba(245,158,11,0.06)", "rgba(217,119,6,0.06)")},
             ),
             layout="vertical",
             data=TicketState.stats_top_labels,
@@ -186,7 +185,7 @@ def top_labels_chart() -> rx.Component:
     )
 
 
-# ── Department bar chart ──────────────────────────────────────────────────────
+# ── Department bar chart – FIXED TICK COLORS ────────────────────────────────
 
 def dept_chart() -> rx.Component:
     return rx.box(
@@ -194,17 +193,17 @@ def dept_chart() -> rx.Component:
         rx.recharts.bar_chart(
             rx.recharts.bar(
                 data_key="count",
-                fill="#60a5fa",
+                fill=rx.cond(rx.color_mode == "dark", "#60a5fa", "#2563eb"),
                 radius=[0, 4, 4, 0],
             ),
             rx.recharts.x_axis(
                 type_="number",
-                tick={"fontSize": 10, "fill": MUTED, "fontFamily": MONO},
+                tick={"fontSize": 10, "fill": rx.cond(rx.color_mode == "dark", "#ccc", "#555"), "fontFamily": MONO},
             ),
             rx.recharts.y_axis(
                 data_key="department",
                 type_="category",
-                tick={"fontSize": 10, "fill": MUTED, "fontFamily": MONO},
+                tick={"fontSize": 10, "fill": rx.cond(rx.color_mode == "dark", "#ccc", "#555"), "fontFamily": MONO},
                 width=180,
             ),
             rx.recharts.cartesian_grid(
@@ -220,9 +219,9 @@ def dept_chart() -> rx.Component:
                     "fontSize": "12px",
                     "color": TEXT,
                 },
-                cursor={"fill": "rgba(96,165,250,0.06)"},
+                cursor={"fill": rx.cond(rx.color_mode == "dark", "rgba(96,165,250,0.06)", "rgba(37,99,235,0.06)")},
             ),
-            layout="vertical",                     # ← horizontal bars
+            layout="vertical",
             data=TicketState.stats_department_breakdown,
             width="100%",
             height=400,
@@ -235,6 +234,7 @@ def dept_chart() -> rx.Component:
         width="100%",
     )
 
+
 def uncategorised_card() -> rx.Component:
     return rx.box(
         rx.text("Uncategorised", font_size="12px", color=MUTED),
@@ -253,7 +253,8 @@ def uncategorised_card() -> rx.Component:
         min_width="120px",
     )
 
-# ── Stats page ────────────────────────────────────────────────────────────────
+
+# ── Stats page (unchanged) ──────────────────────────────────────────────────
 
 def stats_page() -> rx.Component:
     s = TicketState.stats
@@ -347,5 +348,4 @@ def stats_page() -> rx.Component:
         max_width="900px", margin="0 auto",
         padding="40px 24px", width="100%",
         on_mount=TicketState.load_stats,
-    )
-
+    )

ticketiq/ticketiq/sth.json

@@ -0,0 +1,21 @@
+test_tickets = {
+    "The `cert-manager` Order resource for `api.fintech.com` is stuck in 'pending' because the ACME HTTP01 challenge is returning a 404 from the ingress controller after a recent nginx config change.",
+
+    "Our `grafana` dashboard for payment latency shows a gap between 02:00 and 04:00 UTC because the `prometheus` retention policy was shortened to 30 days without updating the dashboard query range.",
+
+    "The `mlflow` experiment tracking server is returning '500 Internal Server Error' when logging parameters larger than 64KB because the `nginx` reverse proxy has `client_max_body_size` set to 64k.",
+
+    "A `terraform apply` on the staging environment is trying to destroy and recreate the `aws_elasticache_replication_group` because the `snapshot_window` parameter was removed from the module and the state file sees a drift.",
+
+    "The `sonarqube` scanner in the CI pipeline fails with 'Project not found' because the project key was renamed from `fintech-payment` to `fintech.payment` in the UI but the `sonar-project.properties` file was not updated.",
+
+    "Our `karpenter` provisioner is scaling down GPU nodes too aggressively during off-peak hours, causing model inference pods to be evicted mid-request and resulting in 503 errors for the risk scoring API.",
+
+    "The `datadog` agent on `us-east-1` EKS nodes is emitting duplicate `kubernetes_state.*` metrics because the `kube-state-metrics` service is being scraped by both the cluster agent and the node agent simultaneously.",
+
+    "The `vault` audit log is full of 'permission denied' errors for the `payment-service` role because the policy attached to the role was changed to require `sudo` for `transit/decrypt` operations after a security audit.",
+
+    "The `next.js` build in the CI pipeline fails with 'Error: EMFILE: too many open files' because the build process opens more than 1024 file handles simultaneously and the default `ulimit` on the runner is too low.",
+
+    "The `timescaledb` continuous aggregate for `hourly_trade_volume` stopped refreshing after the source hypertable was renamed from `trades` to `trade_events` and the materialization job is referencing the old name.",
+}

ticketiq/ticketiq/ticketiq.py

@@ -10,11 +10,21 @@ from ticketiq.search import search_page
 from ticketiq.stats import stats_page
 from .pages.trends import trends_page
 from .pages.playground import playground_page
+from .pages.stream_page import stream_page
 from ticketiq.ui import (
     BG, SURFACE, BORDER, BORDER_HI, ACCENT, ACCENT_BG,
     MUTED, TEXT, SANS, MONO, RADIUS,
 )
 
+
+app = rx.App(
+    style={"font_family": "Inter, sans-serif"},
+    theme=rx.theme(appearance="light", accent_color="blue"),
+    stylesheets=[
+        "https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@400;500;700&family=DM+Sans:wght@300;400;500;600&display=swap",
+    ],
+)
+
 GOOGLE_FONTS = (
     "https://fonts.googleapis.com/css2?"
     "family=JetBrains+Mono:wght@400;500;700"
@@ -29,6 +39,7 @@ NAV = [
     ("stats",   "bar-chart-2",  "Stats"),
     ("trends", "trending-up", "Trends"),
     ("playground", "flask-conical", "Playground"),
+    ("stream", "radio", "Live"),
 
 ]
 
@@ -68,7 +79,7 @@ def sidebar() -> rx.Component:
         # logo
         rx.hstack(
             rx.box(
-                rx.icon("cpu", size=16, color="#0a0a0b"),
+                rx.icon("cpu", size=16, color=TEXT),
                 width="30px", height="30px",
                 background=ACCENT, border_radius="6px",
                 display="flex", align_items="center", justify_content="center",
@@ -92,8 +103,20 @@ def sidebar() -> rx.Component:
             padding="0 10px",
         ),
 
-        # footer
+        # footer (with toggle button)
         rx.box(
+            rx.icon_button(
+                rx.cond(rx.color_mode == "dark", rx.icon("sun", size=16), rx.icon("moon", size=16)),
+                on_click=rx.toggle_color_mode,
+                background="transparent",
+                border=f"1px solid {BORDER}",
+                border_radius="6px",
+                color=MUTED,
+                cursor="pointer",
+                size="2",
+                variant="ghost",
+                margin_bottom="10px",
+            ),
             rx.text(
                 "BGE-M3 · HDBSCAN · XGBoost · Groq",
                 font_size="10px", color=MUTED, font_family=MONO,
@@ -128,6 +151,7 @@ def page_body() -> rx.Component:
         ("stats", stats_page()),
         ("trends", trends_page()),
         ("playground", playground_page()),
+        ("stream", stream_page()),
         submit_page(),
     )
 
@@ -136,9 +160,60 @@ def page_body() -> rx.Component:
 
 def index() -> rx.Component:
     return rx.box(
-        # inject Google Fonts
+        # Inject Google Fonts
         rx.script(src=GOOGLE_FONTS),
 
+        # Embedded theme styles (dark / light + chart colours)
+        rx.el.style("""
+            html[data-theme='dark'] {
+                --bg: #1a1a20;
+                --surface: #242430;
+                --border: #343440;
+                --border-hi: #4a4a5a;
+                --text: #e0e0e8;
+                --muted: #7a7a90;
+                --accent: #818cf8;
+                --accent-bg: rgba(129,140,248,0.12);
+                --high: #f87171;
+                --high-bg: rgba(248,113,113,0.12);
+                --med: #fbbf24;
+                --med-bg: rgba(251,191,36,0.12);
+                --low: #34d399;
+                --low-bg: rgba(52,211,153,0.12);
+                --chart-blue: #60a5fa;
+                --chart-orange: #f59e0b;
+                --chart-purple: #a78bfa;
+                --chart-pink: #f472b6;
+                --chart-green: #34d399;
+                --chart-blue-bg: rgba(96,165,250,0.06);
+                --chart-orange-bg: rgba(245,158,11,0.06);
+            }
+            html[data-theme='light'] {
+                --bg: #f8f9fa;
+                --surface: #ffffff;
+                --border: #dee2e6;
+                --border-hi: #adb5bd;
+                --text: #212529;
+                --muted: #6c757d;
+                --accent: #0d6efd;
+                --accent-bg: rgba(13,110,253,0.10);
+                --high: #dc3545;
+                --high-bg: rgba(220,53,69,0.08);
+                --med: #fd7e14;
+                --med-bg: rgba(253,126,20,0.08);
+                --low: #198754;
+                --low-bg: rgba(25,135,84,0.08);
+                --chart-blue: #60a5fa;
+                --chart-orange: #f59e0b;
+                --chart-purple: #a78bfa;
+                --chart-pink: #f472b6;
+                --chart-green: #34d399;
+                --chart-blue-bg: rgba(96,165,250,0.06);
+                --chart-orange-bg: rgba(245,158,11,0.06);
+            }
+        """),
+
+        # Sidebar + main content
         rx.hstack(
             sidebar(),
             rx.box(
@@ -152,7 +227,7 @@ def index() -> rx.Component:
             width="100%",
         ),
 
-        # global styles
+        # Global styles
         font_family=SANS,
         background=BG,
         color=TEXT,
@@ -166,8 +241,6 @@ def index() -> rx.Component:
             ),
         },
     )
-
-
 # ── App ───────────────────────────────────────────────────────────────────────
 
 app = rx.App(

ticketiq/ticketiq/ui.py

@@ -2,21 +2,31 @@
 import reflex as rx
 
 # ── palette ───────────────────────────────────────────────────────────────────
-BG       = "#0a0a0b"
-SURFACE  = "#141418"
-BORDER   = "#2a2a36"
-BORDER_HI= "#2e2e38"
-TEXT     = "#f0f0f5"
-MUTED    = "#9090a8"
-ACCENT   = "#f5a623"
-ACCENT_BG= "rgba(245,166,35,0.10)"
-
-HIGH     = "#ef4444"
-HIGH_BG  = "rgba(239,68,68,0.10)"
-MED      = "#f5a623"
-MED_BG   = "rgba(245,166,35,0.10)"
-LOW_C    = "#22c55e"
-LOW_BG   = "rgba(34,197,94,0.10)"
+import reflex as rx
+
+# ── palette ───────────────────────────────────────────────────────────────────
+BG         = "var(--bg)"
+SURFACE    = "var(--surface)"
+BORDER     = "var(--border)"
+BORDER_HI  = "var(--border-hi)"
+TEXT       = "var(--text)"
+MUTED      = "var(--muted)"
+ACCENT     = "var(--accent)"
+ACCENT_BG  = "var(--accent-bg)"
+HIGH       = "var(--high)"
+HIGH_BG    = "var(--high-bg)"
+MED        = "var(--med)"
+MED_BG     = "var(--med-bg)"
+LOW_C      = "var(--low)"
+LOW_BG     = "var(--low-bg)"
+
+CHART_BLUE     = "var(--chart-blue)"
+CHART_ORANGE   = "var(--chart-orange)"
+CHART_PURPLE   = "var(--chart-purple)"
+CHART_PINK     = "var(--chart-pink)"
+CHART_GREEN    = "var(--chart-green)"
+CHART_BLUE_BG  = "var(--chart-blue-bg)"
+CHART_ORANGE_BG = "var(--chart-orange-bg)"
 
 MONO = "'JetBrains Mono', monospace"
 SANS = "'DM Sans', sans-serif"