@shepai/cli 1.172.0 → 1.174.0

package/dist/src/presentation/web/app/features/feature-tree-page-client.d.ts

@@ -1,7 +1,13 @@
-import type { FeatureTreeRow, InventoryRepo } from '../../components/features/feature-tree-table/index.js';
+import type { FeatureTreeRow, InventoryRepo, GroupByField } from '../../components/features/feature-tree-table/index.js';
 export interface FeatureTreePageClientProps {
     features: FeatureTreeRow[];
     repos: InventoryRepo[];
 }
+/** Item sort fields change based on groupBy — exclude the grouped field. */
+export declare function getItemSortOptions(groupBy: GroupByField | null): {
+    value: string;
+    label: string;
+}[];
+export declare function isArchived(feature: FeatureTreeRow): boolean;
 export declare function FeatureTreePageClient({ features, repos }: FeatureTreePageClientProps): import("react/jsx-runtime").JSX.Element;
 //# sourceMappingURL=feature-tree-page-client.d.ts.map

package/dist/src/presentation/web/app/features/feature-tree-page-client.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"feature-tree-page-client.d.ts","sourceRoot":"","sources":["../../../../../../src/presentation/web/app/features/feature-tree-page-client.tsx"],"names":[],"mappings":"AAKA,OAAO,KAAK,EAAE,cAAc,EAAE,aAAa,EAAE,MAAM,0CAA0C,CAAC;AAG9F,MAAM,WAAW,0BAA0B;IACzC,QAAQ,EAAE,cAAc,EAAE,CAAC;IAC3B,KAAK,EAAE,aAAa,EAAE,CAAC;CACxB;AAED,wBAAgB,qBAAqB,CAAC,EAAE,QAAQ,EAAE,KAAK,EAAE,EAAE,0BAA0B,2CAkBpF"}
+{"version":3,"file":"feature-tree-page-client.d.ts","sourceRoot":"","sources":["../../../../../../src/presentation/web/app/features/feature-tree-page-client.tsx"],"names":[],"mappings":"AAMA,OAAO,KAAK,EACV,cAAc,EACd,aAAa,EACb,YAAY,EAEb,MAAM,0CAA0C,CAAC;AAelD,MAAM,WAAW,0BAA0B;IACzC,QAAQ,EAAE,cAAc,EAAE,CAAC;IAC3B,KAAK,EAAE,aAAa,EAAE,CAAC;CACxB;AAmCD,4EAA4E;AAC5E,wBAAgB,kBAAkB,CAAC,OAAO,EAAE,YAAY,GAAG,IAAI;;;IAU9D;AAED,wBAAgB,UAAU,CAAC,OAAO,EAAE,cAAc,GAAG,OAAO,CAE3D;AAED,wBAAgB,qBAAqB,CAAC,EAAE,QAAQ,EAAE,KAAK,EAAE,EAAE,0BAA0B,2CAuWpF"}

package/dist/src/presentation/web/app/features/feature-tree-page-client.js

@@ -1,13 +1,152 @@
 'use client';
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 import { useRouter } from 'next/navigation';
-import { useCallback } from 'react';
+import { useCallback, useState, useMemo } from 'react';
+import { Search, SlidersHorizontal, Archive, Inbox, X, ArrowDownAZ, ArrowUpAZ } from 'lucide-react';
 import { FeatureTreeTable } from '../../components/features/feature-tree-table/index.js';
 import { PageHeader } from '../../components/common/page-header/index.js';
