idea-manager 0.7.6 → 0.7.7

package/README.en.md

@@ -0,0 +1,127 @@
+# IM (Idea Manager)
+
+[한국어](README.md) | **English** | [日本語](README.ja.md) | [中文](README.zh.md)
+
+> From ideas to executable prompts — a multi-project workflow manager
+
+A task management tool for developers juggling multiple projects simultaneously. Organize ideas into sub-projects and tasks, refine prompts for each task, and hand them off to AI agents like Claude Code. With a built-in MCP Server, AI agents can autonomously pick up and execute tasks.
+
+![IM Workspace](docs/screenshot.png)
+
+## Core Workflow
+
+```
+Brainstorming → Organize into Sub-projects/Tasks → Refine Prompts → Execute via MCP
+```
+
+### Hierarchy
+
+```
+Project
+├── Sub-project A
+│   ├── Task 1  →  Prompt
+│   ├── Task 2  →  Prompt
+│   └── Task 3  →  Prompt
+└── Sub-project B
+    ├── Task 4  →  Prompt
+    └── Task 5  →  Prompt
+```
+
+### Task Status Flow
+
+```
+💡 Idea → ✏️ Writing → 🚀 Submitted → 🧪 Testing → ✅ Done
+                                                      🔴 Problem
+```
+
+## Installation
+
+```bash
+npm install -g idea-manager
+```
+
+## Usage
+
+### Start Web UI
+
+```bash
+im start
+```
+
+Opens the web UI at `http://localhost:3456`.
+
+```bash
+# Custom port
+im start -p 4000
+```
+
+### Start MCP Server
+
+```bash
+im mcp
+```
+
+#### Claude Desktop Configuration (claude_desktop_config.json)
+
+```json
+{
+  "mcpServers": {
+    "idea-manager": {
+      "command": "npx",
+      "args": ["-y", "idea-manager", "mcp"]
+    }
+  }
+}
+```
+
+#### Claude Code Configuration
+
+```bash
+claude mcp add idea-manager -- npx -y idea-manager mcp
+```
+
+### MCP Tools
+
+| Tool | Description |
+|------|-------------|
+| `list-projects` | List all projects |
+| `get-project-context` | Get full sub-project + task tree |
+| `get-next-task` | Get next task to execute (status=submitted) |
+| `get-task-prompt` | Get prompt for a specific task |
+| `update-status` | Change task status (idea/writing/submitted/testing/done/problem) |
+| `report-completion` | Report task completion |
+
+## Key Features
+
+- **Tab-based Multi-project** — Open multiple projects in tabs like a browser/IDE, state preserved on tab switch
+- **3-Panel Workspace** — Brainstorming | Project Tree | Task Detail, drag to resize panels
+- **Tree-structured Projects** — Tasks displayed hierarchically under sub-projects
+- **Brainstorming Panel** — Free-form notes, collapsible
+- **Prompt Editor** — Write/edit/copy prompts per task, AI refinement
+- **AI Chat** — Per-task AI conversations to refine prompts
+- **3-Tab Dashboard** — Active / All / Today
+- **Keyboard Shortcuts** — Ctrl+Tab/Ctrl+Shift+Tab for tab navigation, B: toggle brainstorm, N: add sub-project, T: add task, Cmd+1~6: change status
+- **PWA Support** — Install as an app for a standalone window experience
+- **Watch Mode** — Auto-execute submitted tasks via Claude CLI with real-time progress
+- **Built-in MCP Server** — Supports autonomous AI agent execution
+- **Local-first** — SQLite-based, data stored in `~/.idea-manager/`
+
+## Tech Stack
+
+| Area | Technology |
+|------|------------|
+| Frontend | Next.js 15, React 19, TypeScript, Tailwind CSS 4 |
+| Backend | Next.js API Routes |
+| Database | SQLite (better-sqlite3) |
+| AI | Claude CLI (subscription-based, no API key needed) |
+| MCP | Model Context Protocol (stdio) |
+| CLI | Commander.js |
+
+## Requirements
+
+- **Node.js** 18+
+- **Claude CLI** — Required for AI chat/refinement features (Claude subscription needed). Core features like task management and prompt editing work without it.
+
+## License
+
+MIT

package/README.ja.md

