ompchamber 0.3.0

package/src/client/components/settings/Modal.tsx

@@ -0,0 +1,277 @@
+import { useEffect, useState } from 'preact/hooks';
+import { Check, ChevronLeft, X } from 'lucide-preact';
+import type { SettingsCategoryId, SettingsState } from '@/shared/types';
+import { mergeChamberSettings } from '@/shared/lib/settings/client';
+import { useChamberSettingsWriter } from '@/client/hooks/settings/use-chamber-setting';
+import { useChamberEvent } from '@/client/hooks/ui/window-event';
+import { SETTINGS_CATEGORIES, SettingsSidebar } from '@/client/components/settings/Sidebar';
+import { AppearanceSettings } from '@/client/components/settings/categories/AppearanceSettings';
+import { ChatSettings } from '@/client/components/settings/categories/ChatSettings';
+import { ProjectSettings } from '@/client/components/settings/categories/ProjectSettings';
+import { ProviderSettings } from '@/client/components/settings/categories/ProviderSettings';
+import { AgentSettings } from '@/client/components/settings/categories/AgentSettings';
+import { BehaviorSettings } from '@/client/components/settings/categories/BehaviorSettings';
+import { CommandSettings } from '@/client/components/settings/categories/CommandSettings';
+import { McpSettings } from '@/client/components/settings/categories/McpSettings';
+import { SkillSettings } from '@/client/components/settings/categories/SkillSettings';
+import { SkillCatalogSettings } from '@/client/components/settings/categories/SkillCatalogSettings';
+import { OtherSettings } from '@/client/components/settings/categories/OtherSettings';
+import { OmpSettings } from '@/client/components/settings/categories/OmpSettings';
+import { TokenUsageSettings } from '@/client/components/settings/categories/TokenUsageSettings';
+import { UsageSettings } from '@/client/components/settings/categories/UsageSettings';
+import { NotificationSettings } from '@/client/components/settings/categories/NotificationSettings';
+
+interface SettingsModalProps {
+  isOpen: boolean;
+  onClose: () => void;
+  initialCategory?: SettingsCategoryId;
+  appSettings?: Record<string, any>;
+  autoOpenAddProvider?: boolean;
+}
+
+const DEFAULT_SETTINGS: SettingsState = {
+  binaryPath: '/Users/you/.bun/bin/omp',
+  showUpdateNotifications: true,
+  agentControlTool: true,
+  ompChamberWebTool: true,
+  theme: 'paper',
+  fontSize: 'standard',
+  editorFont: 'JetBrains Mono',
+  streamResponses: true,
+  streamTransport: 'websocket',
+  expandedThinking: true,
+  detailedToolCalls: false,
+  notificationsEnabled: true,
+  buildFailureAlert: true,
+  soundAlerts: true,
+  chatCompletionSound: true,
+  defaultWorkspacePath: '~/Projects/ompchamber',
+  tunnelEnabled: true,
+  tunnelSubdomain: 'omp-dev-preview',
+  activeProvider: 'claude',
+  autoApproveSafeCmds: true,
+  autoPatchErrors: true,
+  followUpBehavior: 'queue',
+  keybindingSend: 'Enter',
+  keybindingNewLine: 'Shift + Enter',
+  keybindingSteering: 'Ctrl / Cmd + Enter'
+};
+
+export function SettingsModal({ 
+  isOpen, 
+  onClose, 
+  initialCategory = 'appearance',
+  appSettings = {},
+  autoOpenAddProvider = false,
+}: SettingsModalProps) {
+  const [activeCategory, setActiveCategory] = useState<SettingsCategoryId>(initialCategory);
+  const [autoOpenAdd, setAutoOpenAdd] = useState(autoOpenAddProvider);
+  const [searchQuery, setSearchQuery] = useState('');
+  const [isReloading, setIsReloading] = useState(false);
+  const [isMobileDrilled, setIsMobileDrilled] = useState(false);
+  const [toastMessage, setToastMessage] = useState<string | null>(null);
+  const writeChamberSettings = useChamberSettingsWriter();
+
+  const [settings, setSettings] = useState<SettingsState>(() =>
+    mergeChamberSettings(DEFAULT_SETTINGS, appSettings),
+  );
+
+  useEffect(() => {
+    if (isOpen) {
+      setActiveCategory(initialCategory);
+      setAutoOpenAdd(autoOpenAddProvider);
+      setIsMobileDrilled(false);
+      setSearchQuery('');
+    }
+  }, [isOpen, initialCategory, autoOpenAddProvider]);
+
+  // Global event listener for direct trigger
+  useChamberEvent('omp:open-settings', (e) => {
+    const customEvent = e as CustomEvent<{ category?: SettingsCategoryId; autoOpenAdd?: boolean }>;
+    if (customEvent.detail?.category) {
+      setActiveCategory(customEvent.detail.category);
+    }
+    if (customEvent.detail?.autoOpenAdd) {
+      setAutoOpenAdd(true);
+    }
+  });
+
+  const handleUpdateSettings = (updater: Partial<SettingsState> | ((prev: SettingsState) => SettingsState)) => {
+    setSettings(prev => {
+      const next = typeof updater === 'function' ? updater(prev) : { ...prev, ...updater };
+      if (typeof document !== 'undefined' && next.theme) {
+        document.documentElement.dataset.theme = next.theme;
+      }
+      writeChamberSettings(next);
+      return next;
+    });
+    setToastMessage('Setting was saved');
+    setTimeout(() => setToastMessage(null), 3000);
+  };
+
+  const handleReloadOmpEngine = () => {
+    setIsReloading(true);
+    setTimeout(() => {
+      setIsReloading(false);
+    }, 1200);
+  };
+
+  const handleSelectCategory = (catId: SettingsCategoryId) => {
+    setActiveCategory(catId);
+    setIsMobileDrilled(true);
+  };
+
+  if (!isOpen) return null;
+
+  const currentCategoryDef = SETTINGS_CATEGORIES.find(c => c.id === activeCategory) || SETTINGS_CATEGORIES[0];
+
+  const renderCategoryContent = () => {
+    switch (activeCategory) {
+      case 'appearance':
+        return <AppearanceSettings settings={settings} onUpdate={handleUpdateSettings} />;
+      case 'chats':
+        return <ChatSettings settings={settings} onUpdate={handleUpdateSettings} />;
+      case 'projects':
+        return <ProjectSettings />;
+      case 'providers':
+        return (
+          <ProviderSettings
+            autoOpenAdd={autoOpenAdd}
+            onAddModalClose={() => setAutoOpenAdd(false)}
+          />
+        );
+      case 'agents':
+        return <AgentSettings settings={settings} onUpdate={handleUpdateSettings} />;
+      case 'behavior':
+        return <BehaviorSettings />;
+      case 'commands':
+        return <CommandSettings settings={settings} onUpdate={handleUpdateSettings} />;
+      case 'mcp':
+        return <McpSettings settings={settings} onUpdate={handleUpdateSettings} />;
+      case 'token-usage':
+        return <TokenUsageSettings settings={settings} onUpdate={handleUpdateSettings} />;
+      case 'notifications':
+        return <NotificationSettings settings={settings} onUpdate={handleUpdateSettings} />;
+      case 'skills':
+        return (
+          <SkillSettings
+            settings={settings}
+            onUpdate={handleUpdateSettings}
+            onNavigateToCatalog={() => setActiveCategory('skills-catalog')}
+          />
+        );
+      case 'skills-catalog':
+        return <SkillCatalogSettings />;
+      case 'omp':
+        return <OmpSettings settings={settings} onUpdate={handleUpdateSettings} />;
+      case 'usage':
+        return <UsageSettings />;
+      default:
+        return <OtherSettings category={activeCategory} />;
+    }
+  };
+
+  return (
+    <div
+      className="fixed inset-0 bg-ink/40 backdrop-blur-[2px] z-50 flex items-center justify-center p-0 md:p-6 animate-in fade-in duration-150"
+      onClick={onClose}
+    >
+      <div
+        className="relative bg-paper border border-ink/15 md:rounded-2xl shadow-2xl w-full h-full md:max-w-4xl lg:max-w-5xl xl:max-w-[1150px] md:h-[782px] md:max-h-[92vh] flex flex-col md:flex-row overflow-hidden text-ink"
+        onClick={(e) => e.stopPropagation()}
+      >
+        {/* DESKTOP VIEW: 2-Column Split */}
+        <div className="hidden md:flex w-64 flex-shrink-0 h-full">
+          <SettingsSidebar
+            activeCategory={activeCategory}
+            onSelectCategory={(catId) => setActiveCategory(catId)}
+            searchQuery={searchQuery}
+            onSearchChange={setSearchQuery}
+            onReloadOmpEngine={handleReloadOmpEngine}
+            isReloading={isReloading}
+            className="w-full"
+          />
+        </div>
+
+        {/* DESKTOP & MOBILE DETAIL VIEW */}
+        <div className={`flex-1 flex-col h-full bg-paper overflow-hidden ${isMobileDrilled ? 'flex' : 'hidden md:flex'}`}>
+          {/* Header Bar */}
+          <div className="h-16 px-6 border-b border-ink/10 flex items-center justify-between flex-shrink-0 bg-paper">
+            <div className="flex items-center space-x-3 min-w-0">
+              {/* Mobile Back Button */}
+              <button
+                type="button"
+                onClick={() => setIsMobileDrilled(false)}
+                className="md:hidden p-1.5 -ml-2 rounded-lg hover:bg-ink/5 active:bg-ink/10 text-ink"
+                aria-label="Back to categories"
+              >
+                <ChevronLeft size={20} />
+              </button>
+
+              <div className="truncate">
+                <h3 className="font-semibold text-base tracking-tight text-ink leading-tight">
+                  {currentCategoryDef.label}
+                </h3>
+                <p className="text-[11px] text-ink/60 truncate hidden sm:block">
+                  {currentCategoryDef.description}
+                </p>
+              </div>
+            </div>
+
+            {/* Modal Close Button */}
+            <button
+              type="button"
+              onClick={onClose}
+              className="p-1.5 rounded-lg text-ink/50 hover:text-ink hover:bg-ink/5 transition-colors cursor-pointer"
+              aria-label="Close settings"
+            >
+              <X size={18} strokeWidth={2.2} />
+            </button>
+          </div>
+
+          {/* Scrollable Settings Body - Full Width across all categories */}
+          <div className={`flex-1 scrollbar-overlay-container scrollbar-overlay-static w-full ${['projects', 'providers', 'agents', 'behavior', 'commands', 'mcp', 'skills', 'skills-catalog', 'usage'].includes(activeCategory) ? 'p-0 flex flex-col' : 'p-6 md:p-8 flex flex-col'}`}>
+            <div className="w-full h-full flex-1 flex flex-col">
+              {renderCategoryContent()}
+            </div>
+          </div>
+        </div>
+
+        {/* MOBILE CATEGORY LIST VIEW (When not drilled into detail) */}
+        <div className={`flex-1 flex-col h-full bg-canvas md:hidden ${isMobileDrilled ? 'hidden' : 'flex'}`}>
+          <div className="h-14 px-4 border-b border-ink/10 flex items-center justify-between flex-shrink-0 bg-canvas">
+            <span className="font-bold text-sm tracking-tight text-ink">Settings</span>
+            <button
+              type="button"
+              onClick={onClose}
+              className="p-1.5 rounded-lg text-ink/50 hover:text-ink"
+              aria-label="Close"
+            >
+              <X size={18} />
+            </button>
+          </div>
+
+          <div className="flex-1 overflow-hidden">
+            <SettingsSidebar
+              activeCategory={activeCategory}
+              onSelectCategory={handleSelectCategory}
+              searchQuery={searchQuery}
+              onSearchChange={setSearchQuery}
+              onReloadOmpEngine={handleReloadOmpEngine}
+              isReloading={isReloading}
+              className="w-full border-r-0"
+            />
+          </div>
+        </div>
+
+        {/* Toast Notification */}
+        {toastMessage && (
+          <div className="absolute bottom-6 left-1/2 transform -translate-x-1/2 bg-ink text-canvas px-4 py-2 rounded-lg text-xs font-semibold shadow-lg animate-in fade-in slide-in-from-bottom-2 z-50 flex items-center space-x-2">
+            <Check size={14} className="text-success" />
+            <span>{toastMessage}</span>
+          </div>
+        )}
+      </div>
+    </div>
+  );
+}

