saterminal 0.3.2 → 0.5.0

package/src/tui/screens/focus.tsx

@@ -0,0 +1,244 @@
+import { Box, Text, useInput } from "ink";
+import { useState } from "react";
+import type { Focus } from "@/questions/focus.ts";
+import { selectedDomains, toggleDifficulty, toggleDomain, toggleSkill } from "@/questions/focus.ts";
+import type { Difficulty, DomainCode, SkillCode } from "@/questions/question.ts";
+import { difficulties, difficultyLabels, domains, domainLabels, skillLabels, skillsByDomain } from "@/questions/taxonomy.ts";
+import { HorizontalRule, Screen } from "@/tui/components/chrome.tsx";
+import { useTerminalSize } from "@/tui/hooks/use-terminal-size.ts";
+
+type FocusPosition = {
+  column: number;
+  row: number;
+};
+
+type FocusRow =
+  | { kind: "difficulty"; value: Difficulty }
+  | { kind: "domain"; value: DomainCode }
+  | { kind: "skill"; value: SkillCode };
+
+type SelectionState = "none" | "partial" | "all";
+
+type FocusColumn = {
+  id: "difficulty" | DomainCode;
+  rows: FocusRow[];
+};
+
+type VisibleColumn = {
+  column: FocusColumn;
+  columnIndex: number;
+};
+
+type FocusScreenProps = {
+  focus: Focus;
+  notice?: string;
+  onChange: (focus: Focus) => void;
+  onStart: () => void;
+};
+
+type FocusGridProps = {
+  focus: Focus;
+  columns: FocusColumn[];
+  position: FocusPosition;
+  width: number;
+};
+
+type FocusGroupProps = {
+  focus: Focus;
+  column: FocusColumn;
+  columnIndex: number;
+  position: FocusPosition;
+  width: number;
+  compact: boolean;
+};
+
+type DomainGridProps = {
+  focus: Focus;
+  columns: VisibleColumn[];
+  position: FocusPosition;
+  width: number;
+};
+
+type FocusChoiceProps = {
+  focus: Focus;
+  row: FocusRow;
+  active: boolean;
+  compact?: boolean;
+};
+
+export function FocusScreen({ focus, notice, onChange, onStart }: FocusScreenProps) {
+  const { width } = useTerminalSize();
+  const columns = focusColumns();
+  const [position, setPosition] = useState({ column: 0, row: 0 });
+  const normalized = { column: Math.min(position.column, columns.length - 1), row: Math.min(position.row, columns[Math.min(position.column, columns.length - 1)].rows.length - 1) };
+  useInput((input, key) => {
+    if (key.upArrow || input === "k") setPosition((current) => ({ ...current, row: Math.max(0, current.row - 1) }));
+    else if (key.downArrow || input === "j") setPosition((current) => ({ ...current, row: Math.min(columns[current.column].rows.length - 1, current.row + 1) }));
+    else if (key.tab || key.rightArrow) setPosition((current) => ({ column: (current.column + 1) % columns.length, row: Math.min(current.row, columns[(current.column + 1) % columns.length].rows.length - 1) }));
+    else if (key.leftArrow) setPosition((current) => ({ column: (current.column - 1 + columns.length) % columns.length, row: Math.min(current.row, columns[(current.column - 1 + columns.length) % columns.length].rows.length - 1) }));
+    else if (input === " ") onChange(toggleRow(focus, columns[normalized.column].rows[normalized.row]));
+    else if (key.return) onStart();
+  });
+  return (
+    <Screen title="focus" detail={`${focus.skills.length} skills · ${focus.difficulties.join(",")} · ${selectedDomains(focus).length} domains`} footer="j/k move · tab/←/→ group · space toggle · enter start">
+      {notice ? <Box marginBottom={1}><Text color="yellow">{notice}</Text></Box> : null}
+      <FocusGrid focus={focus} columns={columns} position={normalized} width={width} />
+    </Screen>
+  );
+}
+
+function FocusGrid({ focus, columns, position, width }: FocusGridProps) {
+  const [difficulty, ...domains] = columns;
+  const domainColumns = domains.map((column, index) => ({ column, columnIndex: index + 1 }));
+
+  return (
+    <Box flexDirection="column">
+      <Text bold color="cyan">Difficulty</Text>
+      <HorizontalRule width={width} />
+      <DifficultyChoices focus={focus} column={difficulty} position={position} />
+      <HorizontalRule width={width} />
+      <Box marginTop={1}>
+        <DomainGrid focus={focus} columns={domainColumns} position={position} width={width} />
+      </Box>
+    </Box>
+  );
+}
+
+function DifficultyChoices({ focus, column, position }: { focus: Focus; column: FocusColumn; position: FocusPosition }) {
+  return (
+    <Box flexDirection="column">
+      {column.rows.map((row, rowIndex) => (
+        <FocusChoice
+          key={`${row.kind}-${row.value}`}
+          focus={focus}
+          row={row}
+          active={position.column === 0 && position.row === rowIndex}
+        />
+      ))}
+    </Box>
+  );
+}
+
+function DomainGrid({ focus, columns, position, width }: DomainGridProps) {
+  const columnGap = 2;
+  const minimumColumnWidth = Math.max(...columns.flatMap((column) => [
+    Bun.stringWidth(columnLabel(column.column)),
+    ...column.column.rows.map((row) => focusChoiceWidth(row)),
+  ]));
+  const overviewColumns = Math.min(columns.length, Math.floor((width + columnGap) / (minimumColumnWidth + columnGap)));
+  const columnCount = Math.max(1, overviewColumns);
+  const visibleColumns: VisibleColumn[] = columnCount > 1
+    ? columns
+    : [columns[Math.max(0, position.column - 1)]];
+  const renderedColumnCount = Math.min(columnCount, visibleColumns.length);
+  const columnWidth = Math.floor((width - columnGap * (renderedColumnCount - 1)) / renderedColumnCount);
+  const groupRows = chunks(visibleColumns, renderedColumnCount);
+
+  return (
+    <Box flexDirection="column">
+      {groupRows.map((groupRow, rowIndex) => (
+        <Box
+          key={groupRow.map(({ column }) => column.id).join("-")}
+          columnGap={columnGap}
+          marginBottom={rowIndex === groupRows.length - 1 ? 0 : 1}
+        >
+          {groupRow.map(({ column, columnIndex }) => (
+            <FocusGroup
+              key={column.id}
+              focus={focus}
+              column={column}
+              columnIndex={columnIndex}
+              position={position}
+              width={columnWidth}
+              compact={columnWidth < minimumColumnWidth}
+            />
+          ))}
+        </Box>
+      ))}
+    </Box>
+  );
+}
+
+function FocusGroup({ focus, column, columnIndex, position, width, compact }: FocusGroupProps) {
+  return (
+    <Box width={width} flexDirection="column">
+      <Text bold color="cyan">{columnLabel(column, compact)}</Text>
+      {column.rows.map((row, rowIndex) => (
+        <FocusChoice
+          key={`${row.kind}-${row.value}`}
+          focus={focus}
+          row={row}
+          active={position.column === columnIndex && position.row === rowIndex}
+          compact={compact}
+        />
+      ))}
+    </Box>
+  );
+}
+
+function FocusChoice({ focus, row, active, compact = false }: FocusChoiceProps) {
+  const selection = rowSelection(focus, row);
+  const color = active ? "yellow" : selection === "all" ? "green" : selection === "partial" ? "yellow" : "gray";
+  const indent = row.kind === "skill" ? " " : "";
+  return (
+    <Text color={color} bold={active}>
+      {active ? ">" : " "} {indent}{selectionGlyph(selection)} {focusLabel(row, compact)}
+    </Text>
+  );
+}
+
+function chunks<T>(values: readonly T[], size: number): T[][] {
+  return Array.from(
+    { length: Math.ceil(values.length / size) },
+    (_, index) => values.slice(index * size, (index + 1) * size),
+  );
+}
+
+function columnLabel(column: FocusColumn, compact = false): string {
+  if (column.id === "difficulty") return "Difficulty";
+  return compact ? column.id : `${column.id}  ${domainLabels[column.id]}`;
+}
+
+function focusLabel(row: FocusRow, compact = false): string {
+  if (row.kind === "difficulty") return `${row.value}  ${difficultyLabels[row.value]}`;
+  if (row.kind === "domain") return "All skills";
+  return compact ? row.value : `${row.value}  ${skillLabels[row.value]}`;
+}
+
+function focusChoiceWidth(row: FocusRow): number {
+  const indent = row.kind === "skill" ? 1 : 0;
+  return 4 + indent + Bun.stringWidth(focusLabel(row));
+}
+
+function focusColumns(): FocusColumn[] {
+  return [
+    { id: "difficulty", rows: difficulties.map((value) => ({ kind: "difficulty", value })) },
+    ...domains.map((domain) => ({
+      id: domain,
+      rows: [
+        { kind: "domain" as const, value: domain },
+        ...skillsByDomain[domain].map((value) => ({ kind: "skill" as const, value })),
+      ],
+    })),
+  ];
+}
+
+function toggleRow(focus: Focus, row: FocusRow): Focus {
+  if (row.kind === "difficulty") return toggleDifficulty(focus, row.value);
+  if (row.kind === "domain") return toggleDomain(focus, row.value);
+  return toggleSkill(focus, row.value);
+}
+
+function rowSelection(focus: Focus, row: FocusRow): SelectionState {
+  if (row.kind === "difficulty") return focus.difficulties.includes(row.value) ? "all" : "none";
+  if (row.kind === "skill") return focus.skills.includes(row.value) ? "all" : "none";
+  const selected = skillsByDomain[row.value].filter((skill) => focus.skills.includes(skill)).length;
+  if (selected === 0) return "none";
+  return selected === skillsByDomain[row.value].length ? "all" : "partial";
+}
+
+function selectionGlyph(selection: SelectionState): string {
+  if (selection === "all") return "●";
+  if (selection === "partial") return "◐";
+  return "○";
+}

