ompchamber 0.3.0

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

@@ -0,0 +1,153 @@
+import type { LucideIcon } from 'lucide-preact';
+import { BarChart3, Bell, BookOpen, Bot, Boxes, Cloud, Coins, Cpu, FolderGit, Library, MessageSquare, Palette, RefreshCw, Search, Sliders, Terminal, X } from 'lucide-preact';
+import type { SettingsCategoryId } from '@/shared/types';
+
+export interface CategoryDef {
+  id: SettingsCategoryId;
+  label: string;
+  icon: LucideIcon;
+  section: 'OMPCHAMBER' | 'WORKSPACE' | 'OMP' | 'LIBRARY';
+  badge?: string;
+  description: string;
+}
+
+export const SETTINGS_CATEGORIES: CategoryDef[] = [
+  // OMPCHAMBER
+  { id: 'appearance', label: 'Appearance', icon: Palette, section: 'OMPCHAMBER', description: 'Custom themes, typography scale, and layout density.' },
+  { id: 'chats', label: 'Chats', icon: MessageSquare, section: 'OMPCHAMBER', description: 'Message streaming, thinking blocks, and tool view modes.' },
+  { id: 'notifications', label: 'Notifications', icon: Bell, section: 'OMPCHAMBER', description: 'Build failure alerts, sounds, and system popups.' },
+  { id: 'usage', label: 'Usage', icon: BarChart3, section: 'OMPCHAMBER', description: 'Build minutes quota, storage, and general usage.' },
+  { id: 'token-usage', label: 'Token Usage', icon: Coins, section: 'OMPCHAMBER', description: 'Token telemetry, cache, and cost breakdown.' },
+  // WORKSPACE
+  { id: 'projects', label: 'Projects', icon: FolderGit, section: 'WORKSPACE', description: 'Workspace directories, roots, and ignored paths.' },
+  // OMP
+  { id: 'omp', label: 'OMP Engine', icon: Cpu, section: 'OMP', description: 'Live agent state and native omp config keys.' },
+  { id: 'providers', label: 'Providers', icon: Cloud, section: 'OMP', description: 'AI model engines, endpoints, and credentials.' },
+  { id: 'agents', label: 'Agents', icon: Bot, section: 'OMP', description: 'Autonomous agent persona, self-healing, and reasoning.' },
+  { id: 'behavior', label: 'Behavior', icon: Sliders, section: 'OMP', description: 'Native AGENTS.md and RULES.md — global instructions, permission gates, and safety filters.' },
+  { id: 'commands', label: 'Commands', icon: Terminal, section: 'OMP', description: 'Slash command macros and terminal shortcuts.' },
+  { id: 'mcp', label: 'MCP', icon: Boxes, section: 'OMP', description: 'Model Context Protocol servers and dynamic tools.' },
+  // LIBRARY
+  { id: 'skills', label: 'Skills', icon: Library, section: 'LIBRARY', description: 'Manage downloaded skills and scripts.' },
+  { id: 'skills-catalog', label: 'Skills Catalog', icon: BookOpen, section: 'LIBRARY', description: 'Browse and install new skills.' },
+];
+
+interface SettingsSidebarProps {
+  activeCategory: SettingsCategoryId;
+  onSelectCategory: (id: SettingsCategoryId) => void;
+  searchQuery: string;
+  onSearchChange: (q: string) => void;
+  onReloadOmpEngine: () => void;
+  isReloading: boolean;
+  className?: string;
+}
+
+export function SettingsSidebar({
+  activeCategory,
+  onSelectCategory,
+  searchQuery,
+  onSearchChange,
+  onReloadOmpEngine,
+  isReloading,
+  className = ''
+}: SettingsSidebarProps) {
+  const filteredCategories = SETTINGS_CATEGORIES.filter(cat => {
+    if (!searchQuery.trim()) return true;
+    const q = searchQuery.toLowerCase();
+    return cat.label.toLowerCase().includes(q) ||
+      cat.section.toLowerCase().includes(q) ||
+      cat.description.toLowerCase().includes(q);
+  });
+
+  const sections: Array<'OMPCHAMBER' | 'WORKSPACE' | 'OMP' | 'LIBRARY'> = ['OMPCHAMBER', 'WORKSPACE', 'OMP', 'LIBRARY'];
+
+  return (
+    <div className={`flex flex-col h-full bg-canvas border-r border-ink/10 text-ink select-none ${className}`}>
+      {/* Search Bar */}
+      <div className="p-3 border-b border-ink/10 flex-shrink-0">
+        <div className="relative flex items-center">
+          <Search size={14} className="absolute left-2.5 text-ink/40 pointer-events-none" />
+          <input
+            type="text"
+            placeholder="Search settings"
+            value={searchQuery}
+            onChange={(e) => onSearchChange(e.currentTarget.value)}
+            className="w-full bg-paper border border-ink/15 rounded-lg pl-8 pr-7 py-1.5 text-xs text-ink placeholder-ink/40 focus:outline-none focus:border-ink/40 transition-colors"
+          />
+          {searchQuery && (
+            <button
+              type="button"
+              onClick={() => onSearchChange('')}
+              className="absolute right-2 text-ink/40 hover:text-ink p-0.5"
+            >
+              <X size={12} />
+            </button>
+          )}
+        </div>
+      </div>
+
+      {/* Category Navigation Items */}
+      <div className="flex-1 scrollbar-overlay-container scrollbar-overlay-static p-2 space-y-4">
+        {filteredCategories.length === 0 ? (
+          <div className="text-center py-8 text-xs text-ink/50 italic">
+            No matching settings found
+          </div>
+        ) : (
+          sections.map(section => {
+            const items = filteredCategories.filter(c => c.section === section);
+            if (items.length === 0) return null;
+
+            return (
+              <div key={section} className="space-y-1">
+                <div className="px-2.5 py-1 text-[10px] font-bold text-ink/40 tracking-wider font-mono uppercase">
+                  {section}
+                </div>
+                <div className="space-y-0.5">
+                  {items.map(item => {
+                    const Icon = item.icon;
+                    const isActive = activeCategory === item.id;
+                    return (
+                      <button
+                        key={item.id}
+                        type="button"
+                        onClick={() => onSelectCategory(item.id)}
+                        className={`w-full flex items-center justify-between px-2.5 py-1.5 rounded-lg text-xs transition-all text-left ${
+                          isActive
+                            ? 'bg-ink/10 font-semibold text-ink shadow-2xs'
+                            : 'text-ink/75 hover:bg-ink/5 hover:text-ink'
+                        }`}
+                      >
+                        <div className="flex items-center space-x-2.5 truncate">
+                          <Icon size={14} className={isActive ? 'text-ink' : 'text-ink/60'} />
+                          <span className="truncate">{item.label}</span>
+                        </div>
+                        {item.badge && (
+                          <span className="px-1.5 py-0.2 text-[9px] font-mono font-medium rounded bg-amber-500/15 text-amber-900 border border-amber-500/20">
+                            {item.badge}
+                          </span>
+                        )}
+                      </button>
+                    );
+                  })}
+                </div>
+              </div>
+            );
+          })
+        )}
+      </div>
+
+      {/* Bottom Action: Reload OMP Engine */}
+      <div className="p-2 border-t border-ink/10 flex-shrink-0 bg-canvas">
+        <button
+          type="button"
+          onClick={onReloadOmpEngine}
+          disabled={isReloading}
+          className="w-full flex items-center space-x-2 px-2.5 py-1.5 text-xs text-ink/75 hover:text-ink hover:bg-ink/5 rounded-lg transition-colors font-medium cursor-pointer"
+        >
+          <RefreshCw size={13} className={`${isReloading ? 'animate-spin text-warning' : 'text-ink/60'}`} />
+          <span>{isReloading ? 'Reloading OMP Engine...' : 'Reload OMP Engine'}</span>
+        </button>
+      </div>
+    </div>
+  );
+}

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

