better-codex 0.1.0

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

@@ -0,0 +1,210 @@
+import { useEffect, useRef } from 'react'
+import { hubClient } from '../services/hub-client'
+import { useAppStore } from '../store'
+import type { Message, ReasoningEffort } from '../types'
+import { buildSystemMessage } from '../utils/item-format'
+import { normalizeApprovalPolicy } from '../utils/approval-policy'
+
+type ThreadResumeResult = {
+  thread?: ThreadData
+  model?: string
+  reasoningEffort?: ReasoningEffort | null
+  approvalPolicy?: string | null
+  cwd?: string | null
+}
+
+type ThreadData = {
+  id: string
+  preview?: string
+  modelProvider?: string
+  createdAt?: number
+  turns?: TurnData[]
+}
+
+type TurnData = {
+  id: string
+  items?: ThreadItem[]
+}
+
+type ThreadItem = {
+  type: string
+  id: string
+  content?: UserInput[]
+  text?: string
+  summary?: string[]
+  changes?: Array<{ path?: string; kind?: string; diff?: string }>
+  command?: string
+  aggregatedOutput?: string
+  status?: string
+  server?: string
+  tool?: string
+  arguments?: unknown
+  result?: unknown
+  error?: unknown
+  query?: string
+}
+
+type UserInput =
+  | { type: 'text'; text: string }
+  | { type: 'image'; url: string }
+  | { type: 'localImage'; path: string }
+
+const toUserContent = (content: UserInput[] = []) => {
+  const parts = content
+    .map((input) => {
+      if (input.type === 'text') {
+        return input.text
+      }
+      if (input.type === 'image') {
+        return `[image: ${input.url}]`
+      }
+      if (input.type === 'localImage') {
+        return `[image: ${input.path}]`
+      }
+      return ''
+    })
+    .filter((part) => part.trim().length > 0)
+
+  return parts.join('\n')
+}
+
+const buildMessagesFromTurns = (turns: TurnData[] = []): Message[] => {
+  const messages: Message[] = []
+  turns.forEach((turn) => {
+    turn.items?.forEach((item) => {
+      if (item.type === 'userMessage') {
+        const content = toUserContent(item.content ?? [])
+        if (!content) {
+          return
+        }
+        messages.push({
+          id: item.id,
+          role: 'user',
+          content,
+          kind: 'chat',
+          timestamp: '',
+        })
+      }
+
+      if (item.type === 'agentMessage') {
+        if (!item.text?.trim()) {
+          return
+        }
+        messages.push({
+          id: item.id,
+          role: 'assistant',
+          content: item.text,
+          kind: 'chat',
+          timestamp: '',
+        })
+        return
+      }
+
+      const systemMessage = buildSystemMessage(item)
+      if (systemMessage) {
+        messages.push(systemMessage)
+      }
+    })
+  })
+  return messages
+}
+
+export const useThreadHistory = () => {
+  const {
+    threads,
+    selectedThreadId,
+    messages,
+    connectionStatus,
+    setMessagesForThread,
+    updateThread,
+    setThreadModel,
+    setThreadEffort,
+    setThreadApproval,
+    setThreadCwd,
+  } = useAppStore()
+
+  const inFlight = useRef<Set<string>>(new Set())
+
+  useEffect(() => {
+    if (!selectedThreadId || connectionStatus !== 'connected') {
+      return
+    }
+
+    const thread = threads.find((item) => item.id === selectedThreadId)
+    if (!thread) {
+      return
+    }
+
+    const existing = messages[selectedThreadId]
+    if (existing !== undefined) {
+      return
+    }
+
+    if (inFlight.current.has(selectedThreadId)) {
+      return
+    }
+
+    let cancelled = false
+
+    const loadHistory = async () => {
+      inFlight.current.add(selectedThreadId)
+      try {
+        const result = (await hubClient.request(thread.accountId, 'thread/resume', {
+          threadId: selectedThreadId,
+        })) as ThreadResumeResult
+
+        if (cancelled) {
+          return
+        }
+
+        const resumeThread = result.thread
+        if (!resumeThread) {
+          return
+        }
+
+        const loadedMessages = buildMessagesFromTurns(resumeThread.turns)
+        setMessagesForThread(selectedThreadId, loadedMessages)
+
+        updateThread(selectedThreadId, {
+          title: resumeThread.preview?.trim() || thread.title,
+          preview: resumeThread.preview?.trim() || thread.preview,
+          model: resumeThread.modelProvider ?? thread.model,
+          messageCount: loadedMessages.length,
+        })
+        if (result.model) {
+          setThreadModel(selectedThreadId, result.model)
+        }
+        if (result.reasoningEffort) {
+          setThreadEffort(selectedThreadId, result.reasoningEffort)
+        }
+        const approvalPolicy = normalizeApprovalPolicy(result.approvalPolicy)
+        if (approvalPolicy) {
+          setThreadApproval(selectedThreadId, approvalPolicy)
+        }
+        if (result.cwd) {
+          setThreadCwd(selectedThreadId, result.cwd)
+        }
+      } catch (error) {
+        console.error(error)
+      } finally {
+        inFlight.current.delete(selectedThreadId)
+      }
+    }
+
+    loadHistory()
+
+    return () => {
+      cancelled = true
+    }
+  }, [
+    connectionStatus,
+    messages,
+    selectedThreadId,
+    setMessagesForThread,
+    setThreadModel,
+    setThreadEffort,
+    setThreadApproval,
+    threads,
+    updateThread,
+  ])
+}

