Add a TELOS explainer popover to the dashboard - #4
Open
philmcneely wants to merge 1 commit into
Open
Conversation
There was a problem hiding this comment.
Pull request overview
Adds an in-dashboard TELOS explainer popover and extracts TELOS code parsing/labeling into a reusable helper module, with accompanying unit tests—so users can understand what TELOS means and how to interpret codes like P1, M1, etc.
Changes:
- Added an accessible-ish TELOS info popover on the dashboard header and enhanced TELOS rows to show labels.
- Extracted TELOS code parsing/label logic into
cms/.vitepress/theme/telosCodes.ts. - Added
bun:testcoverage for TELOS parsing/label utilities.
Reviewed changes
Copilot reviewed 3 out of 3 changed files in this pull request and generated 2 comments.
| File | Description |
|---|---|
tests/telosCodes.test.ts |
Adds unit tests for TELOS code labeling and parsing helpers. |
cms/.vitepress/theme/telosCodes.ts |
Introduces shared helpers for extracting TELOS ids/text and mapping codes to labels. |
cms/.vitepress/theme/components/DaemonDashboard.vue |
Adds TELOS info popover UI and switches TELOS parsing to the extracted helpers. |
Suppressed comments (1)
cms/.vitepress/theme/components/DaemonDashboard.vue:114
- Using
titlefor the TELOS section label is not reliably announced by screen readers and doesn’t work on touch devices. Consider adding anaria-label(oraria-describedby) so the id conveys both the stable code and its human label accessibly.
<span class="telos-id" :title="telosCodeLabel(item)">{{ extractTelosId(item) }}</span>
💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.
Comment on lines
+92
to
+95
| <span class="telos-info"> | ||
| <button class="telos-info-btn" type="button" aria-label="What is TELOS?">ⓘ</button> | ||
| <span class="telos-info-pop" role="tooltip"> | ||
| <span class="tip-head">TELOS <em>· purpose / end goal</em></span> |
Comment on lines
+18
to
+34
| /** The "<code><number>" id at the start of a telos entry (e.g. "P1"); '---' if absent. */ | ||
| export function extractTelosId(item: string): string { | ||
| const match = item.match(/^([A-Za-z]+\d+)/) | ||
| return match ? match[1] : '---' | ||
| } | ||
|
|
||
| /** The entry text with its leading "<code>: " prefix removed. */ | ||
| export function extractTelosText(item: string): string { | ||
| return item.replace(/^[A-Za-z]+\d+:\s*/, '') | ||
| } | ||
|
|
||
| /** Friendly section name for a telos entry's code, or '' when the code is unknown. */ | ||
| export function telosCodeLabel(item: string): string { | ||
| const m = item.match(/^([A-Za-z]+)\d+/) | ||
| if (!m) return '' | ||
| return TELOS_CODE_LABELS[m[1].toUpperCase()] || '' | ||
| } |
The TELOS panel lists coded entries (P1, M1, ...) with nothing on the page explaining what TELOS is or what the codes mean. Add an accessible info popover on the TELOS heading (hover, tap, or keyboard focus) that defines TELOS, lists the section codes, notes the numbers are stable IDs rather than a ranking, and links to the framework. - No new dependencies; no data or config changes. - Telos parsing/label logic extracted to theme/telosCodes.ts (mirroring currentState.ts) and covered by tests/telosCodes.test.ts (bun test). - Row parser recognizes the documented TELOS code set (P/M/N/G/C/I/K), ignores non-codes, and normalizes ids to uppercase -- consistent with the labels and the popover legend. - A11y: the popover is linked to its trigger via aria-describedby, and each id cell gets an aria-label combining the code and its section name.
philmcneely
force-pushed
the
telos-explainer
branch
from
August 2, 2026 01:55
da6ab7a to
c97d93d
Compare
Author
|
Thanks @copilot — good catches, addressed in the latest push:
Verified: |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
The TELOS panel lists coded entries (
P1,M1, …) but nothing on the page explains what TELOS is or what the codes mean. This adds an accessible info popover on the TELOS heading — hover, tap, or keyboard focus — that:Notes
cms/.vitepress/theme/telosCodes.ts(mirroring the existingcurrentState.tspattern) and covered bytests/telosCodes.test.ts.<button>witharia-label, opening on hover, tap, and keyboard focus (:focus-within) — so it works on touch devices, not just desktop hover.Verification
bun run build— cleanbun test— 9/9 passScreenshot