@atlassian/chippy 0.0.0-stage → 0.0.1-beta.1

package/lib/mcp-skill/extension/logo.svg

@@ -0,0 +1,14 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32" fill="none">
+  <defs>
+    <linearGradient id="chippy-trace-blue" x1="4" y1="25" x2="28" y2="7" gradientUnits="userSpaceOnUse"><stop stop-color="#1558BC"/><stop offset="1" stop-color="#357DE8"/></linearGradient>
+    <linearGradient id="chippy-trace-light" x1="4" y1="9" x2="27" y2="9" gradientUnits="userSpaceOnUse"><stop stop-color="#85B8FF"/><stop offset="1" stop-color="#357DE8"/></linearGradient>
+  </defs>
+  <style>
+    @keyframes chippy-trace-reveal { from { opacity: .45; transform: translateY(-1.5px); } to { opacity: 1; transform: translateY(0); } }
+    .chippy-trace-cut { animation: chippy-trace-reveal 650ms ease-out both; }
+    @media (prefers-reduced-motion: reduce) { .chippy-trace-cut { animation: none; } }
+  </style>
+  <path d="M4 9 16 1.5 28 9 21 13.4 16 10.3 11 13.4v5.2l5 3.1 5-3.1 7 4.4L16 30.5 4 23Z" fill="url(#chippy-trace-blue)"/>
+  <path class="chippy-trace-cut" d="M4 9 16 1.5 28 9 21 13.4 16 10.3 11 13.4Z" fill="url(#chippy-trace-light)"/>
+  <path d="m11 18.6 5 3.1 5-3.1 7 4.4-12 7.5-5-3.1Z" fill="#1868DB"/>
+</svg>

package/lib/mcp-skill/extension/manifest.json

@@ -0,0 +1,69 @@
+{
+  "manifest_version": 3,
+  "name": "Chippy Probe Bridge",
+  "version": "0.4.24",
+  "description": "Inspects connected React pages to trace components, boundaries, hooks, props, and render behavior.",
+  "permissions": [
+    "storage",
+    "scripting",
+    "webNavigation"
+  ],
+  "host_permissions": [
+    "http://*/*",
+    "https://*/*"
+  ],
+  "background": {
+    "service_worker": "background.js"
+  },
+  "action": {
+    "default_title": "Chippy Probe Bridge",
+    "default_popup": "popup.html",
+    "default_icon": {
+      "16": "icon-16.png",
+      "32": "icon-32.png",
+      "48": "icon-48.png",
+      "128": "icon-128.png"
+    }
+  },
+  "content_scripts": [
+    {
+      "matches": [
+        "http://*/*",
+        "https://*/*"
+      ],
+      "js": [
+        "panel-settings.js",
+        "content-script.js"
+      ],
+      "run_at": "document_start",
+      "all_frames": true
+    }
+  ],
+  "web_accessible_resources": [
+    {
+      "resources": [
+        "devtools-hook-shim.js",
+        "early-bootstrap.js",
+        "inspect-react.js",
+        "panel-dom.js",
+        "layout-lab.js",
+        "resolve-probes.js",
+        "probe-descriptor.js",
+        "chippy-page-bridge.js",
+        "avalanche.iife.js",
+        "avalanche.iife.js.map",
+        "avalanche.es.js.map"
+      ],
+      "matches": [
+        "http://*/*",
+        "https://*/*"
+      ]
+    }
+  ],
+  "icons": {
+    "16": "icon-16.png",
+    "32": "icon-32.png",
+    "48": "icon-48.png",
+    "128": "icon-128.png"
+  }
+}

package/lib/mcp-skill/extension/panel-dom.js

