layered-assistant-rails 0.1.0

data/app/views/layered/assistant/conversations/index.html.erb

@@ -0,0 +1,63 @@
+<div class="l-ui-container--spread">
+  <h1><%= @assistant ? "Conversations - #{@assistant.name}" : "Conversations" %></h1>
+  <div class="l-ui-container--spread">
+    <% if @assistant %>
+      <%= link_to "Back", layered_assistant.assistants_path, class: "l-ui-button--outline" %>
+    <% end %>
+    <%= link_to "New", layered_assistant.new_conversation_path(conversation: @assistant ? { assistant_id: @assistant.id } : {}), class: "l-ui-button--primary" %>
+  </div>
+</div>
+
+<div class="l-ui-container--table l-ui-utility--mt-lg">
+  <table class="l-ui-table">
+    <caption class="l-ui-sr-only"><%= @assistant ? "Conversations for #{@assistant.name}" : "Conversations" %></caption>
+    <thead class="l-ui-table__header">
+      <tr>
+        <th scope="col" class="l-ui-table__header-cell">Name</th>
+        <% unless @assistant %>
+          <th scope="col" class="l-ui-table__header-cell">Assistant</th>
+        <% end %>
+        <th scope="col" class="l-ui-table__header-cell">Messages</th>
+        <th scope="col" class="l-ui-table__header-cell">Tokens</th>
+        <th scope="col" class="l-ui-table__header-cell">User</th>
+        <th scope="col" class="l-ui-table__header-cell">Created</th>
+        <th scope="col" class="l-ui-table__header-cell--action">Actions</th>
+      </tr>
+    </thead>
+
+    <tbody class="l-ui-table__body">
+      <% @conversations.each do |conversation| %>
+        <tr>
+          <th scope="row" class="l-ui-table__cell--primary">
+            <%= link_to conversation.name, layered_assistant.conversation_path(conversation) %>
+          </th>
+          <% unless @assistant %>
+            <td class="l-ui-table__cell">
+              <%= link_to conversation.assistant.name, layered_assistant.assistant_conversations_path(conversation.assistant) %>
+            </td>
+          <% end %>
+          <td class="l-ui-table__cell">
+            <%= link_to conversation.messages_count.to_i, layered_assistant.conversation_messages_path(conversation) %>
+          </td>
+          <td class="l-ui-table__cell">
+            <%= number_with_delimiter(conversation.token_estimate.to_i) %>
+          </td>
+          <td class="l-ui-table__cell">
+            <%# nil owner = public conversation (guest user) %>
+            <%= conversation.owner.try(:name) || "Guest" %>
+          </td>
+          <td class="l-ui-table__cell">
+            <%= conversation.created_at.to_fs(:short) %>
+          </td>
+          <td class="l-ui-table__cell--action">
+            <%= link_to "Edit", layered_assistant.edit_conversation_path(conversation) %>
+          </td>
+        </tr>
+      <% end %>
+    </tbody>
+  </table>
+
+  <div class="l-ui-utility--mt-lg">
+    <%= l_ui_pagy(@pagy) %>
+  </div>
+</div>

data/app/views/layered/assistant/conversations/new.html.erb

@@ -0,0 +1,6 @@
+<div class="l-ui-container--spread">
+  <h1>New Conversation</h1>
+  <%= link_to "Back", layered_assistant.conversations_path, class: "l-ui-button--outline" %>
+</div>
+
+<%= render "form", conversation: @conversation, url: layered_assistant.conversations_path %>

data/app/views/layered/assistant/conversations/show.html.erb

