Rework landing page and design systems, added pricing section by carsonSgit · Pull Request #15 · GodPuffin/argus

carsonSgit · 2026-04-30T21:11:49Z

No description provided.

…g with StyleManifest; remove unused components

… and update StyleManifest with alternating features; include background images

…ions, enhance layout, and update contributor information

…oader, and improve SiteHeader styling

…tyling, and improve button appearance

…styles, and remove loading animations from Home component Co-authored-by: Copilot <copilot@github.com>

…n, update grid dimensions, and improve visual variants in PricingSection

…ion, improve layout, and refine button animations

…e animation for button background

…cture, add yearly/monthly toggle, and enhance layout

claude · 2026-04-30T21:15:15Z

PR Review: Rework landing page and design systems, added pricing section

Overview

This PR does three distinct things:

Landing page redesign — replaces the animated loading screen, Dither/GSAP effects, and fancy components with a cleaner editorial layout using Inter + grid-based design
New pricing section — adds a 4-tier pricing table with hover-activated braille animations
Demo mode system — introduces DEMO_MODE=true env flag with comprehensive mock data, in-memory stores, and OpenRouter AI integration so the app runs without any real backends

The demo mode work in particular is well-architected and the mock data is thorough. A few issues worth addressing before merge:

Bugs / Correctness

app/api/ai-analysis/stats/route.ts — successRate stripped only in demo mode

const { successRate: _s, ...rest } = mockStats.jobStats;
return NextResponse.json(rest);

The production path presumably returns successRate (it comes from getJobStats()). Any frontend component that reads successRate from this endpoint will silently receive undefined in demo mode. Either include it in the response, or confirm the frontend never reads it.

app/api/search/route.ts — filters are built but not applied in demo mode
The demo search matches events by text, then constructs a filters response object using docType, severityParam, eventTypeParam, etc. — but those filters are never applied to the matches array. A user filtering by severity in demo mode gets unfiltered results.

app/api/reports/route.ts — markdown → Tiptap conversion is lossy in demo
The production path uses @tiptap/html + marked to properly convert markdown. The demo stub wraps the entire markdown string as a single plain-text paragraph. Reports created via the AI chat createReport tool will render without headings or formatting.

Performance

components/landing/pricing-section.tsx — MiniBrailleBg intervals always running
Each of the 4 pricing cards runs a setInterval at 50ms computing a 25×45 braille grid. The animation is CSS-hidden until hover (opacity-0 group-hover:opacity-100), but the JS computation runs constantly regardless. On a landing page with 4 cards that's ~90,000 loop iterations/sec just to keep the grids fresh for hover events.

Consider using IntersectionObserver to start/stop the interval, or only generating a static random grid on mount and re-randomizing on mouseenter.

Same note applies to ButtonBrailleBg on the Professional tier button.

Code Quality

font-[family-name:var(--font-inter)] is very verbose and pervasive
This string appears dozens of times throughout the new components. Configure Inter as a named font utility in tailwind.config (e.g. font-inter) so it's a single class everywhere and easier to swap later.

components/landing/style-manifest.tsx — unexpected re-export

export { BrowserComponent };

BrowserComponent is already importable directly from @/components/browser-component. Re-exporting it from the landing manifest creates a confusing second import path with no benefit.

components/landing/pricing-section.tsx — pricing buttons have no action
All four tier buttons render as <button> elements with no onClick, no href, and no form. The "Deploy for free", "Get Started", and "Contact Sales" buttons are purely decorative right now. Consider linking them or adding a TODO comment so they're not silently no-ops.

Unused font load in app/layout.tsx
Instrument_Serif is imported and added to the <body> class via ${instrumentSerif.variable}, but I can't find font-[family-name:var(--font-instrument-serif)] used anywhere in the new components (only Inter is used). If it's not used yet, it's loading an extra font file on every page load for no reason.

Minor

.gitignore — missing trailing newline after .cursor
components/landing/style-manifest.tsx L~2343 — FeatureBlock uses <Image alt=""> (empty alt). Fine for decorative backgrounds, but the image also sits behind the feature content card, so the empty alt is technically correct — just worth confirming intentionally.
lib/demo/mock-data.ts — NOW is captured at module load, so timestamps drift in long-running dev servers. The file header notes this, which is good. Just make sure the UI doesn't show "2 minutes ago" when the server has been running for days.

What's Working Well

The single isDemoMode flag pattern is clean and all API routes follow a consistent early-return approach
Using globalThis.__demoReportStore / globalThis.__demoChatStore for in-process state is correct for Next.js serverless
BrailleLoader has good a11y (role="status", aria-label, aria-hidden on the glyph)
Removing GSAP and the animated loading screen meaningfully reduces bundle weight and first-load jank
The mock data is realistic and well-structured
Readonly<{...}> prop types on the new components is a nice correctness improvement

Summary

The demo mode system is solid and the landing redesign is cleaner. The main actionable items are: fix the successRate asymmetry in the stats API, apply search filters in demo mode, and address the continuous braille animation intervals as a performance concern. The rest are low-priority cleanups.

claude · 2026-04-30T21:15:38Z

Code Review — PR #15: Landing Page Rework + Demo Mode

Overview

This PR does two distinct things:

