ompchamber 3.4.0 → 3.6.0

package/src/client/components/layout/session-sidebar/about-modal/UpdateLog.tsx

@@ -0,0 +1,50 @@
+import { useEffect, useRef } from 'preact/hooks';
+import { Loader2, Terminal } from 'lucide-preact';
+import { updateLogText, type UpdateLogState } from '@/shared/lib/updates/progress';
+
+interface UpdateLogProps {
+  state: UpdateLogState;
+  /** A run is in flight: the label says so and the tail keeps following it. */
+  active: boolean;
+}
+
+/**
+ * The update's own output, as it arrives.
+ *
+ * A live install prints the commands it runs and what they answered, and that
+ * is the only honest progress signal available — there is no percentage to
+ * report. It follows the tail while the run is active so the newest line stays
+ * on screen, and stays readable afterwards, because the failure that matters
+ * explains itself in the last few lines.
+ */
+export function UpdateLog({ state, active }: UpdateLogProps) {
+  const scroller = useRef<HTMLPreElement>(null);
+  const text = updateLogText(state);
+
+  useEffect(() => {
+    const element = scroller.current;
+    if (element) element.scrollTop = element.scrollHeight;
+  }, [text]);
+
+  if (!text && !active) return null;
+
+  return (
+    <div className="mt-2.5">
+      <div className="mb-1 flex items-center gap-1.5 text-[10px] text-ink/50">
+        {active ? (
+          <Loader2 size={11} className="animate-spin motion-reduce:animate-none" />
+        ) : (
+          <Terminal size={11} />
+        )}
+        <span>{active ? 'Updating…' : 'Update output'}</span>
+        {state.truncated && <span className="text-ink/35">· older lines trimmed</span>}
+      </div>
+      <pre
+        ref={scroller}
+        className="max-h-40 overflow-auto rounded-md border border-ink/10 bg-canvas px-2 py-1.5 font-mono text-[10px] leading-4 whitespace-pre-wrap break-words text-ink/70 select-text"
+      >
+        {text || '…'}
+      </pre>
+    </div>
+  );
+}

package/src/client/components/layout/session-sidebar/about-modal/UpdateSection.tsx

@@ -1,6 +1,7 @@
 import { AlertCircle, Check, Download, Loader2, RefreshCw } from 'lucide-preact';
 import type { UpdateTarget, UpdateTargetInfo } from '@/shared/types/updates';
 import type { UseUpdatesResult } from '@/client/hooks/ui/updates';
