ketatlas 0.2.3 → 0.2.5

package/CHANGELOG.md

@@ -1,5 +1,13 @@
 # Changelog
 
+## 0.2.5
+
+- Show separate Checks and Implemented percentage badges per workflow. Implemented includes Verified screens; project verification remains separate on the top bar. Display a dash for Checks when no checklist is recorded.
+
+## 0.2.4
+
+- Anchor the progress detail header directly inside the modal top border and scroll only the form beneath it.
+
 ## 0.2.3
 
 - Keep preview headers and progress footers outside the scrolling content so the footer remains fixed to the frame bottom.

package/README.md

@@ -17,15 +17,15 @@ https://github.com/user-attachments/assets/13f24fc8-7b8e-4bda-9e02-364c120ee163
 [KetAtlas is available on npm](https://www.npmjs.com/package/ketatlas). Use Node.js 22+ and run it from any directory:
 
 ```sh
-npx --yes ketatlas@0.2.3 scaffold my-atlas --template web
-npx --yes ketatlas@0.2.3 serve my-atlas/atlas.json
-npx --yes ketatlas@0.2.3 audit my-atlas/atlas.json --strict
+npx --yes ketatlas@0.2.5 scaffold my-atlas --template web
+npx --yes ketatlas@0.2.5 serve my-atlas/atlas.json
+npx --yes ketatlas@0.2.5 audit my-atlas/atlas.json --strict
 ```
 
 Or install the CLI once for your user account:
 
 ```sh
-npm install --global ketatlas@0.2.3
+npm install --global ketatlas@0.2.5
 ketatlas scaffold my-atlas
 ketatlas serve my-atlas/atlas.json
 ketatlas audit my-atlas/atlas.json --strict

package/docs/progress.md

@@ -6,9 +6,9 @@ Screen and state preview footers show the shared screen status, blockers and lin
 
 ## Sidebar and project completion
 
-Project-wide verified/checklist percentages and blocker counts appear in the top bar beside **Screens**. The sidebar shows one compact numeric badge after each workflow’s step count (`2 steps [30%]`). **Verified %** is the number of Verified screens divided by the total unique screens in that scope. Repeated nodes and error variants count once; note/external nodes do not count. Screenless flows have no badge. Percentages round down so unfinished work cannot appear as 100%.
+Project-wide verified/checklist percentages and blocker counts appear in the top bar beside **Screens**. The sidebar shows two badges after each workflow’s step count: **Checks %** (completed recorded acceptance checks / all recorded checks for unique screens) and **Implemented %** (screens with Implemented or Verified status / all unique screens). The compact labels are `30% checks` and `20% impl.`; tooltips spell out the definitions. In progress and In review screens do not count as implemented. Repeated nodes and error variants count once; note/external nodes do not count. Screenless flows have no badge. Flows with no recorded checks show **—**, not a measured 0%. Percentages round down so unfinished checks cannot appear as 100%.
 
-The badge tooltip and accessible label include status counts, blockers and **Checks %**, which counts completed recorded acceptance checks over all recorded checks, with an explicit unscoped-screen count when checklists are missing. This is not an estimate of effort, and 100% of a partial checklist does not make a screen Verified. Saving or refreshing progress updates the sidebar; changing or searching workflows preserves the current progress.
+The badge tooltip and accessible label include completed/total checks, status counts, blockers, verified-screen completion, and unscoped-screen counts when checklists are missing. Checklist completion is not an estimate of effort or verified screen completion: 100% of a partial checklist does not make a screen Verified. Verified % on the top bar remains the number of Verified screens divided by all unique project screens. Saving or refreshing progress updates the sidebar; changing or searching workflows preserves the current progress.
 
 ## Status and scope
 
@@ -71,11 +71,11 @@ Evidence kinds are `pr`, `test`, `release`, `reference`. Required fields: `id`,
 ## Editing locally and from agents
 
 ```sh
-npx --yes ketatlas@0.2.3 serve atlas.json
-npx --yes ketatlas@0.2.3 serve atlas.json --read-only
-npx --yes ketatlas@0.2.3 progress atlas.json --init
-npx --yes ketatlas@0.2.3 progress atlas.json --json
-npx --yes ketatlas@0.2.3 progress atlas.json --set sign-in --record record.json --expect REVISION_FROM_READ
+npx --yes ketatlas@0.2.5 serve atlas.json
+npx --yes ketatlas@0.2.5 serve atlas.json --read-only
+npx --yes ketatlas@0.2.5 progress atlas.json --init
+npx --yes ketatlas@0.2.5 progress atlas.json --json
+npx --yes ketatlas@0.2.5 progress atlas.json --set sign-in --record record.json --expect REVISION_FROM_READ
 ```
 
 `--init` explicitly creates Unassessed records and refuses an existing progress file. `--set` replaces one complete screen record; preserve existing checklist IDs, evidence and state references. Read the revision with `--json` first. Do not retry a stale revision by blindly substituting a new one: reload and reconcile changes. `updatedAt` is stamped on successful record writes.

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "ketatlas",
-  "version": "0.2.3",
+  "version": "0.2.5",
   "description": "Interactive HTML maps for screens, workflows, and user journeys.",
   "type": "module",
   "license": "MIT",

package/skills/ketatlas/SKILL.md

@@ -142,4 +142,4 @@ When implementing or reviewing screens, track progress in the sibling `<atlas-na
 
 Map task scope to screen IDs before assigning progress. Start unknown coverage at `unassessed`; a mockup is not implementation evidence. Use `planned`, `in_progress`, `in_review`, `implemented`, `verified` with a separate blocker reason/next action. Link PRs and exact merge commits, pin/release evidence, and test evidence at the revision/environment actually checked. Do not infer deployment, full screen coverage or verification from a PR merge or green aggregate CI. Completed acceptance checks need evidence; `verified` requires passed test evidence with revision and environment for every recorded check and no blocker. Track error/recovery states using check `nodes` references. Leave unrelated or unreviewed product surfaces unassessed and say why. See `docs/progress.md` in the package for the complete contract.
 
-Sidebar percentages distinguish Verified screens from completed recorded checks. Do not assign arbitrary weights to intermediate statuses or remove unknown/unscoped screens to inflate completion. Workflow counts deduplicate screen IDs, including variants; process-only flows have no screen percentage.
+Sidebar badges show Checks (completed recorded checks / all recorded checks) and Implemented (Implemented + Verified screens / all unique screens). No recorded checks shows — for Checks. Verified-screen completion stays separate on the project top bar. Do not assign arbitrary weights to intermediate statuses or remove unknown/unscoped screens to inflate completion. Workflow counts deduplicate screen IDs, including variants; process-only flows have no screen percentage.

package/src/index.js

@@ -136,7 +136,7 @@ export function createAtlas(container, input, options = {}) {
               ).includes(q),
           );
           return matches.length
