@urmzd/github-insights 2.1.0 → 2.3.0

package/skills/github-insights/SKILL.md

@@ -8,9 +8,9 @@ description: >-
 argument-hint: [setup | customize | generate | debug | extend]
 ---
 
-# GitHub Metrics — Agent Skill
+# GitHub Insights — Agent Skill
 
-Generate beautiful dark-themed SVG metrics for GitHub profile READMEs. Sections include language breakdowns (donut chart), AI expertise analysis (proficiency bars), contribution pulse (stat cards), contribution calendar (heatmap), signature projects (by stars), and open source contributions.
+Generate beautiful SVG metrics for GitHub profile READMEs. Sections include language velocity streamgraph, contribution rhythm radar chart, project constellation map, and open source impact trail. SVGs support light/dark theme switching and CSS animations.
 
 ## Quick Reference
 
@@ -18,7 +18,7 @@ Generate beautiful dark-themed SVG metrics for GitHub profile READMEs. Sections
 |------|---------|
 | Generate locally | `npm run generate` (requires `gh auth login`) |
 | Full CI check | `npm run ci` (fmt + lint + typecheck + test + build) |
-| Build bundle | `npm run build` (ncc → `dist/`) |
+| Build bundle | `npm run build` (ncc -> `dist/`) |
 | Run tests | `npm test` (vitest) |
 | Type-check | `npm run typecheck` |
 | Lint | `npm run lint` (biome) |
@@ -66,8 +66,7 @@ npm run generate
 Local mode differences:
 - `commit-push` defaults to `false` (no git operations)
 - README writes to `_README.md` (not `README.md`)
-- All three template previews are generated in `examples/{classic,modern,minimal}/`
-- Both preamble variants (full + short) are generated for preview
+- All four template previews are generated in `examples/{classic,modern,minimal,ecosystem}/`
 
 ## Configuration
 
@@ -76,18 +75,16 @@ Local mode differences:
 ```yaml
 name: Display Name           # overrides GitHub profile name
 pronunciation: pronunciation # shown as subscript in heading
-title: Software Engineer     # blockquote under heading; guides AI expertise
-desired_title: Senior SWE    # AI context only — biases expertise categories
+title: Software Engineer     # blockquote under heading
+desired_title: Senior SWE    # AI context only
 bio: Short bio text.         # footer text in classic template
 preamble: PREAMBLE.md        # path to custom preamble (bypasses AI generation)
-template: classic            # "classic" | "modern" | "minimal"
+template: classic            # "classic" | "modern" | "minimal" | "ecosystem"
 sections:
-  - pulse
-  - languages
-  - expertise
-  - projects
-  - contributions
-  - calendar
+  - velocity
+  - rhythm
+  - constellation
+  - impact
 ```
 
 ### Action inputs
@@ -109,41 +106,38 @@ sections:
 
 | Key | SVG filename | What it renders |
 |-----|-------------|-----------------|
-| `pulse` | `metrics-pulse.svg` | 4 stat cards: commits, PRs, reviews, active repos |
-| `languages` | `metrics-languages.svg` | Donut chart of top 10 languages by bytes |
-| `expertise` | `metrics-expertise.svg` | AI-generated proficiency bars by category |
-| `projects` | `metrics-complexity.svg` | Top 5 repos by stars with descriptions |
-| `calendar` | `metrics-calendar.svg` | GitHub contribution heatmap (1 year) |
-| `contributions` | `metrics-contributions.svg` | External repos contributed to |
+| `velocity` | `metrics-velocity.svg` | Streamgraph of language usage over 12 months |
+| `rhythm` | `metrics-rhythm.svg` | 7-spoke radar chart + contribution stats |
+| `constellation` | `metrics-constellation.svg` | Project map by language and complexity |
+| `impact` | `metrics-impact.svg` | External contributions with impact bars |
 
 ### Templates
 