package/src/tui/screens/history.tsx

@@ -0,0 +1,33 @@
+import { Box, Text, useInput } from "ink";
+import { useState } from "react";
+import type { Attempt } from "@/progress/attempt.ts";
+import { history } from "@/progress/history.ts";
+import { Screen } from "@/tui/components/chrome.tsx";
+import { useTerminalSize } from "@/tui/hooks/use-terminal-size.ts";
+
+export function HistoryScreen({ attempts, notice, onOpen }: { attempts: Iterable<Attempt>; notice?: string; onOpen: (attempt: Attempt) => void }) {
+  const rows = history(attempts);
+  const { height } = useTerminalSize();
+  const [selected, setSelected] = useState(0);
+  useInput((input, key) => {
+    if (key.upArrow || input === "k") setSelected((value) => Math.max(0, value - 1));
+    else if (key.downArrow || input === "j") setSelected((value) => Math.min(rows.length - 1, value + 1));
+    else if (key.return && rows[selected]) onOpen(rows[selected]);
+  });
+  const visible = Math.max(5, height - 7);
+  const start = Math.max(0, Math.min(selected - visible + 1, rows.length - visible));
+  return (
+    <Screen title="history" detail={`${rows.length} answered`} footer="j/k move · enter details">
+      {notice ? <Text color="yellow">{notice}</Text> : null}
+      {rows.length ? <Text color="gray">  question   result     skill  answered</Text> : <Text color="gray">No attempts yet.</Text>}
+      <Box flexDirection="column">
+        {rows.slice(start, start + visible).map((attempt, offset) => {
+          const active = start + offset === selected;
+          return <Text key={attempt.questionId} color={active ? "yellow" : attempt.outcome === "incorrect" ? "red" : attempt.outcome === "corrected" ? "yellow" : "green"} bold={active}>{active ? ">" : " "} {attempt.questionId.padEnd(10)} {attempt.outcome.padEnd(10)} {(attempt.skill ?? "-").padEnd(5)} {shortDate(attempt.answeredAt)}</Text>;
+        })}
+      </Box>
+    </Screen>
+  );
+}
+
+function shortDate(value: string): string { const date = new Date(value); return `${String(date.getMonth() + 1).padStart(2, "0")}/${String(date.getDate()).padStart(2, "0")} ${String(date.getHours()).padStart(2, "0")}:${String(date.getMinutes()).padStart(2, "0")}`; }

