playwright-locator-healer 0.1.3

package/dist/healing/overlay/dock.css.js

@@ -0,0 +1,448 @@
+export const DOCK_CSS = `
+:host { all: initial; }
+:host *, :host *::before, :host *::after { box-sizing: border-box; }
+
+/* ───────────────────────────────────────────────────────────────────────
+   Heal Dock — refined dark dev panel. Muted palette, single cyan accent,
+   readable for long sessions. Comfortable contrast, never strident.
+   Fixed 380×560, 4 sticky zones.
+   ─────────────────────────────────────────────────────────────────────── */
+
+:host {
+  /* Color tokens — VS Code-style slate-blue dark theme.
+     Background pulled off pure black to ease eye strain. */
+  --bg-base:        #1e293b;   /* slate-800 — main panel bg */
+  --bg-surface:     #293548;   /* head + footer */
+  --bg-elevated:    #334155;   /* slate-700 — buttons */
+  --bg-inset:       #172033;   /* code blocks, textarea */
+
+  --border-subtle:  #3b4456;
+  --border-medium:  #475569;   /* slate-600 */
+  --border-strong:  #64748b;   /* slate-500 */
+
+  --fg-primary:     #f1f5f9;   /* slate-100 — primary text */
+  --fg-secondary:   #cbd5e1;   /* slate-300 */
+  --fg-muted:       #94a3b8;   /* slate-400 */
+  --fg-faint:       #64748b;   /* slate-500 */
+
+  --accent:         #60a5fa;   /* blue-400 — VS Code-style blue */
+  --accent-dim:     #3b82f6;
+  --accent-bg:      rgba(96, 165, 250, 0.10);
+  --accent-border:  rgba(96, 165, 250, 0.32);
+
+  --success:        #86efac;   /* emerald-300 */
+  --success-bg:     rgba(134, 239, 172, 0.10);
+  --success-border: rgba(134, 239, 172, 0.30);
+
+  --warn:           #fde68a;   /* amber-200 — failing-line highlight */
+  --warn-bg:        rgba(253, 230, 138, 0.08);
+  --warn-border:    rgba(253, 230, 138, 0.36);
+
+  --danger:         #fca5a5;   /* rose-300 */
+  --danger-bg:      rgba(252, 165, 165, 0.10);
+  --danger-border:  rgba(252, 165, 165, 0.32);
+
+  --shadow-soft:    0 2px 4px rgba(15,23,42,0.3), 0 8px 24px rgba(15,23,42,0.4);
+  --shadow-card:    0 0 0 1px rgba(255,255,255,0.03), 0 4px 16px rgba(15,23,42,0.5);
+}
+
+.dock {
+  position: fixed; bottom: 16px; right: 16px;
+  width: 380px; height: 580px;
+  display: grid;
+  grid-template-rows: auto auto auto 1fr auto;
+  background: var(--bg-base);
+  border: 1px solid var(--border-subtle);
+  border-radius: 8px;
+  box-shadow: var(--shadow-soft);
+  font-family: "JetBrains Mono", "IBM Plex Mono", ui-monospace, Menlo, monospace;
+  color: var(--fg-primary);
+  z-index: 2147483647;
+  overflow: hidden;
+  font-feature-settings: "ss01","ss02","cv11";
+  font-variant-ligatures: contextual;
+}
+.dock.dragging { opacity: 0.94; }
+.dock.err { border-color: var(--danger-border); }
+
+/* ─── Zone 1 — status bar ─── */
+.statusbar {
+  display: flex; align-items: center; gap: 8px;
+  padding: 7px 14px; height: 28px;
+  background: var(--bg-inset);
+  border-bottom: 1px solid var(--border-subtle);
+  font-size: 10px; letter-spacing: .1em;
+  color: var(--fg-muted);
+  border-radius: 8px 8px 0 0;
+}
+.statusbar .sb-title {
+  color: var(--accent); font-weight: 600;
+  letter-spacing: .18em; text-transform: uppercase;
+}
+.statusbar .sb-sep { color: var(--fg-faint); }
+.statusbar .sb-state {
+  color: var(--fg-primary); font-weight: 500;
+  letter-spacing: .12em; text-transform: uppercase;
+}
+.statusbar .sb-cost { color: var(--accent); margin-left: auto; }
+.statusbar .sb-calls { color: var(--fg-secondary); }
+.statusbar #heal-elapsed { color: var(--warn); }
+.statusbar .sb-model {
+  color: var(--accent); font-size: 9px;
+  font-weight: 500; letter-spacing: .06em; text-transform: none;
+}
+.statusbar-day {
+  height: 22px;
+  background: rgba(96, 165, 250, 0.04);
+  border-bottom: 1px solid var(--border-subtle);
+  font-size: 9px; letter-spacing: .12em;
+  border-radius: 0;
+}
+.statusbar-day .sb-day-label {
+  color: var(--fg-muted); font-weight: 600; letter-spacing: .22em;
+}
+.statusbar-day .sb-cost { color: var(--accent); margin-left: 0; }
+
+/* ─── Zone 2 — head / drag handle ─── */
+.head {
+  display: flex; align-items: center; gap: 10px;
+  padding: 10px 14px; height: 42px;
+  background: var(--bg-surface);
+  border-bottom: 1px solid var(--border-subtle);
+  cursor: move; user-select: none;
+}
+.dot {
+  width: 8px; height: 8px;
+  background: var(--accent);
+  border-radius: 50%;
+  box-shadow: 0 0 6px rgba(96, 165, 250, 0.55);
+}
+.dock.err .dot {
+  background: var(--danger);
+  box-shadow: 0 0 6px rgba(252, 165, 165, 0.55);
+}
+.title {
+  font-weight: 600; font-size: 11px;
+  letter-spacing: .2em; text-transform: uppercase;
+  color: var(--fg-primary);
+}
+.stage {
+  margin-left: auto;
+  font-size: 10px; letter-spacing: .14em; text-transform: uppercase;
+  color: var(--fg-muted);
+  display: inline-flex; gap: 6px; align-items: center;
+}
+.stage b { color: var(--accent); font-weight: 600; }
+.drag-grip {
+  margin-left: 4px;
+  color: var(--fg-faint); font-size: 10px;
+  letter-spacing: 1px;
+}
+
+/* ─── Zone 3 — body (scrollable) ─── */
+.body {
+  padding: 14px;
+  overflow-y: auto; overflow-x: hidden;
+  display: grid; gap: 12px; align-content: start;
+  background: var(--bg-base);
+  scrollbar-width: thin;
+  scrollbar-color: var(--border-medium) transparent;
+}
+.body::-webkit-scrollbar { width: 6px; }
+.body::-webkit-scrollbar-track { background: transparent; }
+.body::-webkit-scrollbar-thumb {
+  background: var(--border-medium);
+  border-radius: 3px;
+}
+.body::-webkit-scrollbar-thumb:hover { background: var(--border-strong); }
+
+/* ─── Zone 4 — footer (sticky actions) ─── */
+.footer {
+  display: flex; gap: 8px; flex-wrap: wrap;
+  padding: 12px 14px;
+  background: var(--bg-surface);
+  border-top: 1px solid var(--border-subtle);
+  border-radius: 0 0 8px 8px;
+}
+
+/* ─── Rows / labels / values ─── */
+.row { display: grid; gap: 6px; }
+.label {
+  font-size: 9px; letter-spacing: .22em; text-transform: uppercase;
+  color: var(--fg-muted); font-weight: 600;
+}
+.value {
+  font-size: 12px; line-height: 1.55;
+  color: var(--fg-primary); word-break: break-all;
+}
+.value.code {
+  background: var(--bg-inset);
+  border: 1px solid var(--border-subtle);
+  border-radius: 4px;
+  padding: 8px 10px;
+  font-size: 12px; line-height: 1.5;
+  color: var(--fg-primary);
+}
+.value.code .ok { color: var(--success); }
+.value.code .bad { color: var(--danger); }
+.value.code.dim { opacity: 0.6; font-size: 11px; }
+.value.code.code-block {
+  margin: 0;
+  white-space: pre-wrap;
+  word-break: break-word;
+  color: var(--accent);
+  border-left: 2px solid var(--accent);
+  background: var(--bg-inset);
+  font-weight: 500;
+  line-height: 1.6;
+}
+
+/* ─── Failed-line block (only pick + intent) ─── */
+.failed-line {
+  display: grid; gap: 10px;
+  padding: 12px;
+  background: var(--bg-surface);
+  border: 1px solid var(--border-subtle);
+  border-left: 2px solid var(--accent);
+  border-radius: 4px;
+}
+.fl-head {
+  display: flex; align-items: center; gap: 8px;
+  font-size: 9px; letter-spacing: .22em; text-transform: uppercase;
+}
+.fl-tag {
+  color: var(--accent); font-weight: 700;
+  border: 1px solid var(--accent-border);
+  background: var(--accent-bg);
+  padding: 2px 6px;
+  border-radius: 3px;
+}
+.fl-loc {
+  color: var(--fg-muted); font-family: inherit;
+  text-transform: none; letter-spacing: 0; font-size: 10px;
+  margin-left: auto; word-break: break-all; text-align: right;
+  font-weight: 400;
+}
+.fl-code {
+  font-family: inherit; font-size: 12px; font-weight: 500;
+  color: var(--warn);
+  background: var(--warn-bg);
+  border-left: 2px solid var(--warn-border);
+  padding: 8px 10px; line-height: 1.55;
+  border-radius: 0 3px 3px 0;
+  white-space: pre-wrap; word-break: break-word;
+}
+.fl-meta { display: grid; gap: 6px; }
+.fl-meta-row {
+  display: flex; align-items: baseline; gap: 10px;
+  flex-wrap: wrap; font-size: 11px;
+}
+.fl-meta-label {
+  font-size: 9px; letter-spacing: .22em; text-transform: uppercase;
+  color: var(--fg-muted); font-weight: 600;
+  min-width: 60px;
+}
+.fl-mono {
+  font-family: inherit; font-size: 11px;
+  color: var(--danger);
+  background: var(--danger-bg);
+  padding: 2px 6px;
+  border-radius: 3px;
+  word-break: break-all;
+}
+.fl-desc {
+  font-size: 11px;
+  color: var(--fg-primary);
+}
+
+/* ─── Intent textarea ─── */
+textarea.intent {
+  width: 100%; min-height: 100px; resize: vertical;
+  background: var(--bg-inset);
+  border: 1px solid var(--border-subtle);
+  border-left: 2px solid var(--accent);
+  border-radius: 4px;
+  color: var(--fg-primary);
+  font-family: inherit; font-size: 12px; line-height: 1.6;
+  padding: 10px 12px;
+  outline: none; caret-color: var(--accent);
+  transition: border-color 120ms ease, background 120ms ease;
+}
+textarea.intent::placeholder { color: var(--fg-faint); }
+textarea.intent:focus {
+  border-color: var(--accent);
+  background: var(--bg-elevated);
+}
+
+/* ─── CTA / hints ─── */
+.cta {
+  border: 1px dashed var(--border-medium);
+  padding: 18px 12px; text-align: center;
+  font-size: 11px; letter-spacing: .18em; text-transform: uppercase;
+  color: var(--accent); font-weight: 600;
+  background: var(--accent-bg);
+  border-radius: 4px;
+}
+.hint {
+  font-size: 10px; color: var(--fg-muted); line-height: 1.55;
+}
+
+/* ─── Keys / buttons ─── */
+.key, button.key {
+  display: inline-flex; align-items: center; gap: 7px;
+  font-family: inherit; font-size: 10px;
+  letter-spacing: .14em; text-transform: uppercase;
+  color: var(--fg-secondary);
+  background: var(--bg-elevated);
+  border: 1px solid var(--border-subtle);
+  border-radius: 4px;
+  padding: 7px 11px;
+  cursor: pointer;
+  transition: all 120ms ease;
+  font-weight: 500;
+}
+button.key:hover {
+  color: var(--fg-primary);
+  border-color: var(--border-strong);
+  background: var(--bg-surface);
+}
+button.key:active { transform: translateY(0.5px); }
+button.key:focus { outline: none; }
+button.key:focus-visible {
+  outline: 1px solid var(--accent);
+  outline-offset: 2px;
+}
+
+button.key.accept {
+  color: var(--success);
+  border-color: var(--success-border);
+}
+button.key.accept:hover {
+  background: var(--success-bg);
+  border-color: var(--success);
+  color: var(--fg-primary);
+}
+button.key.accept .kbd {
+  color: var(--bg-base); background: var(--success);
+  border-color: var(--success);
+  font-weight: 700;
+}
+
+button.key.reject {
+  color: var(--danger);
+  border-color: var(--danger-border);
+}
+button.key.reject:hover {
+  background: var(--danger-bg);
+  border-color: var(--danger);
+  color: var(--fg-primary);
+}
+button.key.reject .kbd {
+  color: var(--danger); border-color: var(--danger-border);
+}
+
+button.key:disabled {
+  opacity: 0.4; cursor: not-allowed;
+}
+button.key:disabled:hover {
+  background: var(--bg-elevated);
+  border-color: var(--border-subtle);
+  color: var(--fg-secondary);
+}
+
+.kbd {
+  display: inline-block;
+  min-width: 22px; padding: 2px 6px;
+  font-size: 9px; font-weight: 600;
+  text-align: center;
+  border: 1px solid var(--border-medium);
+  background: var(--bg-inset);
+  color: var(--fg-primary);
+  border-radius: 3px;
+  letter-spacing: 0;
+}
+
+/* ─── Chips / pills ─── */
+.chip {
+  display: inline-flex; align-items: center; gap: 4px;
+  font-size: 9px; letter-spacing: .16em; text-transform: uppercase;
+  padding: 2px 6px;
+  border: 1px solid var(--success-border);
+  background: var(--success-bg);
+  color: var(--success); font-weight: 600;
+  margin-left: 6px;
+  border-radius: 3px;
+}
+.chip.bad {
+  color: var(--danger);
+  border-color: var(--danger-border);
+  background: var(--danger-bg);
+}
+
+/* ─── Busy state ─── */
+.dock.busy textarea.intent {
+  opacity: 0.55; pointer-events: none;
+}
+.dock.busy button.key:not([data-act="cancel-llm"]):not([data-act="cancel"]) {
+  opacity: 0.35; pointer-events: none;
+}
+.dot.pulse {
+  animation: dot-pulse 1.4s ease-in-out infinite alternate;
+}
+@keyframes dot-pulse {
+  from { box-shadow: 0 0 4px rgba(96, 165, 250, 0.35); opacity: 0.6; }
+  to   { box-shadow: 0 0 12px rgba(96, 165, 250, 0.85); opacity: 1; }
+}
+.busy-bar {
+  position: absolute; left: 0; right: 0; bottom: 56px;
+  height: 1px; background: var(--border-subtle); overflow: hidden;
+}
+.busy-fill {
+  position: absolute; height: 100%; width: 30%;
+  background: linear-gradient(90deg, transparent, var(--accent), transparent);
+  animation: busy-slide 1.6s ease-in-out infinite;
+  opacity: 0.6;
+}
+@keyframes busy-slide {
+  0%   { left: -30%; }
+  100% { left: 100%; }
+}
+
+/* ─── Page-level highlight (target preview) ─── */
+.hl-outline {
+  outline: 2px solid var(--accent) !important;
+  outline-offset: 2px;
+  background-color: var(--accent-bg) !important;
+}
+
+/* ─── Pick-preview pane ─── */
+.preview-header {
+  font-size: 10px; letter-spacing: .22em; text-transform: uppercase;
+  color: var(--accent); font-weight: 700;
+  padding-bottom: 6px;
+  border-bottom: 1px solid var(--border-subtle);
+}
+.preview-table { display: grid; gap: 5px; }
+.preview-row {
+  display: flex; align-items: baseline; gap: 8px;
+  font-size: 11px; line-height: 1.5;
+}
+.preview-key {
+  font-size: 9px; letter-spacing: .18em; text-transform: uppercase;
+  color: var(--fg-muted); font-weight: 600;
+  min-width: 110px; flex-shrink: 0;
+}
+.preview-val {
+  color: var(--fg-primary); word-break: break-all;
+}
+.preview-val.code-inline {
+  font-family: inherit; font-size: 11px;
+  background: var(--bg-inset);
+  border: 1px solid var(--border-subtle);
+  border-radius: 3px;
+  padding: 1px 5px;
+  color: var(--accent);
+}
+.preview-val.dim { color: var(--fg-faint); font-style: italic; }
+`;
+//# sourceMappingURL=dock.css.js.map

