@ng-annotate/angular 0.2.1

package/dist/bridge.service.d.ts

@@ -0,0 +1,18 @@
+import { OnDestroy } from '@angular/core';
+import { BehaviorSubject } from 'rxjs';
+import type { Session, Annotation } from './types.js';
+export declare class BridgeService implements OnDestroy {
+    readonly session$: BehaviorSubject<Session | null>;
+    readonly annotations$: BehaviorSubject<Annotation[]>;
+    readonly connected$: BehaviorSubject<boolean>;
+    private readonly zone;
+    private ws;
+    private reconnectTimer;
+    init(): void;
+    private connect;
+    createAnnotation(payload: Record<string, unknown>): void;
+    replyToAnnotation(id: string, message: string): void;
+    deleteAnnotation(id: string): void;
+    private send;
+    ngOnDestroy(): void;
+}

package/dist/bridge.service.js

@@ -0,0 +1,85 @@
+var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
+    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
+    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+    return c > 3 && r && Object.defineProperty(target, key, r), r;
+};
+import { Injectable, NgZone, inject } from '@angular/core';
+import { BehaviorSubject } from 'rxjs';
+let BridgeService = class BridgeService {
+    constructor() {
+        this.session$ = new BehaviorSubject(null);
+        this.annotations$ = new BehaviorSubject([]);
+        this.connected$ = new BehaviorSubject(false);
+        this.zone = inject(NgZone);
+        this.ws = null;
+        this.reconnectTimer = null;
+    }
+    init() {
+        this.connect();
+    }
+    connect() {
+        const wsUrl = `ws://${location.host}/__annotate`;
+        this.ws = new WebSocket(wsUrl);
+        this.ws.onopen = () => {
+            this.zone.run(() => {
+                this.connected$.next(true);
+            });
+        };
+        this.ws.onmessage = (event) => {
+            this.zone.run(() => {
+                try {
+                    const data = JSON.parse(event.data);
+                    if (data.type === 'session:created') {
+                        this.session$.next(data.session);
+                    }
+                    else if (data.type === 'annotations:sync') {
+                        this.annotations$.next(data.annotations);
+                    }
+                    else if (data.type === 'annotation:created') {
+                        const annotation = data.annotation;
+                        const current = this.annotations$.getValue();
+                        this.annotations$.next([...current, annotation]);
+                    }
+                }
+                catch {
+                    // ignore malformed messages
+                }
+            });
+        };
+        this.ws.onclose = () => {
+            this.zone.run(() => {
+                this.connected$.next(false);
+                this.reconnectTimer = setTimeout(() => { this.connect(); }, 3000);
+            });
+        };
+        this.ws.onerror = (event) => {
+            console.warn('[ng-annotate] WebSocket error', event);
+        };
+    }
+    createAnnotation(payload) {
+        this.send({ type: 'annotation:create', payload });
+    }
+    replyToAnnotation(id, message) {
+        this.send({ type: 'annotation:reply', id, message });
+    }
+    deleteAnnotation(id) {
+        this.send({ type: 'annotation:delete', id });
+    }
+    send(msg) {
+        if (this.ws?.readyState === WebSocket.OPEN) {
+            this.ws.send(JSON.stringify(msg));
+        }
+    }
+    ngOnDestroy() {
+        if (this.reconnectTimer !== null) {
+            clearTimeout(this.reconnectTimer);
+            this.reconnectTimer = null;
+        }
+        this.ws?.close();
+    }
+};
+BridgeService = __decorate([
+    Injectable()
+], BridgeService);
+export { BridgeService };

package/dist/index.d.ts

@@ -0,0 +1,6 @@
+export { NgAnnotateModule } from './ng-annotate.module.js';
+export { provideNgAnnotate } from './provide-ng-annotate.js';
+export { InspectorService } from './inspector.service.js';
+export { BridgeService } from './bridge.service.js';
+export { OverlayComponent } from './overlay/overlay.component.js';
+export * from './types.js';

package/dist/index.js

@@ -0,0 +1,6 @@
+export { NgAnnotateModule } from './ng-annotate.module.js';
+export { provideNgAnnotate } from './provide-ng-annotate.js';
+export { InspectorService } from './inspector.service.js';
+export { BridgeService } from './bridge.service.js';
+export { OverlayComponent } from './overlay/overlay.component.js';
+export * from './types.js';

package/dist/inspector.service.d.ts

@@ -0,0 +1,10 @@
+import type { ComponentContext } from './types.js';
+export declare class InspectorService {
+    getComponentContext(element: Element): ComponentContext | null;
+    private findNearestComponent;
+    private getSelector;
+    private getInputs;
+    private buildTreePath;
+    private snapshot;
+    private resolveFilePaths;
+}

package/dist/inspector.service.js

