🤖 refactor: align tailwind dark theme utilities (#628)

## Summary
- migrate globals.css to Tailwind v4 theming with new dark surface
tokens and utilities
- replace inline plan/assistant chip styling across tool calls, AI view,
markdown, and token breakdown
- point PTY service types at @homebridge/node-pty-prebuilt-multiarch to
unblock typecheck

## Testing
- make typecheck

_Generated with _

Author: kylecarbs

src/browser/components/AIView.tsx

@@ -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>
                         )}
@@ -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>

src/browser/components/Messages/MarkdownComponents.tsx

@@ -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

src/browser/components/RightSidebar/ConsumerBreakdown.tsx

@@ -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>

src/browser/components/tools/BashToolCall.tsx

@@ -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 {
@@ -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>

src/browser/components/tools/ProposePlanToolCall.tsx

@@ -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 (
@@ -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">
@@ -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}
@@ -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>
@@ -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)}