@mcp-elements/angular 0.1.0 → 0.1.1

package/src/chat-bubble.component.ts

@@ -1,53 +0,0 @@
-import { Component, input, computed } from '@angular/core'
-
-type ChatBubbleVariant = 'user' | 'ai'
-
-@Component({
-  selector: 'mcpe-chat-bubble',
-  standalone: true,
-  template: `<div [class]="classes()"><ng-content /></div>`,
-})
-export class SnxChatBubbleComponent {
-  variant = input<ChatBubbleVariant>('ai')
-  class = input('')
-  classes = computed(() =>
-    ['mcpe-chat-bubble', `mcpe-chat-bubble-${this.variant()}`, this.class()].filter(Boolean).join(' ')
-  )
-}
-
-@Component({
-  selector: 'mcpe-chat-bubble-avatar',
-  standalone: true,
-  template: `<img class="mcpe-chat-bubble-avatar" [src]="src()" [alt]="alt()" />`,
-})
-export class SnxChatBubbleAvatarComponent {
-  src = input.required<string>()
-  alt = input('')
-}
-
-@Component({
-  selector: 'mcpe-chat-bubble-content',
-  standalone: true,
-  template: `<div class="mcpe-chat-bubble-content"><ng-content /></div>`,
-})
-export class SnxChatBubbleContentComponent {}
-
-@Component({
-  selector: 'mcpe-chat-bubble-timestamp',
-  standalone: true,
-  template: `<span class="mcpe-chat-bubble-timestamp"><ng-content /></span>`,
-})
-export class SnxChatBubbleTimestampComponent {}
-
-@Component({
-  selector: 'mcpe-chat-bubble-typing',
-  standalone: true,
-  template: `
-    <div class="mcpe-chat-bubble-typing">
-      <span class="mcpe-chat-bubble-typing-dot"></span>
-      <span class="mcpe-chat-bubble-typing-dot"></span>
-      <span class="mcpe-chat-bubble-typing-dot"></span>
-    </div>
-  `,
-})
-export class SnxChatBubbleTypingComponent {}

package/src/chips.component.ts

@@ -1,33 +0,0 @@
-import { Component, input, output, computed } from '@angular/core'
-
-@Component({
-  selector: 'mcpe-chip',
-  standalone: true,
-  template: `
-    <span [class]="classes()">
-      <ng-content />
-      @if (removable()) {
-        <button type="button" class="mcpe-chip-remove" (click)="remove.emit()" aria-label="Remove">
-          <svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
-            <path d="M18 6 6 18" /><path d="m6 6 12 12" />
-          </svg>
-        </button>
-      }
-    </span>
-  `,
-})
-export class SnxChipComponent {
-  variant = input<'default' | 'primary' | 'outline' | 'destructive'>('default')
-  removable = input(false)
-  remove = output<void>()
-  classes = computed(() =>
-    ['mcpe-chip', `mcpe-chip-${this.variant()}`, this.removable() ? 'mcpe-chip-removable' : ''].filter(Boolean).join(' ')
-  )
-}
-
-@Component({
-  selector: 'mcpe-chips',
-  standalone: true,
-  template: `<div class="mcpe-chips"><ng-content /></div>`,
-})
-export class SnxChipsComponent {}

package/src/counter.component.ts

@@ -1,48 +0,0 @@
-import { Component, input, output, signal } from '@angular/core'
-
-@Component({
-  selector: 'mcpe-counter',
-  standalone: true,
-  template: `
-    <div class="mcpe-counter">
-      <button type="button" class="mcpe-counter-button" (click)="decrement()"
-              [disabled]="disabled() || value() <= min()" aria-label="Decrease">
-        <svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
-          <path d="M5 12h14" />
-        </svg>
-      </button>
-      <input type="text" inputmode="numeric" class="mcpe-counter-input"
-             [value]="value()" (change)="onInput($event)" [disabled]="disabled()" aria-label="Count" />
-      <button type="button" class="mcpe-counter-button" (click)="increment()"
-              [disabled]="disabled() || value() >= max()" aria-label="Increase">
-        <svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
-          <path d="M5 12h14" /><path d="M12 5v14" />
-        </svg>
-      </button>
-    </div>
-  `,
-})
-export class SnxCounterComponent {
-  value = signal(0)
-  min = input(0)
-  max = input(99)
-  step = input(1)
-  disabled = input(false)
-  valueChange = output<number>()
-
-  decrement() {
-    this.value.update(v => Math.max(this.min(), v - this.step()))
-    this.valueChange.emit(this.value())
-  }
-  increment() {
-    this.value.update(v => Math.min(this.max(), v + this.step()))
-    this.valueChange.emit(this.value())
-  }
-  onInput(event: Event) {
-    const num = parseInt((event.target as HTMLInputElement).value, 10)
-    if (!isNaN(num)) {
-      this.value.set(Math.max(this.min(), Math.min(this.max(), num)))
-      this.valueChange.emit(this.value())
-    }
-  }
-}

