feat(landing): rebuild hero preview to v2 + simplify sections#737
Merged
Conversation
Hero preview rebuilt to mirror the v2 web app. Sidebar: - Compact 3-pill nav (Connectors / Memory / Agents) with search + unread badge, replacing the old vertical 5-route rail - Watchers nested under the selected agent (left-bordered indent) - 'Connections' renamed to 'Connectors' throughout - Org chip header, invite-members card, and user dropdown stripped for density (this is marketing chrome, not a real app shell) Stage tabs cut from 4 to 3: - Connect systems -> mirrors the real /connectors landing: 4-stat strip, Devices card (benefits grid + macOS/CLI/Docker/Serverless target cards), Connections card (paths grid + connector catalog) - Build context -> Memory / entity page - Deploy agents -> Agent detail with Watchers / Providers / Skills / Channels sub-tabs (folds the old 'Monitor signals' tab) Plus: Always-on agents grew a Channels column with per-platform status pills; Knowledge filter bar switched to feed / connection / run dimensions to match v2. Header/content padding tightened (56h header -> 56h with no breadcrumb; 640px shell -> 560px).
The landing page had a 'look at me' problem: 5 feature blocks each wrapped in a numbered corner-label motif, every section a fresh layout DNA. Tightened to: - Memory + Watchers folded into 'Memory that grows itself' - Skills + Platforms folded into 'One backend, every surface' - Hosting kept standalone SectionCornerLabels component deleted; each section now renders as a plain <section id=...> with the FeatureBlock inside. ~75 lines net removed and one fewer visual motif competing with the page eyebrow.
|
Caution Review failedThe pull request is closed. ℹ️ Recent review info⚙️ Run configurationConfiguration used: defaults Review profile: CHILL Plan: Pro Plus Run ID: ⛔ Files ignored due to path filters (2)
📒 Files selected for processing (8)
📝 WalkthroughWalkthroughLanding page now defaults to the "integrate" stage, removes SectionCornerLabels and several corner-labeled feature blocks, limits imported feature graphics to SharedMemoryGraphic and SkillsGraphic, renders Memory and Skills as standalone sections before ArchitectureSection, and updates the index callsite to match the new LandingPage props. ChangesLanding integrate-first + feature-section pruning
Estimated code review effort🎯 2 (Simple) | ⏱️ ~10 minutes Poem
🚥 Pre-merge checks | ✅ 4 | ❌ 1❌ Failed checks (1 warning)
✅ Passed checks (4 passed)
✏️ Tip: You can configure your own custom pre-merge checks in the settings. ✨ Finishing Touches📝 Generate docstrings
🧪 Generate unit tests (beta)
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
ESLint skipped: no ESLint configuration detected in root package.json. To enable, add Comment |
![chatgpt-codex-connector[bot]](https://avatars.githubusercontent.com/in/1144995?s=60&v=4){kind=small}
There was a problem hiding this comment.
💡 Codex Review
Here are some automated review suggestions for this pull request.
Reviewed commit: 7e839d25f7
ℹ️ About Codex in GitHub
Your team has set up Codex to review pull requests in this repo. Reviews are triggered when you
- Open a pull request for review
- Mark a draft as ready
- Comment "@codex review".
If Codex has suggestions, it will comment; otherwise it will react with 👍.
Codex can also answer questions or update the PR. Try commenting "@codex address that feedback".
Comment on lines
+78
to
79
| <section | ||
| id="skills" |
There was a problem hiding this comment.
Because this rebuild removes the standalone #autonomous and #platforms sections while Footer.tsx still links to /#autonomous and /#platforms (verified with rg '#autonomous|#platforms' packages/landing/src), the Watchers and Platforms footer links no longer scroll to any content on the home page and will just leave users at the top/current position. Please either keep alias anchors for those ids near the merged watchers/platforms content or update the footer links to existing targets.
Useful? React with 👍 / 👎.
|
Codecov Report✅ All modified and coverable lines are covered by tests. 📢 Thoughts on this report? Let us know! |
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 1
🤖 Prompt for all review comments with AI agents
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.
Inline comments:
In `@packages/landing/src/components/HeroProductCard.tsx`:
- Around line 3911-3931: The sidebarConnections flatten currently uses the
parent connector `c.status`; change it to use each connection's own
`conn.status` (from `c.connections`) so statuses reflect per-connection state;
update the mapping logic in the `connectorRows.flatMap` branch that builds `{
status: ... }` to map `conn.status` values ("Active" -> "active", "Idle" ->
"pending", "Error" -> "error" or appropriate classes) instead of `c.status`, and
ensure the fallback case that creates a single row for a connector still uses
`c.status` as before.
🪄 Autofix (Beta)
Fix all unresolved CodeRabbit comments on this PR:
- Push a commit to this branch (recommended)
- Create a new PR with the fixes
ℹ️ Review info
⚙️ Run configuration
Configuration used: defaults
Review profile: CHILL
Plan: Pro Plus
Run ID: def794eb-70bc-47c5-890c-35da2135213d
📒 Files selected for processing (4)
packages/landing/src/components/HeroProductCard.tsxpackages/landing/src/components/HeroSection.tsxpackages/landing/src/components/LandingPage.tsxpackages/landing/src/components/SectionCornerLabels.tsx
💤 Files with no reviewable changes (1)
- packages/landing/src/components/SectionCornerLabels.tsx
…pansion - Brand-logo registry (GitHub, LinkedIn, Slack, Gmail, Stripe, HubSpot, Notion, Discord, Telegram, WhatsApp, Crunchbase, Linear, Zoom, OpenClaw, ChatGPT, Claude, Cursor). BrandLogo renders the brand color + simplified mark; BrandLetter is the unrecognized-name fallback. - Replaced colored-letter ConnectorTinyMark / catalog tile / channel pill marks with BrandLogo so the preview stops looking like a wireframe. - Watchers sub-tab in the agent detail now opens a two-pane WatcherDetail view: list of watchers on the left, selected watcher meta + run timeline (success / skipped / error + timestamps + notes) on the right. - Sidebar agent expansion grew Providers (Anthropic / OpenAI / Google), Skills (deal-research / founder-signals / memory-recall), Channels (Slack #vc-deals / REST API), and Settings (Identity) sub-groups, each with example entries so the v2 nav reads as navigable instead of inert chrome.
The Watchers sub-tab was rendering a two-pane (list + detail) layout which duplicated what the sidebar already shows. v2's actual route is /agents/$agentId?tab=watchers&w=<id> — a single watcher's detail. Dropped the list pane; the content card is now just the selected watcher (meta + run timeline).
…rders
- AppShell's page-title header is now optional. All three stages pass
pageTitle="" so the preview goes straight into content with no
duplicated 'Connectors' / 'Companies' / 'Agents' chrome.
- Deploy agents:
- Dropped horizontal Watchers/Providers/Skills/Channels sub-tab strip
(in the real design these are sidebar nav rows, not content tabs)
- Removed search input from the agents toolbar
- Removed AlwaysOnAgentsTable (doesn't exist on real /agents pages);
replaced with a faithful 'Bring your own agent' card mirroring
/agents index — Cursor / Claude Code / ChatGPT / OpenClaw brand
tiles
- Borderless internal cards across stats strip, FeatureGridLite,
DeviceTargetCard, ConnectorCatalogTile, WatcherDetail, and the
Devices/Connections section wrappers. Surface-dim background carries
the grouping instead.
- Providers / Skills / Channels / Settings in the agent expansion are single nav rows (AgentTabLink), not nested sub-lists with sample values. Only Watchers stays expanded with the actual watcher list, matching v2 agents-section. - Removed the fictional 'Run policy' Settings sub-item. - Dropped overflow-y-auto and the fixed 560px shell height so the preview lays out content in full instead of clipping inside a scroll container.
There was a problem hiding this comment.
Actionable comments posted: 2
🤖 Prompt for all review comments with AI agents
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.
Inline comments:
In `@packages/landing/src/components/HeroProductCard.tsx`:
- Around line 865-875: The StatusDot component treats "error" the same as
"muted" because its prop type only allows "green" | "amber" | "muted"; update
StatusDot({ tone }: { tone: "green" | "amber" | "muted" | "error" }) to include
"error" and add a branch that maps "error" to a distinct red color (e.g.,
"#ef4444") instead of falling back to the muted gray; ensure the style mapping
in the StatusDot function uses this new color so failed runs render a distinct
red dot (also apply the same change to the other instance referenced around
lines 3680-3691).
- Around line 1123-1124: SidebarWatcher currently only has name so the sidebar's
Watchers list cannot reflect inactive rows; update the SidebarWatcher type (the
type alias named SidebarWatcher) to include a status field (e.g., active:
boolean or status: 'active' | 'inactive'), update any sample data that
constructs SidebarWatcher instances to set the correct status for the third
sample watcher, and ensure the rendering code that maps watchers (the component
or function that consumes SidebarWatcher in the nested Watchers list) checks
that new status field when deciding styles/colors so inactive watchers are not
rendered as green.
🪄 Autofix (Beta)
Fix all unresolved CodeRabbit comments on this PR:
- Push a commit to this branch (recommended)
- Create a new PR with the fixes
ℹ️ Review info
⚙️ Run configuration
Configuration used: defaults
Review profile: CHILL
Plan: Pro Plus
Run ID: 29270ea6-69ee-4215-8454-12439104166a
📒 Files selected for processing (1)
packages/landing/src/components/HeroProductCard.tsx
Comment on lines
+865
to
+875
| function StatusDot({ tone }: { tone: "green" | "amber" | "muted" }) { | ||
| const bg = | ||
| tone === "green" ? "#22c55e" : tone === "amber" ? "#f59e0b" : "#9ca3af"; | ||
| return ( | ||
| <span | ||
| class="block h-1.5 w-1.5 rounded-full" | ||
| style={{ background: bg }} | ||
| aria-hidden="true" | ||
| /> | ||
| ); | ||
| } |
There was a problem hiding this comment.
Give failed runs a distinct status dot.
error currently falls through to the same muted dot as skipped, so failures are visually downgraded in the run timeline.
🔧 Minimal fix
-function StatusDot({ tone }: { tone: "green" | "amber" | "muted" }) {
+function StatusDot({
+ tone,
+}: {
+ tone: "green" | "amber" | "muted" | "red";
+}) {
const bg =
- tone === "green" ? "#22c55e" : tone === "amber" ? "#f59e0b" : "#9ca3af";
+ tone === "green"
+ ? "#22c55e"
+ : tone === "amber"
+ ? "#f59e0b"
+ : tone === "red"
+ ? "#ef4444"
+ : "#9ca3af";
return (
<span
class="block h-1.5 w-1.5 rounded-full"
style={{ background: bg }}
aria-hidden="true"
@@
const tone =
r.status === "success"
? "green"
: r.status === "running"
? "amber"
: r.status === "error"
- ? "muted"
+ ? "red"
: "muted";Also applies to: 3680-3691
🤖 Prompt for AI Agents
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.
In `@packages/landing/src/components/HeroProductCard.tsx` around lines 865 - 875,
The StatusDot component treats "error" the same as "muted" because its prop type
only allows "green" | "amber" | "muted"; update StatusDot({ tone }: { tone:
"green" | "amber" | "muted" | "error" }) to include "error" and add a branch
that maps "error" to a distinct red color (e.g., "#ef4444") instead of falling
back to the muted gray; ensure the style mapping in the StatusDot function uses
this new color so failed runs render a distinct red dot (also apply the same
change to the other instance referenced around lines 3680-3691).
Comment on lines
+1123
to
+1124
| type SidebarAgent = { name: string }; | ||
| type SidebarWatcher = { name: string }; |
There was a problem hiding this comment.
Preserve watcher status in the sidebar shape.
SidebarWatcher only carries name, so the nested Watchers list has no way to reflect inactive rows and currently renders every watcher as green. The third sample watcher is inactive, so the default preview is already wrong here.
🔧 Minimal fix
-type SidebarWatcher = { name: string };
+type SidebarWatcher = { name: string; status: WatcherRow["status"] };
<AgentSubGroup
label="Watchers"
icon={<WatchersIcon size={10} />}
items={watchers.map((w) => ({
name: w.name,
- leading: <StatusDot tone="green" />,
+ leading: (
+ <StatusDot
+ tone={w.status === "Active" ? "green" : "muted"}
+ />
+ ),
}))}
active={activeNav === "watchers"}
/>
const sidebarWatchers: SidebarWatcher[] = watcherRows
.slice(0, 3)
- .map((w) => ({ name: w.name }));
+ .map((w) => ({ name: w.name, status: w.status }));Also applies to: 1209-1212, 3919-3921
🤖 Prompt for AI Agents
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.
In `@packages/landing/src/components/HeroProductCard.tsx` around lines 1123 -
1124, SidebarWatcher currently only has name so the sidebar's Watchers list
cannot reflect inactive rows; update the SidebarWatcher type (the type alias
named SidebarWatcher) to include a status field (e.g., active: boolean or
status: 'active' | 'inactive'), update any sample data that constructs
SidebarWatcher instances to set the correct status for the third sample watcher,
and ensure the rendering code that maps watchers (the component or function that
consumes SidebarWatcher in the nested Watchers list) checks that new status
field when deciding styles/colors so inactive watchers are not rendered as
green.
… writes DeviceTargetCard action gained three explicit kinds: - link: opens the URL (macOS → real .dmg download from github.com/lobu-ai/lobu/releases/latest) - copy: copy-to-clipboard with copy/check icon swap (CLI install + login command, Docker run command) - status: passive label (Serverless 'Free in beta') Watcher run timeline entries now carry an optional 'writes' array. When present, the run renders a stack of memory-event preview cards underneath — entity emoji + title + body + branded source attribution. Demo content uses concrete VC examples (Lovable Series C, Anton Osika hires, Anysphere/Cursor $900M) sourced from TechCrunch / LinkedIn / Crunchbase with real brand logos.
Match v2 agents-section where the Identity tab is surfaced as 'Personality'. Drop the generic 'Settings' link.
Replace KnowledgeFilterBar (Feed / Connection / Run chip groups) with a single search input. Cap rendered cards at 2 to keep the preview glanceable. Deleted KNOWLEDGE_CHIPS data + KnowledgeFilterBar component.
- Sidebar connector rows are now one per connector (not per
sub-connection) so switching use cases actually changes what shows up
— Crunchbase / LinkedIn / News feeds for VC, GitHub / Linear /
PagerDuty for engineering, etc. — instead of always rendering the
same hardcoded sample-member names (Albert Lund / Jenna Roberts).
Each row now has the connector's brand logo + a feed count.
- Removed 'Connected apps' section from Agents pill (Claude Desktop /
OpenClaw / Cursor tiles).
- Removed Hosting (Self-host or managed) feature block and the entire
DataModelSection ('One memory schema, every record type') from the
page.
- ArchitectureSection drops its [06] corner-label header strip for
consistency with the rest of the page. Its dotted background
(dotted-bg + rounded-2xl border) was already in place; with the data
model section removed it now stands in as the page's single
patterned showcase.
DeviceTargetCard rebuilt around a shared BrandTile primitive — the same compact brand-mark + name + 1-line subtitle layout the ConnectorCatalogTile already uses for Crunchbase / LinkedIn / GitHub. - macOS: black Apple-glyph tile, 'Menu bar app · .dmg', external-link trailing icon, real github releases link. - CLI: dark Terminal tile, 'npm i -g @lobu/cli', copy trailing icon. - Docker: Docker-blue whale tile, 'Self-hosted bridge', copy trailing icon. - Serverless: sky-blue Cloud tile, 'Free in beta', green status dot. Devices section now reads as the same visual rhythm as Connections instead of bigger description-and-button cards.
Build-context view: - EntitySchemaSummary loses its outer card border (and the emoji-tile border); the schema/relationships/automation chips read against the page surface directly. - MembersTable loses its border too — header + rows align with the rest of the borderless content pane. Agent detail: - Removed the 'Active' badge next to the agent identity and beside the watcher name. Status is already implied by the green status dot. - Replaced with a 'Next run in 47m' line on the agent header and a '<schedule> · next in 47m' suffix on the watcher header, which is the more useful runtime signal.
Cleanup from the post-redesign audit: - Drop dead Footer links (#autonomous / #platforms / #hosting) and replace the Product column with the sections that still exist (Memory / Skills / Architecture / MCP). - Delete orphaned DataModelSection.tsx and the unused HostingGraphic / WatcherGraphic / PlatformsGraphic / LogoStrip exports from FeatureGraphics.tsx. - Delete stale screenshots in public/images/docs/. - Drop dead linkTabsToCampaigns prop + the commented LogoStrip line in LandingPage.tsx and its sole call site in index.astro. - Tighten HeroStageId to drop the unused 'watch' variant. - Rename 'Connections UI' to 'Connectors UI' in guides/troubleshooting.md to match the renamed nav. Mobile sidebar: - AppShell tracks a mobileOpen state. On <md the content pane gets a thin top bar with a hamburger button and the workspace name; tapping opens the Sidebar as an overlay drawer with a backdrop and an X close. Picking a pill or any nav row inside the drawer auto-closes it. Desktop layout is unchanged.
This was referenced May 15, 2026
This was referenced May 19, 2026
Merged
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
2 participants
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Summary
The hero preview on the landing page was a hand-coded Preact replica of the old web app — vertical 5-route sidebar, 4 stage tabs, generic table chrome. The real app has shipped a significant UX sweep (Notion-style nav v2, Connectors rename, action-mode tri-state, device picker, channel bindings, agent-detail tabs) and the preview had drifted ~6 months out of date.
This PR realigns the preview to the v2 shape and simplifies the macro page layout.
Hero preview (commit 1)
Sidebar — compact 3-pill nav (Connectors / Memory / Agents) with search + unread badge replaces the old vertical rail. Watchers nest under the selected agent (left-bordered indent, matching agents-section-v2). 'Connections' renamed to 'Connectors' throughout. Org chip / invite-members / user dropdown stripped — marketing chrome, not a real app shell.
Stage tabs cut from 4 to 3 (old 'Monitor signals' folded into 'Deploy agents'):
Always-on agents grew a Channels column with per-platform status pills. Knowledge filter bar switched to feed / connection / run dimensions to match v2 filters. Header and content padding tightened.
Page simplification (commit 2)
Test plan
Summary by CodeRabbit
New Features
Style
Documentation
Footer