@hiroleague/taskmanager 0.0.2 → 0.0.4

package/src/client/api/useBoardIndexStream.ts

@@ -0,0 +1,35 @@
+import { useEffect } from "react";
+import { useQueryClient } from "@tanstack/react-query";
+import { devDirectApiOrigin } from "./devDirectApiOrigin";
+import { boardKeys } from "./queries";
+
+/** Shell-wide SSE: `GET /api/events` without boardId — keep sidebar board list in sync with CLI/agent writes. */
+function boardIndexEventsUrl(): string {
+  const path = "/api/events";
+  if (import.meta.env.PROD) return path;
+  const raw = import.meta.env.VITE_API_ORIGIN as string | undefined;
+  const fallbackOrigin = devDirectApiOrigin();
+  const origin =
+    raw && raw.length > 0 ? raw.replace(/\/$/, "") : fallbackOrigin;
+  return `${origin}${path}`;
+}
+
+export function useBoardIndexStream(): void {
+  const qc = useQueryClient();
+
+  useEffect(() => {
+    const es = new EventSource(boardIndexEventsUrl(), {
+      withCredentials: true,
+    });
+
+    const onIndexChanged = () => {
+      void qc.invalidateQueries({ queryKey: boardKeys.all, exact: true });
+    };
+
+    es.addEventListener("board-index-changed", onIndexChanged);
+    return () => {
+      es.removeEventListener("board-index-changed", onIndexChanged);
+      es.close();
+    };
+  }, [qc]);
+}

package/src/client/components/board/BoardStatsChips.tsx

