komado 0.1.0

package/src/app.js

@@ -0,0 +1,73 @@
+import { useState, useCallback } from 'react';
+import { Box, useApp, useInput } from 'ink';
+import { UIContext } from './ui-context.js';
+import { useStdoutDimensions } from './hooks/useStdoutDimensions.js';
+import { flushProgress } from './state/store.js';
+import { HomeScreen } from './components/screens/HomeScreen.js';
+import { SearchScreen } from './components/screens/SearchScreen.js';
+import { MangaScreen } from './components/screens/MangaScreen.js';
+import { ReaderScreen } from './components/screens/ReaderScreen.js';
+import { SettingsScreen } from './components/screens/SettingsScreen.js';
+import { ContinueScreen } from './components/screens/ContinueScreen.js';
+import { LoginScreen } from './components/screens/LoginScreen.js';
+import { LibraryScreen } from './components/screens/LibraryScreen.js';
+
+const SCREENS = {
+  home: HomeScreen,
+  search: SearchScreen,
+  manga: MangaScreen,
+  reader: ReaderScreen,
+  settings: SettingsScreen,
+  continue: ContinueScreen,
+  login: LoginScreen,
+  library: LibraryScreen,
+};
+
+export function App({ caps = {}, onViewer, initialRoute = null }) {
+  const { exit } = useApp();
+  const dimensions = useStdoutDimensions();
+  const [stack, setStack] = useState(
+    initialRoute ? [{ name: 'home', params: {} }, initialRoute] : [{ name: 'home', params: {} }],
+  );
+  const [typing, setTyping] = useState(false);
+
+  const navigate = useCallback((name, params = {}) => setStack((s) => [...s, { name, params }]), []);
+  const goBack = useCallback(() => setStack((s) => (s.length > 1 ? s.slice(0, -1) : s)), []);
+  const replace = useCallback((name, params = {}) => setStack((s) => [...s.slice(0, -1), { name, params }]), []);
+  const quit = useCallback(() => {
+    flushProgress();
+    exit();
+  }, [exit]);
+
+  // Global keys — suppressed while a text input is focused (`typing`).
+  useInput((input, key) => {
+    if (typing) return;
+    if (input === 'q') quit();
+    else if (key.escape) goBack();
+  });
+
+  const current = stack[stack.length - 1];
+  const Screen = SCREENS[current.name] || HomeScreen;
+  // openReader picks the high-res sixel/kitty viewer when the terminal supports
+  // it (handled outside Ink), else the in-Ink cell reader.
+  const openReader = useCallback(
+    (payload) => {
+      const pixel = onViewer && (caps.sixel || caps.kitty) && caps.chafa
+        && !process.env.KOMADO_NO_PIXEL; // escape hatch → force cell reader
+      if (pixel) onViewer(payload);
+      else navigate('reader', payload);
+    },
+    [onViewer, caps, navigate],
+  );
+  const ctx = { navigate, goBack, replace, exit: quit, setTyping, dimensions, caps, openReader };
+
+  // Remount on each push/pop so screens start with fresh state. The key includes
+  // the depth so navigating back rebuilds the previous screen.
+  return (
+    <UIContext.Provider value={ctx}>
+      <Box flexDirection="column" paddingX={1}>
+        <Screen key={`${stack.length}:${current.name}`} params={current.params} />
+      </Box>
+    </UIContext.Provider>
+  );
+}

package/src/cli.js

