{

  "files": ["lib/openagents_web/components/layouts/root.html.heex"],

  "insertBefore": "</body>",

  "commentSyntax": "html",

  "cspChecked": true

}

# Product

## Register

product

## Users

OpenAgents serves people who build, operate, and inspect agent-backed software.

Authenticated users work with Sarah, delegated work, connected computers,

memory, issues, projects, and source repositories. Operators qualify releases

and monitor Forge and fleet state. Public visitors can inspect bounded product,

source, and operational evidence without an account.

## Product purpose

OpenAgents provides one public, self-hostable application for building and

operating agent-backed software. It makes model activity, delegated work,

repository changes, deployment state, and governing authority visible and

verifiable. The product succeeds when users can move from an objective to a

proven change without losing durable evidence or bypassing an authorization

boundary.

## Brand personality

Precise, transparent, and resilient. The interface communicates operational

facts directly, distinguishes measured state from intent, and remains useful

when part of the system is degraded.

## Anti-references

- Generic software-as-a-service dashboards that decorate activity without

  showing evidence, authority, or failure state.

- Interfaces that hide agent actions behind an undifferentiated loading state.

- Competing component libraries, inconsistent controls, ornamental motion, and

  color-only status communication.

- Marketing claims that present planned, configured, or simulated behavior as

  completed production capability.

## Design principles

- Show live operational truth with bounded, attributable evidence.

- Make authority and lifecycle state visible before offering an action.

- Preserve familiar controls and one consistent component vocabulary.

- Keep public projections useful while excluding credentials, private content,

  and unbounded transcripts.

- Design degraded, empty, loading, and recovery states as primary product

  states.

## Accessibility and inclusion

Target WCAG 2.2 AA. Support keyboard navigation, visible focus, semantic

structure, screen-reader status labels, and status distinctions that do not

depend on color. Honor reduced-motion preferences and keep live updates bounded

so assistive technology does not receive an uncontrolled event stream.

 * media query whether a preference was *stored*.

 */

@layer components {

  /* A circle, not a rounded square: this is an icon-only control, so the

     target should be the same shape as the glyph it holds. Width is pinned to

     the height so the box is square before the radius rounds it -- padding

     alone would make it an oval the moment the glyph changed size. */

  .theme-toggle {

    width: 32px;

    min-width: 32px;

    height: 32px;

    min-height: 32px;

    padding: 0;

    border: 0;

    border-radius: 50%;

    background: transparent;

    color: var(--icon-tertiary);

  }

  .theme-toggle .icon {

    width: 16px;

    height: 16px;

    font-size: 16px;

  }

  @media (hover: hover) {

    .theme-toggle:hover {

      background: var(--wash-hover);

      color: var(--icon-primary);

    }

  }

    }

  }

}

/* ── Collapsible sidebar sections ─────────────────────────────────────────── */

/* Native <details>, so no JavaScript and no ARIA to keep in sync. The caret

 * rotates rather than swapping glyphs, which keeps one icon in the set. */

@layer components {

  .sidebar-section {

    display: flex;

    flex-direction: column;

    gap: 2px;

  }

  .sidebar-section__summary {

    display: flex;

    align-items: center;

    gap: 4px;

    cursor: pointer;

    list-style: none;

    user-select: none;

  }

  /* Safari draws its own triangle unless this is removed. */

  .sidebar-section__summary::-webkit-details-marker {

    display: none;

  }

  .sidebar-section__summary:focus-visible {

    outline: 2px solid var(--ring);

    outline-offset: 2px;

    border-radius: 6px;

  }

  .sidebar-section__caret {

    width: 12px;

    height: 12px;

    flex: none;

    font-size: 12px;

    transition: transform 150ms var(--ease);

  }

  .sidebar-section[open] .sidebar-section__caret {

    transform: rotate(90deg);

  }

  .sidebar-section__items {

    display: flex;

    flex-direction: column;

    gap: 2px;

  }

  @media (prefers-reduced-motion: reduce) {

    .sidebar-section__caret {

      transition: none;

    }

  }

}

    %{

      title: "Layout",

      items: [

        %{

          slug: "sidebar-section",

          title: "Sidebar section",

          icon: "chevron-down",

          source: "OpenAgentsWeb.Layouts.sidebar_section/1",

          summary: "A collapsible group of sidebar rows, built on native details."

        },

        %{

          slug: "sidebar-link",

          title: "Sidebar link",

    """

  end

  @doc """

  A collapsible sidebar section.

  A native `<details>`, so it needs no JavaScript, is keyboard operable, and

  reports its own state to assistive technology. Because the sidebar now

  patches rather than remounts, the element survives navigation and so does

  whatever the reader collapsed.

  `open` should be true for the section holding the current page: collapsing

  the section you are reading would hide your own location.

  """

  attr :title, :string, required: true

  attr :open, :boolean, default: false

  slot :inner_block, required: true

  def sidebar_section(assigns) do

    ~H"""

    <details class="docs-sidebar__section sidebar-section" open={@open}>

      <summary class="sidebar-section-label sidebar-section__summary">

        <UI.icon name="chevron-right" class="sidebar-section__caret" />

        <span>{@title}</span>

      </summary>

      <div class="sidebar-section__items">

        {render_slot(@inner_block)}

      </div>

    </details>

    """

  end

  @doc """

  A sidebar row that navigates without throwing the sidebar away.

        />

      </section>

      <section

      <Layouts.sidebar_section

        :for={section <- OpenAgentsWeb.ComponentCatalog.sections()}

        class="docs-sidebar__section"

        title={section.title}

        open={Enum.any?(section.items, &(&1.slug == @active_component))}

      >

        <h3 class="sidebar-section-label">{section.title}</h3>

        <Layouts.sidebar_link

          :for={item <- section.items}

          path={~p"/components/#{item.slug}"}

          selected={@active_component == item.slug}

          patchable={patchable?}

        />

      </section>

      </Layouts.sidebar_section>

      <section class="docs-sidebar__section">

        <h3 class="sidebar-section-label">Reference</h3>

      <Layouts.sidebar_section title="Reference" open={@active_component == :icons}>

        <Layouts.sidebar_link

          path={~p"/components/icons"}

          label="Icons"

          selected={@active_component == :icons}

          patchable={false}

        />

      </section>

      </Layouts.sidebar_section>

    </nav>

  </aside>

  # --- Layout ---------------------------------------------------------------

  defp component_demo(%{item: %{slug: "sidebar-section"}} = assigns) do

    ~H"""

    <div class="space-y-3">

      <p class="text-sm text-base-content/60">

        A native <code>&lt;details&gt;</code>, so it needs no JavaScript and no ARIA

        kept in sync by hand. Click a heading to collapse it.

      </p>

      <div class="docs-sidebar__nav max-w-xs">

        <Layouts.sidebar_section title="Open by default" open>

          <Layouts.sidebar_link path="#" label="First" icon="book" patchable={false} />

          <Layouts.sidebar_link path="#" label="Second" icon="cube" selected patchable={false} />

        </Layouts.sidebar_section>

        <Layouts.sidebar_section title="Collapsed by default">

          <Layouts.sidebar_link path="#" label="Hidden until opened" icon="grid" patchable={false} />

        </Layouts.sidebar_section>

      </div>

      <p class="text-sm text-base-content/60">

        The section holding the current page opens itself: collapsing the section you

        are reading would hide your own location. Because the sidebar patches rather

        than remounts, whatever you collapse stays collapsed as you move between pages.

      </p>

    </div>

    """

  end

  defp component_demo(%{item: %{slug: "sidebar-link"}} = assigns) do

    ~H"""

    <div class="space-y-3">