@jskit-ai/agent-docs 0.1.274 → 0.1.276

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 (109) hide show
  1. package/guide/agent/app-extras/assistant-conversation.md +7 -1
  2. package/guide/agent/app-extras/assistant-voice.md +5 -1
  3. package/guide/agent/app-setup/database-layer.md +30 -0
  4. package/guide/agent/app-setup/material-3-migration.md +180 -0
  5. package/guide/agent/app-setup/upgrading-jskit.md +5 -0
  6. package/guide/agent/framework/material-3.md +316 -73
  7. package/guide/agent/framework/typed-features.md +207 -0
  8. package/guide/agent/framework/ui-operations.md +18 -35
  9. package/guide/agent/framework/ui-pass.md +155 -0
  10. package/guide/agent/index.md +3 -0
  11. package/package.json +1 -1
  12. package/patterns/feature-package/example/booking-engine/package.json +1 -1
  13. package/patterns/minimal-foundation/example/package.json +5 -4
  14. package/patterns/minimal-foundation/example/src/main.js +5 -11
  15. package/patterns/minimal-foundation/example/src/pages/home/index.vue +5 -18
  16. package/patterns/minimal-foundation/example/src/theme/index.js +9 -0
  17. package/patterns/minimal-foundation/example/src/views/NotFound.vue +5 -4
  18. package/patterns/shell-foundation/example/package.json +6 -6
  19. package/patterns/shell-foundation/example/packages/main/package.json +1 -1
  20. package/patterns/shell-foundation/example/src/main.js +5 -11
  21. package/patterns/shell-foundation/example/src/pages/home/index.vue +21 -57
  22. package/patterns/shell-foundation/example/src/pages/home/settings/general/index.vue +24 -19
  23. package/patterns/shell-foundation/example/src/pages/home/settings.vue +27 -84
  24. package/patterns/shell-foundation/example/src/theme/index.js +9 -0
  25. package/patterns/shell-foundation/example/src/views/NotFound.vue +9 -7
  26. package/reference/autogen/PATTERN_INDEX.md +37 -37
  27. package/reference/autogen/README.md +1 -0
  28. package/reference/autogen/packages/agent-docs.md +8 -4
  29. package/reference/autogen/packages/assistant-core.md +1 -0
  30. package/reference/autogen/packages/console-web.md +5 -0
  31. package/reference/autogen/packages/http-web.md +29 -2
  32. package/reference/autogen/packages/kernel.md +2 -1
  33. package/reference/autogen/packages/material-web.md +54 -0
  34. package/reference/autogen/packages/shell-web.md +121 -9
  35. package/reference/autogen/tooling/jskit-catalog.md +81 -0
  36. package/reference/autogen/tooling/testUtils.md +7 -0
  37. package/skills/jskit/SKILL.md +17 -6
  38. package/skills/jskit/references/heuristics/INDEX.md +3 -3
  39. package/skills/jskit/references/heuristics/row-policies.md +10 -0
  40. package/skills/jskit/references/heuristics/typed-features.md +12 -0
  41. package/skills/jskit/references/heuristics/ui-contract.md +10 -7
  42. package/skills/jskit/references/heuristics/ui-testing.md +14 -8
  43. package/skills/jskit/references/material-3.md +315 -72
  44. package/skills/jskit/references/pattern-index.md +37 -37
  45. package/skills/jskit/references/patterns/app/minimal-foundation/example/package.json +5 -4
  46. package/skills/jskit/references/patterns/app/minimal-foundation/example/src/main.js +5 -11
  47. package/skills/jskit/references/patterns/app/minimal-foundation/example/src/pages/home/index.vue +5 -18
  48. package/skills/jskit/references/patterns/app/minimal-foundation/example/src/theme/index.js +9 -0
  49. package/skills/jskit/references/patterns/app/minimal-foundation/example/src/views/NotFound.vue +5 -4
  50. package/skills/jskit/references/patterns/app/shell-foundation/example/package.json +6 -6
  51. package/skills/jskit/references/patterns/app/shell-foundation/example/packages/main/package.json +1 -1
  52. package/skills/jskit/references/patterns/app/shell-foundation/example/src/main.js +5 -11
  53. package/skills/jskit/references/patterns/app/shell-foundation/example/src/pages/home/index.vue +21 -57
  54. package/skills/jskit/references/patterns/app/shell-foundation/example/src/pages/home/settings/general/index.vue +24 -19
  55. package/skills/jskit/references/patterns/app/shell-foundation/example/src/pages/home/settings.vue +27 -84
  56. package/skills/jskit/references/patterns/app/shell-foundation/example/src/theme/index.js +9 -0
  57. package/skills/jskit/references/patterns/app/shell-foundation/example/src/views/NotFound.vue +9 -7
  58. package/skills/jskit/references/patterns/assistant/assistant-surface/example/src/placement.js +1 -1
  59. package/skills/jskit/references/patterns/auth/accounts-hub/example/package.json +2 -2
  60. package/skills/jskit/references/patterns/auth/oidc-sign-in/example/package.json +2 -2
  61. package/skills/jskit/references/patterns/auth/supabase-auth/example/package.json +1 -1
  62. package/skills/jskit/references/patterns/connectors/calendar-cli/example/package.json +4 -4
  63. package/skills/jskit/references/patterns/console/console-surface/PATTERN.md +4 -2
  64. package/skills/jskit/references/patterns/console/console-surface/example/src/pages/console/index.vue +10 -40
  65. package/skills/jskit/references/patterns/console/console-surface/example/src/pages/console/settings/index.vue +3 -11
  66. package/skills/jskit/references/patterns/console/console-surface/example/src/pages/console/settings.vue +24 -72
  67. package/skills/jskit/references/patterns/console/console-surface/example/src/placement.js +28 -0
  68. package/skills/jskit/references/patterns/crud/crud-screen-set/PATTERN.md +13 -0
  69. package/skills/jskit/references/patterns/crud/crud-screen-set/example/books/BookEditPage.vue +2 -0
  70. package/skills/jskit/references/patterns/crud/crud-screen-set/example/books/BookFormFields.vue +0 -6
  71. package/skills/jskit/references/patterns/crud/crud-screen-set/example/books/BookListPage.vue +5 -2
  72. package/skills/jskit/references/patterns/crud/crud-screen-set/example/books/BookNewPage.vue +2 -0
  73. package/skills/jskit/references/patterns/crud/crud-screen-set/example/books/BookViewPage.vue +5 -9
  74. package/skills/jskit/references/patterns/crud/json-api-resource-package/example/packages/books/package.json +2 -2
  75. package/skills/jskit/references/patterns/database/mysql-application/example/package.json +1 -1
  76. package/skills/jskit/references/patterns/database/postgres-application/example/package.json +1 -1
  77. package/skills/jskit/references/patterns/realtime/realtime-application/example/package.json +2 -2
  78. package/skills/jskit/references/patterns/server/feature-package/example/booking-engine/package.json +1 -1
  79. package/skills/jskit/references/patterns/shell/application-shell/PATTERN.md +3 -1
  80. package/skills/jskit/references/patterns/shell/application-shell/example/expected-existing/src/pages/home/index.vue +5 -18
  81. package/skills/jskit/references/patterns/shell/application-shell/example/expected-existing/src/views/NotFound.vue +14 -0
  82. package/skills/jskit/references/patterns/shell/application-shell/example/src/pages/home/index.vue +21 -57
  83. package/skills/jskit/references/patterns/shell/application-shell/example/src/pages/home/settings/general/index.vue +24 -19
  84. package/skills/jskit/references/patterns/shell/application-shell/example/src/pages/home/settings.vue +27 -84
  85. package/skills/jskit/references/patterns/shell/application-shell/example/src/views/NotFound.vue +15 -0
  86. package/skills/jskit/references/patterns/ui/page-and-placement/example/src/components/SyncStatusElement.vue +2 -2
  87. package/skills/jskit/references/patterns/ui/page-and-placement/example/src/pages/home/reports/activity.vue +1 -1
  88. package/skills/jskit/references/patterns/ui/page-and-placement/example/src/pages/home/reports/overview.vue +1 -1
  89. package/skills/jskit/references/patterns/ui/page-and-placement/example/src/pages/home/reports.vue +6 -3
  90. package/skills/jskit/references/patterns/ui/page-and-placement/example/src/placement.js +1 -1
  91. package/skills/jskit/references/patterns/users/account-settings/example/src/components/account/settings/AccountSettingsNotificationsSection.vue +2 -8
  92. package/skills/jskit/references/patterns/users/account-settings/example/src/components/account/settings/AccountSettingsPreferencesSection.vue +2 -8
  93. package/skills/jskit/references/patterns/users/account-settings/example/src/components/account/settings/AccountSettingsProfileSection.vue +5 -11
  94. package/skills/jskit/references/patterns/users/account-settings/example/src/components/account/settings/AccountSettingsSignInMethodsSection.vue +3 -9
  95. package/skills/jskit/references/patterns/users/account-settings/example/src/pages/account/index.vue +7 -0
  96. package/skills/jskit/references/patterns/users/user-administration-server/example/packages/users/package.json +2 -2
  97. package/skills/jskit/references/patterns/users/user-administration-server/example/packages/users-workspace/package.json +3 -3
  98. package/skills/jskit/references/patterns/workspaces/workspace-surfaces/example/packages/main/src/client/components/AccountPendingInvitesCue.vue +1 -2
  99. package/skills/jskit/references/patterns/workspaces/workspace-surfaces/example/src/components/WorkspaceNotFoundCard.vue +5 -6
  100. package/skills/jskit/references/patterns/workspaces/workspace-surfaces/example/src/pages/admin/workspace/settings/index.vue +5 -12
  101. package/skills/jskit/references/patterns/workspaces/workspace-surfaces/example/src/pages/admin/workspace/settings.vue +24 -72
  102. package/skills/jskit/references/patterns/workspaces/workspace-surfaces/example/src/surfaces/admin/index.vue +3 -4
  103. package/skills/jskit/references/patterns/workspaces/workspace-surfaces/example/src/surfaces/app/index.vue +3 -3
  104. package/skills/jskit/references/typed-features.md +207 -0
  105. package/skills/jskit/references/ui-operations.md +18 -35
  106. package/skills/jskit/references/ui-pass.md +150 -0
  107. package/patterns/shell-foundation/example/src/pages/home/settings/index.vue +0 -7
  108. package/skills/jskit/references/patterns/app/shell-foundation/example/src/pages/home/settings/index.vue +0 -7
  109. package/skills/jskit/references/patterns/shell/application-shell/example/src/pages/home/settings/index.vue +0 -7