package/src/tui/screens/practice.tsx

@@ -0,0 +1,159 @@
+import { Box, Text, useInput } from "ink";
+import { useEffect, useState } from "react";
+import { openQuestionPage } from "@/questions/practice-sat.ts";
+import type { Question } from "@/questions/question.ts";
+import { hasHtmlTable } from "@/text/html.ts";
+import { formatDuration } from "@/text/duration.ts";
+import {
+  AnswerChoices,
+  answerChoiceLayout,
+  QuestionContent,
+  revealRange,
+} from "@/tui/components/question-content.tsx";
+import { PaneTitle, Screen } from "@/tui/components/chrome.tsx";
+import { useTerminalSize } from "@/tui/hooks/use-terminal-size.ts";
+
+type PracticePane = "question" | "answers";
+
+type PracticeScreenProps = {
+  question: Question;
+  onAnswer: (answer: string, duration: number) => void;
+  onSkip: () => void;
+};
+
+type QuestionPaneProps = {
+  active: boolean;
+  question: Question;
+  width: number;
+  height: number;
+  scroll: number;
+};
+
+type AnswerPaneProps = QuestionPaneProps & {
+  selected: number;
+};
+
+export function PracticeScreen({ question, onAnswer, onSkip }: PracticeScreenProps) {
+  const { width, height } = useTerminalSize();
+  const sideBySide = width >= 80;
+  const paneWidth = sideBySide ? Math.floor((width - 3) / 2) : width;
+  const viewportHeight = Math.max(5, height - 8);
+  const pageSize = Math.max(4, viewportHeight - 2);
+  const [activePane, setActivePane] = useState<PracticePane>("question");
+  const [selected, setSelected] = useState(0);
+  const [questionScroll, setQuestionScroll] = useState(0);
+  const [answerScroll, setAnswerScroll] = useState(0);
+  const [elapsed, setElapsed] = useState(0);
+  const [paused, setPaused] = useState(false);
+  const [timerVisible, setTimerVisible] = useState(true);
+  const unsupported = hasHtmlTable(
+    question.passage,
+    question.prompt,
+    question.explanation,
+    ...question.choices.map((choice) => choice.content),
+  );
+
+  useEffect(() => {
+    if (paused) return;
+    const timer = setInterval(() => setElapsed((value) => value + 1), 1000);
+    return () => clearInterval(timer);
+  }, [paused]);
+
+  useEffect(() => {
+    const range = answerChoiceLayout(question, selected, paneWidth).ranges[selected];
+    setAnswerScroll((current) => revealRange(current, viewportHeight, range));
+  }, [paneWidth, question, selected, viewportHeight]);
+
+  const scrollActivePane = (distance: number) => {
+    const update = (current: number) => Math.max(0, current + distance);
+    if (activePane === "question") setQuestionScroll(update);
+    else setAnswerScroll(update);
+  };
+
+  useInput((input, key) => {
+    if (input === " ") setPaused((value) => !value);
+    else if (input === "t") setTimerVisible((value) => !value);
+    else if (unsupported && input === "o") openQuestionPage(question);
+    else if (unsupported && (input === "n" || input === "x" || key.return)) onSkip();
+    else if (unsupported) return;
+    else if (key.tab || key.leftArrow || key.rightArrow) {
+      setActivePane((current) => current === "question" ? "answers" : "question");
+    } else if (key.upArrow || input === "k") {
+      setSelected((value) => Math.max(0, value - 1));
+      setActivePane("answers");
+    } else if (key.downArrow || input === "j") {
+      setSelected((value) => Math.min(question.choices.length - 1, value + 1));
+      setActivePane("answers");
+    } else if (key.pageUp || input === "[") scrollActivePane(-pageSize);
+    else if (key.pageDown || input === "]") scrollActivePane(pageSize);
+    else if (key.return && question.choices[selected]) onAnswer(question.choices[selected].key, elapsed);
+    else {
+      const direct = question.choices.findIndex((choice) => choice.key.toLowerCase() === input.toLowerCase());
+      if (direct >= 0) {
+        setSelected(direct);
+        setActivePane("answers");
+      }
+    }
+  });
+
+  const timer = timerVisible ? (
+    <Text bold color={paused ? "yellow" : "cyan"}>
+      {formatDuration(elapsed)}{paused ? "  PAUSED" : ""}
+    </Text>
+  ) : <Text color="gray">timer hidden</Text>;
+
+  const footer = unsupported
+    ? "o open · n/x/enter skip · space pause · t timer"
+    : "j/k or A-D choose · enter submit · tab/←/→ pane · [/] scroll · space pause · t timer";
+
+  return (
+    <Screen title="practice" detail={timer} footer={footer}>
+      {unsupported ? (
+        <Box flexDirection="column" paddingTop={1}>
+          <Text bold color="yellow">This question contains a table that needs a browser.</Text>
+          <Text>Press o to open it, then answer there or skip it here.</Text>
+        </Box>
+      ) : (
+        <Box flexDirection={sideBySide ? "row" : "column"} gap={3}>
+          {(sideBySide || activePane === "question") && (
+            <QuestionPane
+              active={activePane === "question"}
+              question={question}
+              width={paneWidth}
+              height={viewportHeight}
+              scroll={questionScroll}
+            />
+          )}
+          {(sideBySide || activePane === "answers") && (
+            <AnswerPane
+              active={activePane === "answers"}
+              question={question}
+              selected={selected}
+              width={paneWidth}
+              height={viewportHeight}
+              scroll={answerScroll}
+            />
+          )}
+        </Box>
+      )}
+    </Screen>
+  );
+}
+
+function QuestionPane({ active, question, width, height, scroll }: QuestionPaneProps) {
+  return (
+    <Box width={width} flexDirection="column">
+      <PaneTitle active={active}>Question</PaneTitle>
+      <QuestionContent question={question} width={width} height={height} scroll={scroll} />
+    </Box>
+  );
+}
+
+function AnswerPane({ active, question, selected, width, height, scroll }: AnswerPaneProps) {
+  return (
+    <Box width={width} flexDirection="column">
+      <PaneTitle active={active}>Answers</PaneTitle>
+      <AnswerChoices question={question} selected={selected} width={width} height={height} scroll={scroll} />
+    </Box>
+  );
+}

