From 3f3dce5f871a2893d31b7c9eba7f5208aebda8f9 Mon Sep 17 00:00:00 2001
From: Harlan Wilton <harlan@harlanzw.com>
Date: Tue, 6 Oct 2026 02:15:54 +1100
Subject: [PATCH 1/2] feat(trending): put braille sparks and run chips on the
 board

The new brand puts the dot motifs where the registry's evidence lives.
Trending is the board readers copy from, so each row now shows its signal
and its command in the brand shapes.

- Each row with posts draws seven days of counted mentions as a braille
  spark. The loader already reads every post in the window, so the counts
  come from the same rows that rank the Skill, in rolling 24-hour days.
- Surge and filler rows keep the star line, because stars ranked them.
  The surge reason now says it was a star surge, as VISION principle 4
  asks of every trending number.
- A compact run chip appears only where the row stands for exactly one
  Skill. Filler and the all-time range pick a Skill out of a repository,
  so a multi-Skill repository gets no command. Copies still report.
- The skilld install chip sits in the header aside at every width.
- The nav and the directory table drop the flame emoji for a braille mark,
  and the flame animation goes with it.
- Ranks print in stone dots so the rose stays with the motifs.
---
 app/app.vue                                   | 13 +++--
 app/assets/css/main.css                       | 37 -------------
 app/components/SkillTable.vue                 |  4 +-
 app/components/TrendingMark.vue               | 33 ++++++++++++
 .../app/components/TrendingBoardItem.vue      | 38 +++++++++++---
 .../marketing/app/pages/skills/trending.vue   | 52 ++++++++++++++-----
 server/api/feed/trending.get.ts               | 10 ++++
 shared/mention-days.ts                        | 31 +++++++++++
 shared/server/trending-skills.ts              | 18 ++++++-
 shared/trending-range.ts                      | 41 +++++++++++++--
 test/unit/mention-days.test.ts                | 28 ++++++++++
 test/unit/trending-range.test.ts              | 21 ++++++++
 test/unit/trending-skills.test.ts             | 29 +++++++++++
 13 files changed, 283 insertions(+), 72 deletions(-)
 create mode 100644 app/components/TrendingMark.vue
 create mode 100644 shared/mention-days.ts
 create mode 100644 test/unit/mention-days.test.ts

