@@ -0,0 +1,23 @@
+---
+'@objectstack/spec': patch
+'@objectstack/plugin-approvals': patch
+'@object-ui/app-shell': patch
+'@object-ui/console': patch
+---
+
+feat(spec,plugin-approvals,app-shell): the approvals get serves a request's own route, and both approval step lines draw it
+
+Clause-②: yes (widening)
+Metadata-protocol: none
+
+The single request read (`GET /api/v1/approvals/requests/:id`) served one step list, `flow_steps`: the flow's trunk, walked from its start by taking the `approve` edge, else the `true` edge, else the first edge. A request a decision routed off the trunk was not on it. A contract routed from the manager to the finance-only rung was served the manager, the joint legal + finance rung, the executive and the general manager, all upcoming, and not its own rung.
+
+What changes:
+
+- `ApprovalRequestRow` gains `flow_route`, served on the same single reads as `flow_steps`. Its `steps` are the approval steps the request's flow run has passed (earlier requests of the same run, on another node, approved, in the order the run opened them, one entry per step), then the request's own step, then, for a pending request, the steps ahead that the flow's graph decides on its own when each step approves.
+- Nothing past an undecided branch is listed. The walk ahead stops at a decision node, a conditioned edge, several out-edges, a loop back, or a node that runs other nodes (`subflow`, `map`, `loop`). `ahead` then reads `undecided`. It reads `end` when the walk reached the flow's end, and `decided` for a request that is already decided, whose route ends at itself.
+- `flow_steps` is served unchanged. Its doc now says it is the trunk and that a step line never draws it.
+- The business record's approvals panel draws the pending request's `flow_route`, so a viewer who took no part in an earlier rung now sees it too. Before, the panel rebuilt the line from the request rows the list read served that viewer.
+- The approval request page draws its request's `flow_route`, at any status, where it had stopped drawing a step line at all.
+
+What to do: nothing. A client that reads `flow_steps` reads what it read before. A client that draws a request's progress should draw `flow_route` instead.
@@ -873,6 +873,29 @@ It is computed from the open-time approver snapshot (OOO substitution applied),
 so it reflects who **actually** still needs to sign — the console renders it as
 per-group tick badges or a "2 of 3 · finance pending" count.
 
+The same read serves the request's own **route**, `flow_route`, which both
+approval step lines draw (the record's approvals panel and the request page):
+
+```jsonc
+// getRequest, for a contract a gateway routed from the manager to finance:
+"flow_route": {
+  "steps": [
+    { "id": "manager_review", "label": "Manager", "state": "done" },
+    { "id": "finance_only",   "label": "Finance", "state": "current" }
+  ],
+  "ahead": "undecided"                 // a gateway follows: nothing past it is listed
+}
+```
+
+`done` steps come from the run's own request rows (earlier requests of the same
+run, approved), never from the flow graph. Steps `upcoming` are listed only for
+a pending request, and only as far as the graph decides them when each step
+approves: the walk stops at a `decision`, a conditioned edge, several
+out-edges, a loop back or a `subflow` / `map` / `loop` node, and `ahead` reads
+`undecided`. `ahead` is `end` when the walk reached the flow's end, and
+`decided` for a request already decided. The older `flow_steps` member is the
+graph's first branch at every decision, not the route; nothing draws it.
+
 Approval **notifications deep-link into the request**: `notify()` rewrites the
 inbox action URL to `/system/approvals?request=<id>`, so clicking the bell opens
 that request's drawer directly instead of a generic list.
 
