ethagent 3.3.3 → 4.0.0

package/src/ui/Select.tsx

@@ -1,8 +1,16 @@
 import React, { useEffect, useMemo, useState } from 'react'
 import { Box, Text } from 'ink'
-import { theme } from './theme.js'
+import { theme, PANEL_WIDTH } from './theme.js'
 import { useAppInput } from '../app/input/AppInputProvider.js'
 
+const CONTENT_WIDTH = PANEL_WIDTH - 4
+
+function fitHint(hint: string, budget: number): string {
+  if (budget < 8) return ''
+  if (hint.length <= budget) return hint
+  return `${hint.slice(0, budget - 1)}…`
+}
+
 export type SelectOption<T> = {
   value: T
   label: string
@@ -121,22 +129,36 @@ export function Select<T>({
         const bold = option.bold ?? (isSection || (isActive && selectable))
         const inlineHint = Boolean(option.hint && hintLayout === 'inline' && !isSection)
         const belowHint = Boolean(option.hint && (!inlineHint || isSection))
+        const inlineHintText = inlineHint
+          ? fitHint(option.hint ?? '', CONTENT_WIDTH - rowIndent - prefix.length - option.label.length - 4)
+          : ''
+        const belowHintText = belowHint
+          ? fitHint(option.hint ?? '', CONTENT_WIDTH - rowIndent - 2)
+          : ''
+        const showHeadHighlight = isActive && selectable && !isSection && option.label.length > 0
         return (
           <Box key={absoluteIndex} flexDirection="column">
             <Box flexDirection="row" marginLeft={rowIndent}>
               <Text color={prefixColor}>{cursor} </Text>
               {prefix ? <Text color={prefixColor}>{prefix}</Text> : null}
-              <Text color={labelColor} bold={bold}>{option.label}</Text>
-              {inlineHint ? <Text color={hintColor}>  {option.hint}</Text> : null}
+              {showHeadHighlight ? (
+                <>
+                  <Text color={theme.accentHighlight} bold>{option.label[0]}</Text>
+                  <Text color={labelColor} bold={bold}>{option.label.slice(1)}</Text>
+                </>
+              ) : (
+                <Text color={labelColor} bold={bold}>{option.label}</Text>
+              )}
+              {inlineHint && inlineHintText ? <Text color={hintColor}>  {inlineHintText}</Text> : null}
             </Box>
             {option.subtext ? (
               <Box marginLeft={2 + rowIndent}>
                 <Text color={subtextColor}>{option.subtext}</Text>
               </Box>
             ) : null}
-            {belowHint ? (
+            {belowHint && belowHintText ? (
               <Box marginLeft={2 + rowIndent}>
-                <Text color={hintColor}>{option.hint}</Text>
+                <Text color={hintColor}>{belowHintText}</Text>
               </Box>
             ) : null}
           </Box>

package/src/ui/Spinner.tsx

@@ -1,6 +1,8 @@
 import React, { useEffect, useRef, useState } from 'react'
 import { Text } from 'ink'
-import { theme } from './theme.js'
+import { theme, PANEL_WIDTH } from './theme.js'
+
+const CONTENT_WIDTH = PANEL_WIDTH - 4
 
 export const SPINNER_VERBS: string[] = [
   'accomplishing',
@@ -212,7 +214,7 @@ type SpinnerProps = {
   showElapsed?: boolean
 }
 
-const FRAMES = ['.', 'o', 'O', 'o']
+const FRAMES = ['⠋', '⠙', '⠹', '⠸', '⠼', '⠴', '⠦', '⠧', '⠇', '⠏']
 
 export const Spinner: React.FC<SpinnerProps> = ({
   active = true,
@@ -249,12 +251,21 @@ export const Spinner: React.FC<SpinnerProps> = ({
     if (!active) return
     const timer = setInterval(() => {
       setFrame(prev => (prev + 1) % FRAMES.length)
-    }, 120)
+    }, 80)
     return () => clearInterval(timer)
   }, [active])
 
   const autoLabel = stickyVerbRef.current ?? verb ?? 'thinking'
-  const text = spinnerText(label ?? `${autoLabel}…`)
+  const elapsed = showElapsed ? formatElapsedSeconds(Date.now() - (startedAt ?? internalStartedAtRef.current)) : null
+  const renderedHint = [rawHint, elapsed].filter(Boolean).join(' · ')
+  const hint = renderedHint ? spinnerHintText(renderedHint) : ''
+
+  const hintReserve = hint ? hint.length + 3 : 0
+  const labelBudget = Math.max(0, CONTENT_WIDTH - 2 - hintReserve)
+  let text = spinnerText(label ?? `${autoLabel}…`)
+  if (text.length > labelBudget) {
+    text = text.slice(0, Math.max(0, labelBudget - 1)) + '…'
+  }
 
   useEffect(() => {
     if (!active) return
@@ -267,10 +278,7 @@ export const Spinner: React.FC<SpinnerProps> = ({
 
   if (!active) return null
 
-  const glyph = FRAMES[frame] ?? 'o'
-  const elapsed = showElapsed ? formatElapsedSeconds(Date.now() - (startedAt ?? internalStartedAtRef.current)) : null
-  const renderedHint = [rawHint, elapsed].filter(Boolean).join(' · ')
-  const hint = renderedHint ? spinnerHintText(renderedHint) : ''
+  const glyph = FRAMES[frame] ?? '⠋'
 
   const shimmerStart = shimmerPos - 1
   const shimmerEnd = shimmerPos + 1
@@ -316,15 +324,10 @@ function restoreSpinnerTerms(value: string): string {
     .replace(/\bapi\b/g, 'API')
     .replace(/\bens\b/g, 'ENS')
     .replace(/\berc-8004\b/g, 'ERC-8004')
-    .replace(/\bgguf\b/g, 'GGUF')
-    .replace(/\bhugging face\b/g, 'Hugging Face')
     .replace(/\bipfs\b/g, 'IPFS')
     .replace(/\bjson\b/g, 'JSON')
     .replace(/\bjwt\b/g, 'JWT')
     .replace(/\bmemory\.md\b/g, 'MEMORY.md')
-    .replace(/\bopenai\b/g, 'OpenAI')
-    .replace(/\banthropic\b/g, 'Anthropic')
-    .replace(/\bgemini\b/g, 'Gemini')
     .replace(/\bos\b/g, 'OS')
     .replace(/\brpc\b/g, 'RPC')
     .replace(/\bsoul\.md\b/g, 'SOUL.md')
@@ -333,6 +336,4 @@ function restoreSpinnerTerms(value: string): string {
     .replace(/\bbase\b/g, 'Base')
     .replace(/\bethereum mainnet\b/g, 'Ethereum Mainnet')
     .replace(/\bethereum\b/g, 'Ethereum')
-    .replace(/\bsepolia\b/g, 'Sepolia')
-    .replace(/\bbase sepolia\b/g, 'Base Sepolia')
 }

package/src/ui/Surface.tsx

@@ -1,6 +1,6 @@
 import React from 'react'
 import { Box, Text } from 'ink'
-import { theme } from './theme.js'
+import { theme, PANEL_WIDTH } from './theme.js'
 
 type SurfaceTone = 'primary' | 'muted' | 'error'
 
@@ -13,8 +13,8 @@ type SurfaceProps = {
 }
 
 const toneColor: Record<SurfaceTone, string> = {
-  primary: theme.accentPeriwinkle,
-  muted: theme.border,
+  primary: theme.accentWhite,
+  muted: theme.dim,
   error: theme.accentError,
 }
 
@@ -25,23 +25,27 @@ export const Surface: React.FC<SurfaceProps> = ({
   tone = 'primary',
   children,
 }) => {
-  const borderColor = toneColor[tone]
+  const titleColor = toneColor[tone]
   return (
-    <Box flexDirection="column" borderStyle="round" borderColor={borderColor} paddingX={2} paddingY={0} width="100%">
-      <Box flexDirection="column">
-        <Text color={borderColor} bold>{title}</Text>
-        {subtitle ? (
-          typeof subtitle === 'string'
-            ? <Text color={theme.dim}>{subtitle}</Text>
-            : subtitle
+    <Box flexDirection="column" alignItems="center" paddingY={1} width="100%">
+      <Box flexDirection="column" paddingX={2} width={PANEL_WIDTH}>
+        <Box flexDirection="column">
+          <Text color={titleColor} bold>{title}</Text>
+          {subtitle ? (
+            typeof subtitle === 'string'
+              ? <Text color={theme.menuStatus}>{subtitle}</Text>
+              : subtitle
+          ) : null}
+        </Box>
+        {children ? <Box flexDirection="column" marginTop={1}>{children}</Box> : null}
+        {footer ? (
+          <Box marginTop={1}>
+            {typeof footer === 'string'
+              ? <Text color={theme.menuStatus}>{footer}</Text>
+              : footer}
+          </Box>
         ) : null}
       </Box>
-      {children ? <Box flexDirection="column" marginTop={1}>{children}</Box> : null}
-      {footer ? (
-        <Box marginTop={1} borderTop={false}>
-          <Text color={theme.dim}>{footer}</Text>
-        </Box>
-      ) : null}
     </Box>
   )
 }

package/src/ui/TextArea.tsx

@@ -0,0 +1,173 @@
+import React, { useState, useRef, useEffect } from 'react'
+import { Box, Text, useStdout } from 'ink'
+import { theme, PANEL_WIDTH } from './theme.js'
+import { useAppInput } from '../app/input/AppInputProvider.js'
+
+type TextAreaProps = {
+  initialValue?: string
+  placeholder?: string
+  maxLength?: number
+  onSubmit: (value: string) => void
+  onCancel?: () => void
+}
+
+export function TextArea({
+  initialValue = '',
+  placeholder,
+  maxLength = 4096,
+  onSubmit,
+  onCancel,
+}: TextAreaProps) {
+  const [value, setValue] = useState(initialValue)
+  const [cursor, setCursor] = useState(initialValue.length)
+  const { stdout } = useStdout()
+  const [columns, setColumns] = useState<number>(() => Math.floor(stdout?.columns ?? 80))
+
+  useEffect(() => {
+    if (!stdout) return
+    const handleResize = () => setColumns(Math.floor(stdout.columns ?? 80))
+    stdout.on('resize', handleResize)
+    return () => { stdout.off('resize', handleResize) }
+  }, [stdout])
+
+  const stateRef = useRef({ value, cursor })
+  stateRef.current = { value, cursor }
+
+  useAppInput((input, key) => {
+    const { value: val, cursor: cur } = stateRef.current
+
+    if (key.escape || (key.ctrl && input === 'c')) {
+      onCancel?.()
+      return
+    }
+    if (key.ctrl && input === 's') {
+      onSubmit(val)
+      return
+    }
+    if (key.return) {
+      const next = (val.slice(0, cur) + '\n' + val.slice(cur)).slice(0, maxLength)
+      setValue(next)
+      setCursor(cur + 1)
+      return
+    }
+    if (key.backspace || key.delete) {
+      if (cur === 0) return
+      setValue(val.slice(0, cur - 1) + val.slice(cur))
+      setCursor(cur - 1)
+      return
+    }
+    if (key.leftArrow) {
+      setCursor(Math.max(0, cur - 1))
+      return
+    }
+    if (key.rightArrow) {
+      setCursor(Math.min(val.length, cur + 1))
+      return
+    }
+    if (key.upArrow) {
+      setCursor(moveCursorUp(val, cur))
+      return
+    }
+    if (key.downArrow) {
+      setCursor(moveCursorDown(val, cur))
+      return
+    }
+    if (key.ctrl && input === 'u') {
+      const lineStart = Math.max(0, val.lastIndexOf('\n', cur - 1) + 1)
+      setValue(val.slice(0, lineStart) + val.slice(cur))
+      setCursor(lineStart)
+      return
+    }
+    if (key.ctrl || key.meta || key.tab) return
+    if (input) {
+      const clean = input.replace(/\r/g, '')
+      if (clean) {
+        const next = (val.slice(0, cur) + clean + val.slice(cur)).slice(0, maxLength)
+        setValue(next)
+        setCursor(cur + clean.length)
+      }
+    }
+  })
+
+  const displayWidth = Math.min(PANEL_WIDTH - 6, Math.max(20, columns - 6))
+  const [cursorLine, cursorCol] = cursorToLineCol(value, cursor)
+  const lines = value.split('\n')
+  const showPlaceholder = value.length === 0
+
+  return (
+    <Box flexDirection="column">
+      {showPlaceholder ? (
+        <Box flexDirection="row">
+          <Text color={theme.accentPeriwinkle}>{'> '}</Text>
+          <Box width={displayWidth}>
+            <Text>
+              <Text backgroundColor={theme.accentPeriwinkle} color="#0c0c1f">{' '}</Text>
+              <Text color={theme.dim}>{placeholder ?? ''}</Text>
+            </Text>
+          </Box>
+        </Box>
+      ) : (
+        <Box flexDirection="column">
+          {lines.map((line, i) => {
+            const active = i === cursorLine
+            return (
+              <Box key={i} flexDirection="row">
+                <Text color={theme.accentPeriwinkle}>{active ? '> ' : '  '}</Text>
+                <Box width={displayWidth}>
+                  {active ? (
+                    <Text wrap="wrap">
+                      <Text color={theme.text}>{line.slice(0, cursorCol)}</Text>
+                      <Text backgroundColor={theme.accentPeriwinkle} color="#0c0c1f">
+                        {line[cursorCol] ?? ' '}
+                      </Text>
+                      <Text color={theme.text}>{line.slice(cursorCol + 1)}</Text>
+                    </Text>
+                  ) : (
+                    <Text color={theme.text} wrap="wrap">{line || ' '}</Text>
+                  )}
+                </Box>
+              </Box>
+            )
+          })}
+        </Box>
+      )}
+      <Box marginTop={1}>
+        <Text color={theme.dim}>ctrl+s save · enter newline · esc back</Text>
+      </Box>
+    </Box>
+  )
+}
+
+function cursorToLineCol(val: string, cur: number): [number, number] {
+  const lines = val.split('\n')
+  let remaining = cur
+  for (let i = 0; i < lines.length; i++) {
+    const len = lines[i]!.length
+    if (remaining <= len) return [i, remaining]
+    remaining -= len + 1
+  }
+  const last = lines.length - 1
+  return [last, lines[last]!.length]
+}
+
+function moveCursorUp(val: string, cur: number): number {
+  const lines = val.split('\n')
+  const [lineIdx, colIdx] = cursorToLineCol(val, cur)
+  if (lineIdx === 0) return cur
+  const prevLine = lines[lineIdx - 1]!
+  const newCol = Math.min(colIdx, prevLine.length)
+  let pos = 0
+  for (let i = 0; i < lineIdx - 1; i++) pos += lines[i]!.length + 1
+  return pos + newCol
+}
+
+function moveCursorDown(val: string, cur: number): number {
+  const lines = val.split('\n')
+  const [lineIdx, colIdx] = cursorToLineCol(val, cur)
+  if (lineIdx >= lines.length - 1) return cur
+  const nextLine = lines[lineIdx + 1]!
+  const newCol = Math.min(colIdx, nextLine.length)
+  let pos = 0
+  for (let i = 0; i <= lineIdx; i++) pos += lines[i]!.length + 1
+  return pos + newCol
+}

package/src/ui/TextInput.tsx

@@ -2,11 +2,6 @@ import React, { useState, useRef, useEffect } from 'react'
 import { Box, Text, useStdout } from 'ink'
 import { theme } from './theme.js'
 import { useAppInput } from '../app/input/AppInputProvider.js'
-import { moveVerticalVisual } from '../chat/input/chatInputState.js'
-import {
-  getVisualLineIndex,
-  getVisualLines,
-} from '../chat/input/textCursor.js'
 
 const DEFAULT_CHROME_WIDTH = 10
 
@@ -16,8 +11,8 @@ type TextInputProps = {
   isSecret?: boolean
   initialValue?: string
   allowEmpty?: boolean
-  multiline?: boolean
   chromeWidth?: number
+  maxWidth?: number
   maxLength?: number
   validate?: (value: string) => string | null
   onSubmit: (value: string) => void
@@ -26,19 +21,14 @@ type TextInputProps = {
   onNavigateRight?: (value: string) => void
 }
 
-type RenderedTextInputLine = {
-  visualLineIndex: number
-  node: React.ReactNode
-}
-
 export function TextInput({
   label,
   placeholder,
   isSecret,
   initialValue = '',
   allowEmpty = false,
-  multiline = false,
   chromeWidth = DEFAULT_CHROME_WIDTH,
+  maxWidth,
   maxLength = 4096,
   validate,
   onSubmit,
@@ -49,7 +39,6 @@ export function TextInput({
   const { stdout } = useStdout()
   const [value, setValue] = useState(initialValue)
   const [cursor, setCursor] = useState(initialValue.length)
-  const [preferredColumn, setPreferredColumn] = useState<number | null>(null)
   const [error, setError] = useState<string | null>(null)
 
   const [columns, setColumns] = useState<number>(() => Math.floor(stdout?.columns ?? 80))
@@ -60,13 +49,13 @@ export function TextInput({
     return () => { stdout.off('resize', handleResize) }
   }, [stdout])
 
-  const wrapWidth = textInputWrapWidth(columns, chromeWidth)
+  const wrapWidth = textInputWrapWidth(columns, chromeWidth, maxWidth)
 
-  const stateRef = useRef({ value, cursor, preferredColumn, wrapWidth })
-  stateRef.current = { value, cursor, preferredColumn, wrapWidth }
+  const stateRef = useRef({ value, cursor })
+  stateRef.current = { value, cursor }
 
   useAppInput((input, key) => {
-    const { value: val, cursor: cur, preferredColumn: prefCol, wrapWidth: ww } = stateRef.current
+    const { value: val, cursor: cur } = stateRef.current
 
     const submitValue = (submit: (value: string) => void) => {
       if (!allowEmpty && val.trim().length === 0) {
@@ -83,14 +72,6 @@ export function TextInput({
       return true
     }
 
-    if (multiline && isTextInputSoftBreak(key)) {
-      const next = insertTextInputText(val, cur, '\n', maxLength)
-      setValue(next.value)
-      setCursor(next.cursor)
-      setPreferredColumn(null)
-      if (error) setError(null)
-      return
-    }
     if (key.return) {
       submitValue(onSubmit)
       return
@@ -105,7 +86,6 @@ export function TextInput({
         return
       }
       setCursor(Math.max(0, cur - 1))
-      setPreferredColumn(null)
       return
     }
     if (key.rightArrow) {
@@ -114,34 +94,18 @@ export function TextInput({
         return
       }
       setCursor(Math.min(val.length, cur + 1))
-      setPreferredColumn(null)
-      return
-    }
-    if (multiline && (key.upArrow || key.downArrow)) {
-      const result = moveVerticalVisual(val, cur, key.upArrow ? -1 : 1, ww, prefCol)
-      if (result.kind === 'moved') setCursor(result.cursor)
-      setPreferredColumn(result.preferredColumn)
       return
     }
     if (key.backspace || key.delete) {
       if (cur === 0) return
       setValue(val.slice(0, cur - 1) + val.slice(cur))
       setCursor(cur - 1)
-      setPreferredColumn(null)
       if (error) setError(null)
       return
     }
     if (key.ctrl && input === 'u') {
-      const lineStart = val.lastIndexOf('\n', cur - 1) + 1
-      if (lineStart === cur) {
-        if (!multiline || cur === 0) return
-        setValue(val.slice(0, cur - 1) + val.slice(cur))
-        setCursor(cur - 1)
-      } else {
-        setValue(val.slice(0, lineStart) + val.slice(cur))
-        setCursor(lineStart)
-      }
-      setPreferredColumn(null)
+      setValue(val.slice(cur))
+      setCursor(0)
       if (error) setError(null)
       return
     }
@@ -149,14 +113,12 @@ export function TextInput({
       return
     }
     if (input) {
-      const clean = multiline
-        ? input.replace(/\r\n/g, '\n').replace(/\r/g, '\n')
-        : input.replace(/[\r\n]/g, '')
+      const clean = input.replace(/[\r\n]/g, '')
       if (clean) {
-        const next = insertTextInputText(val, cur, clean, maxLength)
-        setValue(next.value)
-        setCursor(next.cursor)
-        setPreferredColumn(null)
+        const cleanCursor = Math.max(0, Math.min(cur, val.length))
+        const next = (val.slice(0, cleanCursor) + clean + val.slice(cleanCursor)).slice(0, maxLength)
+        setValue(next)
+        setCursor(Math.min(cleanCursor + clean.length, next.length))
         if (error) setError(null)
       }
     }
@@ -164,96 +126,32 @@ export function TextInput({
 
   const display = isSecret ? '*'.repeat(value.length) : value
   const showPlaceholder = value.length === 0 && placeholder
-  const renderedLines = multiline
-    ? renderTextInputLines(display, cursor, true, wrapWidth)
-    : []
 
   return (
     <Box flexDirection="column">
       {label ? <Text color={theme.dim}>{label}</Text> : null}
-      {multiline && !showPlaceholder ? (
-        <Box flexDirection="column">
-          {renderedLines.map(line => (
-            <Box key={line.visualLineIndex} flexDirection="row">
-              <Text color={line.visualLineIndex === 0 ? theme.accentPeriwinkle : theme.dim}>
-                {line.visualLineIndex === 0 ? '> ' : '  '}
-              </Text>
-              <Box width={wrapWidth}>{line.node}</Box>
-            </Box>
-          ))}
-        </Box>
-      ) : (
-        <Box flexDirection="row">
-          <Text color={theme.accentPeriwinkle}>{'> '}</Text>
-          <Box width={wrapWidth}>
-            {showPlaceholder ? (
-              <Text wrap={multiline ? 'wrap' : 'truncate-end'}>
-                <Text backgroundColor={theme.accentPeriwinkle} color="#0c0c1f">{' '}</Text>
-                <Text color={theme.dim}>{placeholder}</Text>
-              </Text>
-            ) : (
-              <Text color={theme.text} wrap="truncate-end">
-                {display.slice(0, cursor)}
-                <Text backgroundColor={theme.accentPeriwinkle} color="#0c0c1f">{display[cursor] ?? ' '}</Text>
-                {display.slice(cursor + 1)}
-              </Text>
-            )}
-          </Box>
+      <Box flexDirection="row">
+        <Text color={theme.accentPeriwinkle}>{'> '}</Text>
+        <Box width={wrapWidth}>
+          {showPlaceholder ? (
+            <Text wrap="truncate-end">
+              <Text backgroundColor={theme.accentPeriwinkle} color="#0c0c1f">{' '}</Text>
+              <Text color={theme.dim}>{placeholder}</Text>
+            </Text>
+          ) : (
+            <Text color={theme.text} wrap="truncate-end">
+              {display.slice(0, cursor)}
+              <Text backgroundColor={theme.accentPeriwinkle} color="#0c0c1f">{display[cursor] ?? ' '}</Text>
+              {display.slice(cursor + 1)}
+            </Text>
+          )}
         </Box>
-      )}
+      </Box>
       {error ? <Text color={theme.accentError}>{error}</Text> : null}
     </Box>
   )
 }
 
-export function textInputWrapWidth(columns: number, chromeWidth = DEFAULT_CHROME_WIDTH): number {
-  return Math.max(1, Math.floor(columns) - Math.max(0, Math.floor(chromeWidth)))
-}
-
-export function insertTextInputText(value: string, cursor: number, input: string, maxLength = 4096): { value: string; cursor: number } {
-  const cleanCursor = Math.max(0, Math.min(cursor, value.length))
-  const next = (value.slice(0, cleanCursor) + input + value.slice(cleanCursor)).slice(0, maxLength)
-  return {
-    value: next,
-    cursor: Math.min(cleanCursor + input.length, next.length),
-  }
-}
-
-export function isTextInputSoftBreak(key: { return: boolean; shift?: boolean; meta?: boolean }): boolean {
-  return key.return && Boolean(key.shift || key.meta)
-}
-
-export function renderTextInputLines(
-  value: string,
-  cursor: number,
-  showCursor: boolean,
-  wrapWidth: number,
-): RenderedTextInputLine[] {
-  const lines = getVisualLines(value, wrapWidth)
-  const cursorLine = getVisualLineIndex(lines, cursor)
-
-  return lines.map((line, visualLineIndex) => {
-    const text = value.slice(line.start, line.end)
-    if (!showCursor || visualLineIndex !== cursorLine) {
-      return {
-        visualLineIndex,
-        node: <Text color={theme.text} wrap="wrap">{text || ' '}</Text>,
-      }
-    }
-
-    const column = Math.max(0, Math.min(cursor - line.start, text.length))
-    const before = text.slice(0, column)
-    const atChar = text[column] ?? ' '
-    const after = text.slice(column + 1)
-    return {
-      visualLineIndex,
-      node: (
-        <Text color={theme.text} wrap="wrap">
-          {before}
-          <Text backgroundColor={theme.accentPeriwinkle} color="#0c0c1f">{atChar}</Text>
-          {after}
-        </Text>
-      ),
-    }
-  })
+export function textInputWrapWidth(columns: number, chromeWidth = DEFAULT_CHROME_WIDTH, maxWidth = 42): number {
+  return Math.min(maxWidth, Math.max(1, Math.floor(columns) - Math.max(0, Math.floor(chromeWidth))))
 }

package/src/ui/theme.ts

@@ -1,16 +1,23 @@
 export const palette: Array<[number, number, number]> = [
-  [0xff, 0xff, 0xff],
-  [0xd8, 0xdc, 0xfa],
-  [0xe8, 0xee, 0xfd],
-  [0xd8, 0xdc, 0xfa],
-  [0xff, 0xff, 0xff],
+  [0xf3, 0xd8, 0xe0],
+  [0xf3, 0xdf, 0xce],
+  [0xf2, 0xec, 0xca],
+  [0xd7, 0xed, 0xda],
+  [0xd2, 0xe5, 0xf3],
+  [0xe2, 0xd6, 0xf0],
+  [0xf3, 0xd8, 0xe0],
 ]
 
 export const theme = {
-  accentPeriwinkle: '#d8dcfa',
-  accentBlue: '#e8eefd',
-  accentWhite: '#f5f8ff',
-  accentError: '#d99898',
+  accentPeriwinkle: '#f0eee8',
+  accentBlue: '#dde4f0',
+  accentWhite: '#f8f6f2',
+  accentError: '#e8b8b8',
+  accentHighlight: '#f0c8c8',
+  wordmark: '#fafafa',
+  wordmarkEth: '#9aa0b0',
+  menuShortcut: '#8a8a9c',
+  menuStatus: '#7a8090',
   modePlan: '#f0c7a8',
   modeAcceptEdits: '#c7b6f2',
   diffAdded: '#8fd49d',
@@ -30,12 +37,14 @@ export const theme = {
   codePunctuation: '#aeb4c8',
   codeTag: '#ffb3b3',
   codeAttribute: '#f2d087',
-  border: '#555555',
-  dim: '#909090',
-  text: '#f1f1f1',
-  textSubtle: '#9b9b9b',
+  border: '#3a3f4f',
+  dim: '#7a8090',
+  text: '#dadce6',
+  textSubtle: '#9aa0b0',
 } as const
 
+export const PANEL_WIDTH = 48
+
 export function gradientColor(t: number): string {
   const s = Math.max(0, Math.min(1, t)) * (palette.length - 1)
   const i = Math.min(Math.floor(s), palette.length - 2)