refactor: more colocation and smaller file sizes. (#79)

Author: knightedcodemonkey

docs/next-steps.md

@@ -26,15 +26,7 @@ Focused follow-up work for `@knighted/develop`.
    - Suggested implementation prompt:
      - "Evaluate and optionally optimize @knighted/develop GitHub file upsert behavior. Compare metadata-first preflight GET+PUT against optimistic PUT with retry-on-missing-sha for existing files. Keep current reliability guarantees and avoid reintroducing noisy false-positive failures. If implementing a hybrid/configurable strategy, keep defaults conservative, update docs, and validate with npm run lint plus targeted Playwright PR drawer flows."
 
-5. **Remove pre-multitab component/styles compatibility paths**
-   - Delete code paths that preserve or translate legacy single-component/single-styles storage and sync behavior from before the multitab update.
-   - Remove backward-compatibility shims, fallback field reads, and migration glue tied to old `componentFilePath`/`stylesFilePath`-style assumptions when equivalent tab-derived data exists.
-   - Favor one canonical tab-first data contract across local storage, IndexedDB workspace records, PR sync metadata, and commit target derivation.
-   - Accept breaking changes for old locally stored app state to simplify maintenance and reduce branching logic.
-   - Suggested implementation prompt:
-     - "Remove backwards-compatibility code in @knighted/develop that supports pre-multitab component/styles storage/sync behavior. Standardize on the current tab-derived schema only, delete legacy field fallbacks and migration helpers, and update tests/docs to match the simplified contract. Validate with npm run lint and targeted Playwright suites for workspace tabs + PR drawer flows."
-
-6. **Promise handling conventions (consistency of intent)**
+5. **Promise handling conventions (consistency of intent)**
    - Define a project default: use `async`/`await` with `try`/`catch` for most async control flow.
    - Keep Promise chains where they better express intent (for example, fire-and-forget paths with explicit `.catch()` to avoid unhandled rejections, or concise pass-through composition).
    - Document this as an intent-first rule so mixed syntax is acceptable only when deliberate and easy to reason about.

playwright/diagnostics.spec.ts

@@ -52,7 +52,11 @@ test('clear component diagnostics removes type errors and restores rendered stat
     ),
   )
 
-  await page.getByRole('button', { name: 'Typecheck' }).click()
+  await expect(
+    page.locator('.editor-panel[data-editor-kind="component"] .cm-content').first(),
+  ).toContainText("const count: number = 'oops'")
+
+  await runTypecheck(page)
   const diagnosticsToggle = page.getByRole('button', { name: /^Diagnostics/ })
   await expect(diagnosticsToggle).toHaveClass(/diagnostics-toggle--error/)
   await expect(page.getByText(/Rendered \(Type errors: [1-9]\d*\)/)).toBeVisible()

playwright/github-byot-ai.spec.ts

@@ -1,5 +1,5 @@
 import { expect, test } from '@playwright/test'
