x-mod-stash

    on('ui.render', { component: 'Pane', requestId: BOARD }, async ($, e) => {
        const ui = $.ui.resolve(e);
        const { Box, Text, Button, Link } = ui;
        // the poll read the registry into the view; the pane only draws it, so a draw costs no file or process read
        const board = (await $.state.get(BOARD_VIEW)).value;
        const now = board?.at ?? 0;
        const me = (await $.state.get(VIEW)).value?.selfId;
        // the board's lower half: this session's orbit and its plan, read here so a mark or a tool call redraws it
        const o = (await $.state.get(ORBIT)).value ?? orbit;
        // mobile draws no Input: its notes wait for another surface
        const Input = 'Input' in ui ? ui.Input : undefined;
        const open = o.asks.filter((a) => !a.isResolved);
        const age = planAge(o);
        // 🛎️ and ↩️ are one toggle each, side by side at the row's left: lit while it holds, plain while it does not
        const markJSX = (a: OrbitAsk, mark: 'accepted' | 'rejected') => (
            <Button
                key={`orbit:${mark}:${a.id}`}
                onPress={() =>
                    void markAsks($, (x) =>
                        x.id === a.id
                            ? {
                                  ...x,
                                  isChanged: false,
                                  mark: x.mark === mark ? undefined : mark,
                              }
                            : x,
                    )
                }
                {...(a.mark === mark
                    ? { variant: 'secondary' as const }
                    : { plain: true as const })}>
                {mark === 'accepted' ? '🛎️' : '↩️'}
            </Button>
        );
        const handleAssumedNote = (id: string, value: string) =>
            void changeAssumed($, (y) =>
                y.id === id ? { ...y, note: value.trim() || undefined } : y,
            );
        // the note keeps every keystroke, no Enter needed
        const handleNote = (id: string, value: string) =>
            void markAsks($, (x) =>
                x.id === id ? { ...x, note: value.trim() || undefined } : x,
            );
        // a locked ask is the running turn's: no control at all, its mark and note as dim text (the api has no disabled)
        // speak reads, pauses or stops through its control socket: a mod's text can't be selected for F4 on the desktop
        // (claude-code#101090) — a workaround, see mods/workarounds.md
        const speakJSX = (a: OrbitAsk) =>
            (
                [
                    [
                        'read',
                        '🔊',
                        { op: 'read', text: `${a.text}. pick: ${a.pick}` },
                    ],
                    ['pause', '⏯️', { op: 'pause' }],
                    ['stop', '⏹️', { op: 'stop' }],
                ] as const
            ).map(([what, glyph, request]) => (
                <Button
                    key={`orbit:${what}:${a.id}`}
                    onPress={() => void speak($, request)}
                    plain>
                    {glyph}
                </Button>
            ));
        // a ticket id in an ask or a phase opens its linear page, as a session row's does (dima's o62, 22:13)
        const linkedJSX = (text: string, key: string) =>
            text.split(TICKET_IDS).map((part, i) => {
                if (i % 2 === 0) return part;
                return (
                    <Link
                        href={`https://linear.app/x-com/issue/${part}`}
                        key={`${key}:${i}`}>
                        {part}
                    </Link>
                );
            });
        // the ask on its own line, the bold id leading it; under it one row: the note, 🛎️ ↩️, then speak's 🔊 ⏯ ⏹
        // (dima, 20:08); a full row of air between asks (dima, 19:52)
        const askJSX = (a: OrbitAsk, i: number) => (
            <Box
                flexDirection='column'
                key={`orbit:ask:${a.id}`}
                marginTop={i > 0 ? 1 : 0}
                rowGap={LINE_GAP}>
                <Box flexDirection='row' gap={1}>
                    <Box flexGrow={1} flexShrink={1} minWidth={0}>
                        {/* the id and the pick bold, so the proposal stands out (dima, 20:30) */}
                        {/* an ask answered this turn leads its line with 👀 until the turn ends — inline, so the row keeps its left
                            edge; a hover card would need a box of its own (dima, 20:34, 20:39) */}
                        <Text>
                            {a.isResolved ? '👀 ' : ''}
                            <Text bold>{a.id}</Text>
                            {': '}
                            {linkedJSX(a.text, `ask:${a.id}`)}
                            {' ➡️ '}
                            <Text bold>
                                {linkedJSX(a.pick, `pick:${a.id}`)}
                            </Text>
                        </Text>
                    </Box>
                    {a.isChanged ? <Text color={ACCENT}>changed</Text> : null}
                </Box>
                {/* the buttons lead, the note follows them (dima, 20:19) */}
                <Box alignItems='center' flexDirection='row' gap={1}>
                    {a.isLocked ? (
                        <Box flexShrink={0}>
                            <Text dimColor>
                                {`🔒 ${a.mark === 'accepted' ? '🛎️' : '↩️'}`}
                            </Text>
                        </Box>
                    ) : (
                        [markJSX(a, 'accepted'), markJSX(a, 'rejected')]
                    )}
                    {/* reading aloud edits nothing, so a locked row keeps 🔊 ⏯️ ⏹️ (dima, 20:25) */}
                    {speakJSX(a)}
                    {a.isLocked ? (
                        a.note ? (
                            <Box flexShrink={1} minWidth={0}>
                                <Text dimColor wrap='truncate-end'>
                                    {`«${a.note}»`}
                                </Text>
                            </Box>
                        ) : null
                    ) : Input ? (
                        <Box flexShrink={1} minWidth={0}>
                            <Input
                                key={`orbit:note:${a.id}`}
                                onInput={(value: string) =>
                                    handleNote(a.id, value)
                                }
                                onSubmit={(value: string) =>
                                    handleNote(a.id, value)
                                }
                                placeholder='note'
                                value={a.note ?? ''}
                            />
                        </Box>
                    ) : null}
                </Box>
            </Box>
        );
        const orbitJSX = (
            <Box flexDirection='column' key='orbit' marginTop={1}>
                <Box flexDirection='row' justifyContent='space-between'>
                    <Text bold>{`🪐 orbit: ${open.length}`}</Text>
                    {open.some((a) => !a.mark && !a.isLocked) ? (
                        <Button
                            key='orbit:all'
                            onPress={() =>
                                void markAsks($, (x) =>
                                    x.mark
                                        ? x
                                        : {
                                              ...x,
                                              isChanged: false,
                                              mark: 'accepted',
                                          },
                                )
                            }

    on('ui.render', { component: 'AbovePrompt' }, async ($, e, next) => {
        if (e.surface !== 'terminal' && e.surface !== 'desktop') return next(e);
        // the published view and orbit, never the module's values: reading them subscribes this band, and a write redraws it
        const view = (await $.state.get(VIEW)).value ?? viewOf(false);
        const enhancer = (await $.state.get(ENHANCER)).value ?? {
            status: 'idle' as const,
        };
        const o = (await $.state.get(ORBIT)).value ?? orbit;
        const ui = $.ui.resolve(e);
        const { Box, Text, Button } = ui;
        const handleAfkFlip = async () => {
            const was = (await $.store.get(AFK_KEY)) as
                | { at?: number; on?: boolean }
                | undefined;
            afk = !afk;
            digest =
                !afk && was?.on && was.at !== undefined
                    ? await awayDigest($, was.at)
                    : undefined;
            await $.store.set(AFK_KEY, { at: await $.clock.now(), on: afk });
            await publish($);
        };
        // one switch for every session, kept in the store so a restart keeps it
        const handleWakerFlip = async () => {
            isWaker = !view.isWaker;
            await $.store.set(WAKER_KEY, { on: isWaker });
            await publish($);
        };
        const handleHotFlip = async () => {
            const now = await $.clock.now();
            hot = hot ? undefined : { since: isBusy ? now : (endedAt ?? now) };
            await saveHot($);
            await armHot($);
            await publish($);
        };
        const tip = (
            key: string,
            words: string,
            control: RenderElement,
            place: { left: number } | { right: number },
            press?: { hotkey: string; onPress: () => void },
        ) => hoverTip(ui, key, words, control, place, press);
        const boardOpen = view.isBoardOpen;
        const handleBoardFlip = async () => {
            if (await isOpen($)) await $.ui.close({ id: BOARD });
            else await openBoard($);
            await publish($);
        };
        // a terminal draws a chromed Button as `[ label ]`
        const leftOf = (label: string, chrome: boolean) => ({
            right: [...label].length + (chrome ? 4 : 0) + 1,
        });

        // the chips: text, never a control — 🚦 already opens the board, where orbit and the plan live (dima, 2026-10-10)
        const openAsks = o.asks.filter((a) => !a.isResolved).length;
        // every chip names itself on hover in five words or fewer (dima, 20:13)
        const planned = o.plan?.lines.length ?? 0;
        const asksChip = `🪐 ${openAsks}`;
        const planChip = `🌔 ${planned}`;
        const chips = (
            <Box flexDirection='row' flexShrink={0} gap={1} key='chips'>
                {tip(
                    'chip:asks',
                    `${openAsks} open ask${openAsks === 1 ? '' : 's'} for you`,
                    <Text
                        bold={openAsks > 0}
                        color={openAsks ? ACCENT : undefined}
                        dimColor={!openAsks}>
                        {asksChip}
                    </Text>,
                    { left: [...asksChip].length + 1 },
                )}
                {tip(
                    'chip:plan',
                    `${planned} phase${planned === 1 ? '' : 's'}`,
                    <Text dimColor={!planned}>{planChip}</Text>,
                    { left: [...planChip].length + 1 },
                )}
            </Box>
        );

        // the meters: two short bars in the row, each ending in its %; the readings sit beside them
        const meter = (await $.state.get(METER)).value;
        const now = await $.clock.now();
        const Svg = e.surface === 'desktop' ? $.ui.resolve(e).Svg : undefined;
        const runsJSX = (key: string, runs: BarRun[]) =>
            runs.map((r, i) => (
                <Text
                    bold={r.kind === 'mark'}
                    color={r.color}
                    dimColor={r.kind === 'empty'}
                    // biome-ignore lint/suspicious/noArrayIndexKey: a run's place in its bar is its identity
                    key={`${key}:${i}`}>
                    {r.text}
                </Text>
            ));
        const five = meter?.fiveHour;
        const pace =
            five?.resetsAt === undefined
                ? undefined
                : paceOf(five.resetsAt, now);
        const gap =
            five && pace !== undefined
                ? Math.round(five.used - pace)
                : undefined;
        const fiveTint = gapTint(gap ?? 0);
        const ctx = meter?.context;
        const ctxTint = contextFill(ctx ?? 0, meter?.compactAt);
        // the meters run the band's full width, one bar a row under the row (dima, 20:45: «bring back old wide meters»);
        // the desktop band runs ~7.8px a column (measured off dima's 20:22 shot): the label, the % and gaps take ~90px
        const barWidth = Math.max(8, e.props.bodyColumns - 13);
        const svgCells = Math.max(
            8,
            Math.floor((e.props.bodyColumns * 7.8 - 90) / CELL_STEP),
        );
        const barJSX = (
            key: string,
            label: string,
            words: string,
            tint: string,
            bar?: { percent: number; mark?: number; scale?: number },
            marginTop = 0,
        ) => (
            <Box
                alignItems='center'
                flexDirection='row'
                gap={Svg ? 0.5 : 1}
                key={key}
                marginTop={marginTop}>
                <Box flexShrink={0} width={Svg ? 5 : 6}>
                    {tip(key, words, <Text wrap='truncate-end'>{label}</Text>, {
                        left: [...label].length + 1,
                    })}
                </Box>
                {bar === undefined ? (
                    <Text dimColor>no reading yet</Text>
                ) : (
                    // the % ends on the band's right edge, under the row's last button
                    <Box
                        alignItems='center'
                        flexDirection='row'
                        flexGrow={1}
                        gap={1}
                        justifyContent='space-between'>
                        {Svg ? (
                            <Svg
                                alt={`${label} ${Math.round(bar.percent)}%`}
                                height={BAR_HEIGHT}
                                key={`${key}:svg`}
                                source={meterSvg(
                                    bar.percent,
                                    svgCells,
                                    bar.mark,
                                    bar.scale,
                                )}
                            />
                        ) : (
                            <Box flexDirection='row' flexShrink={0}>
                                {runsJSX(
                                    key,