@nextclaw/ui 0.15.1 → 0.15.3

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

@@ -7,7 +7,7 @@ import { type SessionContextView } from '@/features/chat/features/session/utils/
 import type { SessionRunStatus } from '@/features/chat/types/session-run-status.types';
 import { cn } from '@/shared/lib/utils';
 import { t } from '@/shared/lib/i18n';
-import { Check, GitBranch, Pencil, X } from 'lucide-react';
+import { Check, GitBranch, Pencil, Pin, X } from 'lucide-react';
 
 type ChatSidebarSessionItemProps = {
   sessionKey: string;
@@ -15,6 +15,7 @@ type ChatSidebarSessionItemProps = {
   showUnreadDot: boolean;
   runStatus?: SessionRunStatus;
   context: SessionContextView;
+  isPinned: boolean;
   title: string;
   previewText: string;
   trailingText: string;
@@ -31,6 +32,7 @@ type ChatSidebarSessionItemProps = {
   onDraftLabelChange: (value: string) => void;
   onSave: () => void | Promise<void>;
   onCancel: () => void;
+  onTogglePinned: () => void;
 };
 
 type ChatSidebarSessionEditingViewProps = Pick<
@@ -72,7 +74,6 @@ function ChatSidebarSessionEditingView({
             icon={<Check className="h-3.5 w-3.5" />}
             label={t('save')}
             tooltip={false}
-            className="h-7 w-7 rounded-lg text-gray-500 hover:bg-white hover:text-gray-900"
             onClick={() => void onSave()}
             disabled={isSaving}
           />
@@ -80,7 +81,6 @@ function ChatSidebarSessionEditingView({
             icon={<X className="h-3.5 w-3.5" />}
             label={t('cancel')}
             tooltip={false}
-            className="h-7 w-7 rounded-lg text-gray-500 hover:bg-white hover:text-gray-900"
             onClick={onCancel}
             disabled={isSaving}
           />
@@ -100,6 +100,7 @@ function ChatSidebarSessionDisplayView({
   showUnreadDot,
   runStatus,
   context,
+  isPinned,
   title,
   previewText,
   trailingText,
@@ -109,14 +110,15 @@ function ChatSidebarSessionDisplayView({
   childSessionCount = 0,
   onSelect,
   onOpenChildSessions,
-  onStartEditing
+  onStartEditing,
+  onTogglePinned
 }: ChatSidebarSessionDisplayViewProps) {
-  const trailingControlsClassName = childSessionCount > 0 && onOpenChildSessions ? 'pr-14' : 'pr-6';
+  const trailingControlsClassName = childSessionCount > 0 && onOpenChildSessions ? 'pr-20' : 'pr-12';
 
   return (
     <div className="group/session relative">
       <button type="button" onClick={onSelect} className="w-full text-left">
-        <div className={cn('flex min-w-0 items-start', trailingControlsClassName)}>
+        <div className={cn('flex min-h-6 min-w-0 items-center', trailingControlsClassName)}>
           <span className="flex min-w-0 items-center gap-1.5">
             {agentId?.trim() && agentId.trim().toLowerCase() !== 'main' ? (
               <AgentAvatar
@@ -126,7 +128,7 @@ function ChatSidebarSessionDisplayView({
                 className="h-5 w-5 shrink-0"
               />
             ) : null}
-            <span className="truncate font-medium">{title}</span>
+            <span className="truncate leading-6 font-medium">{title}</span>
             {context.label ? (
               <span
                 className={cn(
@@ -140,7 +142,7 @@ function ChatSidebarSessionDisplayView({
               </span>
             ) : null}
             {context.icon ? (
-              <span className="inline-flex h-[1.125rem] w-[1.125rem] shrink-0 items-center justify-center">
+              <span className="inline-flex h-5 w-5 shrink-0 items-center justify-center">
                 <SessionContextIconNode icon={context.icon} className={active ? 'text-gray-700' : 'text-gray-500'} />
               </span>
             ) : null}
@@ -168,7 +170,7 @@ function ChatSidebarSessionDisplayView({
             onOpenChildSessions();
           }}
           className={cn(
-            'absolute right-6 top-0 inline-flex h-5 items-center gap-1 rounded-md px-1.5 text-[10px] font-medium text-gray-400 transition-all hover:bg-white hover:text-gray-900',
+            'absolute right-12 top-0 inline-flex h-6 items-center gap-1 rounded-md px-1.5 text-[10px] font-medium text-muted-foreground transition-colors hover:bg-black/10 hover:text-foreground',
             active
               ? 'opacity-100'
               : 'opacity-0 group-hover/session:opacity-100 group-focus-within/session:opacity-100'
@@ -181,23 +183,41 @@ function ChatSidebarSessionDisplayView({
         </button>
       ) : null}
       {runStatus ? (
-        <span className="absolute right-0 top-0 inline-flex h-5 w-5 items-center justify-center transition-opacity group-hover/session:opacity-0 group-focus-within/session:opacity-0">
+        <span className="absolute right-0 top-0 inline-flex h-6 w-6 items-center justify-center transition-opacity group-hover/session:opacity-0 group-focus-within/session:opacity-0">
           <SessionRunBadge status={runStatus} />
         </span>
       ) : null}
-      <IconActionButton
-        icon={<Pencil className="h-3 w-3" />}
-        label={t('edit')}
-        tooltip={false}
-        onClick={(event) => {
-          event.stopPropagation();
-          onStartEditing();
-        }}
-        className={cn(
-          'absolute right-0 top-0 inline-flex h-5 w-5 items-center justify-center rounded-md text-gray-400 transition-all hover:bg-white hover:text-gray-900',
-          'opacity-0 group-hover/session:opacity-100 group-focus-within/session:opacity-100'
-        )}
-      />
+      <div className="absolute right-0 top-0 flex h-6 items-center gap-0.5 opacity-0 transition-opacity group-hover/session:opacity-100 group-focus-within/session:opacity-100">
+        <IconActionButton
+          size="sm"
+          tone="strong"
+          icon={
+            <Pin
+              className={cn(
+                'h-3.5 w-3.5',
+                isPinned && 'fill-current text-foreground',
+              )}
+            />
+          }
+          label={t(isPinned ? 'chatSidebarUnpinSession' : 'chatSidebarPinSession')}
+          tooltipSide="right"
+          onClick={(event) => {
+            event.stopPropagation();
+            onTogglePinned();
+          }}
+        />
+        <IconActionButton
+          size="sm"
+          tone="strong"
+          icon={<Pencil className="h-3.5 w-3.5" />}
+          label={t('edit')}
+          tooltipSide="right"
+          onClick={(event) => {
+            event.stopPropagation();
+            onStartEditing();
+          }}
+        />
+      </div>
     </div>
   );
 }
@@ -208,6 +228,7 @@ export function ChatSidebarSessionItem({
   showUnreadDot,
   runStatus,
   context,
+  isPinned,
   title,
   previewText,
   trailingText,
@@ -223,7 +244,8 @@ export function ChatSidebarSessionItem({
   onStartEditing,
   onDraftLabelChange,
   onSave,
-  onCancel
+  onCancel,
+  onTogglePinned
 }: ChatSidebarSessionItemProps) {
   return (
     <div
@@ -249,6 +271,7 @@ export function ChatSidebarSessionItem({
           showUnreadDot={showUnreadDot}
           runStatus={runStatus}
           context={context}
+          isPinned={isPinned}
           title={title}
           previewText={previewText}
           trailingText={trailingText}
@@ -259,6 +282,7 @@ export function ChatSidebarSessionItem({
           childSessionCount={childSessionCount}
           onOpenChildSessions={onOpenChildSessions}
           onStartEditing={onStartEditing}
+          onTogglePinned={onTogglePinned}
         />
       )}
     </div>

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

@@ -19,7 +19,6 @@ type ChatSidebarSessionListProps = {
   defaultSessionType: string;
   sessionTypeOptions: SessionTypeOption[];
   renderSessionItem: (item: NcpSessionListItemView) => ReactNode;
-  onCreateSession: (sessionType: string, projectRoot?: string | null) => void;
 };
 
 function ChatSidebarEmptyState({ label }: { label: string }) {
@@ -36,7 +35,6 @@ export function ChatSidebarSessionList({
   groups,
   isLoading,
   isProjectFirstView,
-  onCreateSession,
   projectGroups,
   renderSessionItem,
   sessionTypeOptions,
@@ -54,7 +52,6 @@ export function ChatSidebarSessionList({
         defaultSessionType={defaultSessionType}
         sessionTypeOptions={sessionTypeOptions}
         renderSessionItem={renderSessionItem}
-        onCreateSession={onCreateSession}
       />
     );
   }

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

@@ -9,7 +9,6 @@ import { ChatSessionProjectDialog } from './chat-session-project-dialog';
 import { t } from '@/shared/lib/i18n';
 
 const SESSION_HEADER_ACTION_GROUP_CLASS = 'flex shrink-0 items-center gap-1.5';
-const SESSION_HEADER_ACTION_BUTTON_CLASS = 'h-7 w-7 shrink-0 rounded-lg text-muted-foreground/70 hover:bg-accent hover:text-accent-foreground';
 
 type ChatSessionHeaderActionsProps = {
   sessionKey: string;
@@ -65,7 +64,6 @@ export function ChatSessionHeaderActions({
         <IconActionButton
           icon={<GitBranch className="h-4 w-4" />}
           label={t('chatSessionOpenChildSessions')}
-          className={SESSION_HEADER_ACTION_BUTTON_CLASS}
           onClick={onOpenChildSessions}
           disabled={isBusy}
         />
@@ -74,7 +72,6 @@ export function ChatSessionHeaderActions({
         <IconActionButton
           icon={<AlarmClock className="h-4 w-4" />}
           label={t('chatSessionOpenCronJobs')}
-          className={SESSION_HEADER_ACTION_BUTTON_CLASS}
           onClick={onOpenSessionCronJobs}
           disabled={isBusy}
         />
@@ -85,7 +82,6 @@ export function ChatSessionHeaderActions({
             icon={<MoreVertical className="h-4 w-4" />}
             label={t('chatSessionMoreActions')}
             tooltip={false}
-            className={SESSION_HEADER_ACTION_BUTTON_CLASS}
             disabled={isBusy}
           />
         </PopoverTrigger>

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

@@ -40,7 +40,7 @@ import { t } from "@/shared/lib/i18n";
 import { cn } from "@/shared/lib/utils";
 
 const SWITCHER_TRIGGER_CLASS =
-  "group inline-flex min-w-0 max-w-full items-center gap-1.5 rounded-md px-1.5 py-1 text-sm font-medium text-foreground transition-colors hover:bg-accent hover:text-accent-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary/40";
+  "group inline-flex min-w-0 max-w-full items-center gap-1.5 rounded-md px-1.5 py-1 text-sm font-medium text-foreground transition-colors hover:bg-accent hover:text-accent-foreground focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-border";
 
 function ChatSessionTitle({ title }: { title: string }) {
   return (
@@ -111,7 +111,7 @@ function ChatSessionSwitchItem({
       type="button"
       aria-current={active ? "page" : undefined}
       className={cn(
-        "flex w-full min-w-0 items-start gap-2 rounded-lg px-2.5 py-2 text-left transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary/40",
+        "flex w-full min-w-0 items-start gap-2 rounded-lg px-2.5 py-2 text-left transition-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-border",
         active
           ? "bg-accent text-accent-foreground"
           : "text-popover-foreground hover:bg-accent/70",

package/src/features/chat/features/session/utils/chat-sidebar-session-groups.utils.ts

@@ -13,6 +13,7 @@ export type ChatSidebarProjectGroup = {
   projectName: string;
   items: NcpSessionListItemView[];
   latestUpdatedAt: number;
+  isPinned: boolean;
 };
 
 export function getSessionActivityAtTimestamp(
@@ -33,8 +34,19 @@ export function sortSessionItemsByActivityAtDesc(
   );
 }
 
+function sortSessionItemsByPinnedActivityAtDesc(
+  items: NcpSessionListItemView[],
+  pinnedSessionKeys: ReadonlySet<string>,
+): NcpSessionListItemView[] {
+  return [...items].sort((left, right) => {
+    const pinnedDifference = Number(pinnedSessionKeys.has(right.session.key)) - Number(pinnedSessionKeys.has(left.session.key));
+    return pinnedDifference || getSessionActivityAtTimestamp(right) - getSessionActivityAtTimestamp(left);
+  });
+}
+
 export function groupSessionsByDate(
   items: NcpSessionListItemView[],
+  pinnedSessionKeys: ReadonlySet<string> = new Set(),
 ): ChatSidebarDateGroup[] {
   const now = new Date();
   const todayStart = new Date(
@@ -50,7 +62,13 @@ export function groupSessionsByDate(
   const previous7: NcpSessionListItemView[] = [];
   const older: NcpSessionListItemView[] = [];
 
-  for (const item of items) {
+  const unpinnedItems = items.filter((item) => !pinnedSessionKeys.has(item.session.key));
+  const pinnedItems = sortSessionItemsByPinnedActivityAtDesc(
+    items.filter((item) => pinnedSessionKeys.has(item.session.key)),
+    pinnedSessionKeys,
+  );
+
+  for (const item of unpinnedItems) {
     const ts = getSessionActivityAtTimestamp(item);
     if (ts >= todayStart) {
       today.push(item);
@@ -64,6 +82,7 @@ export function groupSessionsByDate(
   }
 
   const groups: ChatSidebarDateGroup[] = [];
+  if (pinnedItems.length > 0) groups.push({ label: t("chatSidebarPinned"), items: pinnedItems });
   if (today.length > 0) groups.push({ label: t("chatSidebarToday"), items: today });
   if (yesterday.length > 0)
     groups.push({ label: t("chatSidebarYesterday"), items: yesterday });
@@ -75,6 +94,8 @@ export function groupSessionsByDate(
 
 export function groupSessionsByProject(
   items: NcpSessionListItemView[],
+  pinnedSessionKeys: ReadonlySet<string> = new Set(),
+  pinnedProjectRoots: ReadonlySet<string> = new Set(),
 ): ChatSidebarProjectGroup[] {
   const grouped = new Map<string, ChatSidebarProjectGroup>();
 
@@ -101,15 +122,16 @@ export function groupSessionsByProject(
         projectRoot,
       items: [item],
       latestUpdatedAt: updatedAt,
+      isPinned: pinnedProjectRoots.has(projectRoot),
     });
   }
 
   return [...grouped.values()]
     .map((group) => ({
       ...group,
-      items: sortSessionItemsByActivityAtDesc(group.items),
+      items: sortSessionItemsByPinnedActivityAtDesc(group.items, pinnedSessionKeys),
     }))
-    .sort((left, right) => right.latestUpdatedAt - left.latestUpdatedAt);
+    .sort((left, right) => Number(right.isPinned) - Number(left.isPinned) || right.latestUpdatedAt - left.latestUpdatedAt);
 }
 
 export function groupChildSessionsByParentKey(

package/src/features/chat/features/welcome/components/chat-welcome-capability-grid.tsx

@@ -1,4 +1,5 @@
 import { AlarmClock, BrainCircuit, MessageCircle } from 'lucide-react';
+import { cn } from '@/shared/lib/utils';
 import { t } from '@/shared/lib/i18n';
 
 const WELCOME_CAPABILITIES = [
@@ -34,13 +35,17 @@ export function ChatWelcomeCapabilityGrid({
         return (
           <button
             key={capability.titleKey}
+            type="button"
             onClick={() => onSelectPrompt(t(capability.promptKey))}
-            className="min-w-0 rounded-2xl border border-border bg-card p-3 text-left text-card-foreground shadow-card transition-[border-color,box-shadow,transform] hover:border-primary/30 hover:shadow-card-hover sm:p-4"
+            className={cn(
+              'min-w-0 rounded-xl border border-border/75 bg-card p-3 text-left text-card-foreground shadow-none transition-colors sm:p-3.5',
+              'hover:bg-muted/40',
+            )}
           >
-            <div className="mb-3 flex h-9 w-9 items-center justify-center rounded-xl bg-accent">
-              <Icon className="h-4.5 w-4.5 text-primary" />
+            <div className="mb-2.5 flex h-8 w-8 items-center justify-center rounded-lg bg-muted text-muted-foreground">
+              <Icon className="h-4 w-4" />
             </div>
-            <div className="mb-1 text-sm font-semibold text-foreground">
+            <div className="mb-1 text-sm font-medium text-foreground">
               {t(capability.titleKey)}
             </div>
             <div className="text-[11px] leading-relaxed text-muted-foreground">

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

@@ -49,7 +49,7 @@ export function ChatWelcomeProjectPicker({
       <PopoverTrigger asChild>
         <button
           type="button"
-          className="inline-flex min-w-0 max-w-full items-center gap-1.5 rounded-lg px-2 py-1.5 text-left font-medium text-muted-foreground transition-colors hover:bg-accent hover:text-accent-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary/25"
+          className="inline-flex min-w-0 max-w-full items-center gap-1.5 rounded-lg px-2 py-1.5 text-left font-medium text-muted-foreground transition-colors hover:bg-accent hover:text-accent-foreground focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-border"
           title={projectRoot ?? undefined}
           aria-label={t('chatWelcomeProjectPickerLabel')}
           disabled={!selectable || isSaving}

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

@@ -39,7 +39,7 @@ export function ChatWelcomeSessionTypePicker({
       <PopoverTrigger asChild>
         <button
           type="button"
-          className="inline-flex min-w-0 max-w-full items-center gap-1.5 rounded-lg px-2 py-1.5 text-left font-medium text-muted-foreground transition-colors hover:bg-accent hover:text-accent-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary/25"
+          className="inline-flex min-w-0 max-w-full items-center gap-1.5 rounded-lg px-2 py-1.5 text-left font-medium text-muted-foreground transition-colors hover:bg-accent hover:text-accent-foreground focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-border"
           aria-label={t('chatWelcomeSessionTypePickerLabel')}
         >
           {selectedOption.icon?.src ? (

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

@@ -1,6 +1,5 @@
 import type { ReactNode } from 'react';
 import { useState } from 'react';
-import { Bot } from 'lucide-react';
 import { ChatSessionProjectDialog } from '@/features/chat/features/session/components/session-header/chat-session-project-dialog';
 import { ChatWelcomeAgentPicker } from '@/features/chat/features/welcome/components/chat-welcome-agent-picker';
 import { ChatWelcomeCapabilityGrid } from '@/features/chat/features/welcome/components/chat-welcome-capability-grid';
@@ -64,10 +63,6 @@ export function ChatWelcome({
   return (
     <div className="flex min-h-full items-center justify-center px-4 py-8 sm:p-8">
       <div className="min-w-0 w-full max-w-[min(760px,100%)]">
-        <div className="mx-auto mb-5 flex h-14 w-14 items-center justify-center rounded-2xl border border-border bg-accent shadow-card">
-          <Bot className="h-8 w-8 text-primary" />
-        </div>
-
         <div className="text-center">
           <h2 className="text-2xl font-semibold text-foreground sm:text-3xl">
             {t('chatWelcomeTitle')}