feat: update dependencies and refactor dropdown components for improved functionality

2026-02-05 01:50:27 +08:00 · 2026-01-30 17:26:07 +08:00
parent a5c3dff8d3
commit e78e95049b
18 changed files with 138 additions and 96 deletions
--- a/ccw/frontend/package-lock.json
+++ b/ccw/frontend/package-lock.json
@@ -8,6 +8,7 @@
      "name": "ccw-frontend",
      "version": "0.1.0",
      "dependencies": {
+        "@hello-pangea/dnd": "^18.0.1",
        "@radix-ui/react-dialog": "^1.1.0",
        "@radix-ui/react-dropdown-menu": "^2.1.0",
        "@radix-ui/react-select": "^2.1.0",
@@ -285,6 +286,15 @@
        "@babel/core": "^7.0.0-0"
      }
    },
+    "node_modules/@babel/runtime": {
+      "version": "7.28.6",
+      "resolved": "https://registry.npmjs.org/@babel/runtime/-/runtime-7.28.6.tgz",
+      "integrity": "sha512-05WQkdpL9COIMz4LjTxGpPNCdlpyimKppYNoJ5Di5EUObifl8t4tuLuUBBZEpoLYOmfvIWrsp9fCl0HoPRVTdA==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=6.9.0"
+      }
+    },
    "node_modules/@babel/template": {
      "version": "7.28.6",
      "resolved": "https://registry.npmjs.org/@babel/template/-/template-7.28.6.tgz",
@@ -813,6 +823,23 @@
      "integrity": "sha512-aGTxbpbg8/b5JfU1HXSrbH3wXZuLPJcNEcZQFMxLs3oSzgtVu6nFPkbbGGUvBcUjKV2YyB9Wxxabo+HEH9tcRQ==",
      "license": "MIT"
    },
+    "node_modules/@hello-pangea/dnd": {
+      "version": "18.0.1",
+      "resolved": "https://registry.npmjs.org/@hello-pangea/dnd/-/dnd-18.0.1.tgz",
+      "integrity": "sha512-xojVWG8s/TGrKT1fC8K2tIWeejJYTAeJuj36zM//yEm/ZrnZUSFGS15BpO+jGZT1ybWvyXmeDJwPYb4dhWlbZQ==",
+      "license": "Apache-2.0",
+      "dependencies": {
+        "@babel/runtime": "^7.26.7",
+        "css-box-model": "^1.2.1",
+        "raf-schd": "^4.0.3",
+        "react-redux": "^9.2.0",
+        "redux": "^5.0.1"
+      },
+      "peerDependencies": {
+        "react": "^18.0.0 || ^19.0.0",
+        "react-dom": "^18.0.0 || ^19.0.0"
+      }
+    },
    "node_modules/@jridgewell/gen-mapping": {
      "version": "0.3.13",
      "resolved": "https://registry.npmjs.org/@jridgewell/gen-mapping/-/gen-mapping-0.3.13.tgz",
@@ -2176,6 +2203,12 @@
        "@types/react": "^18.0.0"
      }
    },
+    "node_modules/@types/use-sync-external-store": {
+      "version": "0.0.6",
+      "resolved": "https://registry.npmjs.org/@types/use-sync-external-store/-/use-sync-external-store-0.0.6.tgz",
+      "integrity": "sha512-zFDAD+tlpf2r4asuHEj0XH6pY6i0g5NeAHPn+15wk3BV6JA69eERFXC1gyGThDkVa1zCyKr5jox1+2LbV/AMLg==",
+      "license": "MIT"
+    },
    "node_modules/@vitejs/plugin-react": {
      "version": "4.7.0",
      "resolved": "https://registry.npmjs.org/@vitejs/plugin-react/-/plugin-react-4.7.0.tgz",
@@ -2517,6 +2550,15 @@
      "dev": true,
      "license": "MIT"
    },
