feat(skills/notifications): 多租户阶段 4 — 测试 + 前端

后端： tests/test_skills_multitenancy.py（12 个用例，全部通过） - SkillStore: 可见性 / 全局重名拒绝 / owner-only update+delete / admin override / ensure_legacy 仅补 NULL owner - 路由助手 _get_editable_skill_or_raise / _get_owned_skill_or_raise 的 owner / admin / 403 / 404 分流 - cascade_skill_unpublished_or_deleted： · unpublish 同时扫两个用户的 agent，剥掉 skill；自己改自己不发通知，其他人收 agent_skill_removed · admin_takedown 额外给 skill owner 发 skill_taken_down - NotificationStore CRUD + unread_count + 跨用户隔离 - 同步版 apply_automatic_transitions 用户隔离：A 跑 curator 不动 B 的 skill；curator_log per-user 分桶前端 — core/notifications/{types,api,hooks,index}.ts - 类型对齐 routers/notifications.py 的 NotificationItem - listNotifications / getUnreadCount / markRead / markAllRead / deleteNotification - useNotifications / useUnreadCount(refetchInterval=30s) / mutation 钩子前端 — components/workspace/notification-bell.tsx - 顶部铃铛图标 + 未读红点（>99 显示 99+） - 复用 DropdownMenu 作为弹层（项目暂无 Popover 原语） - 列表项：未读蓝点 + 标题 + body + 相对时间，悬停露出删除按钮 - 标记单条已读 / 全部已读 / 删除 - 接入 workspace-nav-menu.tsx，作为 SidebarMenuItem 放在设置入口上方前端 — Skill 多租户字段 - core/skills/type.ts 加 owner_user_id / published / builtin - core/skills/api.ts 加 setSkillPublished + deleteCustomSkill - core/skills/hooks.ts 加 useSetSkillPublished + useDeleteCustomSkill 前端 — settings/skill-settings-page.tsx - 抽出 SkillRow 子组件，每项渲染 owner badge（内置/我的/来自他人/ 已发布），样式抄自 agent-card.tsx 的 isBuiltin/isOwned/isFromOthers - canManage = isOwned || isAdmin；canTogglePublish 同上但排除内置 - 发布/取消发布按钮（Eye / EyeOff），调用 setSkillPublished - 删除按钮 + 二次确认 Dialog，调用 deleteCustomSkill - 启用开关保持原样前端 — i18n - types.ts: 新增 NotificationsTranslations + Translations.notifications； settings.skills 加 badgeBuiltin/badgeMine/badgeFromOthers(+Title) / badgePublished(+Title) / publishAction / unpublishAction / publishSuccess / unpublishSuccess / deleteAction / deleteConfirm / deleteSuccess - zh-CN.ts / en-US.ts 同步补齐对应文案验证 - PYTHONPATH=. uv run pytest tests/test_skills_multitenancy.py -v → 12 passed in 2.08s - 与现有 test_agents_backend / test_skill_evolution_runtime / test_skills_install_upload 并行跑：41 通过 + 1 个 pre-existing 失败 (test_validate_rejects_missing_skill_md 期望 "SKILL.md" 但收到 "Skill archive is empty"，与本期改动无关) - pnpm typecheck：本次新增/修改的文件零新增错误；剩余报错全部为 pre-existing 的 next/link、next/navigation 别名声明缺失、 workspace-nav-menu.tsx 的 SettingsSection 类型不匹配、nextra 缺失、markdown-docx 第三方库等 Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
2026-05-14 17:35:02 +08:00
1 parent 4ef96c7930
commit 99febda256
@@ -0,0 +1,212 @@
+"use client";
+
+import { BellIcon, CheckCheckIcon, Loader2, Trash2Icon } from "lucide-react";
+import { useState } from "react";
+import { toast } from "sonner";
+
+import { Button } from "@/components/ui/button";
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuTrigger,
+} from "@/components/ui/dropdown-menu";
+import { ScrollArea } from "@/components/ui/scroll-area";
+import {
+  SidebarMenuButton,
+  useSidebar,
+} from "@/components/ui/sidebar";
+import { useI18n } from "@/core/i18n/hooks";
+import {
+  useDeleteNotification,
+  useMarkAllNotificationsRead,
+  useMarkNotificationRead,
+  useNotifications,
+  useUnreadCount,
+} from "@/core/notifications";
+import type { NotificationItem } from "@/core/notifications";
+import { formatTimeAgo } from "@/core/utils/datetime";
+import { cn } from "@/lib/utils";
+
+const BELL_LIMIT = 20;
+
+export function NotificationBell() {
+  const { t } = useI18n();
+  const { open: isSidebarOpen } = useSidebar();
+  const [open, setOpen] = useState(false);
+
+  // Render badge from the lightweight count endpoint so the bell stays cheap
+  // when nobody opens it. Only when the user actually opens the dropdown do
+  // we pay for the full list query.
+  const { data: unreadCount = 0 } = useUnreadCount();
+  const {
+    data: notifications,
+    isLoading,
+    isFetching,
+  } = useNotifications({ limit: BELL_LIMIT });
+  const markRead = useMarkNotificationRead();
+  const markAllRead = useMarkAllNotificationsRead();
+  const removeNotification = useDeleteNotification();
+
+  const hasUnread = unreadCount > 0;
+  const items = notifications ?? [];
+
+  async function handleClickItem(notification: NotificationItem) {
+    if (notification.read) return;
+    try {
+      await markRead.mutateAsync(notification.id);
+    } catch (err) {
+      toast.error(err instanceof Error ? err.message : String(err));
+    }
+  }
+
+  async function handleMarkAllRead() {
+    if (!hasUnread) return;
+    try {
+      await markAllRead.mutateAsync();
+    } catch (err) {
+      toast.error(err instanceof Error ? err.message : String(err));
+    }
+  }
+
+  async function handleDelete(notification: NotificationItem) {
+    try {
+      await removeNotification.mutateAsync(notification.id);
+    } catch (err) {
+      toast.error(err instanceof Error ? err.message : String(err));
+    }
+  }
+
+  return (
+    <DropdownMenu open={open} onOpenChange={setOpen}>
+      <DropdownMenuTrigger asChild>
+        <SidebarMenuButton
+          size="lg"
+          className="data-[state=open]:bg-sidebar-accent data-[state=open]:text-sidebar-accent-foreground"
+          aria-label={t.notifications.bellAria}
+        >
+          {isSidebarOpen ? (
+            <div className="text-sidebar-foreground/85 flex w-full items-center gap-2 text-left text-sm">
+              <div className="relative">
+                <BellIcon className="size-4" />
+                {hasUnread && (
+                  <span className="absolute -right-1 -top-1 flex h-3.5 min-w-3.5 items-center justify-center rounded-full bg-red-500 px-1 text-[10px] font-medium leading-none text-white">
+                    {unreadCount > 99 ? "99+" : unreadCount}
+                  </span>
+                )}
+              </div>
+              <span>{t.notifications.title}</span>
+              {hasUnread && (
+                <span className="text-muted-foreground ml-auto text-xs">
+                  {t.notifications.unreadShort.replace("{count}", String(unreadCount))}
+                </span>
+              )}
+            </div>
+          ) : (
+            <div className="flex size-full items-center justify-center">
+              <div className="relative">
+                <BellIcon className="text-sidebar-foreground/80 size-4" />
+                {hasUnread && (
+                  <span className="absolute -right-1 -top-1 size-2 rounded-full bg-red-500" />
+                )}
+              </div>
+            </div>
+          )}
+        </SidebarMenuButton>
+      </DropdownMenuTrigger>
+      <DropdownMenuContent
+        align="end"
+        side="right"
+        sideOffset={8}
+        className="w-96 p-0"
+      >
+        <div className="flex items-center justify-between gap-2 border-b px-3 py-2">
+          <div className="flex items-center gap-2">
+            <BellIcon className="size-4" />
+            <span className="text-sm font-semibold">
+              {t.notifications.title}
+            </span>
+            {isFetching && !isLoading && (
+              <Loader2 className="text-muted-foreground size-3 animate-spin" />
+            )}
+          </div>
+          <Button
+            size="sm"
+            variant="ghost"
+            className="h-7 px-2 text-xs"
+            disabled={!hasUnread || markAllRead.isPending}
+            onClick={() => void handleMarkAllRead()}
+          >
+            <CheckCheckIcon className="mr-1 size-3.5" />
+            {t.notifications.markAllRead}
+          </Button>
+        </div>
+        <ScrollArea className="max-h-[60vh]">
+          {isLoading ? (
+            <div className="text-muted-foreground flex items-center justify-center gap-2 py-8 text-sm">
+              <Loader2 className="size-4 animate-spin" />
+              {t.common.loading}
+            </div>
+          ) : items.length === 0 ? (
+            <div className="text-muted-foreground py-10 text-center text-sm">
+              {t.notifications.empty}
+            </div>
+          ) : (
+            <ul className="divide-y">
+              {items.map((notification) => (
+                <li
+                  key={notification.id}
+                  className={cn(
+                    "group cursor-pointer px-3 py-2 transition-colors hover:bg-accent/40",
+                    !notification.read && "bg-blue-500/5",
+                  )}
+                  onClick={() => void handleClickItem(notification)}
+                >
+                  <div className="flex items-start gap-2">
+                    {!notification.read && (
+                      <span className="mt-1.5 size-2 shrink-0 rounded-full bg-blue-500" />
+                    )}
+                    <div className="min-w-0 flex-1">
+                      <div className="flex items-baseline justify-between gap-2">
+                        <p
+                          className={cn(
+                            "truncate text-sm",
+                            !notification.read && "font-medium",
+                          )}
+                          title={notification.title}
+                        >
+                          {notification.title || notification.type}
+                        </p>
+                        {notification.created_at && (
+                          <span className="text-muted-foreground shrink-0 text-[10px]">
+                            {formatTimeAgo(notification.created_at)}
+                          </span>
+                        )}
+                      </div>
+                      {notification.body && (
+                        <p className="text-muted-foreground line-clamp-2 text-xs">
+                          {notification.body}
+                        </p>
+                      )}
+                    </div>
+                    <Button
+                      size="icon"
+                      variant="ghost"
+                      className="text-muted-foreground hover:text-destructive size-6 shrink-0 opacity-0 group-hover:opacity-100"
+                      onClick={(event) => {
+                        event.stopPropagation();
+                        void handleDelete(notification);
+                      }}
+                      aria-label={t.notifications.deleteAria}
+                    >
+                      <Trash2Icon className="size-3" />
+                    </Button>
+                  </div>
+                </li>
+              ))}
+            </ul>
+          )}
+        </ScrollArea>
+      </DropdownMenuContent>
+    </DropdownMenu>
+  );
+}
@@ -1,6 +1,17 @@
 "use client";

