feat: add DevTools "Rossum" panel (raw object editor)

A Chrome DevTools panel that detects the API resource behind the inspected
Rossum page, shows it as an editable CodeMirror JSON editor, navigates between
related resources via link tabs, and PATCHes edits through a diff-confirm flow.

- Detection (detect.js) + URL->resource mapping (resourceFromApiUrl.js):
  detail routes, schema-via-fields, emails->inbox, documents dashboard->
  queue/org, read-only list pages, numeric sub-resource links.
- Tabbed shell: a permanent default (page) tab (always visible, never
  closeable), link tabs (Cmd/Ctrl+click + right-click open, drag reorder),
  capture-phase Cmd+F -> CodeMirror search.
- Whole-top-level-key PATCH with diff confirm; reload only on page-tab save;
  403/405 read-only fallback; theme-aware DevTools-approx highlighting.
- Content preview: non-JSON responses (e.g. documents/{id}/content) render as
  image/PDF/file-info + Download/Open instead of JSON.
- Inline resource-name hints on visible references (dimmed, at line end);
  the objects fetched for names double as a prefetch cache for instant
  link-open.

Manifest gains devtools_page (no new permissions); build.js adds the two
entry points; adds @codemirror/lang-json. Read-only is client-side
defense-in-depth; a server-side write-lock remains the ship-blocker before
non-dogfood use.

Author: mrtnzlml

CLAUDE.md

@@ -13,20 +13,22 @@ Uses **esbuild** to bundle ES modules from `src/` into `dist/`. No other build t
 - `npm run build` — clean build into `dist/`
 - `npm run dev` — watch mode (JS only; re-run build for CSS/HTML changes)
 - `dist/` is the loadable Chrome extension (gitignored)
-- `build.js` orchestrates bundling + static asset copying (manifest.json, icons/, popup HTML/CSS, console HTML/CSS)
+- `build.js` orchestrates bundling + static asset copying (manifest.json, icons/, popup HTML/CSS, console HTML/CSS, devtools HTML/CSS)
 
 esbuild config: `format: 'iife'`, `minify: true`, `jsxFactory: 'h'`, `jsxFragment: 'Fragment'` (Preact JSX).
 
 ## Architecture
 
-Six esbuild entry points:
+Eight esbuild entry points:
 
 1. **`src/rossum/index.js`** → content script for Rossum pages
 2. **`src/netsuite/index.js`** → content script for NetSuite pages
 3. **`src/coupa/index.js`** → content script for Coupa pages
 4. **`src/popup/popup.jsx`** → extension popup UI (Preact)
 5. **`src/console/index.jsx`** → unified Console page (`console/console.html`, opened via `chrome.tabs.create`) — a left app-switcher rail over three apps: Dataset Management (`src/mdh/`), Audit Log Viewer (`src/audit/`), and Galaxy (`src/galaxy/`, a 3D org birdview)
 6. **`src/background/index.js`** → MV3 service worker (`background.js`)
+7. **`src/devtools/devtools.js`** → Chrome DevTools registrar (`devtools.html`, creates the "Rossum" panel + forwards `panel.onSearch` to CodeMirror)
+8. **`src/devtools/panel.jsx`** → DevTools panel page (`panel.html`)
 
 The background service worker exists for a single job: a content script can't
 `chrome.tabs.create` an extension page, so the `dataset-mgmt-suggest` feature
@@ -147,6 +149,19 @@ spec: `docs/superpowers/specs/2026-07-03-inspector-overhaul-design.md`).
 - Read-only stance unchanged: the agent's read-only framing is defense-in-depth, and the
   server-side write-lock remains the ship-blocker before non-dogfood use.
 
