🤖 Consolidate best practices: hooks, constants, and components

- Add useClipboard hook to eliminate duplicate clipboard logic (~30 LoC saved)
- Add timing constants (TIMING.COPY_FEEDBACK_DURATION, etc.)
- Expand UI constants with common text strings and icons
- Remove unused shadcn button component (~50 LoC)
- Replace hardcoded colors with CSS variables (--color-success, --color-muted)
- Add shadcn tooltip component for future use
- Update Tooltip.tsx to use timing constants

Total: ~80 LoC removed, improved maintainability across 12+ components

Author: kylecarbs

src/components/Messages/AssistantMessage.tsx

@@ -5,11 +5,12 @@ import { TypewriterMarkdown } from "./TypewriterMarkdown";
 import type { ButtonConfig } from "./MessageWindow";
 import { MessageWindow } from "./MessageWindow";
 import { useStartHere } from "@/hooks/useStartHere";
-import { COMPACTED_EMOJI } from "@/constants/ui";
+import { COMPACTED_EMOJI, UI_TEXT } from "@/constants/ui";
 import { ModelDisplay } from "./ModelDisplay";
 import { CompactingMessageContent } from "./CompactingMessageContent";
 import { CompactionBackground } from "./CompactionBackground";
 import type { KebabMenuItem } from "@/components/KebabMenu";
