feat(landing): outcome-first homepage, less code up front

[buremba]

Reworks the homepage so it reads benefit-first for semi-technical evaluators while still giving developers a real code anchor. The deep per-primitive code now lives on the /for/ SEO pages and the docs, not the homepage.

What changed on the homepage:

• Hero: plain-language subhead, dropped the spec-strip pill. "Copy setup prompt" stays the primary CTA; the npx @lobu/cli init command moved to a sub-line.
• New "What it does" artifact: a graph-derived insight next to the proactive action it triggers, with chat shown as just one surface (no code).
• Replaced the architecture diagram and the five stacked code sections with a three-step "How it works": connect your data, it builds itself into memory (watchers), agents act where your team works. Plus one collapsed lobu.config.ts. Visible code blocks went from 7 to 1.
• "reach people" phrasing removed (read as autonomous outreach); now framed as acting inside your team's tools.

Mechanics:

• The detailed Connectors/Memory/Watchers/Skills/Agents code sections render only when a use case is set, i.e. the /for/ and /connect-from pages. Verified /for/sales still has them and the homepage does not.
• CodeBlock gained a collapsible/defaultOpen toggle.
• agentConfigSlice now includes a real defineWatcher plus the defineConfig wiring, so the snippet actually shows the watcher, connectors, and agent (it only showed defineAgent before).
• Fixed a pre-existing dead /getting-started/watchers/ link (no such page) -> /getting-started/memory/, where watchers are documented.
• Page title -> "Open-source backend for proactive AI agents".

Verification: astro build clean (86 pages), no console/hydration errors on the live homepage, all internal links resolve against dist, homepage vs /for split confirmed. This is a marketing-page content change; no backend/runtime code touched.

Summary by CodeRabbit

• New Features

  • Collapsible code block examples throughout the site
  • New ProactiveLoop homepage section showcasing agent memory and chat responses
  • New HowItWorks section highlighting key benefits
  • Enhanced copy-to-clipboard with separate prompt and quickstart command options

• UI/Layout Updates

  • Reorganized product sections with collapsible code displays
  • Updated homepage messaging and page title

[coderabbitai]

Caution

Review failed

Pull request was closed or merged during review

📝 Walkthrough

Walkthrough

This PR redesigns the landing page to prominently feature a new homepage with a proactive agent flow visualization, adds collapsible code blocks throughout feature sections to improve readability, introduces dual-mode copy-to-clipboard in the hero (setup prompt vs. quickstart command), and enhances snippet generation to include full agent configuration context.

Changes

Landing Page Homepage Redesign

Layer / File(s)	Summary
Collapsible CodeBlock component foundation packages/landing/src/components/CodeBlock.tsx	CodeBlock gains collapsible and defaultOpen props, uses local open state, and conditionally renders a clickable button toggle and show/hide code body.
ProactiveLoop homepage component packages/landing/src/components/ProactiveLoop.tsx	New exported ProactiveLoop component renders "graph notices, the agent acts" with a proactive scenario, derived memory fields card, flow arrow, and sample chat in a responsive layout.
HowItWorks benefit-driven component packages/landing/src/components/LandingPage.tsx	New HowItWorks component displays a 3-step benefit walkthrough with collapsible lobu.config.ts code block and product links.
Agent config snippet generation packages/landing/scripts/gen-landing-snippets.ts	sliceImportBlock now extracts multiple import statements with blank-line tolerance; agentConfigSlice concatenates imports, defineAgent, entity placeholder, defineWatcher, and defineConfig slices.
LandingPage homepage routing and structure packages/landing/src/components/LandingPage.tsx	Introduces QUICKSTART_CMD and isHome flag to conditionally render ProactiveLoop and HowItWorks on homepage, while keeping architecture/section flow for use-case-specific pages.
Hero dual-mode copy-to-clipboard logic packages/landing/src/components/LandingPage.tsx	Refactors hero copied state to distinguish cmd vs. prompt mode, adds copy(which) helper to write either quickstart command or setup prompt, and adds secondary "Or start it yourself" button.
Apply collapsible blocks to feature sections packages/landing/src/components/LandingPage.tsx	Applies collapsible to connectors, memory, watchers (with added product links), reaction, skills, and agents/config code blocks; updates watchers feature text and agents copy copy to "One typed file wires it together".
Landing page API cleanup packages/landing/src/use-case-showcases.ts	Removes exported SurfaceHeroCopy type, getSurfaceHeroCopy() and getLobuUrl() functions, and converts DEFAULT_LANDING_USE_CASE_ID to non-exported constant.
Styling and metadata polish packages/landing/src/globals.css, packages/landing/src/layouts/BaseLayout.astro	Removes .hero-rise-5 stagger class and updates default page title to "Lobu - Open-source backend for proactive AI agents".

Estimated code review effort

🎯 3 (Moderate) | ⏱️ ~25 minutes

Possibly related PRs

