@mseep/claudian 2.0.25

package/src/providers/codex/ui/CodexSettingsTab.ts

@@ -0,0 +1,432 @@
+import * as fs from 'fs';
+import { Setting } from 'obsidian';
+
+import { ProviderSettingsCoordinator } from '../../../core/providers/ProviderSettingsCoordinator';
+import type { ProviderSettingsTabRenderer } from '../../../core/providers/types';
+import { renderEnvironmentSettingsSection } from '../../../features/settings/ui/EnvironmentSettingsSection';
+import { t } from '../../../i18n/i18n';
+import { getHostnameKey } from '../../../utils/env';
+import { expandHomePath } from '../../../utils/path';
+import { getCodexWorkspaceServices } from '../app/CodexWorkspaceServices';
+import { parseConfiguredCustomModelIds, resolveCodexModelSelection } from '../modelOptions';
+import { toCodexRuntimeModelId } from '../modelSelection';
+import { isWindowsStyleCliReference } from '../runtime/CodexBinaryLocator';
+import { getCodexProviderSettings, updateCodexProviderSettings } from '../settings';
+import { DEFAULT_CODEX_PRIMARY_MODEL } from '../types/models';
+import { CodexSkillSettings } from './CodexSkillSettings';
+import { CodexSubagentSettings } from './CodexSubagentSettings';
+
+export const codexSettingsTabRenderer: ProviderSettingsTabRenderer = {
+  render(container, context) {
+    const codexWorkspace = getCodexWorkspaceServices();
+    const settingsBag = context.plugin.settings as unknown as Record<string, unknown>;
+    const codexSettings = getCodexProviderSettings(settingsBag);
+    const hostnameKey = getHostnameKey();
+    const isWindowsHost = process.platform === 'win32';
+    let installationMethod = codexSettings.installationMethod;
+
+    const reconcileActiveCodexModelSelection = (): void => {
+      const activeProvider = settingsBag.settingsProvider;
+      if (activeProvider !== 'codex') {
+        return;
+      }
+
+      const currentModel = typeof settingsBag.model === 'string' ? settingsBag.model : '';
+      const nextModel = resolveCodexModelSelection(settingsBag, currentModel);
+      if (!nextModel || nextModel === currentModel) {
+        return;
+      }
+
+      settingsBag.model = nextModel;
+    };
+
+    // --- Setup ---
+
+    new Setting(container).setName(t('settings.setup')).setHeading();
+
+    new Setting(container)
+      .setName('Enable Codex provider')
+      .setDesc('When enabled, Codex models appear in the model selector for new conversations. Existing Codex sessions are preserved.')
+      .addToggle((toggle) =>
+        toggle
+          .setValue(codexSettings.enabled)
+          .onChange(async (value) => {
+            updateCodexProviderSettings(settingsBag, { enabled: value });
+            await context.plugin.saveSettings();
+            context.refreshModelSelectors();
+          })
+      );
+
+    if (isWindowsHost) {
+      new Setting(container)
+        .setName('Installation method')
+        .setDesc('How Claudian should launch Codex on Windows. Native Windows uses a Windows executable path. WSL launches the Linux CLI inside a selected distro.')
+        .addDropdown((dropdown) => {
+          dropdown
+            .addOption('native-windows', 'Native Windows')
+            .addOption('wsl', 'WSL')
+            .setValue(installationMethod)
+            .onChange(async (value) => {
+              installationMethod = value === 'wsl' ? 'wsl' : 'native-windows';
+              updateCodexProviderSettings(settingsBag, { installationMethod });
+              refreshInstallationMethodUI();
+              await context.plugin.saveSettings();
+            });
+        });
+    }
+
+    const getCliPathCopy = (): { desc: string; placeholder: string } => {
+      if (!isWindowsHost) {
+        return {
+          desc: 'Custom path to the local Codex CLI. Leave empty for auto-detection from PATH.',
+          placeholder: '/usr/local/bin/codex',
+        };
+      }
+
+      if (installationMethod === 'wsl') {
+        return {
+          desc: 'Linux-side Codex command or absolute path to run inside WSL. Leave empty for PATH lookup inside the selected distro.',
+          placeholder: 'codex',
+        };
+      }
+
+      return {
+        desc: 'Custom path to the local Codex CLI. Leave empty for auto-detection from PATH. Use the native Windows executable path, usually `codex.exe`.',
+        placeholder: 'C:\\Users\\you\\AppData\\Roaming\\npm\\codex.exe',
+      };
+    };
+
+    const shouldValidateCliPathAsFile = (): boolean => !isWindowsHost || installationMethod !== 'wsl';
+
+    const cliPathSetting = new Setting(container)
+      .setName('Codex CLI path')
+      .setDesc(getCliPathCopy().desc);
+
+    const validationEl = container.createDiv({
+      cls: 'claudian-cli-path-validation claudian-setting-validation claudian-setting-validation-error claudian-hidden',
+    });
+
+    const validatePath = (value: string): string | null => {
+      const trimmed = value.trim();
+      if (!trimmed) return null;
+
+      if (!shouldValidateCliPathAsFile()) {
+        if (isWindowsStyleCliReference(trimmed)) {
+          return 'WSL mode expects a Linux command or Linux absolute path, not a Windows executable path.';
+        }
+        return null;
+      }
+
+      const expandedPath = expandHomePath(trimmed);
+
+      if (!fs.existsSync(expandedPath)) {
+        return t('settings.cliPath.validation.notExist');
+      }
+      const stat = fs.statSync(expandedPath);
+      if (!stat.isFile()) {
+        return t('settings.cliPath.validation.isDirectory');
+      }
+      return null;
+    };
+
+    const updateCliPathValidation = (value: string, inputEl?: HTMLInputElement): boolean => {
+      const error = validatePath(value);
+      if (error) {
+        validationEl.setText(error);
+        validationEl.toggleClass('claudian-hidden', false);
+        if (inputEl) {
+          inputEl.toggleClass('claudian-input-error', true);
+        }
+        return false;
+      }
+
+      validationEl.toggleClass('claudian-hidden', true);
+      if (inputEl) {
+        inputEl.toggleClass('claudian-input-error', false);
+      }
+      return true;
+    };
+
+    const cliPathsByHost = { ...codexSettings.cliPathsByHost };
+    let cliPathInputEl: HTMLInputElement | null = null;
+    let wslDistroSettingEl: HTMLElement | null = null;
+    let wslDistroInputEl: HTMLInputElement | null = null;
+
+    const refreshInstallationMethodUI = (): void => {
+      const cliCopy = getCliPathCopy();
+      cliPathSetting.setDesc(cliCopy.desc);
+      if (cliPathInputEl) {
+        cliPathInputEl.placeholder = cliCopy.placeholder;
+        updateCliPathValidation(cliPathInputEl.value, cliPathInputEl);
+      }
+      if (wslDistroSettingEl) {
+        wslDistroSettingEl.toggleClass('claudian-hidden', installationMethod !== 'wsl');
+      }
+      if (wslDistroInputEl) {
+        wslDistroInputEl.disabled = installationMethod !== 'wsl';
+      }
+    };
+
+    const persistCliPath = async (value: string): Promise<boolean> => {
+      const isValid = updateCliPathValidation(value, cliPathInputEl ?? undefined);
+      if (!isValid) {
+        return false;
+      }
+
+      const trimmed = value.trim();
+      if (trimmed) {
+        cliPathsByHost[hostnameKey] = trimmed;
+      } else {
+        delete cliPathsByHost[hostnameKey];
+      }
+
+      updateCodexProviderSettings(settingsBag, { cliPathsByHost: { ...cliPathsByHost } });
+      await context.plugin.saveSettings();
+      const view = context.plugin.getView();
+      await view?.getTabManager()?.broadcastToAllTabs(
+        (service) => Promise.resolve(service.cleanup())
+      );
+      return true;
+    };
+
+    const currentValue = codexSettings.cliPathsByHost[hostnameKey] || '';
+
+    cliPathSetting.addText((text) => {
+      text
+        .setPlaceholder(getCliPathCopy().placeholder)
+        .setValue(currentValue)
+        .onChange(async (value) => {
+          await persistCliPath(value);
+        });
+      text.inputEl.addClass('claudian-settings-cli-path-input');
+      cliPathInputEl = text.inputEl;
+
+      updateCliPathValidation(currentValue, text.inputEl);
+    });
+
+    if (isWindowsHost) {
+      const wslDistroSetting = new Setting(container)
+        .setName('WSL distro override')
+        .setDesc('Optional advanced override. Leave empty to infer the distro from a WSL workspace path when possible, otherwise use the default WSL distro.');
+
+      wslDistroSettingEl = wslDistroSetting.settingEl;
+      wslDistroSetting.addText((text) => {
+        text
+          .setPlaceholder('Ubuntu')
+          .setValue(codexSettings.wslDistroOverride)
+          .onChange(async (value) => {
+            updateCodexProviderSettings(settingsBag, { wslDistroOverride: value });
+            await context.plugin.saveSettings();
+          });
+
+        text.inputEl.addClass('claudian-settings-cli-path-input');
+        text.inputEl.disabled = installationMethod !== 'wsl';
+        wslDistroInputEl = text.inputEl;
+      });
+    }
+
+    refreshInstallationMethodUI();
+
+    // --- Safety ---
+
+    new Setting(container).setName(t('settings.safety')).setHeading();
+
+    new Setting(container)
+      .setName(t('settings.codexSafeMode.name'))
+      .setDesc(t('settings.codexSafeMode.desc'))
+      .addDropdown((dropdown) => {
+        dropdown
+          .addOption('workspace-write', 'Workspace write')
+          .addOption('read-only', 'Read only')
+          .setValue(codexSettings.safeMode)
+          .onChange(async (value) => {
+            updateCodexProviderSettings(
+              settingsBag,
+              { safeMode: value as 'workspace-write' | 'read-only' },
+            );
+            await context.plugin.saveSettings();
+          });
+      });
+
+    // --- Models ---
+
+    new Setting(container).setName(t('settings.models')).setHeading();
+
+    const SUMMARY_OPTIONS: { value: string; label: string }[] = [
+      { value: 'auto', label: 'Auto' },
+      { value: 'concise', label: 'Concise' },
+      { value: 'detailed', label: 'Detailed' },
+      { value: 'none', label: 'Off' },
+    ];
+
+    new Setting(container)
+      .setName('Custom models')
+      .setDesc('Append additional Codex model ids to the picker, one per line. `OPENAI_MODEL` still takes precedence when set.')
+      .addTextArea((text) => {
+        let pendingCustomModels = codexSettings.customModels;
+        let savedCustomModels = codexSettings.customModels;
+
+        const reconcileInactiveCodexProjection = (
+          previousCustomModels: string,
+        ): boolean => {
+          if (settingsBag.settingsProvider === 'codex') {
+            return false;
+          }
+
+          const savedProviderModel = (
+            settingsBag.savedProviderModel
+            && typeof settingsBag.savedProviderModel === 'object'
+          )
+            ? settingsBag.savedProviderModel as Record<string, unknown>
+            : {};
+          const currentSavedModel = typeof savedProviderModel.codex === 'string'
+            ? savedProviderModel.codex
+            : '';
+          if (!currentSavedModel) {
+            return false;
+          }
+
+          const previousCustomModelIds = new Set(parseConfiguredCustomModelIds(previousCustomModels));
+          if (!previousCustomModelIds.has(toCodexRuntimeModelId(currentSavedModel))) {
+            return false;
+          }
+
+          const nextSavedModel = resolveCodexModelSelection(settingsBag, currentSavedModel);
+          if (!nextSavedModel || nextSavedModel === currentSavedModel) {
+            return false;
+          }
+
+          settingsBag.savedProviderModel = {
+            ...savedProviderModel,
+            codex: nextSavedModel,
+          };
+          return true;
+        };
+
+        const commitCustomModels = async (): Promise<void> => {
+          const previousCustomModels = savedCustomModels;
+          const previousModel = typeof settingsBag.model === 'string' ? settingsBag.model : '';
+          const previousTitleModel = typeof settingsBag.titleGenerationModel === 'string'
+            ? settingsBag.titleGenerationModel
+            : '';
+
+          if (pendingCustomModels !== savedCustomModels) {
+            updateCodexProviderSettings(settingsBag, { customModels: pendingCustomModels });
+            savedCustomModels = pendingCustomModels;
+          }
+
+          reconcileActiveCodexModelSelection();
+          const didReconcileInactiveProjection = reconcileInactiveCodexProjection(previousCustomModels);
+          const didReconcileTitleModel = ProviderSettingsCoordinator
+            .reconcileTitleGenerationModelSelection(settingsBag);
+          const nextModel = typeof settingsBag.model === 'string' ? settingsBag.model : '';
+          const nextTitleModel = typeof settingsBag.titleGenerationModel === 'string'
+            ? settingsBag.titleGenerationModel
+            : '';
+          const didModelSelectionChange = previousModel !== nextModel;
+          const didCustomModelsChange = previousCustomModels !== savedCustomModels;
+
+          if (!didCustomModelsChange && !didModelSelectionChange && !didReconcileInactiveProjection
+            && !didReconcileTitleModel
+            && previousTitleModel === nextTitleModel) {
+            return;
+          }
+
+          await context.plugin.saveSettings();
+          context.refreshModelSelectors();
+        };
+
+        text
+          .setPlaceholder('gpt-5.4\ngpt-5.3-codex-spark')
+          .setValue(codexSettings.customModels)
+          .onChange((value) => {
+            pendingCustomModels = value;
+          });
+        text.inputEl.rows = 4;
+        text.inputEl.cols = 40;
+        text.inputEl.addEventListener('blur', () => {
+          void commitCustomModels();
+        });
+      });
+
+    new Setting(container)
+      .setName('Reasoning summary')
+      .setDesc('Show a summary of the model\'s reasoning process in the thinking block.')
+      .addDropdown((dropdown) => {
+        for (const opt of SUMMARY_OPTIONS) {
+          dropdown.addOption(opt.value, opt.label);
+        }
+        dropdown.setValue(codexSettings.reasoningSummary);
+        dropdown.onChange(async (value) => {
+          updateCodexProviderSettings(
+            settingsBag,
+            { reasoningSummary: value as 'auto' | 'concise' | 'detailed' | 'none' },
+          );
+          await context.plugin.saveSettings();
+        });
+      });
+
+    // --- Skills ---
+
+    const codexCatalog = codexWorkspace.commandCatalog;
+    if (codexCatalog) {
+      new Setting(container).setName('Codex skills').setHeading();
+
+      const skillsDesc = container.createDiv({ cls: 'claudian-sp-settings-desc' });
+      skillsDesc.createEl('p', {
+        cls: 'setting-item-description',
+        text: 'Manage vault-level Codex skills stored in .codex/skills/ or .agents/skills/. Home-level skills are excluded here.',
+      });
+
+      const skillsContainer = container.createDiv({ cls: 'claudian-slash-commands-container' });
+      new CodexSkillSettings(skillsContainer, codexCatalog, context.plugin.app);
+    }
+
+    context.renderHiddenProviderCommandSetting(container, 'codex', {
+      name: 'Hidden Skills',
+      desc: 'Hide specific Codex skills from the dropdown. Enter skill names without the leading $, one per line.',
+      placeholder: 'analyze\nexplain\nfix',
+    });
+
+    // --- Subagents ---
+
+    new Setting(container).setName('Codex subagents').setHeading();
+
+    const subagentDesc = container.createDiv({ cls: 'claudian-sp-settings-desc' });
+    subagentDesc.createEl('p', {
+      cls: 'setting-item-description',
+      text: 'Manage vault-level Codex subagents stored in .codex/agents/. Each TOML file defines one custom agent.',
+    });
+
+    const subagentContainer = container.createDiv({ cls: 'claudian-slash-commands-container' });
+    new CodexSubagentSettings(subagentContainer, codexWorkspace.subagentStorage, context.plugin.app, () => {
+      void codexWorkspace.refreshAgentMentions?.();
+    });
+
+    // --- MCP Servers ---
+
+    new Setting(container).setName(t('settings.mcpServers.name')).setHeading();
+    const mcpNotice = container.createDiv({ cls: 'claudian-mcp-settings-desc' });
+    const mcpDesc = mcpNotice.createEl('p', { cls: 'setting-item-description' });
+    mcpDesc.appendText('Codex manages MCP servers via its own CLI. Configure with ');
+    mcpDesc.createEl('code').appendText('codex mcp');
+    mcpDesc.appendText(' and they will be available in Claudian. ');
+    mcpDesc.createEl('a', {
+      text: 'Learn more',
+      href: 'https://developers.openai.com/codex/mcp',
+    });
+
+    // --- Environment ---
+
+    renderEnvironmentSettingsSection({
+      container,
+      plugin: context.plugin,
+      scope: 'provider:codex',
+      heading: t('settings.environment'),
+      name: 'Codex environment',
+      desc: 'Codex-owned runtime variables only. Use this for OPENAI_* and CODEX_* settings. If Codex auto-detection needs help, add its install directory to shared PATH instead of this provider section.',
+      placeholder: `OPENAI_API_KEY=your-key\nOPENAI_BASE_URL=https://api.openai.com/v1\nOPENAI_MODEL=${DEFAULT_CODEX_PRIMARY_MODEL}\nCODEX_SANDBOX=workspace-write`,
+      renderCustomContextLimits: (target) => context.renderCustomContextLimits(target, 'codex'),
+    });
+  },
+};

