fix: improve TUI UX and usage limits display

Author: mathisdev7

bun.lock

@@ -0,0 +1,57 @@
+# Changelog - January 6, 2026
+
+## TUI Improvements
+
+### Dialog Link Interaction
+
+- Made OAuth URLs in dialogs clickable for easier authentication
+
+### Copy Button Visibility
+
+- Changed copy button default state to hidden (opt-in via settings)
+
+### Usage Limits Display
+
+- Fixed "Failed to load" error when opening new chat with sidebar
+- Changed initial usage display to "Waiting for usage..." before first API call
+- Added visual warning (red color) when usage remaining falls below 15%
+
+### Text Layout
+
+- Fixed long text overflow issues in AI responses
+- Removed unnecessary flex wrapping in user message layout
+
+### Error Display
+
+- Simplified error message presentation with direct text display instead of bordered boxes
+
+## Provider Pricing
+
+### Codex Models
+
+- Fixed pricing lookup for Codex effort-level model variants (low/medium/high/xhigh)
+- Added fallback matching for Codex Max models
+
+## Stats Command
+
+### Time Range Options
+
+- Added support for "today" and "yesterday" keywords in --days parameter
+- Improved date range filtering logic
+
+## Configuration
+
+### Keybindings
+
+- Changed default permission toggle keybinding from alt+shift+p to <leader> p
+
+## UI Polish
+
+### Loading States
+
+- Improved streaming indicator with randomized text variants
+- Removed error toast displays to reduce visual noise
+
+---
+
+**Summary**: This release improves the TUI user experience by making dialog links clickable, fixing usage limits display issues, and adding visual warnings for low usage. It also fixes Codex model pricing lookups and enhances the stats command with natural date range options.

changelog/CHANGELOG-2026-01-06.md

