sergio/takana

1<style>
2:root{
3  --bg:#eef0f3; --panel:#ffffff; --panel-2:#f6f7f9; --ink:#1b1e24; --ink-2:#5b636f;
4  --line:#dce0e6; --steel:#4a7291; --ember:#dd6b3d;
5  --sealed:#3f8f61; --debt:#bf922f; --never:#8f6234; --unhashable:#bb443c;
6  --sealed-bg:#e7f1eb; --debt-bg:#f6efdc; --never-bg:#efe6da; --unhashable-bg:#f4e2e0;
7}
8@media (prefers-color-scheme:dark){:root{
9  --bg:#12151a; --panel:#1a1e25; --panel-2:#20252e; --ink:#e7eaef; --ink-2:#98a1af;
10  --line:#2a303a; --steel:#7aa6c8; --ember:#e97d4f;
11  --sealed:#59b483; --debt:#d8b054; --never:#b98a54; --unhashable:#d76258;
12  --sealed-bg:#182a20; --debt-bg:#2a2617; --never-bg:#271f16; --unhashable-bg:#2c1a19;
13}}
14:root[data-theme="light"]{
15  --bg:#eef0f3; --panel:#ffffff; --panel-2:#f6f7f9; --ink:#1b1e24; --ink-2:#5b636f;
16  --line:#dce0e6; --steel:#4a7291; --ember:#dd6b3d;
17  --sealed:#3f8f61; --debt:#bf922f; --never:#8f6234; --unhashable:#bb443c;
18  --sealed-bg:#e7f1eb; --debt-bg:#f6efdc; --never-bg:#efe6da; --unhashable-bg:#f4e2e0;
19}
20:root[data-theme="dark"]{
21  --bg:#12151a; --panel:#1a1e25; --panel-2:#20252e; --ink:#e7eaef; --ink-2:#98a1af;
22  --line:#2a303a; --steel:#7aa6c8; --ember:#e97d4f;
23  --sealed:#59b483; --debt:#d8b054; --never:#b98a54; --unhashable:#d76258;
24  --sealed-bg:#182a20; --debt-bg:#2a2617; --never-bg:#271f16; --unhashable-bg:#2c1a19;
25}
26*{box-sizing:border-box}
27body{margin:0;background:var(--bg);color:var(--ink);
28  font-family:system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;line-height:1.5;
29  -webkit-font-smoothing:antialiased}
30.mono{font-family:ui-monospace,"SF Mono","JetBrains Mono","Cascadia Code",Menlo,monospace}
31.wrap{max-width:1180px;margin:0 auto;padding:clamp(20px,4vw,48px)}
32header{display:flex;flex-wrap:wrap;align-items:baseline;gap:12px 20px;margin-bottom:28px}
33h1{font-size:clamp(1.5rem,3vw,2.1rem);margin:0;font-weight:680;letter-spacing:-.02em}
34h1 .mark{color:var(--ember)}
35.sub{color:var(--ink-2);font-size:.9rem}
36.sub .mono{color:var(--ink)}
37.eyebrow{text-transform:uppercase;letter-spacing:.12em;font-size:.7rem;font-weight:650;
38  color:var(--ink-2);margin:0 0 10px}
39section{margin-bottom:34px}
40/* progress */
41.progress{height:34px;display:flex;border-radius:8px;overflow:hidden;border:1px solid var(--line);
42  background:var(--panel)}
43.seg{display:block;height:100%}
44.s-sealed{background:var(--sealed)} .s-debt{background:var(--debt)}
45.s-never{background:var(--never)} .s-unhashable{background:var(--unhashable)}
46.legend{display:flex;flex-wrap:wrap;gap:16px;margin-top:12px;font-size:.82rem;color:var(--ink-2)}
47.legend b{color:var(--ink);font-weight:600}
48.legend .k{display:inline-block;width:10px;height:10px;border-radius:3px;margin-right:6px;
49  vertical-align:baseline}
50/* tiles */
51.tiles{display:grid;grid-template-columns:repeat(4,1fr);gap:14px}
52@media(max-width:640px){.tiles{grid-template-columns:repeat(2,1fr)}}
53.tile{background:var(--panel);border:1px solid var(--line);border-radius:10px;padding:16px 18px;
54  border-top:3px solid var(--line)}
55.tile.s-sealed{border-top-color:var(--sealed)} .tile.s-debt{border-top-color:var(--debt)}
56.tile.s-never{border-top-color:var(--never)} .tile.s-unhashable{border-top-color:var(--unhashable)}
57.tile-n{font-size:2rem;font-weight:680;font-family:ui-monospace,monospace;line-height:1;
58  font-variant-numeric:tabular-nums}
59.tile-l{font-size:.82rem;color:var(--ink-2);margin-top:6px}
60.tile-p{font-size:.78rem;color:var(--ink-2);margin-top:2px;font-family:ui-monospace,monospace}
61/* class grid */
62.cls-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:14px}
63.cls{background:var(--panel);border:1px solid var(--line);border-radius:10px;padding:15px 16px}
64.cls-head{display:flex;justify-content:space-between;align-items:baseline;margin-bottom:10px}
65.cls-name{font-weight:620} .cls-tot{font-family:ui-monospace,monospace;color:var(--ink-2);
66  font-variant-numeric:tabular-nums}
67.bar{height:9px;display:flex;border-radius:5px;overflow:hidden;background:var(--panel-2)}
68.cls-foot{display:flex;justify-content:space-between;margin-top:9px;font-size:.78rem}
69.cls-foot .ok{color:var(--sealed)} .cls-foot .warn{color:var(--debt)}
70.cls-foot .muted{color:var(--ink-2)}
71/* debt table */
72.controls{display:flex;flex-wrap:wrap;gap:10px;align-items:center;margin-bottom:14px}
73.controls input{background:var(--panel);border:1px solid var(--line);color:var(--ink);
74  padding:8px 12px;border-radius:8px;font-size:.9rem;min-width:200px;font-family:ui-monospace,monospace}
75.controls input:focus{outline:2px solid var(--steel);outline-offset:1px}
76.fbtn{background:var(--panel);border:1px solid var(--line);color:var(--ink-2);padding:7px 13px;
77  border-radius:999px;font-size:.8rem;cursor:pointer;font-weight:550}
78.fbtn[aria-pressed="true"]{background:var(--steel);border-color:var(--steel);color:#fff}
79.tbl-wrap{overflow-x:auto;border:1px solid var(--line);border-radius:10px;background:var(--panel)}
80table{border-collapse:collapse;width:100%;font-size:.88rem}
81th{text-align:left;font-size:.7rem;text-transform:uppercase;letter-spacing:.08em;color:var(--ink-2);
82  font-weight:600;padding:11px 14px;border-bottom:1px solid var(--line);background:var(--panel-2);
83  position:sticky;top:0}
84td{padding:10px 14px;border-bottom:1px solid var(--line);vertical-align:top}
85.drow:last-child td{border-bottom:none}
86.c-name{font-family:ui-monospace,monospace;font-weight:550;white-space:nowrap}
87.c-name .ver{color:var(--ink-2);font-weight:400;font-size:.82em;margin-left:5px}
88.s-dot{display:inline-block;width:8px;height:8px;border-radius:50%;margin-right:8px;
89  vertical-align:middle}
90.tag{font-size:.72rem;padding:2px 8px;border-radius:999px;font-weight:600;white-space:nowrap}
91.t-c{background:var(--panel-2);color:var(--ink-2)} .t-go{background:#1f3a4d33;color:var(--steel)}
92.t-rust{background:#dd6b3d22;color:var(--ember)} .t-gui{background:#8f623422;color:var(--never)}
93.t-kernel{background:#bb443c22;color:var(--unhashable)}
94.ready{color:var(--sealed);font-weight:600;font-size:.8rem}
95.impact{display:inline-block;background:var(--ember);color:#fff;font-family:ui-monospace,monospace;
96  font-size:.72rem;font-weight:650;padding:1px 6px;border-radius:999px;margin-left:4px}
97.blocked{color:var(--debt);font-weight:600;font-size:.8rem;font-family:ui-monospace,monospace}
98.c-deps{max-width:560px}
99.chip{display:inline-block;font-family:ui-monospace,monospace;font-size:.74rem;padding:2px 7px;
100  border-radius:5px;margin:2px 3px 2px 0;border:1px solid transparent}
101.chip.s-sealed{background:var(--sealed-bg);color:var(--sealed)}
102.chip.s-debt{background:var(--debt-bg);color:var(--debt);border-color:var(--debt)}
103.chip.s-never{background:var(--never-bg);color:var(--never);border-color:var(--never)}
104.chip.s-unhashable{background:var(--unhashable-bg);color:var(--unhashable);border-color:var(--unhashable)}
105.chip.s-wanted,.chip.s-ajeno{background:var(--panel);color:var(--ink-2);border-color:var(--line)}
106.chip.empty{color:var(--ink-2);font-style:italic}
107.hint{color:var(--ink-2);font-size:.82rem;margin:0 0 14px}
108.count{color:var(--ink-2);font-size:.82rem;margin-left:auto;font-family:ui-monospace,monospace}
109footer{color:var(--ink-2);font-size:.78rem;margin-top:36px;padding-top:16px;
110  border-top:1px solid var(--line);line-height:1.7}
111footer .mono{color:var(--ink)}
112@media(prefers-reduced-motion:no-preference){.seg,.fbtn{transition:.15s}}
113</style>
114<div class="wrap">
115  <header>
116    <h1>estado del build <span class="mark">·</span> <span class="mono">hammer</span></h1>
117    <div class="sub">937 recetas · grafo cierra sin ciclos · grafo cerrado · <span class="mono">2026-09-17 21:00 UTC</span></div>
118  </header>
119
120  <section>
121    <p class="eyebrow">avance del corpus</p>
122    <div class="progress"><span class="seg s-sealed" style="width:99.57310565635005%" title="sellado al día: 933"></span><span class="seg s-debt" style="width:0.10672358591248667%" title="deuda de rebuild: 1"></span><span class="seg s-never" style="width:0.32017075773745995%" title="nunca construida: 3"></span></div>
123    <div class="legend">
124      <span><span class="k s-sealed"></span><b>933</b> sellado al día</span>
125      <span><span class="k s-debt"></span><b>1</b> deuda de rebuild</span>
126      <span><span class="k s-never"></span><b>3</b> nunca construida</span>
127      <span><b>3</b> imagen ajena (qorpa) (fuera del corpus)</span>
128      
129    </div>
130  </section>
131
132  <section>
133    <div class="tiles"><div class="tile s-sealed">
134      <div class="tile-n">933</div>
135      <div class="tile-l">sellado al día</div>
136      <div class="tile-p">99.6%</div>
137    </div><div class="tile s-debt">
138      <div class="tile-n">1</div>
139      <div class="tile-l">deuda de rebuild</div>
140      <div class="tile-p">0.1%</div>
141    </div><div class="tile s-never">
142      <div class="tile-n">3</div>
143      <div class="tile-l">nunca construida</div>
144      <div class="tile-p">0.3%</div>
145    </div><div class="tile s-unhashable">
146      <div class="tile-n">0</div>
147      <div class="tile-l">ilegible</div>
148      <div class="tile-p">0.0%</div>
149    </div></div>
150  </section>
151
152  <section>
153    <p class="eyebrow">dónde está la deuda</p>
154    <div class="cls-grid"><div class="cls">
155      <div class="cls-head"><span class="cls-name">Go</span>
156        <span class="cls-tot">366</span></div>
157      <div class="bar"><span class="seg s-sealed" style="width:100.0%"></span></div>
158      <div class="cls-foot"><span class="ok">366 al día</span>
159        <span class="muted">0 en deuda</span></div>
160    </div><div class="cls">
161      <div class="cls-head"><span class="cls-name">C</span>
162        <span class="cls-tot">286</span></div>
163      <div class="bar"><span class="seg s-sealed" style="width:99.3006993006993%"></span><span class="seg s-never" style="width:0.6993006993006993%"></span></div>
164      <div class="cls-foot"><span class="ok">284 al día</span>
165        <span class="warn">2 en deuda</span></div>
166    </div><div class="cls">
167      <div class="cls-head"><span class="cls-name">Rust</span>
168        <span class="cls-tot">236</span></div>
169      <div class="bar"><span class="seg s-sealed" style="width:99.57627118644068%"></span><span class="seg s-debt" style="width:0.423728813559322%"></span></div>
170      <div class="cls-foot"><span class="ok">235 al día</span>
171        <span class="warn">1 en deuda</span></div>
172    </div><div class="cls">
173      <div class="cls-head"><span class="cls-name">GUI</span>
174        <span class="cls-tot">41</span></div>
175      <div class="bar"><span class="seg s-sealed" style="width:100.0%"></span></div>
176      <div class="cls-foot"><span class="ok">41 al día</span>
177        <span class="muted">0 en deuda</span></div>
178    </div><div class="cls">
179      <div class="cls-head"><span class="cls-name">kernel</span>
180        <span class="cls-tot">8</span></div>
181      <div class="bar"><span class="seg s-sealed" style="width:87.5%"></span><span class="seg s-never" style="width:12.5%"></span></div>
182      <div class="cls-foot"><span class="ok">7 al día</span>
183        <span class="warn">1 en deuda</span></div>
184    </div></div>
185  </section>
186
187  <section>
188    <p class="eyebrow">huecos, en orden de ataque</p>
189    <p class="hint">Cada receta en deuda con sus deps de build coloreadas por estado. Una fila
190      <b style="color:var(--sealed)">lista</b> tiene todas sus deps al día ⇒ se puede construir ya;
191      el pastilla <span class="impact">↑N</span> es cuántas otras en deuda desbloquea (ordenadas por
192      ahí: construí primero las de más impacto). Una <b style="color:var(--debt)">espera N</b> depende
193      de N recetas que también están en deuda. 3 listas ahora.</p>
194    <div class="controls">
195      <button class="fbtn" data-cls="all" aria-pressed="true">todas</button><button class="fbtn" data-cls="c" aria-pressed="false">C (2)</button><button class="fbtn" data-cls="rust" aria-pressed="false">Rust (1)</button><button class="fbtn" data-cls="kernel" aria-pressed="false">kernel (1)</button>
196      <button class="fbtn" id="ready" data-ready aria-pressed="false">sólo listas</button>
197      <input id="q" placeholder="buscar receta…" spellcheck="false" aria-label="buscar receta">
198      <span class="count" id="count">4 en deuda</span>
199    </div>
200    <div class="tbl-wrap">
201      <table>
202        <thead><tr><th>receta</th><th>clase</th><th>estado</th><th>deps de build</th></tr></thead>
203        <tbody><tr class="drow" data-cls="kernel" data-ready="1" data-name="linux-firmware" data-unblocks="1">
204      <td class="c-name"><span class="s-dot s-never"></span>linux-firmware <span class="ver">20260910</span></td>
205      <td class="c-cls"><span class="tag t-kernel">kernel</span></td>
206      <td class="c-badge"><span class="ready">lista</span> <span class="impact" title="desbloquea 1 recetas en deuda">↑1</span></td>
207      <td class="c-deps"><span class="chip s-sealed" title="sellado al día">busybox</span></td>
208    </tr><tr class="drow" data-cls="c" data-ready="1" data-name="zsh" data-unblocks="0">
209      <td class="c-name"><span class="s-dot s-never"></span>zsh <span class="ver">5.9</span></td>
210      <td class="c-cls"><span class="tag t-c">C</span></td>
211      <td class="c-badge"><span class="ready">lista</span></td>
212      <td class="c-deps"><span class="chip s-sealed" title="sellado al día">binutils</span><span class="chip s-sealed" title="sellado al día">libcap</span><span class="chip s-sealed" title="sellado al día">linux-headers</span><span class="chip s-sealed" title="sellado al día">make</span><span class="chip s-sealed" title="sellado al día">ncurses</span><span class="chip s-sealed" title="sellado al día">pcre2</span></td>
213    </tr><tr class="drow" data-cls="rust" data-ready="1" data-name="rust" data-unblocks="0">
214      <td class="c-name"><span class="s-dot s-debt"></span>rust <span class="ver">1.97.0</span></td>
215      <td class="c-cls"><span class="tag t-rust">Rust</span></td>
216      <td class="c-badge"><span class="ready">lista</span></td>
217      <td class="c-deps"><span class="chip s-sealed" title="sellado al día">cmake</span><span class="chip s-sealed" title="sellado al día">curl</span><span class="chip s-sealed" title="sellado al día">llvm21</span><span class="chip s-sealed" title="sellado al día">openssl-threads</span><span class="chip s-sealed" title="sellado al día">pkgconf</span><span class="chip s-sealed" title="sellado al día">python3</span><span class="chip s-sealed" title="sellado al día">samurai</span></td>
218    </tr><tr class="drow" data-cls="c" data-ready="0" data-name="firmware-tigerlake" data-unblocks="0">
219      <td class="c-name"><span class="s-dot s-never"></span>firmware-tigerlake <span class="ver">20260910</span></td>
220      <td class="c-cls"><span class="tag t-c">C</span></td>
221      <td class="c-badge"><span class="blocked">espera 1</span></td>
222      <td class="c-deps"><span class="chip s-sealed" title="sellado al día">busybox</span><span class="chip s-never" title="nunca construida">linux-firmware</span><span class="chip s-sealed" title="sellado al día">sof-firmware</span></td>
223    </tr></tbody>
224      </table>
225    </div>
226  </section>
227
228  <footer>
229    Derivado de <span class="mono">recipes/*.toml</span> + <span class="mono">hammer hash</span> + el store,
230    por <span class="mono">scripts/build-state.py</span>. La fuente firme es
231    <span class="mono">docs/state/build-state.json</span> (versionada: su <span class="mono">git diff</span> es el avance).
232    Regenerar: <span class="mono">scripts/build-state.py && scripts/build-state-view.py</span>.
233  </footer>
234</div>
235<script>
236const rows=[...document.querySelectorAll('.drow')];
237const q=document.getElementById('q');
238let cls='all',onlyReady=false;
239function apply(){
240  const t=(q.value||'').toLowerCase();let shown=0;
241  for(const r of rows){
242    const okC=cls==='all'||r.dataset.cls===cls;
243    const okR=!onlyReady||r.dataset.ready==='1';
244    const okT=!t||r.dataset.name.includes(t);
245    const v=okC&&okR&&okT;r.style.display=v?'':'none';if(v)shown++;
246  }
247  document.getElementById('count').textContent=shown+' en deuda';
248}
249document.querySelectorAll('.fbtn[data-cls]').forEach(b=>b.onclick=()=>{
250  document.querySelectorAll('.fbtn[data-cls]').forEach(x=>x.setAttribute('aria-pressed','false'));
251  b.setAttribute('aria-pressed','true');cls=b.dataset.cls;apply();});
252const rb=document.getElementById('ready');
253rb.onclick=()=>{onlyReady=!onlyReady;rb.setAttribute('aria-pressed',onlyReady);apply();};
254q.oninput=apply;
255</script>