feat: session ui improvements (#250)

Some bug fixes, along with better chat UI, and rendering of interrupts and the agent todos:

![image.png](https://app.graphite.com/user-attachments/assets/f655f26d-a287-4e28-bf51-224116946712.png)
---


## Collapsed plan:
![image.png](https://app.graphite.com/user-attachments/assets/c8c27ad8-64e3-467f-afd8-7aca73f1106d.png)


## Expanded plan
![image.png](https://app.graphite.com/user-attachments/assets/8f9e121f-a682-4fb2-84b9-49a715f0199f.png)

Author: jonathanlab

apps/array/src/main/services/workspace/workspaceService.ts

@@ -130,10 +130,10 @@ export class WorkspaceService {
             log.info(`Switched to existing branch ${branch}`);
           }
         } catch (error) {
-          log.error(`Failed to create/switch to branch ${branch}:`, error);
-          throw new Error(
-            `Failed to create/switch to branch ${branch}: ${String(error)}`,
-          );
+          const message = `Could not switch to branch "${branch}". Please commit or stash your changes first.`;
+          log.error(message, error);
+          this.emitWorkspaceError(taskId, message);
+          throw new Error(message);
         }
       }
 

apps/array/src/renderer/App.tsx

@@ -3,6 +3,7 @@ import { AuthScreen } from "@features/auth/components/AuthScreen";
 import { useAuthStore } from "@features/auth/stores/authStore";
 import { Flex, Spinner, Text } from "@radix-ui/themes";
 import { initializePostHog } from "@renderer/lib/analytics";
+import { toast } from "@utils/toast";
 import { useEffect, useState } from "react";
 
 function App() {
@@ -14,6 +15,14 @@ function App() {
     initializePostHog();
   }, []);
 
+  // Global workspace error listener for toasts
+  useEffect(() => {
+    const unsubscribe = window.electronAPI?.workspace.onError((data) => {
+      toast.error("Workspace error", { description: data.message });
+    });
+    return () => unsubscribe?.();
+  }, []);
+
   useEffect(() => {
     initializeOAuth().finally(() => setIsLoading(false));
   }, [initializeOAuth]);

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

@@ -44,6 +44,7 @@ export function List({ children, as = "ul" }: ListProps) {
 
   return (
     <Component
+      className="marker:text-[var(--accent-10)]"
       style={{
         margin: 0,
         marginTop: "var(--space-2)",

apps/array/src/renderer/features/editor/components/MarkdownRenderer.tsx

@@ -6,11 +6,8 @@ import {
   Checkbox,
   Code,
   Em,
-  Heading,
   Kbd,
   Link,
-  Strong,
-  Table,
   Text,
 } from "@radix-ui/themes";
 import type { Components } from "react-markdown";
@@ -27,44 +24,20 @@ function preprocessMarkdown(content: string): string {
   return content.replace(/\n([^\n].*)\n(---+|___+|\*\*\*+)\n/g, "\n$1\n\n$2\n");
 }
 
-const fontStyle = {
-  fontSize: "var(--font-size-1-5)",
-  lineHeight: "var(--line-height-1-5)",
-};
+const HeadingText = ({ children }: { children: React.ReactNode }) => (
+  <Text as="p" size="1" mb="2" style={{ color: "var(--accent-11)" }}>
+    <strong>{children}</strong>
+  </Text>
+);
 
 const components: Components = {
-  h1: ({ children }) => (
-    <Heading as="h1" size="4" mb="3" color="gray" highContrast>
-      {children}
-    </Heading>
-  ),
-  h2: ({ children }) => (
-    <Heading as="h2" size="3" mb="3" color="gray" highContrast>
-      {children}
-    </Heading>
-  ),
-  h3: ({ children }) => (
-    <Heading as="h3" size="2" mb="2" color="gray" highContrast>
-      {children}
-    </Heading>
-  ),
-  h4: ({ children }) => (
-    <Heading as="h4" size="2" mb="2" color="gray" highContrast>
-      {children}
-    </Heading>
-  ),
-  h5: ({ children }) => (
-    <Heading as="h5" size="2" mb="2" color="gray" highContrast>
-      {children}
-    </Heading>
-  ),
-  h6: ({ children }) => (
-    <Heading as="h6" size="2" mb="2" color="gray" highContrast>
-      {children}
-    </Heading>
-  ),
+  h1: ({ children }) => <HeadingText>{children}</HeadingText>,
+  h2: ({ children }) => <HeadingText>{children}</HeadingText>,
+  h3: ({ children }) => <HeadingText>{children}</HeadingText>,
+  h4: ({ children }) => <HeadingText>{children}</HeadingText>,
+  h5: ({ children }) => <HeadingText>{children}</HeadingText>,
+  h6: ({ children }) => <HeadingText>{children}</HeadingText>,
   p: ({ children, node }) => {
-    // Check if paragraph only contains a strong element (used as pseudo-heading by LLMs)
     const isStrongOnly =
       node?.children?.length === 1 &&
       node.children[0].type === "element" &&
@@ -76,66 +49,66 @@ const components: Components = {
         size="1"
         mb={isStrongOnly ? "2" : "3"}
         color="gray"
-        style={fontStyle}
         highContrast
       >
         {children}
       </Text>
     );
   },
   blockquote: ({ children }) => (
-    <Blockquote size="2" mb="3" color="gray" style={fontStyle} highContrast>
+    <Blockquote
+      size="1"
+      mb="3"
+      style={{ color: "var(--accent-10)", borderColor: "var(--accent-6)" }}
+    >
       {children}
     </Blockquote>
   ),
   code: ({ children, className }) => {
     const isInline = !className?.includes("language-");
     if (isInline) {
       return (
-        <Code
-          size="2"
-          variant="soft"
-          color="gray"
-          style={fontStyle}
-          highContrast
-        >
+        <Code size="1" variant="soft" color="gray" highContrast>
           {children}
         </Code>
       );
     }
     return <code>{children}</code>;
   },
-  pre: ({ children }) => <CodeBlock size="1.5">{children}</CodeBlock>,
-  em: ({ children }) => <Em>{children}</Em>,
-  strong: ({ children }) => <Strong>{children}</Strong>,
+  pre: ({ children }) => <CodeBlock size="1">{children}</CodeBlock>,
+  em: ({ children }) => (
+    <Em style={{ color: "var(--accent-10)" }}>{children}</Em>
+  ),
+  strong: ({ children }) => (
+    <strong
+      style={{ fontSize: "var(--font-size-1)", color: "var(--accent-11)" }}
+    >
+      {children}
+    </strong>
+  ),
   del: ({ children }) => (
-    <del style={{ textDecoration: "line-through", color: "var(--gray-11)" }}>
+    <del style={{ textDecoration: "line-through", color: "var(--gray-9)" }}>
       {children}
     </del>
   ),
   a: ({ href, children }) => (
-    <Link
-      href={href}
-      target="_blank"
-      rel="noopener noreferrer"
-      style={fontStyle}
-    >
+    <Link href={href} target="_blank" rel="noopener noreferrer" size="1">
       {children}
     </Link>
   ),
-  kbd: ({ children }) => <Kbd style={fontStyle}>{children}</Kbd>,
+  kbd: ({ children }) => <Kbd size="1">{children}</Kbd>,
   ul: ({ children }) => (
-    <List as="ul" size="1.5">
+    <List as="ul" size="1">
       {children}
     </List>
   ),
   ol: ({ children }) => (
-    <List as="ol" size="1.5">
+    <List as="ol" size="1">
       {children}
     </List>
   ),
-  li: ({ children }) => <ListItem size="1.5">{children}</ListItem>,
-  hr: () => <Divider size="2" />,
+  li: ({ children }) => <ListItem size="1">{children}</ListItem>,
+  hr: () => <Divider size="1" />,
   // Task list checkbox
   input: ({ type, checked }) => {
     if (type === "checkbox") {
@@ -149,22 +122,24 @@ const components: Components = {
     }
     return <input type={type} />;
   },
-  // Table components using Radix Table
+  // Table components - plain HTML for size control
   table: ({ children }) => (
-    <Table.Root size="1" variant="surface" mb="3">
+    <table className="mb-3" style={{ fontSize: "var(--font-size-1)" }}>
       {children}
-    </Table.Root>
+    </table>
   ),
-  thead: ({ children }) => <Table.Header>{children}</Table.Header>,
-  tbody: ({ children }) => <Table.Body>{children}</Table.Body>,
-  tr: ({ children }) => <Table.Row>{children}</Table.Row>,
+  thead: ({ children }) => <thead>{children}</thead>,
+  tbody: ({ children }) => <tbody>{children}</tbody>,
+  tr: ({ children }) => <tr className="border-gray-6 border-b">{children}</tr>,
   th: ({ children, style }) => (
-    <Table.ColumnHeaderCell style={{ ...fontStyle, ...style }}>
+    <th className="px-2 py-1 text-left text-gray-11" style={style}>
       {children}
-    </Table.ColumnHeaderCell>
+    </th>
   ),
   td: ({ children, style }) => (
-    <Table.Cell style={{ ...fontStyle, ...style }}>{children}</Table.Cell>
+    <td className="px-2 py-1 text-gray-12" style={style}>
+      {children}
+    </td>
   ),
 };