lukaszraczylo/claude-mnemonic
1
0
Fork 0
mirror of https://github.com/lukaszraczylo/claude-mnemonic.git synced 2026-10-14 05:30:11 +00:00
Code Issues Packages Projects Releases Wiki Activity

deslopify docs website

Browse Source
This commit is contained in:
lukaszraczylo
2026-05-26 19:22:47 +01:00
parent c5967c3eaa
commit 549fefc675
15 changed files with 1690 additions and 783 deletions
Download Patch File Download Diff File Expand all files Collapse all files
docs/src/App.vue
+165 -405
View File
@@ -1,398 +1,153 @@
<template>
<div class="bg-slate-950 text-white min-h-screen relative overflow-hidden">
<!-- Animated Background -->
<div class="fixed inset-0 pointer-events-none">
<!-- Gradient orbs -->
<div class="absolute top-0 left-1/4 w-96 h-96 bg-amber-500/10 rounded-full blur-3xl animate-float"></div>
<div class="absolute bottom-1/4 right-1/4 w-80 h-80 bg-amber-400/5 rounded-full blur-3xl animate-float-delayed"></div>
<div class="absolute top-1/2 right-0 w-64 h-64 bg-slate-700/20 rounded-full blur-3xl animate-glow"></div>
<!-- Grid pattern -->
<div class="absolute inset-0 bg-[linear-gradient(rgba(148,163,184,0.03)_1px,transparent_1px),linear-gradient(90deg,rgba(148,163,184,0.03)_1px,transparent_1px)] bg-[size:50px_50px]"></div>
<!-- Floating particles -->
<div v-for="i in 12" :key="i"
class="particle animate-particle"
:style="{
left: `${(i * 8.3) % 100}%`,
animationDelay: `${i * 1.5}s`,
animationDuration: `${15 + (i % 5) * 3}s`
}"></div>
</div>
<div class="min-h-screen flex flex-col">
<NavBar :mobile-menu-open="mobileMenuOpen" @toggle-menu="mobileMenuOpen = !mobileMenuOpen" />
<HeroSection
badge="The missing piece for Claude Code"
title-before="Yesterday's context."
title-highlight="Today's session."
subtitle="Stop re-explaining your codebase. Claude Mnemonic captures bug fixes, architecture decisions, and coding patterns - then brings them back exactly when you need them."
/>
<main class="flex-1">
<HeroSection />
<!-- Dashboard Preview -->
<section class="py-12 lg:py-16 px-4 sm:px-6 relative">
<div class="max-w-6xl mx-auto">
<div class="relative rounded-xl overflow-hidden border border-slate-700/50 shadow-2xl shadow-amber-500/5">
<div class="absolute inset-0 bg-gradient-to-t from-slate-950 via-transparent to-transparent pointer-events-none z-10"></div>
<img
src="/claude-mnemonic.jpg"
alt="Claude Mnemonic Dashboard"
class="w-full h-auto"
/>
<section class="py-10 px-4 sm:px-6">
<div class="max-w-5xl mx-auto">
<div class="rounded-xl overflow-hidden border border-neutral-800">
<img src="/claude-mnemonic.jpg" alt="Claude Mnemonic Dashboard" class="w-full h-auto block" loading="lazy" />
</div>
<p class="text-center text-neutral-600 text-xs mt-3 tracking-wide uppercase">Dashboard — localhost:37777</p>
</div>
<p class="text-center text-slate-500 text-sm mt-4">The dashboard at localhost:37777 - browse, search, and manage your memories. View graph stats, vector metrics, storage savings, and performance analytics.</p>
</div>
</section>
</section>
<!-- Problem Section -->
<section class="py-20 lg:py-28 px-4 sm:px-6 relative">
<div class="max-w-6xl mx-auto grid lg:grid-cols-2 gap-8 lg:gap-16 items-center">
<div>
<h2 class="text-2xl sm:text-3xl md:text-4xl lg:text-5xl font-bold text-white mb-6">Sound familiar?</h2>
<p class="text-slate-400 text-base sm:text-lg mb-8">Every Claude Code session starts fresh. That bug you fixed last Tuesday? Gone. The auth flow you explained in detail? Forgotten. Your team's naming conventions? You'll explain them again.</p>
<ul class="space-y-4 sm:space-y-5">
<li class="flex items-start gap-3 sm:gap-4 text-slate-400">
<i class="fas fa-times-circle text-red-400 mt-1 flex-shrink-0"></i>
<span class="text-sm sm:text-base">"We fixed this exact race condition last week..."</span>
</li>
<li class="flex items-start gap-3 sm:gap-4 text-slate-400">
<i class="fas fa-times-circle text-red-400 mt-1 flex-shrink-0"></i>
<span class="text-sm sm:text-base">"No, we use kebab-case for API routes, not camelCase..."</span>
</li>
<li class="flex items-start gap-3 sm:gap-4 text-slate-400">
<i class="fas fa-times-circle text-red-400 mt-1 flex-shrink-0"></i>
<span class="text-sm sm:text-base">"The database is Postgres, not MySQL. I told you yesterday..."</span>
</li>
<li class="flex items-start gap-3 sm:gap-4 text-white">
<i class="fas fa-check-circle text-amber-500 mt-1 flex-shrink-0"></i>
<span class="text-sm sm:text-base"><strong>Mnemonic remembers so you don't have to repeat yourself.</strong></span>
</li>
</ul>
</div>
<div class="glass rounded-2xl p-6 sm:p-8 relative overflow-hidden glow-amber">
<div class="absolute top-0 left-0 right-0 h-px bg-gradient-to-r from-transparent via-amber-500 to-transparent"></div>
<p class="text-slate-500 text-xs sm:text-sm mb-4 font-mono">// What Mnemonic captures automatically:</p>
<div class="space-y-3">
<FlowItem icon="fas fa-bug" title="Bug fixes & solutions" description='"Fixed N+1 query in user loader by adding .includes(:posts)"' />
<FlowItem icon="fas fa-sitemap" title="Architecture decisions" description='"Using event sourcing for audit trail - all mutations go through EventStore"' />
<FlowItem icon="fas fa-code-branch" title="Project conventions" description='"API routes use /api/v1/ prefix, kebab-case for endpoints"' />
<FlowItem icon="fas fa-shield-alt" title="Security patterns" description='"Always validate JWT on server side, never trust client claims"' />
<section id="features" class="py-20 px-4 sm:px-6">
<div class="max-w-5xl mx-auto">
<h2 class="text-3xl sm:text-4xl font-bold text-white mb-4">What it does</h2>
<p class="text-neutral-500 mb-12 max-w-xl">Captures context from your Claude Code sessions and brings it back when you need it. No manual effort.</p>
<div class="grid sm:grid-cols-2 lg:grid-cols-3 gap-6">
<FeatureItem
v-for="feature in features"
:key="feature.title"
:icon="feature.icon"
:title="feature.title"
:description="feature.description"
/>
</div>
</div>
</div>
</section>
</section>
<!-- Features Section -->
<section id="features" class="py-20 lg:py-28 bg-slate-900/30 relative">
<div class="absolute top-0 left-0 right-0 h-px bg-gradient-to-r from-transparent via-slate-700 to-transparent"></div>
<div class="max-w-6xl mx-auto px-4 sm:px-6">
<SectionHeader title="Built for real workflows" subtitle="Not just storage - intelligent context that makes Claude more useful over time" />
<div class="grid sm:grid-cols-2 lg:grid-cols-3 gap-4 sm:gap-6">
<FeatureCard
v-for="feature in features"
:key="feature.title"
:icon="feature.icon"
:title="feature.title"
:description="feature.description"
/>
<section class="py-10 px-4 sm:px-6">
<div class="max-w-5xl mx-auto">
<div class="rounded-xl overflow-hidden border border-neutral-800">
<img src="/observation-relation-graph.jpg" alt="Knowledge Graph" class="w-full h-auto block" loading="lazy" />
</div>
<p class="text-center text-neutral-600 text-xs mt-3 tracking-wide uppercase">Observation relationship graph</p>
</div>
</div>
</section>
</section>
<!-- Knowledge Graph Preview -->
<section class="py-16 lg:py-20 px-4 sm:px-6 relative">
<div class="max-w-5xl mx-auto">
<SectionHeader title="See how knowledge connects" subtitle="The knowledge graph reveals relationships between your memories automatically" />
<div class="relative rounded-xl overflow-hidden border border-slate-700/50 shadow-2xl shadow-purple-500/5">
<img
src="/observation-relation-graph.jpg"
alt="Knowledge Graph Visualization"
class="w-full h-auto"
/>
</div>
<p class="text-center text-slate-500 text-sm mt-4">Click any observation to explore its relationships - see what causes what, what fixes what, and how concepts evolve</p>
</div>
</section>
<section id="install" class="py-20 px-4 sm:px-6">
<div class="max-w-5xl mx-auto">
<h2 class="text-3xl sm:text-4xl font-bold text-white mb-4">Install</h2>
<p class="text-neutral-500 mb-8">One command. No configuration. No account.</p>
<!-- Before/After Section -->
<section class="py-20 lg:py-28 px-4 sm:px-6">
<div class="max-w-6xl mx-auto">
<SectionHeader title="The difference" subtitle="Same question. Different experience." />
<div class="grid md:grid-cols-2 gap-6 sm:gap-8">
<!-- Before -->
<div class="glass rounded-2xl p-5 sm:p-6 relative border-red-500/20">
<div class="absolute top-3 sm:top-4 right-3 sm:right-4 bg-red-500/20 text-red-400 px-2 sm:px-3 py-1 rounded-full text-xs font-medium">Without Mnemonic</div>
<div class="space-y-3 sm:space-y-4 mt-8">
<div class="bg-slate-800/50 rounded-lg p-3 sm:p-4">
<p class="text-slate-400 text-xs sm:text-sm"><span class="text-blue-400">You:</span> Fix the authentication bug in the login flow</p>
</div>
<div class="bg-slate-800/50 rounded-lg p-3 sm:p-4">
<p class="text-slate-400 text-xs sm:text-sm"><span class="text-amber-400">Claude:</span> I'd be happy to help! Can you tell me about your authentication setup? What framework are you using? How is the login flow structured?</p>
</div>
<div class="bg-slate-800/50 rounded-lg p-3 sm:p-4">
<p class="text-slate-400 text-xs sm:text-sm"><span class="text-blue-400">You:</span> We use NextAuth with Postgres. The flow goes through /api/auth/... We talked about this last week...</p>
</div>
<p class="text-red-400 text-xs sm:text-sm text-center pt-2"><i class="fas fa-clock mr-2"></i>5+ minutes of re-explaining context</p>
</div>
<div class="flex gap-1 mb-6">
<button
v-for="tab in installTabs"
:key="tab.id"
@click="activeTab = tab.id"
:class="[
'px-4 py-2 text-sm rounded-lg transition-colors',
activeTab === tab.id
? 'bg-neutral-800 text-white'
: 'text-neutral-500 hover:text-neutral-300'
]"
>
{{ tab.label }}
</button>
</div>
<!-- After -->
<div class="glass rounded-2xl p-5 sm:p-6 relative border-green-500/20">
<div class="absolute top-3 sm:top-4 right-3 sm:right-4 bg-green-500/20 text-green-400 px-2 sm:px-3 py-1 rounded-full text-xs font-medium">With Mnemonic</div>
<div class="space-y-3 sm:space-y-4 mt-8">
<div class="bg-slate-800/50 rounded-lg p-3 sm:p-4">
<p class="text-slate-400 text-xs sm:text-sm"><span class="text-blue-400">You:</span> Fix the authentication bug in the login flow</p>
</div>
<div class="bg-slate-800/50 rounded-lg p-3 sm:p-4">
<p class="text-slate-400 text-xs sm:text-sm"><span class="text-amber-400">Claude:</span> Looking at your NextAuth setup with Postgres, I see the issue is likely in the callback at <code class="text-amber-300 text-xs">/api/auth/[...nextauth].ts</code>. Based on the session validation pattern we established, the fix is...</p>
</div>
<p class="text-green-400 text-xs sm:text-sm text-center pt-2"><i class="fas fa-bolt mr-2"></i>Instant context. Immediate value.</p>
</div>
<div v-show="activeTab === 'macos'">
<CodeBlock code="curl -sSL https://raw.githubusercontent.com/lukaszraczylo/claude-mnemonic/main/scripts/install.sh | bash" />
</div>
</div>
</div>
</section>
<!-- How It Works Section -->
<section id="how-it-works" class="py-20 lg:py-28 px-4 sm:px-6 bg-slate-900/30">
<div class="max-w-6xl mx-auto">
<SectionHeader title="Zero setup. Zero maintenance." subtitle="Install once, benefit forever. Mnemonic works silently in the background." />
<div class="grid sm:grid-cols-2 lg:grid-cols-4 gap-6 sm:gap-8 relative">
<div class="hidden lg:block absolute top-10 left-[60px] right-[60px] h-0.5 bg-gradient-to-r from-amber-500 via-amber-400 to-amber-500 opacity-30"></div>
<StepCard
v-for="step in steps"
:key="step.number"
:number="step.number"
:title="step.title"
:description="step.description"
/>
</div>
</div>
</section>
<div v-show="activeTab === 'windows'">
<CodeBlock code="irm https://raw.githubusercontent.com/lukaszraczylo/claude-mnemonic/main/scripts/install.ps1 | iex" />
</div>
<!-- Installation Section -->
<section id="installation" class="py-20 lg:py-28 px-4 sm:px-6">
<div class="max-w-6xl mx-auto">
<SectionHeader title="Quick install" subtitle="One command. No configuration. No account required." />
<div v-show="activeTab === 'source'">
<CodeBlock code="git clone https://github.com/lukaszraczylo/claude-mnemonic.git&#10;cd claude-mnemonic&#10;make build && make install" />
<p class="text-neutral-600 text-xs mt-2">Requires: Go 1.24+, Node.js 18+, CGO compiler</p>
</div>
<div class="flex flex-wrap justify-center gap-2 mb-6 sm:mb-8">
<button
v-for="tab in installTabs"
:key="tab.id"
@click="activeTab = tab.id"
:class="[
'px-4 sm:px-5 py-2 sm:py-2.5 rounded-lg text-xs sm:text-sm font-medium transition-all',
activeTab === tab.id
? 'bg-amber-500/15 border border-amber-500 text-amber-500'
: 'glass text-slate-400 hover:border-slate-600'
]"
>
{{ tab.label }}
</button>
</div>
<div v-show="activeTab === 'macos'">
<CodeBlock :code="installCommands.macos">
<span class="text-slate-500"># That's it. Seriously.</span>
<br>
<span class="text-amber-400">curl -sSL https://raw.githubusercontent.com/lukaszraczylo/claude-mnemonic/main/scripts/install.sh | bash</span>
</CodeBlock>
</div>
<div v-show="activeTab === 'windows'">
<CodeBlock :code="installCommands.windows">
<span class="text-slate-500"># PowerShell (as Administrator)</span>
<br>
<span class="text-amber-400">irm https://raw.githubusercontent.com/lukaszraczylo/claude-mnemonic/main/scripts/install.ps1 | iex</span>
</CodeBlock>
</div>
<div v-show="activeTab === 'source'">
<CodeBlock :code="installCommands.source">
<span class="text-slate-500"># For contributors and tinkerers</span>
<br>
<span class="text-amber-400">git clone https://github.com/lukaszraczylo/claude-mnemonic.git</span>
<br>
<span class="text-amber-400">cd claude-mnemonic</span>
<br>
<span class="text-amber-400">make build && make install</span>
<br><br>
<span class="text-slate-500"># Requires: Go 1.24+, Node.js 18+, CGO compiler</span>
</CodeBlock>
</div>
<p class="text-center text-slate-500 mt-6 sm:mt-8 text-xs sm:text-sm">
After install, open <a href="http://localhost:37777" class="text-amber-400 hover:underline animated-underline">localhost:37777</a> to see the dashboard.
Start a new Claude Code CLI session - memory is now active.
</p>
</div>
</section>
<!-- Requirements Section -->
<section id="requirements" class="py-20 lg:py-28 px-4 sm:px-6 bg-slate-900/30">
<div class="max-w-6xl mx-auto">
<SectionHeader title="Requirements" subtitle="Minimal dependencies. Everything else is built-in." />
<div class="max-w-xl mx-auto">
<div class="glass rounded-2xl p-5 sm:p-6">
<div class="flex items-center gap-2 mb-4">
<i class="fas fa-check-circle text-green-500"></i>
<span class="text-white font-semibold text-sm sm:text-base">That's all you need</span>
</div>
<div class="space-y-3">
<div v-for="req in requiredDeps" :key="req.name" class="flex items-start gap-3 p-3 bg-slate-800/50 rounded-lg">
<i :class="[req.icon, 'text-amber-500 mt-0.5']"></i>
<div>
<code class="text-white text-xs sm:text-sm font-semibold">{{ req.name }}</code>
<p class="text-slate-400 text-xs mt-1">{{ req.description }}</p>
</div>
</div>
</div>
<p class="text-slate-500 text-xs mt-4">
<i class="fas fa-info-circle mr-1"></i>
No Python. No external services. Semantic search with local embeddings is built-in.
<div class="mt-8 p-4 rounded-lg border border-neutral-800 bg-neutral-900/50 max-w-2xl">
<p class="text-neutral-500 text-sm">
<i class="fas fa-info-circle text-neutral-600 mr-1"></i>
After install, open <a href="http://localhost:37777" class="text-amber-500 hover:text-amber-400">localhost:37777</a> for the dashboard. Start a new Claude Code session — memory is active.
</p>
</div>
</div>
</div>
</section>
</section>
<!-- Configuration Section -->
<section id="configuration" class="py-20 lg:py-28 px-4 sm:px-6 bg-slate-900/30">
<div class="max-w-6xl mx-auto">
<SectionHeader title="Fully configurable" subtitle="Works out of the box, but adapts to your preferences" />
<section id="requirements" class="py-20 px-4 sm:px-6">
<div class="max-w-5xl mx-auto">
<h2 class="text-3xl sm:text-4xl font-bold text-white mb-4">Requirements</h2>
<p class="text-neutral-500 mb-8">Minimal dependencies. Everything else is built in.</p>
<div class="grid lg:grid-cols-2 gap-6 sm:gap-8">
<!-- Config file example -->
<div class="glass rounded-2xl p-5 sm:p-6">
<div class="flex items-center gap-2 mb-4">
<i class="fas fa-cog text-amber-500"></i>
<span class="text-white font-semibold text-sm sm:text-base">~/.claude-mnemonic/settings.json</span>
<div class="grid sm:grid-cols-2 gap-4 max-w-xl">
<div v-for="req in requiredDeps" :key="req.name" class="p-4 rounded-lg border border-neutral-800 bg-neutral-900/50">
<div class="flex items-center gap-2 mb-1">
<i :class="[req.icon, 'text-amber-500 text-sm']"></i>
<code class="text-white text-sm font-semibold">{{ req.name }}</code>
</div>
<p class="text-neutral-500 text-xs pl-6">{{ req.description }}</p>
</div>
<pre class="text-xs sm:text-sm font-mono overflow-x-auto"><code><span class="text-slate-500">{</span>
<span class="text-emerald-400">"CLAUDE_MNEMONIC_WORKER_PORT"</span><span class="text-slate-500">:</span> <span class="text-amber-400">37777</span><span class="text-slate-500">,</span>
<span class="text-emerald-400">"CLAUDE_MNEMONIC_CONTEXT_OBSERVATIONS"</span><span class="text-slate-500">:</span> <span class="text-amber-400">100</span><span class="text-slate-500">,</span>
<span class="text-emerald-400">"CLAUDE_MNEMONIC_CONTEXT_FULL_COUNT"</span><span class="text-slate-500">:</span> <span class="text-amber-400">25</span><span class="text-slate-500">,</span>
<span class="text-emerald-400">"CLAUDE_MNEMONIC_MODEL"</span><span class="text-slate-500">:</span> <span class="text-sky-400">"haiku"</span>
<span class="text-slate-500">}</span></code></pre>
</div>
<p class="text-neutral-600 text-sm mt-4">No Python. No external services. No API keys — uses your existing Claude Pro/Max subscription.</p>
</div>
</section>
<!-- Config options list -->
<div class="space-y-3 sm:space-y-4">
<div v-for="config in configOptions" :key="config.name" class="glass rounded-xl p-4 hover:border-amber-500/20 transition-colors">
<div class="flex items-start gap-3">
<div class="w-8 h-8 bg-amber-500/15 rounded-lg flex items-center justify-center text-amber-500 flex-shrink-0 text-sm">
<i :class="config.icon"></i>
<section id="config" class="py-20 px-4 sm:px-6">
<div class="max-w-5xl mx-auto">
<h2 class="text-3xl sm:text-4xl font-bold text-white mb-4">Configuration</h2>
<p class="text-neutral-500 mb-8">Works out of the box. Adjust if you want to.</p>
<div class="grid lg:grid-cols-2 gap-8">
<div class="rounded-lg border border-neutral-800 bg-neutral-900/50 p-5">
<p class="text-neutral-600 text-xs mb-3 font-mono">~/.claude-mnemonic/settings.json</p>
<pre class="text-sm overflow-x-auto leading-relaxed"><code>{
<span class="text-emerald-400">"CLAUDE_MNEMONIC_WORKER_PORT"</span>: <span class="text-amber-400">37777</span>,
<span class="text-emerald-400">"CLAUDE_MNEMONIC_CONTEXT_OBSERVATIONS"</span>: <span class="text-amber-400">100</span>,
<span class="text-emerald-400">"CLAUDE_MNEMONIC_CONTEXT_FULL_COUNT"</span>: <span class="text-amber-400">25</span>,
<span class="text-emerald-400">"CLAUDE_MNEMONIC_RERANKING_ENABLED"</span>: <span class="text-amber-400">true</span>
}</code></pre>
</div>
<div class="space-y-2">
<div v-for="config in configOptions" :key="config.name" class="flex items-start gap-3 p-3 rounded-lg border border-neutral-800/50">
<div class="w-6 h-6 rounded bg-neutral-800 flex items-center justify-center flex-shrink-0 mt-0.5">
<i class="fas fa-sliders text-neutral-500 text-xs"></i>
</div>
<div class="min-w-0">
<code class="text-amber-400 text-xs sm:text-sm">{{ config.name }}</code>
<p class="text-slate-400 text-xs sm:text-sm mt-1">{{ config.description }}</p>
<div>
<code class="text-amber-500 text-xs">{{ config.name }}</code>
<p class="text-neutral-500 text-xs mt-0.5">{{ config.description }}</p>
</div>
</div>
</div>
</div>
<p class="text-neutral-600 text-xs mt-6">
All settings also work as environment variables. <a href="https://github.com/lukaszraczylo/claude-mnemonic#configuration" target="_blank" class="text-neutral-500 hover:text-neutral-300">Full docs</a>.
</p>
</div>
</section>
<p class="text-center text-slate-500 mt-6 sm:mt-8 text-xs sm:text-sm">
All settings can also be set via environment variables. See <a href="https://github.com/lukaszraczylo/claude-mnemonic#configuration" target="_blank" class="text-amber-400 hover:underline">full documentation</a> for all options.
</p>
</div>
</section>
<!-- Technical Details -->
<section class="py-20 lg:py-28 px-4 sm:px-6">
<div class="max-w-6xl mx-auto">
<SectionHeader title="Under the hood" subtitle="Built with simplicity and performance in mind" />
<div class="grid sm:grid-cols-2 lg:grid-cols-3 gap-4 sm:gap-6 text-center">
<div class="glass rounded-2xl p-6 sm:p-8 hover:border-amber-500/30 transition-colors">
<div class="text-3xl sm:text-4xl font-bold text-amber-500 mb-2">Go</div>
<p class="text-slate-400 text-xs sm:text-sm">Single binary. Fast startup, low memory. Zero runtime dependencies.</p>
</div>
<div class="glass rounded-2xl p-6 sm:p-8 hover:border-amber-500/30 transition-colors">
<div class="text-3xl sm:text-4xl font-bold text-amber-500 mb-2">SQLite</div>
<p class="text-slate-400 text-xs sm:text-sm">FTS5 full-text search. Single file database. Survives restarts.</p>
</div>
<div class="glass rounded-2xl p-6 sm:p-8 hover:border-amber-500/30 transition-colors">
<div class="text-3xl sm:text-4xl font-bold text-amber-500 mb-2">sqlite-vec</div>
<p class="text-slate-400 text-xs sm:text-sm">Hybrid vector storage with LEANN-inspired selective embeddings. 60-80% storage reduction.</p>
</div>
<div class="glass rounded-2xl p-6 sm:p-8 hover:border-amber-500/30 transition-colors">
<div class="text-3xl sm:text-4xl font-bold text-amber-500 mb-2">BGE</div>
<p class="text-slate-400 text-xs sm:text-sm">Two-stage retrieval: bi-encoder embeddings + cross-encoder reranking for high accuracy.</p>
</div>
<div class="glass rounded-2xl p-6 sm:p-8 hover:border-amber-500/30 transition-colors">
<div class="text-3xl sm:text-4xl font-bold text-amber-500 mb-2">Tree-sitter</div>
<p class="text-slate-400 text-xs sm:text-sm">AST-aware code chunking respects function boundaries for Go, Python, and TypeScript.</p>
</div>
<div class="glass rounded-2xl p-6 sm:p-8 hover:border-amber-500/30 transition-colors">
<div class="text-3xl sm:text-4xl font-bold text-amber-500 mb-2">CSR Graph</div>
<p class="text-slate-400 text-xs sm:text-sm">Memory-efficient observation relationship graph with edge detection and hub identification.</p>
<section id="architecture" class="py-20 px-4 sm:px-6">
<div class="max-w-5xl mx-auto">
<h2 class="text-3xl sm:text-4xl font-bold text-white mb-4">Under the hood</h2>
<p class="text-neutral-500 mb-10">No magic. Here's what's running locally on your machine.</p>
<div class="grid sm:grid-cols-2 lg:grid-cols-3 gap-4">
<TechCard v-for="tech in techStack" :key="tech.name" :name="tech.name" :description="tech.description" />
</div>
</div>
</div>
</section>
</section>
<!-- Trust Section -->
<section class="py-20 lg:py-28 px-4 sm:px-6 bg-slate-900/30">
<div class="max-w-4xl mx-auto">
<SectionHeader title="Open source. Real person." subtitle="Not another anonymous package - built by a developer you can verify" />
<div class="glass rounded-2xl p-6 sm:p-8 text-center">
<div class="flex flex-col sm:flex-row items-center justify-center gap-6 sm:gap-8 mb-6">
<a href="https://github.com/lukaszraczylo" target="_blank" class="group">
<img
src="https://github.com/lukaszraczylo.png"
alt="Lukasz Raczylo"
class="w-20 h-20 sm:w-24 sm:h-24 rounded-full border-2 border-slate-700 group-hover:border-amber-500 transition-colors"
/>
</a>
<div class="text-center sm:text-left">
<h3 class="text-white font-semibold text-lg sm:text-xl mb-1">Lukasz Raczylo</h3>
<p class="text-slate-400 text-sm mb-3">Principal Engineer & Open Source Maintainer</p>
<div class="flex flex-wrap justify-center sm:justify-start gap-3">
<a href="https://github.com/lukaszraczylo" target="_blank" class="text-slate-500 hover:text-white transition-colors text-sm">
<i class="fab fa-github mr-1"></i>GitHub
</a>
<a href="https://linkedin.com/in/lukaszraczylo" target="_blank" class="text-slate-500 hover:text-white transition-colors text-sm">
<i class="fab fa-linkedin mr-1"></i>LinkedIn
</a>
<a href="https://raczylo.com" target="_blank" class="text-slate-500 hover:text-white transition-colors text-sm">
<i class="fas fa-globe mr-1"></i>Website
</a>
</div>
</div>
</div>
<div class="grid sm:grid-cols-3 gap-4 pt-6 border-t border-slate-700/50">
<div class="text-center">
<div class="text-amber-500 font-bold text-xl sm:text-2xl mb-1">100%</div>
<p class="text-slate-400 text-xs sm:text-sm">Open Source</p>
</div>
<div class="text-center">
<div class="text-amber-500 font-bold text-xl sm:text-2xl mb-1">MIT</div>
<p class="text-slate-400 text-xs sm:text-sm">License</p>
</div>
<div class="text-center">
<div class="text-amber-500 font-bold text-xl sm:text-2xl mb-1">0</div>
<p class="text-slate-400 text-xs sm:text-sm">Data collection</p>
</div>
</div>
</div>
<p class="text-center text-slate-500 mt-6 sm:mt-8 text-xs sm:text-sm">
Unlike anonymous packages, you can verify who built this, read every line of code, and reach out directly with questions.
<br class="hidden sm:block">
Your security matters - that's why transparency is non-negotiable.
</p>
</div>
</section>
<!-- FAQ Section -->
<section id="faq" class="py-20 lg:py-28 px-4 sm:px-6">
<div class="max-w-4xl mx-auto">
<SectionHeader title="Questions?" />
<div class="grid sm:grid-cols-2 gap-4 sm:gap-6">
<section id="faq" class="py-20 px-4 sm:px-6">
<div class="max-w-3xl mx-auto">
<h2 class="text-3xl sm:text-4xl font-bold text-white mb-10">FAQ</h2>
<FaqItem
v-for="faq in faqs"
:key="faq.question"
@@ -400,8 +155,21 @@
:answer="faq.answer"
/>
</div>
</div>
</section>
</section>
<section class="py-20 px-4 sm:px-6">
<div class="max-w-3xl mx-auto text-center">
<p class="text-neutral-600 text-sm mb-2">Open source, built by</p>
<a href="https://github.com/lukaszraczylo" target="_blank" class="inline-flex items-center gap-3 text-neutral-400 hover:text-white transition-colors group">
<img src="https://github.com/lukaszraczylo.png" alt="Lukasz Raczylo" class="w-10 h-10 rounded-full border border-neutral-700 group-hover:border-neutral-500 transition-colors" />
<div class="text-left">
<div class="text-sm font-medium">Lukasz Raczylo</div>
<div class="text-xs text-neutral-600">MIT License</div>
</div>
</a>
</div>
</section>
</main>
<FooterSection />
</div>
@@ -411,10 +179,8 @@
import { ref } from 'vue'
import NavBar from './components/NavBar.vue'
import HeroSection from './components/HeroSection.vue'
import SectionHeader from './components/SectionHeader.vue'
import FeatureCard from './components/FeatureCard.vue'
import StepCard from './components/StepCard.vue'
import FlowItem from './components/FlowItem.vue'
import FeatureItem from './components/FeatureItem.vue'
import TechCard from './components/TechCard.vue'
import CodeBlock from './components/CodeBlock.vue'
import FaqItem from './components/FaqItem.vue'
import FooterSection from './components/FooterSection.vue'
@@ -423,22 +189,15 @@ const mobileMenuOpen = ref(false)
const activeTab = ref('macos')
const features = [
{ icon: 'fas fa-brain', title: 'Learns as you work', description: 'Every bug fix, every architecture decision, every "aha moment" - captured automatically without breaking your flow.' },
{ icon: 'fas fa-search', title: 'Two-stage retrieval', description: 'Cross-encoder reranking delivers highly relevant results. Finds what you need even with vague queries like "that auth thing".' },
{ icon: 'fas fa-project-diagram', title: 'Graph-based search', description: 'LEANN Phase 2: Graph relationships between observations (file overlap, semantic similarity, temporal proximity) for smarter context retrieval.' },
{ icon: 'fas fa-microchip', title: 'AST-aware chunking', description: 'Intelligent code splitting respects function boundaries. Go, Python, and TypeScript code is chunked at semantic boundaries, not arbitrary line counts.' },
{ icon: 'fas fa-database', title: 'Hybrid vector storage', description: 'LEANN-inspired selective storage: frequently-accessed "hub" observations store embeddings, others recompute on-demand. 60-80% storage savings with <50ms latency.' },
{ icon: 'fas fa-folder-tree', title: 'Project-aware context', description: 'Your React knowledge stays in React projects. Your Go patterns stay in Go projects. No context pollution.' },
{ icon: 'fas fa-chart-line', title: 'Smart scoring', description: 'Importance decay, pattern detection, and conflict resolution ensure the most valuable memories surface first.' },
{ icon: 'fas fa-gauge-high', title: 'Auto-tuning', description: 'Dynamic hub threshold adjustment based on query performance. Automatically balances storage efficiency with search latency for your workload.' },
{ icon: 'fas fa-lock', title: '100% private', description: 'Your code context never leaves your machine. No telemetry. No cloud sync. Your memories are yours.' },
]
const steps = [
{ number: 1, title: 'Install', description: 'One command. Hooks into Claude Code automatically.' },
{ number: 2, title: 'Work normally', description: 'Code with Claude as usual. Mnemonic listens silently in the background.' },
{ number: 3, title: 'Knowledge builds', description: 'Every session adds to your knowledge base. Bug fixes. Decisions. Patterns.' },
{ number: 4, title: 'Context appears', description: 'Start a new session - relevant memories are already there. No re-explaining.' },
{ icon: 'fas fa-brain', title: 'Session memory', description: 'Captures bug fixes, decisions, and patterns automatically from your Claude Code sessions.' },
{ icon: 'fas fa-magnifying-glass-chart', title: 'Two-stage retrieval', description: 'Bi-encoder embeddings followed by cross-encoder reranking for accurate results.' },
{ icon: 'fas fa-diagram-project', title: 'Knowledge graph', description: 'Automatic relationship detection between observations via file overlap and semantic similarity.' },
{ icon: 'fas fa-folder-tree', title: 'Project isolation', description: 'Each project has its own memory. Your React knowledge doesn\'t leak into Go projects.' },
{ icon: 'fas fa-code', title: 'AST-aware chunking', description: 'Tree-sitter splits Go, Python, and TypeScript code at semantic boundaries.' },
{ icon: 'fas fa-database', title: 'Hybrid vector storage', description: 'Selective embedding caching. 60-80% storage reduction with minimal latency impact.' },
{ icon: 'fas fa-lock', title: 'Local embeddings', description: 'ONNX Runtime with all-MiniLM-L6-v2. No external API calls, everything stays on your machine.' },
{ icon: 'fas fa-gauge', title: 'Live statusline', description: 'Real-time metrics in Claude Code: [mnemonic] ● served:42 | project:28 memories' },
{ icon: 'fas fa-arrows-rotate', title: 'Auto-updates', description: 'Checks for new versions on startup, downloads in the background, applies on restart.' },
]
const installTabs = [
@@ -447,36 +206,37 @@ const installTabs = [
{ id: 'source', label: 'From Source' },
]
const installCommands = {
macos: `curl -sSL https://raw.githubusercontent.com/lukaszraczylo/claude-mnemonic/main/scripts/install.sh | bash`,
windows: `irm https://raw.githubusercontent.com/lukaszraczylo/claude-mnemonic/main/scripts/install.ps1 | iex`,
source: `git clone https://github.com/lukaszraczylo/claude-mnemonic.git\ncd claude-mnemonic\nmake build && make install`,
}
const configOptions = [
{ name: 'CLAUDE_MNEMONIC_WORKER_PORT', description: 'HTTP port for the worker service (default: 37777)', icon: 'fas fa-network-wired' },
{ name: 'CLAUDE_MNEMONIC_CONTEXT_OBSERVATIONS', description: 'Maximum observations injected per session (default: 100)', icon: 'fas fa-layer-group' },
{ name: 'CLAUDE_MNEMONIC_RERANKING_ENABLED', description: 'Enable cross-encoder reranking for improved search relevance (default: true)', icon: 'fas fa-sort-amount-down' },
{ name: 'CLAUDE_MNEMONIC_CONTEXT_RELEVANCE_THRESHOLD', description: 'Minimum similarity score for inclusion, 0.0-1.0 (default: 0.3)', icon: 'fas fa-filter' },
{ name: 'CLAUDE_MNEMONIC_VECTOR_STORAGE_STRATEGY', description: 'Storage strategy: "hub" (default), "always", or "on_demand"', icon: 'fas fa-database' },
{ name: 'CLAUDE_MNEMONIC_GRAPH_ENABLED', description: 'Enable graph-based search with observation relationships (default: true)', icon: 'fas fa-project-diagram' },
{ name: 'CLAUDE_MNEMONIC_GRAPH_MAX_HOPS', description: 'Maximum graph traversal depth for search expansion (default: 2)', icon: 'fas fa-route' },
{ name: 'CLAUDE_MNEMONIC_GRAPH_REBUILD_INTERVAL_MIN', description: 'How often to rebuild the observation graph in minutes (default: 60)', icon: 'fas fa-clock' },
{ name: 'WORKER_PORT', description: 'Dashboard and API port (default: 37777)' },
{ name: 'CONTEXT_OBSERVATIONS', description: 'Max memories injected per session (default: 100)' },
{ name: 'CONTEXT_FULL_COUNT', description: 'Full-detail memories, rest condensed (default: 25)' },
{ name: 'CONTEXT_RELEVANCE_THRESHOLD', description: 'Min similarity score 0.0-1.0 (default: 0.3)' },
{ name: 'RERANKING_ENABLED', description: 'Cross-encoder reranking (default: true)' },
{ name: 'VECTOR_STORAGE_STRATEGY', description: 'hub (default), always, or on_demand' },
{ name: 'GRAPH_ENABLED', description: 'Graph-based search with relationships (default: true)' },
{ name: 'EMBEDDING_MODEL', description: 'Embedding model for semantic search (default: bge-v1.5)' },
]
const requiredDeps = [
{ name: 'Claude Code CLI', description: 'Host application - this is a plugin for Claude Code. Uses your existing subscription (Pro/Max) instead of API keys.', icon: 'fas fa-terminal' },
{ name: 'jq', description: 'JSON processor used during installation. Usually pre-installed on most systems.', icon: 'fas fa-code' },
{ name: 'Claude Code CLI', description: 'Host application. Uses your existing subscription.', icon: 'fas fa-terminal' },
{ name: 'jq', description: 'JSON processing during install. Usually pre-installed.', icon: 'fas fa-code' },
]
const techStack = [
{ name: 'Go', description: 'Single binary, fast startup, low memory, zero runtime dependencies.' },
{ name: 'SQLite + FTS5', description: 'Full-text search in a single file. Survives restarts.' },
{ name: 'sqlite-vec', description: 'Vector search embedded in SQLite with LEANN-inspired selective embeddings.' },
{ name: 'BGE reranker', description: 'Cross-encoder for two-stage retrieval: bi-encoder + reranking.' },
{ name: 'Tree-sitter', description: 'AST-aware code chunking for Go, Python, and TypeScript.' },
{ name: 'CSR Graph', description: 'Memory-efficient observation relationship graph with edge detection.' },
]
const faqs = [
{ question: 'Will it confuse Claude with wrong context?', answer: 'No. Mnemonic uses project isolation and semantic relevance scoring. Only memories from the current project (or global best practices) are injected, and only when they\'re actually relevant to your prompt.' },
{ question: 'What exactly gets saved?', answer: 'Bug fixes with context ("Fixed race condition by adding mutex"), architecture decisions ("Using repository pattern for data access"), conventions ("All API routes prefixed with /api/v1"), and learnings you want to preserve.' },
{ question: 'How does hybrid vector storage work?', answer: 'LEANN-inspired selective storage: frequently-accessed "hub" observations (identified by access patterns and graph centrality) store embeddings. Infrequently-accessed observations recompute embeddings on-demand during search. This reduces storage by 60-80% with minimal latency impact (<50ms).' },
{ question: 'Can I delete or edit memories?', answer: 'Yes. The web dashboard at localhost:37777 lets you browse, search, edit, and delete any memory. You can also view graph relationships, storage metrics, and performance analytics. You\'re always in control.' },
{ question: 'Does it work with my existing Claude Code setup?', answer: 'Yes. Mnemonic installs as a Claude Code plugin with hooks. Your existing workflows, settings, and shortcuts remain unchanged.' },
{ question: 'What if I switch between projects frequently?', answer: 'That\'s the point. Each project has isolated memories. Switch from your Python ML project to your TypeScript app - context switches automatically.' },
{ question: 'Is there a performance impact?', answer: 'Minimal. The Go worker is lightweight (typically under 30MB RAM). Hybrid storage and auto-tuning optimize for your workload. Context injection at session start takes milliseconds for most projects.' },
{ question: 'What is AST-aware chunking?', answer: 'When processing code observations, Mnemonic uses Tree-sitter parsers to respect function and class boundaries instead of arbitrary line limits. Go, Python, and TypeScript code is chunked at semantic boundaries for better search accuracy.' },
{ question: 'Will it confuse Claude with wrong context?', answer: 'Project isolation and semantic relevance scoring prevent that. Only memories from the current project (or global best practices) are injected, and only when relevant to your prompt.' },
{ question: 'What gets stored?', answer: 'Bug fixes with context, architecture decisions, project conventions, security patterns — things you\'d otherwise re-explain each session. No raw conversation dumps.' },
{ question: 'Can I delete or edit memories?', answer: 'Yes. The dashboard at localhost:37777 lets you browse, search, edit, and delete anything. You can also view graph relationships and storage metrics.' },
{ question: 'Performance impact?', answer: 'The Go worker uses ~30MB RAM. Context injection at session start takes milliseconds for most projects. Hybrid storage auto-tunes for your workload.' },
{ question: 'Does it work with my existing setup?', answer: 'Yes. Installs as a Claude Code plugin with hooks. Your workflows, settings, and shortcuts stay the same.' },
{ question: 'What if I switch between projects?', answer: 'Each project has isolated memories. Switch from your Python ML project to your TypeScript app — context switches automatically.' },
]
</script>