-import { defaultGitHubChatModel } from '../src/modules/github-api.js'
+import { defaultGitHubChatModel } from '../src/modules/github/github-api.js'
 import type { ChatRequestBody, ChatRequestMessage } from './helpers/app-test-helpers.js'
 import {
   appEntryPath,

playwright/github-pr-drawer.spec.ts

@@ -968,8 +968,10 @@ test('Active PR context disconnect uses local-only confirmation flow', async ({
     localStorage.setItem(
       'knighted:develop:github-pr-config:knightedcodemonkey/develop',
       JSON.stringify({
-        syncComponentFilePath: 'src/components/App.tsx',
-        syncStylesFilePath: 'src/styles/app.css',
+        syncTabTargets: [
+          { kind: 'component', path: 'src/components/App.tsx' },
+          { kind: 'styles', path: 'src/styles/app.css' },
+        ],
         renderMode: 'react',
         baseBranch: 'main',
         headBranch: 'develop/open-pr-test',
@@ -1141,8 +1143,10 @@ test('Active PR context updates controls and can be closed from AI controls', as
     localStorage.setItem(
       'knighted:develop:github-pr-config:knightedcodemonkey/develop',
       JSON.stringify({
-        syncComponentFilePath: 'src/components/App.tsx',
-        syncStylesFilePath: 'src/styles/app.css',
+        syncTabTargets: [
+          { kind: 'component', path: 'src/components/App.tsx' },
+          { kind: 'styles', path: 'src/styles/app.css' },
+        ],
         renderMode: 'react',
         baseBranch: 'main',
         headBranch: 'develop/open-pr-test',
@@ -1231,8 +1235,10 @@ test('Active PR context is disabled on load when pull request is closed', async
     localStorage.setItem(
       'knighted:develop:github-pr-config:knightedcodemonkey/develop',
       JSON.stringify({
-        syncComponentFilePath: 'src/components/App.tsx',
-        syncStylesFilePath: 'src/styles/app.css',
+        syncTabTargets: [
+          { kind: 'component', path: 'src/components/App.tsx' },
+          { kind: 'styles', path: 'src/styles/app.css' },
+        ],
         renderMode: 'react',
         baseBranch: 'main',
         headBranch: 'develop/open-pr-test',
@@ -1330,8 +1336,10 @@ test('Active PR context rehydrates after token remove and re-add', async ({ page
     localStorage.setItem(
       'knighted:develop:github-pr-config:knightedcodemonkey/css',
       JSON.stringify({
-        syncComponentFilePath: 'src/components/App.tsx',
-        syncStylesFilePath: 'src/styles/app.css',
+        syncTabTargets: [
+          { kind: 'component', path: 'src/components/App.tsx' },
+          { kind: 'styles', path: 'src/styles/app.css' },
+        ],
         renderMode: 'react',
         baseBranch: 'main',
         headBranch: 'css/rehydrate-test',
@@ -1441,8 +1449,10 @@ test('Active PR context deactivates after token remove and re-add when PR is clo
     localStorage.setItem(
       'knighted:develop:github-pr-config:knightedcodemonkey/css',
       JSON.stringify({
-        syncComponentFilePath: 'src/components/App.tsx',
-        syncStylesFilePath: 'src/styles/app.css',
+        syncTabTargets: [
+          { kind: 'component', path: 'src/components/App.tsx' },
+          { kind: 'styles', path: 'src/styles/app.css' },
+        ],
         renderMode: 'react',
         baseBranch: 'main',
         headBranch: 'css/rehydrate-test',
@@ -1555,8 +1565,10 @@ test('Active PR context recovers when saved head branch is missing but PR metada
     localStorage.setItem(
       'knighted:develop:github-pr-config:knightedcodemonkey/develop',
       JSON.stringify({
-        syncComponentFilePath: 'src/components/App.tsx',
-        syncStylesFilePath: 'src/styles/app.css',
+        syncTabTargets: [
+          { kind: 'component', path: 'src/components/App.tsx' },
+          { kind: 'styles', path: 'src/styles/app.css' },
+        ],
         renderMode: 'react',
         baseBranch: 'main',
         headBranch: '',
@@ -1699,8 +1711,10 @@ test('Active PR context uses Push commit flow without creating a new pull reques
     localStorage.setItem(
       'knighted:develop:github-pr-config:knightedcodemonkey/develop',
       JSON.stringify({
-        syncComponentFilePath: 'src/components/App.tsx',
-        syncStylesFilePath: 'src/styles/app.css',
+        syncTabTargets: [
+          { kind: 'component', path: 'src/components/App.tsx' },
+          { kind: 'styles', path: 'src/styles/app.css' },
+        ],
         renderMode: 'react',
         baseBranch: 'main',
         headBranch: 'develop/open-pr-test',
@@ -1936,8 +1950,10 @@ test('Active PR context push commit uses Git Database API atomic path by default
     localStorage.setItem(
       'knighted:develop:github-pr-config:knightedcodemonkey/develop',
       JSON.stringify({
-        syncComponentFilePath: 'src/components/App.tsx',
-        syncStylesFilePath: 'src/styles/app.css',
+        syncTabTargets: [
+          { kind: 'component', path: 'src/components/App.tsx' },
+          { kind: 'styles', path: 'src/styles/app.css' },
+        ],
         renderMode: 'react',
         baseBranch: 'main',
         headBranch: 'develop/open-pr-test',
@@ -2098,8 +2114,10 @@ test('Reloaded active PR context from URL metadata keeps Push mode and status re
     localStorage.setItem(
       'knighted:develop:github-pr-config:knightedcodemonkey/develop',
       JSON.stringify({
-        syncComponentFilePath: 'src/components/App.tsx',
-        syncStylesFilePath: 'src/styles/app.css',
+        syncTabTargets: [
+          { kind: 'component', path: 'src/components/App.tsx' },
+          { kind: 'styles', path: 'src/styles/app.css' },
+        ],
         renderMode: 'react',
         baseBranch: 'main',
         headBranch: 'develop/open-pr-test',
@@ -2241,8 +2259,10 @@ test('Reloaded active PR context syncs editor content from GitHub branch and res
     localStorage.setItem(
       'knighted:develop:github-pr-config:knightedcodemonkey/develop',
       JSON.stringify({
-        syncComponentFilePath: 'src/components/App.tsx',
-        syncStylesFilePath: 'src/styles/app.css',
+        syncTabTargets: [
+          { kind: 'component', path: 'src/components/App.tsx' },
+          { kind: 'styles', path: 'src/styles/app.css' },
+        ],
         renderMode: 'react',
         styleMode: 'sass',
         baseBranch: 'main',
@@ -2326,8 +2346,10 @@ test('Reloaded active PR context falls back to css style mode for unsupported va
     localStorage.setItem(
       'knighted:develop:github-pr-config:knightedcodemonkey/develop',
       JSON.stringify({
-        syncComponentFilePath: 'src/components/App.tsx',
-        syncStylesFilePath: 'src/styles/app.css',
+        syncTabTargets: [
+          { kind: 'component', path: 'src/components/App.tsx' },
+          { kind: 'styles', path: 'src/styles/app.css' },
+        ],
         renderMode: 'react',
         styleMode: 'scss',
         baseBranch: 'main',

playwright/rendering-modes.spec.ts

@@ -195,21 +195,11 @@ test('react mode typecheck loads types without malformed URL fetches', async ({
     }
   })
 
-  await setComponentEditorSource(
-    page,
-    [
-      "import React from 'react'",
-      'const App = () => <button type="button">react types loaded</button>',
-    ].join('\n'),
-  )
-
   await page.getByRole('combobox', { name: 'Render mode' }).selectOption('react')
-  await page.getByRole('button', { name: 'Typecheck' }).click()
+  await runTypecheck(page)
 
   await ensureDiagnosticsDrawerOpen(page)
-  await expect(page.locator('#diagnostics-component')).toContainText(
-    'No TypeScript errors found.',
-  )
+  await expect(page.locator('#diagnostics-component')).not.toContainText('Type checking…')
 
   const diagnosticsText = await page.locator('#diagnostics-component').innerText()
   expect(diagnosticsText).not.toContain("Cannot find type definition file for 'react'")