@@ -0,0 +1,130 @@
+var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
+    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
+    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+    return c > 3 && r && Object.defineProperty(target, key, r), r;
+};
+import { Injectable } from '@angular/core';
+const DOM_SNAPSHOT_MAX = 5000;
+let InspectorService = class InspectorService {
+    getComponentContext(element) {
+        const component = this.findNearestComponent(element);
+        if (!component)
+            return null;
+        const componentName = component.constructor.name;
+        const { component: componentFilePath, template: templateFilePath } = this.resolveFilePaths(componentName);
+        const selector = this.getSelector(component);
+        const inputs = this.getInputs(component);
+        const domSnapshot = this.snapshot(element);
+        const componentTreePath = this.buildTreePath(element);
+        return {
+            componentName,
+            componentFilePath,
+            ...(templateFilePath ? { templateFilePath } : {}),
+            selector,
+            inputs,
+            domSnapshot,
+            componentTreePath,
+        };
+    }
+    findNearestComponent(element) {
+        let current = element;
+        while (current) {
+            try {
+                const comp = ng.getComponent(current);
+                if (comp)
+                    return comp;
+            }
+            catch {
+                // ignore
+            }
+            current = current.parentElement;
+        }
+        return null;
+    }
+    getSelector(component) {
+        try {
+            const cmp = component.constructor.ɵcmp;
+            if (!cmp?.selectors?.length)
+                return 'unknown-selector';
+            const first = cmp.selectors[0];
+            if (!first.length)
+                return 'unknown-selector';
+            // Element selector: [['app-foo']]
+            // Attribute selector: [['', 'appFoo', '']]
+            if (first[0] === '') {
+                // Attribute selector — find non-empty entries
+                const attrParts = [];
+                for (let i = 1; i < first.length; i += 2) {
+                    if (typeof first[i] === 'string' && first[i]) {
+                        attrParts.push(`[${String(first[i])}]`);
+                    }
+                }
+                return attrParts.join('') || 'unknown-selector';
+            }
+            return String(first[0]);
+        }
+        catch {
+            return 'unknown-selector';
+        }
+    }
+    getInputs(component) {
+        try {
+            const cmp = component.constructor.ɵcmp;
+            if (!cmp?.inputs)
+                return {};
+            const result = {};
+            for (const [propName] of Object.entries(cmp.inputs)) {
+                if (typeof propName === 'symbol')
+                    continue;
+                if (propName.startsWith('ɵ'))
+                    continue;
+                result[propName] = component[propName];
+            }
+            return result;
+        }
+        catch {
+            return {};
+        }
+    }
+    buildTreePath(element) {
+        const path = [];
+        let current = element.parentElement;
+        while (current) {
+            try {
+                const comp = ng.getComponent(current);
+                if (comp) {
+                    path.unshift(comp.constructor.name);
+                }
+            }
+            catch {
+                // ignore
+            }
+            current = current.parentElement;
+        }
+        return path;
+    }
+    snapshot(element) {
+        const html = element.outerHTML;
+        if (html.length <= DOM_SNAPSHOT_MAX)
+            return html;
+        return html.slice(0, DOM_SNAPSHOT_MAX) + '<!-- truncated -->';
+    }
+    resolveFilePaths(componentName) {
+        try {
+            const manifest = window
+                .__NG_ANNOTATE_MANIFEST__;
+            const entry = manifest?.[componentName];
+            if (entry)
+                return entry;
+        }
+        catch {
+            // ignore
+        }
+        return { component: `(unresolved: ${componentName})` };
+    }
+};
+InspectorService = __decorate([
+    Injectable()
+], InspectorService);
+export { InspectorService };

package/dist/ng-annotate.module.d.ts

@@ -0,0 +1,2 @@
+export declare class NgAnnotateModule {
+}

package/dist/ng-annotate.module.js

@@ -0,0 +1,33 @@
+var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
+    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
+    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+    return c > 3 && r && Object.defineProperty(target, key, r), r;
+};
+import { NgModule, isDevMode, provideAppInitializer, inject, ApplicationRef, EnvironmentInjector, createComponent, } from '@angular/core';
+import { InspectorService } from './inspector.service.js';
+import { BridgeService } from './bridge.service.js';
+import { OverlayComponent } from './overlay/overlay.component.js';
+let NgAnnotateModule = class NgAnnotateModule {
+};
+NgAnnotateModule = __decorate([
+    NgModule({
+        providers: isDevMode()
+            ? [
+                InspectorService,
+                BridgeService,
+                provideAppInitializer(() => {
+                    const bridge = inject(BridgeService);
+                    const appRef = inject(ApplicationRef);
+                    const envInjector = inject(EnvironmentInjector);
+                    bridge.init();
+                    const overlayRef = createComponent(OverlayComponent, { environmentInjector: envInjector });
+                    appRef.attachView(overlayRef.hostView);
+                    document.body.appendChild(overlayRef.location.nativeElement);
+                }),
+            ]
+            : [],
+    })
+    // eslint-disable-next-line @typescript-eslint/no-extraneous-class -- required by NgModule pattern
+], NgAnnotateModule);
+export { NgAnnotateModule };

package/dist/overlay/overlay.component.d.ts