+### DevTools panel (Raw Object Editor) (`src/devtools/`)
+
+A Chrome DevTools panel named **"Rossum"** that displays and edits the API resource backing the current Rossum page. The editor fills the panel with compact font (11px) and no header — the tab itself shows the resource identity. Detected resources (`detect.js` `detectResource`): detail routes — **queue** (`/queues/{id}` + async `/queues/{id}/settings/emails` → `queue.inbox`), **hook** (`/extensions/my-extensions/{id}`), **user** (`/settings/users/{id}`), **schema** (`/settings/field-manager/detail/{id}` and queue **Fields** tab via async `queue.schema` fetch), **engine** (`/automation/engines/{id}`), **rule** (`/queues/{q}/settings/rules/{ruleId}/detail` — matched *before* the queue row, first-match-wins), **annotation** (`/document/{id}` and `/annotation/{id}` → `/api/v1/annotations/{id}`); and read-only collection pages — **Hooks** (`/extensions/my-extensions`), **Users** (`/settings/users`), **Labels** (`/settings/labels`), **Organization Groups** (part of `READONLY_COLLECTIONS`, always non-editable). Additional: a **queue** from `/documents?filtering=…&level=queue`, and `/documents?level=all` resolves to **organization** (via `GET /api/v1/organizations` → `results[0].url`). Links open via **Cmd/Ctrl-click** or right-click **"Open in new tab"**, reaching any Rossum API URL including workspace/org and sub-resources (e.g. annotation `content`, read-only). For annotations the panel edits the **annotation object** (metadata/status/labels) via PATCH — datapoint **content** is NOT edited here (that needs the content-operations API). Resource identity uses `keyOf(apiPath)` so sub-resources (different API paths) open as distinct tabs; `readOnly` descriptor flag marks non-editable resources. 404 shows a clearer message (out-of-org, support-access user, or deleted).
+
+- **Registrar & auth flow** — `devtools.js` creates the panel; `panel.jsx` is the panel page. Auth: the panel uses `chrome.devtools.inspectedWindow.eval` to read `{token, domain, pathname, search}` from the inspected Rossum tab's main-world context (no storage staging needed) and re-polls for SPA navigation (`inspected.js` `startBridge`, dedup keyed on domain|pathname|search|token — `search` is included so `/documents?level=all` vs `?…&level=queue` on the same path re-detect). Panel calls `${domain}/api/v1/…` with `Token` auth (reuses extension's existing `host_permissions`). Self-gated: always available on Rossum pages, no popup toggle or experimental unlock.
+- **In-panel tabs** — one permanent **default (page) tab** (`.rawjson-tab--page`, visually distinct) follows the inspected page, is pinned first, and is **always visible and never closeable** (seeded at store load via `ensurePageTab()`; `syncPageTab` never drops it; `closeTab`/`closeOtherTabs` preserve it). When no resource is detected it becomes resource-less (labelled "Page") and its **body shows the "Open a Rossum queue, hook, user, …" hint** (there is no separate no-tabs empty state). **Cmd/Ctrl-click** or right-click a Rossum API URL opens a **link tab** (closeable, reorderable via drag-and-drop, pinned after the root via `store.moveTab`). Tab state lives in Preact `store.tabs` / `store.activeId`. Right-click a tab → context menu (`store.tabMenu`): **"Close"** (link tabs only — never offered for the default tab) + **"Close Other Tabs"** (`closeOtherTabs`, keeps the clicked tab *and* the default tab); right-clicking the sole default tab opens no menu.
+- **Core UI** — CodeMirror `JsonCodeEditor` (basicSetup + `@codemirror/lang-json`). Theme-aware — `theme.js` `isDark()` (DevTools `chrome.devtools.panels.themeName`, `prefers-color-scheme` fallback) drives both the CodeMirror syntax colors (custom `HighlightStyle` approximating DevTools, light+dark) and the panel chrome (`data-theme` on the root; `panel.css`). **Cmd/Ctrl-F** is captured at the window capture phase (`keydown` listener) → focus + `openSearchPanel` on `store.views.active` (the DevTools native search bar does not appear; `search.js` was removed).
+- **Content preview** — when a resource's body is NOT JSON (by response `Content-Type`; e.g. `documents/{id}/content` returns the original file), `api.getResource` returns a blob descriptor and the tab shows `PreviewPane` instead of the editor: `image/*` → `<img>`, `application/pdf` → `<iframe>` (NOT `<embed>`/`<object>` — the extension-page CSP `object-src 'self'` blocks a `blob:` object), else a file-info card; every preview has **Download** + **Open in browser tab** (both use the `blob:` object URL — a direct `${domain}${apiPath}` nav would 401). Object URL is created/revoked with the component lifecycle. Preview tabs are read-only (no Save). `contentMeta.js` = pure `extFor`/`formatBytes`/`filenameFrom`. `getJson` is kept for JSON-guaranteed calls (`via` resolution + save re-fetch).
+- **Inline resource-name hints + prefetch cache** — the editor annotates every visible `/api/v1/<collection>/<id>` reference (scalar fields AND array elements) with the target object's **name**, dimmed at line end (`cmNames.js` ViewPlugin `.rawjson-name`; debounced `refreshNames` effect as names arrive). `nameResolve.js` `makeNameResolver(getJson)` resolves visible links (in-flight dedupe, ~6 concurrency cap, negative-cached errors) via a session `resourceCache.js` (`apiPath → {name, obj, at, status}`, ~200-entry cap). `pickName`: user → `username (first last)` (else `username`, else `email`); documents → `original_file_name`; else `.name`. Because resolving a name fetches the whole object, `resourceCache` doubles as a **prefetch cache**: `loadResource` reuses `deps.getCached` (≤60s `getFresh`) to open a link tab instantly with no network call, and warms `deps.putCached` on any JSON load. Cache is in-memory only (never persisted). Sub-resources (`…/content`, read-only) are never name-resolved.
+- **Editing & Save** — edits generate a diff (pure `diff.js` logic) shown in a `DiffConfirm` overlay; user accepts → `PATCH` sent to the API → on success, **reloads the inspected page** (`inspectedWindow.reload`). No Undo. Reuses pure modules `detect.js` (URL→resource descriptor `{type,id,apiPath,label,readOnly}`), `diff.js` (`buildPatchBody`/`diffObjects` — diff-shown == diff-sent), Preact signals `store.js`, and `actions.js` (`loadResource`/`requestDiff`/`saveResource`, dependency-injected with `{getJson, patch}`, with a resource-change guard so a mid-save SPA nav never writes the wrong resource); components `DiffConfirm` and the lean CodeMirror `JsonCodeEditor` are in `src/devtools/`.
+- **Fallback** — 403/405 (read-only org or insufficient perms) → the editor is non-editable and Save is hidden (view-only). 404 displays context (out-of-org, support-access user, resource deleted).
+- **Nothing leaves the browser** — resource JSON is fetched + displayed + patched inline; no contents persisted, no sync to background/storage.
+
 ### Coupa content script
 
 Two strategies: JSON metadata extraction from `#initial_full_react_data` script tag (React pages like invoices) and DOM attribute extraction with `IGNORE_S_CLASSES` filtering (Rails pages like POs).
