<!--
================================================================================================
FERROW — the field ledger.        src/ui/app.html · one file · zero external requests
================================================================================================

DIRECTION (three considered, one committed)

  A. The dashboard.  Sidebar, topbar, stat cards, a chart nobody reads.  REJECTED — it is the
     shape every generated tool arrives in, it flatters the machine instead of the user, and it
     would make the change log one card among six when the change log is the entire argument.

  B. The terminal costume.  Monospace on near-black, blinking caret, fake prompt.  REJECTED —
     dishonest.  This surface exists precisely for the person who has never willingly opened a
     terminal; dressing the escape hatch up as the thing they escaped is a joke at their expense.

  C. THE FIELD LEDGER.  COMMITTED.  A furrow is a line cut through worked ground, and the mark is
     a worked field crossed by chords with the centre chord carried past the edge — work done,
     line still being drawn.  So the interface IS that drawing.  One continuous furrow line runs
     the full height of the page.  Every change an agent made is a CHORD crossing it: struck at
     an angle, dated, attributed, reversible.  Reverting does not delete a row — it UN-DRAWS the
     chord, leaving the ghost of the line that was there.  Nothing is hidden, because the promise
     the product makes is "you can see what your agents did", and a ledger that forgets its own
     corrections is not a ledger.

     The furrow is not decoration: it is drawn in two tones — the pale field at rest, and the
     WORKED segment in blue running from the mark down to the station you are standing on, so the
     line reports position and is, literally, still being drawn.

     Consequences, held to throughout: no cards (rows on a line, hairline rules); no boxes around
     content (the furrow is the only structure); the navigation hangs off the furrow as stations
     rather than sitting in a panel; the one accent that is not blue is HALT, and it is spent
     only on removal, reversal and refusal, so colour means something every time it appears.
     (It was CLAY until 2026-08-09.  Clay was a warm brown this file invented; the brand kit
     carries no warm hue, and every job clay held was a "this stopped" job, which is the kit's
     Halt.  Same meaning, a colour the brand actually owns.)

