jev-devtools 0.5.0 → 0.5.2

package/lib/src/inspector.css

@@ -64,6 +64,21 @@
   padding: 8px;
   width: 100%;
 }
+.jev-devtools select {
+  appearance: none;
+  padding-right: 34px;
+  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16' fill='none'%3E%3Cpath d='m4 6 4 4 4-4' stroke='%23bcadbf' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
+  background-repeat: no-repeat;
+  background-position: right 10px center;
+  background-size: 16px 16px;
+}
+@media (forced-colors: active) {
+  .jev-devtools select {
+    /* Let the system draw a visible arrow in high-contrast themes. */
+    appearance: auto;
+    background-image: none;
+  }
+}
 .jev-devtools button:hover:not(:disabled) {
   border-color: #e551ba;
 }
@@ -149,13 +164,17 @@
   min-width: 0;
 }
 .jev-devtools .list-filters select {
-  width: 86px;
+  width: 100px;
+  flex-shrink: 0;
   font-size: 11px;
 }
 .jev-devtools .request-items {
   overflow: auto;
   flex: 1;
 }
+.jev-devtools .request-navigation {
+  display: none;
+}
 .jev-devtools .request-row {
   display: flex;
   align-items: center;
@@ -495,6 +514,63 @@
     min-width: 240px;
     padding: 8px 12px;
   }
+  /* Requests use separate list/detail screens so history cannot collapse into
+     the fixed-height strip used by flow runs. CSS keeps desktop split panes. */
+  .jev-devtools .jev-inspector[data-mobile-view="list"] > .request-list {
+    flex: 1;
+  }
+  .jev-devtools .jev-inspector[data-mobile-view="list"] > .request-detail,
+  .jev-devtools .jev-inspector[data-mobile-view="detail"] .list-filters,
+  .jev-devtools .jev-inspector[data-mobile-view="detail"] .request-items {
+    display: none;
+  }
+  .jev-devtools .jev-inspector[data-mobile-view="detail"] > .request-list {
+    flex: none;
+  }
+  .jev-devtools .jev-inspector[data-mobile-view="detail"] .request-navigation {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    min-height: 44px;
+    margin: 6px 12px;
+    text-align: left;
+  }
+  .jev-devtools .jev-inspector[data-mobile-view] .request-items {
+    flex-direction: column;
+  }
+  .jev-devtools .jev-inspector[data-mobile-view] .request-row {
+    flex: none;
+    min-width: 0;
+    min-height: 60px;
+    padding: 12px;
+  }
+  .jev-devtools
+    .jev-inspector[data-mobile-view]
+    .request-row
+    > span:nth-child(2) {
+    min-width: 0;
+    overflow-wrap: anywhere;
+  }
+  .jev-devtools .jev-inspector[data-mobile-view] > .request-detail {
+    overflow: auto;
+  }
+  .jev-devtools
+    .jev-inspector[data-mobile-view]
+    > .request-detail
+    > :is(.detail-header, .detail-meta, .detail-tabs) {
+    flex: none;
+  }
+  .jev-devtools
+    .jev-inspector[data-mobile-view]
+    > .request-detail
+    > .detail-body-flow {
+    /* Let metadata scroll above the diagram instead of clipping its toolbar. */
+    flex: 1 0 auto;
+    min-height: min-content;
+  }
+  .jev-devtools .flow-details-bar > span {
+    display: none;
+  }
   .jev-devtools .detail-header {
     padding: 12px;
   }
@@ -503,6 +579,10 @@
     padding-left: 12px;
     padding-right: 12px;
   }
+  .jev-devtools .detail-tabs {
+    overflow-x: auto;
+    flex-shrink: 0;
+  }
   .jev-devtools .detail-body {
     padding: 12px;
   }
@@ -668,14 +748,16 @@
   padding: 12px 16px;
   flex-wrap: wrap;
 }
