Made Jarvis more mobile friendly

server/web/templates/agent_detail.html

@@ -114,57 +114,33 @@
   </div>
 </div>
 
-<!-- Edit modal (reuse agent modal markup with inline) -->
-<div class="modal-overlay hidden" id="agent-modal">
-  <div class="modal" style="max-width:560px;width:100%">
-    <h3 id="agent-modal-title">Edit Agent</h3>
-    <input type="hidden" id="a-id">
-
-    <div style="display:grid;grid-template-columns:1fr 1fr;gap:12px">
-      <div class="form-group">
-        <label>Name</label>
-        <input type="text" id="a-name" class="form-input" required>
-      </div>
-      <div class="form-group">
-        <label>Model</label>
-        <select id="a-model" class="form-input"></select>
-      </div>
+<!-- Fullscreen prompt editor -->
+<div id="prompt-editor-overlay" style="
+  display:none;position:fixed;inset:0;z-index:1001;
+  background:var(--bg);flex-direction:column;
+">
+  <!-- Header bar -->
+  <div style="
+    display:flex;align-items:center;justify-content:space-between;
+    padding:12px 20px;border-bottom:1px solid var(--border);
+    background:var(--bg2);flex-shrink:0;gap:12px
+  ">
+    <div style="display:flex;align-items:center;gap:12px;min-width:0">
+      <span style="font-size:13px;color:var(--text-dim);white-space:nowrap">Editing prompt —</span>
+      <span id="pe-agent-name" style="font-weight:600;font-size:14px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap"></span>
     </div>
-
-    <div class="form-group">
-      <label>Description</label>
-      <input type="text" id="a-desc" class="form-input">
-    </div>
-
-    <div class="form-group">
-      <label>Prompt</label>
-      <textarea id="a-prompt" class="form-input" rows="5" style="resize:vertical"></textarea>
-    </div>
-
-    <div style="display:grid;grid-template-columns:1fr 1fr;gap:12px">
-      <div class="form-group">
-        <label>Schedule</label>
-        <input type="text" id="a-schedule" class="form-input"
-               placeholder="0 8 * * *" oninput="updateAgentCronPreview(this.value)">
-        <div id="a-cron-preview" style="font-size:11px;color:var(--text-dim);margin-top:4px"></div>
-      </div>
-      <div class="form-group" style="display:flex;flex-direction:column;justify-content:center;gap:8px;padding-top:18px">
-        <label style="display:flex;align-items:center;gap:8px;cursor:pointer">
-          <input type="checkbox" id="a-subagents">
-          <span>Can create sub-agents</span>
-        </label>
-        <label style="display:flex;align-items:center;gap:8px;cursor:pointer">
-          <input type="checkbox" id="a-enabled" checked>
-          <span>Enabled</span>
-        </label>
-      </div>
-    </div>
-
-    <div class="modal-buttons">
-      <button class="btn btn-ghost" onclick="closeAgentModal()">Cancel</button>
-      <button class="btn btn-primary" onclick="saveAgentAndReload()">Save</button>
+    <div style="display:flex;align-items:center;gap:8px;flex-shrink:0">
+      <span style="font-size:11px;color:var(--text-dim)">Ctrl+S to save · Esc to cancel</span>
+      <button class="btn btn-ghost" onclick="closePromptEditor()">Cancel</button>
+      <button class="btn btn-primary" id="pe-save-btn" onclick="savePromptEditor()">Save</button>
     </div>
   </div>
+  <!-- Editor -->
+  <textarea id="pe-textarea" spellcheck="false" style="
+    flex:1;width:100%;box-sizing:border-box;resize:none;border:none;outline:none;
+    background:var(--bg);color:var(--text);font-family:var(--mono);font-size:13px;
+    line-height:1.7;padding:24px 32px;
+  "></textarea>
 </div>
 {% endblock %}