feat(frontend): add canvas agent empty state with server-driven starters

Render a CanvasAgentEmptyState in the Agent panel that fetches localized
starter content from the new agent-starters endpoint, with local defaults
as fallback. Clicking a starter focuses the prompt composer (new focus
handle). Includes accompanying UI polish: side-nav cleanup, animated
prompt examples, and canvas panel spacing tweaks.

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>

frontend/src/ui/pages/BrandKitPage/index.css

@@ -649,16 +649,16 @@
 }
 
 .brand-kit-section-nav button {
-  min-height: 32px;
+  min-height: 40px;
   display: flex;
   align-items: center;
-  gap: 9px;
+  gap: 10px;
   padding: 0 8px;
   border-radius: 6px;
-  color: #676d77;
+  color: #5f6570;
   background: transparent;
-  font-size: 11px;
-  font-weight: 650;
+  font-size: 16px;
+  font-weight: 680;
   text-align: left;
 }
 
@@ -668,9 +668,9 @@
 }
 
 .brand-kit-section-nav button span {
-  width: 19px;
-  color: #a1a6ae;
-  font-size: 9px;
+  width: 22px;
+  color: #9aa0aa;
+  font-size: 14px;
   font-variant-numeric: tabular-nums;
 }
 

frontend/src/ui/pages/CanvasWorkspace/index.tsx

@@ -6,7 +6,7 @@ import { openBrandKit, openHome } from "@/application/route";
 import { ContextMenu, ContextMenuTrigger } from "@/components/ui/context-menu";
 import { Popover, PopoverContent, PopoverTrigger } from "@/components/ui/popover";
 import type { BrandKit } from "@/domain/brandKit";
-import type { AgentContent, AgentMessage, AgentThreadSummary, CanvasNode, CanvasViewport, ExtractedTextLayer, ExtractNodeTextResponse, MockupModel, MockupModelMap, MockupPlacement, MockupSurface, NodeActionRequest, Project, ShareAccess } from "@/domain/design";
+import type { AgentContent, AgentMessage, AgentStarterConfig, AgentThreadSummary, CanvasNode, CanvasViewport, ExtractedTextLayer, ExtractNodeTextResponse, MockupModel, MockupModelMap, MockupPlacement, MockupSurface, NodeActionRequest, Project, ShareAccess } from "@/domain/design";
 import { useI18n, type Locale } from "@/i18n/i18n";
 import { brandKitRepository, brandKitStorageScope } from "@/infrastructure/brandKitRepository";
 import { designGateway } from "@/infrastructure/designGateway";
@@ -18,6 +18,8 @@ import { BrandKitSelector } from "@/ui/components/BrandKitSelector";
 import { CanvasAnnotationPreview } from "@/ui/components/CanvasAnnotationPreview";
 import { CanvasAnnotations } from "@/ui/components/CanvasAnnotations";
 import { CanvasAgentComposer, composerImageSize, defaultComposerImageSettings, type ComposerImageSettings, type ComposerMode } from "@/ui/components/CanvasAgentComposer";
+import { CanvasAgentEmptyState } from "@/ui/components/CanvasAgentEmptyState";
+import { defaultAgentStarterConfig, normalizeAgentStarterConfig } from "@/ui/components/CanvasAgentEmptyState/defaults";
 import { CanvasAgentTimeline } from "@/ui/components/CanvasAgentTimeline";
 import { CanvasGeneratedFilesPanel, CanvasGrid, CanvasLayerPanel } from "@/ui/components/CanvasPanels";
 import { CanvasMinimap } from "@/ui/components/CanvasMinimap";
@@ -85,8 +87,7 @@ const minCanvasZoom = 0.1;
 const maxCanvasZoom = 2.8;
 const defaultCanvasBackgroundColor = "#F7F7F4";
 const canvasBackgroundSwatches = ["#F5F5F5", "#000000", "#FFFFFF", "#00F016", "#A855F7", "#E9D5FF"];
