import { useCallback, useEffect, useMemo, useRef, useState } from "react";
import { useNavigate, useParams, useSearchParams } from "react-router";
import { Masthead } from "../components/Masthead";
import { useDirective, useDirectives } from "../hooks/useDirectives";
import { useAuth } from "../contexts/AuthContext";
import { useSupervisorQuestions } from "../contexts/SupervisorQuestionsContext";
import { DocumentEditor } from "../components/directives/DocumentEditor";
import { DocumentTaskStream } from "../components/directives/DocumentTaskStream";
import { DirectiveContextMenu } from "../components/directives/DirectiveContextMenu";
import {
  startDirective,
  pauseDirective,
  updateDirective,
  deleteDirective,
  completeDirectiveStep,
  failDirectiveStep,
  skipDirectiveStep,
  stopTask,
  listDirectiveRevisions,
  newDirectiveDraft,
  createDirectivePR,
  advanceDirective,
  cleanupDirective,
  pickUpOrders,
  sendTaskMessage,
  listDirectiveEphemeralTasks,
  createDirectiveTask,
  listOrphanTasks,
} from "../lib/api";
import type {
  DirectiveStatus,
  DirectiveSummary,
  DirectiveWithSteps,
  DirectiveRevision,
  TaskSummary,
} from "../lib/api";

// Status dot color, matching the existing tabular UI's badge palette so the
// document mode feels like a sibling of the existing list, not a foreign UI.
const STATUS_DOT: Record<DirectiveStatus, string> = {
  draft: "bg-[#556677]",
  active: "bg-green-400",
  idle: "bg-yellow-400",
  paused: "bg-orange-400",
  inactive: "bg-[#75aafc]",
  archived: "bg-[#3a4a6a]",
};

// Per-task dot color for the sidebar entries inside a directive folder.
// Matches the StepsBlockNode palette.
const STEP_STATUS_DOT: Record<string, string> = {
  pending: "bg-[#556677]",
  ready: "bg-[#9bc3ff]",
  running: "bg-yellow-400",
  done: "bg-green-400",
  failed: "bg-red-400",
  skipped: "bg-[#3a4a6a]",
};

// =============================================================================
// Sidebar icons (inline SVG, no new deps)
// =============================================================================

function FolderIcon({ open = false }: { open?: boolean }) {
  return (
    <svg
      viewBox="0 0 16 16"
      width={12}
      height={12}
      className="shrink-0"
      aria-hidden
    >
      {open ? (
        <path
          d="M1.5 3.5a1 1 0 0 1 1-1h3.382a1 1 0 0 1 .894.553l.448.894a1 1 0 0 0 .894.553H13.5a1 1 0 0 1 1 1V6H1.5V3.5z M1 6.5h13.382a.5.5 0 0 1 .49.598l-.9 5A.5.5 0 0 1 13.482 12.5H2.518a.5.5 0 0 1-.49-.402l-.9-5A.5.5 0 0 1 1.62 6.5H1z"
          fill="#75aafc"
          opacity="0.85"
        />
      ) : (
        <path
          d="M1.5 4a1 1 0 0 1 1-1h3.382a1 1 0 0 1 .894.553l.448.894a1 1 0 0 0 .894.553H13.5a1 1 0 0 1 1 1V12a1 1 0 0 1-1 1h-11a1 1 0 0 1-1-1V4z"
          fill="#75aafc"
          opacity="0.65"
        />
      )}
    </svg>
  );
}

function FileIcon() {
  return (
    <svg
      viewBox="0 0 16 16"
      width={12}
      height={12}
      className="shrink-0"
      aria-hidden
    >
      <path
        d="M3 1.5h6.293a1 1 0 0 1 .707.293l3 3A1 1 0 0 1 13.293 5.5H13V14a.5.5 0 0 1-.5.5h-9A.5.5 0 0 1 3 14V1.5z"
        fill="none"
        stroke="#9bc3ff"
        strokeWidth="1"
      />
      <path
        d="M9.5 1.5v3h3"
        fill="none"
        stroke="#9bc3ff"
        strokeWidth="1"
      />
    </svg>
  );
}

/** Terminal/prompt icon for orchestrator and step tasks. */
function TaskIcon() {
  return (
    <svg
      viewBox="0 0 16 16"
      width={12}
      height={12}
      className="shrink-0"
      aria-hidden
    >
      <rect x="1.5" y="3" width="13" height="10" rx="1" fill="none" stroke="#9bc3ff" strokeWidth="1" />
      <path d="M3.5 6l2 2-2 2 M7 10h4" stroke="#9bc3ff" strokeWidth="1" fill="none" strokeLinecap="round" />
    </svg>
  );
}

/** Asterisk-on-terminal icon for ephemeral spinoff tasks — visually
    distinct from the plain TaskIcon used for step-spawned execution tasks
    so users can tell at a glance which tasks are part of the DAG vs which
    are user-spun side quests. */
function EphemeralTaskIcon() {
  return (
    <svg
      viewBox="0 0 16 16"
      width={12}
      height={12}
      className="shrink-0"
      aria-hidden
    >
      <rect x="1.5" y="3" width="13" height="10" rx="1" fill="none" stroke="#c084fc" strokeWidth="1" />
      <path d="M3.5 6l2 2-2 2 M7 10h4" stroke="#c084fc" strokeWidth="1" fill="none" strokeLinecap="round" />
      <path d="M11 4l1 1m-1 0l1-1" stroke="#c084fc" strokeWidth="1" fill="none" />
    </svg>
  );
}

/** PR-bracket icon for the completion task. */
function CompletionIcon() {
  return (
    <svg
      viewBox="0 0 16 16"
      width={12}
      height={12}
      className="shrink-0"
      aria-hidden
    >
      <circle cx="4" cy="4" r="1.4" fill="none" stroke="#9bc3ff" strokeWidth="1" />
      <circle cx="4" cy="12" r="1.4" fill="none" stroke="#9bc3ff" strokeWidth="1" />
      <circle cx="12" cy="12" r="1.4" fill="none" stroke="#9bc3ff" strokeWidth="1" />
      <path d="M4 5.4v5.2 M4 12h6.6 M12 4l0 6.6" stroke="#9bc3ff" strokeWidth="1" fill="none" />
    </svg>
  );
}

function PinIcon() {
  return (
    <svg
      viewBox="0 0 16 16"
      width={10}
      height={10}
      className="shrink-0"
      aria-hidden
    >
      <path
        d="M8 1.5l1.6 3.6 3.9.4-2.95 2.7.85 3.9L8 10.2 4.6 12.1l.85-3.9L2.5 5.5l3.9-.4z"
        fill="#75aafc"
        opacity="0.7"
      />
    </svg>
  );
}

/** Tiny chip used for the inline directive-folder hover actions. */
function FolderActionButton({
  children,
  title,
  onClick,
}: {
  children: React.ReactNode;
  title: string;
  onClick: () => void;
}) {
  return (
    <button
      type="button"
      title={title}
      onClick={(e) => {
        e.stopPropagation();
        onClick();
      }}
      className="w-5 h-5 flex items-center justify-center text-[10px] text-[#7788aa] hover:text-white hover:bg-[rgba(117,170,252,0.15)] rounded transition-colors"
    >
      {children}
    </button>
  );
}