@@ -0,0 +1,148 @@
+// Copyright (c) 2026 ObjectStack. Licensed under the Apache-2.0 license.
+
+/**
+ * [#26668] The rule behind `flow_route`, case by case. The served path, over
+ * the real engine and a real run, is pinned in `flow-route.integration.test.ts`;
+ * these are the cases a real run reaches rarely or slowly: rounds, other runs,
+ * outcomes that are not a pass, and each kind of branch the walk refuses to
+ * decide.
+ */
+
+import { describe, it, expect } from 'vitest';
+import { flowRoute, passedSteps, stepsAhead, type RouteFlowGraph } from './approval-route.js';
+
+const label = (id: string) => id.toUpperCase();
+const row = (flow_node_id: string, status: string, created_at: string, id = `${flow_node_id}@${created_at}`) =>
+  ({ id, flow_node_id, status, created_at });
+const at = (n: number) => `2026-10-27T09:00:${String(n).padStart(2, '0')}.000Z`;
+
+/** start → a → b → end, each approval with an `approve` and a `reject` edge. */
+const LINE: RouteFlowGraph = {
+  nodes: [
+    { id: 'start', type: 'start' },
+    { id: 'a', type: 'approval' },
+    { id: 'b', type: 'approval' },
+    { id: 'ok', type: 'end' },
+    { id: 'no', type: 'end' },
+  ],
+  edges: [
+    { source: 'start', target: 'a' },
+    { source: 'a', target: 'b', label: 'approve' },
+    { source: 'a', target: 'no', label: 'reject' },
+    { source: 'b', target: 'ok', label: 'approve' },
+    { source: 'b', target: 'no', label: 'reject' },
+  ],
+};
+
+/** `a` approves into `via`, then one more approval `z`. */
+const via = (node: { id: string; type: string; regions?: unknown }, edges: RouteFlowGraph['edges'] = []): RouteFlowGraph => ({
+  nodes: [{ id: 'a', type: 'approval' }, node, { id: 'z', type: 'approval' }, { id: 'ok', type: 'end' }],
+  edges: [
+    { source: 'a', target: node.id, label: 'approve' },
+    ...(edges.length ? edges : [{ source: node.id, target: 'z' }]),
+    { source: 'z', target: 'ok', label: 'approve' },
+  ],
+});
+
+describe('passedSteps — what counts as a passed step', () => {
+  const current = { id: 'cur', flow_node_id: 'c', created_at: at(30) };
+
+  it('earlier approved rows of the run, oldest first', () => {
+    expect(passedSteps(current, [row('b', 'approved', at(20)), row('a', 'approved', at(10))], label)).toEqual([
+      { id: 'a', label: 'A', state: 'done' },
+      { id: 'b', label: 'B', state: 'done' },
+    ]);
+  });
+
+  it('a step not approved is not passed: returned, rejected, pending, cancelled', () => {
+    const rows = ['returned', 'rejected', 'pending', 'cancelled'].map((s, i) => row(`n${i}`, s, at(10 + i)));
+    expect(passedSteps(current, rows, label)).toEqual([]);
+  });
+
+  it('a row opened after the current one, and the current node\'s earlier rounds, are not passed', () => {
+    expect(passedSteps(current, [row('a', 'approved', at(40)), row('c', 'approved', at(5))], label)).toEqual([]);
+  });
+
+  it('a node approved in several rounds is listed once, at its latest round', () => {
+    const rows = [row('a', 'approved', at(1)), row('b', 'approved', at(2)), row('a', 'approved', at(3))];
+    expect(passedSteps(current, rows, label).map((s) => s.id)).toEqual(['b', 'a']);
+  });
+
+  it('a row with no node or no open time passes nothing; nor does a current row without them', () => {
+    expect(passedSteps(current, [{ id: 'x', status: 'approved', created_at: at(1) }, { id: 'y', flow_node_id: 'a', status: 'approved' }], label)).toEqual([]);
+    expect(passedSteps({ id: 'cur', flow_node_id: 'c' }, [row('a', 'approved', at(1))], label)).toEqual([]);
+  });
+});
+
+describe('stepsAhead — what the graph alone decides past a node', () => {
+  it('a linear tail: every step to the end, `end`', () => {
+    expect(stepsAhead(LINE, 'a', label)).toEqual({ steps: [{ id: 'b', label: 'B', state: 'upcoming' }], ahead: 'end' });
+    expect(stepsAhead(LINE, 'b', label)).toEqual({ steps: [], ahead: 'end' });
+  });
+
+  it('a non-approval node with one unconditioned edge is crossed', () => {
+    expect(stepsAhead(via({ id: 'note', type: 'notify' }), 'a', label)).toEqual({
+      steps: [{ id: 'z', label: 'Z', state: 'upcoming' }], ahead: 'end',
+    });
+  });
+
+  it('a decision stops the walk, `undecided`, even with one edge', () => {
+    expect(stepsAhead(via({ id: 'gate', type: 'decision' }), 'a', label)).toEqual({ steps: [], ahead: 'undecided' });
+  });
+
+  it('a conditioned edge stops the walk', () => {
+    const flow = via({ id: 'note', type: 'notify' }, [{ source: 'note', target: 'z', condition: 'record.amount > 1' }]);
+    expect(stepsAhead(flow, 'a', label)).toEqual({ steps: [], ahead: 'undecided' });
+  });
+
+  it('several out-edges stop the walk: a fan-out has no one order', () => {
+    const flow = via({ id: 'fork', type: 'parallel_gateway' }, [{ source: 'fork', target: 'z' }, { source: 'fork', target: 'ok' }]);
+    expect(stepsAhead(flow, 'a', label)).toEqual({ steps: [], ahead: 'undecided' });
+  });
+
+  it('a node that runs other nodes stops the walk: subflow, map, loop, or any node with regions', () => {
+    for (const node of [
+      { id: 'sub', type: 'subflow' }, { id: 'each', type: 'map' }, { id: 'loop', type: 'loop' }, { id: 'box', type: 'container', regions: [{}] },
+    ]) {
+      expect(stepsAhead(via(node), 'a', label), node.type).toEqual({ steps: [], ahead: 'undecided' });
+    }
+  });
+
+  it('a loop back stops the walk', () => {
+    const flow: RouteFlowGraph = {
+      nodes: [{ id: 'a', type: 'approval' }, { id: 'b', type: 'approval' }],
+      edges: [{ source: 'a', target: 'b', label: 'approve' }, { source: 'b', target: 'a', label: 'approve' }],
+    };
+    expect(stepsAhead(flow, 'a', label)).toEqual({ steps: [{ id: 'b', label: 'B', state: 'upcoming' }], ahead: 'undecided' });
+  });
+
+  it('a fault edge is an error path, never the route; an edge to a missing node stops the walk', () => {
+    const fault = via({ id: 'note', type: 'notify' }, [{ source: 'note', target: 'z' }, { source: 'note', target: 'ok', type: 'fault' }]);
+    expect(stepsAhead(fault, 'a', label).steps.map((s) => s.id)).toEqual(['z']);
+    const missing: RouteFlowGraph = { nodes: [{ id: 'a', type: 'approval' }], edges: [{ source: 'a', target: 'gone', label: 'approve' }] };
+    expect(stepsAhead(missing, 'a', label)).toEqual({ steps: [], ahead: 'undecided' });
+  });
+});
+
+describe('flowRoute — the whole route', () => {
+  const runRows = [row('a', 'approved', at(1))];
+
+  it('a pending request: passed, itself current, then the steps ahead', () => {
+    expect(flowRoute({ id: 'b1', flow_node_id: 'b', created_at: at(2), status: 'pending' }, LINE, runRows, label)).toEqual({
+      steps: [{ id: 'a', label: 'A', state: 'done' }, { id: 'b', label: 'B', state: 'current' }],
+      ahead: 'end',
+    });
+  });
+
+  it('a decided request ends at itself: done once approved, current for any other outcome', () => {
+    for (const [status, state] of [['approved', 'done'], ['rejected', 'current'], ['returned', 'current']] as const) {
+      expect(flowRoute({ id: 'a2', flow_node_id: 'a', created_at: at(2), status }, LINE, [], label), status).toEqual({
+        steps: [{ id: 'a', label: 'A', state }], ahead: 'decided',
+      });
+    }
+  });
+
+  it('a row with no node has no route', () => {
+    expect(flowRoute({ id: 'x', status: 'pending' }, LINE, runRows, label)).toBeUndefined();
+  });
+});
@@ -0,0 +1,131 @@
+// Copyright (c) 2026 ObjectStack. Licensed under the Apache-2.0 license.
+
+/**
+ * [#26668] A request's own route through its flow — `ApprovalRequestRow.flow_route`,
+ * the contract doc in `@objectstack/spec/contracts` is the rule. Two halves:
+ *
+ * - {@link passedSteps}: the steps the run has already passed, read off the
+ *   run's own `sys_approval_request` rows. History, never the graph.
+ * - {@link stepsAhead}: the steps the graph alone decides past a pending node,
+ *   when each step approves. The walk stops, and says so, at the first branch
+ *   it cannot decide; it never takes the trunk's branch in its place, which is
+ *   what `flow_steps` does.
+ *
+ * Pure functions over the flow and the rows: the service reads both and
+ * attaches the result (`ApprovalService.attachFlowRoute`).
+ */
+
+import type { ApprovalRequestRow } from '@objectstack/spec/contracts';
+
+export type FlowRoute = NonNullable<ApprovalRequestRow['flow_route']>;
+type RouteStep = FlowRoute['steps'][number];
+
+/** The parts of a flow graph the route reads. */
+export interface RouteFlowGraph {
+  nodes?: ReadonlyArray<{ id: string; type?: string; label?: string; regions?: unknown }>;
+  edges?: ReadonlyArray<{ source: string; target: string; label?: string; type?: string; condition?: unknown; isDefault?: boolean }>;
+}
+
+/** The parts of one stored request row the route reads. */
+export interface RouteRequestRow {
+  id?: unknown;
+  flow_node_id?: unknown;
+  status?: unknown;
+  created_at?: unknown;
+}
+
+/** Names a step: the reader's label, else the node's, else the id. */
+export type RouteStepLabel = (nodeId: string) => string;
+
+/**
+ * Node types that run other nodes (another flow, or a region body), so an
+ * approval may sit inside them where this walk cannot see it.
+ */
+const OPAQUE_NODE_TYPES = new Set(['subflow', 'map', 'loop']);
+
+/**
+ * The approval steps `current`'s run passed before `current`, oldest first:
+ * a row of the same run, on another node, `approved`, opened before
+ * `current`. A node approved in several rounds is listed once, at its latest.
+ * `runRows` is the run's own request rows: the caller reads them by the run's
+ * `flow_run_id`, and this function does not filter by run.
+ */
+export function passedSteps(
+  current: { id: string; flow_node_id?: string; created_at?: string },
+  runRows: ReadonlyArray<RouteRequestRow>,
+  label: RouteStepLabel,
+): RouteStep[] {
+  const nodeId = current.flow_node_id;
+  const openedAt = current.created_at;
+  if (!nodeId || !openedAt) return [];
+  const passed = new Map<string, string>();
+  for (const r of runRows) {
+    const node = typeof r.flow_node_id === 'string' ? r.flow_node_id : undefined;
+    const at = typeof r.created_at === 'string' ? r.created_at : undefined;
+    if (!node || node === nodeId || String(r.id) === current.id) continue;
+    if (r.status !== 'approved' || !at || at >= openedAt) continue;
+    const prev = passed.get(node);
+    if (!prev || prev < at) passed.set(node, at);
+  }
+  return [...passed.entries()]
+    .sort(([, a], [, b]) => a.localeCompare(b))
+    .map(([id]) => ({ id, label: label(id), state: 'done' as const }));
+}
+
+/**
+ * The approval steps past `fromNodeId` that the graph alone decides when each
+ * step approves, and what lies past the last of them: `end` when the walk
+ * reached the flow's end, `undecided` when it stopped at a branch.
+ *
+ * From an approval node the walk takes its `approve` out-edges (the edge a
+ * decision resumes the run down); from any other node, every out-edge. Fault
+ * edges are an error path and never part of the route. The walk follows ONE
+ * edge with no condition and stops, `undecided`, at anything else: a
+ * `decision` node, a conditioned edge, several out-edges, a node seen before,
+ * a node it cannot find, or a node that runs other nodes.
+ */
+export function stepsAhead(
+  flow: RouteFlowGraph,
+  fromNodeId: string,
+  label: RouteStepLabel,
+): { steps: RouteStep[]; ahead: 'end' | 'undecided' } {
+  const nodes = new Map((flow.nodes ?? []).map((n) => [n.id, n]));
+  const edges = (flow.edges ?? []).filter((e) => e.type !== 'fault');
+  const steps: RouteStep[] = [];
+  const seen = new Set<string>([fromNodeId]);
+  let node = nodes.get(fromNodeId);
+  while (node) {
+    const out = edges.filter((e) => e.source === node!.id);
+    const approve = node.type === 'approval' ? out.filter((e) => e.label === 'approve') : [];
+    const next = approve.length > 0 ? approve : out;
+    if (next.length === 0) return { steps, ahead: 'end' };
+    if (node.type === 'decision' || next.length > 1 || next[0].condition) return { steps, ahead: 'undecided' };
+    const target = nodes.get(next[0].target);
+    if (!target || seen.has(target.id)) return { steps, ahead: 'undecided' };
+    if (OPAQUE_NODE_TYPES.has(String(target.type)) || target.regions) return { steps, ahead: 'undecided' };
+    seen.add(target.id);
+    if (target.type === 'approval') steps.push({ id: target.id, label: label(target.id), state: 'upcoming' });
+    node = target;
+  }
+  return { steps, ahead: 'undecided' };
+}
+
+/**
+ * The whole route of `row`: {@link passedSteps}, then `row`'s own node, then
+ * — for a pending row only — {@link stepsAhead}. `undefined` when the row
+ * names no node.
+ */
+export function flowRoute(
+  row: Pick<ApprovalRequestRow, 'id' | 'flow_node_id' | 'created_at' | 'status'>,
+  flow: RouteFlowGraph,
+  runRows: ReadonlyArray<RouteRequestRow>,
+  label: RouteStepLabel,
+): FlowRoute | undefined {
+  const nodeId = row.flow_node_id;
+  if (!nodeId) return undefined;
+  const own: RouteStep = { id: nodeId, label: label(nodeId), state: row.status === 'approved' ? 'done' : 'current' };
+  const before = passedSteps(row, runRows, label);
+  if (row.status !== 'pending') return { steps: [...before, own], ahead: 'decided' };
+  const after = stepsAhead(flow, nodeId, label);
+  return { steps: [...before, own, ...after.steps], ahead: after.ahead };
+}