@sun-asterisk/sungen 3.2.2 → 3.2.3-beta.3

package/src/orchestrator/templates/ai-instructions/github-skill-sungen-viewpoint-group-b-data-ops.md

@@ -1,179 +0,0 @@
-# GROUP B: DATA OPERATIONS
-
-> The user creates, edits, or deletes a specific record in the system.
-
-Patterns: 4. Create / Add · 5. Update / Edit · 6. Delete
-See `SKILL.md` for the 4 Viewpoints, Shared Checks, and Security Tag Rules.
-
----
-
-## 4. Create / Add
-
-**Apply when**: the screen has a function to create a new record (an "Add", "Create", "New" button, or a link to a create form).
-
-**Inherits**: Form & Inputs — field-level validation (required, format, maxlength, whitespace, real-time error clear). Generate those once here; this pattern adds the create-specific rules below.
-
-**Shared checks applied**: XSS/Injection
-
----
-
-### Tier 1 — @high
-
-**[VP-LOGIC] Create behavior**
-
-- Open the create form → all fields are empty (blank slate), no data cached from a previous open or a previous submit
-- Submit the form with valid data → the record is created successfully, success feedback appears (toast and/or redirect), no error on the form
-- The new record appears in the correct position in the list per the current sort rule (usually newest first)
-- Submit success → toast shows {{success_message}} from test-data.yaml, auto-dismisses after a few seconds
-- Cancel / navigate away while the form is dirty → confirmation dialog "Discard changes?"; choosing Discard → no record is created in the DB
-- User clicks Save twice in a row before the response → only 1 record is created, no duplicate
-
-**[VP-VAL] Unique constraints**
-
-- Enter a value duplicating an existing unique field (e.g. email, employee code) → rejected, inline error right at that field
-- Required fields empty → the form cannot submit, no record is created in the DB (Submit disabled, or an inline error at each field on Submit click — depends on impl)
-- Enter the wrong format → inline error at the field, field highlighted (text comes from {{format_error}} in test-data.yaml)
-
-**[VP-SEC]**
-
-- POST request to create a record without authentication → 401/403, no record is created in the DB
-- POST request to create a record beyond the user's privilege (lower role) → 403 Forbidden from the server
-
----
-
-### Tier 2 — @normal + @low
-
-**[VP-UI] Interface states**
-
-- [@normal] Form opens: required fields have a visual indicator (asterisk, color), optional fields do not
-- [@normal] Navigate away while the form is unchanged (pristine) → no confirmation dialog appears
-- [@low] Autofocus: the cursor moves to the first field automatically when the form opens
-- [@low] "Save & Add Another" (if the spec has it): save succeeds → the form resets to blank, no redirect
-
-**[VP-VAL] Dependency**
-
-- [@normal] Select Field A (parent dropdown) → Field B (child dropdown) updates its options accordingly
-- [@normal] Fields with default values: the value is shown when the form opens, the user can clear it and enter another value
-
----
-
-### ⚡ Cross-pattern interactions
-
-- **+ Form & Inputs**: Apply the entire VP-VAL checklist of Form & Inputs (boundary values, real-time error clear)
-- **+ File Upload**: A form with a file upload field → cannot submit if the upload is not finished
-- **+ Modal/Dialog**: Form inside a modal → on submit success the modal closes, the background list auto-refreshes
-- **+ Data Table**: The new record appears in the table in the correct position, the total count increases by 1
-
----
-
-## 5. Update / Edit
-
-**Apply when**: the screen has a function to edit an existing record (an "Edit" button, a pencil icon, or inline edit).
-
-**Inherits**: Form & Inputs — field-level validation (required, format, maxlength, whitespace, real-time error clear). Generate those once here; this pattern adds the edit-specific rules below.
-
-**Shared checks applied**: XSS/Injection
-
----
-
-### Tier 1 — @high
-
-**[VP-LOGIC] Edit behavior**
-
-- Open the edit form → all fields are pre-filled with the correct current data from the DB (text, selected dropdown, date, radio, checkbox)
-- Change data and save → the record is updated in the DB, the UI reflects the new data immediately without a full-page reload
-- Save success → toast shows {{success_message}} from test-data.yaml, auto-dismisses after a few seconds
-- Cancel / navigate away while the form is dirty → confirmation dialog "Discard changes?"; choosing Discard → the DB is unchanged, data stays at the old value
-- Save when the form has no changes (pristine) → no redundant DB UPDATE: either the Save button is disabled, or a request is sent but the server returns a no-op (verify via the Network tab: no write operation)
-
-**[VP-VAL] Validation on edit**
-
-- Change a unique field to a value already used by another record → rejected, inline error at the field
-- Leave a unique field of the same record unchanged → save succeeds, no self-duplicate error
-- Clear a required field → the Submit button becomes disabled again (override if the spec validates on submit: an inline error appears at the field on Submit click)
-- Readonly / identity fields (ID, created date, username) → cannot be edited, accept no click/input
-
-**[VP-SEC]**
-
-- PUT/PATCH request without authentication → 401/403, the DB is unchanged
-- Edit a record belonging to another user/tenant (IDOR) → 403 Forbidden, the DB is unchanged
-- Edit a record that has been deleted (stale link) → 404 Not Found
-
----
-
-### Tier 2 — @normal + @low
-
-**[VP-UI] Interface states**
-
-- [@normal] Readonly fields: visually dimmed, cursor not-allowed, accept no input
-- [@normal] Unsaved-changes indicator: the title or tab shows a "•" or "(unsaved)" mark while the form is dirty
-- [@normal] Concurrent edit: the server returns 409 Conflict on save → the error message clearly states "data was changed by someone else", the user does not lose entered data and is guided to reload to see the latest version
-- [@low] "Last updated by [user] at [time]": the username and timestamp match exactly the last edit in the DB
-
-**[VP-VAL] Dependency on edit**
-
-- [@normal] Field dependency works as in Create: changing Field A → Field B updates its options, without resetting unrelated fields
-
----
-
-### ⚡ Cross-pattern interactions
-
-- **+ Form & Inputs**: Apply the entire VP-VAL checklist of Form & Inputs
-- **+ File Upload**: The current file is shown → the user can replace it (new upload) or remove it, no need to re-upload if unchanged
-- **+ Modal/Dialog**: Edit form inside a modal → on submit success the modal closes, the background data refreshes immediately
-- **+ Data Table**: The row in the table reflects the new data immediately after a successful edit, without reloading the whole table
-
----
-
-## 6. Delete
-
-**Apply when**: the screen has a function to delete a record (a "Delete" button, a trash icon, or a context-menu action).
-
-**Shared checks applied**: (no default shared check)
-
----
-
-### Tier 1 — @high
-
-**[VP-LOGIC] Delete behavior**
-
-- Click Delete → a confirmation dialog must appear (no immediate delete), the confirm button uses a warning color (red/orange)
-- Confirm the delete → the record disappears from the UI immediately, a toast shows the delete success message
-- Cancel the confirmation → the dialog closes, the record stays in the UI and in the DB, no API is called
-- Delete the last record on the current page (pagination) → automatically go to the previous page, no blank page is shown
-- Delete a record referenced by another record (foreign key) → blocked, error message states the name of the module still using this record, the record is not deleted
-
-**[VP-VAL] Delete type**
-
-- Soft delete (default): the record is hidden from the main list, still in the DB with the flag `is_deleted = true`, the direct URL → 404 (override if the spec uses hard delete: the record is fully removed from the DB)
-
-**[VP-SEC]**
-
-- DELETE request without authentication → 401/403, the record is not deleted from the DB
-- DELETE a record belonging to another user/tenant (IDOR via API) → 403 Forbidden, the record is not deleted
-- Directly access the URL of a deleted record (soft or hard) → 404 Not Found
-
----
-
-### Tier 2 — @normal + @low
-
-**[VP-UI] Interface states**
-
-- [@normal] Confirmation dialog: a clear title "Delete [record name]?", a body explaining the action cannot be undone
-- [@normal] Deleting (loading): the confirm button shows a spinner and is disabled to prevent a double-click
-- [@normal] Delete button: visually a warning (red color or a warning icon), not placed next to Save to avoid mis-clicks
-- [@low] Bulk delete (if the spec has it): select multiple records → one confirmation for all, count stated clearly "Delete 3 records?"
-
-**[VP-VAL] Dependency**
-
-- [@normal] Cascade delete (if the spec has it): delete a parent → the confirmation dialog lists how many children will be deleted with it
-- [@normal] Set Null (if the spec has it): delete a parent → child records still exist, the reference field becomes "Unassigned" or null
-
----
-
-### ⚡ Cross-pattern interactions
-
-- **+ Data Table**: The record disappears from the table immediately, the total count decreases by 1, the pagination adjusts itself
-- **+ Modal/Dialog**: The delete confirmation is a modal → close the modal after deleting, the background table refreshes
-- **+ List/Card View**: The card/row disappears immediately after a successful delete, no page reload needed
-- **+ Notification**: The delete-success toast shows {{delete_success_message}} from test-data.yaml

