Merge branch 'main' into dev

packages/app/src/components/explorer-sidebar.tsx

@@ -472,7 +472,7 @@ const styles = StyleSheet.create((theme) => ({
     borderRadius: theme.borderRadius.md,
   },
   tabActive: {
-    backgroundColor: theme.colors.surface1,
+    backgroundColor: theme.colors.surfaceSidebarHover,
   },
   tabText: {
     fontSize: theme.fontSize.sm,

packages/app/src/components/file-explorer-pane.tsx

@@ -849,7 +849,7 @@ const styles = StyleSheet.create((theme) => ({
     borderRadius: theme.borderRadius.md,
   },
   entryRowActive: {
-    backgroundColor: theme.colors.surface1,
+    backgroundColor: theme.colors.surfaceSidebarHover,
   },
   indentGuide: {
     position: "absolute",

packages/app/src/components/git-diff-pane.tsx

@@ -58,7 +58,12 @@ import {
 import { WORKSPACE_SECONDARY_HEADER_HEIGHT } from "@/constants/layout";
 import { Fonts } from "@/constants/theme";
 import { shouldAnchorHeaderBeforeCollapse } from "@/utils/git-diff-scroll";
-import { buildSplitDiffRows, type SplitDiffDisplayLine, type SplitDiffRow } from "@/utils/diff-layout";
+import {
+  buildSplitDiffRows,
+  buildUnifiedDiffLines,
+  type SplitDiffDisplayLine,
+  type SplitDiffRow,
+} from "@/utils/diff-layout";
 import {
   DropdownMenu,
   DropdownMenuContent,
@@ -76,6 +81,11 @@ import { openExternalUrl } from "@/utils/open-external-url";
 import { GitActionsSplitButton } from "@/components/git-actions-split-button";
 import { usePanelStore } from "@/stores/panel-store";
 import { buildWorkspaceExplorerStateKey } from "@/hooks/use-file-explorer-actions";
+import {
+  formatDiffContentText,
+  formatDiffGutterText,
+  hasVisibleDiffTokens,
+} from "@/utils/diff-rendering";
 
 export type { GitActionId, GitAction, GitActions } from "@/components/git-actions-policy";
 
@@ -166,7 +176,7 @@ function DiffGutterCell({
           type === "remove" && styles.removeLineNumberText,
         ]}
       >
-        {lineNumber != null ? String(lineNumber) : ""}
+        {formatDiffGutterText(lineNumber)}
       </Text>
     </View>
   );
@@ -179,10 +189,12 @@ function DiffTextLine({
   line: DiffLine;
   wrapLines: boolean;
 }) {
+  const visibleTokens = hasVisibleDiffTokens(line.tokens) ? line.tokens : null;
+
   return (
     <View style={[styles.textLineContainer, lineTypeBackground(line.type)]}>
-      {line.tokens && line.type !== "header" ? (
-        <HighlightedText tokens={line.tokens} wrapLines={wrapLines} />
+      {line.type !== "header" && visibleTokens ? (
+        <HighlightedText tokens={visibleTokens} wrapLines={wrapLines} />
       ) : (
         <Text
           style={[
@@ -194,7 +206,7 @@ function DiffTextLine({
             line.type === "context" && styles.contextLineText,
           ]}
         >
-          {line.content || " "}
+          {formatDiffContentText(line.content)}
         </Text>
       )}
     </View>
@@ -208,10 +220,12 @@ function SplitTextLine({
   line: SplitDiffDisplayLine | null;
   wrapLines: boolean;
 }) {
+  const visibleTokens = line && hasVisibleDiffTokens(line.tokens) ? line.tokens : null;
+
   return (
     <View style={[styles.textLineContainer, lineTypeBackground(line?.type)]}>
-      {line?.tokens ? (
-        <HighlightedText tokens={line.tokens} wrapLines={wrapLines} />
+      {visibleTokens ? (
+        <HighlightedText tokens={visibleTokens} wrapLines={wrapLines} />
       ) : (
         <Text
           style={[
@@ -223,7 +237,7 @@ function SplitTextLine({
             !line && styles.emptySplitCellText,
           ]}
         >
-          {line?.content ?? ""}
+          {formatDiffContentText(line?.content)}
         </Text>
       )}
     </View>
@@ -241,6 +255,8 @@ function DiffLineView({
   gutterWidth: number;
   wrapLines: boolean;
 }) {
+  const visibleTokens = hasVisibleDiffTokens(line.tokens) ? line.tokens : null;
+
   return (
     <View
       style={[
@@ -256,11 +272,11 @@ function DiffLineView({
             line.type === "remove" && styles.removeLineNumberText,
           ]}
         >
-          {lineNumber != null ? String(lineNumber) : ""}
+          {formatDiffGutterText(lineNumber)}
         </Text>
       </View>
-      {line.tokens && line.type !== "header" ? (
-        <HighlightedText tokens={line.tokens} wrapLines={wrapLines} />
+      {line.type !== "header" && visibleTokens ? (
+        <HighlightedText tokens={visibleTokens} wrapLines={wrapLines} />
       ) : (
         <Text
           style={[
@@ -272,7 +288,7 @@ function DiffLineView({
             line.type === "context" && styles.contextLineText,
           ]}
         >
-          {line.content || " "}
+          {formatDiffContentText(line.content)}
         </Text>
       )}
     </View>
@@ -288,6 +304,8 @@ function SplitDiffLine({
   gutterWidth: number;
   wrapLines: boolean;
 }) {
+  const visibleTokens = line && hasVisibleDiffTokens(line.tokens) ? line.tokens : null;
+
   return (
     <View
       style={[
@@ -303,11 +321,11 @@ function SplitDiffLine({
             line?.type === "remove" && styles.removeLineNumberText,
           ]}
         >
-          {line?.lineNumber != null ? String(line.lineNumber) : ""}
+          {formatDiffGutterText(line?.lineNumber ?? null)}
         </Text>
       </View>
-      {line?.tokens ? (
-        <HighlightedText tokens={line.tokens} wrapLines={wrapLines} />
+      {visibleTokens ? (
+        <HighlightedText tokens={visibleTokens} wrapLines={wrapLines} />
       ) : (
         <Text
           style={[
@@ -319,7 +337,7 @@ function SplitDiffLine({
             !line && styles.emptySplitCellText,
           ]}
         >
-          {line?.content ?? ""}
+          {formatDiffContentText(line?.content)}
         </Text>
       )}
     </View>
@@ -535,26 +553,7 @@ function DiffFileBody({
           );
         }
 
-        const computedLines: { line: DiffLine; lineNumber: number | null; key: string }[] = [];
-        for (const [hunkIndex, hunk] of file.hunks.entries()) {
-          let oldLineNo = hunk.oldStart;
-          let newLineNo = hunk.newStart;
-          for (const [lineIndex, line] of hunk.lines.entries()) {
-            let lineNumber: number | null = null;
-            if (line.type === "remove") {
-              lineNumber = oldLineNo;
-              oldLineNo++;
-            } else if (line.type === "add") {
-              lineNumber = newLineNo;
-              newLineNo++;
-            } else if (line.type === "context") {
-              lineNumber = newLineNo;
-              oldLineNo++;
-              newLineNo++;
-            }
-            computedLines.push({ line, lineNumber, key: `${hunkIndex}-${lineIndex}` });
-          }
-        }
+        const computedLines = buildUnifiedDiffLines(file);
 
         if (wrapLines) {
           return (
@@ -1725,7 +1724,7 @@ const styles = StyleSheet.create((theme) => ({
   newBadgeText: {
     fontSize: theme.fontSize.xs,
     fontWeight: theme.fontWeight.normal,
-    color: theme.colors.palette.green[400],
+    color: theme.colors.diffAddition,
   },
   deletedBadge: {
     backgroundColor: "rgba(248, 81, 73, 0.2)",
@@ -1737,7 +1736,17 @@ const styles = StyleSheet.create((theme) => ({
   deletedBadgeText: {
     fontSize: theme.fontSize.xs,
     fontWeight: theme.fontWeight.normal,
-    color: theme.colors.palette.red[500],
+    color: theme.colors.diffDeletion,
+  },
+  additions: {
+    fontSize: theme.fontSize.xs,
+    fontWeight: theme.fontWeight.normal,
+    color: theme.colors.diffAddition,
+  },
+  deletions: {
+    fontSize: theme.fontSize.xs,
+    fontWeight: theme.fontWeight.normal,
+    color: theme.colors.diffDeletion,
   },
   diffContent: {
     borderTopWidth: theme.borderWidth[1],
@@ -1815,10 +1824,10 @@ const styles = StyleSheet.create((theme) => ({
     userSelect: "none",
   },
   addLineNumberText: {
-    color: theme.colors.palette.green[400],
+    color: theme.colors.diffAddition,
   },
   removeLineNumberText: {
-    color: theme.colors.palette.red[500],
+    color: theme.colors.diffDeletion,
   },
   diffLineText: {
     flex: 1,

packages/app/src/components/left-sidebar.tsx

@@ -885,10 +885,10 @@ const styles = StyleSheet.create((theme) => ({
     color: theme.colors.foreground,
   },
   newAgentButtonHovered: {
-    backgroundColor: theme.colors.surface1,
+    backgroundColor: theme.colors.surfaceSidebarHover,
   },
   newAgentButtonActive: {
-    backgroundColor: theme.colors.surface1,
+    backgroundColor: theme.colors.surfaceSidebarHover,
   },
   hostTrigger: {
     flexDirection: "row",
@@ -901,7 +901,7 @@ const styles = StyleSheet.create((theme) => ({
     borderRadius: theme.borderRadius.lg,
   },
   hostTriggerHovered: {
-    backgroundColor: theme.colors.surface1,
+    backgroundColor: theme.colors.surfaceSidebarHover,
   },
   hostStatusDot: {
     width: 8,

packages/app/src/components/sidebar-workspace-list.tsx

@@ -2226,7 +2226,7 @@ const styles = StyleSheet.create((theme) => ({
     gap: theme.spacing[2],
   },
   projectRowHovered: {
-    backgroundColor: theme.colors.surface1,
+    backgroundColor: theme.colors.surfaceSidebarHover,
   },
   projectRowPressed: {
     backgroundColor: theme.colors.surface2,
@@ -2296,7 +2296,7 @@ const styles = StyleSheet.create((theme) => ({
     flexShrink: 0,
   },
   projectActionButtonHovered: {
-    backgroundColor: theme.colors.surface1,
+    backgroundColor: theme.colors.surfaceSidebarHover,
   },
   projectActionButtonText: {
     color: theme.colors.foregroundMuted,
@@ -2311,7 +2311,7 @@ const styles = StyleSheet.create((theme) => ({
     flexShrink: 0,
   },
   projectIconActionButtonHovered: {
-    backgroundColor: theme.colors.surface1,
+    backgroundColor: theme.colors.surfaceSidebarHover,
   },
   projectIconActionButtonHidden: {
     opacity: 0,
@@ -2389,7 +2389,7 @@ const styles = StyleSheet.create((theme) => ({
     flexShrink: 0,
   },
   workspaceRowHovered: {
-    backgroundColor: theme.colors.surface1,
+    backgroundColor: theme.colors.surfaceSidebarHover,
   },
   workspaceRowPressed: {
     backgroundColor: theme.colors.surface2,
@@ -2403,7 +2403,7 @@ const styles = StyleSheet.create((theme) => ({
     ...theme.shadow.md,
   },
   sidebarRowSelected: {
-    backgroundColor: theme.colors.surface1,
+    backgroundColor: theme.colors.surfaceSidebarHover,
   },
   workspaceRowContainer: {
     position: "relative",
@@ -2467,6 +2467,22 @@ const styles = StyleSheet.create((theme) => ({
     fontSize: theme.fontSize.xs,
     flexShrink: 0,
   },
+  diffStatRow: {
+    flexDirection: "row",
+    alignItems: "center",
+    gap: 6,
+    flexShrink: 0,
+  },
+  diffStatAdditions: {
+    fontSize: theme.fontSize.xs,
+    fontWeight: theme.fontWeight.normal,
+    color: theme.colors.diffAddition,
+  },
+  diffStatDeletions: {
+    fontSize: theme.fontSize.xs,
+    fontWeight: theme.fontWeight.normal,
+    color: theme.colors.diffDeletion,
+  },
   kebabButton: {
     padding: 2,
     borderRadius: 4,

packages/app/src/components/ui/tooltip.tsx

@@ -550,9 +550,9 @@ const styles = StyleSheet.create((theme) => ({
     paddingHorizontal: theme.spacing[2],
     borderRadius: theme.borderRadius.xl,
     backgroundColor: theme.colors.popover,
-    borderWidth: theme.borderWidth[2],
-    borderColor: theme.colors.border,
-    ...theme.shadow.sm,
+    borderWidth: theme.borderWidth[1],
+    borderColor: theme.colors.borderAccent,
+    ...theme.shadow.md,
     zIndex: 1000,
   },
 }));