@nextclaw/ui 0.26.2 → 0.26.4

package/dist/index.html

@@ -258,47 +258,47 @@
     })();
   </script>
   <title>NextClaw</title>
-  <script type="module" crossorigin src="/assets/main-CR0SrTBf.js"></script>
+  <script type="module" crossorigin src="/assets/main-bEWCGDHr.js"></script>
   <link rel="modulepreload" crossorigin href="/assets/chunk-DF37yw5_.js">
   <link rel="modulepreload" crossorigin href="/assets/preload-helper-ca-nBW7U.js">
-  <link rel="modulepreload" crossorigin href="/assets/i18n-qBGEbcW6.js">
-  <link rel="modulepreload" crossorigin href="/assets/api-Cjq-o1VN.js">
-  <link rel="modulepreload" crossorigin href="/assets/client-DudCRJw4.js">
-  <link rel="modulepreload" crossorigin href="/assets/es2015-CsjAAQ6X.js">
-  <link rel="modulepreload" crossorigin href="/assets/createLucideIcon-D7hvIHV-.js">
-  <link rel="modulepreload" crossorigin href="/assets/select-CctTN205.js">
-  <link rel="modulepreload" crossorigin href="/assets/context-menu-rd7b_kVD.js">
-  <link rel="modulepreload" crossorigin href="/assets/x--xxUvHKW.js">
-  <link rel="modulepreload" crossorigin href="/assets/dialog-C7glmAQJ.js">
+  <link rel="modulepreload" crossorigin href="/assets/i18n-OGmF0Ws_.js">
+  <link rel="modulepreload" crossorigin href="/assets/api-BZvNpFOS.js">
+  <link rel="modulepreload" crossorigin href="/assets/client-DKKbdJ6Q.js">
+  <link rel="modulepreload" crossorigin href="/assets/es2015-BiB05Sav.js">
+  <link rel="modulepreload" crossorigin href="/assets/createLucideIcon-DE0sB9Nu.js">
+  <link rel="modulepreload" crossorigin href="/assets/select-Y9IEbx9x.js">
+  <link rel="modulepreload" crossorigin href="/assets/context-menu-DHVVdHzN.js">
+  <link rel="modulepreload" crossorigin href="/assets/x-DSz9cGhy.js">
+  <link rel="modulepreload" crossorigin href="/assets/dialog-BUfWO8hr.js">
   <link rel="modulepreload" crossorigin href="/assets/katex-CsAM73R9.js">
-  <link rel="modulepreload" crossorigin href="/assets/puzzle-CWHfFyYN.js">
+  <link rel="modulepreload" crossorigin href="/assets/puzzle-D_TiFXOv.js">
   <link rel="modulepreload" crossorigin href="/assets/middleware-B--6mAUM.js">
-  <link rel="modulepreload" crossorigin href="/assets/use-viewport-layout-CPZUmTPi.js">
-  <link rel="modulepreload" crossorigin href="/assets/book-open-AteA89HX.js">
+  <link rel="modulepreload" crossorigin href="/assets/use-viewport-layout-vmbQUNT6.js">
+  <link rel="modulepreload" crossorigin href="/assets/book-open-CmRdT3N1.js">
   <link rel="modulepreload" crossorigin href="/assets/navigation-history-CzErJuPG.js">
-  <link rel="modulepreload" crossorigin href="/assets/theme-provider-hlle7Skk.js">
-  <link rel="modulepreload" crossorigin href="/assets/confirm-dialog-DShT64F6.js">
-  <link rel="modulepreload" crossorigin href="/assets/download-BYgECE0n.js">
+  <link rel="modulepreload" crossorigin href="/assets/theme-provider-BjF1Eowc.js">
+  <link rel="modulepreload" crossorigin href="/assets/confirm-dialog-8vqYZ0wy.js">
+  <link rel="modulepreload" crossorigin href="/assets/download-CKqS1Ksj.js">
   <link rel="modulepreload" crossorigin href="/assets/host-capabilities-DuIFVsvM.js">
