"""Unstructured x Codeflash — Engagement Report

Four-tab report served at http://localhost:8050/:
  1. Executive Summary — high-level engagement summary for VP Engineering (JPC)
  2. Engineering Details  — for Crag's team, aggregate view with commit refs
  3. Full Detail       — per-PR inventory, benchmarks, methodology
  4. Timeline          — proposed engagement phases with Gantt chart

Standalone routes:
  /jpc      — shareable executive summary (same content as tab 1)
  /timeline — shareable timeline (same content as tab 4)
"""

import json
import os
from pathlib import Path

import plotly.graph_objects as go
from dash import (
    Dash,
    Input,
    Output,
    clientside_callback,
    dash_table,
    dcc,
    html,
)
from theme import (
    ACCENT,
    AMBER,
    BG,
    BLUE,
    CARD,
    CARD_BG,
    CARD_BORDER,
    DARK,
    FONT,
    GRAY,
    GREEN,
    GRID_OVERLAY,
    LIGHT_GRAY,
    LIGHT_GREEN,
    LIGHT_RED,
    MONO,
    PURPLE,
    RED,
    SLATE,
    TABLE_CELL,
    TABLE_DATA,
    TABLE_DATA_CONDITIONAL,
    TABLE_HEADER,
    TABLE_WRAP,
    WHITE,
)

# ── Data ────────────────────────────────────────────────────────────────────
_DATA = json.loads((Path(__file__).parent / "data.json").read_text())

CORE_PRODUCT_BASE = _DATA["core_product_base"]
UNSTRUCTURED_BASE = _DATA["unstructured_base"]
INFERENCE_BASE = _DATA["inference_base"]
OD_MODELS_BASE = _DATA["od_models_base"]
REPO_BASES: dict[str, str] = {
    "core-product": CORE_PRODUCT_BASE,
    "unstructured": UNSTRUCTURED_BASE,
    "unstructured-inference": INFERENCE_BASE,
    "unstructured-od-models": OD_MODELS_BASE,
}
MEM_BEFORE = _DATA["mem_before"]
MEM_AFTER = _DATA["mem_after"]
BENCH_BEFORE = _DATA["bench_before"]
BENCH_AFTER = _DATA["bench_after"]
LATENCY_STANDALONE = _DATA["latency_standalone"]
MERGED_PRS = _DATA["merged_prs"]
OPEN_PRS = _DATA["open_prs"]

# ── Helpers ──────────────────────────────────────────────────────────────────


def hero_metric(value, label, detail, color=GREEN):
    return html.Div(
        [
            html.Div(
                value,
                style={
                    "fontSize": "42px",
                    "fontWeight": "800",
                    "color": color,
                    "lineHeight": "1",
                    "letterSpacing": "-0.02em",
                    "fontFamily": FONT,
                },
            ),
            html.Div(
                label,
                style={
                    "fontSize": "15px",
                    "fontWeight": "600",
                    "color": SLATE,
                    "marginTop": "8px",
                },
            ),
            html.Div(
                detail,
                style={"fontSize": "13px", "color": GRAY, "marginTop": "4px"},
            ),
        ],
        style={
            "background": CARD_BG,
            "borderRadius": "16px",
            "padding": "32px 24px",
            "textAlign": "center",
            "flex": "1 1 0%",
            "minWidth": "0",
            "border": f"1px solid {CARD_BORDER}",
        },
    )


def section(title, subtitle=None):
    children = [
        html.H2(
            title,
            style={
                "fontSize": "22px",
                "fontWeight": "700",
                "color": SLATE,
                "margin": "0",
                "fontFamily": FONT,
                "letterSpacing": "-0.01em",
            },
        )
    ]
    if subtitle:
        children.append(
            html.P(
                subtitle,
                style={
                    "fontSize": "14px",
                    "color": GRAY,
                    "margin": "6px 0 0",
                    "lineHeight": "1.5",
                },
            )
        )
    return html.Div(children, style={"margin": "56px 0 24px"})


def card(children, **kw):
    style = {**CARD}
    for k, v in kw.items():
        style[k] = v
    return html.Div(children, style=style)


def _next_card(number, title, description, notes=None):
    """Numbered card for the 'Future Engagements' section."""
    left = html.Div(
        [
            html.Div(
                number,
                style={
                    "fontSize": "28px",
                    "fontWeight": "800",
                    "color": ACCENT,
                    "lineHeight": "1",
                    "minWidth": "36px",
                },
            ),
            html.Div(
                [
                    html.Div(
                        title,
                        style={
                            "fontWeight": "700",
                            "color": SLATE,
                            "fontSize": "16px",
                            "marginBottom": "8px",
                        },
                    ),
                    html.P(
                        description,
                        style={
                            "color": GRAY,
                            "fontSize": "14px",
                            "lineHeight": "1.6",
                            "margin": "0",
                        },
                    ),
                ],
            ),
        ],
        style={
            "display": "flex",
            "gap": "16px",
            "alignItems": "flex-start",
            "flex": "1",
        },
    )
    if not notes:
        return card([left])
    right = html.Div(
        [
            html.Div(
                "Notes",
                style={
                    "fontSize": "11px",
                    "fontWeight": "700",
                    "color": ACCENT,
                    "textTransform": "uppercase",
                    "letterSpacing": "0.05em",
                    "marginBottom": "8px",
                },
            ),
            html.Ul(
                [
                    html.Li(
                        n,
                        style={
                            "fontSize": "13px",
                            "color": LIGHT_GRAY,
                            "lineHeight": "1.5",
                            "marginBottom": "4px",
                        },
                    )
                    for n in notes
                ],
                style={
                    "paddingLeft": "16px",
                    "margin": "0",
                    "listStyleType": "'- '",
                },
            ),
        ],
        style={
            "minWidth": "240px",
            "maxWidth": "280px",
            "borderLeft": f"1px solid {CARD_BORDER}",
            "paddingLeft": "20px",
            "marginLeft": "20px",
        },
    )
    return card(
        [
            html.Div(
                [left, right],
                style={
                    "display": "flex",
                    "gap": "0",
                    "alignItems": "flex-start",
                },
            ),
        ],
    )


def metric_row(
    label, before, after, unit="", fmt="{:,.0f}", better="lower", note=None
):
    if before and after:
        delta = (after - before) / before * 100
        improved = delta < 0 if better == "lower" else delta > 0
        delta_text = f"{delta:+.0f}%"
        delta_color = GREEN if improved else RED
        delta_bg = LIGHT_GREEN if improved else LIGHT_RED
    else:
        delta_text, delta_color, delta_bg = "—", GRAY, "transparent"

    def _f(v):
        return f"{fmt.format(v)} {unit}".strip() if v is not None else "—"

    return html.Div(
        [
            html.Div(
                [
                    html.Span(
                        label,
                        style={
                            "fontWeight": "600",
                            "color": SLATE,
                            "fontSize": "14px",
                        },
                    ),
                    html.Span(
                        f"  {note}",
                        style={"fontSize": "12px", "color": LIGHT_GRAY},
                    )
                    if note
                    else html.Span(),
                ],
                style={"flex": "1"},
            ),
            html.Div(
                _f(before),
                style={
                    "width": "140px",
                    "textAlign": "right",
                    "color": GRAY,
                    "fontSize": "14px",
                    "fontFamily": MONO,
                },
            ),
            html.Div(
                _f(after),
                style={
                    "width": "140px",
                    "textAlign": "right",
                    "color": SLATE,
                    "fontSize": "14px",
                    "fontWeight": "600",
                    "fontFamily": MONO,
                },
            ),
            html.Span(
                delta_text,
                style={
                    "width": "80px",
                    "textAlign": "center",
                    "fontSize": "13px",
                    "fontWeight": "700",
                    "color": delta_color,
                    "background": delta_bg,
                    "borderRadius": "6px",
                    "padding": "2px 8px",
                },
            ),
        ],
        style={
            "display": "flex",
            "alignItems": "center",
            "gap": "16px",
            "padding": "12px 0",
            "borderBottom": f"1px solid {CARD_BORDER}",
        },
    )


def table_header(cols):
    return html.Div(
        style={
            "display": "flex",
            "gap": "16px",
            "padding": "10px 0",
            "borderBottom": f"2px solid {CARD_BORDER}",
            "marginBottom": "4px",
        },
        children=[
            html.Div(
                c["label"],
                style={
                    "flex": "1" if c.get("flex") else None,
                    "width": c.get("width"),
                    "textAlign": c.get("align", "left"),
                    "fontWeight": "700",
                    "fontSize": "13px",
                    "color": ACCENT,
                    "textTransform": "uppercase",
                    "letterSpacing": "0.05em",
                },
            )
            for c in cols
        ],
    )


# ── Charts ───────────────────────────────────────────────────────────────────


def make_memory_chart():
    """Before/after memory: the headline chart (FastAPI endpoint measurement)."""
    cats = ["Pre-Partition RSS", "Post-Partition RSS", "Partition Delta"]
    before = [
        MEM_BEFORE["pre_partition_mb"],
        MEM_BEFORE["post_partition_mb"],
        MEM_BEFORE["partition_delta_mb"],
    ]
    after = [
        MEM_AFTER["pre_partition_mb"],
        MEM_AFTER["post_partition_mb"],
        MEM_AFTER["partition_delta_mb"],
    ]

    fig = go.Figure()
    fig.add_trace(
        go.Bar(
            name="Before (glibc, 4 OCR workers)",
            x=cats,
            y=before,
            marker_color=LIGHT_GRAY,
            marker_cornerradius=6,
            text=[f"{v:,.0f} MB" for v in before],
            textposition="outside",
            textfont={"size": 13, "color": GRAY},
        )
    )
    fig.add_trace(
        go.Bar(
            name="After (jemalloc opt-in, serial OCR, 1-CPU)",
            x=cats,
            y=after,
            marker_color=ACCENT,
            marker_cornerradius=6,
            text=[f"{v:,.0f} MB" for v in after],
            textposition="outside",
            textfont={"size": 13, "color": ACCENT},
        )
    )
    fig.update_layout(
        barmode="group",
        bargap=0.3,
        bargroupgap=0.1,
        plot_bgcolor="rgba(0,0,0,0)",
        paper_bgcolor="rgba(0,0,0,0)",
        font={"family": FONT, "size": 13, "color": SLATE},
        yaxis={
            "title": "Memory (MB)",
            "gridcolor": CARD_BORDER,
            "zeroline": False,
        },
        xaxis={"title": ""},
        margin={"t": 20, "b": 60, "l": 60, "r": 20},
        legend={
            "orientation": "h",
            "yanchor": "bottom",
            "y": 1.05,
            "xanchor": "center",
            "x": 0.5,
            "font": {"size": 13},
        },
        height=380,
    )
    return fig


# ── Shared layout components ─────────────────────────────────────────────────

_TAB_BTN_STYLE = {
    "padding": "10px 24px",
    "border": "none",
    "borderRadius": "8px",
    "cursor": "pointer",
    "fontSize": "14px",
    "fontWeight": "600",
    "fontFamily": FONT,
    "background": "transparent",
    "color": GRAY,
    "transition": "all 0.2s",
}

_TAB_BTN_ACTIVE = {**_TAB_BTN_STYLE, "background": ACCENT, "color": DARK}


def _logo_lockup(
    codeflash_h="24px", unstructured_h="28px", gap="16px", radius="4px"
):
    """Codeflash x Unstructured logo pair, reused in headers and footers."""
    return html.Div(
        style={
            "display": "flex",
            "alignItems": "center",
            "gap": gap,
        },
        children=[
            html.Img(
                src="/assets/codeflash.svg", style={"height": codeflash_h}
            ),
            html.Span(
                "\u00d7",
                style={
                    "fontSize": f"{int(codeflash_h.replace('px', '')) - 6}px",
                    "fontWeight": "300",
                    "color": LIGHT_GRAY,
                },
            ),
            html.Img(
                src="/assets/unstructured_logo.jpg",
                style={"height": unstructured_h, "borderRadius": radius},
            ),
        ],
    )


# ── View builders ────────────────────────────────────────────────────────────


