@0xcraft/powershot 1.0.0

package/dist/report/compact.js

@@ -0,0 +1,15 @@
+/**
+ * `src/a.ts:42:9: error: message [check]` — the shape compilers have emitted for
+ * decades, and the whole IDE integration. Problem matchers, errorformat and every
+ * "jump to next error" already parse it, so there is no extension to maintain.
+ */
+export function compact(findings) {
+    return (findings
+        .map((f) => {
+        const severity = f.severity === 'critical' || f.severity === 'high' ? 'error' : f.severity === 'medium' ? 'warning' : 'info';
+        const column = f.span?.column ?? 1;
+        return f.file + ':' + f.line + ':' + column + ': ' + severity + ': ' + f.title + ' [' + f.check + ']';
+    })
+        .join('\n') + (findings.length > 0 ? '\n' : ''));
+}
+//# sourceMappingURL=compact.js.map

package/dist/report/highlight.js

@@ -0,0 +1,54 @@
+import { ts } from 'ts-morph';
+import { COLOR, gray, green, magenta, yellow } from './ansi.js';
+/**
+ * Syntax highlighting through the TypeScript scanner rather than a regex or a new
+ * dependency. The compiler is already the project's oracle for analysis; it ships a
+ * real lexer, so template literals, regexes and nested comments tokenize correctly
+ * instead of approximately.
+ */
+function colorFor(kind, text) {
+    const K = ts.SyntaxKind;
+    if (kind === K.SingleLineCommentTrivia || kind === K.MultiLineCommentTrivia)
+        return gray(text);
+    if (kind === K.StringLiteral ||
+        kind === K.NoSubstitutionTemplateLiteral ||
+        kind === K.TemplateHead ||
+        kind === K.TemplateMiddle ||
+        kind === K.TemplateTail ||
+        kind === K.RegularExpressionLiteral)
+        return green(text);
+    if (kind === K.NumericLiteral || kind === K.BigIntLiteral)
+        return yellow(text);
+    if (kind >= K.FirstKeyword && kind <= K.LastKeyword)
+        return magenta(text);
+    if (kind >= K.FirstPunctuation && kind <= K.LastPunctuation)
+        return gray(text);
+    return text; // identifiers and whitespace stay plain, so names read as the content
+}
+/**
+ * Highlighting is a display nicety, so it must never break a review: any scanner
+ * trouble falls back to the original text rather than throwing.
+ */
+export function highlight(code, jsx = false) {
+    if (!COLOR || code === '')
+        return code;
+    try {
+        const scanner = ts.createScanner(ts.ScriptTarget.Latest, 
+        /* skipTrivia */ false, jsx ? ts.LanguageVariant.JSX : ts.LanguageVariant.Standard, code);
+        let out = '';
+        let token = scanner.scan();
+        // the guard bounds a pathological fragment; a code frame is only a few lines
+        for (let i = 0; token !== ts.SyntaxKind.EndOfFileToken && i < 4000; i++) {
+            out += colorFor(token, scanner.getTokenText());
+            token = scanner.scan();
+        }
+        return out === '' ? code : out;
+    }
+    catch {
+        return code;
+    }
+}
+export function isJsx(file) {
+    return file.endsWith('.tsx') || file.endsWith('.jsx');
+}
+//# sourceMappingURL=highlight.js.map

package/dist/report/markdown.js

