From 827b7d934d6af88244d95820ffd5ac1b20d6dc22 Mon Sep 17 00:00:00 2001
From: gsxdsm <gsxdsm@users.noreply.github.com>
Date: Tue, 9 Jun 2026 23:21:46 -0700
Subject: [PATCH] FN-6171: move GitHub tracking below prompt details

Move the task detail modal's GitHub tracking section to render after the prompt/spec content.

- relocate the GitHub tracking section in TaskDetailModal so it appears beneath prompt details in read mode
- preserve the existing GitHub tracking controls, status, and expand/collapse behavior while changing only section order
- add a regression test that asserts the prompt content appears before the GitHub tracking section

Files changed:
 .../dashboard/app/components/TaskDetailModal.tsx   | 274 ++++++++++-----------
 ...lModal.inline-editing-and-integrations.test.tsx |  28 +++
 2 files changed, 165 insertions(+), 137 deletions(-)

Fusion-Task-Id: FN-6171

Fusion-Task-Lineage: dac8ac54-655d-4403-9e7d-6aad446da793
---
 .../app/components/TaskDetailModal.tsx        | 274 +++++++++---------
 ...l.inline-editing-and-integrations.test.tsx |  28 ++
 2 files changed, 165 insertions(+), 137 deletions(-)

diff --git a/packages/dashboard/app/components/TaskDetailModal.tsx b/packages/dashboard/app/components/TaskDetailModal.tsx
index 017ce0072a..afa3271e08 100644
--- a/packages/dashboard/app/components/TaskDetailModal.tsx
+++ b/packages/dashboard/app/components/TaskDetailModal.tsx
@@ -3507,143 +3507,6 @@ export function TaskDetailContent({
               )}
             </div>
           )}
