dslinter 0.0.32 → 0.0.34

package/src/components/Sidebar.tsx

@@ -1,13 +1,17 @@
-import { useEffect, useState } from "react";
+import { useEffect, useMemo, useState } from "react";
 import { IconMoon, IconSearch, IconSun } from "@/components/icons";
 import { ToggleGroup, ToggleGroupItem } from "@/components/ui/toggle-group";
 
-import type { PlaygroundEntry } from "../types/playground";
+import { componentCatalogNamesFromReport } from "../dashboard/aggregate";
+import type { WorkspaceReport } from "../types/report";
 import type { HashRoute } from "../shell/hashRoute";
 import type { DashboardThemePreference } from "../shell/DashboardLayout";
 
 type Props = {
-  entries: PlaygroundEntry[];
+  report: WorkspaceReport | null;
+  playgroundIds: Set<string>;
+  reportLoading: boolean;
+  reportError: string | null;
   route: HashRoute;
   onNavigate: (next: HashRoute) => void;
   onOpenCommandPalette: () => void;
@@ -45,13 +49,20 @@ function sectionLabel(text: string) {
 }
 
 export function Sidebar({
-  entries,
+  report,
+  playgroundIds,
+  reportLoading,
+  reportError,
   route,
   onNavigate,
   onOpenCommandPalette,
   theme,
   onThemeChange,
 }: Props) {
+  const catalogNames = useMemo(
+    () => componentCatalogNamesFromReport(report),
+    [report],
+  );
   const tokensActive = route.view === "tokens";
   const governanceActive = route.view === "governance";
 
@@ -139,28 +150,44 @@ export function Sidebar({
           Design tokens
         </button>
 
-        {sectionLabel("Components")}
+        {sectionLabel(
+          catalogNames.length > 0
+            ? `Components (${catalogNames.length})`
+            : "Components",
+        )}
         <div className="space-y-0.5">
-          {entries.map((e, i) => {
+          {reportLoading && catalogNames.length === 0 ? (
+            <p className="px-2.5 py-1.5 text-sm text-sidebar-foreground/50">
+              Loading components…
+            </p>
+          ) : null}
+          {reportError && catalogNames.length === 0 ? (
+            <p className="px-2.5 py-1.5 text-sm text-sidebar-foreground/50">
+              Could not load report
+            </p>
+          ) : null}
+          {!reportLoading && !reportError && catalogNames.length === 0 ? (
+            <p className="px-2.5 py-1.5 text-sm text-sidebar-foreground/50">
+              No components in scan
+            </p>
+          ) : null}
+          {catalogNames.map((name) => {
             const active =
-              route.view === "component" && route.componentId === e.id;
-            const prev = entries[i - 1];
-            const showGroup =
-              Boolean(e.meta.group) &&
-              (!prev || prev.meta.group !== e.meta.group);
+              (route.view === "component" && route.componentId === name) ||
+              (route.view === "governance" && route.catalog === name);
             return (
-              <div key={e.id}>
-                {showGroup && e.meta.group ? sectionLabel(e.meta.group) : null}
-                <button
-                  type="button"
-                  onClick={() =>
-                    onNavigate({ view: "component", componentId: e.id })
-                  }
-                  className={navButtonClass(active)}
-                >
-                  {e.meta.title}
-                </button>
-              </div>
+              <button
+                key={name}
+                type="button"
+                onClick={() =>
+                  playgroundIds.has(name)
+                    ? onNavigate({ view: "component", componentId: name })
+                    : onNavigate({ view: "governance", catalog: name })
+                }
+                className={navButtonClass(active)}
+              >
+                {name}
+              </button>
             );
           })}
         </div>

package/src/dashboard/ComponentCatalog.tsx

@@ -1,4 +1,4 @@
-import { useMemo } from "react";
+import { useEffect, useMemo } from "react";
 import {
   HoverCard,
   HoverCardContent,
@@ -16,6 +16,7 @@ import {
   aggregateDeclaredProps,
   aggregateDefinitions,
   catalogComponentNames,
+  catalogRowDomId,
   usageMap,
 } from "./aggregate";
 import { shortPath } from "./paths";
@@ -146,7 +147,13 @@ function CatalogAppUsageHover({
   );
 }
 
-export function ComponentCatalog({ report }: { report: WorkspaceReport }) {
+export function ComponentCatalog({
+  report,
+  focusName,
+}: {
+  report: WorkspaceReport;
+  focusName?: string;
+}) {
   const defs = aggregateDefinitions(report);
   const usages = usageMap(report);
   const names = catalogComponentNames(defs, usages);
@@ -156,6 +163,12 @@ export function ComponentCatalog({ report }: { report: WorkspaceReport }) {
     [report],
   );
 
+  useEffect(() => {
+    if (!focusName || !names.includes(focusName)) return;
+    const el = document.getElementById(catalogRowDomId(focusName));
+    el?.scrollIntoView({ block: "nearest", behavior: "smooth" });
+  }, [focusName, names]);
+
   return (
     <Table>
       <TableHeader>
@@ -174,7 +187,7 @@ export function ComponentCatalog({ report }: { report: WorkspaceReport }) {
           ).length;
 
           return (
-            <TableRow key={name}>
+            <TableRow key={name} id={catalogRowDomId(name)}>
               <TableCell>{name}</TableCell>
 
               <TableCell>

package/src/dashboard/DashboardBody.tsx

@@ -12,7 +12,13 @@ import { ComponentCatalog } from "./ComponentCatalog";
 import { FindingsList } from "./FindingsList";
 import { ScoreStrip } from "./ScoreStrip";
 
-export function DashboardBody({ report }: { report: WorkspaceReport }) {
+export function DashboardBody({
+  report,
+  focusName,
+}: {
+  report: WorkspaceReport;
+  focusName?: string;
+}) {
   return (
     <div className="space-y-10">
       <ScoreStrip scores={report.scores} />
@@ -56,7 +62,7 @@ export function DashboardBody({ report }: { report: WorkspaceReport }) {
         title="Components"
         description="Definitions and JSX usage from the latest snapshot."
       >
-        <ComponentCatalog report={report} />
+        <ComponentCatalog report={report} focusName={focusName} />
       </Section>
 
       <Section

package/src/dashboard/aggregate.ts

@@ -10,8 +10,8 @@ const HIDDEN_COMPONENTS = new Set(["App", "React.StrictMode"]);
 
 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) {
+  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 });
@@ -55,7 +55,7 @@ export function aggregateDeclaredProps(report: WorkspaceReport): Map<string, str
 
 export function usageMap(report: WorkspaceReport): Map<string, UsageSummary> {
   const m = new Map<string, UsageSummary>();
-  for (const row of report.usage_by_component) {
+  for (const row of report.usage_by_component ?? []) {
     if (HIDDEN_COMPONENTS.has(row.component)) continue;
     m.set(row.component, row);
   }
@@ -71,3 +71,16 @@ export function catalogComponentNames(
   for (const k of usages.keys()) 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));
+}

package/src/dashboard/useWorkspaceReport.ts

@@ -52,9 +52,16 @@ export function useWorkspaceReport(
   const etagRef = useRef<string | null>(null);
 
   // Core fetch function.
-  const fetchReport = (url: string, cancelled: { value: boolean }) => {
-    setError(null);
-    setLoading(true);
+  const fetchReport = (
+    url: string,
+    cancelled: { value: boolean },
+    options?: { showLoading?: boolean },
+  ) => {
+    const showLoading = options?.showLoading !== false;
+    if (showLoading) {
+      setError(null);
+      setLoading(true);
+    }
     loadReport(url)
       .then((r) => {
         if (!cancelled.value) setReport(r);
@@ -63,14 +70,14 @@ export function useWorkspaceReport(
         if (!cancelled.value) setError(e instanceof Error ? e.message : "Failed to load report");
       })
       .finally(() => {
-        if (!cancelled.value) setLoading(false);
+        if (!cancelled.value && showLoading) setLoading(false);
       });
   };
 
   // Initial load.
   useEffect(() => {
     const cancelled = { value: false };
-    fetchReport(reportUrl, cancelled);
+    fetchReport(reportUrl, cancelled, { showLoading: true });
     return () => {
       cancelled.value = true;
     };
@@ -86,7 +93,7 @@ export function useWorkspaceReport(
     source.onmessage = (e) => {
       if (cancelled.value) return;
       if (e.data === "updated") {
-        fetchReport(reportUrl, cancelled);
+        fetchReport(reportUrl, cancelled, { showLoading: false });
       }
     };
 
@@ -118,7 +125,7 @@ export function useWorkspaceReport(
           return;
         }
         etagRef.current = etag;
-        fetchReport(reportUrl, cancelled);
+        fetchReport(reportUrl, cancelled, { showLoading: false });
       } catch {
         // Network error during poll — ignore silently; the user will see the
         // previous state.

package/src/report/modulePathMatch.ts

@@ -10,10 +10,13 @@ export function resolveModuleSourcePath(reportRoot: string, modulePath: string):
   return `${root}/${withSrc}`;
 }
 
+const SRC_COMPONENTS = "src/components/";
+
 /** Match finding path to source file even when `report.root` differs from machine that generated JSON. */
 function tailSrcComponents(p: string): string | null {
-  const m = norm(p).match(/(src\/components\/.+)$/);
-  return m ? m[1] : null;
+  const normalized = norm(p);
+  const idx = normalized.indexOf(SRC_COMPONENTS);
+  return idx === -1 ? null : normalized.slice(idx);
 }
 
 export function pathsMatch(reportPath: string, candidate: string): boolean {

package/src/shell/DashboardLayout.tsx

@@ -17,6 +17,7 @@ import { GovernancePane } from "../components/GovernancePane";
 import { Sidebar } from "../components/Sidebar";
 import { TokensPane } from "../components/TokensPane";
 import { DashboardCommandPalette } from "../components/DashboardCommandPalette";
+import { componentCatalogNamesFromReport } from "../dashboard/aggregate";
 import { useHashRoute } from "./useHashRoute";
 
 const STORAGE_KEY = "dslinter-dashboard-theme";
@@ -144,8 +145,28 @@ function DashboardLayoutInner({
   const [commandPaletteOpen, setCommandPaletteOpen] = useState(false);
   const { theme, setTheme, resolvedTheme } = useDashboardTheme();
 
+  const catalogNames = useMemo(
+    () => componentCatalogNamesFromReport(dslinterReport.report),
+    [dslinterReport.report],
+  );
+
+  const playgroundIds = useMemo(
+    () => new Set(playgroundEntries.map((e) => e.id)),
+    [playgroundEntries],
+  );
+
+  const focusName =
+    route.view === "governance" ? route.catalog : undefined;
+
   const getEntry = (id: string) => playgroundEntries.find((e) => e.id === id);
 
+  useEffect(() => {
+    if (route.view !== "component") return;
+    if (getEntry(route.componentId)) return;
+    if (!catalogNames.includes(route.componentId)) return;
+    navigate({ view: "governance", catalog: route.componentId });
+  }, [route, catalogNames, playgroundEntries, navigate]);
+
   let main: ReactNode;
   if (route.view === "tokens") {
     main = <TokensPane tokenCatalog={tokenCatalog} />;
@@ -156,6 +177,7 @@ function DashboardLayoutInner({
         reportUrl={reportUrl}
         dslinterReportHint={dslinterReportHint}
         dslinterReport={dslinterReport}
+        focusName={focusName}
       />
     );
   } else {
@@ -201,13 +223,17 @@ function DashboardLayoutInner({
       )}
     >
       <DashboardCommandPalette
-        entries={playgroundEntries}
+        catalogNames={catalogNames}
+        playgroundIds={playgroundIds}
         onNavigate={navigate}
         open={commandPaletteOpen}
         onOpenChange={setCommandPaletteOpen}
       />
       <Sidebar
-        entries={playgroundEntries}
+        report={dslinterReport.report}
+        playgroundIds={playgroundIds}
+        reportLoading={dslinterReport.loading}
+        reportError={dslinterReport.error}
         route={route}
         onNavigate={navigate}
         onOpenCommandPalette={() => setCommandPaletteOpen(true)}

package/src/shell/hashRoute.ts

@@ -1,6 +1,6 @@
 export type HashRoute =
   | { view: "tokens" }
-  | { view: "governance" }
+  | { view: "governance"; catalog?: string }
   | { view: "component"; componentId: string };
 
 const PREFIX = "#!/";
@@ -26,6 +26,12 @@ export function parseHashRoute(hash: string): HashRoute {
   if (raw === "governance") {
     return { view: "governance" };
   }
+  if (raw.startsWith("governance/")) {
+    const catalog = decodeURIComponent(raw.slice("governance/".length));
+    if (catalog.length > 0) {
+      return { view: "governance", catalog };
+    }
+  }
   if (raw.startsWith("component/")) {
     const componentId = decodeURIComponent(raw.slice("component/".length));
     if (componentId.length > 0) {
@@ -40,7 +46,9 @@ export function formatHashRoute(route: HashRoute): string {
     case "tokens":
       return `${PREFIX}tokens`;
     case "governance":
-      return `${PREFIX}governance`;
+      return route.catalog
+        ? `${PREFIX}governance/${encodeURIComponent(route.catalog)}`
+        : `${PREFIX}governance`;
     case "component":
       return `${PREFIX}component/${encodeURIComponent(route.componentId)}`;
     default: