add Ko-fi bean

frontend/src/pages/RunEncounters.tsx

@@ -24,6 +24,7 @@ import {
 } from '../components'
 import { BossDefeatModal } from '../components/BossDefeatModal'
 import { ConditionBadge } from '../components/ConditionBadge'
+import { JournalSection } from '../components/journal'
 import type {
   Route,
   RouteWithChildren,
@@ -497,6 +498,7 @@ export function RunEncounters() {
   const [showTeam, setShowTeam] = useState(true)
   const [teamSort, setTeamSort] = useState<TeamSortKey>('route')
   const [filter, setFilter] = useState<'all' | RouteStatus>('all')
+  const [activeTab, setActiveTab] = useState<'encounters' | 'journal'>('encounters')
 
   const storageKey = `expandedGroups-${runId}`
   const [expandedGroups, setExpandedGroups] = useState<Set<number>>(() => {
@@ -1137,7 +1139,41 @@ export function RunEncounters() {
         <CustomRulesDisplay customRules={run.rules?.customRules ?? ''} />
       </div>
 
-      {/* Team Section */}
+      {/* Tab Navigation */}
+      <div className="flex gap-1 mb-6 border-b border-border">
+        <button
+          type="button"
+          onClick={() => setActiveTab('encounters')}
+          className={`px-4 py-2 text-sm font-medium border-b-2 -mb-px transition-colors ${
+            activeTab === 'encounters'
+              ? 'border-blue-500 text-blue-500'
+              : 'border-transparent text-text-secondary hover:text-text-primary'
+          }`}
+        >
+          Encounters
+        </button>
+        <button
+          type="button"
+          onClick={() => setActiveTab('journal')}
+          className={`px-4 py-2 text-sm font-medium border-b-2 -mb-px transition-colors ${
+            activeTab === 'journal'
+              ? 'border-blue-500 text-blue-500'
+              : 'border-transparent text-text-secondary hover:text-text-primary'
+          }`}
+        >
+          Journal
+        </button>
+      </div>
+
+      {/* Journal Tab */}
+      {activeTab === 'journal' && (
+        <JournalSection runId={runIdNum} bossResults={bossResults} bosses={bosses} />
+      )}
+
+      {/* Encounters Tab */}
+      {activeTab === 'encounters' && (
+        <>
+          {/* Team Section */}
       {(alive.length > 0 || dead.length > 0) && (
         <div className="mb-6">
           <div className="flex items-center justify-between mb-3">
@@ -1551,6 +1587,8 @@ export function RunEncounters() {
           allowedTypes={rulesAllowedTypes.length ? rulesAllowedTypes : undefined}
         />
       )}
+        </>
+      )}
 
       {/* Shiny Encounter Modal */}
       {showShinyModal && routes && (