-            ? `<section><h2 class="flow-group-title">${e(group)}</h2>${matches.map((f) => `<button class="flow-link ${f === current ? "active" : ""}" data-flow="${f.id}" ${f === current ? 'aria-current="true"' : ""}><span class="flow-number">${String(f.index + 1).padStart(2, "0")}</span><span class="flow-link-copy"><strong>${e(f.title)}</strong><small>${f.nodes.length} steps <span class="flow-progress" data-progress-flow="${f.id}"></span></small></span></button>`).join("")}</section>`
+            ? `<section><h2 class="flow-group-title">${e(group)}</h2>${matches.map((f) => `<button class="flow-link ${f === current ? "active" : ""}" data-flow="${f.id}" ${f === current ? 'aria-current="true"' : ""}><span class="flow-number">${String(f.index + 1).padStart(2, "0")}</span><span class="flow-link-copy"><strong>${e(f.title)}</strong><small>${f.nodes.length} steps <span class="flow-progress-group" data-progress-flow="${f.id}"></span></small></span></button>`).join("")}</section>`
             : "";
         })
         .join("") || '<p class="mock-filter-empty">No matching workflows.</p>';

package/src/progress-ui.js

@@ -58,15 +58,35 @@ export function mountProgress(root, config, initial, options, selectScreen) {
         .map(([key, label]) => `${summary.counts[key]} ${label.toLowerCase()}`)
         .join(" · ");
       const checks = summary.checks;
-      const details = `${summary.verifiedPercent}% verified · ${summary.counts.verified}/${summary.total} screens. ${statuses}${summary.blocked ? ` · ${summary.blocked} blocked` : ""}. ${checks.total ? `Checks ${checks.percent}% · ${checks.done}/${checks.total}` : "No checks recorded"}${checks.unscoped ? ` · ${checks.unscoped} unscoped` : ""}.`;
+      const implemented = summary.counts.implemented + summary.counts.verified;
+      const implementedPercent = Math.floor((implemented / summary.total) * 100);
+      const details = `${checks.total ? `Checks ${checks.percent}% · ${checks.done}/${checks.total}. ` : "No checks recorded. "}${summary.verifiedPercent}% verified · ${summary.counts.verified}/${summary.total} screens. ${statuses}${summary.blocked ? ` · ${summary.blocked} blocked` : ""}${checks.unscoped ? ` · ${checks.unscoped} unscoped` : ""}.`;
       if (project) {
         el.innerHTML = `<span><b>${summary.verifiedPercent}%</b> verified</span><span><b>${checks.percent ?? "—"}${checks.percent === null ? "" : "%"}</b> checks</span>${summary.blocked ? `<span class="project-blocked"><b>${summary.blocked}</b> blocked</span>` : ""}`;
-      } else el.textContent = `${summary.verifiedPercent}%`;
+      } else {
+        const metric = (name, label, percent, description) =>
+          `<span class="flow-progress" data-metric="${name}" data-tone="${summary.blocked ? "blocked" : percent === 100 ? "complete" : "pending"}" title="${e(description)}" aria-label="${e(description)}">${percent === null ? "—" : `${percent}%`} ${label}</span>`;
+        el.innerHTML =
+          metric(
+            "checks",
+            "checks",
+            checks.percent,
+            checks.total
+              ? `Checks ${checks.percent}%: ${checks.done}/${checks.total} recorded checks completed`
+              : "Checks: no recorded checklist",
+          ) +
+          metric(
+            "implemented",
+            "impl.",
+            implementedPercent,
+            `Implemented ${implementedPercent}%: ${implemented}/${summary.total} screens have Implemented or Verified status`,
+          );
+      }
       el.title = details;
       el.setAttribute("aria-label", details);
       el.dataset.tone = summary.blocked
         ? "blocked"