@@ -1,81 +1,33 @@
1
1
  <script setup>
2
+ import { computed } from "vue";
3
+ import { RouterView, useRoute } from "vue-router";
4
+ import ShellListDetail from "@jskit-ai/shell-web/client/components/ShellListDetail";
2
5
  import ShellOutlet from "@jskit-ai/shell-web/client/components/ShellOutlet";
3
- import { RouterView } from "vue-router";
6
+
7
+ definePage({
8
+ meta: {
9
+ jskit: {
10
+ title: "Workspace settings"
11
+ }
12
+ }
13
+ });
14
+
15
+ const route = useRoute();
16
+ // The section list shows beside the open section on wide windows, and on its own at the settings landing.
17
+ const detailOpen = computed(() => !/\/settings\/?$/u.test(route.path));
4
18
  </script>
5
19
 
6
20
  <template>
7
- <section class="settings-shell d-flex flex-column ga-4">
8
- <v-sheet rounded="lg" border class="settings-shell__panel">
9
- <nav class="settings-shell__nav" aria-label="Workspace settings sections">
10
- <v-list nav density="compact" class="settings-shell__nav-list">
21
+ <ShellListDetail :detail-open="detailOpen">
22
+ <template #list>
23
+ <nav aria-label="Workspace settings sections">
24
+ <v-list nav>
11
25
  <ShellOutlet target="admin-settings:primary-menu" />
