ai写作

frontend-web/src/open-canvas/api/ai-writing-sessions.ts

@@ -0,0 +1,51 @@
+import { getBackendBaseURL } from '@/core/config';
+import { apiFetch } from '@/core/api';
+
+export interface AIWritingSessionSummary {
+  id: string;
+  user_id: string | null;
+  title: string;
+  user_intent: string | null;
+  status: string;
+  draft_title: string | null;
+  draft_markdown: string | null;
+  completed_interventions: CompletedInterventionRecord[] | null;
+  review_result: Record<string, unknown> | null;
+  created_at: string;
+  updated_at: string;
+}
+
+export interface CompletedInterventionRecord {
+  pausePoint: string;
+  action: string;
+  timestamp: string;
+}
+
+const BASE = () => `${getBackendBaseURL()}/api/ai-writing/sessions`;
+
+export async function listAIWritingSessions(): Promise<AIWritingSessionSummary[]> {
+  const resp = await apiFetch(BASE());
+  if (!resp.ok) throw new Error(`获取历史记录失败: ${resp.status}`);
+  return resp.json();
+}
+
+export async function getAIWritingSession(id: string): Promise<AIWritingSessionSummary> {
+  const resp = await apiFetch(`${BASE()}/${id}`);
+  if (!resp.ok) throw new Error(`获取会话失败: ${resp.status}`);
+  return resp.json();
+}
+
+export async function renameAIWritingSession(id: string, title: string): Promise<AIWritingSessionSummary> {
+  const resp = await apiFetch(`${BASE()}/${id}`, {
+    method: 'PATCH',
+    headers: { 'Content-Type': 'application/json' },
+    body: JSON.stringify({ title }),
+  });
+  if (!resp.ok) throw new Error(`重命名失败: ${resp.status}`);
+  return resp.json();
+}
+
+export async function deleteAIWritingSession(id: string): Promise<void> {
+  const resp = await apiFetch(`${BASE()}/${id}`, { method: 'DELETE' });
+  if (!resp.ok) throw new Error(`删除失败: ${resp.status}`);
+}

frontend-web/src/open-canvas/components/ai-writing/AIWritingDraftPanel.tsx

@@ -0,0 +1,59 @@
+import { FileText, PenLine } from 'lucide-react';
+
+import { useCanvasGraphContext } from '../../contexts/CanvasGraphContext';
+import { getCurrentArtifactContent, isCodeArtifact } from '../../utils/artifact';
+import { TextArtifactRenderer } from '../artifact/TextArtifactRenderer';
+import type { CanvasArtifactText } from '../../types/artifact';
+
+function DraftWaitingPlaceholder() {
+  return (
+    <div className="h-full flex flex-col items-center justify-center gap-5 select-none">
+      <div className="relative">
+        <div className="w-16 h-16 rounded-2xl bg-muted/60 flex items-center justify-center">
+          <FileText className="w-8 h-8 text-muted-foreground/40" />
+        </div>
+        <div className="absolute -bottom-1.5 -right-1.5 w-6 h-6 rounded-full bg-primary/10 flex items-center justify-center">
+          <PenLine className="w-3.5 h-3.5 text-primary/60" />
+        </div>
+      </div>
+      <div className="text-center space-y-1.5 max-w-[200px]">
+        <p className="text-sm font-medium text-foreground/60">草稿将在此处显示</p>
+        <p className="text-[11px] text-muted-foreground leading-relaxed">
+          完成写作流程后，AI 生成的内容将实时出现在这里
+        </p>
+      </div>
+    </div>
+  );
+}
+
+export function AIWritingDraftPanel() {
+  const { artifact } = useCanvasGraphContext();
+
+  if (!artifact) {
+    return (
+      <div className="h-full bg-muted/10 border-l">
+        <DraftWaitingPlaceholder />
+      </div>
+    );
+  }
+
+  const content = getCurrentArtifactContent(artifact);
+
+  return (
+    <div className="h-full flex flex-col overflow-hidden border-l">
+      {/* 标题栏 */}
+      <div className="h-10 border-b flex items-center gap-2 px-4 shrink-0 bg-muted/20">
+        <FileText className="w-3.5 h-3.5 text-muted-foreground shrink-0" />
+        <span className="text-sm font-medium truncate flex-1">
+          {content?.title ?? '草稿预览'}
+        </span>
+      </div>
+
+      <div className="flex-1 overflow-hidden">
+        {content && !isCodeArtifact(content) ? (
+          <TextArtifactRenderer content={content as CanvasArtifactText} />
+        ) : null}
+      </div>
+    </div>
+  );
+}

