better-codex 0.1.0

package/apps/web/src/components/session-view/file-mention-menu.tsx

@@ -0,0 +1,46 @@
+import { Icons } from '../ui'
+import type { FileMention } from '../../types'
+
+interface FileMentionMenuProps {
+  matches: FileMention[]
+  activeIndex: number
+  query: string
+  onSelect: (mention: FileMention) => void
+  onHover: (index: number) => void
+}
+
+export function FileMentionMenu({
+  matches,
+  activeIndex,
+  query,
+  onSelect,
+  onHover,
+}: FileMentionMenuProps) {
+  if (matches.length === 0) return null
+
+  return (
+    <div className="absolute bottom-full left-0 right-0 mb-1 bg-bg-elevated border border-border rounded-lg shadow-lg max-h-[200px] overflow-y-auto z-20">
+      <div className="px-3 py-1.5 text-[10px] text-text-muted border-b border-border">
+        Files matching "{query}"
+      </div>
+      {matches.map((match, index) => (
+        <button
+          key={match.path}
+          onClick={() => onSelect(match)}
+          onMouseEnter={() => onHover(index)}
+          className={`w-full text-left px-3 py-2 flex items-center gap-2 transition-colors ${
+            index === activeIndex
+              ? 'bg-bg-hover'
+              : 'hover:bg-bg-hover/50'
+          }`}
+        >
+          <Icons.File className="w-3.5 h-3.5 text-accent-blue shrink-0" />
+          <div className="min-w-0 flex-1">
+            <div className="text-xs text-text-primary truncate">{match.name}</div>
+            <div className="text-[10px] text-text-muted truncate">{match.path}</div>
+          </div>
+        </button>
+      ))}
+    </div>
+  )
+}

package/apps/web/src/components/session-view/session-auth-banner.tsx

@@ -0,0 +1,61 @@
+import { Button, Icons } from '../ui'
+
+interface SessionAuthBannerProps {
+  visible: boolean
+  pending: boolean
+  onChatgpt: () => void
+  onApiKey: () => void
+  onRefresh?: () => void
+  onCancel?: () => void
+}
+
+export const SessionAuthBanner = ({
+  visible,
+  pending,
+  onChatgpt,
+  onApiKey,
+  onRefresh,
+  onCancel,
+}: SessionAuthBannerProps) => {
+  if (!visible) {
+    return null
+  }
+
+  return (
+    <div className="px-4 py-3 border-b border-border bg-bg-secondary/70">
+      <div className="bg-bg-tertiary border border-border rounded-xl p-4 flex flex-col gap-3">
+        <div className="flex items-start gap-3">
+          <div className="w-9 h-9 rounded-lg bg-bg-primary border border-border flex items-center justify-center">
+            <Icons.Warning className="w-4 h-4 text-yellow-500" />
+          </div>
+          <div>
+            <h3 className="text-sm font-semibold text-text-primary">Authenticate to start sessions</h3>
+            <p className="text-xs text-text-muted mt-1">
+              {pending
+                ? 'Waiting for sign-in to complete. Return here after authorizing the account.'
+                : 'This account is not signed in. Connect with ChatGPT or provide an API key to enable new sessions and messaging.'}
+            </p>
+          </div>
+        </div>
+        <div className="flex flex-wrap gap-2">
+          <Button variant="primary" size="sm" onClick={onChatgpt}>
+            Sign in with ChatGPT
+          </Button>
+          <Button variant="ghost" size="sm" onClick={onApiKey}>
+            Use API key
+          </Button>
+          {pending && onCancel && (
+            <Button variant="ghost" size="sm" onClick={onCancel}>
+              Cancel login
+            </Button>
+          )}
+          {onRefresh && (
+            <Button variant="ghost" size="sm" onClick={onRefresh}>
+              Check status
+            </Button>
+          )}
+        </div>
+      </div>
+    </div>
+  )
+}

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

