@siegesailor/terminal-sigma 1.2.0 → 1.4.0

package/build/app.js

@@ -3,18 +3,20 @@ import zod from "zod";
 import React from "react";
 import { ThemeProvider } from "@inkjs/ui";
 import { Box, Text, useApp, useInput, useStdout, useWindowSize } from "ink";
+import AutocompleteInput from "./components/autocomplete-input.js";
 import Character from "./components/character.js";
 import Choice from "./components/choice.js";
 import EntryForm from "./components/entry-form.js";
 import Footer from "./components/footer.js";
 import LogsView, { LogRow } from "./components/logs-view.js";
-import MenuGrid from "./components/menu-grid.js";
+import MultiChoice from "./components/multi-choice.js";
 import TodayPanel from "./components/today-panel.js";
-import { characterWidth, dietFieldsOf, layoutOf, menuItemsOf, menuOrder, profileFieldsOf, sectionsOf, workoutFieldsOf, } from "./content.js";
+import { categoryOptionsOf, characterWidth, dietFieldsOf, intervalOptionsOf, layoutOf, menuEntriesOf, menuListWidth, menuOrder, petStateOf, profileFieldsOf, quoteOptionsOf, sectionsOf, workoutFieldsOf, } from "./content.js";
 import { adviceOf, targetsOf } from "./health.js";
 import { formatNumber, genders, healthGoals, intensities, languages, messagesOf, workoutActivities, workStyles, } from "./i18n.js";
+import { lookOf } from "./pixel-art.js";
 import { experienceOf, experiencePerMeal, levelOf, logsOf, saveProgress, todayOf, workoutExperience, } from "./progress.js";
