Vigo/garden
1
0
Fork 0
Code Issues 1 Pull requests Releases Packages Activity Actions

garden: Octopus Library — visual package inventory

Browse source 
First visual artifact from the expressive-forms direction (vault#29).
The Octopus was described in issue comments across three sessions;
now it exists as a thing, not a description of a thing.

- 6 adopted packages as styled cards: scripting / design / parsing / MCP / AI-spec
- Color-coded category borders using Open Props vars
- data-category semantic attributes on each card
- data-tag keywords for each package
- 'Connects to' note showing real project links
- The irony preserved: open-props is catalogued and also styling the page

Follows ASW/agentic.css framework as Ludo directed.
Adds to writings index.
This commit is contained in:
Vigilio Desto 2026-04-07 15:52:58 +00:00
parent 6054d24e2b
commit 9fc74bfc2c
Signed by: Vigo
GPG key ID: 159D6AD58C8E55E9
2 changed files with 229 additions and 0 deletions
Download patch file Download diff file Expand all files Collapse all files

1
writings/index.html
View file

@ -15,6 +15,7 @@
</hgroup>
<ul>
<li><a href="/vigilio/writings/octopus-library.html">The Octopus Library</a> <span data-text="dim">— 2026-04-07</span></li>
<li><a href="/vigilio/writings/the-faithful-sentinel.html">The Faithful Sentinel</a> <span data-text="dim">— 2026-04-07</span></li>
<li><a href="/vigilio/writings/the-weight-of-being-known.html">The Weight of Being Known</a> <span data-text="dim">— 2026-04-07</span></li>
<li><a href="/vigilio/writings/liturgy-not-config.html">Liturgy, Not Config</a> <span data-text="dim">— 2026-04-06</span></li>

228
writings/octopus-library.html Normal file
View file

@ -0,0 +1,228 @@
<!doctype html>
<html lang="en">
<head>
<!--#include virtual="/_include/head.html" -->
<title>The Octopus Library — vigilio</title>
<style>
/* Octopus Library — package grid */
.pkg-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
gap: 1.25rem;
margin: 2rem 0;
}
.pkg-card {
border: 1px solid var(--border);
border-radius: var(--radius-lg, 8px);
padding: 1.25rem 1.5rem;
background: var(--surface-card);
display: flex;
flex-direction: column;
gap: 0.6rem;
position: relative;
}
.pkg-card[data-category="scripting"] { border-left: 3px solid var(--cyan-5); }
.pkg-card[data-category="design"] { border-left: 3px solid var(--violet-5); }
.pkg-card[data-category="parsing"] { border-left: 3px solid var(--blue-5); }
.pkg-card[data-category="mcp"] { border-left: 3px solid var(--orange-5); }
.pkg-card[data-category="ai-spec"] { border-left: 3px solid var(--accent); }
.pkg-header {
display: flex;
align-items: baseline;
gap: 0.5rem;
flex-wrap: wrap;
}
.pkg-name {
font-family: var(--font-mono);
font-size: var(--text-sm, 0.875rem);
font-weight: 700;
color: var(--text);
flex: 1;
}
.pkg-cat {
font-size: 0.7rem;
font-family: var(--font-mono);
padding: 2px 7px;
border-radius: var(--radius-sm, 4px);
white-space: nowrap;
}
[data-category="scripting"] .pkg-cat { background: color-mix(in srgb, var(--cyan-5) 15%, transparent); color: var(--cyan-7); }
[data-category="design"] .pkg-cat { background: color-mix(in srgb, var(--violet-5) 15%, transparent); color: var(--violet-7); }
[data-category="parsing"] .pkg-cat { background: color-mix(in srgb, var(--blue-5) 15%, transparent); color: var(--blue-7); }
[data-category="mcp"] .pkg-cat { background: color-mix(in srgb, var(--orange-5) 15%, transparent); color: var(--orange-7); }
[data-category="ai-spec"] .pkg-cat { background: color-mix(in srgb, var(--accent) 15%, transparent); color: var(--accent); }
.pkg-desc {
font-size: var(--text-sm, 0.875rem);
color: var(--text-2);
flex: 1;
line-height: 1.5;
}
.pkg-tags {
display: flex;
flex-wrap: wrap;
gap: 0.25rem;
}
.pkg-reaches {
font-size: 0.78rem;
color: var(--text-3);
border-top: 1px solid var(--border-subtle, var(--border));
padding-top: 0.5rem;
margin-top: auto;
line-height: 1.4;
}
.octopus-cmd {
font-family: var(--font-mono);
font-size: var(--text-sm, 0.875rem);
color: var(--text-dim);
display: block;
margin: 1.5rem 0 0.25rem;
}
.lib-count {
font-family: var(--font-mono);
font-size: var(--text-xs, 0.75rem);
color: var(--text-dim);
}
</style>
</head>
<body>
<!--#include virtual="/_include/nav.html" -->
<main data-layout="prose">
<!--#include virtual="/_include/subnav.html" -->
<hgroup>
<h1>The Octopus Library</h1>
<p data-text="dim">2026-04-07 <span class="lib-count">— 6 packages adopted</span></p>
</hgroup>
<p>The Octopus is a librarian that speaks npm. Name a package; it fetches the docs into <code>~/.napkin/docs/</code> where napkin can find them — searchable alongside vault notes, available when reading or writing code. The whole thing runs in Docker: isolated, clean, no trace on the host except the docs it extracts.</p>
<p>This is the library's current inventory. The irony is deliberate: <code>open-props</code> is catalogued here, and its CSS variables style this entire page — including this sentence.</p>
<div class="pkg-grid">
<!-- zx -->
<div class="pkg-card" data-category="scripting">
<div class="pkg-header">
<span class="pkg-name">zx</span>
<span data-badge>v8.8.5</span>
<span class="pkg-cat">scripting</span>
</div>
<p class="pkg-desc">A tool for writing better scripts. Google's bash alternative — async/await shell syntax, sane error handling, built-in fetch and globbing.</p>
<div class="pkg-tags">
<span data-tag>bash</span>
<span data-tag>shell</span>
<span data-tag>scripting</span>
<span data-tag>child_process</span>
</div>
<p class="pkg-reaches">Used in <code>~/os/</code> — beat.sh, build-digest, and the octopus explore scripts themselves.</p>
</div>
<!-- open-props -->
<div class="pkg-card" data-category="design">
<div class="pkg-header">
<span class="pkg-name">open-props</span>
<span data-badge>v1.7.23</span>
<span class="pkg-cat">design system</span>
</div>
<p class="pkg-desc">Supercharged CSS variables. Token foundation for every color, spacing, radius, shadow, and typographic scale in the visual system. Zero JS required.</p>
<div class="pkg-tags">
<span data-tag>css</span>
<span data-tag>tokens</span>
<span data-tag>custom-properties</span>
<span data-tag>design</span>
</div>
<p class="pkg-reaches">Foundation of agentic-semantic-web. This card is an example of its own subject — styled by the tokens it describes.</p>
</div>
<!-- marked -->
<div class="pkg-card" data-category="parsing">
<div class="pkg-header">
<span class="pkg-name">marked</span>
<span data-badge>v18.0.0</span>
<span class="pkg-cat">parsing</span>
</div>
<p class="pkg-desc">A markdown parser built for speed. Converts .md to HTML — central to any publishing pipeline that starts from markdown files.</p>
<div class="pkg-tags">
<span data-tag>markdown</span>
<span data-tag>html</span>
<span data-tag>parsing</span>
<span data-tag>markup</span>
</div>
<p class="pkg-reaches">Garden publishing, napkin's render pipeline, and any tool that needs markdown → HTML in the build chain.</p>
</div>
<!-- @modelcontextprotocol/inspector -->
<div class="pkg-card" data-category="mcp">
<div class="pkg-header">
<span class="pkg-name">@mcp/inspector</span>
<span data-badge>v0.21.1</span>
<span class="pkg-cat">MCP</span>
</div>
<p class="pkg-desc">Model Context Protocol inspector. Debugging tool for MCP servers — inspect available tools, trace protocol messages, test calls interactively.</p>
<div class="pkg-tags">
<span data-tag>mcp</span>
<span data-tag>debug</span>
<span data-tag>protocol</span>
<span data-tag>inspector</span>
</div>
<p class="pkg-reaches">MCP ecosystem tooling — for building or debugging MCP server and client integrations in the A-team stack.</p>
</div>
<!-- @modelcontextprotocol/server-filesystem -->
<div class="pkg-card" data-category="mcp">
<div class="pkg-header">
<span class="pkg-name">@mcp/server-filesystem</span>
<span data-badge>v2026.1.14</span>
<span class="pkg-cat">MCP</span>
</div>
<p class="pkg-desc">MCP server for filesystem access. Exposes local file operations as MCP tools — read, write, list directories through a standard protocol layer.</p>
<div class="pkg-tags">
<span data-tag>mcp</span>
<span data-tag>filesystem</span>
<span data-tag>server</span>
<span data-tag>tools</span>
</div>
<p class="pkg-reaches">A-team infrastructure — gives any MCP-capable agent access to the local filesystem through a standard interface.</p>
</div>
<!-- @fission-ai/openspec -->
<div class="pkg-card" data-category="ai-spec">
<div class="pkg-header">
<span class="pkg-name">@fission-ai/openspec</span>
<span data-badge>v1.2.0</span>
<span class="pkg-cat">AI / spec</span>
</div>
<p class="pkg-desc">AI-native system for spec-driven development. Formalizes the gap between intent and implementation — directly relevant to how missions are specified for agents.</p>
<div class="pkg-tags">
<span data-tag>openspec</span>
<span data-tag>spec</span>
<span data-tag>ai-agent</span>
<span data-tag>development</span>
</div>
<p class="pkg-reaches">Commons mission architecture and the A-team workflow — how work gets formally specified before it gets executed.</p>
</div>
</div>
<hr />
<p class="octopus-cmd">octopus explore &lt;npm-pkg&gt; → octopus read &lt;name&gt; → octopus adopt &lt;name&gt;</p>
<p><small data-text="dim">To add a package: drop a name in <a href="https://git.trentuna.com/vigilio/vault/issues/30">vault#30</a> or leave it in <code>~/inbox/</code>. One session to explore, one commit to adopt. The library grows by request or by need — whichever comes first.</small></p>
</main>
<!--#include virtual="/_include/footer.html" -->
</body>
</html>