frontend-web/src/open-canvas/components/ai-writing/AIWritingHistoryDropdown.tsx

@@ -0,0 +1,202 @@
+import { useState, useRef, useEffect } from 'react';
+import { History, Trash2, Check, X, RefreshCw } from 'lucide-react';
+
+import { Button } from '@/components/ui/button';
+import { cn } from '@/lib/utils';
+import type { AIWritingSessionSummary } from '../../api/ai-writing-sessions';
+
+const STATUS_LABELS: Record<string, { label: string; color: string }> = {
+  in_progress: { label: '进行中', color: 'text-blue-500' },
+  draft_ready:  { label: '草稿', color: 'text-amber-500' },
+  review_ready: { label: '审核', color: 'text-purple-500' },
+  done:         { label: '完成', color: 'text-green-500' },
+  error:        { label: '错误', color: 'text-destructive' },
+};
+
+function formatRelative(isoStr: string): string {
+  const ms = Date.now() - new Date(isoStr).getTime();
+  const mins = Math.floor(ms / 60000);
+  if (mins < 1)  return '刚刚';
+  if (mins < 60) return `${mins} 分钟前`;
+  const hrs = Math.floor(mins / 60);
+  if (hrs  < 24) return `${hrs} 小时前`;
+  const days = Math.floor(hrs / 24);
+  if (days < 7)  return `${days} 天前`;
+  return new Date(isoStr).toLocaleDateString('zh-CN', { month: 'short', day: 'numeric' });
+}
+
+interface SessionItemProps {
+  session: AIWritingSessionSummary;
+  isSelected: boolean;
+  onSelect: () => void;
+  onDelete: () => void;
+  onRename: (title: string) => void;
+}
+
+function SessionItem({ session, isSelected, onSelect, onDelete, onRename }: SessionItemProps) {
+  const [editing, setEditing] = useState(false);
+  const [editValue, setEditValue] = useState(session.title);
+  const inputRef = useRef<HTMLInputElement>(null);
+  const { label, color } = STATUS_LABELS[session.status] ?? { label: session.status, color: 'text-muted-foreground' };
+
+  useEffect(() => {
+    if (editing) inputRef.current?.focus();
+  }, [editing]);
+
+  function commitRename() {
+    const trimmed = editValue.trim();
+    if (trimmed && trimmed !== session.title) onRename(trimmed);
+    setEditing(false);
+  }
+
+  function handleKeyDown(e: React.KeyboardEvent) {
+    if (e.key === 'Enter') commitRename();
+    else if (e.key === 'Escape') { setEditValue(session.title); setEditing(false); }
+  }
+
+  return (
+    <div
+      className={cn(
+        'group relative flex items-start gap-2 px-3 py-2.5 cursor-pointer transition-colors',
+        isSelected ? 'bg-accent' : 'hover:bg-accent/60',
+      )}
+      onClick={!editing ? onSelect : undefined}
+    >
+      <div className="flex-1 min-w-0">
+        {editing ? (
+          <div className="flex items-center gap-1" onClick={(e) => e.stopPropagation()}>
+            <input
+              ref={inputRef}
+              className="flex-1 text-xs bg-background border rounded px-1.5 py-0.5 outline-none focus:ring-1 focus:ring-ring"
+              value={editValue}
+              onChange={(e) => setEditValue(e.target.value)}
+              onKeyDown={handleKeyDown}
+            />
+            <button className="shrink-0 text-green-500 hover:text-green-600" onClick={commitRename}>
+              <Check className="w-3 h-3" />
+            </button>
+            <button className="shrink-0 text-muted-foreground hover:text-foreground" onClick={() => { setEditValue(session.title); setEditing(false); }}>
+              <X className="w-3 h-3" />
+            </button>
+          </div>
+        ) : (
+          <p
+            className="text-xs font-medium truncate leading-snug"
+            onDoubleClick={(e) => { e.stopPropagation(); setEditing(true); }}
+            title="双击重命名"
+          >
+            {session.title}
+          </p>
+        )}
+        <div className="flex items-center gap-1.5 mt-0.5">
+          <span className={cn('text-[10px] font-medium', color)}>{label}</span>
+          <span className="text-[10px] text-muted-foreground">·</span>
+          <span className="text-[10px] text-muted-foreground">{formatRelative(session.updated_at)}</span>
+        </div>
+      </div>
+
+      {/* 删除按钮，hover 时显示 */}
+      {!editing && (
+        <button
+          className="opacity-0 group-hover:opacity-100 shrink-0 p-0.5 text-muted-foreground hover:text-destructive transition-opacity"
+          onClick={(e) => { e.stopPropagation(); onDelete(); }}
+          title="删除"
+        >
+          <Trash2 className="w-3 h-3" />
+        </button>
+      )}
+    </div>
+  );
+}
+
+interface AIWritingHistoryDropdownProps {
+  sessions: AIWritingSessionSummary[];
+  selectedId: string | null;
+  loading: boolean;
+  onSelect: (session: AIWritingSessionSummary) => void;
+  onDelete: (id: string) => void;
+  onRename: (id: string, title: string) => void;
+  onRefresh: () => void;
+}
+
+export function AIWritingHistoryDropdown({
+  sessions,
+  selectedId,
+  loading,
+  onSelect,
+  onDelete,
+  onRename,
+  onRefresh,
+}: AIWritingHistoryDropdownProps) {
+  const [open, setOpen] = useState(false);
+  const containerRef = useRef<HTMLDivElement>(null);
+
+  useEffect(() => {
+    if (!open) return;
+    function handleClickOutside(e: MouseEvent) {
+      if (containerRef.current && !containerRef.current.contains(e.target as Node)) {
+        setOpen(false);
+      }
+    }
+    document.addEventListener('mousedown', handleClickOutside);
+    return () => document.removeEventListener('mousedown', handleClickOutside);
+  }, [open]);
+
+  function handleOpen() {
+    setOpen((v) => {
+      if (!v) onRefresh();
+      return !v;
+    });
+  }
+
+  return (
+    <div ref={containerRef} className="relative">
+      <Button
+        variant="ghost"
+        size="sm"
+        className="h-7 px-2 text-xs gap-1"
+        onClick={handleOpen}
+        title="查看历史记录"
+      >
+        <History className="size-3" />
+        历史
+      </Button>
+
+      {open && (
+        <div className="absolute right-0 top-full mt-1 z-50 w-64 rounded-lg border bg-popover shadow-lg overflow-hidden">
+          {/* 头部 */}
+          <div className="flex items-center justify-between px-3 py-2 border-b">
+            <span className="text-xs font-semibold">写作历史</span>
+            <button
+              className={cn('text-muted-foreground hover:text-foreground transition-transform', loading && 'animate-spin')}
+              onClick={onRefresh}
+              title="刷新"
+            >
+              <RefreshCw className="w-3 h-3" />
+            </button>
+          </div>
+
+          {/* 列表 */}
+          <div className="max-h-72 overflow-y-auto">
+            {sessions.length === 0 ? (
+              <div className="text-center py-6 text-xs text-muted-foreground">
+                {loading ? '加载中…' : '暂无历史记录'}
+              </div>
+            ) : (
+              sessions.map((s) => (
+                <SessionItem
+                  key={s.id}
+                  session={s}
+                  isSelected={s.id === selectedId}
+                  onSelect={() => { onSelect(s); setOpen(false); }}
+                  onDelete={() => onDelete(s.id)}
+                  onRename={(title) => onRename(s.id, title)}
+                />
+              ))
+            )}
+          </div>
+        </div>
+      )}
+    </div>
+  );
+}

