@origostudio/origo-design 0.0.30 → 0.0.32

package/packages/devtools/src/devtools-panel/app.component.ts

@@ -0,0 +1,302 @@
+import { Component, OnInit, signal } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import type { DevToolsMessage, ErrorTelemetryResponseMessage } from '../types/messages';
+import { ComponentTreeComponent } from './component-tree/component-tree.component';
+import { MetadataDetailComponent } from './metadata-detail/metadata-detail.component';
+import type {
+  RenderingPath,
+  MetadataSource,
+  ResolutionChain,
+  ErrorContext,
+} from '@origo/angular-renderer';
+
+export type ConnectionState = 'INITIALIZING' | 'CONNECTED' | 'NOT_AVAILABLE' | 'CONNECTION_LOST';
+
+@Component({
+  selector: 'origo-devtools-root',
+  standalone: true,
+  imports: [CommonModule, ComponentTreeComponent, MetadataDetailComponent],
+  template: `
+    <div class="devtools-container">
+      <header class="header">
+        <div class="title-group">
+          <h1>Origo DevTools</h1>
+          <button class="icon-btn" (click)="reconnect()" title="Refresh Connection">🔄</button>
+        </div>
+        <span class="status-badge" [class]="connectionState().toLowerCase()">
+          {{ connectionState() }}
+        </span>
+      </header>
+
+      <main class="main-content">
+        <ng-container *ngIf="connectionState() === 'CONNECTED'; else fallback">
+          <div class="split-pane">
+            <div class="tree-pane">
+              <origo-devtools-tree
+                [renderingPath]="renderingPath()"
+                (nodeSelected)="onNodeSelected($event)"
+              ></origo-devtools-tree>
+            </div>
+            <div class="detail-pane">
+              <origo-devtools-metadata-detail
+                [metadataSource]="metadataSource()"
+                [resolutionChain]="resolutionChain()"
+              >
+              </origo-devtools-metadata-detail>
+            </div>
+          </div>
+
+          <div *ngIf="errorTelemetry().length > 0" class="error-telemetry-pane">
+            <h3>Error Telemetry</h3>
+            <ul>
+              <li *ngFor="let err of errorTelemetry()">
+                <strong>{{ err.message }}</strong
+                ><br />
+                <small>{{ err.badlPath }}</small>
+              </li>
+            </ul>
+          </div>
+        </ng-container>
+
+        <ng-template #fallback>
+          <div class="fallback-container">
+            <div *ngIf="connectionState() === 'NOT_AVAILABLE'" class="message not-available">
+              <h2>Origo DevTools Not Available</h2>
+              <p>Please run the application in development mode.</p>
+            </div>
+            <div *ngIf="connectionState() === 'CONNECTION_LOST'" class="message connection-lost">
+              <h2>Connection Lost</h2>
+              <p>Trying to reconnect to the application...</p>
+            </div>
+            <div *ngIf="connectionState() === 'INITIALIZING'" class="message initializing">
+              <h2>Connecting...</h2>
+            </div>
+          </div>
+        </ng-template>
+      </main>
+    </div>
+  `,
+  styles: [
+    `
+      :host {
+        display: block;
+        height: 100vh;
+        font-family: sans-serif;
+        overflow: hidden;
+        background-color: var(--origo-color-bg-base, #ffffff);
+        color: var(--origo-color-text-base, #333333);
+      }
+      .devtools-container {
+        display: flex;
+        flex-direction: column;
+        height: 100%;
+      }
+      .header {
+        padding: 8px 16px;
+        display: flex;
+        align-items: center;
+        justify-content: space-between;
+        border-bottom: 1px solid var(--origo-color-border, #e0e0e0);
+        background-color: var(--origo-color-bg-subtle, #f5f5f5);
+      }
+      .title-group {
+        display: flex;
+        align-items: center;
+        gap: 8px;
+      }
+      .title-group h1 {
+        margin: 0;
+        font-size: 14px;
+        font-weight: 600;
+      }
+      .icon-btn {
+        background: none;
+        border: none;
+        cursor: pointer;
+        font-size: 14px;
+        padding: 4px;
+        border-radius: 4px;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+      }
+      .icon-btn:hover {
+        background-color: var(--origo-color-bg-hover, #e0e0e0);
+      }
+      .status-badge {
+        font-size: 11px;
+        padding: 2px 6px;
+        border-radius: 4px;
+        background: var(--origo-color-bg-muted, #ccc);
+        color: var(--origo-color-text-base, #333);
+      }
+      .status-badge.connected {
+        background: var(--origo-color-success-bg, #4caf50);
+        color: var(--origo-color-success-text, white);
+      }
+      .status-badge.not_available {
+        background: var(--origo-color-error-bg, #f44336);
+        color: var(--origo-color-error-text, white);
+      }
+      .status-badge.connection_lost {
+        background: var(--origo-color-warning-bg, #ff9800);
+        color: var(--origo-color-warning-text, white);
+      }
+      .main-content {
+        flex: 1;
+        overflow: hidden;
+      }
+      .split-pane {
+        display: flex;
+        height: 100%;
+      }
+      .tree-pane {
+        flex: 1;
+        border-right: 1px solid var(--origo-color-border, #e0e0e0);
+        overflow-y: auto;
+      }
+      .detail-pane {
+        flex: 1;
+        overflow-y: auto;
+      }
+      .fallback-container {
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        height: 100%;
+      }
+      .message {
+        text-align: center;
+        padding: 24px;
+        border-radius: 8px;
+        background: var(--origo-color-bg-subtle, #f5f5f5);
+      }
+    `,
+  ],
+})
+export class AppComponent implements OnInit {
+  connectionState = signal<ConnectionState>('INITIALIZING');
+
+  renderingPath = signal<RenderingPath | null>(null);
+  metadataSource = signal<MetadataSource | null>(null);
+  resolutionChain = signal<ResolutionChain | null>(null);
+  errorTelemetry = signal<ErrorContext[]>([]);
+
+  private backgroundPageConnection!: chrome.runtime.Port;
+  private reconnectTimeoutId: any;
+
+  ngOnInit() {
+    this.connectToBackground();
+  }
+
+  reconnect() {
+    if (this.connectionState() === 'INITIALIZING') return;
+    this.connectionState.set('INITIALIZING');
+    if (this.backgroundPageConnection) {
+      try {
+        this.backgroundPageConnection.disconnect();
+      } catch (e) {
+        console.warn('Error disconnecting from background page:', e);
+      }
+    }
+    if (this.reconnectTimeoutId) {
+      clearTimeout(this.reconnectTimeoutId);
+    }
+    // Small delay to ensure cleanup before reconnecting
+    this.reconnectTimeoutId = setTimeout(() => {
+      this.connectToBackground();
+    }, 100);
+  }
+
+  private connectToBackground() {
+    if (
+      typeof chrome === 'undefined' ||
+      !chrome.runtime ||
+      typeof chrome.runtime.connect !== 'function'
+    ) {
+      this.connectionState.set('NOT_AVAILABLE');
+      return;
+    }
+
+    if (!chrome.devtools?.inspectedWindow) {
+      this.connectionState.set('NOT_AVAILABLE');
+      return;
+    }
+
+    this.backgroundPageConnection = chrome.runtime.connect({
+      name: 'origo-devtools-panel',
+    });
+
+    try {
+      this.backgroundPageConnection.postMessage({
+        name: 'init',
+        tabId: chrome.devtools.inspectedWindow.tabId,
+      });
+    } catch (e) {
+      this.connectionState.set('NOT_AVAILABLE');
+      return;
+    }
+
+    this.backgroundPageConnection.onMessage.addListener((msg: any) => {
+      if (msg.source === 'origo-devtools-injected') {
+        this.handleMessage(msg.payload as DevToolsMessage);
+      }
+    });
+
+    this.backgroundPageConnection.onDisconnect.addListener(() => {
+      this.connectionState.set('CONNECTION_LOST');
+    });
+
+    // Send a ping to check availability
+    this.sendMessage({ type: 'PING' });
+  }
+
+  private sendMessage(message: unknown) {
+    if (this.connectionState() === 'CONNECTION_LOST') return;
+    if (this.backgroundPageConnection && chrome.devtools?.inspectedWindow) {
+      try {
+        this.backgroundPageConnection.postMessage({
+          tabId: chrome.devtools.inspectedWindow.tabId,
+          data: message,
+        });
+      } catch (e) {
+        console.warn('Failed to send message to background page', e);
+      }
+    }
+  }
+
+  private handleMessage(message: DevToolsMessage) {
+    switch (message.type) {
+      case 'NOT_AVAILABLE':
+        this.connectionState.set('NOT_AVAILABLE');
+        break;
+      case 'PONG':
+        this.connectionState.set('CONNECTED');
+        // Initialize by requesting rendering path
+        this.sendMessage({ type: 'GET_RENDERING_PATH', payload: { badlPath: '' } });
+        // Also fetch initial error telemetry
+        this.sendMessage({ type: 'GET_ERROR_TELEMETRY', payload: {} });
+        break;
+      case 'ERROR_TELEMETRY_RESPONSE':
+        this.errorTelemetry.set((message as ErrorTelemetryResponseMessage).payload || []);
+        break;
+      case 'RENDERING_PATH_RESPONSE':
+        this.renderingPath.set(message.payload);
+        break;
+      case 'METADATA_SOURCE_RESPONSE':
+        this.metadataSource.set(message.payload);
+        break;
+      case 'RESOLUTION_CHAIN_RESPONSE':
+        this.resolutionChain.set(message.payload);
+        break;
+      default:
+        console.warn('Unhandled devtools message type:', message.type);
+        break;
+    }
+  }
+
+  onNodeSelected(badlPath: string) {
+    this.sendMessage({ type: 'GET_METADATA_SOURCE', payload: { badlPath } });
+    this.sendMessage({ type: 'GET_RESOLUTION_CHAIN', payload: { badlPath } });
+  }
+}

