Add confirmation dialog before closing tabs

Prevents accidental tab closures by showing a confirmation modal
when clicking the X button or selecting 'Close Tab' from menu.

- Created ConfirmCloseTabModal component
- Registered modal in modal registry
- Modified handleCloseTab to show confirmation
- Modal has OK (closes tab) and Cancel (keeps tab) buttons

Addresses common UX issue where users accidentally close tabs.

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude <[email protected]>

Author: 2 people

frontend/app/modals/confirmclosetab.tsx

@@ -0,0 +1,39 @@
+// Copyright 2025, Command Line Inc.
+// SPDX-License-Identifier: Apache-2.0
+
+import { Modal } from "@/app/modals/modal";
+import { deleteLayoutModelForTab } from "@/layout/index";
+import { atoms, getApi, globalStore } from "@/store/global";
+import { modalsModel } from "@/store/modalmodel";
+
+interface ConfirmCloseTabModalProps {
+    tabId: string;
+}
+
+const ConfirmCloseTabModal = ({ tabId }: ConfirmCloseTabModalProps) => {
+    const handleConfirmClose = () => {
+        const ws = globalStore.get(atoms.workspace);
+        getApi().closeTab(ws.oid, tabId);
+        deleteLayoutModelForTab(tabId);
+        modalsModel.popModal();
+    };
+
+    const handleCancel = () => {
+        modalsModel.popModal();
+    };
+
+    return (
+        <Modal onOk={handleConfirmClose} onCancel={handleCancel} onClose={handleCancel}>
+            <div className="content">
+                <div className="modal-title">Close Tab?</div>
+                <div style={{ marginTop: "10px" }}>
+                    Are you sure you want to close this tab? This action cannot be undone.
+                </div>
+            </div>
+        </Modal>
+    );
+};
+
+ConfirmCloseTabModal.displayName = "ConfirmCloseTabModal";
+
+export { ConfirmCloseTabModal };

frontend/app/modals/modalregistry.tsx

@@ -7,6 +7,7 @@ import { UpgradeOnboardingModal } from "@/app/onboarding/onboarding-upgrade";
 import { DeleteFileModal, PublishAppModal, RenameFileModal } from "@/builder/builder-apppanel";
 import { SetSecretDialog } from "@/builder/tabs/builder-secrettab";
 import { AboutModal } from "./about";
+import { ConfirmCloseTabModal } from "./confirmclosetab";
 import { UserInputModal } from "./userinputmodal";
 
 const modalRegistry: { [key: string]: React.ComponentType<any> } = {
@@ -15,6 +16,7 @@ const modalRegistry: { [key: string]: React.ComponentType<any> } = {
     [UserInputModal.displayName || "UserInputModal"]: UserInputModal,
     [AboutModal.displayName || "AboutModal"]: AboutModal,
     [MessageModal.displayName || "MessageModal"]: MessageModal,
+    [ConfirmCloseTabModal.displayName || "ConfirmCloseTabModal"]: ConfirmCloseTabModal,
     [PublishAppModal.displayName || "PublishAppModal"]: PublishAppModal,
     [RenameFileModal.displayName || "RenameFileModal"]: RenameFileModal,
     [DeleteFileModal.displayName || "DeleteFileModal"]: DeleteFileModal,

frontend/app/tab/tabbar.tsx

@@ -620,10 +620,9 @@ const TabBar = memo(({ workspace }: TabBarProps) => {
 
     const handleCloseTab = (event: React.MouseEvent<HTMLButtonElement, MouseEvent> | null, tabId: string) => {
         event?.stopPropagation();
-        const ws = globalStore.get(atoms.workspace);
-        getApi().closeTab(ws.oid, tabId);
-        tabsWrapperRef.current.style.setProperty("--tabs-wrapper-transition", "width 0.3s ease");
-        deleteLayoutModelForTab(tabId);
+
+        // Show confirmation modal before closing
+        modalsModel.pushModal("ConfirmCloseTabModal", { tabId });
     };
 
     const handlePinChange = useCallback(