@tuturuuu/ui 0.5.0 → 0.6.0

package/src/components/ui/tu-do/shared/task-edit-dialog/components/smart-task-suggestions-panel.test.tsx

@@ -0,0 +1,129 @@
+/**
+ * @vitest-environment jsdom
+ */
+
+import '@testing-library/jest-dom/vitest';
+import { fireEvent, render, screen } from '@testing-library/react';
+import type { WorkspaceTaskSuggestionTask } from '@tuturuuu/internal-api/tasks';
+import { describe, expect, it, vi } from 'vitest';
+import {
+  SmartTaskSuggestionsButton,
+  SmartTaskSuggestionsPanel,
+} from './smart-task-suggestions-panel';
+
+vi.mock('next-intl', () => ({
+  useTranslations: () => (key: string, values?: Record<string, unknown>) =>
+    values ? `${key}:${JSON.stringify(values)}` : key,
+}));
+
+const baseSuggestion: WorkspaceTaskSuggestionTask = {
+  id: 'suggestion-1',
+  title: 'Prepare launch checklist',
+  description: 'Confirm owners and deadlines.',
+  priority: 'high',
+  listId: 'list-1',
+  listName: 'Inbox',
+  labelIds: ['label-1'],
+  labels: [
+    {
+      id: 'label-1',
+      name: 'Launch',
+      color: 'blue',
+      created_at: '2026-06-11T00:00:00.000Z',
+    },
+  ],
+  projectIds: ['project-1'],
+  projects: [{ id: 'project-1', name: 'Website', status: 'active' }],
+  endDate: '2026-06-12T16:59:59.000Z',
+  estimationPoints: 3,
+  durationMinutes: 90,
+  isSplittable: true,
+  minSplitDurationMinutes: 30,
+  maxSplitDurationMinutes: 60,
+  calendarHours: 'work_hours',
+  autoSchedule: true,
+  reason: 'Launch work with a deadline.',
+};
+
+describe('SmartTaskSuggestionsPanel', () => {
+  it('renders loading state from the sparkle button and panel', () => {
+    render(
+      <>
+        <SmartTaskSuggestionsButton isLoading={true} onClick={vi.fn()} />
+        <SmartTaskSuggestionsPanel
+          suggestions={[]}
+          selectedSuggestionIds={[]}
+          isLoading={true}
+          onApplyFirst={vi.fn()}
+          onApplySuggestion={vi.fn()}
+          onClose={vi.fn()}
+          onCreateSelected={vi.fn()}
+          onRetry={vi.fn()}
+          onToggleSuggestion={vi.fn()}
+        />
+      </>
+    );
+
+    expect(screen.getByLabelText('smart_suggest')).toBeDisabled();
+    expect(screen.getByText('smart_generating')).toBeInTheDocument();
+  });
+
+  it('applies a single suggestion without creating it immediately', () => {
+    const onApplySuggestion = vi.fn();
+
+    render(
+      <SmartTaskSuggestionsPanel
+        suggestions={[baseSuggestion]}
+        selectedSuggestionIds={['suggestion-1']}
+        onApplyFirst={vi.fn()}
+        onApplySuggestion={onApplySuggestion}
+        onClose={vi.fn()}
+        onCreateSelected={vi.fn()}
+        onRetry={vi.fn()}
+        onToggleSuggestion={vi.fn()}
+      />
+    );
+
+    fireEvent.click(
+      screen.getByRole('button', { name: 'smart_apply_suggestion' })
+    );
+
+    expect(onApplySuggestion).toHaveBeenCalledWith(baseSuggestion);
+    expect(
+      screen.queryByRole('button', { name: /smart_create_selected/ })
+    ).not.toBeInTheDocument();
+  });
+
+  it('creates selected tasks from multiple suggestions', () => {
+    const onCreateSelected = vi.fn();
+    const onToggleSuggestion = vi.fn();
+    const secondSuggestion = {
+      ...baseSuggestion,
+      id: 'suggestion-2',
+      title: 'Draft launch note',
+    };
+
+    render(
+      <SmartTaskSuggestionsPanel
+        suggestions={[baseSuggestion, secondSuggestion]}
+        selectedSuggestionIds={['suggestion-1']}
+        onApplyFirst={vi.fn()}
+        onApplySuggestion={vi.fn()}
+        onClose={vi.fn()}
+        onCreateSelected={onCreateSelected}
+        onRetry={vi.fn()}
+        onToggleSuggestion={onToggleSuggestion}
+      />
+    );
+
+    fireEvent.click(screen.getAllByLabelText('smart_select_suggestion')[1]!);
+    fireEvent.click(
+      screen.getByRole('button', {
+        name: 'smart_create_selected:{"count":1}',
+      })
+    );
+
+    expect(onToggleSuggestion).toHaveBeenCalledWith('suggestion-2');
+    expect(onCreateSelected).toHaveBeenCalledTimes(1);
+  });
+});