package/packages/devtools/src/devtools-panel/component-tree/component-tree.component.ts

@@ -0,0 +1,108 @@
+import { Component, Input, Output, EventEmitter, OnChanges, SimpleChanges } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import type { RenderingPath } from '@origo/angular-renderer';
+
+interface FlatNode {
+  name: string;
+  badlPath: string;
+  depth: number;
+}
+
+@Component({
+  selector: 'origo-devtools-tree',
+  standalone: true,
+  imports: [CommonModule],
+  template: `
+    <div class="tree-container">
+      <h3>Component Tree</h3>
+      <div *ngIf="!renderingPath" class="empty-state">No rendering path data available.</div>
+
+      <div *ngIf="renderingPath" class="tree-content">
+        <!-- Flattened list is virtualized-ready -->
+        <div class="node" *ngFor="let node of flatTree" [style.padding-left.px]="node.depth * 16">
+          <div class="node-header" (click)="selectNode(node.badlPath)">
+            <span class="node-name">{{ node.name }}</span>
+            <span class="node-path">{{ node.badlPath }}</span>
+          </div>
+        </div>
+      </div>
+    </div>
+  `,
+  styles: [
+    `
+      .tree-container {
+        padding: 16px;
+      }
+      h3 {
+        margin-top: 0;
+        font-size: 14px;
+        color: var(--origo-color-text-muted, #666);
+      }
+      .empty-state {
+        padding: 24px;
+        text-align: center;
+        color: var(--origo-color-text-muted, #666);
+      }
+      .node-header {
+        cursor: pointer;
+        padding: 4px 8px;
+        border-radius: 4px;
+      }
+      .node-header:hover {
+        background-color: var(--origo-color-bg-hover, #f0f0f0);
+      }
+      .node-name {
+        font-weight: 600;
+        margin-right: 8px;
+      }
+      .node-path {
+        font-size: 11px;
+        color: var(--origo-color-text-muted, #666);
+      }
+      .node-depth-limit {
+        font-size: 11px;
+        color: var(--origo-color-text-muted, #666);
+        padding-left: 16px;
+        font-style: italic;
+      }
+    `,
+  ],
+})
+export class ComponentTreeComponent implements OnChanges {
+  @Input() renderingPath: RenderingPath | null = null;
+  @Output() nodeSelected = new EventEmitter<string>();
+
+  flatTree: FlatNode[] = [];
+
+  ngOnChanges(changes: SimpleChanges) {
+    if (changes['renderingPath'] && this.renderingPath) {
+      this.flatTree = this.flatten(this.renderingPath);
+    } else if (!this.renderingPath) {
+      this.flatTree = [];
+    }
+  }
+
+  flatten(node: RenderingPath, depth = 0, seen = new Set<RenderingPath>()): FlatNode[] {
+    if (!node || seen.has(node) || typeof node !== 'object') return [];
+    seen.add(node);
+
+    // Guard against missing properties or empty string
+    if (node.badlPath === undefined || node.badlPath === null || node.badlPath === '') return [];
+
+    const flatNode: FlatNode = { name: node.name || 'Unknown', badlPath: node.badlPath, depth };
+    const result = [flatNode];
+
+    if (Array.isArray(node.children)) {
+      for (const child of node.children) {
+        result.push(...this.flatten(child, depth + 1, seen));
+      }
+    }
+    return result;
+  }
+
+  selectNode(badlPath: string) {
+    if (badlPath) {
+      this.nodeSelected.emit(badlPath);
+    }
+  }
+}