package/src/dialog.component.ts

@@ -1,42 +0,0 @@
-import { Component, input, output, signal, computed, effect, ElementRef, viewChild } from '@angular/core'
-import { createDialog } from '@mcp-elements/core'
-
-@Component({
-  selector: 'mcpe-dialog',
-  standalone: true,
-  template: `
-    @if (open()) {
-      <div class="mcpe-dialog-overlay" (click)="close()"></div>
-      <div
-        #content
-        class="mcpe-dialog-content"
-        role="dialog"
-        [attr.aria-modal]="modal()"
-        (keydown.escape)="close()"
-      >
-        <ng-content />
-        <button class="mcpe-dialog-close" (click)="close()" aria-label="Close">&#x2715;</button>
-      </div>
-    }
-  `,
-})
-export class SnxDialogComponent {
-  modal = input(true)
-  open = signal(false)
-  openChange = output<boolean>()
-
-  toggle() {
-    this.open.update(v => !v)
-    this.openChange.emit(this.open())
-  }
-
-  close() {
-    this.open.set(false)
-    this.openChange.emit(false)
-  }
-
-  show() {
-    this.open.set(true)
-    this.openChange.emit(true)
-  }
-}

package/src/drawer.component.ts

@@ -1,48 +0,0 @@
-import { Component, input, output, signal } from '@angular/core'
-
-@Component({
-  selector: 'mcpe-drawer',
-  standalone: true,
-  template: `
-    @if (open()) {
-      <div class="mcpe-drawer-overlay" (click)="close()"></div>
-      <div
-        [class]="'mcpe-drawer-content mcpe-drawer-content-' + side()"
-        role="dialog"
-        aria-modal="true"
-        (keydown.escape)="close()"
-      >
-        <ng-content />
-        <button class="mcpe-drawer-close" (click)="close()" aria-label="Close">
-          <svg xmlns="http://www.w3.org/2000/svg" width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
-            <path d="M18 6 6 18" /><path d="m6 6 12 12" />
-          </svg>
-        </button>
-      </div>
-    }
-  `,
-})
-export class SnxDrawerComponent {
-  side = input<'left' | 'right' | 'top' | 'bottom'>('right')
-  open = signal(false)
-  openChange = output<boolean>()
-
-  show() { this.open.set(true); this.openChange.emit(true) }
-  close() { this.open.set(false); this.openChange.emit(false) }
-  toggle() { this.open.update(v => !v); this.openChange.emit(this.open()) }
-}
-
-@Component({ selector: 'mcpe-drawer-header', standalone: true, template: `<div class="mcpe-drawer-header"><ng-content /></div>` })
-export class SnxDrawerHeaderComponent {}
-
-@Component({ selector: 'mcpe-drawer-footer', standalone: true, template: `<div class="mcpe-drawer-footer"><ng-content /></div>` })
-export class SnxDrawerFooterComponent {}
-
-@Component({ selector: 'mcpe-drawer-title', standalone: true, template: `<h2 class="mcpe-drawer-title"><ng-content /></h2>` })
-export class SnxDrawerTitleComponent {}
-
-@Component({ selector: 'mcpe-drawer-description', standalone: true, template: `<p class="mcpe-drawer-description"><ng-content /></p>` })
-export class SnxDrawerDescriptionComponent {}
-
-@Component({ selector: 'mcpe-drawer-body', standalone: true, template: `<div class="mcpe-drawer-body"><ng-content /></div>` })
-export class SnxDrawerBodyComponent {}

package/src/dropdown-menu.component.ts

