@nextclaw/ui 0.15.5 → 0.15.7

package/src/features/chat/features/project/components/chat-project-create-dialog.tsx

@@ -0,0 +1,203 @@
+import { useState } from 'react';
+import { FolderOpen } from 'lucide-react';
+import type { ProjectCreateRequest, ProjectTemplateView } from '@/shared/lib/api';
+import { ServerPathPickerDialog } from '@/shared/components/path-picker/server-path-picker-dialog';
+import { Button } from '@/shared/components/ui/button';
+import {
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogFooter,
+  DialogHeader,
+  DialogTitle,
+} from '@/shared/components/ui/dialog';
+import { Input } from '@/shared/components/ui/input';
+import { Label } from '@/shared/components/ui/label';
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from '@/shared/components/ui/select';
+import { t } from '@/shared/lib/i18n';
+
+type ProjectTemplateId = NonNullable<ProjectCreateRequest['template']>;
+
+type ChatProjectCreateDialogProps = {
+  open: boolean;
+  defaultWorkspacePath?: string | null;
+  templates: readonly ProjectTemplateView[];
+  isCreating: boolean;
+  errorMessage?: string | null;
+  onOpenChange: (open: boolean) => void;
+  onCreate: (input: ProjectCreateRequest) => Promise<void>;
+};
+
+function projectTemplateLabel(templateId: ProjectTemplateId): string {
+  return t(
+    templateId === 'knowledge-base'
+      ? 'chatProjectTemplateKnowledgeBase'
+      : 'chatProjectTemplateEmpty',
+  );
+}
+
+export function ChatProjectCreateDialog({
+  open,
+  defaultWorkspacePath,
+  templates,
+  isCreating,
+  errorMessage,
+  onOpenChange,
+  onCreate,
+}: ChatProjectCreateDialogProps) {
+  const [name, setName] = useState('');
+  const [rootPath, setRootPath] = useState('');
+  const [pathPickerOpen, setPathPickerOpen] = useState(false);
+  const [template, setTemplate] = useState<ProjectTemplateId>('empty');
+  const availableTemplateIds = templates.length > 0
+    ? templates.map((entry) => entry.id)
+    : ['empty' as const];
+  const normalizedName = name.trim();
+
+  const resetForm = () => {
+    setName('');
+    setRootPath('');
+    setTemplate('empty');
+    setPathPickerOpen(false);
+  };
+
+  const closeDialog = () => {
+    if (isCreating) {
+      return;
+    }
+    resetForm();
+    onOpenChange(false);
+  };
+
+  return (
+    <>
+      <Dialog
+        open={open}
+        onOpenChange={(nextOpen) => {
+          if (nextOpen) {
+            onOpenChange(true);
+            return;
+          }
+          closeDialog();
+        }}
+      >
+        <DialogContent className="sm:max-w-lg">
+          <DialogHeader>
+            <DialogTitle>{t('chatProjectCreateTitle')}</DialogTitle>
+            <DialogDescription>{t('chatProjectCreateDescription')}</DialogDescription>
+          </DialogHeader>
+          <form
+            className="space-y-4"
+            onSubmit={(event) => {
+              event.preventDefault();
+              if (!normalizedName || isCreating) {
+                return;
+              }
+              const normalizedRootPath = rootPath.trim();
+              void onCreate({
+                name: normalizedName,
+                template,
+                ...(normalizedRootPath ? { rootPath: normalizedRootPath } : {}),
+              }).then(resetForm).catch(() => undefined);
+            }}
+          >
+            <div className="space-y-2">
+              <Label htmlFor="chat-project-name">{t('chatProjectNameLabel')}</Label>
+              <Input
+                id="chat-project-name"
+                value={name}
+                onChange={(event) => setName(event.target.value)}
+                placeholder={t('chatProjectNamePlaceholder')}
+                autoFocus
+                disabled={isCreating}
+              />
+            </div>
+
+            <div className="space-y-2">
+              <Label htmlFor="chat-project-template">{t('chatProjectTemplateLabel')}</Label>
+              <Select
+                value={template}
+                onValueChange={(value) => setTemplate(value as ProjectTemplateId)}
+                disabled={isCreating}
+              >
+                <SelectTrigger id="chat-project-template">
+                  <SelectValue />
+                </SelectTrigger>
+                <SelectContent>
+                  {availableTemplateIds.map((templateId) => (
+                    <SelectItem key={templateId} value={templateId}>
+                      {projectTemplateLabel(templateId)}
+                    </SelectItem>
+                  ))}
+                </SelectContent>
+              </Select>
+            </div>
+
+            <div className="space-y-2">
+              <Label htmlFor="chat-project-root-path">{t('chatProjectPathLabel')}</Label>
+              <div className="flex gap-2">
+                <Input
+                  id="chat-project-root-path"
+                  value={rootPath}
+                  onChange={(event) => setRootPath(event.target.value)}
+                  placeholder={t('chatProjectPathPlaceholder')}
+                  disabled={isCreating}
+                />
+                <Button
+                  type="button"
+                  variant="outline"
+                  onClick={() => setPathPickerOpen(true)}
+                  disabled={isCreating}
+                >
+                  <FolderOpen className="mr-2 h-4 w-4" />
+                  {t('browse')}
+                </Button>
+              </div>
+              <p className="text-xs leading-relaxed text-muted-foreground">
+                {t('chatProjectPathHint')}
+              </p>
+            </div>
+
+            {errorMessage ? (
+              <p role="alert" className="text-sm text-destructive">
+                {errorMessage}
+              </p>
+            ) : null}
+
+            <DialogFooter>
+              <Button type="button" variant="outline" onClick={closeDialog} disabled={isCreating}>
+                {t('cancel')}
+              </Button>
+              <Button type="submit" disabled={!normalizedName || isCreating}>
+                {isCreating ? t('saving') : t('chatProjectCreateAction')}
+              </Button>
+            </DialogFooter>
+          </form>
+        </DialogContent>
+      </Dialog>
+      <ServerPathPickerDialog
+        open={pathPickerOpen}
+        currentPath={rootPath}
+        defaultWorkspacePath={defaultWorkspacePath}
+        isSaving={false}
+        onOpenChange={setPathPickerOpen}
+        onConfirm={(path) => {
+          setRootPath(path);
+          setPathPickerOpen(false);
+        }}
+        title={t('chatProjectPathPickerTitle')}
+        description={t('chatProjectPathPickerDescription')}
+        pathLabel={t('chatProjectPathLabel')}
+        pathPlaceholder={t('chatProjectPathPlaceholder')}
+        confirmLabel={t('selectCurrentDirectory')}
+        hint={t('chatProjectPathHint')}
+      />
+    </>
+  );
+}

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

