feat: Refactor AppShell and Header components, enhance memory management UI, and align API endpoints

- Removed defaultCollapsed prop from AppShell and set sidebar to be collapsed by default.
- Updated Header component to remove mobile menu toggle and added a history entry button.
- Refactored ExplorationsSection to streamline data extraction and improve UI rendering.
- Added new messages for GitHub sync success and error handling in issues.
- Implemented View Memory Dialog for better memory content viewing and editing.
- Enhanced FlowToolbar to auto-create flows and improved save functionality.
- Conducted a frontend audit for API endpoint alignment with backend implementations.

ccw/frontend/FRONTEND_BACKEND_ALIGNMENT_AUDIT.md

@@ -0,0 +1,119 @@
+# CCW Frontend 功能盘点 & 前后端对齐审计
+
+日期：2026-02-07  
+范围：`ccw/frontend`（前端）对比 `ccw/src`（后端 Dashboard Server 路由）
+
+## 1) 前端现有功能（路由/页面）
+
+路由定义：`ccw/frontend/src/router.tsx`
+
+已接入的主要页面：
+- Sessions：`/sessions`、`/sessions/:sessionId`
+- Session Detail：`/sessions/:sessionId/*`（tasks/context/summary/impl-plan/review 等）
+- Lite Tasks：`/lite-tasks`
+- Orchestrator：`/orchestrator`
+- Issues Hub：`/issues`（含 legacy redirect：`/issues/queue`、`/issues/discovery`）
+- Skills / Commands / Memory / Prompt History：`/skills`、`/commands`、`/memory`、`/prompts`
+- Settings：`/settings`（含 MCP/Endpoints/Installations/Rules/CodexLens 子页）、`/api-settings`
+- Hooks：`/hooks`
+- Explorer / Graph：`/explorer`、`/graph`
+- CLI Viewer：`/cli-viewer`
+
+路由摘录文件（自动生成）：  
+`ccw/frontend/.workflow/.lite-plan/frontend-feature-audit-2026-02-07/frontend-routes.extract.md`
+
+## 2) 前端未开发/未打通功能（可直接定位的 TODO / 占位实现）
+
+以下为“代码中明确标注 TODO 或明显占位”的点（不代表全部缺口）：
+
+- 统计图相关（后端接口缺失）
+  - Activity Timeline：`ccw/frontend/src/hooks/useActivityTimeline.ts` 使用 `/api/activity-timeline`（后端未实现）
+  - Task Type Counts：`ccw/frontend/src/hooks/useTaskTypeCounts.ts` 使用 `/api/task-type-counts`（后端未实现）
+- Dashboard 个性化布局“后端同步”未实现
+  - `ccw/frontend/src/hooks/useUserDashboardLayout.ts` 仅 localStorage/Zustand，注释了 `/api/user/dashboard-layout`
+- Dashboard 趋势火花线为 mock
+  - `ccw/frontend/src/components/dashboard/widgets/DetailedStatsWidget.tsx` sparkline 为随机生成
+- Config Sync 备份列表 UI 未实现
+  - `ccw/frontend/src/components/shared/ConfigSync.tsx` 备份列表 `_backupList` 仅加载、未展示
+- CLI Stream Monitor
+  - `ccw/frontend/src/components/shared/CliStreamMonitor/CliStreamMonitorNew.tsx`：存在 “retry logic” TODO
+  - `ccw/frontend/src/components/shared/LogBlock/LogBlockList.tsx`：re-run 功能 TODO
+- WorkspaceSelector 手动路径校验提示 TODO
+  - `ccw/frontend/src/components/workspace/WorkspaceSelector.tsx`
+
+## 3) API 端点对齐：前端引用 vs 后端实现（核心差异）
+
+本次对比方式：
+- 从前端 `ccw/frontend/src` 抽取 `/api/...` 字面量引用
+- 从后端 `ccw/src` 抽取 `/api/...` 字面量引用
+- 做“路径集合”层面的存在性对比（**注意：不能覆盖 method/参数/返回结构的差异**）
+
+自动生成的原始清单：
+- 前端端点全集：`ccw/frontend/.workflow/.lite-plan/frontend-feature-audit-2026-02-07/frontend-api-endpoints.txt`
+- 后端端点全集：`ccw/frontend/.workflow/.lite-plan/frontend-feature-audit-2026-02-07/backend-api-endpoints.txt`
+- 前端存在、后端缺失：`ccw/frontend/.workflow/.lite-plan/frontend-feature-audit-2026-02-07/endpoints-missing-in-backend.txt`
+- 缺失端点引用定位：`ccw/frontend/.workflow/.lite-plan/frontend-feature-audit-2026-02-07/missing-endpoints.references.md`
+
+### 3.1 前端引用但后端未实现的关键端点（会导致页面/功能不可用）
+
+（以“影响面 + 出现频率”为优先）
+
+- Graph Explorer 依赖图：`/api/graph/dependencies`
+  - 前端：`ccw/frontend/src/hooks/useGraphData.ts`、`ccw/frontend/src/lib/api.ts`
+  - 后端：存在 `/api/graph/nodes`、`/api/graph/edges`、`/api/graph/files`、`/api/graph/impact`，但**无** `/api/graph/dependencies`
+- File Explorer：`/api/explorer/*`（tree/file/search/roots）
+  - 前端：`ccw/frontend/src/hooks/useFileExplorer.ts`、`ccw/frontend/src/lib/api.ts`
+  - 后端：实现的是 `/api/files` 与 `/api/file-content`（见 `ccw/src/core/routes/files-routes.ts`），路径/返回结构均不一致
+- Sessions CRUD：`/api/sessions*`
+  - 前端：`ccw/frontend/src/lib/api.ts`（`fetchSession/createSession/updateSession/archiveSession/deleteSession` 等）
+  - 后端：当前 Session 路由只实现了 `/api/session-detail`、`/api/update-task-status`、`/api/bulk-update-task-status`（见 `ccw/src/core/routes/session-routes.ts`），**无** `/api/sessions`
+- Hooks 增删改模板化端点：`/api/hooks/create`、`/api/hooks/update`、`/api/hooks/delete/*`、`/api/hooks/install-template`
+  - 后端仅实现：`GET/POST/DELETE /api/hooks`（见 `ccw/src/core/routes/hooks-routes.ts`）
+- Index 管理：`/api/index/status`、`/api/index/rebuild`
+  - 后端没有 `/api/index/*`，CodexLens 的 index/status 体系在 `/api/codexlens/*`（见 `ccw/src/core/routes/codexlens/index-handlers.ts`）
+- 其他明显缺口：
+  - `/api/activity-timeline`、`/api/task-type-counts`（统计图）
+  - `/api/fix-progress`（ReviewSessionPage 使用）
+  - `/api/cli/installations`、`/api/cli/history/tool/*`
+
+### 3.2 “接口已改名/已迁移”的对齐风险（端点存在但路径/方法/结构不一致）
+
+以下属于“端点看似缺失，但实际上后端以其它路径提供类似能力”：
+
+- Commands groups config：
+  - 前端：`/api/commands/groups/config`（`ccw/frontend/src/lib/api.ts:getCommandsGroupsConfig`）
+  - 后端：`/api/commands/groups`（GET/PUT，见 `ccw/src/core/routes/commands-routes.ts`）
+- Memory insights analyze：
+  - 前端：`/api/memory/analyze`（`ccw/frontend/src/lib/api.ts:analyzePrompts`）
+  - 后端：`/api/memory/insights/analyze`（见 `ccw/src/core/routes/memory-routes.ts`）
+  - 且请求/响应结构也不同：后端需要 `prompts[]`，返回 `{ success, insights, tool, executionId }`
+
+## 4) 数据结构对齐检查（已发现的“真实 schema 差异”示例）
+
+### 4.1 `/api/data` 的 session.created_at 可能为 null
+
+- 后端聚合：`ccw/src/core/data-aggregator.ts` 中 `created_at: session.created || session.created_at || null`
+- 前端类型：`ccw/frontend/src/lib/api.ts` 的 `BackendSessionData.created_at` 当前写死为 `string`，且 `SessionMetadata.created_at` 在 `ccw/frontend/src/types/store.ts` 为必填 `string`
+
+风险：某些 session 的 `created_at` 为空时，前端 UI 的排序/时间格式化可能出现异常或渲染错误。
+
+## 5) 建议的落地路线（按收益/风险排序）
+
+1) **先做“兼容层”**（推荐）
+   - 在后端补一组兼容端点（或在前端统一重定向到现有端点），优先打通：
+     - File Explorer：`/api/explorer/*` ↔ `/api/files` + `/api/file-content`
+     - Graph Explorer：提供 `/api/graph/dependencies`（聚合 nodes/edges/files）
+     - Sessions：实现 `/api/sessions*`（至少 archive/delete），或让前端完全基于 `/api/data` + `/api/session-detail`
+2) **统计图端点明确归属**
+   - 若后端短期不做：前端用 `/api/data` 在客户端计算 timeline/type counts（并显式标注来源/准确性限制）
+3) **Hooks / Prompt History / Index 三块做“接口契约重构”**
+   - 这三块目前存在“路径 + method + schema”多重不一致，需要先定契约，再统一实现。
+
+---
+
+如果你希望我“直接修复对齐”（而不仅是出报告），我建议按下面顺序做最小可用：
+1) 后端实现 `/api/graph/dependencies`（GraphExplorer 立即可用）
+2) 后端实现 `/api/explorer/file`（先打通预览），再补 `/api/explorer/tree`
+3) 统一 Commands groups、Memory analyze 的端点/请求结构
+4) Sessions archive/delete 的最小实现
+

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

