relay.app 0.1.0

data/app/views/fragments/_chat.erb

@@ -0,0 +1,15 @@
+<div
+  id="chat-panel"
+  class="workspace-chat"
+  hx-ext="ws"
+  <%= 'hx-swap-oob="outerHTML"' if swap_oob %>
+  ws-connect="/api/ws"
+>
+  <section class="chat-surface">
+    <%== partial("fragments/stream", locals: {messages: messages || []}) %>
+    <div class="chat-footer space-y-4">
+      <%== partial("fragments/input", locals: {swap_oob:}) %>
+    </div>
+    <%== partial("fragments/status", locals: status_bar.merge(swap_oob:)) %>
+  </section>
+</div>

data/app/views/fragments/_contexts.erb

@@ -0,0 +1,7 @@
+<div
+  id="contexts-control"
+  class="sidebar-contexts flex h-full min-h-0 flex-col gap-2"
+  <%= 'hx-swap-oob="outerHTML"' if swap_oob %>
+>
+  <%== partial("fragments/contexts_body", locals: {contexts:, show_label:}) %>
+</div>

data/app/views/fragments/_contexts_body.erb

@@ -0,0 +1,35 @@
+<% if show_label %>
+  <div class="flex items-center justify-between gap-3">
+    <span class="label">Chats</span>
+    <span class="sidebar-meta"><%= contexts.size %></span>
+  </div>
+<% end %>
+<form action="/settings/new-context" method="post" class="pb-3" hx-post="/settings/new-context" hx-target="#workspace-main" hx-swap="outerHTML">
+  <button class="sidebar-create-button button-primary w-full px-4 py-2.5 text-sm font-semibold transition focus:outline-none focus:ring-4" style="--tw-ring-color: color-mix(in srgb, var(--theme-accent) 16%, transparent);" type="submit">New Chat</button>
+</form>
+<div class="sidebar-contexts-list scrollbar-chat min-h-0 flex-1 overflow-y-auto pr-1">
+  <% if contexts.empty? %>
+    <div class="field theme-muted text-sm">No saved chats for this AI yet.</div>
+  <% else %>
+    <form class="flex flex-col gap-2" action="/settings/set-context" method="post" hx-post="/settings/set-context" hx-target="#workspace-main" hx-swap="outerHTML" hx-trigger="change from:input[type='radio']">
+      <% contexts.each do |context| %>
+        <% active = context.id == ctx.id %>
+        <label class="sidebar-list-item <%= "is-active" if active %> flex cursor-pointer items-center gap-3 text-sm">
+          <input
+            type="radio"
+            name="context_id"
+            value="<%= context.id %>"
+            <%= "checked" if active %>
+            class="sr-only"
+          >
+          <span class="sidebar-avatar"><%= initials(context.title || "Untitled Chat") %></span>
+          <span class="flex min-w-0 flex-1 flex-col">
+            <span class="truncate font-medium"><%= context.title || "Untitled Context" %></span>
+            <span class="sidebar-meta"><%= context.messages.size %> messages</span>
+          </span>
+          <span class="sidebar-presence" aria-hidden="true"></span>
+        </label>
+      <% end %>
+    </form>
+  <% end %>
+</div>

data/app/views/fragments/_controls.erb

@@ -0,0 +1,15 @@
+<div id="sidebar-controls" class="theme-strong flex h-full min-h-0 w-full flex-col text-sm">
+  <section class="sidebar-group">
+    <span class="label">Provider</span>
+    <div class="sidebar-group-body mt-3 space-y-4">
+      <%== partial("fragments/providers", locals: {show_label: false}) %>
+      <%== partial("fragments/models", locals: {show_label: false}) %>
+    </div>
+  </section>
+  <section class="sidebar-group mt-[20px] min-h-0 flex-1">
+    <%== partial("fragments/contexts", locals: {contexts: contexts, show_label: true, swap_oob: false}) %>
+  </section>
+  <section class="sidebar-group mt-[20px]">
+    <%== partial("fragments/mcp_settings", locals: {servers: mcps, show_label: true, swap_oob: false}) %>
+  </section>
+</div>

