From 108d9f6dca7cfbc99efe43602987ba240af65b2e Mon Sep 17 00:00:00 2001
From: gsxdsm <gsxdsm@users.noreply.github.com>
Date: Mon, 22 Jun 2026 00:20:44 -0700
Subject: [PATCH] feat(dashboard): embedded planning + sidebar/dev-server
 styling

- Planning mode embedded view drops the modal header/close and uses a plain common title like Command Center.
- Remove the divider before the secondary section (Goals/Evals) in the left sidebar.
- Flatten the Dev Server view header to match embedded-view styling (no card chrome).

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
---
 .../dashboard/app/components/DevServerView.css |  8 ++++----
 .../app/components/LeftSidebarNav.css          |  5 ++++-
 .../app/components/PlanningModeModal.css       | 15 +++++++++++++++
 .../app/components/PlanningModeModal.tsx       | 18 ++++++++++++------
 4 files changed, 35 insertions(+), 11 deletions(-)

diff --git a/packages/dashboard/app/components/DevServerView.css b/packages/dashboard/app/components/DevServerView.css
index 0fcd0c54cc..2bdca7348a 100644
--- a/packages/dashboard/app/components/DevServerView.css
+++ b/packages/dashboard/app/components/DevServerView.css
@@ -12,15 +12,15 @@
   overscroll-behavior: contain;
 }
 
+/*
+FNXC:DevServer 2026-06-22-00:00:
+The Dev Server view header must read like other embedded views (Command Center cc-header): a plain title row with actions, not a bordered card. Drop the card border/background/padding so the heading sits flush with the view padding; the title font already matches the shared 1.125rem embedded-title size.
+*/
 .dev-server-header {
   display: flex;
   justify-content: space-between;
   align-items: center;
   gap: var(--space-md);
-  padding: var(--space-md);
-  border: 1px solid var(--border);
-  border-radius: var(--radius-md);
-  background: var(--card);
 }
 
 .dev-server-header-title {
diff --git a/packages/dashboard/app/components/LeftSidebarNav.css b/packages/dashboard/app/components/LeftSidebarNav.css
index 8cc92d0553..6f5f03ea21 100644
--- a/packages/dashboard/app/components/LeftSidebarNav.css
+++ b/packages/dashboard/app/components/LeftSidebarNav.css
@@ -75,9 +75,12 @@ The New Task CTA must occupy exactly the same box as a sidebar item highlight: s
   gap: var(--space-xs);
 }
 
+/*
+FNXC:Navigation 2026-06-22-00:00:
+The secondary section keeps its top spacing but drops the divider line before the first secondary entry (Goals/Evals); the rule reads as one continuous nav list instead of two bordered groups.
+*/
 .left-sidebar-nav__section--secondary {
   padding-top: var(--space-sm);
-  border-top: 1px solid var(--border);
 }
 
 .left-sidebar-nav__item {
diff --git a/packages/dashboard/app/components/PlanningModeModal.css b/packages/dashboard/app/components/PlanningModeModal.css
index bceb52a7a9..bb5a1cb62b 100644
--- a/packages/dashboard/app/components/PlanningModeModal.css
+++ b/packages/dashboard/app/components/PlanningModeModal.css
@@ -72,6 +72,21 @@ FN-6886 promotes Planning Mode into the main app content area. The embedded shel
   box-shadow: none;
 }
 
+/*
+FNXC:PlanningMode 2026-06-22-00:00:
+The embedded planning title must read like other embedded-view titles (Command Center cc-header/cc-title): a plain heading with no tinted modal-header bar, no bottom divider, and no close button. Strip the modal-header background/border and align the title to the content edge; bump the heading to the shared 1.125rem embedded-title size.
+*/
+.planning-modal--embedded .modal-header--embedded {
+  padding: 0 0 var(--space-md);
+  background: transparent;
+  border-bottom: none;
+}
+
+.planning-modal--embedded .modal-header--embedded h3 {
+  font-size: 1.125rem;
+  letter-spacing: normal;
+}
+
 .planning-modal .modal-header {
   flex-shrink: 0;
 }
diff --git a/packages/dashboard/app/components/PlanningModeModal.tsx b/packages/dashboard/app/components/PlanningModeModal.tsx
index 9999646b56..cf2507a91c 100644
--- a/packages/dashboard/app/components/PlanningModeModal.tsx
+++ b/packages/dashboard/app/components/PlanningModeModal.tsx
@@ -1826,7 +1826,11 @@ export function PlanningModeModal({ isOpen, onClose, onTaskCreated, onTasksCreat
       aria-modal={isEmbedded ? undefined : "true"}
     >
       <div className={isEmbedded ? "modal modal-lg planning-modal planning-modal--embedded" : "modal modal-lg planning-modal"} ref={modalRef}>
-        <div className="modal-header">
+        {/*
+        FNXC:PlanningMode 2026-06-22-00:00:
+        Embedded planning is a main-content destination, not a dialog: it drops the modal close button and renders a plain common title (modal-header--embedded) matching other embedded views like Command Center. The mobile back affordance stays because it navigates the session list, not the view.
+        */}
+        <div className={isEmbedded ? "modal-header modal-header--embedded" : "modal-header"}>
           <div className="detail-title-row">
             {mobileShowDetail && (
               <button
@@ -1841,11 +1845,13 @@ export function PlanningModeModal({ isOpen, onClose, onTaskCreated, onTasksCreat
             <Lightbulb size={20} className="icon-triage" />
             <h3>{t("planning.title", "Planning Mode")}</h3>
           </div>
-          <div className="modal-header-actions">
-            <button className="modal-close" onClick={handleClose} aria-label={t("common.close", "Close")}>
-              <X size={20} />
-            </button>
-          </div>
+          {!isEmbedded && (
+            <div className="modal-header-actions">
+              <button className="modal-close" onClick={handleClose} aria-label={t("common.close", "Close")}>
+                <X size={20} />
+              </button>
+            </div>
+          )}
         </div>
 
         <div