Skip to content

Commit fd4847b

Browse files
BunsDevclaude
andcommitted
docs: rebrand hero to "Terminal Coding Familiar in Rust" + replace catalog tables with searchable explorers
Hero / meta: - Hero title and all <head> metas now say "Terminal Coding Familiar" in line with OpenCoven's familiars-first framing. - OG image SVG subtitle updated to match. Searchable explorers (replaces wall-of-rows tables): - commands.js: 8 reference tables (~60 slash commands) collapsed into one explorer with live filter + category chips. Category counts shown on each chip; matches counter on the input row. - keybindings.js: 3 context tables (~40 shortcuts) collapsed into one explorer, keys rendered as kbd-style pills. Context-pick chips + free-text filter over key, action, and aliases. Shared via a `makeExplorer` factory in demos.js and a single .explorer-* CSS block. Tables remain as a fallback for short, typed reference data elsewhere — these were the two pages where the scan-the-list pattern actively hurt usability. Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
1 parent 21b3897 commit fd4847b

7 files changed

Lines changed: 469 additions & 225 deletions

File tree

docs/public/og.svg

Lines changed: 1 addition & 1 deletion
Loading

docs/src/content/commands.js

Lines changed: 58 additions & 144 deletions
Original file line numberDiff line numberDiff line change
@@ -13,149 +13,63 @@ export function render() {
1313
1414
<p>The first match wins, so user templates can override built-ins of the same name.</p>
1515
16-
<h2>Session &amp; navigation</h2>
17-
18-
<table>
19-
<thead><tr><th>Command</th><th>Action</th></tr></thead>
20-
<tbody>
21-
<tr><td><code>/help</code></td><td>Show all commands</td></tr>
22-
<tr><td><code>/clear</code></td><td>Clear the conversation</td></tr>
23-
<tr><td><code>/exit</code></td><td>Quit the session</td></tr>
24-
<tr><td><code>/resume</code></td><td>Resume a previous session</td></tr>
25-
<tr><td><code>/session</code></td><td>List or pick a session</td></tr>
26-
<tr><td><code>/fork</code></td><td>Branch the current session into a new one</td></tr>
27-
<tr><td><code>/rename</code></td><td>Rename the current session</td></tr>
28-
<tr><td><code>/rewind</code></td><td>Go back to a previous message</td></tr>
29-
<tr><td><code>/compact</code></td><td>Compress conversation history</td></tr>
30-
</tbody>
31-
</table>
32-
33-
<h2>Model &amp; provider</h2>
34-
35-
<table>
36-
<thead><tr><th>Command</th><th>Action</th></tr></thead>
37-
<tbody>
38-
<tr><td><code>/model</code></td><td>Switch model or provider</td></tr>
39-
<tr><td><code>/providers</code></td><td>List available providers</td></tr>
40-
<tr><td><code>/connect</code></td><td>Connect to a remote provider endpoint</td></tr>
41-
<tr><td><code>/thinking</code></td><td>Toggle extended thinking display</td></tr>
42-
<tr><td><code>/effort</code></td><td>Set extended-thinking effort level</td></tr>
43-
<tr><td><code>/advisor &lt;model&gt;</code></td><td>Set a secondary advisor model</td></tr>
44-
<tr><td><code>/fast</code></td><td>Toggle fast mode (smaller, faster model)</td></tr>
45-
</tbody>
46-
</table>
47-
48-
<h2>Configuration</h2>
49-
50-
<table>
51-
<thead><tr><th>Command</th><th>Action</th></tr></thead>
52-
<tbody>
53-
<tr><td><code>/config</code></td><td>Open the settings editor</td></tr>
54-
<tr><td><code>/keybindings</code></td><td>Open the interactive keybinding editor</td></tr>
55-
<tr><td><code>/permissions</code></td><td>Manage tool permission rules</td></tr>
56-
<tr><td><code>/hooks</code></td><td>Inspect active hooks</td></tr>
57-
<tr><td><code>/mcp</code></td><td>Manage MCP servers</td></tr>
58-
<tr><td><code>/output-style</code> · <code>/theme</code> · <code>/statusline</code></td><td>Visual customisation</td></tr>
59-
<tr><td><code>/vim</code></td><td>Toggle vim mode</td></tr>
60-
<tr><td><code>/voice</code></td><td>Voice input mode</td></tr>
61-
</tbody>
62-
</table>
63-
64-
<h2>Code &amp; git</h2>
65-
66-
<table>
67-
<thead><tr><th>Command</th><th>Action</th></tr></thead>
68-
<tbody>
69-
<tr><td><code>/commit</code></td><td>Stage and commit current changes</td></tr>
70-
<tr><td><code>/diff</code></td><td>Show working-tree diff</td></tr>
71-
<tr><td><code>/undo</code></td><td>Undo the last file edit (uses snapshot)</td></tr>
72-
<tr><td><code>/review</code></td><td>Review a PR or current changes</td></tr>
73-
<tr><td><code>/security-review</code></td><td>Security audit of pending changes</td></tr>
74-
<tr><td><code>/init</code></td><td>Initialise a new <code>AGENTS.md</code> for the project</td></tr>
75-
<tr><td><code>/search</code></td><td>Codebase search</td></tr>
76-
</tbody>
77-
</table>
78-
79-
<h2>Memory, context, cost</h2>
80-
81-
<table>
82-
<thead><tr><th>Command</th><th>Action</th></tr></thead>
83-
<tbody>
84-
<tr><td><code>/memory</code></td><td>Browse persistent memory entries</td></tr>
85-
<tr><td><code>/context</code></td><td>Show context window usage</td></tr>
86-
<tr><td><code>/cost</code></td><td>Token usage and dollar cost for the session</td></tr>
87-
<tr><td><code>/usage</code> · <code>/stats</code> · <code>/insights</code></td><td>Session statistics</td></tr>
88-
<tr><td><code>/status</code></td><td>Connection &amp; daemon status</td></tr>
89-
</tbody>
90-
</table>
91-
92-
<h2>Agents &amp; tasks</h2>
93-
94-
<table>
95-
<thead><tr><th>Command</th><th>Action</th></tr></thead>
96-
<tbody>
97-
<tr><td><code>/agents</code></td><td>List built-in, custom, and familiar agents</td></tr>
98-
<tr><td><code>/agent &lt;name&gt;</code></td><td>Switch active agent for this session</td></tr>
99-
<tr><td><code>/tasks</code></td><td>Show the live task list</td></tr>
100-
<tr><td><code>/goal &lt;objective&gt;</code></td><td>Set an autonomous multi-turn goal</td></tr>
101-
<tr><td><code>/managed-agents</code></td><td>Configure manager-executor agents</td></tr>
102-
<tr><td><code>/plan</code> · <code>/ultraplan</code></td><td>Enter planning mode</td></tr>
103-
<tr><td><code>/ultrareview</code></td><td>Exhaustive multi-dimensional code review</td></tr>
104-
</tbody>
105-
</table>
106-
107-
<h2>Auth</h2>
108-
109-
<table>
110-
<thead><tr><th>Command</th><th>Action</th></tr></thead>
111-
<tbody>
112-
<tr><td><code>/login</code></td><td>OAuth login (<code>--codex</code> for ChatGPT, <code>--label</code> to name)</td></tr>
113-
<tr><td><code>/accounts</code></td><td>List stored profiles</td></tr>
114-
<tr><td><code>/switch &lt;id&gt;</code></td><td>Switch active account</td></tr>
115-
<tr><td><code>/logout</code></td><td>Clear credentials</td></tr>
116-
<tr><td><code>/refresh</code></td><td>Refresh OAuth tokens</td></tr>
117-
</tbody>
118-
</table>
119-
120-
<h2>Display</h2>
121-
122-
<table>
123-
<thead><tr><th>Command</th><th>Action</th></tr></thead>
124-
<tbody>
125-
<tr><td><code>/caveman</code></td><td>Telegraphic speech mode (saves 40–85% tokens)</td></tr>
126-
<tr><td><code>/rocky</code></td><td>Rocky (Project Hail Mary) speech mode</td></tr>
127-
<tr><td><code>/normal</code></td><td>Deactivate speech modes</td></tr>
128-
<tr><td><code>/mobile</code></td><td>Compact mobile-friendly rendering</td></tr>
129-
<tr><td><code>/color</code></td><td>Adjust colour palette at runtime</td></tr>
130-
</tbody>
131-
</table>
132-
133-
<h2>Coven substrate</h2>
134-
135-
<p>When the Coven daemon is online, these are wired up:</p>
136-
137-
<table>
138-
<thead><tr><th>Command</th><th>Action</th></tr></thead>
139-
<tbody>
140-
<tr><td><code>/coven</code></td><td>Substrate surface: <code>kill</code>, <code>log</code>, <code>send</code>, <code>familiars</code>, etc.</td></tr>
141-
<tr><td><code>/familiar</code></td><td>Switch active familiar (also <kbd>F2</kbd>)</td></tr>
142-
<tr><td><code>/handoff</code></td><td>Hand off a session between familiars</td></tr>
143-
</tbody>
144-
</table>
145-
146-
<h2>Diagnostics</h2>
147-
148-
<table>
149-
<thead><tr><th>Command</th><th>Action</th></tr></thead>
150-
<tbody>
151-
<tr><td><code>/doctor</code></td><td>Environment and substrate health check</td></tr>
152-
<tr><td><code>/version</code></td><td>Show version info</td></tr>
153-
<tr><td><code>/update</code></td><td>Check for and download updates</td></tr>
154-
<tr><td><code>/export</code></td><td>Save session transcript</td></tr>
155-
<tr><td><code>/copy</code></td><td>Copy last response to clipboard</td></tr>
156-
</tbody>
157-
</table>
158-
159-
<p>See <a href="https://github.com/OpenCoven/coven-code/blob/main/docs/commands.md" target="_blank" rel="noopener">the full slash commands reference</a> for every flag, behaviour detail, and the planning/internal commands (<code>/summary</code>, <code>/brief</code>, <code>/sandbox-toggle</code>, <code>/think-back</code>, <code>/thinkback-play</code>, etc.).</p>
16+
<h2>Browse the palette</h2>
17+
18+
<p>Type to filter by name, alias, or description. Click a category chip to narrow the list.</p>
19+
20+
<div class="demo" x-data="commandExplorer">
21+
<div class="demo-header">
22+
<span>slash command explorer · <span x-text="count"></span> / <span x-text="total"></span> shown</span>
23+
</div>
24+
<div class="demo-body">
25+
<div class="explorer-controls">
26+
<input
27+
type="text"
28+
class="explorer-input"
29+
placeholder="Search commands — try 'commit', 'goal', 'familiar', 'thinking'…"
30+
x-model="query"
31+
aria-label="Search slash commands"
32+
/>
33+
<span class="explorer-count">
34+
<span x-text="count"></span> matches
35+
</span>
36+
</div>
37+
<div class="explorer-chips">
38+
<template x-for="cat in categories" :key="cat">
39+
<button
40+
type="button"
41+
class="explorer-chip"
42+
:aria-pressed="category === cat"
43+
@click="pick(cat)"
44+
>
45+
<span x-text="cat"></span>
46+
<span class="explorer-chip-count" x-text="countIn(cat)"></span>
47+
</button>
48+
</template>
49+
<button
50+
type="button"
51+
class="explorer-clear"
52+
x-show="query || category"
53+
@click="clear()"
54+
>Clear</button>
55+
</div>
56+
<div class="explorer-results" x-show="count > 0">
57+
<template x-for="item in filtered" :key="item.id + item.category">
58+
<div class="explorer-item">
59+
<div class="explorer-item-head">
60+
<span class="explorer-item-id" x-text="item.id"></span>
61+
<span class="explorer-item-cat" x-text="item.category"></span>
62+
</div>
63+
<div class="explorer-item-desc" x-text="item.desc"></div>
64+
</div>
65+
</template>
66+
</div>
67+
<div class="explorer-empty" x-show="count === 0">
68+
No commands match. <a href="#" @click.prevent="clear()" style="color: var(--color-accent);">Clear filters</a>
69+
</div>
70+
</div>
71+
</div>
72+
73+
<p>See <a href="https://github.com/OpenCoven/coven-code/blob/main/docs/commands.md" target="_blank" rel="noopener">the full slash commands reference</a> for every flag, behaviour detail, and the planning/internal commands (<code>/summary</code>, <code>/brief</code>, <code>/thinkback-play</code>, etc.) that aren't surfaced here.</p>
16074
`;
16175
}

docs/src/content/keybindings.js

Lines changed: 70 additions & 73 deletions
Original file line numberDiff line numberDiff line change
@@ -5,79 +5,76 @@ export function render() {
55
<h1>Keybindings</h1>
66
<p class="lead">Coven Code uses a context-aware keybinding system — the same key can have different effects depending on where focus is, and bindings in more specific contexts override broader ones. Customise via the <code>/keybindings</code> editor or <code>~/.coven-code/keybindings.json</code>.</p>
77
8-
<h2>Global context</h2>
9-
10-
<p>Active everywhere.</p>
11-
12-
<table class="shortcut-table">
13-
<thead><tr><th>Key</th><th>Action</th></tr></thead>
14-
<tbody>
15-
<tr><td><kbd>Ctrl+C</kbd></td><td>Interrupt the current operation (non-rebindable)</td></tr>
16-
<tr><td><kbd>Ctrl+D</kbd></td><td>Exit Coven Code (non-rebindable)</td></tr>
17-
<tr><td><kbd>Ctrl+L</kbd></td><td>Redraw the terminal screen</td></tr>
18-
<tr><td><kbd>Ctrl+R</kbd></td><td>Open interactive history search</td></tr>
19-
<tr><td><kbd>Ctrl+B</kbd></td><td>Create a new git branch</td></tr>
20-
<tr><td><kbd>Alt+H</kbd></td><td>Open the help panel</td></tr>
21-
<tr><td><kbd>F2</kbd></td><td>Open familiar switcher</td></tr>
22-
</tbody>
23-
</table>
24-
25-
<h2>Chat context</h2>
26-
27-
<p>Active when focus is in the chat input.</p>
28-
29-
<table class="shortcut-table">
30-
<thead><tr><th>Key</th><th>Action</th></tr></thead>
31-
<tbody>
32-
<tr><td><kbd>Enter</kbd></td><td>Submit message</td></tr>
33-
<tr><td><kbd>Shift+Enter</kbd> / <kbd>Ctrl+J</kbd></td><td>Insert a literal newline</td></tr>
34-
<tr><td><kbd>Up</kbd> / <kbd>Ctrl+O</kbd></td><td>Previous in input history</td></tr>
35-
<tr><td><kbd>Down</kbd> / <kbd>Ctrl+I</kbd></td><td>Next in input history</td></tr>
36-
<tr><td><kbd>Tab</kbd></td><td>Indent (or cycle completions)</td></tr>
37-
<tr><td><kbd>Page Up</kbd> / <kbd>Page Down</kbd></td><td>Scroll conversation</td></tr>
38-
<tr><td><kbd>Ctrl+A</kbd> / <kbd>Ctrl+E</kbd></td><td>Move cursor to line start / end</td></tr>
39-
<tr><td><kbd>Ctrl+Left</kbd> / <kbd>Ctrl+Right</kbd></td><td>Move one word</td></tr>
40-
<tr><td><kbd>Alt+Left</kbd> / <kbd>Alt+Right</kbd></td><td>Jump to previous/next message</td></tr>
41-
<tr><td><kbd>Ctrl+Shift+A</kbd></td><td>Open model picker</td></tr>
42-
<tr><td><kbd>Ctrl+K</kbd></td><td>Open slash command palette</td></tr>
43-
<tr><td><kbd>Ctrl+U</kbd></td><td>Kill to start of line</td></tr>
44-
<tr><td><kbd>Ctrl+W</kbd> / <kbd>Alt+Backspace</kbd></td><td>Delete word before cursor</td></tr>
45-
<tr><td><kbd>Alt+D</kbd></td><td>Delete word after cursor</td></tr>
46-
<tr><td><kbd>Ctrl+F</kbd></td><td>Find within current conversation</td></tr>
47-
<tr><td><kbd>Ctrl+Shift+F</kbd></td><td>Global codebase search</td></tr>
48-
<tr><td><kbd>F3</kbd> / <kbd>Shift+F3</kbd></td><td>Next / previous search match</td></tr>
49-
</tbody>
50-
</table>
51-
52-
<h2>Confirmation context</h2>
53-
54-
<p>Active during yes/no permission prompts.</p>
55-
56-
<table class="shortcut-table">
57-
<thead><tr><th>Key</th><th>Action</th></tr></thead>
58-
<tbody>
59-
<tr><td><kbd>Y</kbd></td><td>Approve</td></tr>
60-
<tr><td><kbd>N</kbd></td><td>Deny</td></tr>
61-
<tr><td><kbd>A</kbd></td><td>Approve + add permanent allow rule</td></tr>
62-
<tr><td><kbd>Enter</kbd></td><td>Accept the highlighted default</td></tr>
63-
<tr><td><kbd>Escape</kbd></td><td>Cancel (deny)</td></tr>
64-
</tbody>
65-
</table>
66-
67-
<h2>Contexts</h2>
68-
69-
<table>
70-
<thead><tr><th>Context</th><th>Active when</th></tr></thead>
71-
<tbody>
72-
<tr><td><code>global</code></td><td>Always</td></tr>
73-
<tr><td><code>chat</code></td><td>Chat input has focus</td></tr>
74-
<tr><td><code>confirmation</code></td><td>Permission dialog is open</td></tr>
75-
<tr><td><code>modelPicker</code></td><td>Model selection overlay open</td></tr>
76-
<tr><td><code>commandPalette</code></td><td>Slash command palette open</td></tr>
77-
<tr><td><code>search</code></td><td>Inline search bar open</td></tr>
78-
<tr><td><code>vim.normal</code> / <code>vim.insert</code> / <code>vim.visual</code></td><td>Vim mode active in the matching mode</td></tr>
79-
</tbody>
80-
</table>
8+
<h2>Browse shortcuts</h2>
9+
10+
<p>Type to filter by key, action, or description. Click a context chip to narrow to that scope.</p>
11+
12+
<div class="demo" x-data="keybindingExplorer">
13+
<div class="demo-header">
14+
<span>keybinding explorer · <span x-text="count"></span> / <span x-text="total"></span> shown</span>
15+
</div>
16+
<div class="demo-body">
17+
<div class="explorer-controls">
18+
<input
19+
type="text"
20+
class="explorer-input"
21+
placeholder="Search keys or actions — try 'ctrl', 'history', 'palette', 'word'…"
22+
x-model="query"
23+
aria-label="Search keybindings"
24+
/>
25+
<span class="explorer-count">
26+
<span x-text="count"></span> matches
27+
</span>
28+
</div>
29+
<div class="explorer-chips">
30+
<template x-for="cat in categories" :key="cat">
31+
<button
32+
type="button"
33+
class="explorer-chip"
34+
:aria-pressed="category === cat"
35+
@click="pick(cat)"
36+
>
37+
<span x-text="cat"></span>
38+
<span class="explorer-chip-count" x-text="countIn(cat)"></span>
39+
</button>
40+
</template>
41+
<button
42+
type="button"
43+
class="explorer-clear"
44+
x-show="query || category"
45+
@click="clear()"
46+
>Clear</button>
47+
</div>
48+
<div class="explorer-results" x-show="count > 0">
49+
<template x-for="item in filtered" :key="item.id + item.category">
50+
<div class="explorer-item">
51+
<div class="explorer-item-head">
52+
<span class="explorer-item-id key-id" x-text="item.id"></span>
53+
<span class="explorer-item-cat" x-text="item.category"></span>
54+
</div>
55+
<div class="explorer-item-desc" x-text="item.desc"></div>
56+
</div>
57+
</template>
58+
</div>
59+
<div class="explorer-empty" x-show="count === 0">
60+
No shortcuts match. <a href="#" @click.prevent="clear()" style="color: var(--color-accent);">Clear filters</a>
61+
</div>
62+
</div>
63+
</div>
64+
65+
<h2>How contexts work</h2>
66+
67+
<p>The same key can have different effects depending on which UI surface has focus. Bindings in a more specific context take precedence over a broader one.</p>
68+
69+
<ul>
70+
<li><code>global</code> — always active</li>
71+
<li><code>chat</code> — chat input has focus</li>
72+
<li><code>confirmation</code> — a permission dialog is open</li>
73+
<li><code>modelPicker</code> — the model selection overlay is open</li>
74+
<li><code>commandPalette</code> — the slash command palette is open</li>
75+
<li><code>search</code> — the inline search bar is open</li>
76+
<li><code>vim.normal</code> / <code>vim.insert</code> / <code>vim.visual</code> — when vim mode is enabled</li>
77+
</ul>
8178
8279
<h2>Customising</h2>
8380

0 commit comments

Comments
 (0)