Skip to content

🤖 refactor: align tailwind dark theme utilities #628

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 1 commit into from
Nov 16, 2025
Merged

🤖 refactor: align tailwind dark theme utilities #628

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
25 changes: 2 additions & 23 deletions src/browser/components/AIView.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -416,14 +416,7 @@ const AIViewInner: React.FC<AIViewProps> = ({
/>
</div>
{isAtCutoff && (
<div
className="text-edit-mode bg-edit-mode/10 my-5 px-[15px] py-3 text-center text-xs font-medium"
style={{
borderBottom: "3px solid",
borderImage:
"repeating-linear-gradient(45deg, var(--color-editing-mode), var(--color-editing-mode) 10px, transparent 10px, transparent 20px) 1",
}}
>
<div className="edit-cutoff-divider text-edit-mode bg-edit-mode/10 my-5 px-[15px] py-3 text-center text-xs font-medium">
⚠️ Messages below this line will be removed when you submit the edit
</div>
)}
Expand Down Expand Up @@ -470,21 +463,7 @@ const AIViewInner: React.FC<AIViewProps> = ({
<button
onClick={jumpToBottom}
type="button"
className="font-primary absolute bottom-2 left-1/2 z-[100] -translate-x-1/2 cursor-pointer rounded-[20px] border px-2 py-1 text-xs font-medium text-white shadow-[0_4px_12px_rgba(0,0,0,0.3)] backdrop-blur-[1px] transition-all duration-200 hover:scale-105 active:scale-95"
style={{
background: "hsl(from var(--color-assistant-border) h s l / 0.1)",
borderColor: "hsl(from var(--color-assistant-border) h s l / 0.4)",
}}
onMouseEnter={(e) => {
const target = e.currentTarget;
target.style.background = "hsl(from var(--color-assistant-border) h s l / 0.4)";
target.style.borderColor = "hsl(from var(--color-assistant-border) h s l / 0.6)";
}}
onMouseLeave={(e) => {
const target = e.currentTarget;
target.style.background = "hsl(from var(--color-assistant-border) h s l / 0.1)";
target.style.borderColor = "hsl(from var(--color-assistant-border) h s l / 0.4)";
}}
className="assistant-chip font-primary text-foreground hover:assistant-chip-hover absolute bottom-2 left-1/2 z-[100] -translate-x-1/2 cursor-pointer rounded-[20px] px-2 py-1 text-xs font-medium shadow-[0_4px_12px_rgba(0,0,0,0.3)] backdrop-blur-[1px] transition-all duration-200 hover:scale-105 active:scale-95"
>
Press {formatKeybind(KEYBINDS.JUMP_TO_BOTTOM)} to jump to bottom
</button>
Expand Down
19 changes: 2 additions & 17 deletions src/browser/components/Messages/MarkdownComponents.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -149,29 +149,14 @@ export const markdownComponents = {
details: ({ children, open }: DetailsProps) => (
<details
open={open}
style={{
margin: "0.5em 0",
padding: "0.25em 0.5em",
border: "1px solid rgba(255, 255, 255, 0.1)",
borderRadius: "4px",
background: "var(--color-code-bg)",
}}
className="bg-code-bg my-2 rounded border border-white/10 px-2 py-1 text-sm"
>
{children}
</details>
),

summary: ({ children }: SummaryProps) => (
<summary
style={{
cursor: "pointer",
fontWeight: 600,
padding: "0.25em 0",
userSelect: "none",
}}
>
<span style={{ marginLeft: "0.35em" }}>{children}</span>
</summary>
<summary className="cursor-pointer py-1 pl-1 font-semibold select-none">{children}</summary>
),

// Custom code block renderer with async Shiki highlighting
Expand Down
21 changes: 6 additions & 15 deletions src/browser/components/RightSidebar/ConsumerBreakdown.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -60,27 +60,18 @@ const ConsumerBreakdownComponent: React.FC<ConsumerBreakdownProps> = ({ consumer
{consumer.fixedTokens && consumer.variableTokens ? (
<>
<div
className="h-full transition-[width] duration-300"
style={{
width: `${fixedPercentage}%`,
background: "var(--color-token-fixed)",
}}
className="bg-token-fixed h-full transition-[width] duration-300"
style={{ width: `${fixedPercentage}%` }}
/>
<div
className="h-full transition-[width] duration-300"
style={{
width: `${variablePercentage}%`,
background: "var(--color-token-variable)",
}}
className="bg-token-variable h-full transition-[width] duration-300"
style={{ width: `${variablePercentage}%` }}
/>
</>
) : (
<div
className="h-full transition-[width] duration-300"
style={{
width: `${consumer.percentage}%`,
background: "linear-gradient(90deg, #4a9eff 0%, #6b5ce7 100%)",
}}
className="h-full bg-[linear-gradient(90deg,var(--color-token-input)_0%,var(--color-token-output)_100%)] transition-[width] duration-300"
style={{ width: `${consumer.percentage}%` }}
/>
)}
</div>
Expand Down
18 changes: 9 additions & 9 deletions src/browser/components/tools/BashToolCall.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -13,6 +13,7 @@ import {
LoadingDots,
} from "./shared/ToolPrimitives";
import { useToolExpansion, getStatusDisplay, type ToolStatus } from "./shared/toolUtils";
import { cn } from "@/common/lib/utils";
import { TooltipWrapper, Tooltip } from "../Tooltip";

interface BashToolCallProps {
Expand Down Expand Up @@ -69,22 +70,21 @@ export const BashToolCall: React.FC<BashToolCallProps> = ({
</TooltipWrapper>
<span className="text-text font-monospace max-w-96 truncate">{args.script}</span>
<span
className="ml-2 text-[10px] whitespace-nowrap [@container(max-width:500px)]:hidden"
style={{
color: isPending ? "var(--color-pending)" : "var(--color-text-secondary)",
}}
className={cn(
"ml-2 text-[10px] whitespace-nowrap [@container(max-width:500px)]:hidden",
isPending ? "text-pending" : "text-text-secondary"
)}
>
timeout: {args.timeout_secs ?? BASH_DEFAULT_TIMEOUT_SECS}s
{result && ` • took ${formatDuration(result.wall_duration_ms)}`}
{!result && isPending && elapsedTime > 0 && ` • ${formatDuration(elapsedTime)}`}
</span>
{result && (
<span
className="ml-2 inline-block shrink-0 rounded px-1.5 py-0.5 text-[10px] font-medium whitespace-nowrap"
style={{
background: result.exitCode === 0 ? "#4caf50" : "#f44336",
color: "white",
}}
className={cn(
"ml-2 inline-block shrink-0 rounded px-1.5 py-0.5 text-[10px] font-medium whitespace-nowrap",
result.exitCode === 0 ? "bg-success text-on-success" : "bg-danger text-on-danger"
)}
>
{result.exitCode}
</span>
Expand Down
104 changes: 20 additions & 84 deletions src/browser/components/tools/ProposePlanToolCall.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -51,6 +51,8 @@ export const ProposePlanToolCall: React.FC<ProposePlanToolCallProps> = ({

const [isHovered, setIsHovered] = useState(false);

const controlButtonClasses =
"px-2 py-1 text-[10px] font-mono rounded-sm cursor-pointer transition-all duration-150 active:translate-y-px";
const statusDisplay = getStatusDisplay(status);

return (
Expand All @@ -63,21 +65,8 @@ export const ProposePlanToolCall: React.FC<ProposePlanToolCallProps> = ({

{expanded && (
<ToolDetails>
<div
className="rounded-md p-3 shadow-md"
style={{
background:
"linear-gradient(135deg, color-mix(in srgb, var(--color-plan-mode), transparent 92%) 0%, color-mix(in srgb, var(--color-plan-mode), transparent 95%) 100%)",
border: "1px solid color-mix(in srgb, var(--color-plan-mode), transparent 70%)",
}}
>
<div
className="mb-3 flex items-center gap-2 pb-2"
style={{
borderBottom:
"1px solid color-mix(in srgb, var(--color-plan-mode), transparent 80%)",
}}
>
<div className="plan-surface rounded-md p-3 shadow-md">
<div className="plan-divider mb-3 flex items-center gap-2 border-b pb-2">
<div className="flex flex-1 items-center gap-2">
<div className="text-base">📋</div>
<div className="text-plan-mode font-mono text-[13px] font-semibold">
Expand All @@ -91,34 +80,18 @@ export const ProposePlanToolCall: React.FC<ProposePlanToolCallProps> = ({
onClick={openModal}
disabled={startHereDisabled}
className={cn(
"px-2 py-1 text-[10px] font-mono rounded-sm cursor-pointer transition-all duration-150",
"active:translate-y-px",
startHereDisabled ? "opacity-50 cursor-not-allowed" : "hover:text-plan-mode"
controlButtonClasses,
"plan-chip",
startHereDisabled
? "cursor-not-allowed opacity-50"
: "hover:plan-chip-hover active:plan-chip-active"
)}
style={{
color: "var(--color-plan-mode)",
background: "color-mix(in srgb, var(--color-plan-mode), transparent 90%)",
border:
"1px solid color-mix(in srgb, var(--color-plan-mode), transparent 70%)",
}}
onMouseEnter={(e) => {
onMouseEnter={() => {
if (!startHereDisabled) {
setIsHovered(true);
(e.currentTarget as HTMLButtonElement).style.background =
"color-mix(in srgb, var(--color-plan-mode), transparent 85%)";
(e.currentTarget as HTMLButtonElement).style.borderColor =
"color-mix(in srgb, var(--color-plan-mode), transparent 60%)";
}
}}
onMouseLeave={(e) => {
setIsHovered(false);
if (!startHereDisabled) {
(e.currentTarget as HTMLButtonElement).style.background =
"color-mix(in srgb, var(--color-plan-mode), transparent 90%)";
(e.currentTarget as HTMLButtonElement).style.borderColor =
"color-mix(in srgb, var(--color-plan-mode), transparent 70%)";
}
}}
onMouseLeave={() => setIsHovered(false)}
>
{isHovered && <span className="mr-1">{buttonEmoji}</span>}
{buttonLabel}
Expand All @@ -128,52 +101,21 @@ export const ProposePlanToolCall: React.FC<ProposePlanToolCallProps> = ({
)}
<button
onClick={() => void copyToClipboard(args.plan)}
className="text-muted hover:text-plan-mode cursor-pointer rounded-sm bg-transparent px-2 py-1 font-mono text-[10px] transition-all duration-150 active:translate-y-px"
style={{
border: "1px solid rgba(136, 136, 136, 0.3)",
}}
onMouseEnter={(e) => {
(e.currentTarget as HTMLButtonElement).style.background =
"color-mix(in srgb, var(--color-plan-mode), transparent 85%)";
(e.currentTarget as HTMLButtonElement).style.borderColor =
"color-mix(in srgb, var(--color-plan-mode), transparent 60%)";
}}
onMouseLeave={(e) => {
(e.currentTarget as HTMLButtonElement).style.background = "transparent";
(e.currentTarget as HTMLButtonElement).style.borderColor =
"rgba(136, 136, 136, 0.3)";
}}
className={cn(
controlButtonClasses,
"plan-chip-ghost hover:plan-chip-ghost-hover"
)}
>
{copied ? "✓ Copied" : "Copy"}
</button>
<button
onClick={() => setShowRaw(!showRaw)}
className={cn(
"px-2 py-1 text-[10px] font-mono rounded-sm cursor-pointer transition-all duration-150 active:translate-y-px hover:text-plan-mode"
controlButtonClasses,
showRaw
? "plan-chip hover:plan-chip-hover active:plan-chip-active"
: "plan-chip-ghost text-muted hover:plan-chip-ghost-hover"
)}
style={{
color: showRaw ? "var(--color-plan-mode)" : "#888",
background: showRaw
? "color-mix(in srgb, var(--color-plan-mode), transparent 90%)"
: "transparent",
border: showRaw
? "1px solid color-mix(in srgb, var(--color-plan-mode), transparent 70%)"
: "1px solid rgba(136, 136, 136, 0.3)",
}}
onMouseEnter={(e) => {
(e.currentTarget as HTMLButtonElement).style.background =
"color-mix(in srgb, var(--color-plan-mode), transparent 85%)";
(e.currentTarget as HTMLButtonElement).style.borderColor =
"color-mix(in srgb, var(--color-plan-mode), transparent 60%)";
}}
onMouseLeave={(e) => {
(e.currentTarget as HTMLButtonElement).style.background = showRaw
? "color-mix(in srgb, var(--color-plan-mode), transparent 90%)"
: "transparent";
(e.currentTarget as HTMLButtonElement).style.borderColor = showRaw
? "color-mix(in srgb, var(--color-plan-mode), transparent 70%)"
: "rgba(136, 136, 136, 0.3)";
}}
>
{showRaw ? "Show Markdown" : "Show Text"}
</button>
Expand All @@ -191,13 +133,7 @@ export const ProposePlanToolCall: React.FC<ProposePlanToolCallProps> = ({
)}

{status === "completed" && (
<div
className="text-muted mt-3 pt-3 text-[11px] leading-normal italic"
style={{
borderTop:
"1px solid color-mix(in srgb, var(--color-plan-mode), transparent 80%)",
}}
>
<div className="plan-divider text-muted mt-3 border-t pt-3 text-[11px] leading-normal italic">
Respond with revisions or switch to Exec mode (
<span className="font-primary not-italic">
{formatKeybind(KEYBINDS.TOGGLE_MODE)}
Expand Down
Loading