package/packages/devtools/src/devtools-panel/main.ts

@@ -0,0 +1,7 @@
+import { bootstrapApplication } from '@angular/platform-browser';
+import { provideZonelessChangeDetection } from '@angular/core';
+import { AppComponent } from './app.component';
+
+bootstrapApplication(AppComponent, {
+  providers: [provideZonelessChangeDetection()],
+}).catch(err => console.error(err));

package/packages/devtools/src/devtools-panel/metadata-detail/metadata-detail.component.ts

@@ -0,0 +1,160 @@
+import { Component, Input, OnChanges, SimpleChanges } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import type { MetadataSource, ResolutionChain } from '@origo/angular-renderer';
+
+@Component({
+  selector: 'origo-devtools-metadata-detail',
+  standalone: true,
+  imports: [CommonModule],
+  template: `
+    <div class="detail-container">
+      <h3>Metadata Details</h3>
+
+      <div *ngIf="!metadataSource && !resolutionChain" class="empty-state">
+        Select a node in the component tree to view details.
+      </div>
+
+      <div *ngIf="metadataSource" class="section">
+        <h4>Source Definition</h4>
+        <div class="data-table-container">
+          <table class="data-table">
+            <tbody>
+              <tr *ngFor="let row of flatMetadata">
+                <td class="key-col">{{ row.path }}</td>
+                <td class="val-col">{{ row.value }}</td>
+              </tr>
+            </tbody>
+          </table>
+        </div>
+      </div>
+
+      <div *ngIf="resolutionChain" class="section">
+        <h4>Resolution Chain</h4>
+        <div class="data-table-container">
+          <table class="data-table">
+            <tbody>
+              <tr *ngFor="let row of flatResolution">
+                <td class="key-col">{{ row.path }}</td>
+                <td class="val-col">{{ row.value }}</td>
+              </tr>
+            </tbody>
+          </table>
+        </div>
+      </div>
+
+      <!-- Adding placeholder for theme token resolutions -->
+      <div class="section">
+        <h4>Theme Token Resolutions</h4>
+        <div class="empty-state">No theme tokens mapped to this element.</div>
+      </div>
+    </div>
+  `,
+  styles: [
+    `
+      .detail-container {
+        padding: 16px;
+      }
+      h3 {
+        margin-top: 0;
+        font-size: 14px;
+        color: var(--origo-color-text-muted, #666);
+      }
+      h4 {
+        font-size: 13px;
+        margin-bottom: 8px;
+      }
+      .empty-state {
+        padding: 24px;
+        text-align: center;
+        color: var(--origo-color-text-muted, #666);
+      }
+      .section {
+        margin-bottom: 24px;
+      }
+      .data-table-container {
+        background: var(--origo-color-bg-subtle, #f5f5f5);
+        border: 1px solid var(--origo-color-border, #e0e0e0);
+        border-radius: 4px;
+        overflow-x: auto;
+      }
+      .data-table {
+        width: 100%;
+        border-collapse: collapse;
+        font-family: var(--origo-font-mono, monospace);
+        font-size: var(--origo-font-size-sm, 12px);
+      }
+      .data-table td {
+        padding: 4px 8px;
+        border-bottom: 1px solid var(--origo-color-border-subtle, #eee);
+      }
+      .data-table tr:last-child td {
+        border-bottom: none;
+      }
+      .key-col {
+        font-weight: 600;
+        color: var(--origo-color-text-muted, #666);
+        white-space: nowrap;
+      }
+      .val-col {
+        color: var(--origo-color-text-base, #333);
+        word-break: break-all;
+      }
+    `,
+  ],
+})
+export class MetadataDetailComponent implements OnChanges {
+  @Input() metadataSource: MetadataSource | null = null;
+  @Input() resolutionChain: ResolutionChain | null = null;
+
+  flatMetadata: { path: string; value: string }[] = [];
+  flatResolution: { path: string; value: string }[] = [];
+
+  ngOnChanges(changes: SimpleChanges) {
+    if (changes['metadataSource']) {
+      this.flatMetadata = this.flattenObject(this.metadataSource);
+    }
+    if (changes['resolutionChain']) {
+      this.flatResolution = this.flattenObject(this.resolutionChain);
+    }
+  }
+
+  // Flattens an object to an array of paths and values to avoid recursive templates and cycle bugs
+  private flattenObject(
+    obj: unknown,
+    prefix = '',
+    seen = new Set(),
+    result: { path: string; value: string }[] = []
+  ): { path: string; value: string }[] {
+    if (obj === null || obj === undefined) {
+      if (prefix) result.push({ path: prefix, value: String(obj) });
+      return result;
+    }
+
+    if (typeof obj !== 'object') {
+      result.push({ path: prefix, value: String(obj) });
+      return result;
+    }
+
+    if (seen.has(obj)) {
+      result.push({ path: prefix, value: '[Circular]' });
+      return result;
+    }
+    seen.add(obj);
+
+    const isArray = Array.isArray(obj);
+    const keys = Object.keys(obj as any);
+
+    if (keys.length === 0) {
+      result.push({ path: prefix, value: isArray ? '[]' : '{}' });
+    } else {
+      for (const key of keys) {
+        const val = (obj as any)[key];
+        const newPrefix = prefix ? (isArray ? `${prefix}[${key}]` : `${prefix}.${key}`) : key;
+        this.flattenObject(val, newPrefix, seen, result);
+      }
+    }
+
+    seen.delete(obj);
+    return result;
+  }
+}

