libretto 0.5.0 → 0.5.2

package/src/shared/visualization/highlight.ts

@@ -1,19 +1,19 @@
 import type { Page } from "playwright";
 
 export type HighlightOptions = {
-	color?: string;
-	zIndex?: number;
+  color?: string;
+  zIndex?: number;
 };
 
 const HIGHLIGHT_DEFAULTS = {
-	color: "rgba(59, 130, 246, 0.25)",
-	zIndex: 2147483645,
+  color: "rgba(59, 130, 246, 0.25)",
+  zIndex: 2147483645,
 };
 
 const LAYER_ID = "__libretto_highlight_layer__";
 
 function buildHighlightInitScript(opts: { zIndex: number }): string {
-	return `
+  return `
 (function() {
 	if (document.getElementById("${LAYER_ID}")) return;
 	var el = document.createElement("div");
@@ -27,59 +27,59 @@ function buildHighlightInitScript(opts: { zIndex: number }): string {
 const installedPages = new WeakSet<Page>();
 
 export async function ensureHighlightLayer(
-	page: Page,
-	options?: HighlightOptions,
+  page: Page,
+  options?: HighlightOptions,
 ): Promise<void> {
-	const existingOpts = (page as any).__librettoHighlightOpts as
-		| { color: string; zIndex: number }
-		| undefined;
-	const zIndex =
-		options?.zIndex ?? existingOpts?.zIndex ?? HIGHLIGHT_DEFAULTS.zIndex;
-	const initScript = buildHighlightInitScript({ zIndex });
-
-	if (!installedPages.has(page)) {
-		installedPages.add(page);
-		await page.addInitScript({ content: initScript });
-	}
-
-	// Store/refresh options for later.
-	(page as any).__librettoHighlightOpts = {
-		color: options?.color ?? existingOpts?.color ?? HIGHLIGHT_DEFAULTS.color,
-		zIndex,
-	};
-
-	// Re-run in-page installer so overlays recover after page.setContent() or DOM resets.
-	try {
-		await page.evaluate(new Function(initScript) as () => void);
-	} catch {
-		// Page may not be ready
-	}
+  const existingOpts = (page as any).__librettoHighlightOpts as
+    | { color: string; zIndex: number }
+    | undefined;
+  const zIndex =
+    options?.zIndex ?? existingOpts?.zIndex ?? HIGHLIGHT_DEFAULTS.zIndex;
+  const initScript = buildHighlightInitScript({ zIndex });
+
+  if (!installedPages.has(page)) {
+    installedPages.add(page);
+    await page.addInitScript({ content: initScript });
+  }
+
+  // Store/refresh options for later.
+  (page as any).__librettoHighlightOpts = {
+    color: options?.color ?? existingOpts?.color ?? HIGHLIGHT_DEFAULTS.color,
+    zIndex,
+  };
+
+  // Re-run in-page installer so overlays recover after page.setContent() or DOM resets.
+  try {
+    await page.evaluate(new Function(initScript) as () => void);
+  } catch {
+    // Page may not be ready
+  }
 }
 
 export type ShowHighlightParams = {
-	box: { x: number; y: number; width: number; height: number };
-	label?: string;
-	color?: string;
-	durationMs?: number;
+  box: { x: number; y: number; width: number; height: number };
+  label?: string;
+  color?: string;
+  durationMs?: number;
 };
 
 export async function showHighlight(
-	page: Page,
-	params: ShowHighlightParams,
+  page: Page,
+  params: ShowHighlightParams,
 ): Promise<void> {
-	const opts = (page as any).__librettoHighlightOpts ?? HIGHLIGHT_DEFAULTS;
-	const color = params.color ?? opts.color;
-	const durationMs = params.durationMs ?? 350;
-
-	try {
-		await page.evaluate(
-			({ layerId, box, color, label, durationMs }) => {
-				const layer = document.getElementById(layerId);
-				if (!layer) return;
-
-				const rect = document.createElement("div");
-				rect.className = "__libretto_highlight_rect__";
-				rect.style.cssText = `
+  const opts = (page as any).__librettoHighlightOpts ?? HIGHLIGHT_DEFAULTS;
+  const color = params.color ?? opts.color;
+  const durationMs = params.durationMs ?? 350;
+
+  try {
+    await page.evaluate(
+      ({ layerId, box, color, label, durationMs }) => {
+        const layer = document.getElementById(layerId);
+        if (!layer) return;
+
+        const rect = document.createElement("div");
+        rect.className = "__libretto_highlight_rect__";
+        rect.style.cssText = `
 					position:absolute;
 					left:${box.x}px;
 					top:${box.y}px;
@@ -93,10 +93,10 @@ export async function showHighlight(
 					opacity:1;
 				`;
 
-				if (label) {
-					const labelEl = document.createElement("div");
-					labelEl.textContent = label;
-					labelEl.style.cssText = `
+        if (label) {
+          const labelEl = document.createElement("div");
+          labelEl.textContent = label;
+          labelEl.style.cssText = `
 						position:absolute;
 						top:-22px;
 						left:0;
@@ -108,39 +108,42 @@ export async function showHighlight(
 						white-space:nowrap;
 						pointer-events:none;
 					`;
-					rect.appendChild(labelEl);
-				}
-
-				layer.appendChild(rect);
-
-				// Auto-fade after duration
-				setTimeout(() => {
-					rect.style.opacity = "0";
-					setTimeout(() => rect.remove(), 250);
-				}, durationMs);
-			},
-			{
-				layerId: LAYER_ID,
-				box: params.box,
-				color,
-				label: params.label,
-				durationMs,
-			},
-		);
-	} catch {
-		// Best-effort
-	}
+          rect.appendChild(labelEl);
+        }
+
+        layer.appendChild(rect);
+
+        // Auto-fade after duration
+        setTimeout(() => {
+          rect.style.opacity = "0";
+          setTimeout(() => rect.remove(), 250);
+        }, durationMs);
+      },
+      {
+        layerId: LAYER_ID,
+        box: params.box,
+        color,
+        label: params.label,
+        durationMs,
+      },
+    );
+  } catch {
+    // Best-effort
+  }
 }
 
 export async function clearHighlights(page: Page): Promise<void> {
-	try {
-		await page.evaluate(({ layerId }) => {
-			const layer = document.getElementById(layerId);
-			if (!layer) return;
-			const rects = layer.querySelectorAll(".__libretto_highlight_rect__");
-			rects.forEach((r) => r.remove());
-		}, { layerId: LAYER_ID });
-	} catch {
-		// Best-effort
-	}
+  try {
+    await page.evaluate(
+      ({ layerId }) => {
+        const layer = document.getElementById(layerId);
+        if (!layer) return;
+        const rects = layer.querySelectorAll(".__libretto_highlight_rect__");
+        rects.forEach((r) => r.remove());
+      },
+      { layerId: LAYER_ID },
+    );
+  } catch {
+    // Best-effort
+  }
 }

package/src/shared/visualization/index.ts

@@ -1,18 +1,18 @@
 export {
-	ensureGhostCursor,
-	moveGhostCursor,
-	moveGhostCursorWithDistance,
-	ghostClick,
-	hideGhostCursor,
-	getGhostCursorPosition,
-	type GhostCursorOptions,
-	type GhostCursorStyle,
+  ensureGhostCursor,
+  moveGhostCursor,
+  moveGhostCursorWithDistance,
+  ghostClick,
+  hideGhostCursor,
+  getGhostCursorPosition,
+  type GhostCursorOptions,
+  type GhostCursorStyle,
 } from "./ghost-cursor.js";
 
 export {
-	ensureHighlightLayer,
-	showHighlight,
-	clearHighlights,
-	type HighlightOptions,
-	type ShowHighlightParams,
+  ensureHighlightLayer,
+  showHighlight,
+  clearHighlights,
+  type HighlightOptions,
+  type ShowHighlightParams,
 } from "./highlight.js";

package/src/shared/workflow/workflow.ts

@@ -3,40 +3,34 @@ import type { MinimalLogger } from "../logger/logger.js";
 
 export const LIBRETTO_WORKFLOW_BRAND = Symbol.for("libretto.workflow");
 
-export type LibrettoWorkflowMetadata = {};
-
 export type LibrettoWorkflowContext<S = {}> = {
-	page: Page;
-	logger: MinimalLogger;
-	services: S;
+  session: string;
+  page: Page;
+  logger: MinimalLogger;
+  services: S;
 };
 
-export type LibrettoWorkflowHandler<Input = unknown, Output = unknown, S = {}> = (
-	ctx: LibrettoWorkflowContext<S>,
-	input: Input,
-) => Promise<Output>;
+export type LibrettoWorkflowHandler<
+  Input = unknown,
+  Output = unknown,
+  S = {},
+> = (ctx: LibrettoWorkflowContext<S>, input: Input) => Promise<Output>;
 
 export class LibrettoWorkflow<Input = unknown, Output = unknown, S = {}> {
-	public readonly [LIBRETTO_WORKFLOW_BRAND] = true;
-	public readonly metadata: LibrettoWorkflowMetadata;
-	private readonly handler: LibrettoWorkflowHandler<Input, Output, S>;
+  public readonly [LIBRETTO_WORKFLOW_BRAND] = true;
+  private readonly handler: LibrettoWorkflowHandler<Input, Output, S>;
 
-	constructor(
-		metadata: LibrettoWorkflowMetadata,
-		handler: LibrettoWorkflowHandler<Input, Output, S>,
-	) {
-		this.metadata = metadata;
-		this.handler = handler;
-	}
+  constructor(handler: LibrettoWorkflowHandler<Input, Output, S>) {
+    this.handler = handler;
+  }
 
-	async run(ctx: LibrettoWorkflowContext<S>, input: Input): Promise<Output> {
-		return this.handler(ctx, input);
-	}
+  async run(ctx: LibrettoWorkflowContext<S>, input: Input): Promise<Output> {
+    return this.handler(ctx, input);
+  }
 }
 
 export function workflow<Input = unknown, Output = unknown, S = {}>(
-	metadata: LibrettoWorkflowMetadata,
-	handler: LibrettoWorkflowHandler<Input, Output, S>,
+  handler: LibrettoWorkflowHandler<Input, Output, S>,
 ): LibrettoWorkflow<Input, Output, S> {
-	return new LibrettoWorkflow(metadata, handler);
+  return new LibrettoWorkflow(handler);
 }

package/skills/libretto/references/reverse-engineering-network-requests.md

@@ -1,39 +0,0 @@
-# Reverse Engineering Network Requests
-
-Use this reference when the user wants to turn a browser workflow into direct network requests.
-
-This is the default approach for new integrations when the site exposes a clear and stable HTTP request path.
-
-## When to Use This
-
-- The page clearly loads or submits data through HTTP requests.
-- The user can perform the workflow manually in a headed browser.
-- Replaying the request is likely faster or more stable than reproducing every UI action.
-- Fall back to browser automation when the request path is unclear, too dynamic, or blocked by anti-bot systems.
-
-## Workflow
-
-- Open the page in headed mode.
-- Let the user perform the relevant workflow manually.
-- Read the network log after the relevant step.
-- Identify the smallest set of requests that actually carries the data or performs the action.
-- Confirm with the user before replaying any request that could mutate data.
-- Recreate the request in code outside Libretto.
-- Verify the resulting workflow with `npx libretto run ...`.
-
-## Commands
-
-```bash
-npx libretto open https://target.example.com --headed
-npx libretto network --last 20
-npx libretto network --method POST --last 20
-npx libretto network --filter 'referral|patient|search'
-npx libretto exec "return await networkLog({ method: 'POST', last: 10 })"
-```
-
-## Notes
-
-- Start with the request that returns the data you need, not every request on the page.
-- Prefer captured requests over guessing payload shape.
-- If the request format is opaque, highly dynamic, or heavily defended, fall back to UI automation for that part.
-- Treat all replayed requests as potentially side-effectful until proven otherwise.

package/skills/libretto/references/user-action-log.md

@@ -1,31 +0,0 @@
-# User Action Log
-
-Use this reference when the user performs steps manually in a headed Libretto session and you want to incorporate those steps into a workflow.
-
-## When to Use This
-
-- The user demonstrates the workflow in the browser window.
-- You want to know what they clicked, typed, or selected.
-- You need to reconcile manual user actions with captured network requests.
-
-## Workflow
-
-- Open the session in headed mode.
-- Ask the user to perform the workflow.
-- Read the user action log after they finish.
-- Use the log to identify the important transitions in the workflow.
-- Combine the action log with `snapshot` or `network` when the log alone is not enough.
-
-## Commands
-
-```bash
-npx libretto actions --source user --last 20
-npx libretto actions --source user --filter 'button|input|select'
-npx libretto exec "return await actionLog({ source: 'user', last: 10 })"
-```
-
-## Notes
-
-- The action log is most useful for reconstructing the sequence of a workflow, not for discovering every selector you need.
-- If the user performed relevant manual steps, read the action log before writing or revising the workflow code.
-- Use the action log to anchor your understanding, then inspect the current page state with `snapshot` or `exec`.