Apps your AI can write,
running live.

-- KANBAN
--
-- The entry point: it wires the parts together and owns the view. `require` resolves against
-- this app's own source doc, so these three names are `theme.lua`, `model.lua` and
-- `ui/widgets.lua` sitting next to this file in the uploaded folder.
--
-- The split runs along one line: **anything that touches pointer state stays here.** `drag`,
-- `placement` and `col_modal` are per-viewer UI state that handlers write and the view reads,
-- so every piece that reads them (`drop_slot`, `card_of`, `column_of`) lives in this file where
-- the read and the write are visible together. `ui/widgets.lua` holds the pieces that are pure
-- functions of their arguments, and `model.lua` holds the doc.
local C = require("theme")
local W = require("ui/widgets")
local model = require("model")

local board, update = model.board, model.update
-- One shared table, not a copy: `S.drag` is written by handlers inside model.lua and read here.
-- A `local drag` on either side could not do this — a local is file-scoped, so the assignment
-- would be invisible across the boundary.
local S = model.state

-- VIEW PIECES

-- Which gap the indicator belongs in: 1 = above the first card, #list+1 = below the last.
-- A column-background drop ("into") appends, which is the trailing gap — same answer, one path.
local function drop_slot(c, list)
  if not (S.drag and S.placement) then
    return nil
  end
  if S.placement.kind == "into" then
    return S.placement.col == c.id and #list + 1 or nil
  end
  if S.placement.kind ~= "card" or S.drag.id == S.placement.id then
    return nil
  end
  for i = 1, #list do
    if list[i].id == S.placement.id then
      return S.placement.before and i or i + 1
    end
  end
end

-- `ghost` builds the floating copy: same look, but no id and no handlers, because a duplicate
-- id would register a second drag target and collide in the state store.
local function card_of(c, ghost)
  local dragging = S.drag ~= nil and S.drag.kind == "card" and S.drag.id == c.id
  local t = ui.row({
    w_full = true,
    gap = 8,
    px = 10,
    py = 9,
    radius = 8,
    fill = ghost and C.card_hi or C.card,
    stroke = { 1, ghost and C.accent or C.line_soft },
    align_center = true,
    ui.col({ grow = true, ui.text({ c.text, color = C.text, font_size = 13 }) }),
  })
  if ghost then
    return t
  end
  t.id = c.id
  t.hover_fill = C.card_hi
  t.hover_stroke = { 1, C.line }
  t.opacity = dragging and 0.3 or 1.0
  t.on_drag = function(e)
    local phase, dx, dy, scale, ox, oy = e.phase, e.dx, e.dy, e.scale, e.origin_x, e.origin_y
    update({ kind = "drag", what = "card", id = c.id, phase = phase, x = ox, y = oy, scale = scale })
  end
  t.on_drop = function(e)
    local phase, x, y = e.phase, e.x, e.y
    update({ kind = "drop", id = c.id, phase = phase, x = x, y = y })
  end
  t[#t + 1] = W.icon_button("del-card:" .. c.id, "x", function()
    update({ kind = "delete", id = c.id })
  end, C.danger)
  return t
end

local function composer(c)
  local s = ui.state("draft:" .. c.id, { text = "", open = false })
  local close = function()
    s.open = false
  end
  local send = function()
    if s.text ~= "" then
      close()
      update({ kind = "add", col = c.id })
    end
  end
  local anchor = ui.button({
    id = "add-card:" .. c.id,
    w_full = true,
    h = 32,
    radius = 6,
    center = true,
    fill = C.accent,
    hover_fill = C.accent_hi,
    press_scale = 0.97,
    ui.text({ "Add card", no_wrap = true, color = "#ffffff", font_size = 13 }),
    on_click = function()
      s.open = true
    end,
  })
  if not s.open then
    return ui.col({ px = 10, py = 10, anchor })
  end
  local panel = ui.col({
    w = 280,
    gap = 8,
    pad = 10,
    radius = 8,
    fill = C.panel,
    stroke = { 1, C.line },
    ui.input({
      value = s.text,
      id = "draft:" .. c.id,
      autofocus = true,
      w_full = true,
      h = 34,
      px = 10,
      radius = 6,
      fill = C.sunken,
      stroke = { 1, C.line },
      color = C.text,
      font_size = 13,
      on_input = function(v)
        s.text = v
      end,
      on_enter = send,
    }),
    ui.button({
      id = "submit-card:" .. c.id,
      h = 32,
      radius = 6,
      center = true,
      fill = C.accent,
      hover_fill = C.accent_hi,
      press_scale = 0.97,
      ui.text({ "Create card", no_wrap = true, color = "#ffffff", font_size = 13 }),
      on_click = send,
    }),
  })
  return ui.col({
    px = 10,
    py = 10,
    ui.overlay({ id = "composer:" .. c.id, side = "top", align = "start", on_dismiss = close, anchor, panel }),
  })
