feat(FR-3877): move the system announcement to the domain app config

The announcement lived in the manager's legacy announcement endpoint
(`/manager/announcement`, etcd) as one markdown string whose first line
the banner lifted out as a title. It now lives in the domain app config
as `domainConfig.announcement = { enabled, title, body, updatedAt }`, in
line with the other app-config migrations under FR-1203.

- `useUpdateDomainAppConfig()` joins the app-config hooks: resolves the
  domain uuid through `domainV2.entityId` (DOMAIN scope is addressed by
  uuid, the client only knows the name), re-reads the raw DOMAIN-scope
  `domainConfig` fragment, replaces one sub-key (`undefined` removes it)
  through `scopedUpsertAppConfigFragments`, then refetches the merged
  `myAppConfigs(['domainConfig'])` view so `useDomainAppConfig` readers
  update without a reload.
- `AnnouncementBanner` reads `useDomainAppConfig('announcement')`. The
  title shows in every state; the body (markdown) renders behind the
  expand toggle. Dismissal is keyed by `updatedAt` instead of the message
  text, so a re-published announcement resurfaces the banner.
- `AnnouncementEditModal` gains a Title field and the Enabled checkbox
  the legacy endpoint could not persist (it stored by presence only);
  Delete removes the sub-key. The content suspends on the Relay read
  behind a skeleton-bodied modal fallback.
- `announcementSummary.ts` (first-line extraction, markdown-to-prose) and
  `useSuspenseGetAnnouncement` (TanStack) go away with the derived title;
  `announcement.ts` keeps the code-point title cutoff and the visibility
  and collapsibility predicates. `service.get_announcement` /
  `update_announcement` stay in the client library but have no caller.

No manager-version fallback: the app-config reads need 26.9.0+, which the
LTS this ships in guarantees.

Co-Authored-By: Claude Fable 5.1 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01B13bqRK3V12jiCvia8fm2w

Author: ironAiken2

react/src/__generated__/useAppConfigDomainIdQuery.graphql.ts

@@ -3,12 +3,14 @@
  Copyright (c) 2015-2026 Lablup Inc. All rights reserved.
  */
 import {
+  DOMAIN_ANNOUNCEMENT_CONFIG_KEY,
+  DomainAnnouncement,
   isAnnouncementCollapsible,
-  splitAnnouncement,
-  summarizeAnnouncement,
-} from '../helper/announcementSummary';
+  isAnnouncementVisible,
+  summarizeAnnouncementTitle,
+} from '../helper/announcement';
 import { useCurrentUserRole } from '../hooks/backendai';
-import { useSuspenseGetAnnouncement } from '../hooks/useSuspenseGetAnnouncement';
+import { useDomainAppConfig } from '../hooks/useAppConfig';
 import './AnnouncementBanner.css';
 import AnnouncementEditModal from './AnnouncementEditModal';
 import { Banner } from '@astryxdesign/core/Banner';
@@ -20,17 +22,16 @@ import {
   useSessionStorageState,
   useToggle,
 } from 'backend.ai-ui';