Landing page redesign — replaces the GSAP/Dither/loading-screen approach with a cleaner editorial layout using Inter + Instrument Serif, adds a new StyleManifest and PricingSection component, and removes several now-unused components.
Demo mode infrastructure — introduces DEMO_MODE=true env var gating across every API route, with in-memory/fixture data for the full app surface (cameras, assets, events, reports, chat, AI tools).

Overall the work is solid and well-scoped. The demo mode layer is the more complex half, and there are a few issues worth addressing.

Demo Mode Infrastructure

Potential bug — isDemoMode evaluated at build time on the server

lib/demo/flag.ts exports:

export const isDemoMode = process.env.DEMO_MODE === "true";

This is evaluated once at module load. On serverless/edge runtimes (Vercel), that is fine — each cold start reads the env var. But the same constant is also imported in client components (e.g. stream-controls.tsx, site-header.tsx). Because Next.js inlines process.env.* values in client bundles at build time, isDemoMode on the client will reflect whatever value was present during the build, not the runtime. If the production bundle is built with DEMO_MODE unset and then deployed with it set (or vice versa), the UI and the API will disagree.

Recommendation: Prefix the variable with NEXT_PUBLIC_DEMO_MODE so Next.js explicitly knows it is client-visible and it gets baked in consistently, or keep client-side reads conditional on a context/prop rather than the raw env constant.

demoReportStore mutates across requests in a serverless context

mock-data.ts stores reports in a module-level array and chat-store.ts uses globalThis.__demoChatStore. In a serverless runtime each function invocation runs in its own isolate, so mutations don't persist across requests anyway. That's fine for a stateless demo, but the code comments suggest it's intentional in-memory state. A comment noting the ephemeral nature would prevent confusion, and the globalThis declaration (needed for Next.js HMR) could use a comment explaining why.

Demo mode bypasses auth/input validation early

Several API routes return demo responses before input validation (e.g. app/api/search/route.ts returns demo data before the docType validity check). This is fine for a demo, but worth noting so future reviewers don't think the validation is dead code.

Landing Page / UI

FeaturesAlternating name collision

style-manifest.tsx defines a private FeaturesAlternating function and simultaneously components/features-alternating.tsx (the old file) was deleted. The new local one is not exported — good. But FeatureBlock is also private and references a hardcoded backgrounds array of five paths (/assets/bg1.webp … bg5.webp). These assets aren't created in this PR. If they don't exist, the feature section will show broken images.

Pricing buttons have no onClick handler

The pricing tier buttons (Get Started, Deploy for free, Contact Sales) render as <button> elements but have no onClick, href, or type="button" attribute. They will silently do nothing when clicked. This is likely a placeholder for future integration, but should either be wired up or rendered as disabled/greyed-out with a tooltip.

MiniBrailleBg — animation interval not paused when off-screen

Each pricing card runs a setInterval at 50 ms (20 fps). With four cards that's 80 interval ticks per second running even when the cards are not in view. Consider using IntersectionObserver to pause/resume, or at minimum checking document.visibilityState. The ButtonBrailleBg inside the popular card adds another 50 ms interval.

Inline <style> keyframes in MiniBrailleBg

<style>{`@keyframes braille-gradient-shift { … }`}</style>

This injects a <style> tag into the DOM on every render of every pricing card that's hovered. The animation name is not scoped, so repeated mounts/unmounts will insert duplicate @keyframes rules. Move this to globals.css or use a CSS module.

{/* Spacer */} comment in JSX

app/page.tsx line ~208:

<div className="w-[100px]" /> {/* Spacer */}

The comment is outside the self-closing tag so it renders as a text node. Minor cosmetic issue.

Code Quality

any type on event variable in ai-tools.ts

let event: any = null;

The rest of the file has typed data. The AIAnalysisEvent type is already imported via mock-data.ts — use it here.

effectiveModel is set to "openrouter" in demo path

In app/api/chat/route.ts the demo branch sets effectiveModel = "openrouter", but then effectiveModel is only used to check effectiveModel !== "stateful-argus". This is safe, but the intent is slightly obscured — a comment that effectiveModel is only used for the Letta-guard would help, or it could be omitted since the demo branch already can't reach that model.

NavMain receives labelClassName="hidden" from sidebar

Hiding section labels entirely may affect accessibility (screen-reader users lose the group structure). Consider aria-hidden or sr-only class instead of hidden if visual hiding is the goal.

.gitignore

The new entries are missing a newline at end of file (flagged by git). Minor, but will cause a linting warning.

No test coverage

No tests are included for the new demo mode paths. Given that these branches are active on the public deployment, a few unit tests for the flag and mock data helpers would improve confidence — especially for the report store mutation logic and the chat store.

Summary

Area	Status
Demo mode architecture	✅ Clean, well-centralized
`isDemoMode` client/server split	⚠️ Needs `NEXT_PUBLIC_` prefix or context
Pricing buttons	⚠️ No-op click handlers
Braille animation performance	⚠️ Always-running intervals
Inline `@keyframes`	⚠️ Duplicate injection risk
Background images for features	❓ Verify assets exist
Type safety (`any`)	🔧 Minor
Test coverage	❌ None for new paths

The demo mode layer is the right approach for a public deployment — the main thing to nail down is the build-time vs runtime env var split for client components.

…layout with PageContainer and PageHeader

…de handling

claude · 2026-05-01T13:08:46Z

Code Review — PR #15: Landing page rework, design system, pricing section