-.jev-devtools .lab-flow-toolbar label {
+.jev-devtools .lab-flow-toolbar label,
+.jev-devtools .flow-step-select {
   display: flex;
   gap: 10px;
   align-items: center;
   font-size: 11px;
   min-width: 0;
 }
-.jev-devtools .lab-flow-toolbar select {
+.jev-devtools .lab-flow-toolbar select,
+.jev-devtools .flow-step-select select {
   width: auto;
   max-width: 240px;
   font-size: 11px;
@@ -685,10 +767,12 @@
   gap: 8px;
   align-items: center;
 }
-.jev-devtools .lab-flow-toolbar button {
+.jev-devtools .lab-flow-toolbar button,
+.jev-devtools .flow-canvas-controls button {
   font-size: 11px;
 }
-.jev-devtools .lab-flow-toolbar output {
+.jev-devtools .lab-flow-toolbar output,
+.jev-devtools .flow-canvas-controls output {
   font-size: 11px;
   min-width: 35px;
   text-align: center;
@@ -722,10 +806,9 @@
   flex-shrink: 0;
   padding: 8px 16px;
   margin: 0;
-}
-.jev-devtools .lab-gesture-hint {
-  display: block;
   color: #c6a7bd;
+  font-size: 11px;
+  line-height: 1.6;
 }
 .jev-devtools .lab-flow-canvas {
   position: absolute;
@@ -1144,14 +1227,20 @@
   min-width: 0;
   overflow: hidden;
 }
-:where(.jev-devtools) .whole-flow > .detail-header,
-:where(.jev-devtools) .whole-flow > .lab-flow-toolbar {
+:where(.jev-devtools)
+  .flow-overview-stack:not(.flow-inline-overview)
+  > .whole-flow {
+  /* Short drawers must scroll metadata instead of clipping the canvas controls. */
+  overflow: auto;
+}
+:where(.jev-devtools) .whole-flow > .detail-header {
+  flex-wrap: wrap;
   flex-shrink: 0;
 }
 :where(.jev-devtools) .flow-workspace {
   display: flex;
   flex-direction: column;
-  flex: 1;
+  flex: 1 0 auto;
   min-height: 0;
   overflow: hidden;
 }
@@ -1207,8 +1296,11 @@
   outline-offset: -1px;
 }
 :where(.jev-devtools) .flow-overview-viewport {
+  background-color: #08060a;
   position: relative;
-  min-height: 0;
+  /* The panel's grid row reserves its actual height, including wrapped buttons. */
+  display: grid;
+  min-height: min-content;
   flex: 1 1 0;
   overflow: hidden;
   touch-action: none;
@@ -1220,11 +1312,31 @@
   );
   background-size: 20px 20px;
 }
+.jev-devtools .flow-canvas-controls {
+  align-self: start;
+  justify-self: end;
+  margin: 12px;
+  z-index: 1;
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  gap: 8px;
+  max-width: calc(100% - 24px);
+  padding: 8px;
+  border: 1px solid #3b303d;
+  border-radius: 10px;
+  background: #17121b;
+  box-shadow: 0 4px 16px #0006;
+  cursor: default;
+}
 :where(.jev-devtools) .flow-overview-viewport[data-panning] {
   cursor: grabbing;
 }
 :where(.jev-devtools) .flow-overview-canvas {
   position: absolute;
+  /* Keep camera coordinates at the viewport origin when the overlay uses grid. */
+  top: 0;
+  left: 0;
   transform-origin: 0 0;
 }
 :where(.jev-devtools) .flow-connections {
@@ -1658,14 +1770,22 @@
   margin-bottom: 5px;
 }
 :where(.jev-devtools) .flow-condition-rule code {
-  display: block;
   white-space: pre-wrap;
-  overflow-wrap: anywhere;
   font:
     12px/1.6 ui-monospace,
     monospace;
   color: #f2d7eb;
 }
+/* Bound card previews so long captured literals cannot push warnings off-canvas.
+   The complete captured rule remains available in selected-step details. */
+:where(.jev-devtools) .flow-condition-rule code,
+:where(.jev-devtools) .flow-map-progress > code {
+  display: -webkit-box;
+  -webkit-box-orient: vertical;
+  -webkit-line-clamp: 4;
+  overflow: hidden;
+  overflow-wrap: anywhere;
+}
 
 :where(.jev-devtools) .flow-condition-incoming {
   display: block;
@@ -1870,15 +1990,32 @@
   right: -76px;
 }
 .jev-devtools .flow-run-summary {
+  max-width: 100%;
+  margin-left: auto;
   text-align: right;
 }
+.jev-devtools .flow-run-controls {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  justify-content: flex-end;
+  gap: 10px;
+  margin-top: 6px;
+}
+.jev-devtools .flow-run-controls .flow-step-select {
+  max-width: 100%;
+}
+.jev-devtools .flow-step-select select {
+  min-width: 0;
+}
 .jev-devtools .flow-fixture-button {
-  display: block;
-  margin: 6px 0 0 auto;
+  flex-shrink: 0;
   /* Keep the header still when the shorter confirmation replaces the label. */
   min-width: 96px;
   font-size: 11px;
-  transition: background-color 160ms ease, border-color 160ms ease;
+  transition:
+    background-color 160ms ease,
+    border-color 160ms ease;
 }
 .jev-devtools .flow-fixture-button[data-copied] {
   border-color: #e551ba;

package/lib/src/useDiagramViewport.js

@@ -96,7 +96,7 @@ export function useDiagramViewport(width, height, scene, origin = { x: 0, y: 0 }
         const down = (event) => {
             if (event.button !== 0 ||
                 pointers.size >= 2 ||
-                event.target.closest("button, input, select, textarea, a, summary, [data-diagram-scroll]"))
+                event.target.closest("button, input, select, textarea, a, summary, [data-diagram-scroll], [data-diagram-controls]"))
                 return;
             event.preventDefault();
             el.focus({ preventScroll: true });

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "jev-devtools",
-  "version": "0.5.0",
+  "version": "0.5.2",
   "type": "module",
   "engines": {
     "node": ">=22.12"

package/skills/setup-jev-devtools/SKILL.md

@@ -17,16 +17,30 @@ Inspect the app's package manager/lockfile, React and Node versions, root compon
 - **React with a Node backend, including Vite:** read [references/react-node.md](references/react-node.md). A browser-only app needs a Node server for Jev; the Vite development-server option is local only.
 - **Other Node frameworks:** use the Web Request/Response or middleware API described in the React/Node reference and verify that framework's routing. Do not assume the Next.js recipe applies to Pages Router. Edge runtimes and cross-process/serverless history aggregation are unsupported.
 
-Install `jev-devtools` using the app's existing package manager (npm: `npm install jev-devtools @typesafe-ai/sdk`; pnpm: `pnpm add jev-devtools @typesafe-ai/sdk`; Yarn: `yarn add jev-devtools @typesafe-ai/sdk`; Bun: `bun add jev-devtools @typesafe-ai/sdk`). `@typesafe-ai/sdk` is a peer dependency: keep the app's existing SDK version when it satisfies the peer range. Install in the workspace(s) that actually import it. It is a regular dependency when application modules import it, even though capture/display are development-only. React 18/19 and Node 22.12+ are required. Do not replace the app's framework or upgrade unrelated dependencies to force compatibility.
+Install `jev-devtools` using the app's existing package manager (npm: `npm install jev-devtools @typesafe-ai/sdk`; pnpm: `pnpm add jev-devtools @typesafe-ai/sdk`; Yarn: `yarn add jev-devtools @typesafe-ai/sdk`; Bun: `bun add jev-devtools @typesafe-ai/sdk`). `@typesafe-ai/sdk` is a peer dependency: keep the app's existing SDK version when it satisfies the peer range. Install in the workspace(s) that actually import it. It is a regular dependency when application modules import it, even though capture/display are development-only. Do not replace the app's framework or upgrade unrelated dependencies to force compatibility.
+
+### Consumer compatibility (0.5.2)
+
+| Requirement       | Contract                                                                                                                              |
+| ----------------- | ------------------------------------------------------------------------------------------------------------------------------------- |
+| Node.js           | 22.12+ for the adapter and flow execution; Edge runtimes are unsupported.                                                             |
+| React / React DOM | Matching 18.x or 19.x versions; both remain required peers even for server-only installations.                                        |
+| TypeSafe SDK      | `>=0.7.0 <0.8.0`; verified with 0.7.0.                                                                                                |
+| TypeScript        | 5.4+ for the public declarations; verified with 5.4.5. The flow API uses built-in `NoInfer`, which 5.3.3 cannot resolve.              |
+| Modules           | ESM imports with export-aware `Bundler` or `NodeNext` resolution and a matching module setting. There is no CommonJS `require` entry. |
+
+Use React types matching the app's React major, Node types compatible with its runtime/compiler, and DOM types for Web `Request`/`Response` APIs. The packed declarations passed strict checks without `skipLibCheck` using TypeScript 5.4.5, SDK 0.7.0, React 19.3.1, `@types/react` 19.3.0, and `@types/node` 22.10.2. Frameworks and newer type packages can require a newer compiler; preserve compatible app dependencies rather than downgrading to this verification baseline.
+
+Import application APIs from `jev-devtools` (React and browser-safe capture helpers/types), or the Node-only `jev-devtools/server` and `jev-devtools/flow` entries. Internal paths and `jev-devtools/package.json` are not exported. Inspect the installed version through the package manager, and read declaration/skill files from disk rather than importing internal package paths. Always supply the browser `origin` to the server adapter, including when `enabled: false`.
 
 ## Optional connected flow API
 
-When asked to build or inspect connected calls, read [references/flows.md](references/flows.md) after the framework recipe. For 0.5.0 it covers requests, server function tasks, runtime request factories, parallel checks, terminal branches, returning conditionals, bounded collections, stateful loops, captured-answer replay, and fixture comparison. It includes sample verification, scope/execution rules, and privacy limits. For an older installation, use its bundled recipe and declarations rather than assuming these operations exist. Preserve existing application policies; do not convert unrelated calls just to install the drawer. Flow execution is server-only and continues even with the inspector disabled.
+When asked to build or inspect connected calls, read [references/flows.md](references/flows.md) after the framework recipe. For 0.5.2 it covers requests, server function tasks, runtime request factories, parallel checks, terminal branches, returning conditionals, bounded collections, stateful loops, captured-answer replay, and fixture comparison. It includes sample verification, scope/execution rules, and privacy limits. For an older installation, use its bundled recipe and declarations rather than assuming these operations exist. Preserve existing application policies; do not convert unrelated calls just to install the drawer. Flow execution is server-only and continues even with the inspector disabled.
 
 ## Integration invariants
 
 - Use only public imports: `jev-devtools` and server-only `jev-devtools/server` and `jev-devtools/flow`. No provider, TanStack DevTools shell, Tailwind, or shadcn setup is needed; TanStack Virtual is an internal dependency.
-- Mount `<JevDevtools />` once with an explicit development flag. The drawer injects its own stylesheet into a Shadow DOM host under `document.body`; do not add a `jev-devtools/styles.css` import during setup. The CSS export remains supported for existing integrations. Do not add global `section`/`main` padding overrides to repair the drawer. Keep document-level transforms/filters on an app wrapper rather than `html`/`body`, which can affect fixed overlays. Server capture must also be explicitly enabled for development; both default to off.
+- Mount `<JevDevtools />` once with an explicit development flag. The drawer injects its own stylesheet into a Shadow DOM host under `document.body`; no CSS import is needed. Do not add global `section`/`main` padding overrides to repair the drawer. Keep document-level transforms/filters on an app wrapper rather than `html`/`body`, which can affect fixed overlays. Server capture must also be explicitly enabled for development; both default to off.
 - Create a shared adapter; the inspector routes and application client must use it in the same Node realm/process. Replace existing `new TypeSafeClient(options)` construction with `inspector.createClient(options)` while preserving keys, transport options, retries, and call semantics. Keep existing `systemOne(...)` inputs and application behavior.
 - Browser and server `endpoint` paths must agree (default `/api/jev-devtools`). Route the base path and its subpaths. The server `origin` must exactly match the browser scheme, hostname, and port. A browser endpoint is a same-origin path, not an absolute backend URL.
 - Keep keys in server environment variables, never `VITE_*` or `NEXT_PUBLIC_*`. Use the host's environment loader and an ignored local env file. If a key is unavailable, complete setup and use the clearly labeled sample verification in [references/verify.md](references/verify.md); report that live inference remains unverified.