From 571dac721dd45392e97751a795ebddcf3e2bbcd2 Mon Sep 17 00:00:00 2001 From: Bryan Helmkamp Date: Mon, 16 Mar 2026 12:04:48 -0400 Subject: [PATCH] Add /roadmap page to marketing site with timeline layout Shipped/Building/Next sections with sample content, vertical timeline, scroll reveal animations, and matching dark factory aesthetic. Linked from top nav and footer on both pages. Co-Authored-By: Claude Opus 4.6 (1M context) --- apps/marketing/src/pages/index.astro | 2 + apps/marketing/src/pages/roadmap.astro | 317 +++++++++++++++++++++++++ 2 files changed, 319 insertions(+) create mode 100644 apps/marketing/src/pages/roadmap.astro diff --git a/apps/marketing/src/pages/index.astro b/apps/marketing/src/pages/index.astro index 04ca2e4e0..b11f06251 100644 --- a/apps/marketing/src/pages/index.astro +++ b/apps/marketing/src/pages/index.astro @@ -52,6 +52,7 @@ const cssExample = `/* All nodes default to fast + ch Docs Changelog + Roadmap
@@ -608,6 +609,7 @@ const cssExample = `/* All nodes default to fast + ch
  • Quick Start
  • Docs
  • Changelog
    • +
  • Roadmap
  • Releases
    • diff --git a/apps/marketing/src/pages/roadmap.astro b/apps/marketing/src/pages/roadmap.astro new file mode 100644 index 000000000..d6cb3728e --- /dev/null +++ b/apps/marketing/src/pages/roadmap.astro @@ -0,0 +1,317 @@ +--- +import Layout from "../layouts/Layout.astro"; + +interface RoadmapItem { + title: string; + description: string; +} + +interface RoadmapSection { + label: string; + status: "shipped" | "building" | "next"; + items: RoadmapItem[]; +} + +const sections: RoadmapSection[] = [ + { + label: "Shipped", + status: "shipped", + items: [ + { + title: "Core workflow engine", + description: + "DOT graph parsing with branching, loops, parallel execution, and conditional routing. Deterministic, diffable, version-controlled.", + }, + { + title: "Multi-model routing", + description: + "CSS-like model stylesheets assign providers per stage by ID, class, or shape. Automatic fallback chains across Anthropic, OpenAI, and Gemini.", + }, + { + title: "Human-in-the-loop", + description: + "Hexagon-shaped approval gates pause for human decisions. Steer running agents mid-turn. Interview steps collect structured input.", + }, + { + title: "Git checkpointing & resume", + description: + "Every stage commits to a Git branch with full metadata. Revert, resume from any checkpoint, or trace every change back to the stage that made it.", + }, + { + title: "Cloud sandboxes", + description: + "Isolated VM execution environments with snapshot-based setup, network controls, and automatic cleanup. SSH in with fabro ssh.", + }, + { + title: "API server & web UI", + description: + "REST API with SSE event streaming and a React dashboard. Queue runs, track progress, and manage workflows at scale.", + }, + { + title: "Automatic retrospectives", + description: + "Each run generates a retro with cost, duration, files touched, and an LLM-written narrative. Workflows improve over time.", + }, + ], + }, + { + label: "Building", + status: "building", + items: [ + { + title: "Workflow marketplace", + description: + "Browse, fork, and publish community workflows. One-command install with dependency resolution and version pinning.", + }, + { + title: "Parallel execution scaling", + description: + "Dynamic fan-out with resource-aware scheduling. Run dozens of sandboxes concurrently with automatic load balancing and cost caps.", + }, + ], + }, + { + label: "Next", + status: "next", + items: [ + { + title: "Team collaboration", + description: + "Shared workflow runs with role-based access. Assign reviewers, track ownership, and coordinate across teams.", + }, + { + title: "Custom tool plugins", + description: + "Extend agent capabilities with your own tool definitions. Package, share, and version tools independently of workflows.", + }, + { + title: "Metrics & cost dashboards", + description: + "Real-time cost tracking, success rates, and performance trends across all runs. Set budgets, alerts, and optimization targets.", + }, + { + title: "Self-hosted cloud", + description: + "Deploy Fabro as a managed service in your own infrastructure. Kubernetes-native with horizontal scaling and multi-tenant isolation.", + }, + ], + }, +]; + +const statusConfig = { + shipped: { + dot: "bg-mint", + border: "via-mint/30", + label: "text-mint", + track: "bg-mint/20", + icon: "mint", + }, + building: { + dot: "bg-amber", + border: "via-amber/30", + label: "text-amber", + track: "bg-amber/20", + icon: "amber", + }, + next: { + dot: "bg-teal-500", + border: "via-teal-500/30", + label: "text-teal-500", + track: "bg-teal-500/20", + icon: "teal", + }, +}; +--- + + + + + +
    + +
    +
    +
    +
    +
    + +
    +
    +

    + Where we're headed +

    +
    +

    + Roadmap +

    +

    + What we've shipped, what we're building, and where Fabro is going next. +

    +
    +
    + + +
    +
    + {sections.map((section, sectionIdx) => { + const config = statusConfig[section.status]; + return ( +
    + {/* Section header */} +
    0 ? "mt-20" : ""}`}> +
    + {section.status === "shipped" && ( + + + + )} + {section.status === "building" && ( +
    + )} + {section.status === "next" && ( + + + + + )} + + {section.label} + +
    +
    +
    + + {/* Timeline track */} +
    + {/* Vertical line */} +
    + +
    + {section.items.map((item, itemIdx) => ( +
    + {/* Timeline dot */} +
    +
    +
    + + {/* Card */} +
    +
    +

    {item.title}

    +

    {item.description}

    +
    +
    + ))} +
    +
    +
    + ); + })} +
    +
    + + +
    +
    +
    +
    +

    + Shape what we build +

    +

    + Have a feature request or want to influence priorities? Join the conversation. +

    +
    + + Join Discussions + + + Discord + +
    +
    +
    +
    + + + + + +