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.
2026-02-10 02:24:35 +08:00 · 2026-02-07 23:15:50 +08:00
parent 82ed5054f5
commit 80ae4baea8
13 changed files with 418 additions and 195 deletions
--- a/ccw/frontend/src/components/layout/AppShell.tsx
+++ b/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'
          )}
        >
--- a/ccw/frontend/src/components/layout/Header.tsx
+++ b/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"
--- a/ccw/frontend/src/components/session-detail/context/ExplorationsSection.tsx
+++ b/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 */
-function isPathLike(s: string): boolean {
-  return /^[\w@.~\-/\\]+(\/[\w@.\-]+)+(\.\w+)?$/.test(s.trim());
+/** Extract a displayable string from unknown value (handles objects with path/name/etc.) */
+function extractString(val: unknown): string {
+  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. */
-function toStringArray(val: unknown): string[] {
-  if (Array.isArray(val)) return val.map(String);
-  if (typeof val === 'string' && val.length > 0) return [val];
+/** Extract a secondary description from an object (reason, description, etc.) */
+function extractReason(val: unknown): string | undefined {
+  if (!val || typeof val !== 'object') return undefined;
+  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;
-    items: string[];
+    labelId: 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);
-  if (projectStructure.length > 0) {
-    sections.push({
-      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',
-    });
-  }
+  const sections = sectionDefs
+    .map((def) => ({ ...def, items: toItems(def.field) }))
+    .filter((s) => s.items.length > 0);

  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">
-      {sections.map((section) => (
-        <div key={section.key}>
-          <h4 className="text-xs font-medium text-muted-foreground uppercase tracking-wide mb-1.5 flex items-center gap-1.5">
-            <span className="text-muted-foreground">{section.icon}</span>
-            {section.label}
-          </h4>
-          {section.renderAs === 'paths' ? (
-            <div className="flex flex-wrap gap-1.5">
-              {section.items.map((item, i) => (
-                <div
-                  key={i}
-                  className="flex items-center gap-1 px-2 py-1 bg-muted rounded border text-[11px] font-mono text-foreground"
-                >
-                  <FileText className="w-3 h-3 text-muted-foreground flex-shrink-0" />
-                  {item}
-                </div>
-              ))}
-            </div>
-          ) : (
-            <ul className="space-y-1">
-              {section.items.map((item, i) => (
-                <li key={i} className="flex items-start gap-1.5 text-xs text-foreground">
-                  <span className="text-muted-foreground mt-0.5">•</span>
-                  <span className="flex-1">
-                    <FormattedTextItem text={item} />
-                  </span>
-                </li>
-              ))}
-            </ul>
-          )}
-        </div>
-      ))}
+    <div className="space-y-3">
+      {sections.map((section) => {
+        const theme = sectionThemes[section.key] || defaultTheme;
+        return (
+          <div key={section.key} className={`border-l-2 ${theme.border} ${theme.bg} rounded-r pl-3 py-2 pr-2`}>
+            <h4 className={`text-xs font-medium uppercase tracking-wide mb-1.5 flex items-center gap-1.5 ${theme.icon}`}>
+              {section.icon}
+              {formatMessage({ id: section.labelId })}
+              <span className={`text-[10px] px-1.5 py-0.5 rounded-full font-normal normal-case tracking-normal ${theme.badge}`}>
+                {section.items.length}
+              </span>
+            </h4>
+            {section.renderAs === 'paths' ? (
+              <div className="flex flex-wrap gap-1.5">
+                {section.items.map((item, i) => (
+                  <div
+                    key={i}
+                    className="flex items-center gap-1 px-2 py-1 bg-background rounded border text-[11px] font-mono text-foreground"
+                    title={item.reason}
+                  >
+                    <FileText className={`w-3 h-3 flex-shrink-0 ${theme.icon}`} />
+                    {item.text}
+                  </div>
+                ))}
+              </div>
+            ) : (
+              <ul className="space-y-1">
+                {section.items.map((item, i) => (
+                  <li key={i} className="flex items-start gap-1.5 text-xs text-foreground">
+                    <span className={`mt-0.5 ${theme.icon}`}>•</span>
+                    <span className="flex-1">
+                      <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>
--- a/ccw/frontend/src/locales/en/api-settings.json
+++ b/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"
    }
--- a/ccw/frontend/src/locales/en/common.json
+++ b/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": {
--- a/ccw/frontend/src/locales/en/issues.json
+++ b/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"
--- a/ccw/frontend/src/locales/zh/common.json
+++ b/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": "部件",
--- a/ccw/frontend/src/locales/zh/issues.json
+++ b/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": "无队列数据",
--- a/ccw/frontend/src/locales/zh/orchestrator.json
+++ b/ccw/frontend/src/locales/zh/orchestrator.json
@@ -107,7 +107,8 @@
      "searchSuggestion": "尝试不同的搜索查询"
    },
    "footer": {
-      "templateCount": "{count} 个模板"
+      "templateCount": "{count} 个模板",
+      "templateCount_plural": "{count} 个模板"
    },
    "card": {
      "nodes": "个节点",
--- a/ccw/frontend/src/pages/IssueManagerPage.tsx
+++ b/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">
-            <Github className="w-4 h-4 mr-2" />
+          <Button variant="outline" onClick={handleGithubSync} disabled={isGithubSyncing}>
+            {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)}>
--- a/ccw/frontend/src/pages/MemoryPage.tsx
+++ b/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;
-  onToggleExpand: () => void;
+  onView: (memory: CoreMemory) => 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">
-            {memory.content}
-          </p>
-        )}
+        <p className="text-sm text-muted-foreground mt-2 line-clamp-2">
+          {memory.content}
+        </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 */}
-      {isExpanded && (
-        <div className="border-t border-border p-4 bg-muted/30">
-          <pre className="text-sm text-foreground whitespace-pre-wrap font-mono bg-background p-4 rounded-lg overflow-x-auto max-h-96">
+// ========== View Memory Dialog ==========
+
+interface ViewMemoryDialogProps {
+  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)}
-              onToggleExpand={() => toggleExpand(memory.id)}
+              onView={setViewingMemory}
              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}
--- a/ccw/frontend/src/pages/orchestrator/FlowToolbar.tsx
+++ b/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
-      if (flowName && flowName !== currentFlow.name) {
+      const name = flowName.trim() || formatMessage({ id: 'orchestrator.toolbar.placeholder' });
+
+      // 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" />