package/src/orchestrator/templates/ai-instructions/github-skill-sungen-viewpoint-group-c-data-explore.md

@@ -1,233 +0,0 @@
-# GROUP C: DATA EXPLORATION
-
-> The user searches, filters, and browses existing data in the system.
-
-Patterns: 7. Data Table · 8. Search · 9. Filter · 10. List / Card View
-See `SKILL.md` for the 4 Viewpoints, Shared Checks, and Security Tag Rules.
-
----
-
-## 7. Data Table
-
-**Apply when**: the screen shows data as a table with rows and columns, usually with sort, pagination, and row-level actions.
-
-**Shared checks applied**: Loading State, Empty State, XSS/Injection (data from the DB displayed safely)
-
----
-
-### Tier 1 — @high
-
-**[VP-LOGIC] Table behavior**
-
-- Table finishes loading → the number of rows shown matches the configured page size (e.g. 10, 20, 50 rows/page)
-- The total record count in the UI ("Total: X records") matches exactly the real record count in the DB
-- Click a sortable column header → data re-sorts in the correct order (ASC first, DESC second), the sort icon changes accordingly
-- Click a sortable column header once → sort ASC, ↑ icon shows; twice → sort DESC, ↓ icon shows; three times → back to unsorted, icon disappears
-- Click an action button (Edit/Delete/View) on a row → the action applies to that exact row (correct record ID, not a different row)
-- *Pagination:* Click page 2 → the table shows the correct next records, no overlap with page 1
-- *Pagination:* Change the page size → the table reloads with the new row count, resets to page 1
-
-**[VP-VAL] Data integrity**
-
-- The value in each cell matches exactly the data in the DB (amount, date, status label, unit)
-- Long text in a cell → truncated with `...`, does not break the layout or push the column out
-- A column with a null/empty value → shows a placeholder (em dash or empty cell), not raw "undefined" or "null", the cell layout does not break
-
-**[VP-SEC]**
-
-- Data from the DB containing HTML/script tags → rendered as literal text, not executed (XSS)
-- A user without permission to view a sensitive column (salary, national ID…) → the column is fully hidden from the DOM, not leaked via the API response (override if the spec wants to show `***` so the user knows the field exists)
-
----
-
-### Tier 2 — @normal + @low
-
-**[VP-UI] Interface states**
-
-- [@normal] Sortable column header: has an arrow/indicator icon and a pointer cursor; a non-sortable column has no icon
-- [@normal] Sticky header: scroll down vertically → the header row stays fixed, the column headers are always visible
-- [@normal] Sticky action column (if the table scrolls horizontally): the Edit/Delete column is fixed on the right, not scrolled out of the viewport
-- [@normal] Row hover: the background color changes slightly, clearly indicating which row is hovered
-- [@normal] Pagination controls: Previous is disabled on page 1; Next is disabled on the last page; the current page is highlighted
-- [@low] Column resize (if present): drag the header border to change the width, without affecting the data
-
-**[VP-VAL] Edge cases**
-
-- [@normal] Table with 1 row → pagination is fully hidden (override if the spec wants "Page 1 of 1"), no UI glitch
-- [@normal] Sort on a datetime column → sorts correctly by the real timestamp, not alphabetically as a string
-- [@normal] Sort on a numeric column → sorts correctly by numeric value (10 > 9), not as a string ("10" < "9")
-
----
-
-### ⚡ Cross-pattern interactions
-
-- **+ Search**: Search submit → the table filters immediately, pagination resets to page 1, the sort state is preserved
-- **+ Filter**: Apply a filter → the table shows only matching rows, the total count updates, pagination resets to page 1
-- **+ Update/Edit**: Save an edit successfully → the row in the table reflects the new data immediately, no full-page reload
-- **+ Delete**: Delete a record → the row disappears immediately, the total count decreases by 1, pagination adjusts itself
-- **+ Import/Export**: After import → the table auto-refreshes; Export takes exactly the data currently shown (current filter + sort)
-
----
-
-## 8. Search
-
-**Apply when**: the screen has a search box (search bar) letting the user filter data by keyword.
-
-**Shared checks applied**: Empty State, XSS/Injection
-
----
-
-### Tier 1 — @high
-
-**[VP-LOGIC] Search behavior**
-
-*Basic search:*
-- Enter a valid keyword → results show the correct records containing the keyword (case-insensitive)
-- Partial-match keyword → records containing the keyword anywhere all appear
-- Enter a keyword matching no record → the Empty State message appears ("No results found"), the layout does not break
-- Clear the keyword → the list reloads to the default state (all records), no need to press Search again
-
-*Advanced search (if the spec has multiple search fields):*
-- Fill multiple fields → results satisfy ALL filled conditions (AND logic)
-- Leave some fields empty → filter only by the filled fields, empty fields are ignored
-
-**[VP-VAL] Input handling**
-
-- Input containing only whitespace → auto-trimmed, search with empty string → results as if not searched
-- Enter special characters (single quote `'`, `%`, `_`) → treated as literal text, the query is not broken, results are valid
-- Input beyond max length → field accepts no more characters (HTML maxlength default)
-
-**[VP-SEC]** → Apply Shared Check: XSS/Injection (the search term shown in the results must be escaped correctly) + **SQL injection layer 2** (the search field reaches a LIKE query → test the API-level bypass `@high @manual`)
-
----
-
-### Tier 2 — @normal + @low
-
-**[VP-UI] Interface states**
-
-- [@normal] A search icon or placeholder clearly hints what the field is for ("Search by name, email…")
-- [@normal] Clear button (X): appears when there is text, click → the field empties and the list resets, no navigation away from the page
-- [@normal] Search trigger: debounce ~300ms after stopping typing, or press Enter → the API call runs, a loading indicator shows in the table
-- [@low] The keyword is highlighted in the results: the matching text portion is bold or a standout color
-
-**[VP-VAL] Edge cases**
-
-- [@normal] Keyword is pure digits (e.g. "12345") → searches correctly in numeric fields and text fields
-- [@normal] Keyword is accented Vietnamese → results are correct, no encoding glitch
-
----
-
-### ⚡ Cross-pattern interactions
-
-- **+ Data Table**: Search submit → the table filters immediately, pagination resets to page 1
-- **+ Filter**: Search + Filter both active → results satisfy BOTH conditions (AND)
-- **+ Pagination**: Search returns many results → pagination shows correctly, the total count updates
-
----
-
-## 9. Filter
-
-**Apply when**: the screen has filters (dropdown, date range picker, checkbox group, radio group…) to narrow down the displayed dataset.
-
-**Shared checks applied**: Empty State, URL Manipulation
-
----
-
-### Tier 1 — @high
-
-**[VP-LOGIC] Filter behavior**
-
-- Select 1 filter value → the list/table shows only matching records, the total count updates correctly
-- Select multiple values within the same filter group → show records matching ANY value in the group (OR logic within the group)
-- Apply multiple filter groups at once → show records matching ALL groups (AND across groups)
-- Reset / Clear All filters → the list returns to default, all filter controls return to their initial values
-- A filter combination yielding 0 results → the Empty State appears, the layout does not break
-- Dependent filter (if the screen has one): select Filter A → Filter B's options reset and reload per A's value immediately, no stale old options retained
-
-**[VP-VAL] Input validation**
-
-- Date range: start date > end date → the Apply button is disabled, the filter is not activated
-- Numeric range: min > max → the Apply button is disabled, the filter is not activated
-- Dropdown filter: options match exactly the real data in the DB (no orphan option)
-
-**[VP-SEC]** → Apply Shared Check: URL Manipulation (tampered filter params → fallback to default, no crash)
-
----
-
-### Tier 2 — @normal + @low
-
-**[VP-UI] Interface states**
-
-- [@normal] Active filters: shown as clear tags/chips, each tag has an X to remove that filter individually
-- [@normal] Collapse/expand the filter panel: the selected state of the filters is preserved, not reset on collapse
-- [@normal] Filter count badge: "Filters (3)" or an indicator shows the number of active filters
-- [@low] Filter options in alphabetical order (override if the spec uses frequency sort or a custom order), not random on each open
-
-**[VP-VAL] Edge cases**
-
-- [@normal] A filter option removed from the DB (orphan option) → does not appear in the dropdown, no crash even if the URL still has the old param
-- [@normal] Filter with a date range spanning a different timezone → results are correct per the server's timezone
-
----
-
-### ⚡ Cross-pattern interactions
-
-- **+ Search**: Filter + Search both active → AND logic, total records = the intersection of both conditions
-- **+ Data Table**: Apply a filter → the table reloads, pagination resets to page 1, the sort state is preserved
-- **+ Export**: Export with an active filter → the file contains only filtered records, not the entire dataset
-- **+ Pagination**: A filter changing the total count → pagination recalculates, automatically goes to page 1
-
----
-
-## 10. List / Card View
-
-**Apply when**: the screen shows many records as a list (rows) or cards (grid), possibly with infinite scroll or a "Load More" button instead of traditional pagination.
-
-**Shared checks applied**: Loading State, Empty State
-
----
-
-### Tier 1 — @high
-
-**[VP-LOGIC] Navigation & actions**
-
-- Click a card/row → navigate to the correct detail page of that record (correct ID, not a different record)
-- A quick action directly on the card (Like, Bookmark, Add to Cart, Status toggle) → changes the state immediately without navigating to another page
-- *Infinite scroll:* Scroll to the bottom → the next records are appended to the list, the scroll position does not jump back to the top
-- *Load More button:* Click "Load More" → the next records are appended, the total count updates
-- Broken image (image URL is broken or returns 404) → a placeholder image is shown, the card layout does not break
-
-**[VP-VAL] Data integrity**
-
-- The values shown on the card (price, status, tag, rating) match exactly the data in the DB
-- The total count ("Showing X of Y") matches the real total records after applying the current filter/search
-
-**[VP-SEC]**
-
-- Sensitive data (national ID, bank account number) of another user is not shown in the card → verify the DOM does not contain this data
-- A quick action (Like, Follow) without auth → redirect to Login, the action is not performed
-
----
-
-### Tier 2 — @normal + @low
-
-**[VP-UI] Interface states**
-
-- [@normal] Interactive cards: a clear hover effect (shadow, scale, or overlay) + pointer cursor; non-interactive (informational only) cards: no hover effect, default cursor
-- [@normal] Grid/List layout toggle (if present): the switch changes the layout immediately, the data is unchanged, the preference is saved on page reload
-- [@normal] Skeleton loading: while fetching → skeleton cards show the correct count and layout, no blank screen
-- [@low] Lazy-loading images: images in the viewport load first, images outside load when scrolled to
-
-**[VP-VAL] Edge cases**
-
-- [@normal] A card with very long text (title, description) → text truncates with single-line ellipsis, does not break the card width (override if the spec uses a multi-line clamp: max 2-3 lines)
-- [@normal] Load More / infinite scroll with total < page size → the "Load More" button is fully hidden (override if the spec wants it shown disabled with "No more records")
-
----
-
-### ⚡ Cross-pattern interactions
-
-- **+ Search**: Keyword submit → the list filters immediately, showing only cards matching the keyword
-- **+ Filter**: Apply a filter → the list reloads, showing only cards matching the condition
-- **+ Delete**: Delete a record → the card disappears from the list immediately, the total count decreases by 1
-- **+ Update/Edit**: Edit successfully → the card reflects the new data immediately (name, status, image)

