create-wakii-stack 0.0.0-stage → 0.1.1

package/stack-template/app/remotes/activity/tests/ActivityPage.test.tsx

@@ -0,0 +1,260 @@
+// Component tests SF-4 — mock api layer: timeline nhóm ngày, badge variant theo action,
+// stats grid giữ NGUYÊN bộ aria-label (contract), skeleton từng khu độc lập
+// (Promise.allSettled), refresh busy, empty state, unknown-action nguyên văn.
+import { render, screen, waitFor, within } from '@testing-library/react';
+import { createWrapper } from './test-utils';
+import userEvent from '@testing-library/user-event';
+import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest';
+import { ActivityPage } from '../src/ActivityPage';
+import { dayKey, formatDayHeading, formatTime } from '../src/components/time';
+import * as api from '../src/api';
+
+vi.mock('../src/api', async () => {
+  const actual = await vi.importActual<typeof api>('../src/api');
+  return {
+    ...actual,
+    fetchFeed: vi.fn(),
+    fetchStats: vi.fn(),
+  };
+});
+
+const mockedApi = vi.mocked(api);
+
+const ITEM: api.ActivityFeedItem = {
+  id: 'e1',
+  taskId: 't1',
+  userId: 'u1',
+  action: 'task.created',
+  timestamp: '2026-10-12T10:00:00Z',
+  userName: 'Alice Nguyễn',
+  taskTitle: 'Task A',
+};
+
+const STATS: api.ActivityStats = {
+  totalTasks: 7,
+  tasksByStatus: { todo: 3, in_progress: 2, done: 2, assignment_failed: 0 },
+  recentEvents: 4,
+};
+
+function mockFeed(items: api.ActivityFeedItem[] = [ITEM]) {
+  mockedApi.fetchFeed.mockResolvedValue({ items, total: items.length });
+}
+
+beforeEach(() => {
+  vi.clearAllMocks();
+  mockFeed();
+  mockedApi.fetchStats.mockResolvedValue(STATS);
+});
+
+afterEach(() => {
+  vi.useRealTimers();
+});
+
+describe('ActivityPage', () => {
+  it('render feed với user-display fields từ response (userName + taskTitle)', async () => {
+    render(<ActivityPage />, { wrapper: createWrapper() });
+    // Cả hai field render trực tiếp từ response — không placeholder
+    expect(await screen.findByText('Alice Nguyễn')).toBeInTheDocument();
+    expect(screen.getByText('Task A')).toBeInTheDocument();
+    expect(screen.getByText(/đã tạo/)).toBeInTheDocument();
+    expect(screen.getByText('Feed (1/1)')).toBeInTheDocument();
+  });
+
+  it('badge variant theo action — dot var --_dot theo variant (Tailwind migration 2026-10-17)', async () => {
+    mockFeed([
+      { ...ITEM, id: 'b1', action: 'task.created' },
+      { ...ITEM, id: 'b2', action: 'task.updated' },
+      { ...ITEM, id: 'b3', action: 'task.assigned' },
+      { ...ITEM, id: 'b4', action: 'task.deleted' },
+      { ...ITEM, id: 'b5', action: 'task.assignment_failed' },
+    ]);
+    render(<ActivityPage />, { wrapper: createWrapper() });
+    const list = await screen.findByRole('list', { name: 'Danh sách hoạt động' });
+    // Badge variants map → utility [--_dot:var(--…)] (badge container class chứa var đó)
+    for (const dotVar of ['--accent', '--st-doing', '--accent-hi', '--ink3', '--st-fail']) {
+      expect(list.querySelector(`[class*="[--_dot:var(${dotVar})]"]`)).toBeInTheDocument();
+    }
+  });
+
+  it('action label MỚI (SF-3): task.assigned + task.assignment_failed render label tiếng Việt', async () => {
+    mockFeed([
+      { ...ITEM, id: 'e2', action: 'task.assigned' },
+      { ...ITEM, id: 'e3', action: 'task.assignment_failed' },
+    ]);
+    render(<ActivityPage />, { wrapper: createWrapper() });
+    expect(await screen.findByText(/đã giao/)).toBeInTheDocument();
+    expect(screen.getByText(/gán thất bại/)).toBeInTheDocument();
+  });
+
+  it('action lạ ngoài labels → render nguyên văn, KHÔNG badge (không bịa placeholder)', async () => {
+    mockFeed([{ ...ITEM, id: 'e4', action: 'task.whatever' }]);
+    render(<ActivityPage />, { wrapper: createWrapper() });
+    const list = await screen.findByRole('list', { name: 'Danh sách hoạt động' });
+    expect(within(list).getByText('task.whatever')).toBeInTheDocument();
+    expect(list.querySelector('.bp-badge')).toBeNull();
+  });
+
+  it('render stats tiles — GIỮ NGUYÊN bộ aria-label contract', async () => {
+    render(<ActivityPage />, { wrapper: createWrapper() });
+    expect(screen.getByLabelText('Thống kê tasks')).toBeInTheDocument();
+    expect(await screen.findByLabelText('Tổng số task')).toHaveTextContent('7');
+    expect(screen.getByLabelText('Task Cần làm')).toHaveTextContent('3');
+    expect(screen.getByLabelText('Task Đang làm')).toHaveTextContent('2');
+    expect(screen.getByLabelText('Task Xong')).toHaveTextContent('2');
+    expect(screen.getByLabelText('Sự kiện 24h qua')).toHaveTextContent('4');
+  });
+
+  it('stats fail → banner riêng, feed VẪN render (Promise.allSettled)', async () => {
+    mockedApi.fetchStats.mockRejectedValue(
+      new api.ApiError(503, {
+        error: { code: 'READONLY_UNAVAILABLE', message: 'Không đọc được schema tasks', requestId: 'r1', details: null },
+      }),
+    );
+    render(<ActivityPage />, { wrapper: createWrapper() });
+    expect(await screen.findByText(/Không đọc được schema tasks/)).toBeInTheDocument();
+    expect(screen.getByText('Alice Nguyễn')).toBeInTheDocument();
+  });
+
+  it('feed fail → banner role=alert với message từ envelope', async () => {
+    mockedApi.fetchFeed.mockRejectedValue(
+      new api.ApiError(401, {
+        error: { code: 'UNAUTHORIZED', message: 'Token hết hạn', requestId: 'r2', details: null },
+      }),
+    );
+    render(<ActivityPage />, { wrapper: createWrapper() });
+    const alerts = await screen.findAllByRole('alert');
+    expect(alerts.length).toBeGreaterThanOrEqual(1);
+    expect(screen.getByText(/Token hết hạn/)).toBeInTheDocument();
+  });
+
+  it('feed rỗng → EmptyState gợi ý sang Tasks (link /tasks)', async () => {
+    mockFeed([]);
+    render(<ActivityPage />, { wrapper: createWrapper() });
+    expect(await screen.findByText('Chưa có hoạt động nào')).toBeInTheDocument();
+    expect(screen.getByText(/Tạo một task ở trang Tasks/)).toBeInTheDocument();
+    expect(screen.getByRole('link', { name: 'Đi tới Tasks' })).toHaveAttribute('href', '/tasks');
+  });
+
+  it('nút Làm mới → gọi lại cả feed + stats', async () => {
+    const user = userEvent.setup();
+    render(<ActivityPage />, { wrapper: createWrapper() });
+    await screen.findByText('Alice Nguyễn');
+    await user.click(screen.getByRole('button', { name: /Làm mới/ }));
+    await waitFor(() => expect(mockedApi.fetchFeed).toHaveBeenCalledTimes(2));
+    await waitFor(() => expect(mockedApi.fetchStats).toHaveBeenCalledTimes(2));
+  });
+
+  // ── SF-4 mới ──────────────────────────────────────────────────────────────
+
+  it('timeline nhóm theo ngày — Hôm nay / Hôm qua / ngày khác, theo thứ tự feed', async () => {
+    vi.useFakeTimers({ shouldAdvanceTime: true });
+    vi.setSystemTime(new Date('2026-10-14T09:00:00+07:00'));
+    const now = new Date();
+    const todayIso = now.toISOString();
+    const yesterdayIso = new Date(now.getTime() - 86_400_000).toISOString();
+    mockFeed([
+      { ...ITEM, id: 'd1', timestamp: todayIso },
+      { ...ITEM, id: 'd2', timestamp: todayIso },
+      { ...ITEM, id: 'd3', timestamp: yesterdayIso },
+      { ...ITEM, id: 'd4', timestamp: '2026-10-12T10:00:00Z' },
+    ]);
+    render(<ActivityPage />, { wrapper: createWrapper() });
+    const list = await screen.findByRole('list', { name: 'Danh sách hoạt động' });
+    const headings = within(list)
+      .getAllByRole('heading', { level: 3 })
+      .map((h) => h.textContent);
+    expect(headings).toEqual(['Hôm nay', 'Hôm qua', expect.stringMatching(/12 tháng 10/)]);
+  });
+
+  it('entry: time vi-VN + dateTime giữ ISO gốc', async () => {
+    render(<ActivityPage />, { wrapper: createWrapper() });
+    const list = await screen.findByRole('list', { name: 'Danh sách hoạt động' });
+    const time = list.querySelector('time');
+    expect(time).not.toBeNull();
+    expect(time).toHaveAttribute('dateTime', ITEM.timestamp);
+    expect(time).toHaveTextContent(formatTime(ITEM.timestamp));
+  });
+
+  it('stats đang tải → skeleton trong khu stats, feed VẪN render (independence)', async () => {
+    let resolveStats!: (s: api.ActivityStats) => void;
+    mockedApi.fetchStats.mockImplementation(
+      () => new Promise<api.ActivityStats>((res) => { resolveStats = res; }),
+    );
+    render(<ActivityPage />, { wrapper: createWrapper() });
+    // feed xong trước — timeline render
+    const feed = await screen.findByRole('list', { name: 'Danh sách hoạt động' });
+    expect(feed).toBeInTheDocument();
+    // stats khu vẫn skeleton — chưa có tile
+    const statsArea = screen.getByLabelText('Thống kê tasks');
+    expect(statsArea.querySelector('[aria-busy="true"]')).toBeInTheDocument();
+    expect(screen.queryByLabelText('Tổng số task')).not.toBeInTheDocument();
+    resolveStats(STATS);
+    await screen.findByLabelText('Tổng số task');
+    expect(screen.getByLabelText('Thống kê tasks').querySelector('[aria-busy="true"]')).toBeNull();
+  });
+
+  it('feed đang tải → skeleton trong khu feed, stats VẪN render (independence)', async () => {
+    let resolveFeed!: (f: api.ActivityFeed) => void;
+    mockedApi.fetchFeed.mockImplementation(
+      () => new Promise<api.ActivityFeed>((res) => { resolveFeed = res; }),
+    );
+    render(<ActivityPage />, { wrapper: createWrapper() });
+    // stats xong trước — tiles render
+    expect(await screen.findByLabelText('Tổng số task')).toBeInTheDocument();
+    // feed khu vẫn skeleton — chưa có list
+    expect(screen.getByLabelText('Activity feed và thống kê').querySelector('[aria-busy="true"]')).toBeInTheDocument();
+    expect(screen.queryByRole('list', { name: 'Danh sách hoạt động' })).not.toBeInTheDocument();
+    resolveFeed({ items: [ITEM], total: 1 });
+    await screen.findByRole('list', { name: 'Danh sách hoạt động' });
+  });
+
+  it('nút Làm mới busy khi đang tải — disabled + spinner, xong thì bật lại', async () => {
+    const user = userEvent.setup();
+    render(<ActivityPage />, { wrapper: createWrapper() });
+    const btn = screen.getByRole('button', { name: /Làm mới/ });
+    // initial load đang bay → disabled (busy state cũng áp cho lần tải đầu)
+    expect(btn).toBeDisabled();
+    await screen.findByText('Alice Nguyễn');
+    expect(btn).toBeEnabled();
+    // refresh: feed pending → busy
+    let resolveRefresh!: (f: api.ActivityFeed) => void;
+    mockedApi.fetchFeed.mockImplementationOnce(
+      () => new Promise<api.ActivityFeed>((res) => { resolveRefresh = res; }),
+    );
+    await user.click(btn);
+    expect(btn).toBeDisabled();
+    expect(within(btn).getByRole('status')).toBeInTheDocument(); // Spinner
+    resolveRefresh({ items: [ITEM], total: 1 });
+    await screen.findByText('Alice Nguyễn');
+    expect(btn).toBeEnabled();
+  });
+});
+
+describe('time helpers (SF-4)', () => {
+  // NOW cố định theo +07:00 — các ISO test chọn cách xa ranh giới ngày ở cả UTC lẫn UTC+7
+  const NOW = new Date('2026-10-14T09:00:00+07:00');
+
+  it('formatDayHeading — cùng ngày local → "Hôm nay"', () => {
+    expect(formatDayHeading('2026-10-14T02:30:00Z', NOW)).toBe('Hôm nay');
+  });
+
+  it('formatDayHeading — hôm qua local → "Hôm qua"', () => {
+    expect(formatDayHeading('2026-10-13T02:30:00Z', NOW)).toBe('Hôm qua');
+  });
+
+  it('formatDayHeading — ngày khác → ngày đầy đủ vi-VN', () => {
+    expect(formatDayHeading('2026-10-12T10:00:00Z', NOW)).toMatch(/12 tháng 10/);
+    expect(formatDayHeading('2026-10-12T10:00:00Z', NOW)).toMatch(/2026/);
+  });
+
+  it('formatTime — vi-VN đầy đủ giờ:ngày (TZ pin trong vitest config)', () => {
+    // TZ pinned Asia/Ho_Chi_Minh → 10:00Z = 17:00 local
+    expect(formatTime('2026-10-12T10:00:00Z')).toMatch(/^\d{2}:\d{2}:\d{2}/);
+    expect(formatTime('2026-10-12T10:00:00Z')).toContain('12/10/2026');
+  });
+
+  it('dayKey theo ngày LOCAL (không phải UTC)', () => {
+    expect(dayKey('2026-10-14T17:30:00+07:00')).toBe(dayKey(NOW.toISOString()));
+    expect(dayKey('2026-10-13T17:30:00+07:00')).not.toBe(dayKey(NOW.toISOString()));
+  });
+});