@@ -0,0 +1,51 @@
+import { OnInit, ElementRef } from '@angular/core';
+import type { Annotation, ComponentContext } from '../types.js';
+type OverlayMode = 'hidden' | 'inspect' | 'annotate' | 'thread';
+interface HighlightRect {
+    top: string;
+    left: string;
+    width: string;
+    height: string;
+}
+interface AnnotationBadge {
+    annotation: Annotation;
+    top: string;
+    left: string;
+    icon: string;
+    label: string;
+}
+export declare class OverlayComponent implements OnInit {
+    textArea?: ElementRef<HTMLTextAreaElement>;
+    mode: OverlayMode;
+    hoveredContext: ComponentContext | null;
+    highlightRect: HighlightRect | null;
+    selectedContext: ComponentContext | null;
+    annotationText: string;
+    selectionText: string;
+    threadAnnotation: Annotation | null;
+    replyText: string;
+    badges: AnnotationBadge[];
+    private readonly inspector;
+    private readonly bridge;
+    private readonly cdr;
+    ngOnInit(): void;
+    toggleInspect(event?: Event): void;
+    onEscape(): void;
+    onScrollOrResize(): void;
+    onMouseMove(event: MouseEvent): void;
+    onClick(event: MouseEvent): void;
+    submit(): void;
+    cancel(): void;
+    openThread(annotation: Annotation): void;
+    closeThread(): void;
+    sendReply(): void;
+    inputEntries(): {
+        key: string;
+        value: unknown;
+    }[];
+    private updateBadges;
+    private refreshBadgePositions;
+    private findComponentElement;
+    private badgeIcon;
+}
+export {};

package/dist/overlay/overlay.component.js

