Redesign mobile app with improved navigation and features

- Replace tab navigation with stack-only navigation
- Add HomeScreen with workspace list and host access toggle
- Add WorkspaceDetailScreen showing sessions grouped by date
- Add SessionChatScreen with tool call display matching web UI
- Add TerminalScreen using ghostty-web via WebView
- Add WorkspaceSettingsScreen for workspace-specific actions
- Support host machine access with amber-colored UI elements
- Add agent selection (Claude Code/OpenCode/Codex) for new chats
- Implement message pagination with "Load older messages"
- Display tool calls with expandable input/result sections
- Show workspace name and agent type in chat header

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

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>

Author: gricha

mobile/bun.lock

@@ -29,7 +29,8 @@
     "react": "19.1.0",
     "react-native": "0.81.5",
     "react-native-safe-area-context": "^5.6.2",
-    "react-native-screens": "^4.19.0"
+    "react-native-screens": "^4.19.0",
+    "react-native-webview": "13.15.0"
   },
   "devDependencies": {
     "@types/react": "~19.1.0",

mobile/package.json

@@ -21,6 +21,15 @@ export interface InfoResponse {
   dockerVersion: string
 }
 
+export interface HostInfo {
+  enabled: boolean
+  hostname: string
+  username: string
+  homeDir: string
+}
+
+export const HOST_WORKSPACE_NAME = '@host'
+
 export interface CreateWorkspaceRequest {
   name: string
   clone?: string
@@ -146,9 +155,13 @@ function createClient() {
         limit?: number
         offset?: number
       }) => Promise<{ sessions: (SessionInfo & { workspaceName: string })[]; total: number; hasMore: boolean }>
-      get: (input: { workspaceName: string; sessionId: string; agentType?: AgentType }) => Promise<SessionDetail>
+      get: (input: { workspaceName: string; sessionId: string; agentType?: AgentType; limit?: number; offset?: number }) => Promise<SessionDetail & { total: number; hasMore: boolean }>
     }
     info: () => Promise<InfoResponse>
