taskia-prototype-mcp 3.0.0 → 3.1.0

package/README.md

@@ -1,120 +1,129 @@
-# taskia-prototype-mcp
-
-MCP server that lets agents **browse and see** the live Taskia design prototype.
-
-The MCP opens a real Chromium browser pointed at the published GitHub Pages URL.
-Agents can navigate screens, click UI elements, hover for tooltips, scroll — and every
-action returns a screenshot so they can see exactly what happened.
-
-Because it connects to the **live GitHub Pages deployment**, agents always see
-Andreina's latest design — no local clone, no `REPO_PATH` required.
-
----
-
-## Tools
-
-| Tool | What it does |
-|---|---|
-| `screenshot` | PNG of whatever is visible right now |
-| `go_to_screen` | Navigate to a named screen + screenshot |
-| `click` | Click an element by visible text + screenshot |
-| `hover` | Hover an element (tooltips / hover states) + screenshot |
-| `scroll` | Scroll the page + screenshot |
-| `list_interactive_elements` | Every clickable element currently on screen |
-| `reload` | Reload from GitHub Pages (picks up Andreina's latest push) |
-| `reset` | Return to default screen (Tasks, signed in) |
-| `list_screens` | All screen names available in the prototype |
-| `get_design_tokens` | CSS custom properties (light + dark) from live `styles.css` |
-| `get_design_system_docs` | Full `DESIGN_SYSTEM.md` |
-| `get_prototype_url` | The live GitHub Pages URL |
-
----
-
-## Setup
-
-### 1. Clone the repo
-
-```bash
-git clone https://github.com/Omicron-Group-Solutions/prototipo_diseno.git
-cd prototipo_diseno/mcp-server
-```
-
-### 2. Install dependencies + Chromium
-
-```bash
-npm install
-npm run install-browser
-```
-
-> `install-browser` downloads a local Chromium (~130 MB, one-time).
-
-### 3. Add to Claude Code
-
-Edit `~/.claude/claude_desktop_config.json`:
-
-```json
-{
-  "mcpServers": {
-    "taskia-prototype": {
-      "command": "node",
-      "args": ["C:\\Users\\You\\Desktop\\prototipo_diseno\\mcp-server\\server.js"]
-    }
-  }
-}
-```
-
-> No `REPO_PATH` needed — the MCP fetches everything from GitHub Pages.
-
-### 4. Restart Claude Code
-
----
-
-## Watch the browser (optional)
-
-Add `HEADLESS=false` to see the browser window on screen while agents drive it:
-
-```json
-{
-  "mcpServers": {
-    "taskia-prototype": {
-      "command": "node",
-      "args": ["C:\\Users\\You\\Desktop\\prototipo_diseno\\mcp-server\\server.js"],
-      "env": {
-        "HEADLESS": "false"
-      }
-    }
-  }
-}
-```
-
----
-
-## Staying up to date
-
-When Andreina pushes a design update, call `reload()` — the browser refreshes from
-GitHub Pages and returns a screenshot of the new design. No restart needed.
-
----
-
-## Example usage
-
-```
-"Show me the Tasks screen"
-→ go_to_screen({ screen_name: "ScreenTasks" })
-
-"What can I click on the Kanban board?"
-→ go_to_screen({ screen_name: "ScreenKanban" })
-→ list_interactive_elements()
-
-"Click that task to open the detail panel"
-→ click({ text: "Diseño nuevo sistema" })
-
-"Show the hover state on the sidebar"
-→ hover({ text: "Kanban" })
-
-"What color is the primary button?"
-→ get_design_tokens()   ← look for --brand or --btn-*
-
-"Andreina just pushed an update — show me"
-→ reload()
-```
+# taskia-prototype-mcp
+
+MCP server that lets agents **browse and see** the live Taskia design prototype.
+
+The MCP opens a real Chromium browser pointed at the published GitHub Pages URL.
+Agents can navigate screens, click UI elements, hover for tooltips, scroll — and every
+action returns a screenshot so they can see exactly what happened.
+
+Because it connects to the **live GitHub Pages deployment**, agents always see
+Andreina's latest design — no local clone, no `REPO_PATH` required.
+
+---
+
+## Tools
+
+| Tool | What it does |
+|---|---|
+| `screenshot` | PNG of whatever is visible right now |
+| `go_to_screen` | Navigate to a named screen + screenshot |
+| `click` | Click an element by visible text + screenshot |
+| `hover` | Hover an element (tooltips / hover states) + screenshot |
+| `scroll` | Scroll the page + screenshot |
+| `list_interactive_elements` | Every clickable element currently on screen |
+| `get_html` | Cleaned, pretty-printed **rendered HTML** of a screen or element — near copy-paste ready |
+| `get_css` | **Authored + computed CSS** for an element (matched rules with `var()` names, plus resolved px/color values) |
+| `reload` | Reload from GitHub Pages (picks up Andreina's latest push) |
+| `reset` | Return to default screen (Tasks, signed in) |
+| `list_screens` | All screen names available in the prototype |
+| `get_design_tokens` | CSS custom properties (light + dark) from live `styles.css` |
+| `get_design_system_docs` | Full `DESIGN_SYSTEM.md` |
+| `get_prototype_url` | The live GitHub Pages URL |
+
+---
+
+## Setup
+
+### 1. Clone the repo
+
+```bash
+git clone https://github.com/Omicron-Group-Solutions/prototipo_diseno.git
+cd prototipo_diseno/mcp-server
+```
+
+### 2. Install dependencies + Chromium
+
+```bash
+npm install
+npm run install-browser
+```
+
+> `install-browser` downloads a local Chromium (~130 MB, one-time).
+
+### 3. Add to Claude Code
+
+Edit `~/.claude/claude_desktop_config.json`:
+
+```json
+{
+  "mcpServers": {
+    "taskia-prototype": {
+      "command": "node",
+      "args": ["C:\\Users\\You\\Desktop\\prototipo_diseno\\mcp-server\\server.js"]
+    }
+  }
+}
+```
+
+> No `REPO_PATH` needed — the MCP fetches everything from GitHub Pages.
+
+### 4. Restart Claude Code
+
+---
+
+## Watch the browser (optional)
+
+Add `HEADLESS=false` to see the browser window on screen while agents drive it:
+
+```json
+{
+  "mcpServers": {
+    "taskia-prototype": {
+      "command": "node",
+      "args": ["C:\\Users\\You\\Desktop\\prototipo_diseno\\mcp-server\\server.js"],
+      "env": {
+        "HEADLESS": "false"
+      }
+    }
+  }
+}
+```
+
+---
+
+## Staying up to date
+
+When Andreina pushes a design update, call `reload()` — the browser refreshes from
+GitHub Pages and returns a screenshot of the new design. No restart needed.
+
+---
+
+## Example usage
+
+```
+"Show me the Tasks screen"
+→ go_to_screen({ screen_name: "ScreenTasks" })
+
+"What can I click on the Kanban board?"
+→ go_to_screen({ screen_name: "ScreenKanban" })
+→ list_interactive_elements()
+
+"Click that task to open the detail panel"
+→ click({ text: "Diseño nuevo sistema" })
+
+"Show the hover state on the sidebar"
+→ hover({ text: "Kanban" })
+
+"What color is the primary button?"
+→ get_design_tokens()   ← look for --brand or --btn-*
+
+"Give me the markup for this card so I can rebuild it"
+→ get_html({ selector: ".doc-card" })          ← or { text: "Factura" }
+
+"What CSS makes the sidebar look like that?"
+→ get_css({ selector: ".sidebar" })            ← matched rules + resolved values
+→ get_css({ selector: ".sidebar", all: true }) ← full computed style dump
+
+"Andreina just pushed an update — show me"
+→ reload()
+```

package/package.json

@@ -1,24 +1,24 @@
-{
-  "name": "taskia-prototype-mcp",
-  "version": "3.0.0",
-  "description": "MCP server — browse the live Taskia prototype, screenshot any screen, interact with UI elements",
-  "type": "module",
-  "bin": {
-    "taskia-prototype-mcp": "server.js"
-  },
-  "files": [
-    "server.js"
-  ],
-  "scripts": {
-    "start": "node server.js",
-    "install-browser": "playwright install chromium",
-    "postinstall": "playwright install chromium"
-  },
-  "publishConfig": {
-    "access": "public"
-  },
-  "dependencies": {
-    "@modelcontextprotocol/sdk": "^1.12.0",
-    "playwright": "^1.49.0"
-  }
-}
+{
+  "name": "taskia-prototype-mcp",
+  "version": "3.1.0",
+  "description": "MCP server — browse the live Taskia prototype, screenshot any screen, interact with UI elements, extract rendered HTML/CSS",
+  "type": "module",
+  "bin": {
+    "taskia-prototype-mcp": "server.js"
+  },
+  "files": [
+    "server.js"
+  ],
+  "scripts": {
+    "start": "node server.js",
+    "install-browser": "playwright install chromium",
+    "postinstall": "playwright install chromium"
+  },
+  "publishConfig": {
+    "access": "public"
+  },
+  "dependencies": {
+    "@modelcontextprotocol/sdk": "^1.12.0",
+    "playwright": "^1.49.0"
+  }
+}

package/server.js

@@ -19,6 +19,8 @@
  *   hover                     — hover an element (tooltips / hover states)
  *   scroll                    — scroll the page in any direction
  *   list_interactive_elements — every clickable element on screen
+ *   get_html                  — cleaned, pretty-printed rendered HTML of a screen/element
+ *   get_css                   — authored + resolved computed CSS for an element
  *   reload                    — reload from GitHub Pages (picks up latest push)
  *   reset                     — return to default screen (Tasks, signed in)
  *   list_screens              — all screen names in the prototype
@@ -54,6 +56,96 @@ const SCREEN_IDS = {
   ScreenLabels:    'labels',
 };
 
+// Pointer CRM — its own React SPA under /crm/ (separate page from the Taskia
+// SPA). Reached by loading crm/index.html once, then driving it with the same
+// window.__setScreen(id) hook Taskia uses. window.__APP === 'crm' marks it.
+const CRM_APP_URL = 'crm/index.html';
+const CRM_SCREENS = {
+  CrmContacts:   'contacts',     // listado personas/empresas — entry point
+  CrmContact:    'contact',      // ficha de contacto
+  CrmCompany:    'company',      // ficha de empresa
+  CrmNewContact: 'new-contact',  // alta de contacto
+  CrmDeals:      'deals',        // pipeline (kanban + lista)
+  CrmDeal:       'deal',          // ficha de oportunidad
+};
+
+// Pointer ERP — its own React SPA under /pointer/ (the full 6-module ERP).
+// Same mechanics as the CRM SPA: load pointer/index.html once, then drive it
+// with window.__setScreen(id). window.__APP === 'pointer' marks it. Screen ids
+// mirror the source app route hashes (e.g. `currency`, `purchase-request`).
+const POINTER_APP_URL = 'pointer/index.html';
+const POINTER_SCREENS = {
+  PointerHome: 'home',
+  PointerContactView: 'contact-view',
+  PointerContactGroups: 'contact-groups',
+  PointerPaymentCondition: 'payment-condition',
+  PointerCurrency: 'currency',
+  PointerAdvancesReceived: 'advances-received',
+  PointerAdvancesGiven: 'advances-given',
+  PointerIncome: 'income',
+  PointerExpenses: 'expenses',
+  PointerAccountPayable: 'account-payable',
+  PointerAccountReceivable: 'account-receivable',
+  PointerCollection: 'collection',
+  PointerPayment: 'payment',
+  PointerCurrencyExchange: 'currency-exchange',
+  PointerFundTransfer: 'fund-transfer',
+  PointerCashRegister: 'cash-register',
+  PointerBankAccount: 'bank-account',
+  PointerSerie: 'serie',
+  PointerAdministrationConfiguration: 'administration-configuration',
+  PointerLocation: 'location',
+  PointerPriceList: 'price-list',
+  PointerItem: 'item',
+  PointerUnit: 'unit',
+  PointerVariable: 'variable',
+  PointerDeliveryNote: 'delivery-note',
+  PointerReceiptNote: 'receipt-note',
+  PointerConfigurationDescription: 'configuration-description',
+  PointerOrderPreparationRequest: 'order-preparation-request',
+  PointerOrderPreparation: 'order-preparation',
+  PointerInventoryCheckPlanning: 'inventory-check-planning',
+  PointerInventoryCheck: 'inventory-check',
+  PointerInventoryTransfer: 'inventory-transfer',
+  PointerInventoryAdjustment: 'inventory-adjustment',
+  PointerProductionOrder: 'production-order',
+  PointerCategoryItem: 'category-item',
+  PointerBrand: 'brand',
+  PointerWarehouseConfiguration: 'warehouse-configuration',
+  PointerPurchaseRequest: 'purchase-request',
+  PointerPurchaseOrder: 'purchase-order',
+  PointerPurchaseInvoice: 'purchase-invoice',
+  PointerDebitNoteSuppliers: 'debit-note-suppliers',
+  PointerCreditNoteSuppliers: 'credit-note-suppliers',
+  PointerPurchaseConfiguration: 'purchase-configuration',
+  PointerAccountingAccount: 'accounting-account',
+  PointerAccountingAccountGroup: 'accounting-account-group',
+  PointerManualVoucher: 'manual-voucher',
+  PointerJournalEntry: 'journal-entry',
+  PointerTaxes: 'taxes',
+  PointerBanks: 'banks',
+  PointerBankReconciliation: 'bank-reconciliation',
+  PointerAccountingConfiguration: 'accounting-configuration',
+  PointerOpportunity: 'opportunity',
+  PointerSalesQuote: 'sales-quote',
+  PointerSalesOrder: 'sales-order',
+  PointerSalesInvoice: 'sales-invoice',
+  PointerCreditNoteCustomers: 'credit-note-customers',
+  PointerDebitNoteCustomers: 'debit-note-customers',
+  PointerAgreements: 'agreements',
+  PointerProjectCost: 'project-cost',
+  PointerProjectCostReturn: 'project-cost-return',
+  PointerSalesConfiguration: 'sales-configuration',
+  PointerLabelBuilder: 'label-builder',
+  PointerZone: 'zone',
+  PointerGeneralConfiguration: 'general-configuration',
+};
+
+/** Absolute GitHub Pages URL for a path relative to the deployment root. */
+function pagesUrl(path) {
+  return PAGES_URL.replace(/\/$/, '') + '/' + path.replace(/^\//, '');
+}
+
 // ── Persistent browser session ─────────────────────────────────────────────
 
 let _browser = null;
@@ -82,7 +174,11 @@ async function getPage() {
 
   _page = await ctx.newPage();
   await _page.goto(PAGES_URL, { waitUntil: 'networkidle', timeout: 30_000 });
-  await _page.waitForSelector('.app', { timeout: 20_000 });
+  // The deployment root is the Design Hub, which does not mount `.app` — the
+  // Taskia / CRM / Pointer SPAs each mount it on their own page. Wait for `.app`
+  // if this happens to be an SPA page, but don't fail on the hub: go_to_screen
+  // navigates to the right SPA and waits for `.app` there.
+  await _page.waitForSelector('.app', { timeout: 5_000 }).catch(() => {});
 
   return _page;
 }
@@ -111,6 +207,29 @@ async function fetchAsset(path) {
   return res.text();
 }
 
+/**
+ * Resolve a target element for get_html / get_css.
+ * Precedence: explicit CSS `selector` → visible `text` → the whole screen (.app).
+ * Returns a Playwright ElementHandle plus a human label for the response.
+ */
+async function resolveHandle(page, { selector, text } = {}) {
+  if (selector) {
+    const handle = await page.$(selector);
+    if (!handle) throw new Error(`No element matches CSS selector "${selector}".`);
+    return { handle, label: `selector "${selector}"` };
+  }
+  if (text) {
+    const loc = page.getByText(text, { exact: false }).first();
+    if ((await loc.count()) === 0)
+      throw new Error(`No element found with text "${text}". Call list_interactive_elements to see what is on screen.`);
+    const handle = await loc.elementHandle();
+    return { handle, label: `text "${text}"` };
+  }
+  const handle = (await page.$('.app')) || (await page.$('body'));
+  if (!handle) throw new Error('Nothing is loaded on the page yet.');
+  return { handle, label: '.app (whole screen)' };
+}
+
 function parseDesignTokens(css) {
   const light = {}, dark = {};
   for (const [, block] of css.matchAll(/:root(?:\[.*?\])?\s*\{([^}]+)\}/g))
@@ -125,7 +244,7 @@ function parseDesignTokens(css) {
 // ── MCP server ─────────────────────────────────────────────────────────────
 
 const server = new Server(
-  { name: 'taskia-prototype', version: '3.0.0' },
+  { name: 'taskia-prototype', version: '3.1.0' },
   { capabilities: { tools: {} } }
 );
 
@@ -150,8 +269,10 @@ server.setRequestHandler(ListToolsRequestSchema, async () => ({
           screen_name: {
             type: 'string',
             description:
-              'Screen component name, e.g. ScreenTasks, ScreenKanban, ScreenLogin, ' +
-              'ScreenDashboard, ScreenCalendar, ScreenReports, ScreenContacts, ScreenLabels.',
+              'Taskia app screen, e.g. ScreenTasks, ScreenKanban, ScreenLogin, ScreenDashboard, ' +
+              'ScreenCalendar, ScreenReports, ScreenContacts, ScreenLabels. ' +
+              'Or a standalone Pointer CRM screen: CrmContacts, CrmContact, CrmCompany, ' +
+              'CrmNewContact, CrmDeals, CrmDeal. Call list_screens for the full list.',
           },
         },
       },
@@ -219,6 +340,59 @@ server.setRequestHandler(ListToolsRequestSchema, async () => ({
         'Use this before calling click() to discover what is available.',
       inputSchema: { type: 'object', properties: {} },
     },
+    {
+      name: 'get_html',
+      description:
+        'Returns the RENDERED, cleaned, pretty-printed HTML of the current screen (or a specific ' +
+        'element). Since the prototype is React, this is the exact final markup — scripts/styles ' +
+        'and event-handler attributes are stripped, whitespace is collapsed, so it is close to ' +
+        'copy-paste ready when translating a screen to code. ' +
+        'With no arguments it dumps the whole screen (.app). Pass "selector" (any CSS selector) or ' +
+        '"text" (visible label) to scope to one component.',
+      inputSchema: {
+        type: 'object',
+        properties: {
+          selector: {
+            type: 'string',
+            description: 'CSS selector of the element to extract, e.g. ".doc-editor" or "#sidebar". Takes precedence over text.',
+          },
+          text: {
+            type: 'string',
+            description: 'Visible text of the element to extract (partial match). Used when no selector is given.',
+          },
+          max_depth: {
+            type: 'number',
+            description: 'Max nesting depth before children are collapsed with a comment. Default 40 (effectively the full tree). Lower it for a quick structural overview.',
+          },
+        },
+      },
+    },
+    {
+      name: 'get_css',
+      description:
+        'Returns the CSS for an element two ways: (1) the AUTHORED rules from the stylesheets that ' +
+        'actually match it (with var() names and media queries intact), and (2) the KEY COMPUTED ' +
+        'styles — the final resolved px/color values the browser painted. This is the accurate ' +
+        'source of truth for translating a component to code. ' +
+        'Target the element with "selector" or "text" (defaults to the whole screen).',
+      inputSchema: {
+        type: 'object',
+        properties: {
+          selector: {
+            type: 'string',
+            description: 'CSS selector of the element to inspect. Takes precedence over text.',
+          },
+          text: {
+            type: 'string',
+            description: 'Visible text of the element to inspect (partial match). Used when no selector is given.',
+          },
+          all: {
+            type: 'boolean',
+            description: 'Return the full computed style (~350 properties) instead of the curated key set. Default false.',
+          },
+        },
+      },
+    },
     {
       name: 'reload',
       description:
@@ -281,7 +455,60 @@ server.setRequestHandler(CallToolRequestSchema, async (request) => {
       case 'go_to_screen': {
         const page       = await getPage();
         const screenName = args.screen_name ?? '';
-        const id         = SCREEN_IDS[screenName] ?? screenName.toLowerCase();
+
+        // ── Pointer CRM SPA screens ──
+        if (CRM_SCREENS[screenName]) {
+          const id = CRM_SCREENS[screenName];
+          // Load the CRM SPA if we are not already on it (Taskia or a blank tab).
+          const onCrm = await page.evaluate(() => window.__APP === 'crm' && typeof window.__setScreen === 'function');
+          if (!onCrm) {
+            await page.goto(pagesUrl(CRM_APP_URL), { waitUntil: 'networkidle', timeout: 30_000 });
+            await page.waitForSelector('.app', { timeout: 20_000 });
+            await page.waitForFunction(() => typeof window.__setScreen === 'function', { timeout: 20_000 });
+          }
+          await page.evaluate((sid) => window.__setScreen(sid), id);
+          await page.waitForTimeout(500);
+
+          const png = await snap();
+          return {
+            content: [
+              { type: 'text',  text: `Navigated to CRM screen ${screenName} (id: "${id}")` },
+              { type: 'image', data: png, mimeType: 'image/png' },
+            ],
+          };
+        }
+
+        // ── Pointer ERP SPA screens ──
+        if (POINTER_SCREENS[screenName]) {
+          const id = POINTER_SCREENS[screenName];
+          const onPointer = await page.evaluate(() => window.__APP === 'pointer' && typeof window.__setScreen === 'function');
+          if (!onPointer) {
+            await page.goto(pagesUrl(POINTER_APP_URL), { waitUntil: 'networkidle', timeout: 30_000 });
+            await page.waitForSelector('.app', { timeout: 20_000 });
+            await page.waitForFunction(() => typeof window.__setScreen === 'function', { timeout: 20_000 });
+          }
+          await page.evaluate((sid) => window.__setScreen(sid), id);
+          await page.waitForTimeout(500);
+
+          const png = await snap();
+          return {
+            content: [
+              { type: 'text',  text: `Navigated to Pointer screen ${screenName} (id: "${id}")` },
+              { type: 'image', data: png, mimeType: 'image/png' },
+            ],
+          };
+        }
+
+        // ── Taskia SPA screens ──
+        const id = SCREEN_IDS[screenName] ?? screenName.toLowerCase();
+
+        // We may currently be on the CRM SPA (or a non-SPA page) — reload the
+        // Taskia shell before driving it. Distinguish by the __APP marker.
+        const onTaskia = await page.evaluate(() => typeof window.__setScreen === 'function' && window.__APP !== 'crm' && window.__APP !== 'pointer');
+        if (!onTaskia) {
+          await page.goto(PAGES_URL, { waitUntil: 'networkidle', timeout: 30_000 });
+          await page.waitForSelector('.app', { timeout: 20_000 });
+        }
 
         if (id === 'login') {
           await page.evaluate(() => window.__setSignedIn?.(false));
@@ -432,11 +659,201 @@ server.setRequestHandler(CallToolRequestSchema, async (request) => {
         };
       }
 
+      // ── get_html ──────────────────────────────────────────────────────────
+      case 'get_html': {
+        const page = await getPage();
+        const { handle, label } = await resolveHandle(page, args);
+        const maxDepth = args.max_depth ?? 40;
+
+        const html = await handle.evaluate((el, maxDepth) => {
+          const VOID = new Set([
+            'area', 'base', 'br', 'col', 'embed', 'hr', 'img', 'input',
+            'link', 'meta', 'param', 'source', 'track', 'wbr',
+          ]);
+
+          const esc = s => s.replace(/&/g, '&amp;').replace(/</g, '&lt;').replace(/>/g, '&gt;');
+          const escAttr = s => s.replace(/&/g, '&amp;').replace(/"/g, '&quot;');
+
+          function serialize(node, depth) {
+            const pad = '  '.repeat(depth);
+
+            // text node
+            if (node.nodeType === 3) {
+              const t = node.textContent.replace(/\s+/g, ' ').trim();
+              return t ? pad + esc(t) : '';
+            }
+            if (node.nodeType !== 1) return '';
+
+            const tag = node.tagName.toLowerCase();
+            if (tag === 'script' || tag === 'style' || tag === 'noscript') return '';
+
+            // attributes — drop event handlers, keep everything else (class, style, data-*, aria-*)
+            let attrs = '';
+            for (const a of node.attributes) {
+              if (/^on/i.test(a.name)) continue;
+              attrs += a.value === '' ? ` ${a.name}` : ` ${a.name}="${escAttr(a.value)}"`;
+            }
+            const open = `<${tag}${attrs}>`;
+            if (VOID.has(tag)) return pad + open;
+
+            const kids = [...node.childNodes];
+            if (depth >= maxDepth && node.children.length) {
+              return `${pad}${open}<!-- …${node.children.length} child element(s) collapsed --></${tag}>`;
+            }
+
+            const rendered = kids.map(k => serialize(k, depth + 1)).filter(Boolean);
+            if (rendered.length === 0) return pad + open + `</${tag}>`;
+
+            // inline when the only content is a single text node
+            if (rendered.length === 1 && kids.filter(k => k.nodeType === 1).length === 0) {
+              return pad + open + rendered[0].trim() + `</${tag}>`;
+            }
+            return pad + open + '\n' + rendered.join('\n') + '\n' + pad + `</${tag}>`;
+          }
+
+          return serialize(el, 0);
+        }, maxDepth);
+
+        await handle.dispose();
+
+        return {
+          content: [{
+            type: 'text',
+            text: `Rendered HTML for ${label}:\n\n\`\`\`html\n${html}\n\`\`\``,
+          }],
+        };
+      }
+
+      // ── get_css ───────────────────────────────────────────────────────────
+      case 'get_css': {
+        const page = await getPage();
+        const { handle, label } = await resolveHandle(page, args);
+        const wantAll = args.all ?? false;
+
+        const data = await handle.evaluate((el, wantAll) => {
+          const cs = getComputedStyle(el);
+
+          // Curated, translation-relevant properties (the noise-free default).
+          const PROPS = [
+            'display', 'position', 'top', 'right', 'bottom', 'left', 'z-index',
+            'box-sizing', 'width', 'height', 'min-width', 'max-width', 'min-height', 'max-height',
+            'margin-top', 'margin-right', 'margin-bottom', 'margin-left',
+            'padding-top', 'padding-right', 'padding-bottom', 'padding-left',
+            'flex-direction', 'flex-wrap', 'justify-content', 'align-items', 'align-content',
+            'align-self', 'gap', 'row-gap', 'column-gap', 'flex-grow', 'flex-shrink', 'flex-basis', 'order',
+            'grid-template-columns', 'grid-template-rows', 'grid-template-areas', 'grid-auto-flow',
+            'grid-auto-columns', 'grid-auto-rows', 'grid-column', 'grid-row',
+            'font-family', 'font-size', 'font-weight', 'font-style', 'line-height', 'letter-spacing',
+            'text-align', 'text-transform', 'text-decoration-line', 'white-space', 'text-overflow',
+            'color', 'background-color', 'background-image', 'background-size', 'background-position',
+            'border-width', 'border-style', 'border-color', 'border-radius',
+            'box-shadow', 'outline', 'opacity', 'transform', 'transition', 'filter', 'backdrop-filter',
+            'cursor', 'overflow', 'overflow-x', 'overflow-y', 'object-fit',
+          ];
+
+          // Values that are just the CSS initial default — skip them in curated mode.
+          const SKIP = {
+            'transform': 'none', 'box-shadow': 'none', 'background-image': 'none',
+            'filter': 'none', 'backdrop-filter': 'none', 'opacity': '1', 'z-index': 'auto',
+            'letter-spacing': 'normal', 'text-transform': 'none', 'text-decoration-line': 'none',
+            'outline': 'rgb(0, 0, 0) none 0px', 'transition': 'all 0s ease 0s',
+            'text-overflow': 'clip', 'object-fit': 'fill', 'text-align': 'start',
+            'align-self': 'auto', 'order': '0', 'flex-grow': '0', 'flex-shrink': '1',
+            'top': 'auto', 'right': 'auto', 'bottom': 'auto', 'left': 'auto',
+            'min-width': 'auto', 'min-height': 'auto', 'max-width': 'none', 'max-height': 'none',
+            'flex-basis': 'auto', 'box-sizing': 'border-box', 'font-style': 'normal',
+            'white-space': 'normal', 'cursor': 'auto',
+            'overflow': 'visible', 'overflow-x': 'visible', 'overflow-y': 'visible',
+            'gap': 'normal', 'row-gap': 'normal', 'column-gap': 'normal',
+            'background-size': 'auto', 'background-position': '0% 0%',
+            'grid-template-columns': 'none', 'grid-template-rows': 'none',
+            'grid-template-areas': 'none', 'grid-auto-flow': 'row',
+            'grid-auto-columns': 'auto', 'grid-auto-rows': 'auto',
+            'grid-column': 'auto', 'grid-row': 'auto',
+          };
+
+          const computed = {};
+          const list = wantAll ? Array.from(cs).sort() : PROPS;
+          for (const p of list) {
+            const v = cs.getPropertyValue(p).trim();
+            if (!v) continue;
+            if (!wantAll && SKIP[p] === v) continue;
+            computed[p] = v;
+          }
+
+          // Authored rules from the stylesheets that match this element.
+          const matched = [];
+          const testMatch = (sel) => {
+            // strip pseudo-classes/elements that el.matches() can't evaluate
+            const clean = sel.replace(/::?[a-zA-Z-]+(\([^)]*\))?/g, '').trim();
+            if (!clean) return false;
+            try { return el.matches(clean); } catch { return false; }
+          };
+          const walk = (rules, condition) => {
+            for (const rule of rules) {
+              if (rule.type === 1 && rule.selectorText) {            // CSSStyleRule
+                const sels = rule.selectorText.split(',').map(s => s.trim());
+                if (sels.some(testMatch)) {
+                  matched.push(condition ? `@media ${condition} {\n  ${rule.cssText}\n}` : rule.cssText);
+                }
+              } else if (rule.cssRules && (rule.type === 4 || rule.type === 12)) { // media / supports
+                walk(rule.cssRules, rule.conditionText || condition);
+              }
+            }
+          };
+          for (const sheet of document.styleSheets) {
+            let rules;
+            try { rules = sheet.cssRules; } catch { continue; } // cross-origin sheet
+            if (rules) walk(rules, null);
+          }
+
+          const cls = (typeof el.className === 'string' && el.className.trim())
+            ? '.' + el.className.trim().split(/\s+/).join('.') : '';
+          const desc = el.tagName.toLowerCase() + (el.id ? `#${el.id}` : '') + cls;
+
+          return { desc, computed, matched };
+        }, wantAll);
+
+        await handle.dispose();
+
+        const computedBlock = Object.entries(data.computed)
+          .map(([k, v]) => `  ${k}: ${v};`).join('\n');
+        const matchedBlock = data.matched.length
+          ? data.matched.join('\n\n')
+          : '/* No authored rules matched — this element is styled via inline style or inherited rules only. */';
+
+        return {
+          content: [{
+            type: 'text',
+            text: [
+              `CSS for ${label}`,
+              `Matched element: ${data.desc}`,
+              '',
+              `### Authored rules that apply (${data.matched.length})`,
+              '```css',
+              matchedBlock,
+              '```',
+              '',
+              `### Key computed styles — resolved values (${Object.keys(data.computed).length})`,
+              '```css',
+              `${data.desc} {`,
+              computedBlock,
+              '}',
+              '```',
+              wantAll ? '' : '\n_Tip: pass `all: true` for the full computed style dump._',
+            ].join('\n'),
+          }],
+        };
+      }
+
       // ── reload ──────────────────────────────────────────────────────────
       case 'reload': {
         const page = await getPage();
         await page.reload({ waitUntil: 'networkidle', timeout: 30_000 });
-        await page.waitForSelector('.app', { timeout: 20_000 });
+        // The SPA mounts into `.app`; standalone CRM pages do not — wait only
+        // for the shell when we are on the SPA so reload works on both.
+        const isSpa = await page.evaluate(() => typeof window.__setScreen === 'function');
+        if (isSpa) await page.waitForSelector('.app', { timeout: 20_000 });
         await page.waitForTimeout(500);
 
         const png = await snap();
@@ -451,6 +868,12 @@ server.setRequestHandler(CallToolRequestSchema, async (request) => {
       // ── reset ───────────────────────────────────────────────────────────
       case 'reset': {
         const page = await getPage();
+        // May currently be on the CRM SPA — reload the Taskia shell first.
+        const onTaskia = await page.evaluate(() => typeof window.__setScreen === 'function' && window.__APP !== 'crm' && window.__APP !== 'pointer');
+        if (!onTaskia) {
+          await page.goto(PAGES_URL, { waitUntil: 'networkidle', timeout: 30_000 });
+          await page.waitForSelector('.app', { timeout: 20_000 });
+        }
         await page.evaluate(() => {
           window.__setSignedIn?.(true);
           window.__setScreen?.('tasks');
@@ -470,10 +893,19 @@ server.setRequestHandler(CallToolRequestSchema, async (request) => {
       case 'list_screens': {
         const source  = await fetchAsset('screens.jsx');
         const screens = [...source.matchAll(/^function\s+(Screen[A-Za-z]+)\s*\(/gm)].map(m => m[1]);
+        const crm     = Object.keys(CRM_SCREENS);
+        const pointer = Object.keys(POINTER_SCREENS);
         return {
           content: [{
             type: 'text',
-            text: `Screens (${screens.length}):\n${screens.map(s => `  • ${s}`).join('\n')}\n\nUse go_to_screen with any of these names.`,
+            text:
+              `Taskia app — SPA screens (${screens.length}):\n` +
+              `${screens.map(s => `  • ${s}`).join('\n')}\n\n` +
+              `Pointer CRM — standalone SPA at ${CRM_APP_URL} (${crm.length}):\n` +
+              `${crm.map(s => `  • ${s}  →  screen "${CRM_SCREENS[s]}"`).join('\n')}\n\n` +
+              `Pointer ERP — standalone SPA at ${POINTER_APP_URL} (${pointer.length}):\n` +
+              `${pointer.map(s => `  • ${s}  →  screen "${POINTER_SCREENS[s]}"`).join('\n')}\n\n` +
+              `Use go_to_screen with any of these names.`,
           }],
         };
       }