@burdenoff/microfe-movethewheels 2026.930.4 → 2026.1010.1

package/src/movethewheels/pages/EmptyReusePage.tsx

@@ -0,0 +1,823 @@
+import { reuseText } from '../utils/reuseForm';
+import { useState } from 'react';
+import { Repeat2 } from 'lucide-react';
+import { PageLayout } from '../components/PageLayout';
+import { Button } from '../components/ui';
+import {
+  PinnedSelect,
+  ReuseField,
+  ReusePager,
+  ReuseState,
+  reuseCard,
+} from '../components/ReuseControls';
+import { ReturnInstructionForm } from '../components/ReturnInstructionForm';
+import { ReuseProposalForm } from '../components/ReuseProposalForm';
+import { ReusePermissionForm } from '../components/ReusePermissionForm';
+import { useConditionQuery } from '../hooks/useContainerCondition';
+import { useReuseRecoveryAction } from '../hooks/useReuseRecoveryAction';
+import {
+  ReuseContainersDocument,
+  ReuseCyclesDocument,
+  ReturnInstructionsDocument,
+  BoundReturnInstructionDocument,
+  ReuseProposalsDocument,
+  ReuseApprovalsDocument,
+  ReuseEligibilityDocument,
+  ReuseReservationsDocument,
+  ReuseReservationTransitionsDocument,
+  RecordReturnInstructionDocument,
+  RecordReuseProposalDocument,
+  RecordReuseApprovalDocument,
+  AcceptReuseReservationDocument,
+  TerminateReuseReservationDocument,
+  type ReuseContainersQuery,
+  type ReuseCyclesQuery,
+  type ReturnInstructionsQuery,
+  type BoundReturnInstructionQuery,
+  type ReuseProposalsQuery,
+  type ReuseApprovalsQuery,
+  type ReuseEligibilityQuery,
+  type ReuseReservationsQuery,
+  type ReuseReservationTransitionsQuery,
+  type ReturnInstructionFieldsFragment,
+  type ReuseProposalFieldsFragment,
+  type ReuseApprovalFieldsFragment,
+  type ReuseReservationFieldsFragment,
+  type RecordReturnInstructionMutation,
+  type RecordReuseProposalMutation,
+  type RecordReuseApprovalMutation,
+  type AcceptReuseReservationMutation,
+  type TerminateReuseReservationMutation,
+} from '../../generated/empty-reuse-operations';
+
+type ContainerRow = ReuseContainersQuery['mtwContainerPage']['items'][number];
+type CycleRow = ReuseCyclesQuery['mtwContainerCyclePage']['items'][number];
+const page = (offset: number) => ({ limit: 25, offset });
+function EvidenceHistory({
+  evidence,
+}: {
+  evidence: { fileId: string; versionId: string; sha256Hash: string; checkedAt: string }[];
+}) {
+  return (
+    <details>
+      <summary>Exact evidence versions ({evidence.length})</summary>
+      <ul className="space-y-2 text-xs">
+        {evidence.map((item) => (
+          <li key={item.versionId} className="break-all">
+            File {item.fileId}; version {item.versionId}; SHA256 {item.sha256Hash}; checked{' '}
+            {item.checkedAt}
+          </li>
+        ))}
+      </ul>
+    </details>
+  );
+}
+function ProposalHistory({ row }: { row: ReuseProposalFieldsFragment }) {
+  return (
+    <details className="space-y-2 text-sm">
+      <summary>Inspect immutable planning revision</summary>
+      <p>
+        Actual event {row.emptyEventId}; condition {row.inspectionId}; instruction{' '}
+        {row.instructionId}; route {row.transportRouteId}, updated {row.transportRouteUpdatedAt}.
+      </p>
+      <p>
+        Export booking {row.exportBookingReference}; recipient {row.exporterReference}; handoff{' '}
+        {row.handoffLocationReference}: {row.handoffFrom}–{row.handoffUntil}. Equipment{' '}
+        {row.requiredEquipmentType}; cargo {row.cargoCategory}.
+      </p>
+      <p>
+        Proposal scope fingerprint:{' '}
+        <span className="break-all">{row.assessment.scopeFingerprint}</span>. Qualification{' '}
+        {row.assessment.conditionQualificationId ?? 'UNKNOWN'}, version{' '}
+        {row.assessment.conditionQualificationVersion ?? 'UNKNOWN'}.
+      </p>
+      {Object.entries(row.assessment.sources)
+        .filter(([name]) => name !== '__typename')
+        .map(([name, source]) => (
+          <div key={name} className="rounded border p-3">
+            <strong>{name}</strong>
+            {source && typeof source === 'object' && 'sourceReference' in source ? (
+              <>
+                <p>
+                  {source.purpose}: {source.sourceReference}, revision {source.sourceRevision};
+                  observed {source.observedAt}; valid {source.validFrom}–{source.validUntil};
+                  recorded {source.recordedAt} by {source.recordedByActorId}.
+                </p>
+                <p className="break-all">Purpose scope: {source.scopeFingerprint}</p>
+                <EvidenceHistory evidence={source.evidence} />
+              </>
+            ) : (
+              <p>UNKNOWN: no purpose-specific source</p>
+            )}
+          </div>
+        ))}
+      <p>
+        Timing{' '}
+        {row.assessment.timing
+          ? `departure ${row.assessment.timing.departureAt}, travel ≤${row.assessment.timing.maxTravelSeconds}s, wait ≤${row.assessment.timing.maxWaitSeconds}s, full leg ≤${row.assessment.timing.maxFullReuseAndReturnSeconds}s; return ${row.assessment.timing.plannedReturnFrom}–${row.assessment.timing.plannedReturnUntil}`
+          : 'UNKNOWN'}
+        . Route binding{' '}
+        {row.assessment.routeBinding
+          ? `waypoints ${row.assessment.routeBinding.handoffWaypointIndex} → ${row.assessment.routeBinding.returnWaypointIndex}`
+          : 'UNKNOWN'}
+        .
+      </p>
+      <EvidenceHistory evidence={row.evidence} />
+    </details>
+  );
+}
+export default function EmptyReusePage() {
+  const mutations = useReuseRecoveryAction();
+  return (
+    <PageLayout
+      title="Empty return and reuse planning"
+      subtitle="Sourced obligations, planning revisions and separate dispatch-review reservations."
+      icon={<Repeat2 aria-hidden="true" />}
+    >
+      <ReuseWorkbench key={mutations.contextKey} mutations={mutations} />
+    </PageLayout>
+  );
+}
+function ReuseWorkbench({ mutations }: { mutations: ReturnType<typeof useReuseRecoveryAction> }) {
+  const [container, setContainer] = useState<ContainerRow | null>(null);
+  const [selectedCycle, setSelectedCycle] = useState<{ row: CycleRow; offset: number } | null>(
+    null
+  );
+  const [containerOffset, setContainerOffset] = useState(0);
+  const [cycleOffset, setCycleOffset] = useState(0);
+  const [instructionOffset, setInstructionOffset] = useState(0);
+  const [proposalOffset, setProposalOffset] = useState(0);
+  const [approvalOffset, setApprovalOffset] = useState(0);
+  const [reservationOffset, setReservationOffset] = useState(0);
+  const [instruction, setInstruction] = useState<ReturnInstructionFieldsFragment | null>(null);
+  const [proposal, setProposal] = useState<ReuseProposalFieldsFragment | null>(null);
+  const [approval, setApproval] = useState<ReuseApprovalFieldsFragment | null>(null);
+  const [selectedReservation, setReservation] = useState<ReuseReservationFieldsFragment | null>(
+    null
+  );
+  const [selectedReservationOffset, setSelectedReservationOffset] = useState(0);
+  const [transitionOffset, setTransitionOffset] = useState(0);
+  const [action, setAction] = useState<'instruction' | 'draft' | 'revise' | 'permission'>(
+    'instruction'
+  );
+  const [reviewCount, setReviewCount] = useState(0);
+  const [error, setError] = useState<string | null>(null);
+  const cycleId = selectedCycle?.row.id ?? '';
+  const containers = useConditionQuery<ReuseContainersQuery>(
+    ReuseContainersDocument,
+    { pagination: page(containerOffset) },
+    mutations.revision
+  );
+  const cycles = useConditionQuery<ReuseCyclesQuery>(
+    ReuseCyclesDocument,
+    container ? { containerId: container.id, pagination: page(cycleOffset) } : null,
+    mutations.revision
+  );
+  const pinnedCyclePage = useConditionQuery<ReuseCyclesQuery>(
+    ReuseCyclesDocument,
+    container && selectedCycle && selectedCycle.offset !== cycleOffset
+      ? { containerId: container.id, pagination: page(selectedCycle.offset) }
+      : null,
+    mutations.revision
+  );
+  const cycle = (
+    selectedCycle?.offset === cycleOffset ? cycles.data : pinnedCyclePage.data
+  )?.mtwContainerCyclePage.items.find((item) => item.id === cycleId);
+  const instructions = useConditionQuery<ReturnInstructionsQuery>(
+    ReturnInstructionsDocument,
+    cycleId ? { cycleId, pagination: page(instructionOffset) } : null,
+    mutations.revision
+  );
+  const currentInstructions = useConditionQuery<ReturnInstructionsQuery>(
+    ReturnInstructionsDocument,
+    cycleId && instructionOffset !== 0 ? { cycleId, pagination: { limit: 1, offset: 0 } } : null,
+    mutations.revision
+  );
+  const currentInstruction = (
+    instructionOffset === 0 ? instructions.data : currentInstructions.data
+  )?.mtwEmptyReturnInstructionPage.items[0];
+  const boundInstruction = useConditionQuery<BoundReturnInstructionQuery>(
+    BoundReturnInstructionDocument,
+    proposal ? { id: proposal.instructionId } : null,
+    mutations.revision
+  );
+  const proposalInstruction = boundInstruction.data?.mtwEmptyReturnInstruction;
+  const proposals = useConditionQuery<ReuseProposalsQuery>(
+    ReuseProposalsDocument,
+    cycleId ? { cycleId, pagination: page(proposalOffset) } : null,
+    mutations.revision
+  );
+  const approvals = useConditionQuery<ReuseApprovalsQuery>(
+    ReuseApprovalsDocument,
+    proposal ? { proposalId: proposal.id, pagination: page(approvalOffset) } : null,
+    mutations.revision
+  );
+  const reservations = useConditionQuery<ReuseReservationsQuery>(
+    ReuseReservationsDocument,
+    cycleId ? { cycleId, pagination: page(reservationOffset) } : null,
+    mutations.revision
+  );
+  const pinnedReservationPage = useConditionQuery<ReuseReservationsQuery>(
+    ReuseReservationsDocument,
+    selectedReservation && selectedReservationOffset !== reservationOffset
+      ? { cycleId, pagination: page(selectedReservationOffset) }
+      : null,
+    mutations.revision
+  );
+  const reservation = (
+    selectedReservationOffset === reservationOffset ? reservations.data : pinnedReservationPage.data
+  )?.mtwReuseReservationPage.items.find((item) => item.id === selectedReservation?.id);
+  const transitions = useConditionQuery<ReuseReservationTransitionsQuery>(
+    ReuseReservationTransitionsDocument,
+    selectedReservation
+      ? { reservationId: selectedReservation.id, pagination: page(transitionOffset) }
+      : null,
+    mutations.revision
+  );
+  const eligibility = useConditionQuery<ReuseEligibilityQuery>(
+    ReuseEligibilityDocument,
+    proposal && reviewCount ? { proposalId: proposal.id, approvalId: approval?.id } : null,
+    mutations.revision + reviewCount
+  );
+  const assessment = eligibility.data?.mtwReuseEligibility;
+  const clearPlanning = () => {
+    setInstruction(null);
+    setProposal(null);
+    setApproval(null);
+    setReservation(null);
+    setTransitionOffset(0);
+    setSelectedReservationOffset(0);
+    setInstructionOffset(0);
+    setProposalOffset(0);
+    setApprovalOffset(0);
+    setReservationOffset(0);
+    setReviewCount(0);
+    setError(null);
+    setAction('instruction');
+  };
+  const selectProposal = (row: ReuseProposalFieldsFragment | null) => {
+    setProposal(row);
+    setApproval(null);
+    setApprovalOffset(0);
+    setReviewCount(0);
+    setAction('revise');
+    setError(null);
+  };
+  const requireCycle = () => {
+    if (mutations.uncertain)
+      throw new Error('Resolve the original request before starting another.');
+    if (!cycle || cycle.status !== 'OPEN')
+      throw new Error('Refresh and select a current open usage cycle.');
+    return cycle;
+  };
+  const approvalRows = approvals.data?.mtwEquipmentReuseApprovalPage.items ?? [];
+  const pinnedApprovalRows =
+    approval && !approvalRows.some((item) => item.id === approval.id)
+      ? [approval, ...approvalRows]
+      : approvalRows;
+  return (
+    <div className="space-y-6">
+      <p className="rounded-lg border p-4 text-sm">
+        Planning only. A sourced grant does not reserve equipment. Readiness is a point-in-time
+        server review of named constraints; a separate reservation rechecks current records. No
+        street-turn execution, depot-return event, cargo completion or free-time clock stop is
+        recorded here.
+      </p>
+      <section className={reuseCard} aria-label="Choose equipment and usage cycle">
+        <PinnedSelect
+          label="Physical container"
+          value={container?.id ?? ''}
+          disabled={mutations.busy}
+          onChange={(id) => {
+            setContainer(
+              containers.data?.mtwContainerPage.items.find((item) => item.id === id) ?? null
+            );
+            setSelectedCycle(null);
+            setCycleOffset(0);
+            clearPlanning();
+          }}
+          options={
+            containers.data?.mtwContainerPage.items.map((item) => ({
+              id: item.id,
+              label: `${item.containerNumber} — ${item.equipmentType} — ${item.ownerName ?? 'Owner unrecorded'}`,
+            })) ?? []
+          }
+        />
+        <ReuseState {...containers} />
+        <ReusePager
+          page={containers.data?.mtwContainerPage}
+          offset={containerOffset}
+          onChange={setContainerOffset}
+          busy={containers.loading || mutations.busy}
+        />
+        <PinnedSelect
+          label="Usage cycle"
+          value={cycleId}
+          disabled={!container || mutations.busy}
+          onChange={(id) => {
+            const row = cycles.data?.mtwContainerCyclePage.items.find((item) => item.id === id);
+            setSelectedCycle(row ? { row, offset: cycleOffset } : null);
+            clearPlanning();
+          }}
+          options={
+            cycles.data?.mtwContainerCyclePage.items.map((item) => ({
+              id: item.id,
+              label: `${item.bookingReference ?? item.id} — ${item.status} — v${item.version}`,
+            })) ?? []
+          }
+        />
+        <ReuseState {...cycles} />
+        <ReuseState {...pinnedCyclePage} />
+        <ReusePager
+          page={cycles.data?.mtwContainerCyclePage}
+          offset={cycleOffset}
+          onChange={setCycleOffset}
+          busy={cycles.loading || mutations.busy}
+        />
+        {selectedCycle && (
+          <p>
+            Selected cycle {cycleId}:{' '}
+            {cycle
+              ? `${cycle.status}, current version ${cycle.version}`
+              : 'Current revision unavailable; writes blocked until refresh.'}
+          </p>
+        )}
+        <Button
+          type="button"
+          variant="outline"
+          disabled={mutations.busy || mutations.uncertain}
+          onClick={() => {
+            mutations.refresh();
+            setError(null);
+          }}
+        >
+          Refresh current records
+        </Button>
+      </section>
+      {cycleId && (
+        <>
+          <section className={reuseCard} aria-label="Return instruction history">
+            <h2 className="text-lg font-semibold">Sourced return instructions</h2>
+            <p>
+              Current instruction{' '}
+              {currentInstruction
+                ? `v${currentInstruction.version}: ${currentInstruction.locationReference}`
+                : 'not loaded / not recorded'}
+              . Earlier versions remain immutable.
+            </p>
+            <ReuseState {...instructions} />
+            <ReuseState {...currentInstructions} />
+            {instructions.data?.mtwEmptyReturnInstructionPage.items.map((row) => (
+              <article key={row.id} className="space-y-2 rounded border p-3 text-sm">
+                <p>
+                  v{row.version} — {row.ownerReference} — booking {row.bookingReference}; depot{' '}
+                  {row.depotReference}, location {row.locationReference}.
+                </p>
+                <p>
+                  {row.returnFrom}–{row.returnUntil}; effective {row.effectiveAt}; recorded{' '}
+                  {row.recordedAt}.
+                </p>
+                <p>
+                  Instruction id {row.id}; source {row.sourceReference}; reason {row.changeReason};
+                  supersedes {row.supersedesInstructionId ?? 'none'}.
+                </p>
+                <EvidenceHistory evidence={row.evidence} />
+                <Button
+                  type="button"
+                  variant="outline"
+                  disabled={mutations.busy || mutations.uncertain}
+                  onClick={() => setInstruction(row)}
+                >
+                  Inspect/select instruction v{row.version}
+                </Button>
+              </article>
+            ))}
+            <ReusePager
+              page={instructions.data?.mtwEmptyReturnInstructionPage}
+              offset={instructionOffset}
+              onChange={setInstructionOffset}
+              busy={instructions.loading || mutations.busy}
+            />
+            {instruction && (
+              <p className="break-words">
+                Pinned history selection: v{instruction.version}, {instruction.locationReference};
+                id{instruction.id}. Drafts use the separately loaded current instruction.
+              </p>
+            )}
+          </section>
+          <section className={reuseCard} aria-label="Planning proposal history">
+            <h2 className="text-lg font-semibold">Immutable planning revisions</h2>
+            <ReuseState {...proposals} />
+            {proposals.data?.mtwReuseProposalPage.items.map((row) => (
+              <article key={row.id} className="space-y-3 rounded border p-3">
+                <p>
+                  {row.proposalReference} — revision{row.revision}, recorded {row.recordedAt}
+                </p>
+                <ProposalHistory row={row} />
+                <Button
+                  type="button"
+                  variant="outline"
+                  disabled={mutations.busy || mutations.uncertain}
+                  onClick={() => selectProposal(row)}
+                >
+                  Select revision{row.revision}
+                </Button>
+              </article>
+            ))}
+            <ReusePager
+              page={proposals.data?.mtwReuseProposalPage}
+              offset={proposalOffset}
+              onChange={setProposalOffset}
+              busy={proposals.loading || mutations.busy}
+            />
+            {proposal && (
+              <div className="rounded border p-3">
+                <p>
+                  Pinned selection {proposal.proposalReference}, revision{proposal.revision}, id
+                  {proposal.id}.
+                </p>
+                <ProposalHistory row={proposal} />
+              </div>
+            )}
+          </section>
+          <section className={reuseCard} aria-label="Record planning evidence">
+            <h2 className="text-lg font-semibold">Record planning evidence</h2>
+            <PinnedSelect
+              label="Planning action"
+              value={action}
+              disabled={mutations.busy || mutations.uncertain}
+              onChange={(value) => {
+                const next = (['instruction', 'draft', 'revise', 'permission'] as const).find(
+                  (item) => item === value
+                );
+                if (next) {
+                  setAction(next);
+                  setError(null);
+                }
+              }}
+              options={[
+                { id: 'instruction', label: 'Record/amend current return instruction' },
+                { id: 'draft', label: 'Record a new proposal reference' },
+                { id: 'revise', label: 'Revise selected proposal reference' },
+                { id: 'permission', label: 'Record external permission/rejection/revocation' },
+              ]}
+            />
+            {action === 'instruction' && (
+              <ReturnInstructionForm
+                key={`instruction:${cycleId}:${currentInstruction?.id}`}
+                current={currentInstruction}
+                busy={
+                  mutations.busy ||
+                  mutations.uncertain ||
+                  !cycle ||
+                  instructions.loading ||
+                  currentInstructions.loading
+                }
+                onSubmit={async (draft) => {
+                  const current = requireCycle();
+                  await mutations.run<RecordReturnInstructionMutation>(
+                    RecordReturnInstructionDocument,
+                    {
+                      ...draft,
+                      cycleId,
+                      expectedCycleVersion: current.version,
+                      currentInstructionId: currentInstruction?.id,
+                    },
+                    'Immutable sourced instruction recorded.'
+                  );
+                }}
+              />
+            )}
+            {(action === 'draft' || action === 'revise') &&
+              (currentInstruction && container && (action === 'draft' || proposal) ? (
+                <ReuseProposalForm
+                  key={`${action}:${cycleId}:${currentInstruction.id}:${action === 'revise' ? proposal?.id : 'new'}`}
+                  cycleId={cycleId}
+                  containerId={container.id}
+                  instruction={currentInstruction}
+                  initial={action === 'revise' ? (proposal ?? undefined) : undefined}
+                  busy={mutations.busy || mutations.uncertain || !cycle}
+                  onSubmit={async (draft) => {
+                    const current = requireCycle();
+                    const result = await mutations.run<RecordReuseProposalMutation>(
+                      RecordReuseProposalDocument,
+                      { ...draft, cycleId, expectedCycleVersion: current.version },
+                      'Immutable proposal revision recorded; permission and reservation remain separate.'
+                    );
+                    if (result) selectProposal(result.recordMtwReuseProposal);
+                  }}
+                />
+              ) : (
+                <p>
+                  Load current return instruction and, for revision, choose an immutable proposal.
+                </p>
+              ))}
+            {action === 'permission' && <ReuseState {...boundInstruction} />}
+            {action === 'permission' &&
+              (proposal && proposalInstruction ? (
+                <ReusePermissionForm
+                  key={`permission:${proposal.id}`}
+                  approvals={pinnedApprovalRows}
+                  ownerReference={proposalInstruction.ownerReference}
+                  busy={mutations.busy || mutations.uncertain || !cycle}
+                  onSubmit={async (draft) => {
+                    const current = requireCycle();
+                    const result = await mutations.run<RecordReuseApprovalMutation>(
+                      RecordReuseApprovalDocument,
+                      { ...draft, proposalId: proposal.id, expectedCycleVersion: current.version },
+                      'Sourced external decision recorded; no reservation created.'
+                    );
+                    if (result) {
+                      setApproval(
+                        result.recordMtwEquipmentReuseApproval.kind === 'APPROVED'
+                          ? result.recordMtwEquipmentReuseApproval
+                          : null
+                      );
+                      setReviewCount(0);
+                    }
+                  }}
+                />
+              ) : (
+                <p>
+                  Select an exact proposal revision. Its immutable instruction must load
+                  successfully: {proposal?.instructionId ?? 'no proposal selected'}. The bound owner
+                  must be read from that instruction, independently of the latest instruction.
+                </p>
+              ))}
+          </section>
+          {proposal && (
+            <section className={reuseCard} aria-label="Permission history and server eligibility">
+              <h2 className="text-lg font-semibold">External permission and server review</h2>
+              <ReuseState {...approvals} />
+              {approvalRows.map((row) => (
+                <article key={row.id} className="space-y-2 rounded border p-3 text-sm">
+                  <p>
+                    {row.kind} — {row.counterpartyReference}; source {row.sourceReference};{' '}
+                    {row.validFrom ?? 'No validity start'}–{row.validUntil ?? 'No validity end'}.
+                  </p>
+                  <p>
+                    {row.note}; recorded {row.recordedAt}; targeted grant {row.approvalId ?? 'none'}
+                    .
+                  </p>
+                  <EvidenceHistory evidence={row.evidence} />
+                </article>
+              ))}
+              <ReusePager
+                page={approvals.data?.mtwEquipmentReuseApprovalPage}
+                offset={approvalOffset}
+                onChange={setApprovalOffset}
+                busy={approvals.loading || mutations.busy}
+              />
+              <PinnedSelect
+                label="Exact grant for eligibility and reservation"
+                required={false}
+                value={approval?.id ?? ''}
+                disabled={mutations.busy || mutations.uncertain}
+                onChange={(id) => {
+                  setApproval(pinnedApprovalRows.find((row) => row.id === id) ?? null);
+                  setReviewCount(0);
+                }}
+                options={pinnedApprovalRows
+                  .filter((row) => row.kind === 'APPROVED')
+                  .map((row) => ({
+                    id: row.id,
+                    label: `${row.counterpartyReference} — ${row.sourceReference} — ${row.validUntil}`,
+                  }))}
+              />
+              <Button
+                type="button"
+                variant="outline"
+                disabled={mutations.busy || mutations.uncertain || eligibility.loading}
+                onClick={() => setReviewCount((value) => value + 1)}
+              >
+                Review server eligibility
+              </Button>
+              <ReuseState {...eligibility} />
+              {assessment && (
+                <>
+                  <p>
+                    {assessment.status === 'BLOCKED'
+                      ? 'Blocked'
+                      : 'Ready for separate dispatch review'}{' '}
+                    — evaluated {assessment.evaluatedAt}.
+                  </p>
+                  <ul className="space-y-2">
+                    {assessment.blockers.map((item) => (
+                      <li key={item.code} className="rounded border p-3">
+                        <strong>
+                          {item.certainty}: {item.code}
+                        </strong>
+                        <p>{item.reason}</p>
+                      </li>
+                    ))}
+                  </ul>
+                  <p className="text-sm">
+                    This result is not allocation authority. Acceptance rechecks latest proposal
+                    revision, cycle, instruction, evidence and constraints under a container lock.
+                  </p>
+                  <Button
+                    type="button"
+                    disabled={
+                      mutations.busy ||
+                      mutations.uncertain ||
+                      eligibility.loading ||
+                      assessment.status !== 'READY_FOR_DISPATCH_REVIEW' ||
+                      !approval ||
+                      !cycle
+                    }
+                    onClick={async () => {
+                      setError(null);
+                      try {
+                        const current = requireCycle();
+                        if (!approval) throw new Error('Select exact sourced grant.');
+                        const result = await mutations.run<AcceptReuseReservationMutation>(
+                          AcceptReuseReservationDocument,
+                          {
+                            proposalId: proposal.id,
+                            approvalId: approval.id,
+                            expectedCycleVersion: current.version,
+                            expectedProposalRevision: proposal.revision,
+                          },
+                          'Planning reservation accepted; equipment has not moved.'
+                        );
+                        if (result) {
+                          setReservation(result.acceptMtwReuseReservation);
+                          setReservationOffset(0);
+                          setSelectedReservationOffset(0);
+                          setTransitionOffset(0);
+                        }
+                      } catch (failure) {
+                        setError(failure instanceof Error ? failure.message : 'Unable to reserve.');
+                      }
+                    }}
+                  >
+                    Accept separate planning reservation
+                  </Button>
+                </>
+              )}
+            </section>
+          )}
+          <section className={reuseCard} aria-label="Planning reservation history">
+            <h2 className="text-lg font-semibold">Planning reservations</h2>
+            <ReuseState {...reservations} />
+            {reservations.data?.mtwReuseReservationPage.items.map((row) => (
+              <article key={row.id} className="space-y-2 rounded border p-3 text-sm">
+                <p>
+                  {row.status} — v{row.version}; proposal {row.proposalId}; grant {row.approvalId};
+                  handoff until {row.handoffUntil}.
+                </p>
+                <p>
+                  Created {row.createdAt}; updated {row.updatedAt}.
+                </p>
+                <Button
+                  type="button"
+                  variant="outline"
+                  disabled={mutations.busy || mutations.uncertain}
+                  onClick={() => {
+                    setReservation(row);
+                    setSelectedReservationOffset(reservationOffset);
+                    setTransitionOffset(0);
+                  }}
+                >
+                  Inspect reservation
+                </Button>
+              </article>
+            ))}
+            <ReusePager
+              page={reservations.data?.mtwReuseReservationPage}
+              offset={reservationOffset}
+              onChange={setReservationOffset}
+              busy={reservations.loading || mutations.busy}
+            />
+            <ReuseState {...pinnedReservationPage} />
+            {selectedReservation && !reservation && (
+              <p>
+                Selected reservation {selectedReservation.id}. Current state unavailable; refresh
+                its original history page before taking action.
+              </p>
+            )}
+            {selectedReservation && (
+              <div className="space-y-2">
+                <h3 className="font-semibold">Recorded cancellation and expiry decisions</h3>
+                <ReuseState {...transitions} />
+                {transitions.data?.mtwReuseReservationTransitionPage.items.map((item) => (
+                  <article key={item.id} className="rounded border p-3">
+                    <p>
+                      {item.previousStatus} → {item.status}; {item.recordedAt}; recorded by{' '}
+                      {item.createdBy}.
+                    </p>
+                    <p>{item.reason}</p>
+                  </article>
+                ))}
+                <ReusePager
+                  page={transitions.data?.mtwReuseReservationTransitionPage}
+                  offset={transitionOffset}
+                  onChange={setTransitionOffset}
+                  busy={transitions.loading || mutations.busy}
+                />
+              </div>
+            )}
+            {reservation && (
+              <div className="space-y-3 rounded border p-4">
+                <p>
+                  Pinned reservation {reservation.id}: {reservation.status}, version
+                  {reservation.version}. A terminal reservation does not record return acceptance or
+                  execution completion.
+                </p>
+                {reservation.status === 'ACTIVE' && (
+                  <form
+                    className="space-y-3"
+                    onSubmit={async (event) => {
+                      event.preventDefault();
+                      setError(null);
+                      try {
+                        const values = new FormData(event.currentTarget);
+                        const status = reuseText(values, 'terminalStatus');
+                        if (status !== 'CANCELLED' && status !== 'EXPIRED')
+                          throw new Error('Choose cancellation or expiry.');
+                        const result = await mutations.run<TerminateReuseReservationMutation>(
+                          TerminateReuseReservationDocument,
+                          {
+                            reservationId: reservation.id,
+                            expectedVersion: reservation.version,
+                            status,
+                            reason: reuseText(values, 'reason'),
+                          },
+                          'Terminal planning decision recorded; operational clocks unchanged.'
+                        );
+                        if (result) setReservation(result.terminateMtwReuseReservation);
+                      } catch (failure) {
+                        setError(
+                          failure instanceof Error ? failure.message : 'Unable to terminate.'
+                        );
+                      }
+                    }}
+                  >
+                    <fieldset
+                      disabled={mutations.busy || mutations.uncertain}
+                      className="space-y-3"
+                    >
+                      <label className="block">
+                        Terminal planning decision
+                        <select name="terminalStatus" className="mt-1 w-full rounded border p-2">
+                          <option value="CANCELLED">Cancel</option>
+                          <option value="EXPIRED">
+                            Record expiry (server checks deadline elapsed)
+                          </option>
+                        </select>
+                      </label>
+                      <ReuseField
+                        label="Cancellation or expiry reason"
+                        name="reason"
+                        maxLength={2000}
+                      />
+                      <Button type="submit">Record terminal decision</Button>
+                    </fieldset>
+                  </form>
+                )}
+              </div>
+            )}
+          </section>
+        </>
+      )}
+      {(error || mutations.error) && <p role="alert">{error ?? mutations.error}</p>}
+      {mutations.notice && <p role="status">{mutations.notice}</p>}
+      {mutations.uncertain && (
+        <div className="space-y-3 rounded border p-4">
+          <p>
+            {mutations.recoveryInvalid &&
+              'The saved request cannot be read safely. Check history before abandoning it. '}
+            Result may be uncertain. Refresh history before retrying. “Retry original request”
+            reuses its original body, expected revisions and idempotency key; it does not use edited
+            form fields. The saved request stays available when context changes. Return to its
+            original account, workspace and project to retry. Resolve or explicitly abandon it
+            before starting another request.
+          </p>
+          <Button
+            type="button"
+            variant="outline"
+            disabled={mutations.busy}
+            onClick={mutations.refresh}
+          >
+            Refresh history after uncertain result
+          </Button>
+          <Button
+            type="button"
+            disabled={mutations.busy || !mutations.canRetry}
+            onClick={mutations.retryOriginal}
+          >
+            Retry original request
+          </Button>
+          <Button
+            type="button"
+            variant="outline"
+            disabled={mutations.busy}
+            onClick={mutations.discardAttempt}
+          >
+            Abandon retry after checking history — the server may have saved it
+          </Button>
+        </div>
+      )}
+    </div>
+  );
+}