diff --git a/CLAUDE.md b/CLAUDE.md index 9ded672a1..791972bd3 100644 --- a/CLAUDE.md +++ b/CLAUDE.md @@ -174,7 +174,46 @@ export function TaskDetail({ task: initialTask }: TaskDetailProps) { ### Tailwind over inline styles -Always write Tailwind classes for styling wherever possible. +Always reach for Tailwind utility classes first. The codebase uses Tailwind v4 +with CSS variables from Radix Themes (e.g. `--gray-12`, `--space-3`, +`--radius-2`); use Tailwind v4's CSS-var shorthand to bridge them — `text-(--gray-12)`, +`bg-(--gray-2)`, `rounded-(--radius-2)`, `border-(--gray-5)`. Use arbitrary values +(`text-[13px]`, `pl-[18px]`) when the design token doesn't have a named match. + +Inline `style={{}}` is acceptable in three cases only: + +1. **Genuinely dynamic values** computed at runtime that can't be a class — + e.g. `style={{ width: `${pxFromHook}px` }}`, `style={{ transform: `translateY(${y}px)` }}`, + pixel positions from measurement, data-driven colors that don't fit a fixed palette. +2. **Library configuration** passed to non-React libraries (CodeMirror's + `EditorView.theme(...)`, xterm.js options, etc.). +3. **CSS variables set from JS** that downstream classes consume — + `style={{ "--row-color": item.color }}` paired with `className="bg-(--row-color)"`. + +Do NOT use inline `style` for: + +- Color tokens (use `text-(--gray-12)`, `bg-(--gray-2)`, `border-(--gray-5)`) +- Spacing (use `p-3`, `mt-2`, `pl-4`, `gap-2`) — Radix `--space-N` matches Tailwind's + spacing scale 1:1 for `--space-1`..`--space-4`; `--space-5` = `6`, `--space-6` = `8`, etc. +- Layout primitives (`shrink-0`, `min-w-0`, `flex-1`, `overflow-y-auto`, `w-full`, `h-full`) +- Borders (`border border-(--gray-5)`), radii (`rounded-(--radius-2)` or `rounded-full`) +- Cursors (`cursor-pointer`, `cursor-col-resize`) +- Opacity (`opacity-50`), text-align, text-transform (`uppercase`), white-space, word-break +- Position (`absolute`, `relative`, `fixed`), z-index (`z-10`, `z-[201]`), inset (`inset-0`) +- Animations that map to a Tailwind utility (`animate-spin`) +- Conditional values that can be `className={cond ? "x" : "y"}` or + `className={\`base-classes ${cond ? "active-classes" : "inactive-classes"}\`}` + +Default line-heights have been tightened (`text-sm` ships with etc.) +in [apps/code/src/renderer/styles/globals.css](./apps/code/src/renderer/styles/globals.css). +Don't add a `leading-*` class for body text unless you specifically want a non-default +line-height. For arbitrary sizes (`text-[13px]`), pair with `leading-snug` for body +text or `leading-tight` for titles. + +When writing a custom React component that wraps a styled element, accept BOTH +`className?: string` and `style?: React.CSSProperties` props and merge the +`className` into the inner element's classes (e.g. ``className={`base-classes ${className ?? ""}`}``). +This lets call sites override styling via Tailwind without forcing inline `style`. ### Store / Service Boundary diff --git a/apps/code/assets/fonts/OpenRunde/OpenRunde-Bold.woff b/apps/code/assets/fonts/OpenRunde/OpenRunde-Bold.woff new file mode 100644 index 000000000..c51aa22da Binary files /dev/null and b/apps/code/assets/fonts/OpenRunde/OpenRunde-Bold.woff differ diff --git a/apps/code/assets/fonts/OpenRunde/OpenRunde-Bold.woff2 b/apps/code/assets/fonts/OpenRunde/OpenRunde-Bold.woff2 new file mode 100644 index 000000000..dbdabb24d Binary files /dev/null and b/apps/code/assets/fonts/OpenRunde/OpenRunde-Bold.woff2 differ diff --git a/apps/code/assets/fonts/OpenRunde/OpenRunde-Medium.woff b/apps/code/assets/fonts/OpenRunde/OpenRunde-Medium.woff new file mode 100644 index 000000000..12b0047cb Binary files /dev/null and b/apps/code/assets/fonts/OpenRunde/OpenRunde-Medium.woff differ diff --git a/apps/code/assets/fonts/OpenRunde/OpenRunde-Medium.woff2 b/apps/code/assets/fonts/OpenRunde/OpenRunde-Medium.woff2 new file mode 100644 index 000000000..99de77a6a Binary files /dev/null and b/apps/code/assets/fonts/OpenRunde/OpenRunde-Medium.woff2 differ diff --git a/apps/code/assets/fonts/OpenRunde/OpenRunde-Regular.woff b/apps/code/assets/fonts/OpenRunde/OpenRunde-Regular.woff new file mode 100644 index 000000000..e716b90ad Binary files /dev/null and b/apps/code/assets/fonts/OpenRunde/OpenRunde-Regular.woff differ diff --git a/apps/code/assets/fonts/OpenRunde/OpenRunde-Regular.woff2 b/apps/code/assets/fonts/OpenRunde/OpenRunde-Regular.woff2 new file mode 100644 index 000000000..30447d054 Binary files /dev/null and b/apps/code/assets/fonts/OpenRunde/OpenRunde-Regular.woff2 differ diff --git a/apps/code/assets/fonts/OpenRunde/OpenRunde-Semibold.woff b/apps/code/assets/fonts/OpenRunde/OpenRunde-Semibold.woff new file mode 100644 index 000000000..cdba39705 Binary files /dev/null and b/apps/code/assets/fonts/OpenRunde/OpenRunde-Semibold.woff differ diff --git a/apps/code/assets/fonts/OpenRunde/OpenRunde-Semibold.woff2 b/apps/code/assets/fonts/OpenRunde/OpenRunde-Semibold.woff2 new file mode 100644 index 000000000..ca05cba5c Binary files /dev/null and b/apps/code/assets/fonts/OpenRunde/OpenRunde-Semibold.woff2 differ diff --git a/apps/code/src/main/menu.ts b/apps/code/src/main/menu.ts index ba6418676..3474ba553 100644 --- a/apps/code/src/main/menu.ts +++ b/apps/code/src/main/menu.ts @@ -70,6 +70,14 @@ function buildAppMenu(): MenuItemConstructorOptions { }, }, { type: "separator" }, + { + label: "Settings...", + accelerator: "CmdOrCtrl+,", + click: () => { + container.get(MAIN_TOKENS.UIService).openSettings(); + }, + }, + { type: "separator" }, ...(!isDevBuild() ? [ { @@ -80,21 +88,13 @@ function buildAppMenu(): MenuItemConstructorOptions { .triggerMenuCheck(); }, }, + { type: "separator" as const }, ] : []), - { type: "separator" }, { role: "hide" as const }, { role: "hideOthers" as const }, { role: "unhide" as const }, { type: "separator" as const }, - { - label: "Settings...", - accelerator: "CmdOrCtrl+,", - click: () => { - container.get(MAIN_TOKENS.UIService).openSettings(); - }, - }, - { type: "separator" as const }, { role: "quit" as const }, ], }; diff --git a/apps/code/src/renderer/components/CodeBlock.tsx b/apps/code/src/renderer/components/CodeBlock.tsx index 81ceb0dff..e0722c1cc 100644 --- a/apps/code/src/renderer/components/CodeBlock.tsx +++ b/apps/code/src/renderer/components/CodeBlock.tsx @@ -10,26 +10,11 @@ interface CodeBlockProps { size?: CodeBlockSize; } -const sizeStyles: Record< - CodeBlockSize, - { fontSize: string; lineHeight: string } -> = { - "1": { - fontSize: "var(--font-size-1)", - lineHeight: "var(--line-height-1)", - }, - "1.5": { - fontSize: "var(--font-size-1-5)", - lineHeight: "var(--line-height-1-5)", - }, - "2": { - fontSize: "var(--font-size-2)", - lineHeight: "var(--line-height-2)", - }, - "3": { - fontSize: "var(--font-size-3)", - lineHeight: "var(--line-height-3)", - }, +const SIZE_TO_CLASS: Record = { + "1": "text-[13px]", + "1.5": "text-[13.5px]", + "2": "text-sm", + "3": "text-base", }; function extractText(children: ReactNode): string { @@ -46,7 +31,7 @@ function extractText(children: ReactNode): string { } export function CodeBlock({ children, size = "1" }: CodeBlockProps) { - const styles = sizeStyles[size]; + const sizeClass = SIZE_TO_CLASS[size]; const [copied, setCopied] = useState(false); const handleCopy = useCallback(() => { @@ -57,23 +42,9 @@ export function CodeBlock({ children, size = "1" }: CodeBlockProps) { }, [children]); return ( -
+ 
         {children}
@@ -83,14 +54,9 @@ export function CodeBlock({ children, size = "1" }: CodeBlockProps) { color="gray" onClick={handleCopy} style={{ - position: "absolute", - top: "var(--space-1)", - right: "var(--space-1)", - opacity: 0, transition: "opacity 0.15s", - cursor: "pointer", }} - className="group-hover:!opacity-100 [&]:hover:!opacity-100" + className="group-hover:!opacity-100 [&]:hover:!opacity-100 absolute top-1 right-1 cursor-pointer opacity-0" aria-label="Copy code" > {copied ? : } diff --git a/apps/code/src/renderer/components/ConnectivityPrompt.tsx b/apps/code/src/renderer/components/ConnectivityPrompt.tsx index 61a01ecd8..3150873a5 100644 --- a/apps/code/src/renderer/components/ConnectivityPrompt.tsx +++ b/apps/code/src/renderer/components/ConnectivityPrompt.tsx @@ -27,7 +27,7 @@ export function ConnectivityPrompt({ No internet connection - + PostHog Code requires an internet connection to use AI features. Check your connection and try again. diff --git a/apps/code/src/renderer/components/Divider.tsx b/apps/code/src/renderer/components/Divider.tsx index 9bdd0ab04..001ecbd7b 100644 --- a/apps/code/src/renderer/components/Divider.tsx +++ b/apps/code/src/renderer/components/Divider.tsx @@ -4,23 +4,16 @@ interface DividerProps { size?: DividerSize; } -const sizeStyles: Record = { - "1": { marginY: "var(--space-2)" }, - "2": { marginY: "var(--space-3)" }, - "3": { marginY: "var(--space-4)" }, +const SIZE_TO_MARGIN: Record = { + "1": "my-2", + "2": "my-3", + "3": "my-4", }; export function Divider({ size = "2" }: DividerProps) { - const styles = sizeStyles[size]; - return (
); } diff --git a/apps/code/src/renderer/components/DotPatternBackground.tsx b/apps/code/src/renderer/components/DotPatternBackground.tsx index 5c8ae0433..2a68241ad 100644 --- a/apps/code/src/renderer/components/DotPatternBackground.tsx +++ b/apps/code/src/renderer/components/DotPatternBackground.tsx @@ -3,27 +3,25 @@ import { useId } from "react"; const DOT_FILL = "var(--gray-6)"; interface DotPatternBackgroundProps { + className?: string; style?: React.CSSProperties; } -export function DotPatternBackground({ style }: DotPatternBackgroundProps) { +export function DotPatternBackground({ + className, + style, +}: DotPatternBackgroundProps) { const patternId = useId(); return (
+
PostHog {children} {footerLeft ?? ( - + @@ -113,7 +92,7 @@ function ShortcutsHeader() { return ( - + Keyboard Combos @@ -122,7 +101,7 @@ function ShortcutsHeader() { ))} - + Your cheat codes for shipping faster @@ -160,34 +139,19 @@ export function KeyboardShortcutsList() { return ( - + {CATEGORY_LABELS[category]} - - {uniqueShortcuts.map((shortcut, index) => ( + + {uniqueShortcuts.map((shortcut) => ( - {shortcut.description} + {shortcut.description} - + or diff --git a/apps/code/src/renderer/components/List.tsx b/apps/code/src/renderer/components/List.tsx index 396a3084a..20a618da6 100644 --- a/apps/code/src/renderer/components/List.tsx +++ b/apps/code/src/renderer/components/List.tsx @@ -13,46 +13,34 @@ interface ListItemProps { size?: ListSize; } -const sizeStyles: Record< - ListSize, - { fontSize: string; lineHeight: string; spacing: string } -> = { - "1": { - fontSize: "var(--font-size-1)", - lineHeight: "var(--line-height-1)", - spacing: "var(--space-1)", - }, - "1.5": { - fontSize: "var(--font-size-1-5)", - lineHeight: "var(--line-height-1-5)", - spacing: "var(--space-1)", - }, - "2": { - fontSize: "var(--font-size-2)", - lineHeight: "var(--line-height-2)", - spacing: "var(--space-1)", - }, - "3": { - fontSize: "var(--font-size-3)", - lineHeight: "var(--line-height-3)", - spacing: "var(--space-2)", - }, -}; +const sizeStyles: Record = + { + "1": { + className: "text-[13px]", + itemSpacing: "mb-1", + }, + "1.5": { + className: "text-[13.5px]", + itemSpacing: "mb-1", + }, + "2": { + className: "text-sm", + itemSpacing: "mb-1", + }, + "3": { + className: "text-base", + itemSpacing: "mb-2", + }, + }; export function List({ children, as = "ul" }: ListProps) { const Component = as; return ( {children} @@ -64,12 +52,7 @@ export function ListItem({ children, size = "2" }: ListItemProps) { return (
  • {children}
    • diff --git a/apps/code/src/renderer/components/LoginTransition.tsx b/apps/code/src/renderer/components/LoginTransition.tsx index 19414c7f6..3dc17478e 100644 --- a/apps/code/src/renderer/components/LoginTransition.tsx +++ b/apps/code/src/renderer/components/LoginTransition.tsx @@ -16,15 +16,13 @@ export function LoginTransition({ return ( ); } diff --git a/apps/code/src/renderer/components/ResizableSidebar.tsx b/apps/code/src/renderer/components/ResizableSidebar.tsx index 2c01de5e2..276124025 100644 --- a/apps/code/src/renderer/components/ResizableSidebar.tsx +++ b/apps/code/src/renderer/components/ResizableSidebar.tsx @@ -68,38 +68,28 @@ export const ResizableSidebar: React.FC = ({ width: open ? `${width}px` : "0", minWidth: open ? `${width}px` : "0", maxWidth: open ? `${width}px` : "0", - height: "100%", - overflow: "hidden", transition: isResizing ? "none" : "width 0.2s ease-in-out", borderLeft: !isLeft && open ? "1px solid var(--gray-6)" : "none", borderRight: isLeft && open ? "1px solid var(--gray-6)" : "none", - position: "relative", - flexShrink: 0, }} + className="relative h-full shrink-0 overflow-hidden" > {children} {open && ( diff --git a/apps/code/src/renderer/components/ScopeReauthPrompt.tsx b/apps/code/src/renderer/components/ScopeReauthPrompt.tsx index 0bbedcfed..0a326a044 100644 --- a/apps/code/src/renderer/components/ScopeReauthPrompt.tsx +++ b/apps/code/src/renderer/components/ScopeReauthPrompt.tsx @@ -43,7 +43,7 @@ export function ScopeReauthPrompt() {     - + PostHog Code has been updated with new features that require additional permissions. Please sign in again to continue. diff --git a/apps/code/src/renderer/components/SpaceSwitcher.tsx b/apps/code/src/renderer/components/SpaceSwitcher.tsx index 314d2ed03..5830f31f6 100644 --- a/apps/code/src/renderer/components/SpaceSwitcher.tsx +++ b/apps/code/src/renderer/components/SpaceSwitcher.tsx @@ -144,7 +144,7 @@ const SpaceItem = memo(function SpaceItem({ {/* Text content */} @@ -152,7 +152,7 @@ const SpaceItem = memo(function SpaceItem({ {statusText && ( @@ -197,7 +197,7 @@ const NewTaskItem = memo(function NewTaskItem({ diff --git a/apps/code/src/renderer/components/TreeDirectoryRow.tsx b/apps/code/src/renderer/components/TreeDirectoryRow.tsx index e9d39b8e3..7dee21d32 100644 --- a/apps/code/src/renderer/components/TreeDirectoryRow.tsx +++ b/apps/code/src/renderer/components/TreeDirectoryRow.tsx @@ -28,24 +28,17 @@ export function TreeDirectoryRow({ align="center" gap="1" onClick={onToggle} - className={isActive ? TREE_ROW_ACTIVE_CLASS : TREE_ROW_INACTIVE_CLASS} + className={`h-[22px] cursor-pointer select-none pr-[8px] ${isActive ? TREE_ROW_ACTIVE_CLASS : TREE_ROW_INACTIVE_CLASS}`} style={{ paddingLeft: `${depth * TREE_INDENT_PX + 4}px`, - paddingRight: "8px", - height: "22px", - cursor: "pointer", - userSelect: "none", }} > ) : ( - + )} - + {name}     @@ -114,12 +100,9 @@ export function TreeFileRow({ onContextMenu={onContextMenu} onMouseEnter={onMouseEnter} onMouseLeave={onMouseLeave} - className={isActive ? TREE_ROW_ACTIVE_CLASS : TREE_ROW_INACTIVE_CLASS} + className={`h-[22px] cursor-pointer pr-[8px] ${isActive ? TREE_ROW_ACTIVE_CLASS : TREE_ROW_INACTIVE_CLASS}`} style={{ paddingLeft: `${depth * TREE_INDENT_PX + 4}px`, - paddingRight: "8px", - height: "22px", - cursor: "pointer", }} > {/* Spacer to align with folder caret column */} @@ -127,14 +110,11 @@ export function TreeFileRow({ style={{ width: `${CARET_COL_SIZE}px`, height: `${CARET_COL_SIZE}px`, - flexShrink: 0, }} + className="shrink-0" /> - + {fileName} {trailing} diff --git a/apps/code/src/renderer/components/ZenHedgehog.tsx b/apps/code/src/renderer/components/ZenHedgehog.tsx index a9cecaf49..28f603a6a 100644 --- a/apps/code/src/renderer/components/ZenHedgehog.tsx +++ b/apps/code/src/renderer/components/ZenHedgehog.tsx @@ -65,13 +65,8 @@ export function ZenHedgehog() { layoutId="zen-hedgehog" src={hovered ? roboZen : zenHedgehog} alt="" - style={{ - width: "600px", - maxWidth: "90%", - cursor: "default", - display: "block", - }} transition={{ type: "spring", stiffness: 120, damping: 20, mass: 0.8 }} + className="block w-[600px] max-w-[90%] cursor-default" />
    ); diff --git a/apps/code/src/renderer/components/action-selector/ActionSelector.tsx b/apps/code/src/renderer/components/action-selector/ActionSelector.tsx index 7dd084672..c4fc9cf40 100644 --- a/apps/code/src/renderer/components/action-selector/ActionSelector.tsx +++ b/apps/code/src/renderer/components/action-selector/ActionSelector.tsx @@ -214,10 +214,8 @@ export function ActionSelector({ }} style={{ outline: "none", - border: "1px solid var(--gray-6)", - background: "var(--gray-1)", - borderRadius: "var(--radius-3)", }} + className="rounded-(--radius-3) border border-(--gray-6) bg-(--gray-1)" > {hasSteps && steps && ( @@ -230,7 +228,7 @@ export function ActionSelector({ )} {title && ( - + {compactHomePath(title)} )} @@ -238,7 +236,7 @@ export function ActionSelector({ {pendingAction && {pendingAction}} - + {question} @@ -313,7 +311,7 @@ export function ActionSelector({ })} - + Enter to select · Tab/Arrow keys to navigate · Esc to cancel diff --git a/apps/code/src/renderer/components/action-selector/InlineEditableText.tsx b/apps/code/src/renderer/components/action-selector/InlineEditableText.tsx index c33e9e05d..ca5339ab0 100644 --- a/apps/code/src/renderer/components/action-selector/InlineEditableText.tsx +++ b/apps/code/src/renderer/components/action-selector/InlineEditableText.tsx @@ -75,19 +75,10 @@ export function InlineEditableText({ onKeyDown={handleKeyDown} onClick={(e) => e.stopPropagation()} rows={1} - className="text-gray-12 placeholder:text-gray-10" + className="block max-h-[120px] w-full cursor-text overflow-auto break-words font-medium text-[13px] text-gray-12 placeholder:text-gray-10" style={{ all: "unset", - fontSize: "var(--font-size-1)", - lineHeight: "var(--line-height-1)", - fontWeight: 500, - width: "100%", - display: "block", resize: "none", - overflow: "auto", - maxHeight: "120px", - wordBreak: "break-word", - cursor: "text", userSelect: active ? "auto" : "none", pointerEvents: active ? "auto" : "none", }} diff --git a/apps/code/src/renderer/components/action-selector/OptionRow.tsx b/apps/code/src/renderer/components/action-selector/OptionRow.tsx index a84612d47..14564a1f7 100644 --- a/apps/code/src/renderer/components/action-selector/OptionRow.tsx +++ b/apps/code/src/renderer/components/action-selector/OptionRow.tsx @@ -72,32 +72,26 @@ export function OptionRow({ onMouseEnter={onMouseEnter} onMouseLeave={onMouseLeave} px="2" - style={{ - cursor: "pointer", - borderRadius: "var(--radius-2)", - background: isCancel + className={`inline-flex h-[28px] cursor-pointer rounded-(--radius-2) ${ + isCancel ? isSelected - ? "var(--gray-6)" - : "var(--gray-3)" + ? "bg-(--gray-6)" + : "bg-(--gray-3)" : isSelected - ? "var(--blue-8)" + ? "bg-(--blue-8)" : isHovered - ? "var(--blue-4)" - : "var(--blue-3)", - display: "inline-flex", - height: "28px", - }} + ? "bg-(--blue-4)" + : "bg-(--blue-3)" + }`} > {isCancel ? option.label : submitLabel} @@ -133,10 +127,7 @@ export function OptionRow({ return ( {displayText} @@ -149,51 +140,28 @@ export function OptionRow({ onMouseEnter={onMouseEnter} onMouseLeave={onMouseLeave} py="1" - style={{ - cursor: "pointer", - paddingTop: "4px", - paddingBottom: "4px", - userSelect: "none", - borderRadius: "var(--radius-2)", - background: isSelected - ? "var(--blue-3)" + className={`-mx-3 cursor-pointer select-none rounded-(--radius-2) pt-[4px] pr-3 pb-[4px] pl-3 ${ + isSelected + ? "bg-(--blue-3)" : isHovered - ? "var(--gray-a3)" - : "transparent", - marginLeft: "calc(var(--space-3) * -1)", - marginRight: "calc(var(--space-3) * -1)", - paddingLeft: "var(--space-3)", - paddingRight: "var(--space-3)", - }} + ? "bg-(--gray-a3)" + : "bg-transparent" + }`} > - + {isSelected ? "›" : ""} {index + 1}. @@ -203,7 +171,7 @@ export function OptionRow({ size="1" color="green" checked={isChecked} - style={{ pointerEvents: "none", flexShrink: 0 }} + className="pointer-events-none shrink-0" /> ) : ( ))} - - {renderLabel()} - + {renderLabel()} {option.description && !isCurrentlyEditing && ( {compactHomePath(option.description)} diff --git a/apps/code/src/renderer/components/action-selector/StepTabs.tsx b/apps/code/src/renderer/components/action-selector/StepTabs.tsx index b8125501c..7ec24f713 100644 --- a/apps/code/src/renderer/components/action-selector/StepTabs.tsx +++ b/apps/code/src/renderer/components/action-selector/StepTabs.tsx @@ -32,21 +32,18 @@ export function StepTabs({ px="2" onClick={() => onStepClick(i)} style={{ - borderRadius: "var(--radius-2)", background: isCurrent ? "var(--blue-3)" : "transparent", - cursor: "pointer", }} + className="cursor-pointer rounded-(--radius-2)" > {isCompleted && "✓ "} {step.label} diff --git a/apps/code/src/renderer/components/permissions/DeletePermission.tsx b/apps/code/src/renderer/components/permissions/DeletePermission.tsx index e3bc6ca4d..ad0fee489 100644 --- a/apps/code/src/renderer/components/permissions/DeletePermission.tsx +++ b/apps/code/src/renderer/components/permissions/DeletePermission.tsx @@ -16,10 +16,10 @@ export function DeletePermission({ title={toolCall.title ?? "Delete file"} pendingAction={ <> - + {compactHomePath(filePath)} - + This action cannot be undone. diff --git a/apps/code/src/renderer/components/permissions/EditPermission.tsx b/apps/code/src/renderer/components/permissions/EditPermission.tsx index 0f9c4d2f6..0cbfef281 100644 --- a/apps/code/src/renderer/components/permissions/EditPermission.tsx +++ b/apps/code/src/renderer/components/permissions/EditPermission.tsx @@ -24,7 +24,7 @@ export function EditPermission({ isNewFile ? ( <> Do you want to create{" "} - + {getFilename(filePath)} ? diff --git a/apps/code/src/renderer/components/permissions/ExecutePermission.tsx b/apps/code/src/renderer/components/permissions/ExecutePermission.tsx index cae02e66d..b7066b9fe 100644 --- a/apps/code/src/renderer/components/permissions/ExecutePermission.tsx +++ b/apps/code/src/renderer/components/permissions/ExecutePermission.tsx @@ -23,9 +23,8 @@ export function ExecutePermission({ {compactHomePath(command)} diff --git a/apps/code/src/renderer/components/permissions/FetchPermission.tsx b/apps/code/src/renderer/components/permissions/FetchPermission.tsx index b18eeb05a..32213e6d9 100644 --- a/apps/code/src/renderer/components/permissions/FetchPermission.tsx +++ b/apps/code/src/renderer/components/permissions/FetchPermission.tsx @@ -34,12 +34,17 @@ export function FetchPermission({ pendingAction={ <> {url && ( - + {url} )} {prompt && ( - + {prompt} )} diff --git a/apps/code/src/renderer/components/permissions/PlanContent.tsx b/apps/code/src/renderer/components/permissions/PlanContent.tsx index a25a265de..7dfb10e42 100644 --- a/apps/code/src/renderer/components/permissions/PlanContent.tsx +++ b/apps/code/src/renderer/components/permissions/PlanContent.tsx @@ -77,9 +77,7 @@ export function PlanContent({ id, plan }: PlanContentProps) { > - - Plan - + Plan {hasUnanswered && ( - + You have not answered all questions )} {localAnswers.map((a) => ( - - {a.question} - - - {a.answer} - + {a.question} + {a.answer} ))} diff --git a/apps/code/src/renderer/components/ui/Button.tsx b/apps/code/src/renderer/components/ui/Button.tsx index c4467267d..935b5ccd4 100644 --- a/apps/code/src/renderer/components/ui/Button.tsx +++ b/apps/code/src/renderer/components/ui/Button.tsx @@ -29,11 +29,11 @@ function buildTooltipContent( const reason = disabled ? disabledReason : null; if (tooltipContent != null && reason) { return ( - - + + {tooltipContent} - + {disabledBecauseLabel(reason)} diff --git a/apps/code/src/renderer/components/ui/FileIcon.tsx b/apps/code/src/renderer/components/ui/FileIcon.tsx index 756143f3e..200ee99b1 100644 --- a/apps/code/src/renderer/components/ui/FileIcon.tsx +++ b/apps/code/src/renderer/components/ui/FileIcon.tsx @@ -32,7 +32,7 @@ export const FileIcon = memo(function FileIcon({ size={size} weight="regular" color="var(--gray-10)" - style={{ flexShrink: 0 }} + className="shrink-0" /> ); } @@ -43,7 +43,7 @@ export const FileIcon = memo(function FileIcon({ width={size} height={size} alt="" - style={{ flexShrink: 0 }} + className="shrink-0" /> ); }); diff --git a/apps/code/src/renderer/components/ui/KeyHint.tsx b/apps/code/src/renderer/components/ui/KeyHint.tsx index 4c5cb068b..1c87217b8 100644 --- a/apps/code/src/renderer/components/ui/KeyHint.tsx +++ b/apps/code/src/renderer/components/ui/KeyHint.tsx @@ -3,18 +3,16 @@ import type React from "react"; interface KeyHintProps { children: React.ReactNode; + className?: string; style?: React.CSSProperties; } -export function KeyHint({ children, style }: KeyHintProps) { +export function KeyHint({ children, className, style }: KeyHintProps) { return ( diff --git a/apps/code/src/renderer/components/ui/PanelMessage.tsx b/apps/code/src/renderer/components/ui/PanelMessage.tsx index a0f68e38f..800a8f43b 100644 --- a/apps/code/src/renderer/components/ui/PanelMessage.tsx +++ b/apps/code/src/renderer/components/ui/PanelMessage.tsx @@ -20,11 +20,11 @@ export function PanelMessage({ gap="1" height="100%" > - + {children} {detail && ( - + {detail} )} diff --git a/apps/code/src/renderer/components/ui/StepList.tsx b/apps/code/src/renderer/components/ui/StepList.tsx index f621175af..6db503073 100644 --- a/apps/code/src/renderer/components/ui/StepList.tsx +++ b/apps/code/src/renderer/components/ui/StepList.tsx @@ -39,19 +39,16 @@ interface StepRowProps { } function StepRow({ step, size = "2" }: StepRowProps) { + const sizeClass = size === "1" ? "text-[13px]" : "text-sm"; return ( - - {step.label} - + {step.label} {step.detail && ( - - {step.detail} - + {step.detail} )} diff --git a/apps/code/src/renderer/components/ui/Tooltip.tsx b/apps/code/src/renderer/components/ui/Tooltip.tsx index d871af738..351dbd537 100644 --- a/apps/code/src/renderer/components/ui/Tooltip.tsx +++ b/apps/code/src/renderer/components/ui/Tooltip.tsx @@ -43,19 +43,9 @@ export function Tooltip({ side={side} align={align} sideOffset={sideOffset} - className="dark" + className="dark flex items-center gap-[8px] rounded-[6px] border border-(--gray-4) bg-(--gray-2) px-[10px] py-[6px] text-(--gray-12) text-xs leading-[1.4]" style={{ - display: "flex", - alignItems: "center", - gap: "8px", - backgroundColor: "var(--gray-2)", - color: "var(--gray-12)", - padding: "6px 10px", - borderRadius: "6px", - fontSize: "12px", - lineHeight: "1.4", whiteSpace: isSimpleContent ? "nowrap" : "normal", - border: "1px solid var(--gray-4)", boxShadow: "0 4px 12px rgba(0, 0, 0, 0.25)", zIndex: 9999, animationDuration: "150ms", @@ -64,9 +54,7 @@ export function Tooltip({ }} > {isSimpleContent ? {content} : content} - {shortcut && ( - {shortcut} - )} + {shortcut && {shortcut}} diff --git a/apps/code/src/renderer/components/ui/combobox/Combobox.css b/apps/code/src/renderer/components/ui/combobox/Combobox.css index e4f19acec..f4d8c0429 100644 --- a/apps/code/src/renderer/components/ui/combobox/Combobox.css +++ b/apps/code/src/renderer/components/ui/combobox/Combobox.css @@ -62,17 +62,17 @@ .combobox-content.size-1 [cmdk-input] { font-size: 13px; - line-height: var(--line-height-1); + line-height: 20px; } .combobox-content.size-2 [cmdk-input] { - font-size: var(--font-size-2); - line-height: var(--line-height-2); + font-size: 14px; + line-height: 20px; } .combobox-content.size-3 [cmdk-input] { - font-size: var(--font-size-3); - line-height: var(--line-height-3); + font-size: 16px; + line-height: 24px; } .combobox-content [cmdk-input]::placeholder { @@ -138,14 +138,14 @@ .combobox-content.size-1 [cmdk-group-heading] { font-size: 13px; letter-spacing: var(--letter-spacing-1); - line-height: var(--line-height-1); + line-height: 20px; } .combobox-content.size-2 [cmdk-group-heading], .combobox-content.size-3 [cmdk-group-heading] { - font-size: var(--font-size-2); + font-size: 14px; letter-spacing: var(--letter-spacing-2); - line-height: var(--line-height-2); + line-height: 20px; } .combobox-content [cmdk-item] { @@ -194,22 +194,22 @@ .combobox-content.size-1 [cmdk-item] { font-size: 13px; - line-height: var(--line-height-1); + line-height: 20px; letter-spacing: var(--letter-spacing-1); border-radius: var(--radius-1); margin-bottom: 2px; } .combobox-content.size-2 [cmdk-item] { - font-size: var(--font-size-2); - line-height: var(--line-height-2); + font-size: 14px; + line-height: 20px; letter-spacing: var(--letter-spacing-2); border-radius: var(--radius-2); } .combobox-content.size-3 [cmdk-item] { - font-size: var(--font-size-3); - line-height: var(--line-height-3); + font-size: 16px; + line-height: 24px; letter-spacing: var(--letter-spacing-3); border-radius: var(--radius-2); } @@ -272,9 +272,9 @@ color: var(--gray-a10); user-select: none; cursor: default; - font-size: var(--font-size-1); + font-size: 13px; letter-spacing: var(--letter-spacing-1); - line-height: var(--line-height-1); + line-height: 20px; } .combobox-separator { @@ -313,7 +313,7 @@ min-width: 0; font-weight: 400; font-size: 13px; - line-height: var(--line-height-1); + line-height: 20px; letter-spacing: var(--letter-spacing-1); border-radius: var(--radius-1); } @@ -383,8 +383,8 @@ .combobox-trigger.size-1 { height: var(--space-5); gap: var(--space-2); - font-size: var(--font-size-1); - line-height: var(--line-height-1); + font-size: 13px; + line-height: 20px; letter-spacing: var(--letter-spacing-1); border-radius: max(var(--radius-1), var(--radius-full)); } @@ -401,8 +401,8 @@ .combobox-trigger.size-2 { height: var(--space-6); gap: calc(var(--space-1) * 1.5); - font-size: var(--font-size-2); - line-height: var(--line-height-2); + font-size: 14px; + line-height: 20px; letter-spacing: var(--letter-spacing-2); border-radius: max(var(--radius-2), var(--radius-full)); } @@ -419,8 +419,8 @@ .combobox-trigger.size-3 { height: var(--space-7); gap: var(--space-2); - font-size: var(--font-size-3); - line-height: var(--line-height-3); + font-size: 16px; + line-height: 24px; letter-spacing: var(--letter-spacing-3); border-radius: max(var(--radius-3), var(--radius-full)); } diff --git a/apps/code/src/renderer/components/ui/combobox/Combobox.stories.tsx b/apps/code/src/renderer/components/ui/combobox/Combobox.stories.tsx index 5c46c0cb2..11ff1e787 100644 --- a/apps/code/src/renderer/components/ui/combobox/Combobox.stories.tsx +++ b/apps/code/src/renderer/components/ui/combobox/Combobox.stories.tsx @@ -142,7 +142,7 @@ export const WithFooter: Story = { ))} - @@ -193,7 +193,7 @@ export const FullFeatured: Story = { - @@ -425,9 +425,9 @@ export const AllSizes: Story = { const [value3, setValue3] = useState(""); return ( -
    +
    - + Size 1 @@ -465,7 +465,7 @@ export const AllSizes: Story = { - @@ -475,7 +475,7 @@ export const AllSizes: Story = {
    - + Size 2 @@ -513,7 +513,7 @@ export const AllSizes: Story = { - @@ -523,7 +523,7 @@ export const AllSizes: Story = {
    - + Size 3 @@ -561,7 +561,7 @@ export const AllSizes: Story = { - diff --git a/apps/code/src/renderer/components/ui/combobox/Combobox.tsx b/apps/code/src/renderer/components/ui/combobox/Combobox.tsx index d36c7dc2b..278ee3071 100644 --- a/apps/code/src/renderer/components/ui/combobox/Combobox.tsx +++ b/apps/code/src/renderer/components/ui/combobox/Combobox.tsx @@ -176,10 +176,10 @@ function ComboboxTrigger({ style={style} > - + {displayValue} - {!disabled && } + {!disabled && } @@ -262,12 +262,11 @@ function ComboboxContent({ const content = ( setHovered(false)} onClick={handleClick} style={{ - display: "flex", - alignItems: "center", cursor: hovered ? "pointer" : undefined, - background: "none", - border: "none", - padding: 0, - margin: 0, color: "inherit", }} + className="m-0 flex items-center border-0 bg-transparent p-0" > {icon} diff --git a/apps/code/src/renderer/features/ai-approval/components/AiApprovalScreen.tsx b/apps/code/src/renderer/features/ai-approval/components/AiApprovalScreen.tsx index dd41112c7..229a63424 100644 --- a/apps/code/src/renderer/features/ai-approval/components/AiApprovalScreen.tsx +++ b/apps/code/src/renderer/features/ai-approval/components/AiApprovalScreen.tsx @@ -47,7 +47,7 @@ export function AiApprovalScreen({ orgName, isAdmin }: AiApprovalScreenProps) { variant="ghost" color="gray" onClick={() => openSettings()} - style={{ opacity: 0.7 }} + className="opacity-70" > Settings @@ -60,7 +60,7 @@ export function AiApprovalScreen({ orgName, isAdmin }: AiApprovalScreenProps) { variant="ghost" color="gray" onClick={() => logoutMutation.mutate()} - style={{ opacity: 0.5 }} + className="opacity-50" > Log out @@ -73,12 +73,7 @@ export function AiApprovalScreen({ orgName, isAdmin }: AiApprovalScreenProps) { - + PostHog AI needs your approval - + {orgName ? `The "${orgName}" organization hasn't approved AI data processing yet.` : "Your organization hasn't approved AI data processing yet."}{" "} @@ -128,18 +119,18 @@ export function AiApprovalScreen({ orgName, isAdmin }: AiApprovalScreenProps) { size="3" onClick={openApproval} disabled={!approvalUrl} - style={{ width: "100%" }} + className="w-full" > Approve in PostHog - + Opens PostHog in your browser. Come back here once you've approved. ) : ( - + Ask an organization admin to approve AI data processing. )} diff --git a/apps/code/src/renderer/features/archive/components/ArchivedTasksView.stories.tsx b/apps/code/src/renderer/features/archive/components/ArchivedTasksView.stories.tsx index bf8e72277..6c35ea99f 100644 --- a/apps/code/src/renderer/features/archive/components/ArchivedTasksView.stories.tsx +++ b/apps/code/src/renderer/features/archive/components/ArchivedTasksView.stories.tsx @@ -64,7 +64,7 @@ const meta: Meta = { parameters: { layout: "fullscreen" }, decorators: [ (Story) => ( - + ), diff --git a/apps/code/src/renderer/features/archive/components/ArchivedTasksView.tsx b/apps/code/src/renderer/features/archive/components/ArchivedTasksView.tsx index 888c6bee3..1dc7f3531 100644 --- a/apps/code/src/renderer/features/archive/components/ArchivedTasksView.tsx +++ b/apps/code/src/renderer/features/archive/components/ArchivedTasksView.tsx @@ -130,10 +130,7 @@ function RepositoryFilterHeader({ onSelect: (repo: string | null) => void; }) { return ( - + diff --git a/apps/code/src/renderer/features/auth/components/RegionSelect.tsx b/apps/code/src/renderer/features/auth/components/RegionSelect.tsx index 81aaf3c5f..46126463d 100644 --- a/apps/code/src/renderer/features/auth/components/RegionSelect.tsx +++ b/apps/code/src/renderer/features/auth/components/RegionSelect.tsx @@ -20,8 +20,8 @@ export function RegionSelect({ if (!expanded) { return ( - - + + {regionLabel} {" \u00B7 "} @@ -30,15 +30,11 @@ export function RegionSelect({ onClick={() => setExpanded(true)} disabled={disabled} style={{ - background: "none", - border: "none", - padding: 0, - color: "var(--accent-9)", cursor: disabled ? "not-allowed" : "pointer", - fontWeight: 500, fontSize: "inherit", opacity: disabled ? 0.5 : 1, }} + className="border-0 bg-transparent p-0 font-medium text-(--accent-9)" > change @@ -47,28 +43,19 @@ export function RegionSelect({ } return ( - + - + PostHog region - + diff --git a/apps/code/src/renderer/features/auth/components/SignInCard.tsx b/apps/code/src/renderer/features/auth/components/SignInCard.tsx index e90798b10..2b3e15ea3 100644 --- a/apps/code/src/renderer/features/auth/components/SignInCard.tsx +++ b/apps/code/src/renderer/features/auth/components/SignInCard.tsx @@ -12,16 +12,10 @@ export function SignInCard({ hogSrc, hogMessage, subtitle }: SignInCardProps) { return ( - + Sign in / sign up with PostHog - - {subtitle} - + {subtitle} diff --git a/apps/code/src/renderer/features/billing/components/UsageLimitModal.tsx b/apps/code/src/renderer/features/billing/components/UsageLimitModal.tsx index 17fe34686..25250a817 100644 --- a/apps/code/src/renderer/features/billing/components/UsageLimitModal.tsx +++ b/apps/code/src/renderer/features/billing/components/UsageLimitModal.tsx @@ -26,7 +26,7 @@ export function UsageLimitModal() { Usage limit reached - + {context === "mid-task" ? "You've hit your free plan usage limit. Your current task can't continue until usage resets or you upgrade to Pro." : "You've reached your free plan usage limit. Upgrade to Pro for unlimited usage."} diff --git a/apps/code/src/renderer/features/code-editor/components/CodeEditorPanel.tsx b/apps/code/src/renderer/features/code-editor/components/CodeEditorPanel.tsx index bccae97d6..cf7f9bd69 100644 --- a/apps/code/src/renderer/features/code-editor/components/CodeEditorPanel.tsx +++ b/apps/code/src/renderer/features/code-editor/components/CodeEditorPanel.tsx @@ -73,8 +73,7 @@ export function CodeEditorPanel({ handleMarkdownLinkClick(e, href ?? "")} - className="cursor-pointer" - style={{ color: "var(--accent-11)", textDecoration: "underline" }} + className="cursor-pointer text-(--accent-11) underline" > {children} @@ -143,12 +142,12 @@ export function CodeEditorPanel({ justify="center" height="100%" p="4" - style={{ overflow: "auto" }} + className="overflow-auto" > {filePath} ); @@ -186,18 +185,17 @@ export function CodeEditorPanel({ if (isMarkdown) { return ( - + {filePath} @@ -213,9 +211,9 @@ export function CodeEditorPanel({ - + {preferRendered ? ( - + + ; + return
    ; } return ( - + {relativePath} - -
    + +
    ); diff --git a/apps/code/src/renderer/features/code-review/components/CloudReviewPage.tsx b/apps/code/src/renderer/features/code-review/components/CloudReviewPage.tsx index c333f4082..07785b565 100644 --- a/apps/code/src/renderer/features/code-review/components/CloudReviewPage.tsx +++ b/apps/code/src/renderer/features/code-review/components/CloudReviewPage.tsx @@ -76,7 +76,7 @@ export function CloudReviewPage({ task }: CloudReviewPageProps) { > - Waiting for changes... + Waiting for changes... ); diff --git a/apps/code/src/renderer/features/code-review/components/CommentAnnotation.tsx b/apps/code/src/renderer/features/code-review/components/CommentAnnotation.tsx index 56be6953a..e8ad71f9a 100644 --- a/apps/code/src/renderer/features/code-review/components/CommentAnnotation.tsx +++ b/apps/code/src/renderer/features/code-review/components/CommentAnnotation.tsx @@ -69,8 +69,7 @@ export function CommentAnnotation({ ref={setTextareaRef} placeholder="Describe the changes you'd like..." onKeyDown={handleKeyDown} - className="w-full resize-none rounded border border-[var(--gray-6)] bg-[var(--color-background)] p-1.5 text-[13px] text-[var(--gray-12)] leading-normal outline-none" - style={{ minHeight: 48 }} + className="min-h-[48px] w-full resize-none rounded border border-[var(--gray-6)] bg-[var(--color-background)] p-1.5 text-[13px] text-[var(--gray-12)] leading-normal outline-none" />
    diff --git a/apps/code/src/renderer/features/code-review/components/InteractiveFileDiff.tsx b/apps/code/src/renderer/features/code-review/components/InteractiveFileDiff.tsx index e65f35a18..bf58ece60 100644 --- a/apps/code/src/renderer/features/code-review/components/InteractiveFileDiff.tsx +++ b/apps/code/src/renderer/features/code-review/components/InteractiveFileDiff.tsx @@ -67,22 +67,16 @@ function HunkRevertButton({ onRevert: () => void; }) { return ( -
    +
    - + {comment.user.login} - + {formatRelativeTimeShort(comment.created_at)}
    - + Sending... diff --git a/apps/code/src/renderer/features/code-review/components/ReviewPage.tsx b/apps/code/src/renderer/features/code-review/components/ReviewPage.tsx index 90a1bcc79..bbd151d56 100644 --- a/apps/code/src/renderer/features/code-review/components/ReviewPage.tsx +++ b/apps/code/src/renderer/features/code-review/components/ReviewPage.tsx @@ -102,7 +102,7 @@ export function ReviewPage({ task }: ReviewPageProps) { if (!repoPath) { return ( - + No repository path available @@ -298,7 +298,7 @@ function BranchReviewPage({ function SectionLabel({ label }: { label: string }) { return ( - + {label} diff --git a/apps/code/src/renderer/features/code-review/components/ReviewShell.test.tsx b/apps/code/src/renderer/features/code-review/components/ReviewShell.test.tsx index 9e820f68c..602f83901 100644 --- a/apps/code/src/renderer/features/code-review/components/ReviewShell.test.tsx +++ b/apps/code/src/renderer/features/code-review/components/ReviewShell.test.tsx @@ -87,23 +87,24 @@ describe.each([ "src/a/very/deeply/nested/structure/ReviewShell.tsx", )[which]; - const dirSpan = findSpan( - rendered.container, - (s) => s.style.color === "var(--gray-9)" && !s.style.fontWeight, + // Inline styles were migrated to Tailwind utility classes; check classes + // instead. The dir span gets the muted color + truncation utilities, the + // file span gets bold weight + a non-shrinking flex behavior. + const dirSpan = findSpan(rendered.container, (s) => + s.classList.contains("text-(--gray-9)"), ); - const fileSpan = findSpan( - rendered.container, - (s) => s.style.fontWeight === "600", + const fileSpan = findSpan(rendered.container, (s) => + s.classList.contains("font-semibold"), ); - expect(dirSpan.style.overflow).toBe("hidden"); - expect(dirSpan.style.textOverflow).toBe("ellipsis"); - expect(dirSpan.style.whiteSpace).toBe("nowrap"); + expect(dirSpan.classList.contains("overflow-hidden")).toBe(true); + expect(dirSpan.classList.contains("text-ellipsis")).toBe(true); + expect(dirSpan.classList.contains("whitespace-nowrap")).toBe(true); - expect(fileSpan.style.whiteSpace).toBe("nowrap"); - expect(fileSpan.style.flexShrink).toBe("0"); + expect(fileSpan.classList.contains("whitespace-nowrap")).toBe(true); + expect(fileSpan.classList.contains("shrink-0")).toBe(true); expect(dirSpan.parentElement).toBe(fileSpan.parentElement); - expect(dirSpan.parentElement?.style.display).toBe("flex"); + expect(dirSpan.parentElement?.classList.contains("flex")).toBe(true); }); }); diff --git a/apps/code/src/renderer/features/code-review/components/ReviewShell.tsx b/apps/code/src/renderer/features/code-review/components/ReviewShell.tsx index 47730a7e7..944937525 100644 --- a/apps/code/src/renderer/features/code-review/components/ReviewShell.tsx +++ b/apps/code/src/renderer/features/code-review/components/ReviewShell.tsx @@ -253,23 +253,12 @@ function ExpandedSidebar({ task }: { task: Task }) { ); return ( - + @@ -581,17 +543,7 @@ export function DiffFileHeader({ e.stopPropagation(); onOpenFile(); }} - className="hover:bg-gray-4" - style={{ - marginLeft: "auto", - color: "var(--gray-9)", - cursor: "pointer", - padding: "2px", - borderRadius: "3px", - display: "inline-flex", - background: "none", - border: "none", - }} + className="ml-auto inline-flex cursor-pointer rounded-[3px] border-0 bg-transparent p-[2px] text-(--gray-9) hover:bg-gray-4" > @@ -649,17 +601,7 @@ export function DeferredDiffPlaceholder({ onToggle={onToggle} /> {!collapsed && ( -
    +
    {getDeferredMessage(reason, linesAdded + linesRemoved)} {onShow ? ( <> @@ -668,14 +610,9 @@ export function DeferredDiffPlaceholder({ type="button" onClick={onShow} style={{ - color: "var(--accent-9)", - textDecoration: "underline", - background: "none", - border: "none", - cursor: "pointer", fontSize: "inherit", - padding: 0, }} + className="cursor-pointer border-0 bg-transparent p-0 text-(--accent-9) underline" > Load diff @@ -688,10 +625,9 @@ export function DeferredDiffPlaceholder({ target="_blank" rel="noopener noreferrer" style={{ - color: "var(--accent-9)", - textDecoration: "underline", fontSize: "inherit", }} + className="text-(--accent-9) underline" > View on GitHub diff --git a/apps/code/src/renderer/features/code-review/components/ReviewToolbar.tsx b/apps/code/src/renderer/features/code-review/components/ReviewToolbar.tsx index 9a390afdf..06879c742 100644 --- a/apps/code/src/renderer/features/code-review/components/ReviewToolbar.tsx +++ b/apps/code/src/renderer/features/code-review/components/ReviewToolbar.tsx @@ -61,17 +61,12 @@ export const ReviewToolbar = memo(function ReviewToolbar({ align="center" gap="3" style={{ - borderBottom: "1px solid var(--gray-6)", - background: "var(--color-background)", - position: "sticky", - height: "32px", - top: 0, zIndex: 2, - flexShrink: 0, }} + className="sticky top-0 h-[32px] shrink-0 border-b border-b-(--gray-6) bg-(--color-background)" > - + {fileCount} file{fileCount !== 1 ? "s" : ""} changed {effectiveSource && ( diff --git a/apps/code/src/renderer/features/command-center/components/CommandCenterGrid.tsx b/apps/code/src/renderer/features/command-center/components/CommandCenterGrid.tsx index 6fc4b0e6a..5140bf211 100644 --- a/apps/code/src/renderer/features/command-center/components/CommandCenterGrid.tsx +++ b/apps/code/src/renderer/features/command-center/components/CommandCenterGrid.tsx @@ -145,12 +145,10 @@ export function CommandCenterGrid({ layout, cells }: CommandCenterGridProps) { return (
    {cells.map((cell) => ( diff --git a/apps/code/src/renderer/features/command-center/components/CommandCenterPanel.tsx b/apps/code/src/renderer/features/command-center/components/CommandCenterPanel.tsx index 07a8a28ab..8f9a612ba 100644 --- a/apps/code/src/renderer/features/command-center/components/CommandCenterPanel.tsx +++ b/apps/code/src/renderer/features/command-center/components/CommandCenterPanel.tsx @@ -91,11 +91,7 @@ function EmptyCell({ cellIndex }: { cellIndex: number }) { py="1" className="shrink-0 border-gray-6 border-b" > - + New task - + {Math.round(zoom * 100)}%
    - + No results found. @@ -149,14 +148,14 @@ export function CommandMenu({ open, onOpenChange }: CommandMenuProps) { onSelect={runAndClose(navigateToTaskInput, "home")} > - Home + Home openSettingsDialog(), "settings")} > - Settings + Settings @@ -174,28 +173,28 @@ export function CommandMenu({ open, onOpenChange }: CommandMenuProps) { {theme === "system" && ( )} - {THEME_CYCLE_LABELS[theme]} + {THEME_CYCLE_LABELS[theme]} - Toggle left sidebar + Toggle left sidebar - Open review panel + Open review panel - New task + New task @@ -211,8 +210,9 @@ export function CommandMenu({ open, onOpenChange }: CommandMenuProps) { )} > - - New task in {folder.name} + + New task in{" "} + {folder.name} ))} diff --git a/apps/code/src/renderer/features/command/components/FilePicker.tsx b/apps/code/src/renderer/features/command/components/FilePicker.tsx index 9cab596a0..25f755f35 100644 --- a/apps/code/src/renderer/features/command/components/FilePicker.tsx +++ b/apps/code/src/renderer/features/command/components/FilePicker.tsx @@ -62,20 +62,14 @@ export function FilePicker({
    handleSelect(file.path)} > - + {file.name} {file.dir && ( - + {file.dir} )} diff --git a/apps/code/src/renderer/features/command/components/KeyHint.tsx b/apps/code/src/renderer/features/command/components/KeyHint.tsx index 11419b5ec..d456e195c 100644 --- a/apps/code/src/renderer/features/command/components/KeyHint.tsx +++ b/apps/code/src/renderer/features/command/components/KeyHint.tsx @@ -9,7 +9,7 @@ export function KeyHint({ keys, className }: KeyHintProps) { return (
    {keys.map((key) => ( - + {key} ))} diff --git a/apps/code/src/renderer/features/editor/components/MarkdownRenderer.tsx b/apps/code/src/renderer/features/editor/components/MarkdownRenderer.tsx index 495fcbd7c..1db5e9d6a 100644 --- a/apps/code/src/renderer/features/editor/components/MarkdownRenderer.tsx +++ b/apps/code/src/renderer/features/editor/components/MarkdownRenderer.tsx @@ -25,7 +25,7 @@ function preprocessMarkdown(content: string): string { } const HeadingText = ({ children }: { children: React.ReactNode }) => ( - + {children} ); @@ -44,7 +44,7 @@ export const baseComponents: Components = { node.children[0].tagName === "strong"; return ( - + {children} ); @@ -58,7 +58,7 @@ export const baseComponents: Components = { const match = className?.match(/language-(\w+)/); if (!match) { return ( - + {children} ); @@ -71,23 +71,13 @@ export const baseComponents: Components = { ); }, pre: ({ children }) => {children}, - em: ({ children }) => ( - {children} - ), - i: ({ children }) => ( - {children} - ), + em: ({ children }) => {children}, + i: ({ children }) => {children}, strong: ({ children }) => ( - - {children} - + {children} ), del: ({ children }) => ( - - {children} - + {children} ), a: ({ href, children }) => { const githubRef = href ? parseGithubIssueUrl(href) : null; @@ -107,13 +97,7 @@ export const baseComponents: Components = { href={href} target="_blank" rel="noopener noreferrer" - className="markdown-link" - style={{ - fontSize: "var(--font-size-1)", - display: "inline-flex", - alignItems: "center", - gap: "2px", - }} + className="markdown-link inline-flex items-center gap-[2px]" > {children} @@ -136,7 +120,7 @@ export const baseComponents: Components = { ); }, - kbd: ({ children }) => {children}, + kbd: ({ children }) => {children}, ul: ({ children }) => ( {children} @@ -156,18 +140,15 @@ export const baseComponents: Components = { ); } return ; }, // Table components - plain HTML for size control - table: ({ children }) => ( - - {children} -
    - ), + table: ({ children }) => {children}
    , thead: ({ children }) => {children}, tbody: ({ children }) => {children}, tr: ({ children }) => {children}, diff --git a/apps/code/src/renderer/features/folder-picker/components/GitHubRepoPicker.tsx b/apps/code/src/renderer/features/folder-picker/components/GitHubRepoPicker.tsx index 0fd3013e3..2a34c3304 100644 --- a/apps/code/src/renderer/features/folder-picker/components/GitHubRepoPicker.tsx +++ b/apps/code/src/renderer/features/folder-picker/components/GitHubRepoPicker.tsx @@ -92,7 +92,7 @@ export function GitHubRepoPicker({ if (isLoading && !showInlineLoadingState) { return ( ); @@ -108,7 +108,7 @@ export function GitHubRepoPicker({ ) { return ( ); diff --git a/apps/code/src/renderer/features/git-interaction/components/CloudGitInteractionHeader.tsx b/apps/code/src/renderer/features/git-interaction/components/CloudGitInteractionHeader.tsx index 0b5516a66..1dc29acdb 100644 --- a/apps/code/src/renderer/features/git-interaction/components/CloudGitInteractionHeader.tsx +++ b/apps/code/src/renderer/features/git-interaction/components/CloudGitInteractionHeader.tsx @@ -106,7 +106,7 @@ export function CloudGitInteractionHeader({ localHandoff.openConfirm(taskId, session?.cloudBranch ?? null) } > - + {session?.handoffInProgress ? "Transferring..." : "Continue locally"} @@ -126,7 +126,7 @@ export function CloudGitInteractionHeader({ {isPending ? : config.icon} - + {config.label} {prNumber && ` #${prNumber}`} @@ -145,9 +145,8 @@ export function CloudGitInteractionHeader({ borderTopLeftRadius: 0, borderBottomLeftRadius: 0, borderLeft: `1px solid var(--${config.color}-6)`, - paddingLeft: "6px", - paddingRight: "6px", }} + className="pr-[6px] pl-[6px]" > @@ -158,7 +157,7 @@ export function CloudGitInteractionHeader({ key={action.id} onSelect={() => execute(action.id)} > - {action.label} + {action.label} ))} diff --git a/apps/code/src/renderer/features/git-interaction/components/CreatePrDialog.tsx b/apps/code/src/renderer/features/git-interaction/components/CreatePrDialog.tsx index 61ad6456b..be82def71 100644 --- a/apps/code/src/renderer/features/git-interaction/components/CreatePrDialog.tsx +++ b/apps/code/src/renderer/features/git-interaction/components/CreatePrDialog.tsx @@ -110,7 +110,7 @@ export function CreatePrDialog({ - + {isExecuting ? "Creating PR..." : "Create PR"} @@ -119,7 +119,7 @@ export function CreatePrDialog({ <> {store.createPrNeedsBranch && ( - + Branch {currentBranch && ( - + from {currentBranch} )} @@ -140,21 +140,21 @@ export function CreatePrDialog({ {store.createPrNeedsCommit && ( - + Commit message - + {formatFileCountLabel( !!(showCommitAllToggle && !commitAll), stagedFileCount ?? 0, diffStats.filesChanged, )} - + +{diffStats.linesAdded} - + -{diffStats.linesRemoved} - + PR title - + Description