def build_team_view():
    return html.Div(
        id="team-view",
        style={"display": "none"},
        children=[
            # ── Engineering Impact Summary ──
            section(
                "Engineering Impact Summary",
                "What changed and what it means for your infrastructure.",
            ),
            card(
                [
                    html.Div(
                        style={
                            "display": "flex",
                            "gap": "20px",
                            "flexWrap": "wrap",
                        },
                        children=[
                            html.Div(
                                [
                                    html.Div(
                                        "32 → 4 GB",
                                        style={
                                            "fontSize": "24px",
                                            "fontWeight": "800",
                                            "color": GREEN,
                                            "lineHeight": "1",
                                        },
                                    ),
                                    html.Div(
                                        "K8s memory limit per pod",
                                        style={
                                            "fontSize": "13px",
                                            "color": GRAY,
                                            "marginTop": "6px",
                                        },
                                    ),
                                ],
                                style={"flex": "1", "minWidth": "160px"},
                            ),
                            html.Div(
                                [
                                    html.Div(
                                        "5 → 46",
                                        style={
                                            "fontSize": "24px",
                                            "fontWeight": "800",
                                            "color": GREEN,
                                            "lineHeight": "1",
                                        },
                                    ),
                                    html.Div(
                                        "pods per D48s_v5 node",
                                        style={
                                            "fontSize": "13px",
                                            "color": GRAY,
                                            "marginTop": "6px",
                                        },
                                    ),
                                ],
                                style={"flex": "1", "minWidth": "160px"},
                            ),
                            html.Div(
                                [
                                    html.Div(
                                        "-12.9%",
                                        style={
                                            "fontSize": "24px",
                                            "fontWeight": "800",
                                            "color": ACCENT,
                                            "lineHeight": "1",
                                        },
                                    ),
                                    html.Div(
                                        "end-to-end latency (FastAPI)",
                                        style={
                                            "fontSize": "13px",
                                            "color": GRAY,
                                            "marginTop": "6px",
                                        },
                                    ),
                                ],
                                style={"flex": "1", "minWidth": "160px"},
                            ),
                            html.Div(
                                [
                                    html.Div(
                                        "41 vCPU",
                                        style={
                                            "fontSize": "24px",
                                            "fontWeight": "800",
                                            "color": ACCENT,
                                            "lineHeight": "1",
                                        },
                                    ),
                                    html.Div(
                                        "previously idle, now available",
                                        style={
                                            "fontSize": "13px",
                                            "color": GRAY,
                                            "marginTop": "6px",
                                        },
                                    ),
                                ],
                                style={"flex": "1", "minWidth": "160px"},
                            ),
                        ],
                    ),
                    html.P(
                        "The sections below cover how these numbers were measured, "
                        "what specifically changed in the codebase, and the per-PR "
                        "benchmark breakdown.",
                        style={
                            "color": GRAY,
                            "fontSize": "14px",
                            "lineHeight": "1.6",
                            "marginTop": "20px",
                            "paddingTop": "16px",
                            "borderTop": f"1px solid {CARD_BORDER}",
                        },
                    ),
                ],
            ),
            # ── Methodology ────────────────────────────────────────────
            section(
                "Methodology",
                "How every number in this report was produced.",
            ),
            # Environment card
            card(
                [
                    html.H3(
                        "Benchmark Environment",
                        style={
                            "fontSize": "16px",
                            "fontWeight": "700",
                            "color": ACCENT,
                            "margin": "0 0 16px",
                        },
                    ),
                    html.Div(
                        [
                            _method_row(
                                "Hardware",
                                "Azure Standard_E4s_v5 — 4 vCPU, 32 GB RAM, "
                                "non-burstable (consistent clock speed, no noisy-neighbor variance).",
                            ),
                            _method_row(
                                "OS / Runtime",
                                "Ubuntu 24.04 LTS, Python 3.12, pip-installed "
                                "unstructured + all extras.",
                            ),
                            _method_row(
                                "CPU Pinning",
                                "taskset -c 0 pins the process to a single core. "
                                "This simulates the production pod's 1-CPU "
                                "resource request (CFS quota) and eliminates "
                                "cross-core scheduling noise.",
                            ),
                            _method_row(
                                "Baseline Config",
                                "main branch, glibc malloc, 4 parallel OCR workers "
                                "(os.cpu_count). This is the default behaviour "
                                "when deploying core-product today.",
                            ),
                            _method_row(
                                "Current Config",
                                "All merged optimizations + jemalloc (opt-in), serial OCR "
                                "via cgroup-aware CPU detection (1 worker on 1-CPU pods).",
                            ),
                        ]
                    ),
                ],
                marginBottom="24px",
            ),
            # Measurement protocol card
            card(
                [
                    html.H3(
                        "Measurement Protocol",
                        style={
                            "fontSize": "16px",
                            "fontWeight": "700",
                            "color": ACCENT,
                            "margin": "0 0 16px",
                        },
                    ),
                    html.Div(
                        [
                            _method_row(
                                "Workload",
                                "10-page scanned PDF → hi_res strategy via "
                                "POST /general/v0/general (FastAPI / uvicorn). "
                                "Same document and model weights (YOLOX) in every run.",
                            ),
                            _method_row(
                                "Latency",
                                "pytest-benchmark pedantic mode — 5 rounds, "
                                "1 warmup, median reported. Stddev consistently "
                                "< 0.4%, confirming low noise.",
                            ),
                            _method_row(
                                "Memory",
                                "psutil process-tree RSS sampled via the FastAPI "
                                "endpoint. Process-tree (not single-process) captures "
                                "the OCR worker pool and pdfium subprocesses that "
                                "drive the memory limit. We measure at four points: "
                                "pre-import, post-import, post-partition, and "
                                "per-request delta — separating static from dynamic "
                                "memory to identify what contributes to baseline "
                                "overhead vs. per-request cost.",
                            ),
                            _method_row(
                                "Profiling",
                                "cProfile for CPU hotspots; memray --native for "
                                "per-allocation breakdown (including C extensions). "
                                "Profiling runs are separate from benchmark runs "
                                "to avoid observer effect.",
                            ),
                            _method_row(
                                "Standalone vs. Cumulative",
                                "Each optimization is benchmarked both in "
                                "isolation (one PR vs. main) and cumulatively "
                                "(full stack). This dual approach catches a common "
                                "problem: optimizations that look good individually "
                                "but interfere when stacked (e.g. two changes "
                                "competing for the same cache lines). Standalone "
                                "confirms each change's contribution; cumulative "
                                "confirms they compose without regression.",
                            ),
                        ]
                    ),
                ],
                marginBottom="24px",
            ),
            # Variance control card
            card(
                [
                    html.H3(
                        "Variance Control",
                        style={
                            "fontSize": "16px",
                            "fontWeight": "700",
                            "color": ACCENT,
                            "margin": "0 0 16px",
                        },
                    ),
                    html.Div(
                        [
                            _method_row(
                                "A/B/A Validation",
                                "Every latency improvement is validated with an "
                                "A/B/A pattern: run optimization, then baseline, "
                                "then optimization again. If A1 ≈ A2, the delta "
                                "is real and not thermal drift. If A2 degrades "
                                "toward B, the result is discarded.",
                            ),
                            _method_row(
                                "Non-Burstable VM",
                                "E4s_v5 specifically chosen over B-series. "
                                "Burstable VMs have variable CPU performance "
                                "(credit-based throttling) that makes benchmarks "
                                "unreliable. Non-burstable guarantees consistent "
                                "clock speed with no noisy-neighbor variance.",
                            ),
                            _method_row(
                                "Statistical over Hardware",
                                "We attempted to disable turbo boost and pin CPU "
                                "frequency via cpupower, but Azure Hyper-V "
                                "overrides guest frequency settings — the "
                                "hypervisor manages the physical CPU. Instead we "
                                "rely on statistical methods: 5 measured rounds + "
                                "1 warmup + median reporting, which tolerates up "
                                "to 2 outliers per measurement.",
                            ),
                            _method_row(
                                "Warmup Round",
                                "The discarded warmup round absorbs three "
                                "specific first-run costs: ONNX model JIT and "
                                "session creation, page cache warming for the PDF "
                                "test file, and OCR/pdfium process pool "
                                "initialization. Without it, the first measured "
                                "round is 10-30% slower than steady state.",
                            ),
                        ]
                    ),
                ],
                marginBottom="24px",
            ),
            # ── What Changed ──────────────────────────────────────────
            section(
                "What Changed: Memory",
                "Three root causes fixed, per-request memory creep reduced (24 MB \u2192 17 MB/req), one allocator optimization added.",
            ),
            html.Div(
                [
                    html.Div(
                        [
                            html.Div(
                                "CPU-Aware OCR Worker Count",
                                style={
                                    "fontWeight": "700",
                                    "color": SLATE,
                                    "fontSize": "16px",
                                },
                            ),
                            html.Span(
                                "Biggest impact",
                                style={
                                    "marginLeft": "12px",
                                    "padding": "2px 10px",
                                    "borderRadius": "999px",
                                    "fontSize": "12px",
                                    "fontWeight": "600",
                                    "background": ACCENT,
                                    "color": DARK,
                                },
                            ),
                        ],
                        style={
                            "marginBottom": "12px",
                            "display": "flex",
                            "alignItems": "center",
                        },
                    ),
                    html.P(
                        [
                            html.Code(
                                "os.cpu_count()",
                                style={
                                    "fontFamily": MONO,
                                    "color": ACCENT,
                                },
                            ),
                            " returns the host CPU count (e.g. 48 on a D48s_v5 node), not the pod's CFS quota (1). ",
                            "The OCR pool was spawning 4 workers on a 1-CPU pod, each loading the full ONNX model set. "
                            "Replaced with a three-tier detection: ",
                            html.Code(
                                "/sys/fs/cgroup/cpu.max",
                                style={
                                    "fontFamily": MONO,
                                    "color": ACCENT,
                                },
                            ),
                            " (cgroup v2) first, then ",
                            html.Code(
                                "sched_getaffinity",
                                style={
                                    "fontFamily": MONO,
                                    "color": ACCENT,
                                },
                            ),
                            " (cpuset), then ",
                            html.Code(
                                "os.cpu_count()",
                                style={
                                    "fontFamily": MONO,
                                    "color": ACCENT,
                                },
                            ),
                            " — taking the minimum. Result: serial mode on 1-CPU pods, "
                            "eliminating 3 redundant model copies from memory.",
                        ],
                        style={
                            "color": GRAY,
                            "fontSize": "14px",
                            "lineHeight": "1.6",
                            "margin": "0",
                        },
                    ),
                    html.Div(
                        html.A(
                            "PR #1502",
                            href=f"{CORE_PRODUCT_BASE}/1502",
                            target="_blank",
                            style={
                                "color": BLUE,
                                "fontSize": "13px",
                                "textDecoration": "none",
                            },
                        ),
                        style={"marginTop": "8px"},
                    ),
                ],
                style={
                    **CARD,
                    "marginBottom": "16px",
                    "borderLeft": f"4px solid {ACCENT}",
                },
            ),
            html.Div(
                [
                    html.Div(
                        "Resize-First Preprocessing",
                        style={
                            "fontWeight": "700",
                            "color": SLATE,
                            "fontSize": "16px",
                            "marginBottom": "12px",
                        },
                    ),
                    html.P(
                        "Pages were being converted to full-resolution numpy arrays before any resizing. "
                        "Now resizes the PIL image first, avoiding a large temporary allocation for every page.",
                        style={
                            "color": GRAY,
                            "fontSize": "14px",
                            "lineHeight": "1.6",
                            "margin": "0",
                        },
                    ),
                    html.Div(
                        html.A(
                            "PR #1441",
                            href=f"{CORE_PRODUCT_BASE}/1441",
                            target="_blank",
                            style={
                                "color": BLUE,
                                "fontSize": "13px",
                                "textDecoration": "none",
                            },
                        ),
                        style={"marginTop": "8px"},
                    ),
                ],
                style={
                    **CARD,
                    "marginBottom": "16px",
                    "borderLeft": f"4px solid {GREEN}",
                },
            ),
            html.Div(
                [
                    html.Div(
                        "Early Page Image Release",
                        style={
                            "fontWeight": "700",
                            "color": SLATE,
                            "fontSize": "16px",
                            "marginBottom": "12px",
                        },
                    ),
                    html.P(
                        "Page images were held in memory through the entire table OCR + transformer inference pipeline. "
                        "Now freed as soon as OCR is complete, reducing peak concurrent memory.",
                        style={
                            "color": GRAY,
                            "fontSize": "14px",
                            "lineHeight": "1.6",
                            "margin": "0",
                        },
                    ),
                    html.Div(
                        html.A(
                            "PR #1448",
                            href=f"{CORE_PRODUCT_BASE}/1448",
                            target="_blank",
                            style={
                                "color": BLUE,
                                "fontSize": "13px",
                                "textDecoration": "none",
                            },
                        ),
                        style={"marginTop": "8px"},
                    ),
                ],
                style={
                    **CARD,
                    "marginBottom": "16px",
                    "borderLeft": f"4px solid {GREEN}",
                },
            ),
            html.Div(
                [
                    html.Div(
                        "jemalloc Allocator",
                        style={
                            "fontWeight": "700",
                            "color": SLATE,
                            "fontSize": "16px",
                            "marginBottom": "12px",
                        },
                    ),
                    html.P(
                        "Opt-in allocator switch from glibc malloc to jemalloc via MALLOC_IMPL=jemalloc. "
                        "Reduces memory fragmentation from the alloc/free churn in the serial OCR pipeline "
                        "(-21% partition delta). Recommended for 1-CPU pods only — on multi-CPU pods with "
                        "parallel workers, jemalloc's per-arena metadata overhead (~50 MB/process) can erase "
                        "the savings. Multi-CPU deployments should use the glibc default.",
                        style={
                            "color": GRAY,
                            "fontSize": "14px",
                            "lineHeight": "1.6",
                            "margin": "0",
                        },
                    ),
                    html.Div(
                        html.A(
                            "PR #1507",
                            href=f"{CORE_PRODUCT_BASE}/1507",
                            target="_blank",
                            style={
                                "color": BLUE,
                                "fontSize": "13px",
                                "textDecoration": "none",
                            },
                        ),
                        style={"marginTop": "8px"},
                    ),
                ],
                style={
                    **CARD,
                    "marginBottom": "16px",
                    "borderLeft": f"4px solid {AMBER}",
                },
            ),
            # Memory results chart
            section("Memory Results"),
            card(
                [
                    dcc.Graph(
                        figure=make_memory_chart(),
                        config={"displayModeBar": False},
                    )
                ]
            ),
            # Additional memory metrics (not shown in chart above)
            card(
                [
                    table_header(
                        [
                            {"label": "Metric", "flex": True},
                            {
                                "label": "Before",
                                "width": "140px",
                                "align": "right",
                            },
                            {
                                "label": "After",
                                "width": "140px",
                                "align": "right",
                            },
                            {
                                "label": "Delta",
                                "width": "80px",
                                "align": "center",
                            },
                        ]
                    ),
                    metric_row(
                        "RSS per request",
                        MEM_BEFORE["rss_per_req_mb"],
                        MEM_AFTER["rss_per_req_mb"],
                        "MB",
                        note="stability across sequential requests",
                    ),
                    metric_row(
                        "K8s allocation",
                        MEM_BEFORE["k8s_gb"] * 1024,
                        MEM_AFTER["k8s_gb"] * 1024,
                        "MB",
                    ),
                ],
                marginTop="20px",
            ),
            section(
                "What Changed: Latency",
                "Five optimizations: an O(N\u00b2) algorithmic fix, redundant image format conversions, "
                "and unnecessary serialization in the OCR pipeline. Cumulative: 50.8s to 44.3s (-12.9%) via FastAPI.",
            ),
            html.Div(
                [
                    html.Div(
                        [
                            html.Div(
                                "O(N\u00b2) Text Extraction Fix",
                                style={
                                    "fontWeight": "700",
                                    "color": SLATE,
                                    "fontSize": "16px",
                                },
                            ),
                            html.Span(
                                "Algorithmic",
                                style={
                                    "marginLeft": "12px",
                                    "padding": "2px 10px",
                                    "borderRadius": "999px",
                                    "fontSize": "12px",
                                    "fontWeight": "600",
                                    "background": RED,
                                    "color": WHITE,
                                },
                            ),
                        ],
                        style={
                            "marginBottom": "12px",
                            "display": "flex",
                            "alignItems": "center",
                        },
                    ),
                    html.P(
                        [
                            html.Code(
                                "_patch_current_chars_with_render_mode",
                                style={
                                    "fontFamily": MONO,
                                    "color": ACCENT,
                                },
                            ),
                            " was re-scanning the full character list on every patch operation \u2014 "
                            "O(N\u00b2) scaling that caused processing time to grow quadratically on "
                            "text-heavy documents. Replaced with a single-pass approach.",
                        ],
                        style={
                            "color": GRAY,
                            "fontSize": "14px",
                            "lineHeight": "1.6",
                            "margin": "0",
                        },
                    ),
                    html.Div(
                        html.A(
                            "PR #4266 (merged)",
                            href=f"{_DATA['unstructured_base']}/4266",
                            target="_blank",
                            style={
                                "color": BLUE,
                                "fontSize": "13px",
                                "textDecoration": "none",
                            },
                        ),
                        style={"marginTop": "8px"},
                    ),
                ],
                style={
                    **CARD,
                    "marginBottom": "16px",
                    "borderLeft": f"4px solid {RED}",
                },
            ),
            html.Div(
                [
                    html.Div(
                        "BMP Instead of PNG for PDF Rendering",
                        style={
                            "fontWeight": "700",
                            "color": SLATE,
                            "fontSize": "16px",
                            "marginBottom": "12px",
                        },
                    ),
                    html.P(
                        "pdfium was rendering pages as PNG (compressed) when the downstream consumer immediately "
                        "decompresses to a raw bitmap. Switching to BMP skips the compression step entirely.",
                        style={
                            "color": GRAY,
                            "fontSize": "14px",
                            "lineHeight": "1.6",
                            "margin": "0",
                        },
                    ),
                    html.Div(
                        [
                            html.Span(
                                "-89 ms/page",
                                style={
                                    "color": GREEN,
                                    "fontWeight": "700",
                                },
                            ),
                            html.Span(
                                " | -890 ms for a 10-page scan | standalone: -14.6%",
                                style={"color": GRAY},
                            ),
                        ],
                        style={
                            "marginTop": "8px",
                            "fontSize": "14px",
                        },
                    ),
                    html.Div(
                        html.A(
                            "PR #1503 (open)",
                            href=f"{CORE_PRODUCT_BASE}/1503",
                            target="_blank",
                            style={
                                "color": BLUE,
                                "fontSize": "13px",
                                "textDecoration": "none",
                            },
                        ),
                        style={"marginTop": "4px"},
                    ),
                ],
                style={
                    **CARD,
                    "marginBottom": "16px",
                    "borderLeft": f"4px solid {GREEN}",
                },
            ),
            html.Div(
                [
                    html.Div(
                        [
                            html.Div(
                                "Direct File Path to Tesseract (Parallel Workers)",
                                style={
                                    "fontWeight": "700",
                                    "color": SLATE,
                                    "fontSize": "16px",
                                },
                            ),
                            html.Span(
                                "Biggest latency impact",
                                style={
                                    "marginLeft": "12px",
                                    "padding": "2px 10px",
                                    "borderRadius": "999px",
                                    "fontSize": "12px",
                                    "fontWeight": "600",
                                    "background": ACCENT,
                                    "color": DARK,
                                },
                            ),
                        ],
                        style={
                            "marginBottom": "12px",
                            "display": "flex",
                            "alignItems": "center",
                        },
                    ),
                    html.P(
                        "The OCR path was: numpy array -> PIL Image -> temp PNG file -> tesseract CLI. "
                        "The page image already exists on disk from pdfium rendering. "
                        "Passing the path directly to pytesseract skips three intermediate copies.",
                        style={
                            "color": GRAY,
                            "fontSize": "14px",
                            "lineHeight": "1.6",
                            "margin": "0",
                        },
                    ),
                    html.Div(
                        [
                            html.Span(
                                "-32.6% on 1-page tables",
                                style={
                                    "color": GREEN,
                                    "fontWeight": "700",
                                },
                            ),
                            html.Span(
                                " | -7.7% on 10-page scan | -7.4% on 16-page mixed",
                                style={"color": GRAY},
                            ),
                        ],
                        style={
                            "marginTop": "8px",
                            "fontSize": "14px",
                        },
                    ),
                    html.Div(
                        html.A(
                            "PR #1505 (open)",
                            href=f"{CORE_PRODUCT_BASE}/1505",
                            target="_blank",
                            style={
                                "color": BLUE,
                                "fontSize": "13px",
                                "textDecoration": "none",
                            },
                        ),
                        style={"marginTop": "4px"},
                    ),
                ],
                style={
                    **CARD,
                    "marginBottom": "16px",
                    "borderLeft": f"4px solid {ACCENT}",
                },
            ),
            html.Div(
                [
                    html.Div(
                        "Direct File Path to Tesseract (Serial Fallback)",
                        style={
                            "fontWeight": "700",
                            "color": SLATE,
                            "fontSize": "16px",
                            "marginBottom": "12px",
                        },
                    ),
                    html.P(
                        "Same optimization applied to the serial OCR fallback path (1-CPU pods). "
                        "Eliminated 1.97s of PNG re-encoding self-time across 10 pages.",
                        style={
                            "color": GRAY,
                            "fontSize": "14px",
                            "lineHeight": "1.6",
                            "margin": "0",
                        },
                    ),
                    html.Div(
                        [
                            html.Span(
                                "-1.8% wall clock",
                                style={
                                    "color": GREEN,
                                    "fontWeight": "700",
                                },
                            ),
                            html.Span(
                                " | -98% PNG encode self-time (1.97s to 0.04s)",
                                style={"color": GRAY},
                            ),
                        ],
                        style={
                            "marginTop": "8px",
                            "fontSize": "14px",
                        },
                    ),
                    html.Div(
                        html.A(
                            "PR #1506 (merged)",
                            href=f"{CORE_PRODUCT_BASE}/1506",
                            target="_blank",
                            style={
                                "color": BLUE,
                                "fontSize": "13px",
                                "textDecoration": "none",
                            },
                        ),
                        style={"marginTop": "4px"},
                    ),
                ],
                style={
                    **CARD,
                    "marginBottom": "16px",
                    "borderLeft": f"4px solid {GREEN}",
                },
            ),
            html.Div(
                [
                    html.Div(
                        "BMP Temp Files for Pytesseract",
                        style={
                            "fontWeight": "700",
                            "color": SLATE,
                            "fontSize": "16px",
                            "marginBottom": "12px",
                        },
                    ),
                    html.P(
                        "When pytesseract receives in-memory images (multi-CPU pods, direct API calls), "
                        "it creates a temp file for the tesseract CLI. Monkey-patching the format from PNG to BMP "
                        "cuts encoding from ~0.27s to ~0.018s per page (15x faster).",
                        style={
                            "color": GRAY,
                            "fontSize": "14px",
                            "lineHeight": "1.6",
                            "margin": "0",
                        },
                    ),
                    html.Div(
                        [
                            html.Span(
                                "-6.4% standalone",
                                style={
                                    "color": GREEN,
                                    "fontWeight": "700",
                                },
                            ),
                            html.Span(
                                " | -91% pytesseract save() time | complements path passthrough on multi-CPU",
                                style={"color": GRAY},
                            ),
                        ],
                        style={
                            "marginTop": "8px",
                            "fontSize": "14px",
                        },
                    ),
                    html.Div(
                        html.A(
                            "PR #1509 (open)",
                            href=f"{CORE_PRODUCT_BASE}/1509",
                            target="_blank",
                            style={
                                "color": BLUE,
                                "fontSize": "13px",
                                "textDecoration": "none",
                            },
                        ),
                        style={"marginTop": "4px"},
                    ),
                ],
                style={
                    **CARD,
                    "marginBottom": "16px",
                    "borderLeft": f"4px solid {AMBER}",
                },
            ),
        ],
    )


