@mseep/claudian 2.0.25

package/src/shared/components/SlashCommandDropdown.ts

@@ -0,0 +1,421 @@
+import { getBuiltInCommandsForDropdown } from '../../core/commands/builtInCommands';
+import type { ProviderCommandDropdownConfig } from '../../core/providers/commands/ProviderCommandCatalog';
+import type { ProviderCommandEntry } from '../../core/providers/commands/ProviderCommandEntry';
+import type { SlashCommand } from '../../core/types';
+import { normalizeArgumentHint } from '../../utils/slashCommand';
+
+interface DropdownItem {
+  name: string;
+  description?: string;
+  argumentHint?: string;
+  content: string;
+  displayPrefix: string;
+  insertPrefix: string;
+  isBuiltIn: boolean;
+  slashCommand?: SlashCommand;
+  providerEntry?: ProviderCommandEntry;
+}
+
+export interface SlashCommandDropdownCallbacks {
+  onSelect: (command: SlashCommand) => void;
+  onHide: () => void;
+}
+
+export interface SlashCommandDropdownOptions {
+  fixed?: boolean;
+  hiddenCommands?: Set<string>;
+  providerConfig?: ProviderCommandDropdownConfig;
+  getProviderEntries?: () => Promise<ProviderCommandEntry[]>;
+}
+
+export class SlashCommandDropdown {
+  private containerEl: HTMLElement;
+  private dropdownEl: HTMLElement | null = null;
+  private inputEl: HTMLTextAreaElement | HTMLInputElement;
+  private callbacks: SlashCommandDropdownCallbacks;
+  private enabled = true;
+  private onInput: () => void;
+  private triggerStartIndex = -1;
+  private activeTriggerChar = '/';
+  private selectedIndex = 0;
+  private filteredItems: DropdownItem[] = [];
+  private isFixed: boolean;
+  private hiddenCommands: Set<string>;
+
+  private providerConfig: ProviderCommandDropdownConfig | null;
+  private getProviderEntries: (() => Promise<ProviderCommandEntry[]>) | null;
+  private cachedProviderEntries: ProviderCommandEntry[] = [];
+  private providerEntriesFetched = false;
+
+  private requestId = 0;
+
+  constructor(
+    containerEl: HTMLElement,
+    inputEl: HTMLTextAreaElement | HTMLInputElement,
+    callbacks: SlashCommandDropdownCallbacks,
+    options: SlashCommandDropdownOptions = {}
+  ) {
+    this.containerEl = containerEl;
+    this.inputEl = inputEl;
+    this.callbacks = callbacks;
+    this.isFixed = options.fixed ?? false;
+    this.hiddenCommands = options.hiddenCommands ?? new Set();
+    this.providerConfig = options.providerConfig ?? null;
+    this.getProviderEntries = options.getProviderEntries ?? null;
+
+    this.onInput = () => this.handleInputChange();
+    this.inputEl.addEventListener('input', this.onInput);
+  }
+
+  setEnabled(enabled: boolean): void {
+    this.enabled = enabled;
+    if (!enabled) {
+      this.hide();
+    }
+  }
+
+  setHiddenCommands(commands: Set<string>): void {
+    this.hiddenCommands = commands;
+  }
+
+  setProviderCatalog(
+    config: ProviderCommandDropdownConfig,
+    getEntries: () => Promise<ProviderCommandEntry[]>,
+  ): void {
+    this.providerConfig = config;
+    this.getProviderEntries = getEntries;
+    this.cachedProviderEntries = [];
+    this.providerEntriesFetched = false;
+    this.requestId = 0;
+  }
+
+  handleInputChange(): void {
+    if (!this.enabled) return;
+
+    const text = this.getInputValue();
+    const cursorPos = this.getCursorPosition();
+    const textBeforeCursor = text.substring(0, cursorPos);
+    const triggerChars = this.providerConfig?.triggerChars ?? ['/'];
+
+    // Scan backward from cursor for the nearest valid trigger char.
+    // Valid trigger: at position 0, or preceded by whitespace.
+    let triggerIndex = -1;
+    let triggerChar = '';
+
+    for (let i = cursorPos - 1; i >= 0; i--) {
+      const ch = textBeforeCursor.charAt(i);
+      if (/\s/.test(ch)) break;
+      if (triggerChars.includes(ch)) {
+        if (i === 0 || /\s/.test(textBeforeCursor.charAt(i - 1))) {
+          triggerIndex = i;
+          triggerChar = ch;
+        }
+        break;
+      }
+    }
+
+    if (triggerIndex === -1) {
+      this.hide();
+      return;
+    }
+
+    const searchText = textBeforeCursor.substring(triggerIndex + 1);
+
+    if (/\s/.test(searchText)) {
+      this.hide();
+      return;
+    }
+
+    this.triggerStartIndex = triggerIndex;
+    this.activeTriggerChar = triggerChar;
+    const isAtPosition0 = triggerIndex === 0;
+    void this.showDropdown(searchText, isAtPosition0);
+  }
+
+  handleKeydown(e: KeyboardEvent): boolean {
+    if (!this.enabled || !this.isVisible()) return false;
+
+    switch (e.key) {
+      case 'ArrowDown':
+        e.preventDefault();
+        this.navigate(1);
+        return true;
+      case 'ArrowUp':
+        e.preventDefault();
+        this.navigate(-1);
+        return true;
+      case 'Enter':
+      case 'Tab':
+        if (this.filteredItems.length > 0) {
+          e.preventDefault();
+          this.selectItem();
+          return true;
+        }
+        return false;
+      case 'Escape':
+        e.preventDefault();
+        this.hide();
+        return true;
+    }
+    return false;
+  }
+
+  isVisible(): boolean {
+    return this.dropdownEl?.hasClass('visible') ?? false;
+  }
+
+  hide(): void {
+    if (this.dropdownEl) {
+      this.dropdownEl.removeClass('visible');
+    }
+    this.triggerStartIndex = -1;
+    this.callbacks.onHide();
+  }
+
+  destroy(): void {
+    this.inputEl.removeEventListener('input', this.onInput);
+    if (this.dropdownEl) {
+      this.dropdownEl.remove();
+      this.dropdownEl = null;
+    }
+  }
+
+  resetSdkSkillsCache(): void {
+    this.cachedProviderEntries = [];
+    this.providerEntriesFetched = false;
+    this.requestId = 0;
+  }
+
+  private getInputValue(): string {
+    return this.inputEl.value;
+  }
+
+  private getCursorPosition(): number {
+    return this.inputEl.selectionStart || 0;
+  }
+
+  private setInputValue(value: string): void {
+    this.inputEl.value = value;
+  }
+
+  private setCursorPosition(pos: number): void {
+    this.inputEl.selectionStart = pos;
+    this.inputEl.selectionEnd = pos;
+  }
+
+  private async showDropdown(searchText: string, isAtPosition0 = true): Promise<void> {
+    const currentRequest = ++this.requestId;
+    const searchLower = searchText.toLowerCase();
+
+    await this.fetchProviderEntries(currentRequest);
+
+    if (currentRequest !== this.requestId) return;
+
+    const includeBuiltIns = isAtPosition0 && this.activeTriggerChar === '/';
+    const allItems = this.buildItemList(includeBuiltIns);
+
+    this.filteredItems = allItems
+      .filter(item =>
+        item.name.toLowerCase().includes(searchLower) ||
+        item.description?.toLowerCase().includes(searchLower)
+      )
+      .sort((a, b) => a.name.localeCompare(b.name));
+
+    if (currentRequest !== this.requestId) return;
+
+    if (searchText.length > 0 && this.filteredItems.length === 0) {
+      this.hide();
+      return;
+    }
+
+    this.selectedIndex = 0;
+    this.render();
+  }
+
+  private async fetchProviderEntries(currentRequest: number): Promise<void> {
+    if (this.providerEntriesFetched || !this.getProviderEntries) return;
+
+    try {
+      const entries = await this.getProviderEntries();
+      if (currentRequest !== this.requestId) return;
+      if (entries.length > 0) {
+        this.cachedProviderEntries = entries;
+        this.providerEntriesFetched = true;
+      }
+    } catch {
+      if (currentRequest !== this.requestId) return;
+    }
+  }
+
+  private buildItemList(includeBuiltIns: boolean): DropdownItem[] {
+    const seenNames = new Set<string>();
+    const items: DropdownItem[] = [];
+
+    if (includeBuiltIns) {
+      const builtIns = getBuiltInCommandsForDropdown(this.providerConfig?.providerId);
+      for (const cmd of builtIns) {
+        const nameLower = cmd.name.toLowerCase();
+        if (!seenNames.has(nameLower)) {
+          seenNames.add(nameLower);
+          items.push({
+            name: cmd.name,
+            description: cmd.description,
+            argumentHint: cmd.argumentHint,
+            content: cmd.content,
+            displayPrefix: '/',
+            insertPrefix: '/',
+            isBuiltIn: true,
+            slashCommand: cmd,
+          });
+        }
+      }
+    }
+
+    for (const entry of this.cachedProviderEntries) {
+      const nameLower = entry.name.toLowerCase();
+      if (seenNames.has(nameLower) || this.hiddenCommands.has(nameLower)) {
+        continue;
+      }
+      seenNames.add(nameLower);
+      items.push({
+        name: entry.name,
+        description: entry.description,
+        argumentHint: entry.argumentHint,
+        content: entry.content,
+        displayPrefix: entry.displayPrefix,
+        insertPrefix: entry.insertPrefix,
+        isBuiltIn: false,
+        providerEntry: entry,
+        slashCommand: {
+          id: entry.id,
+          name: entry.name,
+          description: entry.description,
+          content: entry.content,
+          argumentHint: entry.argumentHint,
+          allowedTools: entry.allowedTools,
+          model: entry.model,
+          source: entry.source,
+          kind: entry.kind,
+          disableModelInvocation: entry.disableModelInvocation,
+          userInvocable: entry.userInvocable,
+          context: entry.context,
+          agent: entry.agent,
+          hooks: entry.hooks,
+        },
+      });
+    }
+
+    return items;
+  }
+
+  private render(): void {
+    if (!this.dropdownEl) {
+      this.dropdownEl = this.createDropdownElement();
+    }
+
+    this.dropdownEl.empty();
+
+    if (this.filteredItems.length === 0) {
+      const emptyEl = this.dropdownEl.createDiv({ cls: 'claudian-slash-empty' });
+      emptyEl.setText('No matching commands');
+    } else {
+      for (let i = 0; i < this.filteredItems.length; i++) {
+        const item = this.filteredItems[i];
+        const itemEl = this.dropdownEl.createDiv({ cls: 'claudian-slash-item' });
+
+        if (i === this.selectedIndex) {
+          itemEl.addClass('selected');
+        }
+
+        const nameEl = itemEl.createSpan({ cls: 'claudian-slash-name' });
+        nameEl.setText(`${item.displayPrefix}${item.name}`);
+
+        if (item.argumentHint) {
+          const hintEl = itemEl.createSpan({ cls: 'claudian-slash-hint' });
+          hintEl.setText(normalizeArgumentHint(item.argumentHint));
+        }
+
+        if (item.description) {
+          const descEl = itemEl.createDiv({ cls: 'claudian-slash-desc' });
+          descEl.setText(item.description);
+        }
+
+        itemEl.addEventListener('click', () => {
+          this.selectedIndex = i;
+          this.selectItem();
+        });
+
+        itemEl.addEventListener('mouseenter', () => {
+          this.selectedIndex = i;
+          this.updateSelection();
+        });
+      }
+    }
+
+    this.dropdownEl.addClass('visible');
+
+    if (this.isFixed) {
+      this.positionFixed();
+    }
+  }
+
+  private createDropdownElement(): HTMLElement {
+    if (this.isFixed) {
+      return this.containerEl.createDiv({
+        cls: 'claudian-slash-dropdown claudian-slash-dropdown-fixed',
+      });
+    } else {
+      return this.containerEl.createDiv({ cls: 'claudian-slash-dropdown' });
+    }
+  }
+
+  private positionFixed(): void {
+    if (!this.dropdownEl || !this.isFixed) return;
+
+    const inputRect = this.inputEl.getBoundingClientRect();
+    this.dropdownEl.setCssProps({
+      '--claudian-fixed-dropdown-bottom': `${window.innerHeight - inputRect.top + 4}px`,
+      '--claudian-fixed-dropdown-left': `${inputRect.left}px`,
+      '--claudian-fixed-dropdown-width': `${Math.max(inputRect.width, 280)}px`,
+    });
+  }
+
+  private navigate(direction: number): void {
+    const maxIndex = this.filteredItems.length - 1;
+    this.selectedIndex = Math.max(0, Math.min(maxIndex, this.selectedIndex + direction));
+    this.updateSelection();
+  }
+
+  private updateSelection(): void {
+    const items = this.dropdownEl?.querySelectorAll('.claudian-slash-item');
+    items?.forEach((item, index) => {
+      if (index === this.selectedIndex) {
+        item.addClass('selected');
+        (item as HTMLElement).scrollIntoView({ block: 'nearest' });
+      } else {
+        item.removeClass('selected');
+      }
+    });
+  }
+
+  private selectItem(): void {
+    if (this.filteredItems.length === 0) return;
+
+    const selected = this.filteredItems[this.selectedIndex];
+    if (!selected) return;
+
+    const text = this.getInputValue();
+    const beforeTrigger = text.substring(0, this.triggerStartIndex);
+    const afterCursor = text.substring(this.getCursorPosition());
+    const replacement = `${selected.insertPrefix}${selected.name} `;
+
+    this.setInputValue(beforeTrigger + replacement + afterCursor);
+    this.setCursorPosition(beforeTrigger.length + replacement.length);
+
+    this.hide();
+    if (selected.slashCommand) {
+      this.callbacks.onSelect(selected.slashCommand);
+    }
+    this.inputEl.focus();
+  }
+}

