feat: better colours (#171)

Author: jonathanlab

apps/array/package.json

@@ -114,6 +114,7 @@
     "@xterm/addon-fit": "^0.10.0",
     "@xterm/addon-serialize": "^0.13.0",
     "@xterm/addon-web-links": "^0.11.0",
+    "@xterm/addon-webgl": "^0.18.0",
     "@xterm/xterm": "^5.5.0",
     "ai": "^5.0.75",
     "chokidar": "^5.0.0",

apps/array/src/renderer/components/StatusBar.tsx

@@ -44,7 +44,7 @@ export function StatusBar({ showKeyHints = true }: StatusBarProps) {
 
       {IS_DEV && (
         <Flex align="center" gap="2">
-          <Badge color="orange" size="1">
+          <Badge size="1">
             <Code size="1" variant="ghost">
               DEV
             </Code>

apps/array/src/renderer/components/ThemeWrapper.tsx

@@ -8,7 +8,7 @@ export function ThemeWrapper({ children }: { children: React.ReactNode }) {
   return (
     <Theme
       appearance={isDarkMode ? "dark" : "light"}
-      accentColor="orange"
+      accentColor={isDarkMode ? "orange" : "yellow"}
       grayColor="slate"
       panelBackground="solid"
       radius="none"

apps/array/src/renderer/features/logs/components/DoneView.tsx

@@ -87,7 +87,7 @@ export function DoneView({ event }: DoneViewProps) {
           )}
           {event.permissionDenials && event.permissionDenials.length > 0 && (
             <Box mt={event.result ? "2" : "0"}>
-              <Code size="1" color="orange" variant="soft">
+              <Code size="1" variant="soft">
                 {event.permissionDenials.length} tool call(s) denied by
                 permissions
               </Code>

apps/array/src/renderer/features/logs/components/LogView.tsx

@@ -234,7 +234,7 @@ export function LogView({
                 <Box
                   width="8px"
                   height="8px"
-                  className="rounded-full bg-orange-9"
+                  className="rounded-full bg-accent-9"
                 />
                 <Text size="2" color="gray">
                   Idle

apps/array/src/renderer/features/task-detail/components/SuggestedTasks.tsx

@@ -52,7 +52,7 @@ export function SuggestedTasks({ editor }: SuggestedTasksProps) {
               onClick={() =>
                 handleSuggestionClick(suggestion.title, suggestion.prompt)
               }
-              className="group relative flex cursor-pointer items-start gap-2 rounded border border-gray-6 bg-gray-2 p-2 text-left transition-colors hover:border-orange-6 hover:bg-accent-2"
+              className="group relative flex cursor-pointer items-start gap-2 rounded border border-gray-6 bg-gray-2 p-2 text-left transition-colors hover:border-accent-6 hover:bg-accent-2"
             >
               <Flex direction="column" gap="1" style={{ flex: 1 }}>
                 <Text size="1" weight="medium" className="text-gray-12">

apps/array/src/renderer/features/task-detail/components/TaskFileMentionList.tsx

@@ -119,7 +119,7 @@ export const TaskFileMentionList = forwardRef(
     return (
       <div
         ref={containerRef}
-        className="scrollbar-hide absolute z-[1000] max-h-60 min-w-[300px] overflow-auto rounded border border-orange-6 bg-gray-1 font-mono text-xs shadow-xl"
+        className="scrollbar-hide absolute z-[1000] max-h-60 min-w-[300px] overflow-auto rounded border border-accent-6 bg-gray-1 font-mono text-xs shadow-xl"
       >
         {props.items.map((item, index) => {
           const isSelected = index === selectedIndex;
@@ -136,8 +136,8 @@ export const TaskFileMentionList = forwardRef(
               onMouseEnter={() => setSelectedIndex(index)}
               className={`flex w-full cursor-pointer items-center gap-1 px-2 py-0.5 text-left ${
                 isSelected
-                  ? "bg-orange-3 text-orange-11"
-                  : "text-gray-11 hover:bg-orange-2"
+                  ? "bg-accent-3 text-accent-11"
+                  : "text-gray-11 hover:bg-accent-2"
               }
               `}
             >

apps/array/src/renderer/features/task-detail/components/TaskInputEditor.tsx

@@ -16,7 +16,7 @@ export function TaskInputEditor({
     <Flex
       direction="column"
       style={{
-        backgroundColor: "rgba(0, 0, 0, 0.3)",
+        backgroundColor: "var(--gray-a1)",
         borderRadius: "var(--radius-2)",
         border: "1px solid var(--gray-a6)",
         position: "relative",

apps/array/src/renderer/features/terminal/components/ShellTerminal.tsx

@@ -4,6 +4,7 @@ import { SerializeAddon } from "@xterm/addon-serialize";
 import { WebLinksAddon } from "@xterm/addon-web-links";
 import { Terminal } from "@xterm/xterm";
 import "@xterm/xterm/css/xterm.css";
+import { useThemeStore } from "@stores/themeStore";
 import { useEffect, useRef } from "react";
 import { logger } from "@/renderer/lib/logger";
 import { useTerminalStore } from "../stores/terminalStore";
@@ -59,6 +60,7 @@ export function ShellTerminal({ cwd, stateKey }: ShellTerminalProps) {
   const restoredStateLengthRef = useRef<number>(0);
 
   const terminalStore = useTerminalStore();
+  const isDarkMode = useThemeStore((state) => state.isDarkMode);
   const persistenceKey = stateKey || cwd || "default";
 
   useEffect(() => {
@@ -79,14 +81,23 @@ export function ShellTerminal({ cwd, stateKey }: ShellTerminalProps) {
       cursorBlink: true,
       fontSize: 12,
       fontFamily: "monospace",
-      theme: {
-        background: "transparent",
-        foreground: "#ffffff",
-        cursor: "#BD6C3A",
-        cursorAccent: "#ffffff",
-        selectionBackground: "#532601",
-        selectionForeground: "#ffffff",
-      },
+      theme: isDarkMode
+        ? {
+            background: "transparent",
+            foreground: "#eeeeea",
+            cursor: "#dc9300",
+            cursorAccent: "#eeeeea",
+            selectionBackground: "rgba(255, 203, 129, 0.3)",
+            selectionForeground: "#eeeeea",
+          }
+        : {
+            background: "transparent",
+            foreground: "#1f1f1f",
+            cursor: "#dc9300",
+            cursorAccent: "#1f1f1f",
+            selectionBackground: "rgba(255, 189, 87, 0.4)",
+            selectionForeground: "#1f1f1f",
+          },
       cursorStyle: "block",
       cursorWidth: 8,
       allowProposedApi: true,
@@ -296,14 +307,38 @@ export function ShellTerminal({ cwd, stateKey }: ShellTerminalProps) {
       hasReceivedDataRef.current = false;
       restoredStateLengthRef.current = 0;
     };
+    // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [
     cwd,
     persistenceKey,
     terminalStore.getTerminalState,
     terminalStore.setSerializedState,
     terminalStore.setSessionId,
+    isDarkMode,
   ]);
 
+  useEffect(() => {
+    if (terminal.current) {
+      terminal.current.options.theme = isDarkMode
+        ? {
+            background: "transparent",
+            foreground: "#eeeeea",
+            cursor: "#dc9300",
+            cursorAccent: "#eeeeea",
+            selectionBackground: "rgba(255, 203, 129, 0.3)",
+            selectionForeground: "#eeeeea",
+          }
+        : {
+            background: "transparent",
+            foreground: "#1f1f1f",
+            cursor: "#dc9300",
+            cursorAccent: "#1f1f1f",
+            selectionBackground: "rgba(255, 189, 87, 0.4)",
+            selectionForeground: "#1f1f1f",
+          };
+    }
+  }, [isDarkMode]);
+
   return (
     <Box
       style={{