@@ -1,233 +1,233 @@
-import NumberFlow, {
-  continuous,
-  useCanAnimate,
-} from "@number-flow/react";
-import { useLayoutEffect, useRef, useState } from "react";
-import type { TaskCountStat } from "../../../shared/boardStats";
-import { cn } from "@/lib/utils";
-
-/** Low-saturation chip fills so T/O/C read as soft status tints, not full banners. */
-const chipBoardT =
-  "border-border/60 bg-muted/55 text-foreground dark:border-border/50 dark:bg-muted/45";
-/** O = non-closed tasks — orange tint with readable opacity (avoid washed-out / red-looking tints). */
-const chipBoardO =
-  "border-orange-500/45 bg-orange-500/68 text-orange-950 dark:border-orange-400/50 dark:text-orange-50";
-const chipBoardC =
-  "border-emerald-600/35 bg-emerald-600/68 text-emerald-950 dark:border-emerald-500/40 dark:text-emerald-100";
-
-const chipBoardL =
-  "border-border/60 bg-muted/55 text-foreground dark:border-border/50 dark:bg-muted/45";
-
-const chipListT =
-  "border-border/50 bg-muted/35 text-foreground dark:bg-muted/30";
-const chipListO =
-  "border-orange-500/38 bg-orange-500/60 text-orange-950 dark:border-orange-400/42 dark:text-orange-50";
-const chipListC =
-  "border-emerald-600/18 bg-emerald-600/50 text-emerald-950 dark:border-emerald-500/18 dark:text-emerald-100";
-
-const STATS_FLOW_TIMING = {
-  spinTiming: {
-    duration: 450,
-    easing: "cubic-bezier(0.22, 1, 0.36, 1)",
-  } as const,
-  transformTiming: {
-    duration: 400,
-    easing: "cubic-bezier(0.22, 1, 0.36, 1)",
-  } as const,
-  opacityTiming: {
-    duration: 220,
-    easing: "ease-out",
-  } as const,
-};
-
-function StatChip({
-  label,
-  value,
-  className,
-  showSpinner,
-  entryToken,
-  valueTitle,
-}: {
-  label: "T" | "O" | "C" | "L";
-  value: number;
-  className?: string;
-  showSpinner: boolean;
-  entryToken: number;
-  /** Exposed to assistive tech — full word, not shown as chip text. */
-  valueTitle: string;
-}) {
-  const canAnimate = useCanAnimate();
-  const [flowValue, setFlowValue] = useState(() => (showSpinner ? 0 : value));
-  const prevShowSpinner = useRef(showSpinner);
-  const prevEntryToken = useRef(entryToken);
-
-  // After the loading spinner hides, run 0 → value once so NumberFlow performs an entry count.
-  // useLayoutEffect avoids one painted frame at the old count before resetting to 0.
-  // When the stats are merely revealed from hidden state, `entryToken` provides the same one-shot
-  // 0 → value path even if TanStack Query already has cached numbers and skips the spinner.
-  // When the spinner is off and `value` changes (filters, refetch without spinner), sync directly.
-  useLayoutEffect(() => {
-    if (showSpinner) {
-      prevShowSpinner.current = true;
-      return;
-    }
-    if (prevShowSpinner.current) {
-      prevShowSpinner.current = false;
-      setFlowValue(0);
-      let raf1 = 0;
-      let raf2 = 0;
-      raf1 = requestAnimationFrame(() => {
-        raf2 = requestAnimationFrame(() => setFlowValue(value));
-      });
-      return () => {
-        cancelAnimationFrame(raf1);
-        cancelAnimationFrame(raf2);
-      };
-    }
-    if (entryToken !== prevEntryToken.current) {
-      prevEntryToken.current = entryToken;
-      setFlowValue(0);
-      let raf1 = 0;
-      let raf2 = 0;
-      raf1 = requestAnimationFrame(() => {
-        raf2 = requestAnimationFrame(() => setFlowValue(value));
-      });
-      return () => {
-        cancelAnimationFrame(raf1);
-        cancelAnimationFrame(raf2);
-      };
-    }
-    setFlowValue(value);
-  }, [entryToken, showSpinner, value]);
-
-  return (
-    <span
-      className={cn(
-        "inline-flex min-w-[2.25rem] items-center justify-center gap-1 rounded-md border px-2 py-0.5 text-xs font-semibold tabular-nums shadow-sm",
-        className,
-      )}
-      title={valueTitle}
-    >
-      <span aria-hidden className="opacity-90">
-        {label}
-      </span>
-      {showSpinner ? (
-        // css-loaders.com/dots — styles: `index.css` → `.board-stats-dots-loader`
-        <div
-          className="board-stats-dots-loader shrink-0"
-          aria-hidden
-        />
-      ) : (
-        // @number-flow/react: flowValue drives both entry (0→n after spinner) and later updates.
-        <span
-          className="inline-flex min-w-[1.25rem] justify-end [font-variant-numeric:tabular-nums]"
-          aria-label={`${valueTitle}: ${value}`}
-        >
-          <NumberFlow
-            value={flowValue}
-            plugins={[continuous]}
-            animated={canAnimate}
-            className="leading-none"
-            {...STATS_FLOW_TIMING}
-            willChange
-          />
-        </span>
-      )}
-    </span>
-  );
-}
-
-export function BoardStatsChipsRow({
-  stats,
-  listCount,
-  showSpinner,
-  entryToken,
-}: {
-  stats: TaskCountStat;
-  /** Structural count of lists on the board (not affected by task filters). */
-  listCount: number;
-  showSpinner: boolean;
-  entryToken: number;
-}) {
-  return (
-    <div
-      className="inline-flex flex-wrap items-center gap-1.5"
-      aria-label="Task counts for current filters"
-    >
-      <StatChip
-        label="L"
-        value={listCount}
-        showSpinner={false}
-        entryToken={entryToken}
-        valueTitle="Lists on this board"
-        className={chipBoardL}
-      />
-      <StatChip
-        label="T"
-        value={stats.total}
-        showSpinner={showSpinner}
-        entryToken={entryToken}
-        valueTitle="Total tasks"
-        className={chipBoardT}
-      />
-      <StatChip
-        label="O"
-        value={stats.open}
-        showSpinner={showSpinner}
-        entryToken={entryToken}
-        valueTitle="Open / in-progress tasks"
-        className={chipBoardO}
-      />
-      <StatChip
-        label="C"
-        value={stats.closed}
-        showSpinner={showSpinner}
-        entryToken={entryToken}
-        valueTitle="Closed tasks"
-        className={chipBoardC}
-      />
-    </div>
-  );
-}
-
-export function ListStatsChipsRow({
-  stats,
-  showSpinner,
-  entryToken,
-}: {
-  stats: TaskCountStat;
-  showSpinner: boolean;
-  entryToken: number;
-}) {
-  return (
-    <div
-      className="flex items-center justify-center gap-1 border-b border-border/60 bg-muted/40 px-2 py-1"
-      aria-label="List task counts"
-    >
-      <StatChip
-        label="T"
-        value={stats.total}
-        showSpinner={showSpinner}
-        entryToken={entryToken}
-        valueTitle="Total tasks in this list"
-        className={chipListT}
-      />
-      <StatChip
-        label="O"
-        value={stats.open}
-        showSpinner={showSpinner}
-        entryToken={entryToken}
-        valueTitle="Open / in-progress tasks in this list"
-        className={chipListO}
-      />
-      <StatChip
-        label="C"
-        value={stats.closed}
-        showSpinner={showSpinner}
-        entryToken={entryToken}
-        valueTitle="Closed tasks in this list"
-        className={chipListC}
-      />
-    </div>
-  );
-}
+import NumberFlow, {
+  continuous,
+  useCanAnimate,
+} from "@number-flow/react";
+import { useLayoutEffect, useRef, useState } from "react";
+import type { TaskCountStat } from "../../../shared/boardStats";
+import { cn } from "@/lib/utils";
+
+/** Low-saturation chip fills so T/O/C read as soft status tints, not full banners. */
+const chipBoardT =
+  "border-border/60 bg-muted/55 text-foreground dark:border-border/50 dark:bg-muted/45";
+/** O = non-closed tasks — orange tint with readable opacity (avoid washed-out / red-looking tints). */
+const chipBoardO =
+  "border-orange-500/45 bg-orange-500/68 text-orange-950 dark:border-orange-400/50 dark:text-orange-50";
+const chipBoardC =
+  "border-emerald-600/35 bg-emerald-600/68 text-emerald-950 dark:border-emerald-500/40 dark:text-emerald-100";
+
+const chipBoardL =
+  "border-border/60 bg-muted/55 text-foreground dark:border-border/50 dark:bg-muted/45";
+
+const chipListT =
+  "border-border/50 bg-muted/35 text-foreground dark:bg-muted/30";
+const chipListO =
+  "border-orange-500/38 bg-orange-500/60 text-orange-950 dark:border-orange-400/42 dark:text-orange-50";
+const chipListC =
+  "border-emerald-600/18 bg-emerald-600/50 text-emerald-950 dark:border-emerald-500/18 dark:text-emerald-100";
+
+const STATS_FLOW_TIMING = {
+  spinTiming: {
+    duration: 450,
+    easing: "cubic-bezier(0.22, 1, 0.36, 1)",
+  } as const,
+  transformTiming: {
+    duration: 400,
+    easing: "cubic-bezier(0.22, 1, 0.36, 1)",
+  } as const,
+  opacityTiming: {
+    duration: 220,
+    easing: "ease-out",
+  } as const,
+};
+
+function StatChip({
+  label,
+  value,
+  className,
+  showSpinner,
+  entryToken,
+  valueTitle,
+}: {
+  label: "T" | "O" | "C" | "L";
+  value: number;
+  className?: string;
+  showSpinner: boolean;
+  entryToken: number;
+  /** Exposed to assistive tech — full word, not shown as chip text. */
+  valueTitle: string;
+}) {
+  const canAnimate = useCanAnimate();
+  const [flowValue, setFlowValue] = useState(() => (showSpinner ? 0 : value));
+  const prevShowSpinner = useRef(showSpinner);
+  const prevEntryToken = useRef(entryToken);
+
+  // After the loading spinner hides, run 0 → value once so NumberFlow performs an entry count.
+  // useLayoutEffect avoids one painted frame at the old count before resetting to 0.
+  // When the stats are merely revealed from hidden state, `entryToken` provides the same one-shot
+  // 0 → value path even if TanStack Query already has cached numbers and skips the spinner.
+  // When the spinner is off and `value` changes (filters, refetch without spinner), sync directly.
+  useLayoutEffect(() => {
+    if (showSpinner) {
+      prevShowSpinner.current = true;
+      return;
+    }
+    if (prevShowSpinner.current) {
+      prevShowSpinner.current = false;
+      setFlowValue(0);
+      let raf1 = 0;
+      let raf2 = 0;
+      raf1 = requestAnimationFrame(() => {
+        raf2 = requestAnimationFrame(() => setFlowValue(value));
+      });
+      return () => {
+        cancelAnimationFrame(raf1);
+        cancelAnimationFrame(raf2);
+      };
+    }
+    if (entryToken !== prevEntryToken.current) {
+      prevEntryToken.current = entryToken;
+      setFlowValue(0);
+      let raf1 = 0;
+      let raf2 = 0;
+      raf1 = requestAnimationFrame(() => {
+        raf2 = requestAnimationFrame(() => setFlowValue(value));
+      });
+      return () => {
+        cancelAnimationFrame(raf1);
+        cancelAnimationFrame(raf2);
+      };
+    }
+    setFlowValue(value);
+  }, [entryToken, showSpinner, value]);
+
+  return (
+    <span
+      className={cn(
+        "inline-flex min-w-[2.25rem] items-center justify-center gap-1 rounded-md border px-2 py-0.5 text-xs font-semibold tabular-nums shadow-sm",
+        className,
+      )}
+      title={valueTitle}
+    >
+      <span aria-hidden className="opacity-90">
+        {label}
+      </span>
+      {showSpinner ? (
+        // css-loaders.com/dots — styles: `index.css` → `.board-stats-dots-loader`
+        <div
+          className="board-stats-dots-loader shrink-0"
+          aria-hidden
+        />
+      ) : (
+        // @number-flow/react: flowValue drives both entry (0→n after spinner) and later updates.
+        <span
+          className="inline-flex min-w-[1.25rem] justify-end [font-variant-numeric:tabular-nums]"
+          aria-label={`${valueTitle}: ${value}`}
+        >
+          <NumberFlow
+            value={flowValue}
+            plugins={[continuous]}
+            animated={canAnimate}
+            className="leading-none"
+            {...STATS_FLOW_TIMING}
+            willChange
+          />
+        </span>
+      )}
+    </span>
+  );
+}
+
+export function BoardStatsChipsRow({
+  stats,
+  listCount,
+  showSpinner,
+  entryToken,
+}: {
+  stats: TaskCountStat;
+  /** Structural count of lists on the board (not affected by task filters). */
+  listCount: number;
+  showSpinner: boolean;
+  entryToken: number;
+}) {
+  return (
+    <div
+      className="inline-flex flex-wrap items-center gap-1.5"
+      aria-label="Task counts for current filters"
+    >
+      <StatChip
+        label="L"
+        value={listCount}
+        showSpinner={false}
+        entryToken={entryToken}
+        valueTitle="Lists on this board"
+        className={chipBoardL}
+      />
+      <StatChip
+        label="T"
+        value={stats.total}
+        showSpinner={showSpinner}
+        entryToken={entryToken}
+        valueTitle="Total tasks"
+        className={chipBoardT}
+      />
+      <StatChip
+        label="O"
+        value={stats.open}
+        showSpinner={showSpinner}
+        entryToken={entryToken}
+        valueTitle="Open / in-progress tasks"
+        className={chipBoardO}
+      />
+      <StatChip
+        label="C"
+        value={stats.closed}
+        showSpinner={showSpinner}
+        entryToken={entryToken}
+        valueTitle="Closed tasks"
+        className={chipBoardC}
+      />
+    </div>
+  );
+}
+
+export function ListStatsChipsRow({
+  stats,
+  showSpinner,
+  entryToken,
+}: {
+  stats: TaskCountStat;
+  showSpinner: boolean;
+  entryToken: number;
+}) {
+  return (
+    <div
+      className="flex items-center justify-center gap-1 border-b border-border/60 bg-muted/40 px-2 py-1"
+      aria-label="List task counts"
+    >
+      <StatChip
+        label="T"
+        value={stats.total}
+        showSpinner={showSpinner}
+        entryToken={entryToken}
+        valueTitle="Total tasks in this list"
+        className={chipListT}
+      />
+      <StatChip
+        label="O"
+        value={stats.open}
+        showSpinner={showSpinner}
+        entryToken={entryToken}
+        valueTitle="Open / in-progress tasks in this list"
+        className={chipListO}
+      />
+      <StatChip
+        label="C"
+        value={stats.closed}
+        showSpinner={showSpinner}
+        entryToken={entryToken}
+        valueTitle="Closed tasks in this list"
+        className={chipListC}
+      />
+    </div>
+  );
+}

