@khanglvm/relay 0.4.0 → 0.4.2

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@khanglvm/relay",
-  "version": "0.4.0",
+  "version": "0.4.2",
   "description": "Browser-based question boards with rich blocks (markdown, charts, mermaid, tables, code, sandboxed HTML) and element-level annotations for AI coding agents (Claude Code, Codex, …): ask users structured questions, present interactive visuals, collect inline comments, wait for submit, read answers as JSON.",
   "keywords": [
     "ai-agents",

package/skills/relay/SKILL.md

@@ -1,6 +1,6 @@
 ---
 name: relay
-description: Show the user anything visual in an interactive browser board - repo/file structures, architecture diagrams (mermaid, graphviz, plantuml, uml), charts, sortable data tables, code, prototypes - and/or ask structured questions (single/multi choice, yes-no, free text, scale), then wait for Submit and read JSON answers plus element-level comments and user-edited diagrams. PROACTIVELY use whenever you would otherwise (a) draw an ASCII tree/table/diagram in the terminal or describe a structure/design/plan in prose - render it as interactive blocks instead, (b) call a native ask-user/question tool with 2+ questions or options that need explanation, or (c) hand-roll an HTML file or local server to demo an idea - relay replaces all three. Triggers - show me the structure, repo/project/folder structure, file tree, directory layout, codebase map, architecture overview, dependency graph, sequence/class diagram, uml, visualize, diagram, chart, data table, metrics review, mockup or prototype review, plan approval, design/UX feedback, compare alternatives, let the user edit the diagram, clarify requirements before ambiguous work, survey, "ask the user", "show the user", "which do you prefer", "get feedback". Skip only for a single trivial yes/no confirmation.
+description: "Show the user anything visual in an interactive browser board - repo/file structures, architecture diagrams (mermaid, graphviz, plantuml, uml), charts, sortable tables, code, prototypes - and/or ask structured questions (choice, yes-no, text, scale), then wait for Submit and read JSON answers plus element comments and user-edited diagrams. PROACTIVELY use instead of (a) drawing an ASCII tree/table/diagram in the terminal or describing a structure/design/plan in prose, (b) a native ask-user tool for 2+ questions or options needing explanation, (c) hand-rolling an HTML demo + server. Triggers: show me the structure, repo/folder structure, file tree, directory layout, codebase map, architecture overview, dependency graph, sequence/class diagram, uml, visualize, diagram, chart, data table, metrics review, prototype review, plan approval, design feedback, compare alternatives, edit the diagram, clarify requirements, survey, ask the user, show the user, get feedback. Skip for a single trivial yes/no confirmation."
 ---
 
 # relay (`rly`)

package/src/cli.js

@@ -652,6 +652,9 @@ const SKILL_SRC = path.join(PKG_ROOT, 'skills', 'relay');
 const KNOWN_SKILL_DIRS = () => ({
   claude: path.join(os.homedir(), '.claude', 'skills', 'relay'),
   codex: path.join(os.homedir(), '.codex', 'skills', 'relay'),
+  // The cross-agent skills dir (npx-skills ecosystem). Some Codex/agent
+  // setups load skills from here INSTEAD of ~/.codex/skills.
+  agents: path.join(os.homedir(), '.agents', 'skills', 'relay'),
 });
 
 // Pre-rename skill dirs (quest-board). `skill install` removes these so a
@@ -702,19 +705,15 @@ function skillFreshnessWarning() {
 }
 
 function skillTargets(target) {
-  const home = os.homedir();
-  const known = {
-    claude: path.join(home, '.claude', 'skills', 'relay'),
-    codex: path.join(home, '.codex', 'skills', 'relay'),
-  };
+  const known = KNOWN_SKILL_DIRS();
   if (!target || target === true || target === 'auto') {
     const found = Object.values(known).filter((p) => fs.existsSync(path.dirname(path.dirname(p))));
     if (!found.length) {
-      throw new CliError('no agent dirs found (~/.claude or ~/.codex). Use --target claude|codex|both|<dir>.');
+      throw new CliError('no agent dirs found (~/.claude, ~/.codex, or ~/.agents). Use --target claude|codex|agents|all|<dir>.');
     }
     return found;
   }
-  if (target === 'both') return Object.values(known);
+  if (target === 'both' || target === 'all') return Object.values(known);
   if (known[target]) return [known[target]];
   return [path.join(path.resolve(target), 'relay')];
 }

package/src/ui/annotate.js

@@ -202,7 +202,14 @@
     badges = [];
     if (torndown) return;
     registered = registered.filter((r) => r.el.isConnected);
+    // While a block is expanded full-screen, body-level overlay badges for
+    // OTHER blocks would float above the overlay at stale positions — only
+    // badge elements inside the expanded block.
+    const fullEl = document.body.classList.contains('blk-full-open')
+      ? document.querySelector('.blk-full')
+      : null;
     for (const entry of registered) {
+      if (fullEl && !fullEl.contains(entry.el)) continue;
       const count = matching(entry.info).length;
       if (!count) continue;
       const badge = el('span', { class: 'ann-badge', title: count + (count === 1 ? ' comment' : ' comments') }, String(count));

package/src/ui/blocks.css

@@ -265,3 +265,37 @@
   max-width: 100%;
   height: auto;
 }
+
+/* ---------- viewer controls (zoom / fit / full-screen) ---------- */
+.blk-viewer { position: relative; }
+.blk-tools {
+  position: absolute; top: 6px; right: 6px;
+  display: flex; gap: 2px; align-items: center;
+  background: var(--card); border: 1px solid var(--border);
+  border-radius: 8px; padding: 2px 4px;
+  opacity: 0.35; transition: opacity 150ms var(--ease);
+  z-index: 5;
+}
+.blk-viewer:hover .blk-tools, .blk-full .blk-tools { opacity: 1; }
+.blk-tools button {
+  background: none; border: none; color: var(--fg-2);
+  font: inherit; font-size: 0.8rem; line-height: 1;
+  padding: 4px 6px; border-radius: 6px; cursor: pointer;
+}
+.blk-tools button:hover { background: var(--bg-sunken); color: var(--accent); }
+.blk-tools .tool-pct { color: var(--muted); font-size: 0.72rem; min-width: 30px; text-align: center; }
+/* charts keep their annotation-count badge top-right; tools go top-left there */
+.blk-chart .blk-tools { right: auto; left: 6px; }
+
+/* full-screen = fixed overlay (NOT native fullscreen: annotation pins/badges/
+   popover live on <body> and must stay visible above the expanded block) */
+.blk-full {
+  position: fixed !important; inset: 12px; z-index: 49;
+  background: var(--card); border: 1px solid var(--border);
+  border-radius: 12px; box-shadow: var(--shadow-lift);
+  overflow: auto; max-height: none !important; margin: 0 !important;
+  padding: 48px 16px 16px;
+}
+body.blk-full-open { overflow: hidden; }
+.blk-chart.blk-full { height: calc(100vh - 24px) !important; width: auto !important; }
+.blk-htmlwrap.blk-full iframe.viz { height: calc(100vh - 90px) !important; width: 100%; }

package/src/ui/blocks.js

@@ -502,6 +502,7 @@
     }
     syncBadge();
     wrap.append(badge);
