feat(release): publish minimal self-contained Magent source

frontend/app/portal/IssueFlowStep.tsx

@@ -0,0 +1,63 @@
+"use client";
+
+import { useEffect, useRef, type ReactNode } from "react";
+
+export default function IssueFlowStep({
+  number,
+  title,
+  summary,
+  active,
+  complete,
+  onEdit,
+  children,
+}: {
+  number: number;
+  title: string;
+  summary: string;
+  active: boolean;
+  complete: boolean;
+  onEdit: () => void;
+  children: ReactNode;
+}) {
+  const heading = useRef<HTMLHeadingElement>(null);
+  useEffect(() => {
+    if (!active || number === 1) return;
+    heading.current?.focus({ preventScroll: true });
+    heading.current?.scrollIntoView({ block: "nearest", behavior: "instant" });
+  }, [active, number]);
+
+  if (!active && !complete) return null;
+  return (
+    <section className={`issue-procedure-step ${active ? "is-current" : "is-complete"}`} aria-label={title}>
+      {active ? (
+        <>
+          <div className="issue-flow-heading">
+            <span className="issue-step-number" aria-hidden="true">
+              {String(number).padStart(2, "0")}
+            </span>
+            <h2 ref={heading} tabIndex={-1}>
+              {title}
+            </h2>
+          </div>
+          <div className="issue-procedure-content">{children}</div>
+        </>
+      ) : (
+        <button
+          type="button"
+          className="issue-step-summary"
+          onClick={onEdit}
+          aria-label={`Change ${title}: ${summary}`}
+        >
+          <span className="issue-step-number" aria-hidden="true">
+            ✓
+          </span>
+          <span className="issue-step-summary-copy">
+            <small>{title}</small>
+            <strong>{summary}</strong>
+          </span>
+          <span className="issue-step-change">Change</span>
+        </button>
+      )}
+    </section>
+  );
+}

frontend/app/portal/issue-flow.css

@@ -0,0 +1,56 @@
+/* One expanded procedure at a time; completed steps become editable summaries. */
+.issue-flow-progressive .issue-guided-form { padding: 0; border: 0; }
+.issue-wizard-fields { display: grid; gap: 10px; min-width: 0; margin: 0; padding: 0; border: 0; }
+.issue-procedure-step { min-width: 0; border-bottom: 1px solid var(--ops-line-soft); }
+.issue-procedure-step:last-child { border-bottom: 0; }
+.issue-procedure-step.is-current { padding: 16px 0 8px; }
+.issue-procedure-step .issue-flow-heading { align-items: center; margin-bottom: 18px; }
+.issue-procedure-step h2 { scroll-margin-top: 130px; }
+.issue-procedure-content { display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px; min-width: 0; animation: issue-step-enter 150ms ease-out; }
+.issue-flow-progressive .issue-category-card { min-height: 122px; gap: 6px; padding: 14px; }
+.issue-flow-progressive .issue-media-finder { padding: 0; border: 0; background: transparent; }
+.page .issue-flow-progressive .issue-step-summary {
+  display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center;
+  gap: 12px; width: 100%; padding: 10px 0; border: 0 !important;
+  background: transparent !important; text-align: left; color: var(--ops-text) !important;
+  box-shadow: none; text-transform: none;
+}
+.issue-step-summary .issue-step-number { width: 28px; height: 28px; color: var(--ops-primary-2); }
+.issue-step-summary-copy { display: grid; gap: 3px; min-width: 0; }
+.issue-step-summary-copy small { color: var(--ops-muted); font-size: 11px; font-weight: 500; }
+.issue-step-summary-copy strong { font-size: 13px; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+.issue-step-change { color: var(--ops-primary-2); font-size: 12px; }
+.issue-step-summary:hover .issue-step-change { text-decoration: underline; }
+.issue-procedure-actions { display: flex; grid-column: 1 / -1; justify-content: flex-end; align-items: center; flex-wrap: wrap; gap: 10px; }
+.issue-procedure-actions button { min-height: 44px; }
+.page .issue-procedure-actions > button:not(.ghost-button) {
+  background: #c7bdff !important; border-color: #c7bdff !important; color: #1c172c !important;
+}
+.issue-procedure-actions button:disabled { opacity: .4; }
+.issue-selection-count { margin-right: auto; color: var(--ops-muted); font-size: 12px; }
+.issue-flow-progressive .issue-choice-row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
+.issue-flow-progressive .issue-choice-row button { display: flex; align-items: center; justify-content: flex-start; gap: 10px; min-height: 48px; }
+.issue-device-check { display: grid; place-items: center; width: 22px; height: 22px; flex: 0 0 22px; border: 1px solid currentColor; border-radius: 6px; }
+/* Legacy global button colours are !important; scoped overrides keep toggles visible. */
+.page .issue-flow-progressive button[aria-pressed='true'] {
+  border-color: #c7bdff !important; background: #373147 !important; color: #f5f0ff !important;
+  box-shadow: inset 0 0 0 1px #c7bdff;
+}
+.issue-device-feedback { margin: 4px 0 0; color: var(--ops-muted); font-size: 12px; line-height: 1.5; }
+.issue-flow-progressive .issue-resolution-card { grid-template-columns: minmax(0, 1fr) auto; padding: 0; border: 0; }
+.issue-flow-progressive .issue-resolution-card h3 { margin: 0; font-size: 19px; line-height: 1.4; }
+.issue-flow-progressive .issue-resolution-card p { margin-top: 8px; font-size: 13px; }
+.issue-flow-progressive .status-banner { display: grid; gap: 10px; }
+.issue-flow-progressive .status-banner button { justify-self: start; }
+@keyframes issue-step-enter { from { opacity: .5; transform: translateY(4px); } to { opacity: 1; transform: translateY(0); } }
+@media (max-width: 680px) {
+  .issue-flow-progressive .issue-category-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
+  .issue-flow-progressive .issue-category-card { min-height: 112px; padding: 12px; }
+  .issue-flow-progressive .issue-category-card p { display: none; }
+  .issue-flow-progressive .issue-category-card strong { font-size: 13px; }
+  .issue-procedure-step .issue-flow-heading h2 { font-size: 19px; }
+  .issue-flow-progressive .issue-step-summary { gap: 8px; }
+  .issue-flow-progressive .issue-choice-row button { font-size: 12px; padding: 10px; }
+  .issue-flow-progressive .issue-resolution-card { grid-template-columns: minmax(0, 1fr); }
+}
+@media (prefers-reduced-motion: reduce) { .issue-procedure-content { animation: none; } }

frontend/app/portal/issues/page.tsx

@@ -0,0 +1,5 @@
+import PortalClient from "../PortalClient";
+
+export default function IssuePortalPage() {
+  return <PortalClient workspace="issue" />;
+}

frontend/app/portal/page.tsx

@@ -0,0 +1,5 @@
+import { redirect } from "next/navigation";
+
+export default function PortalIndexPage() {
+  redirect("/new-requests");
+}

frontend/app/portal/requests/page.tsx

@@ -0,0 +1,5 @@
+import { redirect } from "next/navigation";
+
+export default function RequestPortalPage() {
+  redirect("/new-requests");
+}