-  <link rel="modulepreload" crossorigin href="/assets/navigation-link-32iM1-e6.js">
-  <link rel="modulepreload" crossorigin href="/assets/eye-BBuTzJ53.js">
-  <link rel="modulepreload" crossorigin href="/assets/tag-chip-Bjzb4-qW.js">
-  <link rel="modulepreload" crossorigin href="/assets/loader-circle-BA7EMkih.js">
-  <link rel="modulepreload" crossorigin href="/assets/trash-2-C5KH5Rw9.js">
-  <link rel="modulepreload" crossorigin href="/assets/refresh-cw-y3L6PyLt.js">
-  <link rel="modulepreload" crossorigin href="/assets/use-desktop-capabilities-CEg9-DrQ.js">
-  <link rel="modulepreload" crossorigin href="/assets/status-dot-CensgJZC.js">
-  <link rel="modulepreload" crossorigin href="/assets/doc-browser-context-BlhBAOLH.js">
-  <link rel="modulepreload" crossorigin href="/assets/card-BLXvBstA.js">
-  <link rel="modulepreload" crossorigin href="/assets/provider-models-C3frdXeW.js">
-  <link rel="modulepreload" crossorigin href="/assets/use-config-CPl_F79t.js">
-  <link rel="modulepreload" crossorigin href="/assets/app-presenter-provider-C02YPoMr.js">
-  <link rel="modulepreload" crossorigin href="/assets/provider-scoped-model-input-CYetrPYZ.js">
-  <link rel="modulepreload" crossorigin href="/assets/settings-2-EPflrNk6.js">
-  <link rel="modulepreload" crossorigin href="/assets/pwa-CiGUjpcd.js">
-  <link rel="modulepreload" crossorigin href="/assets/login-page-Cd84lpVV.js">
+  <link rel="modulepreload" crossorigin href="/assets/navigation-link-DC-Pku0Y.js">
+  <link rel="modulepreload" crossorigin href="/assets/eye-bKzylu3p.js">
+  <link rel="modulepreload" crossorigin href="/assets/tag-chip-D-6aPuuh.js">
+  <link rel="modulepreload" crossorigin href="/assets/loader-circle-Clq1Gtb1.js">
+  <link rel="modulepreload" crossorigin href="/assets/trash-2-DER2EJKK.js">
+  <link rel="modulepreload" crossorigin href="/assets/refresh-cw-BG8VfcdA.js">
+  <link rel="modulepreload" crossorigin href="/assets/use-desktop-capabilities-ezKJwKqg.js">
+  <link rel="modulepreload" crossorigin href="/assets/status-dot-Cb8ewlUr.js">
+  <link rel="modulepreload" crossorigin href="/assets/doc-browser-context-ClLgMbxd.js">
+  <link rel="modulepreload" crossorigin href="/assets/card-CdRBL1E0.js">
+  <link rel="modulepreload" crossorigin href="/assets/provider-models-DFQgF4hS.js">
+  <link rel="modulepreload" crossorigin href="/assets/use-config-BM5jC65L.js">
+  <link rel="modulepreload" crossorigin href="/assets/app-presenter-provider-BcYL-VNe.js">
+  <link rel="modulepreload" crossorigin href="/assets/provider-scoped-model-input-DaONL0j_.js">
+  <link rel="modulepreload" crossorigin href="/assets/settings-2-CrGx9_De.js">
+  <link rel="modulepreload" crossorigin href="/assets/pwa-C9ac_1dg.js">
+  <link rel="modulepreload" crossorigin href="/assets/login-page-BT3GV3Sb.js">
   <link rel="stylesheet" crossorigin href="/assets/app-presenter-provider-jNGlmBLe.css">
-  <link rel="stylesheet" crossorigin href="/assets/main-DXH6EdXI.css">
+  <link rel="stylesheet" crossorigin href="/assets/main-kqMRTwOs.css">
 </head>
 
 <body>

package/dist/panel-standalone.html

@@ -5,20 +5,20 @@
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <meta name="theme-color" content="#ffffff" />
     <title>Panel App · NextClaw</title>
-    <script type="module" crossorigin src="/assets/panelStandalone-C9EKaApN.js"></script>
+    <script type="module" crossorigin src="/assets/panelStandalone-CX8X2hjh.js"></script>
     <link rel="modulepreload" crossorigin href="/assets/chunk-DF37yw5_.js">
     <link rel="modulepreload" crossorigin href="/assets/preload-helper-ca-nBW7U.js">
-    <link rel="modulepreload" crossorigin href="/assets/i18n-qBGEbcW6.js">
-    <link rel="modulepreload" crossorigin href="/assets/api-Cjq-o1VN.js">
-    <link rel="modulepreload" crossorigin href="/assets/client-DudCRJw4.js">
-    <link rel="modulepreload" crossorigin href="/assets/es2015-CsjAAQ6X.js">
-    <link rel="modulepreload" crossorigin href="/assets/createLucideIcon-D7hvIHV-.js">
-    <link rel="modulepreload" crossorigin href="/assets/context-menu-rd7b_kVD.js">
-    <link rel="modulepreload" crossorigin href="/assets/x--xxUvHKW.js">
-    <link rel="modulepreload" crossorigin href="/assets/dialog-C7glmAQJ.js">
+    <link rel="modulepreload" crossorigin href="/assets/i18n-OGmF0Ws_.js">
+    <link rel="modulepreload" crossorigin href="/assets/api-BZvNpFOS.js">
+    <link rel="modulepreload" crossorigin href="/assets/client-DKKbdJ6Q.js">
+    <link rel="modulepreload" crossorigin href="/assets/es2015-BiB05Sav.js">
+    <link rel="modulepreload" crossorigin href="/assets/createLucideIcon-DE0sB9Nu.js">
+    <link rel="modulepreload" crossorigin href="/assets/context-menu-DHVVdHzN.js">
+    <link rel="modulepreload" crossorigin href="/assets/x-DSz9cGhy.js">
+    <link rel="modulepreload" crossorigin href="/assets/dialog-BUfWO8hr.js">
     <link rel="modulepreload" crossorigin href="/assets/navigation-history-CzErJuPG.js">
