better-codex 0.1.0

package/apps/web/src/components/session-view/session-dialogs.tsx

@@ -0,0 +1,280 @@
+import type { ApprovalPolicy, ReasoningEffort, ReasoningSummary } from '../../types'
+import { AlertDialog, Button, CopyDialog, Dialog, PromptDialog, Select, type SelectOption } from '../ui'
+
+interface SessionDialogsProps {
+  showModelDialog: boolean
+  onCloseModelDialog: () => void
+  modelOptions: SelectOption[]
+  pendingModelId: string
+  setPendingModelId: (value: string) => void
+  pendingEffortOptions: SelectOption[]
+  pendingEffort: ReasoningEffort | ''
+  setPendingEffort: (value: ReasoningEffort | '') => void
+  summaryOptions: SelectOption[]
+  pendingSummary: ReasoningSummary | ''
+  setPendingSummary: (value: ReasoningSummary | '') => void
+  pendingCwd: string
+  setPendingCwd: (value: string) => void
+  onApplyModel: () => void
+  showApprovalsDialog: boolean
+  onCloseApprovalsDialog: () => void
+  approvalOptions: Array<{ value: ApprovalPolicy; label: string; description: string }>
+  pendingApproval: ApprovalPolicy
+  setPendingApproval: (value: ApprovalPolicy) => void
+  onApplyApproval: () => void
+  showSkillsDialog: boolean
+  onCloseSkillsDialog: () => void
+  skillsLoading: boolean
+  skillsError: string | null
+  skillsList: Array<{ name: string; description: string; path: string }>
+  onSelectSkill: (name: string) => void
+  showResumeDialog: boolean
+  onCloseResumeDialog: () => void
+  resumeCandidates: Array<{ id: string; title: string; preview: string }>
+  onResumeThread: (threadId: string) => void
+  showFeedbackDialog: boolean
+  onCloseFeedbackDialog: () => void
+  feedbackCategory: string
+  setFeedbackCategory: (value: string) => void
+  feedbackReason: string
+  setFeedbackReason: (value: string) => void
+  feedbackIncludeLogs: boolean
+  setFeedbackIncludeLogs: (value: boolean) => void
+  onSendFeedback: () => void
+  showApiKeyPrompt: boolean
+  onCloseApiKeyPrompt: () => void
+  onApiKeySubmit: (value: string) => void
+  copyDialog: { open: boolean; url: string }
+  setCopyDialog: (state: { open: boolean; url: string }) => void
+  alertDialog: { open: boolean; title: string; message: string; variant: 'info' | 'warning' | 'error' }
+  setAlertDialog: (state: { open: boolean; title: string; message: string; variant: 'info' | 'warning' | 'error' }) => void
+}
+
+export const SessionDialogs = ({
+  showModelDialog,
+  onCloseModelDialog,
+  modelOptions,
+  pendingModelId,
+  setPendingModelId,
+  pendingEffortOptions,
+  pendingEffort,
+  setPendingEffort,
+  summaryOptions,
+  pendingSummary,
+  setPendingSummary,
+  pendingCwd,
+  setPendingCwd,
+  onApplyModel,
+  showApprovalsDialog,
+  onCloseApprovalsDialog,
+  approvalOptions,
+  pendingApproval,
+  setPendingApproval,
+  onApplyApproval,
+  showSkillsDialog,
+  onCloseSkillsDialog,
+  skillsLoading,
+  skillsError,
+  skillsList,
+  onSelectSkill,
+  showResumeDialog,
+  onCloseResumeDialog,
+  resumeCandidates,
+  onResumeThread,
+  showFeedbackDialog,
+  onCloseFeedbackDialog,
+  feedbackCategory,
+  setFeedbackCategory,
+  feedbackReason,
+  setFeedbackReason,
+  feedbackIncludeLogs,
+  setFeedbackIncludeLogs,
+  onSendFeedback,
+  showApiKeyPrompt,
+  onCloseApiKeyPrompt,
+  onApiKeySubmit,
+  copyDialog,
+  setCopyDialog,
+  alertDialog,
+  setAlertDialog,
+}: SessionDialogsProps) => {
+  return (
+    <>
+      <Dialog open={showModelDialog} onClose={onCloseModelDialog} title="Model & Reasoning">
+        <div className="space-y-3">
+          <Select
+            options={modelOptions}
+            value={pendingModelId}
+            onChange={(value) => setPendingModelId(value)}
+            placeholder="Select model"
+          />
+          {pendingEffortOptions.length > 0 && (
+            <Select
+              options={pendingEffortOptions}
+              value={pendingEffort || ''}
+              onChange={(value) => setPendingEffort(value as ReasoningEffort)}
+              placeholder="Effort"
+            />
+          )}
+          <Select
+            options={summaryOptions}
+            value={pendingSummary || ''}
+            onChange={(value) => setPendingSummary(value as ReasoningSummary)}
+            placeholder="Summary"
+          />
+          <div className="space-y-1">
+            <div className="text-[10px] uppercase tracking-[0.2em] text-text-muted">
+              Working directory
+            </div>
+            <input
+              value={pendingCwd}
+              onChange={(event) => setPendingCwd(event.target.value)}
+              placeholder="/path/to/repo"
+              className="w-full bg-bg-tertiary border border-border rounded-lg px-3 py-2 text-xs text-text-primary placeholder:text-text-muted outline-none focus:border-text-muted transition-colors"
+            />
+          </div>
+        </div>
+        <div className="flex justify-end gap-2 mt-4">
+          <Button variant="ghost" size="sm" onClick={onCloseModelDialog}>
+            Cancel
+          </Button>
+          <Button variant="primary" size="sm" onClick={onApplyModel}>
+            Apply
+          </Button>
+        </div>
+      </Dialog>
+
+      <Dialog open={showApprovalsDialog} onClose={onCloseApprovalsDialog} title="Approvals">
+        <div className="space-y-2">
+          {approvalOptions.map((option) => (
+            <button
+              key={option.value}
+              type="button"
+              onClick={() => setPendingApproval(option.value)}
+              className={`w-full text-left px-3 py-2 rounded-lg border transition-colors ${
+                pendingApproval === option.value
+                  ? 'border-text-muted bg-bg-elevated text-text-primary'
+                  : 'border-border bg-bg-tertiary text-text-secondary hover:bg-bg-hover'
+              }`}
+            >
+              <div className="text-xs font-semibold">{option.label}</div>
+              <div className="text-[10px] text-text-muted mt-0.5">{option.description}</div>
+            </button>
+          ))}
+        </div>
+        <div className="flex justify-end gap-2 mt-4">
+          <Button variant="ghost" size="sm" onClick={onCloseApprovalsDialog}>
+            Cancel
+          </Button>
+          <Button variant="primary" size="sm" onClick={onApplyApproval}>
+            Apply
+          </Button>
+        </div>
+      </Dialog>
+
+      <Dialog open={showSkillsDialog} onClose={onCloseSkillsDialog} title="Skills">
+        <div className="space-y-2 max-h-[240px] overflow-y-auto">
+          {skillsLoading && <div className="text-xs text-text-muted">Loading skills...</div>}
+          {skillsError && <div className="text-xs text-accent-red">{skillsError}</div>}
+          {!skillsLoading && !skillsError && skillsList.length === 0 && (
+            <div className="text-xs text-text-muted">No skills found.</div>
+          )}
+          {!skillsLoading && !skillsError && skillsList.map((skill) => (
+            <button
+              key={skill.path}
+              type="button"
+              onClick={() => onSelectSkill(skill.name)}
+              className="w-full text-left px-3 py-2 rounded-lg border border-border bg-bg-tertiary text-text-secondary hover:bg-bg-hover transition-colors"
+            >
+              <div className="text-xs font-semibold text-text-primary">{skill.name}</div>
+              <div className="text-[10px] text-text-muted mt-0.5">{skill.description}</div>
+            </button>
+          ))}
+        </div>
+      </Dialog>
+
+      <Dialog open={showResumeDialog} onClose={onCloseResumeDialog} title="Resume Session">
+        <div className="space-y-2 max-h-[240px] overflow-y-auto">
+          {resumeCandidates.length === 0 && (
+            <div className="text-xs text-text-muted">No sessions available.</div>
+          )}
+          {resumeCandidates.map((thread) => (
+            <button
+              key={thread.id}
+              type="button"
+              onClick={() => onResumeThread(thread.id)}
+              className="w-full text-left px-3 py-2 rounded-lg border border-border bg-bg-tertiary text-text-secondary hover:bg-bg-hover transition-colors"
+            >
+              <div className="text-xs font-semibold text-text-primary truncate">{thread.title}</div>
+              <div className="text-[10px] text-text-muted mt-0.5 truncate">{thread.preview}</div>
+            </button>
+          ))}
+        </div>
+      </Dialog>
+
+      <Dialog open={showFeedbackDialog} onClose={onCloseFeedbackDialog} title="Send Feedback">
+        <div className="space-y-3">
+          <Select
+            options={[
+              { value: 'bug', label: 'Bug' },
+              { value: 'feature', label: 'Feature request' },
+              { value: 'ux', label: 'UX' },
+              { value: 'other', label: 'Other' },
+            ]}
+            value={feedbackCategory}
+            onChange={(value) => setFeedbackCategory(value)}
+          />
+          <textarea
+            value={feedbackReason}
+            onChange={(event) => setFeedbackReason(event.target.value)}
+            rows={3}
+            placeholder="Describe the issue or suggestion..."
+            className="w-full bg-bg-tertiary border border-border rounded-lg px-3 py-2 text-sm text-text-primary placeholder:text-text-muted outline-none focus:border-text-muted transition-colors"
+          />
+          <label className="flex items-center gap-2 text-xs text-text-muted">
+            <input
+              type="checkbox"
+              checked={feedbackIncludeLogs}
+              onChange={(event) => setFeedbackIncludeLogs(event.target.checked)}
+              className="accent-accent-green"
+            />
+            Include logs
+          </label>
+        </div>
+        <div className="flex justify-end gap-2 mt-4">
+          <Button variant="ghost" size="sm" onClick={onCloseFeedbackDialog}>
+            Cancel
+          </Button>
+          <Button variant="primary" size="sm" onClick={onSendFeedback}>
+            Send
+          </Button>
+        </div>
+      </Dialog>
+
+      <PromptDialog
+        open={showApiKeyPrompt}
+        onClose={onCloseApiKeyPrompt}
+        onSubmit={onApiKeySubmit}
+        title="Use API Key"
+        placeholder="Paste OpenAI API key..."
+        submitLabel="Connect"
+      />
+
+      <CopyDialog
+        open={copyDialog.open}
+        onClose={() => setCopyDialog({ open: false, url: '' })}
+        title="Sign In"
+        message="Open this URL in your browser to sign in to your OpenAI account:"
+        copyText={copyDialog.url}
+      />
+
+      <AlertDialog
+        open={alertDialog.open}
+        onClose={() => setAlertDialog({ ...alertDialog, open: false })}
+        title={alertDialog.title}
+        message={alertDialog.message}
+        variant={alertDialog.variant}
+      />
+    </>
+  )
+}

