working

openenv_bug_triage/ui/app.js

@@ -1,28 +1,39 @@
-const els = {
+const els = {
   taskSelect: document.getElementById("task-select"),
   seedInput: document.getElementById("seed-input"),
   resetBtn: document.getElementById("reset-btn"),
   stateBtn: document.getElementById("state-btn"),
   stepBtn: document.getElementById("step-btn"),
   status: document.getElementById("status"),
+  healthPill: document.getElementById("health-pill"),
+  taskCards: document.getElementById("task-cards"),
+  taskBrief: document.getElementById("task-brief"),
   actionType: document.getElementById("action-type"),
+  actionHint: document.getElementById("action-hint"),
   payloadFields: document.getElementById("payload-fields"),
   actionPreview: document.getElementById("action-preview"),
   ticketMeta: document.getElementById("ticket-meta"),
+  ticketTitle: document.getElementById("ticket-title"),
+  ticketSummary: document.getElementById("ticket-summary"),
+  ticketDescription: document.getElementById("ticket-description"),
+  ticketComponents: document.getElementById("ticket-components"),
+  ticketDuplicates: document.getElementById("ticket-duplicates"),
+  ticketEvidence: document.getElementById("ticket-evidence"),
+  lastActionResult: document.getElementById("last-action-result"),
   ticketBody: document.getElementById("ticket-body"),
+  rewardBreakdown: document.getElementById("reward-breakdown"),
   stepLog: document.getElementById("step-log"),
   stateJson: document.getElementById("state-json"),
   stepsUsed: document.getElementById("steps-used"),
   stepsRemaining: document.getElementById("steps-remaining"),
+  queueRemaining: document.getElementById("queue-remaining"),
+  urgentCount: document.getElementById("urgent-count"),
+  slaCount: document.getElementById("sla-count"),
+  partialScore: document.getElementById("partial-score"),
   doneFlag: document.getElementById("done-flag"),
   cumulativeReward: document.getElementById("cumulative-reward"),
 };
 
-let currentObservation = null;
-let done = false;
-let stepCount = 0;
-let cumulativeReward = 0;
-
 const DEFAULT_COMPONENTS = [
   "api-gateway",
   "auth-service",
@@ -45,24 +56,133 @@ const DEFAULT_TEAMS = [
   "data-platform",
 ];
 
-function setStatus(text, kind = "idle") {
-  els.status.textContent = text;
-  els.status.className = `status status-${kind}`;
-}
+const FALLBACK_TASKS = [
+  { id: "bug_triage_easy", difficulty: "easy", description: "8 clear tickets, minimal duplicates" },
+  { id: "bug_triage_medium", difficulty: "medium", description: "15 mixed-quality tickets, several duplicates" },
+  { id: "bug_triage_hard", difficulty: "hard", description: "25 noisy tickets, strict SLA pressure" },
+];
+
+const TASK_GUIDE = {
+  bug_triage_easy: {
+    headline: "Clear tickets, clean decisions",
+    summary: "This task is about proving the environment handles practical triage basics with deterministic grading.",
+    points: [
+      "Prioritize clean severity, priority, and component labels.",
+      "Route valid bugs to the correct team without wasting steps.",
+      "Keep mistakes low and show the baseline workflow clearly.",
+    ],
+  },
+  bug_triage_medium: {
+    headline: "Noise, duplicates, and missing context",
+    summary: "The medium task rewards judgment instead of only raw labeling speed.",
+    points: [
+      "Catch duplicates when the hints are present.",
+      "Use request_info when repro data or logs are actually missing.",
+      "Avoid loops and destructive actions that drag the score down.",
+    ],
+  },
+  bug_triage_hard: {
+    headline: "SLA pressure and escalation discipline",
+    summary: "The hardest task makes queue management and critical-incident handling visible to judges.",
+    points: [
+      "Handle sev0 and sev1 reports with strong escalation behavior.",
+      "Protect the step budget across a larger, noisier queue.",
+      "Show policy quality under pressure instead of gambling on shortcuts.",
+    ],
+  },
+};
+
+const ACTION_HINTS = {
+  classify: "Set severity, priority, and component for the active ticket. Candidate components from the observation are shown first.",
+  assign: "Use this after classification to route the issue to the owning team.",
+  mark_duplicate: "Link the report to a canonical ticket when the duplicate hints are strong enough.",
+  request_info: "Ask for missing repro steps or logs when the report is incomplete.",
+  defer: "Use sparingly. Deferring the wrong issue can hurt both reward and grader outcomes.",
+  close: "Closing is high risk unless the ticket clearly deserves it.",
+  escalate_incident: "Escalate critical production incidents when urgency and customer impact justify it.",
+  next_ticket: "Move on only when you are comfortable with the current decision quality.",
+};
+
+let currentObservation = null;
+let done = false;
+let stepCount = 0;
+let cumulativeReward = 0;
+let busy = false;
+let taskRegistry = { tasks: FALLBACK_TASKS };
 
 function pretty(obj) {
-  return JSON.stringify(obj, null, 2);
+  return JSON.stringify(obj ?? {}, null, 2);
 }
 
-function optionHtml(value, selectedValue) {
-  const selected = value === selectedValue ? "selected" : "";
-  return `<option value="${value}" ${selected}>${value}</option>`;
+function escapeHtml(value) {
+  return String(value).replace(/[&<>"']/g, (char) => {
+    const table = {
+      "&": "&amp;",
+      "<": "&lt;",
+      ">": "&gt;",
+      '"': "&quot;",
+      "'": "&#39;",
+    };
+    return table[char] || char;
+  });
+}
+
+function formatDate(value) {
+  if (!value) {
+    return "unknown date";
+  }
+  const date = new Date(value);
+  if (Number.isNaN(date.getTime())) {
+    return "unknown date";
+  }
+  return new Intl.DateTimeFormat(undefined, {
+    year: "numeric",
+    month: "short",
+    day: "numeric",
+    hour: "2-digit",
+    minute: "2-digit",
+  }).format(date);
+}
+
+function formatDifficulty(value) {
+  if (!value) {
+    return "Task";
+  }
+  return value.charAt(0).toUpperCase() + value.slice(1);
+}
+
+function humanizeKey(value) {
+  return value
+    .split("_")
+    .map((part) => part.charAt(0).toUpperCase() + part.slice(1))
+    .join(" ");
+}
+
+function selectedTaskId() {
+  return els.taskSelect.value;
+}
+
+function availableTasks() {
+  return Array.isArray(taskRegistry.tasks) && taskRegistry.tasks.length
+    ? taskRegistry.tasks
+    : FALLBACK_TASKS;
+}
+
+function taskMetaById(taskId) {
+  return availableTasks().find((task) => task.id === taskId) || FALLBACK_TASKS[0];
+}
+
+function mergeUnique(primary, secondary) {
+  return [...new Set([...(primary || []), ...(secondary || [])])];
+}
+
+function currentTicket() {
+  return currentObservation?.current_ticket || null;
 }
 
 function componentsList() {
-  return currentObservation?.available_components?.length
-    ? currentObservation.available_components
-    : DEFAULT_COMPONENTS;
+  const ticket = currentTicket();
+  return mergeUnique(ticket?.component_candidates || [], currentObservation?.available_components || DEFAULT_COMPONENTS);
 }
 
 function teamsList() {
@@ -71,10 +191,148 @@ function teamsList() {
     : DEFAULT_TEAMS;
 }
 
+function suggestedInfoType() {
+  const ticket = currentTicket();
+  if (!ticket) {
+    return "both";
+  }
+  if (!ticket.repro_steps_present && !ticket.logs_present) {
+    return "both";
+  }
+  if (!ticket.repro_steps_present) {
+    return "repro_steps";
+  }
+  if (!ticket.logs_present) {
+    return "logs";
+  }
+  return "both";
+}
+
+function setStatus(text, kind = "idle") {
+  els.status.textContent = text;
+  els.status.className = `status status-${kind}`;
+}
+
+function setHealth(text, kind = "pending") {
+  els.healthPill.textContent = text;
+  els.healthPill.className = `health-pill is-${kind}`;
+}
+
+function updateButtonState() {
+  const hasActiveTicket = Boolean(currentObservation?.current_ticket) && !done;
+  els.resetBtn.disabled = busy;
+  els.stateBtn.disabled = busy;
+  els.stepBtn.disabled = busy || !hasActiveTicket;
+}
+
+function renderTokens(container, values, emptyLabel = "None") {
+  container.innerHTML = "";
+
+  const items = values && values.length ? values : [{ label: emptyLabel, tone: "muted" }];
+  items.forEach((item) => {
+    const token = document.createElement("span");
+    const label = typeof item === "string" ? item : item.label;
+    const tone = typeof item === "string" ? "" : item.tone || "";
+    token.className = `token${tone ? ` token-${tone}` : ""}`;
+    token.textContent = label;
+    container.appendChild(token);
+  });
+}
+
+function renderSummaryMetrics(observation = currentObservation) {
+  els.stepsUsed.textContent = String(observation?.steps_used ?? stepCount ?? 0);
+  els.stepsRemaining.textContent = String(observation?.steps_remaining ?? 0);
+  els.queueRemaining.textContent = String(observation?.queue_stats?.remaining_count ?? 0);
+  els.urgentCount.textContent = String(observation?.queue_stats?.urgent_count ?? 0);
+  els.slaCount.textContent = String(observation?.queue_stats?.sla_at_risk_count ?? 0);
+  els.partialScore.textContent = Number(observation?.partial_score ?? 0).toFixed(2);
+  els.cumulativeReward.textContent = Number(cumulativeReward || 0).toFixed(2);
+  els.doneFlag.textContent = done ? "completed" : observation?.current_ticket ? "open" : "idle";
+}
+
+function renderTaskOptions() {
+  const selected = selectedTaskId();
+  els.taskSelect.innerHTML = availableTasks()
+    .map((task) => `<option value="${escapeHtml(task.id)}">${escapeHtml(task.id)}</option>`)
+    .join("");
+
+  els.taskSelect.value = availableTasks().some((task) => task.id === selected)
+    ? selected
+    : availableTasks()[0].id;
+}
+
+function renderTaskCards() {
+  const selected = selectedTaskId();
+  els.taskCards.innerHTML = availableTasks()
+    .map((task) => {
+      const guide = TASK_GUIDE[task.id] || TASK_GUIDE.bug_triage_easy;
+      const activeClass = task.id === selected ? " is-active" : "";
+      return `
+        <button type="button" class="task-card${activeClass}" data-task="${escapeHtml(task.id)}">
+          <small>${escapeHtml(formatDifficulty(task.difficulty))}</small>
+          <strong>${escapeHtml(guide.headline)}</strong>
+          <p>${escapeHtml(task.description)}</p>
+        </button>
+      `;
+    })
+    .join("");
+}
+
+function renderTaskBrief() {
+  const taskId = selectedTaskId();
+  const meta = taskMetaById(taskId);
+  const guide = TASK_GUIDE[taskId] || TASK_GUIDE.bug_triage_easy;
+
+  els.taskBrief.innerHTML = `
+    <div class="task-brief-header">
+      <h3>${escapeHtml(guide.headline)}</h3>
+      <span class="difficulty-pill">${escapeHtml(formatDifficulty(meta.difficulty))}</span>
+    </div>
+    <p>${escapeHtml(guide.summary)}</p>
+    <ul class="mini-list">
+      ${guide.points.map((point) => `<li>${escapeHtml(point)}</li>`).join("")}
+    </ul>
+  `;
+}
+
+function renderActionHint() {
+  const actionType = els.actionType.value;
+  const ticket = currentTicket();
+  let hint = ACTION_HINTS[actionType] || "Choose an action and step the environment.";
+
+  if (actionType === "mark_duplicate" && ticket?.suspected_duplicate_ids?.length) {
+    hint += ` Suggested canonical IDs: ${ticket.suspected_duplicate_ids.join(", ")}.`;
+  }
+  if (actionType === "request_info" && ticket) {
+    const missing = [];
+    if (!ticket.repro_steps_present) {
+      missing.push("repro steps");
+    }
+    if (!ticket.logs_present) {
+      missing.push("logs");
+    }
+    if (missing.length) {
+      hint += ` Missing on this ticket: ${missing.join(" and ")}.`;
+    }
+  }
+  if (actionType === "classify" && ticket?.component_candidates?.length) {
+    hint += ` Observation candidates: ${ticket.component_candidates.join(", ")}.`;
+  }
+
+  els.actionHint.textContent = hint;
+}
+
+function optionHtml(value, selectedValue) {
+  const selected = value === selectedValue ? "selected" : "";
+  return `<option value="${escapeHtml(value)}" ${selected}>${escapeHtml(value)}</option>`;
+}
+
 function renderPayloadFields() {
   const actionType = els.actionType.value;
+  const ticket = currentTicket();
   const components = componentsList();
   const teams = teamsList();
+  const duplicateSuggestion = ticket?.suspected_duplicate_ids?.[0] || "";
 
   if (actionType === "classify") {
     els.payloadFields.innerHTML = `
@@ -99,63 +357,49 @@ function renderPayloadFields() {
       <label>
         <span>Component</span>
         <select id="f-component">
-          ${components.map((c, i) => optionHtml(c, i === 0 ? c : "")).join("")}
+          ${components.map((component, index) => optionHtml(component, index === 0 ? component : "")).join("")}
         </select>
       </label>
     `;
-    return;
-  }
-
-  if (actionType === "assign") {
+  } else if (actionType === "assign") {
     els.payloadFields.innerHTML = `
       <label>
         <span>Team</span>
         <select id="f-team">
-          ${teams.map((t, i) => optionHtml(t, i === 0 ? t : "")).join("")}
+          ${teams.map((team, index) => optionHtml(team, index === 0 ? team : "")).join("")}
         </select>
       </label>
     `;
-    return;
-  }
-
-  if (actionType === "mark_duplicate") {
+  } else if (actionType === "mark_duplicate") {
     els.payloadFields.innerHTML = `
       <label>
-        <span>Canonical Ticket ID</span>
-        <input id="f-canonical" type="text" placeholder="BUG-1001" />
+        <span>Canonical ticket ID</span>
+        <input id="f-canonical" type="text" value="${escapeHtml(duplicateSuggestion)}" placeholder="BUG-1001" />
       </label>
     `;
-    return;
-  }
-
-  if (actionType === "request_info") {
+  } else if (actionType === "request_info") {
+    const infoType = suggestedInfoType();
     els.payloadFields.innerHTML = `
       <label>
-        <span>Info Type</span>
+        <span>Info type</span>
         <select id="f-info-type">
-          <option value="repro_steps">repro_steps</option>
-          <option value="logs">logs</option>
-          <option value="both" selected>both</option>
+          <option value="repro_steps" ${infoType === "repro_steps" ? "selected" : ""}>repro_steps</option>
+          <option value="logs" ${infoType === "logs" ? "selected" : ""}>logs</option>
+          <option value="both" ${infoType === "both" ? "selected" : ""}>both</option>
         </select>
       </label>
     `;
-    return;
-  }
-
-  if (actionType === "defer") {
+  } else if (actionType === "defer") {
     els.payloadFields.innerHTML = `
       <label>
         <span>Reason</span>
-        <input id="f-defer-reason" type="text" placeholder="Waiting for roadmap decision" />
+        <input id="f-defer-reason" type="text" value="needs prioritization review" placeholder="Waiting for roadmap decision" />
       </label>
     `;
-    return;
-  }
-
-  if (actionType === "close") {
+  } else if (actionType === "close") {
     els.payloadFields.innerHTML = `
       <label>
-        <span>Close Reason</span>
+        <span>Close reason</span>
         <select id="f-close-reason">
           <option value="invalid">invalid</option>
           <option value="wont_fix">wont_fix</option>
@@ -164,20 +408,18 @@ function renderPayloadFields() {
         </select>
       </label>
     `;
-    return;
-  }
-
-  if (actionType === "escalate_incident") {
+  } else if (actionType === "escalate_incident") {
     els.payloadFields.innerHTML = `
       <label>
         <span>Justification</span>
-        <textarea id="f-justification" placeholder="Production impact and SLA risk detected."></textarea>
+        <textarea id="f-justification" placeholder="Production impact, customer scope, and urgency justify escalation."></textarea>
       </label>
     `;
-    return;
+  } else {
+    els.payloadFields.innerHTML = `<p class="muted-copy">No payload required for this action.</p>`;
   }
 
-  els.payloadFields.innerHTML = `<p class="ticket-meta">No payload required.</p>`;
+  renderActionHint();
 }
 
 function buildAction() {
@@ -222,124 +464,306 @@ function buildAction() {
 }
 
 function renderPreview() {
-  const action = buildAction();
-  els.actionPreview.textContent = pretty(action);
+  els.actionPreview.textContent = pretty(buildAction());
 }
 
-function renderObservation(obs) {
-  currentObservation = obs;
-  if (!obs || !obs.current_ticket) {
-    els.ticketMeta.textContent = "No active ticket";
-    els.ticketBody.textContent = "{}";
-    els.stepsUsed.textContent = "0";
-    els.stepsRemaining.textContent = "0";
+function renderRewardBreakdown(breakdown = null) {
+  els.rewardBreakdown.innerHTML = "";
+  const entries = breakdown ? Object.entries(breakdown) : [];
+
+  if (!entries.length) {
+    const li = document.createElement("li");
+    li.textContent = "Take a step to inspect reward components.";
+    els.rewardBreakdown.appendChild(li);
     return;
   }
 
-  const t = obs.current_ticket;
-  els.ticketMeta.textContent = `${t.ticket_id} | ${t.service} | ${t.reporter_type} | tier:${t.customer_tier}`;
-  els.ticketBody.textContent = pretty(t);
-
-  els.stepsUsed.textContent = String(obs.steps_used);
-  els.stepsRemaining.textContent = String(obs.steps_remaining);
-
-  renderPayloadFields();
-  renderPreview();
+  entries
+    .sort((a, b) => Math.abs(Number(b[1]) || 0) - Math.abs(Number(a[1]) || 0))
+    .forEach(([key, rawValue]) => {
+      const value = Number(rawValue || 0);
+      const li = document.createElement("li");
+      const label = document.createElement("span");
+      const score = document.createElement("strong");
+
+      label.textContent = humanizeKey(key);
+      score.textContent = `${value >= 0 ? "+" : ""}${value.toFixed(2)}`;
+      score.className = value > 0 ? "value-good" : value < 0 ? "value-bad" : "value-neutral";
+
+      li.append(label, score);
+      els.rewardBreakdown.appendChild(li);
+    });
 }
 
-function appendLog(text) {
+function appendLog({ title, meta, note, tone = "neutral" }) {
   const li = document.createElement("li");
-  li.textContent = text;
+  li.className = `log-entry${tone === "bad" ? " is-bad" : tone === "warn" ? " is-warn" : ""}`;
+
+  const heading = document.createElement("strong");
+  heading.textContent = title;
+
+  const metaNode = document.createElement("div");
+  metaNode.className = "log-meta";
+  metaNode.textContent = meta;
+
+  const noteNode = document.createElement("p");
+  noteNode.className = "log-note";
+  noteNode.textContent = note;
+
+  li.append(heading, metaNode, noteNode);
   els.stepLog.prepend(li);
 }
 
+function renderObservation(observation) {
+  currentObservation = observation;
+  const ticket = observation?.current_ticket || null;
+
+  if (!ticket) {
+    els.ticketMeta.textContent = done
+      ? "Episode completed. Reset to start another run."
+      : "Run reset to load a task.";
+    els.ticketTitle.textContent = "No active ticket";
+    els.ticketDescription.textContent = "The current observation does not include an active ticket.";
+    els.lastActionResult.textContent = observation?.last_action_result || "No action taken yet.";
+    renderTokens(els.ticketSummary, [], "Waiting for ticket data");
+    renderTokens(els.ticketComponents, [], "No component hints");
+    renderTokens(els.ticketDuplicates, [], "No duplicate hints");
+    renderTokens(els.ticketEvidence, [], "No evidence details");
+    els.ticketBody.textContent = pretty(observation || {});
+    renderSummaryMetrics(observation);
+    updateButtonState();
+    renderPayloadFields();
+    renderPreview();
+    return;
+  }
+
+  els.ticketMeta.textContent = `${ticket.ticket_id} · ${ticket.service} · ${formatDate(ticket.created_at)}`;
+  els.ticketTitle.textContent = ticket.title;
+  els.ticketDescription.textContent = ticket.description;
+  els.lastActionResult.textContent = observation?.last_action_result || "No action taken yet.";
+
+  renderTokens(els.ticketSummary, [
+    { label: `Reporter: ${ticket.reporter_type}` },
+    { label: `Tier: ${ticket.customer_tier}` },
+    { label: `Attachments: ${ticket.attachments_count}` },
+  ]);
+
+  renderTokens(
+    els.ticketComponents,
+    (ticket.component_candidates || []).map((component) => ({ label: component, tone: "good" })),
+    "No component hints"
+  );
+
+  renderTokens(
+    els.ticketDuplicates,
+    (ticket.suspected_duplicate_ids || []).map((ticketId) => ({ label: ticketId, tone: "warn" })),
+    "No duplicate hints"
+  );
+
+  renderTokens(els.ticketEvidence, [
+    {
+      label: ticket.repro_steps_present ? "Repro steps present" : "Repro steps missing",
+      tone: ticket.repro_steps_present ? "good" : "warn",
+    },
+    {
+      label: ticket.logs_present ? "Logs present" : "Logs missing",
+      tone: ticket.logs_present ? "good" : "warn",
+    },
+    {
+      label: ticket.attachments_count > 0 ? "Attachments included" : "No attachments",
+      tone: ticket.attachments_count > 0 ? "good" : "muted",
+    },
+  ]);
+
+  els.ticketBody.textContent = pretty(observation);
+  renderSummaryMetrics(observation);
+  renderPayloadFields();
+  renderPreview();
+  updateButtonState();
+}
+
 async function api(url, method = "GET", body = null) {
-  const opts = { method, headers: {} };
+  const options = { method, headers: {} };
   if (body !== null) {
-    opts.headers["Content-Type"] = "application/json";
-    opts.body = JSON.stringify(body);
+    options.headers["Content-Type"] = "application/json";
+    options.body = JSON.stringify(body);
   }
 
-  const res = await fetch(url, opts);
-  const data = await res.json().catch(() => null);
-  if (!res.ok) {
-    const msg = data?.detail || `HTTP ${res.status}`;
-    throw new Error(msg);
+  const response = await fetch(url, options);
+  const data = await response.json().catch(() => null);
+  if (!response.ok) {
+    const message = data?.detail || `HTTP ${response.status}`;
+    throw new Error(message);
   }
   return data;
 }
 
+async function fetchHealth() {
+  try {
+    const health = await api("/health");
+    setHealth(health?.status === "ok" ? "Online" : "Degraded", health?.status === "ok" ? "ok" : "bad");
+  } catch (error) {
+    setHealth("Offline", "bad");
+  }
+}
+
+async function fetchTasks() {
+  try {
+    const data = await api("/tasks");
+    if (Array.isArray(data?.tasks) && data.tasks.length) {
+      taskRegistry = data;
+    }
+  } catch (error) {
+    taskRegistry = { tasks: FALLBACK_TASKS };
+  }
+
+  renderTaskOptions();
+  renderTaskCards();
+  renderTaskBrief();
+}
+
+async function fetchState({ silent = false } = {}) {
+  const state = await api("/state");
+  els.stateJson.textContent = pretty(state);
+
+  if (state.initialized) {
+    stepCount = Number(state.steps_used || 0);
+    cumulativeReward = Number(state.cumulative_reward || 0);
+    done = Boolean(state.episode_done);
+
+    if (state.current_task_id && availableTasks().some((task) => task.id === state.current_task_id)) {
+      els.taskSelect.value = state.current_task_id;
+      renderTaskCards();
+      renderTaskBrief();
+    }
+
+    els.stepsUsed.textContent = String(state.steps_used || 0);
+    els.stepsRemaining.textContent = String(state.steps_remaining || 0);
+    els.cumulativeReward.textContent = Number(state.cumulative_reward || 0).toFixed(2);
+    els.doneFlag.textContent = done ? "completed" : "open";
+  } else if (!currentObservation) {
+    renderSummaryMetrics(null);
+  }
+
+  if (!silent) {
+    setStatus(state.initialized ? "State snapshot updated." : "Server ready. Reset to start an episode.", "ok");
+  }
+
+  updateButtonState();
+  return state;
+}
+
 async function doReset() {
-  const task_id = els.taskSelect.value;
+  const taskId = els.taskSelect.value;
   const seed = Number(els.seedInput.value || 42);
 
   try {
+    busy = true;
+    updateButtonState();
     setStatus("Resetting episode...", "idle");
-    const obs = await api("/reset", "POST", { task_id, seed });
+
+    const observation = await api("/reset", "POST", { task_id: taskId, seed });
     done = false;
     stepCount = 0;
     cumulativeReward = 0;
     els.stepLog.innerHTML = "";
-    renderObservation(obs);
-    els.doneFlag.textContent = "false";
-    els.cumulativeReward.textContent = "0.00";
-    setStatus(`Ready on ${obs.current_ticket?.ticket_id || "no-ticket"}`, "ok");
-    appendLog(`reset task=${task_id} seed=${seed}`);
-  } catch (err) {
-    setStatus(`Reset failed: ${err.message}`, "error");
+    renderRewardBreakdown(null);
+    renderObservation(observation);
+    await fetchState({ silent: true });
+
+    appendLog({
+      title: `Episode reset · ${taskId}`,
+      meta: `seed=${seed}`,
+      note: taskMetaById(taskId).description,
+    });
+    setStatus(`Episode ready on ${taskId}.`, "ok");
+  } catch (error) {
+    setStatus(`Reset failed: ${error.message}`, "error");
+    appendLog({
+      title: "Reset failed",
+      meta: "reset",
+      note: error.message,
+      tone: "bad",
+    });
+  } finally {
+    busy = false;
+    updateButtonState();
   }
 }
 
 async function doStep() {
-  if (!currentObservation) {
-    setStatus("Run Reset first.", "error");
+  if (!currentObservation?.current_ticket) {
+    setStatus("Run reset first.", "error");
     return;
   }
+
   if (done) {
-    setStatus("Episode already done. Reset to start another.", "error");
+    setStatus("Episode already completed. Reset to start again.", "warn");
     return;
   }
 
   const action = buildAction();
 
   try {
+    busy = true;
+    updateButtonState();
+    setStatus("Submitting step...", "idle");
+
     const result = await api("/step", "POST", { action });
     stepCount += 1;
     done = Boolean(result.done);
-
-    const reward = Number(result.reward?.step_reward || 0);
     cumulativeReward = Number(result.reward?.cumulative_reward || cumulativeReward);
 
     renderObservation(result.observation);
-    els.doneFlag.textContent = String(done);
-    els.cumulativeReward.textContent = cumulativeReward.toFixed(2);
-
-    const err = result.info?.validation_error ? ` error=${result.info.validation_error}` : "";
-    appendLog(
-      `step=${stepCount} action=${action.action_type} reward=${reward.toFixed(2)} done=${done}${err}`
-    );
-
-    setStatus(done ? "Episode completed." : "Step accepted.", done ? "ok" : "idle");
-  } catch (err) {
-    setStatus(`Step failed: ${err.message}`, "error");
-    appendLog(`step_error ${err.message}`);
-  }
-}
+    renderRewardBreakdown(result.reward?.reward_breakdown);
+    await fetchState({ silent: true });
 
-async function fetchState() {
-  try {
-    const state = await api("/state", "GET");
-    els.stateJson.textContent = pretty(state);
-    if (state.initialized === false) {
-      setStatus("Server ready. Reset to load a task.", "idle");
-      return;
+    const reward = Number(result.reward?.step_reward || 0);
+    const validationError = result.info?.validation_error;
+    const note = validationError || result.observation?.last_action_result || "Step accepted.";
+
+    appendLog({
+      title: `Step ${stepCount} · ${action.action_type}`,
+      meta: `reward=${reward.toFixed(2)} · ${done ? "completed" : "running"}`,
+      note,
+      tone: validationError ? "warn" : "neutral",
+    });
+
+    if (validationError) {
+      setStatus(`Step accepted with penalty: ${validationError}`, "warn");
+    } else {
+      setStatus(done ? "Episode completed." : "Step accepted.", done ? "ok" : "idle");
     }
-    setStatus("State fetched.", "ok");
-  } catch (err) {
-    setStatus(`State fetch failed: ${err.message}`, "error");
+  } catch (error) {
+    setStatus(`Step failed: ${error.message}`, "error");
+    appendLog({
+      title: "Step failed",
+      meta: `action=${action.action_type}`,
+      note: error.message,
+      tone: "bad",
+    });
+  } finally {
+    busy = false;
+    updateButtonState();
   }
 }
 
+els.taskSelect.addEventListener("change", () => {
+  renderTaskCards();
+  renderTaskBrief();
+});
+
+els.taskCards.addEventListener("click", (event) => {
+  const card = event.target.closest("[data-task]");
+  if (!card) {
+    return;
+  }
+
+  els.taskSelect.value = card.dataset.task;
+  renderTaskCards();
+  renderTaskBrief();
+});
+
 els.actionType.addEventListener("change", () => {
   renderPayloadFields();
   renderPreview();
@@ -349,10 +773,31 @@ els.payloadFields.addEventListener("input", renderPreview);
 els.payloadFields.addEventListener("change", renderPreview);
 els.resetBtn.addEventListener("click", doReset);
 els.stepBtn.addEventListener("click", doStep);
-els.stateBtn.addEventListener("click", fetchState);
+els.stateBtn.addEventListener("click", async () => {
+  try {
+    await fetchState();
+  } catch (error) {
+    setStatus(`State fetch failed: ${error.message}`, "error");
+  }
+});
 
+renderTaskOptions();
+renderTaskCards();
+renderTaskBrief();
 renderPayloadFields();
 renderPreview();
+renderRewardBreakdown(null);
+renderSummaryMetrics(null);
 setStatus("Loading server state...", "idle");
-fetchState();
 
+fetchHealth();
+fetchTasks()
+  .then(() => fetchState({ silent: true }))
+  .then(() => {
+    if (!currentObservation) {
+      setStatus("Server ready. Reset to start an episode.", "idle");
+    }
+  })
+  .catch(() => {
+    setStatus("Server ready. Reset to start an episode.", "idle");
+  });

openenv_bug_triage/ui/index.html

@@ -1,113 +1,285 @@
-<!doctype html>
+<!doctype html>
 <html lang="en">
 <head>
   <meta charset="utf-8" />
   <meta name="viewport" content="width=device-width, initial-scale=1" />
-  <title>Bug Triage OpenEnv Console</title>
+  <title>OpenEnv Bug Triage Workspace</title>
   <link rel="icon" href="/ui/favicon.svg" type="image/svg+xml" />
   <link rel="preconnect" href="https://fonts.googleapis.com" />
   <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
-  <link href="https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@400;500;700&family=IBM+Plex+Mono:wght@400;500&display=swap" rel="stylesheet" />
+  <link href="https://fonts.googleapis.com/css2?family=IBM+Plex+Mono:wght@400;500&family=Sora:wght@400;500;600;700&display=swap" rel="stylesheet" />
   <link rel="stylesheet" href="/ui/styles.css" />
 </head>
 <body>
-  <div class="aurora" aria-hidden="true"></div>
-
-  <header class="hero reveal">
-    <div>
-      <p class="kicker">OpenEnv - Dark Ops Console</p>
-      <h1>Bug Triage Environment</h1>
-      <p class="subtitle">Interactive dark-mode frontend for reset / step / state workflows.</p>
-    </div>
-    <div class="pillset">
-      <span class="pill">Real-World Task</span>
-      <span class="pill">Typed Actions</span>
-      <span class="pill">Dense Rewards</span>
-    </div>
-  </header>
-
-  <main class="layout">
-    <section class="card reveal" id="controls-card">
-      <h2>Session Controls</h2>
-      <div class="grid-2">
+  <div class="backdrop" aria-hidden="true"></div>
+
+  <div class="page-shell">
+    <header class="hero reveal">
+      <div class="hero-copy">
+        <p class="eyebrow">Round 1 · OpenEnv Submission</p>
+        <h1>Bug triage, shown as a clean real-world agent workspace.</h1>
+        <p class="hero-text">
+          This UI makes the judging story easy to follow: a real software workflow, the standard
+          <code>reset()</code> / <code>step()</code> / <code>state()</code> API, three graded tasks, and dense reward
+          feedback across the whole episode.
+        </p>
+        <div class="hero-tags">
+          <span class="tag">Real-world task</span>
+          <span class="tag">Typed models</span>
+          <span class="tag">3 graded tasks</span>
+          <span class="tag">Partial rewards</span>
+        </div>
+      </div>
+
+      <aside class="hero-aside">
+        <p class="aside-label">Submission fit</p>
+        <ul class="signal-list">
+          <li>Classify, route, escalate, and request missing information for bug reports.</li>
+          <li>See task difficulty progress from easy to hard before you ever click reset.</li>
+          <li>Track queue pressure, reward, and state as the episode unfolds.</li>
+          <li>Keep the interface simple enough for demos, judges, and quick local checks.</li>
+        </ul>
+        <div class="hero-meta">
+          <span>API health</span>
+          <strong id="health-pill" class="health-pill is-pending">Checking...</strong>
+        </div>
+      </aside>
+    </header>
+
+    <section class="highlight-grid reveal">
+      <article class="highlight-card">
+        <p class="card-index">01</p>
+        <h2>Real workflow</h2>
+        <p>Incoming tickets are triaged the way real software teams handle severity, ownership, duplicates, and escalations.</p>
+      </article>
+      <article class="highlight-card">
+        <p class="card-index">02</p>
+        <h2>OpenEnv ready</h2>
+        <p>The interface is built directly on top of the typed environment endpoints instead of a disconnected mockup.</p>
+      </article>
+      <article class="highlight-card">
+        <p class="card-index">03</p>
+        <h2>Judging visibility</h2>
+        <p>Task ladder, queue pressure, partial score, and reward breakdown stay visible while you step through the run.</p>
+      </article>
+      <article class="highlight-card">
+        <p class="card-index">04</p>
+        <h2>Simple demo flow</h2>
+        <p>Pick a task, reset the episode, compose an action, and inspect logs or raw state when you need proof.</p>
+      </article>
+    </section>
+
+    <main class="workspace" id="workspace">
+      <section class="panel session-panel reveal" id="controls-card">
+        <div class="panel-head">
+          <div>
+            <p class="section-label">Session</p>
+            <h2>Run an episode</h2>
+          </div>
+          <div id="status" class="status status-idle">Idle</div>
+        </div>
+
+        <div class="grid-2">
+          <label>
+            <span>Task</span>
+            <select id="task-select">
+              <option value="bug_triage_easy">bug_triage_easy</option>
+              <option value="bug_triage_medium">bug_triage_medium</option>
+              <option value="bug_triage_hard">bug_triage_hard</option>
+            </select>
+          </label>
+          <label>
+            <span>Seed</span>
+            <input id="seed-input" type="number" value="42" min="0" step="1" />
+          </label>
+        </div>
+
+        <div class="button-row">
+          <button id="reset-btn" class="btn btn-primary">Reset</button>
+          <button id="state-btn" class="btn btn-secondary">State</button>
+        </div>
+
+        <div class="metric-grid">
+          <article>
+            <span>Steps used</span>
+            <strong id="steps-used">0</strong>
+          </article>
+          <article>
+            <span>Remaining</span>
+            <strong id="steps-remaining">0</strong>
+          </article>
+          <article>
+            <span>Queue left</span>
+            <strong id="queue-remaining">0</strong>
+          </article>
+          <article>
+            <span>Urgent</span>
+            <strong id="urgent-count">0</strong>
+          </article>
+          <article>
+            <span>SLA risk</span>
+            <strong id="sla-count">0</strong>
+          </article>
+          <article>
+            <span>Partial score</span>
+            <strong id="partial-score">0.00</strong>
+          </article>
+          <article>
+            <span>Cumulative reward</span>
+            <strong id="cumulative-reward">0.00</strong>
+          </article>
+          <article>
+            <span>Episode</span>
+            <strong id="done-flag">idle</strong>
+          </article>
+        </div>
+      </section>
+
+      <section class="panel task-panel reveal">
+        <div class="panel-head">
+          <div>
+            <p class="section-label">Tasks</p>
+            <h2>Difficulty ladder</h2>
+          </div>
+          <p class="muted-copy">All tasks score from 0.0 to 1.0 and share the same environment API.</p>
+        </div>
+
+        <div id="task-cards" class="task-cards"></div>
+        <div id="task-brief" class="task-brief"></div>
+      </section>
+
+      <section class="panel ticket-panel reveal" id="ticket-card">
+        <div class="panel-head">
+          <div>
+            <p class="section-label">Observation</p>
+            <h2>Current ticket</h2>
+          </div>
+          <p id="ticket-meta" class="muted-copy">Run reset to load a task.</p>
+        </div>
+
+        <div class="ticket-card-shell">
+          <div class="ticket-top">
+            <h3 id="ticket-title">Waiting for a reset</h3>
+            <div id="ticket-summary" class="token-row"></div>
+          </div>
+
+          <p id="ticket-description" class="ticket-description">
+            Pick one of the graded tasks, reset the environment, and the focused ticket will appear here.
+          </p>
+
+          <div class="fact-grid">
+            <article class="fact-block">
+              <h3>Component hints</h3>
+              <div id="ticket-components" class="token-row"></div>
+            </article>
+            <article class="fact-block">
+              <h3>Duplicate hints</h3>
+              <div id="ticket-duplicates" class="token-row"></div>
+            </article>
+            <article class="fact-block">
+              <h3>Evidence</h3>
+              <div id="ticket-evidence" class="token-row"></div>
+            </article>
+            <article class="fact-block">
+              <h3>Last action result</h3>
+              <p id="last-action-result" class="fact-copy">No action taken yet.</p>
+            </article>
+          </div>
+        </div>
+
+        <details class="details-block">
+          <summary>Raw observation JSON</summary>
+          <pre id="ticket-body" class="json-view">{}</pre>
+        </details>
+      </section>
+
+      <section class="panel action-panel reveal" id="action-card">
+        <div class="panel-head">
+          <div>
+            <p class="section-label">Step</p>
+            <h2>Action builder</h2>
+          </div>
+          <p class="muted-copy">Compose a typed action and send it directly to <code>/step</code>.</p>
+        </div>
+
         <label>
-          <span>Task</span>
-          <select id="task-select">
-            <option value="bug_triage_easy">bug_triage_easy</option>
-            <option value="bug_triage_medium">bug_triage_medium</option>
-            <option value="bug_triage_hard">bug_triage_hard</option>
+          <span>Action type</span>
+          <select id="action-type">
+            <option value="classify">classify</option>
+            <option value="assign">assign</option>
+            <option value="mark_duplicate">mark_duplicate</option>
+            <option value="request_info">request_info</option>
+            <option value="defer">defer</option>
+            <option value="close">close</option>
+            <option value="escalate_incident">escalate_incident</option>
+            <option value="next_ticket">next_ticket</option>
           </select>
         </label>
-        <label>
-          <span>Seed</span>
-          <input id="seed-input" type="number" value="42" min="0" step="1" />
-        </label>
-      </div>
-      <div class="button-row">
-        <button id="reset-btn" class="btn btn-accent">Reset Episode</button>
-        <button id="state-btn" class="btn btn-ghost">Fetch State</button>
-      </div>
-      <div id="status" class="status status-idle">Idle</div>
-      <div class="summary-grid">
-        <article>
-          <h3>Steps</h3>
-          <p id="steps-used">0</p>
-        </article>
-        <article>
-          <h3>Remaining</h3>
-          <p id="steps-remaining">0</p>
-        </article>
-        <article>
-          <h3>Done</h3>
-          <p id="done-flag">false</p>
-        </article>
-        <article>
-          <h3>Cumulative</h3>
-          <p id="cumulative-reward">0.00</p>
-        </article>
-      </div>
-    </section>
 
-    <section class="card reveal" id="ticket-card">
-      <h2>Current Ticket</h2>
-      <div id="ticket-meta" class="ticket-meta">Run reset to load a task.</div>
-      <pre id="ticket-body" class="json-view">{}</pre>
-    </section>
+        <div id="payload-fields" class="payload-grid"></div>
+        <div id="action-hint" class="hint-box">Choose an action to see payload guidance.</div>
 
-    <section class="card reveal" id="action-card">
-      <h2>Action Composer</h2>
-      <label>
-        <span>Action Type</span>
-        <select id="action-type">
-          <option value="classify">classify</option>
-          <option value="assign">assign</option>
-          <option value="mark_duplicate">mark_duplicate</option>
-          <option value="request_info">request_info</option>
-          <option value="defer">defer</option>
-          <option value="close">close</option>
-          <option value="escalate_incident">escalate_incident</option>
-          <option value="next_ticket">next_ticket</option>
-        </select>
-      </label>
-      <div id="payload-fields" class="payload-grid"></div>
-      <div class="button-row">
-        <button id="step-btn" class="btn btn-hot">Step</button>
-      </div>
-      <pre id="action-preview" class="json-view">{"action_type":"classify"}</pre>
-    </section>
+        <div class="button-row">
+          <button id="step-btn" class="btn btn-accent">Submit step</button>
+        </div>
 
-    <section class="card reveal" id="logs-card">
-      <h2>Episode Log</h2>
-      <ol id="step-log" class="log-list"></ol>
-    </section>
+        <div class="preview-card">
+          <div class="preview-head">
+            <h3>Action preview</h3>
+            <span>Typed payload</span>
+          </div>
+          <pre id="action-preview" class="json-view">{"action_type":"classify"}</pre>
+        </div>
+      </section>
 
-    <section class="card reveal" id="state-card">
-      <h2>State Snapshot</h2>
-      <pre id="state-json" class="json-view">{}</pre>
-    </section>
-  </main>
+      <section class="panel log-panel reveal" id="logs-card">
+        <div class="panel-head">
+          <div>
+            <p class="section-label">Trajectory</p>
+            <h2>Episode timeline</h2>
+          </div>
+          <p class="muted-copy">Rewards, validation feedback, and action history stay readable during demos.</p>
+        </div>
+
+        <div class="log-layout">
+          <article class="reward-card">
+            <h3>Last reward breakdown</h3>
+            <ul id="reward-breakdown" class="breakdown-list"></ul>
+          </article>
+          <ol id="step-log" class="log-list"></ol>
+        </div>
+      </section>
+
+      <section class="panel state-panel reveal" id="state-card">
+        <div class="panel-head">
+          <div>
+            <p class="section-label">State</p>
+            <h2>Environment contract</h2>
+          </div>
+          <p class="muted-copy">Use this pane to show that the environment is real, typed, and inspectable.</p>
+        </div>
+
+        <div class="state-layout">
+          <article class="api-card">
+            <h3>OpenEnv checklist</h3>
+            <ul class="mini-list">
+              <li>Typed observation, action, and reward models</li>
+              <li>Standard <code>reset()</code>, <code>step()</code>, and <code>state()</code> flow</li>
+              <li>Three deterministic tasks with agent graders</li>
+              <li>Reward signals for partial progress, not just terminal success</li>
+              <li>Ready for Docker and Hugging Face Spaces demos</li>
+            </ul>
+          </article>
+
+          <article class="api-card">
+            <h3>Live state snapshot</h3>
+            <pre id="state-json" class="json-view">{}</pre>
+          </article>
+        </div>
+      </section>
+    </main>
+  </div>
 
   <script src="/ui/app.js"></script>
 </body>
 </html>
-

openenv_bug_triage/ui/styles.css

@@ -1,18 +1,18 @@
-:root {
-  --bg: #070c14;
-  --bg-soft: #0d1422;
-  --surface: rgba(15, 24, 38, 0.82);
-  --surface-strong: rgba(18, 30, 48, 0.96);
-  --edge: rgba(132, 168, 224, 0.24);
-  --text: #e8f0ff;
-  --muted: #9db0cd;
-  --accent: #25d8b4;
-  --hot: #ff9150;
-  --ok: #6be6a8;
-  --warn: #ffd166;
-  --bad: #ff5f73;
-  --mono: "IBM Plex Mono", "Fira Code", Consolas, monospace;
-  --sans: "Space Grotesk", "Segoe UI", sans-serif;
+:root {
+  --bg: #f7f3ea;
+  --surface: rgba(255, 252, 246, 0.78);
+  --line: rgba(24, 56, 89, 0.12);
+  --text: #17304a;
+  --muted: #5e7388;
+  --accent: #0e7c86;
+  --warm: #ef7d47;
+  --ok: #2d8a57;
+  --warn: #a26c05;
+  --bad: #c05541;
+  --mono: "IBM Plex Mono", Consolas, monospace;
+  --sans: "Sora", "Segoe UI", sans-serif;
+  --shadow: 0 20px 60px rgba(21, 46, 72, 0.12);
+  --shadow-soft: 0 8px 30px rgba(21, 46, 72, 0.08);
 }
 
 * {
@@ -23,102 +23,272 @@ html,
 body {
   margin: 0;
   min-height: 100%;
-  background: var(--bg);
   color: var(--text);
   font-family: var(--sans);
+  background:
+    radial-gradient(circle at top left, rgba(14, 124, 134, 0.11), transparent 30%),
+    radial-gradient(circle at top right, rgba(239, 125, 71, 0.12), transparent 32%),
+    linear-gradient(180deg, #fffdf8 0%, var(--bg) 55%, #f4efe4 100%);
 }
 
 body {
   position: relative;
   overflow-x: hidden;
-  padding: 24px;
+  padding: 28px 22px 40px;
+}
+
+code {
+  font-family: var(--mono);
+  font-size: 0.95em;
 }
 
-.aurora {
+.backdrop {
   position: fixed;
-  inset: -25vmax;
+  inset: -10vmax;
   background:
-    radial-gradient(40vmax 32vmax at 10% 16%, rgba(37, 216, 180, 0.18), transparent 70%),
-    radial-gradient(45vmax 36vmax at 92% 8%, rgba(255, 145, 80, 0.14), transparent 72%),
-    radial-gradient(50vmax 44vmax at 48% 105%, rgba(71, 130, 255, 0.16), transparent 74%);
-  filter: blur(18px);
+    radial-gradient(42vmax 34vmax at 8% 8%, rgba(14, 124, 134, 0.13), transparent 70%),
+    radial-gradient(38vmax 34vmax at 94% 12%, rgba(239, 125, 71, 0.11), transparent 72%),
+    radial-gradient(44vmax 36vmax at 50% 100%, rgba(45, 138, 87, 0.08), transparent 70%);
+  filter: blur(10px);
   pointer-events: none;
   z-index: -1;
 }
 
+.page-shell {
+  width: min(1380px, 100%);
+  margin: 0 auto;
+}
+
 .hero {
-  display: flex;
-  justify-content: space-between;
-  align-items: flex-start;
-  gap: 20px;
+  display: grid;
+  grid-template-columns: minmax(0, 1.5fr) minmax(280px, 0.9fr);
+  gap: 18px;
+  align-items: stretch;
   margin-bottom: 18px;
 }
 
-.kicker {
-  margin: 0 0 4px;
-  letter-spacing: 0.12em;
-  text-transform: uppercase;
-  font-size: 0.72rem;
+.hero-copy,
+.hero-aside,
+.highlight-card,
+.panel {
+  border: 1px solid var(--line);
+  background: var(--surface);
+  backdrop-filter: blur(14px);
+  box-shadow: var(--shadow-soft);
+}
+
+.hero-copy,
+.hero-aside {
+  border-radius: 28px;
+  padding: 24px;
+}
+
+.eyebrow,
+.aside-label,
+.section-label,
+.card-index {
+  margin: 0 0 10px;
   color: var(--accent);
+  font-size: 0.76rem;
+  letter-spacing: 0.14em;
+  text-transform: uppercase;
 }
 
 h1 {
   margin: 0;
-  font-size: clamp(1.5rem, 2.8vw, 2.35rem);
-  line-height: 1.08;
+  max-width: 12ch;
+  font-size: clamp(2.15rem, 4vw, 4rem);
+  line-height: 1.02;
+  letter-spacing: -0.04em;
 }
 
-.subtitle {
-  margin-top: 8px;
+.hero-text {
+  max-width: 66ch;
+  margin: 14px 0 0;
   color: var(--muted);
-  max-width: 62ch;
+  line-height: 1.7;
 }
 
-.pillset {
+.hero-tags,
+.token-row,
+.button-row {
   display: flex;
   flex-wrap: wrap;
-  gap: 8px;
+  gap: 10px;
+}
+
+.hero-tags {
+  margin-top: 18px;
 }
 
-.pill {
-  border: 1px solid var(--edge);
-  padding: 6px 10px;
+.tag,
+.token {
+  display: inline-flex;
+  align-items: center;
   border-radius: 999px;
-  font-size: 0.72rem;
+  padding: 8px 12px;
+  border: 1px solid var(--line);
+  background: rgba(255, 255, 255, 0.7);
+  color: var(--text);
+  font-size: 0.82rem;
+}
+
+.token-good {
+  background: rgba(45, 138, 87, 0.12);
+  color: var(--ok);
+  border-color: rgba(45, 138, 87, 0.22);
+}
+
+.token-warn {
+  background: rgba(162, 108, 5, 0.12);
+  color: var(--warn);
+  border-color: rgba(162, 108, 5, 0.2);
+}
+
+.token-bad {
+  background: rgba(192, 85, 65, 0.12);
+  color: var(--bad);
+  border-color: rgba(192, 85, 65, 0.22);
+}
+
+.token-muted {
+  color: var(--muted);
+  background: rgba(246, 241, 232, 0.86);
+}
+
+.signal-list,
+.mini-list,
+.breakdown-list {
+  margin: 0;
+  padding-left: 18px;
+}
+
+.signal-list li,
+.mini-list li,
+.breakdown-list li {
+  margin-bottom: 8px;
+  line-height: 1.55;
+}
+
+.hero-meta {
+  margin-top: 18px;
+  padding-top: 18px;
+  border-top: 1px solid var(--line);
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 12px;
   color: var(--muted);
-  background: rgba(9, 16, 28, 0.6);
 }
 
-.layout {
+.health-pill {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  min-width: 100px;
+  border-radius: 999px;
+  padding: 8px 12px;
+  font-size: 0.82rem;
+  border: 1px solid var(--line);
+  background: rgba(255, 255, 255, 0.8);
+}
+
+.health-pill.is-ok {
+  color: var(--ok);
+  border-color: rgba(45, 138, 87, 0.22);
+  background: rgba(45, 138, 87, 0.1);
+}
+
+.health-pill.is-bad {
+  color: var(--bad);
+  border-color: rgba(192, 85, 65, 0.22);
+  background: rgba(192, 85, 65, 0.1);
+}
+
+.health-pill.is-pending {
+  color: var(--warn);
+  border-color: rgba(162, 108, 5, 0.22);
+  background: rgba(162, 108, 5, 0.08);
+}
+
+.highlight-grid {
   display: grid;
+  grid-template-columns: repeat(4, minmax(0, 1fr));
   gap: 14px;
+  margin-bottom: 18px;
+}
+
+.highlight-card {
+  border-radius: 24px;
+  padding: 20px;
+}
+
+.highlight-card h2,
+.panel h2 {
+  margin: 0;
+  font-size: 1.08rem;
+}
+
+.highlight-card p:last-child {
+  margin: 10px 0 0;
+  color: var(--muted);
+  line-height: 1.6;
+}
+
+.workspace {
+  display: grid;
   grid-template-columns: repeat(12, minmax(0, 1fr));
+  gap: 14px;
 }
 
-#controls-card { grid-column: span 4; }
-#ticket-card { grid-column: span 8; }
-#action-card { grid-column: span 5; }
-#logs-card { grid-column: span 7; }
-#state-card { grid-column: span 12; }
+.session-panel { grid-column: span 4; }
+.task-panel { grid-column: span 8; }
+.ticket-panel { grid-column: span 7; }
+.action-panel { grid-column: span 5; }
+.log-panel { grid-column: span 7; }
+.state-panel { grid-column: span 5; }
 
-.card {
-  background: linear-gradient(160deg, var(--surface), var(--surface-strong));
-  border: 1px solid var(--edge);
-  border-radius: 16px;
-  padding: 16px;
-  box-shadow: 0 18px 40px rgba(0, 0, 0, 0.26);
-  backdrop-filter: blur(10px);
+.panel {
+  border-radius: 24px;
+  padding: 20px;
+  box-shadow: var(--shadow);
 }
 
-.card h2 {
-  margin: 0 0 12px;
-  font-size: 1rem;
+.panel-head {
+  display: flex;
+  align-items: flex-start;
+  justify-content: space-between;
+  gap: 12px;
+  margin-bottom: 16px;
 }
 
-.grid-2 {
+.muted-copy {
+  margin: 0;
+  color: var(--muted);
+  line-height: 1.55;
+  max-width: 38ch;
+}
+
+.grid-2,
+.fact-grid,
+.state-layout,
+.log-layout {
   display: grid;
-  grid-template-columns: 1fr 1fr;
-  gap: 10px;
+  gap: 12px;
+}
+
+.grid-2 {
+  grid-template-columns: repeat(2, minmax(0, 1fr));
+}
+
+.fact-grid {
+  grid-template-columns: repeat(2, minmax(0, 1fr));
+  margin-top: 18px;
+}
+
+.state-layout,
+.log-layout {
+  grid-template-columns: minmax(0, 1fr);
 }
 
 label {
@@ -127,8 +297,8 @@ label {
 
 label > span {
   display: block;
-  margin-bottom: 6px;
-  font-size: 0.8rem;
+  margin-bottom: 8px;
+  font-size: 0.82rem;
   color: var(--muted);
 }
 
@@ -143,150 +313,394 @@ input,
 select,
 textarea {
   width: 100%;
-  border: 1px solid var(--edge);
-  background: rgba(7, 13, 22, 0.88);
+  border-radius: 16px;
+  border: 1px solid var(--line);
+  background: rgba(255, 255, 255, 0.82);
   color: var(--text);
-  border-radius: 10px;
-  padding: 10px 12px;
+  padding: 12px 14px;
+  outline: none;
+  transition: border-color 160ms ease, box-shadow 160ms ease;
 }
 
-textarea {
-  min-height: 88px;
-  resize: vertical;
+input:focus,
+select:focus,
+textarea:focus {
+  border-color: rgba(14, 124, 134, 0.4);
+  box-shadow: 0 0 0 4px rgba(14, 124, 134, 0.1);
 }
 
-.button-row {
-  margin-top: 12px;
-  display: flex;
-  gap: 10px;
-  flex-wrap: wrap;
+textarea {
+  min-height: 104px;
+  resize: vertical;
 }
 
 .btn {
   border: 0;
-  border-radius: 10px;
+  border-radius: 999px;
   cursor: pointer;
-  padding: 10px 14px;
+  padding: 11px 18px;
   font-weight: 600;
-  transition: transform 140ms ease, filter 140ms ease;
+  transition: transform 160ms ease, filter 160ms ease, opacity 160ms ease;
 }
 
-.btn:hover {
+.btn:hover:not(:disabled) {
   transform: translateY(-1px);
-  filter: brightness(1.06);
+  filter: brightness(1.03);
 }
 
-.btn-accent {
-  background: linear-gradient(140deg, #22bfa8, #1ed3ba);
-  color: #08131c;
+.btn:disabled {
+  cursor: not-allowed;
+  opacity: 0.6;
 }
 
-.btn-hot {
-  background: linear-gradient(140deg, #ff7f45, #ffa15f);
-  color: #241208;
+.btn-primary {
+  background: linear-gradient(135deg, var(--accent), #1f96a1);
+  color: #f7fffe;
 }
 
-.btn-ghost {
-  background: rgba(17, 27, 43, 0.85);
+.btn-secondary {
+  background: rgba(255, 255, 255, 0.82);
   color: var(--text);
-  border: 1px solid var(--edge);
+  border: 1px solid var(--line);
+}
+
+.btn-accent {
+  background: linear-gradient(135deg, var(--warm), #f49d61);
+  color: #fff9f5;
 }
 
 .status {
-  margin-top: 12px;
-  border-radius: 10px;
-  border: 1px solid var(--edge);
-  padding: 9px 12px;
-  font-size: 0.9rem;
+  min-height: 42px;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  border-radius: 999px;
+  border: 1px solid var(--line);
+  padding: 8px 14px;
+  font-size: 0.85rem;
+  background: rgba(255, 255, 255, 0.8);
+}
+
+.status-idle {
+  color: var(--muted);
 }
 
 .status-ok {
   color: var(--ok);
-  border-color: rgba(107, 230, 168, 0.4);
+  border-color: rgba(45, 138, 87, 0.2);
+  background: rgba(45, 138, 87, 0.08);
+}
+
+.status-warn {
+  color: var(--warn);
+  border-color: rgba(162, 108, 5, 0.2);
+  background: rgba(162, 108, 5, 0.08);
 }
 
 .status-error {
   color: var(--bad);
-  border-color: rgba(255, 95, 115, 0.45);
+  border-color: rgba(192, 85, 65, 0.2);
+  background: rgba(192, 85, 65, 0.08);
 }
 
-.summary-grid {
-  margin-top: 12px;
+.metric-grid {
+  margin-top: 18px;
   display: grid;
-  grid-template-columns: repeat(4, 1fr);
-  gap: 8px;
+  grid-template-columns: repeat(2, minmax(0, 1fr));
+  gap: 10px;
 }
 
-.summary-grid article {
-  border: 1px solid var(--edge);
-  border-radius: 10px;
-  padding: 8px;
-  background: rgba(6, 12, 22, 0.78);
+.metric-grid article,
+.fact-block,
+.reward-card,
+.api-card,
+.preview-card,
+.task-brief {
+  border: 1px solid var(--line);
+  border-radius: 18px;
+  background: rgba(255, 255, 255, 0.72);
 }
 
-.summary-grid h3 {
-  margin: 0;
-  font-size: 0.7rem;
+.metric-grid article {
+  padding: 14px;
+}
+
+.metric-grid span {
+  display: block;
+  color: var(--muted);
+  font-size: 0.78rem;
+  margin-bottom: 8px;
+}
+
+.metric-grid strong {
+  display: block;
+  font-size: 1.24rem;
+  letter-spacing: -0.03em;
+}
+
+.task-cards {
+  display: grid;
+  grid-template-columns: repeat(3, minmax(0, 1fr));
+  gap: 10px;
+}
+
+.task-card {
+  width: 100%;
+  text-align: left;
+  border-radius: 20px;
+  border: 1px solid var(--line);
+  background: rgba(255, 255, 255, 0.7);
+  padding: 16px;
+  color: var(--text);
+}
+
+.task-card.is-active {
+  border-color: rgba(14, 124, 134, 0.35);
+  background: linear-gradient(180deg, rgba(14, 124, 134, 0.08), rgba(255, 255, 255, 0.85));
+  box-shadow: inset 0 0 0 1px rgba(14, 124, 134, 0.1);
+}
+
+.task-card small {
+  display: inline-flex;
+  margin-bottom: 10px;
+  color: var(--accent);
+  letter-spacing: 0.12em;
   text-transform: uppercase;
-  letter-spacing: 0.08em;
+}
+
+.task-card strong {
+  display: block;
+  font-size: 1rem;
+  margin-bottom: 8px;
+}
+
+.task-card p {
+  margin: 0;
   color: var(--muted);
+  line-height: 1.55;
+  font-size: 0.88rem;
 }
 
-.summary-grid p {
-  margin: 6px 0 0;
-  font-family: var(--mono);
+.task-brief {
+  margin-top: 12px;
+  padding: 18px;
+}
+
+.task-brief-header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 12px;
 }
 
-.ticket-meta {
+.difficulty-pill {
+  display: inline-flex;
+  align-items: center;
+  border-radius: 999px;
+  padding: 7px 12px;
+  background: rgba(14, 124, 134, 0.08);
+  color: var(--accent);
+  font-size: 0.8rem;
+  border: 1px solid rgba(14, 124, 134, 0.14);
+}
+
+.task-brief p {
+  margin: 10px 0 14px;
   color: var(--muted);
-  font-size: 0.9rem;
-  margin-bottom: 8px;
+  line-height: 1.6;
+}
+
+.ticket-card-shell {
+  border: 1px solid var(--line);
+  border-radius: 20px;
+  padding: 18px;
+  background: linear-gradient(180deg, rgba(255, 255, 255, 0.84), rgba(250, 245, 237, 0.9));
+}
+
+.ticket-top h3,
+.preview-head h3,
+.reward-card h3,
+.api-card h3 {
+  margin: 0;
+  font-size: 1rem;
+}
+
+.ticket-description,
+.fact-copy {
+  margin: 12px 0 0;
+  color: var(--muted);
+  line-height: 1.65;
+}
+
+.fact-block {
+  padding: 14px;
+}
+
+.fact-block h3 {
+  margin: 0 0 10px;
+  font-size: 0.85rem;
+}
+
+.details-block {
+  margin-top: 14px;
+  border-radius: 18px;
+  border: 1px solid var(--line);
+  background: rgba(255, 255, 255, 0.7);
+  overflow: hidden;
+}
+
+.details-block summary {
+  cursor: pointer;
+  list-style: none;
+  padding: 14px 16px;
+  font-weight: 600;
+}
+
+.details-block summary::-webkit-details-marker {
+  display: none;
 }
 
 .payload-grid {
   display: grid;
-  gap: 10px;
+  gap: 12px;
+  margin-top: 14px;
+}
+
+.hint-box {
+  margin-top: 14px;
+  border-radius: 18px;
+  padding: 14px 16px;
+  border: 1px dashed rgba(14, 124, 134, 0.22);
+  background: rgba(14, 124, 134, 0.06);
+  color: var(--muted);
+  line-height: 1.6;
+}
+
+.preview-card,
+.reward-card,
+.api-card {
+  padding: 16px;
+}
+
+.preview-card {
+  margin-top: 14px;
+}
+
+.preview-head {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 12px;
+  margin-bottom: 10px;
+}
+
+.preview-head span {
+  color: var(--muted);
+  font-size: 0.8rem;
+}
+
+.breakdown-list {
+  margin-top: 12px;
+}
+
+.breakdown-list li {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 12px;
+  padding: 10px 0;
+  border-bottom: 1px solid rgba(24, 56, 89, 0.08);
+}
+
+.breakdown-list li:last-child {
+  border-bottom: 0;
+  padding-bottom: 0;
+}
+
+.breakdown-list strong {
+  font-family: var(--mono);
+  font-size: 0.84rem;
+}
+
+.value-good {
+  color: var(--ok);
+}
+
+.value-bad {
+  color: var(--bad);
+}
+
+.value-neutral {
+  color: var(--muted);
 }
 
 .json-view {
   margin: 0;
   white-space: pre-wrap;
   word-break: break-word;
-  border-radius: 10px;
-  border: 1px solid var(--edge);
-  padding: 12px;
-  background: rgba(5, 10, 18, 0.9);
+  border-radius: 18px;
+  border: 1px solid var(--line);
+  padding: 14px;
+  background: rgba(248, 243, 234, 0.95);
+  color: #1f3850;
   font-family: var(--mono);
-  font-size: 0.82rem;
-  max-height: 300px;
+  font-size: 0.8rem;
+  line-height: 1.65;
+  max-height: 360px;
   overflow: auto;
 }
 
 .log-list {
   margin: 0;
-  padding-left: 18px;
-  max-height: 360px;
-  overflow: auto;
+  padding-left: 0;
+  list-style: none;
+  display: grid;
+  gap: 10px;
 }
 
-.log-list li {
-  margin-bottom: 8px;
-  padding: 10px;
-  border-radius: 10px;
-  border: 1px solid var(--edge);
-  background: rgba(6, 11, 18, 0.86);
+.log-entry {
+  border-radius: 18px;
+  border: 1px solid var(--line);
+  background: rgba(255, 255, 255, 0.76);
+  padding: 14px;
+}
+
+.log-entry.is-bad {
+  border-color: rgba(192, 85, 65, 0.24);
+  background: rgba(192, 85, 65, 0.08);
+}
+
+.log-entry.is-warn {
+  border-color: rgba(162, 108, 5, 0.24);
+  background: rgba(162, 108, 5, 0.08);
+}
+
+.log-head strong {
+  font-size: 0.94rem;
+}
+
+.log-meta {
+  color: var(--muted);
   font-family: var(--mono);
-  font-size: 0.77rem;
+  font-size: 0.76rem;
+  margin-top: 8px;
+}
+
+.log-note {
+  color: var(--muted);
+  margin-top: 8px;
+  line-height: 1.55;
+  font-size: 0.86rem;
 }
 
 .reveal {
-  animation: riseIn 340ms ease both;
+  animation: riseIn 360ms ease both;
 }
 
 @keyframes riseIn {
   from {
     opacity: 0;
-    transform: translateY(8px);
+    transform: translateY(10px);
   }
   to {
     opacity: 1;
@@ -294,30 +708,47 @@ textarea {
   }
 }
 
-@media (max-width: 1100px) {
-  #controls-card,
-  #ticket-card,
-  #action-card,
-  #logs-card,
-  #state-card {
-    grid-column: span 12;
+@media (max-width: 1200px) {
+  .hero {
+    grid-template-columns: minmax(0, 1fr);
+  }
+
+  .highlight-grid {
+    grid-template-columns: repeat(2, minmax(0, 1fr));
   }
 
-  .summary-grid {
-    grid-template-columns: repeat(2, 1fr);
+  .session-panel,
+  .task-panel,
+  .ticket-panel,
+  .action-panel,
+  .log-panel,
+  .state-panel {
+    grid-column: span 12;
   }
 }
 
-@media (max-width: 640px) {
+@media (max-width: 760px) {
   body {
-    padding: 14px;
+    padding: 16px 14px 28px;
   }
 
-  .hero {
+  .highlight-grid,
+  .task-cards,
+  .grid-2,
+  .fact-grid,
+  .metric-grid {
+    grid-template-columns: minmax(0, 1fr);
+  }
+
+  .panel-head,
+  .hero-meta,
+  .preview-head,
+  .task-brief-header {
     flex-direction: column;
+    align-items: flex-start;
   }
 
-  .grid-2 {
-    grid-template-columns: 1fr;
+  h1 {
+    max-width: none;
   }
 }