-const generatedFilesPanelWidth = 408;
-const layersPanelWidth = 274;
+const canvasSidePanelWidth = 268;
 const newAgentConversationId = "__new_agent_conversation__";
 const canvasWheelGuardSelector = [
   ".ui-popover-content",
@@ -575,6 +576,7 @@ export function CanvasWorkspace({ projectId, shareAccess = ownerWorkspaceAccess
   const { selectedId, selectedIds, setSelectedIds, selectedNodes, selectedNode, selectOnlyNode, selectNodes, toggleNodeSelection } = useCanvasSelection(nodes);
   const [messages, setMessages] = useState<AgentMessage[]>([]);
   const [prompt, setPrompt] = useState("");
+  const [agentStarterConfig, setAgentStarterConfig] = useState<AgentStarterConfig>(() => defaultAgentStarterConfig(t));
   const [agentThreads, setAgentThreads] = useState<AgentThreadSummary[]>([]);
   const [credits, setCredits] = useState(30);
   const [assistantPanelOpen, setAssistantPanelOpen] = useState(canViewChat);
@@ -703,6 +705,21 @@ export function CanvasWorkspace({ projectId, shareAccess = ownerWorkspaceAccess
       .catch(() => undefined);
   }, [isAuthenticated]);
 
+  useEffect(() => {
+    let active = true;
+    const fallback = defaultAgentStarterConfig(t);
+    setAgentStarterConfig(fallback);
+    designGateway
+      .getAgentStarterConfig(locale)
+      .then((config) => {
+        if (active) setAgentStarterConfig(normalizeAgentStarterConfig(config, fallback));
+      })
+      .catch(() => undefined);
+    return () => {
+      active = false;
+    };
+  }, [locale, t]);
+
   useEffect(() => {
     let active = true;
     if (!isAuthenticated || !canManageBrandKit) {
@@ -1083,7 +1100,7 @@ export function CanvasWorkspace({ projectId, shareAccess = ownerWorkspaceAccess
       height: selectedTextNode.height * viewport.k
     };
   }, [selectedTextNode, viewport]);
-  const floatingToolbarLeftInset = generatedFilesPanelOpen ? generatedFilesPanelWidth : layersPanelOpen ? layersPanelWidth : 0;
+  const floatingToolbarLeftInset = generatedFilesPanelOpen || layersPanelOpen ? canvasSidePanelWidth : 0;
   const insertCanvasImageReference = useCallback((node: CanvasNode, options: { focus?: boolean; pending?: boolean; replacePending?: boolean } = {}) => {
     const reference = canvasNodeToReferenceImage(node);
     if (!reference) return;
@@ -2640,6 +2657,13 @@ export function CanvasWorkspace({ projectId, shareAccess = ownerWorkspaceAccess
     activeAgentThreadIdRef.current = null;
   };
 
+  const selectAgentStarterPrompt = (nextPrompt: string) => {
+    if (!canEdit) return;
+    setComposerMode("agent");
+    setPrompt(nextPrompt);
+    window.requestAnimationFrame(() => agentComposerRef.current?.focus());
+  };
+
   const selectAgentThread = (threadId: string) => {
     autoScrollAgentFeedRef.current = false;
     selectedAgentThreadIdRef.current = threadId;
@@ -3477,6 +3501,8 @@ export function CanvasWorkspace({ projectId, shareAccess = ownerWorkspaceAccess
     );
   }
 
+  const displayProjectTitle = localizedCanvasTitle(project.title, t("canvasUntitled"));
+
   return (
     <div className={`workspace-shell ${assistantPanelOpen && canViewChat ? "" : "assistant-panel-collapsed"} ${canEdit ? "" : "is-readonly"} ${canViewChat ? "" : "is-canvas-only"}`}>
       <header className="workspace-topbar">
@@ -3512,9 +3538,9 @@ export function CanvasWorkspace({ projectId, shareAccess = ownerWorkspaceAccess
           onDrop={canEdit ? handleCanvasDrop : undefined}
         >
           <input ref={canvasImageInputRef} type="file" accept="image/*" multiple hidden disabled={!canEdit} onChange={handleCanvasImageInput} />
-          <div className="workspace-stage-title">
+          <div className={`workspace-stage-title ${generatedFilesPanelOpen || layersPanelOpen ? "is-offset-by-canvas-panel" : ""}`}>
             <WorkspaceTitle
-              title={project.title}
+              title={displayProjectTitle}
               untitledLabel={t("canvasUntitled")}
               renameLabel={t("renameCanvasTitle")}
               placeholder={t("projectTitlePlaceholder")}
@@ -4011,7 +4037,7 @@ export function CanvasWorkspace({ projectId, shareAccess = ownerWorkspaceAccess
           <aside className="assistant-panel">
           <div className="assistant-header">
             <div className="assistant-header-title">
-              <strong>{agentHeaderTitle(messages, project, t("canvasUntitled"))}</strong>
+              <strong>{agentHeaderTitle(messages, project, displayProjectTitle)}</strong>
             </div>
             <div className="assistant-header-actions">
               <button className="assistant-header-icon" type="button" aria-label={t("newChat")} title={t("newChat")} onClick={beginNewAgentConversation} disabled={!canEdit || !hasCurrentConversation}>
@@ -4098,7 +4124,11 @@ export function CanvasWorkspace({ projectId, shareAccess = ownerWorkspaceAccess
           </div>
 
           <div className="assistant-feed" ref={assistantFeedRef} onScroll={updateAssistantScrollButton}>
-            <CanvasAgentTimeline messages={messages} nodes={nodes} active={agentTimelineActive} />
+            {!hasCurrentConversation && !agentTimelineActive ? (
+              <CanvasAgentEmptyState config={agentStarterConfig} disabled={!canEdit} onSelectPrompt={selectAgentStarterPrompt} />
+            ) : (
+              <CanvasAgentTimeline messages={messages} nodes={nodes} active={agentTimelineActive} />
+            )}
           </div>
 
           {showAssistantScrollButton && (
@@ -5616,11 +5646,21 @@ function agentThreadTitleText(content: string) {
   return visiblePromptText(content);
 }
 
-function agentHeaderTitle(messages: AgentMessage[], project: Project, fallback: string) {
+function agentHeaderTitle(messages: AgentMessage[], project: Project, displayProjectTitle: string) {
   const firstUserMessage = messages.find((message) => message.role === "user");
   const firstUserText = firstUserMessage ? visiblePromptText(firstUserMessage.content) : "";
   if (firstUserText) return firstUserText;
-  return visiblePromptText(project.brief) || project.title.trim() || fallback;
+  const brief = visiblePromptText(project.brief);
+  return brief && !isDefaultCanvasTitle(brief) ? brief : displayProjectTitle;
+}
+
+function localizedCanvasTitle(title: string, fallback: string) {
+  const trimmedTitle = title.trim();
+  return !trimmedTitle || isDefaultCanvasTitle(trimmedTitle) ? fallback : trimmedTitle;
+}
+
+function isDefaultCanvasTitle(title: string) {
+  return ["Untitled", "Untitled design project", "未命名设计项目"].includes(title.trim());
 }
 
 function isProjectGenerating(project: Project) {

frontend/src/ui/pages/HomePage/index.tsx

@@ -942,10 +942,10 @@ export function HomePage() {
             })}
           </div>
 
-          <div className="prompt-examples" aria-label={t("promptExamples")}>
-            <strong>{activeMode.label}</strong>
-            {activeMode.examples.map((example) => (
-              <button key={example.id} onClick={() => setPrompt(example.prompt)}>
+          <div key={`${locale}-${activeMode.id}`} className="prompt-examples" aria-label={t("promptExamples")}>
+            <strong style={{ "--prompt-example-index": 0 } as CSSProperties}>{activeMode.label}</strong>
+            {activeMode.examples.map((example, index) => (
+              <button key={example.id} style={{ "--prompt-example-index": index + 1 } as CSSProperties} onClick={() => setPrompt(example.prompt)}>
                 {example.label}
               </button>
             ))}

frontend/src/ui/pages/HomeShell/index.css

@@ -249,8 +249,7 @@
   transform: translateY(-50%);
 }
 
-.side-nav nav,
-.settings-fab {
+.side-nav nav {
   display: grid;
   gap: 18px;
   justify-items: center;
@@ -287,11 +286,6 @@
   box-shadow: 0 18px 32px rgba(0, 0, 0, 0.18);
 }
 
-.settings-fab {
-  padding: 0;
-  height: 58px;
-}
-
 .section-header {
   display: flex;
   align-items: end;
@@ -354,9 +348,6 @@
     height: 52px !important;
   }
 
-  .side-nav .settings-fab {
-    display: none;
-  }
 }
 
 @media (max-width: 640px) {

frontend/src/ui/pages/HomeShell/index.tsx

@@ -1,6 +1,6 @@
 "use client";
 
-import { ArrowRight, BookOpen, Folder, Globe2, Home, Info, LogOut, MessageCircle, Plus, Settings, User, Zap } from "lucide-react";
+import { ArrowRight, BookOpen, Folder, Globe2, Home, LogOut, MessageCircle, Plus, User, Zap } from "lucide-react";
 import { useEffect, useRef, useState } from "react";
 import { useI18n } from "@/i18n/i18n";
 import { useAuth } from "@/ui/auth/AuthProvider";
@@ -195,13 +195,7 @@ export function SideNav({
         <button className="side-nav-secondary" aria-label={t("members")} onClick={onInspiration}>
           <User size={22} />
         </button>
-        <button className="side-nav-secondary" aria-label={t("info")} onClick={onInspiration}>
-          <Info size={22} />
-        </button>
       </nav>
-      <button className="settings-fab" aria-label={t("settings")} onClick={onInspiration}>
-        <Settings size={22} />
-      </button>
     </aside>
   );
 }