function Caret({ open }: { open: boolean }) {
  return (
    <svg
      viewBox="0 0 8 8"
      width={8}
      height={8}
      className={`shrink-0 transition-transform ${open ? "rotate-90" : ""}`}
      aria-hidden
    >
      <path d="M2 1l4 3-4 3z" fill="#7788aa" />
    </svg>
  );
}

// =============================================================================
// Sidebar
// =============================================================================

// =============================================================================
// Task row context menu — sits next to DirectiveContextMenu and offers the
// task-level controls (interrupt for orchestrator/completion, complete/fail/
// skip for step tasks).
// =============================================================================

interface TaskContextMenuProps {
  x: number;
  y: number;
  task: FolderTaskRow;
  onClose: () => void;
  onInterrupt: () => void;
  onComplete?: () => void;
  onFail?: () => void;
  onSkip?: () => void;
  /** Send a freeform message to the running task (same wire as the inline comment box). */
  onSendMessage?: () => void;
  /** Navigate to the standalone task page for full-screen control. */
  onOpenInTaskPage?: () => void;
}

function TaskContextMenu({
  x,
  y,
  task,
  onClose,
  onInterrupt,
  onComplete,
  onFail,
  onSkip,
  onSendMessage,
  onOpenInTaskPage,
}: TaskContextMenuProps) {
  const ref = useRef<HTMLDivElement>(null);

  useEffect(() => {
    const click = (e: MouseEvent) => {
      if (ref.current && !ref.current.contains(e.target as Node)) onClose();
    };
    const key = (e: KeyboardEvent) => {
      if (e.key === "Escape") onClose();
    };
    document.addEventListener("mousedown", click);
    document.addEventListener("keydown", key);
    return () => {
      document.removeEventListener("mousedown", click);
      document.removeEventListener("keydown", key);
    };
  }, [onClose]);

  useEffect(() => {
    if (!ref.current) return;
    const rect = ref.current.getBoundingClientRect();
    if (rect.right > window.innerWidth) ref.current.style.left = `${x - rect.width}px`;
    if (rect.bottom > window.innerHeight) ref.current.style.top = `${y - rect.height}px`;
  }, [x, y]);

  const item =
    "w-full px-3 py-1.5 text-left text-xs font-mono text-[#9bc3ff] hover:bg-[rgba(117,170,252,0.1)] flex items-center gap-2";
  const divider = "border-t border-[rgba(117,170,252,0.2)] my-1";

  // Interrupt is meaningful for live tasks (orchestrator-active or running steps).
  const showInterrupt =
    task.kind === "orchestrator-active" ||
    task.kind === "completion" ||
    task.status === "running";
  // Step lifecycle controls only apply to step tasks.
  const isStep = task.kind === "step";
  const showComplete = isStep && task.status !== "done";
  const showFail = isStep && task.status !== "failed";
  const showSkip = isStep && task.status !== "skipped";

  return (
    <div
      ref={ref}
      className="fixed z-50 bg-[#0a1628] border border-[rgba(117,170,252,0.3)] shadow-lg min-w-[180px]"
      style={{ left: x, top: y }}
    >
      <div className="px-3 py-1.5 text-[10px] font-mono text-[#556677] uppercase border-b border-[rgba(117,170,252,0.2)] truncate max-w-[220px]">
        {task.kind === "orchestrator-active" ? "Orchestrator" : task.kind === "completion" ? "Completion" : task.label}
      </div>
      {showInterrupt && (
        <button
          className={item}
          onClick={() => {
            onInterrupt();
            onClose();
          }}
        >
          <span className="text-amber-300">⏹</span>
          Interrupt
        </button>
      )}
      {(showComplete || showFail || showSkip) && <div className={divider} />}
      {showComplete && (
        <button
          className={item}
          onClick={() => {
            onComplete?.();
            onClose();
          }}
        >
          <span className="text-emerald-400">✓</span>
          Mark complete
        </button>
      )}
      {showFail && (
        <button
          className={item}
          onClick={() => {
            onFail?.();
            onClose();
          }}
        >
          <span className="text-red-400">✗</span>
          Mark failed
        </button>
      )}
      {showSkip && (
        <button
          className={item}
          onClick={() => {
            onSkip?.();
            onClose();
          }}
        >
          <span className="text-[#7788aa]">⤳</span>
          Skip
        </button>
      )}

      {/* Direct task-page actions: send-message and open-in-task-page mirror
          what the standalone /exec/:taskId page exposes. */}
      {(onSendMessage || onOpenInTaskPage) && <div className={divider} />}
      {onSendMessage && (
        <button
          className={item}
          onClick={() => {
            onSendMessage();
            onClose();
          }}
        >
          <span className="text-cyan-300">⌨</span>
          Send message
        </button>
      )}
      {onOpenInTaskPage && (
        <button
          className={item}
          onClick={() => {
            onOpenInTaskPage();
            onClose();
          }}
        >
          <span className="text-[#75aafc]">↗</span>
          Open in task page
        </button>
      )}
    </div>
  );
}

function slugify(title: string, fallback: string): string {
  const slug = title
    .trim()
    .replace(/\s+/g, "-")
    .replace(/[^a-zA-Z0-9._-]/g, "")
    .toLowerCase();
  return slug.length > 0 ? slug : fallback;
}

interface SidebarSelection {
  directiveId: string;
  /** null = the directive's document; otherwise a task id (orchestrator/step). */
  taskId: string | null;
}

/**
 * Per-directive folder. Renders the directive as a collapsible folder whose
 * body is the pinned document entry (always first) followed by a `tasks/`
 * subfolder containing the orchestrator, completion, and step tasks.
 *
 * Status dot lives on the right side only (single-side, per the v2 design).
 * If a directive or task has a pending user question, its icon glows.
 */