data/app/views/fragments/_iframe.erb

@@ -0,0 +1,8 @@
+<iframe src="<%= entry["track"] %>"
+  title="<%= entry["title"] %>"
+  width="704"
+  height="396"
+  style="display:block;width:704px;max-width:100%;height:396px;margin:0.75rem auto 0;border:1px solid var(--theme-panel-border);border-radius:1rem;background:var(--theme-embed-bg);box-shadow:0 10px 24px rgba(0,0,0,0.16);" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" referrerpolicy="strict-origin-when-cross-origin"
+  allowfullscreen>
+</iframe>
+

data/app/views/fragments/_input.erb

@@ -0,0 +1,67 @@
+<div
+  id="chat-input"
+  class="space-y-3"
+  <%= 'hx-swap-oob="outerHTML"' if swap_oob %>
+>
+  <% file = attachment.file %>
+  <% if attachment.error %>
+    <div class="theme-strong text-sm"><%= attachment.error %></div>
+  <% end %>
+  <% if file.attached? %>
+    <div class="composer-attachment theme-strong flex items-center justify-between gap-4 text-sm">
+      <div class="space-y-1">
+        <div>Attached: <%= file.name %></div>
+        <div class="text-xs opacity-80">Will be sent with your next message.</div>
+      </div>
+      <form hx-post="/clear-attachment" hx-target="#chat-input" hx-swap="outerHTML">
+        <button class="composer-submit px-3 py-1 text-sm" type="submit">Remove</button>
+      </form>
+    </div>
+  <% end %>
+  <div class="composer-shell">
+    <form
+      id="chat-composer"
+      class="flex min-w-0 flex-1 items-end gap-3"
+      hx-on::after-settle="this.querySelector('textarea')?.focus()"
+      ws-send
+    >
+      <% if file.attached? %>
+        <input type="hidden" name="attachment_name" value="<%= file.name %>">
+        <input type="hidden" name="attachment_path" value="<%= file.path %>">
+        <input type="hidden" name="attachment_type" value="<%= file.type %>">
+      <% end %>
+      <textarea
+        name="message"
+        rows="1"
+        class="composer-input"
+        placeholder="Message Relay"
+        autocomplete="off"
+        autofocus
+        onkeydown="if (event.key === 'Enter' && !event.shiftKey) { event.preventDefault(); this.form.requestSubmit(); }"
+      ></textarea>
+      <div class="composer-actions shrink-0">
+        <% if attachment.supported? %>
+          <label for="file-upload-input" class="composer-submit button-subtle flex cursor-pointer items-center px-3 py-2 text-sm">
+            Attach
+          </label>
+          <input
+            id="file-upload-input"
+            name="file"
+            type="file"
+            accept="<%= attachment.accept %>"
+            class="hidden"
+          >
+        <% end %>
+        <button
+          class="composer-submit button-primary"
+          type="submit"
+        >
+          Send
+        </button>
+      </div>
+    </form>
+  </div>
+  <div id="file-upload-indicator" class="upload-indicator text-xs">
+    Uploading attachment...
+  </div>
+</div>

data/app/views/fragments/_mcp_settings.erb