def _method_row(label, text):
    """A single labeled row for the methodology cards."""
    return html.Div(
        [
            html.Span(
                label,
                style={
                    "fontWeight": "700",
                    "color": SLATE,
                    "minWidth": "160px",
                    "fontSize": "14px",
                },
            ),
            html.Span(
                text,
                style={
                    "color": GRAY,
                    "fontSize": "14px",
                    "lineHeight": "1.6",
                },
            ),
        ],
        style={
            "display": "flex",
            "gap": "16px",
            "padding": "10px 0",
            "borderBottom": f"1px solid {CARD_BORDER}",
        },
    )


def _above_fold_content(*, negative_margin=False):
    """Hero Metrics + Infrastructure Cost Impact + Broader Context.

    Used above the tab toggle on the main page and at the top of /jpc.
    """
    top_margin = "-40px" if negative_margin else "0"
    return [
        html.Div(
            style={
                "display": "flex",
                "gap": "20px",
                "flexWrap": "wrap",
                "marginTop": top_margin,
                "position": "relative",
                "zIndex": "1",
            },
            children=[
                hero_metric(
                    "-89%",
                    "Core-Product Cost",
                    "$10,000/mo \u2192 ~$1,100/mo",
                    ACCENT,
                ),
                hero_metric(
                    "-52%",
                    "Peak Memory Usage",
                    "4,651 MB \u2192 2,227 MB per pod",
                    GREEN,
                ),
                hero_metric(
                    "Flat",
                    "Memory Scaling",
                    "Constant peak memory regardless of document count",
                    GREEN,
                ),
                hero_metric(
                    "-12.9%",
                    "Latency",
                    "50.8s \u2192 44.3s via production FastAPI path",
                    ACCENT,
                ),
            ],
        ),
        section(
            "Infrastructure Cost Impact",
            "AKS node packing analysis based on current production topology.",
        ),
        card(
            [
                html.P(
                    [
                        "Production runs on ",
                        html.Span(
                            "Standard_D48s_v5",
                            style={"fontWeight": "700", "color": SLATE},
                        ),
                        " nodes (48 vCPU, 192 GB RAM) at ",
                        html.Span(
                            "$2.304/hr ($1,682/mo)",
                            style={
                                "fontWeight": "700",
                                "color": ACCENT,
                                "fontFamily": MONO,
                            },
                        ),
                        " per node. Each core-product pod requests ",
                        html.Span(
                            "1 CPU / 32 GB RAM",
                            style={"fontWeight": "700", "color": SLATE},
                        ),
                        " per pod.",
                    ],
                    style={
                        "color": GRAY,
                        "fontSize": "15px",
                        "lineHeight": "1.7",
                        "margin": "0 0 20px",
                    },
                ),
                html.Div(
                    style={
                        "display": "flex",
                        "gap": "20px",
                        "flexWrap": "wrap",
                        "marginBottom": "20px",
                    },
                    children=[
                        html.Div(
                            [
                                html.Div(
                                    "BEFORE",
                                    style={
                                        "fontSize": "11px",
                                        "fontWeight": "700",
                                        "color": RED,
                                        "letterSpacing": "0.1em",
                                        "marginBottom": "12px",
                                    },
                                ),
                                html.Div(
                                    "5 pods / node",
                                    style={
                                        "fontSize": "28px",
                                        "fontWeight": "800",
                                        "color": SLATE,
                                        "lineHeight": "1",
                                    },
                                ),
                                html.Div(
                                    "RAM is the bottleneck",
                                    style={
                                        "fontSize": "13px",
                                        "color": GRAY,
                                        "marginTop": "8px",
                                    },
                                ),
                            ],
                            style={
                                "background": CARD_BG,
                                "borderRadius": "12px",
                                "padding": "20px 24px",
                                "border": f"1px solid {CARD_BORDER}",
                                "borderTop": f"3px solid {RED}",
                                "flex": "1 1 0%",
                                "minWidth": "0",
                            },
                        ),
                        html.Div(
                            "\u2192",
                            style={
                                "fontSize": "32px",
                                "color": GRAY,
                                "alignSelf": "center",
                                "padding": "0 4px",
                            },
                        ),
                        html.Div(
                            [
                                html.Div(
                                    "AFTER",
                                    style={
                                        "fontSize": "11px",
                                        "fontWeight": "700",
                                        "color": GREEN,
                                        "letterSpacing": "0.1em",
                                        "marginBottom": "12px",
                                    },
                                ),
                                html.Div(
                                    "46 pods / node",
                                    style={
                                        "fontSize": "28px",
                                        "fontWeight": "800",
                                        "color": GREEN,
                                        "lineHeight": "1",
                                    },
                                ),
                                html.Div(
                                    "CPU becomes the bottleneck",
                                    style={
                                        "fontSize": "13px",
                                        "color": GRAY,
                                        "marginTop": "8px",
                                    },
                                ),
                            ],
                            style={
                                "background": CARD_BG,
                                "borderRadius": "12px",
                                "padding": "20px 24px",
                                "border": f"1px solid {CARD_BORDER}",
                                "borderTop": f"3px solid {GREEN}",
                                "flex": "1 1 0%",
                                "minWidth": "0",
                            },
                        ),
                    ],
                ),
                html.Div(
                    style={
                        "display": "flex",
                        "gap": "20px",
                        "flexWrap": "wrap",
                        "marginTop": "4px",
                    },
                    children=[
                        html.Div(
                            [
                                html.Div(
                                    "Current Spend",
                                    style={
                                        "fontSize": "11px",
                                        "fontWeight": "700",
                                        "color": RED,
                                        "letterSpacing": "0.1em",
                                        "marginBottom": "8px",
                                    },
                                ),
                                html.Div(
                                    "$10,000/mo",
                                    style={
                                        "fontSize": "32px",
                                        "fontWeight": "800",
                                        "color": SLATE,
                                        "lineHeight": "1",
                                        "fontFamily": MONO,
                                    },
                                ),
                            ],
                            style={
                                "background": CARD_BG,
                                "borderRadius": "12px",
                                "padding": "20px 24px",
                                "border": f"1px solid {CARD_BORDER}",
                                "flex": "1 1 0%",
                                "minWidth": "0",
                            },
                        ),
                        html.Div(
                            "\u2192",
                            style={
                                "fontSize": "32px",
                                "color": GRAY,
                                "alignSelf": "center",
                                "padding": "0 4px",
                            },
                        ),
                        html.Div(
                            [
                                html.Div(
                                    "Recommended",
                                    style={
                                        "fontSize": "11px",
                                        "fontWeight": "700",
                                        "color": GREEN,
                                        "letterSpacing": "0.1em",
                                        "marginBottom": "8px",
                                    },
                                ),
                                html.Div(
                                    "~$1,100/mo",
                                    style={
                                        "fontSize": "32px",
                                        "fontWeight": "800",
                                        "color": GREEN,
                                        "lineHeight": "1",
                                        "fontFamily": MONO,
                                    },
                                ),
                            ],
                            style={
                                "background": CARD_BG,
                                "borderRadius": "12px",
                                "padding": "20px 24px",
                                "border": f"1px solid {CARD_BORDER}",
                                "flex": "1 1 0%",
                                "minWidth": "0",
                            },
                        ),
                        html.Div(
                            [
                                html.Div(
                                    "Savings",
                                    style={
                                        "fontSize": "11px",
                                        "fontWeight": "700",
                                        "color": ACCENT,
                                        "letterSpacing": "0.1em",
                                        "marginBottom": "8px",
                                    },
                                ),
                                html.Div(
                                    "~$8,900/mo",
                                    style={
                                        "fontSize": "32px",
                                        "fontWeight": "800",
                                        "color": ACCENT,
                                        "lineHeight": "1",
                                        "fontFamily": MONO,
                                    },
                                ),
                                html.Div(
                                    "~$107K/year in compute savings",
                                    style={
                                        "fontSize": "13px",
                                        "color": GRAY,
                                        "marginTop": "8px",
                                    },
                                ),
                            ],
                            style={
                                "background": CARD_BG,
                                "borderRadius": "12px",
                                "padding": "20px 24px",
                                "border": f"1px solid {CARD_BORDER}",
                                "flex": "1 1 0%",
                                "minWidth": "0",
                            },
                        ),
                    ],
                ),
                html.P(
                    "Based on Azure retail pricing for Standard_D48s_v5 in US East ($2.304/hr). "
                    "Assumes ~46 usable vCPU and ~186 GB usable RAM per node after AKS system reservations.",
                    style={
                        "color": LIGHT_GRAY,
                        "fontSize": "12px",
                        "marginTop": "12px",
                    },
                ),
            ],
        ),
        html.Div(
            [
                html.Div(
                    [
                        html.Span(
                            "Broader Context",
                            style={
                                "fontSize": "13px",
                                "fontWeight": "700",
                                "color": ACCENT,
                                "letterSpacing": "0.03em",
                            },
                        ),
                    ],
                    style={"marginBottom": "10px"},
                ),
                html.P(
                    [
                        "Core-product compute represents roughly ",
                        html.Span(
                            "10% of the total Azure spend",
                            style={"fontWeight": "700", "color": SLATE},
                        ),
                        ". The approach that achieved 90% savings here "
                        "can be applied across the broader platform "
                        "infrastructure \u2014 with dedicated instance savings flowing through "
                        "automatically.",
                    ],
                    style={
                        "color": GRAY,
                        "fontSize": "14px",
                        "lineHeight": "1.7",
                        "margin": "0",
                    },
                ),
            ],
            style={
                **CARD,
                "marginTop": "16px",
                "borderLeft": f"4px solid {ACCENT}",
            },
        ),
    ]