function DirectiveFolder({
  directive,
  open,
  onToggle,
  selection,
  onSelect,
  pendingTaskIds,
  hasPendingForDirective,
  onDirectiveContextMenu,
  onTaskContextMenu,
  onCreateTask,
  onQuickAction,
}: {
  directive: DirectiveSummary;
  open: boolean;
  onToggle: () => void;
  selection: SidebarSelection | null;
  onSelect: (sel: SidebarSelection) => void;
  /** Set of task ids that currently have pending user questions. */
  pendingTaskIds: Set<string>;
  /** Whether any pending question is associated with this directive. */
  hasPendingForDirective: boolean;
  onDirectiveContextMenu: (e: React.MouseEvent, d: DirectiveSummary) => void;
  onTaskContextMenu: (e: React.MouseEvent, t: FolderTaskRow, directiveId: string) => void;
  /** Open the inline "+ New task" form for this directive. */
  onCreateTask: (d: DirectiveSummary) => void;
  /** Trigger a quick action (start/pause/PR) on the directive. */
  onQuickAction: (d: DirectiveSummary, action: "start" | "pause" | "pr") => void;
}) {
  const dotColor = STATUS_DOT[directive.status] ?? STATUS_DOT.draft;
  const fileName = `${slugify(directive.title, directive.id.slice(0, 8))}.md`;

  // Lazy fetch full directive (with steps) only when folder is open.
  const { directive: detailed } = useDirective(open ? directive.id : undefined);

  const docSelected =
    selection?.directiveId === directive.id && selection.taskId === null;

  // Ephemeral tasks attached to this directive (no directive_step_id). Fetched
  // lazily when the folder opens; refetched whenever a poll lands on the
  // directive's detail (poll-driven freshness).
  const [ephemeralTasks, setEphemeralTasks] = useState<TaskSummary[]>([]);
  useEffect(() => {
    if (!open) return;
    let cancelled = false;
    listDirectiveEphemeralTasks(directive.id)
      .then((res) => {
        if (!cancelled) setEphemeralTasks(res.tasks);
      })
      .catch((err) => {
        // eslint-disable-next-line no-console
        console.warn("[makima] failed to load ephemeral tasks", err);
      });
    return () => {
      cancelled = true;
    };
  }, [open, directive.id, directive.updatedAt]);

  // Collect the tasks to surface in the folder body.
  const tasks = useMemo(
    () => collectTasks(detailed, directive, ephemeralTasks),
    [detailed, directive, ephemeralTasks],
  );

  const orchestratorRunning = !!directive.orchestratorTaskId;
  // Tasks subfolder open state — independent of the directive folder.
  const [tasksOpen, setTasksOpen] = useState<boolean>(true);
  // Revisions subfolder — collapsed by default since most contracts have
  // no merged history yet.
  const [revisionsOpen, setRevisionsOpen] = useState<boolean>(false);
  const [revisions, setRevisions] = useState<DirectiveRevision[]>([]);
  // Fetch revisions only when the parent folder is open. Re-fetch whenever
  // the directive's pr_url changes so a freshly-raised PR appears.
  useEffect(() => {
    if (!open) return;
    let cancelled = false;
    listDirectiveRevisions(directive.id)
      .then((res) => {
        if (!cancelled) setRevisions(res.revisions);
      })
      .catch((err) => {
        // eslint-disable-next-line no-console
        console.warn("[makima] failed to load revisions", err);
      });
    return () => {
      cancelled = true;
    };
  }, [open, directive.id, directive.prUrl]);

  // Inline action buttons on the folder header — visible on hover (and when
  // the folder is open) so users don't have to right-click to discover the
  // primary directive controls. Mirrors a code-editor sidebar's affordance.
  const showStart =
    directive.status === "draft" ||
    directive.status === "paused" ||
    directive.status === "idle" ||
    directive.status === "inactive";
  const showPause = directive.status === "active";

  return (
    <div className="select-none group/dir">
      <div
        className="w-full flex items-center gap-1.5 pl-3 pr-3 py-1 font-mono text-[11px] text-[#9bc3ff] hover:bg-[rgba(117,170,252,0.05)]"
        onContextMenu={(e) => onDirectiveContextMenu(e, directive)}
      >
        <button
          type="button"
          onClick={onToggle}
          title={directive.title}
          className="flex items-center gap-1.5 flex-1 min-w-0 text-left"
        >
          <Caret open={open} />
          <FolderIcon open={open} />
          <span className="truncate flex-1">{directive.title}</span>
        </button>

        {/* Hover/open-only action chips — discoverable replacement for the
            right-click menu. Right-click still works as a power-user fallback. */}
        <div
          className={`flex items-center gap-0.5 transition-opacity ${
            open
              ? "opacity-100"
              : "opacity-0 group-hover/dir:opacity-100"
          }`}
        >
          {showStart && (
            <FolderActionButton
              title="Start"
              onClick={() => onQuickAction(directive, "start")}
            >
              ▶
            </FolderActionButton>
          )}
          {showPause && (
            <FolderActionButton
              title="Pause"
              onClick={() => onQuickAction(directive, "pause")}
            >
              ❚❚
            </FolderActionButton>
          )}
          {directive.prUrl && (
            <FolderActionButton
              title="Open PR"
              onClick={() =>
                window.open(directive.prUrl ?? "", "_blank", "noreferrer")
              }
            >
              ↗
            </FolderActionButton>
          )}
          <FolderActionButton
            title="New task"
            onClick={() => onCreateTask(directive)}
          >
            ＋
          </FolderActionButton>
        </div>

        {/* Status dot — RIGHT side only. Glows when this directive has a
            pending user question, or pulses when the orchestrator is live. */}
        <StatusDot
          color={dotColor}
          live={orchestratorRunning}
          glow={hasPendingForDirective}
          status={directive.status}
        />
      </div>

      {open && (
        <ul className="py-0.5">
          {/* Pinned document entry — always at the top of the folder. */}
          <li>
            <button
              type="button"
              onClick={() =>
                onSelect({ directiveId: directive.id, taskId: null })
              }
              className={`w-full text-left flex items-center gap-1.5 pl-8 pr-3 py-1 font-mono text-[11px] transition-colors ${
                docSelected
                  ? "bg-[rgba(117,170,252,0.12)] text-white border-l-2 border-[#75aafc]"
                  : "text-[#9bc3ff] hover:bg-[rgba(117,170,252,0.06)] border-l-2 border-transparent"
              }`}
            >
              <PinIcon />
              <FileIcon />
              <span className="truncate flex-1">{fileName}</span>
            </button>
          </li>

          {/* tasks/ subfolder — collapsible, contains orchestrator/completion/steps. */}
          <li>
            <button
              type="button"
              onClick={() => setTasksOpen((p) => !p)}
              className="w-full flex items-center gap-1.5 pl-8 pr-3 py-1 font-mono text-[11px] text-[#9bc3ff] hover:bg-[rgba(117,170,252,0.05)]"
            >
              <Caret open={tasksOpen} />
              <FolderIcon open={tasksOpen} />
              <span className="truncate flex-1 text-left">tasks/</span>
              {tasks.length > 0 && (
                <span className="text-[10px] text-[#556677]">{tasks.length}</span>
              )}
            </button>

            {tasksOpen && (
              <ul className="py-0.5">
                {tasks.length === 0 ? (
                  <li className="pl-14 pr-3 py-1 font-mono text-[10px] text-[#556677]">
                    No tasks yet
                  </li>
                ) : (
                  tasks.map((t) => {
                    const isSelected =
                      selection?.directiveId === directive.id &&
                      selection?.taskId === t.taskId;
                    const tdot = STEP_STATUS_DOT[t.status] ?? STEP_STATUS_DOT.pending;
                    const live =
                      t.status === "running" || t.kind === "orchestrator-active";
                    const glow = pendingTaskIds.has(t.taskId);
                    const Icon =
                      t.kind === "completion"
                        ? CompletionIcon
                        : t.kind === "ephemeral"
                        ? EphemeralTaskIcon
                        : TaskIcon;
                    return (
                      <li key={t.taskId}>
                        <button
                          type="button"
                          onClick={() =>
                            onSelect({
                              directiveId: directive.id,
                              taskId: t.taskId,
                            })
                          }
                          onContextMenu={(e) =>
                            onTaskContextMenu(e, t, directive.id)
                          }
                          title={t.label}
                          className={`w-full text-left flex items-center gap-1.5 pl-14 pr-3 py-1 font-mono text-[11px] transition-colors ${
                            isSelected
                              ? "bg-[rgba(117,170,252,0.12)] text-white border-l-2 border-[#75aafc]"
                              : "text-[#9bc3ff] hover:bg-[rgba(117,170,252,0.06)] border-l-2 border-transparent"
                          }`}
                        >
                          <Icon />
                          <span className="truncate flex-1">{t.label}</span>
                          <StatusDot
                            color={tdot}
                            live={live}
                            glow={glow}
                            status={t.status}
                          />
                        </button>
                      </li>
                    );
                  })
                )}
              </ul>
            )}
          </li>

          {/* revisions/ subfolder — per-PR frozen snapshots of this contract.
              Only rendered when there's at least one revision; otherwise the
              folder body would be a confusing empty placeholder. */}
          {revisions.length > 0 && (
            <li>
              <button
                type="button"
                onClick={() => setRevisionsOpen((p) => !p)}
                className="w-full flex items-center gap-1.5 pl-8 pr-3 py-1 font-mono text-[11px] text-[#9bc3ff] hover:bg-[rgba(117,170,252,0.05)]"
              >
                <Caret open={revisionsOpen} />
                <FolderIcon open={revisionsOpen} />
                <span className="truncate flex-1 text-left">revisions/</span>
                <span className="text-[10px] text-[#556677]">
                  {revisions.length}
                </span>
              </button>

              {revisionsOpen && (
                <ul className="py-0.5">
                  {revisions.map((r) => {
                    const isSelected =
                      selection?.directiveId === directive.id &&
                      selection?.taskId === `revision:${r.id}`;
                    return (
                      <li key={r.id}>
                        <button
                          type="button"
                          onClick={() =>
                            onSelect({
                              directiveId: directive.id,
                              taskId: `revision:${r.id}`,
                            })
                          }
                          title={`v${r.version} · ${r.prState} · ${r.prUrl}`}
                          className={`w-full text-left flex items-center gap-1.5 pl-14 pr-3 py-1 font-mono text-[11px] transition-colors ${
                            isSelected
                              ? "bg-[rgba(117,170,252,0.12)] text-white border-l-2 border-[#75aafc]"
                              : "text-[#9bc3ff] hover:bg-[rgba(117,170,252,0.06)] border-l-2 border-transparent"
                          }`}
                        >
                          <FileIcon />
                          <span className="truncate flex-1">
                            v{r.version}.md
                          </span>
                          <RevisionStateBadge prState={r.prState} />
                        </button>
                      </li>
                    );
                  })}
                </ul>
              )}
            </li>
          )}
        </ul>
      )}
    </div>
  );
}

