preview-artifact 0.1.0 → 0.1.1

package/README.md

@@ -1,10 +1,14 @@
-# preview-artifact
+# Pretifact
 
-Open the artifacts your coding agents produce (plans, design docs, audit
-reports, papers) in the browser — **read them beautifully, edit them in place,
-save back to disk, and live-reload** when an agent rewrites the file.
+**Pretifact** (the `preview-artifact` npm package) opens the artifacts your coding
+agents produce (plans, design docs, audit reports, papers) in the browser —
+**read them beautifully, edit them in place, save back to disk, and live-reload**
+when an agent rewrites the file.
 
-Handles **Markdown** (`.md`), **LaTeX** (`.tex`), and **PDF** (`.pdf`).
+![Pretifact — light and dark](docs/screenshots/hero-split.png)
+
+Handles **Markdown** (`.md`), **LaTeX** (`.tex`), and **PDF** (`.pdf`), with a
+light and dark theme.
 
 Fully local. No cloud, no telemetry, no account.
 
@@ -14,10 +18,19 @@ preview-artifact open docs/plans/2026-05-31-some-design.md
 
 ## Screenshots
 
+In the wild — an agent finishes a design doc and opens it in Pretifact:
+
+![Agent opens an artifact in Pretifact](docs/screenshots/agent-open.png)
+
 Editorial read view — serif display type, warm paper, orange frame:
 
 ![Read view](docs/screenshots/read-markdown.png)
 
+Side panel — open several artifacts at once and switch between them, plus
+recently-opened history (collapsible, closed by default):
+
+![Artifacts side panel](docs/screenshots/panel.png)
+
 Rich markdown — images, headings, and a live mermaid diagram, GFM tables, task
 lists and KaTeX math:
 
@@ -50,6 +63,9 @@ frontmatter, task lists — and deserve a real reading surface you can also edit
 - **Edit mode** — Milkdown (ProseMirror) WYSIWYG that round-trips markdown
   faithfully. YAML frontmatter is split into its own panel so the editor can
   never corrupt it.
+- **Side panel** — open several artifacts at once (`preview-artifact open a.md b.tex c.pdf`),
+  switch between them, and pick from recently-opened history. Updates live as the
+  agent opens more. Collapsible.
 - **Save** — writes back to the same file. `Cmd/Ctrl+S`.
 - **Live-reload** — a file watcher pushes external changes over a websocket; if
   you have unsaved edits it asks before discarding them.
@@ -57,25 +73,22 @@ frontmatter, task lists — and deserve a real reading surface you can also edit
 
 ## Install
 
-Requires Node ≥ 18. One command — installs the `preview-artifact` binary
-globally (builds itself on install):
+Requires Node ≥ 18.
 
 ```bash
-# once published to npm:
 npm install -g preview-artifact
-
-# or straight from GitHub today:
-npm install -g github:anup-a/preview-artifact
 ```
 
 <details>
-<summary>From a local clone (for development)</summary>
+<summary>Other ways to install</summary>
 
 ```bash
+# latest from GitHub
+npm install -g github:anup-a/preview-artifact
+
+# local clone (for development) — npm install runs the build automatically
 git clone https://github.com/anup-a/preview-artifact.git
-cd preview-artifact
-npm install        # runs the build automatically (prepare script)
-npm link           # makes `preview-artifact` available globally
+cd preview-artifact && npm install && npm link
 ```
 </details>
 
@@ -83,8 +96,10 @@ npm link           # makes `preview-artifact` available globally
 
 ```bash
 preview-artifact open path/to/file.md   # open in the browser
+preview-artifact open a.md b.tex c.pdf  # open several into the side panel
 preview-artifact path/to/file.md        # shorthand
 preview-artifact open file.md --no-open # start server without launching a browser
+preview-artifact stop                   # stop the daemon
 preview-artifact --help
 ```
 
@@ -94,21 +109,34 @@ Use it from any project — it's not tied to any particular repo.
 
 This tool is meant to be launched *by* your agent when it finishes writing an
 artifact. The CLI self-daemonizes and returns immediately, so agents just run it
-— no backgrounding needed. See [`AGENTS.md`](./AGENTS.md) for the canonical
-instructions; quick reference below.
+— no backgrounding needed. It ships as a **skill** that the model auto-invokes
+when you ask to preview something or after it writes a plan (no slash command to
+remember). See [`AGENTS.md`](./AGENTS.md) for details.
 