Great scope for a single PR — the changes are coherent and the direction is clearly an improvement. Notes below are ordered roughly by severity.

Overview

This PR does three things:

Landing page redesign — removes the animated intro (Dither/DecryptedText), replaces with a clean editorial layout, adds a pricing section and a new footer. Drops GSAP FeaturesAlternating in favour of a static FeatureBlock grid.
Dashboard design system — introduces Surface, PageContainer, and PageHeader abstractions to replace ad-hoc Card wrappers and raw container divs across every dashboard page.
Demo mode — adds lib/demo/flag.ts, lib/demo/mock-data.ts, and lib/demo/openrouter.ts to stub all real API/DB calls with fixture data when demo mode is enabled.

Bugs / Correctness

1. Pricing CTA buttons are dead

All four pricing tier buttons in pricing-section.tsx are bare button elements with no onClick and no href. Clicking "Get Started" or "Contact Sales" does nothing. Either wire them up or mark them disabled with a tooltip.

2. Missing background image assets

FeaturesAlternating in style-manifest.tsx references /assets/bg1.webp through /assets/bg5.webp as Image fill backgrounds. These files do not appear to be added in this PR. If absent from public/assets/, feature blocks will render with broken images. Either add the assets or fall back gracefully.

3. Demo markdown conversion is lossy

In demo mode, POST /api/reports wraps raw markdown as a single plain-text paragraph node rather than running it through marked + generateJSON. Markdown headings/lists/bold will appear as literal characters in the Tiptap editor.

Performance

4. MiniBrailleBg — 4 concurrent setInterval timers at 20 fps

Each pricing card mounts a MiniBrailleBg that runs setInterval at 50ms unconditionally, computing a 25x45 grid every tick. With four cards on screen that is 4x20 fps of continuous setState calls whether or not the card is hovered. CSS opacity: 0 hides them visually but timers keep running. Suggested fix: gate the interval on a hover state or IntersectionObserver.

5. ButtonBrailleBg animates continuously

Same issue — ButtonBrailleBg runs its timer even when the parent card is not hovered.

Accessibility

6. CtaLink disabled link is still keyboard-reachable

When href is set and disabled is true, CtaLink renders a Link with aria-disabled and pointer-events-none. That blocks mouse clicks but the element remains focusable via Tab and activatable via Enter. Adding tabIndex={-1} when disabled would also block keyboard navigation.

7. SurfaceTitle renders as a div, not a heading

SurfaceTitle outputs a div. PageHeader correctly uses h1 for the page-level title, so Surface sections would benefit from h2/h3 for screen-reader navigation.

Minor

8. .gitignore missing newline at EOF

9. Mobile nav links condensed to long single lines — Biome should fix this on format.

10. useChartAnimation module-level Set survives HMR — chart animations will not replay after a hot-module reload in development.

Positives

The Surface / PageContainer / PageHeader abstraction is clean and well-typed with data-slot attributes matching shadcn conventions.
Demo mode coverage is thorough — every API route, realtime hook, and AI tool is accounted for. The globalThis.__demoChatStore pattern is the right approach for persisting state across Next.js API invocations.
useChartAnimation elegantly solves the chart-animates-every-time-you-switch-tabs annoyance.
BrailleLoader has proper role="status" and aria-label.
Removing the 3.5-second blocking loading screen is a meaningful UX win.

Summary

