@nextclaw/ui 0.26.3 → 0.26.5

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

@@ -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',
@@ -115,13 +115,13 @@ export function ChatSessionWorkspaceFileBreadcrumbs({
     <div
       data-testid="workspace-file-breadcrumbs"
       title={breadcrumb.fullPath}
-      className="flex min-w-0 items-center border-b border-gray-200/80 bg-gray-50/55"
+      className="flex h-8 min-w-0 shrink-0 items-center border-b border-gray-200/80 bg-gray-50/55"
     >
       {leading ? <div className="flex h-full shrink-0 items-center pl-1 pr-0.5">{leading}</div> : null}
       <div
         ref={scrollRef}
         data-testid="workspace-file-breadcrumb-scroll"
-        className="workspace-horizontal-scrollbar flex min-w-0 flex-1 items-center gap-2.5 overflow-x-auto overflow-y-hidden px-3 py-1.5"
+        className="workspace-horizontal-scrollbar flex h-full min-w-0 flex-1 items-center gap-1 overflow-x-auto overflow-y-hidden px-1.5"
       >
         <div className="flex min-w-0 flex-1 items-center gap-1 pr-1">
           {breadcrumb.segments.map((segment, index) => (
@@ -140,7 +140,7 @@ export function ChatSessionWorkspaceFileBreadcrumbs({
           </div>
         ) : null}
       </div>
-      {trailing ? <div className="flex shrink-0 items-center py-1.5 pr-2 pl-0.5">{trailing}</div> : null}
+      {trailing ? <div className="flex h-full shrink-0 items-center pr-1 pl-0.5">{trailing}</div> : null}
     </div>
   );
 }

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

@@ -268,6 +268,7 @@ function WorkspacePreviewBody({
           texts={{
             copyCodeLabel: t('chatCodeCopy'),
             copiedCodeLabel: t('chatCodeCopied'),
+            frontmatterLabel: t('chatMarkdownFrontmatter'),
           }}
           onFileOpen={onFileOpen}
           resolveFileContentUrl={(action) => buildServerPathContentUrl(action.path, fileBasePath)}

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/chat-session-workspace-panel-nav.tsx

@@ -218,7 +218,7 @@ export function WorkspaceTabsBar({
 
   return (
     <CompactTabStrip
-      className="h-10 min-w-0 flex-1 border-0 bg-transparent px-0"
+      className="h-8 min-w-0 flex-1 border-0 bg-transparent px-0"
       testId="workspace-tabs-bar"
       scrollTestId="workspace-tabs-scroll"
       tabs={compactTabs}

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

@@ -308,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,7 +105,7 @@ 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",
       )}
     >
@@ -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")}

package/src/features/cron/components/cron-task-discovery.tsx

@@ -133,7 +133,7 @@ export function CronTemplateGallery({
             onClick={() => onSelect(t(template.promptKey))}
             className="group grid min-h-24 grid-cols-[38px_minmax(0,1fr)] items-center gap-3 rounded-2xl border border-border/60 bg-card px-4 py-4 text-left transition-all hover:-translate-y-0.5 hover:border-primary/20 hover:shadow-[0_12px_30px_rgba(30,45,52,0.08)] focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-border"
           >
-            <span className="flex h-9 w-9 shrink-0 items-center justify-center rounded-xl bg-muted text-muted-foreground transition-colors group-hover:bg-primary/10 group-hover:text-primary">
+            <span className="flex h-9 w-9 shrink-0 items-center justify-center rounded-xl bg-muted text-muted-foreground transition-colors group-hover:bg-[var(--interaction-hover)] group-hover:text-primary">
               <Icon className="h-4 w-4" aria-hidden="true" />
             </span>
             <span className="min-w-0">

package/src/features/inbox/pages/inbox-page.test.ts

@@ -7,6 +7,7 @@ import { InboxPage, resolveInboxFilter } from "@/features/inbox/pages/inbox-page
 import { t } from "@/shared/lib/i18n";
 
 const mocks = vi.hoisted(() => ({
+  isMobile: false,
   prepareChatReference: vi.fn(),
   requestSystemObjectReference: vi.fn(),
 }));
@@ -28,7 +29,7 @@ vi.mock("@/app/components/app-presenter-provider", () => ({
 }));
 
 vi.mock("@/app/hooks/use-viewport-layout", () => ({
-  useViewportLayout: () => ({ isMobile: false }),
+  useViewportLayout: () => ({ isMobile: mocks.isMobile }),
 }));
 
 vi.mock("@/features/inbox/hooks/use-inbox-deliveries", () => ({
@@ -101,6 +102,7 @@ describe("resolveInboxFilter", () => {
 describe("InboxPage", () => {
   beforeEach(() => {
     vi.clearAllMocks();
+    mocks.isMobile = false;
     mocks.prepareChatReference.mockResolvedValue({
       reference: {
         uri: "nextclaw://objects/inbox-delivery/delivery-1",
@@ -109,7 +111,8 @@ describe("InboxPage", () => {
     });
   });
 
-  it("opens a draft with the same visible system object intent as the reader dialog", async () => {
+  it.each([false, true])("opens a draft with the same system object intent (mobile=%s)", async (isMobile) => {
+    mocks.isMobile = isMobile;
     render(
       createElement(
         MemoryRouter,
@@ -134,7 +137,13 @@ describe("InboxPage", () => {
       ),
     );
 
-    fireEvent.click(screen.getByRole("button", { name: t("inboxContinueChat") }));
+    const continueButton = screen.getByRole("button", { name: t("inboxContinueChat") });
+    if (isMobile) {
+      const moreButton = screen.getByRole("button", { name: t("more") });
+      expect(continueButton.compareDocumentPosition(moreButton) & Node.DOCUMENT_POSITION_FOLLOWING).toBeTruthy();
+      expect(screen.getByRole("button", { name: t("inboxTitle") })).toBeTruthy();
+    }
+    fireEvent.click(continueButton);
 
     await waitFor(() => {
       expect(screen.getByTestId("current-path").textContent).toBe(CHAT_DRAFT_SESSION_PATH);