-import { fetchQuote, hasQuoteApi, localizedQuote, quoteRefreshMinutes, randomBundledQuote, } from "./quotes.js";
+import { bundledQuotes, defaultQuoteSettings, fetchQuote, hasQuoteApi, localizedQuote, pickBundled, quoteCategories, quoteIntervals, } from "./quotes.js";
 import { paletteContext, themeNames, themes, uiThemeOf, } from "./theme.js";
 import { advanceTimer, formatClock, idleTimer, remainingOf, toggleTimer, } from "./timer.js";
 export const optionsSchema = zod.object({
@@ -35,6 +37,29 @@ const languageOptions = languages.map((language) => ({
     value: language,
 }));
 const pick = (options, value, fallback) => options.find((option) => option === value) ?? fallback;
+// Appends an event, so every action lands in the logs with the change it made.
+const withEvent = (progress, action, detail) => ({
+    ...progress,
+    events: [
+        ...progress.events,
+        {
+            at: new Date().toISOString(),
+            action,
+            ...(detail === undefined ? {} : { detail }),
+        },
+    ],
+});
+// Names to suggest for the author and work filters.
+const quoteNames = (field) => [
+    ...new Set(bundledQuotes.flatMap((quote) => field === "author"
+        ? [
+            quote.author,
+            ...Object.values(quote.translations ?? {}).map((text) => text.author),
+        ]
+        : quote.work
+            ? [quote.work]
+            : [])),
+];
 function Titled({ title, children, }) {
     return (React.createElement(paletteContext.Consumer, null, (palette) => (React.createElement(Box, { flexDirection: "column" },
         React.createElement(Text, { bold: true, color: palette.accent }, title),
@@ -51,14 +76,20 @@ export default function App({ options, file, initialProgress }) {
     const [now, setNow] = React.useState(Date.now);
     const durations = React.useMemo(() => ({ focus: options.focus, break: options.break }), [options.focus, options.break]);
     const [timer, setTimer] = React.useState(() => idleTimer(durations));
-    const [quote, setQuote] = React.useState(randomBundledQuote);
+    const quoteSettings = progress.quotes ?? defaultQuoteSettings;
+    const [quote, setQuote] = React.useState(() => pickBundled(quoteSettings, Date.now()));
     const [view, setView] = React.useState("menu");
+    const [focusedMenu, setFocusedMenu] = React.useState("quotes");
+    const [quoteEditor, setQuoteEditor] = React.useState();
+    const [quoteOption, setQuoteOption] = React.useState("draw");
     const [flash, setFlash] = React.useState();
     const [draftActivity, setDraftActivity] = React.useState();
     const language = progress.language ?? "en";
     const messages = messagesOf(language);
     const themeName = progress.theme ?? "ember";
-    const palette = themes[themeName];
+    // While the theme picker is open, the focused theme previews live.
+    const [previewTheme, setPreviewTheme] = React.useState();
+    const palette = themes[previewTheme ?? themeName];
     const uiTheme = React.useMemo(() => uiThemeOf(palette), [palette]);
     const name = options.name ?? progress.profile?.name ?? "Rook Sigma";
     const [message, setMessage] = React.useState(() => ({
@@ -70,10 +101,9 @@ export default function App({ options, file, initialProgress }) {
     };
     // Saves first and only then shows the change, so the screen never claims
     // something the file does not hold.
-    const save = React.useCallback((next) => {
+    const commit = React.useCallback((next, text, tone = "info") => {
         try {
             saveProgress(file, next);
-            return true;
         }
         catch (error) {
             setMessage({
@@ -82,26 +112,27 @@ export default function App({ options, file, initialProgress }) {
             });
             return false;
         }
+        setProgress(next);
+        if (text) {
+            setMessage({ text, tone });
+        }
+        return true;
     }, [file]);
     const record = React.useCallback((update, text, activity) => {
-        const next = update(progress);
-        if (!save(next)) {
-            return;
-        }
+        let next = update(progress);
         const after = levelOf(experienceOf(next));
         const leveledUp = after > levelOf(experienceOf(progress));
-        setProgress(next);
-        setMessage({
-            text: leveledUp
-                ? `${text} ${messagesOf(next.language ?? "en").form.levelUp(after)}`
-                : text,
-            tone: "success",
-        });
-        setFlash({
-            activity: leveledUp ? "levelUp" : activity,
-            until: Date.now() + flashMilliseconds,
-        });
-    }, [progress, save]);
+        if (leveledUp) {
+            next = withEvent(next, "levelUp", String(after));
+        }
+        const { form } = messagesOf(next.language ?? "en");
+        if (commit(next, leveledUp ? `${text} ${form.levelUp(after)}` : text, "success")) {
+            setFlash({
+                activity: leveledUp ? "levelUp" : activity,
+                until: Date.now() + flashMilliseconds,
+            });
+        }
+    }, [progress, commit]);
     React.useEffect(() => {
         const interval = setInterval(() => {
             setNow(Date.now());
@@ -110,6 +141,14 @@ export default function App({ options, file, initialProgress }) {
             clearInterval(interval);
         };
     }, []);
+    // Opening the app is an action too.
+    const hasOpened = React.useRef(false);
+    React.useEffect(() => {
+        if (!hasOpened.current) {
+            hasOpened.current = true;
+            commit(withEvent(progress, "appOpened"));
+        }
+    }, [commit, progress]);
     React.useEffect(() => {
         const { timer: next, finished } = advanceTimer(timer, now, durations);
         if (!finished) {
@@ -119,7 +158,7 @@ export default function App({ options, file, initialProgress }) {
         setTimer(next);
         stdout.write("\u0007");
         if (finished === "break") {
-            setMessage({ text: words.breakOver, tone: "info" });
+            commit(withEvent(progress, "breakOver"), words.breakOver);
             return;
         }
         record((current) => ({
@@ -129,11 +168,11 @@ export default function App({ options, file, initialProgress }) {
                 { at: new Date(now).toISOString(), minutes: durations.focus },
             ],
         }), words.focusComplete(durations.focus, durations.break), "idle");
-    }, [now, timer, durations, record, stdout, language]);
+    }, [now, timer, durations, record, commit, progress, stdout, language]);
     React.useEffect(() => {
         let isMounted = true;
         const refresh = async () => {
-            const next = await fetchQuote();
+            const next = await fetchQuote(quoteSettings);
             if (isMounted) {
                 setQuote(next);
             }
@@ -142,17 +181,24 @@ export default function App({ options, file, initialProgress }) {
         if (hasQuoteApi()) {
             void refresh();
         }
+        if (!quoteSettings.autoRefresh) {
+            return () => {
+                isMounted = false;
+            };
+        }
         const interval = setInterval(() => {
             void refresh();
-        }, quoteRefreshMinutes * 60_000);
+        }, quoteSettings.interval * 1000);
         return () => {
             isMounted = false;
             clearInterval(interval);
         };
-    }, []);
+    }, [quoteSettings]);
     const backToMenu = (text) => {
         setView("menu");
+        setQuoteEditor(undefined);
         setDraftActivity(undefined);
+        setPreviewTheme(undefined);
         if (text) {
             say(text);
         }
@@ -161,20 +207,19 @@ export default function App({ options, file, initialProgress }) {
         if (view === "menu" && input === "q") {
             exit();
         }
+        else if (view === "quotes" && quoteEditor && key.escape) {
+            setQuoteEditor(undefined);
+        }
         else if (view !== "menu" && key.escape) {
             const isForm = ["diet", "workout", "profile"].includes(view);
             backToMenu(isForm ? messages.form.cancelled : undefined);
         }
     }, { isActive: progress.language !== undefined });
-    const saveSetting = (next, text) => {
-        if (save(next)) {
-            setProgress(next);
-            backToMenu(text);
-        }
-    };
     const chooseLanguage = (value) => {
         const next = pick(languages, value, "en");
-        saveSetting({ ...progress, language: next }, messagesOf(next).languageChanged);
+        if (commit(withEvent({ ...progress, language: next }, "languageChanged", next))) {
+            backToMenu(messagesOf(next).languageChanged);
+        }
     };
     const providers = (children) => (React.createElement(paletteContext.Provider, { value: palette },
         React.createElement(ThemeProvider, { theme: uiTheme }, children)));
@@ -191,27 +236,20 @@ export default function App({ options, file, initialProgress }) {
         timer.remaining === durations.focus * 60_000;
     const clock = formatClock(remainingOf(timer, now));
     const phaseLabel = messages.timer[timer.phase];
-    const selectMenu = (index) => {
-        const item = menuOrder[index];
-        if (item === "timer" && isIdle) {
-            setTimer(toggleTimer(timer, Date.now()));
-            say(messages.timer.started);
-        }
-        else if (item === "quotes") {
-            void fetchQuote().then(setQuote);
-            say(messages.quoteDrawn);
-        }
-        else if (item) {
-            setView(item);
-        }
-    };
     const chooseTimerAction = (action) => {
-        if (action === "toggle") {
-            setTimer(toggleTimer(timer, Date.now()));
-            backToMenu(isRunning ? messages.timer.paused : messages.timer.resumed);
+        if (action === "start" || action === "toggle") {
+            const [event, text, detail] = action === "start"
+                ? ["timerStarted", messages.timer.started, String(durations.focus)]
+                : isRunning
+                    ? ["timerPaused", messages.timer.paused, clock]
+                    : ["timerResumed", messages.timer.resumed];
+            setTimer(toggleTimer(timer, now));
+            commit(withEvent(progress, event, detail));
+            backToMenu(text);
         }
         else if (action === "stop") {
             setTimer(idleTimer(durations));
+            commit(withEvent(progress, "timerStopped", clock));
             backToMenu(messages.timer.stopped);
         }
         else {
@@ -253,7 +291,7 @@ export default function App({ options, file, initialProgress }) {
         record((current) => ({ ...current, workouts: [...current.workouts, workout] }), messages.form.workoutLogged(messages.workoutActivity[workout.activity], workout.minutes, workoutExperience(workout)), workoutAnimation(workout.activity));
     };
     const submitProfile = (values) => {
-        saveSetting({
+        const next = withEvent({
             ...progress,
             profile: {
                 name: values.name ?? name,
@@ -264,11 +302,64 @@ export default function App({ options, file, initialProgress }) {
                 workStyle: pick(workStyles, values.workStyle, "desk"),
                 goal: pick(healthGoals, values.goal, "maintain"),
             },
-        }, messages.form.profileSaved);
+        }, "profileSaved");
+        if (commit(next)) {
+            backToMenu(messages.form.profileSaved);
+        }
     };
     const chooseTheme = (value) => {
         const next = pick(themeNames, value, "ember");
-        saveSetting({ ...progress, theme: next }, messages.themes.changed(messages.themes.names[next]));
+        if (commit(withEvent({ ...progress, theme: next }, "themeChanged", next))) {
+            backToMenu(messages.themes.changed(messages.themes.names[next]));
+        }
+    };
+    const drawQuote = (settings, base) => {
+        void fetchQuote(settings).then(setQuote);
+        return withEvent(base, "quoteDrawn");
+    };
+    // Saves 1 quote setting, logs it as "setting:value", and draws a quote that
+    // follows the new filters.
+    const updateQuotes = (patch, detail) => {
+        const settings = { ...quoteSettings, ...patch };
+        const next = withEvent({ ...progress, quotes: settings }, "quoteSettingsChanged", detail);
+        if (commit(next, messages.quotes.changed)) {
+            setQuoteEditor(undefined);
+            setQuote(pickBundled(settings, Date.now()));
+        }
+    };
+    const chooseQuoteOption = (value) => {
+        setQuoteOption(value);
+        switch (value) {
+            case "draw": {
+                commit(drawQuote(quoteSettings, progress), messages.quoteDrawn);
+                break;
+            }
+            case "autoRefresh": {
+                const isOn = !quoteSettings.autoRefresh;
+                updateQuotes({ autoRefresh: isOn }, `autoRefresh:${isOn ? "on" : "off"}`);
+                break;
+            }
+            case "mode": {
+                const mode = quoteSettings.mode === "random" ? "daily" : "random";
+                updateQuotes({ mode }, `mode:${mode}`);
+                break;
+            }
+            case "back": {
+                backToMenu();
+                break;
+            }
+            default: {
+                setQuoteEditor(pick(["interval", "categories", "excluded", "author", "work"], value, "interval"));
+            }
+        }
+    };
+    const openMenu = (value) => {
+        const item = pick(menuOrder, value, "quotes");
+        setFocusedMenu(item);
+        setView(item);
+        if (item === "theme") {
+            setPreviewTheme(themeName);
+        }
     };
     const experience = experienceOf(progress);
     const level = levelOf(experience);
@@ -277,6 +368,7 @@ export default function App({ options, file, initialProgress }) {
     const columns = size.columns || 100;
     const rows = size.rows || 40;
     const layout = layoutOf(columns, rows);
+    const pet = petStateOf(progress, now);
     const activity = flash && flash.until > now
         ? flash.activity
         : view === "diet"
@@ -286,48 +378,92 @@ export default function App({ options, file, initialProgress }) {
                 : isRunning
                     ? { focus: "focus", break: "break" }[timer.phase]
                     : "idle";
+    let activityLabel = messages.activity[activity];
+    if (activity === "idle") {
+        activityLabel = messages.mood[pet.mood];
+    }
+    else if (activity === "levelUp") {
+        activityLabel = `${messages.activity.levelUp} ${messages.level(level)}`;
+    }
     let timerSignal = isRunning ? clock : messages.signal.paused;
     if (isIdle) {
         timerSignal = messages.signal.ready;
     }
-    const hints = {
-        menu: messages.hints.menu,
-        logs: messages.hints.logs,
-        diet: messages.hints.form,
-        workout: messages.hints.form,
-        profile: messages.hints.form,
-        timer: messages.hints.select,
-        health: messages.hints.select,
-        theme: messages.hints.select,
-        language: messages.hints.select,
+    const entries = menuEntriesOf(messages, {
+        timerSignal,
+        progress,
+        quotes: quoteSettings,
+        now,
+        logs: logs.length,
+        theme: themeName,
+        focus: durations.focus,
+        rest: durations.break,
+    });
+    const focusedEntry = entries.find((entry) => entry.key === focusedMenu) ?? entries[0];
+    const isTyping = view === "diet" ||
+        (view === "quotes" && (quoteEditor === "author" || quoteEditor === "work"));
+    let hint = messages.hints.select;
+    if (view === "menu") {
+        hint = messages.hints.menu;
+    }
+    else if (view === "logs") {
+        hint = messages.hints.logs;
+    }
+    else if (isTyping) {
+        hint = messages.hints.suggest;
+    }
+    else if (view === "workout" || view === "profile") {
+        hint = messages.hints.form;
+    }
+    const shownQuote = localizedQuote(quote, language);
+    const quoteEditors = {
+        interval: (React.createElement(Choice, { initialValue: String(quoteSettings.interval), options: intervalOptionsOf(messages), onSelect: (value) => {
+                const interval = quoteIntervals.find((option) => String(option) === value) ?? 1500;
+                updateQuotes({ interval }, `interval:${interval}`);
+            } })),
+        categories: (React.createElement(MultiChoice, { doneLabel: messages.quotes.done, initial: quoteSettings.categories, options: categoryOptionsOf(messages), onDone: (selected) => {
+                const categories = quoteCategories.filter((category) => selected.includes(category));
+                updateQuotes({ categories }, `categories:${categories.join(",")}`);
+            } })),
+        excluded: (React.createElement(MultiChoice, { doneLabel: messages.quotes.done, initial: quoteSettings.excluded, options: categoryOptionsOf(messages), onDone: (selected) => {
+                const excluded = quoteCategories.filter((category) => selected.includes(category));
+                updateQuotes({ excluded }, `excluded:${excluded.join(",")}`);
+            } })),
+        author: (React.createElement(AutocompleteInput, { initialValue: quoteSettings.author, placeholder: messages.quotes.authorPrompt, suggest: (text) => quoteNames("author")
+                .filter((author) => author.toLowerCase().includes(text.trim().toLowerCase()))
+                .slice(0, 5)
+                .map((label) => ({ label })), onSubmit: (text) => {
+                updateQuotes({ author: text.trim() }, `author:${text.trim()}`);
+            } })),
+        work: (React.createElement(AutocompleteInput, { initialValue: quoteSettings.work, placeholder: messages.quotes.workPrompt, suggest: (text) => quoteNames("work")
+                .filter((work) => work.toLowerCase().includes(text.trim().toLowerCase()))
+                .slice(0, 5)
+                .map((label) => ({ label })), onSubmit: (text) => {
+                updateQuotes({ work: text.trim() }, `work:${text.trim()}`);
+            } })),
     };
+    const timerOptions = isIdle
+        ? [{ label: messages.timer.start, value: "start" }]
+        : [
+            {
+                label: isRunning ? messages.timer.pause : messages.timer.resume,
+                value: "toggle",
+            },
+            { label: messages.timer.stop, value: "stop" },
+        ];
     const panels = {
-        menu: (React.createElement(Box, { flexDirection: "column" },
-            React.createElement(MenuGrid, { columns: layout.menuColumns, isActive: view === "menu", items: menuItemsOf(messages, language, {
-                    timerSignal,
-                    progress,
-                    now,
-                    logs: logs.length,
-                    theme: themeName,
-                    focus: durations.focus,
-                    rest: durations.break,
-                }), onSelect: selectMenu }),
-            React.createElement(Box, { flexDirection: "column", marginTop: 1 },
-                React.createElement(Text, { bold: true, color: palette.soft }, messages.recent.title),
-                logs.length === 0 ? (React.createElement(Text, { dimColor: true }, messages.recent.empty)) : null,
-                logs.slice(0, recentCount).map((log) => (React.createElement(LogRow, { key: `${log.kind}-${log.at}`, language: language, log: log, messages: messages })))))),
+        quotes: (React.createElement(Titled, { title: messages.menu.quotes },
+            React.createElement(Text, { dimColor: true, italic: true, wrap: "truncate-end" }, `“${shownQuote.quote}” — ${shownQuote.author}`),
+            React.createElement(Box, { marginTop: 1 }, quoteEditor ? (React.createElement(Box, { key: quoteEditor }, quoteEditors[quoteEditor])) : (React.createElement(Choice, { key: "options", initialValue: quoteOption, options: quoteOptionsOf(messages, quoteSettings), onSelect: chooseQuoteOption }))))),
         timer: (React.createElement(Titled, { title: messages.menu.timer },
             React.createElement(Choice, { options: [
-                    {
-                        label: isRunning ? messages.timer.pause : messages.timer.resume,
-                        value: "toggle",
-                    },
-                    { label: messages.timer.stop, value: "stop" },
+                    ...timerOptions,
                     { label: messages.timer.back, value: "back" },
                 ], onSelect: chooseTimerAction }))),
         health: (React.createElement(HealthPanel, { language: language, messages: messages, palette: palette, progress: progress, today: today, onSelect: chooseHealthAction })),
-        diet: (React.createElement(EntryForm, { fields: dietFieldsOf(messages), messages: messages, title: messages.form.dietTitle, onSubmit: submitMeal })),
-        workout: (React.createElement(EntryForm, { fields: workoutFieldsOf(messages), messages: messages, title: messages.form.workoutTitle, onSubmit: submitWorkout, onValues: (values) => {
+        logs: (React.createElement(LogsView, { height: Math.max(rows - 9, 6), language: language, logs: logs, messages: messages })),
+        diet: (React.createElement(EntryForm, { fields: dietFieldsOf(messages, language, progress.meals), messages: messages, title: messages.form.dietTitle, onSubmit: submitMeal })),
+        workout: (React.createElement(EntryForm, { fields: workoutFieldsOf(messages, progress.workouts), messages: messages, title: messages.form.workoutTitle, onSubmit: submitWorkout, onValues: (values) => {
                 setDraftActivity(values.activity);
             } })),
         profile: (React.createElement(EntryForm, { fields: profileFieldsOf(messages, progress.profile, name), messages: messages, title: messages.form.profileTitle, onSubmit: submitProfile })),
@@ -336,28 +472,45 @@ export default function App({ options, file, initialProgress }) {
                     label: messages.themes.names[option].padEnd(8),
                     value: option,
                     hint: React.createElement(Swatches, { palette: themes[option] }),
-                })), onSelect: chooseTheme }))),
+                })), onFocus: (value) => {
+                    setPreviewTheme(pick(themeNames, value, themeName));
+                }, onSelect: chooseTheme }))),
         language: (React.createElement(Titled, { title: messages.menu.language },
             React.createElement(Choice, { initialValue: language, options: languageOptions, onSelect: chooseLanguage }))),
     };
-    const shownQuote = localizedQuote(quote, language);
-    const todayPanel = (React.createElement(TodayPanel, { sections: sectionsOf(language, palette, progress, now), title: messages.today.title, width: layout.todayWidth }));
+    const preview = focusedEntry ? (React.createElement(Box, { flexDirection: "column" },
+        React.createElement(Text, { bold: true, color: palette.soft }, focusedEntry.status),
+        React.createElement(Box, { marginTop: 1 },
+            React.createElement(Text, { dimColor: true }, focusedEntry.description)),
+        React.createElement(Box, { marginTop: 1 },
+            React.createElement(Text, { dimColor: true, italic: true }, messages.describe.open)))) : null;
+    const todayPanel = (React.createElement(TodayPanel, { isCompact: layout.isTodayCompact, sections: sectionsOf(language, palette, progress, now), title: messages.today.title, width: layout.todayWidth }));
+    const recentBlock = (React.createElement(Box, { borderColor: palette.border, borderStyle: "round", flexDirection: "column", flexShrink: 0, paddingX: 1 },
+        React.createElement(Text, { bold: true, color: palette.soft }, messages.recent.title),
+        logs.length === 0 ? React.createElement(Text, { dimColor: true }, messages.recent.empty) : null,
+        logs.slice(0, recentCount).map((log) => (React.createElement(LogRow, { key: `${log.kind}-${log.at}`, language: language, log: log, messages: messages })))));
     return providers(React.createElement(Box, { flexDirection: "column", height: size.rows ? rows : undefined, overflow: "hidden", width: columns },
         React.createElement(Box, { borderColor: palette.accent, borderStyle: "round", flexDirection: "column", flexShrink: 0, paddingX: 1 },
             React.createElement(Box, { justifyContent: "space-between" },
                 React.createElement(Text, { bold: true, color: palette.accent }, "\u273B Terminal Sigma"),
                 React.createElement(Text, { dimColor: true }, new Date(now).toTimeString().slice(0, 8))),
             React.createElement(Text, { dimColor: true, italic: true, wrap: "truncate-end" }, `“${shownQuote.quote}” — ${shownQuote.author}`)),
-        view === "logs" ? (React.createElement(Box, { borderColor: palette.accent, borderStyle: "round", flexGrow: 1, paddingX: 1 },
-            React.createElement(LogsView, { height: rows - 7, language: language, logs: logs, messages: messages }))) : (React.createElement(React.Fragment, null,
-            React.createElement(Box, { flexDirection: layout.stacked ? "column-reverse" : "row", flexGrow: 1 },
-                layout.showCharacter ? (React.createElement(Character, { activity: activity, label: activity === "levelUp"
-                        ? `${messages.activity.levelUp} ${messages.level(level)}`
-                        : messages.activity[activity], level: messages.level(level), levelNumber: level, name: name, width: characterWidth })) : null,
-                layout.showToday && layout.todayBeside ? todayPanel : null,
-                React.createElement(Box, { borderColor: view === "menu" ? palette.border : palette.accent, borderStyle: "round", flexDirection: "column", paddingX: 1, width: layout.panelWidth }, view === "menu" ? panels.menu : panels[view])),
-            layout.showToday && !layout.todayBeside ? todayPanel : null)),
-        React.createElement(Footer, { hint: hints[view], message: isIdle || isRunning
+        React.createElement(Box, { flexDirection: layout.stacked ? "column-reverse" : "row", flexGrow: 1 },
+            layout.showCharacter ? (React.createElement(Character, { activity: activity, badges: pet.badges, label: activityLabel, level: messages.level(level), levelNumber: level, look: lookOf(progress.profile), mood: pet.mood, name: name, width: characterWidth })) : null,
+            layout.showToday && layout.todayBeside ? todayPanel : null,
+            React.createElement(Box, { flexDirection: "column", width: layout.panelWidth },
+                React.createElement(Box, { flexDirection: layout.isMenuSplit ? "row" : "column", flexGrow: 1 },
+                    React.createElement(Box, { borderColor: view === "menu" ? palette.accent : palette.border, borderStyle: "round", display: view === "logs" ? "none" : "flex", flexShrink: 0, paddingX: 1, width: layout.isMenuSplit ? menuListWidth : undefined },
+                        React.createElement(Choice, { isNumbered: true, initialValue: focusedMenu, isActive: view === "menu", options: entries.map((entry) => ({
+                                label: entry.label,
+                                value: entry.key,
+                            })), onFocus: (value) => {
+                                setFocusedMenu(pick(menuOrder, value, "quotes"));
+                            }, onSelect: openMenu })),
+                    React.createElement(Box, { borderColor: view === "menu" ? palette.border : palette.accent, borderStyle: "round", flexDirection: "column", flexGrow: 1, overflow: "hidden", paddingX: 1 }, view === "menu" ? preview : panels[view])),
+                layout.showRecent && view !== "logs" ? recentBlock : null)),
+        layout.showToday && !layout.todayBeside ? todayPanel : null,
+        React.createElement(Footer, { hint: hint, message: isIdle || isRunning
                 ? message.text
                 : `${messages.timer.pausedAt(phaseLabel, clock)} · ${message.text}`, status: isRunning ? messages.timer.left(phaseLabel, clock) : undefined, tone: message.tone })));
 }