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/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>