refactor: streamline CSS styles and enhance agent panel message handling

- Removed unnecessary light-mode overrides for .prose-chat, simplifying the CSS by relying on theme variables.
- Updated the AgentPanel component to build outbound messages with additional context, improving clarity in chat interactions.
- Refined layout styles in ChatHome for better responsiveness and user experience.

Author: BunsDev

app/globals.css

@@ -946,24 +946,7 @@
   --color-ai-hover-bg: rgba(0, 0, 0, 0.04);
 }
 
-/* Light-mode overrides for hardcoded dark values */
-[data-theme='obsidian']:not(.dark) .prose-chat code,
-[data-theme='bone']:not(.dark) .prose-chat code,
-[data-theme='neon']:not(.dark) .prose-chat code,
-[data-theme='catppuccin-mocha']:not(.dark) .prose-chat code,
-[data-theme='voodoo']:not(.dark) .prose-chat code,
-[data-theme='cybernord']:not(.dark) .prose-chat code,
-[data-theme='prettypink']:not(.dark) .prose-chat code {
-  background: rgba(0, 0, 0, 0.04);
-  border-color: var(--border);
-}
-[data-theme='obsidian']:not(.dark) .prose-chat th,
-[data-theme='bone']:not(.dark) .prose-chat th,
-[data-theme='neon']:not(.dark) .prose-chat th,
-[data-theme='catppuccin-mocha']:not(.dark) .prose-chat th,
-[data-theme='prettypink']:not(.dark) .prose-chat th {
-  background: rgba(0, 0, 0, 0.03);
-}
+/* Light-mode .prose-chat overrides no longer needed — base rules use theme vars */
 
 /* ──────────────────────────────────────────────────────────────────
    Base
@@ -2563,7 +2546,8 @@ p {
   text-decoration: none;
   font-weight: 500;
   color: var(--text-primary);
-  background: var(--bg-subtle);
+  background: var(--bg);
+  border: 1px solid var(--border);
   padding: 0.05em 0.35em;
   border-radius: 4px;
   transition:
@@ -2608,8 +2592,9 @@ p {
   font-size: 0.9em;
   padding: 0.15em 0.35em;
   border-radius: 4px;
-  background: var(--bg-subtle);
-  color: var(--text-secondary);
+  background: var(--bg);
+  border: 1px solid var(--border);
+  color: var(--text-primary);
 }
 
 .md-preview pre {
@@ -2632,6 +2617,7 @@ p {
   margin: 0.75em 0;
   padding: 0.5em 1em;
   border-left: 3px solid var(--border);
+  background: var(--bg);
   color: var(--text-secondary);
 }
 
@@ -2660,7 +2646,7 @@ p {
 }
 .md-preview th {
   font-weight: 600;
-  background: var(--bg-subtle);
+  background: var(--bg);
 }
 
 /* ──────────────────────────────────────────────────────────────────
@@ -2767,14 +2753,16 @@ p {
   font-size: 11px;
   padding: 1px 5px;
   border-radius: 4px;
-  background: rgba(255, 255, 255, 0.06);
+  color: var(--text-primary);
+  background: var(--bg);
   border: 1px solid var(--border);
 }
 .prose-chat pre {
   margin: 0.5em 0;
   padding: 8px 10px;
   border-radius: 6px;
-  background: var(--bg-subtle);
+  color: var(--text-primary);
+  background: var(--bg);
   border: 1px solid var(--border);
   overflow-x: auto;
   font-size: 11px;
@@ -2838,12 +2826,14 @@ p {
 }
 .prose-chat th {
   font-weight: 600;
-  background: rgba(255, 255, 255, 0.04);
+  color: var(--text-primary);
+  background: var(--bg);
 }
 .prose-chat blockquote {
   border-left: 2px solid var(--border);
   padding-left: 10px;
   margin: 0.4em 0;
+  background: var(--bg);
   color: var(--text-secondary);
 }
 
@@ -2881,6 +2871,11 @@ p {
   color: var(--text-primary);
 }
 
+/* Terminal markdown should remain readable on tinted RPC/chat cards */
+.terminal-md {
+  color: var(--text-primary);
+}
+
 /* ─── Merge Editor: Keyframes ──────────────────────────────────────────── */
 
 @keyframes conflict-pulse {

components/agent-panel.tsx

@@ -155,6 +155,12 @@ function AgentConnectPrompt() {
   )
 }
 
+function buildGatewayMessage(message: string, context?: string): string {
+  const trimmedContext = context?.trim()
+  if (!trimmedContext) return message
+  return `${message}\n\n[Additional Context]\n${trimmedContext}`
+}
+
 export function AgentPanel() {
   const { sendRequest, onEvent, status } = useGateway()
   const { files, activeFile, getFile, openFile, updateFileContent } = useEditor()
@@ -1032,7 +1038,7 @@ export function AgentPanel() {
           : agentMode === 'plan'
             ? '[Mode: Plan — outline a step-by-step plan before making changes. Present the plan to the user for approval before executing.]\n'
             : '[Mode: Agent — make direct code changes and edits autonomously.]\n'
-      // Build silent context (not shown in chat, passed separately to gateway)
+      // Build silent context (not shown in chat UI, embedded in outbound gateway message)
       const silentContext = [modePrefix, context || '', attachCtx].filter(Boolean).join('\n\n')
       setContextAttachments([])
       setImageAttachments([])
@@ -1046,10 +1052,10 @@ export function AgentPanel() {
         promptChars: text.length,
         contextChars: silentContext.length,
       })
+      const outboundMessage = buildGatewayMessage(text, silentContext)
       const resp = (await sendRequest('chat.send', {
         sessionKey,
-        message: text,
-        context: silentContext,
+        message: outboundMessage,
         idempotencyKey: idemKey,
       })) as Record<string, unknown> | undefined
 
@@ -1197,8 +1203,7 @@ export function AgentPanel() {
 
       sendRequest('chat.send', {
         sessionKey,
-        message: prompt,
-        context: context || undefined,
+        message: buildGatewayMessage(prompt, context),
         idempotencyKey: idemKey,
       })
         .then((resp) => {

components/chat-home.tsx

@@ -292,8 +292,8 @@ export const ChatHome = memo(function ChatHome({ onSend, onSelectFolder, onClone
   }, [hasWorkspace, openFiles, local.localTree])
 
   return (
-    <div className="flex-1 flex flex-col items-center justify-start px-4 sm:px-6 pt-8 sm:pt-10 pb-8 overflow-y-auto">
-      <div className="w-full max-w-[700px]">
+    <div className="flex-1 overflow-y-auto px-4 sm:px-6 py-8 sm:py-10">
+      <div className="min-h-full w-full max-w-[700px] mx-auto flex flex-col justify-center">
         {/* Logo + Heading */}
         <div className="flex flex-col items-center mb-5">
           <div