• lobu-ai/lobu#988: Per-use-case snippet selection and landing UI navigation overlaps at LandingPage.tsx component level.
• lobu-ai/lobu#945: Landing rebuild changes to snippet generator and CodeBlock/LandingPage components directly overlap with main PR's generator and UI updates.
• lobu-ai/lobu#737: Landing page structure reshaping of LandingPage.tsx hero/feature sections overlaps with main PR's homepage and section layout changes.

Poem

🐰 The landing hops with new design,
ProactiveLoop and HowItWorks align!
Collapsible blocks trim the view,
Copy setup or quickstart—you choose the path true!
From graph's insight, the agent now acts anew.

🚥 Pre-merge checks | ✅ 3 | ❌ 2

❌ Failed checks (1 warning, 1 inconclusive)

Check name	Status	Explanation	Resolution
Docstring Coverage	⚠️ Warning	Docstring coverage is 40.00% which is insufficient. The required threshold is 80.00%.	Write docstrings for the functions missing them to satisfy the coverage threshold.
Description check	❓ Inconclusive	The description comprehensively covers what changed, why, and the verification performed. However, the Test plan section is empty (no checkboxes marked), which is a required template section.	Complete the Test plan section by checking which validation steps were actually performed (bun run check:fix, typecheck, package-specific build, etc.).

✅ Passed checks (3 passed)

Check name	Status	Explanation
Title check	✅ Passed	The title clearly summarizes the main change: a homepage redesign prioritizing outcomes/benefits over technical details ("outcome-first") and reducing code visibility on the homepage ("less code up front").
Linked Issues check	✅ Passed	Check skipped because no linked issues were found for this pull request.
Out of Scope Changes check	✅ Passed	Check skipped because no linked issues were found for this pull request.

_{✏️ Tip: You can configure your own custom pre-merge checks in the settings.}

✨ Finishing Touches

📝 Generate docstrings

• Create stacked PR
• Commit on current branch

🧪 Generate unit tests (beta)

• Create PR with unit tests
• Commit unit tests in branch feat/landing-finalize

Warning

There were issues while running some tools. Please review the errors and either fix the tool's configuration or disable the tool if it's a critical failure.

🔧 ESLint

If the error stems from missing dependencies, add them to the package.json file. For unrecoverable errors (e.g., due to private dependencies), disable the tool in the CodeRabbit configuration.

ESLint skipped: no ESLint configuration detected in root package.json. To enable, add eslint to devDependencies.

---

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

• X
• Mastodon
• Reddit
• LinkedIn

_{Comment @coderabbitai help to get the list of available commands and usage tips.}

[codecov-commenter]

⚠️ Please install the to ensure uploads and comments are reliably processed by Codecov.

Codecov Report

✅ All modified and coverable lines are covered by tests.

📢 Thoughts on this report? Let us know!

[buremba]

bug_free 84, simplicity 80, slop 8, bugs 0, 0 blockers

Read diff/logs; typecheck/unit/integration all exit 0. Ran cd packages/landing && bun run build -> success. [env] build still emits an existing CSS @import ordering warning. No browser visual probe.

Suggested fixes

File	Line	Change
packages/landing/src/components/ProactiveLoop.tsx	105	Replace the em dash with comma/semicolon copy, e.g. derived from 1,204 raw events by a watcher, no app code.
packages/landing/src/components/ProactiveLoop.tsx	165	Replace the em dash with punctuation allowed by landing copy rules, e.g. is just one surface; the same loop fires over MCP or HTTP.
packages/landing/scripts/gen-landing-snippets.ts	263	Make agentConfigSlice include the adjacent type-only imports from lobu.config.ts so the newly included watcher/connector generic references are not displayed as undefined symbols.

Full verdict JSON

{
  "bug_free_confidence": 84,
  "bugs": 0,
  "slop": 8,
  "simplicity": 80,
  "blockers": [],
  "change_type": "feat",
  "behavior_change_risk": "medium",
  "tests_adequate": true,
  "suggested_fixes": [
    {
      "file": "packages/landing/src/components/ProactiveLoop.tsx",
      "line": 105,
      "change": "Replace the em dash with comma/semicolon copy, e.g. `derived from 1,204 raw events by a watcher, no app code`."
    },
    {
      "file": "packages/landing/src/components/ProactiveLoop.tsx",
      "line": 165,
      "change": "Replace the em dash with punctuation allowed by landing copy rules, e.g. `is just one surface; the same loop fires over MCP or HTTP.`"
    },
    {
      "file": "packages/landing/scripts/gen-landing-snippets.ts",
      "line": 263,
      "change": "Make `agentConfigSlice` include the adjacent type-only imports from `lobu.config.ts` so the newly included watcher/connector generic references are not displayed as undefined symbols."
    }
  ],
  "notes": "Read diff/logs; typecheck/unit/integration all exit 0. Ran `cd packages/landing && bun run build` -> success. [env] build still emits an existing CSS @import ordering warning. No browser visual probe.",
  "categories": {
    "src": 630,
    "tests": 0,
    "docs": 0,
    "config": 0,
    "deps": 0,
    "migrations": 0,
    "ci": 0,
    "generated": 2
  }
}

Local review gate — branch protection can require the pi-review commit status. See docs/REVIEW_SCHEMA.md.