tui: refactor dialog system to use single active dialog instead of stack

10 files changed, 28 insertions, 32 deletions

diff --git a/packages/desktop/src/components/dialog-connect-provider.tsx b/packages/desktop/src/components/dialog-connect-provider.tsx
index 4660e1398..0d6737815 100644
--- a/packages/desktop/src/components/dialog-connect-provider.tsx
+++ b/packages/desktop/src/components/dialog-connect-provider.tsx
@@ -108,20 +108,18 @@ export function DialogConnectProvider(props: { provider: string }) {
 
   async function complete() {
     await globalSDK.client.global.dispose()
-    setTimeout(() => {
-      showToast({
-        variant: "success",
-        icon: "circle-check",
-        title: `${provider().name} connected`,
-        description: `${provider().name} models are now available to use.`,
-      })
-      dialog.replace(() => <DialogSelectModel provider={props.provider} />)
-    }, 1000)
+    dialog.close()
+    showToast({
+      variant: "success",
+      icon: "circle-check",
+      title: `${provider().name} connected`,
+      description: `${provider().name} models are now available to use.`,
+    })
   }
 
   function goBack() {
     if (methods().length === 1) {
-      dialog.replace(() => <DialogSelectProvider />)
+      dialog.show(() => <DialogSelectProvider />)
       return
     }
     if (store.authorization) {
@@ -133,7 +131,7 @@ export function DialogConnectProvider(props: { provider: string }) {
       setStore("methodIndex", undefined)
       return
     }
-    dialog.replace(() => <DialogSelectProvider />)
+    dialog.show(() => <DialogSelectProvider />)
   }
 
   return (
@@ -352,7 +350,7 @@ export function DialogConnectProvider(props: { provider: string }) {
                       })
                       if (result.error) {
                         // TODO: show error
-                        dialog.clear()
+                        dialog.close()
                         return
                       }
                       await complete()
diff --git a/packages/desktop/src/components/dialog-select-file.tsx b/packages/desktop/src/components/dialog-select-file.tsx
index b719e15d2..61c518719 100644
--- a/packages/desktop/src/components/dialog-select-file.tsx
+++ b/packages/desktop/src/components/dialog-select-file.tsx
@@ -27,7 +27,7 @@ export function DialogSelectFile() {
           if (path) {
             tabs().open("file://" + path)
           }
-          dialog.clear()
+          dialog.close()
         }}
       >
         {(i) => (
diff --git a/packages/desktop/src/components/dialog-select-model-unpaid.tsx b/packages/desktop/src/components/dialog-select-model-unpaid.tsx
index 7cdb24915..77e493d3c 100644
--- a/packages/desktop/src/components/dialog-select-model-unpaid.tsx
+++ b/packages/desktop/src/components/dialog-select-model-unpaid.tsx
@@ -42,7 +42,7 @@ export const DialogSelectModelUnpaid: Component = () => {
             local.model.set(x ? { modelID: x.id, providerID: x.provider.id } : undefined, {
               recent: true,
             })
-            dialog.clear()
+            dialog.close()
           }}
         >
           {(i) => (
@@ -75,7 +75,7 @@ export const DialogSelectModelUnpaid: Component = () => {
                 }}
                 onSelect={(x) => {
                   if (!x) return
-                  dialog.replace(() => <DialogConnectProvider provider={x.id} />)
+                  dialog.show(() => <DialogConnectProvider provider={x.id} />)
                 }}
               >
                 {(i) => (
@@ -105,7 +105,7 @@ export const DialogSelectModelUnpaid: Component = () => {
                 class="w-full justify-start px-[11px] py-3.5 gap-4.5 text-14-medium"
                 icon="dot-grid"
                 onClick={() => {
-                  dialog.replace(() => <DialogSelectProvider />)
+                  dialog.show(() => <DialogSelectProvider />)
                 }}
               >
                 View all providers
diff --git a/packages/desktop/src/components/dialog-select-model.tsx b/packages/desktop/src/components/dialog-select-model.tsx
index f0b2e6db9..622ab15fb 100644
--- a/packages/desktop/src/components/dialog-select-model.tsx
+++ b/packages/desktop/src/components/dialog-select-model.tsx
@@ -28,7 +28,7 @@ export const DialogSelectModel: Component<{ provider?: string }> = (props) => {
           class="h-7 -my-1 text-14-medium"
           icon="plus-small"
           tabIndex={-1}
-          onClick={() => dialog.replace(() => <DialogSelectProvider />)}
+          onClick={() => dialog.show(() => <DialogSelectProvider />)}
         >
           Connect provider
         </Button>
@@ -57,7 +57,7 @@ export const DialogSelectModel: Component<{ provider?: string }> = (props) => {
           local.model.set(x ? { modelID: x.id, providerID: x.provider.id } : undefined, {
             recent: true,
           })
-          dialog.clear()
+          dialog.close()
         }}
       >
         {(i) => (
@@ -75,7 +75,7 @@ export const DialogSelectModel: Component<{ provider?: string }> = (props) => {
       <Button
         variant="ghost"
         class="ml-3 mt-5 mb-6 text-text-base self-start"
-        onClick={() => dialog.replace(() => <DialogManageModels />)}
+        onClick={() => dialog.show(() => <DialogManageModels />)}
       >
         Manage models
       </Button>
diff --git a/packages/desktop/src/components/dialog-select-provider.tsx b/packages/desktop/src/components/dialog-select-provider.tsx
index 8da10b1d5..52fac7073 100644
--- a/packages/desktop/src/components/dialog-select-provider.tsx
+++ b/packages/desktop/src/components/dialog-select-provider.tsx
@@ -34,7 +34,7 @@ export const DialogSelectProvider: Component = () => {
         }}
         onSelect={(x) => {
           if (!x) return
-          dialog.replace(() => <DialogConnectProvider provider={x.id} />)
+          dialog.show(() => <DialogConnectProvider provider={x.id} />)
         }}
       >
         {(i) => (
diff --git a/packages/desktop/src/components/prompt-input.tsx b/packages/desktop/src/components/prompt-input.tsx
index f2821c3c7..6e147242d 100644
--- a/packages/desktop/src/components/prompt-input.tsx
+++ b/packages/desktop/src/components/prompt-input.tsx
@@ -864,9 +864,7 @@ export const PromptInput: Component<PromptInputProps> = (props) => {
               as="div"
               variant="ghost"
               onClick={() =>
-                dialog.replace(() =>
-                  providers.paid().length > 0 ? <DialogSelectModel /> : <DialogSelectModelUnpaid />,
-                )
+                dialog.show(() => (providers.paid().length > 0 ? <DialogSelectModel /> : <DialogSelectModelUnpaid />))
               }
             >
               {local.model.current()?.name ?? "Select model"}
diff --git a/packages/desktop/src/context/command.tsx b/packages/desktop/src/context/command.tsx
index d4ef8e166..8fd76ee21 100644
--- a/packages/desktop/src/context/command.tsx
+++ b/packages/desktop/src/context/command.tsx
@@ -128,7 +128,7 @@ function DialogCommand(props: { options: CommandOption[] }) {
         groupBy={(x) => x.category ?? ""}
         onSelect={(option) => {
           if (option) {
-            dialog.clear()
+            dialog.close()
             option.onSelect?.("palette")
           }
         }}
@@ -174,8 +174,8 @@ export const { use: useCommand, provider: CommandProvider } = createSimpleContex
     const suspended = () => suspendCount() > 0
 
     const showPalette = () => {
-      if (dialog.stack.length === 0) {
-        dialog.replace(() => <DialogCommand options={options().filter((x) => !x.disabled)} />)
+      if (!dialog.active) {
+        dialog.show(() => <DialogCommand options={options().filter((x) => !x.disabled)} />)
       }
     }
 
diff --git a/packages/desktop/src/context/notification.tsx b/packages/desktop/src/context/notification.tsx
index 045361630..ee15bc34a 100644
--- a/packages/desktop/src/context/notification.tsx
+++ b/packages/desktop/src/context/notification.tsx
@@ -59,7 +59,7 @@ export const { use: useNotification, provider: NotificationProvider } = createSi
         time: Date.now(),
         viewed: false,
       }
-      switch (event?.type) {
+      switch (event.type) {
         case "session.idle": {
           const sessionID = event.properties.sessionID
           const [syncStore] = globalSync.child(directory)
diff --git a/packages/desktop/src/pages/layout.tsx b/packages/desktop/src/pages/layout.tsx
index 2f0c6e050..27852967a 100644
--- a/packages/desktop/src/pages/layout.tsx
+++ b/packages/desktop/src/pages/layout.tsx
@@ -217,7 +217,7 @@ export default function Layout(props: ParentProps) {
   ])
 
   function connectProvider() {
-    dialog.replace(() => <DialogSelectProvider />)
+    dialog.show(() => <DialogSelectProvider />)
   }
 
   function navigateToProject(directory: string | undefined) {
diff --git a/packages/desktop/src/pages/session.tsx b/packages/desktop/src/pages/session.tsx
index 9167ef7b7..390872d36 100644
--- a/packages/desktop/src/pages/session.tsx
+++ b/packages/desktop/src/pages/session.tsx
@@ -176,7 +176,7 @@ export default function Page() {
       category: "File",
       keybind: "mod+p",
       slash: "open",
-      onSelect: () => dialog.replace(() => <DialogSelectFile />),
+      onSelect: () => dialog.show(() => <DialogSelectFile />),
     },
     // {
     //   id: "theme.toggle",
@@ -245,7 +245,7 @@ export default function Page() {
       category: "Model",
       keybind: "mod+'",
       slash: "model",
-      onSelect: () => dialog.replace(() => <DialogSelectModel />),
+      onSelect: () => dialog.show(() => <DialogSelectModel />),
     },
     {
       id: "agent.cycle",
@@ -320,7 +320,7 @@ export default function Page() {
 
   const handleKeyDown = (event: KeyboardEvent) => {
     if ((document.activeElement as HTMLElement)?.dataset?.component === "terminal") return
-    if (dialog.stack.length > 0) return
+    if (dialog.active) return
 
     if (event.key === "PageUp" || event.key === "PageDown") {
       const scrollContainer = document.querySelector('[data-slot="session-turn-content"]') as HTMLElement
@@ -613,7 +613,7 @@ export default function Page() {
                       icon="plus-small"
                       variant="ghost"
                       iconSize="large"
-                      onClick={() => dialog.replace(() => <DialogSelectFile />)}
+                      onClick={() => dialog.show(() => <DialogSelectFile />)}
                     />
                   </Tooltip>
                 </div>