-          {showGithubTrackingSection && (
-            <div className="detail-section detail-github-tracking-section">
-              <div className="detail-source-header">
-                <div className="detail-source-summary">
-                  <span className="detail-source-label">{t("taskDetail.githubTracking.label", "GitHub tracking")}</span>
-                  <span className="detail-source-provider-badge" aria-label={t("taskDetail.githubTracking.statusAriaLabel", "GitHub tracking status")}>
-                    <GitBranch aria-hidden="true" />
-                    <span>{githubTrackingStatus}</span>
-                  </span>
-                  {!githubTrackedIssue && (
-                    <span className="detail-source-empty">
-                      {githubTrackingDetailPending
-                        ? t("taskDetail.githubTracking.checking", "Checking tracking status")
-                        : githubTrackingEnabled
-                          ? t("taskDetail.githubTracking.notYetCreated", "Issue not yet created")
-                          : t("taskDetail.githubTracking.disabled", "Tracking is currently disabled")}
-                    </span>
-                  )}
-                </div>
-                {showInlineGithubTrackingEnableButton && (
-                  <button
-                    type="button"
-                    className="btn btn-sm btn-primary detail-github-tracking-enable"
-                    aria-label={t("taskDetail.githubTracking.enableAriaLabel", "Enable GitHub tracking")}
-                    disabled={isSavingGithubTracking}
-                    onClick={() => void handleToggleGithubTracking()}
-                  >
-                    {t("taskDetail.githubTracking.enableBtn", "Enable")}
-                  </button>
-                )}
-                {showGithubTrackingSpinner && (
-                  <span
-                    className="detail-github-tracking-spinner"
-                    role="status"
-                    aria-live="polite"
-                    aria-label={isSavingGithubTracking ? t("taskDetail.githubTracking.enablingAriaLabel", "Enabling GitHub tracking") : t("taskDetail.githubTracking.loadingAriaLabel", "Loading GitHub tracking status")}
-                  >
-                    <Loader2 size={16} className="spin" aria-hidden="true" />
-                    <span className="visually-hidden">
-                      {isSavingGithubTracking ? t("taskDetail.githubTracking.enabling", "Enabling GitHub tracking…") : t("taskDetail.githubTracking.loading", "Loading GitHub tracking status…")}
-                    </span>
-                  </span>
-                )}
-                <button
-                  type="button"
-                  className="detail-source-toggle"
-                  aria-expanded={githubTrackingExpanded}
-                  aria-label={githubTrackingExpanded ? t("taskDetail.githubTracking.collapse", "Collapse GitHub tracking details") : t("taskDetail.githubTracking.expand", "Expand GitHub tracking details")}
-                  onClick={() => setGithubTrackingExpanded((expanded) => !expanded)}
-                >
-                  <ChevronRight
-                    size={16}
-                    className={githubTrackingExpanded ? "detail-source-chevron--expanded" : undefined}
-                  />
-                </button>
-              </div>
-              {githubTrackingExpanded && (
-                <div className="detail-github-tracking-content">
-                  {githubTrackedIssue && (
-                    <dl className="detail-source-grid detail-github-tracking-grid">
-                      <div>
-                        <dt>{t("taskDetail.githubTracking.issue", "Issue")}</dt>
-                        <dd>
-                          {githubTrackedIssue.url ? (
-                            <a className="detail-source-link" href={githubTrackedIssue.url} target="_blank" rel="noopener noreferrer">
-                              {`${githubTrackedIssue.owner}/${githubTrackedIssue.repo}#${githubTrackedIssue.number}`}
-                            </a>
-                          ) : (
-                            <span>{`${githubTrackedIssue.owner}/${githubTrackedIssue.repo}#${githubTrackedIssue.number}`}</span>
-                          )}
-                        </dd>
-                      </div>
-                      <div>
-                        <dt>{t("taskDetail.githubTracking.state", "State")}</dt>
-                        <dd>
-                          <span className={`detail-github-issue-state ${task.issueInfo?.state === "closed" ? "detail-github-issue-state--closed" : "detail-github-issue-state--open"}`}>
-                            {task.issueInfo?.state ?? "open"}
-                          </span>
-                        </dd>
-                      </div>
-                    </dl>
-                  )}
-                  <div className="detail-github-tracking-controls">
-                    {!githubTrackedIssue && githubTrackingEnabled && (
-                      <>
-                        <button
-                          className="btn btn-sm touch-target"
-                          onClick={() => void handleRetryGithubTrackingIssueCreate()}
-                          disabled={isSavingGithubTracking || !canCreateTrackingIssue}
-                          title={!canCreateTrackingIssue ? t("taskDetail.githubTracking.createIssueDisabledTitle", "Add a title or description so a tracking issue can be created.") : undefined}
-                        >
-                          {t("taskDetail.githubTracking.createIssueBtn", "Create tracking issue")}
-                        </button>
-                        {!canCreateTrackingIssue && (
-                          <small className="detail-github-tracking-helper">{t("taskDetail.githubTracking.createIssueHelper", "Tracking issue will be created once this task has a title or description to summarize.")}</small>
-                        )}
-                      </>
-                    )}
-                    {canEditGithubTracking && (
-                      <>
-                        <label className="checkbox-label" htmlFor="detail-github-tracking-toggle">
-                          <input
-                            id="detail-github-tracking-toggle"
-                            type="checkbox"
-                            checked={githubTrackingEnabled}
-                            disabled={isSavingGithubTracking}
-                            onChange={() => void handleToggleGithubTracking()}
-                          />
-                          {t("taskDetail.githubTracking.enableCheckboxLabel", "Enable GitHub tracking")}
-                        </label>
-                        <div className="detail-github-tracking-repo-row">
-                          <input
-                            className="input"
-                            value={githubRepoOverrideDraft}
-                            onChange={(event) => {
-                              setGithubRepoOverrideDraft(event.target.value);
-                              setGithubRepoOverrideError(null);
-                            }}
-                            placeholder={effectiveGithubRepoDefault || "owner/repo"}
-                          />
-                          <button className="btn btn-sm" onClick={() => void handleSaveGithubRepoOverride()} disabled={isSavingGithubTracking}>
-                            {t("common.save", "Save")}
-                          </button>
-                        </div>
-                        {githubRepoOverrideError && <small className="detail-github-tracking-error">{githubRepoOverrideError}</small>}
-                        {githubTrackedIssue && (
-                          <button className="btn btn-sm touch-target" onClick={() => void handleUnlinkGithubIssue()} disabled={isSavingGithubTracking}>
-                            {t("taskDetail.githubTracking.unlinkBtn", "Unlink GitHub issue")}
-                          </button>
-                        )}
-                      </>
-                    )}
-                  </div>
-                </div>
-              )}
-            </div>
-          )}
           <div className="detail-section detail-agent-section">
             <div className="detail-meta-row">
               <div className="detail-meta-left">
@@ -3809,6 +3672,143 @@ export function TaskDetailContent({
               <div className="detail-prompt">{t("taskDetail.spec.noPrompt", "(no prompt)")}</div>
             )}
           </div>
