feat: add advisor cockpit and artifact export

Co-authored-by: Codex <noreply@openai.com>

hackathon_advisor/agent.py

@@ -70,6 +70,29 @@ class AdvisorEngine:
             tool_events.append(ToolEvent("compare_ideas", "Compared the current idea board."))
             return self._result(normalized, corrections, response, state, tool_events, [], [], None, [], {})
 
+        if PLAN_RE.search(normalized) and state.get("ideas"):
+            idea = self._current_idea(state)
+            if idea is not None:
+                score, event = self.tools.score_idea(idea)
+                self._store_idea(state, idea)
+                tool_events.append(event)
+                plan, event = self.tools.make_plan(idea)
+                tool_events.append(event)
+                response = self._plan_response(idea, score, plan)
+                artifact = self._artifact(idea, score)
+                return self._result(
+                    normalized,
+                    corrections,
+                    response,
+                    state,
+                    tool_events,
+                    [],
+                    [],
+                    score,
+                    plan,
+                    artifact,
+                )
+
         title, pitch = idea_from_text(normalized)
         idea, event = self.tools.save_idea(state, title, pitch)
         tool_events.append(event)
@@ -155,6 +178,7 @@ class AdvisorEngine:
         plan: list[str],
         artifact: dict[str, Any],
     ) -> TurnResult:
+        self._record_trace(state, normalized_text, response, tool_events, score, plan, artifact)
         return TurnResult(
             normalized_text=normalized_text,
             corrections=corrections,
@@ -173,6 +197,41 @@ class AdvisorEngine:
             idea.to_dict() if item.get("id") == idea.id else item for item in state.get("ideas", [])
         ]
 
+    def _current_idea(self, state: dict[str, Any]) -> Idea | None:
+        current_id = state.get("current_idea_id")
+        for item in state.get("ideas", []):
+            if item.get("id") == current_id:
+                return Idea(**item)
+        if state.get("ideas"):
+            return Idea(**state["ideas"][-1])
+        return None
+
+    def _record_trace(
+        self,
+        state: dict[str, Any],
+        normalized_text: str,
+        response: str,
+        tool_events: list[ToolEvent],
+        score: ScoreCard | None,
+        plan: list[str],
+        artifact: dict[str, Any],
+    ) -> None:
+        trace = list(state.get("trace", []))
+        trace.append(
+            {
+                "input": normalized_text[:240],
+                "tools": [event.to_dict() for event in tool_events],
+                "verdict": score.verdict if score else "",
+                "overall": score.overall if score else None,
+                "plan_steps": len(plan),
+                "artifact_title": artifact.get("title", ""),
+                "response": response[:360],
+            }
+        )
+        state["trace"] = trace[-12:]
+        if artifact:
+            state["last_artifact"] = artifact
+
     def _align_score_with_whitespace(self, score: ScoreCard, item: WhitespaceItem) -> ScoreCard:
         if item.score < 0.70:
             return score
@@ -246,6 +305,7 @@ class AdvisorEngine:
         return {
             "title": idea.title,
             "verdict": score.verdict,
+            "overall": score.overall,
             "caption": f"Mothback inked my Build Small fate page: {idea.title} - {score.verdict}.",
             "seal": score.to_dict(),
         }

static/app.js

@@ -7,11 +7,17 @@ const ink = document.querySelector("#ink");
 const corrections = document.querySelector("#corrections");
 const projectsEl = document.querySelector("#projects");
 const whitespaceEl = document.querySelector("#whitespace");
+const ideasEl = document.querySelector("#ideas");
+const scoreEl = document.querySelector("#score");
+const planEl = document.querySelector("#plan");
+const traceEl = document.querySelector("#trace");
 const verdictEl = document.querySelector("#verdict");
 const overallEl = document.querySelector("#overall");
+const exportButton = document.querySelector("#export-artifact");
 
 let session = {};
 let clientPromise = Client.connect(window.location.origin);
+let currentArtifact = null;
 
 bootstrap();
 