+import { EmptyState } from '../../components/common/empty-state/index.js';
+import { Input } from '../../components/ui/input.js';
+import { Button } from '../../components/ui/button.js';
+import { Badge } from '../../components/ui/badge.js';
+import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue, } from '../../components/ui/select.js';
+const STATUS_LABELS = {
+    'action-needed': 'Action Needed',
+    'in-progress': 'In Progress',
+    pending: 'Pending',
+    blocked: 'Blocked',
+    error: 'Error',
+    done: 'Done',
+};
+const STATUS_COLORS = {
+    'action-needed': 'bg-amber-500/15 text-amber-700 dark:text-amber-400 border-amber-500/20',
+    'in-progress': 'bg-blue-500/15 text-blue-700 dark:text-blue-400 border-blue-500/20',
+    pending: 'bg-slate-500/15 text-slate-700 dark:text-slate-400 border-slate-500/20',
+    blocked: 'bg-gray-500/15 text-gray-700 dark:text-gray-400 border-gray-500/20',
+    error: 'bg-red-500/15 text-red-700 dark:text-red-400 border-red-500/20',
+    done: 'bg-emerald-500/15 text-emerald-700 dark:text-emerald-400 border-emerald-500/20',
+};
+const GROUP_BY_LABELS = {
+    repositoryName: 'Repository',
+    status: 'Status',
+    lifecycle: 'Lifecycle',
+};
+const GROUP_BY_OPTIONS = [
+    { value: '__none__', label: 'No grouping' },
+    { value: 'repositoryName', label: 'Repository' },
+    { value: 'status', label: 'Status' },
+    { value: 'lifecycle', label: 'Lifecycle' },
+];
+/** Item sort fields change based on groupBy — exclude the grouped field. */
+export function getItemSortOptions(groupBy) {
+    const all = [
+        { value: 'name', label: 'Name' },
+        { value: 'repositoryName', label: 'Repository' },
+        { value: 'status', label: 'Status' },
+        { value: 'lifecycle', label: 'Lifecycle' },
+        { value: 'branch', label: 'Branch' },
+    ];
+    if (!groupBy)
+        return all;
+    return all.filter((o) => o.value !== groupBy);
+}
+export function isArchived(feature) {
+    return feature.lifecycle === 'Archived';
+}
 export function FeatureTreePageClient({ features, repos }) {
     const router = useRouter();
+    // Filter state
+    const [searchQuery, setSearchQuery] = useState('');
+    const [statusFilter, setStatusFilter] = useState(null);
+    const [archiveFilter, setArchiveFilter] = useState('active');
+    const [repoFilter, setRepoFilter] = useState(null);
+    const [showAdvanced, setShowAdvanced] = useState(false);
+    // Group + sort state
+    const [groupBy, setGroupBy] = useState('repositoryName');
+    const [groupSortDir, setGroupSortDir] = useState('asc');
+    const [itemSortField, setItemSortField] = useState('name');
+    const [itemSortDir, setItemSortDir] = useState('asc');
     const handleFeatureClick = useCallback((featureId) => {
         router.push(`/feature/${featureId}/overview`);
     }, [router]);
-    return (_jsxs("div", { "data-testid": "feature-tree-page", className: "flex h-full flex-col gap-4", children: [_jsx(PageHeader, { title: "Inventory", description: "All repositories and features" }), _jsx("div", { className: "min-h-0 flex-1", children: _jsx(FeatureTreeTable, { data: features, repos: repos, onFeatureClick: handleFeatureClick }) })] }));
+    const handleGroupByChange = (value) => {
+        const next = value === '__none__' ? null : value;
+        setGroupBy(next);
+        // Reset item sort if current field matches the new groupBy
+        if (next && itemSortField === next) {
+            setItemSortField('name');
+        }
+    };
+    // Compute status counts for pills
+    const statusCounts = useMemo(() => {
+        const counts = {
+            'action-needed': 0,
+            'in-progress': 0,
+            pending: 0,
+            blocked: 0,
+            error: 0,
+            done: 0,
+        };
+        for (const f of features) {
+            counts[f.status]++;
+        }
+        return counts;
+    }, [features]);
+    // Unique repo names for advanced filter
+    const repoNames = useMemo(() => {
+        const names = new Set();
+        for (const f of features) {
+            names.add(f.repositoryName);
+        }
+        return Array.from(names).sort();
+    }, [features]);
+    // Filtered features (sorting handled by table)
+    const filteredFeatures = useMemo(() => {
+        const query = searchQuery.toLowerCase();
+        return features.filter((feature) => {
+            if (archiveFilter === 'active' && isArchived(feature))
+                return false;
+            if (archiveFilter === 'archived' && !isArchived(feature))
+                return false;
+            if (statusFilter && feature.status !== statusFilter)
+                return false;
+            if (repoFilter && feature.repositoryName !== repoFilter)
+                return false;
+            if (query) {
+                const matchesName = feature.name.toLowerCase().includes(query);
+                const matchesBranch = feature.branch.toLowerCase().includes(query);
+                const matchesRepo = feature.repositoryName.toLowerCase().includes(query);
+                if (!matchesName && !matchesBranch && !matchesRepo)
+                    return false;
+            }
+            return true;
+        });
+    }, [features, searchQuery, statusFilter, archiveFilter, repoFilter]);
+    const hasActiveFilters = searchQuery !== '' ||
+        statusFilter !== null ||
+        archiveFilter !== 'active' ||
+        repoFilter !== null;
+    const clearFilters = () => {
+        setSearchQuery('');
+        setStatusFilter(null);
+        setArchiveFilter('active');
+        setRepoFilter(null);
+    };
+    const archivedCount = useMemo(() => features.filter(isArchived).length, [features]);
+    const activeCount = features.length - archivedCount;
+    const itemSortOptions = useMemo(() => getItemSortOptions(groupBy), [groupBy]);
+    return (_jsxs("div", { "data-testid": "feature-tree-page", className: "flex h-full flex-col gap-4", children: [_jsx(PageHeader, { title: "Inventory", description: "All repositories and features" }), _jsxs("div", { className: "flex flex-col gap-3", children: [_jsxs("div", { className: "flex items-center gap-2", children: [_jsxs("div", { className: "relative flex-1", children: [_jsx(Search, { className: "text-muted-foreground absolute top-1/2 left-3 size-4 -translate-y-1/2" }), _jsx(Input, { placeholder: "Search by name, branch, or repository...", value: searchQuery, onChange: (e) => setSearchQuery(e.target.value), className: "ps-9" }), searchQuery ? (_jsx("button", { onClick: () => setSearchQuery(''), className: "text-muted-foreground hover:text-foreground absolute top-1/2 right-3 -translate-y-1/2", children: _jsx(X, { className: "size-4" }) })) : null] }), _jsxs("div", { className: "flex items-center gap-1.5", children: [_jsx("span", { className: "text-muted-foreground text-xs font-medium whitespace-nowrap", children: "Group by:" }), _jsxs(Select, { value: groupBy ?? '__none__', onValueChange: handleGroupByChange, children: [_jsx(SelectTrigger, { className: "w-[150px]", children: _jsx(SelectValue, {}) }), _jsx(SelectContent, { children: GROUP_BY_OPTIONS.map((opt) => (_jsx(SelectItem, { value: opt.value, children: opt.label }, opt.value))) })] })] }), _jsxs(Button, { variant: showAdvanced ? 'secondary' : 'outline', size: "sm", onClick: () => setShowAdvanced((v) => !v), className: "shrink-0", children: [_jsx(SlidersHorizontal, { className: "mr-1.5 size-3.5" }), "Filters"] })] }), _jsxs("div", { className: "flex flex-wrap items-center gap-2", children: [_jsxs("div", { className: "border-input flex items-center rounded-md border", children: [_jsxs("button", { onClick: () => setArchiveFilter('active'), className: `flex items-center gap-1.5 rounded-l-md px-3 py-1.5 text-xs font-medium transition-colors ${archiveFilter === 'active' ? 'bg-primary text-primary-foreground' : 'hover:bg-muted'}`, children: [_jsx(Inbox, { className: "size-3.5" }), "Active", _jsxs("span", { className: "opacity-70", children: ["(", activeCount, ")"] })] }), _jsxs("button", { onClick: () => setArchiveFilter('archived'), className: `flex items-center gap-1.5 border-x px-3 py-1.5 text-xs font-medium transition-colors ${archiveFilter === 'archived'
+                                            ? 'bg-primary text-primary-foreground'
+                                            : 'hover:bg-muted'}`, children: [_jsx(Archive, { className: "size-3.5" }), "Archived", _jsxs("span", { className: "opacity-70", children: ["(", archivedCount, ")"] })] }), _jsx("button", { onClick: () => setArchiveFilter('all'), className: `rounded-r-md px-3 py-1.5 text-xs font-medium transition-colors ${archiveFilter === 'all' ? 'bg-primary text-primary-foreground' : 'hover:bg-muted'}`, children: "All" })] }), _jsx("div", { className: "bg-border h-6 w-px" }), _jsx("button", { onClick: () => setStatusFilter(null), className: `rounded-full px-2.5 py-1 text-xs font-medium transition-colors ${statusFilter === null
+                                    ? 'bg-foreground text-background'
+                                    : 'bg-muted text-muted-foreground hover:bg-muted/80'}`, children: "All Status" }), Object.entries(STATUS_LABELS).map(([status, label]) => {
+                                const count = statusCounts[status];
+                                if (count === 0)
+                                    return null;
+                                return (_jsxs("button", { onClick: () => setStatusFilter(statusFilter === status ? null : status), className: `rounded-full px-2.5 py-1 text-xs font-medium transition-colors ${statusFilter === status
+                                        ? STATUS_COLORS[status]
+                                        : 'bg-muted text-muted-foreground hover:bg-muted/80'}`, children: [label, _jsx("span", { className: "ml-1 opacity-70", children: count })] }, status));
+                            }), hasActiveFilters ? (_jsxs(_Fragment, { children: [_jsx("div", { className: "bg-border h-6 w-px" }), _jsxs(Button, { variant: "ghost", size: "sm", onClick: clearFilters, className: "h-7 text-xs", children: [_jsx(X, { className: "mr-1 size-3" }), "Clear"] })] })) : null] }), groupBy ? (_jsxs("div", { className: "flex flex-wrap items-center gap-3", children: [_jsxs("div", { className: "flex items-center gap-1.5", children: [_jsx("span", { className: "text-muted-foreground text-xs font-medium", children: GROUP_BY_LABELS[groupBy] }), _jsxs(Button, { variant: "outline", size: "sm", className: "h-7 gap-1 text-xs", onClick: () => setGroupSortDir((d) => (d === 'asc' ? 'desc' : 'asc')), children: [groupSortDir === 'asc' ? (_jsx(ArrowDownAZ, { className: "size-3.5" })) : (_jsx(ArrowUpAZ, { className: "size-3.5" })), groupSortDir === 'asc' ? 'A-Z' : 'Z-A'] })] }), _jsx("div", { className: "bg-border h-5 w-px" }), _jsxs("div", { className: "flex items-center gap-1.5", children: [_jsx("span", { className: "text-muted-foreground text-xs font-medium", children: "Sort by" }), _jsxs(Select, { value: itemSortField, onValueChange: setItemSortField, children: [_jsx(SelectTrigger, { className: "h-7 w-[120px] text-xs", children: _jsx(SelectValue, {}) }), _jsx(SelectContent, { children: itemSortOptions.map((opt) => (_jsx(SelectItem, { value: opt.value, children: opt.label }, opt.value))) })] }), _jsxs(Button, { variant: "outline", size: "sm", className: "h-7 gap-1 text-xs", onClick: () => setItemSortDir((d) => (d === 'asc' ? 'desc' : 'asc')), children: [itemSortDir === 'asc' ? (_jsx(ArrowDownAZ, { className: "size-3.5" })) : (_jsx(ArrowUpAZ, { className: "size-3.5" })), itemSortDir === 'asc' ? 'A-Z' : 'Z-A'] })] })] })) : null, showAdvanced ? (_jsx("div", { className: "bg-muted/50 flex flex-wrap items-center gap-3 rounded-lg border p-3", children: _jsxs("div", { className: "flex items-center gap-2", children: [_jsx("span", { className: "text-muted-foreground text-xs font-medium", children: "Repository" }), _jsxs(Select, { value: repoFilter ?? '__all__', onValueChange: (v) => setRepoFilter(v === '__all__' ? null : v), children: [_jsx(SelectTrigger, { className: "h-8 w-[200px] text-xs", children: _jsx(SelectValue, { placeholder: "All repositories" }) }), _jsxs(SelectContent, { children: [_jsx(SelectItem, { value: "__all__", children: "All repositories" }), repoNames.map((name) => (_jsx(SelectItem, { value: name, children: name }, name)))] })] })] }) })) : null] }), _jsxs("div", { className: "text-muted-foreground flex items-center gap-2 text-xs", children: [_jsxs("span", { children: [filteredFeatures.length, " feature", filteredFeatures.length !== 1 ? 's' : ''] }), hasActiveFilters ? (_jsx(Badge, { variant: "secondary", className: "text-xs", children: "filtered" })) : null] }), _jsx("div", { className: "min-h-0 flex-1", children: filteredFeatures.length > 0 ? (_jsx(FeatureTreeTable, { data: filteredFeatures, repos: repos, onFeatureClick: handleFeatureClick, groupBy: groupBy, groupSortDir: groupSortDir, itemSortField: itemSortField, itemSortDir: itemSortDir })) : (_jsx(EmptyState, { icon: _jsx(Search, { className: "size-10" }), title: "No matching features", description: hasActiveFilters
+                        ? 'No features match your current filters. Try adjusting your search or filters.'
+                        : 'No features found in any repository.', action: hasActiveFilters ? (_jsx(Button, { variant: "outline", onClick: clearFilters, children: "Clear all filters" })) : undefined })) })] }));
 }

