ui: clarify agent endpoint guidance

apps/ui/html/agents.html

@@ -168,6 +168,7 @@
       </div>
       <div class="empty-state-title" data-i18n="agents.empty.initial.title">No agents yet</div>
       <div class="empty-state-sub" x-text="emptyStateText()">Create your first agent to get a dedicated MCP endpoint with a curated set of tools.</div>
+      <div class="empty-state-sub" style="margin-top:8px;" x-text="tKey('agents.empty.initial.next_step')">After creation, issue separate machine-access keys for this endpoint on the API Keys page.</div>
       <button class="btn-new" @click="openCreate()" style="margin-top: 16px;">
         <svg width="13" height="13" viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="2.2" stroke-linecap="round"><path d="M8 3v10M3 8h10"/></svg>
         <span data-i18n="agents.new">New agent</span>
@@ -227,6 +228,7 @@
               <svg width="11" height="11" viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><rect x="5" y="5" width="9" height="9" rx="1"/><path d="M5 5V3a1 1 0 011-1h7a1 1 0 011 1v7a1 1 0 01-1 1h-2"/></svg>
             </button>
           </div>
+          <div class="agent-card-date" style="margin-top:8px;" x-text="endpointHelpText(agent)"></div>
 
           <!-- Footer -->
           <div class="agent-card-footer">
@@ -296,6 +298,7 @@
           <div class="form-hint" x-show="form.slug">
             <span data-i18n="agents.drawer.endpoint">MCP endpoint</span>: <code style="font-family:monospace;font-size:11px;color:var(--accent)" x-text="'/mcp/v1/' + (localStorage.getItem('crank_workspace_slug') || 'default') + '/' + form.slug"></code>
           </div>
+          <div class="form-hint" data-i18n="agents.drawer.slug_hint">Keep the slug stable after clients start using this endpoint. Changing it changes the MCP path.</div>
         </div>
 
         <div class="form-group" style="margin-bottom: 14px;">