Compact interfaces and edit more things inline

core/templates/partials/ai-workspace-person-widget.html

@@ -199,9 +199,14 @@
             </li>
           </ul>
         </div>
-        <div class="is-flex is-align-items-center" style="gap: 0.35rem;">
-          <span id="ai-cache-indicator-{{ person.id }}" class="tag is-warning is-light is-small" style="display: none;">
-            Cached
+        <div class="is-flex is-align-items-center ai-capsule-controls">
+          <span class="ai-cache-indicator-slot">
+            <span
+              id="ai-cache-indicator-{{ person.id }}"
+              class="tag is-warning is-light is-small"
+              aria-hidden="true">
+              Cached
+            </span>
           </span>
           <button
             type="button"
@@ -267,12 +272,38 @@
     text-align: center;
     white-space: nowrap;
   }
+  .ai-person-widget .ai-capsule-controls {
+    gap: 0.35rem;
+    flex: 0 0 auto;
+  }
+  .ai-person-widget .ai-cache-indicator-slot {
+    width: 9.5rem;
+    display: inline-flex;
+    justify-content: flex-end;
+    align-items: center;
+  }
+  .ai-person-widget .ai-cache-indicator-slot .tag {
+    width: 100%;
+    display: inline-flex;
+    justify-content: center;
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    visibility: hidden;
+    pointer-events: none;
+  }
+  .ai-person-widget .ai-cache-indicator-slot .tag.is-visible {
+    visibility: visible;
+  }
   @media screen and (max-width: 768px) {
     .ai-person-widget .ai-top-tabs li a {
       min-height: 2.1rem;
       min-width: 2.1rem;
       padding: 0 0.45rem;
     }
+    .ai-person-widget .ai-cache-indicator-slot {
+      width: 8.4rem;
+    }
   }
 </style>
 
@@ -407,8 +438,13 @@
       }
       if (show) {
         indicator.textContent = formatCacheAge(ts);
+        indicator.classList.add("is-visible");
+        indicator.setAttribute("aria-hidden", "false");
+        return;
       }
-      indicator.style.display = show ? "inline-flex" : "none";
+      indicator.textContent = "Cached";
+      indicator.classList.remove("is-visible");
+      indicator.setAttribute("aria-hidden", "true");
     }
 
     const OPERATION_TABS = ["summarise", "draft_reply", "extract_patterns"];