@rudderhq/agent-runtime-opencode-local 0.4.6-canary.9 → 0.5.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
@@ -0,0 +1,138 @@
1
+ # Rudder Documentation And Source Map
2
+
3
+ Use this map to choose a narrow evidence route. It describes stable domains and
4
+ directories rather than an exhaustive page list. Follow the current checkout's
5
+ `AGENTS.md` before repository inspection.
6
+
7
+ ## Section Map
8
+
9
+ - [Official public documentation](#official-public-documentation)
10
+ - [Product Logic Registry](#product-logic-registry)
11
+ - [Contributor and engineering documentation](#contributor-and-engineering-documentation)
12
+ - [Implementation and tests](#implementation-and-tests)
13
+ - [Official remote source and version history](#official-remote-source-and-version-history)
14
+ - [Bundled offline references](#bundled-offline-references)
15
+ - [Targeted search patterns](#targeted-search-patterns)
16
+
17
+ ## Official Public Documentation
18
+
19
+ - Index: `https://docs.rudderhq.dev/llms.txt`
20
+ - Site: `https://docs.rudderhq.dev/`
21
+ - Local public-docs checkout: `docs/`
22
+
23
+ Start with the index, choose the page matching the user's job, and open one or
24
+ two pages. Prefer the user's language when equivalent official pages exist.
25
+ Public docs own published user guidance; a local `docs/` checkout is useful
26
+ when the live site is unavailable or the task is editing the public site.
27
+
28
+ ## Product Logic Registry
29
+
30
+ - Entry point: `doc/product/README.md`
31
+ - Registry map: `doc/product/registry.yml`
32
+ - Domain contracts: `doc/product/domains/`
33
+ - Composed workflows: `doc/product/workflows/`
34
+ - Surface-to-contract maps: `doc/product/surfaces/`
35
+
36
+ Use Product Logic for intended product semantics and invariants. Start at the
37
+ registry entry point and select the owning domain rather than scanning all
38
+ contracts. Reading these guarded files does not authorize editing them.
39
+
40
+ Common domain routes include:
41
+
42
+ - agents, skills, and inbox: `doc/product/domains/agents/`
43
+ - issues and issue-visible state: `doc/product/domains/issues/`
44
+ - assignment, checkout, review routing: `doc/product/domains/work-routing/`
45
+ - runs, execution, transcripts, workspaces: `doc/product/domains/execution/`
46
+ - organizations, goals, and projects:
47
+ `doc/product/domains/organizations-and-goals/`
48
+ - Library, resources, and runtime context:
49
+ `doc/product/domains/library-and-context/`
50
+ - Chat, Messenger, comments, and integrations:
51
+ `doc/product/domains/collaboration/`
52
+ - approvals, budgets, costs, and activity:
53
+ `doc/product/domains/control-plane/`
54
+ - reviews, feedback, and learning:
55
+ `doc/product/domains/review-feedback-learning/`
56
+ - automations: `doc/product/domains/automations/`
57
+ - plugins: `doc/product/domains/plugins/`
58
+
59
+ ## Contributor And Engineering Documentation
60
+
61
+ - Route selector: `doc/README.md`
62
+ - Development: `doc/engineering/DEVELOPING.md`
63
+ - CLI: `doc/engineering/CLI.md`
64
+ - Database: `doc/engineering/DATABASE.md`
65
+ - Deployment modes: `doc/engineering/DEPLOYMENT-MODES.md`
66
+ - Desktop and packaging: `doc/engineering/DESKTOP.md`
67
+ - Design: `doc/engineering/DESIGN.md`
68
+ - Releases and publishing: `doc/engineering/RELEASING.md` and
69
+ `doc/engineering/PUBLISHING.md`
70
+ - Plugin contracts: `doc/engineering/PLUGIN_AUTHORING_GUIDE.md` and
71
+ `doc/engineering/PLUGIN_RUNTIME_CONTRACT.md`
72
+ - Dated decisions and proposals: `doc/plans/`
73
+ - Historical archaeology only: `doc/archive/`
74
+
75
+ Contributor docs own build, operation, packaging, and architecture guidance.
76
+ Plans explain decisions in time; archived documents are not current behavior
77
+ contracts.
78
+
79
+ ## Implementation And Tests
80
+
81
+ Use source and tests for exact implementation evidence:
82
+
83
+ | Area | Owning source | Tests |
84
+ | --- | --- | --- |
85
+ | REST routes and orchestration services | `server/src/routes/`, `server/src/services/` | `server/src/__tests__/` |
86
+ | Shared API types, validators, and constants | `packages/shared/src/` | colocated `*.test.ts` plus server/UI consumers |
87
+ | Database schema and migrations | `packages/db/src/schema/`, `packages/db/src/migrations/` | package tests and server integration tests |
88
+ | CLI commands and capability registry | `cli/src/` | `cli/src/__tests__/` |
89
+ | Runtime adapters and prompt construction | `packages/agent-runtimes/`, `packages/agent-runtime-utils/` | package adapter tests plus server integration tests |
90
+ | Board UI and clients | `ui/src/` | colocated UI tests and `tests/e2e/` |
91
+ | Desktop shell and packaging | `desktop/`, `scripts/prod-desktop.mjs` | Desktop smoke scripts and packaged verification |
92
+ | Bundled skills | `server/resources/bundled-skills/` | bundled-skill, runtime adapter, public route, and E2E tests |
93
+
94
+ The owning module establishes what code does; tests establish protected and
95
+ edge-case behavior. Cite both when the claim depends on a guarded branch,
96
+ permission boundary, failure status, persistence rule, or adapter-specific
97
+ path.
98
+
99
+ ## Official Remote Source And Version History
100
+
101
+ - Repository: `https://github.com/Undertone0809/rudder`
102
+ - Releases: `https://github.com/Undertone0809/rudder/releases`
103
+ - Tags: `https://github.com/Undertone0809/rudder/tags`
104
+
105
+ This is the only default remote source repository. For installed behavior,
106
+ first identify the installed Rudder version and use a matching official tag or
107
+ release when one exists. The default branch represents latest development and
108
+ must not be presented as the behavior of an older installed build. Link the
109
+ exact file, test, commit, tag, or release used.
110
+
111
+ ## Bundled Offline References
112
+
113
+ Within this package:
114
+
115
+ - `cli-reference.md` preserves the typed capability and CLI fallback catalog;
116
+ - `api-reference.md` preserves internal/debug compatibility endpoints;
117
+ - `control-plane-practices.md` preserves conditional operating semantics; and
118
+ - `organization-skills.md` preserves organization skill workflows.
119
+
120
+ Use only the relevant section. These references are version-adjacent fallback
121
+ evidence, not a substitute for live installed help when the two disagree.
122
+
123
+ ## Targeted Search Patterns
124
+
125
+ Prefer `rg -n` in the smallest owning directory. Useful query shapes include:
126
+
127
+ - contract or registry ID: `rg -n "CONTRACT.ID|domain term" doc/product`
128
+ - route or status: `rg -n "route-fragment|409|422" server/src packages/shared/src`
129
+ - CLI command or capability: `rg -n "capability.id|command-name" cli/src server/src`
130
+ - environment or configuration key: `rg -n "RUDDER_[A-Z_]+|configKey" server packages cli desktop`
131
+ - schema field or table: `rg -n "fieldName|table_name" packages/db/src server/src`
132
+ - UI label or test id: `rg -n "visible copy|data-testid" ui/src tests/e2e`
133
+ - a bundled-skill fact: `rg -n "phrase|command" server/resources/bundled-skills`
134
+ - related regression coverage: `rg -n "identifier|error text|behavior phrase" --glob '*test*' --glob '*.spec.ts'`
135
+
136
+ Search exact identifiers first, then widen to a stable concept. Avoid broad
137
+ repository scans when an owning domain, route, command, or component is already
138
+ known.
@@ -0,0 +1,132 @@
1
+ ---
2
+ name: visualize
3
+ description: "Create safe inline visual explanations in Rudder Chat. Use when asked for a chart, plot, diagram, timeline, comparison, static map, simulator, scenario view, or compact visual that materially improves understanding. Prefer Mermaid for static node-and-edge structures; use Rudder's HTML/SVG/CSS artifact path only when thread-scoped output is available. Rudder visuals are declarative and scriptless: convert simulator requests to static scenarios or disclosure-based comparisons and never rely on JavaScript, network access, or external assets."
4
+ compatibility: "Rudder Chat inline visual capture. HTML artifacts require a thread-scoped visualization directory exposed by the current runtime."
5
+ ---
6
+
7
+ # Visualize
8
+
9
+ Create a visual only when it materially improves what the user can understand,
10
+ compare, or decide. The Rudder inline runtime is scriptless and has no network
11
+ access, so design for a useful first render with declarative HTML, SVG, and CSS.
12
+
13
+ ## Choose The Output
14
+
15
+ 1. Use a normal fenced Mermaid block when labeled nodes and edges fully explain
16
+ a static structure or flow. Do not create an HTML artifact for that case.
17
+ 2. Use an inline visual for charts, timelines, comparisons, spatial layouts,
18
+ static scenario views, or compact reports that benefit from custom geometry.
19
+ 3. Create an HTML artifact only when the current run exposes a writable,
20
+ thread-scoped visualization directory ending in
21
+ `visualizations/YYYY/MM/DD/<thread-id>`. Use the exact directory from the
22
+ runtime's writable roots. Never infer, scan for, or create another thread's
23
+ directory.
24
+ 4. If that directory is unavailable, fall back to Mermaid, Markdown tables, or
25
+ concise prose. Do not emit a directive that Rudder cannot resolve.
26
+
27
+ ## File And Directive
28
+
29
+ - Choose a concise ASCII lowercase-hyphenated title and write
30
+ `<title>.html` inside the current thread-scoped visualization directory.
31
+ - Write only an HTML fragment. Do not include a doctype or `html`, `head`, or
32
+ `body` elements.
33
+ - Keep every fragment under 2 MiB and emit at most three visuals in one
34
+ assistant message.
35
+ - Give the fragment one top-level markup root, `<div id="widget">`. Bounded
36
+ `<style>` blocks may precede that root.
37
+ - Put any custom CSS in bounded `<style>` elements. Inline `style` attributes
38
+ are removed.
39
+ - Read the file back before replying. Fix escaped markup such as literal `\"`
40
+ or `\n`, missing labels, clipped content, and malformed SVG.
41
+ - Add this exact directive on its own line where the visual should render:
42
+
43
+ ```text
44
+ ::codex-inline-vis{file="<title>.html"}
45
+ ```
46
+
47
+ Use only the `file` attribute. The value must be a basename ending in `.html`;
48
+ paths, separators, traversal, extra attributes, and alternate quoting are
49
+ rejected. Keep any necessary explanation outside the fragment and do not add a
50
+ second Markdown link to the file.
51
+
52
+ ## Rudder Safety Boundary
53
+
54
+ Rudder sanitizes the fragment before rendering, but generate valid input rather
55
+ than relying on sanitization:
56
+
57
+ - Do not write scripts, event handlers, JavaScript URLs, forms, links, images,
58
+ media, nested frames, embedded objects, canvas, or external resources.
59
+ - Do not use `fetch`, XHR, WebSocket, module imports, CDN libraries, web fonts,
60
+ or URL-bearing CSS. The artifact has no network access.
61
+ - Do not use active controls such as buttons, inputs, selects, or textareas.
62
+ They are removed because the scriptless runtime cannot preserve their state
63
+ or behavior safely.
64
+ - Do not implement a parent bridge, follow-up prompt action, filesystem access,
65
+ or access to Rudder state, credentials, cookies, storage, or APIs.
66
+ - Use `<details>` and `<summary>` for the only stateful native disclosure.
67
+ Use `data-tooltip` on `<summary>` for short supplementary hover/focus text.
68
+ A tooltip on any other preserved element is hover-only and must not contain
69
+ essential information.
70
+ - Keep all data needed for the visual inside the fragment. Use inline SVG for
71
+ charts and supplied geometry; never fetch a basemap or invent geography.
72
+
73
+ Read [references/runtime-contract.md](references/runtime-contract.md) before
74
+ writing custom markup or CSS. Use
75
+ [assets/example-chart.html](assets/example-chart.html) as a structure example,
76
+ not as data or copy to repeat.
77
+
78
+ ## Composition
79
+
80
+ - Start with the visual itself. Do not add decorative KPI rows, repeated
81
+ legends, permanent toolbars, or explanatory paragraphs inside the fragment.
82
+ - Use one dominant chart, diagram, or comparison. Add up to three compact
83
+ summary cards only when their values are central to reading the visual.
84
+ - For a requested simulator or adjustable explorer, show representative static
85
+ scenarios or a disclosure-based comparison and state the limitation in the
86
+ surrounding response. Do not pretend controls survived when they cannot.
87
+ - For maps, use only user-supplied or locally available geometry that can be
88
+ embedded as safe SVG. Otherwise choose a table, ranked plot, or schematic.
89
+ - Keep the outer surface transparent and unframed. Use `.card` only for a real
90
+ bounded summary or detail; never nest cards.
91
+
92
+ ## Layout And Accessibility
93
+
94
+ - Design for the full Chat width around 736px and reflow cleanly down to 320px.
95
+ - Avoid fixed outer widths, viewport-height layouts, horizontal scrolling,
96
+ fixed positioning, and clipped labels.
97
+ - Use semantic headings sparingly. Do not restate the user prompt or render a
98
+ title inside the fragment when the surrounding Markdown already names it.
99
+ - Give each meaningful SVG `role="img"` plus an accessible name or description.
100
+ Include `<title>` and `<desc>` when they improve screen-reader output.
101
+ - Label important values directly. Add a legend only when multiple series
102
+ cannot be labeled on the marks.
103
+ - Pair color with text, shape, or line style so meaning never depends on color
104
+ alone.
105
+
106
+ ## Theme And Utilities
107
+
108
+ - Use Rudder theme variables for every color. Start with `--foreground`,
109
+ `--muted-foreground`, `--border`, and `--viz-series-1`; use
110
+ `--viz-series-2` through `--viz-series-6` only for stable categories.
111
+ - Use host utilities such as `.viz-grid`, `.viz-row`, `.viz-stat`,
112
+ `.viz-stat-value`, `.viz-badge`, `.card`, `.text-small`, `.text-muted`,
113
+ `.text-destructive`, and `.sr-only` before adding custom CSS.
114
+ - Keep custom selectors scoped below `#widget`. Use only theme variables already
115
+ provided by Rudder; custom CSS variables are removed.
116
+ - Use normal text by default and weights 400 or 500. Reserve compact secondary
117
+ text for annotations, never essential labels.
118
+
119
+ ## Verification
120
+
121
+ Before replying:
122
+
123
+ 1. Confirm the file is in the exact current-thread visualization directory,
124
+ uses an allowed basename, is below 2 MiB, and the message has no more than
125
+ three directives.
126
+ 2. Confirm the fragment contains no scripts, handlers, URLs, external assets,
127
+ active controls, document-level elements, or unsupported embeds.
128
+ 3. Confirm SVG view boxes, labels, referenced IDs, table semantics, and CSS
129
+ selectors are valid.
130
+ 4. Check both narrow and wide layout when a preview path is available. If not,
131
+ keep the geometry responsive and the composition conservative.
132
+ 5. Emit the directive only after the file is complete and readable.
@@ -0,0 +1,7 @@
1
+ interface:
2
+ display_name: "Visualize"
3
+ short_description: "Create safe inline visuals in Rudder Chat"
4
+ default_prompt: "Use $visualize to create a clear Rudder-native chart, diagram, comparison, or other inline visual when it improves understanding."
5
+
6
+ policy:
7
+ allow_implicit_invocation: true
@@ -0,0 +1,89 @@
1
+ <style>
2
+ #widget .example-chart {
3
+ display: grid;
4
+ gap: 12px;
5
+ }
6
+
7
+ #widget .example-chart-bars {
8
+ display: grid;
9
+ grid-template-columns: repeat(4, minmax(0, 1fr));
10
+ align-items: end;
11
+ gap: 10px;
12
+ min-height: 180px;
13
+ padding-block: 8px;
14
+ border-bottom: 1px solid var(--border);
15
+ }
16
+
17
+ #widget .example-chart-bar {
18
+ display: grid;
19
+ grid-template-rows: 1fr auto;
20
+ align-items: end;
21
+ gap: 6px;
22
+ min-width: 0;
23
+ color: var(--foreground);
24
+ text-align: center;
25
+ }
26
+
27
+ #widget .example-chart-bar-mark {
28
+ width: 100%;
29
+ min-height: 12px;
30
+ border-radius: var(--radius) var(--radius) 0 0;
31
+ background: var(--viz-series-1);
32
+ }
33
+
34
+ #widget .example-chart-bar:nth-child(1) .example-chart-bar-mark {
35
+ height: 52px;
36
+ }
37
+
38
+ #widget .example-chart-bar:nth-child(2) .example-chart-bar-mark {
39
+ height: 72px;
40
+ }
41
+
42
+ #widget .example-chart-bar:nth-child(3) .example-chart-bar-mark {
43
+ height: 98px;
44
+ }
45
+
46
+ #widget .example-chart-bar:nth-child(4) .example-chart-bar-mark {
47
+ height: 118px;
48
+ }
49
+
50
+ @media (max-width: 420px) {
51
+ #widget .example-chart-bars {
52
+ gap: 5px;
53
+ }
54
+ }
55
+ </style>
56
+ <div id="widget">
57
+ <figure class="example-chart" aria-labelledby="example-chart-caption">
58
+ <figcaption id="example-chart-caption">
59
+ Completed loops by week
60
+ </figcaption>
61
+ <div class="example-chart-bars" role="img" aria-label="Completed loops rose from 8 to 18 over four weeks">
62
+ <div class="example-chart-bar">
63
+ <div class="example-chart-bar-mark"></div>
64
+ <span class="text-small">8</span>
65
+ </div>
66
+ <div class="example-chart-bar">
67
+ <div class="example-chart-bar-mark"></div>
68
+ <span class="text-small">11</span>
69
+ </div>
70
+ <div class="example-chart-bar">
71
+ <div class="example-chart-bar-mark"></div>
72
+ <span class="text-small">15</span>
73
+ </div>
74
+ <div class="example-chart-bar">
75
+ <div class="example-chart-bar-mark"></div>
76
+ <span class="text-small">18</span>
77
+ </div>
78
+ </div>
79
+ </figure>
80
+ <details class="card">
81
+ <summary data-tooltip="Show how the sample values are defined">Method</summary>
82
+ <p class="text-small text-muted">Illustrative weekly counts for validating the Rudder fragment contract.</p>
83
+ </details>
84
+ <svg role="img" aria-label="Upward trend marker" viewBox="0 0 120 24">
85
+ <title>Upward trend</title>
86
+ <desc>A line rises from left to right across four points.</desc>
87
+ <polyline points="4,20 40,16 78,9 116,4" fill="none" stroke="var(--viz-series-1)" stroke-width="2" vector-effect="non-scaling-stroke" />
88
+ </svg>
89
+ </div>
@@ -0,0 +1,114 @@
1
+ # Rudder Inline Visual Runtime Contract
2
+
3
+ Read this reference when producing a Rudder inline visual. The runtime is
4
+ scriptless, sanitized, isolated from Rudder state, and has no network access.
5
+ Every fragment must be under 2 MiB, and one assistant message may reference at
6
+ most three fragments.
7
+
8
+ ## Output Envelope
9
+
10
+ Write a fragment with one top-level markup root, `<div id="widget">`. Bounded
11
+ `<style>` elements may precede that root. Do not write a doctype or `html`,
12
+ `head`, or `body`; Rudder extracts and sanitizes the CSS before it sanitizes the
13
+ markup.
14
+
15
+ The assistant message must place this exact directive on its own line:
16
+
17
+ ```text
18
+ ::codex-inline-vis{file="<title>.html"}
19
+ ```
20
+
21
+ Only a current-run file from the exact thread-scoped visualization directory is
22
+ eligible for capture. Rudder rejects absolute paths, separators, traversal,
23
+ symlink escapes, missing files, stale files, oversized files, malformed
24
+ directives, unknown attributes, and duplicate attributes.
25
+
26
+ ## Preserved Markup
27
+
28
+ Use these common HTML elements:
29
+
30
+ - Structure: `article`, `aside`, `div`, `section`, `main`, `header`, `footer`,
31
+ `figure`, `figcaption`, `blockquote`, `hr`, `br`.
32
+ - Text: `h1` through `h6`, `p`, `span`, `small`, `strong`, `em`, `b`, `i`,
33
+ `mark`, `s`, `u`, `code`, `pre`.
34
+ - Lists and data: `ul`, `ol`, `li`, `dl`, `dt`, `dd`, `table`, `caption`,
35
+ `colgroup`, `col`, `thead`, `tbody`, `tfoot`, `tr`, `th`, `td`, `meter`,
36
+ `progress`.
37
+ - Native disclosure: `<details>` and `<summary>`. This is the only supported
38
+ stateful interaction.
39
+
40
+ Use inline `<svg>` for charts and diagrams. Supported primitives include
41
+ `svg`, `g`, `defs`, `title`, `desc`, `path`, `line`, `rect`, `circle`, `ellipse`,
42
+ `polygon`, `polyline`, `text`, `tspan`, `linearGradient`, `radialGradient`, and
43
+ `stop`. Do not use clipping paths; the runtime does not preserve a safe
44
+ `clip-path` reference.
45
+
46
+ Common preserved attributes include:
47
+
48
+ - Accessibility and structure: `role`, `aria-label`, `aria-labelledby`,
49
+ `aria-describedby`, `aria-hidden`, `id`, `class`, `scope`, `colspan`,
50
+ `rowspan`, `open`, `value`, `min`, and `max`.
51
+ - Tooltip: `data-tooltip`, limited to concise plain text.
52
+ - SVG geometry and paint: `viewBox`, `preserveAspectRatio`, `x`, `y`, `x1`,
53
+ `x2`, `y1`, `y2`, `cx`, `cy`, `r`, `rx`, `ry`, `width`, `height`, `d`,
54
+ `points`, `transform`, `fill`, `stroke`, opacity, line, gradient, text-anchor,
55
+ and vector-effect attributes.
56
+
57
+ IDs and class tokens must start with a letter and contain only letters, digits,
58
+ underscores, and hyphens. Keep each token at most 64 characters. A class list is
59
+ limited to 24 safe tokens. Use `url(#safe-id)` only for an inline SVG paint
60
+ reference such as a gradient; all external URL values are removed.
61
+
62
+ ## Removed Markup
63
+
64
+ Do not generate `<script>`, `a`, `button`, `input`, `select`, `textarea`,
65
+ `form`, `img`, `image`, `audio`, `video`, `canvas`, `iframe`, `object`, `embed`,
66
+ `foreignObject`, `use`, SVG animation, document metadata, or external resource
67
+ elements. The runtime removes those elements and every URL-bearing or event
68
+ handler attribute.
69
+
70
+ There is no JavaScript, Lucide runtime, CDN library, parent bridge,
71
+ `window.openai`, API access, storage, cookies, or authenticated context. A
72
+ visual that depends on any of them is not a Rudder inline visual.
73
+
74
+ ## CSS
75
+
76
+ Use host classes first:
77
+
78
+ - Layout: `.viz-grid` and `.viz-row`. `.viz-controls` is also available as a
79
+ wrapping layout class, but it does not make removed buttons, inputs, selects,
80
+ or other active controls usable.
81
+ - Summaries: `.card`, `.viz-stat`, `.viz-stat-value`, `.viz-badge`.
82
+ - Text: `.text-small`, `.text-muted`, `.text-destructive`, `.sr-only`.
83
+ - Tooltip: add `data-tooltip="Concise detail"` to `<summary>` for hover and
84
+ keyboard-focus behavior. On another preserved element it is hover-only, so
85
+ keep essential information visible elsewhere.
86
+
87
+ The host provides theme variables including `--background`, `--foreground`,
88
+ `--card`, `--card-foreground`, `--popover`, `--popover-foreground`, `--primary`,
89
+ `--primary-foreground`, `--secondary`, `--secondary-foreground`, `--muted`,
90
+ `--muted-foreground`, `--accent`, `--accent-foreground`, `--destructive`,
91
+ `--border`, `--input`, `--ring`, `--font-size-base`, `--radius`, and
92
+ `--viz-series-1` through `--viz-series-6`.
93
+
94
+ Custom `<style>` content is bounded to eight style blocks and 32 KiB total.
95
+ Use ordinary rules and responsive `@media` rules only. The sanitizer removes
96
+ custom properties, URL values, imports, fonts, namespaces, keyframes, property
97
+ registrations, malformed CSS, unknown functions, and unsupported declarations.
98
+ Inline `style` attributes are always removed.
99
+
100
+ Safe custom CSS commonly uses grid or flex layout, spacing, borders, text,
101
+ theme colors, dimensions, responsive media queries, and static transforms. Keep
102
+ selectors scoped beneath `#widget` and keep the result useful without animation.
103
+
104
+ ## Responsive And Accessible Output
105
+
106
+ - Support widths from 736px down to 320px without horizontal overflow.
107
+ - Use responsive SVG view boxes and `max-width: 100%` behavior.
108
+ - Reserve enough space for the longest labels and values.
109
+ - Give charts and diagrams a screen-reader name and, when useful, description.
110
+ - Use tables when exact values matter more than spatial comparison.
111
+ - Pair every color encoding with text, shape, or another non-color cue.
112
+
113
+ See `../assets/example-chart.html` for a minimal contract-valid fragment. Its
114
+ data is illustrative; reuse the structure, not the values.