better-codex 0.1.3 → 0.2.0

package/apps/web/src/config.ts

@@ -2,4 +2,28 @@ const FALLBACK_HUB_URL = 'http://127.0.0.1:7711'
 
 export const HUB_URL =
   import.meta.env.VITE_CODEX_HUB_URL ?? FALLBACK_HUB_URL
+
+let cachedToken: string | null = null
+
+export const getHubToken = async (): Promise<string> => {
+  const envToken = import.meta.env.VITE_CODEX_HUB_TOKEN
+  if (envToken) {
+    return envToken
+  }
+
+  if (!cachedToken) {
+    try {
+      const response = await fetch(`${HUB_URL}/config`)
+      if (response.ok) {
+        const data = (await response.json()) as { token?: string }
+        cachedToken = data.token ?? ''
+      }
+    } catch {
+      console.warn('Failed to fetch hub token from backend')
+    }
+  }
+
+  return cachedToken ?? ''
+}
+
 export const HUB_TOKEN = import.meta.env.VITE_CODEX_HUB_TOKEN ?? ''

package/apps/web/src/hooks/use-hub-connection.ts

@@ -278,8 +278,9 @@ export const useHubConnection = () => {
                   id: `diff-${turnId ?? threadId}`,
                   role: 'assistant',
                   kind: 'file',
-                  title: 'Diff · updated',
+                  title: 'Diff',
                   content,
+                  meta: { diff },
                   timestamp: nowTimestamp(),
                 })
               }