@@ -1,62 +0,0 @@
-import { Component, input, signal, ElementRef, viewChild } from '@angular/core'
-
-export interface DropdownItem {
-  id: string
-  label: string
-  disabled?: boolean
-  type?: 'item' | 'separator' | 'label'
-  shortcut?: string
-}
-
-@Component({
-  selector: 'mcpe-dropdown-menu',
-  standalone: true,
-  template: `
-    <div class="relative inline-block" #container>
-      <div (click)="toggle()">
-        <ng-content select="[trigger]" />
-      </div>
-      @if (isOpen()) {
-        <div class="mcpe-dropdown-menu-content absolute top-full mt-1 right-0" role="menu">
-          @for (item of items(); track item.id) {
-            @if (item.type === 'separator') {
-              <div class="mcpe-dropdown-menu-separator" role="separator"></div>
-            } @else if (item.type === 'label') {
-              <div class="mcpe-dropdown-menu-label">{{ item.label }}</div>
-            } @else {
-              <div
-                role="menuitem"
-                [class]="'mcpe-dropdown-menu-item' + (item.disabled ? ' opacity-50 pointer-events-none' : '')"
-                (click)="selectItem(item)"
-                [attr.aria-disabled]="item.disabled"
-              >
-                <span class="flex-1">{{ item.label }}</span>
-                @if (item.shortcut) {
-                  <span class="mcpe-dropdown-menu-shortcut">{{ item.shortcut }}</span>
-                }
-              </div>
-            }
-          }
-        </div>
-      }
-    </div>
-  `,
-  host: { '(document:click)': 'onDocumentClick($event)' },
-})
-export class SnxDropdownMenuComponent {
-  items = input<DropdownItem[]>([])
-  isOpen = signal(false)
-  container = viewChild<ElementRef>('container')
-
-  toggle() { this.isOpen.update(v => !v) }
-  close() { this.isOpen.set(false) }
-
-  selectItem(item: DropdownItem) {
-    if (!item.disabled) this.isOpen.set(false)
-  }
-
-  onDocumentClick(event: MouseEvent) {
-    const el = this.container()?.nativeElement
-    if (el && !el.contains(event.target as Node)) this.isOpen.set(false)
-  }
-}

package/src/feedback.component.ts

@@ -1,71 +0,0 @@
-import { Component, input, computed } from '@angular/core'
-
-@Component({
-  selector: 'mcpe-feedback',
-  standalone: true,
-  template: `<div class="mcpe-feedback"><ng-content /></div>`,
-})
-export class SnxFeedbackComponent {}
-
-type FeedbackType = 'up' | 'down'
-
-@Component({
-  selector: 'mcpe-feedback-btn',
-  standalone: true,
-  template: `
-    <button [class]="classes()" type="button">
-      @if (feedbackType() === 'up') {
-        <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
-          <path d="M7 10v12"/><path d="M15 5.88 14 10h5.83a2 2 0 0 1 1.92 2.56l-2.33 8A2 2 0 0 1 17.5 22H4a2 2 0 0 1-2-2v-8a2 2 0 0 1 2-2h2.76a2 2 0 0 0 1.79-1.11L12 2a3.13 3.13 0 0 1 3 3.88Z"/>
-        </svg>
-      } @else {
-        <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
-          <path d="M17 14V2"/><path d="M9 18.12 10 14H4.17a2 2 0 0 1-1.92-2.56l2.33-8A2 2 0 0 1 6.5 2H20a2 2 0 0 1 2 2v8a2 2 0 0 1-2 2h-2.76a2 2 0 0 0-1.79 1.11L12 22a3.13 3.13 0 0 1-3-3.88Z"/>
-        </svg>
-      }
-    </button>
-  `,
-})
-export class SnxFeedbackButtonComponent {
-  feedbackType = input.required<FeedbackType>({ alias: 'type' })
-  selected = input(false)
-  class = input('')
-  classes = computed(() =>
-    [
-      'mcpe-feedback-btn',
-      `mcpe-feedback-btn-${this.feedbackType()}`,
-      this.selected() ? 'mcpe-feedback-btn-selected' : '',
-      this.class(),
-    ].filter(Boolean).join(' ')
-  )
-}
-
-@Component({
-  selector: 'mcpe-feedback-separator',
-  standalone: true,
-  template: `<span class="mcpe-feedback-separator"></span>`,
-})
-export class SnxFeedbackSeparatorComponent {}
-
-@Component({
-  selector: 'mcpe-feedback-form',
-  standalone: true,
-  template: `<div class="mcpe-feedback-form"><ng-content /></div>`,
-})
-export class SnxFeedbackFormComponent {}
-
-@Component({
-  selector: 'mcpe-feedback-input',
-  standalone: true,
-  template: `<input class="mcpe-feedback-input" [placeholder]="placeholder()" />`,
-})
-export class SnxFeedbackInputComponent {
-  placeholder = input('Add a comment...')
-}
-
-@Component({
-  selector: 'mcpe-feedback-submit',
-  standalone: true,
-  template: `<button class="mcpe-feedback-submit" type="button"><ng-content /></button>`,
-})
-export class SnxFeedbackSubmitComponent {}