package/dist/src/presentation/web/app/features/get-feature-tree-data.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"get-feature-tree-data.d.ts","sourceRoot":"","sources":["../../../../../../src/presentation/web/app/features/get-feature-tree-data.ts"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,0CAA0C,CAAC;AAI/E,MAAM,WAAW,aAAa;IAC5B,IAAI,EAAE,MAAM,CAAC;IACb,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAsBD,wBAAsB,kBAAkB,IAAI,OAAO,CAAC;IAClD,QAAQ,EAAE,cAAc,EAAE,CAAC;IAC3B,KAAK,EAAE,aAAa,EAAE,CAAC;CACxB,CAAC,CAgCD"}
+{"version":3,"file":"get-feature-tree-data.d.ts","sourceRoot":"","sources":["../../../../../../src/presentation/web/app/features/get-feature-tree-data.ts"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,0CAA0C,CAAC;AAI/E,MAAM,WAAW,aAAa;IAC5B,IAAI,EAAE,MAAM,CAAC;IACb,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAsBD,wBAAsB,kBAAkB,IAAI,OAAO,CAAC;IAClD,QAAQ,EAAE,cAAc,EAAE,CAAC;IAC3B,KAAK,EAAE,aAAa,EAAE,CAAC;CACxB,CAAC,CAmCD"}

package/dist/src/presentation/web/app/features/get-feature-tree-data.js

@@ -21,7 +21,10 @@ function lifecycleToStatus(lifecycle) {
 export async function getFeatureTreeData() {
     const listFeatures = resolve('ListFeaturesUseCase');
     const listRepos = resolve('ListRepositoriesUseCase');
-    const [features, repositories] = await Promise.all([listFeatures.execute(), listRepos.execute()]);
+    const [features, repositories] = await Promise.all([
+        listFeatures.execute({ includeArchived: true }),
+        listRepos.execute(),
+    ]);
     const repoByPath = new Map();
     for (const repo of repositories) {
         repoByPath.set(repo.path, { name: repo.name, remoteUrl: repo.remoteUrl });

package/dist/src/presentation/web/components/common/repo-group/repo-group.js

@@ -8,5 +8,5 @@ export function RepoGroup({ repoName, featureCount, children, defaultOpen = true
     return (_jsxs("div", { "data-testid": "repo-group", className: "group/repo mb-1", children: [_jsxs("div", { className: "flex items-center", children: [_jsxs("button", { type: "button", onClick: () => setOpen(!open), className: cn('text-sidebar-foreground hover:bg-sidebar-accent flex min-w-0 flex-1 items-center gap-1.5 rounded-md px-2 py-1.5 text-left text-xs font-semibold', 'transition-colors duration-100'), "aria-expanded": open, children: [_jsx(ChevronDown, { className: cn('text-muted-foreground h-3.5 w-3.5 shrink-0 transition-transform duration-200', !open && '-rotate-90') }), _jsx(GitFork, { className: "text-muted-foreground h-3.5 w-3.5 shrink-0" }), _jsx("span", { className: "min-w-0 flex-1 truncate", children: repoName }), _jsx("span", { "aria-label": `${featureCount} features`, className: "bg-sidebar-accent text-sidebar-accent-foreground ml-auto inline-flex h-4 min-w-4 shrink-0 items-center justify-center rounded-full px-1 text-[0.6rem] font-medium tabular-nums", role: "img", children: featureCount })] }), onAddFeature ? (_jsx("button", { type: "button", "data-testid": "repo-add-feature", onClick: (e) => {
                             e.stopPropagation();
                             onAddFeature();
-                        }, className: cn('text-muted-foreground hover:text-sidebar-foreground hover:bg-sidebar-accent shrink-0 rounded-md p-1 opacity-0 transition-all duration-100 group-hover/repo:opacity-100', 'focus-visible:ring-ring focus-visible:opacity-100 focus-visible:ring-1 focus-visible:outline-none'), "aria-label": `Add feature to ${repoName}`, children: _jsx(Plus, { className: "h-3.5 w-3.5" }) })) : null] }), open ? _jsx("div", { className: "pl-2", children: children }) : null] }));
+                        }, className: cn('text-muted-foreground hover:text-sidebar-foreground hover:bg-sidebar-accent mr-2 shrink-0 rounded-md p-1 opacity-0 transition-all duration-100 group-hover/repo:opacity-100', 'focus-visible:ring-ring focus-visible:opacity-100 focus-visible:ring-1 focus-visible:outline-none'), "aria-label": `Add feature to ${repoName}`, children: _jsx(Plus, { className: "h-3.5 w-3.5" }) })) : null] }), open ? _jsx("div", { className: "pl-2", children: children }) : null] }));
 }

