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 a