frontend-web/src/open-canvas/components/ai-writing/AIWritingHistoryView.tsx

@@ -0,0 +1,115 @@
+import { CheckCircle2, ChevronRight, FileText, Search, PenLine, ClipboardEdit, Star } from 'lucide-react';
+
+import type { AIWritingSessionSummary, CompletedInterventionRecord } from '../../api/ai-writing-sessions';
+
+const PAUSE_LABELS: Record<string, string> = {
+  material_confirm: '素材确认',
+  outline_confirm:  '大纲确认',
+  draft_confirm:    '草稿确认',
+  review_confirm:   '编辑意见处理',
+};
+
+const ACTION_LABELS: Record<string, string> = {
+  approve:        '已批准',
+  re_search:      '重新搜索',
+  re_outline:     '重新规划',
+  finalize:       '直接定稿',
+  to_editor:      '提交审核',
+  user_revise:    '手动修改',
+  accept_review:  '接受意见',
+  force_finalize: '强制定稿',
+};
+
+const PAUSE_ICONS: Record<string, React.ElementType> = {
+  material_confirm: Search,
+  outline_confirm:  PenLine,
+  draft_confirm:    FileText,
+  review_confirm:   ClipboardEdit,
+};
+
+function InterventionTimelineItem({ record, isLast }: { record: CompletedInterventionRecord; isLast: boolean }) {
+  const Icon = PAUSE_ICONS[record.pausePoint] ?? CheckCircle2;
+  const ts = record.timestamp
+    ? new Date(record.timestamp).toLocaleString('zh-CN', { month: 'short', day: 'numeric', hour: '2-digit', minute: '2-digit' })
+    : '';
+
+  return (
+    <div className="flex gap-3">
+      <div className="flex flex-col items-center">
+        <div className="w-6 h-6 rounded-full bg-primary/10 flex items-center justify-center shrink-0">
+          <Icon className="w-3 h-3 text-primary" />
+        </div>
+        {!isLast && <div className="w-px flex-1 bg-border/60 mt-1" />}
+      </div>
+      <div className="pb-4 min-w-0 flex-1">
+        <div className="flex items-center gap-2">
+          <span className="text-xs font-medium">
+            {PAUSE_LABELS[record.pausePoint] ?? record.pausePoint}
+          </span>
+          <ChevronRight className="w-3 h-3 text-muted-foreground" />
+          <span className="text-xs text-primary font-medium">
+            {ACTION_LABELS[record.action] ?? record.action}
+          </span>
+        </div>
+        {ts && <p className="text-[10px] text-muted-foreground mt-0.5">{ts}</p>}
+      </div>
+    </div>
+  );
+}
+
+interface AIWritingHistoryViewProps {
+  session: AIWritingSessionSummary;
+}
+
+export function AIWritingHistoryView({ session }: AIWritingHistoryViewProps) {
+  const interventions = session.completed_interventions ?? [];
+  const createdAt = session.created_at
+    ? new Date(session.created_at).toLocaleString('zh-CN', {
+        year: 'numeric', month: 'short', day: 'numeric',
+        hour: '2-digit', minute: '2-digit',
+      })
+    : '';
+
+  return (
+    <div className="flex-1 overflow-y-auto px-4 py-3 space-y-4">
+      {/* 元信息 */}
+      <div className="rounded-lg border bg-muted/30 px-3 py-2.5 space-y-1">
+        <p className="text-xs font-semibold truncate">{session.draft_title ?? session.title}</p>
+        {session.user_intent && (
+          <p className="text-[11px] text-muted-foreground leading-relaxed line-clamp-2">
+            {session.user_intent}
+          </p>
+        )}
+        {createdAt && (
+          <p className="text-[10px] text-muted-foreground">{createdAt}</p>
+        )}
+      </div>
+
+      {/* 阶段时间线 */}
+      {interventions.length > 0 ? (
+        <div>
+          <p className="text-[11px] font-medium text-muted-foreground mb-2">写作阶段</p>
+          <div>
+            {interventions.map((rec, i) => (
+              <InterventionTimelineItem
+                key={i}
+                record={rec}
+                isLast={i === interventions.length - 1}
+              />
+            ))}
+          </div>
+        </div>
+      ) : (
+        <div className="text-center py-4 text-xs text-muted-foreground">无阶段记录</div>
+      )}
+
+      {/* 完成状态 */}
+      {session.status === 'done' && (
+        <div className="flex items-center gap-2 text-xs text-green-600 dark:text-green-400">
+          <Star className="w-3.5 h-3.5" />
+          <span>写作完成</span>
+        </div>
+      )}
+    </div>
+  );
+}