package/stack-template/app/remotes/activity/tests/api.test.ts

@@ -0,0 +1,61 @@
+// API shape tests — assert URL/method/header khớp contract activity.yaml + envelope decode.
+import { fetchFeed, fetchStats } from '../src/api';
+import { tokenStorage } from '@wakii/fe-shared';
+
+function jsonResponse(body: unknown, status = 200) {
+  return new Response(JSON.stringify(body), {
+    status,
+    headers: { 'Content-Type': 'application/json' },
+  });
+}
+
+describe('api — remote activity', () => {
+  afterEach(() => {
+    tokenStorage.clearToken();
+    vi.unstubAllGlobals();
+  });
+
+  it('fetchFeed — GET /api/activity/feed với Authorization Bearer', async () => {
+    tokenStorage.setToken('hdr.payload.sig');
+    const fetchMock = vi.fn().mockResolvedValue(jsonResponse({ items: [], total: 0 }));
+    vi.stubGlobal('fetch', fetchMock);
+
+    await fetchFeed();
+
+    const [url, init] = fetchMock.mock.calls[0];
+    expect(url).toBe('/api/activity/feed?limit=20');
+    expect(init.method).toBe('GET');
+    expect(init.headers['Authorization']).toBe('Bearer hdr.payload.sig');
+  });
+
+  it('fetchStats — GET /api/activity/stats', async () => {
+    tokenStorage.setToken('hdr.payload.sig');
+    const fetchMock = vi.fn().mockResolvedValue(
+      jsonResponse({ totalTasks: 0, tasksByStatus: { todo: 0, in_progress: 0, done: 0 } }),
+    );
+    vi.stubGlobal('fetch', fetchMock);
+
+    await fetchStats();
+
+    const [url, init] = fetchMock.mock.calls[0];
+    expect(url).toBe('/api/activity/stats');
+    expect(init.method).toBe('GET');
+    expect(init.headers['Authorization']).toBe('Bearer hdr.payload.sig');
+  });
+
+  it('error envelope 401 → ApiError giữ code (service tự verify JWT)', async () => {
+    const fetchMock = vi.fn().mockResolvedValue(
+      jsonResponse(
+        { error: { code: 'UNAUTHORIZED', message: 'Token hết hạn', requestId: 'r2', details: null } },
+        401,
+      ),
+    );
+    vi.stubGlobal('fetch', fetchMock);
+
+    const err = await fetchFeed().catch((e) => e);
+    expect(err.name).toBe('ApiError');
+    expect(err.status).toBe(401);
+    expect(err.code).toBe('UNAUTHORIZED');
+    expect(err.message).toBe('Token hết hạn');
+  });
+});

