From ae147813682a80a284eb81513ef0de7b0714ac98 Mon Sep 17 00:00:00 2001
From: harry-harish <22562634+harry-harish@users.noreply.github.com>
Date: Thu, 9 Jul 2026 16:58:14 +0530
Subject: [PATCH] feat(todomvc-demo): add ?bug=1 reproducible bug for the
 connector case study

An opt-in, unit-tested TypeError (Sort by priority on unmigrated data),
gated behind ?bug=1 so the default demo is unaffected. Backs the peek
Slack-connector case study's reproducible read-path scenario.

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
Signed-off-by: harry-harish <22562634+harry-harish@users.noreply.github.com>
---
 apps/peek-todomvc-demo/package.json           |  6 +-
 apps/peek-todomvc-demo/src/App.tsx            | 15 +++
 .../peek-todomvc-demo/src/lib/bugMode.test.ts | 16 ++++
 apps/peek-todomvc-demo/src/lib/bugMode.ts     |  8 ++
 .../src/lib/sortByPriority.test.ts            | 16 ++++
 .../src/lib/sortByPriority.ts                 | 20 ++++
 apps/peek-todomvc-demo/vitest.config.ts       |  8 ++
 pnpm-lock.yaml                                | 91 +++++++++++++++++++
 8 files changed, 178 insertions(+), 2 deletions(-)
 create mode 100644 apps/peek-todomvc-demo/src/lib/bugMode.test.ts
 create mode 100644 apps/peek-todomvc-demo/src/lib/bugMode.ts
 create mode 100644 apps/peek-todomvc-demo/src/lib/sortByPriority.test.ts
 create mode 100644 apps/peek-todomvc-demo/src/lib/sortByPriority.ts
 create mode 100644 apps/peek-todomvc-demo/vitest.config.ts

diff --git a/apps/peek-todomvc-demo/package.json b/apps/peek-todomvc-demo/package.json
index 4acdcc8d..84aaf4af 100644
--- a/apps/peek-todomvc-demo/package.json
+++ b/apps/peek-todomvc-demo/package.json
@@ -8,7 +8,8 @@
   "scripts": {
     "dev": "vite",
     "build": "tsc -b && vite build",
-    "preview": "vite preview"
+    "preview": "vite preview",
+    "test": "vitest run"
   },
   "dependencies": {
     "clsx": "^2.1.1",
@@ -26,6 +27,7 @@
     "@vitejs/plugin-react": "^6.0.1",
     "tailwindcss": "^4.3.1",
     "typescript": "~6.0.3",
-    "vite": "^8.0.12"
+    "vite": "^8.0.12",
+    "vitest": "^3.2.7"
   }
 }
diff --git a/apps/peek-todomvc-demo/src/App.tsx b/apps/peek-todomvc-demo/src/App.tsx
index f6009be9..1a146cf3 100644
--- a/apps/peek-todomvc-demo/src/App.tsx
+++ b/apps/peek-todomvc-demo/src/App.tsx
@@ -6,11 +6,14 @@ import { ThemeToggle } from './components/ThemeToggle'
 import { TodoList } from './components/TodoList'
 import { useTheme } from './hooks/useTheme'
 import { useTodos } from './hooks/useTodos'