package/src/client/components/board/BoardStatsContext.tsx

@@ -1,41 +1,41 @@
-import { createContext, useContext, type ReactNode } from "react";
-import type { TaskCountStat } from "../../../shared/boardStats";
-
-export interface BoardStatsDisplayValue {
-  /** Board-level T/O/C when stats are enabled and loaded (or placeholder). */
-  board: TaskCountStat | null;
-  listStat(listId: number): TaskCountStat;
-  /** Increments when stats visibility turns on so chips can run one-shot entry motion. */
-  entryToken: number;
-  /** True while fetching (including background refresh after filter change). */
-  fetching: boolean;
-  /** True on first load with no cached placeholder. */
-  pending: boolean;
-  /** Show spinner inside chips (initial load or stale placeholder during refetch). */
-  showChipSpinner: boolean;
-  /** True when the stats request failed; avoid showing misleading zero chips. */
-  statsError: boolean;
-}
-
-const BoardStatsDisplayContext = createContext<BoardStatsDisplayValue | null>(
-  null,
-);
-
-export function BoardStatsDisplayProvider({
-  value,
-  children,
-}: {
-  value: BoardStatsDisplayValue;
-  children: ReactNode;
-}) {
-  return (
-    <BoardStatsDisplayContext.Provider value={value}>
-      {children}
-    </BoardStatsDisplayContext.Provider>
-  );
-}
-
-/** List columns read per-list stats; returns null when stats are hidden or unavailable. */
-export function useBoardStatsDisplayOptional(): BoardStatsDisplayValue | null {
-  return useContext(BoardStatsDisplayContext);
-}
+import { createContext, useContext, type ReactNode } from "react";
+import type { TaskCountStat } from "../../../shared/boardStats";
+
+export interface BoardStatsDisplayValue {
+  /** Board-level T/O/C when stats are enabled and loaded (or placeholder). */
+  board: TaskCountStat | null;
+  listStat(listId: number): TaskCountStat;
+  /** Increments when stats visibility turns on so chips can run one-shot entry motion. */
+  entryToken: number;
+  /** True while fetching (including background refresh after filter change). */
+  fetching: boolean;
+  /** True on first load with no cached placeholder. */
+  pending: boolean;
+  /** Show spinner inside chips (initial load or stale placeholder during refetch). */
+  showChipSpinner: boolean;
+  /** True when the stats request failed; avoid showing misleading zero chips. */
+  statsError: boolean;
+}
+
+const BoardStatsDisplayContext = createContext<BoardStatsDisplayValue | null>(
+  null,
+);
+
+export function BoardStatsDisplayProvider({
+  value,
+  children,
+}: {
+  value: BoardStatsDisplayValue;
+  children: ReactNode;
+}) {
+  return (
+    <BoardStatsDisplayContext.Provider value={value}>
+      {children}
+    </BoardStatsDisplayContext.Provider>
+  );
+}
+
+/** List columns read per-list stats; returns null when stats are hidden or unavailable. */
+export function useBoardStatsDisplayOptional(): BoardStatsDisplayValue | null {
+  return useContext(BoardStatsDisplayContext);
+}