@@ -0,0 +1,127 @@
+# IM (Idea Manager)
+
+[한국어](README.md) | [English](README.en.md) | **日本語** | [中文](README.zh.md)
+
+> アイデアから実行可能なプロンプトまで — マルチプロジェクトワークフローマネージャー
+
+複数のプロジェクトを同時に進めるデベロッパー向けのタスク管理ツールです。アイデアをサブプロジェクトとタスクに整理し、各タスクごとにプロンプトを磨いてClaude CodeなどのAIエージェントに渡すことができます。MCP Serverを内蔵しており、AIエージェントが自律的にタスクを取得して実行できます。
+
+![IM Workspace](docs/screenshot.png)
+
+## コアワークフロー
+
+```
+ブレインストーミング → サブプロジェクト/タスクに整理 → プロンプト精製 → MCPでAI実行
+```
+
+### 階層構造
+
+```
+プロジェクト
+├── サブプロジェクト A
+│   ├── タスク 1  →  プロンプト
+│   ├── タスク 2  →  プロンプト
+│   └── タスク 3  →  プロンプト
+└── サブプロジェクト B
+    ├── タスク 4  →  プロンプト
+    └── タスク 5  →  プロンプト
+```
+
+### タスクステータスフロー
+
+```
+💡 Idea → ✏️ Writing → 🚀 Submitted → 🧪 Testing → ✅ Done
+                                                      🔴 Problem
+```
+
+## インストール
+
+```bash
+npm install -g idea-manager
+```
+
+## 使い方
+
+### Web UIの起動
+
+```bash
+im start
+```
+
+`http://localhost:3456`でWeb UIが開きます。
+
+```bash
+# ポート変更
+im start -p 4000
+```
+
+### MCP Serverの起動
+
+```bash
+im mcp
+```
+
+#### Claude Desktop設定 (claude_desktop_config.json)
+
+```json
+{
+  "mcpServers": {
+    "idea-manager": {
+      "command": "npx",
+      "args": ["-y", "idea-manager", "mcp"]
+    }
+  }
+}
+```
+
+#### Claude Code設定
+
+```bash
+claude mcp add idea-manager -- npx -y idea-manager mcp
+```
+
+### MCPツール
+
+| ツール | 説明 |
+|--------|------|
+| `list-projects` | プロジェクト一覧の取得 |
+| `get-project-context` | サブプロジェクト＋タスクツリー全体の取得 |
+| `get-next-task` | 次に実行するタスクとプロンプトの取得（status=submitted） |
+| `get-task-prompt` | 特定タスクのプロンプト取得 |
+| `update-status` | タスクステータスの変更（idea/writing/submitted/testing/done/problem） |
+| `report-completion` | タスク完了の報告 |
+
+## 主な機能
+
+- **タブベースのマルチプロジェクト** — ブラウザ/IDEのように複数プロジェクトをタブで同時に開き、タブ切替時に状態を保持
+- **3パネルワークスペース** — ブレインストーミング | プロジェクトツリー | タスク詳細、パネル間ドラッグでサイズ調整
+- **ツリー型プロジェクト構造** — サブプロジェクト配下にタスクを階層的に表示
+- **ブレインストーミングパネル** — 自由形式メモ、折りたたみ/展開可能
+- **プロンプトエディタ** — タスクごとにプロンプトを作成/編集/コピー、AIによる磨き上げ
+- **AIチャット** — タスクごとのAI対話でプロンプトを具体化
+- **3タブダッシュボード** — 進行中 / 全体 / 今日のタスク
+- **キーボードショートカット** — Ctrl+Tab/Ctrl+Shift+Tabでタブ移動、B: ブレインストーミング切替、N: サブプロジェクト追加、T: タスク追加、Cmd+1~6: ステータス変更
+- **PWA対応** — アプリとしてインストールして独立ウィンドウで使用可能
+- **Watchモード** — submittedタスクをClaude CLIで自動実行、リアルタイム進捗表示
+- **MCP Server内蔵** — AIエージェントの自律実行をサポート
+- **ローカルファースト** — SQLiteベース、データは`~/.idea-manager/`に保存
+
+## 技術スタック
+
+| 領域 | 技術 |
+|------|------|
+| フロントエンド | Next.js 15, React 19, TypeScript, Tailwind CSS 4 |
+| バックエンド | Next.js API Routes |
+| データベース | SQLite (better-sqlite3) |
+| AI | Claude CLI（サブスクリプションベース、APIキー不要） |
+| MCP | Model Context Protocol (stdio) |
+| CLI | Commander.js |
+
+## 必要条件
+
+- **Node.js** 18+
+- **Claude CLI** — AIチャット/磨き上げ機能に必要（Claudeサブスクリプション必要）。なくてもタスク管理やプロンプト作成などの基本機能は正常に動作します。
+
+## ライセンス
+
+MIT

package/README.md

@@ -1,5 +1,7 @@
 # IM (Idea Manager)
 
