npm - refacil-sdd-ai - Versions diffs - 5.2.2 → 5.3.0 - Mend

refacil-sdd-ai 5.2.2 → 5.3.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.

Files changed (76) hide show

package/NOTICE.md +46 -0
package/README.md +209 -42
package/agents/auditor.md +46 -0
package/agents/debugger.md +41 -1
package/agents/implementer.md +76 -10
package/agents/investigator.md +36 -0
package/agents/proposer.md +46 -2
package/agents/tester.md +45 -8
package/agents/validator.md +67 -13
package/bin/cli.js +428 -83
package/bin/postinstall.js +20 -0
package/lib/bus/broker.js +121 -3
package/lib/bus/spawn.js +189 -121
package/lib/check-review.js +102 -0
package/lib/codegraph-telemetry.js +135 -0
package/lib/codegraph.js +273 -0
package/lib/commands/autopilot.js +120 -0
package/lib/commands/bus.js +29 -36
package/lib/commands/compact.js +185 -46
package/lib/commands/read-spec.js +352 -0
package/lib/commands/sdd.js +429 -44
package/lib/compact-guidance.js +122 -77
package/lib/config.js +136 -0
package/lib/global-paths.js +56 -20
package/lib/hooks.js +32 -4
package/lib/ide-detection.js +1 -1
package/lib/ignore-files.js +5 -1
package/lib/installer.js +202 -19
package/lib/kapso.js +241 -0
package/lib/methodology-migration-pending.js +13 -0
package/lib/open-browser.js +32 -0
package/lib/opencode-migrate.js +148 -0
package/lib/opencode-plugin/index.js +84 -104
package/lib/opencode-plugin/rules.js +236 -0
package/lib/project-root.js +154 -0
package/lib/repo-ide-sync.js +5 -0
package/lib/spec-reader/lang.js +72 -0
package/lib/spec-reader/md-parser.js +299 -0
package/lib/spec-reader/session.js +139 -0
package/lib/spec-reader/ui/app.js +685 -0
package/lib/spec-reader/ui/index.html +59 -0
package/lib/spec-reader/ui/mixed-lang.js +200 -0
package/lib/spec-reader/ui/model-cache.js +117 -0
package/lib/spec-reader/ui/style.css +294 -0
package/lib/spec-reader/ui/supertonic-helper.js +565 -0
package/lib/spec-sync.js +258 -0
package/lib/test-scope.js +713 -0
package/lib/testing-policy-sync.js +14 -2
package/package.json +6 -3
package/skills/apply/SKILL.md +39 -64
package/skills/archive/SKILL.md +74 -48
package/skills/ask/SKILL.md +43 -8
package/skills/autopilot/SKILL.md +476 -0
package/skills/bug/SKILL.md +52 -53
package/skills/explore/SKILL.md +48 -1
package/skills/guide/SKILL.md +31 -13
package/skills/inbox/SKILL.md +9 -0
package/skills/join/SKILL.md +1 -1
package/skills/prereqs/BUS-CROSS-REPO.md +33 -16
package/skills/prereqs/METHODOLOGY-CONTRACT.md +96 -17
package/skills/prereqs/SKILL.md +1 -1
package/skills/propose/SKILL.md +74 -19
package/skills/read-spec/SKILL.md +76 -0
package/skills/reply/SKILL.md +42 -9
package/skills/review/SKILL.md +63 -25
package/skills/review/checklist.md +2 -2
package/skills/say/SKILL.md +40 -4
package/skills/setup/SKILL.md +59 -5
package/skills/setup/troubleshooting.md +11 -3
package/skills/stats/SKILL.md +157 -0
package/skills/test/SKILL.md +35 -10
package/skills/up-code/SKILL.md +20 -13
package/skills/update/SKILL.md +32 -1
package/skills/verify/SKILL.md +78 -41
package/templates/compact-guidance.md +10 -0
package/templates/methodology-guide.md +5 -0

package/lib/spec-reader/ui/index.html ADDED Viewed