package/stack-template/app/remotes/activity/tests/setup.ts

@@ -0,0 +1 @@
+import '@testing-library/jest-dom/vitest';

package/stack-template/app/remotes/activity/tests/test-utils.tsx

@@ -0,0 +1,16 @@
+// Test utils — wrapper QueryClientProvider cho component dùng useQuery/useMutation
+// (libs adopt 2026-10-17). retry:false — test fail hiển thị tức thì, không chờ retry.
+import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
+import type { ReactNode } from 'react';
+
+export function createWrapper() {
+  const queryClient = new QueryClient({
+    defaultOptions: {
+      queries: { retry: false, refetchOnWindowFocus: false },
+      mutations: { retry: false },
+    },
+  });
+  return function QueryWrapper({ children }: { children: ReactNode }) {
+    return <QueryClientProvider client={queryClient}>{children}</QueryClientProvider>;
+  };
+}

package/stack-template/app/remotes/activity/tsconfig.json

@@ -0,0 +1,26 @@
+{
+  "compilerOptions": {
+    "target": "ES2022",
+    "lib": ["ES2022", "DOM", "DOM.Iterable"],
+    "module": "ESNext",
+    "moduleResolution": "bundler",
+    "jsx": "react-jsx",
+    "strict": true,
+    "skipLibCheck": true,
+    "esModuleInterop": true,
+    "forceConsistentCasingInFileNames": true,
+    "resolveJsonModule": true,
+    "isolatedModules": true,
+    "noEmit": true,
+    "types": ["vitest/globals", "@testing-library/jest-dom"],
+    // fe-shared src/ui (SF-1) import 'react' nhưng package không khai báo dep (giữ
+    // pnpm-lock.yaml) — TS map types về node_modules của consumer (đối xứng với
+    // resolve.modules trong rspack.config.mjs)
+    "baseUrl": ".",
+    "paths": {
+      "react": ["node_modules/@types/react"],
+      "react/jsx-runtime": ["node_modules/@types/react/jsx-runtime"]
+    }
+  },
+  "include": ["src", "tests", "vitest.config.ts"]
+}

