From 9b41b16b42d4c8bebe68de6170bef94df27c301d Mon Sep 17 00:00:00 2001
From: AAEE86 <ppk0227@hotmail.com>
Date: Fri, 17 Jul 2026 17:42:42 +0800
Subject: [PATCH 1/2] feat(settings): open web settings in an in-page dialog

- replace the web settings window with a responsive modal
- reuse existing settings routes through a same-origin iframe
- support loading state, close button, overlay and Escape dismissal
- add tests for dialog events and interactions
---
 src/app/layout.tsx                            |   2 +
 .../settings/web-settings-dialog.test.tsx     |  63 +++++++++++
 .../settings/web-settings-dialog.tsx          | 102 ++++++++++++++++++
 src/lib/api.ts                                |   5 +-
 src/lib/settings-dialog-events.test.ts        |  25 +++++
 src/lib/settings-dialog-events.ts             |  29 +++++
 6 files changed, 224 insertions(+), 2 deletions(-)
 create mode 100644 src/components/settings/web-settings-dialog.test.tsx
 create mode 100644 src/components/settings/web-settings-dialog.tsx
 create mode 100644 src/lib/settings-dialog-events.test.ts
 create mode 100644 src/lib/settings-dialog-events.ts

diff --git a/src/app/layout.tsx b/src/app/layout.tsx
index 852464b20..0867d78d2 100644
--- a/src/app/layout.tsx
+++ b/src/app/layout.tsx
@@ -13,6 +13,7 @@ import { OverlayScrollbarsInit } from "@/components/overlay-scrollbars-init"
 import { ClipboardFallbackInit } from "@/components/clipboard-fallback-init"
 import { WebConnectionGuard } from "@/components/connection/web-connection-guard"
 import { WindowResizeGrips } from "@/components/layout/window-resize-grips"
