From 2b543f5e377c860086cf65f5fa80b2e1626371d2 Mon Sep 17 00:00:00 2001
From: zhenyi <434836402@qq.com>
Date: Wed, 20 May 2026 13:39:18 +0800
Subject: [PATCH] refactor(ui): remove deprecated project components

Delete unused project components:
- Board: BoardColumn, BoardHeader, BoardListView, BoardModals, KanbanBoard
- Channel: RoomSettingsModal, AiSettings
- Issue: IssueSidebar, ReactionBar
- Skills: CreateSkillDialog, DeleteSkillDialog
- ProjectCreateMenuModal
---
 src/app/project/board/BoardColumn.tsx         |  96 ---
 src/app/project/board/BoardHeader.tsx         |  76 ---
 src/app/project/board/BoardListView.tsx       | 168 -----
 src/app/project/board/BoardModals.tsx         | 265 --------
 src/app/project/board/KanbanBoard.tsx         | 181 ------
 src/app/project/channel/RoomSettingsModal.tsx | 219 -------
 .../project/channel/settings/AiSettings.tsx   | 585 ------------------
 .../components/ProjectCreateMenuModal.tsx     | 530 ----------------
 src/app/project/issue-detail/IssueSidebar.tsx | 482 ---------------
 src/app/project/issue-detail/ReactionBar.tsx  | 111 ----
 src/app/project/skills/CreateSkillDialog.tsx  | 132 ----
 src/app/project/skills/DeleteSkillDialog.tsx  |  64 --
 12 files changed, 2909 deletions(-)
 delete mode 100644 src/app/project/board/BoardColumn.tsx
 delete mode 100644 src/app/project/board/BoardHeader.tsx
 delete mode 100644 src/app/project/board/BoardListView.tsx
 delete mode 100644 src/app/project/board/BoardModals.tsx
 delete mode 100644 src/app/project/board/KanbanBoard.tsx
 delete mode 100644 src/app/project/channel/RoomSettingsModal.tsx
 delete mode 100644 src/app/project/channel/settings/AiSettings.tsx
 delete mode 100644 src/app/project/components/ProjectCreateMenuModal.tsx
 delete mode 100644 src/app/project/issue-detail/IssueSidebar.tsx
 delete mode 100644 src/app/project/issue-detail/ReactionBar.tsx
 delete mode 100644 src/app/project/skills/CreateSkillDialog.tsx
 delete mode 100644 src/app/project/skills/DeleteSkillDialog.tsx

