@nextclaw/ui 0.26.2 → 0.26.4

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/components/inbox-delivery-content.tsx

@@ -74,7 +74,7 @@ function InboxHtmlContent({
   return (
     <iframe
       className={cn(
-        "w-full rounded-xl bg-background",
+        "w-full md:rounded-xl bg-background",
         fillHeight
           ? "h-full min-h-0 border-0"
           : "h-[min(60vh,680px)] min-h-[360px] border border-border/70",

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

@@ -2,7 +2,9 @@ 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, ArrowLeft, Inbox, MessageCircle, RotateCcw, Trash2 } from "lucide-react";
+import { Archive, 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";
 import { useAppPresenter } from "@/app/components/app-presenter-provider";
 import { PageHeader } from "@/app/components/layout/page-layout";
@@ -93,8 +95,9 @@ function InboxListPane({
             key={item.id}
             type="button"
             onClick={() => onFilterChange(item.id)}
+            aria-pressed={filter === item.id}
             className={cn(
-              "inline-flex items-center gap-1.5 rounded-md px-2.5 py-1.5 text-xs font-medium transition-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-border",
+              "inline-flex min-h-11 items-center gap-1.5 rounded-md px-3 py-1.5 text-sm font-medium transition-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-border md:min-h-0 md:px-2.5 md:text-xs",
               filter === item.id
                 ? "bg-[var(--interaction-selection)] text-foreground"
                 : "text-muted-foreground hover:bg-[var(--interaction-hover)] hover:text-foreground",
@@ -117,12 +120,12 @@ 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)}`}
                   className={cn(
-                    "block rounded-lg px-2.5 py-2 pr-10 text-[13px] transition-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-border",
+                    "block rounded-lg px-2.5 py-3 pr-12 text-sm md:py-2 md:pr-10 md:text-[13px] transition-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-border",
                     activeDeliveryId === delivery.id
                       ? "text-foreground"
                       : "text-foreground/80 hover:text-foreground",
@@ -165,20 +168,16 @@ function InboxListPane({
 function InboxDetailPane({
   delivery,
   error,
-  isMobile,
   pending,
   onArchiveToggle,
-  onBack,
   onContinue,
   onDelete,
   onReadToggle,
 }: {
   delivery: InboxDelivery | null;
   error: string | null;
-  isMobile: boolean;
   pending: boolean;
   onArchiveToggle: () => void;
-  onBack: () => void;
   onContinue: () => void;
   onDelete: () => void;
   onReadToggle: () => void;
@@ -193,17 +192,7 @@ function InboxDetailPane({
   const isHtml = delivery.contentType === "html";
   return (
     <main className="flex min-h-0 flex-col">
-      <div className="shrink-0 border-b border-border/50 px-5 py-3 sm:px-6">
-        {isMobile ? (
-          <button
-            type="button"
-            onClick={onBack}
-            className="mb-3 inline-flex items-center gap-1.5 text-sm text-muted-foreground hover:text-foreground"
-          >
-            <ArrowLeft className="h-4 w-4" />
-            {t("inboxTitle")}
-          </button>
-        ) : null}
+      <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">
           <h2
             title={delivery.title}
@@ -223,7 +212,7 @@ function InboxDetailPane({
       <div className={cn(
         "min-h-0 flex-1",
         isHtml
-          ? "p-3 sm:p-4"
+          ? "p-0 md:p-4"
           : "custom-scrollbar overflow-y-auto px-5 py-5 sm:px-6 sm:py-6",
       )}
       ref={scrollRef}
@@ -239,10 +228,10 @@ function InboxDetailPane({
           />
         </div>
       </div>
-      <div className="shrink-0 border-t border-border/50 px-5 py-3 sm:px-6">
+      <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}
-        <div className="flex flex-col gap-2 sm:flex-row sm:items-center sm:justify-between">
-          <div className="flex flex-wrap items-center gap-1">
+        <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}>
               {delivery.readAt ? t("inboxMarkUnread") : t("inboxMarkRead")}
             </Button>
@@ -257,6 +246,15 @@ 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")}
@@ -365,14 +363,14 @@ export function InboxPage() {
   const showDetail = !isMobile || Boolean(activeDelivery);
 
   return (
-    <div className="flex h-full min-h-0 flex-col gap-6">
-      <PageHeader
+    <div className="flex h-full min-h-0 flex-col md:gap-6">
+      {!isMobile ? <PageHeader
         headingLevel={1}
         title={t("inboxTitle")}
         className="px-4 sm:px-0"
-      />
+      /> : null}
 
-      <div className="min-h-0 flex-1 overflow-hidden border-y border-border/60 bg-background sm:rounded-2xl sm:border">
+      <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>
         ) : (
@@ -386,10 +384,8 @@ export function InboxPage() {
             {showDetail ? <InboxDetailPane
               delivery={activeDelivery}
               error={error}
-              isMobile={isMobile}
               pending={pendingAction !== null}
               onArchiveToggle={toggleArchive}
-              onBack={() => navigate("/inbox")}
               onContinue={continueInChat}
               onDelete={() => void deleteDelivery()}
               onReadToggle={toggleRead}

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-parts.tsx

@@ -7,6 +7,7 @@ import {
   SelectValue,
 } from "@/shared/components/ui/select";
 import { Skeleton } from "@/shared/components/ui/skeleton";
+import { Input } from "@/shared/components/ui/input";
 import { t } from "@/shared/lib/i18n";
 import { Loader2, PackageSearch } from "lucide-react";
 import type { Ref } from "react";
@@ -30,10 +31,10 @@ export function FilterPanel({
 }) {
   return (
     <div className="mb-4">
-      <div className="flex items-center gap-3">
+      <div className="flex flex-wrap items-center gap-3">
         <div className="relative min-w-0 flex-1">
           <PackageSearch className="absolute left-3 top-1/2 h-4 w-4 -translate-y-1/2 text-gray-400" />
-          <input
+          <Input
             value={searchText}
             onChange={(event) => onSearchTextChange(event.target.value)}
             placeholder={searchPlaceholder}
@@ -52,7 +53,7 @@ export function FilterPanel({
             value={sort}
             onValueChange={(value) => onSortChange(value as MarketplaceSort)}
           >
-            <SelectTrigger className="h-9 w-[150px] shrink-0 rounded-lg">
+            <SelectTrigger className="h-9 w-[110px] sm:w-[150px] shrink-0 rounded-lg">
               <SelectValue />
             </SelectTrigger>
             <SelectContent>

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

@@ -142,21 +142,21 @@ export function MarketplacePage({
     <PageLayout className="flex h-full min-h-0 flex-col pb-0">
       {!curatedSceneRoute.isSceneRoute && (
         <>
-          <div className="mb-3 flex items-start justify-between gap-3 border-b border-gray-200/60">
+          <div className="mb-3 flex flex-wrap items-start justify-between gap-3 border-b border-border/60">
             <Tabs
               value={scope}
               onValueChange={(value) => setScope(value as ScopeType)}
             >
-              <TabsList className="mb-0 h-auto flex-1 justify-start gap-6 rounded-none border-b-0 bg-transparent p-0 text-gray-500">
+              <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/panel-apps/components/panel-app-open-standalone-menu-item.tsx

@@ -1,4 +1,6 @@
 import { ExternalLink } from "lucide-react";
+import { ACTION_FEEDBACK, ACTION_MENU_ITEM_CLASS } from '@/shared/components/ui/actions/action-feedback';
+import { cn } from '@/shared/lib/utils';
 import type { PanelAppEntryView } from "@/shared/lib/api";
 import { t } from "@/shared/lib/i18n";
 
@@ -22,7 +24,7 @@ export function PanelAppOpenStandaloneMenuItem({
       // `opener` keeps this trusted same-origin target auxiliary, so the current browser owns the new tab.
       rel="opener"
       referrerPolicy="no-referrer"
-      className="flex w-full items-center gap-2 rounded-lg px-2.5 py-2 text-left text-sm text-muted-foreground transition-colors hover:bg-[var(--interaction-hover)] hover:text-accent-foreground"
+      className={cn(ACTION_MENU_ITEM_CLASS, ACTION_FEEDBACK.item)}
       onClick={onSelect}
     >
       <ExternalLink className="h-4 w-4 shrink-0" />

package/src/features/projects/components/project-overview.tsx

@@ -32,7 +32,7 @@ export function ProjectOverview({
   return (
     <div className="space-y-5">
       <section
-        className="grid gap-3 sm:grid-cols-2 lg:grid-cols-4"
+        className="grid grid-cols-2 gap-3 lg:grid-cols-4"
         aria-label={t("projectsWorkSummary")}
       >
         {summary.data ? (

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

@@ -81,8 +81,17 @@ export function ProjectsPage() {
     );
   if (!selectedProject || !tab)
     return (
-      <main className="p-6 text-sm text-muted-foreground">
-        {t("projectsChoose")}
+      <main className="space-y-3 p-4 text-sm text-muted-foreground sm:p-6">
+        <label htmlFor="project-home-selection" className="block font-medium text-foreground">{t("projectsChoose")}</label>
+        <select
+          id="project-home-selection"
+          value=""
+          onChange={(event) => navigate(`/projects/${encodeURIComponent(event.target.value)}/overview`)}
+          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>
+          {registered.map((project) => <option key={project.id} value={project.id}>{project.name}</option>)}
+        </select>
       </main>
     );
 

package/src/features/projects/pages/projects-page.test.tsx

@@ -135,11 +135,13 @@ describe("ProjectsPage", () => {
     ).toBeTruthy();
   });
 
-  it("asks the user to choose from the sidebar when no project route is selected", () => {
+  it("lets users enter a project without a desktop sidebar", () => {
     renderPage("/projects");
     expect(mocks.useProjectAgreement).toHaveBeenCalledWith(null);
     expect(mocks.useProjectSkills).toHaveBeenCalledWith(null);
-    expect(screen.getByText(/Choose a project|选择项目/)).toBeTruthy();
+    const picker = screen.getByRole("combobox", { name: /Choose a project|选择项目/ });
+    fireEvent.change(picker, { target: { value: "project-1" } });
+    expect(screen.getByRole("tab", { name: /Overview|概览/ }).getAttribute("aria-selected")).toBe("true");
   });
 
   it("loads each fixed project material only on its own tab", () => {

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