package/src/client/components/settings/ProjectSelectorDropdown.tsx

@@ -0,0 +1,142 @@
+import { useRef, useState } from 'preact/hooks';
+import type { FunctionComponent } from 'preact/compat';
+import { Check, ChevronDown, Folder } from 'lucide-preact';
+import { useOnClickOutside } from '@/client/hooks/ui/on-click-outside';
+
+export interface ProjectOption {
+  id: string;
+  /** Label used by the default variant and the trigger's name lookup. */
+  name: string;
+  /** Label used by the compact (skill) variant. */
+  label: string;
+  /** Value passed to `onChangeProject`; defaults to `id`. */
+  value?: string;
+}
+
+/** Static project list shared by the agent, command, and skill sidebars. */
+export const PROJECT_OPTIONS: ProjectOption[] = [
+  { id: 'ompchamber', name: 'ompchamber', label: 'ompchamber' },
+  { id: 'workspace-edge', name: 'workspace-edge', label: 'workspace-edge' },
+  { id: 'global', name: 'global config', label: 'Global (All Projects)' },
+];
+
+const optionValue = (option: ProjectOption): string => option.value ?? option.id;
+
+const defaultTriggerLabel = (_options: ProjectOption[], selectedProject: string): string =>
+  selectedProject;
+
+interface ProjectSelectorDropdownProps {
+  selectedProject: string;
+  onChangeProject: (value: string) => void;
+  /** Defaults to {@link PROJECT_OPTIONS}. */
+  options?: ProjectOption[];
+  /** Trigger label resolver; defaults to a `name` lookup by value. */
+  getTriggerLabel?: (options: ProjectOption[], selectedProject: string) => string;
+  /** Compact styling used by the skill sidebar (label + check, backdrop). */
+  variant?: 'default' | 'compact';
+}
+
+/**
+ * The project selector that sits at the top of every settings sidebar. The
+ * `default` variant matches the agent/command/MCP markup; `compact` keeps the
+ * skill sidebar's tighter padding, label wording, and check-mark styling.
+ */
+export const ProjectSelectorDropdown: FunctionComponent<ProjectSelectorDropdownProps> = ({
+  selectedProject,
+  onChangeProject,
+  options = PROJECT_OPTIONS,
+  getTriggerLabel = defaultTriggerLabel,
+  variant = 'default',
+}) => {
+  const [isOpen, setIsOpen] = useState(false);
+  const dropdownRef = useRef<HTMLDivElement>(null);
+
+  useOnClickOutside(dropdownRef, () => setIsOpen(false));
+
+  const label = getTriggerLabel(options, selectedProject);
+
+  const optionButtons = options.map((option) => {
+    const value = optionValue(option);
+    const isSelected = selectedProject === value;
+    return (
+      <button
+        key={option.id}
+        type="button"
+        onClick={() => {
+          onChangeProject(value);
+          setIsOpen(false);
+        }}
+        className={
+          variant === 'compact'
+            ? `w-full text-left px-3 py-1.5 text-xs flex items-center justify-between hover:bg-ink/5 transition-colors cursor-pointer ${
+                isSelected ? 'text-ink font-semibold bg-ink/5' : 'text-ink/70'
+              }`
+            : `w-full px-3 py-1.5 text-left text-xs flex items-center justify-between hover:bg-ink/5 transition-colors cursor-pointer ${
+                isSelected ? 'font-semibold text-ink bg-ink/5' : 'text-ink/80'
+              }`
+        }
+      >
+        {variant === 'compact' ? (
+          <>
+            <span className="truncate">{option.label}</span>
+            {isSelected && <Check size={12} className="text-ink flex-shrink-0" />}
+          </>
+        ) : (
+          <div className="flex items-center gap-2 truncate">
+            <Folder size={13} className="text-ink/60" />
+            <span className="truncate">{option.name}</span>
+          </div>
+        )}
+      </button>
+    );
+  });
+
+  if (variant === 'compact') {
+    return (
+      <div className="p-2.5 border-b border-ink/10 relative" ref={dropdownRef}>
+        <button
+          type="button"
+          onClick={() => setIsOpen(!isOpen)}
+          className="w-full flex items-center justify-between px-2.5 py-1.5 rounded-lg border border-ink/20 hover:border-ink/40 bg-paper text-xs text-ink transition-colors cursor-pointer"
+        >
+          <div className="flex items-center gap-2 truncate">
+            <Folder size={14} className="text-ink/60 flex-shrink-0" />
+            <span className="truncate font-medium">{label}</span>
+          </div>
+          <ChevronDown size={14} className="text-ink/50 flex-shrink-0" />
+        </button>
+
+        {isOpen && (
+          <>
+            <div className="fixed inset-0 z-20" onClick={() => setIsOpen(false)} />
+            <div className="absolute left-2.5 right-2.5 top-12 z-30 bg-paper border border-ink/15 rounded-lg shadow-lg py-1 animate-in fade-in zoom-in-95 duration-100">
+              {optionButtons}
+            </div>
+          </>
+        )}
+      </div>
+    );
+  }
+
+  return (
+    <div className="p-3 border-b border-ink/10 relative" ref={dropdownRef}>
+      <button
+        type="button"
+        onClick={() => setIsOpen(!isOpen)}
+        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">{label}</span>
+        </div>
+        <ChevronDown size={14} className="text-ink/50 flex-shrink-0" />
+      </button>
+
+      {isOpen && (
+        <div className="absolute top-12 left-3 right-3 bg-paper border border-ink/20 rounded-lg shadow-lg z-30 py-1 divide-y divide-ink/5 animate-in fade-in zoom-in-95 duration-100">
+          {optionButtons}
+        </div>
+      )}
+    </div>
+  );
+};