/**
 * Read-only viewer for a frozen contract revision. We render the markdown as
 * plain pre-formatted text — these are immutable historical records, not
 * places to edit. A header strip shows the PR state and a deep link.
 */
function RevisionViewer({
  directiveId,
  revisionId,
}: {
  directiveId: string;
  revisionId: string;
}) {
  const [revision, setRevision] = useState<DirectiveRevision | null>(null);
  const [loading, setLoading] = useState(true);
  const [error, setError] = useState<string | null>(null);

  useEffect(() => {
    let cancelled = false;
    setLoading(true);
    setError(null);
    listDirectiveRevisions(directiveId)
      .then((res) => {
        if (cancelled) return;
        const found = res.revisions.find((r) => r.id === revisionId) ?? null;
        if (!found) setError("Revision not found");
        setRevision(found);
      })
      .catch((err) => {
        if (cancelled) return;
        setError(err instanceof Error ? err.message : String(err));
      })
      .finally(() => {
        if (!cancelled) setLoading(false);
      });
    return () => {
      cancelled = true;
    };
  }, [directiveId, revisionId]);

  if (loading) {
    return (
      <div className="flex-1 flex items-center justify-center">
        <p className="text-[#556677] font-mono text-[12px]">Loading revision…</p>
      </div>
    );
  }
  if (error || !revision) {
    return (
      <div className="flex-1 flex items-center justify-center">
        <p className="text-red-400 font-mono text-[12px]">
          {error ?? "Revision not found"}
        </p>
      </div>
    );
  }

  return (
    <div className="flex-1 flex flex-col h-full overflow-hidden bg-[#0a1628]">
      <div className="flex-1 overflow-y-auto">
        <div className="max-w-3xl mx-auto px-8 py-10 text-[#dbe7ff]">
          <div className="flex items-center gap-3 mb-1">
            <h1 className="text-[24px] font-medium text-white tracking-tight">
              v{revision.version}
            </h1>
            <RevisionStateBadge prState={revision.prState} />
          </div>
          <p className="text-[10px] font-mono text-[#556677] uppercase tracking-wide mb-1">
            Frozen {new Date(revision.frozenAt).toLocaleString()}
          </p>
          <p className="text-[11px] font-mono text-[#7788aa] mb-8">
            <a
              href={revision.prUrl}
              target="_blank"
              rel="noreferrer"
              className="text-[#75aafc] hover:text-[#9bc3ff] underline"
            >
              {revision.prUrl}
            </a>
          </p>

          {/* Render the frozen markdown as plain pre-formatted text. We
              deliberately do not parse it into rich nodes — the goal is to
              show the historical record exactly as it was at PR time. */}
          <pre className="whitespace-pre-wrap break-words font-mono text-[13px] leading-relaxed text-[#e0eaf8]">
            {revision.content}
          </pre>
        </div>
      </div>
    </div>
  );
}

/** Tiny pill showing the PR state of a revision (open / merged / closed). */
function RevisionStateBadge({ prState }: { prState: string }) {
  const tone =
    prState === "merged"
      ? "text-emerald-300 border-emerald-700/60"
      : prState === "closed"
      ? "text-[#7788aa] border-[#2a3a5a]"
      : "text-amber-300 border-amber-600/40";
  return (
    <span
      className={`text-[9px] font-mono uppercase border rounded px-1 py-0 ${tone}`}
    >
      {prState}
    </span>
  );
}

/**
 * Right-side status indicator. Composes the colored status dot with optional
 * "live" pulse (orchestrator running) and "glow" attention ring (pending user
 * question waiting on a response).
 */
function StatusDot({
  color,
  live,
  glow,
  status,
}: {
  color: string;
  live: boolean;
  glow: boolean;
  status: string;
}) {
  // The glow is a soft amber ring pulsed via box-shadow. Keep it subtle so it
  // doesn't fight the live pulse for attention when both are present.
  const ring = glow
    ? "shadow-[0_0_0_2px_rgba(251,191,36,0.45),0_0_8px_2px_rgba(251,191,36,0.55)] animate-pulse"
    : "";
  const livePulse = live && !glow ? "animate-pulse" : "";
  const title = glow
    ? `${status} — needs response`
    : live
    ? `${status} — running`
    : `status: ${status}`;
  return (
    <span
      className={`inline-block w-2 h-2 rounded-full shrink-0 ${color} ${ring} ${livePulse}`}
      aria-label={title}
      title={title}
    />
  );
}

interface FolderTaskRow {
  taskId: string;
  /** Directive step id for step kinds — needed for complete/fail/skip APIs. */
  stepId: string | null;
  label: string;
  status: string;
  kind: "orchestrator-active" | "completion" | "step" | "ephemeral";
}