@@ -0,0 +1,25 @@
+<%= turbo_stream_from @conversation %>
+
+<div class="l-ui-conversation__container">
+  <div class="l-ui-container--spread">
+    <h1><%= @conversation.name %></h1>
+    <%= link_to "Back", layered_assistant.conversations_path, class: "l-ui-button--outline" %>
+  </div>
+
+  <div class="l-ui-conversation__messages" data-controller="messages">
+    <div id="<%= dom_id(@conversation) %>_messages" class="<%= dom_id(@conversation) %>_messages l-ui-conversation" aria-live="polite" data-messages-target="list">
+      <%= render "layered/assistant/messages/system_prompt", conversation: @conversation %>
+      <%= render partial: "layered/assistant/messages/message", collection: @messages, as: :message %>
+    </div>
+
+    <button class="l-ui-scroll-to-bottom"
+            data-messages-target="scrollButton"
+            data-action="click->messages#jumpToBottom"
+            aria-label="Scroll to bottom"
+            type="button">
+      <%= image_tag "layered_ui/icon_chevron_down.svg", class: "l-ui-icon--sm l-ui-icon--dark-invert", alt: "" %>
+    </button>
+  </div>
+
+  <%= render "layered/assistant/messages/composer", conversation: @conversation, models: @models, selected_model_id: @selected_model_id %>
+</div>

data/app/views/layered/assistant/messages/_composer.html.erb

@@ -0,0 +1,15 @@
+<%= form_with url: layered_assistant.conversation_messages_path(conversation), id: "composer-form", data: { controller: "composer", composer_target: "form", action: "submit->composer#submit" } do |f| %>
+  <div class="l-ui-conversation__composer">
+    <%= f.text_area :content, name: "message[content]", class: "l-ui-conversation__composer-input", placeholder: "Type a message...", "aria-label": "Message", rows: 1, data: { composer_target: "input", action: "keydown->composer#submitOnEnter" } %>
+
+    <button type="submit" class="l-ui-button--primary" title="Send (Enter)" data-composer-target="button">Send</button>
+  </div>
+
+  <% if models.any? %>
+    <div class="l-ui-form__group">
+      <div class="l-ui-select-wrapper">
+        <%= f.select :model_id, options_for_select(models.map { |m| ["#{m.provider.name}: #{m.name}", m.id] }, selected_model_id), {}, name: "message[model_id]", class: "l-ui-select", "aria-label": "AI model" %>
+      </div>
+    </div>
+  <% end %>
+<% end %>

data/app/views/layered/assistant/messages/_message.html.erb

@@ -0,0 +1,25 @@
+<%= tag.div id: dom_id(message), class: "#{dom_id(message)} #{message.user? ? "l-ui-message--sent" : "l-ui-message"}" do %>
+  <div class="l-ui-message__bubble">
+    <% unless message.user? %>
+      <div class="l-ui-message__author"><%= message.role.capitalize %></div>
+    <% end %>
+    <div class="<%= dom_id(message) %>_body l-ui-message__body<%= " l-ui-markdown" unless message.assistant? && message.content.blank? %>">
+      <% if message.assistant? && message.content.blank? %>
+        <div class="l-ui-typing-indicator" role="status" aria-label="Assistant is typing">
+          <span class="l-ui-typing-indicator__dot"></span>
+          <span class="l-ui-typing-indicator__dot"></span>
+          <span class="l-ui-typing-indicator__dot"></span>
+        </div>
+      <% else %>
+        <%= render_message_content(message) %>
+      <% end %>
+    </div>
+    <div class="l-ui-message__footer">
+      <% total_tokens = message.input_tokens.to_i + message.output_tokens.to_i %>
+      <% if message.model || total_tokens > 0 %>
+        <span class="l-ui-message__metadata"><%= [message.model&.name, total_tokens > 0 ? "#{message.tokens_estimated? ? "~" : ""}#{number_with_delimiter(total_tokens)} tokens" : nil].compact.join(" · ") %></span>
+      <% end %>
+      <span class="l-ui-message__timestamp"><%= message.created_at.to_fs(:short) %></span>
+    </div>
+  </div>
+<% end %>

data/app/views/layered/assistant/messages/_system_prompt.html.erb