@@ -0,0 +1,90 @@
+/* eslint-disable */
+(function installChippyPanelDom(global) {
+  function nodeKey(node) {
+    return node?.nodeType === 1 ? node.getAttribute('data-chippy-key') : null;
+  }
+
+  function canPatch(current, next) {
+    if (!current || !next || current.nodeType !== next.nodeType) return false;
+    if (current.nodeType === 1 && current.tagName !== next.tagName) return false;
+    const currentKey = nodeKey(current);
+    const nextKey = nodeKey(next);
+    return currentKey || nextKey ? currentKey === nextKey : true;
+  }
+
+  function syncAttributes(current, next) {
+    Array.from(current.attributes).forEach((attribute) => {
+      if (!next.hasAttribute(attribute.name)) current.removeAttribute(attribute.name);
+    });
+    Array.from(next.attributes).forEach((attribute) => {
+      if (current.getAttribute(attribute.name) !== attribute.value) {
+        current.setAttribute(attribute.name, attribute.value);
+      }
+    });
+  }
+
+  function patchNode(current, next) {
+    if (current.nodeType === 3 || current.nodeType === 8) {
+      if (current.data !== next.data) current.data = next.data;
+      return;
+    }
+    if (current.nodeType !== 1) return;
+
+    const tagName = current.tagName;
+    const preservesValue = tagName === 'INPUT' || tagName === 'TEXTAREA' || tagName === 'SELECT';
+    const value = preservesValue ? current.value : null;
+    const checked = tagName === 'INPUT' ? current.checked : null;
+
+    syncAttributes(current, next);
+    patchChildNodes(current, next);
+
+    // Probe annotations are drafts until Attach is clicked. Rendering new
+    // runtime evidence must not overwrite an in-progress value.
+    if (preservesValue) current.value = value;
+    if (tagName === 'INPUT') current.checked = checked;
+  }
+
+  function patchChildNodes(currentParent, nextParent) {
+    const currentChildren = Array.from(currentParent.childNodes);
+    const keyed = new Map(
+      currentChildren
+        .map((node) => [nodeKey(node), node])
+        .filter(([key]) => Boolean(key)),
+    );
+    const used = new Set();
+    let cursor = currentParent.firstChild;
+
+    Array.from(nextParent.childNodes).forEach((nextChild) => {
+      const key = nodeKey(nextChild);
+      let current = key ? keyed.get(key) : null;
+
+      while (cursor && used.has(cursor)) cursor = cursor.nextSibling;
+      if (!current && cursor && !nodeKey(cursor) && canPatch(cursor, nextChild)) current = cursor;
+
+      if (current && canPatch(current, nextChild)) {
+        if (current !== cursor) currentParent.insertBefore(current, cursor);
+        patchNode(current, nextChild);
+      } else {
+        current = nextChild.cloneNode(true);
+        currentParent.insertBefore(current, cursor);
+      }
+
+      used.add(current);
+      cursor = current.nextSibling;
+    });
+
+    Array.from(currentParent.childNodes).forEach((child) => {
+      if (used.has(child)) return;
+      if (child.nodeType === 1 && child.hasAttribute('data-chippy-preserve')) return;
+      child.remove();
+    });
+  }
+
+  function patchChildren(target, html) {
+    const template = target.ownerDocument.createElement('template');
+    template.innerHTML = html;
+    patchChildNodes(target, template.content);
+  }
+
+  global.__CHIPPY_PANEL_DOM__ = { patchChildren };
+})(window);

package/lib/mcp-skill/extension/panel-settings.js