-import * as _ from 'lodash-es';
 import { ChevronDownIcon, ChevronUpIcon, SquarePenIcon } from 'lucide-react';
 import React from 'react';
 import { useTranslation } from 'react-i18next';
 
 /**
- * The system announcement as AppShell's top banner (FR-3612), replacing the
- * StartPage-only `AnnouncementAlert`. A long announcement renders collapsed —
- * a one-line summary followed by an explicit labelled expand toggle revealing
- * the full markdown. Dismissal is remembered per session and per message, so
- * a new announcement resurfaces the banner.
+ * The domain's system announcement as AppShell's top banner (FR-3612), read
+ * from the domain app config (FR-3877). The title shows in every state; a
+ * body (or a title past the cutoff) renders collapsed behind an explicit
+ * labelled expand toggle. Dismissal is remembered per session and per
+ * publication, so a re-published announcement resurfaces the banner.
  */
 const AnnouncementBanner: React.FC = () => {
   'use memo';
@@ -42,31 +43,26 @@ const AnnouncementBanner: React.FC = () => {
   const [isEditOpen, { toggle: toggleEditModal }] = useToggle(false);
   // Expansion is owned here rather than by Banner's `children` slot: Banner's
   // own toggle sits at the far end of the header, away from the text it
-  // reveals. (0.5.0's `collapsible` config added a controlled mode; the
-  // placement is what still rules the slot out.)
+  // reveals.
   const [isExpanded, { toggle: toggleExpanded }] = useToggle(false);
-  const { data: announcement } = useSuspenseGetAnnouncement();
-  const [dismissedMessage, setDismissedMessage] = useSessionStorageState<
+  const announcement = useDomainAppConfig<DomainAnnouncement>(
+    DOMAIN_ANNOUNCEMENT_CONFIG_KEY,
+  );
+  const [dismissedKey, setDismissedKey] = useSessionStorageState<
     string | undefined
   >('backendaiwebui.dismissed_announcement');
 
-  const message = announcement.message ?? '';
-  if (_.isEmpty(message) || dismissedMessage === message) {
+  if (!isAnnouncementVisible(announcement)) {
+    return null;
+  }
+  const dismissKey = announcement.updatedAt ?? announcement.title;
+  if (dismissedKey === dismissKey) {
     return null;
   }
 
-  // Must use the same renderer settings as the editor preview (FR-3402); the
-  // banner sits above the page h1, so markdown `#` starts at h3.
-  const renderMarkdown = (source: string) => (
-    <Markdown density="compact" headingLevelStart={3} autolink="gfm">
-      {source}
-    </Markdown>
-  );
-  const isCollapsible = isAnnouncementCollapsible(message);
-  // The first line is the banner's title in both states, so the expanded body
-  // is the source WITHOUT it — expanding adds only what the title does not
-  // already show.
-  const { headline, body } = splitAnnouncement(message);
+  const title = announcement.title.trim();
+  const body = (announcement.body ?? '').trim();
+  const isCollapsible = isAnnouncementCollapsible(announcement);
 
   return (
     <>
@@ -83,14 +79,13 @@ const AnnouncementBanner: React.FC = () => {
           } as React.CSSProperties
         }
         isDismissable
-        onDismiss={() => setDismissedMessage(message)}
-        // Collapsible shape: the first line is the title in BOTH states, with
-        // the expand toggle right beside it — collapsed it is cut to one row,
-        // expanded it shows in full (so a cropped long line is never lost) and
-        // `description` adds the rest of the source below it. Short shape:
-        // body in `description`, not `title` — Banner centres its header on
+        onDismiss={() => setDismissedKey(dismissKey)}
+        // Collapsible shape: the title in BOTH states with the expand toggle
+        // right beside it — collapsed it is cut to one row, expanded it shows
+        // in full and `description` adds the body below it. Short shape: the
+        // title in `description`, not `title` — Banner centres its header on
         // `description == null && hasActions`, which misaligns the icon and
-        // Edit button against a multi-line announcement (FR-3482).
+        // Edit button against a wrapping line (FR-3482).
         title={
           isCollapsible ? (
             <span className="webui-announcement-title">
@@ -101,7 +96,7 @@ const AnnouncementBanner: React.FC = () => {
                     : 'webui-announcement-summary'
                 }
               >
-                {isExpanded ? headline : summarizeAnnouncement(message)}
+                {isExpanded ? title : summarizeAnnouncementTitle(title)}
               </span>
               <Button
                 className="webui-announcement-toggle"
@@ -125,11 +120,18 @@ const AnnouncementBanner: React.FC = () => {
           ) : null
         }
         description={
-          isCollapsible
-            ? isExpanded && body.length > 0
-              ? renderMarkdown(body)
-              : undefined
-            : renderMarkdown(message)
+          isCollapsible ? (
+            isExpanded && body.length > 0 ? (
+              // Must use the same renderer settings as the editor preview
+              // (FR-3402); the banner sits above the page h1, so markdown `#`
+              // starts at h3.
+              <Markdown density="compact" headingLevelStart={3} autolink="gfm">
+                {body}
+              </Markdown>
+            ) : undefined
+          ) : (
+            title
+          )
         }
         endContent={
           isSuperAdmin ? (