Merge pull request #2274 from netease-youdao/fisherdaddy/optimize-mainpage-ui

feat(cowork): add time-aware greeting and recent tasks to home view

Author: fisherdaddy

src/renderer/components/cowork/CoworkPromptInput.tsx

@@ -2961,7 +2961,7 @@ const CoworkPromptInput = React.forwardRef<CoworkPromptInputRef, CoworkPromptInp
         {isLarge ? (
           useHomeContextLayout ? (
             <>
-              <div className="relative z-10 rounded-2xl border border-border bg-surface shadow-card">
+              <div className="relative z-10 rounded-2xl border border-border bg-surface shadow-card transition-[border-color,box-shadow] duration-200 focus-within:border-primary/35 focus-within:shadow-elevated">
                 {largeAttachmentPreview}
                 {selectedTextSnippetPreview}
                 {sessionGoalStatusBar}

src/renderer/components/cowork/CoworkView.tsx

@@ -38,9 +38,20 @@ import { useAgentSelectedModel } from './agentModelSelection';
 import { CoworkUiEvent } from './constants';
 import CoworkPromptInput, { type CoworkPromptInputRef } from './CoworkPromptInput';
 import CoworkSessionDetail from './CoworkSessionDetail';
+import HomeRecentTasks from './HomeRecentTasks';
 import { reportPromptTemplateAction } from './promptAnalytics';
 import { buildCoworkContinuationSystemPrompt, buildCoworkSystemPrompt } from './skillSystemPrompt';
 
+// Time-aware hero greeting: the brand mark stays as the logo, so the heading
+// can greet the user instead of repeating the product name on every visit.
+const resolveHomeGreetingKey = (date: Date = new Date()): string => {
+  const hour = date.getHours();
+  if (hour >= 5 && hour < 12) return 'coworkGreetingMorning';
+  if (hour >= 12 && hour < 18) return 'coworkGreetingAfternoon';
+  if (hour >= 18 && hour < 23) return 'coworkGreetingEvening';
+  return 'coworkGreetingLateNight';
+};
+
 const logCoworkViewModel = (message: string): void => {
   console.debug(`[CoworkView] ${message}`);
   window.electron?.log?.fromRenderer?.('debug', 'CoworkView', message);
@@ -795,13 +806,13 @@ const CoworkView: React.FC<CoworkViewProps> = ({ onRequestAppSettings, onShowSki
               className="mt-4 text-2xl font-semibold leading-[var(--lobster-leading-2xl)] tracking-normal text-foreground animate-fade-in-up"
               style={{ animationDelay: '70ms', animationFillMode: 'both' }}
             >
-              {i18nService.t('coworkWelcome')}
+              {i18nService.t(resolveHomeGreetingKey())}
             </h2>
             <p
               className="mt-2 text-[length:var(--lobster-text-promptLarge)] font-normal leading-[var(--lobster-leading-promptLarge)] text-secondary animate-fade-in-up"
               style={{ animationDelay: '120ms', animationFillMode: 'both' }}
             >
-              {i18nService.t('coworkDescription')}
+              {i18nService.t('coworkHomeTagline')}
             </p>
           </div>
 
@@ -846,6 +857,9 @@ const CoworkView: React.FC<CoworkViewProps> = ({ onRequestAppSettings, onShowSki
             )}
             <CreditsResetCampaignFloat />
           </div>
+
+          {/* Recent tasks - one-click resume for returning users */}
+          <HomeRecentTasks />
           <div aria-hidden="true" className="w-full min-h-[24px] flex-[3_0_0px]" />
         </div>
       </div>

src/renderer/components/cowork/HomeRecentTasks.tsx

@@ -0,0 +1,71 @@
+import React, { useMemo } from 'react';
+import { useSelector } from 'react-redux';
+
+import { coworkService } from '../../services/cowork';
+import { i18nService } from '../../services/i18n';
+import { RootState } from '../../store';
+import { CoworkSessionStatusValue } from '../../types/cowork';
+import { formatAgentTaskRelativeTime } from '../agentSidebar/time';
+import LoadingIcon from '../icons/LoadingIcon';
+
+const MAX_RECENT_TASKS = 3;
+
+// Quiet resume strip for the home canvas: the sidebar remains the full task
+// list; this only surfaces the latest few so returning users can continue
+// without leaving the input area.
+const HomeRecentTasks: React.FC = () => {
+  const sessions = useSelector((state: RootState) => state.cowork.sessions);
+
+  const recentSessions = useMemo(() => {
+    return [...sessions]
+      .sort((a, b) => (b.updatedAt || b.createdAt) - (a.updatedAt || a.createdAt))
+      .slice(0, MAX_RECENT_TASKS);
+  }, [sessions]);
+
+  if (recentSessions.length === 0) {
+    return null;
+  }
+
+  return (
+    <div
+      className="relative z-0 mt-10 w-full max-w-3xl animate-fade-in-up"
+      style={{ animationDelay: '320ms', animationFillMode: 'both' }}
+    >
+      <div className="mb-2.5 px-0.5 text-xs font-medium text-secondary">
+        {i18nService.t('coworkRecentTasks')}
+      </div>
+      <div className="grid grid-cols-1 gap-2 sm:grid-cols-3">
+        {recentSessions.map((session) => {
+          const isRunning = session.status === CoworkSessionStatusValue.Running;
+          const relativeTime = formatAgentTaskRelativeTime(session.updatedAt || session.createdAt);
+
+          return (
+            <button
+              key={session.id}
+              type="button"
+              onClick={() => void coworkService.loadSession(session.id)}
+              title={session.title}
+              className="flex flex-col items-start gap-2 rounded-xl border border-border-subtle bg-surface px-3.5 py-3 text-left transition-all duration-200 ease-out hover:border-border hover:bg-surface-raised hover:shadow-subtle active:scale-[0.99]"
+            >
+              <span className="line-clamp-2 min-h-10 w-full text-[13px] font-normal leading-5 text-foreground">
+                {session.title}
+              </span>
+              {isRunning ? (
+                <span className="inline-flex items-center gap-1.5 text-xs text-secondary">
+                  <LoadingIcon className="h-3 w-3 animate-spin" aria-hidden="true" />
+                  {i18nService.t('myAgentSidebarRunning')}
+                </span>
+              ) : (
+                <span className="text-xs text-foreground/45" title={relativeTime.full}>
+                  {relativeTime.compact}
+                </span>
+              )}
+            </button>
+          );
+        })}
+      </div>
+    </div>
+  );
+};
+
+export default HomeRecentTasks;

src/renderer/components/quick-actions/PromptPanel.tsx

@@ -51,7 +51,7 @@ const PromptPanel: React.FC<PromptPanelProps> = ({ action, onPromptSelect }) =>
                 ${
                   isPromptSelected
                     ? 'dark:bg-primary-muted bg-primary-muted border-[color-mix(in_srgb,var(--lobster-primary)_50%,transparent)]'
-                    : 'bg-surface border-border hover:border-border hover:border-border hover:bg-surface-raised'
+                    : 'bg-surface border-border hover:border-primary/30 hover:bg-surface-raised'
                 }
               `}
             >

src/renderer/components/quick-actions/QuickActionBar.tsx

@@ -36,10 +36,10 @@ const QuickActionBar: React.FC<QuickActionBarProps> = ({ actions, onActionSelect
             key={action.id}
             type="button"
             onClick={() => onActionSelect(action.id)}
-            className="flex items-center gap-1.5 rounded-lg border border-border-subtle bg-surface px-3 py-1.5 text-[length:var(--lobster-text-sidebarCompact)] font-normal leading-5 text-secondary transition-all duration-200 ease-out hover:bg-surface-raised hover:border-primary/30 hover:text-foreground"
+            className="group flex items-center gap-1.5 rounded-full border border-border-subtle bg-surface px-3.5 py-1.5 text-[length:var(--lobster-text-sidebarCompact)] font-normal leading-5 text-secondary transition-all duration-200 ease-out hover:-translate-y-px hover:border-primary/30 hover:bg-surface-raised hover:text-foreground hover:shadow-subtle active:translate-y-0 active:scale-[0.97]"
           >
             {IconComponent && (
-              <IconComponent className="h-3.5 w-3.5 text-secondary" />
+              <IconComponent className="h-3.5 w-3.5 text-secondary transition-colors duration-200 group-hover:text-primary" />
             )}
             <span>{action.label}</span>
           </button>

src/renderer/services/i18n.ts

@@ -1092,6 +1092,12 @@ const translations: Record<LanguageType, Record<string, string>> = {
     coworkQuestionWizardAnswerRequired: '请选择或输入答案',
     coworkWelcome: 'LobsterAI',
     coworkDescription: '全场景办公助手 Agent',
+    coworkGreetingMorning: '早上好',
+    coworkGreetingAfternoon: '下午好',
+    coworkGreetingEvening: '晚上好',
+    coworkGreetingLateNight: '夜深了',
+    coworkHomeTagline: '我是 LobsterAI，你的全场景办公 Agent，把任务交给我吧',
+    coworkRecentTasks: '最近任务',
     coworkCurrentAgent: '当前 Agent',
     coworkSelectAgent: '选择 Agent',
 
@@ -3814,6 +3820,12 @@ const translations: Record<LanguageType, Record<string, string>> = {
     coworkQuestionWizardAnswerRequired: 'Please select or enter an answer',
     coworkWelcome: 'LobsterAI',
     coworkDescription: 'All-scenario office assistant Agent',
+    coworkGreetingMorning: 'Good morning',
+    coworkGreetingAfternoon: 'Good afternoon',
+    coworkGreetingEvening: 'Good evening',
+    coworkGreetingLateNight: 'Up late?',
+    coworkHomeTagline: 'LobsterAI here, your all-scenario office agent — hand me any task',
+    coworkRecentTasks: 'Recent tasks',
     coworkCurrentAgent: 'Current Agent',
     coworkSelectAgent: 'Select Agent',