@rahmantech/litedesign 0.2.0 → 0.2.2

package/README.md

@@ -74,6 +74,11 @@ scrolled viewport.
 toolbar. When the human refers to a part by name, look it up there instead of
 guessing a selector. Labels are read-only for the agent.
 
+The server also serves its workflow as the MCP resource
+`skill://litedesign/workflow` — an agent that supports resources can read the
+flow (inspect first, resolve names through labels, spotlight edits with focus)
+without a file in the repository.
+
 ## Drivers
 
 The server prefers Playwright when `playwright-core` is installed. It launches

package/dist/extension/content.js

@@ -1,5 +1,25 @@
 "use strict";
 (() => {
+  // packages/extension/src/diff.ts
+  function signatureOf(node) {
+    return `${node.tag}|${node.text}`;
+  }
+  function nodeSignatures(graph) {
+    return graph.nodes.map(signatureOf);
+  }
+  function changedNodes(before, after) {
+    const counts = /* @__PURE__ */ new Map();
+    for (const signature of before) counts.set(signature, (counts.get(signature) ?? 0) + 1);
+    const changed = [];
+    for (const node of after.nodes) {
+      const signature = signatureOf(node);
+      const seen = counts.get(signature) ?? 0;
+      if (seen > 0) counts.set(signature, seen - 1);
+      else changed.push(node);
+    }
+    return changed;
+  }
+
   // packages/extension/src/labels.ts
   var STORE_KEY = "litedesign-labels";
   function pageKey() {
@@ -129,6 +149,7 @@
 
   // packages/extension/src/store.ts
   var STORAGE_KEY = "litedesign";
+  var SNAPSHOT_KEY = "litedesign-snapshot";
   var DEFAULT_LAYERS = [...LAYERS];
   var DEFAULT_GRID = { step: 8, axis: "both" };
   var AXES = ["vertical", "horizontal", "both"];
@@ -186,6 +207,30 @@
   function isLayerName(value) {
     return typeof value === "string" && LAYERS.includes(value);
   }
+  function loadSnapshot() {
+    try {
+      const raw = sessionStorage.getItem(SNAPSHOT_KEY);
+      if (raw === null) return null;
+      const parsed = JSON.parse(raw);
+      if (!Array.isArray(parsed)) return null;
+      const signatures = parsed.filter((entry) => typeof entry === "string");
+      return signatures.length === parsed.length ? signatures : null;
+    } catch {
+      return null;
+    }
+  }
+  function saveSnapshot(graph) {
+    try {
+      sessionStorage.setItem(SNAPSHOT_KEY, JSON.stringify(nodeSignatures(graph)));
+    } catch {
+    }
+  }
+  function clearSnapshot() {
+    try {
+      sessionStorage.removeItem(SNAPSHOT_KEY);
+    } catch {
+    }
+  }
 
   // packages/extension/src/toolbar.ts
   var STYLE = `
@@ -524,18 +569,21 @@
     }
     const stored = await loadState();
     const layers = options.layers ?? stored.layers;
+    let autoFocus = null;
     if (window.__litedesign_state__ === "active") {
       window.__litedesign_layers__?.(layers);
     } else {
       window.__litedesign_state__ = "starting";
       try {
-        mount(core2, layers, stored.grid);
+        autoFocus = mount(core2, layers, stored.grid);
       } catch (error) {
         window.__litedesign_state__ = void 0;
         throw error;
       }
     }
-    if (options.focus !== void 0) window.__litedesign_set_focus__?.(options.focus);
+    if (options.focus !== void 0 && autoFocus === null) {
+      window.__litedesign_set_focus__?.(options.focus);
+    }
     return {
       enabled: overlayHost() !== void 0,
       layers,
@@ -553,6 +601,7 @@
     let focusId = null;
     let labels = [];
     let labelMode = false;
+    let marksInteractive = false;
     let toolbar;
     const teardown = () => {
       observer?.stop();
@@ -569,17 +618,22 @@
       window.__litedesign_set_focus__ = void 0;
       window.__litedesign_focus_selector__ = void 0;
       window.__litedesign_state__ = void 0;
+      clearSnapshot();
       void saveState({ enabled: false, layers, focus: null, grid });
     };
     const refresh = () => {
+      const before2 = nodeSignatures(graph);
       graph = core2.buildGraph(root2);
       if (focusId !== null && !graph.nodes.some((node) => node.id === focusId)) {
         focusSelector = null;
         focusId = null;
         handle?.setFocus(null);
       }
+      const [firstChanged2] = changedNodes(before2, graph);
+      if (firstChanged2 !== void 0) setFocus(firstChanged2.selector);
       handle?.update(graph);
       toolbar.setStats(graph.nodes.length, graph.issues.length, graph.truncated);
+      saveSnapshot(graph);
     };
     const setLayers = (next) => {
       layers = next;
@@ -622,7 +676,30 @@
       void saveState({ enabled: true, layers, focus: focusSelector, grid });
     };
     const applyMarks = () => {
-      handle?.setMarks(labels.map((label) => ({ selector: label.selector, text: label.text })));
+      handle?.setMarks(
+        labels.map((label) => ({ selector: label.selector, text: label.text })),
+        marksInteractive
+      );
+    };
+    const editLabel = (existing, rect) => {
+      toolbar.askLabel(
+        rect,
+        existing.text,
+        (text) => {
+          const trimmed = text.trim();
+          if (trimmed === "" || trimmed === existing.text) return;
+          void renameLabel(existing.id, trimmed).then((next) => {
+            labels = next;
+            applyMarks();
+          });
+        },
+        () => {
+          void removeLabel(existing.id).then((next) => {
+            labels = next;
+            applyMarks();
+          });
+        }
+      );
     };
     const onLabelClick = (event) => {
       const target = event.target;
@@ -633,24 +710,7 @@
       const selector = core2.pathOf(target);
       const existing = labels.find((label) => label.selector === selector);
       if (existing !== void 0) {
-        toolbar.askLabel(
-          target.getBoundingClientRect(),
-          existing.text,
-          (text) => {
-            const trimmed = text.trim();
-            if (trimmed === "" || trimmed === existing.text) return;
-            void renameLabel(existing.id, trimmed).then((next) => {
-              labels = next;
-              applyMarks();
-            });
-          },
-          () => {
-            void removeLabel(existing.id).then((next) => {
-              labels = next;
-              applyMarks();
-            });
-          }
-        );
+        editLabel(existing, target.getBoundingClientRect());
         return;
       }
       toolbar.askLabel(target.getBoundingClientRect(), "", (text) => {
@@ -670,6 +730,8 @@
       } else {
         document.removeEventListener("click", onLabelClick, true);
       }
+      marksInteractive = labelMode;
+      applyMarks();
     };
     toolbar = createToolbar({
       layers,
@@ -684,12 +746,29 @@
       onClose: teardown
     });
     toolbar.setStats(graph.nodes.length, graph.issues.length, graph.truncated);
-    handle = core2.render(graph, { layers, toolbar: toolbar.element, grid });
+    handle = core2.render(graph, {
+      layers,
+      toolbar: toolbar.element,
+      grid,
+      onMarkClick: (mark, anchor) => {
+        const existing = labels.find((label) => label.selector === mark.selector);
+        if (existing !== void 0) editLabel(existing, anchor);
+      }
+    });
     observer = observeChanges({ root: root2, onChange: refresh });
     void loadLabels().then((next) => {
       labels = next;
       applyMarks();
     });
+    const before = loadSnapshot();
+    const changed = before !== null ? changedNodes(before, graph) : [];
+    let autoFocus = null;
+    const [firstChanged] = changed;
+    if (firstChanged !== void 0) {
+      autoFocus = firstChanged.selector;
+      setFocus(firstChanged.selector);
+    }
+    saveSnapshot(graph);
     mountedHost = handle.host;
     window.__litedesign_layers__ = setLayers;
     window.__litedesign_set_focus__ = setFocus;
@@ -697,6 +776,7 @@
     window.__litedesign_teardown__ = teardown;
     window.__litedesign_state__ = "active";
     void saveState({ enabled: true, layers, focus: focusSelector, grid });
+    return autoFocus;
   }
 
   // packages/extension/src/bridge.ts
@@ -723,9 +803,10 @@
     switch (action) {
       case "ping":
         return { ok: true, result: true };
-      case "toggle":
+      case "toggle": {
         await boot(core2);
-        return { ok: true };
+        return { ok: true, result: { enabled: window.__litedesign_state__ === "active" } };
+      }
       case "overlay":
         return {
           ok: true,

package/dist/extension/core.iife.js

@@ -980,9 +980,10 @@ var __litedesign = (() => {
     return layer;
   }
   var MARK_COLOR = "rgba(217, 119, 6, 0.95)";
-  function drawMarks(layer, marks, bySelector) {
+  function drawMarks(layer, marks, bySelector, interactive = false) {
     layer.replaceChildren();
-    if (marks.length === 0) return;
+    const badges = /* @__PURE__ */ new Map();
+    if (marks.length === 0) return badges;
     const scrollX = window.scrollX;
     const scrollY = window.scrollY;
     for (const mark of marks) {
@@ -990,10 +991,12 @@ var __litedesign = (() => {
       if (node === void 0) continue;
       const badge = box(
         layer,
-        `left:${node.rect.x - scrollX}px;top:${node.rect.y - scrollY}px;transform:translateY(-100%);padding:2px 6px;border-radius:4px;background:${MARK_COLOR};color:#fff;font:10px/1.4 ui-monospace,monospace;white-space:nowrap`
+        `left:${node.rect.x - scrollX}px;top:${node.rect.y - scrollY}px;transform:translateY(-100%);padding:2px 6px;border-radius:4px;background:${MARK_COLOR};color:#fff;font:10px/1.4 ui-monospace,monospace;white-space:nowrap` + (interactive ? ";pointer-events:auto;cursor:pointer" : "")
       );
       badge.textContent = mark.text;
+      badges.set(badge, mark);
     }
+    return badges;
   }
   function drawRadius(layer, node) {
     layer.replaceChildren();
@@ -1117,6 +1120,19 @@ var __litedesign = (() => {
     const layers = createLayers(shadow);
     const radiusLayer = createSubLayer("radius", layers.hover);
     const marksLayer = createSubLayer("marks", layers.hover);
+    if (options.onMarkClick !== void 0) {
+      const onMarkClick = options.onMarkClick;
+      marksLayer.addEventListener("click", (event) => {
+        if (!marksInteractive) return;
+        const badge = event.target;
+        if (!(badge instanceof HTMLDivElement)) return;
+        const mark = badgeMarks.get(badge);
+        if (mark === void 0) return;
+        event.preventDefault();
+        event.stopPropagation();
+        onMarkClick(mark, badge.getBoundingClientRect());
+      });
+    }
     if (options.toolbar !== void 0) shadow.append(options.toolbar);
     document.documentElement.append(host);
     let current = graph;
@@ -1127,6 +1143,8 @@ var __litedesign = (() => {
     let focusId = null;
     let visible = new Set(options.layers ?? LAYERS);
     let marks = options.marks ?? [];
+    let marksInteractive = false;
+    let badgeMarks = /* @__PURE__ */ new Map();
     let grid = options.grid ?? { step: GRID_STEP, axis: "both" };
     let frame = 0;
     const draw = () => {
@@ -1144,7 +1162,12 @@ var __litedesign = (() => {
       drawDim(layers.dim, dimNode);
       drawFocus(layers.focus, outlineNode);
       drawRadius(radiusLayer, outlineNode);
-      drawMarks(marksLayer, marks, new Map(current.nodes.map((node) => [node.selector, node])));
+      badgeMarks = drawMarks(
+        marksLayer,
+        marks,
+        new Map(current.nodes.map((node) => [node.selector, node])),
+        marksInteractive
+      );
       drawHover(layers.hover, hovered === null ? null : byId.get(hovered) ?? null);
     };
     const schedule = () => {
@@ -1200,8 +1223,9 @@ var __litedesign = (() => {
         focusId = id;
         draw();
       },
-      setMarks(next) {
+      setMarks(next, interactive = false) {
         marks = next;
+        marksInteractive = interactive;
         draw();
       },
       setGrid(next) {
@@ -1224,7 +1248,7 @@ var __litedesign = (() => {
   }
 
   // packages/core/src/index.ts
-  var VERSION = "0.2.0";
+  var VERSION = "0.2.2";
   return __toCommonJS(index_exports);
 })();
 //# sourceMappingURL=core.iife.js.map

package/dist/extension/manifest.json

@@ -1,7 +1,7 @@
 {
   "manifest_version": 3,
   "name": "litedesign",
-  "version": "0.1.0",
+  "version": "0.2.2",
   "description": "Grid, gap, and alignment on the real web page.",
   "permissions": ["activeTab", "scripting", "storage"],
   "host_permissions": ["http://*/*", "https://*/*"],

package/dist/extension/popup.js

@@ -6,9 +6,12 @@
   var watchButton = element("watch");
   var overlayButton = element("overlay");
   var tab;
-  watchButton.addEventListener("click", () => void watchThisTab());
+  watchButton.addEventListener("click", () => void toggleWatch());
   overlayButton.addEventListener("click", () => void toggleOverlay());
   void init();
+  document.addEventListener("visibilitychange", () => {
+    if (!document.hidden) void init();
+  });
   async function init() {
     const [active] = await chrome.tabs.query({ active: true, currentWindow: true });
     tab = active;
@@ -17,14 +20,22 @@
     overlayButton.disabled = active?.id === void 0;
     await refresh();
   }
-  async function watchThisTab() {
+  async function toggleWatch() {
     if (tab?.id === void 0) return;
-    const reply = await ask({ type: "watch", tabId: tab.id });
+    const status = await ask({ type: "status" });
+    if (!status.ok) {
+      setStatus(status.error, true);
+      return;
+    }
+    const watching = status.result.page?.tabId === tab.id;
+    const reply = await ask(
+      watching ? { type: "unwatch", tabId: tab.id } : { type: "watch", tabId: tab.id }
+    );
     if (!reply.ok) {
       setStatus(reply.error, true);
       return;
     }
-    pageLine.textContent = reply.result.url;
+    if (!watching && reply.result !== null) pageLine.textContent = reply.result.url;
     await refresh();
   }
   async function toggleOverlay() {
@@ -34,7 +45,12 @@
       setStatus(reply.error, true);
       return;
     }
-    window.close();
+    await refresh();
+    if (reply.result.enabled) {
+      window.close();
+      return;
+    }
+    setStatus("overlay off");
   }
   async function refresh() {
     const reply = await ask({ type: "status" });
@@ -43,14 +59,23 @@
       return;
     }
     const status = reply.result;
+    if (!status.bridge) scheduleRecheck();
     const watching = tab?.id !== void 0 && status.page?.tabId === tab.id;
-    watchButton.textContent = watching ? "Watching this tab" : "Watch this tab";
-    watchButton.disabled = tab?.id === void 0 || watching;
+    watchButton.textContent = watching ? "Unwatch this tab" : "Watch this tab";
+    watchButton.disabled = tab?.id === void 0;
     setStatus(
       status.bridge ? `bridge online \xB7 port ${status.port}` : "bridge offline \xB7 run: litedesign ws start",
       !status.bridge
     );
   }
+  function scheduleRecheck() {
+    if (recheckTimer !== void 0) return;
+    recheckTimer = setTimeout(() => {
+      recheckTimer = void 0;
+      void refresh();
+    }, 1e3);
+  }
+  var recheckTimer;
   function setStatus(text, bad = false) {
     statusLine.textContent = text;
     statusLine.classList.toggle("bad", bad);

package/dist/extension/sw.js

@@ -46,6 +46,9 @@ async function answer(message) {
     case "watch":
       if (typeof request.tabId !== "number") throw new Error("watch needs a tab id");
       return { ok: true, result: await watch(request.tabId) };
+    case "unwatch":
+      if (typeof request.tabId !== "number") throw new Error("unwatch needs a tab id");
+      return { ok: true, result: await unwatch(request.tabId) };
     case "overlay":
       if (typeof request.tabId !== "number") throw new Error("overlay needs a tab id");
       return { ok: true, result: await toggleOverlay(request.tabId) };
@@ -74,6 +77,18 @@ async function watch(tabId) {
   await applyStatus(tabId);
   return page;
 }
+async function unwatch(tabId) {
+  if (current?.tabId !== tabId) return null;
+  try {
+    await chrome.tabs.sendMessage(tabId, { action: "overlay", payload: { enabled: false } });
+  } catch {
+  }
+  current = void 0;
+  await savePage(void 0);
+  send({ type: "bye" });
+  await applyStatus();
+  return null;
+}
 async function toggleOverlay(tabId) {
   if (current?.tabId !== tabId) await watch(tabId);
   return toTab("toggle");
@@ -87,7 +102,25 @@ chrome.tabs.onRemoved.addListener((tabId) => {
 chrome.tabs.onUpdated.addListener((tabId, info) => {
   if (info.status !== "complete" || current?.tabId !== tabId) return;
   void ensureContent(tabId).catch(() => void 0);
+  void refreshWatchedPage(tabId).catch(() => void 0);
 });
+async function refreshWatchedPage(tabId) {
+  const tab = await chrome.tabs.get(tabId);
+  if (current?.tabId !== tabId) return;
+  if (tab.url === current.url) return;
+  if (!isSupported(tab.url)) {
+    current = void 0;
+    await savePage(void 0);
+    send({ type: "bye" });
+    await applyStatus();
+    return;
+  }
+  const page = { tabId, url: tab.url ?? "", title: tab.title ?? "" };
+  current = page;
+  await savePage(page);
+  send({ type: "hello", ...page, version: chrome.runtime.getManifest().version });
+  await applyStatus();
+}
 function connect() {
   if (socket !== void 0 && socket.readyState <= WebSocket.OPEN) return;
   const next = new WebSocket(`ws://127.0.0.1:${port}`);

package/dist/index.js

@@ -44,7 +44,7 @@ function isMode(value) {
 }
 
 // packages/cli/src/version.ts
-var VERSION = "0.1.0";
+var VERSION = "0.2.2";
 
 // packages/cli/src/ws.ts
 import { spawn } from "node:child_process";
@@ -1089,6 +1089,7 @@ function contrastRatio(a, b) {
   return (lighter + 0.05) / (darker + 0.05);
 }
 var SPACING_SCALE = 4;
+var OVERLAY_HOST_ID = "__litedesign_overlay__";
 function defineRule(id, run2) {
   return Object.assign(run2, { id });
 }
@@ -1329,7 +1330,14 @@ var ExtensionDriver = class {
   }
   async open(url) {
     this.#target = url;
-    if (this.#hub.find(url) !== void 0) return;
+    const cached = this.#hub.find(url);
+    if (cached !== void 0) {
+      try {
+        await this.#hub.request(cached.tabId, "ping", void 0);
+        return;
+      } catch {
+      }
+    }
     if (!this.#hub.hasClient()) throw new AwaitingUserError(url);
     const page = await this.#hub.requestAny("attach");
     if (!sameUrl(page.url, url)) throw new MismatchError(url, page.url);
@@ -1413,6 +1421,10 @@ import { existsSync as existsSync5 } from "node:fs";
 import path4 from "node:path";
 import { fileURLToPath as fileURLToPath2 } from "node:url";
 var DEFAULT_VIEWPORT = { width: 1280, height: 800 };
+var POLL_MS = 150;
+function sleep(ms) {
+  return new Promise((resolve) => setTimeout(resolve, ms));
+}
 var PlaywrightDriver = class {
   #playwright;
   #corePath;
@@ -1431,6 +1443,25 @@ var PlaywrightDriver = class {
     await page.goto(url, { waitUntil: "load" });
     await this.#inject(page);
   }
+  /**
+   * "Ready" means the page was read, not that `open` once succeeded: the tab
+   * can be closed or navigated away after that. The loop checks liveness and
+   * the URL the session asked for.
+   */
+  async waitForPage(url, timeoutMs) {
+    for (let waited = 0; waited < timeoutMs; waited += POLL_MS) {
+      const page = this.#page;
+      if (page !== void 0 && !page.isClosed() && sameUrl(page.url(), url)) {
+        return { status: "ready", url: page.url() };
+      }
+      const current2 = this.#page;
+      if (current2 !== void 0 && !current2.isClosed()) {
+        return { status: "mismatch", url: current2.url() };
+      }
+      await sleep(POLL_MS);
+    }
+    return { status: "timeout" };
+  }
   async graph() {
     const page = await this.#requirePage();
     await this.#inject(page);
@@ -1520,10 +1551,11 @@ var PlaywrightDriver = class {
   }
   /**
    * Labels are marks the human makes through the toolbar; a headless page has
-   * no human in it, so there is nothing to read.
+   * no human in it. `null` says "cannot know", so `inspect` can report the
+   * truth instead of a `count: 0` that reads as "no labels pinned".
    */
   async labels() {
-    return [];
+    return null;
   }
   async overlay(options) {
     const page = await this.#requirePage();
@@ -1536,7 +1568,7 @@ var PlaywrightDriver = class {
         target.__litedesign_handle__ = void 0;
         if (!input.enabled) {
           target.__litedesign_focus__ = null;
-          return { enabled: false, layers: [], focus: null };
+          return { applied: false, focus: null };
         }
         const graph = target.__litedesign.buildGraph(document.body);
         const handle = target.__litedesign.render(graph, { layers: input.layers });
@@ -1553,11 +1585,19 @@ var PlaywrightDriver = class {
             element?.scrollIntoView({ block: "center", inline: "center", behavior: "instant" });
           }
         }
-        return { enabled: true, layers: input.layers, focus };
+        return { applied: true, focus };
       },
       { enabled: options.enabled, layers, focus: options.focus }
     );
-    return result;
+    const attached = await page.evaluate(
+      (hostId) => document.getElementById(hostId) !== null,
+      OVERLAY_HOST_ID
+    );
+    return {
+      enabled: attached,
+      layers: attached ? layers : [],
+      focus: attached ? result.focus : null
+    };
   }
   async close() {
     await this.#context?.close().catch(() => void 0);
@@ -1723,9 +1763,6 @@ async function waitForPage(timeoutMs) {
   }
   const expected = session.url;
   const driver = session.driver;
-  if (driver.waitForPage === void 0) {
-    return { status: "ready", url: expected, expected };
-  }
   const result = await driver.waitForPage(expected, timeoutMs);
   if (result.status === "ready") {
     session.ready = true;
@@ -1790,6 +1827,14 @@ function formatTree(graph, maxLines = MAX_TREE_LINES) {
   }
   return lines.join("\n");
 }
+function labelsSummary(marks) {
+  if (marks === null) return null;
+  const names = [];
+  for (const mark of marks) {
+    if (!names.includes(mark.label)) names.push(mark.label);
+  }
+  return { count: marks.length, names };
+}
 function issuePayload(issues, limit) {
   return {
     issues: issues.slice(0, limit).map((issue2) => ({
@@ -1867,6 +1912,7 @@ async function inspectTool(input) {
     throw error;
   }
   const graph = await driver.graph();
+  const labels = labelsSummary(await driver.labels());
   const payload = {
     status: "ready",
     url: graph.url,
@@ -1874,7 +1920,8 @@ async function inspectTool(input) {
     summary: {
       nodes: graph.nodes.length,
       issues: graph.issues.length,
-      truncated: graph.truncated
+      truncated: graph.truncated,
+      labels: labels ?? "unknown: this driver cannot read the toolbar"
     },
     tree: formatTree(graph)
   };
@@ -1887,6 +1934,12 @@ async function inspectTool(input) {
 async function labelsTool() {
   const driver = requirePage();
   const labels = await driver.labels();
+  if (labels === null) {
+    return textResult({
+      labels: null,
+      message: "the active driver cannot see the toolbar (headless page). Open the page in your own Chrome to read labels."
+    });
+  }
   return textResult({
     labels,
     count: labels.length
@@ -1937,6 +1990,17 @@ async function screenshotAnnotatedTool(input) {
   return imageResult({ ...pngSize(image), bytes: image.length }, image);
 }
 
+// packages/cli/src/mcp/workflow.ts
+var WORKFLOW_URI = "skill://litedesign/workflow";
+var WORKFLOW_TEXT = `# litedesign workflow
+
+- Call \`inspect\` first, always. Its summary includes the labels the human pinned on the page.
+- If the human refers to a part of the page by name ("the login button", "the altcha box"), call \`labels\` and use the pinned selector \u2014 never guess CSS selectors.
+- Labels are read-only: you read them; the human creates, renames, and removes them.
+- To show the human what you are editing, call \`overlay\` with \`focus\`. Set \`layers\` once at the start if needed; after that, send \`focus\` only \u2014 the human owns the layer toggles in the toolbar.
+- Findings carry kind: "violation" is a measured fact; "candidate" is a heuristic that can be a false positive \u2014 verify it with \`measure\` before changing code.
+`;
+
 // packages/cli/src/mcp/server.ts
 async function guard(run2) {
   try {
@@ -1960,6 +2024,18 @@ async function runMcpServer() {
     console.error(`[litedesign] extension bridge disabled: ${reason}`);
   }
   const server = new McpServer({ name: "litedesign", version: VERSION });
+  server.registerResource(
+    "workflow",
+    WORKFLOW_URI,
+    {
+      title: "Workflow",
+      description: "How the agent should work with this server: inspect first, resolve the human's names through labels, spotlight edits with focus.",
+      mimeType: "text/markdown"
+    },
+    async () => ({
+      contents: [{ uri: WORKFLOW_URI, text: WORKFLOW_TEXT, mimeType: "text/markdown" }]
+    })
+  );
   const viewport = z.object({
     w: z.number().int().positive().describe("Viewport width in CSS pixels"),
     h: z.number().int().positive().describe("Viewport height in CSS pixels")
@@ -1992,7 +2068,7 @@ async function runMcpServer() {
     "inspect",
     {
       title: "Inspect page",
-      description: 'Open a page and return a tree summary. Call this before measure, find_issues, overlay, screenshot, or screenshot_annotated. No image by default: the numbers the agent needs come from the DOM, so set screenshot to true only when you really need to see the page. With the extension driver this attaches to the active tab by itself; returns "awaiting_user" when no extension is connected and "mismatch" when the active tab is a different page.',
+      description: 'Open a page and return a tree summary. Call this before measure, find_issues, overlay, screenshot, or screenshot_annotated. The summary includes labels: the count and unique names the human pinned onto parts of the page \u2014 when the human refers to a part by name, get its selector from the labels tool. The full workflow is available as the resource skill://litedesign/workflow. No image by default: the numbers the agent needs come from the DOM, so set screenshot to true only when you really need to see the page. With the extension driver this attaches to the active tab by itself; returns "awaiting_user" when no extension is connected and "mismatch" when the active tab is a different page.',
       inputSchema: {
         url: z.string().url(),
         viewport,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@rahmantech/litedesign",
-  "version": "0.2.0",
+  "version": "0.2.2",
   "description": "Grid, gap, and alignment on the real web page, plus an MCP bridge for agents.",
   "license": "Apache-2.0",
   "author": "Muhammad Abdurrahman",
@@ -22,7 +22,7 @@
     "zod": "^4.6.7"
   },
   "devDependencies": {
-    "@litedesign/core": "0.2.0",
+    "@litedesign/core": "0.2.2",
     "@types/ws": "^8.18.2"
   },
   "publishConfig": {