fix: flow view uses iframe for full-page HTML, add API docs links to header

- Flow view: serve full Cytoscape HTML at /flow-embed, embed via iframe
  (full DOCTYPE page cannot be embedded as ui.html fragment)
- Header: add API Docs and Stats JSON quick-link buttons
- Header: show backend badge alongside node/edge counts
- Separators between header sections for cleaner layout

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>

Author: aksOps

src/osscodeiq/server/ui/__init__.py

@@ -26,7 +26,8 @@ def index():
             with ui.row().classes("items-center gap-3"):
                 ui.icon("hub").style(f"color: {BRAND_COLOR}; font-size: 28px")
                 ui.label("OSSCodeIQ").classes("text-lg font-bold")
-            with ui.row().classes("items-center gap-2"):
+            with ui.row().classes("items-center gap-3"):
+                # Stats badges
                 try:
                     stats = service.get_stats()
                     ui.badge(
@@ -35,10 +36,31 @@ def index():
                     ui.badge(
                         f"{stats.get('total_edges', 0):,} edges"
                     ).props("color=positive outline")
+                    ui.badge(
+                        stats.get("backend", "?")
+                    ).props("outline")
                 except Exception:  # noqa: BLE001
                     ui.badge("stats unavailable").props(
                         "color=warning outline"
                     )
+
+                ui.separator().props("vertical")
+
+                # Quick links
+                ui.button(
+                    "API Docs",
+                    icon="description",
+                    on_click=lambda: ui.navigate.to("/docs", new_tab=True),
+                ).props("flat dense no-caps")
+                ui.button(
+                    "Stats JSON",
+                    icon="data_object",
+                    on_click=lambda: ui.navigate.to("/api/stats", new_tab=True),
+                ).props("flat dense no-caps")
+
+                ui.separator().props("vertical")
+
+                # Theme toggles
                 ui.button(
                     icon="light_mode",
                     on_click=lambda: dark.set_value(False),

src/osscodeiq/server/ui/flow_view.py

@@ -1,45 +1,59 @@
-"""Flow View — wraps existing Cytoscape flow visualization."""
+"""Flow View — serves existing Cytoscape flow visualization via iframe."""
 from __future__ import annotations
 
-from nicegui import ui
+from typing import Any
 
+from nicegui import app, ui
 
-def create_flow_page(service) -> None:
+
+def create_flow_page(service: Any) -> None:
     """Build the Flow tab inside a NiceGUI page.
 
-    Attempts to generate an overview flow diagram as HTML via the service.
-    Falls back to a placeholder when no analysis data is available.
+    The flow engine generates a full self-contained HTML page (DOCTYPE + Cytoscape.js
+    + vendor JS). This cannot be embedded as a fragment via ui.html(). Instead, we
+    serve it at a dedicated route and embed it in an iframe.
     """
-    with ui.element("div").classes("max-w-7xl mx-auto px-4 w-full"):
-        try:
-            result = service.generate_flow("overview", "html")
-
-            # generate_flow returns a dict; the HTML is in the "content" key
-            html_content: str | None = None
-            if isinstance(result, dict):
-                html_content = result.get("content") or result.get("html")
-            elif isinstance(result, str):
-                html_content = result
-
-            if html_content:
-                ui.html(html_content).classes("w-full")
-            else:
-                _show_placeholder()
-
-        except Exception:  # noqa: BLE001
-            _show_placeholder()
+    _flow_html: str | None = None
+
+    try:
+        result = service.generate_flow("overview", "html")
+        if isinstance(result, str) and result.strip().startswith("<!"):
+            _flow_html = result
+        elif isinstance(result, dict):
+            content = result.get("content") or result.get("html", "")
+            if content and content.strip().startswith("<!"):
+                _flow_html = content
+    except Exception:  # noqa: BLE001
+        _flow_html = None
+
+    if _flow_html:
+        # Register a dedicated route to serve the full-page HTML
+        @app.get("/flow-embed", include_in_schema=False)
+        async def _serve_flow_html():
+            from starlette.responses import HTMLResponse
+            return HTMLResponse(_flow_html)
+
+        with ui.column().classes("w-full h-full"):
+            ui.html(
+                '<iframe src="/flow-embed" '
+                'style="width:100%;height:calc(100vh - 160px);border:none;" '
+                'loading="lazy"></iframe>'
+            )
+    else:
+        _show_placeholder()
 
 
 def _show_placeholder() -> None:
     """Show a professional centered placeholder when no flow data is available."""
-    with ui.card().classes("w-full max-w-md mx-auto mt-16"):
-        with ui.card_section().classes("items-center text-center"):
-            with ui.column().classes("items-center gap-3 py-8"):
-                ui.icon("account_tree", size="64px").classes("opacity-30")
-                ui.label("No flow data available").classes(
-                    "text-xl font-medium opacity-70"
-                )
-                ui.label(
-                    "Run 'osscodeiq analyze <path>' to scan a codebase, "
-                    "then refresh this page."
-                ).classes("text-sm opacity-50 max-w-xs text-center")
+    with ui.column().classes("w-full items-center justify-center py-20"):
+        with ui.card().classes("max-w-md text-center"):
+            with ui.card_section():
+                with ui.column().classes("items-center gap-4 py-8"):
+                    ui.icon("account_tree", size="64px").classes("opacity-30")
+                    ui.label("No flow data available").classes(
+                        "text-xl font-medium opacity-70"
+                    )
+                    ui.label(
+                        "Run 'osscodeiq analyze <path>' to generate flow diagrams, "
+                        "then refresh this page."
+                    ).classes("text-sm opacity-50")