package/stack-template/app/remotes/activity/vitest.config.ts

@@ -0,0 +1,38 @@
+import path from 'node:path';
+import { fileURLToPath } from 'node:url';
+import { defineConfig } from 'vitest/config';
+
+// Windows-safe absolute path (URL.pathname cho ra /C:/... sai trên win32)
+const rootDir = path.dirname(fileURLToPath(import.meta.url));
+
+export default defineConfig({
+  // Stub build-time env (rspack DefinePlugin) cho unit test — test mock fetch nên base rỗng
+  define: {
+    __API_BASE_URL__: "''",
+  },
+  resolve: {
+    // SF-4 (story VU-53): test giờ render primitives fe-shared (JSX) — cùng pattern shell
+    // vitest.config.ts (SF-1): fe-shared không khai báo dep react (giữ pnpm-lock.yaml),
+    // alias về node_modules của activity (catalog 19.3.0 pinned giống hệt ×3 package).
+    alias: {
+      react: path.resolve(rootDir, 'node_modules/react'),
+      'react-dom': path.resolve(rootDir, 'node_modules/react-dom'),
+      'react/jsx-runtime': path.resolve(rootDir, 'node_modules/react/jsx-runtime'),
+    },
+  },
+  // JSX fe-shared (không tsconfig riêng) phải transform automatic runtime — không thì
+  // esbuild rơi về classic "React.createElement" → "React is not defined" lúc render
+  esbuild: {
+    jsx: 'automatic',
+  },
+  test: {
+    environment: 'jsdom',
+    globals: true,
+    setupFiles: ['./tests/setup.ts'],
+    // Pin TZ cho toàn bộ test run — tests timeline nhóm ngày + vi-VN pin theo giờ
+    // Việt Nam (review P1: không pin = fail deterministic trên máy TZ ≤ UTC-3, vì
+    // mốc "Hôm qua"/ngày khác lệch ranh giới ngày local). Node re-read TZ per Date
+    // call nên có hiệu lực ngay với worker process.
+    env: { TZ: 'Asia/Ho_Chi_Minh' },
+  },
+});

