Harmonize AgentFeed pane headers

static/daybook.css

@@ -1,4 +1,7 @@
 :root {
+  --pane-bar-height: 2.75rem;
+  --pane-bar-bg: #e8dcc8;
+  --grid-line: rgba(104, 84, 59, 0.16);
   color-scheme: light;
   font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
   background: #f4f1ea;
@@ -131,7 +134,7 @@ h1 {
 .artifact-sidebar,
 .preview-pane {
   min-width: 0;
-  padding: 0.55rem;
+  padding: 0;
 }
 
 .day-sidebar,
@@ -143,7 +146,9 @@ h1 {
 }
 
 .day-sidebar {
-  overflow-y: auto;
+  display: flex;
+  flex-direction: column;
+  overflow-y: hidden;
 }
 
 .artifact-sidebar {
@@ -153,6 +158,7 @@ h1 {
   padding: 0;
 }
 
+.day-list,
 .artifact-list {
   min-height: 0;
   overflow-x: hidden;
@@ -161,29 +167,29 @@ h1 {
   scrollbar-width: none;
 }
 
-.day-sidebar:hover,
+.day-sidebar:hover .day-list,
 .artifact-sidebar:hover .artifact-list {
   scrollbar-color: rgba(23, 49, 59, 0.35) transparent;
   scrollbar-width: thin;
 }
 
-.day-sidebar::-webkit-scrollbar,
+.day-list::-webkit-scrollbar,
 .artifact-list::-webkit-scrollbar {
   width: 0;
 }
 
-.day-sidebar:hover::-webkit-scrollbar,
+.day-sidebar:hover .day-list::-webkit-scrollbar,
 .artifact-sidebar:hover .artifact-list::-webkit-scrollbar {
   width: 6px;
 }
 
-.day-sidebar::-webkit-scrollbar-thumb,
+.day-list::-webkit-scrollbar-thumb,
 .artifact-list::-webkit-scrollbar-thumb {
   background: rgba(23, 49, 59, 0.35);
   border-radius: 999px;
 }
 
-.day-sidebar::-webkit-scrollbar-track,
+.day-list::-webkit-scrollbar-track,
 .artifact-list::-webkit-scrollbar-track {
   background: transparent;
 }
@@ -200,7 +206,7 @@ h1 {
   align-items: stretch;
   display: flex;
   flex-direction: column;
-  justify-content: center;
+  justify-content: flex-start;
   min-height: 0;
   padding: 0;
 }
@@ -237,7 +243,7 @@ h1 {
   color: #68543b;
   font-size: 0.68rem;
   letter-spacing: 0.1em;
-  margin: 0 0 0.45rem;
+  margin: 0;
   text-transform: uppercase;
 }
 
@@ -247,7 +253,10 @@ h1 {
 }
 
 .day-list {
+  align-content: start;
+  flex: 1 1 auto;
   gap: 0.35rem;
+  padding: 0.55rem;
 }
 
 .day-link,
@@ -313,12 +322,35 @@ h1 {
   font-size: 0.82rem;
 }
 
-.pane-heading {
+.pane-bar {
   align-items: baseline;
+  background: var(--pane-bar-bg);
+  box-sizing: border-box;
   display: flex;
+  flex: 0 0 var(--pane-bar-height);
+  gap: 0.55rem;
+  height: var(--pane-bar-height);
   justify-content: space-between;
   margin: 0;
-  padding: 0.55rem;
+  min-height: var(--pane-bar-height);
+  padding: 0 0.65rem;
+}
+
+.pane-heading,
+.preview-actions {
+  border-bottom: 1px solid #c7b48f;
+}
+
+.day-sidebar .pane-bar,
+.artifact-sidebar .pane-bar {
+  align-items: center;
+  justify-content: center;
+  text-align: center;
+}
+
+.artifact-sidebar .pane-heading {
+  flex-direction: column;
+  gap: 0.04rem;
 }
 
 .new-artifacts-banner {
@@ -334,7 +366,7 @@ h1 {
   margin: 0 0.55rem 0.5rem;
   padding: 0.48rem 0.7rem;
   text-align: center;
-  width: 100%;
+  width: calc(100% - 1.1rem);
 }
 
 .new-artifacts-banner[hidden] {
@@ -354,6 +386,7 @@ h1 {
   align-items: stretch;
   background: #fffaf0;
   border: 0;
+  border-bottom: 1px solid var(--grid-line);
   border-radius: 0;
   display: grid;
   gap: 0;
@@ -394,7 +427,7 @@ h1 {
 
 .kind-icon {
   align-items: center;
-  background: rgba(23, 49, 59, 0.04);
+  background: rgba(23, 49, 59, 0.035);
   color: #657173;
   display: inline-flex;
   font-size: 0.56rem;
@@ -424,6 +457,7 @@ h1 {
 
 .artifact-row-main {
   align-items: center;
+  border-right: 1px solid var(--grid-line);
   display: flex;
   min-width: 0;
   padding: 0.42rem 0.55rem;
@@ -441,6 +475,7 @@ h1 {
 .artifact-time {
   align-items: center;
   background: #efe5d3;
+  border-right: 1px solid var(--grid-line);
   display: flex;
   justify-content: flex-end;
   justify-self: stretch;
@@ -478,7 +513,15 @@ kbd {
   padding: 0.08rem 0.28rem;
 }
 
-.preview-pane > .preview-empty {
+.preview-body {
+  align-items: stretch;
+  display: flex;
+  flex: 1 1 auto;
+  flex-direction: column;
+  min-height: 0;
+}
+
+.preview-body > .preview-empty {
   align-self: center;
   margin: auto;
 }
@@ -491,16 +534,30 @@ kbd {
   min-height: 0;
 }
 
-.artifact-actions {
+.preview-actions {
   align-items: center;
-  background: #d9c9ad;
+  background: var(--pane-bar-bg);
-  border-top: 1px solid #c7b48f;
   display: flex;
   flex: 0 0 auto;
   gap: 0.75rem;
   justify-content: space-between;
-  min-height: 2.25rem;
+  justify-content: space-between;
-  padding: 0.28rem 0.55rem;
+}
+
+.preview-title {
+  color: #17313b;
+  flex: 1 1 auto;
+  font-size: 0.78rem;
+  font-weight: 700;
+  min-width: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.preview-actions .view-toggle,
+.preview-actions .artifact-action-links {
+  flex: 0 0 auto;
 }
 
 .artifact-action-links {
@@ -523,6 +580,13 @@ kbd {
   text-decoration: none;
 }
 
+.view-toggle a.disabled,
+.artifact-action-links a.disabled {
+  cursor: not-allowed;
+  opacity: 0.48;
+  pointer-events: none;
+}
+
 .artifact-action-links button:disabled {
   cursor: not-allowed;
   opacity: 0.48;
@@ -556,7 +620,7 @@ kbd {
 
   .toolbar,
   .filter,
-  .artifact-actions {
+  .preview-actions {
     align-items: stretch;
     flex-wrap: wrap;
   }

templates/artifacts/feed.html

@@ -49,7 +49,9 @@
         data-selected-kind="{{ selected_kind }}"
         data-title-query="{{ title_query }}">
     <aside class="day-sidebar" aria-label="Days">
+      <div class="pane-bar">
         <h2>Days</h2>
+      </div>
       <nav class="day-list">
         {% for day in days %}
           <a class="day-link {% if day == selected_day %}selected{% endif %}" href="?day={{ day|date:'Y-m-d' }}{% if selected_persona %}&amp;persona={{ selected_persona|urlencode }}{% endif %}{% if selected_kind %}&amp;kind={{ selected_kind|urlencode }}{% endif %}{% if title_query %}&amp;q={{ title_query|urlencode }}{% endif %}&amp;view={{ selected_view }}&amp;preview=none">
@@ -63,7 +65,7 @@
     <div class="splitter" data-splitter="days" role="separator" aria-label="Resize days sidebar" aria-orientation="vertical"></div>
 
     <aside class="artifact-sidebar" aria-label="Artifacts for selected day">
-      <div class="pane-heading">
+      <div class="pane-bar pane-heading">
         <h2>{{ selected_day|date:"M j Y" }}</h2>
         <span>{{ artifacts|length }} artifact{{ artifacts|length|pluralize }}</span>
       </div>
@@ -99,6 +101,22 @@
     <div class="splitter" data-splitter="artifacts" role="separator" aria-label="Resize artifacts sidebar" aria-orientation="vertical"></div>
 
     <section class="preview-pane">
+      <header class="pane-bar preview-actions" data-actions>
+        <div class="preview-title" data-preview-title>
+          {% if selected_artifact %}{{ selected_artifact.title }}{% else %}No artifact loaded{% endif %}
+        </div>
+        <nav class="view-toggle" aria-label="Preview mode">
+          <a class="{% if selected_view == 'rendered' %}selected{% endif %}{% if not selected_artifact %} disabled{% endif %}" href="{% if selected_artifact %}{{ rendered_url }}{% else %}#{% endif %}" data-view="rendered" {% if not selected_artifact %}aria-disabled="true"{% endif %}>Rendered</a>
+          <a class="{% if selected_view == 'raw' %}selected{% endif %}{% if not selected_artifact %} disabled{% endif %}" href="{% if selected_artifact %}{{ raw_url }}{% else %}#{% endif %}" data-view="raw" {% if not selected_artifact %}aria-disabled="true"{% endif %}>Raw</a>
+        </nav>
+        <div class="artifact-action-links">
+          <a class="{% if not selected_artifact %}disabled{% endif %}" href="{% if selected_artifact %}{% url 'artifact' selected_artifact.id %}{% else %}#{% endif %}" target="_blank" rel="noopener" {% if not selected_artifact %}aria-disabled="true"{% endif %}>Open</a>
+          <a class="{% if not selected_artifact %}disabled{% endif %}" href="{% if selected_artifact %}{% url 'artifact' selected_artifact.id %}{% else %}#{% endif %}" download {% if not selected_artifact %}aria-disabled="true"{% endif %}>Download</a>
+          <button type="button" data-copy-url="{% if selected_artifact %}{% url 'artifact' selected_artifact.id %}{% endif %}" {% if not selected_artifact %}disabled{% endif %}>Copy Link</button>
+          <button type="button" disabled>Send</button>
+        </div>
+      </header>
+      <div class="preview-body">
       {% if selected_artifact %}
         <div class="preview-frame-wrap">
           {% if selected_view == "raw" %}
@@ -115,18 +133,6 @@
             <iframe class="preview-frame" src="{% url 'artifact' selected_artifact.id %}{% if selected_view == 'raw' %}?raw=1{% endif %}" title="{{ selected_artifact.title }}"></iframe>
           {% endif %}
         </div>
-        <footer class="artifact-actions" data-actions>
-          <nav class="view-toggle" aria-label="Preview mode">
-            <a class="{% if selected_view == 'rendered' %}selected{% endif %}" href="{{ rendered_url }}" data-view="rendered">Rendered</a>
-            <a class="{% if selected_view == 'raw' %}selected{% endif %}" href="{{ raw_url }}" data-view="raw">Raw</a>
-          </nav>
-          <div class="artifact-action-links">
-            <a href="{% url 'artifact' selected_artifact.id %}" target="_blank" rel="noopener">Open</a>
-            <a href="{% url 'artifact' selected_artifact.id %}" download>Download</a>
-            <button type="button" data-copy-url="{% url 'artifact' selected_artifact.id %}">Copy Link</button>
-            <button type="button" disabled>Send</button>
-          </div>
-        </footer>
       {% else %}
         <div class="empty preview-empty">
           {% if artifacts %}
@@ -138,6 +144,7 @@
           {% endif %}
         </div>
       {% endif %}
+      </div>
     </section>
   </main>
 
@@ -187,6 +194,7 @@
       });
 
       const previewPane = document.querySelector(".preview-pane");
+      const previewBody = document.querySelector(".preview-body");
       const rows = Array.from(document.querySelectorAll(".artifact-row"));
       const dayLinks = Array.from(document.querySelectorAll(".day-link"));
       const initialArtifactIds = new Set(rows.map((row) => row.dataset.artifactId));
@@ -235,16 +243,47 @@
       const updateActions = (row) => {
         const actions = document.querySelector("[data-actions]");
         if (!actions) return;
+        const previewTitle = actions.querySelector("[data-preview-title]");
+        if (previewTitle) previewTitle.textContent = row.dataset.title;
         actions.querySelectorAll("[data-view]").forEach((link) => {
           const view = link.dataset.view;
           link.classList.toggle("selected", view === selectedView);
+          link.classList.remove("disabled");
+          link.removeAttribute("aria-disabled");
           link.href = pageUrlFor(row, view).toString();
         });
         actions.querySelectorAll(".artifact-action-links a").forEach((link) => {
+          link.classList.remove("disabled");
+          link.removeAttribute("aria-disabled");
           link.href = row.dataset.renderedUrl;
         });
         const copyButton = actions.querySelector("[data-copy-url]");
-        if (copyButton) copyButton.dataset.copyUrl = row.dataset.renderedUrl;
+        if (copyButton) {
+          copyButton.disabled = false;
+          copyButton.dataset.copyUrl = row.dataset.renderedUrl;
+        }
+      };
+
+      const disableActions = () => {
+        const actions = document.querySelector("[data-actions]");
+        if (!actions) return;
+        const previewTitle = actions.querySelector("[data-preview-title]");
+        if (previewTitle) previewTitle.textContent = "No artifact loaded";
+        actions.querySelectorAll("[data-view]").forEach((link) => {
+          link.classList.add("disabled");
+          link.setAttribute("aria-disabled", "true");
+          link.href = "#";
+        });
+        actions.querySelectorAll(".artifact-action-links a").forEach((link) => {
+          link.classList.add("disabled");
+          link.setAttribute("aria-disabled", "true");
+          link.href = "#";
+        });
+        const copyButton = actions.querySelector("[data-copy-url]");
+        if (copyButton) {
+          copyButton.disabled = true;
+          copyButton.dataset.copyUrl = "";
+        }
       };
 
       const renderPreview = (row, pushState = true) => {
@@ -261,12 +300,7 @@
               ? `<div class="empty preview-empty"><h2>Binary Artifact</h2><p>This artifact type cannot be previewed inline yet.</p><p><a href="${source}">Open or download it</a>.</p></div>`
               : `<iframe class="preview-frame" src="${source}" title="${title}"></iframe>`;
 
-        let frameWrap = previewPane.querySelector(".preview-frame-wrap");
+        previewBody.innerHTML = `<div class="preview-frame-wrap">${content}</div>`;
-        if (!frameWrap) {
-          previewPane.innerHTML = `<div class="preview-frame-wrap"></div><footer class="artifact-actions" data-actions><nav class="view-toggle" aria-label="Preview mode"><a data-view="rendered">Rendered</a><a data-view="raw">Raw</a></nav><div class="artifact-action-links"><a target="_blank" rel="noopener">Open</a><a download>Download</a><button type="button" data-copy-url="">Copy Link</button><button type="button" disabled>Send</button></div></footer>`;
-          frameWrap = previewPane.querySelector(".preview-frame-wrap");
-        }
-        frameWrap.innerHTML = content;
         updateActions(row);
         if (pushState) window.history.pushState({}, "", pageUrlFor(row, selectedView));
       };
@@ -277,7 +311,8 @@
           document.activeElement.blur();
         }
         rows.forEach((candidate) => candidate.classList.remove("selected"));
-        previewPane.innerHTML = `<div class="empty preview-empty"><h2>No artifact loaded</h2><p>Press <kbd>Right Arrow</kbd> or select an artifact from the middle column to preview it.</p></div>`;
+        disableActions();
+        previewBody.innerHTML = `<div class="empty preview-empty"><h2>No artifact loaded</h2><p>Press <kbd>Right Arrow</kbd> or select an artifact from the middle column to preview it.</p></div>`;
         window.history.pushState({}, "", noPreviewUrl());
         const currentDay = document.querySelector(".day-link.selected");
         if (currentDay) currentDay.focus({preventScroll: true});
@@ -413,6 +448,10 @@
 
         const toggle = event.target.closest("[data-view]");
         if (!toggle) return;
+        if (toggle.classList.contains("disabled")) {
+          event.preventDefault();
+          return;
+        }
         const row = selectedRow();
         if (!row) return;
         event.preventDefault();