12
26
  </v-list>
13
27
  </nav>
14
- <main class="settings-shell__content">
15
- <RouterView />
16
- </main>
17
- </v-sheet>
18
- </section>
28
+ </template>
29
+ <template #detail>
30
+ <RouterView />
31
+ </template>
32
+ </ShellListDetail>
19
33
  </template>
20
-
21
- <style scoped>
22
- .settings-shell__panel {
23
- display: grid;
24
- gap: 1rem;
25
- grid-template-columns: minmax(12rem, 16rem) minmax(0, 1fr);
26
- padding: 1rem;
27
- }
28
-
29
- .settings-shell__nav-list {
30
- padding: 0.35rem;
31
- }
32
-
33
- .settings-shell__nav-list :deep(.v-list-item) {
34
- min-height: 48px;
35
- padding-inline: 0.6rem 0.7rem;
36
- }
37
-
38
- .settings-shell__nav-list :deep(.v-list-item__prepend) {
39
- margin-inline-end: 0;
40
- }
41
-
42
- .settings-shell__nav-list :deep(.v-list-item__spacer) {
43
- min-width: 0.5rem;
44
- width: 0.5rem;
45
- }
46
-
47
- .settings-shell__nav-list :deep(.v-list-item-title) {
48
- line-height: 1.2;
49
- }
50
-
51
- .settings-shell__content {
52
- border-left: 1px solid rgba(var(--v-theme-on-surface), 0.18);
53
- min-width: 0;
54
- padding-left: 1rem;
55
- }
56
-
57
- @media (max-width: 960px) {
58
- .settings-shell__panel {
59
- grid-template-columns: 1fr;
60
- }
61
-
62
- .settings-shell__nav {
63
- overflow-x: auto;
64
- }
65
-
66
- .settings-shell__nav-list {
67
- display: flex;
68
- gap: 0.25rem;
69
- min-width: max-content;
70
- }
71
-
72
- .settings-shell__nav-list :deep(.v-list-item) {
73
- min-height: 48px;
74
- }
75
-
76
- .settings-shell__content {
77
- border-left: 0;
78
- padding-left: 0;
79
- }
80
- }
81
- </style>
@@ -25,11 +25,11 @@ function adminChildPath(suffix = "") {
25
25
  <v-btn color="primary" variant="tonal" :to="adminChildPath('workspace/settings')">Settings</v-btn>
26
26
  </div>
27
27
 
28
- <v-sheet rounded="lg" border class="workspace-admin-screen__panel">
29
- <p class="text-body-2 text-medium-emphasis mb-0">
28
+ <div class="workspace-admin-screen__panel">
29
+ <p class="text-body-medium on-surface-variant mb-0">
30
30
  Review workspace access, members, and operational settings from this surface.
31
31
  </p>
32
- </v-sheet>
32
+ </div>
33
33
  </section>
34
34
  </template>
35
35
 
@@ -51,7 +51,6 @@ function adminChildPath(suffix = "") {
51
51
  }
52
52
 
53
53
  .workspace-admin-screen__actions :deep(.v-btn) {
54
- min-height: 48px;
55
54
  flex: 1 1 10rem;
56
55
  }
57
56
  }
