create-wakii-stack 0.0.0-stage → 0.1.1

package/stack-template/app/remotes/tasks/rspack.config.mjs

@@ -0,0 +1,153 @@
+import { ModuleFederationPlugin } from '@module-federation/enhanced/rspack';
+import { DefinePlugin, HtmlRspackPlugin } from '@rspack/core';
+import path from 'node:path';
+import { fileURLToPath } from 'node:url';
+
+// Windows-safe absolute path (URL.pathname cho ra /C:/... sai trên win32)
+const rootDir = path.dirname(fileURLToPath(import.meta.url));
+
+/**
+ * Remote `tasks` — MF REMOTE (SF-6, FI-74). Expose `./TasksPage` load vào shell slot
+ * (registry conventions/08 — ĐỔI tên/expose = breaking, phải đồng bộ conventions/08 + shell).
+ * Port dev 4001 (conventions/05). Pin matrix theo app/shared mfToolkit
+ * (react 19.3.0 / rspack 1.7.12 / mf-enhanced 0.21.6 — nâng cấp = re-spike).
+ *
+ * Env build-time (conventions/06 — KHÔNG hardcode):
+ *   API_BASE_URL — base gọi API. Dev native: http://localhost:3001 (node-svc trực tiếp,
+ *     CORS dev mở — conventions/07). Prod (qua gateway): '' (same-origin).
+ *   REMOTE_PUBLIC_PATH — publicPath chunk. Dev: http://localhost:4001/ (absolute —
+ *     runtime chunk fetch về đúng origin remote, bài học spike SF-1). Prod: /remotes/tasks/
+ *     (relative qua gateway, conventions/08).
+ *   REMOTE_TASKS_PORT — port dev server (default 4001, conventions/05).
+ */
+const isDev = process.env.NODE_ENV !== 'production';
+
+const apiBaseUrl = process.env.API_BASE_URL ?? (isDev ? 'http://localhost:3001' : '');
+const publicPath = process.env.REMOTE_PUBLIC_PATH || (isDev ? 'http://localhost:4001/' : '/remotes/tasks/');
+
+export default {
+  // 2 entries (BUG-1 sf-5b): `index` = async boundary cho MF container (remoteEntry.js —
+  // RUNTIME-006: entry tĩnh shared → loadShareSync trước share init → crash in-shell);
+  // `standalone` = entry STATIC cho trang debug :4001 — toàn bộ graph (react eager, CSS,
+  // page) bundle sync vào 1 chunk, không sinh async chunk cho shared → loại trừ hẳn lớp
+  // lỗi rspack 1.7.12 + mf-enhanced 0.21.6 sinh chunk id stale (phantom "237"/"819") làm
+  // import('./standalone') pending vô hạn. index.html chỉ inject `standalone` (2 entry cùng
+  // chạy sẽ double-bootstrap cùng #root qua 2 runtime copy).
+  entry: {
+    index: './src/index.tsx',
+    standalone: './src/standalone.tsx',
+  },
+  output: {
+    publicPath,
+    filename: isDev ? '[name].js' : '[name].[contenthash].js',
+    // CSS emit ở ROOT + contenthash prod (cache-busting) — y hệt shell
+    cssFilename: isDev ? '[name].css' : '[name].[contenthash].css',
+    clean: true,
+  },
+  resolve: {
+    extensions: ['.tsx', '.ts', '.jsx', '.js'],
+    // fe-shared (READ-ONLY, SF-1) import kiểu NodeNext: './x.js' chỉ tới file .ts
+    extensionAlias: {
+      '.js': ['.ts', '.tsx', '.js'],
+    },
+    // fe-shared src/ui (SF-1) import 'react' nhưng package KHÔNG khai báo dep
+    // (thêm dep = đổi pnpm-lock.yaml — success criteria cấm). Resolve qua
+    // node_modules của consumer — react 19.3.0 catalog-pinned giống hệt ×3,
+    // MF singleton vẫn giữ 1 bản runtime.
+    modules: [path.resolve(rootDir, 'node_modules'), 'node_modules'],
+  },
+  module: {
+    rules: [
+      // Copy y hệt shell (SF-1) — remote import CSS fe-shared (standalone tokens+base,
+      // primitives sau này) cần css experiment; thiếu rule = build fail trên import .css
+      {
+        test: /\.css$/,
+        // Tailwind v4 qua postcss — mirror shell (spec tailwind-migration P0)
+        type: 'css',
+        use: [
+          {
+            loader: 'postcss-loader',
+            options: {
+              postcssOptions: {
+                plugins: { '@tailwindcss/postcss': {} },
+              },
+            },
+          },
+        ],
+      },
+      {
+        test: /\.tsx?$/,
+        // fe-shared là package TS raw (main: ./src/index.ts) — bundler phải compile luôn
+        include: [path.resolve(rootDir, 'src'), /[\\/]app[\\/](shared|ui-kit)[\\/]src/],
+        use: {
+          loader: 'builtin:swc-loader',
+          options: {
+            jsc: {
+              parser: { syntax: 'typescript', tsx: true },
+              transform: { react: { runtime: 'automatic' } },
+              target: 'es2022',
+            },
+          },
+        },
+        type: 'javascript/auto',
+      },
+    ],
+  },
+  plugins: [
+    // index.html chỉ dùng cho standalone debug (:4001) — inject CHỈ entry standalone
+    // (entry index chỉ tồn tại làm anchor cho MF container remoteEntry.js, không chạy
+    // trong trang — 2 entry cùng chạy = double-bootstrap)
+    new HtmlRspackPlugin({
+      template: './index.html',
+      chunks: ['standalone'],
+    }),
+    new DefinePlugin({
+      __API_BASE_URL__: JSON.stringify(apiBaseUrl),
+    }),
+    new ModuleFederationPlugin({
+      name: 'tasks',
+      filename: 'remoteEntry.js',
+      exposes: {
+        './TasksPage': './src/TasksPage.tsx',
+      },
+      // Singleton theo pin matrix — KHÔNG bundle duplicate react (spec slice mục 3;
+      // remote consume singleton do shell host cung cấp khi load trong shell).
+      // requiredVersion: false — deps ghi "catalog:" (pnpm protocol) bị mf-enhanced infer
+      // nhầm thành requiredVersion literal → version-check warning sai against host 19.3.0.
+      // Singleton = luôn dùng bản của host, không cần check.
+      //
+      // eager: true (BUG-1, sf-5b): rspack 1.7.12 + mf-enhanced 0.21.6 build prod sinh
+      // data blocks (initializeSharingData/consumesLoadingData) trỏ chunk id stale
+      // (phantom "103"/"237" ngoài chunk map) và KHÔNG emit runtime machinery
+      // (__webpack_require__.I / .f.consumes là stub throw) — consumer wrapper
+      // (706/43/418) không được emit → standalone import('./standalone') pending vô hạn,
+      // trang trắng. eager inline shared vào entry chunk, bỏ máy móc consume async.
+      // In-shell không đổi: host provide react (singleton loaded-first), bản eager của
+      // remote chỉ là fallback không chạy. Dev server không bị (chunking khác).
+      shared: {
+        react: { singleton: true, requiredVersion: false, eager: true },
+        'react-dom': { singleton: true, requiredVersion: false, eager: true },
+        // JSX fe-shared compile ra import react/jsx-runtime — thiếu = bundle jsx-runtime
+        // riêng → react thứ 2 khi mount trong shell ("Invalid hook call", spike R2 SF-1)
+        'react/jsx-runtime': { singleton: true, requiredVersion: false, eager: true },
+      },
+    }),
+  ],
+  experiments: {
+    css: true,
+  },
+  devServer: {
+    port: Number(process.env.REMOTE_TASKS_PORT || 4001),
+    headers: { 'Access-Control-Allow-Origin': '*' },
+    hot: true,
+    // DEV-ONLY proxy (SF-1): dev server origin khác cổng compose đã set
+    // CORS_DEV_ORIGIN (vd REMOTE_TASKS_PORT=4101) → chạy dev với API_BASE_URL=
+    // (same-origin) là qua proxy này, không cần đụng stack compose. Prod không đi đây.
+    proxy: [
+      {
+        context: ['/api'],
+        target: `http://localhost:${process.env.NODE_SVC_PORT || 3001}`,
+      },
+    ],
+  },
+};