package/stack-template/app/remotes/tasks/Dockerfile

@@ -0,0 +1,36 @@
+# Remote `tasks` — MF remote static (SF-6). Multi-stage theo platform/conventions/01-dockerfile-pattern.md.
+# Build context = repo ROOT (compose: context .., dockerfile app/remotes/tasks/Dockerfile) —
+# cần app/shared (workspace dep TS raw) + pnpm-workspace.yaml + lockfile.
+
+# build stage — cài + build rspack
+FROM node:22-alpine AS build
+WORKDIR /repo
+# Pin pnpm 9.15.9 = dev machine + lockfileVersion (corepack default sẽ tải pnpm 12 — lệch format)
+RUN corepack enable && corepack prepare pnpm@9.15.9 --activate
+# COPY đủ MỌI importer trong pnpm-lock.yaml (., shared, spike/host, spike/remote, shell,
+# remotes/tasks, remotes/activity) — thiếu importer nào frozen-lockfile cũng fail
+COPY package.json pnpm-workspace.yaml pnpm-lock.yaml ./
+COPY app/shared/package.json app/shared/
+COPY app/ui-kit/package.json app/ui-kit/
+COPY app/spike/host/package.json app/spike/host/
+COPY app/spike/remote/package.json app/spike/remote/
+COPY app/shell/package.json app/shell/
+COPY app/remotes/tasks/package.json app/remotes/tasks/
+COPY app/remotes/activity/package.json app/remotes/activity/
+RUN pnpm install --frozen-lockfile --filter @wakii/remote-tasks...
+COPY app/shared app/shared
+COPY app/ui-kit app/ui-kit
+COPY app/remotes/tasks app/remotes/tasks
+# Build-time env (conventions/06+08): prod API base = '' (same-origin qua gateway),
+# publicPath = /remotes/tasks/ (gateway /remotes/<name>/ — conventions/08)
+ENV API_BASE_URL="" \
+    REMOTE_PUBLIC_PATH="/remotes/tasks/" \
+    NODE_ENV=production
+RUN pnpm --filter @wakii/remote-tasks build
+
+# runtime stage — nginx serve static, port cố định 4001 (conventions/05)
+# Healthcheck KHÔNG khai ở đây (conventions/01 rule 4 — một nguồn duy nhất: compose entry remote-tasks)
+FROM nginx:1.27-alpine AS runtime
+COPY app/remotes/tasks/nginx.conf /etc/nginx/conf.d/default.conf
+COPY --from=build /repo/app/remotes/tasks/dist /usr/share/nginx/html
+EXPOSE 4001

