dslinter 0.0.6

package/src/dashboard/ComponentUsageDetails.tsx

@@ -0,0 +1,109 @@
+import { useMemo } from "react";
+import {
+  Table,
+  TableBody,
+  TableCell,
+  TableHead,
+  TableHeader,
+  TableRow,
+} from "@/components/ui/table";
+import type { UsageLocation, WorkspaceReport } from "../types/report";
+import { usageMap } from "./aggregate";
+import { shortPath } from "./paths";
+import { EmptyCard } from "../shell/EmptyCard";
+import { InlineCode } from "@/components/InlineCode";
+
+function formatCallSiteProps(loc: UsageLocation): string {
+  if (!loc.props.length) return "—";
+  return loc.props
+    .map((p) =>
+      loc.prop_values?.[p] != null
+        ? `${p}=${JSON.stringify(loc.prop_values[p])}`
+        : p,
+    )
+    .join(", ");
+}
+
+function sortedLocations(
+  locations: UsageLocation[] | undefined,
+): UsageLocation[] {
+  const list = [...(locations ?? [])];
+  list.sort((a, b) => a.path.localeCompare(b.path) || a.line - b.line);
+  return list;
+}
+
+export function ComponentUsageDetails({
+  report,
+  componentId,
+}: {
+  report: WorkspaceReport | null;
+  componentId: string;
+}) {
+  const usage = useMemo(() => {
+    if (!report) return undefined;
+    return usageMap(report).get(componentId);
+  }, [report, componentId]);
+
+  if (!report) {
+    return (
+      <p className="text-sm text-muted-foreground">
+        Load <span className="font-mono">dslint-report.json</span> to see where
+        this component is used in the workspace.
+      </p>
+    );
+  }
+
+  if (!usage) {
+    return (
+      <EmptyCard>
+        No found usage for <InlineCode>{componentId}</InlineCode>.
+      </EmptyCard>
+    );
+  }
+
+  const rows = sortedLocations(usage.usage_locations);
+
+  if (rows.length === 0) {
+    return (
+      <p className="text-sm text-muted-foreground">
+        Usage totals exist but individual call sites were not recorded in this
+        report.
+      </p>
+    );
+  }
+
+  return (
+    <Table className="[&>table]:table-fixed [&>table]:w-full">
+      <TableHeader>
+        <TableRow>
+          <TableHead className="w-[40%]">File</TableHead>
+          <TableHead className="w-14 whitespace-nowrap">Line</TableHead>
+          <TableHead className="min-w-0">Props at this call site</TableHead>
+        </TableRow>
+      </TableHeader>
+      <TableBody>
+        {rows.map((loc, i) => {
+          const propsText = formatCallSiteProps(loc);
+          return (
+            <TableRow key={`${loc.path}-${loc.line}-${i}`}>
+              <TableCell className="font-mono text-xs text-foreground">
+                {shortPath(report.root, loc.path)}
+              </TableCell>
+              <TableCell className="tabular-nums text-muted-foreground">
+                {loc.line}
+              </TableCell>
+              <TableCell className="min-w-0">
+                <span
+                  className="block truncate font-mono text-xs text-foreground"
+                  title={propsText}
+                >
+                  {propsText}
+                </span>
+              </TableCell>
+            </TableRow>
+          );
+        })}
+      </TableBody>
+    </Table>
+  );
+}

package/src/dashboard/DashboardBody.tsx