def _jpc_content():
    """Inner content for the JPC summary — reused by tab and standalone route."""
    return [
        # ── The Engagement ──
        section(
            "The Engagement",
            "Codeflash partnered with the core-product team to profile and "
            "optimize the document processing pipeline.",
        ),
        card(
            [
                html.P(
                    [
                        "We identified that core-product pods were requesting ",
                        html.Span(
                            "32 GB of RAM",
                            style={"fontWeight": "700", "color": SLATE},
                        ),
                        " but still occasionally OOM'ing. The root cause: Python's ",
                        html.Code(
                            "os.cpu_count()",
                            style={
                                "fontFamily": MONO,
                                "color": ACCENT,
                                "fontSize": "13px",
                            },
                        ),
                        " was returning the host's full CPU count "
                        "(48 on a D48s_v5 node) instead of the pod's 1-CPU limit, "
                        "spawning redundant OCR workers that each loaded the full ONNX "
                        "model set — 4x the memory for zero parallelism benefit.",
                    ],
                    style={
                        "color": GRAY,
                        "fontSize": "15px",
                        "lineHeight": "1.7",
                        "margin": "0 0 16px",
                    },
                ),
                html.P(
                    "Over 7 weeks, we profiled the pipeline end-to-end — and each optimization "
                    "peeled back a layer, revealing issues that had been masked by larger problems "
                    "upstream. Fixing the worker pool exposed per-request memory creep (24 MB/req from "
                    "PIL image churn). Reducing memory noise surfaced an O(N\u00b2) text extraction "
                    "bottleneck and unnecessary PNG serialization between processes. These weren't "
                    "problems anyone had reason to look for — they only became visible as earlier "
                    "fixes shifted the performance profile. 24 merged PRs across 5 repos, all "
                    "passing the existing test suite with zero regressions.",
                    style={
                        "color": GRAY,
                        "fontSize": "15px",
                        "lineHeight": "1.7",
                        "margin": "0",
                    },
                ),
            ]
        ),
        # ── What This Enables ──
        section("What This Enables"),
        card(
            [
                html.Div(
                    style={
                        "display": "flex",
                        "flexDirection": "column",
                        "gap": "20px",
                    },
                    children=[
                        html.Div(
                            [
                                html.Div(
                                    [
                                        html.Span(
                                            "9.2x",
                                            style={
                                                "fontSize": "28px",
                                                "fontWeight": "800",
                                                "color": GREEN,
                                                "marginRight": "12px",
                                            },
                                        ),
                                        html.Span(
                                            "pod density improvement",
                                            style={
                                                "fontSize": "16px",
                                                "fontWeight": "700",
                                                "color": SLATE,
                                            },
                                        ),
                                    ],
                                    style={
                                        "display": "flex",
                                        "alignItems": "baseline",
                                    },
                                ),
                                html.P(
                                    "Pods that required 32 GB now run in 4 GB. "
                                    "Same nodes, same hardware — 46 pods per node instead of 5. "
                                    "This frees capacity for the platform team to scale without "
                                    "provisioning new infrastructure.",
                                    style={
                                        "color": GRAY,
                                        "fontSize": "14px",
                                        "lineHeight": "1.6",
                                        "margin": "8px 0 0",
                                    },
                                ),
                            ],
                            style={
                                "paddingBottom": "20px",
                                "borderBottom": f"1px solid {CARD_BORDER}",
                            },
                        ),
                        html.Div(
                            [
                                html.Div(
                                    [
                                        html.Span(
                                            "41 idle vCPUs",
                                            style={
                                                "fontSize": "28px",
                                                "fontWeight": "800",
                                                "color": ACCENT,
                                                "marginRight": "12px",
                                            },
                                        ),
                                        html.Span(
                                            "now available per node",
                                            style={
                                                "fontSize": "16px",
                                                "fontWeight": "700",
                                                "color": SLATE,
                                            },
                                        ),
                                    ],
                                    style={
                                        "display": "flex",
                                        "alignItems": "baseline",
                                    },
                                ),
                                html.P(
                                    "When RAM was the bottleneck, nodes were at 11% CPU utilization — "
                                    "41 of 48 vCPUs sitting idle. With memory constraints removed, "
                                    "that compute capacity becomes available for higher throughput "
                                    "or additional workloads.",
                                    style={
                                        "color": GRAY,
                                        "fontSize": "14px",
                                        "lineHeight": "1.6",
                                        "margin": "8px 0 0",
                                    },
                                ),
                            ],
                            style={
                                "paddingBottom": "20px",
                                "borderBottom": f"1px solid {CARD_BORDER}",
                            },
                        ),
                        html.Div(
                            [
                                html.Div(
                                    [
                                        html.Span(
                                            "-12.9%",
                                            style={
                                                "fontSize": "28px",
                                                "fontWeight": "800",
                                                "color": ACCENT,
                                                "marginRight": "12px",
                                            },
                                        ),
                                        html.Span(
                                            "end-to-end latency reduction",
                                            style={
                                                "fontSize": "16px",
                                                "fontWeight": "700",
                                                "color": SLATE,
                                            },
                                        ),
                                    ],
                                    style={
                                        "display": "flex",
                                        "alignItems": "baseline",
                                    },
                                ),
                                html.P(
                                    "50.8s to 44.3s on a 10-page scanned document through the "
                                    "production FastAPI path. Faster document processing means "
                                    "faster responses for platform API consumers — directly "
                                    "relevant as the API is positioned for agentic tool use.",
                                    style={
                                        "color": GRAY,
                                        "fontSize": "14px",
                                        "lineHeight": "1.6",
                                        "margin": "8px 0 0",
                                    },
                                ),
                            ],
                        ),
                    ],
                ),
            ],
        ),
        # ── Delivered ──
        section("Delivered"),
        card(
            [
                html.Div(
                    style={
                        "display": "flex",
                        "gap": "40px",
                        "flexWrap": "wrap",
                    },
                    children=[
                        html.Div(
                            [
                                html.Div(
                                    "24",
                                    style={
                                        "fontSize": "36px",
                                        "fontWeight": "800",
                                        "color": ACCENT,
                                        "lineHeight": "1",
                                    },
                                ),
                                html.Div(
                                    "PRs merged",
                                    style={
                                        "fontSize": "14px",
                                        "color": GRAY,
                                        "marginTop": "4px",
                                    },
                                ),
                            ]
                        ),
                        html.Div(
                            [
                                html.Div(
                                    "5",
                                    style={
                                        "fontSize": "36px",
                                        "fontWeight": "800",
                                        "color": AMBER,
                                        "lineHeight": "1",
                                    },
                                ),
                                html.Div(
                                    "PRs in progress",
                                    style={
                                        "fontSize": "14px",
                                        "color": GRAY,
                                        "marginTop": "4px",
                                    },
                                ),
                            ]
                        ),
                        html.Div(
                            [
                                html.Div(
                                    "354",
                                    style={
                                        "fontSize": "36px",
                                        "fontWeight": "800",
                                        "color": GREEN,
                                        "lineHeight": "1",
                                    },
                                ),
                                html.Div(
                                    "tests passing",
                                    style={
                                        "fontSize": "14px",
                                        "color": GRAY,
                                        "marginTop": "4px",
                                    },
                                ),
                            ]
                        ),
                    ],
                ),
                html.P(
                    "All changes delivered as individual, reviewable PRs across "
                    "5 repositories: core-product, unstructured, unstructured-inference, "
                    "unstructured-od-models, and github-workflows. Each PR includes "
                    "benchmark numbers and passes the existing test suite.",
                    style={
                        "color": GRAY,
                        "fontSize": "14px",
                        "lineHeight": "1.6",
                        "marginTop": "20px",
                        "paddingTop": "16px",
                        "borderTop": f"1px solid {CARD_BORDER}",
                    },
                ),
            ]
        ),
        # ── Proposed Next Engagement ──
        html.Hr(
            style={
                "border": "none",
                "borderTop": f"1px solid {CARD_BORDER}",
                "margin": "64px 0 0",
            },
        ),
        html.Div(
            [
                html.H2(
                    "Proposed Next Engagement",
                    style={
                        "fontSize": "28px",
                        "fontWeight": "800",
                        "color": WHITE,
                        "margin": "0",
                        "fontFamily": FONT,
                        "letterSpacing": "-0.02em",
                    },
                ),
                html.P(
                    "Core-product represents ~10% of Unstructured's Azure spend. "
                    "The techniques that delivered 90% savings here can be applied "
                    "across the broader platform. Based on our discovery work and "
                    "discussions with the team, we recommend the following tracks.",
                    style={
                        "fontSize": "15px",
                        "color": GRAY,
                        "margin": "12px 0 0",
                        "lineHeight": "1.6",
                        "maxWidth": "640px",
                    },
                ),
            ],
            style={
                "margin": "48px 0 32px",
                "padding": "32px 0",
                "borderLeft": f"4px solid {ACCENT}",
                "paddingLeft": "24px",
            },
        ),
        html.Div(
            style={
                "display": "flex",
                "flexDirection": "column",
                "gap": "16px",
            },
            children=[
                _next_card(
                    "1",
                    "Platform API Speed & Stability",
                    "The platform API is being positioned as an agentic tool "
                    "endpoint where latency and reliability are critical. Each "
                    "DAG step spins up a distinct K8s pod on demand — cold start "
                    "overhead compounds across the pipeline. We can apply the same "
                    "profiling-driven approach to reduce pod startup time, optimize "
                    "image warm-up, and improve end-to-end throughput for the "
                    "transform pipeline.",
                    notes=[
                        "Pod cold start reduction via image snapshotting and pre-warming",
                        "Import time and startup profiling for each pipeline step",
                        "Throughput optimization: concurrent requests, batch processing",
                        "Directly supports the agentic API use case",
                    ],
                ),
                _next_card(
                    "2",
                    "Developer Experience & CI/CD",
                    "Collapse the complex GHA workflow permutations into a streamlined "
                    "uv workspace \u2014 same GitHub Actions, same repo structure, just fewer "
                    "moving parts. We've already delivered the foundation: uv workspace "
                    "POC live in the ci-unified-workflows branch and platform-libs#667.",
                    notes=[
                        [
                            "POC live in ",
                            html.A(
                                "ci-unified-workflows",
                                href="https://github.com/Unstructured-IO/github-workflows/tree/ci-unified-workflows",
                                target="_blank",
                                style={
                                    "color": BLUE,
                                    "textDecoration": "none",
                                },
                            ),
                            " branch and ",
                            html.A(
                                "platform-libs#667",
                                href="https://github.com/Unstructured-IO/platform-libs/pull/667",
                                target="_blank",
                                style={
                                    "color": BLUE,
                                    "textDecoration": "none",
                                },
                            ),
                        ],
                        "Eliminates per-package workflow permutations \u2014 one matrix, one lockfile",
                        "No migration off GitHub Actions \u2014 same CI/CD platform, simplified configuration",
                        "Same approach ready for core-product workspace migration",
                    ],
                ),
                _next_card(
                    "3",
                    "Security Hardening",
                    "During profiling we identified supply chain risks: dependency "
                    "confusion exposure on internal package names and a lockfile "
                    "bypass pattern that could allow CVE-affected transitive "
                    "dependencies. A targeted engagement would harden the build "
                    "pipeline and complement existing CVE scanning efforts.",
                    notes=[
                        "Lockfile bypass via uv pip install allows CVE-affected transitive deps",
                        "uv workspace migration eliminates bypass vectors by design",
                        "Complements existing security scanning workflows",
                    ],
                ),
                _next_card(
                    "4",
                    "Infrastructure Cost Discovery",
                    "The full Azure bill is approximately $100K/month for staging, "
                    "production, and development — with dedicated instance costs on top. "
                    "A systematic cost audit would identify the highest-impact targets "
                    "across the platform and for vertical optimization.",
                    notes=[
                        "Core-product savings ($8.9K/mo) proves the approach at ~10% of total spend",
                        "Dedicated instances inherit generic savings automatically",
                        "Cost discovery surfaces both infrastructure and architecture opportunities",
                        "Directly impacts gross margins and unit economics",
                    ],
                ),
            ],
        ),
    ]


