npm - @jay-framework/aiditor - Versions diffs - 0.16.2 - Mend

@jay-framework/aiditor 0.16.2

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (23) hide show

package/README.md +58 -0
package/dist/actions/get-aiditor-bootstrap.jay-action +9 -0
package/dist/actions/get-aiditor-bootstrap.jay-action.d.ts +8 -0
package/dist/actions/get-page-params.jay-action +9 -0
package/dist/actions/get-page-params.jay-action.d.ts +5 -0
package/dist/actions/get-project-info.jay-action +12 -0
package/dist/actions/get-project-info.jay-action.d.ts +12 -0
package/dist/actions/list-freezes.jay-action +12 -0
package/dist/actions/list-freezes.jay-action.d.ts +12 -0
package/dist/actions/read-file.jay-action +11 -0
package/dist/actions/read-file.jay-action.d.ts +10 -0
package/dist/actions/submit-task.jay-action +24 -0
package/dist/actions/submit-task.jay-action.d.ts +24 -0
package/dist/aiditor-shell.jay-contract +8 -0
package/dist/aiditor-shell.jay-contract.d.ts +18 -0
package/dist/index.d.ts +445 -0
package/dist/index.js +464 -0
package/dist/pages/aiditor/page.css +1 -0
package/dist/pages/aiditor/page.jay-contract +12 -0
package/dist/pages/aiditor/page.jay-contract.d.ts +24 -0
package/dist/pages/aiditor/page.jay-html +759 -0
package/package.json +56 -0
package/plugin.yaml +28 -0

package/dist/pages/aiditor/page.jay-html ADDED Viewed

@@ -0,0 +1,759 @@
+<html>
+<head>
+  <meta charset="UTF-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  <title>AIditor</title>
+  <style>
+    *, *::before, *::after { box-sizing: border-box; }
+    html, body { margin: 0; padding: 0; height: 100%; background: #252526; color: #d4d4d4; font-family: 'Segoe UI', system-ui, sans-serif; }
+    .setup-screen { height: 100vh; display: flex; flex-direction: column; align-items: center; justify-content: center; background: #1e1e1e; gap: 10px; }
+    .setup-title { margin: 0 0 4px; font-size: 28px; color: #9cdcfe; }
+    .setup-desc { margin: 0 0 20px; font-size: 14px; color: #888; }
+    .setup-form { display: flex; flex-direction: column; gap: 6px; width: 360px; }
+    .setup-label { font-size: 12px; color: #aaa; margin-top: 8px; }
+    .setup-input { background: #252526; color: #d4d4d4; border: 1px solid #3e3e3e; border-radius: 6px; padding: 10px 14px; font-size: 13px; outline: none; font-family: monospace; width: 100%; }
+    .setup-input:focus { border-color: #0e639c; }
+    .setup-hint { margin: 2px 0 0; font-size: 11px; color: #555; }
+    .setup-btn { margin-top: 16px; background: #0e639c; color: #fff; border: none; border-radius: 6px; padding: 10px 24px; font-size: 14px; cursor: pointer; align-self: flex-start; }
+    .setup-btn:hover { background: #1177bb; }
+    .setup-btn:disabled { opacity: 0.45; cursor: not-allowed; }
+    .bootstrap-msg { max-width: 420px; text-align: center; line-height: 1.45; color: #f48771; }
+    .root { display: flex; height: 100vh; overflow: hidden; flex-direction: column; }
+    .main-panel { flex: 1; padding: 0; overflow: hidden; background: #252526; display: flex; flex-direction: column; min-height: 0; }
+    .main-top-bar { flex-shrink: 0; display: flex; align-items: center; gap: 10px; padding: 12px 20px 0; flex-wrap: wrap; }
+    .main-top-bar-spacer { flex: 1; min-width: 8px; }
+    .reset-btn { background: #2d2d30; border: 1px solid #3e3e3e; color: #ccc; cursor: pointer; font-size: 14px; padding: 8px 12px; border-radius: 6px; line-height: 1; }
+    .reset-btn:hover { color: #fff; border-color: #9cdcfe; }
+    .route-picker-stack { display: flex; flex-direction: column; align-items: flex-start; gap: 8px; width: 100%; }
+    .aiditor-dropdown { width: 100%; min-width: 240px; background: #1e1e1e; color: #d4d4d4; border: 1px solid #9cdcfe; border-radius: 6px; padding: 8px 32px 8px 12px; font-size: 13px; font-family: ui-monospace, monospace; cursor: pointer; outline: none; appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%239cdcfe' d='M3 4.5L6 8l3-3.5H3z'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 10px center; }
+    .aiditor-dropdown:focus { border-color: #3794ff; box-shadow: 0 0 0 1px rgba(55,148,255,0.35); }
+    .aiditor-dropdown option { background: #f3f3f3; color: #1e1e1e; }
+    .preview-stack { flex: 1; display: flex; flex-direction: column; min-height: 0; padding: 12px 20px 16px; gap: 10px; }
+    .preview-url-row { display: flex; align-items: flex-start; gap: 12px; flex-wrap: wrap; }
+    .url-bar-wrap { flex: 1; min-width: 200px; }
+    .url-bar { font-size: 12px; font-family: monospace; color: #9cdcfe; background: #1e1e1e; border: 1px solid #3e3e3e; border-radius: 6px; padding: 8px 12px; word-break: break-all; }
+    .preview-visual-tools { display: flex; flex-shrink: 0; gap: 4px; align-items: center; }
+    .visual-tool-btn { background: #2d2d30; color: #ccc; border: 1px solid #3e3e3e; border-radius: 6px; padding: 6px 10px; font-size: 12px; cursor: pointer; line-height: 1; }
+    .visual-tool-btn:hover { background: #3e3e42; color: #fff; }
+    .visual-tool-on { background: #37373d !important; border-color: #9cdcfe !important; color: #9cdcfe !important; }
+    .preview-loading { font-size: 13px; color: #888; }
+    .preview-error { font-size: 13px; color: #f48771; background: #3a1f1f; border-radius: 6px; padding: 10px 12px; }
+    .path-select-row { display: flex; align-items: center; gap: 8px; width: 100%; }
+    .preview-path-select { flex: 1; min-width: 0; max-width: 560px; }
+    .params-loading-hint { font-size: 11px; color: #888; white-space: nowrap; flex-shrink: 0; }
+    /* isolation: Chrome Element Capture requires a stacking context on the capture target */
+    .preview-frame-wrap { flex: 1; min-height: 0; border: 1px solid #3e3e3e; border-radius: 8px; overflow: visible; background: #1e1e1e; position: relative; isolation: isolate; }
+    .preview-frame { width: 100%; height: 100%; min-height: 360px; border: none; display: block; }
+    .visual-overlay { position: absolute; inset: 0; z-index: 2; }
+    .visual-overlay-none { pointer-events: none; }
+    .point-marker { position: absolute; width: 14px; height: 14px; margin: -7px 0 0 -7px; border-radius: 50%; background: #c586ff; border: 2px solid #fff; box-shadow: 0 1px 4px rgba(0,0,0,0.5); }
+    .point-marker-idx { position: absolute; left: 10px; top: -18px; min-width: 16px; height: 16px; padding: 0 4px; border-radius: 4px; background: #c586ff; color: #1e1e1e; font-size: 10px; font-weight: 700; line-height: 16px; text-align: center; pointer-events: none; }
+    .area-rect { position: absolute; border: 2px dashed #c586ff; background: rgba(197, 134, 255, 0.12); pointer-events: none; }
+    .area-marker-idx { position: absolute; left: 4px; top: 4px; min-width: 18px; height: 18px; padding: 0 5px; border-radius: 4px; background: #c586ff; color: #1e1e1e; font-size: 10px; font-weight: 700; line-height: 18px; text-align: center; pointer-events: none; z-index: 1; }
+    .area-rect-draft { border-style: solid; border-color: #9cdcfe; background: rgba(156, 220, 254, 0.08); }
+    .arrow-pending-dot { position: absolute; width: 10px; height: 10px; margin: -5px 0 0 -5px; border-radius: 50%; background: #9cdcfe; border: 2px solid #fff; box-shadow: 0 1px 4px rgba(0,0,0,0.5); pointer-events: none; }
+    .arrow-svg { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
+    .arrow-svg line { stroke: #c586ff; stroke-width: 2; marker-end: url(#aiditor-arrowhead); }
+    .arrow-end-pin { position: absolute; width: 22px; height: 22px; margin: -11px 0 0 -11px; border-radius: 50%; background: #c586ff; color: #1e1e1e; border: 2px solid #fff; box-shadow: 0 1px 4px rgba(0,0,0,0.5); font-size: 11px; font-weight: 700; display: flex; align-items: center; justify-content: center; pointer-events: none; z-index: 3; }
+    .visual-popovers { position: absolute; inset: 0; z-index: 4; pointer-events: none; }
+    .visual-popover { position: absolute; width: 280px; max-width: min(280px, calc(100% - 16px)); display: flex; flex-direction: column; gap: 8px; padding: 10px 12px; background: #252526; border: 1px solid #9cdcfe; border-radius: 8px; box-shadow: 0 4px 16px rgba(0,0,0,0.45); box-sizing: border-box; transform: translate(10px, 10px); pointer-events: auto; }
+    /* Keep card on-screen when anchor is near right/bottom (default opens down-right). */
+    .visual-popover-flip-x { transform: translate(calc(-100% - 14px), 10px); }
+    .visual-popover-flip-y { transform: translate(10px, calc(-100% - 14px)); }
+    .visual-popover-flip-x.visual-popover-flip-y { transform: translate(calc(-100% - 14px), calc(-100% - 14px)); }
+    .visual-annotation-row-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
+    .visual-annotation-kind { font-size: 11px; color: #9cdcfe; font-weight: 600; }
+    .visual-annotation-actions { display: flex; gap: 6px; flex-shrink: 0; }
+    .visual-annotation-remove { background: transparent; color: #888; border: 1px solid #3e3e3e; border-radius: 4px; padding: 4px 8px; font-size: 11px; cursor: pointer; }
+    .visual-annotation-remove:hover { color: #f48771; border-color: #f48771; }
+    .visual-annotation-run { background: #0e639c; color: #fff; border: none; border-radius: 4px; padding: 4px 10px; font-size: 11px; cursor: pointer; }
+    .visual-annotation-run:hover { background: #1177bb; }
+    .visual-annotation-run:disabled { opacity: 0.45; cursor: not-allowed; }
+    .visual-annotation-instruction { width: 100%; min-height: 48px; resize: vertical; background: #252526; color: #d4d4d4; border: 1px solid #3e3e3e; border-radius: 6px; padding: 6px 8px; font-size: 12px; font-family: inherit; outline: none; }
+    .visual-annotation-instruction:focus { border-color: #0e639c; }
+    .visual-annotation-files { display: flex; flex-direction: column; gap: 6px; margin-top: 4px; }
+    .visual-attach-row { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
+    .visual-attach-btn { background: #2d2d30; color: #ccc; border: 1px solid #3e3e3e; border-radius: 4px; padding: 4px 8px; font-size: 11px; cursor: pointer; }
+    .visual-attach-btn:hover { border-color: #9cdcfe; color: #fff; }
+    .visual-attachment-chips { display: flex; flex-wrap: wrap; gap: 6px; }
+    .visual-attachment-chip { display: inline-flex; align-items: center; gap: 6px; max-width: 100%; background: #1e1e1e; border: 1px solid #3e3e3e; border-radius: 6px; padding: 4px 6px; font-size: 11px; color: #ccc; }
+    .visual-attachment-thumb { width: 36px; height: 36px; object-fit: cover; border-radius: 4px; flex-shrink: 0; background: #2d2d30; }
+    .visual-attachment-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 160px; }
+    .visual-attachment-remove-file { background: transparent; border: none; color: #888; cursor: pointer; font-size: 14px; line-height: 1; padding: 0 4px; }
+    .visual-attachment-remove-file:hover { color: #f48771; }
+    .file-input-hidden { display: none; }
+    .visual-error { font-size: 12px; color: #f48771; }
+    .visual-submit-error { font-size: 12px; color: #f48771; margin: 0; padding: 0 2px; }
+    .visual-submit-progress { font-size: 12px; color: #9cdcfe; margin: 0; padding: 0 2px; }
+    .bottom-panel { flex-shrink: 0; display: flex; flex-direction: column; background: #1e1e1e; border-top: 1px solid #3e3e3e; min-height: 32px; max-height: 80vh; }
+    .bottom-panel-collapsed { max-height: 32px; overflow: hidden; }
+    .bottom-panel-resize { height: 4px; cursor: ns-resize; background: transparent; flex-shrink: 0; }
+    .bottom-panel-resize:hover, .bottom-panel-resize:active { background: #007acc; }
+    .bottom-panel-header { display: flex; align-items: center; gap: 8px; padding: 6px 12px; flex-shrink: 0; cursor: pointer; user-select: none; }
+    .bottom-panel-title { font-size: 11px; font-weight: 600; color: #ccc; text-transform: uppercase; letter-spacing: 0.5px; }
+    .bottom-panel-running { display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: #89d185; animation: pulse-dot 1.2s ease-in-out infinite; margin-left: 4px; }
+    @keyframes pulse-dot { 0%,100% { opacity: 1; } 50% { opacity: 0.3; } }
+    .bottom-panel-toggle { background: none; border: none; color: #888; font-size: 14px; cursor: pointer; padding: 0 4px; line-height: 1; }
+    .bottom-panel-toggle:hover { color: #fff; }
+    .bottom-panel-spacer { flex: 1; }
+    .bottom-panel-clear { background: none; border: none; color: #666; font-size: 11px; cursor: pointer; padding: 2px 6px; }
+    .bottom-panel-clear:hover { color: #ccc; }
+    .output-panel { overflow-y: auto; padding: 8px 12px; font-family: 'Cascadia Code', 'Fira Code', 'Consolas', monospace; font-size: 12px; line-height: 1.5; white-space: pre-wrap; word-break: break-word; max-height: calc(5 * 1.5em + 16px); }
+    .chunk { color: #d4d4d4; }
+    .chunk-status { color: #888; font-style: italic; }
+    .chunk-tool { color: #569cd6; }
+    .chunk-error { color: #f48771; }
+    .chunk-thinking { color: #666; font-style: italic; }
+    .chunk-result { color: #89d185; }
+    .tool-group-sep { width: 1px; background: #3e3e3e; align-self: stretch; margin: 0 4px; flex-shrink: 0; }
+    .file-link { color: #569cd6; text-decoration: underline; cursor: pointer; }
+    .file-link:hover { color: #9cdcfe; }
+    .chunk-tool-prefix { color: #569cd6; }
+    .file-preview-overlay { position: fixed; inset: 0; z-index: 200; background: rgba(0,0,0,0.78); display: flex; align-items: center; justify-content: center; padding: 20px; box-sizing: border-box; }
+    .file-preview-panel { background: #1e1e1e; border: 1px solid #3e3e3e; border-radius: 10px; width: min(900px, 96vw); max-height: 90vh; display: flex; flex-direction: column; overflow: hidden; }
+    .file-preview-header { display: flex; align-items: center; gap: 8px; padding: 10px 16px; border-bottom: 1px solid #3e3e3e; flex-shrink: 0; }
+    .file-preview-title { font-size: 12px; color: #ccc; font-family: 'Cascadia Code', 'Fira Code', monospace; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; flex: 1; }
+    .file-preview-close { background: none; border: none; color: #888; font-size: 18px; cursor: pointer; padding: 0 4px; line-height: 1; flex-shrink: 0; }
+    .file-preview-close:hover { color: #fff; }
+    .file-preview-body { flex: 1; overflow: auto; padding: 16px; min-height: 0; }
+    .file-preview-text { font-family: 'Cascadia Code', 'Fira Code', monospace; font-size: 12px; line-height: 1.5; color: #d4d4d4; white-space: pre-wrap; word-break: break-word; margin: 0; }
+    .file-preview-image { max-width: 100%; max-height: 70vh; display: block; margin: 0 auto; }
+    .file-preview-loading { color: #888; font-style: italic; font-size: 12px; }
+    .aiditor-logo { font-size: 18px; font-weight: 700; letter-spacing: -0.5px; color: #d4d4d4; flex-shrink: 0; font-family: 'Segoe UI', system-ui, sans-serif; }
+    .aiditor-logo-ai { color: #f44747; }
+    .preview-frame-tablet { align-self: center; width: 768px; max-width: 100%; }
+    .preview-frame-mobile { align-self: center; width: 390px; max-width: 100%; }
+    .video-record-btn { border-color: #c586ff !important; color: #e0d0ff !important; }
+    .video-record-active { animation: pulse-rec 1.2s ease-in-out infinite; }
+    @keyframes pulse-rec { 0%,100% { opacity: 1; } 50% { opacity: 0.55; } }
+    .video-review-overlay { position: fixed; inset: 0; z-index: 200; background: rgba(0,0,0,0.78); display: flex; align-items: center; justify-content: center; padding: 20px; box-sizing: border-box; }
+    .video-review-panel { background: #252526; border: 1px solid #3e3e3e; border-radius: 10px; width: min(1100px, 96vw); max-height: 94vh; display: flex; flex-direction: column; gap: 10px; padding: 14px 16px; overflow: auto; }
+    .video-review-header { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; }
+    .video-review-title { font-size: 15px; font-weight: 600; color: #9cdcfe; margin: 0; }
+    .video-review-meta { font-size: 12px; color: #888; }
+    .video-review-tools { display: flex; flex-wrap: wrap; gap: 4px; align-items: center; }
+    .video-review-transport { display: flex; align-items: center; gap: 10px; width: 100%; }
+    .video-play-pause-btn { flex-shrink: 0; width: 40px; height: 36px; border-radius: 6px; border: 1px solid #555; background: #3c3c3c; color: #eee; font-size: 16px; line-height: 1; cursor: pointer; }
+    .video-play-pause-btn:hover { background: #4a4a4a; border-color: #9cdcfe; }
+    .video-timeline-wrap { display: flex; flex-direction: column; gap: 6px; flex: 1; min-width: 0; }
+    .video-timeline { width: 100%; accent-color: #0e639c; }
+    .video-timeline-markers { position: relative; height: 10px; margin: 0 2px; }
+    .video-timeline-marker { position: absolute; top: 0; width: 10px; margin-left: -5px; height: 10px; background: #c586ff; border-radius: 1px; transform: translateX(-50%); cursor: pointer; }
+    .video-review-overlay .arrow-svg line { marker-end: url(#aiditor-video-arrowhead); }
+    .video-review-actions { display: flex; gap: 10px; justify-content: flex-end; flex-wrap: wrap; margin-top: 4px; }
+    .video-review-secondary { background: #3c3c3c; color: #ddd; border: 1px solid #555; border-radius: 6px; padding: 8px 16px; font-size: 13px; cursor: pointer; }
+    .video-review-secondary:hover { background: #4a4a4a; }
+    .video-review-primary { background: #0e639c; color: #fff; border: none; border-radius: 6px; padding: 8px 18px; font-size: 13px; cursor: pointer; }
+    .video-review-primary:hover { background: #1177bb; }
+    .video-review-primary:disabled { opacity: 0.45; cursor: not-allowed; }
+  </style>
+  <script type="application/jay-data">
+data:
+    isBootstrapping: boolean
+    showBootstrapError: boolean
+    bootstrapErrorText: string
+    canRetryBootstrap: boolean
+    isMainVisible: boolean
+    projectName: string
+    notes: string
+    hasImage: boolean
+    isRunning: boolean
+    chunks:
+    - text: string
+      cssClass: string
+      filePath: string
+      toolName: string
+    hasChunks: boolean
+    outputEmpty: boolean
+    pageSelectOptions:
+    - url: string
+      label: string
+    selectedRouteSelectValue: string
+    hasPages: boolean
+    isPreviewMode: boolean
+    previewUrlBar: string
+    previewLoading: boolean
+    paramsLoadingHint: string
+    previewError: string
+    showPathSelect: boolean
+    previewPathOptions:
+    - path: string
+    selectedPreviewPath: string
+    showPreviewIframe: boolean
+    previewSrc: string
+    showOutputChunks: boolean
+    showOutputEmpty: boolean
+    outputEmptyHint: string
+    bottomPanelClass: string
+    bottomPanelToggleGlyph: string
+    showBottomPanelRunning: boolean
+    showFilePreview: boolean
+    filePreviewPath: string
+    filePreviewContent: string
+    filePreviewIsImage: boolean
+    filePreviewImageSrc: string
+    filePreviewLoading: boolean
+    showVisualToolbar: boolean
+    visualToolNoneOn: boolean
+    visualToolPointOn: boolean
+    visualToolAreaOn: boolean
+    visualToolArrowOn: boolean
+    visualPointDisplayItems:
+    - id: string
+      leftPct: number
+      topPct: number
+      indexLabel: string
+    showVisualPointMarkers: boolean
+    visualAreaDisplayItems:
+    - id: string
+      leftPct: number
+      topPct: number
+      widthPct: number
+      heightPct: number
+      indexLabel: string
+    showVisualAreaItems: boolean
+    areaDraftLeftPct: number
+    areaDraftTopPct: number
+    areaDraftWidthPct: number
+    areaDraftHeightPct: number
+    showAreaDraftRect: boolean
+    visualArrowDisplayItems:
+    - id: string
+      x1Pct: number
+      y1Pct: number
+      x2Pct: number
+      y2Pct: number
+    visualArrowPinItems:
+    - id: string
+      leftPct: number
+      topPct: number
+      indexLabel: string
+    hasVisualArrowLines: boolean
+    showArrowPending: boolean
+    arrowPendingLeftPct: number
+    arrowPendingTopPct: number
+    visualAnnotationRows:
+    - id: string
+      kindLabel: string
+      instruction: string
+      runDisabled: boolean
+      leftPct: number
+      topPct: number
+      popoverFlipX: boolean
+      popoverFlipY: boolean
+      attachmentChips:
+      - key: string
+        name: string
+        thumbUrl: string
+        annotationId: string
+    recordingDraftUi:
+      id: string
+      kindLabel: string
+      instruction: string
+      leftPct: number
+      topPct: number
+      popoverFlipX: boolean
+      popoverFlipY: boolean
+      attachmentChips:
+      - key: string
+        name: string
+        thumbUrl: string
+        annotationId: string
+    recordingDraftAttachmentChips:
+    - key: string
+      name: string
+      thumbUrl: string
+      annotationId: string
+    showRecordingDraftPopover: boolean
+    showVisualAnnotationsPanel: boolean
+    showVisualSubmitError: boolean
+    visualSubmitError: string
+    visualOverlayPointerNone: boolean
+    showVideoRecordUi: boolean
+    isVideoRecording: boolean
+    videoRecordLabel: string
+    videoRecordDisabled: boolean
+    freezeDisabled: boolean
+    showVideoReviewModal: boolean
+    videoReviewPreparing: boolean
+    videoReviewReady: boolean
+    videoReviewError: boolean
+    videoReviewErrorText: string
+    videoReviewObjectUrl: string
+    videoModalToolNoneOn: boolean
+    videoModalToolPointOn: boolean
+    videoModalToolAreaOn: boolean
+    videoModalToolArrowOn: boolean
+    videoPointDisplayItems:
+    - id: string
+      leftPct: number
+      topPct: number
+      indexLabel: string
+    showVideoPointMarkers: boolean
+    videoAreaDisplayItems:
+    - id: string
+      leftPct: number
+      topPct: number
+      widthPct: number
+      heightPct: number
+      indexLabel: string
+    showVideoAreaItems: boolean
+    videoAreaDraftLeftPct: number
+    videoAreaDraftTopPct: number
+    videoAreaDraftWidthPct: number
+    videoAreaDraftHeightPct: number
+    showVideoAreaDraftRect: boolean
+    videoArrowDisplayItems:
+    - id: string
+      x1Pct: number
+      y1Pct: number
+      x2Pct: number
+      y2Pct: number
+    videoArrowPinItems:
+    - id: string
+      leftPct: number
+      topPct: number
+      indexLabel: string
+    hasVideoArrowLines: boolean
+    showVideoArrowPending: boolean
+    videoArrowPendingLeftPct: number
+    videoArrowPendingTopPct: number
+    videoAnnotationRows:
+    - id: string
+      kindLabel: string
+      instruction: string
+      runDisabled: boolean
+      leftPct: number
+      topPct: number
+      popoverFlipX: boolean
+      popoverFlipY: boolean
+      attachmentChips:
+      - key: string
+        name: string
+        thumbUrl: string
+        annotationId: string
+    showVideoAnnotationsPanel: boolean
+    videoModalOverlayPointerNone: boolean
+    videoSubmitError: string
+    showVideoSubmitError: boolean
+    videoSubmitProgress: string
+    showVideoSubmitProgress: boolean
+    videoTimelineMarkers:
+    - key: string
+      timeSec: number
+      leftPct: number
+      label: string
+    showVideoAnnotationPopoversAtPlayhead: boolean
+    videoTimeLabel: string
+    videoSendDisabled: boolean
+    videoPlayPauseGlyph: string
+    breakpointDesktopOn: boolean
+    breakpointTabletOn: boolean
+    breakpointMobileOn: boolean
+  </script>
+</head>
+<body>
+<div class="app-root">
+<div class="setup-screen" if="!isMainVisible">
+  <h2 class="setup-title">AIditor</h2>
+  <p class="setup-desc" if="isBootstrapping">Starting…</p>
+  <p class="setup-desc bootstrap-msg" if="showBootstrapError">{bootstrapErrorText}</p>
+  <button type="button" class="setup-btn" ref="retryBootstrapBtn" disabled="!canRetryBootstrap">Retry</button>
+</div>
+<!-- Main screen -->
+<div class="root" if="isMainVisible">
+  <main class="main-panel">
+    <div class="main-top-bar" if="hasPages">
+      <div class="route-picker-stack">
+        <select
+          class="aiditor-dropdown"
+          ref="pageRouteSelect"
+          value="{selectedRouteSelectValue}"
+          aria-label="Page route"
+        >
+          <option value="" disabled>Select a route…</option>
+          <option forEach="pageSelectOptions" trackBy="url" value="{url}">{label}</option>
+        </select>
+        <div class="path-select-row">
+          <select
+            class="aiditor-dropdown preview-path-select"
+            if="showPathSelect"
+            ref="previewPathSelect"
+            value="{selectedPreviewPath}"
+            aria-label="URL instance"
+          >
+            <option forEach="previewPathOptions" trackBy="path" value="{path}">{path}</option>
+          </select>
+          <span class="params-loading-hint" if="paramsLoadingHint">{paramsLoadingHint}</span>
+        </div>
+      </div>
+    </div>
+    <div class="preview-stack" if="isPreviewMode">
+      <div class="preview-url-row">
+        <span class="aiditor-logo"><span class="aiditor-logo-ai">AI</span>ditor</span>
+        <div class="url-bar-wrap">
+          <div class="url-bar">{previewUrlBar}</div>
+        </div>
+        <div class="preview-visual-tools" if="showVisualToolbar">
+          <button type="button" class="{breakpointDesktopOn ? visual-tool-on} visual-tool-btn" ref="breakpointDesktopBtn" title="Desktop (1280px)"><svg width="16" height="13" viewBox="0 0 16 13" fill="none"><rect x="0.7" y="0.7" width="14.6" height="9.1" rx="1.1" stroke="currentColor" stroke-width="1.4"/><path d="M5.5 9.8v2M10.5 9.8v2M3.5 11.8h9" stroke="currentColor" stroke-width="1.4" stroke-linecap="round"/></svg></button>
+          <button type="button" class="{breakpointTabletOn ? visual-tool-on} visual-tool-btn" ref="breakpointTabletBtn" title="Tablet (768px)"><svg width="10" height="14" viewBox="0 0 10 14" fill="none"><rect x="0.7" y="0.7" width="8.6" height="12.6" rx="1.1" stroke="currentColor" stroke-width="1.4"/><circle cx="5" cy="11.5" r="0.8" fill="currentColor"/></svg></button>
+          <button type="button" class="{breakpointMobileOn ? visual-tool-on} visual-tool-btn" ref="breakpointMobileBtn" title="Mobile (390px)"><svg width="8" height="14" viewBox="0 0 8 14" fill="none"><rect x="0.7" y="0.7" width="6.6" height="12.6" rx="1.1" stroke="currentColor" stroke-width="1.4"/><line x1="2.5" y1="11.5" x2="5.5" y2="11.5" stroke="currentColor" stroke-width="1.4" stroke-linecap="round"/></svg></button>
+          <span class="tool-group-sep"></span>
+          <button type="button" class="{visualToolNoneOn ? visual-tool-on} visual-tool-btn" ref="visualToolNoneBtn" title="Select">⤢</button>
+          <button type="button" class="{visualToolPointOn ? visual-tool-on} visual-tool-btn" ref="visualToolPointBtn" title="Point">⊙</button>
+          <button type="button" class="{visualToolAreaOn ? visual-tool-on} visual-tool-btn" ref="visualToolAreaBtn" title="Area">▢</button>
+          <button type="button" class="{visualToolArrowOn ? visual-tool-on} visual-tool-btn" ref="visualToolArrowBtn" title="Arrow">↗</button>
+          <button
+            type="button"
+            class="{isVideoRecording ? video-record-active} video-record-btn visual-tool-btn"
+            ref="videoRecordBtn"
+            disabled="videoRecordDisabled"
+            title="Record preview"
+          >{videoRecordLabel}</button>
+          <button
+            type="button"
+            class="visual-tool-btn freeze-btn"
+            ref="freezeBtn"
+            disabled="freezeDisabled"
+            title="Freeze page state"
+          >❄</button>
+        </div>
+      </div>
+      <div class="preview-loading" if="previewLoading">{paramsLoadingHint}</div>
+      <div class="preview-error" if="previewError">{previewError}</div>
+      <input
+        type="file"
+        class="file-input-hidden"
+        ref="visualAttachFileInput"
+        multiple
+      />
+      <div class="{breakpointTabletOn ? preview-frame-tablet} {breakpointMobileOn ? preview-frame-mobile} preview-frame-wrap" if="showPreviewIframe" ref="previewCaptureRoot">
+        <iframe class="preview-frame" ref="previewIframe" src="{previewSrc}" title="Page preview"></iframe>
+        <div class="{visualOverlayPointerNone ? visual-overlay-none} visual-overlay" ref="visualOverlay">
+          <div
+            class="point-marker"
+            forEach="visualPointDisplayItems"
+            trackBy="id"
+            style="left: {leftPct}%; top: {topPct}%;"
+          >
+            <span class="point-marker-idx">{indexLabel}</span>
+          </div>
+          <div
+            class="area-rect"
+            forEach="visualAreaDisplayItems"
+            trackBy="id"
+            style="left: {leftPct}%; top: {topPct}%; width: {widthPct}%; height: {heightPct}%;"
+          ><span class="area-marker-idx">{indexLabel}</span></div>
+          <div
+            class="area-rect area-rect-draft"
+            if="showAreaDraftRect"
+            style="left: {areaDraftLeftPct}%; top: {areaDraftTopPct}%; width: {areaDraftWidthPct}%; height: {areaDraftHeightPct}%;"
+          ></div>
+          <div
+            class="arrow-pending-dot"
+            if="showArrowPending"
+            style="left: {arrowPendingLeftPct}%; top: {arrowPendingTopPct}%;"
+          ></div>
+          <svg class="arrow-svg" if="hasVisualArrowLines" viewBox="0 0 100 100" preserveAspectRatio="none">
+            <defs>
+              <marker id="aiditor-arrowhead" markerWidth="8" markerHeight="8" refX="6" refY="4" orient="auto">
+                <polygon points="0 0, 8 4, 0 8" fill="#c586ff" />
+              </marker>
+            </defs>
+            <line
+              forEach="visualArrowDisplayItems"
+              trackBy="id"
+              x1="{x1Pct}"
+              y1="{y1Pct}"
+              x2="{x2Pct}"
+              y2="{y2Pct}"
+            />
+          </svg>
+          <div
+            class="arrow-end-pin"
+            forEach="visualArrowPinItems"
+            trackBy="id"
+            style="left: {leftPct}%; top: {topPct}%;"
+          >{indexLabel}</div>
+        </div>
+        <div class="visual-popovers" if="showVisualAnnotationsPanel">
+          <div
+            if="showRecordingDraftPopover"
+            class="{recordingDraftUi.popoverFlipX ? visual-popover-flip-x} {recordingDraftUi.popoverFlipY ? visual-popover-flip-y} visual-popover"
+            ref="recordingDraftPopover"
+            data-annotation-id="{recordingDraftUi.id}"
+            style="left: {recordingDraftUi.leftPct}%; top: {recordingDraftUi.topPct}%;"
+          >
+            <div class="visual-annotation-row-head">
+              <span class="visual-annotation-kind">{recordingDraftUi.kindLabel}</span>
+              <div class="visual-annotation-actions">
+                <button type="button" class="recording-draft-cancel visual-annotation-remove" title="Cancel annotation">Cancel</button>
+                <button
+                  type="button"
+                  class="recording-draft-add visual-annotation-run"
+                  title="Pin this moment on the recording timeline"
+                >Add to recording</button>
+              </div>
+            </div>
+            <textarea
+              class="visual-annotation-instruction"
+              placeholder="Instruction for this annotation…"
+              data-annotation-id="{recordingDraftUi.id}"
+              value="{recordingDraftUi.instruction}"
+            ></textarea>
+            <div class="visual-annotation-files">
+              <div class="visual-attach-row">
+                <button type="button" class="visual-attach-btn visual-annotation-attach" data-annotation-id="{recordingDraftUi.id}">
+                  Attach file
+                </button>
+              </div>
+              <div class="visual-attachment-chips" forEach="recordingDraftAttachmentChips" trackBy="key">
+                <div class="visual-attachment-chip">
+                  <img if="thumbUrl" class="visual-attachment-thumb" src="{thumbUrl}" alt="" />
+                  <span class="visual-attachment-name">{name}</span>
+                  <button
+                    type="button"
+                    class="visual-attachment-remove-file"
+                    data-annotation-id="{annotationId}"
+                    data-att-key="{key}"
+                    aria-label="Remove attachment"
+                  >×</button>
+                </div>
+              </div>
+            </div>
+          </div>
+          <div
+            class="{popoverFlipX ? visual-popover-flip-x} {popoverFlipY ? visual-popover-flip-y} visual-popover"
+            forEach="visualAnnotationRows"
+            trackBy="id"
+            ref="annotationRow"
+            data-annotation-id="{id}"
+            style="left: {leftPct}%; top: {topPct}%;"
+          >
+            <div class="visual-annotation-row-head">
+              <span class="visual-annotation-kind">{kindLabel}</span>
+              <div class="visual-annotation-actions">
+                <button type="button" class="visual-annotation-remove" title="Remove annotation">Remove</button>
+                <button
+                  type="button"
+                  class="visual-annotation-run"
+                  disabled="runDisabled"
+                  title="Capture preview and send all annotations"
+                >Run</button>
+              </div>
+            </div>
+            <textarea
+              class="visual-annotation-instruction"
+              placeholder="Instruction for this annotation…"
+              data-annotation-id="{id}"
+              value="{instruction}"
+            ></textarea>
+            <div class="visual-annotation-files">
+              <div class="visual-attach-row">
+                <button type="button" class="visual-attach-btn visual-annotation-attach" data-annotation-id="{id}">
+                  Attach file
+                </button>
+              </div>
+              <div class="visual-attachment-chips" forEach="attachmentChips" trackBy="key">
+                <div class="visual-attachment-chip">
+                  <img if="thumbUrl" class="visual-attachment-thumb" src="{thumbUrl}" alt="" />
+                  <span class="visual-attachment-name">{name}</span>
+                  <button
+                    type="button"
+                    class="visual-attachment-remove-file"
+                    data-annotation-id="{annotationId}"
+                    data-att-key="{key}"
+                    aria-label="Remove attachment"
+                  >×</button>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+      <p class="visual-submit-error" if="showVisualSubmitError">{visualSubmitError}</p>
+    </div>
+  </main>
+  <div class="{bottomPanelClass}">
+    <div class="bottom-panel-resize" ref="bottomPanelResize"></div>
+    <div class="bottom-panel-header" ref="bottomPanelHeader">
+      <span class="bottom-panel-title">Claude Code Output</span>
+      <span class="bottom-panel-running" if="showBottomPanelRunning"></span>
+      <span class="bottom-panel-spacer"></span>
+      <button type="button" class="bottom-panel-clear" ref="bottomPanelClearBtn">Clear</button>
+      <button type="button" class="bottom-panel-toggle" ref="bottomPanelToggleBtn">{bottomPanelToggleGlyph}</button>
+    </div>
+    <div class="output-panel" ref="outputScroll">
+      <div class="{cssClass}" forEach="chunks" trackBy="text"><span if="filePath" class="chunk-tool-prefix">&gt; {toolName} </span><a if="filePath" class="file-link" href="#" data-path="{filePath}">{filePath}</a><span if="!filePath">{text}</span></div>
+    </div>
+  </div>
+</div>
+<div class="file-preview-overlay" if="showFilePreview" ref="filePreviewBackdrop">
+  <div class="file-preview-panel">
+    <div class="file-preview-header">
+      <span class="file-preview-title">{filePreviewPath}</span>
+      <button type="button" class="file-preview-close" ref="filePreviewCloseBtn">✕</button>
+    </div>
+    <div class="file-preview-body">
+      <span class="file-preview-loading" if="filePreviewLoading">Loading…</span>
+      <pre class="file-preview-text" if="!filePreviewIsImage">{filePreviewContent}</pre>
+      <img class="file-preview-image" if="filePreviewIsImage" src="{filePreviewImageSrc}" alt="" />
+    </div>
+  </div>
+</div>
+<div class="video-review-overlay" if="showVideoReviewModal" ref="videoReviewBackdrop" tabindex="-1">
+  <div class="video-review-panel">
+    <div class="video-review-header">
+      <div>
+        <h2 class="video-review-title">Review recording</h2>
+        <p class="video-review-meta" if="videoReviewReady">{videoTimeLabel}</p>
+      </div>
+      <button type="button" class="video-review-secondary" ref="videoReviewCloseBtn">Close</button>
+    </div>
+    <p if="videoReviewPreparing">Preparing recording…</p>
+    <p class="preview-error" if="videoReviewError">{videoReviewErrorText}</p>
+    <!-- Must mount while preparing: refs.videoReviewPlayer must exist before videoReviewReady flips true. -->
+    <div if="videoReviewPreparing || videoReviewReady">
+      <div class="video-review-tools">
+        <button type="button" class="{videoModalToolNoneOn ? visual-tool-on} visual-tool-btn" ref="videoModalToolNoneBtn" title="Select">⤢</button>
+        <button type="button" class="{videoModalToolPointOn ? visual-tool-on} visual-tool-btn" ref="videoModalToolPointBtn" title="Point">⊙</button>
+        <button type="button" class="{videoModalToolAreaOn ? visual-tool-on} visual-tool-btn" ref="videoModalToolAreaBtn" title="Area">▢</button>
+        <button type="button" class="{videoModalToolArrowOn ? visual-tool-on} visual-tool-btn" ref="videoModalToolArrowBtn" title="Arrow">↗</button>
+      </div>
+      <input type="file" class="file-input-hidden" ref="videoReviewAttachFileInput" multiple />
+      <div class="preview-frame-wrap video-review-capture-root" ref="videoReviewCaptureRoot">
+        <video
+          class="preview-frame"
+          ref="videoReviewPlayer"
+          data-aiditor-video-review=""
+          src="{videoReviewObjectUrl}"
+          playsinline
+          preload="metadata"
+        ></video>
+        <div class="{videoModalOverlayPointerNone ? visual-overlay-none} visual-overlay" ref="videoReviewOverlay">
+          <div
+            class="point-marker"
+            forEach="videoPointDisplayItems"
+            trackBy="id"
+            style="left: {leftPct}%; top: {topPct}%;"
+          >
+            <span class="point-marker-idx">{indexLabel}</span>
+          </div>
+          <div
+            class="area-rect"
+            forEach="videoAreaDisplayItems"
+            trackBy="id"
+            style="left: {leftPct}%; top: {topPct}%; width: {widthPct}%; height: {heightPct}%;"
+          ><span class="area-marker-idx">{indexLabel}</span></div>
+          <div
+            class="area-rect area-rect-draft"
+            if="showVideoAreaDraftRect"
+            style="left: {videoAreaDraftLeftPct}%; top: {videoAreaDraftTopPct}%; width: {videoAreaDraftWidthPct}%; height: {videoAreaDraftHeightPct}%;"
+          ></div>
+          <div
+            class="arrow-pending-dot"
+            if="showVideoArrowPending"
+            style="left: {videoArrowPendingLeftPct}%; top: {videoArrowPendingTopPct}%;"
+          ></div>
+          <svg class="arrow-svg" if="hasVideoArrowLines" viewBox="0 0 100 100" preserveAspectRatio="none">
+            <defs>
+              <marker id="aiditor-video-arrowhead" markerWidth="8" markerHeight="8" refX="6" refY="4" orient="auto">
+                <polygon points="0 0, 8 4, 0 8" fill="#c586ff" />
+              </marker>
+            </defs>
+            <line
+              forEach="videoArrowDisplayItems"
+              trackBy="id"
+              x1="{x1Pct}"
+              y1="{y1Pct}"
+              x2="{x2Pct}"
+              y2="{y2Pct}"
+            />
+          </svg>
+          <div
+            class="arrow-end-pin"
+            forEach="videoArrowPinItems"
+            trackBy="id"
+            style="left: {leftPct}%; top: {topPct}%;"
+          >{indexLabel}</div>
+        </div>
+        <div class="visual-popovers" if="showVideoAnnotationPopoversAtPlayhead">
+          <div
+            class="{popoverFlipX ? visual-popover-flip-x} {popoverFlipY ? visual-popover-flip-y} visual-popover"
+            forEach="videoAnnotationRows"
+            trackBy="id"
+            ref="videoAnnotationRow"
+            data-annotation-id="{id}"
+            style="left: {leftPct}%; top: {topPct}%;"
+          >
+            <div class="visual-annotation-row-head">
+              <span class="visual-annotation-kind">{kindLabel}</span>
+              <div class="visual-annotation-actions">
+                <button type="button" class="visual-annotation-remove" title="Remove annotation">Remove</button>
+              </div>
+            </div>
+            <textarea
+              class="visual-annotation-instruction"
+              placeholder="Instruction for this annotation…"
+              data-annotation-id="{id}"
+              value="{instruction}"
+            ></textarea>
+            <div class="visual-annotation-files">
+              <div class="visual-attach-row">
+                <button type="button" class="visual-attach-btn visual-video-annotation-attach" data-annotation-id="{id}">
+                  Attach file
+                </button>
+              </div>
+              <div class="visual-attachment-chips" forEach="attachmentChips" trackBy="key">
+                <div class="visual-attachment-chip">
+                  <img if="thumbUrl" class="visual-attachment-thumb" src="{thumbUrl}" alt="" />
+                  <span class="visual-attachment-name">{name}</span>
+                  <button
+                    type="button"
+                    class="visual-attachment-remove-file"
+                    data-annotation-id="{annotationId}"
+                    data-att-key="{key}"
+                    aria-label="Remove attachment"
+                  >×</button>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+      <div class="video-review-transport">
+        <button type="button" class="video-play-pause-btn" ref="videoPlayPauseBtn" title="Play or pause" aria-label="Play or pause">{videoPlayPauseGlyph}</button>
+        <div class="video-timeline-wrap" ref="videoReviewTimelineWrap">
+        <input type="range" class="video-timeline" ref="videoTimeline" min="0" max="1000" value="0" step="1" />
+        <div class="video-timeline-markers" if="showVideoAnnotationsPanel">
+          <span
+            class="video-timeline-marker"
+            forEach="videoTimelineMarkers"
+            trackBy="key"
+            data-aiditor-timeline-marker=""
+            data-time-sec="{timeSec}"
+            style="left: {leftPct}%;"
+            title="{label}"
+          ></span>
+        </div>
+        </div>
+      </div>
+      <p class="visual-submit-error" if="showVideoSubmitError">{videoSubmitError}</p>
+      <p class="visual-submit-progress" if="showVideoSubmitProgress">{videoSubmitProgress}</p>
+      <div class="video-review-actions">
+        <button type="button" class="video-review-secondary" ref="videoReviewDiscardBtn">Discard recording</button>
+        <button type="button" class="video-review-primary" ref="videoReviewSendBtn" disabled="videoSendDisabled">Send</button>
+      </div>
+    </div>
+  </div>
+</div>
+</div>
+</body>
+</html>