package/src/tui/screens/result.tsx

@@ -0,0 +1,169 @@
+import { Box, Text, useInput } from "ink";
+import { useState } from "react";
+import type { AnswerRecord, Outcome } from "@/progress/attempt.ts";
+import type { ResultDetail } from "@/preferences/index.ts";
+import type { Difficulty, Question } from "@/questions/question.ts";
+import { difficultyLabels, domainLabels, skillLabels } from "@/questions/taxonomy.ts";
+import { formatDuration } from "@/text/duration.ts";
+import { htmlToText } from "@/text/html.ts";
+import { wrapText } from "@/text/wrap.ts";
+import { PaneTitle, Screen } from "@/tui/components/chrome.tsx";
+import { answerChoiceLayout, clampedScroll, QuestionContent, type ChoiceLine } from "@/tui/components/question-content.tsx";
+import { useTerminalSize } from "@/tui/hooks/use-terminal-size.ts";
+
+type ResultPane = "question" | "review";
+
+type ResultScreenProps = {
+  question: Question;
+  result: AnswerRecord;
+  resultDetail: ResultDetail;
+  onNext: () => void;
+};
+
+type ReviewLine = ChoiceLine & {
+  kind?: "heading" | "explanation";
+};
+
+type ReviewContentProps = {
+  question: Question;
+  result: AnswerRecord;
+  width: number;
+  height: number;
+  scroll: number;
+};
+
+const verdictColorMap: Record<Outcome, "red" | "yellow" | "green"> = {
+  "correct": "green",
+  "corrected": "yellow",
+  "incorrect": "red",
+};
+const difficultyColorMap: Record<Difficulty, "red" | "yellow" | "green"> = {
+  "E": "green",
+  "M": "yellow",
+  "H": "red",
+};
+
+export function ResultScreen({ question, result, resultDetail, onNext }: ResultScreenProps) {
+  const { width, height } = useTerminalSize();
+  const sideBySide = width >= 80;
+  const paneWidth = sideBySide ? Math.floor((width - 3) / 2) : width;
+  const viewportHeight = Math.max(5, height - 8);
+  const contextHeight = answerContextHeight(question, result, resultDetail, paneWidth);
+  const reviewHeight = Math.max(5, viewportHeight - contextHeight - 1);
+  const pageSize = Math.max(4, viewportHeight - 2);
+  const [activePane, setActivePane] = useState<ResultPane>("review");
+  const [questionScroll, setQuestionScroll] = useState(0);
+  const [reviewScroll, setReviewScroll] = useState(0);
+
+  const scrollActivePane = (distance: number) => {
+    const update = (current: number) => Math.max(0, current + distance);
+    if (activePane === "question") setQuestionScroll(update);
+    else setReviewScroll(update);
+  };
+
+  useInput((input, key) => {
+    if (input === "n" || key.return) onNext();
+    else if (key.tab || key.leftArrow || key.rightArrow) {
+      setActivePane((current) => current === "question" ? "review" : "question");
+    } else if (key.upArrow || input === "k") scrollActivePane(-1);
+    else if (key.downArrow || input === "j") scrollActivePane(1);
+    else if (key.pageUp || input === "[") scrollActivePane(-pageSize);
+    else if (key.pageDown || input === "]") scrollActivePane(pageSize);
+  });
+
+  const verdict = result.attempt.outcome.toUpperCase();
+  const verdictColor = verdictColorMap[result.attempt.outcome];
+
+  return (
+    <Screen
+      title="answer"
+      detail={<Text bold color={verdictColor}>{verdict}</Text>}
+      footer="tab/←/→ pane · j/k line · [/] page · enter/n next"
+    >
+      <Box flexDirection={sideBySide ? "row" : "column"} gap={3}>
+        {(sideBySide || activePane === "question") && (
+          <Box width={paneWidth} flexDirection="column">
+            <PaneTitle active={activePane === "question"}>Question</PaneTitle>
+            <QuestionContent question={question} width={paneWidth} height={viewportHeight} scroll={questionScroll} />
+          </Box>
+        )}
+        {(sideBySide || activePane === "review") && (
+          <Box width={paneWidth} flexDirection="column">
+
+            <PaneTitle active={activePane === "review"}>Answer & Explanation</PaneTitle>
+
+            <Box marginTop={1}>
+              <AnswerContext question={question} result={result} resultDetail={resultDetail} />
+            </Box>
+
+            <Box marginTop={1}>
+              <ReviewContent
+                question={question}
+                result={result}
+                width={paneWidth}
+                height={reviewHeight}
+                scroll={reviewScroll}
+              />
+            </Box>
+
+          </Box>
+        )}
+      </Box>
+    </Screen>
+  );
+}
+
+function AnswerContext({ question, result, resultDetail }: { question: Question; result: AnswerRecord; resultDetail: ResultDetail }) {
+  const showDifficulty = resultDetail !== "brief";
+  const showTaxonomy = resultDetail === "detailed";
+  return (
+    <Box flexDirection="column">
+      <Text>
+        <Text bold color="cyan">{formatDuration(result.attempt.durationSeconds)}</Text>
+        {showDifficulty && <Text color="gray">  ·  </Text>}
+        {showDifficulty && <Text color={difficultyColorMap[question.difficulty]}>{difficultyLabels[question.difficulty]} difficulty</Text>}
+      </Text>
+      {showTaxonomy && <Text><Text color="magenta">{question.domain}</Text><Text color="gray">  {domainLabels[question.domain]}</Text></Text>}
+      {showTaxonomy && <Text><Text color="blue">{question.skill}</Text><Text color="gray">  {skillLabels[question.skill]}</Text></Text>}
+    </Box>
+  );
+}
+
+function ReviewContent({ question, result, width, height, scroll }: ReviewContentProps) {
+  const selected = question.choices.findIndex((choice) => choice.key === result.answer);
+  const choiceLines = answerChoiceLayout(question, selected, width).lines;
+  const explanation = htmlToText(question.explanation ?? "No explanation is available.");
+  const lines: ReviewLine[] = [
+    ...choiceLines,
+    { text: " " },
+    { text: " " },
+    { text: "Explanation", kind: "heading" },
+    ...wrapText(explanation, width).map((text) => ({ text, kind: "explanation" as const })),
+  ];
+  const start = clampedScroll(scroll, lines.length, height);
+  return (
+    <Box flexDirection="column">
+      {lines.slice(start, start + height).map((line, index) => {
+        const choice = line.choiceIndex === undefined ? undefined : question.choices[line.choiceIndex];
+        const correct = choice ? question.correctAnswers.includes(choice.key) : false;
+        const chosen = choice?.key === result.answer;
+        const color = line.kind === "heading" ? "cyan" : correct ? "green" : chosen ? "red" : undefined;
+        return (
+          <Text key={`${start}-${index}`} color={color} bold={line.kind === "heading" || correct || chosen}>
+            {line.text}
+          </Text>
+        );
+      })}
+    </Box>
+  );
+}
+
+function answerContextHeight(question: Question, result: AnswerRecord, resultDetail: ResultDetail, width: number): number {
+  const showDifficulty = resultDetail !== "brief";
+  const showTaxonomy = resultDetail === "detailed";
+  const lines = [
+    `${formatDuration(result.attempt.durationSeconds)}${showDifficulty ? `  ·  ${difficultyLabels[question.difficulty]} difficulty` : ""}`,
+    ...showTaxonomy ? [`${question.domain}  ${domainLabels[question.domain]}`, `${question.skill}  ${skillLabels[question.skill]}`] : [],
+  ];
+  return lines.reduce((height, line) => height + Math.max(1, Math.ceil(Bun.stringWidth(line) / width)), 0);
+}