package/stack-template/app/remotes/tasks/src/TasksPage.tsx

@@ -0,0 +1,284 @@
+// TasksPage — expose `./TasksPage` (registry conventions/08), shell mount vào route /tasks.
+// Libs adopt 2026-10-17: data layer = TanStack Query (useInfiniteQuery + useMutation),
+// form = react-hook-form (TaskForm/TaskItem), animation = motion.
+//
+// SEMANTICS GIỮ NGUYÊN từ bản useState (F2/F3 fixes — verify bằng tests):
+// - Mutations cập nhật IN-PLACE qua setQueryData (KHÔNG refetch full — giữ draft edit
+//   inline/confirm xoá ở dòng khác); server response = nguồn sự thật từng item.
+// - Item rơi khỏi filter đang bật → remove khỏi list (total giảm theo).
+// - Trang rỗng (row chưa tải đã bị xoá hết) → hasNextPage false → ẩn "Tải thêm".
+// - Filter đổi → queryKey đổi → fetch mới tự động (r-q thay reqSeq guard thủ công).
+// - Mutation success → invalidate ['activity'] — react-query singleton MF: cùng cache
+//   với remote activity → feed/stats tự refetch (payoff của share singleton).
+import { useInfiniteQuery, useMutation, useQueryClient } from '@tanstack/react-query';
+import { motion } from 'motion/react';
+import { useState } from 'react';
+import { Alert, EmptyState, message, Reveal, Skeleton, Tag } from '@wakii/ui-kit';
+import {
+  ApiError,
+  CreateTaskInput,
+  createTask,
+  deleteTask,
+  fetchTasks,
+  Task,
+  TaskStatus,
+  updateTask,
+} from './api';
+import { STATUS_LABELS, WRITABLE_STATUSES } from './components/status';
+import { TaskForm } from './components/TaskForm';
+import { TaskList } from './components/TaskList';
+// Tokens idempotent (quyết định #5 epic): remote import tokens trong page entry —
+// shell (SF-2) cũng import global; nhiều bản cùng giá trị vô hại. KHÔNG import
+// base.css ở đây — shell làm chủ global base (bp-* primitives css đi kèm base).
+import '@wakii/ui-kit/styles/tokens.css';
+import './app.css'; // tailwind utilities (spec tailwind-migration)
+
+type ListKey = readonly [string, TaskStatus | null];
+
+function describeError(err: unknown): string {
+  if (err instanceof ApiError) {
+    // 503 = spring-svc down khi validate user (fail-closed, contract tasks.yaml) — message rõ cho demo
+    if (err.status === 503) {
+      return 'Dịch vụ xác thực người dùng (spring-svc) chưa sẵn sàng — thử lại sau.';
+    }
+    return err.message;
+  }
+  return 'Không kết nối được dịch vụ tasks.';
+}
+
+export function TasksPage() {
+  const [statusFilter, setStatusFilter] = useState<TaskStatus | null>(null);
+  const [error, setError] = useState<string | null>(null);
+  const queryClient = useQueryClient();
+
+  const listKey: ListKey = ['tasks', statusFilter] as const;
+
+  const listQuery = useInfiniteQuery({
+    queryKey: listKey,
+    queryFn: ({ pageParam }) => {
+      // offset chỉ gửi khi > 0 — page đầu khớp contract cũ ({} hoặc {status})
+      const offset = pageParam as number;
+      const params: { offset?: number; status?: TaskStatus } = offset > 0 ? { offset } : {};
+      if (statusFilter) params.status = statusFilter;
+      return fetchTasks(params);
+    },
+    initialPageParam: 0,
+    getNextPageParam: (lastPage, allPages) => {
+      // F2: trang rỗng (row chưa tải đã bị xoá hết phía server) = hết — không page kế
+      if (lastPage.items.length === 0) return undefined;
+      const loaded = allPages.reduce((n, p) => n + p.items.length, 0);
+      return loaded < lastPage.total ? loaded : undefined;
+    },
+  });
+
+  const tasks = listQuery.data?.pages.flatMap((p) => p.items) ?? [];
+  const total = listQuery.data?.pages[0]?.total ?? 0;
+  const loading = listQuery.isLoading;
+  const loadingMore = listQuery.isFetchingNextPage;
+
+  /** In-place update trên infinite-query data — trả data mới, KHÔNG refetch. */
+  function patchList(key: ListKey, patch: (pages: Array<{ items: Task[]; total: number }>) => void) {
+    queryClient.setQueryData<{ pages: Array<{ items: Task[]; total: number }>; pageParams: unknown[] }>(
+      key,
+      (old) => {
+        if (!old) return old;
+        const pages = old.pages.map((p) => ({ items: [...p.items], total: p.total }));
+        patch(pages);
+        return { ...old, pages };
+      },
+    );
+  }
+
+  const invalidateActivity = () => {
+    // singleton cache: remote activity đọc cùng client — feed/stats tự refetch
+    void queryClient.invalidateQueries({ queryKey: ['activity'] });
+  };
+
+  const createMutation = useMutation({
+    mutationFn: (input: CreateTaskInput) => createTask(input),
+    onSuccess: (created) => {
+      setError(null);
+      patchList(listKey, (pages) => {
+        // total tăng ở page đầu (nguồn count); filter bật và task mới không thuộc
+        // filter → chỉ tăng total, không chèn vào list
+        pages[0]!.total += 1;
+        if (!statusFilter || created.status === statusFilter) {
+          pages[0]!.items.unshift(created);
+        }
+      });
+      invalidateActivity();
+      message.success('Đã tạo task');
+    },
+    onError: (err) => setError(describeError(err)),
+  });
+
+  const statusMutation = useMutation({
+    mutationFn: ({ task, status }: { task: Task; status: TaskStatus }) =>
+      updateTask(task.id, { status }),
+    onSuccess: (updated) => {
+      setError(null);
+      // item rơi khỏi filter đang bật → remove khỏi list (total giảm theo)
+      if (statusFilter && updated.status !== statusFilter) {
+        patchList(listKey, (pages) => {
+          for (const p of pages) {
+            const idx = p.items.findIndex((t) => t.id === updated.id);
+            if (idx !== -1) {
+              p.items.splice(idx, 1);
+              p.total -= 1;
+              break;
+            }
+          }
+        });
+      } else {
+        patchList(listKey, (pages) => {
+          for (const p of pages) {
+            const idx = p.items.findIndex((t) => t.id === updated.id);
+            if (idx !== -1) p.items[idx] = updated;
+          }
+        });
+      }
+      invalidateActivity();
+    },
+    onError: (err) => setError(describeError(err)),
+  });
+
+  const saveMutation = useMutation({
+    mutationFn: ({ task, patch }: { task: Task; patch: { title?: string; description?: string } }) =>
+      updateTask(task.id, patch),
+    onSuccess: (updated) => {
+      setError(null);
+      // save không đổi status → không tương tác filter, replace in-place
+      patchList(listKey, (pages) => {
+        for (const p of pages) {
+          const idx = p.items.findIndex((t) => t.id === updated.id);
+          if (idx !== -1) p.items[idx] = updated;
+        }
+      });
+      invalidateActivity();
+    },
+    onError: (err) => setError(describeError(err)),
+  });
+
+  const deleteMutation = useMutation({
+    mutationFn: (task: Task) => deleteTask(task.id),
+    onSuccess: (_, removed) => {
+      setError(null);
+      patchList(listKey, (pages) => {
+        for (const p of pages) {
+          const idx = p.items.findIndex((t) => t.id === removed.id);
+          if (idx !== -1) {
+            p.items.splice(idx, 1);
+            p.total -= 1;
+            break;
+          }
+        }
+      });
+      invalidateActivity();
+      message.success('Đã xoá task');
+    },
+    onError: (err) => setError(describeError(err)),
+  });
+
+  /** true = tạo OK — form chỉ xoá input khi true (lỗi → giữ draft user). */
+  async function handleCreate(input: { title: string; description?: string }): Promise<boolean> {
+    try {
+      await createMutation.mutateAsync(input);
+      return true;
+    } catch {
+      return false; // error đã set qua onError — banner ở page
+    }
+  }
+
+  async function handleStatusChange(task: Task, status: TaskStatus) {
+    if (status === task.status) return;
+    await statusMutation.mutateAsync({ task, status }).catch(() => undefined);
+  }
+
+  /** true = PATCH OK — item chỉ thoát edit khi true (lỗi → giữ form + draft). */
+  async function handleSave(
+    task: Task,
+    patch: { title?: string; description?: string },
+  ): Promise<boolean> {
+    try {
+      await saveMutation.mutateAsync({ task, patch });
+      return true;
+    } catch {
+      return false;
+    }
+  }
+
+  async function handleDelete(task: Task) {
+    await deleteMutation.mutateAsync(task).catch(() => undefined);
+  }
+
+  return (
+    <motion.section
+      className="flex flex-col gap-6 text-ink"
+      aria-label="Quản lý tasks"
+      initial={{ opacity: 0, y: 8 }}
+      animate={{ opacity: 1, y: 0 }}
+      transition={{ duration: 0.25, ease: 'easeOut' }}
+    >
+      <h1 className="m-0 text-h1">Tasks</h1>
+
+      {(error ?? (listQuery.error ? describeError(listQuery.error) : null)) !== null && (
+        <Alert
+          className="mb-4"
+          type="error"
+          message={error ?? describeError(listQuery.error)}
+        />
+      )}
+
+      <TaskForm onCreate={handleCreate} />
+
+      {/* Motion pass tiết chế (mission #8): Reveal wrap NGOÀI filter + bảng
+       * (một wrap duy nhất cho khối list — không wrap từng hàng); 0 đổi logic.
+       * jsdom không IO → Reveal fallback hiện luôn, tests không ảnh hưởng. */}
+      <Reveal direction="up" delay={80}>
+        <div className="flex flex-wrap gap-2" role="group" aria-label="Lọc theo trạng thái">
+          <Tag.Checkable checked={statusFilter === null} onChange={() => setStatusFilter(null)}>
+            Tất cả
+          </Tag.Checkable>
+          {WRITABLE_STATUSES.map((status) => (
+            <Tag.Checkable
+              key={status}
+              checked={statusFilter === status}
+              onChange={() => setStatusFilter(status)}
+            >
+              {STATUS_LABELS[status]}
+            </Tag.Checkable>
+          ))}
+        </div>
+      </Reveal>
+
+      <Reveal direction="up" delay={120}>
+        {loading ? (
+          <Skeleton variant="row" count={4} />
+        ) : tasks.length === 0 ? (
+          <EmptyState
+            title="Chưa có task nào"
+            description={
+              statusFilter
+                ? 'Thử bỏ bộ lọc để xem tất cả task.'
+                : 'Tạo task đầu tiên ở form trên.'
+            }
+          />
+        ) : (
+          <TaskList
+            tasks={tasks}
+            total={total}
+            hasMore={Boolean(listQuery.hasNextPage)}
+            loadingMore={loadingMore}
+            onStatusChange={handleStatusChange}
+            onSave={handleSave}
+            onDelete={handleDelete}
+            onLoadMore={() => void listQuery.fetchNextPage()}
+          />
+        )}
+      </Reveal>
+    </motion.section>
+  );
+}
+
+/** total helper cho create mutation (setQueryData phức hợp — tách cho đọc dễ). */
+export default TasksPage;

