@haposoft/cafekit 0.16.7 → 0.18.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (231) hide show
  1. package/README.md +14 -22
  2. package/bin/__tests__/codex-hooks-ownership.test.js +2 -2
  3. package/bin/__tests__/codex-hooks.test.js +169 -272
  4. package/bin/__tests__/codex-native.test.js +100 -202
  5. package/bin/__tests__/develop-contract.test.js +122 -1413
  6. package/bin/__tests__/docs-sync-on-demand.test.js +93 -0
  7. package/bin/__tests__/grok-envelope.test.js +0 -56
  8. package/bin/__tests__/hook-payload.test.js +4 -6
  9. package/bin/__tests__/legacy-authority-decoupled.test.js +154 -0
  10. package/bin/__tests__/legacy-hooks-retired.test.js +221 -0
  11. package/bin/__tests__/omp-bridge.test.js +20 -17
  12. package/bin/__tests__/omp-hooks.test.js +0 -19
  13. package/bin/__tests__/optional-skill-inventory.test.js +112 -4
  14. package/bin/__tests__/orca-session.test.js +0 -2
  15. package/bin/__tests__/package-inventory.test.js +90 -925
  16. package/bin/__tests__/runtime-dir.test.js +0 -3
  17. package/bin/__tests__/runtime-schema.test.js +3 -2
  18. package/bin/__tests__/skill-routing-source.test.js +27 -15
  19. package/bin/__tests__/spec-narrowing.test.js +30 -161
  20. package/bin/__tests__/specs-v2-execution-closeout.test.js +0 -437
  21. package/bin/__tests__/test-runtime-dependency-closure.cjs +1 -2
  22. package/bin/__tests__/ui-ux-skill.test.js +101 -0
  23. package/bin/__tests__/usage-hook-retired.test.js +114 -0
  24. package/bin/__tests__/validator-grounding.test.js +18 -2949
  25. package/bin/lib/managed-writer.js +2 -3
  26. package/bin/phases/codex-runtime.js +27 -0
  27. package/bin/phases/copy-payload.js +13 -28
  28. package/bin/phases/omp-runtime.js +25 -0
  29. package/package.json +2 -3
  30. package/src/claude/CLAUDE.md +3 -10
  31. package/src/claude/agents/brainstormer.md +7 -3
  32. package/src/claude/agents/code-auditor.md +44 -56
  33. package/src/claude/agents/debugger.md +8 -88
  34. package/src/claude/agents/deployer.md +3 -5
  35. package/src/claude/agents/docs-keeper.md +6 -14
  36. package/src/claude/agents/git-ops.md +2 -4
  37. package/src/claude/agents/implementer.md +12 -16
  38. package/src/claude/agents/inspector.md +4 -3
  39. package/src/claude/agents/project-manager.md +9 -17
  40. package/src/claude/agents/researcher.md +9 -3
  41. package/src/claude/agents/spec-maker.md +15 -15
  42. package/src/claude/agents/test-runner.md +8 -11
  43. package/src/claude/agents/ui-ux-designer.md +0 -1
  44. package/src/claude/hooks/__tests__/fixtures/statusline-default.golden +1 -1
  45. package/src/claude/hooks/__tests__/spec-gate.test.js +244 -333
  46. package/src/claude/hooks/__tests__/spec-state-touched.test.js +160 -0
  47. package/src/claude/hooks/__tests__/state.test.js +68 -0
  48. package/src/claude/hooks/__tests__/statusline.test.js +140 -11
  49. package/src/claude/hooks/agent.cjs +2 -1
  50. package/src/claude/hooks/lib/hook-payload.cjs +2 -2
  51. package/src/claude/hooks/rules.cjs +2 -1
  52. package/src/claude/hooks/session.cjs +0 -1
  53. package/src/claude/hooks/spec-gate.cjs +17 -83
  54. package/src/claude/hooks/spec-state.cjs +142 -39
  55. package/src/claude/hooks/state.cjs +21 -2
  56. package/src/claude/migration-manifest.json +42 -22
  57. package/src/claude/output-styles/coding-level-0-eli5.md +9 -9
  58. package/src/claude/output-styles/coding-level-1-junior.md +3 -3
  59. package/src/claude/output-styles/coding-level-2-mid.md +3 -3
  60. package/src/claude/output-styles/coding-level-3-senior.md +2 -2
  61. package/src/claude/output-styles/coding-level-4-lead.md +5 -5
  62. package/src/claude/output-styles/coding-level-5-god.md +6 -6
  63. package/src/claude/rules/ai-dev-rules.md +2 -3
  64. package/src/claude/rules/hook-protocols.md +8 -15
  65. package/src/claude/rules/manage-docs.md +9 -23
  66. package/src/claude/rules/orchestrator.md +3 -4
  67. package/src/claude/rules/review-audit-self-decision.md +3 -3
  68. package/src/claude/rules/skill-domain-routing.md +1 -3
  69. package/src/claude/rules/skill-workflow-routing.md +4 -5
  70. package/src/claude/rules/state-sync.md +3 -12
  71. package/src/claude/rules/workflow.md +11 -19
  72. package/src/claude/runtime.schema.json +5 -3
  73. package/src/claude/scripts/generate-skill-catalog.cjs +7 -6
  74. package/src/claude/scripts/provenance.cjs +23 -5
  75. package/src/claude/scripts/spec-receipt.cjs +24 -121
  76. package/src/claude/scripts/spec-resolver.cjs +41 -458
  77. package/src/claude/scripts/workflow-policy.cjs +3 -1801
  78. package/src/claude/settings/settings.json +1 -32
  79. package/src/claude/skills/agent-browser/SKILL.md +1 -1
  80. package/src/claude/skills/{question → ask}/SKILL.md +9 -75
  81. package/src/claude/skills/brainstorm/SKILL.md +43 -131
  82. package/src/claude/skills/chrome-devtools/SKILL.md +14 -31
  83. package/src/claude/skills/code-review/SKILL.md +29 -81
  84. package/src/claude/skills/code-review/references/spec-compliance-review.md +4 -8
  85. package/src/claude/skills/debug/SKILL.md +29 -149
  86. package/src/claude/skills/develop/SKILL.md +26 -83
  87. package/src/claude/skills/develop/references/parallel-waves.md +0 -8
  88. package/src/claude/skills/develop/references/quality-gate.md +15 -13
  89. package/src/claude/skills/develop/references/subagent-patterns.md +0 -6
  90. package/src/claude/skills/docs/SKILL.md +2 -2
  91. package/src/claude/skills/docs/references/update-workflow.md +1 -1
  92. package/src/claude/skills/fix/SKILL.md +153 -0
  93. package/src/claude/skills/{hotfix → fix}/references/diagnosis-protocol.md +2 -2
  94. package/src/claude/skills/{hotfix → fix}/references/parallel-patterns.md +2 -2
  95. package/src/claude/skills/{hotfix → fix}/references/prevention-gate.md +3 -3
  96. package/src/claude/skills/{hotfix → fix}/references/review-cycle.md +1 -1
  97. package/src/claude/skills/git/SKILL.md +48 -9
  98. package/src/claude/skills/git/references/commit-protocols.md +35 -16
  99. package/src/claude/skills/git/references/worktree-blueprint.md +42 -6
  100. package/src/claude/skills/orca/SKILL.md +9 -8
  101. package/src/claude/skills/research/SKILL.md +17 -46
  102. package/src/claude/skills/scout/SKILL.md +61 -0
  103. package/src/claude/skills/{inspect → scout}/references/internal-inspection.md +26 -10
  104. package/src/claude/skills/specs/SKILL.md +22 -29
  105. package/src/claude/skills/specs/references/review.md +8 -6
  106. package/src/claude/skills/specs/references/templates.md +34 -41
  107. package/src/claude/skills/sync/SKILL.md +16 -45
  108. package/src/claude/skills/sync/references/rebind-and-audit.md +59 -0
  109. package/src/claude/skills/sync/references/sync-protocols.md +4 -13
  110. package/src/claude/skills/test/SKILL.md +39 -104
  111. package/src/claude/skills/test/references/execution-strategy.md +93 -21
  112. package/src/claude/skills/test/references/failure-triage.md +1 -1
  113. package/src/claude/skills/ui-ux/LICENSE +21 -0
  114. package/src/claude/skills/ui-ux/SKILL.md +497 -0
  115. package/src/claude/skills/ui-ux/references/brand-tokens.md +90 -0
  116. package/src/claude/skills/ui-ux/references/budgets.md +113 -0
  117. package/src/claude/skills/ui-ux/references/checklist.md +271 -0
  118. package/src/claude/skills/ui-ux/references/components/accordion.md +246 -0
  119. package/src/claude/skills/ui-ux/references/components/avatar.md +153 -0
  120. package/src/claude/skills/ui-ux/references/components/banner.md +43 -0
  121. package/src/claude/skills/ui-ux/references/components/breadcrumb.md +201 -0
  122. package/src/claude/skills/ui-ux/references/components/button.md +142 -0
  123. package/src/claude/skills/ui-ux/references/components/card.md +113 -0
  124. package/src/claude/skills/ui-ux/references/components/charts.md +376 -0
  125. package/src/claude/skills/ui-ux/references/components/chat.md +132 -0
  126. package/src/claude/skills/ui-ux/references/components/choice-controls.md +369 -0
  127. package/src/claude/skills/ui-ux/references/components/comment-thread.md +17 -0
  128. package/src/claude/skills/ui-ux/references/components/description-list.md +116 -0
  129. package/src/claude/skills/ui-ux/references/components/empty-state.md +98 -0
  130. package/src/claude/skills/ui-ux/references/components/file-upload.md +107 -0
  131. package/src/claude/skills/ui-ux/references/components/inline-edit.md +128 -0
  132. package/src/claude/skills/ui-ux/references/components/input.md +161 -0
  133. package/src/claude/skills/ui-ux/references/components/list-row.md +56 -0
  134. package/src/claude/skills/ui-ux/references/components/loading.md +198 -0
  135. package/src/claude/skills/ui-ux/references/components/logo.md +147 -0
  136. package/src/claude/skills/ui-ux/references/components/otp-input.md +43 -0
  137. package/src/claude/skills/ui-ux/references/components/quantity-input.md +100 -0
  138. package/src/claude/skills/ui-ux/references/components/range-slider.md +16 -0
  139. package/src/claude/skills/ui-ux/references/components/small-controls.md +340 -0
  140. package/src/claude/skills/ui-ux/references/components/sortable-header.md +86 -0
  141. package/src/claude/skills/ui-ux/references/components/tag-input.md +14 -0
  142. package/src/claude/skills/ui-ux/references/components/timeline.md +38 -0
  143. package/src/claude/skills/ui-ux/references/components/tree.md +30 -0
  144. package/src/claude/skills/ui-ux/references/design-process.md +650 -0
  145. package/src/claude/skills/ui-ux/references/layouts/app-kanban.html +303 -0
  146. package/src/claude/skills/ui-ux/references/layouts/app.md +1369 -0
  147. package/src/claude/skills/ui-ux/references/layouts/form.md +430 -0
  148. package/src/claude/skills/ui-ux/references/layouts/overlay.md +552 -0
  149. package/src/claude/skills/ui-ux/references/layouts/pricing.md +204 -0
  150. package/src/claude/skills/ui-ux/references/locked-rules.md +35 -0
  151. package/src/claude/skills/ui-ux/references/principles.md +408 -0
  152. package/src/claude/skills/ui-ux/references/refactor.md +245 -0
  153. package/src/claude/skills/ui-ux/references/responsive.md +195 -0
  154. package/src/claude/skills/ui-ux/references/review.md +528 -0
  155. package/src/claude/skills/ui-ux/references/rules-color.md +623 -0
  156. package/src/claude/skills/ui-ux/references/rules-form.md +235 -0
  157. package/src/claude/skills/ui-ux/references/rules-state.md +680 -0
  158. package/src/claude/skills/ui-ux/references/rules-type.md +369 -0
  159. package/src/claude/skills/ui-ux/references/styles.md +311 -0
  160. package/src/claude/skills/ui-ux/references/system.md +219 -0
  161. package/src/claude/skills/ui-ux/references/tailwind-v4-traps.md +237 -0
  162. package/src/claude/skills/ui-ux/references/tokens.css +362 -0
  163. package/src/claude/skills/ui-ux/scripts/lint-skill.mjs +216 -0
  164. package/src/claude/skills/ui-ux/scripts/package.json +9 -0
  165. package/src/claude/skills/ui-ux/scripts/probe.mjs +4447 -0
  166. package/src/claude/skills/ui-ux-pro-max/SKILL.md +25 -80
  167. package/src/claude/skills/web-testing/SKILL.md +2 -20
  168. package/src/claude/status.cjs +149 -144
  169. package/src/codex/AGENTS.md +8 -13
  170. package/src/codex/hooks/agent.cjs +2 -1
  171. package/src/codex/hooks/lib/spec-receipt.cjs +4 -32
  172. package/src/codex/hooks/lib/spec-utils.cjs +6 -52
  173. package/src/codex/hooks/rules.cjs +2 -1
  174. package/src/codex/hooks/session.cjs +0 -2
  175. package/src/codex/hooks/spec-gate.cjs +13 -81
  176. package/src/codex/hooks/spec-state.cjs +37 -41
  177. package/src/codex/hooks.json +0 -20
  178. package/src/codex/rules/state-sync.md +3 -12
  179. package/src/common/AGENTS.md +6 -12
  180. package/src/omp/extensions/cafekit-bridge.mjs +6 -6
  181. package/bin/__tests__/change-firewall.semantic-firewall.test.js +0 -2133
  182. package/bin/__tests__/finalizer-pass-gate.semantic-firewall.test.js +0 -342
  183. package/bin/__tests__/release-preflight.semantic-firewall.test.js +0 -586
  184. package/bin/__tests__/review-receipt-c2.semantic-firewall.test.js +0 -378
  185. package/bin/__tests__/specs-v2-policy-and-scaffold.test.js +0 -665
  186. package/bin/__tests__/specs-v2-validator-grounder-contract.test.js +0 -1132
  187. package/src/claude/hooks/__tests__/completion-authority.test.js +0 -990
  188. package/src/claude/hooks/__tests__/semantic-review-authority.test.js +0 -259
  189. package/src/claude/hooks/completion-authority-check.cjs +0 -56
  190. package/src/claude/hooks/completion-authority-state.cjs +0 -527
  191. package/src/claude/hooks/completion-authority.cjs +0 -163
  192. package/src/claude/hooks/lib/context.cjs +0 -616
  193. package/src/claude/hooks/lib/detect.cjs +0 -474
  194. package/src/claude/hooks/semantic-review-authority.cjs +0 -154
  195. package/src/claude/hooks/task-scaffold-guard.cjs +0 -114
  196. package/src/claude/hooks/usage.cjs +0 -197
  197. package/src/claude/scripts/change-firewall.cjs +0 -1748
  198. package/src/claude/scripts/spec-authoring-digest.cjs +0 -151
  199. package/src/claude/scripts/spec-authoring-validation.cjs +0 -126
  200. package/src/claude/scripts/spec-final-state.cjs +0 -290
  201. package/src/claude/scripts/spec-ground.cjs +0 -650
  202. package/src/claude/scripts/spec-readiness.cjs +0 -425
  203. package/src/claude/scripts/spec-scaffold.cjs +0 -2317
  204. package/src/claude/scripts/spec-semantic-model.cjs +0 -396
  205. package/src/claude/scripts/validate-spec-output.cjs +0 -3941
  206. package/src/claude/skills/code-review/references/verification-gate.md +0 -46
  207. package/src/claude/skills/delegate/SKILL.md +0 -124
  208. package/src/claude/skills/delegate/references/codex-delegation.md +0 -71
  209. package/src/claude/skills/delegate/references/grok-delegation.md +0 -84
  210. package/src/claude/skills/hotfix/SKILL.md +0 -289
  211. package/src/claude/skills/inspect/SKILL.md +0 -142
  212. package/src/claude/skills/loop/SKILL.md +0 -114
  213. package/src/claude/skills/loop/references/bounded-loop-protocol.md +0 -104
  214. package/src/claude/skills/loop/references/metric-and-guard-contract.md +0 -76
  215. package/src/claude/skills/route/SKILL.md +0 -94
  216. package/src/claude/skills/route/references/agent-timing.md +0 -46
  217. package/src/claude/skills/route/references/chaining-patterns.md +0 -53
  218. package/src/claude/skills/route/references/task-taxonomy.md +0 -48
  219. package/src/claude/skills/specs/templates/design.md +0 -82
  220. package/src/claude/skills/specs/templates/requirements-init.md +0 -8
  221. package/src/claude/skills/specs/templates/requirements.md +0 -42
  222. package/src/claude/skills/specs/templates/spec-state.json +0 -56
  223. package/src/claude/skills/specs/templates/task.md +0 -47
  224. package/src/codex/hooks/completion-authority-check.cjs +0 -67
  225. package/src/codex/hooks/completion-authority-state.cjs +0 -527
  226. package/src/codex/hooks/completion-authority.cjs +0 -109
  227. package/src/codex/hooks/semantic-review-authority.cjs +0 -130
  228. package/src/codex/hooks/task-scaffold-guard.cjs +0 -63
  229. /package/src/claude/skills/{question → ask}/templates/question.md +0 -0
  230. /package/src/claude/skills/{hotfix → fix}/references/escalation-tactics.md +0 -0
  231. /package/src/claude/skills/{hotfix → fix}/references/workflow-specialized.md +0 -0
