From 27e522cc8d3ca949b9f6dfc0fa6e87028f97844b Mon Sep 17 00:00:00 2001
From: tinkle <tinkle@tinkle.community>
Date: Wed, 29 Oct 2025 23:59:11 +0800
Subject: [PATCH] Fix: Add input_prompt display in decision cards
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Previously, the frontend DecisionRecord type was missing the input_prompt
field that exists in the backend DecisionLog, causing the input context
sent to AI to not be displayed in the UI.

Changes:
- Add input_prompt field to DecisionRecord interface in both type files
- Add collapsible Input Prompt section in DecisionCard component
- Display input_prompt before AI Chain of Thought with blue styling
- Use same expand/collapse interaction pattern as CoT trace

Now users can view both the input context and AI's reasoning process
in the decision cards.

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude <noreply@anthropic.com>
---
 web/src/App.tsx        | 20 ++++++++++++++++++++
 web/src/types.ts       |  1 +
 web/src/types/index.ts |  1 +
 3 files changed, 22 insertions(+)

diff --git a/web/src/App.tsx b/web/src/App.tsx
index 70761155..8e4d412b 100644
--- a/web/src/App.tsx
+++ b/web/src/App.tsx
@@ -558,6 +558,7 @@ function StatCard({
 
 // Decision Card Component with CoT Trace - Binance Style
 function DecisionCard({ decision, language }: { decision: DecisionRecord; language: Language }) {
+  const [showInputPrompt, setShowInputPrompt] = useState(false);
   const [showCoT, setShowCoT] = useState(false);
 
   return (
@@ -581,6 +582,25 @@ function DecisionCard({ decision, language }: { decision: DecisionRecord; langua
         </div>
       </div>
 
+      {/* Input Prompt - Collapsible */}
+      {decision.input_prompt && (
+        <div className="mb-3">
+          <button
+            onClick={() => setShowInputPrompt(!showInputPrompt)}
+            className="flex items-center gap-2 text-sm transition-colors"
+            style={{ color: '#60a5fa' }}
+          >
+            <span className="font-semibold">📥 {t('inputPrompt', language)}</span>
+            <span className="text-xs">{showInputPrompt ? t('collapse', language) : t('expand', language)}</span>
+          </button>
+          {showInputPrompt && (
+            <div className="mt-2 rounded p-4 text-sm font-mono whitespace-pre-wrap max-h-96 overflow-y-auto" style={{ background: '#0B0E11', border: '1px solid #2B3139', color: '#EAECEF' }}>
+              {decision.input_prompt}
+            </div>
+          )}
+        </div>
+      )}
+
       {/* AI Chain of Thought - Collapsible */}
       {decision.cot_trace && (
         <div className="mb-3">
diff --git a/web/src/types.ts b/web/src/types.ts
index c61eca80..fbc224bc 100644
--- a/web/src/types.ts
+++ b/web/src/types.ts
@@ -64,6 +64,7 @@ export interface AccountSnapshot {
 export interface DecisionRecord {
   timestamp: string;
   cycle_number: number;
+  input_prompt: string;
   cot_trace: string;
   decision_json: string;
   account_state: AccountSnapshot;
diff --git a/web/src/types/index.ts b/web/src/types/index.ts
index 94e59e9f..6e648e2f 100644
--- a/web/src/types/index.ts
+++ b/web/src/types/index.ts
@@ -56,6 +56,7 @@ export interface DecisionAction {
 export interface DecisionRecord {
   timestamp: string;
   cycle_number: number;
+  input_prompt: string;
   cot_trace: string;
   decision_json: string;
   account_state: {