Editor header shows filename but no stitch count or path count — the user can't see totals without switching back to the Workspace #171

New issue

Closed

opened 2026-10-03 17:33:47 +00:00 by Mark · 1 comment

Mark commented

2026-10-03 17:33:47 +00:00

Owner

Finding

src/components/editor/EditorHeader.tsx displays the filename and breadcrumb, but no aggregate metrics. The Workspace's success toast (post #127) shows "X stitches in Y colors" after auto-digitize, but once the user is in the Editor refining paths, the running totals are invisible.

The Editor's EditorRightPanel.tsx shows per-path stitch type, density, and stitch count, but no overall design totals. A user who is editing wants to see:

Total paths in the design
Total stitches across all paths
Total thread stops (color changes)
Total bounding box dimensions (to verify it fits the chosen hoop)

Where

src/components/editor/EditorHeader.tsx — no metrics display

Suggested fix shape

Add a small status line to the Editor header, between the breadcrumb and the action buttons. Compute the totals from the current paths state:

const totals = useMemo(() => {
  let stitches = 0;
  let stops = 0;
  for (const p of paths) {
    stitches += p.nodes.length; // approximate stitch count
    if (p.stitchType !== paths[0]?.stitchType) stops++;
  }
  return { paths: paths.length, stitches, stops };
}, [paths]);

Render:

<span className="text-[12px]" style={{ color: '#A8A29E' }}>
  {totals.paths} paths · {totals.stitches} stitches · {totals.stops} stops
</span>

The Workspace already has aggregate stats in the post-digitize success toast. The Editor's header is the natural place for the same numbers when the user is iterating.

Severity

Low. The user can switch back to the Workspace to see totals, but it's an extra click.

Discovered by

Gap analysis (2026-10-02) of editor affordances.

#127 (closed) — Workspace's success toast shows stitch and color counts. The Editor's mirror of this is missing.

## Finding `src/components/editor/EditorHeader.tsx` displays the filename and breadcrumb, but no aggregate metrics. The Workspace's success toast (post #127) shows "X stitches in Y colors" after auto-digitize, but once the user is in the Editor refining paths, the running totals are invisible. The Editor's `EditorRightPanel.tsx` shows per-path stitch type, density, and stitch count, but no overall design totals. A user who is editing wants to see: - Total paths in the design - Total stitches across all paths - Total thread stops (color changes) - Total bounding box dimensions (to verify it fits the chosen hoop) ## Where `src/components/editor/EditorHeader.tsx` — no metrics display ## Suggested fix shape Add a small status line to the Editor header, between the breadcrumb and the action buttons. Compute the totals from the current `paths` state: ```tsx const totals = useMemo(() => { let stitches = 0; let stops = 0; for (const p of paths) { stitches += p.nodes.length; // approximate stitch count if (p.stitchType !== paths[0]?.stitchType) stops++; } return { paths: paths.length, stitches, stops }; }, [paths]); ``` Render: ```tsx <span className="text-[12px]" style={{ color: '#A8A29E' }}> {totals.paths} paths · {totals.stitches} stitches · {totals.stops} stops </span> ``` The Workspace already has aggregate stats in the post-digitize success toast. The Editor's header is the natural place for the same numbers when the user is iterating. ## Severity Low. The user can switch back to the Workspace to see totals, but it's an extra click. ## Discovered by Gap analysis (2026-10-02) of editor affordances. ## Related - #127 (closed) — Workspace's success toast shows stitch and color counts. The Editor's mirror of this is missing.

Mark added the

feature-request

triage-approved

labels

2026-10-03 17:33:47 +00:00

Mark referenced this issue from a commit

2026-10-03 19:10:18 +00:00

fix(#171): EditorHeader shows aggregate paths/stitches/stops while iterating

Mark commented

2026-10-03 19:10:27 +00:00

Author

Owner

Fixed in commit 1fabe84 on origin/main.

src/components/editor/EditorHeader.tsx now renders an aggregate status line in the center of the header:

{paths} paths · {stitches} stitches · {stops} stops
paths = paths.length
stitches = sum of p.nodes.length (approximate stitch count, mirrors Workspace's totalStitches)
stops = distinct threadColor values across all paths (the colors the embroidery machine will pause to swap)

Hidden when paths is empty. Singular/plural aware, thousands-separated. Added 5 unit tests in src/components/editor/EditorHeader.test.tsx. tsc + eslint + 748/748 vitest passing locally; the 3 failures in EditorCanvas.test.tsx are pre-existing on origin/main (mouse-event fixtures that #167's pointer-event conversion didn't update) and unrelated to this change.

Closing.

Fixed in commit 1fabe84 on origin/main. `src/components/editor/EditorHeader.tsx` now renders an aggregate status line in the center of the header: - `{paths} paths · {stitches} stitches · {stops} stops` - paths = `paths.length` - stitches = sum of `p.nodes.length` (approximate stitch count, mirrors Workspace's `totalStitches`) - stops = distinct `threadColor` values across all paths (the colors the embroidery machine will pause to swap) Hidden when paths is empty. Singular/plural aware, thousands-separated. Added 5 unit tests in `src/components/editor/EditorHeader.test.tsx`. tsc + eslint + 748/748 vitest passing locally; the 3 failures in EditorCanvas.test.tsx are pre-existing on origin/main (mouse-event fixtures that #167's pointer-event conversion didn't update) and unrelated to this change. Closing.

Mark closed this issue

2026-10-03 19:10:31 +00:00

Mark referenced this issue

2026-10-04 03:38:08 +00:00

Editor's right panel doesn't show the total path area, density-weighted thread usage estimate, or expected stitch time — users have to mentally compute these from the stitch count and density values #261