mirror of
https://github.com/codeflash-ai/codeflash-agent.git
synced 2026-05-04 18:25:19 +00:00
Add /timeline route with proposed engagement roadmap
- Gantt chart with 5 phases: Core-Product (completed), DevEx & CI/CD, Platform API, Security Hardening (concurrent with DevEx), Cost Discovery - Phase detail cards with duration, dates, deliverables, dependencies - DevEx as Phase 2 (POC already done, sets up faster CI for Phase 3) - Security runs concurrent with Phase 2 (uv workspace enables lockfile) - Investment summary with ~5 month total timeline - Fixed x-axis range and removed rangeslider for clean proportional bars
This commit is contained in:
Kevin Turcios
parent
90091ccc12
commit
b20c05a799
1 changed files with 601 additions and 0 deletions
|
|
@ -3928,6 +3928,605 @@ app.index_string = """<!DOCTYPE html>
|
|||
</body>
|
||||
</html>"""
|
||||
|
||||
def _timeline_phase(number, title, duration, start, end, status, deliverables,
|
||||
dependencies=None, color=ACCENT):
|
||||
"""A single phase card for the timeline view."""
|
||||
status_colors = {
|
||||
"Completed": GREEN,
|
||||
"Ready to Start": AMBER,
|
||||
"Proposed": ACCENT,
|
||||
}
|
||||
sc = status_colors.get(status, ACCENT)
|
||||
return html.Div(
|
||||
[
|
||||
html.Div(
|
||||
style={
|
||||
"display": "flex",
|
||||
"justifyContent": "space-between",
|
||||
"alignItems": "flex-start",
|
||||
"marginBottom": "12px",
|
||||
},
|
||||
children=[
|
||||
html.Div(
|
||||
[
|
||||
html.Span(
|
||||
f"Phase {number}",
|
||||
style={
|
||||
"fontSize": "12px",
|
||||
"fontWeight": "700",
|
||||
"color": color,
|
||||
"fontFamily": MONO,
|
||||
"letterSpacing": "0.05em",
|
||||
},
|
||||
),
|
||||
html.Div(
|
||||
title,
|
||||
style={
|
||||
"fontSize": "18px",
|
||||
"fontWeight": "700",
|
||||
"color": WHITE,
|
||||
"marginTop": "4px",
|
||||
},
|
||||
),
|
||||
],
|
||||
),
|
||||
html.Div(
|
||||
[
|
||||
html.Span(
|
||||
status,
|
||||
style={
|
||||
"padding": "3px 12px",
|
||||
"borderRadius": "999px",
|
||||
"fontSize": "11px",
|
||||
"fontWeight": "700",
|
||||
"background": sc,
|
||||
"color": DARK,
|
||||
},
|
||||
),
|
||||
],
|
||||
),
|
||||
],
|
||||
),
|
||||
html.Div(
|
||||
style={
|
||||
"display": "flex",
|
||||
"gap": "24px",
|
||||
"marginBottom": "16px",
|
||||
"flexWrap": "wrap",
|
||||
},
|
||||
children=[
|
||||
html.Div(
|
||||
[
|
||||
html.Span("Duration: ", style={"color": LIGHT_GRAY, "fontSize": "13px"}),
|
||||
html.Span(duration, style={"color": SLATE, "fontSize": "13px", "fontWeight": "600"}),
|
||||
],
|
||||
),
|
||||
html.Div(
|
||||
[
|
||||
html.Span("Timeline: ", style={"color": LIGHT_GRAY, "fontSize": "13px"}),
|
||||
html.Span(f"{start} \u2192 {end}", style={
|
||||
"color": SLATE, "fontSize": "13px", "fontWeight": "600",
|
||||
"fontFamily": MONO,
|
||||
}),
|
||||
],
|
||||
),
|
||||
],
|
||||
),
|
||||
*(
|
||||
[html.Div(
|
||||
[
|
||||
html.Span("Depends on: ", style={"color": LIGHT_GRAY, "fontSize": "13px"}),
|
||||
html.Span(dependencies, style={"color": AMBER, "fontSize": "13px", "fontWeight": "600"}),
|
||||
],
|
||||
style={"marginBottom": "16px"},
|
||||
)] if dependencies else []
|
||||
),
|
||||
html.Div(
|
||||
style={
|
||||
"paddingTop": "16px",
|
||||
"borderTop": f"1px solid {CARD_BORDER}",
|
||||
},
|
||||
children=[
|
||||
html.Div(
|
||||
"Key Deliverables",
|
||||
style={
|
||||
"fontSize": "12px",
|
||||
"fontWeight": "700",
|
||||
"color": ACCENT,
|
||||
"letterSpacing": "0.05em",
|
||||
"marginBottom": "8px",
|
||||
},
|
||||
),
|
||||
html.Ul(
|
||||
[html.Li(d, style={"fontSize": "13px", "color": GRAY, "lineHeight": "1.8"})
|
||||
for d in deliverables],
|
||||
style={"paddingLeft": "20px", "margin": "0"},
|
||||
),
|
||||
],
|
||||
),
|
||||
],
|
||||
style={
|
||||
**CARD,
|
||||
"marginBottom": "16px",
|
||||
"borderLeft": f"4px solid {color}",
|
||||
},
|
||||
)
|
||||
|
||||
|
||||
def _make_gantt():
|
||||
"""Build a horizontal Gantt chart for the engagement timeline."""
|
||||
phases = [
|
||||
("Core-Product\nOptimization", "2026-02-27", "2026-04-14", GREEN, "Completed"),
|
||||
("Developer Experience\n& CI/CD", "2026-05-05", "2026-05-16", BLUE, "Proposed"),
|
||||
("Platform API\nSpeed & Stability", "2026-05-19", "2026-05-30", ACCENT, "Proposed"),
|
||||
("Security\nHardening", "2026-05-05", "2026-05-16", PURPLE, "Proposed"),
|
||||
("Infrastructure\nCost Discovery", "2026-06-02", "2026-07-11", AMBER, "Proposed"),
|
||||
]
|
||||
|
||||
fig = go.Figure()
|
||||
|
||||
for i, (label, start, end, color, status) in enumerate(phases):
|
||||
fig.add_trace(go.Bar(
|
||||
y=[label],
|
||||
x=[end],
|
||||
base=[start],
|
||||
orientation="h",
|
||||
marker=dict(
|
||||
color=color,
|
||||
opacity=1.0 if status == "Completed" else 0.7,
|
||||
line=dict(width=0),
|
||||
),
|
||||
hovertemplate=f"<b>{label.replace(chr(10), ' ')}</b><br>"
|
||||
f"{start} \u2192 {end}<br>"
|
||||
f"Status: {status}<extra></extra>",
|
||||
showlegend=False,
|
||||
))
|
||||
|
||||
# Today marker
|
||||
fig.add_shape(
|
||||
type="line",
|
||||
x0="2026-04-16", x1="2026-04-16",
|
||||
y0=0, y1=1,
|
||||
yref="paper",
|
||||
line=dict(color=RED, width=2, dash="dot"),
|
||||
)
|
||||
fig.add_annotation(
|
||||
x="2026-04-16", y=1.08, yref="paper",
|
||||
text="Today", showarrow=False,
|
||||
font=dict(color=RED, size=12, family=FONT),
|
||||
)
|
||||
|
||||
fig.update_layout(
|
||||
barmode="overlay",
|
||||
bargap=0.35,
|
||||
plot_bgcolor="rgba(0,0,0,0)",
|
||||
paper_bgcolor="rgba(0,0,0,0)",
|
||||
font=dict(family=FONT, color=GRAY, size=13),
|
||||
margin=dict(l=20, r=20, t=40, b=20),
|
||||
height=300,
|
||||
xaxis=dict(
|
||||
type="date",
|
||||
range=["2026-02-15", "2026-07-25"],
|
||||
gridcolor="rgba(63,63,70,0.3)",
|
||||
tickformat="%b %d",
|
||||
dtick="M1",
|
||||
showline=False,
|
||||
tickfont=dict(size=12, color=LIGHT_GRAY),
|
||||
rangeslider=dict(visible=False),
|
||||
),
|
||||
yaxis=dict(
|
||||
autorange="reversed",
|
||||
showgrid=False,
|
||||
showline=False,
|
||||
tickfont=dict(size=12, color=SLATE),
|
||||
),
|
||||
)
|
||||
return fig
|
||||
|
||||
|
||||
def build_timeline_view():
|
||||
"""Proposed engagement timeline — served at /timeline."""
|
||||
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(
|
||||
style={
|
||||
"display": "flex",
|
||||
"alignItems": "center",
|
||||
"gap": "16px",
|
||||
"marginBottom": "20px",
|
||||
},
|
||||
children=[
|
||||
html.Img(
|
||||
src="/assets/codeflash.svg",
|
||||
style={"height": "24px"},
|
||||
),
|
||||
html.Span(
|
||||
"\u00d7",
|
||||
style={
|
||||
"fontSize": "18px",
|
||||
"fontWeight": "300",
|
||||
"color": LIGHT_GRAY,
|
||||
},
|
||||
),
|
||||
html.Img(
|
||||
src="/assets/unstructured_logo.jpg",
|
||||
style={
|
||||
"height": "28px",
|
||||
"borderRadius": "4px",
|
||||
},
|
||||
),
|
||||
],
|
||||
),
|
||||
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 ~5 months total",
|
||||
style={
|
||||
"fontSize": "13px",
|
||||
"color": LIGHT_GRAY,
|
||||
"fontFamily": MONO,
|
||||
},
|
||||
),
|
||||
],
|
||||
style={
|
||||
"marginBottom": "48px",
|
||||
"paddingBottom": "32px",
|
||||
"borderBottom": f"1px solid {CARD_BORDER}",
|
||||
},
|
||||
),
|
||||
# ── Gantt Chart ──
|
||||
section("Timeline Overview"),
|
||||
card(
|
||||
[
|
||||
dcc.Graph(
|
||||
figure=_make_gantt(),
|
||||
config={"displayModeBar": False},
|
||||
),
|
||||
html.Div(
|
||||
style={
|
||||
"display": "flex",
|
||||
"gap": "20px",
|
||||
"flexWrap": "wrap",
|
||||
"marginTop": "16px",
|
||||
"paddingTop": "16px",
|
||||
"borderTop": f"1px solid {CARD_BORDER}",
|
||||
},
|
||||
children=[
|
||||
html.Div([
|
||||
html.Span("\u25cf ", style={"color": GREEN}),
|
||||
html.Span("Completed", style={"color": GRAY, "fontSize": "13px"}),
|
||||
]),
|
||||
html.Div([
|
||||
html.Span("\u25cf ", style={"color": ACCENT}),
|
||||
html.Span("Proposed", style={"color": GRAY, "fontSize": "13px"}),
|
||||
]),
|
||||
html.Div([
|
||||
html.Span("\u25cf ", style={"color": RED}),
|
||||
html.Span("Today", style={"color": GRAY, "fontSize": "13px"}),
|
||||
]),
|
||||
],
|
||||
),
|
||||
],
|
||||
),
|
||||
# ── Context ──
|
||||
html.Div(
|
||||
[
|
||||
html.Div(
|
||||
[
|
||||
html.Span(
|
||||
"Phasing Rationale",
|
||||
style={
|
||||
"fontSize": "13px",
|
||||
"fontWeight": "700",
|
||||
"color": ACCENT,
|
||||
"letterSpacing": "0.03em",
|
||||
},
|
||||
),
|
||||
],
|
||||
style={"marginBottom": "10px"},
|
||||
),
|
||||
html.P(
|
||||
[
|
||||
"Phase 1 (completed) proved the approach on core-product and "
|
||||
"established trust with the team. Phase 2 (DevEx & CI/CD) starts "
|
||||
"first — the ",
|
||||
html.Span(
|
||||
"platform-libs POC is already done",
|
||||
style={"fontWeight": "700", "color": SLATE},
|
||||
),
|
||||
", so this has the shortest path to production impact. "
|
||||
"It also sets up Phase 3: faster CI pipelines mean faster test "
|
||||
"suite and job feedback, which directly accelerates iteration "
|
||||
"on Platform API optimizations. "
|
||||
"Security runs in parallel with Phase 3. "
|
||||
"Phase 5 (Cost Discovery) starts after the optimization phases "
|
||||
"deliver data points that inform the broader audit.",
|
||||
],
|
||||
style={
|
||||
"color": GRAY,
|
||||
"fontSize": "14px",
|
||||
"lineHeight": "1.7",
|
||||
"margin": "0",
|
||||
},
|
||||
),
|
||||
],
|
||||
style={
|
||||
**CARD,
|
||||
"marginTop": "16px",
|
||||
"marginBottom": "32px",
|
||||
"borderLeft": f"4px solid {ACCENT}",
|
||||
},
|
||||
),
|
||||
# ── Phase Details ──
|
||||
section(
|
||||
"Phase Details",
|
||||
"Scope, deliverables, and dependencies for each engagement.",
|
||||
),
|
||||
_timeline_phase(
|
||||
"1", "Core-Product Optimization", "7 weeks",
|
||||
"Feb 27", "Apr 14", "Completed",
|
||||
deliverables=[
|
||||
"24 PRs merged across 5 repos, 354 tests passing",
|
||||
"Memory: 32 GB \u2192 4 GB K8s pod allocation (-87.5%)",
|
||||
"Latency: -12.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,
|
||||
),
|
||||
_timeline_phase(
|
||||
"2", "Developer Experience & CI/CD", "2 weeks",
|
||||
"May 5", "May 16", "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",
|
||||
],
|
||||
dependencies=None,
|
||||
color=BLUE,
|
||||
),
|
||||
_timeline_phase(
|
||||
"3", "Platform API Speed & Stability", "2 weeks",
|
||||
"May 19", "May 30", "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="Phase 2 (faster CI feedback loop accelerates iteration on API optimizations)",
|
||||
color=ACCENT,
|
||||
),
|
||||
_timeline_phase(
|
||||
"4", "Security Hardening", "2 weeks",
|
||||
"May 5", "May 16", "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",
|
||||
],
|
||||
dependencies="Concurrent with Phase 2 (uv workspace migration enables lockfile enforcement)",
|
||||
color=PURPLE,
|
||||
),
|
||||
_timeline_phase(
|
||||
"5", "Infrastructure Cost Discovery", "6 weeks",
|
||||
"Jun 2", "Jul 11", "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-4 (optimization data informs audit priorities)",
|
||||
|
||||
color=AMBER,
|
||||
),
|
||||
# ── 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(
|
||||
"~5 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", "minWidth": "160px"},
|
||||
),
|
||||
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", "minWidth": "160px"},
|
||||
),
|
||||
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", "minWidth": "160px"},
|
||||
),
|
||||
],
|
||||
),
|
||||
html.P(
|
||||
"Phase 1 has already paid for itself. Phases 2-5 extend "
|
||||
"the same proven approach across the platform — 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}",
|
||||
},
|
||||
),
|
||||
# ── Footer ──
|
||||
html.Div(
|
||||
style={
|
||||
"textAlign": "center",
|
||||
"marginTop": "64px",
|
||||
"paddingTop": "24px",
|
||||
"borderTop": f"1px solid {CARD_BORDER}",
|
||||
},
|
||||
children=[
|
||||
html.Div(
|
||||
style={
|
||||
"display": "flex",
|
||||
"alignItems": "center",
|
||||
"justifyContent": "center",
|
||||
"gap": "10px",
|
||||
"marginBottom": "4px",
|
||||
},
|
||||
children=[
|
||||
html.Img(
|
||||
src="/assets/codeflash.svg",
|
||||
style={"height": "16px"},
|
||||
),
|
||||
html.Span(
|
||||
"\u00d7",
|
||||
style={
|
||||
"fontSize": "13px",
|
||||
"color": LIGHT_GRAY,
|
||||
},
|
||||
),
|
||||
html.Img(
|
||||
src="/assets/unstructured_logo.jpg",
|
||||
style={
|
||||
"height": "20px",
|
||||
"borderRadius": "3px",
|
||||
},
|
||||
),
|
||||
],
|
||||
),
|
||||
html.P(
|
||||
"Proposed Engagement Timeline — April 2026",
|
||||
style={
|
||||
"color": LIGHT_GRAY,
|
||||
"fontSize": "13px",
|
||||
"margin": "0",
|
||||
},
|
||||
),
|
||||
],
|
||||
),
|
||||
],
|
||||
),
|
||||
],
|
||||
)
|
||||
|
||||
|
||||
def _main_layout():
|
||||
"""The full three-tab report (default at /)."""
|
||||
return html.Div(
|
||||
|
|
@ -4221,6 +4820,8 @@ app.layout = html.Div([
|
|||
def _route(pathname):
|
||||
if pathname == "/jpc":
|
||||
return build_jpc_view()
|
||||
if pathname == "/timeline":
|
||||
return build_timeline_view()
|
||||
return _main_layout()
|
||||
|
||||
|
||||
|
|
|
|||
Loading…
Reference in a new issue