idea-manager 0.8.1 → 0.8.3

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "idea-manager",
-  "version": "0.8.1",
+  "version": "0.8.3",
   "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/cli.ts

@@ -68,6 +68,7 @@ program
     const child = spawn(nextBin, ['dev', '-p', port], {
       cwd: PKG_ROOT,
       stdio: 'inherit',
+      shell: true,
       env: { ...process.env, NODE_ENV: 'development' },
     });
 

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/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>
   );
 }