@shepai/cli 1.173.0 → 1.174.0-pr530.be90793

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

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

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../../../src/presentation/web/components/features/feature-tree-table/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,gBAAgB,EAAE,aAAa,EAAE,MAAM,sBAAsB,CAAC;AACvE,YAAY,EAAE,qBAAqB,EAAE,cAAc,EAAE,aAAa,EAAE,MAAM,sBAAsB,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../../../src/presentation/web/components/features/feature-tree-table/index.ts"],"names":[],"mappings":"AAAA,OAAO,EACL,gBAAgB,EAChB,aAAa,EACb,gBAAgB,EAChB,YAAY,GACb,MAAM,sBAAsB,CAAC;AAC9B,YAAY,EACV,qBAAqB,EACrB,cAAc,EACd,aAAa,EACb,YAAY,EACZ,OAAO,GACR,MAAM,sBAAsB,CAAC"}

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

@@ -1 +1 @@
-export { FeatureTreeTable, buildTreeData } from './feature-tree-table.js';
+export { FeatureTreeTable, buildTreeData, buildGroupedTree, displayLabel, } from './feature-tree-table.js';