package/apps/web/src/components/session-view/session-empty.tsx

@@ -0,0 +1,47 @@
+import { useEffect, useState } from 'react'
+import { Button, Icons } from '../ui'
+import { STARTUP_FRAMES, STARTUP_FRAME_TICK_MS } from '../loading/startup-ascii'
+import { useAppStore } from '../../store'
+
+interface SessionEmptyProps {
+  onNewSession?: () => void
+}
+
+export const SessionEmpty = ({ onNewSession }: SessionEmptyProps) => {
+  const [frameIndex, setFrameIndex] = useState(0)
+  const { setMobileThreadListOpen } = useAppStore()
+
+  useEffect(() => {
+    const intervalId = window.setInterval(() => {
+      setFrameIndex((current) => (current + 1) % STARTUP_FRAMES.length)
+    }, STARTUP_FRAME_TICK_MS)
+    return () => window.clearInterval(intervalId)
+  }, [])
+
+  return (
+    <main className="flex-1 flex flex-col items-center justify-center px-4 md:px-6 bg-bg-primary">
+      <pre className="whitespace-pre font-mono text-[9px] sm:text-[11px] leading-tight text-text-secondary mb-5 overflow-hidden max-w-full">
+        {STARTUP_FRAMES[frameIndex]}
+      </pre>
+      <h2 className="text-base sm:text-lg font-semibold text-text-primary mb-2 text-center">Select a session</h2>
+      <p className="text-xs text-text-muted text-center max-w-xs mb-5 leading-relaxed">
+        Choose a session from the list to view the conversation, or start a new one to begin coding.
+      </p>
+      <div className="flex flex-col sm:flex-row gap-2">
+        <Button 
+          variant="ghost" 
+          size="lg" 
+          onClick={() => setMobileThreadListOpen(true)}
+          className="md:hidden"
+        >
+          <Icons.List className="w-4 h-4" />
+          View Sessions
+        </Button>
+        <Button variant="primary" size="lg" onClick={onNewSession}>
+          <Icons.Plus className="w-4 h-4" />
+          New Session
+        </Button>
+      </div>
+    </main>
+  )
+}

