@golba98/codexa 1.0.2 → 1.0.3

package/src/ui/Panel.tsx

@@ -13,8 +13,8 @@ interface PanelProps {
 
 export function Panel({ cols, title, rightTitle, borderColor, titleColor, children }: PanelProps) {
   const theme = useTheme();
-  const cBorder = borderColor || theme.BORDER_ACTIVE;
-  const cTitle = titleColor || theme.TEXT;
+  const cBorder = borderColor || theme.borderFocused;
+  const cTitle = titleColor || theme.text;
 
   const leftLabel = ` ${title} `;
   const rightLabel = rightTitle ? ` ${rightTitle} ` : "";
@@ -32,7 +32,7 @@ export function Panel({ cols, title, rightTitle, borderColor, titleColor, childr
         {"╭─"}
         <Text color={cTitle}>{leftLabel}</Text>
         {"─".repeat(dashCount)}
-        {rightTitle && <Text color={theme.DIM}>{rightLabel}</Text>}
+        {rightTitle && <Text color={theme.textDim}>{rightLabel}</Text>}
         {"╮"}
       </Text>
       <Box

package/src/ui/PlanActionPicker.tsx

@@ -85,10 +85,10 @@ export function PlanActionPicker({
     const selected = index === selectedIndex;
     return (
       <Text key={row.value}>
-        <Text color={selected ? theme.ACCENT : theme.DIM}>
+        <Text color={selected ? theme.accent : theme.textDim}>
           {selected ? "› " : vertical ? "  " : ""}
         </Text>
-        <Text color={selected ? theme.TEXT : theme.MUTED}>
+        <Text color={selected ? theme.text : theme.textMuted}>
           {`[${row.key}] ${row.label}`}
         </Text>
       </Text>
@@ -98,7 +98,7 @@ export function PlanActionPicker({
   if (vertical) {
     return (
       <Box flexDirection="column">
-        <Text color={isFocused ? theme.TEXT : theme.MUTED} bold={isFocused}>Plan ready</Text>
+        <Text color={isFocused ? theme.text : theme.textMuted} bold={isFocused}>Plan ready</Text>
         {ACTION_ROWS.map(renderAction)}
       </Box>
     );
@@ -106,12 +106,12 @@ export function PlanActionPicker({
 
   return (
     <Text>
-      <Text color={isFocused ? theme.TEXT : theme.MUTED} bold={isFocused}>Plan ready</Text>
-      <Text color={theme.DIM}>{"  "}</Text>
+      <Text color={isFocused ? theme.text : theme.textMuted} bold={isFocused}>Plan ready</Text>
+      <Text color={theme.textDim}>{"  "}</Text>
       {ACTION_ROWS.map((row, index) => (
         <React.Fragment key={row.value}>
           {renderAction(row, index)}
-          {index < ACTION_ROWS.length - 1 && <Text color={theme.DIM}>{"   "}</Text>}
+          {index < ACTION_ROWS.length - 1 && <Text color={theme.textDim}>{"   "}</Text>}
         </React.Fragment>
       ))}
     </Text>

package/src/ui/PlanReviewPanel.tsx

@@ -192,21 +192,21 @@ export function PlanReviewPanel({
   return (
     <Box width="100%" flexDirection="column" paddingX={2}>
       <Text wrap="truncate">
-        <Text color={theme.BORDER_SUBTLE}>{"╭─ "}</Text>
-        <Text color={theme.TEXT} bold>{topBorder.title}</Text>
-        <Text color={theme.BORDER_SUBTLE}>{topBorder.fill}</Text>
-        <Text color={theme.BORDER_SUBTLE}>{"╮"}</Text>
+        <Text color={theme.border}>{"╭─ "}</Text>
+        <Text color={theme.text} bold>{topBorder.title}</Text>
+        <Text color={theme.border}>{topBorder.fill}</Text>
+        <Text color={theme.border}>{"╮"}</Text>
       </Text>
       {displayRows.map((row, index) => (
         <Text key={index} wrap="truncate">
-          <Text color={theme.BORDER_SUBTLE}>{"│ "}</Text>
-          <Text color={row.tone === "muted" ? theme.MUTED : theme.TEXT} bold={row.bold}>
+          <Text color={theme.border}>{"│ "}</Text>
+          <Text color={row.tone === "muted" ? theme.textMuted : theme.text} bold={row.bold}>
             {padVisual(row.text, contentWidth)}
           </Text>
-          <Text color={theme.BORDER_SUBTLE}>{" │"}</Text>
+          <Text color={theme.border}>{" │"}</Text>
         </Text>
       ))}
-      <Text wrap="truncate" color={theme.BORDER_SUBTLE}>{`╰${"─".repeat(Math.max(1, panelCols - 2))}╯`}</Text>
+      <Text wrap="truncate" color={theme.border}>{`╰${"─".repeat(Math.max(1, panelCols - 2))}╯`}</Text>
     </Box>
   );
 }

package/src/ui/ProviderPicker.tsx

@@ -150,14 +150,14 @@ export function ProviderPicker({ layout, providers, onAction, onCancel, initialP
       const inCodexaAvailable = selectedProvider.routeMode === "in-codexa";
       const isConfigured = inCodexaAvailable && !selectedProvider.routeUnavailableReason;
       const inCodexaStatusText = !inCodexaAvailable ? "Unavailable" : isConfigured ? "Available" : "Needs configuration";
-      const inCodexaStatusColor = !inCodexaAvailable ? theme.ERROR : isConfigured ? theme.SUCCESS : theme.WARNING;
+      const inCodexaStatusColor = !inCodexaAvailable ? theme.error : isConfigured ? theme.success : theme.warning;
 
       return (
         <Box flexDirection="column">
           <Box marginBottom={1} flexDirection="column" paddingX={2}>
-            <Text color={theme.DIM}>Status: <Text color={theme.TEXT}>{selectedProvider.routeUnavailableReason ?? "Ready"}</Text></Text>
-            <Text color={theme.DIM}>Backend: <Text color={theme.TEXT}>{selectedProvider.backendType}</Text></Text>
-            <Text color={theme.DIM}>Use in Codexa: <Text color={inCodexaStatusColor}>{inCodexaStatusText}</Text></Text>
+            <Text color={theme.textDim}>Status: <Text color={theme.text}>{selectedProvider.routeUnavailableReason ?? "Ready"}</Text></Text>
+            <Text color={theme.textDim}>Backend: <Text color={theme.text}>{selectedProvider.backendType}</Text></Text>
+            <Text color={theme.textDim}>Use in Codexa: <Text color={inCodexaStatusColor}>{inCodexaStatusText}</Text></Text>
           </Box>
           {actions.map((action, index) => (
             <ActionRow
@@ -186,21 +186,21 @@ export function ProviderPicker({ layout, providers, onAction, onCancel, initialP
     <Box flexDirection="column" width={panelWidth}>
       <Box
         borderStyle="round"
-        borderColor={theme.PROMPT}
+        borderColor={theme.prompt}
         paddingX={1}
         paddingY={0}
         width={panelWidth}
         flexDirection="column"
       >
         <Box width="100%" overflow="hidden">
-          <Text color={theme.ACCENT} bold>
+          <Text color={theme.accent} bold>
             {clampVisualText(`${title}   ${helpText}`, innerWidth)}
           </Text>
         </Box>
 
         {mode === "providers" && (
           <Box width="100%" overflow="hidden">
-            <Text color={theme.DIM}>
+            <Text color={theme.textDim}>
               {"  "}
               {clampVisualText("Provider", providerNameWidth)}
               {" "}
@@ -251,10 +251,10 @@ function ProviderRow({
 }) {
   const theme = useTheme();
   const statusColor = provider.isActiveRoute
-    ? theme.SUCCESS
+    ? theme.success
     : provider.enabled && !provider.routeUnavailableReason
-      ? theme.SUCCESS
-      : theme.WARNING;
+      ? theme.success
+      : theme.warning;
   const marker = isHighlighted ? ">" : " ";
   const defaultMark = provider.isActiveRoute ? "@" : provider.isDefault ? "*" : " ";
   const statusText = provider.isActiveRoute ? "Active" : provider.statusLabel;
@@ -262,28 +262,28 @@ function ProviderRow({
   return (
     <Box width="100%" overflow="hidden">
       <Box width={2} flexShrink={0}>
-        <Text color={isHighlighted ? theme.ACCENT : theme.DIM}>{marker}{defaultMark}</Text>
+        <Text color={isHighlighted ? theme.accent : theme.textDim}>{marker}{defaultMark}</Text>
       </Box>
       <Box width={widths.providerNameWidth} flexShrink={0} overflow="hidden">
-        <Text color={isHighlighted ? theme.TEXT : theme.MUTED} bold={isHighlighted}>
+        <Text color={isHighlighted ? theme.text : theme.textMuted} bold={isHighlighted}>
           {clampVisualText(provider.displayName, widths.providerNameWidth)}
         </Text>
       </Box>
       <Text> </Text>
       <Box width={widths.modelWidth} flexShrink={0} overflow="hidden">
-        <Text color={theme.MUTED}>{clampVisualText(provider.currentModel, widths.modelWidth)}</Text>
+        <Text color={theme.textMuted}>{clampVisualText(provider.currentModel, widths.modelWidth)}</Text>
       </Box>
       <Text> </Text>
       <Box width={widths.contextWidth} flexShrink={0} overflow="hidden">
-        <Text color={theme.MUTED}>{clampVisualText(provider.contextLengthLabel ?? "Unknown", widths.contextWidth)}</Text>
+        <Text color={theme.textMuted}>{clampVisualText(provider.contextLengthLabel ?? "Unknown", widths.contextWidth)}</Text>
       </Box>
       <Text> </Text>
       <Box width={widths.toolsWidth} flexShrink={0} overflow="hidden">
-        <Text color={theme.MUTED}>{clampVisualText(capabilityFlag(provider.capabilityProfile?.supportsToolCalls), widths.toolsWidth)}</Text>
+        <Text color={theme.textMuted}>{clampVisualText(capabilityFlag(provider.capabilityProfile?.supportsToolCalls), widths.toolsWidth)}</Text>
       </Box>
       <Text> </Text>
       <Box width={widths.streamWidth} flexShrink={0} overflow="hidden">
-        <Text color={theme.MUTED}>{clampVisualText(capabilityFlag(provider.capabilityProfile?.supportsStreaming), widths.streamWidth)}</Text>
+        <Text color={theme.textMuted}>{clampVisualText(capabilityFlag(provider.capabilityProfile?.supportsStreaming), widths.streamWidth)}</Text>
       </Box>
       <Text> </Text>
       <Box width={widths.statusWidth} flexShrink={0} overflow="hidden">
@@ -309,10 +309,10 @@ function ActionRow({
   return (
     <Box width="100%" overflow="hidden">
       <Box width={2} flexShrink={0}>
-        <Text color={isHighlighted ? theme.ACCENT : theme.DIM}>{isHighlighted ? ">" : " "}</Text>
+        <Text color={isHighlighted ? theme.accent : theme.textDim}>{isHighlighted ? ">" : " "}</Text>
       </Box>
       <Box width={Math.max(10, width - 2)} flexShrink={0} overflow="hidden">
-        <Text color={disabledReason ? theme.DIM : isHighlighted ? theme.TEXT : theme.MUTED} bold={isHighlighted && !disabledReason}>
+        <Text color={disabledReason ? theme.textDim : isHighlighted ? theme.text : theme.textMuted} bold={isHighlighted && !disabledReason}>
           {clampVisualText(text, Math.max(10, width - 2))}
         </Text>
       </Box>

package/src/ui/RunFooter.tsx

@@ -43,14 +43,14 @@ function RunFooter({ uiState, showBusyLoader = true }: RunFooterProps) {
 
   return (
     <Box flexDirection="column" paddingBottom={1} width="100%">
-      <Box borderStyle="single" borderTop={true} borderBottom={false} borderLeft={false} borderRight={false} borderColor={theme.BORDER_SUBTLE} marginBottom={1} />
+      <Box borderStyle="single" borderTop={true} borderBottom={false} borderLeft={false} borderRight={false} borderColor={theme.border} marginBottom={1} />
       <Box paddingX={1} width="100%" justifyContent="space-between" overflow="hidden">
         <Box flexShrink={1} flexGrow={1} overflow="hidden">
-          <Text color={theme.INFO}>{"✧ "}</Text>
+          <Text color={theme.info}>{"✧ "}</Text>
           <AnimatedStatusText baseText={getRunFooterStatus(uiState)} isActive={isActive} />
         </Box>
         <Box flexShrink={0}>
-          <Text color={theme.DIM}>Esc cancel  Ctrl+C quit</Text>
+          <Text color={theme.textDim}>Esc cancel  Ctrl+C quit</Text>
         </Box>
       </Box>
     </Box>

package/src/ui/SelectionPanel.tsx

@@ -36,19 +36,19 @@ export function SelectionPanel({
       {/* Block 1: title + instructions */}
       <Box
         borderStyle="round"
-        borderColor={theme.BORDER_SUBTLE}
+        borderColor={theme.border}
         paddingX={2}
         paddingY={1}
         width="100%"
       >
-        <Text color={theme.ACCENT} bold>{title}  </Text>
-        <Text color={theme.MUTED}>{subtitle}</Text>
+        <Text color={theme.accent} bold>{title}  </Text>
+        <Text color={theme.textMuted}>{subtitle}</Text>
       </Box>
 
       {/* Block 2: selection list */}
       <Box
         borderStyle="round"
-        borderColor={theme.BORDER_ACTIVE}
+        borderColor={theme.borderFocused}
         paddingX={2}
         paddingY={1}
         marginTop={1}

package/src/ui/SettingsPanel.tsx

@@ -91,26 +91,26 @@ export function SettingsPanel<TKey extends string>({
     <Box flexDirection="column" width="100%" marginTop={1}>
       <Box
         borderStyle="round"
-        borderColor={theme.BORDER_SUBTLE}
+        borderColor={theme.border}
         paddingX={2}
         paddingY={1}
         width="100%"
         flexDirection="column"
       >
         <Box>
-          <Text color={theme.ACCENT} bold>{title}  </Text>
-          <Text color={theme.MUTED}>{subtitle.split("\n")[0]}</Text>
+          <Text color={theme.accent} bold>{title}  </Text>
+          <Text color={theme.textMuted}>{subtitle.split("\n")[0]}</Text>
         </Box>
         {activeSetting?.description && (
           <Box marginTop={1}>
-            <Text color={theme.DIM}>{activeSetting.description}</Text>
+            <Text color={theme.textDim}>{activeSetting.description}</Text>
           </Box>
         )}
       </Box>
 
       <Box
         borderStyle="round"
-        borderColor={theme.BORDER_ACTIVE}
+        borderColor={theme.borderFocused}
         paddingX={2}
         paddingY={1}
         marginTop={1}
@@ -124,10 +124,10 @@ export function SettingsPanel<TKey extends string>({
           return (
             <Box key={setting.key} flexDirection="row" width="100%">
               <Box width={3}>
-                <Text color={isSelectedRow ? theme.ACCENT : theme.DIM}>{isSelectedRow ? "▸ " : "  "}</Text>
+                <Text color={isSelectedRow ? theme.accent : theme.textDim}>{isSelectedRow ? "▸ " : "  "}</Text>
               </Box>
               <Box width={20}>
-                <Text color={isSelectedRow ? theme.TEXT : theme.MUTED} bold={isSelectedRow}>
+                <Text color={isSelectedRow ? theme.text : theme.textMuted} bold={isSelectedRow}>
                   {setting.label}
                 </Text>
               </Box>
@@ -138,7 +138,7 @@ export function SettingsPanel<TKey extends string>({
                   return (
                     <Text
                       key={option.value}
-                      color={isActiveOption ? (isSelectedRow ? theme.ACCENT : theme.TEXT) : theme.DIM}
+                      color={isActiveOption ? (isSelectedRow ? theme.accent : theme.text) : theme.textDim}
                       bold={isActiveOption}
                     >
                       {optionIndex > 0 ? "  " : ""}

package/src/ui/Spinner.tsx

@@ -7,7 +7,7 @@ const frames = ["⠋", "⠙", "⠹", "⠸", "⠼", "⠴", "⠦", "⠧", "⠇", "
 export function Spinner({ color }: { color?: string }) {
   const theme = useTheme();
   const [frame, setFrame] = useState(0);
-  const activeColor = color ?? theme.DIM;
+  const activeColor = color ?? theme.textDim;
 
   useEffect(() => {
     const timer = setInterval(() => {

package/src/ui/TextEntryPanel.tsx

@@ -97,18 +97,18 @@ export function TextEntryPanel({
     <Box flexDirection="column" width="100%" marginTop={1}>
       <Box
         borderStyle="round"
-        borderColor={theme.BORDER_SUBTLE}
+        borderColor={theme.border}
         paddingX={2}
         paddingY={1}
         width="100%"
       >
-        <Text color={theme.ACCENT} bold>{title}  </Text>
-        <Text color={theme.MUTED}>{subtitle}</Text>
+        <Text color={theme.accent} bold>{title}  </Text>
+        <Text color={theme.textMuted}>{subtitle}</Text>
       </Box>
 
       <Box
         borderStyle="round"
-        borderColor={theme.BORDER_ACTIVE}
+        borderColor={theme.borderFocused}
         paddingX={2}
         paddingY={1}
         marginTop={1}
@@ -116,18 +116,18 @@ export function TextEntryPanel({
         flexDirection="column"
       >
         <Box>
-          <Text color={theme.TEXT}>{inputLabel}: </Text>
-          <Text color={display.isPlaceholder ? theme.DIM : theme.TEXT}>{display.before}</Text>
+          <Text color={theme.text}>{inputLabel}: </Text>
+          <Text color={display.isPlaceholder ? theme.textDim : theme.text}>{display.before}</Text>
           <Text
-            backgroundColor={theme.TEXT}
-            color={theme.PANEL}
+            backgroundColor={theme.text}
+            color={theme.surface}
           >
             {display.current}
           </Text>
-          <Text color={display.isPlaceholder ? theme.DIM : theme.TEXT}>{display.after}</Text>
+          <Text color={display.isPlaceholder ? theme.textDim : theme.text}>{display.after}</Text>
         </Box>
         <Box marginTop={1}>
-          <Text color={theme.DIM}>{footerHint}</Text>
+          <Text color={theme.textDim}>{footerHint}</Text>
         </Box>
       </Box>
     </Box>

package/src/ui/ThinkingBlock.tsx

@@ -53,21 +53,21 @@ export function ThinkingBlock({ cols, run }: ThinkingBlockProps) {
       cols={cols}
       title="Processing"
       rightBadge={rightBadge}
-      borderColor={run.status === "running" ? theme.BORDER_ACTIVE : theme.BORDER_SUBTLE}
+      borderColor={run.status === "running" ? theme.borderFocused : theme.border}
     >
       {blocks.length === 0 ? (
-        <Text color={theme.DIM}>No processing updates</Text>
+        <Text color={theme.textDim}>No processing updates</Text>
       ) : (
         <Box flexDirection="column" width="100%">
           {currentText && run.status === "running" && (
             <Box width="100%">
-              <Text color={theme.INFO} bold>Current: </Text>
-              <Text color={theme.TEXT}>{currentText}</Text>
+              <Text color={theme.info} bold>Current: </Text>
+              <Text color={theme.text}>{currentText}</Text>
             </Box>
           )}
           {hiddenCount > 0 && (
             <Box marginTop={currentText && run.status === "running" ? 1 : 0}>
-              <Text color={theme.DIM}>{`... ${hiddenCount} earlier update${hiddenCount === 1 ? "" : "s"}`}</Text>
+              <Text color={theme.textDim}>{`... ${hiddenCount} earlier update${hiddenCount === 1 ? "" : "s"}`}</Text>
             </Box>
           )}
           {blocks.map((block, blockIndex) => {
@@ -79,16 +79,16 @@ export function ThinkingBlock({ cols, run }: ThinkingBlockProps) {
                 width="100%"
                 marginTop={blockIndex === 0 && hiddenCount === 0 && !(currentText && run.status === "running") ? 0 : 1}
               >
-                <Text color={isLive ? theme.ACCENT : theme.INFO} bold={isLive}>
+                <Text color={isLive ? theme.accent : theme.info} bold={isLive}>
                   {`${getBlockMarker(isLive)} ${isLive ? "Live" : block.label}`}
                 </Text>
                 {formatProgressBlockBodyLines(block.text, contentWidth).map((line, lineIndex) => (
-                  <Text key={`${block.key}-${lineIndex}`} color={theme.MUTED}>
+                  <Text key={`${block.key}-${lineIndex}`} color={theme.textMuted}>
                     {line ? `${isLive ? "  | " : "    "}${line}` : " "}
                   </Text>
                 ))}
                 {isLive && (
-                  <Text color={theme.ACCENT}>  | ▌</Text>
+                  <Text color={theme.accent}>  | ▌</Text>
                 )}
               </Box>
             );

package/src/ui/Timeline.tsx

@@ -11,7 +11,8 @@ import {
   type UIState,
   type UserPromptEvent,
 } from "../session/types.js";
-import { APP_VERSION } from "../config/settings.js";
+import { APP_VERSION } from "../config/settings.js";
+import { formatCodexaVersionLabel } from "../core/channel.js";
 import type { CodexAuthState } from "../core/auth/codexAuth.js";
 import { getAuthStateLabel } from "../core/auth/codexAuth.js";
 import * as renderDebug from "../core/perf/renderDebug.js";
@@ -854,8 +855,8 @@ export function buildIntroRenderItem(params: {
     key: "codexa-intro",
     type: "intro",
     padded: true,
-    intro: {
-      version: APP_VERSION,
+    intro: {
+      version: formatCodexaVersionLabel(APP_VERSION),
       layoutMode: params.layout.mode,
       startupHeaderMode: params.startupHeaderMode,
       authLabel: formatAuthLabel(params.authState),
@@ -868,18 +869,21 @@ export function buildIntroRenderItem(params: {
 
 function getToneColor(theme: ReturnType<typeof useTheme>, tone: TimelineTone | undefined): string | undefined {
   switch (tone) {
-    case "text": return theme.TEXT;
-    case "dim": return theme.DIM;
-    case "muted": return theme.MUTED;
-    case "accent": return theme.ACCENT;
-    case "info": return theme.INFO;
-    case "error": return theme.ERROR;
-    case "warning": return theme.WARNING;
-    case "success": return theme.SUCCESS;
-    case "borderSubtle": return theme.BORDER_SUBTLE;
-    case "borderActive": return theme.BORDER_ACTIVE;
-    case "panel": return theme.PANEL;
-    case "star": return theme.STAR;
+    case "text": return theme.text;
+    case "dim": return theme.textDim;
+    case "muted": return theme.textMuted;
+    case "accent": return theme.accent;
+    case "info": return theme.info;
+    case "error": return theme.error;
+    case "warning": return theme.warning;
+    case "success": return theme.success;
+    case "borderSubtle": return theme.border;
+    case "borderActive": return theme.borderFocused;
+    case "panel": return theme.surface;
+    case "star": return theme.warning;
+    case "logoPrimary": return theme.logoPrimary;
+    case "logoSecondary": return theme.logoSecondary;
+    case "logoShadow": return theme.logoShadow;
     default: return undefined;
   }
 }
@@ -959,8 +963,8 @@ const JumpToBottomBar = memo(function JumpToBottomBar({
   const hint = mouseCapture ? "wheel↓/End to bottom" : "PgDn/End to bottom";
   return (
     <Box width="100%" paddingX={1}>
-      <Text color={theme.INFO}>{label}</Text>
-      <Text color={theme.DIM}>{`  ·  ${hint}`}</Text>
+      <Text color={theme.info}>{label}</Text>
+      <Text color={theme.textDim}>{`  ·  ${hint}`}</Text>
     </Box>
   );
 });