-- **`classic`** (default): Formal layout — `# Name`, blockquote title, full AI preamble (2–4 paragraphs), social badges, SVG metrics, bio footer, attribution.
-- **`modern`**: Friendly — `# Hi, I'm {firstName} 👋`, short preamble, active/maintained/inactive project lists in markdown, selective SVG sections.
-- **`minimal`**: Clean — `# {firstName}`, short preamble, social badges, SVG metrics, attribution.
+- **`classic`** (default): Formal layout — `# Name`, blockquote title, preamble, social badges, SVG metrics, bio footer.
+- **`modern`**: Friendly — `# Hi, I'm {firstName}`, projects by activity, Project Map, GitHub Stats, Impact.
+- **`minimal`**: Clean — `# {firstName}`, preamble, social badges, SVG metrics.
+- **`ecosystem`**: Categorized — projects by purpose (Developer Tools/SDKs/Applications/Research), Project Map, GitHub Stats, Impact.
 
 ## Architecture
 
 ### Execution flow
 
 ```
-Inputs → Fetch (parallel) → AI calls (sequential) → Transform → Render sections → Write SVGs → Generate README → Commit
+Inputs -> Fetch (parallel) -> AI calls -> Transform -> Compute velocity/rhythm/constellation -> Render sections -> Write SVGs -> Generate README -> Commit
 ```
 
 ### Key source files
 
 | File | Role |
 |------|------|
-| `src/index.ts` | Orchestration: fetch → transform → render → write → commit |
+| `src/index.ts` | Orchestration: fetch -> transform -> render -> write -> commit |
 | `src/api.ts` | GitHub GraphQL queries + GitHub Models AI calls |
-| `src/metrics.ts` | Data aggregation, complexity scoring, section building |
-| `src/config.ts` | TOML config loading |
-| `src/types.ts` | All TypeScript interfaces (`UserConfig`, `SectionDef`, `TemplateContext`, etc.) |
-| `src/templates.ts` | Three README template functions + social badge builder |
-| `src/theme.ts` | `THEME` colors, `LAYOUT` dimensions, `BAR_COLORS` palette |
-| `src/parsers.ts` | Dependency manifest parsers (package.json, Cargo.toml, go.mod, etc.) |
-| `src/components/` | SVG rendering components (custom JSX → SVG strings) |
-| `src/jsx-factory.ts` | Custom `h()` / `Fragment()` JSX runtime (no React) |
+| `src/metrics.ts` | Data aggregation, velocity/rhythm/constellation computation, section building |
+| `src/config.ts` | YAML/TOML config loading |
+| `src/types.ts` | All TypeScript interfaces |
+| `src/templates.ts` | Four README template functions + social badge builder |
+| `src/theme.ts` | `THEME`/`THEME_LIGHT` colors, `LAYOUT` dimensions, `BAR_COLORS` palette |
+| `src/components/` | SVG rendering components (custom JSX -> SVG strings) |
 
 ### Component rendering pattern
 
@@ -155,25 +149,6 @@ function renderXxx(data: ..., y: number): { svg: string; height: number }
 
 Components return SVG string fragments and their rendered height. The `y` parameter is the vertical cursor; heights are accumulated to stack sections vertically.
 
-### Theme constants (hardcoded in `src/theme.ts`)
-
-```
-THEME.bg       = "#0d1117"   (dark background)
-THEME.cardBg   = "#161b22"   (card backgrounds)
-THEME.border   = "#30363d"   (card borders)
-THEME.link     = "#58a6ff"   (card titles - blue)
-THEME.text     = "#c9d1d9"   (primary text)
-THEME.secondary= "#8b949e"   (labels)
-THEME.muted    = "#6e7681"   (values)
-
-LAYOUT.width   = 808         (fixed SVG canvas width)
-LAYOUT.padX    = 24
-LAYOUT.padY    = 24
-LAYOUT.sectionGap = 30
-```
-
-These are not configurable via inputs or TOML — changing them requires editing source.
-
 ## Extending
 
 ### Add a new section
@@ -183,16 +158,7 @@ These are not configurable via inputs or TOML — changing them requires editing
 3. Add the section key to `SECTION_KEYS` map in `src/metrics.ts`
 4. Add a `SectionDef` entry in the `buildSections()` function in `src/metrics.ts`
 5. Fetch any new data needed in `src/index.ts`
-6. Add a `*.test.ts` file alongside the component
-7. Update `action.yml` if new inputs are needed
-
-### Add a new dependency parser
-
-1. Implement `PackageParser` interface in `src/parsers.ts`:
-   ```ts
-   { filenames: string[]; parseDependencies(text: string): string[] }
-   ```
-2. Add it to the `PARSERS` array — it auto-registers in `PARSER_MAP`
+6. Add a `*.test.tsx` file alongside the component
 
 ### Add a new README template
 
