' + esc(fmtDate(meta.date)) + (meta.time ? " · " + esc(meta.time) : "") + (meta.location ? " · " + esc(meta.location) : "") + "

New session

Turn an agenda into a working notes form

Upload your board agenda and we’ll lay out a note field for every item — with one-tap motion language built in.

{ e.preventDefault(); e.currentTarget.classList.add("is-over"); }} onDragLeave={(e) => e.currentTarget.classList.remove("is-over")} onDrop={(e) => { e.preventDefault(); e.currentTarget.classList.remove("is-over"); handleFile(e.dataTransfer.files[0]); }} > handleFile(e.target.files[0])} /> {busy ? (

Extracting text from {busy}…

) : (

Drop your agenda here or click to browse

Word, PDF, or plain text

)} {err &&

{err}

}

or paste the agenda text

setPaste(e.target.value)}
            placeholder={"1. Call to Order\n2. Approval of Minutes\n3. Treasurer's Report\n   a. FY26 Budget\n…"} rows={5} />
          <div className="upload__btns">
            <button className="btn btn--primary" disabled={!paste.trim()} onClick={() => ingest(paste, "Pasted agenda")}>Build notes form</button>
            <button className="btn btn--ghost" onClick={() => ingest(SAMPLE_TEXT, "Sample agenda")}>Try a sample agenda</button>
          </div>
        </div>
      </div>
    );
  }

// ================= Outline rail =================
  function Outline({ items, meta, onJump, onMeta }) {
    const [openMeta, setOpenMeta] = useState(false);
    const done = items.filter((it) => (it.notes && it.notes.trim()) || it.status || it.vote.recorded || it.actions.length).length;
    return (
      <aside className="rail">
        <div className="rail__progress">
          <div className="rail__progresstop">
            <span className="rail__progresslabel">Progress</span>
            <span className="rail__progresscount">{done}/{items.length}</span>
          </div>
          <div className="rail__bar"><span style={{ width: (items.length ? (done / items.length) * 100 : 0) + "%" }}></span></div>
        </div>

<button className={"rail__metatoggle" + (openMeta ? " is-open" : "")} onClick={() => setOpenMeta(!openMeta)}>
          Meeting details <span className="rail__chev">{openMeta ? "▾" : "▸"}</span>
        </button>
        {openMeta && (
          <div className="rail__meta">
            <Field label="Organization" value={meta.org} onChange={(v) => onMeta({ org: v })} />
            <div className="field-row">
              <Field label="Meeting" value={meta.kind} onChange={(v) => onMeta({ kind: v })} />
              <Field label="Date" type="date" value={meta.date} onChange={(v) => onMeta({ date: v })} />
            </div>
            <div className="field-row">
              <Field label="Time" value={meta.time} onChange={(v) => onMeta({ time: v })} />
              <Field label="Location" value={meta.location} onChange={(v) => onMeta({ location: v })} />
            </div>
            <Field label="Directors present" area value={meta.present} onChange={(v) => onMeta({ present: v })} placeholder="Comma-separated names" />
            <Field label="Absent" area value={meta.absent} onChange={(v) => onMeta({ absent: v })} placeholder="Comma-separated names" />
            <label className="quorum">
              <input type="checkbox" checked={meta.quorum} onChange={(e) => onMeta({ quorum: e.target.checked })} />
              A quorum was present
            </label>
          </div>
        )}

<nav className="rail__nav" aria-label="Agenda outline">
          {items.map((it) => {
            const filled = (it.notes && it.notes.trim()) || it.status || it.vote.recorded || it.actions.length;
            const lvl = it.level || (it.isSub ? 1 : 0);
            return (
              <button key={it.id} className={"rail__item rail__item--lvl" + lvl} onClick={() => onJump(it.id)}>
                <span className={"rail__dot" + (filled ? " is-filled" : "")}></span>
                {it.number
                  ? <span className="rail__inum">{it.number}</span>
                  : <span className="rail__inum rail__inum--bullet">·</span>}
                <span className="rail__ititle">{it.title}</span>
                {it.page && <span className="rail__page">{it.page}</span>}
              </button>
            );
          })}
        </nav>
      </aside>
    );
  }

function Field({ label, value, onChange, type, area, placeholder }) {
    return (
      <label className="field">
        <span className="field__label">{label}</span>
        {area
          ? <textarea className="field__input" rows={2} value={value} onChange={(e) => onChange(e.target.value)} placeholder={placeholder} />
          : <input className="field__input" type={type || "text"} value={value} onChange={(e) => onChange(e.target.value)} placeholder={placeholder} />}
      </label>
    );
  }

