@allbluecn/web-app 0.5.1 → 0.6.1

package/src/components/story/constants.ts

@@ -15,7 +15,7 @@
 // You should have received a copy of the GNU Affero General Public License
 // along with this program. If not, see <https://www.gnu.org/licenses/>.
 
-import { GitPullRequestArrow, CircleFadingArrowUp, Repeat2, CalendarPlus2, Hash, MessageCircleCheck, RefreshCcwDot, CircleFadingPlus, CircleArrowUp, CircleArrowRight, CircleArrowDown, CircleSlash, CircleDashed, CircleCheckBig, LoaderCircle, CheckCircle2, XCircle, FilePlus, FilePenLine, MessageSquareText, Flag, UserRound, Text, Calendar, CalendarCheck, Tags, TextInitial, Building2, GitBranch, ListTree, ArrowLeftRight, Link2, Paperclip, BookOpen, type LucideIcon } from "lucide-react";
+import { GitPullRequestArrow, CircleFadingArrowUp, Repeat, Repeat2, CalendarPlus2, Hash, MessageCircleCheck, RefreshCcwDot, CircleFadingPlus, CircleArrowUp, CircleArrowRight, CircleArrowDown, CircleSlash, CircleDashed, CircleCheckBig, LoaderCircle, CheckCircle2, XCircle, FilePlus, FilePenLine, MessageSquareText, Flag, UserRound, Text, Calendar, CalendarCheck, Tags, TextInitial, Building2, GitBranch, ListTree, ArrowLeftRight, ArrowDownToDot, Link2, Paperclip, BookOpen, Unlink, Trash2, BookX, FileX, ArrowRightFromLine, ArrowLeftToLine, ArrowUpFromDot, type LucideIcon } from "lucide-react";
 import type { DependencyEdgeType, DependencyGroup } from "./types";
 
 export type StoryState = "backlog" | "todo" | "in_progress" | "done" | "cancelled";
@@ -103,9 +103,17 @@ export const ACTIVITY_LABEL: Record<string, string> = {
   parent_removed: "activity.parent_removed",
   child_added: "activity.child_added",
   dependency_added: "activity.dependency_added",
+  dependency_removed: "activity.dependency_removed",
   link_added: "activity.link_added",
+  link_updated: "activity.link_updated",
+  link_removed: "activity.link_removed",
   attachment_added: "activity.attachment_added",
+  attachment_updated: "activity.attachment_updated",
+  attachment_removed: "activity.attachment_removed",
   kb_linked: "activity.kb_linked",
+  kb_unlinked: "activity.kb_unlinked",
+  prd_unlinked: "activity.prd_unlinked",
+  iteration_changed: "activity.iteration_changed",
 };
 
 export const ACTIVITY_ICON: Record<string, LucideIcon> = {
@@ -126,9 +134,17 @@ startDate_changed: CalendarPlus2,
     parent_removed: GitPullRequestArrow,
     child_added: ListTree,
     dependency_added: ArrowLeftRight,
+    dependency_removed: Unlink,
     link_added: Link2,
+    link_updated: Link2,
+    link_removed: Unlink,
     attachment_added: Paperclip,
+    attachment_updated: FilePenLine,
+    attachment_removed: Trash2,
     kb_linked: BookOpen,
+    kb_unlinked: BookX,
+    prd_unlinked: FileX,
+    iteration_changed: Repeat,
   };
 
 // ====== 依赖关系常量（对齐 Plane，新模型） ======
