From 3badf902f3a9703e0af8c780050073649b3f75a0 Mon Sep 17 00:00:00 2001
From: jahilldev <contact@jameshill.dev>
Date: Sun, 28 Jun 2026 22:36:45 +0100
Subject: [PATCH 1/4] feat: re-aligned app colours for consistency

---
 app/src/components/AgentRunRow.tsx            | 24 ++++++-------------
 app/src/components/Chat.tsx                   |  8 +++----
 app/src/components/ChatList.tsx               |  2 +-
 app/src/components/CreateJob.tsx              |  8 +++----
 app/src/components/JobCard.tsx                |  2 +-
 app/src/components/JobDetail.tsx              | 16 ++++++-------
 app/src/components/JobList.tsx                |  2 +-
 app/src/components/JudgeOutput.tsx            |  8 +++----
 app/src/components/Markdown.tsx               |  4 ++--
 app/src/components/PlanThread.tsx             |  4 ++--
 app/src/components/RepoControl.tsx            |  4 ++--
 app/src/components/ReviewPassCard.tsx         |  4 ++--
 app/src/components/RunOutput/EventCard.tsx    | 10 ++++----
 app/src/components/RunOutput/Observations.tsx | 10 ++++----
 app/src/components/RunOutput/StaticOutput.tsx |  4 ++--
 app/src/components/RunOutput/index.tsx        |  2 +-
 app/src/components/StateBadge.tsx             | 22 ++++++++++-------
 app/src/components/Timeline.tsx               |  4 ++--
 app/src/components/VerifyOutput.tsx           |  8 +++----
 app/src/components/VerifyRunRow.tsx           |  4 ++--
 20 files changed, 73 insertions(+), 77 deletions(-)

diff --git a/app/src/components/AgentRunRow.tsx b/app/src/components/AgentRunRow.tsx
index f65eb37..d0e2b4c 100644
--- a/app/src/components/AgentRunRow.tsx
+++ b/app/src/components/AgentRunRow.tsx
@@ -6,19 +6,9 @@ interface Props {
   jobId: string;
 }
 
