@walwal-harness/cli 7.1.7 → 7.1.9

package/apps/harness-dashboard/components/drawer/GotchasTab.tsx

@@ -0,0 +1,89 @@
+"use client";
+import { useState } from "react";
+import type { GotchaEntry } from "@/lib/types";
+import { MarkdownView } from "@/lib/markdown";
+
+interface Props {
+  gotchas: GotchaEntry[];
+}
+
+export function GotchasTab({ gotchas }: Props) {
+  const [selected, setSelected] = useState<GotchaEntry | null>(null);
+  const [search, setSearch] = useState("");
+
+  if (selected) {
+    return (
+      <div className="space-y-3">
+        <button
+          type="button"
+          onClick={() => setSelected(null)}
+          className="flex items-center gap-1.5 font-mono text-[10px] text-cyan-400/70 hover:text-cyan-300 transition-colors"
+        >
+          ← Back
+        </button>
+        <div className="font-mono text-[10px] text-gray-500">
+          .harness/gotchas/{selected.id}.md
+        </div>
+        <MarkdownView source={selected.content} />
+      </div>
+    );
+  }
+
+  const filtered = search.trim()
+    ? gotchas.filter(
+        (g) =>
+          g.title.toLowerCase().includes(search.toLowerCase()) ||
+          g.id.toLowerCase().includes(search.toLowerCase()) ||
+          g.tags.some((t) => t.toLowerCase().includes(search.toLowerCase()))
+      )
+    : gotchas;
+
+  if (gotchas.length === 0) {
+    return <div className="text-gray-500 text-xs">No gotchas found in .harness/gotchas/</div>;
+  }
+
+  return (
+    <div className="space-y-2">
+      {/* Search */}
+      <input
+        type="text"
+        value={search}
+        onChange={(e) => setSearch(e.target.value)}
+        placeholder="Search gotchas…"
+        className="w-full rounded border border-gray-700/60 bg-black/30 px-2.5 py-1.5 font-mono text-[11px] text-gray-300 placeholder-gray-600 focus:border-cyan-400/40 focus:outline-none"
+      />
+
+      <div className="font-mono text-[9px] text-gray-600 px-0.5">
+        {filtered.length} / {gotchas.length} gotchas
+      </div>
+
+      <div className="space-y-1.5">
+        {filtered.map((g) => (
+          <button
+            key={g.id}
+            type="button"
+            onClick={() => setSelected(g)}
+            className="w-full text-left rounded border border-gray-700/50 bg-black/20 px-3 py-2 hover:border-amber-400/30 hover:bg-amber-400/5 transition-colors group"
+          >
+            <div className="font-mono text-[11px] text-gray-200 group-hover:text-amber-200 leading-snug">
+              {g.title}
+            </div>
+            <div className="font-mono text-[9px] text-gray-600 mt-0.5">{g.id}</div>
+            {g.tags.length > 0 && (
+              <div className="flex flex-wrap gap-1 mt-1">
+                {g.tags.slice(0, 5).map((tag) => (
+                  <span
+                    key={tag}
+                    className="rounded bg-gray-700/40 px-1.5 py-0.5 font-mono text-[8px] text-gray-500"
+                  >
+                    {tag}
+                  </span>
+                ))}
+              </div>
+            )}
+          </button>
+        ))}
+      </div>
+    </div>
+  );
+}

package/apps/harness-dashboard/components/drawer/HypothesisTab.tsx

@@ -0,0 +1,42 @@
+"use client";
+import type { HypothesisEntry } from "@/lib/types";
+
+const VERDICT_TONE: Record<string, string> = {
+  pending: "border-aura-talking/40 bg-aura-talking/10 text-aura-talking",
+  valid: "border-aura-typing/40 bg-aura-typing/10 text-aura-typing",
+  invalid: "border-aura-alert/40 bg-aura-alert/10 text-aura-alert",
+};
+
+interface HypothesisTabProps {
+  hypothesis: HypothesisEntry[];
+}
+
+export function HypothesisTab({ hypothesis }: HypothesisTabProps) {
+  if (hypothesis.length === 0) {
+    return (
+      <div className="text-gray-500" data-testid="hypothesis-empty">
+        No active hypothesis.
+      </div>
+    );
+  }
+  return (
+    <ul className="space-y-2" data-testid="hypothesis-list">
+      {hypothesis.map((h) => (
+        <li
+          key={h.id}
+          data-testid={`hypothesis-row-${h.id}`}
+          className={`rounded border px-2 py-1.5 ${
+            VERDICT_TONE[h.verdict] ?? VERDICT_TONE.pending
+          }`}
+        >
+          <div className="flex items-center justify-between text-[11px]">
+            <span className="font-semibold">{h.id}</span>
+            <span className="uppercase tracking-wider text-[9px]">{h.verdict}</span>
+          </div>
+          <div className="mt-1 text-[11px] text-gray-100">{h.brief}</div>
+          {h.ts && <div className="mt-0.5 text-[9px] text-gray-500">{h.ts}</div>}
+        </li>
+      ))}
+    </ul>
+  );
+}

package/apps/harness-dashboard/components/drawer/IncidentsTab.tsx

