create-yss-spec 1.1.1 → 1.1.3

package/template/.codex/skills/data-analytics/src/sql-source-view.js

@@ -0,0 +1,157 @@
+function text(value) {
+  return value == null ? "" : String(value);
+}
+
+function collapseSqlWhitespace(sql) {
+  let output = "";
+  let quote = "";
+  let previousWasSpace = false;
+  for (let index = 0; index < sql.length; index += 1) {
+    const char = sql[index];
+    const next = sql[index + 1];
+    if (quote) {
+      output += char;
+      if (char === quote) {
+        if (quote === "'" && next === "'") {
+          output += next;
+          index += 1;
+        } else {
+          quote = "";
+        }
+      }
+      previousWasSpace = false;
+      continue;
+    }
+    if (char === "'" || char === '"') {
+      quote = char;
+      output += char;
+      previousWasSpace = false;
+      continue;
+    }
+    if (/\s/.test(char)) {
+      if (!previousWasSpace) output += " ";
+      previousWasSpace = true;
+      continue;
+    }
+    output += char;
+    previousWasSpace = false;
+  }
+  return output.trim();
+}
+
+function uppercaseSqlKeywords(sql) {
+  return sql.replace(
+    /\b(select|from|where|and|or|group|by|order|having|limit|join|left|right|inner|outer|full|cross|on|with|as|case|when|then|else|end|not|in|is|null|between|like|true|false|desc|asc|union|all|over|partition)\b/gi,
+    (match) => match.toUpperCase(),
+  );
+}
+
+function indentContinuation(line) {
+  return line
+    .replace(/\bAND\b/g, "\n  AND")
+    .replace(/\bOR\b/g, "\n  OR")
+    .replace(/\bWHEN\b/g, "\n  WHEN")
+    .replace(/\bELSE\b/g, "\n  ELSE");
+}
+
+export function formatSql(sql) {
+  const normalized = uppercaseSqlKeywords(collapseSqlWhitespace(text(sql)));
+  if (!normalized) return "";
+  if (!/\b(SELECT|WITH|FROM|WHERE|ORDER BY|GROUP BY|HAVING|LIMIT)\b/.test(normalized)) {
+    return normalized;
+  }
+
+  let formatted = normalized
+    .replace(/\s*,\s*/g, ",\n  ")
+    .replace(/\bWITH\b\s*/g, "WITH\n  ")
+    .replace(/\bSELECT\b\s*/g, "SELECT\n  ")
+    .replace(/\bFROM\b\s*/g, "\nFROM ")
+    .replace(/\bWHERE\b\s*/g, "\nWHERE\n  ")
+    .replace(/\bGROUP\s+BY\b\s*/g, "\nGROUP BY\n  ")
+    .replace(/\bHAVING\b\s*/g, "\nHAVING\n  ")
+    .replace(/\bORDER\s+BY\b\s*/g, "\nORDER BY\n  ")
+    .replace(/\bLIMIT\b\s*/g, "\nLIMIT ");
+
+  formatted = formatted
+    .split("\n")
+    .map((line) => indentContinuation(line.trimEnd()))
+    .join("\n")
+    .replace(/\n{3,}/g, "\n\n")
+    .replace(/[ \t]+\n/g, "\n")
+    .trim();
+
+  return formatted.endsWith(";") ? formatted : formatted.replace(/\s*;?\s*$/, ";");
+}
+
+export function sourceQueryFromSource(source) {
+  const sourceObject = source && typeof source === "object" && !Array.isArray(source) ? source : null;
+  const query = sourceObject && sourceObject.query && typeof sourceObject.query === "object" && !Array.isArray(sourceObject.query)
+    ? sourceObject.query
+    : null;
+  if (query) {
+    return {
+      engine: query.engine,
+      id: query.id,
+      url: query.url,
+      sql: query.sql,
+      description: query.description,
+      language: query.language,
+      executed_at: query.executed_at,
+      label: sourceObject.label,
+      filters: query.filters,
+      metric_definitions: query.metric_definitions,
+      tables_used: query.tables_used,
+    };
+  }
+  return null;
+}
+
+export function sourceCodeText(sourceQuery) {
+  const source = sourceQuery && typeof sourceQuery === "object" ? sourceQuery : {};
+  const code = text(source.sql).trim();
+  return code ? text(source.sql) : "";
+}
+
+export function sourceCodeLanguage(sourceQuery) {
+  const source = sourceQuery && typeof sourceQuery === "object" ? sourceQuery : {};
+  const raw = text(source.language || source.engine).toLowerCase();
+  if (raw.includes("python")) return "Python";
+  if (raw.includes("sql") || raw.includes("databricks") || raw.includes("trino") || raw.includes("snowflake")) return "SQL";
+  return sourceCodeText(sourceQuery) ? "Query" : "";
+}
+
+export function formatSourceCode(code, language) {
+  return language === "SQL" ? formatSql(code) : text(code);
+}
+
+function codeTokenPattern(language) {
+  if (language === "Python") {
+    return /(#.*|"""[\s\S]*?"""|'''[\s\S]*?'''|"(?:\\.|[^"\\])*"|'(?:\\.|[^'\\])*'|\b(?:and|as|assert|async|await|break|class|continue|def|elif|else|except|False|finally|for|from|if|import|in|is|lambda|None|not|or|pass|raise|return|True|try|while|with|yield)\b|\b\d+(?:\.\d+)?\b)/g;
+  }
+  return /(--[^\n]*|\/\*[\s\S]*?\*\/|"(?:\\.|[^"\\])*"|'(?:''|[^'])*'|\b(?:select|from|where|group|by|order|limit|having|join|left|right|inner|outer|full|cross|on|with|as|case|when|then|else|end|and|or|not|in|is|null|between|like|sum|avg|min|max|count|date_trunc|cast|try_cast|coalesce|distinct|union|all|over|partition|row_number|rank|desc|asc|true|false)\b|\b\d+(?:\.\d+)?\b)/gi;
+}
+
+function codeTokenClass(token, language) {
+  if (language === "Python" && token.startsWith("#")) return "code-comment";
+  if (token.startsWith("--") || token.startsWith("/*")) return "code-comment";
+  if (token.startsWith("\"") || token.startsWith("'")) return "code-string";
+  if (/^\d/.test(token)) return "code-number";
+  return "code-keyword";
+}
+
+export function renderSourceCode(root, code, language) {
+  root.innerHTML = "";
+  const formatted = formatSourceCode(code, language);
+  const pattern = codeTokenPattern(language);
+  let lastIndex = 0;
+  formatted.replace(pattern, (match, _token, offset) => {
+    if (offset > lastIndex) root.appendChild(document.createTextNode(formatted.slice(lastIndex, offset)));
+    const token = document.createElement("span");
+    token.className = `code-token ${codeTokenClass(match, language)}`;
+    token.textContent = match;
+    root.appendChild(token);
+    lastIndex = offset + match.length;
+    return match;
+  });
+  if (lastIndex < formatted.length) root.appendChild(document.createTextNode(formatted.slice(lastIndex)));
+}