package/apps/web/src/components/session-view/session-header.tsx

@@ -0,0 +1,49 @@
+import { IconButton, Icons } from '../ui'
+
+interface SessionHeaderProps {
+  title: string
+  accountName?: string
+  model?: string
+  status?: string
+  canInteract: boolean
+  onArchive: () => void
+}
+
+export const SessionHeader = ({
+  title,
+  accountName,
+  model,
+  status,
+  canInteract,
+  onArchive,
+}: SessionHeaderProps) => {
+  const isActive = status === 'active'
+
+  return (
+    <header className="hidden md:flex px-4 py-3 border-b border-border items-center justify-between shrink-0 gap-4">
+      <div className="min-w-0 flex-1 overflow-hidden">
+        <h2 className="text-sm font-semibold text-text-primary truncate">{title}</h2>
+        <div className="flex items-center gap-2 mt-0.5 text-[10px] text-text-muted">
+          <span className="truncate max-w-[100px]">{accountName || 'Unknown account'}</span>
+          <span>·</span>
+          <span>{model || 'unknown'}</span>
+          <span>·</span>
+          <span className={`flex items-center gap-1 ${isActive ? 'text-accent-green' : ''}`}>
+            {isActive && <span className="w-1.5 h-1.5 rounded-full bg-accent-green animate-pulse" />}
+            {status || 'idle'}
+          </span>
+        </div>
+      </div>
+      <div className="flex items-center gap-2 shrink-0">
+        <IconButton icon={<Icons.Copy className="w-4 h-4 text-text-muted" />} size="sm" />
+        <IconButton
+          icon={<Icons.Archive className="w-4 h-4 text-text-muted" />}
+          size="sm"
+          disabled={!canInteract}
+          onClick={onArchive}
+        />
+        <IconButton icon={<Icons.MoreVertical className="w-4 h-4 text-text-muted" />} size="sm" />
+      </div>
+    </header>
+  )
+}