package/src/providers/codex/ui/CodexSkillSettings.ts

@@ -0,0 +1,275 @@
+import { type App, Modal, Notice, setIcon, Setting } from 'obsidian';
+
+import type { ProviderCommandCatalog } from '../../../core/providers/commands/ProviderCommandCatalog';
+import type { ProviderCommandEntry } from '../../../core/providers/commands/ProviderCommandEntry';
+import { validateCommandName } from '../../../utils/slashCommand';
+import {
+  CODEX_SKILL_ROOT_OPTIONS,
+  type CodexSkillRootId,
+  createCodexSkillPersistenceKey,
+  parseCodexSkillPersistenceKey,
+} from '../storage/CodexSkillStorage';
+
+export class CodexSkillModal extends Modal {
+  private existing: ProviderCommandEntry | null;
+  private onSave: (entry: ProviderCommandEntry) => Promise<void>;
+
+  private _nameInput!: HTMLInputElement;
+  private _descInput!: HTMLInputElement;
+  private _contentArea!: HTMLTextAreaElement;
+  private _selectedRootId: CodexSkillRootId;
+  private _triggerSave!: () => Promise<void>;
+
+  constructor(
+    app: App,
+    existing: ProviderCommandEntry | null,
+    onSave: (entry: ProviderCommandEntry) => Promise<void>
+  ) {
+    super(app);
+    this.existing = existing;
+    this.onSave = onSave;
+    this._selectedRootId = parseCodexSkillPersistenceKey(existing?.persistenceKey)?.rootId ?? 'vault-codex';
+  }
+
+  /** Exposed for unit tests only. */
+  getTestInputs() {
+    return {
+      nameInput: this._nameInput,
+      descInput: this._descInput,
+      contentArea: this._contentArea,
+      setDirectory: (rootId: CodexSkillRootId) => { this._selectedRootId = rootId; },
+      triggerSave: this._triggerSave,
+    };
+  }
+
+  onOpen() {
+    this.setTitle(this.existing ? 'Edit Codex Skill' : 'Add Codex Skill');
+    this.modalEl.addClass('claudian-sp-modal');
+
+    const { contentEl } = this;
+
+    new Setting(contentEl)
+      .setName('Directory')
+      .setDesc('Where to store the skill')
+      .addDropdown(dropdown => {
+        for (const opt of CODEX_SKILL_ROOT_OPTIONS) {
+          dropdown.addOption(opt.id, opt.label);
+        }
+        dropdown.setValue(this._selectedRootId);
+        dropdown.onChange(value => { this._selectedRootId = value as CodexSkillRootId; });
+      });
+
+    new Setting(contentEl)
+      .setName('Skill name')
+      .setDesc('The name used after $ (e.g., "analyze" for $analyze)')
+      .addText(text => {
+        this._nameInput = text.inputEl;
+        text.setValue(this.existing?.name || '')
+          .setPlaceholder('Analyze-code');
+      });
+
+    new Setting(contentEl)
+      .setName('Description')
+      .setDesc('Optional description shown in dropdown')
+      .addText(text => {
+        this._descInput = text.inputEl;
+        text.setValue(this.existing?.description || '');
+      });
+
+    new Setting(contentEl)
+      .setName('Instructions')
+      .setDesc('The skill instructions (SKILL.md content)');
+
+    const contentArea = contentEl.createEl('textarea', {
+      cls: 'claudian-sp-content-area',
+      attr: { rows: '10', placeholder: 'Analyze the code for...' },
+    });
+    contentArea.value = this.existing?.content || '';
+    this._contentArea = contentArea;
+
+    const doSave = async () => {
+      const name = this._nameInput.value.trim();
+      const nameError = validateCommandName(name);
+      if (nameError) {
+        new Notice(nameError);
+        return;
+      }
+
+      const content = this._contentArea.value;
+      if (!content.trim()) {
+        new Notice('Instructions are required');
+        return;
+      }
+
+      const entry: ProviderCommandEntry = {
+        id: this.existing?.id || `codex-skill-${name}`,
+        providerId: 'codex',
+        kind: 'skill',
+        name,
+        description: this._descInput.value.trim() || undefined,
+        content,
+        scope: 'vault',
+        source: 'user',
+        isEditable: true,
+        isDeletable: true,
+        displayPrefix: '$',
+        insertPrefix: '$',
+        persistenceKey: createCodexSkillPersistenceKey({
+          rootId: this._selectedRootId,
+          ...(this.existing?.name ? { currentName: this.existing.name } : {}),
+        }),
+      };
+
+      try {
+        await this.onSave(entry);
+      } catch {
+        new Notice('Failed to save Codex skill');
+        return;
+      }
+      this.close();
+    };
+    this._triggerSave = doSave;
+
+    const buttonContainer = contentEl.createDiv({ cls: 'claudian-sp-modal-buttons' });
+
+    const cancelBtn = buttonContainer.createEl('button', {
+      text: 'Cancel',
+      cls: 'claudian-cancel-btn',
+    });
+    cancelBtn.addEventListener('click', () => this.close());
+
+    const saveBtn = buttonContainer.createEl('button', {
+      text: 'Save',
+      cls: 'claudian-save-btn',
+    });
+    saveBtn.addEventListener('click', () => {
+      void doSave();
+    });
+  }
+
+  onClose() {
+    this.contentEl.empty();
+  }
+}
+
+export class CodexSkillSettings {
+  private containerEl: HTMLElement;
+  private catalog: ProviderCommandCatalog;
+  private entries: ProviderCommandEntry[] = [];
+  private app?: App;
+
+  constructor(containerEl: HTMLElement, catalog: ProviderCommandCatalog, app?: App) {
+    this.containerEl = containerEl;
+    this.catalog = catalog;
+    this.app = app;
+    void this.render();
+  }
+
+  async deleteEntry(entry: ProviderCommandEntry): Promise<void> {
+    await this.catalog.deleteVaultEntry(entry);
+    await this.render();
+  }
+
+  async refresh(): Promise<void> {
+    await this.catalog.refresh();
+    await this.render();
+  }
+
+  async render(): Promise<void> {
+    this.containerEl.empty();
+
+    try {
+      this.entries = await this.catalog.listVaultEntries();
+    } catch {
+      this.entries = [];
+    }
+
+    const headerEl = this.containerEl.createDiv({ cls: 'claudian-sp-header' });
+    headerEl.createSpan({ text: 'Codex Skills', cls: 'claudian-sp-label' });
+
+    const actionsEl = headerEl.createDiv({ cls: 'claudian-sp-header-actions' });
+    const refreshBtn = actionsEl.createEl('button', {
+      cls: 'claudian-settings-action-btn',
+      attr: { 'aria-label': 'Refresh' },
+    });
+    setIcon(refreshBtn, 'refresh-cw');
+    refreshBtn.addEventListener('click', () => { void this.refresh(); });
+
+    const addBtn = actionsEl.createEl('button', {
+      cls: 'claudian-settings-action-btn',
+      attr: { 'aria-label': 'Add' },
+    });
+    setIcon(addBtn, 'plus');
+    addBtn.addEventListener('click', () => this.openModal(null));
+
+    if (this.entries.length === 0) {
+      const emptyEl = this.containerEl.createDiv({ cls: 'claudian-sp-empty-state' });
+      emptyEl.setText('No Codex skills in vault. Click + to create one.');
+      return;
+    }
+
+    const listEl = this.containerEl.createDiv({ cls: 'claudian-sp-list' });
+    for (const entry of this.entries) {
+      this.renderItem(listEl, entry);
+    }
+  }
+
+  private renderItem(listEl: HTMLElement, entry: ProviderCommandEntry): void {
+    const itemEl = listEl.createDiv({ cls: 'claudian-sp-item' });
+    const infoEl = itemEl.createDiv({ cls: 'claudian-sp-info' });
+
+    const headerRow = infoEl.createDiv({ cls: 'claudian-sp-item-header' });
+    const nameEl = headerRow.createSpan({ cls: 'claudian-sp-item-name' });
+    nameEl.setText(`$${entry.name}`);
+    headerRow.createSpan({ text: 'skill', cls: 'claudian-slash-item-badge' });
+
+    if (entry.description) {
+      const descEl = infoEl.createDiv({ cls: 'claudian-sp-item-desc' });
+      descEl.setText(entry.description);
+    }
+
+    const actionsEl = itemEl.createDiv({ cls: 'claudian-sp-item-actions' });
+
+    if (entry.isEditable) {
+      const editBtn = actionsEl.createEl('button', {
+        cls: 'claudian-settings-action-btn',
+        attr: { 'aria-label': 'Edit' },
+      });
+      setIcon(editBtn, 'pencil');
+      editBtn.addEventListener('click', () => this.openModal(entry));
+    }
+
+    if (entry.isDeletable) {
+      const deleteBtn = actionsEl.createEl('button', {
+        cls: 'claudian-settings-action-btn claudian-settings-delete-btn',
+        attr: { 'aria-label': 'Delete' },
+      });
+      setIcon(deleteBtn, 'trash-2');
+      deleteBtn.addEventListener('click', () => {
+        void (async (): Promise<void> => {
+        try {
+          await this.deleteEntry(entry);
+          new Notice(`Codex skill "$${entry.name}" deleted`);
+        } catch {
+          new Notice('Failed to delete Codex skill');
+        }
+        })();
+      });
+    }
+  }
+
+  private openModal(existing: ProviderCommandEntry | null): void {
+    if (!this.app) return;
+
+    const modal = new CodexSkillModal(
+      this.app,
+      existing,
+      async (entry) => {
+        await this.catalog.saveVaultEntry(entry);
+        await this.render();
+        new Notice(`Codex skill "$${entry.name}" ${existing ? 'updated' : 'created'}`);
+      }
+    );
+    modal.open();
+  }
+}