package/apps/web/src/index.css

@@ -0,0 +1,269 @@
+@import "tailwindcss";
+
+@theme {
+  --font-sans: 'Inter', system-ui, -apple-system, sans-serif;
+  
+  --color-bg-primary: #0d0d0d;
+  --color-bg-secondary: #171717;
+  --color-bg-tertiary: #1f1f1f;
+  --color-bg-elevated: #262626;
+  --color-bg-hover: #2a2a2a;
+  
+  --color-border: #2f2f2f;
+  --color-border-subtle: #262626;
+  
+  --color-text-primary: #ececec;
+  --color-text-secondary: #a1a1a1;
+  --color-text-muted: #6b6b6b;
+  
+  --color-accent-green: #10b981;
+  --color-accent-green-soft: rgba(16, 185, 129, 0.15);
+  --color-accent-red: #ef4444;
+  --color-accent-red-soft: rgba(239, 68, 68, 0.15);
+  --color-accent-blue: #3b82f6;
+  --color-accent-pink: #ec4899;
+}
+
+@layer base {
+  * {
+    box-sizing: border-box;
+  }
+  
+  :root {
+    --vh: 1vh;
+    --safe-area-top: env(safe-area-inset-top, 0px);
+    --safe-area-bottom: env(safe-area-inset-bottom, 0px);
+    --safe-area-left: env(safe-area-inset-left, 0px);
+    --safe-area-right: env(safe-area-inset-right, 0px);
+  }
+  
+  html, body {
+    height: calc(var(--vh, 1vh) * 100);
+    max-height: calc(var(--vh, 1vh) * 100);
+    overflow: hidden;
+  }
+  
+  body {
+    margin: 0;
+    background-color: var(--color-bg-primary);
+    color: var(--color-text-primary);
+    font-family: var(--font-sans);
+    -webkit-font-smoothing: antialiased;
+    -moz-osx-font-smoothing: grayscale;
+    overscroll-behavior: none;
+    padding-top: var(--safe-area-top);
+    padding-left: var(--safe-area-left);
+    padding-right: var(--safe-area-right);
+  }
+  
+  #root {
+    height: calc(var(--vh, 1vh) * 100);
+    max-height: calc(var(--vh, 1vh) * 100);
+    overflow: hidden;
+  }
+
+  button {
+    cursor: pointer;
+    font-family: inherit;
+  }
+
+  input {
+    font-family: inherit;
+  }
+
+  input::placeholder {
+    color: var(--color-text-muted);
+  }
+  
+  @media (hover: none) and (pointer: coarse) {
+    button, [role="button"] {
+      -webkit-user-select: none;
+      user-select: none;
+    }
+  }
+}
+
+/* Markdown content styles */
+@layer components {
+  .markdown-content {
+    line-height: 1.6;
+  }
+  
+  .markdown-content p {
+    margin: 0.5em 0;
+  }
+  
+  .markdown-content p:first-child {
+    margin-top: 0;
+  }
+  
+  .markdown-content p:last-child {
+    margin-bottom: 0;
+  }
+  
+  .markdown-content strong {
+    font-weight: 600;
+    color: var(--color-text-primary);
+  }
+  
+  .markdown-content em {
+    font-style: italic;
+  }
+  
+  .markdown-content code {
+    font-family: 'SF Mono', 'Fira Code', 'Monaco', 'Menlo', monospace;
+    font-size: 0.875em;
+    background-color: var(--color-bg-primary);
+    padding: 0.15em 0.4em;
+    border-radius: 4px;
+    color: var(--color-accent-green);
+  }
+  
+  .markdown-content pre {
+    margin: 0.75em 0;
+    padding: 0.875rem 1rem;
+    background-color: var(--color-bg-primary);
+    border-radius: 8px;
+    overflow-x: auto;
+    border: 1px solid var(--color-border-subtle);
+  }
+  
+  .markdown-content pre code {
+    background: none;
+    padding: 0;
+    font-size: 0.8125rem;
+    color: var(--color-text-secondary);
+    line-height: 1.5;
+  }
+  
+  .markdown-content ul,
+  .markdown-content ol {
+    margin: 0.5em 0;
+    padding-left: 1.5em;
+  }
+  
+  .markdown-content li {
+    margin: 0.25em 0;
+  }
+  
+  .markdown-content li::marker {
+    color: var(--color-text-muted);
+  }
+  
+  .markdown-content blockquote {
+    margin: 0.5em 0;
+    padding-left: 1em;
+    border-left: 3px solid var(--color-border);
+    color: var(--color-text-secondary);
+  }
+  
+  .markdown-content h1,
+  .markdown-content h2,
+  .markdown-content h3,
+  .markdown-content h4 {
+    margin: 1em 0 0.5em;
+    font-weight: 600;
+    color: var(--color-text-primary);
+  }
+  
+  .markdown-content h1:first-child,
+  .markdown-content h2:first-child,
+  .markdown-content h3:first-child,
+  .markdown-content h4:first-child {
+    margin-top: 0;
+  }
+  
+  .markdown-content a {
+    color: var(--color-accent-blue);
+    text-decoration: none;
+  }
+  
+  .markdown-content a:hover {
+    text-decoration: underline;
+  }
+  
+  .markdown-content table {
+    width: 100%;
+    margin: 0.75em 0;
+    border-collapse: collapse;
+    font-size: 0.875em;
+  }
+  
+  .markdown-content th,
+  .markdown-content td {
+    padding: 0.5em 0.75em;
+    border: 1px solid var(--color-border-subtle);
+    text-align: left;
+  }
+  
+  .markdown-content th {
+    background-color: var(--color-bg-primary);
+    font-weight: 600;
+    color: var(--color-text-primary);
+  }
+  
+  .markdown-content tr:nth-child(even) {
+    background-color: var(--color-bg-primary);
+  }
+  
+  .markdown-content hr {
+    margin: 1em 0;
+    border: none;
+    border-top: 1px solid var(--color-border-subtle);
+  }
+}
+
+/* Utility classes */
+@layer utilities {
+  .overflow-wrap-anywhere {
+    overflow-wrap: anywhere;
+    word-break: break-word;
+  }
+  
+  .h-dvh {
+    height: calc(var(--vh, 1vh) * 100);
+  }
+  
+  .min-h-dvh {
+    min-height: calc(var(--vh, 1vh) * 100);
+  }
+  
+  .max-h-dvh {
+    max-height: calc(var(--vh, 1vh) * 100);
+  }
+  
+  .fixed-dvh {
+    position: fixed;
+    top: 0;
+    left: 0;
+    right: 0;
+    height: calc(var(--vh, 1vh) * 100);
+  }
+  
+  .backdrop-blur-mobile {
+    backdrop-filter: blur(8px);
+    -webkit-backdrop-filter: blur(8px);
+  }
+  
+  .scrollbar-hide {
+    -ms-overflow-style: none;
+    scrollbar-width: none;
+  }
+  
+  .scrollbar-hide::-webkit-scrollbar {
+    display: none;
+  }
+  
+  .touch-scroll {
+    -webkit-overflow-scrolling: touch;
+    overscroll-behavior: contain;
+  }
+  
+  .pb-safe {
+    padding-bottom: max(1rem, env(safe-area-inset-bottom, 0px));
+  }
+  
+  .pt-safe {
+    padding-top: env(safe-area-inset-top, 0px);
+  }
+}

package/apps/web/src/main.tsx

@@ -0,0 +1,10 @@
+import { StrictMode } from 'react'
+import { createRoot } from 'react-dom/client'
+import './index.css'
+import App from './app'
+
+createRoot(document.getElementById('root')!).render(
+  <StrictMode>
+    <App />
+  </StrictMode>,
+)