package/stack-template/app/remotes/tasks/src/api.ts

@@ -0,0 +1,109 @@
+// API layer remote `tasks` — gọi /api/tasks (node-svc) theo contract contracts/openapi/tasks.yaml.
+// Base URL build-time (conventions/06): dev native = http://localhost:3001 (node-svc trực tiếp,
+// CORS dev mở — conventions/07); prod = '' (same-origin qua gateway, pass-through giữ prefix /api/tasks).
+// JWT + error envelope do fe-shared ApiClient (READ-ONLY) lo — token đọc từ tokenStorage (cùng origin
+// với shell vì remote render TRONG shell).
+import { ApiClient, ApiError, tokenStorage } from '@wakii/fe-shared';
+
+const TIMEOUT_MS = 10_000;
+
+/** Wrap fetch với AbortController timeout — không timeout = UI treo vô hạn khi node-svc chết
+ * (mirror shell/src/api.ts — fe-shared ApiClient không có AbortSignal sẵn).
+ * fetchImpl bind LAZY tại call-time (khác shell 1 chút): vi.stubGlobal('fetch') trong unit test
+ * có hiệu lực; prod hành vi như cũ. */
+export function timeoutFetch(timeoutMs: number, fetchImpl?: typeof fetch): typeof fetch {
+  return (input, init = {}) => {
+    const doFetch = fetchImpl ?? fetch.bind(globalThis);
+    if (init.signal) {
+      // caller tự quản signal — không override
+      return doFetch(input, init);
+    }
+    const controller = new AbortController();
+    const timer = setTimeout(() => controller.abort(new Error(`timeout ${timeoutMs}ms`)), timeoutMs);
+    return doFetch(input, { ...init, signal: controller.signal }).finally(() => clearTimeout(timer));
+  };
+}
+
+export const api = new ApiClient({
+  baseUrl: __API_BASE_URL__,
+  tokenStorage,
+  fetchImpl: timeoutFetch(TIMEOUT_MS),
+});
+
+/** Mirror Task schema trong contracts/openapi/tasks.yaml — TaskStatus
+ * (writable, query/PATCH) vs TaskStatusExtended (response, SF-2 cascade thêm
+ * `assignment_failed` — status hệ thống do saga compensation ghi, PATCH CẤM). */
+export type TaskStatus = 'todo' | 'in_progress' | 'done';
+export type TaskStatusExtended = TaskStatus | 'assignment_failed';
+
+export interface Task {
+  id: string;
+  title: string;
+  description: string | null;
+  status: TaskStatusExtended;
+  assigneeId: string | null;
+  createdBy: string;
+  createdAt: string;
+  updatedAt: string;
+}
+
+export interface TaskList {
+  items: Task[];
+  total: number;
+}
+
+export interface CreateTaskInput {
+  title: string;
+  description?: string;
+}
+
+export interface UpdateTaskInput {
+  title?: string;
+  description?: string;
+  status?: TaskStatus;
+}
+
+// Path giữ nguyên prefix /api/tasks — node-svc tự mount prefix (gateway pass-through, không rewrite).
+// SF-3 (VU-56): params limit/offset/status theo contract tasks.yaml — listTasks query
+// (limit min 1 max 100, offset min 0, status CHỈ writable TaskStatus). Clamp tại đây
+// để UI không bao giờ gửi query vi phạm contract dù state có lệch.
+
+/** Kích thước trang "Tải thêm" — chọn 10 để pagination thấy được ngay trong demo. */
+export const TASKS_PAGE_SIZE = 10;
+
+export interface FetchTasksParams {
+  limit?: number;
+  offset?: number;
+  status?: TaskStatus;
+}
+
+function buildTasksPath(params: FetchTasksParams = {}): string {
+  const limit = Math.min(Math.max(params.limit ?? TASKS_PAGE_SIZE, 1), 100);
+  const offset = Math.max(params.offset ?? 0, 0);
+  const query = new URLSearchParams({
+    limit: String(limit),
+    offset: String(offset),
+  });
+  if (params.status) {
+    query.set('status', params.status);
+  }
+  return `/api/tasks?${query.toString()}`;
+}
+
+export function fetchTasks(params: FetchTasksParams = {}): Promise<TaskList> {
+  return api.get<TaskList>(buildTasksPath(params));
+}
+
+export function createTask(input: CreateTaskInput): Promise<Task> {
+  return api.post<Task>('/api/tasks', input);
+}
+
+export function updateTask(taskId: string, patch: UpdateTaskInput): Promise<Task> {
+  return api.patch<Task>(`/api/tasks/${taskId}`, patch);
+}
+
+export function deleteTask(taskId: string): Promise<void> {
+  return api.delete(`/api/tasks/${taskId}`);
+}
+
+export { ApiError };

