feat: enhance RecommendedMcpWizard with icon mapping; improve ExecutionTab accessibility; refine NavGroup path matching; update fetchSkills to include enabled status; add loading and error messages to localization

2026-02-05 01:50:27 +08:00 · 2026-02-04 16:38:18 +08:00
parent ac95ee3161
commit 2bfce150ec
16 changed files with 385 additions and 71 deletions
--- a/ccw/frontend/src/App.tsx
+++ b/ccw/frontend/src/App.tsx
@@ -7,6 +7,7 @@ import { QueryClientProvider } from '@tanstack/react-query';
 import { RouterProvider } from 'react-router-dom';
 import { IntlProvider } from 'react-intl';
 import { useEffect } from 'react';
+import { Toaster } from 'sonner';
 import { router } from './router';
 import queryClient from './lib/query-client';
 import type { Locale } from './lib/i18n';
@@ -29,6 +30,7 @@ function App({ locale, messages }: AppProps) {
        <QueryInvalidator />
        <CliExecutionSync />
        <RouterProvider router={router} />
+        <Toaster richColors position="top-right" />
      </QueryClientProvider>
    </IntlProvider>
  );
--- a/ccw/frontend/src/components/mcp/RecommendedMcpWizard.tsx
+++ b/ccw/frontend/src/components/mcp/RecommendedMcpWizard.tsx
@@ -7,7 +7,7 @@
 import { useState } from 'react';
 import { useIntl } from 'react-intl';
 import { useMutation, useQueryClient } from '@tanstack/react-query';
-import { Download, Loader2, X } from 'lucide-react';
+import { Download, Loader2, Search, Globe, Sparkles, Settings } from 'lucide-react';
 import {
  Dialog,
  DialogContent,
@@ -18,7 +18,6 @@ import {
 import { Button } from '@/components/ui/Button';
 import { Input } from '@/components/ui/Input';
 import { Label } from '@/components/ui/Label';
-import { Badge } from '@/components/ui/Badge';
 import {
  addGlobalMcpServer,
  copyMcpServerToProject,
@@ -27,6 +26,14 @@ import { mcpServersKeys } from '@/hooks';
 import { useNotifications } from '@/hooks/useNotifications';
 import { cn } from '@/lib/utils';

+// Icon map for MCP definitions
+const ICON_MAP: Record<string, React.ComponentType<{ className?: string }>> = {
+  'search-code': Search,
+  'chrome': Globe,
+  'globe-2': Sparkles,
+  'code-2': Settings,
+};
+
 // ========== Types ==========

 /**
@@ -207,6 +214,7 @@ export function RecommendedMcpWizard({
  if (!mcpDefinition) return null;

  const hasFields = mcpDefinition.fields.length > 0;
+  const Icon = ICON_MAP[mcpDefinition.icon] || Settings;

  return (
    <Dialog open={open} onOpenChange={handleOpenChange}>
@@ -215,7 +223,7 @@ export function RecommendedMcpWizard({
        <DialogHeader>
          <div className="flex items-center gap-3">
            <div className="w-10 h-10 bg-primary/10 rounded-lg flex items-center justify-center">
-              <i className={cn('lucide w-5 h-5 text-primary', `lucide-${mcpDefinition.icon}`)} />
+              <Icon className="w-5 h-5 text-primary" />
            </div>
            <div>
              <DialogTitle>
--- a/ccw/frontend/src/components/shared/CliStreamMonitor/CliStreamMonitorNew.tsx
+++ b/ccw/frontend/src/components/shared/CliStreamMonitor/CliStreamMonitorNew.tsx
@@ -3,7 +3,7 @@
 // ========================================
 // Redesigned CLI streaming monitor with smart parsing and message-based layout

-import { useEffect, useState, useCallback, useMemo } from 'react';
+import { useEffect, useState, useCallback, useMemo, useRef } from 'react';
 import { useIntl } from 'react-intl';
 import {
  Terminal,
@@ -220,9 +220,14 @@ export function CliStreamMonitorNew({ isOpen, onClose }: CliStreamMonitorNewProp
  // WebSocket last message
  const lastMessage = useNotificationStore(selectWsLastMessage);

+  // Track last processed WebSocket message to prevent duplicate processing
+  const lastProcessedMsgRef = useRef<unknown>(null);
+
  // Handle WebSocket messages (same as original)
  useEffect(() => {
-    if (!lastMessage) return;
+    // Skip if no message or same message already processed (prevents React strict mode double-execution)
+    if (!lastMessage || lastMessage === lastProcessedMsgRef.current) return;
+    lastProcessedMsgRef.current = lastMessage;

    const { type, payload } = lastMessage;

--- a/ccw/frontend/src/components/shared/CliStreamMonitor/components/ExecutionTab.tsx
+++ b/ccw/frontend/src/components/shared/CliStreamMonitor/components/ExecutionTab.tsx
@@ -58,13 +58,21 @@ export function ExecutionTab({ execution, isActive, onClick, onClose }: Executio
      </span>

      {/* Close button - show on hover */}
-      <button
+      <span
        onClick={onClose}
-        className="ml-0.5 p-0.5 rounded hover:bg-rose-500/20 transition-opacity opacity-0 group-hover:opacity-100"
+        className="ml-0.5 p-0.5 rounded hover:bg-rose-500/20 transition-opacity opacity-0 group-hover:opacity-100 cursor-pointer"
        aria-label="Close execution tab"
+        role="button"
+        tabIndex={0}
+        onKeyDown={(e) => {
+          if (e.key === 'Enter' || e.key === ' ') {
+            e.preventDefault();
+            onClose(e as any);
+          }
+        }}
      >
        <X className="h-2.5 w-2.5 text-rose-600 dark:text-rose-400" />
-      </button>
+      </span>
    </TabsTrigger>
  );
 }