diff --git a/src/app/project/board/BoardColumn.tsx b/src/app/project/board/BoardColumn.tsx
deleted file mode 100644
index aa32d39..0000000
--- a/src/app/project/board/BoardColumn.tsx
+++ /dev/null
@@ -1,96 +0,0 @@
-import { Plus, X, User } from "lucide-react";
-import { BOARD_PAGE } from "@/css/app/board-styles";
-import type { CardResponse } from "@/client/model";
-
-interface BoardColumnProps {
-  column: {
-    column: { id: string; name: string };
-    cards: CardResponse[];
-  };
-  allColumns: { column: { id: string; name: string } }[];
-  onAddCard: (columnId: string) => void;
-  onDeleteColumn: (columnId: string) => void;
-  onCardClick: (card: CardResponse) => void;
-  onMoveCard: (cardId: string, targetColumnId: string) => void;
-}
-
-export function BoardColumn({
-  column,
-  allColumns,
-  onAddCard,
-  onDeleteColumn,
-  onCardClick,
-  onMoveCard,
-}: BoardColumnProps) {
-  return (
-    <div className={BOARD_PAGE.column}>
-      <div className={BOARD_PAGE.columnHead}>
-        <div className={BOARD_PAGE.columnTitle}>
-          {column.column.name}
-          <span className={BOARD_PAGE.columnBadge}>{column.cards.length}</span>
-        </div>
-        <div className="flex items-center">
-          <button
-            className={BOARD_PAGE.iconBtn}
-            onClick={() => onAddCard(column.column.id)}
-          >
-            <Plus className="w-3.5 h-3.5" />
-          </button>
-          <button
-            className={BOARD_PAGE.iconBtn}
-            onClick={() => onDeleteColumn(column.column.id)}
-          >
-            <X className="w-3.5 h-3.5" />
-          </button>
-        </div>
-      </div>
-
-      <div className={BOARD_PAGE.columnBody}>
-        {column.cards.map((card) => (
-          <div
-            key={card.id}
-            className={BOARD_PAGE.card}
-            onClick={() => onCardClick(card)}
-          >
-            <h4 className={BOARD_PAGE.cardTitle}>{card.title}</h4>
-            {card.description && (
-              <p className="text-[11px] text-muted-foreground line-clamp-2 mb-2 leading-relaxed">
-                {card.description}
-              </p>
-            )}
-            <div className={BOARD_PAGE.cardFooter}>
-              <div className={BOARD_PAGE.cardMeta}>
-                <User className="w-3 h-3" />
-                <span>Assignee</span>
-              </div>
-              <div className="flex items-center gap-1 opacity-0 group-hover:opacity-100 transition-opacity">
-                {allColumns.map((targetCol) =>
-                  targetCol.column.id !== column.column.id ? (
-                    <button
-                      key={targetCol.column.id}
-                      onClick={(e) => {
-                        e.stopPropagation();
-                        onMoveCard(card.id, targetCol.column.id);
-                      }}
-                      className="p-1 rounded hover:bg-muted text-[9px] font-bold border border-border"
-                      title={`Move to ${targetCol.column.name}`}
-                    >
-                      {targetCol.column.name[0]}
-                    </button>
-                  ) : null,
-                )}
-              </div>
-            </div>
-          </div>
-        ))}
-        <button
-          className={BOARD_PAGE.addBtn}
-          onClick={() => onAddCard(column.column.id)}
-        >
-          <Plus className="w-3.5 h-3.5" />
-          Add card
-        </button>
-      </div>
-    </div>
-  );
-}
diff --git a/src/app/project/board/BoardHeader.tsx b/src/app/project/board/BoardHeader.tsx
deleted file mode 100644
index 23e734c..0000000
--- a/src/app/project/board/BoardHeader.tsx
+++ /dev/null
@@ -1,76 +0,0 @@
-import { useNavigate } from "react-router-dom"
-import { Plus, Trash2, ArrowLeft } from "lucide-react"
-import { Button } from "@/components/ui/button"
-
-interface BoardHeaderProps {
-  projectName: string
-  boardName: string
-  boardDescription?: string
-  onDeleteBoard: () => void
-  onAddColumn: () => void
-}
-
-export function BoardHeader({
-  projectName,
-  boardName,
-  boardDescription,
-  onDeleteBoard,
-  onAddColumn,
-}: BoardHeaderProps) {
-  const navigate = useNavigate()
-
-  return (
-    <div className="rounded-2xl border border-border/70 bg-card/80 p-5 shadow-sm backdrop-blur">
-      <div className="flex flex-col gap-4 lg:flex-row lg:items-start lg:justify-between">
-        <div className="min-w-0">
-          <div className="flex items-center gap-3">
-            <Button
-              type="button"
-              variant="ghost"
-              size="icon-sm"
-              className="rounded-full text-muted-foreground"
-              onClick={() => navigate(`/${projectName}/board`)}
-              title="Back to boards"
-            >
-              <ArrowLeft />
-            </Button>
-          </div>
-          <div className="mt-3 flex flex-wrap items-center gap-3">
-            <h1 className="truncate text-2xl font-semibold tracking-tight text-foreground">
-              {boardName}
-            </h1>
-            <span className="rounded-full bg-muted px-2.5 py-1 text-[11px] font-medium text-muted-foreground">
-              /{projectName}
-            </span>
-          </div>
-          {boardDescription && (
-            <p className="mt-2 max-w-3xl text-sm leading-6 text-muted-foreground">
-              {boardDescription}
-            </p>
-          )}
-        </div>
-        <div className="flex items-center gap-2">
-          <Button
-            onClick={onAddColumn}
-            variant="outline"
-            size="sm"
-            className="rounded-full"
-          >
-            <Plus />
-            Add column
-          </Button>
-          <Button
-            type="button"
-            variant="ghost"
-            size="icon-sm"
-            className="rounded-full text-destructive hover:bg-destructive/10 hover:text-destructive"
-            onClick={onDeleteBoard}
-            title="Delete board"
-          >
-            <Trash2 />
-          </Button>
-        </div>
-      </div>
-    </div>
-  )
-}
diff --git a/src/app/project/board/BoardListView.tsx b/src/app/project/board/BoardListView.tsx
deleted file mode 100644
index 0f6477f..0000000
--- a/src/app/project/board/BoardListView.tsx
+++ /dev/null
@@ -1,168 +0,0 @@
-import { useState } from "react";
-import { useNavigate } from "react-router-dom";
-import { useBoardsQuery } from "@/hooks/useBoardsQuery";
-import { useBoardOperations } from "@/hooks/useBoardOperations";
-import { LoadingState } from "@/components/ui/LoadingState";
-import { EmptyState } from "@/components/ui/EmptyState";
-import {
-  LayoutGrid,
-  Plus,
-  X,
-  Trash2,
-  Clock,
-} from "lucide-react";
-import { BOARD_PAGE } from "@/css/app/board-styles";
-
-interface BoardListViewProps {
-  projectName: string;
-}
-
-export function BoardListView({ projectName }: BoardListViewProps) {
-  const navigate = useNavigate();
-  const { data: boards = [], isLoading } = useBoardsQuery(projectName);
-  const ops = useBoardOperations(projectName);
-  const [isCreateBoardOpen, setIsCreateBoardOpen] = useState(false);
-  const [newBoard, setNewBoard] = useState({ name: "", description: "" });
-
-  const handleCreateBoard = async () => {
-    if (!newBoard.name.trim()) return;
-    await ops.createBoard.mutateAsync({
-      name: newBoard.name.trim(),
-      description: newBoard.description.trim() || undefined,
-    });
-    setIsCreateBoardOpen(false);
-    setNewBoard({ name: "", description: "" });
-  };
-
-  const handleDeleteBoard = async (id: string) => {
-    if (confirm("Are you sure you want to delete this board?")) {
-      await ops.deleteBoard.mutateAsync(id);
-    }
-  };
-
-  if (isLoading) return <LoadingState message="Loading boards..." />;
-
-  return (
-    <>
-      <div className={BOARD_PAGE.container}>
-        <div className={BOARD_PAGE.header}>
-          <div className={BOARD_PAGE.titleGroup}>
-            <h1 className={BOARD_PAGE.title}>Boards</h1>
-            <p className={BOARD_PAGE.description}>
-              Organize and track your project tasks
-            </p>
-          </div>
-          <button
-            onClick={() => setIsCreateBoardOpen(true)}
-            className="flex items-center gap-1.5 px-4 py-1.5 rounded-md bg-accent text-accent-fg hover:bg-accent/90 transition-colors text-[13px] font-medium shadow-sm"
-          >
-            <Plus className="w-4 h-4" />
-            New Board
-          </button>
-        </div>
-
-        {boards.length === 0 ? (
-          <EmptyState
-            icon={<LayoutGrid className="w-8 h-8 opacity-20" />}
-            title="No boards yet"
-            description="Create a Kanban board to start managing your workflow."
-          />
-        ) : (
-          <div className={BOARD_PAGE.grid}>
-            {boards.map((board) => (
-              <div
-                key={board.id}
-                onClick={() => navigate(`/${projectName}/board/${board.id}`)}
-                className={BOARD_PAGE.boardCard}
-              >
-                <div className={BOARD_PAGE.boardIcon}>
-                  <LayoutGrid className="w-5 h-5" />
-                </div>
-                <h3 className={BOARD_PAGE.boardName}>{board.name}</h3>
-                <p className={BOARD_PAGE.boardDesc}>
-                  {board.description || "No description provided."}
-                </p>
-                <div className={BOARD_PAGE.boardMeta}>
-                  <Clock className="w-3.5 h-3.5" />
-                  <span>
-                    Created {new Date(board.created_at).toLocaleDateString()}
-                  </span>
-                  <button
-                    className="ml-auto p-1 text-muted-foreground hover:text-red-500 transition-colors"
-                    onClick={(e) => {
-                      e.stopPropagation();
-                      handleDeleteBoard(board.id);
-                    }}
-                  >
-                    <Trash2 className="w-3.5 h-3.5" />
-                  </button>
-                </div>
-              </div>
-            ))}
-          </div>
-        )}
-      </div>
-
-      {/* Create Board Modal */}
-      {isCreateBoardOpen && (
-        <div className={BOARD_PAGE.modal}>
-          <div className={`${BOARD_PAGE.modalContent} max-w-md`}>
-            <div className={BOARD_PAGE.modalHead}>
-              <h3 className="font-bold text-[15px]">New Board</h3>
-              <button
-                className={BOARD_PAGE.iconBtn}
-                onClick={() => setIsCreateBoardOpen(false)}
-              >
-                <X className="w-5 h-5" />
-              </button>
-            </div>
-            <div className={BOARD_PAGE.modalBody}>
-              <div className="space-y-1.5">
-                <label className="text-[11px] font-bold text-muted-foreground uppercase tracking-widest">
-                  Board Name
-                </label>
-                <input
-                  autoFocus
-                  className="w-full text-[14px] px-3 py-2 rounded-md border border-border bg-muted/10 outline-none focus:ring-1 focus:ring-accent"
-                  placeholder="e.g. Sprint Planning"
-                  value={newBoard.name}
-                  onChange={(e) =>
-                    setNewBoard((b) => ({ ...b, name: e.target.value }))
-                  }
-                />
-              </div>
-              <div className="space-y-1.5">
-                <label className="text-[11px] font-bold text-muted-foreground uppercase tracking-widest">
-                  Description
-                </label>
-                <textarea
-                  className="w-full text-[14px] px-3 py-2 rounded-md border border-border bg-muted/10 outline-none focus:ring-1 focus:ring-accent min-h-[80px]"
-                  placeholder="Optional details..."
-                  value={newBoard.description}
-                  onChange={(e) =>
-                    setNewBoard((b) => ({ ...b, description: e.target.value }))
-                  }
-                />
-              </div>
-            </div>
-            <div className={BOARD_PAGE.modalFooter}>
-              <button
-                onClick={() => setIsCreateBoardOpen(false)}
-                className="px-4 py-1.5 rounded-md text-[13px] hover:bg-muted font-medium"
-              >
-                Cancel
-              </button>
-              <button
-                onClick={handleCreateBoard}
-                disabled={!newBoard.name.trim() || ops.createBoard.isPending}
-                className="px-4 py-1.5 rounded-md bg-accent text-accent-fg font-bold text-[13px] disabled:opacity-50"
-              >
-                Create Board
-              </button>
-            </div>
-          </div>
-        </div>
-      )}
-    </>
-  );
-}
diff --git a/src/app/project/board/BoardModals.tsx b/src/app/project/board/BoardModals.tsx
deleted file mode 100644
index ff2069f..0000000
--- a/src/app/project/board/BoardModals.tsx
+++ /dev/null
@@ -1,265 +0,0 @@
-import { X, Loader2, Save } from "lucide-react";
-import { BOARD_PAGE } from "@/css/app/board-styles";
-import type { CardResponse } from "@/client/model";
-import { t } from "@/i18n/T";
-
-interface BoardModalsProps {
-  // Column modal
-  isCreateColumnOpen: boolean;
-  newColumnName: string;
-  isCreatingColumn: boolean;
-  onNewColumnNameChange: (name: string) => void;
-  onCreateColumn: () => void;
-  onCloseColumn: () => void;
-  // Card modal
-  isCreateCardOpen: string | false;
-  newCardTitle: string;
-  newCardDescription: string;
-  isCreatingCard: boolean;
-  onNewCardTitleChange: (title: string) => void;
-  onNewCardDescriptionChange: (desc: string) => void;
-  onCreateCard: () => void;
-  onCloseCard: () => void;
-  // Card detail modal
-  selectedCard: CardResponse | null;
-  editCardTitle: string;
-  editCardDescription: string;
-  isUpdatingCard: boolean;
-  onEditTitleChange: (title: string) => void;
-  onEditDescriptionChange: (desc: string) => void;
-  onUpdateCard: () => void;
-  onDeleteCard: () => void;
-  onCloseDetail: () => void;
-}
-
-export function BoardModals({
-  isCreateColumnOpen,
-  newColumnName,
-  isCreatingColumn,
-  onNewColumnNameChange,
-  onCreateColumn,
-  onCloseColumn,
-  isCreateCardOpen,
-  newCardTitle,
-  newCardDescription,
-  isCreatingCard,
-  onNewCardTitleChange,
-  onNewCardDescriptionChange,
-  onCreateCard,
-  onCloseCard,
-  selectedCard,
-  editCardTitle,
-  editCardDescription,
-  isUpdatingCard,
-  onEditTitleChange,
-  onEditDescriptionChange,
-  onUpdateCard,
-  onDeleteCard,
-  onCloseDetail,
-}: BoardModalsProps) {
-  return (
-    <>
-      {/* Create Column Modal */}
-      {isCreateColumnOpen && (
-        <div className={BOARD_PAGE.modal}>
-          <div className={`${BOARD_PAGE.modalContent} max-w-md`}>
-            <div className={BOARD_PAGE.modalHead}>
-              <h3 className="font-bold text-[15px]">{t("project.board.add_column_title")}</h3>
-              <button className={BOARD_PAGE.iconBtn} onClick={onCloseColumn}>
-                <X className="w-5 h-5" />
-              </button>
-            </div>
-            <div className={BOARD_PAGE.modalBody}>
-              <div className="space-y-1.5">
-                <label className="text-[11px] font-bold text-muted-foreground uppercase tracking-widest">
-                  {t("project.board.column_name")}
-                </label>
-                <input
-                  autoFocus
-                  className="w-full text-[14px] px-3 py-2 rounded-md border border-border bg-muted/10 outline-none focus:ring-1 focus:ring-accent"
-                  placeholder={t("project.board.column_name_placeholder")}
-                  value={newColumnName}
-                  onChange={(e) => onNewColumnNameChange(e.target.value)}
-                />
-              </div>
-            </div>
-            <div className={BOARD_PAGE.modalFooter}>
-              <button
-                onClick={onCloseColumn}
-                className="px-4 py-1.5 rounded-md text-[13px] hover:bg-muted font-medium"
-              >
-                {t("common.actions.cancel")}
-              </button>
-              <button
-                onClick={onCreateColumn}
-                disabled={!newColumnName.trim() || isCreatingColumn}
-                className="px-4 py-1.5 rounded-md bg-accent text-accent-fg font-bold text-[13px] disabled:opacity-50"
-              >
-                {t("project.board.add_column")}
-              </button>
-            </div>
-          </div>
-        </div>
-      )}
-
-      {/* Create Card Modal */}
-      {isCreateCardOpen && (
-        <div className={BOARD_PAGE.modal}>
-          <div className={`${BOARD_PAGE.modalContent} max-w-md`}>
-            <div className={BOARD_PAGE.modalHead}>
-              <h3 className="font-bold text-[15px]">{t("project.board.new_card")}</h3>
-              <button className={BOARD_PAGE.iconBtn} onClick={onCloseCard}>
-                <X className="w-5 h-5" />
-              </button>
-            </div>
-            <div className={BOARD_PAGE.modalBody}>
-              <div className="space-y-1.5">
-                <label className="text-[11px] font-bold text-muted-foreground uppercase tracking-widest">
-                  {t("project.board.card_title")}
-                </label>
-                <input
-                  autoFocus
-                  className="w-full text-[14px] px-3 py-2 rounded-md border border-border bg-muted/10 outline-none focus:ring-1 focus:ring-accent"
-                  placeholder={t("project.board.card_title_placeholder")}
-                  value={newCardTitle}
-                  onChange={(e) => onNewCardTitleChange(e.target.value)}
-                />
-              </div>
-              <div className="space-y-1.5">
-                <label className="text-[11px] font-bold text-muted-foreground uppercase tracking-widest">
-                  {t("project.settings.general.description")}
-                </label>
-                <textarea
-                  className="w-full text-[14px] px-3 py-2 rounded-md border border-border bg-muted/10 outline-none focus:ring-1 focus:ring-accent min-h-[100px]"
-                  placeholder={t("project.board.card_desc_placeholder")}
-                  value={newCardDescription}
-                  onChange={(e) => onNewCardDescriptionChange(e.target.value)}
-                />
-              </div>
-            </div>
-            <div className={BOARD_PAGE.modalFooter}>
-              <button
-                onClick={onCloseCard}
-                className="px-4 py-1.5 rounded-md text-[13px] hover:bg-muted font-medium"
-              >
-                {t("common.actions.cancel")}
-              </button>
-              <button
-                onClick={onCreateCard}
-                disabled={!newCardTitle.trim() || isCreatingCard}
-                className="px-4 py-1.5 rounded-md bg-accent text-accent-fg font-bold text-[13px] disabled:opacity-50"
-              >
-                {t("project.board.add_card")}
-              </button>
-            </div>
-          </div>
-        </div>
-      )}
-
-      {/* Card Detail & Edit Modal */}
-      {selectedCard && (
-        <div className={BOARD_PAGE.modal}>
-          <div
-            className={`${BOARD_PAGE.modalContent} max-w-7xl min-h-[700px] flex flex-col`}
-          >
-            <div className={BOARD_PAGE.modalHead}>
-              <div className="flex items-center gap-2 text-muted-foreground">
-                <span className="text-[12px] font-medium uppercase tracking-wider">
-                  {t("project.board.card_detail_title")}
-                </span>
-              </div>
-              <div className="flex items-center gap-1">
-                <button
-                  className={BOARD_PAGE.iconBtn}
-                  onClick={onDeleteCard}
-                  title={t("project.board.delete_card")}
-                >
-                  <X className="w-4 h-4 text-red-500" />
-                </button>
-                <button className={BOARD_PAGE.iconBtn} onClick={onCloseDetail}>
-                  <X className="w-5 h-5" />
-                </button>
-              </div>
-            </div>
-
-            <div className={`${BOARD_PAGE.modalBody} flex-1 overflow-y-auto`}>
-              <div className="flex gap-12">
-                {/* Main Content */}
-                <div className="flex-1 space-y-10">
-                  <div className="space-y-2">
-                    <label className="text-[11px] font-bold text-muted-foreground uppercase flex items-center gap-2 tracking-[0.2em] ml-1">
-                      {t("project.board.card_detail_title")}
-                    </label>
-                    <input
-                      className="w-full text-[28px] font-bold px-1 py-1 rounded-md border-b border-transparent hover:border-border focus:border-accent bg-transparent outline-none transition-all placeholder:opacity-30"
-                      value={editCardTitle}
-                      onChange={(e) => onEditTitleChange(e.target.value)}
-                      placeholder={t("project.board.card_detail_title")}
-                    />
-                  </div>
-
-                  <div className="space-y-2">
-                    <label className="text-[11px] font-bold text-muted-foreground uppercase flex items-center gap-2 tracking-[0.2em] ml-1">
-                      {t("project.settings.general.description")}
-                    </label>
-                    <textarea
-                      className="w-full text-[16px] px-6 py-6 rounded-2xl border border-border bg-muted/5 focus:bg-background outline-none focus:ring-2 focus:ring-accent/20 focus:border-accent min-h-[400px] leading-relaxed transition-all shadow-inner"
-                      placeholder={t("project.board.card_detail_desc_placeholder")}
-                      value={editCardDescription}
-                      onChange={(e) => onEditDescriptionChange(e.target.value)}
-                    />
-                  </div>
-                </div>
-
-                {/* Sidebar Attributes */}
-                <div className="w-60 space-y-8 pt-4 shrink-0">
-                  <div className="pt-8 border-t border-border/50 space-y-3 px-1">
-                    <div className="flex items-center justify-between text-[11px]">
-                      <span className="text-muted-foreground">{t("project.board.id")}</span>
-                      <span className="text-foreground font-mono opacity-60">
-                        #{selectedCard.id.substring(0, 6)}
-                      </span>
-                    </div>
-                    <div className="flex items-center justify-between text-[11px]">
-                      <span className="text-muted-foreground">{t("project.board.created")}</span>
-                      <span className="text-foreground font-medium">
-                        {new Date(selectedCard.created_at).toLocaleDateString()}
-                      </span>
-                    </div>
-                    <div className="flex items-center justify-between text-[11px]">
-                      <span className="text-muted-foreground">{t("project.board.updated")}</span>
-                      <span className="text-foreground font-medium">
-                        {new Date(selectedCard.updated_at).toLocaleDateString()}
-                      </span>
-                    </div>
-                  </div>
-                </div>
-              </div>
-            </div>
-
-            <div className={BOARD_PAGE.modalFooter}>
-              <button
-                onClick={onCloseDetail}
-                className="px-5 py-2 rounded-lg text-[13px] font-semibold text-muted-foreground hover:bg-muted transition-all"
-              >
-                {t("common.actions.cancel")}
-              </button>
-              <button
-                onClick={onUpdateCard}
-                disabled={!editCardTitle.trim() || isUpdatingCard}
-                className="flex items-center gap-2 px-6 py-2 rounded-lg bg-accent text-accent-fg font-bold text-[13px] shadow-sm disabled:opacity-50"
-              >
-                {isUpdatingCard ? (
-                  <Loader2 className="w-4 h-4 animate-spin" />
-                ) : (
-                  <Save className="w-4 h-4" />
-                )}
-                {t("common.actions.save_changes")}
-              </button>
-            </div>
-          </div>
-        </div>
-      )}
-    </>
-  );
-}
diff --git a/src/app/project/board/KanbanBoard.tsx b/src/app/project/board/KanbanBoard.tsx
deleted file mode 100644
index aebb55a..0000000
--- a/src/app/project/board/KanbanBoard.tsx
+++ /dev/null
@@ -1,181 +0,0 @@
-import { useState } from "react";
-import { useNavigate } from "react-router-dom";
-import { useBoardDetailQuery } from "@/hooks/useBoardsQuery";
-import { useBoardOperations } from "@/hooks/useBoardOperations";
-import { LoadingState } from "@/components/ui/LoadingState";
-import { ErrorState } from "@/components/ui/ErrorState";
-import { AlertCircle, Plus } from "lucide-react";
-import type { CardResponse } from "@/client/model";
-import { BOARD_PAGE } from "@/css/app/board-styles";
-import { BoardHeader } from "./BoardHeader";
-import { BoardColumn } from "./BoardColumn";
-import { BoardModals } from "./BoardModals";
-
-interface KanbanBoardProps {
-  projectName: string;
-  boardId: string;
-}
-
-export function KanbanBoard({ projectName, boardId }: KanbanBoardProps) {
-  const navigate = useNavigate();
-  const { data: boardDetail, isLoading, refetch } = useBoardDetailQuery(projectName, boardId);
-  const ops = useBoardOperations(projectName);
-
-  const [isCreateColumnOpen, setIsCreateColumnOpen] = useState(false);
-  const [isCreateCardOpen, setIsCreateCardOpen] = useState<string | false>(false);
-  const [selectedCard, setSelectedCard] = useState<CardResponse | null>(null);
-  const [newColumnName, setNewColumnName] = useState("");
-  const [newCardTitle, setNewCardTitle] = useState("");
-  const [newCardDescription, setNewCardDescription] = useState("");
-  const [editCardTitle, setEditCardTitle] = useState("");
-  const [editCardDescription, setEditCardDescription] = useState("");
-
-  
-  const handleCreateColumn = async () => {
-    if (!newColumnName.trim()) return;
-    await ops.createColumn.mutateAsync({
-      boardId,
-      params: { name: newColumnName.trim(), position: boardDetail?.columns.length || 0 },
-    });
-    setIsCreateColumnOpen(false);
-    setNewColumnName("");
-    refetch();
-  };
-
-  const handleCreateCard = async () => {
-    if (!newCardTitle.trim() || !isCreateCardOpen) return;
-    await ops.createCard.mutateAsync({
-      column_id: isCreateCardOpen,
-      title: newCardTitle.trim(),
-      description: newCardDescription.trim() || undefined,
-    });
-    setIsCreateCardOpen(false);
-    setNewCardTitle("");
-    setNewCardDescription("");
-    refetch();
-  };
-
-  const handleUpdateCard = async () => {
-    if (!selectedCard || !editCardTitle.trim()) return;
-    await ops.updateCard.mutateAsync({
-      id: selectedCard.id,
-      params: { title: editCardTitle.trim(), description: editCardDescription.trim() || null },
-    });
-    setSelectedCard(null);
-    refetch();
-  };
-
-  const handleMoveCard = async (cardId: string, targetColumnId: string) => {
-    await ops.moveCard.mutateAsync({
-      id: cardId,
-      params: { target_column_id: targetColumnId, position: 0 },
-    });
-    refetch();
-  };
-
-  const handleDeleteBoard = async () => {
-    if (confirm("Are you sure you want to delete this board?")) {
-      await ops.deleteBoard.mutateAsync(boardId);
-      navigate(`/${projectName}/board`);
-    }
-  };
-
-  const handleDeleteCard = async () => {
-    if (!selectedCard) return;
-    if (confirm("Delete this card?")) {
-      await ops.deleteCard.mutateAsync(selectedCard.id);
-      setSelectedCard(null);
-      refetch();
-    }
-  };
-
-  if (isLoading) return <LoadingState message="Opening board..." />;
-  if (!boardDetail)
-    return (
-      <ErrorState
-        title="Board not found"
-        message="This board might have been deleted."
-        onRetry={() => navigate(`/${projectName}/board`)}
-      />
-    );
-
-  return (
-    <>
-      <div className={BOARD_PAGE.container}>
-        <BoardHeader
-          projectName={projectName}
-          boardName={boardDetail.board.name}
-          boardDescription={boardDetail.board.description ?? undefined}
-          onDeleteBoard={handleDeleteBoard}
-          onAddColumn={() => setIsCreateColumnOpen(true)}
-        />
-
-        <div className={BOARD_PAGE.kanbanWrapper}>
-          {boardDetail.columns.map((col) => (
-            <BoardColumn
-              key={col.column.id}
-              column={col}
-              allColumns={boardDetail.columns}
-              onAddCard={(columnId) => setIsCreateCardOpen(columnId)}
-              onDeleteColumn={(columnId) => {
-                if (confirm("Delete column?")) {
-                  ops.deleteColumn.mutate(columnId);
-                  refetch();
-                }
-              }}
-              onCardClick={(card) => {
-                setSelectedCard(card);
-                setEditCardTitle(card.title);
-                setEditCardDescription(card.description || "");
-              }}
-              onMoveCard={handleMoveCard}
-            />
-          ))}
-
-          {boardDetail.columns.length === 0 && (
-            <div className="flex-1 flex flex-col items-center justify-center border-2 border-dashed border-border/40 rounded-2xl bg-muted/5 min-h-[300px]">
-              <AlertCircle className="w-10 h-10 opacity-10 mb-4" />
-              <h4 className="text-[14px] font-bold text-muted-foreground">Empty Board</h4>
-              <p className="text-[12px] text-muted-foreground/60 mt-1 mb-6 text-center max-w-[240px]">
-                Add your first column (e.g. To Do, Doing, Done) to start tracking work.
-              </p>
-              <button
-                onClick={() => setIsCreateColumnOpen(true)}
-                className="flex items-center gap-1.5 px-5 py-2 rounded-lg bg-accent text-accent-fg font-bold text-[13px]"
-              >
-                <Plus className="w-4 h-4" />
-                Add First Column
-              </button>
-            </div>
-          )}
-        </div>
-
-        <BoardModals
-          isCreateColumnOpen={isCreateColumnOpen}
-          newColumnName={newColumnName}
-          isCreatingColumn={ops.createColumn.isPending}
-          onNewColumnNameChange={setNewColumnName}
-          onCreateColumn={handleCreateColumn}
-          onCloseColumn={() => { setIsCreateColumnOpen(false); setNewColumnName(""); }}
-          isCreateCardOpen={isCreateCardOpen}
-          newCardTitle={newCardTitle}
-          newCardDescription={newCardDescription}
-          isCreatingCard={ops.createCard.isPending}
-          onNewCardTitleChange={setNewCardTitle}
-          onNewCardDescriptionChange={setNewCardDescription}
-          onCreateCard={handleCreateCard}
-          onCloseCard={() => { setIsCreateCardOpen(false); setNewCardTitle(""); setNewCardDescription(""); }}
-          selectedCard={selectedCard}
-          editCardTitle={editCardTitle}
-          editCardDescription={editCardDescription}
-          isUpdatingCard={ops.updateCard.isPending}
-          onEditTitleChange={setEditCardTitle}
-          onEditDescriptionChange={setEditCardDescription}
-          onUpdateCard={handleUpdateCard}
-          onDeleteCard={handleDeleteCard}
-          onCloseDetail={() => setSelectedCard(null)}
-        />
-      </div>
-    </>
-  );
-}
diff --git a/src/app/project/channel/RoomSettingsModal.tsx b/src/app/project/channel/RoomSettingsModal.tsx
deleted file mode 100644
index 23d277f..0000000
--- a/src/app/project/channel/RoomSettingsModal.tsx
+++ /dev/null
@@ -1,219 +0,0 @@
-import { useEffect, useState } from "react";
-import { Settings, Trash2, Loader2, Globe, Lock } from "lucide-react";
-import { Sheet, SheetContent, SheetHeader, SheetTitle } from "@/components/ui/sheet";
-import { Button } from "@/components/ui/button";
-import { Input } from "@/components/ui/input";
-import { Label } from "@/components/ui/label";
-import { Switch } from "@/components/ui/switch";
-import { useOptionalRoom } from "@/contexts/room";
-import { AiSettings } from "./settings/AiSettings";
-import { roomUpdate, roomDelete } from "@/client/api";
-import { toast } from "sonner";
-import { useParams, useNavigate } from "react-router-dom";
-import { useCreateCategoryMutation, useInvalidateRooms, useRoomsQuery } from "@/hooks/useRoomsQuery";
-import { Select, SelectContent, SelectGroup, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select";
-
-interface RoomSettingsModalProps {
-  open: boolean;
-  onOpenChange: (open: boolean) => void;
-}
-
-export function RoomSettingsModal({ open, onOpenChange }: RoomSettingsModalProps) {
-  const roomCtx = useOptionalRoom();
-  const currentRoom = roomCtx?.currentRoom ?? null;
-  const setCurrentRoom = roomCtx?.setCurrentRoom ?? (() => {});
-  const { projectName } = useParams<{ projectName: string }>();
-  const navigate = useNavigate();
-  const { data: roomsData } = useRoomsQuery(projectName);
-  const createCategory = useCreateCategoryMutation(projectName);
-  const invalidateRooms = useInvalidateRooms();
-  const categories = roomsData?.categories ?? [];
-
-  const [name, setName] = useState("");
-  const [isPublic, setIsPublic] = useState(true);
-  const [category, setCategory] = useState("none");
-  const [newCategory, setNewCategory] = useState("");
-  const [isSaving, setIsSaving] = useState(false);
-
-  useEffect(() => {
-    if (!open || !currentRoom) return;
-    setName(currentRoom.room_name);
-    setIsPublic(currentRoom.public ?? true);
-    setCategory(currentRoom.category ?? "none");
-    setNewCategory("");
-  }, [currentRoom, open]);
-
-  const handleOpenChange = (newOpen: boolean) => {
-    onOpenChange(newOpen);
-    if (newOpen && currentRoom) {
-      setName(currentRoom.room_name);
-      setIsPublic(currentRoom.public ?? true);
-      setCategory(currentRoom.category ?? "none");
-      setNewCategory("");
-    }
-  };
-
-  const handleUpdateRoom = async () => {
-    if (!currentRoom || !name.trim()) return;
-    setIsSaving(true);
-    try {
-      let categoryId: string | null = category === "none" ? null : category;
-      if (category === "new") {
-        if (!newCategory.trim()) {
-          toast.error("Enter a group name");
-          return;
-        }
-        const createdCategory = await createCategory.mutateAsync({
-          name: newCategory.trim(),
-          position: categories.length,
-        });
-        categoryId = createdCategory?.id ?? null;
-      }
-      await roomUpdate(currentRoom.id, { room_name: name, room_public: isPublic, category: categoryId });
-      setCurrentRoom({ ...currentRoom, room_name: name, public: isPublic, category: categoryId });
-      if (projectName) invalidateRooms(projectName);
-      toast.success("Room settings updated");
-    } catch {
-      toast.error("Failed to update room");
-    } finally {
-      setIsSaving(false);
-    }
-  };
-
-  const handleDeleteRoom = async () => {
-    if (!currentRoom) return;
-    if (!confirm("Are you sure you want to delete this room? This action cannot be undone.")) return;
-
-    try {
-      await roomDelete(currentRoom.id);
-      toast.success("Room deleted");
-      onOpenChange(false);
-      navigate(`/${projectName}/channel`);
-    } catch {
-      toast.error("Failed to delete room");
-    }
-  };
-
-  return (
-    <Sheet open={open} onOpenChange={handleOpenChange}>
-      <SheetContent side="right" className="w-full sm:max-w-lg p-0 flex flex-col" style={{ backgroundColor: "var(--surface-ground)" }}>
-        <SheetHeader className="p-6 pb-0 shrink-0">
-          <SheetTitle className="flex items-center gap-2" style={{ color: "var(--text-primary)" }}>
-            <Settings className="w-5 h-5" />
-            Room Settings
-          </SheetTitle>
-        </SheetHeader>
-
-        <div className="flex-1 overflow-y-auto p-6 space-y-8">
-          {/* General Section */}
-          <section>
-            <h3 className="text-sm font-semibold uppercase tracking-wider mb-4" style={{ color: "var(--text-muted)" }}>
-              General
-            </h3>
-            <div className="space-y-4">
-              <div className="space-y-2">
-                <Label htmlFor="name" style={{ color: "var(--text-secondary)" }}>
-                  Room Name
-                </Label>
-                <Input
-                  id="name"
-                  value={name}
-                  onChange={(e) => setName(e.target.value)}
-                  placeholder="e.g. general"
-                />
-              </div>
-              <div
-                className="flex items-center justify-between p-3 rounded-lg border"
-                style={{ borderColor: "var(--border-subtle)" }}
-              >
-                <div className="space-y-0.5">
-                  <div className="flex items-center gap-2">
-                    {isPublic ? (
-                      <Globe className="w-4 h-4" style={{ color: "var(--accent)" }} />
-                    ) : (
-                      <Lock className="w-4 h-4" style={{ color: "var(--text-muted)" }} />
-                    )}
-                    <Label className="text-sm font-medium" style={{ color: "var(--text-primary)" }}>
-                      Public Room
-                    </Label>
-                  </div>
-                  <p className="text-xs" style={{ color: "var(--text-muted)" }}>
-                    Anyone in the project can join this room.
-                  </p>
-                </div>
-                <Switch checked={isPublic} onCheckedChange={setIsPublic} />
-              </div>
-              <div className="space-y-2">
-                <Label style={{ color: "var(--text-secondary)" }}>
-                  Group
-                </Label>
-                <Select value={category} onValueChange={setCategory}>
-                  <SelectTrigger>
-                    <SelectValue />
-                  </SelectTrigger>
-                  <SelectContent>
-                    <SelectGroup>
-                      <SelectItem value="none">No group</SelectItem>
-                      {categories.map((item) => (
-                        <SelectItem key={item.id} value={item.id}>{item.name}</SelectItem>
-                      ))}
-                      <SelectItem value="new">Create new group</SelectItem>
-                    </SelectGroup>
-                  </SelectContent>
-                </Select>
-              </div>
-              {category === "new" && (
-                <div className="space-y-2">
-                  <Label htmlFor="new-category" style={{ color: "var(--text-secondary)" }}>
-                    New Group Name
-                  </Label>
-                  <Input
-                    id="new-category"
-                    value={newCategory}
-                    onChange={(e) => setNewCategory(e.target.value)}
-                    placeholder="e.g. Engineering"
-                  />
-                </div>
-              )}
-            </div>
-          </section>
-
-          {/* AI Agents */}
-          {currentRoom && <AiSettings roomId={currentRoom.id} />}
-
-          {/* Danger Zone */}
-          <section>
-            <h4 className="text-sm font-semibold mb-3" style={{ color: "var(--destructive)" }}>
-              Danger Zone
-            </h4>
-            <Button
-              variant="destructive"
-              className="w-full justify-start gap-2"
-              onClick={handleDeleteRoom}
-            >
-              <Trash2 className="w-4 h-4" />
-              Delete Room
-            </Button>
-          </section>
-        </div>
-
-        <div
-          className="p-4 shrink-0 flex justify-end gap-2"
-          style={{ borderTop: "1px solid var(--border-subtle)", backgroundColor: "var(--surface-ground)" }}
-        >
-          <Button variant="ghost" onClick={() => onOpenChange(false)}>
-            Cancel
-          </Button>
-          <Button
-            disabled={isSaving || !name.trim()}
-            onClick={handleUpdateRoom}
-            style={{ backgroundColor: "var(--accent)", color: "var(--accent-fg)" }}
-          >
-            {isSaving ? <Loader2 className="w-4 h-4 animate-spin mr-2" /> : null}
-            Save Changes
-          </Button>
-        </div>
-      </SheetContent>
-    </Sheet>
-  );
-}
diff --git a/src/app/project/channel/settings/AiSettings.tsx b/src/app/project/channel/settings/AiSettings.tsx
deleted file mode 100644
index 7d1cc17..0000000
--- a/src/app/project/channel/settings/AiSettings.tsx
+++ /dev/null
@@ -1,585 +0,0 @@
-import { Loader2, Shield, Search, Check } from "lucide-react";
-import { Button } from "@/components/ui/button";
-import { aiList, aiUpsert, aiDelete, modelCatalog } from "@/client/api";
-import type { RoomAiUpsertRequest, ModelWithPricingResponse, RoomAiResponse } from "@/client/model";
-import { getModelIcon } from "@/lib/icons/modelIcons";
-import { Plus, Trash2, Settings, X as XIcon } from "lucide-react";
-import {
-  Dialog,
-  DialogContent,
-  DialogTitle,
-} from "@/components/ui/dialog";
-import { Label } from "@/components/ui/label";
-import { Switch } from "@/components/ui/switch";
-import { useQuery } from "@tanstack/react-query";
-import { useState, useEffect } from "react";
-
-const AVATAR_COLORS = [
-  "#6366f1", "#8b5cf6", "#d946ef", "#ec4899", "#f43f5e",
-  "#ef4444", "#f97316", "#eab308", "#22c55e", "#14b8a6",
-  "#06b6d4", "#3b82f6", "#2563eb", "#7c3aed", "#c026d3",
-];
-
-function hashColor(str: string): string {
-  let hash = 0;
-  for (let i = 0; i < str.length; i++) {
-    hash = str.charCodeAt(i) + ((hash << 5) - hash);
-  }
-  return AVATAR_COLORS[Math.abs(hash) % AVATAR_COLORS.length];
-}
-
-function ModelAvatar({ modelName, size = 36 }: { modelName: string; size?: number }) {
-  const Icon = getModelIcon(modelName);
-  if (Icon) {
-    return <Icon.Avatar size={size} />;
-  }
-  return (
-    <div
-      className="rounded-lg flex items-center justify-center font-bold shrink-0"
-      style={{
-        width: size,
-        height: size,
-        backgroundColor: hashColor(modelName),
-        fontSize: Math.max(10, size * 0.35),
-        color: "var(--text-inverse)",
-      }}
-    >
-      {modelName[0]?.toUpperCase() || "?"}
-    </div>
-  );
-}
-
-interface AiSettingsProps {
-  roomId: string;
-  onAiListChange?: () => void;
-}
-
-export function AiSettings({ roomId, onAiListChange }: AiSettingsProps) {
-  const [roomAis, setRoomAis] = useState<RoomAiResponse[]>([]);
-  const [isLoadingAi, setIsLoadingAi] = useState(true);
-  const [showAddAi, setShowAddAi] = useState(false);
-  const [selectedModelFull, setSelectedModelFull] = useState<ModelWithPricingResponse | null>(null);
-  const [aiParams, setAiParams] = useState({
-    temperature: 0.7,
-    max_tokens: 2000,
-    stream: true,
-    system_prompt: "",
-  });
-  const [isAddingAi, setIsAddingAi] = useState(false);
-  const [modelSearch, setModelSearch] = useState("");
-
-  const { data: catalog, isLoading: isLoadingCatalog } = useQuery({
-    queryKey: ["modelCatalog"],
-    queryFn: async () => {
-      const res = await modelCatalog();
-      return (res.data.data as unknown as { data: ModelWithPricingResponse[] }).data;
-    },
-    enabled: showAddAi,
-  });
-
-  const models = Array.isArray(catalog) ? catalog : [];
-  const filteredCatalog = modelSearch.trim()
-    ? models.filter(
-        (m) =>
-          m.name.toLowerCase().includes(modelSearch.toLowerCase()) ||
-          m.provider_id.toLowerCase().includes(modelSearch.toLowerCase())
-      )
-    : models;
-
-  const fetchRoomAis = async () => {
-    setIsLoadingAi(true);
-    try {
-      const res = await aiList(roomId);
-      setRoomAis(res.data.data || []);
-    } catch (err) {
-      console.error("Failed to fetch room AIs", err);
-    } finally {
-      setIsLoadingAi(false);
-    }
-  };
-
-  useEffect(() => {
-    aiList(roomId)
-      .then((res) => setRoomAis(res.data.data || []))
-      .catch((err) => console.error("Failed to fetch room AIs", err))
-      .finally(() => setIsLoadingAi(false));
-  }, [roomId]);
-
-  const handleAddAi = async () => {
-    if (!selectedModelFull) return;
-    setIsAddingAi(true);
-    try {
-      const req: RoomAiUpsertRequest = {
-        model: selectedModelFull.id,
-        stream: aiParams.stream,
-        temperature: aiParams.temperature,
-        max_tokens: aiParams.max_tokens,
-        system_prompt: aiParams.system_prompt || undefined,
-      };
-      await aiUpsert(roomId, req);
-      fetchRoomAis();
-      setShowAddAi(false);
-      setSelectedModelFull(null);
-      onAiListChange?.();
-    } catch (err) {
-      console.error("Failed to add AI model", err);
-    } finally {
-      setIsAddingAi(false);
-    }
-  };
-
-  const handleRemoveAi = async (modelId: string) => {
-    try {
-      await aiDelete(roomId, modelId);
-      fetchRoomAis();
-      onAiListChange?.();
-    } catch (err) {
-      console.error("Failed to remove AI agent", err);
-    }
-  };
-
-  return (
-    <>
-      <section>
-        <div className="flex items-center justify-between mb-4">
-          <h3 className="text-sm font-semibold uppercase tracking-wider" style={{ color: "var(--text-muted)" }}>
-            AI Agents
-          </h3>
-          <Button
-            size="sm"
-            variant="outline"
-            className="gap-1.5 h-8"
-            onClick={() => setShowAddAi(true)}
-          >
-            <Plus className="w-3.5 h-3.5" /> Add AI
-          </Button>
-        </div>
-
-        {isLoadingAi ? (
-          <div className="flex justify-center py-8">
-            <Loader2 className="w-6 h-6 animate-spin" style={{ color: "var(--text-muted)" }} />
-          </div>
-        ) : roomAis.length === 0 ? (
-          <div className="text-center py-10 border-2 border-dashed rounded-xl" style={{ borderColor: "var(--border-subtle)" }}>
-            <Shield className="w-8 h-8 mx-auto mb-2" style={{ color: "var(--text-muted)", opacity: 0.3 }} />
-            <p className="text-sm" style={{ color: "var(--text-muted)" }}>
-              No AI agents active in this room
-            </p>
-          </div>
-        ) : (
-          <div className="grid gap-2">
-            {roomAis.map((ai) => (
-              <div
-                key={ai.model}
-                className="flex items-center justify-between p-3 rounded-lg border group"
-                style={{ borderColor: "var(--border-subtle)" }}
-              >
-                <div className="flex items-center gap-3">
-                  <ModelAvatar modelName={ai.model_name || ai.model} size={36} />
-                  <div>
-                    <div
-                      className="font-semibold"
-                      style={{ color: "var(--text-primary)", fontSize: "13px" }}
-                    >
-                      {ai.model_name || "Unknown Model"}
-                    </div>
-                    <div
-                      className="line-clamp-1"
-                      style={{ color: "var(--text-muted)", fontSize: "11px" }}
-                    >
-                      {ai.model}
-                    </div>
-                  </div>
-                </div>
-                <button
-                  className="h-8 w-8 rounded-md flex items-center justify-center transition-colors opacity-0 group-hover:opacity-100"
-                  style={{ color: "var(--text-muted)" }}
-                  onMouseEnter={(e) => {
-                    e.currentTarget.style.color = "var(--destructive)";
-                  }}
-                  onMouseLeave={(e) => {
-                    e.currentTarget.style.color = "var(--text-muted)";
-                  }}
-                  onClick={() => handleRemoveAi(ai.model)}
-                >
-                  <Trash2 className="w-4 h-4" />
-                </button>
-              </div>
-            ))}
-          </div>
-        )}
-      </section>
-
-      <Dialog
-        open={showAddAi}
-        onOpenChange={(open) => {
-          setShowAddAi(open);
-          if (!open) {
-            setSelectedModelFull(null);
-            setModelSearch("");
-          }
-        }}
-      >
-        <DialogContent
-          showCloseButton={false}
-          className="!max-w-[80vw] w-[80vw] h-[85vh] !max-h-[85vh] !gap-0 !p-0 overflow-hidden !rounded-xl"
-          style={{ backgroundColor: "var(--surface-ground)" }}
-        >
-          <DialogTitle className="sr-only">添加 AI 模型</DialogTitle>
-
-          <div className="flex h-full w-full">
-            {/* ── Left Sidebar: Model List ── */}
-            <div
-              className="w-[280px] shrink-0 flex flex-col h-full"
-              style={{ borderRight: "1px solid var(--border-subtle)" }}
-            >
-              <div className="px-4 pt-6 pb-4">
-                <div className="flex items-center justify-between">
-                  <h3
-                    className="text-[13px] font-semibold uppercase tracking-wider"
-                    style={{ color: "var(--text-muted)" }}
-                  >
-                    选择模型
-                  </h3>
-                  <button
-                    onClick={() => {
-                      setShowAddAi(false);
-                      setSelectedModelFull(null);
-                    }}
-                    className="p-1 rounded-md transition-colors"
-                    style={{ color: "var(--text-secondary)" }}
-                  >
-                    <XIcon className="w-4 h-4" />
-                  </button>
-                </div>
-              </div>
-
-              {/* Search */}
-              <div className="px-3 pb-3">
-                <div className="relative">
-                  <Search
-                    className="absolute left-2.5 top-1/2 -translate-y-1/2 w-3.5 h-3.5"
-                    style={{ color: "var(--text-muted)" }}
-                  />
-                  <input
-                    type="text"
-                    placeholder="搜索模型..."
-                    value={modelSearch}
-                    onChange={(e) => setModelSearch(e.target.value)}
-                    className="w-full h-9 pl-8 pr-3 text-sm rounded-lg outline-none"
-                    style={{
-                      backgroundColor: "var(--input-bg)",
-                      color: "var(--text-primary)",
-                      border: "1px solid var(--border-subtle)",
-                    }}
-                  />
-                </div>
-              </div>
-
-              {/* Model list */}
-              <div className="flex-1 overflow-y-auto px-2">
-                {isLoadingCatalog ? (
-                  <div className="flex justify-center py-8">
-                    <Loader2 className="w-5 h-5 animate-spin" style={{ color: "var(--text-muted)" }} />
-                  </div>
-                ) : filteredCatalog.length === 0 ? (
-                  <div className="text-center py-8 text-xs" style={{ color: "var(--text-muted)" }}>
-                    暂无模型
-                  </div>
-                ) : (
-                  filteredCatalog.map((model) => {
-                    const isActive = selectedModelFull?.id === model.id;
-                    return (
-                      <button
-                        key={model.id}
-                        onClick={() => {
-                          setSelectedModelFull(model);
-                        }}
-                        className="w-full text-left px-3 py-2.5 rounded-lg transition-colors flex items-center gap-3 text-sm mb-0.5"
-                        style={{
-                          backgroundColor: isActive ? "var(--hover-bg-strong)" : "transparent",
-                          color: "var(--text-secondary)",
-                        }}
-                      >
-                        <ModelAvatar modelName={model.name} size={28} />
-                        <div className="min-w-0 flex-1">
-                          <div className="flex items-center gap-1.5">
-                            <span
-                              className="truncate font-medium"
-                              style={{ color: "var(--text-primary)" }}
-                            >
-                              {model.name}
-                            </span>
-                            {isActive && (
-                              <Check className="w-3.5 h-3.5 shrink-0" style={{ color: "var(--accent)" }} />
-                            )}
-                          </div>
-                          <div
-                            className="text-[11px] truncate"
-                            style={{ color: "var(--text-muted)" }}
-                          >
-                            {model.provider_id}
-                          </div>
-                        </div>
-                      </button>
-                    );
-                  })
-                )}
-              </div>
-            </div>
-
-            {/* ── Right Panel: Model Details & Config ── */}
-            <div className="flex-1 flex flex-col min-w-0 h-full">
-              <div className="flex-1 overflow-y-auto">
-                <div className="max-w-[660px] px-10 py-8">
-                  {!selectedModelFull ? (
-                    <div className="flex flex-col items-center justify-center h-full min-h-[400px]">
-                      <Shield
-                        className="w-12 h-12 mb-4"
-                        style={{ color: "var(--text-muted)", opacity: 0.2 }}
-                      />
-                      <p className="text-sm" style={{ color: "var(--text-muted)" }}>
-                        从左侧选择一个 AI 模型查看详情
-                      </p>
-                    </div>
-                  ) : (
-                    <div className="space-y-6">
-                      {/* Model Info Card */}
-                      <div
-                        className="flex items-center gap-4 p-5 rounded-xl border"
-                        style={{ borderColor: "var(--border-subtle)" }}
-                      >
-                        <ModelAvatar modelName={selectedModelFull.name} size={56} />
-                        <div className="min-w-0">
-                          <h3
-                            className="text-lg font-semibold"
-                            style={{ color: "var(--text-primary)" }}
-                          >
-                            {selectedModelFull.name}
-                          </h3>
-                          <div
-                            className="text-sm font-mono"
-                            style={{ color: "var(--text-muted)" }}
-                          >
-                            {selectedModelFull.provider_id}
-                          </div>
-                          <div className="flex gap-1.5 mt-2">
-                            <span
-                              className="px-2 py-0.5 rounded text-[11px] font-medium"
-                              style={{
-                                backgroundColor: "var(--accent-muted)",
-                                color: "var(--accent)",
-                              }}
-                            >
-                              {selectedModelFull.capability}
-                            </span>
-                            <span
-                              className="px-2 py-0.5 rounded text-[11px] font-medium"
-                              style={{
-                                backgroundColor: "var(--interactive)",
-                                color: "var(--text-muted)",
-                              }}
-                            >
-                              {selectedModelFull.context_length.toLocaleString()} ctx
-                            </span>
-                            {selectedModelFull.max_output_tokens && (
-                              <span
-                                className="px-2 py-0.5 rounded text-[11px] font-medium"
-                                style={{
-                                  backgroundColor: "var(--interactive)",
-                                  color: "var(--text-muted)",
-                                }}
-                              >
-                                最大输出 {selectedModelFull.max_output_tokens.toLocaleString()}
-                              </span>
-                            )}
-                          </div>
-                        </div>
-                      </div>
-
-                      {/* Pricing */}
-                      <div className="grid grid-cols-2 gap-4">
-                        <div
-                          className="p-4 rounded-xl border"
-                          style={{ borderColor: "var(--border-subtle)" }}
-                        >
-                          <div
-                            className="text-[11px] font-semibold uppercase tracking-wider mb-1"
-                            style={{ color: "var(--text-muted)" }}
-                          >
-                            输入价格
-                          </div>
-                          <div
-                            className="text-lg font-semibold"
-                            style={{ color: "var(--text-primary)" }}
-                          >
-                            {selectedModelFull.input_price ?? "N/A"}{" "}
-                            <span className="text-sm font-normal" style={{ color: "var(--text-muted)" }}>
-                              {selectedModelFull.currency}
-                            </span>
-                          </div>
-                        </div>
-                        <div
-                          className="p-4 rounded-xl border"
-                          style={{ borderColor: "var(--border-subtle)" }}
-                        >
-                          <div
-                            className="text-[11px] font-semibold uppercase tracking-wider mb-1"
-                            style={{ color: "var(--text-muted)" }}
-                          >
-                            输出价格
-                          </div>
-                          <div
-                            className="text-lg font-semibold"
-                            style={{ color: "var(--text-primary)" }}
-                          >
-                            {selectedModelFull.output_price ?? "N/A"}{" "}
-                            <span className="text-sm font-normal" style={{ color: "var(--text-muted)" }}>
-                              {selectedModelFull.currency}
-                            </span>
-                          </div>
-                        </div>
-                      </div>
-
-                      <hr style={{ borderColor: "var(--border-subtle)" }} />
-
-                      {/* Parameter Configuration */}
-                      <section>
-                        <h4
-                          className="text-xs font-bold uppercase tracking-widest mb-4 flex items-center gap-2"
-                          style={{ color: "var(--text-muted)" }}
-                        >
-                          <Settings className="w-3.5 h-3.5" /> 参数配置
-                        </h4>
-                        <div className="space-y-4">
-                          <div className="grid grid-cols-2 gap-4">
-                            <div className="space-y-1.5">
-                              <Label
-                                className="text-xs"
-                                style={{ color: "var(--text-secondary)" }}
-                              >
-                                Temperature
-                              </Label>
-                              <input
-                                type="number"
-                                min={0}
-                                max={2}
-                                step={0.1}
-                                value={aiParams.temperature}
-                                onChange={(e) =>
-                                  setAiParams((p) => ({
-                                    ...p,
-                                    temperature: parseFloat(e.target.value) || 0,
-                                  }))
-                                }
-                                className="w-full h-9 text-sm px-3 rounded-lg border outline-none"
-                                style={{
-                                  backgroundColor: "var(--input-bg)",
-                                  borderColor: "var(--border-subtle)",
-                                  color: "var(--text-primary)",
-                                }}
-                              />
-                            </div>
-                            <div className="space-y-1.5">
-                              <Label
-                                className="text-xs"
-                                style={{ color: "var(--text-secondary)" }}
-                              >
-                                Max Tokens
-                              </Label>
-                              <input
-                                type="number"
-                                min={1}
-                                max={selectedModelFull.max_output_tokens || 128000}
-                                step={1}
-                                value={aiParams.max_tokens}
-                                onChange={(e) =>
-                                  setAiParams((p) => ({
-                                    ...p,
-                                    max_tokens: parseInt(e.target.value) || 1,
-                                  }))
-                                }
-                                className="w-full h-9 text-sm px-3 rounded-lg border outline-none"
-                                style={{
-                                  backgroundColor: "var(--input-bg)",
-                                  borderColor: "var(--border-subtle)",
-                                  color: "var(--text-primary)",
-                                }}
-                              />
-                            </div>
-                          </div>
-                          <div className="space-y-1.5">
-                            <Label
-                              className="text-xs"
-                              style={{ color: "var(--text-secondary)" }}
-                            >
-                              System Prompt
-                            </Label>
-                            <textarea
-                              className="w-full min-h-[100px] text-sm p-3 rounded-lg border resize-y outline-none"
-                              style={{
-                                backgroundColor: "var(--input-bg)",
-                                borderColor: "var(--border-subtle)",
-                                color: "var(--text-primary)",
-                              }}
-                              placeholder="You are a helpful assistant..."
-                              value={aiParams.system_prompt}
-                              onChange={(e) =>
-                                setAiParams((p) => ({ ...p, system_prompt: e.target.value }))
-                              }
-                            />
-                          </div>
-                          <div
-                            className="flex items-center justify-between p-4 rounded-xl border"
-                            style={{ borderColor: "var(--border-subtle)" }}
-                          >
-                            <div>
-                              <Label
-                                className="text-sm font-medium"
-                                style={{ color: "var(--text-primary)" }}
-                              >
-                                Stream Response
-                              </Label>
-                              <p
-                                className="text-[11px] mt-0.5"
-                                style={{ color: "var(--text-muted)" }}
-                              >
-                                启用流式响应以实时输出
-                              </p>
-                            </div>
-                            <Switch
-                              checked={aiParams.stream}
-                              onCheckedChange={(v) =>
-                                setAiParams((p) => ({ ...p, stream: v }))
-                              }
-                            />
-                          </div>
-                        </div>
-                      </section>
-
-                      {/* Confirm Button */}
-                      <Button
-                        onClick={handleAddAi}
-                        disabled={isAddingAi || !selectedModelFull}
-                        className="w-full font-semibold h-11"
-                        style={{
-                          backgroundColor: "var(--accent)",
-                          color: "var(--accent-fg)",
-                        }}
-                      >
-                        {isAddingAi ? (
-                          <Loader2 className="w-4 h-4 animate-spin mr-2" />
-                        ) : null}
-                        确认添加
-                      </Button>
-                    </div>
-                  )}
-                </div>
-              </div>
-            </div>
-          </div>
-        </DialogContent>
-      </Dialog>
-    </>
-  );
-}
diff --git a/src/app/project/components/ProjectCreateMenuModal.tsx b/src/app/project/components/ProjectCreateMenuModal.tsx
deleted file mode 100644
index e506941..0000000
--- a/src/app/project/components/ProjectCreateMenuModal.tsx
+++ /dev/null
@@ -1,530 +0,0 @@
-import { useState } from "react";
-import { useParams, useNavigate } from "react-router-dom";
-import { useCreateRepoMutation } from "@/hooks/useReposQuery";
-import { useCreateCategoryMutation, useCreateRoomMutation, useRoomsQuery } from "@/hooks/useRoomsQuery";
-import { useBoardOperations } from "@/hooks/useBoardOperations";
-import { useCreateSkillMutation } from "@/hooks/useSkillsQuery";
-import { projectInviteUser } from "@/client/api";
-import type { MemberRole } from "@/client/model";
-import {
-  X,
-  Hash,
-  Plus,
-  Loader2,
-  Globe,
-  Lock,
-  PlusCircle,
-  FolderPlus,
-  MessageSquarePlus,
-  Kanban,
-  Zap,
-  Mail,
-  UserPlus,
-} from "lucide-react";
-import { Button } from "@/components/ui/button";
-import { Input } from "@/components/ui/input";
-import { Label } from "@/components/ui/label";
-import { Textarea } from "@/components/ui/textarea";
-import {
-  Select,
-  SelectContent,
-  SelectGroup,
-  SelectItem,
-  SelectTrigger,
-  SelectValue,
-} from "@/components/ui/select";
-
-import { t } from "@/i18n/T";
-
-interface ProjectCreateMenuModalProps {
-  onClose: () => void;
-  initialTab?: "repo" | "channel" | "board" | "skill" | "invite";
-}
-
-export function ProjectCreateMenuModal({ onClose, initialTab = "repo" }: ProjectCreateMenuModalProps) {
-  const { projectName } = useParams<{ projectName: string }>();
-  const navigate = useNavigate();
-
-  const [activeTab, setActiveTab] = useState<"repo" | "channel" | "board" | "skill" | "invite">(initialTab);
-  const [loading, setLoading] = useState(false);
-  const [error, setError] = useState<string | null>(null);
-
-  // --- Repo Form State ---
-  const [repoForm, setRepoForm] = useState({
-    repo_name: "",
-    description: "",
-    is_private: false
-  });
-  const createRepo = useCreateRepoMutation(projectName);
-
-  // --- Channel Form State ---
-  const [channelForm, setChannelForm] = useState({
-    room_name: "",
-    is_public: true,
-    category: "none",
-    new_category: "",
-  });
-  const createRoom = useCreateRoomMutation(projectName);
-  const createCategory = useCreateCategoryMutation(projectName);
-  const { data: roomsData } = useRoomsQuery(projectName);
-  const categories = roomsData?.categories ?? [];
-
-  // --- Board Form State ---
-  const [boardForm, setBoardForm] = useState({
-    name: "",
-    description: ""
-  });
-  const boardOps = useBoardOperations(projectName);
-
-  // --- Skill Form State ---
-  const [skillForm, setSkillForm] = useState({
-    name: "",
-    description: ""
-  });
-  const createSkill = useCreateSkillMutation(projectName);
-
-  // --- Invite Form State ---
-  const [inviteForm, setInviteForm] = useState({
-    email: "",
-    scope: "Member" as MemberRole,
-  });
-
-  const handleCreateRepo = async (e: React.FormEvent) => {
-    e.preventDefault();
-    if (!repoForm.repo_name.trim()) return;
-    try {
-      setLoading(true);
-      setError(null);
-      await createRepo.mutateAsync({
-        repo_name: repoForm.repo_name.trim(),
-        description: repoForm.description.trim() || undefined,
-        is_private: repoForm.is_private
-      });
-      onClose();
-      navigate(`/${projectName}/repo/${repoForm.repo_name.trim()}`);
-    } catch (err: unknown) {
-      setError((err as { response?: { data?: { message?: string } } })?.response?.data?.message || t("project_create.create_failed_repo"));
-    } finally {
-      setLoading(false);
-    }
-  };
-
-  const handleCreateChannel = async (e: React.FormEvent) => {
-    e.preventDefault();
-    if (!channelForm.room_name.trim()) return;
-    try {
-      setLoading(true);
-      setError(null);
-      let category: string | null = channelForm.category === "none" ? null : channelForm.category;
-      if (channelForm.category === "new") {
-        if (!channelForm.new_category.trim()) {
-          setError(t("project_create.enter_group_name"));
-          return;
-        }
-        const createdCategory = await createCategory.mutateAsync({
-          name: channelForm.new_category.trim(),
-          position: categories.length,
-        });
-        category = createdCategory?.id ?? null;
-      }
-      const room = await createRoom.mutateAsync({
-        room_name: channelForm.room_name.trim(),
-        room_public: channelForm.is_public,
-        category,
-      });
-      onClose();
-      if (room) {
-        navigate(`/${projectName}/channel/${room.id}`);
-      }
-    } catch (err: unknown) {
-      setError((err as { response?: { data?: { message?: string } } })?.response?.data?.message || t("project_create.create_failed_channel"));
-    } finally {
-      setLoading(false);
-    }
-  };
-
-  const handleCreateBoard = async (e: React.FormEvent) => {
-    e.preventDefault();
-    if (!boardForm.name.trim()) return;
-    try {
-      setLoading(true);
-      setError(null);
-      const res = await boardOps.createBoard.mutateAsync({
-        name: boardForm.name.trim(),
-        description: boardForm.description.trim() || undefined
-      });
-      onClose();
-      if (res.data?.data) {
-        navigate(`/${projectName}/board/${res.data.data.id}`);
-      }
-    } catch (err: unknown) {
-      setError((err as { response?: { data?: { message?: string } } })?.response?.data?.message || t("project_create.create_failed_board"));
-    } finally {
-      setLoading(false);
-    }
-  };
-
-  const handleCreateSkill = async (e: React.FormEvent) => {
-    e.preventDefault();
-    if (!skillForm.name.trim()) return;
-    try {
-      setLoading(true);
-      setError(null);
-      const skill = await createSkill.mutateAsync({
-        slug: skillForm.name.trim().toLowerCase().replace(/\s+/g, '-'),
-        name: skillForm.name.trim(),
-        description: skillForm.description.trim() || undefined,
-        content: "# New AI Skill\n\nExplain how this skill works here."
-      });
-      onClose();
-      if (skill) {
-        navigate(`/${projectName}/skills/${skill.slug}`);
-      }
-    } catch (err: unknown) {
-      setError((err as { response?: { data?: { message?: string } } })?.response?.data?.message || t("project_create.create_failed_skill"));
-    } finally {
-      setLoading(false);
-    }
-  };
-
-  const handleInviteUser = async (e: React.FormEvent) => {
-    e.preventDefault();
-    if (!projectName || !inviteForm.email.trim()) return;
-    try {
-      setLoading(true);
-      setError(null);
-      await projectInviteUser(projectName, {
-        email: inviteForm.email.trim(),
-        scope: inviteForm.scope,
-      });
-      setInviteForm({ email: "", scope: "Member" });
-      onClose();
-    } catch (err: unknown) {
-      setError((err as { response?: { data?: { message?: string } } })?.response?.data?.message || t("project_create.create_failed_invite"));
-    } finally {
-      setLoading(false);
-    }
-  };
-
-  return (
-    <div className="fixed inset-0 z-50 flex items-center justify-center p-4 bg-black/60 backdrop-blur-sm animate-in fade-in duration-200">
-      <div
-        className="border rounded-2xl shadow-2xl w-full max-w-[540px] overflow-hidden animate-in zoom-in-95 duration-200"
-        style={{ backgroundColor: "var(--surface-elevated)", borderColor: "var(--border-default)" }}
-        onClick={e => e.stopPropagation()}
-      >
-        {/* Header Tabs */}
-        <div className="px-1 pt-1 border-b" style={{ backgroundColor: "var(--surface-rail)", borderColor: "var(--border-default)" }}>
-          <div className="flex items-center justify-between px-4 py-2">
-             <span className="text-[14px] font-bold flex items-center gap-2" style={{ color: "var(--text-primary)" }}>
-                <PlusCircle className="w-4 h-4" style={{ color: "var(--accent)" }} /> {t("project_create.quick_start")}
-             </span>
-             <button
-                onClick={onClose}
-                className="p-1 rounded transition-colors"
-                style={{ color: "var(--text-secondary)" }}
-              >
-                <X className="w-4 h-4" />
-              </button>
-          </div>
-          <div className="flex px-2">
-            {[
-              { id: "repo", label: t("project_create.repo_tab"), icon: FolderPlus },
-              { id: "channel", label: t("project_create.channel_tab"), icon: MessageSquarePlus },
-              { id: "board", label: t("project_create.board_tab"), icon: Kanban },
-              { id: "skill", label: t("project_create.skill_tab"), icon: Zap },
-              { id: "invite", label: t("project_create.invite_tab"), icon: UserPlus },
-            ].map(tab => (
-              <button
-                key={tab.id}
-                onClick={() => { setActiveTab(tab.id as typeof activeTab); setError(null); }}
-                className="flex-1 py-2.5 text-[12px] font-bold transition-all border-b-2 flex items-center justify-center gap-2"
-                style={{
-                  borderColor: activeTab === tab.id ? "var(--accent)" : "transparent",
-                  color: activeTab === tab.id ? "var(--text-primary)" : "var(--text-secondary)"
-                }}
-              >
-                <tab.icon className="w-4 h-4" />
-                {tab.label}
-              </button>
-            ))}
-          </div>
-        </div>
-
-        <div className="p-6">
-          {activeTab === "repo" && (
-            <form onSubmit={handleCreateRepo} className="space-y-5">
-              <div className="space-y-1.5">
-                <Label className="text-[11px] font-bold uppercase tracking-widest" style={{ color: "var(--text-muted)" }}>{t("project_create.repo_name")}</Label>
-                <Input
-                  autoFocus
-                  placeholder={t("project_create.repo_name_placeholder")}
-                  value={repoForm.repo_name}
-                  onChange={e => setRepoForm({...repoForm, repo_name: e.target.value.toLowerCase().replace(/\s+/g, '-')})}
-                  className="border-none h-10 text-[14px] font-mono"
-                  style={{ backgroundColor: "var(--surface-ground)", color: "var(--text-primary)" }}
-                />
-              </div>
-              <div className="space-y-1.5">
-                <Label className="text-[11px] font-bold uppercase tracking-widest" style={{ color: "var(--text-muted)" }}>{t("project_create.description_optional")}</Label>
-                <Input
-                  placeholder={t("project_create.repo_desc_placeholder")}
-                  value={repoForm.description}
-                  onChange={e => setRepoForm({...repoForm, description: e.target.value})}
-                  className="border-none h-10 text-[14px]"
-                  style={{ backgroundColor: "var(--surface-ground)", color: "var(--text-primary)" }}
-                />
-              </div>
-              <div
-                className="flex items-center justify-between p-3 rounded-lg border cursor-pointer transition-colors"
-                style={{ backgroundColor: "var(--surface-ground)", borderColor: "var(--border-default)" }}
-                onClick={() => setRepoForm({...repoForm, is_private: !repoForm.is_private})}
-              >
-                <div className="flex items-center gap-3">
-                   {repoForm.is_private ? <Lock className="w-4 h-4" style={{ color: "var(--warning)" }} /> : <Globe className="w-4 h-4" style={{ color: "var(--success)" }} />}
-                   <div>
-                     <p className="text-[13px] font-bold" style={{ color: "var(--text-primary)" }}>{repoForm.is_private ? t("project.repos.private") : t("project.repos.public")}</p>
-                     <p className="text-[11px]" style={{ color: "var(--text-muted)" }}>{repoForm.is_private ? t("project_create.private_desc") : t("project_create.public_desc")}</p>
-                   </div>
-                </div>
-                <div className="w-8 h-4 rounded-full relative transition-colors" style={{ backgroundColor: repoForm.is_private ? "var(--accent)" : "var(--border-default)" }}>
-                  <div className={`absolute top-0.5 w-3 h-3 rounded-full transition-all ${repoForm.is_private ? 'right-0.5' : 'left-0.5'}`} style={{ backgroundColor: "var(--text-inverse)" }} />
-                </div>
-              </div>
-
-              <div className="pt-2 flex flex-col gap-3">
-                {error && <p className="text-[12px] font-medium p-2 rounded border" style={{ color: "var(--destructive)", backgroundColor: "var(--destructive-alpha10)", borderColor: "var(--destructive)" }}>{error}</p>}
-                <Button
-                  type="submit"
-                  disabled={!repoForm.repo_name.trim() || loading}
-                  className="w-full font-bold h-10"
-                  style={{ backgroundColor: "var(--accent)", color: "var(--accent-fg)" }}
-                >
-                  {loading ? <Loader2 className="w-4 h-4 animate-spin mr-2" /> : <FolderPlus className="w-4 h-4 mr-2" />}
-                  {t("project_create.create_repo")}
-                </Button>
-              </div>
-            </form>
-          )}
-
-          {activeTab === "channel" && (
-            <form onSubmit={handleCreateChannel} className="space-y-5">
-              <div className="space-y-1.5">
-                <Label className="text-[11px] font-bold uppercase tracking-widest" style={{ color: "var(--text-muted)" }}>{t("project_create.channel_name")}</Label>
-                <div className="relative">
-                  <Hash className="absolute left-3 top-1/2 -translate-y-1/2 w-4 h-4" style={{ color: "var(--text-muted)" }} />
-                  <Input
-                    autoFocus
-                    placeholder={t("project_create.channel_name_placeholder")}
-                    value={channelForm.room_name}
-                    onChange={e => setChannelForm({...channelForm, room_name: e.target.value.toLowerCase().replace(/\s+/g, '-')})}
-                    className="border-none h-10 pl-9 text-[14px]"
-                    style={{ backgroundColor: "var(--surface-ground)", color: "var(--text-primary)" }}
-                  />
-                </div>
-              </div>
-
-              <div
-                className="flex items-center justify-between p-3 rounded-lg border cursor-pointer transition-colors"
-                style={{ backgroundColor: "var(--surface-ground)", borderColor: "var(--border-default)" }}
-                onClick={() => setChannelForm({...channelForm, is_public: !channelForm.is_public})}
-              >
-                <div className="flex items-center gap-3">
-                   {channelForm.is_public ? <Globe className="w-4 h-4" style={{ color: "var(--success)" }} /> : <Lock className="w-4 h-4" style={{ color: "var(--warning)" }} />}
-                   <div>
-                     <p className="text-[13px] font-bold" style={{ color: "var(--text-primary)" }}>{channelForm.is_public ? t("project_create.public_channel") : t("project_create.private_channel")}</p>
-                     <p className="text-[11px]" style={{ color: "var(--text-muted)" }}>{channelForm.is_public ? t("project_create.public_channel_desc") : t("project_create.private_channel_desc")}</p>
-                   </div>
-                </div>
-                <div className="w-8 h-4 rounded-full relative transition-colors" style={{ backgroundColor: channelForm.is_public ? "var(--success)" : "var(--border-default)" }}>
-                  <div className={`absolute top-0.5 w-3 h-3 rounded-full transition-all ${channelForm.is_public ? 'right-0.5' : 'left-0.5'}`} style={{ backgroundColor: "var(--text-inverse)" }} />
-                </div>
-              </div>
-
-              <div className="space-y-1.5">
-                <Label className="text-[11px] font-bold uppercase tracking-widest" style={{ color: "var(--text-muted)" }}>{t("project_create.group")}</Label>
-                <Select
-                  value={channelForm.category}
-                  onValueChange={(value) => setChannelForm({...channelForm, category: value})}
-                >
-                  <SelectTrigger className="h-10 border-none" style={{ backgroundColor: "var(--surface-ground)", color: "var(--text-primary)" }}>
-                    <SelectValue />
-                  </SelectTrigger>
-                  <SelectContent>
-                    <SelectGroup>
-                      <SelectItem value="none">{t("project_create.no_group")}</SelectItem>
-                      {categories.map((category) => (
-                        <SelectItem key={category.id} value={category.id}>{category.name === "default" ? "Channels" : category.name}</SelectItem>
-                      ))}
-                      <SelectItem value="new">{t("project_create.create_new_group")}</SelectItem>
-                    </SelectGroup>
-                  </SelectContent>
-                </Select>
-              </div>
-
-              {channelForm.category === "new" && (
-                <div className="space-y-1.5">
-                  <Label className="text-[11px] font-bold uppercase tracking-widest" style={{ color: "var(--text-muted)" }}>{t("project_create.group_name")}</Label>
-                  <Input
-                    placeholder={t("project_create.group_name_placeholder")}
-                    value={channelForm.new_category}
-                    onChange={e => setChannelForm({...channelForm, new_category: e.target.value})}
-                    className="border-none h-10 text-[14px]"
-                    style={{ backgroundColor: "var(--surface-ground)", color: "var(--text-primary)" }}
-                  />
-                </div>
-              )}
-
-              <div className="pt-2 flex flex-col gap-3">
-                {error && <p className="text-[12px] font-medium p-2 rounded border" style={{ color: "var(--destructive)", backgroundColor: "var(--destructive-alpha10)", borderColor: "var(--destructive)" }}>{error}</p>}
-                <Button
-                  type="submit"
-                  disabled={!channelForm.room_name.trim() || loading}
-                  className="w-full font-bold h-10"
-                  style={{ backgroundColor: "var(--accent)", color: "var(--accent-fg)" }}
-                >
-                  {loading ? <Loader2 className="w-4 h-4 animate-spin mr-2" /> : <MessageSquarePlus className="w-4 h-4 mr-2" />}
-                  {t("project_create.create_channel")}
-                </Button>
-              </div>
-            </form>
-          )}
-
-          {activeTab === "board" && (
-            <form onSubmit={handleCreateBoard} className="space-y-5">
-              <div className="space-y-1.5">
-                <Label className="text-[11px] font-bold uppercase tracking-widest" style={{ color: "var(--text-muted)" }}>{t("project_create.board_name")}</Label>
-                <div className="relative">
-                  <Kanban className="absolute left-3 top-1/2 -translate-y-1/2 w-4 h-4" style={{ color: "var(--text-muted)" }} />
-                  <Input
-                    autoFocus
-                    placeholder={t("project_create.board_name_placeholder")}
-                    value={boardForm.name}
-                    onChange={e => setBoardForm({...boardForm, name: e.target.value})}
-                    className="border-none h-10 pl-9 text-[14px]"
-                    style={{ backgroundColor: "var(--surface-ground)", color: "var(--text-primary)" }}
-                  />
-                </div>
-              </div>
-              <div className="space-y-1.5">
-                <Label className="text-[11px] font-bold uppercase tracking-widest" style={{ color: "var(--text-muted)" }}>{t("project_create.description_optional")}</Label>
-                <Textarea
-                  placeholder={t("project_create.board_desc_placeholder")}
-                  value={boardForm.description}
-                  onChange={e => setBoardForm({...boardForm, description: e.target.value})}
-                  className="border-none min-h-[100px] text-[14px] resize-none py-3"
-                  style={{ backgroundColor: "var(--surface-ground)", color: "var(--text-primary)" }}
-                />
-              </div>
-
-              <div className="pt-2 flex flex-col gap-3">
-                {error && <p className="text-[12px] font-medium p-2 rounded border" style={{ color: "var(--destructive)", backgroundColor: "var(--destructive-alpha10)", borderColor: "var(--destructive)" }}>{error}</p>}
-                <Button
-                  type="submit"
-                  disabled={!boardForm.name.trim() || loading}
-                  className="w-full font-bold h-10"
-                  style={{ backgroundColor: "var(--accent)", color: "var(--accent-fg)" }}
-                >
-                  {loading ? <Loader2 className="w-4 h-4 animate-spin mr-2" /> : <Plus className="w-4 h-4 mr-2" />}
-                  {t("project_create.create_board")}
-                </Button>
-              </div>
-            </form>
-          )}
-
-          {activeTab === "skill" && (
-            <form onSubmit={handleCreateSkill} className="space-y-5">
-              <div className="space-y-1.5">
-                <Label className="text-[11px] font-bold uppercase tracking-widest" style={{ color: "var(--text-muted)" }}>{t("project_create.skill_name")}</Label>
-                <div className="relative">
-                  <Zap className="absolute left-3 top-1/2 -translate-y-1/2 w-4 h-4" style={{ color: "var(--text-muted)" }} />
-                  <Input
-                    autoFocus
-                    placeholder={t("project_create.skill_name_placeholder")}
-                    value={skillForm.name}
-                    onChange={e => setSkillForm({...skillForm, name: e.target.value})}
-                    className="border-none h-10 pl-9 text-[14px]"
-                    style={{ backgroundColor: "var(--surface-ground)", color: "var(--text-primary)" }}
-                  />
-                </div>
-              </div>
-              <div className="space-y-1.5">
-                <Label className="text-[11px] font-bold uppercase tracking-widest" style={{ color: "var(--text-muted)" }}>{t("project_create.description_optional")}</Label>
-                <Textarea
-                  placeholder={t("project_create.skill_desc_placeholder")}
-                  value={skillForm.description}
-                  onChange={e => setSkillForm({...skillForm, description: e.target.value})}
-                  className="border-none min-h-[100px] text-[14px] resize-none py-3"
-                  style={{ backgroundColor: "var(--surface-ground)", color: "var(--text-primary)" }}
-                />
-              </div>
-
-              <div className="pt-2 flex flex-col gap-3">
-                {error && <p className="text-[12px] font-medium p-2 rounded border" style={{ color: "var(--destructive)", backgroundColor: "var(--destructive-alpha10)", borderColor: "var(--destructive)" }}>{error}</p>}
-                <Button
-                  type="submit"
-                  disabled={!skillForm.name.trim() || loading}
-                  className="w-full font-bold h-10"
-                  style={{ backgroundColor: "var(--accent)", color: "var(--accent-fg)" }}
-                >
-                  {loading ? <Loader2 className="w-4 h-4 animate-spin mr-2" /> : <Plus className="w-4 h-4 mr-2" />}
-                  {t("project_create.create_skill")}
-                </Button>
-              </div>
-            </form>
-          )}
-
-          {activeTab === "invite" && (
-            <form onSubmit={handleInviteUser} className="space-y-5">
-              <div className="space-y-1.5">
-                <Label className="text-[11px] font-bold uppercase tracking-widest" style={{ color: "var(--text-muted)" }}>{t("project_create.invite_email")}</Label>
-                <div className="relative">
-                  <Mail className="absolute left-3 top-1/2 -translate-y-1/2 w-4 h-4" style={{ color: "var(--text-muted)" }} />
-                  <Input
-                    autoFocus
-                    placeholder={t("project_create.email_placeholder")}
-                    value={inviteForm.email}
-                    onChange={e => setInviteForm({...inviteForm, email: e.target.value})}
-                    className="border-none h-10 pl-9 text-[14px]"
-                    style={{ backgroundColor: "var(--surface-ground)", color: "var(--text-primary)" }}
-                    type="email"
-                  />
-                </div>
-              </div>
-              <div className="space-y-1.5">
-                <Label className="text-[11px] font-bold uppercase tracking-widest" style={{ color: "var(--text-muted)" }}>{t("project_create.role")}</Label>
-                <Select
-                  value={inviteForm.scope}
-                  onValueChange={(value) => setInviteForm({...inviteForm, scope: value as MemberRole})}
-                >
-                  <SelectTrigger className="h-10 border-none" style={{ backgroundColor: "var(--surface-ground)", color: "var(--text-primary)" }}>
-                    <SelectValue />
-                  </SelectTrigger>
-                  <SelectContent>
-                    <SelectGroup>
-                      <SelectItem value="Member">{t("project_create.member_role")}</SelectItem>
-                      <SelectItem value="Admin">{t("project_create.admin_role")}</SelectItem>
-                    </SelectGroup>
-                  </SelectContent>
-                </Select>
-              </div>
-
-              <div className="pt-2 flex flex-col gap-3">
-                {error && <p className="text-[12px] font-medium p-2 rounded border" style={{ color: "var(--destructive)", backgroundColor: "var(--destructive-alpha10)", borderColor: "var(--destructive)" }}>{error}</p>}
-                <Button
-                  type="submit"
-                  disabled={!inviteForm.email.trim() || loading}
-                  className="w-full font-bold h-10"
-                  style={{ backgroundColor: "var(--accent)", color: "var(--accent-fg)" }}
-                >
-                  {loading ? <Loader2 className="w-4 h-4 animate-spin mr-2" /> : <UserPlus className="w-4 h-4 mr-2" />}
-                  {t("project_create.send_invitation")}
-                </Button>
-              </div>
-            </form>
-          )}
-        </div>
-      </div>
-    </div>
-  );
-}
diff --git a/src/app/project/issue-detail/IssueSidebar.tsx b/src/app/project/issue-detail/IssueSidebar.tsx
deleted file mode 100644
index f01e67d..0000000
--- a/src/app/project/issue-detail/IssueSidebar.tsx
+++ /dev/null
@@ -1,482 +0,0 @@
-import {
-  useIssueAssigneesQuery,
-  useAddAssigneeMutation,
-  useRemoveAssigneeMutation,
-  useIssueLabelsQuery,
-  useAddIssueLabelMutation,
-  useRemoveIssueLabelMutation,
-  useProjectLabelsQuery,
-  useIssueSubscribersQuery,
-  useIssueSubscribeMutation,
-  useIssueUnsubscribeMutation,
-  useIssuePRsQuery,
-  useIssueReposQuery,
-  useLinkPRMutation,
-  useUnlinkPRMutation,
-  useLinkRepoMutation,
-  useUnlinkRepoMutation,
-} from "@/hooks/useIssueExtraQuery"
-import { Button } from "@/components/ui/button"
-import { Badge } from "@/components/ui/badge"
-import { Separator } from "@/components/ui/separator"
-import {
-  Tag,
-  Bell,
-  GitPullRequest,
-  Link as LinkIcon,
-  Loader2,
-  Plus,
-  X,
-  Users,
-  Settings,
-} from "lucide-react"
-import { Avatar, AvatarFallback } from "@/components/ui/avatar"
-import {
-  DropdownMenu,
-  DropdownMenuContent,
-  DropdownMenuItem,
-  DropdownMenuTrigger,
-  DropdownMenuSeparator,
-} from "@/components/ui/dropdown-menu"
-import { useState } from "react"
-import {
-  Dialog,
-  DialogContent,
-  DialogHeader,
-  DialogTitle,
-} from "@/components/ui/dialog"
-import { Input } from "@/components/ui/input"
-import { t } from "@/i18n/T"
-
-interface IssueSidebarProps {
-  projectName: string
-  issueNumber: number
-}
-
-export function IssueSidebar({ projectName, issueNumber }: IssueSidebarProps) {
-  const { data: assignees = [] } = useIssueAssigneesQuery({
-    projectName,
-    issueNumber,
-  })
-  const { data: issueLabels = [] } = useIssueLabelsQuery({
-    projectName,
-    issueNumber,
-  })
-  const { data: projectLabels = [] } = useProjectLabelsQuery(projectName)
-  const { data: subscribers = [] } = useIssueSubscribersQuery({
-    projectName,
-    issueNumber,
-  })
-  const { data: prs = [] } = useIssuePRsQuery({ projectName, issueNumber })
-  const { data: repos = [] } = useIssueReposQuery({ projectName, issueNumber })
-
-  const addAssignee = useAddAssigneeMutation()
-  const removeAssignee = useRemoveAssigneeMutation()
-  const addLabel = useAddIssueLabelMutation()
-  const removeLabel = useRemoveIssueLabelMutation()
-  const subscribe = useIssueSubscribeMutation()
-  const unsubscribe = useIssueUnsubscribeMutation()
-  const linkPR = useLinkPRMutation()
-  const unlinkPR = useUnlinkPRMutation()
-  const linkRepo = useLinkRepoMutation()
-  const unlinkRepo = useUnlinkRepoMutation()
-
-  const isSubscribed = subscribers.some((s) => s.user_id === "me")
-
-  const [showLinkPR, setShowLinkPR] = useState(false)
-  const [prRepo, setPrRepo] = useState("")
-  const [prNum, setPrNum] = useState("")
-  const [showLinkRepo, setShowLinkRepo] = useState(false)
-  const [repoName, setRepoName] = useState("")
-
-  return (
-    <div className="space-y-5 rounded-2xl border border-border/70 bg-card/80 p-4 shadow-sm backdrop-blur">
-      {/* Assignees */}
-      <div className="space-y-2">
-        <div className="group flex items-center justify-between">
-          <h3 className="flex items-center gap-1.5 text-xs font-semibold tracking-wider text-muted-foreground uppercase">
-            <Users className="size-3.5" /> {t("project.issue_detail.assignees")}
-            <Badge
-              variant="secondary"
-              className="ml-1 rounded-full px-2 py-0.5 text-[10px]"
-            >
-              {assignees.length}
-            </Badge>
-          </h3>
-          <DropdownMenu>
-            <DropdownMenuTrigger asChild>
-              <button className="text-[10px] font-medium text-accent opacity-0 transition-opacity group-hover:opacity-100 hover:underline">
-                {t("project.issue_detail.edit")}
-              </button>
-            </DropdownMenuTrigger>
-            <DropdownMenuContent align="end" className="w-48">
-              <DropdownMenuItem className="text-xs">
-                {t("project.issue_detail.assign_to_me")}
-              </DropdownMenuItem>
-              <DropdownMenuSeparator />
-              <p className="px-2 py-1.5 text-[10px] font-bold text-muted-foreground uppercase">
-                {t("project.issue_detail.suggestions")}
-              </p>
-              <DropdownMenuItem
-                onClick={() =>
-                  addAssignee.mutate({ projectName, issueNumber, userId: "me" })
-                }
-              >
-                admin
-              </DropdownMenuItem>
-            </DropdownMenuContent>
-          </DropdownMenu>
-        </div>
-        <div className="space-y-1.5 rounded-xl border border-[var(--border-subtle)] bg-[var(--surface-ground)]/60 p-3">
-          {assignees.length === 0 ? (
-            <p className="text-xs text-muted-foreground">
-              {t("project.issue_detail.no_assigned")}
-            </p>
-          ) : (
-            assignees.map((a) => (
-              <div
-                key={a.username}
-                className="group flex items-center gap-2 text-sm"
-              >
-                <Avatar className="size-5 rounded-full">
-                  <AvatarFallback className="text-[10px]">
-                    {a.username[0].toUpperCase()}
-                  </AvatarFallback>
-                </Avatar>
-                <span className="flex-1 truncate text-foreground">
-                  {a.username}
-                </span>
-                <button
-                  onClick={() =>
-                    removeAssignee.mutate({
-                      projectName,
-                      issueNumber,
-                      userId: a.user_id,
-                    })
-                  }
-                  className="text-destructive opacity-0 transition-opacity group-hover:opacity-100"
-                >
-                  <X className="size-3" />
-                </button>
-              </div>
-            ))
-          )}
-        </div>
-      </div>
-
-      <Separator />
-
-      {/* Labels */}
-      <div className="space-y-2">
-        <div className="group flex items-center justify-between">
-          <h3 className="flex items-center gap-1.5 text-xs font-semibold tracking-wider text-muted-foreground uppercase">
-            <Tag className="size-3.5" /> {t("project.issue_detail.labels")}
-            <Badge
-              variant="secondary"
-              className="ml-1 rounded-full px-2 py-0.5 text-[10px]"
-            >
-              {issueLabels.length}
-            </Badge>
-          </h3>
-          <DropdownMenu>
-            <DropdownMenuTrigger asChild>
-              <button className="text-[10px] font-medium text-accent opacity-0 transition-opacity group-hover:opacity-100 hover:underline">
-                {t("project.issue_detail.edit")}
-              </button>
-            </DropdownMenuTrigger>
-            <DropdownMenuContent align="end" className="w-56">
-              <p className="px-2 py-1.5 text-[10px] font-bold text-muted-foreground uppercase">
-                {t("project.issue_detail.apply_labels")}
-              </p>
-              {projectLabels.map((l) => (
-                <DropdownMenuItem
-                  key={l.id}
-                  className="flex items-center gap-2"
-                  onClick={() =>
-                    addLabel.mutate({ projectName, issueNumber, labelId: l.id })
-                  }
-                >
-                  <div
-                    className="size-2.5 rounded-full"
-                    style={{ backgroundColor: l.color || "var(--accent)" }}
-                  />
-                  <span className="flex-1">{l.name}</span>
-                  {issueLabels.some((il) => il.label_name === l.name) && (
-                    <Loader2 className="size-3 animate-spin" />
-                  )}
-                </DropdownMenuItem>
-              ))}
-              <DropdownMenuSeparator />
-              <DropdownMenuItem className="text-accent">
-                <Settings className="mr-2" /> Manage labels
-              </DropdownMenuItem>
-            </DropdownMenuContent>
-          </DropdownMenu>
-        </div>
-        <div className="flex flex-wrap gap-1 rounded-xl border border-[var(--border-subtle)] bg-[var(--surface-ground)]/60 p-3">
-          {issueLabels.length === 0 ? (
-            <p className="text-xs text-muted-foreground">
-              {t("project.issue_detail.none_yet")}
-            </p>
-          ) : (
-            issueLabels.map((l) => (
-              <Badge
-                key={l.label_name}
-                variant="outline"
-                className="h-5 border-border/70 bg-muted/40 px-1.5 text-[10px] text-foreground"
-                style={{
-                  borderLeft: `3px solid ${l.label_color ?? "var(--accent)"}`,
-                }}
-              >
-                {l.label_name}
-                <button
-                  onClick={() =>
-                    removeLabel.mutate({
-                      projectName,
-                      issueNumber,
-                      labelId: l.label_id,
-                    })
-                  }
-                  className="ml-1 transition-colors hover:text-destructive"
-                >
-                  <X className="size-2.5" />
-                </button>
-              </Badge>
-            ))
-          )}
-        </div>
-      </div>
-
-      <Separator />
-
-      {/* Notifications */}
-      <div className="space-y-2">
-        <h3 className="flex items-center gap-1.5 text-xs font-semibold tracking-wider text-muted-foreground uppercase">
-          <Bell className="size-3.5" />{" "}
-          {t("project.issue_detail.notifications")}
-          <Badge
-            variant="secondary"
-            className="ml-1 rounded-full px-2 py-0.5 text-[10px]"
-          >
-            {subscribers.length}
-          </Badge>
-        </h3>
-        <Button
-          variant="outline"
-          size="sm"
-          className="h-8 w-full justify-start rounded-full text-xs"
-          onClick={() => {
-            if (isSubscribed) {
-              unsubscribe.mutate({ projectName, issueNumber })
-            } else {
-              subscribe.mutate({ projectName, issueNumber })
-            }
-          }}
-        >
-          {isSubscribed
-            ? t("project.issue_detail.unsubscribe")
-            : t("project.issue_detail.subscribe")}
-        </Button>
-        <p className="text-[10px] text-muted-foreground">
-          {t("project.issue_detail.subscribers_count", {
-            count: String(subscribers.length),
-          })}
-        </p>
-      </div>
-
-      <Separator />
-
-      {/* Development */}
-      <div className="space-y-2">
-        <h3 className="flex items-center gap-1.5 text-xs font-semibold tracking-wider text-muted-foreground uppercase">
-          {t("project.issue_detail.development")}
-          <Badge
-            variant="secondary"
-            className="ml-1 rounded-full px-2 py-0.5 text-[10px]"
-          >
-            {prs.length + repos.length}
-          </Badge>
-        </h3>
-        <div className="space-y-2">
-          {prs.length > 0 && (
-            <div className="space-y-1">
-              <p className="text-[10px] font-bold text-muted-foreground uppercase">
-                {t("project.issue_detail.pull_requests")}
-              </p>
-              {prs.map((pr) => (
-                <div
-                  key={`${pr.repo}-${pr.number}`}
-                  className="group flex items-center gap-1.5 text-xs"
-                >
-                  <div className="flex cursor-pointer items-center gap-1.5 text-accent hover:underline">
-                    <GitPullRequest className="size-3" />
-                    <span>
-                      #{pr.number} in {pr.repo}
-                    </span>
-                  </div>
-                  <button
-                    onClick={() =>
-                      unlinkPR.mutate({
-                        projectName,
-                        issueNumber,
-                        repo: pr.repo!,
-                        prNumber: pr.number!,
-                      })
-                    }
-                    className="text-destructive opacity-0 transition-opacity group-hover:opacity-100"
-                  >
-                    <X className="size-3" />
-                  </button>
-                </div>
-              ))}
-            </div>
-          )}
-          {repos.length > 0 && (
-            <div className="space-y-1">
-              <p className="text-[10px] font-bold text-muted-foreground uppercase">
-                {t("project.issue_detail.linked_repos")}
-              </p>
-              {repos.map((r) => (
-                <div
-                  key={r.repo}
-                  className="group flex items-center gap-1.5 text-xs"
-                >
-                  <div className="flex cursor-pointer items-center gap-1.5 text-accent hover:underline">
-                    <LinkIcon className="size-3" />
-                    <span>{r.repo}</span>
-                  </div>
-                  <button
-                    onClick={() =>
-                      unlinkRepo.mutate({
-                        projectName,
-                        issueNumber,
-                        repoId: r.repo!,
-                      })
-                    }
-                    className="text-destructive opacity-0 transition-opacity group-hover:opacity-100"
-                  >
-                    <X className="size-3" />
-                  </button>
-                </div>
-              ))}
-            </div>
-          )}
-          <div className="flex flex-col gap-2">
-            <button
-              className="flex items-center gap-1 rounded-full border border-[var(--border-subtle)] bg-[var(--surface-ground)]/60 px-3 py-1.5 text-[10px] font-medium text-accent transition-colors hover:bg-[var(--hover-bg)]"
-              onClick={() => setShowLinkPR(true)}
-            >
-              <Plus className="size-3" /> {t("project.issue_detail.link_pr")}
-            </button>
-            <button
-              className="flex items-center gap-1 rounded-full border border-[var(--border-subtle)] bg-[var(--surface-ground)]/60 px-3 py-1.5 text-[10px] font-medium text-accent transition-colors hover:bg-[var(--hover-bg)]"
-              onClick={() => setShowLinkRepo(true)}
-            >
-              <Plus className="size-3" /> {t("project.issue_detail.link_repo")}
-            </button>
-          </div>
-        </div>
-      </div>
-
-      {/* Link PR Dialog */}
-      <Dialog open={showLinkPR} onOpenChange={setShowLinkPR}>
-        <DialogContent>
-          <DialogHeader>
-            <DialogTitle>{t("project.issue_detail.link_pr_title")}</DialogTitle>
-          </DialogHeader>
-          <div className="space-y-3">
-            <div>
-              <label
-                className="text-xs font-medium"
-                style={{ color: "var(--text-muted)" }}
-              >
-                Repo
-              </label>
-              <Input
-                value={prRepo}
-                onChange={(e) => setPrRepo(e.target.value)}
-                placeholder="owner/repo"
-              />
-            </div>
-            <div>
-              <label
-                className="text-xs font-medium"
-                style={{ color: "var(--text-muted)" }}
-              >
-                PR Number
-              </label>
-              <Input
-                value={prNum}
-                onChange={(e) => setPrNum(e.target.value)}
-                placeholder="123"
-              />
-            </div>
-            <Button
-              size="sm"
-              className="rounded-full"
-              style={{ backgroundColor: "var(--accent)" }}
-              onClick={() => {
-                const parts = prRepo.split("/")
-                if (parts.length === 2 && prNum) {
-                  linkPR.mutate({
-                    projectName,
-                    issueNumber,
-                    repo: prRepo,
-                    prNumber: Number(prNum),
-                  })
-                  setShowLinkPR(false)
-                  setPrRepo("")
-                  setPrNum("")
-                }
-              }}
-              disabled={linkPR.isPending}
-            >
-              Link
-            </Button>
-          </div>
-        </DialogContent>
-      </Dialog>
-
-      {/* Link Repo Dialog */}
-      <Dialog open={showLinkRepo} onOpenChange={setShowLinkRepo}>
-        <DialogContent>
-          <DialogHeader>
-            <DialogTitle>
-              {t("project.issue_detail.link_repo_title")}
-            </DialogTitle>
-          </DialogHeader>
-          <div className="space-y-3">
-            <div>
-              <label
-                className="text-xs font-medium"
-                style={{ color: "var(--text-muted)" }}
-              >
-                Repo
-              </label>
-              <Input
-                value={repoName}
-                onChange={(e) => setRepoName(e.target.value)}
-                placeholder="owner/repo"
-              />
-            </div>
-            <Button
-              size="sm"
-              className="rounded-full"
-              style={{ backgroundColor: "var(--accent)" }}
-              onClick={() => {
-                if (repoName) {
-                  linkRepo.mutate({ projectName, issueNumber, repo: repoName })
-                  setShowLinkRepo(false)
-                  setRepoName("")
-                }
-              }}
-              disabled={linkRepo.isPending}
-            >
-              Link
-            </Button>
-          </div>
-        </DialogContent>
-      </Dialog>
-    </div>
-  )
-}
diff --git a/src/app/project/issue-detail/ReactionBar.tsx b/src/app/project/issue-detail/ReactionBar.tsx
deleted file mode 100644
index 92ed5e4..0000000
--- a/src/app/project/issue-detail/ReactionBar.tsx
+++ /dev/null
@@ -1,111 +0,0 @@
-import { useState } from "react";
-import {
-  useIssueReactionsQuery,
-} from "@/hooks/useIssueExtraQuery";
-import { issueReactionAdd, issueReactionRemove } from "@/client/api";
-import { useCurrentUserQuery } from "@/hooks/useAuth";
-import { useQueryClient } from "@tanstack/react-query";
-import { Plus } from "lucide-react";
-import {
-    Popover,
-    PopoverContent,
-    PopoverTrigger
-} from "@/components/ui/popover";
-import { Button } from "@/components/ui/button";
-
-interface ReactionBarProps {
-  projectName: string;
-  issueNumber: number;
-}
-
-const EMOJI_MAP: Record<string, string> = {
-  plus_one: "👍",
-  minus_one: "👎",
-  laugh: "😄",
-  hooray: "🎉",
-  confused: "😕",
-  heart: "❤️",
-  rocket: "🚀",
-  eyes: "👀",
-};
-
-export function ReactionBar({ projectName, issueNumber }: ReactionBarProps) {
-  const { data: currentUser } = useCurrentUserQuery();
-  const { data: reactions } = useIssueReactionsQuery({ projectName, issueNumber });
-  const queryClient = useQueryClient();
-  const [isOpen, setIsOpen] = useState(false);
-
-  const handleToggleReaction = async (reaction: string) => {
-    const existing = reactions?.reactions.find(r =>
-        r.reaction === reaction &&
-        r.users.includes(currentUser?.uid ?? "me")
-    );
-
-    try {
-        if (existing) {
-            await issueReactionRemove(projectName, issueNumber, reaction);
-        } else {
-            await issueReactionAdd(projectName, issueNumber, { reaction });
-        }
-        queryClient.invalidateQueries({ queryKey: ["issue", projectName, issueNumber, "reactions"] });
-        setIsOpen(false);
-    } catch (err) {
-        console.error("Failed to toggle reaction", err);
-    }
-  };
-
-  if (!reactions) return null;
-
-  const displayed = reactions.reactions.filter(r => r.count > 0);
-
-  return (
-    <div className="flex flex-wrap items-center gap-2 mt-4">
-      {displayed.map((r) => (
-        <button
-          key={r.reaction}
-          onClick={() => handleToggleReaction(r.reaction)}
-          className={`inline-flex items-center gap-1.5 px-2 py-0.5 rounded-full text-xs font-medium border transition-colors ${
-            r.users.includes(currentUser?.uid ?? "me")
-              ? "border-[var(--accent)]"
-              : "border-transparent hover:border-[var(--border-default)]"
-          }`}
-          style={{
-            backgroundColor: r.users.includes(currentUser?.uid ?? "me") ? "rgba(var(--accent-rgb, 88, 101, 242), 0.1)" : "var(--surface-elevated)",
-            color: "var(--text-primary)",
-          }}
-        >
-          <span>{EMOJI_MAP[r.reaction] || r.reaction}</span>
-          <span>{r.count}</span>
-        </button>
-      ))}
-
-      <Popover open={isOpen} onOpenChange={setIsOpen}>
-        <PopoverTrigger asChild>
-            <Button
-                variant="ghost"
-                size="icon-sm"
-                className="rounded-full w-7 h-7"
-                style={{ backgroundColor: "var(--surface-elevated)" }}
-            >
-                <Plus className="w-3.5 h-3.5" />
-            </Button>
-        </PopoverTrigger>
-        <PopoverContent className="w-auto p-1" style={{ backgroundColor: "var(--surface-elevated)", borderColor: "var(--border-default)" }} side="top" align="start">
-            <div className="flex gap-1">
-                {Object.entries(EMOJI_MAP).map(([name, emoji]) => (
-                    <button
-                        key={name}
-                        onClick={() => handleToggleReaction(name)}
-                        className="p-1.5 hover:bg-[var(--surface-elevated)] rounded transition-colors text-lg"
-                        style={{ borderColor: "var(--border-default)" }}
-                        title={name}
-                    >
-                        {emoji}
-                    </button>
-                ))}
-            </div>
-        </PopoverContent>
-      </Popover>
-    </div>
-  );
-}
diff --git a/src/app/project/skills/CreateSkillDialog.tsx b/src/app/project/skills/CreateSkillDialog.tsx
deleted file mode 100644
index 807153c..0000000
--- a/src/app/project/skills/CreateSkillDialog.tsx
+++ /dev/null
@@ -1,132 +0,0 @@
-import { useState } from "react";
-import { useParams } from "react-router-dom";
-import {
-  Dialog,
-  DialogContent,
-  DialogDescription,
-  DialogFooter,
-  DialogHeader,
-  DialogTitle,
-} from "@/components/ui/dialog";
-import { Button } from "@/components/ui/button";
-import { Input } from "@/components/ui/input";
-import { Label } from "@/components/ui/label";
-import { Textarea } from "@/components/ui/textarea";
-import { useCreateSkillMutation } from "@/hooks/useSkillsQuery";
-
-interface CreateSkillDialogProps {
-  open: boolean;
-  onOpenChange: (open: boolean) => void;
-}
-
-export function CreateSkillDialog({ open, onOpenChange }: CreateSkillDialogProps) {
-  const { projectName } = useParams<{ projectName: string }>();
-  const { mutate: createSkill, isPending } = useCreateSkillMutation(projectName);
-
-  const [slug, setSlug] = useState("");
-  const [name, setName] = useState("");
-  const [description, setDescription] = useState("");
-  const [content, setContent] = useState("");
-  const [error, setError] = useState<string | null>(null);
-
-  const reset = () => {
-    setSlug("");
-    setName("");
-    setDescription("");
-    setContent("");
-    setError(null);
-  };
-
-  const handleOpenChange = (open: boolean) => {
-    if (!open) reset();
-    onOpenChange(open);
-  };
-
-  const handleSubmit = () => {
-    if (!slug.trim()) {
-      setError("Slug is required");
-      return;
-    }
-    if (!content.trim()) {
-      setError("Content is required");
-      return;
-    }
-    setError(null);
-    createSkill(
-      {
-        slug: slug.trim(),
-        name: name.trim() || undefined,
-        description: description.trim() || undefined,
-        content: content.trim(),
-      },
-      {
-        onSuccess: () => handleOpenChange(false),
-        onError: (err) =>
-          setError(err instanceof Error ? err.message : "Create failed"),
-      }
-    );
-  };
-
-  return (
-    <Dialog open={open} onOpenChange={handleOpenChange}>
-      <DialogContent className="sm:max-w-lg">
-        <DialogHeader>
-          <DialogTitle>Create skill</DialogTitle>
-          <DialogDescription>
-            Add a new AI skill to the project.
-          </DialogDescription>
-        </DialogHeader>
-        <div className="grid gap-4 py-2">
-          <div className="grid gap-2">
-            <Label htmlFor="slug">Slug *</Label>
-            <Input
-              id="slug"
-              value={slug}
-              onChange={(e) => setSlug(e.target.value)}
-              placeholder="my-skill"
-            />
-          </div>
-          <div className="grid gap-2">
-            <Label htmlFor="name">Name</Label>
-            <Input
-              id="name"
-              value={name}
-              onChange={(e) => setName(e.target.value)}
-              placeholder="My Skill"
-            />
-          </div>
-          <div className="grid gap-2">
-            <Label htmlFor="description">Description</Label>
-            <Input
-              id="description"
-              value={description}
-              onChange={(e) => setDescription(e.target.value)}
-              placeholder="What this skill does"
-            />
-          </div>
-          <div className="grid gap-2">
-            <Label htmlFor="content">Content *</Label>
-            <Textarea
-              id="content"
-              value={content}
-              onChange={(e) => setContent(e.target.value)}
-              placeholder="Skill content or prompt..."
-              rows={6}
-            />
-          </div>
-          {error && (
-            <p className="text-sm text-destructive">{error}</p>
-          )}
-        </div>
-        <DialogFooter>
-          <Button variant="outline" onClick={() => handleOpenChange(false)} disabled={isPending}>
-            Cancel
-          </Button>
-          <Button onClick={handleSubmit} disabled={isPending}>
-            {isPending ? "Creating..." : "Create"}
-          </Button>
-        </DialogFooter>
-      </DialogContent>
-    </Dialog>
-  );
-}
diff --git a/src/app/project/skills/DeleteSkillDialog.tsx b/src/app/project/skills/DeleteSkillDialog.tsx
deleted file mode 100644
index ff58026..0000000
--- a/src/app/project/skills/DeleteSkillDialog.tsx
+++ /dev/null
@@ -1,64 +0,0 @@
-import { useState } from "react";
-import { useParams } from "react-router-dom";
-import {
-  AlertDialog,
-  AlertDialogAction,
-  AlertDialogCancel,
-  AlertDialogContent,
-  AlertDialogDescription,
-  AlertDialogFooter,
-  AlertDialogHeader,
-  AlertDialogTitle,
-} from "@/components/ui/alert-dialog";
-import { useDeleteSkillMutation } from "@/hooks/useSkillsQuery";
-import type { SkillResponse } from "@/client/model";
-
-interface DeleteSkillDialogProps {
-  skill: SkillResponse;
-  open: boolean;
-  onOpenChange: (open: boolean) => void;
-  onDeleted?: () => void;
-}
-
-export function DeleteSkillDialog({ skill, open, onOpenChange, onDeleted }: DeleteSkillDialogProps) {
-  const { projectName } = useParams<{ projectName: string }>();
-  const { mutate: deleteSkill, isPending } = useDeleteSkillMutation(projectName);
-  const [error, setError] = useState<string | null>(null);
-
-  const handleDelete = () => {
-    setError(null);
-    deleteSkill(skill.slug, {
-      onSuccess: () => {
-        onOpenChange(false);
-        onDeleted?.();
-      },
-      onError: (err) => setError(err instanceof Error ? err.message : "Delete failed"),
-    });
-  };
-
-  return (
-    <AlertDialog open={open} onOpenChange={onOpenChange}>
-      <AlertDialogContent>
-        <AlertDialogHeader>
-          <AlertDialogTitle>Delete skill</AlertDialogTitle>
-          <AlertDialogDescription>
-            Are you sure you want to delete <strong>{skill.name}</strong>? This action cannot be undone.
-          </AlertDialogDescription>
-          {error && (
-            <p className="text-sm text-destructive mt-2">{error}</p>
-          )}
-        </AlertDialogHeader>
-        <AlertDialogFooter>
-          <AlertDialogCancel disabled={isPending}>Cancel</AlertDialogCancel>
-          <AlertDialogAction
-            variant="destructive"
-            onClick={handleDelete}
-            disabled={isPending}
-          >
-            {isPending ? "Deleting..." : "Delete"}
-          </AlertDialogAction>
-        </AlertDialogFooter>
-      </AlertDialogContent>
-    </AlertDialog>
-  );
-}