@@ -0,0 +1,52 @@
+<div
+  id="mcp-settings"
+  class="theme-strong flex flex-col gap-3 text-sm"
+  <%= %(hx-swap-oob="outerHTML") if swap_oob %>
+>
+  <% if show_label %>
+    <div class="flex items-center justify-between gap-3">
+      <span class="label">MCP</span>
+      <span class="sidebar-meta"><%= servers.size %></span>
+    </div>
+  <% end %>
+  <div class="flex items-center justify-between gap-3">
+    <span class="theme-muted text-[11px]"><%= servers.empty? ? "No servers" : "#{servers.count { _1[:enabled] }}/#{servers.size} enabled" %></span>
+    <a
+      class="theme-muted text-[11px] hover:underline"
+      href="/mcps"
+      hx-get="/mcps"
+      hx-target="#chat-panel"
+      hx-swap="outerHTML"
+    >
+      Manage
+    </a>
+  </div>
+  <% unless servers.empty? %>
+    <div class="mcp-settings-list scrollbar-chat overflow-y-auto pr-1">
+      <ul>
+        <% servers.each do |server| %>
+          <li class="py-1 first:pt-0 last:pb-0">
+            <div class="sidebar-list-item flex items-center justify-between gap-3">
+              <div class="min-w-0">
+                <div class="theme-strong truncate text-sm font-semibold tracking-tight"><%= server.name %></div>
+                <div class="sidebar-meta mt-0.5 line-clamp-1 leading-4"><%= server.transport %></div>
+              </div>
+              <form class="shrink-0" hx-post="/mcps/<%= server.id %>/toggle" hx-swap="none">
+                <button
+                  type="submit"
+                  class="inline-flex min-w-[4rem] items-center justify-center gap-1 rounded-full border px-2 py-0.5 text-[10px] font-semibold transition"
+                  style="<%= server[:enabled] ? "border-color: var(--theme-success-border); background-color: var(--theme-success-bg); color: var(--theme-success-text);" : "border-color: var(--theme-toggle-off-border); background-color: var(--theme-toggle-off-bg); color: var(--theme-toggle-off-text);" %>"
+                  aria-label="<%= server[:enabled] ? "Disable" : "Enable" %> <%= server.name %>"
+                  title="<%= server[:enabled] ? "Enabled" : "Disabled" %>"
+                >
+                  <span aria-hidden="true"><%= server[:enabled] ? "●" : "○" %></span>
+                  <span><%= server[:enabled] ? "On" : "Off" %></span>
+                </button>
+              </form>
+            </div>
+          </li>
+        <% end %>
+      </ul>
+    </div>
+  <% end %>
+</div>

data/app/views/fragments/_message.erb

@@ -0,0 +1,31 @@
+<%
+  role = message.respond_to?(:role) ? message.role.to_sym : message[:role]
+  content = message.respond_to?(:content) ? message.content : message[:content]
+%>
+<% if role == :user %>
+  <div class="mt-3 flex justify-end first:mt-0">
+    <div class="chat-bubble-user w-fit max-w-[75%] [&_*]:text-inherit">
+      <div class="assistant-content space-y-2">
+        <% Array(content).each do |part| %>
+          <% if String === part && !part.empty? %>
+            <div><%== markdown(part) %></div>
+          <% elsif defined?(LLM::Object) && LLM::Object === part && part.kind == :local_file %>
+            <div class="rounded-lg border border-current/20 px-3 py-2 text-sm">
+              PDF: <%= File.basename(part.value.path) %>
+            </div>
+          <% end %>
+        <% end %>
+      </div>
+    </div>
+  </div>
+<% else %>
+  <div class="message-row">
+    <div class="message-avatar">AI</div>
+    <div class="message-stack max-w-[88%]">
+      <div class="message-label">Assistant</div>
+      <div class="assistant-content chat-bubble-assistant">
+        <div><%== markdown(content) %></div>
+      </div>
+    </div>
+  </div>
+<% end %>

data/app/views/fragments/_models.erb

@@ -0,0 +1,25 @@
+<div id="models-control" class="flex flex-col gap-2">
+  <% if show_label %>
+    <span class="label">Provider Model</span>
+  <% end %>
+  <form class="w-full" action="/settings/set-model" method="post">
+    <select
+      class="select-field"
+      name="model"
+      hx-post="/settings/set-model"
+      hx-sync="#sidebar-controls:replace"
+      hx-target="#workspace-main"
+      hx-swap="outerHTML"
+      hx-trigger="change"
+    >
+      <% models.each do |model| %>
+        <option
+          <%= "selected" if model.model_id == self.model %>
+          value="<%= model.model_id %>">
+          <%= model.name %>
+        </option>
+      <% end %>
+    </select>
+  </form>
+  <span class="theme-muted text-[11px]"><%= models.size %> models ready to use</span>
+</div>

data/app/views/fragments/_providers.erb

