ompchamber 0.3.0

package/src/client/components/settings/categories/provider-settings/ReconnectModal.tsx

@@ -0,0 +1,163 @@
+import { useState } from 'preact/hooks';
+import type { FormEvent } from 'preact/compat';
+import { AlertCircle, CheckCircle2, DownloadCloud, Globe, Key, RefreshCw } from 'lucide-preact';
+import type { ProviderItem } from '@/shared/types';
+import { fetchProviderModelsRemote } from '@/shared/lib/models/provider-models';
+import { ProviderIcon } from '@/client/components/settings/categories/provider-settings/Icons';
+import { Modal } from '@/client/components/common/Modal';
+
+interface ReconnectModalProps {
+  isOpen: boolean;
+  provider: ProviderItem;
+  isFetchingModels: boolean;
+  onClose: () => void;
+  onReconnect: (updatedProvider: Partial<ProviderItem>) => void;
+  onFetchModels: (credentials: { apiKey?: string; baseUrl?: string }) => Promise<void>;
+}
+
+export function ReconnectModal({
+  isOpen,
+  provider,
+  isFetchingModels,
+  onClose,
+  onReconnect,
+  onFetchModels,
+}: ReconnectModalProps) {
+  const [apiKey, setApiKey] = useState(provider.apiKey || 'sk-••••••••••••••••••••••••');
+  const [baseUrl, setBaseUrl] = useState(provider.baseUrl || 'https://api.openai.com/v1');
+  const [isTesting, setIsTesting] = useState(false);
+  const [testResult, setTestResult] = useState<'success' | 'failed' | null>(null);
+
+  if (!isOpen) return null;
+
+  const isDraftKey = apiKey.includes('••••');
+  const draftCredentials = {
+    apiKey: isDraftKey ? undefined : apiKey,
+    baseUrl,
+  };
+
+  const handleTestConnection = async () => {
+    setIsTesting(true);
+    setTestResult(null);
+    const result = await fetchProviderModelsRemote(baseUrl, draftCredentials.apiKey);
+    setIsTesting(false);
+    setTestResult(result.ok ? 'success' : 'failed');
+  };
+
+  const handleSave = async (e: FormEvent) => {
+    e.preventDefault();
+    onReconnect({
+      apiKey,
+      baseUrl,
+      status: 'connected',
+    });
+    await onFetchModels(draftCredentials);
+    onClose();
+  };
+
+  return (
+    <Modal
+      onClose={onClose}
+      header={
+        <div className="flex items-center gap-2.5">
+          <ProviderIcon icon={provider.icon} size={18} />
+          <div>
+            <h3 className="text-sm font-semibold text-ink">
+              Authentication & Credentials
+            </h3>
+            <p className="text-[11px] text-ink/50 font-mono">
+              {provider.slug}
+            </p>
+          </div>
+        </div>
+      }
+      form={{ onSubmit: handleSave, className: 'p-5 space-y-4' }}
+      footer={
+        <div className="pt-3 flex items-center justify-end gap-2 border-t border-ink/10">
+          <button
+            type="button"
+            onClick={onClose}
+            className="px-3.5 py-1.5 rounded-md border border-ink/20 text-xs font-medium text-ink hover:bg-ink/5 transition-colors cursor-pointer"
+          >
+            Cancel
+          </button>
+          <button
+            type="submit"
+            disabled={isFetchingModels}
+            className="px-3.5 py-1.5 rounded-md bg-ink text-canvas text-xs font-medium hover:opacity-90 transition-opacity cursor-pointer disabled:opacity-50 flex items-center gap-1.5"
+          >
+            <RefreshCw size={13} className={isFetchingModels ? 'animate-spin' : ''} />
+            <span>{isFetchingModels ? 'Fetching models...' : 'Save & Reconnect'}</span>
+          </button>
+        </div>
+      }
+    >
+      {/* Base URL */}
+      <div>
+        <label className="block text-xs font-semibold text-ink mb-1">
+          Endpoint URL
+        </label>
+        <div className="relative flex items-center">
+          <Globe size={13} className="absolute left-2.5 text-ink/40 pointer-events-none" />
+          <input
+            type="text"
+            value={baseUrl}
+            onChange={(e) => setBaseUrl(e.currentTarget.value)}
+            className="w-full bg-paper border border-ink/20 rounded-md pl-8 pr-3 py-1.5 text-xs text-ink outline-none focus:border-ink/60 font-mono"
+          />
+        </div>
+      </div>
+
+      {/* API Key */}
+      <div>
+        <label className="block text-xs font-semibold text-ink mb-1">
+          API Key / Auth Token
+        </label>
+        <div className="relative flex items-center">
+          <Key size={13} className="absolute left-2.5 text-ink/40 pointer-events-none" />
+          <input
+            type="text"
+            value={apiKey}
+            onChange={(e) => setApiKey(e.currentTarget.value)}
+            className="w-full bg-paper border border-ink/20 rounded-md pl-8 pr-3 py-1.5 text-xs text-ink outline-none focus:border-ink/60 font-mono"
+          />
+        </div>
+      </div>
+
+      {/* Test connection indicator */}
+      <div className="flex items-center justify-between pt-1">
+        <button
+          type="button"
+          disabled={isTesting || isFetchingModels}
+          onClick={handleTestConnection}
+          className="inline-flex items-center gap-1.5 px-3 py-1.5 rounded-md border border-ink/20 hover:border-ink/40 text-xs font-medium text-ink transition-colors cursor-pointer bg-ink/5 disabled:opacity-50"
+        >
+          <RefreshCw size={13} className={isTesting ? 'animate-spin' : ''} />
+          <span>{isTesting ? 'Testing endpoint...' : 'Test Connection'}</span>
+        </button>
+
+        {testResult === 'success' && (
+          <span className="inline-flex items-center gap-1 text-xs text-emerald-500 font-medium">
+            <CheckCircle2 size={13} />
+            <span>Models endpoint reachable</span>
+          </span>
+        )}
+        {testResult === 'failed' && (
+          <span className="inline-flex items-center gap-1 text-xs text-error font-medium">
+            <AlertCircle size={13} />
+            <span>Connection failed</span>
+          </span>
+        )}
+      </div>
+
+      {/* Auto-fetch models notice */}
+      <div className="flex items-start gap-2 px-3 py-2 rounded-md bg-ink/5 border border-ink/10 text-[11px] text-ink/60">
+        <DownloadCloud size={13} className="mt-0.5 flex-shrink-0 text-ink/50" />
+        <span>
+          On save, models are fetched from the endpoint and merged into the
+          list below — existing models are kept, only new ones are added.
+        </span>
+      </div>
+    </Modal>
+  );
+}