package/src/client/components/settings/SettingsSidebarList.tsx

@@ -0,0 +1,122 @@
+import type { ComponentChildren } from 'preact';
+import type { FunctionComponent } from 'preact/compat';
+import { Plus } from 'lucide-preact';
+import { ProjectSelectorDropdown } from '@/client/components/settings/ProjectSelectorDropdown';
+
+export interface SettingsSidebarItem {
+  id: string;
+  name: string;
+  description: string;
+  scope: string;
+  isBuiltIn?: boolean;
+}
+
+interface SettingsSidebarListProps {
+  items: SettingsSidebarItem[];
+  selectedId: string | null;
+  onSelect: (id: string) => void;
+  onAddNew: () => void;
+  addTitle: string;
+  builtInLabel: string;
+  customLabel: string;
+  formatName: (name: string) => string;
+  nameClassName: string;
+  renderIcon: (isBuiltIn: boolean) => ComponentChildren;
+  selectedProject: string;
+  onChangeProject: (project: string) => void;
+}
+
+/**
+ * Shared sidebar for the agent and command settings screens. The two differ
+ * only by icon, name formatting, and section labels, all injected here.
+ */
+export const SettingsSidebarList: FunctionComponent<SettingsSidebarListProps> = ({
+  items,
+  selectedId,
+  onSelect,
+  onAddNew,
+  addTitle,
+  builtInLabel,
+  customLabel,
+  formatName,
+  nameClassName,
+  renderIcon,
+  selectedProject,
+  onChangeProject,
+}) => {
+  const builtInItems = items.filter((item) => item.isBuiltIn);
+  const customItems = items.filter((item) => !item.isBuiltIn);
+
+  const renderItem = (item: SettingsSidebarItem) => {
+    const isSelected = item.id === selectedId;
+    return (
+      <button
+        key={item.id}
+        type="button"
+        onClick={() => onSelect(item.id)}
+        className={`w-full text-left px-2.5 py-2 rounded-lg transition-colors cursor-pointer flex flex-col gap-0.5 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 justify-between gap-1.5">
+          <div className="flex items-center gap-1.5 min-w-0">
+            {renderIcon(Boolean(item.isBuiltIn))}
+            <span className={nameClassName}>{formatName(item.name)}</span>
+          </div>
+          <span className="text-[10px] font-mono uppercase px-1.5 py-0.5 rounded bg-ink/10 text-ink/70 font-medium">
+            {item.scope}
+          </span>
+        </div>
+        <p className="text-[11px] text-ink/60 line-clamp-1 leading-snug pl-5">
+          {item.description}
+        </p>
+      </button>
+    );
+  };
+
+  return (
+    <div className="w-56 sm:w-64 border-r border-ink/10 h-full flex flex-col bg-paper/50 flex-shrink-0 select-none">
+      <ProjectSelectorDropdown
+        selectedProject={selectedProject}
+        onChangeProject={onChangeProject}
+      />
+
+      <div className="px-3.5 py-2.5 border-b border-ink/10 flex items-center justify-between">
+        <span className="text-xs font-semibold text-ink">
+          Total {items.length}
+        </span>
+        <button
+          type="button"
+          onClick={onAddNew}
+          title={addTitle}
+          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>
+
+      <div className="flex-1 scrollbar-overlay-container scrollbar-overlay-static p-1.5 space-y-3 text-xs">
+        <div>
+          <div className="px-2.5 pt-1.5 pb-1 text-[10px] font-bold text-ink/50 uppercase tracking-wider">
+            {builtInLabel}
+          </div>
+          <div className="space-y-0.5">
+            {builtInItems.map(renderItem)}
+          </div>
+        </div>
+
+        <div>
+          <div className="px-2.5 pt-1.5 pb-1 text-[10px] font-bold text-ink/50 uppercase tracking-wider flex items-center justify-between">
+            <span>{customLabel}</span>
+            <span className="text-[10px] font-normal">{customItems.length}</span>
+          </div>
+          <div className="space-y-0.5">
+            {customItems.map(renderItem)}
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+};