@dfosco/storyboard 0.5.0-alpha.0

package/src/core/logger/devLogger.test.js

@@ -0,0 +1,193 @@
+import { describe, it, expect, beforeEach, afterEach } from 'vitest'
+import fs from 'node:fs'
+import path from 'node:path'
+import os from 'node:os'
+import { createDevLogger, extractContext, pruneOldLogs, dateStamp } from './devLogger.js'
+
+function makeTmpDir() {
+  return fs.mkdtempSync(path.join(os.tmpdir(), 'devlogger-test-'))
+}
+
+describe('devLogger', () => {
+  let tmpRoot
+
+  beforeEach(() => {
+    tmpRoot = makeTmpDir()
+  })
+
+  afterEach(() => {
+    fs.rmSync(tmpRoot, { recursive: true, force: true })
+  })
+
+  describe('createDevLogger', () => {
+    it('creates the logs directory on first write', () => {
+      const logger = createDevLogger({ root: tmpRoot, devDomain: 'test', branch: 'main' })
+      const logsDir = path.join(tmpRoot, '.storyboard', 'logs')
+
+      // Not created yet (lazy)
+      expect(fs.existsSync(logsDir)).toBe(false)
+
+      logger.logResponse({ status: 404, method: 'GET', url: '/_storyboard/canvas/read?name=missing', error: 'Not found' })
+
+      expect(fs.existsSync(logsDir)).toBe(true)
+    })
+
+    it('writes JSONL entries with correct format', () => {
+      const logger = createDevLogger({ root: tmpRoot, devDomain: 'test-domain', branch: 'feat-x' })
+
+      logger.logResponse({
+        status: 404,
+        method: 'GET',
+        url: '/_storyboard/canvas/read?name=my-canvas',
+        route: 'canvas',
+        subRoute: '/read',
+        error: 'Canvas "my-canvas" not found',
+      })
+
+      const logsDir = path.join(tmpRoot, '.storyboard', 'logs')
+      const files = fs.readdirSync(logsDir)
+      expect(files).toHaveLength(1)
+      expect(files[0]).toMatch(/^\d{4}-\d{2}-\d{2}\.jsonl$/)
+
+      const content = fs.readFileSync(path.join(logsDir, files[0]), 'utf-8')
+      const lines = content.trim().split('\n')
+      expect(lines).toHaveLength(1)
+
+      const entry = JSON.parse(lines[0])
+      expect(entry.ts).toMatch(/^\d{4}-\d{2}-\d{2}T/)
+      expect(entry.level).toBe('warn')
+      expect(entry.status).toBe(404)
+      expect(entry.method).toBe('GET')
+      expect(entry.route).toBe('canvas')
+      expect(entry.subRoute).toBe('/read')
+      expect(entry.error).toBe('Canvas "my-canvas" not found')
+      expect(entry.devDomain).toBe('test-domain')
+      expect(entry.branch).toBe('feat-x')
+      expect(entry.context.canvas).toBe('my-canvas')
+    })
+
+    it('uses level "error" for 5xx status codes', () => {
+      const logger = createDevLogger({ root: tmpRoot })
+      logger.logResponse({ status: 500, method: 'POST', url: '/test', error: 'Internal error' })
+
+      const logsDir = path.join(tmpRoot, '.storyboard', 'logs')
+      const files = fs.readdirSync(logsDir)
+      const entry = JSON.parse(fs.readFileSync(path.join(logsDir, files[0]), 'utf-8').trim())
+      expect(entry.level).toBe('error')
+    })
+
+    it('does not log 2xx responses', () => {
+      const logger = createDevLogger({ root: tmpRoot })
+      logger.logResponse({ status: 200, method: 'GET', url: '/ok' })
+      logger.logResponse({ status: 201, method: 'POST', url: '/created' })
+
+      const logsDir = path.join(tmpRoot, '.storyboard', 'logs')
+      expect(fs.existsSync(logsDir)).toBe(false) // never written, dir never created
+    })
+
+    it('appends multiple entries to the same day file', () => {
+      const logger = createDevLogger({ root: tmpRoot })
+      logger.logResponse({ status: 404, method: 'GET', url: '/a', error: 'A' })
+      logger.logResponse({ status: 400, method: 'POST', url: '/b', error: 'B' })
+      logger.logResponse({ status: 502, method: 'GET', url: '/c', error: 'C' })
+
+      const logsDir = path.join(tmpRoot, '.storyboard', 'logs')
+      const files = fs.readdirSync(logsDir)
+      expect(files).toHaveLength(1)
+
+      const lines = fs.readFileSync(path.join(logsDir, files[0]), 'utf-8').trim().split('\n')
+      expect(lines).toHaveLength(3)
+      expect(JSON.parse(lines[0]).error).toBe('A')
+      expect(JSON.parse(lines[1]).error).toBe('B')
+      expect(JSON.parse(lines[2]).error).toBe('C')
+    })
+  })
+
+  describe('logEvent', () => {
+    it('logs general events with level and message', () => {
+      const logger = createDevLogger({ root: tmpRoot, devDomain: 'test' })
+      logger.logEvent('warn', 'Hot pool failed to start', { poolId: 'copilot' })
+
+      const logsDir = path.join(tmpRoot, '.storyboard', 'logs')
+      const files = fs.readdirSync(logsDir)
+      const entry = JSON.parse(fs.readFileSync(path.join(logsDir, files[0]), 'utf-8').trim())
+
+      expect(entry.level).toBe('warn')
+      expect(entry.message).toBe('Hot pool failed to start')
+      expect(entry.context.poolId).toBe('copilot')
+      expect(entry.devDomain).toBe('test')
+    })
+  })
+
+  describe('extractContext', () => {
+    it('extracts canvas name from ?name= query param', () => {
+      const ctx = extractContext('/_storyboard/canvas/read?name=design-system')
+      expect(ctx.canvas).toBe('design-system')
+    })
+
+    it('extracts prototype from ?prototype= query param', () => {
+      const ctx = extractContext('/_storyboard/workshop/create?prototype=Dashboard')
+      expect(ctx.prototype).toBe('Dashboard')
+    })
+
+    it('extracts page from ?page= query param', () => {
+      const ctx = extractContext('/_storyboard/something?page=settings')
+      expect(ctx.page).toBe('settings')
+    })
+
+    it('returns empty context for non-parseable URLs', () => {
+      const ctx = extractContext('')
+      expect(ctx.canvas).toBeNull()
+      expect(ctx.prototype).toBeNull()
+      expect(ctx.page).toBeNull()
+    })
+
+    it('returns empty context for null input', () => {
+      const ctx = extractContext(null)
+      expect(ctx.canvas).toBeNull()
+    })
+  })
+
+  describe('dateStamp', () => {
+    it('returns YYYY-MM-DD format', () => {
+      const stamp = dateStamp(new Date('2026-04-25T12:00:00Z'))
+      expect(stamp).toBe('2026-04-25')
+    })
+  })
+
+  describe('pruneOldLogs', () => {
+    it('removes log files older than 7 days', () => {
+      const logsDir = path.join(tmpRoot, 'logs')
+      fs.mkdirSync(logsDir, { recursive: true })
+
+      // Create old file (10 days ago)
+      const old = new Date(Date.now() - 10 * 24 * 60 * 60 * 1000)
+      const oldFile = `${dateStamp(old)}.jsonl`
+      fs.writeFileSync(path.join(logsDir, oldFile), '{"test":true}\n')
+
+      // Create recent file (today)
+      const todayFile = `${dateStamp()}.jsonl`
+      fs.writeFileSync(path.join(logsDir, todayFile), '{"test":true}\n')
+
+      pruneOldLogs(logsDir)
+
+      const remaining = fs.readdirSync(logsDir)
+      expect(remaining).toContain(todayFile)
+      expect(remaining).not.toContain(oldFile)
+    })
+
+    it('ignores non-jsonl files', () => {
+      const logsDir = path.join(tmpRoot, 'logs')
+      fs.mkdirSync(logsDir, { recursive: true })
+      fs.writeFileSync(path.join(logsDir, 'readme.txt'), 'keep me')
+
+      pruneOldLogs(logsDir)
+
+      expect(fs.existsSync(path.join(logsDir, 'readme.txt'))).toBe(true)
+    })
+
+    it('handles non-existent directory gracefully', () => {
+      expect(() => pruneOldLogs(path.join(tmpRoot, 'nonexistent'))).not.toThrow()
+    })
+  })
+})