package/src/client/components/settings/categories/provider-settings/SidebarList.tsx

@@ -0,0 +1,133 @@
+
+import { useRef, useState } from 'preact/hooks';
+import { Check, ChevronDown, Folder, Plus } from 'lucide-preact';
+import type { ProviderItem } from '@/shared/types';
+import { ProviderIcon } from '@/client/components/settings/categories/provider-settings/Icons';
+import { useOnClickOutside } from '@/client/hooks/ui/on-click-outside';
+
+interface ProviderSidebarListProps {
+  providers: ProviderItem[];
+  selectedProviderId: string;
+  onSelectProvider: (id: string) => void;
+  onOpenAddModal: () => void;
+  projects?: Array<{ id: string; name: string }>;
+  currentProject: string;
+  onSelectProject: (name: string) => void;
+}
+
+export function ProviderSidebarList({
+  providers,
+  selectedProviderId,
+  onSelectProvider,
+  onOpenAddModal,
+  projects = [
+    { id: 'proj-ompchamber', name: 'ompchamber' },
+    { id: 'proj-workspace', name: 'Workspace' },
+    { id: 'proj-drrealhandler', name: 'drrealhandler' },
+    { id: 'proj-opencode-zen', name: 'opencode-zen' },
+  ],
+  currentProject,
+  onSelectProject,
+}: ProviderSidebarListProps) {
+  const [isProjectDropdownOpen, setIsProjectDropdownOpen] = useState(false);
+  const dropdownRef = useRef<HTMLDivElement>(null);
+
+  useOnClickOutside(dropdownRef, () => setIsProjectDropdownOpen(false));
+
+  return (
+    <div className="w-56 sm:w-64 border-r border-ink/10 h-full flex flex-col bg-paper/50 flex-shrink-0">
+      {/* 1. Project Selector Dropdown */}
+      <div className="p-3 border-b border-ink/10 relative" ref={dropdownRef}>
+        <button
+          type="button"
+          onClick={() => setIsProjectDropdownOpen(!isProjectDropdownOpen)}
+          className="w-full flex items-center justify-between gap-2 px-3 py-1.5 rounded-lg border border-ink/20 hover:border-ink/40 bg-paper text-ink text-xs font-medium transition-colors cursor-pointer shadow-2xs"
+        >
+          <div className="flex items-center gap-2 truncate">
+            <Folder size={14} className="text-ink/60 flex-shrink-0" />
+            <span className="truncate">{currentProject}</span>
+          </div>
+          <ChevronDown size={14} className="text-ink/50 flex-shrink-0" />
+        </button>
+
+        {isProjectDropdownOpen && (
+          <div className="absolute left-3 right-3 mt-1.5 bg-paper border border-ink/15 rounded-lg shadow-xl py-1 z-50 max-h-56 scrollbar-overlay-container scrollbar-overlay">
+            {projects.map((proj) => (
+              <button
+                key={proj.id}
+                type="button"
+                onClick={() => {
+                  onSelectProject(proj.name);
+                  setIsProjectDropdownOpen(false);
+                }}
+                className="w-full flex items-center justify-between px-3 py-1.5 text-left text-xs hover:bg-ink/5 transition-colors cursor-pointer"
+              >
+                <span className={proj.name === currentProject ? 'font-semibold text-ink' : 'text-ink/80'}>
+                  {proj.name}
+                </span>
+                {proj.name === currentProject && <Check size={13} className="text-ink" />}
+              </button>
+            ))}
+          </div>
+        )}
+      </div>
+
+      {/* 2. Total Count & Add Button */}
+      <div className="px-3.5 py-2.5 flex items-center justify-between">
+        <span className="text-xs font-semibold text-ink/70">
+          Total {providers.length}
+        </span>
+        <button
+          type="button"
+          onClick={onOpenAddModal}
+          title="Add Provider"
+          className="p-1 rounded text-ink/60 hover:text-ink hover:bg-ink/5 transition-colors cursor-pointer"
+        >
+          <Plus size={15} strokeWidth={2.2} />
+        </button>
+      </div>
+
+      {/* 3. Section Header: USER PROVIDERS */}
+      <div className="px-3.5 pt-1 pb-1.5">
+        <span className="text-[10px] font-semibold tracking-wider text-ink/50 uppercase">
+          User Providers
+        </span>
+      </div>
+
+      {/* 4. Provider List */}
+      <div className="flex-1 scrollbar-overlay-container scrollbar-overlay-static p-1.5 space-y-0.5">
+        {providers.length === 0 ? (
+          <div className="px-2.5 py-4 text-[11px] leading-relaxed text-ink/50">
+            No connected providers yet. Use the plus button above to add one.
+          </div>
+        ) : providers.map((item) => {
+          const isSelected = item.id === selectedProviderId;
+
+          return (
+            <button
+              key={item.id}
+              type="button"
+              onClick={() => onSelectProvider(item.id)}
+              className={`w-full flex items-center justify-between px-2.5 py-2 rounded-md text-left transition-colors cursor-pointer group ${
+                isSelected
+                  ? 'bg-ink/10 text-ink font-medium shadow-2xs'
+                  : 'text-ink/80 hover:bg-ink/5 hover:text-ink'
+              }`}
+            >
+              <div className="flex items-center gap-2.5 min-w-0">
+                <ProviderIcon icon={item.icon} size={15} className="flex-shrink-0" />
+                <span className="text-[12px] truncate">{item.name}</span>
+              </div>
+
+              <span className={`text-[11px] px-1.5 py-0.5 rounded font-mono ${
+                isSelected ? 'text-ink/90 bg-ink/10' : 'text-ink/50 group-hover:text-ink/70'
+              }`}>
+                {item.models.length}
+              </span>
+            </button>
+          );
+        })}
+      </div>
+    </div>
+  );
+}

