Daily Focus Board

Daily Focus Board

A warm, visual "let's go" board for a person's day — rendered from a self-contained HTML template, opened in a browser (ideally a side-panel canvas in the GitHub Copilot app), and kept current by conversation: the human tells you what they finished, you update the board.

This is Ember partnership in daily practice: not a static to-do list, a thing you run with your AI. Keep it light, encouraging, and honest — celebrate real progress, don't inflate it.

When to use it

Trigger when the user wants to: plan today, "get organized / stay focused," start a work session, or track progress on a set of tasks they list. If they just mention a pile of things to do, offer the board.

How to build it (3 steps)

1. Gather the tasks. Ask for (or lift from what they already said) their handful of tasks for the day. For each, capture: a short title, an optional emoji, an optional one-line sub-note, and an optional tag. If a task is a count toward a number (steps, pages, pomodoros, reps), make it a counter with a numeric goal. Keep it to ~4–9 items — a focus board, not a backlog.

2. Generate the board. Copy assets/board.template.html to a working file (e.g. focus-board.html in a scratch/working dir — NOT into a source repo unless asked). In the copy, find this line near the top:

<script>window.__BOARD__ = null; /* SKILL: replace null with the config object above */</script>

Replace null with the config object. Inject it as JSON with < escaped so a task's text can never break out of the <script> — e.g. JSON.stringify(config).replace(/</g, "\\u003c") — never hand-concatenate raw user-provided text. Schema:

{
  name: "Alex",              // optional — shows "Let's go, Alex 🔥"; omit for "Let's go 🔥"
  dateKey: "2026-07-27",     // optional — localStorage key; defaults to today (YYYY-MM-DD)
  mantra: "Small, real, done.", // optional — today's intention (editable on the board)
  checkin: "above",          // optional — arrival check-in: "below" | "mid" | "above"
  tasks: [
    // counter task (numeric goal → progress bar + set/＋ buttons):
    { id:"pages", emoji:"📖", title:"Read 30 pages",
      goal:30, start:0, inc:5, unit:"pages", tag:"mind", tagc:"new", quad:"ins" },
    // status task (to-do → in progress → done + progress notes):
    { id:"doc", emoji:"⚙️", title:"Finish the design doc", sub:"the anchor",
      due:"2026-07-27T17:00", tag:"deadline", tagc:"deadline", quad:"iu" },
    { id:"move", emoji:"🌿", title:"Move a little — whatever fits your body", tag:"body" }
  ]
}

• id must be unique and stable, using only letters, digits, hyphens, or underscores ([A-Za-z0-9_-]) — it's embedded in HTML attributes, CSS selectors, storage keys, and colon-delimited note keys, so avoid quotes, colons, brackets, and spaces. tagc is an optional color class: new (green), deadline (red/pink), career (purple); omit for the default grey.
• Counter tasks: goal (a positive integer), start (default 0), inc (default max(1, round(goal/10))), unit (label). Everything else is a status task. Carryover ("not today") is for status tasks — counters are progress you dial down, not defer.
• due (optional, ISO local datetime) shows a gentle live countdown on the card, and after the time passes says "was due 5:00pm — still worth doing" in soft amber (never angry red). Use it for the one real anchor, not everything.
• quad (optional) sets a task's Eisenhower priority: iu (important & urgent → Do first), ins (important, not urgent → Schedule), niu (urgent, not important → Delegate), ninu (neither → Later). Renders as a colored accent; the person can change it on the board.
• mantra / checkin (both optional, top-level) seed today's intention and the above/below-the-line arrival check-in. Set these from the conversation, or leave them for the person to set/tap.
• Built-in, no config needed: the "how are you arriving?" check-in + daily mantra (with 🔄 suggestions), ➕ add-a-task live, drag-to-reorder (⠿ handle) + sort by priority, a 🧭 priority guide, editable labels per tile, a gentle overload nudge, an end-of-day save (download/copy a recap), Focus mode, "not today" carryover, the 🧠 brain-dump box, the reduced-motion toggle, and the live clock. Just set good tasks; the rest comes for free.

3. Serve + open it. localStorage needs an http:// origin, so serve the folder rather than opening the file path directly:

• Serve (loopback only): python -m http.server 8799 --bind 127.0.0.1 from the board's folder (or scripts/serve-board.ps1). Binding to 127.0.0.1 keeps a board of personal tasks off the local network. If Python isn't available, any static file server works — you just need an http:// origin.
• Open: prefer a browser canvas side-panel if the host supports one (best experience — it sits next to the chat). Otherwise open http://localhost:8799/focus-board.html in the default browser.
• If you truly can't serve, opening the file directly still works in most browsers; just note that some restrict localStorage on file://, so progress may not persist.

How to drive it (the partnership part)

Once it's up, keep it current through conversation — this is the whole point:

• When the user says they finished / started something, either (a) tell them the one-tap move ("tap the pill on the design-doc card to mark it done"), or (b) regenerate the board only when the task list itself changes (add/rename tasks) — status and notes live in the browser (localStorage) and are set by tapping, not by config; a regenerate with the same dateKey preserves existing progress. Clicking is faster for live updates.
• Encourage logging incremental notes ("all three desks up and running") — momentum is built from small logged wins, and the momentum feed becomes the story of their day.
• The board is the artifact; you are the partner. Check in, nudge the anchor task (the one with a deadline), celebrate real completion, and protect against overload (too many cards = not a focus board).