feat: add text size setting (S / M / L / XL)

apps/webclaw/src/components/prompt-kit/code-block/index.tsx

@@ -35,7 +35,7 @@ import langTypescript from '@shikijs/langs/typescript'
 import langTsx from '@shikijs/langs/tsx'
 import langXml from '@shikijs/langs/xml'
 import langYaml from '@shikijs/langs/yaml'
-import { useResolvedTheme } from '@/hooks/use-chat-settings'
+import { useResolvedTheme, useChatSettingsStore, TEXT_SIZE_CLASSES } from '@/hooks/use-chat-settings'
 import { cn } from '@/lib/utils'
 import { Button } from '@/components/ui/button'
 import { formatLanguageName, normalizeLanguage, resolveLanguage } from './utils'
@@ -97,6 +97,8 @@ export function CodeBlock({
   className,
 }: CodeBlockProps) {
   const resolvedTheme = useResolvedTheme()
+  const textSize = useChatSettingsStore((s) => s.settings.textSize)
+  const codeSizeClass = TEXT_SIZE_CLASSES[textSize]
   const [copied, setCopied] = useState(false)
   const [html, setHtml] = useState<string | null>(null)
   const [resolvedLanguage, setResolvedLanguage] = useState('text')
@@ -179,7 +181,8 @@ export function CodeBlock({
       {html ? (
         <div
           className={cn(
-            'text-sm text-primary-900 [&>pre]:overflow-x-auto',
+            codeSizeClass,
+            'text-primary-900 [&>pre]:overflow-x-auto',
             isSingleLine
               ? '[&>pre]:whitespace-pre [&>pre]:px-3 [&>pre]:py-2'
               : '[&>pre]:px-3 [&>pre]:py-3',
@@ -189,7 +192,7 @@ export function CodeBlock({
       ) : (
         <pre
           className={cn(
-            'text-sm',
+            codeSizeClass,
             isSingleLine ? 'whitespace-pre px-3 py-2' : 'px-3 py-3',
           )}
         >

apps/webclaw/src/hooks/use-chat-settings.ts

@@ -3,11 +3,20 @@ import { create } from 'zustand'
 import { persist } from 'zustand/middleware'
 
 export type ThemeMode = 'system' | 'light' | 'dark'
+export type TextSize = 'sm' | 'md' | 'lg' | 'xl'
+
+export const TEXT_SIZE_CLASSES: Record<TextSize, string> = {
+  sm: 'text-sm',
+  md: 'text-base',
+  lg: 'text-lg',
+  xl: 'text-xl',
+}
 
 export type ChatSettings = {
   showToolMessages: boolean
   showReasoningBlocks: boolean
   theme: ThemeMode
+  textSize: TextSize
 }
 
 type ChatSettingsState = {
@@ -22,6 +31,7 @@ export const useChatSettingsStore = create<ChatSettingsState>()(
         showToolMessages: true,
         showReasoningBlocks: true,
         theme: 'system',
+        textSize: 'md',
       },
       updateSettings: (updates) =>
         set((state) => ({

apps/webclaw/src/screens/chat/components/message-item.tsx

@@ -10,7 +10,7 @@ import type { ToolPart } from '@/components/prompt-kit/tool'
 import { Message, MessageContent } from '@/components/prompt-kit/message'
 import { Thinking } from '@/components/prompt-kit/thinking'
 import { Tool } from '@/components/prompt-kit/tool'
-import { useChatSettings } from '@/hooks/use-chat-settings'
+import { useChatSettings, TEXT_SIZE_CLASSES } from '@/hooks/use-chat-settings'
 import { cn } from '@/lib/utils'
 
 type MessageItemProps = {
@@ -176,6 +176,7 @@ function MessageItemComponent({
   const images = imagesFromMessage(message)
   const isUser = role === 'user'
   const timestamp = getMessageTimestamp(message)
+  const textSizeClass = TEXT_SIZE_CLASSES[settings.textSize]
 
   // Get tool calls from this message (for assistant messages)
   const toolCalls = role === 'assistant' ? getToolCallsFromMessage(message) : []
@@ -221,6 +222,7 @@ function MessageItemComponent({
           markdown={!isUser}
           className={cn(
             'text-primary-900',
+            textSizeClass,
             !isUser
               ? 'bg-transparent w-full'
               : 'bg-primary-100 px-4 py-2.5 max-w-[85%]',

apps/webclaw/src/screens/chat/components/settings-dialog.tsx

@@ -16,7 +16,7 @@ import {
 import { Switch } from '@/components/ui/switch'
 import { Tabs, TabsList, TabsTab } from '@/components/ui/tabs'
 import { useChatSettings } from '@/hooks/use-chat-settings'
-import type { ThemeMode } from '@/hooks/use-chat-settings'
+import type { ThemeMode, TextSize } from '@/hooks/use-chat-settings'
 import { Button } from '@/components/ui/button'
 
 type SettingsSectionProps = {
@@ -75,6 +75,12 @@ export function SettingsDialog({
     { value: 'light', label: 'Light', icon: Sun01Icon },
     { value: 'dark', label: 'Dark', icon: Moon01Icon },
   ] as const
+  const textSizeOptions = [
+    { value: 'sm', label: 'S' },
+    { value: 'md', label: 'M' },
+    { value: 'lg', label: 'L' },
+    { value: 'xl', label: 'XL' },
+  ] as const
   function applyTheme(theme: ThemeMode) {
     if (typeof document === 'undefined') return
     const root = document.documentElement
@@ -151,6 +157,25 @@ export function SettingsDialog({
                 </TabsList>
               </Tabs>
             </SettingsRow>
+            <SettingsRow label="Text size">
+              <Tabs
+                value={settings.textSize}
+                onValueChange={(value) => {
+                  updateSettings({ textSize: value as TextSize })
+                }}
+              >
+                <TabsList
+                  variant="default"
+                  className="gap-2 *:data-[slot=tab-indicator]:duration-0"
+                >
+                  {textSizeOptions.map((option) => (
+                    <TabsTab key={option.value} value={option.value}>
+                      <span>{option.label}</span>
+                    </TabsTab>
+                  ))}
+                </TabsList>
+              </Tabs>
+            </SettingsRow>
           </SettingsSection>
 
           <SettingsSection title="Chat">