@@ -157,7 +172,7 @@ Preact JSX. Detects current site (Rossum/NetSuite/Coupa) and dims irrelevant sec
 
 ## Chrome Storage Keys
 
-- Feature toggles: `schemaAnnotationsEnabled`, `expandFormulasEnabled`, `expandReasoningFieldsEnabled`, `scrollLockEnabled`, `resourceIdsEnabled`, `annotateForMeEnabled`, `netsuiteFieldNamesEnabled`, `coupaFieldNamesEnabled` (the short-lived `inspectAnnotationEnabled` toggle was removed 2026-07-04 along with the floating button; any stored value is orphaned)
+- Feature toggles: `schemaAnnotationsEnabled`, `expandFormulasEnabled`, `expandReasoningFieldsEnabled`, `scrollLockEnabled`, `resourceIdsEnabled`, `annotateForMeEnabled`, `netsuiteFieldNamesEnabled`, `coupaFieldNamesEnabled` (the short-lived `inspectAnnotationEnabled` toggle was removed 2026-07-04 along with the floating button, and the in-page `rawObjectEditorEnabled` toggle was removed 2026-07 with the in-page Raw Object Editor surface; any stored values are orphaned)
 - Experimental unlock: `experimentalUnlocked` — flipped by 5 quick clicks on the popup's version hash; reveals the popup's Experimental section AND is the second half of the `annotateForMeEnabled` double-gate (`isAnnotateEnabled` in `src/rossum/features/annotate-for-me.js`): the Annotate-for-me feature injects only when BOTH are true
 - Console staging auth: `consoleAuth_<uuid>` (single-use, 24h TTL, removed on first read; carries `app` + optional DS pipeline prefill)
 - Console state: `consoleActiveApp` — per-tab (see MDH state below: session-first read with a `chrome.storage.local` seed)

