@nextclaw/ui 0.15.10 → 0.15.12

package/src/shared/components/settings/setting-row.tsx

@@ -1,51 +1,82 @@
-import * as React from "react";
-import { cva, type VariantProps } from "class-variance-authority";
-import { cn } from "@/shared/lib/utils";
+import * as React from 'react';
+import { cva, type VariantProps } from 'class-variance-authority';
+import { cn } from '@/shared/lib/utils';
 
 const settingRowVariants = cva(
-  "flex items-start justify-between gap-4 rounded-xl border p-4",
+  'grid min-h-16 grid-cols-1 gap-3 px-4 py-3.5 sm:grid-cols-[minmax(0,1fr)_auto] sm:items-center sm:gap-6',
   {
     variants: {
       tone: {
-        default: "border-gray-200 bg-white",
-        muted: "border-gray-200 bg-gray-50",
+        default: '',
+        muted: 'bg-muted/55'
       },
+      layout: {
+        responsive: '',
+        stacked: 'sm:grid-cols-1 sm:items-start sm:gap-3'
+      }
     },
     defaultVariants: {
-      tone: "default",
-    },
-  },
+      tone: 'default',
+      layout: 'responsive'
+    }
+  }
+);
+
+export interface SettingsSectionProps extends Omit<React.HTMLAttributes<HTMLElement>, 'title'> {
+  title?: React.ReactNode;
+  description?: React.ReactNode;
+  actions?: React.ReactNode;
+}
+
+export const SettingsSection = React.forwardRef<HTMLElement, SettingsSectionProps>(
+  ({ actions, children, className, description, title, ...props }, ref) => (
+    <section ref={ref} className={cn('space-y-2.5', className)} {...props}>
+      {title || description || actions ? (
+        <div className='flex items-end justify-between gap-4 px-1'>
+          <div className='min-w-0'>
+            {title ? <h3 className='text-sm font-semibold text-foreground'>{title}</h3> : null}
+            {description ? <p className='mt-0.5 text-xs leading-5 text-muted-foreground'>{description}</p> : null}
+          </div>
+          {actions ? <div className='shrink-0'>{actions}</div> : null}
+        </div>
+      ) : null}
+      {children}
+    </section>
+  )
+);
+
+SettingsSection.displayName = 'SettingsSection';
+
+export const SettingsGroup = React.forwardRef<HTMLDivElement, React.HTMLAttributes<HTMLDivElement>>(
+  ({ className, ...props }, ref) => (
+    <div
+      ref={ref}
+      className={cn('divide-y divide-border/55 overflow-hidden rounded-2xl bg-muted/45 text-foreground', className)}
+      {...props}
+    />
+  )
 );
 
+SettingsGroup.displayName = 'SettingsGroup';
+
 export interface SettingRowProps
