agentacta 1.3.4 → 1.5.0

package/public/index.html

@@ -21,7 +21,13 @@
     <nav class="sidebar">
       <div class="sidebar-header">
         <h1>Agent<span>Acta</span></h1>
+        <button class="theme-toggle" id="theme-toggle" title="Toggle theme" aria-label="Toggle theme"><svg class="theme-icon-sun" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="5"/><path d="M12 1v2M12 21v2M4.22 4.22l1.42 1.42M18.36 18.36l1.42 1.42M1 12h2M21 12h2M4.22 19.78l1.42-1.42M18.36 5.64l1.42-1.42"/></svg><svg class="theme-icon-moon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M21 12.79A9 9 0 1 1 11.21 3 7 7 0 0 0 21 12.79z"/></svg></button>
       </div>
+      <button class="cmdk-trigger" id="cmdkBtn" aria-label="Search" title="Search (⌘K)">
+        <svg width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="11" cy="11" r="8"/><path d="m21 21-4.35-4.35"/></svg>
+        <span>Search</span>
+        <kbd>⌘K</kbd>
+      </button>
       <div class="nav-section">
         <div class="nav-item" data-view="sessions">
           <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z"/></svg>
@@ -31,21 +37,27 @@
           <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="10"/><polyline points="12 6 12 12 16 14"/></svg>
           <span>Timeline</span>
         </div>
-        <div class="nav-item active" data-view="search">
-          <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><circle cx="11" cy="11" r="8"/><path d="m21 21-4.35-4.35"/></svg>
-          <span>Search</span>
+        <div class="nav-item active" data-view="overview">
+          <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M3 12h7V3H3z"/><path d="M14 21h7v-7h-7z"/><path d="M14 10h7V3h-7z"/><path d="M3 21h7v-5H3z"/></svg>
+          <span>Overview</span>
         </div>
         <div class="nav-item" data-view="files">
           <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"/><polyline points="14 2 14 8 20 8"/></svg>
           <span>Files</span>
         </div>
         <div class="nav-item" data-view="stats">
-          <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M18 20V10M12 20V4M6 20v-6"/></svg>
-          <span>Stats</span>
+          <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M10.325 4.317a1.724 1.724 0 0 1 3.35 0 1.724 1.724 0 0 0 2.573 1.066 1.724 1.724 0 0 1 2.28 2.28 1.724 1.724 0 0 0 1.065 2.573 1.724 1.724 0 0 1 0 3.35 1.724 1.724 0 0 0-1.066 2.573 1.724 1.724 0 0 1-2.28 2.28 1.724 1.724 0 0 0-2.573 1.065 1.724 1.724 0 0 1-3.35 0 1.724 1.724 0 0 0-2.573-1.066 1.724 1.724 0 0 1-2.28-2.28 1.724 1.724 0 0 0-1.065-2.573 1.724 1.724 0 0 1 0-3.35 1.724 1.724 0 0 0 1.066-2.573 1.724 1.724 0 0 1 2.28-2.28 1.724 1.724 0 0 0 2.572-1.065z"/><circle cx="12" cy="12" r="3"/></svg>
+          <span>Settings</span>
         </div>
+
       </div>
     </nav>
     <main class="main" id="content"></main>
+    <div class="mobile-toolbar">
+      <button class="mobile-search-btn" id="mobile-search-btn" title="Search" aria-label="Search"><svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="11" cy="11" r="8"/><path d="m21 21-4.35-4.35"/></svg></button>
+      <button class="theme-toggle-mobile" id="theme-toggle-mobile" title="Toggle theme" aria-label="Toggle theme"><svg class="theme-icon-sun" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="5"/><path d="M12 1v2M12 21v2M4.22 4.22l1.42 1.42M18.36 18.36l1.42 1.42M1 12h2M21 12h2M4.22 19.78l1.42-1.42M18.36 5.64l1.42-1.42"/></svg><svg class="theme-icon-moon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M21 12.79A9 9 0 1 1 11.21 3 7 7 0 0 0 21 12.79z"/></svg></button>
+    </div>
+
   </div>
   <script src="/app.js"></script>
   <script>

package/public/style.css

@@ -71,6 +71,69 @@
 
   /* Layout */
   --sidebar-width: 240px;
