ompchamber 0.3.0

package/src/client/components/settings/categories/ProviderSettings.tsx

@@ -0,0 +1,146 @@
+import { ToastStack } from '@/client/components/common/ToastStack';
+import { useProviderSettings } from '@/client/hooks/settings/providers';
+import { ProviderSidebarList } from '@/client/components/settings/categories/provider-settings/SidebarList';
+import { ProviderHeader } from '@/client/components/settings/categories/provider-settings/Header';
+import { ProviderAuthSection } from '@/client/components/settings/categories/provider-settings/AuthSection';
+import { ProviderModelsList } from '@/client/components/settings/categories/provider-settings/ModelsList';
+import { AddProviderModal } from '@/client/components/settings/categories/provider-settings/AddProviderModal';
+import { ReconnectModal } from '@/client/components/settings/categories/provider-settings/ReconnectModal';
+import { LoginModal } from '@/client/components/settings/categories/provider-settings/LoginModal';
+import { ModelConfigModal } from '@/client/components/settings/categories/provider-settings/ModelConfigModal';
+import { ModelCapabilitiesModal } from '@/client/components/settings/categories/provider-settings/ModelCapabilitiesModal';
+
+interface ProviderSettingsProps {
+  autoOpenAdd?: boolean;
+  onAddModalClose?: () => void;
+}
+
+export function ProviderSettings({
+  autoOpenAdd = false,
+  onAddModalClose,
+}: ProviderSettingsProps) {
+  const {
+    connectedProviders,
+    availablePresetProviders,
+    selectedProvider,
+    currentProject,
+    setCurrentProject,
+    isFetchingModels,
+    toasts,
+    dismissToast,
+    isAddModalOpen,
+    setIsAddModalOpen,
+    isReconnectModalOpen,
+    setIsReconnectModalOpen,
+    isLoginModalOpen,
+    setIsLoginModalOpen,
+    configModel,
+    setConfigModel,
+    capabilitiesModel,
+    setCapabilitiesModel,
+    setSelectedProviderId,
+    handleAddProvider,
+    handleReconnect,
+    handleFetchModels,
+    handleFetchModelsFromList,
+    handleOmpAuthSuccess,
+    handleToggleDisconnect,
+    handleToggleProviderDisabled,
+    handleHideAll,
+    handleShowAll,
+    handleToggleModelVisibility,
+    handleSaveModelConfig,
+  } = useProviderSettings({ autoOpenAdd, onAddModalClose });
+
+  return (
+    <div className="w-full h-full flex flex-col md:flex-row overflow-hidden bg-paper text-ink">
+      <ProviderSidebarList
+        providers={connectedProviders}
+        selectedProviderId={selectedProvider?.id || ''}
+        onSelectProvider={setSelectedProviderId}
+        onOpenAddModal={() => setIsAddModalOpen(true)}
+        currentProject={currentProject}
+        onSelectProject={setCurrentProject}
+      />
+
+      <div className="flex-1 scrollbar-overlay-container scrollbar-overlay-static p-6 md:p-8 space-y-6">
+        {selectedProvider ? (
+          <>
+            <ProviderHeader provider={selectedProvider} />
+
+            <ProviderAuthSection
+              provider={selectedProvider}
+              onOpenReconnectModal={() => {
+                if (selectedProvider.id.startsWith('omp-auth-')) setIsLoginModalOpen(true);
+                else setIsReconnectModalOpen(true);
+              }}
+              onToggleDisconnect={handleToggleDisconnect}
+              onToggleDisabled={handleToggleProviderDisabled}
+            />
+
+            <ProviderModelsList
+              models={selectedProvider.models}
+              onToggleModelVisibility={handleToggleModelVisibility}
+              onHideAll={handleHideAll}
+              onShowAll={handleShowAll}
+              onFetchModels={handleFetchModelsFromList}
+              canFetchModels={Boolean(selectedProvider.baseUrl)}
+              isFetchingModels={isFetchingModels}
+              onOpenModelConfig={(model) => setConfigModel(model)}
+              onOpenModelCapabilities={(model) => setCapabilitiesModel(model)}
+            />
+          </>
+        ) : (
+          <div className="py-12 text-center text-xs text-ink/40">
+            Select a provider from the sidebar to view connection details
+          </div>
+        )}
+      </div>
+
+      <ToastStack toasts={toasts} onDismiss={dismissToast} />
+
+      <AddProviderModal
+        isOpen={isAddModalOpen}
+        onClose={() => {
+          setIsAddModalOpen(false);
+          onAddModalClose?.();
+        }}
+        onAddProvider={handleAddProvider}
+        presets={availablePresetProviders}
+      />
+
+      {selectedProvider && (
+        <ReconnectModal
+          isOpen={isReconnectModalOpen}
+          provider={selectedProvider}
+          isFetchingModels={isFetchingModels}
+          onClose={() => setIsReconnectModalOpen(false)}
+          onReconnect={handleReconnect}
+          onFetchModels={handleFetchModels}
+        />
+      )}
+
+      {selectedProvider && (
+        <LoginModal
+          isOpen={isLoginModalOpen}
+          provider={selectedProvider}
+          onClose={() => setIsLoginModalOpen(false)}
+          onAuthenticated={handleOmpAuthSuccess}
+        />
+      )}
+
+      <ModelConfigModal
+        isOpen={!!configModel}
+        model={configModel}
+        onClose={() => setConfigModel(null)}
+        onSaveModelConfig={handleSaveModelConfig}
+      />
+
+      <ModelCapabilitiesModal
+        isOpen={!!capabilitiesModel}
+        model={capabilitiesModel}
+        onClose={() => setCapabilitiesModel(null)}
+      />
+    </div>
+  );
+}

