@nextclaw/ui 0.13.13 → 0.14.1-beta.0

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

@@ -0,0 +1,144 @@
+import type { SessionEntryView } from "@/shared/lib/api";
+import type { NcpSessionListItemView } from "@/features/chat/features/ncp/hooks/use-ncp-session-list-view";
+import { getSessionProjectName } from "@/shared/lib/session-project";
+import { t } from "@/shared/lib/i18n";
+
+export type ChatSidebarDateGroup = {
+  label: string;
+  items: NcpSessionListItemView[];
+};
+
+export type ChatSidebarProjectGroup = {
+  projectRoot: string;
+  projectName: string;
+  items: NcpSessionListItemView[];
+  latestUpdatedAt: number;
+};
+
+export function getSessionActivityAtTimestamp(
+  item: NcpSessionListItemView,
+): number {
+  return new Date(
+    item.session.lastMessageAt ?? item.session.createdAt,
+  ).getTime();
+}
+
+export function sortSessionItemsByActivityAtDesc(
+  items: NcpSessionListItemView[],
+): NcpSessionListItemView[] {
+  return [...items].sort(
+    (left, right) =>
+      getSessionActivityAtTimestamp(right) -
+      getSessionActivityAtTimestamp(left),
+  );
+}
+
+export function groupSessionsByDate(
+  items: NcpSessionListItemView[],
+): ChatSidebarDateGroup[] {
+  const now = new Date();
+  const todayStart = new Date(
+    now.getFullYear(),
+    now.getMonth(),
+    now.getDate(),
+  ).getTime();
+  const yesterdayStart = todayStart - 86_400_000;
+  const sevenDaysStart = todayStart - 7 * 86_400_000;
+
+  const today: NcpSessionListItemView[] = [];
+  const yesterday: NcpSessionListItemView[] = [];
+  const previous7: NcpSessionListItemView[] = [];
+  const older: NcpSessionListItemView[] = [];
+
+  for (const item of items) {
+    const ts = getSessionActivityAtTimestamp(item);
+    if (ts >= todayStart) {
+      today.push(item);
+    } else if (ts >= yesterdayStart) {
+      yesterday.push(item);
+    } else if (ts >= sevenDaysStart) {
+      previous7.push(item);
+    } else {
+      older.push(item);
+    }
+  }
+
+  const groups: ChatSidebarDateGroup[] = [];
+  if (today.length > 0) groups.push({ label: t("chatSidebarToday"), items: today });
+  if (yesterday.length > 0)
+    groups.push({ label: t("chatSidebarYesterday"), items: yesterday });
+  if (previous7.length > 0)
+    groups.push({ label: t("chatSidebarPrevious7Days"), items: previous7 });
+  if (older.length > 0) groups.push({ label: t("chatSidebarOlder"), items: older });
+  return groups;
+}
+
+export function groupSessionsByProject(
+  items: NcpSessionListItemView[],
+): ChatSidebarProjectGroup[] {
+  const grouped = new Map<string, ChatSidebarProjectGroup>();
+
+  for (const item of items) {
+    const projectRoot = item.session.projectRoot?.trim();
+    if (!projectRoot) {
+      continue;
+    }
+    const existingGroup = grouped.get(projectRoot);
+    const updatedAt = getSessionActivityAtTimestamp(item);
+    if (existingGroup) {
+      existingGroup.items.push(item);
+      existingGroup.latestUpdatedAt = Math.max(
+        existingGroup.latestUpdatedAt,
+        updatedAt,
+      );
+      continue;
+    }
+    grouped.set(projectRoot, {
+      projectRoot,
+      projectName:
+        item.session.projectName?.trim() ||
+        getSessionProjectName(projectRoot) ||
+        projectRoot,
+      items: [item],
+      latestUpdatedAt: updatedAt,
+    });
+  }
+
+  return [...grouped.values()]
+    .map((group) => ({
+      ...group,
+      items: sortSessionItemsByActivityAtDesc(group.items),
+    }))
+    .sort((left, right) => right.latestUpdatedAt - left.latestUpdatedAt);
+}
+
+export function groupChildSessionsByParentKey(
+  items: NcpSessionListItemView[],
+): Map<string, NcpSessionListItemView[]> {
+  const grouped = new Map<string, NcpSessionListItemView[]>();
+  for (const item of items) {
+    const parentSessionKey = item.session.parentSessionId?.trim();
+    if (!parentSessionKey) {
+      continue;
+    }
+    const bucket = grouped.get(parentSessionKey) ?? [];
+    bucket.push(item);
+    grouped.set(parentSessionKey, bucket);
+  }
+  for (const bucket of grouped.values()) {
+    bucket.sort(
+      (left, right) =>
+        getSessionActivityAtTimestamp(right) -
+        getSessionActivityAtTimestamp(left),
+    );
+  }
+  return grouped;
+}
+
+export function getSessionTitle(session: SessionEntryView): string {
+  if (session.label && session.label.trim()) {
+    return session.label.trim();
+  }
+  const chunks = session.key.split(":");
+  return chunks[chunks.length - 1] || session.key;
+}

package/src/features/chat/{utils → features/session/utils}/ncp-session-adapter.utils.ts

@@ -308,6 +308,7 @@ export function adaptNcpMessagesToUiMessages(messages: readonly NcpMessageView[]
 }
 
 export function adaptNcpSessionSummary(summary: NcpSessionSummaryView): SessionEntryView {
+  const metadata = readMetadata(summary);
   const label = readNcpSessionLabel(summary);
   const preferredModel = readNcpSessionPreferredModel(summary);
   const preferredThinking = readNcpSessionPreferredThinking(summary);
@@ -335,6 +336,7 @@ export function adaptNcpSessionSummary(summary: NcpSessionSummaryView): SessionE
     ...(projectRoot ? { projectRoot } : {}),
     ...(workingDir ? { workingDir } : {}),
     ...(projectName ? { projectName } : {}),
+    ...(metadata ? { metadata } : {}),
     sessionType: readNcpSessionType(summary),
     sessionTypeMutable: false,
     status: summary.status ?? 'idle',

package/src/features/chat/{components → features/session-type/components/__tests__}/chat-session-type-option-item.test.tsx

@@ -1,6 +1,6 @@
 import { render, screen } from "@testing-library/react";
 import { describe, expect, it, vi } from "vitest";
-import { ChatSessionTypeOptionItem } from "./chat-session-type-option-item";
+import { ChatSessionTypeOptionItem } from "@/features/chat/features/session-type/components/chat-session-type-option-item";
 
 describe("ChatSessionTypeOptionItem", () => {
   it("renders a runtime icon image when the session type option provides an app resource URI", () => {

package/src/features/chat/{components → features/session-type/components}/chat-session-type-option-item.tsx

@@ -1,7 +1,7 @@
 import type { ChatInputSnapshot } from "@/features/chat/stores/chat-input.store";
-import { SessionContextIconNode } from "@/features/chat/components/session/session-context-icon";
+import { SessionContextIconNode } from "@/features/chat/features/session/components/session-context-icon";
+import { StatusDot } from "@/shared/components/status/status-dot";
 import { t } from "@/shared/lib/i18n";
-import { cn } from "@/shared/lib/utils";
 import { Bot } from "lucide-react";
 
 type SessionTypeOption = ChatInputSnapshot["sessionTypeOptions"][number];
@@ -43,20 +43,11 @@ export function ChatSessionTypeOptionItem(props: {
               <div className="truncate text-[13px] font-semibold text-gray-900">
                 {option.label}
               </div>
-              <span
-                className={cn(
-                  "inline-flex shrink-0 items-center gap-1.5 text-[11px] font-medium",
-                  option.ready === false ? "text-amber-700" : "text-emerald-600",
-                )}
-              >
-                <span
-                  className={cn(
-                    "h-1.5 w-1.5 rounded-full",
-                    option.ready === false ? "bg-amber-500" : "bg-emerald-500",
-                  )}
-                />
-                {option.ready === false ? t("statusSetup") : t("statusReady")}
-              </span>
+              <StatusDot
+                status={option.ready === false ? "warning" : "ready"}
+                label={option.ready === false ? t("statusSetup") : t("statusReady")}
+                className="bg-transparent px-0"
+              />
             </div>
             {helperText ? (
               <div className="mt-1 pr-4 text-[11px] leading-4 text-gray-500">

package/src/features/chat/features/session-type/components/chat-sidebar-create-menu.tsx

@@ -0,0 +1,42 @@
+import { ChatSessionTypeOptionItem } from "@/features/chat/features/session-type/components/chat-session-type-option-item";
+import type { ChatInputSnapshot } from "@/features/chat/stores/chat-input.store";
+import { t } from "@/shared/lib/i18n";
+import { cn } from "@/shared/lib/utils";
+
+type SessionTypeOption = ChatInputSnapshot["sessionTypeOptions"][number];
+
+type ChatSidebarCreateMenuProps = {
+  options: readonly SessionTypeOption[];
+  onSelect: (sessionType: string) => void;
+  title?: string;
+  className?: string;
+  titleClassName?: string;
+};
+
+export function ChatSidebarCreateMenu({
+  className,
+  onSelect,
+  options,
+  title = t("chatSessionTypeLabel"),
+  titleClassName,
+}: ChatSidebarCreateMenuProps) {
+  return (
+    <div className={cn("space-y-1", className)}>
+      <div
+        className={cn(
+          "px-3 pb-1 pt-2 text-[10px] font-semibold uppercase tracking-[0.18em] text-gray-400",
+          titleClassName,
+        )}
+      >
+        {title}
+      </div>
+      {options.map((option) => (
+        <ChatSessionTypeOptionItem
+          key={option.value}
+          option={option}
+          onSelect={() => onSelect(option.value)}
+        />
+      ))}
+    </div>
+  );
+}

package/src/features/chat/{hooks → features/session-type/hooks/__tests__}/use-chat-session-type-state.test.tsx

@@ -1,6 +1,6 @@
 import { renderHook } from '@testing-library/react';
 import { describe, expect, it, vi } from 'vitest';
-import { resolveSessionTypeLabel, useChatSessionTypeState } from './use-chat-session-type-state';
+import { resolveSessionTypeLabel, useChatSessionTypeState } from '../use-chat-session-type-state';
 
 vi.mock('@/shared/lib/i18n', () => ({
   t: (key: string) => key

package/src/features/chat/{hooks → features/session-type/hooks}/use-chat-session-type-state.ts

@@ -1,102 +1,26 @@
 import { useEffect, useMemo, useRef } from 'react';
 import type { Dispatch, SetStateAction } from 'react';
-import type { AgentProfileView, ChatSessionTypeOptionView, SessionEntryView, SessionTypeIconView } from '@/shared/lib/api';
+import type { ChatSessionTypeOptionView, SessionEntryView } from '@/shared/lib/api';
 import { t } from '@/shared/lib/i18n';
+import {
+  buildSessionTypeOptions,
+  DEFAULT_SESSION_TYPE,
+  normalizeSessionType,
+  resolveSessionTypeLabel,
+  type ChatSessionTypeOption,
+} from '@/features/chat/features/session-type/utils/chat-session-type.utils';
 
-export const DEFAULT_SESSION_TYPE = 'native';
-
-export type ChatSessionTypeOption = {
-  value: string;
-  label: string;
-  icon: SessionTypeIconView | null;
-  ready: boolean;
-  reason?: string | null;
-  reasonMessage?: string | null;
-  supportedModels?: string[];
-  recommendedModel?: string | null;
-  cta?: {
-    kind: string;
-    label?: string;
-    href?: string;
-  } | null;
-};
+export {
+  buildSessionTypeOptions,
+  DEFAULT_SESSION_TYPE,
+  normalizeSessionType,
+  resolveAgentRuntimeSessionType,
+  resolveSessionTypeLabel,
+  type ChatSessionTypeOption,
+} from '@/features/chat/features/session-type/utils/chat-session-type.utils';
 
 type UseChatSessionTypeStateParams = { selectedSession: SessionEntryView | null; pendingSessionType: string; setPendingSessionType: Dispatch<SetStateAction<string>>; sessionTypesData?: { defaultType?: string; options?: ChatSessionTypeOptionView[] } | null };
 
-export function normalizeSessionType(value: unknown): string {
-  if (typeof value !== 'string') {
-    return DEFAULT_SESSION_TYPE;
-  }
-  const normalized = value.trim().toLowerCase();
-  return normalized || DEFAULT_SESSION_TYPE;
-}
-
-export function resolveAgentRuntimeSessionType(
-  agent: Pick<AgentProfileView, 'runtime' | 'engine'> | null | undefined,
-  fallbackSessionType: string = DEFAULT_SESSION_TYPE
-): string {
-  const runtime = agent?.runtime?.trim() || agent?.engine?.trim() || fallbackSessionType;
-  return normalizeSessionType(runtime);
-}
-
-export function resolveSessionTypeLabel(sessionType: string, fallbackLabel?: string): string {
-  if (sessionType === 'native') {
-    return t('chatSessionTypeNative');
-  }
-  const normalizedFallback = fallbackLabel?.trim();
-  if (normalizedFallback) {
-    return normalizedFallback;
-  }
-  return sessionType
-    .trim()
-    .split(/[-_]+/g)
-    .filter(Boolean)
-    .map((part) => part.charAt(0).toUpperCase() + part.slice(1))
-    .join(' ') || sessionType;
-}
-
-export function buildSessionTypeOptions(
-  options: ChatSessionTypeOptionView[]
-): ChatSessionTypeOption[] {
-  const deduped = new Map<string, ChatSessionTypeOption>();
-  for (const option of options) {
-    const value = normalizeSessionType(option.value);
-    deduped.set(value, {
-      value,
-      label: option.label?.trim() || resolveSessionTypeLabel(value),
-      icon: option.icon ?? null,
-      ready: option.ready ?? true,
-      reason: option.reason ?? null,
-      reasonMessage: option.reasonMessage ?? null,
-      supportedModels: option.supportedModels,
-      recommendedModel: option.recommendedModel ?? null,
-      cta: option.cta ?? null
-    });
-  }
-  if (!deduped.has(DEFAULT_SESSION_TYPE)) {
-    deduped.set(DEFAULT_SESSION_TYPE, {
-      value: DEFAULT_SESSION_TYPE,
-      label: resolveSessionTypeLabel(DEFAULT_SESSION_TYPE),
-      icon: null,
-      ready: true,
-      reason: null,
-      reasonMessage: null,
-      supportedModels: undefined,
-      recommendedModel: null,
-      cta: null
-    });
-  }
-  return Array.from(deduped.values()).sort((left, right) => {
-    if (left.value === DEFAULT_SESSION_TYPE) {
-      return -1;
-    }
-    if (right.value === DEFAULT_SESSION_TYPE) {
-      return 1;
-    }
-    return left.value.localeCompare(right.value);
-  });
-}
-
 export function useChatSessionTypeState(params: UseChatSessionTypeStateParams): {
   sessionTypeOptions: ChatSessionTypeOption[];
   selectedSessionTypeOption: ChatSessionTypeOption | null;
@@ -130,6 +54,8 @@ export function useChatSessionTypeState(params: UseChatSessionTypeStateParams):
         reasonMessage: null,
         supportedModels: undefined,
         recommendedModel: null,
+        modelSelectionMode: 'nextclaw',
+        runtimeDefaultThinking: null,
         cta: null
       });
     }
@@ -148,9 +74,13 @@ export function useChatSessionTypeState(params: UseChatSessionTypeStateParams):
     [sessionTypesData?.defaultType]
   );
   const lastAutoPendingSessionTypeRef = useRef<string | null>(null);
+  const normalizedPendingSessionType =
+    typeof pendingSessionType === 'string' && pendingSessionType.trim().length > 0
+      ? pendingSessionType
+      : undefined;
   const selectedSessionType = useMemo(
-    () => normalizeSessionType(selectedSession?.sessionType ?? pendingSessionType ?? defaultSessionType),
-    [defaultSessionType, pendingSessionType, selectedSession?.sessionType]
+    () => normalizeSessionType(selectedSession?.sessionType ?? normalizedPendingSessionType ?? defaultSessionType),
+    [defaultSessionType, normalizedPendingSessionType, selectedSession?.sessionType]
   );
   const selectedSessionTypeOption = useMemo(
     () => sessionTypeOptions.find((option) => option.value === selectedSessionType) ?? null,

package/src/features/chat/features/session-type/utils/chat-session-type.utils.ts

@@ -0,0 +1,109 @@
+import type {
+  AgentProfileView,
+  ChatSessionTypeOptionView,
+  RuntimeDefaultThinkingView,
+  SessionTypeIconView,
+} from "@/shared/lib/api";
+import type { RuntimeModelSelectionMode } from "@nextclaw/shared";
+import { t } from "@/shared/lib/i18n";
+
+export const DEFAULT_SESSION_TYPE = "native";
+
+export type ChatSessionTypeOption = {
+  value: string;
+  label: string;
+  icon: SessionTypeIconView | null;
+  ready: boolean;
+  reason?: string | null;
+  reasonMessage?: string | null;
+  supportedModels?: string[];
+  recommendedModel?: string | null;
+  modelSelectionMode?: RuntimeModelSelectionMode;
+  runtimeDefaultThinking?: RuntimeDefaultThinkingView | null;
+  cta?: {
+    kind: string;
+    label?: string;
+    href?: string;
+  } | null;
+};
+
+export function normalizeSessionType(value: unknown): string {
+  if (typeof value !== "string") {
+    return DEFAULT_SESSION_TYPE;
+  }
+  const normalized = value.trim().toLowerCase();
+  return normalized || DEFAULT_SESSION_TYPE;
+}
+
+export function resolveAgentRuntimeSessionType(
+  agent: Pick<AgentProfileView, "runtime" | "engine"> | null | undefined,
+  fallbackSessionType: string = DEFAULT_SESSION_TYPE,
+): string {
+  const runtime = agent?.runtime?.trim() || agent?.engine?.trim() || fallbackSessionType;
+  return normalizeSessionType(runtime);
+}
+
+export function resolveSessionTypeLabel(
+  sessionType: string,
+  fallbackLabel?: string,
+): string {
+  if (sessionType === "native") {
+    return t("chatSessionTypeNative");
+  }
+  const normalizedFallback = fallbackLabel?.trim();
+  if (normalizedFallback) {
+    return normalizedFallback;
+  }
+  return sessionType
+    .trim()
+    .split(/[-_]+/g)
+    .filter(Boolean)
+    .map((part) => part.charAt(0).toUpperCase() + part.slice(1))
+    .join(" ") || sessionType;
+}
+
+export function buildSessionTypeOptions(
+  options: ChatSessionTypeOptionView[],
+): ChatSessionTypeOption[] {
+  const deduped = new Map<string, ChatSessionTypeOption>();
+  for (const option of options) {
+    const value = normalizeSessionType(option.value);
+    deduped.set(value, {
+      value,
+      label: option.label?.trim() || resolveSessionTypeLabel(value),
+      icon: option.icon ?? null,
+      ready: option.ready ?? true,
+      reason: option.reason ?? null,
+      reasonMessage: option.reasonMessage ?? null,
+      supportedModels: option.supportedModels,
+      recommendedModel: option.recommendedModel ?? null,
+      modelSelectionMode: option.modelSelectionMode ?? "nextclaw",
+      runtimeDefaultThinking: option.runtimeDefaultThinking ?? null,
+      cta: option.cta ?? null,
+    });
+  }
+  if (!deduped.has(DEFAULT_SESSION_TYPE)) {
+    deduped.set(DEFAULT_SESSION_TYPE, {
+      value: DEFAULT_SESSION_TYPE,
+      label: resolveSessionTypeLabel(DEFAULT_SESSION_TYPE),
+      icon: null,
+      ready: true,
+      reason: null,
+      reasonMessage: null,
+      supportedModels: undefined,
+      recommendedModel: null,
+      modelSelectionMode: "nextclaw",
+      runtimeDefaultThinking: null,
+      cta: null,
+    });
+  }
+  return Array.from(deduped.values()).sort((left, right) => {
+    if (left.value === DEFAULT_SESSION_TYPE) {
+      return -1;
+    }
+    if (right.value === DEFAULT_SESSION_TYPE) {
+      return 1;
+    }
+    return left.value.localeCompare(right.value);
+  });
+}

package/src/features/chat/{components → features/workspace/components/__tests__}/chat-session-workspace-file-preview.test.tsx

@@ -1,6 +1,6 @@
 import { render, screen } from "@testing-library/react";
 import { beforeEach, describe, expect, it, vi } from "vitest";
-import { ChatSessionWorkspaceFilePreview } from "./chat-session-workspace-file-preview";
+import { ChatSessionWorkspaceFilePreview } from "@/features/chat/features/workspace/components/chat-session-workspace-file-preview";
 import type { ChatWorkspaceFileTab } from "@/features/chat/stores/chat-thread.store";
 import { t } from "@/shared/lib/i18n";
 

package/src/features/chat/{components → features/workspace/components}/chat-session-workspace-file-preview.tsx

@@ -2,9 +2,9 @@ import { useMemo } from "react";
 import type { ChatFileOpenActionViewModel, ChatFileOperationBlockViewModel } from "@nextclaw/agent-chat-ui";
 import { ChatMessageMarkdown, FileOperationCodeSurface } from "@nextclaw/agent-chat-ui";
 import type { ChatWorkspaceFileTab } from "@/features/chat/stores/chat-thread.store";
-import { ChatSessionWorkspaceFileBreadcrumbs } from "./workspace/chat-session-workspace-file-breadcrumbs";
+import { ChatSessionWorkspaceFileBreadcrumbs } from "./chat-session-workspace-file-breadcrumbs";
 import { useServerPathRead } from "@/shared/hooks/use-server-path-read";
-import { buildLineDiff, buildPreviewLines } from "@/features/chat/utils/file-operation/line-builder.utils";
+import { buildLineDiff, buildPreviewLines } from "@/features/chat/features/message/utils/file-operation/line-builder.utils";
 import { t } from "@/shared/lib/i18n";
 import { buildWorkspaceFileBreadcrumb } from "@/shared/lib/session-project";
 import { cn } from "@/shared/lib/utils";