package/dist/src/presentation/web/components/features/feature-tree-table/feature-tree-table.d.ts

@@ -9,28 +9,44 @@ export interface FeatureTreeRow {
     repositoryName: string;
     remoteUrl?: string;
     parentId?: string;
-    /** Child rows for tree hierarchy */
+    /** Internal: child rows for tree hierarchy */
     _children?: FeatureTreeRow[];
-    /** Whether this row is a repository group header */
+    /** Internal: whether this row is a group header */
+    _isGroupHeader?: boolean;
+    /** Internal: number of features in this group */
+    _groupCount?: number;
+    /** Internal: whether this row is a repository group header (legacy tree) */
     _isRepoGroup?: boolean;
-    /** Number of features in this repo group */
+    /** Internal: number of features in this repo group (legacy tree) */
     _featureCount?: number;
 }
 export interface InventoryRepo {
     name: string;
     remoteUrl?: string;
 }
+export type GroupByField = 'repositoryName' | 'status' | 'lifecycle';
+export type SortDir = 'asc' | 'desc';
 export interface FeatureTreeTableProps {
     data: FeatureTreeRow[];
     repos?: InventoryRepo[];
     className?: string;
     onFeatureClick?: (featureId: string) => void;
+    /** When set, features are grouped into a tree by this field. */
+    groupBy?: GroupByField | null;
+    /** Sort direction for group headers. */
+    groupSortDir?: SortDir;
+    /** Field to sort items within each group (or globally in flat mode). */
+    itemSortField?: string;
+    /** Sort direction for items. */
+    itemSortDir?: SortDir;
 }
