Refactor code structure for improved readability and maintainability

ccw/frontend/src/components/layout/AppShell.tsx

@@ -162,7 +162,6 @@ export function AppShell({
     <div className="flex flex-col min-h-screen bg-background">
       {/* Header - fixed at top */}
       <Header
-        onMenuClick={handleMenuClick}
         onRefresh={onRefresh}
         isRefreshing={isRefreshing}
         onCliMonitorClick={handleCliMonitorClick}

ccw/frontend/src/components/layout/Sidebar.tsx

@@ -22,7 +22,6 @@ import {
   Zap,
   GitFork,
   Shield,
-  History,
   Server,
   Layers,
   Wrench,
@@ -89,7 +88,6 @@ const navGroupDefinitions: NavGroupDef[] = [
     icon: Brain,
     items: [
       { path: '/memory', labelKey: 'navigation.main.memory', icon: Brain },
-      { path: '/prompts', labelKey: 'navigation.main.prompts', icon: History },
       { path: '/skills', labelKey: 'navigation.main.skills', icon: Sparkles },
       { path: '/commands', labelKey: 'navigation.main.commands', icon: Terminal },
       { path: '/settings/rules', labelKey: 'navigation.main.rules', icon: Shield },

ccw/frontend/src/hooks/useCommands.ts

@@ -49,6 +49,8 @@ export interface UseCommandsReturn {
   totalCount: number;
   enabledCount: number;
   disabledCount: number;
+  projectCount: number;
+  userCount: number;
   isLoading: boolean;
   isFetching: boolean;
   error: Error | null;
@@ -136,8 +138,12 @@ export function useCommands(options: UseCommandsOptions = {}): UseCommandsReturn
 
   const allCommands = query.data?.commands ?? [];
 
-  // Apply filters
-  const filteredCommands = (() => {
+  // Per-location total counts (unfiltered, for tab badges)
+  const projectCount = allCommands.filter(c => c.location === 'project').length;
+  const userCount = allCommands.filter(c => c.location === 'user').length;
+
+  // Apply filters (except showDisabled) for counts and grouping
+  const baseFiltered = (() => {
     let commands = allCommands;
 
     if (filter?.search) {
@@ -166,14 +172,15 @@ export function useCommands(options: UseCommandsOptions = {}): UseCommandsReturn
       commands = commands.filter((c) => c.location === filter.location);
     }
 
-    if (filter?.showDisabled === false) {
-      commands = commands.filter((c) => c.enabled !== false);
-    }
-
     return commands;
   })();
 
-  // Group by category
+  // Apply showDisabled filter for the returned commands list
+  const filteredCommands = filter?.showDisabled === false
+    ? baseFiltered.filter((c) => c.enabled !== false)
+    : baseFiltered;
+
+  // Group by category (from allCommands for global view)
   const commandsByCategory: Record<string, Command[]> = {};
   const categories = new Set<string>();
 
@@ -186,13 +193,13 @@ export function useCommands(options: UseCommandsOptions = {}): UseCommandsReturn
     commandsByCategory[category].push(command);
   }
 
-  // Group by group
+  // Group by group (from baseFiltered - respects location filter, includes disabled for accordion)
   const groupedCommands: Record<string, Command[]> = {};
   const groups = new Set<string>();
-  const enabledCount = allCommands.filter(c => c.enabled !== false).length;
-  const disabledCount = allCommands.length - enabledCount;
+  const enabledCount = baseFiltered.filter(c => c.enabled !== false).length;
+  const disabledCount = baseFiltered.length - enabledCount;
 
-  for (const command of allCommands) {
+  for (const command of baseFiltered) {
     const group = command.group || 'other';
     groups.add(group);
     if (!groupedCommands[group]) {
@@ -217,6 +224,8 @@ export function useCommands(options: UseCommandsOptions = {}): UseCommandsReturn
     groups: Array.from(groups).sort(),
     enabledCount,
     disabledCount,
+    projectCount,
+    userCount,
     totalCount: allCommands.length,
     isLoading: query.isLoading,
     isFetching: query.isFetching,

ccw/frontend/src/pages/CommandsManagerPage.tsx

@@ -3,7 +3,7 @@
 // ========================================
 // Manage custom slash commands with search/filter
 
-import { useState, useMemo } from 'react';
+import { useState } from 'react';
 import { useIntl } from 'react-intl';
 import {
   Terminal,
@@ -46,6 +46,8 @@ export function CommandsManagerPage() {
     groups,
     enabledCount,
     disabledCount,
+    projectCount,
+    userCount,
     isLoading,
     isFetching,
     error,
@@ -93,16 +95,6 @@ export function CommandsManagerPage() {
     toggleGroup(groupName, enable, locationFilter);
   };
 
-  // Calculate command counts per location
-  const projectCount = useMemo(
-    () => commands.filter((c) => c.location === 'project').length,
-    [commands]
-  );
-  const userCount = useMemo(
-    () => commands.filter((c) => c.location === 'user').length,
-    [commands]
-  );
-
   return (
     <div className="space-y-6">
       {/* Page Header */}
@@ -159,25 +151,6 @@ export function CommandsManagerPage() {
           ]}
         />
 
-        {/* Show Disabled Controls */}
-        <div className="flex items-center justify-end gap-2">
-          <Button
-            variant={showDisabledCommands ? 'default' : 'outline'}
-            size="sm"
-            onClick={() => setShowDisabledCommands((prev) => !prev)}
-            disabled={isToggling}
-          >
-            {showDisabledCommands ? (
-              <Eye className="w-4 h-4 mr-2" />
-            ) : (
-              <EyeOff className="w-4 h-4 mr-2" />
-            )}
-            {showDisabledCommands
-              ? formatMessage({ id: 'commands.actions.hideDisabled' })
-              : formatMessage({ id: 'commands.actions.showDisabled' })}
-            <span className="ml-1 text-xs opacity-70">({disabledCount})</span>
-          </Button>
-        </div>
       </div>
 
       {/* Summary Stats */}
@@ -223,6 +196,22 @@ export function CommandsManagerPage() {
           />
         </div>
         <div className="flex items-center gap-2">
+          <Button
+            variant={showDisabledCommands ? 'default' : 'outline'}
+            size="sm"
+            onClick={() => setShowDisabledCommands((prev) => !prev)}
+            disabled={isToggling}
+          >
+            {showDisabledCommands ? (
+              <Eye className="w-4 h-4 mr-2" />
+            ) : (
+              <EyeOff className="w-4 h-4 mr-2" />
+            )}
+            {showDisabledCommands
+              ? formatMessage({ id: 'commands.actions.hideDisabled' })
+              : formatMessage({ id: 'commands.actions.showDisabled' })}
+            <span className="ml-1 text-xs opacity-70">({disabledCount})</span>
+          </Button>
           <Button variant="outline" size="sm" onClick={expandAll} disabled={groups.length === 0}>
             {formatMessage({ id: 'commands.actions.expandAll' })}
           </Button>

ccw/frontend/src/pages/QueuePage.tsx

@@ -167,7 +167,7 @@ export function QueuePage() {
             {formatMessage({ id: 'issues.queue.pageTitle' })}
           </h1>
           <p className="text-muted-foreground mt-1">
-            {formatMessage({ id: 'issues.queue.pageDescription' })}
+            {formatMessage({ id: 'issues.queue.description' })}
           </p>
         </div>
         <div className="flex gap-2">