@walwal-harness/cli 7.1.26 → 7.1.28

package/README.md

@@ -52,6 +52,9 @@ What `init` installs:
 | `.claude/commands/hot-fix.md` | `/hot-fix` Owner command |
 | `.claude/skills/harness-{ceo,coo,cdo,cto,cqo,ops}/` | CXX agent skills |
 | `.harness/shared/HR-Resource/` | Hireable worker skill pool |
+| `.harness/events.jsonl` | Structured append-only runtime event stream |
+| `.harness/todos/state.json` | Machine-readable CXX todo queues |
+| `.harness/todos/events.jsonl` | Structured todo transition history |
 | `AGENTS.md` ← `CLAUDE.md` symlink | Project harness config |
 
 ---
@@ -106,6 +109,7 @@ Owner /submission → CEO → [relevant CXX] → [workers] → [convention updat
 | 8 | No verdict without worker evidence — CQO self-inspection is not valid |
 | 9 | Hierarchical worker ownership — worker reports live under `.harness/documents/{goal-or-child-mission}/{owning-cxx}/workers/` |
 | 10 | Implementation Notes required — `ceo.md`, every `{cxx}.md`, and every worker report must end with one English `## Implementation Notes` section in the same file |
+| 11 | Structured runtime state — queues, heartbeats, preemption/resume state, and harness-parsed evidence belong in JSON/JSONL, not free-form Markdown |
 
 ### Implementation Notes Format
 
@@ -133,7 +137,7 @@ Use `None` when a subsection has no entries. This section is mandatory even for
 
 ## Harness Dashboard
 
-The harness ships with a real-time dashboard that reads `.harness/documents/` directly.
+The harness ships with a real-time dashboard that reads `.harness/` runtime state directly. The current dashboard is process-oriented: it highlights CXX todo readiness, active workers, incidents, mission flow, and structured runtime events alongside the organization view.
 
 ```bash
 bash scripts/harness-dashboard-up.sh
@@ -199,6 +203,8 @@ npx walwal-harness init --force --project-root /path/to/project
 
 Features:
 
+- **Company Harness Observatory** — glass/aurora process monitor showing active CXX todos, workers, incidents, missions, and current loop state
+- **Structured Runtime State** — `/goal`, `/submission`, and `/hot-fix` append to `.harness/events.jsonl` and update `.harness/todos/state.json`; `migrate` backfills these files for existing projects
 - **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 created only from hired `hr-roster.json` entries backed by `.harness/shared/HR-Resource/{worker}/SKILL.md`; running hired workers are highlighted under their owning CXX
 - **Mission Timeline** — clickable history of goal/submission/hot-fix missions showing the full dispatch chain
@@ -253,6 +259,7 @@ harness-hiring           → register and onboard worker
 
 | Version | Summary |
 |---|---|
+| 7.1.28 | Dashboard APM rewrite: top header consolidation, Knowledge Base panel (gotchas/conventions), Layer Activity (CEO/CXX/Worker TODO·DONE·Remain via goal-scope inference), Recent Report list (worker mtime desc), Cadence strip with click-to-prompt tooltip in local timezone, heatmap click-tooltip with empty-cell guard, Document Viewer expand-to-50vw with docmeta hidden, Command Log bubble popover |
 | 7.1.19 | `migrate` now carries OPS verification rules into existing installs: runtime.verification merge, HARNESS refresh, and AGENTS migration block |
 | 7.1.18 | OPS watches CQO runnable verification and production incidents; Implementation Notes stay in the same role/worker report |
 | 7.1.17 | Dashboard: fix /submission and /hot-fix missions displaying as /goal; runtime strip shows live owner command in mission flow tab |

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

@@ -5,9 +5,10 @@
 html,
 body {
   background:
-    radial-gradient(circle at 12% 0%, rgba(34, 211, 238, 0.08), transparent 26rem),
-    radial-gradient(circle at 88% 6%, rgba(251, 191, 36, 0.06), transparent 24rem),
-    #101216;
+    radial-gradient(circle at 16% -8%, rgba(125, 211, 252, 0.24), transparent 30rem),
+    radial-gradient(circle at 78% 2%, rgba(216, 180, 254, 0.2), transparent 28rem),
+    radial-gradient(circle at 52% 104%, rgba(52, 211, 153, 0.14), transparent 34rem),
+    linear-gradient(135deg, #080b13 0%, #101728 48%, #070910 100%);
   color: #e5e7eb;
 }
 
@@ -24,3 +25,164 @@ body {
 .scrollbar-hidden::-webkit-scrollbar {
   display: none;
 }
+
+/* hide scrollbars globally — scroll still works via wheel/drag/touch */
+* {
+  scrollbar-width: none;
+  -ms-overflow-style: none;
+}
+*::-webkit-scrollbar {
+  width: 0;
+  height: 0;
+  display: none;
+}
+
+/* document viewer aside expand/minimize */
+.doc-aside {
+  width: 380px;
+  transition: width 280ms cubic-bezier(0.4, 0, 0.2, 1);
+}
+.doc-aside.expanded {
+  width: 50vw;
+}
+.doc-toggle-icon {
+  transition: transform 280ms ease;
+  display: inline-block;
+}
+
+/* panel / inset shells (translated from mockup) */
+.panel-shell {
+  border-radius: 6px;
+  border: 1px solid rgba(148, 163, 184, 0.18);
+  background: #0b1328;
+  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.25);
+  transition: border-color 200ms ease, box-shadow 200ms ease, transform 200ms ease;
+}
+.panel-shell:hover {
+  border-color: rgba(34, 211, 238, 0.25);
+  box-shadow: 0 16px 50px rgba(0, 0, 0, 0.4), 0 0 0 1px rgba(34, 211, 238, 0.1);
+}
+.inset-shell {
+  border-radius: 4px;
+  border: 1px solid rgba(15, 23, 42, 0.9);
+  background: #071022;
+  transition: border-color 200ms ease, transform 160ms ease;
+}
+
+/* ==== Dynamic / animated bits ==== */
+
+/* Panel mount fade-in (used on initial render) */
+@keyframes fade-in-up {
+  from { opacity: 0; transform: translateY(6px); }
+  to   { opacity: 1; transform: translateY(0); }
+}
+.fade-in {
+  animation: fade-in-up 360ms cubic-bezier(0.2, 0.8, 0.2, 1) both;
+}
+
+/* List item slide-in (Recent Report cards) */
+@keyframes slide-in-fade {
+  from { opacity: 0; transform: translateX(-6px); }
+  to   { opacity: 1; transform: translateX(0); }
+}
+.slide-in {
+  animation: slide-in-fade 280ms ease-out both;
+}
+
+/* Heatmap cell baseline transition */
+.heat-cell {
+  transition: transform 140ms ease, filter 140ms ease, border-color 140ms ease;
+}
+
+/* Cadence cell soft pulse when count is at peak */
+@keyframes cad-pulse {
+  0%, 100% { filter: brightness(1); }
+  50%      { filter: brightness(1.4); }
+}
+.cad-peak {
+  animation: cad-pulse 1800ms ease-in-out infinite;
+}
+
+/* Tooltip / popover enter */
+@keyframes pop-in {
+  from { opacity: 0; transform: scale(0.96) translateY(4px); }
+  to   { opacity: 1; transform: scale(1) translateY(0); }
+}
+.pop-in {
+  animation: pop-in 180ms cubic-bezier(0.2, 0.9, 0.3, 1) both;
+}
+
+/* Stacked bar segment width tween */
+.stack-seg {
+  will-change: flex-grow;
+}
+
+/* Worker bar inner shimmer for active CXX (very subtle) */
+@keyframes shimmer-sweep {
+  0%   { background-position: -200% 0; }
+  100% { background-position: 200% 0; }
+}
+.shimmer {
+  background-image: linear-gradient(
+    100deg,
+    rgba(255, 255, 255, 0) 30%,
+    rgba(255, 255, 255, 0.18) 50%,
+    rgba(255, 255, 255, 0) 70%
+  );
+  background-size: 200% 100%;
+  animation: shimmer-sweep 3.2s linear infinite;
+}
+
+.glass-panel {
+  border: 1px solid rgba(255, 255, 255, 0.14);
+  background:
+    linear-gradient(135deg, rgba(255, 255, 255, 0.12), rgba(255, 255, 255, 0.045)),
+    rgba(7, 10, 18, 0.58);
+  box-shadow: 0 24px 80px rgba(0, 0, 0, 0.34), inset 0 1px 0 rgba(255, 255, 255, 0.16);
+  backdrop-filter: blur(22px) saturate(150%);
+}
+
+.brutal-tile {
+  border: 1px solid rgba(255, 255, 255, 0.18);
+  background: rgba(3, 7, 18, 0.64);
+  box-shadow: 4px 4px 0 rgba(0, 0, 0, 0.34);
+}
+
+.aurora-line {
+  background: linear-gradient(90deg, #67e8f9, #c084fc, #f0abfc, #34d399);
+}
+
+.isometric-stage {
+  background:
+    radial-gradient(circle at 48% 42%, rgba(34, 211, 238, 0.18), transparent 20rem),
+    radial-gradient(circle at 78% 24%, rgba(99, 102, 241, 0.14), transparent 18rem),
+    radial-gradient(circle at 20% 84%, rgba(16, 185, 129, 0.12), transparent 22rem),
+    linear-gradient(135deg, rgba(2, 6, 23, 0.94), rgba(8, 13, 26, 0.98));
+}
+
+@keyframes apm-request-fall {
+  0% {
+    opacity: 0;
+    top: -12px;
+    transform: translateX(-50%) scale(0.75);
+  }
+  12% {
+    opacity: 1;
+  }
+  82% {
+    opacity: 1;
+  }
+  100% {
+    opacity: 0;
+    top: 184px;
+    transform: translateX(-50%) scale(1.15);
+  }
+}
+
+.apm-falling-dot {
+  top: -12px;
+  animation-name: apm-request-fall;
+  animation-timing-function: linear;
+  animation-iteration-count: infinite;
+  box-shadow: 0 0 14px currentColor;
+}

package/apps/harness-dashboard/app/layout.tsx

@@ -1,7 +1,6 @@
 import path from "node:path";
 import type { Metadata } from "next";
 import "./globals.css";
-import { Header } from "@/components/Header";
 import { resolveHarnessRoot } from "@/lib/harness-root";
 
 export async function generateMetadata(): Promise<Metadata> {
@@ -20,10 +19,7 @@ export default function RootLayout({
 }) {
   return (
     <html lang="ko">
-      <body>
-        <Header />
-        {children}
-      </body>
+      <body>{children}</body>
     </html>
   );
 }

package/apps/harness-dashboard/app/page.tsx

@@ -10,26 +10,22 @@ export default function Page() {
   const banner = snapshot.errorBanner;
 
   return (
-    <main className="min-h-[100dvh]">
+    <main className="h-[100dvh]">
       {banner && (
         <div
           role="alert"
           data-testid="error-banner"
-          className={`mx-auto max-w-[1280px] mt-4 px-4 py-3 rounded border text-sm ${
+          className={`mx-3 mt-2 rounded border px-3 py-2 text-xs ${
             banner.level === "error"
               ? "border-aura-alert/60 bg-aura-alert/10 text-aura-alert"
               : "border-aura-talking/60 bg-aura-talking/10 text-aura-talking"
           }`}
         >
           <div>{banner.message_ko}</div>
-          <div className="opacity-60 text-xs mt-1">{banner.message_en}</div>
+          <div className="mt-1 text-[10px] opacity-60">{banner.message_en}</div>
         </div>
       )}
       <Scene snapshot={snapshot} />