PALETTE — KIT-APPROVED ONLY (Chris, 2026-08-09: "fix it all. Use kit approved only.")
  Every light value is a hex published by ~/ruzylo/brain/brain/brand/ferrow-brandkit.html, under a
  local name.  Nothing is sampled from a screenshot, mixed, or nudged to taste.

  ground      #F5FAFF   KIT Mist       the page
  plate       #FFFFFF   KIT Paper      the reading surface
  rule        #DCEBFA   KIT line       hairlines, the drawn field
  hairline    #C2DDF5   KIT line-2     the furrow line at rest — and the ghost of an un-drawn chord
                                       (renamed from --furrow: in the kit, Furrow is the BLUE
                                        #0B5FCC, which this token is emphatically not)
  ink         #0A1A33   KIT Ink        headings, the thing you read — 17.38:1 on Paper
  ink-soft    #3E5573   KIT Ink-2      labels, body copy — 7.63:1
  ink-faint   #64748F   KIT Haze       timestamps, counts — 4.73:1 on Paper, 4.51:1 on Mist
                                       (the kit forbids Haze on Tint; no surface here uses Tint)
  light       #3EA0FF   KIT Signal     live, active, the drawing edge — fill only, never text
  working     #0B5FCC   KIT Furrow     the worked line, links, the committed state — 5.96:1
  halt        #B3261E   KIT Halt       removals, reverts, refusals, failures — 6.54:1
  verified    #1F7A5C   KIT Verified   passed, shipped, reconciled — 5.25:1. The only green.
                                       Declared but unspent on THIS surface: the ledger has no
                                       completion state of its own (a saved note is a chord, not a
                                       tick).  It is declared because the two surfaces carry one
                                       identical token set — web/index.html spends it on a ticked
                                       checkbox — and a token that exists on one surface and not
                                       the other is exactly the drift the parity guard exists for.

  CLAY IS GONE.  The old #A8563C carried "removals and reverts, and nothing else" — but the kit
  publishes no warm hue at all, so clay was a value this file invented and then defended.  Every
  use of it meant "stopped / undone / refused", which is precisely the kit's Halt, so that is
  where all of them went.  There is no warm value in Ferrow.

  DARK — SUPERSEDED, Chris 2026-08-09.
  The original reasoning, kept as history: "dark mode is a deliberate non-goal: 'Daylight' is the
  brand, and a local tool that ships one confident surface beats one that ships two half-tuned
  ones."  That held while this was the only surface.  It stopped holding the day web/index.html
  shipped — a product whose browser client is dark at night and whose desk client is not has two
  aesthetics, which is the exact failure the original argument was trying to prevent.  So the
  ruling is now PARITY: dark ships everywhere, and every surface ships the SAME variant.  Not two
  half-tuned surfaces — one tuned surface, rendered twice.

  What ships is NOT a dark brand — Ferrow still has none, and "Daylight" is still the brand.  What
  ships is the frozen kit's prescribed treatment for when the OPERATING SYSTEM, not the brand, is
  dark: ground becomes Ink, the mark and text invert to Paper white, the chords become Sky.  That
  is law from ~/ruzylo/brain/brain/brand/ferrow-brandkit.html, not a decision taken in this file.  It
  follows the system (prefers-color-scheme); there is no toggle, because a setting is a thing to
  get wrong and the system already knows the answer.

  Nothing below is invented.  Kit values are used as-is; the four the kit is silent on are derived
  from Ink #0A1A33 by lightness alone — no new hue — and carry their computed ratio, because the
  kit's standing order is "there is no fifth blue: a new value is a commission, and it must arrive
  with its ratio already computed."  Full derivation and the light-vs-ink reading of the kit's
  "Sky and Signal never carry information" rule are documented on the dark block in
  web/index.html — that file and this one are the parity pair; read it there, don't re-derive.

  ground      #0A1A33   KIT Ink
  plate       #0F2445   derived, Ink +1 step — white 15.46:1, Sky 8.27:1, both AAA
  rule        #1D3050   KIT, the kit's own on-ink border — hairline, never text
  hairline    #2B4468   derived, one step above rule — the line at rest and the un-drawn ghost
  ink         #FFFFFF   KIT Paper — 17.38:1, the kit's own AAA row
  ink-soft    #A9C2DE   KIT, the kit's on-ink secondary text — 9.48:1
  ink-faint   #7C97B8   derived — 5.77:1, and it carries only 10px tracked mono
  light       #7FC4FF   KIT Sky — 9.30:1, the prescribed on-ink chord
  working     #3EA0FF   KIT Signal — 6.35:1, links and the worked line
  halt        #EB8E89   KIT Halt, lightness-only (H 3.2deg / S 71.3% held, L 41% -> 73%) — the kit
                        publishes no on-ink state colour and its own #B3261E is 2.66:1 on Ink,
                        which fails.  7.25:1 on Ink, 6.45:1 on plate.
  verified    #30BB8D   KIT Verified, lightness-only (H 160.2deg / S 59.5% held, L 30% -> 46%) —
                        #1F7A5C is 3.31:1 on Ink and fails.  7.13:1 on Ink, 6.34:1 on plate.

  PARITY PARTNER: web/index.html.  These two files carry the same :root token names and the same
  two hex sets, on purpose.  Change one and you change the other in the same commit —
  test/ui-kit-alignment.test.mjs fails otherwise, and it also fails if either file drifts off-kit.

TYPE  (installed faces only — this page must render identically on a plane)
  The kit's pairing, verbatim: "a geometric display face for structure, the platform text face for
  reading, mono for anything a machine produced."  The display face was Iowan Old Style, a serif —
  which is not a face the kit has ever carried.  It is now Avenir Next, set at 600 and tracked
  tight per the kit's scale, because (kit) "set tight it reads precise rather than friendly, which
  is the register Ferrow needs — competent, unhurried, not warm."

  display : 'Avenir Next', Avenir, Futura, 'Century Gothic', 'Segoe UI', system-ui, sans-serif
  ui      : -apple-system, BlinkMacSystemFont, 'SF Pro Text', 'Helvetica Neue', Inter, 'Segoe UI', …
  ledger  : 'SF Mono', SFMono-Regular, 'IBM Plex Mono', Menlo, Consolas, 'Liberation Mono', monospace
  Contrast is extreme on purpose: a 64px geometric display against 10px tracked monospace labels,
  and almost nothing in between.  The size ramp is unchanged from the surface that shipped; only
  the face, its weight and its tracking moved, because those are what the kit specifies.

MOTION
  ONE load choreography: the furrow draws itself down the page (900ms), its worked segment fades in
  behind it (450ms in), then the ledger's chords strike across it in sequence (40ms apart).
  It happens once, on first paint, and never again —
  a tool that re-animates on every click is a tool you start dreading.  Interactions are 160ms.
  prefers-reduced-motion removes all of it, including the un-drawing, which becomes an instant
  state change.

HONESTY
  Every number on this page is counted from the vault.  Empty states say what is actually true
  and what to do about it.  No placeholder rows, no sample data, no demo mode.
================================================================================================
-->
<title>Ferrow — the field ledger</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="color-scheme" content="light dark">

<style>
/* Light = the kit's Daylight palette verbatim; see this file's PALETTE header for the
   local-name -> kit-name map and the published ratio behind each value. The scrim and the lift are
   the one pair that is not a kit hex: they are Ink #0A1A33 at alpha, which is the kit's own colour
   doing the only job the kit has no token for. */
:root{
  --ground:#F5FAFF; --plate:#FFFFFF; --rule:#DCEBFA; --hairline:#C2DDF5;
  --ink:#0A1A33; --ink-soft:#3E5573; --ink-faint:#64748F;
  --light:#3EA0FF; --working:#0B5FCC; --halt:#B3261E; --verified:#1F7A5C;
  --field:rgba(11,95,204,.05);
  --scrim:rgba(10,26,51,.16); --lift:rgba(10,26,51,.5);
  --display:'Avenir Next',Avenir,Futura,'Century Gothic','Segoe UI',system-ui,sans-serif;
  --ui:-apple-system,BlinkMacSystemFont,'SF Pro Text','Helvetica Neue',Inter,'Segoe UI',system-ui,sans-serif;
  --ledger:'SF Mono',SFMono-Regular,'IBM Plex Mono',Menlo,Consolas,'Liberation Mono',monospace;
  --rail:248px;
  --ease:cubic-bezier(.2,.7,.3,1);
}
/* ---- OS dark: the kit's ink treatment ---------------------------------------------------------
   AUTHORITY: ~/ruzylo/brain/brain/brand/ferrow-brandkit.html (FROZEN). Ferrow has no dark brand; this
   is the treatment for when the OS is dark. Kit values as-is, the rest derived from Ink #0A1A33 by
   lightness alone with the ratio computed — see this file's header, and see web/index.html, whose
   dark block is the PARITY PARTNER of this one and carries the full derivation.
   These two blocks must stay identical: test/ui-kit-alignment.test.mjs enforces it. */
@media (prefers-color-scheme:dark){
  :root{
    --ground:#0A1A33; --plate:#0F2445; --rule:#1D3050; --hairline:#2B4468;
    --ink:#FFFFFF; --ink-soft:#A9C2DE; --ink-faint:#7C97B8;
    --light:#7FC4FF; --working:#3EA0FF; --halt:#EB8E89; --verified:#30BB8D;
    --field:rgba(127,196,255,.10);
    /* the sheet lifts off a dark ground by shadow AND a heavier scrim; the light values vanish */
    --scrim:rgba(3,8,18,.52); --lift:rgba(0,0,0,.7);
  }
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;background:var(--ground);color:var(--ink);font-family:var(--ui);
  font-size:15px;line-height:1.55;-webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
a{color:var(--working);text-decoration:none}
button{font:inherit;color:inherit;background:none;border:0;padding:0;cursor:pointer}
:focus-visible{outline:2px solid var(--light);outline-offset:3px;border-radius:2px}

/* ---- the label: the one repeated typographic gesture ---------------------------------------- */
.label{
  font-family:var(--ledger);font-size:10px;letter-spacing:.16em;text-transform:uppercase;
  color:var(--ink-faint);font-weight:500;
}

/* ---- shell ----------------------------------------------------------------------------------- */
.shell{display:grid;grid-template-columns:var(--rail) minmax(0,1fr);min-height:100vh}

/* ---- the rail: stations hanging off the furrow ----------------------------------------------- */
.rail{
  /* the left padding is the furrow's margin: the line lives at x=14, the stations start at 44,
     so nothing is ever set on top of the line and every chord has real distance to cross. */
  position:sticky;top:0;height:100vh;padding:34px 0 26px 44px;
  display:flex;flex-direction:column;gap:38px;
}
.mark{display:flex;align-items:center;gap:11px}
.mark svg{width:34px;height:34px;display:block;overflow:visible}
.wordmark{
  font-family:var(--display);font-size:24px;letter-spacing:-.03em;font-weight:600;
  line-height:1;padding-top:2px;
}
.stations{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:1px;position:relative}
.station{position:relative;display:block;width:100%}
.station button{
  display:grid;grid-template-columns:26px 1fr;align-items:baseline;gap:10px;width:100%;
  padding:9px 14px 9px 0;text-align:left;color:var(--ink-soft);
  transition:color .16s var(--ease);position:relative;
}
.station button:hover{color:var(--ink)}
.station .n{font-family:var(--ledger);font-size:10px;color:var(--ink-faint);letter-spacing:.06em}
.station .t{font-family:var(--display);font-size:19px;line-height:1.15;letter-spacing:-.02em;font-weight:600}
.station .c{font-family:var(--ledger);font-size:10px;color:var(--ink-faint);margin-left:7px;letter-spacing:.04em}
.station[aria-current="true"] button{color:var(--ink)}
.station[aria-current="true"] .n{color:var(--working)}
/* the active station is marked by a chord crossing the furrow, not by a filled pill */
.station .chord{
  position:absolute;left:-38px;top:50%;width:0;height:1px;background:var(--working);
  transform:translateY(-50%);transition:width .2s var(--ease);pointer-events:none;
}
.station[aria-current="true"] .chord{width:34px;height:2px;background:var(--light)}
.station button:hover .chord{width:22px}

.railfoot{margin-top:auto;padding-right:24px;display:flex;flex-direction:column;gap:7px}
.vaultpath{
  font-family:var(--ledger);font-size:10.5px;color:var(--ink-faint);line-height:1.5;
  word-break:break-all;
}
.vaultpath b{color:var(--ink-soft);font-weight:500}

/* the furrow itself: one SVG line, full page height, behind everything */
#furrow{position:fixed;left:0;top:0;width:var(--rail);height:100vh;pointer-events:none;z-index:0}
/* TWO lines, one path. `.rest` is the whole field, at rest. `.worked` is how far down it has been
   cut — it runs from the mark to whichever station you are standing on, so the furrow is not
   decoration: it reports your position, and the line is literally still being drawn. */
#furrow .rest{stroke:var(--hairline);stroke-width:1.5;fill:none}
#furrow .worked{stroke:var(--working);stroke-width:2.5;fill:none;stroke-linecap:round;transition:stroke-dasharray .3s var(--ease)}

/* ---- plate ------------------------------------------------------------------------------------ */
.plate{
  background:var(--plate);border-left:1px solid var(--rule);min-width:0;position:relative;z-index:1;
  padding:34px clamp(24px,4.5vw,64px) 0;
}
.head{padding-bottom:26px;border-bottom:1px solid var(--rule);margin-bottom:4px}
.head h1{
  font-family:var(--display);font-weight:600;letter-spacing:-.035em;line-height:.95;
  font-size:clamp(38px,6.2vw,64px);margin:8px 0 0;
}
.head .sub{margin-top:12px;color:var(--ink-soft);max-width:60ch;font-size:14.5px}
.head .sub b{color:var(--ink);font-weight:500}

/* the search line is a rule you type on, not a rounded box */
.searchline{display:flex;align-items:center;gap:12px;margin:22px 0 0;border-bottom:1.5px solid var(--rule);padding-bottom:8px;transition:border-color .16s var(--ease)}
.searchline:focus-within{border-color:var(--light)}
.searchline input{
  flex:1;min-width:0;border:0;background:none;font-family:var(--display);font-size:21px;color:var(--ink);
  padding:2px 0;
}
.searchline input::placeholder{color:var(--ink-faint);font-style:italic}
.searchline input:focus{outline:none}

/* ---- the ledger: chords crossing a line ------------------------------------------------------- */
.ledger{position:relative;padding:26px 0 60px 46px;margin:0;list-style:none}
/* the work line — the furrow, continued into the content */
.ledger::before{
  content:'';position:absolute;left:11px;top:0;bottom:0;width:1.5px;background:var(--rule);
  transform-origin:top;
}
.entry{position:relative;padding:16px 0 17px;border-bottom:1px solid var(--rule)}
.entry:last-child{border-bottom:0}
/* the chord: a struck line crossing the work line, angled */
.entry .strike{
  position:absolute;left:-42px;top:26px;width:38px;height:12px;overflow:visible;pointer-events:none;
}
.entry .strike line{stroke:var(--working);stroke-width:2;stroke-linecap:square}
.entry[data-kind="remove"] .strike line{stroke:var(--halt)}
.entry[data-kind="revert"] .strike line{stroke:var(--halt);stroke-dasharray:3 3;stroke-width:1.5}
.entry[data-undone="true"] .strike line{stroke:var(--hairline);stroke-dasharray:2 4;stroke-width:1.5}
.entry .dot{position:absolute;left:-36px;top:29.5px;width:5px;height:5px;border-radius:50%;background:var(--light);}
.entry[data-kind="remove"] .dot,.entry[data-kind="revert"] .dot{background:var(--halt)}
.entry[data-undone="true"] .dot{background:var(--hairline)}

.entry .top{display:flex;flex-wrap:wrap;align-items:baseline;gap:10px 14px}
.entry .verb{
  font-family:var(--ledger);font-size:10px;letter-spacing:.16em;text-transform:uppercase;
  color:var(--working);font-weight:600;
}
.entry[data-kind="remove"] .verb,.entry[data-kind="revert"] .verb{color:var(--halt)}
.entry .file{font-family:var(--ledger);font-size:13.5px;color:var(--ink);word-break:break-all}
.entry[data-undone="true"] .file{color:var(--ink-faint);text-decoration:line-through;text-decoration-color:var(--hairline)}
.entry .when{font-family:var(--ledger);font-size:10.5px;color:var(--ink-faint);margin-left:auto;white-space:nowrap}
.entry .why{margin-top:7px;color:var(--ink-soft);font-size:14px;max-width:72ch}
.entry .who{font-family:var(--ledger);font-size:11px;color:var(--ink-faint)}
.entry .who b{color:var(--ink-soft);font-weight:500}
.entry .acts{display:flex;gap:18px;align-items:center;margin-top:10px}
.entry .act{
  font-family:var(--ledger);font-size:10.5px;letter-spacing:.11em;text-transform:uppercase;
  color:var(--ink-soft);border-bottom:1px solid var(--rule);padding-bottom:2px;
  transition:color .16s var(--ease),border-color .16s var(--ease);
}
.entry .act:hover{color:var(--working);border-color:var(--working)}
.entry .act.undo:hover{color:var(--halt);border-color:var(--halt)}
.entry .act[disabled]{color:var(--ink-faint);border-color:transparent;cursor:default}
.entry .undone-flag{
  font-family:var(--ledger);font-size:10px;letter-spacing:.13em;text-transform:uppercase;color:var(--halt);
}
.diff{margin-top:12px;display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:1px;background:var(--rule);border:1px solid var(--rule)}
.diff div{background:var(--plate);padding:11px 13px}
.diff pre{
  margin:6px 0 0;font-family:var(--ledger);font-size:12px;line-height:1.5;color:var(--ink-soft);
  white-space:pre-wrap;word-break:break-word;max-height:230px;overflow:auto;
}
.diff .gone{color:var(--halt)}

/* ---- the governance station -------------------------------------------------------------------
   The one station that is about the runtime rather than the vault, so it is the one place a banner
   is allowed: a halted machine has to be legible from the doorway. Everything else obeys the same
   rules as the rest of the page — no cards, hairline rules, the 10px tracked label as the only
   repeated gesture, and NOT ONE new colour. Halt is spent here exactly as it is spent in the ledger:
   on stopped, refused, and reversed. */
.banner{border-left:2px solid var(--verified);padding:4px 0 4px 18px;margin:26px 0 0;max-width:74ch}
.banner[data-halted="true"]{border-left-color:var(--halt)}
.banner h2{
  font-family:var(--display);font-weight:600;font-size:clamp(24px,3.2vw,34px);letter-spacing:-.028em;
  line-height:1.12;margin:6px 0 0;
}
.banner[data-halted="true"] h2{color:var(--halt)}
.banner p{margin:9px 0 0;color:var(--ink-soft);font-size:14.5px}
.banner .where{font-family:var(--ledger);font-size:12px;color:var(--ink);word-break:break-all}
.banner .acts{margin-top:14px}
.banner .act{
  font-family:var(--ledger);font-size:10.5px;letter-spacing:.11em;text-transform:uppercase;
  color:var(--ink-soft);border-bottom:1px solid var(--rule);padding-bottom:2px;
  transition:color .16s var(--ease),border-color .16s var(--ease);
}
.banner .act:hover{color:var(--halt);border-color:var(--halt)}
.banner[data-halted="true"] .act:hover{color:var(--verified);border-color:var(--verified)}
.banner .act[disabled]{color:var(--ink-faint);border-color:transparent;cursor:default}

/* the breaker: a count against a ceiling, drawn as ticks on the line the page already uses */
.gauge{display:flex;gap:4px;flex-wrap:wrap;margin:10px 0 0}
.gauge i{width:11px;height:11px;border:1px solid var(--hairline);border-radius:1px;display:block}
.gauge i[data-on="true"]{background:var(--light);border-color:var(--light)}
.gauge i[data-over="true"]{background:var(--halt);border-color:var(--halt)}
.section{padding:30px 0 0;border-top:1px solid var(--rule);margin-top:30px}
.section:first-child{border-top:0;margin-top:0}
.section h2{font-family:var(--display);font-weight:600;font-size:23px;letter-spacing:-.024em;margin:8px 0 0}
.section .note{margin:8px 0 0;color:var(--ink-soft);font-size:14px;max-width:72ch}
.section .note code{font-family:var(--ledger);font-size:12.5px;color:var(--ink)}

/* the meter: two pools side by side, because the partition IS the information */
.pools{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:0 34px;margin-top:14px}
.pool{padding:14px 0;border-top:1px solid var(--rule)}
.pool .amount{font-family:var(--display);font-size:27px;font-weight:600;letter-spacing:-.02em;margin-top:4px}
.pool[data-halted="true"] .amount{color:var(--halt)}
.pool .sub{font-family:var(--ledger);font-size:11px;color:var(--ink-faint);margin-top:4px}
.pool .why{margin-top:7px;color:var(--ink-soft);font-size:13.5px}

/* the spawn ledger tail: the ledger's own row, at ledger density */
.spawns{list-style:none;margin:14px 0 0;padding:0}
.spawns li{display:flex;gap:8px 16px;flex-wrap:wrap;align-items:baseline;padding:9px 0;border-top:1px solid var(--rule)}
.spawns .who{font-family:var(--ledger);font-size:12.5px;color:var(--ink);word-break:break-all}
.spawns .from{font-family:var(--ledger);font-size:11.5px;color:var(--ink-soft);word-break:break-all}
.spawns .at{font-family:var(--ledger);font-size:10.5px;color:var(--ink-faint);margin-left:auto;white-space:nowrap}
.spawns li[data-type="alert"]{border-left:2px solid var(--halt);padding-left:12px}
.spawns li[data-type="alert"] .who{color:var(--halt)}
.torn{margin-top:12px;color:var(--ink-soft);font-size:13.5px}

/* ---- new-note bar ----------------------------------------------------------------------------- */
.newbar{padding:18px 0 0;display:flex;justify-content:flex-end}
.newbar .act{
  font-family:var(--ledger);font-size:10.5px;letter-spacing:.11em;text-transform:uppercase;
  color:var(--ink-soft);border-bottom:1px solid var(--rule);padding-bottom:2px;
  transition:color .16s var(--ease),border-color .16s var(--ease);
}
.newbar .act:hover{color:var(--working);border-color:var(--working)}

/* ---- generic rows (notes, memory, models, skills, projects) ----------------------------------- */
.rows{list-style:none;margin:0;padding:22px 0 60px}
.row{border-bottom:1px solid var(--rule);padding:15px 0}
.row:last-child{border-bottom:0}
.row .rtop{display:flex;align-items:baseline;gap:12px;flex-wrap:wrap}
.row h3{margin:0;font-family:var(--display);font-size:20px;font-weight:600;letter-spacing:-.02em}
.row .path{font-family:var(--ledger);font-size:11px;color:var(--ink-faint);word-break:break-all}
.row .meta{margin-left:auto;font-family:var(--ledger);font-size:10.5px;color:var(--ink-faint);white-space:nowrap}
.row p{margin:6px 0 0;color:var(--ink-soft);font-size:14px;max-width:78ch}
.row .snippet mark{background:transparent;color:var(--ink);border-bottom:2px solid var(--light);padding-bottom:1px}
.row.click{cursor:pointer;transition:padding-left .16s var(--ease)}
.row.click:hover{padding-left:10px}
.row.click:hover h3{color:var(--working)}
.tag{
  font-family:var(--ledger);font-size:9.5px;letter-spacing:.14em;text-transform:uppercase;
  color:var(--ink-soft);border:1px solid var(--rule);padding:2px 6px;border-radius:2px;
}
.tag.on{color:var(--working);border-color:var(--light)}
.tag.off{color:var(--ink-faint)}
.tag.bad{color:var(--halt);border-color:var(--halt)}

/* ---- empty states: a sentence that is true, and a next step ---------------------------------- */
.empty{padding:52px 0 60px;max-width:56ch}
.empty h2{font-family:var(--display);font-weight:600;font-size:30px;margin:0 0 10px;letter-spacing:-.028em;line-height:1.15}
.empty p{margin:0;color:var(--ink-soft)}
.empty code{font-family:var(--ledger);font-size:13px;background:var(--ground);padding:2px 6px;border:1px solid var(--rule);border-radius:2px;color:var(--ink)}

/* ---- the note plate: slides in from the right, full height, not a modal card ------------------ */
.sheet{
  position:fixed;inset:0 0 0 auto;width:min(760px,100vw);background:var(--plate);
  border-left:1px solid var(--rule);box-shadow:-30px 0 70px -50px var(--lift);
  z-index:40;display:flex;flex-direction:column;transform:translateX(101%);
  transition:transform .22s var(--ease);
}
.sheet[data-open="true"]{transform:translateX(0)}
.scrim{position:fixed;inset:0;background:var(--scrim);z-index:39;opacity:0;pointer-events:none;transition:opacity .22s var(--ease)}
.scrim[data-open="true"]{opacity:1;pointer-events:auto}
.sheet header{padding:24px clamp(20px,3vw,34px) 16px;border-bottom:1px solid var(--rule);display:flex;align-items:flex-start;gap:16px}
.sheet header h2{margin:6px 0 0;font-family:var(--display);font-weight:600;font-size:27px;letter-spacing:-.028em;line-height:1.1;min-width:0;word-break:break-word}
.sheet header .x{font-family:var(--ledger);font-size:11px;letter-spacing:.13em;text-transform:uppercase;color:var(--ink-soft);margin-left:auto;white-space:nowrap}
.sheet header .x:hover{color:var(--halt)}
.sheet .editor{flex:1;min-height:0;display:flex;flex-direction:column;padding:0 clamp(20px,3vw,34px)}
.sheet textarea{
  flex:1;width:100%;border:0;resize:none;padding:22px 0;background:none;
  font-family:var(--ledger);font-size:13.5px;line-height:1.72;color:var(--ink);
}
.sheet textarea:focus{outline:none}
.sheet footer{
  padding:14px clamp(20px,3vw,34px) 18px;border-top:1px solid var(--rule);
  display:flex;align-items:center;gap:16px;flex-wrap:wrap;
}
.sheet footer .note{font-size:12.5px;color:var(--ink-soft);max-width:46ch;line-height:1.45}
.save{
  margin-left:auto;font-family:var(--ledger);font-size:11px;letter-spacing:.14em;text-transform:uppercase;
  color:var(--plate);background:var(--working);padding:10px 20px;border-radius:2px;
  transition:opacity .16s var(--ease);
}
.save:hover{opacity:.85}
/* disabled dims rather than recolours — a furrow-on-plate swap is unreadable on the ink ground */
.save[disabled]{opacity:.35;cursor:default}

/* ---- footer: the security sentence, always visible at the end of the page --------------------- */
.footline{
  grid-column:1/-1;border-top:1px solid var(--rule);background:var(--ground);
  padding:20px clamp(24px,4.5vw,64px);display:flex;gap:12px 28px;flex-wrap:wrap;align-items:baseline;
}
.footline p{margin:0;font-size:12.5px;color:var(--ink-soft);max-width:82ch;line-height:1.5}
.footline .label{white-space:nowrap}

/* ---- toast: one line, bottom left, no icons --------------------------------------------------- */
.toast{
  position:fixed;left:24px;bottom:22px;z-index:60;background:var(--ink);color:var(--ground);
  font-family:var(--ledger);font-size:11.5px;letter-spacing:.04em;padding:11px 16px;border-radius:2px;
  opacity:0;transform:translateY(8px);transition:opacity .18s var(--ease),transform .18s var(--ease);
  pointer-events:none;max-width:min(520px,calc(100vw - 48px));
}
.toast[data-on="true"]{opacity:1;transform:none}
.toast.bad{background:var(--halt)}

/* ---- load choreography: draw the furrow, then strike the chords ------------------------------- */
#furrow .rest{stroke-dasharray:var(--len);stroke-dashoffset:var(--len);animation:draw .9s var(--ease) forwards}
#furrow .worked{opacity:0;animation:fadein .5s var(--ease) .45s forwards}
@keyframes fadein{to{opacity:1}}
@keyframes draw{to{stroke-dashoffset:0}}
.ledger::before{animation:grow .9s var(--ease) forwards;transform:scaleY(0)}
@keyframes grow{to{transform:scaleY(1)}}
.stagger{opacity:0;animation:strike .34s var(--ease) forwards;animation-delay:calc(var(--i) * 40ms + 120ms)}
@keyframes strike{from{opacity:0;transform:translateX(-8px)}to{opacity:1;transform:none}}
.entry .strike line{stroke-dasharray:60;stroke-dashoffset:60;animation:cut .38s var(--ease) forwards;animation-delay:calc(var(--i) * 40ms + 200ms)}
@keyframes cut{to{stroke-dashoffset:0}}
/* un-drawing: the chord retracts the way it came, then the row settles into its ghost state */
.entry.undrawing .strike line{animation:uncut .34s var(--ease) forwards}
@keyframes uncut{from{stroke-dashoffset:0}to{stroke-dashoffset:60}}
.entry.undrawing{opacity:.55;transition:opacity .34s var(--ease)}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important;transition:none!important}
  .stagger{opacity:1}
  #furrow .rest{stroke-dashoffset:0}
  #furrow .worked{opacity:1}
  .ledger::before{transform:scaleY(1)}
  .entry .strike line{stroke-dashoffset:0}
}