package/src/claude/skills/ui-ux/references/layouts/app-kanban.html ADDED
@@ -0,0 +1,303 @@
1
+ <!doctype html>
2
+ <html lang="vi">
3
+ <head>
4
+ <meta charset="utf-8" />
5
+ <meta name="viewport" content="width=device-width, initial-scale=1" />
6
+ <title>Bảng công việc</title>
7
+
8
+ <link rel="preconnect" href="https://fonts.googleapis.com" />
9
+ <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
10
+ <link
11
+ href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap"
12
+ rel="stylesheet"
13
+ />
14
+
15
+ <!-- Tailwind v4 bản chạy trong trình duyệt: cùng cú pháp với skill (outline-hidden, @theme inline). -->
16
+ <script src="https://cdn.jsdelivr.net/npm/@tailwindcss/browser@4"></script>
17
+
18
+ <style>
19
+ /* ===== KHỐI ĐỔI THƯƠNG HIỆU, chép từ references/tokens.css (nền sáng).
20
+ Ngoài khối này không có mã màu nào khác. ===== */
21
+ :root {
22
+ /* ===== FONT, KHAI MỘT LẦN, DÙNG CHUNG =====
23
+ Một font cho cả app. Phân vai bằng weight:
24
+ heading 600, body 400, nhãn phụ 500 (T2). */
25
+ --app-font: "Inter", ui-sans-serif, system-ui, sans-serif;
26
+ /* ========================================== */
27
+
28
+ /* ===== MÀU NHẤN, NỀN SÁNG ===== */
29
+ --primary: #181818; /* mặc định gần đen. Màu riêng thì thay vào đây */
30
+ --primary-hover: #2e2e2e; /* nhạt hơn --primary một bậc */
31
+ --primary-foreground: #ffffff;
32
+ /* ============================== */
33
+
34
+ --background: #f4f4f6; /* nền trang, xám nhạt, không bao giờ trắng */
35
+ --surface: #ffffff; /* nền card, input, header */
36
+ --foreground: #2c2c2c; /* chữ chính */
37
+ --muted: #707070; /* chữ phụ, label, placeholder, icon phụ. 4.95:1 */
38
+ /* Hai token viền, chia theo vai (M14). --border: đường tóc trang trí (viền card,
39
+ đường chia). --border-strong: viền ô nhập, nút outline, đường kẻ khung app
40
+ (dưới header), viền card khi hover. */
41
+ --border: #f7f7f8;
42
+ --border-strong: #eaeaea;
43
+
44
+ --secondary: #e7e8ec; /* nút phụ, mục đang chọn; luôn chìm hơn --surface */
45
+ --secondary-hover: #dbdce2;
46
+ --background-hover: #e7e7ea; /* ô trạng thái nhỏ trong hàng có hover (M18) */
47
+ --surface-hover: #f8f8fa; /* hover dòng tràn hết bề ngang khung trắng (I10) */
48
+ --button-hover: #f1f1f3; /* hover nút viền: chỉ đổi nền, viền giữ nguyên */
49
+
50
+ --ring-focus: rgba(24, 24, 24, 0.1);
51
+ --border-focus: var(--primary);
52
+ }
53
+ /* ===== HẾT KHỐI ĐỔI THƯƠNG HIỆU ===== */
54
+
55
+ /* ===== THANH CUỘN TỰ ẨN (I18), chép từ tokens.css. Board dựa vào khối này:
56
+ đứng yên không thấy, rê vào vùng cuộn thì hiện 4px, người dùng chuột vẫn có chỗ kéo ngang. */
57
+ * { --scrollbar-thumb: transparent; }
58
+ *:hover { --scrollbar-thumb: color-mix(in srgb, var(--foreground) 16%, transparent); }
59
+ .is-scrolling { --scrollbar-thumb: color-mix(in srgb, var(--foreground) 28%, transparent); }
60
+ ::-webkit-scrollbar { width: 4px; height: 4px; }
61
+ ::-webkit-scrollbar-track { background: transparent; }
62
+ ::-webkit-scrollbar-thumb { background: var(--scrollbar-thumb); border-radius: 9999px; }
63
+ ::-webkit-scrollbar-thumb:hover { background: color-mix(in srgb, var(--foreground) 40%, transparent); }
64
+
65
+ @supports not selector(::-webkit-scrollbar) {
66
+ * { scrollbar-width: thin; scrollbar-color: transparent transparent; }
67
+ *:hover { scrollbar-color: color-mix(in srgb, var(--foreground) 18%, transparent) transparent; }
68
+ .is-scrolling { scrollbar-color: color-mix(in srgb, var(--foreground) 28%, transparent) transparent; }
69
+ }
70
+ /* ===================================================== */
71
+ </style>
72
+
73
+ <style type="text/tailwindcss">
74
+ /* Map token sang class, như khối @theme inline của tokens.css. */
75
+ @theme inline {
76
+ --font-sans: var(--app-font);
77
+
78
+ --color-primary: var(--primary);
79
+ --color-primary-hover: var(--primary-hover);
80
+ --color-primary-foreground: var(--primary-foreground);
81
+
82
+ --color-background: var(--background);
83
+ --color-background-hover: var(--background-hover);
84
+ --color-surface: var(--surface);
85
+ --color-surface-hover: var(--surface-hover);
86
+ --color-foreground: var(--foreground);
87
+ --color-muted: var(--muted);
88
+ --color-border: var(--border);
89
+ --color-border-strong: var(--border-strong);
90
+ --color-secondary: var(--secondary);
91
+ --color-secondary-hover: var(--secondary-hover);
92
+ --color-button-hover: var(--button-hover);
93
+
94
+ --border-color-focus: var(--border-focus);
95
+ --ring-color-focus: var(--ring-focus);
96
+ }
97
+ </style>
98
+ </head>
99
+
100
+ <body class="bg-background font-sans text-foreground antialiased">
101
+ <div class="flex min-h-screen w-full flex-col">
102
+ <!-- Thanh header theo layouts/app.md: h-16, nền trắng --surface, đường kẻ dưới --border-strong.
103
+ Trang không có đầu trang riêng nên tên trên thanh chính là <h1>, font-semibold (T2).
104
+ px-4 sm:px-6: tên trang thẳng mép icon đầu cột bên dưới (hàng cột px-3 + đầu cột px-1). -->
105
+ <header
106
+ class="flex h-16 shrink-0 items-center justify-between gap-3 border-b border-border bg-surface px-4 sm:px-6"
107
+ >
108
+ <h1 class="min-w-0 truncate text-base font-semibold text-foreground">Bảng công việc</h1>
109
+
110
+ <!-- Nút đặc duy nhất của thanh: h-9 rounded-lg, icon plus (app.md, "Nhóm nút bên phải thanh header"). -->
111
+ <button
112
+ type="button"
113
+ class="inline-flex h-9 shrink-0 cursor-pointer items-center gap-2 rounded-lg bg-primary px-3 text-sm font-medium text-primary-foreground outline-hidden transition-colors hover:bg-primary-hover"
114
+ >
115
+ <i data-lucide="plus" class="size-4 shrink-0" aria-hidden="true"></i>
116
+ Thêm việc
117
+ </button>
118
+ </header>
119
+
120
+ <!-- Vùng nội dung chỉ padding dọc: board cuộn ngang phải chạm hai mép màn, nên lề ngang nằm ở
121
+ từng khối (hàng lọc mx-3 sm:mx-5; hàng cột px-3 sm:px-5), không kéo board ra bằng -mx (N11). -->
122
+ <div class="flex flex-1 flex-col py-3 sm:py-5">
123
+ <div class="mx-3 mb-4 flex flex-col gap-3 sm:mx-5 sm:flex-row sm:items-center sm:justify-between">
124
+ <!-- Chip lọc chính theo components/small-controls.md, có aria-pressed. Ba chip vừa 375px nên
125
+ hàng không cuộn, không scrollbar-clean. Thêm chip tới mức tràn thì theo R6 và R10
126
+ (responsive.md): khung cuộn scrollbar-clean + mép mờ + nút mũi tên ở máy có chuột. -->
127
+ <div class="flex items-center gap-2">
128
+ <button type="button" aria-pressed="true" class="inline-flex h-9 shrink-0 cursor-pointer items-center rounded-full bg-primary px-3.5 text-sm font-medium text-primary-foreground outline-hidden transition-colors">
129
+ Tất cả
130
+ </button>
131
+ <button type="button" aria-pressed="false" class="inline-flex h-9 shrink-0 cursor-pointer items-center rounded-full bg-foreground/5 px-3.5 text-sm font-medium text-foreground/70 outline-hidden transition-colors hover:bg-foreground/10 hover:text-foreground">
132
+ Của tôi
133
+ </button>
134
+ <button type="button" aria-pressed="false" class="inline-flex h-9 shrink-0 cursor-pointer items-center rounded-full bg-foreground/5 px-3.5 text-sm font-medium text-foreground/70 outline-hidden transition-colors hover:bg-foreground/10 hover:text-foreground">
135
+ Quá hạn
136
+ </button>
137
+ </div>
138
+
139
+ <!-- Ô tìm theo components/input.md: h-11 md:h-10, text-base md:text-sm (R8). -->
140
+ <label class="relative block shrink-0 sm:w-64">
141
+ <span class="sr-only">Tìm việc</span>
142
+ <input
143
+ type="search"
144
+ placeholder="Tìm việc"
145
+ class="h-11 w-full rounded-xl border border-border-strong bg-surface px-4 text-base text-foreground outline-hidden transition-colors placeholder:text-muted focus:border-focus focus:ring-2 focus:ring-focus md:h-10 md:text-sm"
146
+ />
147
+ </label>
148
+ </div>
149
+
150
+ <!-- Board không scrollbar-clean: thanh cuộn tự ẩn (I18), người dùng chuột vẫn có chỗ kéo ngang. -->
151
+ <div class="flex-1 overflow-x-auto">
152
+ <!-- w-max giữ lề phải khi cuộn, min-w-full cho cột giãn khi còn chỗ (layouts/app.md). -->
153
+ <div class="flex w-max min-w-full items-start gap-4 px-3 pb-2 sm:px-5">
154
+ <section class="w-[248px] min-w-0 max-w-[320px] shrink-0 grow">
155
+ <header class="mb-3 flex items-center gap-2 px-1">
156
+ <i data-lucide="circle" class="size-4 shrink-0 text-zinc-500"></i>
157
+ <h2 class="min-w-0 truncate text-base font-semibold text-foreground">Cần làm</h2>
158
+ <span class="text-xs font-medium text-muted">4</span>
159
+ </header>
160
+
161
+ <ul class="flex flex-col gap-3">
162
+ <li
163
+ class="cursor-grab rounded-2xl border border-border bg-surface p-4 transition-colors hover:border-border-strong"
164
+ >
165
+ <p class="line-clamp-2 text-sm font-medium text-foreground">
166
+ Viết lại nội dung trang giới thiệu theo bản brief mới
167
+ </p>
168
+ <p class="mt-2 text-xs text-muted">Website · 22/08</p>
169
+ </li>
170
+ <li
171
+ class="cursor-grab rounded-2xl border border-border bg-surface p-4 transition-colors hover:border-border-strong"
172
+ >
173
+ <p class="line-clamp-2 text-sm font-medium text-foreground">
174
+ Chuẩn bị số liệu doanh thu tháng 7 cho buổi họp
175
+ </p>
176
+ <p class="mt-2 text-xs"><span class="text-muted">Báo cáo · </span><span class="font-medium text-amber-700">Quá hạn 2 ngày</span></p>
177
+ </li>
178
+ <li
179
+ class="cursor-grab rounded-2xl border border-border bg-surface p-4 transition-colors hover:border-border-strong"
180
+ >
181
+ <p class="line-clamp-2 text-sm font-medium text-foreground">
182
+ Dọn danh sách khách hàng trùng trong CRM
183
+ </p>
184
+ <p class="mt-2 text-xs text-muted">Vận hành · 26/08</p>
185
+ </li>
186
+ <li
187
+ class="cursor-grab rounded-2xl border border-border bg-surface p-4 transition-colors hover:border-border-strong"
188
+ >
189
+ <p class="line-clamp-2 text-sm font-medium text-foreground">
190
+ Đặt lịch phỏng vấn hai ứng viên vòng cuối
191
+ </p>
192
+ <p class="mt-2 text-xs text-muted">Tuyển dụng · 29/08</p>
193
+ </li>
194
+ </ul>
195
+ </section>
196
+
197
+ <section class="w-[248px] min-w-0 max-w-[320px] shrink-0 grow">
198
+ <header class="mb-3 flex items-center gap-2 px-1">
199
+ <i data-lucide="circle-dot" class="size-4 shrink-0 text-zinc-500"></i>
200
+ <h2 class="min-w-0 truncate text-base font-semibold text-foreground">Đang làm</h2>
201
+ <span class="text-xs font-medium text-muted">3</span>
202
+ </header>
203
+
204
+ <ul class="flex flex-col gap-3">
205
+ <li
206
+ class="cursor-grab rounded-2xl border border-border bg-surface p-4 transition-colors hover:border-border-strong"
207
+ >
208
+ <p class="line-clamp-2 text-sm font-medium text-foreground">
209
+ Dựng màn hình thanh toán cho gói năm
210
+ </p>
211
+ <p class="mt-2 text-xs text-muted">Sản phẩm · 21/08</p>
212
+ </li>
213
+ <li
214
+ class="cursor-grab rounded-2xl border border-border bg-surface p-4 transition-colors hover:border-border-strong"
215
+ >
216
+ <p class="line-clamp-2 text-sm font-medium text-foreground">
217
+ Chuyển kho ảnh sản phẩm sang CDN mới
218
+ </p>
219
+ <p class="mt-2 text-xs text-muted">Hạ tầng · 25/08</p>
220
+ </li>
221
+ <li
222
+ class="cursor-grab rounded-2xl border border-border bg-surface p-4 transition-colors hover:border-border-strong"
223
+ >
224
+ <p class="line-clamp-2 text-sm font-medium text-foreground">
225
+ Trả lời 18 phản hồi còn tồn trong hộp thư hỗ trợ
226
+ </p>
227
+ <p class="mt-2 text-xs"><span class="text-muted">Hỗ trợ · </span><span class="font-medium text-foreground">Hôm nay</span></p>
228
+ </li>
229
+ </ul>
230
+ </section>
231
+
232
+ <section class="w-[248px] min-w-0 max-w-[320px] shrink-0 grow">
233
+ <header class="mb-3 flex items-center gap-2 px-1">
234
+ <i data-lucide="circle-ellipsis" class="size-4 shrink-0 text-amber-600"></i>
235
+ <h2 class="min-w-0 truncate text-base font-semibold text-foreground">Chờ duyệt</h2>
236
+ <span class="text-xs font-medium text-muted">2</span>
237
+ </header>
238
+
239
+ <ul class="flex flex-col gap-3">
240
+ <li
241
+ class="cursor-grab rounded-2xl border border-border bg-surface p-4 transition-colors hover:border-border-strong"
242
+ >
243
+ <p class="line-clamp-2 text-sm font-medium text-foreground">
244
+ Bảng giá mới cho gói doanh nghiệp
245
+ </p>
246
+ <p class="mt-2 text-xs text-muted">Kinh doanh · gửi 19/08</p>
247
+ </li>
248
+ <li
249
+ class="cursor-grab rounded-2xl border border-border bg-surface p-4 transition-colors hover:border-border-strong"
250
+ >
251
+ <p class="line-clamp-2 text-sm font-medium text-foreground">
252
+ Hợp đồng gia hạn với nhà cung cấp máy chủ
253
+ </p>
254
+ <p class="mt-2 text-xs text-muted">Pháp lý · gửi 20/08</p>
255
+ </li>
256
+ </ul>
257
+ </section>
258
+
259
+ <section class="w-[248px] min-w-0 max-w-[320px] shrink-0 grow">
260
+ <header class="mb-3 flex items-center gap-2 px-1">
261
+ <i data-lucide="circle-check" class="size-4 shrink-0 text-emerald-600"></i>
262
+ <h2 class="min-w-0 truncate text-base font-semibold text-foreground">Xong</h2>
263
+ <span class="text-xs font-medium text-muted">3</span>
264
+ </header>
265
+
266
+ <ul class="flex flex-col gap-3">
267
+ <li
268
+ class="cursor-grab rounded-2xl border border-border bg-surface p-4 transition-colors hover:border-border-strong"
269
+ >
270
+ <p class="line-clamp-2 text-sm font-medium text-foreground">
271
+ Chốt bản thiết kế trang chủ với khách
272
+ </p>
273
+ <p class="mt-2 text-xs text-muted">Website · xong 18/08</p>
274
+ </li>
275
+ <li
276
+ class="cursor-grab rounded-2xl border border-border bg-surface p-4 transition-colors hover:border-border-strong"
277
+ >
278
+ <p class="line-clamp-2 text-sm font-medium text-foreground">
279
+ Sao lưu cơ sở dữ liệu quý 2
280
+ </p>
281
+ <p class="mt-2 text-xs text-muted">Hạ tầng · xong 17/08</p>
282
+ </li>
283
+ <li
284
+ class="cursor-grab rounded-2xl border border-border bg-surface p-4 transition-colors hover:border-border-strong"
285
+ >
286
+ <p class="line-clamp-2 text-sm font-medium text-foreground">
287
+ Gửi hoá đơn tháng 7 cho 12 khách hàng
288
+ </p>
289
+ <p class="mt-2 text-xs text-muted">Kế toán · xong 15/08</p>
290
+ </li>
291
+ </ul>
292
+ </section>
293
+ </div>
294
+ </div>
295
+ </div>
296
+ </div>
297
+
298
+ <script src="https://unpkg.com/lucide@0.460.0/dist/umd/lucide.min.js"></script>
299
+ <script>
300
+ lucide.createIcons();
301
+ </script>
302
+ </body>
303
+ </html>