@@ -32,7 +32,7 @@ describe('ChatSessionHeaderActions', () => {
         sessionKey="session-1"
         canDeleteSession
         isDeletePending={false}
-        projectRoot="/tmp/project-alpha"
+        currentPath="/tmp/project-alpha"
         isWorkspaceOpen={false}
         onToggleWorkspace={mocks.onToggleWorkspace}
         onDeleteSession={mocks.onDeleteSession}
@@ -55,7 +55,7 @@ describe('ChatSessionHeaderActions', () => {
         sessionKey="draft-session"
         canDeleteSession={false}
         isDeletePending={false}
-        projectRoot={null}
+        currentPath={null}
         isWorkspaceOpen={false}
         onToggleWorkspace={mocks.onToggleWorkspace}
         onDeleteSession={mocks.onDeleteSession}
@@ -77,7 +77,7 @@ describe('ChatSessionHeaderActions', () => {
         sessionKey="session-codex"
         canDeleteSession
         isDeletePending={false}
-        projectRoot={null}
+        currentPath={null}
         metadata={{
           codex_thread_id: 'thread-123',
           runtime: 'codex',
@@ -106,7 +106,7 @@ describe('ChatSessionHeaderActions', () => {
         sessionKey="session-children"
         canDeleteSession
         isDeletePending={false}
-        projectRoot={null}
+        currentPath={null}
         isWorkspaceOpen={false}
         onToggleWorkspace={mocks.onToggleWorkspace}
         onDeleteSession={mocks.onDeleteSession}
@@ -126,7 +126,7 @@ describe('ChatSessionHeaderActions', () => {
         sessionKey="session-actions"
         canDeleteSession
         isDeletePending={false}
-        projectRoot={null}
+        currentPath={null}
         isWorkspaceOpen={false}
         onToggleWorkspace={mocks.onToggleWorkspace}
         onDeleteSession={mocks.onDeleteSession}
@@ -146,7 +146,7 @@ describe('ChatSessionHeaderActions', () => {
         sessionKey="session-actions"
         canDeleteSession
         isDeletePending={false}
-        projectRoot={null}
+        currentPath={null}
         isWorkspaceOpen={false}
         onToggleWorkspace={mocks.onToggleWorkspace}
         onDeleteSession={mocks.onDeleteSession}
@@ -169,7 +169,7 @@ describe('ChatSessionHeaderActions', () => {
         sessionKey="session-actions"
         canDeleteSession
         isDeletePending={false}
-        projectRoot={null}
+        currentPath={null}
         isWorkspaceOpen
         onToggleWorkspace={mocks.onToggleWorkspace}
         onDeleteSession={mocks.onDeleteSession}

package/src/features/chat/features/session/components/session-header/__tests__/chat-session-project-dialog.test.tsx

@@ -0,0 +1,47 @@
+import { render } from "@testing-library/react";
+import { describe, expect, it, vi } from "vitest";
+import { ChatSessionProjectDialog } from "@/features/chat/features/session/components/session-header/chat-session-project-dialog";
+
+const pathPickerSpy = vi.fn((_props: unknown) => null);
+
+vi.mock("@/shared/components/path-picker/server-path-picker-dialog", () => ({
+  ServerPathPickerDialog: (props: unknown) => pathPickerSpy(props),
+}));
+
+describe("ChatSessionProjectDialog", () => {
+  it("uses the default workspace as the browse start and quick-access location", () => {
+    render(
+      <ChatSessionProjectDialog
+        open
+        currentProjectRoot={null}
+        defaultWorkspacePath="/tmp/default-workspace"
+        isSaving={false}
+        onOpenChange={() => undefined}
+        onSave={() => undefined}
+      />,
+    );
+
+    expect(pathPickerSpy).toHaveBeenCalledWith(expect.objectContaining({
+      currentPath: null,
+      defaultWorkspacePath: "/tmp/default-workspace",
+    }));
+  });
+
+  it("prefers an explicit project over the default workdir", () => {
+    render(
+      <ChatSessionProjectDialog
+        open
+        currentProjectRoot="/tmp/project"
+        defaultWorkspacePath="/tmp/default-workspace"
+        isSaving={false}
+        onOpenChange={() => undefined}
+        onSave={() => undefined}
+      />,
+    );
+
+    expect(pathPickerSpy).toHaveBeenLastCalledWith(expect.objectContaining({
+      currentPath: "/tmp/project",
+      defaultWorkspacePath: "/tmp/default-workspace",
+    }));
+  });
+});

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

@@ -15,7 +15,8 @@ type ChatSessionHeaderActionsProps = {
   sessionKey: string;
   canDeleteSession: boolean;
   isDeletePending: boolean;
-  projectRoot?: string | null;
+  currentPath?: string | null;
+  defaultWorkspacePath?: string | null;
   metadata?: Record<string, unknown> | null;
   isWorkspaceOpen: boolean;
   onToggleWorkspace: () => void;
@@ -26,7 +27,8 @@ export function ChatSessionHeaderActions({
   sessionKey,
   canDeleteSession,
   isDeletePending,
-  projectRoot,
+  currentPath,
+  defaultWorkspacePath,
   metadata,
   isWorkspaceOpen,
   onToggleWorkspace,
@@ -119,7 +121,8 @@ export function ChatSessionHeaderActions({
 
       <ChatSessionProjectDialog
         open={isDialogOpen}
-        currentProjectRoot={projectRoot}
+        currentProjectRoot={currentPath}
+        defaultWorkspacePath={defaultWorkspacePath}
         isSaving={isProjectPending}
         onOpenChange={setIsDialogOpen}
         onSave={runProjectUpdate}

package/src/features/chat/features/session/components/session-header/chat-session-project-badge.tsx

@@ -15,6 +15,7 @@ type ChatSessionProjectBadgeProps = {
   sessionKey: string;
   projectName: string;
   projectRoot?: string | null;
+  defaultWorkspacePath?: string | null;
   persistToServer: boolean;
 };
 
@@ -26,6 +27,7 @@ export function ChatSessionProjectBadge({
   sessionKey,
   projectName,
   projectRoot,
+  defaultWorkspacePath,
   persistToServer,
 }: ChatSessionProjectBadgeProps) {
   const updateSessionProject = useChatSessionProject();
@@ -106,6 +108,7 @@ export function ChatSessionProjectBadge({
       <ChatSessionProjectDialog
         open={isDialogOpen}
         currentProjectRoot={projectRoot}
+        defaultWorkspacePath={defaultWorkspacePath}
         isSaving={isProjectPending}
         onOpenChange={setIsDialogOpen}
         onSave={runProjectUpdate}

package/src/features/chat/features/session/components/session-header/chat-session-project-dialog.tsx

@@ -4,6 +4,7 @@ import { t } from '@/shared/lib/i18n';
 type ChatSessionProjectDialogProps = {
   open: boolean;
   currentProjectRoot?: string | null;
+  defaultWorkspacePath?: string | null;
   isSaving: boolean;
   onOpenChange: (open: boolean) => void;
   onSave: (projectRoot: string) => Promise<void> | void;
@@ -12,6 +13,7 @@ type ChatSessionProjectDialogProps = {
 export function ChatSessionProjectDialog({
   open,
   currentProjectRoot,
+  defaultWorkspacePath,
   isSaving,
   onOpenChange,
   onSave,
@@ -20,6 +22,7 @@ export function ChatSessionProjectDialog({
     <ServerPathPickerDialog
       open={open}
       currentPath={currentProjectRoot}
+      defaultWorkspacePath={defaultWorkspacePath}
       isSaving={isSaving}
       onOpenChange={onOpenChange}
       onConfirm={onSave}

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

@@ -0,0 +1,245 @@
+import { useId } from "react";
+import { Check, ChevronDown, ChevronRight, Folder } from "lucide-react";
+import type { NcpSessionListItemView } from "@/features/chat/features/ncp/hooks/use-ncp-session-list-view";
+import { SessionContextIconNode } from "@/features/chat/features/session/components/session-context-icon";
+import { SessionRunBadge } from "@/features/chat/features/session/components/session-run-badge";
+import type {
+  ChatSidebarDateGroup,
+  ChatSidebarProjectGroup,
+} from "@/features/chat/features/session/utils/chat-sidebar-session-groups.utils";
+import {
+  formatSessionListTime,
+  sessionActivityPreviewText,
+  sessionDisplayName,
+} from "@/features/chat/features/session/utils/chat-session-display.utils";
+import { resolveSessionContextView } from "@/features/chat/features/session/utils/session-context.utils";
+import type { ChatSessionTypeOption } from "@/features/chat/features/session-type/utils/chat-session-type.utils";
+import { shouldShowUnreadSessionIndicator } from "@/features/chat/stores/chat-session-list.store";
+import { t } from "@/shared/lib/i18n";
+import { cn } from "@/shared/lib/utils";
+
+type SessionSwitchItemsProps = {
+  items: NcpSessionListItemView[];
+  selectedSessionKey: string | null;
+  optimisticReadAtBySessionKey: Record<string, string>;
+  sessionTypeOptions: ChatSessionTypeOption[];
+  onSelect: (sessionKey: string) => void;
+  className?: string;
+};
+
+function ChatSessionSwitchItem({
+  item,
+  selectedSessionKey,
+  optimisticReadAtBySessionKey,
+  sessionTypeOptions,
+  onSelect,
+}: Omit<SessionSwitchItemsProps, "items" | "className"> & {
+  item: NcpSessionListItemView;
+}) {
+  const { session, runStatus } = item;
+  const active = selectedSessionKey === session.key;
+  const optimisticReadAt = optimisticReadAtBySessionKey[session.key];
+  const effectiveReadAt =
+    optimisticReadAt && session.readAt
+      ? optimisticReadAt.localeCompare(session.readAt) > 0
+        ? optimisticReadAt
+        : session.readAt
+      : (optimisticReadAt ?? session.readAt);
+  const shouldShowUnread = shouldShowUnreadSessionIndicator({
+    active,
+    lastMessageAt: session.lastMessageAt,
+    readAt: effectiveReadAt,
+    runStatus,
+  });
+  const previewText =
+    sessionActivityPreviewText(session) ??
+    session.projectName ??
+    session.projectRoot ??
+    `${session.messageCount}`;
+  const trailingText = formatSessionListTime(
+    session.lastMessageAt ?? session.createdAt,
+  );
+  const sessionContext = resolveSessionContextView(session, sessionTypeOptions);
+
+  return (
+    <button
+      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-1 focus-visible:ring-border",
+        active
+          ? "bg-accent text-accent-foreground"
+          : "text-foreground hover:bg-accent/65 hover:text-accent-foreground",
+      )}
+      onClick={() => onSelect(session.key)}
+    >
+      <span className="relative mt-1 flex h-2.5 w-2.5 shrink-0 items-center justify-center">
+        {shouldShowUnread ? (
+          <span
+            aria-label={t("chatSidebarUnread")}
+            className="h-1.5 w-1.5 rounded-full bg-primary"
+          />
+        ) : active ? (
+          <Check className="h-3 w-3 text-primary" />
+        ) : (
+          <span className="h-1 w-1 rounded-full bg-muted-foreground/45" />
+        )}
+      </span>
+      <span className="min-w-0 flex-1">
+        <span className="flex min-w-0 items-center gap-2">
+          <span className="min-w-0 flex-1 truncate text-xs font-medium">
+            {sessionDisplayName(session)}
+          </span>
+          {sessionContext.label ? (
+            <span className="shrink-0 rounded-full border border-border/70 px-1.5 py-0.5 text-[10px] font-semibold leading-none text-muted-foreground">
+              {sessionContext.label}
+            </span>
+          ) : null}
+          {sessionContext.icon ? (
+            <span className="inline-flex h-[1.125rem] w-[1.125rem] shrink-0 items-center justify-center text-muted-foreground">
+              <SessionContextIconNode icon={sessionContext.icon} />
+            </span>
+          ) : null}
+        </span>
+        <span className="mt-0.5 flex min-w-0 items-center gap-2 text-[11px] text-muted-foreground">
+          <span className="min-w-0 truncate">{previewText}</span>
+          <span className="shrink-0">{trailingText}</span>
+        </span>
+      </span>
+      {runStatus ? (
+        <span className="mt-0.5 shrink-0">
+          <SessionRunBadge status={runStatus} />
+        </span>
+      ) : null}
+    </button>
+  );
+}
+
+function ChatSessionSwitchItems({
+  items,
+  selectedSessionKey,
+  optimisticReadAtBySessionKey,
+  sessionTypeOptions,
+  onSelect,
+  className,
+}: SessionSwitchItemsProps) {
+  return (
+    <div className={cn("space-y-1", className)}>
+      {items.map((item) => (
+        <ChatSessionSwitchItem
+          key={item.session.key}
+          item={item}
+          selectedSessionKey={selectedSessionKey}
+          optimisticReadAtBySessionKey={optimisticReadAtBySessionKey}
+          sessionTypeOptions={sessionTypeOptions}
+          onSelect={onSelect}
+        />
+      ))}
+    </div>
+  );
+}
+
+function ChatSessionSwitchDateGroup({
+  group,
+  ...itemsProps
+}: Omit<SessionSwitchItemsProps, "items"> & {
+  group: ChatSidebarDateGroup;
+}) {
+  return (
+    <section aria-label={group.label}>
+      <div className="px-2 py-1 text-[11px] font-medium uppercase tracking-wider text-muted-foreground/70">
+        {group.label}
+      </div>
+      <ChatSessionSwitchItems items={group.items} {...itemsProps} />
+    </section>
+  );
+}
+
+function ChatSessionSwitchProjectGroup({
+  group,
+  isCollapsed,
+  onToggleCollapsed,
+  ...itemsProps
+}: Omit<SessionSwitchItemsProps, "items"> & {
+  group: ChatSidebarProjectGroup;
+  isCollapsed: boolean;
+  onToggleCollapsed: (projectRoot: string) => void;
+}) {
+  const contentId = useId();
+  const actionLabel = `${t(
+    isCollapsed ? "chatSidebarExpandProject" : "chatSidebarCollapseProject",
+  )} · ${group.projectName}`;
+
+  return (
+    <section aria-label={group.projectName}>
+      <button
+        type="button"
+        aria-controls={contentId}
+        aria-expanded={!isCollapsed}
+        aria-label={actionLabel}
+        className="group flex h-10 w-full min-w-0 items-center gap-1.5 rounded-lg px-2 text-left text-muted-foreground transition-colors hover:bg-gray-200/60 hover:text-gray-900 focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-border"
+        onClick={() => onToggleCollapsed(group.projectRoot)}
+      >
+        <Folder className="h-3.5 w-3.5 shrink-0" aria-hidden="true" />
+        <span
+          className="min-w-0 flex-1 truncate text-[11px] font-medium uppercase tracking-wider"
+          title={group.projectRoot}
+        >
+          {group.projectName}
+        </span>
+        <span className="shrink-0 text-[10px] text-muted-foreground/70">
+          {group.items.length}
+        </span>
+        {isCollapsed ? (
+          <ChevronRight className="h-3.5 w-3.5 shrink-0" aria-hidden="true" />
+        ) : (
+          <ChevronDown className="h-3.5 w-3.5 shrink-0" aria-hidden="true" />
+        )}
+      </button>
+      {isCollapsed ? null : (
+        <ChatSessionSwitchItems
+          items={group.items}
+          className="mt-0.5"
+          {...itemsProps}
+        />
+      )}
+    </section>
+  );
+}
+
+export function ChatSessionSwitcherGroups({
+  collapsedProjectRoots,
+  dateGroups,
+  isProjectFirstView,
+  onToggleProjectCollapsed,
+  projectGroups,
+  ...itemsProps
+}: Omit<SessionSwitchItemsProps, "items"> & {
+  collapsedProjectRoots: string[];
+  dateGroups: ChatSidebarDateGroup[];
+  isProjectFirstView: boolean;
+  onToggleProjectCollapsed: (projectRoot: string) => void;
+  projectGroups: ChatSidebarProjectGroup[];
+}) {
+  return (
+    <div className="space-y-3">
+      {isProjectFirstView
+        ? projectGroups.map((group) => (
+            <ChatSessionSwitchProjectGroup
+              key={group.projectRoot}
+              group={group}
+              isCollapsed={collapsedProjectRoots.includes(group.projectRoot)}
+              onToggleCollapsed={onToggleProjectCollapsed}
+              {...itemsProps}
+            />
+          ))
+        : dateGroups.map((group) => (
+            <ChatSessionSwitchDateGroup
+              key={group.label}
+              group={group}
+              {...itemsProps}
+            />
+          ))}
+    </div>
+  );
+}