+    host: {
+      info: () => Promise<HostInfo>
+      updateAccess: (input: { enabled: boolean }) => Promise<HostInfo>
+    }
     config: {
       credentials: {
         get: () => Promise<Credentials>
@@ -182,6 +195,17 @@ export interface SessionInfoWithWorkspace extends SessionInfo {
   workspaceName: string
 }
 
+export function getTerminalUrl(workspaceName: string): string {
+  const wsUrl = baseUrl.replace(/^http/, 'ws')
+  return `${wsUrl}/rpc/terminal/${encodeURIComponent(workspaceName)}`
+}
+
+export function getChatUrl(workspaceName: string, agentType: AgentType = 'claude-code'): string {
+  const wsUrl = baseUrl.replace(/^http/, 'ws')
+  const endpoint = agentType === 'opencode' ? 'opencode' : 'chat'
+  return `${wsUrl}/rpc/${endpoint}/${encodeURIComponent(workspaceName)}`
+}
+
 export const api = {
   listWorkspaces: () => client.workspaces.list(),
   getWorkspace: (name: string) => client.workspaces.get({ name }),
@@ -196,9 +220,11 @@ export const api = {
     client.sessions.list({ workspaceName, agentType, limit, offset }),
   listAllSessions: (agentType?: AgentType, limit?: number, offset?: number) =>
     client.sessions.listAll({ agentType, limit, offset }),
-  getSession: (workspaceName: string, sessionId: string, agentType?: AgentType) =>
-    client.sessions.get({ workspaceName, sessionId, agentType }),
+  getSession: (workspaceName: string, sessionId: string, agentType?: AgentType, limit?: number, offset?: number) =>
+    client.sessions.get({ workspaceName, sessionId, agentType, limit, offset }),
   getInfo: () => client.info(),
+  getHostInfo: () => client.host.info(),
+  updateHostAccess: (enabled: boolean) => client.host.updateAccess({ enabled }),
   getCredentials: () => client.config.credentials.get(),
   updateCredentials: (data: Credentials) => client.config.credentials.update(data),
   getScripts: () => client.config.scripts.get(),

mobile/src/lib/api.ts

@@ -1,95 +1,27 @@
-import { createBottomTabNavigator } from '@react-navigation/bottom-tabs'
 import { createNativeStackNavigator } from '@react-navigation/native-stack'
-import { View, Text, StyleSheet } from 'react-native'
-import { WorkspacesScreen } from '../screens/WorkspacesScreen'
+import { HomeScreen } from '../screens/HomeScreen'
 import { WorkspaceDetailScreen } from '../screens/WorkspaceDetailScreen'
-import { SessionsScreen } from '../screens/SessionsScreen'
-import { SessionDetailScreen } from '../screens/SessionDetailScreen'
+import { SessionChatScreen } from '../screens/SessionChatScreen'
+import { TerminalScreen } from '../screens/TerminalScreen'
 import { SettingsScreen } from '../screens/SettingsScreen'
+import { WorkspaceSettingsScreen } from '../screens/WorkspaceSettingsScreen'
 
-const Tab = createBottomTabNavigator()
-const WorkspacesStack = createNativeStackNavigator()
-const SessionsStack = createNativeStackNavigator()
-
-function TabIcon({ name, focused }: { name: string; focused: boolean }) {
-  const icons: Record<string, string> = {
-    WorkspacesTab: '▣',
-    SessionsTab: '◈',
-    Settings: '⚙',
-  }
-  return (
-    <View style={styles.iconContainer}>
-      <Text style={[styles.icon, focused && styles.iconFocused]}>{icons[name] || '?'}</Text>
-    </View>
-  )
-}
-
-function WorkspacesStackNavigator() {
-  return (
-    <WorkspacesStack.Navigator screenOptions={{ headerShown: false }}>
-      <WorkspacesStack.Screen name="WorkspacesList" component={WorkspacesScreen} />
-      <WorkspacesStack.Screen name="WorkspaceDetail" component={WorkspaceDetailScreen} />
-      <WorkspacesStack.Screen name="SessionDetail" component={SessionDetailScreen} />
-    </WorkspacesStack.Navigator>
-  )
-}
-
-function SessionsStackNavigator() {
-  return (
-    <SessionsStack.Navigator screenOptions={{ headerShown: false }}>
-      <SessionsStack.Screen name="SessionsList" component={SessionsScreen} />
-      <SessionsStack.Screen name="SessionDetail" component={SessionDetailScreen} />
-    </SessionsStack.Navigator>
-  )
-}
+const Stack = createNativeStackNavigator()
 
 export function TabNavigator() {
   return (
-    <Tab.Navigator
-      screenOptions={({ route }) => ({
-        tabBarIcon: ({ focused }) => <TabIcon name={route.name} focused={focused} />,
-        tabBarActiveTintColor: '#0a84ff',
-        tabBarInactiveTintColor: '#8e8e93',
-        headerStyle: {
-          backgroundColor: '#000',
-          borderBottomWidth: 1,
-          borderBottomColor: '#1c1c1e',
-        },
-        headerTintColor: '#fff',
-        tabBarStyle: {
-          backgroundColor: '#000',
-          borderTopColor: '#1c1c1e',
-        },
-      })}
+    <Stack.Navigator
+      screenOptions={{
+        headerShown: false,
+        contentStyle: { backgroundColor: '#000' },
+      }}
     >
-      <Tab.Screen
-        name="WorkspacesTab"
-        component={WorkspacesStackNavigator}
-        options={{ title: 'Workspaces', headerShown: false }}
-      />
-      <Tab.Screen
-        name="SessionsTab"
-        component={SessionsStackNavigator}
-        options={{ title: 'Sessions', headerShown: false }}
-      />
-      <Tab.Screen name="Settings" component={SettingsScreen} />
-    </Tab.Navigator>
+      <Stack.Screen name="Home" component={HomeScreen} />
+      <Stack.Screen name="Settings" component={SettingsScreen} />
+      <Stack.Screen name="WorkspaceDetail" component={WorkspaceDetailScreen} />
+      <Stack.Screen name="WorkspaceSettings" component={WorkspaceSettingsScreen} />
+      <Stack.Screen name="SessionChat" component={SessionChatScreen} />
+      <Stack.Screen name="Terminal" component={TerminalScreen} />
+    </Stack.Navigator>
   )
 }
-
-const styles = StyleSheet.create({
-  iconContainer: {
-    width: 28,
-    height: 28,
-    alignItems: 'center',
-    justifyContent: 'center',
-  },
-  icon: {
-    fontSize: 18,
-    fontWeight: '600',
-    color: '#8e8e93',
-  },
-  iconFocused: {
-    color: '#0a84ff',
-  },
-})