@walwal-harness/cli 7.1.43 → 7.1.45

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

@@ -52,6 +52,25 @@
 .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; }
+.viewsection-timeline{ height:80vh; }
+
 /* ===================== HEADER ===================== */
 .hdr{
   height:46px; flex:0 0 auto; display:flex; align-items:center; gap:18px;
@@ -105,7 +124,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 +227,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 +271,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/apps/harness-dashboard/lib/metrics/sampler.ts

@@ -308,21 +308,67 @@ function collectPids(value: unknown, into: Set<number>): void {
   }
 }
 
-/** %cpu for a single pid via `ps -o %cpu= -p <pid>`; null if dead/guarded. */
-function cpuForPid(pid: number): number | null {
+/** One `ps` snapshot: pid -> %cpu, and ppid -> [children]. */
+function readProcTable(): { cpu: Map<number, number>; kids: Map<number, number[]> } {
+  const cpu = new Map<number, number>();
+  const kids = new Map<number, number[]>();
   try {
-    const out = execFileSync("ps", ["-o", "%cpu=", "-p", String(pid)], {
+    const out = execFileSync("ps", ["-axo", "pid=,ppid=,%cpu="], {
       encoding: "utf8",
       timeout: 4000,
       stdio: ["ignore", "pipe", "ignore"],
     });
-    const v = parseFloat(out.trim());
-    return Number.isFinite(v) ? v : null;
+    for (const line of out.split("\n")) {
+      const m = line.trim().match(/^(\d+)\s+(\d+)\s+([\d.]+)$/);
+      if (!m) continue;
+      const pid = Number(m[1]);
+      const ppid = Number(m[2]);
+      const c = parseFloat(m[3]);
+      if (Number.isFinite(c)) cpu.set(pid, c);
+      const arr = kids.get(ppid);
+      if (arr) arr.push(pid);
+      else kids.set(ppid, [pid]);
+    }
   } catch {
-    return null;
+    /* ps absent/guarded */
+  }
+  return { cpu, kids };
+}
+
+/** Collect a pid plus ALL its descendants into `into`. tmux/background workers
+ *  run as CHILDREN of the recorded pane/shell pid, so sampling the root pid alone
+ *  reads ~0% (the shell idles while the worker burns cpu in a child). */
+function collectSubtree(
+  root: number,
+  table: { cpu: Map<number, number>; kids: Map<number, number[]> },
+  into: Set<number>
+): void {
+  const stack = [root];
+  while (stack.length) {
+    const pid = stack.pop() as number;
+    if (into.has(pid)) continue;
+    into.add(pid);
+    for (const k of table.kids.get(pid) ?? []) stack.push(k);
   }
 }
 
+/** Sum %cpu of a set of pids from the table. */
+function sumCpu(
+  pids: Set<number>,
+  table: { cpu: Map<number, number>; kids: Map<number, number[]> }
+): number | null {
+  let total = 0;
+  let any = false;
+  for (const pid of pids) {
+    const c = table.cpu.get(pid);
+    if (c != null) {
+      total += c;
+      any = true;
+    }
+  }
+  return any ? Math.round(total * 10) / 10 : null;
+}
+
 /**
  * Discover tmux company panes: pane_pid keyed by session name, for sessions
  * matching `walwal_<projbasename>_*`. tmux may be absent → returns {}.
@@ -473,18 +519,14 @@ export async function sampleMetrics(harnessRoot: string): Promise<MetricsSample>
     const panes = tmuxCompanyPanes(projBase);
     for (const p of panes) pidSet.add(p.pid);
 
+    const procTable = readProcTable();
     let cpu: number | null = null;
     if (pidSet.size > 0) {
-      let total = 0;
-      let any = false;
-      for (const pid of pidSet) {
-        const c = cpuForPid(pid);
-        if (c != null) {
-          total += c;
-          any = true;
-        }
-      }
-      cpu = any ? Math.round(total * 10) / 10 : null;
+      // Sum each discovered pid's whole process subtree (deduped), so a busy
+      // worker running as a child of its tmux/background shell is counted.
+      const counted = new Set<number>();
+      for (const pid of pidSet) collectSubtree(pid, procTable, counted);
+      cpu = sumCpu(counted, procTable);
     }
 
     /* ---- 3. perAgent: attribute via tmux session name ---------------- */
@@ -495,7 +537,9 @@ export async function sampleMetrics(harnessRoot: string): Promise<MetricsSample>
       for (const p of panes) {
         // session name: walwal_<projBase>_<stamp> — stamp is the agent tag.
         const tag = p.session.slice(prefix.length) || p.session;
-        const c = cpuForPid(p.pid);
+        const sub = new Set<number>();
+        collectSubtree(p.pid, procTable, sub);
+        const c = sumCpu(sub, procTable);
         const cur = acc[tag] ?? {};
         if (c != null) cur.cpu = Math.round(((cur.cpu ?? 0) + c) * 10) / 10;
         acc[tag] = cur;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@walwal-harness/cli",
-  "version": "7.1.43",
+  "version": "7.1.45",
   "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"