Skip to content

Commit 3c32a64

Browse files
AdemfcanAdemfcan
committed
Migrate webview UI from Vibe to Codestory with key and layout updates
1 parent b99678f commit 3c32a64

File tree

6 files changed

+138
-43
lines changed

6 files changed

+138
-43
lines changed

‎webview-ui/src/App.tsx‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -58,8 +58,9 @@ function App() {
5858

5959
// Initialize API configuration from localStorage and extension SecretStorage
6060
useEffect(() => {
61-
const savedProvider = localStorage.getItem("vibe_selected_provider") || "";
62-
const savedModel = localStorage.getItem("vibe_selected_model") || "";
61+
const savedProvider =
62+
localStorage.getItem("Codestory_selected_provider") || "";
63+
const savedModel = localStorage.getItem("Codestory_selected_model") || "";
6364

6465
const handleMessage = (event: MessageEvent) => {
6566
const message = event.data;
@@ -219,7 +220,6 @@ function App() {
219220
) {
220221
setIsLoading(true);
221222
}
222-
223223
}
224224
break;
225225
case "displayDiff":

‎webview-ui/src/components/ApiKeyManager.tsx‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -53,9 +53,9 @@ import {
5353
} from "@/lib/constants";
5454

5555
const STORAGE_KEYS = {
56-
PROVIDER: "vibe_selected_provider",
57-
MODEL: "vibe_selected_model",
58-
GLOBAL_CONFIG: "vibe_global_config",
56+
PROVIDER: "Codestory_selected_provider",
57+
MODEL: "Codestory_selected_model",
58+
GLOBAL_CONFIG: "Codestory_global_config",
5959
};
6060

6161
export function ApiKeyManager({

‎webview-ui/src/components/DiffDialog.tsx‎

Lines changed: 75 additions & 30 deletions
Original file line numberDiff line numberDiff line change
@@ -32,6 +32,13 @@ import {
3232
} from "@/components/ui/tooltip";
3333
import { getVsCodeApi } from "@/lib/vscode";
3434

35+
const getCanonicalPath = (file: { newName?: string; oldName?: string }) => {
36+
if (file.newName === "/dev/null") {
37+
return file.oldName || "unknown";
38+
}
39+
return file.newName || file.oldName || "unknown";
40+
};
41+
3542
export function DiffDialog({
3643
open,
3744
onOpenChange,
@@ -87,7 +94,9 @@ export function DiffDialog({
8794
if (!rawDiff) return [];
8895
try {
8996
const files = parseDiff(rawDiff);
90-
return files.map(f => f.newName || f.oldName || "unknown").filter(f => f !== "unknown");
97+
return files
98+
.map((f) => getCanonicalPath(f))
99+
.filter((f) => f !== "unknown");
91100
} catch {
92101
return [];
93102
}
@@ -229,18 +238,35 @@ export function DiffDialog({
229238
const displayedFiles = allFiles.slice(0, visibleFiles);
230239

231240
return displayedFiles.map((file, fileIdx) => {
232-
const filePath = file.newName || file.oldName || "unknown";
241+
const filePath = getCanonicalPath(file);
233242
const isDeleted = file.newName === "/dev/null";
234243
const isNew = file.oldName === "/dev/null";
235-
const fileTypeLabel = isDeleted ? "deleted" : isNew ? "added" : "modified";
244+
const fileTypeLabel = isDeleted
245+
? "deleted"
246+
: isNew
247+
? "added"
248+
: "modified";
236249

237250
return (
238-
<div key={`${filePath}-${fileIdx}`} className="mb-6 border border-border rounded-md overflow-hidden bg-background shadow-sm">
251+
<div
252+
key={`${filePath}-${fileIdx}`}
253+
className="mb-6 border border-border rounded-md overflow-hidden bg-background shadow-sm"
254+
>
239255
<div className="bg-muted/50 px-3 py-1.5 border-b border-border flex items-center justify-between">
240-
<span className="font-mono text-[11px] truncate opacity-80">{filePath}</span>
241-
<span className={`text-[9px] font-bold uppercase px-2 py-0.5 rounded ${isNew ? "bg-emerald-500/20 text-emerald-400" :
242-
isDeleted ? "bg-rose-500/20 text-rose-400" : "bg-blue-500/10 text-blue-400"
243-
}`}>{fileTypeLabel}</span>
256+
<span className="font-mono text-[11px] truncate opacity-80">
257+
{filePath}
258+
</span>
259+
<span
260+
className={`text-[9px] font-bold uppercase px-2 py-0.5 rounded ${
261+
isNew
262+
? "bg-emerald-500/20 text-emerald-400"
263+
: isDeleted
264+
? "bg-rose-500/20 text-rose-400"
265+
: "bg-blue-500/10 text-blue-400"
266+
}`}
267+
>
268+
{fileTypeLabel}
269+
</span>
244270
</div>
245271
<div className="divide-y divide-border/30">
246272
{file.blocks.map((block, blockIdx) => (
@@ -249,12 +275,21 @@ export function DiffDialog({
249275
{block.header}
250276
</div>
251277
{block.lines.map((line, lineIdx) => {
252-
const highlitContent = DiffHighlighter.highlight(line.content);
253-
const typeClass = line.type === "insert" ? "bg-emerald-500/10 text-emerald-300/90" :
254-
line.type === "delete" ? "bg-rose-500/10 text-rose-300/90" : "hover:bg-muted/10";
278+
const highlitContent = DiffHighlighter.highlight(
279+
line.content,
280+
);
281+
const typeClass =
282+
line.type === "insert"
283+
? "bg-emerald-500/10 text-emerald-300/90"
284+
: line.type === "delete"
285+
? "bg-rose-500/10 text-rose-300/90"
286+
: "hover:bg-muted/10";
255287

256288
return (
257-
<div key={lineIdx} className={`flex font-mono text-[11px] leading-relaxed group border-b last:border-b-0 border-border/5 ${typeClass}`}>
289+
<div
290+
key={lineIdx}
291+
className={`flex font-mono text-[11px] leading-relaxed group border-b last:border-b-0 border-border/5 ${typeClass}`}
292+
>
258293
<div className="w-10 shrink-0 text-right px-2 py-0.5 text-muted-foreground/30 border-r border-border/20 select-none bg-muted/20 group-hover:bg-muted/30 transition-colors">
259294
{line.oldNumber || ""}
260295
</div>
@@ -290,7 +325,7 @@ export function DiffDialog({
290325
}
291326
}, [rawDiff, visibleFiles]);
292327

293-
const handleVibeCommand = (command: string, intent?: string) => {
328+
const handleCodestoryCommand = (command: string, intent?: string) => {
294329
const isCommit = command === "commit";
295330

296331
if (isCommit && parsedFiles.length > 0 && noFilesSelected) {
@@ -328,7 +363,9 @@ export function DiffDialog({
328363
};
329364

330365
const payload: any = {
331-
command: isCommit ? "runVibeCommandCommit" : "runVibeCommandFix",
366+
command: isCommit
367+
? "runCodestoryCommandCommit"
368+
: "runCodestoryCommandFix",
332369
repoPath,
333370
branch,
334371
globalArgs,
@@ -464,9 +501,13 @@ export function DiffDialog({
464501
<TooltipTrigger asChild>
465502
<HelpCircle className="h-3.5 w-3.5 text-muted-foreground cursor-help" />
466503
</TooltipTrigger>
467-
<TooltipContent side="bottom" className="max-w-[250px]">
468-
Optionally provide a guidance message to the LLM so it
469-
can better understand the "why" behind your changes
504+
<TooltipContent
505+
side="bottom"
506+
className="max-w-[250px]"
507+
>
508+
Optionally provide a guidance message to the LLM so
509+
it can better understand the "why" behind your
510+
changes
470511
</TooltipContent>
471512
</Tooltip>
472513
</TooltipProvider>
@@ -479,7 +520,7 @@ export function DiffDialog({
479520
variant="outline"
480521
size="sm"
481522
className="h-7 text-[11px] gap-1.5 border-border hover:bg-accent"
482-
onClick={() => handleVibeCommand("commit")}
523+
onClick={() => handleCodestoryCommand("commit")}
483524
disabled={
484525
isAnyExecuting ||
485526
(parsedFiles.length > 0 && noFilesSelected)
@@ -558,10 +599,11 @@ export function DiffDialog({
558599
className={`
559600
flex items-center gap-1 px-2 py-0.5 rounded text-[10px] font-mono whitespace-nowrap
560601
border transition-all cursor-pointer shrink-0
561-
${selectedFiles.has(file)
562-
? "bg-primary/10 border-primary/30 text-primary"
563-
: "bg-muted/30 border-border/50 text-muted-foreground hover:border-border"
564-
}
602+
${
603+
selectedFiles.has(file)
604+
? "bg-primary/10 border-primary/30 text-primary"
605+
: "bg-muted/30 border-border/50 text-muted-foreground hover:border-border"
606+
}
565607
`}
566608
>
567609
{selectedFiles.has(file) ? (
@@ -607,12 +649,13 @@ export function DiffDialog({
607649
variant="outline"
608650
size="sm"
609651
className="h-7 text-[11px] gap-1.5 border-border hover:bg-accent"
610-
onClick={() => handleVibeCommand("expand")}
652+
onClick={() => handleCodestoryCommand("expand")}
611653
disabled={isAnyExecuting}
612654
>
613655
<RotateCcw
614-
className={`h-3 w-3 ${isCurrentExecuting ? "animate-spin" : ""
615-
}`}
656+
className={`h-3 w-3 ${
657+
isCurrentExecuting ? "animate-spin" : ""
658+
}`}
616659
/>
617660
Fix
618661
</Button>
@@ -649,11 +692,13 @@ export function DiffDialog({
649692
className="py-12 flex flex-col items-center justify-center gap-3 opacity-60 hover:opacity-100 transition-opacity border-t border-border/30 mt-8"
650693
>
651694
<div className="animate-spin rounded-full h-4 w-4 border-b-2 border-primary"></div>
652-
<span className="text-[10px] uppercase tracking-widest font-bold">Loading more files...</span>
695+
<span className="text-[10px] uppercase tracking-widest font-bold">
696+
Loading more files...
697+
</span>
653698
<Button
654699
variant="outline"
655700
size="sm"
656-
onClick={() => setVisibleFiles(prev => prev + 10)}
701+
onClick={() => setVisibleFiles((prev) => prev + 10)}
657702
className="h-7 text-[10px] mt-2"
658703
>
659704
Show More
@@ -684,7 +729,7 @@ export function DiffDialog({
684729
onChange={(e) => setIntentMessage(e.target.value)}
685730
onKeyDown={(e) => {
686731
if (e.key === "Enter" && intentMessage.trim()) {
687-
handleVibeCommand("commit", intentMessage);
732+
handleCodestoryCommand("commit", intentMessage);
688733
}
689734
}}
690735
/>
@@ -697,10 +742,10 @@ export function DiffDialog({
697742
Cancel
698743
</Button>
699744
<Button
700-
onClick={() => handleVibeCommand("commit", intentMessage)}
745+
onClick={() => handleCodestoryCommand("commit", intentMessage)}
701746
disabled={!intentMessage.trim()}
702747
>
703-
Run Vibe
748+
Run Commit
704749
</Button>
705750
</div>
706751
</DialogContent>

‎webview-ui/src/components/GitVisualizer.tsx‎

Lines changed: 10 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -175,15 +175,16 @@ export function GitVisualizer({
175175
author: "system",
176176
date: "",
177177
parents: [],
178-
kind: "load_more"
178+
kind: "load_more",
179179
} as any);
180180
// Make it a parent of the oldest commit in the current batch
181-
oldestCommit.parents = [...(oldestCommit.parents || []), "LOAD_MORE"];
181+
oldestCommit.parents = [
182+
...(oldestCommit.parents || []),
183+
"LOAD_MORE",
184+
];
182185
}
183186
}
184187

185-
186-
187188
setCommits(processed);
188189
lastReloadSourceRef.current = message.source || "manual";
189190
setLoading(false);
@@ -567,7 +568,11 @@ export function GitVisualizer({
567568
const onLayoutStop = () => {
568569
// If we are loading more, center on the anchor node instead of fitting everything
569570
try {
570-
if (lastReloadSourceRef.current === "load_more" && anchorNodeIdRef.current && cyInstance) {
571+
if (
572+
lastReloadSourceRef.current === "load_more" &&
573+
anchorNodeIdRef.current &&
574+
cyInstance
575+
) {
571576
const node = cyInstance.getElementById(anchorNodeIdRef.current);
572577
if (node.nonempty()) {
573578
cyInstance.center(node);

‎webview-ui/src/components/search-bar.tsx‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -82,11 +82,11 @@ export function SearchBar({
8282
))}
8383
{commits.length > 50 && (
8484
<div className="px-2 py-3 text-[10px] text-center text-muted-foreground border-t border-border/50 italic">
85-
Showing first 50 results. Use more specific keywords to filter...
85+
Showing first 50 results. Use more specific keywords to
86+
filter...
8687
</div>
8788
)}
8889
</CommandGroup>
89-
9090
</CommandList>
9191
</div>
9292
)}

‎webview-ui/src/index.css‎

Lines changed: 45 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -166,3 +166,48 @@
166166
rgba(255, 255, 255, 0.3)
167167
);
168168
}
169+
170+
/* Syntax Highlighting */
171+
.font-syntax {
172+
font-family: var(--font-mono);
173+
}
174+
175+
.c {
176+
color: #6a737d;
177+
font-style: italic;
178+
} /* comment */
179+
.s {
180+
color: #032f62;
181+
} /* string */
182+
.k {
183+
color: #d73a49;
184+
font-weight: 500;
185+
} /* keyword */
186+
.n {
187+
color: #005cc5;
188+
} /* number */
189+
.o {
190+
color: #d73a49;
191+
} /* operator */
192+
.f {
193+
color: #6f42c1;
194+
} /* function call */
195+
196+
.dark .c {
197+
color: #8b949e;
198+
}
199+
.dark .s {
200+
color: #a5d6ff;
201+
}
202+
.dark .k {
203+
color: #ff7b72;
204+
}
205+
.dark .n {
206+
color: #79c0ff;
207+
}
208+
.dark .o {
209+
color: #ff7b72;
210+
}
211+
.dark .f {
212+
color: #d2a8ff;
213+
}

0 commit comments

Comments
 (0)