ompchamber 3.5.0 → 3.6.0

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`} />
     )}

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

@@ -1,5 +1,5 @@
 import { useEffect, useState } from 'preact/hooks';
-import { Check, Eye, EyeOff, Info, Save, Sparkles, Trash2, User } from 'lucide-preact';
+import { Check, Eye, EyeOff, Info, RefreshCw, Save, Sparkles, Trash2, User } from 'lucide-preact';
 import type { SkillItem } from '@/shared/types';
 
 interface SkillDetailPaneProps {
@@ -8,6 +8,18 @@ interface SkillDetailPaneProps {
   onSave: (skillData: Partial<SkillItem>) => void;
   onDelete?: (id: string) => void;
   onOpenCatalog?: () => void;
+  onReload?: () => void;
+  isReloading?: boolean;
+  /** Disabled when no workspace is selected: there is no `.omp/skills` to
+   *  write a project skill into. */
+  projectScopeDisabled?: boolean;
+  /**
+   * Root a NEW skill lands in, from the scope the panel is showing. Without
+   * this a create made while a workspace is selected wrote to the user root —
+   * the skill then appeared in a list the panel was not showing, and the
+   * workspace's own `.omp/skills` never received it.
+   */
+  defaultLocation?: 'user' | 'project';
 }
 
 export function SkillDetailPane({
@@ -16,33 +28,45 @@ export function SkillDetailPane({
   onSave,
   onDelete,
   onOpenCatalog,
+  onReload,
+  isReloading = false,
+  projectScopeDisabled = false,
+  defaultLocation = 'user',
 }: SkillDetailPaneProps) {
   const [name, setName] = useState('');
   const [description, setDescription] = useState('');
   const [location, setLocation] = useState<'user' | 'project'>('user');
-  const [locationLabel, setLocationLabel] = useState('User / OpenCode');
+  const [locationLabel, setLocationLabel] = useState('User / omp agent');
   const [instructions, setInstructions] = useState('');
+  const [hidden, setHidden] = useState(false);
   const [savedToast, setSavedToast] = useState(false);
   const [showLineNumbers, setShowLineNumbers] = useState(true);
 
+  // A skill the chamber does not own (a Claude plugin, a registry package) is
+  // shown read-only: its file belongs to another tool, and a save here would
+  // rewrite it. `managed` is absent on a brand-new draft, which is editable.
+  const readOnly = !isCreatingNew && skill != null && skill.managed !== true;
+
   useEffect(() => {
     if (isCreatingNew || !skill) {
       setName('new-skill');
       setDescription('');
-      setLocation('user');
-      setLocationLabel('User / OpenCode');
+      setLocation(defaultLocation);
+      setLocationLabel(defaultLocation === 'project' ? 'Project / .omp/skills' : 'User / omp agent');
       setInstructions(`---
 description: ""
 ---
 `);
+      setHidden(false);
     } else {
       setName(skill.name);
       setDescription(skill.description);
       setLocation(skill.location);
-      setLocationLabel(skill.locationLabel || 'User / OpenCode');
+      setLocationLabel(skill.locationLabel || 'User / omp agent');
       setInstructions(skill.instructions);
+      setHidden(skill.hidden === true);
     }
-  }, [skill, isCreatingNew]);
+  }, [skill, isCreatingNew, defaultLocation]);
 
   const handleSave = () => {
     onSave({
@@ -51,6 +75,7 @@ description: ""
       location,
       locationLabel,
       instructions,
+      hidden,
     });
     setSavedToast(true);
     setTimeout(() => setSavedToast(false), 2000);
@@ -68,22 +93,44 @@ description: ""
             {isCreatingNew ? 'New Skill' : name}
           </h2>
           <p className="text-xs text-ink/60 mt-0.5">
-            {isCreatingNew ? 'Configure a new skill' : 'Configure skill details and prompt rules'}
+            {isCreatingNew ? 'Configure a new skill' : `Configure skill details and prompt rules · ${locationLabel}`}
           </p>
         </div>
 
-        {onOpenCatalog && (
-          <button
-            type="button"
-            onClick={onOpenCatalog}
-            className="flex items-center gap-1.5 px-3 py-1.5 rounded-lg border border-ink/20 hover:border-ink/40 text-xs font-medium text-ink hover:bg-ink/5 transition-colors cursor-pointer"
-          >
-            <Sparkles size={14} className="text-ink/70" />
-            <span>Browse Catalog</span>
-          </button>
-        )}
+        <div className="flex items-center gap-2">
+          {onReload && (
+            <button
+              type="button"
+              onClick={onReload}
+              disabled={isReloading}
+              title="Re-discover skills in the running agents"
+              className="flex items-center gap-1.5 px-3 py-1.5 rounded-lg border border-ink/20 hover:border-ink/40 text-xs font-medium text-ink hover:bg-ink/5 transition-colors cursor-pointer disabled:opacity-50"
+            >
+              <RefreshCw size={14} className={isReloading ? 'animate-spin text-ink/70' : 'text-ink/70'} />
+              <span>Reload</span>
+            </button>
+          )}
+          {onOpenCatalog && (
+            <button
+              type="button"
+              onClick={onOpenCatalog}
+              className="flex items-center gap-1.5 px-3 py-1.5 rounded-lg border border-ink/20 hover:border-ink/40 text-xs font-medium text-ink hover:bg-ink/5 transition-colors cursor-pointer"
+            >
+              <Sparkles size={14} className="text-ink/70" />
+              <span>Browse Catalog</span>
+            </button>
+          )}
+        </div>
       </div>
 
+      {readOnly && (
+        <div className="rounded-lg border border-ink/15 bg-ink/5 px-3 py-2 text-[11px] text-ink/70 leading-relaxed">
+          This skill is provided by <span className="font-mono text-ink/80">{skill?.source}</span> and is read-only here.
+          Edit <span className="font-mono text-ink/80">{skill?.filePath}</span> at its source, or install a copy into
+          {' '}<span className="font-mono text-ink/80">~/.omp/agent/skills</span> to own it.
+        </div>
+      )}
+
       {/* Basic Information Section */}
       <div className="space-y-4">
         <h3 className="text-xs font-bold uppercase tracking-wider text-ink">
@@ -99,7 +146,8 @@ description: ""
             <div className="group relative">
               <Info size={13} className="text-ink/40 cursor-help" />
               <div className="absolute left-0 top-5 hidden group-hover:block w-64 p-2 rounded-lg bg-ink text-paper text-[11px] shadow-lg z-20 pointer-events-none leading-relaxed">
-                Unique identifier and runtime execution scope for this skill.
+                Unique identifier and runtime execution scope for this skill. A project skill is written under
+                {' '}<span className="font-mono">&lt;workspace&gt;/.omp/skills</span>.
               </div>
             </div>
           </div>
@@ -109,14 +157,42 @@ description: ""
               type="text"
               value={name}
               onChange={(e) => setName(e.currentTarget.value)}
+              disabled={readOnly}
               placeholder="skill-name"
-              className="flex-1 px-3 py-2 rounded-lg border border-ink/20 hover:border-ink/40 bg-paper focus:outline-none focus:border-ink text-xs font-mono text-ink transition-colors"
+              className="flex-1 px-3 py-2 rounded-lg border border-ink/20 hover:border-ink/40 bg-paper focus:outline-none focus:border-ink text-xs font-mono text-ink transition-colors disabled:opacity-60"
             />
             <div className="flex items-center gap-1.5 px-3 py-2 rounded-lg border border-ink/20 bg-ink/5 text-xs text-ink/80 flex-shrink-0">
               <User size={14} className="text-ink/60" />
               <span>{locationLabel}</span>
             </div>
           </div>
+
+          {/* Scope selector: only a chamber-managed skill can move roots, and
+              the project scope needs a workspace to land in. */}
+          {!readOnly && (
+            <div className="flex items-center gap-2 mt-2">
+              {(['user', 'project'] as const).map((scope) => {
+                const disabled = scope === 'project' && projectScopeDisabled;
+                return (
+                  <button
+                    key={scope}
+                    type="button"
+                    disabled={disabled}
+                    title={disabled ? 'Select a workspace folder to write a project skill' : undefined}
+                    onClick={() => {
+                      setLocation(scope);
+                      setLocationLabel(scope === 'user' ? 'User / omp agent' : 'Project / .omp/skills');
+                    }}
+                    className={`px-2.5 py-1 rounded-md text-[11px] font-medium transition-colors cursor-pointer disabled:opacity-40 disabled:cursor-not-allowed ${
+                      location === scope ? 'bg-ink text-paper' : 'border border-ink/20 text-ink/70 hover:bg-ink/5'
+                    }`}
+                  >
+                    {scope === 'user' ? 'User scope' : 'Project scope'}
+                  </button>
+                );
+              })}
+            </div>
+          )}
         </div>
 
         {/* Description */}
@@ -128,7 +204,8 @@ description: ""
             <div className="group relative">
               <Info size={13} className="text-ink/40 cursor-help" />
               <div className="absolute left-0 top-5 hidden group-hover:block w-64 p-2 rounded-lg bg-ink text-paper text-[11px] shadow-lg z-20 pointer-events-none leading-relaxed">
-                Short description helping autonomous agents decide when to invoke this skill.
+                Short description helping autonomous agents decide when to invoke this skill. Required — omp does not
+                load a SKILL.md without one.
               </div>
             </div>
           </div>
@@ -137,10 +214,29 @@ description: ""
             rows={3}
             value={description}
             onChange={(e) => setDescription(e.currentTarget.value)}
+            disabled={readOnly}
             placeholder="Brief description of what this skill does..."
-            className="w-full px-3 py-2 rounded-lg border border-ink/20 hover:border-ink/40 bg-paper focus:outline-none focus:border-ink text-xs text-ink transition-colors resize-none leading-relaxed"
+            className="w-full px-3 py-2 rounded-lg border border-ink/20 hover:border-ink/40 bg-paper focus:outline-none focus:border-ink text-xs text-ink transition-colors resize-none leading-relaxed disabled:opacity-60"
           />
         </div>
+
+        {/* Model invocation toggle */}
+        <label className="flex items-start gap-2 cursor-pointer select-none">
+          <input
+            type="checkbox"
+            checked={hidden}
+            disabled={readOnly}
+            onChange={(e) => setHidden(e.currentTarget.checked)}
+            className="mt-0.5 accent-ink cursor-pointer"
+          />
+          <span className="text-xs text-ink/80 leading-relaxed">
+            Hide from the model&apos;s skill listing
+            <span className="block text-[11px] text-ink/50">
+              The skill stays runnable via <span className="font-mono">/skill:{name || 'name'}</span>; it is only kept out
+              of the automatic skill catalog the model sees.
+            </span>
+          </span>
+        </label>
       </div>
 
       {/* Instructions Section */}
@@ -173,8 +269,9 @@ description: ""
               rows={Math.max(lineCount, 8)}
               value={instructions}
               onChange={(e) => setInstructions(e.currentTarget.value)}
+              disabled={readOnly}
               spellcheck={false}
-              className="flex-1 p-3 bg-transparent text-ink font-mono text-xs leading-relaxed resize-none focus:outline-none overflow-y-auto"
+              className="flex-1 p-3 bg-transparent text-ink font-mono text-xs leading-relaxed resize-none focus:outline-none overflow-y-auto disabled:opacity-60"
               placeholder="Type markdown instructions..."
             />
           </div>
@@ -183,7 +280,7 @@ description: ""
 
       {/* Footer Actions */}
       <div className="pt-4 border-t border-ink/10 flex items-center justify-between">
-        {!isCreatingNew && skill && onDelete ? (
+        {!isCreatingNew && skill && onDelete && !readOnly ? (
           <button
             type="button"
             onClick={() => onDelete(skill.id)}
@@ -196,14 +293,16 @@ description: ""
           <div />
         )}
 
-        <button
-          type="button"
-          onClick={handleSave}
-          className="flex items-center gap-1.5 px-4 py-2 rounded-lg bg-ink text-paper text-xs font-medium hover:bg-ink/90 transition-colors shadow-xs cursor-pointer"
-        >
-          {savedToast ? <Check size={14} /> : <Save size={14} />}
-          <span>{savedToast ? 'Saved' : isCreatingNew ? 'Create Skill' : 'Save Changes'}</span>
-        </button>
+        {!readOnly && (
+          <button
+            type="button"
+            onClick={handleSave}
+            className="flex items-center gap-1.5 px-4 py-2 rounded-lg bg-ink text-paper text-xs font-medium hover:bg-ink/90 transition-colors shadow-xs cursor-pointer"
+          >
+            {savedToast ? <Check size={14} /> : <Save size={14} />}
+            <span>{savedToast ? 'Saved' : isCreatingNew ? 'Create Skill' : 'Save Changes'}</span>
+          </button>
+        )}
       </div>
     </div>
   );