+          {showGithubTrackingSection && (
+            <div className="detail-section detail-github-tracking-section">
+              <div className="detail-source-header">
+                <div className="detail-source-summary">
+                  <span className="detail-source-label">{t("taskDetail.githubTracking.label", "GitHub tracking")}</span>
+                  <span className="detail-source-provider-badge" aria-label={t("taskDetail.githubTracking.statusAriaLabel", "GitHub tracking status")}>
+                    <GitBranch aria-hidden="true" />
+                    <span>{githubTrackingStatus}</span>
+                  </span>
+                  {!githubTrackedIssue && (
+                    <span className="detail-source-empty">
+                      {githubTrackingDetailPending
+                        ? t("taskDetail.githubTracking.checking", "Checking tracking status")
+                        : githubTrackingEnabled
+                          ? t("taskDetail.githubTracking.notYetCreated", "Issue not yet created")
+                          : t("taskDetail.githubTracking.disabled", "Tracking is currently disabled")}
+                    </span>
+                  )}
+                </div>
+                {showInlineGithubTrackingEnableButton && (
+                  <button
+                    type="button"
+                    className="btn btn-sm btn-primary detail-github-tracking-enable"
+                    aria-label={t("taskDetail.githubTracking.enableAriaLabel", "Enable GitHub tracking")}
+                    disabled={isSavingGithubTracking}
+                    onClick={() => void handleToggleGithubTracking()}
+                  >
+                    {t("taskDetail.githubTracking.enableBtn", "Enable")}
+                  </button>
+                )}
+                {showGithubTrackingSpinner && (
+                  <span
+                    className="detail-github-tracking-spinner"
+                    role="status"
+                    aria-live="polite"
+                    aria-label={isSavingGithubTracking ? t("taskDetail.githubTracking.enablingAriaLabel", "Enabling GitHub tracking") : t("taskDetail.githubTracking.loadingAriaLabel", "Loading GitHub tracking status")}
+                  >
+                    <Loader2 size={16} className="spin" aria-hidden="true" />
+                    <span className="visually-hidden">
+                      {isSavingGithubTracking ? t("taskDetail.githubTracking.enabling", "Enabling GitHub tracking…") : t("taskDetail.githubTracking.loading", "Loading GitHub tracking status…")}
+                    </span>
+                  </span>
+                )}
+                <button
+                  type="button"
+                  className="detail-source-toggle"
+                  aria-expanded={githubTrackingExpanded}
+                  aria-label={githubTrackingExpanded ? t("taskDetail.githubTracking.collapse", "Collapse GitHub tracking details") : t("taskDetail.githubTracking.expand", "Expand GitHub tracking details")}
+                  onClick={() => setGithubTrackingExpanded((expanded) => !expanded)}
+                >
+                  <ChevronRight
+                    size={16}
+                    className={githubTrackingExpanded ? "detail-source-chevron--expanded" : undefined}
+                  />
+                </button>
+              </div>
+              {githubTrackingExpanded && (
+                <div className="detail-github-tracking-content">
+                  {githubTrackedIssue && (
+                    <dl className="detail-source-grid detail-github-tracking-grid">
+                      <div>
+                        <dt>{t("taskDetail.githubTracking.issue", "Issue")}</dt>
+                        <dd>
+                          {githubTrackedIssue.url ? (
+                            <a className="detail-source-link" href={githubTrackedIssue.url} target="_blank" rel="noopener noreferrer">
+                              {`${githubTrackedIssue.owner}/${githubTrackedIssue.repo}#${githubTrackedIssue.number}`}
+                            </a>
+                          ) : (
+                            <span>{`${githubTrackedIssue.owner}/${githubTrackedIssue.repo}#${githubTrackedIssue.number}`}</span>
+                          )}
+                        </dd>
+                      </div>
+                      <div>
+                        <dt>{t("taskDetail.githubTracking.state", "State")}</dt>
+                        <dd>
+                          <span className={`detail-github-issue-state ${task.issueInfo?.state === "closed" ? "detail-github-issue-state--closed" : "detail-github-issue-state--open"}`}>
+                            {task.issueInfo?.state ?? "open"}
+                          </span>
+                        </dd>
+                      </div>
+                    </dl>
+                  )}
+                  <div className="detail-github-tracking-controls">
+                    {!githubTrackedIssue && githubTrackingEnabled && (
+                      <>
+                        <button
+                          className="btn btn-sm touch-target"
+                          onClick={() => void handleRetryGithubTrackingIssueCreate()}
+                          disabled={isSavingGithubTracking || !canCreateTrackingIssue}
+                          title={!canCreateTrackingIssue ? t("taskDetail.githubTracking.createIssueDisabledTitle", "Add a title or description so a tracking issue can be created.") : undefined}
+                        >
+                          {t("taskDetail.githubTracking.createIssueBtn", "Create tracking issue")}
+                        </button>
+                        {!canCreateTrackingIssue && (
+                          <small className="detail-github-tracking-helper">{t("taskDetail.githubTracking.createIssueHelper", "Tracking issue will be created once this task has a title or description to summarize.")}</small>
+                        )}
+                      </>
+                    )}
+                    {canEditGithubTracking && (
+                      <>
+                        <label className="checkbox-label" htmlFor="detail-github-tracking-toggle">
+                          <input
+                            id="detail-github-tracking-toggle"
+                            type="checkbox"
+                            checked={githubTrackingEnabled}
+                            disabled={isSavingGithubTracking}
+                            onChange={() => void handleToggleGithubTracking()}
+                          />
+                          {t("taskDetail.githubTracking.enableCheckboxLabel", "Enable GitHub tracking")}
+                        </label>
+                        <div className="detail-github-tracking-repo-row">
+                          <input
+                            className="input"
+                            value={githubRepoOverrideDraft}
+                            onChange={(event) => {
+                              setGithubRepoOverrideDraft(event.target.value);
+                              setGithubRepoOverrideError(null);
+                            }}
+                            placeholder={effectiveGithubRepoDefault || "owner/repo"}
+                          />
+                          <button className="btn btn-sm" onClick={() => void handleSaveGithubRepoOverride()} disabled={isSavingGithubTracking}>
+                            {t("common.save", "Save")}
+                          </button>
+                        </div>
+                        {githubRepoOverrideError && <small className="detail-github-tracking-error">{githubRepoOverrideError}</small>}
+                        {githubTrackedIssue && (
+                          <button className="btn btn-sm touch-target" onClick={() => void handleUnlinkGithubIssue()} disabled={isSavingGithubTracking}>
+                            {t("taskDetail.githubTracking.unlinkBtn", "Unlink GitHub issue")}
+                          </button>
+                        )}
+                      </>
+                    )}
+                  </div>
+                </div>
+              )}
+            </div>
+          )}
           <div className="detail-section detail-no-commits-expected-section">
             <div className="form-group">
               <label className="checkbox-label" htmlFor="detail-no-commits-expected-toggle">