+    "node_modules/css-box-model": {
+      "version": "1.2.1",
+      "resolved": "https://registry.npmjs.org/css-box-model/-/css-box-model-1.2.1.tgz",
+      "integrity": "sha512-a7Vr4Q/kd/aw96bnJG332W9V9LkJO69JRcaCYDUqjp6/z0w6VcZjgAcTbgFxEPfBgdnAwlh3iwu+hLopa+flJw==",
+      "license": "MIT",
+      "dependencies": {
+        "tiny-invariant": "^1.0.6"
+      }
+    },
    "node_modules/cssesc": {
      "version": "3.0.0",
      "resolved": "https://registry.npmjs.org/cssesc/-/cssesc-3.0.0.tgz",
@@ -3361,6 +3403,12 @@
      ],
      "license": "MIT"
    },
+    "node_modules/raf-schd": {
+      "version": "4.0.3",
+      "resolved": "https://registry.npmjs.org/raf-schd/-/raf-schd-4.0.3.tgz",
+      "integrity": "sha512-tQkJl2GRWh83ui2DiPTJz9wEiMN20syf+5oKfB03yYP7ioZcJwsIK8FjrtLwH1m7C7e+Tt2yYBlrOpdT+dyeIQ==",
+      "license": "MIT"
+    },
    "node_modules/react": {
      "version": "18.3.1",
      "resolved": "https://registry.npmjs.org/react/-/react-18.3.1.tgz",
@@ -3386,6 +3434,29 @@
        "react": "^18.3.1"
      }
    },
+    "node_modules/react-redux": {
+      "version": "9.2.0",
+      "resolved": "https://registry.npmjs.org/react-redux/-/react-redux-9.2.0.tgz",
+      "integrity": "sha512-ROY9fvHhwOD9ySfrF0wmvu//bKCQ6AeZZq1nJNtbDC+kk5DuSuNX/n6YWYF/SYy7bSba4D4FSz8DJeKY/S/r+g==",
+      "license": "MIT",
+      "dependencies": {
+        "@types/use-sync-external-store": "^0.0.6",
+        "use-sync-external-store": "^1.4.0"
+      },
+      "peerDependencies": {
+        "@types/react": "^18.2.25 || ^19",
+        "react": "^18.0 || ^19",
+        "redux": "^5.0.0"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        },
+        "redux": {
+          "optional": true
+        }
+      }
+    },
    "node_modules/react-refresh": {
      "version": "0.17.0",
      "resolved": "https://registry.npmjs.org/react-refresh/-/react-refresh-0.17.0.tgz",
@@ -3520,6 +3591,12 @@
        "node": ">=8.10.0"
      }
    },
+    "node_modules/redux": {
+      "version": "5.0.1",
+      "resolved": "https://registry.npmjs.org/redux/-/redux-5.0.1.tgz",
+      "integrity": "sha512-M9/ELqF6fy8FwmkpnF0S3YKOqMyoWJ4+CS5Efg2ct3oY9daQvd/Pc71FpGZsVsbl3Cpb+IIcjBDUnnyBdQbq4w==",
+      "license": "MIT"
+    },
    "node_modules/resolve": {
      "version": "1.22.11",
      "resolved": "https://registry.npmjs.org/resolve/-/resolve-1.22.11.tgz",
@@ -3767,6 +3844,12 @@
        "node": ">=0.8"
      }
    },
