From 85d48eb69979775e5978d5778b564d14fc4685d7 Mon Sep 17 00:00:00 2001
From: Dotta <bippadotta@protonmail.com>
Date: Wed, 22 Jul 2026 13:50:23 +0000
Subject: [PATCH] Align configuration navigation across breakpoints

Co-Authored-By: Paperclip <noreply@paperclip.ing>
---
 ui/src/components/agent-configuration-shell.test.ts |  1 +
 ui/src/components/agent-configuration-shell.tsx     | 11 ++++++++++-
 ui/src/pages/AgentDetail.tsx                        |  4 ++--
 3 files changed, 13 insertions(+), 3 deletions(-)

diff --git a/ui/src/components/agent-configuration-shell.test.ts b/ui/src/components/agent-configuration-shell.test.ts
index 3e056b18f19..c1f061c756b 100644
--- a/ui/src/components/agent-configuration-shell.test.ts
+++ b/ui/src/components/agent-configuration-shell.test.ts
@@ -8,6 +8,7 @@ import {
 
 describe("agent configuration shell", () => {
   it("matches both section names and field labels", () => {
+    expect([...filterAgentConfigurationSections("")].slice(0, 2)).toEqual(["environment", "runtime"]);
     expect([...filterAgentConfigurationSections("heartbeat")]).toEqual(["schedule"]);
     expect([...filterAgentConfigurationSections("API Keys")]).toEqual(["keys"]);
     expect([...filterAgentConfigurationSections("sandbox")]).toEqual(["danger"]);
diff --git a/ui/src/components/agent-configuration-shell.tsx b/ui/src/components/agent-configuration-shell.tsx
index 45eed5f08b6..4ef25d41cd3 100644
--- a/ui/src/components/agent-configuration-shell.tsx
+++ b/ui/src/components/agent-configuration-shell.tsx
@@ -20,8 +20,8 @@ export const agentConfigurationSections: ReadonlyArray<{
   instant?: boolean;
   fields: string[];
 }> = [
-  { id: "runtime", label: "Runtime", fields: ["adapter", "model", "effort", "turns", "command", "arguments", "engine", "timeout", "chrome"] },
   { id: "environment", label: "Environment", fields: ["execution environment", "environment override", "variables", "secrets"] },
+  { id: "runtime", label: "Runtime", fields: ["adapter", "model", "effort", "turns", "command", "arguments", "engine", "timeout", "chrome"] },
   { id: "schedule", label: "Schedule & Runs", fields: ["heartbeat", "wake on demand", "cooldown", "concurrent runs", "continuation"] },
   { id: "access", label: "Access & Governance", instant: true, fields: ["trust preset", "boundary", "create agents", "create skills", "assign tasks"] },
   { id: "keys", label: "API Keys", instant: true, fields: ["credentials", "create key", "revoke key"] },
@@ -84,6 +84,15 @@ export function AgentConfigurationRail({
   return (
     <>
       <div className="sticky top-0 z-20 bg-background py-2 md:hidden">
+        <label className="mb-2 flex items-center gap-2 rounded-md border border-border px-2.5 py-2">
+          <Search className="h-3.5 w-3.5 text-muted-foreground" />
+          <input
+            value={query}
+            onChange={(event) => onQueryChange(event.target.value)}
+            placeholder="Find a setting"
+            className="min-w-0 flex-1 bg-transparent text-sm outline-none placeholder:text-muted-foreground"
+          />
+        </label>
         <select
           className="w-full rounded-md border border-border bg-background px-3 py-2 text-sm"
           aria-label="Configuration section"
diff --git a/ui/src/pages/AgentDetail.tsx b/ui/src/pages/AgentDetail.tsx
index 42a44e51002..ecee10502c0 100644
--- a/ui/src/pages/AgentDetail.tsx
+++ b/ui/src/pages/AgentDetail.tsx
@@ -1779,11 +1779,11 @@ function AgentConfigurePage({
   });
 
   const effectiveChips: Array<{ label: string; value: string; section: AgentConfigurationSectionId; inherited?: boolean }> = [
+    { label: "Environment", value: effectiveConfig.environment, section: "environment", inherited: effectiveConfig.environmentInherited },
+    { label: "Variables", value: String(effectiveConfig.environmentVariableCount), section: "environment" },
     { label: "Adapter", value: effectiveConfig.adapter, section: "runtime" },
     { label: "Model", value: effectiveConfig.model, section: "runtime", inherited: effectiveConfig.modelInherited },
     { label: "Cost saver", value: effectiveConfig.cheapModel, section: "runtime", inherited: effectiveConfig.cheapInherited },
-    { label: "Environment", value: effectiveConfig.environment, section: "environment", inherited: effectiveConfig.environmentInherited },
-    { label: "Variables", value: String(effectiveConfig.environmentVariableCount), section: "environment" },
     { label: "Heartbeat", value: effectiveConfig.cadence, section: "schedule" },
     { label: "Trust", value: effectiveConfig.trust, section: "access" },
     { label: "API keys", value: String(effectiveConfig.apiKeyCount), section: "keys" },