package/src/components/ui/tu-do/shared/task-edit-dialog/components/smart-task-suggestions-panel.tsx

@@ -0,0 +1,358 @@
+'use client';
+
+import {
+  AlertCircle,
+  Calendar,
+  CheckCircle2,
+  Clock,
+  Flag,
+  FolderKanban,
+  ListTodo,
+  Loader2,
+  Sparkles,
+  Tag,
+  Timer,
+  X,
+} from '@tuturuuu/icons';
+import type { WorkspaceTaskSuggestionTask } from '@tuturuuu/internal-api/tasks';
+import { Badge } from '@tuturuuu/ui/badge';
+import { Button } from '@tuturuuu/ui/button';
+import { Checkbox } from '@tuturuuu/ui/checkbox';
+import { Tooltip, TooltipContent, TooltipTrigger } from '@tuturuuu/ui/tooltip';
+import { cn } from '@tuturuuu/utils/format';
+import dayjs from 'dayjs';
+import { useTranslations } from 'next-intl';
+
+interface SmartTaskSuggestionsButtonProps {
+  disabled?: boolean;
+  isLoading?: boolean;
+  onClick: () => void;
+}
+
+interface SmartTaskSuggestionsPanelProps {
+  suggestions: WorkspaceTaskSuggestionTask[];
+  selectedSuggestionIds: string[];
+  createErrors?: Record<string, string>;
+  creatingSuggestionIds?: string[];
+  errorMessage?: string | null;
+  isCreatingSelected?: boolean;
+  isLoading?: boolean;
+  onApplyFirst: () => void;
+  onApplySuggestion: (suggestion: WorkspaceTaskSuggestionTask) => void;
+  onClose: () => void;
+  onCreateSelected: () => void;
+  onRetry: () => void;
+  onToggleSuggestion: (suggestionId: string) => void;
+}
+
+function formatDuration(minutes: number) {
+  if (minutes < 60) {
+    return `${minutes}m`;
+  }
+
+  const hours = Math.floor(minutes / 60);
+  const remainder = minutes % 60;
+
+  return remainder ? `${hours}h ${remainder}m` : `${hours}h`;
+}
+
+function SuggestionChip({
+  children,
+  icon,
+}: {
+  children: React.ReactNode;
+  icon: React.ReactNode;
+}) {
+  return (
+    <Badge
+      variant="secondary"
+      className="h-6 gap-1 rounded-md px-1.5 font-normal text-xs"
+    >
+      {icon}
+      <span className="max-w-28 truncate">{children}</span>
+    </Badge>
+  );
+}
+
+function SuggestionCard({
+  creating,
+  error,
+  multi,
+  onApply,
+  onToggle,
+  selected,
+  suggestion,
+}: {
+  creating?: boolean;
+  error?: string;
+  multi: boolean;
+  onApply: () => void;
+  onToggle: () => void;
+  selected: boolean;
+  suggestion: WorkspaceTaskSuggestionTask;
+}) {
+  const t = useTranslations('ws-task-boards.dialog');
+
+  return (
+    <div
+      className={cn(
+        'rounded-lg border bg-background p-3 transition-colors',
+        selected && 'border-dynamic-blue/60 bg-dynamic-blue/5'
+      )}
+    >
+      <div className="flex items-start gap-2">
+        {multi && (
+          <Checkbox
+            aria-label={t('smart_select_suggestion')}
+            checked={selected}
+            className="mt-0.5"
+            onCheckedChange={onToggle}
+          />
+        )}
+        <div className="min-w-0 flex-1 space-y-2">
+          <div className="flex items-start justify-between gap-2">
+            <div className="min-w-0">
+              <div className="truncate font-medium text-sm">
+                {suggestion.title}
+              </div>
+              {suggestion.description && (
+                <div className="line-clamp-2 text-muted-foreground text-xs">
+                  {suggestion.description}
+                </div>
+              )}
+            </div>
+            {!multi && (
+              <Button size="sm" type="button" onClick={onApply}>
+                <Sparkles className="h-4 w-4" />
+                {t('smart_apply_suggestion')}
+              </Button>
+            )}
+          </div>
+
+          <div className="flex flex-wrap gap-1.5">
+            {suggestion.listName && (
+              <SuggestionChip icon={<ListTodo className="h-3 w-3" />}>
+                {suggestion.listName}
+              </SuggestionChip>
+            )}
+            {suggestion.priority && (
+              <SuggestionChip icon={<Flag className="h-3 w-3" />}>
+                {t(`priority.${suggestion.priority}`)}
+              </SuggestionChip>
+            )}
+            {suggestion.endDate && (
+              <SuggestionChip icon={<Calendar className="h-3 w-3" />}>
+                {dayjs(suggestion.endDate).format('MMM D')}
+              </SuggestionChip>
+            )}
+            {suggestion.durationMinutes && (
+              <SuggestionChip icon={<Clock className="h-3 w-3" />}>
+                {formatDuration(suggestion.durationMinutes)}
+              </SuggestionChip>
+            )}
+            {suggestion.estimationPoints != null && (
+              <SuggestionChip icon={<Timer className="h-3 w-3" />}>
+                {suggestion.estimationPoints}
+              </SuggestionChip>
+            )}
+            {suggestion.labels.map((label) => (
+              <SuggestionChip key={label.id} icon={<Tag className="h-3 w-3" />}>
+                {label.name}
+              </SuggestionChip>
+            ))}
+            {suggestion.projects.map((project) => (
+              <SuggestionChip
+                key={project.id}
+                icon={<FolderKanban className="h-3 w-3" />}
+              >
+                {project.name}
+              </SuggestionChip>
+            ))}
+          </div>
+
+          {suggestion.reason && (
+            <div className="text-muted-foreground text-xs">
+              {suggestion.reason}
+            </div>
+          )}
+
+          {error && (
+            <div className="flex items-center gap-1.5 text-destructive text-xs">
+              <AlertCircle className="h-3.5 w-3.5" />
+              {error}
+            </div>
+          )}
+
+          {creating && (
+            <div className="flex items-center gap-1.5 text-muted-foreground text-xs">
+              <Loader2 className="h-3.5 w-3.5 animate-spin" />
+              {t('smart_creating_task')}
+            </div>
+          )}
+        </div>
+      </div>
+    </div>
+  );
+}
+
+export function SmartTaskSuggestionsButton({
+  disabled,
+  isLoading,
+  onClick,
+}: SmartTaskSuggestionsButtonProps) {
+  const t = useTranslations('ws-task-boards.dialog');
+
+  return (
+    <Tooltip>
+      <TooltipTrigger asChild>
+        <Button
+          type="button"
+          variant="ghost"
+          size="icon"
+          aria-label={t('smart_suggest')}
+          disabled={disabled || isLoading}
+          className="h-8 w-8 text-muted-foreground hover:text-foreground"
+          onClick={onClick}
+        >
+          {isLoading ? (
+            <Loader2 className="h-4 w-4 animate-spin" />
+          ) : (
+            <Sparkles className="h-4 w-4" />
+          )}
+        </Button>
+      </TooltipTrigger>
+      <TooltipContent side="bottom">{t('smart_suggest')}</TooltipContent>
+    </Tooltip>
+  );
+}
+
+export function SmartTaskSuggestionsPanel({
+  suggestions,
+  selectedSuggestionIds,
+  createErrors = {},
+  creatingSuggestionIds = [],
+  errorMessage,
+  isCreatingSelected,
+  isLoading,
+  onApplyFirst,
+  onApplySuggestion,
+  onClose,
+  onCreateSelected,
+  onRetry,
+  onToggleSuggestion,
+}: SmartTaskSuggestionsPanelProps) {
+  const t = useTranslations('ws-task-boards.dialog');
+  const selectedCount = selectedSuggestionIds.length;
+
+  if (isLoading) {
+    return (
+      <div className="rounded-lg border bg-muted/30 p-3">
+        <div className="flex items-center gap-2 text-sm">
+          <Loader2 className="h-4 w-4 animate-spin text-muted-foreground" />
+          <span>{t('smart_generating')}</span>
+        </div>
+      </div>
+    );
+  }
+
+  if (errorMessage) {
+    return (
+      <div className="rounded-lg border border-destructive/40 bg-destructive/5 p-3">
+        <div className="flex items-start justify-between gap-2">
+          <div className="flex min-w-0 gap-2">
+            <AlertCircle className="mt-0.5 h-4 w-4 shrink-0 text-destructive" />
+            <div className="min-w-0 space-y-1">
+              <div className="font-medium text-sm">
+                {t('smart_suggestions_failed')}
+              </div>
+              <div className="text-muted-foreground text-xs">
+                {errorMessage}
+              </div>
+            </div>
+          </div>
+          <Button size="sm" type="button" variant="ghost" onClick={onRetry}>
+            {t('retry')}
+          </Button>
+        </div>
+      </div>
+    );
+  }
+
+  if (!suggestions.length) {
+    return null;
+  }
+
+  const multi = suggestions.length > 1;
+
+  return (
+    <div className="rounded-lg border bg-muted/20 p-3">
+      <div className="mb-3 flex items-start justify-between gap-2">
+        <div className="min-w-0">
+          <div className="flex items-center gap-1.5 font-medium text-sm">
+            <Sparkles className="h-4 w-4" />
+            {multi
+              ? t('smart_multiple_suggestions')
+              : t('smart_one_suggestion')}
+          </div>
+          <div className="text-muted-foreground text-xs">
+            {multi
+              ? t('smart_multiple_suggestions_description')
+              : t('smart_one_suggestion_description')}
+          </div>
+        </div>
+        <Button
+          type="button"
+          variant="ghost"
+          size="icon"
+          aria-label={t('smart_dismiss')}
+          className="h-7 w-7 shrink-0"
+          onClick={onClose}
+        >
+          <X className="h-3.5 w-3.5" />
+        </Button>
+      </div>
+
+      <div className="space-y-2">
+        {suggestions.map((suggestion) => (
+          <SuggestionCard
+            key={suggestion.id}
+            creating={creatingSuggestionIds.includes(suggestion.id)}
+            error={createErrors[suggestion.id]}
+            multi={multi}
+            selected={selectedSuggestionIds.includes(suggestion.id)}
+            suggestion={suggestion}
+            onApply={() => onApplySuggestion(suggestion)}
+            onToggle={() => onToggleSuggestion(suggestion.id)}
+          />
+        ))}
+      </div>
+
+      {multi && (
+        <div className="mt-3 flex flex-wrap items-center justify-between gap-2">
+          <Button
+            type="button"
+            size="sm"
+            variant="secondary"
+            onClick={onApplyFirst}
+          >
+            <CheckCircle2 className="h-4 w-4" />
+            {t('smart_apply_first')}
+          </Button>
+          <Button
+            type="button"
+            size="sm"
+            disabled={!selectedCount || isCreatingSelected}
+            onClick={onCreateSelected}
+          >
+            {isCreatingSelected ? (
+              <Loader2 className="h-4 w-4 animate-spin" />
+            ) : (
+              <Sparkles className="h-4 w-4" />
+            )}
+            {t('smart_create_selected', { count: selectedCount })}
+          </Button>
+        </div>
+      )}
+    </div>
+  );
+}