package/src/index.ts

@@ -1,86 +0,0 @@
-// CSS-only components
-export { SnxButtonComponent } from './button.component'
-export { SnxBadgeComponent } from './badge.component'
-export {
-  SnxCardComponent,
-  SnxCardHeaderComponent,
-  SnxCardTitleComponent,
-  SnxCardDescriptionComponent,
-  SnxCardContentComponent,
-  SnxCardFooterComponent,
-} from './card.component'
-export { SnxInputComponent } from './input.component'
-export { SnxTextareaComponent } from './textarea.component'
-export { SnxAvatarComponent } from './avatar.component'
-export { SnxSeparatorComponent } from './separator.component'
-export { SnxSkeletonComponent } from './skeleton.component'
-
-// Interactive components
-export { SnxDialogComponent } from './dialog.component'
-export {
-  SnxTabsComponent,
-  SnxTabsListComponent,
-  SnxTabsTriggerComponent,
-  SnxTabsContentComponent,
-} from './tabs.component'
-export {
-  SnxAccordionComponent,
-  SnxAccordionItemComponent,
-  SnxAccordionTriggerComponent,
-  SnxAccordionContentComponent,
-} from './accordion.component'
-export { SnxSelectComponent } from './select.component'
-export { SnxTooltipDirective } from './tooltip.directive'
-export { SnxPopoverComponent } from './popover.component'
-
-// New components
-export { SnxToasterComponent, SnxToastService } from './toast.component'
-export { SnxDrawerComponent, SnxDrawerHeaderComponent, SnxDrawerFooterComponent, SnxDrawerTitleComponent, SnxDrawerDescriptionComponent, SnxDrawerBodyComponent } from './drawer.component'
-export { SnxDropdownMenuComponent } from './dropdown-menu.component'
-export { SnxSwitchComponent } from './switch.component'
-export { SnxProgressComponent } from './progress.component'
-export { SnxLoaderComponent } from './loader.component'
-export { SnxChipComponent, SnxChipsComponent } from './chips.component'
-export { SnxPasswordInputComponent } from './password-input.component'
-export { SnxCounterComponent } from './counter.component'
-export { SnxAlertComponent, SnxAlertTitleComponent, SnxAlertDescriptionComponent } from './alert.component'
-
-// AI components
-export {
-  SnxPromptInputComponent,
-  SnxPromptInputTextareaComponent,
-  SnxPromptInputFooterComponent,
-  SnxPromptInputActionsComponent,
-  SnxPromptInputCharCountComponent,
-  SnxPromptInputAttachmentsComponent,
-  SnxPromptInputAttachmentComponent,
-} from './prompt-input.component'
-export {
-  SnxChatBubbleComponent,
-  SnxChatBubbleAvatarComponent,
-  SnxChatBubbleContentComponent,
-  SnxChatBubbleTimestampComponent,
-  SnxChatBubbleTypingComponent,
-} from './chat-bubble.component'
-export { SnxAiBadgeComponent } from './ai-badge.component'
-export { SnxSuggestionChipsComponent, SnxSuggestionChipComponent } from './suggestion-chips.component'
-export { SnxSourceCardsComponent, SnxSourceCardComponent } from './source-card.component'
-export {
-  SnxStreamingTextComponent,
-  SnxStreamingTextFadeInComponent,
-  SnxStreamingTextWordComponent,
-  SnxStreamingTextLineComponent,
-  SnxStreamingTextSkeletonComponent,
-  SnxStreamingTextSkeletonLineComponent,
-} from './streaming-text.component'
-export {
-  SnxFeedbackComponent,
-  SnxFeedbackButtonComponent,
-  SnxFeedbackSeparatorComponent,
-  SnxFeedbackFormComponent,
-  SnxFeedbackInputComponent,
-  SnxFeedbackSubmitComponent,
-} from './feedback.component'
-
-// MCP components
-export * from './mcp'