package/stack-template/app/remotes/tasks/src/app.css

@@ -0,0 +1,7 @@
+/* Tailwind v4 entry của remote tasks — mirror app/shell/src/app.css (spec
+ * tailwind-migration): import ui-kit theme/utilities + @source qua node_modules
+ * symlink (path repo-relative bị ignore — xem comment shell). */
+@import '@wakii/ui-kit/styles/tailwind.css';
+
+@source './';
+@source '../node_modules/@wakii/ui-kit/src';

package/stack-template/app/remotes/tasks/src/components/StatusBadge.tsx

@@ -0,0 +1,20 @@
+// StatusBadge — bọc Badge (ui-kit) thay Tag: Badge có variant màu theo status
+// (todo/doing/done/failed — semantics màu GIỮ NGUYÊN), Tag là chip trung tính không
+// variant. Wrapper giữ accessible name contract "Trạng thái task <title>" trên
+// role="status" (context pack boundary: KHÔNG đổi aria-label bộ tasks).
+import { Badge } from '@wakii/ui-kit';
+import type { TaskStatusExtended } from '../api';
+import { STATUS_LABELS, STATUS_VARIANTS } from './status';
+
+interface StatusBadgeProps {
+  title: string;
+  status: TaskStatusExtended;
+}
+
+export function StatusBadge({ title, status }: StatusBadgeProps) {
+  return (
+    <span role="status" aria-label={`Trạng thái task ${title}`} className="tsk-item__badge">
+      <Badge variant={STATUS_VARIANTS[status]}>{STATUS_LABELS[status]}</Badge>
+    </span>
+  );
+}