@@ -0,0 +1,26 @@
+<div id="providers-control" class="flex flex-col gap-2">
+  <% if show_label %>
+    <span class="label">Provider Name</span>
+  <% end %>
+  <form action="/settings/set-provider" method="post">
+    <select
+      class="select-field"
+      name="provider"
+      hx-post="/settings/set-provider"
+      hx-sync="#sidebar-controls:replace"
+      hx-target="#workspace-main"
+      hx-swap="outerHTML"
+      hx-trigger="change"
+    >
+      <% Relay.providers.each do |_, builder| %>
+        <% llm = builder.call %>
+        <option
+          <%= "selected" if llm.name.to_s == provider.to_s %>
+          value="<%= llm.name %>">
+          <%= format_name(llm.name) %>
+        </option>
+      <% end %>
+    </select>
+  </form>
+  <span class="theme-muted text-[11px]">Choose where responses come from</span>
+</div>

data/app/views/fragments/_remove_empty_state.erb

@@ -0,0 +1 @@
+<div id="chatbot-empty-state" hx-swap-oob="delete"></div>

data/app/views/fragments/_replace_last_message.erb

@@ -0,0 +1 @@
+<div hx-swap-oob="outerHTML:#chatbot-messages > :last-child .assistant-content > div"><div><%== markdown(message[:content]) %></div></div>

data/app/views/fragments/_sidebar_menu.erb

@@ -0,0 +1,11 @@
+<details class="sidebar-overflow">
+  <summary aria-label="Open sidebar menu">...</summary>
+  <div class="sidebar-overflow-menu">
+    <div class="flex flex-col gap-4">
+      <%== partial("fragments/providers", locals: {show_label: true}) %>
+      <%== partial("fragments/models", locals: {show_label: true}) %>
+      <div class="theme-divider"></div>
+      <%== partial("fragments/mcp_settings", locals: {servers: mcps, show_label: true, swap_oob: false}) %>
+    </div>
+  </div>
+</details>

data/app/views/fragments/_sidebar_status.erb

@@ -0,0 +1,21 @@
+<div
+  id="chatbot-sidebar-status"
+  class="status-block"
+  hx-swap-oob="outerHTML"
+>
+  <div class="status-label">Status</div>
+  <div class="status-value status-value-inline">
+    <span class="status-text min-w-0"><%= status %></span>
+    <% if cancellable?(status) %>
+      <form class="shrink-0" ws-send>
+        <input type="hidden" name="type" value="interrupt">
+        <button
+          class="inline-flex h-5 w-5 items-center justify-center rounded-full border text-[11px] leading-none transition"
+          style="border-color: var(--theme-danger-border); background-color: var(--theme-danger-bg); color: var(--theme-danger-text);"
+          type="submit"
+          aria-label="Cancel request"
+        >&#10005;</button>
+      </form>
+    <% end %>
+  </div>
+</div>

data/app/views/fragments/_status.erb

@@ -0,0 +1,40 @@
+<div
+  id="chatbot-status"
+  <%= 'hx-swap-oob="outerHTML"' if swap_oob %>
+  class="status-strip"
+>
+  <div class="status-block">
+    <div class="status-label">Status</div>
+    <div class="status-value status-value-inline">
+      <span class="status-text min-w-0"><%= status %></span>
+      <% if cancellable?(status) %>
+        <form class="shrink-0" ws-send>
+          <input type="hidden" name="type" value="interrupt">
+          <button
+            class="inline-flex h-5 w-5 items-center justify-center rounded-full border text-[11px] leading-none transition"
+            style="border-color: var(--theme-danger-border); background-color: var(--theme-danger-bg); color: var(--theme-danger-text);"
+            type="submit"
+            aria-label="Cancel request"
+          >&#10005;</button>
+        </form>
+      <% end %>
+    </div>
+  </div>
+  <div class="status-block status-block--center">
+    <div class="status-label">Context Window</div>
+    <div class="status-window">
+      <progress
+        class="context-progress h-2 w-full overflow-hidden rounded-full"
+        value="<%= context_window[:used] %>"
+        max="<%= [context_window[:max], 1].max %>"
+      ><%= context_window[:label] %></progress>
+      <span class="status-meta"><%= context_window[:label] %></span>
+    </div>
+  </div>
+  <div class="status-block status-block--right">
+    <div class="status-label">Cost</div>
+    <div class="status-value-inline justify-end">
+      <span><%= cost %></span>
+    </div>
+  </div>
+</div>