package/src/client/components/settings/categories/SkillCatalogSettings.tsx

@@ -0,0 +1,309 @@
+import { useState } from 'preact/hooks';
+import { Check, Download, ExternalLink, GitBranch, Plus, RefreshCw, Search, Star } from 'lucide-preact';
+import type { CatalogSkillItem, SkillCatalogSource, SkillItem } from '@/shared/types';
+import { AddSourceModal } from '@/client/components/settings/categories/skill-catalog/AddSourceModal';
+import { invalidateComposerCache } from '@/shared/lib/chat/composer/client';
+import { useSkillCatalog } from '@/client/hooks/settings/skill-catalog';
+
+export function SkillCatalogSettings() {
+  const { sources, catalogSkills, userSkills, setSources, setUserSkills, reload } = useSkillCatalog();
+  const [selectedSourceId, setSelectedSourceId] = useState<string>('anthropic');
+  const [searchQuery, setSearchQuery] = useState('');
+  const [isRefreshing, setIsRefreshing] = useState(false);
+  const [isAddSourceModalOpen, setIsAddSourceModalOpen] = useState(false);
+  const [toastMessage, setToastMessage] = useState<string | null>(null);
+
+  const installedSkillIds = new Set(userSkills.map((s) => s?.name).filter(Boolean));
+
+  const showToast = (msg: string) => {
+    setToastMessage(msg);
+    setTimeout(() => setToastMessage(null), 2500);
+  };
+
+  const handleRefresh = () => {
+    setIsRefreshing(true);
+    reload()
+      .then(() => showToast('Catalog index synchronized'))
+      .catch(console.error)
+      .finally(() => setIsRefreshing(false));
+  };
+
+  const handleInstallToggle = (skill: CatalogSkillItem) => {
+    const existing = userSkills.find((s) => s.name === skill.name);
+
+    if (existing) {
+      // Uninstall via API
+      fetch(`/api/settings/skills?id=${encodeURIComponent(existing.id)}`, { method: 'DELETE' })
+        .then(res => res.json())
+        .then(data => {
+          if (data?.error) return;
+          invalidateComposerCache('command');
+          fetch('/api/settings/skills')
+            .then(r => r.json())
+            .then(d => {
+              if (d?.skills) setUserSkills(d.skills);
+            });
+          showToast(`Uninstalled skill "${skill.name}"`);
+        })
+        .catch(console.error);
+    } else {
+      // Install via API
+      const newSkill: SkillItem = {
+        id: `skill-cat-${Date.now()}`,
+        name: skill.name,
+        description: skill.description,
+        location: 'user',
+        locationLabel: 'User / OpenCode',
+        instructions: skill.instructions || `---\ndescription: "${skill.description}"\n---\n\n## Instructions\nFollow standard prompt protocol for ${skill.name}.`,
+        project: 'ompchamber',
+        isInstalledFromCatalog: true,
+        catalogSource: skill.sourceId,
+      };
+
+      fetch('/api/settings/skills', {
+        method: 'POST',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify({ skill: newSkill }),
+      })
+        .then(res => res.json())
+        .then(data => {
+          if (data?.skills) setUserSkills(data.skills);
+          else setUserSkills(prev => [...prev, newSkill]);
+          showToast(`Installed skill "${skill.name}"`);
+          invalidateComposerCache('command');
+        })
+        .catch(console.error);
+    }
+  };
+
+  const handleAddSource = (newSource: SkillCatalogSource) => {
+    const nextSources = [...sources, newSource];
+    setSources(nextSources);
+    setSelectedSourceId(newSource.id);
+    fetch('/api/settings/skills', {
+      method: 'POST',
+      headers: { 'Content-Type': 'application/json' },
+      body: JSON.stringify({ catalogSources: nextSources }),
+    }).catch(console.error);
+    showToast(`Added source "${newSource.name}"`);
+  };
+
+  const filteredSkills = catalogSkills.filter((item) => {
+    const matchesSearch =
+      !searchQuery.trim() ||
+      item.name.toLowerCase().includes(searchQuery.toLowerCase()) ||
+      item.description.toLowerCase().includes(searchQuery.toLowerCase()) ||
+      item.repoTag.toLowerCase().includes(searchQuery.toLowerCase());
+
+    if (searchQuery.trim()) {
+      return matchesSearch;
+    }
+    return item.sourceId === selectedSourceId;
+  });
+
+  const activeSource = sources.find((s) => s.id === selectedSourceId) || sources[0] || null;
+
+  return (
+    <div className="flex-1 flex flex-col h-full w-full scrollbar-overlay-container scrollbar-overlay-static bg-paper text-ink p-6 md:p-8 space-y-6">
+      {/* Subtitle Header */}
+      <div>
+        <p className="text-xs text-ink/70 leading-relaxed">
+          Install ready-made skills from curated repositories, or add your own source.
+        </p>
+      </div>
+
+      {/* Search Input Bar */}
+      <div className="relative">
+        <Search size={15} className="absolute left-3 top-2.5 text-ink/40 pointer-events-none" />
+        <input
+          type="text"
+          value={searchQuery}
+          onChange={(e) => setSearchQuery(e.currentTarget.value)}
+          placeholder="Search skills across all sources..."
+          className="w-full pl-9 pr-4 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>
+
+      {/* Sources Grid */}
+      <div className="space-y-3">
+        <h3 className="text-xs font-bold uppercase tracking-wider text-ink">
+          Sources
+        </h3>
+
+        <div className="grid grid-cols-1 sm:grid-cols-2 gap-3">
+          {sources.map((source) => {
+            const isSelected = selectedSourceId === source.id && !searchQuery.trim();
+            return (
+              <div
+                key={source.id}
+                onClick={() => {
+                  setSelectedSourceId(source.id);
+                  setSearchQuery('');
+                }}
+                className={`p-3.5 rounded-xl border transition-all cursor-pointer select-none relative ${
+                  isSelected
+                    ? 'border-ink bg-ink/5 shadow-xs'
+                    : 'border-ink/20 hover:border-ink/40 bg-paper'
+                }`}
+              >
+                <div className="flex items-center justify-between">
+                  <div className="flex items-center gap-2">
+                    <span className="text-xs font-bold text-ink">{source.name}</span>
+                    <span className="text-[10px] text-ink/50 font-mono">
+                      {source.skillCount} skills
+                    </span>
+                  </div>
+                  <RefreshCw
+                    size={13}
+                    className={`text-ink/40 hover:text-ink transition-colors ${
+                      isRefreshing && isSelected ? 'animate-spin' : ''
+                    }`}
+                  />
+                </div>
+
+                <div className="mt-1 font-mono text-[11px] text-ink/60 truncate">
+                  {source.repo}
+                </div>
+
+                <div className="mt-2.5 flex items-center gap-3 text-[10px] text-ink/50">
+                  <span className="flex items-center gap-1">
+                    <Star size={11} className="text-ink/50" />
+                    <span>{source.stars}</span>
+                  </span>
+                  <span>{source.updatedAt}</span>
+                </div>
+              </div>
+            );
+          })}
+
+          {/* Add Your Own Source Card */}
+          <div
+            onClick={() => setIsAddSourceModalOpen(true)}
+            className="p-3.5 rounded-xl border border-dashed border-ink/25 hover:border-ink/50 bg-paper hover:bg-ink/[0.02] transition-all cursor-pointer flex items-center gap-3 select-none"
+          >
+            <div className="w-8 h-8 rounded-lg border border-ink/20 flex items-center justify-center text-ink/60 flex-shrink-0">
+              <Plus size={16} />
+            </div>
+            <div>
+              <div className="text-xs font-bold text-ink">Add your own source</div>
+              <div className="text-[11px] text-ink/60">Any Git repository with skills</div>
+            </div>
+          </div>
+        </div>
+      </div>
+
+      {/* Divider */}
+      <div className="border-t border-ink/10 pt-4">
+        {/* Source Results Header */}
+        <div className="flex items-center justify-between pb-3">
+          <div className="flex items-center gap-2">
+            <span className="text-xs font-bold uppercase tracking-wider text-ink">
+              {searchQuery.trim()
+                ? 'Search Results'
+                : (activeSource?.name ? activeSource.name.toUpperCase() : 'SKILL CATALOG')}
+            </span>
+            <span className="text-xs text-ink/50">
+              {filteredSkills.length} skill(s) found
+            </span>
+          </div>
+
+          <button
+            type="button"
+            onClick={handleRefresh}
+            title="Refresh skills"
+            className="p-1 rounded-md text-ink/50 hover:text-ink hover:bg-ink/5 transition-colors cursor-pointer"
+          >
+            <RefreshCw size={14} className={isRefreshing ? 'animate-spin' : ''} />
+          </button>
+        </div>
+
+        {/* Skills List */}
+        <div className="space-y-3">
+          {filteredSkills.length === 0 ? (
+            <div className="text-center py-10 border border-dashed border-ink/15 rounded-xl">
+              <p className="text-xs text-ink/60">No skills found matching your query.</p>
+            </div>
+          ) : (
+            filteredSkills.map((skill) => {
+              const isInstalled = installedSkillIds.has(skill.name);
+              return (
+                <div
+                  key={skill.id}
+                  className="p-4 rounded-xl border border-ink/15 hover:border-ink/30 bg-paper transition-all flex flex-col sm:flex-row sm:items-start justify-between gap-3"
+                >
+                  <div className="space-y-1.5 flex-1 min-w-0">
+                    <div className="flex items-center gap-2">
+                      <span className="text-xs font-bold text-ink tracking-tight font-mono">
+                        {skill.name}
+                      </span>
+                    </div>
+
+                    <p className="text-xs text-ink/75 leading-relaxed line-clamp-2">
+                      {skill.description}
+                    </p>
+
+                    <div className="flex items-center gap-1.5 text-[11px] text-ink/50 font-mono pt-1">
+                      <GitBranch size={12} className="flex-shrink-0" />
+                      <span className="truncate">{skill.repoTag}</span>
+                    </div>
+                  </div>
+
+                  <div className="flex items-center gap-2 flex-shrink-0 self-end sm:self-center">
+                    {skill.githubUrl && (
+                      <a
+                        href={skill.githubUrl}
+                        target="_blank"
+                        rel="noreferrer"
+                        className="p-1.5 rounded-lg text-ink/50 hover:text-ink hover:bg-ink/5 transition-colors cursor-pointer"
+                        title="View repository"
+                      >
+                        <ExternalLink size={14} />
+                      </a>
+                    )}
+
+                    <button
+                      type="button"
+                      onClick={() => handleInstallToggle(skill)}
+                      className={`px-3 py-1.5 rounded-lg text-xs font-medium transition-all flex items-center gap-1.5 cursor-pointer ${
+                        isInstalled
+                          ? 'border border-ink/20 text-ink/80 hover:border-error hover:text-error hover:bg-error/5'
+                          : 'bg-ink text-paper hover:bg-ink/90 shadow-xs'
+                      }`}
+                    >
+                      {isInstalled ? (
+                        <>
+                          <Check size={12} />
+                          <span>Installed</span>
+                        </>
+                      ) : (
+                        <>
+                          <Download size={12} />
+                          <span>install</span>
+                        </>
+                      )}
+                    </button>
+                  </div>
+                </div>
+              );
+            })
+          )}
+        </div>
+      </div>
+
+      {/* Add Custom Source Modal */}
+      <AddSourceModal
+        isOpen={isAddSourceModalOpen}
+        onClose={() => setIsAddSourceModalOpen(false)}
+        onAddSource={handleAddSource}
+      />
+
+      {/* Floating Toast */}
+      {toastMessage && (
+        <div className="fixed bottom-6 right-6 z-50 bg-ink text-paper text-xs font-medium px-4 py-2.5 rounded-lg shadow-lg animate-in fade-in slide-in-from-bottom-2 duration-150 flex items-center gap-2">
+          <Check size={14} />
+          <span>{toastMessage}</span>
+        </div>
+      )}
+    </div>
+  );
+}

