@bongos/core 1.19.1011 → 1.19.1013

package/modules/hall-ui/public/thinking.js

@@ -1,418 +0,0 @@
-// modules/hall-ui/public/thinking.js — THE ROOM (task 1004098 / BV2.R03 of
-// goal 1000095, criterion `ideator-nothing-is-lost`; spec
-// docs/specs/bongos-v2-ideator-surface.md, the agreed shape is
-// docs/design/mocks/ideator-surface/Room.dc.html).
-//
-// "A plain overview of one's own thinking: what was filed, what it became, its
-// size, and whether it still burns." It is deliberately unglamorous — rows, a
-// size, a state — because it is the page a person opens daily and the sky is
-// the ambient one.
-//
-// IT IS THE AUTHOR'S OWN VIEW, and that is spec decision 19 rather than a
-// convenience: the profile's idea trail (profile.js, `activity-ideas`) stays
-// exactly as it is, because it is what SOMEONE ELSE sees on you — three columns,
-// capped, inside an activity log about a person. This page is about the
-// thinking, not about the thinker, so it reads your own trail whole and spends
-// its width on what the profile has no room for: the size and the state. The
-// two surfaces share a READ and nothing else, which is why neither is built out
-// of the other.
-//
-// EVERY NUMBER ON THIS PAGE IS THE SERVER'S. `GET /inbox/by-builder/:id`
-// composes four attachers over each trail row — the descent, what it paid
-// (`size`), which of the five objects it is (`state`) — and this file draws
-// them. It derives no state, compresses no size and counts no brightness:
-// modules/ideas/idea-state.js exists precisely so that the room, the descent
-// and the sky cannot answer the same question three ways (ADR 0322), and the
-// word for each object comes from the one shared table in ./idea-objects.js.
-//
-// WHY IT LOADS THE WHOLE TRAIL AND NOT ONE PAGE OF IT. The four figures over
-// the list — filed / ignited / still burning / burned out — are a claim about a
-// person's whole body of thinking, and computed over a 20-row window they would
-// be a claim about a window while looking exactly like a claim about a life.
-// So the page renders its first window immediately (the read is not cheap: a
-// descent walk and a ledger read per page) and then keeps fetching in the
-// background, re-rendering as it goes, until the trail is exhausted or the cap
-// below is reached. If the cap is reached the foot SAYS the figures cover the
-// newest N — an honest partial beats a silent one.
-
-(() => {
-  'use strict';
-
-  const API = '/api/bongos';
-  // baseUrl:'' — this page builds full paths itself through api.request, the
-  // way work.js and copy-desk.js do, because the trail read is reached by a
-  // path the generated namespaced client does not carry a method for. The two
-  // idioms must never be mixed on one page (see idea.js's note on what happens
-  // when they are).
-  const api = window.BongosClient.createClient({ baseUrl: '', credentials: 'same-origin', throwOnError: false });
-  const { escapeHtml, $, fmtDate } = window.OTB;
-  const objects = window.OTBIdeaObjects;
-
-  const hallBase = () => (location.hostname.startsWith('builders.') ? '' : '/builders');
-  const ideaHref = (id) => `${hallBase()}/idea/${encodeURIComponent(id)}`;
-  const taskHref = (id) => `${hallBase()}/task/${encodeURIComponent(id)}`;
-
-  // The server's own ceiling (modules/ideas/trail.js IDEA_TRAIL_MAX_LIMIT), so
-  // the background load takes the fewest round trips the route allows.
-  const PAGE = 100;
-  // Three pages. A trail longer than this exists — and when it does the foot
-  // says so rather than the figures quietly describing the newest 300 as though
-  // they described everything.
-  const CAP = 300;
-
-  const state = {
-    ideas: [],
-    total: 0,
-    capped: false,
-    loading: false,
-    filter: 'everything',
-    tabs: null,
-  };
-
-  // ---- what a row says it became -------------------------------------------
-  //
-  // The OUTCOME column, and the one place this file composes a sentence rather
-  // than printing a field. It is built from the ledger facts the row already
-  // carries and never from the state: a satellite says it was folded in because
-  // `merged_into_idea_id` is set, not because the resolver called it a
-  // satellite — so a disagreement between the two shows up as a visibly odd row
-  // instead of being smoothed over into agreement.
-  //
-  // `descent_tasks` is what the roots went on to cause, and it deliberately
-  // EXCLUDES those roots (attachDescentToTrail leaves them out so the first hop
-  // is not paid twice), which is why the two counts are added rather than one
-  // being read as the whole.
-  function becameHtml(idea) {
-    if (idea.merged_into_idea_id) {
-      const title = idea.merged_into_idea_title || `idea ${idea.merged_into_idea_id}`;
-      return `folded into <a href="${ideaHref(idea.merged_into_idea_id)}">${escapeHtml(title)}</a>`;
-    }
-
-    const lineage = Array.isArray(idea.lineage_tasks) ? idea.lineage_tasks : [];
-    const roots = new Set();
-    for (const t of lineage) if (t && t.task_id != null) roots.add(String(t.task_id));
-    // The legacy column is the only answer for a promotion that predates
-    // ideas_task_lineage (the same guard idea.js's descentRows() carries).
-    if (roots.size === 0 && idea.promoted_to_task_id != null) roots.add(String(idea.promoted_to_task_id));
-
-    if (roots.size === 0) {
-      if (idea.status === 'discarded') {
-        return idea.triage_note
-          ? `declined — ${escapeHtml(idea.triage_note)}`
-          : 'declined at triage';
-      }
-      return '<span class="tr-quiet">nothing yet</span>';
-    }
-
-    const bits = [];
-    // A single root gets its name and a link, because with one task the title
-    // IS the outcome. Several get a count — five titles in a cell is not an
-    // overview, which is what this page is.
-    if (roots.size === 1) {
-      const id = [...roots][0];
-      const named = lineage.find((t) => t && String(t.task_id) === id);
-      const title = (named && named.title) || idea.promoted_task_title || `task ${id}`;
-      bits.push(`<a href="${taskHref(id)}">${escapeHtml(title)}</a>`);
-    } else {
-      bits.push(`${roots.size} tasks`);
-    }
-
-    const descent = Array.isArray(idea.descent_tasks) ? idea.descent_tasks : [];
-    if (descent.length > 0) {
-      bits.push(`<span class="tr-quiet">and ${descent.length} more below ${descent.length === 1 ? 'it' : 'them'}</span>`);
-    }
-
-    // The nod is the one ACTIONABLE thing this column can carry: a task sitting
-    // at backlog inside a goal is one Metic+ promote from claimable, and the
-    // whole point of surfacing position (idea-state.js) was that the queue
-    // becomes something a person can see rather than remember to open.
-    const pos = objects.positionWord(idea.state);
-    if (pos === 'waiting for a nod') bits.push('<span class="tr-nod">waiting for a nod</span>');
-
-    return bits.join(' · ');
-  }
-
-  // ---- size ----------------------------------------------------------------
-  //
-  // The bar's width is the server's `scale` and nothing else. Size is
-  // long-tailed, so economy compresses it ONCE at the read
-  // (modules/economy/idea-size.js compressIdeaSize) and the direction is
-  // explicit that the compressed value is what a drawing uses while the true
-  // figure is shown beside it. A second curve here — a log of a log — is
-  // exactly how the sky and the room would end up drawing the same thought at
-  // two different sizes.
-  function sizeHtml(idea) {
-    const size = idea.size;
-    if (!size || typeof size.credits !== 'number') {
-      // `size: null` is "the reward port could not be asked", not "it earned
-      // nothing" (trail-size.js). Drawing it as a zero would be a claim.
-      return '<span class="tr-quiet" title="the ledger could not be read">unknown</span>';
-    }
-    if (size.credits <= 0) return '<span class="tr-quiet">—</span>';
-    const pct = Math.max(4, Math.round(Number(size.scale || 0) * 100));
-    // A size computed from the descent an idea already had, rather than from
-    // payouts actually made (spec decision 17). The marker rides wherever the
-    // number is shown or the number quietly claims to be money that was spent.
-    const mark = size.historical === true
-      ? '<abbr class="tr-hist" title="computed from the descent this idea already had — not payouts that were made">part historical</abbr>'
-      : '';
-    // THE BAR KEEPS ITS WIDTH AND LOSES ITS COLOUR WHEN THE WORK IS GONE, which
-    // is the agreed shape (Room.dc.html draws the bar in the accent only while
-    // `alive > 0`) and the picture the whole two-channel model exists for: a
-    // thought that caused a great deal of work the project then tore out reads
-    // LARGE AND DEAD, not small. Width is size and never falls; colour is the
-    // live channel. Set from the same `state` the object column draws, so the
-    // two cells of a row cannot disagree — and only when the removal facts were
-    // actually READABLE, because `brightness: null` is "we could not look" and
-    // greying a bar on that basis would state something nobody checked.
-    const st = idea.state;
-    const out = st && st.attributable === true && st.hasWork === true && st.brightness === 0;
-    return `<span class="tr-size"${out ? ' data-lit="out"' : ''}>
-        <span class="tr-size__bar" style="--w:${pct}%"></span>
-        <span class="tr-size__n">${escapeHtml(String(size.credits))}</span>
-      </span>${mark}`;
-  }
-
-  // ---- the object ----------------------------------------------------------
-  //
-  // The mark restates in SHAPE what the cell also says in words — the sheet's
-  // own rule for the grade badge, and the reason the glyph is not decoration: a
-  // mark distinguished only by colour tells a colour-blind reader nothing.
-  // Brightness rides the glyph's opacity AND the sentence beside it, so dimness
-  // is never the only channel either.
-  function objectHtml(idea) {
-    const st = idea.state;
-    const o = objects.objectFor(st && st.state);
-    const bright = objects.brightnessWord(st);
-    const pos = objects.positionWord(st);
-    // `brightness: null` on a thought that HAS work means the removal facts
-    // could not be read. It must not be drawn as a dim star — the glyph stays
-    // full and the words carry the doubt.
-    const lit = (st && st.hasWork === true && st.attributable === true && typeof st.brightness === 'number')
-      ? st.brightness
-      : 1;
-    const sub = bright || pos || o.blurb.split('.')[0];
-    return `<span class="tr-obj" data-object="${escapeHtml(String((st && st.state) || 'unknown'))}" style="--lit:${lit.toFixed(2)}">
-        <span class="tr-obj__glyph" aria-hidden="true"></span>
-        <span class="tr-obj__body">
-          <span class="tr-obj__label">${escapeHtml(o.label)}</span>
-          <span class="tr-obj__sub">${escapeHtml(sub)}</span>
-        </span>
-      </span>`;
-  }
-
-  function rowHtml(idea) {
-    const st = idea.state;
-    // NO ID COLUMN, which is the agreed shape (the mock's five columns are the
-    // thought, filed, became, size, object) and not only a saving of width: an
-    // id is a lookup key, and on the one page where every row is YOURS there is
-    // nothing to look up — you know which thought it is by reading it. The id
-    // is still one click away, on the record the title links to, and it rides
-    // the link's title so it can be copied without leaving.
-    return `<tr data-object="${escapeHtml(String((st && st.state) || 'unknown'))}">
-      <td class="tr-thought"><a href="${ideaHref(idea.id)}" title="Idea ${escapeHtml(String(idea.id))}">${escapeHtml(idea.title || `Idea ${idea.id}`)}</a></td>
-      <td class="ledger__date">${escapeHtml(fmtDate(idea.captured_at))}</td>
-      <td class="tr-became">${becameHtml(idea)}</td>
-      <td class="tr-sizecell">${sizeHtml(idea)}</td>
-      <td class="tr-objcell">${objectHtml(idea)}</td>
-    </tr>`;
-  }
-
-  // ---- the figures ---------------------------------------------------------
-  //
-  // Four counts, each one a plain tally over the rows in hand — no thresholds
-  // and no judgement. "filed" is the SERVER's total rather than the loaded
-  // length, because that one is knowable in full from the first response even
-  // when the rest is still arriving.
-  //
-  // "ignited" is `hasWork`, which is the resolver's own word for "this has been
-  // paid for something" — not a status. An idea can be promoted, sit in a goal,
-  // and have ignited nothing; that is the distinction the direction draws and
-  // counting statuses here would erase it.
-  function figuresHtml() {
-    const rows = state.ideas;
-    const by = (fn) => rows.filter(fn).length;
-    const figs = [
-      { n: state.total, label: 'filed', tone: '' },
-      { n: by((i) => i.state && i.state.hasWork === true), label: 'ignited', tone: '' },
-      { n: by((i) => i.state && i.state.state === 'star'), label: 'still burning', tone: 'warm' },
-      { n: by((i) => i.state && i.state.state === 'remnant'), label: 'burned out', tone: 'dim' },
-    ];
-    return figs.map((f) => `<div class="tr-fig"${f.tone ? ` data-tone="${f.tone}"` : ''}>
-        <span class="tr-fig__n">${escapeHtml(String(f.n))}</span>
-        <span class="tr-fig__label">${escapeHtml(f.label)}</span>
-      </div>`).join('');
-  }
-
-  // ---- the filter strip ----------------------------------------------------
-  //
-  // The tab ids ARE the five state values, so a deep link is `#remnant` and the
-  // strip cannot drift from the vocabulary: the order comes from
-  // idea-objects.js ORDER and the labels from its table.
-  //
-  // A tab whose count is zero is HIDDEN rather than shown empty or disabled.
-  // Five dead pills over a new builder's two ideas is noise about objects they
-  // do not have; the strip grows as their thinking does. It is done by
-  // visibility and not by rebuilding the strip, so the hash of a filter that
-  // later empties still resolves instead of throwing.
-  function buildTabs() {
-    const kit = window.OTBKit;
-    const mount = $('#tr-filters');
-    if (!kit || !mount || state.tabs) return;
-    const tabs = [{ id: 'everything', label: 'everything' }].concat(
-      objects.ORDER.map((id) => ({ id, label: objects.objectFor(id).label }))
-    );
-    state.tabs = kit.makeTabs({
-      mount,
-      tabs,
-      hash: true,
-      // syncTabs BEFORE the rows, and not only on a load: the "never hide the
-      // filter the reader is looking through" rule is a property of the
-      // CURRENT filter, so it has to be re-applied whenever that changes. A
-      // filter can be selected without a load — the strip syncs its hash, so
-      // `#remnant` on a trail with no remnants arrives here directly — and
-      // painting rows alone would leave the reader on an empty list whose
-      // control had just been hidden.
-      onChange: (id) => { state.filter = id; syncTabs(); paintRows(); },
-    });
-  }
-
-  function syncTabs() {
-    if (!state.tabs) return;
-    const counts = { everything: state.ideas.length };
-    for (const id of objects.ORDER) counts[id] = 0;
-    for (const i of state.ideas) {
-      const k = i.state && i.state.state;
-      if (k in counts) counts[k] += 1;
-    }
-    for (const id of Object.keys(counts)) {
-      state.tabs.setCount(id, counts[id]);
-      const btn = state.tabs.el.querySelector(`[data-tab="${window.CSS.escape(id)}"]`);
-      // The active filter is never hidden, even at zero: hiding the control a
-      // reader is currently looking through would leave them staring at an
-      // empty list with no way back to everything.
-      if (btn) btn.hidden = counts[id] === 0 && id !== 'everything' && id !== state.filter;
-    }
-  }
-
-  // ---- painting ------------------------------------------------------------
-
-  function visibleIdeas() {
-    if (state.filter === 'everything') return state.ideas;
-    return state.ideas.filter((i) => i.state && i.state.state === state.filter);
-  }
-
-  function paintRows() {
-    const rows = visibleIdeas();
-    const body = $('#tr-body');
-    if (rows.length === 0) {
-      body.innerHTML = state.ideas.length === 0
-        ? `<p class="tr-empty">You have not filed anything yet. <a href="${hallBase()}/ideas">File a thought</a> — it takes one line.</p>`
-        : `<p class="tr-empty">Nothing of yours is ${escapeHtml(objects.objectFor(state.filter).label)} right now.</p>`;
-      return;
-    }
-    body.innerHTML = `<table class="ledger tr-table">
-      <thead><tr>
-        <th>The thought</th>
-        <th class="ledger__date">Filed</th>
-        <th>Became</th>
-        <th>Size</th>
-        <th>Object</th>
-      </tr></thead>
-      <tbody>${rows.map(rowHtml).join('')}</tbody>
-    </table>`;
-  }
-
-  function paint() {
-    $('#tr-figs').innerHTML = figuresHtml();
-    syncTabs();
-    paintRows();
-    const foot = $('#tr-foot');
-    const bits = [];
-    if (state.loading) bits.push(`Reading the rest of your trail — ${state.ideas.length} of ${state.total} so far.`);
-    else if (state.capped) bits.push(`Showing your newest ${state.ideas.length} of ${state.total}; the figures above count those.`);
-    if (!state.loading && !state.capped && state.ideas.length > 0) {
-      bits.push('Size never falls. Brightness is how much of the work a thought caused is still alive, and that is the part that can go out.');
-    }
-    foot.innerHTML = bits.map((b) => escapeHtml(b)).join(' ');
-    foot.hidden = bits.length === 0;
-  }
-
-  function subLine() {
-    const sub = $('#tr-sub');
-    if (!sub) return;
-    sub.textContent = state.total === 0
-      ? 'Nothing filed yet'
-      : `${state.total} thought${state.total === 1 ? '' : 's'} filed`;
-  }
-
-  // ---- the read ------------------------------------------------------------
-
-  async function fetchPage(builderId, offset) {
-    const r = await api.request('GET',
-      `${API}/inbox/by-builder/${encodeURIComponent(builderId)}?limit=${PAGE}&offset=${offset}`);
-    if (r.status === 401) { window.location.assign(`${API}/auth/web/start`); return null; }
-    if (!r.ok || !r.data) throw new Error(`idea trail → ${r.status}`);
-    return r.data;
-  }
-
-  function fail(msg) {
-    $('#tr-body').innerHTML = `<p class="tr-empty">${escapeHtml(msg)}</p>`;
-    $('#tr-foot').hidden = true;
-  }
-
-  async function main() {
-    // Who is looking. The page is the AUTHOR's own view, so the id is the
-    // viewer's and never a query parameter: /thinking?builder=41 would be a
-    // second, worse profile page, and the profile already exists.
-    const me = await api.request('GET', `${API}/me`);
-    if (me.status === 401) { window.location.assign(`${API}/auth/web/start`); return; }
-    if (!me.ok || !me.data || !me.data.builder) return fail('Could not work out who you are — try signing in again.');
-    const builderId = me.data.builder.id;
-
-    let first;
-    try {
-      first = await fetchPage(builderId, 0);
-    } catch (_) {
-      return fail('Could not read your idea trail.');
-    }
-    if (!first) return;
-
-    state.ideas = Array.isArray(first.ideas) ? first.ideas : [];
-    state.total = Number(first.total) || state.ideas.length;
-    state.loading = state.ideas.length < state.total && state.ideas.length < CAP;
-    subLine();
-    buildTabs();
-    paint();
-
-    // The rest, in the background. A failure here leaves the first window
-    // rendered and says so in the foot rather than blanking a page that is
-    // already useful — the same posture idea.js takes with its /me read.
-    while (state.loading) {
-      let next;
-      try {
-        next = await fetchPage(builderId, state.ideas.length);
-      } catch (_) {
-        state.loading = false;
-        state.capped = true;
-        break;
-      }
-      if (!next) return;
-      const batch = Array.isArray(next.ideas) ? next.ideas : [];
-      state.total = Number(next.total) || state.total;
-      if (batch.length === 0) { state.loading = false; break; }
-      state.ideas = state.ideas.concat(batch);
-      if (state.ideas.length >= CAP && state.ideas.length < state.total) {
-        state.capped = true;
-        state.loading = false;
-      } else if (state.ideas.length >= state.total) {
-        state.loading = false;
-      }
-      subLine();
-      paint();
-    }
-    paint();
-  }
-
-  main();
-})();