@@ -0,0 +1,84 @@
+import { useState } from 'preact/hooks';
+import type { FunctionComponent } from 'preact/compat';
+import type { AgentItem, SettingsState } from '@/shared/types';
+import { AgentSidebarList } from '@/client/components/settings/categories/agent-settings/SidebarList';
+import { AgentDetailPane } from '@/client/components/settings/categories/agent-settings/DetailPane';
+import { LoadingState } from '@/client/components/settings/LoadingState';
+import { useCrudList } from '@/client/hooks/settings/crud-list';
+
+interface AgentSettingsProps {
+  settings: SettingsState;
+  onUpdate: (settings: SettingsState) => void;
+}
+
+export const AgentSettings: FunctionComponent<AgentSettingsProps> = () => {
+  const [selectedProject, setSelectedProject] = useState('ompchamber');
+  const { items: agents, selectedId, selected: selectedAgent, isCreatingNew, isLoading, select, startCreate, save, remove } =
+    useCrudList<AgentItem>({
+      endpoint: '/api/settings/agents',
+      listKey: 'agents',
+      bodyKey: 'agent',
+      messages: {
+        load: 'Failed to load agents from API:',
+        save: 'Failed to save agent via API:',
+        delete: 'Failed to delete agent via API:',
+      },
+      cacheKey: 'agent',
+      buildNew: (updated) => ({ ...updated, id: `agent-${Date.now()}`, isBuiltIn: false }),
+      buildUpdate: (updated) => updated,
+      isDeleteError: (data) => Boolean((data as { error?: string } | null)?.error),
+    });
+
+  const emptyAgentTemplate: AgentItem = {
+    id: `new-${Date.now()}`,
+    name: 'new-agent',
+    description: '',
+    scope: 'user',
+    mode: 'subagent',
+    overrideModel: 'Not selected',
+    thinkingVariant: 'default',
+    temperature: null,
+    topP: null,
+    systemPrompt: 'You are a specialized assistant...',
+    isBuiltIn: false,
+  };
+
+  if (isLoading) {
+    return <LoadingState>Loading agents from database...</LoadingState>;
+  }
+
+  return (
+    <div className="flex h-full w-full overflow-hidden bg-paper">
+      <AgentSidebarList
+        agents={agents}
+        selectedAgentId={isCreatingNew ? null : selectedId}
+        onSelectAgent={select}
+        onAddNewAgent={startCreate}
+        selectedProject={selectedProject}
+        onChangeProject={setSelectedProject}
+      />
+
+      <div className="flex-1 h-full overflow-hidden flex flex-col">
+        {isCreatingNew ? (
+          <AgentDetailPane
+            agent={emptyAgentTemplate}
+            isNew={true}
+            onSave={save}
+          />
+        ) : selectedAgent ? (
+          <AgentDetailPane
+            key={selectedAgent.id}
+            agent={selectedAgent}
+            isNew={false}
+            onSave={save}
+            onDelete={remove}
+          />
+        ) : (
+          <div className="flex-1 flex items-center justify-center text-xs font-mono text-ink/40">
+            Select an agent or click + to create one
+          </div>
+        )}
+      </div>
+    </div>
+  );
+};

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