package/template/.codex/skills/data-analytics/src/styles/codex-theme.css

@@ -0,0 +1,121 @@
+:root,
+[data-theme="light"] {
+  color-scheme: light;
+
+  --codex-gray-0: #ffffff;
+  --codex-gray-25: #fcfcfc;
+  --codex-gray-50: #f9f9f9;
+  --codex-gray-75: #f3f3f3;
+  --codex-gray-100: #ededed;
+  --codex-gray-150: #dfdfdf;
+  --codex-gray-200: #cdcdcd;
+  --codex-gray-300: #afafaf;
+  --codex-gray-500: #5d5d5d;
+  --codex-gray-800: #212121;
+  --codex-gray-900: #181818;
+  --codex-gray-1000: #0d0d0d;
+
+  --codex-accent: var(--color-ring-primary, #339cff);
+  --codex-success: var(--color-text-success, #00a240);
+  --codex-danger: var(--color-text-danger, #ba2623);
+  --codex-warning: var(--color-text-warning, #e0ac00);
+
+  --codex-font-sans:
+    var(--font-sans, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif);
+  --codex-font-mono:
+    var(--font-mono, ui-monospace, "SFMono-Regular", "SF Mono", Menlo, Consolas, "Liberation Mono", monospace);
+
+  --codex-bg: var(--color-background-primary, var(--codex-gray-0));
+  --codex-bg-under: var(--color-background-secondary, var(--codex-gray-50));
+  --codex-panel: var(--color-background-secondary, rgba(255, 255, 255, 0.96));
+  --codex-raised: var(--color-background-tertiary, rgba(255, 255, 255, 0.98));
+  --codex-control: var(--color-background-ghost, rgba(26, 28, 31, 0.05));
+  --codex-control-hover: rgba(26, 28, 31, 0.08);
+  --codex-text: var(--color-text-primary, #1a1c1f);
+  --codex-text-secondary: var(--color-text-secondary, rgba(26, 28, 31, 0.7));
+  --codex-text-tertiary: var(--color-text-tertiary, rgba(26, 28, 31, 0.5));
+  --codex-border: var(--color-border-primary, rgba(26, 28, 31, 0.08));
+  --codex-border-heavy: var(--color-border-secondary, rgba(26, 28, 31, 0.12));
+  --codex-border-light: var(--color-border-tertiary, rgba(26, 28, 31, 0.05));
+
+  --codex-radius-xs: var(--border-radius-xs, 4px);
+  --codex-radius-sm: var(--border-radius-sm, 6px);
+  --codex-radius-md: var(--border-radius-md, 8px);
+  --codex-radius-lg: var(--border-radius-lg, 10px);
+  --codex-radius-xl: var(--border-radius-xl, 12px);
+  --codex-radius-2xl: 16px;
+  --codex-radius-3xl: 20px;
+  --codex-radius-pill: var(--border-radius-full, 9999px);
+
+  --codex-font-size-xs: var(--font-text-xs-size, 11px);
+  --codex-font-size-sm: var(--font-text-sm-size, 12px);
+  --codex-font-size-base: var(--font-text-md-size, 14px);
+  --codex-font-size-lg: var(--font-text-lg-size, 16px);
+  --codex-heading-sm: var(--font-heading-sm-size, 18px);
+  --codex-heading-md: var(--font-heading-md-size, 20px);
+  --codex-heading-lg: var(--font-heading-lg-size, 24px);
+
+  --codex-space-1: 4px;
+  --codex-space-2: 8px;
+  --codex-space-3: 12px;
+  --codex-space-4: 16px;
+  --codex-space-5: 20px;
+  --codex-space-6: 24px;
+  --codex-space-8: 32px;
+
+  --codex-button-height-sm: 28px;
+  --codex-button-height: 32px;
+  --codex-button-height-lg: 40px;
+
+  --codex-shadow-hairline: var(--shadow-hairline, 0 0 0 0.5px rgba(0, 0, 0, 0.1));
+  --codex-shadow-sm: var(--shadow-sm, 0 1px 2px -1px rgba(0, 0, 0, 0.08));
+  --codex-shadow-md: var(--shadow-md, 0 2px 4px -1px rgba(0, 0, 0, 0.08));
+  --codex-shadow-lg: var(--shadow-lg, 0 4px 8px -2px rgba(0, 0, 0, 0.1));
+
+  --codex-transition: 150ms ease;
+  --codex-transition-relaxed: 300ms ease;
+}
+
+[data-theme="dark"] {
+  color-scheme: dark;
+
+  --codex-bg: var(--color-background-primary, var(--codex-gray-900));
+  --codex-bg-under: var(--color-background-secondary, #000000);
+  --codex-panel: var(--color-background-secondary, rgba(24, 24, 24, 0.96));
+  --codex-raised: var(--color-background-tertiary, rgba(33, 33, 33, 0.98));
+  --codex-control: var(--color-background-ghost, rgba(255, 255, 255, 0.05));
+  --codex-control-hover: rgba(255, 255, 255, 0.08);
+  --codex-text: var(--color-text-primary, var(--codex-gray-0));
+  --codex-text-secondary: var(--color-text-secondary, rgba(255, 255, 255, 0.7));
+  --codex-text-tertiary: var(--color-text-tertiary, rgba(255, 255, 255, 0.5));
+  --codex-border: var(--color-border-primary, rgba(255, 255, 255, 0.08));
+  --codex-border-heavy: var(--color-border-secondary, rgba(255, 255, 255, 0.16));
+  --codex-border-light: var(--color-border-tertiary, rgba(255, 255, 255, 0.04));
+}
+
+* {
+  box-sizing: border-box;
+}
+
+body {
+  margin: 0;
+  background: var(--codex-bg);
+  color: var(--codex-text);
+  font-family: var(--codex-font-sans);
+  font-size: var(--codex-font-size-base);
+  letter-spacing: 0;
+}
+
+button,
+input,
+textarea,
+select {
+  font: inherit;
+  letter-spacing: 0;
+}
+
+.codex-app {
+  min-height: 100vh;
+  background: var(--codex-bg);
+  color: var(--codex-text);
+}

package/template/.codex/skills/data-analytics/src/table-renderer.jsx

@@ -0,0 +1,28 @@
+import React from "react";
+import { createRoot } from "react-dom/client";
+
+import { DataTable } from "./analytics-app/tables/DataTable.jsx";
+import "./analytics-app/tables/data-table.css";
+
+export function destroyDataTable(container) {
+  if (!container || !container.__datascienceDataTableRoot) return;
+  container.__datascienceDataTableRoot.unmount();
+  container.__datascienceDataTableRoot = null;
+}
+
+export function renderDataTable(container, options = {}) {
+  if (!container) return;
+  destroyDataTable(container);
+  const root = createRoot(container);
+  container.__datascienceDataTableRoot = root;
+  root.render(
+    <DataTable
+      columns={options.columns}
+      emptyLabel={options.emptyLabel}
+      maxRows={options.maxRows}
+      pageSize={options.pageSize}
+      rows={options.rows}
+      showCount={options.showCount}
+    />,
+  );
+}

package/template/.codex/skills/data-analytics/tests/chart-transforms.test.mjs

@@ -0,0 +1,87 @@
+import assert from "node:assert/strict";
+import { readFile } from "node:fs/promises";
+import { Buffer } from "node:buffer";
+import test from "node:test";
+import ts from "typescript";
+
+async function loadChartTransforms() {
+  const source = await readFile(new URL("../src/analytics-app/charting/chart-transforms.ts", import.meta.url), "utf8");
+  const { outputText } = ts.transpileModule(source, {
+    compilerOptions: {
+      module: ts.ModuleKind.ES2022,
+      target: ts.ScriptTarget.ES2022,
+    },
+  });
+  const url = `data:text/javascript;base64,${Buffer.from(outputText).toString("base64")}`;
+  return import(url);
+}
+
+function dailyRows(startDate, count) {
+  const start = new Date(`${startDate}T00:00:00.000Z`);
+  return Array.from({ length: count }, (_, index) => {
+    const date = new Date(start);
+    date.setUTCDate(start.getUTCDate() + index);
+    return {
+      reporting_date: date.toISOString().slice(0, 10),
+      value: index,
+    };
+  });
+}
+
+test("date axis ticks show every label for short windows", async () => {
+  const { getDateAxisTicks } = await loadChartTransforms();
+
+  assert.deepEqual(
+    getDateAxisTicks(dailyRows("2026-05-04", 7), "reporting_date", 760),
+    [
+      "2026-05-04",
+      "2026-05-05",
+      "2026-05-06",
+      "2026-05-07",
+      "2026-05-08",
+      "2026-05-09",
+      "2026-05-10",
+    ],
+  );
+});
+
+test("date axis ticks keep enough context for a two-week daily trend", async () => {
+  const { getDateAxisTicks } = await loadChartTransforms();
+
+  assert.deepEqual(
+    getDateAxisTicks(dailyRows("2026-05-04", 14), "reporting_date", 760),
+    [
+      "2026-05-04",
+      "2026-05-06",
+      "2026-05-08",
+      "2026-05-10",
+      "2026-05-12",
+      "2026-05-14",
+      "2026-05-16",
+      "2026-05-17",
+    ],
+  );
+});
+
+test("date axis ticks stay bounded for longer ranges", async () => {
+  const { getDateAxisTicks } = await loadChartTransforms();
+  const ticks = getDateAxisTicks(dailyRows("2026-01-01", 60), "reporting_date", 760);
+
+  assert.equal(ticks.length, 8);
+  assert.equal(ticks[0], "2026-01-01");
+  assert.equal(ticks[ticks.length - 1], "2026-03-01");
+});
+
+test("date axis ticks ignore non-date axes", async () => {
+  const { getDateAxisTicks } = await loadChartTransforms();
+
+  assert.equal(getDateAxisTicks([{ x: "alpha" }, { x: "beta" }], "x", 760), undefined);
+});
+
+test("word percent units format semantic rates", async () => {
+  const { formatValue } = await loadChartTransforms();
+
+  assert.equal(formatValue(0.6, "compact", "percent"), "60%");
+  assert.equal(formatValue(0.625, "number", "percentage"), "62.5%");
+  assert.equal(formatValue(60, "compact", "%"), "60%");
+});

package/template/.codex/skills/data-analytics/tests/funnel-smoke.html

@@ -0,0 +1,105 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1" />
+    <title>Funnel smoke</title>
+    <style>
+      html,
+      body {
+        height: 100%;
+        margin: 0;
+      }
+
+      iframe {
+        width: 100%;
+        height: 100%;
+        border: 0;
+      }
+    </style>
+  </head>
+  <body>
+    <iframe
+      id="chart"
+      title="Funnel smoke chart"
+      src="./funnel-smoke-widget.html?displayMode=fullscreen&widgetInstanceId=funnel-smoke"
+    ></iframe>
+    <script>
+      const payload = {
+        ok: true,
+        widget_type: "chart",
+        title: "Funnel smoke",
+        table: {
+          columns: [
+            { key: "stage", label: "Stage", type: "text" },
+            { key: "value", label: "Value", type: "number", unit: "USD millions" },
+          ],
+          rows: [
+            { stage: "Oct", value: 24.03 },
+            { stage: "Nov", value: 24.92 },
+            { stage: "Dec", value: 25.88 },
+            { stage: "Jan", value: 26.75 },
+            { stage: "Feb", value: 27.9 },
+            { stage: "Mar", value: 29.18 },
+          ],
+          row_count: 6,
+          truncated: false,
+        },
+        chart: {
+          type: "funnel",
+          fields: {
+            x: { field: "stage", type: "ordinal" },
+            y: { field: "value", type: "quantitative", aggregate: "sum", unit: "USD millions" },
+          },
+        },
+        display: {
+          controls: true,
+          unit: "USD millions",
+        },
+      };
+
+
+      function toolOutput(targetWidgetId) {
+        return {
+          content: [{ type: "text", text: JSON.stringify(payload) }],
+          structuredContent: payload,
+          isError: false,
+          _meta: {
+            ["openai/outputTemplate"]: "ui://widget/datascience-chart.html",
+            "ui/resourceUri": "ui://widget/datascience-chart.html",
+            targetWidgetId,
+          },
+        };
+      }
+
+      function sendPayload() {
+        const frame = document.getElementById("chart");
+        const win = frame && frame.contentWindow;
+        if (!win) return;
+        const output = toolOutput("funnel-smoke");
+        win.openai = {
+          availableDisplayModes: ["inline", "fullscreen"],
+          displayMode: "fullscreen",
+          toolOutput: output,
+          widgetInstanceId: "funnel-smoke",
+          async requestDisplayMode({ mode }) {
+            this.displayMode = mode;
+            return { mode };
+          },
+        };
+        win.dispatchEvent(
+          new win.CustomEvent("openai:set_globals", {
+            detail: { globals: { targetWidgetId: "funnel-smoke", toolOutput: output } },
+          }),
+        );
+        win.postMessage(output, "*");
+      }
+
+      document.getElementById("chart").addEventListener("load", () => {
+        sendPayload();
+        window.setTimeout(sendPayload, 100);
+      });
+      window.setTimeout(sendPayload, 100);
+    </script>
+  </body>
+</html>