Skip to content

Commit 0ca6646

Browse files
nicoloboschinicoloboschi
committed
docs(website): restructure concept, add Hermes, fact-check claude-code
- Restructure /concept (singular): lead with an architectural diagram (nested Bank inside Hindsight, separate Refresh engine), then "Two primitives", "Why this split exists" with contradictions + audit-trail bullets, and a tools section caveated that exact tool names depend on the harness. Drop "What lives where" / "Bank-level missions" / "Talking to a bank" / "A mental model in detail" — they were Hindsight-specific noise. - Replace /quickstart with /create — three escalating levels (just a name, add seed files, add a bank-template), nested teams, install commands per harness. - Add Hermes as a fifth harness with its own logo, install/run steps, bank-mapping note, and "under the hood" copy matching ensureHermesPlugin. - Fact-check /harnesses/claude-code against src/cli.ts and the latest Hindsight integrations/claude-code (v0.6.0): correct the plugin auto-install flow, the `permissions.allow` key, the real MCP tool prefix, the per-(agent, project) dynamic bank derivation, and the auto-recall / auto-retain hooks. - Drop the forbidden border-l-4 callout style across the site (concept + harnesses) — replaced with tinted aside + ring. - Correct "reads pages at session start" to "on demand" everywhere except the Claude Chat skill which actually does enforce a startup sequence.
1 parent 8a1b096 commit 0ca6646

9 files changed

Lines changed: 795 additions & 819 deletions

File tree

‎website/src/app/concept/page.tsx‎

Lines changed: 444 additions & 0 deletions
Large diffs are not rendered by default.

‎website/src/app/concepts/page.tsx‎

Lines changed: 0 additions & 612 deletions
This file was deleted.

‎website/src/app/create/page.tsx‎

