feat(HAI-003): replace CreateTaskModal with inline card creation in Todo column

- Create InlineCreateCard component with auto-focused input, dependency
  dropdown, Enter to submit, Escape to cancel
- Update Column to render InlineCreateCard at top of Todo column body
- Update Board to pass through inline-create props to Todo column
- Update App to use isCreating state instead of createModalOpen
- Add CSS styles for inline create card, dependency dropdown
- Delete CreateTaskModal component

packages/dashboard/app/components/Board.tsx

@@ -1,4 +1,4 @@
-import type { Task, TaskDetail, Column as ColumnType } from "@hai/core";
+import type { Task, TaskDetail, TaskCreateInput, Column as ColumnType } from "@hai/core";
 import { COLUMNS } from "@hai/core";
 import { Column } from "./Column";
 import type { ToastType } from "../hooks/useToast";
@@ -9,9 +9,12 @@ interface BoardProps {
   onMoveTask: (id: string, column: ColumnType) => Promise<Task>;
   onOpenDetail: (task: TaskDetail) => void;
   addToast: (message: string, type?: ToastType) => void;
+  isCreating: boolean;
+  onCancelCreate: () => void;
+  onCreateTask: (input: TaskCreateInput) => Promise<Task>;
 }
 
-export function Board({ tasks, maxConcurrent, onMoveTask, onOpenDetail, addToast }: BoardProps) {
+export function Board({ tasks, maxConcurrent, onMoveTask, onOpenDetail, addToast, isCreating, onCancelCreate, onCreateTask }: BoardProps) {
   return (
     <main className="board" id="board">
       {COLUMNS.map((col) => (
@@ -24,6 +27,7 @@ export function Board({ tasks, maxConcurrent, onMoveTask, onOpenDetail, addToast
           onMoveTask={onMoveTask}
           onOpenDetail={onOpenDetail}
           addToast={addToast}
+          {...(col === "todo" ? { isCreating, onCancelCreate, onCreateTask } : {})}
         />
       ))}
     </main>

packages/dashboard/app/components/Column.tsx

@@ -1,8 +1,9 @@
 import { useState, useCallback } from "react";
-import type { Task, TaskDetail, Column as ColumnType } from "@hai/core";
+import type { Task, TaskDetail, TaskCreateInput, Column as ColumnType } from "@hai/core";
 import { COLUMN_LABELS, COLUMN_DESCRIPTIONS } from "@hai/core";
 import { TaskCard } from "./TaskCard";
 import { WorktreeGroup } from "./WorktreeGroup";
+import { InlineCreateCard } from "./InlineCreateCard";
 import { groupByWorktree } from "../utils/worktreeGrouping";
 import type { ToastType } from "../hooks/useToast";
 
@@ -14,9 +15,12 @@ interface ColumnProps {
   onMoveTask: (id: string, column: ColumnType) => Promise<Task>;
   onOpenDetail: (task: TaskDetail) => void;
   addToast: (message: string, type?: ToastType) => void;
+  isCreating?: boolean;
+  onCancelCreate?: () => void;
+  onCreateTask?: (input: TaskCreateInput) => Promise<Task>;
 }
 
-export function Column({ column, tasks, allTasks, maxConcurrent, onMoveTask, onOpenDetail, addToast }: ColumnProps) {
+export function Column({ column, tasks, allTasks, maxConcurrent, onMoveTask, onOpenDetail, addToast, isCreating, onCancelCreate, onCreateTask }: ColumnProps) {
   const [dragOver, setDragOver] = useState(false);
 
   const handleDragOver = useCallback((e: React.DragEvent) => {
@@ -60,6 +64,14 @@ export function Column({ column, tasks, allTasks, maxConcurrent, onMoveTask, onO
       </div>
       <p className="column-desc">{COLUMN_DESCRIPTIONS[column]}</p>
       <div className="column-body">
+        {column === "todo" && isCreating && onCancelCreate && onCreateTask && (
+          <InlineCreateCard
+            tasks={allTasks}
+            onSubmit={onCreateTask}
+            onCancel={onCancelCreate}
+            addToast={addToast}
+          />
+        )}
         {column === "in-progress" ? (
           (() => {
             const groups = groupByWorktree(tasks, allTasks, maxConcurrent);

packages/dashboard/app/components/CreateTaskModal.tsx

@@ -1,120 +0,0 @@
-import { useState, useCallback, useEffect, useRef } from "react";
-import type { Task, TaskCreateInput } from "@hai/core";
-import type { ToastType } from "../hooks/useToast";
-
-interface CreateTaskModalProps {
-  onClose: () => void;
-  onCreateTask: (input: TaskCreateInput) => Promise<Task>;
-  addToast: (message: string, type?: ToastType) => void;
-}
-
-export function CreateTaskModal({ onClose, onCreateTask, addToast }: CreateTaskModalProps) {
-  const [title, setTitle] = useState("");
-  const [description, setDescription] = useState("");
-  const [deps, setDeps] = useState("");
-  const descRef = useRef<HTMLTextAreaElement>(null);
-
-  useEffect(() => {
-    setTimeout(() => descRef.current?.focus(), 100);
-  }, []);
-
-  useEffect(() => {
-    const handleKey = (e: KeyboardEvent) => {
-      if (e.key === "Escape") onClose();
-    };
-    document.addEventListener("keydown", handleKey);
-    return () => document.removeEventListener("keydown", handleKey);
-  }, [onClose]);
-
-  const handleOverlayClick = useCallback(
-    (e: React.MouseEvent) => {
-      if (e.target === e.currentTarget) onClose();
-    },
-    [onClose],
-  );
-
-  const handleSubmit = useCallback(
-    async (e: React.FormEvent) => {
-      e.preventDefault();
-      if (!description.trim()) return;
-
-      const trimmedTitle = title.trim();
-      const dependencies = deps
-        .split(",")
-        .map((s) => s.trim())
-        .filter(Boolean);
-
-      try {
-        const task = await onCreateTask({
-          description: description.trim(),
-          title: trimmedTitle || undefined,
-          dependencies: dependencies.length ? dependencies : undefined,
-        });
-        addToast(`Created ${task.id}`, "success");
-        onClose();
-      } catch (err: any) {
-        addToast(err.message, "error");
-      }
-    },
-    [title, description, deps, onCreateTask, addToast, onClose],
-  );
-
-  return (
-    <div className="modal-overlay open" onClick={handleOverlayClick}>
-      <div className="modal">
-        <div className="modal-header">
-          <h3>New Task</h3>
-          <button className="modal-close" onClick={onClose}>
-            &times;
-          </button>
-        </div>
-        <form onSubmit={handleSubmit}>
-          <div className="form-group">
-            <label htmlFor="task-desc">Description</label>
-            <textarea
-              ref={descRef}
-              id="task-desc"
-              rows={4}
-              placeholder="What needs to be done? Add context, requirements, or rough notes..."
-              required
-              value={description}
-              onChange={(e) => setDescription(e.target.value)}
-            />
-          </div>
-          <div className="form-group">
-            <label htmlFor="task-title">
-              Title <span className="optional">(optional)</span>
-            </label>
-            <input
-              type="text"
-              id="task-title"
-              placeholder="Short summary (auto-generated if empty)"
-              value={title}
-              onChange={(e) => setTitle(e.target.value)}
-            />
-          </div>
-          <div className="form-group">
-            <label htmlFor="task-deps">
-              Dependencies <span className="optional">(comma-separated IDs)</span>
-            </label>
-            <input
-              type="text"
-              id="task-deps"
-              placeholder="HAI-001, HAI-002"
-              value={deps}
-              onChange={(e) => setDeps(e.target.value)}
-            />
-          </div>
-          <div className="modal-actions">
-            <button type="button" className="btn" onClick={onClose}>
-              Cancel
-            </button>
-            <button type="submit" className="btn btn-primary">
-              Create in Triage
-            </button>
-          </div>
-        </form>
-      </div>
-    </div>
-  );
-}

packages/dashboard/app/components/InlineCreateCard.tsx

@@ -0,0 +1,105 @@
+import { useState, useCallback, useEffect, useRef } from "react";
+import type { Task, TaskCreateInput } from "@hai/core";
+import type { ToastType } from "../hooks/useToast";
+
+interface InlineCreateCardProps {
+  tasks: Task[];
+  onSubmit: (input: TaskCreateInput) => Promise<Task>;
+  onCancel: () => void;
+  addToast: (msg: string, type?: ToastType) => void;
+}
+
+export function InlineCreateCard({ tasks, onSubmit, onCancel, addToast }: InlineCreateCardProps) {
+  const [description, setDescription] = useState("");
+  const [dependencies, setDependencies] = useState<string[]>([]);
+  const [showDeps, setShowDeps] = useState(false);
+  const [submitting, setSubmitting] = useState(false);
+  const inputRef = useRef<HTMLInputElement>(null);
+  const cardRef = useRef<HTMLDivElement>(null);
+
+  useEffect(() => {
+    inputRef.current?.focus();
+  }, []);
+
+  const handleKeyDown = useCallback(
+    async (e: React.KeyboardEvent) => {
+      if (e.key === "Escape") {
+        e.preventDefault();
+        onCancel();
+        return;
+      }
+      if (e.key === "Enter" && !e.shiftKey) {
+        e.preventDefault();
+        if (!description.trim() || submitting) return;
+        setSubmitting(true);
+        try {
+          const task = await onSubmit({
+            description: description.trim(),
+            column: "todo",
+            dependencies: dependencies.length ? dependencies : undefined,
+          });
+          addToast(`Created ${task.id}`, "success");
+        } catch (err: any) {
+          addToast(err.message, "error");
+        } finally {
+          setSubmitting(false);
+        }
+      }
+    },
+    [description, dependencies, submitting, onSubmit, onCancel, addToast],
+  );
+
+  const toggleDep = useCallback((id: string) => {
+    setDependencies((prev) =>
+      prev.includes(id) ? prev.filter((d) => d !== id) : [...prev, id],
+    );
+  }, []);
+
+  const truncate = (s: string, len: number) =>
+    s.length > len ? s.slice(0, len) + "…" : s;
+
+  return (
+    <div className="inline-create-card" ref={cardRef}>
+      <input
+        ref={inputRef}
+        type="text"
+        className="inline-create-input"
+        placeholder="What needs to be done?"
+        value={description}
+        onChange={(e) => setDescription(e.target.value)}
+        onKeyDown={handleKeyDown}
+        disabled={submitting}
+      />
+      <div className="inline-create-footer">
+        <div className="dep-trigger-wrap">
+          <button
+            type="button"
+            className="btn btn-sm dep-trigger"
+            onClick={() => setShowDeps((v) => !v)}
+          >
+            ⛓{dependencies.length > 0 ? ` ${dependencies.length} deps` : " Deps"}
+          </button>
+          {showDeps && (
+            <div className="dep-dropdown">
+              {tasks.length === 0 ? (
+                <div className="dep-dropdown-empty">No existing tasks</div>
+              ) : (
+                tasks.map((t) => (
+                  <div
+                    key={t.id}
+                    className={`dep-dropdown-item${dependencies.includes(t.id) ? " selected" : ""}`}
+                    onClick={() => toggleDep(t.id)}
+                  >
+                    <span className="dep-dropdown-id">{t.id}</span>
+                    <span className="dep-dropdown-title">{truncate(t.title, 30)}</span>
+                  </div>
+                ))
+              )}
+            </div>
+          )}
+        </div>
+        <span className="inline-create-hint">Enter to create · Esc to cancel</span>
+      </div>
+    </div>
+  );
+}