@@ -0,0 +1,71 @@
+import { Section } from "../shell/Section";
+import {
+  Table,
+  TableBody,
+  TableCell,
+  TableHead,
+  TableHeader,
+  TableRow,
+} from "@/components/ui/table";
+import type { WorkspaceReport } from "../types/report";
+import { ComponentCatalog } from "./ComponentCatalog";
+import { FindingsList } from "./FindingsList";
+import { ScoreStrip } from "./ScoreStrip";
+
+export function DashboardBody({ report }: { report: WorkspaceReport }) {
+  return (
+    <div className="space-y-10">
+      <ScoreStrip scores={report.scores} />
+
+      {report.duplicate_components.length > 0 ? (
+        <div className="rounded-lg border border-amber-200 bg-amber-50 px-4 py-3 text-xs text-amber-950">
+          <span className="font-semibold">Duplicate component names: </span>
+          {report.duplicate_components.map((d) => d.name).join(", ")}
+        </div>
+      ) : null}
+
+      {report.ownership.length > 0 ? (
+        <Section
+          id="ownership"
+          title="Ownership"
+          description="Prefix match from <span className='font-mono'>.dslint.json</span> — useful for adoption rollups."
+        >
+          <Table>
+            <TableHeader>
+              <TableRow>
+                <TableHead>Owner</TableHead>
+                <TableHead>Files</TableHead>
+                <TableHead>Definitions</TableHead>
+              </TableRow>
+            </TableHeader>
+            <TableBody>
+              {report.ownership.map((row) => (
+                <TableRow key={row.owner}>
+                  <TableCell>{row.owner}</TableCell>
+                  <TableCell>{row.files}</TableCell>
+                  <TableCell>{row.definitions}</TableCell>
+                </TableRow>
+              ))}
+            </TableBody>
+          </Table>
+        </Section>
+      ) : null}
+
+      <Section
+        id="components"
+        title="Components"
+        description="Definitions and JSX usage from the latest snapshot."
+      >
+        <ComponentCatalog report={report} />
+      </Section>
+
+      <Section
+        id="issues"
+        title="Issues"
+        description="Findings from the workspace DSLinter report scoped to this file."
+      >
+        <FindingsList findings={report.findings} root={report.root} />
+      </Section>
+    </div>
+  );
+}

package/src/dashboard/FindingsList.tsx

@@ -0,0 +1,151 @@
+import { useMemo, useState } from "react";
+import {
+  Table,
+  TableBody,
+  TableCell,
+  TableHead,
+  TableHeader,
+  TableRow,
+} from "@/components/ui/table";
+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";
+
+type Filter = "all" | Severity;
+
+function isFilter(value: string): value is Filter {
+  return (
+    value === "all" ||
+    value === "error" ||
+    value === "warning" ||
+    value === "info"
+  );
+}
+
+export function FindingsList({
+  findings,
+  root,
+}: {
+  findings: LintFinding[];
+  root: string;
+}) {
+  const [filter, setFilter] = useState<Filter>("all");
+
+  const counts = useMemo(() => {
+    const c = { error: 0, warning: 0, info: 0 };
+    for (const f of findings) {
+      if (f.severity === "error") c.error += 1;
+      else if (f.severity === "warning") c.warning += 1;
+      else c.info += 1;
+    }
+    return c;
+  }, [findings]);
+
+  const filtered =
+    filter === "all" ? findings : findings.filter((f) => f.severity === 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.
+      </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"
+        >
+          <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>
+        <TableHeader>
+          <TableRow>
+            <TableHead scope="col">Severity</TableHead>
+            <TableHead scope="col">Rule</TableHead>
+            <TableHead scope="col">Message</TableHead>
+            <TableHead scope="col">File</TableHead>
+          </TableRow>
+        </TableHeader>
+        <TableBody className="align-top text-foreground">
+          {filtered.map((f, i) => (
+            <TableRow
+              key={`${f.rule_id}-${f.path}-${f.line ?? "x"}-${i}`}
+              className="border-border hover:bg-transparent"
+            >
+              <TableCell className="px-3 py-2">
+                <Badge
+                  variant={
+                    f.severity === "error"
+                      ? "destructive"
+                      : f.severity === "warning"
+                        ? "secondary"
+                        : "outline"
+                  }
+                >
+                  {f.severity}
+                </Badge>
+              </TableCell>
+              <TableCell className="px-3 py-2 font-mono text-xs text-muted-foreground">
+                {f.rule_id}
+              </TableCell>
+              <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>
+            </TableRow>
+          ))}
+        </TableBody>
+      </Table>
+    </div>
+  );
+}