-  extends
-    Omit<React.HTMLAttributes<HTMLDivElement>, "title">,
-    VariantProps<typeof settingRowVariants> {
+  extends Omit<React.HTMLAttributes<HTMLDivElement>, 'title'>, VariantProps<typeof settingRowVariants> {
   title: React.ReactNode;
   description?: React.ReactNode;
   control?: React.ReactNode;
 }
 
 export const SettingRow = React.forwardRef<HTMLDivElement, SettingRowProps>(
-  (
-    { className, tone, title, description, control, children, ...props },
-    ref,
-  ) => (
-    <div
-      ref={ref}
-      className={cn(settingRowVariants({ tone }), className)}
-      {...props}
-    >
-      <div className="min-w-0 flex-1 space-y-2">
-        <div className="text-sm font-medium text-gray-900">{title}</div>
-        {description ? (
-          <p className="text-sm leading-6 text-gray-500">{description}</p>
-        ) : null}
-        {children}
+  ({ className, layout, tone, title, description, control, children, ...props }, ref) => (
+    <div ref={ref} className={cn(settingRowVariants({ layout, tone }), className)} {...props}>
+      <div className='min-w-0'>
+        <div className='text-sm font-medium text-foreground'>{title}</div>
+        {description ? <p className='mt-0.5 text-xs leading-5 text-muted-foreground'>{description}</p> : null}
+        {children ? <div className='mt-3'>{children}</div> : null}
       </div>
-      {control ? <div className="shrink-0">{control}</div> : null}
+      {control ? <div className='min-w-0 sm:shrink-0'>{control}</div> : null}
     </div>
-  ),
+  )
 );
 
-SettingRow.displayName = "SettingRow";
+SettingRow.displayName = 'SettingRow';

package/src/shared/components/settings/settings-page.tsx

@@ -0,0 +1,34 @@
+import type { ReactNode } from 'react';
+import { PageHeader, PageLayout } from '@/app/components/layout/page-layout';
+import { cn } from '@/shared/lib/utils';
+
+export interface SettingsPageProps {
+  title: string;
+  description?: string;
+  actions?: ReactNode;
+  children: ReactNode;
+  layout?: 'standard' | 'split';
+  className?: string;
+}
+
+export function SettingsPage({
+  actions,
+  children,
+  className,
+  description,
+  layout = 'standard',
+  title
+}: SettingsPageProps) {
+  return (
+    <PageLayout
+      className={cn(
+        'w-full space-y-6',
+        layout === 'split' && 'pb-0 md:flex md:h-full md:min-h-0 md:flex-col',
+        className
+      )}
+    >
+      <PageHeader title={title} description={description} actions={actions} className='mb-0' />
+      {children}
+    </PageLayout>
+  );
+}

package/src/shared/components/ui/actions/__tests__/icon-action-button.test.tsx

@@ -1,5 +1,5 @@
-import { render, screen } from '@testing-library/react';
-import { describe, expect, it } from 'vitest';
+import { fireEvent, render, screen } from '@testing-library/react';
+import { describe, expect, it, vi } from 'vitest';
 import { IconActionButton } from '@/shared/components/ui/actions/icon-action-button';
 
 describe('IconActionButton', () => {
@@ -33,4 +33,25 @@ describe('IconActionButton', () => {
     expect(button.className).toContain('w-7');
     expect(button.className).toContain('hover:bg-accent');
   });
+
+  it('ignores restored pointer focus while preserving keyboard tooltip focus', () => {
+    render(
+      <IconActionButton
+        icon={<span data-testid="icon" />}
+        label="Session Type"
+      />,
+    );
+
+    const button = screen.getByRole('button', { name: 'Session Type' });
+    const matches = vi.spyOn(button, 'matches');
+
+    matches.mockReturnValue(false);
+    fireEvent.focus(button);
+    expect(screen.queryByRole('tooltip')).toBeNull();
+
+    fireEvent.blur(button);
+    matches.mockReturnValue(true);
+    fireEvent.focus(button);
+    expect(screen.getByRole('tooltip').textContent).toBe('Session Type');
+  });
 });

package/src/shared/components/ui/actions/icon-action-button.tsx

@@ -72,8 +72,15 @@ const IconActionButton = React.forwardRef<HTMLButtonElement, IconActionButtonPro
     if (!content) return button;
     return (
       <TooltipProvider delayDuration={250}>
-        <Tooltip>
-          <TooltipTrigger asChild>
+        <Tooltip disableHoverableContent>
+          <TooltipTrigger
+            asChild
+            onFocus={(event) => {
+              if (!event.currentTarget.matches(':focus-visible')) {
+                event.preventDefault();
+              }
+            }}
+          >
             {disabled ? <span className="inline-flex">{button}</span> : button}
           </TooltipTrigger>
           <TooltipContent side={tooltipSide} className="text-xs">{content}</TooltipContent>

package/src/shared/components/ui/overlays/sheet.tsx

@@ -0,0 +1,142 @@
+import * as React from "react";
+import * as SheetPrimitive from "@radix-ui/react-dialog";
+import { cva, type VariantProps } from "class-variance-authority";
+import { X } from "lucide-react";
+
+import { cn } from "@/shared/lib/utils";
+
+const Sheet = SheetPrimitive.Root;
+const SheetTrigger = SheetPrimitive.Trigger;
+const SheetClose = SheetPrimitive.Close;
+const SheetPortal = SheetPrimitive.Portal;
+
+const SheetOverlay = React.forwardRef<
+  React.ElementRef<typeof SheetPrimitive.Overlay>,
+  React.ComponentPropsWithoutRef<typeof SheetPrimitive.Overlay>
+>(({ className, ...props }, ref) => (
+  <SheetPrimitive.Overlay
+    ref={ref}
+    className={cn(
+      "fixed inset-0 z-[var(--z-modal-backdrop,10000)] bg-black/35 backdrop-blur-[1px] data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0",
+      className,
+    )}
+    {...props}
+  />
+));
+SheetOverlay.displayName = SheetPrimitive.Overlay.displayName;
+
+const sheetVariants = cva(
+  "fixed z-[var(--z-modal,10050)] bg-background shadow-2xl transition ease-in-out data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:duration-300 data-[state=open]:duration-500",
+  {
+    variants: {
+      side: {
+        top: "inset-x-0 top-0 border-b data-[state=closed]:slide-out-to-top data-[state=open]:slide-in-from-top",
+        bottom:
+          "inset-x-0 bottom-0 border-t data-[state=closed]:slide-out-to-bottom data-[state=open]:slide-in-from-bottom",
+        left: "inset-y-0 left-0 h-full w-3/4 border-r data-[state=closed]:slide-out-to-left data-[state=open]:slide-in-from-left sm:max-w-sm",
+        right:
+          "inset-y-0 right-0 h-full w-3/4 border-l data-[state=closed]:slide-out-to-right data-[state=open]:slide-in-from-right sm:max-w-sm",
+      },
+    },
+    defaultVariants: {
+      side: "right",
+    },
+  },
+);
+
+type SheetContentProps = React.ComponentPropsWithoutRef<
+  typeof SheetPrimitive.Content
+> &
+  VariantProps<typeof sheetVariants> & {
+    readonly closeLabel?: string;
+  };
+
+const SheetContent = React.forwardRef<
+  React.ElementRef<typeof SheetPrimitive.Content>,
+  SheetContentProps
+>(({ children, className, closeLabel = "Close", side, ...props }, ref) => (
+  <SheetPortal>
+    <SheetOverlay />
+    <SheetPrimitive.Content
+      ref={ref}
+      className={cn(sheetVariants({ side }), className)}
+      {...props}
+    >
+      {children}
+      <SheetPrimitive.Close className="absolute right-4 top-4 rounded-lg p-1.5 text-muted-foreground opacity-75 transition-colors hover:bg-muted hover:text-foreground hover:opacity-100 focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-border disabled:pointer-events-none">
+        <X className="h-4 w-4" />
+        <span className="sr-only">{closeLabel}</span>
+      </SheetPrimitive.Close>
+    </SheetPrimitive.Content>
+  </SheetPortal>
+));
+SheetContent.displayName = SheetPrimitive.Content.displayName;
+
+function SheetHeader({
+  className,
+  ...props
+}: React.HTMLAttributes<HTMLDivElement>) {
+  return (
+    <div
+      className={cn("flex flex-col space-y-2 text-left", className)}
+      {...props}
+    />
+  );
+}
+SheetHeader.displayName = "SheetHeader";
+
+function SheetFooter({
+  className,
+  ...props
+}: React.HTMLAttributes<HTMLDivElement>) {
+  return (
+    <div
+      className={cn(
+        "flex flex-col-reverse gap-2 sm:flex-row sm:justify-end",
+        className,
+      )}
+      {...props}
+    />
+  );
+}
+SheetFooter.displayName = "SheetFooter";
+
+const SheetTitle = React.forwardRef<
+  React.ElementRef<typeof SheetPrimitive.Title>,
+  React.ComponentPropsWithoutRef<typeof SheetPrimitive.Title>
+>(({ className, ...props }, ref) => (
+  <SheetPrimitive.Title
+    ref={ref}
+    className={cn(
+      "text-lg font-semibold tracking-tight text-foreground",
+      className,
+    )}
+    {...props}
+  />
+));
+SheetTitle.displayName = SheetPrimitive.Title.displayName;
+
+const SheetDescription = React.forwardRef<
+  React.ElementRef<typeof SheetPrimitive.Description>,
+  React.ComponentPropsWithoutRef<typeof SheetPrimitive.Description>
+>(({ className, ...props }, ref) => (
+  <SheetPrimitive.Description
+    ref={ref}
+    className={cn("text-sm leading-relaxed text-muted-foreground", className)}
+    {...props}
+  />
+));
+SheetDescription.displayName = SheetPrimitive.Description.displayName;
+
+export {
+  Sheet,
+  SheetClose,
+  SheetContent,
+  SheetDescription,
+  SheetFooter,
+  SheetHeader,
+  SheetOverlay,
+  SheetPortal,
+  SheetTitle,
+  SheetTrigger,
+};

package/src/shared/lib/api/ncp-session.types.ts

@@ -1,5 +1,10 @@
-import type { NcpMessage, NcpSessionStatus, NcpSessionSummary } from '@nextclaw/ncp';
-import type { ThinkingLevel } from './types';
+import type {
+  NcpMessage,
+  NcpSessionMessagePageInfo,
+  NcpSessionStatus,
+  NcpSessionSummary,
+} from "@nextclaw/ncp";
+import type { ThinkingLevel } from "./types";
 
 export type SessionTypeIconView = {
   kind: "image";
@@ -100,4 +105,5 @@ export type NcpSessionMessagesView = {
   messages: NcpMessageView[];
   contextWindow?: SessionContextWindowView | null;
   total: number;
+  pageInfo: NcpSessionMessagePageInfo;
 };

package/src/shared/lib/api/types.ts

@@ -462,7 +462,28 @@ export type CronJobView = {
   deleteAfterRun: boolean;
 };
 
-export type CronListView = { jobs: CronJobView[]; total: number };
+export type CronListStatus = "all" | "enabled" | "disabled" | "attention";
+
+export type CronListQuery = {
+  all?: boolean;
+  limit?: number;
+  offset?: number;
+  query?: string;
+  status?: CronListStatus;
+};
+
+export type CronListSummaryView = {
+  total: number;
+  enabled: number;
+  disabled: number;
+  attention: number;
+};
+
+export type CronListView = {
+  jobs: CronJobView[];
+  total: number;
+  summary: CronListSummaryView;
+};
 
 export type CronEnableRequest = { enabled: boolean };
 

package/src/shared/lib/api/utils/config.utils.ts

@@ -34,6 +34,7 @@ import type {
   ConfigActionExecuteResult,
   ChatSessionTypesView,
   CronListView,
+  CronListQuery,
   CronEnableRequest,
   CronRunRequest,
   CronActionResult
@@ -166,7 +167,7 @@ export async function fetchNcpChatSessionTypes(): Promise<ChatSessionTypesView>
   return await nextclawClient.config.fetchChatSessionTypes();
 }
 
-export async function fetchCronJobs(params?: { all?: boolean }): Promise<CronListView> {
+export async function fetchCronJobs(params?: CronListQuery): Promise<CronListView> {
   return await nextclawClient.config.fetchCronJobs(params);
 }
 

package/src/shared/lib/api/utils/ncp-session.utils.ts

@@ -1,26 +1,35 @@
-import { nextclawClient } from '@/shared/lib/api/managers/client.manager';
+import { nextclawClient } from "@/shared/lib/api/managers/client.manager";
 import type {
   NcpSessionMessagesView,
   NcpSessionSkillsView,
   NcpSessionsListView,
   NcpSessionSummaryView,
-  SessionPatchUpdate
-} from '@/shared/lib/api/types';
+  SessionPatchUpdate,
+} from "@/shared/lib/api/types";
 
 // GET /api/ncp/sessions
-export async function fetchNcpSessions(params?: { limit?: number; peerId?: string }): Promise<NcpSessionsListView> {
-  return await nextclawClient.sessions.list(params) as NcpSessionsListView;
+export async function fetchNcpSessions(params?: {
+  limit?: number;
+  peerId?: string;
+}): Promise<NcpSessionsListView> {
+  return (await nextclawClient.sessions.list(params)) as NcpSessionsListView;
 }
 
 // GET /api/ncp/sessions/:sessionId/messages
-export async function fetchNcpSessionMessages(sessionId: string, limit = 200): Promise<NcpSessionMessagesView> {
-  return await nextclawClient.sessions.listMessages(sessionId, limit) as NcpSessionMessagesView;
+export async function fetchNcpSessionMessages(
+  sessionId: string,
+  options: { limit?: number; cursor?: string; signal?: AbortSignal } = {},
+): Promise<NcpSessionMessagesView> {
+  return (await nextclawClient.sessions.listMessages(
+    sessionId,
+    options,
+  )) as NcpSessionMessagesView;
 }
 
 // GET /api/ncp/sessions/:sessionId/skills
 export async function fetchNcpSessionSkills(
   sessionId: string,
-  params?: { projectRoot?: string | null }
+  params?: { projectRoot?: string | null },
 ): Promise<NcpSessionSkillsView> {
   return await nextclawClient.sessions.listSkills(sessionId, params);
 }
@@ -28,12 +37,17 @@ export async function fetchNcpSessionSkills(
 // PUT /api/ncp/sessions/:sessionId
 export async function updateNcpSession(
   sessionId: string,
-  data: SessionPatchUpdate
+  data: SessionPatchUpdate,
 ): Promise<NcpSessionSummaryView> {
-  return await nextclawClient.sessions.update(sessionId, data) as NcpSessionSummaryView;
+  return (await nextclawClient.sessions.update(
+    sessionId,
+    data,
+  )) as NcpSessionSummaryView;
 }
 
 // DELETE /api/ncp/sessions/:sessionId
-export async function deleteNcpSession(sessionId: string): Promise<{ deleted: boolean; sessionId: string }> {
+export async function deleteNcpSession(
+  sessionId: string,
+): Promise<{ deleted: boolean; sessionId: string }> {
   return await nextclawClient.sessions.delete(sessionId);
 }

package/src/shared/lib/i18n/locales/en-US/chat.json

@@ -83,7 +83,7 @@
   "chatWorkspaceDiffEmpty": "No diff content is available.",
   "chatWorkspaceHtmlPreviewTitle": "Rendered HTML preview",
   "chatWorkspacePreviewTruncated": "Preview truncated",
-  "chatWorkspaceSessionCronJobs": "Session cron jobs",
+  "chatWorkspaceSessionCronJobs": "Scheduled tasks",
   "chatWorkspaceCronJobEmpty": "This session has no cron jobs.",
   "chatSessionUnread": "Session has unread updates",
   "chatTyping": "Agent is thinking...",
@@ -146,7 +146,37 @@
   "chatToolDisplayError": "Display failed",
   "chatToolDisplayCancelled": "Display cancelled",
   "chatScrollToBottom": "Scroll to bottom",
+  "chatHistoryLoadFailed": "Couldn’t load earlier messages",
+  "chatHistoryRetry": "Retry",
   "chatProcessSummaryProcessed": "Processed",
+  "chatAiExecutionInput": "input",
+  "chatAiExecutionOutput": "output",
+  "chatAiExecutionTokens": "tokens",
+  "chatAiExecutionPartial": "partial usage",
+  "chatMessageMoreActions": "More actions",
+  "chatAiExecutionViewMetadata": "View run metadata",
+  "chatAiExecutionMetadataTitle": "AI run metadata",
+  "chatAiExecutionMetadataDescription": "Runtime facts persisted with this assistant message for inspection and debugging.",
+  "chatAiExecutionMetadataClose": "Close run metadata",
+  "chatAiExecutionNotAvailable": "Not available",
+  "chatAiExecutionRunId": "Run ID",
+  "chatAiExecutionRuntime": "Runtime",
+  "chatAiExecutionModel": "Model",
+  "chatAiExecutionRequestedModel": "Requested model",
+  "chatAiExecutionOutcome": "Outcome",
+  "chatAiExecutionInputTokens": "Input tokens",
+  "chatAiExecutionOutputTokens": "Output tokens",
+  "chatAiExecutionCachedInputTokens": "Cached input tokens",
+  "chatAiExecutionTotalTokens": "Total tokens",
+  "chatAiExecutionModelCallCount": "Model calls",
+  "chatAiExecutionReportedModelCallCount": "Calls with reported usage",
+  "chatAiExecutionUsageStatus": "Usage status",
+  "chatAiExecutionOutcomeCompleted": "Completed",
+  "chatAiExecutionOutcomeFailed": "Failed",
+  "chatAiExecutionOutcomeAborted": "Aborted",
+  "chatAiExecutionUsageReported": "Reported",
+  "chatAiExecutionUsagePartial": "Partial",
+  "chatAiExecutionUsageUnavailable": "Unavailable",
   "chatToolActivityReadOne": "Read 1 file",
   "chatToolActivityReadOther": "Read {count} files",
   "chatToolActivityEditOne": "Edit 1 file",

package/src/shared/lib/i18n/locales/en-US/core.json

@@ -23,7 +23,7 @@
   "settingsMenu": "Settings menu",
   "sidebarCollapse": "Collapse sidebar",
   "sidebarExpand": "Expand sidebar",
-  "security": "Security",
+  "security": "Sign-in Management",
   "backToMain": "Back to Main",
   "enabled": "Enabled",
   "disabled": "Disabled",
@@ -227,8 +227,8 @@
   "authDisabledSuccess": "Authentication disabled",
   "authRetryStatus": "Retry",
   "authStatusLoadFailed": "Failed to load authentication status. Check whether the UI server is healthy.",
-  "authSecurityTitle": "Security",
-  "authSecurityDescription": "Keep the local console simple by default, and add a lightweight login gate only when you expose the UI remotely.",
+  "authSecurityTitle": "Sign-in Management",
+  "authSecurityDescription": "Choose whether opening NextClaw requires sign-in, and manage the admin username and password.",
   "authSetupTitle": "Enable Lightweight Authentication",
   "authSetupDescription": "Create the single admin account the first time you enable authentication. This tab will be signed in automatically.",
   "authSetupAction": "Enable Authentication",