@@ -0,0 +1,430 @@
+var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
+    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
+    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+    return c > 3 && r && Object.defineProperty(target, key, r), r;
+};
+var __metadata = (this && this.__metadata) || function (k, v) {
+    if (typeof Reflect === "object" && typeof Reflect.metadata === "function") return Reflect.metadata(k, v);
+};
+import { Component, ChangeDetectionStrategy, ChangeDetectorRef, HostListener, ViewChild, ElementRef, inject, } from '@angular/core';
+import { JsonPipe } from '@angular/common';
+import { FormsModule } from '@angular/forms';
+import { InspectorService } from '../inspector.service.js';
+import { BridgeService } from '../bridge.service.js';
+let OverlayComponent = class OverlayComponent {
+    constructor() {
+        this.mode = 'hidden';
+        this.hoveredContext = null;
+        this.highlightRect = null;
+        this.selectedContext = null;
+        this.annotationText = '';
+        this.selectionText = '';
+        this.threadAnnotation = null;
+        this.replyText = '';
+        this.badges = [];
+        this.inspector = inject(InspectorService);
+        this.bridge = inject(BridgeService);
+        this.cdr = inject(ChangeDetectorRef);
+    }
+    ngOnInit() {
+        this.bridge.annotations$.subscribe((annotations) => {
+            this.updateBadges(annotations);
+            this.cdr.markForCheck();
+        });
+    }
+    toggleInspect(event) {
+        event?.preventDefault();
+        if (this.mode === 'hidden')
+            this.mode = 'inspect';
+        else if (this.mode === 'inspect')
+            this.mode = 'hidden';
+        else if (this.mode === 'annotate')
+            this.mode = 'inspect';
+        this.cdr.markForCheck();
+    }
+    onEscape() {
+        if (this.mode === 'annotate')
+            this.mode = 'inspect';
+        else if (this.mode === 'inspect')
+            this.mode = 'hidden';
+        else if (this.mode === 'thread')
+            this.mode = 'hidden';
+        this.cdr.markForCheck();
+    }
+    onScrollOrResize() {
+        if (this.badges.length > 0) {
+            this.refreshBadgePositions();
+            this.cdr.markForCheck();
+        }
+    }
+    onMouseMove(event) {
+        if (this.mode !== 'inspect')
+            return;
+        const target = event.target;
+        if (target.closest('nga-overlay'))
+            return;
+        const context = this.inspector.getComponentContext(target);
+        this.hoveredContext = context;
+        if (context) {
+            const rect = target.getBoundingClientRect();
+            this.highlightRect = {
+                top: `${rect.top.toString()}px`,
+                left: `${rect.left.toString()}px`,
+                width: `${rect.width.toString()}px`,
+                height: `${rect.height.toString()}px`,
+            };
+        }
+        else {
+            this.highlightRect = null;
+        }
+        this.cdr.markForCheck();
+    }
+    onClick(event) {
+        if (this.mode !== 'inspect')
+            return;
+        const target = event.target;
+        if (target.closest('nga-overlay'))
+            return;
+        const context = this.inspector.getComponentContext(target);
+        if (!context)
+            return;
+        event.preventDefault();
+        event.stopPropagation();
+        this.selectedContext = context;
+        this.annotationText = '';
+        this.selectionText = window.getSelection()?.toString() ?? '';
+        this.mode = 'annotate';
+        this.cdr.markForCheck();
+        setTimeout(() => { this.textArea?.nativeElement.focus(); }, 0);
+    }
+    submit() {
+        if (!this.selectedContext || !this.annotationText.trim())
+            return;
+        this.bridge.createAnnotation({
+            ...this.selectedContext,
+            annotationText: this.annotationText.trim(),
+            selectionText: this.selectionText || undefined,
+        });
+        this.selectedContext = null;
+        this.annotationText = '';
+        this.mode = 'inspect';
+        this.cdr.markForCheck();
+    }
+    cancel() {
+        this.mode = 'inspect';
+        this.cdr.markForCheck();
+    }
+    openThread(annotation) {
+        this.threadAnnotation = annotation;
+        this.mode = 'thread';
+        this.cdr.markForCheck();
+    }
+    closeThread() {
+        this.threadAnnotation = null;
+        this.mode = 'hidden';
+        this.cdr.markForCheck();
+    }
+    sendReply() {
+        if (!this.threadAnnotation || !this.replyText.trim())
+            return;
+        this.bridge.replyToAnnotation(this.threadAnnotation.id, this.replyText.trim());
+        this.replyText = '';
+        this.cdr.markForCheck();
+    }
+    inputEntries() {
+        if (!this.selectedContext)
+            return [];
+        return Object.entries(this.selectedContext.inputs)
+            .slice(0, 5)
+            .map(([key, value]) => ({ key, value }));
+    }
+    updateBadges(annotations) {
+        this.badges = annotations
+            .map((annotation) => {
+            const el = this.findComponentElement(annotation.componentName, annotation.selector);
+            if (!el)
+                return null;
+            const rect = el.getBoundingClientRect();
+            return {
+                annotation,
+                top: `${rect.top.toString()}px`,
+                left: `${(rect.left + rect.width - 12).toString()}px`,
+                icon: this.badgeIcon(annotation.status),
+                label: `${annotation.componentName}: ${annotation.annotationText.slice(0, 40)}`,
+            };
+        })
+            .filter((b) => b !== null);
+    }
+    refreshBadgePositions() {
+        this.badges = this.badges.map((badge) => {
+            const el = this.findComponentElement(badge.annotation.componentName, badge.annotation.selector);
+            if (!el)
+                return badge;
+            const rect = el.getBoundingClientRect();
+            return {
+                ...badge,
+                top: `${rect.top.toString()}px`,
+                left: `${(rect.left + rect.width - 12).toString()}px`,
+            };
+        });
+    }
+    findComponentElement(componentName, selector) {
+        const bySelector = document.querySelector(selector);
+        if (bySelector)
+            return bySelector;
+        const all = document.querySelectorAll('*');
+        for (const el of Array.from(all)) {
+            try {
+                const comp = window
+                    .ng;
+                if (comp?.getComponent(el)?.constructor.name === componentName)
+                    return el;
+            }
+            catch {
+                // ignore
+            }
+        }
+        return null;
+    }
+    badgeIcon(status) {
+        const icons = {
+            pending: '●',
+            acknowledged: '◐',
+            resolved: '✓',
+            dismissed: '✕',
+        };
+        return icons[status];
+    }
+};
+__decorate([
+    ViewChild('textArea'),
+    __metadata("design:type", ElementRef)
+], OverlayComponent.prototype, "textArea", void 0);
+__decorate([
+    HostListener('document:keydown.alt.shift.a', ['$event']),
+    __metadata("design:type", Function),
+    __metadata("design:paramtypes", [Event]),
+    __metadata("design:returntype", void 0)
+], OverlayComponent.prototype, "toggleInspect", null);
+__decorate([
+    HostListener('document:keydown.escape'),
+    __metadata("design:type", Function),
+    __metadata("design:paramtypes", []),
+    __metadata("design:returntype", void 0)
+], OverlayComponent.prototype, "onEscape", null);
+__decorate([
+    HostListener('window:scroll'),
+    HostListener('window:resize'),
+    __metadata("design:type", Function),
+    __metadata("design:paramtypes", []),
+    __metadata("design:returntype", void 0)
+], OverlayComponent.prototype, "onScrollOrResize", null);
+__decorate([
+    HostListener('document:mousemove', ['$event']),
+    __metadata("design:type", Function),
+    __metadata("design:paramtypes", [MouseEvent]),
+    __metadata("design:returntype", void 0)
+], OverlayComponent.prototype, "onMouseMove", null);
+__decorate([
+    HostListener('document:click', ['$event']),
+    __metadata("design:type", Function),
+    __metadata("design:paramtypes", [MouseEvent]),
+    __metadata("design:returntype", void 0)
+], OverlayComponent.prototype, "onClick", null);
+OverlayComponent = __decorate([
+    Component({
+        selector: 'nga-overlay',
+        changeDetection: ChangeDetectionStrategy.OnPush,
+        imports: [JsonPipe, FormsModule],
+        styles: [`
+    :host {
+      position: fixed; top: 0; left: 0; width: 100%; height: 100%;
+      pointer-events: none; z-index: 9999;
+    }
+    .nga-highlight-rect {
+      position: fixed; border: 2px solid #3b82f6;
+      background: rgba(59,130,246,0.1); pointer-events: none;
+      transition: top 0.05s, left 0.05s, width 0.05s, height 0.05s;
+    }
+    .nga-component-label {
+      position: absolute; top: -22px; left: 0; background: #1e293b; color: #f8fafc;
+      font-family: monospace; font-size: 11px; padding: 2px 6px;
+      border-radius: 3px; white-space: nowrap;
+    }
+    .nga-annotate-panel, .nga-thread-panel {
+      pointer-events: all; position: fixed; right: 16px; top: 50%;
+      transform: translateY(-50%); background: #ffffff; border: 1px solid #e2e8f0;
+      border-radius: 8px; box-shadow: 0 4px 24px rgba(0,0,0,0.15);
+      padding: 16px; min-width: 320px; max-width: 400px;
+    }
+    .nga-panel-title {
+      margin: 0 0 12px; font-size: 14px; font-weight: 600;
+      color: #1e293b; font-family: monospace;
+    }
+    .nga-inputs { margin-bottom: 10px; }
+    .nga-input-row {
+      display: flex; gap: 8px; font-size: 12px;
+      font-family: monospace; margin-bottom: 4px;
+    }
+    .nga-input-key { color: #64748b; min-width: 80px; }
+    .nga-input-val {
+      color: #1e293b; overflow: hidden;
+      text-overflow: ellipsis; white-space: nowrap;
+    }
+    .nga-selection {
+      font-size: 12px; color: #475569; margin-bottom: 8px; font-style: italic;
+    }
+    .nga-textarea, .nga-reply-input {
+      width: 100%; box-sizing: border-box; border: 1px solid #cbd5e1;
+      border-radius: 4px; padding: 8px; font-size: 13px;
+      font-family: inherit; resize: vertical; margin-bottom: 10px;
+    }
+    .nga-textarea:focus, .nga-reply-input:focus {
+      outline: none; border-color: #3b82f6;
+    }
+    .nga-actions { display: flex; gap: 8px; }
+    .nga-btn {
+      padding: 6px 14px; border-radius: 4px; font-size: 13px;
+      cursor: pointer; border: none; transition: opacity 0.15s;
+    }
+    .nga-btn:disabled { opacity: 0.4; cursor: not-allowed; }
+    .nga-btn-submit { background: #3b82f6; color: #ffffff; }
+    .nga-btn-cancel { background: #f1f5f9; color: #475569; }
+    .nga-replies { max-height: 200px; overflow-y: auto; margin-bottom: 10px; }
+    .nga-reply { display: flex; gap: 8px; margin-bottom: 8px; font-size: 13px; }
+    .nga-reply-author { font-weight: 600; min-width: 48px; }
+    .nga-reply-author--agent { color: #7c3aed; }
+    .nga-reply-author--user { color: #2563eb; }
+    .nga-badge {
+      pointer-events: all; position: fixed; width: 18px; height: 18px;
+      border-radius: 50%; display: flex; align-items: center;
+      justify-content: center; font-size: 10px; cursor: pointer;
+      transform: translate(-50%, -50%);
+    }
+    .nga-badge--pending { background: #3b82f6; color: #ffffff; }
+    .nga-badge--acknowledged { background: #f59e0b; color: #ffffff; }
+    .nga-badge--resolved { background: #22c55e; color: #ffffff; }
+    .nga-badge--dismissed { background: #94a3b8; color: #ffffff; }
+    .nga-keyboard-hint {
+      pointer-events: none; position: fixed; bottom: 16px; right: 16px;
+      background: rgba(15,23,42,0.7); color: #f8fafc; font-size: 12px;
+      padding: 6px 10px; border-radius: 6px;
+    }
+    .nga-keyboard-hint kbd {
+      background: rgba(255,255,255,0.15); border-radius: 3px;
+      padding: 1px 5px; font-family: monospace;
+    }
+  `],
+        template: `
+    <!-- Keyboard hint -->
+    @if (mode === 'hidden') {
+      <div class="nga-keyboard-hint">
+        <kbd>Alt+Shift+A</kbd> to annotate
+      </div>
+    }
+    @if (mode === 'inspect') {
+      <div class="nga-keyboard-hint">
+        Click a component &nbsp; <kbd>Esc</kbd> to cancel
+      </div>
+    }
+
+    <!-- Inspect highlight rect -->
+    @if (mode === 'inspect' && hoveredContext !== null && highlightRect !== null) {
+      <div
+        class="nga-highlight-rect"
+        [style.top]="highlightRect.top"
+        [style.left]="highlightRect.left"
+        [style.width]="highlightRect.width"
+        [style.height]="highlightRect.height"
+      >
+        <span class="nga-component-label">{{ hoveredContext.componentName }}</span>
+      </div>
+    }
+
+    <!-- Annotate panel -->
+    @if (mode === 'annotate' && selectedContext !== null) {
+      <div class="nga-annotate-panel">
+        <h3 class="nga-panel-title">{{ selectedContext.componentName }}</h3>
+
+        @if (inputEntries().length > 0) {
+          <div class="nga-inputs">
+            @for (entry of inputEntries(); track entry.key) {
+              <div class="nga-input-row">
+                <span class="nga-input-key">{{ entry.key }}:</span>
+                <span class="nga-input-val">{{ entry.value | json }}</span>
+              </div>
+            }
+          </div>
+        }
+
+        @if (selectionText) {
+          <div class="nga-selection">
+            <em>"{{ selectionText }}"</em>
+          </div>
+        }
+
+        <textarea
+          #textArea
+          class="nga-textarea"
+          [(ngModel)]="annotationText"
+          placeholder="Describe the change..."
+          rows="4"
+        ></textarea>
+
+        <div class="nga-actions">
+          <button class="nga-btn nga-btn-submit" (click)="submit()" [disabled]="annotationText.trim() === ''">
+            Submit
+          </button>
+          <button class="nga-btn nga-btn-cancel" (click)="cancel()">Cancel</button>
+        </div>
+      </div>
+    }
+
+    <!-- Thread panel -->
+    @if (mode === 'thread' && threadAnnotation !== null) {
+      <div class="nga-thread-panel">
+        <h3 class="nga-panel-title">{{ threadAnnotation.componentName }}</h3>
+
+        <div class="nga-replies">
+          @for (reply of threadAnnotation.replies; track reply.message) {
+            <div class="nga-reply">
+              <span class="nga-reply-author nga-reply-author--{{ reply.author }}">{{ reply.author }}</span>
+              <span class="nga-reply-text">{{ reply.message }}</span>
+            </div>
+          }
+        </div>
+
+        <input
+          class="nga-reply-input"
+          type="text"
+          [(ngModel)]="replyText"
+          placeholder="Reply..."
+          (keydown.enter)="sendReply()"
+        />
+
+        <div class="nga-actions">
+          <button class="nga-btn nga-btn-submit" (click)="sendReply()" [disabled]="replyText.trim() === ''">
+            Send
+          </button>
+          <button class="nga-btn nga-btn-cancel" (click)="closeThread()">Close</button>
+        </div>
+      </div>
+    }
+
+    <!-- Annotation badges -->
+    @for (badge of badges; track badge.annotation.id) {
+      <div
+        class="nga-badge nga-badge--{{ badge.annotation.status }}"
+        [style.top]="badge.top"
+        [style.left]="badge.left"
+        (click)="openThread(badge.annotation)"
+        [title]="badge.label"
+      >
+        {{ badge.icon }}
+      </div>
+    }
+  `,
+    })
+], OverlayComponent);
+export { OverlayComponent };

