@nextclaw/ui 0.26.2 → 0.26.4

package/src/features/chat/features/session/components/chat-sidebar-session-list.tsx

@@ -1,5 +1,6 @@
-import type { ReactNode } from "react";
-import { MessageSquareText } from "lucide-react";
+import { useState, type ReactNode } from "react";
+import { ChatCollapsibleContent } from "@nextclaw/agent-chat-ui";
+import { ChevronRight, MessageSquareText } from "lucide-react";
 import type { NcpSessionListItemView } from "@/features/chat/features/ncp/hooks/use-ncp-session-list-view";
 import type {
   ChatSidebarDateGroup,
@@ -8,6 +9,7 @@ import type {
 import { ChatSidebarProjectGroups } from "@/features/chat/features/session/components/chat-sidebar-project-groups";
 import type { ChatSessionTypeOption } from "@/features/chat/features/session-type/utils/chat-session-type.utils";
 import { t } from "@/shared/lib/i18n";
+import { cn } from "@/shared/lib/utils";
 
 type SessionTypeOption = ChatSessionTypeOption;
 
@@ -32,6 +34,41 @@ function ChatSidebarEmptyState({ label }: { label: string }) {
   );
 }
 
+function ChatSidebarSessionGroup({ group, variant, renderSessionItem }: {
+  group: ChatSidebarDateGroup;
+  variant: 'desktop' | 'mobile';
+  renderSessionItem: ChatSidebarSessionListProps['renderSessionItem'];
+}) {
+  const [open, setOpen] = useState(true);
+  return (
+    <div>
+      <button
+        type="button"
+        aria-expanded={open}
+        onClick={() => setOpen((value) => !value)}
+        className={cn(
+          'group/session-heading flex w-full cursor-pointer items-center justify-between gap-2 rounded-xl text-left text-xs font-medium text-muted-foreground outline-none transition-colors duration-base hover:bg-[var(--interaction-hover)] hover:text-foreground',
+          variant === 'mobile' ? 'min-h-9 px-4' : 'min-h-7 px-2',
+        )}
+      >
+        <span className="truncate">{group.label}</span>
+        <ChevronRight
+          aria-hidden="true"
+          className={cn(
+            'h-3 w-3 shrink-0 opacity-0 transition-[opacity,transform] duration-200 group-hover/session-heading:opacity-100 motion-reduce:transition-none',
+            open && 'rotate-90',
+          )}
+        />
+      </button>
+      <ChatCollapsibleContent open={open}>{() => (
+        <div className={variant === 'mobile' ? undefined : 'space-y-0.5'}>
+          {group.items.map(renderSessionItem)}
+        </div>
+      )}</ChatCollapsibleContent>
+    </div>
+  );
+}
+
 export function ChatSidebarSessionList({
   variant = 'desktop',
   defaultSessionType,
@@ -72,14 +109,12 @@ export function ChatSidebarSessionList({
   return (
     <div className={variant === 'mobile' ? undefined : 'space-y-2'}>
       {groups.map((group) => (
-        <div key={group.label}>
-          <div className={variant === 'mobile' ? 'px-4 py-1 text-[11px] text-muted-foreground' : 'px-2 pb-1 pt-0.5 text-[11px] font-medium uppercase tracking-wider text-muted-foreground/65'}>
-            {group.label}
-          </div>
-          <div className={variant === 'mobile' ? undefined : 'space-y-0.5'}>
-            {group.items.map(renderSessionItem)}
-          </div>
-        </div>
+        <ChatSidebarSessionGroup
+          key={group.label}
+          group={group}
+          variant={variant}
+          renderSessionItem={renderSessionItem}
+        />
       ))}
     </div>
   );

package/src/features/chat/features/session/components/session-header/__tests__/chat-session-header-actions.test.tsx

@@ -187,7 +187,7 @@ describe('ChatSessionHeaderActions', () => {
 
     const actionGroup = screen.getByRole('button', { name: 'More actions' }).parentElement;
 
-    expect(actionGroup?.className).toContain('gap-1.5');
+    expect(actionGroup?.className).toContain('max-md:gap-0');
     expect(screen.getByRole('button', { name: 'Open session workspace' }).className).toContain('h-7');
     expect(screen.getByRole('button', { name: 'Open session workspace' }).className).toContain('w-7');
   });

package/src/features/chat/features/session/components/session-header/chat-session-header-actions.tsx

@@ -1,6 +1,6 @@
 import { useState } from 'react';
 import { Braces, FolderOpen, PanelRightClose, PanelRightOpen, Trash2 } from 'lucide-react';
-import { IconActionButton } from '@/shared/components/ui/actions/icon-action-button';
+import { IconActionButton, IconActionGroup } from '@/shared/components/ui/actions/icon-action-button';
 import { useChatSessionProject } from '@/features/chat/features/session/hooks/use-chat-session-project';
 import { ChatSessionHeaderMenuItem } from './chat-session-header-menu-item';
 import { ChatSessionMoreActionsMenu } from './chat-session-more-actions-menu';
@@ -8,8 +8,6 @@ import { ChatSessionMetadataDialog } from './chat-session-metadata-dialog';
 import { ChatSessionProjectDialog } from './chat-session-project-dialog';
 import { t } from '@/shared/lib/i18n';
 
-const SESSION_HEADER_ACTION_GROUP_CLASS = 'flex shrink-0 items-center gap-1.5';
-
 type ChatSessionHeaderActionsProps = {
   sessionKey: string | null;
   sessionTitle?: string;
@@ -60,7 +58,7 @@ export function ChatSessionHeaderActions({
   };
 
   return (
-    <div className={SESSION_HEADER_ACTION_GROUP_CLASS}>
+    <IconActionGroup>
       <IconActionButton
         icon={
           isWorkspaceOpen ? (
@@ -123,6 +121,6 @@ export function ChatSessionHeaderActions({
           />
         </>
       ) : null}
-    </div>
+    </IconActionGroup>
   );
 }

package/src/features/chat/features/session/components/session-header/chat-session-header-menu-item.tsx

@@ -1,5 +1,6 @@
 import type { LucideIcon } from 'lucide-react';
 import { cn } from '@/shared/lib/utils';
+import { ACTION_FEEDBACK, ACTION_MENU_ITEM_CLASS } from '@/shared/components/ui/actions/action-feedback';
 
 type ChatSessionHeaderMenuItemProps = {
   icon: LucideIcon;
@@ -20,10 +21,10 @@ export function ChatSessionHeaderMenuItem({
     <button
       type="button"
       className={cn(
-        'flex h-8 w-full items-center gap-2 rounded-lg px-2.5 text-left text-[13px] font-medium outline-none transition-colors disabled:cursor-not-allowed disabled:opacity-50',
+        ACTION_MENU_ITEM_CLASS,
         destructive
-          ? 'text-destructive hover:bg-destructive/10 focus-visible:bg-destructive/10'
-          : 'text-foreground hover:bg-muted focus-visible:bg-muted'
+          ? ACTION_FEEDBACK.destructive
+          : `text-foreground ${ACTION_FEEDBACK.item}`
       )}
       onClick={onClick}
       disabled={disabled}

package/src/features/chat/features/session/components/session-header/chat-session-more-actions-menu.tsx

@@ -22,6 +22,7 @@ type ChatSessionMoreActionsMenuProps = {
   disabled?: boolean;
   triggerSize?: IconActionButtonSize;
   triggerTone?: IconActionButtonTone;
+  triggerTooltipSide?: 'top' | 'bottom';
   className?: string;
 };
 
@@ -39,6 +40,7 @@ export function ChatSessionMoreActionsMenu({
   disabled = false,
   triggerSize = 'md',
   triggerTone = 'default',
+  triggerTooltipSide = 'bottom',
   className,
 }: ChatSessionMoreActionsMenuProps) {
   const [isOpen, setIsOpen] = useState(false);
@@ -59,6 +61,7 @@ export function ChatSessionMoreActionsMenu({
           label={t('chatSessionMoreActions')}
           size={triggerSize}
           tone={triggerTone}
+          tooltipSide={triggerTooltipSide}
           className={className}
           disabled={disabled}
           onClick={(event) => event.stopPropagation()}

package/src/features/chat/features/session/components/session-header/chat-session-switcher-groups.tsx

@@ -66,9 +66,9 @@ function ChatSessionSwitchItem({
       type="button"
       aria-current={active ? "page" : undefined}
       className={cn(
-        "flex w-full min-w-0 items-start gap-2 rounded-lg px-2.5 py-2 text-left transition-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-border",
+        "flex w-full min-w-0 items-start gap-2 rounded-lg px-2.5 py-1.5 text-left transition-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-border",
         active
-          ? "bg-accent text-accent-foreground"
+          ? "bg-accent/60 text-accent-foreground"
           : "text-foreground hover:bg-[var(--interaction-hover)] hover:text-accent-foreground",
       )}
       onClick={() => onSelect(session.key)}
@@ -101,7 +101,7 @@ function ChatSessionSwitchItem({
             </span>
           ) : null}
         </span>
-        <span className="mt-0.5 flex min-w-0 items-center gap-2 text-[11px] text-muted-foreground">
+        <span className="mt-0.5 flex min-w-0 items-center gap-2 text-[11px] text-muted-foreground/75">
           <span className="min-w-0 truncate">{previewText}</span>
           <span className="shrink-0">{trailingText}</span>
         </span>
@@ -177,12 +177,12 @@ function ChatSessionSwitchProjectGroup({
         aria-controls={contentId}
         aria-expanded={!isCollapsed}
         aria-label={actionLabel}
-        className="group flex h-10 w-full min-w-0 items-center gap-1.5 rounded-lg px-2 text-left text-muted-foreground transition-colors hover:bg-gray-200/60 hover:text-gray-900 focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-border"
+        className="group flex h-8 w-full min-w-0 items-center gap-1.5 rounded-lg px-2 text-left text-muted-foreground transition-colors hover:bg-[var(--interaction-hover)] hover:text-accent-foreground focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-border"
         onClick={() => onToggleCollapsed(group.projectRoot)}
       >
         <Folder className="h-3.5 w-3.5 shrink-0" aria-hidden="true" />
         <span
-          className="min-w-0 flex-1 truncate text-[11px] font-medium uppercase tracking-wider"
+          className="min-w-0 flex-1 truncate text-[13px] font-medium"
           title={group.projectRoot}
         >
           {group.projectName}
@@ -222,7 +222,7 @@ export function ChatSessionSwitcherGroups({
   projectGroups: ChatSidebarProjectGroup[];
 }) {
   return (
-    <div className="space-y-3">
+    <div className="space-y-0.5">
       {isProjectFirstView
         ? projectGroups.map((group) => (
             <ChatSessionSwitchProjectGroup

package/src/features/chat/features/session/components/session-header/chat-session-title-switcher.tsx

@@ -29,7 +29,7 @@ import { cn } from "@/shared/lib/utils";
 import { useProjects } from "@/shared/hooks/use-projects";
 
 const SWITCHER_TRIGGER_CLASS =
-  "group inline-flex min-w-0 max-w-full items-center gap-1.5 rounded-md px-1.5 py-1 text-sm font-medium text-foreground transition-colors hover:bg-[var(--interaction-hover)] hover:text-accent-foreground focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-border";
+  "group inline-flex min-w-0 max-w-full items-center gap-1.5 max-md:gap-1 rounded-md px-2 py-1 text-sm font-medium text-foreground transition-colors hover:bg-[var(--interaction-hover)] hover:text-accent-foreground focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-border";
 
 function ChatSessionTitle({ title }: { title: string }) {
   return (
@@ -165,9 +165,9 @@ function ChatSessionTitleSwitcherPopover({
       </PopoverTrigger>
       <ChatPopoverContent
         align="start"
-        className="w-[22rem] max-w-[calc(100vw-2rem)] p-0"
+        className="flex w-[22rem] max-w-[calc(100vw-2rem)] flex-col overflow-hidden p-0"
       >
-        <div className="space-y-2 border-b border-border px-3 py-2">
+        <div className="shrink-0 space-y-2 border-b border-border/40 px-3 py-2">
           <div className="flex items-center justify-between gap-3">
             <div className="text-[11px] font-medium uppercase tracking-wider text-muted-foreground/75">
               {t("chatSessionSwitcherTitle")}
@@ -180,16 +180,17 @@ function ChatSessionTitleSwitcherPopover({
           <div className="relative">
             <Search className="pointer-events-none absolute left-2.5 top-1/2 h-3.5 w-3.5 -translate-y-1/2 text-muted-foreground/65" />
             <Input
+              density="compact"
               value={searchQuery}
               onChange={(event) => setSearchQuery(event.target.value)}
               placeholder={t("chatSearchSessionPlaceholder")}
               aria-label={t("chatSearchSessionPlaceholder")}
-              className="h-8 rounded-lg bg-background pl-8 pr-2 text-xs"
+              className="h-8 rounded-lg border-0 bg-muted/50 pl-8 pr-2"
               autoFocus
             />
           </div>
         </div>
-        <div className="max-h-80 overflow-y-auto p-1.5">
+        <div className="min-h-0 max-h-80 overflow-y-auto overscroll-contain p-1.5">
           {isLoading ? (
             <ChatSessionTitleSwitcherLoadingState />
           ) : hasVisibleGroups ? (

package/src/features/chat/features/session-type/components/chat-session-type-option-item.tsx

@@ -27,7 +27,7 @@ export function ChatSessionTypeOptionItem(props: {
       onClick={onSelect}
       className={cn(
         "w-full rounded-2xl px-3 py-2.5 text-left transition-colors",
-        selected ? "bg-gray-50" : "hover:bg-gray-50",
+        selected ? "bg-[var(--interaction-selection)]" : "hover:bg-[var(--interaction-hover)]",
         disabled ? "cursor-not-allowed opacity-70" : null,
       )}
     >

package/src/features/chat/features/welcome/components/chat-welcome-agent-picker.tsx

@@ -48,7 +48,6 @@ export function ChatWelcomeAgentPicker({
         </div>
       </SelectTrigger>
       <SelectContent
-        className="rounded-xl border-border shadow-lg"
         style={{ maxHeight: AGENT_PICKER_MAX_HEIGHT }}
       >
         {agents.map((agent) => (

package/src/features/chat/features/welcome/components/chat-welcome-project-picker.tsx

@@ -55,7 +55,7 @@ export function ChatWelcomeProjectPicker({
       </PopoverTrigger>
       <ChatPopoverContent
         align="start"
-        className="flex w-[min(20rem,calc(100vw-1rem))] flex-col overflow-hidden rounded-2xl border border-border bg-popover p-0 text-popover-foreground shadow-[0_24px_60px_-28px_rgba(15,23,42,0.38)]"
+        className="flex w-[min(20rem,calc(100vw-1rem))] flex-col overflow-hidden p-0"
         style={{ maxHeight: PROJECT_PICKER_MAX_HEIGHT }}
       >
         <div className="shrink-0 px-3 pb-2 pt-3 text-[10px] font-semibold uppercase tracking-[0.18em] text-muted-foreground">

package/src/features/chat/features/welcome/components/chat-welcome-prompt-suggestions.tsx

@@ -27,7 +27,7 @@ export function ChatWelcomePromptSuggestions({
           key={suggestion.labelKey}
           type="button"
           onClick={() => onSelectPrompt(t(suggestion.promptKey))}
-          className="rounded-full bg-muted/55 px-3.5 py-2 text-xs font-medium text-muted-foreground transition-colors hover:bg-muted hover:text-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2"
+          className="rounded-full bg-muted/55 px-3.5 py-2 text-xs font-medium text-muted-foreground transition-colors hover:bg-[var(--interaction-hover)] hover:text-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2"
         >
           {t(suggestion.labelKey)}
         </button>

package/src/features/chat/features/welcome/components/chat-welcome-session-type-picker.tsx

@@ -61,7 +61,7 @@ export function ChatWelcomeSessionTypePicker({
       </PopoverTrigger>
       <ChatPopoverContent
         align="start"
-        className="flex w-[min(16rem,calc(100vw-1rem))] flex-col overflow-hidden rounded-2xl border border-border bg-popover p-1.5 text-popover-foreground shadow-[0_24px_60px_-28px_rgba(15,23,42,0.38)]"
+        className="flex w-[min(16rem,calc(100vw-1rem))] flex-col overflow-hidden p-1.5"
         style={{ maxHeight: SESSION_TYPE_PICKER_MAX_HEIGHT }}
       >
         <div className="min-h-0 flex-1 overflow-y-auto">

package/src/features/chat/features/workspace/components/chat-session-workspace-file-breadcrumb-browser.tsx

@@ -70,7 +70,7 @@ export function WorkspaceBreadcrumbBrowser({
             <Fragment key={breadcrumb.path}>
               <button
                 type="button"
-                className="h-5 rounded-sm px-1 text-left hover:bg-gray-100 focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-border"
+                className="h-5 rounded-sm px-1 text-left hover:bg-[var(--interaction-hover)] focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-border"
                 onClick={() => onBrowsePathChange(breadcrumb.path)}
               >
                 {breadcrumb.label}
@@ -100,7 +100,7 @@ export function WorkspaceBreadcrumbBrowser({
                 key={entry.path}
                 type="button"
                 className={cn(
-                  "flex h-6 w-full items-center gap-1.5 rounded-sm px-1.5 text-left text-[11px] text-gray-700 transition-colors hover:bg-gray-100 focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-border",
+                  "flex h-6 w-full items-center gap-1.5 rounded-sm px-1.5 text-left text-[11px] text-gray-700 transition-colors hover:bg-[var(--interaction-hover)] focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-border",
                   entry.hidden ? "opacity-65" : null,
                 )}
                 onClick={() => openEntry(entry)}

package/src/features/chat/features/workspace/components/chat-session-workspace-file-breadcrumbs.tsx

@@ -43,9 +43,9 @@ function WorkspaceBreadcrumbSegmentButton({
           type="button"
           aria-current={segment.isCurrent ? 'page' : undefined}
           className={cn(
-            'inline-flex h-5 shrink-0 items-center gap-1 whitespace-nowrap rounded-sm px-1 text-[11px] leading-none transition-colors hover:bg-gray-200/80 focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-border',
+            'inline-flex h-5 shrink-0 items-center gap-1 whitespace-nowrap rounded-sm px-1 text-[11px] leading-none transition-colors hover:bg-[var(--interaction-hover)] focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-border',
             segment.kind === 'workspace'
-              ? 'bg-primary/8 text-primary hover:bg-primary/12'
+              ? 'bg-[var(--interaction-selection)] text-foreground hover:bg-[var(--interaction-selection)]'
               : segment.isCurrent
                 ? 'bg-gray-200/70 text-gray-900'
                 : 'text-gray-500',

package/src/features/chat/features/workspace/components/chat-session-workspace-panel-content.tsx

@@ -66,7 +66,7 @@ function WorkspaceOverviewEntry({
   return (
     <button
       type="button"
-      className="group flex w-full items-center gap-3 rounded-lg border border-gray-200/80 bg-white px-3 py-3 text-left transition-colors hover:border-gray-300 hover:bg-gray-50 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary/25"
+      className="group flex w-full items-center gap-3 rounded-lg border border-gray-200/80 bg-white px-3 py-3 text-left transition-colors hover:border-gray-300 hover:bg-[var(--interaction-hover)] focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary/25"
       onClick={onClick}
     >
       <span className="inline-flex h-9 w-9 shrink-0 items-center justify-center rounded-lg bg-gray-100 text-gray-600">

package/src/features/chat/features/workspace/components/child-sessions/chat-session-child-sessions.tsx

@@ -27,7 +27,7 @@ export function ChatSessionChildSessions({
           </div>
           <button
             type="button"
-            className="inline-flex shrink-0 items-center gap-1.5 rounded-md bg-primary px-2.5 py-1.5 text-xs font-semibold text-primary-foreground transition-colors hover:bg-primary/90 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary/25 disabled:cursor-not-allowed disabled:opacity-50"
+            className="inline-flex shrink-0 items-center gap-1.5 rounded-md bg-primary px-2.5 py-1.5 text-xs font-semibold text-primary-foreground transition-colors hover:bg-[hsl(var(--primary-hover))] focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary/25 disabled:cursor-not-allowed disabled:opacity-50"
             disabled={!sessionKey}
             onClick={() => presenter.chatThreadManager.openSideChatDraft(sessionKey)}
           >
@@ -42,7 +42,7 @@ export function ChatSessionChildSessions({
             {childSessionTabs.map((tab) => (
               <div
                 key={tab.sessionKey}
-                className="group relative flex w-full items-center rounded-lg border border-gray-200/80 bg-white transition-colors hover:border-gray-300 hover:bg-gray-50"
+                className="group relative flex w-full items-center rounded-lg border border-gray-200/80 bg-white transition-colors hover:border-gray-300 hover:bg-[var(--interaction-hover)]"
               >
                 <button
                   type="button"

package/src/features/chat/features/workspace/components/file-content-preview/workspace-spreadsheet-preview.tsx

@@ -121,8 +121,8 @@ export function WorkspaceSpreadsheetPreview({
               className={cn(
                 "h-7 shrink-0 rounded-md px-2.5 text-xs transition-colors",
                 sheet.name === activeSheet?.name
-                  ? "bg-accent font-medium text-accent-foreground"
-                  : "text-muted-foreground hover:bg-muted hover:text-foreground",
+                  ? "bg-[var(--interaction-selection)] font-medium text-foreground"
+                  : "text-muted-foreground hover:bg-[var(--interaction-hover)] hover:text-foreground",
               )}
               onClick={() => setSelectedSheetName(sheet.name)}
             >

package/src/features/chat/features/workspace/components/overview/chat-session-continuous-attention.tsx

@@ -96,7 +96,7 @@ function ObservationRow({
             type="button"
             data-testid={`observation-${item.id}-${toggleAction}`}
             disabled={isPending}
-            className="inline-flex items-center gap-1.5 rounded-md border border-gray-200 px-2.5 py-1.5 text-xs font-medium text-gray-700 transition-colors hover:bg-gray-50 disabled:cursor-not-allowed disabled:opacity-50"
+            className="inline-flex items-center gap-1.5 rounded-md border border-gray-200 px-2.5 py-1.5 text-xs font-medium text-gray-700 transition-colors hover:bg-[var(--interaction-hover)] disabled:cursor-not-allowed disabled:opacity-50"
             onClick={() => onAction(toggleAction)}
           >
             {toggleAction === 'pause' ? <Pause className="h-3.5 w-3.5" /> : <Play className="h-3.5 w-3.5" />}
@@ -107,7 +107,7 @@ function ObservationRow({
           type="button"
           data-testid={`observation-${item.id}-remove`}
           disabled={isPending}
-          className="inline-flex items-center gap-1.5 rounded-md border border-rose-200 px-2.5 py-1.5 text-xs font-medium text-rose-700 transition-colors hover:bg-rose-50 disabled:cursor-not-allowed disabled:opacity-50"
+          className="inline-flex items-center gap-1.5 rounded-md border border-rose-200 px-2.5 py-1.5 text-xs font-medium text-rose-700 transition-colors hover:bg-destructive/10 disabled:cursor-not-allowed disabled:opacity-50"
           onClick={() => onAction('remove')}
         >
           <Trash2 className="h-3.5 w-3.5" />
@@ -179,7 +179,7 @@ export function ChatSessionContinuousAttention({ sessionKey }: { sessionKey: str
                 type="button"
                 role="tab"
                 aria-selected={activeGroup === group}
-                className={cn('flex-1 rounded-md px-3 py-2 text-xs font-medium transition-colors', activeGroup === group ? 'bg-gray-100 text-gray-900' : 'text-gray-500 hover:text-gray-700')}
+                className={cn('flex-1 rounded-md px-3 py-2 text-xs font-medium transition-colors', activeGroup === group ? 'bg-[var(--interaction-selection)] text-foreground' : 'text-muted-foreground hover:bg-[var(--interaction-hover)] hover:text-foreground')}
                 onClick={() => setActiveGroup(group)}
               >
                 {getGroupLabel(group)} <span className="ml-1 tabular-nums text-gray-400">{count}</span>

package/src/features/chat/features/workspace/components/overview/chat-session-token-usage.tsx

@@ -90,7 +90,7 @@ export function ChatSessionTokenUsage({ sessionKey }: { sessionKey: string | nul
           <span>{t('chatWorkspaceTokenUsageLoadFailed')}</span>
           <button
             type="button"
-            className="shrink-0 rounded px-1.5 py-1 font-semibold text-gray-700 hover:bg-gray-100 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary/25"
+            className="shrink-0 rounded px-1.5 py-1 font-semibold text-gray-700 hover:bg-[var(--interaction-hover)] focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary/25"
             onClick={() => void usageQuery.refetch()}
           >
             {t('chatWorkspaceTokenUsageRetry')}

package/src/features/chat/features/workspace/components/project-files/workspace-directory-tree.tsx

@@ -355,8 +355,8 @@ export function WorkspaceDirectoryTreeEntry({
           ref={rowRef}
           data-workspace-tree-entry=""
           className={cn(
-            'group flex h-[26px] w-full min-w-0 items-center text-gray-700 transition-colors hover:bg-gray-100 focus-within:bg-gray-100',
-            selected ? 'bg-primary/10' : null,
+            'group flex h-[26px] w-full min-w-0 items-center text-gray-700 transition-colors hover:bg-[var(--interaction-hover)] focus-within:bg-[var(--interaction-hover)]',
+            selected ? 'bg-[var(--interaction-selection)] hover:bg-[var(--interaction-selection)] focus-within:bg-[var(--interaction-selection)]' : null,
             entry.hidden ? 'opacity-65' : null,
           )}
           style={{ paddingLeft: `${6 + level * 12}px` }}
@@ -371,9 +371,10 @@ export function WorkspaceDirectoryTreeEntry({
               }}
             >
               <Input
+                density="compact"
                 autoFocus
                 aria-label={t('chatWorkspaceRenameName')}
-                className="h-6 min-w-0 flex-1 px-1.5 text-xs"
+                className="h-6 min-w-0 flex-1 px-1.5"
                 value={rename.name}
                 onChange={(event) => rename.updateName(event.target.value)}
                 onKeyDown={(event) => {

package/src/features/chat/features/workspace/components/project-files/workspace-new-folder-tree-item.tsx

@@ -67,9 +67,10 @@ export function WorkspaceNewFolderTreeItem({
           <Folder className="h-4 w-4 shrink-0 text-amber-500" />
         )}
         <Input
+          density="compact"
           ref={inputRef}
           aria-label={t(kind === 'file' ? 'chatWorkspaceFileName' : 'chatWorkspaceFolderName')}
-          className="h-7 min-w-0 flex-1 rounded-md px-2 text-xs"
+          className="h-7 min-w-0 flex-1 rounded-md px-2"
           disabled={isCreating}
           placeholder={t(kind === 'file' ? 'chatWorkspaceFileNamePlaceholder' : 'chatWorkspaceFolderNamePlaceholder')}
           value={name}

package/src/features/chat/features/workspace/components/project-files/workspace-project-files-toolbar.tsx

@@ -1,5 +1,5 @@
 import { ChevronsUp, FilePlus2, FolderPlus, MoreVertical, RefreshCw } from 'lucide-react';
-import { IconActionButton } from '@/shared/components/ui/actions/icon-action-button';
+import { IconActionButton, IconActionGroup } from '@/shared/components/ui/actions/icon-action-button';
 import { ContextMenuTrigger } from '@/shared/components/ui/context-menu/context-menu';
 import { t } from '@/shared/lib/i18n';
 
@@ -26,6 +26,7 @@ export function WorkspaceProjectFilesToolbar({
       >
         {rootLabel}
       </span>
+      <IconActionGroup>
       <IconActionButton
         icon={<FilePlus2 className="h-4 w-4" />}
         label={t('chatWorkspaceNewFile')}
@@ -59,6 +60,7 @@ export function WorkspaceProjectFilesToolbar({
           size="sm"
         />
       </ContextMenuTrigger>
+      </IconActionGroup>
     </div>
   );
 }

package/src/features/chat/features/workspace/components/session-cron-job-content.tsx

@@ -83,7 +83,7 @@ function SessionCronJobCard({
   const jobLabel = job.name || job.id;
 
   return (
-    <article className="rounded-2xl border border-border/60 bg-background px-3.5 py-3 shadow-sm transition-colors hover:bg-muted/20 focus-within:bg-muted/20">
+    <article className="rounded-2xl border border-border/60 bg-background px-3.5 py-3 shadow-sm transition-colors hover:bg-[var(--interaction-hover)] focus-within:bg-[var(--interaction-hover)]">
       <div className="flex items-start gap-3">
         <span
           className={cn(
@@ -189,7 +189,7 @@ function SessionCronJobCard({
                   setMenuOpen(false);
                   void cronActions.runJob(job);
                 }}
-                className="flex w-full items-center gap-2 rounded-lg px-3 py-2 text-sm text-foreground transition-colors hover:bg-muted disabled:cursor-not-allowed disabled:opacity-50"
+                className="flex w-full items-center gap-2 rounded-lg px-3 py-2 text-sm text-foreground transition-colors hover:bg-[var(--interaction-hover)] disabled:cursor-not-allowed disabled:opacity-50"
               >
                 <Play className="h-3.5 w-3.5 text-muted-foreground" />
                 {t("cronRunNow")}
@@ -201,7 +201,7 @@ function SessionCronJobCard({
                   setMenuOpen(false);
                   void cronActions.deleteJob(job);
                 }}
-                className="flex w-full items-center gap-2 rounded-lg px-3 py-2 text-sm text-red-600 transition-colors hover:bg-red-50 disabled:cursor-not-allowed disabled:opacity-50"
+                className="flex w-full items-center gap-2 rounded-lg px-3 py-2 text-sm text-red-600 transition-colors hover:bg-destructive/10 disabled:cursor-not-allowed disabled:opacity-50"
               >
                 {t("delete")}
               </button>

package/src/features/chat/features/workspace/components/workspace-file-content-preview.tsx

@@ -105,7 +105,7 @@ function WorkspaceUnsupportedContent({
         <a
           href={contentUrl}
           download={label}
-          className="inline-flex h-8 items-center rounded-lg border border-border bg-card px-3 text-xs font-medium text-foreground transition-colors hover:bg-muted"
+          className="inline-flex h-8 items-center rounded-lg border border-border bg-card px-3 text-xs font-medium text-foreground transition-colors hover:bg-[var(--interaction-hover)]"
         >
           {t("chatWorkspacePreviewDownload")}
         </a>
@@ -113,7 +113,7 @@ function WorkspaceUnsupportedContent({
           href={contentUrl}
           target="_blank"
           rel="noreferrer"
-          className="inline-flex h-8 items-center rounded-lg bg-primary px-3 text-xs font-medium text-primary-foreground transition-colors hover:bg-primary/90"
+          className="inline-flex h-8 items-center rounded-lg bg-primary px-3 text-xs font-medium text-primary-foreground transition-colors hover:bg-[hsl(var(--primary-hover))]"
         >
           {t("chatWorkspacePreviewOpenExternally")}
         </a>

package/src/features/chat/features/workspace/components/workspace-markdown-outline.tsx

@@ -137,7 +137,7 @@ export function WorkspaceMarkdownOutline({
               <li key={item.index}>
                 <button
                   type="button"
-                  className="block w-full truncate rounded-md py-1.5 pr-2 text-left text-xs leading-4 text-gray-600 transition-colors hover:bg-gray-100 hover:text-gray-950 focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-inset focus-visible:ring-border active:bg-gray-200"
+                  className="block w-full truncate rounded-md py-1.5 pr-2 text-left text-xs leading-4 text-gray-600 transition-colors hover:bg-[var(--interaction-hover)] hover:text-gray-950 focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-inset focus-visible:ring-border active:bg-[var(--interaction-hover)]"
                   style={{
                     paddingInlineStart: `${0.5 + item.depth * 0.75}rem`,
                   }}

package/src/features/cron/components/cron-config.tsx

@@ -220,6 +220,7 @@ export function CronConfig() {
   return (
     <PageLayout className="space-y-6">
       <PageHeader
+        mobileTitleInShell
         headingLevel={1}
         title={t("cronPageTitle")}
         description={t("cronPageDescription")}
@@ -307,8 +308,8 @@ export function CronConfig() {
                       handlePageChange(0);
                     }}
                     className={cn(
-                      "rounded-lg px-2.5 py-2 text-[11px] font-medium text-muted-foreground transition-colors hover:bg-muted hover:text-foreground",
-                      status === value && "bg-muted text-foreground",
+                      "rounded-lg px-2.5 py-2 text-[11px] font-medium text-muted-foreground transition-colors hover:bg-[var(--interaction-hover)] hover:text-foreground",
+                      status === value && "bg-[var(--interaction-selection)] hover:bg-[var(--interaction-selection)] text-foreground",
                     )}
                   >
                     {t(label)}

package/src/features/cron/components/cron-job-detail-dialog.tsx

@@ -206,7 +206,7 @@ export function CronJobDetailDialog({
         <SheetFooter className="shrink-0 border-t border-border/60 bg-background px-5 py-4 sm:px-7">
           <Button
             variant="ghost"
-            className="text-red-600 hover:bg-red-50 hover:text-red-700"
+            className="text-red-600 hover:bg-destructive/10 hover:text-red-700"
             onClick={() => onDelete(job)}
           >
             <Trash2 className="mr-2 h-4 w-4" />

package/src/features/cron/components/cron-job-row.tsx

@@ -105,14 +105,14 @@ export function CronJobRow({
   return (
     <div
       className={cn(
-        "group relative rounded-xl border-b border-border/55 transition-colors duration-150 last:border-b-0 hover:bg-muted/35 focus-within:bg-muted/35",
+        "group relative rounded-xl border-b border-border/55 transition-colors duration-150 last:border-b-0 hover:bg-[var(--interaction-hover)] focus-within:bg-[var(--interaction-hover)]",
         expanded && "bg-muted/35",
       )}
     >
-      <div className="flex items-center gap-3 px-1 py-3.5">
+      <div className="flex flex-wrap items-center gap-3 px-1 py-3.5">
         <button
           type="button"
-          className="grid min-w-0 flex-1 grid-cols-[36px_minmax(0,1fr)] items-center gap-3 rounded-lg pr-16 text-left focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-border"
+          className="grid min-w-0 flex-1 max-md:basis-full grid-cols-[36px_minmax(0,1fr)] items-center gap-3 rounded-lg md:pr-16 text-left focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-border"
           aria-controls={previewId}
           aria-expanded={expanded}
           aria-label={`${t(expanded ? "cronCollapseTask" : "cronExpandTask")} ${jobLabel}`}
@@ -159,14 +159,14 @@ export function CronJobRow({
         </button>
 
         <TooltipProvider delayDuration={250}>
-          <div className="relative flex shrink-0 items-center gap-1">
+          <div className="relative flex shrink-0 items-center gap-1 max-md:ml-auto">
             <Switch
               checked={job.enabled}
               onCheckedChange={(checked) => onToggle(job, checked)}
               aria-label={job.enabled ? t("cronDisable") : t("cronEnable")}
             />
 
-            <div className="flex items-center gap-0.5 opacity-100 transition-opacity duration-150 [@media(hover:hover)]:pointer-events-none [@media(hover:hover)]:opacity-0 [@media(hover:hover)]:group-focus-within:pointer-events-auto [@media(hover:hover)]:group-focus-within:opacity-100 [@media(hover:hover)]:group-hover:pointer-events-auto [@media(hover:hover)]:group-hover:opacity-100">
+            <div className="flex items-center gap-0.5 opacity-100 transition-opacity duration-150 md:[@media(hover:hover)]:pointer-events-none md:[@media(hover:hover)]:opacity-0 [@media(hover:hover)]:group-focus-within:pointer-events-auto [@media(hover:hover)]:group-focus-within:opacity-100 [@media(hover:hover)]:group-hover:pointer-events-auto [@media(hover:hover)]:group-hover:opacity-100">
               <Tooltip>
                 <TooltipTrigger asChild>
                   <Button
@@ -206,7 +206,7 @@ export function CronJobRow({
                       setMenuOpen(false);
                       onRun(job);
                     }}
-                    className="flex w-full items-center gap-2 rounded-lg px-3 py-2 text-sm text-foreground transition-colors hover:bg-muted"
+                    className="flex w-full items-center gap-2 rounded-lg px-3 py-2 text-sm text-foreground transition-colors hover:bg-[var(--interaction-hover)]"
                   >
                     <Play className="h-3.5 w-3.5 text-muted-foreground" />
                     {t("cronRunNow")}
@@ -217,7 +217,7 @@ export function CronJobRow({
                       setMenuOpen(false);
                       onDelete(job);
                     }}
-                    className="flex w-full items-center gap-2 rounded-lg px-3 py-2 text-sm text-red-600 transition-colors hover:bg-red-50"
+                    className="flex w-full items-center gap-2 rounded-lg px-3 py-2 text-sm text-red-600 transition-colors hover:bg-destructive/10"
                   >
                     <Trash2 className="h-3.5 w-3.5" />
                     {t("delete")}