@@ -154,6 +170,10 @@ export interface DependencyTypeOption {
   edge: DependencyEdgeType;
   /** 与 group 等价的方向标志：true = 存 (Y, X, edge) */
   reversed: boolean;
+  /** 选择器/行内标签显示的图标（lucide 组件引用） */
+  icon: LucideIcon;
+  /** 图标旋转角度（deg），每个图标方向语义不同可单独设定；0 或不填不旋转 */
+  iconRotation: number;
 }
 
 export const DEPENDENCY_TYPE_OPTIONS: DependencyTypeOption[] = [
@@ -165,6 +185,8 @@ export const DEPENDENCY_TYPE_OPTIONS: DependencyTypeOption[] = [
     tooltipLabelKey: "dependency.tooltips.blocked_by",
     edge: "BLOCKS",
     reversed: true,
+    icon: ArrowRightFromLine,
+    iconRotation: 0,
   },
   {
     key: "starts_after",
@@ -174,6 +196,8 @@ export const DEPENDENCY_TYPE_OPTIONS: DependencyTypeOption[] = [
     tooltipLabelKey: "dependency.tooltips.starts_after",
     edge: "STARTS_BEFORE",
     reversed: true,
+    icon: ArrowUpFromDot,
+    iconRotation: 90,
   },
   {
     key: "finishes_after",
@@ -183,6 +207,8 @@ export const DEPENDENCY_TYPE_OPTIONS: DependencyTypeOption[] = [
     tooltipLabelKey: "dependency.tooltips.finishes_after",
     edge: "FINISHES_BEFORE",
     reversed: true,
+    icon: ArrowLeftToLine,
+    iconRotation: 0,
   },
   {
     key: "blocking",
@@ -192,6 +218,8 @@ export const DEPENDENCY_TYPE_OPTIONS: DependencyTypeOption[] = [
     tooltipLabelKey: "dependency.tooltips.blocking",
     edge: "BLOCKS",
     reversed: false,
+    icon: ArrowRightFromLine,
+    iconRotation: 0,
   },
   {
     key: "starts_before",
@@ -201,6 +229,8 @@ export const DEPENDENCY_TYPE_OPTIONS: DependencyTypeOption[] = [
     tooltipLabelKey: "dependency.tooltips.starts_before",
     edge: "STARTS_BEFORE",
     reversed: false,
+    icon: ArrowUpFromDot,
+    iconRotation: 90,
   },
   {
     key: "finishes_before",
@@ -210,6 +240,8 @@ export const DEPENDENCY_TYPE_OPTIONS: DependencyTypeOption[] = [
     tooltipLabelKey: "dependency.tooltips.finishes_before",
     edge: "FINISHES_BEFORE",
     reversed: false,
+    icon: ArrowLeftToLine,
+    iconRotation: 0,
   },
 ];
 

package/src/components/story/create-story-dialog.tsx

@@ -20,7 +20,7 @@ import { CalendarCheck, CalendarPlus2, Sprout } from "lucide-react"
 import { UserAvatar } from "@allbluecn/ui"
 import { useForm } from "@tanstack/react-form"
 import { useTranslation } from "react-i18next"
-import { ProjectIconDisplay } from "@/components/project/project-icon"
+import { LucideIconByName } from "@/components/shared/lucide-icon-picker/lucide-icon-by-name"
 import { Button } from "@/components/ui/button"
 import { Input } from "@/components/ui/input"
 
@@ -123,10 +123,12 @@ export function CreateStoryDialog({
       form.setFieldValue("startDate", initialStartDate ?? "")
       form.setFieldValue("targetDate", "")
       form.setFieldValue("labelIds", [])
-      if (initialProjectId) {
-        form.setFieldValue("projectId", initialProjectId)
-      } else {
-        ensureBuiltinProjectFn().then((p) => form.setFieldValue("projectId", p.id)).catch(() => {})
+      if (!continuousCreate) {
+        if (initialProjectId) {
+          form.setFieldValue("projectId", initialProjectId)
+        } else {
+          ensureBuiltinProjectFn().then((p) => form.setFieldValue("projectId", p.id)).catch(() => {})
+        }
       }
       setDescription({ html: "", markdown: "" })
       setIsEditorFocused(false)
@@ -176,8 +178,26 @@ export function CreateStoryDialog({
           labelIds: values.labelIds,
         },
       })
-      form.reset()
-      setDescription({ html: "", markdown: "" })
+      if (tiptapEditorRef.current) {
+        tiptapEditorRef.current.commands.clearContent()
+      }
+      if (continuousCreate) {
+        const currentProjectId = form.state.values.projectId
+        form.setFieldValue("name", "")
+        setDescription({ html: "", markdown: "" })
+        form.setFieldValue("state", initialState ?? "backlog")
+        form.setFieldValue("priority", "none")
+        form.setFieldValue("assigneeId", "none")
+        form.setFieldValue("startDate", initialStartDate ?? "")
+        form.setFieldValue("targetDate", "")
+        form.setFieldValue("labelIds", [])
+        if (currentProjectId) {
+          form.setFieldValue("projectId", currentProjectId)
+        }
+      } else {
+        form.reset()
+        setDescription({ html: "", markdown: "" })
+      }
       if (!continuousCreate) onOpenChange(false)
       onSuccess?.(
         {
@@ -220,7 +240,7 @@ export function CreateStoryDialog({
                     className="h-8 gap-1.5 border-0 bg-muted/50 px-2.5 text-sm font-medium"
                   >
                     {selectedProject ? (
-                      <ProjectIconDisplay name={selectedProject.icon} size={16} />
+                      <LucideIconByName name={selectedProject.icon} size={16} />
                     ) : (
                       <Sprout className="size-4 text-muted-foreground" />
                     )}
@@ -236,7 +256,7 @@ export function CreateStoryDialog({
                       className={`flex w-full items-center justify-between gap-2 rounded px-2 py-1.5 text-sm ${field.value === p.id ? "bg-accent font-medium" : "hover:bg-muted"}`}
                     >
                       <span className="flex min-w-0 items-center gap-2">
-                        <ProjectIconDisplay name={p.icon} size={16} />
+                        <LucideIconByName name={p.icon} size={16} />
                         <span className="truncate">{p.name}</span>
                       </span>
                       {p.displayId && (
@@ -324,7 +344,7 @@ export function CreateStoryDialog({
                 <DateEditor value={field.value || null} onChange={(v) => field.handleChange(v ?? "")} label={t("create.dueDate")} icon={CalendarCheck} />
               )} />
               <form.Field name="labelIds" children={(field) => (
-                <LabelsEditor labelIds={field.value as string[]} labels={labels} onChange={(v) => field.handleChange(v as string[])} variant="button" />
+                <LabelsEditor labelIds={field.value as string[]} labels={labels} onChange={(v) => field.handleChange(v as string[])} variant="button" aiContext={{ name: () => ((form.state.values.name as string) ?? "").trim() }} />
               )} />
             </div>
 

package/src/components/story/detail/__tests__/categories.test.tsx

@@ -0,0 +1,62 @@
+// SPDX-License-Identifier: AGPL-3.0-or-later
+// AllBlue - 理想之海
+// Copyright (C) 2026 AllBlue Contributors
+//
+// This program is free software: you can redistribute it and/or modify
+// it under the terms of the GNU Affero General Public License as published by
+// the Free Software Foundation, either version 3 of the License, or
+// (at your option) any later version.
+//
+// This program is distributed in the hope that it will be useful,
+// but WITHOUT ANY WARRANTY; without even the implied warranty of
+// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
+// GNU Affero General Public License for more details.
+//
+// You should have received a copy of the GNU Affero General Public License
+// along with this program. If not, see <https://www.gnu.org/licenses/>.
+
+import { describe, it, expect } from "vitest";
+import { render, screen } from "@testing-library/react";
+import { TooltipProvider } from "@/components/ui/tooltip";
+import { StoryDetailCategories } from "../story-detail-toolbar/categories";
+
+vi.mock("react-i18next", () => ({
+  useTranslation: () => ({ t: (key: string) => key }),
+}));
+
+const renderWithProviders = (ui: React.ReactElement) =>
+  render(<TooltipProvider>{ui}</TooltipProvider>);
+
+describe("StoryDetailCategories", () => {
+  it("渲染 6 个 category button", () => {
+    renderWithProviders(<StoryDetailCategories />);
+    const buttons = screen.getAllByRole("button");
+    expect(buttons).toHaveLength(6);
+  });
+
+  it("渲染 6 个 category 标签", () => {
+    renderWithProviders(<StoryDetailCategories />);
+    expect(screen.getByText("categories.prd.label")).toBeTruthy();
+    expect(screen.getByText("categories.ui.label")).toBeTruthy();
+    expect(screen.getByText("categories.bug.label")).toBeTruthy();
+    expect(screen.getByText("categories.testCase.label")).toBeTruthy();
+    expect(screen.getByText("categories.acceptance.label")).toBeTruthy();
+    expect(screen.getByText("categories.retro.label")).toBeTruthy();
+  });
+
+  it("bug 和 test-case 之间有一个分隔线", () => {
+    renderWithProviders(<StoryDetailCategories />);
+    const spans = document.querySelectorAll("span");
+    const separator = Array.from(spans).find((s) =>
+      s.className.includes("w-px") && s.className.includes("h-4"),
+    );
+    expect(separator).toBeTruthy();
+  });
+
+  it("bug 前后各有一个 button", () => {
+    renderWithProviders(<StoryDetailCategories />);
+    const bugBtn = screen.getByText("categories.bug.label")
+      .closest("button")!;
+    expect(bugBtn).toBeTruthy();
+  });
+});

package/src/components/story/detail/__tests__/dependencies-button.test.tsx

@@ -0,0 +1,49 @@
+// SPDX-License-Identifier: AGPL-3.0-or-later
+// AllBlue - 理想之海
+// Copyright (C) 2026 AllBlue Contributors
+//
+// This program is free software: you can redistribute it and/or modify
+// it under the terms of the GNU Affero General Public License as published by
+// the Free Software Foundation, either version 3 of the License, or
+// (at your option) any later version.
+//
+// This program is distributed in the hope that it will be useful,
+// but WITHOUT ANY WARRANTY; without even the implied warranty of
+// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
+// GNU Affero General Public License for more details.
+//
+// You should have received a copy of the GNU Affero General Public License
+// along with this program. If not, see <https://www.gnu.org/licenses/>.
+
+import { describe, it, expect, vi } from "vitest";
+import { render, screen, fireEvent } from "@testing-library/react";
+import { TooltipProvider } from "@/components/ui/tooltip";
+import { StoryDetailDependencies } from "../story-detail-toolbar/dependencies";
+
+vi.mock("react-i18next", () => ({
+  useTranslation: () => ({ t: (key: string) => key }),
+}));
+
+const renderWithProviders = (ui: React.ReactElement) =>
+  render(<TooltipProvider>{ui}</TooltipProvider>);
+
+describe("StoryDetailDependencies", () => {
+  it("渲染 button，包含 Waypoints 图标和文本", () => {
+    renderWithProviders(
+      <StoryDetailDependencies onOpenAdd={vi.fn()} />,
+    );
+    const btn = screen.getByRole("button");
+    expect(btn).toBeTruthy();
+    expect(screen.getByText("relations.addDependency")).toBeTruthy();
+    expect(btn).toHaveAttribute("title", "relations.dependencyTitle");
+  });
+
+  it("点击 button 触发 onOpenAdd", () => {
+    const onOpenAdd = vi.fn();
+    renderWithProviders(
+      <StoryDetailDependencies onOpenAdd={onOpenAdd} />,
+    );
+    fireEvent.click(screen.getByRole("button"));
+    expect(onOpenAdd).toHaveBeenCalledTimes(1);
+  });
+});

package/src/components/story/detail/activity-timeline.tsx

@@ -30,11 +30,11 @@ import {
   type StoryState,
   type StoryPriority,
 } from "@/components/story/constants";
-import { ProjectIconDisplay } from "@/components/project/project-icon";
+import { LucideIconByName } from "@/components/shared/lucide-icon-picker/lucide-icon-by-name";
 import { listProjectsBriefFn } from "@/server/serverFns/project";
 import type { ActivityItem, UserBrief } from "@/components/story/types";
 import { groupActivities, type ActivityGroup } from "@/lib/story/activity-grouper";
-import { ArrowUpFromDot, ChevronDown, Dot, Sparkles, Layers, UserRound } from "lucide-react";
+import { ArrowUpFromDot, ArrowRight, ChevronDown, Dot, Sparkles, Layers, UserRound } from "lucide-react";
 import { sanitize } from "@/lib/sanitize";
 
 function getDiffDecorator(
@@ -55,7 +55,7 @@ function getDiffDecorator(
     return <Icon className="size-3 shrink-0 text-muted-foreground" />;
   }
   if (action === "project_transferred") {
-    return <ProjectIconDisplay name={projectIconName} size={12} className="shrink-0" />;
+    return <LucideIconByName name={projectIconName} size={12} className="shrink-0" />;
   }
   if (action === "assignee_changed") {
     // 优先用用户头像，找不到时降级为通用图标
@@ -250,7 +250,7 @@ function DiffCompare({ oldValue, newValue, oldDecorator, newDecorator, plain, bl
                 </div>
               </div>
               <div className="absolute left-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2 z-10 flex size-5 items-center justify-center rounded-full bg-background border">
-                <ArrowUpFromDot className="size-2.5 text-muted-foreground rotate-90" />
+                <ArrowRight className="size-2.5 text-muted-foreground" />
               </div>
               <div className="w-1/2 bg-green-50/40 dark:bg-green-950/20 p-2 pl-4">
                 <div className="flex items-center gap-1.5">
@@ -326,9 +326,16 @@ interface ActivityTimelineProps {
 const OBJECT_ACTIVITY_ACTIONS: Record<string, true> = {
   child_added: true,
   dependency_added: true,
+  dependency_removed: true,
   link_added: true,
+  link_updated: true,
+  link_removed: true,
   attachment_added: true,
+  attachment_updated: true,
+  attachment_removed: true,
   kb_linked: true,
+  kb_unlinked: true,
+  prd_unlinked: true,
 };
 
 function describeActivity(a: ActivityItem, t: TFunction): string {

package/src/components/story/detail/story-detail-body.tsx

@@ -15,7 +15,7 @@
 // You should have received a copy of the GNU Affero General Public License
 // along with this program. If not, see <https://www.gnu.org/licenses/>.
 
-import { lazy, Suspense, useCallback, useEffect, useRef, useState } from "react";
+import React, { lazy, Suspense, useCallback, useEffect, useRef, useState } from "react";
 import { useTranslation } from "react-i18next";
 import {
   ChevronsDownUp,
@@ -45,7 +45,7 @@ import { EmojiPicker } from "./emoji-picker";
 import { StoryAiToolbar } from "../ai/story-ai-toolbar";
 import { useStoryAiModel } from "../ai/use-story-ai-model";
 import { StateEditor, PriorityEditor, AssigneeEditor, DateEditor, LabelsEditor, ParentStoryEditor } from "../inline-editors";
-import { ProjectIconDisplay } from "@/components/project/project-icon";
+import { LucideIconByName } from "@/components/shared/lucide-icon-picker/lucide-icon-by-name";
 import type { Editor } from "@tiptap/react";
 import { StoryProperties } from "./story-properties";
 import { StoryDetailToolbar } from "./story-detail-toolbar";
@@ -76,12 +76,15 @@ export function StoryDetailBody({
   labels,
   stories,
   projects,
+  iterations,
   relationsData,
   onRelationsUpdate,
   onAppendActivities,
   onAppendComment,
   onRemoveComment,
   onStoryUpdate,
+  onNavigateInPanel,
+  breadcrumbItems,
 }: {
   story: StoryDetail;
   users: UserBrief[];
@@ -97,8 +100,10 @@ export function StoryDetailBody({
   labels?: { id: string; name: string; color: string }[];
   /** 所有需求列表（用于父需求选择） */
   stories?: { id: string; identifier: string; name: string; state: StoryState; projectId?: string }[];
-  /** 所有项目列表（用于父需求选择） */
-  projects?: { id: string; name: string; icon: string; displayId?: string | null }[];
+   /** 所有项目列表（用于父需求选择） */
+   projects?: { id: string; name: string; icon: string; displayId?: string | null }[];
+   /** 迭代列表（用于迭代选择器） */
+   iterations?: import("@/server/serverFns/iteration/schemas").IterationSummary[];
   /** 关联数据（从路由 loader 预加载） */
   relationsData?: RelationsData;
   onRelationsUpdate?: (next: RelationsData | ((prev: RelationsData) => RelationsData)) => void;
@@ -106,6 +111,9 @@ export function StoryDetailBody({
   onAppendComment?: (comment: CommentWithReplies) => void;
   onRemoveComment?: (commentId: string) => void;
   onStoryUpdate?: (s: StoryDetail) => void;
+  onNavigateInPanel?: (targetId: string, targetIdentifier?: string, relationKind?: "child" | "dependency") => void;
+  /** 内嵌面板导航面包屑（在面板内跳转时替代单层 identifier 显示） */
+  breadcrumbItems?: Array<{ identifier?: string; projectId?: string; label: string; onClick?: () => void }>;
 }) {
   const { t } = useTranslation("story");
   const [name, setName] = useState(story.name);
@@ -125,6 +133,12 @@ export function StoryDetailBody({
   const [expanded, setExpanded] = useState(false);
   const [needsTruncation, setNeedsTruncation] = useState(false);
   const [isEditorFocused, setIsEditorFocused] = useState(false);
+  // 描述是否为空（跟随编辑器 onChange 实时更新）。不能用 descContent.markdown 判断——
+  // 编辑会话期间 onChange 只进 pendingDescRef（防抖保存），descContent 不更新，
+  // 否则输入文字后失焦仍会显示「点击添加需求描述」占位并与文字重合
+  const [isDescEmpty, setIsDescEmpty] = useState(
+    !(parsedDesc.markdown ?? "").trim(),
+  );
   const [reactions, setReactions] = useState<ReactionGroup[]>([]);
   const pendingReactionsRef = useRef<Set<string>>(new Set());
   useEffect(() => {
@@ -291,6 +305,7 @@ export function StoryDetailBody({
   // 兜底防抖避免用户长时间不操作也最终落盘（防崩溃丢数据）。
   const handleDescriptionChange = useCallback((content: { html: string; markdown: string }) => {
     pendingDescRef.current = content;
+    setIsDescEmpty(!content.markdown.trim());
     if (saveTimerRef.current) clearTimeout(saveTimerRef.current);
     saveTimerRef.current = setTimeout(
       () => flushDescriptionRef.current(),
@@ -317,6 +332,7 @@ export function StoryDetailBody({
     }
     const newContent = { html: newMarkdown, markdown: newMarkdown };
     setDescContent(newContent);
+    setIsDescEmpty(!newMarkdown.trim());
     const json = serializeStoryDescription(newMarkdown, newMarkdown);
     lastPersistedRef.current = json;
     updateField("description", json);
@@ -345,38 +361,62 @@ export function StoryDetailBody({
       <div className="flex items-start justify-between gap-4 px-6">
         <div className="flex-1 space-y-4">
           <div className="flex items-center gap-2">
-            {project && (
-              <Tooltip>
-                <TooltipTrigger asChild>
-                  <span className="flex cursor-default items-center">
-                    <ProjectIconDisplay name={project.icon} size={16} className="shrink-0 text-muted-foreground" />
-                  </span>
-                </TooltipTrigger>
-                <TooltipContent>
-                  <div className="flex flex-col">
-                    <span className="text-[10px] font-medium uppercase tracking-wide text-muted-foreground">{t("detail.belongsTo")}</span>
-                    <span>{project.name}</span>
-                  </div>
-                </TooltipContent>
-              </Tooltip>
-            )}
-            {identifier && (
-              <Tooltip>
-                <TooltipTrigger asChild>
-                  <button
-                    type="button"
-                    onClick={() => {
-                      navigator.clipboard.writeText(identifier)
-                        .then(() => toast.success(t("detail.copied", { identifier })))
-                        .catch(() => toast.error(t("detail.copyFailed")));
-                    }}
-                    className="text-sm font-mono text-muted-foreground hover:text-foreground transition-colors cursor-pointer"
-                  >
-                    {identifier}
-                  </button>
-                </TooltipTrigger>
-                <TooltipContent>{t("detail.clickToCopy")}</TooltipContent>
-              </Tooltip>
+            {breadcrumbItems && breadcrumbItems.length > 0 ? (
+              <div className="flex items-center gap-1.5 text-sm font-mono text-muted-foreground">
+                {breadcrumbItems.map((item, i) => (
+                  <React.Fragment key={i}>
+                    {i > 0 && <span className="text-muted-foreground/40 px-1">/</span>}
+                    <button
+                      type="button"
+                      onClick={item.onClick}
+                      className="inline-flex items-center gap-1 hover:text-foreground transition-colors cursor-pointer"
+                    >
+                      <LucideIconByName
+                        name={projects?.find((p) => p.id === item.projectId)?.icon ?? project?.icon}
+                        size={16}
+                        className="shrink-0 text-muted-foreground"
+                      />
+                      {item.identifier}
+                    </button>
+                  </React.Fragment>
+                ))}
+              </div>
+            ) : (
+              <>
+                {project && (
+                  <Tooltip>
+                    <TooltipTrigger asChild>
+                      <span className="flex cursor-default items-center">
+                        <LucideIconByName name={project.icon} size={16} className="shrink-0 text-muted-foreground" />
+                      </span>
+                    </TooltipTrigger>
+                    <TooltipContent>
+                      <div className="flex flex-col">
+                        <span className="text-[10px] font-medium uppercase tracking-wide text-muted-foreground">{t("detail.belongsTo")}</span>
+                        <span>{project.name}</span>
+                      </div>
+                    </TooltipContent>
+                  </Tooltip>
+                )}
+                {identifier && (
+                  <Tooltip>
+                    <TooltipTrigger asChild>
+                      <button
+                        type="button"
+                        onClick={() => {
+                          navigator.clipboard.writeText(identifier)
+                            .then(() => toast.success(t("detail.copied", { identifier })))
+                            .catch(() => toast.error(t("detail.copyFailed")));
+                        }}
+                        className="text-sm font-mono text-muted-foreground hover:text-foreground transition-colors cursor-pointer"
+                      >
+                        {identifier}
+                      </button>
+                    </TooltipTrigger>
+                    <TooltipContent>{t("detail.clickToCopy")}</TooltipContent>
+                  </Tooltip>
+                )}
+              </>
             )}
           </div>
           {/* {saving && <span className="text-xs text-muted-foreground">保存中...</span>} */}
@@ -389,7 +429,7 @@ export function StoryDetailBody({
         </div>
       </div>
       {metaBar}
-      <div ref={editorContainerRef} className={`relative notion-full-width${!isEditorFocused && !(descContent.markdown ?? "").trim() ? " story-editor-no-placeholder" : ""}`} style={{ "--notion-content-width": "1fr", "--notion-margin-width": "0px" } as React.CSSProperties} onPointerDown={onEditorPointerDown}>
+      <div ref={editorContainerRef} className={`relative notion-full-width${!isEditorFocused && isDescEmpty ? " story-editor-no-placeholder" : ""}`} style={{ "--notion-content-width": "1fr", "--notion-margin-width": "0px" } as React.CSSProperties} onPointerDown={onEditorPointerDown}>
         <div className={!expanded && needsTruncation ? "max-h-[90px] overflow-hidden" : ""}>
           <Suspense fallback={
             <div className="flex flex-col space-y-2 p-3 min-h-24">
@@ -411,7 +451,7 @@ export function StoryDetailBody({
             />
           </Suspense>
         </div>
-        {!isEditorFocused && !(descContent.markdown ?? "").trim() && (
+                {!isEditorFocused && isDescEmpty && (
           <div className="pointer-events-none absolute top-3 left-6 text-sm text-muted-foreground select-none">
             {t("create.addDescription")}
           </div>
@@ -549,6 +589,7 @@ export function StoryDetailBody({
             users={users}
             projects={projects?.map((p) => ({ ...p, displayId: p.displayId ?? null }))}
             labels={labels}
+            onNavigateInPanel={onNavigateInPanel}
           />
         </div>
       )}
@@ -556,15 +597,25 @@ export function StoryDetailBody({
       <StoryProperties
         story={{
           id: story.id,
+          name: story.name,
+          description: story.description,
           parentId: story.parentId,
           parent: story.parent,
           labels: story.labels,
           projectId: story.projectId,
+          iteration: story.iteration ?? null,
         }}
         labels={labels}
         projects={projects}
+        iterations={iterations}
         onParentChange={updateParent}
         onLabelsChange={updateLabels}
+        onIterationChange={(it) => {
+          if (onStoryUpdate) {
+            // eslint-disable-next-line @typescript-eslint/no-explicit-any
+            onStoryUpdate({ ...story, iteration: it } as any);
+          }
+        }}
         onActivities={onAppendActivities}
       />