// ================= App =================
  function App() {
    const saved = load();
    const [meta, setMeta] = useState(saved ? saved.meta : DEFAULT_META);
    const [items, setItems] = useState(saved ? saved.items : []);
    const [title, setTitle] = useState(saved ? saved.title : "");
    const [view, setView] = useState("notes");
    const [exportOpen, setExportOpen] = useState(false);
    const [savedFlash, setSavedFlash] = useState(false);

const scrollRef = useRef(null);
    const itemRefs = useRef({});
    const firstRender = useRef(true);

// tweaks
    const [t, setTweak] = window.useTweaks(window.TWEAK_DEFAULTS);
    useEffect(() => {
      const r = document.documentElement;
      r.setAttribute("data-density", t.density);
      r.style.setProperty("--accent", t.accent);
      r.style.setProperty("--accent-soft", t.accent + "1f");
    }, [t.density, t.accent]);

// persist (debounced-ish)
    useEffect(() => {
      if (firstRender.current) { firstRender.current = false; return; }
      save({ meta, items, title });
      setSavedFlash(true);
      const id = setTimeout(() => setSavedFlash(false), 1200);
      return () => clearTimeout(id);
    }, [meta, items, title]);

const patchItem = useCallback((id, changes) => {
      setItems((prev) => prev.map((it) => (it.id === id ? Object.assign({}, it, changes) : it)));
    }, []);

function printPdf() {
      setView("minutes");
      setExportOpen(false);
      requestAnimationFrame(() => setTimeout(() => window.print(), 120));
    }

if (!items.length) {
      return (
        <div className="app app--empty">
          <UploadView onLoad={onLoad} />
          <Tweaks t={t} setTweak={setTweak} />
        </div>
      );
    }

return (
      <div className="app">
        <header className="topbar">
          <div className="topbar__brand">
            <span className="topbar__mark" aria-hidden="true"></span>
            <div className="topbar__titles">
              <div className="topbar__app">Board Minutes</div>
              <div className="topbar__org">{meta.org}</div>
            </div>
          </div>

<div className="topbar__center">
            <div className="viewswitch" role="tablist">
              <button className={"viewswitch__btn" + (view === "notes" ? " is-on" : "")} onClick={() => setView("notes")}>Take notes</button>
              <button className={"viewswitch__btn" + (view === "minutes" ? " is-on" : "")} onClick={() => setView("minutes")}>Minutes preview</button>
            </div>
          </div>

<div className="topbar__right">
            <span className={"saveflash" + (savedFlash ? " is-on" : "")}>{savedFlash ? "Saved" : "All changes saved"}</span>
            <div className="exportwrap">
              <button className="btn btn--primary btn--sm" onClick={() => setExportOpen(!exportOpen)}>Export ▾</button>
              {exportOpen && (
                <React.Fragment>
                  <div className="exportbackdrop" onClick={() => setExportOpen(false)}></div>
                  <div className="exportmenu">
                    <button onClick={() => { downloadWord(meta, items, title); setExportOpen(false); }}>
                      <b>Download Word</b><span>Editable .doc minutes</span>
                    </button>
                    <button onClick={printPdf}>
                      <b>Print / Save as PDF</b><span>Formatted minutes document</span>
                    </button>
                  </div>
                </React.Fragment>
              )}
            </div>
            <button className="btn btn--ghost btn--sm" onClick={startOver}>New</button>
          </div>
        </header>

<div className="workspace">
          <Outline items={items} meta={meta} onJump={jump} onMeta={(c) => setMeta((m) => Object.assign({}, m, c))} />

<main className="main" ref={scrollRef}>
            {view === "notes" ? (
              <div className="stream">
                <div className="stream__title">
                  <h1>{title || "Meeting notes"}</h1>
                  <p>{items.length} agenda items · type <kbd>m/s/u</kbd> + space anywhere to drop in a motion.</p>
                </div>
                {items.map((it, i) => (
                  <ItemCard key={it.id} item={it} index={i} onPatch={patchItem}
                    onRegister={(id, el) => { itemRefs.current[id] = el; }} />
                ))}
                <div className="stream__end">End of agenda</div>
              </div>
            ) : (
              <div className="previewwrap">
                <MinutesPreview meta={meta} items={items} />
              </div>
            )}
          </main>
        </div>

<datalist id="presenter-list">
          {PRESENTERS.map((p) => <option key={p} value={p} />)}
        </datalist>

<Tweaks t={t} setTweak={setTweak} />
      </div>
    );
  }

// ================= Tweaks panel =================
  function Tweaks({ t, setTweak }) {
    const { TweaksPanel, TweakSection, TweakRadio, TweakColor } = window;
    return (
      <TweaksPanel>
        <TweakSection label="Layout" />
        <TweakRadio label="Density" value={t.density} options={["compact", "comfortable"]} onChange={(v) => setTweak("density", v)} />
        <TweakSection label="Theme" />
        <TweakColor label="Accent" value={t.accent}
          options={["#1f3a5f", "#2f5d3a", "#6e2436", "#3a3f4a", "#5a4a23"]}
          onChange={(v) => setTweak("accent", v)} />
      </TweaksPanel>
    );
  }

window.MeetingApp = App;
})();

" + esc(meta.org) + "

Turn an agenda into a working notes form