function collectTasks(
  detailed: DirectiveWithSteps | null,
  summary: DirectiveSummary,
  ephemeralTasks: TaskSummary[],
): FolderTaskRow[] {
  const rows: FolderTaskRow[] = [];

  // Orchestrator (planner) — surfaces only while it's actively running so
  // the folder is not flooded with stale orchestrator entries.
  const orchestratorId =
    detailed?.orchestratorTaskId ?? summary.orchestratorTaskId ?? null;
  if (orchestratorId) {
    rows.push({
      taskId: orchestratorId,
      stepId: null,
      label: "orchestrator",
      status: "running",
      kind: "orchestrator-active",
    });
  }

  // Completion (PR creation) task.
  const completionId =
    detailed?.completionTaskId ?? summary.completionTaskId ?? null;
  if (completionId) {
    rows.push({
      taskId: completionId,
      stepId: null,
      label: "completion",
      status: "running",
      kind: "completion",
    });
  }

  // Step tasks — only steps that have actually been started have a taskId.
  if (detailed) {
    for (const step of detailed.steps) {
      if (!step.taskId) continue;
      rows.push({
        taskId: step.taskId,
        stepId: step.id,
        label: step.name,
        status: step.status,
        kind: "step",
      });
    }
  }

  // Ephemeral tasks — user-spawned spinoffs not part of the DAG. Surfaced
  // alongside step tasks but with a different icon and the "ephemeral" kind
  // so context menus and the merge button behave correctly.
  for (const t of ephemeralTasks) {
    rows.push({
      taskId: t.id,
      stepId: null,
      label: t.name,
      status: t.status,
      kind: "ephemeral",
    });
  }

  return rows;
}

interface SidebarProps {
  directives: DirectiveSummary[];
  loading: boolean;
  selection: SidebarSelection | null;
  onSelect: (sel: SidebarSelection) => void;
  onDirectiveContextMenu: (e: React.MouseEvent, d: DirectiveSummary) => void;
  onTaskContextMenu: (e: React.MouseEvent, t: FolderTaskRow, directiveId: string) => void;
  /** Open the inline "+ New task" form for this directive. */
  onCreateTask: (d: DirectiveSummary) => void;
  /** Trigger a quick action (start/pause/PR) on the directive. */
  onQuickAction: (d: DirectiveSummary, action: "start" | "pause" | "pr") => void;
  /** Navigate to an orphan (no-directive) task's standalone view. */
  onSelectOrphan: (taskId: string) => void;
}

function DocumentSidebar({
  directives,
  loading,
  selection,
  onSelect,
  onDirectiveContextMenu,
  onTaskContextMenu,
  onCreateTask,
  onQuickAction,
  onSelectOrphan,
}: SidebarProps) {
  // Orphan tasks (no directive) — top-level "tmp/" pseudo-folder. Polled
  // every 5s so newly-spawned standalone tasks appear without a manual
  // refresh.
  const [orphanTasks, setOrphanTasks] = useState<TaskSummary[]>([]);
  useEffect(() => {
    let cancelled = false;
    const load = () => {
      listOrphanTasks()
        .then((res) => {
          if (!cancelled) setOrphanTasks(res.tasks);
        })
        .catch(() => {
          /* swallow — tmp/ is a nice-to-have, never blocking */
        });
    };
    load();
    const interval = setInterval(load, 5000);
    return () => {
      cancelled = true;
      clearInterval(interval);
    };
  }, []);
  const [tmpOpen, setTmpOpen] = useState<boolean>(true);
  // Pending user questions — drives the "glow" attention ring. We split into
  // two indices so the directive folder header glows whenever ANY of its
  // tasks has a pending question, while individual task rows glow only for
  // their own question.
  const { pendingQuestions } = useSupervisorQuestions();
  const { directivesWithPending, tasksWithPending } = useMemo(() => {
    const dirs = new Set<string>();
    const tasks = new Set<string>();
    for (const q of pendingQuestions) {
      if (q.directiveId) dirs.add(q.directiveId);
      if (q.taskId) tasks.add(q.taskId);
    }
    return { directivesWithPending: dirs, tasksWithPending: tasks };
  }, [pendingQuestions]);

  // Sort active first, then idle, then paused, then drafts, then inactive
  // (shipped contracts are quieter), then archived.
  const sorted = useMemo(() => {
    const order: Record<DirectiveStatus, number> = {
      active: 0,
      paused: 1,
      idle: 2,
      draft: 3,
      inactive: 4,
      archived: 5,
    };
    return [...directives].sort((a, b) => {
      const oa = order[a.status] ?? 99;
      const ob = order[b.status] ?? 99;
      if (oa !== ob) return oa - ob;
      return a.title.localeCompare(b.title, undefined, { sensitivity: "base" });
    });
  }, [directives]);

  // Track which directive folders are open. The currently selected directive
  // is forced open so deep links land on something visible.
  const [openIds, setOpenIds] = useState<Set<string>>(new Set());
  const lastSelectedRef = useRef<string | null>(null);
  useEffect(() => {
    if (selection && selection.directiveId !== lastSelectedRef.current) {
      lastSelectedRef.current = selection.directiveId;
      setOpenIds((prev) => {
        if (prev.has(selection.directiveId)) return prev;
        const next = new Set(prev);
        next.add(selection.directiveId);
        return next;
      });
    }
  }, [selection]);

  const toggleOpen = useCallback((id: string) => {
    setOpenIds((prev) => {
      const next = new Set(prev);
      if (next.has(id)) next.delete(id);
      else next.add(id);
      return next;
    });
  }, []);

  return (
    <div className="flex flex-col h-full">
      {/* Sidebar header */}
      <div className="flex items-center justify-between px-3 py-2 border-b border-dashed border-[rgba(117,170,252,0.2)]">
        <span className="text-[11px] font-mono text-[#9bc3ff] uppercase tracking-wide">
          Contracts
        </span>
        <span className="text-[10px] font-mono text-[#556677]">
          {directives.length}
        </span>
      </div>

      {/* Top-level "contracts/" folder header (informational, non-interactive). */}
      <div className="flex items-center gap-1.5 px-3 py-1.5 text-[11px] font-mono text-[#9bc3ff]">
        <FolderIcon open />
        <span>contracts/</span>
      </div>

      {/* Body */}
      <div className="flex-1 overflow-y-auto pb-4">
        {/* tmp/ pseudo-folder — orphan tasks (directive_id NULL). Always
            rendered so users can create scratchpad tasks even when zero
            directives exist; collapses to a thin header when empty. */}
        <div className="select-none border-b border-dashed border-[rgba(117,170,252,0.1)] pb-1 mb-1">
          <button
            type="button"
            onClick={() => setTmpOpen((p) => !p)}
            className="w-full flex items-center gap-1.5 pl-3 pr-3 py-1 font-mono text-[11px] text-[#9bc3ff] hover:bg-[rgba(117,170,252,0.05)]"
          >
            <Caret open={tmpOpen} />
            <FolderIcon open={tmpOpen} />
            <span className="truncate flex-1 text-left text-[#7788aa]">tmp/</span>
            <span className="text-[10px] text-[#556677]">
              {orphanTasks.length}
            </span>
          </button>
          {tmpOpen && (
            <ul className="py-0.5">
              {orphanTasks.length === 0 ? (
                <li className="pl-8 pr-3 py-1 font-mono text-[10px] text-[#556677] italic">
                  No orphan tasks
                </li>
              ) : (
                orphanTasks.map((t) => {
                  const tdot =
                    STEP_STATUS_DOT[t.status] ?? STEP_STATUS_DOT.pending;
                  const live = t.status === "running";
                  return (
                    <li key={t.id}>
                      <button
                        type="button"
                        onClick={() => onSelectOrphan(t.id)}
                        title={t.name}
                        className="w-full text-left flex items-center gap-1.5 pl-8 pr-3 py-1 font-mono text-[11px] text-[#9bc3ff] hover:bg-[rgba(117,170,252,0.06)] border-l-2 border-transparent transition-colors"
                      >
                        <TaskIcon />
                        <span className="truncate flex-1">{t.name}</span>
                        <StatusDot
                          color={tdot}
                          live={live}
                          glow={false}
                          status={t.status}
                        />
                      </button>
                    </li>
                  );
                })
              )}
            </ul>
          )}
        </div>

        {loading && directives.length === 0 ? (
          <div className="px-3 py-6 text-center text-[#556677] font-mono text-[11px]">
            Loading...
          </div>
        ) : directives.length === 0 ? (
          <div className="px-3 py-6 text-center text-[#556677] font-mono text-[11px]">
            No contracts yet
          </div>
        ) : (
          sorted.map((d) => (
            <DirectiveFolder
              key={d.id}
              directive={d}
              open={openIds.has(d.id)}
              onToggle={() => toggleOpen(d.id)}
              selection={selection}
              onSelect={onSelect}
              pendingTaskIds={tasksWithPending}
              hasPendingForDirective={directivesWithPending.has(d.id)}
              onDirectiveContextMenu={onDirectiveContextMenu}
              onTaskContextMenu={onTaskContextMenu}
              onCreateTask={onCreateTask}
              onQuickAction={onQuickAction}
            />
          ))
        )}
      </div>
    </div>
  );
}

