@walwal-harness/cli 7.1.10 → 7.1.13

package/README.md

@@ -180,9 +180,10 @@ npx walwal-harness init --force --project-root /path/to/project
 
 Features:
 
-- **Org Tree** — live status of Owner → CEO → CXX → Workers hierarchy
+- **Split Workspace** — full-viewport left/right panes keep Org Tree + Mission Timeline beside the selected mission detail; both panes scroll independently with hidden scrollbars, and the detail pane resets to top on selection changes
+- **Org Tree** — live status of Owner → CEO → CXX → Workers hierarchy, with worker cards grouped under their owning CXX
 - **Mission Timeline** — clickable history of goal/submission/hot-fix missions showing the full dispatch chain
-- **Mission Flow tab** — per-mission flow: Owner prompt → CEO routing → CXX → worker files changed → CQO verdict
+- **Mission Flow tab** — per-mission flow: Owner prompt → CEO routing → CXX → owner-specific worker evidence → CQO verdict
 - **History tab** — mission-specific Owner request (from CEO summary + closest progress.log match)
 - **Gotchas tab** — searchable `.harness/gotchas/*.md` knowledge base, click to read full markdown
 - **Document tab** — per-CXX markdown doc viewer
@@ -221,6 +222,10 @@ harness-hiring           → register and onboard worker
 
 | Version | Summary |
 |---|---|
+| 7.1.13 | Dashboard: full-viewport split workspace, hidden pane scrollbars, and detail scroll reset on selection |
+| 7.1.12 | Dashboard: split workspace panes now scroll independently |
+| 7.1.11 | Dashboard: persistent 50/50 split workspace and CXX-owned worker grouping in the org tree |
+| 7.1.10 | Adds `/submission` and nested goal/submission/hot-fix mission history |
 | 7.1.9 | Dashboard is packaged with npm and auto-syncs isolated cache by package version; README documents dashboard port/reinstall and update/migrate commands |
 | 7.1.8 | HR-Resource: replace China-platform-specific workers with global equivalents; refine cross-border/video/livestream skills |
 | 7.1.7 | Implementation Notes mandatory in all CXX docs and worker reports; harness-worker-evidence-validate.sh |

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

@@ -15,3 +15,12 @@ body {
   font-family: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto,
     sans-serif;
 }
+
+.scrollbar-hidden {
+  scrollbar-width: none;
+  -ms-overflow-style: none;
+}
+
+.scrollbar-hidden::-webkit-scrollbar {
+  display: none;
+}

package/apps/harness-dashboard/components/Drawer.tsx

@@ -1,5 +1,5 @@
 "use client";
-import { useEffect } from "react";
+import { useEffect, useRef } from "react";
 
 export type DrawerTab =
   | "mission-flow"      // Mission document hierarchy (PRIMARY)
@@ -15,6 +15,8 @@ interface DrawerProps {
   onClose: () => void;
   onTabChange: (tab: DrawerTab) => void;
   children: React.ReactNode;
+  mode?: "overlay" | "inline";
+  scrollResetKey?: string;
 }
 
 const TABS: Array<{ id: DrawerTab; label: string }> = [
@@ -25,15 +27,60 @@ const TABS: Array<{ id: DrawerTab; label: string }> = [
   { id: "logs", label: "Agent Log" },
 ];
 
-export function Drawer({ open, tab, title, onClose, onTabChange, children }: DrawerProps) {
+export function Drawer({ open, tab, title, onClose, onTabChange, children, mode = "overlay", scrollResetKey }: DrawerProps) {
+  const contentRef = useRef<HTMLDivElement | null>(null);
+
   useEffect(() => {
-    if (!open) return;
+    if (!open || mode === "inline") return;
     const onKey = (e: KeyboardEvent) => {
       if (e.key === "Escape") onClose();
     };
     window.addEventListener("keydown", onKey);
     return () => window.removeEventListener("keydown", onKey);
-  }, [open, onClose]);
+  }, [open, onClose, mode]);
+
+  useEffect(() => {
+    contentRef.current?.scrollTo({ top: 0, left: 0 });
+  }, [scrollResetKey]);
+
+  if (mode === "inline") {
+    return (
+      <aside
+        role="complementary"
+        aria-label="Detail panel"
+        data-testid="drawer"
+        data-open="true"
+        className="h-full min-h-0 rounded-md border border-brick-wall bg-brick-bg shadow-2xl flex flex-col overflow-hidden"
+      >
+        <header className="flex items-center justify-between border-b border-brick-wall px-4 py-3">
+          <h2 className="text-sm font-mono uppercase tracking-widest text-gray-200 truncate">
+            {title}
+          </h2>
+        </header>
+        <nav className="flex flex-wrap border-b border-brick-wall text-[11px] font-mono">
+          {TABS.map((t) => (
+            <button
+              key={t.id}
+              type="button"
+              data-testid={`drawer-tab-${t.id}`}
+              data-active={t.id === tab}
+              onClick={() => onTabChange(t.id)}
+              className={`min-w-[33%] flex-1 px-2 py-2 transition-colors ${
+                t.id === tab
+                  ? "bg-brick-wall/50 text-gray-100 border-b-2 border-aura-typing"
+                  : "text-gray-500 hover:text-gray-200"
+              }`}
+            >
+              {t.label}
+            </button>
+          ))}
+        </nav>
+        <div ref={contentRef} className="scrollbar-hidden flex-1 overflow-y-auto px-4 py-3 text-xs text-gray-200 font-mono">
+          {children}
+        </div>
+      </aside>
+    );
+  }
 
   return (
     <>
@@ -88,7 +135,7 @@ export function Drawer({ open, tab, title, onClose, onTabChange, children }: Dra
             </button>
           ))}
         </nav>