@@ -0,0 +1,10 @@
+<% if conversation.assistant.system_prompt.present? %>
+  <div class="l-ui-message">
+    <div class="l-ui-message__bubble">
+      <div class="l-ui-message__author">System</div>
+      <div class="l-ui-message__body">
+        <%= conversation.assistant.system_prompt %>
+      </div>
+    </div>
+  </div>
+<% end %>

data/app/views/layered/assistant/messages/create.turbo_stream.erb

@@ -0,0 +1,9 @@
+<% if @error %>
+  <%= turbo_stream.append "#{dom_id(@conversation)}_messages" do %>
+    <div class="l-ui-notice--error l-ui-utility--mb-0" role="alert"><%= @error %></div>
+  <% end %>
+<% end %>
+
+<%= turbo_stream.replace "composer-form" do %>
+  <%= render "layered/assistant/messages/composer", conversation: @conversation, models: @models, selected_model_id: @selected_model_id %>
+<% end %>

data/app/views/layered/assistant/messages/index.html.erb

@@ -0,0 +1,46 @@
+<div class="l-ui-container--spread">
+  <h1>Messages</h1>
+  <%= link_to "Back", layered_assistant.conversations_path, class: "l-ui-button--outline" %>
+</div>
+
+<div class="l-ui-container--table l-ui-utility--mt-lg">
+  <table class="l-ui-table">
+    <caption class="l-ui-sr-only">Messages</caption>
+    <thead class="l-ui-table__header">
+      <tr>
+        <th scope="col" class="l-ui-table__header-cell">Role</th>
+        <th scope="col" class="l-ui-table__header-cell">Content</th>
+        <th scope="col" class="l-ui-table__header-cell">Tokens</th>
+        <th scope="col" class="l-ui-table__header-cell">Created</th>
+        <th scope="col" class="l-ui-table__header-cell--action">Actions</th>
+      </tr>
+    </thead>
+
+    <tbody class="l-ui-table__body">
+      <% @messages.each do |message| %>
+        <tr>
+          <th scope="row" class="l-ui-table__cell--primary">
+            <%= message.role %>
+          </th>
+          <td class="l-ui-table__cell">
+            <%= truncate(message.content, length: 100) %>
+          </td>
+          <td class="l-ui-table__cell">
+            <% total = message.input_tokens.to_i + message.output_tokens.to_i %>
+            <%= number_with_delimiter(total) || 0 %>
+          </td>
+          <td class="l-ui-table__cell">
+            <%= message.created_at.to_fs(:short) %>
+          </td>
+          <td class="l-ui-table__cell--action">
+            <%= link_to "Delete", layered_assistant.conversation_message_path(@conversation, message), data: { turbo_method: :delete, turbo_confirm: "Are you sure?" } %>
+          </td>
+        </tr>
+      <% end %>
+    </tbody>
+  </table>
+
+  <div class="l-ui-utility--mt-lg">
+    <%= l_ui_pagy(@pagy) %>
+  </div>
+</div>

data/app/views/layered/assistant/models/_form.html.erb

@@ -0,0 +1,30 @@
+<%= form_with(model: model, url: url, html: { class: "l-ui-form l-ui-utility--mt-2xl" }) do |f| %>
+  <%= render "layered_ui/shared/form_errors", item: model %>
+
+  <div class="l-ui-form__group">
+    <%= render "layered_ui/shared/label", form: f, field: :name, required: true %>
+    <%= f.text_field :name, class: "l-ui-form__field" %>
+    <%= render "layered_ui/shared/field_error", object: model, field: :name %>
+  </div>
+
+  <div class="l-ui-form__group">
+    <%= render "layered_ui/shared/label", form: f, field: :identifier, required: true %>
+    <%= f.text_field :identifier, class: "l-ui-form__field" %>
+    <%= render "layered_ui/shared/field_error", object: model, field: :identifier %>
+  </div>
+
+  <label class="l-ui-switch l-ui-utility--mt-xl">
+    <%= f.check_box :enabled, class: "l-ui-switch__input", role: "switch" %>
+    <span class="l-ui-switch__track"></span>
+    Enabled
+  </label>
+
+  <div class="l-ui-container--spread l-ui-utility--mt-2xl">
+    <% if model.persisted? %>
+      <%= link_to "Delete", layered_assistant.provider_model_path(@provider, model), class: "l-ui-button--outline-danger", data: { turbo_method: :delete, turbo_confirm: "Are you sure?" } %>
+    <% else %>
+      <span></span>
+    <% end %>
+    <%= f.submit f.object.new_record? ? 'Create' : 'Update', class: "l-ui-button--primary" %>
+  </div>
+<% end %>

