npm - specpipe - Versions diffs - 1.0.0 - Mend

specpipe 1.0.0

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 (60) hide show

package/README.md +1319 -0
package/bin/devkit.js +3 -0
package/package.json +61 -0
package/src/cli.js +76 -0
package/src/commands/check.js +33 -0
package/src/commands/diff.js +84 -0
package/src/commands/init-adopt.js +54 -0
package/src/commands/init-agents.js +118 -0
package/src/commands/init-global.js +102 -0
package/src/commands/init.js +311 -0
package/src/commands/list.js +54 -0
package/src/commands/remove.js +133 -0
package/src/commands/upgrade.js +215 -0
package/src/lib/agent-guards.js +100 -0
package/src/lib/agent-install.js +161 -0
package/src/lib/agents.js +280 -0
package/src/lib/claude-global.js +183 -0
package/src/lib/detector.js +93 -0
package/src/lib/hasher.js +21 -0
package/src/lib/installer.js +213 -0
package/src/lib/logger.js +16 -0
package/src/lib/manifest.js +102 -0
package/src/lib/reconcile.js +56 -0
package/templates/.claude/CLAUDE.md +79 -0
package/templates/.claude/hooks/comment-guard.js +126 -0
package/templates/.claude/hooks/file-guard.js +216 -0
package/templates/.claude/hooks/glob-guard.js +104 -0
package/templates/.claude/hooks/path-guard.sh +118 -0
package/templates/.claude/hooks/self-review.sh +27 -0
package/templates/.claude/hooks/sensitive-guard.sh +227 -0
package/templates/.claude/settings.json +68 -0
package/templates/docs/WORKFLOW.md +325 -0
package/templates/docs/specs/.gitkeep +0 -0
package/templates/hooks/specpipe-read-guard.sh +42 -0
package/templates/hooks/specpipe-shell-guard.sh +65 -0
package/templates/rules/specpipe-guards.md +40 -0
package/templates/scripts/test-hooks.sh +66 -0
package/templates/skills/sp-build/SKILL.md +776 -0
package/templates/skills/sp-challenge/SKILL.md +255 -0
package/templates/skills/sp-commit/SKILL.md +174 -0
package/templates/skills/sp-explore/SKILL.md +730 -0
package/templates/skills/sp-fix/SKILL.md +266 -0
package/templates/skills/sp-humanize/SKILL.md +212 -0
package/templates/skills/sp-investigate/SKILL.md +648 -0
package/templates/skills/sp-md-render/SKILL.md +200 -0
package/templates/skills/sp-md-render/components.md +415 -0
package/templates/skills/sp-md-render/template.html +283 -0
package/templates/skills/sp-plan/SKILL.md +947 -0
package/templates/skills/sp-review/SKILL.md +268 -0
package/templates/skills/sp-scaffold/SKILL.md +237 -0
package/templates/skills/sp-scaffold/references/ARCHITECTURE.md.tmpl +228 -0
package/templates/skills/sp-scaffold/references/DESIGN.md.tmpl +113 -0
package/templates/skills/sp-scaffold/references/adr/NNNN-template.md +92 -0
package/templates/skills/sp-scaffold/references/stack-profiles/react.md +36 -0
package/templates/skills/sp-spec-render/SKILL.md +254 -0
package/templates/skills/sp-spec-render/components.md +418 -0
package/templates/skills/sp-spec-render/examples/user-auth.html +749 -0
package/templates/skills/sp-spec-render/examples/user-auth.md +114 -0
package/templates/skills/sp-spec-render/template.html +222 -0
package/templates/skills/sp-voices/SKILL.md +1184 -0

package/templates/skills/sp-spec-render/examples/user-auth.html ADDED Viewed