package/dist/healing/overlay/dock.css.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"dock.css.js","sourceRoot":"","sources":["../../../healing/overlay/dock.css.ts"],"names":[],"mappings":"AAAA,MAAM,CAAC,MAAM,QAAQ,GAAG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA8bvB,CAAC"}

package/dist/healing/overlay/dock.html.d.ts

@@ -0,0 +1,46 @@
+import type { SourceSnippet } from '../heal/source-trace.js';
+export type DockStage = 'pick' | 'pick-preview' | 'intent' | 'confirm' | 'retry' | 'broaden';
+/** Preview info computed from the picked element — shown in the PICK-PREVIEW stage. */
+export interface PickPreviewInfo {
+    /** Lowercase tag name, e.g. `button`. */
+    tag: string;
+    /** Explicit or implicit ARIA role. */
+    role: string;
+    /** aria-label or visible text, trimmed to 80 chars. `(no accessible name)` if empty. */
+    accessibleName: string;
+    /** First 60 chars of textContent, single-line trimmed. */
+    text: string;
+    /** Stable client-side handle preview: `#id`, `[data-testid]`, `[aria-label]`, `role+name`, or empty. */
+    stableHandle: string;
+}
+export interface DockState {
+    stage: DockStage;
+    originalSelector?: string;
+    action?: string;
+    callSite?: string;
+    pomFrame?: string;
+    pickedHtml?: string;
+    intentText?: string;
+    description?: string;
+    proposedSelector?: string;
+    proposedCode?: string;
+    matchCount?: number;
+    errorReason?: string;
+    attempt?: number;
+    loading?: boolean;
+    loadingLabel?: string;
+    sourceSnippet?: SourceSnippet | null;
+    round?: number;
+    message?: string;
+    /** Populated only when stage === 'pick-preview'. */
+    pickPreview?: PickPreviewInfo;
+    statusLabel?: string;
+    sessionCostUsd?: number;
+    llmCallCount?: number;
+    llmStartedAt?: number;
+    todayCostUsd?: number;
+    todayCallCount?: number;
+    modelName?: string;
+}
+export declare function renderDock(s: DockState): string;
+//# sourceMappingURL=dock.html.d.ts.map