build.js

@@ -13,7 +13,7 @@ const chromeVersion = `${chromeMajor}.${chromeMinor}`;
 
 rmSync('dist', { recursive: true, force: true });
 
-for (const dir of ['dist/popup', 'dist/icons', 'dist/console']) {
+for (const dir of ['dist/popup', 'dist/icons', 'dist/console', 'dist/devtools']) {
   mkdirSync(dir, { recursive: true });
 }
 
@@ -28,6 +28,9 @@ cpSync('src/popup/popup.html', 'dist/popup/popup.html');
 cpSync('src/popup/popup.css', 'dist/popup/popup.css');
 cpSync('src/console/console.html', 'dist/console/console.html');
 cpSync('src/console/console.css', 'dist/console/console.css');
+cpSync('src/devtools/devtools.html', 'dist/devtools/devtools.html');
+cpSync('src/devtools/panel.html', 'dist/devtools/panel.html');
+cpSync('src/devtools/panel.css', 'dist/devtools/panel.css');
 
 const options = {
   entryPoints: {
@@ -37,6 +40,8 @@ const options = {
     'popup/popup': 'src/popup/popup.jsx',
     'console/console': 'src/console/index.jsx',
     'background': 'src/background/index.js',
+    'devtools/devtools': 'src/devtools/devtools.js',
+    'devtools/panel': 'src/devtools/panel.jsx',
   },
   bundle: true,
   minify: true,

manifest.json

@@ -44,5 +44,6 @@
       "48": "icons/48-blue-crunch.png",
       "128": "icons/128-blue-crunch.png"
     }
-  }
+  },
+  "devtools_page": "devtools/devtools.html"
 }

package-lock.json

