Treatment Companion (治療の味方)

A single-file web app that helps cancer patients get through treatment: track daily symptoms, see 14-day patterns, prepare questions for the next oncology visit, look up terms in plain language, and reach the right phone number fast when something is wrong.

Built for CodeTheCure 2026 — category: Patient Experience & Support.

The entire app is one file: index.html. No build step, no server, no dependencies, no network requests. All data stays in the browser's localStorage on the patient's own device — nothing is ever sent anywhere.

Features

1. Daily symptom tracker + 14-day trend chart

• Six common chemo/radiation side effects — 吐き気 (nausea), 疲労 (fatigue), 食欲 (appetite), 痛み (pain), 睡眠 (sleep), 発熱 (fever) — rated on a simple 0–4 scale (0 なし → 4 とても強い), plus a free-text note field.
• One entry per day; picking a past date lets you fill in a missed day, and saving again edits that day.
• A canvas line chart of the last 14 days so patients can see patterns (e.g. nausea peaks 2–3 days after treatment). Each symptom is a colored line with a toggleable legend. Non-visual users get an sr-only text summary of the latest entry.
• "最近の記録をコピー" copies the last 14 days as plain text — easy to paste into a notes app or show at a visit.

2. Appointment question builder

• A curated checklist of 14 real patient concerns ("吐き気がつらい", "食事がとれない", "仕事との両立", "治療費・お金のことが心配"…) plus a free-text field.
• One tap generates a numbered question list for the next oncologist visit, including hospital name and appointment date.
• コピー copies it as plain text; 印刷する prints just the question card (print CSS hides everything else). Checked concerns persist between sessions.

3. Term glossary (30 terms, searchable)

• Plain-Japanese explanations of terms patients actually hear: 化学療法, 放射線治療, 緩和ケア, 白血球, 好中球, 骨髄抑制, 発熱性好中球減少症, 腫瘍マーカー, 病理検査, 生検, 転移, 再発, 寛解, 高額療養費制度, and more — grouped into 治療 / 検査 / 体のしくみ・副作用 / こころとくらし.
• Search matches the term, its kana reading, and the definition text (searching かがく finds 化学療法; searching 白血球 also surfaces 好中球 and 骨髄抑制, whose definitions mention it).

4. Emergency guide

• A prominent card listing warning signs that need immediate contact: 38℃以上の発熱, 息苦しさ, 止まらない嘔吐・下痢, 出血が止まらない, 意識がぼんやり・強い頭痛, 痛みが増す。
• Shows the patient's own hospital phone number (registered once in Settings) as a tap-to-call tel: link, plus the 119 ambulance note. A shortcut button on the record tab jumps straight here.

5. Settings (all localStorage)

• Hospital name, hospital phone number, next appointment date → used by the emergency card, the question list header, and a "next visit in N days" countdown on the record tab.
• One-click JSON export of all records (for backup or to bring to an appointment).

Design & accessibility

• Japanese first (target user), with a full JA/EN toggle for the UI.
• Mobile-first layout with a fixed bottom tab bar; warm, calm cream/teal palette chosen to feel non-clinical.
• Three text sizes (標準 / 大 / 特大), high-contrast mode, large tap targets, visible keyboard focus styles, ARIA labels and radiogroup semantics throughout.
• No external assets at all — every icon is inline SVG, the logo is an emoji, everything is one file.

How it works

• index.html — vanilla HTML + CSS + JavaScript. The 14-day chart is drawn on a <canvas> (device-pixel-ratio aware, redrawn on resize).
• Storage keys: tc_settings_v1 (settings), tc_entries_v1 (symptom entries, keyed by date), tc_questions_v1 (checked concerns), tc_hidden_syms_v1 (chart legend state).
• No frameworks, no CDN, no fonts, no analytics, no network calls of any kind.

How to run

Option A — just open the file:

open index.html        # or double-click it

Everything works from file:// except automatic clipboard write in some browsers (which falls back gracefully).

Option B — recommended (full clipboard support), serve locally:

cd treatment-companion
python3 -m http.server 3965
# then open http://127.0.0.1:3965/index.html

Verified test results

Tested for real in a browser, not just described: the automated suite test_app.py drives Brave (Chromium 154) over CDP with Playwright at a 390×844 mobile viewport and checks 49 assertions — data entry, canvas pixel-level chart verification, question generation, real clipboard readback, glossary search, emergency card, settings persistence across reload, accessibility toggles, language toggle, and zero JS errors.

Final run: 49 passed, 0 failed. Full log with observed values and screenshots: TEST_RESULTS.md and test_results.json.

Reproduce it:

cd treatment-companion
python3 -m http.server 3965 --bind 127.0.0.1 &
~/.hermes/bin/uv run --with playwright python test_app.py   # needs a browser with CDP on :9222

Medical information sources

• Glossary definitions and the emergency warning-sign list were compiled by the author as plain-language summaries from public patient-information sources, primarily:
  • 国立がん研究センター がん情報サービス (National Cancer Center Japan — Cancer Information Service): https://ganjoho.jp/
  • 厚生労働省 (Ministry of Health, Labour and Welfare): https://www.mhlw.go.jp/ (e.g. 高額療養費制度)
• Definitions are original wording (not copied text), written to be understandable without medical background.
• This app is a recording aid. It is not a medical device and cannot diagnose anything. Diagnosis and treatment decisions must always come from the patient's medical team — this disclaimer is shown on every screen of the app.

AI tools used (disclosure)

This project was built with AI assistance, stated plainly: Claude Code / Hermes agent assisted with UI and code; medical content compiled from public sources by the author; all functionality tested.

• The app code (HTML/CSS/JS) and the test suite were written with AI assistance.
• The medical/glossary content was compiled from public sources (see above) and reviewed for plain-language accuracy by the author; it is not a substitute for professional medical advice.
• Every feature listed above was exercised in a real browser via the automated suite; the results in TEST_RESULTS.md are actual observed output, with failures and untested areas disclosed there.

Files in this directory

File	Purpose
index.html	The complete app (single file, no dependencies)
README.md	This file
TEST_RESULTS.md	Full test log with observed values and limitations
test_app.py	The Playwright/CDP test suite used for verification
test_results.json	Raw machine-readable results of the final run
test_*.png	Screenshots captured during the test run
ABSTRACT.md	300-word project abstract for the submission

Known limitations

• No medical authority: the app records and organizes; it never interprets. It deliberately contains no diagnosis logic and no automatic warnings based on logged data.
• Print layout verified by CSS only (native print dialogs can't be automated) — see TEST_RESULTS.md.
• Data lives only in this browser's localStorage: clearing browser data removes it. The JSON export exists as a backup path. No sync across devices (a privacy trade-off).
• The 14-day chart plots one entry per day (the latest saved value for that date).
• Tested in Chromium-based Brave only; not tested in Firefox/Safari or on physical phones.
• Glossary covers 30 high-frequency terms; it is not a complete oncology dictionary.

Built With

• html
• python