end

-- What this column is *this frame*. Mid-drag the width comes from pointer state and the doc is not
-- touched; on release the model writes it once. Same shape as the card and column drags above —
-- nothing goes to the CRDT until the gesture finishes, so a drag is one op and not sixty.
local function width_of(c)
  if S.resize and S.resize.id == c.id then
    return S.resize.w
  end
  return c.w or C.col_w
end

local function column_of(c, list)
  local body = {}
  local slot = drop_slot(c, list)
  for i = 1, #list do
    body[#body + 1] = W.guide("g:" .. c.id .. ":" .. i, slot == i)
    body[#body + 1] = card_of(list[i])
  end
  body[#body + 1] = W.guide("g:" .. c.id .. ":tail", slot == #list + 1)
  if #list == 0 then
    body[#body + 1] = W.empty_slot(slot ~= nil)
  end

  local lifting = S.drag ~= nil and S.drag.kind == "col" and S.drag.id == c.id
  return ui.col({
    id = c.id,
    w = width_of(c),
    no_shrink = true,
    -- The clamp in `actions.resize` is what the drag obeys; these are what the *layout* obeys,
    -- and they are not the same guard. A width can arrive from a peer whose theme differs, or
    -- from a doc edited by hand, and neither went past the drag.
    min_w = C.col_w_min,
    max_w = C.col_w_max,
    radius = 12,
    fill = C.panel,
    stroke = { 1, C.line_soft },
    opacity = lifting and 0.35 or 1.0,
    on_drop = function(e)
      local phase, x, y = e.phase, e.x, e.y
      update({ kind = "drop_col", col = c.id, phase = phase, x = x })
    end,
    -- header doubles as the column's drag handle
    ui.row({
      id = "colhead:" .. c.id,
      gap = 8,
      px = 12,
      py = 11,
      align_center = true,
      hover_fill = C.line_soft,
      on_drag = function(e)
        local phase, dx, dy, scale, ox, oy = e.phase, e.dx, e.dy, e.scale, e.origin_x, e.origin_y
        update({ kind = "drag", what = "col", id = c.id, phase = phase, x = ox, y = oy, scale = scale })
      end,
      ui.text({ c.name, no_wrap = true, color = C.text, font_size = 14 }),
      W.badge(#list),
      ui.col({ grow = true }),
      W.icon_button("del-col:" .. c.id, "x", function()
        update({ kind = "delete_col", id = c.id })
      end, C.danger),
    }),
    ui.col({ h = 1, w_full = true, fill = C.line_soft }),
    -- cards
    ui.col({
      id = "cards:" .. c.id,
      scroll_y = true,
      grow = true,
      px = 10,
      py = 7,
      body,
    }),
    composer(c),
  })
end

local function modal()
  local m = ui.state("col_modal", { name = "" })
  local create = function()
    update({ kind = "add_col" })
  end
  local panel = ui.col({
    id = "col-modal",
    w = 360,
    gap = 14,
    pad = 20,
    radius = 14,
    fill = C.panel,
    stroke = { 1, C.line },
    fade_in = 120,
    on_click = function() end,
    ui.text({ "New column", no_wrap = true, color = C.text, font_size = 16 }),
    ui.input({
      value = m.name,
      id = "col_name",
      autofocus = true,
      w_full = true,
      h = 36,
      px = 10,
      radius = 6,
      fill = C.sunken,
      stroke = { 1, C.line },
      color = C.text,
      font_size = 13,
      on_input = function(v)
        m.name = v
      end,
      on_enter = create,
      on_esc = function()
        update({ kind = "close_col" })
      end,
    }),
    ui.row({
      gap = 8,
      ui.col({ grow = true }),
      ui.button({
        id = "cancel-col",
        h = 34,
        px = 14,
        radius = 6,
        center = true,
        hover_fill = C.line_soft,
        press_scale = 0.97,
        ui.text({ "Cancel", no_wrap = true, color = C.muted, font_size = 13 }),
        on_click = function()
          update({ kind = "close_col" })
        end,
      }),
      ui.button({
        id = "create-col",
        h = 34,
        px = 16,
        radius = 6,
        center = true,
        fill = C.accent,
        hover_fill = C.accent_hi,
        press_scale = 0.97,
        ui.text({ "Create", no_wrap = true, color = "#ffffff", font_size = 13 }),
        on_click = create,
      }),
    }),
  })
  return ui.col({
    absolute = true,
    top = 0,
    left = 0,
    right = 0,
    bottom = 0,
    id = "col-modal-backdrop",
    center = true,
    fill = "rgba(1,4,9,0.72)",
    on_click = function()
      update({ kind = "close_col" })
    end,
    panel,
  })
end

-- ROOT
return function()
  -- Bind the mirror once per frame. `view()` repatches it before calling this, so these two
  -- are current for the whole frame — and reading them once keeps every count and index below
  -- consistent with each other.
  local columns, cards = board.columns, board.cards
  local grouped = model.by_column()
  local col_list = {}
  local flying = nil

  local col_slot = nil
  if S.drag and S.placement and S.placement.kind == "col" and S.drag.id ~= S.placement.id then
    for i = 1, #columns do
      if columns[i].id == S.placement.id then
        col_slot = S.placement.before and i or i + 1
        break
      end
    end
  end

  for i = 1, #columns do
    local c = columns[i]
    col_list[#col_list + 1] = W.guide_v("gv:" .. i, col_slot == i)
    col_list[#col_list + 1] = column_of(c, grouped[c.id])
    -- The grip is a sibling of the column, not a child of it: it has to sit in the gutter
    -- *between* two columns, and a child clipped to its parent's rounded panel would be a
    -- three-point target hanging off the edge of a corner.
    col_list[#col_list + 1] = W.grip("grip:" .. c.id, S.resize ~= nil and S.resize.id == c.id, function(phase, x, y, dx)
      update({ kind = "resize", id = c.id, phase = phase, x = x, dx = dx })
    end)
    if S.drag and S.drag.kind == "col" and S.drag.id == c.id then
      flying = ui.col({
        w = 300,
        radius = 12,
        pad = 12,
        fill = C.panel,
        stroke = { 1, C.accent },
        ui.text({ c.name, no_wrap = true, color = C.text, font_size = 14 }),
      })
    end
  end
  col_list[#col_list + 1] = W.guide_v("gv:tail", col_slot == #columns + 1)

  if S.drag and S.drag.kind == "card" then
    for i = 1, #cards do
      if cards[i].id == S.drag.id then
        flying = card_of(cards[i], true)
        break
      end
    end
  end

  -- The ghost sits at the root, outside every scroll clip, in viewport coords: `x`/`y` are
  -- `pos - grab`, i.e. where the dragged element's top-left belongs right now.
  local ghost = flying
    and ui.col({
      absolute = true,
      left = S.drag.x,
      top = S.drag.y,
      w = 300,
      scale = S.drag.scale or 1,
      opacity = 0.9,
      flying,
    })

  return ui.col({
    full = true,
    fill = C.bg,
    -- top bar
    ui.row({
      gap = 10,
      px = 24,
      py = 14,
      align_center = true,
      ui.text({ "Board", no_wrap = true, color = C.text, font_size = 18 }),
      W.badge(#cards),
      ui.col({ grow = true }),
      ui.button({
        id = "open-col",
        h = 32,
        px = 14,
        radius = 8,
        center = true,
        fill = C.accent,
        hover_fill = C.accent_hi,
        press_scale = 0.97,
        ui.text({ "+  Column", no_wrap = true, color = "#ffffff", font_size = 13 }),
        on_click = function()
          update({ kind = "open_col" })
        end,
      }),
    }),
    ui.col({ h = 1, w_full = true, fill = C.line_soft }),
    -- board
    ui.col({
      id = "board_zoom",
      zoomable = true,
      grow = true,
      w_full = true,
      fill = C.bg,
      ui.row({
        id = "board",
        h_full = true,
        stretch = true,
        px = 13,
        py = 20,
        col_list,
      }),
    }),
    ghost or false,
    S.col_modal and modal(),
  })
end

-- MODEL
--
-- Columns and cards live in the CRDT, not in Lua tables: `board.columns` and `board.cards` are
-- the mirror, refreshed from Loro before every frame, and every mutation goes back through the
-- doc. That is what makes the board survive a restart, and what will make a second peer's drag
-- show up here.
--
-- One rule to keep in mind while reading the actions below: **the mirror is a frame behind your
-- own write.** `:set` and friends go straight to Loro, and `board.cards` is only repatched in
-- view(). So read what you need first, then write; never read back what you just wrote.
--
-- This module runs once per app instance -- `require` caches it -- so the seeding below happens
-- once no matter how many files ask for the model.
local C = require("theme")

local board = doc:open("board")

-- Module scope runs on every open, so seeding has to be guarded or reopening the app would
-- wipe the board it just loaded.
--
-- `w` is seeded so the field is there to read, but every reader still says `c.w or C.col_w`:
-- boards created before columns had a width are the common case, not the exotic one.
if not board.columns then
  board:set({ "columns" }, doc.list({
    doc.map({ id = "c-todo", name = "Todo", w = C.col_w }),
    doc.map({ id = "c-doing", name = "In Progress", w = C.col_w }),
    doc.map({ id = "c-done", name = "Done", w = C.col_w }),
  }))
end
if not board.cards then
  board:set({ "cards" }, doc.list({
    doc.map({ id = "k1", col = "c-todo", text = "Wire the MCP bridge" }),
    doc.map({ id = "k2", col = "c-todo", text = "Font weight in TextSpec" }),
    doc.map({ id = "k3", col = "c-doing", text = "Error boundaries in walk" }),
    doc.map({ id = "k4", col = "c-done", text = "ui.state + sweep" }),
  }))
end

-- Per-viewer pointer state -- what *this* pointer is doing right now. Deliberately not in the
-- doc: broadcasting a half-finished drag would show everyone else your mouse.
--
-- It has to be a table field rather than a local now that the view lives in another file. A
-- `local drag` is file-scoped, and reassigning it here could never be seen from main.lua; a
-- field on an exported table can. That is the whole cost of the split, and it is why there is
-- exactly one of these tables rather than one per module.
local S = { drag = nil, placement = nil, col_modal = false, resize = nil }

local actions = {}

local function index_of(list, id)
  for i = 1, #list do
    if list[i].id == id then
      return i
    end
  end
end

local function find(list, id)
  local i = index_of(list, id)
  return i and list[i]
end

-- Loro's move removes then reinserts, so `to` is the index the element ends up at *after* its
-- own removal. Dragging downwards therefore lands one slot short unless the target is nudged.
local function target_index(list, from, anchor_id, before)
  local at = index_of(list, anchor_id)
  if not at then
    return #list
  end
  local to = before and at or at + 1
  if from < to then
    to = to - 1
  end
  return to
end

local function commit_card()
  local cards = board.cards
  local from = index_of(cards, S.drag.id)
  if not from then
    return
  end
  -- Dropped on a column rather than on a card: leave the ordering alone and just restamp the
  -- column. The card list is flat, so `col` is the only thing that has to change.
  if S.placement.kind == "into" then
    board:set({ "cards", S.drag.id, "col" }, S.placement.col)
    return
  end
  if S.drag.id == S.placement.id then
    return
  end
  local at = index_of(cards, S.placement.id)
  local anchor = at and cards[at]
  -- Move first, then restamp: :move retargets the element's `pos` register and :set writes a
  -- field inside it, and those are independent registers. Deleting and reinserting would mint
  -- a new element, which is how a concurrent edit turns into a duplicated card.
  board:move({ "cards", S.drag.id }, target_index(cards, from, S.placement.id, S.placement.before))
  if anchor and anchor.col ~= cards[from].col then
    board:set({ "cards", S.drag.id, "col" }, anchor.col)
  end
end

local function commit_col()
  if S.drag.id == S.placement.id then
    return
  end
  local columns = board.columns
  local from = index_of(columns, S.drag.id)
  if not from then
    return
  end
  board:move(
    { "columns", S.drag.id },
    target_index(columns, from, S.placement.id, S.placement.before)
  )
end

local function commit()
  if not (S.drag and S.placement) then
    return
  end
  if S.drag.kind == "col" then
    commit_col()
  else
    commit_card()
  end
end

function actions.add(msg)
  local s = ui.state("draft:" .. msg.col)
  if s.text and s.text ~= "" then
    board:insert({ "cards" }, doc.map({ id = uuid(), col = msg.col, text = s.text }))
    s.text = ""
  end
end

function actions.delete(msg)
  board:delete({ "cards", msg.id })
end

function actions.drag(msg)
  if msg.phase == "start" then
    S.drag = { kind = msg.what, id = msg.id, x = msg.x, y = msg.y, scale = msg.scale }
  elseif msg.phase == "move" then
    if S.drag then
      S.drag.x, S.drag.y, S.drag.scale = msg.x, msg.y, msg.scale
    end
    S.placement = nil
  elseif msg.phase == "end" then
    S.drag, S.placement = nil, nil
  end
end

function actions.drop(msg)
  if not (S.drag and S.drag.kind == "card") then
    return
  end
  if msg.phase == "over" then
    S.placement = { kind = "card", id = msg.id, before = msg.y < 0.5 }
  else
    commit()
  end
end

-- One target, two meanings: a card lands *inside* the column, a column lands *beside* it.
function actions.drop_col(msg)
  if not S.drag then
    return
  end
  if msg.phase == "over" then
    if S.drag.kind == "col" then
      S.placement = { kind = "col", id = msg.col, before = msg.x < 0.5 }
    else
      S.placement = { kind = "into", col = msg.col }
    end
  else
    commit()
  end
end

-- Column width goes in the doc, and the two things it is *not* are worth saying out loud.
--
-- Not source. The obvious home for a size is the `ui.col` that draws the column — that is what
-- docs/design/code-as-tree.md §11 is about — but there is no such node: `column_of` is one
-- constructor drawing every column, so main.lua has nothing in it that means "the Todo column".
-- That is nid-channel.md §5's instance-identity limit, met the first time it mattered.
--
-- Not per-viewer state either, which is the other tempting answer. A wide column is a claim about
-- the work in it, so it belongs to the board the way the column's name does — the next person to
-- open this should see the board somebody arranged, not their own default.
--
-- The clamp runs on every move rather than once at the end, or the pointer walks past the limit
-- and the column sits still until it comes all the way back.
function actions.resize(msg)
  if msg.phase == "start" then
    local c = find(board.columns, msg.id)
    local w = c and c.w or C.col_w
    S.resize = { id = msg.id, from = w, w = w }
    return
  end
  if not (S.resize and S.resize.id == msg.id) then
    return
  end
  if msg.phase == "move" then
    local w = S.resize.from + msg.dx
    S.resize.w = math.max(C.col_w_min, math.min(C.col_w_max, w))
  else
    -- Written unconditionally, including when the press never moved. A guard here looked
    -- obviously right and turned out to be theatre: Loro's own `insert` skips an op whose
    -- value already matches, and `app_host`'s `:set` adds no check of its own, so an
    -- unchanged width never reaches the history either way. Removing the guard fails no test,
    -- which is how it was found. `a_resize_that_never_moved_writes_nothing` pins the behaviour
    -- we are leaning on, so this comment stops being true loudly rather than quietly.
    board:set({ "columns", msg.id, "w" }, S.resize.w)
    S.resize = nil
  end
end

function actions.open_col()
  S.col_modal = true
end

function actions.close_col()
  S.col_modal = false
  -- Clear the draft too, or the next open shows the abandoned text.
  ui.state("col_modal", { name = "" }).name = ""
end

function actions.add_col()
  local m = ui.state("col_modal")
  if not m.name or m.name == "" then
    return
  end
  board:insert({ "columns" }, doc.map({ id = uuid(), name = m.name, w = C.col_w }))
  m.name = ""
  S.col_modal = false
end

function actions.delete_col(msg)
  -- Collect first, delete second. Each :delete lands in the doc immediately but the mirror is
  -- only repatched in view(), so iterating `board.cards` while deleting from it would be
  -- walking a stale list.
  local doomed = {}
  for _, c in ipairs(board.cards) do
    if c.col == msg.id then
      doomed[#doomed + 1] = c.id
    end
  end
  for _, id in ipairs(doomed) do
    board:delete({ "cards", id })
  end
  board:delete({ "columns", msg.id })
end

local function update(msg)
  local f = actions[msg.kind]
  if not f then
    print("unknown action:", msg.kind)
    return
  end
  f(msg)
end

-- Cards keyed by the column they sit in. A derivation over the mirror, so it is recomputed every
-- frame rather than cached: the tables it reads are repatched under it.
local function by_column()
  local out = {}
  for _, c in ipairs(board.columns) do
    out[c.id] = {}
  end
  for _, card in ipairs(board.cards) do
    local list = out[card.col]
    if list then
      list[#list + 1] = card
    end
  end
  return out
end

return {
  board = board,
  state = S,
  update = update,
  by_column = by_column,
}

-- Small pieces that draw and nothing else.
--
-- The boundary here is not "small" but *pure*: every function below is a function of its
-- arguments and the palette. None of them touch the board, the pointer state or `update`, which
-- is what lets them sit in another file without anything being passed down to reach them.
local C = require("theme")

local M = {}

-- Guides are rendered on *every* gap, always, so the space is permanently reserved and nothing
-- shifts when a drop target appears — only the line's alpha changes. `fade` is keyed by id:
-- that's where the runtime parks the tween, so retargeting mid-flight reverses smoothly.
function M.guide(id, on)
  return ui.col({
    py = 3,
    w_full = true,
    ui.col({ id = id, h = 2, radius = 1, fill = C.accent, fade = { on and 1 or 0, 140 } }),
  })
end

-- Vertical twin, for column reordering. No height: the board row is `stretch`, so it fills.
function M.guide_v(id, on)
  return ui.col({
    px = 7,
    ui.col({
      id = id,
      w = 2,
      grow = true,
      radius = 1,
      fill = C.accent,
      fade = { on and 1 or 0, 140 },
    }),
  })
end

-- The resize grip: a hairline in the gutter to the right of a column. Same shape as `guide_v` on
-- purpose — it stands in the same kind of gap and must not push the columns around by being there.
--
-- Faint but never invisible. `guide_v` can fade to nothing because a drop target announces itself
-- when it becomes relevant; a grip has to be found before it is useful, and a control you can only
-- hit by guessing where it is is not a control. Hover brightens it, dragging holds it bright.
--
-- Pure like everything else here: it is handed the handler rather than reaching for `update`.
function M.grip(id, active, on_drag)
  return ui.col({
    px = 4,
    ui.col({
      id = id,
      w = 3,
      grow = true,
      radius = 2,
      fill = active and C.accent or C.line,
      hover_fill = C.accent,
      on_drag = on_drag,
    }),
  })
end

-- Both of these sit on the *main* axis of a row next to text that can be any length — the badge
-- beside a column name, the button beside a card's body. A flex item shrinks to its min-content
-- width before its neighbour gives way, so without `no_shrink` a long card title squashes the
-- delete button until its glyph wraps, and the control the user is reaching for is the one that
-- disappears. Grows nothing, costs nothing, and only matters when space runs out.
function M.badge(n)
  return ui.row({
    px = 7,
    py = 1,
    radius = 10,
    fill = C.line_soft,
    center = true,
    no_shrink = true,
    ui.text({ tostring(n), no_wrap = true, color = C.muted, font_size = 11 }),
  })
end

function M.icon_button(id, glyph, on_press, hover)
  return ui.button({
    id = id,
    w = 22,
    h = 22,
    radius = 6,
    center = true,
    no_shrink = true,
    hover_fill = hover or C.line,
    press_scale = 0.92,
    ui.text({ glyph, no_wrap = true, color = C.muted, font_size = 13 }),
    on_click = on_press,
  })
end

function M.empty_slot(on)
  return ui.col({
    h = 64,
    center = true,
    radius = 8,
    stroke = { 1, on and C.accent or C.line_soft },
    ui.text({ "drop a card here", no_wrap = true, color = on and C.accent or C.muted, font_size = 12 }),
  })
end

return M

-- PALETTE
--
-- Pure data, required by everything that draws. First file to split out precisely because it
-- depends on nothing: if `require` were broken, this is the one that would still work.
--
-- `model.lua` requires it too, which looks like a layering mistake and is not: a resize drag has
-- to clamp *while it is happening*, or the pointer runs past the limit and the column does not
-- start moving again until it comes back. The clamp is where the write is, and the numbers are
-- here with the rest of the board's geometry.
return {
  bg = "#0d1117",
  panel = "#161b22",
  card = "#1c2128",
  card_hi = "#22282f",
  sunken = "#0d1117",
  line = "#30363d",
  line_soft = "#21262d",
  text = "#e6edf3",
  muted = "#8b949e",
  accent = "#2f81f7",
  accent_hi = "#4493f8",
  danger = "#f85149",

  -- Column geometry. `col_w` is what a column starts at; the bounds are what a drag may write.
  -- The floor is the one that matters — a column dragged to nothing has no grip left to drag
  -- back by, and there is no undo for it.
  col_w = 300,
  col_w_min = 180,
  col_w_max = 620,
}

-- CHAT
--
-- Channels on the left, messages or search results on the right. The search box is the point
-- of this app: it is the reference for `index.lua` + `search.query` (docs/design/search.md).
local C = require("theme")
local M = require("model")
local S = M.S

local function channel_button(ch)
  local on = ch.id == S.channel
  return ui.button({
    id = "ch:" .. ch.id,
    px = 10,
    py = 6,
    radius = 6,
    fill = on and C.card_hi or C.panel,
    hover_fill = C.card,
    ui.text({ "# " .. ch.name, color = on and C.text or C.muted, font_size = 13, no_wrap = true }),
    on_click = function()
      S.channel = ch.id
      S.editing = nil
    end,
  })
end

local function small_button(id, label, color, on_click)
  return ui.button({
    id = id,
    px = 6,
    py = 2,
    radius = 4,
    hover_fill = C.card_hi,
    no_shrink = true,
    ui.text({ label, color = color, font_size = 11, no_wrap = true }),
    on_click = on_click,
  })
end

local function message_row(m)
  return ui.row({
    id = "msg:" .. m.id,
    gap = 8,
    px = 10,
    py = 6,
    radius = 6,
    fill = S.editing == m.id and C.card_hi or C.card,
    align_center = true,
    ui.text({ m.author, color = C.accent_hi, font_size = 12, no_wrap = true, no_shrink = true }),
    ui.col({ grow = true, ui.text({ m.text, id = "text:" .. m.id, color = C.text, font_size = 13 }) }),
    small_button("edit:" .. m.id, "edit", C.muted, function()
      S.editing = m.id
    end),
    small_button("del:" .. m.id, "delete", C.danger, function()
      M.delete(m.id)
    end),
  })
end

local function hit_row(h)
  local cid = M.channel_of(h.doc)
  return ui.button({
    id = "hit:" .. h.id,
    gap = 8,
    px = 10,
    py = 6,
    radius = 6,
    fill = C.card,
    hover_fill = C.card_hi,
    ui.text({ "#" .. (cid or h.doc), color = C.hit, font_size = 12, no_wrap = true, no_shrink = true }),
    ui.text({ h.snippet or "", id = "snippet:" .. h.id, color = C.text, font_size = 13 }),
    on_click = function()
      if cid then
        S.channel = cid
      end
    end,
  })
end

local function body(query)
  local rows = {}
  if query ~= "" then
    local hits = search.query(query, { limit = 50 })
    for _, h in ipairs(hits) do
      rows[#rows + 1] = hit_row(h)
    end
    if #hits == 0 then
      rows[1] = ui.text({ "no results", id = "no-results", color = C.muted, font_size = 13 })
    end
    return ui.col({ id = "results", grow = true, scroll_y = true, gap = 6, pad = 12, rows })
  end
  local msgs = M.channel(S.channel).messages or {}
  for _, m in ipairs(msgs) do
    rows[#rows + 1] = message_row(m)
  end
  return ui.col({ id = "messages", grow = true, scroll_y = true, gap = 6, pad = 12, rows })
end

return function()
  local find = ui.state("search", { q = "" })
  local draft = ui.state("composer", { text = "" })
  local send = function()
    M.send(draft.text)
    draft.text = ""
  end

  local sidebar = {}
  for _, ch in ipairs(M.chat.channels or {}) do
    sidebar[#sidebar + 1] = channel_button(ch)
  end

  return ui.row({
    id = "chat",
    grow = true,
    stretch = true,
    fill = C.bg,
    ui.col({ w = 160, no_shrink = true, gap = 4, pad = 10, fill = C.panel, sidebar }),
    ui.col({
      grow = true,
      stretch = true,
      ui.row({
        pad = 10,
        gap = 8,
        ui.input({
          id = "search",
          value = find.q,
          grow = true,
          on_input = function(v)
            find.q = v
          end,
          on_esc = function()
            find.q = ""
          end,
        }),
      }),
      body(find.q),
      ui.row({
        pad = 10,
        gap = 8,
        ui.input({
          id = "composer",
          value = draft.text,
          grow = true,
          on_input = function(v)
            draft.text = v
          end,
          on_enter = send,
        }),
        ui.button({
          id = "send",
          px = 14,
          radius = 6,
          center = true,
          fill = C.accent,
          hover_fill = C.accent_hi,
          ui.text({ S.editing and "save" or "send", color = "#ffffff", font_size = 13, no_wrap = true }),
          on_click = send,
        }),
      }),
    }),
  })
end

-- MODEL
--
-- `chat` holds the channel list; each channel's messages live in their own doc,
-- `channel/<id>`, so one busy channel never makes another's doc large. Search spans them all
-- because `index.lua` matches `channel/*`.
local M = { S = { channel = "general", editing = nil } }

local chat = doc:open("chat")
if not chat.channels then
  chat:set({ "channels" }, doc.list({
    doc.map({ id = "general", name = "general" }),
    doc.map({ id = "design", name = "design" }),
  }))
end
M.chat = chat

local docs = {}
function M.channel(cid)
  local d = docs[cid]
  if not d then
    d = doc:open("channel/" .. cid)
    docs[cid] = d
  end
  return d
end

-- Seeded so a fresh app (and the app-shipped tests' empty tab) has something to find.
local general = M.channel("general")
if not general.messages then
  general:set({ "messages" }, doc.list({
    doc.map({ id = "seed-1", author = "anu", text = "the deploy is green", sent_at = 1 }),
    doc.map({ id = "seed-2", author = "abe", text = "lunch at noon?", sent_at = 2 }),
  }))
end

local function message(text)
  return doc.map({ id = uuid(), author = "me", text = text, sent_at = now() })
end

-- Read the mirror before writing: `d.messages` is a frame behind, and only decides whether the
-- list exists yet.
function M.send(text)
  if text == "" then
    return
  end
  local S, d = M.S, M.channel(M.S.channel)
  if S.editing then
    d:set({ "messages", S.editing, "text" }, text)
    S.editing = nil
  elseif d.messages then
    d:insert({ "messages" }, message(text))
  else
    d:set({ "messages" }, doc.list({ message(text) }))
  end
end

function M.delete(id)
  M.channel(M.S.channel):delete({ "messages", id })
  if M.S.editing == id then
    M.S.editing = nil
  end
end

-- "channel/design" → "design"
function M.channel_of(doc_name)
  return doc_name:match("^channel/(.+)$")
end

return M

-- What search sees: one record per message, across every channel doc. The host runs this in
-- its own read-only VM (docs/design/search.md §4) — nothing here can write or draw.
--
-- The author is indexed as the id it is, not a display name: a rename then re-indexes nothing.
return {
  doc = "channel/*",
  each = { "messages" },
  key = function(m)
    return m.id
  end,
  fields = function(_id, m, _channel)
    return {
      body = m.text,
      facet = { author = m.author },
      time = m.sent_at,
    }
  end,
  rank = "recent",
}

return {
  bg = "#0d1117",
  panel = "#161b22",
  card = "#1c2128",
  card_hi = "#22282f",
  line = "#30363d",
  text = "#e6edf3",
  muted = "#8b949e",
  accent = "#2f81f7",
  accent_hi = "#4493f8",
  danger = "#f85149",
  hit = "#d29922",
}