def build_jpc_view():
    """Standalone JPC summary at /jpc — full page with header and footer."""
    return html.Div(
        style={
            "background": BG,
            "minHeight": "100vh",
            "fontFamily": FONT,
        },
        children=[
            html.Div(
                style={
                    "maxWidth": "800px",
                    "margin": "0 auto",
                    "padding": "48px 32px 80px",
                },
                children=[
                    # ── Header ──
                    html.Div(
                        [
                            html.Div(
                                _logo_lockup(),
                                style={"marginBottom": "20px"},
                            ),
                            html.H1(
                                "Engagement Summary",
                                style={
                                    "fontSize": "32px",
                                    "fontWeight": "800",
                                    "color": WHITE,
                                    "letterSpacing": "-0.02em",
                                    "margin": "0 0 8px",
                                    "fontFamily": FONT,
                                },
                            ),
                            html.P(
                                "Performance optimization — core-product document processing pipeline",
                                style={
                                    "fontSize": "16px",
                                    "color": GRAY,
                                    "margin": "0 0 16px",
                                },
                            ),
                            html.Div(
                                "April 2026  \u00b7  2-month engagement",
                                style={
                                    "fontSize": "13px",
                                    "color": LIGHT_GRAY,
                                    "fontFamily": MONO,
                                },
                            ),
                        ],
                        style={
                            "marginBottom": "48px",
                            "paddingBottom": "32px",
                            "borderBottom": f"1px solid {CARD_BORDER}",
                        },
                    ),
                    *_above_fold_content(),
                    *_jpc_content(),
                ],
            ),
        ],
    )


def _build_jpc_tab():
    """JPC summary as a tab view (default active tab)."""
    return html.Div(
        id="jpc-view",
        children=_jpc_content(),
    )