data/app/views/layered/assistant/models/edit.html.erb

@@ -0,0 +1,6 @@
+<div class="l-ui-container--spread">
+  <h1>Edit Model</h1>
+  <%= link_to "Back", layered_assistant.provider_models_path(@provider), class: "l-ui-button--outline" %>
+</div>
+
+<%= render "form", model: @model, url: layered_assistant.provider_model_path(@provider, @model) %>

data/app/views/layered/assistant/models/index.html.erb

@@ -0,0 +1,54 @@
+<div class="l-ui-container--spread">
+  <h1>Models</h1>
+  <div class="l-ui-container--spread">
+    <%= link_to "Back", layered_assistant.providers_path, class: "l-ui-button--outline" %>
+    <%= link_to "New", layered_assistant.new_provider_model_path(@provider), class: "l-ui-button--primary" %>
+  </div>
+</div>
+
+<div class="l-ui-container--table l-ui-utility--mt-lg">
+  <table class="l-ui-table">
+    <caption class="l-ui-sr-only">Models</caption>
+    <thead class="l-ui-table__header">
+      <tr>
+        <th scope="col" class="l-ui-table__header-cell">Name</th>
+        <th scope="col" class="l-ui-table__header-cell">Identifier</th>
+        <th scope="col" class="l-ui-table__header-cell">Enabled</th>
+        <th scope="col" class="l-ui-table__header-cell">Assistants</th>
+        <th scope="col" class="l-ui-table__header-cell">Messages</th>
+        <th scope="col" class="l-ui-table__header-cell--action">Actions</th>
+      </tr>
+    </thead>
+
+    <tbody class="l-ui-table__body">
+      <% @models.each do |model| %>
+        <tr>
+          <td class="l-ui-table__cell--primary">
+            <%= model.name %>
+          </td>
+          <td class="l-ui-table__cell">
+            <%= model.identifier %>
+          </td>
+          <td class="l-ui-table__cell">
+            <span class="<%= model.enabled? ? "l-ui-badge--success" : "l-ui-badge--danger" %>">
+              <%= model.enabled? ? "Enabled" : "Disabled" %>
+            </span>
+          </td>
+          <td class="l-ui-table__cell">
+            <%= model.assistants_count %>
+          </td>
+          <td class="l-ui-table__cell">
+            <%= model.messages_count %>
+          </td>
+          <td class="l-ui-table__cell--action">
+            <%= link_to "Edit", layered_assistant.edit_provider_model_path(@provider, model) %>
+          </td>
+        </tr>
+      <% end %>
+    </tbody>
+  </table>
+
+  <div class="l-ui-utility--mt-lg">
+    <%= l_ui_pagy(@pagy) %>
+  </div>
+</div>

data/app/views/layered/assistant/models/new.html.erb

@@ -0,0 +1,6 @@
+<div class="l-ui-container--spread">
+  <h1>New Model</h1>
+  <%= link_to "Back", layered_assistant.provider_models_path(@provider), class: "l-ui-button--outline" %>
+</div>
+
+<%= render "form", model: @model, url: layered_assistant.provider_models_path(@provider) %>

data/app/views/layered/assistant/panel/conversations/_header.html.erb