package/src/shared/icons.ts

@@ -0,0 +1,180 @@
+import type { ProviderIconSvg, ProviderSvgChild } from '../core/providers/types';
+
+export const MCP_ICON_SVG = `<svg fill="currentColor" fill-rule="evenodd" height="1em" viewBox="0 0 24 24" width="1em" xmlns="http://www.w3.org/2000/svg"><title>MCP</title><path d="M15.688 2.343a2.588 2.588 0 00-3.61 0l-9.626 9.44a.863.863 0 01-1.203 0 .823.823 0 010-1.18l9.626-9.44a4.313 4.313 0 016.016 0 4.116 4.116 0 011.204 3.54 4.3 4.3 0 013.609 1.18l.05.05a4.115 4.115 0 010 5.9l-8.706 8.537a.274.274 0 000 .393l1.788 1.754a.823.823 0 010 1.18.863.863 0 01-1.203 0l-1.788-1.753a1.92 1.92 0 010-2.754l8.706-8.538a2.47 2.47 0 000-3.54l-.05-.049a2.588 2.588 0 00-3.607-.003l-7.172 7.034-.002.002-.098.097a.863.863 0 01-1.204 0 .823.823 0 010-1.18l7.273-7.133a2.47 2.47 0 00-.003-3.537z"></path><path d="M14.485 4.703a.823.823 0 000-1.18.863.863 0 00-1.204 0l-7.119 6.982a4.115 4.115 0 000 5.9 4.314 4.314 0 006.016 0l7.12-6.982a.823.823 0 000-1.18.863.863 0 00-1.204 0l-7.119 6.982a2.588 2.588 0 01-3.61 0 2.47 2.47 0 010-3.54l7.12-6.982z"></path></svg>`;
+
+export const CHECK_ICON_SVG = `<svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"><polyline points="20 6 9 17 4 12"></polyline></svg>`;
+
+const SVG_NS = 'http://www.w3.org/2000/svg';
+const MCP_ICON_PATHS = [
+  'M15.688 2.343a2.588 2.588 0 00-3.61 0l-9.626 9.44a.863.863 0 01-1.203 0 .823.823 0 010-1.18l9.626-9.44a4.313 4.313 0 016.016 0 4.116 4.116 0 011.204 3.54 4.3 4.3 0 013.609 1.18l.05.05a4.115 4.115 0 010 5.9l-8.706 8.537a.274.274 0 000 .393l1.788 1.754a.823.823 0 010 1.18.863.863 0 01-1.203 0l-1.788-1.753a1.92 1.92 0 010-2.754l8.706-8.538a2.47 2.47 0 000-3.54l-.05-.049a2.588 2.588 0 00-3.607-.003l-7.172 7.034-.002.002-.098.097a.863.863 0 01-1.204 0 .823.823 0 010-1.18l7.273-7.133a2.47 2.47 0 00-.003-3.537z',
+  'M14.485 4.703a.823.823 0 000-1.18.863.863 0 00-1.204 0l-7.119 6.982a4.115 4.115 0 000 5.9 4.314 4.314 0 006.016 0l7.12-6.982a.823.823 0 000-1.18.863.863 0 00-1.204 0l-7.119 6.982a2.588 2.588 0 01-3.61 0 2.47 2.47 0 010-3.54l7.12-6.982z',
+];
+
+function createSvgElement(ownerDocument: Document, tagName: string): SVGElement {
+  return ownerDocument.createElementNS(SVG_NS, tagName);
+}
+
+export function appendMcpIcon(container: HTMLElement): void {
+  container.empty();
+
+  const svg = createSvgElement(container.ownerDocument, 'svg');
+  svg.setAttribute('fill', 'currentColor');
+  svg.setAttribute('fill-rule', 'evenodd');
+  svg.setAttribute('height', '1em');
+  svg.setAttribute('viewBox', '0 0 24 24');
+  svg.setAttribute('width', '1em');
+
+  const title = createSvgElement(container.ownerDocument, 'title');
+  title.textContent = 'MCP';
+  svg.appendChild(title);
+
+  for (const pathData of MCP_ICON_PATHS) {
+    const path = createSvgElement(container.ownerDocument, 'path');
+    path.setAttribute('d', pathData);
+    svg.appendChild(path);
+  }
+
+  container.appendChild(svg);
+}
+
+export function appendCheckIcon(container: HTMLElement): void {
+  container.empty();
+
+  const svg = createSvgElement(container.ownerDocument, 'svg');
+  svg.setAttribute('width', '12');
+  svg.setAttribute('height', '12');
+  svg.setAttribute('viewBox', '0 0 24 24');
+  svg.setAttribute('fill', 'none');
+  svg.setAttribute('stroke', 'currentColor');
+  svg.setAttribute('stroke-width', '3');
+  svg.setAttribute('stroke-linecap', 'round');
+  svg.setAttribute('stroke-linejoin', 'round');
+
+  const polyline = createSvgElement(container.ownerDocument, 'polyline');
+  polyline.setAttribute('points', '20 6 9 17 4 12');
+  svg.appendChild(polyline);
+
+  container.appendChild(svg);
+}
+
+export const OPENAI_PROVIDER_ICON: ProviderIconSvg = {
+  viewBox: '-1 -.1 949.1 959.8',
+  path: 'm925.8 456.3c10.4 23.2 17 48 19.7 73.3 2.6 25.3 1.3 50.9-4.1 75.8-5.3 24.9-14.5 48.8-27.3 70.8-8.4 14.7-18.3 28.5-29.7 41.2-11.3 12.6-23.9 24-37.6 34-13.8 10-28.5 18.4-44.1 25.3-15.5 6.8-31.7 12-48.3 15.4-7.8 24.2-19.4 47.1-34.4 67.7-14.9 20.6-33 38.7-53.6 53.6-20.6 15-43.4 26.6-67.6 34.4-24.2 7.9-49.5 11.8-75 11.8-16.9.1-33.9-1.7-50.5-5.1-16.5-3.5-32.7-8.8-48.2-15.7s-30.2-15.5-43.9-25.5c-13.6-10-26.2-21.5-37.4-34.2-25 5.4-50.6 6.7-75.9 4.1-25.3-2.7-50.1-9.3-73.4-19.7-23.2-10.3-44.7-24.3-63.6-41.4s-35-37.1-47.7-59.1c-8.5-14.7-15.5-30.2-20.8-46.3s-8.8-32.7-10.6-49.6c-1.8-16.8-1.7-33.8.1-50.7 1.8-16.8 5.5-33.4 10.8-49.5-17-18.9-31-40.4-41.4-63.6-10.3-23.3-17-48-19.6-73.3-2.7-25.3-1.3-50.9 4-75.8s14.5-48.8 27.3-70.8c8.4-14.7 18.3-28.6 29.6-41.2s24-24 37.7-34 28.5-18.5 44-25.3c15.6-6.9 31.8-12 48.4-15.4 7.8-24.3 19.4-47.1 34.3-67.7 15-20.6 33.1-38.7 53.7-53.7 20.6-14.9 43.4-26.5 67.6-34.4 24.2-7.8 49.5-11.8 75-11.7 16.9-.1 33.9 1.6 50.5 5.1s32.8 8.7 48.3 15.6c15.5 7 30.2 15.5 43.9 25.5 13.7 10.1 26.3 21.5 37.5 34.2 24.9-5.3 50.5-6.6 75.8-4s50 9.3 73.3 19.6c23.2 10.4 44.7 24.3 63.6 41.4 18.9 17 35 36.9 47.7 59 8.5 14.6 15.5 30.1 20.8 46.3 5.3 16.1 8.9 32.7 10.6 49.6 1.8 16.9 1.8 33.9-.1 50.8-1.8 16.9-5.5 33.5-10.8 49.6 17.1 18.9 31 40.3 41.4 63.6zm-333.2 426.9c21.8-9 41.6-22.3 58.3-39s30-36.5 39-58.4c9-21.8 13.7-45.2 13.7-68.8v-223q-.1-.3-.2-.7-.1-.3-.3-.6-.2-.3-.5-.5-.3-.3-.6-.4l-80.7-46.6v269.4c0 2.7-.4 5.5-1.1 8.1-.7 2.7-1.7 5.2-3.1 7.6s-3 4.6-5 6.5a32.1 32.1 0 0 1-6.5 5l-191.1 110.3c-1.6 1-4.3 2.4-5.7 3.2 7.9 6.7 16.5 12.6 25.5 17.8 9.1 5.2 18.5 9.6 28.3 13.2 9.8 3.5 19.9 6.2 30.1 8 10.3 1.8 20.7 2.7 31.1 2.7 23.6 0 47-4.7 68.8-13.8zm-455.1-151.4c11.9 20.5 27.6 38.3 46.3 52.7 18.8 14.4 40.1 24.9 62.9 31s46.6 7.7 70 4.6 45.9-10.7 66.4-22.5l193.2-111.5.5-.5q.2-.2.3-.6.2-.3.3-.6v-94l-233.2 134.9c-2.4 1.4-4.9 2.4-7.5 3.2-2.7.7-5.4 1-8.2 1-2.7 0-5.4-.3-8.1-1-2.6-.8-5.2-1.8-7.6-3.2l-191.1-110.4c-1.7-1-4.2-2.5-5.6-3.4-1.8 10.3-2.7 20.7-2.7 31.1s1 20.8 2.8 31.1c1.8 10.2 4.6 20.3 8.1 30.1 3.6 9.8 8 19.2 13.2 28.2zm-50.2-417c-11.8 20.5-19.4 43.1-22.5 66.5s-1.5 47.1 4.6 70c6.1 22.8 16.6 44.1 31 62.9 14.4 18.7 32.3 34.4 52.7 46.2l193.1 111.6q.3.1.7.2h.7q.4 0 .7-.2.3-.1.6-.3l81-46.8-233.2-134.6c-2.3-1.4-4.5-3.1-6.5-5a32.1 32.1 0 0 1-5-6.5c-1.3-2.4-2.4-4.9-3.1-7.6-.7-2.6-1.1-5.3-1-8.1v-227.1c-9.8 3.6-19.3 8-28.3 13.2-9 5.3-17.5 11.3-25.5 18-7.9 6.7-15.3 14.1-22 22.1-6.7 7.9-12.6 16.5-17.8 25.5zm663.3 154.4c2.4 1.4 4.6 3 6.6 5 1.9 1.9 3.6 4.1 5 6.5 1.3 2.4 2.4 5 3.1 7.6.6 2.7 1 5.4.9 8.2v227.1c32.1-11.8 60.1-32.5 80.8-59.7 20.8-27.2 33.3-59.7 36.2-93.7s-3.9-68.2-19.7-98.5-39.9-55.5-69.5-72.5l-193.1-111.6q-.3-.1-.7-.2h-.7q-.3.1-.7.2-.3.1-.6.3l-80.6 46.6 233.2 134.7zm80.5-121h-.1v.1zm-.1-.1c5.8-33.6 1.9-68.2-11.3-99.7-13.1-31.5-35-58.6-63-78.2-28-19.5-61-30.7-95.1-32.2-34.2-1.4-68 6.9-97.6 23.9l-193.1 111.5q-.3.2-.5.5l-.4.6q-.1.3-.2.7-.1.3-.1.7v93.2l233.2-134.7c2.4-1.4 5-2.4 7.6-3.2 2.7-.7 5.4-1 8.1-1 2.8 0 5.5.3 8.2 1 2.6.8 5.1 1.8 7.5 3.2l191.1 110.4c1.7 1 4.2 2.4 5.6 3.3zm-505.3-103.2c0-2.7.4-5.4 1.1-8.1.7-2.6 1.7-5.2 3.1-7.6 1.4-2.3 3-4.5 5-6.5 1.9-1.9 4.1-3.6 6.5-4.9l191.1-110.3c1.8-1.1 4.3-2.5 5.7-3.2-26.2-21.9-58.2-35.9-92.1-40.2-33.9-4.4-68.3 1-99.2 15.5-31 14.5-57.2 37.6-75.5 66.4-18.3 28.9-28 62.3-28 96.5v223q.1.4.2.7.1.3.3.6.2.3.5.6.2.2.6.4l80.7 46.6zm43.8 294.7 103.9 60 103.9-60v-119.9l-103.8-60-103.9 60z',
+};
+
+export const CLAUDE_PROVIDER_ICON: ProviderIconSvg = {
+  viewBox: '0 -.01 39.5 39.53',
+  path: 'm7.75 26.27 7.77-4.36.13-.38-.13-.21h-.38l-1.3-.08-4.44-.12-3.85-.16-3.73-.2-.94-.2-.88-1.16.09-.58.79-.53 1.13.1 2.5.17 3.75.26 2.72.16 4.03.42h.64l.09-.26-.22-.16-.17-.16-3.88-2.63-4.2-2.78-2.2-1.6-1.19-.81-.6-.76-.26-1.66 1.08-1.19 1.45.1.37.1 1.47 1.13 3.14 2.43 4.1 3.02.6.5.24-.17.03-.12-.27-.45-2.23-4.03-2.38-4.1-1.06-1.7-.28-1.02c-.1-.42-.17-.77-.17-1.2l1.23-1.67.68-.22 1.64.22.69.6 1.02 2.33 1.65 3.67 2.56 4.99.75 1.48.4 1.37.15.42h.26v-.24l.21-2.81.39-3.45.38-4.44.13-1.25.62-1.5 1.23-.81.96.46.79 1.13-.11.73-.47 3.05-.92 4.78-.6 3.2h.35l.4-.4 1.62-2.15 2.72-3.4 1.2-1.35 1.4-1.49.9-.71h1.7l1.25 1.86-.56 1.92-1.75 2.22-1.45 1.88-2.08 2.8-1.3 2.24.12.18.31-.03 4.7-1 2.54-.46 3.03-.52 1.37.64.15.65-.54 1.33-3.24.8-3.8.76-5.66 1.34-.07.05.08.1 2.55.24 1.09.06h2.67l4.97.37 1.3.86.78 1.05-.13.8-2 1.02-2.7-.64-6.3-1.5-2.16-.54h-.3v.18l1.8 1.76 3.3 2.98 4.13 3.84.21.95-.53.75-.56-.08-3.63-2.73-1.4-1.23-3.17-2.67h-.21v.28l.73 1.07 3.86 5.8.2 1.78-.28.58-1 .35-1.1-.2-2.26-3.17-2.33-3.57-1.88-3.2-.23.13-1.11 11.95-.52.61-1.2.46-1-.76-.53-1.23.53-2.43.64-3.17.52-2.52.47-3.13.28-1.04-.02-.07-.23.03-2.36 3.24-3.59 4.85-2.84 3.04-.68.27-1.18-.61.11-1.09.66-.97 3.93-5 2.37-3.1 1.53-1.79-.01-.26h-.09l-10.44 6.78-1.86.24-.8-.75.1-1.23.38-.4 3.14-2.16z',
+};
+
+export const OPENCODE_PROVIDER_ICON: ProviderIconSvg = {
+  kind: 'composite',
+  viewBox: '0 0 300 300',
+  children: [
+    {
+      tag: 'g',
+      attributes: {
+        class: 'claudian-provider-icon-variant claudian-provider-icon-variant--light',
+        transform: 'translate(30 0)',
+      },
+      children: [
+        { tag: 'path', attributes: { d: 'M180 240H60V120H180V240Z', fill: '#CFCECD' } },
+        { tag: 'path', attributes: { d: 'M180 60H60V240H180V60ZM240 300H0V0H240V300Z', fill: '#211E1E' } },
+      ],
+    },
+    {
+      tag: 'g',
+      attributes: {
+        class: 'claudian-provider-icon-variant claudian-provider-icon-variant--dark',
+        transform: 'translate(30 0)',
+      },
+      children: [
+        { tag: 'path', attributes: { d: 'M180 240H60V120H180V240Z', fill: '#4B4646' } },
+        { tag: 'path', attributes: { d: 'M180 60H60V240H180V60ZM240 300H0V0H240V300Z', fill: '#F1ECEC' } },
+      ],
+    },
+  ],
+};
+
+export const PI_PROVIDER_ICON: ProviderIconSvg = {
+  kind: 'composite',
+  viewBox: '0 0 800 800',
+  children: [
+    {
+      tag: 'path',
+      attributes: {
+        d: 'M165.29 165.29H517.36V400H400V517.36H282.65V634.72H165.29ZM282.65 282.65V400H400V282.65Z',
+        fill: 'currentColor',
+        'fill-rule': 'evenodd',
+      },
+    },
+    {
+      tag: 'path',
+      attributes: {
+        d: 'M517.36 400H634.72V634.72H517.36Z',
+        fill: 'currentColor',
+      },
+    },
+  ],
+};
+
+export interface CreateProviderIconSvgOptions {
+  className?: string;
+  dataProvider?: string;
+  height?: number | string;
+  ownerDocument?: Document;
+  width?: number | string;
+}
+
+export function createProviderIconSvg(
+  icon: ProviderIconSvg,
+  options: CreateProviderIconSvgOptions = {},
+): SVGElement {
+  const ownerDocument = options.ownerDocument ?? window.document;
+  const svg = ownerDocument.createElementNS(SVG_NS, 'svg');
+  svg.setAttribute('viewBox', icon.viewBox);
+  svg.setAttribute('fill', 'none');
+  svg.setAttribute('aria-hidden', 'true');
+  svg.classList.add('claudian-provider-icon');
+
+  if (options.width !== undefined) {
+    svg.setAttribute('width', String(options.width));
+  }
+  if (options.height !== undefined) {
+    svg.setAttribute('height', String(options.height));
+  }
+  if (options.className) {
+    svg.classList.add(...options.className.split(/\s+/).filter(Boolean));
+  }
+  if (options.dataProvider) {
+    svg.setAttribute('data-provider', options.dataProvider);
+  }
+
+  if (icon.kind === 'composite') {
+    for (const child of icon.children) {
+      svg.appendChild(createProviderSvgChild(child, ownerDocument));
+    }
+    return svg;
+  }
+
+  const path = ownerDocument.createElementNS(SVG_NS, 'path');
+  path.setAttribute('d', icon.path);
+  path.setAttribute('fill', 'currentColor');
+  svg.appendChild(path);
+  return svg;
+}
+
+function createProviderSvgChild(child: ProviderSvgChild, ownerDocument: Document): SVGElement {
+  const element = ownerDocument.createElementNS(SVG_NS, child.tag);
+  for (const [name, value] of Object.entries(child.attributes)) {
+    element.setAttribute(name, value);
+  }
+
+  if (child.tag === 'g') {
+    for (const nestedChild of child.children) {
+      element.appendChild(createProviderSvgChild(nestedChild, ownerDocument));
+    }
+  }
+
+  return element;
+}