data/app/views/fragments/_stream.erb

@@ -0,0 +1,26 @@
+<div
+  id="chatbot-stream"
+  class="chat-stream scrollbar-chat min-h-0 min-w-0 flex-1 self-stretch overflow-y-auto"
+>
+  <div class="chat-meta">
+    <div class="chat-meta-copy min-w-0">
+      <div class="theme-strong truncate font-display text-[1.8rem] leading-none tracking-[-0.035em]">Conversation</div>
+      <div class="theme-muted mt-1.5 truncate text-sm"><%= ctx.title || "New Chat" %></div>
+    </div>
+  </div>
+  <div class="space-y-5 pt-6" id="chatbot-messages">
+    <% messages.each do |message| %>
+      <%== partial("fragments/message", locals: {message:}) %>
+    <% end %>
+    <% if messages.empty? %>
+      <div class="chat-empty-state mx-auto max-w-2xl" id="chatbot-empty-state">
+        <div class="section-kicker">Start Here</div>
+        <div class="theme-strong mt-2 text-lg font-medium tracking-tight">Ask a question, switch models, or use a tool-backed workflow.</div>
+        <div class="theme-muted mt-2.5">
+          Relay keeps the conversation, tools, and MCP servers in one workspace so the chat stays central.
+        </div>
+      </div>
+    <% end %>
+    <div id="chatbot-bottom"></div>
+  </div>
+</div>

data/app/views/fragments/_tools.erb

@@ -0,0 +1,34 @@
+<aside id="tools-list" class="rail-section theme-strong flex min-h-0 flex-1 flex-col text-sm" hx-swap-oob="outerHTML">
+  <div class="flex min-h-0 flex-1 flex-col gap-3">
+    <span class="label">Tools</span>
+    <div class="scrollbar-chat min-h-0 flex-1 overflow-y-auto pr-1">
+      <ul>
+        <% tools.each do |tool| %>
+          <li class="py-2 first:pt-0 last:pb-0">
+            <div class="flex items-center justify-between gap-3">
+              <div class="theme-strong min-w-0 text-sm font-semibold tracking-tight"><%= tool.name %></div>
+              <div class="group relative shrink-0">
+                <button
+                  type="button"
+                  class="detail-button"
+                >
+                  Details
+                </button>
+                <div class="tooltip tooltip-card">
+                  <div class="theme-accent text-xs font-semibold uppercase tracking-[0.16em]">
+                    About
+                  </div>
+                  <div class="theme-divider my-2"></div>
+                  <div class="tooltip text-sm leading-6">
+                    <%= tool.description %>
+                  </div>
+                </div>
+              </div>
+            </div>
+          </li>
+        <% end %>
+      </ul>
+    </div>
+    <span class="theme-muted text-[11px]"><%= tools.size %> tools available</span>
+  </div>
+</aside>

data/app/views/fragments/_tools_panel.erb

@@ -0,0 +1,4 @@
+<div id="tools-list" class="rail-section theme-strong flex min-h-0 flex-1 flex-col text-sm" hx-get="/tools" hx-trigger="load" hx-swap="outerHTML">
+  <span class="label">Tools</span>
+  <div class="theme-muted py-1 text-sm font-medium">Loading...</div>
+</div>

data/app/views/fragments/mcp/_editor.erb