frontend-web/src/open-canvas/components/ai-writing/AIWritingPageHeader.tsx

@@ -0,0 +1,41 @@
+import { useNavigate } from 'react-router-dom';
+import { ArrowLeft, PenLine } from 'lucide-react';
+
+import { Button } from '@/components/ui/button';
+import { Separator } from '@/components/ui/separator';
+import { useCanvasGraphContext } from '../../contexts/CanvasGraphContext';
+import { getCurrentArtifactContent } from '../../utils/artifact';
+
+export function AIWritingPageHeader() {
+  const navigate = useNavigate();
+  const { artifact } = useCanvasGraphContext();
+  const currentContent = getCurrentArtifactContent(artifact);
+
+  return (
+    <div className="h-11 border-b flex items-center px-3 gap-2 shrink-0 bg-background">
+      <Button
+        variant="ghost"
+        size="icon"
+        className="h-7 w-7 shrink-0"
+        onClick={() => navigate('/page/canvas')}
+        title="返回 Canvas 列表"
+      >
+        <ArrowLeft className="h-4 w-4" />
+      </Button>
+
+      <Separator orientation="vertical" className="h-4" />
+
+      <PenLine className="h-4 w-4 text-primary shrink-0" />
+      <span className="text-sm font-semibold">AI 智能写作</span>
+
+      {currentContent?.title && (
+        <>
+          <Separator orientation="vertical" className="h-4" />
+          <span className="text-sm text-muted-foreground truncate">
+            {currentContent.title}
+          </span>
+        </>
+      )}
+    </div>
+  );
+}

