egregore-artifacts 0.5.0 → 0.9.5

package/lib/render.js

@@ -4,12 +4,22 @@ import { renderToStaticMarkup } from 'react-dom/server';
 import { Renderer, JSONUIProvider, createStateStore } from '@json-render/react';
 import { registry } from './registry.js';
 import { htmlShell } from './shell.js';
+import { CommentSection } from './comments.js';
 
 const h = React.createElement;
 
-// Render a React element tree (from direct templates)
+// Render a React element tree (from direct templates).
+// If `options.parent` is set, append a CommentSection so every commentable
+// artifact gets the same thread + composer treatment without per-template work.
 export function renderToHtml(element, options = {}) {
-  const bodyHtml = renderToStaticMarkup(element);
+  const finalElement = options.parent
+    ? h('div', null, element, h(CommentSection, {
+        parent: options.parent,
+        comments: options.comments || [],
+      }))
+    : element;
+
+  const bodyHtml = renderToStaticMarkup(finalElement);
   return htmlShell(bodyHtml, {
     title: options.title || 'Egregore Artifact',
     type: options.type || 'artifact',

package/lib/shell.js

@@ -29,6 +29,7 @@ export function htmlShell(bodyHtml, { title = 'Egregore Artifact', type = 'artif
     --muted: ${colors.muted};
     --warm-gray: ${colors.warmGray};
     --terminal-bg: ${colors.terminalBg};
+    --terminal-text: ${colors.terminalText};
     --font-serif: ${fonts.serif};
     --font-sans: ${fonts.sans};
     --font-mono: ${fonts.mono};
@@ -45,6 +46,13 @@ export function htmlShell(bodyHtml, { title = 'Egregore Artifact', type = 'artif
     --success-bg: #e8f5e9;
     --success-fg: #2e7d32;
     --green-p1: #2A7B5B;
+    /* Subgraph node fills — subtle tinted backgrounds per node type.
+       Strokes/labels use the existing strong tokens (--terracotta,
+       --blue-muted, --green-p1, --gold, etc.) for contrast. */
+    --quest-fill: rgba(42, 123, 91, 0.12);
+    --artifact-fill: rgba(176, 141, 87, 0.14);
+    --artifact-stroke: #B08D57;
+    --pr-fill: rgba(59, 45, 33, 0.04);
   }
 
   /* Dark mode overrides */
@@ -56,6 +64,7 @@ export function htmlShell(bodyHtml, { title = 'Egregore Artifact', type = 'artif
     --muted: ${colors.darkTextMuted};
     --warm-gray: ${colors.darkTextDim};
     --terminal-bg: ${colors.darkBgCode};
+    --terminal-text: ${colors.terminalText};
     --surface: ${colors.darkBgCard};
     --hairline: rgba(255, 255, 255, 0.08);
     --subtle-fill: rgba(255, 255, 255, 0.04);
@@ -67,6 +76,10 @@ export function htmlShell(bodyHtml, { title = 'Egregore Artifact', type = 'artif
     --success-bg: rgba(107, 191, 107, 0.12);
     --success-fg: #9ed9a0;
     --green-p1: #6BBF6B;
+    --quest-fill: rgba(107, 191, 107, 0.14);
+    --artifact-fill: rgba(200, 169, 122, 0.16);
+    --artifact-stroke: #C8A97A;
+    --pr-fill: rgba(255, 255, 255, 0.04);
   }
 
   *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
@@ -424,6 +437,240 @@ export function htmlShell(bodyHtml, { title = 'Egregore Artifact', type = 'artif
     .eg-meta-row { gap: 10px; }
     .eg-theme-toggle { top: 0.75rem; right: 0.75rem; width: 32px; height: 32px; font-size: 14px; }
   }
+
+  /* ── Comments section ─────────────────────────────── */
+  .eg-comments-section {
+    margin-top: 3rem;
+    padding-top: 2rem;
+    border-top: 1px solid var(--hairline);
+  }
+  .eg-comments-heading {
+    display: flex;
+    align-items: baseline;
+    gap: 0.5rem;
+    font-family: var(--font-sans);
+    font-size: 18px;
+    font-weight: 600;
+    color: var(--black);
+    margin-bottom: 1.25rem;
+  }
+  .eg-comments-bullet { font-size: 16px; }
+  .eg-comments-count { color: var(--muted); font-weight: 400; font-size: 15px; }
+  .eg-comments-empty {
+    font-family: var(--font-sans);
+    color: var(--muted);
+    font-style: italic;
+    padding: 1rem 0 1.5rem;
+  }
+  .eg-comments-thread {
+    display: flex;
+    flex-direction: column;
+    gap: 1rem;
+    margin-bottom: 2rem;
+  }
+  .eg-comment {
+    background: var(--surface);
+    border: 1px solid var(--hairline);
+    border-radius: 6px;
+    padding: 0.875rem 1rem;
+  }
+  .eg-comment-meta {
+    display: flex;
+    align-items: center;
+    gap: 0.5rem;
+    font-family: var(--font-mono);
+    font-size: 12px;
+    color: var(--muted);
+    margin-bottom: 0.5rem;
+  }
+  .eg-comment-avatar {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    width: 22px; height: 22px;
+    border-radius: 50%;
+    background: var(--terracotta-chip);
+    color: var(--terracotta);
+    font-family: var(--font-sans);
+    font-size: 11px;
+    font-weight: 600;
+  }
+  .eg-comment-author { color: var(--black); font-weight: 500; }
+  .eg-comment-date { font-feature-settings: "tnum"; }
+  .eg-comment-to { color: var(--blue-muted); }
+  .eg-comment-body {
+    font-family: var(--font-serif);
+    font-size: 15px;
+    line-height: 1.55;
+    color: var(--dark);
+  }
+  .eg-comment-body p { margin: 0 0 0.5rem; }
+  .eg-comment-body p:last-child { margin-bottom: 0; }
+  .eg-comment-actions {
+    margin-top: 0.5rem;
+    display: flex;
+    justify-content: flex-end;
+  }
+  .eg-comment-reply {
+    background: transparent;
+    border: none;
+    color: var(--muted);
+    font-family: var(--font-mono);
+    font-size: 11px;
+    cursor: pointer;
+    padding: 0.25rem 0.5rem;
+    border-radius: 4px;
+  }
+  .eg-comment-reply:hover { background: var(--neutral-chip); color: var(--terracotta); }
+  .eg-comment-reply.eg-comment-reply-active {
+    background: var(--terracotta-chip);
+    color: var(--terracotta);
+  }
+
+  /* Composer — a snippet builder, NOT a form that posts */
+  .eg-comments-composer {
+    background: var(--surface);
+    border: 1px solid var(--hairline);
+    border-radius: 6px;
+    padding: 1rem;
+  }
+  .eg-comments-composer .eg-card-title {
+    font-family: var(--font-sans);
+    font-size: 14px;
+    font-weight: 600;
+    color: var(--black);
+    margin-bottom: 0.625rem;
+  }
+  .eg-comment-target {
+    font-family: var(--font-mono);
+    font-size: 12px;
+    background: var(--neutral-chip);
+    color: var(--terracotta);
+    padding: 1px 6px;
+    border-radius: 3px;
+    font-weight: 500;
+  }
+  .eg-comment-textarea {
+    width: 100%;
+    box-sizing: border-box;
+    background: var(--cream);
+    border: 1px solid var(--hairline);
+    border-radius: 4px;
+    padding: 0.625rem 0.75rem;
+    font-family: var(--font-sans);
+    font-size: 14px;
+    color: var(--black);
+    resize: vertical;
+    min-height: 96px;
+    margin-bottom: 1rem;
+  }
+  .eg-comment-textarea:focus {
+    outline: none;
+    border-color: var(--terracotta);
+  }
+
+  .eg-comment-preview-label {
+    font-family: var(--font-mono);
+    font-size: 11px;
+    color: var(--muted);
+    text-transform: uppercase;
+    letter-spacing: 0.05em;
+    margin-bottom: 0.375rem;
+  }
+  .eg-comment-preview-frame {
+    position: relative;
+    background: var(--terminal-bg);
+    border: 1px solid var(--hairline);
+    border-left: 3px solid var(--terracotta);
+    border-radius: 4px;
+    overflow: hidden;
+  }
+  .eg-comment-preview {
+    margin: 0;
+    padding: 0.75rem 4.5rem 0.75rem 0.875rem;
+    font-family: var(--font-mono);
+    font-size: 12.5px;
+    line-height: 1.55;
+    color: var(--terminal-text);
+    white-space: pre-wrap;
+    word-break: break-word;
+    overflow-x: auto;
+    min-height: 1em;
+  }
+  .eg-comment-preview-code {
+    font-family: inherit;
+    font-size: inherit;
+    color: inherit;
+    background: transparent;
+    padding: 0;
+    border: 0;
+  }
+  .eg-comment-preview-code:empty::before {
+    content: '(your snippet will appear here as you type)';
+    color: rgba(255, 255, 255, 0.4);
+    font-style: italic;
+  }
+  .eg-comment-copy-btn {
+    position: absolute;
+    top: 0.5rem;
+    right: 0.5rem;
+    background: rgba(255, 255, 255, 0.08);
+    border: 1px solid rgba(255, 255, 255, 0.15);
+    color: var(--terminal-text);
+    border-radius: 3px;
+    padding: 0.25rem 0.625rem;
+    font-family: var(--font-mono);
+    font-size: 11px;
+    cursor: pointer;
+  }
+  .eg-comment-copy-btn:hover {
+    background: var(--terracotta);
+    border-color: var(--terracotta);
+    color: white;
+  }
+  .eg-comment-copy-btn:disabled { opacity: 0.4; cursor: not-allowed; }
+
+  .eg-comment-status {
+    font-family: var(--font-mono);
+    font-size: 12px;
+    color: var(--muted);
+    margin-top: 0.5rem;
+    min-height: 1.2em;
+  }
+  .eg-comment-status.eg-comment-status-ok { color: var(--green-p1); }
+  .eg-comment-status.eg-comment-status-err { color: var(--terracotta); }
+
+  .eg-comment-help {
+    margin-top: 0.875rem;
+    padding-top: 0.75rem;
+    border-top: 1px dashed var(--hairline);
+    font-family: var(--font-mono);
+    font-size: 11px;
+    color: var(--muted);
+    line-height: 1.55;
+  }
+
+  /* Dual-mode visibility: paste-back by default, live when loopback is up */
+  .eg-live-only { display: none; }
+  .eg-comments-composer.eg-live-mode .eg-live-only { display: inline; }
+  .eg-comments-composer.eg-live-mode .eg-paste-only { display: none; }
+
+  .eg-comment-post-btn {
+    display: none;
+    background: var(--terracotta);
+    color: white;
+    border: none;
+    border-radius: 4px;
+    padding: 0.625rem 1rem;
+    margin-top: 0.75rem;
+    font-family: var(--font-sans);
+    font-size: 14px;
+    font-weight: 500;
+    cursor: pointer;
+  }
+  .eg-comment-post-btn:hover { filter: brightness(1.05); }
+  .eg-comment-post-btn:disabled { opacity: 0.5; cursor: progress; }
+  .eg-comments-composer.eg-live-mode .eg-comment-post-btn { display: inline-block; }
 </style>
 <script>
   // Theme engine: light / auto / dark
@@ -487,6 +734,209 @@ export function htmlShell(bodyHtml, { title = 'Egregore Artifact', type = 'artif
 <div class="eg-artifact" data-type="${escapeHtml(type)}">
 ${bodyHtml}
 </div>
+<script>
+  // Comment composer — assembles a structured payload and copies it to the
+  // clipboard. The user pastes into Claude; the /comment skill recognizes
+  // the marker and runs the write/index/notify/commit flow.
+  (function() {
+    var composer = document.querySelector('.eg-comments-composer');
+    if (!composer) return;
+
+    var parentKind = composer.dataset.parentKind;
+    var parentId = composer.dataset.parentId;
+    var textarea = composer.querySelector('.eg-comment-textarea');
+    var status = composer.querySelector('.eg-comment-status');
+    var copyBtn = composer.querySelector('.eg-comment-copy-btn');
+    var postBtn = composer.querySelector('.eg-comment-post-btn');
+    var previewCode = composer.querySelector('.eg-comment-preview-code');
+    var targetChip = composer.querySelector('.eg-comment-target');
+    var placeholderDefault = textarea.placeholder;
+    var activeReplyTo = null;
+
+    var SERVER = 'http://127.0.0.1:7321';
+
+    // Probe the loopback server. If reachable, switch the composer into
+    // live mode so the user gets a real "Post comment" button instead of
+    // the clipboard handoff.
+    fetch(SERVER + '/health', { method: 'GET' })
+      .then(function(r) { if (r.ok) composer.classList.add('eg-live-mode'); })
+      .catch(function() { /* paste-back stays as the default */ });
+
+    function buildPayload() {
+      var body = textarea.value.trim();
+      if (!body) return '';
+      var parentArg = activeReplyTo
+        ? ('reply ' + activeReplyTo)
+        : (parentKind + '/' + parentId);
+      return '#egregore-comment:v1 ' + parentArg + '\\n\\n' + body;
+    }
+
+    function updatePreview() {
+      previewCode.textContent = buildPayload();
+      // Reset stale "Copied" state when the user edits
+      if (status.textContent && status.classList.contains('eg-comment-status-ok')) {
+        status.textContent = '';
+        status.className = 'eg-comment-status';
+        copyBtn.textContent = 'Copy';
+      }
+    }
+
+    function updateTarget() {
+      if (activeReplyTo) {
+        var btn = document.querySelector('.eg-comment-reply[data-reply-to="' + activeReplyTo + '"]');
+        var author = btn ? btn.dataset.replyAuthor : '';
+        targetChip.textContent = author
+          ? ('reply → ' + author + ' · ' + activeReplyTo)
+          : ('reply → ' + activeReplyTo);
+      } else {
+        targetChip.textContent = parentKind + '/' + parentId;
+      }
+    }
+
+    textarea.addEventListener('input', updatePreview);
+
+    function clearReplyState() {
+      var buttons = document.querySelectorAll('.eg-comment-reply');
+      for (var i = 0; i < buttons.length; i++) {
+        buttons[i].classList.remove('eg-comment-reply-active');
+      }
+    }
+
+    var replyButtons = document.querySelectorAll('.eg-comment-reply');
+    for (var i = 0; i < replyButtons.length; i++) {
+      replyButtons[i].addEventListener('click', function(e) {
+        var btn = e.currentTarget;
+        var id = btn.dataset.replyTo;
+        var isActive = btn.classList.contains('eg-comment-reply-active');
+        clearReplyState();
+        if (isActive) {
+          activeReplyTo = null;
+          textarea.placeholder = placeholderDefault;
+        } else {
+          btn.classList.add('eg-comment-reply-active');
+          activeReplyTo = id;
+          textarea.placeholder = 'Replying to ' + id + ' — click ↩ again to cancel';
+        }
+        updateTarget();
+        updatePreview();
+        textarea.focus();
+      });
+    }
+
+    function setStatus(ok, msg) {
+      status.textContent = msg;
+      status.className = 'eg-comment-status eg-comment-status-' + (ok ? 'ok' : 'err');
+    }
+
+    // Select the preview frame's text so the user has a visible affordance
+    // even if the copy mechanism fails.
+    function selectPreview() {
+      var range = document.createRange();
+      range.selectNodeContents(previewCode);
+      var sel = window.getSelection();
+      sel.removeAllRanges();
+      sel.addRange(range);
+    }
+
+    copyBtn.addEventListener('click', function() {
+      var payload = buildPayload();
+      if (!payload) {
+        setStatus(false, 'Type a comment first — there’s nothing to copy.');
+        return;
+      }
+
+      // Primary path: select the preview frame and execCommand('copy').
+      // Synchronous, works on file://, no permission prompt.
+      var copied = false;
+      try {
+        selectPreview();
+        copied = !!(document.execCommand && document.execCommand('copy'));
+      } catch (e) { copied = false; }
+
+      if (copied) {
+        setStatus(true, '✓ Snippet copied. Paste it into your Claude terminal.');
+        copyBtn.textContent = '✓ Copied';
+        setTimeout(function() { copyBtn.textContent = 'Copy'; }, 2000);
+        return;
+      }
+
+      // Fallback: modern Clipboard API.
+      if (navigator.clipboard && navigator.clipboard.writeText) {
+        try {
+          navigator.clipboard.writeText(payload).then(function() {
+            setStatus(true, '✓ Snippet copied. Paste it into your Claude terminal.');
+            copyBtn.textContent = '✓ Copied';
+            setTimeout(function() { copyBtn.textContent = 'Copy'; }, 2000);
+          }, function() {
+            selectPreview();
+            setStatus(false, 'Auto-copy failed — snippet selected above, press ⌘C / Ctrl+C.');
+          });
+          return;
+        } catch (e) { /* fall through */ }
+      }
+
+      // Last resort: leave the preview selected for manual copy.
+      selectPreview();
+      setStatus(false, 'Auto-copy unavailable — snippet selected above, press ⌘C / Ctrl+C.');
+    });
+
+    // Live-mode primary action: POST directly to the loopback server.
+    // If the connection is refused (server died since page-load), drop the
+    // composer back into paste-back mode rather than leaving the user stuck.
+    postBtn.addEventListener('click', function() {
+      var body = textarea.value.trim();
+      if (!body) {
+        setStatus(false, 'Type a comment first.');
+        return;
+      }
+      var parentArg = activeReplyTo
+        ? ('reply ' + activeReplyTo)
+        : (parentKind + '/' + parentId);
+
+      postBtn.disabled = true;
+      postBtn.textContent = 'Posting…';
+      setStatus(true, '');
+
+      // Tell the server where this rendered HTML lives so it can re-render
+      // in place. location.pathname for file:// URLs is the absolute path.
+      var refreshPath = (location.protocol === 'file:') ? decodeURIComponent(location.pathname) : '';
+
+      fetch(SERVER + '/api/comment', {
+        method: 'POST',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify({ parent: parentArg, body: body, refreshPath: refreshPath }),
+      })
+        .then(function(r) { return r.json().then(function(j) { return { ok: r.ok, json: j }; }); })
+        .then(function(res) {
+          if (res.ok && res.json && res.json.ok) {
+            var notified = (res.json.notified || []).filter(Boolean);
+            var msg = '✓ Posted on ' + res.json.parent;
+            if (notified.length) msg += ' · DMed: ' + notified.join(', ');
+            setStatus(true, msg + ' — refreshing…');
+            postBtn.textContent = '✓ Posted';
+            setTimeout(function() { window.location.reload(); }, 800);
+          } else {
+            postBtn.disabled = false;
+            postBtn.textContent = 'Post comment';
+            var err = (res.json && res.json.error) || 'unknown error';
+            setStatus(false, 'Post failed: ' + err);
+          }
+        })
+        .catch(function(err) {
+          // Network-level failure (server died, etc). Drop to paste-back so
+          // the user has a working path — and tell them why.
+          composer.classList.remove('eg-live-mode');
+          postBtn.disabled = false;
+          postBtn.textContent = 'Post comment';
+          setStatus(false,
+            'Local server unreachable (' + (err.message || 'network error') +
+            '). Switched to clipboard mode — use the Copy button.'
+          );
+          updatePreview();
+        });
+    });
+  })();
+</script>
 </body>
 </html>`;
 }