@media (max-width:860px){
  :root{--rail:0px}
  #furrow{display:none}
  .shell{grid-template-columns:1fr}
  .rail{
    position:static;height:auto;padding:20px 20px 0;flex-direction:column;gap:18px;
    background:var(--ground);
  }
  .stations{flex-direction:row;flex-wrap:wrap;gap:0 20px}
  .station .chord{display:none}
  .station .t{font-size:16px}
  .station button{padding:6px 0}
  .plate{border-left:0;padding-top:22px}
  .railfoot{margin-top:4px}
}
</style>

<div class="shell">

  <!-- THE FURROW. One line, drawn once, running the full height of the window. Everything in the
       rail hangs off it; the ledger continues it into the content. -->
  <svg id="furrow" aria-hidden="true" preserveAspectRatio="none"></svg>

  <nav class="rail">
    <div class="mark">
      <!-- The Furrow vesica: two arcs enclosing a worked field, four chords crossing it, and the
           centre chord carried past the right edge — work done, line still being drawn. -->
      <svg viewBox="0 0 48 48" role="img" aria-label="Ferrow">
        <path d="M24 3.2 A24 24 0 0 1 24 44.8 A24 24 0 0 1 24 3.2 Z" fill="none" stroke="currentColor" stroke-width="1.6" style="color:var(--working)"/>
        <g stroke="currentColor" stroke-width="1.4" stroke-linecap="round" opacity=".55" style="color:var(--working)">
          <line x1="14.2" y1="14" x2="33.8" y2="14"/>
          <line x1="12.5" y1="19" x2="35.5" y2="19"/>
          <line x1="12.5" y1="29" x2="35.5" y2="29"/>
          <line x1="14.2" y1="34" x2="33.8" y2="34"/>
        </g>
        <line x1="12" y1="24" x2="47" y2="24" stroke="currentColor" stroke-width="2" stroke-linecap="round" style="color:var(--light)"/>
      </svg>
      <div class="wordmark">Ferrow</div>
    </div>

    <ul class="stations" id="stations"></ul>

    <div class="railfoot">
      <div class="label">Vault</div>
      <div class="vaultpath" id="vaultpath">reading…</div>
    </div>
  </nav>

  <main class="plate" id="plate">
    <div class="head">
      <div class="label" id="eyebrow">Ferrow</div>
      <h1 id="title">The ledger</h1>
      <div class="sub" id="subtitle"></div>
      <div class="searchline" id="searchline" hidden>
        <span class="label">Find</span>
        <input id="q" type="search" autocomplete="off" spellcheck="false" placeholder="a word you remember writing…" aria-label="Search your notes">
      </div>
    </div>
    <div id="view"></div>
  </main>

  <div class="footline">
    <span class="label">Why this is safe</span>
    <p id="security"></p>
  </div>