+import { WebSettingsDialog } from "@/components/settings/web-settings-dialog"
 
 export const viewport: Viewport = {
   width: "device-width",
@@ -74,6 +75,7 @@ export default async function RootLayout({
                 <WebConnectionGuard />
                 <WindowResizeGrips />
                 {children}
+                <WebSettingsDialog />
               </AppearanceProvider>
             </ThemeProvider>
           </AppI18nProvider>
diff --git a/src/components/settings/web-settings-dialog.test.tsx b/src/components/settings/web-settings-dialog.test.tsx
new file mode 100644
index 000000000..dfb3bd733
--- /dev/null
+++ b/src/components/settings/web-settings-dialog.test.tsx
@@ -0,0 +1,63 @@
+import { act, cleanup, fireEvent, render, screen } from "@testing-library/react"
+import { afterEach, describe, expect, it, vi } from "vitest"
+
+vi.mock("next-intl", () => ({ useTranslations: () => () => "Settings" }))
+
+import { WebSettingsDialog } from "./web-settings-dialog"
+import {
+  emitOpenSettingsDialog,
+  OPEN_SETTINGS_DIALOG_EVENT,
+} from "@/lib/settings-dialog-events"
+
+afterEach(() => cleanup())
+
+describe("WebSettingsDialog", () => {
+  it("opens the requested settings route in an in-page dialog", () => {
+    render(<WebSettingsDialog />)
+
+    act(() => emitOpenSettingsDialog("/settings/agents?agent=codex"))
+
+    const frame = screen.getByTitle("Settings")
+    expect(frame).toHaveAttribute("src", "/settings/agents?agent=codex")
+    expect(screen.getByRole("dialog")).toBeInTheDocument()
+  })
+
+  it("closes and removes the settings frame", () => {
+    render(<WebSettingsDialog />)
+    act(() => emitOpenSettingsDialog("/settings/appearance"))
+
+    fireEvent.click(screen.getByRole("button", { name: "Close" }))
+
+    expect(screen.queryByRole("dialog")).not.toBeInTheDocument()
+    expect(screen.queryByTitle("Settings")).not.toBeInTheDocument()
+  })
+
+  it("closes on Escape while focus is inside the settings frame", () => {
+    render(<WebSettingsDialog />)
+    act(() => emitOpenSettingsDialog("/settings/appearance"))
+
+    const frame = screen.getByTitle<HTMLIFrameElement>("Settings")
+    fireEvent.load(frame)
+    act(() => {
+      frame.contentWindow?.dispatchEvent(
+        new KeyboardEvent("keydown", { key: "Escape" })
+      )
+    })
+
+    expect(screen.queryByRole("dialog")).not.toBeInTheDocument()
+  })
+
+  it("ignores navigation outside the settings routes", () => {
+    render(<WebSettingsDialog />)
+
+    act(() => {
+      window.dispatchEvent(
+        new CustomEvent(OPEN_SETTINGS_DIALOG_EVENT, {
+          detail: { path: "/login" },
+        })
+      )
+    })
+
+    expect(screen.queryByRole("dialog")).not.toBeInTheDocument()
+  })
+})
diff --git a/src/components/settings/web-settings-dialog.tsx b/src/components/settings/web-settings-dialog.tsx
new file mode 100644
index 000000000..c5e7de310
--- /dev/null
+++ b/src/components/settings/web-settings-dialog.tsx
@@ -0,0 +1,102 @@
+"use client"
+
+import {
+  useCallback,
+  useEffect,
+  useRef,
+  useState,
+  type SyntheticEvent,
+} from "react"
+import { LoaderCircle } from "lucide-react"
+import { useTranslations } from "next-intl"
+import { Dialog, DialogContent, DialogTitle } from "@/components/ui/dialog"
+import {
+  OPEN_SETTINGS_DIALOG_EVENT,
+  type OpenSettingsDialogDetail,
+} from "@/lib/settings-dialog-events"
+
+export function WebSettingsDialog() {
+  const t = useTranslations("SettingsShell")
+  const frameSequence = useRef(0)
+  const [frame, setFrame] = useState<{
+    path: string
+    sequence: number
+  } | null>(null)
+  const [loaded, setLoaded] = useState(false)
+
+  useEffect(() => {
+    const handleOpenSettings = (event: Event) => {
+      const nextPath = (event as CustomEvent<OpenSettingsDialogDetail>).detail
+        ?.path
+      if (!nextPath?.startsWith("/settings/")) return
+
+      setLoaded(false)
+      frameSequence.current += 1
+      setFrame({ path: nextPath, sequence: frameSequence.current })
+    }
+
+    window.addEventListener(OPEN_SETTINGS_DIALOG_EVENT, handleOpenSettings)
+    return () => {
+      window.removeEventListener(OPEN_SETTINGS_DIALOG_EVENT, handleOpenSettings)
+    }
+  }, [])
+
+  const handleOpenChange = useCallback((open: boolean) => {
+    if (open) return
+    setFrame(null)
+    setLoaded(false)
+  }, [])
+
+  const handleFrameKeyDown = useCallback(
+    (event: KeyboardEvent) => {
+      if (event.key === "Escape") handleOpenChange(false)
+    },
+    [handleOpenChange]
+  )
+
+  const handleFrameLoad = useCallback(
+    (event: SyntheticEvent<HTMLIFrameElement>) => {
+      setLoaded(true)
+      try {
+        event.currentTarget.contentWindow?.addEventListener(
+          "keydown",
+          handleFrameKeyDown
+        )
+      } catch {
+        // The settings route is expected to be same-origin. Keep the close
+        // button usable if a deployment rewrites it to another origin.
+      }
+    },
+    [handleFrameKeyDown]
+  )
+
+  return (
+    <Dialog open={frame !== null} onOpenChange={handleOpenChange}>
+      <DialogContent
+        className="block h-[min(700px,calc(100dvh-2rem))] w-[min(1080px,calc(100vw-2rem))] max-w-none overflow-hidden rounded-2xl p-0 sm:max-w-none"
+        closeButtonClassName="top-2 right-2 z-20 size-6 bg-background/80 backdrop-blur-sm [&_svg]:size-3"
+      >
+        <DialogTitle className="sr-only">{t("title")}</DialogTitle>
+
+        {!loaded && (
+          <div className="pointer-events-none absolute inset-0 z-10 flex items-center justify-center bg-background">
+            <LoaderCircle
+              className="h-6 w-6 animate-spin text-muted-foreground"
+              aria-hidden="true"
+            />
+          </div>
+        )}
+
+        {frame && (
+          <iframe
+            key={frame.sequence}
+            src={frame.path}
+            title={t("title")}
+            className="h-full w-full border-0 bg-background"
+            onLoad={handleFrameLoad}
+          />
+        )}
+      </DialogContent>
+    </Dialog>
+  )
+}
diff --git a/src/lib/api.ts b/src/lib/api.ts
index 88443b1bf..5e4b6d5ca 100644
--- a/src/lib/api.ts
+++ b/src/lib/api.ts
@@ -9,6 +9,7 @@ import {
 import { getCodegToken } from "./transport/web-auth"
 import { notifyWebUnauthorized } from "./transport/web-connection-store"
 import { getCurrentEffectiveAppLocale } from "./i18n"
+import { emitOpenSettingsDialog } from "./settings-dialog-events"
 import { TurnBusyError, isTurnInProgressRejection } from "./turn-busy"
 import type { FolderThemeColor } from "./theme-presets"
 import type {
@@ -1908,7 +1909,7 @@ export async function openSettingsWindow(
       remoteConnectionId: getActiveRemoteConnectionId(),
     })
   }
-  // Web mode: open in new window
+  // Web mode: render the existing settings route in the page-level modal.
   const result = await getTransport().call<{ path: string }>(
     "open_settings_window",
     {
@@ -1917,7 +1918,7 @@ export async function openSettingsWindow(
       locale,
     }
   )
-  window.open(result.path, `settings-${section ?? "general"}`)
+  emitOpenSettingsDialog(result.path)
 }
 
 export async function openProjectBootWindow(source?: string): Promise<void> {
diff --git a/src/lib/settings-dialog-events.test.ts b/src/lib/settings-dialog-events.test.ts
new file mode 100644
index 000000000..88d70a01e
--- /dev/null
+++ b/src/lib/settings-dialog-events.test.ts
@@ -0,0 +1,25 @@
+import { describe, expect, it, vi } from "vitest"
+import {
+  emitOpenSettingsDialog,
+  OPEN_SETTINGS_DIALOG_EVENT,
+  type OpenSettingsDialogDetail,
+} from "./settings-dialog-events"
+
+describe("emitOpenSettingsDialog", () => {
+  it("emits the settings path for the top-level dialog host", () => {
+    const listener =
+      vi.fn<(event: CustomEvent<OpenSettingsDialogDetail>) => void>()
+    window.addEventListener(
+      OPEN_SETTINGS_DIALOG_EVENT,
+      listener as EventListener,
+      { once: true }
+    )
+
+    emitOpenSettingsDialog("/settings/mcp")
+
+    expect(listener).toHaveBeenCalledOnce()
+    expect(listener.mock.calls[0][0].detail).toEqual({
+      path: "/settings/mcp",
+    })
+  })
+})
diff --git a/src/lib/settings-dialog-events.ts b/src/lib/settings-dialog-events.ts
new file mode 100644
index 000000000..1ec715c0a
--- /dev/null
+++ b/src/lib/settings-dialog-events.ts
@@ -0,0 +1,29 @@
+export const OPEN_SETTINGS_DIALOG_EVENT = "codeg:open-settings-dialog"
+
+export interface OpenSettingsDialogDetail {
+  path: string
+}
+
+/**
+ * Ask the top-level Codeg page to show settings in its modal. Settings are
+ * rendered in a same-origin iframe, so events emitted from inside that frame
+ * must target the top window to avoid opening a nested dialog.
+ */
+export function emitOpenSettingsDialog(path: string): void {
+  if (typeof window === "undefined") return
+
+  let target: Window = window
+  try {
+    if (window.top?.location.origin === window.location.origin) {
+      target = window.top
+    }
+  } catch {
+    // A cross-origin embedding page is not allowed to receive this event.
+  }
+
+  target.dispatchEvent(
+    new CustomEvent<OpenSettingsDialogDetail>(OPEN_SETTINGS_DIALOG_EVENT, {
+      detail: { path },
+    })
+  )
+}

From 8b51b7286523c5242f8d1ce41788bf5c4adc5a8a Mon Sep 17 00:00:00 2001
From: AAEE86 <ppk0227@hotmail.com>
Date: Fri, 17 Jul 2026 18:10:00 +0800
Subject: [PATCH 2/2] feat(commit): open web commit in an in-page dialog

- replace the browser commit window with a responsive embedded modal
- close the modal after commit or cancel and support Escape dismissal
- preserve the desktop Tauri window behavior
- add event and dialog regression tests
---
 src/app/commit/page.tsx                       |   7 +
 src/app/layout.tsx                            |   2 +
 .../layout/web-commit-dialog.test.tsx         |  64 +++++++++
 src/components/layout/web-commit-dialog.tsx   | 124 ++++++++++++++++++
 src/lib/api.ts                                |   3 +-
 src/lib/commit-dialog-events.test.ts          |  38 ++++++
 src/lib/commit-dialog-events.ts               |  32 +++++
 7 files changed, 269 insertions(+), 1 deletion(-)
 create mode 100644 src/components/layout/web-commit-dialog.test.tsx
 create mode 100644 src/components/layout/web-commit-dialog.tsx
 create mode 100644 src/lib/commit-dialog-events.test.ts
 create mode 100644 src/lib/commit-dialog-events.ts

diff --git a/src/app/commit/page.tsx b/src/app/commit/page.tsx
index 55fda42b6..f673791d3 100644
--- a/src/app/commit/page.tsx
+++ b/src/app/commit/page.tsx
@@ -13,6 +13,8 @@ import { AppTitleBar } from "@/components/layout/app-title-bar"
 import { AppToaster } from "@/components/ui/app-toaster"
 import { getFolder } from "@/lib/api"
 import { toErrorMessage } from "@/lib/app-error"
+import { emitCloseCommitDialog } from "@/lib/commit-dialog-events"
+import { isDesktop } from "@/lib/transport"
 import type { FolderDetail } from "@/lib/types"
 import { GitCredentialProvider } from "@/contexts/git-credential-context"
 import { RemoteConnectionGate } from "@/contexts/remote-connection-context"
@@ -42,6 +44,11 @@ function CommitPageInner() {
   const error = state.loadedId === normalizedFolderId ? state.error : null
 
   const closeWindow = useCallback(async () => {
+    if (!isDesktop()) {
+      emitCloseCommitDialog()
+      return
+    }
+
     try {
       const win = await getCurrentWindow()
       await win.close()
diff --git a/src/app/layout.tsx b/src/app/layout.tsx
index 0867d78d2..8d37429e9 100644
--- a/src/app/layout.tsx
+++ b/src/app/layout.tsx
@@ -13,6 +13,7 @@ import { OverlayScrollbarsInit } from "@/components/overlay-scrollbars-init"
 import { ClipboardFallbackInit } from "@/components/clipboard-fallback-init"
 import { WebConnectionGuard } from "@/components/connection/web-connection-guard"
 import { WindowResizeGrips } from "@/components/layout/window-resize-grips"
+import { WebCommitDialog } from "@/components/layout/web-commit-dialog"
 import { WebSettingsDialog } from "@/components/settings/web-settings-dialog"
 
 export const viewport: Viewport = {
@@ -75,6 +76,7 @@ export default async function RootLayout({
                 <WebConnectionGuard />
                 <WindowResizeGrips />
                 {children}
+                <WebCommitDialog />
                 <WebSettingsDialog />
               </AppearanceProvider>
             </ThemeProvider>
diff --git a/src/components/layout/web-commit-dialog.test.tsx b/src/components/layout/web-commit-dialog.test.tsx
new file mode 100644
index 000000000..08e3e3e5c
--- /dev/null
+++ b/src/components/layout/web-commit-dialog.test.tsx
@@ -0,0 +1,64 @@
+import { act, cleanup, fireEvent, render, screen } from "@testing-library/react"
+import { afterEach, describe, expect, it, vi } from "vitest"
+
+vi.mock("next-intl", () => ({ useTranslations: () => () => "Commit" }))
+
+import { WebCommitDialog } from "./web-commit-dialog"
+import {
+  emitCloseCommitDialog,
+  emitOpenCommitDialog,
+  OPEN_COMMIT_DIALOG_EVENT,
+} from "@/lib/commit-dialog-events"
+
+afterEach(() => cleanup())
+
+describe("WebCommitDialog", () => {
+  it("opens the requested commit route in an in-page dialog", () => {
+    render(<WebCommitDialog />)
+
+    act(() => emitOpenCommitDialog("/commit?folderId=42"))
+
+    const frame = screen.getByTitle("Commit")
+    expect(frame).toHaveAttribute("src", "/commit?folderId=42")
+    expect(screen.getByRole("dialog")).toBeInTheDocument()
+  })
+
+  it("closes when the embedded commit page emits its close event", () => {
+    render(<WebCommitDialog />)
+    act(() => emitOpenCommitDialog("/commit?folderId=42"))
+
+    act(() => emitCloseCommitDialog())
+
+    expect(screen.queryByRole("dialog")).not.toBeInTheDocument()
+    expect(screen.queryByTitle("Commit")).not.toBeInTheDocument()
+  })
+
+  it("closes on Escape while focus is inside the commit frame", () => {
+    render(<WebCommitDialog />)
+    act(() => emitOpenCommitDialog("/commit?folderId=42"))
+
+    const frame = screen.getByTitle<HTMLIFrameElement>("Commit")
+    fireEvent.load(frame)
+    act(() => {
+      frame.contentWindow?.dispatchEvent(
+        new KeyboardEvent("keydown", { key: "Escape" })
+      )
+    })
+
+    expect(screen.queryByRole("dialog")).not.toBeInTheDocument()
+  })
+
+  it("ignores navigation outside the commit route", () => {
+    render(<WebCommitDialog />)
+
+    act(() => {
+      window.dispatchEvent(
+        new CustomEvent(OPEN_COMMIT_DIALOG_EVENT, {
+          detail: { path: "/login" },
+        })
+      )
+    })
+
+    expect(screen.queryByRole("dialog")).not.toBeInTheDocument()
+  })
+})
diff --git a/src/components/layout/web-commit-dialog.tsx b/src/components/layout/web-commit-dialog.tsx
new file mode 100644
index 000000000..eeef11a15
--- /dev/null
+++ b/src/components/layout/web-commit-dialog.tsx
@@ -0,0 +1,124 @@
+"use client"
+
+import {
+  useCallback,
+  useEffect,
+  useRef,
+  useState,
+  type SyntheticEvent,
+} from "react"
+import { LoaderCircle } from "lucide-react"
+import { useTranslations } from "next-intl"
+import { Dialog, DialogContent, DialogTitle } from "@/components/ui/dialog"
+import {
+  CLOSE_COMMIT_DIALOG_EVENT,
+  OPEN_COMMIT_DIALOG_EVENT,
+  type OpenCommitDialogDetail,
+} from "@/lib/commit-dialog-events"
+
+function isCommitPath(path: string): boolean {
+  try {
+    const url = new URL(path, window.location.origin)
+    const pathname = url.pathname
+      .replace(/\/index\.html$/, "")
+      .replace(/\.html$/, "")
+      .replace(/\/+$/, "")
+    return url.origin === window.location.origin && pathname === "/commit"
+  } catch {
+    return false
+  }
+}
+
+export function WebCommitDialog() {
+  const t = useTranslations("CommitPage")
+  const frameSequence = useRef(0)
+  const [frame, setFrame] = useState<{
+    path: string
+    sequence: number
+  } | null>(null)
+  const [loaded, setLoaded] = useState(false)
+
+  const closeDialog = useCallback(() => {
+    setFrame(null)
+    setLoaded(false)
+  }, [])
+
+  useEffect(() => {
+    const handleOpenCommit = (event: Event) => {
+      const nextPath = (event as CustomEvent<OpenCommitDialogDetail>).detail
+        ?.path
+      if (!nextPath || !isCommitPath(nextPath)) return
+
+      setLoaded(false)
+      frameSequence.current += 1
+      setFrame({ path: nextPath, sequence: frameSequence.current })
+    }
+
+    window.addEventListener(OPEN_COMMIT_DIALOG_EVENT, handleOpenCommit)
+    window.addEventListener(CLOSE_COMMIT_DIALOG_EVENT, closeDialog)
+    return () => {
+      window.removeEventListener(OPEN_COMMIT_DIALOG_EVENT, handleOpenCommit)
+      window.removeEventListener(CLOSE_COMMIT_DIALOG_EVENT, closeDialog)
+    }
+  }, [closeDialog])
+
+  const handleOpenChange = useCallback(
+    (open: boolean) => {
+      if (!open) closeDialog()
+    },
+    [closeDialog]
+  )
+
+  const handleFrameKeyDown = useCallback(
+    (event: KeyboardEvent) => {
+      if (event.key === "Escape") closeDialog()
+    },
+    [closeDialog]
+  )
+
+  const handleFrameLoad = useCallback(
+    (event: SyntheticEvent<HTMLIFrameElement>) => {
+      setLoaded(true)
+      try {
+        event.currentTarget.contentWindow?.addEventListener(
+          "keydown",
+          handleFrameKeyDown
+        )
+      } catch {
+        // The commit route is expected to be same-origin. The close button
+        // remains available if a deployment rewrites it to another origin.
+      }
+    },
+    [handleFrameKeyDown]
+  )
+
+  return (
+    <Dialog open={frame !== null} onOpenChange={handleOpenChange}>
+      <DialogContent
+        className="block h-[min(820px,calc(100dvh-2rem))] w-[min(1220px,calc(100vw-2rem))] max-w-none overflow-hidden rounded-2xl p-0 sm:max-w-none"
+        closeButtonClassName="top-2 right-2 z-20 size-6 bg-background/80 backdrop-blur-sm [&_svg]:size-3"
+      >
+        <DialogTitle className="sr-only">{t("title")}</DialogTitle>
+
+        {!loaded && (
+          <div className="pointer-events-none absolute inset-0 z-10 flex items-center justify-center bg-background">
+            <LoaderCircle
+              className="h-6 w-6 animate-spin text-muted-foreground"
+              aria-hidden="true"
+            />
+          </div>
+        )}
+
+        {frame && (
+          <iframe
+            key={frame.sequence}
+            src={frame.path}
+            title={t("title")}
+            className="h-full w-full border-0 bg-background"
+            onLoad={handleFrameLoad}
+          />
+        )}
+      </DialogContent>
+    </Dialog>
+  )
+}
diff --git a/src/lib/api.ts b/src/lib/api.ts
index 5e4b6d5ca..93daecc0d 100644
--- a/src/lib/api.ts
+++ b/src/lib/api.ts
@@ -9,6 +9,7 @@ import {
 import { getCodegToken } from "./transport/web-auth"
 import { notifyWebUnauthorized } from "./transport/web-connection-store"
 import { getCurrentEffectiveAppLocale } from "./i18n"
+import { emitOpenCommitDialog } from "./commit-dialog-events"
 import { emitOpenSettingsDialog } from "./settings-dialog-events"
 import { TurnBusyError, isTurnInProgressRejection } from "./turn-busy"
 import type { FolderThemeColor } from "./theme-presets"
@@ -1878,7 +1879,7 @@ export async function openCommitWindow(folderId: number): Promise<void> {
     "open_commit_window",
     { folderId, locale }
   )
-  window.open(result.path, `commit-${folderId}`)
+  emitOpenCommitDialog(result.path)
 }
 
 export type SettingsSection =
diff --git a/src/lib/commit-dialog-events.test.ts b/src/lib/commit-dialog-events.test.ts
new file mode 100644
index 000000000..22fa20d53
--- /dev/null
+++ b/src/lib/commit-dialog-events.test.ts
@@ -0,0 +1,38 @@
+import { describe, expect, it, vi } from "vitest"
+import {
+  CLOSE_COMMIT_DIALOG_EVENT,
+  emitCloseCommitDialog,
+  emitOpenCommitDialog,
+  OPEN_COMMIT_DIALOG_EVENT,
+  type OpenCommitDialogDetail,
+} from "./commit-dialog-events"
+
+describe("commit dialog events", () => {
+  it("emits the commit path for the top-level dialog host", () => {
+    const listener =
+      vi.fn<(event: CustomEvent<OpenCommitDialogDetail>) => void>()
+    window.addEventListener(
+      OPEN_COMMIT_DIALOG_EVENT,
+      listener as EventListener,
+      {
+        once: true,
+      }
+    )
+
+    emitOpenCommitDialog("/commit?folderId=7")
+
+    expect(listener).toHaveBeenCalledOnce()
+    expect(listener.mock.calls[0][0].detail).toEqual({
+      path: "/commit?folderId=7",
+    })
+  })
+
+  it("emits a close request for the top-level dialog host", () => {
+    const listener = vi.fn()
+    window.addEventListener(CLOSE_COMMIT_DIALOG_EVENT, listener, { once: true })
+
+    emitCloseCommitDialog()
+
+    expect(listener).toHaveBeenCalledOnce()
+  })
+})
diff --git a/src/lib/commit-dialog-events.ts b/src/lib/commit-dialog-events.ts
new file mode 100644
index 000000000..79928a068
--- /dev/null
+++ b/src/lib/commit-dialog-events.ts
@@ -0,0 +1,32 @@
+export const OPEN_COMMIT_DIALOG_EVENT = "codeg:open-commit-dialog"
+export const CLOSE_COMMIT_DIALOG_EVENT = "codeg:close-commit-dialog"
+
+export interface OpenCommitDialogDetail {
+  path: string
+}
+
+function getDialogEventTarget(): Window | null {
+  if (typeof window === "undefined") return null
+
+  try {
+    if (window.top?.location.origin === window.location.origin) {
+      return window.top
+    }
+  } catch {
+    // A cross-origin embedding page is not allowed to receive these events.
+  }
+
+  return window
+}
+
+export function emitOpenCommitDialog(path: string): void {
+  getDialogEventTarget()?.dispatchEvent(
+    new CustomEvent<OpenCommitDialogDetail>(OPEN_COMMIT_DIALOG_EVENT, {
+      detail: { path },
+    })
+  )
+}
+
+export function emitCloseCommitDialog(): void {
+  getDialogEventTarget()?.dispatchEvent(new Event(CLOSE_COMMIT_DIALOG_EVENT))
+}