@walwal-harness/cli 7.1.44 → 7.1.46

package/apps/harness-dashboard/app/brick.css

@@ -52,6 +52,28 @@
 .viewscroll{ flex:1; overflow:auto; padding:var(--gap); }
 .viewscroll-graph{ overflow:hidden; }
 
+/* Consolidated single-screen layout: COMMAND + ORCHESTRATION + TIMELINE stacked. */
+.viewstack{ flex:1; min-height:0; overflow:auto; display:flex; flex-direction:column; }
+.viewsection{ flex:none; display:flex; flex-direction:column; border-top:1px solid var(--bd2); }
+.viewsection:first-child{ border-top:none; }
+.viewsection-head{ position:sticky; top:0; z-index:6; display:flex; align-items:baseline; gap:10px;
+  padding:7px var(--gap); background:rgba(13,17,24,.92); backdrop-filter:blur(4px);
+  border-bottom:1px solid var(--bd);
+  font-family:var(--mono); font-size:10px; letter-spacing:.16em; text-transform:uppercase; color:var(--tx-lo); }
+.viewsection-head b{ color:var(--tx-hi); font-weight:600; letter-spacing:.18em; }
+.viewsection-body{ flex:1; min-height:0; overflow:auto; padding:var(--gap); }
+/* Content-driven height so a short agents grid / empty WORK·IN·FLIGHT doesn't
+   leave a tall blank gap. The stream rail is capped so many events scroll
+   instead of stretching the section. */
+.viewsection-command{ height:auto; }
+.viewsection-command .gridview-rail{ max-height:60vh; }
+.viewsection-graph{ height:80vh; }
+.viewsection-graph .viewsection-body{ overflow:hidden; }
+/* Heatmap (timeline) section: content-height like COMMAND, with the swimlane
+   rows capped so many lanes scroll instead of leaving a tall blank gap. */
+.viewsection-timeline{ height:auto; }
+.viewsection-timeline .swim-rows{ max-height:56vh; }
+
 /* ===================== HEADER ===================== */
 .hdr{
   height:46px; flex:0 0 auto; display:flex; align-items:center; gap:18px;
@@ -105,7 +127,9 @@
 .sb-sub{ font-family:var(--mono); font-size:10px; color:var(--tx-lo); }
 .sb-toggle{ color:var(--tx-lo); font-size:15px; padding:2px 6px; border-radius:4px; }
 .sb-toggle:hover{ color:var(--tx-hi); background:var(--bg2); }
-.sb-list{ flex:1; overflow:auto; padding:8px; display:flex; flex-direction:column; gap:1px; }
+.sb-list{ flex:1 1 0; min-height:0; overflow:auto; padding:8px; display:flex; flex-direction:column; gap:1px; }
+.sb-footer{ flex:1 1 0; min-height:0; display:flex; flex-direction:column; border-top:1px solid var(--bd2); overflow:hidden; padding:8px; }
+.sb-footer .alertpanel{ flex:1 1 0; min-height:0; }
 .sb-item{ display:flex; flex-direction:column; gap:3px; text-align:left; padding:7px 9px; border-radius:5px; transition:.12s; border:1px solid transparent; }
 .sb-item:hover{ background:var(--bg2); }
 .sb-item.is-active{ background:var(--bg2); border-color:var(--bd2); }
@@ -206,7 +230,8 @@
 .sl-done{ color:var(--ok); }
 
 /* alerts */
-.alertpanel{ flex:0 0 auto; }
+.alertpanel{ flex:1.3 1 0; min-height:0; }
+.alertpanel .panel-body{ flex:1; min-height:0; }
 .alertlist{ display:flex; flex-direction:column; gap:7px; }
 .alertitem{ position:relative; display:flex; gap:9px; background:var(--bg2); border:1px solid var(--bd); border-radius:5px; padding:8px 10px 8px 9px; overflow:hidden; }
 .alert-bar{ position:absolute; left:0; top:0; bottom:0; width:2px; }
@@ -249,7 +274,7 @@
 @keyframes spawnpop{ from{ opacity:0; transform:translate(-10px,-50%) scale(.8); } to{ opacity:1; transform:translate(0,-50%) scale(1); } }
 .graph-legend{ position:absolute; left:12px; bottom:10px; font-family:var(--mono); font-size:9.5px; color:var(--tx-faint); }
 
-.graph-detail{ flex:0 0 312px; background:var(--bg1); border:1px solid var(--bd); border-radius:var(--radius); padding:var(--pad); overflow:auto; }
+.graph-detail{ flex:0 0 312px; background:var(--bg1); border:1px solid var(--bd); border-radius:var(--radius); padding:var(--pad); overflow:auto; min-height:0; }
 .gd-head{ display:flex; align-items:center; gap:11px; margin-bottom:12px; }
 .gd-role{ font-size:12px; color:var(--tx-mid); }
 .gd-status{ display:flex; align-items:center; gap:6px; font-family:var(--mono); font-size:10.5px; margin-top:3px; }

package/apps/harness-dashboard/components/brick/BrickDashboard.tsx

@@ -27,7 +27,7 @@ import type { AgentRole, DocTarget } from "../../lib/brick/contract";
 import type { MetricsSample } from "../../lib/metrics/sampler";
 
 import { Header, Sidebar, type BrickView } from "./ui";
-import { GridView } from "./views-grid";
+import { GridView, AlertRail } from "./views-grid";
 import { GraphView } from "./views-graph";
 import { TimelineView } from "./views-timeline";
 import { DocViewer } from "./reports";
@@ -100,6 +100,13 @@ export function BrickDashboard({
     s.ctrend = metrics.ctrend ?? [];
   }
 
+  // All three views render on one screen; the header buttons jump to a section.
+  useEffect(() => {
+    const id =
+      view === "grid" ? "view-command" : view === "graph" ? "view-orchestration" : "view-timeline";
+    document.getElementById(id)?.scrollIntoView({ behavior: "smooth", block: "start" });
+  }, [view]);
+
   const openDoc = (target: DocTarget): void => setDoc(target);
   const closeDoc = (): void => setDoc(null);
 
@@ -113,23 +120,36 @@ export function BrickDashboard({
             onToggle={() => setCollapsed((c) => !c)}
             missions={snapshot.missions}
             ownerHistory={snapshot.ownerHistory}
+            footer={
+              s.alerts.length ? (
+                <AlertRail alerts={s.alerts} now={s.now} openDoc={openDoc} />
+              ) : undefined
+            }
           />
           <div className="app-main">
-            {view === "grid" && (
-              <div className="viewscroll">
-                <GridView s={s} layout={t.agentLayout} openDoc={openDoc} />
-              </div>
-            )}
-            {view === "graph" && (
-              <div className="viewscroll viewscroll-graph">
-                <GraphView s={s} sel={sel} setSel={setSel} openDoc={openDoc} />
-              </div>
-            )}
-            {view === "timeline" && (
-              <div className="viewscroll">
-                <TimelineView s={s} openDoc={openDoc} />
-              </div>
-            )}
+            {/* All three views consolidated on one scrolling screen — no
+                switching. The header COMMAND/ORCHESTRATION/TIMELINE buttons
+                jump to the matching section. */}
+            <div className="viewstack">
+              <section className="viewsection viewsection-command" id="view-command">
+                <div className="viewsection-head"><b>Command</b><span>agents · work in flight · live stream</span></div>
+                <div className="viewsection-body">
+                  <GridView s={s} layout={t.agentLayout} openDoc={openDoc} />
+                </div>
+              </section>
+              <section className="viewsection viewsection-timeline" id="view-timeline">
+                <div className="viewsection-head"><b>Heatmap</b><span>cadence · swimlanes · last 12h</span></div>
+                <div className="viewsection-body">
+                  <TimelineView s={s} openDoc={openDoc} />
+                </div>
+              </section>
+              <section className="viewsection viewsection-graph" id="view-orchestration">
+                <div className="viewsection-head"><b>Orchestration</b><span>CEO → CXX → workers</span></div>
+                <div className="viewsection-body">
+                  <GraphView s={s} sel={sel} setSel={setSel} openDoc={openDoc} />
+                </div>
+              </section>
+            </div>
           </div>
         </div>
 

package/apps/harness-dashboard/components/brick/ui.tsx

@@ -418,6 +418,8 @@ export interface SidebarProps {
   missions?: MissionDoc[];
   /** Real owner prompt history; used when missions are absent. */
   ownerHistory?: OwnerPromptEntry[];
+  /** Optional bottom-half content (e.g. the ATTENTION rail), split 1:1 under the list. */
+  footer?: React.ReactNode;
 }
 
 export function Sidebar({
@@ -425,6 +427,7 @@ export function Sidebar({
   onToggle,
   missions,
   ownerHistory,
+  footer,
 }: SidebarProps): React.JSX.Element {
   const entries = buildSidebarEntries(missions, ownerHistory);
   const [sel, setSel] = useState<string>(entries[0]?.id ?? "");
@@ -458,6 +461,7 @@ export function Sidebar({
           ))}
         </div>
       )}
+      {!collapsed && footer && <div className="sb-footer">{footer}</div>}
     </aside>
   );
 }

package/apps/harness-dashboard/components/brick/views-grid.tsx

@@ -455,7 +455,7 @@ export interface AlertRailProps {
 export function AlertRail({ alerts, now, openDoc }: AlertRailProps) {
   if (!alerts.length) return null;
   return (
-    <Panel title="ATTENTION · IN-LOOP" right={alerts.length} className="alertpanel">
+    <Panel title="ATTENTION · IN-LOOP" right={alerts.length} className="alertpanel" scroll>
       <div className="alertlist">
         {alerts.map((al) => {
           const a = defOf(al.agent);
@@ -534,7 +534,8 @@ export function GridView({ s, layout = "card", openDoc }: GridViewProps) {
           <TaskRail s={s} openDoc={openDoc} />
         </div>
         <div className="gridview-rail">
-          <AlertRail alerts={s.alerts} now={s.now} openDoc={openDoc} />
+          {/* ATTENTION rail moved to the sidebar footer; the command rail now
+              carries just the live stream (shorter section). */}
           <LiveStream events={s.events} openDoc={openDoc} />
         </div>
       </div>

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@walwal-harness/cli",
-  "version": "7.1.44",
+  "version": "7.1.46",
   "description": "Company-style AI agent harness for Claude and Codex. Installs commands, CXX agents, skills, HR-Resource hiring pool, and project-local .harness runtime state.",
   "bin": {
     "walwal-harness": "bin/init.js"