package/stack-template/app/remotes/tasks/README.md

@@ -0,0 +1,59 @@
+# @wakii/remote-tasks
+
+FE remote `tasks` — MF REMOTE (Rspack + @module-federation/enhanced, React 19). Expose `./TasksPage`, shell (MF host) mount vào route `/tasks` theo remote registry [`platform/conventions/08-gateway-and-remotes.md`](../../../platform/conventions/08-gateway-and-remotes.md).
+
+CRUD task qua gateway `/api/tasks` (node-svc) — danh sách + tạo + sửa status; JWT tự đính qua `@wakii/fe-shared` ApiClient; error envelope decode → inline banner.
+
+## Chạy dev
+
+```bash
+# từ repo root — pnpm workspace
+pnpm install
+pnpm --filter @wakii/remote-tasks dev   # http://localhost:4001
+```
+
+Remote thật sự dùng được khi load TRONG shell (`pnpm --filter @wakii/shell dev` với
+`REMOTE_TASKS_URL=http://localhost:4001/remoteEntry.js`); standalone :4001 chỉ để debug UI
+(không token ở origin này → API 401 là đúng hành vi).
+
+## Env build-time (conventions/06)
+
+| Var | Default dev | Prod | Ý nghĩa |
+|-----|-------------|------|---------|
+| `API_BASE_URL` | `http://localhost:3001` | `''` | Base gọi API — dev native gọi thẳng node-svc (CORS dev mở, conventions/07); prod same-origin qua gateway |
+| `REMOTE_PUBLIC_PATH` | `http://localhost:4001/` | `/remotes/tasks/` | publicPath chunk (absolute khi dev, relative qua gateway khi prod) |
+| `REMOTE_TASKS_PORT` | `4001` | — | Port dev server (conventions/05) |
+
+## Test + build
+
+```bash
+pnpm --filter @wakii/remote-tasks test        # vitest + testing-library
+pnpm --filter @wakii/remote-tasks typecheck
+pnpm --filter @wakii/remote-tasks build       # dist/ — Dockerfile nginx serve static
+```
+
+## Docker
+
+Build context = **repo root** (cần `app/shared` + lockfile):
+
+```bash
+docker build -f app/remotes/tasks/Dockerfile -t boilerplate-remote-tasks .
+docker run -p 4001:4001 boilerplate-remote-tasks   # http://localhost:4001/remoteEntry.js
+```
+
+## Standalone-copy
+
+Copy thư mục này **KÈM `app/shared/` + `app/ui-kit/`** (+ root `pnpm-workspace.yaml`/`pnpm-lock.yaml`) — remote import `@wakii/fe-shared` qua `workspace:*`.
+
+## API contract
+
+`contracts/openapi/tasks.yaml` — source of truth (list/create/patch shape, error envelope, status enum `todo|in_progress|done`).
+
+> Lưu ý: override `REMOTE_TASKS_PORT` KHÔNG tự đổi publicPath (default vẫn :4001) — đặt kèm `REMOTE_PUBLIC_PATH` nếu đổi port dev.
+
+## Design system (từ `@wakii/ui-kit` — story VU-53, tách khỏi fe-shared ADR-0009)
+
+- **Trong shell**: KHÔNG import lại `base.css` — shell import global làm chủ; remote chỉ ăn **tokens** CSS vars (`--c-* --ink* --line* --accent* --st-* --sp-* --fs-* --r-*`) + scoped classes riêng (`tsk-*`), không element selector toàn cục.
+- **Standalone** (`src/standalone.tsx`): tự import `tokens.css` + `base.css` để trang debug có style đầy đủ.
+- **Primitives**: `import { Badge, EmptyState, Skeleton, Spinner } from '@wakii/ui-kit'` — StatusBadge bọc `Badge variant todo|doing|done|failed` (badge "Gán thất bại" = `failed`, role="status"); list skeleton = `Skeleton variant="row"`; empty = `EmptyState`; per-item busy = `Spinner`.
+- Hướng visual: light antd-look mặc định (spec `docs/superpowers/specs/2026-10-17-antd-look-tokens.md`); dark là theme phụ qua `UiKitProvider` (`data-bp-theme` → `@wakii/ui-kit/styles/themes/dark.css`).

