@oddsquad/vite-plugin-lit 0.4.0 → 0.6.0

package/CHANGELOG.md

@@ -3,6 +3,91 @@
 Notable changes per release. Versions before 0.3.0 predate this file; see the
 git history for those.
 
+## 0.6.0 — 2026-09-29
+
+A small release with one feature. The Lit timeline can now appear in Chrome
+DevTools' own Performance panel, so an update tick sits on the same time axis
+as the layout, paint and long tasks it caused.
+
+### Added
+
+- **Lit updates in Chrome's Performance panel.** Turn on **chrome performance
+  tracks** under Timeline in the Settings tab and a Chrome Performance
+  recording gets a Lit track group, with each update tick nested as
+  `<my-element> performUpdate` over its phases, next to layout, paint and
+  long tasks. It works without the Lit panel recording, and traces taken
+  through chrome-devtools-mcp include it.
+
+## 0.5.0 — 2026-09-29
+
+The timeline gets a second view: Tracks, one lane per layer on a shared time
+axis. The Settings tab now says where each value came from and flags overrides
+the config has since moved past. Timeline events can be linked to, a reloaded
+panel keeps what was recorded, and both the panel and the in-page overlay open
+source links in the editor you picked.
+
+### Added
+
+- **Tracks view for the timeline.** A List | Tracks switch in the Timeline
+  toolbar draws the recording as one horizontal lane per layer on a shared time
+  axis, so concurrency, gaps and rhythm are visible: which layers fire
+  together, how a click lines up with the update it caused. Overlapping spans
+  stack, so an update tick reads as `performUpdate` with its phases beneath it,
+  and marks never get narrower than 2px. Wheel zooms around the pointer, drag
+  pans, double-click fits the whole recording, and a fitted view follows the
+  live edge while recording. A chip strip picks which lanes to draw; it is a
+  view filter, not the capture toggle. Both views share one selection and one
+  detail pane.
+- **Where each setting came from.** Settings rows read like "Zed (env)",
+  "VS Code (default)" or "Cursor (option)". An overridden row names the
+  baseline it replaced and has its own reset. An unknown
+  `LIT_PLUGIN_SOURCE_OVERLAY_EDITOR` value now logs a warning and falls back to
+  the default.
+- **A hint when the config moved under an override.** An override remembers
+  the value it was made against. If that config value has since changed, the
+  row says "Config changed since you overrode this: was X, now Y", with Reset
+  (let the new config apply) and Keep (hide the hint, keep the override).
+- **Links to timeline events.** Selecting a row puts `#event=<id>` in the
+  hash; opening that link selects the span and scrolls it into view, in a live
+  session or an exported snapshot. An id the buffer no longer holds opens the
+  Timeline with nothing selected.
+- **Temporal values in the inspector** preview as their kind plus ISO form,
+  e.g. `Temporal.PlainDate(2026-09-29)`, instead of an empty object. This works
+  with native Temporal and with polyfills.
+- **The standalone `lit-devtools dev` server can be fed from a live page.** A
+  page calls `connectToDevServer()` (from `@oddsquad/vite-plugin-lit/connect.js`)
+  to send its tree, inspector and timeline traffic to the server's panel over
+  devframe RPC. `lit-devtools dev --no-auth` skips the one-time code. Pages not
+  served by Vite, and cross-origin pages, are not covered yet.
+
+### Changed
+
+- **The timeline's element and regex filters apply to Tracks too**, so
+  switching views mid-investigation no longer brings back everything you
+  filtered out. A filter that hides the selected mark keeps its detail pane
+  open, as the List always did.
+
+### Fixed
+
+- **A reloaded live panel keeps the recorded events.** Reloading or first
+  opening the panel mid-session used to show "No events recorded." while the
+  dev server still held them, and a cold `#event=` link could not resolve. The
+  panel now fills itself from the server's buffer when it connects, without
+  duplicates, and events you cleared stay cleared across a reload.
+- **Source links open in the editor you chose.** The editor picked through
+  `sourceOverlay.editor`, `LIT_PLUGIN_SOURCE_OVERLAY_EDITOR` or the Settings
+  tab only shaped the overlay's URL scheme; clicks from the panel and the
+  in-page overlay let launch-editor guess, so picking Cursor could open VS
+  Code. Both now pass the chosen editor (`vscode`, `cursor`, `zed`, `idea`).
+  Windsurf, custom editors and projects that never named one still
+  auto-detect.
+- **Exported snapshots contain the whole event buffer**, not the last 50
+  events, so every row in an export can be linked to.
+- **A linked timeline row scrolls into view on a cold open** instead of
+  leaving the list pinned to its newest row.
+- **The panel has a favicon**, so opening it in its own tab no longer logs a
+  404 for `/favicon.ico`.
+
 ## 0.4.0 — 2026-09-29
 
 A maintenance release. The timeline panel stays fast with a full buffer, the

