@n-dx/web 0.1.0

package/dist/viewer/components/prd-tree/types.d.ts

@@ -0,0 +1,93 @@
+/**
+ * Types for PRD hierarchy visualization.
+ *
+ * These mirror the canonical types in packages/rex/src/schema/v1.ts.
+ * Duplication is intentional: the viewer is bundled as standalone browser
+ * code via esbuild and cannot import from the Rex Node.js package at
+ * runtime. If the canonical Rex types change, update these to match.
+ *
+ * Drift between these types and the canonical source is caught by
+ * compile-time consistency tests in tests/unit/server/type-consistency.test.ts.
+ *
+ * @see packages/rex/src/schema/v1.ts — canonical source: ItemLevel, ItemStatus, Priority, PRDItem, PRDDocument
+ * @see packages/web/src/server/rex-gateway.ts — server-side gateway (re-exports from rex)
+ */
+export type ItemLevel = "epic" | "feature" | "task" | "subtask";
+export type ItemStatus = "pending" | "in_progress" | "completed" | "failing" | "deferred" | "blocked" | "deleted";
+export type Priority = "critical" | "high" | "medium" | "low";
+/**
+ * @see packages/rex/src/schema/v1.ts — RequirementCategory
+ */
+export type RequirementCategory = "technical" | "performance" | "security" | "accessibility" | "compatibility" | "quality";
+/**
+ * @see packages/rex/src/schema/v1.ts — RequirementValidationType
+ */
+export type RequirementValidationType = "automated" | "manual" | "metric";
+/**
+ * @see packages/rex/src/schema/v1.ts — Requirement
+ */
+export interface RequirementData {
+    id: string;
+    title: string;
+    description?: string;
+    category: RequirementCategory;
+    validationType: RequirementValidationType;
+    acceptanceCriteria: string[];
+    validationCommand?: string;
+    threshold?: number;
+    priority?: Priority;
+}
+export interface PRDItemData {
+    id: string;
+    title: string;
+    status: ItemStatus;
+    level: ItemLevel;
+    description?: string;
+    acceptanceCriteria?: string[];
+    priority?: Priority;
+    tags?: string[];
+    blockedBy?: string[];
+    /** @see packages/rex/src/schema/v1.ts — PRDItem.requirements */
+    requirements?: RequirementData[];
+    startedAt?: string;
+    completedAt?: string;
+    failureReason?: string;
+    children?: PRDItemData[];
+}
+export interface PRDDocumentData {
+    schema: string;
+    title: string;
+    items: PRDItemData[];
+}
+export type WeeklyBudgetSource = "vendor_model" | "vendor_default" | "global_default" | "missing_budget";
+export interface WeeklyBudgetResolution {
+    /** Resolved weekly token budget; null means no configured budget applies. */
+    budget: number | null;
+    /** Which lookup tier produced the result. */
+    source: WeeklyBudgetSource;
+}
+export interface TaskUtilizationSummary {
+    /** Rounded weekly utilization percentage, if budget is available. */
+    percent: number | null;
+    /** Shared display label used in chips and detail panel. */
+    label: string;
+    /** Resolver source reason used for fallback diagnostics. */
+    reason: WeeklyBudgetSource;
+}
+/** Aggregated token usage for a single task across associated runs. */
+export interface TaskUsageSummary {
+    totalTokens: number;
+    runCount: number;
+    utilization?: TaskUtilizationSummary;
+}
+/** Computed stats for a branch of the tree. */
+export interface BranchStats {
+    total: number;
+    completed: number;
+    inProgress: number;
+    pending: number;
+    failing: number;
+    deferred: number;
+    blocked: number;
+    deleted: number;
+}

package/dist/viewer/components/prd-tree/types.js

@@ -0,0 +1,16 @@
+/**
+ * Types for PRD hierarchy visualization.
+ *
+ * These mirror the canonical types in packages/rex/src/schema/v1.ts.
+ * Duplication is intentional: the viewer is bundled as standalone browser
+ * code via esbuild and cannot import from the Rex Node.js package at
+ * runtime. If the canonical Rex types change, update these to match.
+ *
+ * Drift between these types and the canonical source is caught by
+ * compile-time consistency tests in tests/unit/server/type-consistency.test.ts.
+ *
+ * @see packages/rex/src/schema/v1.ts — canonical source: ItemLevel, ItemStatus, Priority, PRDItem, PRDDocument
+ * @see packages/web/src/server/rex-gateway.ts — server-side gateway (re-exports from rex)
+ */
+export {};
+//# sourceMappingURL=types.js.map