-    <link rel="modulepreload" crossorigin href="/assets/theme-provider-hlle7Skk.js">
-    <link rel="stylesheet" crossorigin href="/assets/panelStandalone-Y91OJkgV.css">
+    <link rel="modulepreload" crossorigin href="/assets/theme-provider-BjF1Eowc.js">
+    <link rel="stylesheet" crossorigin href="/assets/panelStandalone-BRg7B1EI.css">
   </head>
   <body>
     <div id="root"></div>

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@nextclaw/ui",
-  "version": "0.26.2",
+  "version": "0.26.4",
   "private": false,
   "type": "module",
   "license": "MIT",
@@ -35,9 +35,9 @@
     "zod": "^3.23.8",
     "zustand": "^5.0.2",
     "@nextclaw/agent-chat": "0.3.14",
-    "@nextclaw/client-sdk": "0.12.8",
-    "@nextclaw/agent-chat-ui": "0.10.1",
+    "@nextclaw/client-sdk": "0.12.9",
     "@nextclaw/ncp": "0.11.2",
+    "@nextclaw/agent-chat-ui": "0.11.0",
     "@nextclaw/ncp-react": "0.5.30",
     "@nextclaw/ncp-http-agent-client": "0.4.25",
     "@nextclaw/ncp-toolkit": "0.6.27",

package/src/app/components/layout/__tests__/sidebar.layout.test.tsx