+    attachViewer(wrap, { zoomEl: null }); // full-screen only; charts redraw responsively
 
     loadChart().then((Chart) => {
       let config = block.config
@@ -724,6 +725,8 @@
             });
           });
         }
+        // re-attach per render: innerHTML replacement above wiped the old bar
+        if (svgEl) attachViewer(container, { zoomEl: svgEl, natural: svgNatural(svgEl) });
         if (onDone) onDone();
       };
       try {
@@ -809,6 +812,7 @@
         const svgEl = viz.renderSVGElement(block.dot || '');
         sizeDiagramSvg(svgEl);
         container.replaceChildren(svgEl);
+        attachViewer(container, { zoomEl: svgEl, natural: svgNatural(svgEl) });
         if (!ctx.annotate) return;
         const parts = svgEl.querySelectorAll('g.node, g.edge');
         parts.forEach((g) => {
@@ -885,6 +889,13 @@
         if (block.height) img.style.height = clampHeight(block.height, 360) + 'px';
         img.addEventListener('error', fail);
         container.replaceChildren(img);
+        const attachImgViewer = () =>
+          attachViewer(container, {
+            zoomEl: img,
+            natural: () => (img.naturalWidth > 0 ? { w: img.naturalWidth, h: img.naturalHeight } : null),
+          });
+        if (img.complete && img.naturalWidth > 0) attachImgViewer();
+        else img.addEventListener('load', attachImgViewer, { once: true });
         if (ctx.annotate) {
           ctx.annotate.register(img, {
             blockId,
@@ -897,10 +908,115 @@
     return container;
   }
 
+  // ---------- viewer controls (zoom / fit / full-screen) ----------
+  // Large diagrams get squeezed to the column width; these controls let the
+  // user zoom (buttons or cmd/ctrl+wheel) and expand any visual block into a
+  // full-screen overlay. An overlay — NOT the native Fullscreen API — keeps
+  // the annotation pins/badges/popover usable while expanded (they live on
+  // <body>, which native fullscreen would hide).
+  let fullOpen = null; // container currently expanded
+
+  function exitFull() {
+    if (!fullOpen) return;
+    fullOpen.classList.remove('blk-full');
+    document.body.classList.remove('blk-full-open');
+    const btn = fullOpen.querySelector('.blk-tools .tool-full');
+    if (btn) btn.textContent = '⛶';
+    fullOpen = null;
+    window.dispatchEvent(new Event('resize'));
+  }
+  document.addEventListener('keydown', (e) => {
+    if (e.key === 'Escape' && fullOpen) exitFull();
+  });
+
+  // opts: { zoomEl: svg|img|null, natural: () => ({w,h}|null) } — zoomEl null
+  // means full-screen only (charts, html iframes).
+  function attachViewer(container, opts) {
+    if (container._rlyTools) container._rlyTools.remove();
+    container.classList.add('blk-viewer');
+    const zoomable = Boolean(opts && opts.zoomEl);
+    let z = null; // null = fit-to-width
+
+    const pct = el('span', { class: 'tool-pct' }, 'fit');
+    function apply() {
+      if (!zoomable) return;
+      const target = opts.zoomEl;
+      const nat = opts.natural();
+      if (z === null || !nat || !nat.w) {
+        target.style.width = '100%';
+        target.style.maxWidth = nat && nat.w ? Math.ceil(nat.w) + 'px' : '100%';
+        target.style.height = 'auto';
+        pct.textContent = 'fit';
+      } else {
+        target.style.maxWidth = 'none';
+        target.style.width = Math.round(nat.w * z) + 'px';
+        target.style.height = 'auto';
+        pct.textContent = Math.round(z * 100) + '%';
+      }
+      // annotation overlay badges reposition on resize
+      window.dispatchEvent(new Event('resize'));
+    }
+    function currentZ() {
+      if (z !== null) return z;
+      const nat = opts.natural();
+      if (!nat || !nat.w) return 1;
+      const shown = opts.zoomEl.getBoundingClientRect().width;
+      return shown > 0 ? shown / nat.w : 1;
+    }
+    function setZoom(next) {
+      z = next === null ? null : Math.min(5, Math.max(0.2, next));
+      apply();
+    }
+
+    const tools = el('div', { class: 'blk-tools' });
+    if (zoomable) {
+      tools.append(
+        el('button', { type: 'button', title: 'Zoom out', onclick: () => setZoom(currentZ() / 1.25) }, '−'),
+        pct,
+        el('button', { type: 'button', title: 'Zoom in', onclick: () => setZoom(currentZ() * 1.25) }, '+'),
+        el('button', { type: 'button', title: 'Actual size', onclick: () => setZoom(1) }, '1:1'),
+        el('button', { type: 'button', title: 'Fit to width', onclick: () => setZoom(null) }, 'fit')
+      );
+      container.addEventListener(
+        'wheel',
+        (e) => {
+          if (!(e.ctrlKey || e.metaKey)) return;
+          e.preventDefault();
+          setZoom(currentZ() * (e.deltaY < 0 ? 1.15 : 1 / 1.15));
+        },
+        { passive: false }
+      );
+    }
+    const fullBtn = el('button', { class: 'tool-full', type: 'button', title: 'Full screen (Esc closes)' }, '⛶');
+    fullBtn.addEventListener('click', () => {
+      if (fullOpen === container) {
+        exitFull();
+        return;
+      }
+      exitFull();
+      container.classList.add('blk-full');
+      document.body.classList.add('blk-full-open');
+      fullOpen = container;
+      fullBtn.textContent = '✕';
+      window.dispatchEvent(new Event('resize'));
+    });
+    tools.append(fullBtn);
+    container.append(tools);
+    container._rlyTools = tools;
+    if (zoomable) apply();
+  }
+
+  function svgNatural(svgEl) {
+    return () => {
+      const vb = svgEl.viewBox && svgEl.viewBox.baseVal;
+      return vb && vb.width > 0 ? { w: vb.width, h: vb.height } : null;
+    };
+  }
+
   // ---------- html (sandboxed iframe) ----------
   function renderHtml(block, ctx, blockId) {
     const height = clampHeight(block.height, 360);
-    return el('iframe', {
+    const iframe = el('iframe', {
       class: 'viz',
       'data-block-id': blockId,
       'data-question-id': ctx.questionId || '',
@@ -909,6 +1025,9 @@
       sandbox: 'allow-scripts allow-forms allow-popups allow-modals',
       loading: 'lazy',
     });
+    const wrap = el('div', { class: 'blk-htmlwrap' }, iframe);
+    attachViewer(wrap, { zoomEl: null });
+    return wrap;
   }
 
   // ---------- dispatch ----------