@@ -0,0 +1,191 @@
+/* eslint-disable */
+// Runs in Chrome's isolated content-script world. The content script owns one
+// stable host + closed shadow root and portals it into the MAIN-world panel.
+(function installChippyPanelSettings() {
+  try { globalThis.__CHIPPY_PANEL_SETTINGS_RUNTIME__?.destroy?.(); } catch {}
+
+  const DEFAULT_HELPER = 'http://127.0.0.1:7823';
+  // A packed build (`chippy pack`) prepends globalThis.__CHIPPY_BUILD to this
+  // file with its plugin list and the plugins it enables by default.
+  const BUILD = globalThis.__CHIPPY_BUILD || {};
+  const PLUGIN_OPTIONS = Array.isArray(BUILD.plugins) ? BUILD.plugins : [
+    { id: 'jira', label: 'Jira ownership markers' },
+    { id: 'atl', label: 'ATL commit metrics' },
+  ];
+  const DEFAULT_PLUGINS = Array.isArray(BUILD.defaultPlugins) ? BUILD.defaultPlugins : [];
+  const SETTINGS_SLOT_SELECTOR = '[data-chippy-settings-slot]';
+  let observer = null;
+  let waitingForDom = false;
+
+  function normalizeBaseUrl(value) {
+    return String(value || DEFAULT_HELPER).trim().replace(/\/+$/, '');
+  }
+
+  function validateHelperUrl(value) {
+    try {
+      const url = new URL(value);
+      return url.protocol === 'http:' || url.protocol === 'https:';
+    } catch {
+      return false;
+    }
+  }
+
+  function parseForwardPort(value) {
+    if (value === '') return null;
+    const port = Number(value);
+    return Number.isInteger(port) && port >= 1 && port <= 65535 ? port : undefined;
+  }
+
+  function escapeHtml(value) {
+    return String(value).replace(/[&<>"']/g, (c) => `&#${c.charCodeAt(0)};`);
+  }
+
+  function pluginMarkup() {
+    if (PLUGIN_OPTIONS.length === 0) return '';
+    const rows = PLUGIN_OPTIONS.map((plugin) =>
+      `<label><input data-plugin type="checkbox" value="${escapeHtml(plugin.id)}" />${escapeHtml(plugin.label || plugin.id)}</label>`);
+    return `<fieldset>
+          <legend>Plugins · apply on reload</legend>
+          ${rows.join('\n          ')}
+        </fieldset>`;
+  }
+
+  function settingsMarkup() {
+    return `
+      <style>
+        :host { all: initial; display: block; color-scheme: dark; }
+        * { box-sizing: border-box; }
+        form { display: grid; gap: 8px; color: #CECFD2; font: 11px/1.4 'Atlassian Sans', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; }
+        label { display: grid; gap: 3px; }
+        label span { color: #A9ABAF; font-size: 9px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; }
+        input { width: 100%; border: 1px solid rgba(148,163,184,.25); border-radius: 7px; padding: 6px 8px; background: #1F1F21; color: #CECFD2; font: inherit; }
+        input:focus { outline: 2px solid #669DF1; outline-offset: 1px; }
+        fieldset { display: grid; gap: 4px; margin: 0; padding: 0; border: 0; }
+        legend { margin-bottom: 3px; padding: 0; color: #A9ABAF; font-size: 9px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; }
+        fieldset label { display: flex; align-items: center; gap: 6px; }
+        fieldset input { width: auto; margin: 0; }
+        .actions { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
+        button { border: 1px solid rgba(96,165,250,.35); border-radius: 7px; padding: 5px 10px; background: rgba(59,130,246,.2); color: #B8D6FF; font: inherit; font-weight: 700; cursor: pointer; }
+        [data-status] { min-height: 15px; color: #86efac; font-size: 10px; text-align: right; }
+        [data-status][data-error="true"] { color: #FD9891; }
+      </style>
+      <form>
+        <label>
+          <span>Chippy URL</span>
+          <input data-helper-url type="url" inputmode="url" required placeholder="${DEFAULT_HELPER}" />
+        </label>
+        <label>
+          <span>Forward to port · optional</span>
+          <input data-forward-port type="number" inputmode="numeric" min="1" max="65535" step="1" placeholder="Auto-detect from page URL" />
+        </label>
+        ${pluginMarkup()}
+        <div class="actions">
+          <button type="submit">Save settings</button>
+          <div data-status role="status" aria-live="polite"></div>
+        </div>
+      </form>
+    `;
+  }
+
+  const host = document.createElement('div');
+  host.setAttribute('data-chippy-settings-host', 'true');
+  host.setAttribute('data-chippy-preserve', 'true');
+  const pluginRowsHeight = PLUGIN_OPTIONS.length ? 18 + 19 * PLUGIN_OPTIONS.length : 0;
+  host.style.cssText = `display:block;min-height:${176 + pluginRowsHeight}px;`;
+  const root = host.attachShadow({ mode: 'closed' });
+  const surface = document.createElement('div');
+  surface.innerHTML = settingsMarkup();
+  root.appendChild(surface);
+
+  const form = root.querySelector('form');
+  const helperInput = root.querySelector('[data-helper-url]');
+  const forwardPortInput = root.querySelector('[data-forward-port]');
+  const pluginInputs = Array.from(root.querySelectorAll('[data-plugin]'));
+  const statusNode = root.querySelector('[data-status]');
+
+  function setStatus(message, isError = false) {
+    statusNode.textContent = message;
+    statusNode.setAttribute('data-error', isError ? 'true' : 'false');
+  }
+
+  chrome.storage.local.get({
+    helperBaseUrl: DEFAULT_HELPER,
+    forwardPort: null,
+    plugins: DEFAULT_PLUGINS,
+  }).then((stored) => {
+    helperInput.value = normalizeBaseUrl(stored.helperBaseUrl);
+    forwardPortInput.value = stored.forwardPort || '';
+    const plugins = Array.isArray(stored.plugins) ? stored.plugins : [];
+    for (const input of pluginInputs) input.checked = plugins.includes(input.value);
+  }).catch((error) => setStatus(error.message || 'Could not load settings.', true));
+
+  form.addEventListener('submit', async (event) => {
+    event.preventDefault();
+    const helperBaseUrl = normalizeBaseUrl(helperInput.value);
+    const forwardPort = parseForwardPort(forwardPortInput.value);
+    if (!validateHelperUrl(helperBaseUrl)) {
+      setStatus('Use an http(s) URL.', true);
+      return;
+    }
+    if (forwardPort === undefined) {
+      setStatus('Port must be 1–65535.', true);
+      return;
+    }
+
+    try {
+      const plugins = pluginInputs.filter((input) => input.checked).map((input) => input.value);
+      await chrome.storage.local.set({ helperBaseUrl, forwardPort, plugins });
+      document.dispatchEvent(new CustomEvent('chippy-ext-command', {
+        detail: { type: 'apply-config', helperBaseUrl, activated: true },
+      }));
+      setStatus('Saved.');
+    } catch (error) {
+      setStatus(error.message || 'Could not save settings.', true);
+    }
+  });
+
+  function mountPanelSettings() {
+    const liveDocument = globalThis.document;
+    if (!liveDocument?.querySelectorAll) return;
+    const slots = liveDocument.querySelectorAll(SETTINGS_SLOT_SELECTOR);
+    const slot = slots[slots.length - 1] || null;
+    if (slot && host.parentNode !== slot) slot.appendChild(host);
+  }
+
+  function installMountObserver() {
+    mountPanelSettings();
+    if (!globalThis.document?.documentElement) {
+      if (!waitingForDom) {
+        waitingForDom = true;
+        globalThis.document?.addEventListener('DOMContentLoaded', onDomReady, { once: true });
+      }
+      return;
+    }
+    observer?.disconnect();
+    observer = new MutationObserver(mountPanelSettings);
+    observer.observe(globalThis.document.documentElement, { childList: true, subtree: true });
+  }
+
+  function onDomReady() {
+    waitingForDom = false;
+    installMountObserver();
+  }
+
+  function onMountRequest() {
+    mountPanelSettings();
+  }
+
+  function destroy() {
+    observer?.disconnect();
+    globalThis.document?.removeEventListener('DOMContentLoaded', onDomReady);
+    globalThis.document?.removeEventListener('chippy-settings-mount-request', onMountRequest);
+    host.remove();
+  }
+
+  globalThis.__CHIPPY_PANEL_SETTINGS_RUNTIME__ = {
+    destroy,
+    mount: mountPanelSettings,
+  };
+  document.addEventListener('chippy-settings-mount-request', onMountRequest);
+  installMountObserver();
+})();

package/lib/mcp-skill/extension/popup.html

@@ -0,0 +1,41 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8" />
+    <title>Chippy</title>
+    <style>
+      * { box-sizing: border-box; }
+      body {
+        width: 224px;
+        margin: 0;
+        padding: 12px;
+        display: grid;
+        grid-template-columns: 1fr 1fr;
+        gap: 8px;
+        background: #fff;
+        color: #292A2E;
+        font: 13px 'Atlassian Sans', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
+      }
+      button {
+        border: 1px solid #DDDEE1;
+        border-radius: 6px;
+        padding: 8px 10px;
+        background: #fff;
+        color: #292A2E;
+        font: inherit;
+        font-weight: 600;
+        cursor: pointer;
+      }
+      #btn-activate { background: #1868DB; border-color: #1868DB; color: #fff; }
+      header { grid-column: 1 / -1; display: flex; align-items: center; gap: 8px; margin-bottom: 4px; font-size: 16px; font-weight: 650; }
+      button:focus-visible { outline: 2px solid #1868DB; outline-offset: 2px; }
+      button:disabled { cursor: default; opacity: .4; }
+    </style>
+  </head>
+  <body>
+    <header><img src="logo.svg" width="28" height="28" alt="" />Chippy</header>
+    <button id="btn-activate" type="button">Enable</button>
+    <button id="btn-deactivate" type="button">Disable</button>
+    <script src="popup.js"></script>
+  </body>
+</html>

package/lib/mcp-skill/extension/popup.js

@@ -0,0 +1,80 @@
+/* eslint-disable */
+const DEFAULT_HELPER = 'http://127.0.0.1:7823';
+
+const btnActivate = document.querySelector('#btn-activate');
+const btnDeactivate = document.querySelector('#btn-deactivate');
+
+async function getActiveTab() {
+  const [tab] = await chrome.tabs.query({ active: true, currentWindow: true });
+  return tab || null;
+}
+
+function getOrigin(tab) {
+  try {
+    return new URL(tab?.url || '').origin;
+  } catch {
+    return null;
+  }
+}
+
+async function getStoredConfig() {
+  return chrome.storage.local.get({
+    helperBaseUrl: DEFAULT_HELPER,
+    enabledOrigins: {},
+  });
+}
+
+async function setOriginEnabled(origin, enabled) {
+  const stored = await getStoredConfig();
+  const enabledOrigins = { ...(stored.enabledOrigins || {}) };
+  if (enabled) enabledOrigins[origin] = true;
+  else delete enabledOrigins[origin];
+  await chrome.storage.local.set({ enabledOrigins });
+  return stored;
+}
+
+async function renderState() {
+  const tab = await getActiveTab();
+  const origin = getOrigin(tab);
+  if (!tab || !origin) {
+    btnActivate.disabled = true;
+    btnDeactivate.disabled = true;
+    return;
+  }
+
+  const stored = await getStoredConfig();
+  const enabled = Boolean(stored.enabledOrigins?.[origin]);
+  btnActivate.disabled = enabled;
+  btnDeactivate.disabled = !enabled;
+}
+
+btnActivate.addEventListener('click', async () => {
+  const tab = await getActiveTab();
+  const origin = getOrigin(tab);
+  if (!tab || !origin) return;
+
+  const stored = await setOriginEnabled(origin, true);
+  try {
+    await chrome.runtime.sendMessage({ type: 'chippy-ensure-content-script', tabId: tab.id });
+    await chrome.runtime.sendMessage({
+      type: 'chippy-inject-bundle',
+      tabId: tab.id,
+      helperBaseUrl: stored.helperBaseUrl || DEFAULT_HELPER,
+    });
+  } catch {}
+  window.close();
+});
+
+btnDeactivate.addEventListener('click', async () => {
+  const tab = await getActiveTab();
+  const origin = getOrigin(tab);
+  if (!tab || !origin) return;
+
+  await setOriginEnabled(origin, false);
+  try {
+    await chrome.tabs.sendMessage(tab.id, { type: 'chippy-disable-now' });
+  } catch {}
+  window.close();
+});
+
+renderState();