// =============================================================================
// Editor shell — wraps DocumentEditor and handles the "no document selected"
// and loading states.
// =============================================================================

/**
 * Wraps DocumentTaskStream with ephemeral-aware metadata. Determines whether
 * the selected task is part of the directive's DAG (orchestrator/completion/
 * steps) or an ephemeral spinoff, and looks up its current status from the
 * ephemeral list — that decides whether the "Merge to base" affordance
 * should appear in the stream's action header.
 */
function EphemeralAwareTaskStream({
  taskId,
  label,
  directive,
}: {
  taskId: string;
  label: string;
  directive: DirectiveWithSteps;
}) {
  const isStepBound =
    taskId === directive.orchestratorTaskId ||
    taskId === directive.completionTaskId ||
    directive.steps.some((s) => s.taskId === taskId);

  // Status lookup for ephemeral tasks. We poll the ephemeral list lazily —
  // this is a lightweight call and only triggers when the user is viewing a
  // task in the editor pane.
  const [ephemeralStatus, setEphemeralStatus] = useState<string | undefined>();
  useEffect(() => {
    if (isStepBound) return;
    let cancelled = false;
    const load = () => {
      listDirectiveEphemeralTasks(directive.id)
        .then((res) => {
          if (cancelled) return;
          const match = res.tasks.find((t) => t.id === taskId);
          setEphemeralStatus(match?.status);
        })
        .catch(() => {
          /* non-blocking */
        });
    };
    load();
    const interval = setInterval(load, 5000);
    return () => {
      cancelled = true;
      clearInterval(interval);
    };
  }, [taskId, directive.id, isStepBound]);

  return (
    <DocumentTaskStream
      taskId={taskId}
      label={label}
      ephemeral={!isStepBound}
      status={ephemeralStatus}
    />
  );
}

interface EditorShellProps {
  selectedId: string | undefined;
  selectedTaskId: string | null;
  hasDirectives: boolean;
  listLoading: boolean;
  onClearTask: () => void;
}

function EditorShell({
  selectedId,
  selectedTaskId,
  hasDirectives,
  listLoading,
  onClearTask,
}: EditorShellProps) {
  const {
    directive,
    loading,
    updateGoal,
    cleanup,
    createPR,
    pickUpOrders,
  } = useDirective(selectedId);

  if (!selectedId) {
    return (
      <div className="flex-1 flex items-center justify-center h-full">
        <p className="text-[#556677] font-mono text-[12px]">
          {listLoading
            ? "Loading contracts..."
            : hasDirectives
            ? "Select a contract from the sidebar"
            : "No contracts yet — create one from the legacy UI"}
        </p>
      </div>
    );
  }

  if (loading && !directive) {
    return (
      <div className="flex-1 flex items-center justify-center h-full">
        <p className="text-[#556677] font-mono text-[12px]">Loading contract...</p>
      </div>
    );
  }

  if (!directive) {
    return (
      <div className="flex-1 flex items-center justify-center h-full">
        <p className="text-[#7788aa] font-mono text-[12px]">Contract not found</p>
      </div>
    );
  }

  // The "task" param can encode either a real task id, or a revision via the
  // `revision:<uuid>` prefix. Split that out so the right pane can switch
  // between the live task stream and the read-only revision viewer.
  const revisionId =
    selectedTaskId && selectedTaskId.startsWith("revision:")
      ? selectedTaskId.slice("revision:".length)
      : null;
  const realTaskId = revisionId ? null : selectedTaskId;

  // Resolve the label for the breadcrumb when a task is selected.
  const taskLabel = realTaskId
    ? realTaskId === directive.orchestratorTaskId
      ? "orchestrator"
      : realTaskId === directive.completionTaskId
      ? "completion"
      : directive.steps.find((s) => s.taskId === realTaskId)?.name ??
        realTaskId.slice(0, 8)
    : revisionId
    ? "revision"
    : null;

  // "Now executing" strip — surfaces what's live when looking at the
  // contract editor, so users don't have to scan the sidebar to find it.
  const liveTask = (() => {
    if (selectedTaskId) return null; // already viewing a task; strip is redundant
    if (directive.orchestratorTaskId) {
      return { id: directive.orchestratorTaskId, name: "orchestrator" };
    }
    if (directive.completionTaskId) {
      return { id: directive.completionTaskId, name: "completion" };
    }
    const runningStep = directive.steps.find((s) => s.status === "running");
    if (runningStep && runningStep.taskId) {
      return { id: runningStep.taskId, name: runningStep.name };
    }
    return null;
  })();

  return (
    <div className="flex-1 flex flex-col h-full overflow-hidden">
      {/* Contract header — breadcrumb-like, mirrors a code editor's tab bar */}
      <div className="px-6 py-3 border-b border-dashed border-[rgba(117,170,252,0.2)]">
        <div className="flex items-center gap-2 text-[10px] font-mono uppercase tracking-wide text-[#7788aa]">
          <FileIcon />
          <span>contracts /</span>
          <span className="text-[#9bc3ff]">{directive.id.slice(0, 8)}</span>
          {selectedTaskId && (
            <>
              <span>/</span>
              <span className="text-[#9bc3ff]">{taskLabel}</span>
              <button
                type="button"
                onClick={onClearTask}
                className="ml-2 px-1.5 py-0.5 text-[#7788aa] hover:text-white border border-[#2a3a5a] rounded normal-case"
              >
                back to contract
              </button>
            </>
          )}
        </div>
      </div>

      {/* Now-executing strip — only when viewing the contract doc itself.
          Click to jump into the live task transcript. */}
      {liveTask && (
        <button
          type="button"
          onClick={() =>
            // Navigate via the search-param so EditorShell switches to the
            // task stream for this live task.
            (window.location.search = `?task=${liveTask.id}`)
          }
          className="shrink-0 flex items-center gap-2 px-6 py-1.5 bg-amber-900/15 border-b border-amber-700/40 text-amber-300 font-mono text-[11px] hover:bg-amber-900/30 transition-colors"
        >
          <span className="inline-block w-1.5 h-1.5 rounded-full bg-amber-400 animate-pulse" />
          <span className="uppercase tracking-wide text-[10px]">Now executing</span>
          <span className="text-[#dbe7ff]">{liveTask.name}</span>
          <span className="ml-auto text-[10px] text-amber-200/70">
            click to view transcript ↗
          </span>
        </button>
      )}

      {revisionId ? (
        <RevisionViewer directiveId={directive.id} revisionId={revisionId} />
      ) : realTaskId ? (
        <EphemeralAwareTaskStream
          taskId={realTaskId}
          label={taskLabel ?? realTaskId.slice(0, 8)}
          directive={directive}
        />
      ) : (
        <DocumentEditor
          directive={directive}
          onUpdateGoal={async (goal) => {
            await updateGoal(goal);
          }}
          onCleanup={async () => {
            await cleanup();
          }}
          onCreatePR={async () => {
            await createPR();
          }}
          onPickUpOrders={async () => {
            await pickUpOrders();
          }}
        />
      )}
    </div>
  );
}