The two issues that should block merge are dead CTA buttons (#1) and potentially missing background assets (#2). The MiniBrailleBg timer problem (#4) is worth addressing before the page gets real traffic. Everything else is low-priority polish.

Generated with Claude Code

claude · 2026-05-22T18:06:44Z

PR Review: Rework landing page and design systems, added pricing section

Nice cohesive design refresh. The new Surface/PageContainer/PageHeader primitives meaningfully reduce duplication across dashboard pages, and the landing page reads well. A few items worth addressing before merge.

🔴 Likely bugs

1. isDemoMode doesn't work in client code (high impact)
lib/demo/flag.ts uses process.env.DEMO_MODE, which is not NEXT_PUBLIC_ prefixed. Next.js inlines non-public env vars only on the server; in the client bundle they're replaced with undefined, so isDemoMode is always false on the client. This PR newly relies on it in client-side code:

components/stream/stream-controls.tsx (new): disabled={isDemoMode || …} — Enable Camera will NOT be disabled in the demo build.
app/(dashboard)/stream/page.tsx: {isDemoMode && <DemoDisabledNotice />} — notice will never render.
hooks/use-stats-realtime.ts (new gate): if (!enabled || isDemoMode) return; — the realtime subscription will still spin up in demo mode and try to hit demo.invalid.supabase.co.
components/site-header.tsx: the <DemoBadge /> won't show when SiteHeader is rendered inside a client page subtree.

Fix: rename to NEXT_PUBLIC_DEMO_MODE (and update vercel.json / docs) so the value survives into the client bundle, or split into separate server/client flags.

2. Demo Claude model mappings are out of date
app/api/chat/route.ts lines 72–79 — claude-sonnet-4.5 → anthropic/claude-3.5-sonnet, claude-haiku-4.5 → anthropic/claude-3.5-haiku. Demo users picking Sonnet 4.5 silently get 3.5. OpenRouter does expose Claude 4.x slugs; map to those (e.g. anthropic/claude-sonnet-4.5).

3. <AvatarImage src=\"assets/admin.png\"> in user-nav.tsx
Path is relative (no leading /). On a deep route like /watch/123 it resolves to /watch/123/assets/admin.png and 404s. This PR only re-flowed the JSX, but worth fixing while you're in the file.

🟡 Code quality

4. Broad any usage in app/api/chat/route.ts
let model;, providerOptions: any, streamConfig: any — the AI SDK exports concrete types for these (LanguageModel, etc.). Easy to type properly and worth doing — the switch over selectedModel already has the shape of a discriminated union.

5. createReport does dynamic imports on every call (lib/ai-tools.ts)
Every invocation await import(\"marked\"), \"@tiptap/*\". On serverless this adds latency to a tool call that's already on the critical chat path. Hoist these to top-level imports — app/api/reports/route.ts already imports them statically, so there's no bundle-split reason to defer.

6. alert() for user-facing errors
watch/page.tsx (×4) and stream/page.tsx (×5) use alert() on fetch failures. The app already mounts <Toaster /> from sonner in app/layout.tsx — use toast.error(...) for consistency with the rest of the surface.

7. Duplicated headings
On database/page.tsx and search/page.tsx the <PageHeader title=\"…\" /> is immediately followed by a <SurfaceTitle> with the same text. Either drop the inner title or differentiate them.

🟠 Performance

8. MiniBrailleBg on hover is expensive
25 × 45 = 1,125 cells, full grid rebuild + React re-render every 50ms while hovered (~22 reconciles/sec) for a decorative background. Consider rendering into a <canvas> or a single <pre> with textContent writes via a ref, skipping React.

9. ButtonBrailleBg runs unconditionally
Animates 400 cells at 20 fps for the lifetime of the pricing section, even when the user has scrolled past or the tab is hidden. At minimum gate it with an IntersectionObserver / document.visibilityState.

10. useChartAnimation uses module-level mutable state
playedChartIds is module-scoped, so once a user leaves /stats and comes back, charts re-mount but their IDs are still in the set → no replay. Probably intentional within a session, but worth a comment; if "play once per page-load" is the intent, sessionStorage is more discoverable than a hidden global.

🔐 Security / correctness

11. Stream key in URL query string
app/(dashboard)/stream/page.tsx line 186 puts the Mux stream key in a WebSocket URL query param. The code redacts it for the console log (good) but query params land in server access logs and proxies. Prefer sending the key as the first WS message after open.

12. next.config.ts keeps ignoreBuildErrors / ignoreDuringBuilds
Out of scope for this PR, but with this much new code the TS/ESLint bypasses are increasingly risky. Worth a follow-up to clear them.

♿ Accessibility

13. Click-to-watch results in search/page.tsx
<Surface onClick={handleResultClick}> makes the whole card a click target but doesn't add role=\"button\", tabIndex={0}, or keyboard handlers. The biome-ignore on pricing-section.tsx (decorative hover) is fine, but search results are real interactions.

14. <img> instead of <Image> in search results
You're already using next/image elsewhere; the inline thumbnails would benefit from optimization and explicit dimensions to avoid CLS.

✅ Things I liked

The new Surface/PageContainer/PageHeader primitives are small, composable, and used consistently. Big readability win across the dashboard pages.
Landing page hero copy is sharp and the typography hierarchy is much cleaner than before.
The (Demo …) badge integration is well-thought-out (modulo bug Add claude GitHub actions 1761371115609 #1).
Pricing dialog states "Coming soon" instead of pretending to take payment — appropriately honest.
Good use of Suspense boundaries around useSearchParams consumers.

🧪 Test coverage

No tests were added or modified; the repo doesn't appear to have a test suite, so this is consistent with existing practice. The env-flag plumbing (#1) would be a great candidate for the first unit test.

Overall: design refresh is in good shape — the blocker is the DEMO_MODE flag plumbing (#1), since several new gates silently no-op in production demo builds.

…nding cleanup Checkpoint of the branch-wide 10/10 quality pass (see CLEANUP-PROGRESS.md). Done: - Group A (data layer): extractTextFromParts() helper, removed `as any`/double casts on message parts, consolidated demo type imports, stripped bloat comments. - Group B (onboarding): discriminated OnboardingToolEvent union, shared ONBOARDING_INPUT_CLASS, primary buttons reuse Button, className merge on 6 comps. - Group C (landing): deleted duplicate utils/cn.ts, SectionInner unification, CTA buttons reuse Button/CtaLink, theme tokens in browser-component. - Group D (charts): new components/stats/chart-shell.tsx (ChartShell, EmptyChartState, ChartFootnote, buildDynamicChartConfig); all 16 stats charts rewritten onto it; dropped dead recharts imports. Remaining (in CLEANUP-PROGRESS.md): Group D realtime hooks, Group E shell/shared (partial), and a final tsc/biome/build pass. Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>

claude · 2026-06-17T16:31:53Z

PR Review: Rework landing page and design systems

Reviewed the full diff (147 files, ~+8.7k/−4.4k). This is a large, well-organized UI rework plus a quality pass. The accompanying CLEANUP-PROGRESS.md is excellent — it honestly scopes what's done vs. outstanding, which made reviewing much easier. Note there's no CLAUDE.md in the repo, so I reviewed against general best practices + the conventions visible in the codebase.

Overall the refactor is a real improvement: the new components/stats/chart-shell.tsx (ChartShell / EmptyChartState / ChartFootnote / buildDynamicChartConfig) cleanly removes the duplicated card/empty-state/config boilerplate across all 16 charts (~−1700 net lines), the utils/cn.ts deletion is clean (verified: no dangling @/utils/cn imports remain), and the onboarding discriminated-union typing is sound.

Below are concrete findings, attributed to whether they're introduced here or pre-existing.

🔴 Worth addressing

hooks/use-cameras-realtime.ts:10-11, 102-106 — contradictory demo init. Calls useDemoListState<Camera>(mockCameras) (seeding cameras = mockCameras) but in demo mode the effect early-returns and the hook returns demoCameras instead, so the entire useDemoListState demo seed is dead/discarded. Reconcile to one path (seed [] here, or drop the helper and key off demoCameras). This is exactly the loose end flagged in CLEANUP-PROGRESS.md Group D.
hooks/use-stats-realtime.ts:23-42, 82 + app/(dashboard)/stats/page.tsx:88-96 — subscription churn. The consumer passes a fresh inline onUpdate arrow every render; handleJobChange/handleDetectionChange list [onUpdate] as deps, so they're recreated each render and the subscription effect tears down + re-adds both Supabase channels on every parent re-render. Memoize onUpdate/fetchStats (or use a ref). Not a correctness bug (closure values stay current), but real resubscription overhead.
lib/demo/session-store.ts:157, 202 — length-derived IDs can collide. Camera/rule IDs use the current array length (session-cam-${slug}-${index+1}). After a remove-then-add the new index can reproduce an existing ID, yielding duplicate React keys in EditableList/AssemblySequence and a stale-overlay collision. Use a monotonic counter or random suffix.
components/landing/braille-bg.tsx:206-226 (ButtonBrailleBg) — permanent 20fps loop. enabled is hardcoded true, so a 50ms full-grid setState runs continuously whenever the popular pricing card is mounted — even though the effect is largely hidden behind a radial mask and isn't hover-gated like MiniBrailleBg. Consider gating on hover/visibility to avoid a constant re-render cost on the landing page.

🟡 Minor

app/api/chat/route.ts:88-100 — unvalidated request body. await req.json() isn't wrapped in try/catch and the body is cast (as {...}) without validation, so a malformed body throws an unhandled 500 and chatId/messages are trusted blindly. Worth a schema guard (zod) given the new demo surface.
lib/chat-store.ts:10-16 — extractTextFromParts doesn't guard message.parts. If a UI message arrives without a parts array (caller-supplied JSON in the chat route) this throws. Default to ?? [].
lib/demo/rate-limit.ts:78-86 — IP key is spoofable. clientKeyFromRequest trusts raw x-forwarded-for/x-real-ip/cf-connecting-ip with no trusted-proxy allow-listing, so a client can rotate headers for a fresh bucket. The file's own header already calls this "best-effort" for a demo, so this is just confirming the limitation — fine to leave, but worth a code comment pinning the expected trusted proxy.
components/onboarding/copilot-panel.tsx:106 — streaming-text React key. Key is ${message.id}:text:${text}; during streaming the text mutates each token, so the key changes every frame and remounts <Response>. Use a part index instead.
components/landing/feature-shot.tsx:27 / app/page.tsx:76 — LCP image bypasses optimization. unoptimized={priority || undefined} conflates two independent concerns: the image you most want fast (priority/LCP candidate) is served unoptimized/full-size. Also, FeatureShot (index 1) and FeatureBlock's background (style-manifest.tsx:102, index 0) both claim priority — split priority signal.
app/(dashboard)/stats/page.tsx:62-82 — possible hydration mismatch. activeTab/timeRange initialize from localStorage in the useState initializer; SSR uses the default and the client may read a different saved value.
hooks/use-stats-realtime.ts:20, 84-87 — dead state. updateCount/setUpdateCount is never read anywhere; isActive is returned but never consumed. (lastUpdate is used — keep it.)
hooks/use-events-realtime.ts:8-23 & use-camera-realtime.ts:12-24 — duplicated demo branch. Both hand-roll the demo-mode boilerplate instead of using the shared useDemoListState; use-camera-realtime also runs the mock lookup twice (state initializer + effect). Matches the Group D "remaining" note.
components/watch/recording-info-modal.tsx:3 — unused IconHelpCircle import (dead, as flagged in the progress doc).
components/browser-component.tsx:25-38 — decorative lock <svg> lacks aria-hidden="true".

Notes / context (pre-existing, not introduced here)

next.config.ts:20-26 sets typescript.ignoreBuildErrors: true + eslint.ignoreDuringBuilds: true (pre-existing). This means the dead import / unused-state / hook-dep items above won't be caught by CI, and CLEANUP-PROGRESS.md rightly notes a full tsc/biome/next build pass hasn't been run on the merged result. Recommend completing that pass before merge given the ignore flags. (This PR does newly inline DEMO_MODE into the client bundle via the env block — intentional and the value is a non-sensitive boolean, just confirm nothing sensitive lands there later.)
server.js /rtmp WebSocket → FFmpeg spawn has no origin check/auth and no connection cap — but this PR only touched whitespace there, so it's pre-existing and out of scope. Flagging only for awareness.

Test coverage

No tests are included or updated in this PR, and I didn't find a test setup exercising these components/hooks. Given the realtime-hook subscription logic and the session-store ID generation both have correctness-sensitive edges noted above, a few targeted unit tests (ID uniqueness across add/remove cycles; hook subscribe/unsubscribe counts) would catch regressions the disabled build gating won't.

Nice work overall — the chart-shell consolidation and the honest progress doc stand out. The Group D realtime-hook items are the main things I'd resolve before merge.

🤖 Automated review by Claude Opus 4.8

…w animations

claude · 2026-06-20T19:42:44Z

🔍 PR Review — Rework landing page & design systems, add pricing section + demo mode

Reviewed the demo-mode infrastructure, API routes, realtime hooks, and a sampling of the UI rework. This is a large PR (149 files, +9.5k/-4.4k); the bulk is UI/landing, so I focused on the logic-bearing changes. Overall this is clean, well-documented work — the demo abstraction is thoughtful and the refactors are real improvements. A few items worth addressing before merge.

✅ Strengths

Demo-mode abstraction is well-factored. isDemoMode gating is consistent, the chat-store/ai-tools branch once per function and mirror the Supabase paths, and useDemoListState / use-realtime-demo.ts remove copy-pasted boilerplate nicely.
Graceful degradation. The chat route's provider tiering (Anthropic → OpenRouter → deterministic scripted) and the "never 500 in demo" fallback are good defensive design. The honest comments documenting the in-memory rate limiter's limitations are exactly right.
Nice cleanups. extractTextFromParts dedup, dropping (part as any).text, the new chart-shell.tsx, and tightening useStatsRealtime's return shape (verified the only consumer — stats/page.tsx — already destructures just { lastUpdate }).
Landing backgrounds correctly use next/image with fill/sizes/priority.

🐞 Correctness

maxDuration conflict (app/api/chat/route.ts:32 vs vercel.json:5). The route exports maxDuration = 30 while vercel.json sets 60 for the same function. These disagree — pick one source of truth. Given streamText with thinking + up to 10 tool steps, 60s is probably the intent; either bump the route export to 60 or drop the vercel.json functions entry and rely on the route segment config.

⚡ Robustness / Performance

In-memory globalThis stores won't persist across serverless instances. __demoChatStore, __demoReportStore, and __demoRateBuckets live in module/global memory. On Vercel, requests can land on different lambda instances (and cold starts wipe them). The rate limiter already acknowledges this, but the chat/report stores have a UX consequence: a visitor can create a chat or generate a report, then have a follow-up request routed elsewhere where only the seeded demo-chat-welcome exists. Acceptable for an ephemeral demo, but worth the same explicit caveat.

🔒 Security

Rate-limit key trusts client-supplied x-forwarded-for. clientKeyFromRequest takes the first hop of x-forwarded-for, which a client can spoof to dodge the per-IP bucket; keyless clients also collapse to the single "anonymous" bucket. Acknowledged as best-effort, fine for a demo — on Vercel the platform-injected client IP is a more trustworthy key. No secrets leaked: provider keys stay server-side and only the DEMO_MODE boolean reaches the client bundle.
Type-safety escape hatches. New code uses providerOptions: any and streamConfig: any in the chat route, and next.config.ts keeps typescript.ignoreBuildErrors: true + eslint.ignoreDuringBuilds: true. The config is pre-existing, but combined with the new anys a type regression in this hot path won't fail CI. Consider a narrow interface for streamConfig instead of any.

🧪 Test coverage

No tests appear to exist in the repo, and this PR adds several pure, high-value, easily-testable functions that encode the demo's deterministic behavior:
- lib/demo/scripted-copilot.ts — extractOrgName, the location/rule regex matching (the kind of thing that silently rots).
- lib/demo/rate-limit.ts — token-bucket refill/exhaustion math.
- lib/demo/session-store.ts mutators + deriveTitle / extractTextFromParts in chat-store.ts.
Even a handful of unit tests here would lock in the "always works on stage" guarantee the scripted copilot exists to provide.

Nits

AIAnalysisJob.models?: string[] (lib/supabase.ts) is labeled "Demo metadata" but added to the shared production type — minor type pollution, harmless.
createReport demo path keys IDs off Date.now(); fine, just not collision-safe under rapid calls (not a real concern for a demo).

Nice work overall — the demo system is genuinely well-built. The maxDuration mismatch is the only thing I'd consider close to blocking; the rest are judgment calls appropriate to a demo deployment.

_{🤖 Automated review}

…tions and improve report ID generation

claude · 2026-06-20T19:57:02Z

PR Review: Rework landing page & design systems, add pricing + demo mode

Reviewed the demo infrastructure, API gating, onboarding copilot, realtime hooks, and the new landing components. This is a large, well-structured PR (151 files) — the demo-mode design in particular is thoughtful. Notes below, grouped by area and severity. No CLAUDE.md exists in the repo, so I reviewed against existing conventions (Biome, the demo/flag gating pattern, useSyncExternalStore).

👍 What's done well

Clean demo gating. Every API route short-circuits on isDemoMode before touching Supabase/Mux (app/api/cameras/route.ts:8, app/api/stream/create/route.ts:14), and lib/chat-store.ts mirrors the Supabase paths with an in-memory store. Disabled mutations return 501 with a clear reason instead of throwing.
"Never 500 on stage" chat route. The provider tiering (Anthropic → OpenRouter → deterministic scripted) in app/api/chat/route.ts:154-193 and the hand-rolled UI-message-stream envelope (:55-92) is a genuinely nice fallback so the demo always responds.
Type design. The discriminated-union onboarding tool types (components/onboarding/onboarding-types.ts, constants.ts) keep the tool list in one place. session-store.ts correctly implements the useSyncExternalStore contract with a stable getServerSnapshot.

🔴 Bugs worth fixing

completeOnboarding tool call doesn't actually launch. applyToolEvent returns true for tool-completeOnboarding and the wizard only does setPhase("confirm") (onboarding-wizard.tsx:99). The redirect + completeOnboarding(true) live exclusively in handleFinish, wired to the manual "Launch" button (:89-94). But the scripted copilot emits completeOnboarding on "finish/done/launch" and its reply says "Taking you to the live dashboard now" (lib/demo/scripted-copilot.ts:249-257) — the user is actually just dropped on the confirm screen and must click again. Reply text and behavior disagree.
Tool-call dedup key can silently drop events. onboarding-wizard.tsx:117 falls back to ${message.id}:${type} when toolCallId is absent. Two calls of the same tool in one assistant message (expected on the real-LLM path — e.g. two addCameras) collide and the second is dropped. The scripted server path always sets a toolCallId, so this is latent today but a real hazard for the LLM path.
addCamera name vs. scripted dedup mismatch. addCamera stores camera_name as "<name> — <location>" (session-store.ts:159-161), but scripted-copilot.ts:191-199 dedups against the bare label. The scripted path never emits a location so it lines up today; the moment a camera carries a location (LLM path) the same camera re-adds every turn.
completeOnboarding Zod input defaults a negative to positive. confirm is optional and defaults to true (lib/ai-tools.ts:319-325), so a model calling it with confirm: false is indistinguishable from a positive confirmation.

🟠 Robustness / correctness

useChat error state is never surfaced. onboarding-wizard.tsx:86 destructures only messages, sendMessage, status. A failed turn leaves the assembling phase with no events and no timeout/abort, so the UI can get stuck on the assembly animation with no error shown.
Demo loading never transitions. In hooks/use-detections.ts the demo branch sets data directly and never flips loading, unlike the Supabase path — consumers expecting a loading state get none. Minor consistency issue.
payload.old.id may be undefined on DELETE. use-events-realtime.ts / use-cameras-realtime.ts filter on payload.old.id, which is only present if the table's replica identity includes it (default = PK, but worth confirming it isn't {}). A defensive guard avoids removing wrong/zero rows.
onUpdate must be referentially stable. use-stats-realtime.ts memoizes handleChange on onUpdate and re-subscribes channels when it changes (:66). If any caller passes an inline onUpdate, every parent render tears down and re-subscribes both channels. Either wrap callers in useCallback or document the contract.

⚡ Performance (landing page)

Braille backgrounds re-render via React state at 20fps. useBrailleGrid (components/landing/braille-bg.tsx:59-81) rebuilds a fresh string[][] (~1,125 cells) and calls setGrid every 50ms, reconciling 25 <div> rows per frame — across 4 pricing cards, and ButtonBrailleBg runs unconditionally (enabled = true) even offscreen. Prefer a <canvas> or a ref write over React state, and gate on viewport visibility. The exhaustive-deps disable at :59 also masks a stale-closure on the mutable simulation state.
Image optimization regressions. components/landing/feature-shot.tsx:27 sets unoptimized={priority || undefined}, so the LCP-candidate screenshot is served raw at 1920×1080 with no sizes. And app/page.tsx:76 marks the second (below-the-fold) feature priority, competing with the real LCP element. Drop unoptimized, add sizes, and reconsider which (if any) image is priority.
Offscreen interval churn. WorkflowPipeline runs ~4 setInterval cycles (workflow-pipeline.tsx:492) that setState even when scrolled out of view — gate with useInView/IntersectionObserver.
Dead code: components/landing/workflows.tsx is not imported anywhere (page.tsx uses WorkflowPipeline from style-manifest.tsx). It ships a large client component with 4 animation loops for nothing — recommend deleting it.

🔒 Security

lib/demo/rate-limit.ts is honest about its limits (per-instance, resets on cold start, x-forwarded-for is spoofable) and fine for a demo — flagging only that a hardened deploy needs Redis/Upstash-backed limiting, as the comment already says. Consider also skipping the token spend on the free scripted fallback path (rate limit currently applies even when no provider key is set, route.ts:156).
No secrets leak into the client; OPENROUTER_API_KEY/ANTHROPIC_API_KEY stay server-side. env: { DEMO_MODE } in next.config.ts correctly inlines only the boolean flag (note: it's baked at build time, so toggling demo mode requires a rebuild).

♿ Accessibility

Repeated pricing CTAs all read "Get Started" with no distinguishing label (pricing-section.tsx:244) — add an aria-label per tier.
The AsciiEye hero (page.tsx:181) has no text alternative; wrap with aria-hidden if decorative.

✅ Test coverage

There are no automated tests in the repo (*.test.* → none) and next.config.ts keeps typescript.ignoreBuildErrors + eslint.ignoreDuringBuilds enabled, so type/lint errors won't fail the build. Given how much new logic this PR adds (scripted-copilot turn parsing, dedup, the rate-limit token bucket), a few unit tests around scripted-copilot.ts (extractOrgName, dedup) and rate-limit.ts (checkRateLimit refill math) would be high-value and cheap.

Behavior note (not a bug)

In demo mode, when ANTHROPIC_API_KEY is set the route always uses Haiku and ignores selectedModel (route.ts:165-167), so the model dropdown is cosmetic in that configuration. Intentional, but worth a comment for future readers.

Overall: solid, cohesive work. Items 1–3 are the ones I'd address before merge; the rest are polish.

🤖 Generated with Claude Code

carsonSgit and others added 14 commits April 19, 2026 20:53

pre-polish demo

ba88f02

Update .gitignore and refactor Home component layout in page.tsx

2bc65db

Refactor Home component: replace ModelsSection and FeaturesAlternatin…

b869e8c

…g with StyleManifest; remove unused components

Enhance layout and styling: add new fonts, refactor BrowserComponent,…

d564a5d

… and update StyleManifest with alternating features; include background images

Refactor Home and StyleManifest components: streamline loading animat…

f1c1560

…ions, enhance layout, and update contributor information

Refactor layout and components: enhance DashboardLayout, add BrailleL…

c3c186f

…oader, and improve SiteHeader styling

Add PricingSection component and integrate it into StyleManifest

38d85fe

Refactor PricingSection component: update header text, enhance tier s…

597a3e9

…tyling, and improve button appearance

Refactor PricingSection component: update tier names, enhance button …

7bbb3f0

…styles, and remove loading animations from Home component Co-authored-by: Copilot <copilot@github.com>

Refactor MiniBrailleBg component: enhance density character generatio…

ab926fe

…n, update grid dimensions, and improve visual variants in PricingSection

Enhance Home and PricingSection components: add ModeToggle to navigat…

c7cd9a6

…ion, improve layout, and refine button animations

Add ButtonBrailleBg component to PricingSection: implement fluid nois…

c1e1a18

…e animation for button background

Refactor PricingSection component: update pricing tiers with new stru…

dcae096

…cture, add yearly/monthly toggle, and enhance layout

Remove obsolete log and state files from .omx directory

9d6fcf9

carsonSgit added 2 commits April 30, 2026 23:57

Refactor dashboard components: replace Card with Surface and enhance …

e306df4

…layout with PageContainer and PageHeader

Enhance chart components and hooks: add animation support and demo mo…

5de67ef

…de handling

feat(ui): polish ui and format

e1a1ee3

refactor: clean up imports and improve useEffect dependencies; add ne…

fe32220

…w animations

refactor: update scour workflow to fail on error; enhance type defini…

677d2d4

…tions and improve report ID generation

carsonSgit merged commit 5fca39b into master Jun 20, 2026
1 of 2 checks passed

carsonSgit deleted the demo-site branch June 20, 2026 22:46

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Rework landing page and design systems, added pricing section#15

Rework landing page and design systems, added pricing section#15
carsonSgit merged 20 commits into
masterfrom
demo-site

carsonSgit commented Apr 30, 2026

Uh oh!

claude Bot commented Apr 30, 2026

Uh oh!

claude Bot commented Apr 30, 2026

Uh oh!

claude Bot commented May 1, 2026

Uh oh!

claude Bot commented May 22, 2026

Uh oh!

claude Bot commented Jun 17, 2026

Uh oh!

claude Bot commented Jun 20, 2026

Uh oh!

claude Bot commented Jun 20, 2026

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

1 participant

Conversation

carsonSgit commented Apr 30, 2026

Uh oh!

claude Bot commented Apr 30, 2026

PR Review: Rework landing page and design systems, added pricing section

Overview

Bugs / Correctness

Performance

Code Quality

Minor

What's Working Well

Summary

Uh oh!

claude Bot commented Apr 30, 2026

Code Review — PR #15: Landing Page Rework + Demo Mode

Overview

Demo Mode Infrastructure

Landing Page / UI

Code Quality

.gitignore

No test coverage

Summary

Uh oh!

claude Bot commented May 1, 2026

Code Review — PR #15: Landing page rework, design system, pricing section

Overview

Bugs / Correctness

Performance

Accessibility

Minor

Positives

Summary

Uh oh!

claude Bot commented May 22, 2026

PR Review: Rework landing page and design systems, added pricing section

🔴 Likely bugs

🟡 Code quality

🟠 Performance

🔐 Security / correctness

♿ Accessibility

✅ Things I liked

🧪 Test coverage

Uh oh!

claude Bot commented Jun 17, 2026

PR Review: Rework landing page and design systems

🔴 Worth addressing

🟡 Minor

Notes / context (pre-existing, not introduced here)

Test coverage

Uh oh!

claude Bot commented Jun 20, 2026

🔍 PR Review — Rework landing page & design systems, add pricing section + demo mode

✅ Strengths

🐞 Correctness

⚡ Robustness / Performance

🔒 Security

🧪 Test coverage

Nits

Uh oh!

claude Bot commented Jun 20, 2026

PR Review: Rework landing page & design systems, add pricing + demo mode

👍 What's done well

🔴 Bugs worth fixing

🟠 Robustness / correctness

⚡ Performance (landing page)

🔒 Security

♿ Accessibility

✅ Test coverage

Behavior note (not a bug)

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

1 participant