@comty.io/core 0.1.5 → 0.1.7

package/comty-sdk.js

@@ -3,7 +3,7 @@
 function getComtyStyle() {
     const toolbarSurface = "#2b2d2f";
     const toolbarMuted = "#b8babb";
-    const commentCursor = `<svg xmlns="http://www.w3.org/2000/svg" width="40" height="40" viewBox="0 0 40 40"><path d="M20 2C30 2 38 10 38 20S30 38 20 38H3V28C2 25 2 23 2 20 2 10 10 2 20 2Z" fill="white" stroke="#d6dbe2"/><circle cx="20" cy="20" r="14" fill="#e6e6e6"/><path d="M20 14v12m-6-6h12" fill="none" stroke="#404040" stroke-width="2.5" stroke-linecap="round"/></svg>`;
+    const commentCursor = `<svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 40 40"><path d="M20 2C30 2 38 10 38 20S30 38 20 38H3V28C2 25 2 23 2 20 2 10 10 2 20 2Z" fill="white" stroke="#d6dbe2"/><circle cx="20" cy="20" r="14" fill="#e6e6e6"/><path d="M20 14v12m-6-6h12" fill="none" stroke="#404040" stroke-width="2.5" stroke-linecap="round"/></svg>`;
     const typographyCursor = `<svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 32 32"><rect x="8" y="8" width="23" height="23" rx="7" fill="${toolbarSurface}" stroke="${toolbarMuted}" stroke-width=".75"/><path d="m14 25 5.5-12L25 25m-8.5-4h6M13 25h4m5 0h4" fill="none" stroke="${toolbarMuted}" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/><path d="m2 2 2 15 4-5 6-3Z" fill="${toolbarSurface}" stroke="${toolbarMuted}" stroke-width="1.5" stroke-linejoin="round"/></svg>`;
     return `
       #comty-root {
@@ -13,7 +13,7 @@ function getComtyStyle() {
         --comty-muted: var(--comty-toolbar-muted);
         --comty-accent: #55aaf5;
         --comty-error: #ef7676;
-        --comty-outline: var(--comty-toolbar-muted);
+        --comty-outline: var(--comty-accent);
         --comty-comment-focus: var(--comty-toolbar-muted);
         --comty-paper: #fff;
         --comty-ink: #171717;
@@ -50,6 +50,10 @@ function getComtyStyle() {
         --comty-toolbar-selected: #505457;
         --comty-toolbar-muted: ${toolbarMuted};
         --comty-measure: #ff3b30;
+        --comty-markup-yellow: #facc15;
+        --comty-markup-green: #22c55e;
+        --comty-color-black: #000;
+        --comty-color-spectrum: linear-gradient(to right, #f00, #ff0, #0f0, #0ff, #00f, #f0f, #f00);
         --comty-font: "Inter", ui-sans-serif, system-ui, sans-serif;
         --comty-dialog-surface: var(--comty-surface);
         --comty-dialog-ink: var(--comty-foreground);
@@ -60,6 +64,8 @@ function getComtyStyle() {
         --comty-dialog-width: 32rem;
         --comty-dialog-shadow: 0 1.5rem 4rem rgb(0 0 0 / .16);
         --comty-motion-duration: 220ms;
+        --comty-working-dot-size: .25em;
+        --comty-working-dot-gap: .125em;
         --comty-ease-out: cubic-bezier(0.23, 1, 0.32, 1);
         --comty-ease-in-out: cubic-bezier(0.77, 0, 0.175, 1);
         position: fixed;
@@ -71,13 +77,80 @@ function getComtyStyle() {
         font-family: var(--comty-font);
         color-scheme: dark;
       }
-
+      #comty-root :is(button, .comty-comment-avatar) { user-select: none; -webkit-user-select: none; }
+      #comty-root .comty-comment-avatar img { -webkit-user-drag: none; }
+      #comty-root .comty-pin .comty-comment-avatar { pointer-events: none; }
+      #comty-root > .comty-agent-panel { position: fixed; right: 1rem; bottom: 5rem; z-index: 2147483647; width: min(22rem, calc(100vw - 2rem)); max-height: min(32rem, calc(100vh - 6rem)); box-sizing: border-box; display: flex; flex-direction: column; overflow: hidden; pointer-events: auto; border: .0625rem solid var(--comty-border); border-radius: 1rem; background: var(--comty-surface); box-shadow: var(--comty-floating-shadow); color: var(--comty-foreground); font: .875rem/1.4 ui-sans-serif, system-ui, sans-serif; transform: translateY(0); opacity: 1; transition: transform var(--comty-motion-duration) var(--comty-ease-out), opacity var(--comty-motion-duration) ease; color-scheme: dark; }
+      #comty-root > .comty-agent-panel[data-side="left"] { left: 1rem; right: auto; }
+      #comty-root > .comty-agent-panel[data-closed] { transform: translateY(.5rem); opacity: 0; pointer-events: none; }
+      #comty-root > .comty-agent-panel[hidden] { display: none; }
+      .comty-agent-panel *, .comty-agent-panel *::before { box-sizing: border-box; }
+      .comty-agent-panel-header { display: flex; flex: 0 0 auto; align-items: center; gap: .75rem; padding: .5rem .75rem; border-bottom: .0625rem solid var(--comty-hover-surface); }
+      .comty-agent-brand { display: grid; place-items: center; width: 2.375rem; height: 2.375rem; flex-shrink: 0; border-radius: .6875rem; color: var(--comty-accent); background: var(--comty-hover-surface); }
+      .comty-agent-brand.comty-agent-avatar { width: 2.375rem; height: 2.375rem; border-radius: 0; background: transparent; }
+      .comty-agent-panel svg { display: block; width: 1rem; height: 1rem; flex-shrink: 0; }
+      .comty-agent-brand svg { width: 1.25rem; height: 1.25rem; }
+      .comty-agent-brand.comty-agent-avatar svg { width: 100%; height: 100%; }
+      .comty-agent-answer { display: flex; align-items: flex-start; gap: .5rem; padding: .375rem .5rem .875rem; }
+      .comty-agent-answer .comty-agent-brand { width: 1.5rem; height: 1.5rem; }
+      .comty-agent-answer p { margin: 0; white-space: pre-wrap; overflow-wrap: anywhere; color: var(--comty-foreground); }
+      .comty-agent-heading { flex: 1; min-width: 0; }
+      .comty-agent-heading strong { display: block; font-weight: 600; font-size: .875rem; }
+      .comty-agent-panel-content { flex: 1; min-height: 0; overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin; scrollbar-color: var(--comty-hover-surface) transparent; padding: .375rem .5rem 2rem; }
+      .comty-agent-item { padding: .375rem .25rem; overflow-wrap: anywhere; }
+      .comty-agent-item + .comty-agent-item { border-top: .0625rem solid var(--comty-hover-surface); }
+      .comty-agent-item h3 { margin: 0 0 .25rem; color: var(--comty-foreground); font: 500 .875rem/1.4 ui-sans-serif, system-ui, sans-serif; }
+      .comty-agent-list { display: grid; gap: .125rem; }
+      .comty-agent-row { position: relative; display: flex; align-items: center; gap: .625rem; min-height: 2rem; padding: .25rem .5rem; border-radius: .5rem; color: var(--comty-foreground); }
+      .comty-agent-row:hover { background: var(--comty-hover-surface); }
+      .comty-agent-dot { width: .4375rem; height: .4375rem; flex: 0 0 auto; border-radius: 50%; background: var(--comty-muted); }
+      .comty-working-indicator { display: inline-grid; grid-template-columns: repeat(3, var(--comty-working-dot-size)); gap: var(--comty-working-dot-gap); flex: 0 0 auto; color: var(--comty-foreground); }
+      .comty-working-indicator > i { display: block; width: var(--comty-working-dot-size); height: var(--comty-working-dot-size); border-radius: 50%; background: currentColor; opacity: .25; transition: opacity 150ms linear; }
+      .comty-working-indicator > i[data-active] { opacity: 1; }
+      .comty-agent-dot[data-status="success"] { background: var(--comty-agent-success); }
+      .comty-agent-dot[data-status="error"] { background: var(--comty-agent-error); }
+      .comty-agent-row-name { min-width: 0; flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 500; }
+      .comty-agent-row-state { flex: 0 0 auto; color: var(--comty-muted); font-size: .875rem; }
+      .comty-agent-row-actions { display: flex; flex-shrink: 0; gap: .25rem; }
+      .comty-agent-panel .comty-agent-row-actions .comty-agent-action { min-height: 1.5rem; padding: .125rem .375rem; border-radius: .25rem; background: transparent; color: var(--comty-muted); font-size: .875rem; }
+      .comty-agent-panel .comty-agent-row-actions .comty-agent-action:hover { color: var(--comty-foreground); background: var(--comty-surface); }
+      #comty-root > .comty-agent-task-toast { position: fixed; right: 1rem; bottom: 1rem; z-index: 2147483647; width: min(20rem, calc(100vw - 2rem)); box-sizing: border-box; padding: .75rem 2rem .75rem .875rem; border: .0625rem solid var(--comty-border); border-radius: .75rem; background: var(--comty-surface); box-shadow: var(--comty-floating-shadow); color: var(--comty-foreground); font: .75rem/1.5 ui-sans-serif, system-ui, sans-serif; pointer-events: auto; opacity: 1; transform: translateY(0); transition: opacity 200ms ease, transform 200ms var(--comty-ease-out); animation: comty-agent-toast-in 200ms var(--comty-ease-out); color-scheme: dark; }
+      #comty-root > .comty-agent-task-toast[data-toolbar] { right: auto; bottom: auto; }
+      #comty-root > .comty-agent-task-toast[data-leaving] { opacity: 0; transform: translateY(.25rem); pointer-events: none; }
+      .comty-agent-task-toast strong { display: block; font-size: .8125rem; font-weight: 600; }
+      .comty-agent-task-toast p { margin: .25rem 0 0; color: var(--comty-muted); overflow-wrap: anywhere; }
+      .comty-agent-task-toast button { position: absolute; top: .5rem; right: .375rem; display: flex; align-items: center; justify-content: center; width: 1.5rem; height: 1.5rem; padding: 0; border: 0; border-radius: .25rem; background: transparent; color: var(--comty-muted); cursor: pointer; }
+      .comty-agent-task-toast button:hover { background: var(--comty-hover-surface); color: var(--comty-foreground); }
+      .comty-agent-task-toast button:focus-visible { outline: .125rem solid var(--comty-accent); outline-offset: .125rem; }
+      .comty-agent-task-toast svg { width: .875rem; height: .875rem; }
+      @keyframes comty-agent-toast-in { from { opacity: 0; transform: translateY(.25rem); } to { opacity: 1; transform: translateY(0); } }
+      .comty-agent-panel p { margin: .5rem 0 0; font: inherit; color: var(--comty-muted); }
+      .comty-agent-error { margin-top: .75rem; }
+      .comty-agent-error strong { display: block; font-weight: 500; color: var(--comty-foreground); }
+      .comty-agent-error p { margin-top: .25rem; }
+      .comty-agent-banner { margin-bottom: 1rem; }
+      .comty-agent-banner .comty-agent-error { margin-top: 0; }
+      .comty-agent-task-actions { display: flex; justify-content: flex-end; gap: .375rem; padding: .375rem .625rem; border-top: .0625rem solid var(--comty-border); }
+      .comty-agent-actions { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: .875rem; }
+      :is(.comty-agent-panel, .comty-agent-task-thread) .comty-agent-action { display: inline-flex; align-items: center; justify-content: center; gap: .375rem; min-height: 2rem; margin: 0; padding: .375rem .625rem; border: 0; border-radius: .5rem; font: 500 .875rem/1.4 ui-sans-serif, system-ui, sans-serif; cursor: pointer; color: var(--comty-foreground); background: var(--comty-hover-surface); transition: background-color 150ms ease; }
+      .comty-agent-task-thread .comty-agent-action { min-height: 1.5rem; padding: .125rem .5rem; border-radius: .375rem; font-size: .75rem; }
+      :is(.comty-agent-panel, .comty-agent-task-thread) .comty-agent-action:hover { background: color-mix(in srgb, var(--comty-foreground) 12%, var(--comty-hover-surface)); }
+      :is(.comty-agent-panel, .comty-agent-task-thread) .comty-agent-action[data-primary] { color: var(--comty-paper); background: var(--comty-accent); }
+      :is(.comty-agent-panel, .comty-agent-task-thread) .comty-agent-action:disabled { opacity: .5; cursor: wait; }
+      .comty-agent-panel .comty-agent-close { width: 1.5rem; min-height: 1.5rem; padding: 0; background: transparent; color: var(--comty-muted); }
+      :is(.comty-agent-panel, .comty-agent-task-thread) :is(button, summary):focus-visible { outline: .125rem solid var(--comty-accent); outline-offset: .1875rem; }
+      .comty-agent-details { margin-top: .625rem; }
+      .comty-agent-panel summary { cursor: pointer; color: var(--comty-muted); font-size: .875rem; }
+      .comty-agent-panel pre { margin: .5rem 0 0; padding: .625rem; white-space: pre-wrap; overflow-wrap: anywhere; max-height: 10rem; overflow: auto; border-radius: .5rem; background: var(--comty-surface); color: var(--comty-muted); font: .875rem/1.4 ui-monospace, monospace; }
+      .comty-agent-working { position: fixed; z-index: 1; box-sizing: border-box; border: 2px solid var(--comty-accent); border-radius: 0; pointer-events: none; }
+      .comty-agent-working-badge { position: absolute; left: -.125rem; bottom: 100%; display: inline-flex; align-items: center; gap: .4rem; padding: .25rem .5rem; border-radius: .375rem .375rem 0 0; background: var(--comty-surface); color: var(--comty-foreground); font: 600 .6875rem/1.4 ui-sans-serif, system-ui, sans-serif; white-space: nowrap; }
+      .comty-agent-working[data-badge-below] .comty-agent-working-badge { bottom: auto; top: 100%; border-radius: 0 0 .375rem .375rem; }
       #comty-root { cursor: default; }
       #comty-root::backdrop { background: transparent; pointer-events: none; }
       html.comty-comment-placement,
       html.comty-comment-placement body,
       html.comty-comment-placement body *:not(#comty-root):not(#comty-root *) {
-        cursor: url("data:image/svg+xml,${encodeURIComponent(commentCursor)}") 20 20, crosshair !important;
+        cursor: url("data:image/svg+xml,${encodeURIComponent(commentCursor)}") 16 16, crosshair !important;
       }
       #comty-root > .comty-sidepanel-open, #comty-root > .comty-pin, #comty-root > .comty-bubble, #comty-root > .comty-create-bubble, #comty-root > .comty-popover, #comty-root > .comty-auth-backdrop, #comty-root > .comty-auth-toast { pointer-events: auto; }
       .comty-toolbar {
@@ -144,7 +217,7 @@ function getComtyStyle() {
       #comty-root [hidden] { display: none !important; }
       [data-comty-anchor-hidden] { visibility: hidden !important; pointer-events: none !important; }
       @media (prefers-reduced-motion: reduce) {
-        .comty-toolbar, .comty-control-button, .comty-sidepanel, .comty-pin, .comty-bubble { transition: none !important; animation: none !important; }
+        .comty-toolbar, .comty-control-button, .comty-sidepanel, .comty-pin, .comty-bubble, .comty-agent-panel, .comty-agent-action, .comty-agent-dot, .comty-working-indicator > i, #comty-root > .comty-agent-task-toast { transition: none !important; animation: none !important; }
       }
 
       .comty-sidepanel {
@@ -326,6 +399,16 @@ function getComtyStyle() {
         white-space: nowrap;
       }
 
+      .comty-anchor-badge {
+        display: inline-block;
+        margin-top: .375rem;
+        padding: .125rem .375rem;
+        border: 1px solid var(--comty-border);
+        border-radius: 999rem;
+        color: var(--comty-muted);
+        font: .6875rem/1.4 sans-serif;
+      }
+
       .comty-pin {
         position: fixed;
         z-index: 2147483645;
@@ -607,6 +690,8 @@ function getComtyStyle() {
         height: 100%;
         object-fit: cover;
       }
+      .comty-comment-avatar.comty-agent-avatar { overflow: visible; border-radius: 0; background: transparent; color: var(--comty-paper); }
+      .comty-comment-avatar.comty-agent-avatar svg { display: block; width: 100%; height: 100%; }
 
       .comty-pin-avatar {
         width: 24px;
@@ -721,12 +806,12 @@ function getComtyStyle() {
       }
 
       .comty-popover-item.comty-popover-item-destructive {
-        color: var(--comty-error);
+        color: var(--comty-agent-error);
       }
 
       .comty-popover-item.comty-popover-item-destructive:hover,
       .comty-popover-item.comty-popover-item-destructive:focus-visible {
-        background: color-mix(in srgb, var(--comty-error) 12%, var(--comty-surface));
+        background: color-mix(in srgb, var(--comty-agent-error) 12%, var(--comty-surface));
         outline: none;
       }
 
@@ -855,6 +940,8 @@ function getComtyStyle() {
       }
 
       .comty-hover-bubble .comty-thread {
+        display: grid;
+        gap: 1rem;
         padding: 12px;
       }
 
@@ -1097,19 +1184,23 @@ function getComtyStyle() {
         margin: 4px 0;
       }
 
-      html.comty-comments-active .comty-pin {
+      html:is(.comty-comments-active, .comty-inspect-annotations) .comty-pin {
         display: grid;
       }
 
-      html.comty-comments-active .comty-pin.comty-filtered-out {
+      html:is(.comty-comments-active, .comty-inspect-annotations) .comty-pin.comty-filtered-out {
         display: none;
       }
 
-      html.comty-comments-active .comty-bubble {
+      html:is(.comty-comments-active, .comty-inspect-annotations) .comty-bubble {
         display: block;
       }
 
       .comty-inspection-layer { position: relative; z-index: 2147483647; pointer-events: none; }
+      .comty-markup-layer, .comty-markup-surface { position: fixed; inset: 0; width: 100%; height: 100%; z-index: 2; pointer-events: none; }
+      .comty-markup-surface { pointer-events: auto; cursor: crosshair; touch-action: none; user-select: none; }
+      .comty-markup-surface[aria-busy="true"] { cursor: progress; }
+      .comty-capture-selection { position: absolute; box-sizing: border-box; border: .0625rem solid var(--comty-accent); box-shadow: 0 0 0 100vmax var(--comty-dialog-backdrop); color: var(--comty-paper); text-shadow: 0 .0625rem .125rem var(--comty-ink); font: .6875rem/1.5 var(--comty-font); padding: .25rem; white-space: nowrap; }
       .comty-overlay-tools, .comty-layout-guides, .comty-layout-guide { position: fixed; inset: 0; pointer-events: none; }
       .comty-overlay-tools { overflow: hidden; }
       .comty-layout-guide { display: grid; box-sizing: border-box; }
@@ -1135,6 +1226,38 @@ function getComtyStyle() {
       .comty-guide-fields label { display: flex; align-items: center; justify-content: space-between; gap: .5rem; }
       .comty-tool-panel input, .comty-tool-panel select { min-width: 0; width: 6rem; box-sizing: border-box; border: 0; border-radius: .25rem; padding: .25rem; background: var(--comty-surface); color: var(--comty-foreground); font: inherit; }
       .comty-tool-panel input[type="color"] { height: 1.75rem; padding: .125rem; }
+      .comty-tool-panel.comty-markup-panel { width: max-content; padding: .375rem; border-radius: .875rem; background: var(--comty-toolbar-group); }
+      .comty-markup-controls, .comty-markup-options, .comty-markup-strokes, .comty-markup-colors { display: flex; align-items: center; gap: .125rem; }
+      .comty-markup-controls { justify-content: space-between; }
+      .comty-markup-options { margin-top: .375rem; padding-top: .375rem; border-top: .0625rem solid var(--comty-border); }
+      .comty-markup-divider { flex: 0 0 .0625rem; height: 1rem; margin-inline: .25rem; background: var(--comty-border); }
+      .comty-markup-panel button { flex: 0 0 auto; width: 2rem; height: 2rem; padding: 0; color: var(--comty-toolbar-muted); border-radius: .5rem; }
+      .comty-markup-panel button svg { display: block; flex: 0 0 auto; width: 1rem; height: 1rem; }
+      .comty-markup-panel button[aria-pressed="false"] { opacity: 1; }
+      .comty-markup-panel button[aria-pressed="true"] { color: var(--comty-foreground); background: var(--comty-hover-surface); }
+      .comty-markup-panel button:disabled { opacity: .35; cursor: default; }
+      .comty-markup-panel button:disabled:hover { background: transparent; }
+      .comty-markup-panel button:not(:disabled):active { transform: scale(.97); }
+      .comty-markup-strokes button { width: 1.5rem; height: 1.5rem; }
+      .comty-markup-colors button { width: 1.375rem; height: 1.5rem; background: transparent; }
+      .comty-markup-colors button[aria-pressed="true"] { background: transparent; }
+      .comty-markup-swatch { display: block; width: .875rem; height: .875rem; border-radius: 50%; background: var(--markup-swatch); box-shadow: inset 0 0 0 .0625rem color-mix(in srgb, var(--comty-paper) 15%, transparent); }
+      .comty-markup-colors button[aria-pressed="true"] .comty-markup-swatch { outline: .0625rem solid var(--comty-foreground); outline-offset: .125rem; }
+      .comty-markup-panel button.comty-markup-picker { width: 1rem; padding: 0; position: relative; flex: 0 0 1rem; height: 1rem; margin-inline: .25rem; border-radius: 50%; background: conic-gradient(var(--comty-measure), var(--comty-markup-yellow), var(--comty-markup-green), var(--comty-accent), var(--comty-error), var(--comty-measure)); }
+      .comty-markup-picker[data-selected] { outline: .0625rem solid var(--comty-foreground); outline-offset: .125rem; }
+      .comty-markup-picker:focus-visible { outline: .125rem solid var(--comty-accent); outline-offset: .125rem; }
+      .comty-markup-color { display: grid; gap: .625rem; margin-top: .375rem; padding: .625rem .25rem .25rem; border-top: .0625rem solid var(--comty-border); }
+      .comty-markup-color-field { position: relative; height: 8rem; border-radius: .5rem; background: linear-gradient(to top, var(--comty-color-black), transparent), linear-gradient(to right, var(--comty-paper), transparent), var(--markup-hue); touch-action: none; cursor: crosshair; }
+      .comty-markup-color-field:focus-visible { outline: .125rem solid var(--comty-accent); outline-offset: .125rem; }
+      .comty-markup-color-field > span { position: absolute; width: .625rem; height: .625rem; box-sizing: border-box; border: .125rem solid var(--comty-paper); border-radius: 50%; background: var(--markup-color); box-shadow: 0 0 0 .0625rem var(--comty-ink); transform: translate(-50%, -50%); pointer-events: none; }
+      .comty-markup-color input.comty-markup-hue { appearance: none; -webkit-appearance: none; display: block; width: 100%; height: 1rem; margin: 0; padding: 0; border-radius: 1rem; background: var(--comty-color-spectrum); cursor: pointer; }
+      .comty-markup-hue::-webkit-slider-thumb { appearance: none; -webkit-appearance: none; width: .875rem; height: .875rem; box-sizing: border-box; border: .125rem solid var(--comty-paper); border-radius: 50%; background: var(--markup-hue); box-shadow: 0 0 0 .0625rem var(--comty-ink); }
+      .comty-markup-hue::-moz-range-thumb { width: .875rem; height: .875rem; box-sizing: border-box; border: .125rem solid var(--comty-paper); border-radius: 50%; background: var(--markup-hue); box-shadow: 0 0 0 .0625rem var(--comty-ink); }
+      .comty-markup-hex { display: flex; align-items: center; gap: .5rem; padding: .25rem .5rem; border-radius: .5rem; background: var(--comty-surface); color: var(--comty-muted); font: .6875rem/1.5 var(--comty-font); }
+      .comty-markup-color-preview { flex: 0 0 1rem; height: 1rem; border-radius: .25rem; background: var(--markup-color); box-shadow: inset 0 0 0 .0625rem var(--comty-border); }
+      .comty-markup-hex input { flex: 1; width: 0; text-align: right; font-family: ui-monospace, monospace; }
+      .comty-markup-hex input[aria-invalid="true"] { outline: .0625rem solid var(--comty-error); }
+
       .comty-ruler { position: fixed; background: var(--comty-surface); pointer-events: auto; touch-action: none; }
       .comty-ruler-horizontal { left: 0; top: 0; width: 100vw; height: 1.125rem; border-bottom: .0625rem solid var(--comty-border); cursor: ns-resize; }
       .comty-ruler-vertical { left: 0; top: 0; height: 100vh; width: 1.125rem; border-right: .0625rem solid var(--comty-border); cursor: ew-resize; }
@@ -1209,16 +1332,16 @@ function getComtyStyle() {
       .comty-motion-panel button[aria-pressed="true"] { opacity: 1; color: var(--comty-paper); background: var(--comty-hover-surface); }
       .comty-motion-panel button[aria-pressed="false"] { opacity: 1; }
       .comty-motion-panel [data-motion-status] { margin: .5rem; font-size: .75rem; color: var(--comty-muted); }
-      @media (max-width: 25rem) { #comty-root { --comty-tool-size: 2rem; --comty-toolbar-padding: .25rem; } .comty-toolbar { right: .5rem; bottom: .5rem; max-width: calc(100vw - 1rem); flex-wrap: wrap; justify-content: center; row-gap: .25rem; } .comty-tool-divider { display: none; } }
+      @media (max-width: 38rem) { #comty-root { --comty-tool-size: 2rem; --comty-toolbar-padding: .25rem; } .comty-toolbar { right: .5rem; bottom: .5rem; max-width: calc(100vw - 1rem); flex-wrap: wrap; justify-content: center; row-gap: .25rem; } .comty-tool-divider { display: none; } }
 
       .comty-inspection-box {
         position: fixed;
         box-sizing: border-box;
         border: .0625rem solid var(--comty-outline);
-        background: color-mix(in oklch, var(--comty-outline) 8%, transparent);
+        background: transparent;
+        border-radius: 0;
         pointer-events: none;
       }
-      .comty-inspection-box[data-selected] { background: color-mix(in oklch, var(--comty-outline) 5%, transparent); }
       .comty-inspect-spacing { position: fixed; pointer-events: none; background: var(--comty-spacing-color); }
       .comty-inspect-margin { --comty-spacing-color: var(--comty-margin-fill); }
       .comty-inspect-padding { --comty-spacing-color: var(--comty-padding-fill); }
@@ -1272,6 +1395,15 @@ function getComtyStyle() {
         height: 5.75rem;
         border-radius: .75rem;
       }
+      .comty-agent-scope { display: inline-flex; align-items: center; gap: .375rem; color: var(--comty-muted); font: .6875rem/1.25 var(--comty-font); white-space: nowrap; cursor: pointer; pointer-events: auto; opacity: 0; visibility: hidden; }
+      .comty-create-expanded .comty-agent-scope { opacity: 1; visibility: visible; }
+      .comty-agent-scope input { position: absolute; width: 1px; height: 1px; margin: 0; opacity: 0; }
+      .comty-agent-scope-track { position: relative; width: 1.5rem; height: .875rem; flex: 0 0 auto; border-radius: 999rem; background: var(--comty-border); transition: background-color 160ms ease; }
+      .comty-agent-scope-track::after { content: ""; position: absolute; top: .125rem; left: .125rem; width: .625rem; height: .625rem; border-radius: 50%; background: var(--comty-paper); transition: transform 160ms ease; }
+      .comty-agent-scope input:checked + .comty-agent-scope-track { background: var(--comty-accent); }
+      .comty-agent-scope input:checked + .comty-agent-scope-track::after { transform: translateX(.625rem); }
+      .comty-agent-scope input:focus-visible + .comty-agent-scope-track { outline: .125rem solid var(--comty-comment-focus); outline-offset: .125rem; }
+      .comty-agent-thread-error { grid-column: 2; margin: .25rem 0 0; color: var(--comty-agent-error); font: .6875rem/1.3 var(--comty-font); }
 
       .comty-create-bubble.comty-create-has-attachment { height: 7.5rem; }
       .comty-create-bubble.comty-bubble-left { transform-origin: top right; }
@@ -1502,6 +1634,14 @@ function createAnchorMatcher({
       return haystack.toLowerCase().includes(needle.toLowerCase());
     }
 
+    function similarText(a, b) {
+      if (!a || !b) return false;
+      const words = value => new Set(value.toLowerCase().split(/\s+/).filter(Boolean));
+      const left = words(a), right = words(b);
+      const common = [...left].filter(word => right.has(word)).length;
+      return common >= 2 && common / Math.max(left.size, right.size) >= 0.7;
+    }
+
     function scoreFingerprint(el, fingerprint) {
       if (!el || !fingerprint) return 0;
       if (
@@ -1571,6 +1711,8 @@ function createAnchorMatcher({
         score += 15;
       }
 
+      if (text !== fingerprint.text && similarText(text, fingerprint.text)) score += 24;
+
       if (typeof fingerprint.siblingIndex === "number" && el.parentElement) {
         const siblings = [...el.parentElement.children].filter(
           (child) => child.tagName === el.tagName,
@@ -1648,6 +1790,8 @@ function createAnchorMatcher({
         if (ancestorScore > 0) {
           score += Math.min(ancestorScore, 40) * (index === 0 ? 0.5 : 0.2);
         }
+        // Distinguish repeated cards by their section, even when dimensions match.
+        if (index < 3 && ancestors[index].text && getElementTextSignature(parent) === ancestors[index].text) score += 18;
         parent = parent.parentElement;
       }
 
@@ -1662,46 +1806,75 @@ function createAnchorMatcher({
       return score;
     }
 
-    function matchesAnchorIdentity(el, fingerprint) {
+    function matchesAnchorIdentity(el, fingerprint, ignoreDescendantText = false, allowTextChanges = true) {
       if (!el || !fingerprint || el.tagName.toLowerCase() !== fingerprint.tag) return false;
       const attributes = { ariaLabel: "aria-label", name: "name", href: "href", src: "src", alt: "alt", title: "title", role: "role" };
       for (const [key, attribute] of Object.entries(attributes)) {
         if (fingerprint[key] && getAttributeSignature(el, attribute) !== fingerprint[key]) return false;
       }
-      if (fingerprint.ownText && getElementOwnTextSignature(el) !== fingerprint.ownText) return false;
+      if (fingerprint.id && el.id !== fingerprint.id) return false;
+      if (fingerprint.testId && !["data-testid", "data-test", "data-cy"].some(name => getAttributeSignature(el, name) === fingerprint.testId)) return false;
+      const stableIdentity = (fingerprint.id && el.id === fingerprint.id) ||
+        (fingerprint.testId && ["data-testid", "data-test", "data-cy"].some(name => getAttributeSignature(el, name) === fingerprint.testId));
+      if (fingerprint.ownText && getElementOwnTextSignature(el) !== fingerprint.ownText && !(allowTextChanges && stableIdentity)) return false;
       // Container text is useful for matching remounted drawers and dialogs.
-      if (!fingerprint.ownText && fingerprint.text && getElementTextSignature(el) !== fingerprint.text) return false;
+      if (!ignoreDescendantText && !fingerprint.ownText && fingerprint.text && getElementTextSignature(el) !== fingerprint.text && !(allowTextChanges && stableIdentity)) {
+        if (!allowTextChanges || !el.children.length || !similarText(getElementTextSignature(el), fingerprint.text)) return false;
+      }
       return true;
     }
 
     function matchesAnchorContext(el, context) {
       if (!context) return true;
-      if (!matchesAnchorIdentity(el, context.target)) return false;
+      // A unique page landmark keeps its identity when a child is edited.
+      const pageContainer = !context.layer && (context.target?.tag === "main" || context.target?.role === "main") &&
+        [...document.querySelectorAll('main, [role="main"]')].filter(node => !isComtyNode(node)).length === 1;
+      if (!matchesAnchorIdentity(el, context.target, pageContainer)) return false;
       const parentFingerprint = context.ancestors?.[0];
       if (parentFingerprint?.text && parentFingerprint.text !== context.target.text &&
-          !matchesAnchorIdentity(el.parentElement, parentFingerprint)) return false;
+          !matchesAnchorIdentity(el.parentElement, parentFingerprint, pageContainer)) return false;
       const layer = getPresentationLayer(el);
-      if (context.layer && (!layer || !matchesAnchorIdentity(layer, context.layer))) return false;
+      if (context.layer && (!layer || !matchesAnchorIdentity(layer, context.layer, false, false))) return false;
       if (context.version >= 2 && !context.layer && layer) return false;
       return scoreAnchorCandidate(el, context) >= 50;
     }
 
-    function resolveByAnchorContext(context) {
-      if (!context?.target) return null;
+    function resolveAnchor(context, exact = null) {
+      if (!context?.target) return { element: exact, status: exact ? "matched" : "missing" };
       let candidates;
       try {
-        candidates = [...document.body.querySelectorAll(context.target.tag || "*")];
+        candidates = [...document.body.querySelectorAll(context.target.tag || "*")].filter(el => !isComtyNode(el));
       } catch {
-        return null;
+        return { element: null, status: "missing" };
       }
       const matches = candidates
-        .filter(el => !isComtyNode(el) && matchesAnchorContext(el, context))
-        .map(el => ({ el, score: scoreAnchorCandidate(el, context) }))
+        .filter(el => matchesAnchorContext(el, context))
+        .map(el => ({ el, score: scoreAnchorCandidate(el, context) + (context.version === 1 && el === exact ? 16 : 0) }))
         .sort((a, b) => b.score - a.score);
-      if (!matches.length || matches[0].score < 58) return null;
-      // ponytail: ambiguous remounts stay hidden; explicit reattachment can handle identical twins later.
-      if (matches[1] && matches[0].score - matches[1].score < 12) return null;
-      return matches[0].el;
+      if (context.candidateCount > 1) {
+        const peers = candidates.filter(el => matchesAnchorIdentity(el, context.target));
+        if (peers.length !== context.candidateCount) {
+          // A removed identical sibling must not move its comment to the survivor.
+          const distinctive = matches[0] && (context.target.id || context.target.testId);
+          if (!distinctive) return { element: null, status: "uncertain" };
+        }
+      }
+      if (matches[0]?.score >= 58 && (!matches[1] || matches[0].score - matches[1].score >= 12)) {
+        return { element: matches[0].el, status: "matched" };
+      }
+      // A closed/unmounted overlay is not evidence that its contents were deleted.
+      if (context.layer && !candidates.some(el => {
+        const layer = getPresentationLayer(el);
+        return layer && matchesAnchorIdentity(layer, context.layer, false, false);
+      })) return { element: null, status: "hidden" };
+      const plausible = matches.length || candidates.some(el =>
+        (context.target.id && el.id === context.target.id) ||
+        (context.target.text && (getElementTextSignature(el) === context.target.text || similarText(getElementTextSignature(el), context.target.text))));
+      return { element: null, status: plausible ? "uncertain" : "missing" };
+    }
+
+    function resolveByAnchorContext(context) {
+      return resolveAnchor(context).element;
     }
 
     function getViewportBounds() {
@@ -1873,7 +2046,7 @@ function createAnchorMatcher({
       return { clientX, clientY };
     }
 
-    return { matchesAnchorContext, resolveByAnchorContext, isElementTreeHidden, getTopActiveModal, getVisibleAnchorPoint };
+    return { matchesAnchorContext, resolveAnchor, resolveByAnchorContext, isElementTreeHidden, getTopActiveModal, getVisibleAnchorPoint };
 }
 
 const captureEngine = (() => { // Generated from html-to-image 1.11.13 by scripts/capture-engine.mjs.
@@ -2017,8 +2190,10 @@ function createScreenshotCapture({ apiUrl, projectKey, getHeaders = () => ({}) }
     finally { clearTimeout(timer); }
   }
 
-  async function captureViewportScreenshot({ context = captureContext(), annotation } = {}) {
+  async function captureViewportScreenshot({ context = captureContext(), annotation, region } = {}) {
     if (document.visibilityState === "hidden") return null;
+    const area = region || { left: 0, top: 0, width: context.width, height: context.height };
+    if (![area.left, area.top, area.width, area.height].every(Number.isFinite) || area.left < 0 || area.top < 0 || area.width <= 0 || area.height <= 0 || area.left + area.width > context.width || area.top + area.height > context.height) throw new Error("Invalid capture area");
     const controller = new AbortController();
     const timeout = setTimeout(() => controller.abort(), 15000);
     const { signal } = controller;
@@ -2032,7 +2207,7 @@ function createScreenshotCapture({ apiUrl, projectKey, getHeaders = () => ({}) }
     let lastYield = performance.now();
     const checkContext = () => {
       signal.throwIfAborted();
-      if (!frozen && (context.url !== location.href || context.width !== innerWidth || context.height !== innerHeight || context.scrollX !== scrollX || context.scrollY !== scrollY)) {
+      if ((!frozen || region) && (context.url !== location.href || context.width !== innerWidth || context.height !== innerHeight || context.scrollX !== scrollX || context.scrollY !== scrollY)) {
         throw new Error("Page moved before its screenshot was ready");
       }
     };
@@ -2231,21 +2406,21 @@ function createScreenshotCapture({ apiUrl, projectKey, getHeaders = () => ({}) }
       image.src = svg;
       await untilAborted(image.decode());
       checkContext();
-      const scale = Math.min(2, devicePixelRatio || 1, 2560 / context.width, 2560 / context.height);
+      const scale = Math.min(2, devicePixelRatio || 1, 2560 / area.width, 2560 / area.height);
       const canvas = document.createElement("canvas");
-      canvas.width = Math.round(context.width * scale);
-      canvas.height = Math.round(context.height * scale);
+      canvas.width = Math.max(1, Math.round(area.width * scale));
+      canvas.height = Math.max(1, Math.round(area.height * scale));
       const ctx = canvas.getContext("2d");
       ctx.scale(scale, scale);
-      ctx.drawImage(image, 0, 0);
+      ctx.drawImage(image, -area.left, -area.top);
       let blob = await untilAborted(new Promise(resolve => canvas.toBlob(resolve, "image/png")));
       if (!blob) throw new Error("Screenshot encoding failed");
-      if (blob.size > 2800000) {
+      if (!region && blob.size > 2800000) {
         blob = await untilAborted(new Promise(resolve => canvas.toBlob(resolve, "image/jpeg", 0.9)));
         if (!blob) throw new Error("Screenshot encoding failed");
       }
       // CSS dimensions keep the eyedropper's coordinate system independent of DPR.
-      return { blob, width: canvas.width, height: canvas.height, cssWidth: context.width, cssHeight: context.height };
+      return { blob, width: canvas.width, height: canvas.height, cssWidth: area.width, cssHeight: area.height };
     } finally {
       clearTimeout(timeout);
       controller.abort();
@@ -2371,7 +2546,7 @@ function createCommentThread(context) {
     renderSidepanelComments, applyStatusFilters, createThreadItem, renderCommentContent,
     isOwnCommentEntry, updateCommentContent, deleteSdkComment, getCommentId,
     updateReplyContent, deleteSdkReply, createCommentAvatar, getSdkHeaders,
-    showAuthPrompt,
+    showAuthPrompt, startThreadAgent,
   } = context;
 
   return function openCommentThread(
@@ -2434,16 +2609,16 @@ function createCommentThread(context) {
       };
 
       const saveStatus = async (nextStatus, control) => {
-        if (!context.canManage) return false;
+        if (!context.canManage || comment.local_agent) return false;
         control.disabled = true;
         const savedStatus = await updateCommentStatus(comment, nextStatus);
         control.disabled = false;
         if (!savedStatus) return false;
 
         const savedStatusOption = getCommentStatus(savedStatus);
-        pin.dataset.status = savedStatusOption.value;
-        applyStatusDot(pinStatusDot, savedStatus);
-        pin.setAttribute(
+        if (pin) pin.dataset.status = savedStatusOption.value;
+        if (pinStatusDot) applyStatusDot(pinStatusDot, savedStatus);
+        pin?.setAttribute(
           "aria-label",
           `Afficher le commentaire, statut ${savedStatusOption.label}`,
         );
@@ -2459,7 +2634,7 @@ function createCommentThread(context) {
         return true;
       };
 
-      statusMenuButton.disabled = !context.canManage;
+      statusMenuButton.disabled = comment.local_agent || !context.canManage;
       statusMenuButton.onclick = (event) => {
         event.stopPropagation();
         const existingPopover = document.querySelector(
@@ -2608,7 +2783,7 @@ function createCommentThread(context) {
         );
       };
 
-      const mainItem = createThreadItem(comment, { showMore: isOwnCommentEntry(comment) });
+      const mainItem = createThreadItem(comment, { showMore: !comment.local_agent && isOwnCommentEntry(comment) });
 
       const startEditingEntry = (entry, item, persist) => {
         if (!isOwnCommentEntry(entry)) return;
@@ -2704,7 +2879,7 @@ function createCommentThread(context) {
                   getCommentId(cachedComment) !== getCommentId(comment),
               );
               placedPins.delete(getCommentId(comment));
-              pin.remove();
+              pin?.remove();
               closeBubbles();
               renderSidepanelComments();
               applyStatusFilters();
@@ -2751,11 +2926,19 @@ function createCommentThread(context) {
       };
       replies.forEach(appendReply);
       thread.appendChild(threadList);
+      bubble.addEventListener('comty-agent-reply', (event) => {
+        const reply = event.detail;
+        if (!reply || replies.some(item => item.id === reply.id)) return;
+        replies.push(reply);
+        comment.replies = replies;
+        appendReply(reply);
+        threadList.scrollTop = threadList.scrollHeight;
+      });
 
       const replyForm = document.createElement("div");
       replyForm.className = "comty-reply-form";
 
-      if (context.canWrite) {
+      if (context.canWrite && !comment.local_agent) {
         replyForm.appendChild(createCommentAvatar(context.currentUser || { name: "You" }));
         const replyField = document.createElement("div");
         replyField.className = "comty-reply-field";
@@ -2798,6 +2981,18 @@ function createCommentThread(context) {
               appendReply(data.reply);
               replyInput.value = "";
               syncReplySize();
+              if (/(^|\s)@agent\b/i.test(content)) {
+                try {
+                  await startThreadAgent(comment, replies, content);
+                } catch (error) {
+                  const notice = document.createElement('p');
+                  notice.className = 'comty-agent-thread-error';
+                  notice.setAttribute('role', 'alert');
+                  notice.textContent = `Agent could not start: ${error.message}`;
+                  replyForm.querySelector('.comty-agent-thread-error')?.remove();
+                  replyForm.appendChild(notice);
+                }
+              }
               requestAnimationFrame(() => {
                 threadList.scrollTop = threadList.scrollHeight;
               });
@@ -2845,7 +3040,7 @@ function createCommentThread(context) {
         replyField.appendChild(replyInput);
         replyField.appendChild(replyButton);
         replyForm.appendChild(replyField);
-      } else {
+      } else if (!comment.local_agent) {
         replyForm.classList.add("comty-reply-form-guest");
         const signInButton = document.createElement("button");
         signInButton.className = "comty-sign-in-reply";
@@ -2858,7 +3053,7 @@ function createCommentThread(context) {
         replyForm.appendChild(signInButton);
       }
 
-      thread.appendChild(replyForm);
+      if (!comment.local_agent) thread.appendChild(replyForm);
       bubble.appendChild(thread);
       root.appendChild(bubble);
 
@@ -2879,6 +3074,290 @@ function createCommentThread(context) {
     }
 }
 
+// Page-coordinate drawings stay attached to the document when the viewport scrolls.
+function createInspectMarkup({ root, icon, onChange, capture, onError }) {
+  const ns = 'http://www.w3.org/2000/svg';
+  const layer = document.createElementNS(ns, 'svg');
+  layer.classList.add('comty-markup-layer');
+  layer.setAttribute('aria-hidden', 'true');
+  const drawings = document.createElementNS(ns, 'g');
+  layer.append(drawings);
+  root.append(layer);
+  const surface = document.createElement('div');
+  surface.className = 'comty-markup-surface';
+  surface.hidden = true;
+  const selection = document.createElement('div');
+  selection.className = 'comty-capture-selection';
+  selection.hidden = true;
+  surface.append(selection);
+  root.append(surface);
+  const panel = document.createElement('section');
+  panel.className = 'comty-tool-panel comty-markup-panel';
+  panel.id = 'comty-markup-panel';
+  panel.setAttribute('aria-label', 'Annotations and screenshot');
+  panel.hidden = true;
+  root.append(panel);
+  const shapes = {
+    pencil: ['Pencil', '<path d="m16 3 5 5L8 21H3v-5ZM14 5l5 5"/>'],
+    rectangle: ['Rectangle', '<rect x="4" y="5" width="16" height="14" rx="1"/>'],
+    ellipse: ['Ellipse', '<ellipse cx="12" cy="12" rx="9" ry="7"/>'],
+    arrow: ['Arrow', '<path d="M4 20 20 4M8 4h12v12"/>'],
+  };
+  const palette = [
+    ['Red', '--comty-measure'], ['Yellow', '--comty-markup-yellow'],
+    ['Green', '--comty-markup-green'], ['Blue', '--comty-accent'],
+    ['Black', '--comty-ink'], ['White', '--comty-paper'],
+  ];
+  const tokenColor = token => {
+    const value = getComputedStyle(root).getPropertyValue(token).trim();
+    return /^#[\da-f]{3}$/i.test(value) ? '#' + [...value.slice(1)].map(char => char + char).join('') : value;
+  };
+  panel.setAttribute('aria-label', 'Annotation tools');
+  panel.innerHTML = [
+    '<div class="comty-markup-controls" role="group" aria-label="Drawing tools">',
+    ...Object.entries(shapes).map(([key, [label, paths]]) => `<button type="button" data-shape="${key}" aria-label="${label}" title="${label}" aria-pressed="false">${icon(paths)}</button>`),
+    '<span class="comty-markup-divider" aria-hidden="true"></span>',
+    `<button type="button" data-undo aria-label="Undo annotation" title="Undo · ⌘/Ctrl Z">${icon('<path d="m9 4-5 5 5 5M4 9h10a6 6 0 0 1 0 12"/>')}</button>`,
+    `<button type="button" data-clear aria-label="Clear annotations" title="Clear annotations">${icon('<path d="M3 6h18M9 6V3h6v3M5 6l1 15h12l1-15M10 10v7m4-7v7"/>')}</button></div>`,
+    '<div class="comty-markup-options"><div class="comty-markup-strokes" role="group" aria-label="Stroke width">',
+    ...[[2, 'Thin'], [3, 'Medium'], [5, 'Thick']].map(([width, label]) => `<button type="button" data-stroke="${width}" aria-label="${label} stroke" title="${label}" aria-pressed="false"><svg viewBox="0 0 24 24" fill="none" aria-hidden="true"><path d="m7 7 10 10" stroke="currentColor" stroke-width="${width}" stroke-linecap="round"/></svg></button>`),
+    '</div><span class="comty-markup-divider" aria-hidden="true"></span><div class="comty-markup-colors" role="group" aria-label="Annotation colors">',
+    ...palette.map(([name, token]) => `<button type="button" data-color="${token}" aria-label="${name} ink" title="${name}" aria-pressed="false"><span class="comty-markup-swatch" aria-hidden="true"></span></button>`),
+    '<button type="button" class="comty-markup-picker" title="Custom color" aria-label="Custom annotation color" aria-expanded="false" aria-controls="comty-markup-color"></button>',
+    '</div></div>',
+    '<div class="comty-markup-color" id="comty-markup-color" role="group" aria-label="Custom color picker" hidden>',
+    '<div class="comty-markup-color-field" tabindex="0" role="group" aria-label="Saturation and brightness" aria-description="Left and right arrows adjust saturation. Up and down arrows adjust brightness."><span aria-hidden="true"></span></div>',
+    '<input class="comty-markup-hue" type="range" min="0" max="360" step="1" aria-label="Hue">',
+    '<label class="comty-markup-hex"><span class="comty-markup-color-preview" aria-hidden="true"></span><span>HEX</span><input type="text" aria-label="Hex color" maxlength="7" spellcheck="false" autocomplete="off" autocapitalize="off"></label>',
+    '</div>',
+  ].join('');
+  const picker = panel.querySelector('.comty-markup-picker');
+  const colorPanel = panel.querySelector('.comty-markup-color');
+  const colorField = panel.querySelector('.comty-markup-color-field');
+  const hueInput = panel.querySelector('.comty-markup-hue');
+  const hexInput = panel.querySelector('[aria-label="Hex color"]');
+  let pickerOpen = false, colorPointer = null;
+  let hue = 0, saturation = 1, brightness = 1;
+  let mode = null, shape = 'pencil', drag = null, visible = false, busy = false;
+  let stroke = 3, color = tokenColor('--comty-measure');
+  readColor(color);
+  for (const button of panel.querySelectorAll('[data-color]')) button.style.setProperty('--markup-swatch', tokenColor(button.dataset.color));
+  let revision = 0;
+  const history = [];
+  const clamp = (v, max) => Math.max(0, Math.min(max, v));
+  function point(event) { return { x: clamp(event.clientX, innerWidth), y: clamp(event.clientY, innerHeight) }; }
+  function sync() {
+    layer.style.display = visible ? '' : 'none';
+    surface.hidden = !visible || !mode;
+    panel.hidden = !visible || mode !== 'annotate';
+    for (const button of panel.querySelectorAll('[data-stroke]')) button.setAttribute('aria-pressed', String(Number(button.dataset.stroke) === stroke));
+    for (const button of panel.querySelectorAll('[data-color]')) button.setAttribute('aria-pressed', String(tokenColor(button.dataset.color) === color));
+    picker.toggleAttribute('data-selected', !palette.some(([, token]) => tokenColor(token) === color));
+    syncPicker();
+    for (const button of panel.querySelectorAll('[data-shape]')) button.setAttribute('aria-pressed', String(button.dataset.shape === shape));
+    panel.querySelector('[data-undo]').disabled = !history.length;
+    panel.querySelector('[data-clear]').disabled = !history.length;
+    render();
+    onChange();
+  }
+  function cancelDrag() {
+    if (!drag) return;
+    drag.node?.remove();
+    const id = drag.id;
+    drag = null;
+    if (surface.hasPointerCapture(id)) surface.releasePointerCapture(id);
+    selection.hidden = true;
+  }
+  function setMode(next) {
+    if (busy && next) return;
+    cancelDrag();
+    if (!next) revision++;
+    mode = next;
+    if (next !== 'annotate') { pickerOpen = false; finishColorDrag(); }
+    sync();
+  }
+  function undo() { history.pop()?.remove(); sync(); }
+  function clear() { cancelDrag(); history.length = 0; drawings.replaceChildren(); sync(); }
+  panel.querySelector('[data-undo]').onclick = undo;
+  panel.querySelector('[data-clear]').onclick = clear;
+  for (const button of panel.querySelectorAll('[data-shape]')) button.onclick = () => { shape = button.dataset.shape; sync(); };
+  for (const button of panel.querySelectorAll('[data-stroke]')) button.onclick = () => { stroke = Number(button.dataset.stroke); sync(); };
+  for (const button of panel.querySelectorAll('[data-color]')) button.onclick = () => {
+    color = tokenColor(button.dataset.color); readColor(color); sync();
+  };
+  function readColor(value) {
+    const [r, g, b] = value.slice(1).match(/../g).map(part => parseInt(part, 16) / 255);
+    const max = Math.max(r, g, b), min = Math.min(r, g, b), delta = max - min;
+    if (delta) hue = ((max === r ? (g - b) / delta : max === g ? (b - r) / delta + 2 : (r - g) / delta + 4) * 60 + 360) % 360;
+    saturation = max ? delta / max : 0;
+    brightness = max;
+  }
+  function writeColor() {
+    const channel = offset => {
+      const k = (offset + hue / 60) % 6;
+      return Math.round(255 * brightness * (1 - saturation * Math.max(0, Math.min(k, 4 - k, 1)))).toString(16).padStart(2, '0');
+    };
+    color = '#' + [5, 3, 1].map(channel).join('');
+    sync();
+  }
+  function syncPicker() {
+    colorPanel.hidden = !pickerOpen;
+    picker.setAttribute('aria-expanded', String(pickerOpen));
+    colorPanel.style.setProperty('--markup-hue', `hsl(${hue} 100% 50%)`);
+    colorPanel.style.setProperty('--markup-color', color);
+    const marker = colorField.firstElementChild;
+    marker.style.left = `${saturation * 100}%`;
+    marker.style.top = `${(1 - brightness) * 100}%`;
+    colorField.setAttribute('aria-description', `Saturation ${Math.round(saturation * 100)}%, brightness ${Math.round(brightness * 100)}%. Left and right arrows adjust saturation. Up and down arrows adjust brightness.`);
+    hueInput.value = String(Math.round(hue));
+    hueInput.setAttribute('aria-valuetext', `${Math.round(hue)} degrees`);
+    if (document.activeElement !== hexInput) { hexInput.value = color.toUpperCase(); hexInput.removeAttribute('aria-invalid'); }
+  }
+  picker.onclick = () => { pickerOpen = !pickerOpen; sync(); };
+  function moveColor(event) {
+    const rect = colorField.getBoundingClientRect();
+    saturation = clamp((event.clientX - rect.left) / rect.width, 1);
+    brightness = 1 - clamp((event.clientY - rect.top) / rect.height, 1);
+    writeColor();
+  }
+  function finishColorDrag() {
+    const id = colorPointer;
+    colorPointer = null;
+    if (id !== null && colorField.hasPointerCapture(id)) colorField.releasePointerCapture(id);
+  }
+  colorField.onpointerdown = event => {
+    if (event.button !== 0 || colorPointer !== null) return;
+    event.preventDefault(); event.stopPropagation();
+    colorField.focus({ preventScroll: true });
+    colorPointer = event.pointerId;
+    colorField.setPointerCapture(event.pointerId);
+    moveColor(event);
+  };
+  colorField.onpointermove = event => { if (colorPointer === event.pointerId) moveColor(event); };
+  colorField.onpointerup = event => { if (colorPointer === event.pointerId) { moveColor(event); finishColorDrag(); } };
+  colorField.onpointercancel = finishColorDrag;
+  colorField.onlostpointercapture = finishColorDrag;
+  window.addEventListener('blur', finishColorDrag);
+  colorField.onkeydown = event => {
+    if (!['ArrowLeft', 'ArrowRight', 'ArrowUp', 'ArrowDown'].includes(event.key)) return;
+    event.preventDefault(); event.stopPropagation();
+    const step = event.shiftKey ? .1 : .01;
+    if (event.key === 'ArrowLeft') saturation = clamp(saturation - step, 1);
+    if (event.key === 'ArrowRight') saturation = clamp(saturation + step, 1);
+    if (event.key === 'ArrowUp') brightness = clamp(brightness + step, 1);
+    if (event.key === 'ArrowDown') brightness = clamp(brightness - step, 1);
+    writeColor();
+  };
+  hueInput.oninput = () => { hue = Number(hueInput.value); writeColor(); };
+  function applyHex(commit = false) {
+    const value = hexInput.value.trim().replace(/^#/, '');
+    const valid = /^[\da-f]{6}$/i.test(value) || (commit && /^[\da-f]{3}$/i.test(value));
+    if (valid) {
+      color = '#' + (value.length === 3 ? [...value].map(char => char + char).join('') : value).toLowerCase();
+      readColor(color); hexInput.removeAttribute('aria-invalid'); sync();
+    } else hexInput.setAttribute('aria-invalid', 'true');
+    if (commit) { hexInput.value = color.toUpperCase(); hexInput.removeAttribute('aria-invalid'); }
+  }
+  hexInput.oninput = () => applyHex();
+  hexInput.onblur = () => applyHex(true);
+  hexInput.onkeydown = event => { if (event.key === 'Enter') { event.preventDefault(); applyHex(true); } };
+  function render() { drawings.setAttribute('transform', `translate(${-scrollX} ${-scrollY})`); }
+  function update(event) {
+    const p = point(event), start = drag.start;
+    drag.end = p;
+    if (mode === 'capture') {
+      Object.assign(selection.style, { left: `${Math.min(start.x, p.x)}px`, top: `${Math.min(start.y, p.y)}px`, width: `${Math.abs(p.x - start.x)}px`, height: `${Math.abs(p.y - start.y)}px` });
+      selection.textContent = `${Math.round(Math.abs(p.x - start.x))} × ${Math.round(Math.abs(p.y - start.y))}`;
+      selection.hidden = false;
+      return;
+    }
+    const a = drag.origin, b = { x: p.x + scrollX, y: p.y + scrollY };
+    const left = Math.min(a.x, b.x), top = Math.min(a.y, b.y), w = Math.abs(b.x - a.x), h = Math.abs(b.y - a.y);
+    let d;
+    if (shape === 'pencil') {
+      drag.points.push(b);
+      d = drag.points.map((p, i) => `${i ? 'L' : 'M'}${p.x} ${p.y}`).join(' ');
+    } else if (shape === 'rectangle') d = `M${left} ${top}h${w}v${h}h${-w}Z`;
+    else if (shape === 'ellipse') d = `M${left} ${top + h/2}a${w/2} ${h/2} 0 1 0 ${w} 0a${w/2} ${h/2} 0 1 0 ${-w} 0`;
+    else {
+      const angle = Math.atan2(b.y-a.y, b.x-a.x), size = Math.min(16, Math.hypot(b.x-a.x,b.y-a.y)/3);
+      d = `M${a.x} ${a.y}L${b.x} ${b.y}M${b.x-size*Math.cos(angle-.5)} ${b.y-size*Math.sin(angle-.5)}L${b.x} ${b.y}L${b.x-size*Math.cos(angle+.5)} ${b.y-size*Math.sin(angle+.5)}`;
+    }
+    drag.node.setAttribute('d', d);
+  }
+  surface.addEventListener('pointerdown', event => {
+    if (event.button !== 0 || drag || busy) return;
+    event.preventDefault(); event.stopPropagation();
+    const start = point(event), origin = { x: start.x + scrollX, y: start.y + scrollY };
+    drag = { id: event.pointerId, start, end: start, origin, points: [origin] };
+    if (mode === 'annotate') {
+      drag.node = document.createElementNS(ns, 'path');
+      drag.node.setAttribute('fill', 'none');
+      drag.node.setAttribute('stroke', color);
+      drag.node.setAttribute('stroke-width', String(stroke));
+      drag.node.setAttribute('stroke-linecap', 'round');
+      drag.node.setAttribute('stroke-linejoin', 'round');
+      drawings.append(drag.node);
+    }
+    surface.setPointerCapture(event.pointerId);
+    update(event);
+  });
+  surface.addEventListener('pointermove', event => { if (drag?.id === event.pointerId) { event.preventDefault(); update(event); } });
+  surface.addEventListener('pointerup', async event => {
+    if (drag?.id !== event.pointerId) return;
+    event.preventDefault(); event.stopPropagation();
+    update(event);
+    const finished = drag;
+    drag = null;
+    surface.releasePointerCapture(event.pointerId);
+    selection.hidden = true;
+    if (mode === 'annotate') { history.push(finished.node); sync(); return; }
+    const region = { left: Math.floor(Math.min(finished.start.x, finished.end.x)), top: Math.floor(Math.min(finished.start.y, finished.end.y)), width: Math.round(Math.abs(finished.end.x-finished.start.x)), height: Math.round(Math.abs(finished.end.y-finished.start.y)) };
+    if (region.width < 4 || region.height < 4) return;
+    busy = true;
+    const current = ++revision;
+    surface.setAttribute('aria-busy', 'true');
+    sync();
+    try {
+      const result = await capture(region, layer);
+      if (current !== revision) return;
+      if (!result) throw new Error('Page is not visible');
+      const url = URL.createObjectURL(result.blob);
+      const link = document.createElement('a');
+      link.href = url; link.download = `comty-${new Date().toISOString().replace(/[:.]/g, '-')}.png`;
+      link.click();
+      setTimeout(() => URL.revokeObjectURL(url), 60000);
+    } catch (error) {
+      if (current === revision) onError(`Capture failed. ${error.message}. Try again.`);
+    } finally {
+      busy = false; surface.removeAttribute('aria-busy'); sync();
+    }
+  });
+  surface.addEventListener('pointercancel', cancelDrag);
+  surface.addEventListener('lostpointercapture', cancelDrag);
+  surface.addEventListener('click', event => { event.preventDefault(); event.stopPropagation(); });
+  surface.addEventListener('wheel', event => { if (drag || busy) event.preventDefault(); }, { passive: false });
+  document.addEventListener('scroll', () => { cancelDrag(); render(); }, { passive: true, capture: true });
+  window.addEventListener('resize', cancelDrag);
+  window.addEventListener('blur', cancelDrag);
+  return {
+    panel, setMode, render, clear,
+    get mode() { return mode; },
+    get busy() { return busy; },
+    setVisible(value) { visible = value; if (!value) { revision++; mode = null; pickerOpen = false; finishColorDrag(); cancelDrag(); } sync(); },
+    keydown(event) {
+      if (!mode) return false;
+      if (event.key === 'Escape') {
+        if (pickerOpen) { pickerOpen = false; finishColorDrag(); picker.focus({ preventScroll: true }); sync(); return true; }
+        if (drag) cancelDrag(); else setMode(null);
+        return true;
+      }
+      if (mode === 'annotate' && (event.metaKey || event.ctrlKey) && !event.shiftKey && event.key.toLowerCase() === 'z') { cancelDrag(); undo(); return true; }
+      return false;
+    },
+  };
+}
+
 const edgeAxis = { top: "y", bottom: "y", left: "x", right: "x" };
 const clamp = (value, min, max) => Math.max(min, Math.min(max, value));
 
@@ -2911,7 +3390,7 @@ function measurementPoint(anchor, rect, scroll = { x: 0, y: 0 }) {
 }
 
 /** Border measurements live for one activation of the existing ruler tool. */
-function createMeasurements({ root, isComtyElement, isElementTreeHidden, onExit }) {
+function createMeasurements({ root, isComtyElement, isElementTreeHidden, onExit, isInteractionBlocked = () => false }) {
   let enabled = false;
   let hover = null;
   let drag = null;
@@ -3035,7 +3514,7 @@ function createMeasurements({ root, isComtyElement, isElementTreeHidden, onExit
     }
   }
   function isHostEvent(event) {
-    if (!enabled || !(event.target instanceof Element)) return false;
+    if (!enabled || isInteractionBlocked() || !(event.target instanceof Element)) return false;
     if (!isComtyElement(event.target)) return true;
     // The outer ruler strip must still let us anchor to the page's top/left edge.
     return event.target.matches(".comty-ruler") && (event.clientX + scrollX <= 10 || event.clientY + scrollY <= 10);
@@ -3073,7 +3552,7 @@ function createMeasurements({ root, isComtyElement, isElementTreeHidden, onExit
     if (isHostEvent(event)) { event.preventDefault(); event.stopImmediatePropagation(); }
   }, true);
   document.addEventListener("keydown", event => {
-    if (!enabled || event.key !== "Escape" || event.target.closest?.(".comty-auth-dialog, input, textarea, [contenteditable=true]")) return;
+    if (!enabled || isInteractionBlocked() || event.key !== "Escape" || event.target.closest?.(".comty-auth-dialog, input, textarea, [contenteditable=true]")) return;
     event.preventDefault(); event.stopImmediatePropagation();
     if (drag) cancel(); else onExit();
   }, true);
@@ -3095,7 +3574,17 @@ const instanceKey = Symbol.for("comty.sdk.instance");
 /** Initialize once per document; safe to import and call during server rendering. */
 function initComty(options = {}) {
   if (typeof window === "undefined" || typeof document === "undefined") return Promise.resolve();
-  const projectKey = options.projectKey;
+  const isLocalSite = ["localhost", "127.0.0.1", "[::1]"].includes(window.location.hostname);
+  const agent = options.agent;
+  if (agent && (!isLocalSite || typeof agent.token !== "string" || !/^[a-f0-9]{64}$/.test(agent.token))) {
+    return Promise.reject(new TypeError("Comty: invalid local companion configuration"));
+  }
+  if (agent) {
+    try {
+      if (new URL(agent.url).origin !== window.location.origin) throw new Error();
+    } catch { return Promise.reject(new TypeError("Comty: companion must share the page origin")); }
+  }
+  const projectKey = options.projectKey || (agent ? "local" : undefined);
   const apiUrl = options.apiUrl || "http://localhost:4000";
   if (typeof projectKey !== "string" || !projectKey.trim()) {
     return Promise.reject(new TypeError("Comty: projectKey is required"));
@@ -3107,12 +3596,14 @@ function initComty(options = {}) {
   if (!["http:", "https:"].includes(parsedApi.protocol)) {
     return Promise.reject(new TypeError("Comty: apiUrl must be an absolute HTTP(S) URL"));
   }
-  const configuration = JSON.stringify([projectKey, apiUrl]);
+  const configuration = JSON.stringify([projectKey, apiUrl, agent || null]);
   const existing = window[instanceKey];
   if (existing) {
     return existing.configuration === configuration ? existing.ready
       : Promise.reject(new Error("Comty: already initialized with different options"));
   }
+  const agentBridgeUrl = agent?.url;
+  const localOnly = Boolean(agent && !options.projectKey);
   const ready = new Promise((resolve, reject) => {
     const mount = () => {
       try { resolve(mountComty()); } catch (error) { reject(error); }
@@ -3126,10 +3617,24 @@ function initComty(options = {}) {
 
   function mountComty() {
     let projectId = null;
+    let localTasks = [];
+    const deliveringAgentReplies = new Set();
+    let localApprovals = [];
+    const seenAgentApprovals = new Set();
+    // Only requests made in this document may interrupt it with agent notifications.
+    const requestedAgentTasks = new Set();
+    let agentPanelOpen = false;
+    let agentPanelSignature = "";
+    let agentPanelTransition = 0;
+    let agentConnectionError = "";
+    let agentActionError = "";
+    let clearAgentToast = () => {};
+    const agentPendingActions = new Set();
     const session = {
       mode: "off",
-      get comments() { return this.mode === "browse" || this.mode === "edit"; },
-      get edit() { return this.mode === "edit"; },
+      get comments() { return this.mode === "browse" || this.mode === "edit" || this.mode === "agent"; },
+      get edit() { return this.mode === "edit" || this.mode === "agent"; },
+      get agent() { return this.mode === "agent"; },
       get inspect() { return this.mode === "inspect"; },
     };
     const selectedStatusFilters = new Set();
@@ -3153,9 +3658,10 @@ function initComty(options = {}) {
     const authReturnStorageKey = `comty:${projectKey}:auth-return`;
     let sdkToken = "";
     const activeHoverCommentIds = new Set();
-    /** @type {null | 'edit' | 'browse'} */
+    /** @type {null | 'edit' | 'browse' | 'agent'} */
     let sessionEntry = null;
     const placedPins = new Map();
+    const workingOutlines = new Map();
     const placementDiagnostics = new Map();
     let inspectedElement = null;
     let selectedElement = null;
@@ -3169,8 +3675,8 @@ function initComty(options = {}) {
     const commentTargets = new Map();
 
     const {
-      matchesAnchorContext, resolveByAnchorContext,
-      isElementTreeHidden, getTopActiveModal, getVisibleAnchorPoint,
+      matchesAnchorContext,
+      resolveAnchor, isElementTreeHidden, getTopActiveModal, getVisibleAnchorPoint,
     } = createAnchorMatcher({
       getElementTextSignature,
       getElementOwnTextSignature,
@@ -3248,10 +3754,27 @@ function initComty(options = {}) {
     const inspectorBtn = toolButton("Inspect · Shift I", '<path d="M8 3H5a2 2 0 0 0-2 2v3m13-5h3a2 2 0 0 1 2 2v3M3 16v3a2 2 0 0 0 2 2h3m13-5v3a2 2 0 0 1-2 2h-3"/><path d="m9 9 8 4-4 1-1 4Z"/>', () => setSession("inspect"));
     const btn = toolButton("Comment · Shift C", '<path d="M21 11.5a8.4 8.4 0 0 1-.9 3.8 8.5 8.5 0 0 1-7.6 4.7 8.4 8.4 0 0 1-3.8-.9L3 21l1.9-5.7a8.4 8.4 0 0 1-.9-3.8 8.5 8.5 0 0 1 4.7-7.6A8.4 8.4 0 0 1 12.5 3h.5a8.5 8.5 0 0 1 8 8v.5Z"/>', () => {
       if (!canWrite) showAuthPrompt();
-      else if (session.inspect || !isSessionActive()) startEditSession();
+      else if (session.agent || session.inspect || !isSessionActive()) startEditSession();
       else if (!session.edit) setSession("edit", { entry: sessionEntry });
     });
     btn.id = "comty-toggle";
+    const agentBtn = isLocalSite
+      ? toolButton("Agent task · localhost only", '<path d="M8 7 3 12l5 5m8-10 5 5-5 5M14 4l-4 16"/>', () => {
+          if (session.agent) {
+            const failedTask = [...localTasks].reverse().find(task => task.status === 'in_review' && !task.thread_comment_id);
+            const failedPin = failedTask && placedPins.get(String(failedTask.id));
+            if (failedPin && !failedPin.hasAttribute('data-comty-anchor-hidden')) { failedPin.click(); return; }
+            if (localTasks.some(task => task.status === 'in_review' || (!task.thread_comment_id && task.status === 'done')) || localApprovals.length) {
+              agentPanelOpen = true;
+              renderAgentPanel();
+            }
+          } else startAgentSession();
+        })
+      : null;
+    if (agentBtn) {
+      agentBtn.title = "Agent · Shift A · localhost only";
+      agentBtn.setAttribute("aria-keyshortcuts", "Shift+A");
+    }
     const divider = document.createElement("span");
     divider.className = "comty-tool-divider";
     toolbar.appendChild(divider);
@@ -3261,7 +3784,7 @@ function initComty(options = {}) {
     const primaryTools = document.createElement("div");
     primaryTools.className = "comty-tool-primary";
     toolbar.insertBefore(primaryTools, browseBtn);
-    for (const button of [browseBtn, inspectorBtn, btn]) primaryTools.appendChild(button);
+    for (const button of [browseBtn, inspectorBtn, btn, agentBtn].filter(Boolean)) primaryTools.appendChild(button);
     const inspectorTools = document.createElement("div");
     inspectorTools.className = "comty-tool-context";
     inspectorTools.hidden = true;
@@ -3291,6 +3814,7 @@ function initComty(options = {}) {
       root,
       isComtyElement,
       isElementTreeHidden,
+      isInteractionBlocked: () => Boolean(markup.mode),
       onExit() { rulersEnabled = false; syncInspectorTools(); },
     });
     const gridLayer = document.createElement("div");
@@ -3317,6 +3841,7 @@ function initComty(options = {}) {
       syncInspectorTools();
     });
     const rulersBtn = toolButton("Rulers · R", '<path d="M3 3h18v6H9v12H3Z"/><path d="M7 3v3m4-3v3m4-3v3M3 11h3m-3 4h3m-3 4h3"/>', () => {
+      markup.setMode(null);
       closePropertyPanel();
       if (motion.enabled) setMotionEnabled(false);
       rulersEnabled = !rulersEnabled;
@@ -3327,6 +3852,7 @@ function initComty(options = {}) {
       syncInspectorTools();
     });
     const gridBtn = toolButton("Layout guides · G", '<rect x="3" y="3" width="18" height="18" rx="2"/><path d="M3 10h18M10 3v18"/>', () => {
+      markup.setMode(null);
       closePropertyPanel();
       if (motion.enabled) setMotionEnabled(false);
       gridPanelOpen = !gridPanelOpen;
@@ -3344,7 +3870,37 @@ function initComty(options = {}) {
     }
     const motionBtn = toolButton("Motion · M", '<circle cx="12" cy="14" r="8"/><path d="M9 2h6m-3 4V2m6 5 2-2m-8 5v4l3 2"/>', () => setMotionEnabled(!motion.enabled));
     motionBtn.setAttribute("aria-expanded", "false");
-    for (const button of [xrayBtn, rulersBtn, gridBtn, pipetteBtn, typographyBtn, motionBtn]) inspectorTools.appendChild(button);
+    const annotateBtn = toolButton("Annotate · D", '<path d="m16 3 5 5L8 21H3v-5ZM14 5l5 5"/>', () => toggleMarkup("annotate"));
+    const screenshotBtn = toolButton("Capture area · S", '<path d="M8 3H5a2 2 0 0 0-2 2v3m13-5h3a2 2 0 0 1 2 2v3M3 16v3a2 2 0 0 0 2 2h3m13-5v3a2 2 0 0 1-2 2h-3"/><rect x="7" y="8" width="10" height="8" rx="1"/><circle cx="12" cy="12" r="2"/>', () => toggleMarkup("capture"));
+    const markup = createInspectMarkup({
+      root, icon,
+      onError: description => showNotice({ title: "Screenshot unavailable", description }),
+      onChange() {
+        annotateBtn.setAttribute("aria-pressed", String(markup.mode === "annotate"));
+        annotateBtn.setAttribute("aria-expanded", String(markup.mode === "annotate"));
+        screenshotBtn.setAttribute("aria-pressed", String(markup.mode === "capture"));
+        screenshotBtn.setAttribute("aria-busy", String(markup.busy));
+        positionToolbar();
+      },
+      capture: (region, layer) => captureViewportScreenshot({ region, annotation: () => ({
+        elements: [overlayTools, root.querySelector('.comty-distance-layer'), layer].filter(node => node && !node.hidden),
+        dispose() {},
+      }) }),
+    });
+    for (const button of [annotateBtn]) {
+      button.setAttribute("aria-controls", markup.panel.id);
+      button.setAttribute("aria-expanded", "false");
+    }
+    function toggleMarkup(mode) {
+      const next = markup.mode === mode ? null : mode;
+      closePropertyPanel();
+      if (motion.enabled) setMotionEnabled(false);
+      gridPanelOpen = false; toolPanel.hidden = true; gridBtn.setAttribute("aria-expanded", "false");
+      cancelRulerDrag();
+      selectedElement = null; measuredRegion = null; inspectDrag = null; hideInspector();
+      markup.setMode(next);
+    }
+    for (const button of [xrayBtn, rulersBtn, gridBtn, pipetteBtn, typographyBtn, motionBtn, annotateBtn, screenshotBtn]) inspectorTools.appendChild(button);
 
     const motion = { enabled: false, speed: 1, paused: false, managed: new Map(), shadowRoots: [], nextRootScan: 0 };
     const motionPanel = document.createElement('section');
@@ -3393,6 +3949,7 @@ function initComty(options = {}) {
       motion.enabled = enabled; motionPanel.hidden = !enabled;
       motionBtn.setAttribute('aria-pressed', String(enabled)); motionBtn.setAttribute('aria-expanded', String(enabled));
       if (enabled) {
+        markup.setMode(null);
         closePropertyPanel();
         rulersEnabled = false;
         syncInspectorTools();
@@ -3651,6 +4208,7 @@ function initComty(options = {}) {
       const visible = session.inspect;
       measurements.setEnabled(visible && rulersEnabled && !motion.enabled);
       overlayTools.hidden = !visible;
+      markup.setVisible(visible);
       xrayBtn.setAttribute("aria-pressed", String(visible && xrayEnabled));
       rulersBtn.setAttribute("aria-pressed", String(visible && rulersEnabled));
       gridBtn.setAttribute("aria-pressed", String(visible && layoutGuides.some(guide => guide.visible)));
@@ -3934,6 +4492,7 @@ function initComty(options = {}) {
     }
 
     function openPropertyPanel(kind, element, property, opener = null, sampledColor = null) {
+      markup.setMode(null);
       propertyPicking = null;
       colorMagnifier.setEnabled(false);
       delete document.documentElement.dataset.comtyPropertyPicking;
@@ -4114,6 +4673,50 @@ function initComty(options = {}) {
     let toolbarMotionFrame = 0;
     let toolbarAnimations = [];
     const reducedMotion = matchMedia("(prefers-reduced-motion: reduce)");
+    let workingIndicatorTimer = 0;
+    function scheduleWorkingIndicators() {
+      if (workingIndicatorTimer || reducedMotion.matches || document.hidden) return;
+      workingIndicatorTimer = setTimeout(() => {
+        workingIndicatorTimer = 0;
+        if (!root.isConnected) return;
+        const indicators = root.querySelectorAll('.comty-working-indicator');
+        if (!indicators.length) return;
+        for (const indicator of indicators) {
+          const previous = Number(indicator.dataset.activeDots.split(',')[0]);
+          const first = (previous + 1 + Math.floor(Math.random() * 8)) % 9;
+          const second = (first + 1 + Math.floor(Math.random() * 8)) % 9;
+          indicator.dataset.activeDots = `${first},${second}`;
+          [...indicator.children].forEach((dot, index) => dot.toggleAttribute('data-active', index === first || index === second));
+        }
+        scheduleWorkingIndicators();
+      }, 600);
+    }
+    function createWorkingIndicator() {
+      const indicator = document.createElement('span');
+      indicator.className = 'comty-working-indicator';
+      indicator.setAttribute('aria-hidden', 'true');
+      indicator.dataset.activeDots = '3,5';
+      for (let index = 0; index < 9; index++) {
+        const dot = document.createElement('i');
+        dot.toggleAttribute('data-active', index === 3 || index === 5);
+        indicator.appendChild(dot);
+      }
+      scheduleWorkingIndicators();
+      return indicator;
+    }
+    function resetWorkingIndicators() {
+      clearTimeout(workingIndicatorTimer);
+      workingIndicatorTimer = 0;
+      if (reducedMotion.matches) {
+        for (const indicator of root.querySelectorAll('.comty-working-indicator')) {
+          indicator.dataset.activeDots = '3,5';
+          [...indicator.children].forEach((dot, index) => dot.toggleAttribute('data-active', index === 3 || index === 5));
+        }
+      }
+      if (root.querySelector('.comty-working-indicator')) scheduleWorkingIndicators();
+    }
+    reducedMotion.addEventListener('change', resetWorkingIndicators);
+    document.addEventListener('visibilitychange', resetWorkingIndicators);
     const clampToolbar = (value, size, viewport) => Math.max(8, Math.min(value, viewport - size - 8));
     function rememberToolbarPosition(left, top) {
       const width = toolbar.offsetWidth, height = toolbar.offsetHeight;
@@ -4147,7 +4750,7 @@ function initComty(options = {}) {
         });
       }
       const rect = toolbar.getBoundingClientRect();
-      for (const panel of [toolPanel, propertyPanel, sidepanel, motionPanel]) {
+      for (const panel of [toolPanel, propertyPanel, sidepanel, motionPanel, markup.panel]) {
         if (panel.hidden || (panel === sidepanel && !sidepanelOpen)) continue;
         const above = rect.top - 16;
         const below = innerHeight - rect.bottom - 16;
@@ -4164,9 +4767,10 @@ function initComty(options = {}) {
         panel.style.top = `${useAbove ? rect.top - panel.offsetHeight - 8 : rect.bottom + 8}px`;
         panel.style.bottom = "auto";
       }
+      positionNotice();
     }
     const toolbarResize = new ResizeObserver(positionToolbar);
-    [toolbar, toolPanel, propertyPanel, sidepanel, motionPanel].forEach(node => toolbarResize.observe(node));
+    [toolbar, toolPanel, propertyPanel, sidepanel, motionPanel, markup.panel].forEach(node => toolbarResize.observe(node));
     window.addEventListener("resize", positionToolbar);
 
     toolbar.addEventListener("pointerdown", event => {
@@ -4226,7 +4830,7 @@ function initComty(options = {}) {
 
     function prepareToolbarMotion() {
       if (toolbarMotionFrame) return;
-      const nodes = [toolbarSurface, dragHandle, primaryTools, commentTools, inspectorTools].filter(Boolean);
+      const nodes = [toolbarSurface, dragHandle, primaryTools, commentTools, inspectorTools];
       // Move each group's background with its icons, including when interrupted.
       const before = new Map(nodes.filter(node => !node.hidden).map(node => [node, {
         rect: node.getBoundingClientRect(), opacity: getComputedStyle(node).opacity,
@@ -4450,7 +5054,8 @@ function initComty(options = {}) {
         selectedElement = null;
         sessionEntry = null;
         session.mode = "off";
-        document.documentElement.classList.remove("comty-comments-active", "comty-comment-placement");
+        syncPlacementCursor();
+        document.documentElement.classList.remove("comty-comments-active", "comty-inspect-annotations");
         hideInspector();
         setSidepanelOpen(false);
         closeBubbles();
@@ -4464,25 +5069,29 @@ function initComty(options = {}) {
       if (mode === "off") return;
       if (mode === "inspect") {
         session.mode = "inspect";
+        document.documentElement.classList.add("comty-inspect-annotations");
         syncToolbar();
+        renderCachedComments();
         ensureLiveTracking();
         return;
       }
 
-      if (session.edit && mode === "browse") {
+      if ((session.edit && mode === "browse") || (session.agent && mode === "edit")) {
         closeBubbles();
       }
       const hadComments = session.comments;
       session.mode = mode;
       sessionEntry = entry;
+      document.documentElement.classList.remove("comty-inspect-annotations");
       document.documentElement.classList.toggle("comty-comments-active", session.comments);
-      document.documentElement.classList.toggle("comty-comment-placement", session.edit);
+      syncPlacementCursor();
       if (session.edit) {
         setMotionEnabled(false);
         selectedElement = null;
       } else {
         hideInspector();
       }
+      if (session.agent && sidepanelOpen) setSidepanelOpen(false);
       syncToolbar();
       ensureLiveTracking();
       if (renderComments || !hadComments) renderCachedComments();
@@ -4495,6 +5104,10 @@ function initComty(options = {}) {
     }
 
     function showAuthPrompt(forbidden = false, onReady = startEditSession) {
+      if (localOnly) {
+        showNotice({ title: "Comments are not configured", description: "Connect this site to a Comty project to leave shared comments." });
+        return;
+      }
       const guestAllowed = allowGuestComments;
       document.querySelector(".comty-auth-backdrop")?.remove();
       const opener = document.activeElement;
@@ -4616,14 +5229,17 @@ function initComty(options = {}) {
     }
 
     function syncToolbar() {
-      if (commentTools.hidden !== session.inspect || inspectorTools.hidden !== !session.inspect) prepareToolbarMotion();
+      if (commentTools.hidden !== (session.inspect || session.agent) || inspectorTools.hidden !== !session.inspect) prepareToolbarMotion();
       root.classList.toggle("comty-active", session.comments || session.edit || sidepanelOpen || session.inspect);
       browseBtn.setAttribute("aria-pressed", String(!session.edit && !session.inspect));
       inspectorBtn.setAttribute("aria-pressed", String(session.inspect));
-      btn.setAttribute("aria-pressed", String(session.edit));
-      commentTools.hidden = session.inspect;
+      btn.setAttribute("aria-pressed", String(session.edit && !session.agent));
+      agentBtn?.setAttribute("aria-pressed", String(session.edit && session.agent));
+      commentTools.hidden = session.inspect || session.agent;
       inspectorTools.hidden = !session.inspect;
       syncInspectorTools();
+      renderAgentPanel();
+      positionNotice();
     }
 
     const inspectionLayer = document.createElement("div");
@@ -4936,7 +5552,7 @@ function initComty(options = {}) {
         });
         return;
       }
-      if (propertyPicking || motion.enabled || (session.inspect && rulersEnabled)) {
+      if (markup.mode || propertyPicking || motion.enabled || (session.inspect && rulersEnabled)) {
         if (inspectionLayer.childNodes.length) hideInspector();
         return;
       }
@@ -5080,10 +5696,20 @@ function initComty(options = {}) {
 
     function startBrowseSession() {
       setSession("browse", { renderComments: true });
+      void loadComments({ force: true });
     }
 
     function startEditSession() {
       setSession("edit", { renderComments: true });
+      void loadComments({ force: true });
+    }
+
+    function startAgentSession() {
+      if (!isLocalSite) return;
+      if (session.agent) return;
+      closeBubbles();
+      setSession("agent", { renderComments: true });
+      void loadComments({ force: true });
     }
 
     function toggleSidepanel() {
@@ -5109,7 +5735,7 @@ function initComty(options = {}) {
         showAuthPrompt();
         return;
       }
-      if (session.inspect || !isSessionActive()) {
+      if (session.agent || session.inspect || !isSessionActive()) {
         startEditSession();
         return;
       }
@@ -5397,6 +6023,24 @@ function initComty(options = {}) {
         ancestors,
         layer: layer ? getElementFingerprint(layer) : null,
       };
+      // React exposes this in development builds. Keep it as a hint: the coding
+      // agent must confirm the component and variant in source before editing.
+      const fiberKey = Object.keys(el).find(key => key.startsWith('__reactFiber$'));
+      let fiber = fiberKey ? el[fiberKey] : null;
+      const components = [];
+      while (fiber && components.length < 8) {
+        const component = fiber.type;
+        const name = component?.displayName || component?.name;
+        if (name && typeof name === 'string') {
+          const props = fiber.memoizedProps || {};
+          const variants = Object.fromEntries(['variant', 'size', 'tone', 'appearance'].filter(key =>
+            ['string', 'number', 'boolean'].includes(typeof props[key])).map(key => [key, props[key]]));
+          const source = fiber._debugSource;
+          components.push({ name, variants, ...(source?.fileName ? { file: source.fileName, line: source.lineNumber } : {}) });
+        }
+        fiber = fiber.return;
+      }
+      if (components.length) context.components = components;
       context.candidateCount = [...document.querySelectorAll(context.target.tag)]
         .filter(candidate => !isComtyNode(candidate) && matchesAnchorContext(candidate, context)).length;
       return context;
@@ -5425,6 +6069,11 @@ function initComty(options = {}) {
       };
     }
 
+    function getPagePath() {
+      const { pathname, hash } = window.location;
+      return pathname + (hash.startsWith("#/") || hash.startsWith("#!/") ? hash : "");
+    }
+
     function resolveBySelector(selector) {
       if (!selector) return null;
       try {
@@ -5446,17 +6095,9 @@ function initComty(options = {}) {
       }
       const context = parseAnchorContext(comment);
       const exact = resolveBySelector(comment.selector || "body");
-      if (context?.candidateCount > 1) {
-        const count = [...document.querySelectorAll("*")].filter(candidate => candidate.tagName.toLowerCase() === context.target.tag)
-          .filter(candidate => !isComtyNode(candidate) && matchesAnchorContext(candidate, context)).length;
-        if (count !== context.candidateCount) {
-          commentTargets.set(key, { element: null, signature, revision: anchorRevision });
-          return null;
-        }
-      }
-      let element = exact && matchesAnchorContext(exact, context) ? getAnchorElement(exact) : null;
-      if (!element) element = resolveByAnchorContext(context);
-      commentTargets.set(key, { element, signature, revision: anchorRevision });
+      const resolution = resolveAnchor(context, exact);
+      const element = resolution.element ? getAnchorElement(resolution.element) : null;
+      commentTargets.set(key, { ...resolution, element, signature, revision: anchorRevision });
       return element;
     }
 
@@ -5527,9 +6168,14 @@ function initComty(options = {}) {
       return { deviceType: "desktop", deviceLabel: "Desktop" };
     }
 
+    function syncPlacementCursor() {
+      document.documentElement.classList.toggle("comty-comment-placement", session.edit && !draftAnchor);
+    }
+
     function closeBubbles() {
       const hadDraft = Boolean(draftAnchor);
       draftAnchor = null;
+      syncPlacementCursor();
       activeHoverCommentIds.clear();
       if (!session.edit || hadDraft) hideInspector();
       document
@@ -5574,7 +6220,7 @@ function initComty(options = {}) {
         pending: commentId.startsWith("pending-"),
         project_id: projectId,
         domain: payload.host || window.location.host,
-        page_path: payload.pagePath || window.location.pathname,
+        page_path: payload.pagePath || getPagePath(),
         selector: payload.selector || "body",
         rel_x: payload.relX,
         rel_y: payload.relY,
@@ -5599,7 +6245,7 @@ function initComty(options = {}) {
         replies: [],
       };
 
-      cachedPagePath = window.location.pathname;
+      cachedPagePath = getPagePath();
       cachedComments = [
         ...cachedComments.filter(
           (cached) => getCommentId(cached) !== commentId,
@@ -5612,6 +6258,7 @@ function initComty(options = {}) {
     }
 
     function getCommentAuthorName(comment) {
+      if (comment?.author_kind === 'agent') return 'Agent';
       return comment?.author_name || comment?.name || "Anonymous";
     }
 
@@ -5633,6 +6280,12 @@ function initComty(options = {}) {
     function createCommentAvatar(comment, extraClass = "") {
       const avatar = document.createElement("span");
       avatar.className = `comty-comment-avatar${extraClass ? ` ${extraClass}` : ""}`;
+      if (comment?.author_kind === 'agent') {
+        avatar.classList.add('comty-agent-avatar');
+        avatar.setAttribute('aria-label', 'Agent');
+        avatar.innerHTML = '<svg viewBox="0 0 48 48" aria-hidden="true"><path d="M24 2C26.62 2 28.47 5.29 31.27 6.45C34.07 7.61 37.71 6.59 39.56 8.44C41.41 10.29 40.39 13.93 41.55 16.73C42.71 19.53 46 21.38 46 24C46 26.62 42.71 28.47 41.55 31.27C40.39 34.07 41.41 37.71 39.56 39.56C37.71 41.41 34.07 40.39 31.27 41.55C28.47 42.71 26.62 46 24 46C21.38 46 19.53 42.71 16.73 41.55C13.93 40.39 10.29 41.41 8.44 39.56C6.59 37.71 7.61 34.07 6.45 31.27C5.29 28.47 2 26.62 2 24C2 21.38 5.29 19.53 6.45 16.73C7.61 13.93 6.59 10.29 8.44 8.44C10.29 6.59 13.93 7.61 16.73 6.45C19.53 5.29 21.38 2 24 2Z" fill="currentColor"/><path fill="var(--comty-surface)" fill-rule="evenodd" d="M16 33 22.3 15h3.4L32 33h-3.3l-1.3-4h-6.8l-1.3 4H16Zm5.5-6.8h5L24 18.4l-2.5 7.8Z"/></svg>';
+        return avatar;
+      }
       const authorName = getCommentAuthorName(comment);
       const avatarUrl = getCommentAuthorAvatarUrl(comment);
 
@@ -5640,6 +6293,7 @@ function initComty(options = {}) {
         const image = document.createElement("img");
         image.src = avatarUrl;
         image.alt = "";
+        image.draggable = false;
         image.onerror = () => {
           image.remove();
           avatar.innerText = authorName.charAt(0).toUpperCase();
@@ -5793,6 +6447,7 @@ function initComty(options = {}) {
     function createCommentPin(comment, x, y) {
       const pin = document.createElement("button");
       pin.className = "comty-pin";
+      pin.toggleAttribute('data-agent-task', Boolean(comment.local_agent));
       pin.type = "button";
       pin.style.left = `${x}px`;
       pin.style.top = `${y}px`;
@@ -5810,10 +6465,52 @@ function initComty(options = {}) {
       const thread = document.createElement("div");
       thread.className = "comty-thread";
       thread.appendChild(createThreadItem(comment, { showMore: false, showLink: false }).item);
+      if (comment.local_agent) {
+        thread.appendChild(createThreadItem({ author_kind: 'agent', content: 'Modification failed. Open to retry or dismiss.' }, { showMore: false }).item);
+      }
       bubble.appendChild(thread);
       return bubble;
     }
 
+    function openAgentTask(task, x, y) {
+      closeBubbles();
+      const bubble = document.createElement('div');
+      bubble.className = 'comty-bubble comty-agent-task-thread';
+      bubble.dataset.commentId = task.id;
+      bubble.setAttribute('role', 'dialog');
+      bubble.setAttribute('aria-label', 'Failed modification');
+      const header = document.createElement('div'); header.className = 'comty-bubble-header';
+      const title = document.createElement('strong'); title.textContent = 'Modification failed';
+      const close = document.createElement('button'); close.type = 'button'; close.className = 'comty-icon-button';
+      close.setAttribute('aria-label', 'Close failed modification');
+      close.innerHTML = icon('<path d="m6 6 12 12M6 18 18 6"/>');
+      close.onclick = () => closeBubbles();
+      header.append(title, close);
+      const thread = document.createElement('div'); thread.className = 'comty-thread';
+      const list = document.createElement('div'); list.className = 'comty-thread-list';
+      const issue = task.error ? describeAgentError(task.error) : null;
+      list.append(
+        createThreadItem(task, { showMore: false }).item,
+        createThreadItem({ author_kind: 'agent', content: task.result?.summary || issue?.message || issue?.description || 'The agent could not complete this request.' }, { showMore: false }).item,
+      );
+      thread.appendChild(list);
+      const actions = document.createElement('div'); actions.className = 'comty-agent-task-actions';
+      for (const action of ['retry', 'dismiss']) {
+        const button = document.createElement('button'); button.type = 'button'; button.className = 'comty-agent-action';
+        button.textContent = action === 'retry' ? 'Retry' : 'Dismiss';
+        button.onclick = async () => {
+          for (const control of actions.children) control.disabled = true;
+          try { await runAgentAction(`tasks/${task.id}/${action}`); }
+          catch (error) { showAgentBridgeError(error.message); }
+          finally { for (const control of actions.children) control.disabled = false; }
+        };
+        actions.appendChild(button);
+      }
+      bubble.append(header, thread, actions);
+      root.appendChild(bubble);
+      positionCommentBubble(bubble, x, y);
+    }
+
     function mountCaptureAnnotation(comment, { x, y }) {
       const host = document.createElement("div");
       host.dataset.comtyCaptureExclude = "";
@@ -5864,6 +6561,7 @@ function initComty(options = {}) {
         payload,
         preview: { rect: target.getBoundingClientRect(), rows: getInspectRows(target), selector: getSelector(target), spacing: getSpacingPreview(target) },
       };
+      syncPlacementCursor();
       ensureLiveTracking();
 
       const pin = document.createElement("div");
@@ -5881,10 +6579,21 @@ function initComty(options = {}) {
 
       const textarea = document.createElement("textarea");
       textarea.className = "comty-create-textarea";
-      textarea.placeholder = "Add a comment";
+      textarea.placeholder = payload.kind === "agent" ? "Ask a question or describe a change" : "Add a comment";
       textarea.setAttribute("aria-label", textarea.placeholder);
       textarea.rows = 1;
 
+      const scopePicker = document.createElement('label');
+      scopePicker.className = 'comty-agent-scope';
+      if (payload.kind === 'agent') {
+        const input = document.createElement('input');
+        input.type = 'checkbox';
+        input.setAttribute('aria-label', 'Apply to all instances of this variant');
+        const track = document.createElement('span'); track.className = 'comty-agent-scope-track'; track.setAttribute('aria-hidden', 'true');
+        scopePicker.title = 'Apply to all instances of this variant';
+        scopePicker.append(input, track, document.createTextNode('Apply globally'));
+      }
+
       const actions = document.createElement("div");
       actions.className = "comty-create-actions";
 
@@ -5938,7 +6647,7 @@ function initComty(options = {}) {
       const submitBtn = document.createElement("button");
       submitBtn.type = "button";
       submitBtn.className = "comty-btn-submit";
-      submitBtn.setAttribute("aria-label", "Post comment");
+      submitBtn.setAttribute("aria-label", payload.kind === "agent" ? "Send agent task" : "Post comment");
       submitBtn.disabled = true;
       submitBtn.innerHTML = `
         <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
@@ -5955,49 +6664,63 @@ function initComty(options = {}) {
         textarea.disabled = true;
         linkBtn.disabled = true;
 
+        if (payload.kind === "agent" && !agent) {
+          showAgentBridgeError(); submitBtn.disabled = false; textarea.disabled = false; return;
+        }
         payload.content = content;
+        if (payload.kind === 'agent') payload.scope = scopePicker.querySelector('input').checked ? 'variant' : 'element';
         payload.linkUrl = attachedLink || null;
         textarea.textContent = content;
 
-        const context = captureContext();
-        const point = getPinPoint(pin);
-        const pendingId = `pending-${crypto.randomUUID()}`;
-        // Paint the comment immediately. The network save never waits for capture work.
+        const isAgentTask = payload.kind === "agent";
+        const context = isAgentTask ? null : captureContext();
+        const point = isAgentTask ? null : getPinPoint(pin);
+        const pendingId = isAgentTask ? null : `pending-${crypto.randomUUID()}`;
         bubble.remove();
         pin.remove();
         if (draftAnchor === editorDraft) draftAnchor = null;
+        syncPlacementCursor();
         hideInspector();
-        addLocalComment(pendingId, payload);
+        if (!isAgentTask) addLocalComment(pendingId, payload);
         let post;
         try {
-          post = await fetch(`${apiUrl}/api/comments`, {
+          post = await fetch(payload.kind === "agent" ? `${agentBridgeUrl}/tasks` : `${apiUrl}/api/comments`, {
             method: "POST",
-            headers: getSdkHeaders({ "Content-Type": "application/json" }),
-            body: JSON.stringify(payload),
+            headers: payload.kind === "agent" ? agentHeaders() : getSdkHeaders({ "Content-Type": "application/json" }),
+            body: JSON.stringify(payload.kind === "agent" ? { ...payload, projectKey } : payload),
           });
-          if (!post.ok) throw new Error(`Comment save failed (${post.status})`);
+          if (!post.ok) throw new Error(`Save failed (${post.status})`);
           const data = await post.json();
-          if (!data?.id) throw new Error("Comment save returned no ID");
-          cachedComments = cachedComments.filter(item => String(item.id) !== pendingId);
-          if (context.url === location.href) {
-            const comment = addLocalComment(String(data.id), payload);
-            // Start only after the save and immediate UI update; the capture yields to input.
-            void uploadCommentScreenshot(comment, context, point);
-          } else void loadComments({ force: true });
+          const id = isAgentTask ? data?.task?.id : data?.id;
+          if (!id) throw new Error("Save returned no ID");
+          if (isAgentTask) {
+            requestedAgentTasks.add(id);
+            void loadComments({ force: true });
+          } else {
+            cachedComments = cachedComments.filter(item => String(item.id) !== pendingId);
+            if (context.url === location.href) {
+              const comment = addLocalComment(String(id), payload);
+              void uploadCommentScreenshot(comment, context, point);
+            } else void loadComments({ force: true });
+          }
         } catch (error) {
           console.error("Comty: save failed", error);
-          cachedComments = cachedComments.filter(item => String(item.id) !== pendingId);
-          renderSidepanelComments();
-          void renderComments(cachedComments, { retry: false });
+          if (isAgentTask) showAgentBridgeError(error.message);
+          else {
+            cachedComments = cachedComments.filter(item => String(item.id) !== pendingId);
+            renderSidepanelComments();
+            void renderComments(cachedComments, { retry: false });
+          }
           // Keep the original editor and its text available for retry, including attachments.
           if (!draftAnchor) draftAnchor = editorDraft;
+          syncPlacementCursor();
           root.append(pin, bubble);
           submitBtn.disabled = false;
           textarea.disabled = false;
           linkBtn.disabled = false;
           const errorMessage = document.createElement("p");
           errorMessage.setAttribute("role", "alert");
-          errorMessage.textContent = "Comment not saved. Your draft is ready to retry.";
+          errorMessage.textContent = `${isAgentTask ? "Task" : "Comment"} not saved. Your draft is ready to retry.`;
           bubble.querySelector('[role="alert"]')?.remove();
           bubble.append(errorMessage);
           if (bubble.isConnected) textarea.focus();
@@ -6086,7 +6809,8 @@ function initComty(options = {}) {
         renderInspector();
       };
 
-      actions.append(linkBtn, submitBtn, linkEditor);
+      if (payload.kind === 'agent') actions.append(scopePicker, submitBtn);
+      else actions.append(linkBtn, submitBtn, linkEditor);
 
       bubble.appendChild(textarea);
       bubble.appendChild(attachment);
@@ -6099,6 +6823,249 @@ function initComty(options = {}) {
       setTimeout(() => textarea.focus(), 10);
     }
 
+    function agentHeaders() { return { "Content-Type": "application/json", "X-Comty-Token": agent?.token || "" }; }
+
+    function showAgentBridgeError(message = "Start your app with comty dev to use the local agent. Check the terminal if it is already running.") {
+      const issue = describeAgentError(message);
+      showNotice({ title: 'Modification failed', description: issue.title === 'Task could not finish' ? 'The agent could not complete this request.' : issue.title + '.' });
+    }
+
+    function positionNotice() {
+      const toast = root.querySelector(".comty-agent-task-toast");
+      if (!toast) return;
+      toast.style.removeProperty("left");
+      toast.style.removeProperty("top");
+      toast.toggleAttribute("data-toolbar", isSessionActive());
+      if (!isSessionActive()) return;
+      const rect = toolbar.getBoundingClientRect();
+      const above = rect.top - toast.offsetHeight - 8;
+      toast.style.left = `${Math.max(8, Math.min(rect.right - toast.offsetWidth, innerWidth - toast.offsetWidth - 8))}px`;
+      toast.style.top = `${Math.max(8, Math.min(above >= 8 ? above : rect.bottom + 8, innerHeight - toast.offsetHeight - 8))}px`;
+    }
+
+    function showNotice(issue) {
+      clearAgentToast();
+      const toast = document.createElement("div");
+      toast.className = "comty-agent-task-toast";
+      toast.setAttribute("role", "alert");
+      const title = document.createElement("strong"); title.textContent = issue.title;
+      const description = document.createElement("p"); description.textContent = issue.description;
+      const close = document.createElement("button"); close.type = "button";
+      close.setAttribute("aria-label", "Dismiss notification");
+      close.innerHTML = icon('<path d="m6 6 12 12M6 18 18 6"/>');
+      toast.append(title, description, close);
+      let timer, leaving = false;
+      const dismiss = () => {
+        if (leaving) return;
+        leaving = true;
+        clearTimeout(timer);
+        toast.dataset.leaving = "";
+        timer = setTimeout(() => toast.remove(), reducedMotion.matches ? 0 : 200);
+      };
+      const schedule = () => { if (!leaving) { clearTimeout(timer); timer = setTimeout(dismiss, 6000); } };
+      const pause = () => { if (!leaving) clearTimeout(timer); };
+      clearAgentToast = () => { clearTimeout(timer); toast.remove(); };
+      close.onclick = dismiss;
+      toast.onmouseenter = pause;
+      toast.onmouseleave = schedule;
+      toast.onfocusin = pause;
+      toast.onfocusout = schedule;
+      root.appendChild(toast);
+      positionNotice();
+      schedule();
+    }
+
+    function describeAgentError(error) {
+      const raw = typeof error === 'string' ? error : JSON.stringify(error, null, 2) || 'Unknown error';
+      let value = error;
+      for (let depth = 0; depth < 8; depth++) {
+        if (typeof value === 'string') {
+          try { value = JSON.parse(value); continue; } catch {}
+          const start = value.indexOf('{'), end = value.lastIndexOf('}');
+          if (start >= 0 && end > start) { try { value = JSON.parse(value.slice(start, end + 1)); continue; } catch {} }
+          break;
+        }
+        if (!value || typeof value !== 'object') break;
+        value = value.error || value.message || value.cause || value.stderr || value;
+      }
+      const message = typeof value === 'string' ? value : '';
+      const source = raw + ' ' + message;
+      const agentName = /codex/i.test(source) ? 'Codex' : /claude/i.test(source) ? 'Claude Code' : /cursor/i.test(source) ? 'Cursor' : 'your coding agent';
+      let title, description;
+      if (/requires a newer version|upgrade.*latest|outdated|unsupported.*version/i.test(source)) {
+        title = 'Agent update required'; description = `Update ${agentName}, restart your local development session, then retry this task.`;
+      } else if (/insufficient_quota|quota exceeded|credit balance|billing|usage limit/i.test(source)) {
+        title = 'Usage limit reached'; description = 'Check your agent account’s usage allowance or billing, then retry when capacity is available.';
+      } else if (/rate.?limit|too many requests|\b429\b/i.test(source)) {
+        title = 'Too many requests'; description = 'The agent is temporarily rate limited. Wait a moment before retrying.';
+      } else if (/unauthorized|unauthenticated|authentication|not logged|sign.?in|log.?in|invalid.api.key|\b401\b/i.test(source)) {
+        title = 'Sign in to your agent'; description = `Open ${agentName} and sign in again, then retry this task.`;
+      } else if (/model.*(?:not found|does not exist|unavailable|not supported)|unsupported model|model_not_found/i.test(source)) {
+        title = 'Model unavailable'; description = 'The local agent rejected this model. Check its CLI version and signed-in account, then retry.';
+      } else if (/disconnected|ECONNREFUSED|ENOTFOUND|network|failed to fetch|development server stopped/i.test(source)) {
+        title = 'Connection lost'; description = 'Check that your local development server and coding agent are running, then reload this page.';
+      } else if (/timed? ?out|timeout|exceeded.*minutes/i.test(source)) {
+        title = 'Task timed out'; description = 'Review any changes already made, then retry with a smaller, more specific request.';
+      } else if (/permission|denied|forbidden|\b403\b/i.test(source)) {
+        title = 'Permission needed'; description = 'Check the agent’s access to this project and any pending approval before retrying.';
+      } else if (/ENOENT|command not found|not installed|executable.*not found/i.test(source)) {
+        title = 'Agent not found'; description = `Install or configure ${agentName} in your local development environment, then restart and retry.`;
+      } else if (/completion was not verified/i.test(source)) {
+        title = 'Result needs checking'; description = 'The agent could not confirm completion. Review the changes before retrying.';
+      } else {
+        title = 'Task could not finish';
+        description = message && !/[{}]|\[object Object\]/.test(message) ? message.slice(0, 160) + (message.length > 160 ? '…' : '') : 'The agent reported an unexpected error. Review the technical details and any changes before retrying.';
+      }
+      return { title, description, raw, message };
+    }
+
+    async function runAgentAction(path, input = {}) {
+      const response = await fetch(`${agentBridgeUrl}/${path}`, { method: 'POST', headers: agentHeaders(), body: JSON.stringify(input) });
+      if (!response.ok) {
+        const body = await response.json().catch(() => null);
+        throw new Error(typeof body?.error === 'string' ? body.error : JSON.stringify(body?.error || { status: response.status, message: 'Request failed' }));
+      }
+      if (path.endsWith('/retry')) requestedAgentTasks.add(path.split('/')[1]);
+      await loadComments({ force: true });
+    }
+
+    function renderAgentPanel() {
+      if (!agent) return;
+      const visibleTasks = [];
+      const latestResult = [...localTasks].reverse().find(task => ['done', 'in_review'].includes(task.status) && (!task.thread_comment_id || task.status === 'in_review'));
+      if (latestResult) visibleTasks.push(latestResult);
+      if (!visibleTasks.length && !localApprovals.length && !agentActionError) agentPanelOpen = false;
+      let panel = root.querySelector(".comty-agent-panel");
+      if (!panel && !agentPanelOpen) return;
+      if (!panel) {
+        panel = document.createElement("section");
+        panel.className = "comty-agent-panel";
+        panel.setAttribute("aria-label", "Local agent tasks");
+        panel.hidden = true;
+        // Keep the task card above inspection overlays and below the toolbar.
+        root.insertBefore(panel, toolbar);
+      }
+      const open = Boolean(agent) && agentPanelOpen;
+      if (open) {
+        clearAgentToast();
+        if (panel.hidden) {
+          const rect = toolbar.getBoundingClientRect();
+          panel.dataset.side = rect.left + rect.width / 2 < innerWidth / 2 ? "left" : "right";
+          panel.dataset.closed = "";
+          panel.hidden = false;
+          panel.getBoundingClientRect();
+        }
+        if (panel.hasAttribute("data-closed")) { agentPanelTransition++; delete panel.dataset.closed; }
+      } else if (!panel.hidden && !panel.hasAttribute("data-closed")) {
+        const transition = ++agentPanelTransition;
+        panel.dataset.closed = "";
+        const finish = () => { if (transition === agentPanelTransition && panel.hasAttribute("data-closed")) panel.hidden = true; };
+        if (reducedMotion.matches) finish();
+        else setTimeout(finish, parseFloat(getComputedStyle(root).getPropertyValue("--comty-motion-duration")));
+      }
+      panel.inert = !open;
+      panel.setAttribute("aria-hidden", String(!open));
+      const signature = JSON.stringify([visibleTasks, localApprovals, agentConnectionError, agentActionError, agentPanelOpen]);
+      if (signature === agentPanelSignature) return;
+      agentPanelSignature = signature;
+      const expanded = new Set([...panel.querySelectorAll('details[data-detail-key][open]')].map(node => node.dataset.detailKey));
+      const focusKey = panel.contains(document.activeElement) ? document.activeElement.dataset.focusKey : null;
+      const scrollTop = panel.querySelector('.comty-agent-panel-content')?.scrollTop || 0;
+      const node = (tag, className, text) => {
+        const element = document.createElement(tag);
+        if (className) element.className = className;
+        if (text != null) element.textContent = text;
+        return element;
+      };
+      const brand = () => createCommentAvatar({ author_kind: 'agent' }, 'comty-agent-brand');
+      panel.replaceChildren();
+      const header = node('header', 'comty-agent-panel-header');
+      const heading = node('div', 'comty-agent-heading');
+      heading.append(node('strong', '', 'Agent'));
+      const toggle = node('button', 'comty-agent-action comty-agent-close'); toggle.type = 'button';
+      toggle.innerHTML = icon('<path d="m6 6 12 12M6 18 18 6"/>');
+      toggle.setAttribute('aria-label', 'Close Agent task'); toggle.title = 'Close'; toggle.dataset.focusKey = 'close';
+      toggle.onclick = () => { agentPanelOpen = false; renderAgentPanel(); agentBtn?.focus({ preventScroll: true }); };
+      header.append(heading, toggle); panel.appendChild(header);
+      const content = node('div', 'comty-agent-panel-content'); panel.appendChild(content);
+      const technicalDetails = (parent, raw, key) => {
+        const details = node('details', 'comty-agent-details'); details.dataset.detailKey = key; details.open = expanded.has(key);
+        const summary = node('summary', '', 'Technical details'); summary.dataset.focusKey = 'details-' + key;
+        details.append(summary, node('pre', '', raw)); parent.appendChild(details);
+      };
+      const errorMessage = (parent, error, key) => {
+        const issue = describeAgentError(error);
+        const message = node('div', 'comty-agent-error');
+        message.append(node('strong', '', issue.title), node('p', '', issue.description));
+        parent.appendChild(message); technicalDetails(parent, issue.raw, key);
+      };
+      if (agentConnectionError || agentActionError) {
+        const banner = node('div', 'comty-agent-item comty-agent-banner'); banner.setAttribute('role', 'alert');
+        errorMessage(banner, agentConnectionError || agentActionError, 'connection'); content.appendChild(banner);
+      }
+      const action = (parent, label, path, input = {}, primary = false) => {
+        const button = node('button', 'comty-agent-action', label); button.type = 'button';
+        const key = path + JSON.stringify(input); button.dataset.focusKey = key;
+        button.disabled = agentPendingActions.has(key);
+        if (primary) button.dataset.primary = '';
+        button.onclick = async () => {
+          if (agentPendingActions.has(key)) return;
+          agentActionError = '';
+          agentPendingActions.add(key); button.disabled = true; button.textContent = 'Please wait…';
+          try {
+            await runAgentAction(path, input);
+          } catch (error) { agentActionError = error.message; }
+          finally { agentPendingActions.delete(key); agentPanelSignature = ''; renderAgentPanel(); }
+        };
+        parent.appendChild(button);
+      };
+      for (const approval of localApprovals) {
+        const section = node('div', 'comty-agent-item');
+        section.append(node('h3', '', 'Approval required'));
+        const task = localTasks.find(task => task.id === approval.taskId);
+        if (task) section.appendChild(node('p', '', task.content));
+        section.appendChild(node('p', '', 'Review this operation before allowing the agent to continue.'));
+        const operation = approval.details?.command || approval.details?.file_path || approval.details?.path;
+        if (typeof operation === 'string' || Array.isArray(operation)) section.appendChild(node('pre', '', Array.isArray(operation) ? operation.join(' ') : operation));
+        technicalDetails(section, JSON.stringify(approval.details ?? {}, null, 2), 'approval-' + approval.id);
+        const actions = node('div', 'comty-agent-actions');
+        action(actions, 'Allow once', `approvals/${approval.id}`, { allow: true }, true);
+        action(actions, 'Deny', `approvals/${approval.id}`, { allow: false });
+        section.appendChild(actions); content.appendChild(section);
+      }
+      const list = node('div', 'comty-agent-list'); content.appendChild(list);
+      for (const task of visibleTasks.reverse()) {
+        const failed = Boolean(task.error) || task.status === 'in_review';
+        const state = task.status === 'done' ? 'success' : failed ? 'error' : 'working';
+        const row = node('div', 'comty-agent-row'); row.dataset.taskId = task.id;
+        const dot = state === 'working' ? createWorkingIndicator() : node('span', 'comty-agent-dot');
+        dot.dataset.status = state; dot.setAttribute('aria-hidden', 'true');
+        const name = node('span', 'comty-agent-row-name', task.thread_comment_id ? `@Agent · ${task.content}` : task.content);
+        row.append(dot, name);
+        if (state === 'working') row.appendChild(node('span', 'comty-agent-row-state', task.status === 'todo' ? 'Starting' : 'Working'));
+        const actions = node('div', 'comty-agent-row-actions');
+        if (['in_review', 'cancel'].includes(task.status)) action(actions, 'Retry', `tasks/${task.id}/retry`);
+        if (['todo', 'in_progress'].includes(task.status)) action(actions, 'Cancel', `tasks/${task.id}/cancel`);
+        if (task.status === 'done') action(actions, 'Dismiss', `tasks/${task.id}/dismiss`);
+        if (task.status === 'in_review') action(actions, 'Dismiss', `tasks/${task.id}/dismiss`);
+        if (actions.childElementCount) row.appendChild(actions);
+        row.setAttribute('aria-label', `${task.content}, ${state === 'error' ? 'failed' : state === 'success' ? 'completed' : state === 'cancel' ? 'cancelled' : task.status === 'todo' ? 'starting' : 'working'}`);
+        list.appendChild(row);
+        if (task.error) {
+          const details = node('div', 'comty-agent-item');
+          errorMessage(details, task.error, task.id);
+          list.appendChild(details);
+        }
+        if (task.result?.summary) {
+          const answer = node('div', 'comty-agent-answer');
+          answer.append(brand(), node('p', '', task.result.summary));
+          list.appendChild(answer);
+        }
+      }
+      content.scrollTop = scrollTop;
+      if (focusKey && open) [...panel.querySelectorAll('[data-focus-key]')].find(element => element.dataset.focusKey === focusKey)?.focus({ preventScroll: true });
+    }
+
     function setSidepanelOpen(open) {
       sidepanelOpen = open;
       sidepanel.classList.toggle("comty-sidepanel-open", sidepanelOpen);
@@ -6134,12 +7101,52 @@ function initComty(options = {}) {
 
     function openCommentFromPanel(comment) {
       const target = resolveCommentElement(comment);
-      if (!target || isElementTreeHidden(target)) return;
+      if (!target || isElementTreeHidden(target)) {
+        openDetachedThread(comment);
+        return;
+      }
       setSession(session.comments ? session.mode : "browse", { entry: sessionEntry, renderComments: true });
       target.scrollIntoView({ block: "center", inline: "nearest", behavior: "instant" });
+      const rect = target.getBoundingClientRect();
+      const relX = Number(comment.rel_x ?? comment.relX);
+      const relY = Number(comment.rel_y ?? comment.relY);
+      // Large page containers must reveal the annotation point, not their center.
+      window.scrollBy({
+        left: rect.width > innerWidth && Number.isFinite(relX) ? rect.left + Math.max(0, Math.min(1, relX)) * rect.width - innerWidth / 2 : 0,
+        top: rect.height > innerHeight && Number.isFinite(relY) ? rect.top + Math.max(0, Math.min(1, relY)) * rect.height - innerHeight / 2 : 0,
+        behavior: "instant",
+      });
       syncCommentAnchors();
       const pin = findPlacedPin(comment);
       if (pin && !pin.hasAttribute("data-comty-anchor-hidden")) pin.click();
+      else openDetachedThread(comment);
+    }
+
+    function openDetachedThread(comment) {
+      openCommentThread(comment, null, null, innerWidth / 2, innerHeight / 3, () => {});
+      const bubble = [...root.querySelectorAll(".comty-bubble")].find(node => node.dataset.commentId === String(comment.id));
+      if (bubble) {
+        bubble.dataset.detached = "";
+        positionCommentBubble(bubble, innerWidth / 2, innerHeight / 3);
+      }
+    }
+
+    function updateAnchorBadge(item, comment) {
+      resolveCommentElement(comment);
+      const result = commentTargets.get(String(comment.id));
+      const legacy = getPagePath() !== window.location.pathname && comment.page_path === window.location.pathname;
+      const status = legacy && !result?.element ? "uncertain" : result?.status;
+      const label = status === "missing" ? "Target missing" : status === "uncertain" ? "Target uncertain" : "";
+      let badge = item.querySelector(".comty-anchor-badge");
+      if (!label) { badge?.remove(); return; }
+      if (!badge) {
+        badge = document.createElement("span");
+        badge.className = "comty-anchor-badge";
+        item.querySelector(".comty-sidepanel-item-body").appendChild(badge);
+      }
+      if (badge.textContent !== label) badge.textContent = label;
+      badge.title = legacy ? "This older comment has no saved hash route. Its target may be on another page." :
+        status === "missing" ? "The target is not present on this page. The comment is still available." : "The target cannot be identified reliably. No pin is placed.";
     }
 
     let sidepanelFilters = { status: "", device: "", dateSort: "desc" };
@@ -6152,6 +7159,7 @@ function initComty(options = {}) {
           ? sidepanelSearch.value.trim().toLowerCase()
           : "";
       let list = cachedComments.filter((comment) => {
+        if (comment.local_agent || comment.kind === "agent") return false;
         if (
           search &&
           !`${comment.content ?? ""} ${getCommentLabel(comment)}`
@@ -6198,6 +7206,7 @@ function initComty(options = {}) {
         const item = document.createElement("button");
         item.type = "button";
         item.className = "comty-sidepanel-item";
+        item.dataset.commentId = String(comment.id);
         item.disabled = Boolean(comment.pending);
         item.innerHTML = `
         <span class="comty-sidepanel-item-status" aria-hidden="true"></span>
@@ -6221,8 +7230,13 @@ function initComty(options = {}) {
         if (metaEl instanceof HTMLElement) {
           metaEl.innerText = `${comment.author_name || "Anonymous"} · ${comment.pending ? "Sending…" : getCommentLabel(comment)}`;
           metaEl.title = getCommentLabel(comment);
+          if (getPagePath() !== window.location.pathname && comment.page_path === window.location.pathname && !resolveCommentElement(comment)) {
+            metaEl.innerText += " · Original page unknown";
+          }
         }
 
+        updateAnchorBadge(item, comment);
+
         item.onclick = (event) => {
           event.stopPropagation();
           openCommentFromPanel(comment);
@@ -6292,7 +7306,7 @@ function initComty(options = {}) {
           if (!(pin instanceof HTMLElement)) return;
           const status = pin.dataset.status;
           const shouldShow =
-            !hasFilters || Boolean(status && selectedStatusFilters.has(status));
+            pin.hasAttribute('data-agent-task') || !hasFilters || Boolean(status && selectedStatusFilters.has(status));
           pin.classList.toggle("comty-filtered-out", !shouldShow);
         });
     }
@@ -6338,14 +7352,15 @@ function initComty(options = {}) {
     createStatusFilters();
 
     async function updateCommentStatus(comment, status) {
-      if (!projectId || !comment?.id) return false;
+      if (comment?.local_agent || !projectId || !comment?.id) return false;
 
       let res;
       try {
-        res = await fetch(`${apiUrl}/api/comments/${comment.id}/status`, {
+        const local = comment.local_agent === true;
+        res = await fetch(local ? `${agentBridgeUrl}/tasks/${encodeURIComponent(comment.id)}/status` : `${apiUrl}/api/comments/${comment.id}/status`, {
           method: "POST",
-          headers: getSdkHeaders({ "Content-Type": "application/json" }),
-          body: JSON.stringify({
+          headers: local ? { "Content-Type": "application/json" } : getSdkHeaders({ "Content-Type": "application/json" }),
+          body: JSON.stringify(local ? { status } : {
             projectKey,
             host: window.location.host,
             status,
@@ -6362,7 +7377,7 @@ function initComty(options = {}) {
       }
 
       const data = await res.json();
-      comment.status = getCommentStatus(data.status).value;
+      comment.status = getCommentStatus(data.task?.status ?? data.status).value;
       return comment.status;
     }
 
@@ -6554,6 +7569,27 @@ function initComty(options = {}) {
       isOwnCommentEntry, updateCommentContent, deleteSdkComment, getCommentId,
       updateReplyContent, deleteSdkReply, createCommentAvatar, getSdkHeaders,
       showAuthPrompt,
+      startThreadAgent: async (comment, replies, content) => {
+        if (!agent) throw new Error('Start the local agent to reply with @Agent');
+        if (!canManage) throw new Error('Sign in as a project editor to use @Agent');
+        const transcript = [
+          `${getCommentAuthorName(comment)}: ${comment.content}`,
+          ...replies.map(reply => `${getCommentAuthorName(reply)}: ${reply.content}`),
+        ].join('\n').slice(-24000);
+        const response = await fetch(`${agentBridgeUrl}/tasks`, {
+          method: 'POST', headers: agentHeaders(),
+          body: JSON.stringify({ content, pagePath: comment.page_path || getPagePath(),
+            selector: comment.selector || 'body', relX: comment.rel_x ?? 0.5, relY: comment.rel_y ?? 0.5,
+            domElement: comment.dom_element || '', viewport: comment.viewport || '',
+            anchorContext: comment.anchor_context || '', scope: 'element',
+            thread: { commentId: String(comment.id), transcript } }),
+        });
+        if (!response.ok) throw new Error((await response.json().catch(() => null))?.error || 'Could not start Agent');
+        const data = await response.json();
+        if (!data.task?.id) throw new Error('Agent returned no task ID');
+        requestedAgentTasks.add(data.task.id);
+        void loadComments({ force: true });
+      },
       get canWrite() { return canWrite; },
       get canManage() { return canManage; },
       get allowGuestComments() { return allowGuestComments; },
@@ -6668,6 +7704,7 @@ function initComty(options = {}) {
 
       pin.onclick = (event) => {
         event.stopPropagation();
+        if (comment.local_agent) { openAgentTask(comment, getPinPoint(pin).x, getPinPoint(pin).y); return; }
         openCommentThread(
           comment,
           pin,
@@ -6754,42 +7791,122 @@ function initComty(options = {}) {
     function reconcileComments(comments) {
       const previous = new Map(cachedComments.map(comment => [String(comment.id), comment]));
       cachedComments = comments
-        .filter(comment => comment.kind !== "agent" && !comment.local_agent)
+        .filter(comment => comment.kind !== "agent" || comment.status !== "done")
         .map(comment => Object.assign(previous.get(String(comment.id)) || {}, comment));
       for (const comment of previous.values()) {
         if (comment.pending && !cachedComments.some(item => item.id === comment.id)) cachedComments.push(comment);
       }
     }
 
-    async function loadComments({ force = false } = {}) {
-      if (!projectId) return;
-      const pagePath = window.location.pathname;
+    async function deliverThreadReply(task) {
+      if (deliveringAgentReplies.has(task.id)) return;
+      deliveringAgentReplies.add(task.id);
+      try {
+        const response = await fetch(`${apiUrl}/api/comments/${encodeURIComponent(task.thread_comment_id)}/replies`, {
+          method: 'POST', headers: getSdkHeaders({ 'Content-Type': 'application/json' }),
+          body: JSON.stringify({ projectKey, content: task.result.summary, agentTaskId: task.id }),
+        });
+        if (!response.ok) throw new Error(`Could not save Agent reply (${response.status})`);
+        const { reply } = await response.json();
+        const local = cachedComments.find(comment => String(comment.id) === task.thread_comment_id);
+        if (local && !local.replies?.some(item => item.id === reply.id)) {
+          local.replies ||= [];
+          local.replies.push(reply);
+        }
+        for (const bubble of root.querySelectorAll('.comty-bubble')) {
+          if (bubble.dataset.commentId === task.thread_comment_id) bubble.dispatchEvent(new CustomEvent('comty-agent-reply', { detail: reply }));
+        }
+        const ack = await fetch(`${agentBridgeUrl}/tasks/${task.id}/dismiss`, { method: 'POST', headers: agentHeaders(), body: '{}' });
+        if (!ack.ok) throw new Error('Agent reply saved, but local acknowledgement failed');
+        localTasks = localTasks.filter(item => item.id !== task.id);
+      } catch (error) {
+        agentActionError = error.message;
+        console.error('Comty: Agent reply delivery failed', error);
+      } finally {
+        deliveringAgentReplies.delete(task.id);
+        agentPanelSignature = '';
+        renderAgentPanel();
+      }
+    }
+
+    async function loadComments({ force = false, tasksOnly = false } = {}) {
+      if (!projectId && !agent) return;
+      const pagePath = getPagePath();
       if (!force && cachedPagePath === pagePath) { await renderComments(cachedComments); return; }
       if (pendingCommentsLoad) {
         await pendingCommentsLoad;
-        if (!force) return;
+        if (!force && cachedPagePath === pagePath) return;
       }
       pendingCommentsLoad = (async () => {
-        let comments = cachedPagePath === pagePath ? cachedComments : [];
-        if (projectId) {
+        let comments = cachedPagePath === pagePath ? cachedComments.filter(comment => !comment.local_agent) : [];
+        if (projectId && !tasksOnly) {
           try {
-            const url = new URL(`${apiUrl}/api/comments`);
-            url.search = new URLSearchParams({ projectKey, host: window.location.host, pagePath, ...(force ? { _t: String(Date.now()) } : {}) });
-            const res = await fetch(url);
-            if (!res.ok) throw new Error(await res.text());
-            const data = await res.json();
-            if (Array.isArray(data.comments)) comments = data.comments;
+            const paths = [...new Set([pagePath, window.location.pathname])];
+            const batches = await Promise.all(paths.map(async path => {
+              const url = new URL(`${apiUrl}/api/comments`);
+              url.search = new URLSearchParams({ projectKey, host: window.location.host, pagePath: path, ...(force ? { _t: String(Date.now()) } : {}) });
+              const res = await fetch(url);
+              if (!res.ok) throw new Error(await res.text());
+              const data = await res.json();
+              return Array.isArray(data.comments) ? data.comments : [];
+            }));
+            comments = [...new Map(batches.flat().map(comment => [String(comment.id), comment])).values()];
           } catch (error) { console.error("Comty: list comments failed", error); }
         }
+        if (agent) {
+          try {
+            const res = await fetch(`${agentBridgeUrl}/tasks`, { headers: agentHeaders(), cache: "no-store" });
+            if (!res.ok) throw new Error("Local companion unavailable");
+            const data = await res.json();
+            if (Array.isArray(data.tasks)) localTasks = data.tasks;
+            const failedTasks = localTasks.filter(task => task.status === 'in_review');
+            for (const task of failedTasks.filter(task => requestedAgentTasks.has(task.id))) {
+              if (task.error) showAgentBridgeError(task.error);
+              else showNotice({ title: 'Modification failed', description: 'The agent needs clarification.' });
+            }
+            if (Array.isArray(data.approvals)) {
+              localApprovals = data.approvals;
+              if (localApprovals.some(approval => requestedAgentTasks.has(approval.taskId) && !seenAgentApprovals.has(approval.id))) agentPanelOpen = true;
+              seenAgentApprovals.clear();
+              for (const approval of localApprovals) seenAgentApprovals.add(approval.id);
+            }
+            for (const id of requestedAgentTasks) {
+              const task = localTasks.find(task => task.id === id);
+              if (!task || ['done', 'cancel', 'in_review'].includes(task.status)) requestedAgentTasks.delete(id);
+            }
+            agentConnectionError = "";
+          } catch (error) {
+            agentConnectionError = "Local agent disconnected. Check the development server, then reload this page.";
+            console.error("Comty: local tasks failed", error);
+          }
+          for (const task of localTasks.filter(task => task.thread_comment_id && task.status === 'done' && task.result?.summary)) {
+            void deliverThreadReply(task);
+          }
+          comments.push(...localTasks.filter(task => task.page_path === pagePath && !task.thread_comment_id && task.status === 'in_review'));
+          renderAgentPanel();
+        }
+        if (pagePath !== getPagePath()) return;
         reconcileComments(comments);
         cachedPagePath = pagePath;
         renderSidepanelComments();
         await renderComments(cachedComments);
+        syncAgentWorkingOutlines();
         ensureLiveTracking();
       })();
       try { await pendingCommentsLoad; } finally { pendingCommentsLoad = null; }
     }
 
+    if (agent) {
+      setInterval(() => {
+        const active = requestedAgentTasks.size || localTasks.some(task =>
+          ['todo', 'in_progress'].includes(task.status) || (task.thread_comment_id && task.status === 'done' && task.result?.summary));
+        if (active && !pendingCommentsLoad && document.visibilityState === "visible") void loadComments({ force: true, tasksOnly: true });
+      }, 2000);
+      document.addEventListener('visibilitychange', () => {
+        if (document.visibilityState === 'visible' && !pendingCommentsLoad) void loadComments({ force: true, tasksOnly: true });
+      });
+    }
+
     function getPinPoint(pin) {
       return { x: parseFloat(pin.style.left), y: parseFloat(pin.style.top) };
     }
@@ -6817,7 +7934,7 @@ function initComty(options = {}) {
     }
 
     function syncCommentAnchors() {
-      if (!session.comments) return;
+      if (!session.comments && !session.inspect) return;
       const modal = getTopActiveModal();
       for (const comment of cachedComments) {
         const id = String(comment.id);
@@ -6828,7 +7945,7 @@ function initComty(options = {}) {
           placePin(comment, modal);
           pin = placedPins.get(id);
         }
-        const bubbles = [...root.querySelectorAll(".comty-bubble")].filter(bubble => bubble.dataset.commentId === id || bubble.dataset.hoverId === id);
+        const bubbles = [...root.querySelectorAll(".comty-bubble")].filter(bubble => (bubble.dataset.commentId === id || bubble.dataset.hoverId === id) && !bubble.hasAttribute("data-detached"));
         // A pin can remove its target's :hover style as the pointer enters it.
         if (!point && pin && target?.isConnected && !target.hasAttribute("hidden") && !isElementTreeHidden(target.parentElement) &&
           (activeHoverCommentIds.has(id) || bubbles.some(bubble => bubble.dataset.commentId === id))) continue;
@@ -6843,6 +7960,10 @@ function initComty(options = {}) {
         if (pin.style.top !== y) pin.style.top = y;
         for (const bubble of bubbles) positionCommentBubble(bubble, point.clientX, point.clientY);
       }
+      if (sidepanelOpen) for (const item of sidepanelList.querySelectorAll(".comty-sidepanel-item")) {
+        const comment = cachedComments.find(comment => String(comment.id) === item.dataset.commentId);
+        if (comment) updateAnchorBadge(item, comment);
+      }
       if (draftAnchor) {
         if (!draftAnchor.target?.isConnected) draftAnchor.target = resolveCommentElement(draftAnchor.payload);
         const point = getVisibleAnchorPoint(draftAnchor.target, draftAnchor.payload.relX, draftAnchor.payload.relY, modal);
@@ -6856,16 +7977,50 @@ function initComty(options = {}) {
       }
     }
 
+    function syncAgentWorkingOutlines() {
+      const working = localTasks.filter(task => task.status === "in_progress" && task.page_path === getPagePath());
+      const ids = new Set(working.map(task => String(task.id)));
+      for (const [id, outline] of workingOutlines) {
+        if (ids.has(id)) continue;
+        outline.remove(); workingOutlines.delete(id);
+      }
+      const modal = getTopActiveModal();
+      for (const task of working) {
+        const id = String(task.id);
+        let outline = workingOutlines.get(id);
+        if (!outline) {
+          outline = document.createElement("div");
+          outline.className = "comty-agent-working";
+          outline.setAttribute("aria-label", "Agent working on this element");
+          const badge = document.createElement("span");
+          badge.className = "comty-agent-working-badge";
+          badge.append(createWorkingIndicator(), "Working");
+          outline.appendChild(badge); root.appendChild(outline);
+          workingOutlines.set(id, outline);
+        }
+        const target = resolveCommentElement(task);
+        const point = target && getVisibleAnchorPoint(target, Number(task.rel_x), Number(task.rel_y), modal);
+        outline.hidden = !point;
+        if (!point) continue;
+        const rect = target.getBoundingClientRect();
+        setMeasuredRect(outline, rect);
+        outline.toggleAttribute("data-badge-below", rect.top < 32);
+      }
+    }
+
     function onFrame() {
       if (motion.enabled) updateMotion();
-      if (session.comments) syncCommentAnchors();
+      if (session.comments || session.inspect) syncCommentAnchors();
+      if (session.agent || workingOutlines.size || localTasks.some(task => task.status === "in_progress" && task.page_path === getPagePath())) {
+        syncAgentWorkingOutlines();
+      }
       if (session.inspect || session.edit || inspectionLayer.childNodes.length) renderInspector();
       if (session.inspect && rulersEnabled) renderRulers();
       if (session.inspect && rulersEnabled) measurements.render();
     }
 
     function ensureLiveTracking() {
-      const active = motion.enabled || session.inspect || session.edit || (session.comments && cachedComments.length > 0);
+      const active = motion.enabled || session.inspect || session.edit || (session.comments && cachedComments.length > 0) || workingOutlines.size > 0;
       if (!active || document.hidden) {
         if (liveFrame) cancelAnimationFrame(liveFrame);
         liveFrame = null;
@@ -6885,13 +8040,14 @@ function initComty(options = {}) {
     syncOverlayHost();
 
     function renderCachedComments() {
-      if (!session.comments && !session.inspect && !session.edit) return;
+      if (!session.comments && !session.inspect && !session.edit && !workingOutlines.size) return;
       if (resizeRenderFrame) {
         window.cancelAnimationFrame(resizeRenderFrame);
       }
       resizeRenderFrame = window.requestAnimationFrame(() => {
         resizeRenderFrame = null;
         syncCommentAnchors();
+        syncAgentWorkingOutlines();
         renderInspector();
         ensureLiveTracking();
       });
@@ -6933,6 +8089,31 @@ function initComty(options = {}) {
       characterData: true,
     });
 
+    let activePagePath = getPagePath();
+    function handleRouteChange() {
+      const next = getPagePath();
+      if (next === activePagePath) return;
+      activePagePath = next;
+      markup.clear();
+      markup.setMode(null);
+      closeBubbles();
+      commentTargets.clear();
+      reconcileComments([]);
+      void renderComments([], { retry: false });
+      renderSidepanelComments();
+      void loadComments({ force: true });
+    }
+    window.addEventListener("hashchange", handleRouteChange);
+    window.addEventListener("popstate", handleRouteChange);
+    for (const method of ["pushState", "replaceState"]) {
+      const original = history[method];
+      history[method] = function (...args) {
+        const result = original.apply(this, args);
+        handleRouteChange();
+        return result;
+      };
+    }
+
     document.addEventListener("scroll", handleHostLayoutEvent, {
       capture: true,
       passive: true,
@@ -6951,7 +8132,7 @@ function initComty(options = {}) {
 
     document.addEventListener("pointermove", (event) => {
       if (!session.edit && !session.inspect) return;
-      if (motion.enabled) return;
+      if (motion.enabled || markup.mode) return;
       if (propertyPicking) {
         const target = event.target;
         if (propertyPicking === "font" && target instanceof Element && !isComtyElement(target) && getElementOwnTextSignature(target)) {
@@ -7070,13 +8251,14 @@ function initComty(options = {}) {
         const y = e.clientY;
 
         const anchorContext = getAnchorContext(el);
+        if (session.agent && anchorContext) anchorContext.inspectedStyles = getInspectRows(el);
 
         const payload = {
           ...getDeviceContext(),
           projectId,
-          kind: "comment",
+          kind: session.agent ? "agent" : "comment",
           host: window.location.host,
-          pagePath: window.location.pathname,
+          pagePath: getPagePath(),
           selector: getSelector(el),
           relX,
           relY,
@@ -7097,6 +8279,12 @@ function initComty(options = {}) {
         (target.isContentEditable ||
           ["INPUT", "TEXTAREA", "SELECT"].includes(target.tagName));
 
+      const markupMode = markup.mode;
+      if (session.inspect && (e.key === "Escape" || !isEditable) && markup.keydown(e)) {
+        e.preventDefault();
+        if (!markup.mode) (markupMode === "annotate" ? annotateBtn : screenshotBtn).focus({ preventScroll: true });
+        return;
+      }
       if (e.key === "Escape" && motion.enabled) {
         e.preventDefault();
         setMotionEnabled(false); motionBtn.focus({ preventScroll: true });
@@ -7111,7 +8299,7 @@ function initComty(options = {}) {
         return;
       }
       if (session.inspect && !isEditable && !e.repeat && !e.ctrlKey && !e.metaKey && !e.altKey && !e.shiftKey) {
-        const button = { x: xrayBtn, r: rulersBtn, g: gridBtn, p: pipetteBtn, t: typographyBtn, m: motionBtn }[e.key.toLowerCase()];
+        const button = { x: xrayBtn, r: rulersBtn, g: gridBtn, p: pipetteBtn, t: typographyBtn, m: motionBtn, d: annotateBtn, s: screenshotBtn }[e.key.toLowerCase()];
         if (button) { e.preventDefault(); button.click(); return; }
       }
 
@@ -7119,6 +8307,11 @@ function initComty(options = {}) {
         measureAlt = true;
         renderInspector();
       }
+      if (isLocalSite && !isEditable && !e.repeat && !e.isComposing && e.shiftKey && !e.altKey && !e.ctrlKey && !e.metaKey && e.key.toLowerCase() === "a") {
+        e.preventDefault();
+        startAgentSession();
+        return;
+      }
       if (!isEditable && !e.repeat && e.shiftKey && !e.altKey && !e.ctrlKey && !e.metaKey && e.key.toLowerCase() === "i") {
         e.preventDefault();
         setSession(session.inspect ? "off" : "inspect");
@@ -7174,6 +8367,7 @@ function initComty(options = {}) {
     window.addEventListener("blur", () => { measureAlt = false; renderInspector(); });
 
     async function boot() {
+      if (localOnly) { await loadComments(); return; }
       const res = await fetch(`${apiUrl}/api/sdk/bootstrap`, {
         method: "POST",
         headers: getSdkHeaders({ "Content-Type": "application/json" }),
@@ -7186,6 +8380,7 @@ function initComty(options = {}) {
 
       if (!res.ok) {
         console.error("Comty: bootstrap failed", await res.text());
+        if (agent) await loadComments();
         return;
       }
 
@@ -7230,16 +8425,30 @@ function initComty(options = {}) {
 
     if (typeof options.onTestReady === "function") {
       options.onTestReady({
-        getSelector, getAnchorContext, resolveCommentElement, getVisibleAnchorPoint,
+        getPagePath, getSelector, getAnchorContext, resolveCommentElement, getVisibleAnchorPoint,
         getDistanceSegments, getInspectRows, syncCommentAnchors,
         setInspectorMode(enabled) { setSession(enabled ? "inspect" : "off"); },
         startEditSession, startBrowseSession, endSession, showInspector,
-        motion, setMotionEnabled, updateMotion,
+        motion, setMotionEnabled, updateMotion, describeAgentError,
+        previewAgent(tasks, approvals = [], error = "") {
+          localTasks = tasks;
+          localApprovals = approvals;
+          agentConnectionError = error;
+          startAgentSession();
+          agentPanelOpen = true;
+          agentPanelSignature = "";
+          renderAgentPanel();
+        },
         seed(comments) {
           reconcileComments(comments);
           setSession(session.comments ? session.mode : "browse", { entry: sessionEntry, renderComments: true });
           return renderComments(cachedComments, { retry: false });
         },
+        seedAgentTasks(tasks) {
+          localTasks = tasks;
+          syncAgentWorkingOutlines();
+          ensureLiveTracking();
+        },
         setCanWrite(value) { canWrite = value; canManage = value; },
         invalidate() { anchorRevision += 1; },
       });
@@ -7247,6 +8456,7 @@ function initComty(options = {}) {
 
     return boot().catch(error => {
       console.error("Comty: bootstrap failed", error);
+      if (agent) return loadComments();
     });
   }
 }