-import { AlertCircle, CheckCircle2, FileArchive, Loader2, SparklesIcon, TrendingUpIcon, Upload } from "lucide-react";
+import {
+  AlertCircle,
+  CheckCircle2,
+  EyeIcon,
+  EyeOffIcon,
+  FileArchive,
+  Loader2,
+  SparklesIcon,
+  Trash2Icon,
+  TrendingUpIcon,
+  Upload,
+} from "lucide-react";
 import { useRouter } from "next/navigation";
 import { useCallback, useMemo, useRef, useState } from "react";
 import { toast } from "sonner";
@@ -10,6 +21,7 @@ import { Button } from "@/components/ui/button";
 import {
  Dialog,
  DialogContent,
+  DialogDescription,
  DialogFooter,
  DialogHeader,
  DialogTitle,
@@ -31,11 +43,14 @@ import {
 } from "@/components/ui/item";
 import { Switch } from "@/components/ui/switch";
 import { Tabs, TabsList, TabsTrigger } from "@/components/ui/tabs";
+import { getStoredAuth } from "@/core/auth";
 import { useI18n } from "@/core/i18n/hooks";
 import type { ValidateSkillUploadResponse } from "@/core/skills/api";
 import {
+  useDeleteCustomSkill,
  useEnableSkill,
  useInstallSkillUpload,
+  useSetSkillPublished,
  useSkills,
  useValidateSkillUpload,
 } from "@/core/skills/hooks";
@@ -80,6 +95,11 @@ function SkillSettingsList({
    () => skills.filter((skill) => skill.category === filter),
    [skills, filter],
  );
+
+  const storedAuth = useMemo(() => getStoredAuth(), []);
+  const currentUserId = storedAuth?.user_id ?? null;
+  const isAdmin = storedAuth?.system_role === "admin";
+
  const handleCreateSkill = () => {
    onClose?.();
    router.push("/?mode=skill");
@@ -127,25 +147,15 @@ function SkillSettingsList({
      )}
      {filteredSkills.length > 0 &&
        filteredSkills.map((skill) => (
-          <Item className="w-full" variant="outline" key={skill.name}>
-            <ItemContent>
-              <ItemTitle>
-                <div className="flex items-center gap-2">{skill.name}</div>
-              </ItemTitle>
-              <ItemDescription className="line-clamp-4">
-                {skill.description}
-              </ItemDescription>
-            </ItemContent>
-            <ItemActions>
-              <Switch
-                checked={skill.enabled}
-                disabled={env.NEXT_PUBLIC_STATIC_WEBSITE_ONLY === "true"}
-                onCheckedChange={(checked) =>
-                  enableSkill({ skillName: skill.name, enabled: checked })
-                }
-              />
-            </ItemActions>
-          </Item>
+          <SkillRow
+            key={skill.name}
+            skill={skill}
+            currentUserId={currentUserId}
+            isAdmin={isAdmin}
+            onToggleEnabled={(enabled) =>
+              enableSkill({ skillName: skill.name, enabled })
+            }
+          />
        ))}
      <InstallSkillDialog
        open={installOpen}
@@ -155,6 +165,176 @@ function SkillSettingsList({
  );
 }

+function SkillRow({
+  skill,
+  currentUserId,
+  isAdmin,
+  onToggleEnabled,
+}: {
+  skill: Skill;
+  currentUserId: string | null;
+  isAdmin: boolean;
+  onToggleEnabled: (enabled: boolean) => void;
+}) {
+  const { t } = useI18n();
+  const setPublished = useSetSkillPublished();
+  const deleteSkill = useDeleteCustomSkill();
+  const [confirmDeleteOpen, setConfirmDeleteOpen] = useState(false);
+
+  const isCustom = skill.category === "custom";
+  // Built-in flag falls back to "no DB owner" so legacy responses without
+  // the multitenancy fields still classify public skills correctly.
+  const isBuiltin = skill.builtin ?? !skill.owner_user_id;
+  const isOwned =
+    isCustom && !isBuiltin && !!skill.owner_user_id && skill.owner_user_id === currentUserId;
+  const isFromOthers = isCustom && !isBuiltin && !isOwned;
+  // Admin can edit/delete/unpublish anyone's skill; non-admin only their own.
+  const canManage = isCustom && (isOwned || isAdmin);
+  const canTogglePublish = canManage && !isBuiltin;
+
+  async function handleTogglePublished(next: boolean) {
+    try {
+      await setPublished.mutateAsync({ skillName: skill.name, published: next });
+      toast.success(
+        next
+          ? t.settings.skills.publishSuccess
+          : t.settings.skills.unpublishSuccess,
+      );
+    } catch (err) {
+      toast.error(err instanceof Error ? err.message : String(err));
+    }
+  }
+
+  async function handleDelete() {
+    try {
+      await deleteSkill.mutateAsync(skill.name);
+      toast.success(t.settings.skills.deleteSuccess);
+      setConfirmDeleteOpen(false);
+    } catch (err) {
+      toast.error(err instanceof Error ? err.message : String(err));
+    }
+  }
+
+  return (
+    <>
+      <Item className="w-full" variant="outline">
+        <ItemContent>
+          <ItemTitle>
+            <div className="flex flex-wrap items-center gap-2">
+              <span>{skill.name}</span>
+              {isBuiltin && isCustom && (
+                <Badge variant="secondary" className="text-xs">
+                  {t.settings.skills.badgeBuiltin}
+                </Badge>
+              )}
+              {isOwned && (
+                <Badge
+                  variant="default"
+                  className="bg-emerald-500/15 text-emerald-700 hover:bg-emerald-500/15 dark:text-emerald-300 text-xs"
+                >
+                  {t.settings.skills.badgeMine}
+                </Badge>
+              )}
+              {isFromOthers && (
+                <Badge
+                  variant="outline"
+                  className="border-blue-500/30 text-blue-700 dark:text-blue-300 text-xs"
+                  title={
+                    skill.owner_user_id
+                      ? t.settings.skills.badgeFromOthersTitle.replace(
+                          "{user_id}",
+                          skill.owner_user_id,
+                        )
+                      : undefined
+                  }
+                >
+                  {t.settings.skills.badgeFromOthers}
+                </Badge>
+              )}
+              {isOwned && skill.published && (
+                <Badge
+                  variant="outline"
+                  className="border-sky-500/30 text-sky-700 dark:text-sky-300 text-xs"
+                  title={t.settings.skills.badgePublishedTitle}
+                >
+                  {t.settings.skills.badgePublished}
+                </Badge>
+              )}
+            </div>
+          </ItemTitle>
+          <ItemDescription className="line-clamp-4">
+            {skill.description}
+          </ItemDescription>
+        </ItemContent>
+        <ItemActions>
+          {canTogglePublish && (
+            <Button
+              size="icon"
+              variant="ghost"
+              className="h-8 w-8 shrink-0"
+              disabled={setPublished.isPending}
+              onClick={() => void handleTogglePublished(!skill.published)}
+              title={
+                skill.published
+                  ? t.settings.skills.unpublishAction
+                  : t.settings.skills.publishAction
+              }
+            >
+              {skill.published ? (
+                <EyeOffIcon className="size-3.5" />
+              ) : (
+                <EyeIcon className="size-3.5" />
+              )}
+            </Button>
+          )}
+          {canManage && (
+            <Button
+              size="icon"
+              variant="ghost"
+              className="text-destructive hover:text-destructive h-8 w-8 shrink-0"
+              onClick={() => setConfirmDeleteOpen(true)}
+              title={t.settings.skills.deleteAction}
+            >
+              <Trash2Icon className="size-3.5" />
+            </Button>
+          )}
+          <Switch
+            checked={skill.enabled}
+            disabled={env.NEXT_PUBLIC_STATIC_WEBSITE_ONLY === "true"}
+            onCheckedChange={(checked) => onToggleEnabled(checked)}
+          />
+        </ItemActions>
+      </Item>
+      <Dialog open={confirmDeleteOpen} onOpenChange={setConfirmDeleteOpen}>
+        <DialogContent>
+          <DialogHeader>
+            <DialogTitle>{t.settings.skills.deleteAction}</DialogTitle>
+            <DialogDescription>
+              {t.settings.skills.deleteConfirm.replace("{name}", skill.name)}
+            </DialogDescription>
+          </DialogHeader>
+          <DialogFooter>
+            <Button
+              variant="outline"
+              onClick={() => setConfirmDeleteOpen(false)}
+              disabled={deleteSkill.isPending}
+            >
+              {t.common.cancel}
+            </Button>
+            <Button
+              variant="destructive"
+              onClick={() => void handleDelete()}
+              disabled={deleteSkill.isPending}
+            >
+              {deleteSkill.isPending ? t.common.loading : t.common.delete}
+            </Button>
+          </DialogFooter>
+        </DialogContent>
+      </Dialog>
+    </>
+  );
+}
+
 function EmptySkill({ onCreateSkill }: { onCreateSkill: () => void }) {
  const { t } = useI18n();
  return (
@@ -19,6 +19,7 @@ import {
 } from "@/components/ui/sidebar";
 import { useI18n } from "@/core/i18n/hooks";

+import { NotificationBell } from "./notification-bell";
 import { SettingsDialog } from "./settings";

 function NavMenuButtonContent({
@@ -62,6 +63,9 @@ export function WorkspaceNavMenu() {
        defaultSection={settingsDefaultSection}
      />
      <SidebarMenu className="w-full">
+        <SidebarMenuItem>
+          <NotificationBell />
+        </SidebarMenuItem>
        <SidebarMenuItem>
          {mounted ? (
            <DropdownMenu>
@@ -439,6 +439,20 @@ export const enUS: Translations = {
      emptyDescription:
        "Put your agent skill folders under the `/skills/custom` folder under the root folder of CM Assistant.",
      emptyButton: "Create Your First Skill",
+      badgeBuiltin: "Built-in",
+      badgeMine: "Mine",
+      badgeFromOthers: "From others",
+      badgeFromOthersTitle: "Owned by user {user_id}",
+      badgePublished: "Published",
+      badgePublishedTitle: "Visible to all users",
+      publishAction: "Publish",
+      unpublishAction: "Unpublish",
+      publishSuccess: "Skill published",
+      unpublishSuccess: "Skill unpublished",
+      deleteAction: "Delete skill",
+      deleteConfirm:
+        "Delete skill \"{name}\"? This cannot be undone and the skill will be removed from any agent that referenced it.",
+      deleteSuccess: "Skill deleted",
      installDialog: {
        title: "Install skill",
        dropHint: "Drop a .zip or .skill archive here, or",
@@ -539,4 +553,13 @@ export const enUS: Translations = {
      emptyDescription: "Credits and acknowledgements will show here.",
    },
  },
+
+  notifications: {
+    title: "Notifications",
+    bellAria: "Open notifications",
+    unreadShort: "{count} unread",
+    markAllRead: "Mark all read",
+    empty: "No notifications",
+    deleteAria: "Delete notification",
+  },
 };
@@ -1,5 +1,14 @@
 import type { LucideIcon } from "lucide-react";

+export interface NotificationsTranslations {
+  title: string;
+  bellAria: string;
+  unreadShort: string;
+  markAllRead: string;
+  empty: string;
+  deleteAria: string;
+}
+
 export interface Translations {
  // Locale meta
  locale: {
@@ -359,6 +368,19 @@ export interface Translations {
      emptyTitle: string;
      emptyDescription: string;
      emptyButton: string;
+      badgeBuiltin: string;
+      badgeMine: string;
+      badgeFromOthers: string;
+      badgeFromOthersTitle: string;
+      badgePublished: string;
+      badgePublishedTitle: string;
+      publishAction: string;
+      unpublishAction: string;
+      publishSuccess: string;
+      unpublishSuccess: string;
+      deleteAction: string;
+      deleteConfirm: string;
+      deleteSuccess: string;
      installDialog: {
        title: string;
        dropHint: string;
@@ -446,4 +468,7 @@ export interface Translations {
      emptyDescription: string;
    };
  };
+
+  // In-app notification inbox (bell in the workspace sidebar)
+  notifications: NotificationsTranslations;
 }
@@ -420,6 +420,19 @@ export const zhCN: Translations = {
      emptyDescription:
        "将你的 Agent Skill 文件夹放在 CM 助手 根目录下的 `/skills/custom` 文件夹中。",
      emptyButton: "创建你的第一个技能",
+      badgeBuiltin: "内置",
+      badgeMine: "我的",
+      badgeFromOthers: "来自他人",
+      badgeFromOthersTitle: "来自用户 {user_id}",
+      badgePublished: "已发布",
+      badgePublishedTitle: "该技能已对所有用户可见",
+      publishAction: "发布",
+      unpublishAction: "取消发布",
+      publishSuccess: "已发布",
+      unpublishSuccess: "已取消发布",
+      deleteAction: "删除技能",
+      deleteConfirm: "确认删除技能 “{name}”？该操作不可恢复,且会从引用它的所有专家中自动移除。",
+      deleteSuccess: "技能已删除",
      installDialog: {
        title: "安装技能",
        dropHint: "拖拽 .zip 或 .skill 文件到此处，或者",
@@ -512,4 +525,13 @@ export const zhCN: Translations = {
      emptyDescription: "相关的致谢信息会展示在这里。",
    },
  },
+
+  notifications: {
+    title: "通知",
+    bellAria: "打开通知",
+    unreadShort: "{count} 条未读",
+    markAllRead: "全部已读",
+    empty: "暂无通知",
+    deleteAria: "删除通知",
+  },
 };
@@ -0,0 +1,60 @@
+import { apiFetch } from "@/core/api";
+import { getBackendBaseURL } from "@/core/config";
+
+import type {
+  NotificationItem,
+  NotificationListResponse,
+  NotificationUnreadCountResponse,
+} from "./types";
+
+async function parseDetail(res: Response, fallback: string): Promise<Error> {
+  const data = (await res.json().catch(() => ({}))) as { detail?: unknown };
+  const detail = typeof data.detail === "string" && data.detail ? data.detail : null;
+  return new Error(detail ?? `${fallback} (HTTP ${res.status})`);
+}
+
+export async function listNotifications(
+  options: { unreadOnly?: boolean; limit?: number } = {},
+): Promise<NotificationItem[]> {
+  const params = new URLSearchParams();
+  if (options.unreadOnly) params.set("unread_only", "true");
+  if (options.limit) params.set("limit", String(options.limit));
+  const query = params.toString();
+  const url = `${getBackendBaseURL()}/api/notifications${query ? `?${query}` : ""}`;
+  const res = await apiFetch(url);
+  if (!res.ok) throw await parseDetail(res, "Failed to list notifications");
+  const data = (await res.json()) as NotificationListResponse;
+  return data.items;
+}
+
+export async function getUnreadCount(): Promise<number> {
+  const res = await apiFetch(`${getBackendBaseURL()}/api/notifications/unread_count`);
+  if (!res.ok) throw await parseDetail(res, "Failed to load unread count");
+  const data = (await res.json()) as NotificationUnreadCountResponse;
+  return data.unread;
+}
+
+export async function markNotificationRead(id: string): Promise<void> {
+  const res = await apiFetch(
+    `${getBackendBaseURL()}/api/notifications/${encodeURIComponent(id)}/read`,
+    { method: "POST" },
+  );
+  if (!res.ok) throw await parseDetail(res, "Failed to mark notification read");
+}
+
+export async function markAllNotificationsRead(): Promise<number> {
+  const res = await apiFetch(`${getBackendBaseURL()}/api/notifications/read_all`, {
+    method: "POST",
+  });
+  if (!res.ok) throw await parseDetail(res, "Failed to mark all read");
+  const data = (await res.json()) as { updated: number };
+  return data.updated;
+}
+
+export async function deleteNotification(id: string): Promise<void> {
+  const res = await apiFetch(
+    `${getBackendBaseURL()}/api/notifications/${encodeURIComponent(id)}`,
+    { method: "DELETE" },
+  );
+  if (!res.ok) throw await parseDetail(res, "Failed to delete notification");
+}
@@ -0,0 +1,62 @@
+import { useMutation, useQuery, useQueryClient } from "@tanstack/react-query";
+
+import {
+  deleteNotification,
+  getUnreadCount,
+  listNotifications,
+  markAllNotificationsRead,
+  markNotificationRead,
+} from "./api";
+
+const ROOT_KEY = ["notifications"] as const;
+const COUNT_KEY = [...ROOT_KEY, "unread-count"] as const;
+
+export function useNotifications(options: { limit?: number; unreadOnly?: boolean } = {}) {
+  const { limit = 20, unreadOnly = false } = options;
+  return useQuery({
+    queryKey: [...ROOT_KEY, "list", { limit, unreadOnly }],
+    queryFn: () => listNotifications({ limit, unreadOnly }),
+  });
+}
+
+export function useUnreadCount(refetchInterval = 30000) {
+  return useQuery({
+    queryKey: COUNT_KEY,
+    queryFn: () => getUnreadCount(),
+    refetchInterval,
+    // Keep the badge fresh when the user comes back to the tab without
+    // waiting for the next interval tick.
+    refetchOnWindowFocus: true,
+  });
+}
+
+function useInvalidateNotifications() {
+  const queryClient = useQueryClient();
+  return () => {
+    void queryClient.invalidateQueries({ queryKey: ROOT_KEY });
+  };
+}
+
+export function useMarkNotificationRead() {
+  const invalidate = useInvalidateNotifications();
+  return useMutation({
+    mutationFn: (id: string) => markNotificationRead(id),
+    onSuccess: invalidate,
+  });
+}
+
+export function useMarkAllNotificationsRead() {
+  const invalidate = useInvalidateNotifications();
+  return useMutation({
+    mutationFn: () => markAllNotificationsRead(),
+    onSuccess: invalidate,
+  });
+}
+
+export function useDeleteNotification() {
+  const invalidate = useInvalidateNotifications();
+  return useMutation({
+    mutationFn: (id: string) => deleteNotification(id),
+    onSuccess: invalidate,
+  });
+}
@@ -0,0 +1,3 @@
+export * from "./api";
+export * from "./hooks";
+export * from "./types";
@@ -0,0 +1,18 @@
+export interface NotificationItem {
+  id: string;
+  user_id: string;
+  type: string;
+  title: string;
+  body: string;
+  payload: Record<string, unknown>;
+  read: boolean;
+  created_at: string | null;
+}
+
+export interface NotificationListResponse {
+  items: NotificationItem[];
+}
+
+export interface NotificationUnreadCountResponse {
+  unread: number;
+}
@@ -110,3 +110,37 @@ export async function installSkillUpload(
  }
  return response.json() as Promise<InstallSkillResponse>;
 }
+
+export interface SetSkillPublishedResponse {
+  name: string;
+  owner_user_id: string | null;
+  published: boolean;
+}
+
+export async function setSkillPublished(
+  skillName: string,
+  published: boolean,
+): Promise<SetSkillPublishedResponse> {
+  const response = await apiFetch(
+    `${getBackendBaseURL()}/api/skills/custom/${encodeURIComponent(skillName)}/published`,
+    {
+      method: "PUT",
+      headers: { "Content-Type": "application/json" },
+      body: JSON.stringify({ published }),
+    },
+  );
+  if (!response.ok) {
+    throw await parseDetailedError(response, "Failed to update published state");
+  }
+  return response.json() as Promise<SetSkillPublishedResponse>;
+}
+
+export async function deleteCustomSkill(skillName: string): Promise<void> {
+  const response = await apiFetch(
+    `${getBackendBaseURL()}/api/skills/custom/${encodeURIComponent(skillName)}`,
+    { method: "DELETE" },
+  );
+  if (!response.ok) {
+    throw await parseDetailedError(response, "Failed to delete skill");
+  }
+}
@@ -1,6 +1,12 @@
 import { useMutation, useQuery, useQueryClient } from "@tanstack/react-query";

-import { enableSkill, installSkillUpload, validateSkillUpload } from "./api";
+import {
+  deleteCustomSkill,
+  enableSkill,
+  installSkillUpload,
+  setSkillPublished,
+  validateSkillUpload,
+} from "./api";

 import { loadSkills } from ".";

@@ -46,3 +52,29 @@ export function useInstallSkillUpload() {
    },
  });
 }
+
+export function useSetSkillPublished() {
+  const queryClient = useQueryClient();
+  return useMutation({
+    mutationFn: ({
+      skillName,
+      published,
+    }: {
+      skillName: string;
+      published: boolean;
+    }) => setSkillPublished(skillName, published),
+    onSuccess: () => {
+      void queryClient.invalidateQueries({ queryKey: ["skills"] });
+    },
+  });
+}
+
+export function useDeleteCustomSkill() {
+  const queryClient = useQueryClient();
+  return useMutation({
+    mutationFn: (skillName: string) => deleteCustomSkill(skillName),
+    onSuccess: () => {
+      void queryClient.invalidateQueries({ queryKey: ["skills"] });
+    },
+  });
+}
@@ -4,4 +4,9 @@ export interface Skill {
  category: string;
  license: string;
  enabled: boolean;
+  // Multitenancy fields — owner_user_id is null for built-in / public skills.
+  // ``builtin`` mirrors that nullness for explicit branching on the UI side.
+  owner_user_id?: string | null;
+  published?: boolean;
+  builtin?: boolean;
 }