@@ -0,0 +1,23 @@
+<%= turbo_frame_tag "assistant_panel_header" do %>
+  <div class="l-ui-form__group l-ui-utility--mt-0">
+    <div class="l-ui-select-wrapper l-ui-utility--mt-0 l-ui-utility---mr-2">
+      <select name="conversation_id" class="l-ui-select" aria-label="Select conversation"
+              data-controller="panel-nav"
+              data-action="change->panel-nav#navigate"
+              data-panel-nav-new-url-value="<%= layered_assistant.new_panel_conversation_path %>">
+        <option value="<%= layered_assistant.panel_conversations_path %>" <%= "selected" if selected == layered_assistant.panel_conversations_path %>>Conversations</option>
+        <option value="new" <%= "selected" if selected == "new" %>>+ New</option>
+        <% assistants.each do |assistant| %>
+          <% assistant_conversations = conversations.select { |c| c.assistant_id == assistant.id } %>
+          <% if assistant_conversations.any? %>
+            <optgroup label="<%= assistant.name %>">
+              <% assistant_conversations.each do |c| %>
+                <option value="<%= layered_assistant.panel_conversation_path(c) %>" <%= "selected" if selected == layered_assistant.panel_conversation_path(c) %>><%= c.name %></option>
+              <% end %>
+            </optgroup>
+          <% end %>
+        <% end %>
+      </select>
+    </div>
+  </div>
+<% end %>

data/app/views/layered/assistant/panel/conversations/index.html.erb

@@ -0,0 +1,46 @@
+<%= render "layered/assistant/panel/conversations/header", assistants: @assistants, conversations: @conversations, selected: layered_assistant.panel_conversations_path %>
+
+<%= turbo_frame_tag "assistant_panel" do %>
+  <div class="l-ui-container--table">
+      <table class="l-ui-table l-ui-utility--mt-0">
+        <caption class="l-ui-sr-only">Conversations in panel</caption>
+        <thead class="l-ui-table__header">
+          <tr>
+            <th scope="col" class="l-ui-table__header-cell">Created</th>
+            <th scope="col" class="l-ui-table__header-cell">Name</th>
+            <th scope="col" class="l-ui-table__header-cell">Messages</th>
+            <th scope="col" class="l-ui-table__header-cell">Tokens</th>
+            <th scope="col" class="l-ui-table__header-cell--action">Actions</th>
+          </tr>
+        </thead>
+
+        <tbody class="l-ui-table__body">
+          <% if @conversations.any? %>
+            <% @conversations.each do |conversation| %>
+              <tr>
+                <td class="l-ui-table__cell">
+                  <%= conversation.created_at.to_fs(:short) %>
+                </td>
+                <th scope="row" class="l-ui-table__cell--primary">
+                  <%= link_to conversation.name, layered_assistant.panel_conversation_path(conversation), data: { turbo_frame: "assistant_panel" } %>
+                </th>
+                <td class="l-ui-table__cell">
+                  <%= link_to conversation.messages_count || 0, layered_assistant.conversation_messages_path(conversation), data: { turbo_frame: "_top" } %>
+                </td>
+                <td class="l-ui-table__cell">
+                  <%= number_with_delimiter(conversation.token_estimate.to_i) %>
+                </td>
+                <td class="l-ui-table__cell--action">
+                  <%= button_to "Delete", layered_assistant.panel_conversation_path(conversation), method: :delete, class: "l-ui-table__action--danger", data: { turbo_confirm: "Delete this conversation?" } %>
+                </td>
+              </tr>
+            <% end %>
+          <% else %>
+            <tr>
+              <td class="l-ui-table__cell" colspan="5">No conversations yet.</td>
+            </tr>
+          <% end %>
+        </tbody>
+      </table>
+  </div>
+<% end %>

data/app/views/layered/assistant/panel/conversations/new.html.erb

