// Hero: Pathrule desktop app mockup, auto-tab rotation const { useState, useEffect, useRef, useMemo } = React; // ────────────────────────────────────────────────────────────── // Lucide icons — inline SVG paths from lucide.dev // ────────────────────────────────────────────────────────────── const Icon = ({ children, size = 14, stroke = 1.6, color = 'currentColor', style }) => ( {children} ); const Search = (p) => ; const ChevronDown = (p) => ; const ChevronRight = (p) => ; const ChevronsUpDown = (p) => ; const Settings2 = (p) => ; const Plus = (p) => ; const Hash = (p) => ; const Folder = (p) => ; const FolderOpen = (p) => ; const FileIcon = (p) => ; const Clock = (p) => ; // Tab icons (matching the attached screenshots) const PanelTop = (p) => ; // Summary const Columns2 = (p) => ; // Memories const Scale = (p) => ; // Rules const SparklesIcon = (p) => ; // Skills const Shield = (p) => ; // Permissions const GithubIcon = (p) => ; const BookOpen = (p) => ; // ────────────────────────────────────────────────────────────── // App Mockup — cycles through Summary → Memories → Rules // ────────────────────────────────────────────────────────────── function AppMockup() { const TAB_ORDER = ['Memories', 'Rules', 'Skills']; const [tabIdx, setTabIdx] = useState(0); // start on Memories const [tick, setTick] = useState(0); // Auto-rotate useEffect(() => { const id = setInterval(() => { setTabIdx(i => (i + 1) % TAB_ORDER.length); setTick(t => t + 1); }, 4800); return () => clearInterval(id); }, []); const activeTab = TAB_ORDER[tabIdx]; const tabs = [ { name: 'Memories', icon: BookOpen }, { name: 'Rules', icon: Scale }, { name: 'Skills', icon: SparklesIcon }, ]; const tree = [ { name: '.claude', type: 'dir', depth: 1 }, { name: 'apps', type: 'dir', depth: 1, open: true }, { name: 'web', type: 'dir', depth: 2, open: true }, { name: 'checkout', type: 'dir', depth: 3, active: true, open: true }, { name: 'cart.tsx', type: 'file', depth: 4 }, { name: 'payment.tsx', type: 'file', depth: 4 }, { name: 'services', type: 'dir', depth: 1 }, { name: 'packages', type: 'dir', depth: 1 }, { name: 'README.md', type: 'file', depth: 1 }, ]; return (
{/* title bar */}
Pathrule
Search memories, rules, skills
MCP ready Share
{/* body */}
{/* sidebar */} {/* tree */}
Tree
acme-shop
{tree.map((n, i) => (
{n.type === 'dir' ? (n.open ? : ) : null} {n.type === 'dir' ? (n.open ? : ) : } {n.name}
))}
{/* node detail */}
{/* crumb */}
apps / web / checkout
{/* tabs */}
{tabs.map((t, i) => { const IC = t.icon; const isActive = t.name === activeTab; return (
{t.name} {isActive && }
); })}
{/* content panel */}
{activeTab === 'Memories' && } {activeTab === 'Rules' && } {activeTab === 'Skills' && }
); } // ────────────────────────────────────────────────────────────── // Memories view // ────────────────────────────────────────────────────────────── function MemoriesView() { const focused = { title: 'Checkout Field Map', body: 'Coupons live on lineItem, never on total. Legacy total.coupon field is a no-op; existing data kept for analytics only. Do not write to it.', author: 'MR', color: 'hsl(212 92% 58%)', updated: 'updated 2 days ago', }; const skeletons = [ { c: 'hsl(152 60% 52%)' }, { c: 'hsl(35 92% 58%)' }, { c: 'hsl(280 60% 65%)' }, ]; return ( <>
Memories
What Claude should remember for this node
{focused.title}
MEMORY
{focused.body}
{focused.updated}
{focused.author}
{skeletons.map((s, i) => (
))}
); } // ────────────────────────────────────────────────────────────── // Rules view // ────────────────────────────────────────────────────────────── function RulesView() { const focused = { title: 'Coupons only on lineItem', body: 'Never write coupon values to order.total. All discount logic must live on the lineItem. Violations block the commit.', level: 'HIGH', scope: 'PROJECT', author: 'MR', color: 'hsl(0 72% 55%)', updated: 'updated today', }; const skeletons = [ { c: 'hsl(280 60% 65%)', lvl: 'HIGH', lvlColor: 'hsl(0 72% 55%)' }, { c: 'hsl(152 60% 52%)', lvl: 'MEDIUM', lvlColor: 'hsl(35 92% 58%)' }, { c: 'hsl(212 92% 58%)', lvl: 'HIGH', lvlColor: 'hsl(0 72% 55%)' }, ]; return ( <>
Rules
Hard constraints Claude must follow in this scope
{focused.title}
{focused.level} {focused.scope}
{focused.body}
{focused.updated}
{focused.author}
{skeletons.map((s, i) => (
))}
); } // ────────────────────────────────────────────────────────────── // Skills view // ────────────────────────────────────────────────────────────── function SkillsView() { const focused = { title: 'Stripe webhook replay', body: 'Replay failed webhooks from dashboard with idempotency key preserved. Use scripts/replay-webhook.ts; requires STRIPE_CLI_TOKEN env.', tag: 'SKILL', scope: 'PROJECT', author: 'MR', color: 'hsl(280 60% 65%)', updated: 'updated 4 days ago', }; const skeletons = [ { c: 'hsl(212 92% 58%)', source: 'github' }, { c: 'hsl(152 60% 52%)', source: 'manual' }, { c: 'hsl(35 92% 58%)', source: 'github' }, ]; return ( <>
Skills
Procedures Claude can invoke on demand
{focused.title}
{focused.tag} GITHUB
{focused.body}
{focused.updated}
{focused.author}
{skeletons.map((s, i) => (
{s.source === 'github' && ( )}
))}
); } // ────────────────────────────────────────────────────────────── // Summary view // ────────────────────────────────────────────────────────────── function SummaryView() { const tiles = [ { val: '1,419', label: 'Rule reminded', sub: 'times your rule was shown to the AI', color: 'hsl(152 60% 55%)', path: 'M0 22 L20 18 L40 23 L60 14 L80 20 L100 8 L120 15' }, { val: '242', label: 'Memory shown', sub: 'times your memory was shown to us…', color: 'hsl(212 92% 62%)', path: 'M0 20 L20 16 L40 22 L60 10 L80 14 L100 5 L120 12' }, { val: '73%', label: 'File-scoped info', sub: '142 / 195 files', color: 'hsl(35 92% 60%)', path: 'M0 18 L20 20 L40 12 L60 16 L80 6 L100 12 L120 4' }, { val: '64%', label: 'Got it right first try', sub: '125 files, 70 revisits', color: 'hsl(280 60% 65%)', path: 'M0 22 L20 14 L40 18 L60 8 L80 14 L100 6 L120 10' }, ]; return ( <> {/* impact hero */}
Pathrule · Impact Summary
1,661
Reminders Delivered · Last 30 days
In the last 30 days Pathrule reminded the AI 1,419 times of your rules, 242 times of your memories.
242 memory reminders 1,419 rule reminders 73% files covered 67% workspace coverage
{/* added this month strip */}
↗ Added this month {[ [28, 58], [22, 50], [20, 54] ].map(([numW, labelW], i) => ( ))}
{/* metric tiles — skeleton */}
{tiles.map((t, i) => (
{/* value */}
{/* label */}
{/* sub */}
{/* sparkline */}
))}
); } // ────────────────────────────────────────────────────────────── // Shared small bits // ────────────────────────────────────────────────────────────── function Pill({ color, children }) { return ( {children} ); } function AnimatedRing() { return ( ); } const btnSm = () => ({ height: 28, padding: '0 12px', borderRadius: 6, background: 'hsl(0 0% 10%)', border: '1px solid hsl(0 0% 18%)', color: 'var(--foreground)', fontSize: 11.5, cursor: 'pointer', display: 'inline-flex', alignItems: 'center', gap: 6, }); const avatarStyle = (color, label) => ({ width: 26, height: 26, borderRadius: 13, background: `${color.replace(')', ' / 0.2)')}`, border: `1px solid ${color.replace(')', ' / 0.45)')}`, color: color, fontSize: 10, fontWeight: 600, display: 'inline-flex', alignItems: 'center', justifyContent: 'center', flexShrink: 0, }); const skeletonAvatar = (color) => ({ width: 26, height: 26, borderRadius: 13, background: `${color.replace(')', ' / 0.15)')}`, border: `1px solid ${color.replace(')', ' / 0.3)')}`, flexShrink: 0, }); const levelPill = (color) => ({ fontSize: 9.5, color: color, background: `${color.replace(')', ' / 0.14)')}`, border: `1px solid ${color.replace(')', ' / 0.3)')}`, padding: '1px 6px', borderRadius: 3, letterSpacing: '0.06em', }); const scopePill = () => ({ fontSize: 9.5, color: 'hsl(0 0% 60%)', background: 'hsl(0 0% 12%)', border: '1px solid hsl(0 0% 16%)', padding: '1px 6px', borderRadius: 3, letterSpacing: '0.06em', }); // ────────────────────────────────────────────────────────────── // Hero // ────────────────────────────────────────────────────────────── function Hero() { return (
Closed Beta Invitations rolling out weekly

Team knowledge,
delivered to every AI session.

Pathrule routes your team's memory, rules and skills into Claude Code, Cursor and Codex. Path-scoped, just-in-time, without context bloat. Claude shouldn't be smarter for one person than for the team.

{/* logo strip */}
Works with the tools your team already uses
{['Claude Code', 'Cursor', 'Codex', 'Windsurf'].map(tool => (
{tool}
))}
); } Object.assign(window, { Hero, AppMockup });