kaizen-agent 1.38.1 → 1.40.0

package/web/board.html

@@ -59,6 +59,14 @@ svg{width:18px;height:18px;stroke:currentColor;fill:none;stroke-width:1.6;stroke
 [data-rail=min] .theme{flex-direction:column}
 [data-rail=min] .theme button{width:34px;flex:none}
 @media(max-width:640px){#fold{display:none}}
+/* phones: the side menu is a bottom tab bar, in the page flow so nothing sits under it; it owns the bottom safe area */
+@media(max-width:640px){body{flex-direction:column;padding-bottom:0}.app{flex:1;min-height:0}
+.rail,[data-rail=min] .rail{order:2;width:auto;flex-direction:row;align-items:stretch;gap:0;padding:4px 6px calc(4px + env(safe-area-inset-bottom));border-top:1px solid var(--line);background:var(--bg-2);overflow:visible}
+.rail .top,.rail .end,.rail .theme{display:none}
+.rail a.it,[data-rail=min] .rail a.it{flex:1;width:auto;flex-direction:column;justify-content:center;gap:2px;height:auto;min-height:48px;padding:4px 0;font-size:11px}
+.rail a.it[aria-current=page]{background:none;color:var(--accent)}
+[data-rail=min] .rail .lbl{position:static;width:auto;height:auto;overflow:visible;clip-path:none}
+body .rail a.upd::after{left:calc(50% + 6px);top:4px}body .toast{left:16px;bottom:calc(68px + env(safe-area-inset-bottom))}}
 /* end side menu */
 /* the work area: an inset rounded panel on the canvas the side menu sits on */
 .app{flex:1;min-width:0;display:flex;flex-direction:column;margin:8px 8px 8px 0;background:var(--bg);border:1px solid var(--line);border-radius:var(--r);overflow:hidden}
@@ -81,6 +89,8 @@ select.sel,button.sel{cursor:pointer;appearance:none;padding-right:30px;max-widt
 /* project picker: a select-shaped button over a searchable list */
 .combo{position:relative;max-width:100%;display:flex}
 .combo .menu-pop{left:0;right:auto;top:calc(100% + 4px);width:320px;max-width:calc(100vw - 32px);gap:6px;z-index:9}
+/* phones: the right-hand combo opens leftward, so its list stays on screen */
+@media(max-width:640px){#showc .menu-pop{left:auto;right:0}}
 .combo[hidden],.combo .menu-pop[hidden]{display:none}
 .combo input.sel{width:100%;max-width:none}
 #ndc>.sel{width:100%;max-width:none;text-align:left;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
@@ -166,11 +176,15 @@ section h2 .clear{margin-left:auto;min-height:22px;padding:0 8px}
 .card:hover .age,.card.menu .age{display:none}
 .c-title{font-size:13px;font-weight:500;line-height:1.45;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;color:var(--ink)}
 .c-foot{display:flex;align-items:center;gap:8px;margin-top:2px}
+.card .act{align-self:flex-start;min-height:24px;padding:0 10px;font-size:12px}
+.card.compact{flex-direction:row;align-items:center;gap:8px;padding:7px 12px}.card.compact .c-id{display:contents}.card.compact .idt{display:none}.card.compact .c-title{order:1;flex:1;min-width:0;-webkit-line-clamp:1}.card.compact .age{order:2}.card.compact .more{order:3}.card.compact .c-foot,.card.compact .kids{display:none}
+section li.hint{display:block;padding:14px;border:1px dashed var(--line);border-radius:var(--r-s);color:var(--dim);font-size:12px;text-align:center}
+#bq{width:220px;min-height:30px}
 .c-chips{display:flex;gap:4px;flex-wrap:wrap;flex:1;min-width:0}
 .c-marks{display:flex;align-items:center;gap:6px;color:var(--dim);margin-left:auto}
 .mk{display:grid;place-items:center;font-size:11px;font-weight:500}
 .mk svg{width:13px;height:13px;stroke-width:1.7}
-.mk.accent{color:var(--accent)}.mk.ok{color:var(--ok)}.mk.warn{color:var(--warn)}.mk.run{color:var(--run)}
+.mk.accent{color:var(--accent)}.mk.ok{color:var(--ok)}.mk.warn{color:var(--warn)}.mk.run{color:var(--run)}.mk.ask{animation:askp 1.6s ease-in-out infinite}@keyframes askp{50%{opacity:.35}}@media (prefers-reduced-motion:reduce){.mk.ask{animation:none}}
 .chip.proj{color:var(--ink);background:color-mix(in srgb,var(--dim) 12%,transparent);box-shadow:none;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;display:inline-block;overflow-wrap:normal}
 .chip{display:inline-flex;align-items:center;gap:5px;min-height:20px;padding:1px 8px;border-radius:11px;overflow-wrap:anywhere;font-size:11px;font-weight:500;color:var(--dim);box-shadow:inset 0 0 0 1px var(--line)}
 .chip i{width:6px;height:6px;border-radius:50%;background:var(--dim)}
@@ -226,6 +240,9 @@ aside.wide{width:100%;border-left:0}#pbody:has(.term){display:flex;flex-directio
 .ftr{display:flex;justify-content:space-between;gap:16px;padding:6px 28px;border-top:1px solid var(--line);color:var(--dim);font-size:12px;flex-wrap:wrap;align-items:center}
 .ftr span+span,.ftr a+a{margin-left:14px}.ftr .strip{font-size:12px}.ftr .strip .st{display:inline-grid}
 /* The footer is out of the eye's path, so the waiting alert is filled, not just outlined. */
+/* phones: the status strip moves into a sheet under the header, opened by #fbtn; the dot says a run waits or a filter is on */
+#fbtn{position:relative;display:none}body.paged #fbtn{display:none!important}#fbtn.wait::after,#fbtn.on::after{content:"";position:absolute;right:6px;top:6px;width:7px;height:7px;border-radius:50%;background:var(--warn);box-shadow:0 0 0 2px var(--bg)}#fbtn.on::after{background:var(--accent)}
+@media(max-width:640px){#fbtn:not([hidden]){display:grid;order:2;flex:none}body .hdr .combo{flex-basis:calc(50% - 30px)}.ftr{display:none}.ftr.on{display:flex;position:fixed;z-index:10;left:12px;right:12px;padding:12px;background:var(--bg-2);border:1px solid var(--line);border-radius:var(--r);box-shadow:var(--shadow-2)}}
 .ftr .strip .attn{color:var(--ink);background:color-mix(in srgb,var(--warn) 18%,transparent);box-shadow:inset 0 0 0 1px var(--warn)}.ftr .strip .attn:hover,.ftr .strip .attn.on{background:color-mix(in srgb,var(--warn) 30%,transparent)}.ftr .strip .attn svg{color:var(--warn)}.ftr .st svg{width:12px;height:12px}
 .ftr a{color:var(--dim);cursor:pointer;white-space:nowrap;text-decoration:none;display:inline-flex;align-items:center;gap:5px}.ftr a>svg{width:13px;height:13px}.ftr a:hover{color:var(--ink)}
 
@@ -235,7 +252,7 @@ aside.wide{width:100%;border-left:0}#pbody:has(.term){display:flex;flex-directio
 aside{position:fixed;top:0;right:0;bottom:0;z-index:11;width:520px;max-width:100%;background:var(--bg-2);border-left:1px solid var(--line);box-shadow:var(--shadow-2);display:flex;flex-direction:column;transform:translateX(100%);visibility:hidden;transition:transform .18s,visibility .18s}
 aside.open{transform:none;visibility:visible}
 /* Settings and the Icebox are pages: the same panel, docked into the app column, full width like the board */
-body.paged #board,body.paged .ftr,body.paged .scrim{display:none}
+body.paged #board,body.paged .ftr,body.paged .scrim,body.paged #bq{display:none}
 /* The Icebox keeps the project bar with its own title, without New idea or the panel's header; Settings has none */
 body.paged:not(.ice) .hdr,body.ice aside.docked>header{display:none}body.ice #newtop{visibility:hidden}
 aside.docked{position:static;z-index:auto;flex:1;min-height:0;width:auto;transform:none;visibility:visible;transition:none;box-shadow:none;border:0;background:none}
@@ -290,7 +307,7 @@ aside .foot .more .menu-pop{left:0;right:auto;top:auto;bottom:calc(100% + 4px)}.
 .sgrp{background:color-mix(in srgb,var(--dim) 9%,var(--bg-2));border-radius:var(--r);overflow:hidden}
 .srow{display:grid;grid-template-columns:1fr auto;gap:2px 16px;padding:11px 16px;min-height:44px}
 .srow:not([hidden])~.srow:not([hidden]){border-top:1px solid var(--line);margin-left:16px;padding-left:0;padding-right:16px}
-.srow label{font-weight:400;font-size:15px}
+.srow label{font-weight:400;font-size:15px;align-self:center}
 .srow>:nth-child(2){grid-column:2;grid-row:1;align-self:center;justify-self:end}
 .srow .hint{grid-column:1/-1;grid-row:2;margin:0;font-size:12px;color:var(--dim);line-height:1.45;max-width:46ch}
 .srow input.sel,.srow select.sel{width:170px;border:0;background-color:transparent;text-align:right;color:var(--dim);box-shadow:none}
@@ -319,7 +336,7 @@ aside .foot .more .menu-pop{left:0;right:auto;top:auto;bottom:calc(100% + 4px)}.
 .updpop{display:none;position:absolute;right:0;top:calc(100% + 6px);z-index:20;width:min(360px,80vw);padding:10px 14px;border:1px solid var(--line);border-radius:var(--r);background:var(--bg-2);box-shadow:var(--shadow-1);font-size:13px;line-height:1.5}
 .updnew:hover .updpop,.updnew:focus-within .updpop{display:block}
 .updpop ul{margin:0 0 8px;padding-left:18px}.updpop li{margin:2px 0}.updpop a{color:var(--accent)}
-.updbar.quiet{border-color:var(--line);background:var(--bg-2);color:var(--dim)}
+.updbar.quiet{border:0;background:none;padding:0;margin-bottom:32px;color:var(--dim)}#psub:empty{display:none}
 .toast.on.rep{pointer-events:auto}.toast a{color:inherit;margin-left:8px;text-decoration:underline;text-underline-offset:2px}
 .help{position:fixed;inset:0;z-index:12;display:none;align-items:center;justify-content:center;background:color-mix(in srgb,var(--bg) 60%,transparent);backdrop-filter:blur(3px)}
 .help.on{display:flex}.help div{background:var(--bg-2);border:1px solid var(--line);border-radius:var(--r);padding:24px 28px;box-shadow:var(--shadow-2)}
@@ -330,7 +347,9 @@ aside .foot .more .menu-pop{left:0;right:auto;top:auto;bottom:calc(100% + 4px)}.
 .ice-bar{display:flex;align-items:center;gap:8px;margin:8px 0 8px}
 .cg-onb{border:1px solid color-mix(in srgb,var(--accent) 45%,var(--line));background:color-mix(in srgb,var(--accent) 8%,var(--bg-2));border-radius:var(--r);padding:14px 16px;margin:4px 0 12px}
 .cg-onb b{font-size:14px;color:var(--ink-hi)}.cg-onb p{margin:6px 0 12px;font-size:13px;color:var(--dim);line-height:1.5}
-.cg-onb .acts{display:flex;justify-content:flex-end;gap:8px;flex-wrap:wrap}
+.cg-onb .acts{display:flex;align-items:center;gap:8px;flex-wrap:wrap}.cg-onb .end,.src-add .acts .end,.ice-form-acts .end{flex:1}
+.ice-filt{position:relative}.ice-filt>summary{list-style:none;cursor:pointer;position:relative}.ice-filt>summary::-webkit-details-marker{display:none}.ice-filt>summary.on::after{content:"";position:absolute;right:6px;top:6px;width:7px;height:7px;border-radius:50%;background:var(--accent);box-shadow:0 0 0 2px var(--bg)}
+.ice-fpop{position:absolute;right:0;top:calc(100% + 4px);z-index:9;display:flex;flex-direction:column;gap:6px;padding:8px;background:var(--bg-2);border:1px solid var(--line);border-radius:var(--r);box-shadow:var(--shadow-2)}.ice-fpop .ice-combo .menu-pop{left:auto;right:0}
 .ice-bar .count{font-size:13px;font-weight:600;color:var(--ink)}
 .ice-bar .end{flex:1}
 .ice-bar .btn,.ice-bulk .btn,.ice-ra .btn{display:inline-flex;align-items:center;gap:6px}
@@ -448,7 +467,7 @@ a.schip:hover{color:var(--ink);border-color:color-mix(in srgb,var(--line) 60%,va
 .src-add .acts .btn{flex-shrink:0}
 @media(max-width:480px){.src-add .two,.src-add .two.plat{grid-template-columns:1fr}}
 @media(max-width:900px){main{grid-template-columns:1fr;padding-inline:16px;gap:8px}.hdr,.ftr,aside.docked>header,aside.docked>.body{padding-inline:16px}.more{display:grid}.card:hover .age{display:inline}.toast{left:16px;max-width:calc(100% - 32px)}}
-@media(max-width:640px){.hdr{gap:8px 12px}.hdr h1{order:0;flex:1 0 50%}#newtop{order:1}.hdr .combo{order:2;flex:1 1 calc(50% - 6px);min-width:0}.hdr .combo>.sel{width:100%;max-width:none}.hdr .sp{display:none}.ftr{gap:6px 12px}}
+@media(max-width:640px){.hdr{gap:8px 12px}.hdr h1{order:0;flex:1 0 50%}#newtop{order:1}.hdr .combo{order:2;flex:1 1 calc(50% - 6px);min-width:0}.hdr .combo>.sel{width:100%;max-width:none}.hdr .sp{display:none}#bq{order:3;flex:1 0 100%;width:auto}.ftr{gap:6px 12px}}
 @media(hover:none){#kbd{display:none}}
 .skel{display:block;border-radius:6px;background:linear-gradient(90deg,var(--line) 25%,color-mix(in srgb,var(--line) 45%,transparent) 50%,var(--line) 75%);background-size:200% 100%;animation:skel 1.2s ease-in-out infinite}@keyframes skel{from{background-position:200% 0}to{background-position:-200% 0}}
 @media(prefers-reduced-motion:reduce){*,*::before,*::after{transition:none!important;animation:none!important}}
@@ -473,8 +492,10 @@ a.schip:hover{color:var(--ink);border-color:color-mix(in srgb,var(--line) 60%,va
 <symbol id="i-mic" viewBox="0 0 24 24"><rect x="9" y="3" width="6" height="11" rx="3"/><path d="M5 11a7 7 0 0 0 14 0M12 18v3M9 21h6"/></symbol>
 <symbol id="i-pen" viewBox="0 0 24 24"><path d="M12 20h9M16.5 3.5a2.1 2.1 0 0 1 3 3L7 19l-4 1 1-4z"/></symbol>
 <symbol id="i-x" viewBox="0 0 24 24"><path d="M18 6L6 18M6 6l12 12"/></symbol>
+<symbol id="i-filter" viewBox="0 0 24 24"><path d="M4 5h16l-6 8v6l-4-2v-4z"/></symbol>
 <symbol id="i-note" viewBox="0 0 24 24"><path d="M6 3h9l4 4v14H6z"/><path d="M14 3v5h5M9 13h6M9 17h6"/></symbol>
 <symbol id="i-trash" viewBox="0 0 24 24"><path d="M3 6h18M8 6V4h8v2M6 6l1 14h10l1-14M10 11v6M14 11v6"/></symbol>
+<symbol id="i-ask" viewBox="0 0 24 24"><path d="M21 12a8 8 0 0 1-11.6 7.1L4 20l1-4.6A8 8 0 1 1 21 12z"/><path d="M9.8 9.5a2.3 2.3 0 0 1 4.4.8c0 1.5-2.2 2-2.2 3.2M12 16.5h.01"/></symbol>
 <symbol id="i-term" viewBox="0 0 24 24"><path d="M4 17l6-5-6-5M12 19h8"/></symbol>
 <symbol id="i-close" viewBox="0 0 24 24"><path d="M18 6L6 18M6 6l12 12"/></symbol>
 <symbol id="i-more" viewBox="0 0 24 24"><circle cx="5" cy="12" r="1.2" fill="currentColor"/><circle cx="12" cy="12" r="1.2" fill="currentColor"/><circle cx="19" cy="12" r="1.2" fill="currentColor"/></symbol>
@@ -543,6 +564,8 @@ a.schip:hover{color:var(--ink);border-color:color-mix(in srgb,var(--line) 60%,va
   <h1>Board</h1>
   <div class="combo" id="combo"><button class="sel" id="proj" aria-label="project" aria-haspopup="listbox" aria-expanded="false"></button><div class="menu-pop" id="projpop" hidden><input class="sel" id="projq" aria-label="Search projects" placeholder="Search projects…" spellcheck="false" autocomplete="off"><div id="projs" role="listbox"></div></div></div>
   <div class="combo" id="showc" hidden><button class="sel" id="show" aria-label="Projects shown" aria-haspopup="true" aria-expanded="false"></button><div class="menu-pop" id="showpop" hidden><input class="sel" id="showq" aria-label="Search projects" placeholder="Search projects…" spellcheck="false" autocomplete="off"><div id="shows"></div><div class="pop-ft"><span id="showcount"></span><button id="showall">Show all</button></div></div></div>
+  <button class="ib" id="fbtn" aria-label="Filter by status" title="Filter by status" aria-expanded="false" hidden><svg><use href="#i-filter"/></svg></button>
+  <input type="search" class="sel" id="bq" placeholder="Filter cards  /" aria-label="Filter cards" spellcheck="false" autocomplete="off">
   <span class="sp"></span>
   <button class="btn pri" id="newtop">New idea</button>
 </div>