@@ -0,0 +1,59 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  <title>refacil read-spec — TTS</title>
+  <link rel="stylesheet" href="/read-spec/style.css" />
+  <script type="importmap">
+  {
+    "imports": {
+      "onnxruntime-web": "https://cdn.jsdelivr.net/npm/onnxruntime-web@1.22.0/dist/ort.min.mjs"
+    }
+  }
+  </script>
+  <script src="https://cdn.jsdelivr.net/npm/marked@15.0.4/marked.min.js" integrity="sha384-2NndlFAl0twi2nmu3w9mixodZFiN2fbxlakcYJF86bn1JeS1VB87/XqA7cqymzS+" crossorigin="anonymous"></script>
+</head>
+<body>
+  <header>
+    <h1>refacil read-spec</h1>
+    <p class="meta" id="source-meta">Loading session…</p>
+  </header>
+  <p id="status-bar">Preparing…</p>
+  <div class="layout">
+    <nav id="file-sidebar" class="file-sidebar hidden" aria-label="File navigation"></nav>
+    <main id="sections"></main>
+    <aside id="controls">
+      <div class="control-row">
+        <button type="button" id="prev-btn" disabled>Previous</button>
+        <button type="button" id="play-btn" disabled>Play</button>
+        <button type="button" id="next-btn" disabled>Next</button>
+      </div>
+      <label>
+        Language
+        <select id="lang-select"></select>
+      </label>
+      <label>
+        Voice
+        <select id="voice-select">
+          <option value="M1">M1</option>
+          <option value="M2">M2</option>
+          <option value="M3" selected>M3</option>
+          <option value="M4">M4</option>
+          <option value="M5">M5</option>
+          <option value="F1">F1</option>
+          <option value="F2">F2</option>
+          <option value="F3">F3</option>
+          <option value="F4">F4</option>
+          <option value="F5">F5</option>
+        </select>
+      </label>
+      <label>
+        Speed <span id="speed-val">1</span>
+        <input type="range" id="speed-range" min="0.9" max="1.5" step="0.05" value="1" />
+      </label>
+    </aside>
+  </div>
+  <script type="module" src="/read-spec/app.js"></script>
+</body>
+</html>

package/lib/spec-reader/ui/mixed-lang.js ADDED Viewed