@@ -0,0 +1,23 @@
+<%= render "layered/assistant/panel/conversations/header", assistants: @assistants, conversations: [], selected: "new" %>
+
+<%= turbo_frame_tag "assistant_panel" do %>
+  <%= form_with(model: @conversation, url: layered_assistant.panel_conversations_path, html: { class: "l-ui-form l-ui-utility--mt-0" }) do |f| %>
+    <%= render "layered_ui/shared/form_errors", item: @conversation %>
+
+    <div class="l-ui-form__group l-ui-utility--mt-0">
+      <%= render "layered_ui/shared/label", form: f, field: :assistant_id, name: "Assistant", required: true %>
+      <%= f.select :assistant_id, @assistants.map { |a| [a.name, a.id] }, { include_blank: "Select:" }, class: "l-ui-select" %>
+      <%= render "layered_ui/shared/field_error", object: @conversation, field: :assistant %>
+    </div>
+
+    <div class="l-ui-form__group">
+      <%= render "layered_ui/shared/label", form: f, field: :name, required: false %>
+      <%= f.text_field :name, class: "l-ui-form__field" %>
+      <p class="l-ui-form__hint">Auto-set from first message if left blank</p>
+    </div>
+
+    <div class="l-ui-utility--mt-lg">
+      <%= f.submit "Create conversation", class: "l-ui-button--primary" %>
+    </div>
+  <% end %>
+<% end %>

data/app/views/layered/assistant/panel/conversations/show.html.erb

@@ -0,0 +1,24 @@
+<%= render "layered/assistant/panel/conversations/header", assistants: @assistants, conversations: @conversations, selected: layered_assistant.panel_conversation_path(@conversation) %>
+
+<%= turbo_frame_tag "assistant_panel" do %>
+  <div class="l-ui-conversation__container">
+    <%= turbo_stream_from @conversation %>
+
+    <div class="l-ui-conversation__messages" data-controller="messages">
+      <div id="panel_<%= dom_id(@conversation) %>_messages" class="<%= dom_id(@conversation) %>_messages l-ui-conversation" aria-live="polite" data-messages-target="list">
+        <%= render "layered/assistant/messages/system_prompt", conversation: @conversation %>
+        <%= render partial: "layered/assistant/messages/message", collection: @messages, as: :message %>
+      </div>
+
+      <button class="l-ui-scroll-to-bottom"
+              data-messages-target="scrollButton"
+              data-action="click->messages#jumpToBottom"
+              aria-label="Scroll to bottom"
+              type="button">
+        <%= image_tag "layered_ui/icon_chevron_down.svg", class: "l-ui-icon--sm l-ui-icon--dark-invert", alt: "" %>
+      </button>
+    </div>
+
+    <%= render "layered/assistant/panel/messages/composer", conversation: @conversation, models: @models, selected_model_id: @selected_model_id %>
+  </div>
+<% end %>

data/app/views/layered/assistant/panel/messages/_composer.html.erb

@@ -0,0 +1,15 @@
+<%= form_with url: layered_assistant.panel_conversation_messages_path(conversation), id: "panel-composer-form", data: { controller: "composer", composer_target: "form", turbo_frame: "_top", action: "submit->composer#submit" } do |f| %>
+  <div class="l-ui-conversation__composer">
+    <%= f.text_area :content, name: "message[content]", class: "l-ui-conversation__composer-input", placeholder: "Type a message...", "aria-label": "Message", rows: 1, data: { composer_target: "input", action: "keydown->composer#submitOnEnter" } %>
+
+    <button type="submit" class="l-ui-button--primary" title="Send (Enter)" data-composer-target="button">Send</button>
+  </div>
+
+  <% if models.any? %>
+    <div class="l-ui-form__group">
+      <div class="l-ui-select-wrapper">
+        <%= f.select :model_id, options_for_select(models.map { |m| ["#{m.provider.name}: #{m.name}", m.id] }, selected_model_id), {}, name: "message[model_id]", class: "l-ui-select", "aria-label": "AI model" %>
+      </div>
+    </div>
+  <% end %>
+<% end %>

data/app/views/layered/assistant/panel/messages/create.turbo_stream.erb