@@ -0,0 +1,54 @@
+<% preset = Relay::Models::MCP::Preset[form.preset] %>
+<section id="mcp-editor-pane" class="mcp-pane scrollbar-chat min-h-0 overflow-y-auto px-1 py-1 pr-2">
+  <div class="mb-4 flex items-start justify-between gap-4">
+    <div>
+      <div id="mcp-editor-title" class="text-lg font-semibold tracking-tight">
+        <%= form.persisted? ? preset[:title] : "Add MCP Server" %>
+      </div>
+      <div class="theme-muted mt-1 text-sm"><%= preset[:summary] %></div>
+    </div>
+  </div>
+  <form
+    id="mcp-editor"
+    class="grid gap-3"
+    action="<%= form.persisted? ? "/mcps/#{form.id}" : "/mcps" %>"
+    method="post"
+    hx-post="<%= form.persisted? ? "/mcps/#{form.id}" : "/mcps" %>"
+    hx-target="#chat-panel"
+    hx-swap="outerHTML"
+  >
+    <input type="hidden" name="id" value="<%= form.id %>">
+    <input type="hidden" name="preset" value="<%= form.preset %>">
+    <div class="space-y-2">
+      <span class="label">Preset</span>
+      <div class="mcp-transport-grid">
+        <% Relay::Models::MCP::Preset.all.each do |entry| %>
+          <button
+            class="mcp-transport-option <%= "is-active" if form.preset == entry[:id] %>"
+            type="button"
+            hx-post="/mcps/form"
+            hx-include="#mcp-editor"
+            hx-vals='{"preset":"<%= entry[:id] %>"}'
+            hx-target="#mcp-editor-pane"
+            hx-swap="outerHTML"
+          >
+            <span class="mcp-transport-copy">
+              <span class="mcp-transport-title"><%= entry[:title] %></span>
+              <span class="mcp-transport-hint"><%= entry[:summary] %></span>
+            </span>
+          </button>
+        <% end %>
+      </div>
+    </div>
+    <% if form.preset == "forgejo" %>
+      <%== partial("fragments/mcp/fields_forgejo", locals: {form:}) %>
+    <% else %>
+      <%== partial("fragments/mcp/fields_github", locals: {form:}) %>
+    <% end %>
+  </form>
+  <div class="mt-3 flex flex-wrap items-center justify-end gap-3">
+    <button id="mcp-save" class="composer-submit px-4 py-2" type="submit" form="mcp-editor">
+      Save
+    </button>
+  </div>
+</section>

data/app/views/fragments/mcp/_fields_forgejo.erb

@@ -0,0 +1,16 @@
+<div class="grid gap-4 md:grid-cols-[minmax(0,1fr)_minmax(0,1fr)]">
+  <div class="space-y-2">
+    <label class="label" for="mcp-url">Forgejo URL</label>
+    <input id="mcp-url" class="field font-mono text-sm" name="url" type="url" placeholder="https://code.example.com" required value="<%= form.url %>">
+  </div>
+  <div class="space-y-2">
+    <label class="label" for="mcp-token">Forgejo token</label>
+    <input id="mcp-token" class="field font-mono text-sm" name="token" type="password" placeholder="Paste access token" required value="<%= form.token %>">
+  </div>
+</div>
+<div class="mcp-helper-copy">
+  <div class="label">Transport</div>
+  <div class="theme-muted mt-2 text-sm leading-6">
+    Relay will run the Forgejo server locally and pass your URL and token as environment variables.
+  </div>
+</div>

data/app/views/fragments/mcp/_fields_github.erb

@@ -0,0 +1,12 @@
+<div class="grid gap-3">
+  <div class="space-y-2">
+    <label class="label" for="mcp-token">GitHub token</label>
+    <input id="mcp-token" class="field font-mono text-sm" name="token" type="password" placeholder="ghp_..." required value="<%= form.token %>">
+  </div>
+  <div class="mcp-helper-copy">
+    <div class="label">Transport</div>
+    <div class="theme-muted mt-2 text-sm leading-6">
+      Relay will connect to <code>https://api.githubcopilot.com/mcp/</code> and send your token as <code>Authorization: Bearer ...</code>.
+    </div>
+  </div>
+</div>

data/app/views/fragments/mcp/_list.erb

