@allbluecn/web-app 0.5.1 → 0.6.1

package/src/components/shared/lucide-icon-picker/index.tsx

@@ -0,0 +1,82 @@
+// 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 { lazy, Suspense, useState, type ReactNode } from "react";
+import { Button } from "@/components/ui/button";
+import { Popover, PopoverContent, PopoverTrigger } from "@/components/ui/popover";
+import { LucideIconByName } from "./lucide-icon-by-name";
+import { pushRecentIcon } from "./icon-data";
+
+const IconPickerPanel = lazy(() => import("./panel"));
+
+interface LucideIconPickerProps {
+  /** 当前选中（kebab-case 官方名）；空值时默认触发按钮显示微笑占位图标 */
+  value?: string;
+  /** 选中回调：触发后弹窗自动关闭并记录最近使用 */
+  onChange: (name: string) => void;
+  /** 自定义 Popover trigger（asChild 模式）；不传时使用内置触发按钮（未选显示微笑，选后回显） */
+  children?: ReactNode;
+  align?: "start" | "center" | "end";
+  side?: "top" | "right" | "bottom" | "left";
+  /**
+   * 模态模式（在 Dialog 内嵌套使用时必须开启）：
+   * 外层 Dialog 的滚动锁会拦截 Portal 到 body 的 Popover 的 wheel 事件，
+   * modal 使 Popover Content 自身注册为滚动锁容器，放行内部滚动。
+   */
+  modal?: boolean;
+}
+
+export function LucideIconPicker({
+  value,
+  onChange,
+  children,
+  align = "start",
+  side = "bottom",
+  modal = false,
+}: LucideIconPickerProps) {
+  const [open, setOpen] = useState(false);
+
+  return (
+    <Popover open={open} onOpenChange={setOpen} modal={modal}>
+      <PopoverTrigger asChild>
+        {children ?? (
+          <Button
+            type="button"
+            variant="outline"
+            size="icon"
+            className="size-10 shrink-0"
+            aria-label="选择图标"
+          >
+            <LucideIconByName name={value} size={20} />
+          </Button>
+        )}
+      </PopoverTrigger>
+      <PopoverContent align={align} side={side} className="w-fit p-1.5">
+        <Suspense fallback={<div className="h-105 w-88" />}>
+          <IconPickerPanel
+            value={value}
+            onPick={(name) => {
+              onChange(name);
+              pushRecentIcon(name);
+              setOpen(false);
+            }}
+          />
+        </Suspense>
+      </PopoverContent>
+    </Popover>
+  );
+}

package/src/components/shared/lucide-icon-picker/lucide-icon-by-name.tsx

@@ -0,0 +1,78 @@
+// 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 type { ReactNode } from "react";
+import { Smile } from "lucide-react";
+import { cn } from "@/lib/utils";
+import { CURATED_ICON_MAP } from "./curated-icons";
+import { pascalToKebab } from "./icon-data";
+
+/**
+ * 旧数据兼容：PROJECT_ICONS 时代存的名字与 Lucide 官方名不一致的映射
+ * （flask/cart/earth 为旧 icon-packs/project 遗留值）
+ */
+const LEGACY_ALIASES: Record<string, string> = {
+  flask: "flask-conical",
+  cart: "shopping-cart",
+  earth: "globe",
+};
+
+/** 解析任意历史格式的图标名：别名 → camelCase 转 kebab → 原样 */
+function resolveIconName(name: string): string {
+  if (CURATED_ICON_MAP[name]) return name;
+  const aliased = LEGACY_ALIASES[name];
+  if (aliased && CURATED_ICON_MAP[aliased]) return aliased;
+  if (/[a-z][A-Z]/.test(name)) {
+    const kebab = pascalToKebab(name);
+    if (CURATED_ICON_MAP[kebab]) return kebab;
+  }
+  return name;
+}
+
+interface LucideIconByNameProps {
+  /** kebab-case 精选名单内的图标名；无效/精选外渲染 fallback */
+  name?: string;
+  size?: number;
+  className?: string;
+  /** 默认：Smile 微笑脸（未选择图标时的占位） */
+  fallback?: ReactNode;
+}
+
+export function LucideIconByName({
+  name: rawName,
+  size = 20,
+  className,
+  fallback,
+}: LucideIconByNameProps) {
+  const name = rawName ? resolveIconName(rawName) : rawName;
+  const found = name ? CURATED_ICON_MAP[name] : undefined;
+  if (!found) {
+    return (
+      <>
+        {fallback ?? (
+          <Smile
+            size={size}
+            aria-hidden
+            className={cn("text-muted-foreground", className)}
+          />
+        )}
+      </>
+    );
+  }
+  const Icon = found.Icon;
+  return <Icon size={size} aria-hidden className={className} />;
+}

