salt-inspector-angular

Angular 17+ library for inspecting UI elements and attaching prompts for AI-assisted development.

Features

• 🔍 Visual Element Inspection - Hover over any element to see its tag, class, and Angular component name
• 📝 Prompt Attachment - Click elements to add descriptive prompts for AI-driven fixes
• 📋 Issue Management - View, manage, and copy all marked issues
• 🚀 Dev Mode Only - Automatically disabled in production builds
• ⚡ Angular 17+ Ready - Built with Signals, Standalone Components, and new control flow
• 🎯 Component Detection - Uses Angular's debug API to identify component names

Requirements

• Angular 17+ (Angular 18+ recommended)
• TypeScript 5+
• Modern browser (Chrome, Firefox, Safari, Edge)

Installation

CLI (Recommended)

Run the automatic installer in your Angular project:

npx create-salt-inspector

The CLI will:

1. Detect your Angular project
2. Install salt-inspector-angular
3. Add <inspector-prompt> to your app
4. Create the .salt-inspector directory

Manual Installation

1. Install the package

npm install salt-inspector-angular

2. For Standalone Angular Apps (Angular 17+)

app.config.ts:

import { ApplicationConfig } from '@angular/core'
import { provideRouter } from '@angular/router'
import { InspectorPrompt } from 'salt-inspector-angular'

export const appConfig: ApplicationConfig = {
  providers: [
    provideRouter(routes),
    InspectorPrompt, // Add this
  ]
}

app.component.html:

<inspector-prompt></inspector-prompt>
<router-outlet />

3. For Module-based Angular Apps

app.module.ts:

import { NgModule } from '@angular/core'
import { BrowserModule } from '@angular/platform-browser'
import { InspectorPromptModule } from 'salt-inspector-angular'
import { AppComponent } from './app.component'

@NgModule({
  declarations: [AppComponent],
  imports: [
    BrowserModule,
    InspectorPromptModule, // Add this
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

app.component.html:

<inspector-prompt></inspector-prompt>

Usage

Basic Usage

1. Start your dev server:

ng serve

2. Click the inspector button (◎) in the bottom-right corner to enable

3. Hover over elements to see:

   • HTML tag name
   • CSS classes
   • Angular component name
   • DOM path

4. Click on any element to open the prompt dialog

5. Enter a description of what you want to change

6. Click Save Issue to mark it

7. Click Copy Issues in the panel to copy for Claude

Keyboard Shortcuts

• Ctrl+Shift+I - Toggle inspector on/off
• Escape - Close modal / Cancel selection

Example Workflow

1. Enable inspector and hover over a misaligned button
2. Click to select it
3. Enter prompt: "Fix the alignment of this button, it should be centered"
4. Save the issue
5. Repeat for other issues
6. Click "Copy Issues" in the panel
7. Run: claude "fix salt-inspector"

Components

The library exports these standalone components:

| Component | Selector | Description | |-----------|----------|-------------| | InspectorPrompt | <inspector-prompt> | Main wrapper component | | ToggleButtonComponent | <inspector-toggle-button> | Enable/disable button | | TooltipComponent | <inspector-tooltip> | Hover element info | | PromptModalComponent | <inspector-prompt-modal> | Prompt input dialog | | IssuesPanelComponent | <inspector-issues-panel> | Issue list panel | | SuccessToastComponent | <inspector-success-toast> | Success notifications |

Services

InspectorService

Signals-based service for managing inspector state:

import { inject } from '@angular/core'
import { InspectorService } from 'salt-inspector-angular'

export class MyComponent() {
  private inspector = inject(InspectorService)

  toggleInspector() {
    this.inspector.toggle()
  }

  copyAllIssues() {
    this.inspector.copyIssues()
  }
}

ElementDetectionService

DOM utilities for element inspection:

import { inject } from '@angular/core'
import { ElementDetectionService } from 'salt-inspector-angular'

export class MyComponent() {
  private detector = inject(ElementDetectionService)

  inspectElement(element: HTMLElement) {
    const info = this.detector.getElementContext(element)
    console.log(info.angularComponentName)
  }
}

Configuration

Options (Future)

The InspectorPrompt component will support options in v2:

<inspector-prompt [enabled]="true" [endpoint]="/custom/endpoint" />

Development

Build

npm run build

Watch Mode

npm run build:watch

Test

npm test

How It Works

1. Element Detection - InspectorDirective tracks mouse events and identifies elements
2. Component Discovery - Uses Angular's ng.getDebugNode() to find component names
3. State Management - Angular Signals manage inspector state reactively
4. Issue Storage - Issues stored in-memory (v2 will add file persistence)
5. Clipboard Export - Issues formatted for Claude to process

Angular Version Support

| Angular Version | Supported | Notes | |----------------|-----------|-------| | 21+ | ✅ | Full support with Signals | | 20 | ✅ | Full support with Signals | | 19 | ✅ | Full support with Signals | | 18 | ✅ | Full support with Signals | | 17 | ✅ | Full support with Signals | | ≤16 | ❌ | Not supported |

Known Limitations (MVP)

• Issues are stored in-memory only (cleared on refresh)
• No file-based session persistence
• No SSR (Server-Side Rendering) support
• Component detection requires dev mode

Roadmap

v2 (Future)

• [ ] File-based session storage (.salt-inspector/session.json)
• [ ] Nx workspace integration
• [ ] SSR support
• [ ] Angular CLI schematics
• [ ] Visual issue diff viewer

Contributing

Contributions are welcome! Please feel free to submit issues or PRs.

License

MIT

Related Packages

• salt-inspector-react - React version
• salt-inspector-vite - Vite plugin (for future use)

Links

• Salt Inspector Prompt
• Angular Documentation