-      <footer className="mx-auto max-w-[1280px] px-6 pb-8 text-xs text-gray-500 font-mono flex items-center justify-between">
-        <span>Sprint 1 / Phase C-1 — Foundation</span>
-        <span data-testid="snapshot-ts">{snapshot.ts}</span>
-      </footer>
     </main>
   );
 }

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

@@ -52,14 +52,14 @@ export function Drawer({ open, tab, title, onClose, onTabChange, children, mode
         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"
+        className="glass-panel h-full min-h-0 rounded-lg 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">
+        <header className="flex items-center justify-between border-b border-white/10 px-4 py-3">
+          <h2 className="text-sm font-semibold tracking-tight text-gray-100 truncate">
             {title}
           </h2>
         </header>
-        <nav className="flex flex-wrap border-b border-brick-wall text-[11px] font-mono">
+        <nav className="flex flex-wrap border-b border-white/10 px-2 py-2 text-[11px] font-mono">
           {TABS.map((t) => (
             <button
               key={t.id}
@@ -67,10 +67,10 @@ export function Drawer({ open, tab, title, onClose, onTabChange, children, mode
               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 ${
+              className={`min-w-[33%] flex-1 rounded-md 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"
+                  ? "bg-white/12 text-gray-100 shadow-inner"
+                  : "text-gray-500 hover:bg-white/6 hover:text-gray-200"
               }`}
             >
               {t.label}

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

@@ -140,7 +140,7 @@ export function MissionTimeline({
 }: Props) {
   if (!missions.length) {
     return (
-      <div className="rounded border border-dashed border-gray-700 px-3 py-4 text-center text-[11px] text-gray-500">
+      <div className="glass-panel rounded-lg px-3 py-4 text-center text-[11px] text-gray-500">
         No missions found in .harness/documents/
       </div>
     );
@@ -178,10 +178,10 @@ export function MissionTimeline({
             key={mission.missionId}
             type="button"
             onClick={() => onMissionClick(mission)}
-            className={`w-full rounded border px-3 py-2.5 text-left transition-colors ${
+            className={`w-full rounded-lg px-3 py-2.5 text-left transition-colors ${
               isActive
-                ? "border-cyan-400/40 bg-cyan-400/5"
-                : "border-gray-700/40 bg-black/10 hover:border-gray-600/50"
+                ? "glass-panel"
+                : "border border-white/10 bg-white/[0.035] hover:border-white/20"
             }`}
           >
             <div className="flex items-start justify-between gap-2 mb-1.5">

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

@@ -50,7 +50,7 @@ function OrgCard({
     <button
       type="button"
       onClick={() => onClick(node)}
-      className={`relative rounded-lg border p-3 text-left transition-all cursor-pointer ${roleColor} ${widths[size]} ${active ? "ring-2 ring-cyan-300 border-cyan-300/60" : "hover:border-white/30"}`}
+      className={`brutal-tile relative rounded-md p-3 text-left transition-all cursor-pointer ${roleColor} ${widths[size]} ${active ? "ring-2 ring-cyan-300 border-cyan-300/80" : "hover:border-white/35"}`}
     >
       <StatusDot status={node.status} />
       <div className="font-mono text-[9px] uppercase tracking-[0.2em] text-gray-500 mb-0.5">{node.role}</div>
@@ -263,7 +263,7 @@ export function OrgTree({ snapshot, activeNodeId, onNodeClick }: OrgTreeProps) {
 
   return (
     <div className="select-none">
-      <div className="flex items-center justify-between border-b border-white/10 bg-black/20 px-3 py-2">
+      <div className="flex items-center justify-between border-b border-white/10 bg-white/5 px-3 py-2 backdrop-blur">
         <div className="min-w-0">
           {currentMission && (
             <div className="truncate font-mono text-[10px] text-cyan-300/70">
@@ -275,7 +275,7 @@ export function OrgTree({ snapshot, activeNodeId, onNodeClick }: OrgTreeProps) {
           <button
             type="button"
             onClick={() => setBoundedZoom(zoom - 0.08)}
-            className="h-7 w-7 rounded border border-gray-700 bg-gray-900/80 font-mono text-xs text-gray-200 hover:border-cyan-300/60"
+            className="h-7 w-7 rounded-md border border-white/15 bg-black/35 font-mono text-xs text-gray-200 hover:border-cyan-300/60"
             title="Zoom out"
           >
             -
@@ -283,7 +283,7 @@ export function OrgTree({ snapshot, activeNodeId, onNodeClick }: OrgTreeProps) {
           <button
             type="button"
             onClick={() => setBoundedZoom(defaultZoom)}
-            className="h-7 min-w-12 rounded border border-gray-700 bg-gray-900/80 px-2 font-mono text-[10px] text-gray-300 hover:border-cyan-300/60"
+            className="h-7 min-w-12 rounded-md border border-white/15 bg-black/35 px-2 font-mono text-[10px] text-gray-300 hover:border-cyan-300/60"
             title="Reset zoom"
           >
             {Math.round(zoom * 100)}%
@@ -291,7 +291,7 @@ export function OrgTree({ snapshot, activeNodeId, onNodeClick }: OrgTreeProps) {
           <button
             type="button"
             onClick={() => setBoundedZoom(zoom + 0.08)}
-            className="h-7 w-7 rounded border border-gray-700 bg-gray-900/80 font-mono text-xs text-gray-200 hover:border-cyan-300/60"
+            className="h-7 w-7 rounded-md border border-white/15 bg-black/35 font-mono text-xs text-gray-200 hover:border-cyan-300/60"
             title="Zoom in"
           >
             +
@@ -306,7 +306,7 @@ export function OrgTree({ snapshot, activeNodeId, onNodeClick }: OrgTreeProps) {
         onPointerMove={handlePointerMove}
         onPointerUp={endDrag}
         onPointerCancel={endDrag}
-        className="scrollbar-hidden h-[390px] cursor-grab overflow-auto active:cursor-grabbing"
+        className="scrollbar-hidden isometric-stage h-[390px] cursor-grab overflow-auto active:cursor-grabbing"
       >
         <div
           className="relative"
@@ -417,7 +417,7 @@ export function OrgTree({ snapshot, activeNodeId, onNodeClick }: OrgTreeProps) {
                             agentIds: [],
                           })
                         }
-                        className={`relative rounded border px-2 py-1.5 text-left min-w-[130px] max-w-[160px] transition-all hover:border-white/20 ${
+                        className={`brutal-tile relative rounded-md px-2 py-1.5 text-left min-w-[130px] max-w-[160px] transition-all hover:border-white/25 ${
                           workerActive
                             ? "border-cyan-300/70 bg-cyan-400/10 shadow-[0_0_18px_rgba(34,211,238,0.18)]"
                             : "border-gray-700/40 bg-gray-800/30"