idea-manager 0.8.0 → 0.8.2

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "idea-manager",
-  "version": "0.8.0",
+  "version": "0.8.2",
   "description": "AI 기반 브레인스토밍 → 구조화 → 프롬프트 생성 도구. MCP Server 내장.",
   "keywords": [
     "brainstorm",

package/public/sw.js

@@ -1,4 +1,4 @@
-const CACHE_NAME = 'im-v4';
+const CACHE_NAME = 'im-v5';
 
 self.addEventListener('install', (event) => {
   self.skipWaiting();

package/src/app/api/filesystem/tree/route.ts

@@ -0,0 +1,78 @@
+import { NextRequest, NextResponse } from 'next/server';
+import fs from 'fs';
+import path from 'path';
+
+const IGNORED = new Set([
+  'node_modules', '.git', '.next', 'dist', 'build', '__pycache__',
+  '.cache', '.tmp', '.DS_Store', 'coverage', '.turbo', '.vercel',
+  '.idea', '.vscode', '.svn', '.hg',
+]);
+
+interface TreeEntry {
+  name: string;
+  path: string;
+  type: 'file' | 'directory';
+  size?: number;
+  extension?: string;
+}
+
+export async function GET(request: NextRequest) {
+  const dirPath = request.nextUrl.searchParams.get('path');
+
+  if (!dirPath) {
+    return NextResponse.json({ error: 'path is required' }, { status: 400 });
+  }
+
+  try {
+    const resolved = path.resolve(dirPath);
+
+    if (!fs.existsSync(resolved)) {
+      return NextResponse.json({ error: 'Path does not exist' }, { status: 404 });
+    }
+
+    const stat = fs.statSync(resolved);
+    if (!stat.isDirectory()) {
+      return NextResponse.json({ error: 'Not a directory' }, { status: 400 });
+    }
+
+    const entries = fs.readdirSync(resolved, { withFileTypes: true });
+    const items: TreeEntry[] = [];
+
+    for (const entry of entries) {
+      if (entry.name.startsWith('.') || IGNORED.has(entry.name)) continue;
+
+      const fullPath = path.join(resolved, entry.name);
+
+      if (entry.isDirectory()) {
+        items.push({
+          name: entry.name,
+          path: fullPath,
+          type: 'directory',
+        });
+      } else if (entry.isFile()) {
+        try {
+          const fileStat = fs.statSync(fullPath);
+          items.push({
+            name: entry.name,
+            path: fullPath,
+            type: 'file',
+            size: fileStat.size,
+            extension: path.extname(entry.name).slice(1).toLowerCase() || undefined,
+          });
+        } catch {
+          // skip unreadable files
+        }
+      }
+    }
+
+    // Sort: directories first, then alphabetically
+    items.sort((a, b) => {
+      if (a.type !== b.type) return a.type === 'directory' ? -1 : 1;
+      return a.name.localeCompare(b.name);
+    });
+
+    return NextResponse.json({ path: resolved, entries: items });
+  } catch {
+    return NextResponse.json({ error: 'Cannot read directory' }, { status: 500 });
+  }
+}

package/src/app/globals.css

@@ -1048,3 +1048,13 @@ textarea:focus {
 .animate-dialog-in {
   animation: dialogIn 0.15s ease-out;
 }
+
+/* Drawer slide-in from right */
+@keyframes drawerIn {
+  from { transform: translateX(100%); }
+  to { transform: translateX(0); }
+}
+
+.animate-drawer-in {
+  animation: drawerIn 0.2s ease-out;
+}

package/src/components/task/ProjectTree.tsx

@@ -20,6 +20,15 @@ import { CSS } from '@dnd-kit/utilities';
 import type { ITask, ISubProjectWithStats, TaskStatus } from '@/types';
 import { statusIcon } from './StatusFlow';
 
+function subProjectStatus(sp: ISubProjectWithStats): { dotClass: string; label: string; title: string } | null {
+  if (sp.task_count === 0) return null;
+  if (sp.problem_count > 0) return { dotClass: 'bg-destructive', label: `${sp.problem_count}!`, title: `${sp.problem_count} problem` };
+  if (sp.done_count === sp.task_count) return { dotClass: 'bg-success', label: `${sp.done_count}/${sp.task_count}`, title: 'All done' };
+  if (sp.done_count > 0) return { dotClass: 'bg-primary', label: `${sp.done_count}/${sp.task_count}`, title: `${sp.done_count} done, ${sp.active_count} active` };
+  if (sp.active_count > 0) return { dotClass: 'bg-warning', label: `${sp.active_count}`, title: `${sp.active_count} in progress` };
+  return null;
+}
+
 const PRIORITY_COLORS: Record<string, string> = {
   high: 'bg-destructive',
   medium: 'bg-warning',
@@ -100,13 +109,25 @@ export default function ProjectTree({
     <div className="flex flex-col h-full">
       <div className="flex items-center justify-between px-3 py-2 border-b border-border flex-shrink-0">
         <h2 className="text-xs font-medium text-muted-foreground uppercase tracking-wider">Projects</h2>
-        <button
-          onClick={onCreateSub}
-          className="text-xs text-muted-foreground hover:text-foreground transition-colors"
-          title="Add sub-project (N)"
-        >
-          + <span className="text-muted-foreground/50">N</span>
-        </button>
+        <div className="flex items-center gap-2">
+          <button
+            onClick={() => {
+              const allCollapsed = subProjects.length > 0 && subProjects.every(sp => collapsedSubs.has(sp.id));
+              setCollapsedSubs(allCollapsed ? new Set() : new Set(subProjects.map(sp => sp.id)));
+            }}
+            className="text-xs text-muted-foreground hover:text-foreground transition-colors"
+            title={subProjects.length > 0 && subProjects.every(sp => collapsedSubs.has(sp.id)) ? 'Expand all' : 'Collapse all'}
+          >
+            {subProjects.length > 0 && subProjects.every(sp => collapsedSubs.has(sp.id)) ? '\u25B6' : '\u25BC'}
+          </button>
+          <button
+            onClick={onCreateSub}
+            className="text-xs text-muted-foreground hover:text-foreground transition-colors"
+            title="Add sub-project (N)"
+          >
+            + <span className="text-muted-foreground/50">N</span>
+          </button>
+        </div>
       </div>
 
       <div className="flex-1 overflow-y-auto py-1">
@@ -205,8 +226,12 @@ function SortableSubProject({
       {/* Sub-project node */}
       <div
         onClick={() => {
-          onSelectSub(sp.id);
-          if (isCollapsed) onToggleCollapse(sp.id);
+          if (isSelected) {
+            onToggleCollapse(sp.id);
+          } else {
+            onSelectSub(sp.id);
+            if (isCollapsed) onToggleCollapse(sp.id);
+          }
         }}
         className={`flex items-center gap-1.5 px-2 py-1.5 cursor-pointer transition-colors group text-sm ${
           isSelected
@@ -230,6 +255,11 @@ function SortableSubProject({
         >
           {isCollapsed ? '\u25B6' : '\u25BC'}
         </button>
+        {(() => {
+          const st = subProjectStatus(sp);
+          if (!st) return null;
+          return <span className={`w-2 h-2 rounded-full ${st.dotClass} flex-shrink-0`} title={st.title} />;
+        })()}
         <span className={`flex-1 truncate font-medium ${isSelected ? 'text-primary' : ''}`}>
           {sp.name}
         </span>

package/src/components/task/TaskChat.tsx

@@ -7,6 +7,18 @@ import remarkGfm from 'remark-gfm';
 
 const POLL_INTERVAL = 3000; // Poll every 3s when task is testing
 
+function notifyAiResponse(preview: string) {
+  // Only notify when window/tab is not focused
+  if (document.hasFocus()) return;
+
+  if (Notification.permission === 'granted') {
+    new Notification('IM - AI Response', {
+      body: preview.slice(0, 120),
+      icon: '/icon-192.png',
+    });
+  }
+}
+
 export default function TaskChat({
   basePath,
   taskStatus,
@@ -22,6 +34,13 @@ export default function TaskChat({
   const messagesEndRef = useRef<HTMLDivElement>(null);
   const inputRef = useRef<HTMLTextAreaElement>(null);
 
+  // Request notification permission on mount
+  useEffect(() => {
+    if (typeof Notification !== 'undefined' && Notification.permission === 'default') {
+      Notification.requestPermission();
+    }
+  }, []);
+
   const fetchMessages = useCallback(() => {
     fetch(`${basePath}/chat`)
       .then(r => r.json())
@@ -73,6 +92,9 @@ export default function TaskChat({
           const withoutTemp = prev.filter(m => m.id !== tempId);
           return [...withoutTemp, data.userMessage, data.aiMessage];
         });
+        if (data.aiMessage?.content) {
+          notifyAiResponse(data.aiMessage.content);
+        }
       }
     } catch { /* silent */ }
     setLoading(false);

package/src/components/task/TaskDetail.tsx

@@ -1,6 +1,6 @@
 'use client';
 
-import { useState, useEffect, useCallback } from 'react';
+import { useState, useEffect, useCallback, useRef } from 'react';
 import type { ITask, TaskStatus, ItemPriority } from '@/types';
 import StatusFlow from './StatusFlow';
 import PromptEditor from './PromptEditor';
@@ -24,20 +24,15 @@ export default function TaskDetail({
   const [promptContent, setPromptContent] = useState('');
   const [refining, setRefining] = useState(false);
   const [editingTitle, setEditingTitle] = useState(false);
-  const [showChat, setShowChat] = useState(false);
+  const [showPromptModal, setShowPromptModal] = useState(false);
 
   const basePath = `/api/projects/${projectId}/sub-projects/${subProjectId}/tasks/${task.id}`;
-
-  // Auto-show chat when task is being executed by watcher
-  useEffect(() => {
-    if (task.status === 'testing') setShowChat(true);
-  }, [task.status]);
+  const overlayRef = useRef<HTMLDivElement>(null);
 
   // Load prompt
   useEffect(() => {
     setTitle(task.title);
     setDescription(task.description);
-    setShowChat(task.status === 'testing');
     fetch(`${basePath}/prompt`)
       .then(r => r.json())
       .then(data => setPromptContent(data.content || ''));
@@ -97,113 +92,128 @@ export default function TaskDetail({
 
   return (
     <div className="flex flex-col h-full">
-      {/* Upper: Task info + Prompt */}
-      <div className={`overflow-y-auto ${showChat ? 'flex-1 min-h-0' : 'flex-1'}`}>
-        <div className="p-4 space-y-4">
-          {/* Title */}
-          <div>
-            {editingTitle ? (
-              <input
-                value={title}
-                onChange={(e) => setTitle(e.target.value)}
-                onBlur={saveTitle}
-                onKeyDown={(e) => { if (e.key === 'Enter') saveTitle(); if (e.key === 'Escape') { setTitle(task.title); setEditingTitle(false); } }}
-                className="w-full bg-transparent text-xl font-semibold border-b border-primary
-                           focus:outline-none pb-1 text-foreground"
-                autoFocus
-              />
-            ) : (
-              <h2
-                onClick={() => setEditingTitle(true)}
-                className="text-xl font-semibold cursor-text hover:text-primary transition-colors"
+      {/* Compact header: Title + Status + Actions */}
+      <div className="px-4 py-3 border-b border-border flex-shrink-0 space-y-2">
+        {/* Title */}
+        {editingTitle ? (
+          <input
+            value={title}
+            onChange={(e) => setTitle(e.target.value)}
+            onBlur={saveTitle}
+            onKeyDown={(e) => { if (e.key === 'Enter') saveTitle(); if (e.key === 'Escape') { setTitle(task.title); setEditingTitle(false); } }}
+            className="w-full bg-transparent text-lg font-semibold border-b border-primary
+                       focus:outline-none pb-1 text-foreground"
+            autoFocus
+          />
+        ) : (
+          <h2
+            onClick={() => setEditingTitle(true)}
+            className="text-lg font-semibold cursor-text hover:text-primary transition-colors"
+          >
+            {task.title}
+          </h2>
+        )}
+
+        {/* Status + Priority + Today + Prompt + Delete */}
+        <div className="flex items-center gap-3 flex-wrap">
+          <StatusFlow status={task.status} onChange={(status: TaskStatus) => onUpdate({ status })} />
+          <div className="flex items-center gap-1">
+            {priorities.map(p => (
+              <button
+                key={p}
+                onClick={() => onUpdate({ priority: p })}
+                className={`px-2 py-0.5 text-xs rounded transition-colors ${
+                  task.priority === p
+                    ? p === 'high' ? 'bg-destructive/20 text-destructive' : p === 'medium' ? 'bg-warning/20 text-warning' : 'bg-muted text-muted-foreground'
+                    : 'text-muted-foreground/40 hover:text-muted-foreground'
+                }`}
               >
-                {task.title}
-              </h2>
-            )}
-          </div>
-
-          {/* Status + Priority + Today */}
-          <div className="flex items-center gap-4 flex-wrap">
-            <StatusFlow status={task.status} onChange={(status: TaskStatus) => onUpdate({ status })} />
-            <div className="flex items-center gap-1">
-              {priorities.map(p => (
-                <button
-                  key={p}
-                  onClick={() => onUpdate({ priority: p })}
-                  className={`px-2.5 py-1 text-sm rounded transition-colors ${
-                    task.priority === p
-                      ? p === 'high' ? 'bg-destructive/20 text-destructive' : p === 'medium' ? 'bg-warning/20 text-warning' : 'bg-muted text-muted-foreground'
-                      : 'text-muted-foreground/40 hover:text-muted-foreground'
-                  }`}
-                >
-                  {p}
-                </button>
-              ))}
-            </div>
-            <button
-              onClick={() => onUpdate({ is_today: !task.is_today })}
-              className={`text-sm px-2.5 py-1 rounded transition-colors ${
-                task.is_today
-                  ? 'bg-primary/20 text-primary'
-                  : 'text-muted-foreground hover:text-foreground'
-              }`}
-            >
-              {task.is_today ? 'Today *' : 'Mark today'}
-            </button>
-          </div>
-
-          {/* Description */}
-          <div>
-            <textarea
-              value={description}
-              onChange={(e) => setDescription(e.target.value)}
-              onBlur={saveDescription}
-              placeholder="Background, conditions, notes..."
-              className="w-full bg-input border border-border rounded-lg px-3 py-2.5 text-sm
-                         focus:border-primary focus:outline-none text-foreground resize-y min-h-[60px]
-                         leading-relaxed"
-              rows={3}
-            />
+                {p}
+              </button>
+            ))}
           </div>
+          <button
+            onClick={() => onUpdate({ is_today: !task.is_today })}
+            className={`text-xs px-2 py-0.5 rounded transition-colors ${
+              task.is_today
+                ? 'bg-primary/20 text-primary'
+                : 'text-muted-foreground hover:text-foreground'
+            }`}
+          >
+            {task.is_today ? 'Today *' : 'Mark today'}
+          </button>
+
+          <span className="text-border">|</span>
+
+          <button
+            onClick={() => setShowPromptModal(true)}
+            className={`text-xs px-2 py-0.5 rounded transition-colors border ${
+              promptContent
+                ? 'bg-accent/15 text-accent border-accent/30 hover:bg-accent/25'
+                : 'text-muted-foreground border-border hover:text-foreground hover:border-muted-foreground'
+            }`}
+          >
+            Prompt{promptContent ? ' *' : ''}
+          </button>
+
+          <button
+            onClick={onDelete}
+            className="text-xs text-muted-foreground hover:text-destructive transition-colors ml-auto"
+          >
+            Delete
+          </button>
+        </div>
 
-          {/* Prompt */}
-          <PromptEditor
-            content={promptContent}
-            onSave={savePrompt}
-            onRefine={handleRefine}
-            refining={refining}
-          />
+        {/* Description - compact */}
+        <textarea
+          value={description}
+          onChange={(e) => setDescription(e.target.value)}
+          onBlur={saveDescription}
+          placeholder="Background, conditions, notes..."
+          className="w-full bg-input border border-border rounded-lg px-3 py-2 text-sm
+                     focus:border-primary focus:outline-none text-foreground resize-none
+                     leading-relaxed"
+          rows={2}
+        />
+      </div>
 
-          {/* Actions */}
-          <div className="pt-4 border-t border-border flex items-center justify-between">
-            <button
-              onClick={() => setShowChat(!showChat)}
-              className={`text-xs px-2.5 py-1 rounded-md transition-colors border ${
-                showChat
-                  ? 'bg-accent/20 text-accent border-accent/30'
-                  : 'text-muted-foreground hover:text-foreground border-border hover:border-muted-foreground'
-              }`}
-            >
-              {showChat ? 'Hide AI Chat' : 'AI Chat'}
-            </button>
-            <button
-              onClick={onDelete}
-              className="text-xs text-muted-foreground hover:text-destructive transition-colors"
-            >
-              Delete task
-            </button>
-          </div>
-        </div>
+      {/* AI Chat - takes remaining space */}
+      <div className="flex-1 min-h-0">
+        <TaskChat
+          basePath={basePath}
+          taskStatus={task.status}
+          onApplyToPrompt={handleApplyToPrompt}
+        />
       </div>
 
-      {/* Lower: AI Chat */}
-      {showChat && (
-        <div className="h-[45%] flex-shrink-0">
-          <TaskChat
-            basePath={basePath}
-            taskStatus={task.status}
-            onApplyToPrompt={handleApplyToPrompt}
-          />
+      {/* Prompt Modal */}
+      {showPromptModal && (
+        <div
+          ref={overlayRef}
+          onClick={(e) => { if (e.target === overlayRef.current) setShowPromptModal(false); }}
+          className="fixed inset-0 z-50 flex items-center justify-center"
+          style={{ background: 'rgba(0,0,0,0.5)', backdropFilter: 'blur(2px)' }}
+        >
+          <div className="bg-card border border-border rounded-xl shadow-2xl shadow-black/40
+                          w-full max-w-2xl mx-4 max-h-[80vh] flex flex-col animate-dialog-in">
+            <div className="flex items-center justify-between px-5 py-3 border-b border-border">
+              <h3 className="text-sm font-semibold text-foreground">Prompt</h3>
+              <button
+                onClick={() => setShowPromptModal(false)}
+                className="text-muted-foreground hover:text-foreground transition-colors text-sm"
+              >
+                Close
+              </button>
+            </div>
+            <div className="flex-1 overflow-y-auto p-5">
+              <PromptEditor
+                content={promptContent}
+                onSave={savePrompt}
+                onRefine={handleRefine}
+                refining={refining}
+              />
+            </div>
+          </div>
         </div>
       )}
     </div>

package/src/components/ui/FileTreeDrawer.tsx

@@ -0,0 +1,221 @@
+'use client';
+
+import { useState, useEffect, useCallback, useRef } from 'react';
+
+interface TreeEntry {
+  name: string;
+  path: string;
+  type: 'file' | 'directory';
+  size?: number;
+  extension?: string;
+}
+
+interface DirNode {
+  entries: TreeEntry[];
+  loaded: boolean;
+  loading: boolean;
+  error?: string;
+}
+
+const FILE_ICONS: Record<string, string> = {
+  ts: 'TS', tsx: 'TX', js: 'JS', jsx: 'JX',
+  json: '{}', md: 'MD', css: 'CS', scss: 'SC',
+  html: 'HT', svg: 'SV', png: 'PN', jpg: 'JP',
+  py: 'PY', go: 'GO', rs: 'RS', java: 'JA',
+  sql: 'SQ', sh: 'SH', yml: 'YM', yaml: 'YM',
+  toml: 'TM', xml: 'XM', txt: 'TX', env: 'EN',
+  lock: 'LK', gitignore: 'GI',
+};
+
+function formatSize(bytes: number): string {
+  if (bytes < 1024) return `${bytes}B`;
+  if (bytes < 1024 * 1024) return `${(bytes / 1024).toFixed(0)}K`;
+  return `${(bytes / (1024 * 1024)).toFixed(1)}M`;
+}
+
+function getFileIcon(ext?: string): string {
+  if (!ext) return '--';
+  return FILE_ICONS[ext] || ext.slice(0, 2).toUpperCase();
+}
+
+export default function FileTreeDrawer({
+  rootPath,
+  onClose,
+}: {
+  rootPath: string;
+  onClose: () => void;
+}) {
+  const [dirs, setDirs] = useState<Record<string, DirNode>>({});
+  const [expanded, setExpanded] = useState<Set<string>>(new Set([rootPath]));
+  const overlayRef = useRef<HTMLDivElement>(null);
+
+  const loadDir = useCallback(async (dirPath: string) => {
+    setDirs(prev => ({
+      ...prev,
+      [dirPath]: { entries: [], loaded: false, loading: true },
+    }));
+
+    try {
+      const res = await fetch(`/api/filesystem/tree?path=${encodeURIComponent(dirPath)}`);
+      if (!res.ok) throw new Error('Failed to load');
+      const data = await res.json();
+      setDirs(prev => ({
+        ...prev,
+        [dirPath]: { entries: data.entries, loaded: true, loading: false },
+      }));
+    } catch {
+      setDirs(prev => ({
+        ...prev,
+        [dirPath]: { entries: [], loaded: true, loading: false, error: 'Failed to load' },
+      }));
+    }
+  }, []);
+
+  // Load root on mount
+  useEffect(() => {
+    loadDir(rootPath);
+  }, [rootPath, loadDir]);
+
+  // ESC to close
+  useEffect(() => {
+    const handler = (e: KeyboardEvent) => {
+      if (e.key === 'Escape') onClose();
+    };
+    window.addEventListener('keydown', handler);
+    return () => window.removeEventListener('keydown', handler);
+  }, [onClose]);
+
+  const toggleDir = (dirPath: string) => {
+    setExpanded(prev => {
+      const next = new Set(prev);
+      if (next.has(dirPath)) {
+        next.delete(dirPath);
+      } else {
+        next.add(dirPath);
+        // Load if not yet loaded
+        if (!dirs[dirPath]?.loaded && !dirs[dirPath]?.loading) {
+          loadDir(dirPath);
+        }
+      }
+      return next;
+    });
+  };
+
+  const renderEntries = (dirPath: string, depth: number) => {
+    const node = dirs[dirPath];
+    if (!node) return null;
+
+    if (node.loading) {
+      return (
+        <div className="flex items-center gap-2 py-1" style={{ paddingLeft: depth * 16 + 12 }}>
+          <span className="text-xs text-muted-foreground animate-pulse">Loading...</span>
+        </div>
+      );
+    }
+
+    if (node.error) {
+      return (
+        <div className="flex items-center gap-2 py-1" style={{ paddingLeft: depth * 16 + 12 }}>
+          <span className="text-xs text-destructive">{node.error}</span>
+        </div>
+      );
+    }
+
+    if (node.entries.length === 0) {
+      return (
+        <div className="flex items-center gap-2 py-1" style={{ paddingLeft: depth * 16 + 12 }}>
+          <span className="text-xs text-muted-foreground italic">Empty</span>
+        </div>
+      );
+    }
+
+    return node.entries.map((entry) => {
+      const isDir = entry.type === 'directory';
+      const isExpanded = expanded.has(entry.path);
+
+      return (
+        <div key={entry.path}>
+          <div
+            className={`flex items-center gap-1.5 py-[3px] pr-3 cursor-pointer transition-colors hover:bg-card-hover group ${
+              isDir ? 'text-foreground' : 'text-muted-foreground'
+            }`}
+            style={{ paddingLeft: depth * 16 + 12 }}
+            onClick={() => isDir && toggleDir(entry.path)}
+          >
+            {isDir ? (
+              <>
+                <span className="w-4 text-center text-xs text-muted-foreground flex-shrink-0">
+                  {isExpanded ? '\u25BC' : '\u25B6'}
+                </span>
+                <span className="text-sm flex-shrink-0">
+                  {isExpanded ? '\uD83D\uDCC2' : '\uD83D\uDCC1'}
+                </span>
+                <span className="text-sm truncate flex-1 font-medium">{entry.name}</span>
+              </>
+            ) : (
+              <>
+                <span className="w-4 flex-shrink-0" />
+                <span className="text-[10px] font-mono w-5 text-center flex-shrink-0 text-muted-foreground/70">
+                  {getFileIcon(entry.extension)}
+                </span>
+                <span className="text-sm truncate flex-1">{entry.name}</span>
+                {entry.size !== undefined && (
+                  <span className="text-[10px] text-muted-foreground/50 tabular-nums flex-shrink-0">
+                    {formatSize(entry.size)}
+                  </span>
+                )}
+              </>
+            )}
+          </div>
+          {isDir && isExpanded && renderEntries(entry.path, depth + 1)}
+        </div>
+      );
+    });
+  };
+
+  const dirName = rootPath.split('/').pop() || rootPath;
+
+  return (
+    <div
+      ref={overlayRef}
+      className="fixed inset-0 z-50 flex justify-end"
+      onClick={(e) => { if (e.target === overlayRef.current) onClose(); }}
+    >
+      {/* Backdrop */}
+      <div className="absolute inset-0 bg-black/40 backdrop-blur-[2px]" />
+
+      {/* Drawer */}
+      <div className="relative w-[420px] max-w-[85vw] h-full bg-card border-l border-border shadow-2xl flex flex-col animate-drawer-in">
+        {/* Header */}
+        <div className="flex items-center justify-between px-4 py-3 border-b border-border flex-shrink-0">
+          <div className="flex items-center gap-2 min-w-0">
+            <span className="text-base">{'\uD83D\uDCC2'}</span>
+            <div className="min-w-0">
+              <h2 className="text-sm font-semibold truncate">{dirName}</h2>
+              <p className="text-[10px] text-muted-foreground font-mono truncate">{rootPath}</p>
+            </div>
+          </div>
+          <button
+            onClick={onClose}
+            className="text-muted-foreground hover:text-foreground transition-colors text-lg px-1"
+            title="Close (ESC)"
+          >
+            &times;
+          </button>
+        </div>
+
+        {/* Tree content */}
+        <div className="flex-1 overflow-y-auto py-2">
+          {renderEntries(rootPath, 0)}
+        </div>
+
+        {/* Footer */}
+        <div className="px-4 py-2 border-t border-border flex-shrink-0">
+          <p className="text-[10px] text-muted-foreground">
+            ESC to close
+          </p>
+        </div>
+      </div>
+    </div>
+  );
+}

package/src/components/workspace/WorkspacePanel.tsx

@@ -9,6 +9,7 @@ import DirectoryPicker from '@/components/DirectoryPicker';
 import ConfirmDialog from '@/components/ui/ConfirmDialog';
 import AiPolicyModal from '@/components/ui/AiPolicyModal';
 import GitSyncResultsModal from '@/components/dashboard/GitSyncResultsModal';
+import FileTreeDrawer from '@/components/ui/FileTreeDrawer';
 import type { ISubProject, ITask, TaskStatus, ISubProjectWithStats, IGitSyncResult } from '@/types';
 
 interface IProject {
@@ -62,6 +63,7 @@ export default function WorkspacePanel({
   const [syncing, setSyncing] = useState(false);
   const [syncResults, setSyncResults] = useState<IGitSyncResult[] | null>(null);
   const [lastSyncTime, setLastSyncTime] = useState<Date | null>(null);
+  const [showFileTree, setShowFileTree] = useState(false);
   const syncingRef = useRef(false);
 
   // Resizable panel widths
@@ -380,9 +382,18 @@ export default function WorkspacePanel({
           <span className="text-border">|</span>
           <h1 className="text-sm font-semibold">{project.name}</h1>
           {project.project_path && (
-            <span className="text-xs text-muted-foreground font-mono truncate max-w-48" title={project.project_path}>
-              {project.project_path}
-            </span>
+            <>
+              <span className="text-xs text-muted-foreground font-mono truncate max-w-48" title={project.project_path}>
+                {project.project_path}
+              </span>
+              <button
+                onClick={() => setShowFileTree(true)}
+                className="text-xs text-muted-foreground hover:text-foreground hover:bg-muted transition-colors px-1.5 py-0.5 rounded"
+                title="View file tree"
+              >
+                {'\uD83D\uDCC2'}
+              </button>
+            </>
           )}
         </div>
         <div className="flex items-center gap-2">
@@ -506,6 +517,12 @@ export default function WorkspacePanel({
         results={syncResults || []}
         onClose={() => setSyncResults(null)}
       />
+      {showFileTree && project.project_path && (
+        <FileTreeDrawer
+          rootPath={project.project_path}
+          onClose={() => setShowFileTree(false)}
+        />
+      )}
     </div>
   );
 }