byre/web/src/project.ts

import { get, post, type ByreEvent, type Project, type Schemas, type Task } from "./api.js";
import { errorText, h, replace, showAlert } from "./dom.js";
import { markdown } from "./markdown.js";
import { models } from "./task.js";
import { currentSession, findTask, focusedProject, focusTask, on, onEach, state, taskState } from "./state.js";
import { taskStyle } from "./taskcolor.js";

type Todo = Schemas["Todo"];
type TodoItem = Schemas["TodoItem"];

const refreshKinds = new Set(["task.merged", "project.created"]);

export function mountProject(root: HTMLElement): () => void {
  const todos = new Map<string, Todo | string>();
  const starting = new Set<string>();
  let disposed = false;

  const render = () => {
    const scrollTop = root.querySelector(".project-view")?.scrollTop ?? 0;
    const p = focusedProject();
    replace(root, h("div", { class: "project-view" }, p ? projectBlock(p, todos.get(p.id), starting, start) : h("div", { class: "empty" }, "No project selected.")));
    root.querySelector(".project-view")!.scrollTop = scrollTop;
  };

  const load = async (projectId: string) => {
    try {
      const todo = await get("/api/projects/{projectId}/todo", { path: { projectId } });
      todos.set(projectId, todo);
    } catch (err) {
      todos.set(projectId, `Couldn't read TODO.md: ${errorText(err)}`);
    }
    if (!disposed) {
      render();
    }
  };

  const refresh = () => {
    const p = focusedProject();
    if (p) {
      void load(p.id);
    }
  };

  const start = async (project: Project, item: TodoItem, discuss: boolean) => {
    const key = `${project.id}\n${item.title}`;
    starting.add(key);
    render();
    try {
      await post("/api/projects/{projectId}/todo/tasks", { path: { projectId: project.id }, body: { title: item.title, model: models[0], discuss } });
    } catch (err) {
      void showAlert(errorText(err));
    }
    starting.delete(key);
    if (!disposed) {
      render();
    }
  };

  const offs = [
    on("event", (detail?: unknown) => {
      const ev = detail as ByreEvent;
      if (!refreshKinds.has(ev.kind)) {
        return;
      }
      if (ev.project_id) {
        void load(ev.project_id);
      }
    }),
    on("connection", () => {
      if (state.connected) {
        refresh();
      }
    }),
    on("projects", refresh),
    onEach(["focus", "selection"], () => {
      render();
      const p = focusedProject();
      if (p && !todos.has(p.id)) {
        void load(p.id);
      }
    }),
    onEach(["tasks", "sessions", "inbox"], render),
  ];

  render();
  refresh();

  return () => {
    disposed = true;
    for (const off of offs) {
      off();
    }
  };
}

function projectBlock(project: Project, todo: Todo | string | undefined, starting: Set<string>, start: (p: Project, item: TodoItem, discuss: boolean) => Promise<void>): HTMLElement {
  const active = (state.tasks.get(project.id) ?? []).filter((t) => t.status === "active");
  return h(
    "section",
    { class: "project" },
    h("h2", {}, project.name, " ", h("span", { class: "repo" }, project.default_branch)),
    h("h3", {}, "Tasks"),
    tasksBlock(active),
    h("h3", {}, "TODO"),
    ...todoBlock(project, todo, active, starting, start),
  );
}

function nested(active: Task[]): { task: Task; depth: number }[] {
  const ids = new Set(active.map((t) => t.id));
  const out: { task: Task; depth: number }[] = [];
  const add = (task: Task, depth: number) => {
    out.push({ task, depth });
    for (const child of active.filter((t) => t.parent_task_id === task.id).reverse()) {
      add(child, depth + 1);
    }
  };
  for (const task of active.filter((t) => t.parent_task_id === undefined || !ids.has(t.parent_task_id))) {
    add(task, 0);
  }
  return out;
}

