ompchamber 3.4.0 → 3.6.0

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'}
           />
         }
       />

package/src/client/components/settings/categories/command-settings/DetailPane.tsx

@@ -1,45 +1,47 @@
 import { useEffect, useState } from 'preact/hooks';
 import type { FormEvent, FunctionComponent } from 'preact/compat';
-import { Bot, Check, Copy, PenTool, Trash2 } from 'lucide-preact';
-import type { AgentItem, CommandItem, CommandScope } from '@/shared/types';
+import { Check, Copy, Eye, EyeOff, Trash2 } from 'lucide-preact';
+import type { CommandItem, CommandScope } from '@/shared/types';
 
 interface CommandDetailPaneProps {
   command: CommandItem;
   isNew?: boolean;
   onSave: (updatedCommand: CommandItem) => void;
   onDelete?: (commandId: string) => void;
+  /** Disabled for the project scope: there is no workspace to write it into. */
+  projectScopeDisabled?: boolean;
 }
 
-const AVAILABLE_MODELS = [
-  'Not selected',
-  'claude-3-7-sonnet-20250219',
-  'claude-3-5-sonnet-20241022',
-  'claude-3-5-haiku-20241022',
-  'gpt-4o',
-  'gpt-4o-mini',
-  'gemini-2.5-pro-preview-03-25',
-  'deepseek-chat-v3',
-];
-
+/**
+ * One command's detail pane.
+ *
+ * The three sections mirror what a command IS in oh-my-pi: a name, the scope
+ * its file lives at, and a markdown template. The template is the whole
+ * behavior — `$ARGUMENTS`, `` !`shell` `` and `@file` are expanded by omp when
+ * the command runs — so the editor is the point of the pane, and the body is
+ * what a save writes back into the file.
+ *
+ * A command backed by a file the chamber does not own (a `.claude` or
+ * `.agents` command, a builtin, a skill entry) renders read-only: its file
+ * belongs to another tool and a save here would rewrite it.
+ */
 export const CommandDetailPane: FunctionComponent<CommandDetailPaneProps> = ({
   command,
   isNew = false,
   onSave,
   onDelete,
+  projectScopeDisabled = false,
 }) => {
   const [formData, setFormData] = useState<CommandItem>(command);
   const [savedSuccess, setSavedSuccess] = useState(false);
   const [copiedTemplate, setCopiedTemplate] = useState(false);
-  const [availableAgents, setAvailableAgents] = useState<AgentItem[]>([]);
+  const [showLineNumbers, setShowLineNumbers] = useState(true);
 
-  useEffect(() => {
-    fetch('/api/settings/agents')
-      .then(res => res.json())
-      .then(data => {
-        if (data?.agents) setAvailableAgents(data.agents);
-      })
-      .catch(console.error);
-  }, []);
+  // A LIVE command the chamber does not own (a builtin, a `skill:<name>` entry,
+  // an extension or a `.claude`/`.agents` file) renders read-only: its file, if
+  // it has one, belongs to another tool. A chamber-store row and a brand-new
+  // draft have no source and stay editable.
+  const readOnly = !isNew && command.source != null && command.managed !== true;
 
   useEffect(() => {
     setFormData(command);
@@ -66,17 +68,37 @@ export const CommandDetailPane: FunctionComponent<CommandDetailPaneProps> = ({
     }));
   };
 
+  const lines = formData.template.split('\n');
+  const lineCount = Math.max(lines.length, 6);
+
   return (
     <form onSubmit={handleSave} className="flex-1 flex flex-col h-full scrollbar-overlay-container scrollbar-overlay-static bg-paper text-ink p-6 md:p-8 space-y-6">
+      {readOnly && (
+        <div className="rounded-lg border border-ink/15 bg-ink/5 px-3 py-2 text-[11px] text-ink/70 leading-relaxed">
+          {formData.filePath ? (
+            <>
+              This command is provided by <span className="font-mono text-ink/80">{formData.source}</span> and is read-only here.
+              Edit <span className="font-mono text-ink/80">{formData.filePath}</span> at its source, or create a command of your own
+              under <span className="font-mono text-ink/80">~/.omp/agent/commands</span>.
+            </>
+          ) : (
+            <>
+              This is a <span className="font-mono text-ink/80">{formData.source ?? 'live'}</span> command built into the agent, not a
+              file. It cannot be edited or deleted here — create a command with another name to extend it.
+            </>
+          )}
+        </div>
+      )}
+
       {/* SECTION 1: Identity */}
       <div className="space-y-3">
         <div className="flex items-center justify-between">
           <h2 className="text-xs font-bold uppercase tracking-wider text-ink">
             Identity
           </h2>
-          {formData.isBuiltIn && (
+          {readOnly && (
             <span className="text-[10px] font-mono px-2 py-0.5 rounded-md bg-ink/5 border border-ink/10 text-ink/60">
-              Built-in System Command
+              {formData.source ?? 'live'} · read-only
             </span>
           )}
         </div>
@@ -101,7 +123,7 @@ export const CommandDetailPane: FunctionComponent<CommandDetailPaneProps> = ({
                 }
                 required
                 placeholder="command-name"
-                disabled={formData.isBuiltIn}
+                disabled={readOnly}
                 className="w-full text-xs font-mono px-3 py-2 bg-transparent focus:outline-none disabled:opacity-60 text-ink"
               />
             </div>
@@ -116,12 +138,12 @@ export const CommandDetailPane: FunctionComponent<CommandDetailPaneProps> = ({
               onChange={(e) =>
                 setFormData({ ...formData, scope: e.currentTarget.value as CommandScope })
               }
-              disabled={formData.isBuiltIn}
+              disabled={readOnly || projectScopeDisabled}
+              title={projectScopeDisabled ? 'Select a workspace folder to write a project command' : undefined}
               className="w-full text-xs py-2 px-3 rounded-lg border border-ink/20 hover:border-ink/40 bg-paper focus:outline-none focus:border-ink disabled:opacity-60 text-ink transition-colors cursor-pointer"
             >
               <option value="user">user</option>
-              <option value="project">project</option>
-              <option value="system">system</option>
+              {!projectScopeDisabled && <option value="project">project</option>}
             </select>
           </div>
         </div>
@@ -133,74 +155,34 @@ export const CommandDetailPane: FunctionComponent<CommandDetailPaneProps> = ({
           <textarea
             value={formData.description}
             onChange={(e) => setFormData({ ...formData, description: e.currentTarget.value })}
+            disabled={readOnly}
             placeholder="What does this command do?"
             rows={2}
-            className="w-full text-xs p-3 rounded-lg border border-ink/20 hover:border-ink/40 bg-paper focus:outline-none focus:border-ink placeholder:text-ink/30 text-ink transition-colors"
+            className="w-full text-xs p-3 rounded-lg border border-ink/20 hover:border-ink/40 bg-paper focus:outline-none focus:border-ink placeholder:text-ink/30 text-ink transition-colors disabled:opacity-60"
           />
         </div>
-      </div>
-
-      <div className="border-t border-ink/10" />
 
-      {/* SECTION 2: Execution Context */}
-      <div className="space-y-3">
-        <h2 className="text-xs font-bold uppercase tracking-wider text-ink">
-          Execution Context
-        </h2>
-
-        <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
-          {/* Override Agent */}
-          <div>
-            <label className="block text-xs font-semibold text-ink/80 mb-1.5">
-              Override Agent
-            </label>
-            <div className="flex items-center border border-ink/20 hover:border-ink/40 focus-within:border-ink rounded-lg bg-paper transition-colors">
-              <span className="px-2.5 text-ink/40">
-                <Bot className="w-3.5 h-3.5" />
-              </span>
-              <select
-                value={formData.overrideAgent || 'Not selected'}
-                onChange={(e) => setFormData({ ...formData, overrideAgent: e.currentTarget.value })}
-                className="w-full text-xs py-2 pr-3 bg-transparent focus:outline-none cursor-pointer text-ink"
-              >
-                <option value="Not selected">Not selected</option>
-                {availableAgents.map((agent) => (
-                  <option key={agent.id} value={agent.name}>
-                    @{agent.name}
-                  </option>
-                ))}
-              </select>
-            </div>
-          </div>
-
-          {/* Override Model */}
-          <div>
-            <label className="block text-xs font-semibold text-ink/80 mb-1.5">
-              Override Model
-            </label>
-            <div className="flex items-center border border-ink/20 hover:border-ink/40 focus-within:border-ink rounded-lg bg-paper transition-colors">
-              <span className="px-2.5 text-ink/40">
-                <PenTool className="w-3.5 h-3.5" />
-              </span>
-              <select
-                value={formData.overrideModel || 'Not selected'}
-                onChange={(e) => setFormData({ ...formData, overrideModel: e.currentTarget.value })}
-                className="w-full text-xs font-mono py-2 pr-3 bg-transparent focus:outline-none cursor-pointer text-ink"
-              >
-                {AVAILABLE_MODELS.map((m) => (
-                  <option key={m} value={m}>
-                    {m}
-                  </option>
-                ))}
-              </select>
-            </div>
-          </div>
+        <div>
+          <label className="block text-xs font-semibold text-ink/80 mb-1.5">
+            Argument Hint
+          </label>
+          <input
+            type="text"
+            value={formData.inputHint ?? ''}
+            onChange={(e) => setFormData({ ...formData, inputHint: e.currentTarget.value })}
+            disabled={readOnly}
+            placeholder="[on|off|status]"
+            className="w-full text-xs font-mono p-2.5 rounded-lg border border-ink/20 hover:border-ink/40 bg-paper focus:outline-none focus:border-ink placeholder:text-ink/30 text-ink transition-colors disabled:opacity-60"
+          />
+          <p className="text-[11px] text-ink/60 mt-1">
+            Shown as ghost text after <span className="font-mono">/{formData.name || 'name'}</span> in the composer.
+          </p>
         </div>
       </div>
 
       <div className="border-t border-ink/10" />
 
-      {/* SECTION 3: Command Template */}
+      {/* SECTION 2: Command Template */}
       <div className="space-y-2 flex-1 flex flex-col">
         <div className="flex items-center justify-between">
           <div>
@@ -212,6 +194,14 @@ export const CommandDetailPane: FunctionComponent<CommandDetailPaneProps> = ({
             </p>
           </div>
           <div className="flex items-center gap-2">
+            <button
+              type="button"
+              onClick={() => setShowLineNumbers(!showLineNumbers)}
+              title={showLineNumbers ? 'Hide line numbers' : 'Show line numbers'}
+              className="p-1 rounded-md text-ink/50 hover:text-ink hover:bg-ink/5 transition-colors cursor-pointer"
+            >
+              {showLineNumbers ? <Eye size={15} /> : <EyeOff size={15} />}
+            </button>
             <button
               type="button"
               onClick={handleCopyTemplate}
@@ -228,39 +218,53 @@ export const CommandDetailPane: FunctionComponent<CommandDetailPaneProps> = ({
           <button
             type="button"
             onClick={() => handleInsertPlaceholder('$ARGUMENTS')}
-            className="px-2.5 py-1 text-xs font-mono rounded-md bg-ink/5 hover:bg-ink/10 border border-ink/15 text-ink transition-colors cursor-pointer"
+            disabled={readOnly}
+            className="px-2.5 py-1 text-xs font-mono rounded-md bg-ink/5 hover:bg-ink/10 border border-ink/15 text-ink transition-colors cursor-pointer disabled:opacity-50"
           >
             +$ARGUMENTS
           </button>
           <button
             type="button"
             onClick={() => handleInsertPlaceholder('!`bun test`')}
-            className="px-2.5 py-1 text-xs font-mono rounded-md bg-ink/5 hover:bg-ink/10 border border-ink/15 text-ink transition-colors cursor-pointer"
+            disabled={readOnly}
+            className="px-2.5 py-1 text-xs font-mono rounded-md bg-ink/5 hover:bg-ink/10 border border-ink/15 text-ink transition-colors cursor-pointer disabled:opacity-50"
           >
             +!shell
           </button>
           <button
             type="button"
             onClick={() => handleInsertPlaceholder('@src/App.tsx')}
-            className="px-2.5 py-1 text-xs font-mono rounded-md bg-ink/5 hover:bg-ink/10 border border-ink/15 text-ink transition-colors cursor-pointer"
+            disabled={readOnly}
+            className="px-2.5 py-1 text-xs font-mono rounded-md bg-ink/5 hover:bg-ink/10 border border-ink/15 text-ink transition-colors cursor-pointer disabled:opacity-50"
           >
             +@filename
           </button>
         </div>
 
-        <textarea
-          value={formData.template}
-          onChange={(e) => setFormData({ ...formData, template: e.currentTarget.value })}
-          rows={7}
-          placeholder="Enter command template instructions..."
-          className="w-full flex-1 min-h-[140px] text-xs font-mono p-3 rounded-lg border border-ink/20 hover:border-ink/40 bg-ink/5 focus:outline-none focus:border-ink leading-relaxed transition-colors"
-        />
+        <div className="flex rounded-lg border border-ink/20 hover:border-ink/40 bg-ink/5 overflow-hidden flex-1 min-h-[140px] font-mono text-xs focus-within:border-ink transition-colors">
+          {showLineNumbers && (
+            <div className="w-10 py-3 pr-2 select-none text-right text-xs text-ink/30 border-r border-ink/10 bg-ink/[0.02] overflow-hidden leading-relaxed">
+              {Array.from({ length: lineCount }).map((_, i) => (
+                <div key={i}>{i + 1}</div>
+              ))}
+            </div>
+          )}
+          <textarea
+            value={formData.template}
+            onChange={(e) => setFormData({ ...formData, template: e.currentTarget.value })}
+            rows={Math.max(lineCount, 7)}
+            disabled={readOnly}
+            spellcheck={false}
+            placeholder="Enter command template instructions..."
+            className="flex-1 p-3 bg-transparent text-ink resize-none focus:outline-none leading-relaxed disabled:opacity-60"
+          />
+        </div>
       </div>
 
       {/* Footer Controls */}
       <div className="pt-3 border-t border-ink/10 flex items-center justify-between">
         <div>
-          {!formData.isBuiltIn && !isNew && onDelete && (
+          {!readOnly && !isNew && onDelete && (
             <button
               type="button"
               onClick={() => onDelete(formData.id)}
@@ -279,12 +283,14 @@ export const CommandDetailPane: FunctionComponent<CommandDetailPaneProps> = ({
               Saved successfully
             </span>
           )}
-          <button
-            type="submit"
-            className="px-4 py-2 rounded-lg bg-ink text-paper text-xs font-medium hover:bg-ink/90 transition-colors shadow-xs cursor-pointer"
-          >
-            {isNew ? 'Create Command' : 'Save Command'}
-          </button>
+          {!readOnly && (
+            <button
+              type="submit"
+              className="px-4 py-2 rounded-lg bg-ink text-paper text-xs font-medium hover:bg-ink/90 transition-colors shadow-xs cursor-pointer"
+            >
+              {isNew ? 'Create Command' : 'Save Command'}
+            </button>
+          )}
         </div>
       </div>
     </form>

package/src/client/components/settings/categories/command-settings/SidebarList.tsx

@@ -1,6 +1,7 @@
 import type { FunctionComponent } from 'preact/compat';
 import { Terminal } from 'lucide-preact';
 import type { CommandItem } from '@/shared/types';
+import type { ProjectOption } from '@/client/components/settings/ProjectSelectorDropdown';
 import { SettingsSidebarList } from '@/client/components/settings/SettingsSidebarList';
 
 interface CommandSidebarListProps {
@@ -10,6 +11,8 @@ interface CommandSidebarListProps {
   onAddNewCommand: () => void;
   selectedProject: string;
   onChangeProject: (project: string) => void;
+  /** Real workspace folders; defaults to the shared placeholder list. */
+  projectOptions?: ProjectOption[];
 }
 
 export const CommandSidebarList: FunctionComponent<CommandSidebarListProps> = ({
@@ -19,6 +22,7 @@ export const CommandSidebarList: FunctionComponent<CommandSidebarListProps> = ({
   onAddNewCommand,
   selectedProject,
   onChangeProject,
+  projectOptions,
 }) => (
   <SettingsSidebarList
     items={commands}
@@ -27,11 +31,12 @@ export const CommandSidebarList: FunctionComponent<CommandSidebarListProps> = ({
     onAddNew={onAddNewCommand}
     addTitle="Create new command"
     builtInLabel="Built-in Commands"
-    customLabel="Custom Commands"
+    customLabel="Command Files"
     formatName={(name) => `/${name}`}
     nameClassName="font-mono font-semibold text-xs text-ink truncate"
     selectedProject={selectedProject}
     onChangeProject={onChangeProject}
+    {...(projectOptions ? { projectOptions } : {})}
     renderIcon={(isBuiltIn) => (
       <Terminal className={`w-3.5 h-3.5 ${isBuiltIn ? 'text-ink/70' : 'text-ink/60'} flex-shrink-0`} />
     )}