@@ -19,11 +25,28 @@ form.addEventListener("submit", async (event) => {
   event.preventDefault();
   const message = input.value.trim();
   if (!message) return;
+  await runTurn(message);
+});
+
+document.querySelectorAll("[data-command]").forEach((button) => {
+  button.addEventListener("click", async () => {
+    await runTurn(button.dataset.command);
+  });
+});
+
+exportButton.addEventListener("click", () => {
+  if (!currentArtifact) return;
+  exportArtifact(currentArtifact);
+});
+
+async function runTurn(message) {
   input.value = "";
   submit.disabled = true;
+  setCommandDisabled(true);
   ink.textContent = "";
   ink.classList.remove("bleed", "gold");
   corrections.textContent = "";
+  planEl.innerHTML = "";
 
   try {
     const client = await clientPromise;
@@ -44,15 +67,20 @@ form.addEventListener("submit", async (event) => {
     ink.classList.add("bleed");
   } finally {
     submit.disabled = false;
+    setCommandDisabled(false);
     input.focus();
   }
-});
+}
 
 async function bootstrap() {
   const response = await fetch("/api/bootstrap");
   const data = await response.json();
   renderProjects(data.top_projects || []);
   renderWhitespace(data.whitespace || []);
+  renderIdeas([]);
+  renderScore(null);
+  renderPlan([]);
+  renderTrace([]);
 }
 
 function handleEvent(event) {
@@ -74,15 +102,63 @@ function handleEvent(event) {
     session = event.state || {};
     if (event.projects?.length) renderProjects(event.projects);
     if (event.whitespace?.length) renderWhitespace(event.whitespace);
+    renderIdeas(session.ideas || []);
+    renderTrace(session.trace || []);
+    renderPlan(event.plan || []);
     if (event.score) {
       verdictEl.textContent = event.score.verdict;
       overallEl.textContent = Number(event.score.overall).toFixed(1);
+      renderScore(event.score);
       ink.classList.toggle("bleed", event.score.verdict.startsWith("ECHO"));
       ink.classList.toggle("gold", event.score.verdict.startsWith("UNWRITTEN"));
     }
+    if (event.artifact?.title) {
+      currentArtifact = event.artifact;
+      exportButton.disabled = false;
+    }
+  }
+}
+
+function renderIdeas(ideas) {
+  ideasEl.innerHTML = "";
+  if (!ideas.length) {
+    ideasEl.innerHTML = `<div class="empty">No pages written.</div>`;
+    return;
+  }
+  for (const idea of ideas.slice(-4).reverse()) {
+    const score = idea.score?.overall ? Number(idea.score.overall).toFixed(1) : "0.0";
+    const item = document.createElement("div");
+    item.className = "idea";
+    item.innerHTML = `
+      <strong>${escapeHtml(idea.title)}</strong>
+      <p>${escapeHtml((idea.pitch || "").slice(0, 120))}</p>
+      <span>${escapeHtml(idea.score?.verdict || "DRAFT")} · ${score}</span>
+    `;
+    ideasEl.append(item);
   }
 }
 