package/src/client/components/settings/categories/SkillSettings.tsx

@@ -0,0 +1,69 @@
+import { useState } from 'preact/hooks';
+import type { SettingsState, SkillItem } from '@/shared/types';
+import { SkillSidebarList } from '@/client/components/settings/categories/skill-settings/SidebarList';
+import { SkillDetailPane } from '@/client/components/settings/categories/skill-settings/DetailPane';
+import { LoadingState } from '@/client/components/settings/LoadingState';
+import { useCrudList } from '@/client/hooks/settings/crud-list';
+
+interface SkillSettingsProps {
+  settings?: SettingsState;
+  onUpdate?: (updater: Partial<SettingsState> | ((prev: SettingsState) => SettingsState)) => void;
+  onNavigateToCatalog?: () => void;
+}
+
+export function SkillSettings({ onNavigateToCatalog }: SkillSettingsProps) {
+  const [selectedProjectId, setSelectedProjectId] = useState('ompchamber');
+  const { items: skills, selectedId, selected: selectedSkill, isCreatingNew, isLoading, select, startCreate, save, remove } =
+    useCrudList<SkillItem, Partial<SkillItem>>({
+      endpoint: '/api/settings/skills',
+      listKey: 'skills',
+      bodyKey: 'skill',
+      messages: {
+        load: 'Failed to load skills from API:',
+        save: 'Failed to save skill via API:',
+        delete: 'Failed to delete skill via API:',
+      },
+      cacheKey: 'command',
+      fallbackToFirst: false,
+      buildNew: (skillData) => ({
+        id: `skill-${Date.now()}`,
+        name: skillData.name || 'new-skill',
+        description: skillData.description || '',
+        location: skillData.location || 'user',
+        locationLabel: skillData.locationLabel || 'User / OpenCode',
+        instructions: skillData.instructions || '',
+        project: selectedProjectId,
+      }),
+      buildUpdate: (skillData, selected, selectedId) => ({
+        ...(selected || { id: selectedId || `skill-${Date.now()}` }),
+        ...skillData,
+      }) as SkillItem,
+      isDeleteError: (data) => Boolean((data as { error?: string } | null)?.error),
+    });
+
+  if (isLoading) {
+    return <LoadingState>Loading skills from database...</LoadingState>;
+  }
+
+  return (
+    <div className="flex-1 flex flex-col md:flex-row h-full w-full overflow-hidden bg-paper">
+      <SkillSidebarList
+        skills={skills}
+        selectedSkillId={selectedId}
+        isCreatingNew={isCreatingNew}
+        onSelectSkill={select}
+        onAddNewSkill={startCreate}
+        selectedProject={selectedProjectId}
+        onSelectProject={setSelectedProjectId}
+      />
+
+      <SkillDetailPane
+        skill={selectedSkill ?? null}
+        isCreatingNew={isCreatingNew}
+        onSave={save}
+        onDelete={remove}
+        onOpenCatalog={onNavigateToCatalog}
+      />
+    </div>
+  );
+}