Blog Deep Dive Stop Reading LLM Text Walls: Why I Built a Local Artifacts Manager for Agentic Workflows ➔
The Visual Hub for Agent-Generated Artifacts

Transform Transient Agent Output into Persistent Interactive Artifacts

A zero-DB, local-first management hub and sandboxed visualizer for interactive HTML diagrams, system topologies, decision trees, and Markdown specs across all your repositories.

$ git clone ~/tools/artifacts-manager && npm run dev
http://localhost:41820/project/nimbler-ops

nimbler-ops

Nimblersoft Company Operating System • 24 Artifacts

All architecture state-machine questionnaire
HTML Interactive 2h ago

Orchestrator Topology & Flow

Interactive node graph of background queues, dispatchers, and state transitions.

orchestrator-topology.html View ➔
HTML Interactive Yesterday

Agent Memory Storage Grilling

Stress-test questionnaire evaluating SQLite DO vs D1 Vectorize latency tradeoffs.

storage-grill.html View ➔
Markdown + Mermaid 3d ago

Auth Domain Boundary Spec

Domain invariants, session schemas, and security boundaries with Mermaid sequence graph.

auth-boundary.md View ➔
The Problem & The Solution

Why Developers Need Artifacts Manager

AI coding agents generate rich visual architectures and interactive decision models, but they get trapped in ephemeral logs without proper management.

The Ephemeral Agent Trap

Transient, Lost Context

  • Diagrams and interactive UIs vanish when the chat session ends.
  • Artifact files scattered randomly across `tmp/`, `scratch/`, or repo roots.
  • Global CSS and script collisions when embedding interactive HTML.
  • No unified multi-project search, tag categorization, or lifecycle archiving.
The Artifacts Manager Hub

Structured, Sandboxed Hub

  • Zero-DB JSON Contracts: Persisted in `.artifacts-manager/manifest.json`.
  • Isolated Sandboxed Iframes: Full JS, SVGs, and Tailwind run leak-free.
  • Multi-Project Explorer: Central indexing with real-time tag & text search.
  • Automated Verification: CLI integrity checks for runtime CDNs and links.
Intent Verification & Architecture

Beyond Disposable Chat Canvases

The bottleneck in modern engineering is intent verification, not code synthesis. Inspect interactive topologies and decision trade-offs in seconds.

Interactive Socratic Grilling and System Topology Visualizer in Artifacts Manager
Socratic Grilling & Trade-offs

Interactive Decision Trees & Latency Models

Evaluate conflicting architectural approaches side-by-side with interactive latency benchmarks, database trade-offs (e.g. D1 vs SQLite Durable Objects), and live Mermaid sequence charts.

#socratic-grilling #topology Learn More ➔
Agentic Software Engineering Ecosystem flow with Claude Code, Gemini, OpenCode and Antigravity into Artifacts Manager
Multi-Agent Fleet Ecosystem

Zero-DB Local Multi-Project Fleet

AI coding agents across your local repositories (Claude Code, Gemini, OpenCode, Antigravity) emit structured manifests cataloged automatically into the centralized local hub on port 41820.

#zero-db #multi-project #artman Read Rationale ➔
Artifacts Manager — Persistent Visual Hub for AI Agents replacing LLM text walls with interactive topology diagrams
Architectural Grounding

Persistent System Records for Agents

Past visual artifacts serve as high-density grounding context for future agent sessions. A structured artifact gives subagents instant clarity without burning thousands of tokens re-ingesting raw code.

#intent-verification #sandboxed Full Story ➔
Core Capabilities

Built for Modern AI Coding Fleets

Engineered from first principles with zero database overhead, airtight security boundaries, and responsive developer tooling.

Zero-DB File System Contracts

All project state and metadata live in pure JSON manifests inside repo folders. Easily committed, diffed, and version-controlled with Git.

~/.artifacts-manager.json manifest.json

Sandboxed Iframe Execution

HTML artifacts are served from isolated raw endpoints and rendered in secure iframes. Run rich JavaScript animations, charts, and Tailwind styling without host conflicts.