+    "node_modules/tiny-invariant": {
+      "version": "1.3.3",
+      "resolved": "https://registry.npmjs.org/tiny-invariant/-/tiny-invariant-1.3.3.tgz",
+      "integrity": "sha512-+FbBPE1o9QAYvviau/qC5SE3caw21q3xkvWKBtja5vgqOWIHHJ3ioaq1VPfn/Szqctz2bU/oYeKd9/z5BL+PVg==",
+      "license": "MIT"
+    },
    "node_modules/tinyglobby": {
      "version": "0.2.15",
      "resolved": "https://registry.npmjs.org/tinyglobby/-/tinyglobby-0.2.15.tgz",
--- a/ccw/frontend/package.json
+++ b/ccw/frontend/package.json
@@ -10,32 +10,33 @@
    "lint": "eslint . --ext ts,tsx --report-unused-disable-directives --max-warnings 0"
  },
  "dependencies": {
+    "@hello-pangea/dnd": "^18.0.1",
+    "@radix-ui/react-dialog": "^1.1.0",
+    "@radix-ui/react-dropdown-menu": "^2.1.0",
+    "@radix-ui/react-select": "^2.1.0",
+    "@radix-ui/react-tabs": "^1.1.0",
+    "@radix-ui/react-toast": "^1.2.0",
+    "@radix-ui/react-tooltip": "^1.1.0",
+    "@tanstack/react-query": "^5.60.0",
+    "@xyflow/react": "^12.3.0",
+    "class-variance-authority": "^0.7.0",
+    "clsx": "^2.1.0",
+    "lucide-react": "^0.460.0",
    "react": "^18.3.1",
    "react-dom": "^18.3.1",
    "react-router-dom": "^6.28.0",
-    "zustand": "^5.0.0",
-    "@tanstack/react-query": "^5.60.0",
-    "@xyflow/react": "^12.3.0",
-    "@radix-ui/react-dialog": "^1.1.0",
-    "@radix-ui/react-dropdown-menu": "^2.1.0",
-    "@radix-ui/react-tabs": "^1.1.0",
-    "@radix-ui/react-tooltip": "^1.1.0",
-    "@radix-ui/react-select": "^2.1.0",
-    "@radix-ui/react-toast": "^1.2.0",
-    "clsx": "^2.1.0",
    "tailwind-merge": "^2.5.0",
-    "class-variance-authority": "^0.7.0",
-    "lucide-react": "^0.460.0",
-    "zod": "^3.23.8"
+    "zod": "^3.23.8",
+    "zustand": "^5.0.0"
  },
  "devDependencies": {
    "@types/react": "^18.3.0",
-    "tailwindcss-animate": "^1.0.7",
    "@types/react-dom": "^18.3.0",
    "@vitejs/plugin-react": "^4.3.0",
    "autoprefixer": "^10.4.20",
    "postcss": "^8.4.40",
    "tailwindcss": "^3.4.0",
+    "tailwindcss-animate": "^1.0.7",
    "typescript": "^5.6.0",
    "vite": "^6.0.0"
  }
--- a/ccw/frontend/src/components/shared/IssueCard.tsx
+++ b/ccw/frontend/src/components/shared/IssueCard.tsx
@@ -20,7 +20,7 @@ import { cn } from '@/lib/utils';
 import { Card } from '@/components/ui/Card';
 import { Badge } from '@/components/ui/Badge';
 import { Button } from '@/components/ui/Button';
-import { Dropdown, DropdownTrigger, DropdownContent, DropdownItem } from '@/components/ui/Dropdown';
+import { DropdownMenu, DropdownMenuTrigger, DropdownMenuContent, DropdownMenuItem } from '@/components/ui/Dropdown';
 import type { Issue } from '@/lib/api';

 // ========== Types ==========
