@loom-framework/core 0.1.0-alpha.157 → 0.1.0-alpha.159

package/dist/cli/templates/login-page.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"login-page.d.ts","sourceRoot":"","sources":["../../../src/cli/templates/login-page.ts"],"names":[],"mappings":"AAAA;;GAEG;AAEH,wBAAgB,iBAAiB,IAAI,MAAM,CAQ1C"}
+{"version":3,"file":"login-page.d.ts","sourceRoot":"","sources":["../../../src/cli/templates/login-page.ts"],"names":[],"mappings":"AAAA;;;;;;GAMG;AAEH,wBAAgB,iBAAiB,IAAI,MAAM,CAkE1C"}

package/dist/cli/templates/login-page.js

@@ -1,12 +1,74 @@
 /**
  * Login page template
+ *
+ * Generates a standalone Login component as a local source file.
+ * Self-contained with per-page registerMessages() for i18n.
+ * Used by AuthGuard's fallback prop when ejected.
  */
 export function loginPageTemplate() {
-    return `import React from 'react';
-import { LoginPage } from '@loom-framework/frontend-antd';
+    return `import React, { useState } from 'react';
+import { Form, Input, Button, Card, message } from 'antd';
+import { UserOutlined, LockOutlined } from '@ant-design/icons';
+import { useAuth, useLocale, registerMessages } from '@loom-framework/frontend-antd';
+
+registerMessages('zh-CN', {
+  'auth.loginTitle': '登录',
+  'auth.login': '登录',
+  'auth.username': '用户名',
+  'auth.password': '密码',
+  'auth.usernameRequired': '请输入用户名',
+  'auth.passwordRequired': '请输入密码',
+  'auth.loginSuccess': '登录成功',
+  'auth.loginFailed': '登录失败',
+});
+
+registerMessages('en-US', {
+  'auth.loginTitle': 'Login',
+  'auth.login': 'Login',
+  'auth.username': 'Username',
+  'auth.password': 'Password',
+  'auth.usernameRequired': 'Username is required',
+  'auth.passwordRequired': 'Password is required',
+  'auth.loginSuccess': 'Login successful',
+  'auth.loginFailed': 'Login failed',
+});
 
 export default function Login() {
-  return <LoginPage />;
+  const { login } = useAuth();
+  const { t } = useLocale();
+  const [loading, setLoading] = useState(false);
+
+  const handleSubmit = async (values: { username: string; password: string }) => {
+    setLoading(true);
+    try {
+      await login(values.username, values.password);
+      message.success(t('auth.loginSuccess'));
+    } catch (err) {
+      message.error(err instanceof Error ? err.message : t('auth.loginFailed'));
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  return (
+    <div style={{ display: 'flex', justifyContent: 'center', alignItems: 'center', minHeight: '100vh', background: 'var(--ant-color-bg-layout)' }}>
+      <Card style={{ width: 400 }} title={t('auth.loginTitle')}>
+        <Form onFinish={handleSubmit} autoComplete="off" size="large">
+          <Form.Item name="username" rules={[{ required: true, message: t('auth.usernameRequired') }]}>
+            <Input prefix={<UserOutlined />} placeholder={t('auth.username')} />
+          </Form.Item>
+          <Form.Item name="password" rules={[{ required: true, message: t('auth.passwordRequired') }]}>
+            <Input.Password prefix={<LockOutlined />} placeholder={t('auth.password')} />
+          </Form.Item>
+          <Form.Item>
+            <Button type="primary" htmlType="submit" loading={loading} block>
+              {t('auth.login')}
+            </Button>
+          </Form.Item>
+        </Form>
+      </Card>
+    </div>
+  );
 }
 `;
 }

package/dist/cli/templates/login-page.js.map

@@ -1 +1 @@
-{"version":3,"file":"login-page.js","sourceRoot":"","sources":["../../../src/cli/templates/login-page.ts"],"names":[],"mappings":"AAAA;;GAEG;AAEH,MAAM,UAAU,iBAAiB;IAC/B,OAAO;;;;;;CAMR,CAAC;AACF,CAAC"}
+{"version":3,"file":"login-page.js","sourceRoot":"","sources":["../../../src/cli/templates/login-page.ts"],"names":[],"mappings":"AAAA;;;;;;GAMG;AAEH,MAAM,UAAU,iBAAiB;IAC/B,OAAO;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAgER,CAAC;AACF,CAAC"}

package/dist/cli/templates/loom-config.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"loom-config.d.ts","sourceRoot":"","sources":["../../../src/cli/templates/loom-config.ts"],"names":[],"mappings":"AAAA;;GAEG;AAEH,MAAM,WAAW,yBAAyB;IACxC,IAAI,EAAE,MAAM,CAAC;IACb,WAAW,EAAE,MAAM,CAAC;IACpB,OAAO,EAAE,YAAY,GAAG,QAAQ,CAAC;IACjC,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAC1B,cAAc,CAAC,EAAE,MAAM,CAAC;CACzB;AAED,wBAAgB,gBAAgB,CAAC,OAAO,EAAE,yBAAyB,GAAG,MAAM,CA2D3E"}
+{"version":3,"file":"loom-config.d.ts","sourceRoot":"","sources":["../../../src/cli/templates/loom-config.ts"],"names":[],"mappings":"AAAA;;GAEG;AAEH,MAAM,WAAW,yBAAyB;IACxC,IAAI,EAAE,MAAM,CAAC;IACb,WAAW,EAAE,MAAM,CAAC;IACpB,OAAO,EAAE,YAAY,GAAG,QAAQ,CAAC;IACjC,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAC1B,cAAc,CAAC,EAAE,MAAM,CAAC;CACzB;AAED,wBAAgB,gBAAgB,CAAC,OAAO,EAAE,yBAAyB,GAAG,MAAM,CAyD3E"}

package/dist/cli/templates/loom-config.js

@@ -44,19 +44,17 @@ export default defineConfig({
     theme: { defaultMode: 'light' },
     showHeader: true,
   },
-  // Uncomment to enable authentication:
-  // auth: {
-  //   provider: 'builtin',
-  //   secret: 'env:JWT_SECRET', // Read from environment variable
-  //   roles: [
-  //     { name: 'admin', permissions: [{ model: '*', level: 'admin' }] },
-  //     { name: 'editor', permissions: [{ model: '*', level: 'write' }] },
-  //     { name: 'viewer', permissions: [{ model: '*', level: 'read' }] },
-  //   ],
-  //   permissions: {
-  //     defaults: { read: 'read', write: 'write' },
-  //   },
-  // },
+  auth: {
+    provider: 'builtin',
+    secret: 'env:LOOM_JWT_SECRET',
+    roles: [
+      { role: 'admin', permissions: [{ model: '*', level: 'admin' }] },
+      { role: 'user', permissions: [{ model: '*', level: 'write' }] },
+    ],
+    permissions: {
+      defaults: { read: 'read', write: 'write' },
+    },
+  },
 });
 `;
 }

package/dist/cli/templates/loom-config.js.map

@@ -1 +1 @@
-{"version":3,"file":"loom-config.js","sourceRoot":"","sources":["../../../src/cli/templates/loom-config.ts"],"names":[],"mappings":"AAAA;;GAEG;AAWH,MAAM,UAAU,gBAAgB,CAAC,OAAkC;IACjE,MAAM,SAAS,GAAG,OAAO,CAAC,YAAY,IAAI,SAAS,CAAC;IACpD,MAAM,SAAS,GAAG,OAAO,CAAC,gBAAgB,IAAI,EAAE,CAAC;IACjD,MAAM,OAAO,GAAG,OAAO,CAAC,cAAc,IAAI,EAAE,CAAC;IAC7C,MAAM,aAAa,GAAG,SAAS,CAAC,CAAC,CAAC,yBAAyB,SAAS,IAAI,CAAC,CAAC,CAAC,EAAE,CAAC;IAC9E,MAAM,WAAW,GAAG,OAAO,CAAC,CAAC,CAAC,uBAAuB,OAAO,IAAI,CAAC,CAAC,CAAC,EAAE,CAAC;IAEtE,OAAO;;;;aAII,OAAO,CAAC,IAAI;;+BAEM,OAAO,CAAC,WAAW,gBAAgB,OAAO,CAAC,IAAI;;;uBAGvD,OAAO,CAAC,OAAO;;;;;;;;;;;;;;;;;;mBAkBnB,SAAS,KAAK,aAAa,GAAG,WAAW;;;;;;;;;;;;;;;;;;;;;;;;CAwB3D,CAAC;AACF,CAAC"}
+{"version":3,"file":"loom-config.js","sourceRoot":"","sources":["../../../src/cli/templates/loom-config.ts"],"names":[],"mappings":"AAAA;;GAEG;AAWH,MAAM,UAAU,gBAAgB,CAAC,OAAkC;IACjE,MAAM,SAAS,GAAG,OAAO,CAAC,YAAY,IAAI,SAAS,CAAC;IACpD,MAAM,SAAS,GAAG,OAAO,CAAC,gBAAgB,IAAI,EAAE,CAAC;IACjD,MAAM,OAAO,GAAG,OAAO,CAAC,cAAc,IAAI,EAAE,CAAC;IAC7C,MAAM,aAAa,GAAG,SAAS,CAAC,CAAC,CAAC,yBAAyB,SAAS,IAAI,CAAC,CAAC,CAAC,EAAE,CAAC;IAC9E,MAAM,WAAW,GAAG,OAAO,CAAC,CAAC,CAAC,uBAAuB,OAAO,IAAI,CAAC,CAAC,CAAC,EAAE,CAAC;IAEtE,OAAO;;;;aAII,OAAO,CAAC,IAAI;;+BAEM,OAAO,CAAC,WAAW,gBAAgB,OAAO,CAAC,IAAI;;;uBAGvD,OAAO,CAAC,OAAO;;;;;;;;;;;;;;;;;;mBAkBnB,SAAS,KAAK,aAAa,GAAG,WAAW;;;;;;;;;;;;;;;;;;;;;;CAsB3D,CAAC;AACF,CAAC"}

package/dist/cli/templates/notification-center-page.d.ts

@@ -0,0 +1,9 @@
+/**
+ * NotificationCenter page template
+ *
+ * Generates NotificationCenterPage as a local source file.
+ * Page imports sub-components from @loom-framework/frontend-antd and
+ * registers its own i18n keys via registerMessages().
+ */
+export declare function notificationCenterPageTemplate(): string;
+//# sourceMappingURL=notification-center-page.d.ts.map

package/dist/cli/templates/notification-center-page.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"notification-center-page.d.ts","sourceRoot":"","sources":["../../../src/cli/templates/notification-center-page.ts"],"names":[],"mappings":"AAAA;;;;;;GAMG;AAEH,wBAAgB,8BAA8B,IAAI,MAAM,CAyPvD"}

package/dist/cli/templates/notification-center-page.js

@@ -0,0 +1,258 @@
+/**
+ * NotificationCenter page template
+ *
+ * Generates NotificationCenterPage as a local source file.
+ * Page imports sub-components from @loom-framework/frontend-antd and
+ * registers its own i18n keys via registerMessages().
+ */
+export function notificationCenterPageTemplate() {
+    return `import React, { useState, useCallback } from 'react';
+import { Table, Button, Space, Tag, Typography, Popconfirm, Select, message, Breadcrumb, Flex } from 'antd';
+import { CheckOutlined, DeleteOutlined, HomeOutlined } from '@ant-design/icons';
+import { useNotificationCenter, useAppShell, useLocale, registerMessages } from '@loom-framework/frontend-antd';
+
+registerMessages('zh-CN', {
+  'notification.markRead': '已读',
+  'notification.markAllRead': '全部已读',
+  'notification.batchMarkRead': '批量已读',
+  'notification.batchDelete': '批量删除',
+  'notification.colType': '类型',
+  'notification.colTitle': '标题',
+  'notification.colDescription': '描述',
+  'notification.colSource': '来源',
+  'notification.backToList': '返回列表',
+  'notification.notFound': '通知不存在或已被删除',
+  'notification.clearAll': '清空所有',
+  'notification.clearConfirm': '确认清空所有通知？',
+  'notification.deleteConfirm': '确认删除该通知？',
+  'notification.unread': '未读',
+  'notification.all': '全部',
+  'notification.type.info': '信息',
+  'notification.type.warning': '警告',
+  'notification.type.error': '错误',
+  'notification.type.success': '成功',
+  'notification.source.system': '系统',
+  'notification.source.event': '事件',
+  'notification.source.cli': '命令行',
+});
+
+registerMessages('en-US', {
+  'notification.markRead': 'Mark read',
+  'notification.markAllRead': 'Mark all read',
+  'notification.batchMarkRead': 'Batch mark read',
+  'notification.batchDelete': 'Batch delete',
+  'notification.colType': 'Type',
+  'notification.colTitle': 'Title',
+  'notification.colDescription': 'Description',
+  'notification.colSource': 'Source',
+  'notification.backToList': 'Back to list',
+  'notification.notFound': 'Notification not found or has been deleted',
+  'notification.clearAll': 'Clear all',
+  'notification.clearConfirm': 'Clear all notifications?',
+  'notification.deleteConfirm': 'Delete this notification?',
+  'notification.unread': 'Unread',
+  'notification.all': 'All',
+  'notification.type.info': 'Info',
+  'notification.type.warning': 'Warning',
+  'notification.type.error': 'Error',
+  'notification.type.success': 'Success',
+  'notification.source.system': 'System',
+  'notification.source.event': 'Event',
+  'notification.source.cli': 'CLI',
+});
+
+const NOTIFICATION_TYPE_COLORS: Record<string, string> = {
+  info: 'blue',
+  warning: 'orange',
+  error: 'red',
+  success: 'green',
+};
+
+const NOTIFICATION_SOURCE_COLORS: Record<string, string> = {
+  system: 'default',
+  event: 'purple',
+  cli: 'cyan',
+};
+
+export default function NotificationCenterPage() {
+  const { notifications, loading, fetchNotifications, markRead, markAllRead, deleteNotification, clearAll, markBatchRead, deleteBatch, selectNotification } = useNotificationCenter();
+  const { breadcrumbs, onNavClick } = useAppShell();
+  const { t } = useLocale();
+  const [filter, setFilter] = useState<string>('all');
+  const [selectedRowKeys, setSelectedRowKeys] = useState<React.Key[]>([]);
+
+  const handleFilterChange = useCallback((value: string) => {
+    setFilter(value);
+    if (value === 'unread') {
+      fetchNotifications({ limit: 50, unreadOnly: true });
+    } else {
+      fetchNotifications({ limit: 50 });
+    }
+  }, [fetchNotifications]);
+
+  const handleMarkAllRead = useCallback(async () => {
+    await markAllRead();
+    message.success(t('notification.markAllRead'));
+  }, [markAllRead, t]);
+
+  const handleBatchMarkRead = useCallback(async () => {
+    const ids = selectedRowKeys as string[];
+    await markBatchRead(ids);
+    setSelectedRowKeys([]);
+    message.success(t('notification.batchMarkRead'));
+  }, [markBatchRead, selectedRowKeys, t]);
+
+  const handleBatchDelete = useCallback(async () => {
+    const ids = selectedRowKeys as string[];
+    await deleteBatch(ids);
+    setSelectedRowKeys([]);
+    message.success(t('notification.batchDelete'));
+  }, [deleteBatch, selectedRowKeys, t]);
+
+  const handleClearAll = useCallback(async () => {
+    await clearAll();
+    setSelectedRowKeys([]);
+    message.success(t('notification.clearAll'));
+  }, [clearAll, t]);
+
+  const handleMarkRead = useCallback(async (id: string) => {
+    await markRead(id);
+  }, [markRead]);
+
+  const handleDelete = useCallback(async (id: string) => {
+    await deleteNotification(id);
+  }, [deleteNotification]);
+
+  const columns = [
+    {
+      title: t('notification.colType'),
+      dataIndex: 'type',
+      key: 'type',
+      width: 80,
+      render: (type: string) => <Tag color={NOTIFICATION_TYPE_COLORS[type] || 'default'}>{t(\`notification.type.\${type}\`)}</Tag>,
+    },
+    {
+      title: t('notification.colTitle'),
+      dataIndex: 'title',
+      key: 'title',
+      render: (title: string, record: { read: boolean }) => (
+        <Typography.Text strong={!record.read}>{title}</Typography.Text>
+      ),
+    },
+    {
+      title: t('notification.colDescription'),
+      dataIndex: 'description',
+      key: 'description',
+      ellipsis: true,
+      render: (desc: string) => (
+        <Typography.Text type="secondary" ellipsis>{desc}</Typography.Text>
+      ),
+    },
+    {
+      title: t('notification.colSource'),
+      dataIndex: 'source',
+      key: 'source',
+      width: 90,
+      render: (source: string) => <Tag color={NOTIFICATION_SOURCE_COLORS[source] || 'default'}>{t(\`notification.source.\${source}\`) || source}</Tag>,
+    },
+    {
+      title: t('field.createdAt'),
+      dataIndex: 'createdAt',
+      key: 'createdAt',
+      width: 140,
+      render: (val: string) => <Typography.Text type="secondary">{val ? new Date(val).toLocaleString() : '-'}</Typography.Text>,
+    },
+    {
+      title: t('common.action'),
+      key: 'action',
+      width: 100,
+      render: (_: unknown, record: { id: string; read: boolean }) => (
+        <Space size={0}>
+          {!record.read && (
+            <Button type="text" size="small" icon={<CheckOutlined />} onClick={(e) => { e.stopPropagation(); handleMarkRead(record.id); }}>
+              {t('notification.markRead')}
+            </Button>
+          )}
+          <Popconfirm
+            title={t('notification.deleteConfirm')}
+            onConfirm={() => handleDelete(record.id)}
+          >
+            <Button type="text" danger size="small" icon={<DeleteOutlined />} onClick={(e) => e.stopPropagation()} />
+          </Popconfirm>
+        </Space>
+      ),
+    },
+  ];
+
+  const filterOptions = [
+    { value: 'all', label: t('notification.all') },
+    { value: 'unread', label: t('notification.unread') },
+    { value: 'info', label: t('notification.type.info') },
+    { value: 'warning', label: t('notification.type.warning') },
+    { value: 'error', label: t('notification.type.error') },
+    { value: 'success', label: t('notification.type.success') },
+  ];
+
+  const filteredNotifications = filter === 'all' || filter === 'unread'
+    ? notifications
+    : notifications.filter(n => n.type === filter);
+
+  const hasSelected = selectedRowKeys.length > 0;
+
+  return (
+    <div style={{ display: 'flex', flexDirection: 'column', flex: 1, minHeight: 0 }}>
+      <Flex justify="space-between" align="center" style={{ marginBottom: 12 }}>
+        <Breadcrumb items={[{ title: <HomeOutlined onClick={() => onNavClick?.('')} style={{ cursor: 'pointer' }} /> }, ...(breadcrumbs || []).map((b: { title: string; path?: string }) => ({ title: b.path ? <a onClick={() => { if (b.path) onNavClick?.(b.path); }}>{b.title}</a> : b.title }))]} />
+        <Space>
+          <Select
+            value={filter}
+            onChange={handleFilterChange}
+            options={filterOptions}
+            style={{ width: 120 }}
+          />
+          <Button icon={<CheckOutlined />} onClick={handleMarkAllRead}>{t('notification.markAllRead')}</Button>
+          <Popconfirm title={t('notification.clearConfirm')} onConfirm={handleClearAll}>
+            <Button danger>{t('notification.clearAll')}</Button>
+          </Popconfirm>
+          {hasSelected && (
+            <>
+              <Button icon={<CheckOutlined />} onClick={handleBatchMarkRead}>
+                {t('notification.batchMarkRead')} ({selectedRowKeys.length})
+              </Button>
+              <Popconfirm title={t('notification.deleteConfirm')} onConfirm={handleBatchDelete}>
+                <Button danger icon={<DeleteOutlined />}>
+                  {t('notification.batchDelete')} ({selectedRowKeys.length})
+                </Button>
+              </Popconfirm>
+            </>
+          )}
+        </Space>
+      </Flex>
+      <div style={{ flex: 1, minHeight: 0, overflow: 'hidden' }}>
+        <Table
+          dataSource={filteredNotifications}
+          columns={columns}
+          rowKey="id"
+          loading={loading}
+          pagination={{ pageSize: 20, showTotal: (total: number) => t('crud.total', { total }) }}
+          size="middle"
+          scroll={{ x: 'max-content' }}
+          rowSelection={{
+            selectedRowKeys,
+            onChange: (keys) => setSelectedRowKeys(keys),
+          }}
+          onRow={(record) => ({
+            onClick: () => {
+              selectNotification(record.id);
+              onNavClick?.('notification-detail');
+            },
+            style: { cursor: 'pointer' },
+          })}
+        />
+      </div>
+    </div>
+  );
+}
+`;
+}
+//# sourceMappingURL=notification-center-page.js.map

package/dist/cli/templates/notification-center-page.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"notification-center-page.js","sourceRoot":"","sources":["../../../src/cli/templates/notification-center-page.ts"],"names":[],"mappings":"AAAA;;;;;;GAMG;AAEH,MAAM,UAAU,8BAA8B;IAC5C,OAAO;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAuPR,CAAC;AACF,CAAC"}