@@ -0,0 +1,9 @@
+<% if @error %>
+  <%= turbo_stream.append_all ".#{dom_id(@conversation)}_messages" do %>
+    <div class="l-ui-notice--error l-ui-utility--mb-0" role="alert"><%= @error %></div>
+  <% end %>
+<% end %>
+
+<%= turbo_stream.replace "panel-composer-form" do %>
+  <%= render "layered/assistant/panel/messages/composer", conversation: @conversation, models: @models, selected_model_id: @selected_model_id %>
+<% end %>

data/app/views/layered/assistant/providers/_form.html.erb

@@ -0,0 +1,81 @@
+<%= form_with(model: provider, url: url, html: { class: "l-ui-form l-ui-utility--mt-2xl" }) do |f| %>
+  <%= render "layered_ui/shared/form_errors", item: provider %>
+
+  <div data-controller="provider-template" data-provider-template-templates-value="<%= Layered::Assistant::Provider::TEMPLATES.values.flatten.to_json %>">
+    <% unless provider.persisted? %>
+      <div class="l-ui-form__group">
+        <label class="l-ui-label" for="provider_template">Template</label>
+        <select id="provider_template" class="l-ui-select" data-action="provider-template#apply">
+          <option value="">Manual</option>
+          <% Layered::Assistant::Provider::TEMPLATES.each do |group, templates| %>
+            <optgroup label="<%= group %>">
+              <% templates.each do |t| %>
+                <option value="<%= t[:key] %>"><%= t[:name] %></option>
+              <% end %>
+            </optgroup>
+          <% end %>
+        </select>
+        <div class="l-ui-form__hint" hidden data-provider-template-target="description"></div>
+      </div>
+    <% end %>
+
+    <div class="l-ui-form__group">
+      <%= render "layered_ui/shared/label", form: f, field: :name, required: true %>
+      <%= f.text_field :name, class: "l-ui-form__field", data: { provider_template_target: "name" } %>
+      <%= render "layered_ui/shared/field_error", object: provider, field: :name %>
+    </div>
+
+    <div class="l-ui-form__group">
+      <%= render "layered_ui/shared/label", form: f, field: :protocol, required: true %>
+      <%= f.select :protocol, Layered::Assistant::Provider.protocols.map { |k, v| [v, k] }, { include_blank: "Select:" }, { class: "l-ui-select", data: { provider_template_target: "protocol" } } %>
+      <%= render "layered_ui/shared/field_error", object: provider, field: :protocol %>
+    </div>
+
+    <div class="l-ui-form__group">
+      <%= render "layered_ui/shared/label", form: f, field: :url, name: "URL", required: false %>
+      <%= f.url_field :url, class: "l-ui-form__field", data: { provider_template_target: "url" } %>
+      <%= render "layered_ui/shared/field_error", object: provider, field: :url %>
+    </div>
+
+    <div class="l-ui-form__group">
+      <%= render "layered_ui/shared/label", form: f, field: :secret, name: "Secret", required: false %>
+      <%= f.password_field :secret, class: "l-ui-form__field" %>
+      <%= render "layered_ui/shared/field_error", object: provider, field: :secret %>
+      <div class="l-ui-form__hint" hidden data-provider-template-target="secretHint"></div>
+    </div>
+  </div>
+
+  <label class="l-ui-switch l-ui-utility--mt-xl">
+    <%= f.check_box :enabled, class: "l-ui-switch__input", role: "switch" %>
+    <span class="l-ui-switch__track"></span>
+    Enabled
+  </label>
+
+  <% unless provider.persisted? %>
+    <div class="l-ui-form__group">
+      <label class="l-ui-label">Models</label>
+      <div class="l-ui-radio__group">
+        <div class="l-ui-radio__item">
+          <%= f.radio_button :create_models, "1", class: "l-ui-radio__input", checked: true %>
+          <%= f.label :create_models_1, "If available, automatically create popular models for this provider", class: "l-ui-radio__label" %>
+        </div>
+        <div class="l-ui-radio__item">
+          <%= f.radio_button :create_models, "0", class: "l-ui-radio__input" %>
+          <%= f.label :create_models_0, "Add your own models manually", class: "l-ui-radio__label" %>
+        </div>
+      </div>
+      <div class="l-ui-form__hint">
+        Popular model identifiers are sourced from: <%= link_to "https://github.com/layered-ai-public/layered-assistant-rails/blob/main/data/models.json", "https://github.com/layered-ai-public/layered-assistant-rails/blob/main/data/models.json", target: "_blank", rel: "noopener noreferrer" %>.
+      </div>
+    </div>
+  <% end %>
+
+  <div class="l-ui-container--spread l-ui-utility--mt-2xl">
+    <% if provider.persisted? %>
+      <%= link_to "Delete", layered_assistant.provider_path(provider), class: "l-ui-button--outline-danger", data: { turbo_method: :delete, turbo_confirm: "Are you sure?" } %>
+    <% else %>
+      <span></span>
+    <% end %>
+    <%= f.submit f.object.new_record? ? 'Create' : 'Update', class: "l-ui-button--primary" %>
+  </div>
+<% end %>