// =============================================================================
// Page
// =============================================================================

type ContextMenuState =
  | { kind: "directive"; x: number; y: number; directive: DirectiveSummary }
  | {
      kind: "task";
      x: number;
      y: number;
      task: FolderTaskRow;
      directiveId: string;
    }
  | null;

export default function DocumentDirectivesPage() {
  const { isAuthenticated, isAuthConfigured, isLoading: authLoading } = useAuth();
  const navigate = useNavigate();
  const { id: selectedId } = useParams<{ id: string }>();
  const [searchParams, setSearchParams] = useSearchParams();
  const selectedTaskId = searchParams.get("task");
  const { directives, loading: listLoading, refresh: refreshList } = useDirectives();
  const [contextMenu, setContextMenu] = useState<ContextMenuState>(null);

  useEffect(() => {
    if (!authLoading && isAuthConfigured && !isAuthenticated) {
      navigate("/login");
    }
  }, [authLoading, isAuthConfigured, isAuthenticated, navigate]);

  const onSelect = useCallback(
    (sel: SidebarSelection) => {
      const next = `/directives/${sel.directiveId}${
        sel.taskId ? `?task=${sel.taskId}` : ""
      }`;
      navigate(next);
    },
    [navigate],
  );

  const onClearTask = useCallback(() => {
    const next = new URLSearchParams(searchParams);
    next.delete("task");
    setSearchParams(next, { replace: true });
  }, [searchParams, setSearchParams]);

  const onDirectiveContextMenu = useCallback(
    (e: React.MouseEvent, d: DirectiveSummary) => {
      e.preventDefault();
      e.stopPropagation();
      setContextMenu({ kind: "directive", x: e.clientX, y: e.clientY, directive: d });
    },
    [],
  );

  const onTaskContextMenu = useCallback(
    (e: React.MouseEvent, task: FolderTaskRow, directiveId: string) => {
      e.preventDefault();
      e.stopPropagation();
      setContextMenu({ kind: "task", x: e.clientX, y: e.clientY, task, directiveId });
    },
    [],
  );

  const closeContextMenu = useCallback(() => setContextMenu(null), []);

  // Inline "+ New task" form state. When set, we render a small modal-ish
  // overlay anchored to the directive folder; submitting calls the
  // ephemeral-task endpoint.
  const [newTaskFor, setNewTaskFor] = useState<DirectiveSummary | null>(null);

  const onCreateTask = useCallback((d: DirectiveSummary) => {
    setNewTaskFor(d);
  }, []);

  const handleSubmitNewTask = useCallback(
    async (name: string, plan: string) => {
      if (!newTaskFor) return;
      try {
        const task = await createDirectiveTask(newTaskFor.id, { name, plan });
        // Navigate the user into the freshly-spawned task's transcript.
        navigate(`/directives/${newTaskFor.id}?task=${task.id}`);
        setNewTaskFor(null);
      } catch (err) {
        // eslint-disable-next-line no-console
        console.error("[makima] failed to create ephemeral task", err);
        alert(
          err instanceof Error
            ? `Failed to create task: ${err.message}`
            : "Failed to create task",
        );
      }
    },
    [newTaskFor, navigate],
  );

  const onQuickAction = useCallback(
    async (d: DirectiveSummary, action: "start" | "pause" | "pr") => {
      try {
        if (action === "start") {
          await startDirective(d.id);
        } else if (action === "pause") {
          await pauseDirective(d.id);
        } else if (action === "pr") {
          await createDirectivePR(d.id);
        }
        await refreshList();
      } catch (err) {
        // eslint-disable-next-line no-console
        console.error(`[makima] quick action ${action} failed`, err);
      }
    },
    [refreshList],
  );

  const onSelectOrphan = useCallback(
    (taskId: string) => {
      navigate(`/tmp/${taskId}`);
    },
    [navigate],
  );

  if (authLoading) {
    return (
      <div className="relative z-10 min-h-screen flex flex-col bg-[#0a1628]">
        <Masthead showNav />
        <main className="flex-1 flex items-center justify-center">
          <p className="text-[#7788aa] font-mono text-sm">Loading...</p>
        </main>
      </div>
    );
  }

  const selection: SidebarSelection | null = selectedId
    ? { directiveId: selectedId, taskId: selectedTaskId }
    : null;

  return (
    // h-screen + overflow-hidden so the page itself never scrolls; the
    // sidebar and editor pane each manage their own scroll via flex-1
    // children with overflow-y-auto. Previously we set
    // height: calc(100vh - 80px) on <main>, which assumed an 80px masthead
    // and quietly clipped content when the masthead was taller (or pushed
    // the page below the viewport on shorter screens, which made the
    // whole page scroll instead of the sidebar/editor independently).
    <div className="relative z-10 h-screen flex flex-col bg-[#0a1628] overflow-hidden">
      <Masthead showNav />
      <main className="flex-1 flex min-h-0 overflow-hidden">
        {/* Left: file-tree sidebar — independent scroll. */}
        <div className="w-[260px] shrink-0 border-r border-dashed border-[rgba(117,170,252,0.2)] overflow-hidden flex flex-col bg-[#091428]">
          <DocumentSidebar
            directives={directives}
            loading={listLoading}
            selection={selection}
            onSelect={onSelect}
            onDirectiveContextMenu={onDirectiveContextMenu}
            onTaskContextMenu={onTaskContextMenu}
            onCreateTask={onCreateTask}
            onQuickAction={onQuickAction}
            onSelectOrphan={onSelectOrphan}
          />
        </div>

        {/* Right: Lexical editor / task stream */}
        <EditorShell
          selectedId={selectedId}
          selectedTaskId={selectedTaskId}
          hasDirectives={directives.length > 0}
          listLoading={listLoading}
          onClearTask={onClearTask}
        />
      </main>

      {/* Context menus — rendered at page level so they overlay everything. */}
      {contextMenu?.kind === "directive" && (
        <DirectiveContextMenu
          x={contextMenu.x}
          y={contextMenu.y}
          directive={contextMenu.directive}
          onClose={closeContextMenu}
          onStart={async () => {
            await startDirective(contextMenu.directive.id);
            await refreshList();
          }}
          onPause={async () => {
            await pauseDirective(contextMenu.directive.id);
            await refreshList();
          }}
          onArchive={async () => {
            await updateDirective(contextMenu.directive.id, {
              status: "archived",
            });
            await refreshList();
          }}
          onDelete={async () => {
            if (
              !window.confirm(
                `Delete "${contextMenu.directive.title}"? This cannot be undone.`,
              )
            ) {
              return;
            }
            await deleteDirective(contextMenu.directive.id);
            await refreshList();
            // If the deleted one was selected, clear selection.
            if (selectedId === contextMenu.directive.id) {
              navigate("/directives");
            }
          }}
          onGoToPR={() => {
            if (contextMenu.directive.prUrl) {
              window.open(contextMenu.directive.prUrl, "_blank", "noreferrer");
            }
          }}
          onNewDraft={async () => {
            await newDirectiveDraft(contextMenu.directive.id);
            await refreshList();
            // Send the user into the freshly-cleared contract so they can
            // start typing the next iteration immediately.
            navigate(`/directives/${contextMenu.directive.id}`);
          }}
          onCreatePR={async () => {
            await createDirectivePR(contextMenu.directive.id);
            await refreshList();
          }}
          onAdvance={async () => {
            await advanceDirective(contextMenu.directive.id);
            await refreshList();
          }}
          onCleanup={async () => {
            await cleanupDirective(contextMenu.directive.id);
            await refreshList();
          }}
          onPickUpOrders={async () => {
            await pickUpOrders(contextMenu.directive.id);
            await refreshList();
          }}
        />
      )}
      {contextMenu?.kind === "task" && (
        <TaskContextMenu
          x={contextMenu.x}
          y={contextMenu.y}
          task={contextMenu.task}
          onClose={closeContextMenu}
          onInterrupt={async () => {
            try {
              await stopTask(contextMenu.task.taskId);
            } catch (err) {
              // eslint-disable-next-line no-console
              console.error("[makima] failed to interrupt task", err);
            }
            await refreshList();
          }}
          onComplete={async () => {
            if (!contextMenu.task.stepId) return;
            await completeDirectiveStep(
              contextMenu.directiveId,
              contextMenu.task.stepId,
            );
            await refreshList();
          }}
          onFail={async () => {
            if (!contextMenu.task.stepId) return;
            await failDirectiveStep(
              contextMenu.directiveId,
              contextMenu.task.stepId,
            );
            await refreshList();
          }}
          onSkip={async () => {
            if (!contextMenu.task.stepId) return;
            await skipDirectiveStep(
              contextMenu.directiveId,
              contextMenu.task.stepId,
            );
            await refreshList();
          }}
          onSendMessage={async () => {
            // Browser prompt is the lightest-weight surface that doesn't
            // require redesigning a modal. The same comment box is also
            // available below the live transcript when the task is selected.
            const message = window.prompt("Send message to task:");
            if (!message || !message.trim()) return;
            try {
              await sendTaskMessage(contextMenu.task.taskId, message.trim());
            } catch (err) {
              // eslint-disable-next-line no-console
              console.error("[makima] failed to send task message", err);
            }
          }}
          onOpenInTaskPage={() => {
            // The standalone /exec/:taskId page has the full task UI with
            // worktree diff viewer, checkpoint controls, etc.
            navigate(`/exec/${contextMenu.task.taskId}`);
          }}
        />
      )}

      {newTaskFor && (
        <NewTaskModal
          directive={newTaskFor}
          onClose={() => setNewTaskFor(null)}
          onSubmit={handleSubmitNewTask}
        />
      )}
    </div>
  );
}

