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-11 02:33:51 +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>