+  --input-scheme: dark;
+}
+
+[data-theme="light"] {
+  --bg-base: #f5f7fb;
+  --bg-surface: #ffffff;
+  --bg-elevated: #f8fafc;
+  --bg-hover: #eef2f7;
+  --bg-active: #e8edf6;
+
+  --border-subtle: rgba(15, 23, 42, 0.06);
+  --border-default: rgba(15, 23, 42, 0.1);
+  --border-hover: rgba(15, 23, 42, 0.16);
+  --border-focus: rgba(36, 89, 214, 0.45);
+
+  --text-primary: #111827;
+  --text-secondary: #5b6678;
+  --text-tertiary: #8793a7;
+  --text-inverse: #ffffff;
+
+  --accent: #2459d6;
+  --accent-soft: rgba(36, 89, 214, 0.12);
+  --accent-medium: rgba(36, 89, 214, 0.2);
+
+  --green: #158f69;
+  --green-soft: rgba(21, 143, 105, 0.12);
+
+  --purple: #7d62eb;
+  --purple-soft: rgba(125, 98, 235, 0.12);
+
+  --amber: #b7791f;
+  --amber-soft: rgba(183, 121, 31, 0.12);
+
+  --red: #c24141;
+  --red-soft: rgba(194, 65, 65, 0.12);
+
+  --teal: #0f9f9a;
+  --teal-soft: rgba(15, 159, 154, 0.12);
+
+  --shadow: 0 8px 24px rgba(15, 23, 42, 0.06);
+  --input-scheme: light;
+}
+
+[data-theme="oled"] {
+  --bg-base: #000000;
+  --bg-surface: #050505;
+  --bg-elevated: #0a0a0a;
+  --bg-hover: #111111;
+  --bg-active: #151515;
+
+  --border-subtle: rgba(255, 255, 255, 0.08);
+  --border-default: rgba(255, 255, 255, 0.12);
+  --border-hover: rgba(255, 255, 255, 0.18);
+  --border-focus: rgba(99, 144, 240, 0.58);
+
+  --text-primary: #f2f5f9;
+  --text-secondary: #9aa3b2;
+  --text-tertiary: #6f7785;
+  --text-inverse: #000000;
+
+  --accent-soft: rgba(99, 144, 240, 0.14);
+  --accent-medium: rgba(99, 144, 240, 0.22);
+  --input-scheme: dark;
 }
 
 /* ---- Reset ---- */
@@ -101,6 +164,12 @@ body {
   font-feature-settings: 'cv02', 'cv03', 'cv04', 'cv11';
 }
 
