refactor - Add tabs menu - fix swipe nav

Author: chriswritescode-dev

.env.example

@@ -17,6 +17,11 @@ LOG_LEVEL=info
 OPENCODE_SERVER_PORT=5551
 OPENCODE_HOST=127.0.0.1
 
+# Optional - bearer password required to talk to the spawned OpenCode server.
+# When set, the backend spawns OpenCode with this password and attaches it to
+# every proxied request. Leave unset to disable OpenCode-level auth.
+# OPENCODE_SERVER_PASSWORD=
+
 # Optional - import an existing standalone OpenCode install on first startup
 # Useful for Docker when your host OpenCode data is bind-mounted into the container
 # OPENCODE_IMPORT_CONFIG_PATH=/import/opencode-config/opencode.json

backend/src/routes/mcp-oauth-proxy.ts

@@ -6,7 +6,7 @@ import { readFile, writeFile, mkdir } from 'fs/promises'
 import { storeMcpOAuthFlow, consumeMcpOAuthFlow, deleteMcpOAuthFlow, markMcpOAuthFlowCompleted, markMcpOAuthFlowFailed, getMcpOAuthFlowResult } from '../services/mcp-oauth-state'
 import { logger } from '../utils/logger'
 import { getWorkspacePath } from '@opencode-manager/shared/config/env'