package/src/components/shared/lucide-icon-picker/panel.tsx

@@ -0,0 +1,163 @@
+// 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 { useEffect, useMemo, useRef, useState, type ReactNode } from "react";
+import { useTranslation } from "react-i18next";
+import { Search } from "lucide-react";
+import { cn } from "@/lib/utils";
+import { Input } from "@/components/ui/input";
+import { CURATED_ICONS } from "./curated-icons";
+import {
+  buildSearchIndex,
+  filterIcons,
+  getRecentIcons,
+  pruneRecentIcons,
+  type IconSearchEntry,
+} from "./icon-data";
+
+const SEARCH_INDEX = buildSearchIndex(CURATED_ICONS);
+
+interface IconPickerPanelProps {
+  value?: string;
+  onPick: (name: string) => void;
+}
+
+function IconGrid({
+  items,
+  value,
+  onPick,
+}: {
+  items: IconSearchEntry[];
+  value?: string;
+  onPick: (name: string) => void;
+}) {
+  return (
+    <div className="grid grid-cols-8 gap-1 px-2 pb-2">
+      {items.map((item) => {
+        const Icon = item.Icon;
+        const selected = item.name === value;
+        return (
+          <button
+            key={item.name}
+            type="button"
+            aria-label={`icon-cell-${item.name}`}
+            data-selected={selected}
+            onClick={() => onPick(item.name)}
+            className={cn(
+              "flex size-9 items-center justify-center rounded-md text-muted-foreground transition-colors hover:bg-muted hover:text-foreground",
+              selected && "bg-primary/10 text-primary hover:bg-primary/15 hover:text-primary"
+            )}
+          >
+            <Icon size={18} aria-hidden />
+          </button>
+        );
+      })}
+    </div>
+  );
+}
+
+function SectionTitle({ children, className }: { children: ReactNode; className?: string }) {
+  return (
+    <h3 className={cn("px-3 pb-1 text-xs font-medium text-muted-foreground", className)}>
+      {children}
+    </h3>
+  );
+}
+
+export function IconPickerPanel({ value, onPick }: IconPickerPanelProps) {
+  const { t } = useTranslation("common");
+  const [query, setQuery] = useState("");
+  const searchRef = useRef<HTMLInputElement>(null);
+
+  useEffect(() => {
+    searchRef.current?.focus();
+    // 清理最近使用中已失效的记录（如精选名单收缩前存入的图标名）
+    const stored = getRecentIcons();
+    const invalid = stored.filter((n) => !SEARCH_INDEX.some((e) => e.name === n));
+    if (invalid.length > 0) pruneRecentIcons(new Set(stored.filter((n) => !invalid.includes(n))));
+  }, []);
+
+  const searching = query.trim().length > 0;
+  const results = useMemo(
+    () => (searching ? filterIcons(query.trim(), SEARCH_INDEX) : []),
+    [query, searching]
+  );
+  const recent = getRecentIcons()
+    .map((n) => SEARCH_INDEX.find((e) => e.name === n))
+    .filter((e): e is IconSearchEntry => Boolean(e));
+  const firstVisible = searching ? results[0] : (recent[0] ?? SEARCH_INDEX[0]);
+
+  return (
+    <div className="flex flex-col overflow-auto" style={{ height: 26.25 * 16, width: 22 * 16 }}>
+      {/* 搜索框 */}
+      <div className="relative shrink-0 p-1.5 pb-2">
+        <Search
+          size={14}
+          aria-hidden
+          className="pointer-events-none absolute top-1/2 left-3 -translate-y-1/2 text-muted-foreground"
+        />
+        <Input
+          ref={searchRef}
+          value={query}
+          onChange={(e) => setQuery(e.target.value)}
+          onKeyDown={(e) => {
+            if (e.key === "Enter" && firstVisible) {
+              e.preventDefault();
+              onPick(firstVisible.name);
+            }
+          }}
+          aria-label={t("iconPicker.searchPlaceholder")}
+          placeholder={t("iconPicker.searchPlaceholder")}
+          className="h-8 pl-8 text-xs"
+        />
+      </div>
+
+      {searching ? (
+        <>
+          <div className="shrink-0 px-3 pb-1 text-xs text-muted-foreground">
+            {t("iconPicker.resultCount", { count: results.length })}
+          </div>
+          {results.length === 0 ? (
+            <div className="flex flex-1 items-center justify-center px-6 text-center text-xs text-muted-foreground">
+              {t("iconPicker.noResults")}
+            </div>
+          ) : (
+            <IconGrid items={results} value={value} onPick={onPick} />
+          )}
+        </>
+      ) : (
+        <>
+          {/* 最近使用：仅在有记录时显示，与全部图标同页上下排列 */}
+          {recent.length > 0 && (
+            <section>
+              <SectionTitle>{t("iconPicker.recent")}</SectionTitle>
+              <IconGrid items={recent} value={value} onPick={onPick} />
+            </section>
+          )}
+          <section>
+            <SectionTitle className={cn(recent.length === 0 && "pt-1")}>
+              {t("iconPicker.all")}
+            </SectionTitle>
+            <IconGrid items={SEARCH_INDEX} value={value} onPick={onPick} />
+          </section>
+        </>
+      )}
+    </div>
+  );
+}
+
+export default IconPickerPanel;