@@ -21,6 +21,7 @@
   },
   "dependencies": {
     "@codemirror/lang-javascript": "^6.2.5",
+    "@codemirror/lang-json": "^6.0.2",
     "@codemirror/theme-one-dark": "^6.1.3",
     "@preact/signals": "^2.9.2",
     "codemirror": "^6.0.2",

package.json

@@ -0,0 +1,40 @@
+// src/devtools/DiffConfirm.jsx
+import { h } from 'preact';
+import { diffObjects } from './diff.js';
+
+export default function DiffConfirm({ original, edited, saving, onConfirm, onCancel }) {
+  const d = diffObjects(original, edited);
+  const empty = d.leaves.length === 0 && d.removed.length === 0;
+  return (
+    <div class="rawjson-diff-overlay">
+      <div class="rawjson-diff-card">
+        <h4 class="rawjson-diff-title">Review changes</h4>
+        {empty ? (
+          <div class="rawjson-diff-empty">No changes to save.</div>
+        ) : (
+          <div class="rawjson-diff-list">
+            {d.leaves.map((l) => (
+              <div class={`rawjson-diff-leaf rawjson-diff-${l.kind}`}>
+                <code class="rawjson-diff-path">{l.path}</code>
+                <span class="rawjson-diff-before">{l.kind === 'added' ? '—' : JSON.stringify(l.before)}</span>
+                <span class="rawjson-diff-arrow">→</span>
+                <span class="rawjson-diff-after">{l.kind === 'removed' ? '—' : JSON.stringify(l.after)}</span>
+              </div>
+            ))}
+          </div>
+        )}
+        {d.removed.length ? (
+          <div class="rawjson-diff-removed-warn">
+            Removed top-level keys are NOT applied (PATCH can't delete keys): {d.removed.join(', ')}
+          </div>
+        ) : null}
+        <div class="rawjson-diff-actions">
+          <button class="rawjson-cancel" onClick={onCancel} disabled={saving}>Cancel</button>
+          <button class="rawjson-confirm" onClick={onConfirm} disabled={saving || empty}>
+            {saving ? 'Saving…' : 'Confirm & save'}
+          </button>
+        </div>
+      </div>
+    </div>
+  );
+}

src/devtools/DiffConfirm.jsx

@@ -0,0 +1,104 @@
+import { h } from 'preact';
+import { useEffect, useRef } from 'preact/hooks';
+import { EditorView, basicSetup } from 'codemirror';
+import { EditorState } from '@codemirror/state';
+import { json } from '@codemirror/lang-json';
+import { HighlightStyle, syntaxHighlighting } from '@codemirror/language';
+import { tags } from '@lezer/highlight';
+import * as store from './store.js';
+import { isDark } from './theme.js';
+import { rossumLinks } from './cmLinks.js';
+import { rossumNames } from './cmNames.js';
+import { resolver } from './nameResolve.js';
+
+// Approximate DevTools' JSON/source palette (exact tokens aren't exposed to
+// extension panels — only the theme name). Tune in dogfood.
+const lightHL = syntaxHighlighting(HighlightStyle.define([
+  { tag: tags.propertyName, color: '#881391' },
+  { tag: tags.string, color: '#c41a16' },
+  { tag: tags.number, color: '#1c00cf' },
+  { tag: tags.bool, color: '#0842a0' },
+  { tag: tags.null, color: '#808080' },
+  { tag: tags.keyword, color: '#881391' },
+]));
+const darkHL = syntaxHighlighting(HighlightStyle.define([
+  { tag: tags.propertyName, color: '#5db0d7' },
+  { tag: tags.string, color: '#f29766' },
+  { tag: tags.number, color: '#9980ff' },
+  { tag: tags.bool, color: '#569cd6' },
+  { tag: tags.null, color: '#808080' },
+  { tag: tags.keyword, color: '#c586c0' },
+]));
+// Editor surface inherits the panel's theme-aware background (no oneDark dark surface).
+const surfaceTheme = EditorView.theme({
+  '&': { backgroundColor: 'transparent', color: 'var(--fg)' },
+  '.cm-gutters': { backgroundColor: 'transparent', color: '#888', border: 'none' },
+  '.cm-activeLine': { backgroundColor: 'rgba(128,128,128,0.08)' },
+  '.cm-activeLineGutter': { backgroundColor: 'transparent' },
+});
+
+export default function JsonCodeEditor({ tabId, onFollowLink, onContextLink }) {
+  const parentRef = useRef(null);
+  const viewRef = useRef(null);
+  // True while WE programmatically push an external buffer change into the view,
+  // so the updateListener can distinguish that from a real user edit and NOT
+  // re-mark the store dirty (the sync fires synchronously inside view.dispatch).
+  const syncingRef = useRef(false);
+  const tab = store.tabs.value.find((t) => t.id === tabId) || null;
+  const buffer = tab ? tab.buffer : '';
+  const readOnly = tab ? tab.readOnly : false;
+
+  useEffect(() => {
+    const listener = EditorView.updateListener.of((u) => {
+      if (u.docChanged && !syncingRef.current) {
+        store.patchTab(tabId, { buffer: u.state.doc.toString(), dirty: true });
+      }
+    });
+    const extensions = [
+      basicSetup,
+      json(),
+      ...(onFollowLink ? [rossumLinks(onFollowLink, onContextLink)] : []),
+      rossumNames(resolver.nameFor, resolver.ensure),
+      listener,
+      EditorView.editable.of(!readOnly),
+    ];
+    extensions.push(isDark() ? darkHL : lightHL, surfaceTheme);
+    const view = new EditorView({
+      state: EditorState.create({ doc: buffer, extensions }),
+      parent: parentRef.current,
+    });
+    viewRef.current = view;
+    store.views.active = view;
+    return () => {
+      view.destroy();
+      store.views.active = null;
+    };
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, []);
+
+  // Reflect EXTERNAL buffer writes (load/save) back into the editor, without
+  // tripping the dirty flag (guarded by syncingRef).
+  useEffect(() => {
+    const view = viewRef.current;
+    if (!view) return;
+    const cur = view.state.doc.toString();
+    if (buffer !== cur) {
+      syncingRef.current = true;
+      try {
+        view.dispatch({ changes: { from: 0, to: cur.length, insert: buffer } });
+      } finally {
+        syncingRef.current = false;
+      }
+    }
+  }, [buffer]);
+
+  let parseError = null;
+  try { JSON.parse(buffer); } catch (e) { parseError = e.message; }
+
+  return (
+    <div class="rawjson-raw">
+      <div class="rawjson-cm" ref={parentRef}></div>
+      {parseError ? <div class="rawjson-parse-error">Invalid JSON: {parseError}</div> : null}
+    </div>
+  );
+}