-### Claude Code (plugin)
+> **CLI vs skill.** The `preview-artifact` **npm package is the actual program**
+> (it runs the viewer). The **skill** is just instructions telling the agent when
+> to run it — installing the skill alone is enough: on first use it runs
+> `npm install -g preview-artifact` for you if the CLI is missing. Prefer the CLI
+> directly? Just `npm install -g preview-artifact` and skip the skill.
 
-Install the plugin from this repo's marketplace, which adds the
-`/preview-artifact` command in every project:
+### Claude Code (plugin — recommended)
+
+Install the plugin from this repo's marketplace; it ships the skill, which then
+auto-invokes:
 
 ```
 /plugin marketplace add anup-a/preview-artifact
 /plugin install preview-artifact@preview-artifact
 ```
 
-Then: `/preview-artifact path/to/file.md`. (When working inside this repo the
-command is also auto-available from [`.claude/commands/`](./.claude/commands/).)
+### Other agents (skill)
+
+Install the same [skill](./skills/preview-artifact/SKILL.md) into any agent
+(Cursor, Aider, …) via the open [skills](https://skills.sh) CLI:
+
+```bash
+npx skills add anup-a/preview-artifact
+```
 
 ### Codex (custom prompt)
 
@@ -130,7 +158,7 @@ preview-artifact open path/to/file.md   # prints the URL, then returns
 
 ### If `preview-artifact` isn't on your agent's PATH
 
-`npm link` installs the binary into npm's global bin. If your agent runs with a
+`npm install -g` puts the binary in npm's global bin. If your agent runs with a
 minimal PATH and can't find it, add npm's global bin to PATH:
 
 ```bash

package/bin/preview-artifact.js

@@ -23,7 +23,7 @@ function usage(code = 0) {
   console.log(`preview-artifact — read & edit agent artifacts in the browser
 
 Usage:
-  preview-artifact open <file>   Open a .md / .tex / .pdf file in the browser
+  preview-artifact open <file...> Open .md / .tex / .pdf file in the browser
   preview-artifact <file>        Shorthand for "open"
   preview-artifact stop          Stop the background daemon
 
@@ -91,16 +91,33 @@ async function stopDaemon() {
   }
 }
 
