hyperhive/frontend/packages/agent/src/components/TodosPanel.tsx

// <TodosPanel> — content rendered inside <SidePanel> for the todos
// flyout. "mark done" POSTs to this agent's own backend
// (`api/todos/mark-done`, same-origin), unlike InboxPanel's cross-agent
// mark-all-read.
import { useState } from "preact/hooks";
import type { TodoRow } from "../types.js";

export interface TodosPanelProps {
  todos: TodoRow[];
  onCleared: () => void;
}

function fmtAge(seconds: number): string {
  if (seconds < 60) return `${seconds}s`;
  if (seconds < 3600) return `${Math.floor(seconds / 60)}m`;
  if (seconds < 86400) return `${Math.floor(seconds / 3600)}h`;
  return `${Math.floor(seconds / 86400)}d`;
}

export function TodosPanel({ todos, onCleared }: TodosPanelProps) {
  const [checked, setChecked] = useState<Set<number>>(new Set());
  const [status, setStatus] = useState("");
  const [busy, setBusy] = useState(false);

  function toggle(id: number) {
    setChecked((prev) => {
      const next = new Set(prev);
      if (next.has(id)) next.delete(id);
      else next.add(id);
      return next;
    });
  }

  async function markDone() {
    const ids = [...checked];
    if (!ids.length) return;
    setBusy(true);
    setStatus("marking…");
    try {
      const resp = await fetch("api/todos/mark-done", {
        method: "POST",
        headers: { "Content-Type": "application/x-www-form-urlencoded" },
        body: `ids=${encodeURIComponent(ids.join(","))}`,
      });
      if (resp.ok) {
        setStatus("✓ marked done");
        setChecked(new Set());
        onCleared();
      } else {
        setStatus(`failed: ${await resp.text()}`);
      }
    } catch (err) {
      setStatus(`failed: ${err instanceof Error ? err.message : String(err)}`);
    } finally {
      setBusy(false);
    }
  }

  if (!todos.length) {
    return (
      <p class="side-panel-empty">no todos — all subsystem queues are clear.</p>
    );
  }

  const allChecked = todos.length > 0 && todos.every((t) => checked.has(t.id));

  return (
    <div class="agent-inbox">
      <div class="inbox-mark-all-row">
        <button
          type="button"
          class="inbox-mark-all-btn"
          onClick={() =>
            setChecked(allChecked ? new Set() : new Set(todos.map((t) => t.id)))
          }
        >
          {allChecked ? "select none" : "select all"}
        </button>
        <button
          type="button"
          class="inbox-mark-all-btn"
          onClick={markDone}
          disabled={busy || checked.size === 0}
        >
          ✓ mark done
        </button>
        <span class="inbox-mark-status">{status}</span>
      </div>
      <ul>
        {todos.map((t) => {
          const cbId = `todo-cb-${t.id}`;
          const label = t.source ? `${t.subsystem} · ${t.source}` : t.subsystem;
          return (
            <li key={t.id}>
              <input
                type="checkbox"
                id={cbId}
                class="todo-cb"
                checked={checked.has(t.id)}
                onChange={() => toggle(t.id)}
              />{" "}
              <label for={cbId} class="inbox-from">
                {label}
              </label>{" "}
              <span class="inbox-ts">{fmtAge(t.age_seconds)} ago</span>
              <div class="inbox-body">{t.summary}</div>
            </li>
          );
        })}
      </ul>
    </div>
  );
}