Skip to content

Commit ddfe75a

Browse files
charlesviencharlesvien
committed
We love safe AI around here
1 parent 0b962a1 commit ddfe75a

4 files changed

Lines changed: 72 additions & 94 deletions

File tree

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

Lines changed: 59 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,59 @@
1+
import { Circle } from "@phosphor-icons/react";
2+
import { Flex, Text } from "@radix-ui/themes";
3+
import { trpcVanilla } from "@renderer/trpc";
4+
import { useQuery } from "@tanstack/react-query";
5+
6+
interface DiffStatsIndicatorProps {
7+
repoPath: string | null | undefined;
8+
}
9+
10+
export function DiffStatsIndicator({ repoPath }: DiffStatsIndicatorProps) {
11+
const { data: diffStats } = useQuery({
12+
queryKey: ["diff-stats", repoPath],
13+
queryFn: () =>
14+
trpcVanilla.git.getDiffStats.query({
15+
directoryPath: repoPath as string,
16+
}),
17+
enabled: !!repoPath,
18+
staleTime: 5000,
19+
refetchInterval: 5000,
20+
placeholderData: (prev) => prev,
21+
});
22+
23+
if (!diffStats || diffStats.filesChanged === 0) {
24+
return null;
25+
}
26+
27+
return (
28+
<Flex align="center" gap="2">
29+
<Circle size={4} weight="fill" color="var(--gray-9)" />
30+
<Text
31+
size="1"
32+
style={{
33+
color: "var(--gray-11)",
34+
fontFamily: "monospace",
35+
}}
36+
>
37+
{diffStats.filesChanged} {diffStats.filesChanged === 1 ? "file" : "files"}
38+
</Text>
39+
<Text
40+
size="1"
41+
style={{
42+
color: "var(--green-9)",
43+
fontFamily: "monospace",
44+
}}
45+
>
46+
+{diffStats.linesAdded}
47+
</Text>
48+
<Text
49+
size="1"
50+
style={{
51+
color: "var(--red-9)",
52+
fontFamily: "monospace",
53+
}}
54+
>
55+
-{diffStats.linesRemoved}
56+
</Text>
57+
</Flex>
58+
);
59+
}

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

Lines changed: 8 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -10,6 +10,7 @@ import { useDraftStore } from "../stores/draftStore";
1010
import { useTiptapEditor } from "../tiptap/useTiptapEditor";
1111
import type { EditorHandle } from "../types";
1212
import type { EditorContent as EditorContentType } from "../utils/content";
13+
import { DiffStatsIndicator } from "./DiffStatsIndicator";
1314
import { EditorToolbar } from "./EditorToolbar";
1415
import { ModeIndicatorInput } from "./ModeIndicatorInput";
1516

@@ -206,11 +207,13 @@ export const MessageEditor = forwardRef<EditorHandle, MessageEditorProps>(
206207
</Flex>
207208
</Flex>
208209
{onModeChange && currentMode && (
209-
<ModeIndicatorInput
210-
mode={currentMode}
211-
onModeChange={onModeChange}
212-
taskId={taskId}
213-
/>
210+
<Flex align="center" gap="2">
211+
<ModeIndicatorInput
212+
mode={currentMode}
213+
onModeChange={onModeChange}
214+
/>
215+
<DiffStatsIndicator repoPath={repoPath} />
216+
</Flex>
214217
)}
215218
</Flex>
216219
);

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

Lines changed: 4 additions & 81 deletions
Original file line numberDiff line numberDiff line change
@@ -3,21 +3,11 @@ import {
33
getExecutionModes,
44
} from "@features/sessions/stores/sessionStore";
55
import { useSettingsStore } from "@features/settings/stores/settingsStore";
6-
import { useCwd } from "@features/sidebar/hooks/useCwd";
7-
import {
8-
Circle,
9-
LockOpen,
10-
Pause,
11-
Pencil,
12-
ShieldCheck,
13-
} from "@phosphor-icons/react";
6+
import { LockOpen, Pause, Pencil, ShieldCheck } from "@phosphor-icons/react";
147
import { Flex, Select, Text } from "@radix-ui/themes";
15-
import { trpcVanilla } from "@renderer/trpc";
16-
import { useQuery } from "@tanstack/react-query";
178

189
interface ModeIndicatorInputProps {
1910
mode: ExecutionMode;
20-
taskId?: string;
2111
onModeChange: (mode: ExecutionMode) => void;
2212
}
2313