def build_detail_view():
    return html.Div(
        id="detail-view",
        style={"display": "none"},
        children=[
            card(
                [
                    html.P(
                        "This view contains the raw data behind the Executive Brief and "
                        "Engineering Details views: every PR, benchmark measurement, and "
                        "environment detail. All numbers are reproducible on the benchmark VM.",
                        style={
                            "color": GRAY,
                            "fontSize": "14px",
                            "lineHeight": "1.6",
                            "margin": "0",
                        },
                    ),
                ],
                marginTop="24px",
                borderLeft=f"4px solid {ACCENT}",
            ),
            section(
                "Merged PR Inventory",
                "All PRs merged across Unstructured repos, ordered by date.",
            ),
            dash_table.DataTable(
                columns=[
                    {"name": "PR", "id": "pr", "presentation": "markdown"},
                    {"name": "Merged", "id": "date"},
                    {"name": "Description", "id": "desc"},
                    {"name": "Category", "id": "cat"},
                    {"name": "Repo", "id": "repo"},
                ],
                data=sorted(
                    [
                        {
                            "pr": f"[#{r[0]}]({REPO_BASES.get(r[4], CORE_PRODUCT_BASE)}/{r[0]})",
                            "date": r[1],
                            "desc": r[2],
                            "cat": r[3],
                            "repo": r[4],
                        }
                        for r in MERGED_PRS
                        if r[4] != "github-workflows"
                    ],
                    key=lambda x: x["date"],
                ),
                markdown_options={"link_target": "_blank"},
                style_header=TABLE_HEADER,
                style_cell=TABLE_CELL,
                style_data=TABLE_DATA,
                style_table=TABLE_WRAP,
                style_data_conditional=[
                    {
                        "if": {"row_index": "odd"},
                        "backgroundColor": "#1f1f23",
                    },
                    *[
                        {
                            "if": {
                                "filter_query": f'{{cat}} = "{cat}"',
                                "column_id": "cat",
                            },
                            "color": color,
                            "fontWeight": "600",
                        }
                        for cat, color in {
                            "Memory": GREEN,
                            "Latency": ACCENT,
                            "Reliability": BLUE,
                            "Code quality": PURPLE,
                        }.items()
                    ],
                ],
            ),
            section("Open / In-Progress PRs"),
            dash_table.DataTable(
                columns=[
                    {"name": "PR", "id": "pr", "presentation": "markdown"},
                    {"name": "Description", "id": "desc"},
                    {"name": "Category", "id": "cat"},
                    {"name": "Repo", "id": "repo"},
                ],
                data=[
                    {
                        "pr": f"[#{r[0]}]({REPO_BASES.get(r[3], CORE_PRODUCT_BASE)}/{r[0]})",
                        "desc": r[1],
                        "cat": r[2],
                        "repo": r[3],
                    }
                    for r in OPEN_PRS
                    if r[3] != "platform-libs"
                ],
                markdown_options={"link_target": "_blank"},
                style_header=TABLE_HEADER,
                style_cell=TABLE_CELL,
                style_data=TABLE_DATA,
                style_table=TABLE_WRAP,
                style_data_conditional=[
                    {
                        "if": {"row_index": "odd"},
                        "backgroundColor": "#1f1f23",
                    },
                ],
            ),
            section(
                "A/B Benchmark Results (memray --native)",
                "18 common partition tests, pre-Feb 2026 baseline vs current main. "
                "These are the older memray-based numbers; the headline metrics above use the newer "
                "FastAPI-based measurements which are more representative of production.",
            ),
            card(
                [
                    table_header(
                        [
                            {"label": "Metric", "flex": True},
                            {
                                "label": "Baseline",
                                "width": "140px",
                                "align": "right",
                            },
                            {
                                "label": "Current",
                                "width": "140px",
                                "align": "right",
                            },
                            {
                                "label": "Delta",
                                "width": "80px",
                                "align": "center",
                            },
                        ]
                    ),
                    metric_row(
                        "Post-import RSS",
                        BENCH_BEFORE["post_import_mib"],
                        BENCH_AFTER["post_import_mib"],
                        "MiB",
                    ),
                    metric_row(
                        "First partition delta",
                        BENCH_BEFORE["first_partition_delta_mib"],
                        BENCH_AFTER["first_partition_delta_mib"],
                        "MiB",
                    ),
                    metric_row(
                        "Peak memory",
                        BENCH_BEFORE["peak_gb"],
                        BENCH_AFTER["peak_gb"],
                        "GB",
                        "{:.3f}",
                    ),
                    metric_row(
                        "Total allocated",
                        BENCH_BEFORE["total_gb"],
                        BENCH_AFTER["total_gb"],
                        "GB",
                        "{:.1f}",
                        better="lower",
                    ),
                    metric_row(
                        "Allocation count",
                        BENCH_BEFORE["allocs"],
                        BENCH_AFTER["allocs"],
                        "",
                        "{:,.0f}",
                        better="lower",
                    ),
                    metric_row(
                        "Wall time",
                        BENCH_BEFORE["wall_s"],
                        BENCH_AFTER["wall_s"],
                        "s",
                        "{:.1f}",
                    ),
                ]
            ),
            html.P(
                "Total allocated increased because current uses more frequent smaller allocations - "
                "peak (the OOM-risk metric) still decreased. This pattern indicates better memory recycling.",
                style={
                    "color": LIGHT_GRAY,
                    "fontSize": "12px",
                    "marginTop": "12px",
                },
            ),
            section(
                "Latency Optimization Detail",
                "Individual PR benchmarks (standalone vs main) and cumulative via FastAPI endpoint.",
            ),
            # ── Workload Profiles ──
            card(
                [
                    html.H3(
                        "Benchmark Workload Profiles",
                        style={
                            "fontSize": "16px",
                            "fontWeight": "700",
                            "color": ACCENT,
                            "margin": "0 0 16px",
                        },
                    ),
                    html.P(
                        "Page count is one dimension of workload, but content density "
                        "and element type are what actually drive compute cost. A 10-page "
                        "table-heavy PDF can be more expensive than a 100-page native text PDF. "
                        "These three documents were chosen to isolate different workload shapes, "
                        "not just different page counts.",
                        style={
                            "color": GRAY,
                            "fontSize": "14px",
                            "lineHeight": "1.6",
                            "margin": "0 0 16px",
                        },
                    ),
                    html.Div(
                        [
                            _method_row(
                                "1p-tables",
                                "A single page dense with tables. Despite being 1 page, "
                                "this is the heaviest per-page workload — each table triggers "
                                "its own OCR + transformer inference pass. Isolates optimizations "
                                "that target per-element cost.",
                            ),
                            _method_row(
                                "10p-scan",
                                "10-page scanned document, hi_res strategy. Every page goes through "
                                "the full pipeline: render → layout detection → OCR. Closest to the "
                                "real production workload on the FastAPI endpoint.",
                            ),
                            _method_row(
                                "16p-mixed",
                                "16 pages of mixed content: native text, scans, and tables. Not every "
                                "page hits the heavy path — native text skips OCR entirely. Tests that "
                                "optimizations improve the heavy path without regressing the light one.",
                            ),
                        ]
                    ),
                ],
                marginBottom="24px",
            ),
            dash_table.DataTable(
                columns=[
                    {"name": "Optimization", "id": "opt"},
                    {"name": "1p-tables", "id": "one_page"},
                    {"name": "10p-scan", "id": "ten_page"},
                    {"name": "16p-mixed", "id": "sixteen_page"},
                ],
                data=[
                    {
                        "opt": r[0],
                        "one_page": r[1],
                        "ten_page": r[2],
                        "sixteen_page": r[3],
                    }
                    for r in LATENCY_STANDALONE
                ]
                + [
                    {
                        "opt": "Cumulative (FastAPI, warmed)",
                        "one_page": "",
                        "ten_page": "-12.9%",
                        "sixteen_page": "",
                    }
                ],
                style_header=TABLE_HEADER,
                style_cell=TABLE_CELL,
                style_data=TABLE_DATA,
                style_data_conditional=TABLE_DATA_CONDITIONAL,
                style_table=TABLE_WRAP,
            ),
            html.P(
                "Individual contributions overlap (they optimize adjacent stages of the same pipeline), "
                "so they don't sum to the cumulative total. Cumulative measured through the real production path: "
                "uvicorn -> FastAPI -> POST /general/v0/general with strategy=hi_res. "
                "Note how #1505 has 4x the impact on the 1-page doc vs. the 16-page doc — "
                "because that single page is table-dense and OCR-heavy. Conversely, #1503 scales "
                "with page count because it optimizes a per-page operation (render format). "
                "This is why per-document workload depends on content, not page count.",
                style={
                    "color": LIGHT_GRAY,
                    "fontSize": "12px",
                    "marginTop": "12px",
                },
            ),
            section("Benchmark Environment"),
            dash_table.DataTable(
                columns=[
                    {"name": "Parameter", "id": "param"},
                    {"name": "Value", "id": "value"},
                ],
                data=[
                    {
                        "param": "VM",
                        "value": "Azure Standard_E4s_v5 (4 vCPU, 32 GB RAM, non-burstable)",
                    },
                    {"param": "OS", "value": "Ubuntu 24.04 LTS"},
                    {"param": "Python", "value": "3.12"},
                    {
                        "param": "CPU Pinning",
                        "value": "taskset -c 0 (simulates production 1-CPU resource request / CFS quota)",
                    },
                    {
                        "param": "Latency",
                        "value": "pytest-benchmark pedantic (5 rounds, 1 warmup, median reported, <0.4% stddev)",
                    },
                    {
                        "param": "Memory",
                        "value": "psutil process-tree RSS via FastAPI endpoint (uvicorn -> POST /general/v0/general)",
                    },
                    {
                        "param": "Profiling",
                        "value": "cProfile + memray --native for per-function breakdown",
                    },
                    {
                        "param": "Baseline",
                        "value": "main (glibc, 4 OCR workers via os.cpu_count)",
                    },
                    {
                        "param": "Current",
                        "value": "full stack + jemalloc opt-in (serial OCR via cgroup-aware CPU detection)",
                    },
                    {
                        "param": "Production Target",
                        "value": "1-CPU resource request / 32 GB limit -> 4 GB recommended",
                    },
                ],
                style_header=TABLE_HEADER,
                style_cell=TABLE_CELL,
                style_data=TABLE_DATA,
                style_data_conditional=TABLE_DATA_CONDITIONAL,
                style_table=TABLE_WRAP,
            ),
            # ── Methodology Notes ──
            card(
                [
                    html.H3(
                        "Methodology Notes",
                        style={
                            "fontSize": "16px",
                            "fontWeight": "700",
                            "color": ACCENT,
                            "margin": "0 0 16px",
                        },
                    ),
                    html.Div(
                        [
                            _method_row(
                                "Why non-burstable?",
                                "B-series VMs use credit-based CPU throttling — "
                                "once credits deplete, CPU performance drops to a "
                                "baseline fraction. E4s_v5 guarantees consistent "
                                "clock speed with no noisy-neighbor variance, so "
                                "benchmark results are reproducible.",
                            ),
                            _method_row(
                                "Why CPU pinning?",
                                "Production pods have a 1-CPU CFS quota. taskset -c 0 "
                                "pins the benchmark process to a single core, matching "
                                "the scheduler behaviour pods actually experience. "
                                "Without pinning, the kernel can migrate the process "
                                "across cores, introducing L1/L2 cache invalidation "
                                "noise that doesn't exist in production.",
                            ),
                            _method_row(
                                "Why pedantic mode?",
                                "pytest-benchmark's pedantic mode disables adaptive "
                                "iteration counts and runs exactly the configured "
                                "rounds. This gives us deterministic measurement — "
                                "same rounds, same conditions, every run. Combined "
                                "with median reporting, up to 2 of 5 rounds can be "
                                "outliers without affecting the result.",
                            ),
                            _method_row(
                                "Why warmup?",
                                "The discarded warmup round absorbs three first-run "
                                "costs: ONNX model JIT and session creation, page "
                                "cache warming for the PDF test file, and OCR/pdfium "
                                "process pool initialization. Without it, the first "
                                "measured round is 10-30% slower than steady state.",
                            ),
                            _method_row(
                                "Why A/B/A validation?",
                                "Every latency improvement is validated with an A/B/A "
                                "pattern: run optimization, then baseline, then "
                                "optimization again. If A1 and A2 agree, the delta is "
                                "real and not thermal drift or background load. If A2 "
                                "degrades toward B, the result is discarded.",
                            ),
                            _method_row(
                                "Why process-tree RSS?",
                                "psutil's process-tree RSS captures memory from the "
                                "main process and all child processes (OCR workers, "
                                "pdfium subprocesses). Single-process RSS would miss "
                                "the worker pool memory that's the root cause of the "
                                "high memory limit.",
                            ),
                            _method_row(
                                "Why separate profiling runs?",
                                "cProfile and memray instrument every function call "
                                "and allocation, adding 2-5x overhead. Running them "
                                "during benchmark rounds would inflate latency and "
                                "distort memory measurements (observer effect). "
                                "Profiling runs identify hotspots; benchmark runs "
                                "measure impact.",
                            ),
                        ]
                    ),
                ],
                marginBottom="24px",
            ),
        ],
    )


# ── App ──────────────────────────────────────────────────────────────────────