+import { isBugMode } from './lib/bugMode'
+import { sortByPriority } from './lib/sortByPriority'
 
 function App() {
   const todos = useTodos()
   const { theme, toggle } = useTheme()
   const inputRef = useRef<HTMLInputElement>(null)
+  const bugMode = isBugMode(window.location.search)
 
   // Keyboard shortcuts: "/" focuses the input, 1/2/3 switch filters.
   useEffect(() => {
@@ -75,6 +78,18 @@ function App() {
             onClearCompleted={todos.clearCompleted}
           />
         )}
+        {bugMode && todos.todos.length > 0 && (
+          <div className="flex justify-center border-t border-border px-4 py-2">
+            <button
+              type="button"
+              // Intentional demo bug (see sortByPriority): throws in this handler.
+              onClick={() => todos.reorder(sortByPriority(todos.todos))}
+              className="text-sm text-muted-foreground underline decoration-dotted hover:text-foreground"
+            >
+              Sort by priority
+            </button>
+          </div>
+        )}
       </motion.main>
 
       <footer className="mt-6 space-y-1 text-center text-xs text-muted-foreground/70">
diff --git a/apps/peek-todomvc-demo/src/lib/bugMode.test.ts b/apps/peek-todomvc-demo/src/lib/bugMode.test.ts
new file mode 100644
index 00000000..547e510a
--- /dev/null
+++ b/apps/peek-todomvc-demo/src/lib/bugMode.test.ts
@@ -0,0 +1,16 @@
+import { describe, expect, it } from 'vitest'
+import { isBugMode } from './bugMode'
+
+describe('isBugMode', () => {
+  it('is true only when bug=1 is present', () => {
+    expect(isBugMode('?bug=1')).toBe(true)
+    expect(isBugMode('bug=1')).toBe(true)
+    expect(isBugMode('?bug=1&x=2')).toBe(true)
+  })
+
+  it('is false by default / for other values', () => {
+    expect(isBugMode('')).toBe(false)
+    expect(isBugMode('?bug=0')).toBe(false)
+    expect(isBugMode('?other=1')).toBe(false)
+  })
+})
diff --git a/apps/peek-todomvc-demo/src/lib/bugMode.ts b/apps/peek-todomvc-demo/src/lib/bugMode.ts
new file mode 100644
index 00000000..2082368d
--- /dev/null
+++ b/apps/peek-todomvc-demo/src/lib/bugMode.ts
@@ -0,0 +1,8 @@
+/**
+ * True when the demo is launched in reproducible-bug mode (`?bug=1`).
+ * Gates the intentionally-buggy "Sort by priority" affordance used by the
+ * Slack-connector case study, so the default demo stays clean.
+ */
+export function isBugMode(search: string): boolean {
+  return new URLSearchParams(search).get('bug') === '1'
+}
diff --git a/apps/peek-todomvc-demo/src/lib/sortByPriority.test.ts b/apps/peek-todomvc-demo/src/lib/sortByPriority.test.ts
new file mode 100644
index 00000000..2af97a6e
--- /dev/null
+++ b/apps/peek-todomvc-demo/src/lib/sortByPriority.test.ts
@@ -0,0 +1,16 @@
+import { describe, expect, it } from 'vitest'
+import type { Todo } from '../types'
+import { sortByPriority } from './sortByPriority'
+
+function makeTodo(title: string): Todo {
+  return { id: title, title, completed: false, createdAt: 0 }
+}
+
+describe('sortByPriority (intentional demo bug)', () => {
+  it('throws a TypeError on real todos (no migrated priority field)', () => {
+    expect(() => sortByPriority([makeTodo('a'), makeTodo('b')])).toThrow(TypeError)
+    expect(() => sortByPriority([makeTodo('a'), makeTodo('b')])).toThrow(
+      /Cannot read properties of undefined \(reading 'level'\)/,
+    )
+  })
+})
diff --git a/apps/peek-todomvc-demo/src/lib/sortByPriority.ts b/apps/peek-todomvc-demo/src/lib/sortByPriority.ts
new file mode 100644
index 00000000..d56a5aa5
--- /dev/null
+++ b/apps/peek-todomvc-demo/src/lib/sortByPriority.ts
@@ -0,0 +1,20 @@
+import type { Todo } from '../types'
+
+/**
+ * Sort todos by their `priority.level`.
+ *
+ * KNOWN BUG — reproducible via `?bug=1`. The "priority" feature shipped its UI
+ * but never migrated a `priority` value onto existing/persisted todos, so
+ * `priority` is `undefined` at runtime. A loose cast (the kind added to "move
+ * fast") hides this from the type-checker, so it compiles clean and throws only
+ * at runtime, in the click handler:
+ *   TypeError: Cannot read properties of undefined (reading 'level')
+ * This is intentional — it is the failure the case study debugs from Slack.
+ */
+export function sortByPriority(todos: Todo[]): Todo[] {
+  return [...todos].sort((a, b) => {
+    const pa = (a as Todo & { priority: { level: number } }).priority
+    const pb = (b as Todo & { priority: { level: number } }).priority
+    return pa.level - pb.level
+  })
+}
diff --git a/apps/peek-todomvc-demo/vitest.config.ts b/apps/peek-todomvc-demo/vitest.config.ts
new file mode 100644
index 00000000..d2d96904
--- /dev/null
+++ b/apps/peek-todomvc-demo/vitest.config.ts
@@ -0,0 +1,8 @@
+import { defineConfig } from 'vitest/config'
+
+export default defineConfig({
+  test: {
+    include: ['src/**/*.test.ts'],
+    environment: 'node',
+  },
+})
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 5e124d3c..7a97e315 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -107,6 +107,9 @@ importers:
       vite:
         specifier: ^8.0.12
         version: 8.0.16(@types/node@24.13.2)(esbuild@0.28.1)(jiti@2.7.0)(tsx@4.22.4)(yaml@2.9.0)
+      vitest:
+        specifier: ^3.2.7
+        version: 3.2.7(@types/debug@4.1.13)(@types/node@24.13.2)(jiti@2.7.0)(jsdom@25.0.1)(lightningcss@1.32.0)(tsx@4.22.4)(yaml@2.9.0)
 
   apps/tracelane-docs:
     dependencies:
@@ -8791,6 +8794,14 @@ snapshots:
       chai: 5.3.3
       tinyrainbow: 2.0.0
 
+  '@vitest/mocker@3.2.7(vite@6.4.3(@types/node@24.13.2)(jiti@2.7.0)(lightningcss@1.32.0)(tsx@4.22.4)(yaml@2.9.0))':
+    dependencies:
+      '@vitest/spy': 3.2.7
+      estree-walker: 3.0.3
+      magic-string: 0.30.21
+    optionalDependencies:
+      vite: 6.4.3(@types/node@24.13.2)(jiti@2.7.0)(lightningcss@1.32.0)(tsx@4.22.4)(yaml@2.9.0)
+
   '@vitest/mocker@3.2.7(vite@6.4.3(@types/node@26.0.0)(jiti@2.7.0)(lightningcss@1.32.0)(tsx@4.22.4)(yaml@2.9.0))':
     dependencies:
       '@vitest/spy': 3.2.7
@@ -13322,6 +13333,27 @@ snapshots:
       - tsx
       - yaml
 
+  vite-node@3.2.4(@types/node@24.13.2)(jiti@2.7.0)(lightningcss@1.32.0)(tsx@4.22.4)(yaml@2.9.0):
+    dependencies:
+      cac: 6.7.14
+      debug: 4.4.3(supports-color@8.1.1)
+      es-module-lexer: 1.7.0
+      pathe: 2.0.3
+      vite: 6.4.3(@types/node@24.13.2)(jiti@2.7.0)(lightningcss@1.32.0)(tsx@4.22.4)(yaml@2.9.0)
+    transitivePeerDependencies:
+      - '@types/node'
+      - jiti
+      - less
+      - lightningcss
+      - sass
+      - sass-embedded
+      - stylus
+      - sugarss
+      - supports-color
+      - terser
+      - tsx
+      - yaml
+
   vite-node@3.2.4(@types/node@26.0.0)(jiti@2.7.0)(lightningcss@1.32.0)(tsx@4.22.4)(yaml@2.9.0):
     dependencies:
       cac: 6.7.14
@@ -13359,6 +13391,22 @@ snapshots:
       tsx: 4.22.4
       yaml: 2.9.0
 
+  vite@6.4.3(@types/node@24.13.2)(jiti@2.7.0)(lightningcss@1.32.0)(tsx@4.22.4)(yaml@2.9.0):
+    dependencies:
+      esbuild: 0.25.12
+      fdir: 6.5.0(picomatch@4.0.4)
+      picomatch: 4.0.4
+      postcss: 8.5.15
+      rollup: 4.60.4
+      tinyglobby: 0.2.17
+    optionalDependencies:
+      '@types/node': 24.13.2
+      fsevents: 2.3.3
+      jiti: 2.7.0
+      lightningcss: 1.32.0
+      tsx: 4.22.4
+      yaml: 2.9.0
+
   vite@6.4.3(@types/node@26.0.0)(jiti@2.7.0)(lightningcss@1.32.0)(tsx@4.22.4)(yaml@2.9.0):
     dependencies:
       esbuild: 0.25.12
@@ -13410,6 +13458,49 @@ snapshots:
     optionalDependencies:
       vite: 7.3.6(@types/node@26.0.0)(jiti@2.7.0)(lightningcss@1.32.0)(tsx@4.22.4)(yaml@2.9.0)
 
+  vitest@3.2.7(@types/debug@4.1.13)(@types/node@24.13.2)(jiti@2.7.0)(jsdom@25.0.1)(lightningcss@1.32.0)(tsx@4.22.4)(yaml@2.9.0):
+    dependencies:
+      '@types/chai': 5.2.3
+      '@vitest/expect': 3.2.7
+      '@vitest/mocker': 3.2.7(vite@6.4.3(@types/node@24.13.2)(jiti@2.7.0)(lightningcss@1.32.0)(tsx@4.22.4)(yaml@2.9.0))
+      '@vitest/pretty-format': 3.2.7
+      '@vitest/runner': 3.2.7
+      '@vitest/snapshot': 3.2.7
+      '@vitest/spy': 3.2.7
+      '@vitest/utils': 3.2.7
+      chai: 5.3.3
+      debug: 4.4.3(supports-color@8.1.1)
+      expect-type: 1.3.0
+      magic-string: 0.30.21
+      pathe: 2.0.3
+      picomatch: 4.0.4
+      std-env: 3.10.0
+      tinybench: 2.9.0
+      tinyexec: 0.3.2
+      tinyglobby: 0.2.17
+      tinypool: 1.1.1
+      tinyrainbow: 2.0.0
+      vite: 6.4.3(@types/node@24.13.2)(jiti@2.7.0)(lightningcss@1.32.0)(tsx@4.22.4)(yaml@2.9.0)
+      vite-node: 3.2.4(@types/node@24.13.2)(jiti@2.7.0)(lightningcss@1.32.0)(tsx@4.22.4)(yaml@2.9.0)
+      why-is-node-running: 2.3.0
+    optionalDependencies:
+      '@types/debug': 4.1.13
+      '@types/node': 24.13.2
+      jsdom: 25.0.1
+    transitivePeerDependencies:
+      - jiti
+      - less
+      - lightningcss
+      - msw
+      - sass
+      - sass-embedded
+      - stylus
+      - sugarss
+      - supports-color
+      - terser
+      - tsx
+      - yaml
+
   vitest@3.2.7(@types/debug@4.1.13)(@types/node@26.0.0)(jiti@2.7.0)(jsdom@25.0.1)(lightningcss@1.32.0)(tsx@4.22.4)(yaml@2.9.0):
     dependencies:
       '@types/chai': 5.2.3