@@ -0,0 +1,55 @@
+<aside class="mcp-pane scrollbar-chat flex min-h-0 flex-col overflow-y-auto border-l pl-4">
+  <div class="mb-4 flex items-center justify-between gap-3">
+    <div>
+      <div class="text-sm font-semibold">Configured</div>
+    </div>
+    <button
+      id="mcp-new"
+      class="composer-submit px-3 py-2 text-sm"
+      type="button"
+      hx-get="/mcps/new"
+      hx-target="#chat-panel"
+      hx-swap="outerHTML"
+    >
+      New
+    </button>
+  </div>
+  <% if mcps.empty? %>
+    <div class="field theme-muted text-sm">No MCP servers yet.</div>
+  <% else %>
+    <div class="flex flex-col gap-2 pr-1">
+      <% mcps.each do |mcp| %>
+        <div class="mcp-card <%= "is-active" if selected_id == mcp.id %>">
+          <div class="flex items-start justify-between gap-3">
+            <div class="min-w-0">
+              <button
+                type="button"
+                class="mcp-card-select w-full text-left"
+                hx-get="/mcps/<%= mcp.id %>"
+                hx-target="#chat-panel"
+                hx-swap="outerHTML"
+              >
+                <div class="truncate font-medium"><%= mcp.name %></div>
+                <div class="theme-muted mt-1 line-clamp-1 text-xs leading-5"><%= mcp[:enabled] ? "Enabled" : "Disabled" %></div>
+              </button>
+            </div>
+            <div class="flex items-center gap-2">
+              <form class="shrink-0" hx-post="/mcps/<%= mcp.id %>/toggle?page=1" hx-target="#chat-panel" hx-swap="outerHTML">
+                <button
+                  type="submit"
+                  class="mcp-card-status"
+                  aria-label="<%= mcp[:enabled] ? "Disable" : "Enable" %> <%= mcp.name %>"
+                >
+                  <%= mcp[:enabled] ? "On" : "Off" %>
+                </button>
+              </form>
+              <form action="/mcps/<%= mcp.id %>/delete" method="post" hx-post="/mcps/<%= mcp.id %>/delete" hx-target="#chat-panel" hx-swap="outerHTML">
+                <button class="mcp-card-delete" type="submit" aria-label="Delete <%= mcp.name %>">X</button>
+              </form>
+            </div>
+          </div>
+        </div>
+      <% end %>
+    </div>
+  <% end %>
+</aside>

data/app/views/fragments/mcp/_workspace.erb

@@ -0,0 +1,14 @@
+<div id="chat-panel" class="workspace-chat">
+  <section id="mcp-workspace" class="chat-surface">
+    <header class="chat-meta">
+      <div class="min-w-0">
+        <div class="text-lg font-semibold tracking-tight">MCP Servers</div>
+      </div>
+      <a class="mcp-nav-link" href="/" hx-get="/chat" hx-target="#chat-panel" hx-swap="outerHTML">Close</a>
+    </header>
+    <div class="mcp-workspace-body min-h-0 flex-1">
+      <%== partial("fragments/mcp/editor", locals: {form:}) %>
+      <%== partial("fragments/mcp/list", locals: {mcps:, selected_id:}) %>
+    </div>
+  </section>
+</div>

data/app/views/fragments/models/_loading.erb

@@ -0,0 +1,4 @@
+<div id="models-control" class="flex flex-col gap-2" hx-get="/models" hx-trigger="load" hx-swap="outerHTML">
+  <span class="label">AI Model</span>
+  <div class="theme-muted py-1 text-sm font-medium">Loading...</div>
+</div>

data/app/views/fragments/settings/_chat.erb

@@ -0,0 +1 @@
+<%== partial("fragments/chat", locals: {messages:, swap_oob: false}) %>

data/app/views/fragments/settings/_input.erb

@@ -0,0 +1 @@
+<%== partial("fragments/input", locals: {swap_oob: false}) %>

data/app/views/fragments/settings/_replace_contexts.erb

@@ -0,0 +1 @@
+<%== partial("fragments/contexts", locals: {contexts:, show_label: true, swap_oob: true}) %>

data/app/views/fragments/settings/_workspace.erb

@@ -0,0 +1,4 @@
+<div id="workspace-main" class="flex min-h-0 min-w-0 flex-1 gap-4">
+  <%== partial("partials/sidebar", locals: {show_controls: true}) %>
+  <%== partial("fragments/settings/chat", locals: {messages:}) %>
+</div>