package/src/tui/screens/setup.tsx

@@ -0,0 +1,17 @@
+import { Text, useInput } from "ink";
+import { Screen } from "@/tui/components/chrome.tsx";
+
+export function SetupScreen({ location, onAccept, onDecline }: { location: string; onAccept: () => void; onDecline: () => void }) {
+  useInput((input, key) => {
+    if (input === "y" || key.return) onAccept();
+    else if (input === "n") onDecline();
+  });
+  return (
+    <Screen title="setup" footer="y/enter allow · n decline · q quit" globalNavigation={false}>
+      <Text bold>Keep your SAT progress locally?</Text>
+      <Text color="gray">Questions, answers, focus, and history stay on this computer.</Text>
+      <Text> </Text>
+      <Text color="cyan">{location}</Text>
+    </Screen>
+  );
+}

package/src/tui/screens/summary.tsx

@@ -0,0 +1,16 @@
+import { Box, Text } from "ink";
+import type { Attempt } from "@/progress/attempt.ts";
+import { progressStatistics } from "@/progress/statistics.ts";
+import { Screen } from "@/tui/components/chrome.tsx";
+
+export function SummaryScreen({ attempts }: { attempts: Iterable<Attempt> }) {
+  const stats = progressStatistics(attempts);
+  const rows = [["answered", stats.answered], ["correct", stats.correct], ["incorrect", stats.incorrect], ["corrected", stats.corrected], ["accuracy", `${Math.round(stats.accuracy * 100)}%`], ["average", `${stats.averageSeconds.toFixed(1)}s`]] as const;
+  return (
+    <Screen title="stats" detail={`${stats.mastered}/${stats.answered} mastered`}>
+      <Box flexDirection="column">
+        {rows.map(([label, value]) => <Text key={label}><Text color="gray">{label.padEnd(12)}</Text> <Text bold color={label === "incorrect" ? "red" : label === "corrected" ? "yellow" : "cyan"}>{value}</Text></Text>)}
+      </Box>
+    </Screen>
+  );
+}