package/stack-template/app/remotes/tasks/index.html

@@ -0,0 +1,11 @@
+<!doctype html>
+<html lang="vi">
+  <head>
+    <meta charset="utf-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1" />
+    <title>Remote: tasks (standalone debug)</title>
+  </head>
+  <body>
+    <div id="root"></div>
+  </body>
+</html>

package/stack-template/app/remotes/tasks/nginx.conf

@@ -0,0 +1,35 @@
+# Remote `tasks` static — port cố định 4001 trong container (conventions/05, gateway /remotes/tasks/)
+server {
+  listen 4001;
+  server_name _;
+  root /usr/share/nginx/html;
+  index index.html;
+
+  # Security headers baseline — CSP cho MF để SF-7 thiết kế (script-src origin shell)
+  add_header X-Content-Type-Options "nosniff" always;
+  add_header X-Frame-Options "DENY" always;
+  add_header Referrer-Policy "strict-origin-when-cross-origin" always;
+
+  # remoteEntry.js — shell fetch mỗi lần boot; KHÔNG cache aggressive (deploy mới phải thấy ngay)
+  location = /remoteEntry.js {
+    add_header Cache-Control "no-cache";
+  }
+
+  # Static asset — contenthash nên cache được lâu
+  location /assets/ {
+    expires 30d;
+    add_header Cache-Control "public, immutable";
+  }
+
+  # Standalone :4001 (BUG-1 sf-5b): index.html + runtime chunk fetch dùng publicPath
+  # gateway-shaped (/remotes/tasks/main.*.js — compile-time, cần cho in-shell qua gateway)
+  # → map prefix đó về root để cùng 1 dist phục vụ cả 2 đường, không đổi publicPath.
+  location /remotes/tasks/ {
+    alias /usr/share/nginx/html/;
+  }
+
+  # Standalone debug index (index.html) — không router nên fallback đơn giản
+  location / {
+    try_files $uri $uri/ /index.html;
+  }
+}