-async function openFile(file, noOpen) {
-  const target = path.resolve(process.cwd(), file);
-  if (!existsSync(target)) {
-    console.error(`error: file not found: ${target}`);
-    process.exit(1);
+async function openFiles(files, noOpen) {
+  const targets = [];
+  for (const f of files) {
+    const abs = path.resolve(process.cwd(), f);
+    if (!existsSync(abs)) {
+      console.error(`error: file not found: ${abs}`);
+      process.exit(1);
+    }
+    targets.push(abs);
   }
   const port = (await healthyPort()) ?? (await startDaemon());
-  const url = `http://127.0.0.1:${port}/?path=${encodeURIComponent(target)}`;
-  console.log(`[preview-artifact] ${path.basename(target)} → ${url}`);
+
+  // Register all artifacts so they appear in the panel.
+  await fetch(`http://127.0.0.1:${port}/api/register`, {
+    method: "POST",
+    headers: { "Content-Type": "application/json" },
+    body: JSON.stringify({ paths: targets }),
+  }).catch(() => {});
+
+  for (const t of targets) {
+    console.log(
+      `[preview-artifact] ${path.basename(t)} → http://127.0.0.1:${port}/?path=${encodeURIComponent(t)}`,
+    );
+  }
+  // Open a browser tab at the first artifact (the rest show in the panel).
   if (!noOpen) {
+    const url = `http://127.0.0.1:${port}/?path=${encodeURIComponent(targets[0])}`;
     await open(url).catch(() => console.log(`open your browser at ${url}`));
   }
 }
@@ -116,10 +133,10 @@ const positional = argv.filter((a) => !a.startsWith("-"));
 if (positional[0] === "stop") {
   await stopDaemon();
 } else {
-  const file = positional[0] === "open" ? positional[1] : positional[0];
-  if (!file) {
+  const files = positional[0] === "open" ? positional.slice(1) : positional;
+  if (files.length === 0) {
     console.error("error: no file specified\n");
     usage(1);
   }
-  await openFile(file, noOpen);
+  await openFiles(files, noOpen);
 }

package/dist/assets/{arc-CJ3_-PAT.js → arc-BURSTmp3.js}

@@ -1 +1 @@
-import{At as e,Ct as t,Dt as n,Et as r,Mt as i,Ot as a,St as o,Tt as s,bt as c,jt as l,kt as u,vt as d,xt as f,yt as p}from"./index-Czi2sVlL.js";function m(e){return e.innerRadius}function h(e){return e.outerRadius}function g(e){return e.startAngle}function _(e){return e.endAngle}function v(e){return e&&e.padAngle}function y(e,t,n,r,i,a,o,s){var c=n-e,l=r-t,u=o-i,d=s-a,f=d*c-u*l;if(!(f*f<1e-12))return f=(u*(t-a)-d*(e-i))/f,[e+f*c,t+f*l]}function b(t,n,i,a,o,s,c){var l=t-i,u=n-a,d=(c?s:-s)/e(l*l+u*u),f=d*u,p=-d*l,m=t+f,h=n+p,g=i+f,_=a+p,v=(m+g)/2,y=(h+_)/2,b=g-m,x=_-h,S=b*b+x*x,C=o-s,w=m*_-g*h,T=(x<0?-1:1)*e(r(0,C*C*S-w*w)),E=(w*x-b*T)/S,D=(-w*b-x*T)/S,O=(w*x+b*T)/S,k=(-w*b+x*T)/S,A=E-v,j=D-y,M=O-v,N=k-y;return A*A+j*j>M*M+N*N&&(E=O,D=k),{cx:E,cy:D,x01:-f,y01:-p,x11:E*(o/C-1),y11:D*(o/C-1)}}function x(){var r=m,x=h,S=i(0),C=null,w=g,T=_,E=v,D=null,O=d(k);function k(){var i,d,m=+r.apply(this,arguments),h=+x.apply(this,arguments),g=w.apply(this,arguments)-s,_=T.apply(this,arguments)-s,v=p(_-g),k=_>g;if(D||=i=O(),h<m&&(d=h,h=m,m=d),!(h>1e-12))D.moveTo(0,0);else if(v>l-1e-12)D.moveTo(h*t(g),h*u(g)),D.arc(0,0,h,g,_,!k),m>1e-12&&(D.moveTo(m*t(_),m*u(_)),D.arc(0,0,m,_,g,k));else{var A=g,j=_,M=g,N=_,P=v,F=v,I=E.apply(this,arguments)/2,L=I>1e-12&&(C?+C.apply(this,arguments):e(m*m+h*h)),R=n(p(h-m)/2,+S.apply(this,arguments)),z=R,B=R,V,H;if(L>1e-12){var U=f(L/m*u(I)),W=f(L/h*u(I));(P-=U*2)>1e-12?(U*=k?1:-1,M+=U,N-=U):(P=0,M=N=(g+_)/2),(F-=W*2)>1e-12?(W*=k?1:-1,A+=W,j-=W):(F=0,A=j=(g+_)/2)}var G=h*t(A),K=h*u(A),q=m*t(N),J=m*u(N);if(R>1e-12){var Y=h*t(j),X=h*u(j),Z=m*t(M),Q=m*u(M),$;if(v<a)if($=y(G,K,Z,Q,Y,X,q,J)){var ee=G-$[0],te=K-$[1],ne=Y-$[0],re=X-$[1],ie=1/u(c((ee*ne+te*re)/(e(ee*ee+te*te)*e(ne*ne+re*re)))/2),ae=e($[0]*$[0]+$[1]*$[1]);z=n(R,(m-ae)/(ie-1)),B=n(R,(h-ae)/(ie+1))}else z=B=0}F>1e-12?B>1e-12?(V=b(Z,Q,G,K,h,B,k),H=b(Y,X,q,J,h,B,k),D.moveTo(V.cx+V.x01,V.cy+V.y01),B<R?D.arc(V.cx,V.cy,B,o(V.y01,V.x01),o(H.y01,H.x01),!k):(D.arc(V.cx,V.cy,B,o(V.y01,V.x01),o(V.y11,V.x11),!k),D.arc(0,0,h,o(V.cy+V.y11,V.cx+V.x11),o(H.cy+H.y11,H.cx+H.x11),!k),D.arc(H.cx,H.cy,B,o(H.y11,H.x11),o(H.y01,H.x01),!k))):(D.moveTo(G,K),D.arc(0,0,h,A,j,!k)):D.moveTo(G,K),!(m>1e-12)||!(P>1e-12)?D.lineTo(q,J):z>1e-12?(V=b(q,J,Y,X,m,-z,k),H=b(G,K,Z,Q,m,-z,k),D.lineTo(V.cx+V.x01,V.cy+V.y01),z<R?D.arc(V.cx,V.cy,z,o(V.y01,V.x01),o(H.y01,H.x01),!k):(D.arc(V.cx,V.cy,z,o(V.y01,V.x01),o(V.y11,V.x11),!k),D.arc(0,0,m,o(V.cy+V.y11,V.cx+V.x11),o(H.cy+H.y11,H.cx+H.x11),k),D.arc(H.cx,H.cy,z,o(H.y11,H.x11),o(H.y01,H.x01),!k))):D.arc(0,0,m,N,M,k)}if(D.closePath(),i)return D=null,i+``||null}return k.centroid=function(){var e=(+r.apply(this,arguments)+ +x.apply(this,arguments))/2,n=(+w.apply(this,arguments)+ +T.apply(this,arguments))/2-a/2;return[t(n)*e,u(n)*e]},k.innerRadius=function(e){return arguments.length?(r=typeof e==`function`?e:i(+e),k):r},k.outerRadius=function(e){return arguments.length?(x=typeof e==`function`?e:i(+e),k):x},k.cornerRadius=function(e){return arguments.length?(S=typeof e==`function`?e:i(+e),k):S},k.padRadius=function(e){return arguments.length?(C=e==null?null:typeof e==`function`?e:i(+e),k):C},k.startAngle=function(e){return arguments.length?(w=typeof e==`function`?e:i(+e),k):w},k.endAngle=function(e){return arguments.length?(T=typeof e==`function`?e:i(+e),k):T},k.padAngle=function(e){return arguments.length?(E=typeof e==`function`?e:i(+e),k):E},k.context=function(e){return arguments.length?(D=e??null,k):D},k}export{x as t};
+import{At as e,Ct as t,Dt as n,Et as r,Mt as i,Ot as a,St as o,Tt as s,bt as c,jt as l,kt as u,vt as d,xt as f,yt as p}from"./index-D3M38wf4.js";function m(e){return e.innerRadius}function h(e){return e.outerRadius}function g(e){return e.startAngle}function _(e){return e.endAngle}function v(e){return e&&e.padAngle}function y(e,t,n,r,i,a,o,s){var c=n-e,l=r-t,u=o-i,d=s-a,f=d*c-u*l;if(!(f*f<1e-12))return f=(u*(t-a)-d*(e-i))/f,[e+f*c,t+f*l]}function b(t,n,i,a,o,s,c){var l=t-i,u=n-a,d=(c?s:-s)/e(l*l+u*u),f=d*u,p=-d*l,m=t+f,h=n+p,g=i+f,_=a+p,v=(m+g)/2,y=(h+_)/2,b=g-m,x=_-h,S=b*b+x*x,C=o-s,w=m*_-g*h,T=(x<0?-1:1)*e(r(0,C*C*S-w*w)),E=(w*x-b*T)/S,D=(-w*b-x*T)/S,O=(w*x+b*T)/S,k=(-w*b+x*T)/S,A=E-v,j=D-y,M=O-v,N=k-y;return A*A+j*j>M*M+N*N&&(E=O,D=k),{cx:E,cy:D,x01:-f,y01:-p,x11:E*(o/C-1),y11:D*(o/C-1)}}function x(){var r=m,x=h,S=i(0),C=null,w=g,T=_,E=v,D=null,O=d(k);function k(){var i,d,m=+r.apply(this,arguments),h=+x.apply(this,arguments),g=w.apply(this,arguments)-s,_=T.apply(this,arguments)-s,v=p(_-g),k=_>g;if(D||=i=O(),h<m&&(d=h,h=m,m=d),!(h>1e-12))D.moveTo(0,0);else if(v>l-1e-12)D.moveTo(h*t(g),h*u(g)),D.arc(0,0,h,g,_,!k),m>1e-12&&(D.moveTo(m*t(_),m*u(_)),D.arc(0,0,m,_,g,k));else{var A=g,j=_,M=g,N=_,P=v,F=v,I=E.apply(this,arguments)/2,L=I>1e-12&&(C?+C.apply(this,arguments):e(m*m+h*h)),R=n(p(h-m)/2,+S.apply(this,arguments)),z=R,B=R,V,H;if(L>1e-12){var U=f(L/m*u(I)),W=f(L/h*u(I));(P-=U*2)>1e-12?(U*=k?1:-1,M+=U,N-=U):(P=0,M=N=(g+_)/2),(F-=W*2)>1e-12?(W*=k?1:-1,A+=W,j-=W):(F=0,A=j=(g+_)/2)}var G=h*t(A),K=h*u(A),q=m*t(N),J=m*u(N);if(R>1e-12){var Y=h*t(j),X=h*u(j),Z=m*t(M),Q=m*u(M),$;if(v<a)if($=y(G,K,Z,Q,Y,X,q,J)){var ee=G-$[0],te=K-$[1],ne=Y-$[0],re=X-$[1],ie=1/u(c((ee*ne+te*re)/(e(ee*ee+te*te)*e(ne*ne+re*re)))/2),ae=e($[0]*$[0]+$[1]*$[1]);z=n(R,(m-ae)/(ie-1)),B=n(R,(h-ae)/(ie+1))}else z=B=0}F>1e-12?B>1e-12?(V=b(Z,Q,G,K,h,B,k),H=b(Y,X,q,J,h,B,k),D.moveTo(V.cx+V.x01,V.cy+V.y01),B<R?D.arc(V.cx,V.cy,B,o(V.y01,V.x01),o(H.y01,H.x01),!k):(D.arc(V.cx,V.cy,B,o(V.y01,V.x01),o(V.y11,V.x11),!k),D.arc(0,0,h,o(V.cy+V.y11,V.cx+V.x11),o(H.cy+H.y11,H.cx+H.x11),!k),D.arc(H.cx,H.cy,B,o(H.y11,H.x11),o(H.y01,H.x01),!k))):(D.moveTo(G,K),D.arc(0,0,h,A,j,!k)):D.moveTo(G,K),!(m>1e-12)||!(P>1e-12)?D.lineTo(q,J):z>1e-12?(V=b(q,J,Y,X,m,-z,k),H=b(G,K,Z,Q,m,-z,k),D.lineTo(V.cx+V.x01,V.cy+V.y01),z<R?D.arc(V.cx,V.cy,z,o(V.y01,V.x01),o(H.y01,H.x01),!k):(D.arc(V.cx,V.cy,z,o(V.y01,V.x01),o(V.y11,V.x11),!k),D.arc(0,0,m,o(V.cy+V.y11,V.cx+V.x11),o(H.cy+H.y11,H.cx+H.x11),k),D.arc(H.cx,H.cy,z,o(H.y11,H.x11),o(H.y01,H.x01),!k))):D.arc(0,0,m,N,M,k)}if(D.closePath(),i)return D=null,i+``||null}return k.centroid=function(){var e=(+r.apply(this,arguments)+ +x.apply(this,arguments))/2,n=(+w.apply(this,arguments)+ +T.apply(this,arguments))/2-a/2;return[t(n)*e,u(n)*e]},k.innerRadius=function(e){return arguments.length?(r=typeof e==`function`?e:i(+e),k):r},k.outerRadius=function(e){return arguments.length?(x=typeof e==`function`?e:i(+e),k):x},k.cornerRadius=function(e){return arguments.length?(S=typeof e==`function`?e:i(+e),k):S},k.padRadius=function(e){return arguments.length?(C=e==null?null:typeof e==`function`?e:i(+e),k):C},k.startAngle=function(e){return arguments.length?(w=typeof e==`function`?e:i(+e),k):w},k.endAngle=function(e){return arguments.length?(T=typeof e==`function`?e:i(+e),k):T},k.padAngle=function(e){return arguments.length?(E=typeof e==`function`?e:i(+e),k):E},k.context=function(e){return arguments.length?(D=e??null,k):D},k}export{x as t};

package/dist/assets/architecture-7EHR7CIX-vMwo1MDy.js

@@ -0,0 +1 @@
+import{x as e}from"./mermaid-parser.core-E4GbSOma.js";export{e as createArchitectureServices};