@@ -0,0 +1,50 @@
+import { Check, Moon, Palette, Sun } from 'lucide-preact';
+import type { SettingsState } from '@/shared/types';
+
+interface AppearanceSettingsProps {
+  settings: SettingsState;
+  onUpdate: (updater: Partial<SettingsState> | ((prev: SettingsState) => SettingsState)) => void;
+}
+
+export function AppearanceSettings({ settings, onUpdate }: AppearanceSettingsProps) {
+  const themes = [
+    { id: 'paper', name: 'E-Ink Paper', desc: 'Tema terang bawaan E-Ink Monochrome.', icon: Sun },
+    { id: 'one-dark-pro-soft', name: 'One Dark Pro Soft', desc: 'Tema gelap ala One Dark Pro.', icon: Moon }
+  ] as const;
+
+  return (
+    <div className="w-full space-y-8 text-xs text-ink">
+      <section className="space-y-4">
+        <div className="flex items-center space-x-2 border-b border-ink/10 pb-2">
+          <Palette size={16} className="text-ink/60" />
+          <h3 className="font-semibold text-sm uppercase tracking-wider text-ink/80">Theme Preferences</h3>
+        </div>
+
+        <div className="grid grid-cols-1 md:grid-cols-2 gap-3">
+          {themes.map(theme => (
+            <button
+              key={theme.id}
+              onClick={() => onUpdate({ theme: theme.id })}
+              className={`flex items-start space-x-3 p-3 rounded-lg border text-left transition-all ${
+                settings.theme === theme.id 
+                  ? 'border-ink bg-ink/5 ring-1 ring-ink/20' 
+                  : 'border-ink/20 bg-paper hover:border-ink/40 hover:bg-ink/5'
+              }`}
+            >
+              <div className={`p-1.5 rounded-full ${settings.theme === theme.id ? 'bg-ink text-paper' : 'bg-canvas text-ink/60'}`}>
+                <theme.icon size={16} />
+              </div>
+              <div className="flex-1">
+                <div className="font-semibold text-ink">{theme.name}</div>
+                <div className="text-ink/60 mt-0.5 leading-relaxed">{theme.desc}</div>
+              </div>
+              {settings.theme === theme.id && (
+                <Check size={16} className="text-ink mt-1" />
+              )}
+            </button>
+          ))}
+        </div>
+      </section>
+    </div>
+  );
+}

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

