.member-row__joined { display: inline-flex; width: 88px; }

  }

}

@layer components {

  /* The lockup is one link, so the mark and the word sit on one baseline with

     the same 10px the divider uses on its right -- the eye should read

     "OpenAgents" as labelling the glyph, not as a separate control. */

  .sidebar-brand__mark {

    display: inline-flex;

    align-items: center;

    gap: 10px;

  }

  .sidebar-brand__wordmark {

    color: var(--text-primary);

    font-size: 0.9375rem;

    font-weight: 700;

    letter-spacing: -0.01em;

  }

}

@layer components {

  /* The comment count sits with the other trailing facts, quiet until there is

     something to say. */

  .issue-row__comments {

    display: inline-flex;

    flex: none;

    align-items: center;

    gap: 4px;

    color: var(--text-dim);

    font-size: 0.75rem;

    font-variant-numeric: tabular-nums;

  }

  .issue-row__comments .icon {

    width: 14px;

    height: 14px;

    font-size: 14px;

  }

}

@layer components {

  /* A project row plus its own destructive control. The row fills the width and

     the control sits outside it, so clicking the row can only ever navigate. */

  .project-list__row {

    display: flex;

    align-items: center;

    gap: 8px;

  }

  .project-list__row > :first-child {

    min-width: 0;

    flex: 1;

  }

  .project-list__delete {

    flex: none;

  }

}

This doc says how those two survive each other. It is a strategy note, not a

plan of record: the tracker for the component work is

`docs/2026-08-20-circle-ui-port.md`, and the URL/API compatibility target is

`~/work/sarah/docs/audits/2026-08-19-github-clone-harvest-candidates.md`.

`docs/github-api-issues-projects-assessment.md`.

## The two commitments are about different layers

## Where they actually collide

Three places, and only three. Everything else is a false conflict.

Three places. The owner's ruling on all three is the same and it is the

strict one:

### 1. Status: two categories versus six

> I do not want custom fields. I would rather drop Linear concepts than munge

> them onto GitHub. Let us do GitHub API things only.

GitHub's issue has `state`, and it is binary — `open` or `closed` — with

`state_reason` narrowing a close (`completed`, `not_planned`, `duplicate`,

`reopened`). Circle's issue has six: backlog, todo, in progress, in review,

done, cancelled.

So the resolution below is not "find a GitHub-shaped home for every Linear

idea." It is: **if GitHub has no field for it, we do not have the concept.**

The temptation is to add a `status` column. That breaks parity the moment a

client reads it, because the client asked for a GitHub issue.

### 1. Status: two categories, not six

**GitHub has already solved this, and recently.** The current issue schema

carries `issue_field_values`, an array of typed custom fields:

GitHub's issue has `state` — `open` or `closed` — with `state_reason`

narrowing a close (`completed`, `not_planned`, `duplicate`, `reopened`).

Circle has six categories.

```

issue-field-value: issue_field_id, issue_field_name, data_type, value,

                   single_select_option, multi_select_options

data_type: text | single_select | multi_select | number | date

```

We take GitHub's two. An issue is open or it is closed, and a closed one may

say why. Backlog, todo, in progress and in review are **not modelled**. They

are not renamed, not approximated by labels, and not stored anywhere.

A `single_select` field named Status, whose options are the six categories, is

**exactly** how GitHub models this today. It is not a workaround. We already

have `project_fields` with `name`, `data_type` and `options`, which is the same

shape one level up.

What survives is the *rendering*: `issue_status/1` draws a ring for open and a

filled check for closed, which is a better-looking pair of glyphs than the two

we had, and costs nothing in the contract.

The mapping that keeps both promises:

A note for later, recorded because it will come up: the current GitHub schema

does carry `issue_field_values` — typed custom fields with `single_select`

among the data types — and that is genuinely how GitHub itself models a

richer status today. It was the obvious answer and the owner has declined it.

The reason is worth keeping: a field that only our UI writes and only our UI

reads is a second model wearing the first one's clothes, and every client that

does not know about it sees an issue that is subtly wrong. Two honest states

beat six states that only one client understands.

| Reading | Writing |

| --- | --- |

| `state` stays derived: anything but done/cancelled is `open` | a client writing `state: "closed"` sets the Status field to done |

| `state_reason` derives too: cancelled → `not_planned` | a client writing `state_reason: "not_planned"` sets cancelled |

| the Status field is the richer truth | the UI writes the field; `state` follows |