@@ -202,36 +168,24 @@ These are not configurable via inputs or TOML — changing them requires editing
 
 ## Troubleshooting
 
-### "Expertise section missing"
-The expertise section only appears when the AI call succeeds. Check:
-- Token has `models: read` permission
-- The workflow has `permissions: models: read`
-- GitHub Models endpoint is reachable
+### "Velocity section is flat"
+The streamgraph distributes per-repo commits using the contribution calendar's monthly activity weights. If there's no calendar data, velocity will be empty.
 
-### "Calendar section missing"
-Only rendered when contribution calendar data exists. The user must have public contributions.
+### "Constellation section missing"
+Only rendered when there are projects with language data. Ensure repos have detectable languages.
 
-### "Contributions section missing"
-Only rendered when the user has contributed to external (non-owned) repositories in the past year.
+### "Impact section missing"
+Only rendered when the user has contributed to external (non-owned) repositories.
 
 ### AI preamble is empty or generic
 - The AI call uses `gpt-4.1` via GitHub Models — it needs diverse profile data to generate good output
-- Provide `title` and `desired_title` in TOML config for better results
+- Provide `title` in config for better results
 - Create a custom `PREAMBLE.md` to bypass AI entirely
 
 ### Local generation fails
 - Ensure `gh auth login` is done and `gh auth token` returns a valid token
 - Ensure Node.js 22+ (`node --version`)
-- The `GITHUB_TOKEN` and `GITHUB_REPOSITORY_OWNER` env vars are set automatically by `npm run generate` via `gh`
 
 ### SVG looks wrong after changes
 - Run `npm run build` to rebuild the `dist/` bundle — the action runs `dist/index.js`, not source directly
 - SVG width is fixed at 808px; all layout math depends on this
-
-## Code Style Rules
-
-- TypeScript strict mode, ES modules
-- Biome for formatting and linting (not ESLint/Prettier)
-- Tests colocated as `*.test.ts` / `*.test.tsx` alongside source
-- Custom JSX factory (`h`, `Fragment`) — NOT React
-- All AI calls and contribution fetches are non-fatal (catch → return empty)

package/sr.yaml

@@ -14,3 +14,12 @@ commit_types:
 
 artifacts:
   - dist.tar.gz
+
+hooks:
+  commit-msg:
+    - sr hook commit-msg
+  pre-commit:
+    - npm run fmt
+    - npm run lint
+    - npm run typecheck
+    - npm run test

package/src/api.ts

@@ -7,7 +7,6 @@ import type {
   RepoClassificationInput,
   RepoClassificationOutput,
   RepoNode,
-  TechHighlight,
   UserConfig,
   UserProfile,
 } from "./types.js";
@@ -320,7 +319,6 @@ export interface PreambleContext {
   profile: UserProfile;
   userConfig: UserConfig;
   languages: { name: string; percent: string }[];
-  techHighlights: TechHighlight[];
   activeProjects: ProjectItem[];
   complexProjects: ProjectItem[];
 }
