create-yss-spec 1.1.1 → 1.1.3

package/template/.codex/skills/data-analytics/tests/native-style-contract.test.mjs

@@ -0,0 +1,219 @@
+import assert from "node:assert/strict";
+import { readFileSync } from "node:fs";
+import { createRequire } from "node:module";
+import { test } from "node:test";
+
+const require = createRequire(import.meta.url);
+const server = require("../mcp/server.cjs");
+
+function read(relativePath) {
+  return readFileSync(new URL(relativePath, import.meta.url), "utf8");
+}
+
+test("widget entrypoints load the Codex baseline before analytics tokens", () => {
+  const sources = [
+    read("../src/analytics-app/main.tsx"),
+    read("../src/datascience-artifact-widget.jsx"),
+    read("../src/datascience-chart-widget.js"),
+    read("../src/datascience-table-widget.js"),
+  ];
+
+  for (const source of sources) {
+    assert.ok(source.includes("codex-theme.css"));
+    assert.ok(source.indexOf("codex-theme.css") < source.indexOf("tokens.css"));
+  }
+
+  const baseline = read("../src/styles/codex-theme.css");
+  assert.match(baseline, /--codex-accent:/);
+  assert.match(baseline, /--codex-font-sans:/);
+});
+
+test("analytics tokens alias shared roles to the Codex baseline", () => {
+  const tokens = read("../src/analytics-app/tokens.css");
+
+  assert.match(tokens, /--ds-bg: var\(--codex-bg\);/);
+  assert.match(tokens, /--ds-surface: var\(--codex-panel\);/);
+  assert.match(tokens, /--ds-border: var\(--codex-border\);/);
+  assert.match(tokens, /--ds-shadow: var\(--codex-shadow-lg\);/);
+  assert.match(tokens, /--ds-dropdown-row-height: var\(--codex-button-height\);/);
+
+  const chartTokens = read("../src/analytics-app/charting/chart-tokens.css");
+  assert.match(chartTokens, /--ds-chart-font-family: var\(--ds-font, var\(--codex-font-sans,/);
+});
+
+test("report tables retain contained horizontal scrolling and Codex-aligned reading edges", () => {
+  const source = read("../src/analytics-app/tables/DataTable.jsx");
+  const tableStyles = read("../src/analytics-app/tables/data-table.css");
+  const styles = read("../src/analytics-app/styles.css");
+  const app = read("../src/analytics-app/App.tsx");
+
+  assert.match(source, /const DEFAULT_PAGE_SIZE = 15;/);
+  assert.match(read("../src/datascience-table-widget.js"), /const TABLE_CARD_PAGE_SIZE = 15;/);
+  assert.match(read("../src/analytics-app/tokens.css"), /--ds-report-content-half-width: 384px;/);
+  assert.match(styles, /--report-table-content-inset: max\(var\(--ds-gutter\), calc\(50vw - var\(--ds-report-content-half-width\)\)\);/);
+  assert.match(styles, /\.report-stack-item-table \.table-wrap \{[\s\S]*width: 100%;/);
+  assert.match(styles, /\.report-stack-item-table \.table-wrap \{[\s\S]*max-width: 100%;/);
+  assert.match(styles, /\.report-stack-item-table \.table-wrap \{[\s\S]*margin-left: 0;/);
+  assert.match(styles, /\.report-stack-item-table \.table-scroll-content \{[\s\S]*padding-left: 0;/);
+  assert.match(styles, /\.table-density-spacious table:not\(\.data-table-resizable\) \{/);
+  assert.match(app, /minWidth: `\$\{tablePixelWidth\}px`/);
+  assert.match(app, /width: `\$\{tablePixelWidth\}px`/);
+  assert.match(styles, /--ds-menu-hover-bg: #2b2b2b;/);
+  assert.doesNotMatch(styles, /\.report-stack-item-table \.table-wrap \{[^}]*padding-left:/);
+  assert.match(styles, /\.modal-panel \{[\s\S]*background: var\(--ds-overlay-bg\);/);
+  assert.match(styles, /\.native-modal\.source-modal \{[\s\S]*width: min\(800px, calc\(100vw - 48px\)\);/);
+  assert.match(styles, /\.source-modal-panel \{[\s\S]*background: var\(--ds-overlay-bg\);[\s\S]*padding: 20px;/);
+  assert.match(read("../src/analytics-app/tokens.css"), /--ds-menu-bg: var\(--ds-overlay-bg\);/);
+  assert.match(styles, /\.metric-badge \{[\s\S]*background: var\(--ds-surface-tertiary\);/);
+  assert.match(styles, /\.metric-badge\.positive \{[\s\S]*color: var\(--ds-green\);/);
+  assert.match(styles, /\.metric-badge\.negative \{[\s\S]*color: var\(--ds-red\);/);
+  assert.match(tableStyles, /\.data-table td \{[\s\S]*color: var\(--ds-text-secondary\);/);
+  assert.match(tableStyles, /\.data-table td:first-child \{[\s\S]*color: var\(--ds-text-primary\);/);
+  assert.match(source, /tableWrapRef\.current\.scrollLeft = 0/);
+  assert.match(app, /const TABLE_CARD_PAGE_SIZE = 15;/);
+  assert.match(app, /ref=\{tableWrapRef\}>\s*<div className="table-scroll-content">/);
+  assert.match(app, /minWidth: `\$\{tablePixelWidth\}px`/);
+  assert.match(app, /width: `\$\{tablePixelWidth\}px`/);
+  assert.match(tableStyles, /\.table-sort-button:hover,\s*\.table-sort-button:focus-visible \{[\s\S]*border-radius: 0;/);
+});
+
+test("report top-bar title uses the compact supported text style", () => {
+  const styles = read("../src/analytics-app/styles.css");
+  const title = styles
+    .split(".analytics-top-bar .page-title-edit-target h1 {", 2)[1]
+    .split("}", 1)[0];
+  const editor = styles
+    .split(".analytics-top-bar .page-title-editor {", 2)[1]
+    .split("}", 1)[0];
+
+  for (const block of [title, editor]) {
+    assert.match(block, /font-size: 14px;/);
+    assert.match(block, /font-weight: 500;/);
+    assert.match(block, /line-height: 20px;/);
+    assert.match(block, /letter-spacing: -0\.13px;/);
+  }
+});
+
+test("chart detail actions use edit language", () => {
+  const app = read("../src/analytics-app/App.tsx");
+  const widget = read("../src/datascience-chart-widget.js");
+
+  assert.match(app, /menuItem\("Edit chart"/);
+  assert.doesNotMatch(app, /Switch chart type/);
+  assert.doesNotMatch(app, /<h2>Edit chart<\/h2>/);
+  assert.doesNotMatch(app, /Explore chart/);
+  assert.match(widget, /"Edit chart"/);
+  assert.doesNotMatch(widget, /Explore chart/);
+});
+
+test("artifact top bar shows the snapshot date as the refresh label", () => {
+  const app = read("../src/analytics-app/App.tsx");
+
+  assert.match(app, /const refreshLabel = dateLabel === "Unknown" \? "Refresh" : dateLabel;/);
+  assert.match(app, /<span>\{refreshLabel\}<\/span>/);
+  assert.doesNotMatch(app, /<span>Refresh<\/span>\\n\{statusLabel/);
+});
+
+test("artifact chart edit modal uses contained modal chart chrome", () => {
+  const app = read("../src/analytics-app/App.tsx");
+  const appStyles = read("../src/analytics-app/styles.css");
+  const widget = read("../src/datascience-chart-widget.js");
+  const widgetStyles = read("../src/datascience-chart-widget.css");
+
+  assert.match(app, /inline-chart-widget\?displayMode=modal/);
+  assert.match(app, /displayMode: "modal"/);
+  assert.match(app, /function chartWidgetSettings\(chart\)/);
+  assert.match(app, /settings\s*\n\s*\}/);
+  assert.match(app, /datascience-chart-widget-spec-reset/);
+  assert.match(app, /onChartSpecChange\(chart\.id, null\)/);
+  assert.doesNotMatch(app, /chart-explore-header/);
+  assert.match(appStyles, /\.native-modal\.chart-explore-modal \{[\s\S]*width: min\(1180px, calc\(100vw - 96px\)\);/);
+  assert.match(widget, /function isDetailDisplayMode\(mode = displayMode\)/);
+  assert.match(widget, /raw === "modal" \|\| raw === "dialog"/);
+  assert.match(widget, /modal-title-close-button/);
+  assert.match(widget, /requestDisplayMode\("inline"\)/);
+  assert.match(widgetStyles, /\.widget\[data-display-mode="modal"\] \.detail-topbar \{[\s\S]*display: none;/);
+  assert.match(widgetStyles, /\.widget\[data-display-mode="modal"\] \.bottom-split \{[\s\S]*display: none;/);
+  assert.match(widgetStyles, /\.widget\[data-display-mode="modal"\] \.modal-title-close-button \{[\s\S]*display: inline-flex;/);
+  assert.match(widgetStyles, /html\[data-display-mode="modal"\],\s*body\[data-display-mode="modal"\] \{[\s\S]*overflow: hidden;/);
+  assert.match(widgetStyles, /\.widget\[data-display-mode="modal"\] \.chart-shell \{[\s\S]*height: 100%;[\s\S]*min-height: 0;/);
+  assert.match(widgetStyles, /\.widget:is\(\[data-display-mode="fullscreen"\], \[data-display-mode="modal"\]\) \.detail-title-section h1 \{[\s\S]*font-size: 28px;[\s\S]*line-height: 34px;/);
+  assert.doesNotMatch(widget, /segmented\.className = "segmented chart-setting-segmented"/);
+  assert.match(widget, /function openSettingMenu\(anchor, label, value, options, onChange\)/);
+  assert.doesNotMatch(widget, /panel\.appendChild\(menuHeader\(label\)\)/);
+  assert.match(widget, /function settingDropdownChip\(label, value, options, onChange\)/);
+  assert.match(widget, /button\.setAttribute\("aria-haspopup", "menu"\)/);
+  assert.match(widget, /button\.append\(labelEl, caretIcon\("field-pill-caret"\)\)/);
+  assert.match(widget, /\? "Chart type"\s*: chartTypeLabel\(activeVisualizationType\)/);
+  assert.match(widget, /if \(!detailChrome\) button\.appendChild\(field\)/);
+  assert.match(widget, /visibleSeries = \{\};/);
+  assert.match(widget, /function notifyChartSpecReset\(\)/);
+  assert.match(widget, /type: "datascience-chart-widget-spec-reset"/);
+  assert.match(widget, /closeFieldMenus\(\{ immediate: true \}\)/);
+  assert.match(widgetStyles, /\.detail-title-row \{[\s\S]*width: 100%;/);
+  assert.match(widgetStyles, /\.widget:is\(\[data-display-mode="fullscreen"\], \[data-display-mode="modal"\]\) \.app-main \{[\s\S]*flex: 1 1 auto;[\s\S]*width: 100%;/);
+  assert.match(widgetStyles, /\.widget:is\(\[data-display-mode="fullscreen"\], \[data-display-mode="modal"\]\) \.detail-title-section h1 \{[\s\S]*flex: 1 1 auto;/);
+  assert.match(widgetStyles, /\.modal-title-close-button \{[\s\S]*margin-left: auto;/);
+  const expandedResetRule = widgetStyles.match(
+    /\.widget:is\(\[data-display-mode="fullscreen"\], \[data-display-mode="modal"\]\) \.clear-button \{[^}]*\}/,
+  );
+  assert.ok(expandedResetRule);
+  assert.doesNotMatch(expandedResetRule[0], /margin-left: auto/);
+});
+
+test("static exports omit interactive app chrome", () => {
+  const app = read("../src/analytics-app/App.tsx");
+  const widget = read("../src/datascience-chart-widget.js");
+
+  for (const source of [app, widget]) {
+    assert.match(source, /Omit the interactive top bar and app-only controls from the exported artifact/);
+  }
+});
+
+test("artifact fallback uses encoded chart fields and fullscreen language", () => {
+  const source = read("../src/datascience-artifact-widget.jsx");
+
+  assert.match(source, /x: \{ field: "week", type: "(?:ordinal|temporal)" \}/);
+  assert.match(source, /y: \{ field: "revenue_m", type: "quantitative", label: "Revenue"/);
+  assert.doesNotMatch(source, /xField: "week"/);
+  assert.doesNotMatch(source, /Open in sidebar/);
+  assert.match(source, /requestArtifactDisplayMode\("fullscreen"/);
+});
+
+test("report and dashboard artifacts render inline with a single expand action", () => {
+  const artifactSource = read("../src/datascience-artifact-widget.jsx");
+  const app = read("../src/analytics-app/App.tsx");
+  const styles = read("../src/analytics-app/styles.css");
+  const host = read("../src/mcp-host.js");
+
+  assert.match(artifactSource, /normalizeDisplayMode\([\s\S]*payload\?\.displayMode[\s\S]*\) \|\| "inline"/);
+  assert.match(artifactSource, /const canRequestFullscreen =[\s\S]*displayMode !== "fullscreen";/);
+  assert.match(artifactSource, /onRequestFullscreen=\{requestFullscreen\}/);
+  assert.match(host, /initialDisplayMode/);
+  assert.match(host, /rememberDismissedInitialDisplayMode\(name, "fullscreen"\)/);
+  assert.match(host, /clearDismissedInitialDisplayMode\(name, "fullscreen"\)/);
+  assert.match(host, /hasDismissedInitialDisplayMode\(name, normalized\)/);
+  assert.doesNotMatch(artifactSource, /function ArtifactInlineLauncher/);
+  assert.doesNotMatch(artifactSource, /showInlineLauncher/);
+  assert.doesNotMatch(artifactSource, /datascience-artifact-inline-card/);
+  assert.match(app, /function AnalyticsTopBar\(\{[\s\S]*onRequestFullscreen/);
+  assert.match(app, /const showInlineExpand = chrome === "inline" && typeof onRequestFullscreen === "function";/);
+  assert.match(app, /showInlineExpand \? \(<div className="analytics-top-bar-actions">/);
+  assert.match(app, /<Expand aria-hidden="true" size=\{14\} strokeWidth=\{2\}\/>/);
+  assert.match(app, /<span>Expand<\/span>/);
+  assert.doesNotMatch(styles, /body\[data-display-mode="inline"\]/);
+  assert.doesNotMatch(styles, /\.datascience-artifact-inline-card/);
+  assert.doesNotMatch(styles, /\.datascience-artifact-display-button/);
+});
+
+test("artifact package export advertises its filesystem write behavior", () => {
+  const exportTool = server.toolDefinitions().find((tool) => tool.name === "export_artifact_package");
+  const renderTool = server.toolDefinitions().find((tool) => tool.name === "render_artifact");
+
+  assert.ok(exportTool);
+  assert.equal(exportTool.annotations.readOnlyHint, false);
+  assert.equal(exportTool.annotations.destructiveHint, false);
+  assert.equal(exportTool.annotations.idempotentHint, false);
+  assert.ok(renderTool);
+  assert.equal(renderTool.annotations.readOnlyHint, true);
+});

package/template/.codex/skills/data-analytics/tests/recharts-config.test.mjs

@@ -0,0 +1,144 @@
+import assert from "node:assert/strict";
+import test from "node:test";
+
+import {
+  CANONICAL_CHART_TYPES,
+  buildCategoryRows,
+  canonicalVisualizationType,
+  emptyChartMessage,
+  formatValue,
+  histogramBins,
+  isCanonicalChartType,
+  isDateLikeValue,
+  pieRows,
+  rechartsLegendNames,
+  colorAt,
+  resolveCssColor,
+} from "../src/recharts-config.js";
+
+test("canonical chart types expose the shared Recharts superset", () => {
+  assert.deepEqual(CANONICAL_CHART_TYPES, [
+    "line",
+    "area",
+    "stackedArea",
+    "bar",
+    "histogram",
+    "scatter",
+    "heatmap",
+    "pie",
+    "leaderboard",
+    "sparkline",
+    "funnel",
+    "waterfall",
+    "boxPlot",
+  ]);
+  assert.equal(canonicalVisualizationType("bar"), "bar");
+  assert.equal(canonicalVisualizationType("stackedArea"), "stackedArea");
+  assert.equal(isCanonicalChartType("grouped_column"), false);
+  assert.equal(isCanonicalChartType("stacked_area"), false);
+  assert.equal(canonicalVisualizationType("grouped_column"), "bar");
+  assert.equal(canonicalVisualizationType("stacked_area"), "bar");
+});
+
+test("pivots long chart rows into Recharts category rows", () => {
+  assert.deepEqual(
+    buildCategoryRows([
+      { x: "2026-01-01", y: 10, series: "A" },
+      { x: "2026-01-02", y: 20, series: "A" },
+      { x: "2026-01-01", y: 4, series: "B" },
+    ]),
+    [
+      { x: "2026-01-01", A: 10, B: 4 },
+      { x: "2026-01-02", A: 20, B: null },
+    ],
+  );
+});
+
+test("builds histogram bins and pie rows from shared data helpers", () => {
+  const rows = [1, 1, 2, 3, 5, 8, 13].map((value) => ({ x: value, y: value, series: "Value" }));
+  const bins = histogramBins(rows);
+
+  assert.ok(bins.length >= 5);
+  assert.equal(bins.reduce((sum, bin) => sum + bin.count, 0), 7);
+  assert.deepEqual(
+    pieRows([
+      { x: "ignored", y: 10, series: "A" },
+      { x: "ignored", y: 20, series: "B" },
+      { x: "ignored", y: -5, series: "C" },
+    ]),
+    [
+      { name: "A", value: 10 },
+      { name: "B", value: 20 },
+    ],
+  );
+});
+
+test("formats large chart values compactly with currency-like units", () => {
+  assert.equal(formatValue(400000000, "USD"), "$400M");
+  assert.equal(formatValue(725.4, "USD millions"), "$725.4M");
+  assert.equal(formatValue(182300), "182.3K");
+});
+
+test("formats word percent units as semantic rates", () => {
+  assert.equal(formatValue(0.6, "percent"), "60%");
+  assert.equal(formatValue(0.625, "percentage"), "62.5%");
+  assert.equal(formatValue(60, "%"), "60%");
+});
+
+test("uses semantic chart-token categorical fallbacks", () => {
+  assert.equal(colorAt([], 0), "var(--ds-chart-stack-1, #003f7a)");
+  assert.equal(colorAt([], 1), "var(--ds-chart-stack-2, #0169cc)");
+});
+
+test("reports chart-specific empty states", () => {
+  assert.equal(emptyChartMessage([], "line"), "No chart data to render.");
+  assert.equal(emptyChartMessage([{ x: "a", y: 1, series: "A" }], "scatter"), "Scatter plots need numeric x and y values.");
+  assert.equal(emptyChartMessage([{ x: "a", y: 1, series: "A" }], "heatmap"), "Heatmaps need a grouping field with at least two series.");
+  assert.equal(emptyChartMessage([{ x: "a", y: -1, series: "A" }], "pie"), "Pie charts need positive values.");
+  assert.equal(
+    emptyChartMessage(
+      [
+        { x: "A", y: 4, series: "Alpha" },
+        { x: "B", y: 6, series: "Beta" },
+      ],
+      "funnel",
+    ),
+    "Funnel charts need a single series.",
+  );
+  assert.equal(
+    emptyChartMessage(
+      [
+        { x: "A", y: 4, series: "Alpha" },
+        { x: "B", y: 6, series: "Beta" },
+      ],
+      "waterfall",
+    ),
+    "Waterfall charts need a single series.",
+  );
+  assert.deepEqual(rechartsLegendNames([{ x: "a", y: 1, series: "A" }], "histogram"), []);
+  assert.deepEqual(
+    rechartsLegendNames(
+      [
+        { x: 1, y: 2, series: "Activation" },
+        { x: 2, y: 3, series: "Retention" },
+      ],
+      "scatter",
+    ),
+    ["Activation", "Retention"],
+  );
+});
+
+test("keeps date detection strict and CSS variable resolution browser-compatible", () => {
+  assert.equal(isDateLikeValue("2026-01-01"), true);
+  assert.equal(isDateLikeValue(42), false);
+  assert.equal(isDateLikeValue("not a date"), false);
+
+  const root = {};
+  globalThis.getComputedStyle = () => ({
+    getPropertyValue: (name) => (name === "--ds-chart-series-blue" ? "#abc123" : ""),
+  });
+
+  assert.equal(resolveCssColor("var(--ds-chart-series-blue)", root), "#abc123");
+  assert.equal(resolveCssColor("var(--missing, #fff)", root), "#fff");
+  assert.equal(resolveCssColor("#000", root), "#000");
+});

package/template/.codex/skills/data-analytics/tests/recharts-renderer.test.mjs

@@ -0,0 +1,11 @@
+import assert from "node:assert/strict";
+import { readFile } from "node:fs/promises";
+import test from "node:test";
+
+test("inline Recharts bridge normalizes word percent units into valueFormat", async () => {
+  const source = await readFile(new URL("../src/recharts-renderer.jsx", import.meta.url), "utf8");
+
+  assert.match(source, /const percentWordUnit = isPercentWordUnit\(rawUnit\);/);
+  assert.match(source, /const unit = percentWordUnit \? "" : rawUnit;/);
+  assert.match(source, /valueFormat: existing\.valueFormat \|\| \(percentWordUnit \? "percent" : unit === "\$" \? "currency" : "compact"\)/);
+});

package/template/.codex/skills/data-analytics/tests/rich-markdown.test.mjs

@@ -0,0 +1,54 @@
+import assert from "node:assert/strict";
+import { mkdtemp, readFile, rm, writeFile } from "node:fs/promises";
+import { join } from "node:path";
+import { describe, test } from "node:test";
+import ts from "typescript";
+
+async function loadRichMarkdown() {
+  const packageRoot = process.cwd();
+  const source = await readFile(
+    join(packageRoot, "src", "analytics-app", "layout", "RichMarkdown.tsx"),
+    "utf8",
+  );
+  const { outputText } = ts.transpileModule(source, {
+    compilerOptions: {
+      jsx: ts.JsxEmit.ReactJSX,
+      module: ts.ModuleKind.ES2022,
+      target: ts.ScriptTarget.ES2022,
+    },
+  });
+  const tempDir = await mkdtemp(join(packageRoot, ".tmp-rich-markdown-"));
+  const tempModule = join(tempDir, `RichMarkdown-${Date.now()}-${Math.random()}.mjs`);
+  await writeFile(tempModule, outputText);
+  const module = await import(`file://${tempModule}`);
+  await rm(tempDir, { recursive: true, force: true });
+  return module;
+}
+
+describe("rich markdown preview", () => {
+  test("keeps loose ordered-list items in one ordered list", async () => {
+    const React = await import("react");
+    const { renderToStaticMarkup } = await import("react-dom/server");
+    const { RichMarkdownPreview } = await loadRichMarkdown();
+    const markdown = [
+      "1. **Make activation the primary metric.** Optimize first-session completion.",
+      "",
+      "2. **Build opinionated starter paths.** Package top workflows.",
+      "",
+      "3. **Keep GTM focused on high-fit users.** Target teams with trial usage.",
+      "",
+      "4. **Use Free/Go as a conversion funnel.** Measure second-task depth.",
+      "",
+      "5. **Clean up instrumentation.** Standardize task and turn events.",
+    ].join("\n");
+
+    const html = renderToStaticMarkup(
+      React.createElement(RichMarkdownPreview, { markdown }),
+    );
+
+    assert.equal((html.match(/<ol>/g) ?? []).length, 1);
+    assert.equal((html.match(/<li>/g) ?? []).length, 5);
+    assert.match(html, /Make activation the primary metric/);
+    assert.match(html, /Clean up instrumentation/);
+  });
+});