</div>

<div class="scrim" id="scrim"></div>
<aside class="sheet" id="sheet" aria-hidden="true">
  <header>
    <div style="min-width:0">
      <div class="label" id="sheetPath"></div>
      <h2 id="sheetTitle"></h2>
    </div>
    <button class="x" id="sheetClose">Close</button>
  </header>
  <div class="editor"><textarea id="sheetText" spellcheck="true" aria-label="Note text"></textarea></div>
  <footer>
    <p class="note" id="sheetNote"></p>
    <button class="save" id="sheetSave">Save</button>
  </footer>
</aside>

<div class="toast" id="toast" role="status" aria-live="polite"></div>

<script>
(() => {
  'use strict';

  // The session token, injected by server.mjs at boot. It never leaves this page except as a
  // request header back to the process that minted it.
  const TOKEN = '__FERROW_SESSION_TOKEN__';

  const $ = (id) => document.getElementById(id);
  const esc = (s) => String(s == null ? '' : s).replace(/[&<>"']/g, (c) => ({'&':'&amp;','<':'&lt;','>':'&gt;','"':'&quot;',"'":'&#39;'}[c]));

  async function api(path, opts = {}) {
    const res = await fetch(path, {
      ...opts,
      headers: { 'X-Ferrow-Token': TOKEN, ...(opts.body ? { 'Content-Type': 'application/json' } : {}), ...(opts.headers || {}) },
    });
    let data = null;
    try { data = await res.json(); } catch { /* a body we cannot parse is reported by status alone */ }
    if (!res.ok) {
      // Carry the status and the parsed body onto the error: a 409 from Save hands back the current
      // content + hash so saveNote can offer overwrite/reload rather than just showing a message.
      const err = new Error((data && data.error) || ('request failed: HTTP ' + res.status));
      err.status = res.status;
      err.data = data || {};
      throw err;
    }
    return data;
  }

  // ---- small formatters -----------------------------------------------------------------------
  const pad2 = (n) => String(n).padStart(2, '0');
  function when(ts) {
    const d = new Date(Number(ts));
    if (!Number.isFinite(d.getTime())) return '';
    const now = new Date();
    const sameDay = d.toDateString() === now.toDateString();
    const time = pad2(d.getHours()) + ':' + pad2(d.getMinutes());
    if (sameDay) return 'today ' + time;
    return d.getFullYear() + '-' + pad2(d.getMonth() + 1) + '-' + pad2(d.getDate()) + ' ' + time;
  }
  const bytes = (n) => (n == null ? '' : n < 1024 ? n + ' B' : (n / 1024).toFixed(1) + ' KB');
  // Cents, the way the gateway reports them. Rendered here rather than sent pre-formatted so the
  // reducer stays a reducer; governance-view.mjs exports the identical formatter for the web client.
  const money = (cents) => (cents == null ? '' : '$' + (Number(cents) / 100).toFixed(2));
  const plural = (n, one, many) => n + ' ' + (n === 1 ? one : (many || one + 's'));

  let toastTimer = null;
  function toast(msg, bad) {
    const el = $('toast');
    el.textContent = msg;
    el.classList.toggle('bad', !!bad);
    el.dataset.on = 'true';
    clearTimeout(toastTimer);
    toastTimer = setTimeout(() => { el.dataset.on = 'false'; }, bad ? 6000 : 3200);
  }

  // ---- the furrow ------------------------------------------------------------------------------
  // Drawn as a real path rather than a border so it can have the one thing a border cannot: a
  // slight, hand-cut waver, and a centre chord that runs past the edge of the rail into the plate.
  function drawFurrow() {
    const svg = $('furrow');
    const w = svg.clientWidth || 248, h = svg.clientHeight || window.innerHeight;
    if (!w) return;
    const x = 14;
    let d = 'M ' + x + ' 0';
    for (let y = 40; y <= h; y += 40) d += ' Q ' + (x + (y % 80 ? 1.6 : -1.6)) + ' ' + (y - 20) + ' ' + x + ' ' + y;
    svg.setAttribute('viewBox', '0 0 ' + w + ' ' + h);
    svg.innerHTML = '<path class="rest" d="' + d + '"/><path class="worked" d="' + d + '"/>';
    const p = svg.querySelector('.rest');
    // The furrow is DECORATION. Measuring it must never be able to stop the app from booting, so
    // the one call here that depends on SVG geometry support is contained and the length falls back
    // to an over-estimate — the line still draws, just without a perfectly-timed dash.
    let len = h * 1.1;
    try { if (typeof p.getTotalLength === 'function') len = p.getTotalLength(); } catch { /* keep the estimate */ }
    p.style.setProperty('--len', Math.ceil(len));
    markWorked();
  }

  // How far down the field has been cut. The worked segment runs from the top of the rail to the
  // station you are standing on — so moving between stations extends or retracts the furrow, and
  // the line means something on every single frame it is on screen.
  function markWorked() {
    const worked = document.querySelector('#furrow .worked');
    if (!worked) return;
    const active = document.querySelector('.station[aria-current="true"] .chord');
    const y = active ? Math.round(active.getBoundingClientRect().top + active.getBoundingClientRect().height / 2) : 0;
    worked.setAttribute('stroke-dasharray', Math.max(y, 0) + ' 100000');
  }

  // ---- stations ---------------------------------------------------------------------------------
  const VIEWS = [
    { id: 'ledger',   n: '01', t: 'Ledger',   count: 'changes',  title: 'The ledger',  eyebrow: 'Everything your agents changed' },
    { id: 'notes',    n: '02', t: 'Notes',    count: 'notes',    title: 'Your notes',  eyebrow: 'The vault, as files on your disk' },
    { id: 'memory',   n: '03', t: 'Memory',   count: 'memories', title: 'Memory',      eyebrow: 'What Ferrow believes about you' },
    { id: 'projects', n: '04', t: 'Projects', count: 'projects', title: 'Projects',    eyebrow: 'Which vault is in play' },
    { id: 'models',   n: '05', t: 'Models',   count: null,       title: 'Models',      eyebrow: 'What Ferrow can think with' },
    { id: 'skills',   n: '06', t: 'Skills',   count: 'skills',   title: 'Skills',      eyebrow: 'What your agents know how to do' },
    { id: 'governance', n: '07', t: 'Governance', count: null,   title: 'Governance',  eyebrow: 'How Ferrow stops itself' },
  ];

  const state = { view: 'ledger', state: null, query: '' };

  function renderStations() {
    $('stations').innerHTML = VIEWS.map((v) => {
      const c = state.state && v.count ? state.state.counts[v.count] : null;
      return '<li class="station" data-view="' + v.id + '" aria-current="' + (state.view === v.id) + '">' +
        '<span class="chord"></span>' +
        '<button type="button" data-go="' + v.id + '">' +
          '<span class="n">' + v.n + '</span>' +
          '<span><span class="t">' + v.t + '</span>' + (c == null ? '' : '<span class="c">' + c + '</span>') + '</span>' +
        '</button></li>';
    }).join('');
    markWorked();
  }

  // ---- views -------------------------------------------------------------------------------------

  function emptyState(h, p) {
    return '<div class="empty stagger" style="--i:0"><h2>' + h + '</h2><p>' + p + '</p></div>';
  }

  // THE HERO. Each entry is a chord struck across the work line: what happened, to which file, by
  // whom, why, when — and, when it can be undone, the button that un-draws it.
  async function viewLedger() {
    const data = await api('/api/log');
    if (!data.changes.length) {
      return emptyState(
        'No agents have changed anything yet.',
        'This is where every write, append, removal and revert will appear — with who did it, why, ' +
        'and a button to undo it. Nothing reaches your vault without landing here first. ' +
        'Write your first note from the <b>Notes</b> station, or run <code>ferrow remember</code> in the terminal, ' +
        'and watch the line get drawn.'
      );
    }
    const rows = data.changes.map((c, i) => {
      const undone = c.undone;
      const isRevert = c.kind === 'revert';
      const canUndo = !undone && !isRevert;
      return '<li class="entry stagger" style="--i:' + Math.min(i, 24) + '" data-kind="' + esc(c.kind) + '" data-undone="' + undone + '" data-id="' + esc(c.id) + '">' +
        '<svg class="strike" viewBox="0 0 38 12" aria-hidden="true"><line x1="0" y1="11" x2="38" y2="1"/></svg>' +
        '<span class="dot"></span>' +
        '<div class="top">' +
          '<span class="verb">' + esc(c.kind) + '</span>' +
          '<span class="file">' + esc(c.path) + '</span>' +
          (undone ? '<span class="undone-flag">un-drawn</span>' : '') +
          '<span class="when">' + when(c.ts) + '</span>' +
        '</div>' +
        '<div class="why">' + esc(c.reason) + '</div>' +
        '<div class="who">by <b>' + esc(c.agent) + '</b>' +
          (c.reverts ? ' · undoes <b>' + esc(c.reverts) + '</b>' : '') +
          ' · <span style="color:var(--ink-faint)">' + esc(c.id) + '</span></div>' +
        '<div class="acts">' +
          '<button class="act" data-diff="' + esc(c.id) + '">What changed</button>' +
          (canUndo
            ? '<button class="act undo" data-undo="' + esc(c.id) + '">Undo this</button>'
            : '<button class="act" disabled>' + (isRevert ? 'This is itself an undo' : 'Already undone') + '</button>') +
          (c.path.endsWith('.md') ? '<button class="act" data-open="' + esc(c.path) + '">Open the note</button>' : '') +
        '</div>' +
        '<div class="diffslot"></div>' +
      '</li>';
    }).join('');
    return '<ul class="ledger">' + rows + '</ul>';
  }

  function diffHtml(c) {
    const before = c.before == null
      ? '<em style="color:var(--ink-faint);font-style:italic">The file did not exist.</em>'
      : '<pre class="gone">' + esc(c.before) + '</pre>';
    const after = c.after == null
      ? '<em style="color:var(--halt);font-style:italic">Moved to the vault’s .trash folder. It is still on your disk.</em>'
      : '<pre>' + esc(c.after) + '</pre>';
    return '<div class="diff">' +
      '<div><span class="label">Before' + (c.beforeBytes == null ? '' : ' · ' + bytes(c.beforeBytes)) + '</span>' + before + '</div>' +
      '<div><span class="label">After' + (c.afterBytes == null ? '' : ' · ' + bytes(c.afterBytes)) + '</span>' + after + '</div>' +
    '</div>';
  }

  const newNoteBar = '<div class="newbar"><button type="button" class="act" data-newnote>+ New note</button></div>';
  async function viewNotes() {
    const q = state.query.trim();
    const data = await api('/api/notes' + (q ? '?q=' + encodeURIComponent(q) : ''));
    if (!data.total) {
      return newNoteBar + emptyState(
        'There are no notes in this vault yet.',
        'A Ferrow vault is an ordinary folder of Markdown files &mdash; you can open it in Finder, in Obsidian, in anything. ' +
        'Press <b>New note</b> above, run <code>ferrow vault init</code> to lay down the starting files, or <code>ferrow note inbox/today.md "&hellip;"</code> to write one now.'
      );
    }
    if (!data.notes.length) {
      return newNoteBar + emptyState('Nothing here matches &ldquo;' + esc(q) + '&rdquo;.',
        'Ferrow searched ' + plural(data.total, 'note') + ' by title, heading and body text. Try a single distinctive word.');
    }
    return newNoteBar + '<ul class="rows">' + data.notes.map((n, i) =>
      '<li class="row click stagger" style="--i:' + Math.min(i, 24) + '" data-open="' + esc(n.path) + '">' +
        '<div class="rtop"><h3>' + esc(n.title) + '</h3><span class="path">' + esc(n.path) + '</span>' +
        '<span class="meta">' + bytes(n.bytes) + '</span></div>' +
        '<p class="snippet">' + (n.snippet ? esc(n.snippet) : esc(n.preview || '')) + '</p>' +
      '</li>').join('') + '</ul>';
  }

  async function viewMemory() {
    const data = await api('/api/memories');
    if (!data.memories.length) {
      return emptyState(
        'Ferrow has not been told anything about you yet.',
        'Memory is a folder of plain files in your vault under <code>memory/facts/</code> &mdash; readable, editable and deletable by you, ' +
        'not a hidden profile. Teach it something with <code>ferrow remember prefers-short-answers "Keep replies to a few lines"</code>.'
      );
    }
    return '<ul class="rows">' + data.memories.map((m, i) =>
      '<li class="row click stagger" style="--i:' + Math.min(i, 24) + '" data-open="' + esc(m.path) + '">' +
        '<div class="rtop"><h3>' + esc(m.slug) + '</h3>' +
        '<span class="tag">' + esc(m.kind) + '</span><span class="tag ' + (m.confidence === 'high' ? 'on' : 'off') + '">' + esc(m.confidence) + ' confidence</span>' +
        '<span class="meta">' + (m.updated ? esc(String(m.updated).slice(0, 10)) : 'no date') + '</span></div>' +
        '<p>' + esc(m.text) + '</p>' +
      '</li>').join('') + '</ul>';
  }

  async function viewProjects() {
    const data = await api('/api/projects');
    if (!data.available || !data.projects.length) {
      return emptyState(
        'You have not made any projects yet.',
        'Everything is going to one vault: <code>' + esc(data.vaultRoot) + '</code>. ' +
        'Projects give a piece of work its own vault, memory and agents. Make one with <code>ferrow project new my-work</code>.'
      );
    }
    return '<ul class="rows">' + data.projects.map((p, i) =>
      '<li class="row stagger" style="--i:' + Math.min(i, 24) + '">' +
        '<div class="rtop"><h3>' + esc(p.name) + '</h3>' +
        (p.active ? '<span class="tag on">Active</span>' : '') +
        '<span class="meta">' + (p.lastUsed ? 'last used ' + esc(String(p.lastUsed).slice(0, 10)) : 'never used') + '</span></div>' +
        '<p class="path" style="color:var(--ink-faint)">' + esc(p.vault) + '</p>' +
      '</li>').join('') + '</ul>';
  }

  async function viewModels() {
    const data = await api('/api/models');
    const local = data.local.flatMap((r) => r.models.map((m) => ({ runtime: r.runtime, baseUrl: r.baseUrl, id: m.id })));
    const connected = data.providers.filter((p) => p.connected);
    let out = '';
    if (!local.length && !connected.length) {
      out += emptyState(
        'No models are connected yet.',
        'Ferrow found no model runtime listening on this machine, and no API keys stored on it. ' +
        'Start Ollama or LM&nbsp;Studio and this list fills itself in, or run <code>ferrow connect anthropic</code> to add a key. ' +
        'Keys live in your OS keychain &mdash; this page can only ever see <em>which</em> providers you connected, never the keys themselves.'
      );
    }
    if (local.length) {
      out += '<div class="stagger" style="--i:0"><h2 class="label" style="margin:24px 0 0">Running on this machine</h2></div>' +
        '<ul class="rows">' + local.map((m, i) =>
          '<li class="row stagger" style="--i:' + Math.min(i + 1, 24) + '">' +
            '<div class="rtop"><h3>' + esc(m.id) + '</h3><span class="tag on">' + esc(m.runtime) + '</span>' +
            '<span class="meta">' + esc(m.baseUrl) + '</span></div></li>').join('') + '</ul>';
    }
    out += '<div class="stagger" style="--i:1"><h2 class="label" style="margin:' + (local.length ? '10px' : '24px') + ' 0 0">Providers</h2></div>' +
      '<ul class="rows">' + data.providers.map((p, i) =>
        '<li class="row stagger" style="--i:' + Math.min(i + 2, 24) + '">' +
          '<div class="rtop"><h3>' + esc(p.label) + '</h3>' +
          '<span class="tag ' + (p.connected ? 'on' : 'off') + '">' + (p.connected ? 'key stored' : 'not connected') + '</span>' +
          '<span class="meta">ferrow connect ' + esc(p.id) + '</span></div></li>').join('') + '</ul>';
    return out;
  }

  async function viewSkills() {
    const data = await api('/api/skills');
    if (!data.skills.length) {
      return emptyState(
        'No skills are installed in this vault.',
        'A skill is a folder with a <code>SKILL.md</code> in it under <code>' + esc(data.dir) + '</code> &mdash; ' +
        'instructions in plain English plus a contract saying exactly what it is allowed to touch. ' +
        'List what you have any time with <code>ferrow skills</code>.'
      );
    }
    return '<ul class="rows">' + data.skills.map((s, i) =>
      '<li class="row stagger" style="--i:' + Math.min(i, 24) + '">' +
        '<div class="rtop"><h3>' + esc(s.name) + '</h3>' +
        (s.valid ? '' : '<span class="tag bad">contract error</span>') + '</div>' +
        '<p>' + esc(s.valid ? s.description : (s.errors || []).join(' · ')) + '</p>' +
      '</li>').join('') + '</ul>';
  }

  // ---- the governance station --------------------------------------------------------------------
  //
  // WHAT THIS IS. Ferrow has three guarantees that are otherwise invisible: a kill switch that is a
  // FILE (so it survives a reboot and a shell over SSH), a breaker that REFUSES a spawn storm instead
  // of warning about one, and a ledger where a session that cannot say who it is does not run. A
  // guarantee nobody can look at is a claim. This station is the looking.
  //
  // EVERY NUMBER HERE IS REDUCED BY src/ui/governance-view.mjs, ON THE SERVER — this page is one file
  // under a CSP that loads no modules, and the web client runs the SAME reducers over a byte-identical
  // vendored copy. So this function renders a view model and computes nothing: if "4 of 12" is wrong,
  // it is wrong identically on both surfaces and one test catches it.
  let gov = null;

  function govBanner(g) {
    const halted = g.halt.halted;
    const control = g.control && g.control.local
      ? '<div class="acts"><button class="act" data-halt="' + esc(g.control.action) + '">' + esc(g.control.label) + '</button></div>'
      : '';
    return '<div class="banner stagger" style="--i:0" data-halted="' + halted + '">' +
      '<div class="label">' + (halted ? 'Kill switch' : 'Kill switch · not engaged') + '</div>' +
      '<h2>' + esc(g.halt.headline) + '</h2>' +
      '<p>' + esc(g.halt.detail) + '</p>' +
      (g.halt.path ? '<p class="where">' + esc(g.halt.path) + '</p>' : '') +
      (g.halt.resume ? '<p>' + esc(g.halt.resume) + '</p>' : '') +
      control +
    '</div>';
  }

  function govBreaker(b) {
    // The ticks are the ceiling made countable at a glance. Ticks past the ceiling are drawn in Halt
    // because at that point the next spawn is refused, which is the only thing the colour ever means.
    const shown = Math.max(b.maxSpawns, b.count);
    let ticks = '';
    for (let i = 0; i < shown; i += 1) {
      ticks += '<i data-on="' + (i < b.count) + '" data-over="' + (i >= b.maxSpawns && i < b.count) + '"></i>';
    }
    const mins = Math.round(b.windowMs / 60000);
    const origins = b.origins.length
      ? '<ul class="spawns">' + b.origins.map((o) =>
          '<li data-type="' + (o.atCeiling ? 'alert' : 'origin') + '">' +
            '<span class="who">' + esc(o.origin) + '</span>' +
            '<span class="from">' + o.count + ' of ' + b.maxPerOrigin + ' allowed from one origin</span>' +
          '</li>').join('') + '</ul>'
      : '';
    return '<div class="section stagger" style="--i:1">' +
      '<div class="label">Storm breaker</div>' +
      '<h2>' + b.count + ' of ' + b.maxSpawns + ' in the last ' + mins + ' minutes</h2>' +
      '<div class="gauge" role="img" aria-label="' + b.count + ' spawns of ' + b.maxSpawns + ' allowed">' + ticks + '</div>' +
      '<p class="note">' + (b.tripped
        ? 'The breaker <b>tripped</b> inside this window: it refused a spawn and said so. Nothing already running was touched.'
        : b.atCeiling
          ? 'At the ceiling. The next fresh session will be refused until this window clears.'
          : 'Room to spare. More than ' + b.maxSpawns + ' fresh sessions in ' + mins + ' minutes is a storm, not work, and the next one would be refused — latched, not warned about.') +
        (b.loops ? ' <b>' + plural(b.loops, 'respawn loop') + '</b> refused in this window.' : '') +
        (b.unattributed ? ' <b>' + plural(b.unattributed, 'anonymous spawn') + '</b> refused: a session that cannot say who it is does not run.' : '') +
      '</p>' + origins +
    '</div>';
  }

  function govMeter(m) {
    if (!m.shown) {
      return '<div class="section stagger" style="--i:2"><div class="label">Spend</div>' +
        '<h2>' + esc(m.headline) + '</h2><p class="note">' + esc(m.detail) + '</p></div>';
    }
    const pools = m.poolsReported
      ? '<div class="pools">' + m.pools.map((p) =>
          '<div class="pool" data-halted="' + p.halted + '">' +
            '<div class="label">' + esc(p.label) + '</div>' +
            '<div class="amount">' + esc(money(p.remainingCents)) + '</div>' +
            '<div class="sub">left of ' + esc(money(p.ceilingCents)) + ' · ' + esc(money(p.spentCents)) + ' spent' +
              (p.heldCents ? ' · ' + esc(money(p.heldCents)) + ' held' : '') + '</div>' +
            '<div class="why">' + esc(p.note) + '</div>' +
          '</div>').join('') + '</div>'
      : '<p class="note">' + esc(m.poolsNote) + '</p>';
    return '<div class="section stagger" style="--i:2">' +
      '<div class="label">Spend · Ferrow Managed</div>' +
      '<h2>' + esc(money(m.totals.remainingCents)) + ' left of ' + esc(money(m.totals.capCents)) + '</h2>' +
      (m.haltedLine ? '<p class="note" style="color:var(--halt)">' + esc(m.haltedLine) + '</p>' : '') +
      (m.reserveLine ? '<p class="note">' + esc(m.reserveLine) + '</p>' : '') +
      pools +
    '</div>';
  }

  function govLedger(l) {
    if (l.headline) {
      return '<div class="section stagger" style="--i:3"><div class="label">Spawn ledger</div>' +
        '<h2>' + esc(l.headline) + '</h2><p class="note">' + esc(l.detail) + '</p>' + tornLine(l) + '</div>';
    }
    return '<div class="section stagger" style="--i:3">' +
      '<div class="label">Spawn ledger</div>' +
      '<h2>' + plural(l.entries.length, 'entry', 'entries') + ' read, newest first</h2>' +
      '<p class="note">Every session Ferrow starts, with the identity it was started under. Refusals are struck in ' +
        '<b>Halt</b> — those are spawns that did not happen.</p>' +
      '<ul class="spawns">' + l.tail.map((e) =>
        '<li data-type="' + esc(e.type) + '">' +
          '<span class="who">' + esc(e.type === 'alert' ? e.code : e.agentId) + '</span>' +
          '<span class="from">' + esc(e.type === 'alert' ? (e.detail || '') : ('from ' + e.origin + (e.site ? ' at ' + e.site : ''))) + '</span>' +
          '<span class="at">' + esc(e.iso || (e.at ? when(e.at) : '')) + '</span>' +
        '</li>').join('') + '</ul>' +
      tornLine(l) +
    '</div>';
  }

  // A torn line is a thing that happens: several processes append to this file with O_APPEND and a
  // read can land mid-write. Say how many were unreadable rather than silently dropping them — a
  // ledger that quietly loses rows is exactly what this whole feature exists to make impossible.
  function tornLine(l) {
    return l.malformed
      ? '<p class="torn">' + plural(l.malformed, 'line') + ' in the ledger could not be read and ' +
        (l.malformed === 1 ? 'was' : 'were') + ' skipped. The file is still on disk at ' +
        '<code style="font-family:var(--ledger);font-size:12px">' + esc(gov && gov.paths.logPath ? gov.paths.logPath : 'the spawn log') + '</code>.</p>'
      : '';
  }

  async function viewGovernance() {
    gov = await api('/api/governance');
    return govBanner(gov) + govBreaker(gov.breaker) + govMeter(gov.meter) + govLedger(gov.ledger);
  }

  const RENDER = { ledger: viewLedger, notes: viewNotes, memory: viewMemory, projects: viewProjects, models: viewModels, skills: viewSkills, governance: viewGovernance };

  // ---- the note sheet ----------------------------------------------------------------------------
  let openPath = null;
  let openHash = null;   // the fingerprint the editor was built on — sent back to detect a clobber
  let openIsNew = false; // a note being created, not edited: assert it does not already exist
  function closeSheet() {
    $('sheet').dataset.open = 'false';
    $('sheet').setAttribute('aria-hidden', 'true');
    $('scrim').dataset.open = 'false';
    openPath = null;
    openHash = null;
    openIsNew = false;
  }
  async function openNote(p) {
    try {
      const n = await api('/api/note?path=' + encodeURIComponent(p));
      openPath = n.path;
      openHash = n.hash || null;
      openIsNew = false;
      $('sheetPath').textContent = n.path;
      $('sheetTitle').textContent = n.title;
      $('sheetText').value = n.content;
      $('sheetNote').innerHTML = 'Saving writes through the change log as <b>ui:user</b>. It will appear in the Ledger, ' +
        'with the previous version kept, and you can undo it there.';
      openSheet();
    } catch (e) { toast(e.message, true); }
  }
  // Create a new note: no fetch, a blank editor at a path the user names. Save asserts expectCreate,
  // so the server refuses (409) if something already lives there rather than overwriting it.
  function newNote() {
    const p = (window.prompt('New note path (inside the vault), e.g. inbox/today.md') || '').trim();
    if (!p) return;
    const path = /\.md$/i.test(p) ? p : p + '.md';
    openPath = path;
    openHash = null;
    openIsNew = true;
    $('sheetPath').textContent = path;
    $('sheetTitle').textContent = 'New note';
    $('sheetText').value = '';
    $('sheetNote').innerHTML = 'A new note. Saving writes it through the change log as <b>ui:user</b> — it appears in the ' +
      'Ledger and can be undone. If a note already exists at this path, Ferrow will not overwrite it.';
    openSheet();
  }
  function openSheet() {
    $('sheetSave').disabled = false;
    $('sheet').dataset.open = 'true';
    $('sheet').setAttribute('aria-hidden', 'false');
    $('scrim').dataset.open = 'true';
    $('sheetText').focus();
  }
  async function saveNote(force) {
    if (!openPath) return;
    const btn = $('sheetSave');
    btn.disabled = true;
    const body = { path: openPath, text: $('sheetText').value };
    if (force) body.force = true;
    else if (openIsNew) body.expectCreate = true;
    else if (openHash) body.baseHash = openHash;
    try {
      const res = await api('/api/note', { method: 'POST', body: JSON.stringify(body) });
      openHash = res.hash || null;   // keep editing against the version we just wrote
      openIsNew = false;
      toast('Saved ' + openPath + ' — logged in the ledger, undoable.');
      closeSheet();
      await refreshState();
      await show(state.view, true);
    } catch (e) {
      btn.disabled = false;
      // A clobber was refused. Offer the honest choice rather than losing anyone's work silently.
      if (e.status === 409 && e.data && e.data.conflict) {
        handleConflict(e.data);
        return;
      }
      toast(e.message, true);
    }
  }
  // The one moment the app must not be glib: someone else's change is about to be lost, or was.
  function handleConflict(d) {
    if (d.conflict === 'exists') {
      toast(openPath + ' already exists — open it to edit, or pick another name.', true);
      return;
    }
    if (d.conflict === 'gone') {
      if (window.confirm(openPath + ' was deleted since you opened it.\n\nRe-create it with your text?')) {
        openIsNew = true; openHash = null; saveNote(true);
      }
      return;
    }
    // 'stale': the file changed underneath the editor. Show the choice in plain words.
    const mine = $('sheetText').value;
    const ok = window.confirm(
      openPath + ' changed since you opened it.\n\n' +
      'OK  = overwrite it with your version (the current version is kept in the Ledger, undoable).\n' +
      'Cancel = load the current version instead (you lose your unsaved edits here).'
    );
    if (ok) { saveNote(true); return; }
    if (typeof d.current === 'string') {
      $('sheetText').value = d.current;
      openHash = d.currentHash || null;
      toast('Loaded the current version. Your earlier edits were not saved.', true);
    }
    void mine;
  }

  // ---- routing -----------------------------------------------------------------------------------
  async function show(id, keepQuery) {
    state.view = id;
    if (!keepQuery && id !== 'notes') state.query = '';
    const v = VIEWS.find((x) => x.id === id) || VIEWS[0];
    $('title').textContent = v.title;
    $('eyebrow').textContent = v.eyebrow;
    $('searchline').hidden = id !== 'notes';
    renderStations();
    $('subtitle').innerHTML = subtitleFor(id);
    const host = $('view');
    host.innerHTML = '<p class="label" style="padding:26px 0">Reading the vault…</p>';
    try {
      host.innerHTML = await RENDER[id]();
    } catch (e) {
      host.innerHTML = emptyState('Ferrow could not read that.', esc(e.message));
    }
  }

  function subtitleFor(id) {
    const s = state.state;
    if (!s) return '';
    const c = s.counts;
    if (id === 'ledger') return c.changes
      ? 'Every change to this vault, newest first — <b>' + plural(c.changes, 'entry', 'entries') + '</b> so far. Each one names who made it and why, keeps the version it replaced, and can be undone from here.'
      : 'Every change to this vault will appear here, newest first — with who made it, why, and an undo.';
    if (id === 'notes') return '<b>' + plural(c.notes, 'Markdown file') + '</b> in this vault. Editing one here writes through the change log, exactly like an agent does.';
    if (id === 'memory') return '<b>' + plural(c.memories, 'fact') + '</b> Ferrow has been taught. These are files you can read and delete yourself.';
    if (id === 'projects') return s.project
      ? 'Active project: <b>' + esc(s.project.name) + '</b>. Its vault is the one this page is showing.'
      : 'No active project — this page is showing the default vault.';
    if (id === 'models') return 'Local runtimes are probed on this machine right now; providers are listed as connected or not. <b>No key material is ever sent to this page.</b>';
    if (id === 'skills') return '<b>' + plural(c.skills, 'skill') + '</b> installed. Each one carries a contract saying what it may read, write and run.';
    if (id === 'governance') return 'The kill switch, the storm breaker and the spawn ledger — the three things that stop Ferrow ' +
      'running away with your machine or your money. <b>Halting is only possible from here and from this machine’s terminal</b>; ' +
      'a paired browser can read this page’s numbers over the relay but cannot flip the switch.';
    return '';
  }

  async function refreshState() {
    state.state = await api('/api/state');
    const s = state.state;
    $('vaultpath').innerHTML = (s.project ? '<b>' + esc(s.project.name) + '</b><br>' : '') + esc(s.vaultRoot);
    renderStations();
    $('subtitle').innerHTML = subtitleFor(state.view);
  }

  // ---- events --------------------------------------------------------------------------------------
  document.addEventListener('click', async (ev) => {
    const go = ev.target.closest('[data-go]');
    if (go) { show(go.dataset.go); return; }

    const mk = ev.target.closest('[data-newnote]');
    if (mk) { newNote(); return; }

    const open = ev.target.closest('[data-open]');
    if (open) { openNote(open.dataset.open); return; }

    const diff = ev.target.closest('[data-diff]');
    if (diff) {
      const entry = diff.closest('.entry');
      const slot = entry.querySelector('.diffslot');
      if (slot.innerHTML) { slot.innerHTML = ''; diff.textContent = 'What changed'; return; }
      try {
        const data = await api('/api/log?limit=500');
        const c = data.changes.find((x) => x.id === diff.dataset.diff);
        slot.innerHTML = c ? diffHtml(c) : '';
        diff.textContent = 'Hide';
      } catch (e) { toast(e.message, true); }
      return;
    }

    // THE HALT CONTROL. The only button on this page that changes the RUNTIME rather than the vault,
    // and the only one that can stop work already scheduled — so it is confirmed before it acts, with
    // the consequence spelled out (governance-view.mjs owns those words, because the same sentence has
    // to be true on any surface that ever offers this). The confirm is not decoration: without it a
    // stray click on a laptop lid closing silently halts a machine that is mid-run, and the person
    // finds out hours later when nothing has happened.
    const halt = ev.target.closest('[data-halt]');
    if (halt) {
      const intent = gov && gov.control;
      if (!intent) return;
      if (!window.confirm(intent.confirm)) return;
      halt.disabled = true;
      try {
        await api('/api/governance/halt', { method: 'POST', body: JSON.stringify({ engage: intent.action === 'engage' }) });
        toast(intent.done, intent.action === 'engage');
        await show('governance', true);
      } catch (e) {
        halt.disabled = false;
        toast(e.message, true);
      }
      return;
    }

    const undo = ev.target.closest('[data-undo]');
    if (undo) {
      const entry = undo.closest('.entry');
      undo.disabled = true;
      // Un-draw the chord first, then re-read: the animation is the receipt.
      entry.classList.add('undrawing');
      try {
        await api('/api/log/revert', { method: 'POST', body: JSON.stringify({ id: undo.dataset.undo }) });
        toast('Undone. The previous version is back, and the undo is itself in the ledger.');
        await refreshState();
        setTimeout(() => show('ledger', true), 340);
      } catch (e) {
        entry.classList.remove('undrawing');
        undo.disabled = false;
        toast(e.message, true);
      }
    }
  });

  $('sheetClose').addEventListener('click', closeSheet);
  $('scrim').addEventListener('click', closeSheet);
  $('sheetSave').addEventListener('click', () => saveNote());
  document.addEventListener('keydown', (e) => {
    if (e.key === 'Escape') closeSheet();
    if ((e.metaKey || e.ctrlKey) && e.key === 's' && openPath) { e.preventDefault(); saveNote(); }
  });

  let qTimer = null;
  $('q').addEventListener('input', (e) => {
    state.query = e.target.value;
    clearTimeout(qTimer);
    qTimer = setTimeout(() => show('notes', true), 160);
  });

  window.addEventListener('resize', drawFurrow);

  // ---- boot ------------------------------------------------------------------------------------
  $('security').textContent =
    'Ferrow is listening only on 127.0.0.1 — this page cannot be reached from your network, your wifi, or the internet. ' +
    'Every request it makes carries a one-time token that was created when you ran `ferrow ui` and disappears when you stop it, ' +
    'so no other web page open in your browser can read your vault. Your notes never leave this machine.';

  (async () => {
    // The stations are drawn from a constant, so they appear before the first request rather than
    // after it — and they are still there if the server never answers, which is the moment the user
    // most needs the page to look like a thing that works.
    renderStations();
    try { drawFurrow(); } catch { /* decoration */ }
    try {
      await refreshState();
      await show('ledger');
    } catch (e) {
      $('view').innerHTML = emptyState('Ferrow could not reach its own server.', esc(e.message) +
        '<br><br>If you stopped <code>ferrow ui</code> in the terminal, start it again and reload this page.');
    }
  })();
})();
</script>