diff --git a/app/app.vue b/app/app.vue
index 36d68bae..2581d83e 100644
--- a/app/app.vue
+++ b/app/app.vue
@@ -131,11 +131,10 @@ watch(() => route.fullPath, () => {
           <div class="flex items-center justify-end gap-1.5 lg:flex-1">
             <SkillSearchTrigger v-if="$route.path !== '/'" />
             <!--
-            The flame is a deliberate exception to the "no emoji" rule in
-            DESIGN.md, asked for so Trending outweighs its siblings.
-            It is decorative and hidden from screen readers; the label carries
-            the meaning. `gap-1.5` because the button's own layout does not
-            space sibling spans, which rendered "🔥Trending" run together.
+            The braille spark makes Trending outweigh its siblings without an
+            emoji. It is decorative and hidden from screen readers; the label
+            carries the meaning. `gap-1.5` because the button's own layout
+            does not space sibling spans.
           -->
             <UButton
               to="/skills/trending"
@@ -144,7 +143,7 @@ watch(() => route.fullPath, () => {
               size="sm"
               class="hidden gap-1.5 whitespace-nowrap lg:inline-flex"
             >
-              <span class="trending-fire" aria-hidden="true">🔥</span>
+              <TrendingMark />
               <span>Trending Skills</span>
             </UButton>
             <UButton
@@ -204,7 +203,7 @@ watch(() => route.fullPath, () => {
               block
               class="min-h-11 justify-start gap-1.5 whitespace-nowrap"
             >
-              <span class="trending-fire" aria-hidden="true">🔥</span>
+              <TrendingMark />
               <span>Trending Skills</span>
             </UButton>
             <UButton
diff --git a/app/assets/css/main.css b/app/assets/css/main.css
index 4191323e..20d4aff1 100644
--- a/app/assets/css/main.css
+++ b/app/assets/css/main.css
@@ -217,43 +217,6 @@
   );
 }
 
-/* Keep the trending signal lively without competing with surrounding chrome. */
-.trending-fire {
-  display: inline-block;
-  transform-origin: center 70%;
-  animation: trending-fire-alive 1.8s ease-in-out infinite;
-}
-
-@keyframes trending-fire-alive {
-  0%, 100% {
-    opacity: 0.72;
-    transform: translateY(1px) rotate(-2deg) scale(0.96);
-  }
-
-  24% {
-    opacity: 1;
-    transform: translateY(-1px) rotate(1deg) scale(1.06);
-  }
-
-  48% {
-    opacity: 0.82;
-    transform: translateY(0) rotate(-1deg) scale(1);
-  }
-
-  72% {
-    opacity: 0.96;
-    transform: translateY(-1px) rotate(2deg) scale(1.04);
-  }
-}
-
-@media (prefers-reduced-motion: reduce) {
-  .trending-fire {
-    animation: none;
-    opacity: 1;
-    transform: none;
-  }
-}
-
 /* Editorial atmosphere: low-chroma light at section edges, quiet at the center.
    Each band selects palette, geometry, and intensity. The gradients are static,
    paint-contained, and never use filter blur. */
diff --git a/app/components/SkillTable.vue b/app/components/SkillTable.vue
index bccb6f03..72dd41e9 100644
--- a/app/components/SkillTable.vue
+++ b/app/components/SkillTable.vue
@@ -102,12 +102,12 @@ function updatedLabel(skill: SkillRow): string {
           <span class="skill-table__skill">
             <span class="truncate font-mono text-sm">/{{ skill.name }}</span>
             <!--
-              The flame is decorative, so the meaning goes in text a screen
+              The spark is decorative, so the meaning goes in text a screen
               reader can reach. Without it the row says nothing about why this
               skill differs from the one above it.
             -->
             <span v-if="isTrending(skill)" class="shrink-0">
-              <span class="trending-fire" aria-hidden="true">🔥</span>
+              <TrendingMark />
               <span class="sr-only">Trending</span>
             </span>
           </span>
diff --git a/app/components/TrendingMark.vue b/app/components/TrendingMark.vue
new file mode 100644
index 00000000..dbc47a0c
--- /dev/null
+++ b/app/components/TrendingMark.vue
@@ -0,0 +1,33 @@
+<script setup lang="ts">
+import { SPARK_BARS } from '#shared/braille-spark'
+
+/**
+ * A rising braille spark that marks "trending" beside a label.
+ *
+ * The bars are fixed: the mark says "trending", not how much. The newest bar is
+ * rose, as on every braille spark. Decorative, so the label beside it carries
+ * the meaning for a screen reader.
+ */
+const bars = SPARK_BARS.slice(1)
+</script>
+
+<template>
+  <span class="trending-mark" aria-hidden="true">{{ bars.slice(0, -1).join('') }}<span class="trending-mark__today">{{ bars.at(-1) }}</span></span>
+</template>
+
+<style scoped>
+/* IBM Plex Mono has no braille, so the bars fall through to a face that does. */
+.trending-mark {
+  display: inline-block;
+  flex: none;
+  font-family: 'IBM Plex Mono', 'DejaVu Sans Mono', 'Apple Braille', 'Segoe UI Symbol', ui-monospace, monospace;
+  font-size: 0.875rem;
+  line-height: 1;
+  letter-spacing: 0.04em;
+  color: var(--ui-text-dimmed);
+}
+
+.trending-mark__today {
+  color: var(--brand-dot);
+}
+</style>
diff --git a/layers/marketing/app/components/TrendingBoardItem.vue b/layers/marketing/app/components/TrendingBoardItem.vue
index ea56b2d1..1677311d 100644
--- a/layers/marketing/app/components/TrendingBoardItem.vue
+++ b/layers/marketing/app/components/TrendingBoardItem.vue
@@ -24,6 +24,14 @@ const emit = defineEmits<{
 }>()
 
 const posts = computed(() => (row.reason._tag === 'posts' ? row.reason.posts : []))
+
+/**
+ * Each row draws the signal that ranked it, and only that one. Mentions ranked
+ * a row with posts, so it gets the braille spark. Stars ranked a surge or a
+ * filler row, so those keep the star line. Two charts on one line would ask the
+ * reader which one put the row here.
+ */
+const mentions = computed(() => (row.reason._tag === 'posts' ? row.reason.mentionsByDay : null))
 </script>
 
 <template>
@@ -52,7 +60,8 @@ const posts = computed(() => (row.reason._tag === 'posts' ? row.reason.posts : [
         >
         <span v-if="row.subtitle" class="truncate">{{ row.subtitle }}</span>
         <span v-if="row.stars" class="shrink-0 tabular-nums">{{ `${row.stars.toLocaleString()} ★` }}</span>
-        <TrendingStarSpark :points="row.starSeries" />
+        <BrailleSpark v-if="mentions" :counts="mentions" unit="mentions in 7 days" />
+        <TrendingStarSpark v-else :points="row.starSeries" />
         <template v-if="row.reason._tag === 'reviewed'">
           <span class="shrink-0">{{ `${row.reason.skillCount.toLocaleString()} ${row.reason.skillCount === 1 ? 'skill' : 'skills'}` }}</span>
           <span v-if="row.reason.updated" class="shrink-0">Updated {{ row.reason.updated }}</span>
@@ -63,13 +72,23 @@ const posts = computed(() => (row.reason._tag === 'posts' ? row.reason.posts : [
           say it is filler, or a popular repository passes for a trending one.
         -->
         <span v-else-if="row.reason._tag === 'surge'" class="shrink-0 text-default">
-          {{ `+${row.reason.gain.toLocaleString()} stars this week` }}<template v-if="row.reason.when">, {{ row.reason.when }}</template>
+          {{ `Star surge: +${row.reason.gain.toLocaleString()} stars in a day` }}<template v-if="row.reason.when">, {{ row.reason.when }}</template>
         </span>
         <span v-else-if="row.reason._tag === 'filler'" class="shrink-0">Popular on GitHub</span>
       </p>
       <p v-if="row.description" class="board-row__description">
         {{ row.description }}
       </p>
+      <!-- Only where the row stands for exactly one Skill; see `singleSkill`. -->
+      <RunChip
+        v-if="row.skill"
+        class="board-row__run"
+        :owner="row.skill.owner"
+        :repo="row.skill.repo"
+        :skill="row.skill.name"
+        surface="trending-row"
+        variant="compact"
+      />
     </div>
 
     <TrendingPostCarousel
@@ -103,9 +122,9 @@ const posts = computed(() => (row.reason._tag === 'posts' ? row.reason.posts : [
 }
 
 /*
- * Printed in the dot grid and inked rose, the brand numerals, at a size where
- * the dots read as a number. At 18px and half opacity the old rank read as
- * texture, on a page whose whole structure is an order.
+ * Printed in the dot grid, at a size where the dots read as a number. Stone,
+ * not rose: stone dots are the noise, and the rose belongs to the motifs
+ * beside it, one dot each.
  */
 .board-row__rank {
   grid-row: 1 / span 2;
@@ -116,8 +135,8 @@ const posts = computed(() => (row.reason._tag === 'posts' ? row.reason.posts : [
   line-height: 1;
   letter-spacing: -0.02em;
   font-variant-numeric: tabular-nums;
-  color: var(--ui-primary);
-  opacity: 0.55;
+  color: var(--ui-text);
+  opacity: 0.45;
   mask-image: radial-gradient(circle, #000 1.1px, transparent 1.4px);
   mask-size: 3px 3px;
 }
@@ -154,6 +173,11 @@ const posts = computed(() => (row.reason._tag === 'posts' ? row.reason.posts : [
   color: var(--ui-text-muted);
 }
 
+.board-row__run {
+  max-inline-size: 30rem;
+  margin-top: 0.875rem;
+}
+
 .board-row__description {
   display: -webkit-box;
   margin-top: 0.625rem;
diff --git a/layers/marketing/app/pages/skills/trending.vue b/layers/marketing/app/pages/skills/trending.vue
index 91a00511..d8bba791 100644
--- a/layers/marketing/app/pages/skills/trending.vue
+++ b/layers/marketing/app/pages/skills/trending.vue
@@ -13,6 +13,7 @@ import {
   monthStamp,
   resolveTrendingPage,
   resolveTrendingRange,
+  singleSkill,
   TRENDING_BOARD_LIMIT,
   TRENDING_RANGES,
   trendingRangeDescription,
@@ -197,8 +198,11 @@ const board = computed<TrendingBoardRow[]>(() => {
           // existed, for the five minutes one can outlive a deploy.
           starSeries: s.starSeries ?? [],
           names: [s.name, s.canonicalName],
+          // A post or a single-Skill surge put this exact Skill here, so the
+          // run command never guesses.
+          skill: { owner: s.owner, repo: s.repo, name: s.name },
           reason: s.evidence
-            ? { _tag: 'posts', posts: [s.evidence, ...(s.morePosts ?? [])].map(toPost) }
+            ? { _tag: 'posts', posts: [s.evidence, ...(s.morePosts ?? [])].map(toPost), mentionsByDay: s.mentionsByDay ?? null }
             : s.starGain !== null
               ? { _tag: 'surge', gain: s.starGain, when: s.starGainDay ? relativeDay(s.starGainDay, clock.value) : null }
               : { _tag: 'filler' },
@@ -215,6 +219,7 @@ const board = computed<TrendingBoardRow[]>(() => {
           stars: s.stars,
           starSeries: s.starSeries ?? [],
           names: [s.name, s.canonicalName],
+          skill: singleSkill(s.owner, s.repo, s.name, s.repoSkillCount ?? 0),
           reason: { _tag: 'filler' },
         })),
       ].slice(0, BOARD_LIMIT)
@@ -419,12 +424,21 @@ const boardChunks = computed<BoardChunk[]>(() => [
         `invisible` already hides it from assistive tech and the tab order, so
         it carries no `aria-hidden`, which HTML validation rejects over a link.
       -->
-      <template v-if="showWeeklyCta" #aside>
-        <div
-          class="trending-cta trending-cta--aside"
-          :class="{ invisible: auth._tag === 'pending' }"
-        >
-          <TrendingWeeklyCta layout="row" />
+      <template #aside>
+        <div class="trending-aside">
+          <div
+            v-if="showWeeklyCta"
+            class="trending-cta trending-cta--aside"
+            :class="{ invisible: auth._tag === 'pending' }"
+          >
+            <TrendingWeeklyCta layout="row" />
+          </div>
+          <div class="trending-teach">
+            <p class="font-mono text-xs text-muted">
+              Teach your agent skilld
+            </p>
+            <SkilldInstallChip surface="trending-header" />
+          </div>
         </div>
       </template>
     </CompactPageHeader>
@@ -475,6 +489,10 @@ const boardChunks = computed<BoardChunk[]>(() => [
       </div>
 
       <div v-else-if="isEmpty" class="editorial-state mt-6 flex flex-col justify-center" role="status">
+        <!-- Scattered dots that settle on one rose dot: the board is waiting for its first Skill. -->
+        <div class="relative mb-4 h-10">
+          <TextureConverge />
+        </div>
         <template v-if="range === 'all'">
           <p class="text-sm text-default">
             No repositories have qualified yet.
@@ -773,18 +791,26 @@ const boardChunks = computed<BoardChunk[]>(() => [
 }
 
 /*
- * Below 64rem the invitation sits after row five, so the header's aside is
- * empty. Its wrapper still took a grid gap, 24px of nothing above the fold.
+ * The skilld install sits under the invitation on wide screens and alone under
+ * the heading on narrow ones, where the invitation waits until row five.
  */
-@media (max-width: 63.999rem) {
-  .compact-page-header :deep(.compact-page-header__aside) {
-    display: none;
-  }
+.trending-aside {
+  display: grid;
+  gap: 1rem;
+}
+
+.trending-teach {
+  display: grid;
+  gap: 0.5rem;
+  min-inline-size: 0;
 }
 
 @media (min-width: 64rem) {
   .trending-cta--aside {
     display: block;
+  }
+
+  .trending-aside {
     inline-size: 26rem;
   }
 
diff --git a/server/api/feed/trending.get.ts b/server/api/feed/trending.get.ts
index 70b9073a..e4150d33 100644
--- a/server/api/feed/trending.get.ts
+++ b/server/api/feed/trending.get.ts
@@ -60,6 +60,8 @@ export interface FallbackFeedItem {
   description: string | null
   stars: number
   starsGained: number | null
+  /** Skills in the repository. The board prints a run command only when it is 1, because the pick is arbitrary otherwise. */
+  repoSkillCount: number
   /** Daily star totals across the window, oldest first, for the sparkline. */
   starSeries: StarPoint[]
 }
@@ -123,6 +125,12 @@ export interface TrendingSkillFeedItem {
    * first. The board scrolls through them after the quoted one.
    */
   morePosts: TrendingPostFeedItem[]
+  /**
+   * Counted mentions per rolling 24-hour day across the last seven, oldest
+   * first, for the braille spark. Null on a star-only skill, which has no
+   * mentions to draw.
+   */
+  mentionsByDay: number[] | null
   /** Daily star totals across the window, oldest first, for the sparkline. */
   starSeries: StarPoint[]
 }
@@ -174,6 +182,7 @@ function toSkillItem(entry: TrendingSkill, starSeries: StarPoint[]): TrendingSki
     starGainDay: entry.github?.observedDay ?? null,
     evidence: entry.evidence ? toPostItem(entry.evidence) : null,
     morePosts: entry.morePosts.map(toPostItem),
+    mentionsByDay: entry.mentionsByDay,
     starSeries,
   }
 }
@@ -210,6 +219,7 @@ function toFallbackItem(entry: FallbackSkill, starSeries: StarPoint[]): Fallback
     description: entry.description,
     stars: entry.stars,
     starsGained: entry.starsGained,
+    repoSkillCount: entry.repoSkillCount,
     starSeries,
   }
 }
diff --git a/shared/mention-days.ts b/shared/mention-days.ts
new file mode 100644
index 00000000..d3b0a451
--- /dev/null
+++ b/shared/mention-days.ts
@@ -0,0 +1,31 @@
+/**
+ * Mentions per day for the braille spark on a trending row.
+ *
+ * Days are rolling 24-hour windows that end at the board's clock, so the last
+ * bar is the past 24 hours. Calendar days would make the last bar a partial
+ * day, and every Skill would seem to fade each morning in UTC.
+ *
+ * Imports nothing, so the weekly email and a script can load it too.
+ */
+
+const DAY = 86_400
+
+/** Days in one spark, oldest first. Matches `SPARK_DAYS` in `braille-spark.ts`. */
+export const MENTION_DAYS = 7
+
+/**
+ * Count timestamps into seven rolling days, oldest first, the last 24 hours last.
+ *
+ * A timestamp after `now` counts as the last day: a post cannot come from the
+ * future, so it is clock skew between the ingest and the board. A timestamp
+ * older than seven days counts nowhere.
+ */
+export function mentionsByDay(postedAt: readonly number[], now: number): number[] {
+  const days = Array.from<number>({ length: MENTION_DAYS }).fill(0)
+  for (const at of postedAt) {
+    const ago = Math.max(0, Math.floor((now - at) / DAY))
+    if (ago < MENTION_DAYS)
+      days[MENTION_DAYS - 1 - ago]! += 1
+  }
+  return days
+}
diff --git a/shared/server/trending-skills.ts b/shared/server/trending-skills.ts
index 9126aaee..f3c3199e 100644
--- a/shared/server/trending-skills.ts
+++ b/shared/server/trending-skills.ts
@@ -21,6 +21,7 @@
  */
 
 import type { SkillTrendInput, SkillTrendScore } from '#shared/trending-skill-score'
+import { mentionsByDay } from '#shared/mention-days'
 import { canonicalRepoSkillPath } from '#shared/skill-routes'
 import { rankSkillTrends } from '#shared/trending-skill-score'
 
@@ -31,6 +32,12 @@ export interface TrendingSkill extends SkillTrendScore {
    * Dedicated posts first, then by likes, at most {@link MAX_MORE_POSTS}.
    */
   morePosts: TrendingSkillEvidence[]
+  /**
+   * Counted mentions per rolling day across the last seven, oldest first, for
+   * the braille spark. Null when no post put the skill here: a star surge has
+   * no mentions to draw.
+   */
+  mentionsByDay: number[] | null
   /** Current stars on the skill's repository. Display only, never ranked. */
   stars: number | null
   /** The skill's own description, from its SKILL.md frontmatter. */
@@ -206,6 +213,7 @@ interface SocialEntry {
   input: SkillTrendInput
   evidence: TrendingSkillEvidence
   morePosts: TrendingSkillEvidence[]
+  mentionsByDay: number[]
 }
 
 async function loadSocialEvidence(
@@ -250,6 +258,8 @@ async function loadSocialEvidence(
     evidenceBreadth: number
     authors: Map<string, number>
     countedPosts: Set<string>
+    /** When each counted post went out, for the per-day spark. */
+    countedAt: number[]
     /** Each author's narrowest post about the skill, for the posts beyond the quote. */
     postsByAuthor: Map<string, { post: TrendingSkillEvidence, breadth: number }>
   }>()
@@ -276,6 +286,7 @@ async function loadSocialEvidence(
         evidenceBreadth: breadthOf(row.post_id),
         authors: new Map(),
         countedPosts: new Set(),
+        countedAt: [],
         postsByAuthor: new Map(),
       }
       grouped.set(key, entry)
@@ -300,6 +311,7 @@ async function loadSocialEvidence(
     if (entry.countedPosts.has(row.post_id))
       continue
     entry.countedPosts.add(row.post_id)
+    entry.countedAt.push(row.posted_at)
 
     const social = entry.input.social!
     social.mentionCount += 1
@@ -324,7 +336,7 @@ async function loadSocialEvidence(
       .sort((a, b) => a.breadth - b.breadth)
       .slice(0, MAX_MORE_POSTS)
       .map(held => held.post)
-    out.set(key, { input: entry.input, evidence: entry.evidence, morePosts })
+    out.set(key, { input: entry.input, evidence: entry.evidence, morePosts, mentionsByDay: mentionsByDay(entry.countedAt, options.now) })
   }
   return out
 }
@@ -411,6 +423,7 @@ export async function loadTrendingSkills(
     input: SkillTrendInput
     evidence: TrendingSkillEvidence | null
     morePosts: TrendingSkillEvidence[]
+    mentionsByDay: number[] | null
   }>()
 
   for (const [key, entry] of social)
@@ -421,7 +434,7 @@ export async function loadTrendingSkills(
     if (held)
       held.input.github = input.github
     else
-      merged.set(key, { input, evidence: null, morePosts: [] })
+      merged.set(key, { input, evidence: null, morePosts: [], mentionsByDay: null })
   }
 
   const deprioritized = options.deprioritizeRepositories ?? new Set<string>()
@@ -441,6 +454,7 @@ export async function loadTrendingSkills(
       ...scored,
       evidence: merged.get(skillKey(scored))?.evidence ?? null,
       morePosts: merged.get(skillKey(scored))?.morePosts ?? [],
+      mentionsByDay: merged.get(skillKey(scored))?.mentionsByDay ?? null,
       stars: stars.get(`${scored.owner}/${scored.repo}`) ?? null,
       description: descriptions.get(skillKey(scored)) ?? null,
       repoSkillCount,
diff --git a/shared/trending-range.ts b/shared/trending-range.ts
index cb69d6e6..faef26bc 100644
--- a/shared/trending-range.ts
+++ b/shared/trending-range.ts
@@ -290,10 +290,18 @@ export interface TrendingPost {
  * the star count carries it.
  */
 export type TrendingReason
-  = | { _tag: 'posts', posts: readonly TrendingPost[] }
-    | { _tag: 'surge', gain: number, when: string | null }
-    | { _tag: 'filler' }
-    | { _tag: 'reviewed', skillCount: number, updated: string | null }
+  = | {
+    _tag: 'posts'
+    posts: readonly TrendingPost[]
+    /**
+     * Counted mentions per rolling day across the last seven, oldest first,
+     * for the braille spark. Null when the feed did not carry them.
+     */
+    mentionsByDay: readonly number[] | null
+  }
+  | { _tag: 'surge', gain: number, when: string | null }
+  | { _tag: 'filler' }
+  | { _tag: 'reviewed', skillCount: number, updated: string | null }
 
 /**
  * A board row, in the one shape the template renders.
@@ -318,9 +326,33 @@ export interface TrendingBoardRow {
   starSeries: readonly StarPoint[]
   /** Names the Skill answers to, so a post can mark where it names it. */
   names: readonly string[]
+  /**
+   * The one Skill the row stands for, which the run command targets. Null when
+   * the row picked a Skill out of a repository that holds several.
+   */
+  skill: BoardSkill | null
   reason: TrendingReason
 }
 
+/** One Skill, as the run command addresses it. */
+export interface BoardSkill {
+  owner: string
+  repo: string
+  /** The Skill directory name, the last segment of `owner/repo/name`. */
+  name: string
+}
+
+/**
+ * The Skill a row may print a run command for.
+ *
+ * Only a repository that holds exactly one Skill counts. Filler and the
+ * `all` range pick one Skill out of a repository by a fixed rule, and a run
+ * command would present that pick as the thing the stars belong to.
+ */
+export function singleSkill(owner: string, repo: string, name: string, repoSkillCount: number): BoardSkill | null {
+  return repoSkillCount === 1 ? { owner, repo, name } : null
+}
+
 /**
  * Rows that earned the page its place in the index.
  *
@@ -412,6 +444,7 @@ export function leaderboardBoardRows(
       stars: item.stars,
       starSeries: [],
       names: [item.topSkill.name],
+      skill: singleSkill(item.owner, item.repo, item.topSkill.name, item.skillCount),
       reason: { _tag: 'reviewed', skillCount: item.skillCount, updated: day },
     }
   })
diff --git a/test/unit/mention-days.test.ts b/test/unit/mention-days.test.ts
new file mode 100644
index 00000000..444fb63c
--- /dev/null
+++ b/test/unit/mention-days.test.ts
@@ -0,0 +1,28 @@
+import { describe, expect, it } from 'vitest'
+import { mentionsByDay } from '../../shared/mention-days'
+
+const NOW = 1_760_000_000
+const HOUR = 3600
+const DAY = 24 * HOUR
+
+describe('mentions by day', () => {
+  it('counts the past 24 hours as the last day', () => {
+    expect(mentionsByDay([NOW - HOUR, NOW - 23 * HOUR], NOW)).toEqual([0, 0, 0, 0, 0, 0, 2])
+  })
+
+  it('puts a post from 25 hours ago on the day before', () => {
+    expect(mentionsByDay([NOW - 25 * HOUR], NOW)).toEqual([0, 0, 0, 0, 0, 1, 0])
+  })
+
+  it('puts the oldest day first', () => {
+    expect(mentionsByDay([NOW - 6 * DAY - HOUR], NOW)).toEqual([1, 0, 0, 0, 0, 0, 0])
+  })
+
+  it('drops a post older than seven days', () => {
+    expect(mentionsByDay([NOW - 7 * DAY, NOW - 20 * DAY], NOW)).toEqual([0, 0, 0, 0, 0, 0, 0])
+  })
+
+  it('counts a post stamped after the clock as the last day', () => {
+    expect(mentionsByDay([NOW + HOUR], NOW)).toEqual([0, 0, 0, 0, 0, 0, 1])
+  })
+})
diff --git a/test/unit/trending-range.test.ts b/test/unit/trending-range.test.ts
index 31453ca4..cb52ed88 100644
--- a/test/unit/trending-range.test.ts
+++ b/test/unit/trending-range.test.ts
@@ -5,6 +5,7 @@ import {
   leaderboardBoardRows,
   resolveTrendingPage,
   resolveTrendingRange,
+  singleSkill,
   SKILLS_NOUN,
   TRENDING_RANGES,
   trendingRangeDescription,
@@ -185,6 +186,26 @@ describe('leaderboard rows on the trending board', () => {
   it('carries no posts, since a star ranking has none to show', () => {
     expect(leaderboardBoardRows([leaderboardRow()])[0]!.reason._tag).toBe('reviewed')
   })
+
+  it('gives a run command target to a repository with one skill', () => {
+    expect(leaderboardBoardRows([leaderboardRow({ skillCount: 1 })])[0]!.skill)
+      .toEqual({ owner: 'anthropics', repo: 'skills', name: 'pdf-processing' })
+  })
+
+  it('gives no run command target when the skill was picked from several', () => {
+    expect(leaderboardBoardRows([leaderboardRow({ skillCount: 9 })])[0]!.skill).toBeNull()
+  })
+})
+
+describe('the skill a row may print a run command for', () => {
+  it('is the skill when its repository holds only that one', () => {
+    expect(singleSkill('pbakaus', 'impeccable', 'impeccable', 1))
+      .toEqual({ owner: 'pbakaus', repo: 'impeccable', name: 'impeccable' })
+  })
+
+  it.each([0, 2, 40])('is none when the repository holds %i skills', (count) => {
+    expect(singleSkill('mattpocock', 'skills', 'tdd', count)).toBeNull()
+  })
 })
 
 /**
diff --git a/test/unit/trending-skills.test.ts b/test/unit/trending-skills.test.ts
index d61bda64..77c1b804 100644
--- a/test/unit/trending-skills.test.ts
+++ b/test/unit/trending-skills.test.ts
@@ -87,6 +87,35 @@ function nameAlso(postId: string, skill: { owner: string, repo: string, slug: st
   ).run(postId, skill.owner, skill.repo, skill.slug, skill.slug, NOW)
 }
 
+describe('mentions per day on a trending skill', () => {
+  it('counts each counted post on the rolling day it went out', async () => {
+    mention({ owner: 'a', repo: 'r', slug: 'tdd', handle: 'p1', postedAt: NOW - HOUR })
+    mention({ owner: 'a', repo: 'r', slug: 'tdd', handle: 'p2', postedAt: NOW - 2 * HOUR })
+    mention({ owner: 'a', repo: 'r', slug: 'tdd', handle: 'p3', postedAt: NOW - 50 * HOUR })
+    // Below the likes floor, so it is not a counted mention and draws no bar.
+    mention({ owner: 'a', repo: 'r', slug: 'tdd', handle: 'p4', postedAt: NOW - 3 * HOUR, likes: 0 })
+
+    const [skill] = await loadTrendingSkills({ db: db().db, now: NOW })
+    expect(skill?.mentionsByDay).toEqual([0, 0, 0, 0, 1, 0, 2])
+  })
+
+  it('draws no mentions for a skill only a star surge put on the board', async () => {
+    db().raw.prepare(`INSERT INTO repos (owner, repo, stars) VALUES ('solo', 'one', 500)`).run()
+    db().raw.prepare(
+      `INSERT INTO skills (owner, repo, name, slug, display_name, source_resolved, rendered_skill_path)
+       VALUES ('solo', 'one', 'one', 'one', 'one', 1, 'SKILL.md')`,
+    ).run()
+    db().raw.prepare(
+      `INSERT INTO repo_star_surges (owner, repo, observed_day, latest_gain, baseline_gain, stars, detected_at)
+       VALUES ('solo', 'one', ${Math.floor((NOW - 86400) / 86400) * 86400}, 400, 5, 500, ${NOW - HOUR})`,
+    ).run()
+
+    const [skill] = await loadTrendingSkills({ db: db().db, now: NOW })
+    expect(skill?.slug).toBe('one')
+    expect(skill?.mentionsByDay).toBeNull()
+  })
+})
+
 describe('loadTrendingSkills ranking', () => {
   it('does not publish verified mentions before the Skill is indexed', async () => {
     mention({ owner: 'pending', repo: 'repo', slug: 'not-indexed', handle: 'p1', likes: 50 })

From 71dcd5b2b17f225f7d775814475a20f21fb09645 Mon Sep 17 00:00:00 2001
From: Harlan Wilton <harlan@harlanzw.com>
Date: Tue, 6 Oct 2026 02:22:46 +1100
Subject: [PATCH 2/2] fix(trending): keep the header rose on the logo dot

DESIGN.md keeps motifs out of navigation and gives each surface one rose
element. The header's rose is the logo dot, so the nav mark draws in
stone. A month board also ranks posts older than the spark's seven days,
and seven blank cells beside a zero read as a broken row, so those rows
show no spark and their posts carry the dates.
---
 app/app.vue                                         | 13 +++++++------
 app/components/TrendingMark.vue                     | 12 +++++++++---
 .../marketing/app/components/TrendingBoardItem.vue  | 12 ++++++++++--
 test/a11y.spec.ts                                   | 12 ++++++++++++
 4 files changed, 38 insertions(+), 11 deletions(-)

diff --git a/app/app.vue b/app/app.vue
index 2581d83e..9cfe523f 100644
--- a/app/app.vue
+++ b/app/app.vue
@@ -131,10 +131,11 @@ watch(() => route.fullPath, () => {
           <div class="flex items-center justify-end gap-1.5 lg:flex-1">
             <SkillSearchTrigger v-if="$route.path !== '/'" />
             <!--
-            The braille spark makes Trending outweigh its siblings without an
-            emoji. It is decorative and hidden from screen readers; the label
-            carries the meaning. `gap-1.5` because the button's own layout
-            does not space sibling spans.
+            The braille mark makes Trending outweigh its siblings without an
+            emoji. Stone only: the logo dot is the header's one rose element.
+            It is decorative and hidden from screen readers; the label carries
+            the meaning. `gap-1.5` because the button's own layout does not
+            space sibling spans.
           -->
             <UButton
               to="/skills/trending"
@@ -143,7 +144,7 @@ watch(() => route.fullPath, () => {
               size="sm"
               class="hidden gap-1.5 whitespace-nowrap lg:inline-flex"
             >
-              <TrendingMark />
+              <TrendingMark :accent="false" />
               <span>Trending Skills</span>
             </UButton>
             <UButton
@@ -203,7 +204,7 @@ watch(() => route.fullPath, () => {
               block
               class="min-h-11 justify-start gap-1.5 whitespace-nowrap"
             >
-              <TrendingMark />
+              <TrendingMark :accent="false" />
               <span>Trending Skills</span>
             </UButton>
             <UButton
diff --git a/app/components/TrendingMark.vue b/app/components/TrendingMark.vue
index dbc47a0c..b50404c9 100644
--- a/app/components/TrendingMark.vue
+++ b/app/components/TrendingMark.vue
@@ -5,14 +5,20 @@ import { SPARK_BARS } from '#shared/braille-spark'
  * A rising braille spark that marks "trending" beside a label.
  *
  * The bars are fixed: the mark says "trending", not how much. The newest bar is
- * rose, as on every braille spark. Decorative, so the label beside it carries
- * the meaning for a screen reader.
+ * rose, as on every braille spark, unless the surface already spends its rose
+ * elsewhere: the header's rose is the logo dot. Decorative, so the label
+ * beside it carries the meaning for a screen reader.
  */
+const { accent = true } = defineProps<{
+  /** Ink the newest bar rose. Off in the header, where the logo dot holds the rose. */
+  accent?: boolean
+}>()
+
 const bars = SPARK_BARS.slice(1)
 </script>
 
 <template>
-  <span class="trending-mark" aria-hidden="true">{{ bars.slice(0, -1).join('') }}<span class="trending-mark__today">{{ bars.at(-1) }}</span></span>
+  <span class="trending-mark" aria-hidden="true">{{ bars.slice(0, -1).join('') }}<span :class="accent && 'trending-mark__today'">{{ bars.at(-1) }}</span></span>
 </template>
 
 <style scoped>
diff --git a/layers/marketing/app/components/TrendingBoardItem.vue b/layers/marketing/app/components/TrendingBoardItem.vue
index 1677311d..b15e7918 100644
--- a/layers/marketing/app/components/TrendingBoardItem.vue
+++ b/layers/marketing/app/components/TrendingBoardItem.vue
@@ -30,8 +30,16 @@ const posts = computed(() => (row.reason._tag === 'posts' ? row.reason.posts : [
  * a row with posts, so it gets the braille spark. Stars ranked a surge or a
  * filler row, so those keep the star line. Two charts on one line would ask the
  * reader which one put the row here.
+ *
+ * A month board ranks posts older than the spark's seven days. A week of
+ * blank cells draws nothing beside a bare zero, so that row shows no spark and
+ * its posts carry their own dates.
  */
-const mentions = computed(() => (row.reason._tag === 'posts' ? row.reason.mentionsByDay : null))
+const isSocial = computed(() => row.reason._tag === 'posts')
+const mentions = computed(() => {
+  const days = row.reason._tag === 'posts' ? row.reason.mentionsByDay : null
+  return days?.some(count => count > 0) ? days : null
+})
 </script>
 
 <template>
@@ -61,7 +69,7 @@ const mentions = computed(() => (row.reason._tag === 'posts' ? row.reason.mentio
         <span v-if="row.subtitle" class="truncate">{{ row.subtitle }}</span>
         <span v-if="row.stars" class="shrink-0 tabular-nums">{{ `${row.stars.toLocaleString()} ★` }}</span>
         <BrailleSpark v-if="mentions" :counts="mentions" unit="mentions in 7 days" />
-        <TrendingStarSpark v-else :points="row.starSeries" />
+        <TrendingStarSpark v-else-if="!isSocial" :points="row.starSeries" />
         <template v-if="row.reason._tag === 'reviewed'">
           <span class="shrink-0">{{ `${row.reason.skillCount.toLocaleString()} ${row.reason.skillCount === 1 ? 'skill' : 'skills'}` }}</span>
           <span v-if="row.reason.updated" class="shrink-0">Updated {{ row.reason.updated }}</span>
diff --git a/test/a11y.spec.ts b/test/a11y.spec.ts
index c4994b81..da9da674 100644
--- a/test/a11y.spec.ts
+++ b/test/a11y.spec.ts
@@ -465,6 +465,18 @@ describe('accessibility: components', () => {
     wrapper.unmount()
   })
 
+  it('trendingMark has no violations and stays out of the accessibility tree', async () => {
+    const container = createIsolatedContainer()
+    const wrapper = await mountSuspended(
+      await loadComponent('TrendingMark'),
+      { attachTo: container },
+    )
+    const results = await runAxe(container)
+    expect(results.violations, formatViolations(results)).toHaveLength(0)
+    expect(container.querySelector('.trending-mark')?.getAttribute('aria-hidden')).toBe('true')
+    wrapper.unmount()
+  })
+
   it('commandChip has no violations and keeps the command copyable as one string', async () => {
     const container = createIsolatedContainer()
     const command = 'npx skilld run mattpocock/skills/tdd'