@@ -330,21 +328,12 @@ export const fetchAIPreamble = async (
   context: PreambleContext,
 ): Promise<string | undefined> => {
   try {
-    const {
-      profile,
-      userConfig,
-      languages,
-      techHighlights,
-      activeProjects,
-      complexProjects,
-    } = context;
+    const { profile, userConfig, languages, activeProjects, complexProjects } =
+      context;
 
     const langLines = languages
       .map((l) => `- ${l.name}: ${l.percent}%`)
       .join("\n");
-    const techLines = techHighlights
-      .map((h) => `- ${h.category}: ${h.items.join(", ")} (score: ${h.score})`)
-      .join("\n");
 
     const formatProject = (p: ProjectItem): string => {
       const langs = p.languages?.length ? ` [${p.languages.join(", ")}]` : "";
@@ -373,9 +362,6 @@ ${profileLines}
 Languages (by code volume):
 ${langLines}
 
-Expertise areas:
-${techLines}
-
 Most technically complex projects (by language diversity, codebase size, and depth):
 ${complexProjectLines || "None"}
 
@@ -474,130 +460,6 @@ Generate 1-2 sentences that:
   }
 };
 
-export const fetchExpertiseAnalysis = async (
-  token: string,
-  languages: { name: string; percent: string }[],
-  allDeps: string[],
-  allTopics: string[],
-  repos: RepoNode[],
-  readmeMap: ReadmeMap,
-  userConfig: UserConfig = {},
-): Promise<TechHighlight[]> => {
-  try {
-    const langLines = languages
-      .map((l) => `- ${l.name}: ${l.percent}%`)
-      .join("\n");
-
-    const repoSummaries = repos
-      .slice(0, 20)
-      .map((r) => {
-        const readme = readmeMap.get(r.name) || "";
-        const snippet = readme.slice(0, 500).replace(/\n/g, " ");
-        const desc = r.description || "";
-        return `- ${r.name}: ${desc} | ${snippet}`;
-      })
-      .join("\n");
-
-    const desiredTitle = userConfig.desired_title || userConfig.title;
-    let titleContext = "";
-    if (userConfig.title) {
-      titleContext = `\nDeveloper context:\n- Current title: ${userConfig.title}`;
-      if (desiredTitle && desiredTitle !== userConfig.title) {
-        titleContext += `\n- Desired title: ${desiredTitle}`;
-      }
-      titleContext += `\n- Tailor the expertise categories to highlight skills most relevant to ${desiredTitle}. Prioritize domains and technologies that align with this role.\n`;
-    }
-
-    const prompt = `You are analyzing a developer's GitHub profile to create a curated expertise showcase.
-${titleContext}
-Languages (by code volume):
-${langLines}
-
-Dependencies found across repositories:
-${allDeps.join(", ")}
-
-Repository topics:
-${allTopics.join(", ")}
-
-Repository descriptions and README excerpts:
-${repoSummaries}
-
-From this data, produce a curated expertise profile:
-- Group the most notable technologies into 3-6 expertise categories
-- Use domain-oriented category names (e.g., "Machine Learning", "Web Development", "DevOps", "Backend & APIs", "Data Science", "Systems Programming")
-- Include 3-6 of the most relevant technologies/tools per category
-- Normalize names to their common display form (e.g., "pg" → "PostgreSQL", "torch" → "PyTorch", "boto3" → "AWS SDK")
-- Skip trivial utility libraries (lodash, uuid, etc.) that don't showcase meaningful expertise
-- Only include categories where there's meaningful evidence of usage
-- Assign each category a proficiency score from 0 to 100 based on evidence strength:
-  language code volume, dependency count, topic mentions, and README depth.
-  Use the full range (e.g. 80-95 for primary stack, 50-70 for secondary, 30-50 for minor).`;
-
-    const res = await fetchWithRetry(
-      "https://models.github.ai/inference/chat/completions",
-      {
-        method: "POST",
-        headers: {
-          Authorization: `bearer ${token}`,
-          "Content-Type": "application/json",
-        },
-        body: JSON.stringify({
-          model: "gpt-4.1",
-          messages: [{ role: "user", content: prompt }],
-          temperature: 0.1,
-          response_format: {
-            type: "json_schema",
-            json_schema: {
-              name: "tech_highlights",
-              strict: true,
-              schema: {
-                type: "object",
-                properties: {
-                  highlights: {
-                    type: "array",
-                    items: {
-                      type: "object",
-                      properties: {
-                        category: { type: "string" },
-                        items: { type: "array", items: { type: "string" } },
-                        score: { type: "number" },
-                      },
-                      required: ["category", "items", "score"],
-                      additionalProperties: false,
-                    },
-                  },
-                },
-                required: ["highlights"],
-                additionalProperties: false,
-              },
-            },
-          },
-        }),
-      },
-      "Expertise",
-    );
-
-    if (!res?.ok) {
-      if (res) console.warn(`GitHub Models API error: ${res.status}`);
-      return [];
-    }
-
-    const json = (await res.json()) as {
-      choices?: { message?: { content?: string } }[];
-    };
-    const content = json.choices?.[0]?.message?.content || "{}";
-    const parsed = JSON.parse(content) as { highlights?: TechHighlight[] };
-    return (parsed.highlights || [])
-      .filter((h) => h.category && Array.isArray(h.items) && h.items.length > 0)
-      .map((h) => ({ ...h, score: Math.max(0, Math.min(100, h.score || 0)) }))
-      .sort((a, b) => b.score - a.score);
-  } catch (err: unknown) {
-    const msg = err instanceof Error ? err.message : String(err);
-    console.warn(`Expertise analysis failed (non-fatal): ${msg}`);
-    return [];
-  }
-};
-
 export const fetchProjectClassifications = async (
   token: string,
   repos: RepoClassificationInput[],

package/src/components/contribution-heatmap.tsx

@@ -0,0 +1,43 @@
+import { Fragment, h } from "../jsx-factory.js";
+import { LAYOUT } from "../theme.js";
+import type { ContributionCalendar, RenderResult } from "../types.js";
+
+export function renderContributionHeatmap(
+  calendar: ContributionCalendar,
+  y: number,
+): RenderResult {
+  if (calendar.weeks.length === 0) return { svg: "", height: 0 };
+
+  const { padX } = LAYOUT;
+  const cellSize = 11;
+  const cellGap = 2;
+  const step = cellSize + cellGap;
+
+  const rows = 7;
+  const chartHeight = rows * step;
+  const totalHeight = chartHeight + 4;
+
+  const svg = (
+    <>
+      {/* Heatmap cells */}
+      {calendar.weeks.map((week, wi) =>
+        week.contributionDays.map((day, di) => (
+          <rect
+            x={padX + wi * step}
+            y={y + di * step}
+            width={cellSize}
+            height={cellSize}
+            rx="2"
+            fill={day.color}
+            opacity="0.85"
+            className={`fade-${Math.min((wi % 6) + 1, 6)}`}
+          />
+        )),
+      )}
+    </>
+  );
+
+  return { svg, height: totalHeight };
+}
+
+void Fragment;

package/src/components/contribution-rhythm.tsx

@@ -0,0 +1,152 @@
+import { Fragment, h } from "../jsx-factory.js";
+import { escapeXml } from "../svg-utils.js";
+import { BAR_COLORS, LAYOUT, THEME } from "../theme.js";
+import type { ContributionRhythm, RenderResult } from "../types.js";
+
+const DAY_NAMES = ["Sun", "Mon", "Tue", "Wed", "Thu", "Fri", "Sat"];
+
+export function renderContributionRhythm(
+  rhythm: ContributionRhythm,
+  y: number,
+): RenderResult {
+  const { padX } = LAYOUT;
+
+  // Radar chart dimensions
+  const radarCx = padX + 120;
+  const radarCy = y + 120;
+  const radarR = 90;
+  const maxVal = Math.max(...rhythm.dayTotals, 1);
+
+  // Guide circles
+  const guides = [0.25, 0.5, 0.75, 1.0];
+  const guidesSvg = guides.map((pct) => (
+    <circle
+      cx={radarCx}
+      cy={radarCy}
+      r={radarR * pct}
+      fill="none"
+      stroke={THEME.border}
+      stroke-width="1"
+      stroke-opacity="0.4"
+    />
+  ));
+
+  // Spoke lines
+  const spokesSvg = DAY_NAMES.map((_, i) => {
+    const angle = (i * 2 * Math.PI) / 7 - Math.PI / 2;
+    const x2 = radarCx + radarR * Math.cos(angle);
+    const y2 = radarCy + radarR * Math.sin(angle);
+    return (
+      <line
+        x1={radarCx}
+        y1={radarCy}
+        x2={x2}
+        y2={y2}
+        stroke={THEME.border}
+        stroke-width="1"
+        stroke-opacity="0.3"
+      />
+    );
+  });
+
+  // Day labels
+  const labelsSvg = DAY_NAMES.map((name, i) => {
+    const angle = (i * 2 * Math.PI) / 7 - Math.PI / 2;
+    const labelR = radarR + 16;
+    const lx = radarCx + labelR * Math.cos(angle);
+    const ly = radarCy + labelR * Math.sin(angle) + 4;
+    return (
+      <text x={lx} y={ly} className="t t-value" text-anchor="middle">
+        {escapeXml(name)}
+      </text>
+    );
+  });
+
+  // Data polygon
+  const points = rhythm.dayTotals
+    .map((val, i) => {
+      const angle = (i * 2 * Math.PI) / 7 - Math.PI / 2;
+      const r = (val / maxVal) * radarR;
+      const px = radarCx + r * Math.cos(angle);
+      const py = radarCy + r * Math.sin(angle);
+      return `${px},${py}`;
+    })
+    .join(" ");
+
+  // Stats section (right side)
+  const statsX = padX + 300;
+  const statsStartY = y + 30;
+  const statColors = [
+    BAR_COLORS[0],
+    BAR_COLORS[1],
+    BAR_COLORS[2],
+    BAR_COLORS[4],
+    BAR_COLORS[5],
+  ];
+
+  const statsSvg = rhythm.stats.map((stat, i) => {
+    const sy = statsStartY + i * 42;
+    const color = statColors[i % statColors.length];
+    return (
+      <>
+        <text x={statsX} y={sy} className="t t-stat-label">
+          {escapeXml(stat.label)}
+        </text>
+        <text x={statsX} y={sy + 22} fill={color} className="t t-stat-value">
+          {escapeXml(stat.value)}
+        </text>
+      </>
+    );
+  });
+
+  const height = 250;
+
+  const svg = (
+    <>
+      {/* Guide circles */}
+      {guidesSvg.join("")}
+
+      {/* Spokes */}
+      {spokesSvg.join("")}
+
+      {/* Data polygon */}
+      <polygon
+        points={points}
+        fill={BAR_COLORS[0]}
+        fill-opacity="0.2"
+        stroke={BAR_COLORS[0]}
+        stroke-width="2"
+        stroke-opacity="0.8"
+        className="fade-2"
+        style={`transform-origin: ${radarCx}px ${radarCy}px`}
+      />
+
+      {/* Data points */}
+      {rhythm.dayTotals.map((val, i) => {
+        const angle = (i * 2 * Math.PI) / 7 - Math.PI / 2;
+        const r = (val / maxVal) * radarR;
+        const px = radarCx + r * Math.cos(angle);
+        const py = radarCy + r * Math.sin(angle);
+        return (
+          <circle
+            cx={px}
+            cy={py}
+            r="3"
+            fill={BAR_COLORS[0]}
+            className={`fade-${Math.min(i + 1, 6)}`}
+          />
+        );
+      })}
+
+      {/* Day labels */}
+      {labelsSvg.join("")}
+
+      {/* Stats */}
+      {statsSvg.join("")}
+    </>
+  );
+
+  return { svg, height };
+}
+
+void Fragment;

package/src/components/full-svg.test.tsx

@@ -35,7 +35,10 @@ describe("generateFullSvg", () => {
         filename: "b.svg",
         title: "Section B",
         subtitle: "Subtitle B",
-        items: [{ name: "Go", value: 10 }],
+        renderBody: (y) => ({
+          svg: `<text y="${y}">Go</text>`,
+          height: 30,
+        }),
       },
     ];
     const result = generateFullSvg(sections);

package/src/components/full-svg.tsx

@@ -1,7 +1,6 @@
 import { Fragment, h } from "../jsx-factory.js";
 import { LAYOUT, THEME } from "../theme.js";
 import type { SectionDef } from "../types.js";
-import { renderBarChart } from "./bar-chart.js";
 import { renderSectionHeader } from "./section.js";
 import { StyleDefs } from "./style-defs.js";
 
@@ -15,7 +14,13 @@ export function wrapSectionSvg(bodySvg: string, height: number): string {
       viewBox={`0 0 ${width} ${height}`}
     >
       <StyleDefs />
-      <rect width={width} height={height} rx="12" fill={THEME.bg} />
+      <rect
+        width={width}
+        height={height}
+        rx="12"
+        className="bg-fill"
+        fill={THEME.bg}
+      />
       {bodySvg}
     </svg>
   );
@@ -35,10 +40,6 @@ export function generateFullSvg(sections: SectionDef[]): string {
       const body = section.renderBody(y);
       bodySvg += body.svg;
       y += body.height + sectionGap;
-    } else if (section.items) {
-      const bars = renderBarChart(section.items, y, section.options || {});
-      bodySvg += bars.svg;
-      y += bars.height + sectionGap;
     }
   }
 
@@ -52,7 +53,13 @@ export function generateFullSvg(sections: SectionDef[]): string {
       viewBox={`0 0 ${width} ${totalHeight}`}
     >
       <StyleDefs />
-      <rect width={width} height={totalHeight} rx="12" fill={THEME.bg} />
+      <rect
+        width={width}
+        height={totalHeight}
+        rx="12"
+        className="bg-fill"
+        fill={THEME.bg}
+      />
       {bodySvg}
     </svg>
   );