package/dist/healing/overlay/dock.html.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"dock.html.d.ts","sourceRoot":"","sources":["../../../healing/overlay/dock.html.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,yBAAyB,CAAC;AAE7D,MAAM,MAAM,SAAS,GAAG,MAAM,GAAG,cAAc,GAAG,QAAQ,GAAG,SAAS,GAAG,OAAO,GAAG,SAAS,CAAC;AAE7F,uFAAuF;AACvF,MAAM,WAAW,eAAe;IAC9B,yCAAyC;IACzC,GAAG,EAAE,MAAM,CAAC;IACZ,sCAAsC;IACtC,IAAI,EAAE,MAAM,CAAC;IACb,wFAAwF;IACxF,cAAc,EAAE,MAAM,CAAC;IACvB,0DAA0D;IAC1D,IAAI,EAAE,MAAM,CAAC;IACb,wGAAwG;IACxG,YAAY,EAAE,MAAM,CAAC;CACtB;AAED,MAAM,WAAW,SAAS;IACxB,KAAK,EAAE,SAAS,CAAC;IACjB,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAC1B,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAC1B,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,aAAa,CAAC,EAAE,aAAa,GAAG,IAAI,CAAC;IACrC,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,oDAAoD;IACpD,WAAW,CAAC,EAAE,eAAe,CAAC;IAE9B,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAGD,wBAAgB,UAAU,CAAC,CAAC,EAAE,SAAS,GAAG,MAAM,CAc/C"}