fix: Misc minor UI changes for upcoming PRs (#628)

Author: charlesvien

apps/twig/src/renderer/components/HeaderRow.tsx

@@ -2,7 +2,6 @@ import { RightSidebarTrigger } from "@features/right-sidebar/components/RightSid
 import { useRightSidebarStore } from "@features/right-sidebar/stores/rightSidebarStore";
 import { SidebarTrigger } from "@features/sidebar/components/SidebarTrigger";
 import { useSidebarStore } from "@features/sidebar/stores/sidebarStore";
-import { ChangesTabBadge } from "@features/task-detail/components/ChangesTabBadge";
 import { Box, Flex } from "@radix-ui/themes";
 import { useHeaderStore } from "@stores/headerStore";
 import { useNavigationStore } from "@stores/navigationStore";
@@ -119,9 +118,6 @@ export function HeaderRow() {
           }}
         >
           <RightSidebarTrigger />
-          {rightSidebarOpen && (
-            <ChangesTabBadge taskId={view.data.id} task={view.data} />
-          )}
           {rightSidebarOpen && (
             <Box
               onMouseDown={handleRightSidebarMouseDown}

apps/twig/src/renderer/constants/keyboard-shortcuts.ts

@@ -1,5 +1,5 @@
 export const SHORTCUTS = {
-  COMMAND_MENU: "mod+shift+p",
+  COMMAND_MENU: "mod+k",
   NEW_TASK: "mod+n",
   SETTINGS: "mod+,",
   SHORTCUTS_SHEET: "mod+/",

apps/twig/src/renderer/features/message-editor/components/MessageEditor.tsx

@@ -206,7 +206,7 @@ export const MessageEditor = forwardRef<EditorHandle, MessageEditorProps>(
           </Flex>
         </Flex>
         {onModeChange && currentMode && (
-          <ModeIndicatorInput mode={currentMode} />
+          <ModeIndicatorInput mode={currentMode} taskId={taskId} />
         )}
       </Flex>
     );

apps/twig/src/renderer/features/message-editor/components/ModeIndicatorInput.tsx

@@ -1,9 +1,13 @@
 import type { ExecutionMode } from "@features/sessions/stores/sessionStore";
-import { Pause, Pencil, ShieldCheck } from "@phosphor-icons/react";
+import { useCwd } from "@features/sidebar/hooks/useCwd";
+import { Circle, Pause, Pencil, ShieldCheck } from "@phosphor-icons/react";
 import { Flex, Text } from "@radix-ui/themes";
+import { trpcVanilla } from "@renderer/trpc";
+import { useQuery } from "@tanstack/react-query";
 
 interface ModeIndicatorInputProps {
   mode: ExecutionMode;
+  taskId?: string;
 }
 
 const modeConfig: Record<
@@ -31,8 +35,23 @@ const modeConfig: Record<
   },
 };
 
-export function ModeIndicatorInput({ mode }: ModeIndicatorInputProps) {
+export function ModeIndicatorInput({ mode, taskId }: ModeIndicatorInputProps) {
   const config = modeConfig[mode];
+  const repoPath = useCwd(taskId ?? "");
+
+  const { data: diffStats } = useQuery({
+    queryKey: ["diff-stats", repoPath],
+    queryFn: () =>
+      trpcVanilla.git.getDiffStats.query({
+        directoryPath: repoPath as string,
+      }),
+    enabled: !!repoPath && !!taskId,
+    staleTime: 5000,
+    refetchInterval: 5000,
+    placeholderData: (prev) => prev,
+  });
+
+  const hasDiffStats = diffStats && diffStats.filesChanged > 0;
 
   return (
     <Flex align="center" justify="between" py="1">
@@ -59,6 +78,30 @@ export function ModeIndicatorInput({ mode }: ModeIndicatorInputProps) {
         >
           (shift+tab to cycle)
         </Text>
+        {hasDiffStats && (
+          <Text
+            size="1"
+            style={{
+              color: "var(--gray-9)",
+              fontFamily: "monospace",
+              display: "flex",
+              alignItems: "center",
+              gap: "6px",
+            }}
+          >
+            <Circle size={4} weight="fill" style={{ margin: "0 4px" }} />
+            <span style={{ color: "var(--gray-11)" }}>
+              {diffStats.filesChanged}{" "}
+              {diffStats.filesChanged === 1 ? "file" : "files"}
+            </span>
+            <span style={{ color: "var(--green-9)" }}>
+              +{diffStats.linesAdded}
+            </span>
+            <span style={{ color: "var(--red-9)" }}>
+              -{diffStats.linesRemoved}
+            </span>
+          </Text>
+        )}
       </Flex>
     </Flex>
   );

apps/twig/src/renderer/features/sessions/components/GeneratingIndicator.tsx

@@ -1,4 +1,4 @@
-import { Campfire } from "@phosphor-icons/react";
+import { Campfire, Circle } from "@phosphor-icons/react";
 import { Flex, Text } from "@radix-ui/themes";
 import { useEffect, useState } from "react";
 
@@ -50,12 +50,21 @@ export function GeneratingIndicator({ startedAt }: GeneratingIndicatorProps) {
     >
       <Campfire size={14} weight="fill" className="campfire-pulse" />
       <Text size="1">{ACTIVITIES[activityIndex]}...</Text>
+      <Text size="1" color="gray">
+        (Esc to interrupt
+      </Text>
+      <Circle
+        size={4}
+        weight="fill"
+        className="text-gray-9"
+        style={{ margin: "0 2px" }}
+      />
       <Text
         size="1"
         color="gray"
-        style={{ fontVariantNumeric: "tabular-nums", minWidth: "50px" }}
+        style={{ fontVariantNumeric: "tabular-nums" }}
       >
-        {formatDuration(elapsed)}
+        {formatDuration(elapsed)})
       </Text>
     </Flex>
   );