package/src/input.component.ts

@@ -1,46 +0,0 @@
-import { Component, input, computed, output, forwardRef } from '@angular/core'
-import { ControlValueAccessor, NG_VALUE_ACCESSOR } from '@angular/forms'
-
-@Component({
-  selector: 'mcpe-input',
-  standalone: true,
-  template: `
-    <input
-      [class]="classes()"
-      [type]="type()"
-      [placeholder]="placeholder()"
-      [disabled]="disabled()"
-      [value]="value()"
-      (input)="onInput($event)"
-      (blur)="onTouched()"
-    />
-  `,
-  providers: [
-    {
-      provide: NG_VALUE_ACCESSOR,
-      useExisting: forwardRef(() => SnxInputComponent),
-      multi: true,
-    },
-  ],
-})
-export class SnxInputComponent implements ControlValueAccessor {
-  type = input<string>('text')
-  placeholder = input('')
-  disabled = input(false)
-  value = input('')
-  class = input('')
-
-  classes = computed(() => ['mcpe-input', this.class()].filter(Boolean).join(' '))
-
-  private onChange: (value: string) => void = () => {}
-  onTouched: () => void = () => {}
-
-  onInput(event: Event) {
-    const value = (event.target as HTMLInputElement).value
-    this.onChange(value)
-  }
-
-  writeValue(value: string): void {}
-  registerOnChange(fn: (value: string) => void): void { this.onChange = fn }
-  registerOnTouched(fn: () => void): void { this.onTouched = fn }
-}

package/src/loader.component.ts

@@ -1,12 +0,0 @@
-import { Component, input, computed } from '@angular/core'
-
-@Component({
-  selector: 'mcpe-loader',
-  standalone: true,
-  template: `<div [class]="classes()" role="status" aria-label="Loading"><span class="sr-only">Loading...</span></div>`,
-})
-export class SnxLoaderComponent {
-  size = input<'sm' | 'md' | 'lg' | 'xl'>('md')
-  variant = input<'primary' | 'muted'>('primary')
-  classes = computed(() => `mcpe-loader mcpe-loader-${this.size()} mcpe-loader-${this.variant()}`)
-}

package/src/mcp/index.ts

@@ -1,9 +0,0 @@
-export { McpeMcpServerStatusComponent } from './mcp-server-status.component'
-export type { McpConnectionStatus } from './mcp-server-status.component'
-export { McpeMcpToolCallComponent } from './mcp-tool-call.component'
-export { McpeMcpToolFormComponent } from './mcp-tool-form.component'
-export { McpeMcpConsentDialogComponent } from './mcp-consent-dialog.component'
-export { McpeMcpScopeInspectorComponent } from './mcp-scope-inspector.component'
-export { McpeMcpResourceBrowserComponent } from './mcp-resource-browser.component'
-export type { McpResource } from './mcp-resource-browser.component'
-export { McpeMcpAppFrameComponent } from './mcp-app-frame.component'

package/src/mcp/mcp-app-frame.component.ts

