dslinter 0.0.32 → 0.0.33

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/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: