@jay-framework/aiditor 0.17.3 → 0.18.0

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

@@ -105,6 +105,15 @@
     .chunk-error { color: #f48771; }
     .chunk-thinking { color: #666; font-style: italic; }
     .chunk-result { color: #89d185; }
+    .chunk-user { color: #c5e1a5; }
+    .chunk-user-prefix { color: #888; }
+    .agent-chat-row { display: flex; gap: 8px; padding: 8px 12px; border-top: 1px solid #3e3e3e; flex-shrink: 0; align-items: flex-end; }
+    .agent-chat-input { flex: 1; min-height: 32px; max-height: 96px; resize: none; background: #252526; color: #d4d4d4; border: 1px solid #3e3e3e; border-radius: 4px; padding: 6px 8px; font-family: 'Segoe UI', system-ui, sans-serif; font-size: 12px; line-height: 1.4; }
+    .agent-chat-input:focus { outline: none; border-color: #007acc; }
+    .agent-chat-input:disabled { opacity: 0.6; cursor: not-allowed; }
+    .agent-chat-send { background: #0e639c; color: #fff; border: none; border-radius: 4px; padding: 6px 14px; font-size: 12px; font-weight: 600; cursor: pointer; flex-shrink: 0; height: 32px; }
+    .agent-chat-send:hover:not(:disabled) { background: #1177bb; }
+    .agent-chat-send:disabled { opacity: 0.45; cursor: not-allowed; }
     .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; }
@@ -174,6 +183,110 @@
     .snapshot-discard-confirm { display: flex; align-items: center; gap: 10px; font-size: 13px; color: #f48771; }
     .snapshot-discard-confirm-msg { flex: 1; }
     .snapshot-overlay .arrow-svg line { marker-end: url(#aiditor-snapshot-arrowhead); }
+  .add-page-open-btn { margin-left: 12px; background: #0e639c; color: #fff; border: none; border-radius: 6px; padding: 6px 14px; font-size: 12px; font-weight: 600; cursor: pointer; flex-shrink: 0; }
+  .add-page-open-btn:hover { background: #1177bb; }
+  .add-page-open-btn:disabled { opacity: 0.5; cursor: not-allowed; }
+  .add-page-from-brief-btn { margin-left: 8px; background: #2d4a2d; color: #c5e1a5; border: 1px solid #4a6a4a; border-radius: 6px; padding: 6px 14px; font-size: 12px; font-weight: 600; cursor: pointer; flex-shrink: 0; }
+  .add-page-from-brief-btn:hover { background: #3a5a3a; color: #fff; }
+  .add-page-from-brief-btn:disabled { opacity: 0.5; cursor: not-allowed; }
+  .add-page-overlay { position: fixed; inset: 0; z-index: 300; background: rgba(0,0,0,0.45); display: flex; justify-content: flex-end; }
+  .project-settings-overlay { position: fixed; inset: 0; z-index: 350; background: rgba(0,0,0,0.5); display: flex; align-items: center; justify-content: center; padding: 24px; box-sizing: border-box; }
+  .project-settings-dialog { background: #252526; border: 1px solid #3e3e3e; border-radius: 8px; width: min(520px, 100%); max-height: min(80vh, 640px); display: flex; flex-direction: column; overflow: hidden; }
+  .project-settings-header { display: flex; align-items: center; justify-content: space-between; padding: 12px 16px; border-bottom: 1px solid #3e3e3e; }
+  .project-settings-title { font-size: 14px; font-weight: 600; color: #fff; }
+  .project-settings-close { background: none; border: none; color: #888; font-size: 20px; cursor: pointer; line-height: 1; }
+  .project-settings-body { padding: 14px 16px; overflow: auto; display: flex; flex-direction: column; gap: 12px; }
+  .project-settings-btn { background: #333; color: #ccc; border: 1px solid #3e3e3e; border-radius: 4px; padding: 6px 12px; font-size: 12px; cursor: pointer; }
+  .project-settings-btn:hover { background: #444; color: #fff; }
+  .add-page-plugin-picker { width: 100%; background: #252526; color: #ccc; border: 1px solid #3e3e3e; border-radius: 4px; font-size: 12px; padding: 6px 8px; margin-top: 6px; }
+  .add-page-manage-link { font-size: 11px; color: #9cdcfe; cursor: pointer; margin-top: 6px; background: none; border: none; padding: 0; text-align: left; }
+  .add-page-slideover { width: min(480px, 100vw); height: 100%; background: #1e1e1e; border-left: 1px solid #3e3e3e; display: flex; flex-direction: column; box-shadow: -4px 0 24px rgba(0,0,0,0.4); position: relative; }
+  .add-page-header { display: flex; align-items: center; gap: 8px; padding: 14px 16px; border-bottom: 1px solid #3e3e3e; flex-shrink: 0; }
+  .add-page-title { font-size: 14px; font-weight: 600; color: #9cdcfe; flex: 1; }
+  .add-page-close { background: none; border: none; color: #888; font-size: 20px; cursor: pointer; line-height: 1; padding: 0 4px; }
+  .add-page-close:hover { color: #fff; }
+  .add-page-body { flex: 1; overflow: auto; padding: 14px 16px; display: flex; flex-direction: column; gap: 16px; }
+  .add-page-section-label { font-size: 11px; font-weight: 600; color: #888; text-transform: uppercase; letter-spacing: 0.4px; margin-bottom: 6px; }
+  .add-page-section-header-row { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 6px; }
+  .add-page-section-header-row .add-page-section-label { margin-bottom: 0; flex: 1; }
+  .add-page-fill-from-image-btn { background: #2d2d30; color: #9cdcfe; border: 1px solid #3e3e3e; border-radius: 4px; padding: 4px 10px; font-size: 11px; font-weight: 600; cursor: pointer; flex-shrink: 0; }
+  .add-page-fill-from-image-btn:hover { background: #3c3c3c; color: #fff; }
+  .add-page-fill-from-image-btn:disabled { opacity: 0.45; cursor: not-allowed; }
+  .add-page-suggested-route { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; background: #252526; border: 1px solid #3e3e3e; border-radius: 6px; padding: 8px 10px; font-size: 12px; color: #ccc; margin-bottom: 8px; }
+  .add-page-suggested-route code { font-family: ui-monospace, monospace; color: #ce9178; }
+  .add-page-brief-fill-popover { position: absolute; inset: 0; z-index: 10; background: rgba(0,0,0,0.55); display: flex; align-items: center; justify-content: center; padding: 16px; box-sizing: border-box; }
+  .add-page-brief-fill-panel { background: #252526; border: 1px solid #3e3e3e; border-radius: 8px; width: min(420px, 100%); max-height: 90%; overflow: auto; padding: 14px 16px; display: flex; flex-direction: column; gap: 10px; }
+  .add-page-brief-fill-header { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
+  .add-page-brief-fill-title { font-size: 13px; font-weight: 600; color: #9cdcfe; }
+  .add-page-brief-fill-context { width: 100%; min-height: 64px; background: #1e1e1e; color: #d4d4d4; border: 1px solid #3e3e3e; border-radius: 6px; padding: 8px; font-size: 12px; font-family: ui-monospace, monospace; resize: vertical; box-sizing: border-box; }
+  .add-page-brief-fill-dropzone { border: 1px dashed #3e3e3e; border-radius: 8px; padding: 14px; text-align: center; color: #888; font-size: 12px; cursor: pointer; }
+  .add-page-brief-fill-dropzone-disabled { opacity: 0.45; cursor: not-allowed; pointer-events: none; }
+  .add-page-brief-fill-context:disabled { opacity: 0.6; cursor: not-allowed; }
+  .add-page-brief-fill-dropzone:focus { outline: 1px solid #0e639c; }
+  .add-page-brief-fill-thumbs { display: flex; flex-wrap: wrap; gap: 8px; }
+  .add-page-brief-fill-thumb { position: relative; width: 72px; height: 72px; border-radius: 6px; overflow: hidden; border: 1px solid #3e3e3e; background: #1e1e1e; }
+  .add-page-brief-fill-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
+  .add-page-brief-fill-thumb-remove { position: absolute; top: 2px; right: 2px; background: rgba(0,0,0,0.7); color: #fff; border: none; border-radius: 3px; width: 18px; height: 18px; font-size: 12px; line-height: 1; cursor: pointer; padding: 0; }
+  .add-page-brief-fill-actions { display: flex; gap: 8px; justify-content: flex-end; margin-top: 4px; }
+  .add-page-route-row { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
+  .add-page-route-input { flex: 1; min-width: 160px; background: #252526; color: #d4d4d4; border: 1px solid #3e3e3e; border-radius: 6px; padding: 8px 10px; font-size: 13px; font-family: ui-monospace, monospace; box-sizing: border-box; }
+  .add-page-route-input:focus { border-color: #0e639c; outline: none; }
+  .add-page-route-badge { font-size: 10px; color: #ce9178; background: #2d2d30; padding: 2px 8px; border-radius: 4px; }
+  .add-page-field-error { font-size: 12px; color: #f48771; margin-top: 4px; }
+  .add-page-hint { font-size: 12px; color: #888; margin-top: 4px; }
+  .add-page-textarea { width: 100%; min-height: 120px; background: #252526; color: #d4d4d4; border: 1px solid #3e3e3e; border-radius: 6px; padding: 10px; font-size: 12px; font-family: ui-monospace, monospace; resize: vertical; box-sizing: border-box; outline: none; }
+  .add-page-textarea:focus { border-color: #0e639c; }
+  .add-page-dropzone { border: 1px dashed #3e3e3e; border-radius: 8px; padding: 16px; text-align: center; color: #888; font-size: 12px; }
+  .add-page-chips { display: flex; flex-direction: column; gap: 6px; margin-top: 8px; }
+  .add-page-chip { display: flex; align-items: center; gap: 8px; background: #252526; border: 1px solid #3e3e3e; border-radius: 6px; padding: 6px 8px; font-size: 11px; }
+  .add-page-chip-name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: #ccc; }
+  .add-page-chip-path { font-size: 10px; color: #666; font-family: ui-monospace, monospace; }
+  .add-page-chip select { background: #1e1e1e; color: #ccc; border: 1px solid #3e3e3e; border-radius: 4px; font-size: 11px; padding: 2px 4px; }
+  .add-page-chip-remove { background: none; border: none; color: #888; cursor: pointer; font-size: 14px; padding: 0 4px; }
+  .add-page-chip-remove:hover { color: #f48771; }
+  .add-page-plugins { border: 1px solid #3e3e3e; border-radius: 6px; padding: 10px; margin-top: 8px; display: flex; flex-direction: column; gap: 12px; max-height: 320px; overflow: auto; }
+  .add-page-plugins-zone-title { font-size: 11px; font-weight: 600; color: #aaa; text-transform: uppercase; letter-spacing: 0.04em; margin-bottom: 4px; }
+  .add-page-plugin-row { display: flex; align-items: center; gap: 8px; padding: 4px 0; font-size: 11px; border-bottom: 1px solid #2d2d30; }
+  .add-page-plugin-row:last-child { border-bottom: none; }
+  .add-page-plugin-label { flex: 1; color: #ccc; }
+  .add-page-plugin-btn { background: #333; color: #ccc; border: 1px solid #3e3e3e; border-radius: 4px; padding: 2px 8px; font-size: 10px; cursor: pointer; }
+  .add-page-plugin-btn:hover { background: #444; color: #fff; }
+  .add-page-plugin-btn:disabled { opacity: 0.45; cursor: not-allowed; }
+  .add-page-setup-ok { color: #89d185; font-size: 10px; }
+  .add-page-setup-warn { color: #dcdcaa; font-size: 10px; }
+  .add-page-setup-error { color: #f48771; font-size: 10px; }
+  .add-page-plugin-contract { padding-left: 0; font-size: 11px; color: #999; display: flex; flex-direction: column; gap: 4px; margin-top: 6px; }
+  .add-page-plugin-contract-row { display: flex; align-items: center; gap: 8px; padding: 4px 0; border-bottom: 1px solid #2d2d30; }
+  .add-page-plugin-contract-row:last-child { border-bottom: none; }
+  .add-page-plugin-contract-name { flex: 1; color: #ccc; font-size: 11px; }
+  .add-page-plugin-contract-added { font-size: 10px; color: #89d185; }
+  .add-page-plugin-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 4px; }
+  .add-page-plugin-chip { background: #2d2d30; border: 1px solid #3e3e3e; border-radius: 4px; padding: 2px 6px; font-size: 10px; color: #ccc; display: flex; align-items: center; gap: 4px; }
+  .add-page-plugin-chip-remove { background: none; border: none; color: #888; cursor: pointer; padding: 0 2px; }
+  .add-page-plugins-warn { font-size: 11px; color: #dcdcaa; margin-top: 4px; }
+  .add-page-install-live { font-size: 11px; color: #888; }
+  .add-page-local-plugin-form { display: flex; flex-direction: column; gap: 6px; margin-top: 8px; padding-top: 8px; border-top: 1px solid #3e3e3e; }
+  .add-page-local-plugin-form input { background: #252526; color: #ccc; border: 1px solid #3e3e3e; border-radius: 4px; padding: 4px 6px; font-size: 11px; }
+  .annotation-binding { margin-top: 6px; border-top: 1px solid #3e3e3e; padding-top: 6px; }
+  .annotation-binding-toggle { background: none; border: none; color: #9cdcfe; font-size: 11px; cursor: pointer; padding: 0; text-align: left; }
+  .annotation-binding-panel { display: flex; flex-direction: column; gap: 6px; margin-top: 6px; font-size: 11px; color: #ccc; }
+  .annotation-binding-preview { font-size: 10px; color: #89d185; margin: 0; }
+  .annotation-binding-panel label { display: flex; flex-direction: column; gap: 2px; }
+  .annotation-binding-panel select { background: #252526; color: #ccc; border: 1px solid #3e3e3e; border-radius: 4px; font-size: 11px; }
+  .annotation-binding-scope-row { display: flex; gap: 10px; flex-wrap: wrap; }
+  .annotation-binding-install { background: #0e639c; color: #fff; border: none; border-radius: 4px; padding: 4px 8px; font-size: 10px; cursor: pointer; align-self: flex-start; }
+  .add-page-footer { display: flex; gap: 8px; padding: 12px 16px; border-top: 1px solid #3e3e3e; flex-shrink: 0; }
+  .add-page-btn { flex: 1; padding: 10px; border-radius: 6px; font-size: 13px; font-weight: 600; cursor: pointer; border: 1px solid #3e3e3e; }
+  .add-page-btn-cancel { background: #2d2d30; color: #ccc; }
+  .add-page-btn-primary { background: #0e639c; color: #fff; border-color: #0e639c; }
+  .add-page-btn-primary:disabled { opacity: 0.45; cursor: not-allowed; }
+  .add-page-result-banner { margin: 0 20px 8px; padding: 10px 14px; border-radius: 8px; font-size: 12px; display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
+  .add-page-result-success { background: #1e3a1e; border: 1px solid #3a5a3a; color: #89d185; }
+  .add-page-result-failed { background: #3a1f1f; border: 1px solid #5a3030; color: #f48771; }
+  .add-page-result-actions { display: flex; gap: 8px; margin-left: auto; }
+  .add-page-result-btn { background: #333; color: #ccc; border: 1px solid #3e3e3e; border-radius: 4px; padding: 4px 10px; font-size: 11px; cursor: pointer; }
+  .add-page-result-btn:hover { background: #444; color: #fff; }
+  .add-page-hidden-file { display: none; }
   </style>
   <script type="application/jay-data">
 data:
@@ -191,6 +304,12 @@ data:
       cssClass: string
       filePath: string
       toolName: string
+      showUserPrefix: boolean
+    agentChatMessage: string
+    showAgentChatInput: boolean
+    agentChatInputDisabled: boolean
+    agentChatSendDisabled: boolean
+    agentChatPlaceholder: string
     hasChunks: boolean
     outputEmpty: boolean
     pageSelectOptions:
@@ -274,6 +393,31 @@ data:
         name: string
         thumbUrl: string
         annotationId: string
+      bindingSectionOpen: boolean
+      showBindingControls: boolean
+      showMarkerHasBindingChips: boolean
+      showMarkerBindingEmptyHint: boolean
+      markerBindingChips:
+      - rowKey: string
+        label: string
+        pluginName: string
+        packageName: string
+        contractName: string
+        scope: string
+      markerPluginOptions:
+      - rowKey: string
+        value: string
+        label: string
+      showMarkerContractPicker: boolean
+      markerPickerPluginLabel: string
+      markerContractPickerRows:
+      - rowKey: string
+        pluginName: string
+        packageName: string
+        contractName: string
+        description: string
+        onPage: boolean
+        componentKey: string
     recordingDraftUi:
       id: string
       kindLabel: string
@@ -360,6 +504,31 @@ data:
         name: string
         thumbUrl: string
         annotationId: string
+      bindingSectionOpen: boolean
+      showBindingControls: boolean
+      showMarkerHasBindingChips: boolean
+      showMarkerBindingEmptyHint: boolean
+      markerBindingChips:
+      - rowKey: string
+        label: string
+        pluginName: string
+        packageName: string
+        contractName: string
+        scope: string
+      markerPluginOptions:
+      - rowKey: string
+        value: string
+        label: string
+      showMarkerContractPicker: boolean
+      markerPickerPluginLabel: string
+      markerContractPickerRows:
+      - rowKey: string
+        pluginName: string
+        packageName: string
+        contractName: string
+        description: string
+        onPage: boolean
+        componentKey: string
     showVideoAnnotationsPanel: boolean
     videoModalOverlayPointerNone: boolean
     videoSubmitError: string
@@ -436,9 +605,146 @@ data:
         name: string
         thumbUrl: string
         annotationId: string
+      bindingSectionOpen: boolean
+      showBindingControls: boolean
+      showMarkerHasBindingChips: boolean
+      showMarkerBindingEmptyHint: boolean
+      markerBindingChips:
+      - rowKey: string
+        label: string
+        pluginName: string
+        packageName: string
+        contractName: string
+        scope: string
+      markerPluginOptions:
+      - rowKey: string
+        value: string
+        label: string
+      showMarkerContractPicker: boolean
+      markerPickerPluginLabel: string
+      markerContractPickerRows:
+      - rowKey: string
+        pluginName: string
+        packageName: string
+        contractName: string
+        description: string
+        onPage: boolean
+        componentKey: string
     showSnapshotAnnotationsPanel: boolean
     showSnapshotSubmitError: boolean
     snapshotSubmitError: string
+    showAddPageComposer: boolean
+    addPageRoute: string
+    addPageContentMd: string
+    addPageDesignMd: string
+    addPageRouteError: string
+    showAddPageRouteError: boolean
+    addPageComposerError: string
+    showAddPageComposerError: boolean
+    addPageUploadHint: string
+    showAddPageUploadHint: boolean
+    addPageIsDynamicRoute: boolean
+    addPageShowDesignHint: boolean
+    addPageCreateDisabled: boolean
+    addPageRunningHint: string
+    showAddPageRunningHint: boolean
+    showAddPageAttachments: boolean
+    addPageAttachmentRows:
+    - rowKey: string
+      id: string
+      filename: string
+      path: string
+      role: string
+      roleLabel: string
+    showProjectSettingsModal: boolean
+    showProjectSettingsPluginsPanel: boolean
+    showProjectSettingsInstallZone: boolean
+    showProjectSettingsInstalledZone: boolean
+    projectSettingsInstallRows:
+    - rowKey: string
+      pluginName: string
+      packageName: string
+      description: string
+      buttonLabel: string
+      buttonDisabled: boolean
+    projectSettingsInstalledRows:
+    - rowKey: string
+      pluginName: string
+      packageName: string
+      description: string
+      versionLabel: string
+      setupBadge: string
+      setupBadgeClass: string
+      configFile: string
+      showConfig: boolean
+      contractSummary: string
+      showCheckForUpdateBtn: boolean
+      showRunUpdateBtn: boolean
+      updateButtonLabel: string
+      updateButtonDisabled: boolean
+    showProjectSettingsPluginsError: boolean
+    showFixInstallWithAgent: boolean
+    fixInstallPluginName: string
+    projectSettingsPluginsError: string
+    showProjectSettingsInstallProgress: boolean
+    projectSettingsInstallProgress: string
+    showProjectSettingsWixConfigWarning: boolean
+    showProjectSettingsReloadPreview: boolean
+    showProjectLocalPluginForm: boolean
+    projectLocalPluginName: string
+    projectLocalPackageName: string
+    projectLocalPath: string
+    showAddPagePluginsPanel: boolean
+    showAddPagePagePluginsZone: boolean
+    addPagePluginPickerOptions:
+    - rowKey: string
+      value: string
+      label: string
+    addPagePluginPickerValue: string
+    showAddPageContractPicker: boolean
+    addPagePickerPluginLabel: string
+    addPageContractPickerRows:
+    - rowKey: string
+      pluginName: string
+      packageName: string
+      contractName: string
+      description: string
+      onPage: boolean
+      componentKey: string
+    addPagePagePluginChips:
+    - rowKey: string
+      label: string
+      pluginName: string
+      packageName: string
+      contractName: string
+      componentKey: string
+    showAddPageHasPagePluginChips: boolean
+    showAddPagePagePluginsEmptyHint: boolean
+    showAddPageResultBanner: boolean
+    addPageResultBannerClass: string
+    addPageResultBannerMessage: string
+    showAddPageRetry: boolean
+    showAddPageFixWithAiditor: boolean
+    showAddPageFromBriefBtn: boolean
+    showBriefFillPopover: boolean
+    briefFillContextNotes: string
+    briefFillPopoverError: string
+    showBriefFillPopoverError: boolean
+    briefFillDisabled: boolean
+    briefFillInputDisabled: boolean
+    briefFillDropzoneClass: string
+    addPageBriefFillGenerateDisabled: boolean
+    briefFillStatusHint: string
+    showBriefFillStatusHint: boolean
+    showBriefFillThumbnails: boolean
+    addPageBriefFillThumbRows:
+    - rowKey: string
+      name: string
+      thumbUrl: string
+      index: number
+      removeDisabled: boolean
+    showSuggestedRouteBanner: boolean
+    suggestedRouteLabel: string
   </script>
 </head>
 <body>
@@ -478,6 +784,9 @@ data:
           <span class="params-loading-hint" if="paramsLoadingHint">{paramsLoadingHint}</span>
         </div>
       </div>
+      <button type="button" class="project-settings-btn" ref="projectSettingsBtn" disabled="isRunning">Project settings</button>
+      <button type="button" class="add-page-open-btn" ref="addPageOpenBtn" disabled="isRunning">Add Page</button>
+      <button type="button" class="add-page-from-brief-btn" ref="addPageFromBriefBtn" if="showAddPageFromBriefBtn" disabled="isRunning">Page Briefs</button>
     </div>
 
     <div class="preview-stack" if="isPreviewMode">
@@ -640,6 +949,36 @@ data:
               data-annotation-id="{id}"
               value="{instruction}"
             ></textarea>
+            <div class="annotation-binding">
+              <button type="button" class="annotation-binding-toggle">Components (optional)</button>
+              <div class="annotation-binding-panel" if="showBindingControls">
+                <div if="showMarkerHasBindingChips">
+                  <div class="add-page-plugins-zone-title">Components on this marker</div>
+                  <div class="add-page-plugin-chips">
+                    <span class="add-page-plugin-chip" forEach="markerBindingChips" trackBy="rowKey">{label}<button type="button" class="add-page-plugin-chip-remove" data-marker-remove-binding="1" data-plugin="{pluginName}" data-contract="{contractName}" title="Remove from marker">×</button></span>
+                  </div>
+                </div>
+                <p class="add-page-hint" if="showMarkerBindingEmptyHint">No components yet — pick a plugin below and click Add for each component you need.</p>
+                <div class="add-page-plugins-zone-title">Add component</div>
+                <label class="add-page-hint">Plugin
+                  <select class="annotation-binding-plugin">
+                    <option value="">— Select plugin —</option>
+                    <option forEach="markerPluginOptions" trackBy="rowKey" value="{value}">{label}</option>
+                  </select>
+                </label>
+                <button type="button" class="add-page-manage-link" data-marker-manage-plugins="1">Manage plugins…</button>
+                <div if="showMarkerContractPicker">
+                  <p class="add-page-hint">{markerPickerPluginLabel}</p>
+                  <div class="add-page-plugin-contract">
+                    <div class="add-page-plugin-contract-row" forEach="markerContractPickerRows" trackBy="rowKey">
+                      <span class="add-page-plugin-contract-name">{contractName}</span>
+                      <button type="button" class="add-page-plugin-btn" if="!onPage" data-marker-add-contract="1" data-plugin="{pluginName}" data-package="{packageName}" data-contract="{contractName}" data-key="{componentKey}">Add</button>
+                      <span class="add-page-plugin-contract-added" if="onPage">Added</span>
+                    </div>
+                  </div>
+                </div>
+              </div>
+            </div>
             <div class="visual-annotation-files">
               <div class="visual-attach-row">
                 <button type="button" class="visual-attach-btn visual-annotation-attach" data-annotation-id="{id}">
@@ -667,17 +1006,219 @@ data:
     </div>
 
   </main>
+  <div class="add-page-result-slot" ref="addPageResultBannerSlot">
+    <div class="{addPageResultBannerClass} add-page-result-banner" if="showAddPageResultBanner">
+      <span>{addPageResultBannerMessage}</span>
+      <div class="add-page-result-actions">
+        <button type="button" class="add-page-result-btn" data-add-page-retry="1" if="showAddPageRetry">Retry</button>
+        <button type="button" class="add-page-result-btn" data-add-page-fix="1" if="showAddPageFixWithAiditor">Fix with AIditor</button>
+      </div>
+    </div>
+  </div>
+  <div class="{bottomPanelClass}">
+    <div class="bottom-panel-resize" ref="bottomPanelResize"></div>
+    <div class="bottom-panel-header" ref="bottomPanelHeader">
+      <span class="bottom-panel-title">Agent 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="showUserPrefix" class="chunk-user-prefix">You: </span><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 class="agent-chat-row" if="showAgentChatInput">
+      <textarea class="agent-chat-input" ref="agentChatInput" rows="1" value="{agentChatMessage}" placeholder="{agentChatPlaceholder}" disabled="agentChatInputDisabled" aria-label="Message to agent"></textarea>
+      <button type="button" class="agent-chat-send" ref="agentChatSendBtn" disabled="agentChatSendDisabled" aria-label="Send message">Send</button>
+    </div>
+  </div>
+</div>
+
+<div class="project-settings-overlay" if="showProjectSettingsModal" ref="projectSettingsOverlay" role="dialog" aria-modal="true" aria-label="Project settings">
+  <div class="project-settings-dialog">
+    <div class="project-settings-header">
+      <span class="project-settings-title">Project settings</span>
+      <button type="button" class="project-settings-close" ref="projectSettingsCloseBtn" aria-label="Close">×</button>
+    </div>
+    <div class="project-settings-body">
+      <div class="add-page-plugins-zone-title">Plugins</div>
+      <p class="add-page-hint">Install plugins once for the project. Add Page and markers use installed plugins only.</p>
+      <div class="add-page-plugins" ref="projectPluginsPanel" if="showProjectSettingsPluginsPanel" aria-live="polite">
+        <p class="add-page-install-live" if="showProjectSettingsInstallProgress">{projectSettingsInstallProgress}</p>
+        <div class="add-page-install-error-row" if="showProjectSettingsPluginsError">
+          <p class="add-page-field-error">{projectSettingsPluginsError}</p>
+          <button type="button" class="add-page-plugin-btn add-page-plugin-btn-primary" data-project-fix-install-agent="1" data-plugin="{fixInstallPluginName}" if="showFixInstallWithAgent">Fix with agent</button>
+        </div>
+        <p class="add-page-plugins-warn" if="showProjectSettingsWixConfigWarning">Wix credentials missing — configure config/.wix.yaml in your IDE.</p>
+        <p class="add-page-plugins-warn" if="showProjectSettingsReloadPreview">Refreshing project… If preview breaks, reload the preview.</p>
+        <div if="showProjectSettingsInstallZone">
+          <div class="add-page-plugins-zone-title">Install plugin</div>
+          <div class="add-page-plugin-row" forEach="projectSettingsInstallRows" trackBy="rowKey">
+            <span class="add-page-plugin-label">{pluginName} — {description}</span>
+            <button type="button" class="add-page-plugin-btn" data-project-install-plugin="1" data-plugin="{pluginName}" disabled="buttonDisabled">{buttonLabel}</button>
+          </div>
+        </div>
+        <div if="showProjectSettingsInstalledZone">
+          <div class="add-page-plugins-zone-title">Installed plugins</div>
+          <div class="add-page-plugin-row add-page-plugin-row-installed" forEach="projectSettingsInstalledRows" trackBy="rowKey">
+            <span class="add-page-plugin-label" if="versionLabel">{pluginName} ({versionLabel})</span>
+            <span class="add-page-plugin-label" if="!versionLabel">{pluginName}</span>
+            <span class="{setupBadgeClass}" if="setupBadge">{setupBadge}</span>
+            <button type="button" class="add-page-plugin-btn" data-project-check-update="1" data-plugin="{pluginName}" disabled="updateButtonDisabled" if="showCheckForUpdateBtn">{updateButtonLabel}</button>
+            <button type="button" class="add-page-plugin-btn add-page-plugin-btn-primary" data-project-run-update="1" data-plugin="{pluginName}" disabled="updateButtonDisabled" if="showRunUpdateBtn">{updateButtonLabel}</button>
+            <button type="button" class="add-page-plugin-btn" data-project-rerun-setup="1" data-plugin="{pluginName}" if="setupBadge">Re-run setup</button>
+            <button type="button" class="add-page-plugin-btn" data-project-open-config="1" data-config="{configFile}" if="showConfig">Open config</button>
+            <span class="add-page-hint" if="contractSummary">{contractSummary}</span>
+          </div>
+        </div>
+        <div class="add-page-local-plugin-form" if="showProjectLocalPluginForm">
+          <div class="add-page-plugins-zone-title">Add local plugin</div>
+          <input type="text" class="project-local-name" ref="projectLocalPluginNameInput" value="{projectLocalPluginName}" placeholder="Plugin name" />
+          <input type="text" class="project-local-package" ref="projectLocalPackageInput" value="{projectLocalPackageName}" placeholder="Package name" />
+          <input type="text" class="project-local-path" ref="projectLocalPathInput" value="{projectLocalPath}" placeholder="Relative path" />
+          <button type="button" class="add-page-plugin-btn" data-project-save-local-plugin="1">Save to plugin-sources.yaml</button>
+          <button type="button" class="add-page-plugin-btn" data-project-cancel-local-plugin="1">Cancel</button>
+        </div>
+        <button type="button" class="add-page-plugin-btn" data-project-show-local-plugin="1" if="!showProjectLocalPluginForm">Add local plugin</button>
+      </div>
+    </div>
+  </div>
+</div>
+
+<div class="add-page-overlay" if="showAddPageComposer" ref="addPageOverlay" role="dialog" aria-modal="true" aria-label="Add Page">
+  <div class="add-page-slideover" ref="addPageSlideover">
+    <div class="add-page-header">
+      <span class="add-page-title">Add Page</span>
+      <button type="button" class="add-page-close" ref="addPageCloseBtn" aria-label="Close">×</button>
+    </div>
+    <div class="add-page-body">
+      <section>
+        <div class="add-page-section-label">Page route</div>
+        <div class="add-page-route-row">
+          <input type="text" class="add-page-route-input" ref="addPageRouteInput" value="{addPageRoute}" placeholder="/pricing or /products/[slug]" />
+          <span class="add-page-route-badge" if="addPageIsDynamicRoute">Dynamic route</span>
+        </div>
+        <p class="add-page-field-error" if="showAddPageRouteError">{addPageRouteError}</p>
+        <div class="add-page-suggested-route" if="showSuggestedRouteBanner">
+          <span>Suggested route: <code>{suggestedRouteLabel}</code></span>
+          <button type="button" class="add-page-btn add-page-btn-primary" ref="addPageSuggestedRouteApplyBtn" style="flex:0;padding:4px 10px;font-size:11px">Apply route</button>
+          <button type="button" class="add-page-btn add-page-btn-cancel" ref="addPageSuggestedRouteDismissBtn" style="flex:0;padding:4px 10px;font-size:11px">Dismiss</button>
+        </div>
+      </section>
+      <section>
+        <div class="add-page-section-header-row">
+          <div class="add-page-section-label">Content</div>
+          <button type="button" class="add-page-fill-from-image-btn" ref="addPageFillContentFromImageBtn" title="Generate markdown from screenshot(s) using AI" disabled="briefFillDisabled">Fill from image</button>
+        </div>
+        <p class="add-page-hint">Behavior, plugins, contracts, interactions, copy.</p>
+        <textarea class="add-page-textarea" ref="addPageContentMd" placeholder="# Pricing page&#10;- Headless: none (static marketing page)&#10;- Show 3 tiers: Starter / Pro / Enterprise">{addPageContentMd}</textarea>
+        <div class="add-page-plugins" ref="addPagePluginsPanel" if="showAddPagePluginsPanel" aria-live="polite">
+          <div if="showAddPagePagePluginsZone">
+            <div class="add-page-plugins-zone-title">Plugins on this page</div>
+            <div if="showAddPageHasPagePluginChips">
+              <div class="add-page-plugins-zone-title">Components on this page</div>
+              <div class="add-page-plugin-chips">
+                <span class="add-page-plugin-chip" forEach="addPagePagePluginChips" trackBy="rowKey">{label}<button type="button" class="add-page-plugin-chip-remove" data-add-page-remove-chip="1" data-plugin="{pluginName}" data-package="{packageName}" data-contract="{contractName}" title="Remove from page">×</button></span>
+              </div>
+            </div>
+            <p class="add-page-hint" if="showAddPagePagePluginsEmptyHint">No components yet — pick a plugin below and click Add on each component you need.</p>
+            <div class="add-page-plugins-zone-title">Add component</div>
+            <label class="add-page-hint">Plugin
+              <select class="add-page-plugin-picker" ref="addPagePluginPicker" value="{addPagePluginPickerValue}">
+                <option value="">— Select plugin —</option>
+                <option forEach="addPagePluginPickerOptions" trackBy="rowKey" value="{value}">{label}</option>
+              </select>
+            </label>
+            <button type="button" class="add-page-manage-link" data-add-page-manage-plugins="1">Manage plugins…</button>
+            <div if="showAddPageContractPicker">
+              <p class="add-page-hint">{addPagePickerPluginLabel}</p>
+              <div class="add-page-plugin-contract">
+                <div class="add-page-plugin-contract-row" forEach="addPageContractPickerRows" trackBy="rowKey">
+                  <span class="add-page-plugin-contract-name">{contractName}</span>
+                  <button type="button" class="add-page-plugin-btn" if="!onPage" data-add-page-add-contract="1" data-plugin="{pluginName}" data-package="{packageName}" data-contract="{contractName}" data-key="{componentKey}">Add</button>
+                  <span class="add-page-plugin-contract-added" if="onPage">Added</span>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </section>
+      <section>
+        <div class="add-page-section-header-row">
+          <div class="add-page-section-label">Design</div>
+          <button type="button" class="add-page-fill-from-image-btn" ref="addPageFillDesignFromImageBtn" title="Generate markdown from screenshot(s) using AI" disabled="briefFillDisabled">Fill from image</button>
+        </div>
+        <p class="add-page-hint">Layout, colors, typography, breakpoints.</p>
+        <textarea class="add-page-textarea" ref="addPageDesignMd" placeholder="- Match site header from home&#10;- Hero: centered H1, muted subtitle (#888)">{addPageDesignMd}</textarea>
+        <p class="add-page-hint" if="addPageShowDesignHint">Add a mock or screenshot for better layout fidelity.</p>
+      </section>
+      <section>
+        <div class="add-page-section-label">References</div>
+        <div class="add-page-dropzone" ref="addPageReferenceDrop">Drop reference files here</div>
+        <button type="button" class="add-page-btn add-page-btn-cancel" ref="addPageAttachReferenceBtn" style="margin-top:8px;width:100%">Attach reference</button>
+        <input type="file" class="add-page-hidden-file" ref="addPageReferenceFileInput" multiple />
+        <p class="add-page-hint" if="showAddPageUploadHint">{addPageUploadHint}</p>
+        <div class="add-page-chips" ref="addPageAttachmentsList" if="showAddPageAttachments">
+          <div class="add-page-chip" forEach="addPageAttachmentRows" trackBy="rowKey">
+            <span class="add-page-chip-name">{filename}</span>
+            <select data-attachment-id="{id}" value="{role}">
+              <option value="reference">Reference</option>
+              <option value="asset">Asset</option>
+            </select>
+            <span class="add-page-chip-path">{path}</span>
+            <button type="button" class="add-page-chip-remove" data-add-page-remove="{id}">×</button>
+          </div>
+        </div>
+      </section>
+      <p class="add-page-field-error" if="showAddPageComposerError">{addPageComposerError}</p>
+      <p class="add-page-hint" if="showAddPageRunningHint">{addPageRunningHint}</p>
+    </div>
+    <div class="add-page-footer">
+      <button type="button" class="add-page-btn add-page-btn-cancel" ref="addPageCancelBtn">Cancel</button>
+      <button type="button" class="add-page-btn add-page-btn-primary" ref="addPageCreateBtn" disabled="addPageCreateDisabled">Create page</button>
+    </div>
+    <div class="add-page-brief-fill-popover" if="showBriefFillPopover" ref="addPageBriefFillPopover">
+      <div class="add-page-brief-fill-panel">
+        <div class="add-page-brief-fill-header">
+          <span class="add-page-brief-fill-title">Fill from image</span>
+          <button type="button" class="add-page-close" ref="addPageBriefFillCloseBtn" aria-label="Close">×</button>
+        </div>
+        <p class="add-page-hint">Add at least one screenshot. Optional notes help the AI (e.g. Image 1 = desktop, Image 2 = mobile).</p>
+        <label class="add-page-hint">Context notes
+          <textarea class="add-page-brief-fill-context" ref="addPageBriefFillContextNotes" placeholder="Route: /pricing&#10;Match header from home&#10;Image 2 = mobile frame" value="{briefFillContextNotes}" disabled="briefFillInputDisabled"></textarea>
+        </label>
+        <div class="{briefFillDropzoneClass}" ref="addPageBriefFillDropzone" tabindex="0">Paste (⌘V), drag-drop, or click to upload (max 5 images)</div>
+        <input type="file" class="add-page-hidden-file" ref="addPageBriefFillFileInput" accept="image/*" multiple disabled="briefFillInputDisabled" />
+        <div class="add-page-brief-fill-thumbs" ref="addPageBriefFillThumbnails" if="showBriefFillThumbnails">
+          <div class="add-page-brief-fill-thumb" forEach="addPageBriefFillThumbRows" trackBy="rowKey">
+            <img src="{thumbUrl}" alt="{name}" />
+            <button type="button" class="add-page-brief-fill-thumb-remove" data-brief-fill-remove="{index}" disabled="removeDisabled">×</button>
+          </div>
+        </div>
+        <p class="add-page-field-error" if="showBriefFillPopoverError">{briefFillPopoverError}</p>
+        <p class="add-page-hint" if="showBriefFillStatusHint">{briefFillStatusHint}</p>
+        <div class="add-page-brief-fill-actions">
+          <button type="button" class="add-page-btn add-page-btn-cancel" ref="addPageBriefFillCancelBtn">Cancel</button>
+          <button type="button" class="add-page-btn add-page-btn-primary" ref="addPageBriefFillGenerateBtn" disabled="addPageBriefFillGenerateDisabled" style="flex:0">Generate</button>
+        </div>
+      </div>
+    </div>
+  </div>
   <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-title">Agent 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 class="{cssClass}" forEach="chunks" trackBy="text"><span if="showUserPrefix" class="chunk-user-prefix">You: </span><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 class="agent-chat-row" if="showAgentChatInput">
+      <textarea class="agent-chat-input" ref="agentChatInput" rows="1" value="{agentChatMessage}" placeholder="{agentChatPlaceholder}" disabled="agentChatInputDisabled" aria-label="Message to agent"></textarea>
+      <button type="button" class="agent-chat-send" ref="agentChatSendBtn" disabled="agentChatSendDisabled" aria-label="Send message">Send</button>
     </div>
   </div>
 </div>
@@ -793,6 +1334,36 @@ data:
               data-annotation-id="{id}"
               value="{instruction}"
             ></textarea>
+            <div class="annotation-binding">
+              <button type="button" class="annotation-binding-toggle">Components (optional)</button>
+              <div class="annotation-binding-panel" if="showBindingControls">
+                <div if="showMarkerHasBindingChips">
+                  <div class="add-page-plugins-zone-title">Components on this marker</div>
+                  <div class="add-page-plugin-chips">
+                    <span class="add-page-plugin-chip" forEach="markerBindingChips" trackBy="rowKey">{label}<button type="button" class="add-page-plugin-chip-remove" data-marker-remove-binding="1" data-plugin="{pluginName}" data-contract="{contractName}" title="Remove from marker">×</button></span>
+                  </div>
+                </div>
+                <p class="add-page-hint" if="showMarkerBindingEmptyHint">No components yet — pick a plugin below and click Add for each component you need.</p>
+                <div class="add-page-plugins-zone-title">Add component</div>
+                <label class="add-page-hint">Plugin
+                  <select class="annotation-binding-plugin">
+                    <option value="">— Select plugin —</option>
+                    <option forEach="markerPluginOptions" trackBy="rowKey" value="{value}">{label}</option>
+                  </select>
+                </label>
+                <button type="button" class="add-page-manage-link" data-marker-manage-plugins="1">Manage plugins…</button>
+                <div if="showMarkerContractPicker">
+                  <p class="add-page-hint">{markerPickerPluginLabel}</p>
+                  <div class="add-page-plugin-contract">
+                    <div class="add-page-plugin-contract-row" forEach="markerContractPickerRows" trackBy="rowKey">
+                      <span class="add-page-plugin-contract-name">{contractName}</span>
+                      <button type="button" class="add-page-plugin-btn" if="!onPage" data-marker-add-contract="1" data-plugin="{pluginName}" data-package="{packageName}" data-contract="{contractName}" data-key="{componentKey}">Add</button>
+                      <span class="add-page-plugin-contract-added" if="onPage">Added</span>
+                    </div>
+                  </div>
+                </div>
+              </div>
+            </div>
             <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}">
@@ -929,6 +1500,36 @@ data:
             data-annotation-id="{id}"
             value="{instruction}"
           ></textarea>
+          <div class="annotation-binding">
+            <button type="button" class="annotation-binding-toggle">Components (optional)</button>
+            <div class="annotation-binding-panel" if="showBindingControls">
+              <div if="showMarkerHasBindingChips">
+                <div class="add-page-plugins-zone-title">Components on this marker</div>
+                <div class="add-page-plugin-chips">
+                  <span class="add-page-plugin-chip" forEach="markerBindingChips" trackBy="rowKey">{label}<button type="button" class="add-page-plugin-chip-remove" data-marker-remove-binding="1" data-plugin="{pluginName}" data-contract="{contractName}" title="Remove from marker">×</button></span>
+                </div>
+              </div>
+              <p class="add-page-hint" if="showMarkerBindingEmptyHint">No components yet — pick a plugin below and click Add for each component you need.</p>
+              <div class="add-page-plugins-zone-title">Add component</div>
+              <label class="add-page-hint">Plugin
+                <select class="annotation-binding-plugin">
+                  <option value="">— Select plugin —</option>
+                  <option forEach="markerPluginOptions" trackBy="rowKey" value="{value}">{label}</option>
+                </select>
+              </label>
+              <button type="button" class="add-page-manage-link" data-marker-manage-plugins="1">Manage plugins…</button>
+              <div if="showMarkerContractPicker">
+                <p class="add-page-hint">{markerPickerPluginLabel}</p>
+                <div class="add-page-plugin-contract">
+                  <div class="add-page-plugin-contract-row" forEach="markerContractPickerRows" trackBy="rowKey">
+                    <span class="add-page-plugin-contract-name">{contractName}</span>
+                    <button type="button" class="add-page-plugin-btn" if="!onPage" data-marker-add-contract="1" data-plugin="{pluginName}" data-package="{packageName}" data-contract="{contractName}" data-key="{componentKey}">Add</button>
+                    <span class="add-page-plugin-contract-added" if="onPage">Added</span>
+                  </div>
+                </div>
+              </div>
+            </div>
+          </div>
           <div class="visual-annotation-files">
             <div class="visual-attach-row">
               <button type="button" class="visual-attach-btn snapshot-annotation-attach" data-annotation-id="{id}">