@geminilight/mindos 0.6.29 → 0.6.31

package/app/components/FileTree.tsx

@@ -6,11 +6,12 @@ import { FileNode } from '@/lib/types';
 import { encodePath } from '@/lib/utils';
 import {
   ChevronDown, FileText, Table, Folder, FolderOpen, Plus, Loader2,
-  Trash2, Pencil, Layers, ScrollText, FolderInput, Copy,
+  Trash2, Pencil, Layers, ScrollText, FolderInput, Copy, MoreHorizontal, Star,
 } from 'lucide-react';
 import { createFileAction, deleteFileAction, renameFileAction, renameSpaceAction, deleteSpaceAction, convertToSpaceAction, deleteFolderAction } from '@/lib/actions';
 import { useLocale } from '@/lib/LocaleContext';
 import { ConfirmDialog } from '@/components/agents/AgentsPrimitives';
+import { usePinnedFiles } from '@/lib/hooks/usePinnedFiles';
 
 function notifyFilesChanged() {
   window.dispatchEvent(new Event('mindos:files-changed'));
@@ -134,9 +135,15 @@ function SpaceContextMenu({ x, y, node, onClose, onRename, onImport, onDelete }:
 }) {
   const router = useRouter();
   const { t } = useLocale();
+  const { isPinned, togglePin } = usePinnedFiles();
+  const pinned = isPinned(node.path);
 
   return (
     <ContextMenuShell x={x} y={y} onClose={onClose}>
+      <button className={MENU_ITEM} onClick={() => { togglePin(node.path); onClose(); }}>
+        <Star size={14} className={`shrink-0 ${pinned ? 'fill-[var(--amber)] text-[var(--amber)]' : ''}`} />
+        {pinned ? t.fileTree.removeFromFavorites : t.fileTree.pinToFavorites}
+      </button>
       <button className={MENU_ITEM} onClick={() => { router.push(`/view/${encodePath(`${node.path}/INSTRUCTION.md`)}`); onClose(); }}>
         <ScrollText size={14} className="shrink-0" /> {t.fileTree.editRules}
       </button>
@@ -168,9 +175,15 @@ function FolderContextMenu({ x, y, node, onClose, onRename, onDelete }: {
   const router = useRouter();
   const { t } = useLocale();
   const [isPending, startTransition] = useTransition();
+  const { isPinned, togglePin } = usePinnedFiles();
+  const pinned = isPinned(node.path);
 
   return (
-    <ContextMenuShell x={x} y={y} onClose={onClose} menuHeight={140}>
+    <ContextMenuShell x={x} y={y} onClose={onClose} menuHeight={180}>
+      <button className={MENU_ITEM} onClick={() => { togglePin(node.path); onClose(); }}>
+        <Star size={14} className={`shrink-0 ${pinned ? 'fill-[var(--amber)] text-[var(--amber)]' : ''}`} />
+        {pinned ? t.fileTree.removeFromFavorites : t.fileTree.pinToFavorites}
+      </button>
       <button className={MENU_ITEM} disabled={isPending} onClick={() => {
         startTransition(async () => {
           const result = await convertToSpaceAction(node.path);
@@ -567,9 +580,11 @@ function FileNodeItem({ node, depth, currentPath, onNavigate }: {
   const [renaming, setRenaming] = useState(false);
   const [renameValue, setRenameValue] = useState(node.name);
   const [isPending, startTransition] = useTransition();
-  const [isPendingDelete, startDeleteTransition] = useTransition();
+  const [, startDeleteTransition] = useTransition();
   const renameRef = useRef<HTMLInputElement>(null);
   const { t } = useLocale();
+  const { isPinned, togglePin } = usePinnedFiles();
+  const pinned = isPinned(node.path);
   const [showDeleteConfirm, setShowDeleteConfirm] = useState(false);
   const [contextMenu, setContextMenu] = useState<{ x: number; y: number } | null>(null);
 
@@ -659,16 +674,20 @@ function FileNodeItem({ node, depth, currentPath, onNavigate }: {
       >
         {getIcon(node)}
         <span className="truncate leading-5" suppressHydrationWarning>{node.name}</span>
+        {pinned && <Star size={10} className="shrink-0 fill-[var(--amber)] text-[var(--amber)] opacity-60" />}
       </button>
       <div className="absolute right-1 top-1/2 -translate-y-1/2 hidden group-hover/file:flex items-center gap-0.5">
-        <button onClick={() => copyPathToClipboard(node.path)} className="p-0.5 rounded text-muted-foreground hover:text-foreground hover:bg-muted transition-colors" title={t.fileTree.copyPath}>
-          <Copy size={12} />
-        </button>
-        <button onClick={startRename} className="p-0.5 rounded text-muted-foreground hover:text-foreground hover:bg-muted transition-colors" title={t.fileTree.rename}>
-          <Pencil size={12} />
-        </button>
-        <button onClick={handleDelete} className="p-0.5 rounded text-muted-foreground hover:text-error hover:bg-muted transition-colors" title={t.fileTree.delete}>
-          {isPendingDelete ? <Loader2 size={12} className="animate-spin" /> : <Trash2 size={12} />}
+        <button
+          type="button"
+          onClick={(e) => {
+            e.stopPropagation();
+            const rect = e.currentTarget.getBoundingClientRect();
+            setContextMenu({ x: rect.left, y: rect.bottom + 4 });
+          }}
+          className="p-0.5 rounded text-muted-foreground hover:text-foreground hover:bg-muted transition-colors"
+          title="More"
+        >
+          <MoreHorizontal size={14} />
         </button>
       </div>
       {contextMenu && (
@@ -676,10 +695,22 @@ function FileNodeItem({ node, depth, currentPath, onNavigate }: {
           x={contextMenu.x}
           y={contextMenu.y}
           onClose={() => setContextMenu(null)}
+          menuHeight={140}
         >
           <button className={MENU_ITEM} onClick={() => { copyPathToClipboard(node.path); setContextMenu(null); }}>
             <Copy size={14} className="shrink-0" /> {t.fileTree.copyPath}
           </button>
+          <button className={MENU_ITEM} onClick={() => { togglePin(node.path); setContextMenu(null); }}>
+            <Star size={14} className={`shrink-0 ${pinned ? 'fill-[var(--amber)] text-[var(--amber)]' : ''}`} />
+            {pinned ? t.fileTree.removeFromFavorites : t.fileTree.pinToFavorites}
+          </button>
+          <button className={MENU_ITEM} onClick={(e) => { setContextMenu(null); startRename(e); }}>
+            <Pencil size={14} className="shrink-0" /> {t.fileTree.rename}
+          </button>
+          <div className={MENU_DIVIDER} />
+          <button className={MENU_DANGER} onClick={(e) => { setContextMenu(null); handleDelete(e); }}>
+            <Trash2 size={14} className="shrink-0" /> {t.fileTree.delete}
+          </button>
         </ContextMenuShell>
       )}
       <ConfirmDialog

package/app/components/HomeContent.tsx

@@ -1,11 +1,12 @@
 'use client';
 
 import Link from 'next/link';
-import { FileText, Table, Clock, Sparkles, ArrowRight, FilePlus, Search, ChevronDown, Compass, Folder, Puzzle, Brain, Plus, Trash2, Check, Loader2, X, FolderInput, Zap, History, SlidersHorizontal, ListTodo } from 'lucide-react';
+import { FileText, Table, Clock, Sparkles, ArrowRight, FilePlus, Search, ChevronDown, Compass, Folder, Puzzle, Brain, Plus, Trash2, Check, Loader2, X, FolderInput, Zap, History, SlidersHorizontal, ListTodo, Star } from 'lucide-react';
 import type { LucideIcon } from 'lucide-react';
 import { useState, useEffect, useMemo, useCallback } from 'react';
 import { useLocale } from '@/lib/LocaleContext';
 import { encodePath, relativeTime, extractEmoji, stripEmoji } from '@/lib/utils';
+import { usePinnedFiles } from '@/lib/hooks/usePinnedFiles';
 import { getAllRenderers, getPluginRenderers } from '@/lib/renderers/registry';
 import OnboardingView from './OnboardingView';
 import GuideCard from './GuideCard';
@@ -168,6 +169,7 @@ const TOOL_ICONS: Record<string, LucideIcon> = {
   'agent-inspector': Search,
   'config-panel': SlidersHorizontal,
   'todo': ListTodo,
+  'workflow-yaml': Zap,
 };
 
 /** Mini-card for built-in tools — visually distinct from plugin chips */
@@ -251,14 +253,14 @@ export default function HomeContent({ recent, existingFiles, spaces }: { recent:
       <ExampleCleanupBanner />
 
       {/* ── Hero ── */}
-      <div className="mb-10">
+      <div className="mb-14">
         <div className="flex items-center gap-2 mb-3">
-          <div className="w-1 h-5 rounded-full bg-[var(--amber)]" />
+          <div className="w-1 h-6 rounded-full bg-gradient-to-b from-[var(--amber)] to-[var(--amber)]/30" />
           <h1 className="text-2xl font-semibold tracking-tight font-display text-foreground">
             MindOS
           </h1>
         </div>
-        <p className="text-sm leading-relaxed mb-5 text-muted-foreground pl-4">
+        <p className="text-base leading-relaxed mb-5 text-muted-foreground pl-4 max-w-md">
           {t.app.tagline}
         </p>
 
@@ -268,7 +270,7 @@ export default function HomeContent({ recent, existingFiles, spaces }: { recent:
             onClick={triggerAsk}
             title="⌘/"
             data-walkthrough="ask-button"
-            className="flex-1 flex items-center gap-3 px-4 py-3 rounded-xl border border-border bg-card transition-all duration-150 hover:border-[var(--amber)]/50 hover:bg-[var(--amber-dim)]"
+            className="flex-1 flex items-center gap-3 px-4 py-3 rounded-xl border border-border/60 shadow-sm bg-card transition-all duration-150 hover:border-[var(--amber)]/50 hover:bg-[var(--amber-dim)]"
           >
             <Sparkles size={15} className="shrink-0 text-[var(--amber)]" />
             <span className="text-sm flex-1 text-left text-foreground">
@@ -292,7 +294,7 @@ export default function HomeContent({ recent, existingFiles, spaces }: { recent:
         </div>
 
         {/* Quick Actions */}
-        <div className="flex flex-wrap gap-2.5 mt-4 pl-4">
+        <div className="flex flex-wrap gap-3 mt-5 pl-4">
           <button
             onClick={() => window.dispatchEvent(new CustomEvent('mindos:open-import'))}
             className="inline-flex items-center gap-2 px-3.5 py-2 rounded-lg text-sm font-medium transition-all duration-150 hover:translate-x-0.5 bg-[var(--amber-dim)] text-[var(--amber-text)]"
@@ -330,8 +332,11 @@ export default function HomeContent({ recent, existingFiles, spaces }: { recent:
         </div>
       </div>
 
-      {/* ── Section 1: Spaces ── */}
-      <section className="mb-8">
+      {/* ── Section: Pinned Files ── */}
+      <PinnedFilesSection formatTime={formatTime} />
+
+      {/* ── Section: Spaces ── */}
+      <section className="mb-12">
         <SectionTitle
           icon={<Brain size={13} />}
           count={spaceList.length > 0 ? spaceList.length : undefined}
@@ -391,9 +396,9 @@ export default function HomeContent({ recent, existingFiles, spaces }: { recent:
         )}
       </section>
 
-      {/* ── Section 2: Tools ── */}
+      {/* ── Section: Tools ── */}
       {builtinFeatures.length > 0 && (
-        <section className="mb-8">
+        <section className="mb-12">
           <SectionTitle icon={<Zap size={13} />} count={builtinFeatures.length}>
             {t.home.builtinFeatures}
           </SectionTitle>
@@ -418,9 +423,9 @@ export default function HomeContent({ recent, existingFiles, spaces }: { recent:
         </section>
       )}
 
-      {/* ── Section 3: Extensions ── */}
+      {/* ── Section: Extensions ── */}
       {availablePlugins.length > 0 && (
-        <section className="mb-8">
+        <section className="mb-12">
           <SectionTitle
             icon={<Puzzle size={13} />}
             count={availablePlugins.length}
@@ -445,7 +450,7 @@ export default function HomeContent({ recent, existingFiles, spaces }: { recent:
         </section>
       )}
 
-      {/* ── Section 4: Recently Edited ── */}
+      {/* ── Section: Recently Edited ── */}
       {recent.length > 0 && (
         <section className="mb-12">
           <SectionTitle
@@ -464,8 +469,30 @@ export default function HomeContent({ recent, existingFiles, spaces }: { recent:
             {t.home.recentlyEdited}
           </SectionTitle>
 
+          {/* Spotlight — latest file */}
+          <Link
+            href={`/view/${encodePath(recent[0].path)}`}
+            className="block mb-5 p-4 rounded-xl border border-border/50 bg-gradient-to-r from-[var(--amber-subtle)] to-transparent hover:border-[var(--amber)]/40 hover:shadow-sm transition-all group"
+          >
+            <div className="flex items-center gap-3">
+              <div className="w-10 h-10 rounded-lg bg-[var(--amber)]/10 flex items-center justify-center shrink-0">
+                {recent[0].path.endsWith('.csv')
+                  ? <Table size={18} className="text-[var(--amber)]" />
+                  : <FileText size={18} className="text-[var(--amber)]" />}
+              </div>
+              <div className="flex-1 min-w-0">
+                <span className="text-base font-medium text-foreground block truncate">
+                  {recent[0].path.split('/').pop()}
+                </span>
+                <span className="text-xs text-muted-foreground mt-0.5 block" suppressHydrationWarning>
+                  {recent[0].path.split('/').slice(0, -1).join('/') || 'Root'} · {formatTime(recent[0].mtime)}
+                </span>
+              </div>
+              <ArrowRight size={16} className="text-muted-foreground group-hover:text-[var(--amber)] transition-colors shrink-0" />
+            </div>
+          </Link>
+
           {groups.length > 0 ? (
-            /* Space-Grouped View */
             <div className="flex flex-col gap-4">
               {groups.map((group) => {
                 const visibleFiles = showAll ? group.files : group.files.slice(0, FILES_PER_GROUP);
@@ -504,7 +531,6 @@ export default function HomeContent({ recent, existingFiles, spaces }: { recent:
                 );
               })}
 
-              {/* Root-level files (Other) */}
               {rootFiles.length > 0 && (
                 <div>
                   <div className="flex items-center gap-2 px-1 py-1.5">
@@ -521,7 +547,6 @@ export default function HomeContent({ recent, existingFiles, spaces }: { recent:
                 </div>
               )}
 
-              {/* Show more / less */}
               {groups.some(g => g.files.length > FILES_PER_GROUP) && (
                 <ToggleButton
                   expanded={showAll}
@@ -533,7 +558,6 @@ export default function HomeContent({ recent, existingFiles, spaces }: { recent:
               )}
             </div>
           ) : (
-            /* Flat Timeline Fallback */
             <div className="relative pl-4">
               <div className="absolute left-0 top-1 bottom-1 w-px bg-border" />
               <div className="flex flex-col gap-0.5">
@@ -547,8 +571,8 @@ export default function HomeContent({ recent, existingFiles, spaces }: { recent:
                         aria-hidden="true"
                         className={`absolute -left-4 top-1/2 -translate-y-1/2 rounded-full transition-all duration-150 group-hover:scale-150 ${
                           idx === 0
-                            ? 'w-2 h-2 bg-[var(--amber)] outline-2 outline-[var(--amber-dim)]'
-                            : 'w-1.5 h-1.5 bg-border'
+                            ? 'w-2.5 h-2.5 bg-[var(--amber)] ring-2 ring-[var(--amber)]/20'
+                            : 'w-1.5 h-1.5 bg-muted-foreground/30'
                         }`}
                       />
                       <Link
@@ -586,7 +610,7 @@ export default function HomeContent({ recent, existingFiles, spaces }: { recent:
       )}
 
       {/* Footer */}
-      <div className="mt-16 flex items-center gap-1.5 text-xs font-display text-muted-foreground opacity-60">
+      <div className="py-6 border-t border-border/30 flex items-center gap-1.5 text-xs font-display text-muted-foreground opacity-40">
         <Sparkles size={10} className="text-[var(--amber)]" />
         <span>{t.app.footer}</span>
       </div>
@@ -594,6 +618,54 @@ export default function HomeContent({ recent, existingFiles, spaces }: { recent:
   );
 }
 
+/* ── Pinned Files Section ── */
+function PinnedFilesSection({ formatTime }: { formatTime: (t: number) => string }) {
+  const { t } = useLocale();
+  const { pinnedFiles, removePin } = usePinnedFiles();
+
+  if (pinnedFiles.length === 0) return null;
+
+  return (
+    <section className="mb-12">
+      <SectionTitle icon={<Star size={13} />} count={pinnedFiles.length}>
+        {t.pinnedFiles.title}
+      </SectionTitle>
+      <div className="flex flex-col gap-0.5">
+        {pinnedFiles.map((filePath) => {
+          const name = filePath.split('/').pop() || filePath;
+          const dir = filePath.split('/').slice(0, -1).join('/');
+          const isCSV = filePath.endsWith('.csv');
+          return (
+            <div key={filePath} className="group/pin relative">
+              <Link
+                href={`/view/${encodePath(filePath)}`}
+                className="flex items-center gap-3 px-3 py-2 rounded-lg transition-all duration-100 hover:translate-x-0.5 hover:bg-muted"
+              >
+                <Star size={12} className="shrink-0 fill-[var(--amber)] text-[var(--amber)]" />
+                {isCSV
+                  ? <Table size={12} className="shrink-0 text-success" />
+                  : <FileText size={12} className="shrink-0 text-muted-foreground" />
+                }
+                <div className="flex-1 min-w-0">
+                  <span className="text-sm truncate block text-foreground" suppressHydrationWarning>{name}</span>
+                  {dir && <span className="text-xs truncate block text-muted-foreground opacity-50" suppressHydrationWarning>{dir}</span>}
+                </div>
+              </Link>
+              <button
+                onClick={(e) => { e.preventDefault(); e.stopPropagation(); removePin(filePath); }}
+                className="absolute right-2 top-1/2 -translate-y-1/2 hidden group-hover/pin:flex p-1 rounded text-muted-foreground hover:text-foreground hover:bg-muted transition-colors"
+                title={t.pinnedFiles.removedToast}
+              >
+                <X size={12} />
+              </button>
+            </div>
+          );
+        })}
+      </div>
+    </section>
+  );
+}
+
 /* ── Create Space: title-bar button ── */
 function CreateSpaceButton({ t }: { t: ReturnType<typeof useLocale>['t'] }) {
   return (

package/app/components/MarkdownView.tsx

@@ -6,13 +6,17 @@ import rehypeHighlight from 'rehype-highlight';
 import rehypeRaw from 'rehype-raw';
 import rehypeSlug from 'rehype-slug';
 import { useState, useCallback } from 'react';
-import { Copy, Check } from 'lucide-react';
+import { Copy, Check, X } from 'lucide-react';
 import { copyToClipboard } from '@/lib/clipboard';
 import { toast } from '@/lib/toast';
 import type { Components } from 'react-markdown';
 
 interface MarkdownViewProps {
   content: string;
+  /** Lines changed by AI (1-indexed). Shows banner + fades after timeout. */
+  highlightLines?: number[];
+  /** Callback to dismiss the highlight banner */
+  onDismissHighlight?: () => void;
 }
 
 function CopyButton({ code }: { code: string }) {
@@ -111,16 +115,47 @@ function extractText(node: React.ReactNode): string {
   return '';
 }
 
-export default function MarkdownView({ content }: MarkdownViewProps) {
+export default function MarkdownView({ content, highlightLines, onDismissHighlight }: MarkdownViewProps) {
+  const hasHighlights = highlightLines && highlightLines.length > 0;
+
   return (
-    <div className="prose max-w-none">
-      <ReactMarkdown
-        remarkPlugins={[remarkGfm]}
-        rehypePlugins={[rehypeSlug, rehypeHighlight, rehypeRaw]}
-        components={components}
-      >
-        {content}
-      </ReactMarkdown>
+    <div>
+      {/* Change indicator banner */}
+      {hasHighlights && (
+        <div
+          className="mb-4 flex items-center gap-2 rounded-md border px-3 py-2 text-xs animate-in fade-in-0 duration-300"
+          style={{
+            borderColor: 'color-mix(in srgb, var(--amber) 40%, var(--border))',
+            background: 'color-mix(in srgb, var(--amber) 8%, var(--card))',
+            color: 'var(--amber)',
+          }}
+          data-highlight-line
+        >
+          <span className="w-1.5 h-1.5 rounded-full bg-[var(--amber)] animate-pulse shrink-0" />
+          <span className="font-display font-medium flex-1">
+            {highlightLines.length} line{highlightLines.length !== 1 ? 's' : ''} updated by AI
+          </span>
+          {onDismissHighlight && (
+            <button
+              type="button"
+              onClick={onDismissHighlight}
+              className="p-0.5 rounded hover:bg-[var(--amber)]/15 transition-colors shrink-0"
+              aria-label="Dismiss"
+            >
+              <X size={12} />
+            </button>
+          )}
+        </div>
+      )}
+      <div className="prose max-w-none">
+        <ReactMarkdown
+          remarkPlugins={[remarkGfm]}
+          rehypePlugins={[rehypeSlug, rehypeHighlight, rehypeRaw]}
+          components={components}
+        >
+          {content}
+        </ReactMarkdown>
+      </div>
     </div>
   );
 }

package/app/components/Panel.tsx

@@ -30,6 +30,7 @@ const DEFAULT_PANEL_WIDTH: Record<PanelId, number> = {
   echo: 280,
   agents: 280,
   discover: 280,
+  workflows: 280,
 };
 
 const MIN_PANEL_WIDTH = 240;

package/app/components/RightAskPanel.tsx

@@ -10,11 +10,14 @@ const MIN_WIDTH = 300;
 const MAX_WIDTH_ABS = 700;
 const MAX_WIDTH_RATIO = 0.45;
 
+import type { AcpAgentSelection } from '@/hooks/useAskModal';
+
 interface RightAskPanelProps {
   open: boolean;
   onClose: () => void;
   currentFile?: string;
   initialMessage?: string;
+  initialAcpAgent?: AcpAgentSelection | null;
   onFirstMessage?: () => void;
   width: number;
   onWidthChange: (w: number) => void;
@@ -28,7 +31,7 @@ interface RightAskPanelProps {
 }
 
 export default function RightAskPanel({
-  open, onClose, currentFile, initialMessage, onFirstMessage,
+  open, onClose, currentFile, initialMessage, initialAcpAgent, onFirstMessage,
   width, onWidthChange, onWidthCommit, askMode, onModeSwitch,
   maximized = false, onMaximize, sidebarOffset = 0,
 }: RightAskPanelProps) {
@@ -73,6 +76,7 @@ export default function RightAskPanel({
             variant="panel"
             currentFile={open ? currentFile : undefined}
             initialMessage={initialMessage}
+            initialAcpAgent={initialAcpAgent}
             onFirstMessage={onFirstMessage}
             onClose={onClose}
             askMode={askMode}

package/app/components/Sidebar.tsx

@@ -3,7 +3,7 @@
 import { useState, useEffect } from 'react';
 import Link from 'next/link';
 import { useRouter, usePathname } from 'next/navigation';
-import { Search, PanelLeftClose, PanelLeftOpen, Menu, X, Settings } from 'lucide-react';
+import { Search, PanelLeftClose, PanelLeftOpen, Menu, X, Settings, Trash2 } from 'lucide-react';
 import FileTree from './FileTree';
 import SearchModal from './SearchModal';
 import AskModal from './AskModal';
@@ -117,6 +117,15 @@ export default function Sidebar({ fileTree, collapsed = false, onCollapse, onExp
       <div className="flex-1 overflow-y-auto min-h-0 px-2 py-2">
         <FileTree nodes={fileTree} onNavigate={() => setMobileOpen(false)} />
       </div>
+      <div className="px-2 pb-1">
+        <Link
+          href="/trash"
+          className="flex items-center gap-2 px-2 py-1.5 rounded-md text-xs text-muted-foreground hover:text-foreground hover:bg-muted transition-colors"
+        >
+          <Trash2 size={13} />
+          <span>{t.trash?.title ?? 'Trash'}</span>
+        </Link>
+      </div>
       <SyncStatusBar
         collapsed={collapsed}
         onOpenSyncSettings={openSyncSettings}

package/app/components/SidebarLayout.tsx

@@ -13,6 +13,7 @@ import SearchPanel from './panels/SearchPanel';
 import AgentsPanel from './panels/AgentsPanel';
 import DiscoverPanel from './panels/DiscoverPanel';
 import EchoPanel from './panels/EchoPanel';
+import WorkflowsPanel from './panels/WorkflowsPanel';
 
 import RightAskPanel from './RightAskPanel';
 import RightAgentDetailPanel, {
@@ -407,6 +408,9 @@ export default function SidebarLayout({ fileTree, children }: SidebarLayoutProps
         <div className={`flex flex-col h-full ${lp.activePanel === 'discover' ? '' : 'hidden'}`}>
           <DiscoverPanel active={lp.activePanel === 'discover'} maximized={lp.panelMaximized} onMaximize={lp.handlePanelMaximize} />
         </div>
+        <div className={`flex flex-col h-full ${lp.activePanel === 'workflows' ? '' : 'hidden'}`}>
+          <WorkflowsPanel active={lp.activePanel === 'workflows'} maximized={lp.panelMaximized} onMaximize={lp.handlePanelMaximize} />
+        </div>
       </Panel>
 
       {/* ── Right-side Ask AI Panel ── */}
@@ -415,6 +419,7 @@ export default function SidebarLayout({ fileTree, children }: SidebarLayoutProps
         onClose={ap.closeAskPanel}
         currentFile={currentFile}
         initialMessage={ap.askInitialMessage}
+        initialAcpAgent={ap.askAcpAgent}
         onFirstMessage={handleFirstMessage}
         width={ap.askPanelWidth}
         onWidthChange={ap.handleAskWidthChange}
@@ -441,6 +446,7 @@ export default function SidebarLayout({ fileTree, children }: SidebarLayoutProps
         onClose={ap.closeDesktopAskPopup}
         currentFile={currentFile}
         initialMessage={ap.askInitialMessage}
+        initialAcpAgent={ap.askAcpAgent}
         onFirstMessage={handleFirstMessage}
         askMode={ap.askMode}
         onModeSwitch={ap.handleAskModeSwitch}