app = Dash(
    __name__,
    meta_tags=[
        {"name": "viewport", "content": "width=device-width, initial-scale=1"},
        {
            "property": "og:title",
            "content": "Unstructured x Codeflash — Engagement Report",
        },
        {
            "property": "og:description",
            "content": "Performance optimization across 4 repos: 52% memory reduction, 12.9% latency improvement, 24 PRs merged",
        },
    ],
    suppress_callback_exceptions=True,
)
app.title = "Unstructured x Codeflash — Engagement Report"

app.index_string = """<!DOCTYPE html>
<html>
<head>
    {%metas%}
    <title>{%title%}</title>
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;600;700;800&family=JetBrains+Mono:wght@400;600;700&display=swap" rel="stylesheet">
    {%favicon%}
    {%css%}
    <style>
        .dash-table-container .dash-cell a,
        .dash-table-container .cell-markdown a,
        .dash-table-container a,
        .dash-spreadsheet a { color: #60a5fa !important; text-decoration: none !important; }
        .dash-table-container a:hover,
        .dash-spreadsheet a:hover { text-decoration: underline !important; }
    </style>
</head>
<body>
    {%app_entry%}
    <footer>
        {%config%}
        {%scripts%}
        {%renderer%}
    </footer>
</body>
</html>"""


def _tl_node(
    number,
    title,
    dates,
    duration,
    status,
    deliverables,
    color,
    *,
    dependencies=None,
    is_last=False,
    concurrent_with=None,
):
    """Single node in the vertical timeline."""
    status_colors = {
        "Completed": GREEN,
        "Ready to Start": AMBER,
        "Proposed": ACCENT,
    }
    sc = status_colors.get(status, ACCENT)
    filled = status == "Completed"

    dot = html.Div(
        style={
            "width": "16px",
            "height": "16px",
            "borderRadius": "50%",
            "background": color if filled else "transparent",
            "border": f"3px solid {color}",
            "position": "relative",
            "zIndex": "2",
            "flexShrink": "0",
        },
    )

    connector = html.Div(
        style={
            "width": "2px",
            "flexGrow": "1",
            "background": f"linear-gradient({color}, {CARD_BORDER})"
            if not is_last
            else "transparent",
            "margin": "4px auto 0",
            "minHeight": "0" if is_last else "20px",
        },
    )

    phase_card = html.Div(
        [
            html.Div(
                style={
                    "display": "flex",
                    "justifyContent": "space-between",
                    "alignItems": "center",
                    "marginBottom": "8px",
                },
                children=[
                    html.Div(
                        [
                            html.Span(
                                f"Phase {number}",
                                style={
                                    "fontSize": "11px",
                                    "fontWeight": "700",
                                    "color": color,
                                    "fontFamily": MONO,
                                    "letterSpacing": "0.08em",
                                    "textTransform": "uppercase",
                                },
                            ),
                        ],
                    ),
                    html.Span(
                        status,
                        style={
                            "padding": "2px 10px",
                            "borderRadius": "999px",
                            "fontSize": "10px",
                            "fontWeight": "700",
                            "background": sc if filled else "transparent",
                            "color": DARK if filled else sc,
                            "border": f"1px solid {sc}",
                        },
                    ),
                ],
            ),
            html.Div(
                title,
                style={
                    "fontSize": "17px",
                    "fontWeight": "700",
                    "color": WHITE,
                    "marginBottom": "6px",
                },
            ),
            html.Div(
                style={
                    "display": "flex",
                    "gap": "16px",
                    "marginBottom": "12px",
                    "flexWrap": "wrap",
                },
                children=[
                    html.Span(
                        dates,
                        style={
                            "fontSize": "13px",
                            "fontWeight": "600",
                            "color": SLATE,
                            "fontFamily": MONO,
                        },
                    ),
                    html.Span(
                        f"\u00b7  {duration}",
                        style={"fontSize": "13px", "color": LIGHT_GRAY},
                    ),
                ],
            ),
            *(
                [
                    html.Div(
                        [
                            html.Span("\u21b3 ", style={"color": AMBER}),
                            html.Span(
                                dependencies,
                                style={
                                    "color": AMBER,
                                    "fontSize": "12px",
                                },
                            ),
                        ],
                        style={"marginBottom": "12px"},
                    )
                ]
                if dependencies
                else []
            ),
            *(
                [
                    html.Div(
                        [
                            html.Span("\u2194 ", style={"color": LIGHT_GRAY}),
                            html.Span(
                                f"Runs parallel with Phase {concurrent_with}",
                                style={
                                    "color": LIGHT_GRAY,
                                    "fontSize": "12px",
                                },
                            ),
                        ],
                        style={"marginBottom": "12px"},
                    )
                ]
                if concurrent_with
                else []
            ),
            html.Div(
                style={
                    "paddingTop": "12px",
                    "borderTop": f"1px solid {CARD_BORDER}",
                },
                children=[
                    html.Ul(
                        [
                            html.Li(
                                d,
                                style={
                                    "fontSize": "13px",
                                    "color": GRAY,
                                    "lineHeight": "1.7",
                                    "paddingLeft": "4px",
                                },
                            )
                            for d in deliverables
                        ],
                        style={"paddingLeft": "16px", "margin": "0"},
                    ),
                ],
            ),
        ],
        style={
            **CARD,
            "borderLeft": f"3px solid {color}",
            "marginLeft": "20px",
            "flex": "1 1 0%",
        },
    )

    return html.Div(
        style={
            "display": "flex",
            "gap": "0",
            "alignItems": "stretch",
        },
        children=[
            html.Div(
                style={
                    "display": "flex",
                    "flexDirection": "column",
                    "alignItems": "center",
                    "width": "16px",
                    "flexShrink": "0",
                    "paddingTop": "18px",
                },
                children=[dot, connector],
            ),
            html.Div(
                phase_card,
                style={
                    "flex": "1 1 0%",
                    "paddingBottom": "0" if is_last else "20px",
                },
            ),
        ],
    )


def _tl_gap(label):
    """Visual gap indicator between phases (e.g. '1 week buffer')."""
    return html.Div(
        style={
            "display": "flex",
            "gap": "0",
            "alignItems": "stretch",
        },
        children=[
            html.Div(
                style={
                    "display": "flex",
                    "flexDirection": "column",
                    "alignItems": "center",
                    "width": "16px",
                    "flexShrink": "0",
                },
                children=[
                    html.Div(
                        style={
                            "width": "2px",
                            "height": "100%",
                            "background": CARD_BORDER,
                            "margin": "0 auto",
                            "borderLeft": f"2px dashed {CARD_BORDER}",
                            "minHeight": "40px",
                        }
                    ),
                ],
            ),
            html.Div(
                html.Span(
                    label,
                    style={
                        "fontSize": "11px",
                        "fontWeight": "600",
                        "color": LIGHT_GRAY,
                        "fontFamily": MONO,
                        "letterSpacing": "0.05em",
                    },
                ),
                style={
                    "marginLeft": "20px",
                    "display": "flex",
                    "alignItems": "center",
                },
            ),
        ],
    )


def _timeline_content():
    """Inner content for the timeline view — reused by standalone route and tab."""
    return [
        section("Vertical Optimization Roadmap"),
        html.Div(
            style={"position": "relative"},
            children=[
                _tl_node(
                    "1",
                    "Core-Product Optimization",
                    "Feb 27 \u2192 Apr 14",
                    "7 weeks",
                    "Completed",
                    deliverables=[
                        "24 PRs merged across 5 repos, 354 tests passing",
                        "Memory: 32 GB \u2192 4 GB K8s pod allocation (\u221287.5%)",
                        "Latency: \u221212.9% end-to-end (50.8s \u2192 44.3s)",
                        "Pod density: 5 \u2192 46 per node (9.2x improvement)",
                        "Cost: ~$8,900/mo savings on core-product compute",
                    ],
                    color=GREEN,
                ),
                _tl_node(
                    "1b",
                    "Platform-Libs CI/CD Migration",
                    "Apr 9 \u2192 Apr 14",
                    "1 week",
                    "Ready to Start",
                    deliverables=[
                        [
                            "POC live in ",
                            html.A(
                                "ci-unified-workflows",
                                href="https://github.com/Unstructured-IO/github-workflows/tree/ci-unified-workflows",
                                target="_blank",
                                style={
                                    "color": BLUE,
                                    "textDecoration": "none",
                                },
                            ),
                            " branch and ",
                            html.A(
                                "platform-libs#667",
                                href="https://github.com/Unstructured-IO/platform-libs/pull/667",
                                target="_blank",
                                style={
                                    "color": BLUE,
                                    "textDecoration": "none",
                                },
                            ),
                        ],
                        "CI runners: ~189 \u2192 ~27 per PR (\u221285% billed minutes)",
                        "Same GitHub Actions \u2014 fewer workflow permutations, not a platform migration",
                    ],
                    color=GREEN,
                ),
                _tl_gap("1 week buffer"),
                _tl_node(
                    "2",
                    "Developer Experience & CI/CD",
                    "Apr 21 \u2192 May 2",
                    "2 weeks",
                    "Proposed",
                    deliverables=[
                        "uv workspace migration for core-product (building on platform-libs POC)",
                        "Single lockfile replacing fragmented dependency install steps",
                        "CI pipeline modernization: wall time from ~4 min to ~1 min",
                        "Developer onboarding documentation and migration guide",
                    ],
                    concurrent_with="4",
                    color=BLUE,
                ),
                _tl_node(
                    "3",
                    "Platform API Speed & Stability",
                    "May 5 \u2192 May 16",
                    "2 weeks",
                    "Proposed",
                    deliverables=[
                        "Pod cold start profiling and reduction (image snapshotting, pre-warming)",
                        "Import time audit for each pipeline step",
                        "End-to-end throughput optimization (concurrent requests, batch processing)",
                        "Latency benchmarks for the agentic tool endpoint",
                        "Reliability improvements: error handling, retry logic, circuit breakers",
                    ],
                    dependencies="Builds on Phase 2 CI improvements",
                    color=ACCENT,
                ),
                _tl_node(
                    "4",
                    "Security Hardening",
                    "Apr 21 \u2192 May 2",
                    "2 weeks",
                    "Proposed",
                    deliverables=[
                        "Lockfile bypass remediation (eliminate uv pip install vectors)",
                        "Dependency confusion audit on internal package names",
                        "Supply chain hardening: pinned hashes, namespace reservation",
                        "Integration with existing CVE scanning workflows",
                    ],
                    concurrent_with="2",
                    color=PURPLE,
                ),
                _tl_node(
                    "5",
                    "Infrastructure Cost Discovery",
                    "May 19 \u2192 Jun 27",
                    "6 weeks",
                    "Proposed",
                    deliverables=[
                        "Full Azure spend audit ($100K/mo staging + production + development)",
                        "Dedicated instance cost mapping and optimization targets",
                        "Right-sizing recommendations across all service tiers",
                        "Optimization roadmap with projected savings by workload",
                    ],
                    dependencies="After Phases 2\u20134 deliver optimization data",
                    color=AMBER,
                    is_last=True,
                ),
            ],
        ),
        # ── Investment Summary ──
        html.Div(
            [
                html.Div(
                    [
                        html.Span(
                            "Investment Summary",
                            style={
                                "fontSize": "13px",
                                "fontWeight": "700",
                                "color": ACCENT,
                                "letterSpacing": "0.03em",
                            },
                        ),
                    ],
                    style={"marginBottom": "16px"},
                ),
                html.Div(
                    style={
                        "display": "flex",
                        "gap": "20px",
                        "flexWrap": "wrap",
                        "marginBottom": "16px",
                    },
                    children=[
                        html.Div(
                            [
                                html.Div(
                                    "~4 months",
                                    style={
                                        "fontSize": "24px",
                                        "fontWeight": "800",
                                        "color": SLATE,
                                        "lineHeight": "1",
                                    },
                                ),
                                html.Div(
                                    "total timeline (with overlap)",
                                    style={
                                        "fontSize": "13px",
                                        "color": GRAY,
                                        "marginTop": "6px",
                                    },
                                ),
                            ],
                            style={"flex": "1 1 0%", "minWidth": "140px"},
                        ),
                        html.Div(
                            [
                                html.Div(
                                    "5 phases",
                                    style={
                                        "fontSize": "24px",
                                        "fontWeight": "800",
                                        "color": ACCENT,
                                        "lineHeight": "1",
                                    },
                                ),
                                html.Div(
                                    "1 completed, 4 proposed",
                                    style={
                                        "fontSize": "13px",
                                        "color": GRAY,
                                        "marginTop": "6px",
                                    },
                                ),
                            ],
                            style={"flex": "1 1 0%", "minWidth": "140px"},
                        ),
                        html.Div(
                            [
                                html.Div(
                                    "$107K/yr",
                                    style={
                                        "fontSize": "24px",
                                        "fontWeight": "800",
                                        "color": GREEN,
                                        "lineHeight": "1",
                                        "fontFamily": MONO,
                                    },
                                ),
                                html.Div(
                                    "already realized (Phase 1)",
                                    style={
                                        "fontSize": "13px",
                                        "color": GRAY,
                                        "marginTop": "6px",
                                    },
                                ),
                            ],
                            style={"flex": "1 1 0%", "minWidth": "140px"},
                        ),
                    ],
                ),
                html.P(
                    "Phase 1 has already paid for itself. Phases 2\u20135 extend "
                    "the same proven approach across the platform \u2014 with speed "
                    "and stability as the primary focus, and cost savings as a "
                    "natural byproduct.",
                    style={
                        "color": GRAY,
                        "fontSize": "14px",
                        "lineHeight": "1.7",
                        "margin": "0",
                        "paddingTop": "16px",
                        "borderTop": f"1px solid {CARD_BORDER}",
                    },
                ),
            ],
            style={
                **CARD,
                "marginTop": "32px",
                "borderLeft": f"4px solid {GREEN}",
            },
        ),
    ]