--- a/ccw/frontend/src/components/shared/CliStreamMonitorLegacy.tsx
+++ b/ccw/frontend/src/components/shared/CliStreamMonitorLegacy.tsx
@@ -14,7 +14,9 @@ import {
  Search,
  ArrowDownToLine,
  Trash2,
+  ExternalLink,
 } from 'lucide-react';
+import { useNavigate } from 'react-router-dom';
 import { cn } from '@/lib/utils';
 import { Button } from '@/components/ui/Button';
 import { Input } from '@/components/ui/Input';
@@ -196,6 +198,7 @@ export interface CliStreamMonitorProps {

 export function CliStreamMonitor({ isOpen, onClose }: CliStreamMonitorProps) {
  const { formatMessage } = useIntl();
+  const navigate = useNavigate();
  const logsEndRef = useRef<HTMLDivElement>(null);
  const logsContainerRef = useRef<HTMLDivElement>(null);
  const [searchQuery, setSearchQuery] = useState('');
@@ -206,6 +209,9 @@ export function CliStreamMonitor({ isOpen, onClose }: CliStreamMonitorProps) {
  // Track last output length to detect new output
  const lastOutputLengthRef = useRef<Record<string, number>>({});

+  // Track last processed WebSocket message to prevent duplicate processing
+  const lastProcessedMsgRef = useRef<unknown>(null);
+
  // Store state
  const executions = useCliStreamStore((state) => state.executions);
  const currentExecutionId = useCliStreamStore((state) => state.currentExecutionId);
@@ -222,7 +228,9 @@ export function CliStreamMonitor({ isOpen, onClose }: CliStreamMonitorProps) {

  // Handle WebSocket messages for CLI stream
  useEffect(() => {
-    if (!lastMessage) return;
+    // Skip if no message or same message already processed (prevents React strict mode double-execution)
+    if (!lastMessage || lastMessage === lastProcessedMsgRef.current) return;
+    lastProcessedMsgRef.current = lastMessage;

    const { type, payload } = lastMessage;

@@ -377,6 +385,15 @@ export function CliStreamMonitor({ isOpen, onClose }: CliStreamMonitorProps) {
    setCurrentExecution(null);
  }, [markExecutionClosedByUser, removeExecution, executions, setCurrentExecution]);

+  // Open in full page viewer
+  const handlePopOut = useCallback(() => {
+    const url = currentExecutionId
+      ? `/cli-viewer?executionId=${currentExecutionId}`
+      : '/cli-viewer';
+    navigate(url);
+    onClose();
+  }, [currentExecutionId, navigate, onClose]);
+
  // ESC key to close
  useEffect(() => {
    const handleEsc = (e: KeyboardEvent) => {
@@ -507,6 +524,14 @@ export function CliStreamMonitor({ isOpen, onClose }: CliStreamMonitorProps) {
                <Trash2 className="h-4 w-4" />
              </Button>
            )}
+            <Button
+              variant="ghost"
+              size="icon"
+              onClick={handlePopOut}
+              title="Open in full page viewer"
+            >
+              <ExternalLink className="h-4 w-4" />
+            </Button>
            <Button
              variant="ghost"
              size="icon"
@@ -636,17 +661,6 @@ export function CliStreamMonitor({ isOpen, onClose }: CliStreamMonitorProps) {
                            <div ref={logsEndRef} />
                          </div>
                        )}
-                        {isUserScrolling && filteredOutput.length > 0 && (
-                          <Button
-                            size="sm"
-                            variant="secondary"
-                            className="absolute bottom-4 right-4"
-                            onClick={scrollToBottom}
-                          >
-                            <ArrowDownToLine className="h-4 w-4 mr-1" />
-                            Scroll to bottom
-                          </Button>
-                        )}
                      </div>
                    )}
                  </div>
--- a/ccw/frontend/src/components/shared/NavGroup.tsx
+++ b/ccw/frontend/src/components/shared/NavGroup.tsx
@@ -54,9 +54,10 @@ export function NavGroup({
        {items.map((item) => {
          const ItemIcon = item.icon;
          const [basePath] = item.path.split('?');
+          // More precise matching: exact match or basePath followed by '/' to avoid parent/child conflicts
          const isActive =
            location.pathname === basePath ||
-            (basePath !== '/' && location.pathname.startsWith(basePath));
+            (basePath !== '/' && location.pathname.startsWith(basePath + '/'));

          return (
            <NavLink
@@ -93,9 +94,10 @@ export function NavGroup({
          {items.map((item) => {
            const ItemIcon = item.icon;
            const [basePath, searchParams] = item.path.split('?');
+            // More precise matching: exact match or basePath followed by '/' to avoid parent/child conflicts
            const isActive =
              location.pathname === basePath ||
-              (basePath !== '/' && location.pathname.startsWith(basePath));
+              (basePath !== '/' && location.pathname.startsWith(basePath + '/'));
            const isQueryParamActive =
              searchParams && location.search.includes(searchParams);

--- a/ccw/frontend/src/hooks/useMemory.ts
+++ b/ccw/frontend/src/hooks/useMemory.ts
@@ -150,7 +150,7 @@ export function useMemory(options: UseMemoryOptions = {}): UseMemoryReturn {
 // ========== Mutations ==========

 export interface UseCreateMemoryReturn {
-  createMemory: (input: { content: string; tags?: string[] }) => Promise<CoreMemory>;
+  createMemory: (input: { content: string; tags?: string[]; metadata?: Record<string, any> }) => Promise<CoreMemory>;
  isCreating: boolean;
  error: Error | null;
 }
@@ -160,7 +160,8 @@ export function useCreateMemory(): UseCreateMemoryReturn {
  const projectPath = useWorkflowStore(selectProjectPath);

  const mutation = useMutation({
-    mutationFn: (input: { content: string; tags?: string[] }) => createMemory(input, projectPath),
+    mutationFn: (input: { content: string; tags?: string[]; metadata?: Record<string, any> }) =>
+      createMemory(input, projectPath),
    onSuccess: () => {
      // Invalidate memory cache to trigger refetch
      queryClient.invalidateQueries({ queryKey: projectPath ? workspaceQueryKeys.memory(projectPath) : ['memory'] });
--- a/ccw/frontend/src/lib/api.ts
+++ b/ccw/frontend/src/lib/api.ts
@@ -993,18 +993,19 @@ export interface SkillsResponse {
 * @param projectPath - Optional project path to filter data by workspace
 */
 export async function fetchSkills(projectPath?: string): Promise<SkillsResponse> {
-  // Helper to add location to skills
-  const addLocation = (skills: Skill[], location: 'project' | 'user'): Skill[] =>
-    skills.map(skill => ({ ...skill, location }));
+  // Helper to add location and enabled status to skills
+  // Backend only returns enabled skills (with SKILL.md), so we set enabled: true
+  const addMetadata = (skills: Skill[], location: 'project' | 'user'): Skill[] =>
+    skills.map(skill => ({ ...skill, location, enabled: true }));

  // Try with project path first, fall back to global on 403/404
  if (projectPath) {
    try {
      const url = `/api/skills?path=${encodeURIComponent(projectPath)}`;
      const data = await fetchApi<{ skills?: Skill[]; projectSkills?: Skill[]; userSkills?: Skill[] }>(url);
-      const projectSkillsWithLocation = addLocation(data.projectSkills ?? [], 'project');
-      const userSkillsWithLocation = addLocation(data.userSkills ?? [], 'user');
-      const allSkills = [...projectSkillsWithLocation, ...userSkillsWithLocation];
+      const projectSkillsWithMetadata = addMetadata(data.projectSkills ?? [], 'project');
+      const userSkillsWithMetadata = addMetadata(data.userSkills ?? [], 'user');
+      const allSkills = [...projectSkillsWithMetadata, ...userSkillsWithMetadata];
      return {
        skills: data.skills ?? allSkills,
      };
@@ -1020,9 +1021,9 @@ export async function fetchSkills(projectPath?: string): Promise<SkillsResponse>
  }
  // Fallback: fetch global skills
  const data = await fetchApi<{ skills?: Skill[]; projectSkills?: Skill[]; userSkills?: Skill[] }>('/api/skills');
-  const projectSkillsWithLocation = addLocation(data.projectSkills ?? [], 'project');
-  const userSkillsWithLocation = addLocation(data.userSkills ?? [], 'user');
-  const allSkills = [...projectSkillsWithLocation, ...userSkillsWithLocation];
+  const projectSkillsWithMetadata = addMetadata(data.projectSkills ?? [], 'project');
+  const userSkillsWithMetadata = addMetadata(data.userSkills ?? [], 'user');
+  const allSkills = [...projectSkillsWithMetadata, ...userSkillsWithMetadata];
  return {
    skills: data.skills ?? allSkills,
  };
--- a/ccw/frontend/src/locales/en/common.json
+++ b/ccw/frontend/src/locales/en/common.json
@@ -224,6 +224,8 @@
  "all": "All",
  "yes": "Yes",
  "no": "No",
+  "loading": "Loading...",
+  "error": "Error",
  "navigation": {
    "header": {
      "brand": "CCW Dashboard"
--- a/ccw/frontend/src/locales/en/memory.json
+++ b/ccw/frontend/src/locales/en/memory.json
@@ -10,7 +10,14 @@
    "copyError": "Failed to copy",
    "refresh": "Refresh",
    "expand": "Expand",
-    "collapse": "Collapse"
+    "collapse": "Collapse",
+    "favoriteAdded": "Added to favorites",
+    "favoriteRemoved": "Removed from favorites",
+    "favoriteError": "Failed to update favorite status",
+    "archiveSuccess": "Memory archived",
+    "archiveError": "Failed to archive memory",
+    "unarchiveSuccess": "Memory restored",
+    "unarchiveError": "Failed to restore memory"
  },
  "tabs": {
    "memories": "Memories",
--- a/ccw/frontend/src/locales/zh/common.json
+++ b/ccw/frontend/src/locales/zh/common.json
@@ -218,6 +218,8 @@
  "all": "全部",
  "yes": "是",
  "no": "否",
+  "loading": "加载中...",
+  "error": "错误",
  "navigation": {
    "header": {
      "brand": "CCW 仪表板"
--- a/ccw/frontend/src/locales/zh/memory.json
+++ b/ccw/frontend/src/locales/zh/memory.json
@@ -10,7 +10,14 @@
    "copyError": "复制失败",
    "refresh": "刷新",
    "expand": "展开",
-    "collapse": "收起"
+    "collapse": "收起",
+    "favoriteAdded": "已添加到收藏",
+    "favoriteRemoved": "已从收藏移除",
+    "favoriteError": "更新收藏状态失败",
+    "archiveSuccess": "记忆已归档",
+    "archiveError": "归档记忆失败",
+    "unarchiveSuccess": "记忆已恢复",
+    "unarchiveError": "恢复记忆失败"
  },
  "tabs": {
    "memories": "记忆",
--- a/ccw/frontend/src/main.tsx
+++ b/ccw/frontend/src/main.tsx
@@ -7,10 +7,30 @@ import 'react-resizable/css/styles.css'
 import { initMessages, getInitialLocale, getMessages, type Locale } from './lib/i18n'
 import { logWebVitals } from './lib/webVitals'

+/**
+ * Initialize CSRF token by fetching from backend
+ * This ensures the CSRF cookie is set before any mutating API calls
+ */
+async function initCsrfToken() {
+  try {
+    // Fetch CSRF token from backend - this sets the XSRF-TOKEN cookie
+    await fetch('/api/csrf-token', {
+      method: 'GET',
+      credentials: 'same-origin',
+    })
+  } catch (error) {
+    // Log error but don't block app initialization
+    console.error('Failed to initialize CSRF token:', error)
+  }
+}
+
 async function bootstrapApplication() {
  const rootElement = document.getElementById('root')
  if (!rootElement) throw new Error('Failed to find the root element')

+  // Initialize CSRF token before any API calls
+  await initCsrfToken()
+
  // Initialize translation messages
  await initMessages()

--- a/ccw/frontend/src/pages/CliViewerPage.tsx
+++ b/ccw/frontend/src/pages/CliViewerPage.tsx
@@ -3,8 +3,9 @@
 // ========================================
 // Multi-pane CLI output viewer with configurable layouts
 // Integrates with viewerStore for state management
+// Includes WebSocket integration and execution recovery

-import { useEffect, useCallback, useMemo } from 'react';
+import { useEffect, useCallback, useMemo, useRef } from 'react';
 import { useSearchParams } from 'react-router-dom';
 import { useIntl } from 'react-intl';
 import {
@@ -34,6 +35,9 @@ import {
  useFocusedPaneId,
  type AllotmentLayout,
 } from '@/stores/viewerStore';
+import { useCliStreamStore, type CliOutputLine } from '@/stores/cliStreamStore';
+import { useNotificationStore, selectWsLastMessage } from '@/stores';
+import { useActiveCliExecutions, useInvalidateActiveCliExecutions } from '@/hooks/useActiveCliExecutions';

 // ========================================
 // Types
@@ -47,6 +51,37 @@ interface LayoutOption {
  labelKey: string;
 }

+// CLI WebSocket message types (matching CliStreamMonitorLegacy)
+interface CliStreamStartedPayload {
+  executionId: string;
+  tool: string;
+  mode: string;
+  timestamp: string;
+}
+
+interface CliStreamOutputPayload {
+  executionId: string;
+  chunkType: string;
+  data: unknown;
+  unit?: {
+    content: unknown;
+    type?: string;
+  };
+}
+
+interface CliStreamCompletedPayload {
+  executionId: string;
+  success: boolean;
+  duration?: number;
+  timestamp: string;
+}
+
+interface CliStreamErrorPayload {
+  executionId: string;
+  error?: string;
+  timestamp: string;
+}
+
 // ========================================
 // Constants
 // ========================================
@@ -64,6 +99,18 @@ const DEFAULT_LAYOUT: LayoutType = 'split-h';
 // Helper Functions
 // ========================================

+function formatDuration(ms: number): string {
+  if (ms < 1000) return `${ms}ms`;
+  const seconds = Math.floor(ms / 1000);
+  if (seconds < 60) return `${seconds}s`;
+  const minutes = Math.floor(seconds / 60);
+  const remainingSeconds = seconds % 60;
+  if (minutes < 60) return `${minutes}m ${remainingSeconds}s`;
+  const hours = Math.floor(minutes / 60);
+  const remainingMinutes = minutes % 60;
+  return `${hours}h ${remainingMinutes}m`;
+}
+
 /**
 * Detect layout type from AllotmentLayout structure
 */
@@ -131,6 +178,19 @@ export function CliViewerPage() {
  const focusedPaneId = useFocusedPaneId();
  const { initializeDefaultLayout, addTab, reset } = useViewerStore();

+  // CLI Stream Store hooks
+  const executions = useCliStreamStore((state) => state.executions);
+
+  // Track last processed WebSocket message to prevent duplicate processing
+  const lastProcessedMsgRef = useRef<unknown>(null);
+
+  // WebSocket last message from notification store
+  const lastMessage = useNotificationStore(selectWsLastMessage);
+
+  // Active execution sync from server
+  const { isLoading: isSyncing } = useActiveCliExecutions(true); // Always sync when page is open
+  const invalidateActive = useInvalidateActiveCliExecutions();
+
  // Detect current layout type from store
  const currentLayoutType = useMemo(() => detectLayoutType(layout), [layout]);

@@ -139,6 +199,117 @@ export function CliViewerPage() {
    return Object.values(panes).reduce((count, pane) => count + pane.tabs.length, 0);
  }, [panes]);

+  // Get execution count for display
+  const executionCount = useMemo(() => Object.keys(executions).length, [executions]);
+  const runningCount = useMemo(
+    () => Object.values(executions).filter(e => e.status === 'running').length,
+    [executions]
+  );
+
+  // Handle WebSocket messages for CLI stream (same logic as CliStreamMonitorLegacy)
+  useEffect(() => {
+    if (!lastMessage || lastMessage === lastProcessedMsgRef.current) return;
+    lastProcessedMsgRef.current = lastMessage;
+
+    const { type, payload } = lastMessage;
+
+    if (type === 'CLI_STARTED') {
+      const p = payload as CliStreamStartedPayload;
+      const startTime = p.timestamp ? new Date(p.timestamp).getTime() : Date.now();
+      useCliStreamStore.getState().upsertExecution(p.executionId, {
+        tool: p.tool || 'cli',
+        mode: p.mode || 'analysis',
+        status: 'running',
+        startTime,
+        output: [
+          {
+            type: 'system',
+            content: `[${new Date(startTime).toLocaleTimeString()}] CLI execution started: ${p.tool} (${p.mode} mode)`,
+            timestamp: startTime
+          }
+        ]
+      });
+      invalidateActive();
+    } else if (type === 'CLI_OUTPUT') {
+      const p = payload as CliStreamOutputPayload;
+      const unitContent = p.unit?.content;
+      const unitType = p.unit?.type || p.chunkType;
+
+      let content: string;
+      if (unitType === 'tool_call' && typeof unitContent === 'object' && unitContent !== null) {
+        const toolCall = unitContent as { action?: string; toolName?: string; parameters?: unknown; status?: string; output?: string };
+        if (toolCall.action === 'invoke') {
+          const params = toolCall.parameters ? JSON.stringify(toolCall.parameters) : '';
+          content = `[Tool] ${toolCall.toolName}(${params})`;
+        } else if (toolCall.action === 'result') {
+          const status = toolCall.status || 'unknown';
+          const output = toolCall.output ? `: ${toolCall.output.substring(0, 200)}${toolCall.output.length > 200 ? '...' : ''}` : '';
+          content = `[Tool Result] ${status}${output}`;
+        } else {
+          content = JSON.stringify(unitContent);
+        }
+      } else {
+        content = typeof p.data === 'string' ? p.data : JSON.stringify(p.data);
+      }
+
+      const lines = content.split('\n');
+      const addOutput = useCliStreamStore.getState().addOutput;
+      lines.forEach(line => {
+        if (line.trim() || lines.length === 1) {
+          addOutput(p.executionId, {
+            type: (unitType as CliOutputLine['type']) || 'stdout',
+            content: line,
+            timestamp: Date.now()
+          });
+        }
+      });
+    } else if (type === 'CLI_COMPLETED') {
+      const p = payload as CliStreamCompletedPayload;
+      const endTime = p.timestamp ? new Date(p.timestamp).getTime() : Date.now();
+      useCliStreamStore.getState().upsertExecution(p.executionId, {
+        status: p.success ? 'completed' : 'error',
+        endTime,
+        output: [
+          {
+            type: 'system',
+            content: `[${new Date(endTime).toLocaleTimeString()}] CLI execution ${p.success ? 'completed successfully' : 'failed'}${p.duration ? ` (${formatDuration(p.duration)})` : ''}`,
+            timestamp: endTime
+          }
+        ]
+      });
+      invalidateActive();
+    } else if (type === 'CLI_ERROR') {
+      const p = payload as CliStreamErrorPayload;
+      const endTime = p.timestamp ? new Date(p.timestamp).getTime() : Date.now();
+      useCliStreamStore.getState().upsertExecution(p.executionId, {
+        status: 'error',
+        endTime,
+        output: [
+          {
+            type: 'stderr',
+            content: `[ERROR] ${p.error || 'Unknown error occurred'}`,
+            timestamp: endTime
+          }
+        ]
+      });
+      invalidateActive();
+    }
+  }, [lastMessage, invalidateActive]);
+
+  // Auto-add new executions as tabs when they appear
+  const addedExecutionsRef = useRef<Set<string>>(new Set());
+  useEffect(() => {
+    if (!focusedPaneId) return;
+    for (const executionId of Object.keys(executions)) {
+      if (!addedExecutionsRef.current.has(executionId)) {
+        addedExecutionsRef.current.add(executionId);
+        const exec = executions[executionId];
+        const toolShort = exec.tool.split('-')[0];
+        addTab(focusedPaneId, executionId, `${toolShort} (${exec.mode})`);
+      }
+    }
+  }, [executions, focusedPaneId, addTab]);
+
  // Initialize layout if empty
  useEffect(() => {
    const paneCount = countPanes(layout);
@@ -192,14 +363,23 @@ export function CliViewerPage() {
        <div className="flex items-center gap-2 min-w-0">
          <Terminal className="w-5 h-5 text-primary flex-shrink-0" />
          <div className="flex flex-col min-w-0">
-            <span className="text-sm font-medium text-foreground">
-              {formatMessage({ id: 'cliViewer.page.title' })}
-            </span>
+            <div className="flex items-center gap-2">
+              <span className="text-sm font-medium text-foreground">
+                {formatMessage({ id: 'cliViewer.page.title' })}
+              </span>
+              {runningCount > 0 && (
+                <span className="inline-flex items-center gap-1 px-1.5 py-0.5 rounded-full bg-green-500/10 text-green-600 dark:text-green-400 text-xs font-medium">
+                  <span className="w-1.5 h-1.5 rounded-full bg-green-500 animate-pulse" />
+                  {runningCount} active
+                </span>
+              )}
+            </div>
            <span className="text-xs text-muted-foreground">
              {formatMessage(
                { id: 'cliViewer.page.subtitle' },
                { count: activeSessionCount }
              )}
+              {executionCount > 0 && ` · ${executionCount} executions`}
            </span>
          </div>
        </div>
--- a/ccw/frontend/src/pages/MemoryPage.tsx
+++ b/ccw/frontend/src/pages/MemoryPage.tsx
@@ -240,18 +240,31 @@ function NewMemoryDialog({

  // Initialize from editing memory metadata
  useEffect(() => {
-    if (editingMemory && editingMemory.metadata) {
-      try {
-        const metadata = typeof editingMemory.metadata === 'string'
-          ? JSON.parse(editingMemory.metadata)
-          : editingMemory.metadata;
-        setIsFavorite(metadata.favorite === true);
-        setPriority(metadata.priority || 'medium');
-      } catch {
+    if (editingMemory) {
+      // Sync content and tags
+      setContent(editingMemory.content || '');
+      setTagsInput(editingMemory.tags?.join(', ') || '');
+
+      // Sync metadata
+      if (editingMemory.metadata) {
+        try {
+          const metadata = typeof editingMemory.metadata === 'string'
+            ? JSON.parse(editingMemory.metadata)
+            : editingMemory.metadata;
+          setIsFavorite(metadata.favorite === true);
+          setPriority(metadata.priority || 'medium');
+        } catch {
+          setIsFavorite(false);
+          setPriority('medium');
+        }
+      } else {
        setIsFavorite(false);
        setPriority('medium');
      }
    } else {
+      // New mode: reset all state
+      setContent('');
+      setTagsInput('');
      setIsFavorite(false);
      setPriority('medium');
    }
@@ -410,7 +423,7 @@ export function MemoryPage() {
      await updateMemory(editingMemory.id, data);
      setEditingMemory(null);
    } else {
-      await createMemory(data as any); // TODO: update createMemory type to accept metadata
+      await createMemory(data);
    }
    setIsNewMemoryOpen(false);
  };
@@ -427,19 +440,44 @@ export function MemoryPage() {
  };

  const handleToggleFavorite = async (memory: CoreMemory) => {
-    const currentMetadata = memory.metadata ? (typeof memory.metadata === 'string' ? JSON.parse(memory.metadata) : memory.metadata) : {};
-    const newFavorite = !(currentMetadata.favorite === true);
-    await updateMemory(memory.id, {
-      metadata: JSON.stringify({ ...currentMetadata, favorite: newFavorite }),
-    } as any); // TODO: update updateMemory to accept metadata field
+    try {
+      const currentMetadata = memory.metadata
+        ? (typeof memory.metadata === 'string' ? JSON.parse(memory.metadata) : memory.metadata)
+        : {};
+      const newFavorite = !(currentMetadata.favorite === true);
+      await updateMemory(memory.id, {
+        content: memory.content,
+        metadata: { ...currentMetadata, favorite: newFavorite },
+      });
+      toast.success(
+        formatMessage({
+          id: newFavorite ? 'memory.actions.favoriteAdded' : 'memory.actions.favoriteRemoved',
+        })
+      );
+    } catch (err) {
+      console.error('Failed to toggle favorite:', err);
+      toast.error(formatMessage({ id: 'memory.actions.favoriteError' }));
+    }
  };

  const handleArchive = async (memory: CoreMemory) => {
-    await archiveMemory(memory.id);
+    try {
+      await archiveMemory(memory.id);
+      toast.success(formatMessage({ id: 'memory.actions.archiveSuccess' }));
+    } catch (err) {
+      console.error('Failed to archive:', err);
+      toast.error(formatMessage({ id: 'memory.actions.archiveError' }));
+    }
  };

  const handleUnarchive = async (memory: CoreMemory) => {
-    await unarchiveMemory(memory.id);
+    try {
+      await unarchiveMemory(memory.id);
+      toast.success(formatMessage({ id: 'memory.actions.unarchiveSuccess' }));
+    } catch (err) {
+      console.error('Failed to unarchive:', err);
+      toast.error(formatMessage({ id: 'memory.actions.unarchiveError' }));
+    }
  };

  const copyToClipboard = async (content: string) => {
--- a/ccw/frontend/src/pages/SkillsManagerPage.tsx
+++ b/ccw/frontend/src/pages/SkillsManagerPage.tsx
@@ -122,8 +122,6 @@ export function SkillsManagerPage() {
  const {
    skills,
    categories,
-    totalCount,
-    enabledCount,
    projectSkills,
    userSkills,
    isLoading,
@@ -141,9 +139,6 @@ export function SkillsManagerPage() {

  const { toggleSkill, isToggling } = useSkillMutations();

-  // Calculate disabled count
-  const disabledCount = totalCount - enabledCount;
-
  // Filter skills based on enabled filter
  const filteredSkills = useMemo(() => {
    if (enabledFilter === 'disabled') {
@@ -152,10 +147,32 @@ export function SkillsManagerPage() {
    return skills;
  }, [skills, enabledFilter]);

+  // Calculate counts based on current location filter (from skills, not allSkills)
+  const currentLocationEnabledCount = useMemo(() => skills.filter(s => s.enabled).length, [skills]);
+  const currentLocationTotalCount = skills.length;
+  const currentLocationDisabledCount = currentLocationTotalCount - currentLocationEnabledCount;
+
  const handleToggle = async (skill: Skill, enabled: boolean) => {
    // Use the skill's location property
    const location = skill.location || 'project';
-    await toggleSkill(skill.name, enabled, location);
+    // Use folderName for API calls (actual folder name), fallback to name if not available
+    const skillIdentifier = skill.folderName || skill.name;
+    
+    // Debug logging
+    console.log('[SkillToggle] Toggling skill:', { 
+      name: skill.name, 
+      folderName: skill.folderName, 
+      location, 
+      enabled, 
+      skillIdentifier 
+    });
+    
+    try {
+      await toggleSkill(skillIdentifier, enabled, location);
+    } catch (error) {
+      console.error('[SkillToggle] Toggle failed:', error);
+      throw error;
+    }
  };

  const handleToggleWithConfirm = (skill: Skill, enabled: boolean) => {
@@ -244,21 +261,21 @@ export function SkillsManagerPage() {
        <Card className="p-4">
          <div className="flex items-center gap-2">
            <Sparkles className="w-5 h-5 text-primary" />
-            <span className="text-2xl font-bold">{totalCount}</span>
+            <span className="text-2xl font-bold">{currentLocationTotalCount}</span>
          </div>
          <p className="text-sm text-muted-foreground mt-1">{formatMessage({ id: 'common.stats.totalSkills' })}</p>
        </Card>
        <Card className="p-4">
          <div className="flex items-center gap-2">
            <Power className="w-5 h-5 text-success" />
-            <span className="text-2xl font-bold">{enabledCount}</span>
+            <span className="text-2xl font-bold">{currentLocationEnabledCount}</span>
          </div>
          <p className="text-sm text-muted-foreground mt-1">{formatMessage({ id: 'skills.state.enabled' })}</p>
        </Card>
        <Card className="p-4">
          <div className="flex items-center gap-2">
            <PowerOff className="w-5 h-5 text-muted-foreground" />
-            <span className="text-2xl font-bold">{totalCount - enabledCount}</span>
+            <span className="text-2xl font-bold">{currentLocationDisabledCount}</span>
          </div>
          <p className="text-sm text-muted-foreground mt-1">{formatMessage({ id: 'skills.state.disabled' })}</p>
        </Card>
@@ -327,7 +344,7 @@ export function SkillsManagerPage() {
          className={enabledFilter === 'all' ? 'bg-primary text-primary-foreground' : ''}
        >
          <Sparkles className="w-4 h-4 mr-1" />
-          {formatMessage({ id: 'skills.filters.all' })} ({totalCount})
+          {formatMessage({ id: 'skills.filters.all' })} ({currentLocationTotalCount})
        </Button>
        <Button
          variant="outline"
@@ -336,7 +353,7 @@ export function SkillsManagerPage() {
          className={enabledFilter === 'enabled' ? 'bg-primary text-primary-foreground' : ''}
        >
          <Power className="w-4 h-4 mr-1" />
-          {formatMessage({ id: 'skills.state.enabled' })} ({enabledCount})
+          {formatMessage({ id: 'skills.state.enabled' })} ({currentLocationEnabledCount})
        </Button>
        <Button
          variant="outline"
@@ -345,7 +362,7 @@ export function SkillsManagerPage() {
          className={enabledFilter === 'disabled' ? 'bg-primary text-primary-foreground' : ''}
        >
          <PowerOff className="w-4 h-4 mr-1" />
-          {formatMessage({ id: 'skills.state.disabled' })} ({disabledCount})
+          {formatMessage({ id: 'skills.state.disabled' })} ({currentLocationDisabledCount})
        </Button>
        <div className="flex-1" />
        <Button
@@ -364,12 +381,12 @@ export function SkillsManagerPage() {
        isLoading={isLoading}
        onToggle={handleToggleWithConfirm}
        onClick={handleSkillClick}
-        isToggling={isToggling}
+        isToggling={isToggling || !!confirmDisable}
        compact={viewMode === 'compact'}
      />

      {/* Disabled Skills Section */}
-      {enabledFilter === 'all' && disabledCount > 0 && (
+      {enabledFilter === 'all' && currentLocationDisabledCount > 0 && (
        <div className="mt-6">
          <Button
            variant="ghost"
@@ -378,7 +395,7 @@ export function SkillsManagerPage() {
          >
            {showDisabledSection ? <ChevronDown className="w-4 h-4 mr-2" /> : <ChevronRight className="w-4 h-4 mr-2" />}
            <EyeOff className="w-4 h-4 mr-2" />
-            {formatMessage({ id: 'skills.disabledSkills.title' })} ({disabledCount})
+            {formatMessage({ id: 'skills.disabledSkills.title' })} ({currentLocationDisabledCount})
          </Button>

          {showDisabledSection && (
@@ -387,7 +404,7 @@ export function SkillsManagerPage() {
              isLoading={false}
              onToggle={handleToggleWithConfirm}
              onClick={handleSkillClick}
-              isToggling={isToggling}
+              isToggling={isToggling || !!confirmDisable}
              compact={true}
            />
          )}