package/dist/viewer/components/prd-tree/types.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"types.js","sourceRoot":"","sources":["../../../../src/viewer/components/prd-tree/types.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;GAaG"}

package/dist/viewer/components/prd-tree/virtual-scroll.d.ts

@@ -0,0 +1,119 @@
+/**
+ * Virtual scrolling engine for the PRD tree.
+ *
+ * Flattens the hierarchical tree into a linear array respecting expansion
+ * state and status filters, then computes which items fall within the
+ * current scroll viewport plus a configurable buffer zone. Only those
+ * items are rendered, dramatically reducing DOM node count for large trees.
+ *
+ * The module exposes:
+ * - Pure functions for flattening and range computation (easily testable)
+ * - A Preact hook (`useVirtualScroll`) for scroll state management
+ *
+ * @see ./prd-tree.ts — integrating component
+ * @see ./compute.ts  — itemMatchesFilter used for visibility checks
+ */
+import type { PRDItemData, ItemStatus } from "./types.js";
+/** A flattened tree node with depth and structural metadata for rendering. */
+export interface FlatNode {
+    /** The original PRD item data. */
+    item: PRDItemData;
+    /** Depth level in the tree (0 = root). */
+    depth: number;
+    /** Whether this node is currently expanded (children visible). */
+    isExpanded: boolean;
+    /** Whether this node has children (regardless of expansion state). */
+    hasChildren: boolean;
+}
+/** Configuration for the virtual scroll engine. */
+export interface VirtualScrollConfig {
+    /** Estimated height per row in pixels. Default: DEFAULT_ITEM_HEIGHT. */
+    itemHeight?: number;
+    /** Extra items to render above and below viewport. Default: DEFAULT_BUFFER_COUNT. */
+    bufferCount?: number;
+}
+/** Range of indices to render. */
+export interface VisibleRange {
+    /** First index to render (inclusive). */
+    start: number;
+    /** Last index to render (exclusive). */
+    end: number;
+    /** Pixel offset for the spacer before visible items. */
+    offsetY: number;
+}
+/** Default estimated row height in pixels. */
+export declare const DEFAULT_ITEM_HEIGHT = 40;
+/** Default number of buffer items above and below viewport. */
+export declare const DEFAULT_BUFFER_COUNT = 10;
+/**
+ * Flatten a hierarchical tree into a linear array of FlatNodes.
+ *
+ * Only includes nodes that:
+ * 1. Match the status filter (or have descendants that match)
+ * 2. Are within expanded parent branches
+ *
+ * The result preserves render order (depth-first, pre-order traversal).
+ * This is the same ordering that the recursive TreeNodes renderer produced,
+ * but in a flat array suitable for virtual scrolling.
+ *
+ * Complexity: O(V) where V = visible nodes in the expanded tree.
+ */
+export declare function flattenVisibleTree(items: PRDItemData[], expanded: Set<string>, activeStatuses: Set<ItemStatus>, depth?: number, searchVisibleIds?: Set<string>): FlatNode[];
+/**
+ * Compute the visible range of indices for the current scroll position.
+ *
+ * Returns start/end indices and the pixel offset for positioning.
+ * Buffer items are included above and below the viewport to prevent
+ * flashing during rapid scrolling.
+ *
+ * When containerHeight is 0 (unmeasured or jsdom), returns the full
+ * range so all items render — virtual scrolling activates once the
+ * container has a measured height.
+ */
+export declare function computeVisibleRange(scrollTop: number, containerHeight: number, totalCount: number, itemHeight?: number, bufferCount?: number): VisibleRange;
+/**
+ * Find the index of an item in the flat node list by ID.
+ * Returns -1 if not found.
+ */
+export declare function findFlatNodeIndex(flatNodes: FlatNode[], itemId: string): number;
+export interface UseVirtualScrollOptions {
+    /** Flattened visible tree nodes. */
+    flatNodes: FlatNode[];
+    /** Ref to the scroll container element. */
+    containerRef: {
+        current: HTMLDivElement | null;
+    };
+    /** Virtual scroll configuration. */
+    config?: VirtualScrollConfig;
+}
+export interface UseVirtualScrollResult {
+    /** Subset of flatNodes currently visible in the viewport + buffer. */
+    visibleNodes: FlatNode[];
+    /** Total virtual height of the full tree in pixels. */
+    totalHeight: number;
+    /** Pixel offset for the spacer before visible items. */
+    offsetY: number;
+    /** Height in pixels for the spacer after visible items. */
+    afterSpaceHeight: number;
+    /** Scroll event handler to attach to the container. */
+    onScroll: (e: Event) => void;
+    /** Scroll the container to center a specific item index. */
+    scrollToIndex: (index: number) => void;
+    /** Number of items currently rendered. */
+    renderedCount: number;
+    /** Total number of items in the flattened tree. */
+    totalCount: number;
+    /** Whether virtual scrolling is active (container has measured height). */
+    isActive: boolean;
+}
+/**
+ * Preact hook that manages virtual scroll state.
+ *
+ * Observes the container element's height via ResizeObserver and
+ * computes which items to render based on the current scroll position.
+ *
+ * When the container height is unmeasured (0), all items are returned
+ * as visible — virtual scrolling activates once the browser reports
+ * a real height. This handles initial render, jsdom tests, and SSR.
+ */
+export declare function useVirtualScroll({ flatNodes, containerRef, config, }: UseVirtualScrollOptions): UseVirtualScrollResult;