package/src/client/components/board/boardHeaderButtonStyles.ts

@@ -1,38 +1,38 @@
-import { cn } from "@/lib/utils";
-
-/** Labels above filter button rows — foreground-tinted for readable contrast on header surfaces in light and dark themes. */
-export const BOARD_HEADER_FILTER_SECTION_LABEL_CLASS =
-  "text-xs font-semibold uppercase tracking-wide text-foreground/90";
-
-const BOARD_HEADER_TEXT_BUTTON_BASE_CLASS =
-  "inline-flex items-center gap-1.5 rounded-md border px-2.5 py-1 text-xs font-medium transition-colors";
-
-// Keep header text buttons on a single shared visual system so filters and
-// board actions stay consistent as more controls are added to the strip.
-export function boardHeaderToggleButtonClass(active: boolean) {
-  return cn(
-    BOARD_HEADER_TEXT_BUTTON_BASE_CLASS,
-    active
-      // Use the app surface token instead of brand color so active buttons stay neutral across board themes.
-      ? "border-border/80 bg-background/75 text-foreground shadow-sm backdrop-blur-sm"
-      : "border-border bg-muted/40 text-foreground/60 hover:bg-muted hover:text-foreground",
-  );
-}
-
-export function boardHeaderActionButtonClass() {
-  return cn(
-    BOARD_HEADER_TEXT_BUTTON_BASE_CLASS,
-    "border-border bg-muted/40 text-foreground hover:bg-muted",
-  );
-}
-
-/** Reserves space for the section edit icon so filter labels and buttons do not shift on header hover. */
-export const BOARD_HEADER_SECTION_EDIT_ICON_SLOT_CLASS =
-  "inline-flex h-5 w-5 shrink-0 items-center justify-center";
-
-export function boardHeaderSectionEditIconButtonClass(headerHovered: boolean) {
-  return cn(
-    "inline-flex size-5 shrink-0 items-center justify-center rounded text-muted-foreground transition-opacity duration-150 hover:bg-black/[0.06] hover:text-foreground dark:hover:bg-white/[0.06]",
-    headerHovered ? "opacity-100" : "opacity-0 pointer-events-none",
-  );
-}
+import { cn } from "@/lib/utils";
+
+/** Labels above filter button rows — foreground-tinted for readable contrast on header surfaces in light and dark themes. */
+export const BOARD_HEADER_FILTER_SECTION_LABEL_CLASS =
+  "text-xs font-semibold uppercase tracking-wide text-foreground/90";
+
+const BOARD_HEADER_TEXT_BUTTON_BASE_CLASS =
+  "inline-flex items-center gap-1.5 rounded-md border px-2.5 py-1 text-xs font-medium transition-colors";
+
+// Keep header text buttons on a single shared visual system so filters and
+// board actions stay consistent as more controls are added to the strip.
+export function boardHeaderToggleButtonClass(active: boolean) {
+  return cn(
+    BOARD_HEADER_TEXT_BUTTON_BASE_CLASS,
+    active
+      // Use the app surface token instead of brand color so active buttons stay neutral across board themes.
+      ? "border-border/80 bg-background/75 text-foreground shadow-sm backdrop-blur-sm"
+      : "border-border bg-muted/40 text-foreground/60 hover:bg-muted hover:text-foreground",
+  );
+}
+
+export function boardHeaderActionButtonClass() {
+  return cn(
+    BOARD_HEADER_TEXT_BUTTON_BASE_CLASS,
+    "border-border bg-muted/40 text-foreground hover:bg-muted",
+  );
+}
+
+/** Reserves space for the section edit icon so filter labels and buttons do not shift on header hover. */
+export const BOARD_HEADER_SECTION_EDIT_ICON_SLOT_CLASS =
+  "inline-flex h-5 w-5 shrink-0 items-center justify-center";
+
+export function boardHeaderSectionEditIconButtonClass(headerHovered: boolean) {
+  return cn(
+    "inline-flex size-5 shrink-0 items-center justify-center rounded text-muted-foreground transition-opacity duration-150 hover:bg-black/[0.06] hover:text-foreground dark:hover:bg-white/[0.06]",
+    headerHovered ? "opacity-100" : "opacity-0 pointer-events-none",
+  );
+}