+export declare function displayLabel(groupBy: GroupByField, value: string): string;
 /**
- * Build tree-structured data grouped by repository.
+ * Build tree-structured data grouped by repository (legacy format).
  * Each repository becomes a parent node with its features as children.
  * Repos without features are included as empty groups.
  */
 export declare function buildTreeData(flatData: FeatureTreeRow[], repos?: InventoryRepo[]): FeatureTreeRow[];
-export declare function FeatureTreeTable({ data, repos, className, onFeatureClick, }: FeatureTreeTableProps): import("react/jsx-runtime").JSX.Element;
+export declare function buildGroupedTree(flatData: FeatureTreeRow[], groupBy: GroupByField, groupSortDir: SortDir, itemSortField: string, itemSortDir: SortDir): FeatureTreeRow[];
+export declare function FeatureTreeTable({ data, className, onFeatureClick, groupBy, groupSortDir, itemSortField, itemSortDir, }: FeatureTreeTableProps): import("react/jsx-runtime").JSX.Element;
 //# sourceMappingURL=feature-tree-table.d.ts.map

package/dist/src/presentation/web/components/features/feature-tree-table/feature-tree-table.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"feature-tree-table.d.ts","sourceRoot":"","sources":["../../../../../../../src/presentation/web/components/features/feature-tree-table/feature-tree-table.tsx"],"names":[],"mappings":"AAMA,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,2CAA2C,CAAC;AAC/E,OAAO,0BAA0B,CAAC;AAElC,MAAM,WAAW,cAAc;IAC7B,EAAE,EAAE,MAAM,CAAC;IACX,IAAI,EAAE,MAAM,CAAC;IACb,MAAM,EAAE,aAAa,CAAC;IACtB,SAAS,EAAE,MAAM,CAAC;IAClB,MAAM,EAAE,MAAM,CAAC;IACf,cAAc,EAAE,MAAM,CAAC;IACvB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,oCAAoC;IACpC,SAAS,CAAC,EAAE,cAAc,EAAE,CAAC;IAC7B,oDAAoD;IACpD,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB,4CAA4C;IAC5C,aAAa,CAAC,EAAE,MAAM,CAAC;CACxB;AAED,MAAM,WAAW,aAAa;IAC5B,IAAI,EAAE,MAAM,CAAC;IACb,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAED,MAAM,WAAW,qBAAqB;IACpC,IAAI,EAAE,cAAc,EAAE,CAAC;IACvB,KAAK,CAAC,EAAE,aAAa,EAAE,CAAC;IACxB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,cAAc,CAAC,EAAE,CAAC,SAAS,EAAE,MAAM,KAAK,IAAI,CAAC;CAC9C;AA+FD;;;;GAIG;AACH,wBAAgB,aAAa,CAC3B,QAAQ,EAAE,cAAc,EAAE,EAC1B,KAAK,CAAC,EAAE,aAAa,EAAE,GACtB,cAAc,EAAE,CAmElB;AAED,wBAAgB,gBAAgB,CAAC,EAC/B,IAAI,EACJ,KAAK,EACL,SAAS,EACT,cAAc,GACf,EAAE,qBAAqB,2CAgDvB"}
+{"version":3,"file":"feature-tree-table.d.ts","sourceRoot":"","sources":["../../../../../../../src/presentation/web/components/features/feature-tree-table/feature-tree-table.tsx"],"names":[],"mappings":"AAMA,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,2CAA2C,CAAC;AAC/E,OAAO,0BAA0B,CAAC;AAElC,MAAM,WAAW,cAAc;IAC7B,EAAE,EAAE,MAAM,CAAC;IACX,IAAI,EAAE,MAAM,CAAC;IACb,MAAM,EAAE,aAAa,CAAC;IACtB,SAAS,EAAE,MAAM,CAAC;IAClB,MAAM,EAAE,MAAM,CAAC;IACf,cAAc,EAAE,MAAM,CAAC;IACvB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,8CAA8C;IAC9C,SAAS,CAAC,EAAE,cAAc,EAAE,CAAC;IAC7B,mDAAmD;IACnD,cAAc,CAAC,EAAE,OAAO,CAAC;IACzB,iDAAiD;IACjD,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,4EAA4E;IAC5E,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB,oEAAoE;IACpE,aAAa,CAAC,EAAE,MAAM,CAAC;CACxB;AAED,MAAM,WAAW,aAAa;IAC5B,IAAI,EAAE,MAAM,CAAC;IACb,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAED,MAAM,MAAM,YAAY,GAAG,gBAAgB,GAAG,QAAQ,GAAG,WAAW,CAAC;AACrE,MAAM,MAAM,OAAO,GAAG,KAAK,GAAG,MAAM,CAAC;AAErC,MAAM,WAAW,qBAAqB;IACpC,IAAI,EAAE,cAAc,EAAE,CAAC;IACvB,KAAK,CAAC,EAAE,aAAa,EAAE,CAAC;IACxB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,cAAc,CAAC,EAAE,CAAC,SAAS,EAAE,MAAM,KAAK,IAAI,CAAC;IAC7C,gEAAgE;IAChE,OAAO,CAAC,EAAE,YAAY,GAAG,IAAI,CAAC;IAC9B,wCAAwC;IACxC,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB,wEAAwE;IACxE,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,gCAAgC;IAChC,WAAW,CAAC,EAAE,OAAO,CAAC;CACvB;AAiJD,wBAAgB,YAAY,CAAC,OAAO,EAAE,YAAY,EAAE,KAAK,EAAE,MAAM,GAAG,MAAM,CAGzE;AAED;;;;GAIG;AACH,wBAAgB,aAAa,CAC3B,QAAQ,EAAE,cAAc,EAAE,EAC1B,KAAK,CAAC,EAAE,aAAa,EAAE,GACtB,cAAc,EAAE,CAkDlB;AAED,wBAAgB,gBAAgB,CAC9B,QAAQ,EAAE,cAAc,EAAE,EAC1B,OAAO,EAAE,YAAY,EACrB,YAAY,EAAE,OAAO,EACrB,aAAa,EAAE,MAAM,EACrB,WAAW,EAAE,OAAO,GACnB,cAAc,EAAE,CA8ClB;AAID,wBAAgB,gBAAgB,CAAC,EAC/B,IAAI,EACJ,SAAS,EACT,cAAc,EACd,OAAc,EACd,YAAoB,EACpB,aAAsB,EACtB,WAAmB,GACpB,EAAE,qBAAqB,2CAyDvB"}