package/packages/devtools/src/test-setup.ts

@@ -0,0 +1,49 @@
+import '@analogjs/vite-plugin-angular/setup-vitest';
+import { getTestBed } from '@angular/core/testing';
+import {
+  BrowserDynamicTestingModule,
+  platformBrowserDynamicTesting,
+} from '@angular/platform-browser-dynamic/testing';
+
+// Manual initialization just in case setup-vitest fails
+try {
+  getTestBed().initTestEnvironment(BrowserDynamicTestingModule, platformBrowserDynamicTesting());
+} catch (e) {
+  if (!(e as Error).message.includes('has already been')) {
+    throw e;
+  }
+}
+
+beforeEach(() => {
+  // Mock chrome API for tests
+  global.chrome = {
+    runtime: {
+      connect: vi.fn(),
+      sendMessage: vi.fn(),
+      onConnect: {
+        addListener: vi.fn(),
+      },
+      onMessage: {
+        addListener: vi.fn(),
+      },
+      getURL: vi.fn(),
+    },
+    tabs: {
+      sendMessage: vi.fn(),
+    },
+    devtools: {
+      panels: {
+        create: vi.fn(),
+      },
+      inspectedWindow: {
+        tabId: 123,
+      },
+    },
+  } as unknown;
+});
+
+afterEach(() => {
+  getTestBed().resetTestingModule();
+  vi.restoreAllMocks();
+  delete (global as any).chrome;
+});