package/stack-template/app/remotes/tasks/src/components/StatusSelect.tsx

@@ -0,0 +1,27 @@
+// StatusSelect — chỉ 3 writable status (assignment_failed KHÔNG ở đây — PATCH cấm);
+// disabled khi per-item busy đang bay (spec slice #3).
+// Tier 3 ui-kit: dùng Select component (combobox a11y — thay <select> native).
+import { Select } from '@wakii/ui-kit';
+import type { Task, TaskStatus } from '../api';
+import { STATUS_LABELS, WRITABLE_STATUSES } from './status';
+
+interface StatusSelectProps {
+  task: Pick<Task, 'title' | 'status'>;
+  disabled?: boolean;
+  onChange: (status: TaskStatus) => void;
+}
+
+const OPTIONS = WRITABLE_STATUSES.map((status) => ({ value: status, label: STATUS_LABELS[status] }));
+
+export function StatusSelect({ task, disabled, onChange }: StatusSelectProps) {
+  return (
+    <Select
+      className="min-w-[120px]"
+      ariaLabel={`Trạng thái task ${task.title}`}
+      value={task.status}
+      options={OPTIONS}
+      disabled={disabled}
+      onChange={(value) => onChange(value as TaskStatus)}
+    />
+  );
+}

package/stack-template/app/remotes/tasks/src/components/TaskForm.tsx