+**한국어** | [English](README.en.md) | [日本語](README.ja.md) | [中文](README.zh.md)
+
 > 아이디어에서 실행 가능한 프롬프트까지, 멀티 프로젝트 워크플로우 매니저
 
 여러 프로젝트를 동시에 진행하는 개발자를 위한 태스크 관리 도구입니다. 아이디어를 서브 프로젝트와 태스크로 조직화하고, 각 태스크별 프롬프트를 정제하여 Claude Code 등 AI 에이전트에게 전달할 수 있습니다. MCP Server를 내장하고 있어 AI 에이전트가 자율적으로 태스크를 가져가 실행할 수 있습니다.

package/README.zh.md

@@ -0,0 +1,127 @@
+# IM (Idea Manager)
+
+[한국어](README.md) | [English](README.en.md) | [日本語](README.ja.md) | **中文**
+
+> 从创意到可执行提示词 — 多项目工作流管理器
+
+专为同时管理多个项目的开发者设计的任务管理工具。将创意组织成子项目和任务，为每个任务精炼提示词，并交给 Claude Code 等 AI 代理执行。内置 MCP Server，AI 代理可以自主获取并执行任务。
+
+![IM Workspace](docs/screenshot.png)
+
+## 核心工作流
+
+```
+头脑风暴 → 组织成子项目/任务 → 精炼提示词 → 通过 MCP 执行 AI
+```
+
+### 层级结构
+
+```
+项目
+├── 子项目 A
+│   ├── 任务 1  →  提示词
+│   ├── 任务 2  →  提示词
+│   └── 任务 3  →  提示词
+└── 子项目 B
+    ├── 任务 4  →  提示词
+    └── 任务 5  →  提示词
+```
+
+### 任务状态流
+
+```
+💡 Idea → ✏️ Writing → 🚀 Submitted → 🧪 Testing → ✅ Done
+                                                      🔴 Problem
+```
+
+## 安装
+
+```bash
+npm install -g idea-manager
+```
+
+## 使用方法
+
+### 启动 Web UI
+
+```bash
+im start
+```
+
+在 `http://localhost:3456` 打开 Web UI。
+
+```bash
+# 自定义端口
+im start -p 4000
+```
+
+### 启动 MCP Server
+
+```bash
+im mcp
+```
+
+#### Claude Desktop 配置 (claude_desktop_config.json)
+
+```json
+{
+  "mcpServers": {
+    "idea-manager": {
+      "command": "npx",
+      "args": ["-y", "idea-manager", "mcp"]
+    }
+  }
+}
+```
+
+#### Claude Code 配置
+
+```bash
+claude mcp add idea-manager -- npx -y idea-manager mcp
+```
+
+### MCP 工具
+
+| 工具 | 描述 |
+|------|------|
+| `list-projects` | 获取项目列表 |
+| `get-project-context` | 获取完整的子项目+任务树 |
+| `get-next-task` | 获取下一个待执行的任务和提示词（status=submitted） |
+| `get-task-prompt` | 获取指定任务的提示词 |
+| `update-status` | 更改任务状态（idea/writing/submitted/testing/done/problem） |
+| `report-completion` | 报告任务完成 |
+
+## 主要功能
+
+- **标签式多项目** — 像浏览器/IDE一样用标签页同时打开多个项目，切换标签时保持状态
+- **三栏工作区** — 头脑风暴 | 项目树 | 任务详情，拖拽调整面板大小
+- **树形项目结构** — 任务在子项目下层级展示
+- **头脑风暴面板** — 自由格式笔记，可折叠/展开
+- **提示词编辑器** — 按任务编写/编辑/复制提示词，AI 润色
+- **AI 聊天** — 按任务进行 AI 对话以细化提示词
+- **三标签仪表盘** — 进行中 / 全部 / 今日待办
+- **键盘快捷键** — Ctrl+Tab/Ctrl+Shift+Tab 切换标签，B：切换头脑风暴，N：添加子项目，T：添加任务，Cmd+1~6：更改状态
+- **PWA 支持** — 可安装为应用，在独立窗口中使用
+- **Watch 模式** — 通过 Claude CLI 自动执行已提交的任务，实时显示进度
+- **内置 MCP Server** — 支持 AI 代理自主执行
+- **本地优先** — 基于 SQLite，数据存储在 `~/.idea-manager/`
+
+## 技术栈
+
+| 领域 | 技术 |
+|------|------|
+| 前端 | Next.js 15, React 19, TypeScript, Tailwind CSS 4 |
+| 后端 | Next.js API Routes |
+| 数据库 | SQLite (better-sqlite3) |
+| AI | Claude CLI（基于订阅，无需 API 密钥） |
+| MCP | Model Context Protocol (stdio) |
+| CLI | Commander.js |
+
+## 系统要求
+
+- **Node.js** 18+
+- **Claude CLI** — AI 聊天/润色功能需要（需要 Claude 订阅）。即使没有，任务管理和提示词编写等基本功能也可正常使用。
+
+## 许可证
+
+MIT

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "idea-manager",
-  "version": "0.7.6",
+  "version": "0.7.7",
   "description": "AI 기반 브레인스토밍 → 구조화 → 프롬프트 생성 도구. MCP Server 내장.",
   "keywords": [
     "brainstorm",
@@ -39,6 +39,9 @@
   },
   "dependencies": {
     "@anthropic-ai/sdk": "^0.78.0",
+    "@dnd-kit/core": "^6.3.1",
+    "@dnd-kit/sortable": "^10.0.0",
+    "@dnd-kit/utilities": "^3.2.2",
     "@modelcontextprotocol/sdk": "^1.27.1",
     "better-sqlite3": "^12.6.2",
     "commander": "^14.0.3",

package/public/sw.js

@@ -1,27 +1,49 @@
-const CACHE_NAME = 'im-v1';
+const CACHE_NAME = 'im-v3';
 
 self.addEventListener('install', (event) => {
   self.skipWaiting();
 });
 
 self.addEventListener('activate', (event) => {
-  event.waitUntil(clients.claim());
+  event.waitUntil(
+    caches.keys().then((keys) =>
+      Promise.all(keys.filter((k) => k !== CACHE_NAME).map((k) => caches.delete(k)))
+    ).then(() => clients.claim())
+  );
 });
 
 self.addEventListener('fetch', (event) => {
-  // Network-first strategy: always try network, fall back to cache
+  const url = new URL(event.request.url);
+
+  // Skip non-GET and API requests
+  if (event.request.method !== 'GET' || url.pathname.startsWith('/api/')) {
+    return;
+  }
+
+  // Navigation requests — network-first, fallback to cached root
+  if (event.request.mode === 'navigate') {
+    event.respondWith(
+      fetch(event.request).catch(async () => {
+        const cached = await caches.match('/');
+        return cached || new Response('Offline', { status: 503, headers: { 'Content-Type': 'text/html' } });
+      })
+    );
+    return;
+  }
+
+  // Static assets — network-first with cache fallback
   event.respondWith(
     fetch(event.request)
       .then((response) => {
-        // Cache successful GET responses
-        if (event.request.method === 'GET' && response.status === 200) {
+        if (response.status === 200) {
           const clone = response.clone();
-          caches.open(CACHE_NAME).then((cache) => {
-            cache.put(event.request, clone);
-          });
+          caches.open(CACHE_NAME).then((cache) => cache.put(event.request, clone));
         }
         return response;
       })
-      .catch(() => caches.match(event.request))
+      .catch(async () => {
+        const cached = await caches.match(event.request);
+        return cached || new Response('', { status: 404 });
+      })
   );
 });

package/src/app/api/projects/[id]/sub-projects/route.ts

@@ -1,5 +1,5 @@
 import { NextRequest, NextResponse } from 'next/server';
-import { getSubProjectsWithStats, createSubProject } from '@/lib/db/queries/sub-projects';
+import { getSubProjectsWithStats, createSubProject, reorderSubProjects } from '@/lib/db/queries/sub-projects';
 
 export async function GET(
   _request: NextRequest,
@@ -29,3 +29,19 @@ export async function POST(
   });
   return NextResponse.json(sp, { status: 201 });
 }
+
+export async function PUT(
+  request: NextRequest,
+  { params }: { params: Promise<{ id: string }> },
+) {
+  const { id } = await params;
+  const body = await request.json();
+
+  if (!Array.isArray(body.orderedIds)) {
+    return NextResponse.json({ error: 'orderedIds array is required' }, { status: 400 });
+  }
+
+  reorderSubProjects(id, body.orderedIds);
+  const subProjects = getSubProjectsWithStats(id);
+  return NextResponse.json(subProjects);
+}

package/src/components/task/ProjectTree.tsx

@@ -1,6 +1,22 @@
 'use client';
 
 import { useState } from 'react';
+import {
+  DndContext,
+  closestCenter,
+  KeyboardSensor,
+  PointerSensor,
+  useSensor,
+  useSensors,
+  type DragEndEvent,
+} from '@dnd-kit/core';
+import {
+  SortableContext,
+  sortableKeyboardCoordinates,
+  verticalListSortingStrategy,
+  useSortable,
+} from '@dnd-kit/sortable';
+import { CSS } from '@dnd-kit/utilities';
 import type { ITask, ISubProjectWithStats, TaskStatus } from '@/types';
 import { statusIcon } from './StatusFlow';
 
@@ -23,6 +39,7 @@ export default function ProjectTree({
   onStatusChange,
   onTodayToggle,
   onDeleteTask,
+  onReorderSubs,
 }: {
   subProjects: ISubProjectWithStats[];
   tasks: ITask[];
@@ -36,11 +53,31 @@ export default function ProjectTree({
   onStatusChange: (taskId: string, status: TaskStatus) => void;
   onTodayToggle: (taskId: string, isToday: boolean) => void;
   onDeleteTask: (taskId: string) => void;
+  onReorderSubs?: (orderedIds: string[]) => void;
 }) {
   const [collapsedSubs, setCollapsedSubs] = useState<Set<string>>(new Set());
   const [addingTaskFor, setAddingTaskFor] = useState<string | null>(null);
   const [newTaskTitle, setNewTaskTitle] = useState('');
 
+  const sensors = useSensors(
+    useSensor(PointerSensor, { activationConstraint: { distance: 5 } }),
+    useSensor(KeyboardSensor, { coordinateGetter: sortableKeyboardCoordinates }),
+  );
+
+  const handleDragEnd = (event: DragEndEvent) => {
+    const { active, over } = event;
+    if (!over || active.id === over.id || !onReorderSubs) return;
+
+    const oldIndex = subProjects.findIndex(sp => sp.id === active.id);
+    const newIndex = subProjects.findIndex(sp => sp.id === over.id);
+    if (oldIndex === -1 || newIndex === -1) return;
+
+    const newOrder = [...subProjects];
+    const [moved] = newOrder.splice(oldIndex, 1);
+    newOrder.splice(newIndex, 0, moved);
+    onReorderSubs(newOrder.map(sp => sp.id));
+  };
+
   const toggleCollapse = (subId: string) => {
     setCollapsedSubs(prev => {
       const next = new Set(prev);
@@ -79,151 +116,236 @@ export default function ProjectTree({
           </div>
         )}
 
-        {subProjects.map((sp) => {
-          const isSelected = selectedSubId === sp.id;
-          const isCollapsed = collapsedSubs.has(sp.id);
-          const subTasks = isSelected ? tasks : [];
-
-          return (
-            <div key={sp.id} className="mb-0.5">
-              {/* Sub-project node */}
-              <div
-                onClick={() => {
-                  onSelectSub(sp.id);
-                  if (isCollapsed) toggleCollapse(sp.id);
+        <DndContext sensors={sensors} collisionDetection={closestCenter} onDragEnd={handleDragEnd}>
+          <SortableContext items={subProjects.map(sp => sp.id)} strategy={verticalListSortingStrategy}>
+            {subProjects.map((sp) => (
+              <SortableSubProject
+                key={sp.id}
+                sp={sp}
+                isSelected={selectedSubId === sp.id}
+                isCollapsed={collapsedSubs.has(sp.id)}
+                tasks={selectedSubId === sp.id ? tasks : []}
+                selectedTaskId={selectedTaskId}
+                addingTaskFor={addingTaskFor}
+                newTaskTitle={newTaskTitle}
+                onSelectSub={onSelectSub}
+                onSelectTask={onSelectTask}
+                onToggleCollapse={toggleCollapse}
+                onDeleteSub={onDeleteSub}
+                onStatusChange={onStatusChange}
+                onTodayToggle={onTodayToggle}
+                onDeleteTask={onDeleteTask}
+                onAddTask={handleAddTask}
+                onSetAddingTaskFor={setAddingTaskFor}
+                onSetNewTaskTitle={setNewTaskTitle}
+              />
+            ))}
+          </SortableContext>
+        </DndContext>
+      </div>
+    </div>
+  );
+}
+
+function SortableSubProject({
+  sp,
+  isSelected,
+  isCollapsed,
+  tasks: subTasks,
+  selectedTaskId,
+  addingTaskFor,
+  newTaskTitle,
+  onSelectSub,
+  onSelectTask,
+  onToggleCollapse,
+  onDeleteSub,
+  onStatusChange,
+  onTodayToggle,
+  onDeleteTask,
+  onAddTask,
+  onSetAddingTaskFor,
+  onSetNewTaskTitle,
+}: {
+  sp: ISubProjectWithStats;
+  isSelected: boolean;
+  isCollapsed: boolean;
+  tasks: ITask[];
+  selectedTaskId: string | null;
+  addingTaskFor: string | null;
+  newTaskTitle: string;
+  onSelectSub: (subId: string) => void;
+  onSelectTask: (taskId: string) => void;
+  onToggleCollapse: (subId: string) => void;
+  onDeleteSub: (subId: string) => void;
+  onStatusChange: (taskId: string, status: TaskStatus) => void;
+  onTodayToggle: (taskId: string, isToday: boolean) => void;
+  onDeleteTask: (taskId: string) => void;
+  onAddTask: (subId: string) => void;
+  onSetAddingTaskFor: (subId: string | null) => void;
+  onSetNewTaskTitle: (title: string) => void;
+}) {
+  const {
+    attributes,
+    listeners,
+    setNodeRef,
+    transform,
+    transition,
+    isDragging,
+  } = useSortable({ id: sp.id });
+
+  const style = {
+    transform: CSS.Transform.toString(transform),
+    transition,
+    opacity: isDragging ? 0.5 : 1,
+    zIndex: isDragging ? 10 : undefined,
+  };
+
+  return (
+    <div ref={setNodeRef} style={style} className="mb-0.5">
+      {/* Sub-project node */}
+      <div
+        onClick={() => {
+          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
+            ? 'text-foreground'
+            : 'text-muted-foreground hover:text-foreground'
+        }`}
+      >
+        {/* Drag handle */}
+        <span
+          {...attributes}
+          {...listeners}
+          className="w-4 h-4 flex items-center justify-center text-xs text-muted-foreground/40 hover:text-muted-foreground cursor-grab active:cursor-grabbing flex-shrink-0"
+          title="Drag to reorder"
+          onClick={(e) => e.stopPropagation()}
+        >
+          ⠿
+        </span>
+        <button
+          onClick={(e) => { e.stopPropagation(); onToggleCollapse(sp.id); }}
+          className="w-4 h-4 flex items-center justify-center text-xs text-muted-foreground flex-shrink-0"
+        >
+          {isCollapsed ? '\u25B6' : '\u25BC'}
+        </button>
+        <span className={`flex-1 truncate font-medium ${isSelected ? 'text-primary' : ''}`}>
+          {sp.name}
+        </span>
+        <div className="flex items-center gap-1.5">
+          {sp.task_count > 0 && (
+            <span className="text-xs text-muted-foreground tabular-nums">{sp.task_count}</span>
+          )}
+          <button
+            onClick={(e) => { e.stopPropagation(); onDeleteSub(sp.id); }}
+            className="text-muted-foreground hover:text-destructive opacity-0 group-hover:opacity-100 transition-opacity text-xs"
+          >
+            x
+          </button>
+        </div>
+      </div>
+
+      {/* Tasks (children) */}
+      {!isCollapsed && isSelected && (
+        <div className="ml-3 border-l border-border/50">
+          {subTasks.length === 0 && !addingTaskFor && (
+            <div className="text-xs text-muted-foreground py-2 pl-4">
+              No tasks
+            </div>
+          )}
+          {subTasks.map((task) => (
+            <div
+              key={task.id}
+              onClick={() => onSelectTask(task.id)}
+              className={`group/task flex items-center gap-1.5 pl-4 pr-2 py-1.5 cursor-pointer transition-colors text-sm border-l-2 ${
+                selectedTaskId === task.id
+                  ? 'bg-card-hover border-l-primary'
+                  : 'border-l-transparent hover:bg-card-hover/50'
+              }`}
+            >
+              <button
+                onClick={(e) => {
+                  e.stopPropagation();
+                  const nextStatus = getNextStatus(task.status);
+                  onStatusChange(task.id, nextStatus);
                 }}
-                className={`flex items-center gap-1.5 px-2 py-1.5 cursor-pointer transition-colors group text-sm ${
-                  isSelected
-                    ? 'text-foreground'
-                    : 'text-muted-foreground hover:text-foreground'
-                }`}
+                className="flex-shrink-0 text-sm"
+                title={`Status: ${task.status}`}
               >
+                {statusIcon(task.status)}
+              </button>
+              <span className={`tree-priority-dot ${PRIORITY_COLORS[task.priority]}`} />
+              <span className={`flex-1 truncate ${task.status === 'done' ? 'text-muted-foreground line-through' : ''}`}>
+                {task.title}
+              </span>
+              {task.is_today && (
                 <button
-                  onClick={(e) => { e.stopPropagation(); toggleCollapse(sp.id); }}
-                  className="w-4 h-4 flex items-center justify-center text-xs text-muted-foreground flex-shrink-0"
+                  onClick={(e) => { e.stopPropagation(); onTodayToggle(task.id, false); }}
+                  className="text-xs flex-shrink-0 text-primary" title="Remove from today"
                 >
-                  {isCollapsed ? '\u25B6' : '\u25BC'}
+                  *
                 </button>
-                <span className={`flex-1 truncate font-medium ${isSelected ? 'text-primary' : ''}`}>
-                  {sp.name}
-                </span>
-                <div className="flex items-center gap-1.5">
-                  {sp.task_count > 0 && (
-                    <span className="text-xs text-muted-foreground tabular-nums">{sp.task_count}</span>
-                  )}
-                  <button
-                    onClick={(e) => { e.stopPropagation(); onDeleteSub(sp.id); }}
-                    className="text-muted-foreground hover:text-destructive opacity-0 group-hover:opacity-100 transition-opacity text-xs"
-                  >
-                    x
-                  </button>
-                </div>
-              </div>
-
-              {/* Tasks (children) */}
-              {!isCollapsed && isSelected && (
-                <div className="ml-3 border-l border-border/50">
-                  {subTasks.length === 0 && !addingTaskFor && (
-                    <div className="text-xs text-muted-foreground py-2 pl-4">
-                      No tasks
-                    </div>
-                  )}
-                  {subTasks.map((task) => (
-                    <div
-                      key={task.id}
-                      onClick={() => onSelectTask(task.id)}
-                      className={`group/task flex items-center gap-1.5 pl-4 pr-2 py-1.5 cursor-pointer transition-colors text-sm border-l-2 ${
-                        selectedTaskId === task.id
-                          ? 'bg-card-hover border-l-primary'
-                          : 'border-l-transparent hover:bg-card-hover/50'
-                      }`}
-                    >
-                      <button
-                        onClick={(e) => {
-                          e.stopPropagation();
-                          const nextStatus = getNextStatus(task.status);
-                          onStatusChange(task.id, nextStatus);
-                        }}
-                        className="flex-shrink-0 text-sm"
-                        title={`Status: ${task.status}`}
-                      >
-                        {statusIcon(task.status)}
-                      </button>
-                      <span className={`tree-priority-dot ${PRIORITY_COLORS[task.priority]}`} />
-                      <span className={`flex-1 truncate ${task.status === 'done' ? 'text-muted-foreground line-through' : ''}`}>
-                        {task.title}
-                      </span>
-                      {task.is_today && (
-                        <button
-                          onClick={(e) => { e.stopPropagation(); onTodayToggle(task.id, false); }}
-                          className="text-xs flex-shrink-0 text-primary" title="Remove from today"
-                        >
-                          *
-                        </button>
-                      )}
-                      <button
-                        onClick={(e) => {
-                          e.stopPropagation();
-                          onDeleteTask(task.id);
-                        }}
-                        className="flex-shrink-0 text-muted-foreground/0 group-hover/task:text-muted-foreground
-                                   hover:!text-destructive transition-colors text-xs px-0.5"
-                        title="Delete task"
-                      >
-                        ×
-                      </button>
-                    </div>
-                  ))}
-
-                  {/* Add task input */}
-                  {addingTaskFor === sp.id ? (
-                    <div className="pl-4 pr-2 py-1">
-                      <input
-                        type="text"
-                        value={newTaskTitle}
-                        onChange={(e) => setNewTaskTitle(e.target.value)}
-                        onKeyDown={(e) => {
-                          if (e.key === 'Enter') handleAddTask(sp.id);
-                          if (e.key === 'Escape') { setNewTaskTitle(''); setAddingTaskFor(null); }
-                        }}
-                        placeholder="Task title..."
-                        className="w-full bg-input border border-border rounded px-2 py-1 text-sm
-                                   focus:border-primary focus:outline-none text-foreground"
-                        autoFocus
-                      />
-                    </div>
-                  ) : (
-                    <button
-                      data-add-task
-                      onClick={() => { onSelectSub(sp.id); setAddingTaskFor(sp.id); }}
-                      className="pl-4 pr-2 py-1 text-xs text-muted-foreground hover:text-foreground
-                                 transition-colors text-left w-full"
-                    >
-                      + Add task <span className="text-muted-foreground/50 ml-1">T</span>
-                    </button>
-                  )}
-                </div>
               )}
+              <button
+                onClick={(e) => {
+                  e.stopPropagation();
+                  onDeleteTask(task.id);
+                }}
+                className="flex-shrink-0 text-muted-foreground/0 group-hover/task:text-muted-foreground
+                           hover:!text-destructive transition-colors text-xs px-0.5"
+                title="Delete task"
+              >
+                ×
+              </button>
+            </div>
+          ))}
 
-              {/* Show task previews for non-selected sub-projects */}
-              {!isCollapsed && !isSelected && sp.preview_tasks && sp.preview_tasks.length > 0 && (
-                <div className="ml-3 border-l border-border/50">
-                  {sp.preview_tasks.map((pt, i) => (
-                    <div
-                      key={i}
-                      onClick={() => onSelectSub(sp.id)}
-                      className="flex items-center gap-1.5 pl-4 pr-2 py-1 cursor-pointer text-xs text-muted-foreground hover:text-foreground transition-colors"
-                    >
-                      <span className="flex-shrink-0">{statusIcon(pt.status)}</span>
-                      <span className="truncate">{pt.title}</span>
-                    </div>
-                  ))}
-                </div>
-              )}
+          {/* Add task input */}
+          {addingTaskFor === sp.id ? (
+            <div className="pl-4 pr-2 py-1">
+              <input
+                type="text"
+                value={newTaskTitle}
+                onChange={(e) => onSetNewTaskTitle(e.target.value)}
+                onKeyDown={(e) => {
+                  if (e.key === 'Enter') onAddTask(sp.id);
+                  if (e.key === 'Escape') { onSetNewTaskTitle(''); onSetAddingTaskFor(null); }
+                }}
+                placeholder="Task title..."
+                className="w-full bg-input border border-border rounded px-2 py-1 text-sm
+                           focus:border-primary focus:outline-none text-foreground"
+                autoFocus
+              />
             </div>
-          );
-        })}
-      </div>
+          ) : (
+            <button
+              data-add-task
+              onClick={() => { onSelectSub(sp.id); onSetAddingTaskFor(sp.id); }}
+              className="pl-4 pr-2 py-1 text-xs text-muted-foreground hover:text-foreground
+                         transition-colors text-left w-full"
+            >
+              + Add task <span className="text-muted-foreground/50 ml-1">T</span>
+            </button>
+          )}
+        </div>
+      )}
+
+      {/* Show task previews for non-selected sub-projects */}
+      {!isCollapsed && !isSelected && sp.preview_tasks && sp.preview_tasks.length > 0 && (
+        <div className="ml-3 border-l border-border/50">
+          {sp.preview_tasks.map((pt, i) => (
+            <div
+              key={i}
+              onClick={() => onSelectSub(sp.id)}
+              className="flex items-center gap-1.5 pl-4 pr-2 py-1 cursor-pointer text-xs text-muted-foreground hover:text-foreground transition-colors"
+            >
+              <span className="flex-shrink-0">{statusIcon(pt.status)}</span>
+              <span className="truncate">{pt.title}</span>
+            </div>
+          ))}
+        </div>
+      )}
     </div>
   );
 }

package/src/components/task/TaskDetail.tsx

@@ -160,9 +160,9 @@ export default function TaskDetail({
               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-none min-h-[60px]
+                         focus:border-primary focus:outline-none text-foreground resize-y min-h-[60px]
                          leading-relaxed"
-              rows={2}
+              rows={3}
             />
           </div>
 

package/src/components/workspace/WorkspacePanel.tsx

@@ -78,7 +78,7 @@ export default function WorkspacePanel({
     const handleMouseMove = (e: MouseEvent) => {
       if (!draggingRef.current) return;
       const delta = e.clientX - startXRef.current;
-      const newWidth = Math.max(180, Math.min(500, startWidthRef.current + delta));
+      const newWidth = Math.max(180, Math.min(900, startWidthRef.current + delta));
       if (draggingRef.current === 'left') setLeftWidth(newWidth);
       else setCenterWidth(newWidth);
     };
@@ -217,6 +217,20 @@ export default function WorkspacePanel({
     }
   };
 
+  const handleReorderSubs = async (orderedIds: string[]) => {
+    // Optimistic update
+    setSubProjects(prev => {
+      const map = new Map(prev.map(sp => [sp.id, sp]));
+      return orderedIds.map(id => map.get(id)!).filter(Boolean);
+    });
+
+    await fetch(`/api/projects/${id}/sub-projects`, {
+      method: 'PUT',
+      headers: { 'Content-Type': 'application/json' },
+      body: JSON.stringify({ orderedIds }),
+    });
+  };
+
   const handleTaskDelete = (taskId?: string) => {
     const tid = taskId || selectedTaskId;
     if (!tid) return;
@@ -403,7 +417,8 @@ export default function WorkspacePanel({
             onSelectTask={setSelectedTaskId}
             onCreateSub={() => setShowAddSub(true)} onDeleteSub={handleDeleteSubProject}
             onCreateTask={handleCreateTask} onStatusChange={handleTaskStatusChange}
-            onTodayToggle={handleTaskTodayToggle} onDeleteTask={handleTaskDelete} />
+            onTodayToggle={handleTaskTodayToggle} onDeleteTask={handleTaskDelete}
+            onReorderSubs={handleReorderSubs} />
         </div>
 
         <div className="panel-resize-handle" onMouseDown={(e) => handleMouseDown('center', e)}>