package/apps/web/src/components/ui/avatar.tsx

@@ -0,0 +1,19 @@
+interface AvatarProps {
+  name: string
+  size?: 'sm' | 'md' | 'lg'
+  className?: string
+}
+
+export function Avatar({ name, size = 'md', className = '' }: AvatarProps) {
+  const sizeStyles = {
+    sm: 'w-6 h-6 text-xs',
+    md: 'w-8 h-8 text-sm',
+    lg: 'w-10 h-10 text-base',
+  }
+
+  return (
+    <div className={`rounded-full bg-bg-tertiary flex items-center justify-center font-medium text-text-primary ${sizeStyles[size]} ${className}`}>
+      {name[0].toUpperCase()}
+    </div>
+  )
+}

package/apps/web/src/components/ui/badge.tsx

@@ -0,0 +1,21 @@
+import type { ReactNode } from 'react'
+
+interface BadgeProps {
+  children: ReactNode
+  variant?: 'default' | 'success' | 'warning' | 'error'
+}
+
+export function Badge({ children, variant = 'default' }: BadgeProps) {
+  const variantStyles = {
+    default: 'bg-bg-elevated text-text-secondary border-border',
+    success: 'bg-accent-green/15 text-accent-green border-accent-green/20',
+    warning: 'bg-yellow-500/15 text-yellow-500 border-yellow-500/20',
+    error: 'bg-accent-red/15 text-accent-red border-accent-red/20',
+  }
+
+  return (
+    <span className={`inline-flex items-center px-2 py-0.5 rounded text-xs font-medium border ${variantStyles[variant]}`}>
+      {children}
+    </span>
+  )
+}

package/apps/web/src/components/ui/button.tsx

@@ -0,0 +1,47 @@
+import type { ReactNode } from 'react'
+
+interface ButtonProps {
+  children: ReactNode
+  onClick?: () => void
+  variant?: 'primary' | 'secondary' | 'ghost' | 'danger'
+  size?: 'sm' | 'md' | 'lg'
+  className?: string
+  disabled?: boolean
+  fullWidth?: boolean
+}
+
+export function Button({
+  children,
+  onClick,
+  variant = 'secondary',
+  size = 'md',
+  className = '',
+  disabled = false,
+  fullWidth = false,
+}: ButtonProps) {
+  const baseStyles =
+    'inline-flex items-center justify-center gap-2 font-medium transition-colors rounded-lg disabled:opacity-50 disabled:cursor-not-allowed'
+
+  const variantStyles = {
+    primary: 'bg-accent-green text-black hover:bg-accent-green/90',
+    secondary: 'bg-bg-elevated border border-border text-text-secondary hover:bg-bg-hover',
+    ghost: 'text-text-muted hover:text-text-secondary hover:bg-bg-hover',
+    danger: 'bg-accent-red text-white hover:bg-accent-red/90',
+  }
+
+  const sizeStyles = {
+    sm: 'px-2.5 py-1 text-xs',
+    md: 'px-3 py-1.5 text-sm',
+    lg: 'px-4 py-2 text-sm',
+  }
+
+  return (
+    <button
+      onClick={onClick}
+      disabled={disabled}
+      className={`${baseStyles} ${variantStyles[variant]} ${sizeStyles[size]} ${fullWidth ? 'w-full' : ''} ${className}`}
+    >
+      {children}
+    </button>
+  )
+}

