[verified] Dashboard polish: per-symbol detail modal + theme column + uniform kickers — 7-point review

- F1/F2: table full-width; 'รวม' -> 'คะแนนรวม (60/40)' sortable w/ tooltip
- F3: removed 05/บันทึกการวิเคราะห์ (redundant w/ theme panel)
- F4: uniform section-kickers (stripped 07/ 05/)
- F5: theme cards show long-form Thai narrative (auto: ยอดขายรถ+NPL tศัพท; energy/tourism)
- F6: stock table has ธีม column (chips per symbol's themes)
- F7: click row -> per-symbol modal showing themes + fundamentals + transparent combined derivation (theme_score×0.6 + siamchart×0.4)
- Verified: browser modal for AOT shows 0.57×0.6 + -0.59×0.4 = 0.11

frontend/src/App.vue

@@ -8,6 +8,9 @@ const factorData = ref(null)
 const themeData = ref(null)
 const dashData = ref(null)
 const simCapital = ref(1000000)
+const selectedSymbol = ref(null)
+const symbolDetail = ref(null)
+const symbolLoading = ref(false)
 const simMode = ref('backtest')
 const simLoading = ref(false)
 const simResult = ref(null)
@@ -55,6 +58,22 @@ const signalSummary = computed(() => {
   return { long: s?.long ?? 0, short: s?.short ?? 0, neutral: s?.neutral ?? 0, total: s?.total ?? 0 }
 })
 const freqLabel = (f) => ({ monthly: 'รายเดือน', quarterly: 'รายไตรมาส', annual: 'รายปี', daily: 'รายวัน' })[f] || f
+// theme id -> Thai label (for the theme column)
+const themeLabelById = {
+  tourism: 'ท่องเที่ยว', auto_credit: 'รถยนต์/สินเชื่อ', refining_energy: 'พลังงาน',
+}
+// which themes a symbol belongs to (id + th label)
+function symbolThemes(symbol) {
+  const out = []
+  for (const t of dashboardThemes.value) {
+    if ((t.id === 'tourism' && ['AOT','CENTEL','MINT','AWC','ERW','CPN','CRC','BEM','BTS','SNNP','MAJOR','DHOUSE'].includes(symbol)) ||
+        (t.id === 'auto_credit' && ['KKP','TISCO','TCAP','THANI','MTC','SAWAD','NSI','GLAND','THG','ASI','TGPRO','AEONTS','TK'].includes(symbol)) ||
+        (t.id === 'refining_energy' && ['PTT','PTTGC','TOP','IRPC','SPRC','BCP','ESSO','BANPU','GPSC'].includes(symbol))) {
+      out.push(themeLabelById[t.id])
+    }
+  }
+  return out
+}
 const factorAvailable = computed(() => factorData.value?.available ?? false)
 const dividendCount = computed(() => factorData.value?.dividend_count ?? 0)
 const signalScoreCount = computed(() => factorRows.value.filter((f) => f.signal_side === 'LONG' || f.signal_side === 'SHORT').length)
@@ -276,6 +295,23 @@ function chooseSignal(signal) {
   notice.value = ''
 }
 
+async function openSymbolDetail(symbol) {
+  selectedSymbol.value = symbol
+  symbolDetail.value = null
+  symbolLoading.value = true
+  try {
+    symbolDetail.value = await fetchJson(`/api/v1/symbols/${symbol}`)
+  } catch (caught) {
+    symbolDetail.value = { error: caught.message, symbol }
+  } finally {
+    symbolLoading.value = false
+  }
+}
+function closeSymbolDetail() {
+  selectedSymbol.value = null
+  symbolDetail.value = null
+}
+
 async function unlockPaper() {
   if (!paperToken.value) {
     notice.value = 'Enter the paper-session token to unlock paper recording.'
@@ -411,7 +447,7 @@ onMounted(loadDashboard)
         <section class="panel theme-panel" id="themes">
           <div class="panel-header signal-header">
             <div>
-              <div class="section-kicker">Alternative factors · ข้อมูลไทย</div>
+              <div class="section-kicker">ธีม</div>
               <h2>ธีม (Themes)</h2>
               <p class="panel-subtitle">ภาพรวม alternative factors ของไทย — แต่ละธีมมีความถี่ข้อมูลต่างกัน (monthly / quarterly) ดังนั้นอย่าเทียบเป็นจุดเวลาเดียวกัน.</p>
             </div>
@@ -433,12 +469,12 @@ onMounted(loadDashboard)
                 <div v-else-if="theme.id === 'refining_energy' && (theme.read.quarterly || theme.read.net_profit)" class="theme-read-value">กำไรสุทธิ TOP (รายไตรมาส)</div>
                 <div v-else-if="theme.id === 'tourism'" class="theme-read-value">signal tourism {{ theme.surprise != null ? formatNumber(theme.surprise,2) : '—' }}σ</div>
               </div>
-              <div v-if="theme.thesis" class="theme-thesis">{{ theme.thesis }}</div>
+              <div v-if="theme.narrative" class="theme-narrative">{{ theme.narrative }}</div>
             </article>
           </div>
 
           <div v-if="Object.keys(dashboardMacro).length" class="macro-panel">
-            <div class="section-kicker">ภาพรวมประเทศไทย (macro)</div>
+            <div class="section-kicker">ภาพรวมประเทศไทย</div>
             <div class="macro-chips">
               <span class="macro-chip">การบริโภคภาคเอกชน <strong>{{ dashboardMacro.private_consumption_yoy }}%</strong></span>
               <span class="macro-chip">การลงทุนเอกชน <strong>{{ dashboardMacro.private_investment_yoy }}%</strong></span>
@@ -452,7 +488,7 @@ onMounted(loadDashboard)
         <section class="panel stock-panel" id="stocks">
           <div class="panel-header signal-header">
             <div>
-              <div class="section-kicker">Alternative factors × SET50</div>
+              <div class="section-kicker">ตารางหุ้น</div>
               <h2>ตารางหุ้น</h2>
               <p class="panel-subtitle">ตารางเดียวรวมทุกธีม — สัญญาณ + คะแนนรวม (60% ธีม / 40% พื้นฐาน) + มูลค่าพื้นฐานจาก Siamchart. เรียงได้โดยคลิกหัวตาราง; เปิด <em>เฉพาะหุ้นปันผล</em> เพื่อกรองหุ้นที่จ่ายปันผล.</p>
             </div>
@@ -470,8 +506,9 @@ onMounted(loadDashboard)
               <thead>
                 <tr>
                   <th class="sortable" :class="{ active: sortKey === 'signal_score' }" @click="setSort('signal_score')">สัญญาณ {{ sortIndicator('signal_score') }}</th>
-                  <th class="sortable" :class="{ active: sortKey === 'combined' }" @click="setSort('combined')">รวม {{ sortIndicator('combined') }}</th>
+                  <th class="sortable" :class="{ active: sortKey === 'combined' }" @click="setSort('combined')" title="60% ธีม + 40% พื้นฐาน">คะแนนรวม (60/40) {{ sortIndicator('combined') }}</th>
                   <th class="sortable" :class="{ active: sortKey === 'symbol' }" @click="setSort('symbol')">หุ้น {{ sortIndicator('symbol') }}</th>
+                  <th>ธีม</th>
                   <th class="sortable" :class="{ active: sortKey === 'pe' }" @click="setSort('pe')">P/E {{ sortIndicator('pe') }}</th>
                   <th class="sortable" :class="{ active: sortKey === 'eps' }" @click="setSort('eps')">EPS {{ sortIndicator('eps') }}</th>
                   <th class="sortable" :class="{ active: sortKey === 'eps_growth_yoy' }" @click="setSort('eps_growth_yoy')">EPS YoY {{ sortIndicator('eps_growth_yoy') }}</th>
@@ -481,10 +518,14 @@ onMounted(loadDashboard)
                 </tr>
               </thead>
               <tbody>
-                <tr v-for="factor in sortedFactorRows" :key="factor.symbol">
+                <tr v-for="factor in sortedFactorRows" :key="factor.symbol" class="clickable-row" @click="openSymbolDetail(factor.symbol)">
                   <td><span v-if="factor.signal_side" class="side-pill" :class="factor.signal_side.toLowerCase()">{{ factor.signal_side }}</span><span v-else class="muted-cell">—</span></td>
                   <td class="combined-cell">{{ boardBySymbol[factor.symbol]?.combined != null ? formatNumber(boardBySymbol[factor.symbol].combined) : '—' }}</td>
                   <td><strong class="symbol-name">{{ factor.symbol }}</strong></td>
+                  <td>
+                    <span v-for="th in symbolThemes(factor.symbol)" :key="th" class="theme-tag">{{ th }}</span>
+                    <span v-if="!symbolThemes(factor.symbol).length" class="muted-cell">—</span>
+                  </td>
                   <td class="score-cell">{{ factor.pe != null ? formatNumber(factor.pe) : '—' }}</td>
                   <td>{{ factor.eps != null ? formatNumber(factor.eps) : '—' }}</td>
                   <td :class="factor.eps_growth_yoy >= 0 ? 'positive-text' : 'negative-text'">{{ factor.eps_growth_yoy != null ? (factor.eps_growth_yoy >= 0 ? '+' : '') + formatNumber(factor.eps_growth_yoy) + '%' : '—' }}</td>
@@ -529,7 +570,7 @@ onMounted(loadDashboard)
         <section class="panel sim-panel" id="simulation">
           <div class="panel-header signal-header">
             <div>
-              <div class="section-kicker">07 / การจำลองการลงทุน</div>
+              <div class="section-kicker">การจำลองการลงทุน</div>
               <h2>จัดสรรทุน (Simulation)</h2>
               <p class="panel-subtitle">กรอกทุน และระบบจัดสรรตามสัดส่วน 50 / 20 / 30 — หุ้นที่ทำกำไรได้มากสุดแล้วจ่ายปันผล, หุ้นทำกำไรแต่ไม่ปันผล, และหุ้นปันผลสูงสุด (ไม่ซ้ำ) — ขั้นต่ำ 100 หุ้นต่อตัว.</p>
             </div>
@@ -595,21 +636,61 @@ onMounted(loadDashboard)
           <div v-if="!simResult" class="empty-research">กด 'คำนวณการจัดสรร' เพื่อดูว่า 50/20/30 จัดสรรทุนของคุณไปที่หุ้นไหนบ้าง</div>
         </section>
 
-        <section class="bottom-grid">
+        <!-- 05 / บันทึกการวิเคราะห์ removed per user (redundant with theme-panel narratives) -->
-          <article class="panel thesis-panel">
-            <div class="section-kicker">05 / บันทึกการวิเคราะห์</div>
-            <h2>อ่านสัญญาณเป็นสมมติฐาน (3 ธีม).</h2>
-            <div class="thesis-list">
-              <div v-for="t in dashboardThemes" :key="t.id" class="thesis-row">
-                <strong class="thesis-theme">{{ t.label_th }}</strong>
-                <span class="thesis-text">{{ t.thesis || '—' }}</span>
-                <span class="thesis-surprise">{{ t.surprise != null ? formatNumber(t.surprise,2) + 'σ' : '—' }}</span>
-              </div>
-            </div>
-            <div class="thesis-rule"><span></span>ความต่าง (surprise) × การเข้าถึงธีม × ความเชื่อมั่น</div>
-          </article>
-        </section>
       </template>
     </main>
+
+    <!-- Per-symbol analysis detail modal -->
+    <div v-if="selectedSymbol" class="modal-overlay" @click.self="closeSymbolDetail">
+      <div class="modal-card">
+        <div class="modal-head">
+          <div>
+            <div class="modal-kicker">การวิเคราะห์รายหุ้น</div>
+            <h3>{{ selectedSymbol }}</h3>
+          </div>
+          <button class="modal-close" @click="closeSymbolDetail">✕</button>
+        </div>
+        <div v-if="symbolLoading" class="empty-research">กำลังโหลดการวิเคราะห์…</div>
+        <div v-else-if="symbolDetail?.error" class="state-card error-state">{{ symbolDetail.error }}</div>
+        <div v-else-if="symbolDetail" class="modal-body">
+          <div class="modal-section">
+            <div class="modal-section-title">ธีมที่เกี่ยวข้อง</div>
+            <div v-if="symbolDetail.themes?.length" class="modal-themes">
+              <span v-for="t in symbolDetail.themes" :key="t" class="theme-tag large">{{ themeLabelById[t] || t }}</span>
+              <span class="modal-sub">surprise ต่อธีม</span>
+              <div v-for="c in symbolDetail.theme_contributions" :key="c.theme" class="contrib-line">
+                <span>{{ themeLabelById[c.theme] || c.theme }}</span>
+                <strong>{{ formatNumber(c.surprise) }}σ</strong>
+              </div>
+            </div>
+            <div v-else class="muted-cell">ไม่มีธีมที่ชัดเจน (หุ้นนอกแผนที่ธีม)</div>
+          </div>
+
+          <div class="modal-section">
+            <div class="modal-section-title">มูลค่าพื้นฐาน (Siamchart)</div>
+            <div class="fund-grid">
+              <span>P/E <strong>{{ symbolDetail.fundamentals?.pe ?? '—' }}</strong></span>
+              <span>EPS <strong>{{ symbolDetail.fundamentals?.eps ?? '—' }}</strong></span>
+              <span>P/BV <strong>{{ symbolDetail.fundamentals?.pbv ?? '—' }}</strong></span>
+              <span>ROE <strong>{{ symbolDetail.fundamentals?.roe ?? '—' }}</strong></span>
+              <span>ปันผล <strong>{{ symbolDetail.fundamentals?.is_dividend ? 'จ่าย' : '—' }}</strong></span>
+            </div>
+            <div class="modal-sub">ภาพรวม: {{ symbolDetail.company_name || selectedSymbol }}</div>
+          </div>
+
+          <div class="modal-section">
+            <div class="modal-section-title">ที่มาของคะแนนรวม (โปร่งใส)</div>
+            <table class="score-table">
+              <tbody>
+                <tr><td>คะแนนธีม (ธีม {{ symbolDetail.themes?.length || 0 }} ธีม)</td><td>{{ formatNumber(symbolDetail.theme_score) }}</td><td>× {{ symbolDetail.weights?.theme }}</td></tr>
+                <tr><td>คะแนนพื้นฐาน (EPS + yield)</td><td>{{ formatNumber(symbolDetail.siamchart_score) }}</td><td>× {{ symbolDetail.weights?.siamchart }}</td></tr>
+                <tr class="score-total"><td>คะแนนรวม = 60%×ธีม + 40%×พื้นฐาน</td><td>{{ formatNumber(symbolDetail.combined_score) }}</td><td></td></tr>
+              </tbody>
+            </table>
+            <div class="modal-sub">ราคาล่าสุด: {{ symbolDetail.price?.latest != null ? formatNumber(symbolDetail.price.latest) : '—' }} ({{ symbolDetail.price?.date || '—' }})</div>
+          </div>
+        </div>
+      </div>
+    </div>
   </div>
 </template>

frontend/src/style.css

@@ -144,6 +144,34 @@ tbody tr:hover { background: rgba(255,255,255,.025); }
 .source-name { color: var(--accent); }
 .combined-cell { color: var(--mint); font-weight: 600; font-family: 'DM Mono', monospace; }
 
+/* theme tag chips */
+.theme-tag { display: inline-block; margin: 2px 3px 2px 0; padding: 2px 6px; border-radius: 4px; background: rgba(63,161,255,.12); color: var(--accent); font-size: 10px; }
+.theme-tag.large { font-size: 12px; padding: 4px 8px; }
+.clickable-row { cursor: pointer; transition: background .15s ease; }
+.clickable-row:hover { background: rgba(63,161,255,.06); }
+
+/* theme narrative (long-form) */
+.theme-narrative { font-size: 12px; line-height: 1.6; color: var(--text-2, #9aa); border-top: 1px dashed var(--line-bright); padding-top: 8px; margin-top: 8px; }
+
+/* per-symbol detail modal */
+.modal-overlay { position: fixed; inset: 0; background: rgba(0,0,0,.6); display: flex; align-items: flex-start; justify-content: center; padding: 40px 16px; z-index: 50; overflow: auto; }
+.modal-card { background: var(--card, #0e1218); border: 1px solid var(--line-bright); border-radius: 12px; max-width: 640px; width: 100%; padding: 20px; }
+.modal-head { display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: 14px; }
+.modal-kicker { font: 700 10px 'DM Mono', monospace; color: var(--faint); letter-spacing: .08em; text-transform: uppercase; }
+.modal-head h3 { font-size: 24px; margin: 4px 0 0; }
+.modal-close { background: none; border: 1px solid var(--line-bright); color: var(--text); width: 30px; height: 30px; border-radius: 6px; cursor: pointer; }
+.modal-body { display: flex; flex-direction: column; gap: 16px; }
+.modal-section { border-top: 1px solid var(--line-weak, rgba(255,255,255,.06)); padding-top: 12px; }
+.modal-section-title { font: 700 11px 'DM Mono', monospace; color: var(--faint); margin-bottom: 8px; }
+.modal-sub { font-size: 11px; color: var(--faint); margin-top: 6px; }
+.contrib-line { display: flex; justify-content: space-between; padding: 3px 0; font-size: 13px; }
+.fund-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; font-size: 12px; }
+.fund-grid span { background: rgba(255,255,255,.03); border-radius: 6px; padding: 6px 8px; }
+.fund-grid strong { color: var(--text); font-family: 'DM Mono', monospace; }
+.score-table { width: 100%; border-collapse: collapse; font-size: 13px; }
+.score-table td { padding: 7px 6px; border-bottom: 1px solid var(--line-weak, rgba(255,255,255,.05)); }
+.score-table tr.score-total td { border-top: 1px solid var(--line-bright); font-weight: 700; color: var(--mint); }
+
 .thesis-list { display: flex; flex-direction: column; gap: 10px; margin: 12px 0; }
 .thesis-row { display: flex; gap: 10px; align-items: baseline; padding-bottom: 8px; border-bottom: 1px solid var(--line-weak, rgba(255,255,255,.05)); }
 .thesis-theme { min-width: 130px; color: var(--accent); }