Lines changed: 296 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,296 @@
1+
import type { Metadata } from 'next';
2+
import Link from 'next/link';
3+
import { CodeBlock } from '@/components/CodeBlock';
4+
import { HARNESSES } from '@/lib/harnesses';
5+
import { link } from '@/lib/link';
6+
7+
export const metadata: Metadata = {
8+
title: 'Create your own',
9+
description:
10+
'Build your own self-driving agent. The agent directory is optional, the bank-template.json is optional, the .md seed files are optional — at minimum you just pick a name and start chatting.',
11+
};
12+
13+
export default function CreatePage() {
14+
return (
15+
<>
16+
{/* Hero */}
17+
<section className="border-b border-ink-200 bg-white">
18+
<div className="mx-auto max-w-4xl px-6 py-12">
19+
<p className="text-sm font-medium uppercase tracking-wide text-accent-600">
20+
Build your own
21+
</p>
22+
<h1 className="mt-2 text-3xl font-bold text-ink-900 sm:text-4xl">
23+
Create your own self-driving agent
24+
</h1>
25+
<p className="mt-3 max-w-2xl text-lg leading-relaxed text-ink-500">
26+
An agent is a name plus, optionally, some seed knowledge. The
27+
harness wires in tools so the agent can look things up, ingest
28+
URLs and files you give it, and write back to its own pages.
29+
Nothing about the directory layout is mandatory — you can start
30+
with literally nothing and let the agent build itself as you chat.
31+
</p>
32+
</div>
33+
</section>
34+
35+
{/* Three escalating levels */}
36+
<section className="border-b border-ink-200 bg-ink-50">
37+
<div className="mx-auto max-w-4xl px-6 py-12">
38+
<h2 className="text-2xl font-semibold text-ink-900">
39+
Three levels — pick what you need
40+
</h2>
41+
<p className="mt-2 max-w-3xl text-ink-600">
42+
Each level is optional. Skip straight to a name if you want; add
43+
structure later when patterns emerge.
44+
</p>
45+
46+
<div className="mt-8 space-y-6">
47+
{/* Level 1 */}
48+
<div className="rounded-xl border border-ink-200 bg-white p-6">
49+
<div className="flex items-baseline gap-3">
50+
<span className="inline-flex h-7 w-7 items-center justify-center rounded-full bg-accent-500 text-sm font-semibold text-white">
51+
1
52+
</span>
53+
<h3 className="text-lg font-semibold text-ink-900">
54+
Just a name
55+
</h3>
56+
</div>
57+
<p className="mt-3 text-sm leading-relaxed text-ink-700">
58+
The lowest-effort path. Pick a name, run the install with the
59+
harness you want, start chatting. The bank is provisioned
60+
empty; the agent has its full tool surface from day one and
61+
can ingest anything you ask it to.
62+
</p>
63+
<div className="mt-4">
64+
<CodeBlock code="npx @vectorize-io/self-driving-agents install my-agent --harness claude-code" />
65+
</div>
66+
<p className="mt-3 text-sm text-ink-500">
67+
Then in the conversation, just ask:
68+
</p>
69+
<ul className="mt-2 space-y-1 text-sm text-ink-600">
70+
<li>
71+
<span className="text-ink-400">›</span> "Ingest{' '}
72+
<code className="rounded bg-ink-100 px-1 py-0.5">
73+
https://example.com/playbook
74+
</code>{' '}
75+
and remember the key points."
76+
</li>
77+
<li>
78+
<span className="text-ink-400">›</span> "Read this PDF and
79+
build a page on common pitfalls."
80+
</li>
81+
<li>
82+
<span className="text-ink-400">›</span> "Save what we just
83+
decided as a page called <em>release-checklist</em>."
84+
</li>
85+
</ul>
86+
</div>
87+
88+
{/* Level 2 */}
89+
<div className="rounded-xl border border-ink-200 bg-white p-6">
90+
<div className="flex items-baseline gap-3">
91+
<span className="inline-flex h-7 w-7 items-center justify-center rounded-full bg-accent-500 text-sm font-semibold text-white">
92+
2
93+
</span>
94+
<h3 className="text-lg font-semibold text-ink-900">
95+
Add seed knowledge
96+
</h3>
97+
</div>
98+
<p className="mt-3 text-sm leading-relaxed text-ink-700">
99+
If you already have docs, drop any{' '}
100+
<code className="rounded bg-ink-100 px-1 py-0.5">.md</code> or{' '}
101+
<code className="rounded bg-ink-100 px-1 py-0.5">.txt</code>{' '}
102+
files in a directory. The CLI ingests them as initial
103+
memories so the agent walks in with prior context — no
104+
templating required.
105+
</p>
106+
<div className="mt-4">
107+
<CodeBlock
108+
lang="text"
109+
code={`my-agent/
110+
playbook.md
111+
reference.md`}
112+
/>
113+
</div>
114+
<div className="mt-3">
115+
<CodeBlock code="npx @vectorize-io/self-driving-agents install ./my-agent --harness claude-code" />
116+
</div>
117+
</div>
118+
119+
{/* Level 3 */}
120+
<div className="rounded-xl border border-ink-200 bg-white p-6">
121+
<div className="flex items-baseline gap-3">
122+
<span className="inline-flex h-7 w-7 items-center justify-center rounded-full bg-accent-500 text-sm font-semibold text-white">
123+
3
124+
</span>
125+
<h3 className="text-lg font-semibold text-ink-900">
126+
Pre-seed the wiki with{' '}
127+
<code className="rounded bg-ink-100 px-1 py-0.5">
128+
bank-template.json
129+
</code>
130+
</h3>
131+
</div>
132+
<p className="mt-3 text-sm leading-relaxed text-ink-700">
133+
When you know the pages you want and what should fill them,
134+
add a{' '}
135+
<code className="rounded bg-ink-100 px-1 py-0.5">
136+
bank-template.json
137+
</code>{' '}
138+
with{' '}
139+
<code className="rounded bg-ink-100 px-1 py-0.5">
140+
mental_models[]
141+
</code>
142+
. Hindsight provisions the bank, creates one page per model,
143+
and keeps each one in sync with the bank's memories. See{' '}
144+
<Link href={link('/concept')} className="text-accent-600 hover:underline">
145+
the concept page
146+
</Link>{' '}
147+
for what mental models do.
148+
</p>
149+
<div className="mt-4">
150+
<CodeBlock
151+
lang="text"
152+
code={`my-agent/
153+
bank-template.json # mission, mental_models, ...
154+
playbook.md
155+
reference.md`}
156+
/>
157+
</div>
158+
<div className="mt-3">
159+
<CodeBlock
160+
lang="json"
161+
code={`{
162+
"version": "1",
163+
"bank": {
164+
"reflect_mission": "You are the long-term memory for ...",
165+
"retain_mission": "Extract ..."
166+
},
167+
"mental_models": [
168+
{
169+
"id": "playbook",
170+
"name": "Playbook",
171+
"source_query": "What patterns have we observed working?",
172+
"trigger": { "mode": "delta", "refresh_after_consolidation": true }
173+
}
174+
]
175+
}`}
176+
/>
177+
</div>
178+
</div>
179+
</div>
180+
</div>
181+
</section>
182+
183+
{/* Multi-agent teams */}
184+
<section className="border-b border-ink-200 bg-white">
185+
<div className="mx-auto max-w-4xl px-6 py-12">
186+
<h2 className="text-2xl font-semibold text-ink-900">
187+
Multi-agent teams
188+
</h2>
189+
<p className="mt-2 max-w-3xl text-ink-600">
190+
Need a department of specialists? Nest directories. Each level
191+
with a{' '}
192+
<code className="rounded bg-ink-100 px-1 py-0.5">
193+
bank-template.json
194+
</code>{' '}
195+
is its own installable agent. Install the parent to get
196+
everything; install a child to get just that specialist.
197+
</p>
198+
<div className="mt-5">
199+
<CodeBlock
200+
lang="text"
201+
code={`my-team/
202+
bank-template.json # install my-team → everything below
203+
specialist-a/
204+
bank-template.json # install my-team/specialist-a → just this
205+
playbook.md
206+
specialist-b/
207+
bank-template.json
208+
reference.md`}
209+
/>
210+
</div>
211+
<p className="mt-3 text-sm text-ink-500">
212+
See{' '}
213+
<Link href={link('/agents')} className="text-accent-600 hover:underline">
214+
the marketing template
215+
</Link>{' '}
216+
for a full example with sub-departments.
217+
</p>
218+
</div>
219+
</section>
220+
221+
{/* Install commands per harness */}
222+
<section className="border-b border-ink-200 bg-ink-50">
223+
<div className="mx-auto max-w-4xl px-6 py-12">
224+
<h2 className="text-2xl font-semibold text-ink-900">
225+
Pick a harness
226+
</h2>
227+
<p className="mt-2 max-w-3xl text-ink-600">
228+
Same agent, different runtime. Replace{' '}
229+
<code className="rounded bg-ink-100 px-1 py-0.5">my-agent</code>{' '}
230+
with your name (or path) and pick the harness you actually use:
231+
</p>
232+
233+
<div className="mt-6 space-y-4">
234+
{HARNESSES.map((h) => (
235+
<div
236+
key={h.slug}
237+
className="rounded-xl border border-ink-200 bg-white p-5"
238+
>
239+
<div className="mb-3 flex items-center justify-between">
240+
<h3 className="font-semibold text-ink-900">{h.name}</h3>
241+
<Link
242+
href={link(`/harnesses/${h.slug}`)}
243+
className="text-sm font-medium text-accent-600 hover:underline"
244+
>
245+
Full guide →
246+
</Link>
247+
</div>
248+
<CodeBlock
249+
code={`npx @vectorize-io/self-driving-agents install my-agent ${h.flag}`}
250+
/>
251+
</div>
252+
))}
253+
</div>
254+
</div>
255+
</section>
256+
257+
{/* Where to next */}
258+
<section className="bg-white">
259+
<div className="mx-auto max-w-4xl px-6 py-12">
260+
<h2 className="text-2xl font-semibold text-ink-900">From here</h2>
261+
<div className="mt-5 grid gap-4 sm:grid-cols-3">
262+
<Link
263+
href={link('/concept')}
264+
className="rounded-xl border border-ink-200 bg-ink-50 p-5 transition hover:border-accent-300 hover:bg-white"
265+
>
266+
<h3 className="font-semibold text-ink-900">How it works</h3>
267+
<p className="mt-1 text-sm text-ink-500">
268+
The architecture and the tools the agent gets — read pages,
269+
ingest, retain, recall.
270+
</p>
271+
</Link>
272+
<Link
273+
href={link('/agents')}
274+
className="rounded-xl border border-ink-200 bg-ink-50 p-5 transition hover:border-accent-300 hover:bg-white"
275+
>
276+
<h3 className="font-semibold text-ink-900">See real templates</h3>
277+
<p className="mt-1 text-sm text-ink-500">
278+
The marketing department and its specialists — full
279+
bank-templates with seed content.
280+
</p>
281+
</Link>
282+
<Link
283+
href={link('/harnesses')}
284+
className="rounded-xl border border-ink-200 bg-ink-50 p-5 transition hover:border-accent-300 hover:bg-white"
285+
>
286+
<h3 className="font-semibold text-ink-900">Compare harnesses</h3>
287+
<p className="mt-1 text-sm text-ink-500">
288+
Five integrations, each tuned to its runtime.
289+
</p>
290+
</Link>
291+
</div>
292+
</div>
293+
</section>
294+
</>
295+
);
296+
}