@@ -0,0 +1,218 @@
+#!/usr/bin/env node
+import process from 'node:process';
+
+function printHelp() {
+  console.log(`komado — a terminal manga reader (MangaDex + local files)
+
+Usage:
+  komado                 launch the interactive reader
+  komado doctor          print terminal/image capabilities and config
+  komado render <img>    render one image (path or URL) at best fidelity
+  komado --version       print version
+  komado --help          show this help
+
+On a sixel/kitty terminal, opening a chapter launches a full-resolution pixel
+viewer:  ←/→ or a/d page · ↑/↓ pan · N/P chapter · f fit-width/whole-page · q back
+
+Otherwise the in-terminal cell reader is used:
+  ↑/↓ or j/k   scroll        ←/→ or h/l   prev/next page
+  space        page down     N / P        next/prev chapter
+  f            fit-to-screen r            cycle renderer
+  g / G        top / bottom  esc          back        q   quit
+`);
+}
+
+async function doctor() {
+  const { detectCapabilities, probeTerminal } = await import('./render/detect.js');
+  const { paths, ensureDirs } = await import('./config.js');
+  const { getConfig } = await import('./state/store.js');
+  ensureDirs();
+  const caps = detectCapabilities();
+  const cfg = getConfig();
+  const probe = await probeTerminal();
+
+  console.log('komado doctor\n');
+  console.log('Terminal:');
+  console.log(`  TERM=${caps.term}  TERM_PROGRAM=${caps.termProgram || '(none)'}`);
+  console.log(`  truecolor:        ${caps.truecolor}`);
+  if (probe.queried) {
+    console.log(`  kitty graphics:   ${probe.kitty}  (probed)`);
+    console.log(`  sixel:            ${probe.sixel}  (probed)`);
+    if (probe.cellW || probe.cellH) {
+      console.log(`  cell size:        ${probe.cellW ?? '?'}x${probe.cellH ?? '?'} px`);
+    }
+  } else {
+    console.log(`  kitty graphics:   ${caps.kitty}  (env guess — run in a real terminal to probe)`);
+    console.log(`  sixel:            ${caps.sixel}  (env guess — run in a real terminal to probe)`);
+  }
+  console.log(`  chafa:            ${caps.chafa ? caps.chafaVersion : 'not installed'}`);
+  console.log(`  inline backend:   ${caps.chafa ? 'chafa-symbols' : 'half-block'}  (config.renderer=${cfg.renderer})`);
+  if (probe.queried) {
+    const protos = [probe.kitty && 'kitty', probe.sixel && 'sixel'].filter(Boolean);
+    console.log(
+      protos.length
+        ? `\n  → Pixel graphics available (${protos.join(', ')}). Crisp rendering is possible:\n    test it with  node dist/cli.js render <some-image>`
+        : '\n  → No pixel protocol detected — rendering is limited to character cells.',
+    );
+  }
+  console.log('\nPaths:');
+  console.log(`  home:     ${paths.home}`);
+  console.log(`  config:   ${paths.configFile}`);
+  console.log(`  progress: ${paths.progressFile}`);
+  console.log(`  cache:    ${paths.cacheDir}`);
+  console.log('\nConfig:');
+  console.log(`  language:          ${cfg.language}`);
+  console.log(`  dataSaver:         ${cfg.dataSaver}`);
+  console.log(`  renderer:          ${cfg.renderer}`);
+  console.log(`  contentRating:     ${cfg.contentRating.join(', ')}`);
+  console.log(`  localLibraryPaths: ${cfg.localLibraryPaths.length ? cfg.localLibraryPaths.join(', ') : '(none — add in Settings)'}`);
+}
+
+async function renderCmd(target, rest) {
+  if (!target) {
+    console.error('usage: komado render <image-path-or-url> [width]');
+    process.exit(1);
+  }
+  const width = Number(rest[0]) || process.stdout.columns || 80;
+
+  let buf;
+  if (/^https?:/.test(target)) {
+    const { fetchWithBackoff } = await import('./lib/fetchWithBackoff.js');
+    const res = await fetchWithBackoff(target);
+    buf = Buffer.from(await res.arrayBuffer());
+  } else {
+    buf = await (await import('node:fs/promises')).readFile(target);
+  }
+
+  const { detectCapabilities } = await import('./render/detect.js');
+  const caps = detectCapabilities();
+
+  if (caps.chafa && process.stdout.isTTY) {
+    // Let chafa probe the real terminal and pick kitty > sixel > symbols.
+    const os = await import('node:os');
+    const path = await import('node:path');
+    const { writeFile, unlink } = await import('node:fs/promises');
+    const sharp = (await import('sharp')).default;
+    const { imageSize } = await import('./render/image.js');
+    const { spawnChafaToTerminal } = await import('./render/chafa.js');
+
+    const { width: iw, height: ih } = await imageSize(buf);
+    const rows = Math.max(1, Math.round(((ih / iw) * width) / 2));
+    const tmp = path.join(os.tmpdir(), `komado-render-${Date.now()}.png`);
+    await writeFile(tmp, await sharp(buf).png().toBuffer());
+    spawnChafaToTerminal(tmp, { cols: width, rows });
+    await unlink(tmp).catch(() => {});
+  } else {
+    const { renderHalfBlock } = await import('./render/halfblock.js');
+    const out = await renderHalfBlock(buf, { cols: width });
+    process.stdout.write(out.lines.join('\n') + '\n');
+  }
+}
+
+async function runApp() {
+  const { ensureDirs, paths } = await import('./config.js');
+  const { appendFileSync } = await import('node:fs');
+  ensureDirs();
+
+  if (!process.stdout.isTTY) {
+    console.error('komado needs an interactive terminal (TTY). Run it directly in your terminal.');
+    process.exit(1);
+  }
+
+  // Always record crashes (not gated on KOMADO_DEBUG) so failures aren't lost
+  // when the alt-screen is torn down.
+  const logCrash = (label, err) => {
+    try {
+      appendFileSync(paths.logFile, `[${new Date().toISOString()}] ${label}: ${err?.stack || err}\n`);
+    } catch { /* ignore */ }
+  };
+
+  // Probe the terminal for pixel-protocol support before Ink grabs stdin.
+  // KOMADO_FORCE_PIXEL skips the probe (useful if detection is wrong, or for
+  // exercising the viewer in a dumb terminal).
+  const { detectCapabilities, probeTerminal } = await import('./render/detect.js');
+  const probed = process.env.KOMADO_FORCE_PIXEL
+    ? { queried: true, sixel: true, kitty: false }
+    : await probeTerminal();
+  const caps = { ...detectCapabilities(), ...probed };
+
+  const { render } = await import('ink');
+  const { App } = await import('./app.js');
+  const { runViewer } = await import('./sixel-reader.js'); // pre-import (no mid-loop gap)
+
+  // Alternate screen + hidden cursor for a clean, scrollback-free experience.
+  const restore = () => process.stdout.write('\x1b[?25h\x1b[?1049l');
+  process.stdout.write('\x1b[?1049h\x1b[?25l');
+  process.on('exit', restore);
+
+  try {
+    // Browse in Ink; when a chapter is opened on a pixel-capable terminal the
+    // app requests the sixel viewer: unmount Ink → run viewer → remount Ink.
+    let resumeRoute = null;
+    for (;;) {
+      let viewerRequest = null;
+      let instance;
+      const onViewer = (payload) => {
+        viewerRequest = payload;
+        // Defer so we don't unmount Ink in the middle of its input dispatch.
+        setImmediate(() => {
+          try { instance.unmount(); } catch (err) { logCrash('unmount failed', err); }
+        });
+      };
+      instance = render(<App caps={caps} onViewer={onViewer} initialRoute={resumeRoute} />, {
+        exitOnCtrlC: true,
+      });
+
+      try {
+        await instance.waitUntilExit();
+      } catch (err) {
+        logCrash('ink exited with error', err); // don't let an Ink reject kill us
+      }
+
+      if (!viewerRequest) break; // normal quit
+
+      process.stdin.resume(); // keep the event loop alive across the handoff
+      try {
+        resumeRoute = await runViewer({ ...viewerRequest, caps });
+      } catch (err) {
+        logCrash('viewer crashed', err);
+        resumeRoute = { name: 'manga', params: { sourceId: viewerRequest.sourceId, manga: viewerRequest.manga } };
+      }
+    }
+  } finally {
+    restore();
+    process.removeListener('exit', restore);
+  }
+}
+
+async function main() {
+  const [cmd, ...rest] = process.argv.slice(2);
+  switch (cmd) {
+    case '--help':
+    case '-h':
+      return printHelp();
+    case '--version':
+    case '-v': {
+      const { readFileSync } = await import('node:fs');
+      const url = new URL('../package.json', import.meta.url);
+      return console.log(JSON.parse(readFileSync(url, 'utf8')).version);
+    }
+    case 'doctor':
+      return doctor();
+    case 'render':
+      return renderCmd(rest[0], rest.slice(1));
+    default:
+      return runApp();
+  }
+}
+
+main().catch(async (err) => {
+  process.stdout.write('\x1b[?25h\x1b[?1049l');
+  try {
+    const { appendFileSync } = await import('node:fs');
+    const { paths } = await import('./config.js');
+    appendFileSync(paths.logFile, `[${new Date().toISOString()}] FATAL: ${err?.stack || err}\n`);
+  } catch { /* ignore */ }
+  console.error(err);
+  process.exit(1);
+});