@@ -162,8 +162,8 @@ export function IssueCard({
          <p className="text-xs text-muted-foreground mt-1">#{issue.id}</p>
        </div>
        {showActions && (
-          <Dropdown open={isMenuOpen} onOpenChange={setIsMenuOpen}>
-            <DropdownTrigger asChild>
+          <DropdownMenu open={isMenuOpen} onOpenChange={setIsMenuOpen}>
+            <DropdownMenuTrigger asChild>
              <Button
                variant="ghost"
                size="sm"
@@ -172,26 +172,26 @@ export function IssueCard({
              >
                <MoreVertical className="w-4 h-4" />
              </Button>
-            </DropdownTrigger>
-            <DropdownContent align="end">
-              <DropdownItem onClick={handleEdit}>
+            </DropdownMenuTrigger>
+            <DropdownMenuContent align="end">
+              <DropdownMenuItem onClick={handleEdit}>
                <Edit className="w-4 h-4 mr-2" />
                Edit
-              </DropdownItem>
-              <DropdownItem onClick={() => onStatusChange?.(issue, 'in_progress')}>
+              </DropdownMenuItem>
+              <DropdownMenuItem onClick={() => onStatusChange?.(issue, 'in_progress')}>
                <Clock className="w-4 h-4 mr-2" />
                Start Progress
-              </DropdownItem>
-              <DropdownItem onClick={() => onStatusChange?.(issue, 'resolved')}>
+              </DropdownMenuItem>
+              <DropdownMenuItem onClick={() => onStatusChange?.(issue, 'resolved')}>
                <CheckCircle className="w-4 h-4 mr-2" />
                Mark Resolved
-              </DropdownItem>
-              <DropdownItem onClick={handleDelete} className="text-destructive">
+              </DropdownMenuItem>
+              <DropdownMenuItem onClick={handleDelete} className="text-destructive">
                <Trash2 className="w-4 h-4 mr-2" />
                Delete
-              </DropdownItem>
-            </DropdownContent>
-          </Dropdown>
+              </DropdownMenuItem>
+            </DropdownMenuContent>
+          </DropdownMenu>
        )}
      </div>

--- a/ccw/frontend/src/components/shared/KanbanBoard.tsx
+++ b/ccw/frontend/src/components/shared/KanbanBoard.tsx
@@ -3,7 +3,7 @@
 // ========================================
 // Drag-and-drop kanban board for loops and tasks

-import { useState, useCallback } from 'react';
+import { useCallback } from 'react';
 import {
  DragDropContext,
  Droppable,
--- a/ccw/frontend/src/components/shared/SessionCard.tsx
+++ b/ccw/frontend/src/components/shared/SessionCard.tsx
@@ -22,8 +22,6 @@ import {
  Eye,
  Archive,
  Trash2,
-  Play,
-  Pause,
 } from 'lucide-react';
 import type { SessionMetadata } from '@/types/store';

--- a/ccw/frontend/src/components/shared/SkillCard.tsx
+++ b/ccw/frontend/src/components/shared/SkillCard.tsx
@@ -18,7 +18,7 @@ import { cn } from '@/lib/utils';
 import { Card } from '@/components/ui/Card';
 import { Badge } from '@/components/ui/Badge';
 import { Button } from '@/components/ui/Button';
-import { Dropdown, DropdownTrigger, DropdownContent, DropdownItem } from '@/components/ui/Dropdown';
+import { DropdownMenu, DropdownMenuTrigger, DropdownMenuContent, DropdownMenuItem } from '@/components/ui/Dropdown';
 import type { Skill } from '@/lib/api';

 // ========== Types ==========
@@ -148,8 +148,8 @@ export function SkillCard({
          </div>
        </div>
        {showActions && (
-          <Dropdown open={isMenuOpen} onOpenChange={setIsMenuOpen}>
-            <DropdownTrigger asChild>
+          <DropdownMenu open={isMenuOpen} onOpenChange={setIsMenuOpen}>
+            <DropdownMenuTrigger asChild>
              <Button
                variant="ghost"
                size="sm"
@@ -158,17 +158,17 @@ export function SkillCard({
              >
                <MoreVertical className="w-4 h-4" />
              </Button>
-            </DropdownTrigger>
-            <DropdownContent align="end">
-              <DropdownItem onClick={() => onClick?.(skill)}>
+            </DropdownMenuTrigger>
+            <DropdownMenuContent align="end">
+              <DropdownMenuItem onClick={() => onClick?.(skill)}>
                <Info className="w-4 h-4 mr-2" />
                View Details
-              </DropdownItem>
-              <DropdownItem onClick={handleConfigure}>
+              </DropdownMenuItem>
+              <DropdownMenuItem onClick={handleConfigure}>
                <Settings className="w-4 h-4 mr-2" />
                Configure
-              </DropdownItem>
-              <DropdownItem onClick={handleToggle}>
+              </DropdownMenuItem>
+              <DropdownMenuItem onClick={handleToggle}>
                {skill.enabled ? (
                  <>
                    <PowerOff className="w-4 h-4 mr-2" />
@@ -180,9 +180,9 @@ export function SkillCard({
                    Enable
                  </>
                )}
-              </DropdownItem>
-            </DropdownContent>
-          </Dropdown>
+              </DropdownMenuItem>
+            </DropdownMenuContent>
+          </DropdownMenu>
        )}
      </div>

--- a/ccw/frontend/src/hooks/useIssues.ts
+++ b/ccw/frontend/src/hooks/useIssues.ts
@@ -13,7 +13,6 @@ import {
  deleteIssue,
  type Issue,
  type IssuesResponse,
-  type IssueQueue,
 } from '../lib/api';

 // Query key factory
--- a/ccw/frontend/src/pages/CommandsManagerPage.tsx
+++ b/ccw/frontend/src/pages/CommandsManagerPage.tsx
@@ -8,10 +8,8 @@ import {
  Terminal,
  Search,
  Plus,
-  Filter,
  RefreshCw,
  Copy,
-  Play,
  ChevronDown,
  ChevronUp,
  Code,
@@ -161,7 +159,6 @@ export function CommandsManagerPage() {
  const {
    commands,
    categories,
-    commandsByCategory,
    totalCount,
    isLoading,
    isFetching,
--- a/ccw/frontend/src/pages/IssueManagerPage.tsx
+++ b/ccw/frontend/src/pages/IssueManagerPage.tsx
@@ -7,12 +7,10 @@ import { useState, useMemo } from 'react';
 import {
  AlertCircle,
  Plus,
-  Filter,
  Search,
  RefreshCw,
  Loader2,
  Github,
-  ListFilter,
  CheckCircle,
  Clock,
  AlertTriangle,
@@ -21,7 +19,6 @@ import { Card } from '@/components/ui/Card';
 import { Button } from '@/components/ui/Button';
 import { Input } from '@/components/ui/Input';
 import { Badge } from '@/components/ui/Badge';
-import { Tabs, TabsList, TabsTrigger, TabsContent } from '@/components/ui/Tabs';
 import { Dialog, DialogContent, DialogHeader, DialogTitle } from '@/components/ui/Dialog';
 import { Select, SelectTrigger, SelectValue, SelectContent, SelectItem } from '@/components/ui/Select';
 import { IssueCard } from '@/components/shared/IssueCard';
@@ -31,7 +28,6 @@ import { cn } from '@/lib/utils';

 // ========== Types ==========

-type ViewMode = 'issues' | 'queue';
 type StatusFilter = 'all' | Issue['status'];
 type PriorityFilter = 'all' | Issue['priority'];

@@ -183,17 +179,14 @@ function IssueList({
 // ========== Main Page Component ==========

 export function IssueManagerPage() {
-  const [viewMode, setViewMode] = useState<ViewMode>('issues');
  const [searchQuery, setSearchQuery] = useState('');
  const [statusFilter, setStatusFilter] = useState<StatusFilter>('all');
  const [priorityFilter, setPriorityFilter] = useState<PriorityFilter>('all');
  const [isNewIssueOpen, setIsNewIssueOpen] = useState(false);
-  const [selectedIssue, setSelectedIssue] = useState<Issue | null>(null);

  const {
    issues,
    issuesByStatus,
-    issuesByPriority,
    openCount,
    criticalCount,
    isLoading,
@@ -207,7 +200,7 @@ export function IssueManagerPage() {
    },
  });

-  const { createIssue, updateIssue, deleteIssue, isCreating, isUpdating } = useIssueMutations();
+  const { createIssue, updateIssue, deleteIssue, isCreating } = useIssueMutations();

  // Filter counts
  const statusCounts = useMemo(() => ({
@@ -224,8 +217,7 @@ export function IssueManagerPage() {
    setIsNewIssueOpen(false);
  };

-  const handleEditIssue = (issue: Issue) => {
-    setSelectedIssue(issue);
+  const handleEditIssue = (_issue: Issue) => {
    // TODO: Open edit dialog
  };

@@ -381,7 +373,7 @@ export function IssueManagerPage() {
      <IssueList
        issues={issues}
        isLoading={isLoading}
-        onIssueClick={setSelectedIssue}
+        onIssueClick={() => {}}
        onIssueEdit={handleEditIssue}
        onIssueDelete={handleDeleteIssue}
        onStatusChange={handleStatusChange}
--- a/ccw/frontend/src/pages/LoopMonitorPage.tsx
+++ b/ccw/frontend/src/pages/LoopMonitorPage.tsx
@@ -11,11 +11,9 @@ import {
  StopCircle,
  Plus,
  Search,
-  Filter,
  Clock,
  CheckCircle,
  XCircle,
-  AlertCircle,
  Loader2,
 } from 'lucide-react';
 import type { DropResult, DraggableProvided } from '@hello-pangea/dnd';
@@ -23,7 +21,7 @@ import { Card } from '@/components/ui/Card';
 import { Button } from '@/components/ui/Button';
 import { Badge } from '@/components/ui/Badge';
 import { Input } from '@/components/ui/Input';
-import { Dialog, DialogContent, DialogHeader, DialogTitle, DialogTrigger } from '@/components/ui/Dialog';
+import { Dialog, DialogContent, DialogHeader, DialogTitle } from '@/components/ui/Dialog';
 import { KanbanBoard, useLoopKanbanColumns, type LoopKanbanItem } from '@/components/shared/KanbanBoard';
 import { useLoops, useLoopMutations } from '@/hooks';
 import type { Loop } from '@/lib/api';
@@ -226,7 +224,6 @@ function NewLoopDialog({ open, onOpenChange, onSubmit, isCreating }: NewLoopDial
 export function LoopMonitorPage() {
  const [searchQuery, setSearchQuery] = useState('');
  const [isNewLoopOpen, setIsNewLoopOpen] = useState(false);
-  const [selectedLoop, setSelectedLoop] = useState<Loop | null>(null);

  const {
    loops,
@@ -242,7 +239,7 @@ export function LoopMonitorPage() {
    refetchInterval: 5000, // Refresh every 5 seconds for real-time updates
  });

-  const { createLoop, updateStatus, isCreating, isUpdating } = useLoopMutations();
+  const { createLoop, updateStatus, isCreating } = useLoopMutations();

  // Kanban columns
  const columns = useLoopKanbanColumns(loopsByStatus as unknown as Record<string, LoopKanbanItem[]>);
@@ -312,7 +309,7 @@ export function LoopMonitorPage() {
        onPause={handlePause}
        onResume={handleResume}
        onStop={handleStop}
-        onClick={setSelectedLoop}
+        onClick={() => {}}
      />
    ),
    []
--- a/ccw/frontend/src/pages/MemoryPage.tsx
+++ b/ccw/frontend/src/pages/MemoryPage.tsx
@@ -13,7 +13,6 @@ import {
  RefreshCw,
  Trash2,
  Edit,
-  Eye,
  Tag,
  Loader2,
  Copy,
@@ -264,7 +263,7 @@ export function MemoryPage() {
    },
  });

-  const { createMemory, updateMemory, deleteMemory, isCreating, isUpdating, isDeleting } =
+  const { createMemory, updateMemory, deleteMemory, isCreating, isUpdating } =
    useMemoryMutations();

  const toggleExpand = (memoryId: string) => {
--- a/ccw/frontend/src/pages/SettingsPage.tsx
+++ b/ccw/frontend/src/pages/SettingsPage.tsx
@@ -3,21 +3,17 @@
 // ========================================
 // Application settings and configuration with CLI tools management

-import { useState, useEffect } from 'react';
+import { useState } from 'react';
 import {
  Settings,
  Moon,
  Sun,
-  Globe,
  Bell,
-  Shield,
  Cpu,
  RefreshCw,
-  Save,
  RotateCcw,
  Check,
  X,
-  Loader2,
  ChevronDown,
  ChevronUp,
 } from 'lucide-react';
@@ -25,7 +21,7 @@ import { Card } from '@/components/ui/Card';
 import { Button } from '@/components/ui/Button';
 import { Input } from '@/components/ui/Input';
 import { Badge } from '@/components/ui/Badge';
-import { useTheme, useConfig } from '@/hooks';
+import { useTheme } from '@/hooks';
 import { useConfigStore, selectCliTools, selectDefaultCliTool, selectUserPreferences } from '@/stores/configStore';
 import type { CliToolConfig, UserPreferences } from '@/types/store';
 import { cn } from '@/lib/utils';
@@ -170,7 +166,6 @@ export function SettingsPage() {
  const { updateCliTool, setDefaultCliTool, setUserPreferences, resetUserPreferences } = useConfigStore();

  const [expandedTools, setExpandedTools] = useState<Set<string>>(new Set());
-  const [isSaving, setIsSaving] = useState(false);

  const toggleToolExpand = (toolId: string) => {
    setExpandedTools((prev) => {
--- a/ccw/frontend/src/pages/SkillsManagerPage.tsx
+++ b/ccw/frontend/src/pages/SkillsManagerPage.tsx
@@ -8,17 +8,14 @@ import {
  Sparkles,
  Search,
  Plus,
-  Filter,
  RefreshCw,
  Power,
  PowerOff,
  Tag,
-  Loader2,
 } from 'lucide-react';
 import { Card } from '@/components/ui/Card';
 import { Button } from '@/components/ui/Button';
 import { Input } from '@/components/ui/Input';
-import { Badge } from '@/components/ui/Badge';
 import { Select, SelectTrigger, SelectValue, SelectContent, SelectItem } from '@/components/ui/Select';
 import { SkillCard } from '@/components/shared/SkillCard';
 import { useSkills, useSkillMutations } from '@/hooks';
@@ -89,13 +86,10 @@ export function SkillsManagerPage() {
  const [sourceFilter, setSourceFilter] = useState<string>('all');
  const [enabledFilter, setEnabledFilter] = useState<'all' | 'enabled' | 'disabled'>('all');
  const [viewMode, setViewMode] = useState<'grid' | 'compact'>('grid');
-  const [selectedSkill, setSelectedSkill] = useState<Skill | null>(null);

  const {
    skills,
-    enabledSkills,
    categories,
-    skillsByCategory,
    totalCount,
    enabledCount,
    isLoading,
@@ -268,7 +262,7 @@ export function SkillsManagerPage() {
        skills={filteredSkills}
        isLoading={isLoading}
        onToggle={handleToggle}
-        onClick={setSelectedSkill}
+        onClick={() => {}}
        isToggling={isToggling}
        compact={viewMode === 'compact'}
      />
--- a/ccw/frontend/src/pages/orchestrator/ExecutionMonitor.tsx
+++ b/ccw/frontend/src/pages/orchestrator/ExecutionMonitor.tsx
@@ -106,7 +106,6 @@ export function ExecutionMonitor({ className }: ExecutionMonitorProps) {
  const isMonitorExpanded = useExecutionStore((state) => state.isMonitorExpanded);
  const autoScrollLogs = useExecutionStore((state) => state.autoScrollLogs);
  const setMonitorExpanded = useExecutionStore((state) => state.setMonitorExpanded);
-  const setAutoScrollLogs = useExecutionStore((state) => state.setAutoScrollLogs);
  const startExecution = useExecutionStore((state) => state.startExecution);

  // Local state for elapsed time (calculated from startedAt)
--- a/ccw/frontend/src/pages/orchestrator/FlowToolbar.tsx
+++ b/ccw/frontend/src/pages/orchestrator/FlowToolbar.tsx
@@ -9,7 +9,6 @@ import {
  Save,
  FolderOpen,
  Download,
-  Play,
  Trash2,
  Copy,
  Workflow,
--- a/ccw/frontend/src/pages/orchestrator/OrchestratorPage.tsx
+++ b/ccw/frontend/src/pages/orchestrator/OrchestratorPage.tsx
@@ -11,21 +11,11 @@ import { PropertyPanel } from './PropertyPanel';
 import { FlowToolbar } from './FlowToolbar';
 import { ExecutionMonitor } from './ExecutionMonitor';
 import { TemplateLibrary } from './TemplateLibrary';
-import { useWebSocket } from '@/hooks/useWebSocket';

 export function OrchestratorPage() {
  const fetchFlows = useFlowStore((state) => state.fetchFlows);
  const [isTemplateLibraryOpen, setIsTemplateLibraryOpen] = useState(false);

-  // Initialize WebSocket connection for real-time updates
-  const { isConnected, reconnect } = useWebSocket({
-    enabled: true,
-    onMessage: (message) => {
-      // Additional message handling can be added here if needed
-      console.log('[Orchestrator] WebSocket message:', message.type);
-    },
-  });
-
  // Load flows on mount
  useEffect(() => {
    fetchFlows();
--- a/ccw/frontend/src/pages/orchestrator/TemplateLibrary.tsx
+++ b/ccw/frontend/src/pages/orchestrator/TemplateLibrary.tsx
@@ -17,7 +17,6 @@ import {
  GitBranch,
  Loader2,
  Trash2,
-  ExternalLink,
 } from 'lucide-react';
 import { cn } from '@/lib/utils';
 import { Button } from '@/components/ui/Button';
--- a/ccw/frontend/src/stores/executionStore.ts
+++ b/ccw/frontend/src/stores/executionStore.ts
@@ -35,7 +35,7 @@ const initialState = {

 export const useExecutionStore = create<ExecutionStore>()(
  devtools(
-    (set, get) => ({
+    (set) => ({
      ...initialState,

      // ========== Execution Lifecycle ==========