@@ -0,0 +1,74 @@
+// TaskForm — tạo task (aria-label "Form tạo task" là contract, giữ nguyên).
+// ui-kit useForm + zod (app-fit migration 2026-10-18, thay react-hook-form):
+// fields chỉ reset khi tạo THÀNH CÔNG; lỗi (banner ở page) giữ nguyên input cho
+// user sửa. Zod = source of truth validate: title trim + bắt buộc + ≤200 ký tự,
+// description optional (trim, rỗng → undefined khi gửi).
+import { useState } from 'react';
+import { z } from 'zod';
+import { Button, Field, Icon, Input, Textarea, useForm } from '@wakii/ui-kit';
+import type { CreateTaskInput } from '../api';
+
+interface TaskFormProps {
+  /** true = tạo OK — chỉ khi đó xoá input (lỗi → banner ở page + giữ draft user). */
+  onCreate: (input: CreateTaskInput) => Promise<boolean>;
+}
+
+const taskFormSchema = z.object({
+  title: z.string().trim().min(1, 'Tiêu đề là bắt buộc').max(200, 'Tiêu đề tối đa 200 ký tự'),
+  description: z.string().trim(),
+});
+type FormValues = z.infer<typeof taskFormSchema>;
+
+export function TaskForm({ onCreate }: TaskFormProps) {
+  const [submitting, setSubmitting] = useState(false);
+  const form = useForm<FormValues>({
+    schema: taskFormSchema,
+    initialValues: { title: '', description: '' },
+  });
+
+  const submit = form.handleSubmit(async (values) => {
+    setSubmitting(true);
+    try {
+      // description trim rỗng → undefined (contract optional)
+      const ok = await onCreate({
+        title: values.title,
+        description: values.description || undefined,
+      });
+      if (ok) form.reset(); // chỉ reset khi tạo thành công
+    } finally {
+      setSubmitting(false);
+    }
+  });
+
+  return (
+    <form
+      className="flex w-full flex-row flex-wrap items-end gap-3 rounded-3 border border-line bg-s2 p-4"
+      onSubmit={submit}
+      aria-label="Form tạo task"
+    >
+      <Field label="Tiêu đề" htmlFor="task-form-title" error={form.errors.title} className="[flex:1_1_200px]">
+        <Input
+          id="task-form-title"
+          name="title"
+          maxLength={200}
+          value={form.values.title}
+          invalid={!!form.errors.title}
+          onChange={form.handleChange('title')}
+          onBlur={form.handleBlur('title')}
+        />
+      </Field>
+      <Field label="Mô tả" htmlFor="task-form-description" className="[flex:1_1_200px]">
+        <Textarea
+          id="task-form-description"
+          name="description"
+          rows={2}
+          value={form.values.description}
+          onChange={form.handleChange('description')}
+        />
+      </Field>
+      <Button type="primary" htmlType="submit" loading={submitting} icon={<Icon name="plus" />}>
+        {submitting ? 'Đang tạo…' : 'Tạo task'}
+      </Button>
+    </form>
+  );
+}