package/apps/web/src/components/ui/collapsible-content.tsx

@@ -0,0 +1,114 @@
+import { useState, useRef, useEffect } from 'react'
+import { Icons } from './icons'
+
+interface CollapsibleContentProps {
+  children: React.ReactNode
+  maxHeight?: number
+  className?: string
+  showLineCount?: boolean
+}
+
+export function CollapsibleContent({ 
+  children, 
+  maxHeight = 200, 
+  className = '',
+  showLineCount = true,
+}: CollapsibleContentProps) {
+  const [isExpanded, setIsExpanded] = useState(false)
+  const [needsCollapse, setNeedsCollapse] = useState(false)
+  const [lineCount, setLineCount] = useState(0)
+  const contentRef = useRef<HTMLDivElement>(null)
+
+  useEffect(() => {
+    if (contentRef.current) {
+      const height = contentRef.current.scrollHeight
+      setNeedsCollapse(height > maxHeight)
+      
+      const text = contentRef.current.textContent || ''
+      const lines = text.split('\n').length
+      setLineCount(lines)
+    }
+  }, [children, maxHeight])
+
+  if (!needsCollapse) {
+    return <div className={className}>{children}</div>
+  }
+
+  return (
+    <div className={className}>
+      <div
+        ref={contentRef}
+        className="relative overflow-hidden transition-[max-height] duration-300 ease-in-out"
+        style={{ maxHeight: isExpanded ? 'none' : maxHeight }}
+      >
+        {children}
+        {!isExpanded && (
+          <div className="absolute bottom-0 left-0 right-0 h-12 bg-gradient-to-t from-bg-tertiary to-transparent pointer-events-none" />
+        )}
+      </div>
+      <button
+        onClick={() => setIsExpanded(!isExpanded)}
+        className="flex items-center gap-1.5 mt-2 text-xs text-text-muted hover:text-text-primary transition-colors group"
+      >
+        <Icons.ChevronDown 
+          className={`w-3 h-3 transition-transform duration-200 ${isExpanded ? 'rotate-180' : ''}`}
+        />
+        <span>
+          {isExpanded ? 'Collapse' : 'Expand'}
+          {showLineCount && lineCount > 0 && (
+            <span className="text-text-muted/60 ml-1">({lineCount} lines)</span>
+          )}
+        </span>
+      </button>
+    </div>
+  )
+}
+
+interface CollapsibleCodeBlockProps {
+  code: string
+  language?: string
+  maxLines?: number
+  className?: string
+}
+
+export function CollapsibleCodeBlock({ 
+  code, 
+  language,
+  maxLines = 15,
+  className = '',
+}: CollapsibleCodeBlockProps) {
+  const [isExpanded, setIsExpanded] = useState(false)
+  const lines = code.split('\n')
+  const needsCollapse = lines.length > maxLines
+  const visibleCode = needsCollapse && !isExpanded 
+    ? lines.slice(0, maxLines).join('\n')
+    : code
+
+  return (
+    <div className={className}>
+      <div className="relative">
+        <pre className="text-xs font-mono whitespace-pre-wrap leading-relaxed break-words overflow-wrap-anywhere">
+          <code className={language ? `language-${language}` : ''}>
+            {visibleCode}
+          </code>
+        </pre>
+        {needsCollapse && !isExpanded && (
+          <div className="absolute bottom-0 left-0 right-0 h-8 bg-gradient-to-t from-bg-primary to-transparent pointer-events-none" />
+        )}
+      </div>
+      {needsCollapse && (
+        <button
+          onClick={() => setIsExpanded(!isExpanded)}
+          className="flex items-center gap-1.5 mt-2 text-xs text-text-muted hover:text-text-primary transition-colors"
+        >
+          <Icons.ChevronDown 
+            className={`w-3 h-3 transition-transform duration-200 ${isExpanded ? 'rotate-180' : ''}`}
+          />
+          <span>
+            {isExpanded ? 'Show less' : `Show ${lines.length - maxLines} more lines`}
+          </span>
+        </button>
+      )}
+    </div>
+  )
+}