@@ -12,11 +12,11 @@ const { workspaceUnavailable, workspaceUnavailableMessage } = useWorkspaceNotFou
12
12
  surface-label="App"
13
13
  />
14
14
  <section v-else class="workspace-home-screen d-flex flex-column ga-4">
15
- <v-sheet rounded="lg" border class="workspace-home-screen__panel">
16
- <p class="text-body-2 text-medium-emphasis mb-0">
15
+ <div class="workspace-home-screen__panel">
16
+ <p class="text-body-medium on-surface-variant mb-0">
17
17
  Activity from workspace workflows will appear here.
18
18
  </p>
19
- </v-sheet>
19
+ </div>
20
20
  </section>
21
21
  </template>
22
22
 
@@ -719,6 +719,107 @@ const rows = extractJsonRestCollectionRows(await api.resources.workspaceMembersh
719
719
  }, createJsonRestContext(options.context)));
720
720
  ```
721
721
 
722
+ ### One read per table
723
+
724
+ **A read that builds a list reads each table once for the whole list: one
725
+ query per table with an id-list filter, the rows grouped in memory. It never
726
+ reads one row, or runs one lookup, per item of the list.**
727
+
728
+ - Collect the ids from the first read, then read each related table once with
729
+ an id-list filter: a `searchSchema` entry
730
+ `{ type: "array", actualField: "<column>", filterOperator: "in" }`, read
731
+ through `queryAllJsonRestCollectionRows()`, or the resource's `include`.
732
+ Group the rows by id with `Map.groupBy()`.
733
+ - `getDocumentById()`, `queryDocuments()`, a service `get` or another owner's
734
+ single-record read inside a loop over the list is a read per row, however
735
+ the loop is spelled (`for`, `map` with `Promise.all`, a helper called per
736
+ item). So is a single-record helper reused for a list.
737
+ - Work derived from a row (hashing, preparing a form, assembling a snapshot)
738
+ runs once per distinct input in the call, not once per row it appears in.
739
+ - The list's query count follows its tables and pages (100 rows a page unless
740
+ the resource sets `queryMaxLimit`), never its rows: three hundred invoices
741
+ and their lines take a handful of queries, not three hundred more (see
742
+ [Budgets at realistic counts](#budgets-at-realistic-counts)).
743
+
744
+ Why: a read per row costs nothing with three test rows and seconds with a few
745
+ hundred real ones, and every lookup and visibility check inside it repeats too.
746
+
747
+ ```js
748
+ // good: one read per table, however many invoices there are
749
+ const invoiceRows = await queryAllJsonRestCollectionRows(api.resources.invoices, {
750
+ queryParams: { filters: { workspace: workspaceId } },
751
+ transaction: resolveTransaction(options),
752
+ format: "plain"
753
+ }, options.context);
754
+ const lineRows = await queryAllJsonRestCollectionRows(api.resources.invoiceLines, {
755
+ queryParams: { filters: { invoiceIds: invoiceRows.map((invoice) => invoice.id) } },
756
+ transaction: resolveTransaction(options),
757
+ format: "plain"
758
+ }, options.context);
759
+ const linesByInvoice = Map.groupBy(lineRows, (line) => line.invoiceId);
760
+ return invoiceRows.map((invoice) => ({ ...invoice, lines: linesByInvoice.get(invoice.id) || [] }));
761
+
762
+ // bad: one more query, and its lookups and row policy, for every invoice
763
+ for (const invoice of invoiceRows) {
764
+ invoice.lines = await invoiceLines.queryDocuments({ invoiceId: invoice.id }, options);
765
+ }
766
+ ```
767
+
768
+ ### Bounded access checks
769
+
770
+ **A row policy costs what the rows its query reads cost, never what the
771
+ subject's stored history costs, and a write decides access once instead of
772
+ paying a read policy for every row it writes.**
773
+
774
+ - A `rowPolicy` adds one predicate to the query it is given: a join, `EXISTS`
775
+ or subquery correlated with the row being read, on indexed columns. It never
776
+ loads everything the subject was ever linked to (every source, notice or
777
+ grant in their history) to build an `IN` list, and never calls another
778
+ owner's access check once per item of that history. The
779
+ [row policies heuristic](heuristics/row-policies.md)
780
+ has the policy contract and its package composition.
781
+ - The policy runs on every single-record read, and a CRUD write includes one:
782
+ `createDocument()` and `patchDocumentById()` write with `returning: "full"`
783
+ and read the record back through the policy, and `patch` and `delete` first
784
+ look the record up through it. A write therefore pays the read policy for
785
+ each row it writes.
786
+ - A write path decides access once, inside its transaction. A batch write (a
787
+ delivery, an import, a fan-out) whose per-row read-back would pay an
788
+ expensive policy writes through a repository method added with
789
+ `decorateRepository`, on `resolveRepoClient(database.knex, options)`,
790
+ setting the same columns the resource would, its ownership columns
791
+ included, and reading back only what it returns.
792
+ - Its test runs one read and one write for a subject with a short history and
793
+ with a realistic long one, and asserts the same query count.
794
+
795
+ Why: a check sized by history grows with every record the subject receives,
796
+ so the same write that takes milliseconds in a test takes seconds a year later.
797
+
798
+ ```js
799
+ // good: one predicate on the row being read
800
+ function noticeVisibilityPolicy({ query, context, column, value, db }) {
801
+ const userId = resolveActorId(context);
802
+ if (!userId) return false;
803
+ query.where(column("recipientId"), value("recipientId", userId)).whereExists(
804
+ db("sources").select(1)
805
+ .whereColumn("sources.id", column("sourceId"))
806
+ .where("sources.status", "published")
807
+ );
808
+ return true;
809
+ }
810
+
811
+ // bad: every source the recipient was ever notified about, checked one by one
812
+ async function noticeVisibilityPolicy({ query, context, column, value }) {
813
+ const sourceIds = await noticeHistory.listSourceIds(resolveActorId(context));
814
+ const readable = [];
815
+ for (const sourceId of sourceIds) {
816
+ if (await sources.canRead(sourceId, context)) readable.push(sourceId);
817
+ }
818
+ query.whereIn(column("sourceId"), readable.map((id) => value("sourceId", id)));
819
+ return true;
820
+ }
821
+ ```
822
+
722
823
  ### Routes
723
824
 
724
825
  **A route does HTTP work only (status, cookies, redirects) and runs an action
@@ -905,6 +1006,112 @@ export function resetInvoiceCacheForTests() {
905
1006
  }
906
1007
  ```
