Merge branch 'delete-repo'

src/client/components/Dashboard.tsx

@@ -14,7 +14,6 @@ import {
 import { AppDetail } from './AppDetail'
 import { AppSelector } from './AppSelector'
 import { DashboardLanding } from './DashboardLanding'
-import { Modal } from './modal'
 import { SettingsPage } from './SettingsPage'
 import { Sidebar } from './Sidebar'
 
@@ -55,7 +54,6 @@ export function Dashboard({ render }: { render: () => void }) {
       <Styles />
       {!isNarrow && <Sidebar render={render} />}
       <MainContent render={render} />
-      <Modal />
     </Layout>
   )
 }

src/client/components/modal.tsx

@@ -1,19 +1,21 @@
 import type { Child } from 'hono/jsx'
+import { render } from 'hono/jsx/dom'
 import { define } from '@because/forge'
 import { theme } from '../themes'
 
 let modalTitle: string | null = null
 let modalContent: (() => Child) | null = null
-let renderFn: (() => void) | null = null
 
-export const initModal = (render: () => void) => {
-  renderFn = render
+const root = document.getElementById('modal')!
+
+const renderModal = () => {
+  render(<Modal />, root)
 }
 
 export const openModal = (title: string, content: () => Child) => {
   modalTitle = title
   modalContent = content
-  renderFn?.()
+  renderModal()
   requestAnimationFrame(() => {
     document.querySelector<HTMLInputElement>('[data-modal-body] input')?.focus()
   })
@@ -22,12 +24,10 @@ export const openModal = (title: string, content: () => Child) => {
 export const closeModal = () => {
   modalTitle = null
   modalContent = null
-  renderFn?.()
+  renderModal()
 }
 
-export const rerenderModal = () => {
-  renderFn?.()
-}
+export { renderModal }
 
 // ESC key handler
 document.addEventListener('keydown', (e) => {

src/client/index.tsx

@@ -1,6 +1,5 @@
 import { render as renderApp } from 'hono/jsx/dom'
 import { Dashboard } from './components'
-import { initModal } from './components/modal'
 import { initRouter, navigate } from './router'
 import { apps, dashboardTab, getSelectedTab, selectedApp, setApps, setIsNarrow } from './state'
 import { initToolIframes, updateToolIframes } from './tool-iframes'
@@ -21,7 +20,6 @@ const render = () => {
 }
 
 // Initialize render functions
-initModal(render)
 initUpdate(render)
 initToolIframes()
 

src/client/modals/DeleteApp.tsx

@@ -1,5 +1,5 @@
 import type { App } from '../../shared/types'
-import { closeModal, openModal, rerenderModal } from '../components/modal'
+import { closeModal, openModal, renderModal } from '../components/modal'
 import { navigate } from '../router'
 import { selectedApp } from '../state'
 import { Button, Form, FormActions, FormError, FormField, FormInput, FormLabel } from '../styles'
@@ -17,13 +17,13 @@ async function deleteApp(input: HTMLInputElement) {
 
   if (value !== expected) {
     deleteAppError = `Type "${expected}" to confirm`
-    rerenderModal()
+    renderModal()
     return
   }
 
   deleteAppDeleting = true
   deleteAppError = ''
-  rerenderModal()
+  renderModal()
 
   try {
     const res = await fetch(`/api/sync/apps/${deleteAppTarget.name}`, {
@@ -41,7 +41,7 @@ async function deleteApp(input: HTMLInputElement) {
   } catch (err) {
     deleteAppError = err instanceof Error ? err.message : 'Failed to delete app'
     deleteAppDeleting = false
-    rerenderModal()
+    renderModal()
   }
 }
 

src/client/modals/NewApp.tsx

@@ -1,4 +1,4 @@
-import { closeModal, openModal, rerenderModal } from '../components/modal'
+import { closeModal, openModal, renderModal } from '../components/modal'
 import { navigate } from '../router'
 import { apps } from '../state'
 import { Button, Form, FormActions, FormCheckbox, FormCheckboxField, FormCheckboxLabel, FormError, FormField, FormInput, FormLabel, FormSelect } from '../styles'
@@ -16,25 +16,25 @@ async function createNewApp() {
 
   if (!name) {
     newAppError = 'App name is required'
-    rerenderModal()
+    renderModal()
     return
   }
 
   if (!/^[a-z][a-z0-9-]*$/.test(name)) {
     newAppError = 'Name must start with a letter and contain only lowercase letters, numbers, and hyphens'
-    rerenderModal()
+    renderModal()
     return
   }
 
   if (apps.some(a => a.name === name)) {
     newAppError = 'An app with this name already exists'
-    rerenderModal()
+    renderModal()
     return
   }
 
   newAppCreating = true
   newAppError = ''
-  rerenderModal()
+  renderModal()
 
   try {
     const res = await fetch('/api/apps', {
@@ -55,7 +55,7 @@ async function createNewApp() {
   } catch (err) {
     newAppError = err instanceof Error ? err.message : 'Failed to create app'
     newAppCreating = false
-    rerenderModal()
+    renderModal()
   }
 }
 
@@ -105,7 +105,7 @@ export function openNewAppModal() {
           checked={newAppTool}
           onChange={(e: Event) => {
             newAppTool = (e.target as HTMLInputElement).checked
-            rerenderModal()
+            renderModal()
           }}
         />
         <FormCheckboxLabel for="app-tool">Tool</FormCheckboxLabel>

src/client/modals/RenameApp.tsx

@@ -1,5 +1,5 @@
 import type { App } from '../../shared/types'
-import { closeModal, openModal, rerenderModal } from '../components/modal'
+import { closeModal, openModal, renderModal } from '../components/modal'
 import { navigate } from '../router'
 import { apps } from '../state'
 import { Button, Form, FormActions, FormError, FormField, FormInput, FormLabel } from '../styles'
@@ -15,13 +15,13 @@ async function doRenameApp(input: HTMLInputElement) {
 
   if (!newName) {
     renameAppError = 'App name is required'
-    rerenderModal()
+    renderModal()
     return
   }
 
   if (!/^[a-z][a-z0-9-]*$/.test(newName)) {
     renameAppError = 'Name must start with a letter and contain only lowercase letters, numbers, and hyphens'
-    rerenderModal()
+    renderModal()
     return
   }
 
@@ -32,13 +32,13 @@ async function doRenameApp(input: HTMLInputElement) {
 
   if (apps.some(a => a.name === newName)) {
     renameAppError = 'An app with this name already exists'
-    rerenderModal()
+    renderModal()
     return
   }
 
   renameAppRenaming = true
   renameAppError = ''
-  rerenderModal()
+  renderModal()
 
   try {
     const res = await fetch(`/api/apps/${renameAppTarget.name}/rename`, {
@@ -65,7 +65,7 @@ async function doRenameApp(input: HTMLInputElement) {
   } catch (err) {
     renameAppError = err instanceof Error ? err.message : 'Failed to rename app'
     renameAppRenaming = false
-    rerenderModal()
+    renderModal()
   }
 }
 

src/server/shell.tsx

@@ -9,6 +9,7 @@ export const Shell = () => (
     </head>
     <body>
       <div id="app"></div>
+      <div id="modal"></div>
       <div id="tool-iframes"></div>
       <script type="module" src="/client/index.js"></script>
     </body>

src/tools/events.ts

@@ -11,61 +11,37 @@ interface Listener {
 
 const _listeners = new Set<Listener>()
 
-let _abort: AbortController | undefined
-let _connected = false
+let _source: EventSource | undefined
 
 function ensureConnection() {
-  if (_connected) return
-  _connected = true
+  if (_source) return
   const url = `${process.env.TOES_URL}/api/events/stream`
-  _abort = new AbortController()
+  _source = new EventSource(url)
 
-  fetch(url, { signal: _abort.signal })
-    .then(async (res) => {
-      const reader = res.body!.getReader()
-      const decoder = new TextDecoder()
-      let buf = ''
+  _source.onerror = () => {
+    if (_source?.readyState === EventSource.CLOSED) {
+      console.warn('[toes] Event stream closed unexpectedly')
+      _source = undefined
+    }
+  }
 
-      while (true) {
-        const { done, value } = await reader.read()
-        if (done) break
-        buf += decoder.decode(value, { stream: true })
-
-        const lines = buf.split('\n')
-        buf = lines.pop()!
-        for (const line of lines) {
-          if (!line.startsWith('data: ')) continue
-          const payload = line.slice(6)
-          if (!payload) continue
-          try {
-            const event: ToesEvent = JSON.parse(payload)
-            _listeners.forEach(l => {
-              if (l.types.includes(event.type)) l.callback(event)
-            })
-          } catch (e) {
-            console.warn('[toes] Failed to parse event:', e)
-          }
-        }
-      }
-    })
-    .catch((e) => {
-      if (e.name === 'AbortError') return
-      console.warn('[toes] Event stream error, reconnecting...', e.message)
-    })
-    .finally(() => {
-      _connected = false
-      if (_listeners.size > 0) {
-        setTimeout(ensureConnection, 1000)
-      }
-    })
+  _source.onmessage = (e) => {
+    try {
+      const event: ToesEvent = JSON.parse(e.data)
+      _listeners.forEach(l => {
+        if (l.types.includes(event.type)) l.callback(event)
+      })
+    } catch {
+      // Ignore malformed events
+    }
+  }
 }
 
 function closeConnection() {
-  if (_abort) {
-    _abort.abort()
-    _abort = undefined
+  if (_source) {
+    _source.close()
+    _source = undefined
   }
-  _connected = false
 }
 
 export function on(type: ToesEventType | ToesEventType[], callback: EventCallback): () => void {