package/dist/src/presentation/web/components/features/feature-tree-table/feature-tree-table.js

@@ -4,6 +4,7 @@ import { useEffect, useRef, useCallback } from 'react';
 import { TabulatorFull as Tabulator } from 'tabulator-tables';
 import { cn } from '../../../lib/utils.js';
 import './feature-tree-table.css';
+// ── Constants ────────────────────────────────────────────────
 const STATUS_LABELS = {
     'action-needed': 'Action Needed',
     'in-progress': 'In Progress',
@@ -12,119 +13,155 @@ const STATUS_LABELS = {
     error: 'Error',
     done: 'Done',
 };
-/** SVG repo icon — lucide FolderGit2 */
-const REPO_ICON_SVG = `<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M20 20a2 2 0 0 0 2-2V8a2 2 0 0 0-2-2h-7.9a2 2 0 0 1-1.69-.9L9.6 3.9A2 2 0 0 0 7.93 3H4a2 2 0 0 0-2 2v13a2 2 0 0 0 2 2Z"/><circle cx="12" cy="13" r="2"/><path d="M14 13h3"/><path d="M7 13h3"/></svg>`;
+/** SVG repo icon — lucide FolderGit2 (16px) */
+const REPO_ICON_SVG = `<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M20 20a2 2 0 0 0 2-2V8a2 2 0 0 0-2-2h-7.9a2 2 0 0 1-1.69-.9L9.6 3.9A2 2 0 0 0 7.93 3H4a2 2 0 0 0-2 2v13a2 2 0 0 0 2 2Z"/><circle cx="12" cy="13" r="2"/><path d="M14 13h3"/><path d="M7 13h3"/></svg>`;
+/** SVG group icon — lucide Layers (16px) */
+const GROUP_ICON_SVG = `<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="m12.83 2.18a2 2 0 0 0-1.66 0L2.6 6.08a1 1 0 0 0 0 1.83l8.58 3.91a2 2 0 0 0 1.66 0l8.58-3.9a1 1 0 0 0 0-1.83Z"/><path d="m22.54 12.43-1.42-.65-8.28 3.78a2 2 0 0 1-1.66 0l-8.28-3.78-1.42.65a1 1 0 0 0 0 1.83l8.58 3.91a2 2 0 0 0 1.66 0l8.58-3.9a1 1 0 0 0 0-1.83Z"/></svg>`;
+// ── Formatters ───────────────────────────────────────────────
+function escapeHtml(text) {
+    const div = typeof document !== 'undefined' ? document.createElement('div') : null;
+    if (div) {
+        div.textContent = text;
+        return div.innerHTML;
+    }
+    return text.replace(/&/g, '&amp;').replace(/</g, '&lt;').replace(/>/g, '&gt;');
+}
 function statusFormatter(cell) {
     const row = cell.getRow().getData();
-    if (row._isRepoGroup)
+    if (row._isGroupHeader)
         return '';
     const value = cell.getValue();
     const label = STATUS_LABELS[value] ?? value;
     return `<span class="status-pill status-pill--${value}"><span class="status-dot"></span>${label}</span>`;
 }
-function nameFormatter(cell) {
+function branchFormatter(cell) {
     const row = cell.getRow().getData();
-    if (row._isRepoGroup) {
-        const count = row._featureCount ?? 0;
-        const countLabel = count === 0 ? 'No features' : count === 1 ? '1 Feature' : `${count} Features`;
-        const remoteLabel = row.remoteUrl
-            ? `<span class="repo-remote-url">${escapeHtml(row.remoteUrl)}</span>`
-            : '';
-        return `<span class="repo-name-cell">${REPO_ICON_SVG}<span class="repo-name-text"><span class="repo-name-primary"><span class="repo-name-title">${escapeHtml(row.name)}</span><span class="repo-feature-count">${countLabel}</span></span>${remoteLabel}</span></span>`;
-    }
+    if (row._isGroupHeader)
+        return '';
+    const val = cell.getValue();
+    if (!val)
+        return '';
+    return `<code style="font-size:12px;color:var(--color-muted-foreground,#64748b);font-family:var(--font-mono)">${escapeHtml(val)}</code>`;
+}
+function lifecycleFormatter(cell) {
+    const row = cell.getRow().getData();
+    if (row._isGroupHeader)
+        return '';
     return escapeHtml(cell.getValue());
 }
-function escapeHtml(text) {
-    const div = typeof document !== 'undefined' ? document.createElement('div') : null;
-    if (div) {
-        div.textContent = text;
-        return div.innerHTML;
-    }
-    return text.replace(/&/g, '&amp;').replace(/</g, '&lt;').replace(/>/g, '&gt;');
+function repoFormatter(cell) {
+    const row = cell.getRow().getData();
+    if (row._isGroupHeader)
+        return '';
+    const val = cell.getValue();
+    return `<span style="display:inline-flex;align-items:center;gap:6px">${REPO_ICON_SVG}<span>${escapeHtml(val)}</span></span>`;
+}
+function groupHeaderNameFormatter(groupBy) {
+    return (cell) => {
+        const row = cell.getRow().getData();
+        if (!row._isGroupHeader)
+            return escapeHtml(cell.getValue());
+        const icon = groupBy === 'repositoryName' ? REPO_ICON_SVG : GROUP_ICON_SVG;
+        const count = row._groupCount ?? 0;
+        const countLabel = count === 1 ? '1 feature' : `${count} features`;
+        return `<span style="display:inline-flex;align-items:center;gap:8px;font-weight:600">${icon}<span>${escapeHtml(row.name)}</span><span style="font-weight:400;color:var(--color-muted-foreground,#64748b);font-size:12px">${countLabel}</span></span>`;
+    };
 }
-function buildColumns(onFeatureClick) {
-    return [
+/** All possible columns. We'll filter out the grouped-by column in tree mode. */
+function buildColumns({ onFeatureClick, groupBy }) {
+    const clickProps = onFeatureClick
+        ? {
+            cellClick: (_e, cell) => {
+                const data = cell.getRow().getData();
+                if (data._isGroupHeader)
+                    return;
+                onFeatureClick(data.id);
+            },
+            cssClass: 'cursor-pointer',
+        }
+        : {};
+    const isGrouped = !!groupBy;
+    const cols = [
         {
             title: 'Name',
             field: 'name',
             widthGrow: 3,
-            formatter: nameFormatter,
-            ...(onFeatureClick && {
-                cellClick: (_e, cell) => {
-                    const data = cell.getRow().getData();
-                    if (data._isRepoGroup)
-                        return;
-                    onFeatureClick(data.id);
-                },
-                cssClass: 'cursor-pointer',
-            }),
-        },
-        {
-            title: 'Status',
-            field: 'status',
-            widthGrow: 1.5,
-            formatter: statusFormatter,
-        },
-        {
-            title: 'Lifecycle',
-            field: 'lifecycle',
-            widthGrow: 1.5,
-            formatter: (cell) => {
-                const row = cell.getRow().getData();
-                if (row._isRepoGroup)
-                    return '';
-                return cell.getValue();
-            },
+            headerSort: !isGrouped,
+            formatter: isGrouped
+                ? groupHeaderNameFormatter(groupBy)
+                : (cell) => escapeHtml(cell.getValue()),
+            ...clickProps,
         },
+        groupBy !== 'repositoryName'
+            ? {
+                title: 'Repository',
+                field: 'repositoryName',
+                widthGrow: 2,
+                headerSort: !isGrouped,
+                formatter: repoFormatter,
+            }
+            : null,
+        groupBy !== 'status'
+            ? {
+                title: 'Status',
+                field: 'status',
+                widthGrow: 1.5,
+                headerSort: !isGrouped,
+                formatter: statusFormatter,
+            }
+            : null,
+        groupBy !== 'lifecycle'
+            ? {
+                title: 'Lifecycle',
+                field: 'lifecycle',
+                widthGrow: 1.5,
+                headerSort: !isGrouped,
+                formatter: lifecycleFormatter,
+            }
+            : null,
         {
             title: 'Branch',
             field: 'branch',
             widthGrow: 2,
-            formatter: (cell) => {
-                const row = cell.getRow().getData();
-                if (row._isRepoGroup)
-                    return '';
-                const val = cell.getValue();
-                if (!val)
-                    return '';
-                return `<code style="font-size:12px;color:var(--color-muted-foreground,#64748b);font-family:var(--font-mono)">${escapeHtml(val)}</code>`;
-            },
+            headerSort: !isGrouped,
+            formatter: branchFormatter,
         },
     ];
+    return cols.filter(Boolean);
+}
+// ── Tree builder ─────────────────────────────────────────────
+export function displayLabel(groupBy, value) {
+    if (groupBy === 'status')
+        return STATUS_LABELS[value] ?? value;
+    return value;
 }
 /**
- * Build tree-structured data grouped by repository.
+ * Build tree-structured data grouped by repository (legacy format).
  * Each repository becomes a parent node with its features as children.
  * Repos without features are included as empty groups.
  */
 export function buildTreeData(flatData, repos) {
-    // Group features by repository
     const byRepo = new Map();
     for (const item of flatData) {
         const repoName = item.repositoryName || 'Unknown';
-        if (!byRepo.has(repoName)) {
+        if (!byRepo.has(repoName))
             byRepo.set(repoName, []);
-        }
         byRepo.get(repoName).push(item);
     }
-    // Ensure all known repos are represented (even without features)
     const repoMeta = new Map();
     if (repos) {
         for (const repo of repos) {
             repoMeta.set(repo.name, { remoteUrl: repo.remoteUrl });
-            if (!byRepo.has(repo.name)) {
+            if (!byRepo.has(repo.name))
                 byRepo.set(repo.name, []);
-            }
         }
     }
     const roots = [];
     for (const [repoName, features] of byRepo) {
-        // Build parent-child relationships within this repo group
         const lookup = new Map();
         const repoChildren = [];
-        for (const item of features) {
+        for (const item of features)
             lookup.set(item.id, { ...item, _children: [] });
-        }
         for (const item of features) {
             const node = lookup.get(item.id);
             if (item.parentId && lookup.has(item.parentId)) {
@@ -134,14 +171,12 @@ export function buildTreeData(flatData, repos) {
                 repoChildren.push(node);
             }
         }
-        // Clean up empty _children arrays
         for (const node of lookup.values()) {
-            if (node._children?.length === 0) {
+            if (node._children?.length === 0)
                 delete node._children;
-            }
         }
         const remoteUrl = repoMeta.get(repoName)?.remoteUrl ?? features[0]?.remoteUrl;
-        const repoGroup = {
+        roots.push({
             id: `repo-${repoName}`,
             name: repoName,
             status: 'pending',
@@ -152,12 +187,51 @@ export function buildTreeData(flatData, repos) {
             _isRepoGroup: true,
             _featureCount: features.length,
             ...(repoChildren.length > 0 ? { _children: repoChildren } : {}),
-        };
-        roots.push(repoGroup);
+        });
     }
     return roots;
 }
-export function FeatureTreeTable({ data, repos, className, onFeatureClick, }) {
+export function buildGroupedTree(flatData, groupBy, groupSortDir, itemSortField, itemSortDir) {
+    // Group features by field value
+    const groups = new Map();
+    for (const item of flatData) {
+        const key = item[groupBy] || 'Unknown';
+        if (!groups.has(key))
+            groups.set(key, []);
+        groups.get(key).push(item);
+    }
+    // Sort items within each group
+    const sortItems = (items) => [...items].sort((a, b) => {
+        const aVal = String(a[itemSortField] ?? '').toLowerCase();
+        const bVal = String(b[itemSortField] ?? '').toLowerCase();
+        const cmp = aVal.localeCompare(bVal);
+        return itemSortDir === 'asc' ? cmp : -cmp;
+    });
+    // Build group header rows
+    const roots = [];
+    for (const [key, features] of groups) {
+        const sortedChildren = sortItems(features);
+        roots.push({
+            id: `group-${groupBy}-${key}`,
+            name: displayLabel(groupBy, key),
+            status: 'pending',
+            lifecycle: '',
+            branch: '',
+            repositoryName: '',
+            _isGroupHeader: true,
+            _groupCount: features.length,
+            _children: sortedChildren,
+        });
+    }
+    // Sort groups
+    roots.sort((a, b) => {
+        const cmp = a.name.localeCompare(b.name);
+        return groupSortDir === 'asc' ? cmp : -cmp;
+    });
+    return roots;
+}
+// ── Component ────────────────────────────────────────────────
+export function FeatureTreeTable({ data, className, onFeatureClick, groupBy = null, groupSortDir = 'asc', itemSortField = 'name', itemSortDir = 'asc', }) {
     const containerRef = useRef(null);
     const tabulatorRef = useRef(null);
     const onFeatureClickRef = useRef(onFeatureClick);
@@ -168,29 +242,37 @@ export function FeatureTreeTable({ data, repos, className, onFeatureClick, }) {
     useEffect(() => {
         if (!containerRef.current)
             return;
-        const treeData = buildTreeData(data, repos);
-        const columns = buildColumns(stableOnFeatureClick);
+        const isGrouped = !!groupBy;
+        const columns = buildColumns({ onFeatureClick: stableOnFeatureClick, groupBy });
+        const tableData = isGrouped
+            ? buildGroupedTree(data, groupBy, groupSortDir, itemSortField, itemSortDir)
+            : data;
         const table = new Tabulator(containerRef.current, {
-            data: treeData,
+            data: tableData,
             columns,
-            dataTree: true,
-            dataTreeStartExpanded: true,
             layout: 'fitColumns',
             height: '100%',
-            placeholder: 'No repositories found',
-            headerSortClickElement: 'icon',
-            rowFormatter: (row) => {
-                const rowData = row.getData();
-                if (rowData._isRepoGroup) {
-                    row.getElement().classList.add('tabulator-row-repo-group');
+            placeholder: 'No features found',
+            ...(isGrouped
+                ? {
+                    dataTree: true,
+                    dataTreeStartExpanded: true,
+                    rowFormatter: (row) => {
+                        const rowData = row.getData();
+                        if (rowData._isGroupHeader) {
+                            row.getElement().classList.add('tabulator-row-repo-group');
+                        }
+                    },
                 }
-            },
+                : {
+                    initialSort: [{ column: 'repositoryName', dir: 'asc' }],
+                }),
         });
         tabulatorRef.current = table;
         return () => {
             table.destroy();
             tabulatorRef.current = null;
         };
-    }, [data, repos, stableOnFeatureClick]);
+    }, [data, stableOnFeatureClick, groupBy, groupSortDir, itemSortField, itemSortDir]);
     return (_jsx("div", { "data-testid": "feature-tree-table", className: cn('h-full w-full', className), ref: containerRef }));
 }

package/dist/src/presentation/web/components/features/feature-tree-table/index.d.ts

@@ -1,3 +1,3 @@
-export { FeatureTreeTable, buildTreeData } from './feature-tree-table.js';
-export type { FeatureTreeTableProps, FeatureTreeRow, InventoryRepo } from './feature-tree-table.js';
+export { FeatureTreeTable, buildTreeData, buildGroupedTree, displayLabel, } from './feature-tree-table.js';
+export type { FeatureTreeTableProps, FeatureTreeRow, InventoryRepo, GroupByField, SortDir, } from './feature-tree-table.js';
 //# sourceMappingURL=index.d.ts.map