@@ -0,0 +1,73 @@
+import { useState } from 'preact/hooks';
+import type { FunctionComponent } from 'preact/compat';
+import type { InstructionFileKind } from '@/shared/types';
+import { BehaviorEditor } from '@/client/components/settings/categories/behavior-settings/Editor';
+import { LoadingState } from '@/client/components/settings/LoadingState';
+import { useInstructionFile } from '@/client/hooks/settings/instruction-file';
+
+/** The two native user instruction files, in the order omp loads them. */
+const TABS: Array<{ kind: InstructionFileKind; label: string; hint: string }> = [
+  { kind: 'agents', label: 'AGENTS.md', hint: 'context file' },
+  { kind: 'rules', label: 'RULES.md', hint: 'sticky rule' },
+];
+
+/**
+ * Behavior rules live in omp's native user instruction files, and this panel
+ * reads and writes them directly: AGENTS.md (context file, loaded when a
+ * session starts) and RULES.md (sticky rule, re-sent on every request).
+ * MOCK=true keeps the demo on chamber-local preset rows instead of the real
+ * agent directory.
+ */
+export const BehaviorSettings: FunctionComponent = () => {
+  const [activeKind, setActiveKind] = useState<InstructionFileKind>('agents');
+  const agents = useInstructionFile('agents');
+  const rules = useInstructionFile('rules');
+  const active = activeKind === 'agents' ? agents : rules;
+  const activeTab = TABS.find((tab) => tab.kind === activeKind) ?? TABS[0];
+
+  return (
+    <div className="h-full w-full overflow-hidden flex flex-col bg-paper">
+      {/* File Tabs */}
+      <div className="flex items-center gap-1.5 px-6 md:px-8 pt-5">
+        {TABS.map((tab) => (
+          <button
+            key={tab.kind}
+            type="button"
+            onClick={() => setActiveKind(tab.kind)}
+            className={`px-3 py-1.5 text-xs font-mono rounded-lg border transition-colors cursor-pointer ${
+              tab.kind === activeKind
+                ? 'border-ink bg-ink text-paper'
+                : 'border-ink/20 text-ink/60 hover:border-ink/40 hover:bg-ink/5'
+            }`}
+          >
+            {tab.label}
+            <span className="ml-2 opacity-60">{tab.hint}</span>
+          </button>
+        ))}
+      </div>
+
+      {active.error && (
+        <div className="mx-6 md:mx-8 mt-3 px-3 py-2 text-xs font-mono text-error bg-error/5 border border-error/30 rounded-lg">
+          Failed to load {active.filePath ?? activeTab.label}: {active.error}
+        </div>
+      )}
+
+      {active.isLoading ? (
+        <LoadingState variant="fill">
+          Loading {activeTab.label} from {active.filePath ?? 'the preset store'}...
+        </LoadingState>
+      ) : (
+        <BehaviorEditor
+          key={activeKind}
+          kind={activeKind}
+          content={active.content}
+          filePath={active.filePath}
+          exists={active.exists}
+          isMock={active.isMock}
+          onSave={active.save}
+          onReset={activeKind === 'agents' ? active.reset : undefined}
+        />
+      )}
+    </div>
+  );
+};

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

@@ -0,0 +1,24 @@
+import type { SettingsState } from '@/shared/types';
+import { ChatFollowUpSection } from '@/client/components/settings/categories/chat-settings/FollowUpSection';
+import { ChatKeybindingsSection } from '@/client/components/settings/categories/chat-settings/KeybindingsSection';
+import { ChatTransportSection } from '@/client/components/settings/categories/chat-settings/TransportSection';
+
+interface ChatSettingsProps {
+  settings: SettingsState;
+  onUpdate: (updater: Partial<SettingsState> | ((prev: SettingsState) => SettingsState)) => void;
+}
+
+export function ChatSettings({ settings, onUpdate }: ChatSettingsProps) {
+  return (
+    <div className="w-full space-y-7 text-xs text-ink">
+      {/* 1. Streaming Transport (WebSocket vs SSE) */}
+      <ChatTransportSection settings={settings} onUpdate={onUpdate} />
+
+      {/* 2. Follow-up Behavior (Interactive Selector Cards) */}
+      <ChatFollowUpSection settings={settings} onUpdate={onUpdate} />
+
+      {/* 3. Keyboard Shortcuts Configurator */}
+      <ChatKeybindingsSection settings={settings} onUpdate={onUpdate} />
+    </div>
+  );
+}

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