Isolation Raw Endpoint XSS Defense

Multi-Viewport Resolution Switcher

Instantly test and inspect artifact responsiveness with built-in 100% Desktop, 768px Tablet, and 375px Mobile viewport presets.

Desktop 100% Tablet 768px Mobile 375px

Real-Time Search & Tag Filters

Instant multi-faceted search across titles, descriptions, and tags. Toggle between Active and Archived states with permanent delete safeguards.

Faceted Filter Lifecycle Tags Instant Query

Automated Validation Engine

The CLI read-only validator (`artman validate --all`) checks CDN URLs, Mermaid fallbacks, manifest containment, and path traversal security across your machine.

ADR-0002 CDN Verification Integrity Checks

First-Class Agent Skill (`with-artifact`)

Shipped skill contract compatible with Antigravity, Claude Code, and Kilo. Agents automatically scaffold, validate, and catalog artifacts in one step.

SKILL.md Starter Templates Autonomous Indexing
Interactive Demos

What Agents Can Generate

Experience the exact interactive templates created by AI coding agents using the `with-artifact` skill.

Interactive Topology Template

Nimblersoft Agent Fabric & Dispatcher Flow

Click any node to inspect system boundary, protocols, and runtime contract.

Tailwind 3.4.17 + Mermaid 11.17.1
01 • Ingress
API Gateway & Proxy
Port 41820 / Cloudflare Edge / SSL & Auth Guard
02 • Dispatch
Task Orchestrator
Queue Dispatcher, State Machine & Retry Manager
03 • Execution
Sandboxed Iframe Hub
Isolated HTML/JS Execution & Raw Static File Bridge
04 • Persistence
Zero-DB Manifests
Local JSON Filesystem Catalogs & Central Index
ARCHITECTURE DATAFLOW flowchart LR 
flowchart LR
  client["Client Browser (41820)"] --> gateway["API Gateway"]
  gateway --> orchestrator["Task Orchestrator"]
  orchestrator --> sandbox["Sandboxed Iframe Hub"]
  sandbox --> storage["Zero-DB Manifests"]
  classDef default fill:#0d152c,stroke:#252f55,stroke-width:1px,color:#f0f4ff;
  classDef active fill:#132247,stroke:#00f0ff,stroke-width:2px,color:#00f0ff;
  class gateway active;
01 • Ingress Layer

API Gateway & Ingress

Handles TLS termination, routing, port 41820 allocation, and path-traversal security verification before passing requests to internal handlers.

Security Boundary
Path-traversal guard (403 on ../ escapes)
Network & File Endpoint
http://127.0.0.1:41820/api/raw/*
Runtime Contract
ADR-0001 & ADR-0002 Verified
Autonomous Grilling Template

Architectural Decision Stress-Test

Interactive HTML Form + Live Mermaid
Frontier Lock: Round 1 Active

2 architectural decisions locked for this review cycle. Answer both to proceed.

Q1

State Persistence Strategy

Round 1

How should multi-project artifacts store central state and manifest indexes across local repositories?

Recommended: Zero-DB filesystem JSON manifests (`~/.artifacts-manager.json` + `manifest.json`).
Per-Question Decision Tree (Live Synced) flowchart TD 
flowchart TD
  q1["Persistence Strategy"] --> optA["Zero-DB Filesystem JSON"]
  q1 --> optB["Central SQLite Daemon"]
  q1 --> optC["Cloudflare D1 & KV"]
  classDef default fill:#0d152c,stroke:#252f55,stroke-width:1px,color:#f0f4ff;
  classDef selected fill:#2e1065,stroke:#c084fc,stroke-width:2px,color:#fff;
  class optA selected;
Q2

Execution Isolation & Sandboxing

Round 1

How should interactive HTML artifacts with arbitrary JavaScript and custom styles be safely isolated from the host app?

