src/client/components/AppSelector.tsx

@@ -2,6 +2,7 @@ import type { CSSProperties } from 'hono/jsx'
 import {
   apps,
   selectedApp,
+  setSelectedApp,
   setSidebarSection,
   sidebarSection,
 } from '../state'
@@ -16,12 +17,19 @@ import {
 interface AppSelectorProps {
   render: () => void
   onSelect?: () => void
+  onDashboard?: () => void
   collapsed?: boolean
   switcherStyle?: CSSProperties
   listStyle?: CSSProperties
 }
 
-export function AppSelector({ render, onSelect, collapsed, switcherStyle, listStyle }: AppSelectorProps) {
+export function AppSelector({ render, onSelect, onDashboard, collapsed, switcherStyle, listStyle }: AppSelectorProps) {
+  const selectApp = (name: string) => {
+    setSelectedApp(name)
+    onSelect?.()
+    render()
+  }
+
   const switchSection = (section: 'apps' | 'tools') => {
     setSidebarSection(section)
     render()
@@ -44,9 +52,9 @@ export function AppSelector({ render, onSelect, collapsed, switcherStyle, listSt
         </SectionSwitcher>
       )}
       <AppList style={listStyle}>
-        {collapsed && (
+        {collapsed && onDashboard && (
           <AppItem
-            href="/"
+            onClick={onDashboard}
             selected={!selectedApp ? true : undefined}
             style={{ justifyContent: 'center', padding: '10px 12px' }}
             title="Toes"
@@ -57,8 +65,7 @@ export function AppSelector({ render, onSelect, collapsed, switcherStyle, listSt
         {activeApps.map(app => (
           <AppItem
             key={app.name}
-            href={`/app/${app.name}`}
-            onClick={onSelect}
+            onClick={() => selectApp(app.name)}
             selected={app.name === selectedApp ? true : undefined}
             style={collapsed ? { justifyContent: 'center', padding: '10px 12px' } : undefined}
             title={collapsed ? app.name : undefined}

src/client/components/DashboardLanding.tsx

@@ -1,7 +1,6 @@
 import { useEffect } from 'hono/jsx'
 import { openAppSelectorModal } from '../modals'
-import { navigate } from '../router'
-import { dashboardTab, isNarrow } from '../state'
+import { dashboardTab, isNarrow, setCurrentView, setDashboardTab, setSelectedApp } from '../state'
 import {
   AppSelectorChevron,
   DashboardContainer,
@@ -26,11 +25,14 @@ export function DashboardLanding({ render }: { render: () => void }) {
   const narrow = isNarrow || undefined
 
   const openSettings = () => {
-    navigate('/settings')
+    setSelectedApp(null)
+    setCurrentView('settings')
+    render()
   }
 
   const switchTab = (tab: typeof dashboardTab) => {
-    navigate(tab === 'urls' ? '/' : `/${tab}`)
+    setDashboardTab(tab)
+    render()
     if (tab === 'logs') scrollLogsToBottom()
   }
 

src/client/components/Nav.tsx

@@ -1,6 +1,5 @@
 import type { App } from '../../shared/types'
-import { navigate } from '../router'
-import { apps, getSelectedTab } from '../state'
+import { apps, getSelectedTab, setSelectedTab } from '../state'
 import { Tab, TabBar } from '../styles'
 import { resetToolIframe } from '../tool-iframes'
 
@@ -13,7 +12,8 @@ export function Nav({ app, render }: { app: App; render: () => void }) {
       resetToolIframe(tab, app.name)
       return
     }
-    navigate(tab === 'overview' ? `/app/${app.name}` : `/app/${app.name}/${tab}`)
+    setSelectedTab(app.name, tab)
+    render()
   }
 
   // Find all tools

src/client/components/SettingsPage.tsx

@@ -1,6 +1,6 @@
 import { useEffect, useState } from 'hono/jsx'
 import { getWifiConfig, saveWifiConfig } from '../api'
-import { navigate } from '../router'
+import { setCurrentView } from '../state'
 import {
   Button,
   DashboardInstallCmd,
@@ -31,7 +31,8 @@ export function SettingsPage({ render }: { render: () => void }) {
   }, [])
 
   const goBack = () => {
-    navigate('/')
+    setCurrentView('dashboard')
+    render()
   }
 
   const handleSave = async (e: Event) => {

src/client/components/Sidebar.tsx

@@ -1,5 +1,7 @@
 import { openNewAppModal } from '../modals'
 import {
+  setCurrentView,
+  setSelectedApp,
   setSidebarCollapsed,
   sidebarCollapsed,
 } from '../state'
@@ -15,6 +17,12 @@ import {
 import { AppSelector } from './AppSelector'
 
 export function Sidebar({ render }: { render: () => void }) {
+  const goToDashboard = () => {
+    setSelectedApp(null)
+    setCurrentView('dashboard')
+    render()
+  }
+
   const toggleSidebar = () => {
     setSidebarCollapsed(!sidebarCollapsed)
     render()
@@ -32,7 +40,7 @@ export function Sidebar({ render }: { render: () => void }) {
         </div>
       ) : (
         <Logo>
-          <LogoLink href="/" title="Go to dashboard">
+          <LogoLink onClick={goToDashboard} title="Go to dashboard">
             🐾 Toes
           </LogoLink>
           <HamburgerButton onClick={toggleSidebar} title="Hide sidebar">
@@ -42,7 +50,7 @@ export function Sidebar({ render }: { render: () => void }) {
           </HamburgerButton>
         </Logo>
       )}
-      <AppSelector render={render} collapsed={sidebarCollapsed} />
+      <AppSelector render={render} collapsed={sidebarCollapsed} onDashboard={goToDashboard} />
       {!sidebarCollapsed && (
         <SidebarFooter>
           <NewAppButton onClick={openNewAppModal}>+ New App</NewAppButton>

src/client/components/Urls.tsx

@@ -1,6 +1,5 @@
 import { buildAppUrl } from '../../shared/urls'
-import { navigate } from '../router'
-import { apps } from '../state'
+import { apps, setSelectedApp } from '../state'
 import {
   EmptyState,
   Tile,
@@ -23,19 +22,20 @@ export function Urls({ render }: { render: () => void }) {
       {nonTools.map(app => {
         const url = buildAppUrl(app.name, location.origin)
         const running = app.state === 'running'
-        const appPage = `/app/${app.name}`
 
         const openAppPage = (e: MouseEvent) => {
           e.preventDefault()
           e.stopPropagation()
-          navigate(appPage)
+          setSelectedApp(app.name)
+          render()
         }
 
         return (
           <Tile
             key={app.name}
-            href={running ? url : appPage}
+            href={running ? url : '#'}
             target={running ? '_blank' : undefined}
+            onClick={running ? undefined : openAppPage}
           >
             <TileStatus state={app.state} onClick={openAppPage} />
             <TileIcon>{app.icon}</TileIcon>

src/client/index.tsx

@@ -1,8 +1,7 @@
 import { render as renderApp } from 'hono/jsx/dom'
 import { Dashboard } from './components'
+import { apps, getSelectedTab, selectedApp, setApps, setIsNarrow, setSelectedApp } from './state'
 import { initModal } from './components/modal'
-import { initRouter, navigate } from './router'
-import { apps, getSelectedTab, selectedApp, setApps, setIsNarrow } from './state'
 import { initToolIframes, updateToolIframes } from './tool-iframes'
 import { initUpdate } from './update'
 
@@ -42,16 +41,14 @@ narrowQuery.addEventListener('change', e => {
   render()
 })
 
-// Initialize router (sets initial state from URL and renders)
-initRouter(render)
-
 // SSE connection
 const events = new EventSource('/api/apps/stream')
 events.onmessage = e => {
+  const prev = apps
   setApps(JSON.parse(e.data))
 
   if (selectedApp && !apps.some(a => a.name === selectedApp)) {
-    navigate('/')
+    setSelectedApp(null)
   }
 
   render()

src/client/modals/DeleteApp.tsx

@@ -1,7 +1,6 @@
 import type { App } from '../../shared/types'
 import { closeModal, openModal, rerenderModal } from '../components/modal'
-import { navigate } from '../router'
-import { selectedApp } from '../state'
+import { selectedApp, setSelectedApp } from '../state'
 import { Button, Form, FormActions, FormError, FormField, FormInput, FormLabel } from '../styles'
 import { theme } from '../themes'
 
@@ -33,11 +32,11 @@ async function deleteApp(input: HTMLInputElement) {
       throw new Error(`Failed to delete app: ${res.statusText}`)
     }
 
-    // Success - close modal and navigate to dashboard
-    closeModal()
+    // Success - close modal and clear selection
     if (selectedApp === deleteAppTarget.name) {
-      navigate('/')
+      setSelectedApp(null)
     }
+    closeModal()
   } catch (err) {
     deleteAppError = err instanceof Error ? err.message : 'Failed to delete app'
     deleteAppDeleting = false

src/client/modals/NewApp.tsx

@@ -1,6 +1,5 @@
 import { closeModal, openModal, rerenderModal } from '../components/modal'
-import { navigate } from '../router'
-import { apps } from '../state'
+import { apps, setSelectedApp } from '../state'
 import { Button, Form, FormActions, FormCheckbox, FormCheckboxField, FormCheckboxLabel, FormError, FormField, FormInput, FormLabel, FormSelect } from '../styles'
 
 type TemplateType = 'ssr' | 'spa' | 'bare'
@@ -49,9 +48,9 @@ async function createNewApp() {
       throw new Error(data.error || 'Failed to create app')
     }
 
-    // Success - close modal and navigate to the new app
+    // Success - close modal and select the new app
+    setSelectedApp(name)
     closeModal()
-    navigate(`/app/${name}`)
   } catch (err) {
     newAppError = err instanceof Error ? err.message : 'Failed to create app'
     newAppCreating = false

src/client/modals/RenameApp.tsx

@@ -1,7 +1,6 @@
 import type { App } from '../../shared/types'
 import { closeModal, openModal, rerenderModal } from '../components/modal'
-import { navigate } from '../router'
-import { apps } from '../state'
+import { apps, setSelectedApp } from '../state'
 import { Button, Form, FormActions, FormError, FormField, FormInput, FormLabel } from '../styles'
 
 let renameAppError = ''
@@ -59,9 +58,9 @@ async function doRenameApp(input: HTMLInputElement) {
       throw new Error(data.error || 'Failed to rename app')
     }
 
-    // Success - close modal and navigate to renamed app
+    // Success - update selection and close modal
+    setSelectedApp(data.name || newName)
     closeModal()
-    navigate(`/app/${data.name || newName}`)
   } catch (err) {
     renameAppError = err instanceof Error ? err.message : 'Failed to rename app'
     renameAppRenaming = false

src/client/router.ts

@@ -1,59 +0,0 @@
-import { setCurrentView, setDashboardTab, setSelectedApp, setSelectedTab } from './state'
-
-let _render: () => void
-
-export function navigate(href: string) {
-  history.pushState(null, '', href)
-  route()
-}
-
-export function initRouter(render: () => void) {
-  _render = render
-
-  // Intercept link clicks
-  document.addEventListener('click', e => {
-    const a = (e.target as Element).closest('a')
-    if (!a || !a.href || a.origin !== location.origin || a.target === '_blank') return
-    if (e.metaKey || e.ctrlKey || e.shiftKey || e.altKey) return
-    e.preventDefault()
-    history.pushState(null, '', a.href)
-    route()
-  })
-
-  // Handle back/forward
-  window.addEventListener('popstate', route)
-
-  // Initial route from URL
-  route()
-}
-
-function route() {
-  const path = location.pathname
-
-  if (path.startsWith('/app/')) {
-    const rest = decodeURIComponent(path.slice(5))
-    const slashIdx = rest.indexOf('/')
-    const name = slashIdx === -1 ? rest : rest.slice(0, slashIdx)
-    const tab = slashIdx === -1 ? 'overview' : rest.slice(slashIdx + 1)
-    setSelectedApp(name)
-    setSelectedTab(name, tab)
-    setCurrentView('dashboard')
-  } else if (path === '/settings') {
-    setSelectedApp(null)
-    setCurrentView('settings')
-  } else if (path === '/logs') {
-    setSelectedApp(null)
-    setDashboardTab('logs')
-    setCurrentView('dashboard')
-  } else if (path === '/metrics') {
-    setSelectedApp(null)
-    setDashboardTab('metrics')
-    setCurrentView('dashboard')
-  } else {
-    setSelectedApp(null)
-    setDashboardTab('urls')
-    setCurrentView('dashboard')
-  }
-
-  _render()
-}

src/client/state.ts

@@ -5,20 +5,21 @@ export type DashboardTab = 'urls' | 'logs' | 'metrics'
 // UI state (survives re-renders)
 export let currentView: 'dashboard' | 'settings' = 'dashboard'
 export let isNarrow: boolean = window.matchMedia('(max-width: 768px)').matches
-export let selectedApp: string | null = null
+export let selectedApp: string | null = localStorage.getItem('selectedApp')
 export let sidebarCollapsed: boolean = localStorage.getItem('sidebarCollapsed') === 'true'
-export let dashboardTab: DashboardTab = 'urls'
+export let dashboardTab: DashboardTab = (localStorage.getItem('dashboardTab') as DashboardTab) || 'urls'
 export let sidebarSection: 'apps' | 'tools' = (localStorage.getItem('sidebarSection') as 'apps' | 'tools') || 'apps'
 
 // Server state (from SSE)
 export let apps: App[] = []
 
 // Tab state
-export let appTabs: Record<string, string> = {}
+export let appTabs: Record<string, string> = JSON.parse(localStorage.getItem('appTabs') || '{}')
 
 // State setters
 export function setDashboardTab(tab: DashboardTab) {
   dashboardTab = tab
+  localStorage.setItem('dashboardTab', tab)
 }
 
 export function setCurrentView(view: 'dashboard' | 'settings') {
@@ -27,6 +28,11 @@ export function setCurrentView(view: 'dashboard' | 'settings') {
 
 export function setSelectedApp(name: string | null) {
   selectedApp = name
+  if (name) {
+    localStorage.setItem('selectedApp', name)
+  } else {
+    localStorage.removeItem('selectedApp')
+  }
 }
 
 export function setIsNarrow(narrow: boolean) {
@@ -53,4 +59,5 @@ export const getSelectedTab = (appName: string | null) =>
 export function setSelectedTab(appName: string | null, tab: string) {
   if (!appName) return
   appTabs[appName] = tab
+  localStorage.setItem('appTabs', JSON.stringify(appTabs))
 }

src/client/styles/layout.ts

@@ -29,10 +29,7 @@ export const Logo = define('Logo', {
 })
 
 export const LogoLink = define('LogoLink', {
-  base: 'a',
   cursor: 'pointer',
-  color: 'inherit',
-  textDecoration: 'none',
   borderRadius: theme('radius-md'),
   padding: '4px 8px',
   margin: '-4px -8px',
@@ -115,7 +112,6 @@ export const AppList = define('AppList', {
 })
 
 export const AppItem = define('AppItem', {
-  base: 'a',
   display: 'flex',
   flexDirection: 'row',
   alignItems: 'center',

src/server/index.tsx

@@ -7,7 +7,6 @@ import systemRouter from './api/system'
 import { Hype } from '@because/hype'
 import { cleanupStalePublishers } from './mdns'
 import { extractSubdomain, proxySubdomain, proxyWebSocket, websocket } from './proxy'
-import { Shell } from './shell'
 import type { Server } from 'bun'
 import type { WsData } from './proxy'
 
@@ -114,13 +113,6 @@ app.get('/dist/:file', async c => {
   })
 })
 
-// SPA routes — serve the shell for all client-side paths
-app.get('/app/:name/:tab', c => c.html(<Shell />))
-app.get('/app/:name', c => c.html(<Shell />))
-app.get('/logs', c => c.html(<Shell />))
-app.get('/metrics', c => c.html(<Shell />))
-app.get('/settings', c => c.html(<Shell />))
-
 cleanupStalePublishers()
 await initApps()