@@ -54,27 +44,11 @@ const modeConfig: Record<
5444
export function ModeIndicatorInput({
5545
mode,
5646
onModeChange,
57-
taskId,
5847
}: ModeIndicatorInputProps) {
5948
const config = modeConfig[mode];
60-
const repoPath = useCwd(taskId ?? "");
6149
const { allowBypassPermissions } = useSettingsStore();
6250
const availableModes = getExecutionModes(allowBypassPermissions);
6351

64-
const { data: diffStats } = useQuery({
65-
queryKey: ["diff-stats", repoPath],
66-
queryFn: () =>
67-
trpcVanilla.git.getDiffStats.query({
68-
directoryPath: repoPath as string,
69-
}),
70-
enabled: !!repoPath && !!taskId,
71-
staleTime: 5000,
72-
refetchInterval: 5000,
73-
placeholderData: (prev) => prev,
74-
});
75-
76-
const hasDiffStats = diffStats && diffStats.filesChanged > 0;
77-
7852
return (
7953
<Select.Root value={mode} onValueChange={onModeChange} size="1">
8054
<Select.Trigger
@@ -103,79 +77,28 @@ export function ModeIndicatorInput({
10377
>
10478
(shift+tab to cycle)
10579
</Text>
106-
{hasDiffStats && (
107-
<Text
108-
size="1"
109-
style={{
110-
color: "var(--gray-9)",
111-
fontFamily: "monospace",
112-
display: "flex",
113-
alignItems: "center",
114-
gap: "6px",
115-
}}
116-
>
117-
<Circle size={4} weight="fill" style={{ margin: "0 4px" }} />
118-
<span style={{ color: "var(--gray-11)" }}>
119-
{diffStats.filesChanged}{" "}
120-
{diffStats.filesChanged === 1 ? "file" : "files"}
121-
</span>
122-
<span style={{ color: "var(--green-9)" }}>
123-
+{diffStats.linesAdded}
124-
</span>
125-
<span style={{ color: "var(--red-9)" }}>
126-
-{diffStats.linesRemoved}
127-
</span>
128-
</Text>
129-
)}
13080
</Flex>
13181
</Select.Trigger>
13282
<Select.Content>
13383
{availableModes.map((modeOption) => {
13484
const optionConfig = modeConfig[modeOption];
135-
const hoverBgClass =
136-
modeOption === "plan"
137-
? "hover:!bg-[var(--amber-11)]"
138-
: modeOption === "default"
139-
? "hover:!bg-[var(--gray-11)]"
140-
: modeOption === "acceptEdits"
141-
? "hover:!bg-[var(--green-11)]"
142-
: "hover:!bg-[var(--red-11)]";
14385
return (
144-
<Select.Item
145-
key={modeOption}
146-
value={modeOption}
147-
className={`group transition-colors ${hoverBgClass}`}
148-
>
86+
<Select.Item key={modeOption} value={modeOption}>
14987
<Flex
15088
align="center"
15189
gap="1"
152-
className="group-hover:!text-[black] [&_svg]:group-hover:!text-[black] [&_svg]:group-hover:!fill-[black] [&_svg_path]:group-hover:!fill-[black] [&_svg_path]:group-hover:!stroke-[black]"
15390
style={{
15491
color: optionConfig.colorVar,
15592
fontFamily: "monospace",
15693
}}
15794
>
158-
<span className="group-hover:[&_svg]:!text-[black] group-hover:[&_svg]:!fill-[black] group-hover:[&_svg_path]:!fill-[black] group-hover:[&_svg_path]:!stroke-[black]">
159-
{optionConfig.icon}
160-
</span>
161-
<Text size="1" className="group-hover:!text-[black]">
162-
{optionConfig.label}
163-
</Text>
95+
{optionConfig.icon}
96+
<Text size="1">{optionConfig.label}</Text>
16497
</Flex>
16598
</Select.Item>
16699
);
167100
})}
168101
</Select.Content>
169-
<style>{`
170-
.group:hover svg {
171-
color: black !important;
172-
fill: black !important;
173-
}
174-
.group:hover svg path {
175-
fill: black !important;
176-
stroke: black !important;
177-
}
178-
`}</style>
179102
</Select.Root>
180103
);
181104
}

‎apps/twig/src/renderer/features/settings/components/SettingsView.tsx‎

Lines changed: 1 addition & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -876,7 +876,7 @@ export function SettingsView() {
876876
<Flex align="center" gap="2">
877877
<Warning size={20} weight="fill" color="var(--red-9)" />
878878
<Text color="red" weight="bold">
879-
WARNING: Enable Bypass Permissions mode
879+
Enable Bypass Permissions mode
880880
</Text>
881881
</Flex>
882882
</AlertDialog.Title>
@@ -895,13 +895,6 @@ export function SettingsView() {
895895
By proceeding, you accept all responsibility for actions taken
896896
while running in Bypass Permissions mode.
897897
</Text>
898-
<Link
899-
href="https://docs.anthropic.com/en/docs/claude-code/security"
900-
target="_blank"
901-
size="2"
902-
>
903-
https://docs.anthropic.com/en/docs/claude-code/security
904-
</Link>
905898
</Flex>
906899
</AlertDialog.Description>
907900
<Flex gap="3" mt="4" justify="end">

0 commit comments

Comments
 (0)