@@ -0,0 +1,200 @@
+/**
+ * Split Spanish spec text into TTS segments so English terms (paths, flags, code)
+ * are synthesized with lang=en and the rest with lang=es.
+ */
+/** @typedef {{ lang: string, text: string }} LangSegment */
+/** Pausa mínima recomendada entre trozos es/en al concatenar WAV (segundos). */
+export const MIXED_LANG_GAP_SEC = 0.015;
+/** Máximo de inferencias TTS por sección (cada una ~varios segundos en el navegador). */
+export const MAX_TTS_SEGMENTS = 16;
+/** Case-sensitive patterns only (no /i) to avoid marking Spanish words as English. */
+const ENGLISH_SPAN_RE = new RegExp(
+  [
+    'code block:\\s*\\w+',
+    '\\brefacil-sdd-ai(?:\\s+(?:read-spec|sync-spec|bus|archive|propose|verify|review|test|apply|help|config|--[\\w-]+|(?:[\\w@]+/)+[\\w./-]+|[\\w@][\\w./-]*\\.[a-z]{2,5}))*\\b',
+    '/refacil:[\\w-]+',
+    '--[\\w-]+',
+    '\\brefacil-[\\w-]+\\b',
+    '(?:\\b[\\w@]+/)+[\\w./-]+',
+    '\\b[\\w@][\\w./-]*\\.[a-z]{2,5}\\b',
+    // Uppercase acronyms: HTML, CSS, API, TTS, CDN, SRI, REST, DOM, JSON, CI, CD, PR, etc.
+    '\\b[A-Z]{2,}(?:[.-][A-Z0-9]+)*\\b',
+    '\\b(?:endpoint|payload|token|broker|queue|webhook|session|request|response|handler|middleware|callback|schema|query|buffer|stream|chunk|pipeline|runtime|deploy|build|merge|branch|commit|staging|timeout|mock|stub|parser|router|store|state|action|backend|frontend|gateway|socket|worker|event|hook|plugin|cache|blob|lambda|trigger|scaffold|view|model|repository|migration|seed|rollback|snapshot|diff|patch|header|cookie|cors|csrf|jwt|oauth|scoped|typed|mixin|decorator|hydrat)(?:e|s|es|ed|ing|er)?\\b',
+    // Common English tech words that appear in Spanish SDD specs
+    '\\b(?:scope|render|parse|fetch|input|output|format|sanitize|validate|serialize|deserialize|encode|decode|import|export|layout|sidebar|fallback|checkbox|dropdown|tooltip|toggle|badge|overlay|modal|toast|banner|loader|spinner|inline|bundle|chunk|wrapper|container|grid|flex|offset|margin|padding|breakpoint|viewport|hover|focus|click|submit|reset|drag|drop|resize|scroll|swipe|tab|panel|frame|slot|portal|fixture|snapshot|coverage|lint|typecheck|watch|serve|preview|release|tag|label|badge|draft|issue|ticket|pr|branch|rebase|squash|stash|worktree|submodule|monorepo|workspace|package|registry|artifact|manifest|lockfile|polyfill|shim|transpile|minify|tree.shak|tree-shak)(?:e|s|es|ed|ing|er)?\\b',
+    '\\b[a-z][a-z0-9]*(?:_[a-z][a-z0-9]*)+\\b',
+    '\\b[a-z]{2,}(?:-[a-z0-9]+)+\\b',
+    '\\b[a-z]+(?:[A-Z][a-z0-9]*)+\\b',
+    '\\b(?:IndexedDB|HuggingFace|Supertonic|onnxruntime(?:-web)?|Markdown|onnxruntime-web|Node\\.js|Human-in-the-Loop)\\b',
+  ].join('|'),
+  'g',
+);
+/**
+ * @param {Float32Array|number[]} wav
+ * @param {number} sampleRate
+ * @param {number} [threshold]
+ * @returns {number[]}
+ */
+export function trimTrailingSilence(wav, sampleRate, threshold = 0.006) {
+  const minTail = Math.floor(sampleRate * 0.02);
+  let end = wav.length;
+  while (end > minTail && Math.abs(wav[end - 1]) < threshold) {
+    end -= 1;
+  }
+  return wav.slice(0, end);
+}
+/**
+ * @param {Float32Array|number[]} wav
+ * @param {number} [threshold]
+ * @returns {number[]}
+ */
+export function trimLeadingSilence(wav, threshold = 0.006) {
+  let start = 0;
+  while (start < wav.length && Math.abs(wav[start]) < threshold) {
+    start += 1;
+  }
+  return wav.slice(start);
+}
+/**
+ * @param {LangSegment[]} segments
+ * @returns {LangSegment[]}
+ */
+function mergeAdjacentSegments(segments) {
+  /** @type {LangSegment[]} */
+  const out = [];
+  for (const seg of segments) {
+    const text = (seg.text || '').replace(/\s+/g, ' ').trim();
+    if (!text) continue;
+    const prev = out[out.length - 1];
+    if (prev && prev.lang === seg.lang) {
+      prev.text = `${prev.text} ${text}`;
+    } else {
+      out.push({ lang: seg.lang, text });
+    }
+  }
+  return out;
+}
+/** Minimum chars for a Spanish segment to stand alone; below this it is punctuation/conjunction. */
+const MIN_SEGMENT_CHARS = 4;
+/**
+ * Merge short Spanish segments (punctuation, conjunctions) into the previous segment
+ * to avoid generating a separate TTS inference — and a perceptible pause — for single commas
+ * or short connectors sandwiched between English spans.
+ * @param {LangSegment[]} segments
+ * @returns {LangSegment[]}
+ */
+function mergeShortSegments(segments) {
+  const out = [];
+  for (const seg of segments) {
+    const text = (seg.text || '').replace(/\s+/g, ' ').trim();
+    if (!text) continue;
+    const prev = out[out.length - 1];
+    if (seg.lang === 'es' && text.length <= MIN_SEGMENT_CHARS && prev) {
+      prev.text = `${prev.text} ${text}`;
+    } else {
+      out.push({ lang: seg.lang, text });
+    }
+  }
+  return mergeAdjacentSegments(out);
+}
+/**
+ * Reduce fragmentación: fusiona pares adyacentes baratos priorizando pares del mismo idioma.
+ * @param {LangSegment[]} segments
+ * @param {number} [max]
+ * @returns {LangSegment[]}
+ */
+export function consolidateSegments(segments, max = MAX_TTS_SEGMENTS) {
+  let list = segments.map((s) => ({ lang: s.lang, text: s.text }));
+  while (list.length > max) {
+    if (list.length < 2) break;
+    // Find the cheapest adjacent pair. Heavy penalty for cross-language merges.
+    let bestI = -1;
+    let bestScore = Infinity;
+    for (let i = 0; i < list.length - 1; i++) {
+      const combined = list[i].text.length + list[i + 1].text.length;
+      const crossPenalty = list[i].lang !== list[i + 1].lang ? 10000 : 0;
+      const score = combined + crossPenalty;
+      if (score < bestScore) {
+        bestScore = score;
+        bestI = i;
+      }
+    }
+    const a = list[bestI];
+    const b = list[bestI + 1];
+    // Same-lang: keep that lang. Cross-lang: keep Spanish (primary doc language).
+    const mergedLang = a.lang === b.lang ? a.lang : 'es';
+    list[bestI] = { lang: mergedLang, text: `${a.text} ${b.text}`.trim() };
+    list.splice(bestI + 1, 1);
+    list = mergeAdjacentSegments(list);
+  }
+  return list;
+}
+/**
+ * @param {number[][]} parts
+ * @returns {Float32Array}
+ */
+export function concatWavParts(parts) {
+  const totalLen = parts.reduce((n, p) => n + p.length, 0);
+  const out = new Float32Array(totalLen);
+  let offset = 0;
+  for (const part of parts) {
+    out.set(part, offset);
+    offset += part.length;
+  }
+  return out;
+}
+/**
+ * @param {string} text
+ * @param {string} primaryLang Supertonic code (e.g. es, en)
+ * @returns {LangSegment[]}
+ */
+export function splitBilingualText(text, primaryLang) {
+  const primary = (primaryLang || 'es').toLowerCase();
+  if (!text || primary !== 'es') {
+    return [{ lang: primary, text: (text || '').trim() }];
+  }
+  /** @type {LangSegment[]} */
+  const segments = [];
+  let lastIndex = 0;
+  const re = new RegExp(ENGLISH_SPAN_RE.source, ENGLISH_SPAN_RE.flags);
+  let match;
+  while ((match = re.exec(text)) !== null) {
+    if (match[0].length === 0) {
+      re.lastIndex += 1;
+      continue;
+    }
+    const before = text.slice(lastIndex, match.index);
+    if (before.trim()) {
+      segments.push({ lang: 'es', text: before });
+    }
+    segments.push({ lang: 'en', text: match[0] });
+    lastIndex = re.lastIndex;
+  }
+  const tail = text.slice(lastIndex);
+  if (tail.trim()) {
+    segments.push({ lang: 'es', text: tail });
+  }
+  const merged = mergeAdjacentSegments(segments);
+  if (!merged.length) {
+    return [{ lang: 'es', text: text.trim() }];
+  }
+  // Absorb short Spanish fragments (punctuation, conjunctions) before counting segments.
+  const compacted = mergeShortSegments(merged);
+  return consolidateSegments(compacted);
+}

