Skip to content

Commit fe186a1

Browse files
BunsDevclaude
BunsDev
and
claude
committed
docs: add interactive demos (welcome mock, agentic loop, perms, tools grid)
Adds four Alpine.js-driven demos to bridge the gap for readers who need pictures, not just prose. Per OpenCoven brand rules: flat colors, no gradients/glow/blur, hover-and-border transitions only. - welcome-screen.js: faithful HTML/CSS TUI mockup with hover-to- explain on each Status row (Model, Provider, Daemon, Familiar, Goal) plus a toggle showing the small-terminal collapsed fallback. - introduction.js: auto-cycling agentic-loop walkthrough — eight steps of a realistic "add input validation" turn, with play/ pause/step/reset controls and a four-stage indicator. - tools.js: permission visualizer (pick a mode, see which levels allow/prompt/block) plus a clickable tools grid that replaces six previous reference tables with one explorable surface. Wires in alpinejs (16KB) as a runtime dependency and registers demos via Alpine.data() factories in src/demos.js. Alpine starts after content innerHTML so directives in rendered modules bind. Also swaps in the official OpenCoven assets from OpenCoven/brand: opencoven-white.svg (sigil on black, 572KB) as the hero logo and opencoven-monoline.svg (1.7KB) as the favicon. Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
1 parent 4e05b75 commit fe186a1

10 files changed

Lines changed: 14280 additions & 61 deletions

File tree

‎docs/package-lock.json‎

Lines changed: 3259 additions & 0 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎docs/package.json‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -16,5 +16,8 @@
1616
"tailwindcss": "4.1.18",
1717
"vite": "6.4.2",
1818
"wrangler": "4.66.0"
19+
},
20+
"dependencies": {
21+
"alpinejs": "^3.15.12"
1922
}
2023
}

‎docs/public/coven.svg‎

Lines changed: 10133 additions & 3 deletions
Loading

‎docs/public/favicon.svg‎

Lines changed: 8 additions & 4 deletions
Loading

‎docs/src/content/introduction.js‎