+function renderScore(score) {
+  const rows = [
+    ["Originality", score?.originality || 0],
+    ["Delight", score?.delight || 0],
+    ["AI Need", score?.ai_necessity || 0],
+    ["Feasible", score?.feasibility || 0],
+    ["Prize Fit", score?.prize_fit || 0],
+  ];
+  scoreEl.innerHTML = rows
+    .map(
+      ([label, value]) => `
+        <div class="score-row">
+          <span>${label}</span>
+          <meter min="0" max="10" value="${value}"></meter>
+          <strong>${value}</strong>
+        </div>
+      `,
+    )
+    .join("");
+}
+
 function renderProjects(projects) {
   projectsEl.innerHTML = "";
   if (!projects.length) {
@@ -120,6 +196,143 @@ function renderWhitespace(items) {
   }
 }
 
+function renderPlan(steps) {
+  planEl.innerHTML = "";
+  if (!steps.length) {
+    planEl.innerHTML = `<li class="empty">No wax path pressed.</li>`;
+    return;
+  }
+  for (const step of steps) {
+    const item = document.createElement("li");
+    item.textContent = step;
+    planEl.append(item);
+  }
+}
+
+function renderTrace(trace) {
+  traceEl.innerHTML = "";
+  if (!trace.length) {
+    traceEl.innerHTML = `<div class="empty">No tool marks yet.</div>`;
+    return;
+  }
+  for (const event of trace.slice(-4).reverse()) {
+    const item = document.createElement("div");
+    item.className = "trace";
+    const tools = (event.tools || []).map((tool) => tool.name).join(" -> ") || "reply";
+    item.innerHTML = `
+      <strong>${escapeHtml(event.verdict || "TURN")} ${event.overall ? Number(event.overall).toFixed(1) : ""}</strong>
+      <p>${escapeHtml(tools)}</p>
+    `;
+    traceEl.append(item);
+  }
+}
+
+function setCommandDisabled(disabled) {
+  document.querySelectorAll(".command-row button").forEach((button) => {
+    button.disabled = disabled || (button.id === "export-artifact" && !currentArtifact);
+  });
+}
+
+function exportArtifact(artifact) {
+  const canvas = document.createElement("canvas");
+  canvas.width = 1200;
+  canvas.height = 675;
+  const ctx = canvas.getContext("2d");
+  drawParchment(ctx, canvas.width, canvas.height);
+  const seal = artifact.seal || {};
+  ctx.fillStyle = "#25160e";
+  ctx.font = "700 58px Georgia, serif";
+  wrapText(ctx, artifact.title, 78, 112, 760, 66);
+  ctx.font = "28px Georgia, serif";
+  ctx.fillStyle = "#6b4e35";
+  wrapText(ctx, artifact.caption || "", 82, 252, 720, 36);
+
+  ctx.save();
+  ctx.translate(930, 226);
+  ctx.rotate(-0.08);
+  ctx.fillStyle = artifact.verdict?.startsWith("UNWRITTEN") ? "#b68a12" : "#8d2d26";
+  ctx.beginPath();
+  ctx.arc(0, 0, 120, 0, Math.PI * 2);
+  ctx.fill();
+  ctx.fillStyle = "#fff0b5";
+  ctx.textAlign = "center";
+  ctx.font = "800 27px Inter, sans-serif";
+  wrapText(ctx, artifact.verdict || "UNWRITTEN", -92, -28, 184, 32, "center");
+  ctx.font = "700 58px Georgia, serif";
+  ctx.fillText(Number(artifact.overall || seal.overall || 0).toFixed(1), 0, 48);
+  ctx.restore();
+
+  const rows = [
+    ["Originality", seal.originality || 0],
+    ["Delight", seal.delight || 0],
+    ["AI Need", seal.ai_necessity || 0],
+    ["Feasible", seal.feasibility || 0],
+    ["Prize Fit", seal.prize_fit || 0],
+  ];
+  rows.forEach(([label, value], index) => {
+    const y = 418 + index * 34;
+    ctx.fillStyle = "#6b4e35";
+    ctx.font = "700 20px Inter, sans-serif";
+    ctx.fillText(label, 82, y);
+    ctx.fillStyle = "rgba(80, 47, 22, 0.22)";
+    ctx.fillRect(240, y - 17, 320, 16);
+    ctx.fillStyle = artifact.verdict?.startsWith("UNWRITTEN") ? "#2f7a49" : "#8d2d26";
+    ctx.fillRect(240, y - 17, 32 * Number(value), 16);
+    ctx.fillStyle = "#25160e";
+    ctx.fillText(String(value), 582, y);
+  });
+
+  const link = document.createElement("a");
+  link.download = `${slugify(artifact.title || "unwritten-page")}.png`;
+  link.href = canvas.toDataURL("image/png");
+  link.click();
+}
+
+function drawParchment(ctx, width, height) {
+  const gradient = ctx.createLinearGradient(0, 0, width, height);
+  gradient.addColorStop(0, "#ead7a7");
+  gradient.addColorStop(0.55, "#d4b476");
+  gradient.addColorStop(1, "#b98a4c");
+  ctx.fillStyle = gradient;
+  ctx.fillRect(0, 0, width, height);
+  ctx.fillStyle = "rgba(59, 33, 15, 0.16)";
+  for (let i = 0; i < 360; i += 1) {
+    const x = (i * 73) % width;
+    const y = (i * 37) % height;
+    ctx.fillRect(x, y, 2 + (i % 7), 1);
+  }
+  ctx.strokeStyle = "rgba(72, 39, 18, 0.42)";
+  ctx.lineWidth = 16;
+  ctx.strokeRect(28, 28, width - 56, height - 56);
+}
+
+function wrapText(ctx, text, x, y, maxWidth, lineHeight, align = "left") {
+  const words = String(text).split(/\s+/);
+  let line = "";
+  const originalAlign = ctx.textAlign;
+  ctx.textAlign = align;
+  for (const word of words) {
+    const next = line ? `${line} ${word}` : word;
+    if (ctx.measureText(next).width > maxWidth && line) {
+      ctx.fillText(line, align === "center" ? x + maxWidth / 2 : x, y);
+      line = word;
+      y += lineHeight;
+    } else {
+      line = next;
+    }
+  }
+  if (line) ctx.fillText(line, align === "center" ? x + maxWidth / 2 : x, y);
+  ctx.textAlign = originalAlign;
+}
+
+function slugify(value) {
+  return String(value)
+    .toLowerCase()
+    .replace(/[^a-z0-9]+/g, "-")
+    .replace(/^-|-$/g, "")
+    .slice(0, 60);
+}
+
 function escapeHtml(value) {
   return String(value)
     .replaceAll("&", "&amp;")

static/index.html

@@ -26,6 +26,14 @@
               />
               <button id="submit" type="submit" title="Ink the page">Ink</button>
             </form>
+            <div class="command-row" aria-label="Advisor commands">
+              <button type="button" data-command="write bolder and find whitespace" title="Find a gold margin">
+                Gap
+              </button>
+              <button type="button" data-command="make a build plan" title="Draft a build plan">Plan</button>
+              <button type="button" data-command="compare ideas" title="Compare the idea board">Rank</button>
+              <button type="button" id="export-artifact" title="Export the current fate page" disabled>PNG</button>
+            </div>
             <div id="corrections" class="corrections" aria-live="polite"></div>
           </section>
 
@@ -34,7 +42,12 @@
               <span id="verdict">UNWRITTEN</span>
               <strong id="overall">0.0</strong>
             </div>
+            <div id="score" class="score-grid" aria-label="Seal quadrants"></div>
             <div class="panels">
+              <article>
+                <h2>Idea Board</h2>
+                <div id="ideas" class="idea-list"></div>
+              </article>
               <article>
                 <h2>Echoes</h2>
                 <div id="projects" class="project-list"></div>
@@ -43,6 +56,14 @@
                 <h2>Gold Margins</h2>
                 <div id="whitespace" class="whitespace-list"></div>
               </article>
+              <article>
+                <h2>Build Plan</h2>
+                <ol id="plan" class="plan-list"></ol>
+              </article>
+              <article>
+                <h2>Trace</h2>
+                <div id="trace" class="trace-list"></div>
+              </article>
             </div>
           </section>
         </div>

static/styles.css

@@ -160,11 +160,34 @@ h2 {
   cursor: pointer;
 }
 
-.prompt-row button:disabled {
+button:disabled {
   opacity: 0.58;
   cursor: wait;
 }
 
+.command-row {
+  display: grid;
+  grid-template-columns: repeat(4, minmax(0, 1fr));
+  gap: 8px;
+  margin-top: 10px;
+}
+
+.command-row button {
+  min-width: 0;
+  height: 38px;
+  border: 1px solid rgba(80, 47, 22, 0.34);
+  border-radius: 8px;
+  background: rgba(255, 243, 203, 0.46);
+  color: #2a170d;
+  font-size: 0.86rem;
+  font-weight: 850;
+  cursor: pointer;
+}
+
+.command-row button:hover:not(:disabled) {
+  background: rgba(255, 243, 203, 0.68);
+}
+
 .corrections {
   min-height: 30px;
   padding-top: 10px;
@@ -205,19 +228,56 @@ h2 {
   line-height: 1;
 }
 
+.score-grid {
+  display: grid;
+  gap: 7px;
+  margin: 0 0 22px;
+}
+
+.score-row {
+  display: grid;
+  grid-template-columns: 88px minmax(0, 1fr) 28px;
+  align-items: center;
+  gap: 9px;
+  color: var(--muted-ink);
+  font-size: 0.8rem;
+  font-weight: 800;
+}
+
+.score-row meter {
+  width: 100%;
+  height: 9px;
+}
+
+.score-row meter::-webkit-meter-bar {
+  border: 0;
+  border-radius: 999px;
+  background: rgba(80, 47, 22, 0.2);
+}
+
+.score-row meter::-webkit-meter-optimum-value {
+  border-radius: 999px;
+  background: linear-gradient(90deg, var(--red), var(--gold), var(--leaf));
+}
+
 .panels {
   display: grid;
-  gap: 18px;
+  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
+  gap: 16px;
 }
 
 .project-list,
-.whitespace-list {
+.whitespace-list,
+.idea-list,
+.trace-list {
   display: grid;
-  gap: 10px;
+  gap: 9px;
 }
 
 .project,
-.gap {
+.gap,
+.idea,
+.trace {
   border-left: 3px solid rgba(80, 47, 22, 0.48);
   padding: 8px 10px;
   background: rgba(255, 241, 196, 0.34);
@@ -225,7 +285,9 @@ h2 {
 }
 
 .project strong,
-.gap strong {
+.gap strong,
+.idea strong,
+.trace strong {
   display: block;
   color: #2a170d;
   font-size: 0.98rem;
@@ -233,13 +295,38 @@ h2 {
 }
 
 .project p,
-.gap p {
+.gap p,
+.idea p,
+.trace p {
   margin: 4px 0 0;
   color: var(--muted-ink);
   font-size: 0.86rem;
   line-height: 1.35;
 }
 
+.idea span {
+  display: inline-block;
+  margin-top: 6px;
+  color: #70401e;
+  font-size: 0.76rem;
+  font-weight: 900;
+  letter-spacing: 0.04em;
+}
+
+.plan-list {
+  display: grid;
+  gap: 7px;
+  min-height: 31px;
+  margin: 0;
+  padding-left: 20px;
+}
+
+.plan-list li {
+  color: #2a170d;
+  font-size: 0.86rem;
+  line-height: 1.32;
+}
+
 .empty {
   color: var(--muted-ink);
   font-size: 0.95rem;
@@ -259,6 +346,7 @@ h2 {
     min-height: 100vh;
     grid-template-columns: 1fr;
     border-radius: 0;
+    overflow: visible;
   }
 
   .page {
@@ -268,4 +356,16 @@ h2 {
   .ink {
     min-height: 168px;
   }
+
+  .panels {
+    grid-template-columns: 1fr;
+  }
+
+  .command-row {
+    grid-template-columns: repeat(2, minmax(0, 1fr));
+  }
+
+  .score-row {
+    grid-template-columns: 82px minmax(0, 1fr) 26px;
+  }
 }

tests/test_agent.py

@@ -13,6 +13,8 @@ def test_agent_scores_and_persists_idea() -> None:
     assert result.score is not None
     assert result.state["ideas"]
     assert result.state["ideas"][0]["score"] is not None
+    assert result.state["trace"]
+    assert result.state["last_artifact"]["title"] == result.artifact["title"]
     assert result.response
 
 
@@ -35,3 +37,15 @@ def test_agent_preserves_canonical_jargon_case() -> None:
 
     assert "MiniCPM5" in result.artifact["title"]
     assert "ZeroGPU" in result.artifact["title"]
+
+
+def test_plan_command_uses_current_idea() -> None:
+    index = ProjectIndex.from_file(Path("data/projects.json"))
+    engine = AdvisorEngine(index)
+
+    first = engine.turn("A local-first archive cartographer for family photos", {})
+    planned = engine.turn("make a build plan", first.state)
+
+    assert planned.plan
+    assert planned.artifact["title"] == first.artifact["title"]
+    assert planned.state["ideas"][0]["title"] == first.artifact["title"]