feat: redesign settings pages to match canonical flat UI patterns (#493)

* refactor(settings): new IA shell + projects section + skills catalog discoverability

* chore(settings): split providers list by scope; show user before project

* fix: navigation flow in mobile Settings

* feat: redesign settings pages to use modern elevated surface patterns

* feat: replace helper text with tooltips in settings

* ui: redesign update dialog and fix external link routing

- Restructures UpdateDialog to focus on changelog readability with a wider max-w-4xl canvas
- Highlights @username contributor mentions with theme primary color
- Strips excessive vertical padding and right-aligns compact action buttons
- Disables streamdown's internal link safety dialog in favor of direct Tauri shell routing

* feat: refactor Git identities into dedicated Git settings page

* feat: unify sidebar background styling across VS Code and web/mobile

* fix: adjust button styling and layout for mobile settings pages

* feat: add MCP settings page and sidebar

* feat: hide models in provider view (thanks to @nguyenngothuong)

* feat: add "Add new provider" option to model selector dropdown

* fix: local evroc logo + provider dropdown icons

* fix: increase width of provider menu

* fix: dark theme background color for better contrast

* feat: update @opencode-ai/sdk dependency to v1.2.10

* fix: restore session sorting to only use updated time

* fix: added settings for sessions deletion dialog

* fix: adjust padding on settings pages for better layout

* fix: standardize select dropdown height across UI

* fix: agent selector UI and notification settings

* fix: remove redundant helper text from settings pages

* fix: update UI layout for description fields

* fix: remove border-none and shadow-none from textarea classes

* fix: enable context menu on sidebar items

* feat: refactor UI controls and layout patterns across settings pages

* fix: use headerless blocks when page title already provides context

* fix: remove subtask option from command settings

* fix: refactor mcp page settings

* fix: reduce spacing in skills configuration pages

* feat: refactor voice settings

* feat: refactor settings sidebar sections

packages/ui/src/components/sections/commands/AgentSelector.tsx

@@ -48,9 +48,23 @@ export const AgentSelector: React.FC<AgentSelectorProps> = ({
             <MobileOverlayPanel
                 open={isMobilePanelOpen}
                 onClose={closeMobilePanel}
-                title="Select Agent"
+                title="Select agent"
             >
                 <div className="space-y-1">
+                    <button
+                        type="button"
+                        className={cn(
+                            'flex w-full items-center justify-between rounded-lg border border-border/40 bg-background/95 px-2 py-1.5 text-left',
+                            !agentName ? 'bg-primary/10 text-primary' : 'text-foreground'
+                        )}
+                        onClick={() => {
+                            handleAgentChange('');
+                            closeMobilePanel();
+                        }}
+                    >
+                        <span className={cn('typography-meta', !agentName ? 'font-medium' : 'text-muted-foreground')}>Not selected</span>
+                        {!agentName && <div className="h-2 w-2 rounded-full bg-primary" />}
+                    </button>
                     {agents.map((agent) => {
                         const isSelected = agent.name === agentName;
 
@@ -81,17 +95,6 @@ export const AgentSelector: React.FC<AgentSelectorProps> = ({
                             </button>
                         );
                     })}
-
-                    <button
-                        type="button"
-                        className="flex w-full items-center justify-between rounded-lg border border-border/40 bg-background/95 px-2 py-1.5 text-left"
-                        onClick={() => {
-                            handleAgentChange('');
-                            closeMobilePanel();
-                        }}
-                    >
-                        <span className="typography-meta text-muted-foreground">No agent (optional)</span>
-                    </button>
                 </div>
             </MobileOverlayPanel>
         );
@@ -131,6 +134,12 @@ export const AgentSelector: React.FC<AgentSelectorProps> = ({
                         </div>
                     </DropdownMenuTrigger>
                     <DropdownMenuContent className="max-w-[300px]">
+                        <DropdownMenuItem
+                            className="typography-meta"
+                            onSelect={() => handleAgentChange('')}
+                        >
+                            <span className="text-muted-foreground">Not selected</span>
+                        </DropdownMenuItem>
                         {agents.map((agent) => (
                             <DropdownMenuItem
                                 key={agent.name}
@@ -140,12 +149,6 @@ export const AgentSelector: React.FC<AgentSelectorProps> = ({
                                 <span className="font-medium">{agent.name}</span>
                             </DropdownMenuItem>
                         ))}
-                        <DropdownMenuItem
-                            className="typography-meta"
-                            onSelect={() => handleAgentChange('')}
-                        >
-                            <span className="text-muted-foreground">No agent (optional)</span>
-                        </DropdownMenuItem>
                     </DropdownMenuContent>
                 </DropdownMenu>
             )}

packages/ui/src/components/sections/commands/CommandsPage.tsx

@@ -1,20 +1,19 @@
 import React from 'react';
-import { Button } from '@/components/ui/button';
+import { ButtonSmall } from '@/components/ui/button-small';
 import { Input } from '@/components/ui/input';
 import { Textarea } from '@/components/ui/textarea';
-import { Checkbox } from '@/components/ui/checkbox';
 import { toast } from '@/components/ui';
 import { useCommandsStore, type CommandConfig, type CommandScope } from '@/stores/useCommandsStore';
-import { RiInformationLine, RiSaveLine, RiTerminalBoxLine, RiUser3Line, RiFolderLine } from '@remixicon/react';
+import { RiTerminalBoxLine, RiUser3Line, RiFolderLine } from '@remixicon/react';
 import { ModelSelector } from '../agents/ModelSelector';
 import { AgentSelector } from './AgentSelector';
-import { Tooltip, TooltipContent, TooltipTrigger } from '@/components/ui/tooltip';
 import { ScrollableOverlay } from '@/components/ui/ScrollableOverlay';
 import {
   Select,
   SelectContent,
   SelectItem,
   SelectTrigger,
+  SelectValue,
 } from '@/components/ui/select';
 
 export const CommandsPage: React.FC = () => {
@@ -29,7 +28,6 @@ export const CommandsPage: React.FC = () => {
   const [agent, setAgent] = React.useState('');
   const [model, setModel] = React.useState('');
   const [template, setTemplate] = React.useState('');
-  const [subtask, setSubtask] = React.useState(false);
   const [isSaving, setIsSaving] = React.useState(false);
   const initialStateRef = React.useRef<{
     draftName: string;
@@ -38,27 +36,22 @@ export const CommandsPage: React.FC = () => {
     agent: string;
     model: string;
     template: string;
-    subtask: boolean;
   } | null>(null);
 
   React.useEffect(() => {
     if (isNewCommand && commandDraft) {
-      // Prefill from draft (for new or duplicated commands)
       const draftNameValue = commandDraft.name || '';
       const draftScopeValue = commandDraft.scope || 'user';
       const descriptionValue = commandDraft.description || '';
       const agentValue = commandDraft.agent || '';
       const modelValue = commandDraft.model || '';
       const templateValue = commandDraft.template || '';
-      const subtaskValue = commandDraft.subtask || false;
-
       setDraftName(draftNameValue);
       setDraftScope(draftScopeValue);
       setDescription(descriptionValue);
       setAgent(agentValue);
       setModel(modelValue);
       setTemplate(templateValue);
-      setSubtask(subtaskValue);
 
       initialStateRef.current = {
         draftName: draftNameValue,
@@ -67,20 +60,16 @@ export const CommandsPage: React.FC = () => {
         agent: agentValue,
         model: modelValue,
         template: templateValue,
-        subtask: subtaskValue,
       };
     } else if (selectedCommand) {
       const descriptionValue = selectedCommand.description || '';
       const agentValue = selectedCommand.agent || '';
       const modelValue = selectedCommand.model || '';
       const templateValue = selectedCommand.template || '';
-      const subtaskValue = selectedCommand.subtask || false;
-
       setDescription(descriptionValue);
       setAgent(agentValue);
       setModel(modelValue);
       setTemplate(templateValue);
-      setSubtask(subtaskValue);
 
       initialStateRef.current = {
         draftName: '',
@@ -89,7 +78,6 @@ export const CommandsPage: React.FC = () => {
         agent: agentValue,
         model: modelValue,
         template: templateValue,
-        subtask: subtaskValue,
       };
     }
   }, [selectedCommand, isNewCommand, selectedCommandName, commands, commandDraft]);
@@ -109,10 +97,8 @@ export const CommandsPage: React.FC = () => {
     if (agent !== initial.agent) return true;
     if (model !== initial.model) return true;
     if (template !== initial.template) return true;
-    if (subtask !== initial.subtask) return true;
-
     return false;
-  }, [agent, description, draftName, draftScope, isNewCommand, model, subtask, template]);
+  }, [agent, description, draftName, draftScope, isNewCommand, model, template]);
 
   const handleSave = async () => {
     const commandName = isNewCommand ? draftName.trim().replace(/\s+/g, '-') : selectedCommandName?.trim();
@@ -127,7 +113,6 @@ export const CommandsPage: React.FC = () => {
       return;
     }
 
-    // Check for duplicate name when creating new command
     if (isNewCommand && commands.some((cmd) => cmd.name === commandName)) {
       toast.error('A command with this name already exists');
       return;
@@ -145,7 +130,6 @@ export const CommandsPage: React.FC = () => {
         agent: trimmedAgent === '' ? null : trimmedAgent,
         model: trimmedModel === '' ? null : trimmedModel,
         template: trimmedTemplate,
-        subtask,
         scope: isNewCommand ? draftScope : undefined,
       };
 
@@ -153,7 +137,7 @@ export const CommandsPage: React.FC = () => {
       if (isNewCommand) {
         success = await createCommand(config);
         if (success) {
-          setCommandDraft(null); // Clear draft after successful creation
+          setCommandDraft(null); 
         }
       } else {
         success = await updateCommand(commandName, config);
@@ -186,231 +170,167 @@ export const CommandsPage: React.FC = () => {
 
   return (
     <ScrollableOverlay keyboardAvoid outerClassName="h-full" className="w-full">
-      <div className="mx-auto max-w-3xl space-y-6 p-6">
-        {/* Header */}
-        <div className="space-y-1">
-          <h1 className="typography-ui-header font-semibold text-lg">
-            {isNewCommand ? 'New Command' : `/${selectedCommandName}`}
-          </h1>
-        </div>
+      <div className="mx-auto w-full max-w-3xl p-3 sm:p-6 sm:pt-8">
 
-        {}
-        <div className="space-y-4">
-          <div className="space-y-1">
-            <h2 className="typography-ui-header font-semibold text-foreground">Basic Information</h2>
-            <p className="typography-meta text-muted-foreground/80">
-              Configure command identity and metadata
+        {/* Header */}
+        <div className="mb-4 flex items-center justify-between gap-4">
+          <div className="min-w-0">
+            <h2 className="typography-ui-header font-semibold text-foreground truncate">
+              {isNewCommand ? 'New Command' : `/${selectedCommandName}`}
+            </h2>
+            <p className="typography-meta text-muted-foreground truncate">
+              {isNewCommand ? 'Configure a new slash command' : 'Edit command settings'}
             </p>
           </div>
+        </div>
 
-          {isNewCommand && (
-            <div className="space-y-2">
-              <label className="typography-ui-label font-medium text-foreground">
-                Command Name & Scope
-              </label>
-              <div className="flex items-center gap-2">
-                <div className="flex items-center flex-1">
-                  <span className="typography-ui-label text-muted-foreground mr-1">/</span>
-                  <Input
-                    value={draftName}
-                    onChange={(e) => setDraftName(e.target.value)}
-                    placeholder="command-name"
-                    className="flex-1 text-foreground placeholder:text-muted-foreground"
-                  />
+        {/* Identity */}
+        <div className="mb-8">
+          <div className="mb-1 px-1">
+            <h3 className="typography-ui-header font-medium text-foreground">
+              Identity
+            </h3>
+          </div>
+
+          <section className="px-2 pb-2 pt-0 space-y-0">
+
+            {isNewCommand && (
+              <div className="flex flex-col gap-2 py-1.5 sm:flex-row sm:items-center sm:gap-8">
+                <div className="flex min-w-0 flex-col sm:w-56 shrink-0">
+                  <span className="typography-ui-label text-foreground">Command Name</span>
                 </div>
-                <Select value={draftScope} onValueChange={(v) => setDraftScope(v as CommandScope)}>
-                  <SelectTrigger className="!h-9 w-auto gap-1.5">
-                    {draftScope === 'user' ? (
-                      <RiUser3Line className="h-4 w-4" />
-                    ) : (
-                      <RiFolderLine className="h-4 w-4" />
-                    )}
-                    <span className="capitalize">{draftScope}</span>
-                  </SelectTrigger>
-                  <SelectContent align="end">
-                    <SelectItem value="user" className="pr-2 [&>span:first-child]:hidden">
-                      <div className="flex flex-col gap-0.5">
+                <div className="flex min-w-0 flex-1 items-center gap-2 sm:w-fit sm:flex-initial">
+                  <div className="flex items-center">
+                    <span className="typography-ui-label text-muted-foreground mr-1">/</span>
+                    <Input
+                      value={draftName}
+                      onChange={(e) => setDraftName(e.target.value)}
+                      placeholder="command-name"
+                      className="h-7 w-40 px-2"
+                    />
+                  </div>
+                  <Select value={draftScope} onValueChange={(v) => setDraftScope(v as CommandScope)}>
+                    <SelectTrigger className="w-fit min-w-[100px]">
+                      <SelectValue placeholder="Scope" />
+                    </SelectTrigger>
+                    <SelectContent align="end">
+                      <SelectItem value="user">
                         <div className="flex items-center gap-2">
-                          <RiUser3Line className="h-4 w-4" />
-                          <span>User</span>
+                          <RiUser3Line className="h-3.5 w-3.5" />
+                          <span>Global</span>
                         </div>
-                        <span className="typography-micro text-muted-foreground ml-6">Available in all projects</span>
-                      </div>
-                    </SelectItem>
-                    <SelectItem value="project" className="pr-2 [&>span:first-child]:hidden">
-                      <div className="flex flex-col gap-0.5">
+                      </SelectItem>
+                      <SelectItem value="project">
                         <div className="flex items-center gap-2">
-                          <RiFolderLine className="h-4 w-4" />
+                          <RiFolderLine className="h-3.5 w-3.5" />
                           <span>Project</span>
                         </div>
-                        <span className="typography-micro text-muted-foreground ml-6">Only in current project</span>
-                      </div>
-                    </SelectItem>
-                  </SelectContent>
-                </Select>
+                      </SelectItem>
+                    </SelectContent>
+                  </Select>
+                </div>
+              </div>
+            )}
+
+            <div className="py-1.5">
+              <span className="typography-ui-label text-foreground">Description</span>
+              <div className="mt-1.5">
+                <Textarea
+                  value={description}
+                  onChange={(e) => setDescription(e.target.value)}
+                  placeholder="What does this command do?"
+                  rows={2}
+                  className="w-full resize-none min-h-[60px] bg-transparent"
+                />
               </div>
             </div>
-          )}
 
-          <div className="space-y-2">
-            <label className="typography-ui-label font-medium text-foreground">
-              Description
-            </label>
-            <Textarea
-              value={description}
-              onChange={(e) => setDescription(e.target.value)}
-              placeholder="What does this command do?"
-              rows={3}
-            />
-          </div>
+          </section>
         </div>
 
-        {}
-        <div className="space-y-4">
-          <div className="space-y-1">
-            <h2 className="typography-h2 font-semibold text-foreground">Model & Agent Configuration</h2>
-            <p className="typography-meta text-muted-foreground/80">
-              Configure model and agent for command execution
-            </p>
+        {/* Execution Context */}
+        <div className="mb-8">
+          <div className="mb-1 px-1">
+            <h3 className="typography-ui-header font-medium text-foreground">
+              Execution Context
+            </h3>
           </div>
 
-          <div className="space-y-2">
-            <label className="typography-ui-label font-medium text-foreground">
-              Agent
-            </label>
-            <AgentSelector
-              agentName={agent}
-              onChange={(agentName: string) => setAgent(agentName)}
-            />
-            <p className="typography-meta text-muted-foreground">
-              Agent to execute this command (optional)
-            </p>
-          </div>
+          <section className="px-2 pb-2 pt-0 space-y-0">
 
-          <div className="space-y-2">
-            <label className="typography-ui-label font-medium text-foreground">
-              Model
-            </label>
-            <ModelSelector
-              providerId={model ? model.split('/')[0] : ''}
-              modelId={model ? model.split('/')[1] : ''}
-              onChange={(providerId: string, modelId: string) => {
-                if (providerId && modelId) {
-                  setModel(`${providerId}/${modelId}`);
-                } else {
-                  setModel('');
-                }
-              }}
-            />
-            <p className="typography-meta text-muted-foreground">
-              Default model for this command (optional)
-            </p>
-          </div>
-
-          <div className="space-y-2">
-            <label className="typography-ui-label font-medium text-foreground flex items-center gap-2 cursor-pointer">
-              <Checkbox
-                checked={subtask}
-                onChange={(checked) => setSubtask(checked)}
-              />
-              Force Subagent Invocation
-            </label>
-            <div className="flex items-center gap-2">
-              <p className="typography-meta text-muted-foreground">
-                Force command to run in a subagent context
-              </p>
-              <Tooltip delayDuration={1000}>
-                <TooltipTrigger asChild>
-                  <RiInformationLine className="h-3.5 w-3.5 text-muted-foreground/60 cursor-help" />
-                </TooltipTrigger>
-                  <TooltipContent sideOffset={8} className="max-w-xs">
-                    When enabled, this command will always execute in a subagent context,<br/>
-                    even if triggered from main agent.<br/>
-                    Useful for isolating command logic and maintaining clean separation of concerns.
-                  </TooltipContent>
-              </Tooltip>
+            <div className="flex flex-col gap-2 py-1.5 sm:flex-row sm:items-center sm:gap-8">
+              <div className="flex min-w-0 flex-col sm:w-56 shrink-0">
+                <span className="typography-ui-label text-foreground">Override Agent</span>
+              </div>
+              <div className="flex min-w-0 flex-1 items-center gap-2 sm:w-fit sm:flex-initial">
+                <AgentSelector
+                  agentName={agent}
+                  onChange={(agentName: string) => setAgent(agentName)}
+                />
+              </div>
             </div>
+
+            <div className="flex flex-col gap-2 py-1.5 sm:flex-row sm:items-center sm:gap-8">
+              <div className="flex min-w-0 flex-col sm:w-56 shrink-0">
+                <span className="typography-ui-label text-foreground">Override Model</span>
+              </div>
+              <div className="flex min-w-0 flex-1 items-center gap-2 sm:w-fit sm:flex-initial">
+                <ModelSelector
+                  providerId={model ? model.split('/')[0] : ''}
+                  modelId={model ? model.split('/')[1] : ''}
+                  onChange={(providerId: string, modelId: string) => {
+                    if (providerId && modelId) {
+                      setModel(`${providerId}/${modelId}`);
+                    } else {
+                      setModel('');
+                    }
+                  }}
+                />
+              </div>
+            </div>
+
+          </section>
+        </div>
+
+        {/* Command Template */}
+        <div className="mb-2">
+          <div className="mb-1 px-1">
+            <h3 className="typography-ui-header font-medium text-foreground">
+              Command Template
+            </h3>
+          </div>
+
+          <section className="px-2 pb-2 pt-0">
+            <Textarea
+              value={template}
+              onChange={(e) => setTemplate(e.target.value)}
+              placeholder={`Your command template here...\n\nUse $ARGUMENTS to reference user input.\nUse !\`shell command\` to inject shell output.\nUse @filename to include file contents.`}
+              rows={12}
+              className="w-full font-mono typography-meta min-h-[160px] max-h-[60vh] bg-transparent resize-y"
+            />
+          </section>
+
+          <div className="mt-2 px-2">
+            <p className="typography-meta text-muted-foreground">
+              <code className="text-foreground">$ARGUMENTS</code> user input &middot;{' '}
+              <code className="text-foreground">!`cmd`</code> shell output &middot;{' '}
+              <code className="text-foreground">@file</code> file contents
+            </p>
           </div>
         </div>
 
-        {}
-        <div className="space-y-4">
-          <div className="space-y-1">
-            <h2 className="typography-h2 font-semibold text-foreground">Command Template</h2>
-            <p className="typography-meta text-muted-foreground/80">
-              Define the prompt template for this command. Use $ARGUMENTS for user input.
-            </p>
-          </div>
-          <Textarea
-            value={template}
-            onChange={(e) => setTemplate(e.target.value)}
-            placeholder={`Your command template here...
-
-Use $ARGUMENTS to reference user input.
-Use !\`shell command\` to inject shell output.
-Use @filename to include file contents.`}
-            rows={12}
-            className="font-mono typography-meta"
-          />
-          <div className="typography-meta text-muted-foreground/80 space-y-1">
-            <p className="font-medium">Template Features:</p>
-            <ul className="list-disc list-inside space-y-0.5 ml-2">
-              <li className="flex items-center gap-2">
-                <code className="bg-muted px-1 rounded">$ARGUMENTS</code>
-                <span>- User input after command</span>
-                <Tooltip delayDuration={1000}>
-                  <TooltipTrigger asChild>
-                    <RiInformationLine className="h-3 w-3 text-muted-foreground/60 cursor-help" />
-                  </TooltipTrigger>
-                  <TooltipContent sideOffset={8} className="max-w-xs">
-                    Replaced with everything the user types after the command name.<br/>
-                    Example: "/deploy staging" makes $ARGUMENTS = "staging"
-                  </TooltipContent>
-                </Tooltip>
-              </li>
-              <li className="flex items-center gap-2">
-                <code className="bg-muted px-1 rounded">!`command`</code>
-                <span>- Inject shell command output</span>
-                <Tooltip delayDuration={1000}>
-                  <TooltipTrigger asChild>
-                    <RiInformationLine className="h-3 w-3 text-muted-foreground/60 cursor-help" />
-                  </TooltipTrigger>
-                  <TooltipContent sideOffset={8} className="max-w-xs">
-                    Executes shell command and replaces this placeholder with its output.<br/>
-                    Example: !`git branch --show-current` gets current branch name
-                  </TooltipContent>
-                </Tooltip>
-              </li>
-              <li className="flex items-center gap-2">
-                <code className="bg-muted px-1 rounded">@filename</code>
-                <span>- Include file contents</span>
-                <Tooltip delayDuration={1000}>
-                  <TooltipTrigger asChild>
-                    <RiInformationLine className="h-3 w-3 text-muted-foreground/60 cursor-help" />
-                  </TooltipTrigger>
-                  <TooltipContent sideOffset={8} className="max-w-xs">
-                    Replaces with the full contents of the specified file.<br/>
-                    Example: @package.json includes the package.json content in the prompt
-                  </TooltipContent>
-                </Tooltip>
-              </li>
-            </ul>
-          </div>
-
-        {}
-        <div className="flex justify-end border-t border-border/40 pt-4">
-          <Button
-            size="sm"
-            variant="default"
+        {/* Save action */}
+        <div className="px-2 py-1">
+          <ButtonSmall
             onClick={handleSave}
             disabled={isSaving || !isDirty}
-            className="gap-2 h-6 px-2 text-xs w-fit"
+            size="xs"
+            className="!font-normal"
           >
-            <RiSaveLine className="h-3 w-3" />
             {isSaving ? 'Saving...' : 'Save Changes'}
-          </Button>
+          </ButtonSmall>
         </div>
-      </div>
+
       </div>
     </ScrollableOverlay>
   );

packages/ui/src/components/sections/commands/CommandsSidebar.tsx

@@ -1,8 +1,9 @@
 import React from 'react';
-import { Button } from '@/components/ui/button';
+import { ButtonSmall } from '@/components/ui/button-small';
 import { ButtonLarge } from '@/components/ui/button-large';
 import { Input } from '@/components/ui/input';
 import { toast } from '@/components/ui';
+import { isMobileDeviceViaCSS } from '@/lib/device';
 import {
   Dialog,
   DialogContent,
@@ -20,11 +21,9 @@ import {
 import { RiAddLine, RiTerminalBoxLine, RiMore2Line, RiDeleteBinLine, RiFileCopyLine, RiRestartLine, RiEditLine } from '@remixicon/react';
 import { useCommandsStore, isCommandBuiltIn, type Command } from '@/stores/useCommandsStore';
 import { useSkillsStore } from '@/stores/useSkillsStore';
-import { useUIStore } from '@/stores/useUIStore';
-import { useDeviceInfo } from '@/lib/device';
-import { isVSCodeRuntime } from '@/lib/desktop';
 import { ScrollableOverlay } from '@/components/ui/ScrollableOverlay';
 import { cn } from '@/lib/utils';
+import { SettingsProjectSelector } from '@/components/sections/shared/SettingsProjectSelector';
 
 interface CommandsSidebarProps {
   onItemSelect?: () => void;
@@ -36,6 +35,7 @@ export const CommandsSidebar: React.FC<CommandsSidebarProps> = ({ onItemSelect }
   const [confirmActionCommand, setConfirmActionCommand] = React.useState<Command | null>(null);
   const [confirmActionType, setConfirmActionType] = React.useState<'delete' | 'reset' | null>(null);
   const [isConfirmActionPending, setIsConfirmActionPending] = React.useState(false);
+  const [openMenuCommand, setOpenMenuCommand] = React.useState<string | null>(null);
 
   const {
     selectedCommandName,
@@ -48,11 +48,6 @@ export const CommandsSidebar: React.FC<CommandsSidebarProps> = ({ onItemSelect }
   } = useCommandsStore();
   const { skills, loadSkills } = useSkillsStore();
 
-  const { setSidebarOpen } = useUIStore();
-  const { isMobile } = useDeviceInfo();
-
-  const isVSCode = React.useMemo(() => isVSCodeRuntime(), []);
-
   React.useEffect(() => {
     loadCommands();
     loadSkills();
@@ -74,7 +69,7 @@ export const CommandsSidebar: React.FC<CommandsSidebarProps> = ({ onItemSelect }
     }
   }, [selectedCommandName, setSelectedCommand, skillNames]);
 
-  const bgClass = isVSCode ? 'bg-background' : 'bg-sidebar';
+  const bgClass = 'bg-background';
 
   const handleCreateNew = () => {
     // Generate unique name
@@ -91,9 +86,7 @@ export const CommandsSidebar: React.FC<CommandsSidebarProps> = ({ onItemSelect }
     setSelectedCommand(newName);
     onItemSelect?.();
 
-    if (isMobile) {
-      setSidebarOpen(false);
-    }
+
   };
 
   const handleDeleteCommand = async (command: Command) => {
@@ -162,13 +155,10 @@ export const CommandsSidebar: React.FC<CommandsSidebarProps> = ({ onItemSelect }
       template: command.template,
       agent: command.agent,
       model: command.model,
-      subtask: command.subtask,
     });
     setSelectedCommand(newName);
 
-    if (isMobile) {
-      setSidebarOpen(false);
-    }
+
   };
 
   const handleOpenRenameDialog = (command: Command) => {
@@ -203,7 +193,6 @@ export const CommandsSidebar: React.FC<CommandsSidebarProps> = ({ onItemSelect }
       template: renameDialogCommand.template,
       agent: renameDialogCommand.agent,
       model: renameDialogCommand.model,
-      subtask: renameDialogCommand.subtask,
     });
 
     if (success) {
@@ -227,18 +216,18 @@ export const CommandsSidebar: React.FC<CommandsSidebarProps> = ({ onItemSelect }
 
   return (
     <div className={cn('flex h-full flex-col', bgClass)}>
-      <div className={cn('border-b px-3', isMobile ? 'mt-2 py-3' : 'py-3')}>
+      <div className="border-b px-3 pt-4 pb-3">
+        <h2 className="text-base font-semibold text-foreground mb-3">Commands</h2>
+        <SettingsProjectSelector className="mb-3" />
         <div className="flex items-center justify-between gap-2">
           <span className="typography-meta text-muted-foreground">Total {commandOnlyItems.length}</span>
-          <Button
-            type="button"
+          <ButtonSmall
             variant="ghost"
-            size="icon"
-            className="h-7 w-7 -my-1 text-muted-foreground"
+            className="h-7 w-7 px-0 -my-1 text-muted-foreground"
             onClick={handleCreateNew}
           >
-            <RiAddLine className="size-4" />
-          </Button>
+            <RiAddLine className="h-3.5 w-3.5" />
+          </ButtonSmall>
         </div>
       </div>
 
@@ -264,12 +253,12 @@ export const CommandsSidebar: React.FC<CommandsSidebarProps> = ({ onItemSelect }
                     onSelect={() => {
                       setSelectedCommand(command.name);
                       onItemSelect?.();
-                      if (isMobile) {
-                        setSidebarOpen(false);
-                      }
+
                     }}
                     onReset={() => handleResetCommand(command)}
                     onDuplicate={() => handleDuplicateCommand(command)}
+                    isMenuOpen={openMenuCommand === command.name}
+                    onMenuOpenChange={(open) => setOpenMenuCommand(open ? command.name : null)}
                   />
                 ))}
               </>
@@ -288,13 +277,13 @@ export const CommandsSidebar: React.FC<CommandsSidebarProps> = ({ onItemSelect }
                     onSelect={() => {
                       setSelectedCommand(command.name);
                       onItemSelect?.();
-                      if (isMobile) {
-                        setSidebarOpen(false);
-                      }
+
                     }}
                     onRename={() => handleOpenRenameDialog(command)}
                     onDelete={() => handleDeleteCommand(command)}
                     onDuplicate={() => handleDuplicateCommand(command)}
+                    isMenuOpen={openMenuCommand === command.name}
+                    onMenuOpenChange={(open) => setOpenMenuCommand(open ? command.name : null)}
                   />
                 ))}
               </>
@@ -321,14 +310,13 @@ export const CommandsSidebar: React.FC<CommandsSidebarProps> = ({ onItemSelect }
             </DialogDescription>
           </DialogHeader>
           <DialogFooter>
-            <Button
+            <ButtonLarge
               variant="ghost"
               onClick={closeConfirmActionDialog}
               disabled={isConfirmActionPending}
-              className="text-foreground hover:bg-interactive-hover hover:text-foreground"
             >
               Cancel
-            </Button>
+            </ButtonLarge>
             <ButtonLarge onClick={handleConfirmAction} disabled={isConfirmActionPending}>
               {confirmActionType === 'delete' ? 'Delete' : 'Reset'}
             </ButtonLarge>
@@ -357,13 +345,12 @@ export const CommandsSidebar: React.FC<CommandsSidebarProps> = ({ onItemSelect }
             }}
           />
           <DialogFooter>
-            <Button
+            <ButtonLarge
               variant="ghost"
               onClick={() => setRenameDialogCommand(null)}
-                className="text-foreground hover:bg-interactive-hover hover:text-foreground"
             >
               Cancel
-            </Button>
+            </ButtonLarge>
             <ButtonLarge onClick={handleRenameCommand}>
               Rename
             </ButtonLarge>
@@ -382,6 +369,8 @@ interface CommandListItemProps {
   onReset?: () => void;
   onRename?: () => void;
   onDuplicate: () => void;
+  isMenuOpen: boolean;
+  onMenuOpenChange: (open: boolean) => void;
 }
 
 const CommandListItem: React.FC<CommandListItemProps> = ({
@@ -392,13 +381,20 @@ const CommandListItem: React.FC<CommandListItemProps> = ({
   onReset,
   onRename,
   onDuplicate,
+  isMenuOpen,
+  onMenuOpenChange,
 }) => {
+  const isMobile = isMobileDeviceViaCSS();
   return (
     <div
       className={cn(
-        'group relative flex items-center rounded-md px-1.5 py-1 transition-all duration-200',
+        'group relative flex items-center rounded-md px-1.5 py-1 transition-all duration-200 select-none',
         isSelected ? 'bg-interactive-selection' : 'hover:bg-interactive-hover'
       )}
+      onContextMenu={!isMobile ? (e) => {
+        e.preventDefault();
+        onMenuOpenChange(true);
+      } : undefined}
     >
       <div className="flex min-w-0 flex-1 items-center">
         <button
@@ -424,15 +420,14 @@ const CommandListItem: React.FC<CommandListItemProps> = ({
           )}
         </button>
 
-        <DropdownMenu>
+        <DropdownMenu open={isMenuOpen} onOpenChange={onMenuOpenChange}>
           <DropdownMenuTrigger asChild>
-            <Button
-              size="icon"
+            <ButtonSmall
               variant="ghost"
-              className="h-6 w-6 flex-shrink-0 -mr-1 opacity-100 transition-opacity md:opacity-0 md:group-hover:opacity-100"
+              className="h-6 w-6 px-0 flex-shrink-0 -mr-1 opacity-100 transition-opacity md:opacity-0 md:group-hover:opacity-100"
             >
               <RiMore2Line className="h-3.5 w-3.5" />
-            </Button>
+            </ButtonSmall>
           </DropdownMenuTrigger>
           <DropdownMenuContent align="end" className="w-fit min-w-20">
             {onRename && (