feat: add TweaksPanel and App controller — platform complete

frontend/src/components/TweaksPanel.tsx

@@ -0,0 +1,57 @@
+import type { Tweaks, ThemeMode, FontSize, FeedbackTweak } from '../types'
+
+interface Props {
+  tweaks: Tweaks
+  update: <K extends keyof Tweaks>(key: K, value: Tweaks[K]) => void
+  onClose: () => void
+}
+
+function Seg({ tkey, options, tweaks, update }: {
+  tkey: keyof Tweaks
+  options: { value: string; label: string }[]
+  tweaks: Tweaks
+  update: Props['update']
+}) {
+  return (
+    <div className="tweak-control">
+      {options.map((opt) => (
+        <button
+          key={opt.value}
+          className={`tweak-seg${tweaks[tkey] === opt.value ? ' active' : ''}`}
+          onClick={() => update(tkey, opt.value as never)}
+        >
+          {opt.label}
+        </button>
+      ))}
+    </div>
+  )
+}
+
+export default function TweaksPanel({ tweaks, update, onClose }: Props) {
+  return (
+    <div className="tweaks-panel">
+      <div className="tweaks-header">
+        <span>Tweaks</span>
+        <button className="btn btn-ghost btn-sm" onClick={onClose} style={{ padding: '2px 6px' }}>×</button>
+      </div>
+      <div className="tweaks-body">
+        <div className="tweak-row">
+          <div className="tweak-label">Theme</div>
+          <Seg tkey="theme" options={[{ value: 'light' as ThemeMode, label: 'Light' }, { value: 'dark' as ThemeMode, label: 'Dark' }]} tweaks={tweaks} update={update} />
+        </div>
+        <div className="tweak-row">
+          <div className="tweak-label">Text size</div>
+          <Seg tkey="fontSize" options={[{ value: 'small' as FontSize, label: 'S' }, { value: 'medium' as FontSize, label: 'M' }, { value: 'large' as FontSize, label: 'L' }]} tweaks={tweaks} update={update} />
+        </div>
+        <div className="tweak-row">
+          <div className="tweak-label">Feedback</div>
+          <Seg tkey="feedbackMode" options={[
+            { value: 'auto' as FeedbackTweak, label: 'Auto' },
+            { value: 'immediate' as FeedbackTweak, label: 'Immediate' },
+            { value: 'end' as FeedbackTweak, label: 'End' },
+          ]} tweaks={tweaks} update={update} />
+        </div>
+      </div>
+    </div>
+  )
+}