package/lib/spec-reader/ui/model-cache.js ADDED Viewed

@@ -0,0 +1,117 @@
+/**
+ * IndexedDB cache for HuggingFace Supertonic model assets (first download only).
+ */
+const DB_NAME = 'refacil-read-spec-tts-v1';
+const STORE = 'assets';
+function openDb() {
+  return new Promise((resolve, reject) => {
+    const req = indexedDB.open(DB_NAME, 1);
+    req.onerror = () => reject(req.error);
+    req.onsuccess = () => resolve(req.result);
+    req.onupgradeneeded = () => {
+      const db = req.result;
+      if (!db.objectStoreNames.contains(STORE)) {
+        db.createObjectStore(STORE);
+      }
+    };
+  });
+}
+/**
+ * @param {string} url
+ * @returns {Promise<ArrayBuffer | null>}
+ */
+async function getCached(url) {
+  try {
+    const db = await openDb();
+    return new Promise((resolve, reject) => {
+      const tx = db.transaction(STORE, 'readonly');
+      const req = tx.objectStore(STORE).get(url);
+      req.onsuccess = () => resolve(req.result || null);
+      req.onerror = () => reject(req.error);
+    });
+  } catch (_) {
+    return null;
+  }
+}
+/**
+ * @param {string} url
+ * @param {ArrayBuffer} data
+ */
+async function putCached(url, data) {
+  try {
+    const db = await openDb();
+    return new Promise((resolve, reject) => {
+      const tx = db.transaction(STORE, 'readwrite');
+      tx.objectStore(STORE).put(data, url);
+      tx.oncomplete = () => resolve();
+      tx.onerror = () => reject(tx.error);
+    });
+  } catch (_) {
+    // ignore cache write failures
+  }
+}
+/**
+ * Wrap global fetch to cache Supertone/supertonic-3 assets in IndexedDB.
+ * @param {(loaded: number, total: number, label: string) => void} [onProgress]
+ */
+export function installCachedFetch(onProgress) {
+  const nativeFetch = window.fetch.bind(window);
+  const hfPrefix = 'huggingface.co/Supertone/supertonic-3';
+  window.fetch = async (input, init) => {
+    const url = typeof input === 'string' ? input : input.url;
+    if (!url.includes(hfPrefix)) {
+      return nativeFetch(input, init);
+    }
+    if (!navigator.onLine) {
+      const cached = await getCached(url);
+      if (cached) {
+        return new Response(cached, { status: 200, headers: { 'content-type': guessContentType(url) } });
+      }
+      throw new Error('Internet required for first model download. Connect and reload.');
+    }
+    const cached = await getCached(url);
+    if (cached) {
+      if (onProgress) onProgress(1, 1, url.split('/').pop());
+      return new Response(cached, { status: 200, headers: { 'content-type': guessContentType(url) } });
+    }
+    const res = await nativeFetch(input, init);
+    if (!res.ok) return res;
+    const buf = await res.arrayBuffer();
+    await putCached(url, buf);
+    if (onProgress) onProgress(1, 1, url.split('/').pop());
+    return new Response(buf, { status: 200, headers: { 'content-type': guessContentType(url) } });
+  };
+}
+/**
+ * @param {string} url
+ * @returns {string}
+ */
+function guessContentType(url) {
+  if (url.endsWith('.json')) return 'application/json';
+  if (url.endsWith('.onnx')) return 'application/octet-stream';
+  return 'application/octet-stream';
+}
+export async function hasAnyCachedModel() {
+  try {
+    const db = await openDb();
+    return new Promise((resolve) => {
+      const tx = db.transaction(STORE, 'readonly');
+      const req = tx.objectStore(STORE).count();
+      req.onsuccess = () => resolve(req.result > 0);
+      req.onerror = () => resolve(false);
+    });
+  } catch (_) {
+    return false;
+  }
+}