@@ -0,0 +1,50 @@
+"use client";
+import type { IncidentEntry } from "@/lib/types";
+
+const SEVERITY_TONE: Record<string, string> = {
+  low: "border-aura-idle/40 bg-aura-idle/10 text-gray-300",
+  medium: "border-aura-talking/40 bg-aura-talking/10 text-aura-talking",
+  high: "border-aura-alert/40 bg-aura-alert/10 text-aura-alert",
+  critical: "border-aura-alert bg-aura-alert/30 text-aura-alert",
+};
+
+interface IncidentsTabProps {
+  incidents: IncidentEntry[];
+}
+
+export function IncidentsTab({ incidents }: IncidentsTabProps) {
+  if (incidents.length === 0) {
+    return (
+      <div className="text-gray-500" data-testid="incidents-empty">
+        No open incidents.
+      </div>
+    );
+  }
+  return (
+    <ul className="space-y-2" data-testid="incidents-list">
+      {incidents.map((it) => (
+        <li
+          key={it.id}
+          data-testid={`incident-${it.id}`}
+          className={`rounded border px-2 py-1.5 ${
+            SEVERITY_TONE[it.severity] ?? SEVERITY_TONE.medium
+          }`}
+        >
+          <div className="flex items-center justify-between text-[11px]">
+            <span className="font-semibold">{it.id}</span>
+            <span className="uppercase tracking-wider text-[9px]">
+              {it.severity}
+            </span>
+          </div>
+          <div className="text-[10px] opacity-80">dept: {it.dept}</div>
+          {it.message && (
+            <div className="mt-1 text-[11px] text-gray-100">{it.message}</div>
+          )}
+          {it.ts && (
+            <div className="mt-0.5 text-[9px] text-gray-500">{it.ts}</div>
+          )}
+        </li>
+      ))}
+    </ul>
+  );
+}

package/apps/harness-dashboard/components/drawer/MissionDocTab.tsx

@@ -0,0 +1,92 @@
+"use client";
+import { useState } from "react";
+import type { MissionDoc } from "@/lib/types";
+import { MarkdownView } from "@/lib/markdown";
+
+interface Props {
+  missions: MissionDoc[];
+  role: "ceo" | "cto" | "cqo" | "coo" | "cdo" | "ops" | "worker";
+  workerName?: string;
+  fromLabel: string;
+  toLabel: string;
+}
+
+export function MissionDocTab({ missions, role, workerName, fromLabel, toLabel }: Props) {
+  const [selectedIdx, setSelectedIdx] = useState(0);
+  const mission = missions[selectedIdx];
+
+  if (!missions.length) {
+    return (
+      <div className="text-gray-500">
+        No mission documents found in .harness/documents/
+      </div>
+    );
+  }
+
+  const getContent = (m: MissionDoc): string | null => {
+    if (role === "worker" && workerName) {
+      return m.workers.find((w) => w.name === workerName)?.content ?? null;
+    }
+    const cxxRole = role as Exclude<typeof role, "worker">;
+    return m[cxxRole] ?? null;
+  };
+
+  const content = getContent(mission);
+
+  return (
+    <div className="space-y-3">
+      {/* Routing breadcrumb */}
+      <div className="flex items-center gap-2 flex-wrap">
+        <span className="font-mono text-[9px] uppercase tracking-[0.2em] text-gray-500">flow</span>
+        <span className="rounded bg-amber-500/10 border border-amber-500/30 px-2 py-0.5 text-[10px] text-amber-300 font-mono">
+          {fromLabel}
+        </span>
+        <span className="text-gray-600">→</span>
+        <span className="rounded border border-cyan-400/30 bg-cyan-400/10 px-2 py-0.5 text-[10px] text-cyan-300 font-mono">
+          this
+        </span>
+        <span className="text-gray-600">→</span>
+        <span className="rounded border border-gray-600/40 bg-gray-800/30 px-2 py-0.5 text-[10px] text-gray-400 font-mono">
+          {toLabel}
+        </span>
+      </div>
+
+      {/* Mission selector */}
+      <div className="flex gap-1 flex-wrap">
+        {missions.slice(0, 6).map((m, i) => (
+          <button
+            key={m.missionId}
+            type="button"
+            onClick={() => setSelectedIdx(i)}
+            className={`rounded px-2 py-1 font-mono text-[9px] transition-colors ${
+              i === selectedIdx
+                ? "bg-cyan-400/15 text-cyan-300 border border-cyan-400/30"
+                : "text-gray-500 hover:text-gray-300 border border-transparent"
+            }`}
+          >
+            {i === 0 ? "current" : m.missionId.slice(0, 16)}
+          </button>
+        ))}
+      </div>
+
+      {/* Mission ID */}
+      <div className="font-mono text-[10px] text-gray-500">
+        {mission.missionId} · {new Date(mission.ts).toLocaleDateString()}
+      </div>
+
+      {/* Document content */}
+      {!content ? (
+        <div className="text-gray-500 text-[11px]">
+          No {role} document for this mission.
+          <div className="mt-1 text-[10px] text-gray-600">
+            Present: {mission.cxxPresent.join(", ") || "none"}
+          </div>
+        </div>
+      ) : (
+        <div className="rounded border border-gray-700/60 bg-black/20 p-3 max-h-[60vh] overflow-y-auto">
+          <MarkdownView source={content} />
+        </div>
+      )}
+    </div>
+  );
+}