package/dist/provide-ng-annotate.d.ts

@@ -0,0 +1 @@
+export declare function provideNgAnnotate(): import("@angular/core").EnvironmentProviders;

package/dist/provide-ng-annotate.js

@@ -0,0 +1,21 @@
+import { ApplicationRef, EnvironmentInjector, createComponent, inject, isDevMode, makeEnvironmentProviders, provideAppInitializer, } from '@angular/core';
+import { InspectorService } from './inspector.service.js';
+import { BridgeService } from './bridge.service.js';
+import { OverlayComponent } from './overlay/overlay.component.js';
+export function provideNgAnnotate() {
+    return makeEnvironmentProviders([
+        InspectorService,
+        BridgeService,
+        provideAppInitializer(() => {
+            if (!isDevMode())
+                return;
+            const bridge = inject(BridgeService);
+            const appRef = inject(ApplicationRef);
+            const envInjector = inject(EnvironmentInjector);
+            bridge.init();
+            const overlayRef = createComponent(OverlayComponent, { environmentInjector: envInjector });
+            appRef.attachView(overlayRef.hostView);
+            document.body.appendChild(overlayRef.location.nativeElement);
+        }),
+    ]);
+}

package/dist/types.d.ts

@@ -0,0 +1,39 @@
+export type AnnotationStatus = 'pending' | 'acknowledged' | 'resolved' | 'dismissed';
+export interface AnnotationReply {
+    id: string;
+    createdAt: string;
+    author: 'agent' | 'user';
+    message: string;
+}
+export interface Annotation {
+    id: string;
+    sessionId: string;
+    createdAt: string;
+    status: AnnotationStatus;
+    replies: AnnotationReply[];
+    componentName: string;
+    componentFilePath: string;
+    templateFilePath?: string;
+    selector: string;
+    inputs: Record<string, unknown>;
+    domSnapshot: string;
+    componentTreePath: string[];
+    annotationText: string;
+    selectionText?: string;
+}
+export interface Session {
+    id: string;
+    createdAt: string;
+    lastSeenAt: string;
+    active: boolean;
+    url: string;
+}
+export interface ComponentContext {
+    componentName: string;
+    componentFilePath: string;
+    templateFilePath?: string;
+    selector: string;
+    inputs: Record<string, unknown>;
+    domSnapshot: string;
+    componentTreePath: string[];
+}

