dslinter 0.2.2 → 0.3.0

package/src/dashboard/ComponentPropUsageDetail.tsx

@@ -1,3 +1,13 @@
+import { Badge } from "../components/ui/badge";
+import {
+  Table,
+  TableBody,
+  TableCell,
+  TableHead,
+  TableHeader,
+  TableRow,
+} from "../components/ui/table";
+import { cn } from "../lib/utils";
 import type { WorkspaceReport } from "../types/report";
 import { pluralize } from "usemods";
 
@@ -8,6 +18,16 @@ export function catalogAttributeProps(props: string[]): string[] {
   return props.filter((prop) => !SLOT_PROPS.has(prop));
 }
 
+export function propFrequenciesForComponent(
+  report: WorkspaceReport,
+  componentName: string,
+): Record<string, number> {
+  const usageRow = (report.usage_by_component ?? []).find(
+    (u) => u.component === componentName,
+  );
+  return usageRow?.prop_frequencies ?? {};
+}
+
 /** Set of `"ComponentName/propName"` keys for props with no recorded usage. */
 export function buildUnusedPropSetForComponent(
   report: WorkspaceReport,
@@ -15,10 +35,7 @@ export function buildUnusedPropSetForComponent(
   declared: string[],
 ): Set<string> {
   const s = new Set<string>();
-  const usageRow = (report.usage_by_component ?? []).find(
-    (u) => u.component === componentName,
-  );
-  const propFrequencies = usageRow?.prop_frequencies ?? {};
+  const propFrequencies = propFrequenciesForComponent(report, componentName);
   for (const propName of catalogAttributeProps(declared)) {
     if ((propFrequencies[propName] ?? 0) === 0) {
       s.add(`${componentName}/${propName}`);
@@ -27,23 +44,106 @@ export function buildUnusedPropSetForComponent(
   return s;
 }
 
+function sortedAttributeProps(declared: string[]): string[] {
+  return [...catalogAttributeProps(declared)].sort((a, b) =>
+    a.localeCompare(b),
+  );
+}
+
+function PropUsageSummary({
+  usedPropCount,
+  totalPropCount,
+}: {
+  usedPropCount: number;
+  totalPropCount: number;
+}) {
+  return (
+    <p className="text-sm text-muted-foreground">
+      {usedPropCount}/{totalPropCount} {pluralize("prop", usedPropCount)} used
+      in the workspace snapshot.
+    </p>
+  );
+}
+
+function PropUsageTable({
+  props,
+  propFrequencies,
+}: {
+  props: string[];
+  propFrequencies: Record<string, number>;
+}) {
+  return (
+    <Table>
+      <TableHeader>
+        <TableRow>
+          <TableHead>Prop</TableHead>
+          <TableHead className="w-20 text-right">Uses</TableHead>
+        </TableRow>
+      </TableHeader>
+      <TableBody>
+        {props.map((prop) => {
+          const count = propFrequencies[prop] ?? 0;
+          const isUnused = count === 0;
+          return (
+            <TableRow
+              key={prop}
+              className={isUnused ? "text-muted-foreground" : undefined}
+            >
+              <TableCell className="font-mono text-xs">{prop}</TableCell>
+              <TableCell className="text-right tabular-nums">{count}</TableCell>
+            </TableRow>
+          );
+        })}
+      </TableBody>
+    </Table>
+  );
+}
+
+function PropUsageBadges({
+  props,
+  propFrequencies,
+}: {
+  props: string[];
+  propFrequencies: Record<string, number>;
+}) {
+  return (
+    <div className="flex flex-wrap gap-1">
+      {props.map((prop) => {
+        const count = propFrequencies[prop] ?? 0;
+        const isUsed = count > 0;
+        return (
+          <Badge
+            key={prop}
+            variant={isUsed ? "secondary" : "outline"}
+            size="sm"
+            className={cn(!isUsed && "text-muted-foreground")}
+            title={isUsed ? `${count} uses` : "Never passed"}
+          >
+            {prop}
+          </Badge>
+        );
+      })}
+    </div>
+  );
+}
+
 export function ComponentPropUsageDetail({
   component,
   declared,
   unusedProps,
+  propFrequencies = {},
+  variant = "table",
 }: {
   component: string;
   declared: string[];
   unusedProps: Set<string>;
+  propFrequencies?: Record<string, number>;
+  variant?: "table" | "compact";
 }) {
-  const attributeProps = catalogAttributeProps(declared);
-  const used = attributeProps.filter(
+  const attributeProps = sortedAttributeProps(declared);
+  const usedPropCount = attributeProps.filter(
     (prop) => !unusedProps.has(`${component}/${prop}`),
-  );
-  const unused = attributeProps.filter((prop) =>
-    unusedProps.has(`${component}/${prop}`),
-  );
-  const usedPropCount = used.length;
+  ).length;
 
   if (attributeProps.length === 0) {
     return (
@@ -54,37 +154,22 @@ export function ComponentPropUsageDetail({
   }
 
   return (
-    <div className="space-y-4">
-      <p className="text-sm text-muted-foreground">
-        {usedPropCount}/{attributeProps.length}{" "}
-        {pluralize("prop", usedPropCount)} used in the workspace snapshot.
-      </p>
-      {used.length > 0 ? (
-        <div>
-          <p className="text-[10px] font-semibold uppercase tracking-wide text-muted-foreground">
-            Used
-          </p>
-          <ul className="mt-1 space-y-0.5 font-mono text-xs text-foreground">
-            {used.map((prop) => (
-              <li key={prop}>{prop}</li>
-            ))}
-          </ul>
-        </div>
-      ) : null}
-      {unused.length > 0 ? (
-        <div>
-          <p className="text-[10px] font-semibold uppercase tracking-wide text-muted-foreground">
-            Never passed
-          </p>
-          <ul className="mt-1 space-y-0.5 font-mono text-xs text-muted-foreground/70">
-            {unused.map((prop) => (
-              <li key={prop} className="line-through">
-                {prop}
-              </li>
-            ))}
-          </ul>
-        </div>
-      ) : null}
+    <div className={variant === "compact" ? "space-y-2" : "space-y-4"}>
+      <PropUsageSummary
+        usedPropCount={usedPropCount}
+        totalPropCount={attributeProps.length}
+      />
+      {variant === "compact" ? (
+        <PropUsageBadges
+          props={attributeProps}
+          propFrequencies={propFrequencies}
+        />
+      ) : (
+        <PropUsageTable
+          props={attributeProps}
+          propFrequencies={propFrequencies}
+        />
+      )}
     </div>
   );
 }

package/src/dashboard/ComponentUsageDetails.tsx

@@ -1,4 +1,4 @@
-import { useMemo } from "react";
+import { useCallback, useMemo } from "react";
 import {
   Table,
   TableBody,
@@ -9,7 +9,8 @@ import {
 } from "../components/ui/table";
 import type { UsageLocation, WorkspaceReport } from "../types/report";
 import { usageMap } from "./aggregate";
-import { shortPath } from "./paths";
+import { openSourceFile } from "./editorLink";
+import { resolveReportAbsolutePath, shortPath } from "./paths";
 import { EmptyCard } from "../components/EmptyCard";
 import { TruncatedPath } from "../components/TruncatedPath";
 
@@ -32,6 +33,40 @@ function sortedLocations(
   return list;
 }
 
+function UsageLocationLink({
+  root,
+  loc,
+}: {
+  root: string;
+  loc: UsageLocation;
+}) {
+  const fileText = shortPath(root, loc.path);
+  const locationText = `${fileText}:${loc.line}`;
+  const absolutePath = resolveReportAbsolutePath(root, loc.path);
+
+  const handleClick = useCallback(() => {
+    void openSourceFile(absolutePath, loc.line).catch((err) => {
+      const message = err instanceof Error ? err.message : String(err);
+      window.alert(`Could not open file: ${message}`);
+    });
+  }, [absolutePath, loc.line]);
+
+  return (
+    <button
+      type="button"
+      onClick={handleClick}
+      className="block min-w-0 w-full text-left text-xs text-muted-foreground transition-colors hover:text-foreground hover:underline"
+      title={locationText}
+    >
+      <TruncatedPath
+        path={`${fileText}:${loc.line}`}
+        className="text-xs"
+        title={undefined}
+      />
+    </button>
+  );
+}
+
 export function ComponentUsageDetails({
   report,
   componentId,
@@ -72,22 +107,17 @@ export function ComponentUsageDetails({
     <Table className="[&>table]:table-fixed [&>table]:w-full">
       <TableHeader>
         <TableRow>
-          <TableHead className="w-[40%] min-w-0">File</TableHead>
-          <TableHead className="w-14 whitespace-nowrap">Line</TableHead>
+          <TableHead className="w-[40%] min-w-0">Location</TableHead>
           <TableHead className="min-w-0">Props at this call site</TableHead>
         </TableRow>
       </TableHeader>
       <TableBody>
         {rows.map((loc, i) => {
-          const fileText = shortPath(report.root, loc.path);
           const propsText = formatCallSiteProps(loc);
           return (
             <TableRow key={`${loc.path}-${loc.line}-${i}`}>
               <TableCell className="min-w-0">
-                <TruncatedPath path={fileText} className="text-xs" />
-              </TableCell>
-              <TableCell className="tabular-nums text-muted-foreground">
-                {loc.line}
+                <UsageLocationLink root={report.root} loc={loc} />
               </TableCell>
               <TableCell className="min-w-0">
                 <span

package/src/dashboard/DashboardBody.tsx

@@ -1,16 +1,71 @@
+import { useMemo, useState } from "react";
+import { GovernanceInventoryTabs } from "../components/GovernanceInventoryTabs";
 import { Section } from "../components/Section";
 import type { WorkspaceReport } from "../types/report";
-import { ComponentCatalog } from "./ComponentCatalog";
+import {
+  findingsForGovernanceTab,
+  governanceTabCounts,
+  type GovernanceInventoryTab,
+  unusedComponentsFromReport,
+} from "./aggregate";
 import { FindingsList } from "./FindingsList";
 import { ScoreStrip } from "./ScoreStrip";
+import { UnusedComponentsList } from "./UnusedComponentsList";
+
+const sectionMeta: Record<
+  GovernanceInventoryTab,
+  { id: string; title: string; description: string }
+> = {
+  all: {
+    id: "issues",
+    title: "Issues",
+    description: "All findings from the workspace DSLinter report.",
+  },
+  a11y: {
+    id: "accessibility-issues",
+    title: "Accessibility issues",
+    description: "Findings from accessibility rules in the latest snapshot.",
+  },
+  code: {
+    id: "code-issues",
+    title: "Code quality issues",
+    description: "Findings from code quality rules in the latest snapshot.",
+  },
+  token: {
+    id: "token-issues",
+    title: "Token issues",
+    description: "Findings from design token rules in the latest snapshot.",
+  },
+  unused: {
+    id: "unused-components",
+    title: "Unused components",
+    description:
+      "Scanned definitions with no JSX references elsewhere in the workspace.",
+  },
+};
 
 export function DashboardBody({
   report,
   onOpenComponent,
+  onOpenCatalog,
 }: {
   report: WorkspaceReport;
   onOpenComponent?: (name: string) => void;
+  onOpenCatalog?: () => void;
 }) {
+  const [tab, setTab] = useState<GovernanceInventoryTab>("all");
+
+  const counts = useMemo(() => governanceTabCounts(report), [report]);
+  const filteredFindings = useMemo(
+    () => findingsForGovernanceTab(report, tab),
+    [report, tab],
+  );
+  const unusedComponents = useMemo(
+    () => unusedComponentsFromReport(report),
+    [report],
+  );
+  const section = sectionMeta[tab];
+
   return (
     <div className="space-y-10">
       <ScoreStrip scores={report.scores} />
@@ -22,21 +77,37 @@ export function DashboardBody({
         </div>
       ) : null}
 
-      <Section
-        id="components"
-        title="Components"
-        description="Definitions and JSX usage from the latest snapshot."
-      >
-        <ComponentCatalog report={report} onOpenComponent={onOpenComponent} />
-      </Section>
+      <GovernanceInventoryTabs value={tab} onChange={setTab} counts={counts} />
 
       <Section
-        id="issues"
-        title="Issues"
-        description="Findings from the workspace DSLinter report scoped to this file."
+        id={section.id}
+        title={section.title}
+        description={section.description}
       >
-        <FindingsList findings={report.findings} root={report.root} />
+        {tab === "unused" ? (
+          <UnusedComponentsList
+            components={unusedComponents}
+            root={report.root}
+            onOpenComponent={onOpenComponent}
+          />
+        ) : (
+          <FindingsList findings={filteredFindings} root={report.root} />
+        )}
       </Section>
+
+      {onOpenCatalog ? (
+        <p className="text-sm text-muted-foreground">
+          <button
+            type="button"
+            onClick={onOpenCatalog}
+            className="font-medium text-foreground underline decoration-dotted underline-offset-2 transition hover:decoration-solid"
+          >
+            View all components
+          </button>
+          {" "}
+          for prop usage and app reference details.
+        </p>
+      ) : null}
     </div>
   );
 }

package/src/dashboard/ScannedTokenWall.tsx

@@ -8,6 +8,7 @@ import { cn } from "../lib/utils";
 import { TruncatedPath } from "../components/TruncatedPath";
 import {
   filterTokenRows,
+  scannedTokenRowKey,
   type MergedTokenView,
   type ScannedTokenRow,
   type TokenUsageFilter,
@@ -40,13 +41,13 @@ function TokenSection({
 function TokenUsageBadge({ row }: { row: ScannedTokenRow }) {
   if (row.isUnused) {
     return (
-      <span className="shrink-0 rounded-full bg-muted px-2 py-0.5 text-[10px] font-medium uppercase tracking-wide text-muted-foreground">
+      <span className="shrink-0 rounded-full bg-muted px-2 py-0.5 text-xs font-medium uppercase tracking-wide text-muted-foreground">
         unused
       </span>
     );
   }
   return (
-    <span className="shrink-0 rounded-full bg-primary/10 px-2 py-0.5 text-[10px] font-medium text-primary">
+    <span className="shrink-0 rounded-full bg-primary/10 px-2 py-0.5 text-xs font-medium text-primary">
       {row.fileCount} {row.fileCount === 1 ? "file" : "files"}
     </span>
   );
@@ -95,7 +96,9 @@ function TokenRowBody({
 }) {
   return (
     <div className={cn("min-w-0", className)}>
-      <p className="truncate font-mono text-xs text-foreground">{row.cssName}</p>
+      <p className="truncate font-mono text-xs text-foreground">
+        {row.cssName}
+      </p>
       <p className="truncate text-xs text-muted-foreground">{row.value}</p>
       {row.tw ? (
         <p className="truncate font-mono text-xs text-muted-foreground/70">
@@ -118,8 +121,8 @@ function ColorSection({ rows }: { rows: ScannedTokenRow[] }) {
       <ul className="mt-4 grid gap-3 sm:grid-cols-2">
         {colors.map((row) => (
           <li
-            key={row.cssName}
-            className="flex items-center gap-3 rounded-lg border border-border bg-card px-3 py-2"
+            key={scannedTokenRowKey(row)}
+            className="flex items-center gap-3 rounded-lg border border-border bg-card p-2 pr-3.5"
             title={row.value}
           >
             {row.displayValue &&
@@ -162,7 +165,7 @@ function ListSection({
       <ul className="mt-3 divide-y divide-border rounded-lg border border-border bg-card">
         {items.map((row) => (
           <li
-            key={row.cssName}
+            key={scannedTokenRowKey(row)}
             className="flex flex-wrap items-center justify-between gap-2 px-3 py-2 text-xs"
           >
             <TokenRowBody row={row} className="flex-1" />

package/src/dashboard/UnusedComponentsList.tsx

@@ -0,0 +1,74 @@
+import {
+  Table,
+  TableBody,
+  TableCell,
+  TableHead,
+  TableHeader,
+  TableRow,
+} from "../components/ui/table";
+import { TruncatedPath } from "../components/TruncatedPath";
+import type { UnusedComponent } from "./aggregate";
+import { shortPath } from "./paths";
+import { pluralize } from "usemods";
+
+export function UnusedComponentsList({
+  components,
+  root,
+  onOpenComponent,
+}: {
+  components: UnusedComponent[];
+  root: string;
+  onOpenComponent?: (name: string) => void;
+}) {
+  if (components.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 unused components — every scanned definition has at least one JSX
+        reference in the workspace.
+      </p>
+    );
+  }
+
+  return (
+    <Table>
+      <TableHeader>
+        <TableRow>
+          <TableHead scope="col">Component</TableHead>
+          <TableHead scope="col">Defined in</TableHead>
+        </TableRow>
+      </TableHeader>
+      <TableBody>
+        {components.map(({ name, definitionPaths }) => (
+          <TableRow key={name}>
+            <TableCell>
+              {onOpenComponent ? (
+                <button
+                  type="button"
+                  onClick={() => onOpenComponent(name)}
+                  className="text-left font-medium text-foreground underline decoration-transparent underline-offset-2 transition hover:decoration-current"
+                >
+                  {name}
+                </button>
+              ) : (
+                name
+              )}
+            </TableCell>
+            <TableCell className="min-w-0 font-mono text-xs text-muted-foreground">
+              {definitionPaths.length === 1 ? (
+                <TruncatedPath
+                  path={shortPath(root, definitionPaths[0]!)}
+                  className="text-xs"
+                />
+              ) : (
+                <span title={definitionPaths.map((p) => shortPath(root, p)).join("\n")}>
+                  {definitionPaths.length}{" "}
+                  {pluralize("file", definitionPaths.length)}
+                </span>
+              )}
+            </TableCell>
+          </TableRow>
+        ))}
+      </TableBody>
+    </Table>
+  );
+}