@@ -0,0 +1,81 @@
+import { useState } from 'preact/hooks';
+import type { FunctionComponent } from 'preact/compat';
+import type { CommandItem, SettingsState } from '@/shared/types';
+import { CommandSidebarList } from '@/client/components/settings/categories/command-settings/SidebarList';
+import { CommandDetailPane } from '@/client/components/settings/categories/command-settings/DetailPane';
+import { LoadingState } from '@/client/components/settings/LoadingState';
+import { useCrudList } from '@/client/hooks/settings/crud-list';
+
+interface CommandSettingsProps {
+  settings: SettingsState;
+  onUpdate: (settings: SettingsState) => void;
+}
+
+export const CommandSettings: FunctionComponent<CommandSettingsProps> = () => {
+  const [selectedProject, setSelectedProject] = useState('ompchamber');
+  const { items: commands, selectedId, selected: selectedCommand, isCreatingNew, isLoading, select, startCreate, save, remove } =
+    useCrudList<CommandItem>({
+      endpoint: '/api/settings/commands',
+      listKey: 'commands',
+      bodyKey: 'command',
+      messages: {
+        load: 'Failed to load commands from API:',
+        save: 'Failed to save command via API:',
+        delete: 'Failed to delete command via API:',
+      },
+      cacheKey: 'command',
+      buildNew: (updated) => ({ ...updated, id: `cmd-${Date.now()}`, isBuiltIn: false }),
+      buildUpdate: (updated) => updated,
+      isDeleteError: (data) => Boolean((data as { error?: string } | null)?.error),
+    });
+
+  const emptyCommandTemplate: CommandItem = {
+    id: `new-${Date.now()}`,
+    name: 'new-command',
+    description: '',
+    scope: 'user',
+    overrideAgent: 'Not selected',
+    overrideModel: 'Not selected',
+    template: 'Execute task: $ARGUMENTS',
+    isBuiltIn: false,
+  };
+
+  if (isLoading) {
+    return <LoadingState>Loading commands from database...</LoadingState>;
+  }
+
+  return (
+    <div className="flex h-full w-full overflow-hidden bg-paper">
+      <CommandSidebarList
+        commands={commands}
+        selectedCommandId={isCreatingNew ? null : selectedId}
+        onSelectCommand={select}
+        onAddNewCommand={startCreate}
+        selectedProject={selectedProject}
+        onChangeProject={setSelectedProject}
+      />
+
+      <div className="flex-1 h-full overflow-hidden flex flex-col">
+        {isCreatingNew ? (
+          <CommandDetailPane
+            command={emptyCommandTemplate}
+            isNew={true}
+            onSave={save}
+          />
+        ) : selectedCommand ? (
+          <CommandDetailPane
+            key={selectedCommand.id}
+            command={selectedCommand}
+            isNew={false}
+            onSave={save}
+            onDelete={remove}
+          />
+        ) : (
+          <div className="flex-1 flex items-center justify-center text-xs font-mono text-ink/40">
+            Select a command or click + to create one
+          </div>
+        )}
+      </div>
+    </div>
+  );
+};

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