@@ -1,60 +0,0 @@
-import { Component, input, output, effect, computed, ElementRef, viewChild, OnDestroy } from '@angular/core'
-import { cn, createAppBridge } from '@mcp-elements/core'
-import type { AppMessageEnvelope } from '@mcp-elements/core'
-
-@Component({
-  selector: 'mcpe-mcp-app-frame',
-  standalone: true,
-  template: `
-    <div [class]="classes()">
-      <iframe
-        #frame
-        [src]="src()"
-        [sandbox]="sandbox()"
-        [style.height.px]="height()"
-        title="MCP App"
-        aria-label="MCP App frame"
-        style="display:block;width:100%;border:none"
-      ></iframe>
-    </div>
-  `,
-})
-export class McpeMcpAppFrameComponent implements OnDestroy {
-  src = input.required<string>()
-  height = input(480)
-  sandbox = input('allow-scripts allow-same-origin')
-  class = input('')
-  onMessage = output<AppMessageEnvelope>()
-
-  frame = viewChild<ElementRef<HTMLIFrameElement>>('frame')
-
-  private _unsub: (() => void) | undefined
-  private _removeListener: (() => void) | undefined
-
-  constructor() {
-    effect(() => {
-      this._cleanup()
-      const bridge = createAppBridge({
-        postMessage: (env: AppMessageEnvelope) => {
-          this.frame()?.nativeElement?.contentWindow?.postMessage(env, '*')
-        },
-      })
-      const unsub = bridge.onMessage((env: AppMessageEnvelope) => this.onMessage.emit(env))
-      const handler = (e: MessageEvent) => bridge.receive(e.data)
-      window.addEventListener('message', handler)
-      this._unsub = unsub
-      this._removeListener = () => window.removeEventListener('message', handler)
-    })
-  }
-
-  private _cleanup() {
-    this._unsub?.()
-    this._removeListener?.()
-    this._unsub = undefined
-    this._removeListener = undefined
-  }
-
-  ngOnDestroy() { this._cleanup() }
-
-  classes = computed(() => cn('mcpe-mcp-app-frame', this.class()))
-}

package/src/mcp/mcp-consent-dialog.component.ts

@@ -1,63 +0,0 @@
-import { Component, input, output, computed } from '@angular/core'
-import { CommonModule } from '@angular/common'
-import { parseScopes } from '@mcp-elements/core'
-
-@Component({
-  selector: 'mcpe-mcp-consent-dialog',
-  standalone: true,
-  imports: [CommonModule],
-  template: `
-    @if (open()) {
-      <div class="mcpe-dialog-overlay" (click)="deny()"></div>
-      <div class="mcpe-dialog-content" role="dialog" aria-modal="true" [attr.aria-label]="'Allow ' + serverName() + '?'">
-        <!-- Server info -->
-        <div class="mcpe-mcp-consent-dialog-server">
-          <div class="mcpe-mcp-consent-dialog-icon" aria-hidden="true">
-            @if (serverIcon()) {
-              <img [src]="serverIcon()" alt="" class="h-full w-full object-cover" />
-            } @else {
-              {{ serverName()[0]?.toUpperCase() ?? '?' }}
-            }
-          </div>
-          <div>
-            <p class="mcpe-mcp-consent-dialog-server-name">{{ serverName() }}</p>
-            <p class="mcpe-mcp-consent-dialog-server-meta">is requesting access to</p>
-          </div>
-        </div>
-        <!-- Scopes -->
-        <div class="mcpe-mcp-consent-dialog-scopes" role="list" aria-label="Requested permissions">
-          @for (s of parsedScopes(); track s.raw) {
-            <div class="mcpe-mcp-consent-dialog-scope-item" role="listitem">
-              <div class="flex-1 min-w-0">
-                <p class="mcpe-mcp-consent-dialog-scope-resource">{{ s.resource }}</p>
-                <div class="mcpe-mcp-consent-dialog-scope-perms">
-                  @for (p of s.permissions; track p) {
-                    <span class="mcpe-mcp-consent-dialog-scope-perm">{{ p }}</span>
-                  }
-                </div>
-              </div>
-            </div>
-          }
-        </div>
-        <!-- Actions -->
-        <div class="mcpe-mcp-consent-dialog-actions">
-          <button class="mcpe-btn mcpe-btn-outline flex-1" (click)="deny()">Deny</button>
-          <button class="mcpe-btn mcpe-btn-primary flex-1" (click)="approve()">Allow</button>
-        </div>
-      </div>
-    }
-  `,
-})
-export class McpeMcpConsentDialogComponent {
-  open = input.required<boolean>()
-  serverName = input.required<string>()
-  serverIcon = input<string>()
-  scopes = input<string[]>([])
-  onApprove = output<void>()
-  onDeny = output<void>()
-
-  parsedScopes = computed(() => parseScopes(this.scopes().join(' ')))
-
-  approve() { this.onApprove.emit() }
-  deny() { this.onDeny.emit() }
-}