apps/renderer/src/components/ui/table.tsx (1)

36-47: Consider extracting long class strings for maintainability.

The class string on line 40 is quite long with many frame-conditional styles. While this is a common pattern in shadcn-style UI libraries, consider extracting the frame-specific styles into a separate variable or using Tailwind's @apply directive in a CSS file for better readability.

That said, this is a stylistic preference and the current implementation is functionally correct.

apps/renderer/src/components/ui/separator.tsx (1)

13-13: The CSS selector for vertical self-stretch is fragile and likely won't work as intended.

The selector not-[[class^='h-']]:not-[[class*='_h-']] checks whether the class attribute string starts with 'h-' or contains '_h-'. Since other classes (e.g., shrink-0) will appear first in the composed className, the [class^='h-'] condition will almost never match—even when a height utility like h-10 is present.

Consider simplifying by always applying self-stretch for vertical orientation and letting explicit height classes override it naturally, or document that consumers should use inline styles / CSS variables for custom heights:

♻️ Suggested simplification

-        "shrink-0 bg-border data-[orientation=horizontal]:h-px data-[orientation=horizontal]:w-full data-[orientation=vertical]:w-px data-[orientation=vertical]:not-[[class^='h-']]:not-[[class*='_h-']]:self-stretch",
+        "shrink-0 bg-border data-[orientation=horizontal]:h-px data-[orientation=horizontal]:w-full data-[orientation=vertical]:h-full data-[orientation=vertical]:w-px",

apps/renderer/src/components/ui/toast.tsx (1)

220-250: Consider extracting shared toast content into a reusable component.

The toast content rendering here (icon, title, description, action button) is nearly identical to lines 128-158 in the Toasts component. Extracting this into a shared ToastContent component would reduce duplication and ensure consistency when making future changes.

♻️ Suggested extraction

// Shared component to use in both Toasts and AnchoredToasts
function ToastContentBody({ toast }: { toast: Toast.ToastObject }) {
  const Icon = toast.type
    ? TOAST_ICONS[toast.type as keyof typeof TOAST_ICONS]
    : null;

  return (
    <Toast.Content className="pointer-events-auto flex items-center justify-between gap-1.5 overflow-hidden px-3.5 py-3 text-sm ...">
      <div className="flex gap-2">
        {Icon && (
          <div
            className="[&>svg]:h-lh [&>svg]:w-4 [&_svg]:pointer-events-none [&_svg]:shrink-0"
            data-slot="toast-icon"
          >
            <Icon className="in-data-[type=loading]:animate-spin ..." />
          </div>
        )}
        <div className="flex flex-col gap-0.5">
          <Toast.Title className="font-medium" data-slot="toast-title" />
          <Toast.Description className="text-muted-foreground" data-slot="toast-description" />
        </div>
      </div>
      {toast.actionProps && (
        <Toast.Action className={buttonVariants({ size: "xs" })} data-slot="toast-action">
          {toast.actionProps.children}
        </Toast.Action>
      )}
    </Toast.Content>
  );
}

apps/renderer/src/components/ui/kbd.tsx (1)

5-26: Prefer Coss UI primitives for consistency.

These custom Kbd/KbdGroup wrappers diverge from the guideline to use Coss UI components (installed via the ShadCN CLI) for consistent styling and Base UI accessibility alignment. If a Coss kbd component exists, consider swapping to it (or document why bespoke wrappers are required).

Based on learnings: Applies to **/*.tsx : Use Coss UI components (https://coss.com/ui) for consistent styling. Install new components using the ShadCN CLI (e.g., bunx --bun shadcnlatest add coss/button). Refer to Base UI docs for accessibility guidelines on primitives.

apps/renderer/src/components/ui/textarea.tsx (1)

7-10: Consider documenting or removing the number type for size.

The size prop accepts "sm" | "default" | "lg" | number, but the internal styling logic (lines 35-38) only handles the string literals. When a number is passed, it's set on data-size but no corresponding styles are applied.

If numeric sizes are intended for custom CSS handling via data-size, consider adding a brief comment documenting this. Otherwise, consider restricting the type to the supported string literals only.

apps/renderer/src/index.css (1)

227-242: Consider using CSS variables for scrollbar colors for consistency.

The scrollbar styling uses hardcoded rgba() values while the rest of the file uses CSS variables. For better theme consistency, consider using the defined tokens:

♻️ Optional: Use CSS variables for scrollbar colors

 ::-webkit-scrollbar-thumb {
-  background: rgba(0, 0, 0, 0.15);
+  background: var(--muted-foreground);
+  opacity: 0.15;
   border-radius: 3px;
 }

 ::-webkit-scrollbar-thumb:hover {
-  background: rgba(0, 0, 0, 0.25);
+  background: var(--muted-foreground);
+  opacity: 0.25;
 }

 .dark ::-webkit-scrollbar-thumb {
-  background: rgba(255, 255, 255, 0.1);
+  background: var(--muted-foreground);
+  opacity: 0.1;
 }

 .dark ::-webkit-scrollbar-thumb:hover {
-  background: rgba(255, 255, 255, 0.18);
+  background: var(--muted-foreground);
+  opacity: 0.18;
 }

Note: Opacity on scrollbar thumbs may have limited browser support; the current approach works reliably.

apps/renderer/src/components/ChatView.tsx (1)

451-456: Minor: Redundant dark: prefixes for transparent and semantic tokens.

bg-transparent is identical in both modes, and bg-accent is a semantic token that already adapts to the theme. The dark: prefixes are unnecessary here.

♻️ Simplified styling

 <SelectTrigger
   size="sm"
-  className="w-auto min-w-0 border-0 shadow-none bg-transparent dark:bg-transparent before:hidden data-[popup-open]:bg-accent dark:data-[popup-open]:bg-accent"
+  className="w-auto min-w-0 border-0 shadow-none bg-transparent before:hidden data-[popup-open]:bg-accent"
 >

Apply to both SelectTrigger instances (lines 451-456 and 471-476).

Also applies to: 471-476