{pz.tip}

# Kanban that computes @icon(kanban) @category(productivity) > A sprint board you can actually move. Tap a card and it changes column, Little's Law re-forecasts the sprint, and a lane goes red the moment you break its WIP limit. The whole board is one integer, so the link in your address bar is the save file. #kanban #agile #flow #svg #interactive # The cards @icon(list) @collapsed cards = [{name: "Auth rewrite", pts: 8, age: 22}, {name: "Flaky CI", pts: 3, age: 4}, {name: "Search index", pts: 13, age: 31}, {name: "Billing hook", pts: 5, age: 9}, {name: "Dark mode", pts: 5, age: 14}, {name: "Onboarding", pts: 8, age: 2}, {name: "Rate limiter", pts: 3, age: 6}, {name: "Docs refresh", pts: 2, age: 18}, {name: "Mobile nav", pts: 5, age: 11}, {name: "CSV export", pts: 3, age: 27}] // @sheet @cols(Card, Points, Days on board) @label(Edit any cell, sort by any column, add a row) @icon(list) # Flow @icon(gauge) @density(compact) @skin(form) throughput = 4 // 1..12 by 1 @label(Cards finished per week) @icon(check-check) @note(what the team actually shipped last month, not the plan) doing limit = 3 // 1..8 by 1 @label(WIP limit, Doing) @icon(hard-hat) review limit = 2 // 1..6 by 1 @label(WIP limit, Review) @icon(eye) held = -1 // @label(Card in hand) @icon(hand) @advanced @note(the card index you picked up, or -1 for nothing — a lane tap reads this and puts the card there) board = 4021041232 // @label(The board, as one number) @icon(hash) @advanced @note(digit N is card N's column, 0..4 — this row IS the save file) # Engine @hidden // THE `cards` ROW ABOVE IS THE BOARD'S SOURCE OF TRUTH, and it is a LITERAL // ARRAY on purpose. `computeIsEditableSheet` turns a @sheet into the editable // grid only when the right-hand side matches `= [` — build the same rows with // `map(...)` and you get a table that looks identical, cannot be typed into, // and whose headers no longer sort. Everything here indexes into it by // POSITION, so adding a row there adds a card to the board (it starts in // Backlog, because `board` has no digit that far up yet). // // It also has to live in a VISIBLE section, and this note does not: a comment // outside a @hidden section renders as body prose in Present mode, which put a // paragraph of implementation notes above the board for every reader. // Digit N of `board` (counting from the right, N = the card's index) is that // card's column. Card 3 sits in column floor(board / 10^3) mod 10, pulling it // forward is `board + 10^3`, pushing it back is `board - 10^3`. That is the // entire state machine. // // Two things fall out of it, and both are why the board is a number rather // than a list. Every click becomes an ARITHMETIC EXPRESSION, which is all a // `data-ic-action` can carry — the renderer evaluates it against the live row // values and rewrites the row. And because the row IS the state, the board // lives in the calc source: the URL is the save file, Ctrl-Z is undo, and two // people opening the same link see the same board. _names = ["Backlog", "Ready", "Doing", "Review", "Done"] _limits = [0, 6, doing limit, review limit, 0] _nc = sum(map(cards, c => 1)) _heldstage = if(held >= 0, floor(board / 10^max(0, held)) mod 10, 0) _stage(i) = floor(board / 10^i) mod 10 // Where a card sits vertically: how many lower-numbered cards share its lane. // `&&` is the conjunction the engine understands — `and` parses as something // else entirely and quietly returns the wrong count. _slot(i) = count(filter(seq(_nc, 0), m => m < i && floor(board / 10^m) mod 10 == floor(board / 10^i) mod 10)) _col(c) = filter(seq(_nc, 0), i => floor(board / 10^i) mod 10 == c) _ncol(c) = count(_col(c)) _over(c) = if(_limits[c] > 0, if(_ncol(c) > _limits[c], 1, 0), 0) _badge(c) = if(_limits[c] > 0, concat(_ncol(c), " / ", _limits[c]), concat(_ncol(c))) // Little's Law: work in progress = throughput x cycle time. Rearranged, the // average card takes WIP / throughput weeks — so cycle time is set by how many // things are open, NOT by how hard anyone is working. In flight means Doing // plus Review; a card sitting in Ready has not started the clock. _wip = _ncol(2) + _ncol(3) _cycle = if(throughput > 0, _wip / throughput * 7, 0) _left = _nc - _ncol(4) _weeks = if(throughput > 0, _left / throughput, 0) _ptsleft = sum(map(filter(seq(_nc, 0), i => floor(board / 10^i) mod 10 < 4), i => cards[i].pts)) // Named without the leading underscore ON PURPOSE: the graph legend prints // the row's literal expression, so this name is user-visible. It is hidden by // its section, not by the underscore — and it is `cycletime` rather than // `cycle` because `_cycle` above would collide with it (the underscore hides a // row, it does not namespace one). cycletime(w) = w / throughput * 7 // Which lane is the constraint. Doing beats Review beats Ready when more than // one is over, because the furthest-downstream breach is the one starving // everything upstream of it. _bni = if(_over(2) > 0, 2, if(_over(3) > 0, 3, if(_over(1) > 0, 1, -1))) _bn = if(_bni < 0, "Clear", _names[_bni]) _bnsub = if(_bni < 0, "every lane under its limit", concat(_ncol(_bni), " cards against a limit of ", _limits[_bni])) _bncol = if(_bni < 0, "var(--text)", "var(--ic-svg-error)") _wipcap = doing limit + review limit _wipbar = min(148, 148 * _wip / max(1, _wipcap)) _wipcol = if(_wip > _wipcap, "var(--ic-svg-error)", "var(--accent)") _wiplab = concat(_wip, " of ", _wipcap) _cyclab = concat(round(_cycle, 1), " days") // Card age is a JUDGEMENT — this card is rotting — so it gets the semantic // tokens, whose hues are fixed across all 33 themes: a stale card is red on // every one of them. A card that shipped is never stale, so Done always reads // as an ordinary card. _edge(i) = if(_stage(i) == 4, "var(--border-color)", if(cards[i].age >= 21, "var(--ic-svg-error)", if(cards[i].age >= 10, "var(--ic-svg-warning)", "var(--border-color)"))) _ink(i) = if(_stage(i) == 4, "var(--text-dim)", if(cards[i].age >= 21, "var(--ic-svg-error)", if(cards[i].age >= 10, "var(--ic-svg-warning)", "var(--text-dim)"))) _hint(i) = if(held < 0, "tap to pick it up", if(held == i, "tap to let go", concat("tap to move ", _holding, " into ", _names[_stage(i)]))) # Geometry @hidden // EVERY NUMBER AND STRING THE DRAWING NEEDS IS COMPUTED HERE, not in the // template, and that is a hard requirement rather than tidiness. A ROW IS // CAPPED AT 4000 CHARACTERS (`CONFIG.SETTINGS.MAX_INPUT_LENGTH`) and the // template has to be one row — so the drawing's whole budget is ~3.5 KB of // markup, and anything that can be a property read has to be one. Hoisting // also keeps the template off the engine's per-row fuel budget: calling // `_col(lane)` from inside the loops re-filtered ten cards per call and blew // it. Both failures render the row as an EMPTY CELL with no error on the row, // in the console, or in `ic render --lint`. // THE BOARD SIZES ITSELF TO THE WORK. A fixed lane height left two thirds of // every column empty at a normal sprint and truncated a busy one; the whole // drawing is measured off the fullest lane instead, and the viewBox height // travels with it. `_bh` not `_h` — a single-letter row name canonicalises to // `h`, which is the hour unit. _maxn = max(_ncol(0), max(_ncol(1), max(_ncol(2), max(_ncol(3), _ncol(4))))) _lanerows = max(2, _maxn) _lh = 36 + _lanerows * 40 _ny = 88 + _lh / 2 _sy = 96 + _lh _sy1 = _sy + 18 _sy2 = _sy + 38 _sy3 = _sy + 50 _bh = _sy + 68 _fh = _bh - 1.5 // A CARD IS ALSO A DROP TARGET while something is held. The lane rect is the // obvious target, but its own cards cover it — tapping "Done" where a card sits // used to pick that card up instead of dropping. So a card carries its lane's // drop action unless it is the one in hand, which lets go of it. // // EVERY ACTION IS EXACTLY ONE ASSIGNMENT. The dispatcher splits an action on // commas and applies each part, but two writes in one action clobber each other // — `board = 4021241232, held = -1` applied NEITHER, silently. So a drop moves // the card and LEAVES it in your hand; you keep carrying it until you tap it to // let go, which also means moving one card across three lanes is three taps // rather than six. _dropto(c) = if(held < 0, "held = -1", concat("board = ", board + (c - _heldstage) * 10^max(0, held))) _deck = map(seq(_nc, 0), i => {n: cards[i].name, s: _slot(i), x: 18 + _stage(i) * 140, y: 116 + _slot(i) * 40, y1: 131 + _slot(i) * 40, y2: 143 + _slot(i) * 40, ny: 138 + _slot(i) * 40, tx: 30 + _stage(i) * 140, kx: 127 + _stage(i) * 140, ky: 139 + _slot(i) * 40, e: if(held == i, "var(--accent)", _edge(i)), ew: if(held == i, 2, 1.25), wash: if(held == i, 0.2, 0.05), k: _ink(i), done: if(_stage(i) == 4, 1, 0), act: if(held < 0, concat("held = ", i), if(held == i, "held = -1", _dropto(_stage(i)))), mt: concat(cards[i].pts, " pts · ", cards[i].age, "d"), tt: concat(cards[i].name, " · ", cards[i].pts, " points · ", cards[i].age, " days on the board · ", _hint(i))}) _note(c) = if(_ncol(c) == 0, "empty", concat(_ncol(c) - 6, " more below the fold")) // A lane is the drop target. `held` names the card, so the new board value is // known here — the action ships it as a literal, plus a second assignment that // empties the hand. The dispatcher splits an action on commas, which is why no // value in one may contain a comma. _lanes = map(seq(5, 0), c => {x: 12 + c * 140, tx: 20 + c * 140, bx: 138 + c * 140, mx: 79 + c * 140, t: _names[c], g: _badge(c), note: _note(c), ny: if(_ncol(c) == 0, 136, if(_ncol(c) > 6, 374, 0)), c: if(_over(c) > 0, "var(--ic-svg-error)", "var(--text-dim)"), drop: _dropto(c), ls: if(held < 0, "none", "var(--accent)"), ld: if(held < 0, "0", "5 4"), hold: if(held < 0, 0, 1)}) _lanecur = if(held < 0, "default", "copy") _holding = if(held < 0, "", cards[max(0, held)].name) _hintw = if(held < 0, "Tap a card to pick it up, then tap the lane you want it in", concat("Carrying ", _holding, " — tap any lane to move it there, or tap the card to let go")) _hintn = if(held < 0, "Tap a card, then a lane", concat("Carrying ", _holding)) // Both loops iterate a ROW array, never an inline literal: an object literal // cannot go inside an each-loop head, because the head regex stops at the // first `}` and the block then mis-nests every sibling after it — silently. // (And no hash-plus-word anywhere in a comment: calc-metadata harvests tag // tokens out of every `//` row by that exact pattern, so an each-block // written out literally here became a published tag on the calc.) _seeds = [{x: 18, mx: 80, t: "Sprint start", v: 11111, tip: "Everything queued, nothing started"}, {x: 152, mx: 214, t: "Mid sprint", v: 4021041232, tip: "A normal week"}, {x: 286, mx: 348, t: "Too much WIP", v: 4213233222, tip: "Eight cards in flight and every lane over its limit"}, {x: 420, mx: 482, t: "Review jam", v: 4400123333, tip: "Work finished, nobody reviewing"}] _presets = map(_seeds, q => {x: q.x, mx: q.mx, t: q.t, v: q.v, tip: q.tip, o: if(board == q.v, 0.18, 0.05), e: if(board == q.v, "var(--accent)", "var(--border-soft)"), c: if(board == q.v, "var(--accent)", "var(--text-dim)")}) // The three footer tiles are assembled from four PARALLEL STRING ARRAYS rather // than written as one array of six-key objects. An inline array-of-objects row // is fine — `_seeds` above is one — but this particular literal refused to // evaluate, and the failure was invisible: the row showed no value, the four // four slots that read it rendered nothing, and `--lint` stayed green. Building // it through map() over seq() is the shape that behaves, and it is the same // shape `_lanes` uses. _boxlab = ["STILL TO SHIP", "WORK IN PROGRESS", "BOTTLENECK"] _boxval = [concat(_left, " cards"), concat(_wip, " in flight"), _bn] _boxsub = [concat(_ptsleft, " points · ", round(_weeks, 1), " weeks at ", throughput, "/wk"), concat("cycle = ", _wip, " / ", throughput, " weeks = ", round(_cycle, 1), " days"), _bnsub] _boxcol = ["var(--text)", _wipcol, _bncol] _boxes = map(seq(3, 0), i => {x: 18 + i * 232, tx: 32 + i * 232, l: _boxlab[i], v: _boxval[i], s: _boxsub[i], c: _boxcol[i]}) # Art @hidden // THE BOARD IS DRAWN, NOT SCREENSHOTTED. Every structural colour is a theme // variable, so the panel is native on a light theme, a dark theme and the // brutalist one alike. Only the semantic tokens hold a fixed hue, because "31 // days old" has to mean the same thing on all of them. // // Four mechanics carry the interaction, and each has a trap worth stating: // - `fill` INHERITS, and the row cap makes that the difference between // fitting and not: `fill:var(--text-dim)` sits on the root