‎website/src/app/harnesses/[slug]/page.tsx‎

Lines changed: 14 additions & 24 deletions
Original file line numberDiff line numberDiff line change
@@ -103,32 +103,22 @@ export default async function HarnessDetailPage({
103103
Where the agent → bank binding lives, and how to change it.
104104
</p>
105105

106-
<div
107-
className="mt-5 rounded-xl border-l-4 border-accent-500 bg-white p-5"
106+
<aside
107+
className="mt-5 rounded-xl bg-accent-50/60 p-5 ring-1 ring-inset ring-accent-200"
108108
role="note"
109109
>
110-
<div className="flex items-start gap-3">
111-
<span
112-
className="mt-0.5 inline-flex h-6 w-6 shrink-0 items-center justify-center rounded-full bg-accent-500 text-xs font-bold text-white"
113-
aria-hidden
114-
>
115-
i
116-
</span>
117-
<div className="min-w-0 flex-1">
118-
<p className="text-sm font-semibold text-ink-900">
119-
{harness.bankMapping.summary}
120-
</p>
121-
<ul className="mt-3 space-y-2 text-sm leading-relaxed text-ink-700">
122-
{harness.bankMapping.details.map((line, i) => (
123-
<li key={i} className="flex gap-2">
124-
<span className="mt-1.5 inline-block h-1.5 w-1.5 shrink-0 rounded-full bg-accent-400" />
125-
<span>{line}</span>
126-
</li>
127-
))}
128-
</ul>
129-
</div>
130-
</div>
131-
</div>
110+
<p className="text-sm font-semibold text-ink-900">
111+
{harness.bankMapping.summary}
112+
</p>
113+
<ul className="mt-3 space-y-2 text-sm leading-relaxed text-ink-700">
114+
{harness.bankMapping.details.map((line, i) => (
115+
<li key={i} className="flex gap-2">
116+
<span className="mt-1.5 inline-block h-1.5 w-1.5 shrink-0 rounded-full bg-accent-400" />
117+
<span>{line}</span>
118+
</li>
119+
))}
120+
</ul>
121+
</aside>
132122
</div>
133123
</section>
134124

‎website/src/app/page.tsx‎

Lines changed: 7 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -31,10 +31,10 @@ export default function HomePage() {
3131
</p>
3232
<div className="mt-7 flex flex-wrap gap-3">
3333
<Link
34-
href={link('/quickstart')}
34+
href={link('/create')}
3535
className="rounded-lg bg-accent-500 px-5 py-2.5 text-sm font-semibold text-white shadow-sm transition hover:bg-accent-600"
3636
>
37-
Quick start →
37+
Create your own →
3838
</Link>
3939
<Link
4040
href={link('/agents')}
@@ -106,7 +106,7 @@ export default function HomePage() {
106106
</div>
107107

108108
<Link
109-
href={link('/concepts')}
109+
href={link('/concept')}
110110
className="group mt-8 flex flex-wrap items-start gap-4 rounded-xl border border-accent-200 bg-accent-50/50 p-5 transition hover:border-accent-300 hover:bg-accent-50"
111111
>
112112
<span
@@ -120,17 +120,16 @@ export default function HomePage() {
120120
Want the deeper picture?
121121
</h3>
122122
<p className="mt-1 text-sm leading-relaxed text-ink-600">
123-
Each agent has a personal wiki — knowledge pages it loads at startup,
124-
backed by raw memories in a Hindsight bank. Hindsight regenerates
125-
the pages from those memories on every consolidation. Read the
126-
concepts page for the full data model and flow.
123+
See how the harness, the agent, and Hindsight fit together —
124+
what crosses the boundary, what stays server-side, and why
125+
pages and memories live in two layers.
127126
</p>
128127
</div>
129128
<span
130129
className="self-center text-sm font-semibold text-accent-600 group-hover:underline"
131130
aria-hidden
132131
>
133-
Read concepts →
132+
Read the concept →
134133
</span>
135134
</Link>
136135
</div>

0 commit comments

Comments
 (0)