dslinter 0.1.13 → 0.2.2

package/src/dashboard/FindingsList.tsx

@@ -11,6 +11,7 @@ import { shortPath } from "./paths";
 import type { LintFinding, Severity } from "../types/report";
 import { Badge } from "../components/ui/badge";
 import { ToggleGroup, ToggleGroupItem } from "../components/ui/toggle-group";
+import { TruncatedPath } from "../components/TruncatedPath";
 
 type Filter = "all" | Severity;
 
@@ -42,70 +43,71 @@ export function FindingsList({
     return c;
   }, [findings]);
 
-  const filtered =
-    filter === "all" ? findings : findings.filter((f) => f.severity === filter);
+  const filtered = useMemo(
+    () => (filter === "all" ? findings : findings.filter((f) => f.severity === filter)),
+    [findings, filter],
+  );
 
   if (findings.length === 0) {
     return (
       <p className="rounded-lg border border-dashed border-border bg-muted/30 px-4 py-8 text-center text-sm text-muted-foreground">
-        No findings — rules are quiet on this snapshot.
+        No findings
       </p>
     );
   }
 
   return (
     <div className="space-y-3">
-      <div className="flex flex-wrap gap-2">
-        <ToggleGroup
-          type="single"
-          value={filter}
-          onValueChange={(value) => {
-            if (isFilter(value)) setFilter(value);
-          }}
-          variant="outline"
-          size="sm"
-          aria-label="Filter findings by severity"
-          className="contents"
+      <ToggleGroup
+        type="single"
+        value={filter}
+        onValueChange={(value) => {
+          if (isFilter(value)) setFilter(value);
+        }}
+        variant="outline"
+        size="sm"
+        aria-label="Filter findings by severity"
+        className="contents"
+      >
+        <ToggleGroupItem
+          value="all"
+          className="rounded-full px-2.5 text-xs font-medium"
+        >
+          All
+          <span className="ml-1 tabular-nums text-muted-foreground">
+            {findings.length}
+          </span>
+        </ToggleGroupItem>
+        <ToggleGroupItem
+          value="warning"
+          className="rounded-full px-2.5 text-xs font-medium"
+        >
+          Warnings
+          <span className="ml-1 tabular-nums text-muted-foreground">
+            {counts.warning}
+          </span>
+        </ToggleGroupItem>
+        <ToggleGroupItem
+          value="error"
+          className="rounded-full px-2.5 text-xs font-medium"
         >
-          <ToggleGroupItem
-            value="all"
-            className="rounded-full px-2.5 text-xs font-medium"
-          >
-            All
-            <span className="ml-1 tabular-nums text-muted-foreground">
-              {findings.length}
-            </span>
-          </ToggleGroupItem>
-          <ToggleGroupItem
-            value="warning"
-            className="rounded-full px-2.5 text-xs font-medium"
-          >
-            Warnings
-            <span className="ml-1 tabular-nums text-muted-foreground">
-              {counts.warning}
-            </span>
-          </ToggleGroupItem>
-          <ToggleGroupItem
-            value="error"
-            className="rounded-full px-2.5 text-xs font-medium"
-          >
-            Errors
-            <span className="ml-1 tabular-nums text-muted-foreground">
-              {counts.error}
-            </span>
-          </ToggleGroupItem>
-          <ToggleGroupItem
-            value="info"
-            className="rounded-full px-2.5 text-xs font-medium"
-          >
-            Info
-            <span className="ml-1 tabular-nums text-muted-foreground">
-              {counts.info}
-            </span>
-          </ToggleGroupItem>
-        </ToggleGroup>
-      </div>
-      <Table>
+          Errors
+          <span className="ml-1 tabular-nums text-muted-foreground">
+            {counts.error}
+          </span>
+        </ToggleGroupItem>
+        <ToggleGroupItem
+          value="info"
+          className="rounded-full px-2.5 text-xs font-medium"
+        >
+          Info
+          <span className="ml-1 tabular-nums text-muted-foreground">
+            {counts.info}
+          </span>
+        </ToggleGroupItem>
+      </ToggleGroup>
+
+      <Table className="mt-4">
         <TableHeader>
           <TableRow>
             <TableHead scope="col">Severity</TableHead>
@@ -139,8 +141,16 @@ export function FindingsList({
               <TableCell className="whitespace-normal px-3 py-2 text-sm">
                 {f.message}
               </TableCell>
-              <TableCell className="whitespace-normal px-3 py-2 font-mono text-xs text-muted-foreground">
-                {shortPath(root, f.path)}:{f.line != null ? f.line : "—"}
+              <TableCell className="min-w-0 px-3 py-2 font-mono text-xs text-muted-foreground">
+                <div className="flex min-w-0 items-baseline">
+                  <TruncatedPath
+                    path={shortPath(root, f.path)}
+                    className="min-w-0 flex-1 text-xs"
+                  />
+                  <span className="shrink-0">
+                    :{f.line != null ? f.line : "—"}
+                  </span>
+                </div>
               </TableCell>
             </TableRow>
           ))}