@@ -38,8 +38,8 @@ export const StatsCommand = cmd({
   builder: (yargs: Argv) => {
     return yargs
       .option("days", {
-        describe: "show stats for the last N days (default: all time)",
-        type: "number",
+        describe: "show stats for the last N days, or today/yesterday (default: all time)",
+        type: "string",
       })
       .option("tools", {
         describe: "number of tools to show (default: all)",
@@ -60,17 +60,67 @@ export const StatsCommand = cmd({
   },
   handler: async (args) => {
     await bootstrap(process.cwd(), async () => {
-      const stats = await aggregateSessionStats(
-        args.days,
-        args.project,
-        args.provider,
-        args.model as string | undefined,
-      )
+      const range = resolveDaysRange(args.days)
+      const stats = await aggregateSessionStats(range, args.project, args.provider, args.model as string | undefined)
       displayStats(stats, args.tools, args.provider, args.model as string | undefined)
     })
   },
 })
 
+type DaysRange = { cutoffTime: number; fromTime?: number }
+
+function resolveDaysRange(days?: string): DaysRange {
+  if (!days) {
+    return { cutoffTime: 0 }
+  }
+
+  const normalized = days.trim().toLowerCase()
+
+  if (normalized === "today") {
+    return { cutoffTime: startOfToday() }
+  }
+
+  if (normalized === "yesterday") {
+    const fromTime = startOfYesterday()
+    return { cutoffTime: fromTime, fromTime: startOfToday() }
+  }
+
+  const asNumber = Number(normalized)
+  if (!Number.isFinite(asNumber) || asNumber < 0) {
+    throw new Error("--days must be 0, a positive number, 'today', or 'yesterday'")
+  }
+
+  if (asNumber === 0) {
+    return { cutoffTime: startOfToday() }
+  }
+
+  const DAYS_IN_MILLISECONDS = 24 * 60 * 60 * 1000
+  return { cutoffTime: Date.now() - asNumber * DAYS_IN_MILLISECONDS }
+}
+
+function startOfToday(): number {
+  const now = new Date()
+  return new Date(now.getFullYear(), now.getMonth(), now.getDate()).getTime()
+}
+
+function startOfYesterday(): number {
+  const todayStart = startOfToday()
+  return todayStart - 24 * 60 * 60 * 1000
+}
+
+function filterSessionsByRange(sessions: Session.Info[], range: DaysRange): Session.Info[] {
+  if (!range.cutoffTime) {
+    return sessions
+  }
+
+  const { cutoffTime, fromTime } = range
+  if (fromTime !== undefined) {
+    return sessions.filter((session) => session.time.updated >= cutoffTime && session.time.updated < fromTime)
+  }
+
+  return sessions.filter((session) => session.time.updated >= cutoffTime)
+}
+
 async function getCurrentProject(): Promise<Project.Info> {
   return Instance.project
 }
@@ -98,16 +148,15 @@ async function getAllSessions(): Promise<Session.Info[]> {
 }
 
 async function aggregateSessionStats(
-  days?: number,
+  range: DaysRange,
   projectFilter?: string,
   providerFilter?: string,
   modelFilter?: string,
 ): Promise<SessionStats> {
   const sessions = await getAllSessions()
   const DAYS_IN_SECOND = 24 * 60 * 60 * 1000
-  const cutoffTime = days ? Date.now() - days * DAYS_IN_SECOND : 0
 
-  let filteredSessions = days ? sessions.filter((session) => session.time.updated >= cutoffTime) : sessions
+  let filteredSessions = filterSessionsByRange(sessions, range)
 
   if (projectFilter !== undefined) {
     if (projectFilter === "") {

packages/arctic/src/cli/cmd/stats.ts

@@ -202,7 +202,7 @@ function App() {
   const keybind = useKeybind()
 
   const [showCopyButton, setShowCopyButton] = createSignal(false)
-  const copyButtonEnabled = () => kv.get("copy_button_enabled", true)
+  const copyButtonEnabled = () => kv.get("copy_button_enabled", false)
   const [copyButtonPos, setCopyButtonPos] = createSignal({ x: 0, y: 0 })
   let lastSelectionText = ""
   let lastMousePos = { x: 0, y: 0 }

packages/arctic/src/cli/cmd/tui/app.tsx

@@ -9,6 +9,7 @@ import { useTheme } from "../context/theme"
 import { TextAttributes } from "@opentui/core"
 import type { ProviderAuthAuthorization } from "@arctic-cli/sdk/v2"
 import { DialogModel } from "./dialog-model"
+import { openBrowserUrl } from "@/auth/codex-oauth/auth/browser"
 
 const PROVIDER_PRIORITY: Record<string, number> = {
   arctic: 0,
@@ -137,7 +138,10 @@ function AutoMethod(props: AutoMethodProps) {
         <text fg={theme.textMuted}>esc</text>
       </box>
       <box gap={1}>
-        <text fg={theme.primary}>{props.authorization.url}</text>
+        <text fg={theme.primary} onMouseUp={() => openBrowserUrl(props.authorization.url)}>
+          {props.authorization.url}
+        </text>
+
         <text fg={theme.textMuted}>{props.authorization.instructions}</text>
       </box>
       <text fg={theme.textMuted}>Waiting for authorization...</text>
@@ -179,7 +183,10 @@ function CodeMethod(props: CodeMethodProps) {
       description={() => (
         <box gap={1}>
           <text fg={theme.textMuted}>{props.authorization.instructions}</text>
-          <text fg={theme.primary}>{props.authorization.url}</text>
+          <text fg={theme.primary} onMouseUp={() => openBrowserUrl(props.authorization.url)}>
+            {props.authorization.url}
+          </text>
+
           <Show when={error()}>
             <text fg={theme.error}>Invalid code</text>
           </Show>

packages/arctic/src/cli/cmd/tui/component/dialog-provider.tsx

@@ -1693,16 +1693,18 @@ export function Prompt(props: PromptProps) {
               </Show>
               <Show when={usageLimits() !== undefined}>
                 <text fg={theme.textMuted}>·</text>
-                <text fg={theme.textMuted}>
-                  {(() => {
-                    const limits = usageLimits()!
-                    if (limits.percent !== undefined) {
-                      const remaining = Math.max(0, 100 - limits.percent)
+                {(() => {
+                  const limits = usageLimits()!
+                  const remaining = limits.percent !== undefined ? Math.max(0, 100 - limits.percent) : undefined
+                  const color = remaining !== undefined && remaining <= 15 ? theme.error : theme.textMuted
+                  const label = (() => {
+                    if (remaining !== undefined) {
                       return `${remaining.toFixed(0)}% left${limits.timeLeft ? ` (${limits.timeLeft})` : ""}`
                     }
                     return limits.timeLeft ? `resets in ${limits.timeLeft}` : ""
-                  })()}
-                </text>
+                  })()
+                  return <text fg={color}>{label}</text>
+                })()}
               </Show>
             </box>
           </Show>

packages/arctic/src/cli/cmd/tui/component/prompt/index.tsx

@@ -792,11 +792,11 @@ export function Session() {
       },
     },
     {
-      title: kv.get("copy_button_enabled", true) ? "Hide copy button" : "Show copy button",
+      title: kv.get("copy_button_enabled", false) ? "Hide copy button" : "Show copy button",
       value: "session.toggle.copy_button",
       category: "Session",
       onSelect: (dialog) => {
-        const current = kv.get("copy_button_enabled", true)
+        const current = kv.get("copy_button_enabled", false)
         kv.set("copy_button_enabled", !current)
         dialog.clear()
       },
@@ -1382,27 +1382,24 @@ function UserMessage(props: {
     <>
       <Show when={text()}>
         <box id={props.message.id} marginTop={props.index === 0 ? 0 : 1}>
-          <box onMouseUp={props.onMouseUp} paddingTop={0} paddingBottom={0} paddingLeft={1} flexShrink={0}>
-            <box flexDirection="row" flexWrap="wrap">
-              <text fg={theme.primary}>{"> "}</text>
-              <box paddingLeft={0} flexShrink={1} flexGrow={1} backgroundColor={theme.backgroundElement}>
-                <Switch>
-                  <Match when={ctx.userMessageMarkdown()}>
-                    <code
-                      filetype="markdown"
-                      drawUnstyledText={true}
-                      streaming={false}
-                      syntaxStyle={syntax()}
-                      content={text()?.text ?? ""}
-                      conceal={ctx.conceal()}
-                      fg={theme.background}
-                    />
-                  </Match>
-                  <Match when={!ctx.userMessageMarkdown()}>
-                    <text fg={theme.background}>{text()?.text}</text>
-                  </Match>
-                </Switch>
-              </box>
+          <box onMouseUp={props.onMouseUp} paddingTop={0} paddingBottom={0} paddingLeft={1}>
+            <box paddingLeft={0} backgroundColor={theme.backgroundElement}>
+              <Switch>
+                <Match when={ctx.userMessageMarkdown()}>
+                  <code
+                    filetype="markdown"
+                    drawUnstyledText={true}
+                    streaming={false}
+                    syntaxStyle={syntax()}
+                    content={formatUserText(text()?.text ?? "")}
+                    conceal={ctx.conceal()}
+                    fg={theme.background}
+                  />
+                </Match>
+                <Match when={!ctx.userMessageMarkdown()}>
+                  <text fg={theme.background}>{formatUserText(text()?.text ?? "")}</text>
+                </Match>
+              </Switch>
             </box>
             <Show when={files().length}>
               <box flexDirection="row" paddingBottom={1} paddingTop={1} gap={1} flexWrap="wrap">
@@ -1459,14 +1456,25 @@ function StreamingIndicator(props: { interruptCount: number }) {
   const { theme } = useTheme()
   const [tick, setTick] = createSignal(0)
 
+  const streamingTexts = [
+    "Streaming...",
+    "Processing...",
+    "Generating...",
+    "Thinking...",
+    "Computing...",
+    "Working...",
+    "Analyzing...",
+  ]
+
+  const [streamingText] = createSignal(streamingTexts[Math.floor(Math.random() * streamingTexts.length)])
+
   createEffect(() => {
     const timer = setInterval(() => {
       setTick((t) => (t + 1) % 12)
     }, 100)
     onCleanup(() => clearInterval(timer))
   })
 
-  const streamingText = "Streaming..."
   const getCharColor = (index: number) => {
     const wavePosition = tick()
     const distance = Math.abs((index - wavePosition + 12) % 12)
@@ -1486,9 +1494,11 @@ function StreamingIndicator(props: { interruptCount: number }) {
     <box paddingLeft={2} marginTop={1}>
       <text>
         <span style={{ fg: theme.primary }}>●</span>{" "}
-        {streamingText.split("").map((char, i) => (
-          <span style={{ fg: getCharColor(i) }}>{char}</span>
-        ))}{" "}
+        {streamingText()
+          .split("")
+          .map((char, i) => (
+            <span style={{ fg: getCharColor(i) }}>{char}</span>
+          ))}{" "}
         <span style={{ fg: theme.textMuted }}>
           (press {props.interruptCount > 0 ? "ESC again" : "ESC x2"} to interrupt)
         </span>
@@ -1568,19 +1578,9 @@ function AssistantMessage(props: { message: AssistantMessage; parts: Part[]; las
         </box>
       </Show>
       <Show when={props.message.error}>
-        <box
-          border={["left"]}
-          paddingTop={1}
-          paddingBottom={1}
-          paddingLeft={2}
-          marginTop={1}
-          backgroundColor={theme.backgroundPanel}
-          customBorderChars={SplitBorder.customBorderChars}
-          borderColor={theme.error}
-        >
-          <text fg={theme.textMuted}>{props.message.error?.data.message}</text>
-        </box>
+        <text fg={theme.error}>{props.message.error?.data.message}</text>
       </Show>
+
       <Show when={isStreaming()}>
         <StreamingIndicator interruptCount={ctx.interruptCount()} />
       </Show>
@@ -1682,7 +1682,7 @@ function TextPart(props: { last: boolean; part: TextPart; message: AssistantMess
   const { theme, syntax } = useTheme()
   return (
     <Show when={props.part.text.trim()}>
-      <box id={"text-" + props.part.id} paddingLeft={0} marginTop={props.textIndex === 0 ? 1 : 0} flexShrink={0}>
+      <box id={"text-" + props.part.id} paddingLeft={0} marginTop={props.textIndex === 0 ? 1 : 0}>
         <code
           filetype="markdown"
           drawUnstyledText={false}