@@ -537,8 +538,25 @@ export const useHubConnection = () => {
           })
           if (threads) {
             setThreadsForAccount(profile.id, toThreads(profile.id, threads))
-            if (profile.id === profiles[0]?.id && threads.data?.length) {
-              setSelectedThreadId(threads.data[0].id)
+          }
+          if (threads?.data?.length) {
+            try {
+              const activeThreads = await hubClient.listActiveThreads({ profileId: profile.id })
+              const knownThreadIds = new Set(threads.data.map((thread) => thread.id))
+              for (const entry of activeThreads) {
+                if (!knownThreadIds.has(entry.threadId)) {
+                  continue
+                }
+                updateThread(entry.threadId, { status: 'active' })
+                if (entry.turnId) {
+                  setThreadTurnId(entry.threadId, entry.turnId)
+                }
+                if (Number.isFinite(entry.startedAt)) {
+                  setThreadTurnStartedAt(entry.threadId, entry.startedAt)
+                }
+              }
+            } catch (error) {
+              console.error(error)
             }
           }
 

package/apps/web/src/hooks/use-thread-history.ts

@@ -24,6 +24,7 @@ type ThreadData = {
 type TurnData = {
   id: string
   items?: ThreadItem[]
+  status?: string
 }
 
 type ThreadItem = {
@@ -109,6 +110,72 @@ const buildMessagesFromTurns = (turns: TurnData[] = []): Message[] => {
   return messages
 }
 
+const mergeMessages = (base: Message[], incoming: Message[]): Message[] => {
+  if (incoming.length === 0) {
+    return base
+  }
+  if (base.length === 0) {
+    return incoming
+  }
+  const merged = [...base]
+  const indexById = new Map(base.map((msg, index) => [msg.id, index]))
+  const userContentIndex = new Map<string, number[]>()
+
+  const contentKey = (message: Message) => message.content.trim()
+  const isUserChat = (message: Message) => message.role === 'user' && message.kind === 'chat'
+
+  base.forEach((message, index) => {
+    if (!isUserChat(message) || message.timestamp) {
+      return
+    }
+    const key = contentKey(message)
+    if (!key) {
+      return
+    }
+    const existing = userContentIndex.get(key)
+    if (existing) {
+      existing.push(index)
+    } else {
+      userContentIndex.set(key, [index])
+    }
+  })
+
+  for (const message of incoming) {
+    const existingIndex = indexById.get(message.id)
+    if (existingIndex === undefined) {
+      if (isUserChat(message)) {
+        const key = contentKey(message)
+        const candidates = key ? userContentIndex.get(key) : undefined
+        const targetIndex = candidates?.shift()
+        if (targetIndex !== undefined) {
+          const target = merged[targetIndex]
+          merged[targetIndex] = {
+            ...target,
+            ...message,
+            id: target.id,
+            timestamp: message.timestamp || target.timestamp,
+          }
+          if (candidates && candidates.length === 0) {
+            userContentIndex.delete(key)
+          }
+          continue
+        }
+      }
+      merged.push(message)
+    } else {
+      merged[existingIndex] = { ...merged[existingIndex], ...message }
+    }
+  }
+  return merged
+}
+
+const isTurnInProgress = (status?: string) => {
+  if (!status) {
+    return false
+  }
+  return status === 'inProgress' || status === 'in_progress' || status === 'inprogress'
+}
+
 export const useThreadHistory = () => {
   const {
     threads,
@@ -121,9 +188,11 @@ export const useThreadHistory = () => {
     setThreadEffort,
     setThreadApproval,
     setThreadCwd,
+    setThreadTurnId,
   } = useAppStore()
 
   const inFlight = useRef<Set<string>>(new Set())
+  const loaded = useRef<Set<string>>(new Set())
 
   useEffect(() => {
     if (!selectedThreadId || connectionStatus !== 'connected') {
@@ -135,8 +204,7 @@ export const useThreadHistory = () => {
       return
     }
 
-    const existing = messages[selectedThreadId]
-    if (existing !== undefined) {
+    if (loaded.current.has(selectedThreadId)) {
       return
     }
 
@@ -162,14 +230,32 @@ export const useThreadHistory = () => {
           return
         }
 
-        const loadedMessages = buildMessagesFromTurns(resumeThread.turns)
-        setMessagesForThread(selectedThreadId, loadedMessages)
+        const turns = resumeThread.turns ?? []
+        const loadedMessages = buildMessagesFromTurns(turns)
+        const currentMessages = useAppStore.getState().messages[selectedThreadId] ?? []
+        const mergedMessages = mergeMessages(loadedMessages, currentMessages)
+        setMessagesForThread(selectedThreadId, mergedMessages)
+
+        let activeTurn: TurnData | null = null
+        for (let index = turns.length - 1; index >= 0; index -= 1) {
+          if (isTurnInProgress(turns[index]?.status)) {
+            activeTurn = turns[index]
+            break
+          }
+        }
+        setThreadTurnId(selectedThreadId, activeTurn?.id ?? null)
+        const nextStatus = thread.status === 'archived'
+          ? 'archived'
+          : activeTurn
+            ? 'active'
+            : 'idle'
 
         updateThread(selectedThreadId, {
           title: resumeThread.preview?.trim() || thread.title,
           preview: resumeThread.preview?.trim() || thread.preview,
           model: resumeThread.modelProvider ?? thread.model,
-          messageCount: loadedMessages.length,
+          messageCount: mergedMessages.length,
+          status: nextStatus,
         })
         if (result.model) {
           setThreadModel(selectedThreadId, result.model)
@@ -184,6 +270,7 @@ export const useThreadHistory = () => {
         if (result.cwd) {
           setThreadCwd(selectedThreadId, result.cwd)
         }
+        loaded.current.add(selectedThreadId)
       } catch (error) {
         console.error(error)
       } finally {
@@ -206,5 +293,7 @@ export const useThreadHistory = () => {
     setThreadApproval,
     threads,
     updateThread,
+    setThreadTurnId,
+    setThreadCwd,
   ])
 }

package/apps/web/src/services/hub-client.ts

@@ -1,4 +1,4 @@
-import { HUB_TOKEN, HUB_URL } from '../config'
+import { getHubToken, HUB_URL } from '../config'
 
 export type HubProfile = {
   id: string
@@ -12,6 +12,32 @@ export type PromptSummary = {
   description?: string
 }
 
+export type McpServerConfig = {
+  name: string
+  command?: string
+  args?: string[]
+  env?: Record<string, string>
+  env_vars?: string[]
+  cwd?: string
+  url?: string
+  bearer_token_env_var?: string
+  http_headers?: Record<string, string>
+  env_http_headers?: Record<string, string>
+  enabled?: boolean
+  startup_timeout_sec?: number
+  startup_timeout_ms?: number
+  tool_timeout_sec?: number
+  enabled_tools?: string[]
+  disabled_tools?: string[]
+}
+
+export type ProfileConfigSnapshot = {
+  path: string
+  codexHome: string
+  content: string
+  mcpServers: McpServerConfig[]
+}
+
 export type ThreadSearchResult = {
   threadId: string
   profileId: string
@@ -27,6 +53,13 @@ export type ThreadSearchResult = {
   lastSeenAt: number | null
 }
 
+export type ActiveThread = {
+  threadId: string
+  profileId: string
+  turnId: string | null
+  startedAt: number
+}
+
 export type ReviewSessionResult = {
   id: string
   threadId: string
@@ -128,11 +161,12 @@ class HubClient {
     if (this.ws?.readyState === WebSocket.OPEN) {
       return
     }
-    if (!HUB_TOKEN) {
-      throw new Error('Missing VITE_CODEX_HUB_TOKEN')
+    const token = await getHubToken()
+    if (!token) {
+      throw new Error('Missing hub token - backend may not be running')
     }
 
-    const ws = new WebSocket(toWsUrl(HUB_URL, HUB_TOKEN))
+    const ws = new WebSocket(toWsUrl(HUB_URL, token))
     this.ws = ws
 
     ws.onmessage = (event) => {
@@ -233,6 +267,40 @@ class HubClient {
     return data.content ?? ''
   }
 
+  async getProfileConfig(profileId: string): Promise<ProfileConfigSnapshot> {
+    const response = await fetch(`${HUB_URL}/profiles/${profileId}/config`)
+    if (!response.ok) {
+      throw new Error('Failed to load config')
+    }
+    return (await response.json()) as ProfileConfigSnapshot
+  }
+
+  async saveProfileConfig(profileId: string, content: string): Promise<ProfileConfigSnapshot> {
+    const response = await fetch(`${HUB_URL}/profiles/${profileId}/config`, {
+      method: 'PUT',
+      headers: { 'Content-Type': 'application/json' },
+      body: JSON.stringify({ content }),
+    })
+    if (!response.ok) {
+      throw new Error('Failed to save config')
+    }
+    const data = (await response.json()) as { content?: string } & ProfileConfigSnapshot
+    return data
+  }
+
+  async saveMcpServers(profileId: string, servers: McpServerConfig[]): Promise<ProfileConfigSnapshot> {
+    const response = await fetch(`${HUB_URL}/profiles/${profileId}/mcp-servers`, {
+      method: 'PUT',
+      headers: { 'Content-Type': 'application/json' },
+      body: JSON.stringify({ servers }),
+    })
+    if (!response.ok) {
+      throw new Error('Failed to save MCP servers')
+    }
+    const data = (await response.json()) as ProfileConfigSnapshot
+    return data
+  }
+
   async searchThreads(params: {
     query?: string
     profileId?: string
@@ -260,6 +328,17 @@ class HubClient {
     return data.threads ?? []
   }
 
+  async listActiveThreads(params?: { profileId?: string }): Promise<ActiveThread[]> {
+    const url = new URL('/threads/active', HUB_URL)
+    if (params?.profileId) url.searchParams.set('profileId', params.profileId)
+    const response = await fetch(url.toString())
+    if (!response.ok) {
+      throw new Error('Failed to load active threads')
+    }
+    const data = (await response.json()) as { threads?: ActiveThread[] }
+    return data.threads ?? []
+  }
+
   async listReviews(params?: { profileId?: string; limit?: number; offset?: number }): Promise<ReviewSessionResult[]> {
     const url = new URL('/reviews', HUB_URL)
     if (params?.profileId) url.searchParams.set('profileId', params.profileId)
@@ -273,7 +352,7 @@ class HubClient {
     return data.sessions ?? []
   }
 
-  async request(profileId: string, method: string, params?: unknown): Promise<unknown> {
+  private async sendRequest(profileId: string, method: string, params?: unknown): Promise<unknown> {
     if (!this.ws) {
       console.error('[HubClient] WebSocket not connected')
       throw new Error('WebSocket not connected')
@@ -305,6 +384,18 @@ class HubClient {
     })
   }
 
+  async request(profileId: string, method: string, params?: unknown): Promise<unknown> {
+    try {
+      return await this.sendRequest(profileId, method, params)
+    } catch (error) {
+      if (this.isProfileNotRunning(error)) {
+        await this.startProfile(profileId)
+        return await this.sendRequest(profileId, method, params)
+      }
+      throw error
+    }
+  }
+
   respond(profileId: string, id: number, result?: unknown, error?: { code?: number; message: string }) {
     if (!this.ws) {
       return
@@ -353,6 +444,13 @@ class HubClient {
 
     this.listeners.forEach((listener) => listener(payload as WsEvent))
   }
+
+  private isProfileNotRunning(error: unknown): boolean {
+    if (!error || typeof error !== 'object') {
+      return false
+    }
+    return error instanceof Error && error.message.includes('profile app-server not running')
+  }
 }
 
 export const hubClient = new HubClient()

package/apps/web/src/types/index.ts

@@ -8,6 +8,29 @@ export type ReasoningSummary = 'auto' | 'concise' | 'detailed' | 'none'
 export type ApprovalPolicy = 'untrusted' | 'on-failure' | 'on-request' | 'never'
 export type ReviewStatus = 'pending' | 'running' | 'completed' | 'failed'
 
+export type CommandAction =
+  | { type: 'read'; command: string; name: string; path: string }
+  | { type: 'listFiles'; command: string; path?: string | null }
+  | { type: 'search'; command: string; query?: string | null; path?: string | null }
+  | { type: 'unknown'; command: string }
+
+export type FileChangeKind = 'add' | 'delete' | 'update'
+
+export interface FileChangeMeta {
+  path: string
+  kind: FileChangeKind
+  diff?: string
+  movePath?: string | null
+}
+
+export interface MessageMeta {
+  commandActions?: CommandAction[]
+  command?: string
+  status?: string
+  fileChanges?: FileChangeMeta[]
+  diff?: string
+}
+
 export interface Attachment {
   id: string
   type: 'image' | 'file'
@@ -69,6 +92,7 @@ export interface Message {
   kind?: MessageKind
   title?: string
   timestamp: string
+  meta?: MessageMeta
 }
 
 export interface QueuedMessage {

package/apps/web/src/utils/item-format.ts

@@ -1,4 +1,4 @@
-import type { Message, MessageKind } from '../types'
+import type { CommandAction, FileChangeMeta, Message, MessageKind, MessageMeta } from '../types'
 
 type ThreadItem = {
   type: string
@@ -6,11 +6,11 @@ type ThreadItem = {
   [key: string]: unknown
 }
 
-type CommandAction =
-  | { type: 'read'; command: string; name: string; path: string }
-  | { type: 'listFiles'; command: string; path?: string | null }
-  | { type: 'search'; command: string; query?: string | null; path?: string | null }
-  | { type: 'unknown'; command: string }
+// type CommandAction =
+//   | { type: 'read'; command: string; name: string; path: string }
+//   | { type: 'listFiles'; command: string; path?: string | null }
+//   | { type: 'search'; command: string; query?: string | null; path?: string | null }
+//   | { type: 'unknown'; command: string }
 
 const clampText = (value: string, max = 1400) => {
   if (value.length <= max) {
@@ -99,7 +99,43 @@ const formatCommandActions = (actions: CommandAction[], commandFallback: string)
   }
 }
 
-export const formatThreadItem = (item: ThreadItem): { kind: MessageKind; content: string; title?: string } | null => {
+type FormattedThreadItem = {
+  kind: MessageKind
+  content: string
+  title?: string
+  meta?: MessageMeta
+}
+
+const toFileChangeMeta = (change: {
+  path?: unknown
+  kind?: unknown
+  diff?: string
+  movePath?: unknown
+  move_path?: unknown
+}): FileChangeMeta => {
+  const path = typeof change.path === 'string' ? change.path : 'unknown'
+  const kind =
+    typeof change.kind === 'string'
+      ? change.kind
+      : typeof (change.kind as { type?: string } | null | undefined)?.type === 'string'
+        ? String((change.kind as { type?: string }).type)
+        : 'update'
+  const movePath =
+    typeof change.movePath === 'string'
+      ? change.movePath
+      : typeof change.move_path === 'string'
+        ? change.move_path
+        : undefined
+
+  return {
+    path,
+    kind: kind === 'add' || kind === 'delete' ? kind : 'update',
+    diff: typeof change.diff === 'string' ? change.diff : undefined,
+    movePath: movePath ?? null,
+  }
+}
+
+export const formatThreadItem = (item: ThreadItem): FormattedThreadItem | null => {
   switch (item.type) {
     case 'reasoning': {
       const summary = Array.isArray(item.summary) ? item.summary.join('\n') : ''
@@ -113,13 +149,22 @@ export const formatThreadItem = (item: ThreadItem): { kind: MessageKind; content
       const actions = Array.isArray(item.commandActions) ? (item.commandActions as CommandAction[]) : []
       const actionSummary = formatCommandActions(actions, command)
       const content = output ? `${actionSummary.content}\n\n${output}` : actionSummary.content
-      return { kind: actionSummary.kind, content: clampText(content), title: `${actionSummary.title} · ${status}` }
+      const meta: MessageMeta = {
+        commandActions: actions.length ? actions : undefined,
+        command,
+        status,
+      }
+      return { kind: actionSummary.kind, content: clampText(content), title: actionSummary.title, meta }
     }
     case 'fileChange': {
       const changes = Array.isArray(item.changes) ? item.changes : []
       const content = formatFileChanges(changes as Array<{ path?: string; kind?: string; diff?: string; movePath?: string }>)
       const status = typeof item.status === 'string' ? item.status : 'inProgress'
-      return { kind: 'file', content, title: `Files · ${status}` }
+      const meta: MessageMeta = {
+        fileChanges: changes.length ? changes.map((change) => toFileChangeMeta(change as Record<string, unknown>)) : undefined,
+        status,
+      }
+      return { kind: 'file', content, title: 'Files', meta }
     }
     case 'mcpToolCall': {
       const server = typeof item.server === 'string' ? item.server : 'mcp'
@@ -166,5 +211,6 @@ export const buildSystemMessage = (item: ThreadItem): Message | null => {
     title: formatted.title,
     content: formatted.content,
     timestamp: '',
+    meta: formatted.meta,
   }
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "better-codex",
-  "version": "0.1.3",
+  "version": "0.2.0",
   "description": "Web launcher for Codex Hub",
   "bin": {
     "better-codex": "bin/better-codex.cjs"