-        : summary.verifiedPercent === 100
+        : (project ? summary.verifiedPercent : checks.percent) === 100
           ? "complete"
           : "pending";
     }

package/styles/ketatlas.css

@@ -1258,12 +1258,12 @@ a svg {
   width: 100%;
 }
 .progress-editor > .progress-header {
-  position: sticky;
-  top: 0;
+  position: static;
+  flex: none;
   background: var(--kv-panel-bg);
   z-index: 2;
   border-bottom: 1px solid var(--kv-border-default);
-  padding-bottom: var(--kv-space-3);
+  padding: var(--progress-dialog-padding);
 }
 .progress-editor .progress-actions {
   position: sticky;
@@ -1419,3 +1419,34 @@ a svg {
   min-height: 0;
   overflow: auto;
 }
+
+.progress-editor {
+  --progress-dialog-padding: var(--kv-space-6);
+  padding: 0;
+  overflow: hidden;
+}
+.progress-editor[open] {
+  display: flex;
+  flex-direction: column;
+}
+.progress-editor > #progress-form {
+  flex: 1 1 auto;
+  min-height: 0;
+  overflow: auto;
+  padding: 0 var(--progress-dialog-padding) var(--progress-dialog-padding);
+}
+@media (max-width: 760px) {
+  .progress-editor {
+    --progress-dialog-padding: var(--kv-space-3);
+  }
+}
+
+.flow-progress-group {
+  display: inline-flex;
+  align-items: center;
+  gap: var(--kv-space-1);
+  vertical-align: middle;
+}
+.flow-progress-group[hidden] {
+  display: none;
+}

package/templates/basic/README.md

@@ -7,7 +7,7 @@ npx ketatlas serve atlas.json
 npx ketatlas audit atlas.json --strict
 ```
 
-Edit `atlas.json` to change nodes, edges, and screen URLs. Screen URLs are relative to that file. Refresh the browser after editing. No wrapper HTML, package manifest, lockfile, node_modules, or build step is needed. Alternatively, install the CLI once with npm install --global ketatlas@0.2.3 and use ketatlas serve atlas.json.
+Edit `atlas.json` to change nodes, edges, and screen URLs. Screen URLs are relative to that file. Refresh the browser after editing. No wrapper HTML, package manifest, lockfile, node_modules, or build step is needed. Alternatively, install the CLI once with npm install --global ketatlas@0.2.5 and use ketatlas serve atlas.json.
 
 Edit the HTML files in screens/ to replace the sample product. styles/design-system.css is generated from the pinned KetJS design system; do not manually fork its tokens.
 

package/templates/process/README.md

@@ -7,7 +7,7 @@ npx ketatlas serve atlas.json
 npx ketatlas audit atlas.json --strict
 ```
 
-Edit `atlas.json` to change nodes, edges, and screen URLs. Screen URLs are relative to that file. Refresh the browser after editing. No wrapper HTML, package manifest, lockfile, node_modules, or build step is needed. Alternatively, install the CLI once with npm install --global ketatlas@0.2.3 and use ketatlas serve atlas.json.
+Edit `atlas.json` to change nodes, edges, and screen URLs. Screen URLs are relative to that file. Refresh the browser after editing. No wrapper HTML, package manifest, lockfile, node_modules, or build step is needed. Alternatively, install the CLI once with npm install --global ketatlas@0.2.5 and use ketatlas serve atlas.json.
 
 This template models a process without HTML screens. Add a screen registry and screen nodes when needed.
 

package/templates/web/README.md

@@ -7,7 +7,7 @@ npx ketatlas serve atlas.json
 npx ketatlas audit atlas.json --strict
 ```
 
-Edit `atlas.json` to change nodes, edges, and screen URLs. Screen URLs are relative to that file. Refresh the browser after editing. No wrapper HTML, package manifest, lockfile, node_modules, or build step is needed. Alternatively, install the CLI once with npm install --global ketatlas@0.2.3 and use ketatlas serve atlas.json.
+Edit `atlas.json` to change nodes, edges, and screen URLs. Screen URLs are relative to that file. Refresh the browser after editing. No wrapper HTML, package manifest, lockfile, node_modules, or build step is needed. Alternatively, install the CLI once with npm install --global ketatlas@0.2.5 and use ketatlas serve atlas.json.
 
 Edit the HTML files in screens/ to replace the sample product. styles/design-system.css is generated from the pinned KetJS design system; do not manually fork its tokens.