1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
|
import React from "react";
import type { Phase, PermissionMode, TokenUsage } from "../types";
interface ActionBarProps {
phase: Phase;
hasChanges: boolean;
isLoading: boolean;
tokenUsage: TokenUsage;
permissionMode: PermissionMode;
onReview: () => void;
onSubmit: () => void;
onPermissionModeChange: (mode: PermissionMode) => void;
disabled: boolean;
}
export function ActionBar({
phase,
hasChanges,
isLoading,
tokenUsage,
permissionMode,
onReview,
onSubmit,
onPermissionModeChange,
disabled,
}: ActionBarProps) {
const totalTokens = tokenUsage.inputTokens + tokenUsage.outputTokens;
const maxTokens = 200000;
const usagePercent = Math.min((totalTokens / maxTokens) * 100, 100);
const getBarColor = () => {
if (usagePercent > 80) return "#ef4444";
if (usagePercent > 50) return "#f59e0b";
return "#10b981";
};
return (
<div className="action-bar">
<div className="action-bar-left">
<div className="token-indicator">
<div className="token-bar">
<div
className="token-fill"
style={{
width: `${usagePercent}%`,
backgroundColor: getBarColor(),
}}
/>
</div>
<span className="token-label">
{(totalTokens / 1000).toFixed(1)}k / 200k
</span>
</div>
{phase === "implement" && (
<label className="permission-toggle">
<input
type="checkbox"
checked={permissionMode === "bypassPermissions"}
onChange={(e) =>
onPermissionModeChange(
e.target.checked ? "bypassPermissions" : "acceptEdits"
)
}
disabled={disabled}
/>
Bypass Permissions
</label>
)}
</div>
<div className="action-bar-right">
{phase !== "implement" && (
<>
<button
onClick={onReview}
disabled={disabled || isLoading || !hasChanges}
className="btn-secondary"
>
Review
</button>
<button
onClick={onSubmit}
disabled={disabled || isLoading}
className="btn-primary"
>
Submit →
</button>
</>
)}
{phase === "implement" && isLoading && (
<span className="implementing-status">Implementing...</span>
)}
</div>
</div>
);
}
|