package/src/dashboard/ScannedTokenWall.tsx

@@ -5,7 +5,7 @@ import {
   HoverCardTrigger,
 } from "../components/ui/hover-card";
 import { cn } from "../lib/utils";
-import { shortPath } from "./paths";
+import { TruncatedPath } from "../components/TruncatedPath";
 import {
   filterTokenRows,
   type MergedTokenView,
@@ -71,8 +71,8 @@ function TokenUsageHover({ row }: { row: ScannedTokenRow }) {
         </p>
         <ul className="mt-2 max-h-40 space-y-1 overflow-y-auto text-muted-foreground">
           {row.usageFiles.slice(0, 12).map((f) => (
-            <li key={f} className="truncate font-mono">
-              {shortPath(f)}
+            <li key={f} className="min-w-0">
+              <TruncatedPath path={f} className="text-xs" />
             </li>
           ))}
           {row.usageFiles.length > 12 ? (

package/src/dashboard/aggregate.test.ts

@@ -0,0 +1,74 @@
+import { describe, expect, it } from "vitest";
+import type { WorkspaceReport } from "../types/report";
+import { componentCatalogFamiliesFromReport, componentCatalogTreeFromReport } from "./aggregate";
+
+function reportWithDefinitions(
+  definitions: WorkspaceReport["files"][number]["definitions"],
+  path = "/repo/src/components/ui/dropdown-menu.tsx",
+): WorkspaceReport {
+  return {
+    root: "/repo",
+    files: [
+      {
+        path,
+        definitions,
+        usages: [],
+        parse_errors: [],
+      },
+    ],
+    findings: [],
+    duplicate_components: [],
+    usage_by_component: [],
+    scores: {
+      design_system_health: 0,
+      ux_consistency: 0,
+      accessibility: 0,
+      maintainability: 0,
+    },
+  };
+}
+
+describe("componentCatalogFamiliesFromReport", () => {
+  it("groups shadcn-style kebab filename exports under the normalized root", () => {
+    const report = reportWithDefinitions([
+      { name: "DropdownMenu", kind: "function", line: 1 },
+      { name: "DropdownMenuContent", kind: "function", line: 2 },
+      { name: "DropdownMenuItem", kind: "function", line: 3 },
+      { name: "DropdownMenuTrigger", kind: "function", line: 4 },
+    ]);
+
+    expect(componentCatalogFamiliesFromReport(report)).toEqual([
+      {
+        parent: "DropdownMenu",
+        children: ["DropdownMenuContent", "DropdownMenuItem", "DropdownMenuTrigger"],
+        path: "/repo/src/components/ui/dropdown-menu.tsx",
+      },
+    ]);
+  });
+
+  it("leaves single export files flat", () => {
+    const report = reportWithDefinitions(
+      [{ name: "Button", kind: "function", line: 1 }],
+      "/repo/src/components/ui/button.tsx",
+    );
+
+    expect(componentCatalogFamiliesFromReport(report)).toEqual([]);
+    expect(componentCatalogTreeFromReport(report)).toEqual([{ type: "component", name: "Button" }]);
+  });
+
+  it("does not group sibling exports when no export matches the filename root", () => {
+    const report = reportWithDefinitions(
+      [
+        { name: "MenuRoot", kind: "function", line: 1 },
+        { name: "MenuItem", kind: "function", line: 2 },
+      ],
+      "/repo/src/components/ui/dropdown-menu.tsx",
+    );
+
+    expect(componentCatalogFamiliesFromReport(report)).toEqual([]);
+    expect(componentCatalogTreeFromReport(report)).toEqual([
+      { type: "component", name: "MenuItem" },
+      { type: "component", name: "MenuRoot" },
+    ]);
+  });
+});

package/src/dashboard/aggregate.ts

@@ -1,4 +1,8 @@
-import type { ComponentDefinition, UsageSummary, WorkspaceReport } from "../types/report";
+import type { ComponentDefinition, FileScan, UsageSummary, WorkspaceReport } from "../types/report";
+import {
+  definitionPathsForName,
+  isCatalogComponentHidden,
+} from "./catalogVisibility";
 
 export interface DefinitionSite {
   kind: ComponentDefinition["kind"];
@@ -6,13 +10,51 @@ export interface DefinitionSite {
   line: number;
 }
 
-const HIDDEN_COMPONENTS = new Set(["App", "React.StrictMode"]);
+export type CatalogFamily = {
+  parent: string;
+  children: string[];
+  path: string;
+};
+
+export type CatalogTreeItem = { type: "component"; name: string } | CatalogTreeFamily;
+
+export type CatalogTreeFamily = {
+  type: "family";
+  parent: string;
+  children: string[];
+  path: string;
+};
+
+const PLAYABLE_KINDS = new Set<ComponentDefinition["kind"]>([
+  "function",
+  "class",
+  "const_arrow",
+  "const_function",
+  "wrapped_component",
+]);
+
+function isPlayableDefinition(def: ComponentDefinition): boolean {
+  return PLAYABLE_KINDS.has(def.kind);
+}
+
+function fileStem(path: string): string {
+  const base = path.split("/").pop() ?? path;
+  return base.replace(/\.(tsx|jsx)$/i, "");
+}
+
+function normalizedName(value: string): string {
+  return value
+    .replace(/\.playground$/i, "")
+    .split("")
+    .filter((c) => c !== "-" && c !== "_")
+    .join("")
+    .toLowerCase();
+}
 
 export function aggregateDefinitions(report: WorkspaceReport): Map<string, DefinitionSite[]> {
   const map = new Map<string, DefinitionSite[]>();
   for (const file of report.files ?? []) {
     for (const d of file.definitions ?? []) {
-      if (HIDDEN_COMPONENTS.has(d.name)) continue;
       const list = map.get(d.name) ?? [];
       list.push({ kind: d.kind, path: file.path, line: d.line });
       map.set(d.name, list);
@@ -26,19 +68,16 @@ export function aggregateDefinitions(report: WorkspaceReport): Map<string, Defin
 
 /** Merges `declared_props` from scan definitions and playground rows (source order, then deduped). */
 export function aggregateDeclaredProps(report: WorkspaceReport): Map<string, string[]> {
-  const map = new Map<string, string[]>();
+  const sets = new Map<string, Set<string>>();
 
   const add = (name: string, props: readonly string[] | undefined) => {
-    if (HIDDEN_COMPONENTS.has(name)) return;
     if (!props?.length) return;
-    let list = map.get(name);
-    if (!list) {
-      list = [];
-      map.set(name, list);
-    }
-    for (const p of props) {
-      if (!list.includes(p)) list.push(p);
+    let set = sets.get(name);
+    if (!set) {
+      set = new Set();
+      sets.set(name, set);
     }
+    for (const p of props) set.add(p);
   };
 
   for (const file of report.files ?? []) {
@@ -50,37 +89,122 @@ export function aggregateDeclaredProps(report: WorkspaceReport): Map<string, str
     add(pg.export_name, pg.declared_props);
   }
 
+  const map = new Map<string, string[]>();
+  for (const [name, set] of sets) {
+    map.set(name, [...set]);
+  }
   return map;
 }
 
 export function usageMap(report: WorkspaceReport): Map<string, UsageSummary> {
   const m = new Map<string, UsageSummary>();
   for (const row of report.usage_by_component ?? []) {
-    if (HIDDEN_COMPONENTS.has(row.component)) continue;
     m.set(row.component, row);
   }
   return m;
 }
 
+function isVisibleCatalogName(report: WorkspaceReport, name: string): boolean {
+  return !isCatalogComponentHidden(
+    name,
+    report,
+    definitionPathsForName(report, name),
+  );
+}
+
 export function catalogComponentNames(
   defs: Map<string, DefinitionSite[]>,
   usages: Map<string, UsageSummary>,
+  report: WorkspaceReport,
 ): string[] {
   const names = new Set<string>();
-  for (const k of defs.keys()) names.add(k);
-  for (const k of usages.keys()) names.add(k);
+  for (const k of defs.keys()) {
+    if (isVisibleCatalogName(report, k)) names.add(k);
+  }
+  for (const k of usages.keys()) {
+    if (isVisibleCatalogName(report, k)) names.add(k);
+  }
   return [...names].sort((a, b) => a.localeCompare(b));
 }
 
-/** Stable DOM id for a catalog table row (used for hash deep-links). */
-export function catalogRowDomId(name: string): string {
-  return `catalog-row-${encodeURIComponent(name)}`;
-}
-
 /** Unique component names for sidebar / command palette (definitions ∪ usage). */
 export function componentCatalogNamesFromReport(
   report: WorkspaceReport | null | undefined,
 ): string[] {
   if (!report) return [];
-  return catalogComponentNames(aggregateDefinitions(report), usageMap(report));
+  return catalogComponentNames(aggregateDefinitions(report), usageMap(report), report);
+}
+
+function familyFromFile(file: FileScan, report: WorkspaceReport): CatalogFamily | null {
+  const defs = (file.definitions ?? []).filter((d) => {
+    if (!isPlayableDefinition(d)) return false;
+    return !isCatalogComponentHidden(d.name, report, [file.path]);
+  });
+  if (defs.length < 2) return null;
+
+  const stem = normalizedName(fileStem(file.path));
+  const root = defs.find((d) => normalizedName(d.name) === stem);
+  if (!root) return null;
+
+  const children = defs
+    .map((d) => d.name)
+    .filter((name) => name !== root.name && name.startsWith(root.name))
+    .sort((a, b) => a.localeCompare(b));
+  if (children.length === 0) return null;
+
+  return { parent: root.name, children, path: file.path };
+}
+
+export function componentCatalogFamiliesFromReport(
+  report: WorkspaceReport | null | undefined,
+): CatalogFamily[] {
+  if (!report) return [];
+  const byParent = new Map<string, CatalogFamily>();
+  for (const file of report.files ?? []) {
+    const family = familyFromFile(file, report);
+    if (!family) continue;
+    if (!isVisibleCatalogName(report, family.parent)) continue;
+    const existing = byParent.get(family.parent);
+    if (!existing) {
+      byParent.set(family.parent, family);
+      continue;
+    }
+    const children = new Set([...existing.children, ...family.children]);
+    byParent.set(family.parent, {
+      ...existing,
+      children: [...children].sort((a, b) => a.localeCompare(b)),
+    });
+  }
+  return [...byParent.values()].sort((a, b) => a.parent.localeCompare(b.parent));
+}
+
+export function componentCatalogTreeFromReport(
+  report: WorkspaceReport | null | undefined,
+): CatalogTreeItem[] {
+  const names = componentCatalogNamesFromReport(report);
+  const families = componentCatalogFamiliesFromReport(report);
+  const familyByParent = new Map(families.map((f) => [f.parent, f]));
+  const childNames = new Set(families.flatMap((f) => f.children));
+  const items: CatalogTreeItem[] = [];
+
+  for (const name of names) {
+    const family = familyByParent.get(name);
+    if (family) {
+      items.push({ type: "family", ...family });
+      continue;
+    }
+    if (childNames.has(name)) continue;
+    items.push({ type: "component", name });
+  }
+
+  return items;
+}
+
+export function componentCatalogFamilyForName(
+  report: WorkspaceReport | null | undefined,
+  name: string,
+): CatalogFamily | undefined {
+  return componentCatalogFamiliesFromReport(report).find(
+    (family) => family.parent === name || family.children.includes(name),
+  );
 }

package/src/dashboard/catalogVisibility.test.ts

@@ -0,0 +1,93 @@
+import { describe, expect, it } from "vitest";
+import type { WorkspaceReport } from "../types/report";
+import {
+  componentCatalogNamesFromReport,
+  componentCatalogTreeFromReport,
+} from "./aggregate";
+import { isCatalogComponentHidden, pathMatchesPrefix, reportWithExtraHidden } from "./catalogVisibility";
+
+function minimalReport(overrides: Partial<WorkspaceReport> = {}): WorkspaceReport {
+  return {
+    root: "/repo",
+    files: [],
+    findings: [],
+    duplicate_components: [],
+    usage_by_component: [],
+    scores: {
+      design_system_health: 0,
+      ux_consistency: 0,
+      accessibility: 0,
+      maintainability: 0,
+    },
+    ...overrides,
+  };
+}
+
+describe("catalogVisibility", () => {
+  it("pathMatchesPrefix treats repo-relative paths", () => {
+    expect(pathMatchesPrefix("resources/js/components/ui/button.tsx", "resources/js/components")).toBe(
+      true,
+    );
+    expect(pathMatchesPrefix("resources/js/pages/foo.tsx", "resources/js/components")).toBe(false);
+  });
+
+  it("hides by component name from report config", () => {
+    const report = minimalReport({
+      config: { hidden_components: ["Secret"] },
+      files: [
+        {
+          path: "resources/js/components/secret.tsx",
+          definitions: [{ name: "Secret", kind: "function", line: 1 }],
+          usages: [],
+          parse_errors: [],
+        },
+        {
+          path: "resources/js/components/button.tsx",
+          definitions: [{ name: "Button", kind: "function", line: 1 }],
+          usages: [],
+          parse_errors: [],
+        },
+      ],
+    });
+    expect(isCatalogComponentHidden("Secret", report, ["resources/js/components/secret.tsx"])).toBe(
+      true,
+    );
+    expect(componentCatalogNamesFromReport(report)).toEqual(["Button"]);
+  });
+
+  it("hides by path prefix", () => {
+    const report = minimalReport({
+      config: { hidden_paths: ["resources/js/components/legacy"] },
+      files: [
+        {
+          path: "resources/js/components/legacy/old.tsx",
+          definitions: [{ name: "Old", kind: "function", line: 1 }],
+          usages: [],
+          parse_errors: [],
+        },
+      ],
+    });
+    expect(componentCatalogNamesFromReport(report)).toEqual([]);
+  });
+
+  it("reportWithExtraHidden merges optimistic names", () => {
+    const report = minimalReport({
+      files: [
+        {
+          path: "a.tsx",
+          definitions: [{ name: "A", kind: "function", line: 1 }],
+          usages: [],
+          parse_errors: [],
+        },
+        {
+          path: "b.tsx",
+          definitions: [{ name: "B", kind: "function", line: 1 }],
+          usages: [],
+          parse_errors: [],
+        },
+      ],
+    });
+    const merged = reportWithExtraHidden(report, ["B"]);
+    expect(componentCatalogTreeFromReport(merged)).toEqual([{ type: "component", name: "A" }]);
+  });
+});

package/src/dashboard/catalogVisibility.ts

@@ -0,0 +1,108 @@
+import type { WorkspaceReport } from "../types/report";
+
+export type ReportConfig = NonNullable<WorkspaceReport["config"]>;
+
+const BUILTIN_HIDDEN = new Set(["App", "React.StrictMode"]);
+
+function trimLeadingSlashes(value: string): string {
+  let i = 0;
+  while (i < value.length && value.charCodeAt(i) === 47) i += 1;
+  return value.slice(i);
+}
+
+function trimTrailingSlashes(value: string): string {
+  let end = value.length;
+  while (end > 0 && value.charCodeAt(end - 1) === 47) end -= 1;
+  return value.slice(0, end);
+}
+
+function normalizePath(path: string): string {
+  return trimLeadingSlashes(path.replaceAll("\\", "/"));
+}
+
+function normalizePrefix(prefix: string): string {
+  return trimTrailingSlashes(trimLeadingSlashes(prefix.trim()));
+}
+
+export function pathMatchesPrefix(rel: string, prefix: string): boolean {
+  const pre = normalizePrefix(prefix);
+  if (!pre) return false;
+  const r = normalizePath(rel);
+  return r === pre || r.startsWith(`${pre}/`);
+}
+
+export function reportConfig(
+  report: WorkspaceReport | null | undefined,
+): ReportConfig {
+  return report?.config ?? {};
+}
+
+export function hiddenComponentNames(
+  report: WorkspaceReport | null | undefined,
+  extraHidden?: Iterable<string>,
+): Set<string> {
+  const names = new Set(BUILTIN_HIDDEN);
+  for (const n of reportConfig(report).hidden_components ?? []) {
+    names.add(n);
+  }
+  if (extraHidden) {
+    for (const n of extraHidden) names.add(n);
+  }
+  return names;
+}
+
+export function hiddenPathPrefixes(
+  report: WorkspaceReport | null | undefined,
+): string[] {
+  return (reportConfig(report).hidden_paths ?? []).map(normalizePrefix).filter(Boolean);
+}
+
+/** True when the component should not appear in sidebar / palette / playground list. */
+export function isCatalogComponentHidden(
+  name: string,
+  report: WorkspaceReport | null | undefined,
+  definitionPaths: string[] | undefined,
+  extraHidden?: Iterable<string>,
+): boolean {
+  if (hiddenComponentNames(report, extraHidden).has(name)) return true;
+  const prefixes = hiddenPathPrefixes(report);
+  if (!prefixes.length || !definitionPaths?.length) return false;
+  for (const path of definitionPaths) {
+    const rel = normalizePath(path);
+    for (const pre of prefixes) {
+      if (pathMatchesPrefix(rel, pre)) return true;
+    }
+  }
+  return false;
+}
+
+export function definitionPathsForName(
+  report: WorkspaceReport | null | undefined,
+  name: string,
+): string[] {
+  if (!report) return [];
+  const paths: string[] = [];
+  for (const file of report.files ?? []) {
+    for (const d of file.definitions ?? []) {
+      if (d.name === name) paths.push(file.path);
+    }
+  }
+  return paths;
+}
+
+/** Merge optimistic hides until the next report refresh includes them. */
+export function reportWithExtraHidden(
+  report: WorkspaceReport | null | undefined,
+  extraHidden: readonly string[],
+): WorkspaceReport | null | undefined {
+  if (!report || extraHidden.length === 0) return report;
+  const existing = report.config?.hidden_components ?? [];
+  const merged = [...new Set([...existing, ...extraHidden])];
+  return {
+    ...report,
+    config: {
+      ...report.config,
+      hidden_components: merged,
+    },
+  };
+}