907
1008
 
1009
+ ### Budgets at realistic counts
1010
+
1011
+ **A list, batch or write path has a database test at the row counts and
1012
+ history a real workspace holds, and that test fails above a fixed query
1013
+ budget, one that a read per row or a history-sized check cannot meet.**
1014
+
1015
+ - Seed hundreds of records and long per-person histories, not one to three
1016
+ rows: a read per row and a history-sized policy cost nothing at three.
1017
+ - Count the queries with the test Knex instance's `query` event and assert a
1018
+ ceiling: the count the correct implementation needs at that size, which a
1019
+ read per row overshoots by hundreds. A path that pages nothing (one read,
1020
+ one write) asserts the same count at a short and a long history. A query
1021
+ count is stable in CI; also report the time the call took.
1022
+ - Meet the budget by fixing the reads ([One read per
1023
+ table](#one-read-per-table), [Bounded access checks](#bounded-access-checks)),
1024
+ never by shrinking the data or raising the budget.
1025
+
1026
+ Why: without a budget at real counts, a path that does one read per row ships,
1027
+ and its first sign is a request that takes seconds in production.
1028
+
1029
+ ```js
1030
+ // good
1031
+ test("the invoice list reads each table once", async () => {
1032
+ await seedInvoices(knex, { workspace, count: 300, linesEach: 5 });
1033
+ let queries = 0;
1034
+ const count = () => { queries += 1; };
1035
+ knex.on("query", count);
1036
+ try {
1037
+ await invoices.listWithLines(workspace, { context });
1038
+ } finally {
1039
+ knex.off("query", count);
1040
+ }
1041
+ // A page of each table at a time; one read per invoice would add 300.
1042
+ assert.ok(queries <= 40, `${queries} queries`);
1043
+ });
1044
+
1045
+ // bad: three invoices and no budget, so a read per invoice passes
1046
+ test("the invoice list has its lines", async () => {
1047
+ await seedInvoices(knex, { workspace, count: 3, linesEach: 1 });
1048
+ assert.equal((await invoices.listWithLines(workspace, { context })).length, 3);
1049
+ });
1050
+ ```
1051
+
1052
+ ### Time limits are not fixes
1053
+
1054
+ **A slow test, suite, preparation or request is a defect to find, never a time
1055
+ limit to raise. Measure where the time goes, fix that cause, and keep the
1056
+ default limits.**
1057
+
1058
+ - Raising `--test-timeout`, a test's `{ timeout }`, Playwright's `timeout`,
1059
+ `test.setTimeout()` or an `expect` timeout, adding retries, or calling a
1060
+ request in a loop until it answers hides the cause and lets it grow.
1061
+ - Read the preparation phases' durations and the query counts first; the
1062
+ cause is usually a read per row, a history-sized policy, or a database
1063
+ prepared by replaying migrations ([Test databases are prepared
1064
+ once](#test-databases-are-prepared-once)).
1065
+ - A longer limit is right only for work that is long by nature, such as a
1066
+ fixture of deliberate size, and the test names that work.
1067
+ - A time limit still bounds every run, so a hang ends; it is not a speed
1068
+ setting.
1069
+
1070
+ Why: a raised limit absorbs today's slowness and every later one, until a run
1071
+ takes hours and nobody knows which change made it slow.
1072
+
1073
+ ```js
1074
+ // good: the slow step was found and fixed, so the default limit holds
1075
+ test("delivers a batch of notices", async () => {
1076
+ await deliveries.processBatch(workspace, { context });
1077
+ });
1078
+
1079
+ // bad
1080
+ test("delivers a batch of notices", { timeout: 600_000 }, async () => {
1081
+ await deliveries.processBatch(workspace, { context });
1082
+ });
1083
+ ```
1084
+
1085
+ ### Test databases are prepared once
1086
+
1087
+ **A test run prepares each database once, from a stored snapshot of its
1088
+ schema, migration ledger and seed rows checked by a digest of their sources,
1089
+ and never replays the whole migration history inside the run.**
1090
+
1091
+ - The snapshot is rebuilt only when the digest of the migration and seed
1092
+ sources changes, once and outside the timed tests; every disposable
1093
+ database, and every database a test migrated up or down, is restored from
1094
+ it.
1095
+ - The full migration history runs once, in its own fresh-schema check
1096
+ ([database verification](https://mobily-enterprises.github.io/jskit-ai/guide/app-setup/database-layer#verification)).
1097
+ - The harness reports each preparation phase and its duration, and the suite
1098
+ has a time budget, so slow preparation shows instead of hiding inside the
1099
+ next test that waits for it.
1100
+ - The database layer guide's [integration test
1101
+ databases](https://mobily-enterprises.github.io/jskit-ai/guide/app-setup/database-layer#integration-test-databases)
1102
+ gives the snapshot's contents per engine.
1103
+
1104
+ Why: the migration history only grows, so a run that replays it whenever a
1105
+ schema changed gets slower with every migration the application adds.
1106
+
1107
+ ```js
1108
+ // good: the application's test support restores the snapshot its digest names
1109
+ before(async () => restoreTestDatabase(knex, await testDatabaseSnapshot()));
1110
+
1111
+ // bad: every file replays every migration
1112
+ before(() => knex.migrate.latest());
1113
+ ```
1114
+
908
1115
  ## Files and layout
909
1116
 
910
1117
  ### Size limits
@@ -18,37 +18,17 @@ only when defining or diagnosing topology. Resolve current dynamic parameters
18
18
  to an absolute URL or route object for sibling/child links—never bind a route
19
19
  template or relative string raw to Vue Router `to`.
20
20
 
21
- ## Back navigation
22
-
23
- Check every page for a visible Back button that returns to the previous page.
24
- Omit it only when returning makes no product sense, such as the root
25
- landing page or a completed flow that must not reopen an expired step. State
26
- the reason in the implementation or review result; a drawer link is not Back.
27
-
28
- Plain **Back** normally follows the person's actual route history, retaining
29
- the originating page's query, filters, tab, and pagination. Reuse the existing
30
- JSKIT screen/navigation owner and its public seams. For history traversal use
31
- the app's Vue Router instance (`useRouter()` from `vue-router`, then
32
- [`router.back()`](https://router.vuejs.org/guide/essentials/navigation.html#traverse-history));
33
- `usePaths().page()` from `@jskit-ai/shell-web/client/navigation/usePaths`
34
- resolves a destination, not history. Do not invent a second navigation stack.
35
-
36
- For direct links, new tabs, or no usable in-app history, use a deliberate safe
37
- fallback resolved through the existing surface/workspace-aware path helpers.
38
- Do not infer a usable previous page from `window.history.length` alone or send
39
- people outside the app unexpectedly. Keep existing unsaved-change guards.
40
-
41
- A fixed parent/list destination is valid when the task calls for it; name it
42
- explicitly, for example **Back to appointments**. It must not silently replace
43
- ordinary Back. Shared CRUD `listLocation`/`listUrlTemplate` links are fixed
44
- destinations, not proof of previous-page behavior. Keep Back distinct from
45
- Cancel, Close, and a wizard's Previous step.
46
-
47
- Place Back consistently near the start of the page's existing action region,
48
- before forward/primary actions in reading and keyboard order. Reuse shell or
49
- shared-screen controls; avoid duplicates, drawer-only access, or adding a page
50
- heading just to house it. Keep its meaning and accessible name clear at every
51
- supported width.
21
+ ## Navigation and Up
22
+
23
+ Follow [Navigation and Up](material-3.md#navigation-and-up), a MUST that
24
+ plain `jskit check` enforces: the shell owns the Up arrow (one, in the top app
25
+ bar, on every inner page) and the per-tab trail. An app declares each inner
26
+ page's parent as route meta `jskit.parent`, resolves every inner link through
27
+ JSKIT navigation, finishes custom forms with `useShellNavigation().finish()`,
28
+ and never writes back logic, `router.back()`, `history.back()`,
29
+ `window.location` navigation or a "Back to X" control. Keep Up distinct from
30
+ Cancel, Close, and a wizard's Previous step; keep existing unsaved-change
31
+ guards.
52
32
 
53
33
  `createShellRouter()` owns scroll position (`shell/application-shell`
54
34
  pattern); never reset scroll in page components.
@@ -90,10 +70,13 @@ pattern, never its private CSS.
90
70
  Exercise user-facing changes with Playwright at compact, medium, and expanded
91
71
  widths. Check overflow, clipped text, duplicate navigation, route placement,
92
72
  actions, skeleton replacement, error feedback, and target sizes. Use relative
93
- URLs. With `PLAYWRIGHT_BASE_URL` set, start no duplicate server. For Back,
94
- enter the same page from two origins and verify each returns to its own origin
95
- with context intact. Also check direct entry, reload, browser back/forward,
96
- fixed-destination exceptions, and any unsaved-change guard.
73
+ URLs. With `PLAYWRIGHT_BASE_URL` set, start no duplicate server. For Up
74
+ (`shellBackButton(page)` and `pressShellBack(page)` from
75
+ `@jskit-ai/shell-web/test/shellNavigation`), reach a page from two origins (one
76
+ sideways) and verify each Up returns to its own origin and that chains unwind;
77
+ open the page directly and verify Up reaches its declared parent; verify
78
+ main-menu destinations show no arrow, a reload keeps the trail, and Save or
79
+ Cancel never leaves the form in it.
97
80
 
98
81
  A managed host owns its browser and may provide
99
82
  `PLAYWRIGHT_STORAGE_STATE`; never print or commit that value, bypass it,
@@ -0,0 +1,150 @@
1
+ <!-- Generated from `packages/agent-docs/site/guide/framework/ui-pass.md`. -->
2
+
3
+ # UI pass
4
+
5
+ A UI pass makes JSKIT UI exact Material 3 at one of three scopes: **the
6
+ changes** a task made (the default), **a section** of the app, or **the whole
7
+ app**. Read the complete [Material 3 rules](material-3.md) first; navigation
8
+ and Up come first there.
9
+
10
+ ## Every scope
11
+
12
+ - **The same rules:** the [Material 3 rules](material-3.md), their exact sizes,
13
+ `jskit check`, `jskit check m3`, and screenshots at 390, 768 and 1280 wide, in
14
+ light and dark.
15
+ - **Navigation is must-fix at every scope:** fix every `nav/*` error inside the
16
+ scope (declare parents, resolve links through JSKIT, delete back controls and
17
+ back logic); never only report one. Plain `jskit check` must not end with a
18
+ new error. Errors outside the scope, in an app not yet converted, are
19
+ reported as must-fix findings.
20
+ - **Behavior otherwise stays exactly as it is:** no feature, field, action,
21
+ permission, validation or data change. A defect, missing behavior or test gap
22
+ you notice is a finding for the report, not a fix.
23
+ - **Exceptions:** take the [approved routes](material-3.md#exceptions) first.
24
+ Add an `m3-check: allow` exception only after the person agreed to it, and
25
+ list every exception the changes add, with its file, line and reason, in the
26
+ report.
27
+ - **JSKIT first:** if JSKIT itself blocks an exact result, report the exact JSKIT
28
+ change (package, file, what is missing). Never compensate with app CSS,
29
+ `!important` or a copied package file.
30
+ - **Screenshots** come from the managed browser or a temporary Playwright spec.
31
+ Keep them out of the repository (`test-results/` is ignored) and delete the
32
+ temporary spec afterwards. With `defaultTheme: "system"`, `emulateMedia`
33
+ selects the scheme:
34
+
35
+ ```js
36
+ import { test } from "@playwright/test";
37
+
38
+ for (const scheme of ["light", "dark"]) {
39
+ for (const width of [390, 768, 1280]) {
40
+ test(`suppliers ${width} ${scheme}`, async ({ page }) => {
41
+ await page.emulateMedia({ colorScheme: scheme });
42
+ await page.setViewportSize({ width, height: 900 });
43
+ await page.goto("/home/suppliers");
44
+ await page.screenshot({ path: `test-results/ui-pass/after/suppliers-${width}-${scheme}.png`, fullPage: true });
45
+ });
46
+ }
47
+ }
48
+ ```
49
+
50
+ - **Look at every screenshot** before reporting. They are the only proof of
51
+ what the checks cannot see: layout, spacing, contrast, overflow, clipped
52
+ labels, borders where tones belong, colour that only works in one scheme, an
53
+ Up arrow where it should not be or missing where it should.
54
+ - **Prove Up** on the screens in scope, with `shellBackButton(page)` and
55
+ `pressShellBack(page)` from `@jskit-ai/shell-web/test/shellNavigation`:
56
+ contact → supplier → Up shows the contact; a supplier opened from a pasted
57
+ link → Up shows the Suppliers list; no arrow on main-menu pages; no "Back to
58
+ X" anywhere.
59
+
60
+ ## 1. The changes
61
+
62
+ The default, and what an automatic UI pass after a plan runs.
63
+
64
+ - **In scope:** every screen, component and style the task created or edited,
65
+ plus the screens that render them. Explicit commits replace "the task's own
66
+ changes" when they are named.
67
+ - **Method:**
68
+ 1. List the changed UI files and the screens that render them.
69
+ 2. Check each against the Material 3 rules and fix what is off, inside the
70
+ changes only.
71
+ 3. Run `jskit check m3` on the changed UI files until it reports nothing,
72
+ and plain `jskit check` until it passes.
73
+ 4. Take after screenshots of each affected screen, and look at them.
74
+ 5. Run the focused tests of the affected screens.
75
+ - **Report:** what was fixed; anything outside the changes that looks wrong, as
76
+ findings only (not fixed; navigation ones marked must-fix); the check
77
+ results; the screenshots; what is unverified.
78
+
79
+ Example: a task added a Delete button and a "Back to suppliers" link to the
80
+ supplier page. The pass replaces the button's `color="#d32f2f"` and
81
+ `variant="outlined"` with the error colour role, removes the link, declares the
82
+ page's parent (`/suppliers`), checks `src/pages/home/suppliers/[supplierId].vue`
83
+ clean, and shows the supplier at the six sizes. It reports, unfixed, that the
84
+ Contacts list scrolls sideways at 390.
85
+
86
+ ## 2. A section
87
+
88
+ On request ("UI pass the Suppliers section").
89
+
90
+ - **In scope:** a named area: a module, a route subtree, a set of screens or a
91
+ shared component family. Every screen in it, touched or not, so the section is
92
+ consistent.
93
+ - **Method:**
94
+ 1. Inventory the section's screens and the components they render.
95
+ 2. Take before screenshots of each screen, with its empty, error and dialog
96
+ states where they exist.
97
+ 3. Map each screen pattern to its Material 3 canonical layout (list-detail,
98
+ supporting pane, feed) and components, in a table.
99
+ 4. Convert, navigation first: declare each inner page's parent, route every
100
+ inner link through JSKIT navigation, delete back handlers and "Back to X"
101
+ controls.
102
+ 5. Take after screenshots beside the before ones.
103
+ 6. Run `jskit check m3` on the section until it reports nothing.
104
+ 7. Delete the app CSS that is no longer needed.
105
+ 8. Change browser tests only where markup changed; every behavior assertion
106
+ stays.
107
+ - **Report:** a before/after gallery, the mapping, the non-blank CSS lines
108
+ (`<style>` blocks and CSS files) before and after, the check results, the
109
+ Up proof and the test results.
110
+
111
+ Example: the Suppliers section has a list, a record, a new and an edit page.
112
+ The mapping reads: list as a list with filter chips and a FAB, list-detail on
113
+ expanded widths; record as a header with status chips and value-first lists;
114
+ new and edit as a form with Cancel and Save in the bar. The pass removes a
115
+ bordered filter panel and 46 lines of CSS, declares the three inner pages'
116
+ parents, and the check reports nothing for `src/pages/home/suppliers`.
117
+
118
+ ## 3. The whole app
119
+
120
+ On request ("UI pass the whole app"). Every screen, the shell and navigation
121
+ included.
122
+
123
+ 1. **Inventory and before screenshots** of every screen type: sign-in, home,
124
+ dashboard, every list, one record per module, every form type, settings, a
125
+ dialog, an empty state and an error state.
126
+ 2. **A short spec:** the foundation decisions (seed colour, scheme generation,
127
+ type, shape, icons, Vuetify defaults) and a table mapping every screen
128
+ pattern to its Material 3 layout and components.
129
+ 3. **Foundation first:** the theme from one seed, type, shape, icons and Vuetify
130
+ defaults, then the app shell and navigation (every inner page's parent, so
131
+ plain `jskit check` passes).
132
+ 4. **Screens in packages,** at most three at a time, never two on the same file.
133
+ 5. **After screenshots** for each package.
134
+ 6. **Delete as you go:** app CSS shrinks to almost nothing, with no hex colour
135
+ outside `src/theme/`; `jskit check m3` reports nothing for the whole app.
136
+ 7. **Tests:** browser tests change only where markup changed, every behavior
137
+ assertion stays the same, and nothing regresses.
138
+ 8. **An independent review:** a fresh agent, given only the screenshots and the
139
+ spec, lists every departure from Material 3 as MUST or SHOULD. Fix every MUST
140
+ and review again until there are none.
141
+
142
+ - **Report:** the gallery, the reviewer's final pass with no MUST items, the
143
+ counts (screens, CSS lines before and after, check findings before and
144
+ after), the Up proof and the test results.
145
+
146
+ Example: a twelve-screen app. The spec picks the existing brand orange as seed
147
+ and maps four lists, four records, three forms and settings. The foundation
148
+ package replaces a hand-picked palette and MDI icons; three screen packages
149
+ follow. App CSS goes from 640 lines to 38, the check from 212 findings to none,
150
+ and the second review has no MUST items.
@@ -1,7 +0,0 @@
1
- <script setup>
2
- import { redirectToChild } from "@jskit-ai/kernel/client/pageRedirects";
3
-
4
- definePage({
5
- redirect: redirectToChild("general")
6
- });
7
- </script>
@@ -1,7 +0,0 @@
1
- <script setup>
2
- import { redirectToChild } from "@jskit-ai/kernel/client/pageRedirects";
3
-
4
- definePage({
5
- redirect: redirectToChild("general")
6
- });
7
- </script>
@@ -1,7 +0,0 @@
1
- <script setup>
2
- import { redirectToChild } from "@jskit-ai/kernel/client/pageRedirects";
3
-
4
- definePage({
5
- redirect: redirectToChild("general")
6
- });
7
- </script>