dslinter 0.2.3 → 0.4.0

package/src/components/ComponentInspectPane.tsx

@@ -1,44 +1,100 @@
 import { useMemo } from "react";
-import {
-  Table,
-  TableBody,
-  TableCell,
-  TableHead,
-  TableHeader,
-  TableRow,
-} from "./ui/table";
 import {
   aggregateDeclaredProps,
   aggregateDefinitions,
+  catalogChildComponentsFor,
   componentCatalogFamilyForName,
+  type DefinitionSite,
 } from "../dashboard/aggregate";
 import {
   buildUnusedPropSetForComponent,
   ComponentPropUsageDetail,
+  propFrequenciesForComponent,
 } from "../dashboard/ComponentPropUsageDetail";
 import { ComponentUsageDetails } from "../dashboard/ComponentUsageDetails";
 import { FindingsList } from "../dashboard/FindingsList";
 import { shortPath } from "../dashboard/paths";
 import { findingsForComponent } from "../report/findingsForComponent";
+import {
+  findPlaygroundSpec,
+  playgroundJoinDetailMessage,
+  type PlaygroundJoinSkip,
+} from "../playground/playgroundJoin";
 import type { WorkspaceReport } from "../types/report";
-import type { PlaygroundJoinSkip } from "../playground/playgroundJoin";
-import { findPlaygroundSpec } from "../playground/playgroundJoin";
 import { HideFromCatalogButton } from "./HideFromCatalogButton";
 import { Section } from "./Section";
 import { TruncatedPath } from "./TruncatedPath";
+import {
+  Table,
+  TableBody,
+  TableCell,
+  TableHead,
+  TableHeader,
+  TableRow,
+} from "./ui/table";
 
 type Props = {
   componentId: string;
   workspaceReport: WorkspaceReport | null;
   reportReady: boolean;
   hasPlaygroundSpec: boolean;
-  /** When the report row exists but Vite could not load the module/export. */
   playgroundJoinSkip?: PlaygroundJoinSkip;
-  onBackToGovernance: () => void;
   onOpenComponent: (componentId: string) => void;
   onHideFromCatalog?: (componentId: string) => void;
 };
 