@@ -0,0 +1,328 @@
+import type { KeyboardEvent, RefObject, ClipboardEvent, DragEvent } from 'react'
+import { useRef } from 'react'
+import { SlashCommandMenu } from '../composer/slash-command-menu'
+import { FileMentionMenu } from './file-mention-menu'
+import { Button, IconButton, Icons, Select, type SelectOption } from '../ui'
+import type { SlashCommandDefinition } from '../../utils/slash-commands'
+import type { Attachment, FileMention } from '../../types'
+
+interface SessionComposerProps {
+  inputValue: string
+  onInputChange: (value: string) => void
+  onKeyDown: (event: KeyboardEvent<HTMLTextAreaElement>) => void
+  onSend: () => void
+  onStop?: () => void
+  textareaRef: RefObject<HTMLTextAreaElement | null>
+  canInteract: boolean
+  slashMenuOpen: boolean
+  slashMatches: SlashCommandDefinition[]
+  slashIndex: number
+  isTaskRunning: boolean
+  onSlashSelect: (command: SlashCommandDefinition) => void
+  onSlashHover: (index: number) => void
+  modelOptions: SelectOption[]
+  effortOptions: SelectOption[]
+  effectiveModel: string
+  effectiveEffort: string
+  onModelChange: (value: string) => void
+  onEffortChange: (value: string) => void
+  showModelSelect: boolean
+  showEffortSelect: boolean
+  queuedCount: number
+  webSearchEnabled: boolean
+  onWebSearchToggle: () => void
+  attachments: Attachment[]
+  onAttachmentsChange: (attachments: Attachment[]) => void
+  fileMentions: FileMention[]
+  onFileMentionsChange: (mentions: FileMention[]) => void
+  mentionMenuOpen: boolean
+  mentionQuery: string
+  mentionMatches: FileMention[]
+  mentionIndex: number
+  onMentionSelect: (mention: FileMention) => void
+  onMentionHover: (index: number) => void
+}
+
+export const SessionComposer = ({
+  inputValue,
+  onInputChange,
+  onKeyDown,
+  onSend,
+  onStop,
+  textareaRef,
+  canInteract,
+  slashMenuOpen,
+  slashMatches,
+  slashIndex,
+  isTaskRunning,
+  onSlashSelect,
+  onSlashHover,
+  modelOptions,
+  effortOptions,
+  effectiveModel,
+  effectiveEffort,
+  onModelChange,
+  onEffortChange,
+  showModelSelect,
+  showEffortSelect,
+  queuedCount,
+  webSearchEnabled,
+  onWebSearchToggle,
+  attachments,
+  onAttachmentsChange,
+  fileMentions,
+  onFileMentionsChange,
+  mentionMenuOpen,
+  mentionQuery,
+  mentionMatches,
+  mentionIndex,
+  onMentionSelect,
+  onMentionHover,
+}: SessionComposerProps) => {
+  const fileInputRef = useRef<HTMLInputElement>(null)
+
+  const handlePaste = (e: ClipboardEvent<HTMLTextAreaElement>) => {
+    const items = e.clipboardData?.items
+    if (!items) return
+
+    for (const item of items) {
+      if (item.type.startsWith('image/')) {
+        e.preventDefault()
+        const file = item.getAsFile()
+        if (file) {
+          const reader = new FileReader()
+          reader.onload = (event) => {
+            const dataUrl = event.target?.result as string
+            const newAttachment: Attachment = {
+              id: `img-${Date.now()}`,
+              type: 'image',
+              name: `pasted-image-${Date.now()}.png`,
+              url: dataUrl,
+              size: file.size,
+            }
+            onAttachmentsChange([...attachments, newAttachment])
+          }
+          reader.readAsDataURL(file)
+        }
+        return
+      }
+    }
+  }
+
+  const handleDrop = (e: DragEvent<HTMLTextAreaElement>) => {
+    e.preventDefault()
+    const files = e.dataTransfer?.files
+    if (!files) return
+
+    for (const file of files) {
+      if (file.type.startsWith('image/')) {
+        const reader = new FileReader()
+        reader.onload = (event) => {
+          const dataUrl = event.target?.result as string
+          const newAttachment: Attachment = {
+            id: `img-${Date.now()}`,
+            type: 'image',
+            name: file.name,
+            url: dataUrl,
+            size: file.size,
+          }
+          onAttachmentsChange([...attachments, newAttachment])
+        }
+        reader.readAsDataURL(file)
+      }
+    }
+  }
+
+  const handleFileInputChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+    const files = e.target.files
+    if (!files) return
+
+    for (const file of files) {
+      if (file.type.startsWith('image/')) {
+        const reader = new FileReader()
+        reader.onload = (event) => {
+          const dataUrl = event.target?.result as string
+          const newAttachment: Attachment = {
+            id: `img-${Date.now()}`,
+            type: 'image',
+            name: file.name,
+            url: dataUrl,
+            size: file.size,
+          }
+          onAttachmentsChange([...attachments, newAttachment])
+        }
+        reader.readAsDataURL(file)
+      }
+    }
+    // Reset input
+    e.target.value = ''
+  }
+
+  const removeAttachment = (id: string) => {
+    onAttachmentsChange(attachments.filter(a => a.id !== id))
+  }
+
+  const removeMention = (path: string) => {
+    onFileMentionsChange(fileMentions.filter(m => m.path !== path))
+  }
+
+  return (
+    <div className="px-3 py-3 md:px-6 md:py-4 border-t border-border shrink-0 pb-safe">
+      <div className="max-w-4xl mx-auto">
+        <div className="bg-bg-tertiary border border-border rounded-xl overflow-visible focus-within:border-text-muted transition-colors relative">
+          {slashMenuOpen && (
+            <SlashCommandMenu
+              commands={slashMatches}
+              activeIndex={slashIndex}
+              isTaskRunning={isTaskRunning}
+              onSelect={onSlashSelect}
+              onHover={onSlashHover}
+            />
+          )}
+          {mentionMenuOpen && mentionMatches.length > 0 && (
+            <FileMentionMenu
+              matches={mentionMatches}
+              activeIndex={mentionIndex}
+              query={mentionQuery}
+              onSelect={onMentionSelect}
+              onHover={onMentionHover}
+            />
+          )}
+          
+          {/* Attachments preview */}
+          {(attachments.length > 0 || fileMentions.length > 0) && (
+            <div className="px-4 pt-3 flex flex-wrap gap-2">
+              {attachments.map((attachment) => (
+                <div 
+                  key={attachment.id} 
+                  className="relative group flex items-center gap-2 px-2 py-1 bg-bg-elevated border border-border rounded-lg"
+                >
+                  {attachment.type === 'image' && attachment.url && (
+                    <img 
+                      src={attachment.url} 
+                      alt={attachment.name} 
+                      className="w-8 h-8 object-cover rounded"
+                    />
+                  )}
+                  <span className="text-[10px] text-text-secondary max-w-[100px] truncate">
+                    {attachment.name}
+                  </span>
+                  <button
+                    onClick={() => removeAttachment(attachment.id)}
+                    className="p-0.5 hover:bg-bg-hover rounded transition-colors"
+                  >
+                    <Icons.X className="w-3 h-3 text-text-muted" />
+                  </button>
+                </div>
+              ))}
+              {fileMentions.map((mention) => (
+                <div 
+                  key={mention.path} 
+                  className="flex items-center gap-1.5 px-2 py-1 bg-accent-blue/10 border border-accent-blue/30 rounded-lg"
+                >
+                  <Icons.File className="w-3 h-3 text-accent-blue" />
+                  <span className="text-[10px] text-accent-blue max-w-[150px] truncate">
+                    {mention.name}
+                  </span>
+                  <button
+                    onClick={() => removeMention(mention.path)}
+                    className="p-0.5 hover:bg-accent-blue/20 rounded transition-colors"
+                  >
+                    <Icons.X className="w-3 h-3 text-accent-blue" />
+                  </button>
+                </div>
+              ))}
+            </div>
+          )}
+
+          <textarea
+            ref={textareaRef}
+            value={inputValue}
+            onChange={(event) => onInputChange(event.target.value)}
+            onKeyDown={onKeyDown}
+            onPaste={handlePaste}
+            onDrop={handleDrop}
+            onDragOver={(e) => e.preventDefault()}
+            placeholder="Describe a task... (@ to mention files, Enter to send)"
+            rows={3}
+            disabled={!canInteract}
+            className="w-full bg-transparent text-sm text-text-primary placeholder:text-text-muted outline-none resize-none px-4 py-3 leading-relaxed disabled:opacity-50"
+          />
+          <input
+            ref={fileInputRef}
+            type="file"
+            accept="image/*"
+            multiple
+            onChange={handleFileInputChange}
+            className="hidden"
+          />
+          <div className="flex items-center justify-between px-2.5 py-2 border-t border-border bg-bg-secondary/50 rounded-b-xl gap-2">
+            <div className="flex items-center gap-1 flex-wrap min-w-0 overflow-x-auto scrollbar-hide">
+              <IconButton 
+                icon={<Icons.Paperclip className="w-4 h-4 text-text-muted" />} 
+                size="sm" 
+                disabled={!canInteract}
+                onClick={() => fileInputRef.current?.click()}
+              />
+              <IconButton icon={<Icons.Microphone className="w-4 h-4 text-text-muted" />} size="sm" disabled={!canInteract} className="hidden sm:flex" />
+              <IconButton 
+                icon={<Icons.Globe className={`w-4 h-4 ${webSearchEnabled ? 'text-accent-green' : 'text-text-muted'}`} />} 
+                size="sm" 
+                disabled={!canInteract}
+                onClick={onWebSearchToggle}
+              />
+              {showModelSelect && (
+                <Select
+                  options={modelOptions}
+                  value={effectiveModel}
+                  onChange={onModelChange}
+                  size="sm"
+                  disabled={!canInteract}
+                  label="Select Model"
+                />
+              )}
+              {showEffortSelect && (
+                <Select
+                  options={effortOptions}
+                  value={effectiveEffort}
+                  onChange={onEffortChange}
+                  placeholder="Thinking"
+                  size="sm"
+                  disabled={!canInteract}
+                  label="Reasoning Effort"
+                />
+              )}
+            </div>
+            <div className="flex items-center gap-2 sm:gap-3 shrink-0">
+              {queuedCount > 0 && (
+                <div className="text-[10px] text-text-muted hidden sm:block">
+                  Queued {queuedCount}
+                </div>
+              )}
+              {isTaskRunning && (
+                <Button
+                  variant="ghost"
+                  size="sm"
+                  onClick={onStop}
+                  disabled={!canInteract || !onStop}
+                >
+                  <Icons.X className="w-3.5 h-3.5" />
+                  <span className="hidden sm:inline">Stop</span>
+                </Button>
+              )}
+              <Button
+                variant="primary"
+                size="sm"
+                onClick={onSend}
+                disabled={!inputValue.trim() || !canInteract}
+              >
+                <Icons.ArrowUp className="w-3.5 h-3.5" />
+                <span className="hidden sm:inline">Send</span>
+              </Button>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  )
+}