data/app/views/layered/assistant/providers/edit.html.erb

@@ -0,0 +1,6 @@
+<div class="l-ui-container--spread">
+  <h1>Edit Provider</h1>
+  <%= link_to "Back", layered_assistant.providers_path, class: "l-ui-button--outline" %>
+</div>
+
+<%= render "form", provider: @provider, url: layered_assistant.provider_path(@provider) %>

data/app/views/layered/assistant/providers/index.html.erb

@@ -0,0 +1,47 @@
+<div class="l-ui-container--spread">
+  <h1>Providers</h1>
+  <%= link_to "New", layered_assistant.new_provider_path, class: "l-ui-button--primary" %>
+</div>
+
+<div class="l-ui-container--table l-ui-utility--mt-lg">
+  <table class="l-ui-table">
+    <caption class="l-ui-sr-only">Providers</caption>
+    <thead class="l-ui-table__header">
+      <tr>
+        <th scope="col" class="l-ui-table__header-cell">Name</th>
+        <th scope="col" class="l-ui-table__header-cell">Protocol</th>
+        <th scope="col" class="l-ui-table__header-cell">Models</th>
+        <th scope="col" class="l-ui-table__header-cell">Enabled</th>
+        <th scope="col" class="l-ui-table__header-cell--action">Actions</th>
+      </tr>
+    </thead>
+
+    <tbody class="l-ui-table__body">
+      <% @providers.each do |provider| %>
+        <tr>
+          <td class="l-ui-table__cell--primary">
+            <%= provider.name %>
+          </td>
+          <td class="l-ui-table__cell">
+            <%= Layered::Assistant::Provider.protocols[provider.protocol] %>
+          </td>
+          <td class="l-ui-table__cell">
+            <%= link_to provider.models_count, layered_assistant.provider_models_path(provider) %>
+          </td>
+          <td class="l-ui-table__cell">
+            <span class="<%= provider.enabled? ? "l-ui-badge--success" : "l-ui-badge--danger" %>">
+              <%= provider.enabled? ? "Enabled" : "Disabled" %>
+            </span>
+          </td>
+          <td class="l-ui-table__cell--action">
+            <%= link_to "Edit", layered_assistant.edit_provider_path(provider) %>
+          </td>
+        </tr>
+      <% end %>
+    </tbody>
+  </table>
+
+  <div class="l-ui-utility--mt-lg">
+    <%= l_ui_pagy(@pagy) %>
+  </div>
+</div>

data/app/views/layered/assistant/providers/new.html.erb

@@ -0,0 +1,6 @@
+<div class="l-ui-container--spread">
+  <h1>New Provider</h1>
+  <%= link_to "Back", layered_assistant.providers_path, class: "l-ui-button--outline" %>
+</div>
+
+<%= render "form", provider: @provider, url: layered_assistant.providers_path %>