fix: only show edited when in pr context.

Author: knightedcodemonkey

AGENTS.md

@@ -40,6 +40,7 @@ Repository structure:
 
 - Preserve current project formatting: single quotes, no semicolons, print width 90, arrowParens avoid.
 - Do not use index files or barrel-file architecture; prefer explicit file names and explicit import paths.
+- Prefer modular, colocated architecture; split focused features into nearby files and avoid monolithic modules.
 - Keep UI changes intentional and lightweight; avoid broad visual rewrites unless requested.
 - Keep runtime logic defensive for flaky/slow CDN conditions.
 - Preserve progressive loading behavior (lazy-load optional compilers/runtime pieces where possible).

playwright/workspace-tabs.spec.ts

@@ -266,7 +266,9 @@ test('startup restores last active workspace tab after reload', async ({ page })
   await expect(page.locator('#editor-panel-styles')).toHaveAttribute('hidden', '')
 })
 
-test('editing a synced tab marks it dirty', async ({ page }) => {
+test('editing a synced tab keeps dirty state local without Edited indicators', async ({
+  page,
+}) => {
   await waitForInitialRender(page)
 
   await seedSyncedComponentTab(page)
@@ -282,8 +284,8 @@ test('editing a synced tab marks it dirty', async ({ page }) => {
   const componentTab = page
     .getByRole('listitem', { name: 'Workspace tab App.tsx' })
     .first()
-  await expect(componentTab.locator('.workspace-tab__dirty-indicator')).toBeVisible()
-  await expect(page.locator('#component-dirty-status')).toHaveText('Edited')
+  await expect(componentTab.locator('.workspace-tab__dirty-indicator')).toHaveCount(0)
+  await expect(page.locator('#component-dirty-status')).toBeHidden()
 })
 
 test('removed default styles tab stays removed after reload', async ({ page }) => {

src/app.js

@@ -29,6 +29,7 @@ import {
   toStyleModeForTabLanguage,
 } from './modules/app-core/workspace-local-helpers.js'
 import { createWorkspaceEditorHelpers } from './modules/app-core/workspace-editor-helpers.js'
+import { createEditedIndicatorVisibilityController } from './modules/app-core/edited-indicator-visibility-controller.js'
 import { createLayoutDiagnosticsSetup } from './modules/app-core/layout-diagnostics-setup.js'
 import { createWorkspaceControllersSetup } from './modules/app-core/workspace-controllers-setup.js'
 import { createGitHubWorkflowsSetup } from './modules/app-core/github-workflows-setup.js'
@@ -436,6 +437,11 @@ const prContextUi = createGitHubPrContextUiController({
   closeWorkspacesDrawer: () => workspacesDrawerController?.setOpen(false),
 })
 
+const editedIndicatorVisibilityController = createEditedIndicatorVisibilityController({
+  getToken: () => githubAiContextState.token,
+  getActivePrContext: () => githubAiContextState.activePrContext,
+})
+
 const byotControls = createGitHubByotControls({
   controlsRoot: githubAiControls,
   tokenInput: githubTokenInput,
@@ -472,6 +478,7 @@ const byotControls = createGitHubByotControls({
     prContextUi.syncAiChatTokenVisibility(token)
     chatDrawerController.setToken(token)
     prDrawerController.setToken(token)
+    editedIndicatorVisibilityController.refreshIndicators()
   },
   setStatus,
 })
@@ -510,6 +517,8 @@ const {
   editorPanelsByKind,
   editorHeaderLabelByKind,
   editorHeaderDirtyStatusByKind,
+  getShouldShowEditedDesign:
+    editedIndicatorVisibilityController.getShouldShowEditedDesign,
   defaultTabNameByKind,
   toNonEmptyWorkspaceText,
   getLoadedStylesTabId: () => loadedStylesTabId,
@@ -660,6 +669,8 @@ const {
   setHasPendingWorkspaceTabsRender: value => (hasPendingWorkspaceTabsRender = value),
   persistActiveTabEditorContent,
   getWorkspaceTabDisplay,
+  getShouldShowEditedDesign:
+    editedIndicatorVisibilityController.getShouldShowEditedDesign,
   workspaceTabsShell,
   workspaceTabAddWrap,
   setWorkspaceTabRenameState: value => (workspaceTabRenameState = value),
@@ -684,6 +695,11 @@ const {
   createWorkspaceTabId,
 })
 
+editedIndicatorVisibilityController.setRefreshHandlers({
+  syncHeaderLabels,
+  renderWorkspaceTabs,
+})
+
 const githubWorkflows = createGitHubWorkflowsSetup({
   factories: {
     createGitHubPrEditorSyncController,
@@ -758,6 +774,9 @@ const githubWorkflows = createGitHubWorkflowsSetup({
     getStyleMode: () => styleMode.value,
     getActivePrContextSyncKey,
     prContextUi,
+    onPrContextStateChange: () => {
+      editedIndicatorVisibilityController.refreshIndicators()
+    },
     getTokenForVisibility: () => githubAiContextState.token,
     closeWorkspacesDrawer: () => {
       void workspacesDrawerController?.setOpen(false)

src/modules/app-core/edited-indicator-visibility-controller.js

@@ -0,0 +1,43 @@
+const createEditedIndicatorVisibilityController = ({
+  getToken,
+  getActivePrContext,
+} = {}) => {
+  let runRefresh = () => {}
+
+  const hasToken = () => {
+    const token = typeof getToken === 'function' ? getToken() : ''
+    return typeof token === 'string' && token.trim().length > 0
+  }
+
+  const hasActivePrContext = () => {
+    const activePrContext =
+      typeof getActivePrContext === 'function' ? getActivePrContext() : null
+    return Boolean(activePrContext?.prTitle)
+  }
+
+  const getShouldShowEditedDesign = () => hasToken() && hasActivePrContext()
+
+  const setRefreshHandlers = ({ syncHeaderLabels, renderWorkspaceTabs } = {}) => {
+    runRefresh = () => {
+      if (typeof syncHeaderLabels === 'function') {
+        syncHeaderLabels()
+      }
+
+      if (typeof renderWorkspaceTabs === 'function') {
+        renderWorkspaceTabs()
+      }
+    }
+  }
+
+  const refreshIndicators = () => {
+    runRefresh()
+  }
+
+  return {
+    getShouldShowEditedDesign,
+    setRefreshHandlers,
+    refreshIndicators,
+  }
+}
+
+export { createEditedIndicatorVisibilityController }

src/modules/app-core/github-workflows-setup.js

@@ -34,6 +34,7 @@ const createGitHubWorkflowsSetup = ({
       workspace.reconcileWorkspaceTabsWithPushUpdates,
     getActivePrContextSyncKey: runtime.getActivePrContextSyncKey,
     prContextUi: runtime.prContextUi,
+    onPrContextStateChange: runtime.onPrContextStateChange,
     getTokenForVisibility: runtime.getTokenForVisibility,
     closeWorkspacesDrawer: runtime.closeWorkspacesDrawer,
     getActivePrEditorSyncKey: runtime.getActivePrEditorSyncKey,

src/modules/app-core/github-workflows.js

@@ -58,6 +58,7 @@ const initializeGitHubWorkflows = ({
   reconcileWorkspaceTabsWithPushUpdates,
   getActivePrContextSyncKey,
   prContextUi,
+  onPrContextStateChange,
   getTokenForVisibility,
   closeWorkspacesDrawer,
   getActivePrEditorSyncKey,
@@ -191,6 +192,10 @@ const initializeGitHubWorkflows = ({
       if (activeContext) {
         closeWorkspacesDrawer()
       }
+
+      if (typeof onPrContextStateChange === 'function') {
+        onPrContextStateChange(activeContext)
+      }
     },
     onSyncActivePrEditorContent: async args => {
       const result = await prEditorSyncController.syncFromActiveContext(args)
@@ -289,6 +294,9 @@ const initializeGitHubWorkflows = ({
   prDrawerController.setSelectedRepository(githubAiContextState.selectedRepository)
   prDrawerController.syncRepositories()
   prContextUi.setActivePrContext(prDrawerController.getActivePrContext())
+  if (typeof onPrContextStateChange === 'function') {
+    onPrContextStateChange(prDrawerController.getActivePrContext())
+  }
 
   githubPrContextClose?.addEventListener('click', () => {
     if (!githubAiContextState.activePrContext) {

src/modules/app-core/workspace-controllers-setup.js

@@ -48,6 +48,7 @@ const createWorkspaceControllersSetup = ({
   setHasPendingWorkspaceTabsRender,
   persistActiveTabEditorContent,
   getWorkspaceTabDisplay,
+  getShouldShowEditedDesign,
   workspaceTabsShell,
   workspaceTabAddWrap,
   setWorkspaceTabRenameState,
@@ -178,6 +179,7 @@ const createWorkspaceControllersSetup = ({
     finishWorkspaceTabRename: finishWorkspaceTabRenameDelegate,
     removeWorkspaceTab: removeWorkspaceTabDelegate,
     getWorkspaceTabDisplay,
+    getShouldShowEditedDesign,
     workspaceTabsShell,
     workspaceTabAddWrap,
     syncEditorFromActiveWorkspaceTab: syncEditorFromActiveWorkspaceTabDelegate,

src/modules/app-core/workspace-editor-helpers.js

@@ -5,6 +5,7 @@ const createWorkspaceEditorHelpers = ({
   editorPanelsByKind,
   editorHeaderLabelByKind,
   editorHeaderDirtyStatusByKind,
+  getShouldShowEditedDesign,
   defaultTabNameByKind,
   toNonEmptyWorkspaceText,
   getLoadedStylesTabId,
@@ -54,7 +55,11 @@ const createWorkspaceEditorHelpers = ({
       }
 
       if (dirtyStatusLabel instanceof HTMLElement) {
-        const isDirty = Boolean(tab?.isDirty)
+        const shouldShowEditedDesign =
+          typeof getShouldShowEditedDesign === 'function'
+            ? Boolean(getShouldShowEditedDesign())
+            : true
+        const isDirty = shouldShowEditedDesign && Boolean(tab?.isDirty)
         dirtyStatusLabel.hidden = !isDirty
         if (isDirty) {
           dirtyStatusLabel.removeAttribute('aria-hidden')

src/modules/app-core/workspace-tabs-renderer.js

@@ -19,6 +19,7 @@ const createWorkspaceTabsRenderer = ({
   finishWorkspaceTabRename,
   removeWorkspaceTab,
   getWorkspaceTabDisplay,
+  getShouldShowEditedDesign,
   workspaceTabsShell,
   workspaceTabAddWrap,
   syncEditorFromActiveWorkspaceTab,
@@ -43,6 +44,10 @@ const createWorkspaceTabsRenderer = ({
     try {
       const tabs = workspaceTabsState.getTabs()
       const activeTabId = workspaceTabsState.getActiveTabId()
+      const shouldShowEditedDesign =
+        typeof getShouldShowEditedDesign === 'function'
+          ? Boolean(getShouldShowEditedDesign())
+          : true
 
       workspaceTabsStrip.replaceChildren()
 
@@ -226,7 +231,7 @@ const createWorkspaceTabsRenderer = ({
           tabContainer.append(metaBadge)
         }
 
-        if (tab.isDirty) {
+        if (shouldShowEditedDesign && tab.isDirty) {
           const dirtyBadge = document.createElement('span')
           dirtyBadge.className = 'workspace-tab__dirty-indicator'
           dirtyBadge.setAttribute('aria-hidden', 'true')