### 2. Priority: dropped

A GitHub client sees an issue that opens and closes. A person sees six

categories. Neither is being lied to, because `open` genuinely is "not done and

not cancelled".

GitHub has no priority field. We do not add one, and we do not adopt the

`priority: high` label convention either — a label is a flat, user-defined

tag, and an ordered scale pushed through it is a convention, not a contract.

### 2. Priority: GitHub has no such field

Circle has four levels. GitHub has none — priority is conventionally a label

(`priority: high`), which is why every GitHub-shaped tool grew a label

convention.

Same answer, and it is the better one: a `single_select` custom field named

Priority. Labels stay labels — a flat, user-defined vocabulary — instead of

being overloaded into an ordered scale they cannot express. `issue_priority/1`

already renders four levels from one shape, so the UI is waiting on the field,

not the other way round.

If a client expects the label convention, emit **both**: the field is the

truth, a `priority: high` label is a projection for tools that only read

labels. Projections are cheap; a second source of truth is not.

`issue_priority/1` stays in the component library unused, the way

`pricing_column/1` does. When there is a GitHub-shaped place for it, the

renderer is ready. Until then the column simply is not there.

### 3. Grouping and cycles

Circle groups by status, assignee, priority, or project, and has cycles.

GitHub's list endpoint filters (`state`, `labels`, `assignee`, `milestone`,

`since`) but does not group, and has milestones rather than cycles.

Grouping is free and we take it. The list endpoint returns issues; the page

groups them by state, assignee, label, or milestone. No parameter is added to

a GitHub-shaped endpoint, and no data changes — grouping is arithmetic over a

response.

Grouping is a **view** concern: the list endpoint returns issues, the page

groups them. Nothing to reconcile — do not add a `group_by` parameter to a

GitHub-shaped endpoint.

Cycles are not milestones and should not pretend to be. A milestone has a due

date and a fixed scope; a cycle is a repeating window that rolls unfinished

work forward. Until there is a reason to model cycles, milestones are the

GitHub-shaped answer and the UI should say "milestone".

Cycles are dropped. A milestone has a due date and a fixed scope; a cycle is a

repeating window that rolls unfinished work forward. GitHub has the first, so

we have the first, and the UI calls it a milestone.

## What GitHub gives us that Linear's model does not

Worth noting, because the parity constraint is not purely a tax. The current

Worth stating, because the constraint is not only subtractive. The current

schema also carries:

- **`type`** — an issue type (bug, feature, task) with a colour, enabled per

  parent/child issues.

- **`issue_dependencies_summary`** — blocking relationships.

Circle's UI has no vocabulary for these, so they are ours to design rather than

port. The progress arc from `issue_status/1` is the obvious renderer for

`sub_issues_summary.percent_completed` — it already fills from a number.

These are real GitHub fields, so they are all fair game, and Circle has no

vocabulary for any of them. The progress arc in `issue_status/1` already fills

from a number, which makes it the obvious renderer for

`sub_issues_summary.percent_completed` — a Linear-derived control displaying a

GitHub-native fact, which is exactly the shape this whole document is arguing

for.

## Rules of thumb

1. **A design decision that changes a payload is not a design decision.** If

   adopting a Linear pattern would add or rename a JSON field, stop: it belongs

   in a custom field, a projection, or the view layer.

2. **Custom fields before columns.** Anything Linear has and GitHub does not is

   a `single_select` field until proven otherwise. That is GitHub's own answer.

3. **Derive the compatibility surface, never the rich one.** `state` is

   computed from Status. Never the reverse, or the two drift and the API starts

   lying.

   adopting a Linear pattern would add or rename a JSON field, stop.

2. **No field, no concept.** Anything Linear has and GitHub does not, we do

   not have. Not as a custom field, not as a label convention, not as a column

   nobody else can read. Drop it and render what remains well.

3. **A component may outlive its data.** `issue_priority/1` and

   `project_row/1`'s health cell stay in the library, unused, until GitHub has

   somewhere to put them. An unused component costs a page in a catalogue; an

   invented field costs every client.

4. **Grouping, sorting, density, and keyboard access are free.** They touch no

   contract. Take all of them.

5. **Do not rename GitHub's nouns in the UI.** A milestone is called a

## Where this leaves the current work

The Circle components exist and are catalogued; nothing renders them on a real

page yet, because doing so needs the Status and Priority fields above. That is

the next decision, and it is a schema decision rather than a UI one — which is

