@nextclaw/ui 0.26.3 → 0.26.5

package/src/features/inbox/pages/inbox-page.tsx

@@ -2,7 +2,7 @@ import { PageResourceActionsMenu } from '@/features/right-panel-resources';
 import { pageResourceFromSystemObject } from '@/features/right-panel-resources';
 import { useEffect, useMemo, useState } from "react";
 import type { InboxDelivery } from "@nextclaw/shared";
-import { Archive, Inbox, MessageCircle, MoreVertical, RotateCcw, Trash2 } from "lucide-react";
+import { Archive, ArrowLeft, Inbox, MessageCircle, MoreVertical, RotateCcw, Trash2 } from "lucide-react";
 import { ContextMenu, ContextMenuTrigger } from '@/shared/components/ui/context-menu/context-menu';
 import { IconActionButton } from '@/shared/components/ui/actions/icon-action-button';
 import { Link, useNavigate, useParams } from "react-router-dom";
@@ -120,7 +120,7 @@ function InboxListPane({
             {filteredDeliveries.map((delivery) => (
               <li key={delivery.id} className={cn(
                 "group/page-row relative rounded-lg hover:bg-[var(--interaction-hover)] focus-within:bg-[var(--interaction-hover)] has-[[data-context-menu-open]]:bg-[var(--interaction-hover)]",
-                activeDeliveryId === delivery.id && "bg-[var(--interaction-selection)]",
+                activeDeliveryId === delivery.id && "bg-[var(--interaction-selection)] hover:bg-[var(--interaction-selection)] focus-within:bg-[var(--interaction-selection)] has-[[data-context-menu-open]]:bg-[var(--interaction-selection)]",
               )}>
                 <Link
                   to={`/inbox/${encodeURIComponent(delivery.id)}`}
@@ -167,6 +167,7 @@ function InboxListPane({
 
 function InboxDetailPane({
   delivery,
+  isMobile,
   error,
   pending,
   onArchiveToggle,
@@ -175,6 +176,7 @@ function InboxDetailPane({
   onReadToggle,
 }: {
   delivery: InboxDelivery | null;
+  isMobile: boolean;
   error: string | null;
   pending: boolean;
   onArchiveToggle: () => void;
@@ -182,38 +184,52 @@ function InboxDetailPane({
   onDelete: () => void;
   onReadToggle: () => void;
 }) {
+  const navigate = useNavigate();
+  const backButton = <IconActionButton size="sm" icon={<ArrowLeft className="h-4 w-4" />} label={t("inboxTitle")} onClick={() => navigate('/inbox')} />;
   const scrollRestoration = useScrollRestoration<HTMLDivElement>({
     restorationKey: delivery ? `inbox:delivery:${delivery.id}` : null,
   });
   const { onScroll, scrollRef } = scrollRestoration;
   if (!delivery) {
-    return <main className="flex min-h-0 flex-col"><InboxEmptyState selection /></main>;
+    return <main className="flex min-h-0 flex-col"><div className="md:hidden">{backButton}</div><InboxEmptyState selection /></main>;
   }
   const isHtml = delivery.contentType === "html";
   return (
-    <main className="flex min-h-0 flex-col">
-      <div className="shrink-0 px-4 py-2 md:border-b md:border-border/50 md:px-6 md:py-3">
-        <div className="flex min-h-7 min-w-0 items-center gap-2">
+    <main className="flex min-h-0 min-w-0 flex-col max-md:pt-[env(safe-area-inset-top,0px)] max-md:pb-[env(safe-area-inset-bottom,0px)]">
+      <div className="shrink-0 border-b border-border/50 px-2 py-2 md:px-6 md:py-3">
+        <div className="flex min-h-7 min-w-0 items-center gap-1">
+          <div className="md:hidden">{backButton}</div>
           <h2
             title={delivery.title}
-            className="min-w-0 truncate text-sm font-medium text-foreground"
+            className="min-w-0 flex-1 truncate text-sm font-medium text-foreground md:flex-none"
           >
             {delivery.title}
           </h2>
-          <span className="hidden shrink-0 text-muted-foreground sm:inline" aria-hidden="true">·</span>
+          <span className="hidden shrink-0 text-muted-foreground md:inline" aria-hidden="true">·</span>
           <time
-            className="hidden shrink-0 text-[11px] tabular-nums text-muted-foreground sm:block"
+            className="hidden shrink-0 text-[11px] tabular-nums text-muted-foreground md:block"
             dateTime={delivery.createdAt}
           >
             {formatDateTime(delivery.createdAt)}
           </time>
+          {isMobile ? <div className="flex shrink-0 items-center">
+            <IconActionButton size="sm" icon={<MessageCircle className="h-4 w-4" />} label={t('inboxContinueChat')} disabled={pending} onClick={onContinue} />
+            <ContextMenu label={t('inboxTitle')} groups={[{ key: 'delivery', items: [
+              { key: 'read', label: delivery.readAt ? t('inboxMarkUnread') : t('inboxMarkRead'), disabled: pending, onSelect: onReadToggle },
+              { key: 'archive', label: delivery.archivedAt ? t('inboxRestore') : t('inboxArchive'), icon: <Archive className="h-4 w-4" />, disabled: pending, onSelect: onArchiveToggle },
+              { key: 'delete', label: t('inboxDelete'), icon: <Trash2 className="h-4 w-4" />, destructive: true, disabled: pending, onSelect: onDelete },
+            ] }]}>
+              <div><ContextMenuTrigger><IconActionButton size="sm" icon={<MoreVertical className="h-4 w-4" />} label={t('more')} /></ContextMenuTrigger></div>
+            </ContextMenu>
+          </div> : null}
         </div>
       </div>
+      {error ? <p role="alert" className="shrink-0 px-4 py-2 text-sm text-destructive">{error}</p> : null}
       <div className={cn(
         "min-h-0 flex-1",
         isHtml
           ? "p-0 md:p-4"
-          : "custom-scrollbar overflow-y-auto px-5 py-5 sm:px-6 sm:py-6",
+          : "custom-scrollbar overflow-y-auto overscroll-contain px-4 py-4 sm:px-6 sm:py-6",
       )}
       ref={scrollRef}
       onScroll={onScroll}
@@ -228,8 +244,7 @@ function InboxDetailPane({
           />
         </div>
       </div>
-      <div className="shrink-0 border-t border-border/50 px-4 py-2 md:px-6 md:py-3">
-        {error ? <p role="alert" className="mb-2 text-sm text-destructive">{error}</p> : null}
+      {!isMobile ? <div className="shrink-0 border-t border-border/50 px-6 py-3">
         <div className="flex items-center justify-between gap-2">
           <div className="hidden md:flex flex-wrap items-center gap-1">
             <Button size="sm" variant="outline" disabled={pending} onClick={onReadToggle}>
@@ -246,21 +261,12 @@ function InboxDetailPane({
               {t("inboxDelete")}
             </Button>
           </div>
-          <div className="md:hidden">
-            <ContextMenu label={t('inboxTitle')} groups={[{ key: 'delivery', items: [
-              { key: 'read', label: delivery.readAt ? t('inboxMarkUnread') : t('inboxMarkRead'), disabled: pending, onSelect: onReadToggle },
-              { key: 'archive', label: delivery.archivedAt ? t('inboxRestore') : t('inboxArchive'), icon: <Archive className="h-4 w-4" />, disabled: pending, onSelect: onArchiveToggle },
-              { key: 'delete', label: t('inboxDelete'), icon: <Trash2 className="h-4 w-4" />, destructive: true, disabled: pending, onSelect: onDelete },
-            ] }]}>
-              <div><ContextMenuTrigger><IconActionButton icon={<MoreVertical className="h-4 w-4" />} label={t('more')} /></ContextMenuTrigger></div>
-            </ContextMenu>
-          </div>
           <Button size="sm" disabled={pending} onClick={onContinue}>
             <MessageCircle className="mr-2 h-4 w-4" />
             {t("inboxContinueChat")}
           </Button>
         </div>
-      </div>
+      </div> : null}
     </main>
   );
 }
@@ -359,8 +365,8 @@ export function InboxPage() {
     });
   };
 
-  const showList = !isMobile || !activeDelivery;
-  const showDetail = !isMobile || Boolean(activeDelivery);
+  const showList = !isMobile || !deliveryId;
+  const showDetail = !isMobile || Boolean(deliveryId);
 
   return (
     <div className="flex h-full min-h-0 flex-col md:gap-6">
@@ -372,7 +378,7 @@ export function InboxPage() {
 
       <div className="min-h-0 flex-1 overflow-hidden bg-background md:rounded-2xl md:border md:border-border/60">
         {deliveriesQuery.isError ? (
-          <div role="alert" className="p-6 text-sm text-destructive">{t("inboxLoadError")}</div>
+          <div className="p-4">{isMobile && deliveryId ? <IconActionButton icon={<ArrowLeft className="h-4 w-4" />} label={t("inboxTitle")} onClick={() => navigate('/inbox')} /> : null}<p role="alert" className="text-sm text-destructive">{t("inboxLoadError")}</p></div>
         ) : (
           <div className="grid h-full min-h-0 grid-cols-1 md:grid-cols-[300px_minmax(0,1fr)]">
             {showList ? <InboxListPane
@@ -383,6 +389,7 @@ export function InboxPage() {
             /> : null}
             {showDetail ? <InboxDetailPane
               delivery={activeDelivery}
+              isMobile={isMobile}
               error={error}
               pending={pendingAction !== null}
               onArchiveToggle={toggleArchive}

package/src/features/marketplace/components/curated-shelves/marketplace-curated-shelves.tsx

@@ -131,7 +131,7 @@ function GoalCard(props: {
       type="button"
       onClick={() => onSelect(scene.scene)}
       className={cn(
-        "group flex min-h-[74px] flex-col justify-center rounded-lg border px-3 py-2.5 text-left shadow-sm transition-colors hover:border-gray-300 hover:bg-gray-50/70",
+        "group flex min-h-[74px] flex-col justify-center rounded-lg border px-3 py-2.5 text-left shadow-sm transition-colors hover:border-gray-300 hover:bg-[var(--interaction-hover)]",
         tone.card,
       )}
     >
@@ -194,7 +194,7 @@ export function MarketplaceCuratedSceneView(props: {
         <button
           type="button"
           onClick={onBack}
-          className="inline-flex h-8 w-8 shrink-0 items-center justify-center rounded-lg text-gray-600 transition-colors hover:bg-gray-100 hover:text-gray-900"
+          className="inline-flex h-8 w-8 shrink-0 items-center justify-center rounded-lg text-gray-600 transition-colors hover:bg-[var(--interaction-hover)] hover:text-gray-900"
           aria-label={readLocalized({ zh: "返回", en: "Back" }, language)}
         >
           <ArrowLeft className="h-4 w-4" />

package/src/features/marketplace/components/curated-shelves/marketplace-shelf-card.tsx

@@ -42,7 +42,7 @@ export function SkillShelfCard(props: {
     <article
       onClick={() => onOpen(entry)}
       className={cn(
-        "group flex min-h-[166px] cursor-pointer flex-col justify-between rounded-xl border border-gray-200/70 bg-white p-3 shadow-sm transition-colors hover:border-gray-300 hover:bg-gray-50/60",
+        "group flex min-h-[166px] cursor-pointer flex-col justify-between rounded-xl border border-gray-200/70 bg-white p-3 shadow-sm transition-colors hover:border-gray-300 hover:bg-[var(--interaction-hover)]",
         layout === "rail" ? "w-[260px] shrink-0" : "w-full min-w-0",
       )}
     >
@@ -81,7 +81,7 @@ export function SkillShelfCard(props: {
               event.stopPropagation();
               onInstall(item);
             }}
-            className="inline-flex h-7 items-center gap-1.5 rounded-md border border-gray-200 bg-white px-2 text-[11px] font-semibold text-gray-700 transition-colors hover:border-gray-300 hover:bg-gray-50 disabled:opacity-50"
+            className="inline-flex h-7 items-center gap-1.5 rounded-md border border-gray-200 bg-white px-2 text-[11px] font-semibold text-gray-700 transition-colors hover:border-gray-300 hover:bg-[var(--interaction-hover)] disabled:opacity-50"
           >
             <Download className="h-3.5 w-3.5" />
             {isInstalling ? t("marketplaceInstalling") : t("marketplaceInstall")}

package/src/features/marketplace/components/marketplace-list-card.tsx

@@ -125,7 +125,7 @@ function MarketplaceListCardActionButtons(props: MarketplaceListCardActionProps)
             onInstall(item);
           }}
           disabled={isInstalling}
-          className="inline-flex h-6 items-center gap-1 whitespace-nowrap rounded-md bg-primary px-2 text-[11px] font-medium text-white transition-colors hover:bg-primary-600 disabled:opacity-50"
+          className="inline-flex h-6 items-center gap-1 whitespace-nowrap rounded-md bg-primary px-2 text-[11px] font-medium text-white transition-colors hover:bg-[hsl(var(--primary-hover))] disabled:opacity-50"
         >
           <Download className="h-3 w-3" />
           {isInstalling ? t("marketplaceInstalling") : t("marketplaceInstall")}
@@ -139,7 +139,7 @@ function MarketplaceListCardActionButtons(props: MarketplaceListCardActionProps)
             event.stopPropagation();
             onManage("update", record);
           }}
-          className="inline-flex h-6 items-center gap-1 whitespace-nowrap rounded-md border border-blue-200/80 bg-white px-2 text-[11px] font-medium text-blue-600 transition-colors hover:border-blue-300 hover:bg-blue-50 disabled:opacity-50"
+          className="inline-flex h-6 items-center gap-1 whitespace-nowrap rounded-md border border-blue-200/80 bg-white px-2 text-[11px] font-medium text-blue-600 transition-colors hover:border-blue-300 hover:bg-[var(--interaction-hover)] disabled:opacity-50"
         >
           <RefreshCw className="h-3 w-3" />
           {busyAction === "update"
@@ -155,7 +155,7 @@ function MarketplaceListCardActionButtons(props: MarketplaceListCardActionProps)
             event.stopPropagation();
             onManage("uninstall", record);
           }}
-          className="inline-flex h-6 items-center gap-1 whitespace-nowrap rounded-md border border-gray-200/80 bg-white px-2 text-[11px] font-medium text-gray-500 transition-colors hover:border-rose-200 hover:bg-rose-50 hover:text-rose-600 disabled:opacity-50"
+          className="inline-flex h-6 items-center gap-1 whitespace-nowrap rounded-md border border-gray-200/80 bg-white px-2 text-[11px] font-medium text-gray-500 transition-colors hover:border-rose-200 hover:bg-destructive/10 hover:text-rose-600 disabled:opacity-50"
         >
           <Trash2 className="h-3 w-3" />
           {busyAction === "uninstall"
@@ -263,7 +263,7 @@ export function MarketplaceListCard(props: {
   return (
     <article
       onClick={onOpen}
-      className="group flex h-full min-h-[156px] cursor-pointer flex-col rounded-xl border border-gray-200/60 bg-white p-3.5 shadow-sm transition-colors hover:border-gray-300 hover:bg-gray-50/60"
+      className="group flex h-full min-h-[156px] cursor-pointer flex-col rounded-xl border border-gray-200/60 bg-white p-3.5 shadow-sm transition-colors hover:border-gray-300 hover:bg-[var(--interaction-hover)]"
     >
       <div className="flex min-w-0 items-start gap-2.5">
         <MarketplaceItemIcon

package/src/features/marketplace/components/marketplace-page.tsx

@@ -150,13 +150,13 @@ export function MarketplacePage({
               <TabsList className="mb-0 h-auto flex-1 justify-start gap-4 sm:gap-6 rounded-none border-b-0 bg-transparent p-0 text-muted-foreground">
                 <TabsTrigger
                   value="all"
-                  className="rounded-none border-b-2 border-transparent bg-transparent px-0 pb-3 pt-0 shadow-none hover:bg-transparent data-[state=active]:border-primary data-[state=active]:bg-transparent data-[state=active]:text-gray-950 data-[state=active]:shadow-none"
+                  className="rounded-none border-b-2 border-transparent bg-transparent px-0 pb-3 pt-0 shadow-none hover:bg-[var(--interaction-hover)] data-[state=active]:border-primary data-[state=active]:bg-transparent data-[state=active]:text-gray-950 data-[state=active]:shadow-none"
                 >
                   {t("marketplaceTabMarketplaceSkills")}
                 </TabsTrigger>
                 <TabsTrigger
                   value="installed"
-                  className="gap-1.5 rounded-none border-b-2 border-transparent bg-transparent px-0 pb-3 pt-0 shadow-none hover:bg-transparent data-[state=active]:border-primary data-[state=active]:bg-transparent data-[state=active]:text-gray-950 data-[state=active]:shadow-none"
+                  className="gap-1.5 rounded-none border-b-2 border-transparent bg-transparent px-0 pb-3 pt-0 shadow-none hover:bg-[var(--interaction-hover)] data-[state=active]:border-primary data-[state=active]:bg-transparent data-[state=active]:text-gray-950 data-[state=active]:shadow-none"
                 >
                   {t("marketplaceTabInstalledSkills")}
                   <span className="text-[11px] font-medium text-gray-500">

package/src/features/marketplace/components/mcp/mcp-marketplace-card.tsx

@@ -98,7 +98,7 @@ export function McpMarketplaceCard(props: {
                   type="button"
                   size="sm"
                   variant="outline"
-                  className="rounded-xl border-blue-200 text-blue-700 hover:border-blue-300 hover:bg-blue-50 hover:text-blue-700"
+                  className="rounded-xl border-blue-200 text-blue-700 hover:border-blue-300 hover:bg-[var(--interaction-hover)] hover:text-blue-700"
                   onClick={(event) => {
                     event.stopPropagation();
                     onDoctor();
@@ -112,7 +112,7 @@ export function McpMarketplaceCard(props: {
                   type="button"
                   size="sm"
                   variant="outline"
-                  className="rounded-xl border-rose-200 text-rose-600 hover:border-rose-300 hover:bg-rose-50 hover:text-rose-600"
+                  className="rounded-xl border-rose-200 text-rose-600 hover:border-rose-300 hover:bg-destructive/10 hover:text-rose-600"
                   onClick={(event) => {
                     event.stopPropagation();
                     onRemove();

package/src/features/marketplace/components/mcp/mcp-marketplace-page.tsx

@@ -288,8 +288,8 @@ export function McpMarketplacePage() {
                   className={cn(
                     "relative flex min-w-0 items-center gap-2 rounded-lg px-3 py-2 text-sm font-medium transition-colors",
                     isActive
-                      ? "bg-card text-foreground shadow-sm"
-                      : "text-muted-foreground hover:bg-card/60 hover:text-foreground"
+                      ? "bg-[var(--interaction-selection)] text-foreground"
+                      : "text-muted-foreground hover:bg-[var(--interaction-hover)] hover:text-foreground"
                   )}
                 >
                   <Icon className="h-4 w-4 shrink-0" />
@@ -297,7 +297,7 @@ export function McpMarketplacePage() {
                   {tab.id === 'installed' && typeof tab.count === 'number' && (
                     <span className={cn(
                       "flex h-5 min-w-5 items-center justify-center rounded-full px-1.5 text-[11px] font-semibold",
-                      isActive ? "bg-primary/10 text-primary" : "bg-muted text-muted-foreground"
+                      isActive ? "bg-[var(--interaction-selection)] text-foreground" : "bg-muted text-muted-foreground"
                     )}>
                       {tab.count}
                     </span>

package/src/features/panel-apps/components/panel-app-list-item.tsx

@@ -40,7 +40,7 @@ export function PanelAppListItem({
     setIsDeleteDialogOpen(true);
   };
   return (
-    <div className="group w-full min-w-0 rounded-lg border border-border/60 bg-card px-2.5 py-2.5 transition-colors hover:bg-muted/40">
+    <div className="group w-full min-w-0 rounded-lg border border-border/60 bg-card px-2.5 py-2.5 transition-colors hover:bg-[var(--interaction-hover)]">
       <div className="flex min-w-0 items-start gap-2">
         <button type="button" onClick={onOpen} className="min-w-0 flex-1 text-left">
           <span className="flex min-w-0 items-center gap-2">
@@ -59,7 +59,7 @@ export function PanelAppListItem({
             type="button"
             onClick={handleFavorite}
             disabled={favoritePending}
-            className="rounded-md p-1.5 text-muted-foreground/70 transition-colors hover:bg-muted hover:text-foreground disabled:opacity-50"
+            className="rounded-md p-1.5 text-muted-foreground/70 transition-colors hover:bg-[var(--interaction-hover)] hover:text-foreground disabled:opacity-50"
             title={favoriteLabel}
             aria-label={favoriteLabel}
           >
@@ -69,7 +69,7 @@ export function PanelAppListItem({
             <PopoverTrigger asChild>
               <button
                 type="button"
-                className="rounded-md p-1.5 text-muted-foreground/70 transition-colors hover:bg-muted hover:text-foreground"
+                className="rounded-md p-1.5 text-muted-foreground/70 transition-colors hover:bg-[var(--interaction-hover)] hover:text-foreground"
                 aria-label={t('panelAppsMoreActions')}
                 disabled={deletePending}
               >

package/src/features/projects/pages/project-home-page.tsx

@@ -1,5 +1,5 @@
 import { useState } from "react";
-import { useNavigate, useParams } from "react-router-dom";
+import { useLocation, useNavigate, useParams } from "react-router-dom";
 import { useProjects } from "@/shared/hooks/use-projects";
 import { useViewportLayout } from "@/app/hooks/use-viewport-layout";
 import { t } from "@/shared/lib/i18n";
@@ -43,6 +43,7 @@ export function ProjectsPage() {
     tab?: string;
   }>();
   const navigate = useNavigate();
+  const { state } = useLocation();
   const presenter = usePresenter();
   const { isMobile } = useViewportLayout();
   const projects = useProjects();
@@ -86,7 +87,7 @@ export function ProjectsPage() {
         <select
           id="project-home-selection"
           value=""
-          onChange={(event) => navigate(`/projects/${encodeURIComponent(event.target.value)}/overview`)}
+          onChange={(event) => navigate(`/projects/${encodeURIComponent(event.target.value)}/overview`, { state })}
           className="min-h-11 w-full rounded-xl border border-border bg-card px-3 text-base text-foreground"
         >
           <option value="" disabled>{t("projectsChoose")}</option>
@@ -117,6 +118,7 @@ export function ProjectsPage() {
             onValueChange={(value) =>
               navigate(
                 `/projects/${encodeURIComponent(selectedProject.id)}/${value}`,
+                { state },
               )
             }
           >

package/src/features/pwa/components/pwa-install-entry.tsx

@@ -122,7 +122,7 @@ export function PwaInstallBanner() {
         <button
           type='button'
           aria-label={t('pwaInstallDismiss')}
-          className='rounded-full p-1 text-gray-400 transition hover:bg-gray-100 hover:text-gray-600'
+          className='rounded-full p-1 text-gray-400 transition hover:bg-[var(--interaction-hover)] hover:text-gray-600'
           onClick={() => {
             pwaInstallManager.dismissInstallPrompt();
           }}

package/src/features/right-panel-resources/components/__tests__/page-resource-sidebar-nav.test.tsx

@@ -110,7 +110,15 @@ describe("shared left pages", () => {
   it("preserves the collapsed group preference", async () => {
     mocks.entries = [createEntry({ mainSidebar: true })];
     renderNav();
-    await userEvent.click(screen.getByRole("button", { name: "Pages 1" }));
+    const groupTrigger = screen.getByRole("button", { name: "Pages 1" });
+    expect(groupTrigger.className).toContain(
+      "hover:bg-[var(--sidebar-interaction-hover)]",
+    );
+    expect(groupTrigger.className).toContain(
+      "active:bg-[var(--sidebar-interaction-selection)]",
+    );
+    expect(groupTrigger.className).toContain("focus-visible:ring-1");
+    await userEvent.click(groupTrigger);
     expect(screen.queryByRole("link")).toBeNull();
     expect(
       useViewportLayoutStore.getState().isMainSidebarAppGroupCollapsed,

package/src/features/right-panel-resources/components/page-resource-sidebar-nav.tsx

@@ -105,7 +105,7 @@ export function PageResourceSidebarNav({
         type="button"
         aria-expanded={!groupCollapsed}
         onClick={viewportLayoutManager.toggleMainSidebarAppGroupCollapsed}
-        className="flex w-full items-center gap-2 px-2.5 py-1.5 text-[13px] text-muted-foreground"
+        className={`flex w-full items-center gap-2 px-2.5 py-1.5 text-[13px] ${SIDEBAR_RAIL_SURFACE_CLASS}`}
       >
         <ChevronDown
           className={`h-3.5 w-3.5 ${groupCollapsed ? "-rotate-90" : ""}`}

package/src/features/right-panel-resources/components/right-panel-resource-home-page.tsx

@@ -52,7 +52,7 @@ const HOME_ITEM_VIEW_BY_ID: Record<string, RightPanelResourceHomeItem> = {
 function resolveHomeItemView(item: RightPanelResourceHomeNavigationItem): RightPanelResourceHomeItem {
   return HOME_ITEM_VIEW_BY_ID[item.id] ?? {
     accentClassName: 'bg-gray-50 text-gray-700',
-    hoverAccentClassName: 'group-hover:bg-gray-100',
+    hoverAccentClassName: 'group-hover:bg-[var(--interaction-hover)]',
     icon: <Boxes className="h-5 w-5" />,
   };
 }

package/src/features/service-apps/components/service-action-row.tsx

@@ -66,7 +66,7 @@ export function ServiceActionRow({
               <button
                 type="button"
                 disabled={grantAgentPending || availableAgents.length === 0}
-                className="ml-1 rounded-md p-1 text-muted-foreground/70 transition-colors hover:bg-muted hover:text-foreground focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-border disabled:cursor-not-allowed disabled:opacity-40"
+                className="ml-1 rounded-md p-1 text-muted-foreground/70 transition-colors hover:bg-[var(--interaction-hover)] hover:text-foreground focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-border disabled:cursor-not-allowed disabled:opacity-40"
                 title={t("serviceAppsGrantToAgent")}
                 aria-label={t("serviceAppsGrantToAgent")}
               >
@@ -85,7 +85,7 @@ export function ServiceActionRow({
                     onGrantAgent(action.id, agent.id);
                     setAgentMenuOpen(false);
                   }}
-                  className="flex w-full items-center gap-2 rounded-lg px-2 py-1.5 text-left text-xs text-foreground transition-colors hover:bg-muted focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-border"
+                  className="flex w-full items-center gap-2 rounded-lg px-2 py-1.5 text-left text-xs text-foreground transition-colors hover:bg-[var(--interaction-hover)] focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-border"
                 >
                   <Bot className="h-3.5 w-3.5 text-muted-foreground" />
                   <span className="min-w-0 truncate">
@@ -111,7 +111,7 @@ export function ServiceActionRow({
           <button
             type="button"
             onClick={() => onRevoke(grant)}
-            className="rounded-md p-1 text-muted-foreground/70 transition-colors hover:bg-muted hover:text-rose-600 focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-border"
+            className="rounded-md p-1 text-muted-foreground/70 transition-colors hover:bg-[var(--interaction-hover)] hover:text-rose-600 focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-border"
             title={t("serviceAppsRevokeGrant")}
             aria-label={t("serviceAppsRevokeGrant")}
           >

package/src/features/service-apps/components/service-app-list-item.tsx

@@ -99,7 +99,7 @@ export function ServiceAppListItem({
   };
   return (
     <TooltipProvider delayDuration={250}>
-      <section className="group bg-card transition-colors hover:bg-muted/25">
+      <section className="group bg-card transition-colors hover:bg-[var(--interaction-hover)]">
         <div className="flex items-start gap-3 px-4 py-3.5">
           <div className="flex h-9 w-9 shrink-0 items-center justify-center rounded-lg bg-muted text-muted-foreground">
             <Server className="h-4 w-4" />
@@ -155,7 +155,7 @@ export function ServiceAppListItem({
                   <PopoverTrigger asChild>
                     <button
                       type="button"
-                      className="rounded-md p-1.5 text-muted-foreground transition-colors hover:bg-muted hover:text-foreground focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-border disabled:opacity-50"
+                      className="rounded-md p-1.5 text-muted-foreground transition-colors hover:bg-[var(--interaction-hover)] hover:text-foreground focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-border disabled:opacity-50"
                       aria-label={t("serviceAppsMoreActions")}
                       disabled={deletePending}
                     >
@@ -208,7 +208,7 @@ export function ServiceAppListItem({
             <button
               type="button"
               onClick={() => onActionsOpenChange(!actionsOpen)}
-              className="flex min-w-0 flex-1 items-center justify-between gap-2 px-4 py-2 text-left text-xs text-muted-foreground transition-colors hover:bg-muted/40 focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-inset focus-visible:ring-border"
+              className="flex min-w-0 flex-1 items-center justify-between gap-2 px-4 py-2 text-left text-xs text-muted-foreground transition-colors hover:bg-[var(--interaction-hover)] focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-inset focus-visible:ring-border"
               aria-expanded={actionsOpen}
             >
               <div className="flex min-w-0 items-center gap-2">
@@ -228,7 +228,7 @@ export function ServiceAppListItem({
               <button
                 type="button"
                 onClick={() => setIsDiagnosticsOpen((open) => !open)}
-                className="flex shrink-0 items-center gap-1 border-l border-border/60 px-3 text-xs text-muted-foreground transition-colors hover:bg-muted/40 focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-inset focus-visible:ring-border"
+                className="flex shrink-0 items-center gap-1 border-l border-border/60 px-3 text-xs text-muted-foreground transition-colors hover:bg-[var(--interaction-hover)] focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-inset focus-visible:ring-border"
                 aria-expanded={isDiagnosticsOpen}
               >
                 <span>{t("serviceAppsDetails")}</span>

package/src/features/service-apps/components/service-apps-panel.tsx

@@ -110,7 +110,7 @@ export function ServiceAppsPanel({
             <TooltipTrigger asChild>
               <button
                 type="button"
-                className="rounded-md p-1.5 text-muted-foreground transition-colors hover:bg-muted hover:text-foreground focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-border"
+                className="rounded-md p-1.5 text-muted-foreground transition-colors hover:bg-[var(--interaction-hover)] hover:text-foreground focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-border"
                 aria-label={t("serviceAppsRefresh")}
                 onClick={refetch}
               >

package/src/features/settings/components/config/provider-model-list.tsx

@@ -143,7 +143,7 @@ export function ProviderModelList(props: ProviderModelListProps) {
             return (
               <label
                 key={modelName}
-                className="inline-flex max-w-full cursor-pointer items-center gap-2 rounded-full border border-border/55 bg-muted/45 px-3 py-1.5 hover:bg-muted/70"
+                className="inline-flex max-w-full cursor-pointer items-center gap-2 rounded-full border border-border/55 bg-muted/45 px-3 py-1.5 hover:bg-[var(--interaction-hover)]"
               >
                 <input
                   type="checkbox"
@@ -180,7 +180,7 @@ export function ProviderModelList(props: ProviderModelListProps) {
                 <PopoverTrigger asChild>
                   <button
                     type="button"
-                    className="inline-flex h-5 w-5 items-center justify-center rounded-full text-muted-foreground/70 opacity-100 transition-opacity hover:bg-muted hover:text-foreground md:opacity-0 md:group-hover:opacity-100 md:group-focus-within:opacity-100"
+                    className="inline-flex h-5 w-5 items-center justify-center rounded-full text-muted-foreground/70 opacity-100 transition-opacity hover:bg-[var(--interaction-hover)] hover:text-foreground md:opacity-0 md:group-hover:opacity-100 md:group-focus-within:opacity-100"
                     aria-label={t("providerModelThinkingTitle")}
                     title={t("providerModelThinkingTitle")}
                   >
@@ -224,8 +224,8 @@ export function ProviderModelList(props: ProviderModelListProps) {
                           }
                           className={`rounded-full border px-2.5 py-1 text-xs font-medium transition-colors ${
                             selected
-                              ? "border-foreground/15 bg-foreground text-background"
-                              : "border-border/55 bg-muted/50 text-muted-foreground hover:border-border hover:bg-muted hover:text-foreground"
+                              ? "border-[var(--interaction-selection-border)] bg-[var(--interaction-selection)] text-foreground"
+                              : "border-border/55 bg-muted/50 text-muted-foreground hover:border-border hover:bg-[var(--interaction-hover)] hover:text-foreground"
                           }`}
                         >
                           {formatThinkingLevelLabel(level)}
@@ -274,7 +274,7 @@ export function ProviderModelList(props: ProviderModelListProps) {
               <button
                 type="button"
                 onClick={() => onRemoveModel(modelName)}
-                className="inline-flex h-5 w-5 items-center justify-center rounded-full text-muted-foreground/70 opacity-100 transition-opacity hover:bg-muted hover:text-foreground md:opacity-0 md:group-hover:opacity-100 md:group-focus-within:opacity-100"
+                className="inline-flex h-5 w-5 items-center justify-center rounded-full text-muted-foreground/70 opacity-100 transition-opacity hover:bg-[var(--interaction-hover)] hover:text-foreground md:opacity-0 md:group-hover:opacity-100 md:group-focus-within:opacity-100"
                 aria-label={t("remove")}
               >
                 <X className="h-3 w-3" />

package/src/features/settings/components/config/provider-model-suggestions-panel.tsx

@@ -69,7 +69,7 @@ export function ProviderModelSuggestionsPanel(props: ProviderModelSuggestionsPan
         <button
           type='button'
           aria-expanded={expanded}
-          className='flex min-w-0 flex-1 items-center gap-1.5 rounded-lg px-2 py-1.5 text-left text-xs text-muted-foreground transition-colors hover:bg-muted/70 hover:text-foreground'
+          className='flex min-w-0 flex-1 items-center gap-1.5 rounded-lg px-2 py-1.5 text-left text-xs text-muted-foreground transition-colors hover:bg-[var(--interaction-hover)] hover:text-foreground'
           onClick={() => onExpandedChange(!expanded)}
         >
           <Sparkles className='h-3.5 w-3.5 shrink-0 text-primary' />
@@ -81,7 +81,7 @@ export function ProviderModelSuggestionsPanel(props: ProviderModelSuggestionsPan
         {models.length <= BULK_ADD_LIMIT ? (
           <button
             type='button'
-            className='shrink-0 rounded-lg px-2 py-1.5 text-xs font-medium text-primary transition-colors hover:bg-primary/10'
+            className='shrink-0 rounded-lg px-2 py-1.5 text-xs font-medium text-primary transition-colors hover:bg-[var(--interaction-hover)]'
             onClick={() => addModels(models)}
           >
             {t('providerModelsSuggestionsAddAll')}
@@ -105,7 +105,7 @@ export function ProviderModelSuggestionsPanel(props: ProviderModelSuggestionsPan
             {visibleModels.map((modelName) => (
               <label
                 key={modelName}
-                className='grid min-w-0 cursor-pointer grid-cols-[auto_minmax(0,1fr)] items-center gap-2 rounded-lg px-2 py-1.5 hover:bg-muted/70'
+                className='grid min-w-0 cursor-pointer grid-cols-[auto_minmax(0,1fr)] items-center gap-2 rounded-lg px-2 py-1.5 hover:bg-[var(--interaction-hover)]'
               >
                 <input
                   type='checkbox'
@@ -137,7 +137,7 @@ export function ProviderModelSuggestionsPanel(props: ProviderModelSuggestionsPan
             <button
               type='button'
               disabled={selectedModels.length === 0}
-              className='shrink-0 rounded-md bg-primary/10 px-2 py-1 text-[11px] font-medium text-primary transition-colors hover:bg-primary/15 disabled:cursor-not-allowed disabled:opacity-45'
+              className='shrink-0 rounded-md bg-primary/10 px-2 py-1 text-[11px] font-medium text-primary transition-colors hover:bg-[var(--interaction-hover)] disabled:cursor-not-allowed disabled:opacity-45'
               onClick={() => addModels(selectedModels)}
             >
               {t('providerModelsSuggestionsAddSelected')}

package/src/features/settings/components/config/provider-pill-selector.tsx

@@ -16,7 +16,7 @@ export function ProviderPillSelector(props: ProviderPillSelectorProps) {
             type="button"
             onClick={() => onChange(option.value)}
             aria-pressed={selected}
-            className={`rounded-full border px-3 py-1.5 text-xs font-medium transition-colors ${selected ? 'border-foreground/15 bg-foreground text-background' : 'border-border/55 bg-muted/50 text-muted-foreground hover:border-border hover:bg-muted hover:text-foreground'}`}
+            className={`rounded-full border px-3 py-1.5 text-xs font-medium transition-colors ${selected ? 'border-[var(--interaction-selection-border)] bg-[var(--interaction-selection)] text-foreground' : 'border-border/55 bg-muted/50 text-muted-foreground hover:border-border hover:bg-[var(--interaction-hover)] hover:text-foreground'}`}
           >
             {option.label}
           </button>

package/src/features/settings/pages/appearance-settings-page.tsx

@@ -100,8 +100,8 @@ export function AppearanceSettingsPage() {
                     className={cn(
                       'flex min-w-0 items-start gap-3 rounded-lg px-3 py-2.5 text-left transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring/40',
                       selected
-                        ? 'bg-card text-foreground shadow-sm'
-                        : 'text-muted-foreground hover:bg-card/60 hover:text-foreground'
+                        ? 'bg-[var(--interaction-selection)] text-foreground'
+                        : 'text-muted-foreground hover:bg-[var(--interaction-hover)] hover:text-foreground'
                     )}
                   >
                     <span

package/src/features/settings/pages/providers-config-page.tsx

@@ -156,7 +156,7 @@ export function ProvidersConfigPage() {
                 <div className='grid max-h-[24rem] grid-cols-2 gap-2 overflow-y-auto sm:grid-cols-3'>
                   <button
                     type='button'
-                    className='flex min-h-20 w-full flex-col items-start gap-2 rounded-lg border border-dashed border-border/70 bg-muted/20 px-3 py-2 text-left transition-colors hover:border-border hover:bg-muted/45'
+                    className='flex min-h-20 w-full flex-col items-start gap-2 rounded-lg border border-dashed border-border/70 bg-muted/20 px-3 py-2 text-left transition-colors hover:border-border hover:bg-[var(--interaction-hover)]'
                     onClick={async () => {
                       try {
                         const result = await createProvider.mutateAsync({
@@ -183,7 +183,7 @@ export function ProvidersConfigPage() {
                     <button
                       key={template.providerType}
                       type='button'
-                      className='flex min-h-20 w-full flex-col items-start gap-2 rounded-lg border border-border/55 bg-muted/15 px-3 py-2 text-left transition-colors hover:border-border/80 hover:bg-muted/40'
+                      className='flex min-h-20 w-full flex-col items-start gap-2 rounded-lg border border-border/55 bg-muted/15 px-3 py-2 text-left transition-colors hover:border-border/80 hover:bg-[var(--interaction-hover)]'
                       onClick={async () => {
                         try {
                           const result = await createProvider.mutateAsync({
@@ -254,8 +254,8 @@ export function ProvidersConfigPage() {
                   className={cn(
                     'group w-full rounded-xl p-2.5 text-left transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring/40',
                     resolvedSelectedProvider === provider.providerId
-                      ? 'bg-background/95 text-foreground shadow-sm'
-                      : 'bg-transparent text-muted-foreground hover:bg-background/65 hover:text-foreground'
+                      ? 'bg-[var(--interaction-selection)] text-foreground'
+                      : 'bg-transparent text-muted-foreground hover:bg-[var(--interaction-hover)] hover:text-foreground'
                   )}
                 >
                   <div className='relative min-h-10'>
@@ -300,7 +300,7 @@ export function ProvidersConfigPage() {
                         <PopoverTrigger asChild>
                           <button
                             type='button'
-                            className='inline-flex h-7 w-7 items-center justify-center rounded-lg text-muted-foreground/70 hover:bg-muted hover:text-foreground'
+                            className='inline-flex h-7 w-7 items-center justify-center rounded-lg text-muted-foreground/70 hover:bg-[var(--interaction-hover)] hover:text-foreground'
                             onClick={(event) => event.stopPropagation()}
                             title={t('more')}
                           >
@@ -310,7 +310,7 @@ export function ProvidersConfigPage() {
                         <PopoverContent className='w-40 p-1' align='end' onClick={(event) => event.stopPropagation()}>
                           <button
                             type='button'
-                            className='flex w-full items-center gap-2 rounded-md px-2 py-2 text-sm text-red-600 hover:bg-red-50'
+                            className='flex w-full items-center gap-2 rounded-md px-2 py-2 text-sm text-red-600 hover:bg-destructive/10'
                             onClick={() => setProviderToDelete(provider.providerId)}
                           >
                             <Trash2 className='h-4 w-4' />