function tasksBlock(active: Task[]): HTMLElement {
  if (active.length === 0) {
    return h("p", { class: "empty-row" }, "No active tasks.");
  }
  return h(
    "ul",
    { class: "task-list" },
    ...nested(active).map(({ task, depth }) => {
      const ts = taskState(task);
      const count = state.inbox.filter((item) => item.task_id === task.id).length;
      const classes = [task.id === state.selectedTaskId && "selected", task.parent_task_id !== undefined && "subtask"].filter(Boolean).join(" ");
      return h(
        "li",
        { class: classes, style: `${taskStyle(task.id)}; --depth: ${depth}` },
        h(
          "a",
          {
            href: `#/task/${task.id}`,
            onclick: (e: MouseEvent) => {
              e.preventDefault();
              focusTask(task.id);
            },
          },
          task.parent_task_id !== undefined && h("span", { class: "subtask-mark", title: `Subtask of ${findTask(task.parent_task_id)?.title ?? task.parent_task_id}` }, "↳"),
          h("span", { class: `dot ${ts ?? "none"}`, title: ts ?? "no session" }),
          h("span", { class: "task-title task-name" }, task.title),
          count > 0 && h("span", { class: "badge", title: "inbox items" }, count),
          task.merge_queued_at !== undefined && h("span", { class: "task-state warn", title: "Waiting for the merge in progress in this project to finish" }, "merge held"),
          task.merging_into_parent && h("span", { class: "task-state warn", title: "Waiting for the parent task's agent to merge it" }, "merging into parent"),
          h("span", { class: "task-state" }, ts ?? "no agent"),
        ),
      );
    }),
  );
}

function todoBlock(project: Project, todo: Todo | string | undefined, active: Task[], starting: Set<string>, start: (p: Project, item: TodoItem, discuss: boolean) => Promise<void>): HTMLElement[] {
  if (todo === undefined) {
    return [h("p", { class: "empty-row" }, "Loading…")];
  }
  if (typeof todo === "string") {
    return [h("p", { class: "empty-row error-text" }, todo)];
  }
  if (!todo.exists) {
    return [h("p", { class: "empty-row" }, `No TODO.md on ${project.default_branch}.`)];
  }
  if (todo.items.length === 0) {
    return [h("p", { class: "empty-row" }, "TODO.md has no items.")];
  }

  const children: HTMLElement[] = [];
  let section = "";
  let list: HTMLElement | undefined;
  for (const item of todo.items) {
    if (!list || item.section !== section) {
      section = item.section;
      if (section) {
        children.push(h("h4", { class: "todo-section" }, section));
      }
      list = h("ul", { class: "todo-list" });
      children.push(list);
    }

    const task = active.find((t) => t.todo_item === item.title);
    let action: HTMLElement;
    if (task) {
      const sess = currentSession(task.id);
      action = h(
        "a",
        {
          class: "todo-task",
          href: `#/task/${task.id}`,
          onclick: (e: MouseEvent) => {
            e.preventDefault();
            focusTask(task.id);
          },
        },
        h("span", { class: `dot ${sess?.state ?? "none"}`, title: sess?.state ?? "no session" }),
        sess?.state ?? "no agent",
      );
    } else {
      const busy = starting.has(`${project.id}\n${item.title}`);
      const startButton = h("button", { disabled: busy, title: "Start a task that gets straight to work" }, busy ? "Starting…" : "Start");
      startButton.onclick = () => void start(project, item, false);
      const discussButton = h("button", { disabled: busy, title: "Start a task that discusses it with you in chat before building anything" }, "Discuss");
      discussButton.onclick = () => void start(project, item, true);
      action = h("span", { class: "todo-buttons" }, startButton, discussButton);
    }

    list.append(
      h(
        "li",
        { class: task && task.id === state.selectedTaskId ? "selected" : "", style: task ? taskStyle(task.id) : "" },
        h("div", { class: "todo-head" }, h("span", { class: task ? "todo-title task-name" : "todo-title" }, item.title), action),
        item.body && markdown(item.body, "md todo-body"),
      ),
    );
  }
  return children;
}