-const PHASE_COLOURS: Record<string, string> = {
-  PLAN: 'bg-blue-900/60 text-blue-300',
-  IMPLEMENT: 'bg-sky-900/60 text-sky-300',
-  REVIEW: 'bg-violet-900/60 text-violet-300',
-  REVISE: 'bg-sky-900/60 text-sky-300',
-  VERIFY: 'bg-teal-900/60 text-teal-300',
-  SUMMARY: 'bg-zinc-800 text-zinc-300',
-  JUDGE: 'bg-pink-900/60 text-pink-300',
-};
-
-function phasePill(phase: string): string {
-  return PHASE_COLOURS[phase] ?? 'bg-zinc-800 text-zinc-300';
-}
+// Phase badges are neutral labels — the phase name carries the meaning, so they all share one zinc
+// style rather than a per-phase rainbow.
+const PHASE_PILL = 'bg-zinc-800 text-zinc-300';
 
 function formatDuration(ms: number | null): string {
   if (ms === null) return '';
@@ -42,20 +32,20 @@ export default function AgentRunRow({ run, jobId }: Props) {
   return (
     <div
       class={`rounded-lg border p-3 transition-colors ${
-        isRunning ? 'border-hermes-300/30 bg-zinc-900/50' : 'border-zinc-800 bg-zinc-900/50'
+        isRunning ? 'border-green-500/30 bg-zinc-900/50' : 'border-zinc-800 bg-zinc-900/50'
       }`}
     >
       <div class="flex items-center gap-3">
         {/* Phase badge */}
-        <span class={`font-mono text-xs px-2.5 py-1 rounded shrink-0 ${phasePill(run.phase)}`}>
+        <span class={`font-mono text-xs px-2.5 py-1 rounded shrink-0 ${PHASE_PILL}`}>
           {run.phase}
         </span>
 
         {/* Status, with model + duration on a meta line beneath */}
         <div class="flex-1 min-w-0 leading-tight">
           {isRunning ? (
-            <span class="flex items-center gap-1.5 text-xs text-hermes-400 font-medium">
-              <span class="w-1.5 h-1.5 rounded-full bg-hermes-400 animate-pulse" />
+            <span class="flex items-center gap-1.5 text-xs text-green-400 font-medium">
+              <span class="w-1.5 h-1.5 rounded-full bg-green-400 animate-pulse" />
               Running
             </span>
           ) : isJudge && run.status === 'SUCCEEDED' ? (
diff --git a/app/src/components/Chat.tsx b/app/src/components/Chat.tsx
index 641749e..578be01 100644
--- a/app/src/components/Chat.tsx
+++ b/app/src/components/Chat.tsx
@@ -180,7 +180,7 @@ export default function Chat() {
       <div class="flex flex-col items-center justify-center h-full text-zinc-500 gap-3">
         <p class="text-base">Chat not found</p>
         <button
-          class="text-sm text-indigo-400 hover:text-indigo-300"
+          class="text-sm text-cyan-400 hover:text-cyan-300"
           onClick={() => navigate('/chats')}
         >
           Back to chats
@@ -211,7 +211,7 @@ export default function Chat() {
         <div class="max-w-3xl mx-auto px-4 py-5 space-y-4">
           {session === null ? (
             <div class="flex justify-center py-10">
-              <div class="w-5 h-5 border-2 border-zinc-700 border-t-indigo-500 rounded-full animate-spin" />
+              <div class="w-5 h-5 border-2 border-zinc-700 border-t-cyan-500 rounded-full animate-spin" />
             </div>
           ) : session.messages.length === 0 && !activeRunId ? (
             <p class="text-center text-sm text-zinc-600 py-10">
@@ -269,7 +269,7 @@ export default function Chat() {
             <select
               value={modelKey}
               onChange={(e) => setModelKey((e.target as HTMLSelectElement).value)}
-              class="rounded-lg bg-zinc-900 border border-zinc-800 px-2 py-1 text-xs text-zinc-300 focus:outline-none focus:border-indigo-600"
+              class="rounded-lg bg-zinc-900 border border-zinc-800 px-2 py-1 text-xs text-zinc-300 focus:outline-none focus:border-cyan-600"
             >
               {models.map((m) => (
                 <option key={m.key} value={m.key}>
@@ -292,7 +292,7 @@ export default function Chat() {
             placeholder={activeRunId ? 'Hermes is responding…' : 'Message Hermes…'}
             rows={1}
             disabled={!!activeRunId}
-            class="flex-1 rounded-xl bg-zinc-900 border border-zinc-800 px-3 py-2.5 text-sm text-zinc-100 placeholder-zinc-600 focus:outline-none focus:border-indigo-600 resize-none disabled:opacity-60"
+            class="flex-1 rounded-xl bg-zinc-900 border border-zinc-800 px-3 py-2.5 text-sm text-zinc-100 placeholder-zinc-600 focus:outline-none focus:border-cyan-600 resize-none disabled:opacity-60"
           />
           <button
             type="submit"
diff --git a/app/src/components/ChatList.tsx b/app/src/components/ChatList.tsx
index 09ddc6f..8ebf7b4 100644
--- a/app/src/components/ChatList.tsx
+++ b/app/src/components/ChatList.tsx
@@ -93,7 +93,7 @@ export default function ChatList() {
       <div class="flex-1 overflow-y-auto">
         {sessions === null ? (
           <div class="flex justify-center py-16">
-            <div class="w-5 h-5 border-2 border-zinc-700 border-t-indigo-500 rounded-full animate-spin" />
+            <div class="w-5 h-5 border-2 border-zinc-700 border-t-cyan-500 rounded-full animate-spin" />
           </div>
         ) : sessions.length === 0 ? (
           <p class="text-center text-sm text-zinc-600 py-16 px-4">
diff --git a/app/src/components/CreateJob.tsx b/app/src/components/CreateJob.tsx
index bfda7e2..1d09197 100644
--- a/app/src/components/CreateJob.tsx
+++ b/app/src/components/CreateJob.tsx
@@ -6,7 +6,7 @@ import { navigate } from '../utils/navigate.ts';
 const SSH_REMOTE_REGEX = /^(?:[^@\s]+@[^:\s]+:.+|ssh:\/\/.+)$/;
 
 const PROSE =
-  'prose prose-sm prose-invert max-w-none prose-headings:text-zinc-100 prose-p:text-zinc-300 prose-a:text-blue-400 prose-strong:text-zinc-200 prose-code:text-amber-300 prose-code:bg-zinc-900 prose-code:px-1 prose-code:rounded prose-code:before:content-none prose-code:after:content-none prose-pre:bg-zinc-900 prose-pre:border prose-pre:border-zinc-800 prose-li:text-zinc-300';
+  'prose prose-sm prose-invert max-w-none prose-headings:text-zinc-100 prose-p:text-zinc-300 prose-a:text-cyan-400 prose-strong:text-zinc-200 prose-code:text-cyan-300 prose-code:bg-zinc-900 prose-code:px-1 prose-code:rounded prose-code:before:content-none prose-code:after:content-none prose-pre:bg-zinc-900 prose-pre:border prose-pre:border-zinc-800 prose-li:text-zinc-300';
 
 export default function CreateJob() {
   const [title, setTitle] = useState('');
@@ -76,7 +76,7 @@ export default function CreateJob() {
               value={title}
               onInput={(e) => setTitle((e.target as HTMLInputElement).value)}
               placeholder="Short summary of the work"
-              class="w-full rounded-lg bg-zinc-900 border border-zinc-800 px-3 py-2 text-sm text-zinc-100 placeholder-zinc-600 focus:outline-none focus:border-indigo-600"
+              class="w-full rounded-lg bg-zinc-900 border border-zinc-800 px-3 py-2 text-sm text-zinc-100 placeholder-zinc-600 focus:outline-none focus:border-cyan-600"
             />
           </div>
 
@@ -90,7 +90,7 @@ export default function CreateJob() {
               onInput={(e) => setRepoUrl((e.target as HTMLInputElement).value)}
               placeholder="git@github.com:owner/repo.git — leave empty for a scratch workspace"
               class={`w-full rounded-lg bg-zinc-900 border px-3 py-2 text-sm font-mono text-zinc-100 placeholder-zinc-600 focus:outline-none ${
-                repoInvalid ? 'border-red-700 focus:border-red-600' : 'border-zinc-800 focus:border-indigo-600'
+                repoInvalid ? 'border-red-700 focus:border-red-600' : 'border-zinc-800 focus:border-cyan-600'
               }`}
             />
             {repoInvalid && (
@@ -125,7 +125,7 @@ export default function CreateJob() {
                 onInput={(e) => setRequirements((e.target as HTMLTextAreaElement).value)}
                 placeholder="Describe the work like a GitHub issue — context, goals, acceptance criteria…"
                 rows={14}
-                class="w-full rounded-lg bg-zinc-900 border border-zinc-800 px-3 py-2 text-sm font-mono text-zinc-100 placeholder-zinc-600 focus:outline-none focus:border-indigo-600 resize-y"
+                class="w-full rounded-lg bg-zinc-900 border border-zinc-800 px-3 py-2 text-sm font-mono text-zinc-100 placeholder-zinc-600 focus:outline-none focus:border-cyan-600 resize-y"
               />
             )}
           </div>
diff --git a/app/src/components/JobCard.tsx b/app/src/components/JobCard.tsx
index a6a921a..c4e6fe8 100644
--- a/app/src/components/JobCard.tsx
+++ b/app/src/components/JobCard.tsx
@@ -56,7 +56,7 @@ export default function JobCard({ job }: Props) {
         {job.prNumber ? (
           <a
             href={job.prUrl ?? '#'}
-            class={`text-xs font-mono hover:underline ${job.prIsDraft ? 'text-zinc-500' : 'text-sky-400'}`}
+            class={`text-xs font-mono hover:underline ${job.prIsDraft ? 'text-zinc-500' : 'text-cyan-400'}`}
             onClick={(e) => e.stopPropagation()}
             target="_blank"
             rel="noopener noreferrer"
diff --git a/app/src/components/JobDetail.tsx b/app/src/components/JobDetail.tsx
index 1ac279c..ef7abdb 100644
--- a/app/src/components/JobDetail.tsx
+++ b/app/src/components/JobDetail.tsx
@@ -197,7 +197,7 @@ export default function JobDetail() {
     return (
       <div class="flex flex-col items-center justify-center h-full text-zinc-500 gap-3">
         <p class="text-base">Job not found</p>
-        <button class="text-sm text-indigo-400 hover:text-indigo-300" onClick={() => navigate('/')}>
+        <button class="text-sm text-cyan-400 hover:text-cyan-300" onClick={() => navigate('/')}>
           Back to all jobs
         </button>
       </div>
@@ -207,7 +207,7 @@ export default function JobDetail() {
   if (!job) {
     return (
       <div class="flex items-center justify-center h-full">
-        <div class="w-6 h-6 border-2 border-zinc-700 border-t-indigo-500 rounded-full animate-spin" />
+        <div class="w-6 h-6 border-2 border-zinc-700 border-t-cyan-500 rounded-full animate-spin" />
       </div>
     );
   }
@@ -250,16 +250,16 @@ export default function JobDetail() {
             {(activeRun || !TERMINAL_STATES.has(job.state) || job.state === 'FAILED') && (
               <div class="flex items-stretch gap-2">
                 {activeRun && (
-                  <div class="flex-1 min-w-0 rounded-lg border border-hermes-300/30 bg-hermes-400/10 px-3 py-2.5 flex items-center gap-2.5">
-                    <span class="w-1.5 h-1.5 rounded-full bg-hermes-400 animate-pulse shrink-0" />
-                    <span class="text-xs text-hermes-400 font-mono">{activeRun.phase}</span>
+                  <div class="flex-1 min-w-0 rounded-lg border border-green-500/30 bg-green-500/10 px-3 py-2.5 flex items-center gap-2.5">
+                    <span class="w-1.5 h-1.5 rounded-full bg-green-400 animate-pulse shrink-0" />
+                    <span class="text-xs text-green-400 font-mono">{activeRun.phase}</span>
                     {activeRun.model && (
                       <span class="text-xs text-zinc-500 truncate hidden sm:block">
                         {activeRun.model}
                       </span>
                     )}
                     <button
-                      class="ml-auto shrink-0 text-xs font-medium text-hermes-400 hover:text-hermes-300 transition-colors"
+                      class="ml-auto shrink-0 text-xs font-medium text-green-400 hover:text-green-300 transition-colors"
                       onClick={() => navigate(`/jobs/${id}/runs/${activeRun.id}`)}
                     >
                       Watch live →
@@ -315,7 +315,7 @@ export default function JobDetail() {
               {job.prNumber && (
                 <a
                   href={job.prUrl ?? '#'}
-                  class={`shrink-0 hover:underline ${job.prIsDraft ? 'text-zinc-500' : 'text-sky-400'}`}
+                  class={`shrink-0 hover:underline ${job.prIsDraft ? 'text-zinc-500' : 'text-cyan-400'}`}
                   target="_blank"
                   rel="noopener noreferrer"
                 >
@@ -375,7 +375,7 @@ export default function JobDetail() {
                     onInput={(e) => setChangesNote((e.target as HTMLTextAreaElement).value)}
                     placeholder="Request changes (Markdown) — Hermes will revise and push an update…"
                     rows={3}
-                    class="w-full rounded-lg bg-zinc-900 border border-zinc-800 px-3 py-2 text-sm text-zinc-100 placeholder-zinc-600 focus:outline-none focus:border-indigo-600 resize-y"
+                    class="w-full rounded-lg bg-zinc-900 border border-zinc-800 px-3 py-2 text-sm text-zinc-100 placeholder-zinc-600 focus:outline-none focus:border-cyan-600 resize-y"
                   />
                   <button
                     disabled={actionPending || changesNote.trim().length === 0}
diff --git a/app/src/components/JobList.tsx b/app/src/components/JobList.tsx
index 6cefda3..7297e57 100644
--- a/app/src/components/JobList.tsx
+++ b/app/src/components/JobList.tsx
@@ -41,7 +41,7 @@ function MobileJobCard({ job }: { job: JobSummaryDto }) {
             </span>
           )}
           {job.prNumber && (
-            <span class={job.prIsDraft ? 'text-zinc-600' : 'text-sky-400'}>PR #{job.prNumber}</span>
+            <span class={job.prIsDraft ? 'text-zinc-600' : 'text-cyan-400'}>PR #{job.prNumber}</span>
           )}
           {job.confidence !== null && (
             <span
diff --git a/app/src/components/JudgeOutput.tsx b/app/src/components/JudgeOutput.tsx
index 49ef9c6..cfc4018 100644
--- a/app/src/components/JudgeOutput.tsx
+++ b/app/src/components/JudgeOutput.tsx
@@ -36,7 +36,7 @@ export default function JudgeOutput() {
       <div class="flex flex-col items-center justify-center h-full text-zinc-500 gap-3">
         <p class="text-base">Judgement not found</p>
         <button
-          class="text-sm text-indigo-400 hover:text-indigo-300"
+          class="text-sm text-cyan-400 hover:text-cyan-300"
           onClick={() => navigate(`/jobs/${jobId}`)}
         >
           Back to job
@@ -48,7 +48,7 @@ export default function JudgeOutput() {
   if (!judgement) {
     return (
       <div class="flex items-center justify-center h-full">
-        <div class="w-6 h-6 border-2 border-zinc-700 border-t-indigo-500 rounded-full animate-spin" />
+        <div class="w-6 h-6 border-2 border-zinc-700 border-t-cyan-500 rounded-full animate-spin" />
       </div>
     );
   }
@@ -66,7 +66,7 @@ export default function JudgeOutput() {
           ← Back
         </button>
         <span class="text-zinc-700 text-sm">/</span>
-        <span class="font-mono text-xs px-2 py-0.5 rounded shrink-0 bg-pink-900/60 text-pink-300">
+        <span class="font-mono text-xs px-2 py-0.5 rounded shrink-0 bg-zinc-800 text-zinc-300">
           JUDGE
         </span>
         <span
@@ -80,7 +80,7 @@ export default function JudgeOutput() {
         <div class="max-w-4xl mx-auto px-4 py-5 space-y-4">
           {html ? (
             <div
-              class="prose prose-sm prose-invert max-w-none prose-headings:text-zinc-100 prose-p:text-zinc-300 prose-li:text-zinc-300 prose-strong:text-zinc-200 prose-code:text-amber-300 prose-code:bg-zinc-900 prose-code:px-1 prose-code:py-0.5 prose-code:rounded prose-code:before:content-none prose-code:after:content-none prose-pre:bg-zinc-900 prose-pre:border prose-pre:border-zinc-800"
+              class="prose prose-sm prose-invert max-w-none prose-headings:text-zinc-100 prose-p:text-zinc-300 prose-li:text-zinc-300 prose-strong:text-zinc-200 prose-code:text-cyan-300 prose-code:bg-zinc-900 prose-code:px-1 prose-code:py-0.5 prose-code:rounded prose-code:before:content-none prose-code:after:content-none prose-pre:bg-zinc-900 prose-pre:border prose-pre:border-zinc-800"
               // eslint-disable-next-line react/no-danger
               dangerouslySetInnerHTML={{ __html: html }}
             />
diff --git a/app/src/components/Markdown.tsx b/app/src/components/Markdown.tsx
index 61a3c2c..b7363ca 100644
--- a/app/src/components/Markdown.tsx
+++ b/app/src/components/Markdown.tsx
@@ -5,9 +5,9 @@ const PROSE =
   'prose prose-sm prose-invert max-w-none ' +
   'prose-headings:font-semibold prose-headings:text-zinc-100 ' +
   'prose-p:text-zinc-300 prose-p:leading-relaxed ' +
-  'prose-a:text-blue-400 hover:prose-a:text-blue-300 ' +
+  'prose-a:text-cyan-400 hover:prose-a:text-cyan-300 ' +
   'prose-strong:text-zinc-200 ' +
-  'prose-code:text-amber-300 prose-code:bg-zinc-900 prose-code:px-1 prose-code:py-0.5 prose-code:rounded prose-code:text-[0.8em] prose-code:before:content-none prose-code:after:content-none ' +
+  'prose-code:text-cyan-300 prose-code:bg-zinc-900 prose-code:px-1 prose-code:py-0.5 prose-code:rounded prose-code:text-[0.8em] prose-code:before:content-none prose-code:after:content-none ' +
   'prose-pre:bg-zinc-900 prose-pre:border prose-pre:border-zinc-800 ' +
   'prose-blockquote:border-zinc-700 prose-blockquote:text-zinc-400 ' +
   'prose-hr:border-zinc-800 prose-li:text-zinc-300';
diff --git a/app/src/components/PlanThread.tsx b/app/src/components/PlanThread.tsx
index 3fb5fec..adc77ac 100644
--- a/app/src/components/PlanThread.tsx
+++ b/app/src/components/PlanThread.tsx
@@ -59,7 +59,7 @@ export default function PlanThread({
                     ? 'bg-green-900/50 text-green-400'
                     : item.plan.status === 'SUPERSEDED'
                       ? 'bg-zinc-800 text-zinc-500'
-                      : 'bg-indigo-900/40 text-indigo-300'
+                      : 'bg-cyan-900/40 text-cyan-300'
                 }`}
               >
                 {item.plan.status}
@@ -89,7 +89,7 @@ export default function PlanThread({
             onInput={(e) => setFeedback((e.target as HTMLTextAreaElement).value)}
             placeholder="Request changes to the plan (Markdown) — Hermes will revise and re-propose…"
             rows={4}
-            class="w-full rounded-lg bg-zinc-900 border border-zinc-800 px-3 py-2 text-sm text-zinc-100 placeholder-zinc-600 focus:outline-none focus:border-indigo-600 resize-y"
+            class="w-full rounded-lg bg-zinc-900 border border-zinc-800 px-3 py-2 text-sm text-zinc-100 placeholder-zinc-600 focus:outline-none focus:border-cyan-600 resize-y"
           />
           <button
             disabled={pending || feedback.trim().length === 0}
diff --git a/app/src/components/RepoControl.tsx b/app/src/components/RepoControl.tsx
index 465f9a4..7a47a4e 100644
--- a/app/src/components/RepoControl.tsx
+++ b/app/src/components/RepoControl.tsx
@@ -63,7 +63,7 @@ export default function RepoControl({
               setValue(repoUrl ?? '');
               setEditing(true);
             }}
-            class="text-indigo-400 hover:text-indigo-300 transition-colors"
+            class="text-cyan-400 hover:text-cyan-300 transition-colors"
           >
             {repoUrl ? 'change' : 'set'}
           </button>
@@ -81,7 +81,7 @@ export default function RepoControl({
           onInput={(e) => setValue((e.target as HTMLInputElement).value)}
           placeholder="git@github.com:owner/repo.git (empty = scratch)"
           class={`flex-1 rounded-lg bg-zinc-900 border px-2.5 py-1.5 text-xs font-mono text-zinc-100 placeholder-zinc-600 focus:outline-none ${
-            invalid ? 'border-red-700' : 'border-zinc-800 focus:border-indigo-600'
+            invalid ? 'border-red-700' : 'border-zinc-800 focus:border-cyan-600'
           }`}
         />
         <button
diff --git a/app/src/components/ReviewPassCard.tsx b/app/src/components/ReviewPassCard.tsx
index faad247..7fc6363 100644
--- a/app/src/components/ReviewPassCard.tsx
+++ b/app/src/components/ReviewPassCard.tsx
@@ -8,8 +8,8 @@ interface Props {
 const SEVERITY_STYLES = {
   low: 'bg-zinc-700 text-zinc-300',
   medium: 'bg-amber-900 text-amber-300',
-  high: 'bg-orange-900 text-orange-300',
-  critical: 'bg-red-900 text-red-300',
+  high: 'bg-red-950 text-red-300',
+  critical: 'bg-red-900 text-red-200',
 };
 
 export default function ReviewPassCard({ pass }: Props) {
diff --git a/app/src/components/RunOutput/EventCard.tsx b/app/src/components/RunOutput/EventCard.tsx
index ff2bb19..b8bc37f 100644
--- a/app/src/components/RunOutput/EventCard.tsx
+++ b/app/src/components/RunOutput/EventCard.tsx
@@ -83,9 +83,9 @@ function GenerationCard({ event, isSubagent }: { event: LangfuseEvent; isSubagen
         section: 'border-cyan-900/30',
       }
     : {
-        border: 'border-indigo-900/50',
-        header: 'bg-indigo-950/50 text-indigo-200',
-        section: 'border-indigo-900/30',
+        border: 'border-zinc-800',
+        header: 'bg-zinc-900/70 text-zinc-200',
+        section: 'border-zinc-800',
       };
 
   return (
@@ -185,9 +185,9 @@ function GenerationCard({ event, isSubagent }: { event: LangfuseEvent; isSubagen
                 class="prose prose-sm prose-invert max-w-none
               prose-headings:font-semibold prose-headings:text-zinc-100
               prose-p:text-zinc-300 prose-p:leading-relaxed
-              prose-a:text-blue-400 hover:prose-a:text-blue-300
+              prose-a:text-cyan-400 hover:prose-a:text-cyan-300
               prose-strong:text-zinc-200
-              prose-code:text-amber-300 prose-code:bg-zinc-900 prose-code:px-1 prose-code:py-0.5 prose-code:rounded prose-code:text-[0.8em] prose-code:before:content-none prose-code:after:content-none
+              prose-code:text-cyan-300 prose-code:bg-zinc-900 prose-code:px-1 prose-code:py-0.5 prose-code:rounded prose-code:text-[0.8em] prose-code:before:content-none prose-code:after:content-none
               prose-pre:bg-zinc-900 prose-pre:border prose-pre:border-zinc-800
               prose-blockquote:border-zinc-700 prose-blockquote:text-zinc-400
               prose-hr:border-zinc-800
diff --git a/app/src/components/RunOutput/Observations.tsx b/app/src/components/RunOutput/Observations.tsx
index 5815cfc..05fa4cc 100644
--- a/app/src/components/RunOutput/Observations.tsx
+++ b/app/src/components/RunOutput/Observations.tsx
@@ -48,9 +48,9 @@ export function isDiff(text: string): boolean {
 export function ChatMessages({ messages }: { messages: ChatMessage[] }) {
   const roleStyle: Record<string, string> = {
     system: 'text-zinc-600',
-    user: 'text-sky-400',
-    assistant: 'text-indigo-300',
-    tool: 'text-amber-400',
+    user: 'text-cyan-400',
+    assistant: 'text-hermes-400',
+    tool: 'text-zinc-400',
   };
   return (
     <div class="divide-y divide-zinc-800/50">
@@ -92,7 +92,7 @@ export function DiffView({ text }: { text: string }) {
         return (
           <div
             key={i}
-            class={`px-2 ${isAdd ? 'bg-green-950/40' : isDel ? 'bg-red-950/40' : isHunk ? 'bg-indigo-950/30' : ''}`}
+            class={`px-2 ${isAdd ? 'bg-green-950/40' : isDel ? 'bg-red-950/40' : isHunk ? 'bg-cyan-950/30' : ''}`}
           >
             <span
               class={
@@ -101,7 +101,7 @@ export function DiffView({ text }: { text: string }) {
                   : isDel
                     ? 'text-red-300'
                     : isHunk
-                      ? 'text-indigo-400'
+                      ? 'text-cyan-400'
                       : isHeader
                         ? 'text-zinc-400 font-semibold'
                         : 'text-zinc-500'
diff --git a/app/src/components/RunOutput/StaticOutput.tsx b/app/src/components/RunOutput/StaticOutput.tsx
index fed36b6..85d0590 100644
--- a/app/src/components/RunOutput/StaticOutput.tsx
+++ b/app/src/components/RunOutput/StaticOutput.tsx
@@ -69,9 +69,9 @@ export function StaticOutput({
                 class="prose prose-sm sm:prose-base prose-invert max-w-none
                 prose-headings:font-semibold prose-headings:text-zinc-100
                 prose-p:text-zinc-300 prose-p:leading-relaxed
-                prose-a:text-blue-400 hover:prose-a:text-blue-300
+                prose-a:text-cyan-400 hover:prose-a:text-cyan-300
                 prose-strong:text-zinc-200
-                prose-code:text-amber-300 prose-code:bg-zinc-900 prose-code:px-1 prose-code:py-0.5 prose-code:rounded prose-code:text-[0.8em] prose-code:before:content-none prose-code:after:content-none
+                prose-code:text-cyan-300 prose-code:bg-zinc-900 prose-code:px-1 prose-code:py-0.5 prose-code:rounded prose-code:text-[0.8em] prose-code:before:content-none prose-code:after:content-none
                 prose-pre:bg-zinc-900 prose-pre:border prose-pre:border-zinc-800
                 prose-blockquote:border-zinc-700 prose-blockquote:text-zinc-400
                 prose-hr:border-zinc-800
diff --git a/app/src/components/RunOutput/index.tsx b/app/src/components/RunOutput/index.tsx
index ac652bb..c78a5b3 100644
--- a/app/src/components/RunOutput/index.tsx
+++ b/app/src/components/RunOutput/index.tsx
@@ -63,7 +63,7 @@ export default function RunOutput() {
           </button>
         </header>
         <div class="flex-1 bg-black flex items-center justify-center">
-          <div class="w-5 h-5 border-2 border-zinc-700 border-t-indigo-500 rounded-full animate-spin" />
+          <div class="w-5 h-5 border-2 border-zinc-700 border-t-cyan-500 rounded-full animate-spin" />
         </div>
       </div>
     );
diff --git a/app/src/components/StateBadge.tsx b/app/src/components/StateBadge.tsx
index fbba9c2..19749d8 100644
--- a/app/src/components/StateBadge.tsx
+++ b/app/src/components/StateBadge.tsx
@@ -1,13 +1,19 @@
+// Palette: active/in-progress stages → cyan; awaiting-human → amber; terminal success/failure →
+// green/red; idle/cancelled → zinc. The label text names the specific stage, so colour only needs
+// to convey the broad category.
+const ACTIVE = 'bg-cyan-950 text-cyan-300 border border-cyan-800';
+const AWAITING = 'bg-amber-950 text-amber-300 border border-amber-800';
+
 const STATE_STYLES: Record<string, string> = {
   TRIAGED: 'bg-zinc-800 text-zinc-400 border border-zinc-700',
-  PLANNING: 'bg-blue-950 text-blue-300 border border-blue-800',
-  AWAITING_PLAN_APPROVAL: 'bg-amber-950 text-amber-300 border border-amber-800',
-  IMPLEMENTING: 'bg-sky-950 text-sky-300 border border-sky-800',
-  VERIFYING: 'bg-teal-950 text-teal-300 border border-teal-800',
-  SELF_REVIEWING: 'bg-violet-950 text-violet-300 border border-violet-800',
-  REVISING: 'bg-sky-950 text-sky-300 border border-sky-800',
-  OPENING_PR: 'bg-indigo-950 text-indigo-300 border border-indigo-800',
-  AWAITING_PR_APPROVAL: 'bg-amber-950 text-amber-300 border border-amber-800',
+  PLANNING: ACTIVE,
+  AWAITING_PLAN_APPROVAL: AWAITING,
+  IMPLEMENTING: ACTIVE,
+  VERIFYING: ACTIVE,
+  SELF_REVIEWING: ACTIVE,
+  REVISING: ACTIVE,
+  OPENING_PR: ACTIVE,
+  AWAITING_PR_APPROVAL: AWAITING,
   DONE: 'bg-green-950 text-green-300 border border-green-800',
   FAILED: 'bg-red-950 text-red-400 border border-red-900',
   CANCELLED: 'bg-zinc-900 text-zinc-500 border border-zinc-800',
diff --git a/app/src/components/Timeline.tsx b/app/src/components/Timeline.tsx
index a5ef937..254e448 100644
--- a/app/src/components/Timeline.tsx
+++ b/app/src/components/Timeline.tsx
@@ -6,8 +6,8 @@ interface Props {
 }
 
 const ACTOR_STYLES: Record<string, string> = {
-  HUMAN: 'text-blue-400',
-  AGENT: 'text-violet-400',
+  HUMAN: 'text-cyan-400',
+  AGENT: 'text-hermes-400',
   SYSTEM: 'text-zinc-500',
 };
 
diff --git a/app/src/components/VerifyOutput.tsx b/app/src/components/VerifyOutput.tsx
index 153613f..54b2021 100644
--- a/app/src/components/VerifyOutput.tsx
+++ b/app/src/components/VerifyOutput.tsx
@@ -47,7 +47,7 @@ export default function VerifyOutput() {
       <div class="flex flex-col items-center justify-center h-full text-zinc-500 gap-3">
         <p class="text-base">Verification not found</p>
         <button
-          class="text-sm text-indigo-400 hover:text-indigo-300"
+          class="text-sm text-cyan-400 hover:text-cyan-300"
           onClick={() => navigate(`/jobs/${jobId}`)}
         >
           Back to job
@@ -59,7 +59,7 @@ export default function VerifyOutput() {
   if (!run) {
     return (
       <div class="flex items-center justify-center h-full">
-        <div class="w-6 h-6 border-2 border-zinc-700 border-t-indigo-500 rounded-full animate-spin" />
+        <div class="w-6 h-6 border-2 border-zinc-700 border-t-cyan-500 rounded-full animate-spin" />
       </div>
     );
   }
@@ -76,10 +76,10 @@ export default function VerifyOutput() {
           ← Back
         </button>
         <span class="text-zinc-700 text-sm">/</span>
-        <span class="font-mono text-xs px-2 py-0.5 rounded shrink-0 bg-teal-900/60 text-teal-300">
+        <span class="font-mono text-xs px-2 py-0.5 rounded shrink-0 bg-zinc-800 text-zinc-300">
           VERIFY
         </span>
-        <span class={`text-xs font-medium ${run.ok ? 'text-teal-400' : 'text-red-400'}`}>
+        <span class={`text-xs font-medium ${run.ok ? 'text-green-400' : 'text-red-400'}`}>
           {run.ok ? '✓ passed' : '✗ failed'}
         </span>
         <span class="text-xs text-zinc-600">attempt {run.attempt}</span>
diff --git a/app/src/components/VerifyRunRow.tsx b/app/src/components/VerifyRunRow.tsx
index 72f9580..0bf0615 100644
--- a/app/src/components/VerifyRunRow.tsx
+++ b/app/src/components/VerifyRunRow.tsx
@@ -20,12 +20,12 @@ export default function VerifyRunRow({ run, jobId }: Props) {
   return (
     <div class="rounded-lg border border-zinc-800 bg-zinc-900/50 p-3">
       <div class="flex items-center gap-3">
-        <span class="font-mono text-xs px-2.5 py-1 rounded shrink-0 bg-teal-900/60 text-teal-300">
+        <span class="font-mono text-xs px-2.5 py-1 rounded shrink-0 bg-zinc-800 text-zinc-300">
           VERIFY
         </span>
 
         <div class="flex-1 min-w-0 leading-tight">
-          <span class={`text-xs font-medium ${run.ok ? 'text-teal-400' : 'text-red-400'}`}>
+          <span class={`text-xs font-medium ${run.ok ? 'text-green-400' : 'text-red-400'}`}>
             {run.ok ? 'Passed' : 'Failed'}
           </span>
           <p class="text-xs text-zinc-600 mt-0 font-mono truncate">

From beaba34b0198d294e50515543af738f32d2664e7 Mon Sep 17 00:00:00 2001
From: jahilldev <contact@jameshill.dev>
Date: Sun, 28 Jun 2026 22:46:32 +0100
Subject: [PATCH 2/4] feat: adjusted inline code styleds

---
 app/src/components/CreateJob.tsx              | 2 +-
 app/src/components/JudgeOutput.tsx            | 2 +-
 app/src/components/Markdown.tsx               | 2 +-
 app/src/components/RunOutput/EventCard.tsx    | 2 +-
 app/src/components/RunOutput/StaticOutput.tsx | 2 +-
 5 files changed, 5 insertions(+), 5 deletions(-)

diff --git a/app/src/components/CreateJob.tsx b/app/src/components/CreateJob.tsx
index 1d09197..fa138ac 100644
--- a/app/src/components/CreateJob.tsx
+++ b/app/src/components/CreateJob.tsx
@@ -6,7 +6,7 @@ import { navigate } from '../utils/navigate.ts';
 const SSH_REMOTE_REGEX = /^(?:[^@\s]+@[^:\s]+:.+|ssh:\/\/.+)$/;
 
 const PROSE =
-  'prose prose-sm prose-invert max-w-none prose-headings:text-zinc-100 prose-p:text-zinc-300 prose-a:text-cyan-400 prose-strong:text-zinc-200 prose-code:text-cyan-300 prose-code:bg-zinc-900 prose-code:px-1 prose-code:rounded prose-code:before:content-none prose-code:after:content-none prose-pre:bg-zinc-900 prose-pre:border prose-pre:border-zinc-800 prose-li:text-zinc-300';
+  'prose prose-sm prose-invert max-w-none prose-headings:text-zinc-100 prose-p:text-zinc-300 prose-a:text-cyan-400 prose-strong:text-zinc-200 prose-code:text-amber-300 prose-code:bg-zinc-900 prose-code:px-1 prose-code:rounded prose-code:before:content-none prose-code:after:content-none prose-pre:bg-zinc-900 prose-pre:border prose-pre:border-zinc-800 prose-li:text-zinc-300';
 
 export default function CreateJob() {
   const [title, setTitle] = useState('');
diff --git a/app/src/components/JudgeOutput.tsx b/app/src/components/JudgeOutput.tsx
index cfc4018..245350a 100644
--- a/app/src/components/JudgeOutput.tsx
+++ b/app/src/components/JudgeOutput.tsx
@@ -80,7 +80,7 @@ export default function JudgeOutput() {
         <div class="max-w-4xl mx-auto px-4 py-5 space-y-4">
           {html ? (
             <div
-              class="prose prose-sm prose-invert max-w-none prose-headings:text-zinc-100 prose-p:text-zinc-300 prose-li:text-zinc-300 prose-strong:text-zinc-200 prose-code:text-cyan-300 prose-code:bg-zinc-900 prose-code:px-1 prose-code:py-0.5 prose-code:rounded prose-code:before:content-none prose-code:after:content-none prose-pre:bg-zinc-900 prose-pre:border prose-pre:border-zinc-800"
+              class="prose prose-sm prose-invert max-w-none prose-headings:text-zinc-100 prose-p:text-zinc-300 prose-li:text-zinc-300 prose-strong:text-zinc-200 prose-code:text-amber-300 prose-code:bg-zinc-900 prose-code:px-1 prose-code:py-0.5 prose-code:rounded prose-code:before:content-none prose-code:after:content-none prose-pre:bg-zinc-900 prose-pre:border prose-pre:border-zinc-800"
               // eslint-disable-next-line react/no-danger
               dangerouslySetInnerHTML={{ __html: html }}
             />
diff --git a/app/src/components/Markdown.tsx b/app/src/components/Markdown.tsx
index b7363ca..65994ac 100644
--- a/app/src/components/Markdown.tsx
+++ b/app/src/components/Markdown.tsx
@@ -7,7 +7,7 @@ const PROSE =
   'prose-p:text-zinc-300 prose-p:leading-relaxed ' +
   'prose-a:text-cyan-400 hover:prose-a:text-cyan-300 ' +
   'prose-strong:text-zinc-200 ' +
-  'prose-code:text-cyan-300 prose-code:bg-zinc-900 prose-code:px-1 prose-code:py-0.5 prose-code:rounded prose-code:text-[0.8em] prose-code:before:content-none prose-code:after:content-none ' +
+  'prose-code:text-amber-300 prose-code:bg-zinc-900 prose-code:px-1 prose-code:py-0.5 prose-code:rounded prose-code:text-[0.8em] prose-code:before:content-none prose-code:after:content-none ' +
   'prose-pre:bg-zinc-900 prose-pre:border prose-pre:border-zinc-800 ' +
   'prose-blockquote:border-zinc-700 prose-blockquote:text-zinc-400 ' +
   'prose-hr:border-zinc-800 prose-li:text-zinc-300';
diff --git a/app/src/components/RunOutput/EventCard.tsx b/app/src/components/RunOutput/EventCard.tsx
index b8bc37f..3c45a56 100644
--- a/app/src/components/RunOutput/EventCard.tsx
+++ b/app/src/components/RunOutput/EventCard.tsx
@@ -187,7 +187,7 @@ function GenerationCard({ event, isSubagent }: { event: LangfuseEvent; isSubagen
               prose-p:text-zinc-300 prose-p:leading-relaxed
               prose-a:text-cyan-400 hover:prose-a:text-cyan-300
               prose-strong:text-zinc-200
-              prose-code:text-cyan-300 prose-code:bg-zinc-900 prose-code:px-1 prose-code:py-0.5 prose-code:rounded prose-code:text-[0.8em] prose-code:before:content-none prose-code:after:content-none
+              prose-code:text-amber-300 prose-code:bg-zinc-900 prose-code:px-1 prose-code:py-0.5 prose-code:rounded prose-code:text-[0.8em] prose-code:before:content-none prose-code:after:content-none
               prose-pre:bg-zinc-900 prose-pre:border prose-pre:border-zinc-800
               prose-blockquote:border-zinc-700 prose-blockquote:text-zinc-400
               prose-hr:border-zinc-800
diff --git a/app/src/components/RunOutput/StaticOutput.tsx b/app/src/components/RunOutput/StaticOutput.tsx
index 85d0590..b5e7dc5 100644
--- a/app/src/components/RunOutput/StaticOutput.tsx
+++ b/app/src/components/RunOutput/StaticOutput.tsx
@@ -71,7 +71,7 @@ export function StaticOutput({
                 prose-p:text-zinc-300 prose-p:leading-relaxed
                 prose-a:text-cyan-400 hover:prose-a:text-cyan-300
                 prose-strong:text-zinc-200
-                prose-code:text-cyan-300 prose-code:bg-zinc-900 prose-code:px-1 prose-code:py-0.5 prose-code:rounded prose-code:text-[0.8em] prose-code:before:content-none prose-code:after:content-none
+                prose-code:text-amber-300 prose-code:bg-zinc-900 prose-code:px-1 prose-code:py-0.5 prose-code:rounded prose-code:text-[0.8em] prose-code:before:content-none prose-code:after:content-none
                 prose-pre:bg-zinc-900 prose-pre:border prose-pre:border-zinc-800
                 prose-blockquote:border-zinc-700 prose-blockquote:text-zinc-400
                 prose-hr:border-zinc-800

From f693fddea372fb32dc36ab73e7f1362e4ab2a3ac Mon Sep 17 00:00:00 2001
From: jahilldev <contact@jameshill.dev>
Date: Sun, 28 Jun 2026 23:24:51 +0100
Subject: [PATCH 3/4] feat: improved semantic structure of chat prompt

---
 api/src/chat/chat.prompts.ts               | 34 +++++++++++++++++-----
 app/src/components/RunOutput/EventCard.tsx |  2 +-
 2 files changed, 27 insertions(+), 9 deletions(-)

diff --git a/api/src/chat/chat.prompts.ts b/api/src/chat/chat.prompts.ts
index 5945a12..1feefba 100644
--- a/api/src/chat/chat.prompts.ts
+++ b/api/src/chat/chat.prompts.ts
@@ -18,11 +18,21 @@ export function buildChatPrompt(p: {
     .join('\n\n');
 
   return [
-    `You are Hermes, a capable autonomous assistant in an interactive chat. Help with research, questions, analysis, and general engineering work.`,
-    workspaceNote,
-    `Use your full toolset — web access, file reading, and shell — as needed to answer well. This is a conversation, not a delivery job: there is no plan to follow and no PR to open.`,
-    `--- CONVERSATION SO FAR ---\n${transcript}\n--- END CONVERSATION ---`,
-    `Respond to the latest user message above. Output only your reply in GitHub-flavored Markdown — no preamble, no sign-off.`,
+    `# Role
+
+You are Hermes, a capable autonomous assistant in an interactive chat. Help with research, questions, analysis, and general engineering work.
+
+${workspaceNote}
+
+Use your full toolset — web access, file reading, and shell — as needed to answer well. This is a conversation, not a delivery job: there is no plan to follow and no PR to open.`,
+    `# Context
+
+--- CONVERSATION SO FAR ---
+${transcript}
+--- END CONVERSATION ---`,
+    `# Responding
+
+Respond to the latest user message above. Output only your reply in GitHub-flavored Markdown — no preamble, no sign-off.`,
   ].join('\n\n');
 }
 
@@ -32,8 +42,16 @@ export function buildChatPrompt(p: {
  */
 export function buildTitlePrompt(firstMessage: string): string {
   return [
-    `Generate a short, descriptive title for a chat conversation that opens with the message below.`,
-    `Rules:\n- Output ONLY the title — no quotes, no markdown, no trailing punctuation, no preamble.\n- 4 to 8 words, Title Case.\n- Do NOT use any tools; just reply with the title.`,
-    `--- FIRST MESSAGE ---\n${firstMessage}\n--- END ---`,
+    `# Task
+
+Generate a short, descriptive title for a chat conversation that opens with the message below.`,
+    `--- FIRST MESSAGE ---
+${firstMessage}
+--- END FIRST MESSAGE ---`,
+    `# Rules
+
+- Output ONLY the title — no quotes, no markdown, no trailing punctuation, no preamble.
+- 4 to 8 words, Title Case.
+- Do NOT use any tools; just reply with the title.`,
   ].join('\n\n');
 }
diff --git a/app/src/components/RunOutput/EventCard.tsx b/app/src/components/RunOutput/EventCard.tsx
index 3c45a56..9e0ea36 100644
--- a/app/src/components/RunOutput/EventCard.tsx
+++ b/app/src/components/RunOutput/EventCard.tsx
@@ -215,7 +215,7 @@ function ToolCard({ event, isSubagent }: { event: LangfuseEvent; isSubagent?: bo
   return (
     <div class="rounded-xl border border-amber-900/40 overflow-hidden text-xs shadow-sm">
       {/* Header */}
-      <div class="flex items-center gap-2 px-3 py-2.5 bg-amber-950/25 text-amber-200">
+      <div class="flex items-center gap-2 px-3 py-2.5 bg-amber-950/25 text-amber-300">
         <IconWrench />
         <span class="font-semibold font-mono tracking-wide">TOOL</span>
         <span class="text-zinc-300 font-mono font-medium">{displayName}</span>

From 34ee610b8320f91b175f7ebf68770b6132e4e576 Mon Sep 17 00:00:00 2001
From: jahilldev <contact@jameshill.dev>
Date: Mon, 29 Jun 2026 21:55:18 +0100
Subject: [PATCH 4/4] feat: styled code blocks correctly

---
 app/src/components/CreateJob.tsx              | 2 +-
 app/src/components/JudgeOutput.tsx            | 2 +-
 app/src/components/Markdown.tsx               | 2 +-
 app/src/components/RunOutput/EventCard.tsx    | 2 +-
 app/src/components/RunOutput/StaticOutput.tsx | 2 +-
 5 files changed, 5 insertions(+), 5 deletions(-)

diff --git a/app/src/components/CreateJob.tsx b/app/src/components/CreateJob.tsx
index fa138ac..e508d2e 100644
--- a/app/src/components/CreateJob.tsx
+++ b/app/src/components/CreateJob.tsx
@@ -6,7 +6,7 @@ import { navigate } from '../utils/navigate.ts';
 const SSH_REMOTE_REGEX = /^(?:[^@\s]+@[^:\s]+:.+|ssh:\/\/.+)$/;
 
 const PROSE =
-  'prose prose-sm prose-invert max-w-none prose-headings:text-zinc-100 prose-p:text-zinc-300 prose-a:text-cyan-400 prose-strong:text-zinc-200 prose-code:text-amber-300 prose-code:bg-zinc-900 prose-code:px-1 prose-code:rounded prose-code:before:content-none prose-code:after:content-none prose-pre:bg-zinc-900 prose-pre:border prose-pre:border-zinc-800 prose-li:text-zinc-300';
+  'prose prose-sm prose-invert max-w-none prose-headings:text-zinc-100 prose-p:text-zinc-300 prose-a:text-cyan-400 prose-strong:text-zinc-200 prose-code:text-amber-300 prose-code:bg-zinc-900 prose-code:px-1 prose-code:rounded prose-code:before:content-none prose-code:after:content-none prose-pre:bg-zinc-900 prose-pre:text-zinc-300 [&_pre_code]:text-zinc-300 prose-pre:border prose-pre:border-zinc-800 prose-li:text-zinc-300';
 
 export default function CreateJob() {
   const [title, setTitle] = useState('');
diff --git a/app/src/components/JudgeOutput.tsx b/app/src/components/JudgeOutput.tsx
index 245350a..4295dd8 100644
--- a/app/src/components/JudgeOutput.tsx
+++ b/app/src/components/JudgeOutput.tsx
@@ -80,7 +80,7 @@ export default function JudgeOutput() {
         <div class="max-w-4xl mx-auto px-4 py-5 space-y-4">
           {html ? (
             <div
-              class="prose prose-sm prose-invert max-w-none prose-headings:text-zinc-100 prose-p:text-zinc-300 prose-li:text-zinc-300 prose-strong:text-zinc-200 prose-code:text-amber-300 prose-code:bg-zinc-900 prose-code:px-1 prose-code:py-0.5 prose-code:rounded prose-code:before:content-none prose-code:after:content-none prose-pre:bg-zinc-900 prose-pre:border prose-pre:border-zinc-800"
+              class="prose prose-sm prose-invert max-w-none prose-headings:text-zinc-100 prose-p:text-zinc-300 prose-li:text-zinc-300 prose-strong:text-zinc-200 prose-code:text-amber-300 prose-code:bg-zinc-900 prose-code:px-1 prose-code:py-0.5 prose-code:rounded prose-code:before:content-none prose-code:after:content-none prose-pre:bg-zinc-900 prose-pre:text-zinc-300 [&_pre_code]:text-zinc-300 prose-pre:border prose-pre:border-zinc-800"
               // eslint-disable-next-line react/no-danger
               dangerouslySetInnerHTML={{ __html: html }}
             />
diff --git a/app/src/components/Markdown.tsx b/app/src/components/Markdown.tsx
index 65994ac..0e6fce8 100644
--- a/app/src/components/Markdown.tsx
+++ b/app/src/components/Markdown.tsx
@@ -8,7 +8,7 @@ const PROSE =
   'prose-a:text-cyan-400 hover:prose-a:text-cyan-300 ' +
   'prose-strong:text-zinc-200 ' +
   'prose-code:text-amber-300 prose-code:bg-zinc-900 prose-code:px-1 prose-code:py-0.5 prose-code:rounded prose-code:text-[0.8em] prose-code:before:content-none prose-code:after:content-none ' +
-  'prose-pre:bg-zinc-900 prose-pre:border prose-pre:border-zinc-800 ' +
+  'prose-pre:bg-zinc-900 prose-pre:text-zinc-300 [&_pre_code]:text-zinc-300 prose-pre:border prose-pre:border-zinc-800 ' +
   'prose-blockquote:border-zinc-700 prose-blockquote:text-zinc-400 ' +
   'prose-hr:border-zinc-800 prose-li:text-zinc-300';
 
diff --git a/app/src/components/RunOutput/EventCard.tsx b/app/src/components/RunOutput/EventCard.tsx
index 9e0ea36..0392753 100644
--- a/app/src/components/RunOutput/EventCard.tsx
+++ b/app/src/components/RunOutput/EventCard.tsx
@@ -188,7 +188,7 @@ function GenerationCard({ event, isSubagent }: { event: LangfuseEvent; isSubagen
               prose-a:text-cyan-400 hover:prose-a:text-cyan-300
               prose-strong:text-zinc-200
               prose-code:text-amber-300 prose-code:bg-zinc-900 prose-code:px-1 prose-code:py-0.5 prose-code:rounded prose-code:text-[0.8em] prose-code:before:content-none prose-code:after:content-none
-              prose-pre:bg-zinc-900 prose-pre:border prose-pre:border-zinc-800
+              prose-pre:bg-zinc-900 prose-pre:text-zinc-300 [&_pre_code]:text-zinc-300 prose-pre:border prose-pre:border-zinc-800
               prose-blockquote:border-zinc-700 prose-blockquote:text-zinc-400
               prose-hr:border-zinc-800
               prose-li:text-zinc-300
diff --git a/app/src/components/RunOutput/StaticOutput.tsx b/app/src/components/RunOutput/StaticOutput.tsx
index b5e7dc5..87f70f9 100644
--- a/app/src/components/RunOutput/StaticOutput.tsx
+++ b/app/src/components/RunOutput/StaticOutput.tsx
@@ -72,7 +72,7 @@ export function StaticOutput({
                 prose-a:text-cyan-400 hover:prose-a:text-cyan-300
                 prose-strong:text-zinc-200
                 prose-code:text-amber-300 prose-code:bg-zinc-900 prose-code:px-1 prose-code:py-0.5 prose-code:rounded prose-code:text-[0.8em] prose-code:before:content-none prose-code:after:content-none
-                prose-pre:bg-zinc-900 prose-pre:border prose-pre:border-zinc-800
+                prose-pre:bg-zinc-900 prose-pre:text-zinc-300 [&_pre_code]:text-zinc-300 prose-pre:border prose-pre:border-zinc-800
                 prose-blockquote:border-zinc-700 prose-blockquote:text-zinc-400
                 prose-hr:border-zinc-800
                 prose-li:text-zinc-300