fix(stage-tamagotchi): inconsistency font size & shiki dark theme (#692)

apps/stage-tamagotchi/src/renderer/components/ChatHistory.vue

@@ -98,6 +98,7 @@ onTokenLiteral(async () => {
               <MarkdownRenderer
                 v-else
                 :content="slice.text"
+                text="base <sm:xs"
               />
             </div>
           </div>
@@ -136,7 +137,7 @@ onTokenLiteral(async () => {
           <!-- Prefer presentation slices if available; fallback to normal streaming -->
           <template v-if="presentSlices.length > 0">
             <div v-for="(text, idx) in presentSlices" :key="`present-${idx}`">
-              <MarkdownRenderer :content="text" />
+              <MarkdownRenderer :content="text" text="base <sm:xs" />
             </div>
           </template>
           <template v-else>
@@ -147,7 +148,7 @@ onTokenLiteral(async () => {
                 </div>
               </div>
               <div v-else-if="slice.type === 'tool-call-result'" />
-              <MarkdownRenderer v-else :content="slice.text" />
+              <MarkdownRenderer v-else :content="slice.text" text="base <sm:xs" />
             </div>
           </template>
         </div>

packages/stage-ui/src/components/markdown/MarkdownRenderer.vue

@@ -88,4 +88,18 @@ onMounted(() => {
   background: #161b22;
   border: 1px solid #30363d;
 }
+
+/* Force Shiki multi-theme output to follow our dark mode */
+.dark .markdown-content :deep(.shiki) {
+  background: var(--shiki-dark-bg, #0d1117) !important;
+  color: var(--shiki-dark, #e6edf3) !important;
+}
+
+.dark .markdown-content :deep(.shiki span[style*="--shiki-dark"]) {
+  color: var(--shiki-dark, inherit) !important;
+}
+
+.dark .markdown-content :deep(.shiki span[style*="--shiki-dark-background"]) {
+  background-color: var(--shiki-dark-background, var(--shiki-dark-bg, transparent)) !important;
+}
 </style>