package/src/components/story/__tests__/constants.test.ts

@@ -0,0 +1,255 @@
+// 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 {
+  STORY_STATES,
+  STORY_PRIORITIES,
+  STATE_LABEL,
+  STATE_COLOR,
+  STATE_ICON_COLOR,
+  PRIORITY_LABEL,
+  PRIORITY_RANK,
+  PRIORITY_ICON,
+  DEPENDENCY_TYPE_OPTIONS,
+  dependencyTypeOption,
+  dependencyTypeBadgeKey,
+  toDependencyEdge,
+  type StoryState,
+  type StoryPriority,
+} from "../constants";
+
+describe("STORY_STATES", () => {
+  it("包含 5 个状态", () => {
+    expect(STORY_STATES).toHaveLength(5);
+  });
+
+  it("每项包含 value/label/color 字段", () => {
+    STORY_STATES.forEach((s) => {
+      expect(typeof s.value).toBe("string");
+      expect(typeof s.label).toBe("string");
+      expect(typeof s.color).toBe("string");
+    });
+  });
+
+  it("label 均以 state. 开头", () => {
+    STORY_STATES.forEach((s) => {
+      expect(s.label).toMatch(/^state\./);
+    });
+  });
+
+  it("value 覆盖全部状态", () => {
+    expect(STORY_STATES.map((s) => s.value)).toEqual([
+      "backlog",
+      "todo",
+      "in_progress",
+      "done",
+      "cancelled",
+    ]);
+  });
+});
+
+describe("STORY_PRIORITIES", () => {
+  it("包含 5 个优先级", () => {
+    expect(STORY_PRIORITIES).toHaveLength(5);
+  });
+
+  it("rank 值覆盖 0 到 4", () => {
+    expect(STORY_PRIORITIES.map((p) => p.rank).sort((a, b) => a - b)).toEqual([0, 1, 2, 3, 4]);
+  });
+
+  it("各优先级 rank 值正确", () => {
+    const rankMap = Object.fromEntries(STORY_PRIORITIES.map((p) => [p.value, p.rank]));
+    expect(rankMap).toEqual({ urgent: 4, high: 3, medium: 2, low: 1, none: 0 });
+  });
+
+  it("label 均以 priority. 开头", () => {
+    STORY_PRIORITIES.forEach((p) => {
+      expect(p.label).toMatch(/^priority\./);
+    });
+  });
+});
+
+describe("STATE_LABEL", () => {
+  it("每个 StoryState 都有对应 label", () => {
+    const allStates: StoryState[] = ["backlog", "todo", "in_progress", "done", "cancelled"];
+    allStates.forEach((state) => {
+      expect(STATE_LABEL[state]).toBeDefined();
+      expect(STATE_LABEL[state]).toMatch(/^state\./);
+    });
+  });
+
+  it("label 值与 STORY_STATES 一致", () => {
+    STORY_STATES.forEach((s) => {
+      expect(STATE_LABEL[s.value]).toBe(s.label);
+    });
+  });
+});
+
+describe("STATE_COLOR", () => {
+  it("每个 StoryState 都有对应 color", () => {
+    const allStates: StoryState[] = ["backlog", "todo", "in_progress", "done", "cancelled"];
+    allStates.forEach((state) => {
+      expect(STATE_COLOR[state]).toBeDefined();
+      expect(typeof STATE_COLOR[state]).toBe("string");
+    });
+  });
+
+  it("color 值与 STORY_STATES 一致", () => {
+    STORY_STATES.forEach((s) => {
+      expect(STATE_COLOR[s.value]).toBe(s.color);
+    });
+  });
+});
+
+describe("STATE_ICON_COLOR", () => {
+  it("每个 StoryState 都有对应 icon color", () => {
+    const allStates: StoryState[] = ["backlog", "todo", "in_progress", "done", "cancelled"];
+    allStates.forEach((state) => {
+      expect(STATE_ICON_COLOR[state]).toBeDefined();
+      expect(typeof STATE_ICON_COLOR[state]).toBe("string");
+    });
+  });
+
+  it("icon color 包含 text- 前缀", () => {
+    Object.entries(STATE_ICON_COLOR).forEach(([_, color]) => {
+      expect(color).toMatch(/^text-/);
+    });
+  });
+});
+
+describe("PRIORITY_LABEL", () => {
+  it("每个 StoryPriority 都有对应 label", () => {
+    const allPriorities: StoryPriority[] = ["urgent", "high", "medium", "low", "none"];
+    allPriorities.forEach((p) => {
+      expect(PRIORITY_LABEL[p]).toBeDefined();
+      expect(PRIORITY_LABEL[p]).toMatch(/^priority\./);
+    });
+  });
+
+  it("label 值与 STORY_PRIORITIES 一致", () => {
+    STORY_PRIORITIES.forEach((p) => {
+      expect(PRIORITY_LABEL[p.value]).toBe(p.label);
+    });
+  });
+});
+
+describe("PRIORITY_RANK", () => {
+  it("值与 STORY_PRIORITIES.rank 一致", () => {
+    STORY_PRIORITIES.forEach((p) => {
+      expect(PRIORITY_RANK[p.value]).toBe(p.rank);
+    });
+  });
+
+  it("urgent 最高 none 最低", () => {
+    expect(PRIORITY_RANK["urgent"]).toBeGreaterThanOrEqual(PRIORITY_RANK["high"]);
+    expect(PRIORITY_RANK["high"]).toBeGreaterThanOrEqual(PRIORITY_RANK["medium"]);
+    expect(PRIORITY_RANK["medium"]).toBeGreaterThanOrEqual(PRIORITY_RANK["low"]);
+    expect(PRIORITY_RANK["low"]).toBeGreaterThanOrEqual(PRIORITY_RANK["none"]);
+  });
+});
+
+describe("PRIORITY_ICON", () => {
+  it("每个 StoryPriority 都有对应图标", () => {
+    const allPriorities: StoryPriority[] = ["urgent", "high", "medium", "low", "none"];
+    allPriorities.forEach((p) => {
+      expect(PRIORITY_ICON[p]).toBeDefined();
+      expect(typeof PRIORITY_ICON[p]).not.toBe("string");
+    });
+  });
+
+  it("各优先级图标互不相同", () => {
+    const icons = Object.values(PRIORITY_ICON);
+    expect(new Set(icons).size).toBe(icons.length);
+  });
+});
+
+describe("DEPENDENCY_TYPE_OPTIONS", () => {
+  it("包含 6 项", () => {
+    expect(DEPENDENCY_TYPE_OPTIONS).toHaveLength(6);
+  });
+
+  it("key 唯一", () => {
+    const keys = DEPENDENCY_TYPE_OPTIONS.map((o) => o.key);
+    expect(new Set(keys).size).toBe(keys.length);
+  });
+
+  it("包含 3 个 dependsOn 和 3 个 dependents", () => {
+    const dependsOn = DEPENDENCY_TYPE_OPTIONS.filter((o) => o.group === "dependsOn");
+    const dependents = DEPENDENCY_TYPE_OPTIONS.filter((o) => o.group === "dependents");
+    expect(dependsOn).toHaveLength(3);
+    expect(dependents).toHaveLength(3);
+  });
+
+  it("dependsOn 项 reversed=true", () => {
+    DEPENDENCY_TYPE_OPTIONS.filter((o) => o.group === "dependsOn").forEach((o) => {
+      expect(o.reversed).toBe(true);
+    });
+  });
+
+  it("dependents 项 reversed=false", () => {
+    DEPENDENCY_TYPE_OPTIONS.filter((o) => o.group === "dependents").forEach((o) => {
+      expect(o.reversed).toBe(false);
+    });
+  });
+});
+
+describe("dependencyTypeOption", () => {
+  it("合法 group+depType 返回对应选项", () => {
+    expect(dependencyTypeOption("dependsOn", "BLOCKS").key).toBe("blocked_by");
+    expect(dependencyTypeOption("dependsOn", "STARTS_BEFORE").key).toBe("starts_after");
+    expect(dependencyTypeOption("dependsOn", "FINISHES_BEFORE").key).toBe("finishes_after");
+    expect(dependencyTypeOption("dependents", "BLOCKS").key).toBe("blocking");
+    expect(dependencyTypeOption("dependents", "STARTS_BEFORE").key).toBe("starts_before");
+    expect(dependencyTypeOption("dependents", "FINISHES_BEFORE").key).toBe("finishes_before");
+  });
+
+  it("非法组合抛 Error", () => {
+    expect(() => dependencyTypeOption("dependsOn", "INVALID_EDGE" as any)).toThrow();
+  });
+});
+
+describe("dependencyTypeBadgeKey", () => {
+  it("返回对应 key", () => {
+    expect(dependencyTypeBadgeKey("dependsOn", "BLOCKS")).toBe("blocked_by");
+    expect(dependencyTypeBadgeKey("dependents", "BLOCKS")).toBe("blocking");
+    expect(dependencyTypeBadgeKey("dependsOn", "STARTS_BEFORE")).toBe("starts_after");
+    expect(dependencyTypeBadgeKey("dependents", "STARTS_BEFORE")).toBe("starts_before");
+  });
+});
+
+describe("toDependencyEdge", () => {
+  it("reversed=true 时 sourceId=targetStoryId, targetId=currentStoryId", () => {
+    const reversed = DEPENDENCY_TYPE_OPTIONS.find((o) => o.reversed) as any;
+    const result = toDependencyEdge(reversed, "current", "target");
+    expect(result).toEqual({
+      sourceId: "target",
+      targetId: "current",
+      type: reversed.edge,
+    });
+  });
+
+  it("reversed=false 时 sourceId=currentStoryId, targetId=targetStoryId", () => {
+    const normal = DEPENDENCY_TYPE_OPTIONS.find((o) => !o.reversed) as any;
+    const result = toDependencyEdge(normal, "current", "target");
+    expect(result).toEqual({
+      sourceId: "current",
+      targetId: "target",
+      type: normal.edge,
+    });
+  });
+});