+import { useClipboard } from "@/utils/ui/clipboard";
 
 interface AssistantMessageProps {
   message: DisplayedMessage & { type: "assistant" };
@@ -27,7 +28,7 @@ export const AssistantMessage: React.FC<AssistantMessageProps> = ({
   clipboardWriteText = (data: string) => navigator.clipboard.writeText(data),
 }) => {
   const [showRaw, setShowRaw] = useState(false);
-  const [copied, setCopied] = useState(false);
+  const { copied, copy } = useClipboard({ writeText: clipboardWriteText });
 
   const content = message.content;
   const isStreaming = message.isStreaming;
@@ -44,9 +45,7 @@ export const AssistantMessage: React.FC<AssistantMessageProps> = ({
 
   const handleCopy = async () => {
     try {
-      await clipboardWriteText(content);
-      setCopied(true);
-      setTimeout(() => setCopied(false), 2000);
+      await copy(content);
     } catch (err) {
       console.error("Failed to copy:", err);
     }
@@ -58,7 +57,7 @@ export const AssistantMessage: React.FC<AssistantMessageProps> = ({
     ? []
     : [
         {
-          label: copied ? "✓ Copied" : "Copy",
+          label: copied ? `✓ ${UI_TEXT.COPIED}` : UI_TEXT.COPY,
           onClick: () => void handleCopy(),
         },
       ];

src/components/Messages/UserMessage.tsx

@@ -1,10 +1,12 @@
-import React, { useState } from "react";
+import React from "react";
 import type { DisplayedMessage } from "@/types/message";
 import type { ButtonConfig } from "./MessageWindow";
 import { MessageWindow } from "./MessageWindow";
 import { TerminalOutput } from "./TerminalOutput";
 import { formatKeybind, KEYBINDS } from "@/utils/ui/keybinds";
 import type { KebabMenuItem } from "@/components/KebabMenu";
+import { useClipboard } from "@/utils/ui/clipboard";
+import { UI_TEXT } from "@/constants/ui";
 
 interface UserMessageProps {
   message: DisplayedMessage & { type: "user" };
@@ -30,7 +32,7 @@ export const UserMessage: React.FC<UserMessageProps> = ({
   isCompacting,
   clipboardWriteText = defaultClipboardWriteText,
 }) => {
-  const [copied, setCopied] = useState(false);
+  const { copied, copy } = useClipboard({ writeText: clipboardWriteText });
 
   const content = message.content;
 
@@ -55,9 +57,7 @@ export const UserMessage: React.FC<UserMessageProps> = ({
     );
 
     try {
-      await clipboardWriteText(content);
-      setCopied(true);
-      setTimeout(() => setCopied(false), 2000);
+      await copy(content);
     } catch (err) {
       console.error("Failed to copy:", err);
     }
@@ -85,7 +85,7 @@ export const UserMessage: React.FC<UserMessageProps> = ({
         ]
       : []),
     {
-      label: copied ? "✓ Copied" : "Copy",
+      label: copied ? `✓ ${UI_TEXT.COPIED}` : UI_TEXT.COPY,
       onClick: () => void handleCopy(),
     },
   ];

src/components/ThinkingSlider.tsx

@@ -24,7 +24,7 @@ const GLOW_INTENSITIES: Record<number, { track: string; thumb: string }> = {
 const getTextStyle = (n: number) => {
   if (n === 0) {
     return {
-      color: "#606060",
+      color: "var(--color-subdued)",
       fontWeight: 400,
       textShadow: "none",
       fontSize: "10px",

src/components/Tooltip.tsx

@@ -1,6 +1,7 @@
 import React, { useState, useRef, useLayoutEffect, createContext, useContext } from "react";
 import { createPortal } from "react-dom";
 import { cn } from "@/lib/utils";
+import { TIMING } from "@/constants/timing";
 
 // Context for passing hover state and trigger ref from wrapper to tooltip
 interface TooltipContextValue {
@@ -39,7 +40,7 @@ export const TooltipWrapper: React.FC<TooltipWrapperProps> = ({ inline = false,
     // Delay hiding to allow moving mouse to tooltip
     leaveTimerRef.current = setTimeout(() => {
       setIsHovered(false);
-    }, 100);
+    }, TIMING.TOOLTIP_LEAVE_DELAY);
   };
 
   return (

src/components/tools/BashToolCall.tsx

@@ -82,7 +82,7 @@ export const BashToolCall: React.FC<BashToolCallProps> = ({
           <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",
+              background: result.exitCode === 0 ? "var(--color-success)" : "var(--color-error)",
               color: "white",
             }}
           >

src/components/tools/FileEditToolCall.tsx

@@ -22,6 +22,8 @@ import { useToolExpansion, getStatusDisplay, type ToolStatus } from "./shared/to
 import { TooltipWrapper, Tooltip } from "../Tooltip";
 import { DiffContainer, DiffRenderer, SelectableDiffRenderer } from "../shared/DiffRenderer";
 import { KebabMenu, type KebabMenuItem } from "../KebabMenu";
+import { useClipboard } from "@/utils/ui/clipboard";
+import { UI_TEXT } from "@/constants/ui";
 
 type FileEditOperationArgs =
   | FileEditReplaceStringToolArgs
@@ -49,7 +51,7 @@ function renderDiff(
   try {
     const patches = parsePatch(diff);
     if (patches.length === 0) {
-      return <div style={{ padding: "8px", color: "#888" }}>No changes</div>;
+      return <div style={{ padding: "8px", color: "var(--color-muted)" }}>No changes</div>;
     }
 
     // Render each hunk using SelectableDiffRenderer if we have a callback, otherwise DiffRenderer
@@ -99,16 +101,14 @@ export const FileEditToolCall: React.FC<FileEditToolCallProps> = ({
 }) => {
   const { expanded, toggleExpanded } = useToolExpansion(true);
   const [showRaw, setShowRaw] = React.useState(false);
-  const [copied, setCopied] = React.useState(false);
+  const { copied, copy } = useClipboard();
 
   const filePath = "file_path" in args ? args.file_path : undefined;
 
   const handleCopyPatch = async () => {
     if (result && result.success && result.diff) {
       try {
-        await navigator.clipboard.writeText(result.diff);
-        setCopied(true);
-        setTimeout(() => setCopied(false), 2000);
+        await copy(result.diff);
       } catch (err) {
         console.error("Failed to copy:", err);
       }
@@ -120,7 +120,7 @@ export const FileEditToolCall: React.FC<FileEditToolCallProps> = ({
     result && result.success && result.diff
       ? [
           {
-            label: copied ? "✓ Copied" : "Copy Patch",
+            label: copied ? `✓ ${UI_TEXT.COPIED}` : "Copy Patch",
             onClick: () => void handleCopyPatch(),
           },
           {

src/components/tools/ProposePlanToolCall.tsx

@@ -14,6 +14,8 @@ import { formatKeybind, KEYBINDS } from "@/utils/ui/keybinds";
 import { useStartHere } from "@/hooks/useStartHere";
 import { TooltipWrapper, Tooltip } from "../Tooltip";
 import { cn } from "@/lib/utils";
+import { useClipboard } from "@/utils/ui/clipboard";
+import { UI_TEXT } from "@/constants/ui";
 
 interface ProposePlanToolCallProps {
   args: ProposePlanToolArgs;
@@ -30,7 +32,7 @@ export const ProposePlanToolCall: React.FC<ProposePlanToolCallProps> = ({
 }) => {
   const { expanded, toggleExpanded } = useToolExpansion(true); // Expand by default
   const [showRaw, setShowRaw] = useState(false);
-  const [copied, setCopied] = useState(false);
+  const { copied, copy } = useClipboard();
 
   // Format: Title as H1 + plan content for "Start Here" functionality
   const startHereContent = `# ${args.title}\n\n${args.plan}`;
@@ -52,9 +54,7 @@ export const ProposePlanToolCall: React.FC<ProposePlanToolCallProps> = ({
 
   const handleCopy = async () => {
     try {
-      await navigator.clipboard.writeText(args.plan);
-      setCopied(true);
-      setTimeout(() => setCopied(false), 2000);
+      await copy(args.plan);
     } catch (err) {
       console.error("Failed to copy:", err);
     }
@@ -151,15 +151,15 @@ export const ProposePlanToolCall: React.FC<ProposePlanToolCallProps> = ({
                       "rgba(136, 136, 136, 0.3)";
                   }}
                 >
-                  {copied ? "✓ Copied" : "Copy"}
+                  {copied ? `✓ ${UI_TEXT.COPIED}` : UI_TEXT.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"
                   )}
                   style={{
-                    color: showRaw ? "var(--color-plan-mode)" : "#888",
+                    color: showRaw ? "var(--color-plan-mode)" : "var(--color-muted)",
                     background: showRaw
                       ? "color-mix(in srgb, var(--color-plan-mode), transparent 90%)"
                       : "transparent",

src/components/ui/button.tsx

@@ -0,0 +1,28 @@
+import * as React from "react"
+import * as TooltipPrimitive from "@radix-ui/react-tooltip"
+
+import { cn } from "@/lib/utils"
+
+const TooltipProvider = TooltipPrimitive.Provider
+
+const Tooltip = TooltipPrimitive.Root
+
+const TooltipTrigger = TooltipPrimitive.Trigger
+
+const TooltipContent = React.forwardRef<
+  React.ElementRef<typeof TooltipPrimitive.Content>,
+  React.ComponentPropsWithoutRef<typeof TooltipPrimitive.Content>
+>(({ className, sideOffset = 4, ...props }, ref) => (
+  <TooltipPrimitive.Content
+    ref={ref}
+    sideOffset={sideOffset}
+    className={cn(
+      "z-50 overflow-hidden rounded-md border bg-popover px-3 py-1.5 text-sm text-popover-foreground shadow-md animate-in fade-in-0 zoom-in-95 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 origin-[--radix-tooltip-content-transform-origin]",
+      className
+    )}
+    {...props}
+  />
+))
+TooltipContent.displayName = TooltipPrimitive.Content.displayName
+
+export { Tooltip, TooltipTrigger, TooltipContent, TooltipProvider }

src/components/ui/tooltip.tsx

@@ -0,0 +1,30 @@
+/**
+ * Centralized timing constants for animations, transitions, and delays.
+ * All values are in milliseconds.
+ */
+export const TIMING = {
+  /** Duration to show "Copied!" feedback after clipboard operations */
+  COPY_FEEDBACK_DURATION: 2000,
+
+  /** Delay before hiding tooltip after mouse leaves trigger */
+  TOOLTIP_HIDE_DELAY: 300,
+
+  /** Delay when mouse leaves tooltip content area */
+  TOOLTIP_LEAVE_DELAY: 100,
+
+  /** Duration for modal animation transitions */
+  MODAL_ANIMATION_DELAY: 200,
+
+  /** Debounce delay for search inputs */
+  SEARCH_DEBOUNCE: 300,
+
+  /** Standard animation duration for UI transitions */
+  ANIMATION_STANDARD: 150,
+
+  /** Fast animation duration */
+  ANIMATION_FAST: 100,
+
+  /** Slow animation duration */
+  ANIMATION_SLOW: 300,
+} as const;
+