package/src/core/modes/modes.css

@@ -0,0 +1,98 @@
+/**
+ * Base styles for the storyboard design-mode system.
+ *
+ * Each mode applies a `storyboard-mode-{name}` class on <html>.
+ * Use these classes to conditionally show/hide or restyle content per mode.
+ */
+
+:root {
+  --sb--mode-color: #fcfcfc;
+  --sb--color-orange: #dfb490;
+  --sb--color-green: #2a9d8f;
+  --sb--color-blue: #4a7fad;
+  --sb--color-purple: #7655a4;
+  --sb--color-dark: #2a2a2a;
+}
+
+html.storyboard-mode-present   { --sb--mode-color: var(--sb--color-green); }
+html.storyboard-mode-plan      { --sb--mode-color: var(--sb--color-blue); }
+html.storyboard-mode-inspect   { --sb--mode-color: var(--sb--color-purple); }
+html.storyboard-mode-prototype { --sb--mode-color: var(--sb--color-dark); }
+
+html.storyboard-mode-present,
+html.storyboard-mode-plan,
+html.storyboard-mode-prototype,
+html.storyboard-mode-inspect {
+  padding: 12px;
+  background-color: var(--sb--mode-color);
+  transition: background-color 0.2s ease, padding 0.2s ease;
+}
+
+html.storyboard-mode-prototype {
+  padding: 0;
+}
+
+html.storyboard-mode-present::before,
+html.storyboard-mode-plan::before,
+html.storyboard-mode-inspect::before {
+  content: '';
+  position: fixed;
+  bottom: 0;
+  left: 0;
+  width: 100vw;
+  height: 12px;
+  background-color: var(--sb--mode-color);
+  z-index: 99999;
+  pointer-events: none;
+}
+
+html.storyboard-mode-present > body > #root,
+html.storyboard-mode-plan > body > #root,
+html.storyboard-mode-inspect > body > #root {
+  overflow-x: hidden;
+  overflow-y: hidden;
+  border-radius: var(--borderRadius-default);
+  /* box-shadow: 0 0 80px 40px var(--sb--mode-color); */
+}
+
+/* Make body transparent so the html mode-color background
+   shows through the gap between #root and the side panel */
+html.storyboard-mode-present > body,
+html.storyboard-mode-plan > body,
+html.storyboard-mode-inspect > body {
+  background-color: transparent !important;
+}
+
+#root > * {
+  overflow-y: auto;
+}
+
+html.storyboard-mode-present > body > #root {
+  box-shadow: 0 0 7px 2px rgb(42 157 143 / 60%);
+}
+
+html.storyboard-mode-plan > body > #root {
+  box-shadow: 0 0 7px 2px rgb(74 127 173 / 60%);
+}
+
+html.storyboard-mode-inspect > body > #root {
+  box-shadow: 0 0 7px 2px rgb(118 85 164 / 60%);
+}
+
+/* Mode-aware trigger button hue — derived from collar color */
+html.storyboard-mode-present,
+html.storyboard-mode-plan,
+html.storyboard-mode-inspect {
+  --sb--trigger-bg: color-mix(in srgb, var(--sb--mode-color) 12%, white);
+  --sb--trigger-bg-hover: color-mix(in srgb, var(--sb--mode-color) 20%, white);
+  --sb--trigger-text: color-mix(in srgb, var(--sb--mode-color) 85%, black);
+  --sb--trigger-border: color-mix(in srgb, var(--sb--mode-color) 45%, white);
+}
+
+/* Dark trigger tokens — applied when toolbar follows a dark theme */
+:root[data-sb-toolbar-theme^="dark"] {
+  --sb--trigger-bg: #21262d;
+  --sb--trigger-bg-hover: #30363d;
+  --sb--trigger-text: #e6edf3;
+  --sb--trigger-border: #30363d;
+}