frontend-web/src/open-canvas/components/ai-writing/AIWritingPanel.tsx

@@ -1,9 +1,12 @@
-import { RotateCcw, Square } from 'lucide-react';
+import { useCallback, useState } from 'react';
+import { Plus, RotateCcw, Square } from 'lucide-react';
 
 import { Button } from '@/components/ui/button';
 import { cn } from '@/lib/utils';
 
+import { useCanvasGraphContext } from '../../contexts/CanvasGraphContext';
 import { useAIWriting } from '../../hooks/useAIWriting';
+import { useAIWritingSessions } from '../../hooks/useAIWritingSessions';
 import { AIWritingForm } from './AIWritingForm';
 import { AIWritingTimeline } from './AIWritingTimeline';
 import { InterventionCard } from './InterventionCard';
@@ -12,6 +15,9 @@ import { DraftStreamingView } from './DraftStreamingView';
 import { OutlineStreamingView } from './OutlineStreamingView';
 import { ReviewStreamingView } from './ReviewStreamingView';
 import { RevisionSummaryCard } from './RevisionSummaryCard';
+import { AIWritingHistoryDropdown } from './AIWritingHistoryDropdown';
+import { AIWritingHistoryView } from './AIWritingHistoryView';
+import type { AIWritingSessionSummary } from '../../api/ai-writing-sessions';
 
 const STATUS_LABEL: Record<string, string> = {
   idle: '就绪',
@@ -29,33 +35,106 @@ const STATUS_LABEL: Record<string, string> = {
 };
 
 export function AIWritingPanel() {
+  const { setArtifact } = useCanvasGraphContext();
   const { state, startWriting, submitIntervention, stopWriting, reset } = useAIWriting();
+  const { sessions, loading: sessionsLoading, refresh, rename, remove } = useAIWritingSessions();
+
+  // History view state — null means normal writing mode
+  const [historySession, setHistorySession] = useState<AIWritingSessionSummary | null>(null);
 
   const isIdle = state.status === 'idle';
   const isDone = state.status === 'done';
   const isError = state.status === 'error';
   const isRunning = !isIdle && !isDone && !isError;
-  // 有干预卡时不显示骨架屏（干预卡本身就是内容）
   const showSkeleton = isRunning && !state.currentPause;
 
+  const handleSelectHistory = useCallback((session: AIWritingSessionSummary) => {
+    setHistorySession(session);
+    // Push historical draft to the right panel
+    if (session.draft_markdown) {
+      setArtifact({
+        currentIndex: 0,
+        contents: [{
+          index: 0,
+          type: 'text',
+          title: session.draft_title ?? session.title,
+          fullMarkdown: session.draft_markdown,
+        }],
+      });
+    } else {
+      setArtifact(null);
+    }
+  }, [setArtifact]);
+
+  const handleNewSession = useCallback(() => {
+    setHistorySession(null);
+    reset();
+  }, [reset]);
+
+  const showNewButton = historySession !== null || state.status !== 'idle';
+
+  // History view mode
+  if (historySession) {
+    return (
+      <div className="flex flex-col h-full overflow-hidden bg-background">
+        <div className="flex items-center justify-between px-4 py-2.5 border-b shrink-0">
+          <span className="text-sm font-semibold truncate flex-1 min-w-0 mr-2">
+            {historySession.draft_title ?? historySession.title}
+          </span>
+          <div className="flex items-center gap-1.5 shrink-0">
+            <Button variant="ghost" size="sm" className="h-7 px-2 text-xs gap-1" onClick={handleNewSession}>
+              <Plus className="size-3" />
+              新建对话
+            </Button>
+            <AIWritingHistoryDropdown
+              sessions={sessions}
+              selectedId={historySession.id}
+              loading={sessionsLoading}
+              onSelect={handleSelectHistory}
+              onDelete={remove}
+              onRename={rename}
+              onRefresh={refresh}
+            />
+          </div>
+        </div>
+        <AIWritingHistoryView session={historySession} />
+      </div>
+    );
+  }
+
   return (
     <div className="flex flex-col h-full overflow-hidden bg-background">
       {/* 头部 */}
       <div className="flex items-center justify-between px-4 py-2.5 border-b shrink-0">
-        <span className="text-sm font-semibold">AI 智能写作</span>
+        <span className="text-sm font-semibold shrink-0">AI 智能写作</span>
         <div className="flex items-center gap-1.5">
+          {showNewButton && (
+            <Button variant="ghost" size="sm" className="h-7 px-2 text-xs gap-1" onClick={handleNewSession}>
+              <Plus className="size-3" />
+              新建
+            </Button>
+          )}
           {isRunning && (
             <Button variant="ghost" size="sm" className="h-7 px-2 text-xs gap-1" onClick={stopWriting}>
               <Square className="size-3" />
               停止
             </Button>
           )}
-          {(isDone || isError || isRunning) && (
+          {(isDone || isError) && (
             <Button variant="ghost" size="sm" className="h-7 px-2 text-xs gap-1" onClick={reset}>
               <RotateCcw className="size-3" />
               重置
             </Button>
           )}
+          <AIWritingHistoryDropdown
+            sessions={sessions}
+            selectedId={null}
+            loading={sessionsLoading}
+            onSelect={handleSelectHistory}
+            onDelete={remove}
+            onRename={rename}
+            onRefresh={refresh}
+          />
         </div>
       </div>
 
@@ -89,12 +168,12 @@ export function AIWritingPanel() {
           />
         )}
 
-        {/* 大纲流式思考框（有内容时显示，同时隐藏骨架屏） */}
+        {/* 大纲流式思考框 */}
         {state.status === 'writing_outline' && (state.outlineStreamingText || state.outlineThinkingText) && (
           <OutlineStreamingView text={state.outlineStreamingText} thinkingText={state.outlineThinkingText} />
         )}
 
-        {/* 编辑审核流式结果（逐条到达时显示） */}
+        {/* 编辑审核流式结果 */}
         {state.status === 'reviewing' && state.streamingReviewItems.length > 0 && (
           <ReviewStreamingView items={state.streamingReviewItems} />
         )}
@@ -106,7 +185,7 @@ export function AIWritingPanel() {
           </div>
         )}
 
-        {/* 草稿流式打字机视图（有内容时显示） */}
+        {/* 草稿流式打字机视图 */}
         {state.status === 'writing_draft' && state.streamingDraftSections.length > 0 && (
           <DraftStreamingView
             title={state.streamingDraftTitle}
@@ -114,11 +193,6 @@ export function AIWritingPanel() {
           />
         )}
 
-        {/*
-          骨架屏统一规则：
-          - 正在运行 + 无干预卡 + 非草稿写作阶段（草稿由下方单独处理）
-          - writing_outline 有流式内容时由 OutlineStreamingView 接管，骨架隐藏
-        */}
         {showSkeleton &&
          state.status !== 'writing_draft' &&
          !(state.status === 'writing_outline' && (state.outlineStreamingText || state.outlineThinkingText)) &&
@@ -128,14 +202,12 @@ export function AIWritingPanel() {
           </div>
         )}
 
-        {/* 草稿阶段：流式数据未到达前显示骨架 */}
         {state.status === 'writing_draft' && state.streamingDraftSections.length === 0 && (
           <div className="px-4 pb-4">
             <WritingSkeletonCard status="writing_draft" />
           </div>
         )}
 
-        {/* 出错提示 */}
         {isError && state.error && (
           <div className="mx-4 mt-2 rounded-md bg-destructive/10 px-3 py-2 text-xs text-destructive">
             {state.error}

frontend-web/src/open-canvas/hooks/useAIWritingSessions.ts

@@ -0,0 +1,45 @@
+import { useCallback, useState } from 'react';
+
+import {
+  listAIWritingSessions,
+  renameAIWritingSession,
+  deleteAIWritingSession,
+} from '../api/ai-writing-sessions';
+import type { AIWritingSessionSummary } from '../api/ai-writing-sessions';
+
+export function useAIWritingSessions() {
+  const [sessions, setSessions] = useState<AIWritingSessionSummary[]>([]);
+  const [loading, setLoading] = useState(false);
+
+  const refresh = useCallback(async () => {
+    setLoading(true);
+    try {
+      const data = await listAIWritingSessions();
+      setSessions(data);
+    } catch {
+      // silently ignore — history is non-critical
+    } finally {
+      setLoading(false);
+    }
+  }, []);
+
+  const rename = useCallback(async (id: string, title: string) => {
+    try {
+      const updated = await renameAIWritingSession(id, title);
+      setSessions((prev) => prev.map((s) => (s.id === id ? updated : s)));
+    } catch {
+      // ignore
+    }
+  }, []);
+
+  const remove = useCallback(async (id: string) => {
+    try {
+      await deleteAIWritingSession(id);
+      setSessions((prev) => prev.filter((s) => s.id !== id));
+    } catch {
+      // ignore
+    }
+  }, []);
+
+  return { sessions, loading, refresh, rename, remove };
+}

frontend-web/src/open-canvas/pages/AIWritingPage.tsx

@@ -0,0 +1,74 @@
+import { useRef } from 'react';
+import { TooltipProvider } from '@/components/ui/tooltip';
+import type { GroupImperativeHandle } from 'react-resizable-panels';
+
+import { CanvasThreadProvider } from '../contexts/CanvasThreadContext';
+import { CanvasGraphProvider } from '../contexts/CanvasGraphContext';
+import { CanvasUIProvider } from '../contexts/CanvasUIContext';
+import { AIWritingPageHeader } from '../components/ai-writing/AIWritingPageHeader';
+import { AIWritingPanel } from '../components/ai-writing/AIWritingPanel';
+import { AIWritingDraftPanel } from '../components/ai-writing/AIWritingDraftPanel';
+import {
+  ResizableHandle,
+  ResizablePanel,
+  ResizablePanelGroup,
+} from '@/components/ui/resizable';
+
+// Panel IDs used as keys in the v4 Layout map
+const WRITING_ID = 'aw-writing';
+const DRAFT_ID   = 'aw-draft';
+
+// Match the original canvas page proportions (chat=35, artifact=65)
+const DEFAULT_LAYOUT = { [WRITING_ID]: 35, [DRAFT_ID]: 65 };
+
+export default function AIWritingPage() {
+  const layoutRef = useRef<GroupImperativeHandle>(null);
+
+  return (
+    <CanvasThreadProvider>
+    <CanvasGraphProvider>
+      <CanvasUIProvider>
+      <TooltipProvider delayDuration={300}>
+        <div className="h-full flex flex-col overflow-hidden bg-background">
+          <AIWritingPageHeader />
+
+          <div className="flex-1 min-h-0 overflow-hidden">
+            <ResizablePanelGroup
+              orientation="horizontal"
+              groupRef={layoutRef}
+              defaultLayout={DEFAULT_LAYOUT}
+              className="h-full"
+            >
+              {/* 左侧：AI 写作面板，与原画布页左侧等宽 */}
+              <ResizablePanel
+                id={WRITING_ID}
+                defaultSize={35}
+                minSize={20}
+                className="overflow-hidden flex flex-col"
+              >
+                {/* 与原布局保持相同的 flex-1 min-h-0 包裹，确保内部 h-full 正确解析 */}
+                <div className="flex-1 min-h-0 overflow-hidden">
+                  <AIWritingPanel />
+                </div>
+              </ResizablePanel>
+
+              <ResizableHandle withHandle />
+
+              {/* 右侧：草稿预览面板 */}
+              <ResizablePanel
+                id={DRAFT_ID}
+                defaultSize={65}
+                minSize={40}
+                className="overflow-hidden"
+              >
+                <AIWritingDraftPanel />
+              </ResizablePanel>
+            </ResizablePanelGroup>
+          </div>
+        </div>
+      </TooltipProvider>
+      </CanvasUIProvider>
+    </CanvasGraphProvider>
+    </CanvasThreadProvider>
+  );
+}

frontend-web/src/open-canvas/pages/CanvasHomePage.tsx

@@ -1,6 +1,6 @@
 import { useState } from "react";
 import { useNavigate } from "react-router-dom";
-import { FileText, Code2, Sparkles, Loader2 } from "lucide-react";
+import { FileText, Code2, Sparkles, Loader2, PenLine } from "lucide-react";
 
 import { Button } from "@/components/ui/button";
 import { createCanvasThread } from "../api/threads";
@@ -86,6 +86,23 @@ export default function CanvasHomePage() {
           ))}
         </div>
 
+        {/* AI 智能写作入口 */}
+        <button
+          onClick={() => navigate('ai-writing')}
+          className="group w-full flex items-center gap-4 rounded-xl border border-orange-200 dark:border-orange-900/50 bg-orange-50/50 dark:bg-orange-950/20 p-5 text-left transition-all hover:border-orange-400/60 hover:shadow-md hover:bg-orange-50 dark:hover:bg-orange-950/30 focus:outline-none focus-visible:ring-2 focus-visible:ring-orange-400"
+        >
+          <div className="flex items-center justify-center w-10 h-10 rounded-xl bg-orange-100 dark:bg-orange-900/40 shrink-0 group-hover:bg-orange-200/80 dark:group-hover:bg-orange-800/40 transition-colors">
+            <PenLine className="w-5 h-5 text-orange-500 dark:text-orange-400" />
+          </div>
+          <div className="min-w-0 flex-1">
+            <p className="font-semibold text-sm text-orange-700 dark:text-orange-300">AI 智能写作</p>
+            <p className="text-xs text-orange-600/70 dark:text-orange-400/60 leading-relaxed mt-0.5">
+              多智能体协作——搜集素材、规划大纲、起草正文、编辑审核，全流程自动完成
+            </p>
+          </div>
+          <span className="text-orange-400/60 shrink-0 text-xs">→</span>
+        </button>
+
         <div className="text-center">
           <Button
             variant="ghost"

frontend-web/src/open-canvas/routes/OpenCanvasRoutes.tsx

@@ -2,11 +2,13 @@ import { Route, Routes } from "react-router-dom";
 
 import CanvasHomePage from "../pages/CanvasHomePage";
 import CanvasThreadPage from "../pages/CanvasThreadPage";
+import AIWritingPage from "../pages/AIWritingPage";
 
 export default function OpenCanvasRoutes() {
   return (
     <Routes>
       <Route index element={<CanvasHomePage />} />
+      <Route path="ai-writing" element={<AIWritingPage />} />
       <Route path=":thread_id" element={<CanvasThreadPage />} />
     </Routes>
   );