package/dist/viewer/components/prd-tree/virtual-scroll.js

@@ -0,0 +1,169 @@
+/**
+ * Virtual scrolling engine for the PRD tree.
+ *
+ * Flattens the hierarchical tree into a linear array respecting expansion
+ * state and status filters, then computes which items fall within the
+ * current scroll viewport plus a configurable buffer zone. Only those
+ * items are rendered, dramatically reducing DOM node count for large trees.
+ *
+ * The module exposes:
+ * - Pure functions for flattening and range computation (easily testable)
+ * - A Preact hook (`useVirtualScroll`) for scroll state management
+ *
+ * @see ./prd-tree.ts — integrating component
+ * @see ./compute.ts  — itemMatchesFilter used for visibility checks
+ */
+import { useState, useEffect, useRef, useMemo, useCallback } from "preact/hooks";
+import { itemMatchesFilter } from "./compute.js";
+import { itemMatchesSearch } from "./tree-search.js";
+// ── Constants ─────────────────────────────────────────────────────────────────
+/** Default estimated row height in pixels. */
+export const DEFAULT_ITEM_HEIGHT = 40;
+/** Default number of buffer items above and below viewport. */
+export const DEFAULT_BUFFER_COUNT = 10;
+// ── Pure functions ────────────────────────────────────────────────────────────
+/**
+ * Flatten a hierarchical tree into a linear array of FlatNodes.
+ *
+ * Only includes nodes that:
+ * 1. Match the status filter (or have descendants that match)
+ * 2. Are within expanded parent branches
+ *
+ * The result preserves render order (depth-first, pre-order traversal).
+ * This is the same ordering that the recursive TreeNodes renderer produced,
+ * but in a flat array suitable for virtual scrolling.
+ *
+ * Complexity: O(V) where V = visible nodes in the expanded tree.
+ */
+export function flattenVisibleTree(items, expanded, activeStatuses, depth = 0, searchVisibleIds) {
+    const result = [];
+    for (const item of items) {
+        if (!itemMatchesFilter(item, activeStatuses))
+            continue;
+        // When a search is active, skip items not in the visible set.
+        if (searchVisibleIds && searchVisibleIds.size > 0) {
+            if (!itemMatchesSearch(item, searchVisibleIds))
+                continue;
+        }
+        const children = item.children ?? [];
+        const hasChildren = children.length > 0;
+        const isExpanded = expanded.has(item.id);
+        result.push({ item, depth, isExpanded, hasChildren });
+        if (hasChildren && isExpanded) {
+            const childNodes = flattenVisibleTree(children, expanded, activeStatuses, depth + 1, searchVisibleIds);
+            for (const cn of childNodes)
+                result.push(cn);
+        }
+    }
+    return result;
+}
+/**
+ * Compute the visible range of indices for the current scroll position.
+ *
+ * Returns start/end indices and the pixel offset for positioning.
+ * Buffer items are included above and below the viewport to prevent
+ * flashing during rapid scrolling.
+ *
+ * When containerHeight is 0 (unmeasured or jsdom), returns the full
+ * range so all items render — virtual scrolling activates once the
+ * container has a measured height.
+ */
+export function computeVisibleRange(scrollTop, containerHeight, totalCount, itemHeight = DEFAULT_ITEM_HEIGHT, bufferCount = DEFAULT_BUFFER_COUNT) {
+    if (totalCount === 0) {
+        return { start: 0, end: 0, offsetY: 0 };
+    }
+    // Fallback: container not yet measured — render everything.
+    if (containerHeight <= 0) {
+        return { start: 0, end: totalCount, offsetY: 0 };
+    }
+    const startIdx = Math.floor(scrollTop / itemHeight);
+    const visibleCount = Math.ceil(containerHeight / itemHeight);
+    const start = Math.max(0, startIdx - bufferCount);
+    const end = Math.min(totalCount, startIdx + visibleCount + bufferCount);
+    const offsetY = start * itemHeight;
+    return { start, end, offsetY };
+}
+/**
+ * Find the index of an item in the flat node list by ID.
+ * Returns -1 if not found.
+ */
+export function findFlatNodeIndex(flatNodes, itemId) {
+    for (let i = 0; i < flatNodes.length; i++) {
+        if (flatNodes[i].item.id === itemId)
+            return i;
+    }
+    return -1;
+}
+/**
+ * Preact hook that manages virtual scroll state.
+ *
+ * Observes the container element's height via ResizeObserver and
+ * computes which items to render based on the current scroll position.
+ *
+ * When the container height is unmeasured (0), all items are returned
+ * as visible — virtual scrolling activates once the browser reports
+ * a real height. This handles initial render, jsdom tests, and SSR.
+ */
+export function useVirtualScroll({ flatNodes, containerRef, config = {}, }) {
+    const itemHeight = config.itemHeight ?? DEFAULT_ITEM_HEIGHT;
+    const bufferCount = config.bufferCount ?? DEFAULT_BUFFER_COUNT;
+    const [scrollTop, setScrollTop] = useState(0);
+    const [containerHeight, setContainerHeight] = useState(0);
+    // Measure container height on mount and resize.
+    useEffect(() => {
+        const el = containerRef.current;
+        if (!el)
+            return;
+        setContainerHeight(el.clientHeight);
+        if (typeof ResizeObserver === "undefined")
+            return;
+        const ro = new ResizeObserver((entries) => {
+            for (const entry of entries) {
+                setContainerHeight(entry.contentRect.height);
+            }
+        });
+        ro.observe(el);
+        return () => ro.disconnect();
+    }, [containerRef]);
+    // Reset scrollTop when flatNodes changes significantly (e.g. filter change).
+    const prevLengthRef = useRef(flatNodes.length);
+    useEffect(() => {
+        if (prevLengthRef.current !== flatNodes.length) {
+            prevLengthRef.current = flatNodes.length;
+            // Don't reset scroll on small changes (expand/collapse).
+            // Only reset when the change is dramatic (e.g. filter switch).
+            if (Math.abs(prevLengthRef.current - flatNodes.length) > flatNodes.length * 0.5) {
+                setScrollTop(0);
+            }
+        }
+    }, [flatNodes.length]);
+    const totalHeight = flatNodes.length * itemHeight;
+    const isActive = containerHeight > 0;
+    const range = useMemo(() => computeVisibleRange(scrollTop, containerHeight, flatNodes.length, itemHeight, bufferCount), [scrollTop, containerHeight, flatNodes.length, itemHeight, bufferCount]);
+    const visibleNodes = useMemo(() => flatNodes.slice(range.start, range.end), [flatNodes, range.start, range.end]);
+    const afterSpaceHeight = Math.max(0, totalHeight - range.offsetY - visibleNodes.length * itemHeight);
+    const onScroll = useCallback((e) => {
+        const target = e.target;
+        setScrollTop(target.scrollTop);
+    }, []);
+    const scrollToIndex = useCallback((index) => {
+        const el = containerRef.current;
+        if (!el)
+            return;
+        // Center the item in the viewport.
+        const targetScroll = Math.max(0, index * itemHeight - containerHeight / 2 + itemHeight / 2);
+        el.scrollTop = targetScroll;
+    }, [containerRef, itemHeight, containerHeight]);
+    return {
+        visibleNodes,
+        totalHeight,
+        offsetY: range.offsetY,
+        afterSpaceHeight,
+        onScroll,
+        scrollToIndex,
+        renderedCount: visibleNodes.length,
+        totalCount: flatNodes.length,
+        isActive,
+    };
+}
+//# sourceMappingURL=virtual-scroll.js.map