@@ -0,0 +1,142 @@
+import { useMemo, useState } from 'preact/hooks';
+import type { FunctionComponent } from 'preact/compat';
+import type { McpServerItem, SettingsState } from '@/shared/types';
+import { McpSidebarList } from '@/client/components/settings/categories/mcp-settings/SidebarList';
+import type { McpProjectOption } from '@/client/components/settings/categories/mcp-settings/SidebarList';
+import { McpDetailPane } from '@/client/components/settings/categories/mcp-settings/DetailPane';
+import { McpImportModal } from '@/client/components/settings/categories/mcp-settings/ImportModal';
+import { LoadingState } from '@/client/components/settings/LoadingState';
+import { useSidebarData } from '@/client/hooks/chat/omp/session-list';
+import { useCrudList } from '@/client/hooks/settings/crud-list';
+
+interface McpSettingsProps {
+  settings: SettingsState;
+  onUpdate: (settings: SettingsState) => void;
+}
+
+const GLOBAL_PROJECT: McpProjectOption = { id: 'global', name: 'Global (all projects)', path: '' };
+
+export const McpSettings: FunctionComponent<McpSettingsProps> = () => {
+  const { folders } = useSidebarData();
+  const projects = useMemo<McpProjectOption[]>(() => {
+    const bound = folders.flatMap<McpProjectOption>((folder) =>
+      folder.project_path ? [{ id: String(folder.id), name: folder.name, path: folder.project_path }] : [],
+    );
+    return [GLOBAL_PROJECT, ...bound];
+  }, [folders]);
+
+  const [isImportModalOpen, setIsImportModalOpen] = useState(false);
+  const [selectedProject, setSelectedProject] = useState('');
+
+  const query = selectedProject ? `?project=${encodeURIComponent(selectedProject)}` : '';
+
+  const { items: servers, selectedId, selected: selectedServer, isCreatingNew, isLoading, select, startCreate, save, remove } =
+    useCrudList<McpServerItem>({
+      endpoint: '/api/settings/mcp',
+      listKey: 'servers',
+      bodyKey: 'server',
+      query,
+      messages: {
+        load: 'Failed to load MCP servers from API:',
+        save: 'Failed to save MCP server via API:',
+        delete: 'Failed to delete MCP server via API:',
+      },
+      serverListOnly: true,
+      deleteFromResponse: true,
+      buildNew: (updated) => ({ ...updated, id: `mcp-${Date.now()}` }),
+      buildUpdate: (updated) => updated,
+      buildBody: (target) =>
+        selectedProject ? { server: target, projectPath: selectedProject } : { server: target },
+      buildDeleteQuery: (id) => {
+        const params = new URLSearchParams({ id });
+        if (selectedProject) params.set('projectPath', selectedProject);
+        return `?${params.toString()}`;
+      },
+      readList: (data) => (Array.isArray((data as { servers?: unknown } | null)?.servers) ? (data as { servers: McpServerItem[] }).servers : null),
+      resolveOnLoad: (prev, list) => (prev && list.some((s) => s.id === prev) ? prev : list[0]?.id ?? null),
+      resolveOnSave: (target, list) => {
+        if (!list) return undefined;
+        const saved = list.find((s) => s.name.toLowerCase() === target.name.toLowerCase());
+        return saved?.id ?? target.id;
+      },
+      isSaveError: (data) => {
+        const error = (data as { error?: string } | null)?.error;
+        if (error) {
+          console.error('Failed to save MCP server via API:', error);
+          return true;
+        }
+        return false;
+      },
+      isDeleteError: (data) => {
+        const error = (data as { error?: string } | null)?.error;
+        if (error) {
+          console.error('Failed to delete MCP server via API:', error);
+          return true;
+        }
+        return false;
+      },
+    });
+
+  const handleImportServer = (imported: McpServerItem) => {
+    save(imported);
+  };
+
+  const emptyServerTemplate: McpServerItem = {
+    id: `new-${Date.now()}`,
+    name: 'new-mcp-server',
+    scope: 'every-project',
+    enabled: true,
+    reachType: 'command',
+    commandArgs: ['bunx', '@modelcontextprotocol/server-everything'],
+    envVars: [],
+    status: 'active',
+  };
+
+  if (isLoading) {
+    return <LoadingState>Loading MCP servers from database...</LoadingState>;
+  }
+
+  return (
+    <div className="flex h-full w-full overflow-hidden bg-paper">
+      <McpSidebarList
+        servers={servers}
+        projects={projects}
+        selectedServerId={isCreatingNew ? null : selectedId}
+        onSelectServer={select}
+        onAddNewServer={startCreate}
+        selectedProject={selectedProject}
+        onChangeProject={setSelectedProject}
+      />
+
+      <div className="flex-1 h-full overflow-hidden flex flex-col">
+        {isCreatingNew ? (
+          <McpDetailPane
+            server={emptyServerTemplate}
+            isNew={true}
+            onSave={save}
+            onOpenImportModal={() => setIsImportModalOpen(true)}
+          />
+        ) : selectedServer ? (
+          <McpDetailPane
+            key={selectedServer.id}
+            server={selectedServer}
+            isNew={false}
+            onSave={save}
+            onDelete={remove}
+            onOpenImportModal={() => setIsImportModalOpen(true)}
+          />
+        ) : (
+          <div className="flex-1 flex items-center justify-center text-xs font-mono text-ink/40">
+            Select an MCP server or click + to configure one
+          </div>
+        )}
+      </div>
+
+      <McpImportModal
+        isOpen={isImportModalOpen}
+        onClose={() => setIsImportModalOpen(false)}
+        onImport={handleImportServer}
+      />
+    </div>
+  );
+};