-import { OPENCODE_SERVER_URL } from '../services/proxy'
+import { OPENCODE_SERVER_URL, withOpenCodeAuth } from '../services/proxy'
 
 const StartSchema = z.object({
   serverName: z.string(),
@@ -300,11 +300,13 @@ export function createMcpOauthProxyRoutes(requireAuth?: any) {
         }
         await fetch(reconnectUrl, {
           method: 'POST',
+          headers: withOpenCodeAuth(),
         })
         if (flow.directory) {
           const globalReconnectUrl = `${OPENCODE_SERVER_URL}/mcp/${encodeURIComponent(flow.serverName)}/connect`
           await fetch(globalReconnectUrl, {
             method: 'POST',
+            headers: withOpenCodeAuth(),
           })
         }
       } catch {

backend/src/routes/memory.ts

@@ -8,7 +8,7 @@ import { resolveProjectId } from '../services/project-id-resolver'
 import { getRepoById } from '../db/queries'
 import { getWorkspacePath, getConfigPath } from '@opencode-manager/shared/config/env'
 import { parseJsonc } from '@opencode-manager/shared/utils'
-import { OPENCODE_SERVER_URL } from '../services/proxy'
+import { OPENCODE_SERVER_URL, withOpenCodeAuth } from '../services/proxy'
 import {
   CreateMemoryRequestSchema,
   UpdateMemoryRequestSchema,
@@ -640,7 +640,7 @@ export function createMemoryRoutes(db: Database): Hono {
       try {
         const abortUrl = new URL(`${OPENCODE_SERVER_URL}/session/${state.sessionId}/abort`)
         abortUrl.searchParams.set('directory', repo.fullPath)
-        await fetch(abortUrl.toString(), { method: 'POST' })
+        await fetch(abortUrl.toString(), { method: 'POST', headers: withOpenCodeAuth() })
       } catch {
         // Session may already be idle
       }

backend/src/services/opencode-single-server.ts

@@ -24,6 +24,11 @@ import { patchOpenCodeConfig } from './proxy'
 const OPENCODE_SERVER_PORT = ENV.OPENCODE.PORT
 const OPENCODE_SERVER_HOST = ENV.OPENCODE.HOST
 const OPENCODE_SERVER_PUBLIC_URL = ENV.OPENCODE.PUBLIC_URL
+const OPENCODE_SERVER_PASSWORD = ENV.OPENCODE.SERVER_PASSWORD
+const OPENCODE_SERVER_USERNAME = ENV.OPENCODE.SERVER_USERNAME
+const OPENCODE_BASIC_AUTH = OPENCODE_SERVER_PASSWORD
+  ? `Basic ${Buffer.from(`${OPENCODE_SERVER_USERNAME}:${OPENCODE_SERVER_PASSWORD}`).toString('base64')}`
+  : ''
 const MIN_OPENCODE_VERSION = '1.0.137'
 const MAX_STDERR_SIZE = 10240
 
@@ -234,6 +239,13 @@ class OpenCodeServerManager {
 
     let stderrOutput = ''
 
+    const cleanEnv = { ...process.env }
+    delete cleanEnv.OPENCODE_SERVER_PASSWORD
+    delete cleanEnv.OPENCODE_RUN_ID
+    delete cleanEnv.OPENCODE_PROCESS_ROLE
+    delete cleanEnv.OPENCODE_PID
+    delete cleanEnv.OPENCODE
+
     this.serverProcess = spawn(
       'opencode',
       ['serve', '--port', OPENCODE_SERVER_PORT.toString(), '--hostname', OPENCODE_SERVER_HOST],
@@ -242,13 +254,19 @@ class OpenCodeServerManager {
         detached: !isDevelopment,
         stdio: isDevelopment ? 'inherit' : ['ignore', 'pipe', 'pipe'],
         env: {
-          ...process.env,
+          ...cleanEnv,
           ...gitEnv,
           ...gitIdentityEnv,
           GIT_SSH_COMMAND: gitSshCommand,
           XDG_DATA_HOME: path.join(openCodeServerDirectory, '.opencode/state'),
           XDG_CONFIG_HOME: path.join(openCodeServerDirectory, '.config'),
           ...(OPENCODE_SERVER_PUBLIC_URL ? { OPENCODE_PUBLIC_URL: OPENCODE_SERVER_PUBLIC_URL } : {}),
+          ...(OPENCODE_SERVER_PASSWORD
+            ? {
+                OPENCODE_SERVER_PASSWORD,
+                OPENCODE_SERVER_USERNAME,
+              }
+            : {}),
           OPENCODE_CONFIG: openCodeConfigPath,
         }
       }
@@ -450,8 +468,13 @@ class OpenCodeServerManager {
 
   async checkHealth(): Promise<boolean> {
     try {
+      const headers: Record<string, string> = {}
+      if (OPENCODE_BASIC_AUTH) {
+        headers.Authorization = OPENCODE_BASIC_AUTH
+      }
       const response = await fetch(`http://${OPENCODE_SERVER_HOST}:${OPENCODE_SERVER_PORT}/doc`, {
-        signal: AbortSignal.timeout(3000)
+        signal: AbortSignal.timeout(3000),
+        headers
       })
       return response.ok
     } catch {

backend/src/services/proxy.ts

@@ -3,12 +3,25 @@ import { ENV } from '@opencode-manager/shared/config/env'
 import { parseJsonc } from '@opencode-manager/shared/utils'
 
 export const OPENCODE_SERVER_URL = `http://${ENV.OPENCODE.HOST}:${ENV.OPENCODE.PORT}`
+const OPENCODE_SERVER_PASSWORD = ENV.OPENCODE.SERVER_PASSWORD
+const OPENCODE_SERVER_USERNAME = ENV.OPENCODE.SERVER_USERNAME
+
+const OPENCODE_BASIC_AUTH = OPENCODE_SERVER_PASSWORD
+  ? `Basic ${Buffer.from(`${OPENCODE_SERVER_USERNAME}:${OPENCODE_SERVER_PASSWORD}`).toString('base64')}`
+  : ''
+
+export function withOpenCodeAuth(headers: Record<string, string> = {}): Record<string, string> {
+  if (OPENCODE_BASIC_AUTH) {
+    return { ...headers, Authorization: OPENCODE_BASIC_AUTH }
+  }
+  return headers
+}
 
 export async function setOpenCodeAuth(providerId: string, apiKey: string): Promise<boolean> {
   try {
     const response = await fetch(`${OPENCODE_SERVER_URL}/auth/${providerId}`, {
       method: 'PUT',
-      headers: { 'Content-Type': 'application/json' },
+      headers: withOpenCodeAuth({ 'Content-Type': 'application/json' }),
       body: JSON.stringify({ type: 'api', key: apiKey }),
     })
 
@@ -29,6 +42,7 @@ export async function deleteOpenCodeAuth(providerId: string): Promise<boolean> {
   try {
     const response = await fetch(`${OPENCODE_SERVER_URL}/auth/${providerId}`, {
       method: 'DELETE',
+      headers: withOpenCodeAuth(),
     })
 
     if (response.ok) {
@@ -196,7 +210,7 @@ export async function patchOpenCodeConfig(config: Record<string, unknown>): Prom
   try {
     const response = await fetch(`${OPENCODE_SERVER_URL}/config`, {
       method: 'PATCH',
-      headers: { 'Content-Type': 'application/json' },
+      headers: withOpenCodeAuth({ 'Content-Type': 'application/json' }),
       body: JSON.stringify(config),
     })
 
@@ -242,7 +256,7 @@ export async function patchOpenCodeConfig(config: Record<string, unknown>): Prom
     logger.info(`Retrying config patch after removing ${removedFields.length} problematic field(s): ${removedFields.join(', ')}`)
     const retryResponse = await fetch(`${OPENCODE_SERVER_URL}/config`, {
       method: 'PATCH',
-      headers: { 'Content-Type': 'application/json' },
+      headers: withOpenCodeAuth({ 'Content-Type': 'application/json' }),
       body: JSON.stringify(cleanedConfig),
     })
 
@@ -287,14 +301,14 @@ export async function proxyRequest(request: Request) {
   try {
     const headers: Record<string, string> = {}
     request.headers.forEach((value, key) => {
-      if (!['host', 'connection'].includes(key.toLowerCase())) {
+      if (!['host', 'connection', 'authorization'].includes(key.toLowerCase())) {
         headers[key] = value
       }
     })
 
     const response = await fetch(targetUrl, {
       method: request.method,
-      headers,
+      headers: withOpenCodeAuth(headers),
       body: request.method !== 'GET' && request.method !== 'HEAD' ? await request.text() : undefined,
     })
 
@@ -337,7 +351,7 @@ export async function proxyToOpenCodeWithDirectory(
   try {
     const response = await fetch(url.toString(), {
       method,
-      headers: headers || { 'Content-Type': 'application/json' },
+      headers: withOpenCodeAuth(headers || { 'Content-Type': 'application/json' }),
       body,
     })
 
@@ -378,7 +392,7 @@ export async function proxyMcpAuthStart(
   try {
     const response = await fetch(url.toString(), {
       method: 'POST',
-      headers: { 'Content-Type': 'application/json' },
+      headers: withOpenCodeAuth({ 'Content-Type': 'application/json' }),
     })
 
     const responseBody = await response.text()
@@ -409,7 +423,7 @@ export async function proxyMcpAuthAuthenticate(
   try {
     const response = await fetch(url.toString(), {
       method: 'POST',
-      headers: { 'Content-Type': 'application/json' },
+      headers: withOpenCodeAuth({ 'Content-Type': 'application/json' }),
     })
 
     const responseBody = await response.text()

backend/test/services/opencode-single-server.test.ts

@@ -254,6 +254,8 @@ describe('OpenCodeServerManager - reloadConfig', () => {
     const mockPatchResult = { success: true }
     vi.mocked(patchOpenCodeConfig).mockResolvedValue(mockPatchResult)
 
+    const fetchSpy = vi.spyOn(globalThis, 'fetch').mockResolvedValue(new Response(null, { status: 200 }))
+
     const { opencodeServerManager } = await import('../../src/services/opencode-single-server')
 
     await opencodeServerManager.reloadConfig()
@@ -263,5 +265,7 @@ describe('OpenCodeServerManager - reloadConfig', () => {
       'utf-8'
     )
     expect(patchOpenCodeConfig).toHaveBeenCalled()
+
+    fetchSpy.mockRestore()
   })
 })

frontend/src/App.tsx

@@ -1,7 +1,7 @@
 
 import { QueryClient, QueryClientProvider } from '@tanstack/react-query'
-import { createBrowserRouter, RouterProvider, Outlet, useNavigate } from 'react-router-dom'
-import { useEffect } from 'react'
+import { createBrowserRouter, RouterProvider, Outlet, useNavigate, useLocation } from 'react-router-dom'
+import { useEffect, useRef } from 'react'
 import { Toaster } from 'sonner'
 import { Repos } from './pages/Repos'
 import { RepoDetail } from './pages/RepoDetail'
@@ -15,14 +15,16 @@ import { Setup } from './pages/Setup'
 import { SettingsDialog } from './components/settings/SettingsDialog'
 import { VersionNotifier } from './components/VersionNotifier'
 import { PwaUpdatePrompt } from '@/components/PwaUpdatePrompt'
+import { MobileTabBar } from '@/components/navigation/MobileTabBar'
+import { MobileSheetHost } from '@/components/navigation/MobileSheetHost'
 import { useTheme } from './hooks/useTheme'
+import { useSwipeBack } from './hooks/useMobile'
 import { TTSProvider } from './contexts/TTSContext'
 import { AuthProvider } from './contexts/AuthContext'
 import { EventProvider, usePermissions, useEventContext } from '@/contexts/EventContext'
+import { SwipeNavigationProvider } from '@/contexts/SwipeNavigationContext'
 import { PermissionRequestDialog } from './components/session/PermissionRequestDialog'
 import { SSHHostKeyDialog } from './components/ssh/SSHHostKeyDialog'
-import { PageTransition } from './components/ui/PageTransition'
-import { useNavigationDirection } from './hooks/useNavigationDirection'
 import { loginLoader, setupLoader, registerLoader, protectedLoader } from './lib/auth-loaders'
 
 const queryClient = new QueryClient({
@@ -70,8 +72,61 @@ function PermissionDialogWrapper() {
 
 function AppShell() {
   const navigate = useNavigate()
+  const location = useLocation()
+  const rootRef = useRef<HTMLDivElement>(null)
   useTheme()
-  useNavigationDirection()
+
+  const getSwipeBackTarget = () => {
+    const path = location.pathname
+    if (path.match(/^\/repos\/[^/]+\/sessions\/[^/]+$/)) {
+      const repoId = path.split('/')[2]
+      return `/repos/${repoId}`
+    }
+    if (path.match(/^\/repos\/[^/]+$/)) {
+      return '/'
+    }
+    if (path.match(/^\/repos\/[^/]+\/memories$/)) {
+      const repoId = path.split('/')[2]
+      return `/repos/${repoId}`
+    }
+    if (path.match(/^\/repos\/[^/]+\/schedules$/)) {
+      const repoId = path.split('/')[2]
+      return `/repos/${repoId}`
+    }
+    if (path === '/schedules') {
+      return '/'
+    }
+    return null
+  }
+
+  const canSwipeBack = () => {
+    const path = location.pathname
+    return !['/login', '/setup', '/register', '/'].includes(path) && getSwipeBackTarget() !== null
+  }
+
+  const handleSwipeBack = () => {
+    const target = getSwipeBackTarget()
+    if (target) {
+      navigate(target)
+    }
+  }
+
+  const { bind: bindRouteSwipe } = useSwipeBack(
+    () => {},
+    {
+      enabled: true,
+      suspendsRouteSwipe: false,
+      canBack: canSwipeBack,
+      onBack: handleSwipeBack,
+    }
+  )
+
+  useEffect(() => {
+    const cleanup = bindRouteSwipe(rootRef.current)
+    return () => {
+      cleanup?.()
+    }
+  }, [bindRouteSwipe])
 
   useEffect(() => {
     const channel = new BroadcastChannel('notification-click')
@@ -87,9 +142,11 @@ function AppShell() {
   return (
     <AuthProvider>
       <EventProvider>
-        <PageTransition>
+        <div ref={rootRef} className="contents">
           <Outlet />
-        </PageTransition>
+        </div>
+        <MobileTabBar />
+        <MobileSheetHost />
         <PermissionDialogWrapper />
         <SSHHostKeyDialogWrapper />
         <SettingsDialog />
@@ -164,7 +221,9 @@ function App() {
   return (
     <QueryClientProvider client={queryClient}>
       <TTSProvider>
-        <RouterProvider router={router} />
+        <SwipeNavigationProvider>
+          <RouterProvider router={router} />
+        </SwipeNavigationProvider>
       </TTSProvider>
     </QueryClientProvider>
   )