@zkov/pi-md-viewer 0.1.0

package/package.json

@@ -0,0 +1,78 @@
+{
+  "name": "@zkov/pi-md-viewer",
+  "version": "0.1.0",
+  "description": "Local loopback Markdown viewer tool for pi with configurable browser launchers",
+  "author": "Zkov <zkov@yandex.ru>",
+  "license": "MIT",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/zkov96/ai-md-shower.git"
+  },
+  "bugs": {
+    "url": "https://github.com/zkov96/ai-md-shower/issues"
+  },
+  "homepage": "https://github.com/zkov96/ai-md-shower#readme",
+  "type": "module",
+  "keywords": [
+    "pi-package",
+    "pi",
+    "markdown",
+    "viewer",
+    "browser",
+    "playwright",
+    "windows",
+    "linux",
+    "macos",
+    "termux"
+  ],
+  "engines": {
+    "node": ">=22"
+  },
+  "publishConfig": {
+    "access": "public"
+  },
+  "pi": {
+    "extensions": [
+      "./dist/extensions/show-markdown.js"
+    ]
+  },
+  "scripts": {
+    "build": "node -e \"require('node:fs').rmSync('dist',{recursive:true,force:true})\" && tsc -p tsconfig.build.json",
+    "prepack": "npm run build",
+    "typecheck": "tsc --noEmit",
+    "test:runtime": "vitest run tests-ts",
+    "test:extension": "vitest run extensions/show-markdown.test.ts tests/viewer-actions.test.js",
+    "test": "npm run typecheck && npm run test:runtime && npm run test:extension"
+  },
+  "dependencies": {
+    "highlight.js": "^11.11.1",
+    "markdown-it": "^14.1.0",
+    "markdown-it-anchor": "^9.2.0",
+    "markdown-it-task-lists": "^2.1.1"
+  },
+  "bin": {
+    "mdview": "bin/mdview.js"
+  },
+  "files": [
+    "bin/mdview.js",
+    "dist/src-ts/",
+    "dist/extensions/show-markdown.js",
+    "extensions/show-markdown.ts",
+    "src/pi_md_viewer/static/",
+    "src/pi_md_viewer/templates/",
+    "README.md",
+    "LICENSE",
+    "package.json"
+  ],
+  "peerDependencies": {
+    "@earendil-works/pi-coding-agent": "*",
+    "typebox": "*"
+  },
+  "devDependencies": {
+    "@earendil-works/pi-coding-agent": "0.84.2",
+    "@types/node": "^24.0.0",
+    "typescript": "^5.9.0",
+    "typebox": "1.3.7",
+    "vitest": "^3.2.0"
+  }
+}

package/src/pi_md_viewer/static/viewer-actions.js

@@ -0,0 +1,6 @@
+export async function unloadAndMaybeClose({ remove, reload, close }) {
+  await remove();
+  const remaining = await reload();
+  if (remaining === 0) await close();
+  return remaining;
+}

package/src/pi_md_viewer/static/viewer.css