package/src/components/List.js

@@ -0,0 +1,60 @@
+import { useState, useEffect } from 'react';
+import { Box, Text, useInput } from 'ink';
+
+// Reusable windowed, keyboard-driven list. The parent supplies `renderItem`
+// (which must set a `key`) and gets `onSelect`/`onHighlight` callbacks.
+// Only the active instance consumes input, so multiple lists can coexist.
+export function List({
+  items = [],
+  onSelect,
+  onHighlight,
+  renderItem,
+  height = 12,
+  isActive = true,
+  emptyText = 'Nothing here yet.',
+}) {
+  const [index, setIndex] = useState(0);
+  const count = items.length;
+  // Clamp on read instead of in an effect, so a shrinking list can't leave the
+  // selection out of range (and there's no cascading setState-in-effect).
+  const selected = count ? Math.min(index, count - 1) : 0;
+
+  // Notify the parent of the highlighted item when the selection (or list size)
+  // changes. Keyed on the index + count (primitives) — NOT the `items` array,
+  // whose reference changes every render in callers that rebuild it inline. If
+  // `items` were a dep, a parent whose onHighlight calls setState would loop:
+  // render → new items ref → effect → setState → render → … (max update depth).
+  useEffect(() => {
+    if (count) onHighlight?.(items[selected], selected);
+    // items/onHighlight intentionally omitted; see above.
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [selected, count]);
+
+  useInput((input, key) => {
+    if (!count) return;
+    if (key.downArrow || input === 'j') setIndex(Math.min(count - 1, selected + 1));
+    else if (key.upArrow || input === 'k') setIndex(Math.max(0, selected - 1));
+    else if (key.pageDown) setIndex(Math.min(count - 1, selected + height));
+    else if (key.pageUp) setIndex(Math.max(0, selected - height));
+    else if (input === 'g') setIndex(0);
+    else if (input === 'G') setIndex(count - 1);
+    else if (key.return) onSelect?.(items[selected], selected);
+  }, { isActive });
+
+  if (!count) {
+    return <Text dimColor>{emptyText}</Text>;
+  }
+
+  // Vertical window centred on the selection.
+  const start = Math.max(0, Math.min(selected - Math.floor(height / 2), Math.max(0, count - height)));
+  const slice = items.slice(start, start + height);
+
+  return (
+    <Box flexDirection="column">
+      {slice.map((item, i) => renderItem(item, start + i === selected, start + i))}
+      {count > height ? (
+        <Text key="more" dimColor>{`  · ${selected + 1}/${count} ·`}</Text>
+      ) : null}
+    </Box>
+  );
+}

package/src/components/screens/ContinueScreen.js

@@ -0,0 +1,73 @@
+import { useState } from 'react';
+import { Box, Text } from 'ink';
+import { useUI } from '../../ui-context.js';
+import { getSource } from '../../sources/index.js';
+import { getAllProgress } from '../../state/store.js';
+import { makeManga } from '../../domain/shape.js';
+import { List } from '../List.js';
+import { Header, Spinner, ErrorView, KeyHints } from '../ui.js';
+import { truncate, relativeTime } from '../../lib/text.js';
+
+export function ContinueScreen() {
+  const ui = useUI();
+  const entries = getAllProgress();
+  const [loading, setLoading] = useState(false);
+  const [error, setError] = useState(null);
+
+  const open = async (entry) => {
+    const source = getSource(entry.source);
+    setLoading(true);
+    setError(null);
+    try {
+      const [manga, chRes] = await Promise.all([
+        source
+          .getManga(entry.mangaId)
+          .catch(() => makeManga({ source: entry.source, id: entry.mangaId, title: entry.mangaTitle })),
+        source.listChapters(entry.mangaId, { limit: 500 }),
+      ]);
+      const idx = chRes.data.findIndex((c) => c.id === entry.chapterId);
+      ui.openReader({
+        sourceId: entry.source,
+        manga,
+        chapters: chRes.data,
+        chapterIndex: Math.max(0, idx),
+        startPage: entry.page || 0,
+      });
+    } catch (err) {
+      setError(err);
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  if (loading) {
+    return (
+      <Box flexDirection="column">
+        <Header title="Continue reading" />
+        <Spinner label="Opening" />
+      </Box>
+    );
+  }
+
+  return (
+    <Box flexDirection="column">
+      <Header title="Continue reading" subtitle="pick up where you left off" />
+      {error ? <ErrorView error={error} /> : null}
+      <List
+        items={entries}
+        height={Math.max(5, (ui.dimensions.rows || 24) - 7)}
+        onSelect={open}
+        emptyText="No reading history yet."
+        renderItem={(e, active) => (
+          <Box key={`${e.source}:${e.mangaId}`} justifyContent="space-between">
+            <Text inverse={active} color={active ? 'cyanBright' : undefined}>
+              {` ${truncate(e.mangaTitle || e.mangaId, 40)} · ${e.chapterNumber != null ? `Ch.${e.chapterNumber}` : 'Oneshot'} p.${(e.page || 0) + 1} `}
+            </Text>
+            <Text dimColor>{relativeTime(e.updatedAt)}</Text>
+          </Box>
+        )}
+      />
+      <KeyHints hints={[['↑↓', 'move'], ['enter', 'resume'], ['esc', 'back']]} />
+    </Box>
+  );
+}

package/src/components/screens/HomeScreen.js

@@ -0,0 +1,54 @@
+import { Box, Text } from 'ink';
+import { useUI } from '../../ui-context.js';
+import { List } from '../List.js';
+import { Header, KeyHints } from '../ui.js';
+import { getAllProgress } from '../../state/store.js';
+import { isLoggedIn } from '../../sources/mangadex/auth.js';
+
+export function HomeScreen() {
+  const ui = useUI();
+  const hasProgress = getAllProgress().length > 0;
+
+  const items = [
+    { id: 'search', label: 'Search MangaDex', hint: 'online catalog' },
+    { id: 'browse', label: 'Popular on MangaDex', hint: 'most followed' },
+    ...(isLoggedIn() ? [{ id: 'library', label: 'My Library (MangaDex)', hint: 'your follows' }] : []),
+    { id: 'local', label: 'Local library', hint: 'your CBZ / folders' },
+    ...(hasProgress ? [{ id: 'continue', label: 'Continue reading', hint: 'resume' }] : []),
+    { id: 'settings', label: 'Settings', hint: 'config & library paths' },
+    { id: 'quit', label: 'Quit', hint: '' },
+  ];
+
+  const onSelect = (item) => {
+    switch (item.id) {
+      case 'search': return ui.navigate('search', { sourceId: 'mangadex', mode: 'search' });
+      case 'browse': return ui.navigate('search', { sourceId: 'mangadex', mode: 'browse' });
+      case 'library': return ui.navigate('library', { sourceId: 'mangadex' });
+      case 'local': return ui.navigate('search', { sourceId: 'local', mode: 'browse' });
+      case 'continue': return ui.navigate('continue');
+      case 'settings': return ui.navigate('settings');
+      case 'quit': return ui.exit();
+      default: return undefined;
+    }
+  };
+
+  return (
+    <Box flexDirection="column">
+      <Header title="komado" subtitle="a terminal manga reader · MangaDex + local files" />
+      <List
+        items={items}
+        height={items.length}
+        onSelect={onSelect}
+        renderItem={(item, active) => (
+          <Box key={item.id}>
+            <Text inverse={active} color={active ? 'cyanBright' : undefined}>
+              {` ${active ? '›' : ' '} ${item.label} `}
+            </Text>
+            {item.hint ? <Text dimColor>{`  ${item.hint}`}</Text> : null}
+          </Box>
+        )}
+      />
+      <KeyHints hints={[['↑↓', 'move'], ['enter', 'select'], ['q', 'quit']]} />
+    </Box>
+  );
+}

package/src/components/screens/LibraryScreen.js

@@ -0,0 +1,79 @@
+import { useState, useEffect, useRef } from 'react';
+import { Box, Text } from 'ink';
+import { useUI } from '../../ui-context.js';
+import { getSource } from '../../sources/index.js';
+import { List } from '../List.js';
+import { Header, Spinner, ErrorView, KeyHints } from '../ui.js';
+import { truncate } from '../../lib/text.js';
+
+const PAGE = 32;
+
+// The signed-in user's MangaDex follows. Same browse/paginate shape as the
+// search screen, minus the query box — getFollows is just another envelope.
+export function LibraryScreen({ params }) {
+  const sourceId = params?.sourceId || 'mangadex';
+  const ui = useUI();
+  const source = getSource(sourceId);
+
+  const [results, setResults] = useState([]);
+  const [pagination, setPagination] = useState(null);
+  const [loading, setLoading] = useState(true);
+  const [error, setError] = useState(null);
+
+  // Monotonic request id guards against out-of-order responses.
+  const reqId = useRef(0);
+  const fetchPage = async (offset, append) => {
+    const rid = ++reqId.current;
+    const ctrl = new AbortController();
+    setLoading(true);
+    setError(null);
+    try {
+      const res = await source.getFollows({ offset, limit: PAGE, signal: ctrl.signal });
+      if (rid !== reqId.current) return;
+      setResults((prev) => (append ? [...prev, ...res.data] : res.data));
+      setPagination(res.pagination);
+    } catch (err) {
+      if (rid === reqId.current) setError(err);
+    } finally {
+      if (rid === reqId.current) setLoading(false);
+    }
+  };
+
+  useEffect(() => { fetchPage(0, false); }, []);
+
+  const loadMore = () => {
+    if (loading || !pagination?.hasMore) return;
+    fetchPage(pagination.offset + pagination.limit, true);
+  };
+  const onHighlight = (_item, index) => {
+    if (index >= results.length - 2) loadMore(); // prefetch near the end
+  };
+
+  const listHeight = Math.max(4, (ui.dimensions.rows || 24) - 8);
+
+  return (
+    <Box flexDirection="column">
+      <Header title="My Library" subtitle="manga you follow on MangaDex" />
+      {loading && !results.length ? <Spinner label="Loading your follows" /> : null}
+      {error ? <ErrorView error={error} /> : null}
+      {!error ? (
+        <List
+          items={results}
+          height={listHeight}
+          onSelect={(m) => ui.navigate('manga', { sourceId, manga: m })}
+          onHighlight={onHighlight}
+          emptyText={loading ? ' ' : 'You are not following any manga yet.'}
+          renderItem={(m, active) => (
+            <Box key={m.key}>
+              <Text inverse={active} color={active ? 'cyanBright' : undefined}>
+                {` ${truncate(m.title, Math.max(20, (ui.dimensions.cols || 80) - 24))} `}
+              </Text>
+              <Text dimColor>{`  ${m.status || ''}`}</Text>
+            </Box>
+          )}
+        />
+      ) : null}
+      <KeyHints hints={[['↑↓', 'move'], ['enter', 'open'], ['esc', 'back']]} />
+    </Box>
+  );
+}

package/src/components/screens/LoginScreen.js

@@ -0,0 +1,92 @@
+import { useState, useEffect } from 'react';
+import { Box, Text, useInput } from 'ink';
+import TextInput from 'ink-text-input';
+import { useUI } from '../../ui-context.js';
+import { login } from '../../sources/mangadex/auth.js';
+import { Header, Spinner, ErrorView, KeyHints } from '../ui.js';
+
+// MangaDex needs an OAuth2 "personal client" (client id/secret registered at
+// mangadex.org/settings) plus the account's username/password. Secret and
+// password fields are masked.
+const FIELDS = [
+  { key: 'clientId', label: 'Client ID', mask: false },
+  { key: 'clientSecret', label: 'Client Secret', mask: true },
+  { key: 'username', label: 'Username / email', mask: false },
+  { key: 'password', label: 'Password', mask: true },
+];
+
+export function LoginScreen() {
+  const ui = useUI();
+  const [vals, setVals] = useState({ clientId: '', clientSecret: '', username: '', password: '' });
+  const [idx, setIdx] = useState(0);
+  const [busy, setBusy] = useState(false);
+  const [error, setError] = useState(null);
+
+  // The whole screen is a form — keep global keys (q / Esc) suppressed.
+  useEffect(() => {
+    ui.setTyping(true);
+    return () => ui.setTyping(false);
+  }, []);
+
+  const setField = (key) => (v) => setVals((s) => ({ ...s, [key]: v }));
+
+  const submit = async () => {
+    if (busy) return;
+    if (idx < FIELDS.length - 1) { setIdx(idx + 1); return; }
+    if (FIELDS.some((f) => !vals[f.key].trim())) {
+      setError(new Error('All four fields are required.'));
+      return;
+    }
+    setBusy(true);
+    setError(null);
+    try {
+      await login({
+        clientId: vals.clientId.trim(),
+        clientSecret: vals.clientSecret.trim(),
+        username: vals.username.trim(),
+        password: vals.password,
+      });
+      ui.goBack();
+    } catch (err) {
+      setError(err);
+      setBusy(false);
+    }
+  };
+
+  useInput((input, key) => {
+    if (busy) return;
+    if (key.escape) ui.goBack();
+    else if (key.tab || key.downArrow) setIdx((i) => (i + 1) % FIELDS.length);
+    else if (key.upArrow) setIdx((i) => (i - 1 + FIELDS.length) % FIELDS.length);
+  });
+
+  return (
+    <Box flexDirection="column">
+      <Header title="Log in to MangaDex" subtitle="OAuth2 personal client" />
+      <Box flexDirection="column" marginBottom={1}>
+        <Text dimColor>Create a personal client at mangadex.org/settings → API Clients,</Text>
+        <Text dimColor>then enter its id + secret with your MangaDex login below.</Text>
+        <Text dimColor>(A new client may need staff approval before it works.)</Text>
+      </Box>
+      {FIELDS.map((f, i) => (
+        <Box key={f.key}>
+          <Box width={16}>
+            <Text color={i === idx ? 'cyanBright' : undefined}>{`${i === idx ? '› ' : '  '}${f.label}`}</Text>
+          </Box>
+          <Text dimColor>: </Text>
+          <TextInput
+            value={vals[f.key]}
+            onChange={setField(f.key)}
+            onSubmit={submit}
+            focus={i === idx && !busy}
+            mask={f.mask ? '*' : undefined}
+            placeholder={i === idx ? 'type…' : ''}
+          />
+        </Box>
+      ))}
+      {busy ? <Box marginTop={1}><Spinner label="Signing in" /></Box> : null}
+      {error ? <Box marginTop={1}><ErrorView error={error} /></Box> : null}
+      <KeyHints hints={[['enter', 'next / submit'], ['tab ↑↓', 'fields'], ['esc', 'cancel']]} />
+    </Box>
+  );
+}