package/dist/cli/templates/notification-detail-page.d.ts

@@ -0,0 +1,9 @@
+/**
+ * NotificationDetail page template
+ *
+ * Generates NotificationDetailPage as a local source file.
+ * Page imports sub-components from @loom-framework/frontend-antd and
+ * registers its own i18n keys via registerMessages().
+ */
+export declare function notificationDetailPageTemplate(): string;
+//# sourceMappingURL=notification-detail-page.d.ts.map

package/dist/cli/templates/notification-detail-page.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"notification-detail-page.d.ts","sourceRoot":"","sources":["../../../src/cli/templates/notification-detail-page.ts"],"names":[],"mappings":"AAAA;;;;;;GAMG;AAEH,wBAAgB,8BAA8B,IAAI,MAAM,CA6FvD"}

package/dist/cli/templates/notification-detail-page.js

@@ -0,0 +1,102 @@
+/**
+ * NotificationDetail page template
+ *
+ * Generates NotificationDetailPage as a local source file.
+ * Page imports sub-components from @loom-framework/frontend-antd and
+ * registers its own i18n keys via registerMessages().
+ */
+export function notificationDetailPageTemplate() {
+    return `import React from 'react';
+import { Tag, Typography, Empty, Breadcrumb, Button, Space, Flex } from 'antd';
+import { ArrowLeftOutlined, HomeOutlined } from '@ant-design/icons';
+import { XMarkdown } from '@ant-design/x-markdown';
+import '@ant-design/x-markdown/themes/light.css';
+import '@ant-design/x-markdown/themes/dark.css';
+import { useNotificationCenter, useAppShell, useLocale, useLoomTheme, registerMessages } from '@loom-framework/frontend-antd';
+
+registerMessages('zh-CN', {
+  'notification.backToList': '返回列表',
+  'notification.notFound': '通知不存在或已被删除',
+  'notification.type.info': '信息',
+  'notification.type.warning': '警告',
+  'notification.type.error': '错误',
+  'notification.type.success': '成功',
+  'notification.source.system': '系统',
+  'notification.source.event': '事件',
+  'notification.source.cli': '命令行',
+});
+
+registerMessages('en-US', {
+  'notification.backToList': 'Back to list',
+  'notification.notFound': 'Notification not found or has been deleted',
+  'notification.type.info': 'Info',
+  'notification.type.warning': 'Warning',
+  'notification.type.error': 'Error',
+  'notification.type.success': 'Success',
+  'notification.source.system': 'System',
+  'notification.source.event': 'Event',
+  'notification.source.cli': 'CLI',
+});
+
+const NOTIFICATION_TYPE_COLORS: Record<string, string> = {
+  info: 'blue',
+  warning: 'orange',
+  error: 'red',
+  success: 'green',
+};
+
+const NOTIFICATION_SOURCE_COLORS: Record<string, string> = {
+  system: 'default',
+  event: 'purple',
+  cli: 'cyan',
+};
+
+export default function NotificationDetailPage() {
+  const { notifications, selectedNotificationId } = useNotificationCenter();
+  const { breadcrumbs, onNavClick } = useAppShell();
+  const { t } = useLocale();
+  const { mode } = useLoomTheme();
+
+  const notification = notifications.find(n => n.id === selectedNotificationId) ?? null;
+
+  const themeClass = mode === 'dark' ? 'x-markdown-dark' : 'x-markdown-light';
+
+  if (!notification) {
+    return (
+      <div style={{ display: 'flex', flexDirection: 'column', flex: 1, minHeight: 0 }}>
+        <Empty description={t('notification.notFound')}>
+          <Button type="primary" onClick={() => onNavClick?.('notifications')}>
+            <ArrowLeftOutlined /> {t('notification.backToList')}
+          </Button>
+        </Empty>
+      </div>
+    );
+  }
+
+  return (
+    <div style={{ display: 'flex', flexDirection: 'column', flex: 1, minHeight: 0 }}>
+      <Flex justify="space-between" align="center" style={{ marginBottom: 12 }}>
+        <Breadcrumb items={[{ title: <HomeOutlined onClick={() => onNavClick?.('')} style={{ cursor: 'pointer' }} /> }, ...(breadcrumbs || []).map((b: { title: string; path?: string }) => ({ title: b.path ? <a onClick={() => { if (b.path) onNavClick?.(b.path); }}>{b.title}</a> : b.title }))]} />
+        <Button icon={<ArrowLeftOutlined />} onClick={() => onNavClick?.('notifications')}>
+          {t('notification.backToList')}
+        </Button>
+      </Flex>
+
+      <div style={{ marginBottom: 16 }}>
+        <Space size={8} align="center" style={{ marginBottom: 8 }}>
+          <Tag color={NOTIFICATION_TYPE_COLORS[notification.type]}>{t(\`notification.type.\${notification.type}\`)}</Tag>
+          <Tag color={NOTIFICATION_SOURCE_COLORS[notification.source] || 'default'}>{t(\`notification.source.\${notification.source}\`) || notification.source}</Tag>
+          <Typography.Text type="secondary">{notification.createdAt ? new Date(notification.createdAt).toLocaleString() : '-'}</Typography.Text>
+        </Space>
+        <Typography.Title level={4} style={{ marginBottom: 8 }}>{notification.title}</Typography.Title>
+      </div>
+
+      <div className={themeClass} style={{ flex: 1, overflow: 'auto' }}>
+        <XMarkdown content={notification.description || ''} />
+      </div>
+    </div>
+  );
+}
+`;
+}
+//# sourceMappingURL=notification-detail-page.js.map

package/dist/cli/templates/notification-detail-page.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"notification-detail-page.js","sourceRoot":"","sources":["../../../src/cli/templates/notification-detail-page.ts"],"names":[],"mappings":"AAAA;;;;;;GAMG;AAEH,MAAM,UAAU,8BAA8B;IAC5C,OAAO;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA2FR,CAAC;AACF,CAAC"}