docs: issue 62 prompt.

Author: knightedcodemonkey

docs/issue-62-continuation-prompt.md

@@ -0,0 +1,106 @@
+# Issue #62 Continuation Prompt: Pick Up Where We Left Off
+
+Use this as the handoff prompt for continuing work on:
+https://github.com/knightedcodemonkey/develop/issues/62
+
+## Prompt
+
+You are resuming implementation for issue #62 in `@knighted/develop`.
+
+### Goal
+
+Finish the dynamic multi-tab workspace/editor refactor and close remaining
+behavior gaps without doing a broad visual redesign.
+
+### Current project constraints
+
+- Keep changes localized to `@knighted/develop`.
+- Preserve CDN-first runtime/fallback behavior.
+- Preserve existing lint/build pipeline.
+- Do not add dependencies without asking first.
+- Prefer focused, minimal diffs over broad rewrites.
+
+### What is already done
+
+- Dynamic workspace tabs exist with add, rename, remove, and local persistence.
+- Entry-role guard exists (entry tab cannot be removed).
+- Tab strip was moved to a dedicated full-width row in the editor area.
+- Tab visuals were updated toward IDE-like tabs.
+- Rename flow was hardened against re-entrant render races.
+- Add-tab naming prompt was removed in favor of generated default names.
+- Active tab is re-applied on startup to reduce initial-load drift.
+- Focus-based kind switching was removed from editor focus handlers.
+- `setActiveWorkspaceTabForKind` has been removed.
+- Lint/build were passing after the most recent structural change.
+
+### Known remaining risk areas
+
+- Residual component/styles lane assumptions still exist in `src/app.js`
+  (for example cached loaded tab ids and kind-based branches).
+- App entry tab selection on initial load has historically been flaky.
+- Remove-tab fallback and active-tab/editor sync should stay strictly
+  tab-id-driven.
+- Preview entry/hydration behavior must remain consistent with tab metadata.
+
+### Required outcomes for this continuation
+
+1. Make active tab id the single source of truth
+
+- Eliminate or isolate remaining lane-coupled activation logic.
+- Ensure selecting a tab always controls visible editor content.
+
+2. Preserve entry contract and startup determinism
+
+- Entry tab path should remain `src/components/App.tsx` or `src/components/App.jsx`.
+- On first load/restore, App entry tab must be selectable and render correctly.
+
+3. Keep one-visible-editor behavior stable
+
+- Only one editor panel should be visible at a time.
+- Internal pooling can remain, but hidden editor focus/state must not mutate
+  active tab.
+
+4. Keep remove/add/rename flows coherent
+
+- Remove fallback must be deterministic and tab-first.
+- Rename/add should not produce stale active state or content drift.
+
+5. Clean dead branches introduced during migration
+
+- Remove obsolete helpers and stale wiring once replacement paths are active.
+- Remove only clearly dead CSS/DOM hooks tied to removed behavior.
+
+### Suggested execution sequence
+
+1. Audit active-tab flow in `src/app.js`:
+
+- `setActiveWorkspaceTab`
+- `loadWorkspaceTabIntoEditor`
+- remove-tab fallback logic
+- startup restore logic
+
+2. Convert remaining kind-branch activation to tab-id-first selection.
+
+3. Re-test high-risk interactions manually:
+
+- initial load with App entry tab
+- select between multiple component and style tabs
+- add tab, rename tab, remove non-entry tab
+- switch style modes and verify preview keeps rendering
+
+4. Run validation:
+
+```bash
+npm run lint
+npm run build
+```
+
+5. If behavior changed, update docs briefly in `docs/`.
+
+### Definition of done
+
+- App entry tab is reliably selectable on initial load.
+- No hidden-focus path can override active tab unexpectedly.
+- Active tab, visible editor, and persisted content stay in sync.
+- Remove/add/rename flows are stable and deterministic.
+- Lint/build pass.

src/app.js

@@ -1331,22 +1331,6 @@ const setActiveWorkspaceTab = tabId => {
   })
 }
 
-const setActiveWorkspaceTabForKind = kind => {
-  const normalizedKind = kind === 'styles' ? 'styles' : 'component'
-  const preferredId =
-    normalizedKind === 'styles' ? loadedStylesTabId : loadedComponentTabId
-  const preferredTab = workspaceTabsState.getTab(preferredId)
-  if (preferredTab && getTabKind(preferredTab) === normalizedKind) {
-    setActiveWorkspaceTab(preferredTab.id)
-    return
-  }
-
-  const fallbackTab = getWorkspaceTabByKind(normalizedKind)
-  if (fallbackTab) {
-    setActiveWorkspaceTab(fallbackTab.id)
-  }
-}
-
 const syncEditorFromActiveWorkspaceTab = () => {
   const activeTab = getActiveWorkspaceTab()
   if (!activeTab) {
@@ -1432,10 +1416,14 @@ const removeWorkspaceTab = tabId => {
       const activeTab = getActiveWorkspaceTab()
       if (activeTab) {
         loadWorkspaceTabIntoEditor(activeTab)
-      } else if (removedKind === 'styles') {
-        setActiveWorkspaceTabForKind('component')
       } else {
-        setActiveWorkspaceTabForKind('styles')
+        const fallbackTab =
+          getWorkspaceTabByKind(removedKind === 'styles' ? 'component' : 'styles') ||
+          workspaceTabsState.getTabs()[0] ||
+          null
+        if (fallbackTab) {
+          setActiveWorkspaceTab(fallbackTab.id)
+        }
       }
 
       renderWorkspaceTabs()
@@ -1996,9 +1984,6 @@ const initializeCodeEditors = async () => {
           markTypeDiagnosticsStale()
           markComponentLintDiagnosticsStale()
         },
-        onFocus: () => {
-          setActiveWorkspaceTabForKind('component')
-        },
       }),
       createCodeMirrorEditor({
         parent: cssHost,
@@ -2028,9 +2013,6 @@ const initializeCodeEditors = async () => {
           maybeRender()
           markStylesLintDiagnosticsStale()
         },
-        onFocus: () => {
-          setActiveWorkspaceTabForKind('styles')
-        },
       }),
     ])
 
@@ -2680,9 +2662,6 @@ jsxEditor.addEventListener('input', maybeRender)
 jsxEditor.addEventListener('input', markTypeDiagnosticsStale)
 jsxEditor.addEventListener('input', markComponentLintDiagnosticsStale)
 jsxEditor.addEventListener('input', queueWorkspaceSave)
-jsxEditor.addEventListener('focus', () => {
-  setActiveWorkspaceTabForKind('component')
-})
 jsxEditor.addEventListener('blur', () => {
   void flushWorkspaceSave().catch(() => {
     /* Save failures are already surfaced through saver onError. */
@@ -2691,9 +2670,6 @@ jsxEditor.addEventListener('blur', () => {
 cssEditor.addEventListener('input', maybeRender)
 cssEditor.addEventListener('input', markStylesLintDiagnosticsStale)
 cssEditor.addEventListener('input', queueWorkspaceSave)
-cssEditor.addEventListener('focus', () => {
-  setActiveWorkspaceTabForKind('styles')
-})
 cssEditor.addEventListener('blur', () => {
   void flushWorkspaceSave().catch(() => {
     /* Save failures are already surfaced through saver onError. */