@vertesia/ui 1.5.0-dev.20260901.052906Z → 1.5.0-dev.20260910.051115Z

package/src/core/components/shadcn/command.tsx

@@ -27,7 +27,7 @@ const CommandDialog = ({ children, ...props }: DialogProps) => {
     return (
         <Dialog {...props}>
             <DialogContent className="shadow-lg p-0 overflow-hidden">
-                <Command className="[&_[cmdk-group]]:px-2 [&_[cmdk-item]]:px-2 [&_[cmdk-group-heading]]:px-2 [&_[cmdk-item]]:py-3 [&_[cmdk-group]:not([hidden])_~[cmdk-group]]:pt-0 [&_[cmdk-input-wrapper]_svg]:w-5 [&_[cmdk-item]_svg]:w-5 [&_[cmdk-input-wrapper]_svg]:h-5 [&_[cmdk-input]]:h-12 [&_[cmdk-item]_svg]:h-5 [&_[cmdk-group-heading]]:font-medium [&_[cmdk-group-heading]]:text-muted-foreground">
+                <Command className="[&_[cmdk-group]]:px-2 [&_[cmdk-item]]:px-2 [&_[cmdk-group-heading]]:px-2 [&_[cmdk-item]]:py-3 [&_[cmdk-group]:not([hidden])_~[cmdk-group]]:pt-0 [&_[cmdk-input-wrapper]_svg]:w-5 [&_[cmdk-item]_svg]:w-5 [&_[cmdk-input-wrapper]_svg]:h-5 [&_[cmdk-input]]:h-12 [&_[cmdk-item]_svg]:h-5 [&_[cmdk-group-heading]]:font-medium [&_[cmdk-group-heading]]:text-muted">
                     {children}
                 </Command>
             </DialogContent>
@@ -46,7 +46,7 @@ const CommandInput: React.ForwardRefExoticComponent<
                 ref={ref}
                 className={cn(
                     'focus:ring-0',
-                    'border-0 flex h-8 w-full rounded-md bg-transparent py-3 text-sm outline-none placeholder:text-muted-foreground disabled:cursor-not-allowed disabled:opacity-50',
+                    'border-0 flex h-8 w-full rounded-md bg-transparent py-3 text-sm outline-none placeholder:text-muted disabled:cursor-not-allowed disabled:opacity-50',
                     className,
                 )}
                 {...props}
@@ -86,7 +86,7 @@ const CommandGroup: React.ForwardRefExoticComponent<
             ref={ref}
             className={cn(
                 'overflow-y-auto overflow-x-hidden p-1 text-foreground',
-                '[&_[cmdk-group-heading]]:px-2 [&_[cmdk-group-heading]]:py-1.5 [&_[cmdk-group-heading]]:text-xs [&_[cmdk-group-heading]]:font-medium [&_[cmdk-group-heading]]:text-muted-foreground',
+                '[&_[cmdk-group-heading]]:px-2 [&_[cmdk-group-heading]]:py-1.5 [&_[cmdk-group-heading]]:text-xs [&_[cmdk-group-heading]]:font-medium [&_[cmdk-group-heading]]:text-muted',
                 className,
             )}
             {...props}
@@ -115,7 +115,7 @@ const CommandItem: React.ForwardRefExoticComponent<
         <CommandPrimitive.Item
             ref={ref}
             className={cn(
-                "hover:bg-muted cursor-pointer relative flex cursor-default gap-2 select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none data-[disabled=true]:pointer-events-none data-[selected='true']:bg-accent data-[selected=true]:text-accent-foreground data-[disabled=true]:opacity-50 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0",
+                "hover:bg-muted cursor-pointer relative flex cursor-default gap-2 select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none data-[disabled=true]:pointer-events-none data-[selected='true']:bg-muted data-[selected=true]:text-muted data-[disabled=true]:opacity-50 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0",
                 className,
             )}
             {...props}
@@ -126,7 +126,7 @@ const CommandItem: React.ForwardRefExoticComponent<
 CommandItem.displayName = CommandPrimitive.Item.displayName;
 
 const CommandShortcut = ({ className, ...props }: React.HTMLAttributes<HTMLSpanElement>) => {
-    return <span className={cn('ms-auto text-xs tracking-widest text-muted-foreground', className)} {...props} />;
+    return <span className={cn('ms-auto text-xs tracking-widest text-muted', className)} {...props} />;
 };
 CommandShortcut.displayName = 'CommandShortcut';
 

package/src/core/components/shadcn/filters/DynamicLabel.tsx

@@ -38,7 +38,7 @@ export function DynamicLabel({ value, labelRenderer, fallbackLabel }: Readonly<D
     }, [value, labelRenderer, fallbackLabel]);
 
     if (isLoading) {
-        return <span className="text-muted-foreground">Loading...</span>;
+        return <span className="text-muted">Loading...</span>;
     }
 
     return <>{label}</>;

package/src/core/components/shadcn/filters/comboBox/DateCombobox.tsx

@@ -46,7 +46,7 @@ export const DateCombobox = ({
                 return (
                     <span className="flex items-center gap-1.5">
                         <span className="font-medium">{dayjs(dateRange[0]).format('MMMM DD, YYYY')}</span>
-                        <span className="text-xs text-muted-foreground">-</span>
+                        <span className="text-xs text-muted">-</span>
                         <span className="font-medium">{dayjs(dateRange[1]).format('MMMM DD, YYYY')}</span>
                     </span>
                 );
@@ -54,11 +54,11 @@ export const DateCombobox = ({
                 return (
                     <span className="flex items-center gap-1.5">
                         <span className="font-medium">{dayjs(dateRange[0]).format('MMMM DD, YYYY')}</span>
-                        <span className="text-xs text-muted-foreground">- Select end</span>
+                        <span className="text-xs text-muted">- Select end</span>
                     </span>
                 );
             } else {
-                return <span className="text-muted-foreground">{t('filter.selectRange')}</span>;
+                return <span className="text-muted">{t('filter.selectRange')}</span>;
             }
         } else {
             return selectedDate ? dayjs(selectedDate).format('MMMM DD, YYYY') : 'Pick a date';

package/src/core/components/shadcn/input.tsx

@@ -16,11 +16,11 @@ const variants = cva('', {
         },
         variant: {
             default:
-                'flex w-full rounded-md border border-input bg-background ring-offset-background file:border-0 file:bg-transparent file:text-sm file:font-medium file:text-foreground placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-1 ring-inset focus-visible:ring-ring disabled:cursor-not-allowed disabled:opacity-50',
+                'flex w-full rounded-md border border-input bg-background ring-offset-background file:border-0 file:bg-transparent file:text-sm file:font-medium file:text-foreground placeholder:text-muted focus-visible:outline-none focus-visible:ring-1 ring-inset focus-visible:ring-ring disabled:cursor-not-allowed disabled:opacity-50',
             unstyled: 'block m-0 p-0 w-full border-0 focus:outline-hidden focus:ring-0 bg-transparent',
             noPadding:
-                'block rounded-md border-0 bg-background shadow-2xs ring-1 ring-inset ring-ring placeholder:text-muted-foreground focus:ring-2 focus:ring-inset focus:ring-ring ring-offset-background',
-            legacy: 'py-1.5 block rounded-md border-0 bg-background shadow-2xs ring-1 ring-inset ring-ring placeholder:text-muted-foreground focus:ring-2 focus:ring-inset focus:ring-ring ring-offset-background',
+                'block rounded-md border-0 bg-background shadow-2xs ring-1 ring-inset ring-ring placeholder:text-muted focus:ring-2 focus:ring-inset focus:ring-ring ring-offset-background',
+            legacy: 'py-1.5 block rounded-md border-0 bg-background shadow-2xs ring-1 ring-inset ring-ring placeholder:text-muted focus:ring-2 focus:ring-inset focus:ring-ring ring-offset-background',
         },
     },
     defaultVariants: {

package/src/core/components/shadcn/modal/ConfirmModal.tsx

@@ -65,15 +65,15 @@ export function ConfirmModal({
     return (
         <Modal isOpen={isOpen} onClose={onCancel} description="Confirm Modal">
             <div className="sm:flex sm:items-start p-2">
-                <div className="mx-auto flex h-12 w-12 shrink-0 items-center justify-center rounded-full bg-red-100 sm:mx-0 sm:h-10 sm:w-10">
-                    <TriangleAlert className="size-6 text-red-600" aria-hidden="true" />
+                <div className="mx-auto flex h-12 w-12 shrink-0 items-center justify-center rounded-full bg-destructive sm:mx-0 sm:h-10 sm:w-10">
+                    <TriangleAlert className="size-6 text-destructive" aria-hidden="true" />
                 </div>
                 <div className="mt-3 text-center sm:ms-4 sm:mt-0 sm:text-start">
                     <ModalTitle className="leading-6" show>
                         {title}
                     </ModalTitle>
                     <div className="mt-2">
-                        <div className="prose text-sm text-gray-500">{content}</div>
+                        <div className="prose text-sm text-muted">{content}</div>
                     </div>
                 </div>
             </div>

package/src/core/components/shadcn/modal/dialog.tsx

@@ -91,7 +91,7 @@ export function Modal({
                                 <Button
                                     variant="outline"
                                     title="Close"
-                                    className="data-[state=open]:bg-accent opacity-70 hover:opacity-100 rounded-sm focus:outline-none focus:ring-2 focus:ring-ring ring-offset-background focus:ring-offset-2 data-[state=open]:text-muted-foreground transition-opacity disabled:pointer-events-none"
+                                    className="data-[state=open]:bg-muted opacity-70 hover:opacity-100 rounded-sm focus:outline-none focus:ring-2 focus:ring-ring ring-offset-background focus:ring-offset-2 data-[state=open]:text-muted transition-opacity disabled:pointer-events-none"
                                 >
                                     <X className="size-4" />
                                 </Button>
@@ -133,9 +133,7 @@ export const ModalTitle = ({
         >
             {children}
             {description && (
-                <DialogDescription className="text-sm !font-normal text-muted-foreground pb-2">
-                    {description}
-                </DialogDescription>
+                <DialogDescription className="text-sm !font-normal text-muted pb-2">{description}</DialogDescription>
             )}
         </DialogTitle>
     );

package/src/core/components/shadcn/overflowTabs.tsx

@@ -14,13 +14,13 @@ export type OverflowTabsVariant = 'tabs' | 'pills';
 const VARIANT_CLASSES: Record<OverflowTabsVariant, { base: string; active: string; inactive: string; icon: string }> = {
     tabs: {
         base: 'flex items-center border-b-2 px-2 py-1.5 text-sm font-medium whitespace-nowrap cursor-pointer shrink-0',
-        inactive: 'border-transparent text-muted-foreground hover:border-border hover:text-foreground',
+        inactive: 'border-transparent text-muted hover:border-border hover:text-foreground',
         active: 'border-primary text-primary',
         icon: 'ms-1 size-4',
     },
     pills: {
         base: 'flex items-center rounded-md px-2 py-1 text-xs font-medium whitespace-nowrap cursor-pointer shrink-0',
-        inactive: 'text-muted-foreground hover:bg-muted/60',
+        inactive: 'text-muted hover:bg-muted/60',
         active: 'bg-muted text-foreground',
         icon: 'ms-0.5 size-3.5',
     },

package/src/core/components/shadcn/popover.tsx

@@ -102,7 +102,7 @@ const PopoverContent = React.forwardRef<
                 onMouseLeave={() => handleHover(hover, setOpen, 'leave')}
                 // onClick={() => {setOpen(false)}}
                 className={cn(
-                    'z-50 w-72 rounded-md border-popover bg-popover text-popover-foreground ring-1 ring-gray-200 dark:ring-slate-700 shadow-md focus:outline-none animate-in',
+                    'z-50 w-72 rounded-md border-popover bg-popover text-popover-foreground ring-1 ring-border shadow-md focus:outline-none animate-in',
                     // rtl-ok: Radix data-side values are physical popper sides; slide direction follows the side.
                     'data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-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',
                     className,

package/src/core/components/shadcn/radioGroup.tsx

@@ -8,7 +8,7 @@ function RadioGroupItem({ className, ...props }: React.ComponentProps<typeof Rad
         <RadioGroupPrimitive.Item
             data-slot="radio-group-item"
             className={cn(
-                'border-input dark:bg-input/30 data-checked:bg-primary data-checked:text-primary-foreground dark:data-checked:bg-primary data-checked:border-primary aria-invalid:aria-checked:border-primary aria-invalid:border-destructive focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 dark:aria-invalid:border-destructive/50 flex size-4 rounded-full focus-visible:ring-3 aria-invalid:ring-3 group/radio-group-item peer relative aspect-square shrink-0 border outline-none after:absolute after:-inset-x-3 after:-inset-y-2 disabled:cursor-not-allowed disabled:opacity-50',
+                'border-input dark:bg-input/30 data-checked:bg-primary data-checked:text-primary-foreground data-checked:border-primary aria-invalid:aria-checked:border-primary aria-invalid:border-destructive focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 dark:aria-invalid:border-destructive/50 flex size-4 rounded-full focus-visible:ring-3 aria-invalid:ring-3 group/radio-group-item peer relative aspect-square shrink-0 border outline-none after:absolute after:-inset-x-3 after:-inset-y-2 disabled:cursor-not-allowed disabled:opacity-50',
                 className,
             )}
             {...props}
@@ -37,7 +37,7 @@ export abstract class RadioGroupAdapter<T> {
         return undefined;
     }
     selectedClassName(_item: T): string {
-        return 'border-accent-foreground';
+        return 'border-muted';
     }
 }
 
@@ -72,7 +72,7 @@ function RadioGroup<T = RadioGroupOption>({ onSelect, selected, options, adapter
                         key={getId(option)}
                         value={getId(option)}
                         className={cn(
-                            'relative block w-full cursor-pointer rounded-lg border border-border bg-accent px-6 py-4 shadow-2xs text-start',
+                            'relative block w-full cursor-pointer rounded-lg border border-border bg-muted px-6 py-4 shadow-2xs text-start',
                             'focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring',
                             'sm:flex sm:justify-between',
                             isSelected && getSelectedClass(option),
@@ -80,10 +80,8 @@ function RadioGroup<T = RadioGroupOption>({ onSelect, selected, options, adapter
                     >
                         <span className="flex items-center">
                             <span className="flex flex-col text-sm">
-                                <span className="font-medium text-text">{getLabel(option)}</span>
-                                {getDescription(option) && (
-                                    <span className="text-muted-foreground">{getDescription(option)}</span>
-                                )}
+                                <span className="font-medium text-foreground">{getLabel(option)}</span>
+                                {getDescription(option) && <span className="text-muted">{getDescription(option)}</span>}
                             </span>
                         </span>
                     </RadioGroupPrimitive.Item>

package/src/core/components/shadcn/selectBox.tsx

@@ -329,7 +329,7 @@ export function SelectBox<T = unknown>({
                         type="button"
                         onClick={addNew}
                         className={clsx(
-                            'w-full text-start gap-x-2 px-2 py-1.5 truncate group flex rounded-md items-center text-sm cursor-pointer hover:bg-accent bg-transparent border-0',
+                            'w-full text-start gap-x-2 px-2 py-1.5 truncate group flex rounded-md items-center text-sm cursor-pointer hover:bg-muted bg-transparent border-0',
                         )}
                     >
                         <SquarePlus size={16} strokeWidth={1.25} absoluteStrokeWidth />

package/src/core/components/shadcn/tabs.tsx

@@ -246,7 +246,9 @@ const TabsBar = ({ className, sticky, direction }: TabsBarProps) => {
                 className={cn(
                     fullWidth ? 'w-full' : '',
                     sticky && 'sticky top-0 bg-background z-10',
-                    direction === 'vertical' ? 'flex-col items-start' : 'flex-row',
+                    // TabsList's `border-b -mb-px` is the rail under a ROW of tabs. In vertical
+                    // mode it renders as a stray line beneath the column, so drop it here only.
+                    direction === 'vertical' ? 'flex-col items-start border-b-0 mb-0' : 'flex-row',
                     responsive ? 'hidden lg:flex' : '',
                     className,
                 )}
@@ -341,7 +343,7 @@ const TabsTrigger: React.ForwardRefExoticComponent<
                     variant === 'tabs'
                         ? cn(
                               'border-b-2 px-2 py-1.5 text-sm font-medium whitespace-nowrap cursor-pointer',
-                              'border-transparent text-muted-foreground hover:border-border hover:text-foreground',
+                              'border-transparent text-muted hover:border-border hover:text-foreground',
                               'data-[state=active]:border-primary data-[state=active]:text-primary',
                               'disabled:pointer-events-none disabled:opacity-50',
                           )

package/src/core/components/styles.ts

@@ -1,6 +1,6 @@
 const INPUT_UNSTYLED = 'block m-0 p-0 w-full border-0 focus:outline-hidden focus:ring-0 bg-transparent';
 const INPUT_NO_PADDING =
-    'rounded-md text-sm flex w-full rounded-md border border-input bg-background ring-offset-background file:border-0 file:bg-transparent file:text-sm file:font-medium file:text-foreground placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-1 ring-inset focus-visible:ring-ring disabled:cursor-not-allowed disabled:opacity-50';
+    'rounded-md text-sm flex w-full rounded-md border border-input bg-background ring-offset-background file:border-0 file:bg-transparent file:text-sm file:font-medium file:text-foreground placeholder:text-muted focus-visible:outline-none focus-visible:ring-1 ring-inset focus-visible:ring-ring disabled:cursor-not-allowed disabled:opacity-50';
 const INPUT = `${INPUT_NO_PADDING} py-1.5`;
 
 const Styles = {

package/src/core/components/table/index.tsx

@@ -4,7 +4,7 @@ import type React from 'react';
 const defaultTableCass = `
 divide-y divide-border
 [&>tbody]:divide-y [&>tbody]:divide-border
-[&_th]:text-start [&_th]:px-3 [&_th]:py-3.5 [&_th]:text-sm [&_th]:font-normal [&_th]:text-muted-foreground
+[&_th]:text-start [&_th]:px-3 [&_th]:py-3.5 [&_th]:text-sm [&_th]:font-normal [&_th]:text-muted
 [&_td]:px-3 [&_td]:py-4 [&_td]:text-sm
 `;
 

package/src/core/hooks/useFetch.test.ts

@@ -0,0 +1,20 @@
+import { act, renderHook, waitFor } from '@testing-library/react';
+import { describe, expect, it, vi } from 'vitest';
+import { useFetch } from './useFetch';
+
+describe('useFetch recovery', () => {
+    it('clears a previous error when refetching and after success', async () => {
+        const fetcher = vi
+            .fn<() => Promise<string>>()
+            .mockRejectedValueOnce(new Error('Unavailable'))
+            .mockResolvedValueOnce('recovered');
+        const { result } = renderHook(() => useFetch(fetcher, []));
+        await waitFor(() => expect(result.current.error?.message).toBe('Unavailable'));
+        await act(async () => {
+            await result.current.refetch();
+        });
+        expect(result.current.error).toBeUndefined();
+        expect(result.current.data).toBe('recovered');
+        expect(result.current.isLoading).toBe(false);
+    });
+});

package/src/core/hooks/useFetch.ts

@@ -30,9 +30,11 @@ export function useFetch<T = unknown>(fetcher: () => Promise<T>, opts?: FetchOpt
         const currentOptions = optionsRef.current;
         currentOptions.start?.();
         setIsLoading(true);
+        setError(undefined);
         return fetcherRef
             .current()
             .then((result: T) => {
+                setError(undefined);
                 setData(result);
                 currentOptions.onSuccess?.(result);
             })

package/src/css/base.css

@@ -9,7 +9,7 @@
     }
 
     body {
-        @apply bg-background text-foreground selection:bg-blue-300 selection:text-blue-900;
+        @apply bg-background text-foreground selection:bg-info selection:text-info;
         min-height: 100%;
         margin: 0;
         padding: 0;

package/src/css/color.css

@@ -9,6 +9,7 @@
     --tooltips: oklch(97% 0.014 254.604); /* Light Blue */
 
     --primary: oklch(44.72% 0.193316 261.0044); /* Dark Blue */
+    --primary-foreground: oklch(1 0 0); /* White - text on the --primary surface */
     --primary-background: oklch(99.26% 0.0105 196.99); /* Light Blue */
 
     --secondary: oklch(0.205 0 0);
@@ -63,6 +64,7 @@
     --preprod: oklch(63.89% 0.103 201.59);
     --preview: oklch(46.95% 0.233 303.17);
     --development: oklch(44.30% 0.193 261.11);
+    --production: oklch(50.5% 0.213 27.518); /* Dark Red */
 }
 
 .dark {
@@ -77,6 +79,7 @@
     --tooltips: oklch(70.7% 0.165 254.624); /* Mid Blue */
 
     --primary: oklch(54% 0.1735 260.17); /* Mid Blue (darkened to clear AA on white) */
+    --primary-foreground: oklch(1 0 0); /* White - text on the --primary surface */
     --primary-background: oklch(1 0 0); /* White */
 
     --secondary: oklch(0.985 0 0);
@@ -131,4 +134,5 @@
     --preprod: oklch(63.89% 0.103 201.59);
     --preview: oklch(46.95% 0.233 303.17);
     --development: oklch(44.30% 0.193 261.11);
+    --production: oklch(50.5% 0.213 27.518); /* Dark Red */
 }

package/src/css/theme.css

@@ -75,6 +75,7 @@
     --color-preprod: var(--preprod);
     --color-preview: var(--preview);
     --color-development: var(--development);
+    --color-production: var(--production);
 
     --font-sans:
         Inter, ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol",

package/src/css/typography.css

@@ -45,11 +45,11 @@
 }
 
 .vprose blockquote {
-    @apply border-s-4 border-muted/30 dark:border-muted ps-4 italic text-muted my-3;
+    @apply border-s-4 border-muted/30 ps-4 italic text-muted my-3;
 }
 
 .vprose hr {
-    @apply border-muted/30 dark:border-muted my-4;
+    @apply border-muted/30 my-4;
 }
 
 .vprose h1 {

package/src/features/activity-doc/ActivityDoc.tsx

@@ -30,7 +30,7 @@ interface PropertySignatureProps {
 function PropertySignature({ property }: PropertySignatureProps) {
     return (
         <div className="flex items-center gap-x-2">
-            <div className="font-semibold text-gray-600">{property.name}</div>
+            <div className="font-semibold text-muted">{property.name}</div>
             {property.optional && <Badge>optional</Badge>}
             <Badge>{property.type.value}</Badge>
         </div>
@@ -41,7 +41,7 @@ interface ActivitiesDocProps {
 }
 export function ActivitiesDoc({ activities }: ActivitiesDocProps) {
     return (
-        <div className="flex flex-col gap-y-4 divide-y divide-gray-200">
+        <div className="flex flex-col gap-y-4 divide-y divide-border">
             {activities.map((activity) => (
                 <ActivityDoc key={activity.name} activity={activity} />
             ))}
@@ -55,8 +55,8 @@ interface ActivitySectionTitleProps {
 }
 function ActivitySectionTitle({ code, children }: ActivitySectionTitleProps) {
     return (
-        <div className="flex gap-2 items-center border-b border-b-gray-200 mb-2">
-            <div className="text-lg font-medium text-gray-900 py-2 ">{children}</div>
+        <div className="flex gap-2 items-center border-b border-b-border mb-2">
+            <div className="text-lg font-medium text-foreground py-2 ">{children}</div>
             {code && (
                 <div>
                     <Badge>{code}</Badge>
@@ -77,11 +77,11 @@ export function ActivityDoc({ activity, headingClass, headingRef }: ActivityDocP
             <div className="pb-4">
                 <Badge>{activity.name}</Badge>
             </div>
-            {activity.doc && <div className="text-gray-700 pb-2">{activity.doc}</div>}
+            {activity.doc && <div className="text-foreground pb-2">{activity.doc}</div>}
 
             <div className="pb-4">
                 <ActivitySectionTitle code={activity.paramsType}>Parameters</ActivitySectionTitle>
-                <div className="divide-y divide-gray-100">
+                <div className="divide-y divide-border">
                     {activity.params.map((prop) => (
                         <PropertyDetails key={prop.name} property={prop} />
                     ))}
@@ -109,7 +109,7 @@ function PropertyDetails({ property, className }: { className?: string; property
     return (
         <div className={clsx('py-2', className)}>
             <PropertySignature property={property} />
-            {property.doc && <div className="text-gray-700 text-sm pt-2">{property.doc}</div>}
+            {property.doc && <div className="text-foreground text-sm pt-2">{property.doc}</div>}
             {expandable && <div className="my-2 overflow-hidden">{expandable}</div>}
         </div>
     );
@@ -133,9 +133,9 @@ function EnumValuesPanel({ values }: EnumValuesPanelProps) {
 function ObjectMembersPanel({ members }: { members: ActivityPropertyDefinition[] }) {
     return (
         <ExpandablePanel
-            className="rounded-md border border-gray-200"
+            className="rounded-md border border-border"
             button={(isOn) => (
-                <div className="px-4 py-2 flex items-center gap-x-2 text-sm font-medium hover:text-blue-600">
+                <div className="px-4 py-2 flex items-center gap-x-2 text-sm font-medium hover:text-info">
                     <ExpandIcon isOpen={isOn} />
                     {isOn ? <div>Hide child properties</div> : <div>Show child properties</div>}
                 </div>
@@ -147,7 +147,7 @@ function ObjectMembersPanel({ members }: { members: ActivityPropertyDefinition[]
 
 function NestedPropertiesDetails({ properties }: { properties: ActivityPropertyDefinition[] }) {
     return (
-        <div className="border-s-2 border-s-blue-200 flex flex-col divide-y divide-gray-100 border-t border-t-gray-200">
+        <div className="border-s-2 border-s-info flex flex-col divide-y divide-border border-t border-t-border">
             {properties.map((prop) => (
                 <PropertyDetails key={prop.name} property={prop} className="px-4 py-2" />
             ))}
@@ -192,7 +192,7 @@ function ExpandIcon({ isOpen }: ExpandIconProps) {
     return (
         <AnimatePresence propagate mode="wait">
             <motion.div
-                className="font-mono font-semibold text-gray-400 text-lg"
+                className="font-mono font-semibold text-muted text-lg"
                 key="closeIcon"
                 initial={{ rotate: 0 }}
                 animate={{ rotate: isOpen ? 45 : 0 }}

package/src/features/agent/chat/AgentChart.tsx

@@ -63,7 +63,7 @@ export const AgentChart = memo(
         }
 
         return (
-            <div className="my-5 rounded-lg border border-amber-200 bg-amber-50 p-4 text-sm text-amber-900 dark:border-amber-900 dark:bg-amber-950 dark:text-amber-200">
+            <div className="my-5 rounded-lg border border-attention bg-attention p-4 text-sm text-attention">
                 Recharts chart rendering has been retired. Use a Vega-Lite chart spec (
                 <code>library: &quot;vega-lite&quot;</code> with <code>spec</code>).
             </div>

package/src/features/agent/chat/AgentRightPanel.tsx

@@ -26,7 +26,7 @@ import {
 import React, { useCallback, useMemo, useState } from 'react';
 import { ArtifactsTab } from './ArtifactsTab.js';
 import { BrowserUseWidget, getLatestBrowserUseByWorkstream } from './BrowserUseWidget.js';
-import { DocumentPanel } from './DocumentPanel.js';
+import { DocumentsTab } from './DocumentsTab.js';
 import InlineSlidingPlanPanel from './ModernAgentOutput/InlineSlidingPlanPanel';
 import { getConversationUrl } from './ModernAgentOutput/utils.js';
 import type { OpenDocument } from './types/document.js';
@@ -370,8 +370,7 @@ export interface AgentRightPanelProps {
     // Documents
     openDocuments?: OpenDocument[];
     activeDocumentId?: string | null;
-    onSelectDocument?: (id: string) => void;
-    onCloseDocument?: (id: string) => void;
+    onSelectDocument?: (id: string | null) => void;
     onUpdateDocumentTitle?: (id: string, title: string) => void;
     docRefreshKey?: number;
     runId?: string;
@@ -415,7 +414,6 @@ function AgentRightPanelComponent({
     openDocuments = [],
     activeDocumentId,
     onSelectDocument,
-    onCloseDocument,
     onUpdateDocumentTitle,
     docRefreshKey = 0,
     runId,
@@ -533,13 +531,11 @@ function AgentRightPanelComponent({
             ),
             content: withTabBoundary(
                 t('agent.documents'),
-                openDocuments.length > 0 && onSelectDocument && onCloseDocument ? (
-                    <DocumentPanel
-                        isOpen={true}
+                openDocuments.length > 0 && onSelectDocument ? (
+                    <DocumentsTab
                         documents={openDocuments}
                         activeDocumentId={activeDocumentId ?? null}
                         onSelectDocument={onSelectDocument}
-                        onCloseDocument={onCloseDocument}
                         onUpdateDocumentTitle={onUpdateDocumentTitle}
                         refreshKey={docRefreshKey}
                         runId={runId}

package/src/features/agent/chat/AskUserWidget.tsx

@@ -78,22 +78,22 @@ export interface AskUserWidgetProps {
 const VARIANT_STYLES = {
     default: {
         border: 'border-s-attention',
-        bg: 'bg-amber-50 dark:bg-amber-900/20',
+        bg: 'bg-attention',
         icon: 'text-attention',
     },
     warning: {
         border: 'border-s-destructive',
-        bg: 'bg-red-50 dark:bg-red-900/20',
+        bg: 'bg-destructive',
         icon: 'text-destructive',
     },
     info: {
         border: 'border-s-info',
-        bg: 'bg-blue-50 dark:bg-blue-900/20',
+        bg: 'bg-info',
         icon: 'text-info',
     },
     success: {
         border: 'border-s-success',
-        bg: 'bg-green-50 dark:bg-green-900/20',
+        bg: 'bg-success',
         icon: 'text-success',
     },
 };
@@ -382,14 +382,12 @@ export function AskUserWidget({
                         <div className="min-w-0 flex-1">
                             <div className={SCROLLABLE_PROMPT_CLASS}>
                                 <div
-                                    className={`agent-ask-question prose prose-sm dark:prose-invert max-w-none text-gray-900 dark:text-gray-100 ${questionClassName || ''}`}
+                                    className={`agent-ask-question prose prose-sm dark:prose-invert max-w-none text-foreground ${questionClassName || ''}`}
                                 >
                                     <MarkdownRenderer>{question}</MarkdownRenderer>
                                 </div>
                                 {description && (
-                                    <p
-                                        className={`mt-1 text-sm text-gray-600 dark:text-gray-400 ${descriptionClassName || ''}`}
-                                    >
+                                    <p className={`mt-1 text-sm text-muted ${descriptionClassName || ''}`}>
                                         {description}
                                     </p>
                                 )}
@@ -410,8 +408,8 @@ export function AskUserWidget({
                                         className={`flex items-start gap-3 px-4 py-3 rounded-lg cursor-pointer transition-colors
                                             ${
                                                 selectedOptions.has(option.id)
-                                                    ? 'bg-blue-50 dark:bg-blue-900/30 border border-blue-300 dark:border-blue-700'
-                                                    : 'bg-white dark:bg-gray-800 border border-gray-200 dark:border-gray-700 hover:bg-gray-50 dark:hover:bg-gray-700'
+                                                    ? 'bg-info border border-info'
+                                                    : 'bg-white dark:bg-muted border border-border hover:bg-muted'
                                             }
                                             ${isLoading ? 'opacity-50 cursor-not-allowed' : ''}`}
                                     >
@@ -420,15 +418,15 @@ export function AskUserWidget({
                                             checked={selectedOptions.has(option.id)}
                                             onChange={() => toggleOption(option.id)}
                                             disabled={isLoading}
-                                            className="mt-0.5 w-4 h-4 rounded border-gray-300 text-blue-600 focus:ring-blue-500 dark:border-gray-600 dark:bg-gray-700"
+                                            className="mt-0.5 w-4 h-4 rounded border-border text-info focus:ring-info dark:bg-muted"
                                         />
                                         <div className="flex-1 overflow-hidden">
-                                            <div className="flex items-center gap-2 text-sm font-medium text-gray-900 dark:text-gray-100 break-words">
+                                            <div className="flex items-center gap-2 text-sm font-medium text-foreground break-words">
                                                 {option.icon}
                                                 <span className="break-words">{option.label}</span>
                                             </div>
                                             {option.description && (
-                                                <div className="mt-1 text-sm text-gray-500 dark:text-gray-400 break-words whitespace-pre-wrap">
+                                                <div className="mt-1 text-sm text-muted break-words whitespace-pre-wrap">
                                                     {option.description}
                                                 </div>
                                             )}
@@ -458,26 +456,24 @@ export function AskUserWidget({
                                         key={option.id}
                                         onClick={() => onSelect?.(option.id)}
                                         disabled={isLoading}
-                                        className={`w-full h-auto whitespace-normal text-start px-4 py-3 rounded-lg border border-gray-200 dark:border-gray-700
-                                            bg-white dark:bg-gray-800
-                                            hover:bg-gray-50 dark:hover:bg-gray-700 hover:border-gray-300 dark:hover:border-gray-600
-                                            focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-1
+                                        className={`w-full h-auto whitespace-normal text-start px-4 py-3 rounded-lg border border-border
+                                            bg-white dark:bg-muted
+                                            hover:bg-muted hover:border-border
+                                            focus:outline-none focus:ring-2 focus:ring-info focus:ring-offset-1
                                             transition-colors
                                             ${isLoading ? 'opacity-50 cursor-not-allowed' : 'cursor-pointer'}
                                             ${buttonClassName || ''}`}
                                     >
                                         <div className="flex items-start gap-3">
                                             {option.icon && (
-                                                <span className="flex-shrink-0 mt-0.5 text-gray-500 dark:text-gray-400">
-                                                    {option.icon}
-                                                </span>
+                                                <span className="flex-shrink-0 mt-0.5 text-muted">{option.icon}</span>
                                             )}
                                             <div className="flex-1 overflow-hidden">
-                                                <div className="font-medium text-sm text-gray-900 dark:text-gray-100 break-words text-center">
+                                                <div className="font-medium text-sm text-foreground break-words text-center">
                                                     {option.label}
                                                 </div>
                                                 {option.description && (
-                                                    <div className="mt-1 text-sm text-gray-500 dark:text-gray-400 break-words whitespace-pre-wrap">
+                                                    <div className="mt-1 text-sm text-muted break-words whitespace-pre-wrap">
                                                         {option.description}
                                                     </div>
                                                 )}
@@ -502,7 +498,7 @@ export function AskUserWidget({
                                 onKeyDown={handleKeyDown}
                                 placeholder={resolvedPlaceholder}
                                 disabled={isLoading}
-                                className={`flex-1 px-3 py-2 text-sm border border-gray-300 dark:border-gray-600 rounded-md bg-white dark:bg-gray-800 focus:ring-2 focus:ring-blue-500 focus:border-transparent ${inputClassName || ''}`}
+                                className={`flex-1 px-3 py-2 text-sm border border-border rounded-md bg-white dark:bg-muted focus:ring-2 focus:ring-info focus:border-transparent ${inputClassName || ''}`}
                             />
                             <Button
                                 size="sm"