@@ -107,7 +107,7 @@ describe("Sidebar", () => {
     expect(backLink).toBeTruthy();
     expect(header.className).not.toContain("bg-white");
     expect(header.className).not.toContain("rounded-2xl");
-    expect(backLink.className).toContain("hover:bg-[hsl(var(--gray-200)/0.6)]");
+    expect(backLink.className).toContain("hover:bg-[var(--sidebar-interaction-hover)]");
   });
 
   it("keeps the settings navigation in the expected product order", () => {
@@ -207,7 +207,7 @@ describe("Sidebar", () => {
     expect(screen.queryByRole("combobox", { name: "Language" })).toBeNull();
     expect(accountEntry.className).toContain("py-2");
     expect(accountEntry.className).toContain("text-muted-foreground");
-    expect(accountEntry.className).toContain("hover:bg-[hsl(var(--gray-200)/0.6)]");
+    expect(accountEntry.className).toContain("hover:bg-[var(--sidebar-interaction-hover)]");
     expect(navigationList?.className).toContain("space-y-0.5");
     expect(footer?.className).toContain("space-y-0.5");
     expect(footer?.firstElementChild?.textContent).toContain("Help Docs");

package/src/app/components/layout/page-layout.tsx

@@ -37,6 +37,8 @@ interface PageHeaderProps {
     description?: string;
     actions?: React.ReactNode;
     headingLevel?: 1 | 2;
+    /** The mobile shell already provides the page title. */
+    mobileTitleInShell?: boolean;
     className?: string;
 }
 
@@ -45,6 +47,7 @@ export function PageHeader({
     description,
     actions,
     headingLevel = 2,
+    mobileTitleInShell = false,
     className
 }: PageHeaderProps) {
     const Heading = headingLevel === 1 ? 'h1' : 'h2';
@@ -54,8 +57,8 @@ export function PageHeader({
             data-theme-surface="header"
             className={cn('flex shrink-0 flex-col gap-3 sm:flex-row sm:items-start sm:justify-between', className)}
         >
-            <div className="min-w-0">
-                <Heading className="text-xl font-semibold tracking-tight text-foreground">{title}</Heading>
+            <div className={cn("min-w-0", mobileTitleInShell && !description && "hidden md:block")}>
+                <Heading className={cn("text-xl font-semibold tracking-tight text-foreground", mobileTitleInShell && "hidden md:block")}>{title}</Heading>
                 {description && (
                     <p className="mt-1 max-w-2xl text-sm leading-6 text-muted-foreground">{description}</p>
                 )}

package/src/app/components/layout/sidebar-rail.styles.ts

@@ -10,13 +10,13 @@ export const SIDEBAR_RAIL_ITEM_GAP_CLASS = "gap-1";
 // Use theme neutral tokens directly so legacy gray utility overrides cannot
 // turn sidebar feedback into a content selection or accent surface.
 export const SIDEBAR_ITEM_SURFACE_CLASS =
-  "rounded-xl text-muted-foreground transition-colors duration-base hover:bg-[hsl(var(--gray-200)/0.6)] hover:text-foreground focus-within:bg-[hsl(var(--gray-200)/0.6)] has-[[data-context-menu-open]]:bg-[hsl(var(--gray-200)/0.6)]";
+  "rounded-xl text-muted-foreground transition-colors duration-base hover:bg-[var(--sidebar-interaction-hover)] hover:text-foreground focus-within:bg-[var(--sidebar-interaction-hover)] has-[[data-context-menu-open]]:bg-[var(--sidebar-interaction-hover)]";
 
 export const SIDEBAR_ITEM_ACTIVE_SURFACE_CLASS =
-  "bg-[hsl(var(--gray-200)/0.8)] text-foreground hover:bg-[hsl(var(--gray-200)/0.8)] focus-within:bg-[hsl(var(--gray-200)/0.8)] has-[[data-context-menu-open]]:bg-[hsl(var(--gray-200)/0.8)]";
+  "bg-[var(--sidebar-interaction-selection)] text-foreground hover:bg-[var(--sidebar-interaction-selection)] focus-within:bg-[var(--sidebar-interaction-selection)] has-[[data-context-menu-open]]:bg-[var(--sidebar-interaction-selection)]";
 
 export const SIDEBAR_RAIL_SURFACE_CLASS =
-  `${SIDEBAR_ITEM_SURFACE_CLASS} active:bg-[hsl(var(--gray-200)/0.8)] focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-border`;
+  `${SIDEBAR_ITEM_SURFACE_CLASS} active:bg-[var(--sidebar-interaction-selection)] focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-border`;
 
 export const SIDEBAR_RAIL_ACTIVE_SURFACE_CLASS = SIDEBAR_ITEM_ACTIVE_SURFACE_CLASS;
 

package/src/app/configs/__tests__/app-navigation.config.test.ts

@@ -29,6 +29,16 @@ describe("panel app main navigation", () => {
 describe("project home navigation", () => {
   const translate = (key: string) => key;
 
+  it("returns project details to the project picker", () => {
+    expect(resolveMobileRouteMeta("/projects/example/overview", translate).backTarget).toBe("/projects");
+  });
+
+  it("labels scheduled tasks and returns to chat", () => {
+    expect(resolveMobileRouteMeta("/cron", translate)).toEqual({
+      title: "cron", backTarget: "/chat", backLabel: "chat",
+    });
+  });
+
   it("keeps projects in the main workspace without a parallel global nav item", () => {
     expect(isMainWorkspaceRoute("/projects")).toBe(true);
     expect(getMainSidebarNavItems(translate).map((item) => item.target)).not.toContain("/projects");

package/src/app/configs/app-navigation.config.ts

@@ -259,8 +259,8 @@ export function resolveMobileRouteMeta(
   if (normalized === "/projects" || normalized.startsWith("/projects/")) {
     return {
       title: translate("projectsTitle"),
-      backTarget: "/chat",
-      backLabel: translate("chat"),
+      backTarget: normalized === "/projects" ? "/chat" : "/projects",
+      backLabel: translate(normalized === "/projects" ? "chat" : "projectsTitle"),
     };
   }
 
@@ -280,6 +280,10 @@ export function resolveMobileRouteMeta(
     };
   }
 
+  if (normalized === "/cron" || normalized.startsWith("/cron/")) {
+    return { title: translate("cron"), backTarget: "/chat", backLabel: translate("chat") };
+  }
+
   for (const item of settingsItems) {
     if (matchesRouteTarget(normalized, item.target)) {
       return {

package/src/app/styles/charcoal-theme.css

@@ -42,9 +42,6 @@
     --secondary-foreground: var(--gray-800);
     --accent: 0 0% 19%;
     --accent-foreground: var(--gray-900);
-    --interaction-hover: hsl(var(--gray-200));
-    --interaction-selection: hsl(202 38% 27%);
-    --interaction-selection-border: hsl(202 48% 40%);
     --muted: var(--gray-100);
     --muted-foreground: var(--gray-500);
     --destructive: 0 72% 60%;

package/src/app/styles/design-system.css

@@ -12,8 +12,15 @@
    }
 
    :root {
+      --shadow-popover: 0 12px 36px -8px rgb(0 0 0 / 0.18), 0 3px 10px -2px rgb(0 0 0 / 0.08);
       color-scheme: light;
 
+      /* Mobile density: hit target, visual feedback, and chrome are separate. */
+      --control-touch-size: 2.75rem;
+      --icon-control-size: 2.5rem;
+      --icon-feedback-size: 2rem;
+      --mobile-header-height: 3rem;
+
       /* ========================================
        BRAND COLORS (Natural Olive)
        ======================================== */
@@ -80,9 +87,16 @@
       /* Accent */
       --accent: var(--brand-50);
       --accent-foreground: var(--brand-700);
-      --interaction-hover: hsl(0 0% 96%);
-      --interaction-selection: hsl(211 100% 92%);
-      --interaction-selection-border: hsl(211 75% 84%);
+      --interaction-hover: hsl(var(--foreground) / 0.04);
+      --interaction-selection: hsl(var(--foreground) / 0.07);
+      --interaction-selection-border: hsl(var(--foreground) / 0.12);
+      /* Desktop sidebar feedback matches the verified VPS v0.54.2 baseline. */
+      --sidebar-interaction-hover: hsl(var(--gray-200) / 0.6);
+      --sidebar-interaction-selection: hsl(var(--gray-200) / 0.8);
+      --sidebar-segment-selection: hsl(var(--gray-200) / 0.7);
+      /* Mobile conversation rows retain their separate paper surface. */
+      --session-interaction-hover: hsl(var(--background) / 0.65);
+      --session-interaction-selection: hsl(var(--background) / 0.9);
 
       /* Muted */
       --muted: var(--gray-100);
@@ -717,9 +731,6 @@
       --secondary-foreground: var(--gray-800);
       --accent: 151 32% 18%;
       --accent-foreground: 148 34% 84%;
-      --interaction-hover: hsl(var(--gray-200));
-      --interaction-selection: hsl(211 48% 30%);
-      --interaction-selection-border: hsl(211 48% 42%);
       --muted: var(--gray-100);
       --muted-foreground: var(--gray-500);
       --destructive: 0 70% 52%;
@@ -828,6 +839,7 @@
 
 @layer base {
    :root[data-theme-appearance="dark"] {
+      --shadow-popover: 0 8px 32px -8px rgb(0 0 0 / 0.4), 0 2px 8px -2px rgb(0 0 0 / 0.24);
       --link-foreground: 213 94% 68%;
       --link-foreground-hover: 213 97% 79%;
    }

package/src/app/styles/island-theme.css

@@ -44,9 +44,6 @@
     --secondary-foreground: var(--gray-800);
     --accent: 151 28% 88%;
     --accent-foreground: var(--brand-800);
-    --interaction-hover: hsl(151 25% 86% / 0.72);
-    --interaction-selection: hsl(153 35% 80% / 0.82);
-    --interaction-selection-border: hsl(157 37% 58% / 0.88);
     --muted: var(--gray-100);
     --muted-foreground: var(--gray-500);
     --destructive: 5 61% 47%;
@@ -323,8 +320,8 @@
     -webkit-backdrop-filter: blur(18px) saturate(0.9);
     backdrop-filter: blur(18px) saturate(0.9);
     background-color: hsl(var(--popover) / 0.9);
-    border-color: hsl(var(--border) / 0.7);
-    box-shadow: 0 18px 42px -24px hsl(158 27% 20% / 0.46);
+    border-color: hsl(var(--border) / 0.4);
+    box-shadow: var(--shadow-popover);
   }
 
   :root[data-theme="island"] [data-theme-overlay="tooltip"] {
@@ -446,16 +443,6 @@
     border-radius: 0;
   }
 
-  :root[data-theme="island"]
-    [data-theme-surface="navigation"]
-    :is([aria-current="page"], [aria-selected="true"], [data-state="active"]),
-  :root[data-theme="island"]
-    [data-theme-surface="utility-rail"]
-    :is([aria-pressed="true"], [data-state="active"]) {
-    background-color: hsl(151 27% 84% / 0.68);
-    color: hsl(var(--brand-800));
-  }
-
   :root[data-theme="island"]
     :is(
       .custom-scrollbar,

package/src/features/agents/components/agent-details-dialog.tsx

@@ -350,7 +350,7 @@ function DetailItem(props: {
   return (
     <div
       className={cn(
-        "grid min-w-0 grid-cols-[10rem_minmax(0,1fr)] items-baseline gap-x-2",
+        "grid min-w-0 grid-cols-1 sm:grid-cols-[10rem_minmax(0,1fr)] items-baseline gap-x-2 gap-y-1",
         (wide || isStructuredValue) && "sm:col-span-2",
       )}
     >

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

@@ -1,4 +1,5 @@
 import { PageResourceActionItems } from '@/features/right-panel-resources';
+import { ACTION_FEEDBACK, ACTION_MENU_ITEM_CLASS } from '@/shared/components/ui/actions/action-feedback';
 import { pageResourceFromSystemObject } from '@/features/right-panel-resources';
 import { useMemo, useState } from "react";
 import {
@@ -97,10 +98,10 @@ function AgentActionMenuItem(props: {
     <button
       type="button"
       className={cn(
-        "flex w-full items-center gap-2 rounded-lg px-3 py-2 text-left text-sm transition-colors disabled:cursor-not-allowed disabled:opacity-50",
+        ACTION_MENU_ITEM_CLASS,
         destructive
-          ? "text-destructive hover:bg-destructive/10"
-          : "text-foreground hover:bg-muted",
+          ? ACTION_FEEDBACK.destructive
+          : `text-foreground ${ACTION_FEEDBACK.item}`,
       )}
       onClick={onClick}
       disabled={disabled}
@@ -342,6 +343,7 @@ export function AgentsPage() {
   return (
     <PageLayout className="space-y-6">
       <PageHeader
+        mobileTitleInShell
         headingLevel={1}
         title={t("agentsHeroEyebrow")}
         description={t("agentsHeroDescription")}

package/src/features/app-data/components/app-data-removal-choice.tsx

@@ -25,7 +25,7 @@ export function AppDataRemovalChoice({
       onClick={onClick}
       className={cn(
         'flex items-start gap-3 rounded-xl border px-3 py-3 text-left transition-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-border disabled:cursor-not-allowed disabled:opacity-50',
-        checked ? 'border-foreground/25 bg-muted/55' : 'border-border/60 hover:bg-muted/35',
+        checked ? 'border-[var(--interaction-selection-border)] bg-[var(--interaction-selection)]' : 'border-border/60 hover:bg-[var(--interaction-hover)]',
       )}
     >
       <span className={cn(

package/src/features/apps/components/app-package-card.tsx

@@ -1,4 +1,5 @@
 import { useRef, useState } from "react";
+import { ACTION_FEEDBACK, ACTION_MENU_ITEM_CLASS } from '@/shared/components/ui/actions/action-feedback';
 import type { AppDataEntry, AppPackageOperationView, AppPackageView } from "@nextclaw/client-sdk";
 import {
   AlertCircle,
@@ -80,11 +81,11 @@ export function AppPackageCard({
 
   return (
     <Card surface="flat" hover={false} className="overflow-hidden border-border/60 shadow-[0_1px_2px_rgba(0,0,0,0.025)]">
-      <div className="flex items-start gap-3.5 px-4 pb-3.5 pt-4">
+      <div className="flex max-md:grid max-md:grid-cols-[auto_minmax(0,1fr)] items-start gap-3.5 px-4 pb-3.5 pt-4">
         <AppArtwork icon={appPackage.icon} name={displayName} />
         <div className="min-w-0 flex-1">
           <div className="flex min-w-0 items-center gap-2">
-            <h2 className="truncate text-sm font-semibold text-foreground">{displayName}</h2>
+            <h2 className="truncate max-md:whitespace-normal max-md:break-words text-sm font-semibold text-foreground">{displayName}</h2>
             <span className={cn("shrink-0 rounded-full px-2 py-0.5 text-[10px] font-medium", availability.className)}>{availability.label}</span>
           </div>
           {availability.message ? (
@@ -125,7 +126,7 @@ export function AppPackageCard({
             <code className="min-w-0 truncate font-mono text-[10px]">{appPackage.storage.dataDirectory}</code>
           </div>
         </div>
-        <div className="flex shrink-0 items-center gap-1">
+        <div className="flex shrink-0 items-center gap-1 max-md:col-start-2 max-md:justify-end">
           <Button
             type="button"
             size="sm"
@@ -148,7 +149,7 @@ export function AppPackageCard({
                 aria-label={t("appPackagesMoreActions")}
                 title={t("appPackagesMoreActions")}
                 disabled={pending}
-                className="rounded-full p-2 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 disabled:opacity-50"
+                className="max-md:min-h-11 max-md:min-w-11 inline-flex items-center justify-center rounded-full p-2 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 disabled:opacity-50"
               >
                 <MoreVertical className="h-4 w-4" />
               </button>
@@ -314,8 +315,8 @@ function AppPackageMenuItem({ destructive = false, icon: Icon, label, onClick }:
       type="button"
       onClick={onClick}
       className={cn(
-        "flex w-full items-center gap-2 rounded-lg px-2.5 py-2 text-left text-sm transition-colors",
-        destructive ? "text-destructive hover:bg-destructive/10" : "text-muted-foreground hover:bg-[var(--interaction-hover)] hover:text-accent-foreground",
+        ACTION_MENU_ITEM_CLASS,
+        destructive ? ACTION_FEEDBACK.destructive : `text-foreground ${ACTION_FEEDBACK.item}`,
       )}
     >
       <Icon className="h-4 w-4 shrink-0" />

package/src/features/channels/pages/channels-list-page.tsx

@@ -138,7 +138,7 @@ export function ChannelsList() {
                         <a
                           href={tutorialUrl}
                           onClick={(event) => event.stopPropagation()}
-                          className='inline-flex h-7 w-7 items-center justify-center rounded-md text-muted-foreground/45 transition-colors hover:bg-muted hover:text-foreground'
+                          className='inline-flex h-7 w-7 items-center justify-center rounded-md text-muted-foreground/45 transition-colors hover:bg-[var(--interaction-hover)] hover:text-foreground'
                           title={t('channelsGuideTitle')}
                         >
                           <ExternalLink className='h-3.5 w-3.5' />

package/src/features/chat/components/chat-sidebar-list-mode-switch.tsx

@@ -14,7 +14,7 @@ export function ChatSidebarListModeSwitch({ isProjectFirstView, onSelectMode }:
       <span
         aria-hidden="true"
         className={cn(
-          'pointer-events-none absolute bottom-0.5 left-0.5 top-0.5 w-[calc(50%-2px)] rounded-full bg-gray-200/70 transition-transform duration-200 ease-out motion-reduce:transition-none',
+          'pointer-events-none absolute bottom-0.5 left-0.5 top-0.5 w-[calc(50%-2px)] rounded-full bg-[var(--sidebar-segment-selection)] transition-transform duration-200 ease-out motion-reduce:transition-none',
           isProjectFirstView && 'translate-x-full',
         )}
       />

package/src/features/chat/components/conversation/__tests__/chat-conversation-header-section.test.tsx

@@ -8,6 +8,7 @@ import { useChatQueryStore } from "@/features/chat/stores/ncp-chat-query.store";
 import { useChatSessionListStore } from "@/features/chat/stores/chat-session-list.store";
 import { useChatThreadStore } from "@/features/chat/stores/chat-thread.store";
 import { viewportLayoutManager } from "@/app/managers/viewport-layout.manager";
+import { ChatSessionSwitcherGroups } from "@/features/chat/features/session/components/session-header/chat-session-switcher-groups";
 import type { NcpSessionListItemView } from "@/features/chat/features/ncp/hooks/use-ncp-session-list-view";
 import type { NcpSessionSummaryView, SessionEntryView } from "@/shared/lib/api";
 
@@ -312,42 +313,51 @@ describe("ChatConversationHeaderSection", () => {
     ).toBeTruthy();
   });
 
-  it("switches to collapsible project groups inside the header popover", async () => {
+  it("renders compact collapsible project groups inside the header popover", async () => {
     const user = userEvent.setup();
-    viewportLayoutManager.setSidebarCollapsed(true);
-    mocks.sessionItems = [
-      createSessionListItem({
+    const alphaItem = createSessionListItem({
         key: "parent-session-1",
         label: "Parent Task",
         projectName: "Alpha",
         projectRoot: "/workspace/alpha",
-      }),
-      createSessionListItem({
+      });
+    const betaItem = createSessionListItem({
         key: "session:ncp-2",
         label: "Background Task",
         projectName: "Beta",
         projectRoot: "/workspace/beta",
-      }),
-    ];
+      });
 
-    renderHeaderSection();
-    await user.click(screen.getByRole("button", { name: /Switch session/ }));
-    await user.click(screen.getByRole("button", { name: "Project" }));
+    render(
+      <ChatSessionSwitcherGroups
+        collapsedProjectRoots={[]}
+        dateGroups={[]}
+        isProjectFirstView
+        onSelect={mocks.selectSession}
+        onToggleProjectCollapsed={mocks.toggleProjectCollapsed}
+        optimisticReadAtBySessionKey={{}}
+        projectGroups={[
+          { projectRoot: "/workspace/alpha", projectName: "Alpha", items: [alphaItem], latestUpdatedAt: 1, isPinned: false },
+          { projectRoot: "/workspace/beta", projectName: "Beta", items: [betaItem], latestUpdatedAt: 1, isPinned: false },
+        ]}
+        selectedSessionKey="parent-session-1"
+        sessionTypeOptions={[]}
+      />,
+    );
 
-    expect(mocks.setListMode).toHaveBeenCalledWith("project-first");
-    const alphaGroup = screen.getByRole("region", { name: "Alpha" });
+    const alphaGroup = await screen.findByRole("region", { name: "Alpha" });
     const alphaToggle = within(alphaGroup).getByRole("button", {
       name: "Collapse project · Alpha",
     });
     expect(alphaToggle.getAttribute("aria-expanded")).toBe("true");
+    expect(alphaToggle.className).toContain("h-8");
     expect(alphaToggle.className).not.toContain("bg-muted");
+    expect(alphaToggle.querySelector('[title="/workspace/alpha"]')?.getAttribute("class")).toContain("text-[13px]");
+    expect(alphaGroup.parentElement?.className).toContain("space-y-0.5");
     expect(within(alphaGroup).getByText("Parent Task")).toBeTruthy();
 
     await user.click(alphaToggle);
     expect(mocks.toggleProjectCollapsed).toHaveBeenCalledWith("/workspace/alpha");
-    expect(
-      within(screen.getByRole("region", { name: "Alpha" })).queryByText("Parent Task"),
-    ).toBeNull();
   });
 
   it("keeps the desktop title plain while the sidebar is expanded", () => {
@@ -447,6 +457,8 @@ describe("ChatConversationHeaderSection", () => {
     const searchInput = screen.getByRole("textbox", {
       name: "Search session key / label",
     });
+    expect(searchInput.className).toContain("max-md:text-[13px]");
+    expect(searchInput.className).toContain("max-md:min-h-0");
     await user.type(searchInput, "Background");
     await user.click(screen.getByRole("button", { name: /Background Task/ }));
 

package/src/features/chat/components/conversation/chat-conversation-content.tsx

@@ -95,6 +95,9 @@ export function ChatConversationContent({
 }: ChatConversationContentProps) {
   const threadRef = useRef<HTMLDivElement>(null);
   const contentRef = useRef<HTMLDivElement>(null);
+  const turnAnchorRef = useRef<HTMLDivElement>(null);
+  const turnFrameRef = useRef<HTMLDivElement>(null);
+  const latestUserMessageId = messages.findLast((message) => message.role === "user")?.id ?? null;
   const hasConversationContent = messages.length > 0 || isSending;
   const readingKey = createConversationScrollRestorationKey(sessionKey, showWelcome);
   const initialReadingPosition = useMemo(() => readingKey ? scrollRestorationManager.read(readingKey) : null, [readingKey]);
@@ -112,6 +115,8 @@ export function ChatConversationContent({
     isLoading: isHistoryLoading,
     hasContent: hasConversationContent,
     contentVersion: messages[messages.length - 1] ?? isSending,
+    stickyThresholdPx: 80,
+    turnSpace: { key: latestUserMessageId, anchorRef: turnAnchorRef, frameRef: turnFrameRef },
   });
   const hasMessages = messages.length > 0;
   const handleScroll = useCallback(
@@ -148,7 +153,7 @@ export function ChatConversationContent({
         {showWelcome ? (
           (welcomeSlot ?? null)
         ) : (
-          <div ref={contentRef} className="pb-7">
+          <div ref={turnFrameRef}><div ref={contentRef} className="pb-7">
             {hasConversationContent ? (
               <ChatConversationTrack className="relative py-4 sm:py-5">
                 <ConversationHistoryStatus historyError={historyError} isLoadingPreviousMessages={isLoadingPreviousMessages} onLoadPreviousMessages={onLoadPreviousMessages} />
@@ -163,6 +168,7 @@ export function ChatConversationContent({
                   onLoadMessageDetails={onLoadMessageDetails}
                   scrollRef={threadRef}
                   sessionKey={sessionKey}
+                  turnAnchorRef={turnAnchorRef}
                 />
                 {isContextCompacting ? <ChatContextCompactionDivider /> : null}
               </ChatConversationTrack>
@@ -172,7 +178,7 @@ export function ChatConversationContent({
                 {bottomSlot}
               </ChatConversationTrack>
             ) : null}
-          </div>
+          </div></div>
         )}
       </div>
       {hasMessages && !showWelcome && !isAtBottom ? (

package/src/features/chat/components/conversation/chat-conversation-header-section.tsx

@@ -19,7 +19,7 @@ import { useChatSessionListStore } from "@/features/chat/stores/chat-session-lis
 import { useChatThreadStore } from "@/features/chat/stores/chat-thread.store";
 import { useChatQueryStore } from "@/features/chat/stores/ncp-chat-query.store";
 import { AgentIdentityAvatar } from "@/shared/components/common/agent-identity";
-import { IconActionButton } from "@/shared/components/ui/actions/icon-action-button";
+import { IconActionButton, IconActionGroup } from "@/shared/components/ui/actions/icon-action-button";
 import {
   getSessionProjectName,
   normalizeSessionProjectRootValue,
@@ -150,7 +150,7 @@ export function ChatConversationHeaderSection({
         ) : null
       }
       actions={
-        <div className="flex shrink-0 items-center gap-1.5">
+        <IconActionGroup>
           {layoutMode === "mobile" && sessionKey ? (
             <IconActionButton
               icon={<SquarePen className="h-4 w-4" />}
@@ -180,7 +180,7 @@ export function ChatConversationHeaderSection({
             onToggleWorkspace={toggleWorkspace}
             onDeleteSession={presenter.chatThreadManager.deleteSession}
           />
-        </div>
+        </IconActionGroup>
       }
     />
   );