Lines changed: 51 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -16,6 +16,57 @@ export function render() {
1616
<h3>Agentic loop</h3>
1717
<p>Coven Code runs a multi-turn loop: it streams a response from the model, executes any tool calls (file read, bash, web search, …), feeds the results back, and continues until the task is done or the turn limit is reached.</p>
1818
19+
<div class="demo" x-data="agenticLoop" x-init="init()">
20+
<div class="demo-header">
21+
<span>walkthrough · "add input validation"</span>
22+
<div class="demo-header-actions">
23+
<button class="demo-btn" @click="prev()" title="Previous step">‹</button>
24+
<button class="demo-btn" @click="toggle()" :aria-pressed="playing" x-text="playing ? 'Pause' : 'Play'"></button>
25+
<button class="demo-btn" @click="next()" title="Next step">›</button>
26+
<button class="demo-btn" @click="reset()" title="Reset to start">⟲</button>
27+
</div>
28+
</div>
29+
<div class="demo-body">
30+
<div class="loop-wrap">
31+
<div class="loop-stages">
32+
<div class="loop-stage" :data-active="current.actor === 'user'">
33+
<span class="loop-stage-num">01</span>
34+
You prompt
35+
</div>
36+
<div class="loop-stage" :data-active="current.actor === 'model' && !current.tool">
37+
<span class="loop-stage-num">02</span>
38+
Model thinks
39+
</div>
40+
<div class="loop-stage" :data-active="current.actor === 'model' && !!current.tool">
41+
<span class="loop-stage-num">03</span>
42+
Tool call
43+
</div>
44+
<div class="loop-stage" :data-active="current.actor === 'tool'">
45+
<span class="loop-stage-num">04</span>
46+
Result returns
47+
</div>
48+
</div>
49+
<div class="loop-message" :class="'loop-actor-' + current.actor">
50+
<div class="loop-actor">
51+
<span class="loop-actor-dot"></span>
52+
<span x-text="current.label"></span>
53+
<span style="margin-left:auto; color: var(--color-text-dimmer); font-family: var(--font-mono); font-size: 11px;">
54+
step <span x-text="step + 1"></span> / <span x-text="steps.length"></span>
55+
</span>
56+
</div>
57+
<div class="loop-text" x-text="current.text"></div>
58+
<template x-if="current.tool">
59+
<div class="loop-tool">
60+
<span class="loop-tool-name" x-text="current.tool"></span>(<span class="loop-tool-args" x-text="current.toolArgs"></span>)
61+
</div>
62+
</template>
63+
</div>
64+
</div>
65+
</div>
66+
</div>
67+
68+
<p>The loop repeats — model emits a tool call, Coven Code runs it, the result feeds back in, the model decides what to do next. It only stops when the model says it's done, when a goal is verified complete, or when the turn limit is hit.</p>
69+
1970
<h3>40+ built-in tools</h3>
2071
<ul>
2172
<li><strong>File operations</strong> — read, write, edit, patch, batch-edit</li>

‎docs/src/content/tools.js‎

Lines changed: 79 additions & 54 deletions
Original file line numberDiff line numberDiff line change
@@ -33,65 +33,90 @@ export function render() {
3333
3434
<p>Permission rules are evaluated per-project and per-user — first match wins. Manage them with <code>/permissions</code>.</p>
3535
36-
<h2>File tools</h2>
37-
38-
<table>
39-
<thead><tr><th>Tool</th><th>Level</th><th>Purpose</th></tr></thead>
40-
<tbody>
41-
<tr><td><code>FileReadTool</code></td><td>ReadOnly</td><td>Read files (text, images, PDFs, notebooks). Tracks reads for write enforcement.</td></tr>
42-
<tr><td><code>FileWriteTool</code></td><td>Write</td><td>Create or overwrite a file. Requires prior read unless file is new.</td></tr>
43-
<tr><td><code>FileEditTool</code></td><td>Write</td><td>Exact-string replacement; fails if <code>old_string</code> is missing or not unique.</td></tr>
44-
<tr><td><code>BatchEditTool</code></td><td>Write</td><td>Apply many edits in one call; aborts atomically on any failure.</td></tr>
45-
<tr><td><code>ApplyPatchTool</code></td><td>Write</td><td>Apply a unified diff patch.</td></tr>
46-
</tbody>
47-
</table>
48-
49-
<p>Write tools enforce read-before-write: a file must have been read in the current session before it can be modified, preventing blind overwrites.</p>
50-
51-
<h2>Shell execution</h2>
52-
53-
<table>
54-
<thead><tr><th>Tool</th><th>Purpose</th></tr></thead>
55-
<tbody>
56-
<tr><td><code>BashTool</code></td><td>Execute shell commands with persistent working directory and environment.</td></tr>
57-
<tr><td><code>MonitorTool</code></td><td>Tail a long-running background process started by Bash.</td></tr>
58-
<tr><td><code>PtyBashTool</code></td><td>Bash in a pseudo-terminal — for commands needing TTY.</td></tr>
59-
<tr><td><code>PowerShellTool</code></td><td>PowerShell execution on Windows.</td></tr>
60-
<tr><td><code>ReplTool</code></td><td>Persistent REPL session (python, node, etc.).</td></tr>
61-
</tbody>
62-
</table>
63-
64-
<h2>Search</h2>
65-
66-
<table>
67-
<thead><tr><th>Tool</th><th>Purpose</th></tr></thead>
68-
<tbody>
69-
<tr><td><code>GlobTool</code></td><td>Match files by glob pattern (e.g. <code>src/**/*.rs</code>).</td></tr>
70-
<tr><td><code>GrepTool</code></td><td>Regex-search file contents — ripgrep semantics.</td></tr>
71-
<tr><td><code>ToolSearchTool</code></td><td>Look up tools by name/keyword (used by the model for deferred tools).</td></tr>
72-
</tbody>
73-
</table>
74-
75-
<h2>Web</h2>
76-
77-
<table>
78-
<thead><tr><th>Tool</th><th>Purpose</th></tr></thead>
79-
<tbody>
80-
<tr><td><code>WebFetchTool</code></td><td>Fetch a URL and summarize/extract via a small fast model.</td></tr>
81-
<tr><td><code>WebSearchTool</code></td><td>Web search with snippet results.</td></tr>
82-
</tbody>
83-
</table>
84-
85-
<h2>Task management</h2>
86-
87-
<p><code>TaskCreate</code>, <code>TaskUpdate</code>, <code>TaskList</code>, <code>TaskGet</code>, <code>TaskOutput</code>, <code>TaskStop</code> — for breaking work into trackable units, visible to the user via <code>/tasks</code>.</p>
36+
<div class="demo" x-data="permissionViz">
37+
<div class="demo-header">
38+
<span>permission visualizer · pick a mode</span>
39+
</div>
40+
<div class="demo-body">
41+
<div class="perm-modes">
42+
<template x-for="m in modes" :key="m">
43+
<button class="demo-btn" @click="mode = m" :aria-pressed="mode === m" x-text="m"></button>
44+
</template>
45+
</div>
46+
<p class="perm-mode-blurb" x-text="blurbs[mode]"></p>
47+
<div class="perm-grid">
48+
<template x-for="level in levels" :key="level">
49+
<div class="perm-row" :data-state="cell(level)">
50+
<div class="perm-level" x-text="level"></div>
51+
<div class="perm-state">
52+
<span class="perm-mark" x-text="cellMark(level)"></span>
53+
<span x-text="cellLabel(level)"></span>
54+
</div>
55+
<div class="perm-tools">
56+
<template x-for="tool in examples[level]" :key="tool">
57+
<span class="perm-tool" x-text="tool"></span>
58+
</template>
59+
</div>
60+
</div>
61+
</template>
62+
</div>
63+
</div>
64+
</div>
65+
66+
<h2>Browse the toolkit</h2>
67+
68+
<p>Click a tool to see its parameters and an example invocation. Write tools enforce read-before-write — a file must have been read in the current session before it can be modified, preventing blind overwrites.</p>
69+
70+
<div class="demo" x-data="toolsGrid">
71+
<div class="demo-header">
72+
<span>tools catalog · click any card</span>
73+
</div>
74+
<div class="demo-body">
75+
<template x-for="cat in categories" :key="cat.name">
76+
<div class="tools-cat">
77+
<div class="tools-cat-title" x-text="cat.name"></div>
78+
<div class="tools-cards">
79+
<template x-for="tool in cat.tools" :key="tool.name">
80+
<button
81+
type="button"
82+
class="tool-card"
83+
:aria-expanded="expanded === tool.name"
84+
@click="toggle(tool.name)"
85+
>
86+
<div class="tool-card-head">
87+
<span class="tool-card-name" x-text="tool.name"></span>
88+
<span class="tool-card-level" x-text="tool.level"></span>
89+
</div>
90+
<div class="tool-card-desc" x-text="tool.desc"></div>
91+
<template x-if="expanded === tool.name">
92+
<div class="tool-detail" @click.stop>
93+
<div class="tool-detail-section" x-show="tool.params.length">
94+
<div class="tool-detail-label">Parameters</div>
95+
<div class="tool-detail-params">
96+
<template x-for="p in tool.params" :key="p">
97+
<span class="tool-detail-param" x-text="p"></span>
98+
</template>
99+
</div>
100+
</div>
101+
<div class="tool-detail-section">
102+
<div class="tool-detail-label">Example</div>
103+
<div class="tool-detail-example" x-text="tool.example"></div>
104+
</div>
105+
</div>
106+
</template>
107+
</button>
108+
</template>
109+
</div>
110+
</div>
111+
</template>
112+
</div>
113+
</div>
88114
89115
<h2>Other categories</h2>
90116
91117
<ul>
92-
<li><strong>Git</strong> — commit, branch, worktree</li>
93118
<li><strong>Notebooks</strong> — read and edit Jupyter notebooks</li>
94-
<li><strong>Desktop automation</strong> — screenshot, click, type (optional feature)</li>
119+
<li><strong>Desktop automation</strong> — screenshot, click, type (optional <code>computer-use</code> feature)</li>
95120
<li><strong>MCP tools</strong> — dynamically added when MCP servers connect; see <a href="#mcp">MCP</a></li>
96121
</ul>
97122

‎docs/src/content/welcome-screen.js‎

Lines changed: 63 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -5,6 +5,69 @@ export function render() {
55
<h1>The welcome screen</h1>
66
<p class="lead">When you launch <code>coven-code</code> interactively, the home screen opens with a single rounded panel titled <code>Coven Code v&lt;version&gt;</code>. It's the at-a-glance status surface — every value comes from another subsystem, so use it as a jumping-off point rather than a source of truth.</p>
77
8+
<div class="demo" x-data="welcomeMockup">
9+
<div class="demo-header">
10+
<span>tui mock · hover any field</span>
11+
<div class="demo-header-actions">
12+
<button class="demo-btn" :aria-pressed="!small" @click="small = false">Full</button>
13+
<button class="demo-btn" :aria-pressed="small" @click="small = true">Tiny terminal</button>
14+
</div>
15+
</div>
16+
<div class="demo-body">
17+
<div x-show="!small" class="tui-frame">
18+
<div class="tui-title">╭─ Coven Code <span class="tui-title-version">v0.0.15</span></div>
19+
<div class="tui-grid">
20+
<div>
21+
<div class="tui-greeting">Welcome back, val!</div>
22+
<pre class="tui-rustle"> ∧___∧
23+
( ・ω・ )
24+
o_(")(")</pre>
25+
</div>
26+
<div class="tui-divider"></div>
27+
<div>
28+
<p class="tui-section-title">Tips for getting started</p>
29+
<p style="color: var(--color-text-secondary); margin-bottom: 12px; font-size: 12px;">Edit AGENTS.md to add instructions for Coven Code</p>
30+
<p class="tui-section-title">Status</p>
31+
<div class="tui-status-row" :data-active="field === 'model'" @mouseenter="field = 'model'" @mouseleave="field = null">
32+
<span class="tui-status-key">Model:</span>
33+
<span>claude-opus-4-7</span>
34+
</div>
35+
<div class="tui-status-row" :data-active="field === 'provider'" @mouseenter="field = 'provider'" @mouseleave="field = null">
36+
<span class="tui-status-key">Provider:</span>
37+
<span>anthropic</span>
38+
</div>
39+
<div class="tui-status-row" :data-active="field === 'daemon'" @mouseenter="field = 'daemon'" @mouseleave="field = null">
40+
<span class="tui-status-key">Daemon:</span>
41+
<span class="tui-status-val-accent">online</span>
42+
</div>
43+
<div class="tui-status-row" :data-active="field === 'familiar'" @mouseenter="field = 'familiar'" @mouseleave="field = null">
44+
<span class="tui-status-key">Familiar:</span>
45+
<span>raven <span class="tui-hint">(F2 to switch)</span></span>
46+
</div>
47+
<div class="tui-status-row" :data-active="field === 'goal'" @mouseenter="field = 'goal'" @mouseleave="field = null">
48+
<span class="tui-status-key">Goal:</span>
49+
<span class="tui-status-val-accent">Migrate snake_case API to camelCase</span>
50+
</div>
51+
</div>
52+
</div>
53+
</div>
54+
<div x-show="small" class="tui-collapsed">
55+
<strong>Coven Code</strong> v0.0.15 · claude-opus-4-7 · Daemon: online · Familiar: raven
56+
</div>
57+
<div class="tui-explain">
58+
<template x-if="field">
59+
<div>
60+
<p class="tui-explain-title" x-text="explain[field].title"></p>
61+
<p x-text="explain[field].body"></p>
62+
</div>
63+
</template>
64+
<template x-if="!field">
65+
<p class="tui-explain-empty">Hover a row above to see what each field is, where it comes from, and how to change it.</p>
66+
</template>
67+
</div>
68+
</div>
69+
</div>
70+
871
<h2>Left column</h2>
972
<p>Your familiar's portrait (animated glyph for built-ins, static card for daemon-registered familiars) under a <code>Welcome back &lt;user&gt;!</code> greeting. The art is driven by the <code>"familiar"</code> field in your settings; see <a href="#familiars">Familiars</a>.</p>
1073

0 commit comments

Comments
 (0)