@chrysb/alphaclaw 0.6.1 → 0.6.2-beta.0

package/lib/public/css/agents.css

@@ -74,7 +74,7 @@
 
 .agents-detail-content {
   flex: 1;
-  padding: 24px 0;
+  padding: 16px 0;
 }
 
 /* ── Empty state ─────────────────────────────── */

package/lib/public/css/cron.css

@@ -0,0 +1,535 @@
+.app-content-pane.cron-pane {
+  padding: 0;
+}
+
+.cron-tab-shell {
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+  min-height: 0;
+}
+
+.cron-tab-header {
+  padding: 16px 20px 12px;
+  border-bottom: 1px solid var(--border);
+}
+
+.cron-tab-main {
+  flex: 1;
+  min-height: 0;
+  display: flex;
+}
+
+.cron-list-panel {
+  min-width: 220px;
+  max-width: 480px;
+  border-right: 1px solid var(--border);
+  background: var(--bg-sidebar);
+  overflow-y: auto;
+}
+
+.cron-list-panel-inner {
+  padding: 0 10px 10px;
+}
+
+.cron-list-sticky-search {
+  position: sticky;
+  top: 0;
+  z-index: 2;
+  padding: 10px 0 8px;
+  background: var(--bg-sidebar);
+}
+
+.cron-list-search-input {
+  width: 100%;
+  height: 30px;
+  border-radius: 8px;
+  border: 1px solid var(--border);
+  background: rgba(255, 255, 255, 0.02);
+  color: var(--text);
+  font-size: 12px;
+  padding: 0 9px;
+  outline: none;
+  font-family: inherit;
+}
+
+.cron-list-search-input::placeholder {
+  color: var(--text-dim);
+}
+
+.cron-list-search-input:focus {
+  border-color: rgba(99, 235, 255, 0.45);
+  box-shadow: 0 0 0 1px rgba(99, 235, 255, 0.18);
+}
+
+.cron-list-separator {
+  border-top: 1px solid var(--border);
+  margin: 8px 2px;
+}
+
+.cron-list-items {
+  display: flex;
+  flex-direction: column;
+  gap: 6px;
+}
+
+.cron-list-group {
+  display: flex;
+  flex-direction: column;
+  gap: 6px;
+}
+
+.cron-list-group + .cron-list-group {
+  margin-top: 2px;
+}
+
+.cron-list-group-header {
+  position: sticky;
+  top: 48px;
+  z-index: 1;
+  font-size: 10px;
+  letter-spacing: 0.08em;
+  text-transform: uppercase;
+  color: var(--text-dim);
+  background: var(--bg-sidebar);
+  padding: 4px 2px;
+}
+
+.cron-list-group-items {
+  display: flex;
+  flex-direction: column;
+  gap: 6px;
+}
+
+.cron-list-item {
+  width: 100%;
+  border: 1px solid var(--border);
+  border-radius: 10px;
+  background: rgba(255, 255, 255, 0.015);
+  color: var(--text-muted);
+  text-align: left;
+  font: inherit;
+  padding: 8px 10px;
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
+}
+
+.cron-list-item:hover {
+  border-color: rgba(148, 163, 184, 0.45);
+  color: var(--text);
+}
+
+.cron-list-item.is-selected {
+  border-color: rgba(99, 235, 255, 0.55);
+  background: rgba(99, 235, 255, 0.08);
+  color: var(--text);
+}
+
+.cron-list-all {
+  margin-bottom: 8px;
+}
+
+.cron-list-item-row {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 8px;
+}
+
+.cron-list-status-inline {
+  display: inline-flex;
+  align-items: center;
+  gap: 6px;
+  flex: 0 0 auto;
+}
+
+.cron-list-last-run {
+  font-size: 11px;
+  color: var(--text-muted);
+  line-height: 1;
+}
+
+.cron-list-item-title {
+  font-size: 12px;
+  font-weight: 700;
+  color: var(--text);
+}
+
+.cron-list-item-subtitle {
+  font-size: 11px;
+  color: var(--text-muted);
+}
+
+.cron-list-health-dot {
+  width: 8px;
+  height: 8px;
+  border-radius: 999px;
+  flex: 0 0 auto;
+}
+
+.cron-list-resizer {
+  cursor: col-resize;
+  position: relative;
+  width: 6px;
+  margin-left: -3px;
+  z-index: 4;
+}
+
+.cron-list-resizer::after {
+  content: "";
+  position: absolute;
+  left: 2px;
+  top: 0;
+  bottom: 0;
+  width: 2px;
+  background: transparent;
+  transition: background 0.12s;
+}
+
+.cron-list-resizer:hover::after,
+.cron-list-resizer.is-resizing::after {
+  background: rgba(99, 235, 255, 0.55);
+}
+
+.cron-detail-panel {
+  flex: 1;
+  min-width: 0;
+  min-height: 0;
+  overflow: hidden;
+}
+
+.cron-detail-scroll {
+  height: 100%;
+  overflow-y: auto;
+}
+
+.cron-detail-content {
+  padding: 16px 20px 24px;
+  display: flex;
+  flex-direction: column;
+  gap: 12px;
+  min-height: 100%;
+}
+
+.cron-prompt-editor-shell {
+  height: 280px;
+  min-height: 180px;
+  border: 1px solid var(--border);
+  border-radius: 10px;
+  overflow: hidden;
+  resize: vertical;
+  background: rgba(255, 255, 255, 0.01);
+}
+
+.cron-calendar-repeating-strip {
+  border: 1px solid var(--border);
+  border-radius: 10px;
+  padding: 8px;
+  background: rgba(255, 255, 255, 0.015);
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+}
+
+.cron-calendar-repeating-list {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 6px;
+}
+
+.cron-calendar-repeating-pill {
+  min-width: 220px;
+  max-width: 100%;
+  border: 1px solid transparent;
+  border-radius: 8px;
+  padding: 6px 8px;
+  display: flex;
+  flex-direction: column;
+  gap: 2px;
+}
+
+.cron-calendar-legend {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  flex-wrap: wrap;
+}
+
+.cron-calendar-title {
+  color: var(--card-label-bright);
+}
+
+.cron-calendar-legend-label {
+  font-size: 11px;
+  color: var(--text-dim);
+  margin-right: 2px;
+}
+
+.cron-calendar-legend-pill {
+  font-size: 10px;
+  line-height: 1;
+  border: 1px solid transparent;
+  border-radius: 999px;
+  padding: 4px 7px;
+}
+
+.cron-calendar-grid-wrap {
+  border: 1px solid var(--border);
+  border-radius: 10px;
+  overflow: auto;
+  background: rgba(255, 255, 255, 0.01);
+}
+
+.cron-calendar-grid-header,
+.cron-calendar-grid-row {
+  display: grid;
+  grid-template-columns: 88px repeat(7, minmax(130px, 1fr));
+}
+
+.cron-calendar-day-header {
+  font-size: 11px;
+  color: var(--text-muted);
+  padding: 8px;
+  border-left: 1px solid var(--border);
+  border-bottom: 1px solid var(--border);
+  background: rgba(0, 0, 0, 0.12);
+  position: sticky;
+  top: 0;
+  z-index: 1;
+}
+
+.cron-calendar-day-header.is-today {
+  background: rgba(99, 235, 255, 0.08);
+}
+
+.cron-calendar-hour-cell {
+  font-size: 11px;
+  color: var(--text-dim);
+  padding: 8px;
+  border-bottom: 1px solid var(--border);
+  border-right: 1px solid var(--border);
+  background: rgba(0, 0, 0, 0.15);
+}
+
+.cron-calendar-grid-cell {
+  min-height: 44px;
+  border-left: 1px solid var(--border);
+  border-bottom: 1px solid var(--border);
+  padding: 5px;
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
+}
+
+.cron-calendar-grid-cell.is-today {
+  background: rgba(99, 235, 255, 0.04);
+}
+
+.cron-calendar-slot-chip {
+  font-size: 11px;
+  line-height: 1.2;
+  border: 1px solid transparent;
+  border-radius: 7px;
+  padding: 4px 6px;
+  display: inline-flex;
+  align-items: center;
+  min-height: 20px;
+  width: 100%;
+  max-width: 100%;
+  overflow: hidden;
+}
+
+.cron-calendar-slot-overflow {
+  font-size: 10px;
+  color: var(--text-dim);
+  padding-left: 2px;
+}
+
+.cron-calendar-slot-tier-low {
+  background: rgba(34, 211, 238, 0.14);
+  border-color: rgba(34, 211, 238, 0.38);
+  color: #c8f6ff;
+}
+
+.cron-calendar-slot-tier-unknown {
+  background: rgba(148, 163, 184, 0.08);
+  border-color: rgba(148, 163, 184, 0.24);
+  color: #c9d2df;
+}
+
+.cron-calendar-slot-tier-medium {
+  background: rgba(59, 130, 246, 0.14);
+  border-color: rgba(59, 130, 246, 0.38);
+  color: #d6e6ff;
+}
+
+.cron-calendar-slot-tier-high {
+  background: rgba(251, 191, 36, 0.14);
+  border-color: rgba(251, 191, 36, 0.38);
+  color: #ffecc1;
+}
+
+.cron-calendar-slot-tier-very-high {
+  background: rgba(239, 68, 68, 0.14);
+  border-color: rgba(239, 68, 68, 0.38);
+  color: #ffd6d6;
+}
+
+.cron-calendar-slot-tier-disabled {
+  background: rgba(148, 163, 184, 0.08);
+  border-color: rgba(148, 163, 184, 0.28);
+  color: #98a5b8;
+}
+
+.cron-calendar-slot-upcoming {
+  opacity: 1;
+}
+
+.cron-calendar-slot-past {
+  opacity: 0.75;
+}
+
+.cron-calendar-slot-ok {
+  box-shadow: inset 0 0 0 1px rgba(34, 197, 94, 0.38);
+}
+
+.cron-calendar-slot-error {
+  box-shadow: inset 0 0 0 1px rgba(239, 68, 68, 0.45);
+}
+
+.cron-calendar-slot-skipped {
+  box-shadow: inset 0 0 0 1px rgba(250, 204, 21, 0.45);
+}
+
+.cron-calendar-compact-strip {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 6px;
+  align-items: center;
+}
+
+.cron-calendar-compact-chip {
+  font-size: 11px;
+  line-height: 1.2;
+  border: 1px solid rgba(148, 163, 184, 0.32);
+  border-radius: 7px;
+  padding: 4px 8px;
+  display: inline-flex;
+  align-items: center;
+  gap: 6px;
+  max-width: 260px;
+  cursor: pointer;
+}
+
+.cron-calendar-compact-time {
+  font-size: 10px;
+  font-family: var(--font-mono, monospace);
+  opacity: 0.7;
+  white-space: nowrap;
+}
+
+.cron-runs-trend-bars {
+  display: grid;
+  grid-template-columns: repeat(var(--cron-runs-trend-columns, 7), minmax(0, 1fr));
+  gap: 4px;
+  align-items: end;
+}
+
+.cron-runs-trend-col {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 4px;
+  width: 100%;
+  cursor: pointer;
+  transition: opacity 140ms ease, transform 140ms ease;
+}
+
+.cron-runs-trend-col.is-dimmed {
+  opacity: 0.35;
+}
+
+.cron-runs-trend-col.is-selected .cron-runs-trend-track {
+  border-color: rgba(148, 163, 184, 0.55);
+  box-shadow: 0 0 0 1px rgba(148, 163, 184, 0.2);
+}
+
+.cron-runs-trend-col:focus-visible {
+  outline: none;
+}
+
+.cron-runs-trend-col:focus-visible .cron-runs-trend-track {
+  border-color: rgba(148, 163, 184, 0.65);
+  box-shadow: 0 0 0 1px rgba(148, 163, 184, 0.24);
+}
+
+.cron-runs-trend-track {
+  width: 100%;
+  height: 120px;
+  border: 1px solid var(--border);
+  border-radius: 6px;
+  background: rgba(0, 0, 0, 0.16);
+  overflow: hidden;
+  display: flex;
+  align-items: flex-end;
+}
+
+.cron-runs-trend-bar {
+  width: 100%;
+  min-height: 2px;
+  display: flex;
+  flex-direction: column;
+  justify-content: flex-end;
+}
+
+.cron-runs-trend-segment-ok {
+  background: rgba(34, 197, 94, 0.75);
+}
+
+.cron-runs-trend-segment-error {
+  background: rgba(239, 68, 68, 0.78);
+}
+
+.cron-runs-trend-segment-skipped {
+  background: rgba(250, 204, 21, 0.7);
+}
+
+.cron-runs-trend-label {
+  font-size: 10px;
+  color: var(--text-dim);
+  min-height: 12px;
+}
+
+.cron-runs-trend-legend {
+  margin-top: 2px;
+  display: flex;
+  align-items: center;
+  gap: 10px;
+}
+
+.cron-runs-trend-legend-item {
+  display: inline-flex;
+  align-items: center;
+  gap: 5px;
+  font-size: 10px;
+  color: var(--text-dim);
+}
+
+.cron-runs-trend-legend-dot {
+  width: 7px;
+  height: 7px;
+  border-radius: 999px;
+}
+
+.cron-runs-trend-legend-dot.is-ok {
+  background: rgba(34, 197, 94, 0.95);
+}
+
+.cron-runs-trend-legend-dot.is-error {
+  background: rgba(239, 68, 68, 0.95);
+}
+
+.cron-runs-trend-legend-dot.is-skipped {
+  background: rgba(250, 204, 21, 0.95);
+}