@@ -0,0 +1,749 @@
+<!doctype html>
+<html lang="vi" data-theme="auto">
+<head>
+<meta charset="utf-8">
+<meta name="viewport" content="width=device-width, initial-scale=1">
+<title>Spec · user-auth</title>
+<style>
+  :root {
+    --bg: #ffffff;
+    --bg-elev: #f6f8fa;
+    --bg-sunken: #fafbfc;
+    --fg: #0a0c10;
+    --fg-muted: #57606a;
+    --fg-subtle: #8c959f;
+    --border: #d0d7de;
+    --border-subtle: #e5e9ef;
+    --accent: #d97757;
+    --accent-bg: #fff4ef;
+    --p0: #cf222e;
+    --p0-bg: #ffebe9;
+    --p1: #bf8700;
+    --p1-bg: #fff8c5;
+    --p2: #57606a;
+    --p2-bg: #eaeef2;
+    --warn: #9a6700;
+    --warn-bg: #fff8c5;
+    --warn-border: #d4a72c;
+    --ok: #1a7f37;
+    --shadow: 0 1px 0 rgba(31,35,40,0.04);
+    --radius: 6px;
+    --radius-lg: 10px;
+    --mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, "Liberation Mono", monospace;
+    --sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
+  }
+  @media (prefers-color-scheme: dark) {
+    :root[data-theme="auto"] {
+      --bg: #0d1117;
+      --bg-elev: #161b22;
+      --bg-sunken: #010409;
+      --fg: #e6edf3;
+      --fg-muted: #8b949e;
+      --fg-subtle: #6e7681;
+      --border: #30363d;
+      --border-subtle: #21262d;
+      --accent: #f0a378;
+      --accent-bg: #2a1810;
+      --p0: #f85149;
+      --p0-bg: #2d0e10;
+      --p1: #d29922;
+      --p1-bg: #2d2611;
+      --p2: #8b949e;
+      --p2-bg: #21262d;
+      --warn: #d29922;
+      --warn-bg: #2d2611;
+      --warn-border: #9e6a03;
+      --ok: #3fb950;
+      --shadow: 0 1px 0 rgba(0,0,0,0.3);
+    }
+  }
+  :root[data-theme="dark"] {
+    --bg: #0d1117;
+    --bg-elev: #161b22;
+    --bg-sunken: #010409;
+    --fg: #e6edf3;
+    --fg-muted: #8b949e;
+    --fg-subtle: #6e7681;
+    --border: #30363d;
+    --border-subtle: #21262d;
+    --accent: #f0a378;
+    --accent-bg: #2a1810;
+    --p0: #f85149;
+    --p0-bg: #2d0e10;
+    --p1: #d29922;
+    --p1-bg: #2d2611;
+    --p2: #8b949e;
+    --p2-bg: #21262d;
+    --warn: #d29922;
+    --warn-bg: #2d2611;
+    --warn-border: #9e6a03;
+    --ok: #3fb950;
+    --shadow: 0 1px 0 rgba(0,0,0,0.3);
+  }
+  * { box-sizing: border-box; }
+  html, body { margin: 0; padding: 0; }
+  body {
+    font-family: var(--sans);
+    font-size: 14px;
+    line-height: 1.55;
+    color: var(--fg);
+    background: var(--bg);
+    -webkit-font-smoothing: antialiased;
+  }
+  code, kbd, .mono { font-family: var(--mono); font-size: 0.92em; }
+  a { color: var(--accent); text-decoration: none; }
+  a:hover { text-decoration: underline; }
+  /* Skip link */
+  .skip { position: absolute; left: -9999px; top: 8px; padding: 8px 12px; background: var(--accent); color: white; border-radius: 6px; }
+  .skip:focus { left: 8px; z-index: 1000; }
+  /* Top bar */
+  .topbar {
+    position: sticky; top: 0; z-index: 50;
+    display: flex; align-items: center; gap: 16px;
+    padding: 10px 20px;
+    background: var(--bg);
+    border-bottom: 1px solid var(--border);
+    font-size: 13px;
+  }
+  .topbar .doc-type {
+    font-family: var(--mono);
+    font-size: 11px;
+    font-weight: 600;
+    letter-spacing: 0.05em;
+    padding: 2px 6px;
+    background: var(--accent-bg);
+    color: var(--accent);
+    border-radius: 4px;
+  }
+  .topbar .feature { font-weight: 600; color: var(--fg); }
+  .topbar .meta { color: var(--fg-muted); display: flex; gap: 14px; flex-wrap: wrap; }
+  .topbar .meta .sep { color: var(--fg-subtle); }
+  .topbar .spacer { flex: 1; }
+  .status {
+    display: inline-flex; align-items: center; gap: 6px;
+    font-size: 12px; font-weight: 500;
+    padding: 2px 8px;
+    border-radius: 999px;
+    background: color-mix(in srgb, var(--ok) 12%, transparent);
+    color: var(--ok);
+  }
+  .status::before {
+    content: ""; width: 6px; height: 6px; border-radius: 50%;
+    background: var(--ok);
+  }
+  .icon-btn {
+    background: none; border: 1px solid var(--border); color: var(--fg-muted);
+    width: 32px; height: 32px; border-radius: 6px; cursor: pointer;
+    display: inline-flex; align-items: center; justify-content: center;
+    transition: background 80ms, color 80ms;
+  }
+  .icon-btn:hover { background: var(--bg-elev); color: var(--fg); }
+  .icon-btn svg { width: 16px; height: 16px; fill: currentColor; }
+  /* Layout */
+  .layout { display: grid; grid-template-columns: 280px minmax(0, 1fr); gap: 0; }
+  @media (max-width: 900px) { .layout { grid-template-columns: 1fr; } }
+  /* Sidebar */
+  .sidebar {
+    position: sticky; top: 53px; align-self: start;
+    height: calc(100vh - 53px);
+    overflow-y: auto;
+    border-right: 1px solid var(--border);
+    padding: 16px 12px 32px;
+    background: var(--bg);
+  }
+  @media (max-width: 900px) {
+    .sidebar { position: static; height: auto; border-right: none; border-bottom: 1px solid var(--border); }
+  }
+  .toc-search {
+    width: 100%; padding: 6px 10px;
+    font: inherit; font-size: 13px;
+    background: var(--bg-elev);
+    border: 1px solid var(--border);
+    border-radius: 6px; color: var(--fg);
+    margin-bottom: 12px;
+  }
+  .toc-search:focus { outline: 2px solid var(--accent); outline-offset: -1px; border-color: var(--accent); }
+  .toc-group {
+    font-size: 11px; font-weight: 600; letter-spacing: 0.05em;
+    text-transform: uppercase; color: var(--fg-subtle);
+    margin: 14px 8px 6px;
+  }
+  .toc a {
+    display: flex; align-items: center; gap: 8px;
+    padding: 4px 8px;
+    color: var(--fg-muted);
+    border-radius: 4px;
+    font-size: 13px;
+    line-height: 1.45;
+  }
+  .toc a:hover { background: var(--bg-elev); color: var(--fg); text-decoration: none; }
+  .toc a.active {
+    background: var(--accent-bg); color: var(--accent); font-weight: 500;
+  }
+  .toc a .p { font-family: var(--mono); font-size: 10px; flex-shrink: 0; }
+  .toc a .p.p0 { color: var(--p0); }
+  .toc a .p.p1 { color: var(--p1); }
+  .toc a .p.p2 { color: var(--p2); }
+  /* Content */
+  main {
+    padding: 24px 32px 80px;
+    max-width: 920px;
+    min-width: 0;
+  }
+  @media (max-width: 600px) { main { padding: 16px; } }
+  h1 { font-size: 22px; font-weight: 600; margin: 4px 0 4px; letter-spacing: -0.01em; }
+  h2 { font-size: 18px; font-weight: 600; margin: 32px 0 12px; padding-bottom: 4px; border-bottom: 1px solid var(--border-subtle); }
+  h3 { font-size: 15px; font-weight: 600; margin: 0; }
+  p { margin: 0 0 12px; }
+  .subtitle { color: var(--fg-muted); margin: 0 0 24px; font-size: 14px; }
+  /* TL;DR */
+  .tldr {
+    background: var(--bg-elev);
+    border: 1px solid var(--border-subtle);
+    border-left: 3px solid var(--accent);
+    border-radius: var(--radius);
+    padding: 14px 18px;
+    margin: 16px 0 24px;
+  }
+  .tldr-label {
+    font-family: var(--mono); font-size: 11px; font-weight: 600;
+    letter-spacing: 0.05em; color: var(--accent); text-transform: uppercase;
+    margin-bottom: 6px;
+  }
+  .tldr p { margin: 0 0 8px; }
+  .tldr ul { margin: 6px 0 0; padding-left: 18px; }
+  .tldr li { margin: 2px 0; }
+  /* Priority badge */
+  .badge {
+    display: inline-flex; align-items: center;
+    font-family: var(--mono); font-size: 11px; font-weight: 600;
+    padding: 1px 6px; border-radius: 4px;
+    letter-spacing: 0.02em;
+  }
+  .badge.p0 { color: var(--p0); background: var(--p0-bg); }
+  .badge.p1 { color: var(--p1); background: var(--p1-bg); }
+  .badge.p2 { color: var(--p2); background: var(--p2-bg); }
+  .badge.count { color: var(--fg-muted); background: var(--bg-elev); font-weight: 500; }
+  /* Story card */
+  .story {
+    border: 1px solid var(--border);
+    border-radius: var(--radius-lg);
+    margin: 0 0 16px;
+    background: var(--bg);
+    box-shadow: var(--shadow);
+    overflow: hidden;
+  }
+  .story-head {
+    display: flex; align-items: center; gap: 10px;
+    padding: 12px 16px;
+    background: var(--bg-elev);
+    border-bottom: 1px solid var(--border-subtle);
+  }
+  .story-head .id {
+    font-family: var(--mono); font-size: 12px;
+    color: var(--fg-muted);
+  }
+  .story-head .title { flex: 1; font-weight: 600; font-size: 14px; }
+  .story-body { padding: 14px 16px; }
+  .story-desc { color: var(--fg); margin: 0 0 12px; font-size: 13.5px; }
+  /* AS table */
+  .as-list { display: flex; flex-direction: column; gap: 8px; }
+  .as {
+    border: 1px solid var(--border-subtle);
+    border-radius: var(--radius);
+    overflow: hidden;
+  }
+  .as-head {
+    display: flex; align-items: center; gap: 10px;
+    padding: 8px 12px;
+    background: var(--bg-sunken);
+    cursor: pointer;
+    user-select: none;
+  }
+  .as-head:hover { background: var(--bg-elev); }
+  .as-head .id { font-family: var(--mono); font-size: 12px; color: var(--accent); font-weight: 600; }
+  .as-head .desc { flex: 1; font-size: 13.5px; color: var(--fg); }
+  .as-head .chev { color: var(--fg-subtle); transition: transform 120ms; flex-shrink: 0; }
+  .as[open] .as-head .chev { transform: rotate(90deg); }
+  .as-body {
+    padding: 10px 12px;
+    border-top: 1px solid var(--border-subtle);
+    background: var(--bg);
+  }
+  .gwt {
+    display: grid; grid-template-columns: max-content 1fr;
+    gap: 4px 12px;
+    font-size: 13px;
+  }
+  .gwt dt {
+    font-family: var(--mono); font-size: 11px; font-weight: 600;
+    color: var(--fg-subtle); letter-spacing: 0.04em; text-transform: uppercase;
+    padding-top: 3px;
+  }
+  .gwt dd { margin: 0; }
+  .gwt code { background: var(--bg-elev); padding: 1px 4px; border-radius: 3px; }
+  .as-data {
+    margin-top: 8px; padding: 6px 10px;
+    background: var(--bg-sunken); border-radius: 4px;
+    font-family: var(--mono); font-size: 12px; color: var(--fg-muted);
+  }
+  .as-data b { color: var(--fg); font-weight: 600; }
+  /* Callout */
+  .callout {
+    display: flex; gap: 10px;
+    padding: 12px 14px;
+    background: var(--warn-bg);
+    border: 1px solid var(--warn-border);
+    border-radius: var(--radius);
+    margin: 0 0 8px;
+    font-size: 13.5px;
+  }
+  .callout .ico {
+    flex-shrink: 0; color: var(--warn);
+    width: 18px; height: 18px;
+  }
+  .callout-title { font-weight: 600; color: var(--warn); margin: 0 0 2px; font-size: 13px; }
+  .callout p { margin: 0; color: var(--fg); }
+  /* Constraint list */
+  .constraints { display: flex; flex-direction: column; gap: 8px; }
+  /* Timeline */
+  details.collapsible {
+    border: 1px solid var(--border-subtle);
+    border-radius: var(--radius);
+    background: var(--bg-elev);
+    margin: 0 0 10px;
+  }
+  details.collapsible > summary {
+    list-style: none; cursor: pointer;
+    padding: 10px 14px;
+    display: flex; align-items: center; gap: 8px;
+    font-weight: 500; font-size: 13.5px;
+  }
+  details.collapsible > summary::-webkit-details-marker { display: none; }
+  details.collapsible > summary::before {
+    content: "›"; color: var(--fg-subtle); font-size: 18px; line-height: 1;
+    transition: transform 120ms;
+  }
+  details.collapsible[open] > summary::before { transform: rotate(90deg); }
+  details.collapsible > summary .count {
+    color: var(--fg-muted); font-weight: 400; margin-left: auto;
+  }
+  details.collapsible > div { padding: 8px 16px 14px; border-top: 1px solid var(--border-subtle); background: var(--bg); }
+  .changelog { width: 100%; border-collapse: collapse; font-size: 13px; }
+  .changelog th, .changelog td { text-align: left; padding: 6px 10px 6px 0; border-bottom: 1px solid var(--border-subtle); }
+  .changelog th { font-size: 11px; font-weight: 600; color: var(--fg-subtle); letter-spacing: 0.04em; text-transform: uppercase; }
+  .changelog td.date { font-family: var(--mono); white-space: nowrap; color: var(--fg-muted); }
+  .snapshots-list { display: flex; flex-direction: column; gap: 6px; }
+  .snapshot-row { display: flex; align-items: center; gap: 12px; padding: 6px 0; border-bottom: 1px solid var(--border-subtle); font-size: 13px; }
+  .snapshot-row:last-child { border-bottom: none; }
+  .snapshot-row .date { font-family: var(--mono); color: var(--fg-muted); min-width: 100px; }
+  .snapshot-row .reason { color: var(--fg-subtle); font-size: 12px; }
+  /* Anchor */
+  h2[id], h3[id] { scroll-margin-top: 70px; }
+  /* Hidden by filter */
+  .toc-hidden { display: none !important; }
+  /* Print */
+  @media print {
+    .topbar, .sidebar, .icon-btn { display: none; }
+    .layout { grid-template-columns: 1fr; }
+    main { max-width: none; padding: 0; }
+    details.collapsible[open] > summary::before,
+    details.collapsible > summary::before { display: none; }
+    details.collapsible, details:not([open]) > div, .as { break-inside: avoid; }
+    .as[open] .as-body, .as .as-body { display: block !important; border-top: 1px solid var(--border); }
+  }
+</style>
+</head>
+<body>
+<a class="skip" href="#content">Bỏ qua menu</a>
+<header class="topbar">
+  <span class="doc-type">SPEC</span>
+  <span class="feature">user-auth</span>
+  <span class="meta">
+    <span>v3</span>
+    <span class="sep">·</span>
+    <span>updated 2026-05-14</span>
+    <span class="sep">·</span>
+    <span>4 stories</span>
+    <span class="sep">·</span>
+    <span>9 AS</span>
+  </span>
+  <span class="status active">Active</span>
+  <span class="spacer"></span>
+  <button class="icon-btn" id="theme-toggle" title="Đổi theme" aria-label="Đổi theme">
+    <svg viewBox="0 0 16 16"><path d="M8 12.5a4.5 4.5 0 1 0 0-9 4.5 4.5 0 0 0 0 9zM8 0a.75.75 0 0 1 .75.75v1.5a.75.75 0 0 1-1.5 0V.75A.75.75 0 0 1 8 0zm0 13a.75.75 0 0 1 .75.75v1.5a.75.75 0 0 1-1.5 0v-1.5A.75.75 0 0 1 8 13zM3.05 3.05a.75.75 0 0 1 1.06 0l1.06 1.06a.75.75 0 1 1-1.06 1.06L3.05 4.11a.75.75 0 0 1 0-1.06zm7.78 7.78a.75.75 0 0 1 1.06 0l1.06 1.06a.75.75 0 1 1-1.06 1.06l-1.06-1.06a.75.75 0 0 1 0-1.06zM0 8a.75.75 0 0 1 .75-.75h1.5a.75.75 0 0 1 0 1.5H.75A.75.75 0 0 1 0 8zm13 0a.75.75 0 0 1 .75-.75h1.5a.75.75 0 0 1 0 1.5h-1.5A.75.75 0 0 1 13 8zM3.05 12.95a.75.75 0 0 1 0-1.06l1.06-1.06a.75.75 0 1 1 1.06 1.06L4.11 12.95a.75.75 0 0 1-1.06 0zm7.78-7.78a.75.75 0 0 1 0-1.06l1.06-1.06a.75.75 0 1 1 1.06 1.06l-1.06 1.06a.75.75 0 0 1-1.06 0z"/></svg>
+  </button>
+</header>
+<div class="layout">
+  <aside class="sidebar" aria-label="Mục lục">
+    <input class="toc-search" id="toc-search" placeholder="Tìm story…" type="search">
+    <nav class="toc" id="toc">
+      <div class="toc-group">Tổng quan</div>
+      <a href="#tldr" data-target="tldr">TL;DR</a>
+      <a href="#overview" data-target="overview">Overview</a>
+      <a href="#data-model" data-target="data-model">Data Model</a>
+      <div class="toc-group">Stories</div>
+      <a href="#s-001" data-target="s-001"><span class="p p0">P0</span> S-001 · Login email + password</a>
+      <a href="#s-002" data-target="s-002"><span class="p p0">P0</span> S-002 · Logout</a>
+      <a href="#s-003" data-target="s-003"><span class="p p1">P1</span> S-003 · Password reset</a>
+      <a href="#s-004" data-target="s-004"><span class="p p2">P2</span> S-004 · Remember-me</a>
+      <div class="toc-group">Tham chiếu</div>
+      <a href="#constraints" data-target="constraints">Constraints</a>
+      <a href="#existing" data-target="existing">What Already Exists</a>
+      <a href="#not-in-scope" data-target="not-in-scope">Not in Scope</a>
+      <a href="#changelog" data-target="changelog">Change Log</a>
+      <a href="#snapshots" data-target="snapshots">Snapshots</a>
+    </nav>
+  </aside>
+  <main id="content">
+    <h1>user-auth</h1>
+    <p class="subtitle">Email + password authentication with session cookies, password reset, and optional remember-me.</p>
+    <section class="tldr" id="tldr">
+      <div class="tldr-label">TL;DR</div>
+      <p>4 stories, 9 AS. Quyết định lớn: <b>session cookie</b> (không JWT), <b>bcrypt cost 12</b>, password tối thiểu 12 ký tự, rate limit 5 lần / 15 phút theo IP+email.</p>
+      <ul>
+        <li><b>S-001</b> Login — happy path + sai password + rate-limited (3 AS, P0)</li>
+        <li><b>S-002</b> Logout — server-side session invalidation + cookie clear (2 AS, P0)</li>
+        <li><b>S-003</b> Password reset — email link, token 1h TTL (3 AS, P1)</li>
+        <li><b>S-004</b> Remember-me — 30d rolling cookie (1 AS, P2)</li>
+      </ul>
+    </section>
+    <h2 id="overview">Overview</h2>
+    <p>Hệ thống auth cho khu vực dashboard. Đăng nhập bằng email + password, session lưu server-side, cookie HTTP-only. Mục tiêu: replace middleware cũ (legacy token storage không meet compliance).</p>
+    <h2 id="data-model">Data Model</h2>
+    <p>Entities: <code>User</code>, <code>Session</code>, <code>PasswordResetToken</code>. <code>Session</code> liên kết 1-N với <code>User</code>, TTL 30 ngày, rolling khi có activity. <code>PasswordResetToken</code> single-use, TTL 1h, invalidate hết session khác khi reset thành công.</p>
+    <h2 id="stories" style="margin-top:36px">Stories</h2>
+    <!-- S-001 -->
+    <article class="story" id="s-001">
+      <header class="story-head">
+        <span class="badge p0">P0</span>
+        <span class="id">S-001</span>
+        <span class="title">Login với email + password</span>
+        <span class="badge count">3 AS</span>
+      </header>
+      <div class="story-body">
+        <p class="story-desc">User nhập email + password → nhận session cookie, redirect tới <code>/dashboard</code>. Sai password hiện lỗi generic. Quá 5 lần sai trong 15 phút → tạm khoá.</p>
+        <div class="as-list">
+          <details class="as" open>
+            <summary class="as-head">
+              <span class="id">AS-001</span>
+              <span class="desc">Login thành công với credential đúng</span>
+              <span class="chev">›</span>
+            </summary>
+            <div class="as-body">
+              <dl class="gwt">
+                <dt>Given</dt><dd>User <code>jane@acme.com</code> tồn tại, password đúng, không có session active</dd>
+                <dt>When</dt><dd>POST <code>/api/login</code> với <code>{email, password}</code></dd>
+                <dt>Then</dt><dd>Response 200, set cookie <code>sid</code> (HTTP-only, Secure, SameSite=Lax), session row được tạo trong DB</dd>
+              </dl>
+              <div class="as-data"><b>Data:</b> email=<code>jane@acme.com</code>, password=<code>correct-horse-battery-staple</code></div>
+            </div>
+          </details>
+          <details class="as">
+            <summary class="as-head">
+              <span class="id">AS-002</span>
+              <span class="desc">Sai password trả lỗi generic, không leak user tồn tại</span>
+              <span class="chev">›</span>
+            </summary>
+            <div class="as-body">
+              <dl class="gwt">
+                <dt>Given</dt><dd>User tồn tại nhưng password sai (hoặc user không tồn tại)</dd>
+                <dt>When</dt><dd>POST <code>/api/login</code></dd>
+                <dt>Then</dt><dd>Response 401 với message <code>"Invalid email or password"</code>. Không phân biệt 2 trường hợp ở message hay timing.</dd>
+              </dl>
+            </div>
+          </details>
+          <details class="as">
+            <summary class="as-head">
+              <span class="id">AS-003</span>
+              <span class="desc">Quá 5 lần sai → 429 trong 15 phút</span>
+              <span class="chev">›</span>
+            </summary>
+            <div class="as-body">
+              <dl class="gwt">
+                <dt>Given</dt><dd>5 lần login fail liên tiếp cho cùng email từ cùng IP trong 15 phút</dd>
+                <dt>When</dt><dd>Lần thứ 6 POST <code>/api/login</code></dd>
+                <dt>Then</dt><dd>Response 429 với header <code>Retry-After: 900</code>, dù password đúng cũng từ chối</dd>
+              </dl>
+              <div class="as-data"><b>Edge:</b> đếm theo cặp (email, IP) — tránh attacker spam từ IP khác khoá user thật</div>
+            </div>
+          </details>
+        </div>
+      </div>
+    </article>
+    <!-- S-002 -->
+    <article class="story" id="s-002">
+      <header class="story-head">
+        <span class="badge p0">P0</span>
+        <span class="id">S-002</span>
+        <span class="title">Logout</span>
+        <span class="badge count">2 AS</span>
+      </header>
+      <div class="story-body">
+        <p class="story-desc">User click logout → session xoá khỏi DB, cookie clear, redirect <code>/login</code>.</p>
+        <div class="as-list">
+          <details class="as">
+            <summary class="as-head">
+              <span class="id">AS-004</span>
+              <span class="desc">Logout xoá session DB + clear cookie</span>
+              <span class="chev">›</span>
+            </summary>
+            <div class="as-body">
+              <dl class="gwt">
+                <dt>Given</dt><dd>Session active, cookie <code>sid</code> hợp lệ</dd>
+                <dt>When</dt><dd>POST <code>/api/logout</code></dd>
+                <dt>Then</dt><dd>Session row deleted, <code>Set-Cookie: sid=; Max-Age=0</code>, 302 → <code>/login</code></dd>
+              </dl>
+            </div>
+          </details>
+          <details class="as">
+            <summary class="as-head">
+              <span class="id">AS-005</span>
+              <span class="desc">Logout khi không có session vẫn 200 (idempotent)</span>
+              <span class="chev">›</span>
+            </summary>
+            <div class="as-body">
+              <dl class="gwt">
+                <dt>Given</dt><dd>Không có cookie <code>sid</code> hoặc session đã expire</dd>
+                <dt>When</dt><dd>POST <code>/api/logout</code></dd>
+                <dt>Then</dt><dd>Response 200, không lỗi. Idempotent (gloss: gọi nhiều lần kết quả như gọi 1 lần).</dd>
+              </dl>
+            </div>
+          </details>
+        </div>
+      </div>
+    </article>
+    <!-- S-003 -->
+    <article class="story" id="s-003">
+      <header class="story-head">
+        <span class="badge p1">P1</span>
+        <span class="id">S-003</span>
+        <span class="title">Password reset qua email</span>
+        <span class="badge count">3 AS</span>
+      </header>
+      <div class="story-body">
+        <p class="story-desc">User nhập email → nhận link reset (TTL 1h, single-use) → đặt password mới → invalidate tất cả session khác.</p>
+        <div class="as-list">
+          <details class="as">
+            <summary class="as-head">
+              <span class="id">AS-006</span>
+              <span class="desc">Request reset link gửi email (luôn 200 dù email tồn tại hay không)</span>
+              <span class="chev">›</span>
+            </summary>
+            <div class="as-body">
+              <dl class="gwt">
+                <dt>Given</dt><dd>Form reset password</dd>
+                <dt>When</dt><dd>POST <code>/api/password-reset/request</code> với <code>{email}</code></dd>
+                <dt>Then</dt><dd>Response 200 với message generic <code>"Check your email"</code>. Nếu email tồn tại → gửi link, không tồn tại → no-op (không leak).</dd>
+              </dl>
+            </div>
+          </details>
+          <details class="as">
+            <summary class="as-head">
+              <span class="id">AS-007</span>
+              <span class="desc">Token expired (>1h) trả lỗi</span>
+              <span class="chev">›</span>
+            </summary>
+            <div class="as-body">
+              <dl class="gwt">
+                <dt>Given</dt><dd>Token tạo cách đây 65 phút</dd>
+                <dt>When</dt><dd>POST <code>/api/password-reset/confirm</code> với token + new password</dd>
+                <dt>Then</dt><dd>Response 410 <code>"Token expired"</code></dd>
+              </dl>
+            </div>
+          </details>
+          <details class="as">
+            <summary class="as-head">
+              <span class="id">AS-008</span>
+              <span class="desc">Reset thành công invalidate tất cả session khác</span>
+              <span class="chev">›</span>
+            </summary>
+            <div class="as-body">
+              <dl class="gwt">
+                <dt>Given</dt><dd>User có 3 session active (laptop, phone, tablet), token còn hạn</dd>
+                <dt>When</dt><dd>Reset password thành công</dd>
+                <dt>Then</dt><dd>3 session bị xoá, user phải login lại trên cả 3 thiết bị, token reset bị mark used.</dd>
+              </dl>
+            </div>
+          </details>
+        </div>
+      </div>
+    </article>
+    <!-- S-004 -->
+    <article class="story" id="s-004">
+      <header class="story-head">
+        <span class="badge p2">P2</span>
+        <span class="id">S-004</span>
+        <span class="title">Remember-me cookie</span>
+        <span class="badge count">1 AS</span>
+      </header>
+      <div class="story-body">
+        <p class="story-desc">Checkbox "Remember me" trong form login → session TTL 30 ngày rolling thay vì 24h.</p>
+        <div class="as-list">
+          <details class="as">
+            <summary class="as-head">
+              <span class="id">AS-009</span>
+              <span class="desc">Tick remember → cookie Max-Age 30 ngày</span>
+              <span class="chev">›</span>
+            </summary>
+            <div class="as-body">
+              <dl class="gwt">
+                <dt>Given</dt><dd>Form login có checkbox "Remember me" được tick</dd>
+                <dt>When</dt><dd>Login thành công</dd>
+                <dt>Then</dt><dd>Cookie <code>sid</code> có <code>Max-Age=2592000</code> (30 ngày), session row có <code>extended=true</code>.</dd>
+              </dl>
+            </div>
+          </details>
+        </div>
+      </div>
+    </article>
+    <h2 id="constraints">Constraints &amp; Invariants</h2>
+    <div class="constraints">
+      <div class="callout">
+        <svg class="ico" viewBox="0 0 16 16" fill="currentColor"><path d="M6.457 1.047c.659-1.234 2.427-1.234 3.086 0l6.082 11.378A1.75 1.75 0 0 1 14.082 15H1.918a1.75 1.75 0 0 1-1.543-2.575Zm1.763.707a.25.25 0 0 0-.44 0L1.698 13.132a.25.25 0 0 0 .22.368h12.164a.25.25 0 0 0 .22-.368Zm.53 3.996v2.5a.75.75 0 0 1-1.5 0v-2.5a.75.75 0 0 1 1.5 0ZM9 11a1 1 0 1 1-2 0 1 1 0 0 1 2 0Z"/></svg>
+        <div>
+          <p class="callout-title">Password storage</p>
+          <p>Bcrypt cost 12 cho mọi password. Không dùng SHA*, không dùng PBKDF2. Migration từ legacy phải re-hash lúc login lần đầu.</p>
+        </div>
+      </div>
+      <div class="callout">
+        <svg class="ico" viewBox="0 0 16 16" fill="currentColor"><path d="M6.457 1.047c.659-1.234 2.427-1.234 3.086 0l6.082 11.378A1.75 1.75 0 0 1 14.082 15H1.918a1.75 1.75 0 0 1-1.543-2.575Zm1.763.707a.25.25 0 0 0-.44 0L1.698 13.132a.25.25 0 0 0 .22.368h12.164a.25.25 0 0 0 .22-.368Zm.53 3.996v2.5a.75.75 0 0 1-1.5 0v-2.5a.75.75 0 0 1 1.5 0ZM9 11a1 1 0 1 1-2 0 1 1 0 0 1 2 0Z"/></svg>
+        <div>
+          <p class="callout-title">Session cookie</p>
+          <p>Luôn <code>HttpOnly</code>, <code>Secure</code>, <code>SameSite=Lax</code>. Domain scope tới apex, không subdomain. Cookie name: <code>sid</code>.</p>
+        </div>
+      </div>
+      <div class="callout">
+        <svg class="ico" viewBox="0 0 16 16" fill="currentColor"><path d="M6.457 1.047c.659-1.234 2.427-1.234 3.086 0l6.082 11.378A1.75 1.75 0 0 1 14.082 15H1.918a1.75 1.75 0 0 1-1.543-2.575Zm1.763.707a.25.25 0 0 0-.44 0L1.698 13.132a.25.25 0 0 0 .22.368h12.164a.25.25 0 0 0 .22-.368Zm.53 3.996v2.5a.75.75 0 0 1-1.5 0v-2.5a.75.75 0 0 1 1.5 0ZM9 11a1 1 0 1 1-2 0 1 1 0 0 1 2 0Z"/></svg>
+        <div>
+          <p class="callout-title">Password policy</p>
+          <p>Tối thiểu 12 ký tự, kiểm tra zxcvbn score ≥ 3. Không bắt buộc ký tự đặc biệt (NIST 800-63B).</p>
+        </div>
+      </div>
+    </div>
+    <h2 id="existing">What Already Exists</h2>
+    <p>Legacy auth middleware ở <code>src/middleware/auth-legacy.ts</code> đang dùng JWT lưu trong localStorage — đây là cái cần thay (compliance flagged). Bcrypt utility đã có ở <code>src/lib/crypto/hash.ts</code>, reuse. Rate limit helper <code>src/lib/rate-limit.ts</code> đã có cho API publicly-facing — reuse cho login.</p>
+    <h2 id="not-in-scope">Not in Scope</h2>
+    <ul>
+      <li><b>OAuth / SSO</b> — defer phase 2, hiện ưu tiên migrate khỏi legacy trước.</li>
+      <li><b>2FA / TOTP</b> — separate spec, planned Q3.</li>
+      <li><b>Email change flow</b> — sẽ làm khi có account settings page.</li>
+      <li><b>Audit log UI</b> — log có ghi DB nhưng không expose UI trong spec này.</li>
+    </ul>
+    <h2 id="changelog">Change Log</h2>
+    <details class="collapsible">
+      <summary>3 entries <span class="count">expand để xem</span></summary>
+      <div>
+        <table class="changelog">
+          <thead><tr><th>Date</th><th>Change</th><th>Ref</th></tr></thead>
+          <tbody>
+            <tr><td class="date">2026-05-14</td><td>Add S-004 Remember-me (P2)</td><td>—</td></tr>
+            <tr><td class="date">2026-05-08</td><td>S-003 priority P2 → P1 sau review compliance</td><td>JIRA-1428</td></tr>
+            <tr><td class="date">2026-04-30</td><td>Initial creation</td><td>—</td></tr>
+          </tbody>
+        </table>
+      </div>
+    </details>
+    <h2 id="snapshots">Snapshots</h2>
+    <details class="collapsible">
+      <summary>2 snapshots <span class="count">history</span></summary>
+      <div>
+        <div class="snapshots-list">
+          <div class="snapshot-row">
+            <span class="date">2026-05-08</span>
+            <a href="#">snapshots/2026-05-08-JIRA-1428.md</a>
+            <span class="reason">M3: priority change</span>
+          </div>
+          <div class="snapshot-row">
+            <span class="date">2026-04-30</span>
+            <a href="#">snapshots/2026-04-30.md</a>
+            <span class="reason">M1: initial</span>
+          </div>
+        </div>
+      </div>
+    </details>
+  </main>
+</div>
+<script>
+  // Theme toggle
+  const root = document.documentElement;
+  const themeBtn = document.getElementById('theme-toggle');
+  const stored = localStorage.getItem('spec-theme');
+  if (stored) root.setAttribute('data-theme', stored);
+  themeBtn.addEventListener('click', () => {
+    const cur = root.getAttribute('data-theme');
+    const next = cur === 'dark' ? 'light' : (cur === 'light' ? 'auto' : 'dark');
+    root.setAttribute('data-theme', next);
+    localStorage.setItem('spec-theme', next);
+  });
+  // TOC scroll-spy
+  const tocLinks = document.querySelectorAll('#toc a');
+  const tocById = new Map();
+  tocLinks.forEach(a => tocById.set(a.dataset.target, a));
+  const targets = [...tocById.keys()].map(id => document.getElementById(id)).filter(Boolean);
+  const setActive = (id) => {
+    tocLinks.forEach(a => a.classList.remove('active'));
+    const a = tocById.get(id);
+    if (a) a.classList.add('active');
+  };
+  const obs = new IntersectionObserver((entries) => {
+    const visible = entries.filter(e => e.isIntersecting).sort((a, b) => a.boundingClientRect.top - b.boundingClientRect.top);
+    if (visible[0]) setActive(visible[0].target.id);
+  }, { rootMargin: '-70px 0px -60% 0px', threshold: 0 });
+  targets.forEach(t => obs.observe(t));
+  // TOC search filter
+  const search = document.getElementById('toc-search');
+  search.addEventListener('input', () => {
+    const q = search.value.trim().toLowerCase();
+    tocLinks.forEach(a => {
+      if (!q) { a.classList.remove('toc-hidden'); return; }
+      a.classList.toggle('toc-hidden', !a.textContent.toLowerCase().includes(q));
+    });
+  });
+</script>
+</body>
+</html>