/**
 * Inline "+ New task" form for spawning an ephemeral task under a
 * directive. Surfaced as a centered modal, dismissible with Esc / click-out.
 */
function NewTaskModal({
  directive,
  onClose,
  onSubmit,
}: {
  directive: DirectiveSummary;
  onClose: () => void;
  onSubmit: (name: string, plan: string) => Promise<void>;
}) {
  const [name, setName] = useState("");
  const [plan, setPlan] = useState("");
  const [submitting, setSubmitting] = useState(false);
  const nameRef = useRef<HTMLInputElement>(null);

  useEffect(() => {
    nameRef.current?.focus();
    const onKey = (e: KeyboardEvent) => {
      if (e.key === "Escape") onClose();
    };
    document.addEventListener("keydown", onKey);
    return () => document.removeEventListener("keydown", onKey);
  }, [onClose]);

  const submit = async (e: React.FormEvent) => {
    e.preventDefault();
    const trimmedName = name.trim();
    const trimmedPlan = plan.trim();
    if (!trimmedName || !trimmedPlan || submitting) return;
    setSubmitting(true);
    try {
      await onSubmit(trimmedName, trimmedPlan);
    } finally {
      setSubmitting(false);
    }
  };

  return (
    <div
      className="fixed inset-0 z-50 flex items-center justify-center bg-black/60"
      onClick={onClose}
    >
      <form
        onSubmit={submit}
        onClick={(e) => e.stopPropagation()}
        className="w-[480px] max-w-[90vw] bg-[#0a1628] border border-[rgba(117,170,252,0.4)] shadow-xl flex flex-col"
      >
        <div className="px-4 py-3 border-b border-dashed border-[rgba(117,170,252,0.25)]">
          <p className="text-[10px] font-mono text-[#556677] uppercase tracking-wide">
            New task in
          </p>
          <p className="text-[12px] font-mono text-white truncate">
            {directive.title}
          </p>
        </div>
        <div className="px-4 py-4 space-y-3">
          <div className="space-y-1">
            <label className="text-[10px] font-mono text-[#7788aa] uppercase tracking-wide">
              Name
            </label>
            <input
              ref={nameRef}
              type="text"
              value={name}
              onChange={(e) => setName(e.target.value)}
              placeholder="e.g. Investigate flaky test in auth.test.ts"
              className="w-full bg-transparent border border-[rgba(117,170,252,0.2)] focus:border-[#75aafc] outline-none px-3 py-2 text-[13px] text-[#dbe7ff] placeholder-[#445566]"
            />
          </div>
          <div className="space-y-1">
            <label className="text-[10px] font-mono text-[#7788aa] uppercase tracking-wide">
              Plan / instructions
            </label>
            <textarea
              value={plan}
              onChange={(e) => setPlan(e.target.value)}
              onKeyDown={(e) => {
                if ((e.metaKey || e.ctrlKey) && e.key === "Enter") {
                  void submit(e as unknown as React.FormEvent);
                }
              }}
              rows={5}
              placeholder="What should the task do?"
              className="w-full bg-transparent border border-[rgba(117,170,252,0.2)] focus:border-[#75aafc] outline-none px-3 py-2 text-[13px] text-[#dbe7ff] placeholder-[#445566] resize-none"
            />
          </div>
        </div>
        <div className="px-4 py-3 border-t border-dashed border-[rgba(117,170,252,0.25)] flex items-center justify-end gap-2">
          <button
            type="button"
            onClick={onClose}
            className="px-3 py-1.5 text-[11px] font-mono uppercase tracking-wide text-[#7788aa] border border-[#2a3a5a] hover:text-white"
          >
            Cancel
          </button>
          <button
            type="submit"
            disabled={!name.trim() || !plan.trim() || submitting}
            className="px-3 py-1.5 text-[11px] font-mono uppercase tracking-wide text-emerald-300 border border-emerald-700/60 hover:border-emerald-400 disabled:opacity-40 disabled:cursor-not-allowed"
          >
            {submitting ? "Creating…" : "Spawn task"}
          </button>
        </div>
      </form>
    </div>
  );
}