def build_timeline_view():
    """Standalone timeline at /timeline — full page with header and footer."""
    return html.Div(
        style={
            "background": BG,
            "minHeight": "100vh",
            "fontFamily": FONT,
        },
        children=[
            html.Div(
                style={
                    "maxWidth": "900px",
                    "margin": "0 auto",
                    "padding": "48px 32px 80px",
                },
                children=[
                    # ── Header ──
                    html.Div(
                        [
                            html.Div(
                                _logo_lockup(),
                                style={"marginBottom": "20px"},
                            ),
                            html.H1(
                                "Proposed Engagement Timeline",
                                style={
                                    "fontSize": "32px",
                                    "fontWeight": "800",
                                    "color": WHITE,
                                    "letterSpacing": "-0.02em",
                                    "margin": "0 0 8px",
                                    "fontFamily": FONT,
                                },
                            ),
                            html.P(
                                "Phased roadmap for continued performance, reliability, "
                                "and security work across the Unstructured platform.",
                                style={
                                    "fontSize": "16px",
                                    "color": GRAY,
                                    "margin": "0 0 16px",
                                    "lineHeight": "1.6",
                                },
                            ),
                            html.Div(
                                "April 2026  \u00b7  5 phases  \u00b7  ~4 months total",
                                style={
                                    "fontSize": "13px",
                                    "color": LIGHT_GRAY,
                                    "fontFamily": MONO,
                                },
                            ),
                        ],
                        style={
                            "marginBottom": "48px",
                            "paddingBottom": "32px",
                            "borderBottom": f"1px solid {CARD_BORDER}",
                        },
                    ),
                    *_timeline_content(),
                    # ── Footer ──
                    html.Div(
                        style={
                            "textAlign": "center",
                            "marginTop": "64px",
                            "paddingTop": "24px",
                            "borderTop": f"1px solid {CARD_BORDER}",
                        },
                        children=[
                            html.Div(
                                _logo_lockup("16px", "20px", "10px", "3px"),
                                style={
                                    "display": "flex",
                                    "justifyContent": "center",
                                    "marginBottom": "4px",
                                },
                            ),
                            html.P(
                                "Proposed Engagement Timeline — April 2026",
                                style={
                                    "color": LIGHT_GRAY,
                                    "fontSize": "13px",
                                    "margin": "0",
                                },
                            ),
                        ],
                    ),
                ],
            ),
        ],
    )


def _build_timeline_tab():
    """Timeline as a tab view (hidden by default)."""
    return html.Div(
        id="timeline-view",
        style={"display": "none"},
        children=_timeline_content(),
    )


def _main_layout():
    """The full three-tab report (default at /)."""
    return html.Div(
        style={
            "background": BG,
            "minHeight": "100vh",
            "fontFamily": FONT,
            "position": "relative",
        },
        children=[
            # ── Grid overlay ──
            html.Div(style=GRID_OVERLAY),
            # ── Hero ──
            html.Div(
                style={
                    "background": f"linear-gradient(135deg, {BG} 0%, #1c1917 50%, {BG} 100%)",
                    "padding": "60px 24px 52px",
                    "textAlign": "center",
                    "borderBottom": f"1px solid {CARD_BORDER}",
                    "position": "relative",
                    "zIndex": "1",
                },
                children=[
                    # ── Logo lockup: Codeflash x Unstructured ──
                    html.Div(
                        _logo_lockup("32px", "36px", "20px", "6px"),
                        style={
                            "display": "flex",
                            "justifyContent": "center",
                            "marginBottom": "24px",
                        },
                    ),
                    html.H1(
                        "Engagement Report",
                        style={
                            "color": WHITE,
                            "fontSize": "36px",
                            "fontWeight": "800",
                            "margin": "0",
                            "letterSpacing": "-0.02em",
                            "fontFamily": FONT,
                        },
                    ),
                    html.P(
                        "Performance optimization across the Unstructured platform",
                        style={
                            "color": GRAY,
                            "fontSize": "17px",
                            "margin": "12px auto 0",
                            "maxWidth": "700px",
                        },
                    ),
                    html.Div(
                        style={
                            "marginTop": "24px",
                            "display": "flex",
                            "justifyContent": "center",
                            "gap": "24px",
                            "flexWrap": "wrap",
                        },
                        children=[
                            html.Span(
                                "March - April 2026",
                                style={
                                    "color": LIGHT_GRAY,
                                    "fontSize": "13px",
                                },
                            ),
                            html.Span("|", style={"color": LIGHT_GRAY}),
                            html.Span(
                                "24 PRs merged",
                                style={
                                    "color": LIGHT_GRAY,
                                    "fontSize": "13px",
                                },
                            ),
                            html.Span("|", style={"color": LIGHT_GRAY}),
                            html.Span(
                                "5 PRs in progress",
                                style={
                                    "color": LIGHT_GRAY,
                                    "fontSize": "13px",
                                },
                            ),
                        ],
                    ),
                ],
            ),
            # ── Content ──
            html.Div(
                style={
                    "maxWidth": "960px",
                    "margin": "0 auto",
                    "padding": "0 24px 80px",
                    "position": "relative",
                    "zIndex": "1",
                },
                children=[
                    *_above_fold_content(negative_margin=True),
                    # ── View Toggle ──
                    html.Div(
                        style={
                            "display": "flex",
                            "justifyContent": "center",
                            "margin": "40px 0 8px",
                        },
                        children=[
                            html.Div(
                                style={
                                    "display": "inline-flex",
                                    "background": CARD_BG,
                                    "borderRadius": "12px",
                                    "padding": "4px",
                                    "border": f"1px solid {CARD_BORDER}",
                                },
                                children=[
                                    html.Button(
                                        "Executive Summary",
                                        id="btn-jpc",
                                        n_clicks=1,
                                        style=_TAB_BTN_ACTIVE,
                                    ),
                                    html.Button(
                                        "Engineering Details",
                                        id="btn-team",
                                        n_clicks=0,
                                        style=_TAB_BTN_STYLE,
                                    ),
                                    html.Button(
                                        "Full Detail",
                                        id="btn-detail",
                                        n_clicks=0,
                                        style=_TAB_BTN_STYLE,
                                    ),
                                    html.Button(
                                        "Timeline",
                                        id="btn-timeline",
                                        n_clicks=0,
                                        style=_TAB_BTN_STYLE,
                                    ),
                                ],
                            ),
                        ],
                    ),
                    # ═════════════════════════════════════════════════════════════════════
                    # VIEW 1: EXECUTIVE SUMMARY (JPC)
                    # High-level engagement summary for VP Engineering
                    # ═════════════════════════════════════════════════════════════════════
                    _build_jpc_tab(),
                    # ═════════════════════════════════════════════════════════════════════
                    # VIEW 2: ENGINEERING TEAM
                    # For Crag's team — what changed, in plain language, with commit refs
                    # ═════════════════════════════════════════════════════════════════════
                    build_team_view(),
                    # ═════════════════════════════════════════════════════════════════════
                    # VIEW 3: FULL DETAIL
                    # Per-PR inventory, benchmarks, methodology
                    # ═════════════════════════════════════════════════════════════════════
                    build_detail_view(),
                    # ═════════════════════════════════════════════════════════════════════
                    # VIEW 4: TIMELINE
                    # Proposed engagement phases with Gantt chart
                    # ═════════════════════════════════════════════════════════════════════
                    _build_timeline_tab(),
                    # ── Footer (always visible) ──
                    html.Div(
                        style={
                            "textAlign": "center",
                            "marginTop": "64px",
                            "paddingTop": "24px",
                            "borderTop": f"1px solid {CARD_BORDER}",
                        },
                        children=[
                            html.Div(
                                _logo_lockup("16px", "20px", "10px", "3px"),
                                style={
                                    "display": "flex",
                                    "justifyContent": "center",
                                    "marginBottom": "4px",
                                },
                            ),
                            html.P(
                                "Engagement Report — April 2026",
                                style={
                                    "color": LIGHT_GRAY,
                                    "fontSize": "13px",
                                    "margin": "0",
                                },
                            ),
                        ],
                    ),
                ],
            ),
        ],
    )


def _serve_layout():
    """Return fresh layout on each page load (Dash best practice)."""
    return html.Div(
        [
            dcc.Location(id="url", refresh=False),
            html.Div(id="page-content"),
        ]
    )


app.layout = _serve_layout


@app.callback(Output("page-content", "children"), Input("url", "pathname"))
def _route(pathname):
    if pathname == "/jpc":
        return build_jpc_view()
    if pathname == "/timeline":
        return build_timeline_view()
    return _main_layout()


# ── Toggle callback ──
clientside_callback(
    """
    function(jpc_c, team_c, detail_c, timeline_c) {
        jpc_c = jpc_c || 0;
        team_c = team_c || 0;
        detail_c = detail_c || 0;
        timeline_c = timeline_c || 0;
        var base = {
            "padding": "10px 24px", "border": "none", "borderRadius": "8px",
            "cursor": "pointer", "fontSize": "14px", "fontWeight": "600",
            "fontFamily": "'Inter', system-ui, -apple-system, sans-serif",
            "transition": "all 0.2s"
        };
        var active = Object.assign({}, base, {"background": "#ffd227", "color": "#09090b"});
        var inactive = Object.assign({}, base, {"background": "transparent", "color": "#a1a1aa"});
        var show = {"display": "block"};
        var hide = {"display": "none"};
        var mx = Math.max(jpc_c, team_c, detail_c, timeline_c);
        if (timeline_c === mx && timeline_c > 0)
            return [hide, hide, hide, show, inactive, inactive, inactive, active];
        if (detail_c === mx && detail_c > 0)
            return [hide, hide, show, hide, inactive, inactive, active, inactive];
        if (team_c === mx && team_c > 0)
            return [hide, show, hide, hide, inactive, active, inactive, inactive];
        return [show, hide, hide, hide, active, inactive, inactive, inactive];
    }
    """,
    Output("jpc-view", "style"),
    Output("team-view", "style"),
    Output("detail-view", "style"),
    Output("timeline-view", "style"),
    Output("btn-jpc", "style"),
    Output("btn-team", "style"),
    Output("btn-detail", "style"),
    Output("btn-timeline", "style"),
    Input("btn-jpc", "n_clicks"),
    Input("btn-team", "n_clicks"),
    Input("btn-detail", "n_clicks"),
    Input("btn-timeline", "n_clicks"),
)

server = app.server

if __name__ == "__main__":
    app.run(
        debug=os.getenv("DASH_DEBUG", "1") == "1",
        port=int(os.getenv("PORT", "8050")),
    )