package/lib/public/css/theme.css

@@ -9,6 +9,7 @@
   --text: #c9d1d9;
   --text-muted: #6e7681;
   --text-dim: #424854;
+  --card-label-bright: #dbe7f6;
   --accent: #63ebff;
   --accent-dim: rgba(99, 235, 255, 0.4);
   --accent-link: rgba(99, 235, 255, 0.6);
@@ -53,6 +54,10 @@ body::before {
   color: var(--text-muted);
 }
 
+.card-label-bright {
+  color: var(--card-label-bright);
+}
+
 .ac-small-heading {
   font-size: 11px;
   font-weight: 500;
@@ -593,6 +598,15 @@ textarea:focus {
   flex: 1 1 0%;
 }
 
+.ac-segmented-control > .inline-flex {
+  align-self: stretch;
+  display: flex;
+}
+
+.ac-segmented-control-full > .inline-flex {
+  flex: 1 1 0%;
+}
+
 .ac-segmented-control-lg {
   height: 36px;
   border-radius: 12px;
@@ -612,3 +626,61 @@ textarea:focus {
   color: var(--accent);
   background: var(--bg-active);
 }
+
+.ac-segmented-control-dark {
+  background: rgba(0, 0, 0, 0.25);
+}
+
+/* ── PopActions: animated action group ───────── */
+
+.ac-pop-actions {
+  display: flex;
+  align-items: flex-start;
+  gap: 8px;
+  flex-shrink: 0;
+}
+
+.ac-pop-actions-hidden {
+  display: none;
+}
+
+.ac-pop-actions-in > * {
+  animation: acPopIn 0.25s cubic-bezier(0.34, 1.56, 0.64, 1) both;
+}
+
+.ac-pop-actions-in > *:nth-child(2) {
+  animation-delay: 0.06s;
+}
+
+.ac-pop-actions-in .ac-btn-cyan {
+  animation: acPopIn 0.25s cubic-bezier(0.34, 1.56, 0.64, 1) 0.06s both;
+}
+
+.ac-pop-actions-out > * {
+  animation: acPopOut 0.18s ease-in both;
+}
+
+.ac-pop-actions-out > *:first-child {
+  animation-delay: 0.03s;
+}
+
+.ac-pop-actions > button:active:not(:disabled) {
+  transform: translateY(1px) scale(0.98);
+}
+
+@keyframes acPopIn {
+  from { opacity: 0; transform: scale(0.85); }
+  to   { opacity: 1; transform: scale(1); }
+}
+
+@keyframes acPopOut {
+  from { opacity: 1; transform: scale(1); }
+  to   { opacity: 0; transform: scale(0.85); }
+}
+
+.watchdog-logs-panel {
+  min-height: 160px;
+  max-height: 80vh;
+  resize: vertical;
+}
+

package/lib/public/js/app.js

@@ -16,6 +16,7 @@ import { AppSidebar } from "./components/sidebar.js";
 import {
   AgentsRoute,
   BrowseRoute,
+  CronRoute,
   DoctorRoute,
   EnvarsRoute,
   GeneralRoute,
@@ -75,10 +76,20 @@ const App = () => {
   } = useAgents();
 
   const isAgentsRoute = location.startsWith("/agents");
+  const isCronRoute = location.startsWith("/cron");
   const selectedAgentId = (() => {
     const match = location.match(/^\/agents\/([^/]+)/);
     return match ? decodeURIComponent(match[1]) : "";
   })();
+  const agentDetailTab = (() => {
+    const match = location.match(/^\/agents\/[^/]+\/([^/]+)/);
+    const tab = match ? match[1] : "";
+    return tab === "tools" ? "tools" : "overview";
+  })();
+  const selectedCronJobId = (() => {
+    const match = location.match(/^\/cron\/([^/]+)/);
+    return match ? decodeURIComponent(match[1]) : "";
+  })();
 
   useEffect(() => {
     if (!isAgentsRoute) return;
@@ -233,15 +244,31 @@ const App = () => {
             saving=${agentsState.saving}
             agentsActions=${agentsActions}
             selectedAgentId=${selectedAgentId}
+            activeTab=${agentDetailTab}
             onSelectAgent=${(agentId) => setLocation(`/agents/${encodeURIComponent(agentId)}`)}
+            onSelectTab=${(tab) => {
+              const safePath = tab && tab !== "overview"
+                ? `/agents/${encodeURIComponent(selectedAgentId)}/${tab}`
+                : `/agents/${encodeURIComponent(selectedAgentId)}`;
+              setLocation(safePath);
+            }}
             onNavigateToBrowseFile=${browseActions.navigateToBrowseFile}
             onSetLocation=${setLocation}
           />
         </div>
+        <div
+          class="app-content-pane cron-pane"
+          style=${{ display: isCronRoute ? "block" : "none" }}
+        >
+          <${CronRoute}
+            jobId=${selectedCronJobId}
+            onSetLocation=${setLocation}
+          />
+        </div>
         <div
           class="app-content-pane"
           onscroll=${shellActions.handlePaneScroll}
-          style=${{ display: browseState.isBrowseRoute || isAgentsRoute ? "none" : "block" }}
+          style=${{ display: browseState.isBrowseRoute || isAgentsRoute || isCronRoute ? "none" : "block" }}
         >
           <div
             class=${`mobile-topbar ${shellState.mobileTopbarScrolled ? "is-scrolled" : ""}`}
@@ -269,7 +296,7 @@ const App = () => {
             </span>
           </div>
           <div class="max-w-2xl w-full mx-auto">
-            ${!browseState.isBrowseRoute && !isAgentsRoute
+            ${!browseState.isBrowseRoute && !isAgentsRoute && !isCronRoute
               ? html`
                   <${Switch}>
                     <${Route} path="/general">
@@ -408,11 +435,19 @@ const App = () => {
   `;
 };
 
-render(
-  html`
-    <${Router} hook=${useHashLocation}>
-      <${App} />
-    </${Router}>
-  `,
-  document.getElementById("app"),
-);
+const rootElement = document.getElementById("app");
+if (rootElement) {
+  const appBootCounter = "__alphaclawSetupAppBootCount";
+  window[appBootCounter] = Number(window[appBootCounter] || 0) + 1;
+  // Defensive: clear root so duplicate bootstraps cannot stack full app shells.
+  render(null, rootElement);
+  rootElement.replaceChildren();
+  render(
+    html`
+      <${Router} hook=${useHashLocation}>
+        <${App} />
+      </${Router}>
+    `,
+    rootElement,
+  );
+}