@@ -0,0 +1,252 @@
+:root {
+  color-scheme: dark;
+  --bg: #0a0d12;
+  --panel: #111720;
+  --soft: #18212d;
+  --text: #dce5f2;
+  --muted: #8d9bad;
+  --accent: #7cc4ff;
+  --accent2: #a78bfa;
+  --line: #263243;
+  --code: #090c11;
+  --danger: #ff8d9b;
+}
+
+* { box-sizing: border-box; }
+html { scroll-behavior: smooth; }
+body {
+  margin: 0;
+  background: radial-gradient(circle at 85% 0%, #152138 0, transparent 34rem), var(--bg);
+  color: var(--text);
+  font: 16px/1.72 system-ui, -apple-system, "Segoe UI", sans-serif;
+}
+button {
+  padding: .48rem .72rem;
+  border: 1px solid var(--line);
+  border-radius: 8px;
+  background: var(--soft);
+  color: var(--text);
+  cursor: pointer;
+}
+button:hover { border-color: var(--accent); }
+button:disabled { cursor: default; opacity: .45; }
+
+.progress {
+  position: fixed;
+  z-index: 30;
+  top: 0;
+  left: 0;
+  width: 0;
+  height: 3px;
+  background: linear-gradient(90deg, var(--accent2), var(--accent));
+  box-shadow: 0 0 12px var(--accent);
+}
+.mobile-bar { display: none; }
+.layout {
+  display: grid;
+  grid-template-columns: 240px minmax(0, 820px) 210px;
+  justify-content: center;
+  gap: 36px;
+  padding: 36px 24px 100px;
+}
+.files-panel, .toc-panel {
+  position: sticky;
+  top: 28px;
+  align-self: start;
+  max-height: calc(100vh - 56px);
+  overflow: auto;
+  padding: 18px;
+  border: 1px solid var(--line);
+  border-radius: 16px;
+  background: rgba(17, 23, 32, .86);
+  backdrop-filter: blur(14px);
+}
+.brand {
+  margin-bottom: 18px;
+  color: #fff;
+  font-size: 12px;
+  font-weight: 750;
+  letter-spacing: .08em;
+  text-transform: uppercase;
+}
+.panel-heading {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  margin-bottom: 10px;
+  color: var(--muted);
+  font-size: 12px;
+  font-weight: 700;
+  letter-spacing: .06em;
+  text-transform: uppercase;
+}
+.icon-button { padding: 2px 8px; font-size: 18px; }
+.danger { color: var(--danger); }
+.file-button {
+  display: block;
+  width: 100%;
+  margin: 4px 0;
+  padding: 9px 10px;
+  overflow: hidden;
+  border-color: transparent;
+  background: transparent;
+  text-align: left;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+.file-button small { display: block; color: var(--muted); }
+.file-button.active {
+  border-color: rgba(124, 196, 255, .3);
+  background: rgba(124, 196, 255, .09);
+  color: #fff;
+}
+main { min-width: 0; padding-top: 4px; }
+.document-toolbar {
+  display: flex;
+  align-items: end;
+  justify-content: space-between;
+  gap: 18px;
+  margin-bottom: 28px;
+}
+.document-toolbar h1 { margin: 0; font-size: clamp(1.7rem, 5vw, 2.6rem); }
+.source-path {
+  margin-top: 5px;
+  color: var(--muted);
+  font: 12px/1.45 ui-monospace, SFMono-Regular, Consolas, monospace;
+  overflow-wrap: anywhere;
+}
+.toolbar-actions { display: flex; gap: 8px; }
+.notice, .error {
+  margin: 14px 0;
+  padding: 10px 14px;
+  border-radius: 9px;
+}
+.notice { border: 1px solid rgba(124, 196, 255, .3); background: rgba(124, 196, 255, .08); }
+.error { border: 1px solid rgba(255, 141, 155, .35); background: rgba(255, 141, 155, .09); color: #ffd5da; }
+.empty-state { padding: 2rem; border: 1px dashed var(--line); border-radius: 12px; color: var(--muted); }
+.markdown-body h1, .markdown-body h2, .markdown-body h3, .markdown-body h4 {
+  position: relative;
+  color: #f5f8fc;
+  line-height: 1.22;
+  letter-spacing: -.025em;
+  scroll-margin-top: 24px;
+}
+.markdown-body h1 { margin: 0 0 32px; font-size: clamp(2rem, 6vw, 3.3rem); }
+.markdown-body h2 { margin: 58px 0 18px; padding-top: 12px; border-top: 1px solid var(--line); font-size: 1.8rem; }
+.markdown-body h3 { margin: 36px 0 12px; font-size: 1.28rem; }
+.markdown-body h4 { margin: 28px 0 10px; font-size: 1.05rem; }
+p { margin: 14px 0; }
+ul, ol { margin: 12px 0 20px; padding-left: 26px; }
+li { margin: 5px 0; }
+li::marker { color: var(--accent2); }
+a { color: var(--accent); }
+strong { color: #fff; }
+code {
+  padding: .16em .38em;
+  border: 1px solid #2a3749;
+  border-radius: 6px;
+  background: var(--soft);
+  color: #b9ddff;
+  font: .88em ui-monospace, SFMono-Regular, Consolas, monospace;
+}
+.code-block {
+  position: relative;
+  margin: 20px 0 26px;
+  overflow: hidden;
+  border: 1px solid var(--line);
+  border-radius: 13px;
+  background: var(--code);
+  box-shadow: 0 15px 50px rgba(0, 0, 0, .22);
+}
+.code-label {
+  padding: 8px 14px;
+  border-bottom: 1px solid var(--line);
+  background: #101620;
+  color: var(--muted);
+  font: 11px ui-monospace, SFMono-Regular, Consolas, monospace;
+  text-transform: uppercase;
+}
+pre { margin: 0; padding: 18px; overflow-x: auto; line-height: 1.55; }
+pre code { padding: 0; border: 0; background: transparent; color: #c9d8ea; }
+.copy-button {
+  position: absolute;
+  top: 7px;
+  right: 8px;
+  padding: 4px 9px;
+}
+blockquote {
+  margin: 18px 0;
+  padding: 12px 18px;
+  border-left: 3px solid var(--accent2);
+  background: rgba(167, 139, 250, .08);
+  color: #cbd5e1;
+}
+table { width: 100%; border-collapse: collapse; overflow: auto; }
+th, td { padding: 8px 11px; border: 1px solid var(--line); text-align: left; }
+th { background: var(--soft); }
+hr { margin: 40px 0; border: 0; border-top: 1px solid var(--line); }
+.toc-link {
+  display: block;
+  margin: 2px 0;
+  padding: 5px 7px;
+  border-left: 2px solid transparent;
+  border-radius: 5px;
+  color: var(--muted);
+  font-size: 12px;
+  line-height: 1.35;
+  text-decoration: none;
+}
+.toc-link.level-2 { padding-left: 13px; }
+.toc-link.level-3 { padding-left: 23px; font-size: 11px; }
+.toc-link:hover, .toc-link.active {
+  border-left-color: var(--accent);
+  background: rgba(124, 196, 255, .08);
+  color: var(--text);
+}
+
+@media (max-width: 1180px) {
+  .layout { grid-template-columns: 220px minmax(0, 820px); }
+  .toc-panel { display: none; }
+}
+
+@media (max-width: 980px) {
+  .mobile-bar {
+    position: sticky;
+    z-index: 20;
+    top: 0;
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    padding: 10px 16px;
+    border-bottom: 1px solid var(--line);
+    background: rgba(10, 13, 18, .94);
+  }
+  .layout { display: block; padding: 20px 18px 80px; }
+  .files-panel {
+    display: none;
+    position: relative;
+    top: auto;
+    max-height: 48vh;
+    margin: 0 auto 28px;
+    max-width: 820px;
+  }
+  .files-panel.open { display: block; }
+  main { max-width: 820px; margin: auto; }
+  .document-toolbar { align-items: start; flex-direction: column; }
+}
+
+@media (max-width: 520px) {
+  .layout { padding-inline: 14px; }
+  .toolbar-actions { width: 100%; }
+  .toolbar-actions button { flex: 1; }
+  .markdown-body h2 { margin-top: 44px; }
+}
+
+@media print {
+  :root { color-scheme: light; }
+  body { background: white; color: #222; }
+  .mobile-bar, .files-panel, .toc-panel, .progress, .document-toolbar, .copy-button, .notice { display: none !important; }
+  .layout { display: block; padding: 0; }
+  main { max-width: none; }
+  .markdown-body h1, .markdown-body h2, .markdown-body h3, .markdown-body h4, strong { color: #111; }
+}

package/src/pi_md_viewer/static/viewer.js

@@ -0,0 +1,206 @@
+import { unloadAndMaybeClose } from "/static/viewer-actions.js";
+
+const csrf = document.querySelector('meta[name="csrf-token"]').content;
+const clientId = crypto.randomUUID();
+const state = { files: [], activeId: null, revision: null, pinned: false };
+
+const elements = {
+  fileList: document.getElementById("file-list"),
+  toc: document.getElementById("toc"),
+  document: document.getElementById("document"),
+  title: document.getElementById("document-title"),
+  source: document.getElementById("source-path"),
+  error: document.getElementById("error"),
+  notice: document.getElementById("notice"),
+  progress: document.getElementById("progress"),
+  status: document.getElementById("connection-status"),
+  sidebar: document.getElementById("sidebar"),
+  toggle: document.getElementById("sidebar-toggle"),
+  refresh: document.getElementById("refresh-file"),
+  unload: document.getElementById("unload-file"),
+  close: document.getElementById("close-viewer"),
+};
+
+async function api(path, options = {}) {
+  const request = { method: options.method || "GET", headers: { ...(options.headers || {}) } };
+  if (options.body !== undefined) {
+    request.headers["Content-Type"] = "application/json";
+    request.body = JSON.stringify(options.body);
+  }
+  if (request.method !== "GET") request.headers["X-CSRF-Token"] = csrf;
+  const response = await fetch(path, request);
+  const payload = await response.json();
+  if (!response.ok) throw new Error(payload.error?.message || `HTTP ${response.status}`);
+  return payload;
+}
+
+function showError(error) {
+  elements.error.textContent = error instanceof Error ? error.message : String(error);
+  elements.error.hidden = false;
+}
+
+function clearError() {
+  elements.error.hidden = true;
+  elements.error.textContent = "";
+}
+
+function notify(message) {
+  elements.notice.textContent = message;
+  elements.notice.hidden = false;
+  setTimeout(() => { elements.notice.hidden = true; }, 2200);
+}
+
+function renderFileList() {
+  elements.fileList.replaceChildren();
+  for (const file of state.files) {
+    const button = document.createElement("button");
+    button.type = "button";
+    button.className = `file-button${file.id === state.activeId ? " active" : ""}`;
+    button.title = file.path;
+    button.append(document.createTextNode(file.displayName));
+    if (file.parentLabel) {
+      const parent = document.createElement("small");
+      parent.textContent = file.parentLabel;
+      button.append(parent);
+    }
+    button.addEventListener("click", () => selectFile(file.id, true));
+    elements.fileList.append(button);
+  }
+}
+
+function renderToc(items) {
+  elements.toc.replaceChildren();
+  for (const item of items) {
+    const link = document.createElement("a");
+    link.className = `toc-link level-${item.level}`;
+    link.href = `#${encodeURIComponent(item.id)}`;
+    link.textContent = item.title;
+    elements.toc.append(link);
+  }
+  observeHeadings();
+}
+
+function addCopyButtons() {
+  elements.document.querySelectorAll(".code-block pre").forEach((pre) => {
+    const button = document.createElement("button");
+    button.type = "button";
+    button.className = "copy-button";
+    button.textContent = "Copy";
+    button.addEventListener("click", async () => {
+      await navigator.clipboard.writeText(pre.innerText);
+      button.textContent = "Copied";
+      setTimeout(() => { button.textContent = "Copy"; }, 1200);
+    });
+    pre.parentElement.append(button);
+  });
+}
+
+function observeHeadings() {
+  const links = [...elements.toc.querySelectorAll(".toc-link")];
+  const byId = new Map(links.map((link) => [decodeURIComponent(link.hash.slice(1)), link]));
+  const observer = new IntersectionObserver((entries) => {
+    for (const entry of entries) {
+      if (!entry.isIntersecting) continue;
+      links.forEach((link) => link.classList.remove("active"));
+      byId.get(entry.target.id)?.classList.add("active");
+    }
+  }, { rootMargin: "-12% 0px -76%" });
+  elements.document.querySelectorAll("h1[id],h2[id],h3[id]").forEach((heading) => observer.observe(heading));
+}
+
+async function selectFile(fileId, pinned = false) {
+  clearError();
+  state.activeId = fileId;
+  state.pinned = pinned;
+  renderFileList();
+  const file = state.files.find((candidate) => candidate.id === fileId);
+  if (!file) return;
+  elements.title.textContent = file.displayName;
+  elements.source.textContent = file.path;
+  try {
+    const rendered = await api(`/api/v1/files/${encodeURIComponent(fileId)}`);
+    state.revision = rendered.revision;
+    elements.document.innerHTML = rendered.html;
+    renderToc(rendered.toc);
+    addCopyButtons();
+  } catch (error) {
+    showError(error);
+    elements.document.replaceChildren();
+    renderToc([]);
+  }
+}
+
+async function loadFiles({ announce = false } = {}) {
+  const previous = new Set(state.files.map((file) => file.id));
+  const payload = await api("/api/v1/files");
+  state.files = payload.files;
+  const newest = state.files.at(-1);
+  if (!state.files.some((file) => file.id === state.activeId)) {
+    state.activeId = newest?.id || null;
+    state.pinned = false;
+  } else if (!state.pinned && newest && !previous.has(newest.id)) {
+    state.activeId = newest.id;
+  }
+  renderFileList();
+  if (state.activeId) await selectFile(state.activeId, state.pinned);
+  if (announce && state.files.some((file) => !previous.has(file.id))) notify("Добавлены новые документы");
+  return state.files.length;
+}
+
+async function unloadActive() {
+  if (!state.activeId) return;
+  const fileId = state.activeId;
+  await unloadAndMaybeClose({
+    remove: () => api(`/api/v1/files/${encodeURIComponent(fileId)}`, { method: "DELETE" }),
+    reload: async () => {
+      state.activeId = null;
+      state.pinned = false;
+      return loadFiles();
+    },
+    close: closeViewer,
+  });
+}
+
+async function closeViewer() {
+  await api("/api/v1/shutdown", { method: "POST", body: {} });
+  elements.status.textContent = "Viewer закрыт";
+  window.close();
+}
+
+function connectEvents() {
+  const events = new EventSource(`/api/v1/events?clientId=${encodeURIComponent(clientId)}`);
+  events.addEventListener("open", () => { elements.status.textContent = "Подключено"; });
+  events.addEventListener("files_changed", () => loadFiles({ announce: true }).catch(showError));
+  events.addEventListener("file_removed", () => loadFiles().catch(showError));
+  events.addEventListener("server_closing", () => {
+    elements.status.textContent = "Viewer закрывается";
+    events.close();
+    window.close();
+  });
+  events.addEventListener("error", () => { elements.status.textContent = "Переподключение…"; });
+}
+
+function updateProgress() {
+  const maximum = document.documentElement.scrollHeight - innerHeight;
+  elements.progress.style.width = `${maximum > 0 ? (scrollY / maximum) * 100 : 0}%`;
+}
+
+elements.refresh.addEventListener("click", () => state.activeId && selectFile(state.activeId, state.pinned));
+elements.unload.addEventListener("click", () => unloadActive().catch(showError));
+elements.close.addEventListener("click", () => closeViewer().catch(showError));
+elements.toggle.addEventListener("click", () => {
+  const open = elements.sidebar.classList.toggle("open");
+  elements.toggle.setAttribute("aria-expanded", String(open));
+});
+addEventListener("scroll", updateProgress, { passive: true });
+
+await api("/api/v1/clients/open", { method: "POST", body: { clientId } });
+await loadFiles();
+connectEvents();
+setInterval(() => api("/api/v1/clients/open", {
+  method: "POST",
+  body: { clientId, heartbeat: true },
+}).catch(() => {}), 2000);
+addEventListener("pagehide", () => navigator.sendBeacon(
+  `/api/v1/clients/close?clientId=${encodeURIComponent(clientId)}&csrf=${encodeURIComponent(csrf)}`
+));

package/src/pi_md_viewer/templates/viewer.html

@@ -0,0 +1,49 @@
+<!doctype html>
+<html lang="ru">
+<head>
+  <meta charset="utf-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1">
+  <meta name="csrf-token" content="{{CSRF_TOKEN}}">
+  <title>Markdown Viewer</title>
+  <link rel="stylesheet" href="/static/viewer.css">
+</head>
+<body>
+  <div class="progress" id="progress"></div>
+  <header class="mobile-bar">
+    <button id="sidebar-toggle" type="button" aria-controls="sidebar" aria-expanded="false">Документы</button>
+    <span id="connection-status">Подключение…</span>
+  </header>
+  <div class="layout">
+    <aside class="files-panel" id="sidebar">
+      <div class="brand">pi · markdown viewer</div>
+      <div class="panel-heading">
+        <span>Файлы</span>
+        <button id="close-viewer" class="icon-button danger" type="button" title="Закрыть viewer">×</button>
+      </div>
+      <nav id="file-list" aria-label="Открытые Markdown-файлы"></nav>
+    </aside>
+    <main>
+      <div class="document-toolbar">
+        <div>
+          <h1 id="document-title">Markdown Viewer</h1>
+          <div id="source-path" class="source-path"></div>
+        </div>
+        <div class="toolbar-actions">
+          <button id="refresh-file" type="button">Обновить</button>
+          <button id="unload-file" type="button">Выгрузить</button>
+        </div>
+      </div>
+      <div id="notice" class="notice" role="status" hidden></div>
+      <div id="error" class="error" role="alert" hidden></div>
+      <article id="document" class="markdown-body">
+        <p class="empty-state">Добавьте Markdown-файл командой <code>mdview файл.md</code>.</p>
+      </article>
+    </main>
+    <aside class="toc-panel">
+      <div class="panel-heading">Содержание</div>
+      <nav id="toc" aria-label="Содержание документа"></nav>
+    </aside>
+  </div>
+  <script type="module" src="/static/viewer.js"></script>
+</body>
+</html>