+html.cmdk-open,
+body.cmdk-open {
+  overflow: hidden;
+  overscroll-behavior: none;
+}
+
 /* ---- Layout ---- */
 .app {
   display: flex;
@@ -125,6 +194,10 @@ body {
 
 .sidebar-header {
   padding: var(--space-xl) var(--space-xl) var(--space-lg);
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: var(--space-sm);
 }
 
 .sidebar h1 {
@@ -141,6 +214,71 @@ body {
   background-clip: text;
 }
 
+.theme-toggle {
+  width: 30px;
+  height: 30px;
+  border-radius: var(--radius-md);
+  border: 1px solid var(--border-default);
+  background: var(--bg-elevated);
+  color: var(--text-secondary);
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  cursor: pointer;
+  padding: 0;
+}
+
+.theme-toggle:hover {
+  background: var(--bg-hover);
+  color: var(--text-primary);
+}
+
+.theme-toggle svg,
+.theme-toggle-mobile svg {
+  width: 16px;
+  height: 16px;
+}
+
+.theme-icon-moon { display: none; }
+[data-theme="light"] .theme-icon-sun { display: none; }
+[data-theme="light"] .theme-icon-moon { display: block; }
+
+.mobile-toolbar {
+  display: none;
+  position: absolute;
+  top: calc(var(--space-xl) + env(safe-area-inset-top, 0px));
+  right: var(--space-lg);
+  z-index: 10;
+  gap: 8px;
+  align-items: center;
+}
+
+.mobile-search-btn,
+.theme-toggle-mobile {
+  width: 32px;
+  height: 32px;
+  border-radius: var(--radius-md);
+  border: 1px solid var(--border-default);
+  background: var(--bg-surface);
+  color: var(--text-secondary);
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  cursor: pointer;
+  padding: 0;
+}
+
+.mobile-search-btn:hover,
+.theme-toggle-mobile:hover {
+  background: var(--bg-hover);
+  color: var(--text-primary);
+}
+
+.theme-toggle-mobile svg {
+  width: 16px;
+  height: 16px;
+}
+
 .nav-section {
   display: flex;
   flex-direction: column;
@@ -203,7 +341,7 @@ body {
   flex: 1;
   margin-left: var(--sidebar-width);
   padding: var(--space-2xl) var(--space-3xl);
-  max-width: 1000px;
+  max-width: none;
   min-height: 100vh;
 }
 
@@ -226,6 +364,44 @@ body {
   margin-top: var(--space-2xl);
 }
 
+.overview-subtitle {
+  margin-top: calc(var(--space-xl) * -1 + 6px);
+  margin-bottom: var(--space-xl);
+  color: var(--text-secondary);
+  font-size: 13px;
+}
+
+.overview-meta-grid {
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
+  gap: var(--space-md);
+  margin-bottom: var(--space-sm);
+}
+
+.settings-page .section-label {
+  margin-top: var(--space-xl);
+}
+
+.settings-maintenance {
+  display: flex;
+  gap: 12px;
+  align-items: center;
+  flex-wrap: wrap;
+  margin-bottom: 6px;
+}
+
+.settings-maintenance-status {
+  color: var(--text-tertiary);
+  font-size: 12px;
+}
+
+.settings-help {
+  color: var(--text-tertiary);
+  font-size: 12px;
+  line-height: 1.5;
+  margin: 0 0 var(--space-lg);
+}
+
 /* ---- Search Bar ---- */
 .search-bar {
   position: relative;
@@ -655,6 +831,40 @@ mark {
   font-weight: 500;
 }
 
+/* ---- Skeletons ---- */
+.skeleton-card,
+.skeleton-row {
+  border-color: var(--border-subtle);
+}
+
+.skeleton-line {
+  position: relative;
+  border-radius: var(--radius-sm);
+  background: var(--bg-elevated);
+  border: 1px solid var(--border-subtle);
+  overflow: hidden;
+}
+
+.skeleton-line::after {
+  content: '';
+  position: absolute;
+  inset: 0;
+  transform: translateX(-100%);
+  background: linear-gradient(90deg, transparent, var(--bg-hover), transparent);
+  animation: skeletonShimmer 1.4s ease-in-out infinite;
+}
+
+@keyframes skeletonShimmer {
+  100% { transform: translateX(100%); }
+}
+
+.loading-more {
+  text-align: center;
+  color: var(--text-tertiary);
+  font-size: 12px;
+  padding: var(--space-md) 0;
+}
+
 @keyframes pulse {
   0%, 100% { opacity: 0.4; }
   50% { opacity: 1; }
@@ -683,7 +893,7 @@ mark {
   outline: none;
   margin-bottom: var(--space-lg);
   transition: all var(--duration-normal) var(--ease-out);
-  color-scheme: dark;
+  color-scheme: var(--input-scheme);
 }
 
 .date-input:hover {
@@ -749,6 +959,28 @@ mark {
   border-color: rgba(52, 211, 153, 0.3);
 }
 
+.jump-to-start-btn.jumping {
+  position: relative;
+  color: #b8f7dd;
+  background: rgba(52, 211, 153, 0.22);
+}
+
+.jump-to-start-btn.jumping::after {
+  content: '';
+  width: 6px;
+  height: 6px;
+  border-radius: 999px;
+  background: currentColor;
+  margin-left: 6px;
+  display: inline-block;
+  animation: jumpPulse 1s ease-in-out infinite;
+}
+
+@keyframes jumpPulse {
+  0%, 100% { opacity: 0.35; transform: scale(0.9); }
+  50% { opacity: 1; transform: scale(1.2); }
+}
+
 /* ---- Session ID ---- */
 .session-id-row {
   display: flex;
@@ -1067,6 +1299,22 @@ mark {
   font-family: var(--font-mono);
 }
 
+.settings-select {
+  width: 100%;
+  background: var(--bg-elevated);
+  border: 1px solid var(--border-default);
+  border-radius: var(--radius-md);
+  color: var(--text-primary);
+  padding: 8px 10px;
+  font-size: 13px;
+  font-family: var(--font-sans);
+  outline: none;
+}
+
+.settings-select:focus {
+  border-color: var(--border-focus);
+}
+
 /* ---- Highlight animation for jumped-to events ---- */
 @keyframes highlightFade {
   0% { background: var(--accent-medium); }
@@ -1097,7 +1345,60 @@ mark {
 
 .new-events-indicator:hover {
   background: #4a7ae8;
-  transform: translateX(-50%) scale(1.05);
+}
+
+.jump-indicator {
+  position: fixed;
+  top: 20px;
+  left: 50%;
+  transform: translateX(-50%) translateY(-10px);
+  background: color-mix(in oklab, var(--accent) 88%, #000);
+  color: #fff;
+  padding: 8px 14px;
+  border-radius: 999px;
+  font-size: 12px;
+  font-weight: 600;
+  z-index: 110;
+  opacity: 0;
+  pointer-events: none;
+  transition: opacity 0.2s var(--ease-out), transform 0.2s var(--ease-out);
+}
+
+.jump-indicator.show {
+  opacity: 1;
+  transform: translateX(-50%) translateY(0);
+}
+
+.return-jump-btn {
+  position: fixed;
+  right: 16px;
+  bottom: calc(92px + env(safe-area-inset-bottom, 0px));
+  border: 1px solid var(--border-default);
+  background: var(--bg-surface);
+  color: var(--text-primary);
+  width: 34px;
+  height: 34px;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  padding: 0;
+  border-radius: 999px;
+  z-index: 110;
+  opacity: 0;
+  transform: translateY(8px);
+  pointer-events: none;
+  transition: opacity 0.2s var(--ease-out), transform 0.2s var(--ease-out);
+}
+
+.return-jump-btn.show {
+  opacity: 1;
+  transform: translateY(0);
+  pointer-events: auto;
+}
+
+.return-jump-btn:hover {
+  background: var(--bg-hover);
+  border-color: var(--border-hover);
 }
 
 @keyframes slideDown {
@@ -1230,6 +1531,10 @@ mark {
 
   .sidebar-header { display: none; }
 
+  .mobile-toolbar {
+    display: flex;
+  }
+
   .nav-section {
     display: flex;
     flex-direction: row;
@@ -1282,6 +1587,24 @@ mark {
 
   .stat-card .value { font-size: 22px; }
 
+  .overview-subtitle {
+    font-size: 12px;
+    margin-bottom: var(--space-lg);
+  }
+
+  .overview-meta-grid {
+    grid-template-columns: 1fr;
+    gap: var(--space-sm);
+  }
+
+  .settings-page .section-label {
+    margin-top: var(--space-lg);
+  }
+
+  .settings-help {
+    margin-bottom: var(--space-md);
+  }
+
   .search-stats {
     grid-template-columns: repeat(2, 1fr);
   }
@@ -1395,3 +1718,196 @@ mark {
   background: var(--bg-active);
   border-color: var(--border-hover);
 }
+
+/* ---- Cmd+K Trigger ---- */
+.cmdk-trigger {
+  margin: 0 var(--space-md) var(--space-sm);
+  display: flex;
+  align-items: center;
+  gap: var(--space-sm);
+  border: 1px solid var(--border-subtle);
+  background: var(--bg-elevated);
+  color: var(--text-secondary);
+  border-radius: var(--radius-md);
+  font-size: 12px;
+  padding: 8px 10px;
+  cursor: pointer;
+  transition: all var(--duration-normal) var(--ease-out);
+  font-family: var(--font-sans);
+}
+.cmdk-trigger:hover { color: var(--text-primary); border-color: var(--border-hover); background: var(--bg-hover); }
+.cmdk-trigger svg { flex-shrink: 0; opacity: 0.5; }
+.cmdk-trigger span { flex: 1; text-align: left; }
+.cmdk-trigger kbd {
+  border: 1px solid var(--border-default);
+  border-bottom-width: 2px;
+  border-radius: 5px;
+  padding: 1px 5px;
+  font-size: 10px;
+  font-family: var(--font-sans);
+  color: var(--text-tertiary);
+  background: var(--bg-base);
+}
+
+/* ---- Cmd+K Overlay ---- */
+.cmdk-overlay {
+  position: fixed;
+  top: 0;
+  right: 0;
+  bottom: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  min-height: 100%;
+  background: rgba(10, 14, 26, 0.28);
+  backdrop-filter: blur(14px) saturate(1.08);
+  -webkit-backdrop-filter: blur(14px) saturate(1.08);
+  z-index: 999;
+  display: flex;
+  justify-content: center;
+  align-items: flex-start;
+  padding-top: 12vh;
+  overflow: hidden;
+  animation: cmdk-fade-in 0.16s var(--ease-out);
+}
+@keyframes cmdk-fade-in { from { opacity: 0; } }
+
+.cmdk-dialog {
+  width: min(580px, calc(100vw - 40px));
+  max-height: calc(100vh - 16vh - 24px);
+  background: color-mix(in oklab, var(--bg-surface) 96%, transparent);
+  border: 1px solid color-mix(in oklab, var(--border-default) 86%, transparent);
+  border-radius: 14px;
+  box-shadow: 0 20px 52px rgba(0, 0, 0, 0.22);
+  overflow: hidden;
+  display: flex;
+  flex-direction: column;
+  animation: cmdk-slide-in 0.16s var(--ease-out);
+}
+@keyframes cmdk-slide-in { from { opacity: 0; transform: translateY(-8px) scale(0.98); } }
+
+.cmdk-input-wrap {
+  display: flex;
+  align-items: center;
+  gap: var(--space-sm);
+  padding: 12px 13px;
+  border-bottom: 1px solid var(--border-subtle);
+  background: color-mix(in oklab, var(--bg-elevated) 50%, transparent);
+}
+.cmdk-input-wrap svg { flex-shrink: 0; color: var(--text-tertiary); }
+.cmdk-input-wrap input {
+  flex: 1;
+  min-width: 0;
+  background: transparent;
+  border: 0;
+  outline: none;
+  color: var(--text-primary);
+  font-size: 16px;
+  font-family: var(--font-sans);
+}
+.cmdk-input-wrap input::placeholder { color: var(--text-tertiary); }
+.cmdk-input-wrap kbd {
+  border: 1px solid var(--border-default);
+  border-bottom-width: 2px;
+  border-radius: 5px;
+  padding: 1px 5px;
+  font-size: 10px;
+  font-family: var(--font-sans);
+  color: var(--text-tertiary);
+}
+
+.cmdk-list {
+  flex: 1;
+  min-height: 0;
+  overflow-y: auto;
+  padding: 6px;
+  -webkit-overflow-scrolling: touch;
+}
+.cmdk-group-label {
+  font-size: 10px;
+  letter-spacing: 0.8px;
+  text-transform: uppercase;
+  color: var(--text-tertiary);
+  font-weight: 600;
+  padding: 8px 9px 3px;
+}
+.cmdk-item {
+  width: 100%;
+  text-align: left;
+  border: none;
+  background: transparent;
+  color: inherit;
+  border-radius: 10px;
+  padding: 7px 9px;
+  cursor: pointer;
+  display: flex;
+  align-items: center;
+  gap: var(--space-md);
+  font-family: var(--font-sans);
+  transition: background var(--duration-fast);
+  touch-action: manipulation;
+}
+.cmdk-item.active { background: color-mix(in oklab, var(--accent-soft) 56%, var(--bg-hover)); }
+.cmdk-item:hover { background: color-mix(in oklab, var(--accent-soft) 36%, var(--bg-hover)); }
+.cmdk-item-icon {
+  width: 18px;
+  height: 18px;
+  flex-shrink: 0;
+  color: var(--text-tertiary);
+}
+.cmdk-item-body { flex: 1; min-width: 0; }
+.cmdk-item-title {
+  font-size: 13px;
+  color: var(--text-primary);
+  font-weight: 500;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+.cmdk-item-sub {
+  font-size: 11px;
+  color: var(--text-tertiary);
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  margin-top: 1px;
+}
+.cmdk-item-meta {
+  font-size: 11px;
+  color: var(--text-tertiary);
+  flex-shrink: 0;
+  white-space: nowrap;
+}
+.cmdk-empty {
+  padding: 28px 14px;
+  text-align: center;
+  color: var(--text-tertiary);
+  font-size: 13px;
+}
+.cmdk-empty h4 { color: var(--text-secondary); font-size: 14px; margin-bottom: 4px; }
+.cmdk-loading { padding: 24px 14px; text-align: center; color: var(--text-tertiary); font-size: 13px; }
+
+@media (max-width: 768px) {
+  .cmdk-trigger { display: none; }
+
+  .cmdk-overlay {
+    align-items: center;
+    top: 0;
+    right: 0;
+    bottom: 0;
+    left: 0;
+    height: auto;
+    min-height: 0;
+    padding: calc(env(safe-area-inset-top, 0px) + 12px) 12px calc(env(safe-area-inset-bottom, 0px) + 12px);
+  }
+
+  .cmdk-dialog {
+    width: min(520px, calc(100vw - 44px));
+    max-height: min(72vh, calc(100vh - env(safe-area-inset-top, 0px) - env(safe-area-inset-bottom, 0px) - 52px));
+    border-radius: var(--radius-md);
+  }
+
+  .cmdk-input-wrap kbd { display: none; }
+  .cmdk-item-sub { display: none; }
+  .cmdk-item-meta { font-size: 10px; }
+}