package/lib/spec-reader/ui/style.css ADDED Viewed

@@ -0,0 +1,294 @@
+:root {
+  --bg: #0f1419;
+  --panel: #1a2332;
+  --text: #e7ecf3;
+  --muted: #8b9cb3;
+  --accent: #3d8bfd;
+  --active: #1e3a5f;
+  --border: #2a3548;
+}
+* {
+  box-sizing: border-box;
+}
+body {
+  margin: 0;
+  font-family: system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
+  background: var(--bg);
+  color: var(--text);
+  line-height: 1.5;
+}
+header {
+  padding: 1rem 1.25rem;
+  border-bottom: 1px solid var(--border);
+  background: var(--panel);
+}
+header h1 {
+  margin: 0 0 0.25rem;
+  font-size: 1.25rem;
+}
+header .meta {
+  color: var(--muted);
+  font-size: 0.875rem;
+}
+#status-bar {
+  padding: 0.75rem 1.25rem;
+  background: #15202b;
+  border-bottom: 1px solid var(--border);
+  font-size: 0.875rem;
+}
+#status-bar.error {
+  color: #ff8a8a;
+}
+#backend-badge {
+  display: inline-block;
+  margin-left: 0.5rem;
+  padding: 0.1rem 0.4rem;
+  border-radius: 4px;
+  background: #2d4a22;
+  font-size: 0.75rem;
+}
+.layout {
+  display: grid;
+  grid-template-columns: auto 1fr 320px;
+  gap: 0;
+  min-height: calc(100vh - 120px);
+}
+@media (max-width: 900px) {
+  .layout {
+    grid-template-columns: 1fr;
+  }
+  .file-sidebar { grid-column: auto; }
+  #sections    { grid-column: auto; }
+  #controls    { grid-column: auto; }
+}
+.file-sidebar {
+  grid-column: 1;
+}
+#sections {
+  grid-column: 2;
+  padding: 1rem 1.25rem 2rem;
+  overflow-y: auto;
+}
+#controls {
+  grid-column: 3;
+}
+.section {
+  margin-bottom: 1.25rem;
+  padding: 0.75rem 1rem;
+  border-radius: 8px;
+  border: 1px solid transparent;
+}
+.section.active {
+  background: var(--active);
+  border-color: var(--accent);
+}
+.section h2 {
+  margin: 0 0 0.5rem;
+  font-size: 1rem;
+  color: var(--accent);
+}
+/* Plain-text fallback: only apply pre-wrap when section-body holds raw text (no HTML tags) */
+.section .section-body:not(:has(> p, > ul, > ol, > h1, > h2, > h3, > h4, > blockquote, > pre, > table)) {
+  white-space: pre-wrap;
+}
+/* Markdown-rendered HTML elements produced by marked */
+.section h1,
+.section h2,
+.section h3,
+.section h4 {
+  margin: 0.75rem 0 0.25rem;
+  font-size: 0.95rem;
+  color: var(--accent);
+}
+.section ul,
+.section ol {
+  margin: 0.4rem 0 0.4rem 1.25rem;
+  padding: 0;
+}
+.section li {
+  margin-bottom: 0.2rem;
+}
+.section code {
+  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
+  font-size: 0.85em;
+  background: rgba(255, 255, 255, 0.08);
+  border-radius: 3px;
+  padding: 0.1em 0.3em;
+}
+.section pre {
+  background: rgba(255, 255, 255, 0.05);
+  border: 1px solid var(--border);
+  border-radius: 6px;
+  padding: 0.6rem 0.8rem;
+  overflow-x: auto;
+  font-size: 0.82rem;
+  margin: 0.5rem 0;
+}
+.section pre code {
+  background: transparent;
+  padding: 0;
+}
+.section blockquote {
+  border-left: 3px solid var(--accent);
+  margin: 0.5rem 0;
+  padding: 0.25rem 0.75rem;
+  color: var(--muted);
+}
+.section table {
+  border-collapse: collapse;
+  width: 100%;
+  font-size: 0.85rem;
+  margin: 0.5rem 0;
+}
+.section thead {
+  background: rgba(255, 255, 255, 0.06);
+}
+.section th,
+.section td {
+  border: 1px solid var(--border);
+  padding: 0.3rem 0.5rem;
+  text-align: left;
+}
+.section tr:nth-child(even) td {
+  background: rgba(255, 255, 255, 0.03);
+}
+.section strong {
+  font-weight: 600;
+  color: var(--text);
+}
+.section em {
+  font-style: italic;
+  color: var(--muted);
+}
+.section p {
+  margin: 0.3rem 0;
+}
+#controls {
+  padding: 1rem;
+  background: var(--panel);
+  border-left: 1px solid var(--border);
+}
+#controls label {
+  display: block;
+  margin-bottom: 0.75rem;
+  font-size: 0.8rem;
+  color: var(--muted);
+}
+#controls select,
+#controls input[type="range"] {
+  width: 100%;
+  margin-top: 0.25rem;
+}
+#lang-select:disabled {
+  opacity: 1;
+  cursor: default;
+  pointer-events: none;
+  background: #e8f0fe;
+  color: #1a5fc8;
+  border-color: #c5d3f0;
+  font-weight: 600;
+}
+.control-row {
+  display: flex;
+  gap: 0.5rem;
+  margin-bottom: 1rem;
+}
+.control-row button {
+  flex: 1;
+  padding: 0.5rem;
+  border: 1px solid var(--border);
+  border-radius: 6px;
+  background: #243044;
+  color: var(--text);
+  cursor: pointer;
+}
+.control-row button:hover {
+  background: #2f3f56;
+}
+.control-row button:disabled {
+  opacity: 0.5;
+  cursor: not-allowed;
+}
+#play-btn {
+  background: var(--accent);
+  border-color: var(--accent);
+  color: #fff;
+  font-weight: 600;
+}
+.hidden {
+  display: none;
+}
+.file-sidebar {
+  padding: 0.75rem;
+  background: var(--panel);
+  border-right: 1px solid var(--border);
+  overflow-y: auto;
+}
+.sidebar-file-btn {
+  display: block;
+  width: 100%;
+  padding: 0.4rem 0.6rem;
+  margin-bottom: 0.25rem;
+  border: 1px solid transparent;
+  border-radius: 5px;
+  background: transparent;
+  color: var(--muted);
+  font-size: 0.82rem;
+  text-align: left;
+  cursor: pointer;
+}
+.sidebar-file-btn:hover {
+  background: #243044;
+  color: var(--text);
+}
+.sidebar-file-btn.active {
+  background: var(--active);
+  border-color: var(--accent);
+  color: var(--text);
+  font-weight: 600;
+}