package/src/components/story/ai/story-ai-panel.tsx

@@ -30,7 +30,7 @@ import {
   SelectValue,
 } from "@/components/ui/select"
 import { toast } from "sonner"
-import { createStoryFn, addChildFn } from "@/server/serverFns/story"
+import { createStoryFn, addChildFn, createLabelFn } from "@/server/serverFns/story"
 import { useSession } from "@/lib/auth/auth-client"
 import {
   fetchStoryAiStream,
@@ -217,18 +217,26 @@ export function StoryAiContent({
     try {
       const results = await Promise.allSettled(
         selected.map(async (item) => {
-           const created = await createStoryFn({
-             data: {
-               name: item.name.trim(),
-               description: item.description,
-               projectId: gen.projectId || undefined,
-               state: "backlog",
-               priority: (item.priority ?? "none") as "urgent" | "high" | "medium" | "low" | "none",
-               assigneeId: item.assigneeId,
-               labelIds: item.labelIds,
-               isAI: true,
-             },
-           })
+          const unmatched = item.labelNames.filter((n) => !labels.some((l) => l.name === n))
+          let finalLabelIds = item.labelIds
+          if (unmatched.length > 0) {
+            const createdLabels = await Promise.all(
+              unmatched.map((n) => createLabelFn({ data: { name: n } })),
+            )
+            finalLabelIds = Array.from(new Set([...item.labelIds, ...createdLabels.map((c) => c.id)]))
+          }
+          const created = await createStoryFn({
+            data: {
+              name: item.name.trim(),
+              description: item.description,
+              projectId: gen.projectId || undefined,
+              state: "backlog",
+              priority: (item.priority ?? "none") as "urgent" | "high" | "medium" | "low" | "none",
+              assigneeId: item.assigneeId,
+              labelIds: finalLabelIds,
+              isAI: true,
+            },
+          })
           if (gen.tab === "split" && gen.splitMode === "children" && gen.parentStory) {
             await addChildFn({ data: { parentId: gen.parentStory.id, childId: created.id } })
           }
@@ -285,7 +293,7 @@ export function StoryAiContent({
               <SelectTrigger className="w-full">
                 <SelectValue placeholder={t("storyAi.panel.projectLabel")} />
               </SelectTrigger>
-               <SelectContent>
+              <SelectContent>
                 {projects.map((p) => (
                   <SelectItem key={p.id} value={p.id}>
                     {p.name}
@@ -353,7 +361,7 @@ export function StoryAiContent({
               <SelectTrigger className="w-full">
                 <SelectValue placeholder={t("storyAi.panel.projectLabel")} />
               </SelectTrigger>
-               <SelectContent>
+              <SelectContent>
                 {projects.map((p) => (
                   <SelectItem key={p.id} value={p.id}>
                     {p.name}

package/src/components/story/ai/story-ai-preview-list.tsx

@@ -162,6 +162,25 @@ export function StoryAiPreviewList({
                     </button>
                   )
                 })}
+                {item.labelNames
+                  .filter((n) => !labels.some((l) => l.name === n))
+                  .map((n) => (
+                    <button
+                      key={`new-${n}`}
+                      type="button"
+                      disabled={disabled}
+                      title={t("inline.aiNew")}
+                      onClick={() =>
+                        onUpdate(item.localId, {
+                          labelNames: item.labelNames.filter((x) => x !== n),
+                        })
+                      }
+                      className="rounded-full border border-dashed border-primary/60 px-2 py-0.5 text-xs text-primary transition-colors hover:bg-primary/10"
+                    >
+                      {n}
+                      <span className="ml-1 text-[10px] leading-none opacity-70">{t("inline.aiNew")}</span>
+                    </button>
+                  ))}
               </div>
             </div>
           </div>