package/src/client/components/settings/categories/skill-catalog/AddSourceModal.tsx

@@ -0,0 +1,133 @@
+import { useState } from 'preact/hooks';
+import type { FormEvent } from 'preact/compat';
+import { AlertCircle, GitBranch, Plus, X } from 'lucide-preact';
+import type { SkillCatalogSource } from '@/shared/types';
+
+interface AddSourceModalProps {
+  isOpen: boolean;
+  onClose: () => void;
+  onAddSource: (source: SkillCatalogSource) => void;
+}
+
+export function AddSourceModal({ isOpen, onClose, onAddSource }: AddSourceModalProps) {
+  const [repoUrl, setRepoUrl] = useState('');
+  const [sourceName, setSourceName] = useState('');
+  const [error, setError] = useState<string | null>(null);
+
+  if (!isOpen) return null;
+
+  const handleSubmit = (e: FormEvent) => {
+    e.preventDefault();
+    const cleanRepo = repoUrl.trim().replace(/^https?:\/\/github\.com\//, '').replace(/\/$/, '');
+
+    if (!cleanRepo) {
+      setError('Please provide a valid GitHub repository path (e.g. owner/repo).');
+      return;
+    }
+
+    const name = sourceName.trim() || cleanRepo.split('/')[1] || cleanRepo;
+
+    const newSource: SkillCatalogSource = {
+      id: `custom-${Date.now()}`,
+      name,
+      repo: cleanRepo,
+      stars: '1.2K',
+      updatedAt: 'Just now',
+      skillCount: 3,
+      isCustom: true,
+    };
+
+    onAddSource(newSource);
+    setRepoUrl('');
+    setSourceName('');
+    setError(null);
+    onClose();
+  };
+
+  return (
+    <div
+      className="fixed inset-0 z-50 bg-ink/40 backdrop-blur-[2px] flex items-center justify-center p-4"
+      onClick={onClose}
+    >
+      <div
+        className="bg-paper border border-ink/20 rounded-xl max-w-md w-full p-6 shadow-2xl space-y-4 text-ink animate-in fade-in zoom-in-95 duration-150"
+        onClick={(e) => e.stopPropagation()}
+      >
+        <div className="flex items-center justify-between pb-3 border-b border-ink/10">
+          <div className="flex items-center gap-2">
+            <GitBranch className="w-4 h-4 text-ink/70" />
+            <h2 className="text-xs font-bold uppercase tracking-wider text-ink">
+              Add Custom Skill Source
+            </h2>
+          </div>
+          <button
+            type="button"
+            onClick={onClose}
+            className="p-1 rounded-md text-ink/50 hover:text-ink hover:bg-ink/5 transition-colors cursor-pointer"
+          >
+            <X className="w-4 h-4" />
+          </button>
+        </div>
+
+        <p className="text-xs text-ink/70 leading-relaxed">
+          Connect any public or private Git repository containing skill definitions and prompt directives.
+        </p>
+
+        <form onSubmit={handleSubmit} className="space-y-4">
+          <div>
+            <label className="block text-xs font-semibold text-ink/80 mb-1.5">
+              Source Name
+            </label>
+            <input
+              type="text"
+              value={sourceName}
+              onChange={(e) => setSourceName(e.currentTarget.value)}
+              placeholder="e.g. Acme Internal Skills"
+              className="w-full px-3 py-2 rounded-lg border border-ink/20 hover:border-ink/40 bg-paper focus:outline-none focus:border-ink text-xs text-ink transition-colors"
+            />
+          </div>
+
+          <div>
+            <label className="block text-xs font-semibold text-ink/80 mb-1.5">
+              Git Repository <span className="text-error">*</span>
+            </label>
+            <input
+              type="text"
+              value={repoUrl}
+              onChange={(e) => {
+                setRepoUrl(e.currentTarget.value);
+                setError(null);
+              }}
+              placeholder="e.g. owner/skills-repo or https://github.com/..."
+              className="w-full px-3 py-2 rounded-lg border border-ink/20 hover:border-ink/40 bg-paper focus:outline-none focus:border-ink text-xs font-mono text-ink transition-colors"
+            />
+          </div>
+
+          {error && (
+            <div className="flex items-center gap-2 text-xs text-error p-2.5 rounded-lg bg-error/10 border border-error/20">
+              <AlertCircle className="w-4 h-4 flex-shrink-0" />
+              <span className="font-medium">{error}</span>
+            </div>
+          )}
+
+          <div className="pt-3 border-t border-ink/10 flex items-center justify-end gap-2">
+            <button
+              type="button"
+              onClick={onClose}
+              className="px-3.5 py-2 rounded-lg border border-ink/20 hover:border-ink/40 text-xs font-medium text-ink/80 hover:text-ink transition-colors cursor-pointer"
+            >
+              Cancel
+            </button>
+            <button
+              type="submit"
+              className="flex items-center gap-1.5 px-4 py-2 rounded-lg bg-ink text-paper text-xs font-medium hover:bg-ink/90 transition-colors shadow-xs cursor-pointer"
+            >
+              <Plus size={14} />
+              <span>Add Source</span>
+            </button>
+          </div>
+        </form>
+      </div>
+    </div>
+  );
+}

package/src/client/components/settings/categories/skill-settings/DetailPane.tsx

@@ -0,0 +1,210 @@
+import { useEffect, useState } from 'preact/hooks';
+import { Check, Eye, EyeOff, Info, Save, Sparkles, Trash2, User } from 'lucide-preact';
+import type { SkillItem } from '@/shared/types';
+
+interface SkillDetailPaneProps {
+  skill: SkillItem | null;
+  isCreatingNew: boolean;
+  onSave: (skillData: Partial<SkillItem>) => void;
+  onDelete?: (id: string) => void;
+  onOpenCatalog?: () => void;
+}
+
+export function SkillDetailPane({
+  skill,
+  isCreatingNew,
+  onSave,
+  onDelete,
+  onOpenCatalog,
+}: SkillDetailPaneProps) {
+  const [name, setName] = useState('');
+  const [description, setDescription] = useState('');
+  const [location, setLocation] = useState<'user' | 'project'>('user');
+  const [locationLabel, setLocationLabel] = useState('User / OpenCode');
+  const [instructions, setInstructions] = useState('');
+  const [savedToast, setSavedToast] = useState(false);
+  const [showLineNumbers, setShowLineNumbers] = useState(true);
+
+  useEffect(() => {
+    if (isCreatingNew || !skill) {
+      setName('new-skill');
+      setDescription('');
+      setLocation('user');
+      setLocationLabel('User / OpenCode');
+      setInstructions(`---
+description: ""
+---
+`);
+    } else {
+      setName(skill.name);
+      setDescription(skill.description);
+      setLocation(skill.location);
+      setLocationLabel(skill.locationLabel || 'User / OpenCode');
+      setInstructions(skill.instructions);
+    }
+  }, [skill, isCreatingNew]);
+
+  const handleSave = () => {
+    onSave({
+      name: name.trim() || 'unnamed-skill',
+      description: description.trim(),
+      location,
+      locationLabel,
+      instructions,
+    });
+    setSavedToast(true);
+    setTimeout(() => setSavedToast(false), 2000);
+  };
+
+  const lines = instructions.split('\n');
+  const lineCount = Math.max(lines.length, 6);
+
+  return (
+    <div className="flex-1 flex flex-col h-full scrollbar-overlay-container scrollbar-overlay-static bg-paper text-ink p-6 md:p-8 space-y-6">
+      {/* Pane Header */}
+      <div className="flex items-start justify-between pb-4 border-b border-ink/10 gap-4">
+        <div>
+          <h2 className="text-sm font-bold tracking-tight text-ink">
+            {isCreatingNew ? 'New Skill' : name}
+          </h2>
+          <p className="text-xs text-ink/60 mt-0.5">
+            {isCreatingNew ? 'Configure a new skill' : 'Configure skill details and prompt rules'}
+          </p>
+        </div>
+
+        {onOpenCatalog && (
+          <button
+            type="button"
+            onClick={onOpenCatalog}
+            className="flex items-center gap-1.5 px-3 py-1.5 rounded-lg border border-ink/20 hover:border-ink/40 text-xs font-medium text-ink hover:bg-ink/5 transition-colors cursor-pointer"
+          >
+            <Sparkles size={14} className="text-ink/70" />
+            <span>Browse Catalog</span>
+          </button>
+        )}
+      </div>
+
+      {/* Basic Information Section */}
+      <div className="space-y-4">
+        <h3 className="text-xs font-bold uppercase tracking-wider text-ink">
+          Basic Information
+        </h3>
+
+        {/* Skill Name & Location */}
+        <div>
+          <div className="flex items-center gap-1.5 mb-1.5">
+            <label className="text-xs font-semibold text-ink/80">
+              Skill Name & Location
+            </label>
+            <div className="group relative">
+              <Info size={13} className="text-ink/40 cursor-help" />
+              <div className="absolute left-0 top-5 hidden group-hover:block w-64 p-2 rounded-lg bg-ink text-paper text-[11px] shadow-lg z-20 pointer-events-none leading-relaxed">
+                Unique identifier and runtime execution scope for this skill.
+              </div>
+            </div>
+          </div>
+
+          <div className="flex flex-col sm:flex-row items-stretch sm:items-center gap-2">
+            <input
+              type="text"
+              value={name}
+              onChange={(e) => setName(e.currentTarget.value)}
+              placeholder="skill-name"
+              className="flex-1 px-3 py-2 rounded-lg border border-ink/20 hover:border-ink/40 bg-paper focus:outline-none focus:border-ink text-xs font-mono text-ink transition-colors"
+            />
+            <div className="flex items-center gap-1.5 px-3 py-2 rounded-lg border border-ink/20 bg-ink/5 text-xs text-ink/80 flex-shrink-0">
+              <User size={14} className="text-ink/60" />
+              <span>{locationLabel}</span>
+            </div>
+          </div>
+        </div>
+
+        {/* Description */}
+        <div>
+          <div className="flex items-center gap-1.5 mb-1.5">
+            <label className="text-xs font-semibold text-ink/80">
+              Description <span className="text-error">*</span>
+            </label>
+            <div className="group relative">
+              <Info size={13} className="text-ink/40 cursor-help" />
+              <div className="absolute left-0 top-5 hidden group-hover:block w-64 p-2 rounded-lg bg-ink text-paper text-[11px] shadow-lg z-20 pointer-events-none leading-relaxed">
+                Short description helping autonomous agents decide when to invoke this skill.
+              </div>
+            </div>
+          </div>
+
+          <textarea
+            rows={3}
+            value={description}
+            onChange={(e) => setDescription(e.currentTarget.value)}
+            placeholder="Brief description of what this skill does..."
+            className="w-full px-3 py-2 rounded-lg border border-ink/20 hover:border-ink/40 bg-paper focus:outline-none focus:border-ink text-xs text-ink transition-colors resize-none leading-relaxed"
+          />
+        </div>
+      </div>
+
+      {/* Instructions Section */}
+      <div className="space-y-2 pt-2 border-t border-ink/10">
+        <div className="flex items-center justify-between">
+          <h3 className="text-xs font-bold uppercase tracking-wider text-ink">
+            Instructions
+          </h3>
+          <button
+            type="button"
+            onClick={() => setShowLineNumbers(!showLineNumbers)}
+            title={showLineNumbers ? 'Hide Line Numbers' : 'Show Line Numbers'}
+            className="p-1 rounded-md text-ink/50 hover:text-ink hover:bg-ink/5 transition-colors cursor-pointer"
+          >
+            {showLineNumbers ? <Eye size={15} /> : <EyeOff size={15} />}
+          </button>
+        </div>
+
+        {/* Code Editor */}
+        <div className="rounded-lg border border-ink/20 hover:border-ink/40 bg-ink/5 overflow-hidden flex flex-col font-mono text-xs focus-within:border-ink transition-colors">
+          <div className="flex">
+            {showLineNumbers && (
+              <div className="w-10 py-3 pr-2 select-none text-right font-mono text-xs text-ink/30 border-r border-ink/10 bg-ink/[0.02] overflow-hidden leading-relaxed">
+                {Array.from({ length: lineCount }).map((_, i) => (
+                  <div key={i}>{i + 1}</div>
+                ))}
+              </div>
+            )}
+            <textarea
+              rows={Math.max(lineCount, 8)}
+              value={instructions}
+              onChange={(e) => setInstructions(e.currentTarget.value)}
+              spellcheck={false}
+              className="flex-1 p-3 bg-transparent text-ink font-mono text-xs leading-relaxed resize-none focus:outline-none overflow-y-auto"
+              placeholder="Type markdown instructions..."
+            />
+          </div>
+        </div>
+      </div>
+
+      {/* Footer Actions */}
+      <div className="pt-4 border-t border-ink/10 flex items-center justify-between">
+        {!isCreatingNew && skill && onDelete ? (
+          <button
+            type="button"
+            onClick={() => onDelete(skill.id)}
+            className="flex items-center gap-1.5 px-3.5 py-2 rounded-lg border border-ink/20 hover:border-error hover:text-error text-ink/70 text-xs font-medium transition-colors cursor-pointer"
+          >
+            <Trash2 size={14} />
+            <span>Delete Skill</span>
+          </button>
+        ) : (
+          <div />
+        )}
+
+        <button
+          type="button"
+          onClick={handleSave}
+          className="flex items-center gap-1.5 px-4 py-2 rounded-lg bg-ink text-paper text-xs font-medium hover:bg-ink/90 transition-colors shadow-xs cursor-pointer"
+        >
+          {savedToast ? <Check size={14} /> : <Save size={14} />}
+          <span>{savedToast ? 'Saved' : isCreatingNew ? 'Create Skill' : 'Save Changes'}</span>
+        </button>
+      </div>
+    </div>
+  );
+}