-        <div className="flex-1 overflow-y-auto px-4 py-3 text-xs text-gray-200 font-mono">
+        <div ref={contentRef} className="scrollbar-hidden flex-1 overflow-y-auto px-4 py-3 text-xs text-gray-200 font-mono">
           {children}
         </div>
       </aside>

package/apps/harness-dashboard/components/OrgTree.tsx

@@ -225,7 +225,8 @@ export function OrgTree({ snapshot, activeNodeId, onNodeClick }: OrgTreeProps) {
     },
   ];
 
-  // Workers from current mission's workers/, shown under CTO column
+  // Workers are grouped by their owning CXX so evaluator reports sit under CQO,
+  // implementation reports under CTO, and legacy flat reports stay visible.
   const workers = currentMission?.workers ?? [];
 
   return (
@@ -271,7 +272,9 @@ export function OrgTree({ snapshot, activeNodeId, onNodeClick }: OrgTreeProps) {
       {/* Row 3: CXX nodes with workers below */}
       <div className="flex gap-3 justify-center">
         {cxxNodes.map((node) => {
-          const nodeWorkers = node.role === "cto" ? workers : [];
+          const nodeWorkers = workers.filter(
+            (w) => w.owner === node.role || (w.owner === "unknown" && node.role === "cto")
+          );
 
           return (
             <div key={node.id} className="flex flex-col items-center gap-2">
@@ -293,7 +296,7 @@ export function OrgTree({ snapshot, activeNodeId, onNodeClick }: OrgTreeProps) {
                         onClick={() =>
                           onNodeClick({
                             id: `worker-${w.name}`,
-                            role: "cto",
+                            role: node.role,
                             label: w.name,
                             sublabel: w.status,
                             status: w.status === "COMPLETE" ? "idle" : "typing",

package/apps/harness-dashboard/components/Scene.tsx

@@ -27,7 +27,6 @@ interface SceneProps {
 
 export function Scene({ snapshot: initial, lang = "ko" }: SceneProps) {
   const { snapshot, connectionState } = useHarnessStream(initial);
-  const [drawerOpen, setDrawerOpen] = useState(false);
   const [drawerTab, setDrawerTab] = useState<DrawerTab>("mission-flow");
   const [selectedAgent, setSelectedAgent] = useState<AgentState | null>(null);
   const [selectedNode, setSelectedNode] = useState<OrgNodeDef | null>(null);
@@ -38,7 +37,6 @@ export function Scene({ snapshot: initial, lang = "ko" }: SceneProps) {
     setSelectedAgent(a);
     setSelectedNode(null);
     setDrawerTab("logs");
-    setDrawerOpen(true);
   };
 
   const handleNodeClick = (node: OrgNodeDef) => {
@@ -55,7 +53,6 @@ export function Scene({ snapshot: initial, lang = "ko" }: SceneProps) {
     } else {
       setDrawerTab("mission-flow");
     }
-    setDrawerOpen(true);
   };
 
   const handleMissionClick = (mission: MissionDoc) => {
@@ -63,7 +60,6 @@ export function Scene({ snapshot: initial, lang = "ko" }: SceneProps) {
     setSelectedNode(null);
     setSelectedAgent(null);
     setDrawerTab("mission-flow");
-    setDrawerOpen(true);
   };
 
   const drawerTitle =
@@ -74,60 +70,126 @@ export function Scene({ snapshot: initial, lang = "ko" }: SceneProps) {
       : selectedNode
       ? selectedNode.label
       : "Mission Flow";
+  const drawerScrollResetKey = [
+    drawerTab,
+    selectedMission?.missionId ?? "",
+    selectedNode?.id ?? "",
+    selectedAgent?.id ?? "",
+  ].join(":");
 
   // Suppress unused lang warning — kept for future i18n
   void lang;
 
   return (
-    <div className="mx-auto max-w-[1920px] px-4 py-5">
+    <div className="flex h-[100dvh] w-full flex-col overflow-hidden px-4 py-5">
       {snapshot.escalations.length > 0 && (
         <EscalationStrip escalations={snapshot.escalations} />
       )}
-      <div className="min-w-0">
-        <section className="min-w-0">
-          <div className="mb-3 flex flex-wrap items-end justify-between gap-3">
-            <div>
-              <p className="text-[11px] font-mono uppercase tracking-[0.24em] text-cyan-300/80">
-                Company Structure
-              </p>
-              <h1 className="mt-1 text-2xl font-semibold text-gray-100">
-                {snapshot.projectName || "walwal-harness"} · Organization
-              </h1>
+      <div className="grid min-h-0 flex-1 min-w-0 gap-4 lg:grid-cols-2">
+        <div className="scrollbar-hidden min-h-0 min-w-0 overflow-y-auto pr-1">
+          <section className="min-w-0">
+            <div className="mb-3 flex flex-wrap items-end justify-between gap-3">
+              <div>
+                <p className="text-[11px] font-mono uppercase tracking-[0.24em] text-cyan-300/80">
+                  Company Structure
+                </p>
+                <h1 className="mt-1 text-2xl font-semibold text-gray-100">
+                  {snapshot.projectName || "walwal-harness"} · Organization
+                </h1>
+              </div>
+              <ActivityIndicator snapshot={snapshot} connectionState={connectionState} />
             </div>
-            <ActivityIndicator snapshot={snapshot} connectionState={connectionState} />
-          </div>
-          <div
-            data-testid="brick-office-stage"
-            className="w-full overflow-hidden rounded-md border border-gray-700/80 bg-[#12151b] shadow-2xl"
-          >
-            <div className="pointer-events-none flex items-center justify-between border-b border-white/10 bg-black/30 px-4 py-2 font-mono text-[10px] text-gray-300 backdrop-blur">
-              <span>Owner → CEO → CXX → Workers</span>
-              <span>
-                {snapshot.missions?.[0]?.missionId ?? "no active mission"}
-                {snapshot.missions?.[0]?.cxxPresent.length
-                  ? ` · ${snapshot.missions[0].cxxPresent.join(" / ")}`
-                  : ""}
-              </span>
+            <div
+              data-testid="brick-office-stage"
+              className="w-full overflow-x-auto rounded-md border border-gray-700/80 bg-[#12151b] shadow-2xl"
+            >
+              <div className="pointer-events-none flex items-center justify-between gap-3 border-b border-white/10 bg-black/30 px-4 py-2 font-mono text-[10px] text-gray-300 backdrop-blur">
+                <span>Owner → CEO → CXX → Workers</span>
+                <span className="truncate">
+                  {snapshot.missions?.[0]?.missionId ?? "no active mission"}
+                  {snapshot.missions?.[0]?.cxxPresent.length
+                    ? ` · ${snapshot.missions[0].cxxPresent.join(" / ")}`
+                    : ""}
+                </span>
+              </div>
+              <OrgTree
+                snapshot={snapshot}
+                activeNodeId={selectedNode?.id ?? null}
+                onNodeClick={handleNodeClick}
+              />
+            </div>
+          </section>
+
+          <section className="mt-4">
+            <div className="mb-2">
+              <p className="font-mono text-[10px] uppercase tracking-[0.2em] text-cyan-300/60">Mission History</p>
+              <p className="text-[11px] text-gray-500 mt-0.5">goal · submission · hot-fix 명령별 파생 작업 흐름</p>
             </div>
-            <OrgTree
-              snapshot={snapshot}
-              activeNodeId={selectedNode?.id ?? null}
-              onNodeClick={handleNodeClick}
+            <MissionTimeline
+              missions={snapshot.missions ?? []}
+              activeMissionId={selectedMission?.missionId ?? null}
+              onMissionClick={handleMissionClick}
             />
-          </div>
-        </section>
+          </section>
+        </div>
 
-        <section className="mt-4">
-          <div className="mb-2">
-            <p className="font-mono text-[10px] uppercase tracking-[0.2em] text-cyan-300/60">Mission History</p>
-            <p className="text-[11px] text-gray-500 mt-0.5">goal · submission · hot-fix 명령별 파생 작업 흐름</p>
-          </div>
-          <MissionTimeline
-            missions={snapshot.missions ?? []}
-            activeMissionId={selectedMission?.missionId ?? null}
-            onMissionClick={handleMissionClick}
-          />
-        </section>
+        <div className="min-h-0 min-w-0">
+          <Drawer
+            mode="inline"
+            open={true}
+            tab={drawerTab}
+            title={drawerTitle}
+            onClose={() => undefined}
+            onTabChange={setDrawerTab}
+            scrollResetKey={drawerScrollResetKey}
+          >
+            {drawerTab === "mission-flow" && (
+              <MissionFlowTab
+                mission={selectedMission ?? snapshot.missions?.[0] ?? null}
+                ownerHistory={snapshot.ownerHistory ?? []}
+              />
+            )}
+            {drawerTab === "history" && (
+              <OwnerHistoryTab
+                ownerHistory={snapshot.ownerHistory ?? []}
+                mission={selectedMission ?? snapshot.missions?.[0] ?? null}
+              />
+            )}
+            {drawerTab === "gotchas" && (
+              <GotchasTab gotchas={snapshot.gotchas ?? []} />
+            )}
+            {drawerTab === "mission-doc" && selectedNode && (
+              <MissionDocTab
+                missions={snapshot.missions ?? []}
+                role={
+                  selectedNode.role === "owner"
+                    ? "ceo"
+                    : (selectedNode.role as "ceo" | "cto" | "cqo" | "coo" | "cdo" | "ops")
+                }
+                fromLabel={selectedNode.role === "ceo" ? "Owner" : "CEO"}
+                toLabel={
+                  selectedNode.role === "cto"
+                    ? "Workers"
+                    : selectedNode.role === "cqo"
+                    ? "Owner Report"
+                    : "—"
+                }
+              />
+            )}
+            {drawerTab === "logs" && selectedNode && (
+              <AgentLogTab agentId={selectedNode.agentIds[0] ?? selectedNode.id} />
+            )}
+            {drawerTab === "logs" && selectedAgent && !selectedNode && (
+              <AgentLogTab agentId={selectedAgent.id} />
+            )}
+            {drawerTab === "logs" && !selectedNode && !selectedAgent && (
+              <div className="text-gray-500 text-xs">Select a node to view logs.</div>
+            )}
+            {drawerTab === "mission-flow" && !selectedMission && !snapshot.missions?.length && (
+              <div className="text-gray-500 text-xs">No missions found in .harness/documents/</div>
+            )}
+          </Drawer>
+        </div>
       </div>
 
       {/* Hidden DOM index for E2E + a11y */}
@@ -153,60 +215,6 @@ export function Scene({ snapshot: initial, lang = "ko" }: SceneProps) {
           </li>
         ))}
       </ul>
-
-      <Drawer
-        open={drawerOpen}
-        tab={drawerTab}
-        title={drawerTitle}
-        onClose={() => setDrawerOpen(false)}
-        onTabChange={setDrawerTab}
-      >
-        {drawerTab === "mission-flow" && (
-          <MissionFlowTab
-            mission={selectedMission ?? snapshot.missions?.[0] ?? null}
-            ownerHistory={snapshot.ownerHistory ?? []}
-          />
-        )}
-        {drawerTab === "history" && (
-          <OwnerHistoryTab
-            ownerHistory={snapshot.ownerHistory ?? []}
-            mission={selectedMission ?? snapshot.missions?.[0] ?? null}
-          />
-        )}
-        {drawerTab === "gotchas" && (
-          <GotchasTab gotchas={snapshot.gotchas ?? []} />
-        )}
-        {drawerTab === "mission-doc" && selectedNode && (
-          <MissionDocTab
-            missions={snapshot.missions ?? []}
-            role={
-              selectedNode.role === "owner"
-                ? "ceo"
-                : (selectedNode.role as "ceo" | "cto" | "cqo" | "coo" | "cdo" | "ops")
-            }
-            fromLabel={selectedNode.role === "ceo" ? "Owner" : "CEO"}
-            toLabel={
-              selectedNode.role === "cto"
-                ? "Workers"
-                : selectedNode.role === "cqo"
-                ? "Owner Report"
-                : "—"
-            }
-          />
-        )}
-        {drawerTab === "logs" && selectedNode && (
-          <AgentLogTab agentId={selectedNode.agentIds[0] ?? selectedNode.id} />
-        )}
-        {drawerTab === "logs" && selectedAgent && !selectedNode && (
-          <AgentLogTab agentId={selectedAgent.id} />
-        )}
-        {drawerTab === "logs" && !selectedNode && !selectedAgent && (
-          <div className="text-gray-500 text-xs">Select a node to view logs.</div>
-        )}
-        {drawerTab === "mission-flow" && !selectedMission && !snapshot.missions?.length && (
-          <div className="text-gray-500 text-xs">No missions found in .harness/documents/</div>
-        )}
-      </Drawer>
     </div>
   );
 }

package/package.json

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