| name | reminder-popup |
| description | Show a reminder popup in Safari when tasks have built up that need checking off. Use when there are pending PRs, unfinished work, or follow-ups accumulating in tasks.md that the user should be reminded about. |
Reminder Popup
Generate a beautiful dark-themed HTML todo popup and open it in Safari when tasks need attention.
When to Use
- Tasks have built up in
tasks.md — pending PRs, idle interns, follow-ups
- After a batch of work completes and there are loose ends
- When the user asks for a reminder or summary of what needs doing
- Proactively when you notice things piling up
How It Works
- Read
tasks.md and any relevant context (PR statuses, intern states)
- Generate an HTML file from the template below, filling in the current items
- Write it to
./interns/_reminder/todo.html (create dir if needed)
- Open it:
open -a Safari ./interns/_reminder/todo.html
Categorising Items
Sort items into these sections:
-
PRs to follow up on — open PRs that need merging, reviewing, or are draft
- Tag with
ready (green) if CI is green and ready to merge
- Tag with
draft (yellow) if still draft
- Tag with
blocked (red) if CI failing or review changes needed
- Include the GitHub link
-
Pending work — branches, intern work, things not yet PR'd
- Include brief instructions on how to resume (commands, paths)
-
Notes — context that's useful to remember but not actionable as a checkbox
HTML Template
Use this exact template structure. Replace the items inside the sections with the current todos. Keep all the CSS/JS inline — no external dependencies.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Squad — Todo Reminders</title>
<style>
* { margin: 0; padding: 0; box-sizing: border-box; }
body {
font-family: -apple-system, BlinkMacSystemFont, 'SF Pro Text', 'Segoe UI', system-ui, sans-serif;
background: #1a1a2e;
color: #e0e0e0;
min-height: 100vh;
display: flex;
justify-content: center;
padding: 20px;
}
.container { max-width: 500px; width: 100%; }
h1 {
font-size: 18px; font-weight: 700; margin-bottom: 16px;
background: linear-gradient(135deg, #a78bfa, #60a5fa);
-webkit-background-clip: text; -webkit-text-fill-color: transparent;
letter-spacing: -0.3px;
}
.section {
background: #16213e; border: 1px solid rgba(255,255,255,0.06);
border-radius: 12px; padding: 14px 16px; margin-bottom: 12px;
box-shadow: 0 4px 24px rgba(0,0,0,0.3);
}
.section-title {
font-size: 11px; font-weight: 600; text-transform: uppercase;
letter-spacing: 0.8px; color: #a78bfa; margin-bottom: 10px;
}
.todo-item {
display: flex; align-items: flex-start; gap: 10px;
padding: 7px 0; border-bottom: 1px solid rgba(255,255,255,0.04);
cursor: pointer; transition: opacity 0.2s;
}
.todo-item:last-child { border-bottom: none; }
.todo-item.done { opacity: 0.4; }
.todo-item.done .todo-text { text-decoration: line-through; }
.checkbox {
flex-shrink: 0; width: 18px; height: 18px; border: 2px solid #4a4a6a;
border-radius: 5px; margin-top: 1px; display: flex;
align-items: center; justify-content: center;
transition: all 0.2s; cursor: pointer;
}
.todo-item.done .checkbox {
background: linear-gradient(135deg, #a78bfa, #60a5fa);
border-color: transparent;
}
.checkbox svg { width: 12px; height: 12px; opacity: 0; transition: opacity 0.15s; }
.todo-item.done .checkbox svg { opacity: 1; }
.todo-text { font-size: 13px; line-height: 1.45; color: #d0d0e0; transition: all 0.2s; }
.todo-text a {
color: #60a5fa; text-decoration: none;
border-bottom: 1px solid rgba(96,165,250,0.3); transition: border-color 0.15s;
}
.todo-text a:hover { border-color: #60a5fa; }
.tag {
display: inline-block; font-size: 10px; font-weight: 600;
padding: 1px 6px; border-radius: 4px; margin-left: 4px; vertical-align: middle;
}
.tag-ready { background: rgba(52,211,153,0.15); color: #34d399; }
.tag-draft { background: rgba(251,191,36,0.15); color: #fbbf24; }
.tag-blocked { background: rgba(239,68,68,0.15); color: #ef4444; }
.note-item {
font-size: 12px; color: #888; padding: 4px 0; padding-left: 8px;
border-left: 2px solid #2a2a4a; margin-bottom: 6px; line-height: 1.4;
}
.note-item:last-child { margin-bottom: 0; }
code {
font-family: 'SF Mono', 'Fira Code', monospace; font-size: 11px;
background: rgba(255,255,255,0.06); padding: 1px 5px;
border-radius: 4px; color: #c0c0d0;
}
.timestamp { text-align: right; font-size: 10px; color: #555; margin-top: 8px; }
</style>
</head>
<body>
<div class="container">
<h1>📋 Squad — Reminders</h1>
<div class="section">
<div class="section-title">PRs to follow up on</div>
<div class="todo-item" onclick="toggle(this)">
<div class="checkbox"><svg viewBox="0 0 12 12" fill="none" stroke="white" stroke-width="2" stroke-linecap="round"><path d="M2.5 6.5L5 9L9.5 3"/></svg></div>
<div class="todo-text">
<a href="GITHUB_URL" onclick="event.stopPropagation()">PR #NUMBER</a> — TITLE <span class="tag tag-ready">ready</span>
</div>
</div>
</div>
<div class="section">
<div class="section-title">Pending work</div>
<div class="todo-item" onclick="toggle(this)">
<div class="checkbox"><svg viewBox="0 0 12 12" fill="none" stroke="white" stroke-width="2" stroke-linecap="round"><path d="M2.5 6.5L5 9L9.5 3"/></svg></div>
<div class="todo-text">DESCRIPTION</div>
</div>
</div>
<div class="section">
<div class="section-title">Notes</div>
<div class="note-item">NOTE TEXT</div>
</div>
<div class="timestamp">Updated — DATE</div>
</div>
<script>function toggle(el) { el.classList.toggle('done'); }</script>
</body>
</html>
Opening the Popup
mkdir -p ./interns/_reminder
open -a Safari ./interns/_reminder/todo.html
Notes
- Omit any section that has no items (don't show an empty "PRs" section)
- Keep it compact — this is a quick reminder, not a full report
- Update the timestamp to the current date
- If a todo item needs a command, use
<code> tags
- Links use
onclick="event.stopPropagation()" so clicking them doesn't toggle the checkbox