why the port stopped at the component library rather than guessing at it.

The Circle components exist and are catalogued. The port stopped short of

rendering them on a real page because it thought a schema decision was

pending. Under this ruling there is none: the components take GitHub's fields

and leave the rest of their attributes at their defaults, which is what those

defaults are for.

Order that follows from this doc, now that no schema decision is pending:

Order that follows from this doc:

1. Wire `issue_row/1`, `issue_group/1` and `issue_toolbar/1` into the issue

   index, passing only GitHub-shaped data: state, labels, assignees,

   milestone, comment count, number, title, author, timestamps.

2. The same for `project_row/1` on the project index.

3. Then grouping and sorting on the index, which is arithmetic over the

   existing response.

1. Custom fields on issues (`issue_field_values`-shaped), with Status and

   Priority as the first two.

2. Derive `state` and `state_reason` from Status, both directions, with tests

   that a GitHub-shaped client sees no change.

3. Then wire `issue_row/1`, `issue_group/1` and `issue_toolbar/1` into the

   issue index, which by then is only a view change.

The blocker that stopped the component port is gone: there was never a schema

decision to make, only a decision not to make one.

  def assignee(assigns) do

    ~H"""

    <span class={["assignee", @class]} data-size={@size} {@rest}>

    <span

      class={["assignee", @class]}

      data-size={@size}

      title={@name || "Unassigned"}

      {@rest}

    >

      <span class="assignee__figure">

        <UI.avatar

          :if={@name}

  attr :project, :string, default: nil

  attr :due, :string, default: nil, doc: "already formatted; overdue is the caller's judgement"

  attr :created, :string, default: nil

  # GitHub-native facts the source had no vocabulary for. `comments` is on

  # every issue payload and is the one number a reader scans a list for after

  # the title; `author` is who opened it, which GitHub prints in the same

  # breath as when.

  attr :comments, :integer, default: nil

  attr :author, :string, default: nil

  attr :assignee, :map, default: nil, doc: "`%{name:, src:, presence:}`; `nil` is unassigned"

  attr :selected, :boolean, default: false

  attr :class, :any, default: nil

          </span>

        </span>

        <span :if={@due} class="issue-row__due">Due {@due}</span>

        <span :if={@created} class="issue-row__date">{@created}</span>

        <span :if={@created} class="issue-row__date">

          {@created}<span :if={@author}> by {@author}</span>

        </span>

        <%!-- Absent rather than zero: "0 comments" is a fact nobody scans a

        list for, and a column of zeroes is noise. --%>

        <span :if={@comments && @comments > 0} class="issue-row__comments">

          <UI.icon name="comment" /> {@comments}

        </span>

        <.assignee

          name={@assignee && @assignee[:name]}

          src={@assignee && @assignee[:src]}

  slot :tab, required: true do

    attr :label, :string, required: true

    attr :navigate, :any, required: true

    # `navigate` remounts; `patch` keeps the mount and lets `handle_params`

    # answer. Tabs that filter one collection belong to the same LiveView, so

    # they should patch -- but a tab that leads to a different view exists too,

    # hence both.

    attr :navigate, :any

    attr :patch, :any

    attr :selected, :boolean

  end

    <nav class={["view-tabs", @class]} aria-label={@label} {@rest}>

      <.link

        :for={tab <- @tab}

        navigate={tab.navigate}

        navigate={tab[:navigate]}

        patch={tab[:patch]}

        class="view-tabs__tab"

        aria-current={tab[:selected] && "page"}

      >

  def sidebar_brand(assigns) do

    ~H"""

    <header class="sidebar-brand">

      <%!-- The application's own rail carries the wordmark; the docs and

      component shells do not, because the section name beside the divider is

      already doing that half of the job and "OpenAgents | Docs" said the brand

      twice. Mark and word are one link, so the whole lockup goes home. --%>

      <.link navigate={~p"/"} class="sidebar-brand__mark" aria-label="OpenAgents home">

        <img src={~p"/favicon-32x32.png"} alt="" width="24" height="24" />

        <span :if={is_nil(@title)} class="sidebar-brand__wordmark">OpenAgents</span>

      </.link>

      <span :if={@title} class="sidebar-brand__divider" aria-hidden="true"></span>

      <.link :if={@title} patch={@path} class="sidebar-brand__title">{@title}</.link>

    ~H"""

    <footer class="sidebar-footer">

      <.link navigate={~p"/docs"} class="sidebar-footer__link">

        <UI.icon name="book" /> Documentation

      </.link>

      <.link :if={@components_link?} navigate={~p"/components"} class="sidebar-footer__link">

        <UI.icon name="widget" /> Components

      </.link>

      <.link navigate={~p"/leaderboard"} class="sidebar-footer__link">

        <UI.icon name="trophy-top" /> Leaderboard

      </.link>

      <.link

        :if={@admin_link?}

        id="open-admin"

      >

        <UI.icon name="shield-lock" /> Admin

      </.link>

      <.link :if={@components_link?} navigate={~p"/components"} class="sidebar-footer__link">

        <UI.icon name="widget" /> Components

      </.link>

      <.link navigate={~p"/docs"} class="sidebar-footer__link">

        <UI.icon name="book" /> Documentation

      </.link>

      <.link navigate={~p"/leaderboard"} class="sidebar-footer__link">

        <UI.icon name="trophy-top" /> Leaderboard

      </.link>

    </footer>

    """

  end

  use OpenAgentsWeb, :live_view

  alias OpenAgents.Issues

  alias OpenAgentsWeb.UI.Circle

  alias OpenAgents.Repositories

  def mount(_params, _session, socket) do

  def render(assigns) do

    ~H"""

    <Layouts.app flash={@flash} current_scope={@current_scope}>

      <div class="bg-background border border-border rounded-lg overflow-hidden">

        <div class="flex flex-wrap items-center gap-3 p-4 border-b border-border">

          <div class="flex items-center gap-1">

            <%!-- These two are the current filter, so the selected one carries

            `aria-current` and the accent tone rather than a pressed-button

            class; the style pack has no active state for a link. --%>

            <.link

    <Layouts.app flash={@flash} current_scope={@current_scope} title="Issues" wide>

      <Circle.issue_toolbar>

        <:leading>

          <Circle.view_tabs>

            <:tab

              label={"#{@open_count} Open"}

              patch={~p"/#{@owner}/#{@repo}/issues?state=open"}

              class={["btn gap-1", @state == "open" && "text-foreground font-semibold"]}

              data-variant="ghost"

              data-size="sm"

              aria-current={@state == "open" && "page"}

            >

              <.icon name="warning" class="size-4 text-success" />

              <span class="font-semibold">{@open_count}</span> Open

            </.link>

            <.link

              selected={@state == "open"}

            />

            <:tab

              label={"#{@closed_count} Closed"}

              patch={~p"/#{@owner}/#{@repo}/issues?state=closed"}

              class={["btn gap-1", @state == "closed" && "text-foreground font-semibold"]}

              data-variant="ghost"

              data-size="sm"

              aria-current={@state == "closed" && "page"}

            >

              <.icon name="check-circle" class="size-4 text-muted-foreground" />

              <span class="font-semibold">{@closed_count}</span> Closed

            </.link>

          </div>

          <div class="flex-1 min-w-[12rem]">

            <label class="input w-full max-w-xs flex items-center gap-2">

              <.icon name="search" class="size-4 text-muted-foreground" />

              <input

                type="text"

                placeholder="Search or filter results..."

                class="grow bg-transparent outline-none"

              />

            </label>

          </div>

          <div class="flex items-center gap-1">

            <button class="btn gap-1" data-variant="ghost" data-size="sm">

              <.icon name="tag" class="size-4" /> Labels

            </button>

            <button class="btn gap-1" data-variant="ghost" data-size="sm">

              <.icon name="flag" class="size-4" /> Milestones

            </button>

            <button class="btn gap-1" data-variant="ghost" data-size="sm">

              <.icon name="user" class="size-4" /> Assignees

            </button>

            <button class="btn gap-1" data-variant="ghost" data-size="sm">

              <.icon name="filter" class="size-4" /> Sort

            </button>

          </div>

              selected={@state == "closed"}

            />

          </Circle.view_tabs>

        </:leading>

        <:actions>

          <.link

            navigate={~p"/#{@owner}/#{@repo}/labels"}

            class="btn"

            data-variant="ghost"

            data-size="sm"

          >

            <.icon name="tag" /> Labels

          </.link>

          <.link

            navigate={~p"/#{@owner}/#{@repo}/milestones"}

            class="btn"

            data-variant="ghost"

            data-size="sm"

          >

            <.icon name="flag" /> Milestones

          </.link>

          <.link

            navigate={~p"/#{@owner}/#{@repo}/issues/new"}

            class="btn"

          >

            New issue

          </.link>

        </div>

        </:actions>

      </Circle.issue_toolbar>

        <%= if @issues_count == 0 do %>

          <div class="p-8 text-center">

            <.icon

              name="clipboard"

              class="size-12 mx-auto mb-3 text-muted-foreground/50"

            />

            <h3 class="text-lg font-medium mb-1">

              No {if(@state == "open", do: "open", else: "closed")} issues

            </h3>

            <p class="text-sm text-muted-foreground">

              Issues will show up here once they are created.

            </p>

          </div>

        <% else %>

          <div id="issues" phx-update="stream" class="divide-y divide-border">

            <div

              :for={{id, issue} <- @streams.issues}

              id={id}

              class="p-4 hover:bg-card"

            >

              <div class="flex items-start gap-4">

                <.icon

                  name={

                    if(issue.state == "open",

                      do: "warning",

                      else: "check-circle"

                    )

                  }

                  class={[

                    "size-5 shrink-0",

                    issue.state == "open" && "text-success",

                    issue.state == "closed" && "text-muted-foreground"

                  ]}

                />

                <div class="flex-1 min-w-0">

                  <h3 class="font-semibold text-base">

                    <.link

                      navigate={~p"/#{@owner}/#{@repo}/issues/#{issue.number}"}

                      class="btn px-0 text-base font-semibold"

                      data-variant="link"

                    >

                      {issue.title}

                    </.link>

                    <span class="text-muted-foreground font-normal text-sm ml-1">

                      #{issue.number}

                    </span>

                  </h3>

                  <p class="text-sm text-muted-foreground mt-1">

                    Opened on {Calendar.strftime(issue.inserted_at, "%b %d, %Y")} by {(issue.user &&

                                                                                         issue.user[

                                                                                           "login"

                                                                                         ]) ||

                      "anonymous"}

                    <%= if issue.comments > 0 do %>

                      <span class="inline-flex items-center gap-1 ml-2">

                        <.icon name="comment" class="size-4" />

                        {issue.comments}

                      </span>

                    <% end %>

                  </p>

                  <div class="flex flex-wrap gap-1 mt-2">

                    <%= for label <- issue.labels || [] do %>

                      <span

                        class="badge rounded-full px-2 py-0.5"

                        style={"background-color: ##{label["color"]}; color: #000;"}

                      >

                        {label["name"]}

                      </span>

                    <% end %>

                  </div>

                </div>

                <div class="avatar-group shrink-0">

                  <%= for assignee <- issue.assignees || [] do %>

                    <span class="avatar size-6" title={assignee["login"]}>

                      <span class="!text-xs">

                        {assignee["login"] |> String.first() |> String.upcase()}

                      </span>

                    </span>

                  <% end %>

                </div>

              </div>

            </div>

          </div>

        <% end %>

      <.empty

        :if={@issues_count == 0}

        id="issues-empty"

        title={"No #{@state} issues"}

      >

        Issues will show up here once they are created.

      </.empty>

      <div :if={@issues_count > 0} id="issues" phx-update="stream" class="issue-list">

        <Circle.issue_row

          :for={{id, issue} <- @streams.issues}

          id={id}

          identifier={"##{issue.number}"}

          title={issue.title}

          navigate={~p"/#{@owner}/#{@repo}/issues/#{issue.number}"}

          status_category={category(issue)}

          status_label={status_label(issue)}

          labels={labels(issue)}

          assignee={assignee(issue)}

          created={"opened #{relative(issue.inserted_at)} ago"}

          author={author(issue)}

          comments={issue.comments}

        />

      </div>

    </Layouts.app>

    """

  end

  # GitHub's two states, and nothing invented on top of them. `not_planned` is

  # the one close reason with a distinct reading, so it takes the cancelled

  # glyph; every other close is a completion.

  defp category(%{state: "closed", state_reason: "not_planned"}), do: :canceled

  defp category(%{state: "closed"}), do: :completed

  defp category(_issue), do: :unstarted

  defp status_label(%{state: "closed", state_reason: "not_planned"}), do: "Closed as not planned"

  defp status_label(%{state: "closed"}), do: "Closed"

  defp status_label(_issue), do: "Open"

  # A label carries a colour on GitHub; the row takes a tone from our ladder

  # rather than that hex, so the list stays in one palette.

  defp labels(%{labels: labels}) when is_list(labels) do

    Enum.map(labels, fn label ->

      %{name: label["name"] || label[:name] || "label", tone: :neutral}

    end)

  end

  defp labels(_issue), do: []

  # GitHub issues carry many assignees; the row shows the first, which is the

  # one GitHub itself treats as `assignee`.

  defp assignee(%{assignees: [first | _rest]}) when is_map(first) do

    %{

      name: first["login"] || first[:login],

      src: first["avatar_url"] || first[:avatar_url],

      presence: :none

    }

  end

  defp assignee(_issue), do: nil

  # GitHub prints who opened an issue beside when. An issue whose author is

  # gone still has a history, so it says so rather than showing a blank.

  defp author(%{user: %{} = user}), do: user["login"] || user[:login] || "anonymous"

  defp author(_issue), do: "anonymous"

  defp relative(nil), do: nil

  defp relative(at) do

    at = if is_struct(at, NaiveDateTime), do: DateTime.from_naive!(at, "Etc/UTC"), else: at

    case DateTime.diff(DateTime.utc_now(), at, :second) do

      s when s < 3_600 -> "#{max(div(s, 60), 1)}m"

      s when s < 86_400 -> "#{div(s, 3_600)}h"

      s -> "#{div(s, 86_400)}d"

    end

  end