+import { UpdateLog } from '@/client/components/layout/session-sidebar/about-modal/UpdateLog';
 
 interface UpdateSectionProps {
   updates: UseUpdatesResult;
@@ -62,23 +63,13 @@ export function UpdateSection({ updates, onToast }: UpdateSectionProps) {
     const result = await updates.apply(target);
     if (!onToast) return;
 
-    if (!result) {
-      onToast('The update request could not be completed.', 'error');
-      return;
-    }
-
-    if (target === 'ompchamber') {
-      // `manual` means the environment cannot self-update and the message is
-      // the command to run — action required, not a success.
-      onToast(result.message, result.success ? 'success' : 'error');
-      return;
-    }
-
-    if (result.success) {
-      onToast(`${result.message} A restart may be needed.`, 'success');
-    } else {
-      onToast(result.message, 'error');
-    }
+    // A null result means the run was aborted with the panel (an unmount, a
+    // page tear-down): there is nobody left to tell.
+    if (!result) return;
+
+    // `manual` means the environment cannot self-update and the message is the
+    // command to run — action required, not a success.
+    onToast(result.message, result.success && !result.manual ? 'success' : 'error');
   };
 
   const showResult = Boolean(updates.info && !updates.checking && !updates.error);
@@ -90,6 +81,10 @@ export function UpdateSection({ updates, onToast }: UpdateSectionProps) {
         {updates.info && <span className="font-mono text-[9px] text-ink/40">checked</span>}
       </div>
 
+      {updates.progress && (
+        <UpdateLog state={updates.progress} active={updates.applying !== null} />
+      )}
+
       <div className="mt-2.5">
         {updates.checking && (
           <button type="button" disabled className={`${actionClassName} w-full justify-center`}>

package/src/client/components/mobile/mobile-session-sidebar/Item.tsx

@@ -7,6 +7,8 @@ import { WorkspaceOptionsMenu } from '@/client/components/common/workspace-optio
 import { useShowMore } from '@/client/hooks/ui/show-more';
 import { useExpandedSessions } from '@/client/hooks/workspace/expanded-sessions';
 import { useWorkspaceFolderActions } from '@/client/hooks/workspace/workspace-folder-actions';
+import { useSessionDelete } from '@/client/hooks/workspace/session-delete';
+import { SessionDeleteModal } from '@/client/components/common/session-delete-modal';
 import { getProjectIcon } from '@/shared/lib/workspace/project-icon';
 import { relativeTimeAgo } from '@/shared/lib/workspace/relative-time';
 import { useOnClickOutside } from '@/client/hooks/ui/on-click-outside';
@@ -53,6 +55,7 @@ export function MobileSessionCategory({
     handleArchive,
     handleRename,
   } = useWorkspaceFolderActions(folder, refresh);
+  const sessionDelete = useSessionDelete();
 
   useOnClickOutside(menuRef, () => {
     setShowMenu(false);
@@ -195,6 +198,13 @@ export function MobileSessionCategory({
                   onToggleExpand={() => toggleSession(sessionKey)}
                   onSelect={() => onSelectSession(session.id)}
                   onArchive={() => handleArchive(session)}
+                  onDelete={
+                    // A pending `new-…` chat has no transcript anywhere yet —
+                    // there is nothing to delete, and the server refuses it.
+                    sessionKey.startsWith('new-')
+                      ? undefined
+                      : () => sessionDelete.requestDelete(session)
+                  }
                   onRename={sessionKey.startsWith('new-') ? undefined : (name) => void handleRename(session, name)}
                 />
                 {isRosterOpen && (
@@ -216,6 +226,14 @@ export function MobileSessionCategory({
           )}
         </div>
       )}
+
+      <SessionDeleteModal
+        session={sessionDelete.pending}
+        isDeleting={sessionDelete.isDeleting}
+        error={sessionDelete.error}
+        onClose={sessionDelete.cancelDelete}
+        onConfirm={() => void sessionDelete.confirmDelete()}
+      />
     </div>
   );
 }

package/src/client/components/mobile/mobile-session-sidebar/SessionRow.tsx

@@ -1,6 +1,7 @@
-import { Archive, ArchiveRestore, Check, ChevronDown, ChevronRight, CircleQuestionMark, Loader2, Pencil } from 'lucide-preact';
+import { Check, ChevronDown, ChevronRight, CircleQuestionMark, Loader2, MoreHorizontal } from 'lucide-preact';
 import type { SessionItemData } from '@/shared/types';
 import { useInlineRename } from '@/client/hooks/ui/inline-rename';
+import { SessionActionsMenu, useRowMenu } from '@/client/components/common/session-actions-menu';
 
 export interface MobileSessionRowProps {
   session: SessionItemData;
@@ -16,6 +17,9 @@ export interface MobileSessionRowProps {
   onToggleExpand?: () => void;
   onSelect: () => void;
   onArchive: () => void;
+  /** Omitted for a session that cannot be deleted yet (a pending `new-…` chat,
+   *  which has no transcript anywhere). */
+  onDelete?: () => void;
   onRename?: (name: string) => void;
 }
 
@@ -30,6 +34,7 @@ export function MobileSessionRow({
   onToggleExpand,
   onSelect,
   onArchive,
+  onDelete,
   onRename,
 }: MobileSessionRowProps) {
   const {
@@ -41,6 +46,9 @@ export function MobileSessionRow({
     handleKeyDown,
     handleBlur,
   } = useInlineRename(session.title, onRename);
+  // One trigger for every row action; also reachable by long-press contextmenu.
+  const menu = useRowMenu();
+  const hasActions = Boolean(onRename || onArchive || onDelete);
 
   // The roster toggle is the row's LAST element, so its glyph lands in the same
   // column as the folder header's expand chevron — one vertical line of
@@ -71,76 +79,86 @@ export function MobileSessionRow({
   }
 
   return (
-    <div
-      className={`w-full rounded-lg flex items-center transition-colors ${
-        isActive ? 'bg-ink/10 font-medium text-ink' : 'hover:bg-ink/5 text-ink/85'
-      }`}
-    >
-      <button
-        type="button"
-        onClick={onSelect}
-        className="flex-1 text-left pl-2 pr-3 py-2 flex items-center justify-between min-w-0"
+    <>
+      <div
+        onContextMenu={hasActions ? menu.openAtCursor : undefined}
+        className={`w-full rounded-lg flex items-center transition-colors ${
+          isActive ? 'bg-ink/10 font-medium text-ink' : 'hover:bg-ink/5 text-ink/85'
+        }`}
       >
-        <div className="flex items-center min-w-0 pr-2">
-          {/* Status slot, 16px at the same x as the folder header's icon slot,
-              so the left column reads as one line. Waiting on an answer
-              outranks the run spinner — the spinner says work is happening,
-              the question mark says it is YOUR turn (desktop parity). */}
-          <span className="w-4 flex-shrink-0 flex items-center justify-center">
-            {awaitingInput ? (
-              <CircleQuestionMark size={13} className="text-ink/70 animate-pulse" />
-            ) : status === 'stream' ? (
-              <Loader2 size={13} className="text-ink/50 animate-spin" />
-            ) : status ? (
-              <Check size={13} className="text-ink/50" />
-            ) : null}
-          </span>
-          <span className="text-xs truncate leading-snug ml-2">{title}</span>
-        </div>
-
-        <span className="text-[11px] text-ink/45 font-mono flex-shrink-0 ml-2">{timeAgo ?? ''}</span>
-      </button>
-
-      {onRename && (
         <button
           type="button"
-          onClick={startRename}
-          title="Rename session"
-          className="flex-shrink-0 p-2 text-ink/35 hover:text-ink rounded-lg cursor-pointer"
+          onClick={onSelect}
+          className="flex-1 text-left pl-2 pr-3 py-2 flex items-center justify-between min-w-0"
         >
-          <Pencil size={14} />
+          <div className="flex items-center min-w-0 pr-2">
+            {/* Status slot, 16px at the same x as the folder header's icon slot,
+                so the left column reads as one line. Waiting on an answer
+                outranks the run spinner — the spinner says work is happening,
+                the question mark says it is YOUR turn (desktop parity). */}
+            <span className="w-4 flex-shrink-0 flex items-center justify-center">
+              {awaitingInput ? (
+                <CircleQuestionMark size={13} className="text-ink/70 animate-pulse" />
+              ) : status === 'stream' ? (
+                <Loader2 size={13} className="text-ink/50 animate-spin" />
+              ) : status ? (
+                <Check size={13} className="text-ink/50" />
+              ) : null}
+            </span>
+            <span className="text-xs truncate leading-snug ml-2">{title}</span>
+          </div>
+
+          <span className="text-[11px] text-ink/45 font-mono flex-shrink-0 ml-2">{timeAgo ?? ''}</span>
         </button>
-      )}
 
-      {/* A row WITHOUT a roster toggle still has to keep the toggle's column
-          empty, or its archive glyph would sit where the toggle is and the
-          trailing icons would step in and out row to row. This `mr-1` is what
-          reserves that column: it moves the 14px glyph's centre from x=363 to
-          x=359, the exact x the toggle uses on a row that has one. */}
-      <button
-        type="button"
-        onClick={onArchive}
-        title={session.is_archived === 1 ? 'Unarchive session' : 'Archive session'}
-        className={`flex-shrink-0 p-2 text-ink/35 hover:text-ink rounded-lg cursor-pointer ${showChevron ? '' : 'mr-1'}`}
-      >
-        {session.is_archived === 1 ? <ArchiveRestore size={14} /> : <Archive size={14} />}
-      </button>
+        {/* One trigger for rename / archive / delete, always visible: a touch
+            surface has no hover, and the always-on action buttons this replaced
+            consumed a third of a phone's row width.
+            `mr-1` only when the row has NO roster toggle — it reserves that
+            column so the trailing glyph's centre stays 19px from the row's right
+            edge whether the last element is this trigger or the chevron. Without
+            it the glyphs step in and out from row to row. */}
+        {hasActions && (
+          <button
+            type="button"
+            onClick={menu.openBelow}
+            title="Session actions"
+            aria-label="Session actions"
+            aria-haspopup="menu"
+            aria-expanded={menu.anchor !== null}
+            className={`flex-shrink-0 p-2 text-ink/35 hover:text-ink rounded-lg cursor-pointer ${showChevron ? '' : 'mr-1'}`}
+          >
+            <MoreHorizontal size={16} />
+          </button>
+        )}
 
-      {/* Last element, so its glyph sits in the folder header's chevron column.
-          `p-1.5 mr-1.5` centres a 14px glyph on that column while keeping a
-          touch-sized tap target. */}
-      {showChevron && (
-        <button
-          type="button"
-          onClick={onToggleExpand}
-          title={isExpanded ? 'Collapse subagents' : 'Expand subagents'}
-          aria-expanded={isExpanded}
-          aria-label={isExpanded ? 'Collapse subagents' : 'Expand subagents'}
-          className="flex-shrink-0 p-1.5 mr-1.5 flex items-center justify-center text-ink/50 hover:text-ink rounded-lg cursor-pointer"
-        >
-          {isExpanded ? <ChevronDown size={14} /> : <ChevronRight size={14} />}
-        </button>
+        {/* Last element, so its glyph sits in the folder header's chevron column.
+            `p-1.5 mr-1.5` centres a 14px glyph on that column while keeping a
+            touch-sized tap target. */}
+        {showChevron && (
+          <button
+            type="button"
+            onClick={onToggleExpand}
+            title={isExpanded ? 'Collapse subagents' : 'Expand subagents'}
+            aria-expanded={isExpanded}
+            aria-label={isExpanded ? 'Collapse subagents' : 'Expand subagents'}
+            className="flex-shrink-0 p-1.5 mr-1.5 flex items-center justify-center text-ink/50 hover:text-ink rounded-lg cursor-pointer"
+          >
+            {isExpanded ? <ChevronDown size={14} /> : <ChevronRight size={14} />}
+          </button>
+        )}
+      </div>
+
+      {menu.anchor && (
+        <SessionActionsMenu
+          anchor={menu.anchor}
+          isArchived={session.is_archived === 1}
+          onRename={onRename ? startRename : undefined}
+          onArchive={onArchive}
+          onDelete={onDelete}
+          onClose={menu.close}
+        />
       )}
-    </div>
+    </>
   );
 }

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

@@ -22,8 +22,14 @@ export const PROJECT_OPTIONS: ProjectOption[] = [
 
 const optionValue = (option: ProjectOption): string => option.value ?? option.id;
 
-const defaultTriggerLabel = (_options: ProjectOption[], selectedProject: string): string =>
-  selectedProject;
+/**
+ * Trigger label for a selected value. A caller that stores the option's VALUE
+ * (the skills/commands panels store a project path, not an id) must still get
+ * the option's human label rather than the raw path it selected.
+ */
+const defaultTriggerLabel = (options: ProjectOption[], selectedProject: string): string =>
+  options.find((option) => option.id === selectedProject || optionValue(option) === selectedProject)?.name
+  ?? selectedProject;
 
 interface ProjectSelectorDropdownProps {
   selectedProject: string;

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

@@ -1,7 +1,7 @@
 import type { ComponentChildren } from 'preact';
 import type { FunctionComponent } from 'preact/compat';
 import { Plus } from 'lucide-preact';
-import { ProjectSelectorDropdown } from '@/client/components/settings/ProjectSelectorDropdown';
+import { ProjectSelectorDropdown, type ProjectOption } from '@/client/components/settings/ProjectSelectorDropdown';
 
 export interface SettingsSidebarItem {
   id: string;
@@ -24,6 +24,8 @@ interface SettingsSidebarListProps {
   renderIcon: (isBuiltIn: boolean) => ComponentChildren;
   selectedProject: string;
   onChangeProject: (project: string) => void;
+  /** Real workspace folders; defaults to the shared placeholder list. */
+  projectOptions?: ProjectOption[];
 }
 
 /**
@@ -43,6 +45,7 @@ export const SettingsSidebarList: FunctionComponent<SettingsSidebarListProps> =
   renderIcon,
   selectedProject,
   onChangeProject,
+  projectOptions,
 }) => {
   const builtInItems = items.filter((item) => item.isBuiltIn);
   const customItems = items.filter((item) => !item.isBuiltIn);
@@ -81,6 +84,7 @@ export const SettingsSidebarList: FunctionComponent<SettingsSidebarListProps> =
       <ProjectSelectorDropdown
         selectedProject={selectedProject}
         onChangeProject={onChangeProject}
+        {...(projectOptions ? { options: projectOptions } : {})}
       />
 
       <div className="px-3.5 py-2.5 border-b border-ink/10 flex items-center justify-between">

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

@@ -1,4 +1,4 @@
-import { useState } from 'preact/hooks';
+import { useRef, 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';
@@ -7,18 +7,40 @@ import { LoadingState } from '@/client/components/settings/LoadingState';
 import { useCrudList } from '@/client/hooks/settings/crud-list';
 import { useSettingsMasterDetail } from '@/client/hooks/settings/master-detail';
 import { SettingsMasterDetail } from '@/client/components/settings/master-detail';
+import { GLOBAL_SCOPE_ID, useWorkspaceRoots } from '@/client/hooks/settings/workspace-roots';
 
 interface CommandSettingsProps {
   settings: SettingsState;
   onUpdate: (settings: SettingsState) => void;
 }
 
+/**
+ * The Commands panel, scoped to one root at a time.
+ *
+ * The list is omp's own `get_available_commands` for the selected scope: the
+ * builtins, the `skill:<name>` entries, extension and TypeScript commands, and
+ * every markdown command file omp discovers — the user-level
+ * `~/.omp/agent/commands`, `~/.claude/commands`, … plus the selected
+ * workspace's `.omp/commands`, `.claude/commands`, `.agents/commands` and
+ * `.github/prompts`. The server resolves each live name against those roots so
+ * the pane can tell a file command (editable, and the file is the truth) from
+ * a builtin (read-only), and reports the scope each one lives at.
+ */
 export const CommandSettings: FunctionComponent<CommandSettingsProps> = () => {
   const masterDetail = useSettingsMasterDetail();
-  const [selectedProject, setSelectedProject] = useState('ompchamber');
+  const roots = useWorkspaceRoots();
+  const [selectedRootId, setSelectedRootId] = useState<string>(GLOBAL_SCOPE_ID);
+  // The name a command had when it was selected: a rename has to travel so the
+  // file is moved rather than left behind as a second command. Read from a ref
+  // because the save body is built outside the list controller's own state.
+  const selectedNameRef = useRef<string | null>(null);
+  const query = roots.queryFor(selectedRootId);
+  const isWorkspaceScope = roots.isWorkspace(selectedRootId);
+
   const { items: commands, selectedId, selected: selectedCommand, isCreatingNew, isLoading, select, startCreate, save, remove } =
     useCrudList<CommandItem>({
       endpoint: '/api/settings/commands',
+      query,
       listKey: 'commands',
       bodyKey: 'command',
       messages: {
@@ -27,7 +49,20 @@ export const CommandSettings: FunctionComponent<CommandSettingsProps> = () => {
         delete: 'Failed to delete command via API:',
       },
       cacheKey: 'command',
-      buildNew: (updated) => ({ ...updated, id: `cmd-${Date.now()}`, isBuiltIn: false }),
+      // A live command's id is derived from its name; the rename has to travel
+      // so the file is moved rather than duplicated.
+      buildBody: (target) => ({
+        command: target,
+        ...roots.scopeBodyFor(selectedRootId),
+        ...(selectedNameRef.current ? { previousName: selectedNameRef.current } : {}),
+      }),
+      buildDeleteQuery: (id) => `?id=${encodeURIComponent(id)}&${query.slice(1)}`,
+      buildNew: (updated) => ({
+        ...updated,
+        id: `cmd-${Date.now()}`,
+        isBuiltIn: false,
+        scope: isWorkspaceScope ? 'project' : 'user',
+      }),
       buildUpdate: (updated) => updated,
       isDeleteError: (data) => Boolean((data as { error?: string } | null)?.error),
     });
@@ -36,15 +71,13 @@ export const CommandSettings: FunctionComponent<CommandSettingsProps> = () => {
     id: `new-${Date.now()}`,
     name: 'new-command',
     description: '',
-    scope: 'user',
-    overrideAgent: 'Not selected',
-    overrideModel: 'Not selected',
+    scope: isWorkspaceScope ? 'project' : 'user',
     template: 'Execute task: $ARGUMENTS',
     isBuiltIn: false,
   };
 
   if (isLoading) {
-    return <LoadingState>Loading commands from database...</LoadingState>;
+    return <LoadingState>Loading commands…</LoadingState>;
   }
 
   return (
@@ -58,15 +91,18 @@ export const CommandSettings: FunctionComponent<CommandSettingsProps> = () => {
             commands={commands}
             selectedCommandId={isCreatingNew ? null : selectedId}
             onSelectCommand={(id) => {
+              selectedNameRef.current = commands.find((command) => command.id === id)?.name ?? null;
               select(id);
               masterDetail.openDetail();
             }}
             onAddNewCommand={() => {
+              selectedNameRef.current = null;
               startCreate();
               masterDetail.openDetail();
             }}
-            selectedProject={selectedProject}
-            onChangeProject={setSelectedProject}
+            selectedProject={selectedRootId}
+            onChangeProject={setSelectedRootId}
+            projectOptions={roots.options}
           />
         }
         detail={
@@ -76,6 +112,7 @@ export const CommandSettings: FunctionComponent<CommandSettingsProps> = () => {
                 command={emptyCommandTemplate}
                 isNew={true}
                 onSave={save}
+                projectScopeDisabled={!isWorkspaceScope}
               />
             ) : selectedCommand ? (
               <CommandDetailPane
@@ -84,6 +121,7 @@ export const CommandSettings: FunctionComponent<CommandSettingsProps> = () => {
                 isNew={false}
                 onSave={save}
                 onDelete={remove}
+                projectScopeDisabled={!isWorkspaceScope}
               />
             ) : (
               <div className="flex-1 flex items-center justify-center text-xs font-mono text-ink/40">

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

@@ -1,6 +1,6 @@
 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 type { CatalogSkillItem, SkillCatalogSource } 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';
@@ -31,49 +31,29 @@ export function SkillCatalogSettings() {
   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 }),
+    // Both directions go through the same endpoint: an install runs the skills
+    // CLI (which is what puts the skill where omp reads it), an uninstall runs
+    // its remove counterpart. Deleting only the chamber's own record used to
+    // leave the skill installed and running.
+    fetch('/api/settings/skills', {
+      method: 'POST',
+      headers: { 'Content-Type': 'application/json' },
+      body: JSON.stringify({ type: 'install_toggle', skill, install: !existing }),
+    })
+      .then((res) => res.json())
+      .then((data) => {
+        if (data?.error) {
+          showToast(`Failed: ${data.error}`);
+          return;
+        }
+        if (Array.isArray(data?.skills)) setUserSkills(data.skills);
+        invalidateComposerCache('command');
+        showToast(existing ? `Uninstalled skill "${skill.name}"` : `Installed skill "${skill.name}"`);
       })
-        .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);
-    }
+      .catch((error) => {
+        console.error(error);
+        showToast(`Failed to ${existing ? 'uninstall' : 'install'} "${skill.name}"`);
+      });
   };
 
   const handleAddSource = (newSource: SkillCatalogSource) => {