package/src/orchestrator/templates/ai-instructions/github-skill-sungen-viewpoint-group-d-display.md

@@ -1,226 +0,0 @@
-# GROUP D: DISPLAY & FEEDBACK
-
-> The user reads visualized data, interacts with overlay panels, moves between sections, and receives feedback from the system.
-
-Patterns: 11. Chart / Analytics · 12. Modal / Dialog · 13. Navigation · 14. Notification / Toast / Alert
-See `SKILL.md` for the 4 Viewpoints, Shared Checks, and Security Tag Rules.
-
----
-
-## 11. Chart / Analytics
-
-**Apply when**: the screen has charts (bar, line, pie, donut, scatter…) or a dashboard showing aggregate figures (KPI cards, metrics).
-
-**Shared checks applied**: Loading State, Empty State
-
----
-
-### Tier 1 — @high
-
-**[VP-LOGIC] Data accuracy**
-
-- The values shown on the chart (numbers, %, totals) match exactly the raw data in the DB after computation
-- Change the time range/filter → the chart reloads with the correct data for the new range, no stale data from the previous fetch
-- Hover a data point/bar/slice → the tooltip shows the exact value, matching the corresponding Y/X axis
-- Multiple series on one chart → the legend has the correct names and colors, toggling hide/show hides/shows the corresponding data
-- Click a data point with drill-down → navigate to a list/detail showing exactly the records of that dimension
-
-**[VP-VAL] Data integrity**
-
-- A chart with a value of 0 → shows 0 clearly (bar height = 0, the data point is not hidden), no crash
-- A chart with a single data point → renders correctly, no scale/ratio glitch
-- A very large outlier value → the Y-axis scale adjusts to fit, smaller data points remain distinguishable
-
-**[VP-SEC]**
-
-- A chart showing another tenant's data via a changed URL param → 403 Forbidden, no data returned
-- Sensitive data (salary, private revenue) for a user without permission → the API returns no data, the chart shows "No permission" instead of an empty state
-
----
-
-### Tier 2 — @normal + @low
-
-**[VP-UI] Interface states**
-
-- [@normal] Loading: a skeleton chart or spinner shows while fetching, axes and labels do not flash/flicker when the data arrives
-- [@normal] Responsive: the chart resizes correctly when the viewport changes, no overflow of the container and no clipping
-- [@normal] Legend: the colors in the legend match exactly the colors on the chart, clicking toggles hide/show of a series immediately
-- [@low] Axis labels: do not overlap (rotate if needed), have a clear unit (VND, %, people)
-- [@low] Export chart (if present): the PNG/PDF file contains the chart currently shown, including title, legend, and axis labels
-
-**[VP-VAL] Edge cases**
-
-- [@normal] API timeout/error → the chart area shows a clear error state + a "Retry" button, not an empty chart or a chart with stale data
-- [@normal] A very wide time range (multiple years) → the chart aggregates data correctly (by month/quarter, not by day), no performance issue or layout break
-
----
-
-### ⚡ Cross-pattern interactions
-
-- **+ Filter**: Apply a filter → the chart re-renders with filtered data, the title/subtitle updates to reflect the active filter
-- **+ Data Table**: Chart and table shown on the same screen → the total on the chart matches the total rows in the table
-- **+ Export**: Export data from the chart → the CSV/XLSX contains raw data matching exactly the values shown on the chart
-
----
-
-## 12. Modal / Dialog
-
-**Apply when**: the screen has an overlay panel that opens on top of the main page (confirm an action, a small form, show details).
-
-**Shared checks applied**: (no default shared check)
-
----
-
-### Tier 1 — @high
-
-**[VP-LOGIC] Open/close behavior**
-
-- Trigger the modal (click a button/link) → the modal opens with the correct content, a backdrop overlay covers the whole background
-- Click the X or Cancel button → the modal closes, the user's entered data is cleared, the background is unchanged
-- Press Escape → the modal closes, equivalent to Cancel
-- Click the backdrop (outside the modal area) → the modal closes if it is dismissible
-- A submit action in the modal succeeds → the modal closes itself, the background data/list refreshes immediately without a page reload
-- A submit action in the modal fails (server error) → the modal stays open, the error message appears inside the modal, the entered data is not lost
-
-**[VP-VAL]**
-
-- A form inside a modal: apply all the validation rules of the Form & Inputs pattern
-- A confirmation dialog: only a message + 2 buttons Confirm/Cancel, no input field
-
-**[VP-SEC]**
-
-- A modal containing sensitive data (PII, credentials) → when the modal closes, the HTML is removed from the DOM (no longer present in inspect element)
-- Trigger the modal without authentication → redirect to Login, the modal content is not rendered
-
----
-
-### Tier 2 — @normal + @low
-
-**[VP-UI] Interface states**
-
-- [@normal] Modal centered: in the middle of the viewport, the backdrop dims the whole screen, background scroll is locked
-- [@normal] Focus trap: the Tab key only cycles through elements INSIDE the modal, does not jump out to the backdrop
-- [@normal] Stacked modals: Modal B opens on top of Modal A → B has a higher z-index, closing B keeps A still present and usable
-- [@normal] Responsive: on mobile the modal takes full width or a bottom-sheet form, the action buttons are not hidden by the keyboard
-- [@low] Animation: the modal opens with a fade-in/slide-in, closes with a fade-out, no jitter or flicker
-
-**[VP-VAL] Edge cases**
-
-- [@normal] Reopen the modal after closing → the content resets to the initial state, no data retained from the previous open
-- [@low] Modal content overflow: content taller than the viewport → the modal has an internal scroll, the background page does not scroll
-
----
-
-### ⚡ Cross-pattern interactions
-
-- **+ Form & Inputs**: A modal form submit succeeds → the modal closes, a success toast shows on the background page
-- **+ Create/Add**: A create form in a modal → on success: the modal closes, the list auto-refreshes, the total count increases by 1
-- **+ Delete**: A confirmation modal → Confirm: the modal closes, the record is deleted, the list refreshes; Cancel: the modal closes, the record remains
-- **+ Notification**: An action in the modal triggers a toast → the toast shows on the background page after the modal closes, not hidden by the modal
-
----
-
-## 13. Navigation
-
-**Apply when**: the screen has a side menu, tab bar, breadcrumb, or top navigation bar to move between sections/pages.
-
-**Shared checks applied**: (no default shared check)
-
----
-
-### Tier 1 — @high
-
-**[VP-LOGIC] Navigation behavior**
-
-- Click a menu item/tab → navigate to the correct corresponding page/section, the URL changes correctly
-- The active item is clearly highlighted (visually distinct from inactive items)
-- Breadcrumb: click a parent-level link → navigate to the correct parent page, no 404
-- Breadcrumb: the last item (current page) is plain text, not a link, not navigable
-- Sub-menu: click a parent menu → the sub-menu expands; click again → it collapses; the state is preserved when navigating to another menu and back
-
-**[VP-VAL]**
-
-- A menu item with a badge/counter (notification count) → the number matches the actual unread count from the API, updates after reading
-- A tab with dynamic content → switching tabs loads the correct content of that tab, not another tab's content
-
-**[VP-SEC]**
-
-- A menu item for a restricted page is shown but the user has no permission → click → a 403 page; or the item is hidden from the menu (verify the DOM has no link and the API returns no data)
-- Direct URL access to a restricted page while not logged in → redirect to Login, the URL is preserved so post-login redirects correctly
-
----
-
-### Tier 2 — @normal + @low
-
-**[VP-UI] Interface states**
-
-- [@normal] Side menu collapsed: icon-only mode, a tooltip shows the full menu name on icon hover
-- [@normal] Side menu expanded: menu item names are fully shown, not truncated at normal lengths
-- [@normal] Tab bar: tabs do not wrap to a second line, scroll horizontally if there are too many tabs
-- [@normal] Responsive: the side menu becomes a hamburger menu on mobile, toggling open/close does not cover the main content
-- [@low] Scroll restoration: navigate away and back via the browser Back button → the scroll position of the old page is restored
-
-**[VP-VAL] Edge cases**
-
-- [@normal] Browser back/forward button: navigates correctly per the history stack, no blank page or wrong URL
-- [@low] Deep link: paste a sub-page URL into a new browser → loads that exact page (no redirect to home)
-
----
-
-### ⚡ Cross-pattern interactions
-
-- **+ Filter/Search**: Navigate to another section/tab and back → the filter and search state are preserved, not reset to default
-- **+ Notification**: The badge counter on a menu item updates when a new notification is received (without a page reload)
-
----
-
-## 14. Notification / Toast / Alert
-
-**Apply when**: the screen has a temporary feedback message (toast, snackbar) or a persistent alert (banner, inline alert) to report the result of an action.
-
-**Shared checks applied**: (no default shared check)
-
----
-
-### Tier 1 — @high
-
-**[VP-LOGIC] Message behavior**
-
-- A successful action (save, delete, submit) → a success toast shows the correct message, auto-dismisses after ~3–5 seconds
-- A failed action (validation error, server error) → an error toast/alert shows the correct message, does NOT auto-dismiss, the user must dismiss it actively
-- Multiple actions in a row → each action has its own toast, the toasts stack in order of appearance, not overwriting each other
-- Click X to dismiss a toast → the toast disappears immediately, the remaining toasts fill the gap
-
-**[VP-VAL]**
-
-- The message text matches exactly {{success_message}} / {{error_message}} in test-data.yaml, not hardcoded wrong
-- The toast type matches the semantic: success → check icon + green background; error → X icon + red background; warning → ! icon + yellow background; info → i icon + blue background
-
-**[VP-SEC]**
-
-- A message containing data from user input (e.g. "Created '[record name]' successfully") → the name is rendered as literal text, no script execution (XSS)
-
----
-
-### Tier 2 — @normal + @low
-
-**[VP-UI] Interface states**
-
-- [@normal] Position: the toast appears in the defined corner (top-right, bottom-center…), not covering the active action buttons or form fields
-- [@normal] Progress bar (if present): the countdown bar runs for the correct duration, the toast auto-dismisses when it finishes
-- [@normal] A toast appearing while a modal is open → the toast appears on top of the modal (higher z-index), not hidden by the backdrop
-- [@low] Pause on hover: hover the toast → the auto-dismiss timer pauses; mouse leaves → the timer resumes from where it stopped
-
-**[VP-VAL] Edge cases**
-
-- [@normal] Very long message text → the toast wraps text within its container, no overflow out of the viewport
-- [@low] Rapid fire: trigger 5+ actions in a row → toasts queue in the correct order, no UI crash, the oldest toast dismisses first
-
----
-
-### ⚡ Cross-pattern interactions
-
-- **+ Create/Add**: Submit success → the success toast auto-dismisses; submit failure → the error toast stays until the user dismisses it
-- **+ Delete**: Delete success → a success toast; blocked by a foreign key → an error toast stating the module still using the record
-- **+ Import/Export**: An async operation completes → a toast or the notification bell updates with the result summary
-- **+ Modal/Dialog**: An action in a modal → the modal closes first, then the toast shows on the background page