package/dist/types.js

@@ -0,0 +1 @@
+export {};

package/package.json

@@ -0,0 +1,32 @@
+{
+  "name": "@ng-annotate/angular",
+  "version": "0.2.1",
+  "schematics": "./schematics/collection.json",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/yngvebn/ngagentify"
+  },
+  "files": [
+    "dist",
+    "schematics"
+  ],
+  "main": "dist/index.js",
+  "types": "dist/index.d.ts",
+  "scripts": {
+    "build": "tsc && npm run build:schematics",
+    "build:schematics": "tsc -p schematics/tsconfig.json",
+    "build:watch": "tsc --watch",
+    "lint": "eslint src/",
+    "lint:fix": "eslint src/ --fix"
+  },
+  "peerDependencies": {
+    "@angular/core": ">=21.0.0",
+    "rxjs": ">=7.0.0"
+  },
+  "devDependencies": {
+    "@angular-devkit/schematics": ">=17.0.0",
+    "typescript": "~5.6.0",
+    "@angular/core": "^21.0.0",
+    "rxjs": "^7.0.0"
+  }
+}

package/schematics/collection.json

@@ -0,0 +1,9 @@
+{
+  "$schema": "../node_modules/@angular-devkit/schematics/collection-schema.json",
+  "schematics": {
+    "ng-add": {
+      "description": "Add ng-annotate-mcp to the Angular project.",
+      "factory": "./ng-add/index"
+    }
+  }
+}