@@ -17,8 +17,6 @@ import { useWorkflowStore } from '@/stores/workflowStore';
 import { useWebSocketNotifications, useWebSocket } from '@/hooks';
 
 export interface AppShellProps {
-  /** Initial sidebar collapsed state */
-  defaultCollapsed?: boolean;
   /** Callback for refresh action */
   onRefresh?: () => void;
   /** Whether refresh is in progress */
@@ -31,7 +29,6 @@ export interface AppShellProps {
 const SIDEBAR_COLLAPSED_KEY = 'ccw-sidebar-collapsed';
 
 export function AppShell({
-  defaultCollapsed = false,
   onRefresh,
   isRefreshing = false,
   children,
@@ -74,13 +71,14 @@ export function AppShell({
     setWorkspaceInitialized(true);
   }, [isWorkspaceInitialized, projectPath, location.search, switchWorkspace]);
 
-  // Sidebar collapse state (persisted)
+  // Sidebar collapse state – default to collapsed (hidden)
   const [sidebarCollapsed, setSidebarCollapsed] = useState(() => {
     if (typeof window !== 'undefined') {
       const stored = localStorage.getItem(SIDEBAR_COLLAPSED_KEY);
-      return stored ? JSON.parse(stored) : defaultCollapsed;
+      // Default to collapsed (true) if no persisted value
+      return stored !== null ? JSON.parse(stored) : true;
     }
-    return defaultCollapsed;
+    return true;
   });
 
   // Mobile sidebar open state
@@ -117,16 +115,14 @@ export function AppShell({
     localStorage.setItem(SIDEBAR_COLLAPSED_KEY, JSON.stringify(sidebarCollapsed));
   }, [sidebarCollapsed]);
 
-  // Close mobile sidebar on route change or resize
+  // Close mobile sidebar on resize
   useEffect(() => {
     const handleResize = () => {
       if (window.innerWidth >= 768) {
         setMobileOpen(false);
       }
     };
-
     window.addEventListener('resize', handleResize);
-    // Cleanup: Remove event listener on unmount to prevent memory leak
     return () => window.removeEventListener('resize', handleResize);
   }, []);
 
@@ -174,7 +170,7 @@ export function AppShell({
 
       {/* Main layout - sidebar + content */}
       <div className="flex flex-1 overflow-hidden">
-        {/* Sidebar */}
+        {/* Sidebar - collapsed by default */}
         <Sidebar
           collapsed={sidebarCollapsed}
           onCollapsedChange={handleCollapsedChange}
@@ -186,7 +182,6 @@ export function AppShell({
         <MainContent
           className={cn(
             'transition-all duration-300',
-            // Add left margin on desktop to account for fixed sidebar
             sidebarCollapsed ? 'md:ml-16' : 'md:ml-64'
           )}
         >

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

@@ -8,7 +8,6 @@ import { Link } from 'react-router-dom';
 import { useIntl } from 'react-intl';
 import {
   Workflow,
-  Menu,
   Moon,
   Sun,
   RefreshCw,
@@ -17,6 +16,7 @@ import {
   LogOut,
   Terminal,
   Bell,
+  Clock,
 } from 'lucide-react';
 import { cn } from '@/lib/utils';
 import { Button } from '@/components/ui/Button';
@@ -27,8 +27,6 @@ import { useCliStreamStore, selectActiveExecutionCount } from '@/stores/cliStrea
 import { useNotificationStore } from '@/stores';
 
 export interface HeaderProps {
-  /** Callback to toggle mobile sidebar */
-  onMenuClick?: () => void;
   /** Callback for refresh action */
   onRefresh?: () => void;
   /** Whether refresh is in progress */
@@ -38,7 +36,6 @@ export interface HeaderProps {
 }
 
 export function Header({
-  onMenuClick,
   onRefresh,
   isRefreshing = false,
   onCliMonitorClick,
@@ -65,19 +62,8 @@ export function Header({
       className="flex items-center justify-between px-4 md:px-5 h-14 bg-card border-b border-border sticky top-0 z-50 shadow-sm"
       role="banner"
     >
-      {/* Left side - Menu button (mobile) and Logo */}
+      {/* Left side - Logo */}
       <div className="flex items-center gap-3">
-        {/* Mobile menu toggle */}
-        <Button
-          variant="ghost"
-          size="icon"
-          className="md:hidden"
-          onClick={onMenuClick}
-          aria-label={formatMessage({ id: 'common.aria.toggleNavigation' })}
-        >
-          <Menu className="w-5 h-5" />
-        </Button>
-
         {/* Logo / Brand */}
         <Link
           to="/"
@@ -91,6 +77,19 @@ export function Header({
 
       {/* Right side - Actions */}
       <div className="flex items-center gap-2">
+        {/* History entry */}
+        <Button
+          variant="ghost"
+          size="sm"
+          asChild
+          className="gap-2"
+        >
+          <Link to="/history">
+            <Clock className="h-4 w-4" />
+            <span className="hidden sm:inline">{formatMessage({ id: 'navigation.main.history' })}</span>
+          </Link>
+        </Button>
+
         {/* CLI Monitor button */}
         <Button
           variant="ghost"

ccw/frontend/src/components/session-detail/context/ExplorationsSection.tsx

@@ -87,149 +87,140 @@ interface AngleContentProps {
   };
 }
 
-/** Check if a string looks like a file/directory path */
+/** Extract a displayable string from unknown value (handles objects with path/name/etc.) */
-function isPathLike(s: string): boolean {
+function extractString(val: unknown): string {
-  return /^[\w@.~\-/\\]+(\/[\w@.\-]+)+(\.\w+)?$/.test(s.trim());
+  if (typeof val === 'string') return val;
+  if (val && typeof val === 'object') {
+    const obj = val as Record<string, unknown>;
+    // Common field names for file-like objects
+    if (typeof obj.path === 'string') return obj.path;
+    if (typeof obj.name === 'string') return obj.name;
+    if (typeof obj.file === 'string') return obj.file;
+    if (typeof obj.title === 'string') return obj.title;
+    // Fallback: first string-valued property
+    for (const v of Object.values(obj)) {
+      if (typeof v === 'string' && v.length > 0) return v;
+    }
+  }
+  return String(val);
 }
 
-/** Safely coerce a field to string[] – handles string, array-of-non-strings, etc. */
+/** Extract a secondary description from an object (reason, description, etc.) */
-function toStringArray(val: unknown): string[] {
+function extractReason(val: unknown): string | undefined {
-  if (Array.isArray(val)) return val.map(String);
+  if (!val || typeof val !== 'object') return undefined;
-  if (typeof val === 'string' && val.length > 0) return [val];
+  const obj = val as Record<string, unknown>;
+  if (typeof obj.reason === 'string') return obj.reason;
+  if (typeof obj.description === 'string') return obj.description;
+  return undefined;
+}
+
+/** Safely coerce a field to items – preserving object metadata for files */
+function toItems(val: unknown): Array<{ text: string; reason?: string }> {
+  if (Array.isArray(val)) {
+    return val.map((item) => ({
+      text: extractString(item),
+      reason: extractReason(item),
+    }));
+  }
+  if (typeof val === 'string' && val.length > 0) return [{ text: val }];
   return [];
 }
 
+/** Per-section color theme */
+const sectionThemes: Record<string, { icon: string; border: string; bg: string; badge: string }> = {
+  project_structure:  { icon: 'text-blue-500',   border: 'border-l-blue-500',   bg: 'bg-blue-500/5',   badge: 'bg-blue-100 text-blue-700 dark:bg-blue-900/30 dark:text-blue-300' },
+  relevant_files:     { icon: 'text-violet-500',  border: 'border-l-violet-500',  bg: 'bg-violet-500/5',  badge: 'bg-violet-100 text-violet-700 dark:bg-violet-900/30 dark:text-violet-300' },
+  patterns:           { icon: 'text-amber-500',  border: 'border-l-amber-500',  bg: 'bg-amber-500/5',  badge: 'bg-amber-100 text-amber-700 dark:bg-amber-900/30 dark:text-amber-300' },
+  dependencies:       { icon: 'text-emerald-500', border: 'border-l-emerald-500', bg: 'bg-emerald-500/5', badge: 'bg-emerald-100 text-emerald-700 dark:bg-emerald-900/30 dark:text-emerald-300' },
+  integration_points: { icon: 'text-cyan-500',   border: 'border-l-cyan-500',   bg: 'bg-cyan-500/5',   badge: 'bg-cyan-100 text-cyan-700 dark:bg-cyan-900/30 dark:text-cyan-300' },
+  testing:            { icon: 'text-rose-500',   border: 'border-l-rose-500',   bg: 'bg-rose-500/5',   badge: 'bg-rose-100 text-rose-700 dark:bg-rose-900/30 dark:text-rose-300' },
+};
+
+const defaultTheme = { icon: 'text-muted-foreground', border: 'border-l-border', bg: 'bg-muted/30', badge: 'bg-muted text-foreground' };
+
 function AngleContent({ data }: AngleContentProps) {
   const { formatMessage } = useIntl();
 
-  const sections: Array<{
+  const sectionDefs: Array<{
     key: string;
+    field: unknown;
     icon: JSX.Element;
-    label: string;
+    labelId: string;
-    items: string[];
     renderAs: 'paths' | 'text';
-  }> = [];
+  }> = [
+    { key: 'project_structure',  field: data.project_structure,  icon: <FolderOpen className="w-3.5 h-3.5" />, labelId: 'sessionDetail.context.explorations.projectStructure', renderAs: 'text' },
+    { key: 'relevant_files',     field: data.relevant_files,     icon: <FileText className="w-3.5 h-3.5" />,   labelId: 'sessionDetail.context.explorations.relevantFiles',   renderAs: 'paths' },
+    { key: 'patterns',           field: data.patterns,           icon: <Layers className="w-3.5 h-3.5" />,     labelId: 'sessionDetail.context.explorations.patterns',        renderAs: 'text' },
+    { key: 'dependencies',       field: data.dependencies,       icon: <GitBranch className="w-3.5 h-3.5" />,  labelId: 'sessionDetail.context.explorations.dependencies',    renderAs: 'text' },
+    { key: 'integration_points', field: data.integration_points, icon: <Link className="w-3.5 h-3.5" />,       labelId: 'sessionDetail.context.explorations.integrationPoints', renderAs: 'text' },
+    { key: 'testing',            field: data.testing,            icon: <TestTube className="w-3.5 h-3.5" />,   labelId: 'sessionDetail.context.explorations.testing',         renderAs: 'text' },
+  ];
 
-  const projectStructure = toStringArray(data.project_structure);
+  const sections = sectionDefs
-  if (projectStructure.length > 0) {
+    .map((def) => ({ ...def, items: toItems(def.field) }))
-    sections.push({
+    .filter((s) => s.items.length > 0);
-      key: 'project_structure',
-      icon: <FolderOpen className="w-4 h-4" />,
-      label: formatMessage({ id: 'sessionDetail.context.explorations.projectStructure' }),
-      items: projectStructure,
-      renderAs: 'paths',
-    });
-  }
-
-  const relevantFiles = toStringArray(data.relevant_files);
-  if (relevantFiles.length > 0) {
-    sections.push({
-      key: 'relevant_files',
-      icon: <FileText className="w-4 h-4" />,
-      label: formatMessage({ id: 'sessionDetail.context.explorations.relevantFiles' }),
-      items: relevantFiles,
-      renderAs: 'paths',
-    });
-  }
-
-  const patterns = toStringArray(data.patterns);
-  if (patterns.length > 0) {
-    sections.push({
-      key: 'patterns',
-      icon: <Layers className="w-4 h-4" />,
-      label: formatMessage({ id: 'sessionDetail.context.explorations.patterns' }),
-      items: patterns,
-      renderAs: 'text',
-    });
-  }
-
-  const dependencies = toStringArray(data.dependencies);
-  if (dependencies.length > 0) {
-    sections.push({
-      key: 'dependencies',
-      icon: <GitBranch className="w-4 h-4" />,
-      label: formatMessage({ id: 'sessionDetail.context.explorations.dependencies' }),
-      items: dependencies,
-      renderAs: 'text',
-    });
-  }
-
-  const integrationPoints = toStringArray(data.integration_points);
-  if (integrationPoints.length > 0) {
-    sections.push({
-      key: 'integration_points',
-      icon: <Link className="w-4 h-4" />,
-      label: formatMessage({ id: 'sessionDetail.context.explorations.integrationPoints' }),
-      items: integrationPoints,
-      renderAs: 'text',
-    });
-  }
-
-  const testing = toStringArray(data.testing);
-  if (testing.length > 0) {
-    sections.push({
-      key: 'testing',
-      icon: <TestTube className="w-4 h-4" />,
-      label: formatMessage({ id: 'sessionDetail.context.explorations.testing' }),
-      items: testing,
-      renderAs: 'text',
-    });
-  }
 
   if (sections.length === 0) {
-    return <p className="text-sm text-muted-foreground italic">No data available</p>;
+    return <p className="text-xs text-muted-foreground italic">No data available</p>;
   }
 
   return (
-    <div className="space-y-4">
+    <div className="space-y-3">
-      {sections.map((section) => (
+      {sections.map((section) => {
-        <div key={section.key}>
+        const theme = sectionThemes[section.key] || defaultTheme;
-          <h4 className="text-xs font-medium text-muted-foreground uppercase tracking-wide mb-1.5 flex items-center gap-1.5">
+        return (
-            <span className="text-muted-foreground">{section.icon}</span>
+          <div key={section.key} className={`border-l-2 ${theme.border} ${theme.bg} rounded-r pl-3 py-2 pr-2`}>
-            {section.label}
+            <h4 className={`text-xs font-medium uppercase tracking-wide mb-1.5 flex items-center gap-1.5 ${theme.icon}`}>
-          </h4>
+              {section.icon}
-          {section.renderAs === 'paths' ? (
+              {formatMessage({ id: section.labelId })}
-            <div className="flex flex-wrap gap-1.5">
+              <span className={`text-[10px] px-1.5 py-0.5 rounded-full font-normal normal-case tracking-normal ${theme.badge}`}>
-              {section.items.map((item, i) => (
+                {section.items.length}
-                <div
+              </span>
-                  key={i}
+            </h4>
-                  className="flex items-center gap-1 px-2 py-1 bg-muted rounded border text-[11px] font-mono text-foreground"
+            {section.renderAs === 'paths' ? (
-                >
+              <div className="flex flex-wrap gap-1.5">
-                  <FileText className="w-3 h-3 text-muted-foreground flex-shrink-0" />
+                {section.items.map((item, i) => (
-                  {item}
+                  <div
-                </div>
+                    key={i}
-              ))}
+                    className="flex items-center gap-1 px-2 py-1 bg-background rounded border text-[11px] font-mono text-foreground"
-            </div>
+                    title={item.reason}
-          ) : (
+                  >
-            <ul className="space-y-1">
+                    <FileText className={`w-3 h-3 flex-shrink-0 ${theme.icon}`} />
-              {section.items.map((item, i) => (
+                    {item.text}
-                <li key={i} className="flex items-start gap-1.5 text-xs text-foreground">
+                  </div>
-                  <span className="text-muted-foreground mt-0.5">•</span>
+                ))}
-                  <span className="flex-1">
+              </div>
-                    <FormattedTextItem text={item} />
+            ) : (
-                  </span>
+              <ul className="space-y-1">
-                </li>
+                {section.items.map((item, i) => (
-              ))}
+                  <li key={i} className="flex items-start gap-1.5 text-xs text-foreground">
-            </ul>
+                    <span className={`mt-0.5 ${theme.icon}`}>•</span>
-          )}
+                    <span className="flex-1">
-        </div>
+                      <FormattedTextItem text={item.text} />
-      ))}
+                    </span>
+                  </li>
+                ))}
+              </ul>
+            )}
+          </div>
+        );
+      })}
     </div>
   );
 }
 
 /** Render text with inline code/path highlighting */
 function FormattedTextItem({ text }: { text: string }) {
-  // Split on backtick-wrapped or path-like segments
+  // Split on backtick-wrapped segments
   const parts = text.split(/(`[^`]+`)/g);
   if (parts.length === 1) {
-    // No backtick segments, check for embedded paths
+    // No backtick segments – highlight embedded file paths
     const pathParts = text.split(/(\S+\/\S+\.\w+)/g);
     if (pathParts.length === 1) return <>{text}</>;
     return (
       <>
         {pathParts.map((part, i) =>
-          isPathLike(part) ? (
+          /\S+\/\S+\.\w+/.test(part) ? (
             <code key={i} className="px-1 py-0.5 bg-muted rounded text-[10px] font-mono">{part}</code>
           ) : (
             <span key={i}>{part}</span>

ccw/frontend/src/locales/en/api-settings.json

@@ -358,6 +358,7 @@
     "status": "Status",
     "provider": "Provider",
     "enableThis": "Enable this",
+    "showAll": "Show All",
     "validation": {
       "nameRequired": "Name is required"
     }

ccw/frontend/src/locales/en/common.json

@@ -37,6 +37,9 @@
     "reset": "Reset",
     "resetDesc": "Reset all user preferences to their default values. This cannot be undone.",
     "saving": "Saving...",
+    "deleting": "Deleting...",
+    "merging": "Merging...",
+    "splitting": "Splitting...",
     "resetConfirm": "Reset all settings to defaults?",
     "resetToDefaults": "Reset to Defaults",
     "enable": "Enable",
@@ -52,6 +55,7 @@
     "select": "Select",
     "selectAll": "Select All",
     "deselectAll": "Deselect All",
+    "openMenu": "Open menu",
     "resetLayout": "Reset Layout"
   },
   "status": {

ccw/frontend/src/locales/en/issues.json

@@ -25,6 +25,10 @@
     "markResolved": "Mark Resolved",
     "github": "Pull from GitHub"
   },
+  "messages": {
+    "githubSyncSuccess": "GitHub sync complete: {imported} imported, {updated} updated, {skipped} skipped.",
+    "githubSyncError": "GitHub sync failed"
+  },
   "filters": {
     "all": "All",
     "open": "Open",
@@ -147,7 +151,10 @@
     "groups": "groups",
     "parallel": "Parallel",
     "sequential": "Sequential",
-    "emptyState": "No queue data available",
+    "emptyState": {
+      "title": "No Queue Data",
+      "description": "No queue data available"
+    },
     "empty": "No data",
     "conflicts": "Conflicts detected in queue",
     "noQueueData": "No queue data",
@@ -257,7 +264,8 @@
         "critical": "Critical",
         "high": "High",
         "medium": "Medium",
-        "low": "Low"
+        "low": "Low",
+        "unknown": "Unknown"
       },
       "type": {
         "all": "All Types"

ccw/frontend/src/locales/zh/common.json

@@ -206,6 +206,16 @@
       "button": "搜索文档"
     }
   },
+  "ticker": {
+    "session_created": "会话 {name} 已创建",
+    "task_completed": "任务 {name} 已成功完成",
+    "session_failed": "会话 {name} 失败",
+    "workflow_started": "工作流 {name} 已启动",
+    "status_changed": "{name} 状态已变更为 {status}",
+    "waiting": "等待活动…",
+    "disconnected": "活动通知已断开连接",
+    "aria_label": "实时活动滚动条"
+  },
   "dashboard": {
     "config": {
       "title": "部件",

ccw/frontend/src/locales/zh/issues.json

@@ -25,6 +25,10 @@
     "markResolved": "标记为已解决",
     "github": "从 GitHub 拉取"
   },
+  "messages": {
+    "githubSyncSuccess": "GitHub 同步完成：新增 {imported}、更新 {updated}、跳过 {skipped}。",
+    "githubSyncError": "GitHub 同步失败"
+  },
   "filters": {
     "all": "全部",
     "open": "开放",
@@ -147,7 +151,6 @@
     "groups": "组",
     "parallel": "并行",
     "sequential": "顺序",
-    "emptyState": "无队列数据",
     "empty": "无数据",
     "conflicts": "队列中检测到冲突",
     "noQueueData": "无队列数据",

ccw/frontend/src/locales/zh/orchestrator.json

@@ -107,7 +107,8 @@
       "searchSuggestion": "尝试不同的搜索查询"
     },
     "footer": {
-      "templateCount": "{count} 个模板"
+      "templateCount": "{count} 个模板",
+      "templateCount_plural": "{count} 个模板"
     },
     "card": {
       "nodes": "个节点",

ccw/frontend/src/pages/IssueManagerPage.tsx

@@ -5,6 +5,7 @@
 
 import { useState, useEffect, useMemo } from 'react';
 import { useIntl } from 'react-intl';
+import { toast } from 'sonner';
 import {
   AlertCircle,
   Plus,
@@ -24,6 +25,7 @@ import { Dialog, DialogContent, DialogHeader, DialogTitle } from '@/components/u
 import { Select, SelectTrigger, SelectValue, SelectContent, SelectItem } from '@/components/ui/Select';
 import { IssueCard } from '@/components/shared/IssueCard';
 import { useIssues, useIssueMutations } from '@/hooks';
+import { pullIssuesFromGitHub } from '@/lib/api';
 import type { Issue } from '@/lib/api';
 import { cn } from '@/lib/utils';
 
@@ -316,6 +318,7 @@ export function IssueManagerPage() {
   const [isNewIssueOpen, setIsNewIssueOpen] = useState(false);
   const [isEditIssueOpen, setIsEditIssueOpen] = useState(false);
   const [editingIssue, setEditingIssue] = useState<Issue | null>(null);
+  const [isGithubSyncing, setIsGithubSyncing] = useState(false);
 
   const {
     issues,
@@ -378,6 +381,20 @@ export function IssueManagerPage() {
     await updateIssue(issue.id, { status });
   };
 
+  const handleGithubSync = async () => {
+    setIsGithubSyncing(true);
+    try {
+      const result = await pullIssuesFromGitHub({ state: 'open', limit: 100 });
+      await refetch();
+      toast.success(formatMessage({ id: 'issues.messages.githubSyncSuccess' }, result));
+    } catch (err) {
+      console.error('GitHub sync failed:', err);
+      toast.error(formatMessage({ id: 'issues.messages.githubSyncError' }));
+    } finally {
+      setIsGithubSyncing(false);
+    }
+  };
+
   return (
     <div className="space-y-6">
       {/* Page Header */}
@@ -396,8 +413,12 @@ export function IssueManagerPage() {
             <RefreshCw className={cn('w-4 h-4 mr-2', isFetching && 'animate-spin')} />
             {formatMessage({ id: 'common.actions.refresh' })}
           </Button>
-          <Button variant="outline">
+          <Button variant="outline" onClick={handleGithubSync} disabled={isGithubSyncing}>
-            <Github className="w-4 h-4 mr-2" />
+            {isGithubSyncing ? (
+              <Loader2 className="w-4 h-4 mr-2 animate-spin" />
+            ) : (
+              <Github className="w-4 h-4 mr-2" />
+            )}
             {formatMessage({ id: 'issues.actions.github' })}
           </Button>
           <Button onClick={() => setIsNewIssueOpen(true)}>

ccw/frontend/src/pages/MemoryPage.tsx

@@ -18,8 +18,6 @@ import {
   Tag,
   Loader2,
   Copy,
-  ChevronDown,
-  ChevronUp,
   Star,
   Archive,
   ArchiveRestore,
@@ -40,8 +38,7 @@ import { cn } from '@/lib/utils';
 
 interface MemoryCardProps {
   memory: CoreMemory;
-  isExpanded: boolean;
+  onView: (memory: CoreMemory) => void;
-  onToggleExpand: () => void;
   onEdit: (memory: CoreMemory) => void;
   onDelete: (memory: CoreMemory) => void;
   onCopy: (content: string) => void;
@@ -50,7 +47,7 @@ interface MemoryCardProps {
   onUnarchive: (memory: CoreMemory) => void;
 }
 
-function MemoryCard({ memory, isExpanded, onToggleExpand, onEdit, onDelete, onCopy, onToggleFavorite, onArchive, onUnarchive }: MemoryCardProps) {
+function MemoryCard({ memory, onView, onEdit, onDelete, onCopy, onToggleFavorite, onArchive, onUnarchive }: MemoryCardProps) {
   const formattedDate = new Date(memory.createdAt).toLocaleDateString();
 
   // Parse metadata from memory
@@ -66,10 +63,9 @@ function MemoryCard({ memory, isExpanded, onToggleExpand, onEdit, onDelete, onCo
 
   return (
     <Card className="overflow-hidden">
-      {/* Header */}
       <div
         className="p-4 cursor-pointer hover:bg-muted/50 transition-colors"
-        onClick={onToggleExpand}
+        onClick={() => onView(memory)}
       >
         <div className="flex items-start justify-between gap-2">
           <div className="flex items-start gap-3">
@@ -172,20 +168,13 @@ function MemoryCard({ memory, isExpanded, onToggleExpand, onEdit, onDelete, onCo
             >
               <Trash2 className="w-4 h-4" />
             </Button>
-            {isExpanded ? (
-              <ChevronUp className="w-5 h-5 text-muted-foreground" />
-            ) : (
-              <ChevronDown className="w-5 h-5 text-muted-foreground" />
-            )}
           </div>
         </div>
 
         {/* Preview */}
-        {!isExpanded && (
+        <p className="text-sm text-muted-foreground mt-2 line-clamp-2">
-          <p className="text-sm text-muted-foreground mt-2 line-clamp-2">
+          {memory.content}
-            {memory.content}
+        </p>
-          </p>
-        )}
 
         {/* Tags */}
         {memory.tags && memory.tags.length > 0 && (
@@ -204,16 +193,90 @@ function MemoryCard({ memory, isExpanded, onToggleExpand, onEdit, onDelete, onCo
           </div>
         )}
       </div>
+    </Card>
+  );
+}
 
-      {/* Expanded Content */}
+// ========== View Memory Dialog ==========
-      {isExpanded && (
+
-        <div className="border-t border-border p-4 bg-muted/30">
+interface ViewMemoryDialogProps {
-          <pre className="text-sm text-foreground whitespace-pre-wrap font-mono bg-background p-4 rounded-lg overflow-x-auto max-h-96">
+  memory: CoreMemory | null;
+  open: boolean;
+  onOpenChange: (open: boolean) => void;
+  onEdit: (memory: CoreMemory) => void;
+  onCopy: (content: string) => void;
+}
+
+function ViewMemoryDialog({ memory, open, onOpenChange, onEdit, onCopy }: ViewMemoryDialogProps) {
+  const { formatMessage } = useIntl();
+  if (!memory) return null;
+
+  const metadata = memory.metadata ? (typeof memory.metadata === 'string' ? JSON.parse(memory.metadata) : memory.metadata) : {};
+  const priority = metadata.priority || 'medium';
+  const formattedDate = new Date(memory.createdAt).toLocaleDateString();
+  const formattedSize = memory.size
+    ? memory.size < 1024
+      ? `${memory.size} B`
+      : `${(memory.size / 1024).toFixed(1)} KB`
+    : 'Unknown';
+
+  return (
+    <Dialog open={open} onOpenChange={onOpenChange}>
+      <DialogContent className="max-w-3xl max-h-[80vh] flex flex-col">
+        <DialogHeader>
+          <DialogTitle className="flex items-center gap-2">
+            <Brain className="w-5 h-5 text-primary" />
+            {memory.id}
+          </DialogTitle>
+          <div className="flex items-center gap-2 mt-1">
+            {memory.source && (
+              <Badge variant="outline" className="text-xs">
+                {memory.source}
+              </Badge>
+            )}
+            {priority !== 'medium' && (
+              <Badge variant={priority === 'high' ? 'destructive' : 'secondary'} className="text-xs">
+                {priority}
+              </Badge>
+            )}
+            <span className="text-xs text-muted-foreground">
+              {formattedDate} - {formattedSize}
+            </span>
+          </div>
+        </DialogHeader>
+
+        {/* Tags */}
+        {memory.tags && memory.tags.length > 0 && (
+          <div className="flex flex-wrap gap-1">
+            {memory.tags.map((tag) => (
+              <Badge key={tag} variant="secondary" className="text-xs">
+                <Tag className="w-3 h-3 mr-1" />
+                {tag}
+              </Badge>
+            ))}
+          </div>
+        )}
+
+        {/* Content */}
+        <div className="flex-1 overflow-auto mt-2">
+          <pre className="text-sm text-foreground whitespace-pre-wrap font-mono bg-muted/30 p-4 rounded-lg">
             {memory.content}
           </pre>
         </div>
-      )}
+
-    </Card>
+        {/* Actions */}
+        <div className="flex justify-end gap-2 pt-2 border-t border-border">
+          <Button variant="outline" size="sm" onClick={() => onCopy(memory.content)}>
+            <Copy className="w-4 h-4 mr-2" />
+            {formatMessage({ id: 'memory.actions.copy' })}
+          </Button>
+          <Button variant="outline" size="sm" onClick={() => { onOpenChange(false); onEdit(memory); }}>
+            <Edit className="w-4 h-4 mr-2" />
+            {formatMessage({ id: 'memory.actions.edit' })}
+          </Button>
+        </div>
+      </DialogContent>
+    </Dialog>
   );
 }
 
@@ -381,7 +444,7 @@ export function MemoryPage() {
   const [selectedTags, setSelectedTags] = useState<string[]>([]);
   const [isNewMemoryOpen, setIsNewMemoryOpen] = useState(false);
   const [editingMemory, setEditingMemory] = useState<CoreMemory | null>(null);
-  const [expandedMemories, setExpandedMemories] = useState<Set<string>>(new Set());
+  const [viewingMemory, setViewingMemory] = useState<CoreMemory | null>(null);
   const [currentTab, setCurrentTab] = useState<'memories' | 'favorites' | 'archived'>('memories');
 
   // Build filter based on current tab
@@ -409,18 +472,6 @@ export function MemoryPage() {
   const { createMemory, updateMemory, deleteMemory, archiveMemory, unarchiveMemory, isCreating, isUpdating } =
     useMemoryMutations();
 
-  const toggleExpand = (memoryId: string) => {
-    setExpandedMemories((prev) => {
-      const next = new Set(prev);
-      if (next.has(memoryId)) {
-        next.delete(memoryId);
-      } else {
-        next.add(memoryId);
-      }
-      return next;
-    });
-  };
-
   const handleCreateMemory = async (data: { content: string; tags?: string[]; metadata?: Record<string, any> }) => {
     if (editingMemory) {
       await updateMemory(editingMemory.id, data);
@@ -673,8 +724,7 @@ export function MemoryPage() {
             <MemoryCard
               key={memory.id}
               memory={memory}
-              isExpanded={expandedMemories.has(memory.id)}
+              onView={setViewingMemory}
-              onToggleExpand={() => toggleExpand(memory.id)}
               onEdit={handleEdit}
               onDelete={handleDelete}
               onCopy={copyToClipboard}
@@ -686,6 +736,15 @@ export function MemoryPage() {
         </div>
       )}
 
+      {/* View Memory Dialog */}
+      <ViewMemoryDialog
+        memory={viewingMemory}
+        open={viewingMemory !== null}
+        onOpenChange={(open) => { if (!open) setViewingMemory(null); }}
+        onEdit={handleEdit}
+        onCopy={copyToClipboard}
+      />
+
       {/* New/Edit Memory Dialog */}
       <NewMemoryDialog
         open={isNewMemoryOpen}

ccw/frontend/src/pages/orchestrator/FlowToolbar.tsx

@@ -72,25 +72,37 @@ export function FlowToolbar({ className, onOpenTemplateLibrary }: FlowToolbarPro
 
   // Handle save
   const handleSave = useCallback(async () => {
-    if (!currentFlow) {
-      toast.error(formatMessage({ id: 'orchestrator.notifications.noFlow' }), formatMessage({ id: 'orchestrator.notifications.createFlowFirst' }));
-      return;
-    }
-
     setIsSaving(true);
     try {
-      // Update flow name if changed
+      const name = flowName.trim() || formatMessage({ id: 'orchestrator.toolbar.placeholder' });
-      if (flowName && flowName !== currentFlow.name) {
+
+      // Auto-create a new flow if none exists
+      if (!currentFlow) {
+        const now = new Date().toISOString();
+        const newFlow: Flow = {
+          id: `flow-${Date.now()}-${Math.random().toString(36).slice(2, 8)}`,
+          name,
+          version: 1,
+          created_at: now,
+          updated_at: now,
+          nodes: useFlowStore.getState().nodes,
+          edges: useFlowStore.getState().edges,
+          variables: {},
+          metadata: {},
+        };
+        useFlowStore.setState({ currentFlow: newFlow });
+      } else if (flowName && flowName !== currentFlow.name) {
+        // Update flow name if changed
         useFlowStore.setState((state) => ({
           currentFlow: state.currentFlow
-            ? { ...state.currentFlow, name: flowName }
+            ? { ...state.currentFlow, name }
             : null,
         }));
       }
 
       const saved = await saveFlow();
       if (saved) {
-        toast.success(formatMessage({ id: 'orchestrator.notifications.flowSaved' }), formatMessage({ id: 'orchestrator.notifications.savedSuccessfully' }, { name: flowName || currentFlow.name }));
+        toast.success(formatMessage({ id: 'orchestrator.notifications.flowSaved' }), formatMessage({ id: 'orchestrator.notifications.savedSuccessfully' }, { name }));
       } else {
         toast.error(formatMessage({ id: 'orchestrator.notifications.saveFailed' }), formatMessage({ id: 'orchestrator.notifications.couldNotSave' }));
       }
@@ -99,7 +111,7 @@ export function FlowToolbar({ className, onOpenTemplateLibrary }: FlowToolbarPro
     } finally {
       setIsSaving(false);
     }
-  }, [currentFlow, flowName, saveFlow]);
+  }, [currentFlow, flowName, saveFlow, formatMessage]);
 
   // Handle load
   const handleLoad = useCallback(
@@ -217,7 +229,7 @@ export function FlowToolbar({ className, onOpenTemplateLibrary }: FlowToolbarPro
           variant="outline"
           size="sm"
           onClick={handleSave}
-          disabled={isSaving || !currentFlow}
+          disabled={isSaving}
         >
           {isSaving ? (
             <Loader2 className="w-4 h-4 mr-1 animate-spin" />