ompchamber 3.5.0 → 3.6.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "ompchamber",
-  "version": "3.5.0",
+  "version": "3.6.0",
   "description": "Developer web console and diagnostic chamber for AI Oh-My-Pi — Elysia + Preact on Bun.",
   "license": "UNLICENSED",
   "author": "Wijanarko Putra Rajeb <wijanarko.rajeb@gmail.com>",

package/src/cli/lib/commands/status.js

@@ -47,6 +47,13 @@ function printInstance(entry) {
   log(`  launch:   ${entry.launchMode ?? 'unknown'}${entry.source ? ` (${entry.source})` : ''}`);
   log(`  uptime:   ${formatUptime(entry.startedAt)}`);
   log(`  health:   ${formatHealth(entry.health)}`);
+  // Descriptor pressure, when the server can measure it. A dev server climbs
+  // toward 10,240 by holding the client module graph across rebuilds, and past
+  // that point every `Bun.spawn` in the process fails at once (the terminal
+  // shell, the omp child, git) — this line is the warning that arrives before
+  // the breakage instead of after it.
+  const fds = entry.health?.fds;
+  if (fds) log(`  fds:      ${fds.open}/${fds.limit}${fds.nearCliff ? '  (near the spawn limit — restart this instance)' : ''}`);
   log(`  log:      ${entry.logFile}`);
 }
 

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/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) => {

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

@@ -6,6 +6,7 @@ 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 SkillSettingsProps {
   settings?: SettingsState;
@@ -13,12 +14,31 @@ interface SkillSettingsProps {
   onNavigateToCatalog?: () => void;
 }
 
+/**
+ * The Skills panel, scoped to one root at a time.
+ *
+ * The picker selects WHICH omp scope is read: a workspace root answers with the
+ * skills an omp session started there loads (its `.omp/skills`, `.claude`,
+ * `.agents`, `.github`, `.codex` entries plus the user-level ones), while the
+ * user scope answers for the agent dir alone. That is not a client-side filter
+ * — the server passes the scope's cwd to `omp skill list`, because omp's
+ * project walk-up is what decides the list.
+ *
+ * A write lands in the scope that is selected: a project skill under
+ * `<workspace>/.omp/skills`, a user skill under `~/.omp/agent/skills`.
+ */
 export function SkillSettings({ onNavigateToCatalog }: SkillSettingsProps) {
   const masterDetail = useSettingsMasterDetail();
-  const [selectedProjectId, setSelectedProjectId] = useState('ompchamber');
+  const roots = useWorkspaceRoots();
+  const [selectedRootId, setSelectedRootId] = useState<string>(GLOBAL_SCOPE_ID);
+  const [isReloading, setIsReloading] = useState(false);
+  const query = roots.queryFor(selectedRootId);
+  const isWorkspaceScope = roots.isWorkspace(selectedRootId);
+
   const { items: skills, selectedId, selected: selectedSkill, isCreatingNew, isLoading, select, startCreate, save, remove } =
     useCrudList<SkillItem, Partial<SkillItem>>({
       endpoint: '/api/settings/skills',
+      query,
       listKey: 'skills',
       bodyKey: 'skill',
       messages: {
@@ -28,14 +48,22 @@ export function SkillSettings({ onNavigateToCatalog }: SkillSettingsProps) {
       },
       cacheKey: 'command',
       fallbackToFirst: false,
+      // The write carries the scope it was made in, because the draft's own
+      // location decides which `.omp/skills` root it lands in.
+      buildBody: (target) => ({ skill: target, ...roots.scopeBodyFor(selectedRootId) }),
+      buildDeleteQuery: (id) => `?id=${encodeURIComponent(id)}&${query.slice(1)}`,
       buildNew: (skillData) => ({
         id: `skill-${Date.now()}`,
         name: skillData.name || 'new-skill',
         description: skillData.description || '',
-        location: skillData.location || 'user',
-        locationLabel: skillData.locationLabel || 'User / OpenCode',
+        // A new skill defaults to the scope the panel is showing: creating a
+        // project skill while the user scope is selected would write outside
+        // the list they are looking at.
+        location: skillData.location || (isWorkspaceScope ? 'project' : 'user'),
+        locationLabel: skillData.locationLabel || (isWorkspaceScope ? 'Project / .omp/skills' : 'User / omp agent'),
         instructions: skillData.instructions || '',
-        project: selectedProjectId,
+        hidden: skillData.hidden === true,
+        project: 'omp',
       }),
       buildUpdate: (skillData, selected, selectedId) => ({
         ...(selected || { id: selectedId || `skill-${Date.now()}` }),
@@ -44,8 +72,19 @@ export function SkillSettings({ onNavigateToCatalog }: SkillSettingsProps) {
       isDeleteError: (data) => Boolean((data as { error?: string } | null)?.error),
     });
 
+  const reload = () => {
+    setIsReloading(true);
+    fetch('/api/settings/skills', {
+      method: 'POST',
+      headers: { 'Content-Type': 'application/json' },
+      body: JSON.stringify({ type: 'reload', ...roots.scopeBodyFor(selectedRootId) }),
+    })
+      .catch((error) => console.error('Failed to reload plugins:', error))
+      .finally(() => setIsReloading(false));
+  };
+
   if (isLoading) {
-    return <LoadingState>Loading skills from database...</LoadingState>;
+    return <LoadingState>Loading skills…</LoadingState>;
   }
 
   return (
@@ -67,8 +106,9 @@ export function SkillSettings({ onNavigateToCatalog }: SkillSettingsProps) {
               startCreate();
               masterDetail.openDetail();
             }}
-            selectedProject={selectedProjectId}
-            onSelectProject={setSelectedProjectId}
+            selectedProject={selectedRootId}
+            onSelectProject={setSelectedRootId}
+            projectOptions={roots.options}
           />
         }
         detail={
@@ -78,6 +118,10 @@ export function SkillSettings({ onNavigateToCatalog }: SkillSettingsProps) {
             onSave={save}
             onDelete={remove}
             onOpenCatalog={onNavigateToCatalog}
+            onReload={reload}
+            isReloading={isReloading}
+            projectScopeDisabled={!isWorkspaceScope}
+            defaultLocation={isWorkspaceScope ? 'project' : 'user'}
           />
         }
       />