package/stack-template/app/remotes/tasks/package.json

@@ -0,0 +1,41 @@
+{
+  "name": "@wakii/remote-tasks",
+  "version": "0.1.0",
+  "private": true,
+  "description": "FE remote `tasks` (SF-6, FI-74) — MF remote expose ./TasksPage, CRUD qua /api/tasks (node-svc qua gateway). Standalone-copy: copy KÈM app/shared (fe-shared).",
+  "type": "module",
+  "scripts": {
+    "dev": "rspack serve",
+    "build": "rspack build",
+    "test": "vitest run",
+    "typecheck": "tsc --noEmit"
+  },
+  "dependencies": {
+    "@tanstack/react-query": "catalog:",
+    "@wakii/fe-shared": "workspace:*",
+    "@wakii/ui-kit": "workspace:*",
+    "motion": "^12",
+    "react": "catalog:",
+    "react-dom": "catalog:",
+    "react-hook-form": "^7",
+    "zod": "^4.0.0"
+  },
+  "devDependencies": {
+    "@module-federation/enhanced": "catalog:",
+    "@rspack/cli": "1.7.12",
+    "@rspack/core": "catalog:",
+    "@tailwindcss/postcss": "^4.3.3",
+    "@testing-library/jest-dom": "6.9.0",
+    "@testing-library/react": "16.3.0",
+    "@testing-library/user-event": "14.6.1",
+    "@types/react": "19.2.2",
+    "@types/react-dom": "19.2.3",
+    "jsdom": "27.0.0",
+    "postcss-loader": "^8.2.1",
+    "typescript": "^5.7.0",
+    "vitest": "3.2.4"
+  },
+  "engines": {
+    "node": ">=22"
+  }
+}