package/schematics/ng-add/index.js

@@ -0,0 +1,94 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.default = default_1;
+const schematics_1 = require("@angular-devkit/schematics");
+const tasks_1 = require("@angular-devkit/schematics/tasks");
+function addVitePlugin() {
+    return (tree, context) => {
+        const candidates = ['vite.config.ts', 'vite.config.js', 'vite.config.mts'];
+        const viteConfigPath = candidates.find((p) => tree.exists(p));
+        if (!viteConfigPath) {
+            context.logger.warn('⚠️  Could not find vite.config.ts — add the plugin manually:\n' +
+                "    import { ngAnnotateMcp } from '@ng-annotate/vite-plugin';\n" +
+                '    plugins: [...ngAnnotateMcp()]');
+            return;
+        }
+        let content = tree.read(viteConfigPath).toString('utf-8');
+        if (content.includes('@ng-annotate/vite-plugin')) {
+            context.logger.info('@ng-annotate/vite-plugin vite plugin already present, skipping.');
+            return;
+        }
+        // Insert import after the last existing import line
+        content = content.replace(/(^import .+$(\r?\n)?)+/m, (match) => match + "import { ngAnnotateMcp } from '@ng-annotate/vite-plugin';\n");
+        // Insert spread into plugins array (handles `plugins: [` or `plugins:[`)
+        content = content.replace(/plugins\s*:\s*\[/, 'plugins: [...ngAnnotateMcp(), ');
+        tree.overwrite(viteConfigPath, content);
+        context.logger.info(`✅ Added ngAnnotateMcp() to ${viteConfigPath}`);
+    };
+}
+function addProviders() {
+    return (tree, context) => {
+        const candidates = [
+            'src/app/app.config.ts',
+            'src/app.config.ts',
+            'app/app.config.ts',
+        ];
+        const appConfigPath = candidates.find((p) => tree.exists(p));
+        if (!appConfigPath) {
+            context.logger.warn('⚠️  Could not find app.config.ts — add provideNgAnnotate() manually:\n' +
+                "    import { provideNgAnnotate } from '@ng-annotate/angular';\n" +
+                '    providers: [provideNgAnnotate()]');
+            return;
+        }
+        let content = tree.read(appConfigPath).toString('utf-8');
+        if (content.includes('provideNgAnnotate')) {
+            context.logger.info('provideNgAnnotate already present, skipping.');
+            return;
+        }
+        // Insert import after the last existing import line
+        content = content.replace(/(^import .+$(\r?\n)?)+/m, (match) => match + "import { provideNgAnnotate } from '@ng-annotate/angular';\n");
+        // Insert into providers array
+        content = content.replace(/providers\s*:\s*\[/, 'providers: [\n    provideNgAnnotate(),');
+        tree.overwrite(appConfigPath, content);
+        context.logger.info(`✅ Added provideNgAnnotate() to ${appConfigPath}`);
+    };
+}
+function addMcpConfig() {
+    return (tree, context) => {
+        if (tree.exists('.mcp.json')) {
+            context.logger.info('.mcp.json already exists, skipping.');
+            return;
+        }
+        const mcpConfig = {
+            mcpServers: {
+                'ng-annotate': {
+                    command: 'npx',
+                    args: ['-y', '@ng-annotate/mcp-server'],
+                },
+            },
+        };
+        tree.create('.mcp.json', JSON.stringify(mcpConfig, null, 2) + '\n');
+        context.logger.info('✅ Created .mcp.json');
+    };
+}
+function addDevDependency() {
+    return (tree, context) => {
+        const pkgPath = 'package.json';
+        if (!tree.exists(pkgPath))
+            return;
+        const pkg = JSON.parse(tree.read(pkgPath).toString('utf-8'));
+        pkg['devDependencies'] ?? (pkg['devDependencies'] = {});
+        if (!pkg['devDependencies']['@ng-annotate/vite-plugin']) {
+            pkg['devDependencies']['@ng-annotate/vite-plugin'] = 'latest';
+            tree.overwrite(pkgPath, JSON.stringify(pkg, null, 2) + '\n');
+            context.addTask(new tasks_1.NodePackageInstallTask());
+            context.logger.info('✅ Added @ng-annotate/vite-plugin to devDependencies');
+        }
+    };
+}
+function default_1() {
+    return (tree, context) => {
+        context.logger.info('Setting up @ng-annotate/vite-plugin...');
+        return (0, schematics_1.chain)([addDevDependency(), addVitePlugin(), addProviders(), addMcpConfig()])(tree, context);
+    };
+}

package/schematics/ng-add/index.ts

@@ -0,0 +1,127 @@
+import { Rule, SchematicContext, Tree, chain } from '@angular-devkit/schematics';
+import { NodePackageInstallTask } from '@angular-devkit/schematics/tasks';
+
+function addVitePlugin(): Rule {
+  return (tree: Tree, context: SchematicContext) => {
+    const candidates = ['vite.config.ts', 'vite.config.js', 'vite.config.mts'];
+    const viteConfigPath = candidates.find((p) => tree.exists(p));
+
+    if (!viteConfigPath) {
+      context.logger.warn(
+        '⚠️  Could not find vite.config.ts — add the plugin manually:\n' +
+          "    import { ngAnnotateMcp } from '@ng-annotate/vite-plugin';\n" +
+          '    plugins: [...ngAnnotateMcp()]',
+      );
+      return;
+    }
+
+    let content = tree.read(viteConfigPath)!.toString('utf-8');
+
+    if (content.includes('@ng-annotate/vite-plugin')) {
+      context.logger.info('@ng-annotate/vite-plugin vite plugin already present, skipping.');
+      return;
+    }
+
+    // Insert import after the last existing import line
+    content = content.replace(
+      /(^import .+$(\r?\n)?)+/m,
+      (match) => match + "import { ngAnnotateMcp } from '@ng-annotate/vite-plugin';\n",
+    );
+
+    // Insert spread into plugins array (handles `plugins: [` or `plugins:[`)
+    content = content.replace(/plugins\s*:\s*\[/, 'plugins: [...ngAnnotateMcp(), ');
+
+    tree.overwrite(viteConfigPath, content);
+    context.logger.info(`✅ Added ngAnnotateMcp() to ${viteConfigPath}`);
+  };
+}
+
+function addProviders(): Rule {
+  return (tree: Tree, context: SchematicContext) => {
+    const candidates = [
+      'src/app/app.config.ts',
+      'src/app.config.ts',
+      'app/app.config.ts',
+    ];
+    const appConfigPath = candidates.find((p) => tree.exists(p));
+
+    if (!appConfigPath) {
+      context.logger.warn(
+        '⚠️  Could not find app.config.ts — add provideNgAnnotate() manually:\n' +
+          "    import { provideNgAnnotate } from '@ng-annotate/angular';\n" +
+          '    providers: [provideNgAnnotate()]',
+      );
+      return;
+    }
+
+    let content = tree.read(appConfigPath)!.toString('utf-8');
+
+    if (content.includes('provideNgAnnotate')) {
+      context.logger.info('provideNgAnnotate already present, skipping.');
+      return;
+    }
+
+    // Insert import after the last existing import line
+    content = content.replace(
+      /(^import .+$(\r?\n)?)+/m,
+      (match) => match + "import { provideNgAnnotate } from '@ng-annotate/angular';\n",
+    );
+
+    // Insert into providers array
+    content = content.replace(/providers\s*:\s*\[/, 'providers: [\n    provideNgAnnotate(),');
+
+    tree.overwrite(appConfigPath, content);
+    context.logger.info(`✅ Added provideNgAnnotate() to ${appConfigPath}`);
+  };
+}
+
+function addMcpConfig(): Rule {
+  return (tree: Tree, context: SchematicContext) => {
+    if (tree.exists('.mcp.json')) {
+      context.logger.info('.mcp.json already exists, skipping.');
+      return;
+    }
+
+    const mcpConfig = {
+      mcpServers: {
+        'ng-annotate': {
+          command: 'npx',
+          args: ['-y', '@ng-annotate/mcp-server'],
+        },
+      },
+    };
+
+    tree.create('.mcp.json', JSON.stringify(mcpConfig, null, 2) + '\n');
+    context.logger.info('✅ Created .mcp.json');
+  };
+}
+
+function addDevDependency(): Rule {
+  return (tree: Tree, context: SchematicContext) => {
+    const pkgPath = 'package.json';
+    if (!tree.exists(pkgPath)) return;
+
+    const pkg = JSON.parse(tree.read(pkgPath)!.toString('utf-8')) as Record<
+      string,
+      Record<string, string>
+    >;
+    pkg['devDependencies'] ??= {};
+
+    if (!pkg['devDependencies']['@ng-annotate/vite-plugin']) {
+      pkg['devDependencies']['@ng-annotate/vite-plugin'] = 'latest';
+      tree.overwrite(pkgPath, JSON.stringify(pkg, null, 2) + '\n');
+      context.addTask(new NodePackageInstallTask());
+      context.logger.info('✅ Added @ng-annotate/vite-plugin to devDependencies');
+    }
+  };
+}
+
+export default function (): Rule {
+  return (tree: Tree, context: SchematicContext) => {
+    context.logger.info('Setting up @ng-annotate/vite-plugin...');
+    return chain([addDevDependency(), addVitePlugin(), addProviders(), addMcpConfig()])(
+      tree,
+      context,
+    );
+  };
+}

package/schematics/tsconfig.json

@@ -0,0 +1,16 @@
+{
+  "compilerOptions": {
+    "module": "CommonJS",
+    "moduleResolution": "node",
+    "target": "ES2020",
+    "lib": ["ES2020"],
+    "declaration": false,
+    "strict": true,
+    "esModuleInterop": true,
+    "skipLibCheck": true,
+    "rootDir": ".",
+    "outDir": "."
+  },
+  "include": ["./**/*.ts"],
+  "exclude": ["**/*.spec.ts", "node_modules"]
+}