end

  use OpenAgentsWeb, :live_view

  alias OpenAgents.Projects

  alias OpenAgentsWeb.UI.Circle

  alias OpenAgents.Projects.Project

  alias OpenAgents.Repositories

  def render(assigns) do

    ~H"""

    <Layouts.app flash={@flash} current_scope={@current_scope}>

      <div class="flex items-center justify-between mb-4">

        <h1 class="text-2xl font-bold">Projects</h1>

      </div>

    <Layouts.app flash={@flash} current_scope={@current_scope} title="Projects" wide>

      <.form

        for={@form}

        id="new-project-form"

        </footer>

      </.form>

      <%= if @projects == [] do %>

        <div class="alert" data-variant="info" role="status">

          <.icon name="info-circle" class="size-5" />

          <section>No projects yet.</section>

        </div>

      <% else %>

        <div class="grid gap-4 md:grid-cols-2 lg:grid-cols-3">

          <%= for project <- @projects do %>

            <article class="card !m-0">

              <header>

                <h3 class="card-title">

                  <.link

                    navigate={~p"/#{@owner}/#{@repo}/projects/#{project.number}"}

                    class="btn px-0"

                    data-variant="link"

                  >

                    {project.title}

                  </.link>

                </h3>

                <p>{project.state}</p>

              </header>

              <footer class="flex justify-end gap-2 mt-4">

                <.link

                  navigate={~p"/#{@owner}/#{@repo}/projects/#{project.number}"}

                  class="btn"

                  data-variant="ghost"

                  data-size="sm"

                >

                  View

                </.link>

                <button

                  class="btn"

                  data-variant="ghost"

                  data-size="sm"

                  data-tone="danger"

                  phx-click="delete"

                  phx-value-id={project.id}

                  data-confirm="Delete this project?"

                >

                  Delete

                </button>

              </footer>

            </article>

          <% end %>

      <div :if={@projects == []} class="alert" data-variant="info" role="status">

        <.icon name="info-circle" class="size-5" />

        <section>No projects yet.</section>

      </div>

      <div :if={@projects != []} class="project-list">

        <div :for={project <- @projects} class="project-list__row">

          <Circle.project_row

            name={project.title}

            navigate={~p"/#{@owner}/#{@repo}/projects/#{project.number}"}

            status_category={if project.state == "closed", do: :completed, else: :unstarted}

            status_label={String.capitalize(project.state)}

          />

          <%!-- Deletion stays a control of its own rather than something the

          row grew: the row is a link to a board, and a destructive action

          inside a link target is how people delete things by accident. --%>

          <button

            class="btn project-list__delete"

            data-variant="ghost"

            data-size="sm"

            data-tone="danger"

            phx-click="delete"

            phx-value-id={project.id}

            data-confirm="Delete this project?"

          >

            Delete

          </button>

        </div>

      <% end %>

      </div>

    </Layouts.app>

    """

  end

             "Roadmap"

           )

    # The row's name is the link to its board. A separate "View" control beside

    # a row that already navigates is one more thing to aim at for the same

    # destination.

    assert has_element?(

             view,

             ~s{a[href="/OpenAgentsInc/openagents.com/projects/#{project.number}"]},

             "View"

             project.title

           )

  end