Recommended: Sandboxed iframes served from dedicated `/api/raw/` endpoint with strict CSP.
Per-Question Decision Tree (Live Synced) flowchart TD 
flowchart TD
  q2["Sandboxing Strategy"] --> optA["Sandboxed Iframe Hub"]
  q2 --> optB["Shadow DOM Web Components"]
  q2 --> optC["Static Pre-rendered SVG"]
  classDef default fill:#0d152c,stroke:#252f55,stroke-width:1px,color:#f0f4ff;
  classDef selected fill:#2e1065,stroke:#c084fc,stroke-width:2px,color:#fff;
  class optA selected;
schema: 1, kind: grill-session
Markdown Spec Template

Server Sanitization & Mermaid Fences

nimbler-ops / .artifacts-manager / auth-boundary.md

Auth Domain Boundary & Session Invariants

#architecture #security #domain-model #marked-sanitized

This document defines the strict isolation boundaries for agent-generated visual artifacts. Markdown artifacts are parsed server-side with marked and cleansed with sanitize-html before rendering client-side Mermaid diagrams.

Security Invariant: Raw script tags and arbitrary HTML within markdown fences are strictly stripped on the server boundary. Mermaid SVG diagrams are rendered securely on the client using pinned Mermaid 11.17.1 ESM.

Artifact Retrieval & Rendering Flow

sequenceDiagram
  autonumber
  actor Operator
  participant GW as API Gateway (41820)
  participant Hub as Sandboxed Hub
  participant FS as Manifest Store (.artifacts-manager)
  Operator->>GW: GET /project/nimbler-ops/artifact/auth-boundary
  GW->>FS: Verify path & read manifest.json
  FS-->>GW: Return artifact metadata
  GW->>Hub: Mount isolated iframe (/api/raw/...)
  Hub-->>Operator: Rendered interactive spec & Mermaid SVG

Subsystem Contracts

Layer Protocol Enforcement ADR Status
Edge Ingress HTTP / SSE Path-traversal regex validation ADR-0001 Verified
Iframe Sandbox allow-scripts Isolated origin, no parent DOM access ADR-0001 Verified
Mermaid Runtime ESM Strict Pinned 11.17.1 CDN runtime ADR-0002 Verified
CLI Tooling

The `artman` Command Line

Manage workspace registrations, lifecycle states, and run contract verification directly from your shell.

$ ./bin/artman register /home/ericmaster/nimbler-ops
Reading ~/.artifacts-manager.json ...
Indexing /home/ericmaster/nimbler-ops/.artifacts-manager/manifest.json ...
✓ Registered project: nimbler-ops (24 active artifacts)
Catalog updated at ~/.artifacts-manager.json
$
Autonomous Workflow

How the Agent Lifecycle Works

Seamless integration between prompt instructions, file generation, manifest indexing, and interactive preview.

Step 01

Agent Prompt

The developer or agent identifies a complex topology, state machine, or decision matrix to illustrate.

Step 02

Skill Execution

The agent loads the `with-artifact` skill and scaffolds a self-contained HTML/Markdown file under `.artifacts-manager/`.

Step 03

Manifest Catalog

Metadata, unique kebab-case ID, description, and tags are written to `.artifacts-manager/manifest.json`.

Step 04

Sandboxed Viewer

Instantly visible in the SvelteKit dashboard on port 41820 with interactive sandboxing and multi-viewport controls.

Security & Architecture

Engineered with Strict Boundaries

Built according to ADR-0001 and ADR-0002 architectural decisions.

Path-Traversal Defense

Raw file server strictly resolves paths within each project's `.artifacts-manager` folder. Any `../` directory escapes are rejected with 403 Forbidden.

Server-Side Markdown Sanitizer

Markdown is parsed with `marked` and sanitized with `sanitize-html` at the insertion boundary, enforcing explicit tag, attribute, and protocol allowlists.

Pinned Runtime CDN Contract

Conforms to ADR-0002: Tailwind CSS `3.4.17` and Mermaid `11.17.1` ESM from exact pinned CDN URLs with reliable fallback sources.

Bring Visual Clarity to Your AI Coding Fleet

Start organizing, inspecting, and archiving your agent-generated visual artifacts across all local repositories in minutes.

GitHub Repository