package/dist/viewer/components/prd-tree/virtual-scroll.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"virtual-scroll.js","sourceRoot":"","sources":["../../../../src/viewer/components/prd-tree/virtual-scroll.ts"],"names":[],"mappings":"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"}

package/dist/viewer/components/progressive-loader.d.ts

@@ -0,0 +1,114 @@
+/**
+ * Progressive tree loading for large PRD datasets.
+ *
+ * Renders tree nodes in configurable chunks rather than all at once. A flat
+ * "node budget" controls how many visible nodes are rendered: the tree is
+ * walked in render order and items beyond the budget are excluded. Parents
+ * whose children are partially truncated keep their structural position so
+ * scroll position is stable.
+ *
+ * The module exposes:
+ * - Pure functions for counting and slicing visible nodes (easily testable)
+ * - A Preact hook (`useProgressiveLoader`) for chunk state management
+ * - A `LoadMoreIndicator` component for the "load more" UI
+ *
+ * Search and filter operations always work on the **full** item tree —
+ * progressive loading only limits the **rendering** pass, not the data.
+ *
+ * @see ./prd-tree/prd-tree.ts   — integrating component
+ * @see ./prd-tree/compute.ts    — itemMatchesFilter used for visibility checks
+ */
+import type { VNode } from "preact";
+import type { PRDItemData, ItemStatus } from "./prd-tree/types.js";
+/** Default number of nodes to render per chunk. */
+export declare const DEFAULT_CHUNK_SIZE = 50;
+/**
+ * Minimum item count before progressive loading activates.
+ * Trees smaller than this render in full without any chunking UI.
+ */
+export declare const PROGRESSIVE_THRESHOLD = 50;
+/**
+ * Count visible nodes in a tree, respecting the status filter.
+ *
+ * A node is "visible" when it (or any descendant) matches the active status
+ * filter — the same logic `itemMatchesFilter` uses. Each visible node
+ * contributes 1 to the count, and visible children are counted recursively.
+ *
+ * Complexity: O(N) where N = total nodes in tree.
+ */
+export declare function countVisibleNodes(items: PRDItemData[], activeStatuses: Set<ItemStatus>): number;
+/**
+ * Result of a progressive tree slice operation.
+ */
+export interface ProgressiveSlice {
+    /** Items to render (may be a subset of the original tree). */
+    items: PRDItemData[];
+    /** Number of visible nodes in this slice. */
+    renderedCount: number;
+    /** Total visible nodes in the unsliced tree. */
+    totalCount: number;
+}
+/**
+ * Slice a tree to fit within a node budget.
+ *
+ * Returns the original `items` array unchanged when the total visible count
+ * fits within the limit (common case for small trees).
+ *
+ * @param items          Full PRD item tree
+ * @param activeStatuses Status filter (from StatusFilter component)
+ * @param limit          Maximum number of visible nodes to include
+ * @returns Progressive slice with rendered/total counts
+ */
+export declare function sliceVisibleTree(items: PRDItemData[], activeStatuses: Set<ItemStatus>, limit: number): ProgressiveSlice;
+export interface ProgressiveLoaderState {
+    /** Current node rendering limit. */
+    limit: number;
+    /** Whether there are more nodes beyond the current limit. */
+    hasMore: boolean;
+    /** Load the next chunk of nodes. */
+    loadMore: () => void;
+    /** Load all remaining nodes at once. */
+    loadAll: () => void;
+    /** Whether a chunk load is in progress (brief transition state). */
+    isLoading: boolean;
+    /** Number of visible nodes that will be rendered. */
+    renderedCount: number;
+    /** Total visible nodes in the full tree. */
+    totalCount: number;
+    /** Whether progressive loading is active (tree exceeds threshold). */
+    isActive: boolean;
+}
+/**
+ * Manages progressive loading state for a tree of the given size.
+ *
+ * The hook auto-resets the limit when `totalCount` changes (e.g. after a
+ * filter change or data refresh), ensuring the user always starts from a
+ * reasonable chunk size.
+ *
+ * A brief `isLoading` transition (one frame) is triggered on `loadMore` /
+ * `loadAll` to give the browser a paint opportunity before the potentially
+ * heavy render of additional nodes.
+ *
+ * @param totalCount Total visible nodes (from countVisibleNodes)
+ * @param chunkSize  Number of nodes per chunk (DEFAULT_CHUNK_SIZE)
+ */
+export declare function useProgressiveLoader(totalCount: number, chunkSize?: number): ProgressiveLoaderState;
+export interface LoadMoreIndicatorProps {
+    /** Number of nodes currently rendered. */
+    renderedCount: number;
+    /** Total visible nodes in the tree. */
+    totalCount: number;
+    /** Number of nodes to add per chunk. */
+    chunkSize: number;
+    /** Whether a load operation is in progress. */
+    isLoading: boolean;
+    /** Load the next chunk. */
+    onLoadMore: () => void;
+    /** Load all remaining nodes. */
+    onLoadAll: () => void;
+}
+/**
+ * "Load More" indicator shown below the tree when progressive loading is
+ * active and there are more nodes to reveal.
+ */
+export declare function LoadMoreIndicator({ renderedCount, totalCount, chunkSize, isLoading, onLoadMore, onLoadAll, }: LoadMoreIndicatorProps): VNode;