package/src/components/ui/tu-do/shared/task-edit-dialog/components/task-description-editor.tsx

@@ -36,7 +36,7 @@ export interface TaskDescriptionEditorProps {
   // Refs
   editorRef: React.RefObject<HTMLDivElement | null>;
   richTextEditorRef: React.RefObject<HTMLDivElement | null>;
-  titleInputRef: React.RefObject<HTMLInputElement | null>;
+  titleInputRef: React.RefObject<HTMLInputElement | HTMLTextAreaElement | null>;
   lastCursorPositionRef: React.RefObject<number | null>;
   targetEditorCursorRef: React.RefObject<number | null>;
   flushEditorPendingRef: React.RefObject<

package/src/components/ui/tu-do/shared/task-edit-dialog/components/task-dialog-header.tsx

@@ -222,6 +222,8 @@ interface TaskDialogHeaderProps {
   onOpenShareDialog?: () => void;
   /** Whether the dialog is in read-only mode */
   disabled?: boolean;
+  /** Whether task-dependent actions should be disabled while the task hydrates. */
+  controlsDisabled?: boolean;
   /** Callback to scroll the editor to a collaborator's cursor position */
   onScrollToUserCursor?: (userId: string, displayName: string) => void;
 }
@@ -262,6 +264,7 @@ export function TaskDialogHeader({
   isPersonalWorkspace = false,
   onOpenShareDialog,
   disabled = false,
+  controlsDisabled = false,
   onScrollToUserCursor,
 }: TaskDialogHeaderProps) {
   const t = useTranslations();
@@ -448,7 +451,7 @@ export function TaskDialogHeader({
         )}
 
         {/* Quick Settings */}
-        {!disabled && (
+        {!controlsDisabled && (
           <QuickSettingsPopover isPersonalWorkspace={isPersonalWorkspace} />
         )}
 
@@ -467,10 +470,11 @@ export function TaskDialogHeader({
           onNavigateBack={onNavigateBack}
           onOpenShareDialog={onOpenShareDialog}
           disabled={disabled}
+          controlsDisabled={controlsDisabled}
         />
 
         {/* Hide save button in edit mode when realtime is enabled (either cursors or Yjs sync) */}
-        {!disabled &&
+        {!controlsDisabled &&
           (isCreateMode || (!collaborationMode && !realtimeEnabled)) && (
             <Tooltip>
               <TooltipTrigger asChild>

package/src/components/ui/tu-do/shared/task-edit-dialog/components/task-name-input.test.tsx

@@ -27,7 +27,9 @@ function renderTaskNameInput({
   editorElement.tabIndex = -1;
   editorWrapper.append(editorElement);
 
-  const titleInputRef = { current: null };
+  const titleInputRef = {
+    current: null as HTMLInputElement | HTMLTextAreaElement | null,
+  };
   const editorRef = { current: editorWrapper };
   const lastCursorPositionRef = { current: null };
   const targetEditorCursorRef = { current: targetCursor };
@@ -66,6 +68,18 @@ describe('TaskNameInput', () => {
     vi.restoreAllMocks();
   });
 
+  it.each([
+    'fullscreen',
+    'compact',
+  ] as const)('places the initial %s title caret at the end', (variant) => {
+    const { input } = renderTaskNameInput({ variant });
+    const expectedCursorPosition = 'APIs for Agent Pi'.length;
+
+    expect(input).toHaveFocus();
+    expect(input).toHaveProperty('selectionStart', expectedCursorPosition);
+    expect(input).toHaveProperty('selectionEnd', expectedCursorPosition);
+  });
+
   it('defers focusing the description editor after Enter', () => {
     const { focusEditor, targetEditorCursorRef, input } = renderTaskNameInput();
 
@@ -153,9 +167,11 @@ describe('TaskNameInput', () => {
 
     const eventAllowed = fireEvent.keyDown(input, { key: 'Enter' });
 
+    expect(input.tagName).toBe('TEXTAREA');
     expect(eventAllowed).toBe(false);
     expect(onSubmit).toHaveBeenCalledTimes(1);
     expect(targetEditorCursorRef.current).toBe(12);
+    expect(input).toHaveProperty('value', 'APIs for Agent Pi');
 
     vi.runOnlyPendingTimers();