package/README.md

@@ -118,11 +118,22 @@ The two differ in how the server is found, not in what it can do:
   discovery at all. Reach for it if registry discovery is unavailable — the
   plugin logs a warning saying so at startup, naming the reason.
 
-The CLI also has `lit-devtools dev`, a standalone devframe server with no page
-attached. It exists to prove the panel definition runs without Vite (a
-framework-neutrality harness, and the groundwork for non-Vite adapters); it
-cannot show a real component tree, so it is not a way to inspect an app
-without a dev server.
+The CLI also has `lit-devtools dev`, a standalone devframe server. Started on
+its own it shows an empty panel, because it has no page of its own. A page
+served by a Vite dev server that loads this plugin's runtime can point itself
+at it and feed it the live component tree, inspector and timeline:
+
+```ts
+import {connectToDevServer} from '@oddsquad/vite-plugin-lit/connect.js';
+
+await connectToDevServer('http://localhost:5180/');
+```
+
+The server asks for its one-time code unless you start it with `--no-auth`. What
+this does not do yet: put the runtime into a page that is not on a Vite dev
+server, and set up the cross-origin access and authentication a page on another
+origin needs. The dev server's `__connection.json` sends no CORS headers today,
+so from a different origin the connection is blocked by the browser.
 
 ## Playground
 

package/bin.mjs

@@ -31,8 +31,7 @@
  */
 
 import process from 'node:process';