+const PREVIEW_NOTE = {
+  missing: "No playable component definition was found",
+  unloadable:
+    "A preview was expected for this component but the module could not be loaded in the dashboard bundle (check the file path, export name, or that npx dslinter was run from the project root).",
+} as const;
+
+function reportPlaceholder(message: string) {
+  return <p className="text-sm text-muted-foreground">{message}</p>;
+}
+
+function DefinitionsTable({
+  definitions,
+  root,
+}: {
+  definitions: DefinitionSite[];
+  root: string | undefined;
+}) {
+  if (definitions.length === 0) {
+    return (
+      <p className="text-sm text-muted-foreground">
+        No definition sites recorded — this name may appear only from JSX usage.
+      </p>
+    );
+  }
+
+  return (
+    <Table>
+      <TableHeader>
+        <TableRow>
+          <TableHead>File</TableHead>
+          <TableHead className="w-20">Line</TableHead>
+          <TableHead>Kind</TableHead>
+        </TableRow>
+      </TableHeader>
+      <TableBody>
+        {definitions.map((site) => (
+          <TableRow key={`${site.path}:${site.line}:${site.kind}`}>
+            <TableCell className="min-w-0 font-mono text-xs">
+              <TruncatedPath
+                path={root ? shortPath(root, site.path) : site.path}
+                className="text-xs"
+              />
+            </TableCell>
+            <TableCell>{site.line}</TableCell>
+            <TableCell className="text-muted-foreground">{site.kind}</TableCell>
+          </TableRow>
+        ))}
+      </TableBody>
+    </Table>
+  );
+}
+
 export function ComponentInspectPane({
   componentId,
   workspaceReport,
@@ -48,69 +104,50 @@ export function ComponentInspectPane({
   onOpenComponent,
   onHideFromCatalog,
 }: Props) {
+  const report = reportReady ? workspaceReport : null;
   const playgroundSpec = findPlaygroundSpec(workspaceReport, componentId);
-  const definitions = useMemo(() => {
-    if (!workspaceReport) return [];
-    return aggregateDefinitions(workspaceReport).get(componentId) ?? [];
-  }, [workspaceReport, componentId]);
-
-  const declared = useMemo(() => {
-    if (!workspaceReport) return [];
-    return aggregateDeclaredProps(workspaceReport).get(componentId) ?? [];
-  }, [workspaceReport, componentId]);
-
-  const unusedProps = useMemo(() => {
-    if (!workspaceReport) return new Set<string>();
-    return buildUnusedPropSetForComponent(
-      workspaceReport,
-      componentId,
-      declared,
-    );
-  }, [workspaceReport, componentId, declared]);
-
-  const findings = useMemo(
-    () => findingsForComponent(workspaceReport, componentId),
-    [workspaceReport, componentId],
-  );
-  const family = useMemo(
-    () => componentCatalogFamilyForName(workspaceReport, componentId),
-    [workspaceReport, componentId],
+  const joinDetail = playgroundJoinDetailMessage(
+    playgroundJoinSkip,
+    playgroundSpec,
   );
-  const childComponents = family?.parent === componentId ? family.children : [];
-
-  const previewNote = hasPlaygroundSpec
-    ? "A preview was expected for this component but the module could not be loaded in the dashboard bundle (check the file path, export name, or that npx dslinter was run from the project root)."
-    : "No playable component definition was found";
 
-  const joinDetail = (() => {
-    if (playgroundJoinSkip?.reason === "module_not_found") {
-      const { globKey, rel_path } = playgroundJoinSkip;
-      const subdirHint = !rel_path.includes("/")
-        ? " This usually means the scanner was run from a subdirectory. Re-run from the project root: npx dslinter ."
-        : "";
-      if (globKey.startsWith("@dslinter-scan/")) {
-        return [
-          `Expected module key "${globKey}" but the dslinter Vite plugin did not load it.`,
-          `Use <DashboardLayout autoPlayground /> and run via npx dslinter (zero vite.config changes), or add plugins: [dslinter()] from dslinter/vite to vite.config.ts.`,
-          `Run the scanner from the project root so rel_path "${rel_path}" matches files under DSLINTER_SCAN_ROOT.`,
-        ].join(" ");
-      }
-      return [
-        `Vite glob is missing key "${globKey}" for report path "${rel_path}".`,
-        `Prefer <DashboardLayout autoPlayground /> with plugins: [dslinter()] from dslinter/vite, or run npx dslinter init for a custom buildRegistry.ts glob.`,
-        subdirHint,
-      ]
-        .filter(Boolean)
-        .join("");
+  const {
+    definitions,
+    declared,
+    unusedProps,
+    propFrequencies,
+    findings,
+    childComponents,
+  } = useMemo(() => {
+    if (!workspaceReport) {
+      return {
+        definitions: [] as DefinitionSite[],
+        declared: [] as string[],
+        unusedProps: new Set<string>(),
+        propFrequencies: {},
+        findings: [],
+        childComponents: [] as string[],
+      };
     }
-    if (playgroundJoinSkip?.reason === "export_not_found") {
-      return `Module loaded but named export "${playgroundJoinSkip.export_name}" was not found. Use export function ${playgroundJoinSkip.export_name}(…) in ${playgroundJoinSkip.rel_path}.`;
-    }
-    if (playgroundSpec) {
-      return `Report path: ${playgroundSpec.rel_path} (export ${playgroundSpec.export_name}). Use autoPlayground with dslinter/vite, or ensure buildRegistry.ts glob covers this file.`;
-    }
-    return null;
-  })();
+
+    const declared =
+      aggregateDeclaredProps(workspaceReport).get(componentId) ?? [];
+    const family = componentCatalogFamilyForName(workspaceReport, componentId);
+
+    return {
+      definitions:
+        aggregateDefinitions(workspaceReport).get(componentId) ?? [],
+      declared,
+      unusedProps: buildUnusedPropSetForComponent(
+        workspaceReport,
+        componentId,
+        declared,
+      ),
+      propFrequencies: propFrequenciesForComponent(workspaceReport, componentId),
+      findings: findingsForComponent(workspaceReport, componentId),
+      childComponents: catalogChildComponentsFor(family, componentId),
+    };
+  }, [workspaceReport, componentId]);
 
   return (
     <div className="flex min-h-0 flex-1 flex-col overflow-hidden bg-background">
@@ -125,7 +162,7 @@ export function ComponentInspectPane({
                 {componentId}
               </h1>
               <p className="mt-2 max-w-2xl text-sm text-muted-foreground">
-                {previewNote}
+                {hasPlaygroundSpec ? PREVIEW_NOTE.unloadable : PREVIEW_NOTE.missing}
               </p>
               {joinDetail ? (
                 <p className="mt-2 max-w-2xl font-mono text-xs text-muted-foreground">
@@ -133,14 +170,12 @@ export function ComponentInspectPane({
                 </p>
               ) : null}
             </div>
-            <div className="flex shrink-0 flex-wrap items-center gap-2">
-              {onHideFromCatalog ? (
-                <HideFromCatalogButton
-                  componentName={componentId}
-                  onHidden={onHideFromCatalog}
-                />
-              ) : null}
-            </div>
+            {onHideFromCatalog ? (
+              <HideFromCatalogButton
+                componentName={componentId}
+                onHidden={onHideFromCatalog}
+              />
+            ) : null}
           </div>
         </header>
 
@@ -150,42 +185,10 @@ export function ComponentInspectPane({
             title="Definitions"
             description="Source files where this component is defined."
           >
-            {definitions.length > 0 ? (
-              <Table>
-                <TableHeader>
-                  <TableRow>
-                    <TableHead>File</TableHead>
-                    <TableHead className="w-20">Line</TableHead>
-                    <TableHead>Kind</TableHead>
-                  </TableRow>
-                </TableHeader>
-                <TableBody>
-                  {definitions.map((site) => (
-                    <TableRow key={`${site.path}:${site.line}:${site.kind}`}>
-                      <TableCell className="min-w-0 font-mono text-xs">
-                        <TruncatedPath
-                          path={
-                            workspaceReport
-                              ? shortPath(workspaceReport.root, site.path)
-                              : site.path
-                          }
-                          className="text-xs"
-                        />
-                      </TableCell>
-                      <TableCell>{site.line}</TableCell>
-                      <TableCell className="text-muted-foreground">
-                        {site.kind}
-                      </TableCell>
-                    </TableRow>
-                  ))}
-                </TableBody>
-              </Table>
-            ) : (
-              <p className="text-sm text-muted-foreground">
-                No definition sites recorded — this name may appear only from
-                JSX usage.
-              </p>
-            )}
+            <DefinitionsTable
+              definitions={definitions}
+              root={workspaceReport?.root}
+            />
           </Section>
 
           {childComponents.length > 0 ? (
@@ -214,16 +217,15 @@ export function ComponentInspectPane({
             title="Props"
             description="Declared props and workspace usage from the latest scan."
           >
-            {reportReady && workspaceReport ? (
+            {report ? (
               <ComponentPropUsageDetail
                 component={componentId}
                 declared={declared}
                 unusedProps={unusedProps}
+                propFrequencies={propFrequencies}
               />
             ) : (
-              <p className="text-sm text-muted-foreground">
-                Load the DSLinter report to see prop usage.
-              </p>
+              reportPlaceholder("Load the DSLinter report to see prop usage.")
             )}
           </Section>
 
@@ -243,12 +245,10 @@ export function ComponentInspectPane({
             title="Findings"
             description="DSLinter findings on files where this component is defined."
           >
-            {reportReady && workspaceReport ? (
-              <FindingsList findings={findings} root={workspaceReport.root} />
+            {report ? (
+              <FindingsList findings={findings} root={report.root} />
             ) : (
-              <p className="text-sm text-muted-foreground">
-                Load the DSLinter report to see findings.
-              </p>
+              reportPlaceholder("Load the DSLinter report to see findings.")
             )}
           </Section>
         </div>

package/src/components/ComponentPlaygroundPane.tsx

@@ -16,6 +16,7 @@ import { tokenStyleFindingsForModule } from "../report/tokenStyleFindingsForModu
 import type { WorkspaceReport } from "../types/report";
 import {
   aggregateDeclaredProps,
+  catalogChildComponentsFor,
   componentCatalogFamilyForName,
   usageMap,
 } from "../dashboard/aggregate";
@@ -41,10 +42,9 @@ import {
 } from "../playground/scanVariantA11y";
 import { HideFromCatalogButton } from "./HideFromCatalogButton";
 import { OpenInEditorButton } from "./OpenInEditorButton";
+import { ScoreGauge } from "./ScoreGauge";
 import { Section } from "./Section";
-import {
-  resolveModuleAbsolutePath,
-} from "../dashboard/editorLink";
+import { resolveModuleAbsolutePath } from "../dashboard/editorLink";
 
 type Props = {
   entry: PlaygroundEntry;
@@ -139,7 +139,7 @@ export function ComponentPlaygroundPane({
   entry,
   workspaceReport,
   reportReady,
-  onOpenComponent,
+  onOpenComponent: _onOpenComponent,
   onHideFromCatalog,
 }: Props) {
   const { renderPreview } = entry;
@@ -377,7 +377,7 @@ export function ComponentPlaygroundPane({
     () => componentCatalogFamilyForName(report, entry.id),
     [report, entry.id],
   );
-  const childComponents = family?.parent === entry.id ? family.children : [];
+  const childComponents = catalogChildComponentsFor(family, entry.id);
   const resetControls = () =>
     setValues(defaultArgsFromControls(entry.controls));
 
@@ -401,27 +401,27 @@ export function ComponentPlaygroundPane({
       <div className="min-h-0 flex-1 overflow-auto">
         <header
           id="source"
-          className="scroll-mt-20 border-b border-border bg-card p-6"
+          className="scroll-mt-20 border-b border-border bg-card p-6 flex flex-wrap items-center justify-between gap-4"
         >
-          <div className="flex flex-wrap items-start justify-between gap-4">
-            <div className="min-w-0">
-              <p className="text-sm font-medium text-muted-foreground">
-                Components
-                {entry.meta.group ? (
-                  <>
-                    {" "}
-                    <span className="text-muted-foreground/40">/</span>{" "}
-                    <span className="capitalize text-foreground/80">
-                      {entry.meta.group}
-                    </span>
-                  </>
-                ) : null}
-              </p>
-              <h1 className="text-3xl font-semibold tracking-tight text-foreground">
-                {entry.meta.title}
-              </h1>
-            </div>
-            <div className="flex shrink-0 flex-wrap items-center gap-2">
+          <div className="min-w-0">
+            <p className="text-sm font-medium text-muted-foreground">
+              Components
+              {entry.meta.group ? (
+                <>
+                  {" "}
+                  <span className="text-muted-foreground/40">/</span>{" "}
+                  <span className="capitalize text-foreground/80">
+                    {entry.meta.group}
+                  </span>
+                </>
+              ) : null}
+            </p>
+            <h1 className="text-3xl font-semibold tracking-tight text-foreground">
+              {entry.meta.title}
+            </h1>
+          </div>
+          <div className="flex shrink-0 flex-wrap items-center gap-4">
+            <div className="flex flex-wrap items-center gap-2">
               {sourceAbsolutePath ? (
                 <OpenInEditorButton filePath={sourceAbsolutePath} />
               ) : null}
@@ -432,6 +432,21 @@ export function ComponentPlaygroundPane({
                 />
               ) : null}
             </div>
+            <div className="flex items-start gap-5">
+              <ScoreGauge
+                label="Code score"
+                value={reportReady ? codeScore.score : null}
+                href="#code-score"
+              />
+              <ScoreGauge
+                label="Accessibility"
+                value={
+                  reportReady || variantScanComplete ? combinedA11y.score : null
+                }
+                href="#accessibility"
+                pending={variantScanPending}
+              />
+            </div>
           </div>
         </header>
 
@@ -443,7 +458,7 @@ export function ComponentPlaygroundPane({
             <div className="flex justify-center">
               <div
                 ref={previewFrameRef}
-                className="relative min-w-0 shrink-0 select-none rounded-lg border border-border bg-muted/50 shadow-xs will-change-[width]"
+                className="relative min-w-0 shrink-0 select-none rounded-lg border border-border bg-background shadow-xs will-change-[width]"
                 style={{ width: previewWidthPx }}
               >
                 <PreviewResizeHandle
@@ -456,7 +471,7 @@ export function ComponentPlaygroundPane({
                 />
                 <PlaygroundAppThemeWrapper
                   workspaceReport={report}
-                  className="min-w-0 p-8 backdrop-blur-2xl"
+                  className="min-w-0 p-8"
                 >
                   <PlaygroundPreviewErrorBoundary
                     componentName={entry.meta.title}

package/src/components/DashboardCommandPalette.tsx

@@ -59,6 +59,15 @@ export function DashboardCommandPalette({ catalogEntries, onNavigate, open, onOp
           >
             Governance
           </CommandItem>
+          <CommandItem
+            value="catalog all components inventory"
+            onSelect={() => {
+              onNavigate({ view: "catalog" });
+              close();
+            }}
+          >
+            All components
+          </CommandItem>
         </CommandGroup>
         {catalogEntries.length > 0 ? (
           <CommandGroup heading="Components">

package/src/components/GovernanceInventoryTabs.tsx

@@ -0,0 +1,51 @@
+import { ToggleGroup, ToggleGroupItem } from "./ui/toggle-group";
+import type { GovernanceInventoryTab } from "../dashboard/aggregate";
+
+const tabs: { id: GovernanceInventoryTab; label: string }[] = [
+  { id: "all", label: "All issues" },
+  { id: "a11y", label: "Accessibility" },
+  { id: "code", label: "Code quality" },
+  { id: "token", label: "Tokens" },
+  { id: "unused", label: "Unused" },
+];
+
+function isGovernanceInventoryTab(value: string): value is GovernanceInventoryTab {
+  return tabs.some((tab) => tab.id === value);
+}
+
+export function GovernanceInventoryTabs({
+  value,
+  onChange,
+  counts,
+}: {
+  value: GovernanceInventoryTab;
+  onChange: (value: GovernanceInventoryTab) => void;
+  counts: Record<GovernanceInventoryTab, number>;
+}) {
+  return (
+    <ToggleGroup
+      type="single"
+      value={value}
+      onValueChange={(next) => {
+        if (isGovernanceInventoryTab(next)) onChange(next);
+      }}
+      variant="outline"
+      size="sm"
+      aria-label="Filter governance inventory"
+      className="contents"
+    >
+      {tabs.map((tab) => (
+        <ToggleGroupItem
+          key={tab.id}
+          value={tab.id}
+          className="rounded-full px-2.5 text-xs font-medium"
+        >
+          {tab.label}
+          <span className="ml-1 tabular-nums text-muted-foreground">
+            {counts[tab.id]}
+          </span>
+        </ToggleGroupItem>
+      ))}
+    </ToggleGroup>
+  );
+}

package/src/components/GovernancePane.tsx

@@ -1,5 +1,9 @@
 import type { ReactNode } from "react";
-import { componentCatalogNamesFromReport } from "../dashboard/aggregate";
+import {
+  componentCatalogNamesFromReport,
+  governanceTabCounts,
+  unusedComponentsFromReport,
+} from "../dashboard/aggregate";
 import { DashboardBody } from "../dashboard/DashboardBody";
 import type { DslinterReportState } from "../dashboard/useWorkspaceReport";
 
@@ -10,6 +14,7 @@ type Props = {
   dslinterReportHint?: string;
   dslinterReport: DslinterReportState;
   onOpenComponent?: (name: string) => void;
+  onOpenCatalog?: () => void;
 };
 
 export function GovernancePane({
@@ -18,11 +23,14 @@ export function GovernancePane({
   dslinterReportHint = "npm run dslinter:report",
   dslinterReport,
   onOpenComponent,
+  onOpenCatalog,
 }: Props) {
   const { report, error, loading } = dslinterReport;
   const componentCatalogCount = report
     ? componentCatalogNamesFromReport(report).length
     : 0;
+  const unusedCount = report ? unusedComponentsFromReport(report).length : 0;
+  const findingCount = report ? governanceTabCounts(report).all : 0;
 
   if (error) {
     return (
@@ -71,16 +79,21 @@ export function GovernancePane({
           Governance
           <span className="font-normal text-muted-foreground">
             {" "}
-            · {componentCatalogCount} components
+            · {findingCount} {findingCount === 1 ? "issue" : "issues"} ·{" "}
+            {unusedCount} unused · {componentCatalogCount} total
           </span>
         </h1>
         <p className="text-sm text-muted-foreground">
-          Scores, component catalog, token wall, and findings from the latest
-          DSLinter snapshot
+          Governance scores, workspace findings, and components with no usage
+          from the latest DSLinter snapshot
         </p>
       </header>
       <div className="min-w-0 w-full px-6 py-8">
-        <DashboardBody report={report} onOpenComponent={onOpenComponent} />
+        <DashboardBody
+          report={report}
+          onOpenComponent={onOpenComponent}
+          onOpenCatalog={onOpenCatalog}
+        />
       </div>
     </div>
   );

package/src/components/PlaygroundA11yAndCode.tsx

@@ -230,26 +230,11 @@ type ApiProps = {
   governanceReportLoaded?: boolean;
 };
 
-function formatRepoLiteralChips(
-  byVal: Record<string, number> | undefined,
-  max = 6,
-): string {
-  if (!byVal || Object.keys(byVal).length === 0) return "—";
-  const entries = Object.entries(byVal).sort((x, y) => y[1] - x[1]);
-  const shown = entries.slice(0, max);
-  const tail = Math.max(0, entries.length - max);
-  return (
-    shown.map(([val, n]) => `${JSON.stringify(val)} ×${n}`).join(" · ") +
-    (tail > 0 ? ` · +${tail}` : "")
-  );
-}
-
 export function PlaygroundApiReference({
   controls,
   values,
   onChange,
   onReset,
-  reportUsage,
   declaredPropsFromScan: _declaredPropsFromScan = [],
   governanceReportLoaded: _governanceReportLoaded = false,
 }: ApiProps) {
@@ -263,18 +248,6 @@ export function PlaygroundApiReference({
   );
 
   const rows = controlsToApiRows(controls);
-  const showRepo = reportUsage != null;
-  const freqs = reportUsage?.prop_frequencies ?? {};
-  const valueFreqs = reportUsage?.prop_value_frequencies ?? {};
-  const controlKeys = new Set(rows.map((r) => r.prop));
-  const extraRepoProps = showRepo
-    ? Object.keys(freqs)
-        .filter((k) => !controlKeys.has(k))
-        .sort((a, b) => a.localeCompare(b))
-    : [];
-  const repoUsageProps = showRepo
-    ? [...rows.map((r) => r.prop), ...extraRepoProps]
-    : [];
   return (
     <Section
       id="api-reference"
@@ -357,31 +330,6 @@ export function PlaygroundApiReference({
           })}
         </TableBody>
       </Table>
-
-      {showRepo ? (
-        <Section id="repo-usage" title="Repo usage" className="mt-4">
-          <Table>
-            <TableHeader>
-              <TableRow>
-                <TableHead>Prop</TableHead>
-                <TableHead>Count</TableHead>
-                <TableHead>Values</TableHead>
-              </TableRow>
-            </TableHeader>
-            <TableBody>
-              {repoUsageProps.map((prop) => (
-                <TableRow key={prop}>
-                  <TableCell className="font-medium">{prop}</TableCell>
-                  <TableCell>{freqs[prop] ?? 0}</TableCell>
-                  <TableCell>
-                    {formatRepoLiteralChips(valueFreqs[prop])}
-                  </TableCell>
-                </TableRow>
-              ))}
-            </TableBody>
-          </Table>
-        </Section>
-      ) : null}
     </Section>
   );
 }

package/src/components/PlaygroundControlField.tsx

@@ -58,6 +58,7 @@ export function PlaygroundControlField({
         );
       }
       case "string":
+      case "node":
         return (
           <div className="flex min-w-0 flex-col gap-1.5">
             <Label htmlFor={id} className={labelClass}>
@@ -153,6 +154,7 @@ export function PlaygroundControlField({
       );
     }
     case "string":
+    case "node":
       return (
         <Input
           id={id}