idea-manager 0.2.0 → 0.3.1

package/src/components/tree/TreeView.tsx

@@ -1,6 +1,8 @@
 'use client';
 
+import { useState, useEffect } from 'react';
 import TreeNode from './TreeNode';
+import CardView from './CardView';
 
 interface IItemTree {
   id: string;
@@ -10,6 +12,7 @@ interface IItemTree {
   priority: string;
   status: string;
   is_locked: boolean;
+  is_pinned: boolean;
   children: IItemTree[];
 }
 
@@ -18,43 +21,284 @@ interface TreeViewProps {
   loading: boolean;
   projectId: string;
   onItemUpdate: (itemId: string, data: Record<string, unknown>) => void;
+  onItemDelete: (itemId: string) => void;
+  onBulkDelete: (itemIds: string[] | 'all') => void;
+  onBulkStatus: (status: string) => void;
+  onTreeRefresh: (tree: IItemTree[]) => void;
+  onCleanup?: () => void;
+  cleaning?: boolean;
 }
 
-export default function TreeView({ items, loading, projectId, onItemUpdate }: TreeViewProps) {
+type ViewMode = 'tree' | 'card';
+
+function collectIds(item: IItemTree): string[] {
+  return [item.id, ...item.children.flatMap(collectIds)];
+}
+
+function filterDone(items: IItemTree[]): IItemTree[] {
+  return items
+    .filter(item => item.status !== 'done')
+    .map(item => ({
+      ...item,
+      children: filterDone(item.children),
+    }));
+}
+
+export default function TreeView({ items, loading, projectId, onItemUpdate, onItemDelete, onBulkDelete, onBulkStatus, onTreeRefresh, onCleanup, cleaning }: TreeViewProps) {
+  const [selectMode, setSelectMode] = useState(false);
+  const [selected, setSelected] = useState<Set<string>>(new Set());
+  const [hideDone, setHideDone] = useState(() => {
+    if (typeof window !== 'undefined') {
+      return localStorage.getItem('im-hide-done') !== 'false';
+    }
+    return true;
+  });
+
+  useEffect(() => {
+    localStorage.setItem('im-hide-done', String(hideDone));
+  }, [hideDone]);
+  const [viewMode, setViewMode] = useState<ViewMode>('card');
+  const [collapseAll, setCollapseAll] = useState(false);
+  const [collapseKey, setCollapseKey] = useState(0);
+
+  const toggleSelect = (id: string) => {
+    setSelected(prev => {
+      const next = new Set(prev);
+      if (next.has(id)) {
+        next.delete(id);
+      } else {
+        next.add(id);
+      }
+      return next;
+    });
+  };
+
+  const handleDeleteSelected = () => {
+    if (selected.size === 0) return;
+    const ids = Array.from(selected);
+    onBulkDelete(ids);
+    setSelected(new Set());
+    setSelectMode(false);
+  };
+
+  const handleDeleteAll = () => {
+    onBulkDelete('all');
+    setSelected(new Set());
+    setSelectMode(false);
+  };
+
+  const handleSelectAll = () => {
+    const allIds = items.flatMap(collectIds);
+    setSelected(new Set(allIds));
+  };
+
+  const totalCount = items.reduce((sum, item) => sum + 1 + countChildren(item), 0);
+  const doneCount = countByStatus(items, 'done');
+  const displayItems = hideDone ? filterDone(items) : items;
+
   return (
     <div className="flex flex-col h-full">
       <div className="flex items-center justify-between px-4 py-2 border-b border-border">
-        <h2 className="text-sm font-medium text-muted-foreground">구조화 뷰</h2>
-        {loading && (
-          <span className="text-xs text-accent animate-pulse">
-            AI 분석 중...
-          </span>
-        )}
+        <div className="flex items-center gap-2">
+          <h2 className="text-sm font-medium text-muted-foreground">구조화 뷰</h2>
+          {totalCount > 0 && (
+            <span className="text-xs text-muted-foreground/60">{totalCount}</span>
+          )}
+          {doneCount > 0 && (
+            <button
+              onClick={() => setHideDone(!hideDone)}
+              className={`text-xs px-1.5 py-0.5 rounded transition-colors ${
+                hideDone
+                  ? 'bg-accent/15 text-accent'
+                  : 'text-muted-foreground/50 hover:text-muted-foreground'
+              }`}
+              title={hideDone ? '완료 항목 표시' : '완료 항목 숨기기'}
+            >
+              {hideDone ? `+${doneCount} 숨김` : `${doneCount} 완료`}
+            </button>
+          )}
+          {loading && (
+            <span className="text-xs text-accent animate-pulse">AI 분석 중...</span>
+          )}
+          {cleaning && !loading && (
+            <span className="text-xs text-muted-foreground animate-pulse">정리 중...</span>
+          )}
+        </div>
+        <div className="flex items-center gap-2">
+          {/* View mode toggle */}
+          <div className="view-toggle">
+            <button
+              onClick={() => setViewMode('card')}
+              className={`view-toggle-btn ${viewMode === 'card' ? 'view-toggle-btn-active' : ''}`}
+            >
+              카드
+            </button>
+            <button
+              onClick={() => setViewMode('tree')}
+              className={`view-toggle-btn ${viewMode === 'tree' ? 'view-toggle-btn-active' : ''}`}
+            >
+              트리
+            </button>
+          </div>
+
+          {items.length > 0 && viewMode === 'tree' && (
+            <div className="flex items-center gap-1">
+              {selectMode ? (
+                <>
+                  <button
+                    onClick={handleSelectAll}
+                    className="text-xs px-2 py-1 text-muted-foreground hover:text-foreground rounded transition-colors"
+                  >
+                    전체선택
+                  </button>
+                  <button
+                    onClick={handleDeleteSelected}
+                    disabled={selected.size === 0}
+                    className="text-xs px-2 py-1 text-destructive hover:bg-destructive/10 rounded transition-colors disabled:opacity-30"
+                  >
+                    선택삭제 ({selected.size})
+                  </button>
+                  <button
+                    onClick={() => { setSelectMode(false); setSelected(new Set()); }}
+                    className="text-xs px-2 py-1 text-muted-foreground hover:text-foreground rounded transition-colors"
+                  >
+                    취소
+                  </button>
+                </>
+              ) : (
+                <>
+                  {onCleanup && (
+                    <button
+                      onClick={onCleanup}
+                      disabled={cleaning || loading}
+                      className="text-xs px-2 py-1 text-accent hover:bg-accent/10 rounded transition-colors disabled:opacity-30"
+                    >
+                      정리
+                    </button>
+                  )}
+                  <button
+                    onClick={() => { setCollapseAll(!collapseAll); setCollapseKey(k => k + 1); }}
+                    className="text-xs px-2 py-1 text-muted-foreground hover:text-foreground rounded transition-colors"
+                    title={collapseAll ? '전체 펼치기' : '전체 접기'}
+                  >
+                    {collapseAll ? '펼치기' : '접기'}
+                  </button>
+                  <button
+                    onClick={() => onBulkStatus('done')}
+                    className="text-xs px-2 py-1 text-success hover:bg-success/10 rounded transition-colors"
+                  >
+                    전체완료
+                  </button>
+                  <button
+                    onClick={() => setSelectMode(true)}
+                    className="text-xs px-2 py-1 text-muted-foreground hover:text-foreground rounded transition-colors"
+                  >
+                    선택
+                  </button>
+                  <button
+                    onClick={handleDeleteAll}
+                    className="text-xs px-2 py-1 text-destructive hover:bg-destructive/10 rounded transition-colors"
+                  >
+                    전체삭제
+                  </button>
+                </>
+              )}
+            </div>
+          )}
+
+          {items.length > 0 && viewMode === 'card' && (
+            <div className="flex items-center gap-1">
+              {onCleanup && (
+                <button
+                  onClick={onCleanup}
+                  disabled={cleaning || loading}
+                  className="text-xs px-2 py-1 text-accent hover:bg-accent/10 rounded transition-colors disabled:opacity-30"
+                >
+                  정리
+                </button>
+              )}
+              <button
+                onClick={() => onBulkStatus('done')}
+                className="text-xs px-2 py-1 text-success hover:bg-success/10 rounded transition-colors"
+              >
+                전체완료
+              </button>
+              <button
+                onClick={handleDeleteAll}
+                className="text-xs px-2 py-1 text-destructive hover:bg-destructive/10 rounded transition-colors"
+              >
+                전체삭제
+              </button>
+            </div>
+          )}
+        </div>
       </div>
 
-      <div className="flex-1 overflow-auto p-2">
-        {items.length === 0 && !loading ? (
-          <div className="flex flex-col items-center justify-center h-full text-muted-foreground text-sm">
-            <div className="text-4xl mb-3">&#x1F5C2;</div>
-            <p className="mb-2">아직 구조화된 항목이 없습니다</p>
-            <p className="text-xs text-center">
-              왼쪽 패널에서 아이디어를 입력해보세요.
-              <br />
-              입력을 멈추면 3초 후 AI가 자동으로 구조화합니다.
-            </p>
+      <div className="flex-1 overflow-auto">
+        {displayItems.length === 0 && !loading ? (
+          <div className="flex flex-col items-center justify-center h-full text-muted-foreground text-sm p-4">
+            {items.length > 0 && hideDone ? (
+              <>
+                <div className="text-4xl mb-3">&#x2705;</div>
+                <p className="mb-2">모든 항목이 완료되었습니다</p>
+                <button
+                  onClick={() => setHideDone(false)}
+                  className="text-xs text-accent hover:underline"
+                >
+                  완료 항목 보기
+                </button>
+              </>
+            ) : (
+              <>
+                <div className="text-4xl mb-3">&#x1F5C2;</div>
+                <p className="mb-2">아직 구조화된 항목이 없습니다</p>
+                <p className="text-xs text-center">
+                  왼쪽 패널에서 아이디어를 입력해보세요.
+                  <br />
+                  입력을 멈추면 3초 후 AI가 자동으로 구조화합니다.
+                </p>
+              </>
+            )}
           </div>
+        ) : viewMode === 'card' ? (
+          <CardView
+            items={displayItems}
+            onItemUpdate={onItemUpdate}
+            onItemDelete={onItemDelete}
+          />
         ) : (
-          items.map((item) => (
-            <TreeNode
-              key={item.id}
-              item={item}
-              depth={0}
-              projectId={projectId}
-              onItemUpdate={onItemUpdate}
-            />
-          ))
+          <div className="p-2">
+            {displayItems.map((item) => (
+              <TreeNode
+                key={`${item.id}-${collapseKey}`}
+                item={item}
+                depth={0}
+                projectId={projectId}
+                onItemUpdate={onItemUpdate}
+                onItemDelete={onItemDelete}
+                onTreeRefresh={onTreeRefresh}
+                selectMode={selectMode}
+                selected={selected}
+                onToggleSelect={toggleSelect}
+                defaultExpanded={!collapseAll}
+              />
+            ))}
+          </div>
         )}
       </div>
     </div>
   );
 }
+
+function countChildren(item: IItemTree): number {
+  return item.children.reduce((sum, child) => sum + 1 + countChildren(child), 0);
+}
+
+function countByStatus(items: IItemTree[], status: string): number {
+  let count = 0;
+  for (const item of items) {
+    if (item.status === status) count++;
+    count += countByStatus(item.children, status);
+  }
+  return count;
+}

package/src/components/ui/ConfirmDialog.tsx

@@ -0,0 +1,88 @@
+'use client';
+
+import { useEffect, useRef, useCallback } from 'react';
+
+interface ConfirmDialogProps {
+  open: boolean;
+  title: string;
+  description?: string;
+  confirmLabel?: string;
+  cancelLabel?: string;
+  variant?: 'danger' | 'default';
+  onConfirm: () => void;
+  onCancel: () => void;
+}
+
+export default function ConfirmDialog({
+  open,
+  title,
+  description,
+  confirmLabel = 'Confirm',
+  cancelLabel = 'Cancel',
+  variant = 'default',
+  onConfirm,
+  onCancel,
+}: ConfirmDialogProps) {
+  const confirmRef = useRef<HTMLButtonElement>(null);
+  const overlayRef = useRef<HTMLDivElement>(null);
+
+  useEffect(() => {
+    if (open) {
+      confirmRef.current?.focus();
+    }
+  }, [open]);
+
+  const handleKeyDown = useCallback((e: KeyboardEvent) => {
+    if (!open) return;
+    if (e.key === 'Escape') onCancel();
+    if (e.key === 'Enter') onConfirm();
+  }, [open, onCancel, onConfirm]);
+
+  useEffect(() => {
+    window.addEventListener('keydown', handleKeyDown);
+    return () => window.removeEventListener('keydown', handleKeyDown);
+  }, [handleKeyDown]);
+
+  if (!open) return null;
+
+  return (
+    <div
+      ref={overlayRef}
+      onClick={(e) => { if (e.target === overlayRef.current) onCancel(); }}
+      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-sm mx-4 animate-dialog-in"
+      >
+        <div className="p-5">
+          <h3 className="text-sm font-semibold text-foreground">{title}</h3>
+          {description && (
+            <p className="text-xs text-muted-foreground mt-1.5 leading-relaxed">{description}</p>
+          )}
+        </div>
+        <div className="flex justify-end gap-2 px-5 pb-4">
+          <button
+            onClick={onCancel}
+            className="px-3 py-1.5 text-xs text-muted-foreground hover:text-foreground
+                       bg-muted hover:bg-card-hover border border-border rounded-md transition-colors"
+          >
+            {cancelLabel}
+          </button>
+          <button
+            ref={confirmRef}
+            onClick={onConfirm}
+            className={`px-3 py-1.5 text-xs text-white rounded-md transition-colors ${
+              variant === 'danger'
+                ? 'bg-destructive hover:bg-destructive/80'
+                : 'bg-primary hover:bg-primary-hover'
+            }`}
+          >
+            {confirmLabel}
+          </button>
+        </div>
+      </div>
+    </div>
+  );
+}

package/src/lib/ai/chat-responder.ts

@@ -2,6 +2,7 @@ import { runStructureWithQuestions, type IStructuredItem } from './client';
 import { replaceItems } from '../db/queries/items';
 import { getRecentConversations, addMessage } from '../db/queries/conversations';
 import { getBrainstorm } from '../db/queries/brainstorms';
+import { getProjectContextSummary } from '../db/queries/context';
 import { resolveMemos, createMemosFromQuestions } from '../db/queries/memos';
 import type { IItemTree, IMemo, IConversation } from '@/types';
 
@@ -29,8 +30,9 @@ export async function handleChatResponse(
     content: h.content,
   }));
 
-  // AI call with updated conversation context
-  const result = await runStructureWithQuestions(brainstorm.content, historyForAi);
+  // AI call with updated conversation context + project docs
+  const projectContext = getProjectContextSummary(projectId) || undefined;
+  const result = await runStructureWithQuestions(brainstorm.content, historyForAi, projectContext);
 
   // Replace items in DB
   const dbItems = mapToDbFormat(result.items as IStructuredItem[]);

package/src/lib/ai/cleanup.ts

@@ -0,0 +1,87 @@
+import { runClaude, extractJson, type IStructuredItem } from './client';
+import { replaceItems, getItemTree } from '../db/queries/items';
+import type { IItemTree } from '@/types';
+
+function serializeItems(items: IItemTree[], depth = 0): string {
+  const lines: string[] = [];
+  for (const item of items) {
+    const indent = '  '.repeat(depth);
+    const status = item.status || 'pending';
+    lines.push(`${indent}- [${item.item_type}/${item.priority}/${status}] ${item.title}: ${item.description || ''}`);
+    if (item.children && item.children.length > 0) {
+      lines.push(serializeItems(item.children, depth + 1));
+    }
+  }
+  return lines.join('\n');
+}
+
+function countItems(items: IItemTree[]): number {
+  let count = 0;
+  for (const item of items) {
+    count++;
+    if (item.children) count += countItems(item.children);
+  }
+  return count;
+}
+
+function mapToDbFormat(items: IStructuredItem[]): Parameters<typeof replaceItems>[2] {
+  return items.map((item) => ({
+    parent_id: null,
+    title: item.title,
+    description: item.description,
+    item_type: item.item_type,
+    priority: item.priority,
+    status: item.status,
+    children: item.children ? mapToDbFormat(item.children) : undefined,
+  }));
+}
+
+export async function cleanupItems(
+  projectId: string,
+  brainstormId: string,
+  items: IItemTree[],
+  brainstormContent: string,
+): Promise<{ items: IItemTree[]; changed: boolean }> {
+  const serialized = serializeItems(items);
+  const beforeCount = countItems(items);
+
+  const prompt = `You are a JSON-only deduplication machine. You NEVER respond with text, explanations, or conversation.
+You ALWAYS output ONLY a raw JSON array, nothing else.
+
+Your job: clean up the structured item tree below by removing duplicates and merging similar items.
+
+Schema per item:
+{ "title": string, "description": string, "item_type": "feature"|"task"|"bug"|"idea"|"note", "priority": "high"|"medium"|"low", "status": "pending"|"in_progress"|"done", "children": [same schema] }
+
+Rules:
+- Output MUST start with [ and end with ]
+- No markdown fences, no explanation, no text before or after the JSON
+- MERGE items that describe the same concept (combine their descriptions, keep the more specific title)
+- REMOVE exact or near-exact duplicates (keep the one with more detail)
+- PRESERVE the status of items — if one copy is "done" and another is "pending", keep "done"
+- PRESERVE the hierarchy — keep parent-child relationships logical
+- Keep titles concise (under 50 chars)
+- Do NOT add new items that weren't in the original
+- Do NOT remove items just because they seem unimportant — only remove TRUE duplicates
+- If the brainstorming context is provided, use it to understand which items are actually the same concept
+
+${brainstormContent ? `사용자의 브레인스토밍 메모:\n${brainstormContent}\n\n` : ''}현재 구조화된 항목 (중복 제거 및 병합하세요):
+${serialized}`;
+
+  const resultText = await runClaude(prompt);
+  const json = extractJson(resultText, 'array');
+  const cleaned = JSON.parse(json) as IStructuredItem[];
+
+  const afterCount = cleaned.reduce((sum, item) => sum + 1 + countStructuredChildren(item), 0);
+  const changed = afterCount !== beforeCount;
+
+  const dbItems = mapToDbFormat(cleaned);
+  const tree = replaceItems(projectId, brainstormId, dbItems);
+
+  return { items: tree, changed };
+}
+
+function countStructuredChildren(item: IStructuredItem): number {
+  if (!item.children) return 0;
+  return item.children.reduce((sum, child) => sum + 1 + countStructuredChildren(child), 0);
+}