package/src/dashboard/ScoreStrip.tsx

@@ -0,0 +1,28 @@
+import type { GovernanceScores } from "../types/report";
+
+export function ScoreStrip({ scores }: { scores: GovernanceScores }) {
+  const items: { label: string; value: number }[] = [
+    { label: "System health", value: scores.design_system_health },
+    { label: "UX consistency", value: scores.ux_consistency },
+    { label: "Accessibility", value: scores.accessibility },
+    { label: "Maintainability", value: scores.maintainability },
+  ];
+
+  return (
+    <section className="grid grid-cols-2 gap-1 rounded-xl border border-border bg-muted/30 p-1 md:grid-cols-4">
+      {items.map(({ label, value }) => (
+        <div
+          key={label}
+          className="rounded-lg border border-border bg-card px-4 py-3 text-card-foreground shadow-xs"
+        >
+          <p className="text-xs font-medium uppercase tracking-wide text-muted-foreground">
+            {label}
+          </p>
+          <p className="mt-1 text-2xl font-semibold tabular-nums text-foreground">
+            {value}
+          </p>
+        </div>
+      ))}
+    </section>
+  );
+}

package/src/dashboard/TokenWall.tsx

@@ -0,0 +1,241 @@
+import type { TokenCatalog } from "../types/tokenCatalog";
+
+function hasTypographyContent(catalog: TokenCatalog): boolean {
+  const t = catalog.typography;
+  if (!t) return false;
+  return (
+    t.families.length > 0 || t.sizes.length > 0 || (t.weights?.length ?? 0) > 0
+  );
+}
+
+export function TokenWall({ catalog }: { catalog: TokenCatalog }) {
+  const typo = catalog.typography;
+  const weights = typo?.weights ?? [];
+
+  return (
+    <section className="space-y-6">
+      <div>
+        <h2 className="text-sm font-semibold text-foreground">Colors</h2>
+        <p className="mt-1 text-xs text-muted-foreground">
+          From Tailwind theme extensions.
+        </p>
+        <ul className="mt-4 grid gap-3 sm:grid-cols-2">
+          {catalog.colors.map((c) => (
+            <li
+              key={`${c.token}-${c.shade}`}
+              className="flex items-center gap-3 rounded-lg border border-border bg-card px-3 py-2"
+              title={c.value}
+            >
+              <svg
+                className="h-9 w-9 shrink-0 overflow-hidden rounded border border-border shadow-inner"
+                viewBox="0 0 36 36"
+                aria-hidden
+              >
+                <rect width="36" height="36" fill={c.value} />
+              </svg>
+              <div className="min-w-0">
+                <p className="truncate font-mono text-xs text-foreground">
+                  {c.token}/{c.shade}
+                </p>
+                <p className="truncate text-xs text-muted-foreground">{c.value}</p>
+                <p className="truncate font-mono text-xs text-muted-foreground/70">
+                  {c.tw}
+                </p>
+              </div>
+            </li>
+          ))}
+        </ul>
+      </div>
+
+      {hasTypographyContent(catalog) && typo ? (
+        <div className="space-y-8">
+          <div>
+            <h2 className="text-sm font-semibold text-foreground">
+              Typography
+            </h2>
+            <p className="mt-1 text-xs text-muted-foreground">
+              Font stacks and Tailwind utilities — preview matches your theme
+              tokens.
+            </p>
+          </div>
+
+          {typo.families.length > 0 ? (
+            <div>
+              <h3 className="text-xs font-semibold uppercase tracking-wide text-muted-foreground">
+                Font families
+              </h3>
+              <ul className="mt-3 grid gap-3 sm:grid-cols-2">
+                {typo.families.map((f) => (
+                  <li
+                    key={f.key}
+                    className="rounded-lg border border-border bg-card px-3 py-3"
+                    title={f.value}
+                  >
+                    <p className={`${f.tw} text-sm text-foreground`}>
+                      The quick brown fox jumps over the lazy dog.
+                    </p>
+                    <p className="mt-2 truncate font-mono text-xs text-foreground">
+                      {f.tw}
+                    </p>
+                    <p className="mt-1 break-all text-xs leading-snug text-muted-foreground">
+                      {f.value}
+                    </p>
+                  </li>
+                ))}
+              </ul>
+            </div>
+          ) : null}
+
+          {typo.families.length > 0 && typo.sizes.length > 0 ? (
+            typo.families.map((family) => (
+              <div key={family.key}>
+                <h3 className="text-xs font-semibold uppercase tracking-wide text-muted-foreground">
+                  Type scale · {family.tw}
+                </h3>
+                <ul className="mt-3 divide-y divide-border overflow-x-auto rounded-lg border border-border bg-card">
+                  {typo.sizes.map((s) => (
+                    <li
+                      key={`${family.key}-${s.token}`}
+                      className="flex flex-wrap items-baseline gap-x-4 gap-y-1 px-3 py-2.5 text-xs sm:flex-nowrap"
+                    >
+                      <span className="w-24 shrink-0 font-mono text-foreground/90">
+                        {s.tw}
+                      </span>
+                      <span className="hidden w-36 shrink-0 text-muted-foreground sm:inline">
+                        {s.value}
+                      </span>
+                      <span
+                        className={`min-w-0 flex-1 truncate ${family.tw} ${s.tw} text-foreground`}
+                      >
+                        Aa Bb Cc 0123456789
+                      </span>
+                    </li>
+                  ))}
+                </ul>
+              </div>
+            ))
+          ) : typo.sizes.length > 0 ? (
+            <div>
+              <h3 className="text-xs font-semibold uppercase tracking-wide text-muted-foreground">
+                Type scale · font-sans
+              </h3>
+              <ul className="mt-3 divide-y divide-border overflow-x-auto rounded-lg border border-border bg-card">
+                {typo.sizes.map((s) => (
+                  <li
+                    key={s.token}
+                    className="flex flex-wrap items-baseline gap-x-4 gap-y-1 px-3 py-2.5 text-xs sm:flex-nowrap"
+                  >
+                    <span className="w-24 shrink-0 font-mono text-foreground/90">
+                      {s.tw}
+                    </span>
+                    <span className="hidden w-36 shrink-0 text-muted-foreground sm:inline">
+                      {s.value}
+                    </span>
+                    <span
+                      className={`min-w-0 flex-1 truncate font-sans ${s.tw} text-foreground`}
+                    >
+                      Aa Bb Cc 0123456789
+                    </span>
+                  </li>
+                ))}
+              </ul>
+            </div>
+          ) : null}
+
+          {typo.families.length > 0 && weights.length > 0 ? (
+            typo.families.map((family) => (
+              <div key={`w-${family.key}`}>
+                <h3 className="text-xs font-semibold uppercase tracking-wide text-muted-foreground">
+                  Font weights · {family.tw}
+                </h3>
+                <ul className="mt-3 divide-y divide-border rounded-lg border border-border bg-card">
+                  {weights.map((w) => (
+                    <li
+                      key={`${family.key}-${w.token}`}
+                      className="flex flex-wrap items-baseline gap-x-4 gap-y-1 px-3 py-2 text-xs"
+                    >
+                      <span className="w-28 shrink-0 font-mono text-foreground/90">
+                        {w.tw}
+                      </span>
+                      <span className="w-10 shrink-0 tabular-nums text-muted-foreground">
+                        {w.value ?? "—"}
+                      </span>
+                      <span
+                        className={`min-w-0 flex-1 ${family.tw} ${w.tw} text-base text-foreground`}
+                      >
+                        Agile beige sharks vex polite judges.
+                      </span>
+                    </li>
+                  ))}
+                </ul>
+              </div>
+            ))
+          ) : weights.length > 0 ? (
+            <div>
+              <h3 className="text-xs font-semibold uppercase tracking-wide text-muted-foreground">
+                Font weights · font-sans
+              </h3>
+              <ul className="mt-3 divide-y divide-border rounded-lg border border-border bg-card">
+                {weights.map((w) => (
+                  <li
+                    key={w.token}
+                    className="flex flex-wrap items-baseline gap-x-4 gap-y-1 px-3 py-2 text-xs"
+                  >
+                    <span className="w-28 shrink-0 font-mono text-foreground/90">
+                      {w.tw}
+                    </span>
+                    <span className="w-10 shrink-0 tabular-nums text-muted-foreground">
+                      {w.value ?? "—"}
+                    </span>
+                    <span
+                      className={`min-w-0 flex-1 font-sans ${w.tw} text-base text-foreground`}
+                    >
+                      Agile beige sharks vex polite judges.
+                    </span>
+                  </li>
+                ))}
+              </ul>
+            </div>
+          ) : null}
+        </div>
+      ) : null}
+
+      <div className="grid gap-6 md:grid-cols-2">
+        <div>
+          <h2 className="text-sm font-semibold text-foreground">Spacing</h2>
+          <ul className="mt-3 divide-y divide-border rounded-lg border border-border bg-card">
+            {catalog.spacing.map((s) => (
+              <li
+                key={s.token}
+                className="flex justify-between gap-4 px-3 py-2 text-xs"
+              >
+                <span className="font-mono text-foreground/90">{s.token}</span>
+                <span className="text-muted-foreground">{s.value}</span>
+                <span className="hidden font-mono text-muted-foreground/70 sm:inline">
+                  {s.tw}
+                </span>
+              </li>
+            ))}
+          </ul>
+        </div>
+        <div>
+          <h2 className="text-sm font-semibold text-foreground">Radius</h2>
+          <ul className="mt-3 divide-y divide-border rounded-lg border border-border bg-card">
+            {catalog.radius.map((r) => (
+              <li
+                key={r.token}
+                className="flex justify-between gap-4 px-3 py-2 text-xs"
+              >
+                <span className="font-mono text-foreground/90">{r.token}</span>
+                <span className="text-muted-foreground">{r.value}</span>
+                <span className="hidden font-mono text-muted-foreground/70 sm:inline">
+                  {r.tw}
+                </span>
+              </li>
+            ))}
+          </ul>
+        </div>
+      </div>
+    </section>
+  );
+}