diff --git a/packages/dashboard/app/components/__tests__/TaskDetailModal.inline-editing-and-integrations.test.tsx b/packages/dashboard/app/components/__tests__/TaskDetailModal.inline-editing-and-integrations.test.tsx
index b3b695aec2..34dbeb4db2 100644
--- a/packages/dashboard/app/components/__tests__/TaskDetailModal.inline-editing-and-integrations.test.tsx
+++ b/packages/dashboard/app/components/__tests__/TaskDetailModal.inline-editing-and-integrations.test.tsx
@@ -2205,6 +2205,34 @@ describe("TaskDetailModal", () => {
       return screen.findByRole("button", { name: "Collapse GitHub tracking details" });
     };
 
+    it("renders after the prompt/spec section in read mode", () => {
+      render(
+        <TaskDetailModal
+          task={makeTask({
+            id: "FN-001",
+            column: "todo",
+            prompt: "# FN-001\n\nPrompt content before tracking metadata.",
+            githubTracking: {
+              enabled: true,
+            },
+          })}
+          onClose={noop}
+          onOpenDetail={noopOpenDetail}
+          onMoveTask={noopMove}
+          onDeleteTask={noopDelete}
+          onMergeTask={noopMerge}
+          addToast={noop}
+        />,
+      );
+
+      const promptContent = screen.getByText("Prompt content before tracking metadata.");
+      const githubTrackingLabel = screen.getByText("GitHub tracking");
+
+      expect(
+        promptContent.compareDocumentPosition(githubTrackingLabel) & Node.DOCUMENT_POSITION_FOLLOWING,
+      ).toBe(Node.DOCUMENT_POSITION_FOLLOWING);
+    });
+
     it("renders linked issue as link when url exists", async () => {
       render(
         <TaskDetailModal