@@ -0,0 +1,113 @@
+const MARK = { verified: '▣', judged: '▚' };
+/** Untrusted prose encoded as literal CommonMark text. */
+function text(s) {
+    return s
+        .replace(/\r?\n/g, ' ')
+        .replace(/[!"#$%&'()*+,\-./:;<=>?@[\\\]^_`{|}~]/g, '\\$&');
+}
+/** A path inside a code span: only a backtick or a newline can end one. */
+function path(s) {
+    return s.replace(/[`\r\n]/g, '');
+}
+/** A repository-relative URL whose untrusted path cannot become a scheme or fragment. */
+function href(s) {
+    const segment = (part) => (part === '.' || part === '..' ? part.replace(/\./g, '%2E') : encodeURIComponent(part))
+        .replace(/[!'()*]/g, (c) => '%' + c.charCodeAt(0).toString(16).toUpperCase());
+    return './' + path(s).split('/').map(segment).join('/');
+}
+/**
+ * A fence long enough that its content cannot close it.
+ *
+ * Indenting the content does not work: CommonMark lets a closing fence carry up to
+ * three spaces, so a frame line holding a fence ended the block anyway and everything
+ * below it rendered as markup. The rule the spec gives is to open with more backticks
+ * than the longest run inside.
+ */
+function fenceFor(lines, info = '') {
+    const longest = Math.max(0, ...lines.flatMap((l) => [...l.matchAll(/`+/g)].map((m) => m[0].length)));
+    const bar = '`'.repeat(Math.max(3, longest + 1));
+    return { open: bar + info, close: bar };
+}
+function languageFor(file) {
+    const ext = /\.([^.\/]+)$/.exec(file.toLowerCase())?.[1];
+    return {
+        ts: 'typescript', tsx: 'tsx', mts: 'typescript', cts: 'typescript',
+        js: 'javascript', jsx: 'jsx', mjs: 'javascript', cjs: 'javascript',
+        py: 'python', pyi: 'python', rb: 'ruby', go: 'go', java: 'java',
+        rs: 'rust', cpp: 'cpp', cc: 'cpp', cxx: 'cpp', hpp: 'cpp',
+        c: 'c', h: 'c', cs: 'csharp', php: 'php', kt: 'kotlin', kts: 'kotlin',
+        swift: 'swift', sol: 'solidity',
+    }[ext ?? ''] ?? '';
+}
+function group(findings) {
+    const out = new Map();
+    for (const f of findings) {
+        const list = out.get(f.file) ?? [];
+        list.push(f);
+        out.set(f.file, list);
+    }
+    for (const list of out.values())
+        list.sort((a, b) => a.line - b.line);
+    return out;
+}
+export function markdown(findings, run) {
+    // "No findings" from a run that could not look is the one thing this must never
+    // say on its own — the reader takes a comment at face value, and a red job beside
+    // a green comment is read as a flaky job
+    const incomplete = run !== undefined && run.state !== 'complete';
+    const banner = incomplete
+        ? [
+            '> [!WARNING]',
+            '> **This review is ' + text(run.state) + ' — not a verdict.** Something was not looked at:',
+            ...run.notLookedAt.slice(0, 8).map((f) => '> - ' + text(f)),
+            '',
+        ]
+        : [];
+    if (findings.length === 0) {
+        return ['## PowerShot', '', ...banner, incomplete ? 'No findings *from what it managed to review*.' : 'No findings.', ''].join('\n');
+    }
+    const verified = findings.filter((f) => f.class === 'verified').length;
+    const judged = findings.length - verified;
+    const out = ['## PowerShot', '', ...banner];
+    out.push('**' + verified + ' verified** (deterministic, 0 tokens) · **' + judged + ' judged** (agent)', '');
+    for (const [file, list] of group(findings)) {
+        out.push('### `' + path(file) + '`', '');
+        for (const f of list) {
+            out.push(MARK[f.class] +
+                ' **' +
+                f.severity.toUpperCase() +
+                '** · `' +
+                f.check.replace(/`/g, '') +
+                '` · ' +
+                f.confidence +
+                ' — [' +
+                text(path(file)) +
+                ':' +
+                f.line +
+                '](' +
+                href(file) +
+                '#L' +
+                f.line +
+                ')');
+            out.push('', text(f.title), '');
+            if (f.frame) {
+                const fence = fenceFor(f.frame.lines, languageFor(file));
+                out.push(fence.open, ...f.frame.lines, fence.close, '');
+            }
+            if (f.evidence)
+                out.push('> _' + text(f.evidence.oracle) + '_: ' + text(f.evidence.detail), '');
+            if (f.suggestion !== undefined) {
+                // GitHub and GitLab both render this as a one-click "apply", so a finding the
+                // checker knows the answer to becomes a fix rather than an instruction
+                const fence = fenceFor([f.suggestion], 'suggestion');
+                out.push(fence.open, f.suggestion, fence.close, '');
+            }
+            else if (f.fix) {
+                const fence = fenceFor([f.fix]);
+                out.push(fence.open, f.fix, fence.close, '');
+            }
+        }
+    }
+    return out.join('\n');
+}
+//# sourceMappingURL=markdown.js.map

package/dist/report/sarif.js

@@ -0,0 +1,66 @@
+import { PACKAGE_HOMEPAGE } from '#app/package-meta.js';
+/** SARIF has three levels; map ours onto them without inventing precision. */
+function level(severity) {
+    if (severity === 'critical' || severity === 'high')
+        return 'error';
+    if (severity === 'medium')
+        return 'warning';
+    return 'note';
+}
+const DESCRIPTIONS = {
+    'phantom-api': 'Calls an API that does not exist — hallucinated method, property, or arity',
+    'phantom-dep': 'Imports a package that is not a declared dependency',
+    reinvented: 'Declares a helper that already exists in the repository',
+    'dropped-guard': 'A guard present before the change is gone after it',
+    'swallowed-error': 'Error handling that discards the failure',
+    'vacuous-test': 'A test that asserts nothing, or mocks the unit under test',
+    'assertion-drift': 'An expected value edited to match new output',
+    'plausible-logic': 'Code that reads correctly but behaves incorrectly',
+};
+/**
+ * SARIF 2.1.0 — the format GitHub code scanning ingests, which turns findings into
+ * inline PR annotations. Only the fields consumers actually read are emitted.
+ */
+export function sarif(findings) {
+    const checks = [...new Set(findings.map((f) => f.check))].sort();
+    const doc = {
+        $schema: 'https://json.schemastore.org/sarif-2.1.0.json',
+        version: '2.1.0',
+        runs: [
+            {
+                tool: {
+                    driver: {
+                        name: 'PowerShot',
+                        informationUri: PACKAGE_HOMEPAGE,
+                        rules: checks.map((check) => ({
+                            id: check,
+                            name: check,
+                            shortDescription: { text: DESCRIPTIONS[check] ?? check },
+                            properties: {
+                                tags: [findings.find((f) => f.check === check)?.class ?? 'verified'],
+                            },
+                        })),
+                    },
+                },
+                results: findings.map((f) => ({
+                    ruleId: f.check,
+                    level: level(f.severity),
+                    message: {
+                        text: f.evidence ? f.title + ' (' + f.evidence.oracle + ': ' + f.evidence.detail + ')' : f.title,
+                    },
+                    locations: [
+                        {
+                            physicalLocation: {
+                                artifactLocation: { uri: f.file },
+                                region: { startLine: f.line },
+                            },
+                        },
+                    ],
+                    properties: { class: f.class, confidence: f.confidence, severity: f.severity },
+                })),
+            },
+        ],
+    };
+    return JSON.stringify(doc, null, 2) + '\n';
+}
+//# sourceMappingURL=sarif.js.map

package/dist/report/terminal.js

@@ -0,0 +1,170 @@
+import { bold, brightRed, dim, gray, red, steel, yellow } from './ansi.js';
+import { highlight, isJsx } from './highlight.js';
+const SEVERITY_COLOR = {
+    critical: brightRed,
+    high: red,
+    medium: yellow,
+    low: gray,
+    info: gray,
+};
+function width() {
+    // stdout.columns is undefined when piped; COLUMNS is the conventional fallback
+    const columns = process.stdout.columns ?? (Number(process.env.COLUMNS) || 80);
+    return Math.max(60, Math.min(columns, 100));
+}
+function truncate(text, max) {
+    return text.length <= max ? text : text.slice(0, Math.max(0, max - 1)) + '…';
+}
+/**
+ * The title is the finding, so it wraps instead of truncating — losing the end of
+ * "…resolves as success" would cost the reader the point of the sentence.
+ */
+export function wrap(text, max) {
+    const words = text.split(/\s+/);
+    const lines = [];
+    let line = '';
+    for (const word of words) {
+        if (line === '')
+            line = word;
+        else if (line.length + 1 + word.length <= max)
+            line += ' ' + word;
+        else {
+            lines.push(line);
+            line = word;
+        }
+    }
+    if (line)
+        lines.push(line);
+    return lines.length > 0 ? lines : [''];
+}
+function groupByFile(findings) {
+    const out = new Map();
+    for (const f of findings) {
+        const list = out.get(f.file) ?? [];
+        list.push(f);
+        out.set(f.file, list);
+    }
+    for (const list of out.values())
+        list.sort((a, b) => a.line - b.line);
+    return out;
+}
+/**
+ * The code frame. Only the offending line is syntax-highlighted; its context is
+ * plain gray, so the eye lands on the line under review without needing a marker
+ * to compete with the code.
+ */
+function emitFrame(out, f, w) {
+    if (!f.frame)
+        return;
+    const { firstLine, lines } = f.frame;
+    const gutterWidth = String(firstLine + lines.length - 1).length;
+    const room = w - gutterWidth - 9;
+    out.push('');
+    lines.forEach((text, i) => {
+        const lineNo = firstLine + i;
+        const isTarget = lineNo === f.line;
+        const gutter = String(lineNo).padStart(gutterWidth);
+        const arrow = isTarget ? SEVERITY_COLOR[f.severity]('❯') : ' ';
+        const shown = truncate(text, room);
+        const body = isTarget ? highlight(shown, isJsx(f.file)) : gray(shown);
+        out.push('   ' + arrow + ' ' + dim(gutter + ' │ ') + body);
+        // the caret sits directly under the token it marks, so "which part of this line"
+        // never has to be guessed from the message
+        if (isTarget && f.frame?.caret) {
+            const { offset, length } = f.frame.caret;
+            if (offset < shown.length) {
+                const run = Math.max(1, Math.min(length, shown.length - offset));
+                out.push('     ' + dim(' '.repeat(gutterWidth) + ' │ ') + ' '.repeat(offset) + SEVERITY_COLOR[f.severity]('^'.repeat(run)));
+            }
+        }
+    });
+}
+function emitEvidence(out, f, w) {
+    if (!f.evidence)
+        return;
+    const lead = '     ╰ ';
+    const indent = ' '.repeat(lead.length);
+    wrap(f.evidence.oracle + ': ' + f.evidence.detail, w - lead.length - 2).forEach((line, i) => out.push(dim((i === 0 ? lead : indent) + line)));
+}
+function severityCounts(findings) {
+    const order = ['critical', 'high', 'medium', 'low', 'info'];
+    return order
+        .map((s) => ({ s, n: findings.filter((f) => f.severity === s).length }))
+        .filter(({ n }) => n > 0)
+        .map(({ s, n }) => SEVERITY_COLOR[s](String(n) + ' ' + s))
+        .join(dim(' · '));
+}
+/**
+ * The review view: findings grouped under the file they belong to, each showing the
+ * code it is about. Seeing the line is what makes a finding actionable without
+ * opening an editor, so the frame is the centre of the layout, not a decoration.
+ */
+export function terminal(findings, opts) {
+    const w = width();
+    const rule = dim(' ' + '─'.repeat(w - 2));
+    const out = [''];
+    out.push(' ' + bold('PowerShot') + dim('  ·  ' + opts.subtitle));
+    out.push(rule);
+    const incomplete = opts.state !== 'complete';
+    if (findings.length === 0) {
+        out.push('', incomplete
+            ? ' ' + yellow('!') + '  No findings — but this review is ' + opts.state + ', not a verdict.'
+            : ' ' + steel('✔') + '  No findings.');
+        for (const reason of opts.notLookedAt)
+            out.push(dim('    ' + reason));
+        out.push('');
+        return out.join('\n');
+    }
+    for (const [file, list] of groupByFile(findings)) {
+        out.push('', ' ' + bold(file));
+        for (const f of list) {
+            const isVerified = f.class === 'verified';
+            const mark = isVerified ? steel('▣') : red('▚');
+            const badge = SEVERITY_COLOR[f.severity](f.severity.toUpperCase().padEnd(8));
+            const origin = isVerified ? steel(f.check) : red(f.check);
+            out.push('');
+            out.push('  ' + mark + ' ' + badge + origin + dim(' · ' + f.confidence));
+            for (const line of wrap(f.title, w - 6))
+                out.push('    ' + line);
+            emitFrame(out, f, w);
+            emitEvidence(out, f, w);
+            if (f.fix) {
+                const [head, ...rest] = wrap(f.fix, w - 7);
+                out.push('    ' + yellow('→ ') + head);
+                for (const line of rest)
+                    out.push('      ' + line);
+            }
+        }
+    }
+    const tally = findings.length + (findings.length === 1 ? ' finding' : ' findings') + dim('   ') + severityCounts(findings);
+    const split = steel(String(opts.verified) + ' verified') + dim(' · ') + red(String(opts.judged) + ' judged');
+    out.push('', rule);
+    out.push(' ' + tally + dim('   ·   ') + split);
+    if (incomplete) {
+        out.push('');
+        out.push(' ' + yellow('! this review is ' + opts.state + ' — findings may be missing'));
+        for (const reason of opts.notLookedAt)
+            out.push(dim('   ' + reason));
+    }
+    out.push('');
+    return out.join('\n');
+}
+export function progress(line) {
+    return dim(' ◇ ' + line);
+}
+export function stage(label) {
+    const tty = process.stderr.isTTY === true;
+    const started = Date.now();
+    if (tty)
+        process.stderr.write(dim(' ◇ ' + label.padEnd(9) + ' …'));
+    return (result) => {
+        const ms = Date.now() - started;
+        const took = ms >= 100 ? dim('  (' + (ms >= 1000 ? (ms / 1000).toFixed(1) + 's' : ms + 'ms') + ')') : '';
+        if (tty) {
+            process.stderr.clearLine(0);
+            process.stderr.cursorTo(0);
+        }
+        process.stderr.write(progress(label.padEnd(9) + ' ' + result) + took + '\n');
+    };
+}
+//# sourceMappingURL=terminal.js.map

package/dist/report/viewer.js

@@ -0,0 +1,148 @@
+const escape = (s) => s.replace(/&/g, '&amp;').replace(/</g, '&lt;').replace(/>/g, '&gt;').replace(/"/g, '&quot;');
+export function viewer(findings, meta) {
+    const verified = findings.filter((f) => f.class === 'verified').length;
+    const incomplete = meta.state !== 'complete';
+    const warning = incomplete
+        ? '<div class="warning"><strong>This review is ' + escape(meta.state) + ' — not a verdict.</strong>' +
+            (meta.notLookedAt.length > 0
+                ? '<ul>' + meta.notLookedAt.map((reason) => '<li>' + escape(reason) + '</li>').join('') + '</ul>'
+                : '') + '</div>'
+        : '';
+    const rows = findings
+        .map((f) => {
+        const frame = f.frame
+            ? '<pre class="frame">' +
+                f.frame.lines
+                    .map((l, i) => {
+                    const n = f.frame.firstLine + i;
+                    const mark = n === f.line ? ' target' : '';
+                    return '<span class="ln' + mark + '">' + String(n).padStart(4) + '</span> ' + escape(l);
+                })
+                    .join('\n') +
+                '</pre>'
+            : '';
+        return `<article class="f ${f.class}" data-check="${escape(f.check)}" data-sev="${f.severity}">
+  <header><span class="sev ${f.severity}">${f.severity}</span>
+    <span class="check">${escape(f.check)}</span>
+    <span class="conf">${f.confidence}</span>
+    <span class="loc">${escape(f.file)}:${f.line}</span>
+    <span class="act"><button data-away="${escape(f.check)}|${escape(f.file)}|${f.line}">put away</button></span></header>
+  <p class="title">${escape(f.title)}</p>
+  ${frame}
+  ${f.evidence ? '<p class="ev">' + escape(f.evidence.oracle) + ': ' + escape(f.evidence.detail) + '</p>' : ''}
+  ${f.fix ? '<p class="fix">→ ' + escape(f.fix) + '</p>' : ''}
+</article>`;
+    })
+        .join('\n');
+    return `<!doctype html>
+<meta charset="utf-8">
+<title>PowerShot ${escape(meta.id)}</title>
+<style>
+  :root { color-scheme: light dark;
+    --bg:#0a0e13; --panel:#111823; --ink:#e8eef4; --muted:#8e9bab; --line:#1e2a37;
+    --red:#ff6a5e; --steel:#5ab0e6; --amber:#f0a94a; }
+  @media (prefers-color-scheme: light) {
+    :root { --bg:#e9edf1; --panel:#fff; --ink:#0d141c; --muted:#5a6675; --line:#d2dae2;
+      --red:#d4302a; --steel:#1f6fa6; --amber:#b06f12; } }
+  body { margin:0; background:var(--bg); color:var(--ink); font:15px/1.6 ui-sans-serif,system-ui,sans-serif; }
+  .wrap { max-width:960px; margin:0 auto; padding:32px 24px 80px; }
+  h1 { font-size:1.4rem; margin:0 0 4px; }
+  .meta { color:var(--muted); font-family:ui-monospace,monospace; font-size:.8rem; margin-bottom:24px; }
+  .bar { display:flex; gap:8px; flex-wrap:wrap; margin-bottom:20px; }
+  button { font:inherit; font-size:.8rem; background:var(--panel); color:var(--ink);
+    border:1px solid var(--line); border-radius:6px; padding:5px 11px; cursor:pointer; }
+  button[aria-pressed=true] { border-color:var(--steel); color:var(--steel); }
+  .f { background:var(--panel); border:1px solid var(--line); border-left:3px solid var(--steel);
+    border-radius:8px; padding:14px 18px; margin-bottom:14px; }
+  .f.judged { border-left-color:var(--red); }
+  header { display:flex; gap:10px; align-items:center; flex-wrap:wrap;
+    font-family:ui-monospace,monospace; font-size:.74rem; margin-bottom:8px; }
+  .sev { text-transform:uppercase; font-weight:700; }
+  .sev.critical,.sev.high { color:var(--red); } .sev.medium { color:var(--amber); }
+  .sev.low,.sev.info { color:var(--muted); }
+  .check { color:var(--steel); } .conf,.loc { color:var(--muted); } .loc { margin-left:auto; }
+  .title { margin:0 0 10px; font-weight:600; }
+  .frame { background:var(--bg); border:1px solid var(--line); border-radius:6px;
+    padding:10px 12px; overflow-x:auto; font:12px/1.65 ui-monospace,monospace; margin:0 0 10px; }
+  .ln { color:var(--muted); } .ln.target { color:var(--red); font-weight:700; }
+  .ev { color:var(--muted); font-size:.85rem; margin:0 0 6px; }
+  .fix { color:var(--amber); font-size:.85rem; margin:0; }
+  .none { color:var(--muted); }
+  .warning { border:1px solid var(--amber); border-radius:6px; padding:10px 14px; margin:0 0 18px; }
+  .warning ul { margin:6px 0 0; }
+  .f.put-away { opacity:.4; }
+  .f.put-away .title { text-decoration:line-through; }
+  .act { margin-left:8px; }
+  .act button { font-size:.7rem; font-family:ui-monospace,monospace; padding:2px 7px; color:var(--muted);
+    background:transparent; }
+  .act button:hover { color:var(--ink); border-color:var(--steel); }
+</style>
+<div class="wrap">
+  <h1>PowerShot</h1>
+  <p class="meta">${escape(meta.target)} · ${escape(meta.started.slice(0, 19).replace('T', ' '))} · session ${escape(meta.id)}<br>
+    ${findings.length} finding(s) — ${verified} verified, ${findings.length - verified} judged</p>
+  ${warning}
+  <div class="bar">
+    <button data-filter="all" aria-pressed="true">all</button>
+    <button data-filter="verified" aria-pressed="false">verified</button>
+    <button data-filter="judged" aria-pressed="false">judged</button>
+    <button id="show-away" aria-pressed="false">show put away</button>
+  </div>
+  ${findings.length === 0
+        ? '<p class="none">' + (incomplete ? 'No findings from what completed.' : 'No findings.') + '</p>'
+        : rows}
+</div>
+<script>
+  // Putting a finding away is per-reader and per-browser on purpose: this page is a
+  // file, often attached to a ticket, and one reader's triage is not a fact about the
+  // review that belongs in everyone else's copy of it.
+  const KEY = 'powershot:away:' + ${JSON.stringify(JSON.stringify(meta.id))}
+  const away = new Set(JSON.parse(localStorage.getItem(KEY) || '[]'))
+  let showAway = false
+
+  function paint() {
+    document.querySelectorAll('.f').forEach((el) => {
+      const id = el.querySelector('[data-away]').dataset.away
+      const isAway = away.has(id)
+      el.classList.toggle('put-away', isAway)
+      el.dataset.putAway = isAway ? '1' : '0'
+      if (isAway && !showAway) el.style.display = 'none'
+      if (!isAway) el.style.display = ''
+      el.querySelector('[data-away]').textContent = isAway ? 'restore' : 'put away'
+    })
+    const btn = document.getElementById('show-away')
+    btn.setAttribute('aria-pressed', String(showAway))
+    btn.textContent = away.size
+      ? (showAway ? 'hide put away' : 'show put away (' + away.size + ')')
+      : 'show put away'
+  }
+
+  document.querySelectorAll('[data-away]').forEach((b) => {
+    b.addEventListener('click', () => {
+      const id = b.dataset.away
+      away.has(id) ? away.delete(id) : away.add(id)
+      localStorage.setItem(KEY, JSON.stringify([...away]))
+      paint()
+    })
+  })
+  document.getElementById('show-away').addEventListener('click', () => {
+    showAway = !showAway
+    paint()
+    if (showAway) document.querySelectorAll('.f.put-away').forEach((el) => { el.style.display = '' })
+  })
+  paint()
+
+  document.querySelectorAll('button[data-filter]').forEach((b) => {
+    b.addEventListener('click', () => {
+      const want = b.dataset.filter
+      document.querySelectorAll('button[data-filter]').forEach((o) =>
+        o.setAttribute('aria-pressed', String(o === b)))
+      document.querySelectorAll('.f').forEach((f) => {
+        f.style.display = want === 'all' || f.classList.contains(want) ? '' : 'none'
+      })
+    })
+  })
+</script>
+`;
+}
+//# sourceMappingURL=viewer.js.map