package/src/dashboard/aggregate.ts

@@ -0,0 +1,73 @@
+import type { ComponentDefinition, UsageSummary, WorkspaceReport } from "../types/report";
+
+export interface DefinitionSite {
+  kind: ComponentDefinition["kind"];
+  path: string;
+  line: number;
+}
+
+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) {
+      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);
+    }
+  }
+  for (const [, sites] of map) {
+    sites.sort((a, b) => a.path.localeCompare(b.path) || a.line - b.line);
+  }
+  return map;
+}
+
+/** 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 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);
+    }
+  };
+
+  for (const file of report.files ?? []) {
+    for (const d of file.definitions ?? []) {
+      add(d.name, d.declared_props);
+    }
+  }
+  for (const pg of report.playgrounds ?? []) {
+    add(pg.export_name, pg.declared_props);
+  }
+
+  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;
+}
+
+export function catalogComponentNames(
+  defs: Map<string, DefinitionSite[]>,
+  usages: Map<string, UsageSummary>,
+): string[] {
+  const names = new Set<string>();
+  for (const k of defs.keys()) names.add(k);
+  for (const k of usages.keys()) names.add(k);
+  return [...names].sort((a, b) => a.localeCompare(b));
+}

package/src/dashboard/paths.ts

@@ -0,0 +1,10 @@
+export function shortPath(root: string, fullPath: string): string {
+  const norm = (p: string) => p.replace(/\\/g, "/").replace(/\/$/, "");
+  const r = norm(root);
+  const f = norm(fullPath);
+  if (f.startsWith(r + "/")) {
+    return f.slice(r.length + 1);
+  }
+  const parts = f.split("/");
+  return parts.slice(-3).join("/");
+}