-import {createLitDevframe} from './lib/devframe/definition.js';
-import {createNullSource} from './lib/devframe/source.js';
+import {createStandaloneLitDevframe} from './lib/devframe/rpc-source.js';
 import {PACKAGE_VERSION} from './lib/devframe/paths.js';
 
 /**
@@ -62,25 +61,30 @@ const main = async () => {
   const cli = cac('lit-devtools');
 
   cli
-    .command('dev', 'Start a standalone devframe dev server (no page attached)')
+    .command(
+      'dev',
+      'Start a standalone devframe dev server that pages connect to'
+    )
     .option('--port <port>', 'Port to listen on', {default: DEFAULT_DEV_PORT})
     .option('--host <host>', 'Host to bind to', {default: 'localhost'})
     .option('--open', 'Open the browser on start')
+    .option(
+      '--no-auth',
+      'Skip the one-time-code gate, so a page can connect without a token'
+    )
     .action(async (flags) => {
       const {createDevServer} = await import('devframe/adapters/dev');
-      // A standalone server has no Vite and no page, so the component tree
-      // is empty by construction. This command is a framework-neutrality
-      // harness for the definition, not a way to inspect a real app --
-      // for that, run your Vite dev server with DevTools enabled.
+      // A standalone server has no Vite, so it has no page of its own: the
+      // panel stays empty until a page dials in with `connectToDevServer()`
+      // (see `lib/runtime/rpc-transport.ts`), which carries the runtime's
+      // usual channels over devframe RPC. Injecting the runtime into a page
+      // that is not on a Vite dev server is not something this command does.
       await createDevServer(
-        createLitDevframe({
-          source: createNullSource(),
-          version: PACKAGE_VERSION,
-        }),
+        createStandaloneLitDevframe({version: PACKAGE_VERSION}),
         {
           host: flags.host,
           port: Number(flags.port),
-          flags: {open: Boolean(flags.open)},
+          flags: {open: Boolean(flags.open), auth: flags.auth},
         }
       );
     });

package/dist/client/assets/{browser-agent-rpc-BXhoSh1z-CdtPhBL-.js → browser-agent-rpc-BXhoSh1z-DXAVFObe.js}

@@ -1,4 +1,4 @@
-import { n as onBrowserAgentToolsChanged, r as nanoid, t as listBrowserAgentTools } from "./index-DVe6M4HV.js";
+import { n as onBrowserAgentToolsChanged, r as nanoid, t as listBrowserAgentTools } from "./index-DVr5EnyB.js";
 //#region node_modules/.pnpm/devframe@1.0.0_@devframes+agentic@1.0.0_cac@7.0.0_srvx@1.0.5/node_modules/devframe/dist/browser-agent-rpc-BXhoSh1z.mjs
 var CLIENT_ID_STORAGE_KEY = "devframe:client-id";
 var memoryClientId;
@@ -66,4 +66,4 @@ function setupBrowserAgentRpcBridge(rpc) {
 //#endregion
 export { setupBrowserAgentRpcBridge };
 
-//# sourceMappingURL=browser-agent-rpc-BXhoSh1z-CdtPhBL-.js.map
+//# sourceMappingURL=browser-agent-rpc-BXhoSh1z-DXAVFObe.js.map

package/dist/client/assets/{browser-agent-rpc-BXhoSh1z-CdtPhBL-.js.map → browser-agent-rpc-BXhoSh1z-DXAVFObe.js.map}

@@ -1 +1 @@
-{"version":3,"file":"browser-agent-rpc-BXhoSh1z-CdtPhBL-.js","names":[],"sources":["../../../node_modules/.pnpm/devframe@1.0.0_@devframes+agentic@1.0.0_cac@7.0.0_srvx@1.0.5/node_modules/devframe/dist/browser-agent-rpc-BXhoSh1z.mjs"],"sourcesContent":["import { nanoid } from \"./utils/nanoid.mjs\";\nimport { n as onBrowserAgentToolsChanged, t as listBrowserAgentTools } from \"./browser-agent-Pu-FLk6I.mjs\";\n//#region src/client/client-id.ts\nconst CLIENT_ID_STORAGE_KEY = \"devframe:client-id\";\nlet memoryClientId;\n/**\n* This browser tab's stable client id: one nanoid per tab, persisted in\n* `sessionStorage` so it survives page reloads and RPC reconnects. The node\n* side uses it to tell connected tabs apart across reconnects (see #394).\n*\n* Tab duplication copies `sessionStorage`, so two tabs can briefly share an id\n* until per-tab disambiguation lands with the wider tab-metadata work.\n*/\nfunction resolveClientId(win = globalThis.window) {\n\ttry {\n\t\tconst storage = win?.sessionStorage;\n\t\tif (storage) {\n\t\t\tlet id = storage.getItem(CLIENT_ID_STORAGE_KEY);\n\t\t\tif (!id) {\n\t\t\t\tid = nanoid();\n\t\t\t\tstorage.setItem(CLIENT_ID_STORAGE_KEY, id);\n\t\t\t}\n\t\t\treturn id;\n\t\t}\n\t} catch {}\n\tmemoryClientId ??= nanoid();\n\treturn memoryClientId;\n}\n//#endregion\n//#region src/client/browser-agent-rpc.ts\n/** Mirror this document's browser-agent registry over its existing RPC connection. */\nfunction setupBrowserAgentRpcBridge(rpc) {\n\trpc.client.register({\n\t\tname: \"devframe:agent:invoke-client-tool\",\n\t\ttype: \"action\",\n\t\tjsonSerializable: true,\n\t\thandler: async (id, args) => {\n\t\t\tconst tool = listBrowserAgentTools().find((tool) => tool.id === id);\n\t\t\tif (!tool) throw new Error(`[devframe/agent] browser tool \"${id}\" not found`);\n\t\t\treturn await tool.invoke(args);\n\t\t}\n\t});\n\tlet queued = false;\n\tlet disposed = false;\n\tlet lastSyncedCount = 0;\n\tconst sync = () => {\n\t\tif (queued || disposed) return;\n\t\tqueued = true;\n\t\tqueueMicrotask(async () => {\n\t\t\tqueued = false;\n\t\t\tif (disposed) return;\n\t\t\tconst manifests = listBrowserAgentTools().map(({ invoke: _, ...manifest }) => manifest);\n\t\t\tif (manifests.length === 0 && lastSyncedCount === 0) return;\n\t\t\tlastSyncedCount = manifests.length;\n\t\t\tawait rpc.callOptional(\"devframe:agent:sync-client-tools\", resolveClientId(), manifests).catch(() => {});\n\t\t});\n\t};\n\tconst stopTools = onBrowserAgentToolsChanged(sync);\n\tconst stopConnection = rpc.events.on(\"connection:status\", (status) => {\n\t\tif (status === \"connected\") sync();\n\t});\n\tsync();\n\treturn () => {\n\t\tdisposed = true;\n\t\tstopTools();\n\t\tstopConnection();\n\t};\n}\n//#endregion\nexport { setupBrowserAgentRpcBridge };\n"],"x_google_ignoreList":[0],"mappings":";;AAGA,IAAM,wBAAwB;AAC9B,IAAI;;;;;;;;;AASJ,SAAS,gBAAgB,MAAM,WAAW,QAAQ;CACjD,IAAI;EACH,MAAM,UAAU,KAAK;EACrB,IAAI,SAAS;GACZ,IAAI,KAAK,QAAQ,QAAQ,qBAAqB;GAC9C,IAAI,CAAC,IAAI;IACR,KAAK,OAAO;IACZ,QAAQ,QAAQ,uBAAuB,EAAE;GAC1C;GACA,OAAO;EACR;CACD,QAAQ,CAAC;CACT,mBAAmB,OAAO;CAC1B,OAAO;AACR;;AAIA,SAAS,2BAA2B,KAAK;CACxC,IAAI,OAAO,SAAS;EACnB,MAAM;EACN,MAAM;EACN,kBAAkB;EAClB,SAAS,OAAO,IAAI,SAAS;GAC5B,MAAM,OAAO,sBAAsB,CAAC,CAAC,MAAM,SAAS,KAAK,OAAO,EAAE;GAClE,IAAI,CAAC,MAAM,MAAM,IAAI,MAAM,kCAAkC,GAAG,YAAY;GAC5E,OAAO,MAAM,KAAK,OAAO,IAAI;EAC9B;CACD,CAAC;CACD,IAAI,SAAS;CACb,IAAI,WAAW;CACf,IAAI,kBAAkB;CACtB,MAAM,aAAa;EAClB,IAAI,UAAU,UAAU;EACxB,SAAS;EACT,eAAe,YAAY;GAC1B,SAAS;GACT,IAAI,UAAU;GACd,MAAM,YAAY,sBAAsB,CAAC,CAAC,KAAK,EAAE,QAAQ,GAAG,GAAG,eAAe,QAAQ;GACtF,IAAI,UAAU,WAAW,KAAK,oBAAoB,GAAG;GACrD,kBAAkB,UAAU;GAC5B,MAAM,IAAI,aAAa,oCAAoC,gBAAgB,GAAG,SAAS,CAAC,CAAC,YAAY,CAAC,CAAC;EACxG,CAAC;CACF;CACA,MAAM,YAAY,2BAA2B,IAAI;CACjD,MAAM,iBAAiB,IAAI,OAAO,GAAG,sBAAsB,WAAW;EACrE,IAAI,WAAW,aAAa,KAAK;CAClC,CAAC;CACD,KAAK;CACL,aAAa;EACZ,WAAW;EACX,UAAU;EACV,eAAe;CAChB;AACD"}
+{"version":3,"file":"browser-agent-rpc-BXhoSh1z-DXAVFObe.js","names":[],"sources":["../../../node_modules/.pnpm/devframe@1.0.0_@devframes+agentic@1.0.0_cac@7.0.0_srvx@1.0.5/node_modules/devframe/dist/browser-agent-rpc-BXhoSh1z.mjs"],"sourcesContent":["import { nanoid } from \"./utils/nanoid.mjs\";\nimport { n as onBrowserAgentToolsChanged, t as listBrowserAgentTools } from \"./browser-agent-Pu-FLk6I.mjs\";\n//#region src/client/client-id.ts\nconst CLIENT_ID_STORAGE_KEY = \"devframe:client-id\";\nlet memoryClientId;\n/**\n* This browser tab's stable client id: one nanoid per tab, persisted in\n* `sessionStorage` so it survives page reloads and RPC reconnects. The node\n* side uses it to tell connected tabs apart across reconnects (see #394).\n*\n* Tab duplication copies `sessionStorage`, so two tabs can briefly share an id\n* until per-tab disambiguation lands with the wider tab-metadata work.\n*/\nfunction resolveClientId(win = globalThis.window) {\n\ttry {\n\t\tconst storage = win?.sessionStorage;\n\t\tif (storage) {\n\t\t\tlet id = storage.getItem(CLIENT_ID_STORAGE_KEY);\n\t\t\tif (!id) {\n\t\t\t\tid = nanoid();\n\t\t\t\tstorage.setItem(CLIENT_ID_STORAGE_KEY, id);\n\t\t\t}\n\t\t\treturn id;\n\t\t}\n\t} catch {}\n\tmemoryClientId ??= nanoid();\n\treturn memoryClientId;\n}\n//#endregion\n//#region src/client/browser-agent-rpc.ts\n/** Mirror this document's browser-agent registry over its existing RPC connection. */\nfunction setupBrowserAgentRpcBridge(rpc) {\n\trpc.client.register({\n\t\tname: \"devframe:agent:invoke-client-tool\",\n\t\ttype: \"action\",\n\t\tjsonSerializable: true,\n\t\thandler: async (id, args) => {\n\t\t\tconst tool = listBrowserAgentTools().find((tool) => tool.id === id);\n\t\t\tif (!tool) throw new Error(`[devframe/agent] browser tool \"${id}\" not found`);\n\t\t\treturn await tool.invoke(args);\n\t\t}\n\t});\n\tlet queued = false;\n\tlet disposed = false;\n\tlet lastSyncedCount = 0;\n\tconst sync = () => {\n\t\tif (queued || disposed) return;\n\t\tqueued = true;\n\t\tqueueMicrotask(async () => {\n\t\t\tqueued = false;\n\t\t\tif (disposed) return;\n\t\t\tconst manifests = listBrowserAgentTools().map(({ invoke: _, ...manifest }) => manifest);\n\t\t\tif (manifests.length === 0 && lastSyncedCount === 0) return;\n\t\t\tlastSyncedCount = manifests.length;\n\t\t\tawait rpc.callOptional(\"devframe:agent:sync-client-tools\", resolveClientId(), manifests).catch(() => {});\n\t\t});\n\t};\n\tconst stopTools = onBrowserAgentToolsChanged(sync);\n\tconst stopConnection = rpc.events.on(\"connection:status\", (status) => {\n\t\tif (status === \"connected\") sync();\n\t});\n\tsync();\n\treturn () => {\n\t\tdisposed = true;\n\t\tstopTools();\n\t\tstopConnection();\n\t};\n}\n//#endregion\nexport { setupBrowserAgentRpcBridge };\n"],"x_google_ignoreList":[0],"mappings":";;AAGA,IAAM,wBAAwB;AAC9B,IAAI;;;;;;;;;AASJ,SAAS,gBAAgB,MAAM,WAAW,QAAQ;CACjD,IAAI;EACH,MAAM,UAAU,KAAK;EACrB,IAAI,SAAS;GACZ,IAAI,KAAK,QAAQ,QAAQ,qBAAqB;GAC9C,IAAI,CAAC,IAAI;IACR,KAAK,OAAO;IACZ,QAAQ,QAAQ,uBAAuB,EAAE;GAC1C;GACA,OAAO;EACR;CACD,QAAQ,CAAC;CACT,mBAAmB,OAAO;CAC1B,OAAO;AACR;;AAIA,SAAS,2BAA2B,KAAK;CACxC,IAAI,OAAO,SAAS;EACnB,MAAM;EACN,MAAM;EACN,kBAAkB;EAClB,SAAS,OAAO,IAAI,SAAS;GAC5B,MAAM,OAAO,sBAAsB,CAAC,CAAC,MAAM,SAAS,KAAK,OAAO,EAAE;GAClE,IAAI,CAAC,MAAM,MAAM,IAAI,MAAM,kCAAkC,GAAG,YAAY;GAC5E,OAAO,MAAM,KAAK,OAAO,IAAI;EAC9B;CACD,CAAC;CACD,IAAI,SAAS;CACb,IAAI,WAAW;CACf,IAAI,kBAAkB;CACtB,MAAM,aAAa;EAClB,IAAI,UAAU,UAAU;EACxB,SAAS;EACT,eAAe,YAAY;GAC1B,SAAS;GACT,IAAI,UAAU;GACd,MAAM,YAAY,sBAAsB,CAAC,CAAC,KAAK,EAAE,QAAQ,GAAG,GAAG,eAAe,QAAQ;GACtF,IAAI,UAAU,WAAW,KAAK,oBAAoB,GAAG;GACrD,kBAAkB,UAAU;GAC5B,MAAM,IAAI,aAAa,oCAAoC,gBAAgB,GAAG,SAAS,CAAC,CAAC,YAAY,CAAC,CAAC;EACxG,CAAC;CACF;CACA,MAAM,YAAY,2BAA2B,IAAI;CACjD,MAAM,iBAAiB,IAAI,OAAO,GAAG,sBAAsB,WAAW;EACrE,IAAI,WAAW,aAAa,KAAK;CAClC,CAAC;CACD,KAAK;CACL,aAAa;EACZ,WAAW;EACX,UAAU;EACV,eAAe;CAChB;AACD"}